Conocidas ya las principales características de HTML estamos listos para aprender sus principales etiquetas y para crear nuestra primera página.
2.1. Estructura de una página
Todo documento HTML está formado por los bloques que podemos apreciar en la figura 2.1. Pasemos a explicar cada uno de ellos.
Figura 2.1. Estructura de bloques de un documento HTML.
En primer lugar deberemos especificar que el archivo de texto que estamos escribiendo es un documento HTML, para ello usamos las instrucciones de inicio y fin de la etiqueta <html> al principio y al final de la página respectivamente:
<html>
Código de la página
</html>
El código de la página esta formado a su vez por dos grandes bloques, la cabecera y el cuerpo.
La cabecera de la página está delimitada por las instrucciones de inicio y fin de la etiqueta head. Estas instrucciones deben estar dentro de la etiqueta HTML de la siguiente manera:
<html>
<head>
Elementos de la cabecera
</head>
... Resto de código de la página ...
</html>
En la cabecera de la página se introduce toda aquella información que afectará a toda la página. En un principio esta información se limitará al título. Este título se indicará con la etiqueta title usando la siguiente sintaxis:
<html>
<head>
<title>Mi primera página WEB</title>
</head>
</html>
El resultado de ver esta página con nuestro navegador es el que se observa en la figura 2.2. Como vemos, el área de la pantalla donde suele estar la página está todavía vacía, pero si nos fijamos en la cabecera de la ventana del navegador vemos que el título a pasado de ser Microsoft Internet Explorer a "Mi primera página WEB - Microsoft Internet Explorer". Es decir el título que le demos a nuestra página con la etiqueta <TITLE> pasará a ser el título de la ventana del navegador.
Figura 2.2. El título de la página es mostrado en la parte superior de la ventana del navegador.
Además cuando un usuario vea nuestra página y decida incluirla en su lista de webs preferidos con la opción agregar a favoritos del menú Favoritos del navegador (en este caso el explorer) añadirá el nombre que le hemos dado a nuestra página en dicho menú, tal y como podemos apreciar en la figura 2.3. Aunque el nombre con el que se almacena un Favorito puede ser cambiado por el usuario, si hemos puesto un buen título, lo suficientemente descriptivo a cada una de nuestras páginas le evitaremos esa molestia.
Figura 2.3. Cuando los navegantes incluyan nuestra página a su menú de favoritos en su menú aparecerá el título que le hayamos dado a nuestra página con la etiqueta <TITLE> .
Es importante resaltar que nada de lo que se ponga en la cabecera de la página será mostrado en la zona del navegador dedicada a mostrar el contenido, es decir, en la zona que vemos en blanco en la figura 2.2.
Esto nos induce a pensar que existe otra forma de indicar como será el contenido de la página, pues así es: el cuerpo es el siguiente gran bloque de nuestro documento HTML, éste quedará delimitado por la etiqueta body. En su interior introduciremos todos aquellos elementos de los que queremos que conste nuestra página como pueden ser testo, imágenes, tablas, etc. Conociendo la etiqueta body podemos ampliar el ejemplo anterior para que incluya texto.
<html>
<head>
<title>Mi primera página WEB</title>
</head>
<body>
Hola a todos, como han deducido por el titulo esta es la
primera pagina web que hago, espero que les
guste. Fdo. Jorge
</body>
</html>
En la figura 2.4 podemos apreciar como muestra el Internet Explorer este código. Como vemos todo el texto que hemos escrito entre las instrucciones de inicio y fin forman ahora el cuerpo de nuestra página.
Figura 2.4. En esta figura observamos la zona de la ventana en la que los navegadores mostrarán el texto que pongamos en el cuerpo de la página.
NOTA: Es posible que aunque no incluyamos las etiquetas html o body nuestras páginas sean visualizadas con algunos navegadores. Sin embargo no debemos confiarnos ya que lo más seguro es que con el resto de navegadores no se vean bien. Por esta razón es muy recomendable usar ambas etiquetas tal y como se ha descrito.
Una vez que ya sabemos insertar contenido en una página pasaremos a estudiar las diferentes etiquetas que sirven para darle formato a ese contenido.
2.2. Los encabezados
Usualmente un documento tiene, además de texto llano, una serie de encabezados o titulares. Para ello el lenguaje HTML posee una serie de etiquetas que permiten disponer de titulares de hasta 6 niveles de importancia.
Estas etiquetas son: <h1>, <h2>, <h3>, <h4>, <h5> y <H6>. La letra "h" al principio del nombre de estas etiquetas provien de la abreviatura de la palabra inglesa heading que significa encabezado. Siguiendo a la hache hay un número del uno al seis que indica la importancia del titular siendo el más importante el uno y el menos importante el seis. En la figura 2.5 se puede ver un ejemplo de cómo muestra las cabeceras Internet Explorer.
Figura 2.5. Distintos tipos de encabezados vistos con Microsoft Internet Explorer.
El código usado en este ejemplo es el siguiente:
<h1>Encabezado 1</h1>
<h2>Encabezado 2</h2>
<h3>Encabezado 3</h3>
<h4>Encabezado 4</h4>
<h5>Encabezado 5</h5>
<h6>Encabezado 6</h6>
NOTA: Los encabezados empiezan siempre en una línea nueva y el texto que les sigue comenzará en la línea siguiente. Además el navegador podrá mostrar un espacio vertical adicional entre el encabezado y el texto anterior y posterior.
En él observamos que todos los titulares están en negrita y el tamaño de la fuente usada para cada encabezado va decreciendo conforme decrece la importancia del titular. Pero hay que tener en cuenta, tal y como comentábamos en la introducción, que este es sólo un ejemplo y que otros navegadores pueden mostrar estos encabezados de manera diferente.
Por otro lado los navegadores más usados hoy en día son el Internet Explorer y el Netscape Navigator y es normal prestarles una atención especial (aunque no exclusiva). Y en la figura 2.6 podemos apreciar cómo con este último se muestra los encabezados de una manera prácticamente idéntica. Por esta razón podemos estar casi seguros de que los usuarios verán los encabezados de la forma mostrada en ambas figuras.
Figura 2.6. Distintos tipos de encabezados vistos con Netscape Navigator
Hay que destacar que los encabezados de h1 a h4 pueden ser usados como títulos ya que los navegadores suelen usar un tamaño de letra mayor que el habitual para mostrarlos. Sin embargo los encabezados h5 y h6 suelen ser mostrados con letra más pequeña aún que el texto y por esta razón se usan como notas a pie de página o comentarios de poca importancia.
2.3. El ejemplo mejorado
Ahora que sabemos usar encabezados los utilizaremos para mejorar ligeramente nuestra página. En la figura 2.7 podemos ver cómo se muestran las modificaciones.
Figura 2.7. Ejemplo de página Web con dos tipos de encabezados y dos párrafos.
Esta página ha sido creada con el siguiente código:
<html>
<head>
<title>Mi primera página WEB</title>
</head>
<body>
<h1>Mi primera página WEB</h1>
<h2>Bienvenida</h2>
Hola a todos, como han deducido por el titulo esta es la
primera pagina web que hago, espero que les guste. Fdo. Jorge
<h2>Proposito</h2>
En esta página iré practicando con los conocimientos que
adquiera en el curso de HTML
</body>
</html>
