Primer documento XHTML

1. Introducción

XHTML significa lenguaje de marcado de hipertexto extendido.

Se utiliza para generar documentos y contenidos de hipertexto generalmente publicados en la WEB. Es además una reformulación del lenguaje HTML que se puede jactar de ser ahora compatible con XML.

Un lenguaje de marcado nos permite dejar indicaciones (marcas) en un documento que sirven para diferenciar distintos tipos de contenidos, estructuras o secciones. Por ejemplo hay marcas (elementos, etiquetas) que pueden "marcar" qué es un título, y su lugar en una jerarquía de importancia, o advertir que una palabra debe estar enfatizada, o bien que una oración es además un enlace hacia otro recurso.

Todo esto, es posible de marcar sin ambiguedades con el correcto uso de XHTML.

Otra de sus virtudes es que está ideado para mantener una saludable separación entre el contenido y el diseño. Es decir, que uno no afecte al otro, y se puedan modificar independientemente.

A medida que avancen y conozcan la aplicación de CSS (hojas de estilo) a los documentos notarán tal separación de manera evidente.

El XHTML está diseñado para que sea funcional no sólo a los navegadores sino a varios dispositivos WEB (teléfonos móviles, portátiles, etc). A lo largo de este manual haremos uso del término agente de usuario para referirnos a estos dispositivos capaces de interpretar documentos XHTML.

Antes de seguir puedes recorrer estos enlaces en la Wikipedia para tener una introducción más amplia y conocer algo sobre la historia de estos lenguajes:

NOTA: A lo largo de éste manual muchas palabras apuntarán a la enciclopedia libre Wikipedia y a otros sitios, en un intento de poder ofrecer mayor información o ampliar explicaciones sobre temas y conceptos que escapan al alcance de los objetivos de este manual.

2. Fichero XHTML, editor y navegador web

El fichero de un documento XHTML, en sí, es un archivo de texto plano generalmente con alguna de estas extensiónes: .html, .htm, o bien .xhtml. Los agentes de usuario interpretan estos archivos y procesan el código para mostrarlos en pantalla.

Es conveniente que a medida que aparezcan ejemplos, practiquen escribiendo sus propios documentos XHTML. Pueden editar los ficheros utilizando un editor de textos planos y para poder visualizar los resultados del documento un navegador web (o cualquier otro agente de usuario que interprete XHTML).

Utilicen el editor que ustedes quieran, y al guardarlo se recomienda elegir algunda de estas extensiones, para que su sistema operativo reconozca rápidamente el tipo de fichero (.html, .htm, .xhtml.)

La elección del agente de usuario es menos trivial y se presta a discusión ya que por ejemplo algunos navegadores no cumplen de manera apropiada con los estándares (recomendaciones) que la W3C propone y que intenta respetar este manual.

Personalmente opto por elegir Mozilla Firefox o Konqueror, puedes utilizar el que tú quieras pero asegurate de que cumpla minimamente con los estándares para que los ejemplos aquí presentados funcionen de manera apropiada.

3. Etiquetas

En la escritura de los documentos nos valdremos de etiquetas (marcas) como principal elemento de sintaxis, que para diferenciarse del contenido, están encerradas por paréntesis angulares.

Ejemplo del uso de etiquetas, con el elemento p (párrafo):

<p>Contenido del parrafo</p>

<p> marca el inicio de la sección que contendra un párrafo, </p> marca el final del párrafo. Toda etiqueta abierta debe ser cerrada escribiendose de nuevo con el agregado de una barra entre la palabra y el parentesis de angular de apertura.

Algunos elementos que no llevan contenido se nos permite escribirlos de manera tal que la apertura y el cierre se representan con una única etiqueta. El elemento br utilizado para el salto de línea, se puede escribir así <br /> que es una simplificación de la forma también válida: <br></br>.

NOTA: Es importante notar el espacio que queda entre el fin de la palabra y la barra, en la versión resumida, de esta manera se conserva compatibilidad con algunos agentes de usuario que no reconocen la etiqueta sin ese espacio.

Las etiquetas de apertura pueden contener atributos que especifican características particulares de ésta. Los atributos tienen un nombre seguido de un igual y entre comillas el valor de tal atributo.

Ejemplo del elemento a con atributos:

<a href="http://www.example.com">Example</a>

La etiqueta es <a>, el atributo es href y el valor es http://www.example.com. Con esta etiqueta se construyen los vínculos. Tanto los elementos, cómo los atributos y valores, deben escribirse en letras minúsculas. Los valores de los atributos van obligatoriamente entre comillas (incluso cuando estos valores sean números).

Los elementos soportan anidamiento (con algunas condiciones que ya conoceremos).

Ejemplo de anidamiento con los elementos a e img:

<a href="http://www.example.com"><img src="ejemplo.gif"/></a>

El enlace que en el ejemplo anterior se lo habíamos aplicado a la palabra Example ahora se lo aplicamos a una segunda etiqueta ( img ) la cual tiene la finalidad de mostrar imagenes, por lo que que la etiqueta más externa (elemento a) convierte a la imagen en un vínculo.

4. Primer documento XHTML

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<!--Este es un comentario y no sera tomado en cuenta por el navegador -->
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="es" lang="es">
<head>
<title>Titulo de la pagina</title>
</head>
<body>
<p>Primer documento XHTML, es decir un, Hola mundo</p>
</body>
</html>

Analicemos el código línea a línea:

<?xml version="1.0" encoding="UTF-8"?>

Es una declaración XML, dónde específicamos el atributo enconding con el valor UTF-8. Este debería ser suficiente en la mayoría de los casos. Si quieres conocer el por qué, puedes investigar más sobre: la codificación de caracteres y UTF-8 en la Wikipedia.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

Este es el encabezado que deberían llevar todos los documentos XHTML1.0 estríctos acordes a las específicaciones de la W3C. Es un aviso para que el agente de usuario sepa que tipo de documento va a interpretar. Para ser más específicos diremos que al ser un documento de tipo strict.dtd, los elementos utilizados serán sólo los incluídos en el lenguaje XHTML 1.0. Si utilizaramos etiquetas antiguas y declararamos el documento cómo estricto, no podríamos validar nuestra página XHTML.

NOTA: Fijarse además que hay un salto de línea a la mitad de la etiqueta, este no es interpretado y tampoco lo es en el contenido a menos que lo explicitemos con la etiqueta <br />. Simplemente se incluyen saltos de línea para hacer el código más legible.

Hay otros dos tipos de documentos que mantienen compatibilidad con HTML 4 y soporte de frames, que no tratermos en este manual, ya que prefirero explicar un uso más estrícto del lenguaje.

Declaración de documentos Transitional:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

Declaración de documentos Frameset:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">

Como dije trataremos de concentrarnos en los documentos declarados como estríctos.

<!--Este es un comentario y no sera tomado en cuenta por el navegador -->

Los comentarios comienzan con <!-- y terminan con --> (los saltos de línea no los quiebran). No son tomados en cuenta por el agente de usuario, es decir no se interpretan (por lo que no se representan) y se utilizan frecuentemente para hacer aclaraciones en el código.

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="es" lang="es">

Aquí damos comienzo al documento XHTML, todo documento debe llevar esta etiqueta de apertura ( <html> ) y al finalizar debemos escribir la etiqueta de cierre que en el ejemplo se encuentra al final del código ( </html> ). Además aparecen 3 atributos, el primero específica el tipo de documento, y el segundo y el tercero deben llevar como valores el código del lenguaje en el que será escrito. Para la lengua castellana este valor es es. Puedes averiguar los códigos de otras lenguas.

<head>
<title>Titulo de la pagina</title>
</head>

Con la etiqueta de apertura <head>comienza lo que se llama el encabezado de las páginas web, aquí se dan ciertas específicaciones y otra META información acerca del documento que ya veremos con más detalle. Pero entre ellas está el elemento utilizado en el ejemplo, mediante las etiquetas <title></title>, que encierran el título de la página. Los navegadores suelen mostrarlo cómo título de la ventana. También es utilizada por los buscadores cuando presentan resultados de los documentos a sus usuarios.

<body>
<p>Primer documento XHTML, es decir un, Hola mundo</p>
</body>

El cuerpo que comienza con <body> contiene todo el contenido que será representado por el agente de usuario. En nuestro ejemplo sólo utilizamos una etiqueta más, <p> que sirve para encerrar párrafos.

NOTA: Cada elemento puede ser un elemento de bloque o de línea (block e inline respectivamente). p es un elemento de tipo block ya que rompe la línea en el lugar dónde es incluído y crea su propio bloque, agregando un salto de línea por encima y por debajo de sus etiquetas de apertura y cierre. Otros elementos, cómo el elemento strong, son inline ya que pueden insertarse sin romper la línea.

Cerrando el cuerpo (</body>) y el documento XHTML (</html>) conseguimos nuestra primer página.

Al probar el ejemplo sólo veran el texto del párrafo, mas o menos así:

Primer documento XHTML, es decir un, Hola mundo

5. Ejemplo

VER EJEMPLO01.html

NOTA: Haciendo click en el ejemplo consultaran el ejemplo, pero interpretado por el navegador. Pueden descargarlo para ver su código fuente.

Página principal

15 aporte(s) de lectores:

Anonymous eykO aporta...

añadid algo: content type... xhtml debería servirse como xml y no como texto.

7:45 p.m.  
Anonymous Juan Carlos aporta...

Pregunta :
Es opcional la primera linea del ejemplo
donde definen que es de tipo xml encoding utf8
como veo en el codigo fuente del ejemplo que no lo ponen nunca .
ni tampoco ponen el lenguaje en los atributos de la etiqueta html

gracias

2:20 p.m.  
Anonymous Anónimo aporta...

Hola, lei todo el tutorial y me parece excelente, pero yo he visto q hay otras etiquetas que no me acuerdo que tambien son de xhtml, si se pudiera conseguir información de estas otras etiquetas estaria muy bien...
Gracias, excelente

9:31 p.m.  
Anonymous Anónimo aporta...

juan carlos: eso no es opcional, se debe poner para especificar el tipo de documento, se lleva a validator.w3.org, se copia el codigo y ahi dicen si esta bien hecho.

10:32 p.m.  
Blogger Eddy Josafat aporta...

El problema de meter el ?xml version=... en la cabecera del documento es que entonces el Explorer 6 entra en el modo de renderizado conocido como Quirks Mode, en lugar de modo de renderizado acorde al estandar y si cuando preparaste el css contabas con el modo estandar de renderizado te desbarata la pagina...

1:57 a.m.  
Blogger Gustavos Webs aporta...

Este comentario ha sido eliminado por el autor.

7:03 a.m.  
Blogger Gustavos Webs aporta...

Si yo incluyo esta declaracion en un archivo .php el navegador no lo lee.
?xml version="1.1" encoding="UTF-8"?
!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"
html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"

pero si le borro esta parte-->
?xml version="1.1" encoding="UTF-8"?
sale perfectamente, porque??? o como se puede arreglar para que este bien?

8:31 p.m.  
Blogger Gustavos Webs aporta...

Bueno, perdon, ya encontre la solucion. en vez de la codificacion de la primera linea, se debe borrarla e incluir esta etiqueta meta entre las head

meta http-equiv="Content-Type" content="text/html;charset=utf-8"

eso es porque los scripts de php se escriben ? o ? entonces se hace lio.

Saludos y gracias por el manual.

9:04 p.m.  
Blogger G. Cristian N. aporta...

La Especificación Oficial XHTML 1.0 de W3C (ablando de Documentos Estrictamente Conformes) dice calramente los objetos que se DEBEN incluir en una página:

1. Debe haber una declaración DOCTYPE en el documento antes del elemento raíz (una de las 3 enumeradas).

2. El elemento raíz del documento debe ser <html>.

3. El elemento raíz del documento debe indicar el espacio nominal XHTML usando el atributo "xmlns" (para XHTML es "http://www.w3.org/1999/xhtml")

Por lo tanto "<?xml version="1.0" encoding="UTF-8" ?>" no es obligatorio.

La misma especificación no tiene para la etiqueta <meta> una lista definida de propiedades ni valores.

Para Gustavos Webs:
Lo que respecta a una pagina .php está totalmente prohibido utilizar "<?xml version="1.0" encoding="UTF-8" ?>" ya que PHP no deriva de XML.

2:42 p.m.  
Blogger Steel Black aporta...

Hay algun tipo de pajina web donde yo pueda pegar el codigo defotos para con ella crear una plantilla y luego poder descargarla facilmente?
Mi Correo es :
Steel-Black-3ni@hotmail.com
Avisame porfavor....!!!

10:00 p.m.  
Anonymous Anónimo aporta...

¿Porque si lo guardo en el blog de notas no me sale el navegador y si lo hago con un creador de webs si?

10:09 a.m.  
Blogger bienestar y Tecnologia aporta...

mas bien es una inquietud sera que blogger es compatible con páginas xhtml y si no se puede con alguno cambios publicar una pagina hecha con xthml

3:12 p.m.  
Anonymous Beems aporta...

Gustavo, también lo podés corregir haciendo un echo con la cadena que te trae problemas dentro de la sintaxis de php.

Eso sí, usá bien las comillas las comillas...

Saludos.

4:39 p.m.  
Anonymous Xiib aporta...

Hola En realidad tengo una pregunta ¿Cuál es la fecha de realización de este texto? Lo pregunto porque me parece que esta información no coincide con la que he obtenido primero y es muy importante para mi poder saber cual es la más reciente.

En un manual obtenido en www.libroweb.es indica que la forma de indicar el lenguaje es usando una etiqueta META y no como lo muestran aquí. Pueden aclararme cuál es el método correcto por favor.

3:52 a.m.  
Anonymous Sigfridking aporta...

¿Cuando se crea un documento la extensión forzosamente tiene que ser guardada como ".XHTML" o bien puede guardarse indistintamente cómo ".HTML" solamente?

6:16 p.m.  

Publicar un comentario

ATENCIÓN: Por favor intenta aportar o preguntar sobre el tema que trata la página. Otro tipo de consultas o criticas puedes dejarlas en el libro de visitas. Los aportes y preguntas están moderados simplemente para evitar spam o comentarios fuera de lugar.