La estructura de un documento HTML

Un documento HTML comienza con la etiqueta <html>, y termina con </html>.

Dentro del documento hay dos zonas principales: el encabezamiento, delimitado por las marcas <HEAD> y </HEAD>, que sirve para definir algunos valores válidos para todo el documento, y el cuerpo, delimitado por las etiquetas <BODY> y </BODY>, donde reside la información del documento.

El elemento <TITLE> contenido dentro del encabezamiento permite especificar el título de un documento HTML. Este título no forma parte del documento en sí pues no se ve en la pantalla principal, sino que sirve como título de la ventana del programa que la muestra.

Existen muchos otros elementos que se engloban dentro del encabezamiento pero para la estructura básica del lenguaje HTML en su nivel básico no son necesarios.

El cuerpo de un documento HTML contiene el texto, imágenes, etc. que, con la presentación y los efectos que se decidan, se presentarán ante el usuario. Dentro del cuerpo se pueden aplicar una serie de efectos a través de diferentes marcas o etiquetas (también otros autores las denominan "directivas").

Así pues, la estructura de un documento HTML es la siguiente:

<HTML>
<HEAD>
<TITLE>Título de la página</TITLE>
</HEAD>
<BODY>
[Aquí se sitúan otras etiquetas que hacen posible visualizar la página]
</BODY>
</HTML>

El texto puede tener unas cabeceras, comprendidas entre las etiquetas <H1> y </H1>, <H2> y </H2>, etc. (hasta el número 6), siendo el número indicativo del tamaño. El tamaño mayor es el correspondiente al número 1.

Hay otras etiquetas como <P>, para separar los distintos párrafos, la etiqueta de centrado <CENTER> y </CENTER> que sirve para centrar todo lo que esté dentro de ella, ya sea texto, imágenes, etc. la etiqueta <HR> para obtener una raya horizontal tan ancha como la pantalla, y con la apariencia de estar embutida sobre el fondo, etc.

He aquí un ejemplo:

<HTML>
<HEAD>
<TITLE>Mi pagina Web</TITLE>
</HEAD>
<BODY>
<CENTER>
<H1>Primera pagina</H1>
</CENTER>
<HR>
Esta es mi primera pagina, aunque todavia es muy sencilla.
<P>Aqui va un segundo parrafo.
</BODY>
</HTML>

El primer documento HTML

Las páginas HTML se dividen en dos partes: la cabecera y el cuerpo. La cabecera incluye información sobre la propia página, como por ejemplo su título y su idioma. El cuerpo de la página incluye todos sus contenidos, como párrafos de texto e imágenes.

Figura 2.2 Esquema de las etiquetas principales que contiene un documento HTML

A continuación se muestra el código HTML de una página web muy sencilla:

<html>

<head>

<title>El primer documento HTML</title>

</head>

<body>

<p>El lenguaje HTML es <strong>tan sencillo</strong> que

prácticamente se entiende sin estudiar el significado

de sus etiquetas principales.</p>

</body>

</html>

Si quieres probar este primer ejemplo, debes hacer lo siguiente:

Abre un editor de archivos de texto y crea un archivo nuevo
Copia el código HTML mostrado anteriormente y pégalo tal cual en el archivo que has creado
Guarda el archivo con el nombre que quieras, pero con la extensión .htm

Para que el ejemplo anterior funcione correctamente, es imprescindible que utilices un editor de texto sin formato. Si tu sistema operativo es Windows, puedes utilizar el Bloc de notas, Wordpad, EmEditor,UltraEdit, Notepad++, etc. pero no puedes utilizar un procesador de textos como Word o Open Office. Si utilizas sistemas operativos tipo Linux, puedes utilizar editores como Gedit, Kedit, Kate e incluso Vi, pero no utilices KOffice ni Open Office.

Después de crear el archivo con el contenido HTML, ya se puede abrir con cualquier navegador para que se muestre con el siguiente aspecto:

Figura 2.3 Aspecto que muestra el primer documento HTML en cualquier navegador

Si ya estás viendo la primera página HTML en el navegador, prueba a pulsar sobre el menú Ver > Código fuente y podrás ver el código HTML de la página que está cargada en el navegador. De hecho, puedes ver el código HTML de cualquier página de Internet mediante la opción Ver > Código fuente. Prueba a ver el código HTML de tu página preferida y verás cuantas etiquetas puede llegar a tener una página compleja.

El código HTML correspondiente a la siguiente página

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