HTML

Creación de una página web

Cuando desee crear una página web o un sitio de Internet, sería lógico pensar que es suficiente con encender el ordenador y abrir un editor de texto donde escribir el código.

Desgraciadamente, este método nunca ha resultado ser útil y, además, hace que el tiempo de creación de una página o de un sitio sea dos veces más lento.

Es preferible preparar sobre el papel, a modo de borrador, el diseño de lo que se debería obtener al final, un poco como el realizador que va a utilizar un story-board sobre el que se reflejan y diseñan algunos de los planos que va a tener que filmar: saber exactamente qué se desea filmar, con qué ángulo, con qué claridad...

A continuación, una página web se construye con palabras propias del lenguaje HTML. Algunas de ellas son obligatorias y las vamos a estudiar en la siguiente sección. Otras son más específicas para lo que sería una visualización u otra dependiendo del borrador que hayamos realizado.

La estructura de una página web escrita en lenguaje HTML se parece a los cimientos de una casa. Sobre esta estructura reposan los estilos CSS y el código JavaScript. Resulta vital construirla bien. Al mismo tiempo, es evidente que nos olvidaremos de ciertos elementos y obtendremos avisos, y podremos revisar la estructura, cambiarla...

Código HTML obligatorio

Una página HTML debe contener, como mínimo, el siguiente código, que podrá dividirse en dos grandes secciones:

El encabezado de la página: <head></head>
El cuerpo de la página: <body></body>

<!DOCTYPE html>  
<html>  
  
<head>  
    <title>El título de mi página</title>  
    <meta http-equiv="Content-Type" content="text/html;   
charset=UTF-8">  
</head>  
  
<body>  
Estructura, texto e imágenes...  
</body>  
  
</html>

Examinemos con detalle este código, pues nos lo encontraremos sistemáticamente.

El doctype

La primera etiqueta que se utiliza en una página HTML es la etiqueta <!DOCTYPE html>.

Hasta HTML5, por tanto en HTML4 o XHTML, por ejemplo, el doctype era una etiqueta que contenía unos cien caracteres, más compleja, que se respetaba y se comprendía más o menos por parte de los desarrolladores. Actualmente, con HTML5, esta etiqueta se escribe de manera mucho más sencilla. Su contenido permite indicar al navegador que el código que sigue es HTML5.

Por tanto, <!DOCTYPE html> será, siempre, la primera cosa que escribiremos en el código de una página web en HTML5.

A continuación, tenemos las etiquetas <html></html>, dos etiquetas que contienen toda la página y que indican que a partir de esta línea, <html>, se utiliza lenguaje HTML.

Las etiquetas <head></head> o encabezado de página contienen la información relativa a la configuración que se envía al navegador antes de que muestre cualquier cosa, para prepararse.

Las etiquetas <body></body>, para el cuerpo de la página, contienen los elementos que debe mostrar el navegador en la pantalla.

La parte esencial del trabajo de un webmaster se encuentra en la etiqueta BODY, aunque si el HEAD está mal escrito o si se omiten elementos importantes, la página podrá funcionar mal o incluso no funcionar en absoluto....

La etiqueta <head>

Entre las etiquetas indispensables para el correcto funcionamiento de un sitio web, tenemos las etiquetas <title></title> que se encuentran en el encabezado <head>.

Ejemplo:

<title>Lista de nuevos productos</title>

Esta instrucción, un título, mostrará el texto contenido entre las etiquetas <title> y </title> en algún lugar del navegador. Puede ser en la parte superior de la ventana del navegador o incluso en una pestaña.

Además de ofrecer a la persona que visita la página una idea de lo que se va a mostrar, la información de la etiqueta <title> se utiliza en los motores de búsqueda.

Dicho de otro modo, el contenido de la etiqueta <title> del ejemplo anterior informa al internauta y a los motores de búsqueda acerca del contenido de la página.

Si bien un internauta puede contentarse con la palabra "productos" y comprender que se trata de zapatos porque está navegando sobre un sitio web especializado en la venta de zapatos, los motores de búsqueda no son capaces de adivinar de qué tipo de producto se trata. Dicho de otro modo, si un internauta busca la palabra clave "zapatos" en un motor de búsqueda, el resultado de la búsqueda no mostrará, probablemente, la página que tiene como título "Lista de nuevos productos".

Afortunadamente, la palabra "zapatos" estará escrita, probablemente, en el cuerpo de la página, y el motor de búsqueda mostrará este sitio entre sus resultados, a pesar de todo. Pero si el título fuera:

<title>Lista...

La etiqueta <body>

En el interior de <body></body> se utilizan todas las etiquetas que sirven para mostrar algo en la pantalla.

En líneas generales, vamos a encontrar todas las etiquetas que permiten estructurar la página, es decir, organizarla creando celdas, en las que será posible incluir un menú del sitio, una zona con imágenes y una leyenda debajo, o bien un bloque para un formulario.

De hecho, la estructura de los sitios se ha diseñado desde hace tiempo con tablas. Se trataba de tablas muy sencillas: bastaba con incluir dentro de cada celda el menú, la lista de artículos propuestos en el sitio, y un anuncio arriba del todo, por ejemplo...

Este método que utiliza las tablas <table></table> (consulte el capítulo Representación HTML y CSS - sección Las tablas para obtener más detalle acerca de las tablas) es relativamente simple y puede resultar interesante para mostrar datos, como haríamos con una hoja de cálculo. El problema que encontramos actualmente es que debería mostrarse correctamente, también, en smartphones cuyas pantallas son más pequeñas que las de los ordenadores. No será posible, por tanto, mostrar el sitio de la misma manera. Dicho de otro modo, va a ser necesario organizar la representación para que funcione en cualquier pantalla. Habrá que tener en cuenta, también, el paso del modo apaisado (horizontal) al modo vertical.

Existen etiquetas que son bloques (como un rectángulo) y que pueden tener cualquier tamaño. Pueden mostrarse fácilmente en los lugares deseados dentro de la página, teniendo delante o detrás otro bloque... Estos bloques son muy fáciles de manipular y permiten realizar acciones que las tablas <table> no permiten.

Para indicar algunas etiquetas correspondientes a estos bloques, tenemos por ejemplo las etiquetas <div>, <section>, <article>, <nav>, <aside>, <header>, <footer>...

Una vez definidas todas las zonas en las que se muestra texto, imágenes, vídeos, información… es posible escribir el contenido.

Antes de construir una página web, debemos hacernos una buena idea del resultado final deseado. La etapa de creación de la estructura, la organización de los bloques, las dimensiones, las posiciones...