Cookbook: Semntica de HTML4 y HTML5. Buena estructura de un documento HTML, XML y XHTML.

Bravo Henry Donoso Ericka

C.I 19.408.631 C.I 18.564.806

San Cristbal, Marzo de 2013

Tabla de Contenido
1. 2. 3. 4. Resumen Introduccin Ingredientes: Definiciones y Terminologas Recetas Receta 1: Estructura correcta de un documento HTML4 y diferencia con HTML5 Paso 1:Escribir el DOCTYPE Paso 2: Escribir el elemento HTML Paso 3: Cabecera del documento Paso 4: Cuerpo del documento Paso 5: Ver ejemplo

Receta 2: Estructura correcta de un documento XHTML Paso 1:Declaracin XML Paso 2: Escribir el DOCTYPE Paso 3: Especificar el idioma del contenido Paso 4: Escribir el elemento HTML Paso 5: Cabecera del documento Paso 6: Cuerpo del documento Paso 7: Ver ejemplo 5. Diferencias entre HTML, XML Y XHTML 6. Enlaces de Inters

1. Resumen
El propsito de este cookbook es explicar el funcionamiento, las diferencias y la correcta estructura de los lenguajes HTML 4, HTML 5, XML y XHTML empleando para ello la recomendacin del W3C. En este cookbook se incluyen dos recetas en las que se muestran como es la estructura de un HTML 4 y un XHTML respectivamente haciendo uso correcto de su encabezado y cuerpo.

2. Introduccin
El objetivo fundamental de este cookbook es mostrar al lector que las pginas web en los lenguajes HTML, XML y XHTML no son ms que un texto y para programar en ellos se necesita un editor de texto sin formato. Tambin se pretende destacar la importancia que tiene para una pgina web la correcta estructura de los documentos escritos en los lenguajes mencionados. A continuacin se presentan dos recetas basadas en la especificacin del W3C mediante las cuales se provee al lector de las bases necesarias para desarrollar una estructura correcta para las pginas web.Al final de este cookbook se encontraran una serie documentos recomendadosa fin de complementar la informacin al lector.

3. Los Ingredientes: Definiciones y terminologa

SGML: Standard Generalized Markup, es un sistema para definir lenguajes para dar formato a documentos (markup languages). Los autores utilizan un cdigo de formato (en ingls markup) en sus documentos para representar informacin estructural, presentacional y semntica junto con el contenido. HTML: El HTML o Hypertext Markup Language, es el lenguaje utilizado para las pginas web o de Internet. El etiquetado se refiere a que los archivos HTML, adems de texto, contienen una serie de atribuciones o informacin adicional acerca del texto.

XML: Es un Lenguaje de Etiquetado Extensible muy simple, pero estricto que juega un papel fundamental en el intercambio de una gran variedad de datos, su funcin principal es describir datos y no mostrarlos como es el caso de HTML. XML es un formato que permite la lectura de datos a travs de diferentes aplicaciones; este lenguaje sirve para estructurar, almacenar e intercambiar informacin. XHTML: Es un hbrido entre el HTML 4.01 y el XML 1.0, usa las reglas del XML referentes a la construccin de las pginas y las etiquetas de estructuracin del HTML. DOCTYPE: Declaracin de tipo de documento o DTD, es un elemento HTML su objetivo es informar al navegador qu tipo de documento est a punto de procesar.Para algunas versiones se encontrarn variantes (Strict, Transitional y Frameset). Estas variantes corresponden a versiones similares, que presentan pequeas diferencias, especialmente en los atributos o elementos que aceptan. Elemento: Los elementos son la base de la estructura de un lenguaje HTML, XML o XHTML. Los elementos estn compuestos por dos etiquetas: etiqueta de apertura y etiqueta de cierre (a excepcin de los elementos vacos donde la etiqueta de cierre es omitida). Los elementos no son etiquetas, los elementos son representados por etiquetas en el cdigo, pero son muchas veces errneamente considerados la misma cosa. Estructura: Se refiere a las partes que componen un documento ya sea HTML, XML o XHTML. Se divide en dos partes: la cabecera y el cuerpo. La cabecera incluye informacin sobre la propia pgina, como por ejemplo su ttulo y su idioma. El cuerpo de la pgina incluye todos sus contenidos, como prrafos de texto e imgenes. Elemento HEAD: Contiene informacin sobre el documento actual, como el ttulo, palabras clave que pueden ser de utilidad para motores de bsqueda, y otros datos que no se consideran parte del contenido del documento.

Elemento TITLE: Se utiliza para indicar el ttulo del documento y que los navegadores visualizan en la parte superior izquierda de la ventana del navegador.

4. Recetas
Receta 1: Estructura correcta de un documento HTML4 y diferencia con HTML5 Un documento HTML 4 se compone de tres partes: una lnea que contiene informacin sobre la versin de HTML, una seccin de cabecera delimitada por el elemento HEAD y un cuerpo, que puede ser especificado mediante el elemento BODY o mediante el elemento FRAMESET. La cabecera y el cuerpo deberan estar delimitados por el elemento HTML. Paso1: Escribir el DOCTYPE.

HTML 4: La variante recomendada por el W3C, ya que es compatible con el CSS y puede ser interpretado correctamente por todos los navegadores es la Strict.
Validacin con la especificacin de HTML 4.01, tipo de documento es Strict

<! DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN""http://www.w3.org/TR/html4/strict.dtd">

URL del DTD que sirve para validar el cdigo HTML de la pgina.

HTML 5:

<!DOCTYPE html>

Paso2: Escribir el elemento HTML.

<! DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <HTML> ...Cabecera... ... cuerpo del documento... </HTML>

Paso 3: Cabecera del documento. Escribir el elemento HEAD.

<! DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <HTML> <HEAD> Ttulo </HEAD> ... cuerpo del documento... </HTML>

Escribir el elemento TITLE.

<! DOCTYPE HTML PUBLIC "-//W3C//DTD HTM4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <HTML> <HEAD> <TITLE>Este es el Ttulo</TITLE> </HEAD> ... cuerpo del documento... </HTML>

Paso 4: Cuerpo del documento, escribir el elemento BODY.

<! DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <HTML> <HEAD> <TITLE> Este es el Ttulo </TITLE> </HEAD> <BODY>
.. Elementos a nivel de bloque y elementos en lnea....

</BODY> </HTML>

Paso 5: Ver ejemplo. Para ver el ejemplo de esta receta Clic aqu

Receta 2: Estructura correcta de un documento XHTML.

Paso 1: Declaracin XHTML

<?xmlversion="1.0" encoding="charset"?>

Donde el atributo versin se refiere a la versin del XML, en este caso 1.0, y el atributo encoding=charset hace referencia al juego de caracteres que se desea utilizar en la pgina.
<?xmlversion="1.0" encoding="UTF-8"> <?xmlversion="1.0" encoding="ISO-8859-15"?>

 Paso 2: Escribir el DOCTYPE. Esta es una regla implementada por XHTML por lo que antes no se sola utilizar y se debe de tener en consideracin si queremos tener una estructura apegada al estndar.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

Paso 3: Especificar el idioma del contenido. Este paso no es estrictamente necesario para que la pgina funcione, es una consideracin para mejorar la accesibilidad del sitio, as de esta manera el usuario podr tener una mejor experiencia y no encontrarse con problemas de codificacin.
<htmlxmlns="http://www.w3.org/1999/xhtml" xml:lang="es" lang="es">

Paso 4: Escribir el elemento HTML.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <htmlxmlns="http://www.w3.org/1999/xhtml" xml:lang="es" lang="es"> <html> ...Cabecera... ... cuerpo del documento... </html>

Paso 5: Cabecera del documento.

Escribir el elemento HEAD.

1.0

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1strict.dtd"> <htmlxmlns="http://www.w3.org/1999/xhtml" xml:lang="es" lang="es"> <html> <head> Ttulo </head> ... cuerpo del documento... </html>

Escribir el elemento TITLE.

1.0

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1strict.dtd"> <htmlxmlns="http://www.w3.org/1999/xhtml" xml:lang="es" lang="es"> <html> <head> <title>Este es el Ttulo</title> </head> ... cuerpo del documento... </html>

 Paso 6: Cuerpo del documento, escribir el elemento BODY.

<?xml version="1.0" encoding="ISO-8859-1"> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <htmlxmlns="http://www.w3.org/1999/xhtml" xml:lang="es" lang="es"> <html> <head> <title>Ttulo</title> </head> <body> .. Elementos a nivel de bloque y elementos en lnea.... </body> </html>

Paso 7: Ver ejemplo

Para ver el ejemplo de esta receta Clic aqu

5. Diferencias entre HTML, XML Y XHTML

La diferencia principal es que el HTML no indica lo que se est representando, tiene datos mal definidos con elementos de formato, mientras que el XML contiene datos que se autodefinen: describe el contenido de lo que etiquetan. <?xml version="1.0" encoding="UTF-7" ?> <album> <autor>SABINA Y CIA Nos sobran los motivos</autor> <titulo>Joaqun Sabina</titulo> <formato>MP3</formato> <localizacion>Varios CD5 </localizacion> </album> El XML, no permite modificar las esttica de su informacin en modo alguno, solo sirve para transportar informacin.

El XHTML, es la evolucin del HTML. Para que una pgina XML se vea en un navegador, hay varias maneras, pero por si mismas no se ven bien, son solo esquemas con informacin, para que se vean como un conjunto ordenado y esttico, hay que usar lenguajes o tecnologas de maquetacin, bien sean CSS, XSL o XSLT.

6. Enlaces de Inters
[HTML4 - Receta 1 Estructura] http://www.w3.org/TR/1999/REC-html401-19991224/struct/global.html [HTML 4 Y HTML5 - DOCTYPE] http://www.w3schools.com/tags/tag_doctype.asp [HTML 4 Y HTML5 - Diferencias] http://www.anieto2k.com/2007/06/16/las-principales-diferencias-entre-html5y-html4/ http://www.w3.org/TR/2009/WD-html5-diff-20090212/ [XHTML - Receta 2 Estructura] http://www.w3.org/TR/xhtml1/ http://enjoywd.wordpress.com/xhtml-y-css/capitulo-1-la-estructura-de-undocumento-xhtml/ [Validacin de pgina Web] http://validator.w3.org/