EPET 20 Taller de Programación Estática y Laboratorio Web

Programación en XHTML: estructura básica de un documento Web

Al igual que el contenido de un libro, una revista o alguna otra publicación impresa, en un documento hipertextual se debe estructurar todo el contenido, es decir se deben definir o identificar todas las partes, como títulos, subtítulos, párrafos, listas, tablas, etc. Se recomienda dejar de lado el apartado visual, todo lo referente al formato. Hay que hacer una separación del "contendio" y de la presentación (formato, estilos, la cara, la apariencia).

En HTML existen etiquetas para aplicar formato pero no están recomendadas, algunas están en desuso otras de consideran obsoletas. Existe otra forma más práctica de aplicar formato, a través de Hojas de Estilo en Cascada CSS.

Estructura básica de un documento hipertextual

La estructrua básica de una página web se define de la siguiente forma:

<html>
<head>
<title>Título de página</title>
</head>
<body>
	contenido (todo lo vemos en el navegador).
</body>
</html>

Todo el código se debe escribir dentro de las etiquetas <html> y </html>. Sólo hay un elemento que se define fuera de éstas etiquetas, se trata de la línea de código que determina el tipo de documento (DOCTYPE). Luego sigue el encabezado o cabecera en donde se define el título de la página (title) y por último el cuerpo (body) en donde va TODO el contenido de la página: títulos, párrafos, imágenes, enlaces, listas, tablas, etc (todo lo que vemos en el navegador).

Con esta estructura y un par de etiquetas básicas ya se pueden crear páginas web sencillas.

Encabezados o títulos en un documento Web

Existe una etiqueta de suma importancia que se utiliza para definir los encabezamientos o títulos dentro de un documento. La etiqueta en cuestión es la "h" y posee distintos niveles que indican su importancia. Estos niveles van desde 1 hasta 6, en donde 1 es el más importante. Se definen de la siguiente manera:

<h1>Título Principal</h1>

Con los distintos niveles (del 1 al 6) se puede determinar la importancia de cada título.

Por ejemplo:

<h1>Conceptos Básicos</h1>

<h2>Hardware</h2>
<h3>Clasificación</h3>
<h3>Ejemplos</h3>

<h2>Software</h2>
<h3>Concepto</h3>

Vista previa del ejemplo anterior.
Vista previa de títulos en el navegador.

Generalmente cada página dispone de un solo título principal y de allí distintos subtítulos con distintos niveles. Para definir un título de nivel 4 anteriormente debe existir un título de nivel 3, y así sucesivamente. Se suele utilizar hasta el nivel 3 o 4 pero siempre va a depender del contenido.

Es importante aclarar que la función de esta etiqueta no es la de aplicar formato, si bien en el navegador se muestra en negrita con otro tamaño de fuente y establece un salto de línea, éstas determinan la importancia de cada título, además los motores de búsqueda identifican estas etiquetas sabiendo la importancia de cada título.

Párrafos

La etiqueta "p" se utiliza para definir los párrafos. Se deben agrupar entre <p> y </p> todos y cada uno de ellos. Si utilizamos sólo <p> y no cerramos la etiqueta funcionará igual, el navegador mostrará el salto o la separación entre párrafos, pero no pasará la comprobación del código con la herramienta del W3C, ya que todas las etiquetas se deben cerrar (recuerda las reglas de XHTML).

Por ejemplo

<p>La herramienta de validación del W3C no pasará la comprobación si no cerramos todas las etiquetas.</p>

anterior  arriba  siguiente

arriba