Issuu on Google+

Iniciacion al

XHTML

Romain CANO


El idioma XHTML (eXtensible HyperText Markup Language) es una mezcla entre el XML y el HTML. Este idioma permite la creación de páginas web. Es un lenguaje semántico, es decir que corresponde a la escritura, al significado y no al aspecto. Este lenguaje está basado en etiquetas. Estas etiquetas se encuentran rodeadas por corchetes angulares < >

I. Las etiquetas Base de la escritura en XHTML, y además dos otros idiomas como PHP, Javascript. 2 tipos de etiquetas: <etiqueta>Aquí lo que quiere escribir</etiqueta> una de apertura y una de cierre <etiqueta /> etiqueta sola. No olvidar poner un espacio en tre etiqueta y /

II. Estructura principal de una página web

Una página web contiene siempre una introducción y 3 etiquetas.

A. Introducción Una página web codificada en XHTML debe empezar siempre por este código: <!DOCTYPE html 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" xml:lang="fr" >

B. HTML, Head, Body Después, debemos ver en la pagina este código:


<head> <title>Bienvenidos todos, que disfruten!!!</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> </head> <body> </body> </html>

<head></head> : informaciones en cuanto la pagina. No aparecen en la red, pero ellas pueden por ejemplo ayudar al un motor de búsqueda ( Google, Bing, Yahoo) a mostrar la pagina en los resultados de búsqueda. Hay adentro la etiqueta <title></title> que corresponde al título de la pagina. <body></body> corazón de la pagina. Es en esta etiqueta que se escribe lo que veremos en la red. <html></html> debe obligatoriamente abrir y cerrar la pagina. Al final, tenemos este código: <!DOCTYPE html 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" xml:lang="fr" > <head> <title>Bienvenue sur mon site !</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> </head> <body> </body> </html>

III. Principales etiquetas


A. Etiquetas de títulos 6 etiquetas: <h1></h1>, <h2></h2>…. De lo más importante hasta el menos Ejemplo: <body> <h1>Bienvenido en la red</h1> <h2>Aquí pueden encontrar mis fotos de viaje</h2> </body>

B. Los párrafos Etiqueta <p></p> Sirve a estructurar el contenido.

C. Los separadores 2 dos etiquetas simples, solas: <br /> salto de línea <hr /> separador horizontal A conocer, pero con el CSS; podemos estructurar el estilo sin usar estas etiquetas.

IV. Los atributos Medio de precisar informaciones en las etiquetas. Toma la forma atributo=”valor”. Se ingresa siempre en la etiqueta de apertura. Ejemplo: <img nom=”yo.jpg” /> caso de una etiqueta sola <p id=”primero”></p> caso de una etiqueta normal

Lista de atributos principales: - id : única, no se puede tener dos id con mismo valor -class : una etiquetas pueden tener la misma class -style : permite ingresar informationes de estilo


-title : da un titulo a la etiqueta -src: para ingresar una foto -href: dar una dirección URL

V. Enlaces, Imágenes, Anclas A. Enlaces Los enlaces nos sirven a navigar en un sitio web o entre unos sitios web.

1/ enlace a una página externa Necesitamos etiqueta <a></a> con el atributo href=”dirección URL” Toma la forma siguiente: <a href=”http://www.otrositio.com” title=”descripción”>Por favor, cliquea aquí</a>

2/enlace a una página local Mismo proceso sin http:// Toma la forma siguiente: <a href=”otrapaginamia.html” title=”puedo crear dos páginas, estupendo”>Cliquea aquí</a> Según el emplazamiento de la página querida, el href se escribe de manera diferente: -en un subdirectorio: href=”otra/pagina2.html” -en un directorio por encima: href=”../pagina2.html”

B. Anclas Un ancla va a permitir de desplazarse rápidamente adentro de una misma página. Para poder crear el ancla, al principio debemos dar a una etiqueta el atributo id. Ejemplo: <h4 id=”fotos”>Fotos</h4> A partir de esto, podemos crear el ancla, así:


<a href=”#fotos” title=”mis fotos”>Mis fotos</a>

C. Imágenes Elementos indispensables en las páginas web. 3 formatos autorizados (Gif, JPEG, PNG). El JPEG es un de lo mas apropiado. Etiqueta sola <img /> Necesitamos los atributos siguientes al minimo: -src: por la dirección de la imagen -width: por la anchura -height: por la altura -alt: descripción de la imagen si no aparece Asi ingresar imagen toma la forma siguiente: <img src=”mifoto.jpeg” width=”200” height=”40” alt=”mi foto” />

VI. Las listas 3 diferentes tipos: listas ordenadas; listas sin ordenar; listas de definición;

A. Lista sin ordenar Lista de elementos sin orden. No hay de primero o de ultimo. Etiqueta <ul></ul> y <li></li> <ul> <li>Frutilla</li> <li>Papa</li> <li>Jugo</li> </ul>

B. Lista ordenada


Igual que la lista sin ordenar. El único cambio se encuentra en la primera etiqueta <ul></ul>. En lugar, escribimos <ol></ol>. Da un orden a la construcción (1, 2, 3, 4…)

C. Lista de definición 3 etiquetas:

- <dl></dl> (Definition List) -<dt></dt> (Definition Term) -<dd></dd> (Definition)

Ejemplo: <dl> <dt>Gato</dt> <dd>animal</dd> <dt>Rosa</dt> <dd>flor</dd> </dl>

VII. Las Tablas Elementos muy importantes en la estructuración de su página.

A. Tabla básica 3 etiquetas:

<table></table> introduce la tabla <tr></tr> introduce una línea <td></td> crea una celda

Ejemplo: <table> <tr> <td>Anita</td> <td>26 años</td>


<td>Mediateca</td> </tr> <tr> <td>Sonia</td> <td>no se dice</td> <td>Dirección</td> </tr> </table>

B. Más allá Celdas de encabezamiento: etiqueta <th></th> Ejemplo: <table> <tr> <th>Apellido</th> <th>Edad</th> ……</table> Titulo de la tabla: etiqueta <caption></caption> <table> <caption>Organización de la alianza</caption> <tr> <th> ….</table>

C. Tablas más elaboradas Dividir una tabla grande: la cabeza (<thead></thead>), el cuerpo (<tbody></tbody>), el pie de tabla (<tfoot></tfoot>). Para escribir esta tabla, debemos escribir en este orden: thead, tfoot, tbody


Fusionar: horizontal y vertical: trabajar sobre la etiqueta <td></td>. Para las columnas, atributo colspan: <td colspan=”2”>lo que quieres</td>. Para las filas, atributo rowspan.

VIII. Inline/Block A. Definición Es una manera de identificar una etiqueta. Así, podemos ordenar las etiquetas en 2 categorías (Inline/ Block). Block: ejemplo: <p></p>; <h1></h1>; <ul></ul>; <ol></ol> Inline: una etiqueta de este tipo hace parte obligatoriamente de un tipo block. Ejemplo: <img />; <a></a>; <em></em>

B. Etiquetas genéricas/ universales Son etiquetas que no tienen de sentido proprio. Son necesarias porque ayudan para crear el estilo CSS. Necesitan una clase o una identidad (class o id). <span></span> de tipo inline <div></div> de tipo block; muy utilizada.

IX. Los formularios Acabamos de llegar a los límites del lenguaje XHTML. Con los formularios, vamos a necesitar otro lenguaje, el PHP. Pero antes, tenemos que descubrir cómo se construyen los formularios. Estos últimos permiten de crear interacciones entre el usuario y las páginas web. (inicio del web 2.0)

A. Crear un formulario Etiqueta <form></form> El objetivo del formulario es de poder enviar el formulario en el websitio.


2 atributos a dar a la etiqueta: -method=”post”: método de envío -action=”pagina.php”: pagina que trata el envío Entonces, debemos ver esto: <form method=”post” action=”pagina.php”>el formulario</form>

B. Campos de texto 1/ campos de texto basico Etiqueta <input /> es su fututo atributo que va a determinar su naturaleza. <input type=”text name=”pseudo” />

2/ etiquetar campos Etiqueta <label></label> se encarga de asociar texto con su campo correspondiente. Conoce solamente el atributo for. Se refiere a la id adentro del <input />. Ejemplo: <form method=”post” action=”pagina.php”> <p> <label for=”pseudo”>Su pseudo:</label> <input type=”text” name=”pseudo” id=”pseudo” /> </p> </form>

3/ campo de contraseña Cambiar text en password por el atributo type de la etiqueta <input /> Ejemplo: <input type=”password” name=”pass” id=”pass” />

4/ Area de texto


Si queremos escribir varias lineas en el formulario, vamos a usar la etiqueta <textarea></textarea>. Ejemplo: <p> <label for=”comentario”>¿Un comentario?</label> <textarea name=”comentario” id=”comentario”>Bla Bla Bla Bla</textarea> </p> Añadir atributos rows (filas) y cols (columnas) en la etiqueta <textarea></textarea>

5/ campos de opción <input type=”checkbox” name=”…” id=”…” /> <input type=”radio” name=”…” id=”…” /> Otra opcion: lista desenrollanda con la etiqueta <select></select>. Ejemplo: <form method=”post” action=”pagina.php”> <p> <label for=”pais”>En que pais…</label><br /> <select name=”pais” id=”pais”> <option value=”francia”>Francia</option> <option value= “Espana”>Esapña</option> </select> </p> </form>

C. Enviar el formulario Última etapa del formulario. Etiqueta <input /> con el tipo submit.


Así: <input type=”submit” /> Mejor escribir: <input type=”submit” value=”enviar” /> ___________________________________________________________

Acabamos de ver el lenguaje XHTML. Para tratar los formularios, necesitamos otro lenguaje, el PHP. No hemos visto todas las etiquetas del XHTML, pero hemos estudiado los principales. Lo más importante es de haber entendido el proceso de construcción. En la red, pueden buscar, encontrar varias etiquetas para mejorar vuestras páginas web. Entender, buscar, intentar, equivocarse son las palabras claves de su aprendizaje.

Ahora, la próxima etapa es de definir, crear el estilo de sus páginas web. Para hacerlo, vamos a utilizar el lenguaje CSS (Cascading Style Sheets)


iniciacion al XHTML