PDF de programación - XHTML + CSS de una maldita vez

LICENCIA

Licencia

i

Esta obra está bajo una licencia Reconocimiento-NoComercial-
CompartirIgual 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

hacer obras 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 trans-
forma esta obra, o se genera una obra derivada, sólo se puede
distribuir la obra generada bajo una licencia idéntica a ésta.

1http://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

i

2

1 Introducción

1.1. ¿Qué es el XHTML? . . . . . . . . . . . . . . . . . .
1.2. ¿Y eso de CSS? . . . . . . . . . . . . . . . . . . . . .
1.3. ¿Cómo funciona 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. . .

7
8
8
8
9
9
. . . . . . . . . . . . . . . . . . . 10

I XHTML

11

2 Estructura XHTML

13
2.1. La codificación . . . . . . . . . . . . . . . . . . . . . 13
2.2. El DOCTYPE . . . . . . . . . . . . . . . . . . . . . 14
2.3. El elemento raíz (HTML)
. . . . . . . . . . . . . . . 15
2.4. La cabecera (HEAD) . . . . . . . . . . . . . . . . . . 15
2.5. El cuerpo (BODY) . . . . . . . . . . . . . . . . . . . 16
2.6. La plantilla . . . . . . . . . . . . . . . . . . . . . . . 16

3 Etiquetas básicas

17
3.1. Párrafos . . . . . . . . . . . . . . . . . . . . . . . . . 17
. . . . . . . . . . . . . . . . . . . . . 18
3.2. Saltos de línea
3.3. Los títulos (headings)
. . . . . . . . . . . . . . . . . 18
3.4. Citas . . . . . . . . . . . . . . . . . . . . . . . . . . . 19
3.5. Separadores horizontales . . . . . . . . . . . . . . . . 20
3.6. Comentarios . . . . . . . . . . . . . . . . . . . . . . . 20

2

3

4 Enlaces

21
4.1. Enlace a una página externa . . . . . . . . . . . . . . 21
4.2. Enlace a una página local
. . . . . . . . . . . . . . . 22
4.3. Enlace a una dirección de e-mail
. . . . . . . . . . . 22
4.4. Anclas . . . . . . . . . . . . . . . . . . . . . . . . . . 23

5 Listas

25
. . . . . . . . . . . . . . . . . . . . 25
5.1. Listas ordenadas
5.2. Listas sin ordenar . . . . . . . . . . . . . . . . . . . . 26
5.3. Listas de definición . . . . . . . . . . . . . . . . . . . 26
5.4. Listas anidadas . . . . . . . . . . . . . . . . . . . . . 27

6 Imágenes

29
Insertar una imagen . . . . . . . . . . . . . . . . . . 29
6.1.
6.2.
Imágenes como links . . . . . . . . . . . . . . . . . . 30
6.3. Sobre el uso y abuso de imágenes . . . . . . . . . . . 31

7 Tablas

33
7.1. Una tabla básica . . . . . . . . . . . . . . . . . . . . 33
7.2. Atributos de table . . . . . . . . . . . . . . . . . . . 34
7.3. Expandir filas y columnas . . . . . . . . . . . . . . . 35
. . . . . . . . . . . 36
7.4. ¿Tablas para layouts? ¡Insensato!

8 Formularios

39
8.1. La etiqueta FORM . . . . . . . . . . . . . . . . . . . 39
8.2. Campos de texto . . . . . . . . . . . . . . . . . . . . 40
8.3. Campos de contraseña . . . . . . . . . . . . . . . . . 41
8.4. Etiquetar campos . . . . . . . . . . . . . . . . . . . . 41
8.5. Áreas de texto . . . . . . . . . . . . . . . . . . . . . 42
8.6. Casillas de verificación . . . . . . . . . . . . . . . . . 43
8.7. Botones de selección . . . . . . . . . . . . . . . . . . 44
8.8. Listas de selección . . . . . . . . . . . . . . . . . . . 45
8.9. Botones de enviar y reestablecer
. . . . . . . . . . . 46

II CSS

47

9 Introducción al CSS

49
9.1. ¿Dónde escribo el código CSS? . . . . . . . . . . . . 49
9.2. Vale, ¿pero cómo funciona? . . . . . . . . . . . . . . 50

4

ÍNDICE GENERAL

9.3. ¿Selectores? . . . . . . . . . . . . . . . . . . . . . . . 50
9.4. ¿Qué significa eso de “cascading”? . . . . . . . . . . . 51
9.5. ¿Puedo poner comentarios? . . . . . . . . . . . . . . 52
9.6. ¿Por qué #fff significa blanco? . . . . . . . . . . . . 52

10 Trasteando por primera vez

55
10.1. El color de primer plano . . . . . . . . . . . . . . . . 55
10.2. El fondo . . . . . . . . . . . . . . . . . . . . . . . . . 55
10.3. Fuente . . . . . . . . . . . . . . . . . . . . . . . . . . 57

11 El modelo de caja

61
11.1. ¿Cómo es el modelo de caja? . . . . . . . . . . . . . 61
11.2. Ancho y alto . . . . . . . . . . . . . . . . . . . . . . 62
11.3. Padding . . . . . . . . . . . . . . . . . . . . . . . . . 63
11.4. Bordes . . . . . . . . . . . . . . . . . . . . . . . . . . 63
11.5. Márgenes
. . . . . . . . . . . . . . . . . . . . . . . . 64
11.6. Capas . . . . . . . . . . . . . . . . . . . . . . . . . . 65
11.7. Floats . . . . . . . . . . . . . . . . . . . . . . . . . . 65

12 Algunos truquitos

67
12.1. Links que cambian . . . . . . . . . . . . . . . . . . . 67
12.2. Links con el subrayado de diferente color . . . . . . . 68
12.3. Campos de formulario chulos
. . . . . . . . . . . . . 69
12.4. Blockquotes 2.0 . . . . . . . . . . . . . . . . . . . . . 69
12.5. Cambiar texto por imagen . . . . . . . . . . . . . . . 70

13 Layout tableless a dos columnas

73
. . . . . . . . . . . . . . . . . . . . . 73
13.1. Características
13.2. Código XHTML . . . . . . . . . . . . . . . . . . . . 74
13.3. #container
. . . . . . . . . . . . . . . . . . . . . . . 75
13.4. #sidebar . . . . . . . . . . . . . . . . . . . . . . . . . 75
13.5. #main . . . . . . . . . . . . . . . . . . . . . . . . . . 76
. . . . . . . . . . . . . . . . . . . . . . . . . 76
13.6. #footer

14 Cabeceras

77
14.1. Código XHTML . . . . . . . . . . . . . . . . . . . . 77
14.2. #header . . . . . . . . . . . . . . . . . . . . . . . . . 78
14.3. El heading . . . . . . . . . . . . . . . . . . . . . . . . 78
14.4. El enlace . . . . . . . . . . . . . . . . . . . . . . . . . 78

5

15 Listas personalizadas

81
15.1. Código XHTML . . . . . . . . . . . . . . . . . . . . 81
15.2. La lista . . . . . . . . . . . . . . . . . . . . . . . . . 81
15.3. Los ítems
. . . . . . . . . . . . . . . . . . . . . . . . 82

16 Menús verticales

85
16.1. Código XHTML . . . . . . . . . . . . . . . . . . . . 86
16.2. La lista . . . . . . . . . . . . . . . . . . . . . . . . . 86
. . . . . . . . . . . . . . . . . . . . . . . . . 87
16.3. Enlaces

A Por qué en IE se ve “bien” y en Firefox se ve “mal” 89

B Migración rápida a XHTML

91
B.1. Minúsculas y comillas, por favor
. . . . . . . . . . . 91
B.2. Todas las etiquetas se cierran . . . . . . . . . . . . . 92
B.3. FONT y ciertos atributos desaparecen . . . . . . . . 92
B.4. B y amigos también se van . . . . . . . . . . . . . . 92
B.5. Hay que usar alt y title
. . . . . . . . . . . . . . . . 93
B.6. Cuidado al anidar etiquetas . . . . . . . . . . . . . . 93
B.7. No existen los frames . . . . . . . . . . . . . . . . . . 93
B.8. No se puede utilizar target . . . . . . . . . . . . . . . 94
B.9. Las tablas no se usan para maquetar . . . . . . . . . 94
B.10.Los ampersands dan por saco . . . . . . . . . . . . . 94

C A favor del Unicode

97

Capítulo 1

Introducción

¡Yo te convoco, dragón invoco!

Dragon Fall GTI
Pilaf, villano de Dragon Fall

Este manual cubre cómo crear páginas web usando las tecnolo-
gías estándares recomendadas por el World Wide Web Consor-
tium1. No son necesarios conocimientos previos, así que lo único
que necesitas es:

Un editor de texto plano. Si eres un desafortunado usuario
de Windows, te sirve el Bloc de Notas. Ten cuidado si usas
un procesador de textos, como el Word, ya que da formato y
no queremos eso. Si usas GNU/Linux, tienes un montón para
elegir: vim, emacs, Joe, Kate, etc.

Un navegador (o varios) que funcione bien y respete los
estándares. El Mozilla Firefox, por ejemplo. Es multipla-
taforma, libre, y lo puedes bajar desde la web del proyecto
Mozilla2.

Un navegador que funcione mal, tenga todo el mundo, y
pase de los estándares: Ya-Sabes-Cuál 3.

1Es el organismo que se encarga de regular los estándares de la Web. Algo

así como la RAE con el castellano. Su dirección es www.w3c.org

2http://www.mozilla.org
3Su nombre está escrito en la Lengua Negra, que no pronunciaré aquí.

7

8

CAPÍTULO 1. INTRODUCCIÓN

Además de eso, es muy recomendable que tengas a mano el
editor de texto y un navegador para ir probando los ejemplos que
vayan saliendo. Es la única forma de aprender.

1.1.

¿Qué es el XHTML?

XHTML significa eXtensible HyperText Markup Language y
es la versión modernizada del tradicional HTML4. Si ya conoces
HTML, al final del manual hay un apéndice para que sea más fácil
la migración a XHTML.

XHTML es un lenguaje semántico, lo que quiere decir que no
definimos el aspecto de las cosas, sino lo que significan. Por ejemplo,
si tenemos el título de nuestra página, en lugar de decir “Lo quiero
grande en letras rojas”, le indicamos al navegador que “Este es el
título principal de la página. Haz algo para que destaque”. Y ese
“algo” lo dejamos a decisión del navegador.

Obviamente, podemos controlar el aspecto que tienen nues-
tras páginas, pero eso es tarea de las hojas de estilo CSS, no del
XHTML.

1.2.

¿Y eso de CSS?

CSS son las siglas de Cascading Style Sheets y son un regalo
del cielo. Si el documento XHTML está bien estructurado, podemos
cambiar totalmente su apariencia sin tocar una sola línea de código
en el archivo .html. Esto nos permite separar el contenido del
aspecto, y es de gran importancia.

Si quieres ver un ejemplo de cómo con el mismo código XHTML
y distintos archivos CSS se pueden conseguir resultados totalmente
diferentes, a la vez que espectaculares, échale un vistazo al CSS Zen
Garden5 y al Proyecto Camaleón6.

1.3.

¿Cómo funciona el XHTML?

XHTML es un l