¿Qué es  XHTML ?
<ul><li>XHTML significa e X tensible  H yper T ext  M arkup  L anguage. </li></ul><ul><li>Es una versión mas estricta y li...
¿Para que sirve XHTML? <ul><li>XHTML surge como el lenguaje cuyo etiquetado permite una correcta interpretación sin import...
¿Cuáles son las reglas básicas? <ul><li>Todos los elementos deben estar  jerarquizados . </li></ul><ul><li>Todo documento ...
¿Cuál es la base de un XHTML?
¿Qué partes podemos distinguir?
Resumiendo <ul><li>Las páginas HTML se dividen en dos partes: la cabecera y el cuerpo.  </li></ul>
Resumiendo <ul><li>La  cabecera  incluye información sobre la propia página, como por ejemplo su título y su idioma. </li>...
¿Qué son las etiquetas? Introducción
Etiquetas <ul><li>Las etiquetas se componen de 4 partes. </li></ul><ul><li>Ej.: <h1 id=“destacado”>Mi título</h1> </li></ul>
Etiquetas <ul><li>También hay etiquetas que constan de una sola parte. </li></ul><ul><li>Ej.: <br /> <hr /> </li></ul>
Estructura de un XHTML Parte I
Índice EL DOCTYPE y codificación Elemento raíz (HTML) La cabecera (HEAD) El cuerpo (BODY)
La codificación y el DOCTYPE Parte II
Codificación <ul><li>La primera línea que debemos tener en nuestro documento XHTML es la que marca la codificación.  </li>...
Codificación y DOCTYPE <ul><ul><li><?xml version=&quot;1.0&quot;  </li></ul></ul><ul><ul><li>encoding=&quot;UTF-8&quot;?> ...
XHTML Strict DTD <ul><li><!DOCTYPE html PUBLIC &quot;-//W3C//DTD XHTML 1.0 Strict//EN&quot; &quot;http://www.w3.org/TR/xht...
Elemento raíz <ul><li>Excepto el DOCTYPE el resto de nuestro documento tiene que ir encerrado por la etiqueta <html>. </li...
Algunos códigos de idioma Código Idioma es Español es-CL Español  Chileno     en Inglés fr Francés de Alemán it Italiano j...
La cabecera <ul><li>La cabecera tiene información que no forma parte del contenido de la página. </li></ul><ul><li>Por aho...
El cuerpo <ul><li>Por último, nos encontramos con el cuerpo, encerrado entre <body> y </body>. </li></ul><ul><ul><li><body...
Plantilla ejemplo <ul><li><!DOCTYPE html PUBLIC &quot;-//W3C//DTD XHTML 1.0 Strict//EN&quot; &quot;http://www.w3.org/TR/xh...
Etiquetas básicas Parte III
Párrafos <ul><li>Los párrafos sirven para estructurar el contenido. </li></ul><ul><li>Se utiliza la etiqueta <p></p>. </li...
Títulos <ul><li>Nos sirven para jerarquizar la información. </li></ul><ul><li>La etiqueta que usamos es <hx> </hx>, siendo...
Saltos de línea <ul><li>A veces dentro de un párrafo necesitamos crear un salto de línea.  </li></ul><ul><li>Utilizamos la...
Comentarios <ul><li>Para ingresar comentarios se debe utilizar la etiqueta <!-- -->  </li></ul><ul><li>Ej.: <!– Esto es un...
Énfasis <ul><li>Para dar énfasis a un texto disponemos de 2 etiquetas <em> y <strong> </li></ul><ul><li>Ej.:  </li></ul><u...
Enlaces Parte IV
A una página externa <ul><li><a href=&quot;http://www.google.cl&quot; title=“el mejor buscador&quot;> Google </a> </li></ul>
A una página local <ul><li><a href=“perfil.html&quot; title=“info sobre mi&quot;> Mis datos personales </a> </li></ul>
A una dirección de correo <ul><li><a href=&quot;mailto:leia@alianza.net&quot; </li></ul><ul><li>title=&quot;E-mail de la p...
Listas Parte V
Listas ordenadas <ul><li>Las listas ordenadas muestran sus elementos numerados. Se crean con la etiqueta <ol>. </li></ul><...
Listas sin ordenar <ul><li>Las listas sin ordenar marcan cada elemento con una viñeta. Se crean con la etiqueta <ul>. </li...
Imágenes Parte VI
Formatos de Imágen <ul><li>Podemos usar tres formatos de imagen: GIF, JPEG y PNG.  </li></ul><ul><ul><li>JPEG es el más ad...
Diferencias entre formatos
Como insertar una imagen <ul><li><img src=“image.gif” width=“ancho” height=“alto” alt=“descripción” /> </li></ul>
Tablas Parte VII
Tablas <ul><li>Las tablas son para presentar información tabulada, como horarios. </li></ul><ul><li>Son un complicadas de ...
Etiquetas de una tabla <ul><li><table>: Crea la tabla </li></ul><ul><li><caption>: Pone título a la tabla </li></ul><ul><l...
Ejemplo <ul><li><table> </li></ul><ul><li><caption>Videojuegos</caption> </li></ul><ul><ul><li><tr> </li></ul></ul><ul><ul...
Formularios Parte VIII
Los formularios <ul><li>Los formularios nos permiten recoger información introducida por el usuario. </li></ul><ul><li>Est...
La etiqueta FORM <ul><li>Todo formulario está encerrado por <form> y </form>.  </li></ul><ul><li>Dentro de estas etiquetas...
Ejemplo etiqueta FORM <ul><li><form action=“mailto:leia@alianza.ne” method=“post” enctype=“text/plain”> </li></ul><ul><li>...
Etiqueta INPUT <ul><li><input type=&quot;text&quot; id=&quot;nombre&quot; name=&quot;nombre&quot; size=&quot;20&quot; /> <...
El type puede ser: <ul><li>text </li></ul><ul><li>password </li></ul><ul><li>checkbox </li></ul><ul><li>radio </li></ul><u...
Etiqueta TEXTAREA <ul><li><textarea name=&quot;comentario&quot; id=&quot;comentario&quot; cols=&quot;30&quot; rows=&quot;5...
Upcoming SlideShare
Loading in …5
×

Qué es xhtml

772 views

Published on

  • Be the first to comment

  • Be the first to like this

Qué es xhtml

  1. 1. ¿Qué es XHTML ?
  2. 2. <ul><li>XHTML significa e X tensible H yper T ext M arkup L anguage. </li></ul><ul><li>Es una versión mas estricta y limpia de HTML. </li></ul><ul><li>XHTML extiende HTML 4.0 combinando la sintaxis de HTML, diseñado para mostrar datos, con la de XML, diseñado para describir los datos. </li></ul>
  3. 3. ¿Para que sirve XHTML? <ul><li>XHTML surge como el lenguaje cuyo etiquetado permite una correcta interpretación sin importar el dispositivo desde el que se accede a ella. </li></ul><ul><li>XHTML puede incluir otros lenguajes como  MathML  ,  SMIL  o  SVG  , al contrario que HTML. </li></ul>
  4. 4. ¿Cuáles son las reglas básicas? <ul><li>Todos los elementos deben estar jerarquizados . </li></ul><ul><li>Todo documento debe estar bien formado . </li></ul><ul><li>Los nombres de las etiquetas y atributos deben ser en minúscula . </li></ul><ul><li>Todas las etiquetas debe cerrarse . </li></ul><ul><li>Los valores de atributos deben ir entre comillas </li></ul>
  5. 5. ¿Cuál es la base de un XHTML?
  6. 6. ¿Qué partes podemos distinguir?
  7. 7. Resumiendo <ul><li>Las páginas HTML se dividen en dos partes: la cabecera y el cuerpo. </li></ul>
  8. 8. Resumiendo <ul><li>La cabecera incluye información sobre la propia página, como por ejemplo su título y su idioma. </li></ul><ul><li>El cuerpo de la página incluye todos sus contenidos, como párrafos de texto e imágenes. </li></ul>
  9. 9. ¿Qué son las etiquetas? Introducción
  10. 10. Etiquetas <ul><li>Las etiquetas se componen de 4 partes. </li></ul><ul><li>Ej.: <h1 id=“destacado”>Mi título</h1> </li></ul>
  11. 11. Etiquetas <ul><li>También hay etiquetas que constan de una sola parte. </li></ul><ul><li>Ej.: <br /> <hr /> </li></ul>
  12. 12. Estructura de un XHTML Parte I
  13. 13. Índice EL DOCTYPE y codificación Elemento raíz (HTML) La cabecera (HEAD) El cuerpo (BODY)
  14. 14. La codificación y el DOCTYPE Parte II
  15. 15. Codificación <ul><li>La primera línea que debemos tener en nuestro documento XHTML es la que marca la codificación. </li></ul><ul><li>La codificación estándar es la Unicode (UTF-8) y soporta caracteres de todas las lenguas (occidentales, griegos, chinos, árabes, japoneses, coreanos...). </li></ul>
  16. 16. Codificación y DOCTYPE <ul><ul><li><?xml version=&quot;1.0&quot; </li></ul></ul><ul><ul><li>encoding=&quot;UTF-8&quot;?> </li></ul></ul><ul><li>A continuación tenemos que indicar el DOCTYPE. </li></ul><ul><li>Se encarga de decirle al navegador qué contiene el archivo que esta abriendo. </li></ul><ul><li>Usaremos la especificación XHTML 1.0 Strict. </li></ul>
  17. 17. XHTML Strict DTD <ul><li><!DOCTYPE html PUBLIC &quot;-//W3C//DTD XHTML 1.0 Strict//EN&quot; &quot;http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd&quot;> </li></ul><ul><li>Nota: DTD: Document Type Definition (Definición del tipo de documento) </li></ul>
  18. 18. Elemento raíz <ul><li>Excepto el DOCTYPE el resto de nuestro documento tiene que ir encerrado por la etiqueta <html>. </li></ul><ul><li>Pero en esa etiqueta tenemos que indicar una serie de cosas, como que nuestro documento es XHTML y la lengua que utilizamos. Si escribimos en español nos quedaría así. </li></ul><ul><li><html xmlns=&quot;http://www.w3.org/1999/xhtml&quot; </li></ul><ul><li>xml:lang=&quot;es&quot; lang=&quot;es&quot;> </li></ul>
  19. 19. Algunos códigos de idioma Código Idioma es Español es-CL Español Chileno     en Inglés fr Francés de Alemán it Italiano ja Japonés
  20. 20. La cabecera <ul><li>La cabecera tiene información que no forma parte del contenido de la página. </li></ul><ul><li>Por ahora nos quedaremos sólo con el título de la página. </li></ul><ul><ul><li><head> </li></ul></ul><ul><ul><li><title> Título de la web </title> </li></ul></ul><ul><ul><li></head> </li></ul></ul>
  21. 21. El cuerpo <ul><li>Por último, nos encontramos con el cuerpo, encerrado entre <body> y </body>. </li></ul><ul><ul><li><body> </li></ul></ul><ul><ul><ul><li>Aquí va el cuerpo de la web </li></ul></ul></ul><ul><ul><li></body> </li></ul></ul>
  22. 22. Plantilla ejemplo <ul><li><!DOCTYPE html PUBLIC &quot;-//W3C//DTD XHTML 1.0 Strict//EN&quot; &quot;http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd&quot;> </li></ul><ul><li><html xmlns=&quot;http://www.w3.org/1999/xhtml&quot;> </li></ul><ul><li><head> </li></ul><ul><ul><li><meta http-equiv=&quot;Content-Type&quot; content=&quot;text/html; charset=utf-8&quot; /> </li></ul></ul><ul><ul><li><title>Titulo del documento</title> </li></ul></ul><ul><li></head> </li></ul><ul><li><body> </li></ul><ul><ul><li><p>Cuerpo del html</p> </li></ul></ul><ul><li></body> </li></ul><ul><li></html> </li></ul>
  23. 23. Etiquetas básicas Parte III
  24. 24. Párrafos <ul><li>Los párrafos sirven para estructurar el contenido. </li></ul><ul><li>Se utiliza la etiqueta <p></p>. </li></ul><ul><li>Ej.: <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nec neque in felis vestibulum viverra. </p> </li></ul>
  25. 25. Títulos <ul><li>Nos sirven para jerarquizar la información. </li></ul><ul><li>La etiqueta que usamos es <hx> </hx>, siendo x ún nº del 1 al 6. </li></ul><ul><li>Ej.: </li></ul><ul><ul><li><h1>Mis grupos favoritos</h1> </li></ul></ul><ul><ul><li><h2>Rock</h2> </li></ul></ul><ul><ul><ul><li><p>Queen</p> </li></ul></ul></ul><ul><ul><ul><li><p>Poison</p> </li></ul></ul></ul>
  26. 26. Saltos de línea <ul><li>A veces dentro de un párrafo necesitamos crear un salto de línea. </li></ul><ul><li>Utilizamos la etiqueta <br /> </li></ul><ul><li>Ej: <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. <br /> </li></ul><ul><li>Sed nec neque in felis vestibulum viverra. </p> </li></ul>
  27. 27. Comentarios <ul><li>Para ingresar comentarios se debe utilizar la etiqueta <!-- --> </li></ul><ul><li>Ej.: <!– Esto es un comentario --> </li></ul>
  28. 28. Énfasis <ul><li>Para dar énfasis a un texto disponemos de 2 etiquetas <em> y <strong> </li></ul><ul><li>Ej.: </li></ul><ul><ul><li><p> </li></ul></ul><ul><ul><li><em>Far</em> is not the word because I'm never far <strong>enough</strong>. </li></ul></ul><ul><ul><li></p> </li></ul></ul>
  29. 29. Enlaces Parte IV
  30. 30. A una página externa <ul><li><a href=&quot;http://www.google.cl&quot; title=“el mejor buscador&quot;> Google </a> </li></ul>
  31. 31. A una página local <ul><li><a href=“perfil.html&quot; title=“info sobre mi&quot;> Mis datos personales </a> </li></ul>
  32. 32. A una dirección de correo <ul><li><a href=&quot;mailto:leia@alianza.net&quot; </li></ul><ul><li>title=&quot;E-mail de la princesa Leia&quot;>Leia</a> </li></ul>
  33. 33. Listas Parte V
  34. 34. Listas ordenadas <ul><li>Las listas ordenadas muestran sus elementos numerados. Se crean con la etiqueta <ol>. </li></ul><ul><ul><li><p>Lista de regalos:</p> </li></ul></ul><ul><ul><li><ol> </li></ul></ul><ul><ul><ul><li><li>Equipo de música</li> </li></ul></ul></ul><ul><ul><ul><li><li>Notebook</li> </li></ul></ul></ul><ul><ul><ul><li><li>Reproductor de mp3</li> </li></ul></ul></ul><ul><ul><li></ol> </li></ul></ul>
  35. 35. Listas sin ordenar <ul><li>Las listas sin ordenar marcan cada elemento con una viñeta. Se crean con la etiqueta <ul>. </li></ul><ul><ul><li><p>El helado perfecto:</p> </li></ul></ul><ul><ul><li><ul> </li></ul></ul><ul><ul><ul><li><li>Frutilla</li> </li></ul></ul></ul><ul><ul><ul><li><li>Frambuesa</li> </li></ul></ul></ul><ul><ul><ul><li><li>Cobertura de chocolate</li> </li></ul></ul></ul><ul><ul><ul><li><li>Crema</li> </li></ul></ul></ul><ul><ul><ul><li><li>Nueces y almendras picadas</li> </li></ul></ul></ul><ul><ul><li></ul> </li></ul></ul>
  36. 36. Imágenes Parte VI
  37. 37. Formatos de Imágen <ul><li>Podemos usar tres formatos de imagen: GIF, JPEG y PNG. </li></ul><ul><ul><li>JPEG es el más adecuado para imágenes con muchos colores, como fotografías, y que no tengan grandes áreas de colores planos. </li></ul></ul><ul><ul><li>GIF son de sólo 8 bits (256 colores), pero podemos usar un color transparente. </li></ul></ul><ul><ul><li>PNG es el estándar y podemos elegir varias profundidades de paleta (número de colores). También podemos usar un canal alpha para crear transparencias. </li></ul></ul>
  38. 38. Diferencias entre formatos
  39. 39. Como insertar una imagen <ul><li><img src=“image.gif” width=“ancho” height=“alto” alt=“descripción” /> </li></ul>
  40. 40. Tablas Parte VII
  41. 41. Tablas <ul><li>Las tablas son para presentar información tabulada, como horarios. </li></ul><ul><li>Son un complicadas de usar pero a veces necesarias. </li></ul><ul><li>NUNCA se deben utilizar para diagramar un sitio web. </li></ul>
  42. 42. Etiquetas de una tabla <ul><li><table>: Crea la tabla </li></ul><ul><li><caption>: Pone título a la tabla </li></ul><ul><li><tr>: Crea una fila </li></ul><ul><li><td>: Crea una celda </li></ul><ul><li><th>: Crea una celda de encabezamiento </li></ul>
  43. 43. Ejemplo <ul><li><table> </li></ul><ul><li><caption>Videojuegos</caption> </li></ul><ul><ul><li><tr> </li></ul></ul><ul><ul><ul><li><th>Título</th> </li></ul></ul></ul><ul><ul><ul><li><th>Género</th> </li></ul></ul></ul><ul><ul><li></tr> </li></ul></ul><ul><ul><li><tr> </li></ul></ul><ul><ul><ul><li><td>Sonic</td> </li></ul></ul></ul><ul><ul><ul><li><td>Plataformas</td> </li></ul></ul></ul><ul><ul><li></tr> </li></ul></ul><ul><li></table> </li></ul>
  44. 44. Formularios Parte VIII
  45. 45. Los formularios <ul><li>Los formularios nos permiten recoger información introducida por el usuario. </li></ul><ul><li>Esta información podemos enviarla por correo electrónico o procesarla con un script. </li></ul><ul><li>Si nuestro servidor dispone de tecnología como PHP o CGI (por ejemplo), podemos guardar la información en una base de datos o generar una página dinámicamente </li></ul>
  46. 46. La etiqueta FORM <ul><li>Todo formulario está encerrado por <form> y </form>. </li></ul><ul><li>Dentro de estas etiquetas, van los campos del formulario, y podemos usar párrafos y saltos de línea. </li></ul>
  47. 47. Ejemplo etiqueta FORM <ul><li><form action=“mailto:leia@alianza.ne” method=“post” enctype=“text/plain”> </li></ul><ul><li><form action=“enviar.php” method=“post” enctype=“text/plain”> </li></ul>
  48. 48. Etiqueta INPUT <ul><li><input type=&quot;text&quot; id=&quot;nombre&quot; name=&quot;nombre&quot; size=&quot;20&quot; /> </li></ul>
  49. 49. El type puede ser: <ul><li>text </li></ul><ul><li>password </li></ul><ul><li>checkbox </li></ul><ul><li>radio </li></ul><ul><li>submit </li></ul><ul><li>image </li></ul><ul><li>reset </li></ul><ul><li>button </li></ul><ul><li>hidden </li></ul><ul><li>file </li></ul>
  50. 50. Etiqueta TEXTAREA <ul><li><textarea name=&quot;comentario&quot; id=&quot;comentario&quot; cols=&quot;30&quot; rows=&quot;5&quot;> </li></ul><ul><li>Bla bla bla </li></ul><ul><li></textarea> </li></ul>

×