2. 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.
3. Qué es XHTML
XHTML es casi identico a HTML 4.01
XHTML es un version más clara y limpia de HTML
XHTML es HTML definido bajo XML
XHTML es una recomendación del W3C
XHTML es compatible con todos los navegadores
4. 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.
5. 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">
6. 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,U
Otros: APPLET,DIR ,ISINDEX ,MENU
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xh
tml1-transitional.dtd">
7. 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"
8. 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">
9. 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>
11. 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>
12. 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>
14. 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>
15. HTML vs XHTML : minúsculas
HTML:
<BODY>
<P>Esto es un parrafo</P>
</BODY>
XHTML:
<body>
<p>Esto es un parrafo</p>
</body>
16. 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>
18. HTML vs XHTML : atributos sin
comprimir
HTML XHTML
<input checked> <input checked="checked" />
<input readonly> <input readonly="readonly" />
<input disabled> <input disabled="disabled" />
<option selected> <option selected="selected" />
<frame noresize> <frame noresize="noresize" />
19. 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>
20. 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>
21. HTML vs XHTML: etiquetas cerradas
Todas las etiquetas deben cerrarse:
HTML:
<p>uno<p>dos
XHML:
<p>uno</p><p>dos</p>
22. HTML vs XHTML: etiquetas cerradas
Las 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" />
23. 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">
24. HTML vs XHTML: name
En XHTML no se usa el atributo name para identificar los
elementos.
Se usa siempre el atributo id
25. 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>
26. 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