xHTML 1.0 Basics

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.


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

http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd



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">

http://www.w3.org/TR/html4/loose.dtd




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">


http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd




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">

http://www.w3.org/1999/xhtml

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">

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.


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" />


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.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:

xHTML 1.0No usar guiones dentro de los comentarios

Bien:

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.

xHTML 1.0Validar

W3C HTML Validator

http://validator.w3.org/

http://validator.w3.org/

Bibliografía

CSS: The Definitive Guide

Amazon: http://tinyurl.com/5hs7jf

Eric Meyer

http://tinyurl.com/5hs7jf

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

xHTML 1.0 Basics

Education

Transcript of xHTML 1.0 Basics