Xhtml  fundamentos
Upcoming SlideShare
Loading in...5
×
 

Xhtml fundamentos

on

  • 790 views

 

Statistics

Views

Total Views
790
Views on SlideShare
790
Embed Views
0

Actions

Likes
0
Downloads
3
Comments
0

0 Embeds 0

No embeds

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

Xhtml  fundamentos Xhtml fundamentos Presentation Transcript

  • XHTML
  • 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.
  • 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
  • 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.
  • 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">
  • 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">
  • 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"
  • 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">
  • 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>
  • 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>un enlace</a></p>HTML:<p>Este es un párrafo con <a>un enlace</p></a>
  • 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>
  • 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>
  • 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>
  • 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="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>
  • 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>
  • 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" />
  • 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>
  • 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>
  • 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 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 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">
  • 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 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>
  • 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