Completa tu página web

Ya que tiene los textos listos, los enlaces colocados y la imagen que quería incluir en su página web, es tiempo de completarla para que cualquier navegador pueda mostrarla.

Escribe el tipo de documento o doctype

Comenzaremos por colocar el tipo de documento. Aquí tenemos tres opciones:

Si estás usando HTML, necesitas copiar cualquiera de estos códigos:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

o

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

La diferencia es que el de tipo estricto no permite que se muestren marcadores obsoletos (o depreciados) tales como <font> sin mostrar mensajes de error, mientras que el transaccional sí. Si no estás seguro, utiliza el marcador de tipo transaccional.

De la misma forma, si estás usando XHTML, tus códigos son:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

o

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

Con la misma diferencia entre estricto y transaccional.

Hasta aquí, estoy dejando intencionalmente fuera un tercer tipo de documento, el de marcos, "frameset". Lo hago porque es usado para páginas web que usan subpáginas, algo que ya no se recomienda hacer estos días.

Quienes están usando HTML 5 encontrarán que el tipo de documento ha sido simplificado:

<!DOCTYPE html>

Inserta el marcador HTML

Inmediatamente después de la declaración de tipo de documento, toda página web debe comenzar con un marcador <html>. Este es el que oficialmente declara que el documento es una página web.

Los usuarios de HTML incluirán:

<html></html>

Los usuarios de XHTML incluirán:

<html xmlns="http://www.w3.org/1999/xhtml"></html>

Mientras que los usuarios de HTML 5 aprovecharán el marcador <head> para especificar en qué idioma ha sido escrito el documento.

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

Tenga en cuenta que el resto de la página web debe estar incluida entre estos dos marcadores <html> que se abren y cierran; de lo contrario, es probable que la página no se muestre apropiadamente.

El encabezado y los marcadores meta

Luego de abrir el marcador <html>, comienzas el documento web con la sección del encabezado, <head></head>. Aquí incluirás información básica de la página que estás preparando y los marcadores meta. El contenido de la sección <head> se usa para dar instrucciones al computador, no al usuario.

Primero incluyamos el título de la página web. Es importante no olvidarlo.

<title>Una fábula de Esopo</title>

Luego, añadiremos un marcador de descripción, incluyendo un resumen de una línea del contenido de la página web. Se recomienda mantener el contenido de la descripción debajo de los 150 caracteres, pero en teoría puede ser tan largo como desees.

<meta name="description" content="Esta página web contiene una fábula del famoso narrador griego Esopo.">

Ahora especifiquemos el idioma del documento, en caso no hayamos usado HTML 5.

<meta http-equiv="content-language" content="es" />

Tras esto, el siguiente en orden de importancia es el marcador "charset". Este especifica en qué codificación está escrita la página. Si deseas una sugerencia para esto, usa el conjunto UTF-8. Te permitirá escribir la página web en cualquier idioma con menos complicaciones que si utilizaras otros sistemas de caracteres.

Así, los usuarios de HTML y XHTML utilizarán...

<meta http-equiv="content-type" content="text/html;charset=UTF-8">

...mientras que los usuarios de HTML 5 usarán...

<meta charset="utf-8">

Con ello, habrás indicado a la computadora que estás haciendo un documento web escrito en el estándar que elegiste y utilizando el sistema de codificación UTF-8, que es el más cómodo para documentos escritos en cualquier idioma. Solo queda agregar que si has utilizado el estándar XHTML, no puedes olvidar cerrar los marcadores que usaste.

¡Tu página web también tiene título y descripción! Eres increíble. Ahora vamos por algo ligeramente más difícil.

Añadiendo etiquetas link

El marcador <link> te permite incluir instrucciones en encabezado de tu documento que involucran a otros archivos. Es el equivalente a usar un marcador ancla <a> en el cuerpo de la página web.

Quienes crean páginas web usan los marcadores <link> para indicar lo siguiente:

La página web usa los estilos del archivo...

Si utilizas HTML o XHTML:

<link rel="stylesheet" type="text/css" href="pics/estilos.css">

Si utilizas HTML 5:

<link href="pics/estilos.css" rel="stylesheet">

La página web debería usar este icono...

Si utilizas HTML o XHTML:

<link rel="shortcut icon" href="youricon.ico" type="image/x-icon">

Si utilizas HTML 5:

<link rel="icon" href="youricon.png" type="image/png" />

La página web publica un RSS de actualizaciones en...

<link rel="alternate" type="application/rss+xml" href="noticiero.xml">

Hay varios otros marcadores que podrías usar, pero, como veo las cosas, no son tan importantes. Me parece que hasta aquí puedes cerrar tu encabezado <head></head> aquí.

Luego del encabezado, abrirás un marcador <body> e incluirás allí el resto de la página web. Para ejemplos terminados revisa la siguiente página. Pondré ejemplos terminados allí.

Recordatorio: No olvides cerrar todos tus marcadores apropiadamente si estás utilizando XHTML, ¿vale?

Nota final: Este es tu primer intento, así que no esperes que la página web se vea demasiado profesional aún. No te preocupes, que lo resolveremos muy pronto. Guarda tu archivo con una extensión .htm o .html. Así todas las computadoras sabrán que es una página web.


Aprende + Computadores e Internet + Desarrollo web