XHTML
¿Que es?
El lenguaje XHTML es muy similar al lenguaje HTML. De hecho, XHTML no es más que una adaptación de HTML al lenguaje XML. Técnicamente, HTML es descendiente directo del lenguaje SGML, mientras que XHTML lo es del XML (que a su vez, también es descendiente de SGML).
Las páginas y documentos creados con XHTML son muy similares a las páginas y documentos HTML. Las discusiones sobre si HTML es mejor que XHTML o viceversa son recurrentes en el ámbito de la creación de contenidos web, aunque no existe una conclusión ampliamente aceptada.
Actualmente, entre HTML 4.01 y XHTML 1.0, la mayoría de diseñadores escogen XHTML. En un futuro cercano, si los diseñadores deben elegir entre HTML 5 y XHTML 1.1 o XHTML 2.0, quizás la elección sea diferente
CSS
Originalmente, las páginas HTML sólo incluían información sobre sus contenidos de texto e imagenes. Con el desarrollo del estándar HTML, las páginas empezaron a incluir también información sobre el aspecto de sus contenidos: tipos de letra, colores y márgenes.
La posterior aparición de tecnologías como JavaScript, provocaron que las páginas HTML también incluyeran el código de las aplicaciones (llamadas scripts) que se utilizan para crear páginas web dinámicas.
Incluir en una misma página HTML los contenidos, el diseño y la programación complica en exceso su mantenimiento. Normalmente, los contenidos y el diseño de la página web son responsabilidad de diferentes personas, por lo que es conveniente separarlos.
CSS es el mecanismo que permite separar los contenidos definidos mediante XHTML y el aspecto que deben presentar esos contenidos:
Una ventaja añadida de la separación de los contenidos y su presentación es que los documentos XHTML creados son más flexibles, ya que se adaptan mejor a las diferentes plataformas: pantallas de ordenador, pantallas de dispositivos móviles, impresoras y dispositivos utilizados por personas discapacitadas.
De esta forma, utilizando exclusivamente XHTML se crean páginas web "feas" pero correctas. Aplicando CSS, se pueden crear páginas "bonitas" a partir de las páginas XHTML correctas.
Utilizar XHTML+CSS te puede ayudar a mejorar tu posicionamiento web en Google. Por una parte, conseguirás que el código de tus páginas web sea más limpio y claro a los ojos del robot de Google ('googlebot' es capaz de leer documentos XHTML). Facilitar la labor a este robot siempre es un punto a nuestro favor.
Por otra parte, aumentarás la densidad de las palabras clave dentro de los contenidos (ver 'dónde situar las keywords'), ya que muchas de las etiquetas te ocuparán muchísimo menos espacio. Esto también supone un menor peso para tus páginas web, lo cual Google agradecerá. Y podrás a su vez cambiar rápidamente los estilos de ciertas palabras, modificando la importancia que les quieres otorgar.
Además, cumplir con el estándar XHTML te abrirá la puerta a diseñar páginas web para dispositivos móviles o nuevas tecnologías que vayan surgiendo. Y el uso de CSS te permitirá cambiar el aspecto de estas páginas en cuestión de minutos. En combinación con las páginas dinámicas, puedes conseguir un sitio web realmente eficiente.
Caracteristicas principales
Los documentos XHTML, al ser un documento XML, para estar conformes, deben ajustarse a los siguientes puntos:
- Deben poder validarse con alguna de las tres DTDs siguientes:
- 1 XHTML-1.0-Strict
- 2 XHTML-1.0-Transitional
- 3 XHTML-1.0-Frameset
- El elemento raíz del documento debe ser html.
- El elemento raíz del documento debe indicar el espacio nominal XHTML usando el atributo xmlns (XMLNAMES). El espacio nominal para XHTML es http://www.w3.org/1999/xhtml
- Debe haber una declaración DOCTYPE en el documento antes del elemento raíz.
Este es el encabezado que deberían llevar todos los documentos XHTML 1.0 estrictos 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 incluidos en el lenguaje XHTML 1.0. Si utilizáramos etiquetas antiguas y declaráramos el documento cómo estricto, no podríamos validar nuestra página XHTML.
Los comentarios comienzan con . 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.
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 especifica 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 consultar los códigos de otros idiomas.
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 y /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.
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. Cerrando el cuerpo /body y el documento XHTML /html conseguimos nuestra primer página.
A continuación, mostraremos algunos ejemplos de utilización de etiquetas y estructuras que podemos utilizar en nuestros desarrollos webs empleando XHTML, son similares a las empleadas en nuestros códigos HTML, pero debemos aplicar las reglas antes descritas, para que los documentos XML finales, estén bien formados:
Encabezados títulos
Los encabezados o títulos se pueden obtener mediante 6 etiquetas diferentes: h1, h2, h3, h4, h5 y h6 que tienen una jerarquía de importancia en la manera en que se representan por los navegadores. Esto significa que h1 será la etiqueta de más relevancia y de mayor tamaño, el cual irá descendiendo hasta la etiqueta h6 que será la más pequeña.
Enlaces
Los enlaces son las estructuras que nos permiten navegar por la Web, es decir que vayamos saltando por diferentes páginas de un mismo sitio, o de sitios externos. La etiqueta utilizada para crear un vínculo es a (anchor).
La estructura de los enlaces permite incluir varios atributos, uno destacado es: title, que sirve para especificar una pequeña descripción del sitio que estamos enlazando. Los navegadores suelen desplegar un cartelito con el valor de este atributo cuando el usuario señala con el mouse el enlace. Esto es de gran ayuda a los usuarios, que decidirán si seguir el enlace o no.
Otros atributos interesantes son: class, name, style, target que permite identificar, personalizar y configurar el estilo y tipo del enlace.
Imágenes
Los enlaces son las estructuras que nos permiten navegar por la Web, es decir que vayamos saltando por diferentes páginas de un mismo sitio, o de sitios externos. La etiqueta utilizada para crear un vínculo es a (anchor).
La estructura de los enlaces permite incluir varios atributos, uno destacado es: title, que sirve para especificar una pequeña descripción del sitio que estamos enlazando. Los navegadores suelen desplegar un cartelito con el valor de este atributo cuando el usuario señala con el mouse el enlace. Esto es de gran ayuda a los usuarios, que decidirán si seguir el enlace o no.
Tablas
Las tablas son una interesante herramienta para la representación de la información de forma tabular, mediante filas y columnas.
El elemento table da comienzo a la tabla. Dentro tenemos a caption que encierra el título que llevará la tabla. A partir de aquí definimos dos partes principales: thead dónde se ubica el encabezado, y tbody que encierra a las celdas del cuerpo.
tr es el encargado de contener filas, el encabezado tiene una sola fila, cuyas celdas de encabezado se contienen mediante tres etiquetas del elemento th. Las celdas se definen mediante el uso del elemento td.
Cabe destacar el atributo summary dentro del elemento table, este nos permite agregar algo de semántica o detalle, al ponerle como valor un resumen del contenido de la tabla para que pueda ser reconocido por robots (ej. buscadores, sistemas de accesibilidad, etc.) u otros agentes de usuario.
Formularios
Los formularios nos dan la posibilidad de recibir información por parte del usuario de manera dinámica. Hay dos métodos de envío de información mediante formularios que trataremos aquí: post y get.
Método get
El método get envía información al servidor como parte de la URL. El servidor analizará la URL pedida por el agente de usuario y separará la información relevante para su posterior procesamiento.
Ejemplo: http://www.carixma.com/busqueda.asp?palabra=xhtml, siendo el signo ? es el delimitador que nos permite separar la consulta de la URL.
Método post
Este método envía la información como parte de la petición del agente de usuario al servidor web (esta petición también incluye la URL, sin embargo nuestra información no formará parte de ella) y no se le muestra directamente al usuario.
El elemento principal y obligatorio de todo formulario es form y quizá sus dos atributos más importantes son method y action. El primero especifica el método de envio (get o bien post), y en el segundo pondremos la URL del recurso que contendrá la secuencia de comandos encargada de hacer algo con esa información.
Sin embargo un formulario sin otros elementos no nos sirve de mucho. Hagamos entonces un recorrido por los elementos más comunes:
- Elemento Input
- Elemento Select
- Elemento TextArea
Ahora indicaremos algunos ejemplos y detalle de estos elementos, empezando por input, que al especificarle su atributo type nos permite construir diferentes tipos de controles.
- Campos de Texto (text)
- Campos Ocultos (hidden)
- Campos Contraseña (password)
- Campos Radio Button (radio)
- Campos Checkbox (checkbox)
- Campos Button (button)
- Campos Submit (submit)
- Campos Reset (reset)
Diferencias con HTML
Las diferencias no son excesivas:
- No es necesario utilizar un único DTD.
- Se pueden crear versiones reducidas o extendidas del lenguaje.
- Obliga a seguir reglas más estrictas al construir un documento.
Todas las etiquetas y atributos deben ir en minúsculas:
Todos los valores de los atributos deben ir entre comillas:
Todas las etiquetas no vacías deben tener etiqueta de cierre:
Todas las etiquetas vacías deben indicarse a la XML:
Manual
Dentro del siguiente manual se encuaentra a detalle como trabajar con XHTML, espero les sea de utilidad, dentro del documento hay ejercicios que se pueden realizar para comprender mas como trabajar con este lenguaje