Ediciones ENI Editorial | líder en informática
La estructura de las páginas
La estructura general de las páginas web
La totalidad de una página web se inserta en el elemento <html>. Este elemento se califica como elemento raíz de la página.
A continuación, tenemos dos partes de contenido: el encabezado y el cuerpo. El encabezado, con el elemento <head>, permite definir las propiedades globales de las páginas, sabiendo que cada página tendrá propiedades diferentes. El cuerpo de la página, el elemento <body>, permite insertar todo el contenido de la página que se podrá mostrar. Estos dos elementos, <head> y <body>, son hermanos e hijos del elemento <html>.
Por lo tanto, podemos tener esta estructura mínima:
<!doctype html>
<html>
<head>
...
</head>
<body>
...
</body>
</html> La declaración doctype
Como hemos mencionado en un capítulo anterior, el HTML es una aplicación SGML. De esta manera, es necesario que la primera línea de una página web contenga la indicación del lenguaje de etiquetas utilizado. Esto se hace para el navegador. La sintaxis es muy sencilla:
<!doctype html> Atención, observe que esta declaración del tipo de documento no es un elemento HTML.
El elemento <html>
El elemento <html> es el elemento raíz de las páginas HTML. La etiqueta de apertura, <html> se coloca inmediatamente después de la declaración de tipo de documento, y la etiqueta de fin, </html>, termina la página.
Entre los atributos globales, el uso del atributo lang no es obligatorio, pero sí muy aconsejable. Esto permite indicar al navegador cuál es el idioma utilizado en la página web. Este atributo se utiliza por los motores de búsqueda para la indexación y por los navegadores de síntesis vocal para las personas discapacitadas.
A continuación se muestra la sintaxis habitual:
<html lang="es"> El elemento <head>
1. Los elementos hijo del encabezado
El elemento <head> es realmente muy importante. Contiene toda una serie de propiedades esenciales para la página, sabiendo que estas propiedades no se indican en ningún otro lugar.
Estas propiedades se guardan con estos elementos hijos:
-
<meta>: permite guardar varios metadatos en el documento. Puede no tener ningún elemento, uno o varios.
-
<title>: es el único elemento obligatorio. Asigna el título del documento. Solo puede tener un único elemento de título por página.
-
<link>: establece los enlaces a las regiones exteriores a la página, como son los archivos de hojas de estilo CSS. Puede no tener ningún elemento, uno o varios.
-
<style>: permite declarar las reglas de estilo CSS incorporadas en la página. Puede no tener ningún elemento, uno o varios.
-
<script>: permite definir los scripts incorporados en la página. Puede no tener ningún elemento, uno o varios.
2. Los elementos <meta>
El elemento <meta> permite guardar varios metadatos, algunos de los cuales son importantes, como la codificación de los caracteres.
Es importante indicar la codificación de los caracteres justo después de la etiqueta de apertura <head> porque esta codificación va a afectar a todos los otros elementos posteriores. Actualmente, la codificación utilizada...
El elemento <body>
El elemento <body> incluye todos los elementos de contenido de la página web. Su etiqueta de apertura, <body>, se sitúa justo después de la etiqueta de cierre del encabezado </head>. Su etiqueta de cierre, </body>, se sitúa justo antes de la del documento, </html>.
Las propiedades de visualización
Todos los elementos de tipo block poseen unas propiedades de visualización por defecto. Estas propiedades permiten visualizar el elemento en cuestión con espacios alrededor mediante la propiedad de CSS display. También hay otras propiedades que afectan al formato del texto y permiten ponerlo en negrita o cursiva. Por supuesto, puede modificar y personalizar estas propiedades en sus hojas de estilo.
El elemento <body> no es una excepción, al ser también de tipo block. Estos son los valores habituales de su propiedad display:
body {
display: block ;
margin: 8px ;
} Por lo tanto, tenemos un elemento con unos marcos de 8 píxeles alrededor de su bloque de visualización.
Ejemplo de una estructura sencilla
A continuación se muestra un ejemplo de una estructura simplificada, mínima y validada de una página web:
<!doctype html>
<html lang="es">
<head>
<meta charset="UTF-8">
<title>El título de mi página</title>
</head>
<body>
<p>El contenido de mi página.</p>
</body>
</html> 
