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

XHTML+CSS

de una maldita vez!

(versión alpha 3)

Belén Albeza (BenKo)

12 de diciembre de 2004

Índice general

I XHTML: La chicha

1. Introducción al XHTML

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... . . . . . . . . . . . . . . . . . . . . . . . . . . .

2. Estructura de un documento XHTML

2.1. El DOCTYPE y la codificación . . . . . . . . . . . . . . . . . . .

2.2. El elemento raíz (HTML)

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

2.3. La cabecera (HEAD) . . . . . . . . . . . . . . . . . . . . . . . . .

2.4. El cuerpo (BODY) . . . . . . . . . . . . . . . . . . . . . . . . . .

2.5. Nuestra plantilla . . . . . . . . . . . . . . . . . . . . . . . . . . .

3. Etiquetas básicas

3.1. Párrafos . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

3.2. Saltos de línea . . . . . . . . . . . . . . . . . . . . . . . . . . . .

3.3. Títulos (headings)

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

3.4. Los Blockquotes

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

3.5. Separadores horizontales . . . . . . . . . . . . . . . . . . . . . . .

3.6. Comentarios . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

4. Etiquetas de formato

1

5

6

6

7

7

8

8

8

9

9

10

10

11

11

12

12

12

13

13

14

14

15

4.1. Énfasis . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
4.2. Preformato . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

4.3. Citas . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

4.4. Acrónimos y abreviaturas . . . . . . . . . . . . . . . . . . . . . .

4.5. Acerca de b y sus secuaces . . . . . . . . . . . . . . . . . . . . . .

5. Enlaces

5.1. Enlace a una página externa . . . . . . . . . . . . . . . . . . . . .

5.2. Enlace a una página local

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

5.3. Enlace a una dirección de e-mail

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

5.4. Anclas . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

6. Listas

6.1. Listas ordenadas

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

6.2. Listas sin ordenar . . . . . . . . . . . . . . . . . . . . . . . . . . .

6.3. Listas de definición . . . . . . . . . . . . . . . . . . . . . . . . . .

6.4. Listas anidadas . . . . . . . . . . . . . . . . . . . . . . . . . . . .

7. Imágenes

7.1.

Insertar una imagen . . . . . . . . . . . . . . . . . . . . . . . . .

7.2.

Imágenes como links . . . . . . . . . . . . . . . . . . . . . . . . .

7.3. Sobre el uso y abuso de imágenes . . . . . . . . . . . . . . . . . .

8. Tablas

8.1. Una tabla básica . . . . . . . . . . . . . . . . . . . . . . . . . . .

8.2. Atributos de table . . . . . . . . . . . . . . . . . . . . . . . . . .

8.3. Expandir filas y columnas . . . . . . . . . . . . . . . . . . . . . .

8.4. ¿Tablas para layouts? ¡Insensato!

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

9. Formularios

9.1. La etiqueta FORM . . . . . . . . . . . . . . . . . . . . . . . . . .

9.2. Campos de texto . . . . . . . . . . . . . . . . . . . . . . . . . . .

9.3. Campos de contraseña . . . . . . . . . . . . . . . . . . . . . . . .

9.4. Etiquetar campos . . . . . . . . . . . . . . . . . . . . . . . . . . .

15

15

16

16

16

18

18

19

19

19

21

21

21

22

22

24

24

25

26

27

27

28

28

29

31

31

32

33

33

2

9.5. Áreas de texto . . . . . . . . . . . . . . . . . . . . . . . . . . . .
9.6. Casillas de verificación . . . . . . . . . . . . . . . . . . . . . . . .

9.7. Botones de selección . . . . . . . . . . . . . . . . . . . . . . . . .

9.8. Listas de selección . . . . . . . . . . . . . . . . . . . . . . . . . .

9.9. Botones de enviar y reestablecer

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

II CSS: La limoná

10.Introducción al CSS

10.1. ¿Dónde escribo la parte de CSS? . . . . . . . . . . . . . . . . . .

10.2. Vale, ¿pero cómo funciona? . . . . . . . . . . . . . . . . . . . . .

10.3. ¿Selectores? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

10.4. ¿Qué significa eso de Cascading? . . . . . . . . . . . . . . . . . .

10.5. ¿Puedo poner comentarios? . . . . . . . . . . . . . . . . . . . . .

10.6. ¿Por qué fff significa blanco?

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

11.Trasteando por primera vez

11.1. El color de primer plano . . . . . . . . . . . . . . . . . . . . . . .

11.2. El fondo . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

11.3. Fuente . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

11.4. Efectos en el texto . . . . . . . . . . . . . . . . . . . . . . . . . .

A. Migración rápida a XHTML

A.1. Minúsculas y comillas, por favor

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

A.2. Todas las etiquetas se cierran . . . . . . . . . . . . . . . . . . . .

A.3. FONT y ciertos atributos desaparecen . . . . . . . . . . . . . . .

A.4. B y compañía también se van . . . . . . . . . . . . . . . . . . . .

A.5. Hay que usar alt y title

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

A.6. Cuidado al anidar etiquetas . . . . . . . . . . . . . . . . . . . . .

A.7. No existen los frames . . . . . . . . . . . . . . . . . . . . . . . . .

A.8. No se puede utilizar target . . . . . . . . . . . . . . . . . . . . . .

A.9. Las tablas no se usan para maquetar . . . . . . . . . . . . . . . .

A.10.Los & dan por saco . . . . . . . . . . . . . . . . . . . . . . . . . .

3

33

34

35

36

36

38

39

39

40

40

41

41

41

43

43

43

44

45

47

47

48

48

48

48

49

49

49

50

50

B. Licencia

C. Sobre esta versión

51

52

4

Parte I

XHTML: La chicha

5

Capítulo 1

Introducción al XHTML

Este tutorial cubre cómo crear páginas web usando las tecnologías estándares
recomendadas por el World Wide Web Consortium1: XHTML y CSS. No son
necesarios conocimientos previos, así que lo único que necesitas es:

Un editor de texto plano: Si usas Windows, 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 Linux, pues tienes un montón para elegir: vim,
emacs, Joe, Kate, etc.

Un navegador que funcione bien y cumpla los estándares: el Mozilla
Firefox, por ejemplo. Es multiplataforma, libre, y lo puedes bajar desde
la web del proyecto Mozilla 2.

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

Es muy recomendable que tengas a mano el editor y un navegador para ir

probando los ejemplos que salen aquí. 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, pero compatible con XML. Si ya conoces
HTML, al final hay un apéndice para que sea más fácil la migración a 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 nuestro título de

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

http://www.w3c.org

2http://www.mozilla.org
3Su nombre está escrito en la Lengua Negra, que no pronunciaré aquí.
4Lenguaje utilizado para crear páginas web.

6

la 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”.

Obviamente, podemos controlar el aspecto que tienen nuestras páginas, pero

eso es tarea de las CSS.

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 sóla línea de código en el archivo .html. Esto nos
permite separar el contenido del aspecto, y es de gran importancia.

Si queréis ver un ejemplo de cómo con el mismo código XHTML y distinto
archivo CSS se pueden conseguir resultados muy diferentes, a la vez que espec-
taculares, echadle un vistazo a CSS Zen Garden: The Beauty in CSS Design 5.

1.3.

¿Cómo funciona el XHTML?

XHTML está basado en etiquetas. Una etiqueta tiene la siguiente forma:

<etiqueta> Algo aquí dentro </etiqueta>

Volviendo al ejemplo anterior de nuestro título: la etiqueta para poner el

título principal en la página es <h1>. Entonces nos quedaría:

<h1>What is the Matrix?</h1>

Como ves, <h1> marca el inicio de la etiqueta, mientras que </h1> se encarga

de cerrarla. Hay etiquetas que funcionan con una sola parte, y son así:

<etiqueta />

Observa el espacio en blanco que hay entre el nombre de la etiqueta y la
barra /. Es muy importante para que los navegadores antiguos no se vuelvan
locos.

Hay etiquetas que pueden modificarse mediante atributos. Ahora mismo
no hace falta entender qué hacen, ya los veremos más adelante. Sólo quédate
con cómo van escritos:

<etiqueta atributo="valor">

5http://www.csszengarden.com

7

Por último, comentar un par de reglas que siguen las etiquetas: siempre en

minúsculas y los atributos entre comillas6.

1.4.

¿Pero para hacer webs no se usa el Front-
Page?

Sí. También puedes freír huevos con aceite para el coche.

1.5. Mi amigo que es diseñador usa Dreamweaver

El Macromedia Dreamweaver es un editor WYSIWYG7 muy extendido. Y
muy bueno, por cierto. El problema es que nos permite hacer webs sin tocar
nada de código.

Sí, eso es un problema. Genera código basura y no tenemos control sobre lo
que hacemos. Así que antes de usar Dreamweaver o algo similar, tenemos que
aprender a hacer las webs nosotros solos.Que quede claro que es mi opinión y
no Ley Divina :P

1.6. Una preguntilla...

¿Has mirado primero en Google 8? Es muy listo y lo sabe (casi) todo. Si aun

así no te aclaras, mi e-ma