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.
Etiquetas
En el último estándar de HTML (HTML5) existen más de 100 elementos que nos permitirán crear etiquetas. 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 hincapié 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ícita mente):
<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", ...
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>No todas las etiquetas son anidables entre sí; por ejemplo: una etiqueta body no puede contener una etiqueta head. Pero no te preocupes de momento por esto, en otra lección veremos cómo podemos saber qué etiquetas son anidables entre sí.
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
Definiciones:
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.
<html lang="es">... </html>: indica la raíz del documento ytodaslas etiquetas deben estar incluidas dentro. Además se especifica el idioma en el que está escrita,es= Español.
<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 dentro 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 detodos los juegos de caractares disponiblesusamos. Con el valorUTF-8podremos 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.
Etiquetas básicas
Para terminar este post vamos a aprender el significado de ocho de las etiquetas que con más frecuencia tendremos que usar cuando creemos páginas web:
<p></p>: representa un párrafo.
<br>: representa un salto de línea.
<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.
<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.
<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.
<li></li>: representa un elemento de la lista y su padre siempre tiene que ser una etiqueta ol o ul.
<strong></strong>: representa algo muy importante, serio (para avisos o precauciones) o urgente (que debe ser leído antes).
<em></em>: sirve para enfatizar en el contenido.
<!-- -->: 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.