CAPITULO 10

Las páginas y documentos HTML incluyen más información de la que los usuarios ven en sus
pantallas. Estos datos adicionales siempre están relacionados con la propia página, por lo que se
denominan metainformación o metadatos. La metainformación siempre se incluye en la sección

de la cabecera, es decir, dentro de la etiqueta <head>.

Aunque la metainformación más conocida y utilizada es el título de la propia página, se puede
incluir mucha otra información útil para los navegadores y para los buscadores. En las próximas
secciones se explica cómo incluir la metainformación y se introduce un concepto relacionado

llamado DOCTYPE.

10.1. Estructura de la cabecera

Como ya se explicó anteriormente, las páginas XHTML se dividen en dos partes denominadas
cabecera y cuerpo. La sección de la cabecera está formada por todas las etiquetas encerradas por

la etiqueta <head>:

<head> Cabecera
Atributos comunes i18n
Atributos
específicos
▪ profile = "url" - Especifica la URL del perfil o perfiles que utilizan los
metadatos
▪ lang = "codigo_de_idioma" - Especifica el idioma principal de los contenidos
de la página
Tipo de elemento -
Descripción Define la cabecera del documento HTML
La cabecera típica de una página HTML completa presenta la siguiente estructura:
<head>

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

<title>El título del documento</title>

<link rel="stylesheet" href="#" type="text/css" media="screen" />
<link rel="stylesheet" href="#" type="text/css" media="print" />
<link rel="alternate" type="application/rss+xml" title="RSS 2.0" href="#" />
<script src="#" type="text/javascript"></script>
</head>

La etiqueta <title> establece el título de la página. Los navegadores muestran este título como
título de la propia ventana del navegador. Los buscadores utilizan este título como título de sus

resultados de búsqueda.

Por tanto, el valor de <title> no sólo es importante para los usuarios, sino que también es

importante para que los usuarios encuentren las páginas a través de los buscadores.

Un error común de muchos sitios web consiste en mostrar un mismo título genérico en todas sus páginas.

Cada página debe mostrar un título corto, adecuado, único y que describa inequívocamente los

contenidos de la página.

Las páginas XHTML deben tener definido un título y sólo uno, por lo que todas las páginas web
deben incluir obligatoramente una etiqueta <title>, cuya definición formal se muestra a

continuación:

<title> Título del documento
Atributos comunes i18n
Atributos
específicos
▪ lang = "codigo_de_idioma" - Especifica el idioma principal del título de la
página
Tipo de elemento -
Descripción Define el título del documento HTML
Por último, la etiqueta <head> permite definir en el atributo profile la URL de un documento
externo que contiene el perfil que siguen los metadatos de la cabecera. Los blogs creados con el
programa WordPress incluyen por ejemplo el siguiente perfil en su cabecera:
<head profile="http://gmpg.org/xfn/11">
...
</head>

El documento http://gmpg.org/xfn/11 es un perfil que define atributos adicionales para

establecer la relación entre sitios web.

Basic HTML and CSS Tutorial. Howto make website from scratch

10.2. Metadatos

Una de las partes más importantes de la metainformación de la página son los metadatos, que

permiten incluir cualquier información relevante sobre la propia página.

La especificación oficial de HTML no define la lista de metadatos que se pueden incluir, por lo
que las páginas tienen libertad absoluta para definir los metadatos que consideren adecuados.
La etiqueta empleada para la definición de los metadatos es <meta>.

<meta> Metadatos
Atributos comunes i18n
Atributos
específicos
▪ name = "texto" - El nombre de la propiedad que se define (no existe una lista
oficial de propiedades)
▪ content = "texto" - El valor de la propiedad definida (no existe una lista de
valores permitidos)
▪ http-equiv = "texto" - En ocasiones, reemplaza al atributo “name” y lo
emplean los servidores para adaptar sus respuestas al documento
▪ scheme = "texto" - Indica el esquema que se debe emplear para interpretar el
valor de la propiedad
Tipo de elemento -
Descripción
Permite definir el valor de los metadatos que forman la metainformación del
documento.

Los metadatos habituales utilizan solamente los atributos name y content para definir el nombre

y el valor del metadato:

No obstante, algunas etiquetas <meta> muy utilizadas hacen uso del atributo http-equiv.

Este atributo se utiliza para indicar que el valor establecido por este metadato puede ser utilizado

por el servidor al entregar la página al navegador del usuario.

El siguiente metadato indica al servidor que el contenido de la página es código HTML y su codificación de caracteres es UTF-8:

El atributo scheme no suele utilizarse, aunque permite proporcionar información de contexto

para que el navegador interprete correctamente el valor del metadato. En el siguiente ejemplo,
el atributo scheme indica al navegador que el valor del metadato hace referencia al código ISBN:
<meta scheme="ISBN" name="identificador" content="789-1392349610">

Aunque no existe una lista oficial con los metadatos que se pueden definir, algunos de ellos se

utilizan en tantas páginas que se han convertido prácticamente en un estándar. A continuación

se muestran los metadatos más utilizados:

Definir el autor del documento:

accesibilidad" />

La etiqueta que define la codificación de los caracteres (http-equiv="Content-Type") se emplea
prácticamente en todas las páginas y las etiquetas que definen la descripción (description) y
las palabras clave (keywords) también son muy utilizadas.

10.3. DOCTYPE

El estándar XHTML deriva de XML, por lo que comparte con el muchas de sus normas y sintaxis.
Uno de los conceptos fundamentales de XML es la utilización del DTD o Document Type

Definition ("Definición del Tipo de Documento").

Un DTD es un documento que recoge el conjunto de normas y restricciones que deben cumplir
los documentos de un determinado tipo. Si por ejemplo se define un DTD para los documentos
relacionados con libros, se puede fijar como norma que cada libro tenga un título y sólo uno, que

tenga uno o más autores, que la información sobre el número de páginas pueda ser opcional, etc.

El conjunto de normas, obligaciones y restricciones que se deben seguir al crear un documento
de un determinado tipo, se recogen en su correspondiente DTD. El estándar XHTML define el
DTD que deben seguir las páginas y documentos XHTML. En este documento se definen las
etiquetas que se pueden utilizar, los atributos de cada etiqueta y el tipo de valores que puede

tener cada atributo.

En realidad, la versión 1.0 del estándar de XHTML define tres DTD diferentes. Para indicar el
DTD utilizado al crear una determinada página, se emplea una etiqueta especial llamada
doctype. La etiqueta doctype es el único elemento que se incluye fuera de la etiqueta <html> de
la página. De hecho, la declaración del doctype es lo primero que se debe incluir en una página

web, antes incluso que la etiqueta <html>.

Como se verá más adelante, para que una página XHTML sea correcta y válida es imprescindible
que incluya el correspondiente doctype que indica el DTD utilizado. A continuación se muestran
los tres DTD que se pueden utilizar al crear páginas XHTML:
XHTML 1.0 Estricto
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

Se trata de la variante con las normas más estrictas y las restricciones más severas. Las páginas
web que incluyan este doctype, no pueden utilizar atributos relacionados con el aspecto de los
contenidos, por lo que requiere una separación total de código HTML y estilos CSS.
XHTML 1.0 Transitorio
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
Se trata de una variante menos estricta que la anterior, ya que permite el uso de algunos
atributos HTML relacionados con el aspecto de los elementos.
XHTML 1.0 Frameset
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">

Esta última variante la utilizan las páginas que están formadas por frames, una práctica
completamente desaconsejada y que hoy en día sólo utilizan los sitios web obsoletos.
Si no tienes claro el DTD que más te conviene, deberías utilizar el XHTML 1.0 transitorio, ya que
es más fácil crear páginas web válidas. Si tienes conocimientos avanzados de XHTML, puedes

utilizar XHTML 1.0 estricto.

Por otra parte, además del DOCTYPE apropiado, también es necesario que las páginas web
indiquen el namespace asociado. Un namespace en un documento XML permite diferenciar las
etiquetas y atributos que pertenecen a cada lenguaje.
Si en un mismo documento se mezclan etiquetas de dos o más lenguajes derivados de XML
(XHTML y SVG por ejemplo) y que tienen el mismo nombre, no se podría determinar a qué
lenguaje pertenece cada etiqueta y por tanto, no se podría interpretar esa etiqueta o ese

atributo. Los namespaces se indican mediante una URL.

El namespace que utilizan todas las páginas XHTML (independientemente de la versión y del
DOCTYPE) es http://www.w3.org/1999/xhtml y se indica de la siguiente manera:
<html xmlns="http://www.w3.org/1999/xhtml">
...
</html>
De esta forma, es habitual que las páginas XHTML comiencen con el siguiente código:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

Aunque el código anterior es mucho más complicado que una simple etiqueta <html>, es
imprescindible para que las páginas XHTML creadas sean correctas y superen

satisfactoriamente el proceso de validación que se muestra en los capítulos siguientes.

Afortunadamente, si utilizas un editor avanzado como Dreamweaver para crear las páginas, todo
el código anterior se incluye de forma automática. Si creas las páginas a mano, sólo tienes que
copiar y pegar ese código en cada nueva página.

CAPITULO 9

Los capítulos anteriores muestran las decenas de etiquetas XHTML disponibles para marcar y
estructurar cada elemento individual de las páginas web: tablas, listas, enlaces, párrafos,
imágenes, etc. Aunque combinando esas etiquetas es posible crear cualquier página web, no es

posible hacer que las páginas muestren estructuras complejas.

La mayoría de páginas HTML disponen de estructuras complejas formadas por varias columnas
de contenidos y otro tipo de divisiones. Utilizando exclusivamente HTML no es posible crear

estas estructuras complejas, ya que es imprescindible emplear las hojas de estilos CSS.

No obstante, los estilos de CSS necesitan la ayuda de HTML/XHTML para crear los diseños más
avanzados. En concreto, el código HTML se encarga de agrupar los elementos de la página en
diferentes divisiones en función de su finalidad: la zona de la cabecera de la página, la zona de
contenidos, una zona lateral para el menú y otras secciones menores, la zona del pie de página,

etc.

La siguiente imagen muestra algunas de las zonas definidas en la página principal del sitio
www.alistapart.com:

Figura 9.1. Ejemplo de página compleja estructurada con etiquetas div

Para agrupar los elementos que forman cada zona o división de la página se utiliza la etiqueta
<div>:
<div> Divisiones
Atributos comunes básicos, i18n y eventos
Atributos
específicos
-
Tipo de elemento Bloque

Descripción Agrupa elementos de bloque

El nombre de la etiqueta div tiene su origen en la palabra división, ya que esta etiqueta define
zonas o divisiones dentro de una página HTML. En cualquier caso, casi todos los diseñadores
web utilizan la palabra "capa" para referirse a una "división". Aunque se trata de un error grave
(las capas se crean mediante una propiedad de CSS llamada z-index) es preferible seguir
llamando "capas" a las zonas definidas con la etiqueta <div> para poder entenderse con el resto

de diseñadores.

Las páginas web complejas que están bien diseñadas utilizan decenas de etiquetas <div>. Con
mucha diferencia, los atributos más utilizados con esta etiqueta son id (para identificar la capa
de forma única) y class (para aplicar a la capa estilos CSS).
No se va a profundizar en el proceso de diseñar una página web mediante <div>, ya que no es
posible diseñar una página web compleja utilizando elementos <div> sin utilizar hojas de estilos

CSS.

Por último, si observas el código HTML de algunas páginas web complejas, verás que la mayoría
utilizan los mismos nombres para identificar sus divisiones. Los nombres más comunes, y sus

equivalentes en inglés, se muestran a continuación:

▪ contenedor (wrapper) suele encerrar la mayor parte de los contenidos de la página y se
emplea para definir las características básicas de la página: su anchura, sus bordes,
imágenes laterales, si se centra o no respecto de la ventana del navegador, etc.
▪ cabecera (header) que incluye todos los elementos invariantes de la parte superior de la
página (logotipo, imagen o banner, cuadro de búsqueda superior, etc.)
▪ contenido (content) engloba el contenido principal del sitio (la zona de noticias, la zona
de artículos, la zona de productos, etc. dependiendo del tipo de sitio web)
▪ menu (menu) se emplea para agrupar todos los elementos del menú lateral de navegación
de la página
▪ pie (footer) que incluye todos los elementos invariantes de la parte inferior de la página
(aviso de copyright, política de privacidad, términos de uso, etc.)
▪ lateral (sidebar) se emplea para agrupar los elementos de las columnas laterales y
secundarias de la página.
De esta forma, el esqueleto de una página HTML compleja suele ser similar al siguiente:
...
<div id="contenedor">
<div id="cabecera">
...
</div>
<div id="contenido">
<div id="menu">
..
</div>
...
</div>
<div id="pie">
...
</div>
</div>
...
El equivalente para las páginas en inglés sería el siguiente:
...
<div id="wrapper">
<div id="header">
...
</div>
<div id="content">
<div id="menu">
..
</div>
...
</div>
<div id="footer">
...
</div>
</div>

Curso HTML 01 - Estructura de una página web

SISTEMAS MULTIMEDIALES

miércoles, 1 de junio de 2011

META INFORMACION

Basic HTML and CSS Tutorial. Howto make website from scratch

ESTRUCTURA Y LAYOUT

Curso HTML 01 - Estructura de una página web