Al abrir una página web con nuestro navegador lo que está haciendo la aplicación del navegador web es, principalmente, interpretar un fichero con extensión HTM o HTML.
HTML son las siglas de HyperText Markup Language (Lenguaje de Marcado de Hipertexto). Es importante resaltar lo de lenguaje de marcado: HTML no es un lenguaje de programación. No “ejecuta” lógica como lo haría Swift, Python o JavaScript, sino que marca el contenido para indicar diversa información semántica como qué título tiene la página, en qué idioma está el contenido principal, qué elementos hay en la página (párrafos, imágenes, controles de formulario, etc) indicando qué es cada trozo de contenido en la página.
HTML se usa principalmente para estructurar contenido en la Web, aportar semántica en los contenidos y ser el nexo de unión para otras tecnologías de la web como CSS y Javascript.
Ejemplo básico en HTML
Un ejemplo básico del código HTML de un fichero .htm podría ser el siguiente:
<!doctype html>
<html>
<head>
<title>Mi primera página</title>
</head>
<body>
<h1>Mi primera página</h1>
<p>Este es un párrafo con información.</p>
<a href=»https://programaraciegas.net»>Visitar el blog</a>
</body>
</html>
Si copiamos el contenido anterior en un fichero con la extensión .htm, por ejemplo «prueba.htm» y lo abrimos con nuestro navegador web veremos lo que hemos creado.
Partes de un fichero HTML
Un archivo HTML suele tener extensión .html (por ejemplo, index.html). Aunque puede contener muchas secciones, la estructura base se repite casi siempre.
Declaración del tipo de documento
La primera línea típica es:
<!doctype html>
Esta declaración indica al navegador que el documento debe interpretarse como HTML moderno.
Elemento raíz: <html>
Todo el contenido se engloba dentro de <html>…</html>:
<!doctype html>
<html>
...
</html>
Cabecera del documento: <head>
La sección <head> contiene metadatos: información para el navegador y para otros sistemas, pero que normalmente no se muestra como contenido principal en pantalla.
Ejemplo:
<head>
<meta charset="utf-8">
<title>Introducción a HTML</title>
</head>
La línea <meta charset=»utf-8″> indica la codificación de caracteres (muy importante para tildes y caracteres especiales).
La línea <title> define el título que suele verse en la pestaña del navegador.
Cuerpo del documento: <body>
En <body> va el contenido visible o “principal”: textos, enlaces, imágenes, formularios, etc.
<body>
<h1>Introducción a HTML</h1>
<p>HTML estructura el contenido de una página web.</p>
</body>
Las etiquetas HTML
Una etiqueta (tag) es una marca que indica al navegador qué tipo de elemento es un fragmento de contenido.
La mayoría de elementos HTML se representan con una sintaxis básica consistente en un nombre de etiqueta encerrado entre los signos menor que y mayor que (< y >).
<hr>
Algunas etiquetas requieren otra etiqueta de cierre. Esta etiqueta de cierre suele ser la misma etiqueta pero su nombre comienza con el símbolo de barra (/). Entre la etiqueta de apertura y la de cierre va el contenido.
<p>Esto es un contenido.</p>
Además, hay etiquetas que incluyen atributos para poder realizar ciertas acciones.
<a href=»https://programaraciegas.net»>
Visita Programar a ciegas
</a>
El atributo href permite indicar qué dirección URL se abrirá el enlace identificado por la etiqueta a.