Post on 18-Nov-2014
description
xHTMLTrabajando en orden
Harold Maduro
xHTML 1.0• Abrir documento con DOCTYPE correcto
• Namespace
• Declarar el Content Type
• Especificar el idioma (lang)
• Escribir todos los elementos en minúscula
• Encerrar los valores de los atributos en comillas
• Todos los elementos deben abrirse y cerrarse
• Hay que cerrar los tags vacíos también
• Todos los atributos necesitan un valor
• Encode todos los símbolos <, >, &
• No usar guiones dobles dentro de los comentarios
xHTML 1.0Abrir documento con DOCTYPE correcto
Los archivos xHTML comienzan con varios elementos que le dice a los browsers cómo interpretarlos y le dice a los validators cómo probar que están correctos.
El primer elemento de estos es el DOCTYPE (Document Type Declaration o DTD) el cual le dice a los validators que versión de HTML estamos usando.Los DOCTYPES le permiten a los diseñadores web crear diferentes tipos de documentos atados a diferentes sets de reglas. Las reglas de cómo se despliega el documento va a depender de la especificación de HTML creada por el W3C. La información proporcionada por el DOCTYPE le va a proporcionar a los browsers, la información de cómo fue construido el documento, por lo tanto, cómo deben desplegarlo. Los documentos HTML no van a validar al menos de que contengan un DOCTYPE.
xHTML 1.0Abrir documento con DOCTYPE correcto
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
xHTML 1.0Abrir documento con DOCTYPE correcto
HTML 4.01 Transitional - Ingles<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">xHTML 1.0 Transitional - Ingles<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
xHTML 1.0Abrir documento con DOCTYPE correcto
En el caso de xHTML 1.0, existen tres opciones de DTD y por lo tanto tres DOCTYPES posibles:Transitional:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">Strict:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">Frameset:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
xHTML 1.0Abrir documento con DOCTYPE correcto
El problema es que si usamos un DOCTYPE incorrecto, o no lo usamos; los browsers cambian a lo que se llama "Quirks" mode, lo que significa que el browser asume que escribimos nuestro HTML a la antigua y trata de corregir los errores más comunes del pasado (elementos sin tag de cerrar, etc). Esto hace imposible que despliegue la página correctamente usando los estándares web, quienes tienen reglas mucho más estrictas.
xHTML 1.0Namespace
El namespace en XML es una colección de tipos de elementos y nombres de atributos asociados a un DTD específico.
Las declaraciones DTD permiten identificar al namespace apuntando a su localización online.
Los otros dos atributos son el idioma del documento y la especificación que el XML también fue escrito en ese idioma (ingles).
xHTML 1.0Namespace
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
xHTML 1.0Namespace
En muchas ocasiones, he visto que omiten el idioma y simplemente apuntan al namespace.<html
xmlns="http://www.w3.org/1999/xhtml">
xHTML 1.0Declarar el Content Type o Charset
Para poder ser interpretados correctamente por los browsers y para que los documentos puedan ser validados, deben llevar el tipo de character encoding que se ha usado en el mismo.El character set default de los documentos en HTML (HTML 4.01 y xHTML; incluso, XML) es Unicode. Unicode fue desarrollado por el Unicode Consortium y es un set de caracteres que provee un número único para cada caracter, "no matter what the platform, no matter what the program, no matter what the language". Ahora, este set de caracteres no contiene todos los caracteres que necesitamos en idiomas como español, griego, etc.
xHTML 1.0Declarar el Content Type o Charset
También podemos usar el ISO 8859-1, conocido como Latin-1. Este es un set de caracteres que incluyen caracteres de Europa del Este, Turkía, Grecia, Hebreo, etc. <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
xHTML 1.0Declarar el Content Type o Charset
UTF-8
UTF-8 permite agregar caracteres latinos directo en el documento y que puedan ser interpretados correctamente por el browser. Por ejemplo tíldes y eñes.
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
xHTML 1.0Language
La especificación de xHTML nos dice que debemos especificar el idioma en que está el contenido de nuestro documento. Esto lo podemos hacer por medio de un META TAG (ingles de Estados Unidos):<meta http-equiv="Content-Language" content="en-us" />
xHTML 1.0Language
En el caso de español, sería:<meta http-equiv="Content-Language" content="es" />
xHTML 1.0Elementos en Minúscula
<p>Este es mi <strong>párrafo</strong>.</p>
xHTML 1.0Atributos dentro de comillas
<p align=”left”>¡Hola!</p>
xHTML 1.0Elementos deben abrirse y cerrarse
correctamente
<p>Este es mi <strong>párrafo</strong>.
Mi libro favorito es <em>Neuromancer</em>
por <big>William Gibson</big>.</p>
xHTML 1.0Cerrar Tags Vacíos
<img src=”foto.jpg” />
xHTML 1.0Cerrar Tags Vacíos
<meta name=”description” value=”Mi super site” />
xHTML 1.0Cerrar Tags Vacíos
<input type=”text” name=”nombre” />
xHTML 1.0Todos los atributos necesitan un valor
<select name=”pais” selected=”selected”>
Panamá .
</select> .
xHTML 1.0Encode special characters
Smith & Wesson
xHTML 1.0No usar guiones dentro de los comentarios
Mal:
<!-- ---- Contenido ----- -->
xHTML 1.0No usar guiones dentro de los comentarios
Bien:
<!-- Comienza el contenido -->
xHTML 1.0Tipos de elementos
• Block Elements
• Inline Elements
xHTML 1.0Block Element
• Como P, H1, DIV
• Genera nuevas líneas antes y después de su recuadro en el normal flow del documento
• Se acomodan verticalmente, uno debajo del anterior
• Un block element puede tener como hijos y descendientes a otros block elements y a inline elements
xHTML 1.0Inline element
• Como STRONG, EM, SPAN
• No generan nuevas líneas antes y después de su contenido
• Son descendientes de un block element
• Un inline element sólo puede tener como hijos y descendientes a otros inline elements
• No es posible que un inline element tenga como hijo o descendiente a un block element
xHTML 1.0Validar
La W3C ofrece un servicio online que revisa todo el documento HTML (dependiendo de la versión), y nos dice si está creado correctamente o tiene errores.
Esto es de gran ayuda, ya que podemos haber tenido errores, ya sea al momento de typear, errores en la forma de utilizar elementos HTML, elementos sin su tag de cierre, etc.
Validar el documento HTML siempre es una buena práctica, ya que nos asegura que nuestro trabajo está bien y podemos seguir adelante (ya sea implementando el template, creando el CSS, o creando el template de algún CMS con el código HTML que generamos).
Si el código está incorrecto desde el comienzo, y no lo descubrimos, puede traernos problemas sobre la marcha cuando otros elementos formen parte del sitio web (todo el contenido, el CSS, un CMS, programación backend, etc).
xHTML 1.0Validar
Muchos diseñadores toman la validación correcta de su sitio como un emblema o trofeo que despliegan en los pie de página de sus sitios o blogs. En el caso de sitios web comerciales, esto es innecesario y muchas veces confundiría al usuario final, quien no comprende qué significan las siglas xHTML, CSS, etc.
Bibliografía
CSS: The Definitive Guide
Amazon: http://tinyurl.com/5hs7jf
Eric Meyer
Bibliografía
xHTML 1.0 Specification
http://www.w3.org/TR/xhtml1/
World Wide Web Consortium
Bibliografía
CSS 2.1 Specification
http://www.w3.org/TR/CSS21/
World Wide Web Consortium