Post on 13-Jun-2015
XHTML
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>
HTML vs XHTML : anidamiento
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 vs XHTML : anidamiento
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