PROGRAMANDO CON XHTML

XHTML es un lenguaje creado para páginas web en la cual tienen ciertos cambios a diferencia de HTML. Si has programado páginas WEB en HTML no encontraras ninguna dificultad con XHTML.

XHTML (ExTENSIBLE hYPER tEXT mARKUP lANGUAGE) es el lenguaje de marcas creado para sustituir al lenguaje HTML. Se podría decir que el XHTML es la versión XML de HTML, ya que básicamente las misma funcionalidades, cumpliendo las especificaciones más estrictas de XML.

Su objetivo es avanzar en el proyecto del W3C (Word Wide Web Consortium), de lograr páginas web donde la información y la forma de prestarla estén claramente separadas. XHTML es un lenguaje semántico, por lo tanto no definimos el aspecto de las cosas sino lo que significan.

La diferencia entre ambos lenguajes es principalmente un cambio en el concepto y forma de la estructuración del documento. Se buscan sintaxis coherentes dentro del documento, donde los distintos elementos deben estas correctamente anidados, todas las etiquetas en minúsculas, los elementos cerrados correctamente, los valores de los atributos entrecomillados, etc. De esta forma, se evita la anarquía existente códigos web.

El lenguaje XHTML se basa en el uso de etiquetas, también llamadas marcas directivas o comandos (tags). Estas etiquetas son fragmentos de texto delimitados por los símbolos menor que (<) y mayor que (>). Básicamente estas etiquetas indican al navegador la forma de representar los elementos (textos, gráficos, etc.) que contiene el documento.

Existe normalmente una etiqueta de inicio <etiqueta> y otra de final </etiqueta>, si bien algunos comandos sólo disponen de la de inicio, como es el caso de salto de línea <br /> o imagen <img />.

La mayoría de las etiquetas se complementan con los llamados atributos, elementos que permiten establecer valores o propiedades de la misma.

REGLAS DEL XHTML A CONSIDERAR:

1.- Un documento XHTML no puede tener etiquetas abiertas. Un <p> debe cerrarse con un </p>, un <li> debe de cerrarse con un </li>,  así todos los elementos que manejan bloques.

Las etiquetas que definen un elemento de forma independiente deben cerrarse a sí mismas añadiendo una barra al final de la misma. Hay que dejar un espacio en blanco entre el nombre de la etiqueta y la barra / para que los navegadores antiguos mantengan la compatibilidad con XHTML. <img />, <hr />, <br />, <link />, etc.

Sintaxis incorrecta:
<p> Quice85 esta programando
Sintaxis correcta:
<p> Quice85 esta programando </p>

2.- Los elementos en un documento XHTML deben estar anidados de forma lógica, por lo tanto, deben cerrarse en el orden inverso al que fueron abiertos. Por ejemplo: <p><strong> debe de cerrarse en el orden </strong></p>.

Sintaxis incorrecta:
<p> quice85 <strong>esta programando</p></strong>
Sintaxis correcta:
<p> quice85 <strong>esta programando</strong></p>

3.- Todas las etiquetas y sus atributos deben escribirse siempre en minúsculas. No ocurre lo mismo con el valor del atributo que sí puede contener mayúsculas.

Sintaxis incorrecta:
<SPAN class="Estilo_azul">Bienvenidos al XHTML</span>
Sintaxis correcta:
<span class="Estilo_azul">Bienvenidos al XHTML</span>

4.- Todos los valores de los atributos de las etiquetas deben estar SIEMPRE entre comillas.

Sintaxis incorrecta:
<table width=100% border=2 cellspacing=2 cellpadding=5>
Sintaxis correcta:
<table width="100%" border="2" cellspacing="2" cellpadding="5">

5.- El primer elemento del documento siempre <html> y deberemos colocar el <head> y <body> en su orden correcto sin olvidar de cerrarlos al final del documento. El uso del elemento <title> es de carácter obligatorio y se tendrá que poner justo después de <head>.

<html>
<head>
<title>Pagina de quice85</title>
</head>
<body>
......................
</body>
</html>

6.- El atributo id reemplaza al atributo name. Sólo en casos de compatibilidad con navegadores antiguos está permitido el empleo del atributo name.

Sintaxis incorrecta:
<input type="text" name="nombre_caja_texto" size="30" />
Sintaxis correcta:
<input type="text" id="nombre_caja_texto" size="30" />

7.- XHTML es el lenguaje semántico, cuando desarrollemos un documento hay que pensar en la organización y estructuración del mismo más que en su maquetación. Se deberán de utilizar las etiquetas de acuerdo al fin para el que fueron pensadas, es recomendable usar un título la etiqueta <h1> en vez de un <span> con una clase asociada.

Recordemos que la mayoría de etiquetas disponen de atributos adicionales que aportan información adicional sobre el elemento, como por ejemplo el atributo alt de la etiqueta <img>.

Las etiquetas mal escritas o desconocidas para un navegador son ignoradas. Sin embargo, los errores de sintaxis, como por ejemplo olvidar delimitar una etiqueta, pueden provocar errores en la validación y visualización del documento.

ESTRUCTURA DE UN DOCUMENTO XHTML

El DOCTYPE y la codificación: Para escribir un código XHTML válido, deberemos indicar al navegador el tipo de documento que va a abrir. La declaración del tipo de documento XHTML es obligatoria (DTD).

Las tres opciones de DTD son: Estricto (Stric), Transsicional (Transitional) y Marcos (Frameset).

La declaración XHTML 1.0 Strct se utiliza cuando se quiere obtener una estructura limpia y clara dejando el aspecto y la maquetación a las CSS (Hojas de estilo). No está permitida la utilización de etiquetas tipo bgcolor o center, por ejemplo. Una de sus principales ventajas es conseguir páginas bien estructuradas y fácilmente configurables mediante CSS; al igual también existen aún demasiados problemas de incompatibilidad con ciertos navegadores.

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

XHTML 1.0 Transitional se utiliza cuando se describe la presentación de los documentos por medio de etiquetas. Es el sistema adecuado para cuando se desea facilitar el acceso a usuarios con navegadores sin posibilidades de tratamiento de CSS. Esta opción incluye todas las características de XHTML 1.0 Strict, pero añade características orientadas a la presentación.

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

XHTML 1.0 Frameset es una variante de la opción Transitional, que permite que el contenido del documento esté estructurado con marcos.

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

La codificación por defecto de un documento es Unicode UTF-8. Para evitar conflictos con algunos caracteres del castellano, en la definición de sitios estrictos se recomienda usar la codificación ISO-8859-1.

<?xml version="1.0" encoding="iso-8859-1"?>

Si el DTD no es estricto, es recomendable incluir el correspondiente comando meta en vez de la instrucción anterior.

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

Elementos fundamentales

El resto del documento XHTML está definido por una etiqueta de inicio <html> y una de terminación </html>. Otras dos partes fundamentales de todo documento son la cabecera, comprendida entre las etiquetas <head> y </head> y el cuerpo entre <body> y </body>.

A la etiqueta html debemos indicarle el lenguaje en el que está escrito el documento. Si escribimos en castellano, el código sería el siguiente:

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

Los atributos de xmlns que determinan el lenguaje del documento (xml:lang=”sp” lang=”sp”) no son admitidos por algunos navegadores; no obstante, no tiene ningún efecto negativo para aquellos que no lo soportan.

La cabecera

La cabecera de un documento viene delimitada por la etiquetas <head> y </head> respectivamente y contiene fundamentalmente información sobre el documento como el título, vínculos a hojas de estilo o scripts, instrucciones meta, etc. Todas ellas son opcionales, aunque el uso de la etiqueta title es obligatorio.

La etiqueta <title> es la encargada de especificar el título del documento. Este se suele mostrar generalmente en la parte superior del navegador. También es utilizado como identificador en las listas de favoritas, también llamadas bookmarks.

<title>Este es el t&iacute;tulo de la primera p&aacute;gina WEB</title>

Otra etiqueta relacionada con la cabecera de un documento es <meta />, usada para incluir cualquier información relevante sobre la página. La especificación oficial de XHTML 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 oportunos.

title

title

Como podemos observar el titulo de la página se aparece en la parte superior de la página.

Para todas las definiciones, la información se escribe usando pares nombre/valor. Los motores de búsqueda utilizan dicha información en los resultados de sus búsquedas para ofrecer un resumen del contenido de la página web.

Una buena utilización de las etiquetas meta permitirá que el documento tenga un mejor posicionamiento gracias a la información que obtendrán de ellas, los diferentes robots de los buscadores.

Para el primer supuesto se emplean atributos del tipo http-equiv y para el segundo del tipo name. En ambos casos, el valor a especificar se determina en el campo content.

En el siguiente fragmento típico de etiquetas meta y después con detalle algunos de los meta más importantes.

<meta http-equiv="refresh" content="15" url="http://www.miweb.com/" />
<meta name="Content-Type" content="text/html; charset=iso-8859-1" />
<meta name="description" content="Mi web. De todo para todos. La mejor" />
<meta http-equiv="Content-Language" content="ES-ES" />
<meta name="robot" content="index, follow" />
<meta name="author" content="Carlos Orós" />
<meta name="distribution" content="Global" />
<meta name="copyright" content="Carlos Orós" />

La etiqueta <meta http-equiv=”refresh” content=”segundos” url=”http://www.miweb.com/” /> no se usa normalmente a no ser que queramos redireccionar de forma automática a otra URL transcurridos unos segundos.

Anuncios

Acerca de quice85

Hola soy ingeniero en sistemas computacionales me dedico a dar clases, talleres de programación, diseño gráfico, diseño y programación de páginas WEB, mantenimiento, animación y ofimática. Mi nombre es Elfego Emilio Quintana de la Cruz (quice85). Correo: E-mail:quice85@outlook.com E-mail alternativo: quice85@hotmail.com o quice85@gmail.com. Facebook: Emilio Quintana o quice85. Twitter@: Emilio Quintana o quice85. Youtube: quice85. Empresa: SIEE (Sistemas Informáticos Eléctricos Electrónicos).
Esta entrada fue publicada en Sin categoría. Guarda el enlace permanente.

2 respuestas a PROGRAMANDO CON XHTML

  1. francisco dijo:

    QUE CREOO EL xhtmal y el año

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s