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