HTML

Un tutorial básico¹⁾ de HTML. Hay mucho más para aprender, pero por algo hay que empezar.

Tim Berners-Lee definió en 1990 el lenguaje HTML como un subconjunto del lenguaje de etiquetas SGML con hipervínculos (links), y además creó el World Wide Web.

HTML es el acrónimo inglés de HyperText Markup Language (en Castellano, Lenguaje de Etiquetas de Hipertexto).

Como el propio World Wide Web Consortium (W3C) define brevemente: el HTML es el lenguaje de publicación de la World Wide Web (más comúnmente conocida como “la Web”).

World Wide Web es un conjunto de documentos de hipertexto enlazados entre si mediante hiperenlaces y es accesibles a través de Internet mediante un navegador. Obviamente si estás leyendo esta página es porque ya sabes esto.

Nota²⁾.

Desde hace unos cuantos años, HTML solo se utiliza para estructurar el contenido de una página (títulos, párrafos, listas, tablas, enlaces, bloques de texto,…) y CSS se utiliza para dar formato al contenido (colores, tamaños y tipos de letra de cada una de las partes del texto y/o de los bloques de la página, márgenes, colores de fondo de las distintas partes, formato de los enlaces,…).

Esto es especialmente importante tenerlo en cuenta en el caso de que enlace a mi antiguo curso (inconcluso) de HTML y CSS, allí se explica cómo dar formato al texto mediante HTML y, como no llegué a escribir la parte de CSS, no expliqué que el formateo ya se debía hacer mediante el uso de hojas de estilo en cascada. Así que si terminas yendo por allí recuerda que no debes hacer caso del código HTML que allí se utilice para dar formato a una página web.

Una de las razones de no rehacer en esta página lo que allí hay es que la estructuración y el formateo a través de un CMS es diferente y me complica las cosas.

Lo primero que te hará falta es un editor de texto (no un procesador de texto, este formatea el texto y lo hace ininteligible a los navegadores). Como editor de texto bien te puede servir el Bloc de Notas que viene con tu sistema operativo (aunque puedes encontrar muchos editores de texto especializados, gratuitos y de pago, en Internet). No olvides que cuando guardes los archivos que hayas hecho debes hacerlo con la extensión .html (o .htm), no con la extensión .txt.

La otra cosa imprescindible que te hará falta es un navegador web, tu sistema operativo seguro que ya tiene uno instalado.

Así que si tienes ordenador ya tienes todo lo necesario para hacer una página web.

Etiquetas básicas de HTML:

• doctype: sirve para indicar el tipo de documento que hay a continuación, por eso debe ser lo primero que se escriba;
• html: indica el inicio y el final de la página HTML;
• head: cabecera, indica el inicio y el final de la cabecera de la página; esta incluye, entre otras cosas, el título y los metadatos;
• title: título, esta etiqueta encierra el título de la página web (el título de la página que aparecerá en la pestaña o la barra del navegador, el título por defecto que tendrá la página cuando se guarde en favoritos, el título de la página que se verá en un motor de búsqueda), va dentro de la cabecera (etiqueta head);
• meta: para especificar los metadatos que definen cómo se procesa y visualiza la página y otros usados por los buscadores, va dentro de la cabecera (etiqueta head);
• body: cuerpo, dentro de esta etiqueta se incluye el cuerpo de la página, lo que se verá en la ventana del navegador que se utilice;
• h1, h2, h3, h4, h5, h6: son etiquetas que indican cabeceras de texto (títulos y subtítulos) en el cuerpo de la página web, el nivel viene dado por el valor que se le haya puesto (de 1 a 6);
• p: etiqueta párrafo, dentro de esta etiqueta se encierra el texto que ha de constituir un párrafo;
• strong: destacar, destaca una parte del texto (por defecto se presenta como texto en negrita);
• em: énfasis, enfatiza una parte del texto (por defecto se presenta como texto en cursiva).

A diferencia de lo que sucedía antes, todas las etiquetas constan de un elemento de apertura (<etiqueta>) y otro de cierre (</etiqueta>). Las etiquetas van encerradas entre los símbolos < y >.

Una etiqueta tiene la siguiente estructura:

<etiqueta atributo=“valor”>Contenido</etiqueta>

(O, en algunos casos, puede tener la forma: <etiqueta atributo=“valor” />).

Un atributo es un modificador, en función del valor que tome, de una etiqueta. El valor de un atributo siempre se pone entre comillas. Hay atributos obligatorios y otros optativos; de las etiquetas presentadas solo la etiqueta meta tiene atributos obligatorios.

La estructura básica, con algo de contenido, de una página HTML sería³⁾:

pagina.html

<!DOCTYPE html>
<html lang="es-ES">
  <head>
    <meta charset="utf-8">
    <title>Un mal sueño</title>
  </head>
  <body>
    <h1>Un mal sueño lo tiene cualquiera</h1>
    <p>Se despertó con el corazón empapado y el cuerpo acelerado, o algo así le parecía. Trató de mirar a su alrededor pero no consiguió ver nada en la oscuridad de la habitación; eso le calmó... Hasta que pensó que quizá la pesadilla siguiese acechando en la oscuridad, a la espera de que se volviese a dormir.</p>
  </body>
</html>

El sangrado (indentación, anglicismo) de las diferentes partes del código lo he hecho para facilitar la visualización, no es necesario. Se podría escribir todo el contenido de la página web en una única línea y el navegador web interpretaría el código de la misma manera:

pagina2.html

<!DOCTYPE html><html lang="es-ES"><head><meta charset="utf-8"><title>Un mal sueño</title></head><body><h1>Un mal sueño lo tiene cualquiera</h1><p>Se despertó con el corazón empapado y el cuerpo acelerado, o algo así le parecía. Trató de mirar a su alrededor pero no consiguió ver nada en la oscuridad de la habitación; eso le calmó... Hasta que pensó que quizá la pesadilla siguiese acechando en la oscuridad, a la espera de que se volviese a dormir.</p></body></html>

A propósito del juego de caracteres.

He usado el atributo lang con el valor es-ES para especificar que mi página está en castellano y en España. ¿Por qué?, para ayudar a los buscadores a mostrar contenido en el idioma y localización que solicite el usuario (si así lo hace).

Para ver el resultado puedes copiar el código y pegarlo en el editor de texto que gustes, guardarlo como archivo html y abrir dicho archivo. También puedes guardar directamente el archivo pinchando en pagina.html que hay justo encima del recuadro del código. O, también, puedes copiar el código y pegarlo en el editor en línea de W3Schools.

En el ejemplo no se han utilizado todas las etiquetas que se han listado más arriba (faltan por usar h2, h3, h4, h5, h6, strong y em). Como la mejor forma de aprender es practicando, lo mejor que puedes hacer es probar qué resultados se obtiene con cada una de esas etiquetas; puedes utilizar la página del ejemplo para añadir contenido que las utilice y ver el resultado que se obtiene.

Otras etiquetas:

Existen enlaces a páginas webs y enlaces a marcas específicas de páginas web; por tanto, se puede enlazar a:

• otra página web;
• una marca de la página web en la que nos encontramos;
• una marca de una página web diferente a la que nos encontramos.

Además, un enlace puede estar dirigido a un documento que no sea una página web (cualquier otro archivo de texto, imagen, vídeo, archivo comprimido,…). Un caso específico es el enlace a una dirección de correo electrónico.

La sintaxis de la etiqueta de enlace sería: <a href=“enlace”>Texto del enlace</a>

Donde:

• <a></a>: es la etiqueta de un enlace;
• href=“”: es el atributo donde se define el enlace (a un archivo, a la marca de un archivo o a una marca del mismo archivo en el que se encuentra el enlace).

Los enlaces a un archivo o a la marca de un archivo pueden constar de una dirección relativa (respecto al documento en el que se encuentra el enlace) o absoluta (su dirección web completa). Para saber más sobre ello.

Marcas

Para enlazar a una marca primero hay que tener una marca a la que poder enlazar (no se puede enlazar a cualquier parte de una página). Estas se hacen mediante el atributo id que se puede definir en cualquier etiqueta (las de enlaces, las de párrafos o las de cabeceras,…) o con el atributo name (que funciona solo con etiquetas de enlaces, <a>…</a>). Por su propia tipología, no puede haber dos nombre de marca iguales en el mismo documento (o, dicho de otra manera: no puede haber dos valores iguales de atributos id en el mismo documento):

<p id="NombreDeLaMarca_P">...</p>
<h1 id="NombreDeLaMarca_h1">...</h1>
<a name="NombreDeLaMarca">...</a>

Un enlace dirigido a una marca:

• Si la marca está en la misma página: <a href=“#NombreDeLaMarca”>…</a>;
• Si la marca está en otra página: <a href=“NombreDeLaPagina.html#NombreDeLaMarca”>…</a>.

Donde:

• NombreDeLaPagina: nombre de la página donde se encuentra la marca;
• NombreDeLaMarca: nombre de la marca a la que debe dirigir el enlace;
• #: sirve para indicar que lo que viene a continuación es el nombre de una marca;
• “…”: texto del enlace que llevará a la marca de destino. No se debe dejar en blanco puesto que si se hace eso no se verá el enlace.

la etiqueta para incluir una imagen es img cuya sintaxis más básica es: <img src=“…” alt=“…”>

• En src=“…” los puntos suspensivos indican el nombre de la imagen con su extensión. Esto es en el caso de que la imagen se encuentre en la misma carpeta que el archivo donde aparecerá; sino, puede ser una dirección relativa compleja o puede ser una dirección absoluta;
• En alt=“…” los puntos suspensivos indican el texto alternativo, y descriptivo, que incluye la imagen; sirve para navegadores no visuales o para que se muestre en caso de que la imagen no se cargue o tarde en cargarse.

Como se puede observar la etiqueta img no incluye parte final (</img> es incorrecto).

Otros atributos, opcionales:

• width: anchura de la imagen, en píxeles;
• height: altura de la imagen, en píxeles;
• longdesc: hace referencia a una dirección web en la que se facilita una descripción ampliada de la imagen, para facilitar la accesibilidad;
• ismap y usemap: para hacer mapas de imagen.

Los atributos alto y ancho son interesantes para que el navegador reserve el espacio correspondiente a la imagen. Si no se facilitan estos valores en algunos navegadores se cargará normalmente la página pero no reservará el espacio correspondiente a cada imagen y cuando esta se cargue aparecerá de repente entre el texto haciendo saltar el contenido que se sitúa por debajo de ella.

Si se incluye una etiqueta de imagen dentro de una etiqueta de enlace se tiene una imagen que realiza las funciones de un enlace: <a href=“…”><img src=“… alt=”…“”></a>

Los tipos de imágenes habitualmente utilizados en las páginas web son los jpg, los png y los gif, estos últimos pueden ser animados y suelen tener poco peso debido a que sólo pueden tener hasta 256 colores (peso hace referencia al tamaño de ocupación en disco, no al tamaño largo x ancho).

Veamos las listas con ejemplos.

Código de una lista no ordenada:

<ul>
  <li>Perro</li>
  <li>Gato</li>
</ul>

Siendo:
ul: unordered list, sirve para indicar el inicio y el final de una lista no ordenada;
li: list item, sirve para indicar cada punto de la lista.

Presentación:

• Perro
• Gato

Código de una lista ordenada:

<ol>
  <li>Perro</li>
  <li>Gato</li>
</ol>

Siendo:
ol: ordered list, sirve para indicar el inicio y el final de una lista ordenada;
li: list item, como antes, sirve para indicar cada punto de la lista.

Presentación:

1. Perro
2. Gato

Es posible poner listas dentro de las listas, listas anidadas:

<ol>
  <li>Perro</li>
    <ul>
      <li>Galgo</li>
        <ul>
          <li>Galgo Afgano</li>
        </ul>
      <li>Terrier</li>
      <li>Labrador</li>
    </ul>
  <li>Gato</li>
</ol>

Presentación:

1. Perro
   • Galgo
     • Galgo Afgano
   • Terrier
   • Labrador
2. Gato

Código de una lista de descripción:

<dl>
  <dt>Término 1</dt>
    <dd>Esta es la descripción del término 1</dd>
  <dt>Término 2</dt>
  <dt>Término 3</dt>
    <dd>Esta es una descripción del término 3</dd>
    <dd>Esta es otra descripción del término 3</dd>
</dl>

Siendo:
dl: description list, sirve para indicar el inicio y el final de una lista de definiciones;
dt: término que se va a definir;
dd: descripción, cada una de las definiciones del termino que se define (puede no haber o haber más de una).

El atributo type (en HTML5 se utiliza CSS para conseguir el mismo efecto).

EL esquema de una table consta de filas y celdas. Las columnas se componen, visualmente, con las celdas de las filas.

Una tabla va encerrada entre la etiqueta table.

<table></table>

Dentro de la etiqueta table se sitúan las etiquetas de las columnas y dentro de las etiquetas de las columnas se sitúan las etiquetas de las celdas.

La etiqueta para las filas se llama tr (de table row) y la de las celdas se llama td (de table data cell). Un ejemplo de una table simple de 2 x 2:

<table>
  <tr>
    <td>1.1</td><td>1.2</td>
  </tr>
  <tr>
    <td>2.1</td><td>2.2</td>
  </tr>
</table>

Que se vería así:

sumary: es un atributo de la etiqueta table útil para navegadores no visuales (por ejemplo para invidentes). En este atributo se puede explicar el propósito y la estructura de la tabla. Un ejemplo:

<table sumary="Este es el sumario de la tabla, en él se explicar el propósito y la estructura de la misma.">
  <tr>
    <td>1.1</td><td>1.2</td>
  </tr>
  <tr>
    <td>2.1</td><td>2.2</td>
  </tr>
</table>

Se ve exactamente igual que el ejemplo anterior en un navegador visual pero aporta la información extra en los navegadores no visuales.

th (table header cell): puede sustituir a la etiqueta td para indicar que son celdas de cabecera (título), ejemplo:

<table>
  <tr>
    <th>C1</th><th>C2</th>
  </tr>
  <tr>
    <td>1.1</td><td>1.2</td>
  </tr>
  <tr>
    <td>2.1</td><td>2.2</td>
  </tr>
</table>

Que se vería así:

caption: sirve para añadir un título a la tabla. Va dentro de la etiqueta table.

1. thead: etiqueta para agrupar las filas de la cabecera de la tabla;
2. tbody: etiqueta para agrupar las filas del cuerpo de la tabla;
3. tfoot: etiqueta para agrupar las filas de pie de tabla.

tabla.html

<!DOCTYPE html>
<html lang="es-ES">
  <head>
    <meta charset="utf-8">
    <title>Tabla</title>
    <style>
      table, th, td {
        border: 1px solid black;
      }
      thead {color: black;}
      tbody {color: grey;}
      tfoot {color: green;}
    </style>
  </head>
  <body>
    <table>
      <caption>Título de la tabla</caption>
      <thead>
        <tr>
          <th>Cabecera 1.1</th><th>Cabecera 1.2</th>
        </tr>
        <tr>
          <th>Cabecera 2.1</th><th>Cabecera 2.2</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>Cuerpo 1.1</td><td>Cuerpo 1.2</td>
        </tr>
        <tr>
          <td>Cuerpo 2.1</td><td>Cuerpo 2.2</td>
        </tr>
        <tr>
          <td>Cuerpo 3.1</td><td>Cuerpo 3.2</td>
        </tr>
      </tbody>
      <tfoot>
        <tr>
          <td>Pie 1.1</td><td>Pie 1.2</td>
        </tr>
        <tr>
          <td>Pie 2.1</td><td>Pie 2.2</td>
        </tr>
      </tfoot>
    </table>
  </body>
</html>

En este ejemplo he añadido un poco de código CSS (el código que hay dentro de la etiqueta style que hay dentro de la etiqueta head) para que se vea la estructura de la tabla (por defecto el grosor de los bordes de los elementos de la tabla es cero, no se muestran) y para que se diferencien fácilmente las diferentes partes: cabecera (en negro), cuerpo (en gris) y pie (en verde) de la tabla.

Para combinar celdas se utilizan los atributos de td (table data cell) colspan y rowspan; eL valor que se da a dicho atributo indica el número de celdas a combinar (<td colspan=“2”> expande la celda a dos columna y <td rowspan=“2”> expande la celda a dos fila).

<table>
  <tr>
    <td>1</td>
    <td>2</td>
    <td>3</td>
  </tr>
  <tr>
    <td colspan="2">4</td>
    <td>6</td>
  </tr>
  <tr>
    <td>7</td>
    <td>8</td>
    <td>9</td>
  </tr>
</table>

<table>
  <tr>
    <td>1</td>
    <td rowspan="2">2</td>
    <td>3</td>
  </tr>
  <tr>
    <td>4</td>
    <td>6</td>
  </tr>
  <tr>
    <td>7</td>
    <td>8</td>
    <td>9</td>
  </tr>
</table>

Esta etiqueta, como su propio nombre indica, sirve para incluir una cita textual en nuestra página. Produce un sangrado a derecha e izquierda de la cita. Su sintaxis es:

<blockquote>
	Cita
</blockquote>

No puedo poner un ejemplo en este wiki porque no tiene un código equivalente al del bloque de citas de HTML. Pero puedes ver un ejemplo en el apartado El bloque de citas de mi antiguo curso. Del resto del contenido mejor olvídate, se explica bastante código que ya está desaprobado.

Se utiliza para poner en distintas líneas un texto que tiene una unidad, como una dirección postal o los versos de un poema. La etiqueta que sirve para hacer esto es <br>, es una etiqueta vacía, sin contenido.

Para forzar espacios en blanco se utiliza la referencia de carácter   (No-break space). No se deben usar para dar formato, para la presentación se usa CSS.

Se pueden hacer comentarios del código HTML no visibles al cargar la página en el navegador. Estos pueden ser útiles a la persona que realiza la página para clarificar la estructura del texto. Su sintaxis, peculiar, es la siguiente: <!– comentario –>.

Si quieres asegurarte de que el código de tu página es correcto puedes usar un validador. Te recomiendo el validador en línea del World Wide Web Consortium (W3C).

En los navegadores web hay la opción de ver el código fuente de la página (a través del menú contextual que aparece al hacer click con el botón derecho del ratón sobre el contenido de la página o en el menú herramientas), utilizala para ver el código de las páginas HTML y para acceder al archivo CSS a través del enlace que encontrarás al mismo en la cabecera. Con eso, practicando (escribiendo y modificando código) y revisando otros manuales más completos y la especificación HTML podrás avanzar muchísimo más.

Ir a CSS.