XHTML - el esqueleto de la web! (II)

publicado el 2007-11-26 por ikki - categoría: Programación

XHTML - el esqueleto de la web! (II)

Cómo te conté hace más o menos 2 semanas atrás (¡qué rápido pasa el tiempo!), para construir una página web que cumpla con los estándares de codificación HTML necesitas al menos estas etiquetas:

<!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>Título del sitio web</title>
    </head>
    <body>
    </body>
</html>

... por supuesto, tal como está ahora sólo tendrás una página en blanco. Necesitas manejar otras etiquetas para poder construir tu sitio. Primero lo primero, hablemos de las etiquetas elementales (que si no te diste cuenta, son las que acabo de mostrar xD).

En la primera línea podrás observar la etiqueta <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">... ¿qué de qué trata? Bueno, esta etiqueta le dice al navegador qué tipo de (X)HTML estás utilizando, y la misma siempre debe estar ubicada al principio de cada página web. ¿Por qué debes utilizarla? Simple, dependiendo del Document Type Declaration o DOCTYPE que declares, el navegador interpretará de una forma u otra el código que muestres en tu sitio. El navegador tratará entonces tu HTML, CSS y DOM como tú esperas que los interprete. Si tu sitio web muestra un DOCTYPE que ya está en desuso o no utilizaste ninguno es muy probable que los navegadores lo interpreten como si tu sitio fue estructurado a la vieja escuela por lo que tratará tu página como si hubiera sido diseñada por ejemplo para Internet Explorer 3 o 4, cosa que no es lo que quieres.

Para ponerlo de forma sencilla, los DOCTYPE strict, transitional y frameset se diferencian básicamente por las restricciones sobre las etiquetas que pueden utilizarse y las que ya no. ¿Por qué se han restringido algunas de las etiquetas HTML y otras no? Pues la razón es porque teniendo a mano la gran herramienta que es el CSS para darle formato a tus contenidos, muchas de estas etiquetas han pasado a ser obsoletas y por lo tanto no deberían utilizarse. Por ello debes tener MUCHO cuidado cuando selecciones el doctype que vas a utilizar en tu sitio. Yo, por ejemplo, utilizo el que te mostré anteriormente ya que me permite utilizar etiquetas HTML ya viejitas (como por ejemplo <b>, que ahora es <strong>) y al mismo tiempo disfrutar de las nuevas etiquetas sin tener muchas restricciones. Lo recomendable para aquellos que están comenzando es utilizar el doctype transitional mientras le agarran el hilo a la cuestión, o si se atreven pues comenzar de lleno con el strict. En el caso del DOCTYPE tipo frameset, sólo aplica para aquellos sitios que utilizan frames. Si no es tu caso, no lo uses.

La segunda etiqueta, <html xmlns="http://www.w3.org/1999/xhtml">, indica el namespace que identifica tu documento. ¿Qué?. Lee a continuación: "...un 'namespace' XML es una colección de nombres, identificados por un URI, que se utiliza en los documentos XML para identificar los nombres de los elementos y atributos..." (más info: Programación.Net). No hay más que añadir :P

La tercera etiqueta, <head>, es donde se incluyen otros elementos importantes de tu sitio y que sólo pueden ser declarados aquí: la hoja de estilos, los meta-tags, links a otros recursos, y por supuesto el título de tu sitio xD

En el <body> va... pues... el body :P Nah, aquí va toda la carne de tu sandwich: el contenido de tu sitio. Es donde vas a colocar tus videos favoritos de youtube, juegos flash, textos, warez, ritos religiosos, o cualquier cosa que quieras hacer conocer al mundo (como tu colección de stickers de Sain Seiya o cosas así ^^).

Finalmente, <html>. Esta etiqueta tiene como misión de vida declarar el fin de tu documento HTML. Es todo :P

La próxima semana hablaremos ya en profundidad de las etiquetas que utilizarás para darle forma a tu contenido cuando elabores tu primer sitio web. Take care!

Tags: , , , ,