XHTML-1.0: Cabecera
VERSIÓN XML <?xml?>
XHTML10 XML10Un documento XHTML es en esencia un documento XML. Todo documento XML debe comenzar por un prólogo que tiene la siguiente estructura:
prolog ::= XMLDecl? Misc* (doctypedecl Misc*)?
Recordar que en XML la "S" significa un espacio en blanco y que son aplicados las siguientes ocurrencias (veces en que debe aparecer un elemento):
Por lo tanto un prólogo se compone esencialmente de una declaración de documento XML (XMLDecl) y una declaración de tipo de documento (doctypedecl) (ésta se expone en el elemento | Símbolos | Significado |
|---|---|
| ( ... ) | Delimita un grupo |
| A | A debe aparecer una sola vez |
| A+ | A debe aparece una o más veces |
| A? | A debe aparecer cero o una veces |
| A* | A puede aparecer cero o más veces |
| +(A) | A puede aparecer |
| -(A) | A no debe aparecer |
| A | B | O bien A o bien B deben aparecer, pero no las dos |
| A , B | Tanto A como B deben aparecer, y en ese orden |
| A & B | Tanto A como B deben aparecer, en cualquier orden |
<!DOCTYPE>). La expresión Misc se refiere esencialmente a la estructura Misc ::= Comment | PI | S para comentarios (comment), instrucciones de procesamiento (PI) o espacios en blanco (S). Observe que los comentarios irán en todo caso después de XMLDecl, por lo que no puede haber algo antes. Las instrucciones de procesamiento (PI) permiten a los documentos incluir instrucciones para que las ejecuten las aplicaciones. Su sintáxis es encerrada en "<? ?>" conteniendo un nombre que no incluya las expresiones "XML" o "xml". Le seguirá un espacio y luego una cadena de caracteres que no contenga "?>":
PI ::= '<?' PITarget (S (Char* - (Char* '?>' Char*)))? '?>'
PITarget ::= Name - (('X' | 'x') ('M' | 'm') ('L' | 'l'))
Un ejemplo de PI es la siguiente <?xml-stylesheet type="text/css" href="base.css"?>, que sirve para vincular un archivo de estilo a un documento XML. Puede ver un ejemplo de esto en CSS para XML. Por ahora y al efecto de seguir con la exposición de XML en su repercusión sobre XHTML, nos interesa el último valor "S" en Misc ::= Comment | PI | S, que significa un espacio en blanco y que separará XMLDecl de doctypedecl. Ahora describiremos el primero de éstos, la declaración de XML que indica la versión usada y que obedece a la siguiente estructura:
XMLDecl ::= '<?xml' VersionInfo EncodingDecl? SDDecl? S? '?>'
VersionInfo ::= S 'version' Eq (' VersionNum ' | " VersionNum ")
Eq ::= S? '=' S?
VersionNum ::= ([a-zA-Z0-9_.:] | '-')+
EncodingDecl ::= S 'encoding' Eq ('"' EncNombre '"' | "'" EncNombre "'" )
EncNombre ::= [A-Za-z] ([A-Za-z0-9._] | '-')*
En definitiva esto se traduce en poner como primer elemento encerrado con <? ?> las palabras literales xml version = seguida del número de versión entrecomillado. Luego opcionalmente puede incluir la codificación del documento XML con encoding = para valores como "UTF-8" por ejemplo. Todo esto queda como <?xml version="1.0" encoding="UTF-8"?> (Note como en XML este elemento no lleva una barra inclinada final). Aunque un navegador no necesitaría este elemento para representar el contenido de una página, sin embargo si es de utilidad si queremos validar un documento XHTML como estándar XML, por lo que es recomendable que sea incluido.Para ver más sobre codificación de caracteres consultar %Charset.
TIPO DOCUMENTO XML <!DOCTYPE>
HTML401 XHTML10 XML10Como vimos al tratar el elemento
<?xml?>, el prólogo que debe ser el inicio de un documento XML y por extensión de un XHTML tiene la siguiente estructura
prolog ::= XMLDecl? Misc* (doctypedecl Misc*)?
La declaración de tipo de documento doctypedecl contiene un enlace a otro documento denominado Definición de tipo de Documento o DTD que contiene la gramática mediante la cual puede validarse el documento XML o XHTML por extensión. La estructura es la siguiente:
doctypedecl ::= '<!DOCTYPE' S Name (S ExternalID)? S? ('[' intSubset ']' S?)? '>'
Esta gramática DTD para validar un XML puede situarse en un archivo externo para lo cual se usará ExternalID o interno con intSubset. En el caso de XHTML siempre debe usarse un DTD externo por lo que sólo trataremos esta forma ExternalID que obedece a la siguiente estructura:
ExternalID ::= 'SYSTEM' S SystemLiteral | 'PUBLIC' S PubidLiteral S SystemLiteral
SystemLiteral ::= ('"' [^"]* '"') | ("'" [^']* "'")
PubidLiteral ::= '"' PubidChar* '"' | "'" (PubidChar - "'")* "'"
PubidChar ::= #x20 | #xD | #xA | [a-zA-Z0-9] | [-'()+,./:=?;!*#@$_%]
En definitiva, la declaración del tipo DTD para validar el documento en el caso de XHTML se forma con la segunda opción de ExternalID, es decir, con PUBLIC, por lo que da lugar al siguiente elemento <!DOCTYPE Name PUBLIC PubidLiteral SystemLiteral>, donde:- Name es el nombre del elemento raíz de todo el documento que para XHTML se trata del elemento
html - PubidLiteral es un identificador público que generará un URI para que al validar el documento se pueda conseguir la información disponible de la gramática DTD en ese sitio.
- SystemLiteral es un identificador del sistema para conseguir la gramática DTD si no pudo conseguirla con el identificador público, en definitiva se trata de un URI donde se encuentra el DTD.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
Vemos que- Name es
html - PubidLiteral es
"-//W3C//DTD XHTML 1.0 Transitional//EN", siendo un identificador tal que la aplicación encargada de validar el documento (no el navegador) sabe con esto que ha de validar cierta grámatica, en este caso correspondiente a XHTML 1.0 Transicional. - SystemLiteral es
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd", que en definitiva es una ruta al lugar donde se encuentra la gramática DTD.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"espec/dtds/xhtml1/xhtml1-transitional.dtd">
donde se observa la ruta local donde está almacenado el archivo "xhtml1-transitional.dtd" que contiene la gramática para validar estas páginas. Veáse que el PubidLiteral no se modifica.Tipos de declaraciones de documentos
Para XHTML disponemos de los siguientes identificadores públicos especificándose el identificador de sistema URI donde se encuentra el DTD oficial dando lugar a tres formas de uso del elemento. Se debe tener en cuenta que XHTML 1.0 nace con la última especificación de HTML 4.01. Ya no habrán más versiones de HTML y las nuevas seguirán a la XHTML 1.0. Mientras aparece una nueva versión se mantienen transicionalmente versiones para poder aceptar elementos y atributos de forma provisional hasta que se consideren obsoletos y ya no haya garantía de que un navegador tenga que manejarlos.- XHTML 1.0 estricto, versión que no permite algunos elementos y atributos de HTML 4.01 en XHTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> - XHTML 1.0 transicional, versión que si permite al menos provisionalmente hasta una nueva versión de XHTML casi todos los elementos y atributos de HTML 4.01 a excepción de marcos:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> - XHTML 1.0 versión para marcos, versión como la anterior pero que sí permite los marcos de HTML 4.01:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
Algunos navegadores como Opera contienen una opción en el menú para validar en línea un documento desde el sitio oficial explicitado en <!DOCTYPE> o bien puede dirigirse al sitio oficial validator.w3.org para realizarlo directamente.
DOCUMENTO HTML <html>
HTML401 XHTML10 DTD-XHTML10T DTD-XHTML10SEste es el elemento raíz del documento XML, no declarándose ningún tipo para el elemento pues sólo hay uno por documento. Desde un punto de vista visual equivale a la ventana del navegador, aunque vea el segundo ejemplo que se expone más abajo para más detalles. Veámos esquemáticamente como se estructura un documento en XHTML. Se indican los elementos obligatorios y el resto son opcionales. Las entradas de lista numerada significa que deben ponerse en ese orden. Si no se numeran no importa el orden.
- Versión XML con el elemento
<?xml?>. Dado que XHTML es un documento XML, esta declaración debería considerarse como obligatoria. - Tipo documento XML con el elemento
<!DOCTYPE>. Contiene información que permite validar un documento XHTML para ver si cumple las especificaciones XML. - Documento XHTML (en general HTML), con el elemento obligatorio
<html>. El contenido de toda la página se incuirá en este elemento raíz del documento. Se estructura a su vez en:- Una cabecera obligatoria del documento con el elemento
<head>, donde no existe contenido de presentación sino información sobre el documento como título, palabras clave para motores de búsqueda, estilos, etc. Se incluyen a su vez los siguientes elementos, que aunque sin orden previsto, suele ponerse al menos en primer lugar los metadatos si los llevara y a continuación el título. Su composición es: - Un cuerpo obligatorio del documento con el elemento
<body>, donde se encuentra todo el contenido de presentación de la página.
- Una cabecera obligatoria del documento con el elemento
<html xmlns="http://www.w3.org/1999/xhtml">.Ejemplo <html>: Estructura de una página
Como ejemplo presentamos una página típica con los elementos más comunes del encabezado.
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="es" xml:lang="es">
<head>
<title>ESTRUCTURA XHTML</title>
<meta http-equiv="X-UA-Compatible" content="IE=8"/>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<link rel="stylesheet" type="text/css" href="base.css" />
<link rel="icon" href="icon.ico" type="image/x-icon" />
<link rel="shortcut icon" href="icon.ico" type="image/x-icon" />
<style type="text/css">em {color: red; }</style>
<base target="_blank" />
</head>
<body>
...contenido de presentación...
</body>
</html>
Resultado:
Ver resultado en Estructura.html donde se explica la utilidad de cada elemento.Ejemplo <html>: Estilo de la ventana
El elemento<html> es el raíz del documento. Dentro del mismo está contenido todo el documento. Por eso a veces se le llama ventana del navegador. Si embargo esto no es exactamente así. El bloque de contención inicial desde el punto de vista visual es el elemento <body>, pues el elemento <html> no debe contener elementos visuales a excepción de los contenidos en <body>. Sin embargo es posible dotar de estilo a <html>, tal como muestra el siguiente ejemplo. Se observa que la contención se realiza en este orden: ventana del navegador, <html>, <body> y luego todo el resto de elementos contenidos en este. Para este ejemplo configuramos colores y bordes para estos elementos en el archivo de estilo externo base.css, explicándose los detalles en el resultado.
html {border: dotted red 1px; margin-top: 30px; }
body {border: dashed blue 1px; margin-bottom: 1px; }
div {border: solid green 1px; margin: 10px; }
Resultado:
Ver resultado explicado en html-ventanas.html.Espacio de nombres <html xmlns = "x">
XHTML10 XML10 DTD-XHTML10T DTD-XHTML10S Una declaración típica del elemento raíz de un documento sería <html xmlns="http://www.w3.org/1999/xhtml" lang="es" xml:lang="es">. El atributo xmlns especifica el espacio de nombres a usar en XHTML, donde el valor es un tipo %URI con un valor #FIXED establecido a "http://www.w3.org/1999/xhtml". Dado que los espacios de nombres son básicos en XML, en el siguiente ejemplo se da una explicación detallada sobre el tema.Ejemplo: Espacio de nombres en XML
En XML un espacio de nombres designa un referenciador para los elementos declarados en el documento. La sintaxis de un espacio de nombres en XML esxmlns:referenciador = espacio-nombres. Pueden declararse más de un espacio de nombre en un documento, pero cada :referenciador y cada espacio-nombres deben ser únicos en un documento. Supongamos que tenemos en XML un documento llamado "parque" para almacenar los datos de un parque de coches de una empresa, indicando para cada coche la persona que habitualmente lo conduce.
<parque>
<coche>
<nombre>Seat 0001AZ</nombre>
<fecha-compra>12/12/07</fecha-compra>
<conductor>
<nombre>Juan Equis</nombre>
<carnet>123456789</carnet>
</conductor>
</coche>
<coche>
<nombre>Volkswagen 0009AY</nombre>
<fecha-compra>01/05/05</fecha-compra>
<conductor>
<nombre>Pedro Zeta</nombre>
<carnet>77889955</carnet>
</conductor>
</coche>
...
</parque>
No olvidemos que este código es XML y no XHTML, por lo que los elementos <coche>, <fecha-compra>, <conductor> y <carnet> son designados sólo para este ejemplo. El uso de xmlns: se explica como sigue.
En el documento anterior existe el elemento <nombre> que se aplica tanto para coches como para conductores. En ese documento no existe ningún problema pues cada elemento <nombre> está encerrado en un elemento superior de tal forma que se identifica si pertenece al nombre de un coche o de un conductor. Pero supongamos que tenemos también un elemento que controla cada transporte, donde se incluye el coche y el conductor que lo ha realizado, conductor que no ha de ser necesariamente el habitual. Este elemento que se incluiría también en el raíz <parque> sería:
<parque>
...
<transporte>
<nombre>Seat 0001AZ</nombre>
<nombre>Juan Equis</nombre>
<duracion>2 horas</duracion>
</transporte>
...
</parque>
El elemento <nombre> aperece dos veces, uno para el coche y otro para el conductor. Sin embargo no es el mismo elemento y, aunque podemos diferenciar claramente por el contenido de cada nombre, en algún caso no sería posible esa diferenciación. Para evitar esto se usan los espacios de nombres que incluiremos en <parque> tal como se expone:
<parque xmlns:persona="para-personas" xmlns="para-parque" >
<coche>
<nombre>Seat 0001AZ</nombre>
<fecha-compra>12/12/07</fecha-compra>
<persona:conductor>
<nombre>Juan Equis</nombre>
<carnet>123456789</carnet>
</persona:conductor>
</coche>
<coche>
<nombre>Volkswagen 0009AY</nombre>
<fecha-compra>01/05/05</fecha-compra>
<persona:conductor>
<nombre>Pedro Zeta</nombre>
<carnet>77889955</carnet>
</persona:conductor>
</coche>
...
<transporte>
<nombre>Seat 0001AZ</nombre>
<persona:nombre>Juan Equis</persona:nombre>
<duracion>2 horas</duracion>
</transporte>
...
</parque>
Declarando el referenciador persona en el atributo xmlns:persona="para-personas" logramos que cuando usemos este prefijo como <persona:conductor> sepamos con toda claridad que su contenido, en este caso los elementos hijos <nombre>, <carnet>, son datos de personas y no de otra cosa como coches. Así también lo indicamos en el elemento del nombre del conductor dentro de <transporte>.
Por otro lado cuando se omite el referenciador (":" forman parte del mismo)en la expresión xmlns:referenciador = espacio-nombres tal como en el ejemplo pusimos xmlns="para-parque" significa que los elementos a partir del raíz y, por extensión sus hijos, que no lleven ningún referenciador son del espacio de nombres "para-parque". Realmente el :referenciador es igual a "", una cadena vacía en este caso. Veáse que <coche> y sus hijos pertenecen al espacio "para-parque" a excepción de <conductor> y sus hijos que pertenecen a "para-personas" como se ha declarado. Ahora en el transporte la diferenciación del nombre del coche y del nombre del conductor es clara, tanto para un humano que lea el documento como para una máquina que lo procese.
En este punto ya podemos entender el resultado del elemento y atributo en XHTML <html xmlns="http://www.w3.org/1999/xhtml">. Vemos que el referenciador es vacío, como el del ejemplo anterior "para-parque". Todos los elementos de XHTML se referencia a "http://www.w3.org/1999/xhtml", entendiendo esta cadena como una referencia única y no como un vínculo con el cual el navegador tenga que hacer nada. Aunque sea una cadena debe conservar las reglas de un tipo de campo %URI.
Resultado:
Este documento en XML puede ser consultado en parque.xml. Su DTD puede verse en dtd-parque.html.Lenguaje del documento <html lang = "x" xml:lang = "x">
HTML401 Se trata de un atributo genérico que se expone en <E lang>, pero que para el elemento <html> tiene una significancia especial. El atributo lang no tiene ningún valor por defecto. De ahí que si lo incluimos en el elemento raíz <html>, todo el contenido del documento heredará este valor de idioma. Para cualquier elemento el uso de este atributo ayuda a los motores de búsqueda, sintetizadores de voz, variaciones de signos tipográficos, comillas para citas, etc. Para compatibilidad se ha de poner también el atributo XML, es decir lang="es" xml:lang="es" como ejemplo para el idioma español.Direccionalidad del documento <html dir = "x">
HTML401 Se trata del atributo genérico expuesto en <E dir> pero que aquí tiene una relevancia especial pues nos proporciona la direccionalidad del texto usada en el documento. Suele obviarse cuando la es ltr, izquierda-derecha, pues es el valor por defecto.CABECERA DE UN HTML <head>
HTML401 DTD-XHTML10T DTD-XHTML10SEste elemento
<head> es uno de los dos elementos obligatorios del elemento <html>. Puede contener elementos de los tipos siguientes:- Elementos del tipo %head.misc:
- Elemento
<title>obligatorio para declarar un título para la página. - Elemento
<base>para configurar vínculos.
Aunque no se indican explícitamente, con este elemento <head> es de especial aplicación los atributos generales de lenguaje <E lang> y de direccionalidad del texto <E dir>.
Toda la información contenida en este elemento no se representa en el documento, sino que sirve de fuente de datos para los usuarios según se expone en cada elemento que puede contener.
Ejemplo <head>
En el siguiente ejemplo se muestra el código de una página para observar el contenido del encabezado<head>.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Ejemplo head</title>
<meta http-equiv="X-UA-Compatible" content="IE=8"/>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<link rel="stylesheet" type="text/css" href="base.css" />
<style>p {color:green;}</style>
<base target="_blank" />
</head>
<body>
<h2>PÁGINA DE EJEMPLO EXPLICATIVA DE LOS SUBELEMENTOS INCLUIDOS EN UN "head"</h2>
La codificación de caracteres en el juego charset=UTF-8 (incluida en el "meta" del
"head") permite al navegador reconocer la tipografía específica del lenguaje español,
como acentos, letra ñ, etc.
<p>Este párrafo encerrado en un elemento "p" se ha configurado en color verde con
"style" dentro de "head".</p>
<div>Texto exterior en color rojo de un elemento "div", configurado con "link"
dentro de "head".</div>
El elemento "base" dentro del "head" permite abrir un vínculo de ejemplo en una
<a href="head nueva ventana.html">nueva ventana</a>.
</body>
</html>
Resultado:
Ver el resultado de este ejemplo en head.html.Perfil de metadatos <head profile = "x">
El valor "x" es del tipo %URI. Especifica la localización de uno o más perfiles de metadatos separados por espacio en blanco. Ver también <meta scheme> que tiene relación con esto.TÍTULO DE LA PÁGINA <title>
HTML401 DTD-XHTML10T DTD-XHTML10SPara crear un único título de una página (obligatorio). Se trata de un tipo #PCDATA a contener dentro del elemento
<head>. El título es usado para ser mostrado en los navegadores. Los títulos deberían ser comprensivos del contenido del documento, pues el título puede ser objeto de consulta en contextos externos a la página.Lenguaje del título de una página <title lang = "x">
HTML401 Se trata del atributo genérico expuesto en <E lang> pero que aquí tiene una relevancia especial pues da información sobre el idioma usado en el título, pues éste puede ser consultado fuera de contexto y este atributo nos lo proporcionaría.Direccionalidad del título de una página <title dir = "x">
HTML401 Se trata del atributo genérico expuesto en <E dir> pero que aquí tiene una relevancia especial pues da información sobre la direccionalidad del texto en el título, pues éste puede ser consultado fuera de contexto y este atributo nos proporcionaría esa direccionalidad. Suele obviarse cuando la direccionalidad es ltr, izquierda-derecha, pues es el valor por defecto.METADATOS: INFORMACIÓN SOBRE LA PÁGINA. <meta>
HTML401 DTD-XHTML10T DTD-XHTML10SMetadatos (name) Encabezado HTTP (http-equiv) Valor de la propiedad (content) Lenguaje (lang) Direccionalidad (dir) Esquema (scheme)
Metadatos significa "datos sobre los datos". No es contenido sino información sobre el contenido de un documento. Hay tres formas de incluir metadatos en un documento:
- Con este elemento
<meta>tal como se explica a continuación. - Con el elemento-atributo
<link rel>se proporciona información sobre diversos aspectos del documento. - Con el elemento-atributo
<head profile>, donde puede crearse un perfil de datos sobre el documento.
<meta> es del tipo %head-misc configurado como vacío ( EMPTY), contenido en el elemento de cabecera <head>. Está destinado a contener los atributos <meta name> o <meta http-equiv> o cuyos valores designan los nombres de unas propiedades, las cuáles se les dota de unos valores que serán especificados en el atributo content. La especificación HTML401 no propone nombres ni valores para estas propiedades, las cuales pueden también definirse en un perfil incluido en el elemento-atributo <head profile>. El elemento <meta> no es obligatorio pero si recomendable, donde un ejemplo de uso con mínimo contenido sería como <meta http-equiv="content-type" content="text/html; charset=UTF-8" />. Podemos declarar tantos elementos <meta name> o <meta http-equiv> como necesitemos. En las exposiciones siguientes sobre atributos se indican con más detalle.Metadatos <meta name = "x">
Este atributo del tipo CDATA es opcional y su cometido, como el de <meta http-equiv>, es identificar un nombre de propiedad de metadatos cuyo valor se especifica en el otro atributo requerido content. Los nombres más usados son:- keywords, indicar a los motores de búsqueda una lista de palabras clave separadas por comas.
- description, una breve descripción de la página que incluirán los motores de búsqueda en los resultados encontrados.
- author, para albergar la información sobre la persona que confeccionó la página.
- generator, conteniendo información sobre la aplicación que generó la página.
- copyright, donde se suele albegar
content = "© nnnn", siendo "nnnn" el año de la edición. - robots, para impedir que ciertos motores de búsqueda llamados "robots" añadan su página a sus índices. Se usan con los valores para
contentsiguientes, incluso varios separados por comas:- all, para autorizar el indexado de la página actual y las vinculadas. Este sería el valor por defecto en caso de no indicar nada al respecto.
- index, para autorizar el indexado sólo de la página actual.
- noindex, para indicar que no se indexe la página.
- nofollow, para impedir que se sigan los vínculos e indexe otras páginas del sitio.
- noarchive, para impedir que se archiven las páginas para que sean visitadas cuando la original no esté disponible. Puede ser apropiado que se archiven las páginas, pero debe tenerse en cuenta que no se asegura que el contenido esté actualizado.
Ejemplo: Motores de búsqueda y robots
Los motores de búsqueda emplean aplicaciones denominadas "robots" para recorrer de forma periódica la Web buscando nuevas páginas e indexandolas en un registro propio de sitios web. Los puntos clave a tener en cuenta en relación a tratar de asegurar que nuestra página es localizada y manejada adecuadamente por un motor de búsqueda son:- Declarar el idioma del documento en
<html lang>. - Declarar una lista de palabras clave en
<meta name="keywords" content="palabra1, palabra2, ...">. También pueden incluirse frases separadas por comas, pero en esto la simplicidad es una mejor garantía para un motor de búsqueda. Hay que ponerse en el lugar del usuario que está usando un motor de búsqueda. ¿Qué pondría yo en un buscador si quiero encontrar en la red librerías virtuales que vendan libros técnicos y científicos?. Seguramente pondría palabras como "librerías virtuales técnicas" o "libros técnicos y científicos",... No conviene extenderse en la lista de palabras, usar un sólo genéro y singular. Si además especificamos el idioma conlangpodemos ayudar al motor de búsqueda a manejar esa información. Si la localización geográfica fuera importante conviene añadirla a la lista, por ejemplo, si buscamos comercios de electrónica en Madrid pondríamos la lista comercio, tienda, electrónica, Madrid. - Además hay algunos elementos que son revisados por algunos motores de búsqueda para buscar más palabras clave. Utilice las palabras clave anteriores en el elemento
<title>que da título a su página. O mejor dicho, haga que las palabras del título formen parte también de la lista de palabras clave. Lo mismo para los encabezados<h1...h6>y para el elemento-valor<img alt>, al menos de los que considere importante. Es deseable incluir un encabezado al inicio de cada página con palabras clave, de tal forma que si se busca con un motor con esta característica o sin ella, los resultados de la búsqueda sean coincidentes. - Declarar una descripción breve del contenido de la página con
<meta name="keywords" content="descripción...">. Cuando el motor de búsqueda presente los resultados acompañará esta descripción, por lo que debe ser corta para ser leída rápidamente por el usuario, pero al mismo tiempo debe ser lo suficientemente descriptiva y atrayente para que el usuario se decida a entrar. - Si la página es un punto de entrada a un sitio con muchas páginas enlazadas conviene indicar en todas las páginas el enlace al inicio del sitio con
<link rel="start" ...>. - Si la página puede ser leída en varios idiomas, indique los vínculos a páginas traducidas con
<link rel="alternate" ...>. - Aunque el valor all puede considerarse valor por defecto para la propiedad robots, es conveniente incluirla, a no ser que queramos otras opciones.
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="es" xml:lang="es">
<head>
<title>Tu librería técnica virtual</title>
<meta http-equiv="X-UA-Compatible" content="IE=8"/>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<!--El contenido de "content" no debe separarse en varias líneas, pues
puede resultar afectado-->
<meta name="keywords"
content="Libreria,Virtual,Libro,Publicación,Técnico,Científico,Divulgación,Académico,Universitario"
lang="es" xml:lang="es" />
<meta name="description"
content="Libreria virtual de publicaciones técnicas" lang="es" xml:lang="es" />
<meta name="robots" content="all" />
<link rel="alternate" type="text/html" title="Your virtual technical library"
hreflang="en" href="/english/index.html" />
<link rel="start" href="index.html" />
<link rel="stylesheet" type="text/css" href="base.css" />
</head>
<body>
<h2>TU LIBRERÍA TÉCNICA VIRTUAL</h2>
<h3>Libros, revistas y publicaciones de
carácter técnico y científico. Todo lo que necesitas para el entorno
académico y universitario. Lo mejor en divulgación científica.</h3>
...
</body>
</html>
Resultado:
index.htmlEncabezados HTTP <meta http-equiv = "x">
En lugar de usar el nombre de atributo <meta name> puede usar este <meta http-equiv> que tiene un relavancia cuando se usa el protocolo HTTP para obtener los documentos. El valor x es del tipo CDATA. A continuación se exponen algunos usos de esta propiedad, mostrándose nombre y valores para la misma:<meta http-equiv="content-type" content="text/html; charset=UTF-8" />, indicando a los servidores con la propiedad content-type que el contenido del documento es text/html, texto para HTML y la codificación usada es UTF-8. Este valor de codificación es el que servirá de base para el resto de la página. Ver más sobre codificación de caracteres en %Charset.<meta http-equiv="Content-Style-Type" content="tipo" />, donde tipo es un valor de %ContentType, normalmente text/css, para indicar la codificación de hojas de estilo por defecto que se va a usar en el documento. Suele obviarse si el tipo se incluye en la vinculación de estilo externo con<link type>o en estilo interno con<style type>.<meta http-equiv="Content-Script-Type" content="tipo" />, el lenguaje de scripts por de defecto donde tipo es un valor de %ContentType.
Valor de la propiedad <meta content = "x">
Es del tipo CDATA y es requerido para emparejarse como valor de las propiedades <meta name> o <meta http-equiv> Si se desea expresar el idioma o la direccionalidad del texto de content puede incluir los atributos <E lang> y/o <E dir>. Debe prestarse atención a los saltos de líneaLenguaje del título de una página <meta lang = "x">
HTML401 Se trata del atributo genérico expuesto en <E lang> pero que aquí tiene una relevancia especial pues da información sobre el idioma usado en el título, pues éste puede ser consultado fuera de contexto y este atributo nos lo proporcionaría.Direccionalidad del título de una página <meta dir = "x">
HTML401 Se trata del atributo genérico expuesto en <E dir> pero que aquí tiene una relevancia especial pues da información sobre la direccionalidad del texto en el título, pues éste puede ser consultado fuera de contexto y este atributo nos proporcionaría esa direccionalidad. Suele obviarse cuando la direccionalidad es ltr, izquierda-derecha, pues es el valor por defecto.Esquema de la propiedad <meta scheme = "x">
Se trata de un valor CDATA para declarar un esquema que servirá para interpretar el valor incluido en content de la propiedad nombrada en name y usándose en combinación con el elemento-atributo <head profile>. Por ejemplo, si una página maneja unos datos que deben tener un cierto formato, podemos indicar con <head profile> una ruta para que la aplicación interprete esa cadena como una referencia o bien se diriga a ese destino con objeto de identificar la estructura del formato de los datos incluidos en content y así poder interpretarlos correctamente. El atributo scheme sirve para ayudar más a la interpretación del contexto. Hay que tener en cuenta que los navegadores no usan normalmente estos atributos y van dirigidos a aplicaciones específicas, por lo que la especificación HTML401 no declara como debe construirse y leerse un archivo de perfil.Ejemplo <meta scheme = "x">
<meta name> está principalmente destinado a aplicaciones específicas para leer documentos, pues los navegadores hacen un uso parcial del mismo. En este ejemplo hemos incluido un valor personal para expresar una fecha con <meta scheme="dd-mm-aa" name="fecha" content="07-01-08" /> y un destino hipotético para el perfil en <head profile="formatos-fechas.txt">, donde se supone que el esquema "dd-mm-aa" es indicativo de "día, mes y año". Sin embargo como hemos dicho, los navegadores no saben que hacer con esto pues iría destinado a una aplicación específica que supiera tratarlos. Lo único que nos ofrece Firefox es un resumen de los metadatos en su opción del menú ver información de la página, donde se relacionan los metadatos usados tal como muestra la figura de la izquierda.
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="es" xml:lang="es">
<head profile="formatos-fechas.txt">
<title>Tu librería técnica virtual</title>
<meta http-equiv="X-UA-Compatible" content="IE=8"/>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<meta name="keywords"
content="Libreria,Virtual,Libro,Publicación,Técnico,Científico,Divulgación,Académico,Universitario"
lang="es" xml:lang="es" />
<meta name="description"
content="Libreria virtual de publicaciones técnicas" lang="es" xml:lang="es" />
<meta name="robots" content="all" />
<meta scheme="dd-mm-aa" name="fecha" content="07-01-08" />
<link rel="alternate" type="text/html" title="Your virtual technical library"
hreflang="en" href="/english/index.html" />
<link rel="start" href="index.html" />
<link rel="stylesheet" type="text/css" href="base.css" />
</head>
<body>
<h2>TU LIBRERÍA TÉCNICA VIRTUAL</h2>
<h3>Libros, revistas y publicaciones de
carácter técnico y científico. Todo lo que necesitas para el entorno
académico y universitario. Lo mejor en divulgación científica.</h3>
...
</body>
</html>
Resultado:
El resultado de este ejemplo está en index.html.CONFIGURAR VÍNCULOS <base>
HTML401 DTD-XHTML10T DTD-XHTML10SElemento con contenido vacío (EMPTY), siendo opcional pero contenido en
<head>, para lo cual debe estar antes de cualquier otro que haga referencia a una fuente externa. Sirve para simplificar con URI's relativos en la página que se completarán con el URI base especificado. Otra utilidad es especificar marcos de destino donde se abrirá el vínculo.URL <base href = "x">
Siendo x del tipo %URI, su propósito es completar un URI relativo con el indicado aquí. Supongamos que tenemos una página que está en la dirección base http://www.midominio.com/mipagina.html. En esta página podemos referirnos con rutas relativas como carpeta-imagenes/foto.jpg para localizar una imagen. El navegador completará la ruta como http://www.midominio.com/carpeta-imagenes/foto.jpg. Esta es la forma que por defecto usa el navegador para completar URI's relativos. Pero si los recursos se encuentran en otro sitio, como http://www.otrodominio.com/imagefolder/foto.jpg tenemos dos opciones: escribir el URI completo con cada recurso o incluir <base href="http://www.otrodominio.com" /> y referirnos al recurso como imagefolder/foto.jpg. Sin embargo hay que tener en cuenta que una vez establecido el dominio en <base>, todos los relativos que se escriban se completarán con éste y no con el que por defecto se estableció al abrir la página que incluye el vínculo, es decir, donde se encuentra albergada la página. Como normalmente los recursos se encuentran ubicados en subcarpetas a partir del lugar donde está almacenada la página, no suele emplearse este elemento con este atributo.Destino <base target = "x"> (XHTML transicional)
HTML401 Este atributo que sólo aparece en el DTD transicional es del tipo %FrameTarget basado en un tipo básico NMTOKEN, para designar los siguientes marcos de destino para abrir un vínculo:- _blank: Abrir en nueva ventana.
- _self: Abrir en el mismo marco.
- _parent: Abrir en un marco padre del actual.
- _top: Abrir en la ventana actual.
ESTILO INTERNO <style>
HTML401 DTD-XHTML10T DTD-XHTML10SEs uno de los elementos opcionales a incluir en el elemento
<head>. Puede contener datos de carácter #PCDATA con el que se configura el estilo del documento internamente.Ejemplo <style>
En el siguiente ejemplo configuramos un ejemplo de estilo interno dando color rojo a los elementos párrafo.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Ejemplo style.html</title>
<meta http-equiv="X-UA-Compatible" content="IE=8"/>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<style type="text/css">p {color:red; }</style>
</head>
<body>
Ejemplo del elemento Style: si usamos el elemento párrafo como
<p>PÁRRAFO</p>
comprobaremos que se aplica el estilo de color rojo a todos los
elementos párrafo de este documento.
</body>
</html>
Resultado:
Ver resultado se ve en la página style.htmlPropósito del estilo <style media = "x">
El valor "x" es del tipo %MediaDesc para describir el tipo de medio al que se dirige la información de estilo. Hay varias formas de declarar el tipo de medio, como se describe en la regla @media. El valor por defecto es Screen, la pantalla de ordenador. Puede usarse también una lista de medios separados por comas. Tiene la misma finalidad que la explicada en <link media>, donde se expone un ejemplo de uso de este atributo.Especificar tipo MIME del estilo <style type = "x">
El valor requerido de "x" es del tipo %ContentType. Según el lenguaje que se utilice para configurar el estilo podemos tener los valores siguientes: text/css para lenguaje de hojas de estilo CSS, text/xsl si se usa XSL. Funciona de forma similar si se vincula el estilo externo con <link type>.Título del estilo <style title = "x">
El título es a efecto consultivo y se expone con los atributos generales en <E title>.Preservar espacios <style xml:space = "x">
XML10 Este atributo, como todos los que empiezan por xml:, es específico de XML. Supone preservar los espacios en blanco. Viene definido en el DTD como un tipo enumerado con un único valor preserve. Además se declara #FIXED y, como sólo tiene un valor, se le dota de valor por defecto el mismo preserve. Por lo tanto no es necesario manejarlo pues dota al elemento con la función de preservar los espacios por defecto.Ver también estilos aplicados localmente a un elemento en
<E style>. Como referencia XSL se puede consultar la página http://www.w3.org/Style/XSL/ que es el sitio oficial para XSL en W3C. También puede ver la descripción de codificación de caracteres CSS.VINCULO EXTERNO <link>
HTML401 DTD-XHTML10T DTD-XHTML10SCodificación caracteres (Charset) URL (href) Lenguaje (hreflang) Propósito (media) Tipo MIME (type) Vínculos directos (rel) Vínculos inversos (rev)
Es uno de los elementos opcionales a incluir en el elemento
<head>. No tiene contenido (tipo EMPTY). Este elemento contiene información relacionada con un recurso externo especificado en el atributo href, recurso que puede prestarse a diferentes objetivos:- Expresar la codificación de la página con el atributo
charsety valores como UTF-8. - Víncular a hojas de estilo externas mediante el atributo
rely su valor stylesheet. En una misma página puede aplicarse estilo externo, estilo interno con<style>y estilo local con<E style>. El externo se configura en un archivo ".css" afectando a todas las páginas donde se vincule con<link rel="stylesheet">. El interno se configura dentro de la cabecera<head>de cada página, en el elemento<style>. Por último, el estilo local se configura dentro de la etiqueta de inicio de un elemento. Por lo tanto para que no colisionen se le da mayor importancia cuanto más local sea el estilo, es decir, los estilos más cercanos a un elemento anulan a los que están más lejanos: primero los locales, luegos los internos y por último los externos. En cuanto a la situación en la cabecera de un página de los estilos externos<link rel="stylesheet">e interno<style>, los vínculos con estilos en líneas posteriores anulan a los declarados en líneas anteriores. - Relacionar el documento actual con el vinculado, para lo cual se usa el atributo
relcon valores start, prev, next para indicar un enlace a la página de inicio, anterior o siguiente. Con el atributorevse usa para indicar un vínculo inverso. - Incoporar un icono a la página, usándose el atributo
relcon el valor icon. - Otra información para los motores de búsqueda: Usando el atributo
titlepueden ofrecer desde versiones alternativas del documento para diferentes medios usandomediahasta diferentes versiones en idiomas distintos con el atributohreflang. - Ofrecer medios de presentación, como pantalla, impresora, etc, mediante el atributo
mediay valores como screen o print que se usarán en correspondencia a la vinculación de hojas de estilo distintas para cada finalidad.
Aunque no se especifica, el atributo genérico <E title> tiene para el elemento <link> una especial importancia, tal como se expone en uno de los puntos de la lista anterior.
Este elemento <link> es un vínculo externo de un documento, en oposición a los vínculos internos que se configuran con el elemento <a> y que comparten algunos atributos comunes.
Codificación de caracteres del recurso <link charset = "x">
El valor "x" es del tipo %Charset para indicar la codificación de caracteres que usa el recurso relacionado, como por ejemplo un archivo ".css" de estilo externo. El valor recomendable es UTF-8, aunque en el enlace anterior se encuentra más información al respecto.Ejemplo <link charset = "x">
En este ejemplo creamos una página para vincular 4 estilos externos en los archivos base.css, base2.css, base3.css y. base4.css. En los 4 se configura un elemento<div> de igual forma aunque con diferentes clases: "iso88591", "utf8", "shiftjis", "arrobaiso88591". Se vinculan a la página declarando el tipo de codificación para los tres primeros, a excepción del último que contiene la declaración al inicio del archivo "base4.css" con la regla @charset "ISO-8859-1"; El contenido de la página es:
...
<head>
<title>Ejemplo link.html</title>
<meta http-equiv="X-UA-Compatible" content="IE=8"/>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<link rel="stylesheet" type="text/css" href="base.css" charset="ISO-8859-1" />
<link rel="stylesheet" type="text/css" href="base2.css" charset="UTF-8" />
<link rel="stylesheet" type="text/css" href="base3.css" charset="SHIFT_JIS" />
<link rel="stylesheet" type="text/css" href="base4.css" />
</head>
<body>
<div class="iso88591">
Elemento "iso88591" vinculado con charset="ISO-8859-1" que genera
CORRECTAMENTE las letras ñ, ç y el acento en la o en las palabras
"CAÑÓN" y "BARÇA":<br />
</div>
<div class="utf8">
Elemento "utf8" vinculado con charset="UTF-8" que genera
INCORRECTAMENTE las letras ñ, ç y el acento en la o en las palabras
"CAÑÓN" y "BARÇA":<br />
</div>
<div class="shiftjis">
Elemento "shiftjis" vinculado con charset="SHIFT_JIS" que genera
INCORRECTAMENTE las letras ñ, ç y el acento en la o en las palabras
"CAÑÓN" y "BARÇA":<br />
</div>
<div class="arrobaiso88591">
Elemento "arrobaiso88591" vinculado pero sin especificar codificación
en el vínculo sino dentro del archivo de estilo externo con
@charset "ISO-8859-1", generando CORRECTAMENTE las letras ñ, ç y
el acento en la o en las palabras "CAÑÓN" y "BARÇA":<br />
</div>
</body>
</html>
En el estilo externo se generará contenido de las mismas palabras con
div.clase:after {content: "CAÑÓN, BARÇA"; color: red; }
donde clase sería uno de los tres nombres que les hemos dado. Los archivos de estilo externo se han guardado con la codificación ISO-8859-1. El orden de prioridad para captar la especificación de codificación de caracteres con destino a representar el contenido del estilo residente en un archivo ".css" externo es la siguiente, donde un nivel inferior anula a uno superior:- Un valor en
<meta content>del tipo %Charset - La regla-arroba
@charsetal inicio del archivo externo ".css". - El valor del elemento-atributo
<link charset>
- La clase iso885891 tendrá un resultado correcto, pues renocerá los caracteres escritos en el estilo externo.
- La clase utf8 no tendrá un resultado correcto.
- La clase shiftjis no tendrá un resultado correcto pues no reconoce esos caracteres.
- La clase arrobaiso88591 también tendrá un resultado correcto.
Resultado:
Veáse el resultado en link-charset.html, donde se observa que las letras "Ñ", "Ç" y el acento "Ó" son reemplazados por otros caracteres o bien con un "?" o un cuadrado o cualquier otro carácter que representa caracteres desconocidos si el emparejamiento de codificaciones entre el archivo de estilo externo y la página no fuera adecuado.Ver también codificación de caracteres CSS, regla
@charset.URL <link href = "x">
El valor "x" es del tipo %URI para indicar el URL donde se encuentra el recurso externo a vincular.Lenguaje del recurso <link hreflang = "x">
El valor "x" es del tipo %LanguageCode. Especifica el idioma del recurso designado por el atributo href. Se expone un ejemplo de su uso en la vinculación con <link rel="alternate">.Propósito de una hoja de estilo <link media = "x">
El valor "x" es del tipo %MediaDesc para describir el tipo de medio al que se dirige la información de estilo. Hay varias formas de declarar el tipo de medio, como se describe en la regla @media. El valor por defecto es Screen, la pantalla de ordenador. Puede usarse también una lista de medios separados por comas. Tiene la misma finalidad que cuando se usa estilo interno con <style media> en lugar de vinculado.Ejemplo <link media = "x">
En el ejemplo siguiente creamos una hoja de estilo que lo llamamos "pantalla.css" con una sóla líneap {color:red; border-style:solid;} con el proposito de mostrar en pantalla todos los elementos párrafo con un borde y letra en color rojo. Por otro lado supongamos que no queremos reproducir colores ni bordes al imprimir para ahorrar tinta, con lo que creamos otra hoja de estilo que llamamos "impresora.css" con el contenido p {color:black;}. De esta forma insertamos el código de la página siguiente donde especificamos en los vínculos los correspondientes media="screen" para la hoja de pantalla y media="print" para la de imprimir.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Ejemplo media.html</title>
<meta http-equiv="X-UA-Compatible" content="IE=8"/>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<link rel="stylesheet" type="text/css" href="pantalla.css" media="screen" />
<link rel="stylesheet" type="text/css" href="impresora.css" media="print" />
</head>
<body>
Ejemplo del elemento link media: si usamos el elemento párrafo como
<p>PÁRRAFO</p>
comprobaremos que se aplica el estilo externo de borde y letra de color rojo
en la presentación en pantalla mientras que en impresora se suprime el color y
no se aplican bordes.
</body>
</html>
Resultado:
Ver el resultado en media.html y comprobar que al imprimir (o extraer una vista previa) no se reproducen bordes ni colores.Especificar tipo MIME de contenido <link type = "x">
El valor "x" es del tipo %ContentType para especificar el tipo de contenido. En este caso el valor no es requerido, como si lo es con el elemento-atributo <style type>. Los valores de "x" son como text/css para lenguaje de hojas de estilo CSS o text/html para contenido de páginas en código HTML o XHTML. Los valores van emparejados con los del atributo <link rel>, de tal forma que por ejemplo para un valor stylesheet podemos tener un tipo text/css y así hacer saber al navegador que lo que estamos vinculando en el atributo <link href> es una hoja de estilo externa codificada en texto CSS. Este ejemplo se escribiría así: <link rel="stylesheet" type="text/css" href="hoja-de-estilo.css" />.Vínculo directo <link rel = "x">
El valor "x" es del tipo %LinkTypes para tipos de vínculo. Se trata de hacer saber al navegador que relación existe entre el documento actual y el vinculado con <link href> con el objeto de que las aplicaciones interpreten esa relación de varias formas según se expone en la lista siguiente:- Stylesheet o alternate stylesheet para enlazar con una hoja de estilo externa. Cuando se incluyen varios vínculos con este valor y diferenciándolos con el atributo
title, el navegador incluirá las diferentes hojas alternativas como opciones en su menú. - Alternate, para indicar páginas alternativas.
- Start, prev, next para usar con botonera de navegación específica y así poder dirigirse a la página de inicio, anterior o siguiente.
- Icon para dotar de un icono a la página.
- Contents, tabla de contenidos (también se usa el sinónimo ToC).
- Bookmark, marca que supone un vínculo de entrada especial en un documento muy largo. Se suele usar el atributo
titlepara dar un rótulo a esta marca. Se pueden poner varias marcas en un documento. - Otros valores son Index, Glossary, Copyright, Chapter, Section, Subsection, Appendix, Help que indican índice, glosario de términos, capítulo, sección, subsección, apéndice y ayuda.
Ejemplo <link rel>: Uso del valor stylesheet
En el siguiente ejemplo mostramos como podemos vincular una hoja de estilo externa con una página. Por un lado hemos de crear un archivo de sólo texto (o también llamados ASCII) con cualquier nombre y la extensión ".ccs". Si la hoja de estilos contiene carácteres no ASCII se deben declarar al inicio del archivo con@charset "x" la declaración de caracteres utilizados. En nuestro caso lo guardamos como ACSII y lo hemos llamado base.css, ubicándolo en la misma carpeta que la página donde vamos a vincularlo. Esta hoja de estilo tiene una sóla línea con p {color:green;} que quiere decir que a todos los elementos <p> se le aplicará como color principal el rojo. Ahora sólo tenemos que vincular este archivo "base.css" con un línea <link rel="stylesheet" type="text/css" href="base.css" /> dentro del elemento <head> de nuestra página. Veáse que además especificamos el tipo de contenido con type="text/css" que indica que el archivo contiene texto en CSS.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Ejemplo link.html</title>
<meta http-equiv="X-UA-Compatible" content="IE=8" />
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<link rel="stylesheet" type="text/css" href="base.css" />
</head>
<body>
Ejemplo del elemento link style: si usamos el elemento párrafo como
<p>PÁRRAFO</p>
comprobaremos que se aplica el estilo externo de color verde definido en el
archivo "base.css" a todos los elementos párrafo de este documento.
</body>
</html>
Resultado:
El resultado se ve en la página link.html.Ejemplo <link rel>: Precedencia de estilos con stylesheet
Declaramos un estilo externo con letra de párrafos de color verde en el archivo base.css. Luego vinculamos esta hoja a nuestra página pero, inmediatamente a continuación en la cabecera también ponemos un estilo interno con letra de color azul, que por estar declarado posteriormente anulará al externo anterior. Finalmente aplicamos a un párrafo un estilo local en letra de color rojo, que anulará culquier otro interno o externo.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Ejemplo link2.html</title>
<meta http-equiv="X-UA-Compatible" content="IE=8" />
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<link rel="stylesheet" type="text/css" href="base.css" />
<style type="text/css">p {color:blue;}</style>
</head>
<body>
Ejemplo del elemento link style para observar la precedencia de estilos.
En el encabezado declaramos una hoja externa "base.css" con letra de color
verde para los párrafos. Pero a continuación declaramos un estilo interno con
letra azul. Por lo tanto este primer párrafo debe ser azul pues anula el estilo anterior.
<p>PRIMER PÁRRAFO: se aplica el estilo interno con letra de color azul</p>
Sin embargo al siguiente párrafo le aplicamos un estilo local en color rojo
<p style="color:red;">SEGUNDO PÁRRAFO: en este caso se ha aplicado un estilo
local a este párrafo con letra de color rojo, estilo que anula cualquier otro,
en este caso al interno declarado en la cabecera.</p>
</body>
</html>
Resultado:
El resultado se ve en la página link2.htmlEjemplo <link rel>: Hojas de estilo alternativas con stylesheet
En el ejemplo siguiente hemos creado tres hojas de estilo verde.css, rojo.css y azul.css para dar colores a los elementos párrafo. La tres hojas de estilo se vinculan en una misma página con el valor stylesheet y le damos al atributotitle los valores de cadena verde, rojo, azul para cada una respectivamente. Casi todos los navegadores manejan hojas de estilo alternativas cuando se ofrece más de una vinculación de estilo externo, ofreciendo un menú de selección para que el usuario opte por una de las tres hojas de estilo como se nombraron.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Ejemplo rel.html</title>
<meta http-equiv="X-UA-Compatible" content="IE=8" />
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<link rel="stylesheet" type="text/css" href="verde.css" title="verde" />
<link rel="stylesheet" type="text/css" href="rojo.css" title="rojo" />
<link rel="stylesheet" type="text/css" href="azul.css" title="azul" />
</head>
<body>
Ejemplo del elemento link rel: si usamos el elemento párrafo como
<p>PÁRRAFO</p>
comprobaremos que se aplica el estilo externo de distinto color según
se defina en los archivos "verde.css", "rojo.css" y "azul.css" a todos
los elementos párrafo de este documento.
</body>
</html>
Resultado:
Vea resultado en la página link-rel.htmlEjemplo <link rel>: Uso de alternate stylesheet
El valor alternate stylesheet se supone que es para indicar hojas de estilo alternativas, aunque tal como se expuso en el ejemplo anterior, es suficiente con relacionar más de un vínculo con el valor stylesheet para que el navegador lo incluya como opciones en su menú (Netscape, Firefox y Opera). Este ejemplo es como el anterior, pero la última vinculación la hacemos con alternate stylesheet, no observándose ninguna diferencia en los resultados.
...
<link rel="stylesheet" type="text/css" href="verde.css" title="verde" />
<link rel="stylesheet" type="text/css" href="rojo.css" title="rojo" />
<link rel="alternate stylesheet" type="text/css" href="azul.css" title="azul" />
...
Resultado:
Vea resultado en la página link-rel2.htmlEjemplo <link rel>: Uso de alternate
Dando el valor alternate al atributorel podemos especificar páginas (no estilos) alternativas. Un ejemplo de uso puede ser cuando tenemos una misma página pero en varios idiomas. En este ejemplo tenemos dos páginas con el mismo contenido, una para español y otra para inglés. Se supone que en cada página habría un vínculo que nos permitiría ir a su traducida. Pero en la cabecera de las dos páginas, como se expone a continuación, incluimos el atributo rel con el valor alternate para indicar a los motores de búsqueda (principalmente) páginas con un título y un idioma concretos. Veáse que además especificamos el tipo de contenido del recurso externo con type="text/html" indicando que se trata de páginas de texto en código HTML o XHTML. Una página es:... <title>Ejemplo link-rel-alternate-es.html (español)</title> ... <link rel="alternate" type="text/html" title="Ejemplo link-rel-alternate.html (inglés)" hreflang="en" href="link-rel-alternate-en.html" /> ...La otra página es:
...
<title>Example link-rel-alternate-en.html (english)</title>
...
<link rel="alternate" type="text/html" title="Example link-rel-alternate.html (spanish)"
hreflang="es" href="link-rel-alternate-es.html" />
...
Resultado:
Una de las páginas es la siguiente link-rel-alternate-es.html. La otra es link-rel-alternate-en.html. Con Opera 10.53, en su menú de información de la página hay un comando para acceder a alternate, con lo cual podemos alternar entre las dos páginas.Ejemplo <link rel>: Uso de start, prev, next
Las relaciones del documento actual con el vinculado se realizan con los valores start, prev, next que indican la página de inicio, anterior y siguiente.
...
<title>Ejemplo INDICE.html</title>
...
<link rel="next" href="tema-1.html" />
...
<title>Ejemplo tema-1.html</title>
...
<link rel="start" href="indice.html" />
<link rel="next" href="tema-2.html" />
<link rel="prev" href="indice.html" />
...
<title>Ejemplo tema-2.html</title>
...
<link rel="start" href="indice.html" />
<link rel="next" href="tema-3.html" />
<link rel="prev" href="tema-2.html" />
...
<title>Ejemplo tema-3.html</title>
...
<link rel="start" href="indice.html" />
<link rel="prev" href="tema-2.html" />
...
Resultado:
Ver resultado en indice.html.Ejemplo <link rel>: Uso de icon
Otro uso de este atributorel es con el valor icon, aunque no forma parte de la relación expuesta en %ContentType, si es aceptado por los Navegadore. En Explorer se supone que este valor debe ser shortcut icon, aunque en la versión 7 no hemos podido verlo funcionando cuando usamos el navegador de forma local. En cambio si se suministra la página desde un servidor (incluso funcionado en forma local) entonces Explorer si mostrará el icono. Se trata de dotar de un icono a la página, apareciendo en las pestañas y otros lugares de la aplicación navegadora. En todos los casos hay que dar el valor image/x-icon al atributo type así como la ruta donde se encuentra ubicada la imagen.
...
<link rel="icon" href="cara.ico" type="image/x-icon" />
<link rel="shortcut icon" href="cara.ico" type="image/x-icon" />
...
Resultado:
Ver resultado en link-rel-icon.html.Si cambiamos la imagen del icono después de haber presentado la página con un icono anterior, hay que tener en cuenta que algunos navegadores como Firefox o Safari dejan almacenado en su caché el icono anterior, por lo que no se actualizará el nuevo si tiene el mismo nombre de archivo. En caso de usar el mismo nombre, para actualizarlo hay que borrar la caché del navegador y actualizar la página.
Vínculo inverso <link rev = "x">
El atributo rev es el complementario de rel. El valor "x" sigue siendo del tipo %LinkTypes para tipos de vínculo. Si un documento llamado doc-1.html contiene <link rel="tipo de vínculo" href="doc-2.html" /> como un vínculo directo a un recurso externo llamado doc-2.html, entonces esta vinculación es la complementaria de la que se puede contener en doc-2.html <link rev="tipo de vínculo" href="doc-1.html" /> pero usando un vínculo inverso a doc-1.html. Es decir, con rel indicamos un sitio hacia donde ir, mientras que con rev indicamos un sitio desde donde venimos. Por lo demás estos dos atributos se usan de forma similar.Ejemplo <link rev>: Uso de start, prev, next
Este ejemplo es similar al mostrado en<link rel> para los valores start, prev, next. 
Al abrir con Opera la página "tema-1.html" se muestra activa la doble flecha azul que indica navegación por vínculos de este tipo según se expone en la imagen, lo que nos permite pasar a la siguiente página "tema-2.html". Veáse que la flecha verde de vínculos no nos permite ir hacia la derecha, por lo que no podríamos ir a la siguiente página a no ser que incluyamos un vínculo específico en la página. En ésta segunda página se activa además la doble flecha hacia atrás a partir del atributo rev que lo señala. Al mismo tiempo también podemos ir adelante a "tema-3.html", en cuyo momento esta doble flecha se inactiva pues ya no hay más páginas hacia adelante. Obsérvese que esta navegación es a través de <link rel rev>, mientras que la flecha verde realiza la navegación a través de vínculos visitados, como hacen otros navegadores. El código de las tres páginas es el siguiente:
...
<title>Ejemplo tema-1.html</title>
...
<link rel="next" href="tema-2.html" />
...
<title>Ejemplo tema-2.html</title>
...
<link rel="next" href="tema-3.html" />
<link rev="prev" href="tema-1.html" />
...
<title>Ejemplo tema-3.html</title>
...
<link rev="prev" href="tema-2.html" />
...
Resultado:
Ver resultado en tema-1.html.CUERPO DE UN HTML <body>
HTML401 DTD-XHTML10T DTD-XHTML10SEl elemento raíz
<html> debe contener obligatoriamente un encabezado <head> y un cuerpo <body>. Este cuerpo puede contener elementos de bloque del tipo %Block según DTD estricto, aunque el DTD Transicional permitía elementos de flujo (tipo %Flow). La diferencia estriba en que los elementos de flujo comprenden todos los elementos, es decir, a elementos de bloque, elementos de línea y el elemento formulario (<form>). Por lo tanto con la versión estricta de XHTML no podemos incluir directamente el elemento formulario ni elementos en línea en el cuerpo, aunque si podemos incluirlo indirectamente en un elemento <div> que puede contener elementos del tipo %Flow.En XHTML Transicional se indican además algunos atributos como background, bgcolor, text, link, vlink, alink que no vamos a exponer aquí, pues se sustituyen con facilidad por estilos o pseudoclases de vínculo. Por lo tanto en XHTML estricto no se permite ningún atributo, especificando sólo los eventos onload, onunload que exponemos en script.html.
Ejemplo <body>
En este ejemplo probamos como la versión estricta de XHTML sólo permite contener en el cuerpo<body> a elementos en bloque. Cualquier cosa como elementos en línea, texto suelto (que se considera un elemento en línea) o formularios deben encerrarse primero en un elemento en bloque. El primer ejemplo presenta una página con texto suelto y un formulario en XHTML transicional, mientras que el segundo ejemplo se hace lo mismo pero con XHTML estricto. El botón del formulario sólo sirve para el propósito de este ejemplo, pues nos lleva a otro contenido permitiéndonos volver. El código en XHTML transicional es:
<body>
Un elemento de texto en línea (#PCDATA) dentro de 'body' que también
contiene un elemento 'form' con borde azul:
<form method="post" action="form-transicional.html"
style="border: blue solid 1px; ">
Un botón para este formulario:
<input type="submit" value="aceptar" />
</form>
</body>
El código en XHTML estricto es el siguiente:
<body>
<div style="border: red solid 1px; ">
Un elemento de texto en línea (#PCDATA) dentro de uno de bloque 'div'
con borde rojo que a su vez está dentro de 'body'. El elemento 'div'
también contiene el siguiente elemento 'form' con borde azúl incluyendo
un único botón, el cual también es obligado a encerrarse dentro de
otro elemento en bloque como 'div':
<form method="post" action="form-estricto.html"
style="border: blue solid 1px; ">
<div>
Un botón para este formulario:
<input type="submit" value="aceptar" />
</div>
</form>
</div>
</body>