Tutorial xhtml

LICENCIA

i

Licencia
Esta obra está bajo una licencia Reconocimiento-NoComercialCompartirIgual 2.5 España de Creative Commons. Para ver una copia de esta licencia, visite la página de la licencia1 o envíe una carta a Creative Commons, 559 Nathan Abbott Way, Stanford, California 94305, USA. Resumen de la licencia: Eres libre de. . . copiar, distribuir y comunicar públicamente la obra hacerobras derivadas Bajo las siguientes condiciones Reconocimiento. Se deben reconocer los créditos de la obra de la manera especificada por el autor o el licenciador. No comercial. No se puede utilizar esta obra para fines comerciales. Compartir bajo la misma licencia. Si se altera o se transforma esta obra, o se genera una obra derivada, sólo se puede distribuir la obra generada bajo una licenciaidéntica a ésta.

1 http://creativecommons.org/licenses/by-nc-sa/2.5/es/

XHTML + CSS ¡de una maldita vez!

Belén Albeza (BenKo)

3 de diciembre de 2006

1

Índice general
Licencia . . . . . . . . . . . . . . . . . . . . . . . . . . . . Índice general 1 Introducción 1.1. ¿Qué es el XHTML? . . . . . . . . . . . . . . . 1.2. ¿Y eso de CSS? . . . . . . . . . . . . . . . . . . 1.3. ¿Cómofunciona el XHTML? . . . . . . . . . . 1.4. ¿Pero para hacer webs no se usa el FrontPage? 1.5. Mi amigo que es diseñador usa Dreamweaver . 1.6. Una preguntilla. . . . . . . . . . . . . . . . . . . i 2 7 . 8 . 8 . 8 . 9 . 9 . 10

. . . . . .

. . . . . .

I

XHTML
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .. . . . . . . . . . . . . . . . . . . . . . . . .

11
13 13 14 15 15 16 16 17 17 18 18 19 20 20

2 Estructura XHTML 2.1. La codificación . . . . . . 2.2. El DOCTYPE . . . . . . 2.3. El elemento raíz (HTML) 2.4. La cabecera (HEAD) . . . 2.5. El cuerpo (BODY) . . . . 2.6. La plantilla . . . . . . . . 3 Etiquetas básicas 3.1. Párrafos . . . . . . . . . 3.2. Saltos de línea . . . . . 3.3. Lostítulos (headings) . 3.4. Citas . . . . . . . . . . . 3.5. Separadores horizontales 3.6. Comentarios . . . . . . . 2

. . . . . .

. . . . . .

. . . . . .

. . . . . .

. . . . . .

. . . . . .

. . . . . .

. . . . . .

. . . . . .

. . . . . .

. . . . . .

. . . . . .

. . . . . .

. . . . . .

. . . . . .

. . . . . .

3 4 Enlaces 4.1. Enlace 4.2. Enlace 4.3.Enlace 4.4. Anclas 5 Listas 5.1. Listas 5.2. Listas 5.3. Listas 5.4. Listas 21 21 22 22 23 25 25 26 26 27

a a a .

una página externa . . . una página local . . . . una dirección de e-mail . . . . . . . . . . . . . .

. . . .

. . . .

. . . .

. . . .

. . . .

. . . .

. . . .

. . . .

. . . .

. . . .

. . . .

ordenadas . sin ordenar . de definición anidadas . .

.. . .

. . . .

. . . .

. . . .

. . . .

. . . .

. . . .

. . . .

. . . .

. . . .

. . . .

. . . .

. . . .

. . . .

. . . .

. . . .

. . . .

. . . .

. . . .

6 Imágenes 29 6.1. Insertar una imagen . . . . . . . . . . . . . . . . . . 29 6.2. Imágenes como links . . . . . . . . . . . . . . . . . . 30 6.3. Sobre el uso y abuso de imágenes . . . . . . .. . . . 31 7 Tablas 7.1. Una tabla básica . . . . . . . . . 7.2. Atributos de table . . . . . . . . 7.3. Expandir filas y columnas . . . . 7.4. ¿Tablas para layouts? ¡Insensato! 8 Formularios 8.1. La etiqueta FORM . . . . . . . . 8.2. Campos de texto . . . . . . . . . 8.3. Campos de contraseña . . . . . . 8.4. Etiquetar campos . . . . . . . . . 8.5. Áreas de texto . . . . . . . . . . 8.6. Casillasde verificación . . . . . . 8.7. Botones de selección . . . . . . . 8.8. Listas de selección . . . . . . . . 8.9. Botones de enviar y reestablecer 33 33 34 35 36 39 39 40 41 41 42 43 44 45 46

. . . .

. . . .

. . . .

. . . .

. . . .

. . . .

. . . .

. . . .

. . . .

. . . .

. . . .

. . . . . . . . .

. . . . . . . . .

. . . . . . . . .

. . . . . . . . ....