Tabla de Contenidos

CSS

HTML

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

Introducción

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.

Nota2).

Previo

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.

Material necesario

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

Etiquetas básicas de HTML:

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ía3):

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:

Enlaces

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

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:

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:

Donde:

Imágenes

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

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

Otros atributos, opcionales:

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.

Imágenes como enlaces

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>

Tipos de imagen más usuales

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).

Listas

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:

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).

Tablas

Etiquetas básicas

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í:

1.1 1.2
2.1 2.2

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.

Otras etiquetas que se pueden usar en una tabla

Cabecera

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í:

C1 C2
1.1 1.2
2.1 2.2

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

Agrupar partes de la tabla
  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.

Combinar celdas

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>
1 2 3
4 6
7 8 9
<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>
1 2 3
4 6
7 8 9

El bloque de citas

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.

Saltos de línea

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.

Forzar espacios en blanco

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

Comentarios en el código

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 –>.

Validar el código

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).

Nota final

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.

1)
Para que te hagas una idea de lo básico que es este tutorial solo comentar que la versión pdf de HTML Living Standard tiene 1459 páginas, a fecha 11 de marzo de 2024.
2)
Parte del contenido está tomado de un curso de HTML y CSS que dejé inconcluso en 2008 (después se empezó a liar la cosa con HTML 4.01, XHTML y HTML5 e inconcluso se quedó) y que sigue disponible en esta dirección; ver aquello y ver esto puede dar una idea del cambio que ha habido en la realización de páginas web (CSS ha dejado de ser una ayuda para convertirse en parte fundamental del diseño, y la programación, web).
3)
Desplaza el código hacia la izquierda si no consigues ver todo el contenido y el código que queda más a la derecha.