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

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

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>

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 XHTML:
<ul>
<ul> <li>Café</li>
<li>Café</li> <li>Té
<li>Té <ul>
<ul> <li>Té Negro</li>
<li>Té Negro</li> <li>Té Verrde</li>
<li>Té Verrde</li> </ul>
</ul> </li>
<li>Leche</li> <li>Leche</li>
</ul> </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 XHTML

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

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

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

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

Xhtml fundamentos

Empfohlen

Empfohlen

Weitere ähnliche Inhalte

Was ist angesagt?

Was ist angesagt? (20)

Ähnlich wie Xhtml fundamentos

Ähnlich wie Xhtml fundamentos (20)

Xhtml fundamentos