XHTML
IntroducciónEs un lenguaje etiquetado de definición dedocumentos o páginas web.xhtml permite describir la estructura y con...
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...
DOCTYPELa declaracion !DOCTYPE es obligatoria.Está antes de la etiqueta <html>No es una etiqueta de html, es una instrucci...
Versiones: XHTML 1.0 StrictSeparando completamente el contenido y la presentación.No permite la utilización de etiquetas y...
Versiones: XHTML 1.0 TransitionalIncluye todas las características de XHTML 1.0 Strict, peroañade características orientad...
Versiones: XHTML 1.0 FramesetPara páginas con marcos.Un marco es una web dentro de otra web.Los marcos están obsoletos, as...
Versiones: XHTML 1.1Es identica a la version XHTML 1.0 Strict pero permiteincorporar módulos (nuevas etiquetas) diferentes...
Página básica XHTMLLa etiquetas html,head,body son obligatoriasLa linea xmlns=http://www.w3.org/1999/xhtm es opcional<!DOC...
XHTML vs HTML
HTML vs XHTML : anidamientoLas etiquetas se tienen que cerrar de acuerdo a como seabren:XHTML:<p>Este es un párrafo con <a...
HTML vs XHTML : anidamientoLas etiquetas tienen que estar correctamente anidadas:HTML<b><i>Texto en negrita y cursiva</b><...
HTML vs XHTML : anidamientoHTML                     XHTML:                         <ul><ul>                      <li>Café<...
HTML vs XHTML :minúsculasLos nombres de etiquetas y de atributos deben estar enminúsculasXHTML:<p>Este es un párrafo con <...
HTML vs XHTML : minúsculasHTML:<BODY><P>Esto es un parrafo</P></BODY>XHTML:<body><p>Esto es un parrafo</p></body>
HTML vs XHTML : comillasEl valor de los atributos siempre se encierra con comillasXHTML:<p>Este es un parrafo con <ahref="...
HTML vs XHTML : comillasHTML                       XHTML<table width=100%          <table width="100%"border=1> <tr>      ...
HTML vs XHTML : atributos sincomprimirHTML                XHTML<input checked>     <input checked="checked" /><input reado...
HTML vs XHTML : atributos sincomprimirXHTML:<select> <option>Volvo</option> <option>Saab</option> <option selected="select...
HTML vs XHTML: langSi se usa el atributo lang debe usarse también el atributoxml:langXHTML<div lang="it" xml:lang="it">Cia...
HTML vs XHTML: etiquetas cerradasTodas las etiquetas deben cerrarse:HTML:  <p>uno<p>dosXHML:  <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 ...
HTML vs XHTML: espacio en blanco enatributosSi en el interior de un atributo se incluyen varios espacios enblanco seguidos...
HTML vs XHTML: nameEn XHTML no se usa el atributo name para identificar loselementos.Se usa siempre el atributo id
HTML vs XHTML:CDATAEl código JavaScript y style debe encerrarse entre unasetiquetas especiales (<![CDATA[ y ]]>) para evit...
Validación de una páginaPara validar una página usaremos el validador queproporciona el w3chttp://validator.w3.org/Más rec...
Upcoming SlideShare
Loading in …5
×

Xhtml fundamentos

877 views
734 views

Published on

0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
877
On SlideShare
0
From Embeds
0
Number of Embeds
10
Actions
Shares
0
Downloads
5
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Xhtml fundamentos

  1. 1. XHTML
  2. 2. IntroducciónEs un lenguaje etiquetado de definición dedocumentos o páginas web.xhtml permite describir la estructura y contenido delos documentos.Los documentos XHTML contienen códigos especialesllamados tags, etiquetas, o elementos, que alberganlos contenidos del documento.
  3. 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. 4. DOCTYPELa declaracion !DOCTYPE es obligatoria.Está antes de la etiqueta <html>No es una etiqueta de html, es una instrucción al navegadorque le indica que tipo de documento es la web y que versióndel lenguaje se ha usado para crearla.Enlaza un DTD (Document Type Definition) que explica lasreglas del lenguaje de marcas.
  5. 5. Versiones: XHTML 1.0 StrictSeparando completamente el contenido y la presentación.No permite la utilización de etiquetas y atributos ya en desusoorientados a la presentación, como font, center y otros.Escribiendo páginas en XHTML 1.0 Strict se consiguen páginasbien estructuradas y fácilmente adaptables mediante CSS,pero tiene la desventaja de crear incompatibilidades conciertos navegadores.<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  6. 6. Versiones: XHTML 1.0 TransitionalIncluye todas las características de XHTML 1.0 Strict, peroañade características orientadas a la presentación ya endesusoPresentación :BASEFONT,CENTER,FONT,S,STRIKE,UOtros: APPLET,DIR ,ISINDEX ,MENU<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  7. 7. Versiones: XHTML 1.0 FramesetPara 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_rowshttp://www.w3schools.com/html/tryit.asp?filename=tryhtml_frame_cols!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0Frameset//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd"
  8. 8. Versiones: XHTML 1.1Es identica a la version XHTML 1.0 Strict pero permiteincorporar módulos (nuevas etiquetas) diferentes a las delHTML<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN""http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
  9. 9. Página básica XHTMLLa etiquetas html,head,body son obligatoriasLa 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>
  10. 10. XHTML vs HTML
  11. 11. HTML vs XHTML : anidamientoLas etiquetas se tienen que cerrar de acuerdo a como seabren: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. 12. HTML vs XHTML : anidamientoLas 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>
  13. 13. HTML vs XHTML : anidamientoHTML 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>
  14. 14. HTML vs XHTML :minúsculasLos nombres de etiquetas y de atributos deben estar enminúsculasXHTML:<p>Este es un párrafo con <ahref="http://www.google.com">a google</a></p>HTML:<P>Este es un párrafo con <Ahref="http://www.google.com">a google</a></P>
  15. 15. HTML vs XHTML : minúsculasHTML:<BODY><P>Esto es un parrafo</P></BODY>XHTML:<body><p>Esto es un parrafo</p></body>
  16. 16. HTML vs XHTML : comillasEl valor de los atributos siempre se encierra con comillasXHTML:<p>Este es un parrafo con <ahref="http://www.google.com">enlace a google</a></p>HTML:<p>Este es un parrafo con <ahref=http://www.google.com>enlace a google</a></p>
  17. 17. HTML vs XHTML : comillasHTML 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><td>fila 1, celda 2</td> <td>fila 1, celda 2</td></tr> </tr><tr> <tr><td>fila 2, celda 1</td> <td>fila 2, celda 1</td><td>fila 2, celda 2</td> <td>fila 2, celda 2</td></tr> </tr></table> </table>
  18. 18. HTML vs XHTML : atributos sincomprimirHTML 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. 19. HTML vs XHTML : atributos sincomprimirXHTML:<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. 20. HTML vs XHTML: langSi se usa el atributo lang debe usarse también el atributoxml:langXHTML<div lang="it" xml:lang="it">Ciao bella!</div>HTML<div lang=it>Ciao bella!</div>
  21. 21. HTML vs XHTML: etiquetas cerradasTodas las etiquetas deben cerrarse:HTML: <p>uno<p>dosXHML: <p>uno</p><p>dos</p>
  22. 22. 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" />
  23. 23. HTML vs XHTML: espacio en blanco enatributosSi en el interior de un atributo se incluyen varios espacios enblanco seguidos, se eliminan todos salvo un único espacio enblanco utilizado para separar las diferentes palabras.en XHTML esto: <div id=" barra menu ">es equivalente a: <div id="barra menu">
  24. 24. HTML vs XHTML: nameEn XHTML no se usa el atributo name para identificar loselementos.Se usa siempre el atributo id
  25. 25. HTML vs XHTML:CDATAEl código JavaScript y style debe encerrarse entre unasetiquetas especiales (<![CDATA[ y ]]>) para evitar que elnavegador interprete de forma errónea caracteres como & y<.XHTML:<script type="text/javascript">//<![CDATA[var i=10;if (i<5) {// some code}//]]></script>
  26. 26. Validación de una páginaPara validar una página usaremos el validador queproporciona el w3chttp://validator.w3.org/Más recomendaciones en :http://www.w3.org/TR/xhtml1/#guidelines

×