xhtml fundamentos

Introducción

Es un lenguaje etiquetado de definición de documentos o páginas web.

xhtml permite describir la estructura y contenido de los documentos.

Los documentos XHTML contienen códigos especiales llamados tags, etiquetas, o elementos, que albergan los contenidos del documento.

Qué es XHTML

XHTML es casi identico a HTML 4.01XHTML es un version más clara y limpia de HTMLXHTML es HTML definido bajo XMLXHTML es una recomendación del W3CXHTML es compatible con todos los navegadores

DOCTYPE

La declaracion !DOCTYPE es obligatoria.

Está antes de la etiqueta <html>

No es una etiqueta de html, es una instrucción al navegador que le indica que tipo de documento es la web y que versión del lenguaje se ha usado para crearla.

Enlaza un DTD (Document Type Definition) que explica las reglas del lenguaje de marcas.

Versiones: XHTML 1.0 Strict

Separando completamente el contenido y la presentación.

No permite la utilización de etiquetas y atributos ya en desuso orientados a la presentación, como font, center y otros.

Escribiendo páginas en XHTML 1.0 Strict se consiguen páginas bien estructuradas y fácilmente adaptables mediante CSS, pero tiene la desventaja de crear incompatibilidades con ciertos navegadores.

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

Versiones: XHTML 1.0 Transitional

Incluye todas las características de XHTML 1.0 Strict, pero añade características orientadas a la presentación ya en desuso

Presentación :BASEFONT,CENTER,FONT,S,STRIKE,UOtros: APPLET,DIR ,ISINDEX ,MENU

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

Versiones: XHTML 1.0 Frameset

Para páginas con marcos.Un marco es una web dentro de otra web.

Los marcos están obsoletos, así que esto se usa poco.

http://www.w3schools.com/html/tryit.asp?filename=tryhtml_frame_rows

http://www.w3schools.com/html/tryit.asp?filename=tryhtml_frame_cols

!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd"

Versiones: XHTML 1.1

Es identica a la version XHTML 1.0 Strict pero permite incorporar módulos (nuevas etiquetas) diferentes a las del HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

Página básica XHTML

La etiquetas html,head,body son obligatorias La linea xmlns=http://www.w3.org/1999/xhtm es opcional

<!DOCTYPE Doctype va aqui><html xmlns="http://www.w3.org/1999/xhtml"><head>

<title>Title goes here</title></head><body></body></html>

XHTML vs HTML

HTML vs XHTML : anidamiento

Las etiquetas se tienen que cerrar de acuerdo a como se abren:

XHTML: <p>Este es un párrafo con <a>un enlace</a></p>

HTML: <p>Este es un párrafo con <a>un enlace</p></a>


Las etiquetas tienen que estar correctamente anidadas:

HTML<b><i>Texto en negrita y cursiva</b></i>

XHTML <b><i>Texto en negrita y cursiva</i></b>


HTML

<ul><li>Café</li><li>Té<ul><li>Té Negro</li><li>Té Verrde</li>

</ul><li>Leche</li>

</ul>

XHTML:<ul><li>Café</li><li>Té<ul><li>Té Negro</li><li>Té Verrde</li>

</ul></li><li>Leche</li>

</ul>

HTML vs XHTML :minúsculas

Los nombres de etiquetas y de atributos deben estar en minúsculas

XHTML:<p>Este es un párrafo con <a href="http://www.google.com">a google</a></p>

HTML: <P>Este es un párrafo con <A href="http://www.google.com">a google</a></P>

HTML vs XHTML : minúsculas

HTML: <BODY><P>Esto es un parrafo</P></BODY>

XHTML: <body><p>Esto es un parrafo</p></body>

HTML vs XHTML : comillas

El valor de los atributos siempre se encierra con comillas

XHTML:<p>Este es un parrafo con <a href="http://www.google.com">enlace a google</a></p>

HTML:<p>Este es un parrafo con <a href=http://www.google.com>enlace a google</a></p>

HTML vs XHTML : comillas

HTML

<table width=100% border=1> <tr><td>fila 1, celda 1</td><td>fila 1, celda 2</td></tr><tr><td>fila 2, celda 1</td><td>fila 2, celda 2</td></tr></table>

XHTML

<table width="100%" border="1"> <tr><td>fila 1, celda 1</td><td>fila 1, celda 2</td></tr><tr><td>fila 2, celda 1</td><td>fila 2, celda 2</td></tr></table>

HTML vs XHTML : atributos sin comprimir

HTML

<input checked><input readonly><input disabled><option selected><frame noresize>

XHTML

<input checked="checked" /><input readonly="readonly" /><input disabled="disabled" /><option selected="selected" /><frame noresize="noresize" />

HTML vs XHTML : atributos sin comprimir

XHTML:<select><option>Volvo</option><option>Saab</option><option selected="selected">Mercedes</option><option>Audi</option>

</select>

HTML:<select><option>Volvo</option><option>Saab</option><option selected>Mercedes</option><option>Audi</option>

</select>

HTML vs XHTML: lang

Si se usa el atributo lang debe usarse también el atributo xml:lang

XHTML<div lang="it" xml:lang="it">Ciao bella!</div>

HTML<div lang=it>Ciao bella!</div>

HTML vs XHTML: etiquetas cerradas

Todas las etiquetas deben cerrarse:

HTML:<p>uno<p>dos

XHML:<p>uno</p><p>dos</p>

HTML vs XHTML: etiquetas cerradasLas etiquetas vacías tambien tienen que cerrarse.Espacio /

HTML:<hr>Hola<br>Mundo<hr> <img src="http://bit.ly/l5teSQ" alt="mundo">

XHML:<hr />Hola<br />Mundo<hr /> <img src="http://bit.ly/l5teSQ" alt="mundo" />

HTML vs XHTML: espacio en blanco en atributos

Si en el interior de un atributo se incluyen varios espacios en blanco seguidos, se eliminan todos salvo un único espacio en blanco utilizado para separar las diferentes palabras.

en XHTML esto:<div id=" barra menu ">

es equivalente a:<div id="barra menu">

HTML vs XHTML: name

En XHTML no se usa el atributo name para identificar los elementos.

Se usa siempre el atributo id

HTML vs XHTML:CDATA

El código JavaScript y style debe encerrarse entre unas etiquetas especiales (<![CDATA[ y ]]>) para evitar que el navegador interprete de forma errónea caracteres como & y <.

XHTML: <script type="text/javascript">//<![CDATA[var i=10;if (i<5) {// some code}//]]></script>

Validación de una página

Para validar una página usaremos el validador que proporciona el w3c

http://validator.w3.org/

Más recomendaciones en :

http://www.w3.org/TR/xhtml1/#guidelines

http://validator.w3.org/

http://www.w3.org/TR/xhtml1/#guidelines

xhtml fundamentos

Documents