2  El Lenguaje de marcado de hipertexto (HTML)

2.1 Introducción

El Lenguaje de Marcado de Hipertexto o HTML (siglas en inglés de Hypertext Markup Language) es el lenguaje de marcas estándar para documentos diseñados para desplegarse en un navegador web. El término “hipertexto” hace referencia a los enlaces que conectan páginas web entre sí, ya sea dentro de un mismo sitio web o entre diferentes sitios web (ej. este es un enlace al primer sitio web). El HTML fue creado en 1990 por Tim Berners-Lee. Junto con Hojas de Estilo en Cascada o CSS (siglas en inglés de Cascading Style Sheets) y JavaScript conforma el grupo de las tres tecnologías principales de la Web.

El HTML especifica la estructura y la semántica de una página web mediante marcas (también llamadas etiquetas) o tags. Un navegador web recibe documentos HTML desde un servidor web (o desde almacenamiento local) y despliega sus componentes (textos, imágenes, hiperenlaces, etc.) de acuerdo con las especificaciones contenidas en los tags. Se recomienda que los documentos HTML no contengan componentes de presentación ni de interactivdad y que estos sean implementados mediante CSS y JavaScript.

EL HTML es un estándar del World Wide Web Consortium (W3C), un consorcio internacional creado por Tim Berners-Lee en 1994 que genera recomendaciones y estándares que aseguran el crecimiento de la WWW a largo plazo. La versión más reciente del estándar es HTML5 y se caracteriza por incluir soporte para los tipos más recientes de multimedios y reducir la necesidad de plataformas propietarias (ej. Adobe Flash) para su incorporación en páginas web que pueden desplegarse en diferentes tipos de dispositivos y tamaños de pantallas (computadoras, tabletas, teléfonos, pantallas gigantes, etc.).

El siguiente es un ejemplo de un documento HTML, el cual contiene, entre otras, etiquetas que especifican el lenguaje, el título y el cuerpo del documento, además de comentarios (que no son desplegados por el navegador web).

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <title>Ejemplo de documento HTML</title>     
</head>
<body>
    <!-- Comentario -->
    Contenido de documento HTML.
</body>
</html>

2.2 Conceptos básicos

2.2.1 Elementos

Un documento HTML está compuesto por elementos, como el que muestra en la Figura 2.1.

Los componentes de un elemento HTML son:

  1. La etiqueta de apertura: consiste del nombre del elemento (en este caso p, correspondiente a un párrafo), encerrado por paréntesis angulares (< >) de apertura y cierre. Establece el inicio del elemento —en este caso, donde es el comienzo del párrafo—.
  2. El contenido: este es el contenido del elemento, que en este caso es solamente texto. También pueden usarse imágenes, hipervínculos, direcciones web u otros elementos HTML.
  3. La etiqueta de cierre: es similar que la etiqueta de apertura, pero incluye una barra de cierre (/) antes del nombre de la etiqueta. Establece el final del elemento —en este caso, en donde termina el párrafo—.

2.2.2 Atributos

Los elementos HTML pueden tener atributos, como el que se muestra en la Figura 2.2.

Los atributos proporcionan información adicional acerca del elemento, la cual no se despliega en su contenido. Los atributos se especifican en la etiqueta de apertura mediante la sintaxis nombre_atributo=valor. En la Figura 2.2, class es el nombre del atributo y editor-note su valor (class es un atributo que permite asociar al elemento con una clase o grupo de elementos, lo que puede ser útil para asignarles de manera conjunta estilos y otras propiedades). Si un elemento tiene varios atributos, deben separarse con (al menos) un espacio en blanco. Si el valor del atributo contiene espacios, debe encerrarse entre comillas dobles (““) o simples (’’). Se considera una buena práctica entrecomillar los valores de atributos aunque no contengan espacios, para mejorar la legibilidad.

Cada elemento tiene una lista de atributos que puede usar. Existen atributos globales, que pueden usarse en todos los elementos.

2.2.3 Elementos anidados y elementos vacíos

Un elemento HTML puede contener otros elementos. A estos elementos se les llama elementos anidados. Por ejemplo:

<p>Mi gato es muy <strong>gruñón</strong></p>

El elemento anterior también puede escribirse así:

<p>
    Mi gato es muy <strong>gruñón</strong>
</p>
La tabulación es opcional, pero ayuda a mejorar la legibilidad. En ambos casos, el resultado es:

Mi gato es muy gruñón

Algunos elementos no tienen contenido, solamente atributos. Estos elementos se denominan elementos vacíos. Por ejemplo:

<img src="img/html-elemento-atributos.png" alt="Atributo HTML">

Como puede observarse, el elemento img, el cual se usa para incluir una imagen, no tiene una etiqueta de cierre y, por lo tanto, no puede especificar contenido.

2.2.4 Comentarios

Las etiquetas <!-- y --> marcan el inicio y el final de cadenas de caracteres que no son interpretadas como código HTML por los navegadores web y, por lo tanto, no se despliegan. Estos “comentarios” pueden ser utilizados para explicar la lógica del documento HTML o realizar cualquier tipo de anotación. Como en el caso de los comentarios de los lenguajes de programación, se recomienda utilizar comentarios en HTML para facilitar la comprensión del código.

<!-- Esto es un comentario -->
<p>Esto es un párrafo.</p>

2.3 Principales elementos

A continuación, se describen y se ejemplifican algunos de los principales elementos de HTML.

2.3.1 DOCTYPE

DOCTYPE (tipo de documento) le informa al navegador web cual es la versión HTML de un documento. No es una etiqueta ni un elemento HTML. Más bien es una declaración que le permite al navegador saber como interpretar los elementos HTML que hay en el resto del documento. Se coloca al inicio del documento.

La siguiente etiqueta DOCTYPE especifica que el documento usa HTML5.

<!DOCTYPE html>

2.3.2 El elemento html

El elemento html es el elemento raíz de un documento y contiene el resto de los elementos.

El siguiente elemento html especifica el lenguaje del documento a través del atributo globlal lang.

<html lang="es">
    <head>
    </head>
    <body>
    </body>
</html>

2.3.3 El elemento head

El elemento head contiene los metadatos del documento y otros elementos como su título y referencias a scripts y hojas de estilo (CSS).

<head>
    <meta charset="UTF-8">
    <title>Título del documento</title>
    
    <link rel="stylesheet" href="css/estilos.css">
    <script src="js/scripts.js"></script>        
</head>

2.3.4 El elemento meta

El elemento meta especifica metadatos del documento tales como su autor, descripción, palabras clave y juego de caracteres, entre otros.

<meta charset="UTF-8">
<meta name="author" content="Manuel Vargas">
<meta name="description" content="Curso introductorio de programación">
<meta name="keywords" content="Python, programación">

2.3.5 El elemento title

El elemento title especifica el título del documento, el cual se muestra en la parte superior de la ventana (o pestaña del navegador). Es un elemento obligatorio de todo documento HTML válido y debe estar ubicado dentro del elemento head.

<title>Curso de programación en Python</title>

2.3.7 El elemento script

El elemento script se utiliza para incluir código de algún lenguaje de programación, típicamente JavaScript, aunque también usarse con otros lenguajes y sintaxis (ej. JSON).

Enlace al código JavaScript de la biblioteca geoespacial Leaflet:

<script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js" integrity="sha512XQoYMqMTK8LvdxXYG3nZ448hOEQiglfqkJs1NOQV44cWnUrBc8PkAOcXy20w0vlaXaVUearIOBhiXZ5V3ynxwA==" crossorigin=""></script>

2.3.8 El elemento body

body especifica el contenido principal del documento (texto, multimedia, hipervínculos, etc.).

<body>
    <a href="https://www.python.org/">Python</a> es un lenguaje de programación creado por Guido van Rossum.
</body>

2.3.9 Los elementos h1 - h6

Los elementos h1-h6 (h1, h2, h3, h4, h5, h6) definen encabezados (headings) de seis niveles. h1 es el encabezado de mayor nivel (con letras más grandes) y h6 el de menor nivel.

<h1>Encabezado de nivel 1</h1>
<h2>Encabezado de nivel 2<h2>
<h3>Encabezado de nivel 3</h3>
<h3>Encabezado de nivel 3</h3>
<h2>Encabezado de nivel 2<h2>
<h3>Encabezado de nivel 3</h3>
<h3>Encabezado de nivel 3</h3>
Se visualiza así:

Encabezado de nivel 1

Encabezado de nivel 2

Encabezado de nivel 3

Encabezado de nivel 3

Encabezado de nivel 2

Encabezado de nivel 3

Encabezado de nivel 3

2.3.10 El elemento p

El elemento p define un párrafo (i.e. texto o elementos HTML delimitados por líneas en blanco al principio y al final). La etiqueta de cierre es opcional. Una etiqueta <p> sola genera una línea en blanco.

<p>Python es un lenguaje de programación de propósito general ...</p>
<p>Fue creado en 1989 por Guido van Rossum...</p>
Se visualiza así:

Python es un lenguaje de programación de propósito general …

Fue creado en 1989 por Guido van Rossum…

2.3.11 El elemento br

El elemento br (line break) genera un salto de línea (o “retorno de carro”) en el documento. No debe usarse para incrementar el espacio entre los parrafos. Para eso se recomienda utilizar el elemento p u hojas de estilo.

Mozilla Foundation<br>
1981 Landings Drive<br>
Building K<br>
Mountain View, CA 94043-0801<br>
USA

Se visualiza así: Mozilla Foundation
1981 Landings Drive
Building K
Mountain View, CA 94043-0801
USA

2.3.12 El elemento strong

El elemento strong se utiliza para denotar la importancia de una parte del texto. Los navegadores acostumbran usar letra en negrita para implementar este elemento. Sin embargo, no debe utilizarse para simplemente escribir un texto en negrita. Para eso, se recomienda emplear la propiedad font-weight de CSS.

<p>"... the most important rule, the rule you can never forget, no matter how much he cries, no matter how much he begs: <strong>never feed him after midnight</strong>."</p>
Se visualiza así:

“… the most important rule, the rule you can never forget, no matter how much he cries, no matter how much he begs: never feed him after midnight.”

Los elementos semánticos (i.e que pretenden transmitir un significado) como strong y em facilitan la comprensión de textos por parte de personas y también programas. Por ejemplo, los lectores de pantalla pueden utilizar estos elementos para pronunciar las palabras con mayor fuerza o volumen.

2.3.13 El elemento em

em marca un fragmento de texto al que se se da un énfasis particular. Puede utilizarse de forma anidada, con cada nivel de anidamiento indicando un mayor grado de énfasis. Los navegadores acostumbran usar letra en itálica para implementar este elemento. Sin embargo, no debe utilizarse para simplemente escribir un texto en itálica. Para eso, se recomienda emplear la propiedad font-style de CSS.

<p>Tenemos que <em>hacer</em> algo al respecto.</p>
Se visualiza así:

Tenemos que hacer algo al respecto.

Los elementos semánticos (i.e que pretenden transmitir un significado) como strong y em facilitan la comprensión de textos por parte de personas y también programas. Por ejemplo, los lectores de pantalla pueden utilizar estos elementos para pronunciar las palabras con mayor fuerza o volumen.

2.3.14 El elemento a

El elemento a (anchor o ancla) crea un hipervínculo a otro documento HTML, a un archivo, a una dirección de email o a cualquier otro tipo de URL (Uniform Resource Locator o localizador de recursos uniforme). El atributo href especifica el URL. El contenido del elemento especifica el texto que se le muestra al usuario en el enlace.

<a href="https://www.python.org/">El lenguaje de programación Python</a>

Se visualiza así: El lenguaje de programación Python

2.3.15 El elemento img

El elemento img inserta una imagen en un documento. Solo usa la etiqueta de apertura. El atributo src especifica el URL de la imagen y el atributo alt una descripción textual de la imagen. Los atributos height y width especifican, en pixeles, la altura y el ancho de la imagen respectivamente.

<img src="img/python-logo.png" alt="Logo de Python" height="100">

Se visualiza así:
Logo de Python

2.3.16 El elemento ul

ul define una lista no ordenada cuyos ítems se especifican mediante el elemento li (list item).

<ul>
    <li>Azúcar</li>
    <li>Harina</li>
    <li>Limones</li>
    <li>Arroz</li>
</ul>
Se visualiza así:
  • Azúcar
  • Harina
  • Limones
  • Arroz

2.3.17 El elemento ol

ol define una lista ordenada cuyos ítems se especifican mediante el elemento li (list item).

<ol>
    <li>Azúcar</li>
    <li>Harina</li>
    <li>Limones</li>
    <li>Arroz</li>
</ol>
Se visualiza así:
  1. Azúcar
  2. Harina
  3. Limones
  4. Arroz

2.3.18 El elemento table

El elemento table se utiliza para presentar datos en filas y columnas. Los elementos thead y tbody especifican el encabezado y el cuerpo de la tabla, respectivamente. El elemento tr especifica las filas y td las columnas o las celdas. th se usa en las celdas de los encabezados.

<table>
    <thead>
        <tr>
            <th colspan="2">Encabezado de la tabla</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Fila 1,columna 1</td><td>Fila 1,columna 2</td>
        </tr>
        <tr>
            <td>Fila 2,columna 1</td><td>Fila 2,columna 2</td>
        </tr>
    </tbody>
</table>
Se visualiza así:
Encabezado de la tabla
Fila 1,columna 1 Fila 1,columna 2
Fila 2,columna 1 Fila 2,columna 2

2.3.19 El elemento div

El elemento div se utiliza para definir secciones o agrupar contenidos en un documento.

En el ejemplo siguiente, div se emplea para asignar colores diferentes a dos partes de un documento:

<div style="background-color:#F00;">
    <h1>Sección roja</h1>
    <p>Esta sección tiene fondo rojo.</p>
</div>
<div style="background-color:#0F0;">
    <h1>Sección verde</h1>
    <p>Esta sección tiene fondo verde.</p>
</div>

2.4 Recursos adicionales