1° PERIODO.
TEMÁTICA: Páginas Web / Lenguaje de marcado HTML 5
¿Qué es HTML?
Actualmente la mayoría de las personas han visto
cientos de páginas web, pero muchos se preguntarán ¿Qué es HTML? ¿Para qué me
sirve? ¿Cómo funciona? ¿Es difícil escribir en HTML? ¿Dónde puedo escribir
HTML? Y otras preguntas como estas serán respondidas a continuación.
Si buscas en GOOGLE o en cualquier otro buscador la
definición de HTML, probablemente encontrarás está: “HTML es un lenguaje de
programación que se utiliza para el desarrollo de páginas de Internet. Se trata
de las siglas que corresponden a HyperText Markup Language, es decir, Lenguaje
de Marcas de Hipertexto”.
No obstante, este tipo de definiciones no nos dice
mucho porque la definición es técnica. Para algunas personas al leer esto,
piensan que HTML incluye el diseño gráfico de las páginas web, sin embargo, eso
no es cierto ya que HTML sólo sirve para indicar como va ordenado el contenido
de una página web. Esto lo hace por medio de las marcas de hipertexto las
cuales son etiquetas conocidas en inglés como tags.
Hasta el momento ya tenemos una idea sobre lo que hace
HTML, pero aún no sabemos cómo funcionan las etiquetas. Para esto vamos a
imaginar que tienen que hacer un ensayo sobre algún tema, consideraremos que el
ensayo será nuestra página web y la manera en la que va ordenado un ensayo es
por un título, la introducción, el desarrollo y la conclusión, si se tiene en
cuenta que esto nos dice cómo debe ir nuestro ensayo podemos considerar que
éstas serían las etiquetas porque nos dicen la estructura que lleva, es decir,
la forma en que se acomoda el texto en nuestro ensayo. Cabe mencionar que las
etiquetas no sólo sirven para ordenar nuestro contenido, sino que ayudan a los
buscadores como Google, Yahoo search y muchos otros a encontrar la información
por medio de las etiquetas.
Imagen 1. ¿Qué es HTML?
Fuente. La Web
Recopilación y listado de las nuevas etiquetas
semánticas de estructura HTML5. Estas nuevas etiquetas ayudan o sirven para
agrupar cada tipo de contenido HTML de nuestra web.
Imagen 2. Jerarquía etiquetas.
Fuente. La Web
Imagen 3. Hoja de referencia.
Fuente. La Web
VÍDEO 1. ¿Qué es una página Web?
Experiencia 1.
<!DOCTYPE html>: indicamos que es un documento
HTML5, es lo primero que escribes.
<html></html>: esta es la raíz de una
pagina web, va al principio y al final.
<head></head>: contiene información del encabezado y las
metas del documento.
<title>texto</title>: contiene el titulo
de la pagina.
<body>texto</body>: aquí va el contenido
de la pagina.
<h1>texto</h1>: para encabezados.
<p>texto</p>: elemento que crea un
párrafo.
<hr>:
elemento que trata una linea horizontal.
Experiencia 2. En esta nueva actividad de HTML podremos ver nuevas
etiquetas, las cuales tienen diferentes funciones y hace que nuestra elaboración
de nuestra página web sea más elaborada y organizada. Estas son las etiquetas:
<center>texto</center>: elemento para
centrar.
<br>: rompe a la siguiente línea, no necesita
cerrarse con </br>.
: espacios laterales, como si pulsara la
barra espaciadora.
Experiencia 3. En esta nueva guía podemos observar
nuevas etiquetas y los reconocidos “Atributos”, los cuales su función es
personalizar nuestro texto y tener un poco de dinamismo en ellos. Se usan para
darle información extra a una etiqueta. Estas son las etiquetas:
<i>texto<i>: coloca el texto en cursiva.
<em>texto</em>: cursiva para marcar texto
importante,los buscadores lo toman mas en cuenta.
<b>texto</b>: coloca el texto en negrilla.
<strong>texto</strong>: negrilla para
marcar texto importante, los buscadores lo toman en cuenta.
<u>texto</u>: coloca el texto subrayado.
<ins>texto</s>: coloca el texto insertado
(subrayado).
<s>texto</s>: coloca el texto techado.
<del>texto</del>: coloca el texto
eliminado (tachado).
Atributos.
tittle="nuevo": atributo que agrega un
tooltip al elemento.
color="blue": atributo que agrega un color
al elemento (los colores son en ingles).
width="400": atributo que agrega un ancho al
elemento.
size="50": atributo que agrega una talla al
elemento.
No hay comentarios.:
Publicar un comentario