Introduccion a HTML5
Que es HTML?
HTML (Hypertext Markup Language) es un lenguaje de marcado (que no es lo mismo que un lenguaje de programación) que sirve para definir la estructura y la semántica de nuestra página web (luego veremos que significa esto).
HTML fue creado y es mantenido por una organización sin ánimo de lucro llamada W3C. El W3C es un consorcio formado por más de 400 empresas (entre ellas las que desarrollan los principales navegadores como Google, Microsoft, Mozilla, Apple...), etc.
Desde el consorcio trabajan continuamente en definir cómo debe evolucionar este lenguaje y otros estándares que conforman la web. Posteriormente los fabricantes de navegadores preparan los mismos intentando conseguir que un código funcione igual en todos los navegadores. Aunque desafortunadamente no siempre es así, cada vez es una realidad más cercana.
Por tanto, a lo largo de los años las versiones de HTML han evolucionado: HTML 2.0 (1995), HTML 4.0 (1997), XHTML (2000), HTML5 (2014), etc. con el objetivo de adaptarse a los nuevos tiempos y así dar soporte a nuevas necesidades (estandarización de los sistemas de audio, vídeo, etc).
Snippets interactivos
Vamos a ver una breve introducción al funcionamiento de la interfaz:
- Permite navegar entre las diferentes lecciones
- Permite navegar entre los diferentes snippets
- Ejemplo de código HTML (con la sintaxis resaltada)
- Resultado del código (3) en embebido en la página
- Nos permite abrir la previsualización a pantalla completa
- Nos permite usar el editor web Codepen.io, un editor bastante popular para experimentar con el código.
- Enlace a los issues de Github donde podremos publicar cualquier duda o problema sobre los ejemplos.
Puedes acceder a esta interfaz a través de la siguiente URL:
http://libro.cursohtml5desdecero.com/snippets/html/
Etiquetas
En el último estándar de HTML (HTML5) existen más de 100 elementos que nos permitirán crear etiquetas.
NOTA AUTOR DEL CURSO.Como comentaba al inicio del curso no los veremos todos, de hecho no es habitual encontrar a nadie que los conozca todos, ni siquiera los que llevamos tantos años haciendo webs, lo importante es saber dónde buscarlos y saber cómo usarlos.
Por esto vamos a empezar por entender qué aspecto tienen. Lo primero es saber que las etiquetas sólo pueden ser de dos tipos:
1) Las que tienen una apertura y un cierre como en el siguiente caso:
<elemento atributo="valor">Contenido</elemento>
Por ejemplo:
<a href="http://www.google.com">Google</a>
En este caso decimos que: "tenemos un elemento a donde el valor del atributo href es http://www.google.com, y que su contenido es Google". No hace falta que te preocupes aún por el significado, luego haremos incapié en esto.
Si nos fijamos las etiquetas siempre están contenidas entre los símbolos < >, y el cierre sólo incluye el nombre del elemento precedido de una barra lateral "/" (p.e. </elemento>).
2) Por otro lado están los elementos auto-contenidos (los que no se cierran explícitamente):
<elemento atributo="valor">
Por ejemplo:
<img src="html-css-js.png" alt="Logotipos de HTML5, CSS3 y JavaScript">
Es importante destacar que el atributo y el valor son opcionales.
Vamos a ver algunos ejemplos de nombres de etiquetas:
- elemento: html, head, meta, title, body, img...
- atributo: charset, src, alt, ...
- valor: UTF-8, "url" (la URL a un recurso), "texto", ...
A mi siempre me gusta tener una "chuleta" (o cheatsheet) a mano que resuma todos los elementos y algunos de los atributos que aceptan. Pero por ahora no hace falta que te distraigas con esto, lo importante es que entiendas el formato.
Anidación de etiquetas
También es importante saber que unas etiquetas pueden contener a otras (una o varias), o como se suele decir "que se pueden anidar".
Por ejemplo:
<head>
<title>Título de la página</title>
<meta name="author" content="Raúl Jiménez Ortega - @hhkaos">
</head>
En este caso vemos que la etiqueta head tiene como contenido a otra etiqueta title. En este caso se dice que:
- La etiqueta head es el padre de la etiqueta title y meta.
- Y que la etiqueta title y meta son hijas de la etiqueta head.
- La etiqueta title y meta son hermanas.
Si nos fijamos, además, la etiqueta anidada (title) está en una nueva línea y con un nivel de indentación/sangrado mayor. Esto es así por una convención mundial a la que se ha llegado para que los programadores escribamos código de una manera similar, tanto para hacernos más fácil y comprensible el código cuando este crezca, como para cuando tengamos que compartirlo con otros programadores.
Orden de apertura y cierre
Cuando anidamos etiquetas unas dentro de otras es muy importante cerrarlas en orden. Esto quiere decir que la primera etiqueta en cerrarse tiene que ser la última que se abrió, así por ejemplo este ejemplo sería incorrecto:
<p>El orden es <strong>muy importante</p></strong>
La forma correcta de hacerlo sería:
<p>El orden es <strong>muy importante</strong></p>
Recordemos que hay etiquetas que no es necesario cerrarlas por lo que esto sería correcto:
<p>
El orden es <strong>muy importante</strong>.<br>
Así introducíamos un salto de línea.
</p>
Otros aspectos
Me gustaría puntualizar otros dos detalles:
- No todas las etiquetas son anidables entre sí; por ejemplo: una etiqueta body no puede contener una etiqueta head.
- Es importante indentar bien el código porque en muchos casos nos encontraremos muchos niveles de anidación, etiquetas que contienen etiquetas que a su vez contienen etiquetas, etc. ya que no existe un límite máximo de anidamiento.
Estructura básica de una página
Primero me gustaría hacer una pequeña aclaración sobre terminología que voy a usar, diferenciaremos:
- Página web: como una página individual dentro de un sitio web (p.e: rauljimenez.info/contacto)
- Sitio web (o web): como el conjunto de todas las páginas en las que podemos navegar dentro de un mismo dominio (p.e: rauljimenez.info es un sitio web que incluye: rauljimenez.info/experiencia, rauljimenez.info/contacto, etc).
Dicho esto, toda página web que hagamos en HTML5 debe tener una estructura inicial similar a la siguiente:
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<title>Título de la página</title>
</head>
<body></body>
</html>
A continuación explicamos la función que cumple cada etiqueta:
<!DOCTYPE html>: indicar al navegador que el código HTML en el que está escrita la página es en la versión 5, osea que es HTML5. +info<html lang="es">... </html>: indica la raíz del documento y todas las etiquetas deben estar incluidas dentro. Además se especifica el idioma en el que está escrita, es = Español (+idiomas).<head> ... </head>: se usa para envolver otras etiquetas que ofrecen información principalmente a: el navegador, a los buscadores y a otras páginas (como pueden ser redes sociales, etc). La información especificada dentro del head no se muestra dentro1 de la página web que ve el usuario.<meta charset="UTF-8">: indica al navegador qué tipo de caracteres contiene la página. Con el atributo charset indicamos cuál de todos los juegos de caractares disponibles usamos. Con el valor UTF-8 podremos crear contenido en la mayoría de los sistemas de escritura: español, inglés, francés, etc.<title> ... </title>: indica el título de nuetra página. Este se muestra en: la pestaña del navegador, el enlace que indexan los buscadores, etc.<body> ... </body>: contiene todo el contenido visible por el usuario dentro de nuestra página.
Observa que la etiqueta html contiene dos hijas: head y body, esto ya no es obligatorio en HTML5 ya que se puede omitir las etiquetas html, body y head, pero por convención es recomendable usarlas.
Aquí puedes ver el ejemplo interactivo: Lección 1 - Snippet 1
Aclaraciones:
1. Cuando digo dentro me refiero al contenido de la página, lo que no incluye la pestaña del navegador ni la barra de direcciones.
Etiquetas básicas
Para terminar esta lección vamos a aprender el significado de ocho de las etiquetas que con más frecuencia tendremos que usar cuando creemos páginas web:
<h1></h1>: esta etiqueta se utiliza para representar el encabezado de una página, como si fuera el índice de un libro. Puede variar desde 1 hasta 6 para diferenciar subniveles (+info).<ul></ul>: representa una lista de elementos, donde el orden de los elementos no es importante - esto quiere decir que el cambio del orden no modifica el significado. (+ìnfo).<ol></ol>: representa una lista de elementos, donde el orden de los elementos sí es importante - esto quiere decir que el cambio del orden modifica el significado. (+ìnfo).<li></li>: representa un elemento de la lista y su padre siempre tiene que ser una etiqueta ol o ul. (+ìnfo).<strong></strong>: representa algo muy importante, serio (para avisos o precauciones) o urgente (que debe ser leído antes). (+ìnfo).<em></em>: sirve para enfatizar en el contenido. (+ìnfo).<!-- -->: se utiliza para añadir comentarios dentro del código que el usuario no podrá ver. Por ejemplo para añadir notas de tareas pendientes, aclaraciones que nos ayuden a nosotros o a otras personas a entender el código, etc. (+ìnfo).
Puedes consultar los ejemplos en la lección 2 - Snippet 1-5).
Truco: Para que recuerdes mejor qué significa cada elemento, las etiquetas piensa en los acrónimos en inglés:
- h1 = heading1; h2 = heading 2; ...
- p = paragraph
- br = break line
- ul = unordered list
- ol = ordered list
- li = list item
- em = emphasis
El siguiente ejemplo muestra una página web que combina todas ellas:
<!DOCTYPE html>
<!-- TODO: añadir la etiqueta lang -->
<html>
<head>
<meta charset="UTF-8">
<title>Ejemplo con etiquetas básicas</title>
</head>
<body>
<h1>Etiquetas HTML</h1>
<p>
Este ejemplo muestra cómo combinar algunas de las etiquetas más básicas de HTML5. <br>
Recuerda que <strong>es importante entender la diferencias entre ellas</strong>.
</p>
<h2>Etiqueta ul+li</h2>
<p>
Si listamos personas nominadas a los Oscars, dado que el orden no altera el significado, debemos usar <em>ul</em>.
</p>
<ul>
<li>David Verdaguer</li>
<li>Jesús Castro</li>
<li>Israel Elejalde</li>
<li>Dani Rovira</li>
</ul>
<h2>Etiqueta ol+li</h2>
<p>
En el caso de que estemos listando elementos donde el orden es importante, como por ejemplo la clasificación de un mundial de fútbol, debemos usar <em>ol</em>.
</p>
<ol>
<li>España</li>
<li>Países Bajos</li>
<li>Alemania</li>
<li>Uruguay</li>
</ol>
</body>
</html>
Esto generaría una página como la siguiente:
Es importante destacar que aunque el navegador le añade un estilo (CSS) por defecto a las etiquetas, por ejemplo:
h1yh2una fuente mayor y negritastrongen negritaulyolcon un margen a la izquierda y un punto o número respectivamenteemen cursiva
Esto no es responsabilidad del HTML, esto lo podremos personalizar en un futuro con CSS. Así que insisto, recuerda que HTML sólo sirve para dotar de estructura y semántica al contenido.
Este valor semántico es muy importante entre otras cosas para por ejemplo:
- Que los buscadores (que no son más que programas automatizados) puedan "entender" el contenido de nuestra página y así poder detectar de qué estamos hablando y qué es importante.
- Para que otras herramientas como por ejemplo los navegadores para invidentes (p.e. WebbIE) que lo que hacen es leer el contenido al usuario u otros navegadores basados en texto.
Para ver mas etiquetas con el siguiente link
En el siguiente link se encuentra un curso de html5 el cual esta muy completo.
