HTML5 Y CSS3 DE UNA MALDITA VEZ!

HTML5 y CSS3 de una maldita vez!

Hola, te habla la autora :) Ests leyendo un manual que escrib hace ms de 6 aos. Aunque sigue siendo til, la tecnologa ha evolucionado y algunos contenidos estn obsoletos.

Ahora estoy trabajando en un libro sobre HTML5 y CSS3, con el mismo espritu que este, y algunas mejoras. Puedes conseguir ms informacin en:

www.html5deunamalditavez.com

ii

Licencia
Esta obra est bajo una licencia Reconocimiento-NoComercialCompartirIgual 2.5 Espaa de Creative Commons. Para ver una copia de esta licencia, visite la pgina de la licencia California 94305, USA.

1 o enve una

carta a Creative Commons, 559 Nathan Abbott Way, Stanford,

Resumen de la licencia:
Eres libre de. . . copiar, distribuir y comunicar pblicamente la obra hacer obras derivadas Bajo las siguientes condiciones

Reconocimiento. Se deben reconocer los crditos de la obra

de la manera especicada por el autor o el licenciador.

No comercial. No se puede utilizar esta obra para nes

comerciales.

Compartir bajo la misma licencia. Si se altera o se transforma esta obra, o se genera una obra derivada, slo se puede distribuir la obra generada bajo una licencia idntica a sta.

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

XHTML + CSS de una maldita vez!

Beln Albeza (BenKo)

3 de diciembre de 2006

ndice general

HTML5 y CSS3 de una maldita vez! . . . . . . . . . . . . Licencia . . . . . . . . . . . . . . . . . . . . . . . . . . . .

i i

ndice general 1 Introduccin

1.1. 1.2. 1.3. 1.4. 1.5. 1.6. Qu es el XHTML? . . . . . . . . . . . . . . . . . . Y eso de CSS? . . . . . . . . . . . . . . . . . . . . . Cmo funciona el XHTML? . . . . . . . . . . . . . . . . . . . . Pero para hacer webs no se usa el FrontPage? Mi amigo que es diseador usa Dreamweaver Una preguntilla. . .

2 3
4 4 4 5 5 6

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

I XHTML
2 Estructura XHTML
2.1. 2.2. 2.3. 2.4. 2.5. 2.6. La codicacin El DOCTYPE . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

7
9
9 10 11 11 12 12

El elemento raz (HTML)

La cabecera (HEAD) . . . . . . . . . . . . . . . . . . El cuerpo (BODY) . . . . . . . . . . . . . . . . . . . La plantilla . . . . . . . . . . . . . . . . . . . . . . .

Etiquetas bsicas
3.1. 3.2. 3.3. 3.4. 3.5. Prrafos . . . . . . . . . . . . . . . . . . . . . . . . . Saltos de lnea . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Los ttulos (headings)

13
13 14 14 15 16

Citas . . . . . . . . . . . . . . . . . . . . . . . . . . . Separadores horizontales . . . . . . . . . . . . . . . . 2

NDICE GENERAL

3.6.

Comentarios . . . . . . . . . . . . . . . . . . . . . . .

16

Enlaces
4.1. 4.2. 4.3. 4.4. Enlace a una pgina externa . . . . . . . . . . . . . . Enlace a una pgina local . . . . . . . . . . . . . . . . . . . . . . . . . . Enlace a una direccin de e-mail

17
17 18 18 19

Anclas . . . . . . . . . . . . . . . . . . . . . . . . . .

Listas
5.1. 5.2. 5.3. 5.4. Listas ordenadas . . . . . . . . . . . . . . . . . . . . Listas sin ordenar . . . . . . . . . . . . . . . . . . . . Listas de denicin . . . . . . . . . . . . . . . . . . . Listas anidadas . . . . . . . . . . . . . . . . . . . . .

21
21 22 22 23

Imgenes
6.1. 6.2. 6.3. Insertar una imagen . . . . . . . . . . . . . . . . . . Imgenes como links . . . . . . . . . . . . . . . . . . Sobre el uso y abuso de imgenes . . . . . . . . . . .

25
25 26 27

Tablas
7.1. 7.2. 7.3. 7.4. Una tabla bsica Atributos de table . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

29
29 30 31 32

Expandir las y columnas . . . . . . . . . . . . . . . Tablas para layouts? Insensato! . . . . . . . . . . .

Formularios
8.1. 8.2. 8.3. 8.4. 8.5. 8.6. 8.7. 8.8. 8.9. La etiqueta FORM . . . . . . . . . . . . . . . . . . . Campos de texto . . . . . . . . . . . . . . . . . . . . Campos de contrasea . . . . . . . . . . . . . . . . . Etiquetar campos . . . . . . . . . . . . . . . . . . . . reas de texto . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Casillas de vericacin . . . . . . . . . . . . . . . . . Botones de seleccin Listas de seleccin . . . . . . . . . . . . . . . . . . .

35
35 36 37 37 38 39 40 41 42

Botones de enviar y reestablecer

II CSS
9 Introduccin al CSS
9.1. Dnde escribo el cdigo CSS? . . . . . . . . . . . .

43
45
45

NDICE GENERAL

9.2. 9.3. 9.4. 9.5. 9.6.

Vale, pero cmo funciona?

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

46 46 47 48 48

Selectores? . . . . . . . . . . . . . . . . . . . . . . . Qu signica eso de cascading? . . . . . . . . . . . Puedo poner comentarios? . . . . . . . . . . . . . . . . . . . . . . . . . . Por qu #f signica blanco?

10 Trasteando por primera vez

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

51
51 51 53

11 El modelo de caja
11.1. Cmo es el modelo de caja? 11.2. Ancho y alto . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

57
57 58 59 59 60 61 61

11.3. Padding . . . . . . . . . . . . . . . . . . . . . . . . . 11.4. Bordes . . . . . . . . . . . . . . . . . . . . . . . . . . 11.5. Mrgenes 11.6. Capas 11.7. Floats . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

12 Algunos truquitos
12.1. Links que cambian . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 12.2. Links con el subrayado de diferente color . . . . . . . 12.3. Campos de formulario chulos 12.4. Blockquotes 2.0 . . . . . . . . . . . . . . . . . . . . . 12.5. Cambiar texto por imagen . . . . . . . . . . . . . . .

63
63 64 65 65 66

13 Layout tableless a dos columnas

13.1. Caractersticas 13.2. Cdigo XHTML 13.3. #container . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

69
69 70 71 71 72 72

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

13.4. #sidebar . . . . . . . . . . . . . . . . . . . . . . . . . 13.5. #main . . . . . . . . . . . . . . . . . . . . . . . . . . 13.6. #footer . . . . . . . . . . . . . . . . . . . . . . . . .

14 Cabeceras
14.1. Cdigo XHTML . . . . . . . . . . . . . . . . . . . . 14.2. #header . . . . . . . . . . . . . . . . . . . . . . . . . 14.3. El heading . . . . . . . . . . . . . . . . . . . . . . . . 14.4. El enlace . . . . . . . . . . . . . . . . . . . . . . . . .

73
73 74 74 74

NDICE GENERAL

15 Listas personalizadas
15.1. Cdigo XHTML 15.2. La lista 15.3. Los tems . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

77
77 77 78

16 Mens verticales
16.1. Cdigo XHTML 16.2. La lista 16.3. Enlaces . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

81
82 82 83

A Por qu en IE se ve bien y en Firefox se ve mal 85 B Migracin rpida a XHTML

B.1. Minsculas y comillas, por favor B.2. Todas las etiquetas se cierran B.4. B y amigos tambin se van B.5. Hay que usar alt y title . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

87
87 88 88 88 89 89 89 90 90 90

B.3. FONT y ciertos atributos desaparecen

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

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

B.6. Cuidado al anidar etiquetas . . . . . . . . . . . . . . B.7. No existen los frames . . . . . . . . . . . . . . . . . . B.8. No se puede utilizar target . . . . . . . . . . . . . . . B.9. Las tablas no se usan para maquetar . . . . . . . . . B.10.Los ampersands dan por saco . . . . . . . . . . . . .

C A favor del Unicode

93

Captulo 1
Introduccin

Yo te convoco, dragn invoco! Dragon Fall GTI

Pilaf, villano de Dragon Fall

Este manual cubre cmo crear pginas web usando las tecnologas estndares recomendadas por el World Wide Web Consor1 tium . 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 montn para elegir: vim, emacs, Joe, Kate, etc.

navegador (o varios) que funcione bien y respete los estndares. El Mozilla Firefox, por ejemplo. Es multiplaUn taforma, libre, y lo puedes bajar desde la web del proyecto Mozilla . Un

pase de los estndares: Ya-Sabes-Cul .

navegador que funcione mal, tenga todo el mundo, y 3

1 Es

el organismo que se encarga de regular los estndares de la Web. Algo

as como la RAE con el castellano. Su direccin es www.w3c.org

2 http://www.mozilla.org 3 Su nombre est escrito en

la Lengua Negra, que no pronunciar aqu.

CAPTULO 1.

INTRODUCCIN

Adems 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?

es la versin modernizada del tradicional HTML . Si ya conoces HTML, al nal del manual hay un apndice para que sea ms fcil la migracin a XHTML. XHTML es un lenguaje

XHTML signica eXtensible HyperText Markup Language y 4

semntico, lo que quiere decir que no

denimos el aspecto de las cosas, sino lo que signican. Por ejemplo, si tenemos el ttulo de nuestra pgina, en lugar de decir Lo quiero

grande en letras rojas , le indicamos al navegador que Este es el ttulo principal de la pgina. Haz algo para que destaque . Y ese
algo lo dejamos a decisin del navegador. Obviamente, podemos controlar el aspecto que tienen nuestras pginas, 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 lnea de cdigo en el archivo

.html.

Esto nos permite

separar el contenido del

aspecto, y es de gran importancia.

Si quieres ver un ejemplo de cmo con el mismo cdigo XHTML y distintos archivos CSS se pueden conseguir resultados totalmente diferentes, a la vez que espectaculares, chale un vistazo al CSS Zen

Garden

5 y al Proyecto Camalen 6 .

1.3.

Cmo funciona el XHTML?

etiquetas (tags ). Una eti-

XHTML es un lenguaje basado en queta tiene la siguiente forma:

4 Lenguaje utilizado para crear pginas 5 http://www.csszengarden.com 6 http://www.camaleoncss.com

web.

1.4. PERO PARA HACER WEBS NO SE USA EL FRONTPAGE? 9

< etiqueta > Algo aqu dentro </ etiqueta >

Volviendo al ejemplo anterior de nuestro ttulo: la etiqueta para poner el ttulo principal en la pgina es ra:

<h1>. Entonces nos queda-

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

</h1>

Como ves,

<h1>

marca el

se encarga de

inicio de la etiqueta, mientras que 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 antiguos no se vuelvan locos. Hay etiquetas que pueden modicarse con lante. Slo qudate con cmo van escritos:

/. Es muy importante para que los navegadores

atributos. Ahora

mismo no hace falta entender qu hacen, ya los veremos ms ade-

< etiqueta atributo = " valor " >

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

minsculas y los atributos entre comillas7 .

1.4.

Pero para hacer webs no se usa el FrontPage?

S. Tambin puedes frer huevos con aceite para el coche.

1.5.

Mi amigo que es diseador usa Dreamweaver

8 muy

El Macromedia Dreamweaver es un editor WYSIWYG es que nos permite hacer webs sin tocar nada de cdigo.

extendido e idolatrado por innidad de diseadores. El problema S, eso es un problema. Genera cdigo basura y no tenemos control sobre lo que hacemos. As que antes de usar Dreamweaver

7 Esto

es un diferencia respecto al HTML, ya que podamos poner atributos (en castellano, lo que ves es lo que

sin comillas y no importaba si escribamos en maysculas o minsculas

8 What You See Is What You Get

obtienes).

10

CAPTULO 1.

INTRODUCCIN

o algo similar, tenemos que aprender a hacer las webs nosotros solitos. Que quede claro que es mi opinin y no Ley Divina. . .

1.6.

Una preguntilla. . .
9

Has mirado primero en Google ? Es muy listo y lo sabe (casi) todo. Si an as no te aclaras, mi e-mail es

benko@ladybenko.net.

9 http://www.google.com

Parte I
XHTML

11

Captulo 2
Estructura XHTML

La ciencia es aquello que entendemos lo suciente como para explicrselo a un ordenador. El arte es todo lo dems. Prlogo de A=B
Donald Knuth, cientco de la

computacin

Este captulo es tremendamente aburrido, pero muy importante. No es muy largo, as que presta atencin. Ahora aprenderemos a formar el esqueleto de nuestros archivos para poder usarlo ms adelante a modo de plantilla.

2.1.

La codicacin
codicacin. Qu es esto? Simplemente el Unicode (utf-8)1 y soporta caracteres de

La primera lnea que debemos tener en un documento XHTMl es la que marca la formato en el que se guardan los caracteres en el archivo. La codicacin estndar es la coreanos. . . ) Asegrate de que el editor de textos que uses te guarda el archivo en formato Unicode (normalmente es una opcin a elegir en el cuadro de dilogo de Guardar como ). todas las lenguas: occidentales, griegos, chinos, rabes, japoneses,

1 Existen

multitud de codicaciones, en su mayora Criaturas del Mal. De-

beras usar siempre la Unicode. La razn? chale un vistazo al apndice C.

13

14

CAPTULO 2.

ESTRUCTURA XHTML

Al grano, hay que escribir esto :

<? xml version = " 1.0 " encoding = " UTF -8 " ? >
Esa etiqueta es de XML, por eso tiene esa forma tan rarita. No volveremos a usar ese tipo de etiquetas en nuestro documento. La lnea anterior tiene que aparecer al principio de todo el docu-

da problemas si trabajamos con PHP3 . Si usas PHP, la etiqueta que marca el

mento, antes que ninguna otra. Lo que pasa es que inicio del script puede ser

<?,

as que los navegadores se hacen un

omitir esa lnea del principio y declarar la codicacin dentro de la seccin head (ahora veremos
lo. La solucin? Podemos qu es eso). Si elegimos esto ltimo, la lnea a incluir dentro del

head

sera:

< meta http - equiv = " Content - Type " content = " text / html ; charset = utf -8 " / >
Escoge la opcin que quieras, pero slo una. Por cierto, por motivos de espacio, la lnea aparece cortada. No importa, porque el navegador interpreta los saltos de lnea como si fueran espacios en blanco . En realidad podramos escribir todo el archivo XHTML en una sola lnea. O cada palabra en una lnea diferente.

2.2.

El DOCTYPE
DOCTYPE. Se encarga XHTML 1.0

Lo siguiente que toca es indicar el

de decirle al navegador qu demonios contiene el archivo que est abriendo. Nosotros usaremos la especicacin

Strict, que es esta:

<! DOCTYPE html PUBLIC " -// W3C // DTD XHTML 1.0 Strict // EN " " http :// www . w3c . org / TR / xhtml1 / DTD / xhtml1 - strict . dtd " >
Despus del DOCTYPE tenemos a la cabecera y al cuerpo encerrado entre las etiquetas

<html>

</html>.

2 No

somos masocas, as que no nos lo tenemos que aprender de memoria. sabes lo que es PHP? No pasa nada, hay otras formas de alcanzar la

Simplemente copia y pega.

3 No 4Y

felicidad. Las galletas de dinosaurios, por ejemplo. por cierto, muchos espacios en blanco seguidos se interpretan como si slo hubiera uno.

2.3. EL ELEMENTO RAZ (HTML)

15

2.3.

El elemento raz (HTML)

<html>.

El resto de nuestro documento tiene que ir dentro de la etiqueta Pero en esa etiqueta debemos indicar una serie de cosas,

como que nuestro documento es XHTML y qu lengua estamos usando. Si escribimos en castellano, nos quedara as:

< html xmlns = " http :// www . w3 . org /1999/ xhtml \" xml : lang = " es " lang = " es " >
Las letras

es

son el cdigo de la lengua castellana. Podis ver

algunos otros cdigos

5 en el cuadro 2.1.

Lengua
castellano cataln gallego euskera ingls francs alemn japons

Cdigo
es ca gl eu en fr de ja

Cuadro 2.1: Cdigos de lenguas

2.4.
La

La cabecera (HEAD)
cabecera contiene informacin que no forma parte del con-

tenido de la pgina en s, como el ttulo, vnculos a hojas de estilos CSS, informacin para robots de bsqueda, scripts, etc. Por ahora nos quedaremos slo con el va encerrada entre

<head> y </head>, mientras que para el ttulo usamos la etiqueta <title>. El ttulo de la web aparece en la barra
de ttulo de la ventana del navegador, es el nombre por defecto que aparece si aadimos a favoritos la pgina, etc. Quedara as:

ttulo de la pgina. La cabecera

5 Los trekkies
gimos quenya ya!

pueden escribir en su lengua con el cdigo

x-klingon.

Exi-

16

CAPTULO 2.

ESTRUCTURA XHTML

< head > < title > Ttulo de la web </ title > </ head >
El sangrado no es obligatorio, pero s que viene muy bien para aclararnos con el cdigo

2.5.

El cuerpo (BODY)

<body>

Por ltimo, nos encontramos con el cuerpo, encerrado entre y

</body>,

y que contiene toda la chicha. Quedara tal

que as:

< body > Aqu va el cuerpo de la web </ body >

2.6. La plantilla

Recopilando todo, nos quedara algo como esto:

<! DOCTYPE html PUBLIC " -// W3C // DTD XHTML 1.0 Strict // EN " " http :// www . w3c . org / TR / xhtml1 / DTD / xhtml1 - strict . dtd " > < html xmlns =" http :// www . w3 . org /1999/ xhtml " xml : lang =" es " lang =" es " > < head > < meta http - equiv = " Content - Type " content =" text / html ; charset = utf -8 " / > < title > Ttulo de la web </ title > </ head > < body > Aqu va el contenido </ body > </ html >
Y est pidiendo a gritos que guardes una copia en un archivito llamado

plantilla.html

para usos posteriores.

Captulo 3
Etiquetas bsicas

Disidente! La Vida de Brian

Frente Popular de Judea,

revolucionarios

Ahora que conocemos la estructura de un documento XHTML, aprenderemos las crear el

etiquetas bsicas que nos permitan empezar a contenido de nuestra pgina web: prrafos, saltos de

lnea, ttulos, etc.

3.1.
Los

Prrafos
prrafos sirven para estructurar el contenido. En la TM : contienen una o

web funcionan igual que en el Mundo Real texto entre las etiquetas

ms frases relacionadas entre s. Para crear un prrafo, metemos

<p>

</p>.

Un ejemplo :

<p > Hola , me llamo Luke Skywalker y soy piloto de una X - Wing en el Rogue Squadron . Tambin soy un Jedi del Lado Luminoso de la Fuerza . Mis maestros han sido Yoda y Obi - Wan Kenobi . </ p >
1 Da
igual insertar un salto de lnea entre la etiqueta y el contenido, ya que ser interpretado como un espacio en blanco.

17

18

CAPTULO 3.

ETIQUETAS BSICAS

Si pruebas ese ejemplo, te dars cuenta de que todo forma un prrafo y que el navegador pasa de los saltos de lnea. Esto es correcto. Podras haber puesto todo el prrafo en la misma lnea y obtendras el mismo resultado.

3.2.

Saltos de lnea
salto de lnea dentro de

Hay veces que necesitamos forzar un

un prrafo. Para ello, usamos la etiqueta

<br />,

as:

<p > Dark Chest of Wonders < br / > Seen trought the eyes < br / > Of the one with pure heart < br / > Once , so long ago . </ p >
Chulsima cancin de Nightwish , por cierto. Aunque estticamente podamos obtener el mismo resultado mediante prrafos (con da, hay que tener en cuenta que usar

<p>) que saltos de lnea de forma indiscrimina<br /> para separar prrafos

es algo malvado, propio de una mente retorcida.

3.3.
Los

Los ttulos (headings)

ttulos nos sirven para agrupar informacin. Imaginemos

la seccin de enlaces de nuestra pgina. El ttulo principal podra ser Mis links favoritos. Luego tendramos los links clasicados por secciones, cada una de ellas bajo un subttulo diferente: Blogs, Des-

cargas y Videojuegos. Incluso podramos tener subcategoras dentro

de una misma seccin, como por ejemplo RPG's, Aventuras Gr-

cas y Arcades.

Para conseguir esto, tenemos las etiquetas es un nmero del 1 al 6.

<h1>

<hx> y </hx>, donde

corresponde al ttulo ms impor-

tante y slo debera haber uno por pgina. Veamos todo lo anterior en un ejemplo:

< h1 > Mis links favoritos </ h1 > < h2 > Blogs </ h2 >
2 Dark Chest of Wonders,
de Nightwish, en el lbum Once.

3.4. CITAS

19

<! -- bla bla bla -- > < h2 > Videojuegos </ h2 > < h3 >RPG ' s </ h3 > <! -- bla bla bla -- > < h3 > Arcades </ h3 > <! -- bla bla bla -- >
Si ves el cdigo anterior en un navegador, aparecern los ttulos ms importantes de mayor tamao que los menos importantes (pero el tamao de cada ttulo siempre puede cambiarse con CSS).

3.4.

Citas

<q>

Existen tres etiquetas para poder escribir y

<cite>.

Mientras que

escribir la cita en s (las

citas: <blockquote>, <blockquote> y <q> se usan para frases), <cite> se emplea para marcar el

Entonces, en qu se diferencian <blockquote> y <q>? Pues que <blockquote> est hecha para contener citas largas. Es decir, que dentro de un <blockquote> tendremos que poner prrafos. <q> funciona al revs, puesto que est pensada para escribir citas cortas.

origen (persona, libro, cancin o lo que sea).

<q> va dentro de prrafos. La razn tcnica es que <blockquote> es un elemento de bloque (block), mientras que <q> es inline, y
un inline no puede estar aislado. Todo lo anterior puede resultar confuso, as que ahora toca un ejemplo claricador:

<p > Aqu os dejo un fragmento de la cancin < cite > Die for Rock 'n ' Roll </ cite > , de Dover : </ p > < blockquote > <p > Everybody danced ( while ) < br / > I was lying on the floor < br / > I was ready to die < br / > for Rock 'n ' Roll < br / > </ p > </ blockquote > <p > Mi parte preferida es cuando dice lo de <q >I was ready to die [...] </ q >. </ p >

20

CAPTULO 3.

ETIQUETAS BSICAS

3.5.
Los

Separadores horizontales
separadores horizontales (horizontal rules) han cado

en desuso, ya que podemos conseguir bordes delimitadores muy cucos mediante estilos CSS. Pero como el saber no ocupa lugar, nos quedaremos con la etiqueta

<hr />:

< h2 > Los videojuegos </ h2 > <p > Bla bla bla ... </p > < hr / > < h2 > Msica </ h2 > <p > Bla bla bla ... </p >
3.6.
Los

Comentarios
comentarios son notitas que ponemos en el cdigo fuente invisibles. Son tiles para indicar qu hacen ciertas
Ten en cuenta que el comentario tiene que estar en

de una pgina, pero que no se muestran en pantalla. Para el navegador, son partes del cdigo. Para insertar un comentario, lo escribimos entre

<!--

-->.

una sola lnea.

<! -- Esto es un comentario -- >

Captulo 4
Enlaces

Hablar es fcil. Ensame el cdigo. Lista de correo del kernel de Linux

Linus Torvalds, ingeniero de software

Ya sabemos las etiquetas necesarias para escribir texto. Ahora toca aprender a usar una de las caractersticas ms importantes de la web: los

enlaces (o links). Se implementan con la etiqueta

<a>.

4.1.

Enlace a una pgina externa

Si queremos enlazar a una pgina o archivo que est en

servidor (normalmente webs que no son nuestras), usamos

esta forma:

<a> de

otro

<a href = " http :// www . algo . com " title = " Descripcin " > Texto del enlace </ a >
El atributo

href

contiene la

Es muy importante que no se nos olvide el protocolo

URL a la que queremos enlazar. 1 (en este caso

http:// ) o no funcionar.
En

title

escribimos una

zamos. Al igual que con

<acronym>

descripcin de la pgina que enlay

<abbr>,

en la mayora de

navegadores este ttulo aparecer al pasar el ratn por encima del

1 http://

es el protocolo para la web, ftp:// para los FTP, etc.

21

22

CAPTULO 4.

ENLACES

link. No hay que confundir el ttulo con el texto del enlace. Son completamente independientes. Imagina que quieres enlazar a Barrapunto :

<a href = " http :// www . barrapunto . com " title = " La informacin que te interesa " > Barrapunto </ a >
4.2. Enlace a una pgina local
nuestro servidor, neruta (path ) desde donde estemos hasta la ubi-

Para enlazar a una pgina que est en cesitamos saber la cacin del archivo.

Si el origen (pgina donde est el link) est en el mismo directorio que el destino (pgina a la que apunta el link), entonces slo tenemos que escribir su nombre:

<a href = " profile . html " title = " Informacin sobre m " > Ficha personal </ a >
Si el destino estuviera en barra

para indicar el camino :

un subdirectorio, utilizaramos una 3

<a href = " galeria / color . html " title = " Galera color " > Ver dibujos a color </a >
Si el destino estuviera dos puntitos y una barra

un directorio por encima, pondramos

../

de esta manera:

<a href = " ../ index . html " title = " Pgina principal " > Volver al inicio </ a >
4.3. Enlace a una direccin de e-mail
4

Podemos crear un enlace que, al pulsar sobre l, se abra automticamente una ventana del cliente de correo que tenga el usuario para que escriba un mensaje a esa direccin.

2 Blog

colectivo geek, similar a Slashdot. Ya no es lo que era, pero sigue usuarios del Maligno! En Windows se utilizan las barras inver-

usando Debian.

3 Atencin

tidas

para separar los directorios. En el resto del universo, se utilizan las el infame Outlook. Usa Thunderbird

barras normales.

4 Normalmente

(http://www.mozilla.org), que es mejor y libre.

4.4. ANCLAS

23

Para ello, slo tenemos que usar mailto: en el atributo seguido de una direccin de correo electrnico:

href,

<a href = " mailto : leia@alianza . net " title = "E - mail de la Princesa Leia " > Leia </ a >

4.4.
Las

Anclas
anclas nos permiten enlazar a una posicin concreta de la creamos el ancla en el sitio al que queremos enla-

pgina, en plan teletransporte. Funcionan as: Primero zar despus. Para esto, usamos el atributo

id

(podemos ponerlo

prcticamente en cualquier etiqueta). Por ejemplo, as:

< h3 id = " comentarios " > Lista de comentarios </ h3 >

Ahora mos en

href

creamos un link que nos transporte a ese ancla. Ponela ID de antes precedida de una almohadilla

#:

<a href = " # comentarios " title = " Lista de comentarios " > Leer comentarios </ a >
Tambin podemos enlazar a un ancla que est en

otra pgina:

<a href = " post005 . html # comentarios " title = " Lista de comentarios " > Comentarios del post n o 5 </ a >
As de fcil! Hay otro modo de crear anclas, y es usando el atributo

name de una etiqueta a sin atributo href y sin texto para

el enlace; pero esta manera es obsoleta. De todos modos, revisando cdigos de otras pginas te las puedes encontrar, as que no est de ms conocer cmo se hace. Tienen este aspecto (y ojo, son invisibles!):

<a name = " comentarios " / >

Y ya est todo lo que hay que saber sobre anclas. Son tiles para pginas muy largas, como las FAQ's : tienen un ndice de preguntas que enlazan al ancla de la respuesta correspondiente. As, si hacemos clic en la pregunta nmero 3, nos enlazar a ese

5 FAQ

signica Frequently Asked Questions y es una recopilacin de las

preguntas ms frecuentes sobre un tema, contestadas. Est muy mal no leerse las FAQ's y luego preguntar sobre cosas que ya estn respondidas, as que ya sabes qu hacer si no quieres que Matrix te castigue.

24

CAPTULO 4.

ENLACES

punto concreto de la pgina. Normalmente las respuestas tienen otro enlace que nos devuelve a un ancla situada en el ndice de preguntas, para facilitar la navegacin.

Captulo 5
Listas

All your base are belong to us.

Zero Wing, videojuego arcade

Ahora veremos cmo implementar Las hay de tres tipos: Venga, que esto es muy facilito.

listas en nuestras pginas. ordenadas, sin ordenar, y de denicin.

5.1.
Las

Listas ordenadas
listas ordenadas muestran sus elementos numerados. Se

crean con la etiqueta

<ol>:

<p > Mis escritores favoritos ( en orden de preferencia ): </ p > < ol > < li >R . A . Salvatore </ li > < li > George R . R . Martin </ li > < li > Isabel Allende </ li > </ ol >
Hay que tener en cuenta que con CSS podemos cambiar el nmero por el que queremos empezar a contar, as como el tipo de numeracin (nmeros arbigos, romanos, letras del abecedario, maysculas...). 25

26

CAPTULO 5.

LISTAS

5.2.
Las

Listas sin ordenar

listas sin ordenar marcan cada elemento con una vieta,

de modo que no se sigue una numeracin. Se crean con la etiqueta

<ul>.

<p > El helado perfecto ( am !): </ p > < ul > < li >1 bola de helado de chocolate </ li > < li >1 bola de helado de limn </ li > < li > Trocitos de pia y melocotn en almbar </ li > < li > Sirope de chocolate </ li > </ ul >
Al igual que con las listas ordenadas, podemos modicar su apariencia con CSS y elegir el tipo de vietas que queremos .

2 Por cierto, prueba el helado, est riqusimo .

5.3.
Las

Listas de denicin

cada tem est compuesto por un par de elementos: un

<dt>

listas de denicin se diferencian de las anteriores en que trmino y su denicin. Se usan estas etiquetas: <dl> para crear la lista,
para cda trmino y

<dd>

para las deniciones.

<p > Significado de algunos smileys : </ p > < dl > < dt > :) </ dt > < dd > Sonrisa </ dd > < dt > xD </ dt > < dd > Carcajada </ dd > < dt >: P </ dt > < dd > Sacar la lengua </ dd > </ dl >
Y s, tambin se puede cambiar el aspecto y bla, bla, bla. Comentar que las palabras

trmino

definicin

no slo se reeren

1 Es ms, podemos sustituir las vietas por 2 Tambin puedes aadir guindas y nata.

imgenes.

5.4. LISTAS ANIDADAS

27

a una palabra y a su signicado. Tambin podemos usar una lista de denicin para crear un perl (por ejemplo), relacionando los pares Nombre-Leia, Ciudad-Coruscant y Profesin-Senadora.

5.4.
No,

Listas anidadas
las listas anidadas no son un nuevo tipo de lista, slo

una combinacin de las anteriores. Anidar signica meter una lista dentro de otra. Por ejemplo:

<p > Algunos libros de Salvatore : </ p > < ul > < li >I Triloga de El Elfo Oscuro < ol > < li > La Morada </ li > < li > El Exilio </ li > < li > El Refugio </ li > </ ol > </ li > < li > Triloga de El Valle del Viento Helado < ol > < li > La Piedra de Cristal </ li > < li > Ros de Plata </ li > < li > La Gema del Halfling </ li > </ ol > </ li > </ ul >
No es difcil, slo debemos tener cuidado cerrando la etique-

primero se cierran las interiores, y despus las de fuera. Es por esto, que cuando inserta que toque. Cmo lo sabemos? Fcil: tamos una lista dentro de un tem de otra lista (esto es, primero

<li>

y despus

<ol>,

despus debemos cerrar primero la lista, y

luego el tem de la lista exterior. Un buen sangrado como el del ejemplo ayuda mucho.

Captulo 6
Imgenes

Nada en la vida existe para que lo temamos, simplemente para que lo entendamos.
Marie Curie, cientca

Las imgenes son un elemento importante a la hora de hacer ms atractiva una web, o de aportar ms informacin. No obstante, hay que saber cundo utilizarlas y no abusar de ellas. Podemos usar tres

JPEG
mo

formatos de imagen:

GIF, JPEG

PNG.

El

es el ms adecuado para imgenes con muchos colores, co-

fotografas, y que no tengan grandes reas de colores planos. transparente. El formato

Las imgenes

GIF slo pueden almacenar hasta 256 colores diferencanal alpha

tes, pero uno de estos colores puede ser

PNG es el estndar y podemos elegir varias profundidades de paleta

(nmero de colores). Adems, les podemos aadir un para crear efectos con transparencias de diferente opacidad. Pero Ya-Sabis-Cul navegador en su versin 6 y anteriores no implementa correctamente los

PNG,

as que hay que llevar cuidado.

6.1.

Insertar una imagen

Para poner una imagen, hacemos uso de la etiqueta unos cuantos atributos:

<img>

con

< img src = " image . gif " width = " ancho " height = " alto " alt = " descripcin " / >
29

30

CAPTULO 6.

IMGENES

Con

src

establecemos qu imagen queremos mostrar. Al igual

que con los links, hay que tener en cuenta la en un subdirectorio (o varios) llamado

ruta hacia la imagen.

Por motivos de organizacin, normalmente tendremos las imgenes

src=mages/algo.gif". Los atributos width y height

images, as que escribiramos

nos permiten establecer el ancho y el alto de la imagen. Podemos indicar un valor absolu-

to en pxeles o uno relativo en tanto por ciento. Por ejemplo, tras que

width="200" mostrara la imagen con 200 pxeles de ancho, mienwidth="100 %" hace que la imagen ocupe toda la pantalla
de ancho. Estos dos atributos no son obligatorios, pero s es conveniente que indiquemos las dimensiones en pxeles reales, ya que ahorramos tiempo al navegador a la hora de maquetar la pgina. El atributo

alt

contiene una

descripcin de la imagen, que

veremos cuando no se haya podido cargar por cualquier motivo. La mayora de navegadores tambin muestran esta descripcin al pasar el ratn por encima de la imagen. Este atributo es

obligatorio,

por cuestiones de acesibilidad: hay personas que deshabilitan las imgenes para ahorrar tiempo; otras, usan navegadores de texto como Lynx; y otras, sencillamente son ciegas . Como ejemplo, as podramos insertar la imagen de un banner :

< img src = " images / banner . gif " width = " 200 " height = " 40 " alt = " BenKo ' s Art " / >

6.2.

Imgenes como links

enlace

Tambin podemos hacer que una imagen sea a su vez un

a una pgina. Los navegadores suelen mostrarla con un reborde para indicarnos que se trata de un link, pero lo podemos cambiar con CSS. Para poner una imagen como un link, la introducimos dentro de la etiqueta

<a>:

<a href = " http :// art . ladybenko . net " title = " Mi portafolio " > < img src = " images / banner . gif " width = " 200 " height = " 40 " alt = " BenKo ' s Art " / >
1 Una
cita muy comn entre desarrolladores web suele ser: El visitante ms importante de tu web es ciego y se llama Google.

6.3. SOBRE EL USO Y ABUSO DE IMGENES

31

</ a >
Hay una tcnica muy popular a la hora de implementar galeras de imgenes que consiste en usar thumbnails. Qu es esto? Una

thumbnail es una imagen ms pequea que la original, de modo

que al hacer clic sobre ella, cargamos la imagen a tamao completo. Entonces, algunos que reciben Iluminacin Divina hacen:

<a href = " matrix . jpg " title = " Wallpaper " > < img src = " matrix . jpg " width = " 100 " height = " 50 " alt = " Wallpaper de Trinity " / > </ a >
Eso

est mal. Si nuestro wallpaper de Trinity ocupa 100KB (o

ms), tendremos esos 100KB como thumbnail ! Es decir, justo lo que queremos evitar. El escalar una imaagen con hace que pese menos . Tenemos que coger un programa de dibujo, escalar la imagen, y guardar esta copia ms pequea (de 5KB, por ejemplo):

width y height no

<a href = " matrix . jpg " title = " Wallpaper " > < img src = " matrix_thumb . jpg " width = " 100 " height = " 50 " alt = " Wallpaper de Trinity " / > </ a >
6.3. Sobre el uso y abuso de imgenes

Dicen que una imagen vale ms que mil palabras. Cierto, pero muchas imgenes, o pocas mal puestas, pueden llegar a desesperar. Te resulta esto familiar? Entras a una web con un fondo de color chilln, letras verde fosforito, una cantidad obscena de GIF's animados, marquesinas, applets de Java, etc . Cunto tardas en cerrar la pgina? Yo menos de un segundo, es ya un acto reejo. Es por esto que debemos limitar los GIF's animados, as como

slo hay que poner las imgenes necesarias. Adems, te ahorrars una pasta
evitar el uso indiscriminado de imgenes. Recuerda: en ancho de banda de tu servidor.

2 Firefox no es tan bueno. 3 Aunque parezca mentira,

mdems de 56K baudios.

esto estaba muy de moda en los tiempos de los

Captulo 7
Tablas

Bienvenido a mi pesadilla!!! Warcraft 2: Beyond the Dark Portal

Grom Hellscream, hroe orco

Las

presentar

tablas son el mecanismo que nos proporciona XHTML para informacin tabulada, como horarios o los resultados

de la quiniela. Son un poco engorrosas de utilizar, pero a veces son necesarias, as que all vamos!

7.1.

Una tabla bsica

Las principales etiquetas que disponemos para crear una tabla son estas:

<table>: <tr>: <td>: <th>:

crea la tabla pone ttulo a la tabla

<caption>:

crea una la crea una celda crea una celda de encabezamiento

Se entiende mejor con un ejemplo. Es muy conveniente utilizar bien los sangrados, ya que hay que tener mucho cuidado al cerrar las etiquetas

<tr>, <td>

<th>.

Aqu tenemos una tabla de 2x2:

33

34

CAPTULO 7.

TABLAS

< table > < caption > Videojuegos </ caption > < tr > < th > Ttulo </ th > < th > Gnero </ th > </ tr > < tr > < td > Sonic </ td > < td > Plataformas </ td > </ tr > </ table >
Dara como resultado algo parecido a esto:

Ttulo
Sonic

Gnero
Plataformas

El mtodo es siempre el mismo. Por cada la que queramos, abrimos una etiqueta

<tr>

e insertamos all las celdas que corres-

cualquier cosa, pero debemos tener siempre en mente que el objetivo

pondan. Dentro de cada celda podemos meter prcticamente de las tablas es tabular informacin.

7.2.

Atributos de table

La etiqueta

<table>

dispone de una serie de

atributos1 que

nos permiten modicar su borde y los mrgenes de las celdas. Para cambiar el tamao del

borde de la tabla, usamos

border

con un valor en pxeles. Si no indicamos nada, los navegadores suelen tomar como valor por defecto 1 0. Si no queremos ningn borde, debemos utilizar

border="0".

Si lo que queremos es cambiar la otra, empleamos el atributo de esta, usamos y

cellspacing

distancia entre una celda y

con un valor en pxeles.

Y para modicar la distancia del contenido de la celda a los bordes

cellpadding
1 Los

cellpadding2 .
3

La diferencia entre

cellspacing

puede confundir al principio, as que lo mejor es

verlo con un ejemplo , modicando la tabla anterior (prubalo):

viejos atributos que en HTML 4 nos permitan establecer dimensiones

y colores han sido sustituidos por CSS.

2 Aunque, en mi opinin, es mejor usar CSS para esto. 3 Los valores estn muy exagerados para que se note la

diferencia.

7.3. EXPANDIR FILAS Y COLUMNAS

35

< table border = " 1 " cellpadding = " 10 " cellspacing = " 30 " > < caption > Videojuegos </ caption > < tr > < th > Ttulo </ th > < th > Gnero </ th > </ tr > < tr > < td > Sonic </ td > < td > Plataformas </ td > </ tr > </ table >
7.3. Expandir las y columnas

Muchas veces necesitamos que una celda ocupe ms de un espacio. Pongamos como ejemplo nuestra socorrida tabla de videojuegos. Qu pasa si en vez de un gnero por cada juego, queremos meter dos? Podemos hacer que la celda de gnero ocupe dos columnas. As:

< table > < caption > Videojuegos </ caption > < tr > < th > Ttulo </ th > < th colspan = " 2 " > Gnero </ th > </ tr > < tr > < td > Sim City </ td > < td > Simulacin </ td > < td > Estrategia </ td > </ tr > </ table >
Ttulo
Sim City

Gnero
Simulacin Estrategia

Como ves, para expandir una celda por varias columnas hemos utilizado el atributo mediante

rowspan.

colspan. Podemos hacer lo mismo con las las,

Vamos a hacer la misma tabla de antes, pero

girada 90 grados:

36

CAPTULO 7.

TABLAS

< table > < caption > Videojuegos </ caption > < tr > < th > Ttulo </ th > < td > Sim City </ td > </ tr > < tr > < th rowspan = " 2 " > Gneros </ th > < td > Simulacin </ td > </ tr > < tr > < td > Estrategia </ td > </ tr > </ table >
Ttulo Gneros
Sim City Simulacin Estrategia Que es un rollo esto de las tablas? Pues s, pero no le des mucha importancia. La mayora de editores de cdigo (X)HTML, como el Quanta o el Homesite+, traen asistentes para crear tablas de forma rpida y sencilla.

7.4.

Tablas para layouts? Insensato!

A da de hoy, la mayora de las pginas web estn maquetadas usando tablas con

border="0".
4

Antes de la llegada del CSS, era

totalmente imposible crear texto a columnas y, en denitiva, maquetas un sitio web . Afortunadamente, CSS implementa

capas,

con lo que se puede congurar totalmente la apariencia y la colocacin de cada elemento de la pgina mediante la hoja de estilos, quedando el cdigo XHTML muy simple y sencillo. Entonces por qu la gente sigue usando tablas? Porque muchos piensan que eso de las capas es algo muy complicado. Mentira y gorda! Lo que pasa es que nadie nace enseado, y aprender algo nuevo siempre da un poco de pereza. En la parte de CSS de este

4 Bueno,

se poda apaar algo utilizando frames, pero era peor el remedio

que la enfermedad.

7.4. TABLAS PARA LAYOUTS? INSENSATO!

37

tutorial aprenderemos a crear varios tipos de diseo populares para as tumbar el mito de que las capas son difciles. Y dndole la vuelta a la tortilla...

Por qu no usar tablas?

Pues porque las tablas no se han creado para maquetar y el WWW Consortium lo desaconseja. Adems, en navegadores no visuales (de texto, para ciegos, o cualquier dispositivo que no sea un monitor) el resultado es totalmente

imprevisible. Quieres otra razn de

peso? Las tablas dan ms trabajo. El cdigo queda ms enrevesado, y si queremos renovar el diseo de nuestra pgina, hemos de cambiar prcticamente todo el cdigo. Sin embargo, si hubiramos usado un layout por capas, slo tendramos que modicar el archivo CSS. Ms razones? Al ser el cdigo ms complicado, las

ms pesadas y gastan ms ancho de banda. Adems, tardan ms en cargar, ya que hasta que no se carga todo lo que
pginas son hay en la tabla, no se muestran los resultados parciales. El futuro es XHTML y sitios web importantes, como Blogger , ya han rediseado su layout con capas. As que te animo a que cumplas los estndares y no uses las tablas para maquetar

6 :)

5 Comunidad de blogs de Google: http://www.blogger.com 6 En la web de Steal these buttons! (http://gtmcknight.com/buttons/)

Paladines del CSS.

hay

botoncitos muy cucos para mostrar al mundo que formas parte del Clan de

Captulo 8
Formularios

Mi fortaleza reside nicamente en mi tenacidad.

Louis Pasteur, microbilogo y qumico

Los formularios nos permiten recoger informacin introducida por el visitante de nuestra web. Esta informacin podemos enviarla por correo electrnico o procesarla con un script. Si se manda por en cuenta de que se trata de

correo electrnico, es muy importante tener informacin no cifrada y que podra

ser interceptada, as que no debe contener datos importantes. Un uso aceptable sera un formulario con comentarios sobre nuestra pgina o para pedir un intercambio de links. Si nuestro servidor dispone de tecnologa como

PHP o CGI

(por ejemplo), podemos hacer ms cosas con esa informacin, como guardarla en una base de datos o generar una pgina dinmicamente.

8.1.

La etiqueta FORM

Todos los formularios estn encerrados por

<form>

</form>.

Dentro de esta etiqueta, van los campos del formulario, y podemos usar prrafos y saltos de lnea para organizarlos. Vamos a ver un ejemplo de etiqueta que se enviar por correo electrnico: 39

<form>, suponiendo que va a ser un formulario

40

CAPTULO 8.

FORMULARIOS

< form action = " mailto : leia@alianza . net " method = " post " enctype =" text / plain " >
pulse el botn de enviar (Submit). En ese ejemplo, el formulario se enva a la direccin El atributo

action

recoge qu se va a hacer una vez que se

leia@alianza.net1 .

Si tuvisemos un

script para procesar el formulario, hubisemos puesto algo como

action=.enviar_info.php". Con method especicamos cmo va a ser enviada la informacin. Si utilizamos correo electrnico, le damos el valor de post. Para scripts se suele utilizar get, que pone el valor de las variables en la
query string (URL) .
Por ltimo, con

enctype="text/plain"

conseguimos que lle-

gue a nuestra bandeja de entrada el formulario en forma de texto plano sin caracteres extraos.

8.2.

Campos de texto

La mayora de los campos de un formulario se crea con una sola etiqueta, as:

<input>, y mediante su parmetro type especicamos el

tipo de campo que queremos. Un

campo de texto bsico quedara

< input type = " text " id = " nombre " name = " nombre " size = " 20 " / >
Vamos a pegarle un vistazo a los atributos. Con recoge el hacen indicamos que se trata de un campo de texto. El atributo

type="text" size

id y name? Pues id es un identicador. Esto implica que nada en todo el

3 y para ms cosillas, como usarlo con la etiqueta
(que veremos ahora).

ancho del campo, medido en caracteres. Ahora bien, qu

documento puede llamarse igual que este elemento. Este parmetro sirve para CSS

<label>
1 Lo 2 Si

siento chicos, pero la princesa Leia no me ha autorizado a publicar esto te suena a chino, no te preocupes. Slo es necesario saberlo en el

aqu su verdadera direccin de e-mail :( caso de que vayas a usar un script. . . Y en ese caso, ya lo aprenders cuando te enseen a programarlos.

3 Estableciendo

un aspecto exclusivo para ese elemento, por ejemplo.

8.3. CAMPOS DE CONTRASEA

41

Con

name

damos

nombre a la variable de ese campo. Por

ejemplo, si el visitante escribe Morpheo en el formulario que hemos puesto de ejemplo, recibiramos un e-mail que contendra algo as:

nombre = Morpheo
De todos modos, para ahorrarnos problemas, siempre que podamos es mejor escribir el mismo valor para complicarse la vida lo menos posible.

id

name.

Hay que

nmero mximo de caracteres que puede maxsize Y si queremos que aparezca un valor por defecto, podemos usar value=.algo". Por ejemplo,
to. Podemos indicar el introducir el usuario con para pedir la direccin de la pgina web del visitante:

Hay otros atributos adicionales para nuestros campos de tex-

< input type = " text " name = " url " id = " url " size = " 30 " maxsize = " 255 " value = " http :// " / >

title,
8.3.

Y, por supuesto, no debemos olvidarnos de nuestro socorrido que funciona igual que con la etiqueta

<a>.

Campos de contrasea

Los

campos de contrasea

son exactamente iguales que los

de texto, slo que el visitante en lugar de ver los caracteres que ha introducido, ve asteriscos. Lo de exactamente iguales quiere decir eso: es un campo de texto, la informacin contrasea es meramente esttica. Los atributos son los mismos que los de los campos de texto, lo nico que cambia es qe debemos introducir Ejemplillo:

no va cifrada de

ninguna manera. La diferencia entre un campo de texto y uno de

type="password".

< input type = " password " name = " pass " id = " pass " / >

8.4.

Etiquetar campos

Ya hemos aprendido a crear campos de texto para nuestro formulario, pero cmo le decimos al visitante qu es lo que tiene que introducir en cada campo? Podramos hacer algo as:

42

CAPTULO 8.

FORMULARIOS

<p > Nombre : < br / > < input type = " text " name = " nombre " id = " nombre " / > </ p >
Mal. Podemos tener problemas con navegadores no visuales.
Entonces, cmo sabemos que la palabra Nombre hace referencia al campo con el atributo una etiqueta nueva:

id="nombre"? <label>.

Para eso disponemos de

Esta etiqueta se encarga de indicar la

correspondiente. Slo tiene un atributo,

for, y en l tenemos que id del campo al que queremos hacer referencia. El ejem-

asociar texto con su campo

plo anterior sera correcto de esta manera:

<p > < label for = " nombre " > Nombre : </ label > < br / > < input type = " text " name = " nombre " id = " nombre " / > </ p >
8.5. reas de texto
reas de texto damos a nuestros visitantes la posiy su funcionamiento es un poco diferente al de

Con las es

bilidad de introducir texto con varias lneas. La etiqueta a usar

<textarea>, <input>. title,

La etiqueta

<textarea>

dispone de los atributos

id, name

que funcionan como en el resto de campos de formulario.

Adems, disponemos de otros dos para indicar las dimensiones del rea de texto: caracteres) y

cols se encarga de establecer el rows el alto, medido en lneas.

ancho (medido en

Como ejemplo, imaginemos que en una parte del formulario queremos poner un campo para que el visitante deje un comentario. Como probablemente sea largo, utilizamos un textarea:

<p > < label for = " comentario " > Algn comentario ? </ label > < br / > < textarea name = " comentario " id = " comentario " cols = " 30 " rows = " 5 " > Bla bla bla </ textarea >

8.6. CASILLAS DE VERIFICACIN

43

Fjate en que

<textarea>

tiene etiqueta de

que hay entre la etiqueta de apertura y la de cierre es el

cierre. El texto valor por

defecto que contendr el campo; en este caso Bla bla bla .

8.6.
Una

Casillas de vericacin
casilla de vericacin (ms conocida como checkbox es

un cuadradito que el usuario puede activar y desactivar pulsando en l. Se crean con la etiqueta

<input>

type=heckbox".

Los es

atributos id, name y title funcionan con normalidad, pero value funciona de manera algo distinta. Lo que escribamos en variable (indicada en si ponemos esto. . .

value

lo que nos saldr en el e-mail que recibamos como el valor de la

name) si la casilla est activada. Es decir, que

<p > Has jugado a ... < br / > < input type = " checkbox " name = " monkey1 " id = " monkey1 " value = " si " / > < label for = " monkey1 " > Monkey Island I </ label > </ p >
. . . y el usuario activa la casilla, recibiremos un mail como este:

monkey1 = si
Tambin podemos hacer que una casilla est activada por defecto, si aadimos el atributo

checked=hecked".

As:

<p > Has jugado a ... < br / > < input type = " checkbox " name = " monkey1 " id = " monkey1 " value = " si " checked = " checked " / > < label for = " monkey1 " > Monkey Island I </ label > < input type = " checkbox " name = " xwing " id = " xwing " value = " si " / > < label for = " xwing " >X - Wing Alliance </ label > </ p >
Nos quedara entonces la casilla etiquetada como Monkey Is-

land , mientras que la de X-Wing Alliance sin activar.

4 Yo

soy cola, t pegamento.

44

CAPTULO 8.

FORMULARIOS

8.7.

Botones de seleccin

No s si el trmino botones de seleccin es en realidad el ms adecuado como traduccin, as que mejor pondr una explicacin de lo que hacen. El nombre en ingls es

radio buttons, y son casillas

circulares agrupadas, en las que slo una puede estar activada a la vez. Sirven para cuando queremos que el visitante slo seleccione una opcin de las mltiples que se le dan. Aunque se crean con la etiqueta tro

type="radio",

<input>

indicando el parme-

los radio buttons son algo especiales, as que

los veremos un poco ms despacio. Pongamos el caso de que queremos que el visitante de nuestra web nos indique cul pelcula de la triloga de Star Wars

5 es su

favorita. Evidentemente, slo puede coger una, as que nos toca emplear radio buttons en lugar de casillas de vericacin. Necesitamos entonces un botn por cada pelcula (tres en total). Cmo los agrupamos? Pues dando el mismo nombre de variable a cada botn. Es decir, de

el atributo name es el mismo para todo el grupo. Y qu hacemos con id? Bien, no puede haber dos valores

id

repetidos, as que la id en cada botn ha de ser distinta. En del atribudefecto. El

otras palabras, los radio buttons son los nicos campos en los que la id y to

name deben ser diferentes. Disponemos adems checked por si queremos marcar alguna opcin por

cdigo para este ejemplo sera as:

<p > Peli preferida : </ br > < input type = " radio " name = " peli " id = " sw_hope " value = " hope " checked = " checked " / > < label for = " sw_hope " >A New Hope </ label > < input type = " radio " name = " peli " id = " sw_empire " value = " empire " / > < label for = " sw_empire " > The Empire Strikes Back </ label > < input type = " radio " name = " peli " id = " sw_jedi " value = " jedi " / > < label for = " sw_jedi " > The Return of the Jedi </ label >
5 De
la triloga original, por supuesto. No queremos ofender a nadie.

8.8. LISTAS DE SELECCIN

45

</ p >
Como ves, usamos como nombre de variable (name) la palabra

peli . Segn la pelcula que sea, cada botn tiene asignada una id diferente. Por ejemplo, A New Hope tiene asignada la id peli_hope . El atributo

value contiene el texto que tendr la variable

en caso de que se seleccione ese botn. Por ejemplo, si el visitante selecciona la pelcula de The Return of the Jedi, recibiremos un e-mail con esta lnea:

peli = jedi
Quizs parezca un poco lioso, pero una vez hayas hecho un par de formularios, todo ir bien.

8.8.
Las

Listas de seleccin

listas de seleccin tienen una funcin parecida a los ramltiples opciones 6 agrupadas en las que escogemos una . La diferencia es que la lista
dio buttons, en tanto que se nos presentan aparece replegada y no ocupa apenas espacio en la web, as que son muy tiles cuando tenemos muchas opciones a elegir. La etiqueta que las crea es

<select> y tiene etiqueta de cierre.

Entre ellas, insertamos las opciones que tenemos con la etiqueta

<option>.

Pongamos el mismo ejemplo de antes, el de elegir la

pelcula preferida de Star Wars.

<p > < label for = " peli " > Pelcula preferida : </ label > < br / > < select name = " peli " id = " peli " > < option value = " hope " >A New Hope </ option > < option value = " empire " > The Empire Strikes Back </ option > < option value = " jedi " selected = " selected " > The Return of the Jedi </ option >
6 Mentira,
hay un atributo que permite que seleccionemos varias opciones de la lista, pulsando la tecla que es muy incmodo.

Ctrl.

No seas un pequeo bastardo y lo pongas,

46

CAPTULO 8.

FORMULARIOS

</ select > </ p >

Con selected="selected" indicamos cul es la opcin por defecto, en este caso The Return of the Jedi. Como ves, aqu no tenemos el lo aquel con

id name.

8.9.

Botones de enviar y reestablecer

Ya hemos visto todos los campos de formulario que podemos crear, ahora slo nos falta comentar dos Ambos se crean con

botones especiales: el de enviar (submit ) y el de reestablecer (reset ).

<input>.

El atributo

id

no tiene mucho

sentido, a menos que usemos CSS para cambiar su aspecto de un modo concreto y exclusivo. Asmismo,

name

tampoco nos ser til

si no empleamos algn tipo de script para tratar la informacin. Como nosotros enviamos el formulario por correo, no debemos preocuparnos. En El botn de

value indicaremos el texto que aparecer en el botn.

enviar se encarga de mandar la informacin del

formulario, segn lo que hayamos especicado en crear el botn, simplemente indicamos

<form>. type="submit":

Para

< input type = " submit " value = " Enviar " / >
El botn de con

reestablecer borra el formulario y vuelve a poner

los valores por defecto. til para formularios largos. Lo conseguimos

type="reset":

< input type = " reset " value = " Borrar " / >
Ni que decir tiene que hay que diferenciar bien cul botn es cul y no poner textos extraos como ttulo de los botones. Si te sientes creativo, vete a jugar al Lego. Fastidia mucho que se te borre todo el formulario por error, creyendo haberle dado al botn de enviar.

Parte II
CSS

47

Captulo 9
Introduccin al CSS

Fuera del mundo de los sueos, la vida puede ser dura, incluso cruel. Pero es vida. Final Fantasy X
Auron, guardin legendario

En la parte de XHTML hemos comentado muchas veces que podemos cambiar el aspecto de una pgina web mediante hacerlo. Me ha costado decidirme sobre cmo explicar las diferentes propiedades del CSS, pero creo que la mejor manera de aprender sin que se haga muy pesado es poniendo ejemplos de problemas comunes con los que nos topamos, junto con la manera de solucionarlo en CSS. Despus de todo, esto no pretende ser una gua de referencia con todas las propiedades y todos sus posibles valores .

CSS

(Cascading Style Sheets). Ahora es el momento de aprender cmo

9.1.

Dnde escribo el cdigo CSS?

archivo externo (que se llama

Hay dos opciones para insertar CSS en un documento XHTML. Lo ms normal es hacerlo en un hoja de estilos) y enlazarlo desde nuestro documento XHTML.

1 Googleando
de 359 pginas.

un poco, podrs encontrar muchas. Y siempre te queda con-

sultar las especicaciones ociales en la web del W3C. Es un PDF muy majo

49

50

CAPTULO 9.

INTRODUCCIN AL CSS

Esto tiene una ventaja enorme, y es que podemos tener muchas pginas enlazando a la misma hoja de estilos. Si ms adelante queremos cambiar algo, slo tenemos que modicar un nico archivo (la hoja de estilos) y afectar a todas las pginas. Podemos enlazar una o ms hojas poniendo esto dentro de la cabecera (<head>):

< link rel = " hoja_estilos . css " rel = " stylesheet " type = " text / css " / >
La otra opcin es escribir la informacin referente a los estilos incrustada

en el mismo archivo XHTML. Lo podemos hacer

escribiendo entre las etiquetas deben ir en la cabecera.

<style>

</style>,

que tambin

Si hacemos las dos cosas a la vez, siempre tienen prioridad las reglas que estn dentro de

<style>.

9.2.

Vale, pero cmo funciona?

En una hoja de estilos utilizamos reglas que consisten en elegir selectores a los que asignamos una serie de propiedades. Por ejemplo, si queremos que nuestra pgina web tenga el fondo blanco, las letras grises, y una fuente Arial de 10 puntos de tamao, escribimos esta regla:

body { background - color : # fff ; color : #666; font - family : Arial , sans - serif ; font - size : 10 pt ; }
Como ves, las lneas terminan en un

punto y coma. Es muy

importante que no se nos olvide. Ah, y si te lo ests preguntando,

#fff

representa al color blanco, y

#666

a un gris oscuro.

9.3.
Los

Selectores?
selectores los utilizamos para elegir a qu elementos se

aplican las propiedades que escribimos. Hay diferentes tipos de selectores, los ms importantes son los que veremos ahora.

9.4. QU SIGNIFICA ESO DE CASCADING?

51

Si queremos elegir una los enlaces:

etiqueta, simplemente escribimos su

nombre. Por ejemplo, si queremos establecer las propiedades para

a { ... }
Tambin podemos elegir un buto

id.

elemento nico utilizando su atri-

Para ello, empleamos la almohadilla:

# menu { ... }
Otra cosa que podemos hacer es denir una bre. Por ejemplo, si queremos destacar algo:

clase y hacer que

muchos elementos la utilicen, escribiendo un punto antes del nom-

. importante { ... }
Luego podramos emplear esa clase en los prrafos que queramos (o cualquier otro elemento), usando el atributo modo:

class

de este

<p class = " importante " > Bla bla bla </ p >
Tambin podemos seleccionar ciertos elementos, pero slo cuando estn contenidos dentro de otros. Por ejemplo, si queremos seleccionar los

<li>,

pero slo de las listas sin ordenar:

ul li { ... }

9.4.

Qu signica eso de cascading?

Cascading signica cascada, y tiene que ver con la herencia.

En CSS, los elementos hijos heredan todas las propiedades de sus padres. Por ejemplo, si establecemos una regla para el elemento

table,
glas.

sus hijos (td entre otros) tambin tendrn esas mismas re-

52

CAPTULO 9.

INTRODUCCIN AL CSS

Es por esto que si, por ejemplo, queremos establecer un tipo de fuente para todo el documento, debemos indicarlo en el elemento

body

para que se propague por toda nuestra pgina.

9.5.

Puedo poner comentarios?

>.

Claro, pero son distintos a los de XHTML, que van entre

<!

/* Esto es un comentario */

9.6.

Por qu #f signica blanco?

En CSS hay varias maneras de indicar un color. Podemos hacerlo en ingls, por ejemplo. En lugar de

#fff

escribimos

white

y lo solucionamos. El problema es que as es muy incmodo porque tenemos que aprendernos los nombres de cada color, y puede que exista algn color que queramos poner y que no tenga nombre. . . adems de que supone una falta de precisin absoluta . As que normalmente se usa la

notacin en hexadecimal. sistema RGB (Red Green Blue ).

Los colores en nuestro monitor est formado por tres haces de luz: rojo, verde y azul. Se llama Si cogemos un programa de dibujo, vemos que podemos eleigr un color indicando el valor de sus componentes rojo, verde y azul por separado. Este valor puede variar de ponemos

255

(se usan 8 bits para

representar este rango). Por ejemplo, si queremos amarillo puro,

255

para el rojo,

255

para el verde y

para el azul.

este rango de valores (0..255) puede ser representado con dos dgitos hexadecimales, que van desde el escribir un color completo es que se trata de un color el amarillo sera

Qu tiene que ver esto con el sistema hexadecimal? Pues que

00 hasta el FF. La forma de #RRGGBB, donde la almohadilla indica hexadecimal, y RR, GG y BB son los dgitos

correspondientes al rojo, verde y azul, respectivamente. Entonces

#ffff00.

La mayora de los colores que usaremos tendrn por cada componente los mismos dgitos. Por ejemplo:

#ff0000

(rojo),

#0000aa

2 Recuerdas

esas discusiones en parvulario sobre si cierto color era lila,

morado, o fucsia? Quin te dice que tu concepto de morado sea el mismo que el de tu navegador?

9.6. POR QU #FFF SIGNIFICA BLANCO?

53

(azul marino) o equivalente a

viar y dejarlos en tres cifras. Por ejemplo, den ser abreviados.

#f00 es completamente #ff0000. Sin embargo, colores como #a0a0a0 no pue255, #fff.

#000000

(negro). Estos colores los podemos abre-

Por tanto, para conseguir el color blanco, debemos poner poner todas las componentes a

#ffffff,

que en hexadecimal nos quedara

y abreviado en

La mayora de editores de cdigo (X)HTML o de programas de dibujo nos mostrarn en la paleta el valor del color en hexadecimal. En cualquier caso, siempre podemos obtener el valor de sus componentes por separado y convertirlo a hexadecimal con una calculadora.

Captulo 10
Trasteando por primera vez

Eh, yo he visto esto antes. No. . . lo he jugado antes. No. . . lo he diseado antes! Post sobre Piratas del Caribe
Ron Gilbert, desarrollador de videojuegos

Para empezar a meter mano al CSS, conviene conocer algunas propiedades sencillas. Empezamos!

10.1.

El color de primer plano

La propiedad al

color hace referencia al foreground

color, es ecir,

color que est por encima del fondo. Hablando en plata, viene

a ser el color del texto. Si queremos que nuestra pgina tenga las letras de gris oscuro, lo conseguimos con esto:

body { color : #666; }

Muy fcil, no? Que pase el siguiente. . .

10.2.

El fondo

background,

Podemos moicar el fondo de un elemento con la propiedad que tiene la siguiente sintaxis:

background : color | image | repeat | attachment | position ;

55

56

CAPTULO 10.

TRASTEANDO POR PRIMERA VEZ

El primer parmetro corresponde al tes son relativos a la

color de fondo, los siguienimagen de fondo:

image: aqu indicamos la ruta a la imagen que pondremos.

Por ejemplo,

url(fondo.gif).

repeat: con esto establecemos si queremos que la imagen se

repita o no, tanto horizontal como verticalmente. Con tras que con

repeat

se repite siempre en ambos sentidos (valor por defecto), mienrepite slo en horizontal, y con

no-repeat no se repite nunca. Con repeat-x se repeat-y slo en vertical.

attachment: sirve para indicar si el fondo se queda jo en el

sitio o se desplaza con scroll. Es un poco difcil de explicar, as que lo mejor es que lo probis vosotros mismos: con (valor por defecto) el fondo se desplaza, y con siempre en el mismo sitio.

scroll fixed se queda

position: indica la posicin del fondo. Indicamos tanto la posicion desde la izquierda como desde arriba (ya sea en pxeles, porcentajes, o incluso palabras ). Los valores por defecto son que sitan al fondo en la esquina superior izquierda.

0 % 0 %, 30px.

Si lo quisiramos en las coordenadas 20,30 (tomando como el origen a la esquina superior izquierda), escribiramos Si queremos el fondo centrado, pues

50 % 50 %.

20px

Podemos omitir alguna propiedad si queremos. Adems, podemos establecer los valores de forma individual, usando las propiedades

background-color, background-repeat,

etc.

Veamos algunos ejemplos para poner fondo a nuestra pgina:

/* slo color de fondo */ body { background : # fff ; } /* color de fondo e imagen en mosaico */ body { background : # fff url ( fondo . gif ); } /* imagen fija , centrada y sin repetir */ /* a modo de marca de agua */ body {
1 En
este caso, si podemos usar palabras, es preferible que lo hagamos. Disponemos de

top

(arriba),

bottom

(abajo),

left

(izquierda) y

right

(derecha).

10.3. FUENTE

57

background - color : # fff ; background - image : url ( fondo . gif ); background - attachment : fixed ; background - repeat : no - repeat ; background - position : 50 % 50 %;
Hemos explicado de forma bastante detallada cmo funciona la

propiedad

background,
2

pero no te malacostumbres. Ahora iremos

mucho ms deprisa, y seguramente te toque buscar ms informacin por tu cuenta .

10.3.

Fuente

Hay varias propiedades que nos permiten jugar con el aspecto del texto. Podemos englobar todas bajo mos algunas subpropiedades. Antes de nada, debemos considerar que no todos los ordenadores tienen las mismas fuentes instaladas. Es decir, que mi wonderfulosa fuente llamada

font,

pero primero vere-

chachi.ttf

no tiene por qu te-

nerla mi vecino. Es ms, lo normal es que no la tenga . Entonces qu hacemos? Usar slo fuentes estndar, que tengan la mayora de ordenadores. Adems, podemos especicar varias, de forma que si no se tiene la primera, se muestre la segunda, si no se tiene la segunda, pues la tercera, etc. es A lo que bamos. La propiedad que sirve para cambiar la fuente Como acabamos de ver, podemos indicar varias

font-family.

fuentes, por orden de preferencia. Si el nombre de una fuente tiene espacios en blanco, hay que ponerla entre comillas. Por ejemplo :

font - family : " Comic Sans MS " , Arial , sans - serif ;

mos indicar medidas en pxeles (px) o en puntos (pt) . EL

tamao de la fuente lo controlamos con

font-size.
5

Pode-

2 Recuerdas ese librito majo de 359 pginas? 3 La Ley de Murphy, como en cualquier otro aspecto
al diseo web tambin.

de la vida, es aplicable

4 Haz

esto y muere. La irrupcin de la Comic Sans por doquier slo es cochina. Podemos (y mucha gente opina que debemos ) usar me-

comparable a la aparicin de Jar Jar Binks en Star Wars.

5 Mentira

didas relativas, pero el tema de la herencia es muy importante en estos casos y. . . Dejmoslo en que no es newbie-friendly.

58

CAPTULO 10.

TRASTEANDO POR PRIMERA VEZ

Para

alinear el texto tenemos a

6

los valores

justify

text-align, que puede tomar right (derehca), left (izquierda), center (centrado) o

(justicado) . Es muy normal tener una clase as:

\ texttt {. centrar } { text - align : center ; }

Si queremos

indentar los prrafos, pues usamos text-indent: em?

Es una

p { text - indent : 2 em ; }
Qu signica

unidad relativa. Lo ms fcil es

trabajar con pxeles o porcentajes, pero en algunos casos conviene utilizar otras unidades.

1 em equivale al tamao de la fuente7 . As, 20px, siempre sera 20 o de 32 pxeles.

si por herencia o por cualquier otra cosa el texto se muestra en un tamao de fuente diferente, la proporcin de indentado sera siempre la misma. Si pusiramos el tamao de la fuente fuera de esa, aunque

text-decoration. Puede tomar diversos valores, como none (sin 8 adornos), underline (subrayado) , overline (subrayado superior) o line-through (tachado). Si queremos que nuestros links no tengan subrayado, pondremos:

Tambin podemos cambiar la

decoracin del texto meidante

a { text - decoration : none ; }

piedad en

text-transform. Si ponemos lowercase, todo se mostrar minsculas; con uppercase, en maysculas; y con capitalize
En cuanto al letras,

Podemos

transformar las maysculas y minsculas con la pro-

pondremos una letra capital al principio de cada palabra. mos el

word-spacing; para el de las interlineado, line-height.

espaciado, para la distancia entre palabras usa-

letter-spacing; <strong>:

y para

Un ejemplo con todo esto, para la etiqueta

strong { color : #000; letter - spacing : 0.25 em ; text - trasform : uppercase ; }

6 A mucha gente le gusta montar Guerras Sagradas acerca de la conveniencia
o no de usar texto justicado. Todava no se han puesto de acuerdo, as que probablemente es un asunto de gustos.

7 Bueno, exactamente equivale a la anchura de la letra M mayscula. 8 Cuidado! Los humanos tenemos la estpida mana de pensar que cualquier

texto subrayado es un enlace.

10.3. FUENTE

59

Demasiada informacin? S, pero ten en cuenta que no hay que memorizar todo esto. Ni de coa. Lo importante es saber que

existe una propiedad que hace tal cosa, no cmo se llama ni qu

parmetros tiene. Para eso ya estn las guas de referencia rpida y los editores de CSS.

Captulo 11
El modelo de caja

No consumo drogas, mis sueos ya son lo sucientemente escalofriantes

M.C. Escher, artista

Es hora de conocer uno de los fundamentos ms importantes del CSS: el

modelo de caja (box model). Es muy fcil, pero entenderlo

bien es vital para poder realizar una buena maquetacin de la web.

11.1.

Cmo es el modelo de caja?

En realidad, todos los elementos de una web (prrafos, enlaces, imgenes, tablas, etc.) son para maquetar la pgina. Hay dos tipos de cajas:

cajas rectangulares. Los navegadores

sitan estas cajas de la forma que nosotros les hayamos indicado

block e inline. Los elementos block inline siguen el ujo, y estn block (no podemos

rompen el ujo de maquetacin. Esto es, aparecen solos, insertando saltos de lnea. Los elementos contenidos dentro de elementos de bloque. Por ejemplo, un prrafo sera un elemento aparecern uno mento

tener un prrafo al lado del otro, sino que dos prrafos seguidos

abajo del otro. En cambio, un enlace es un eleinline, ya que no corta el texto donde est metido.
61

62

CAPTULO 11.

EL MODELO DE CAJA

Figura 11.1: Modelo de caja

Estas dos diferencias son importantes, pero hay que tener en mente que ambos tipos comparten el modelo de caja, que es el que aparece en la gura 11.1. Las propiedades ms importantes de una caja son: cho),

height

(alto),

padding

(relleno),

border

width

(an-

(borde) y

margin

(margen).

11.2.

Ancho y alto

La propiedad

width es un poco confusa, y durante mucho tiem1

po era horroroso trabajar con ella debido a que Ya-Sabes-Quin no la implementaba correctamente . Afortunadamente, desde la versin 6 del IE,

width

funciona como debera, as que es un que-

bradero de cabeza menos. A lo que bamos, es el

width representa el ancho de la caja. Pero ancho interior, es decir, si bordes, mrgenes, ni padding.
inline tienen

Podemos indicar este ancho en medidas absolutas (normalmente pxeles) o relativas (normalmente %). Aunque los elementos

width,

si la modicamos

con CSS no veremos ningn resultado visual. Esto es porque el ancho de estos elementos se establece automticamente para que se ajuste a las dimensiones del elemento inline. Por ejemplo, si

1 Lo

que ha dado lugar a competiciones de a ver quin consegua el chan-

chullo ms bonito para sortear el bug. Si ests interesado, googlea buscando box model hack.

11.3. PADDING

63

tenemos un enlace que consiste en un texto de cinco caracteres, caracteres. Sobre el aqu.

el ancho (width) de este elemento ser lo que ocupen esos cinco

alto de la caja, se controla con la propiedad

height,

y todo lo que hemos dicho antes sobre el ancho, tambin se aplica

11.3.
Con

Padding

padding

establecemos la distancia de

relleno entre el

lmite interior de la caja y el exterior (borde). Es una denicin muy mala, pero se entiende a la perfeccin en el dibujito. Si queremos poner un padding de 20 pxeles para toda la caja, lo haramos as:

padding : 20 px ;
Podemos establecer un padding distinto para cada lado, usando los sujos

right

-top

(superior),

-bottom

(inferior),

left

(izquierda) y

(derecha):

padding - top : 10 px ; padding - bottom : 5 px ; padding - left : 30 px ; padding - right : 20 px ;

Podemos abreviar lo anterior en una sola lnea, indicando primero el padding superior y luego siguiendo el orden de las agujas del reloj. Es decir, nos quedara: arriba, derecha, abajo, izquierda. El ejemplo anterior se acortara as:

padding : 10 px 20 px 5 px 30 px ;
Otro atajo til es especicar slo dos medidas: una corresponderan al padding superior e inferior, y la otra al lateral. Si queremos que los paddings superior e inferior sean de 10 pxeles, y los laterales (izquierdo y derecho) de 20 pxeles, escribimos:

padding : 10 px 20 px ;
11.4. Bordes

Si queremos que nuestra caja tenga la propiedad

border.

bordes, lo conseguimos con

Tiene la siguiente sintaxis:

64

CAPTULO 11.

EL MODELO DE CAJA

border : width | style | color

Como habrs supuesto, utilizar las palabras navegador.

width

especica el

grosor del borde.

Normalmente es una medida en pxeles, pero tambin podemos Por supuesto, cmo de gordo es En cuanto a

thin (no), medium (normal) y thick (grueso). thick queda a interpretacin del

style, es el tipo de borde. Hay bastantes, pero los solid (lnea continua), dashed (lnea discontinua), dotted (lnea de puntos) y double (lnea continua doble). 2 Por ltimo, color indica el color del borde .
ms comunes son: Podemos escoger un tipo de borde diferente para cada lado con los sujos que algo tenga el borde inferior de 1 pxel a puntitos rojos:

-top, -bottom, -left y -right. Por ejemplo, para poner

border - bottom : 1 px dotted # f00 ;

Para

eliminar el borde, simplemente ponemos que tiene de

grosor 0 pxeles o que el estilo del borde es

none.

Esto es muy im-

portante con las imgenes, ya que si tenemos una imagen enlazando a algo, los navegadores la ponen con un reborde muy feo. As que esto se ha convertido ya en un jo de las hojas de estilos:

img { border : none ; }

11.5.
Los

Mrgenes
mrgenes se controlan con la propiedad

margin,

y es la

distancia entre el borde de la caja y los elementos que la rodean.

padding,

En cuanto a la forma de usarla, es igual que con la propiedad as que la forma de escribir y los atajos es exactamente

la misma. Por ejemplo, si queremos mrgenes superior e inferior de 20 pxeles, y laterales de 5 pxeles:

margin : 20 px 5 px ;
Truco del almendruco! Para

que, podemos hacer uso de

auto:

centrar un elemento de blo-

margin : 0 px auto ;
2 Wow!

11.6. CAPAS

65

11.6.

Capas

Vamos a hablar de una etiqueta XHTML que nos qued por ver y est estrechamente ligada con CSS: encarga de crear una

<div>.

Esta etiqueta se

capa, que es un elemento de bloque que sirve semnticamen-

de contenedor a otros elementos de bloque e inline. Para qu nos sirven? Primero, para organizar

te nuestra pgina. El atributo

haramos esto:

queremos poner en la cabecera

3 de nuestra web el ttulo y el men,

id

tiene carga semntica, as que si

< div id = " header " > < h1 > Mi blog </ h1 > < ul id = " menu " > < li > <a href = " ... " title = " ... " > Principal </ a > </ li > < li > <a href = " ... " title = " ... " > Acerca de </ a > </ li > < li > <a href = " ... " title = " ... " > Enlaces </ a > </ li > </ ul > </ div >
El otro uso de las capas es el de

maquetar. Por ejemplo, el

4 y la del pie de pgina.

layout tpico de un blog tiene cuatro capas: la cabecera, la del contenido principal, la de la barra lateral as conseguir el diseo que queramos. Mediante CSS, podemos controlar la disposicin de estas capas, y

11.7.
Los

Floats
oats son probablemente una de las cosas que ms cuesta

dominar. En ingls los calican como tricky . Yo los calico como pequeos cabroncetes. Lo que hacen los

oats es alterar el ujo de la pgina, in-

crustando en l un elemento de bloque. El ejemplo ms tpico es el de si queremos poner una imagen acompaando a un texto, y que el texto envuelva a la imagen. Esto lo conseguimos creando una clase como la siguiente:

. izquierda {
3 Ojo! 4 Muy
Cabecera en cuanto a maquetacin. No tiene nada que ver con la til y socorrida para poner pijadas, como la wishlist de Amazon. Y etiqueta head! si cuela, cuela.

66

CAPTULO 11.

EL MODELO DE CAJA

float : left ;
Podemos indicar tanto

left (izquierda) como right (derecha). clear,

que se encarga de anu-

Fcil, rpido y para toda la familia? No. Despus de un oat, suelen ocurrir desaparecer mediante la propiedad (que signica ambos).

sucesos paranormales5 . La mayora de ellos suelen

lar los oats. Los valores que admiten son

left, right

both

Volviendo al ejemplo de layouts de blogs, lo normal es poner el contenido y la barra lateral mediante oats. Lo que suele pasar es que una de estas dos columnas pasa por encima del pie de pgina, en lugar de quedar el pie al nal de todo. Esto se suele arreglar as:

# footer { clear : both ; }

Buena suerte, y que la Fuerza te acompae.

5 Ya

te dars cuenta, ya.

Captulo 12
Algunos truquitos

He visto cosas que nunca creerais. . . Blade Runner

Roy Batty, replicante

A partir de ahora, los captulos de CSS sern totalmente prcticos. Este primero mostrar diferentes trucos para conseguir ciertas cosas. Asegrate de probarlos y de comprender todos ellos antes de continuar.

12.1.

Links que cambian

sin visitar (normales), hover activos (cuando

Los enlaces tienen tres estados: hacemos clic) y

(cuando pasamos el cursor del ratn por encima), Estos estados se corresponden a

visitados (cuando ya hemos ido a esa direccin). pseudoelementos, y podemos

cambiar la apariencia de los enlaces con CSS. Sin embargo, algunos navegadores tienen un bug que, dependiendo del orden en el que escribamos las reglas, se mostrar el resultado correctamente o no. Cmo lo solucionamos? Pues

LoVe/HAte. Es un mnemotcnico

que nos ayudar a recordar el orden en el que estas reglas funcionan bien en cualquier navegador. Quedara as:

/* links normales */ a : link { text - decoration : none ;

67

68

CAPTULO 12.

ALGUNOS TRUQUITOS

color : #00 a ;

/* visitados */ a : visited { color : # a00 ; } /* hover */ a : hover { text - decoration : underline ; } /* activos */ a : active { font - weight : bold ; }
Lo que hace el cdigo anterior es poner los enlaces de color azul marino y sin subrayado. Cuando pasamos el cursor por encima, aparece el subrayado. Al hacer clic, el texto del enlace se pone en negrita. Los enlaces que ya hemos visitado aparecen de color granate. Fcil, no?

12.2.

Links con el subrayado de diferente color

Al usar la propiedad

text-decoration,

el color de la lnea de

subrayado es el mismo que el del texto del enlace. Podemos hacer un pequeo chanchullo para cambiar esto, y es y poner en su lugar un

quitar el subrayado

borde:

a { color : # fff ; text - decoration : none ; border - bottom : 1 px solid # f0c ; } a : hover { border : none ; }

12.3. CAMPOS DE FORMULARIO CHULOS

69

Esto hara que los enlaces fueran de color blanco, y que la lnea de subrayado fuese fucsia. Al pasar el cursor por encima, se eliminara el subrayado. El pseudoelemento to de la web . No dudes en usarlo en celdas de tablas o capas.

hover funciona para cualquier otro elemen-

12.3.

Campos de formulario chulos

2 es hacer los campos de formula-

Un efecto muy Web 2.0

rio con fuente gigante y que el fondo del campo cambie cuando
el usuario est usndolo. Esto se consigue con el pseudoelemento

focus:

input , textarea { font - size : large ; border : 3 px solid #70 C332 ; color : #666; background : # fff ; } input : focus , text - area : focus { background : # eee ; }
Lo anterior pondra los campos de formulario

input y textarea

con una fuente grande y gris oscura, borde gordito de color verde y el fondo blanco. Al hacer foco (es decir, cuando el visitante est situado en ese campo), el fondo cambia a un color gris clarito.

12.4.

Blockquotes 2.0
blockquotes con texto gigante y

Otro legado de la Web 2.0:

unas comillas gigantes. Quizs es algo difcil de imaginar con esta descripcin, pero si echas un vistazo a la gura 12.1, seguro que ya lo has visto en algn sitio antes. Un ejemplo de cdigo podra ser este:

blockquote {
1A 2 Es
no ser que uses una versin antigua de un navegador subdesarrolladecir, pijo. do. . . S, ese.

70

CAPTULO 12.

ALGUNOS TRUQUITOS

Figura 12.1: Blockquote moln

background : url ( comillas . gif ) top left ; background - repeat : no - repeat ; text - indent : 30 px ; text - align : left ; font - size : x - large ; padding : 0 px
Tendrs que ajustar los valores segn la fuente y la imagen en

s. En muchos casos, es ms conveniente utilizar padding y quitar el indentado.

12.5.

Cambiar texto por imagen

Muchas veces, especialmente en headings, queremos cambiar el texto y en su lugar que aparezca una imagen bonita. Un ejemplo del cdigo sera este (suponiendo que nuestra imagen mide 300x100 pxeles):

<! -- XHTML -- > < h3 id = " enlaces " > < span > Enlaces </ span > </ h3 > /* CSS */ h3 # enlaces { width : 300 px ; height : 100 px ; padding : 0 px ; background : url ( links . png ) top left no - repeat ; } h3 span { visibility : hidden ;

12.5. CAMBIAR TEXTO POR IMAGEN

71

}
La etiqueta

span

es nueva, y no signica nada (literalmente).

Es una etiqueta vaca, y slo la usamos para conseguir ciertos efectos CSS. Como semnticamente no tiene ningn valor, hemos de evitar su uso todo lo posible. Lo que hace el cdigo anterior es hacer coincidir las dimensiones de

<h1>

con las de la imagen. Despus, gracias al

<span>

nos

encargamos de que el texto del heading sea

invisible. No obstante,

aunque el texto sea invisible, todava existe. Por eso, si el ttulo es muy largo, es posible que sea ms grande que la imagen que usamos de fondo, y es posible que nos descoloque el layout. En este caso, puedes cambiar la fuente de

<h1>

y hacerla enana.

Captulo 13
Layout tableless a dos columnas

La frase cientca ms excitante, la que precede a grandes descubrimientos, no es Eureka!, sino Qu raro.
Isaac Asimov, bioqumico y escritor

En este captulo veremos cmo crear un layout sin tablas a dos columnas, muy tpico en los blogs. Es bastante sencillo de seguir, y es un ejemplo de que dejar de usar tablas para maquetar no tiene por qu ser un proceso doloroso.

13.1.

Caractersticas

Esta maquetacin tiene las siguientes propiedades: Anchura ja Centrado 2 columnas (una de ellas de barra lateral) Cabecera (header ) Pie de pgina (footer ) Puedes echarle una ojeada en la gura 13.1. 73

74 CAPTULO 13.

LAYOUT TABLELESS A DOS COLUMNAS

Figura 13.1: Layout de 2 columnas

13.2.

Cdigo XHTML

El esqueleto del cdigo XHTML de nuestra pgina es el siguiente (ira dentro del

<body>):

< div id = " container " > < div id = " header " > < h1 > Ttulo </ h1 > < h2 > Subttulo </ h2 > </ div > < div id = " sidebar " > < h3 > Seccin </ h3 > <p > Bla bla ... </ p > </ div > < div id = " main " > < h3 > Seccin </ h3 > <p > Contenido principal </ p > </ div > < div id = " footer " > <p > Pie de pgina </ p > </ div >

13.3. #CONTAINER

75

</ div >

Como ves, tenemos cuatro capas. Ahora veremos el cdigo CSS de cada una de ellas.

13.3.

#container
contenedor para el resto de la pgina. Esta-

Esta capa es un est en usar

blece la anchura de todo y es la que centra el contenido. El truco

auto

dentro de en el

margin

para lograr el centrado. Es-

to no funciona en el IE, as que tendremos que echar mano de

text-align: center

body.

El CSS completo es este:

body { text - align : center ; } # container { width : 700 px ; margin : 0 px auto ; text - align : left ; }
13.4. #sidebar
barra lateral tan famosa en los blogs. En otras

Esta es la

pginas web, podemos poner ah mens, publi, o cualquier otra cosa. La clave en esta capa es usar el cdigo:

float: left,

que la sita a la

izquierda y hace que todos los dems elementos la rodeen. Aqu va

# sidebar { width : 200 px ; padding : 10 px ; float : left ; }

El

padding

no es obligatorio, pero lo he puesto para despus

poder explicar bien la siguiente capa. Tambin es necesario especicar el

ancho en pxeles. Ah, con este mtodo la barra no se extender hasta abajo, sino que se corta en su nal (esto se ve

76 CAPTULO 13.

LAYOUT TABLELESS A DOS COLUMNAS

bien en la gura 13.1). Si pones la barra de otro color, y quieres que llegue hasta abajo, puedes usar la tcnica de

Faux Columns1 .

13.5.

#main
contenido (en un blog, esto seran

Esta es la capa donde ir el la

los posts). Lo importante en esta capa es indicar con

distancia desde el borde del

#container

margin-left

hasta esta capa, pa-

sando por encima de la barra lateral. Nuestra barra lateral tiene 200 pxeles de ancho y 10 pxeles de padding a la izquierda y a la derecha. Si hacemos memoria del

modelo de caja, el margen izquierdo que tenemos que indicar seran 200 + 10 + 10 + X, donde X es la cantidad que nosotros
queremos dejar de separacin entre la barra lateral y el contenido principal. Para el ejemplo, pondremos 5 pxeles:

# main { margin - left : 225 px ; }

13.6. #footer
pie de pgina viene bien para poner informacin 2 o cualquier otro tipo de datos miscelneos.

La capa del

de copyright/copyleft

Aqu nicamente hemos de tener cuidado de anular el que tiene la barra lateral mediante un

clear:

oat

# footer { clear : both ; }

Ya tenemos nuestro propio layout tablas que cumple los estndares del W3C!

1 http://www.alistapart.com/articles/fauxcolumns/
la columna.

Es un chanchullo sen-

cillo e ingenioso. Bsicamente consiste en poner una imagen de fondo que simule

2 Recordad, chicos, las licencias Creative Commons son buenas para la salud

y para el karma.

Captulo 14
Cabeceras

Su carencia de fe resulta molesta. A New Hope

Darth Vader, sith

Una de las cosas muy tiles que se han puesto de moda, es hacer que la cabecera de una web sea a su vez un enlace hacia la seccin principal de una web. El hecho de que si nos perdemos tengamos un enlace bien gordo arriba del todo, es un salvavidas.

14.1.

Cdigo XHTML

Los estndares nos dicen que el pone con la etiqueta

<h1>. No obstante, el texto de esta etiqueta lo <a>.

Dentro del link, metemos para poder ocultar con CSS el texto y que

ttulo principal de la pgina se

cambiaremos por una imagen. Como queremos adems meterle un link, tambin usaremos la etiqueta una etiqueta

<span>

slo se vea la imagen que har de cabecera. . . pero nos estamos adelantando. El cdigo XHTML sera este:

< div id = " header " > < h1 > <a href = " ... " title = " ... " > < span > Ttulo </ span > </ a > </ h1 > </ div >

77

78

CAPTULO 14.

CABECERAS

14.2.

#header

Primero tocaremos el CSS de la capa

#header. Establecemos el

ancho y el alto de la capa con las medidas que tenga la imagen

(400x100 en este caso). Adems, ponemos la imagen de fondo y quitamos el margin y el padding:

# header { background : url ( bg . png ) top left no - repeat ; width : 400 px ; height : 100 px ; margin : 0 px ; padding : 0 px ;

14.3.

El heading

Tambin quitamos los mrgenes a la etiqueta contenido de la etiqueta

<h1>

(para que

la capa mida exactamente lo que la imagen) y hacemos invisible el

<span>,

para que el texto de la cabecera

slo se muestre en navegadores de texto o aurales:

# header h1 { margin : 0 px ; } # header a span { visibility : hidden ; }

14.4.

El enlace

Ahora slo nos falta la etiqueta es que se pueda hacer clic en

<a>. Lo que queremos conseguir

todo el rea de la cabecera, no slo elemento de bloque, y darle las

en lo que sera el texto (invisible) del enlace. Para eso, tenemos que transformar el enlace en un medidas de la imagen. Adems, hemos de quitar los mrgenes y el padding, as como la decoracin del texto, para que no salga una lnea de subrayado:

# header a { width : 400 px ;

14.4. EL ENLACE

79

height : 100 px ; display : block ; padding : 0 px ; margin : 0 px ; text - decoration : none ;

Et voil! Ya tenemos nuestra cabecera cuca con enlace incor-

porado.

Captulo 15
Listas personalizadas

La Red es una prdida de tiempo. Y eso es precisamente lo que est bien.

William Gibson, escritor

Ahora vamos a aprender cmo modicar las listas desordenadas para que tengan vietas personalizadas. Para ello, necesitaremos una imagen pequeita que haga de vieta. En Internet hay muchsimas para descargar, aunque puedes dibujar las tuyas propias. Supondremos que la imagen se llama

bullet.png.

15.1.

Cdigo XHTML

Extremadamente simple. Se trata de una lista sin ordenar, sin ms misterio:

< ul > < li > Sonata Arctica </ li > < li > Nightwish </ li > < li > HIM </ li > </ ul >
15.2. La lista

Ahora la parte de CSS. Disponemos de una propiedad que se llama

list-style-image,

pero da problemas con ciertas medidas 81

82

CAPTULO 15.

LISTAS PERSONALIZADAS

de vietas. As que tenemos que guarrear un poco el cdigo. Para el elemento

ul

sera:

ul { padding - left : 10 px ; margin - left : 10 px ; list - style - type : none ; }

Lo ms importante es el El

list-style-type: none,

que se en-

carga de quitar esas vietas feas que pone el navegador por defecto.

padding

y el

margin

es para sangrar la lista (puedes poner los

valores que quieras, o incluso quitarlos).

15.3.

Los tems

Ya slo queda poner nuestra vieta! Para ello, modicamos el estilo de los

li

que estn en listas desordenadas:

ul li { padding - left : 12 px ; background : url ( bullet . png ) 0 em 0.5 em no - repeat ; margin - bottom : 1 em ; }
Lo primero que vemos es el padding por la izquierda. Esto no es el sangrado, es una distancia de relleno que ponemos para que el texto del tem no est encima de la vieta. Este valor lo tienes que modicar dependiendo de las dimensiones de la imagen de tu vieta. Despus, nos encontramos con la propiedad

background.

Des-

pus de establecer la imagen, debemos indicar en qu eta. Aqu hay truco! Como ves, trabajamos con

posicin

(recuerda: primero horizontal, luego vertical) se encuentra la vi-

em y no con

medidas absolutas en pxeles. Por qu? Porque as nos vale para cualquier tamao del texto . Lgicamente, es muy difcil dar con el valor correcto a la primera, as que habr que probar varias veces hasta topar con el que mejor quede. Ah, no se nos puede olvidar el

no-repeat

para evitar el

Por ltimo,

margin-bottom

mosaico.
se encarga de establecer la

sepa-

racin entre un tem y otro de la lista.

1 Recuerda
que 1em equivale a la anchura de la letra M.

15.3. LOS TEMS

83

Muy sencillo, no?

Captulo 16
Mens verticales

Dije que era un adicto. No dije que tena un problema. House M.D.
Greg House, mdico

Sabas que con listas se pueden hacer los? Que

mens verticales chupor qu listas? Porque un men vertical es una serie

de elementos relacionados, y lo ms semntico que podemos hacer es meterlo en una lista. El principal problema es que las listas son feas. En el captulo anterior vimos cmo hacerlas ms bonitas, pero quizs queramos algo un poco ms diferente para nuestro men. CSS nos da la solucin, as que ya no tendrs excusa para hacer un men en Flash . En el men que haremos ahora, hacemos apaos con los colores de fondo y los bordes para conseguir efectos cuando el ratn pase por encima. Puedes ver cmo quedara en la gura 16.1. Como va con CSS, podramos fcilmente incorporar imgenes, pero eso queda como ejercicio .

1 Que, 2 No

por cierto, es de lo peor que se te podra ocurrir. Si alguien no tiene

instalado el plugin de Flash (nunca des por supuesto que el vistante tenga instalado un plugin), ni siquiera podr navegar por tu pgina. tiene gracia si te lo dan todo mascadito.

85

86

CAPTULO 16.

MENS VERTICALES

Figura 16.1: Men vertical

16.1.

Cdigo XHTML

Al grano, necesitamos una lista tal que as:

< div id = " menu " > < ul > < li > <a href = " ... " < li > <a href = " ... " < li > <a href = " ... " < li > <a href = " ... " </ ul > </ div >

title = " ... " > Home </ a > </ li > title = " ... " > Archivos </ a > </ li > title = " ... " > Enlaces </ a > </ li > title = " ... " > Acerca de </ a > </ li >

16.2.

La lista

A meterle mano al CSS! Empezaremos primero con darle la

anchura que queramos a la lista (que ser la anchura del men), poner una fuente maja y quitar las vietas y mrgenes de la
lista.

# menu ul { list - style - type : none ; margin : 0 px ; padding : 0 px ; width : 200 px ; font - family : Arial , sans - serif ; font - size : 11 pt ; }

16.3. ENLACES

87

lista (<li>). Lo normal sera poner aqu los efectos de

Ponemos a continuacin un

color de fondo para los tems de la

hover, para

que se activen cuando el ratn pase por encima de todo el bloque, no slo del texto del enlace; pero Quien-T-Sabes en sus versiones 6 e inferiores no soporta hovers en cosas que no sean un enlace, as que vamos a tener que emplear una artimaa ms adelante. Por ahora, el CSS para el elemento

li

sera as de sencillo:

# menu ul li { background - color : #666; }

16.3.
3

Enlaces
bloque, y as ocupar

Y aqu viene el chanchullo del que os hablaba antes para hacer el hover : poner el enlace como si fuera un todo el

li

y podremos manipular sus dimensiones.

# menu ul li a { color : # ccc ; text - decoration : none ; text - transform : uppercase ; display : block ; padding : 10 px 10 px 10 px 20 px ; }
Slo nos queda hacer los cambios para el

hover:

# menu ul li a : hover { background : #000; border - left : 10 px solid #333; color : # fff ; }
Si lo pruebas, vers que las letras se desplazan al hacer el hover, debido a que aparece el borde izquierdo. Si no os gusta este efecto, podis aadir la lnea siguiente al link cuando est normal. Lo que hace es poner un borde del mismo color que el fondo de los as parece que no existe:

li,

border - left : 10 px solid #666;

3 Haz
memoria: es lo mismo que empleamos en un captulo anterior para poner un enlace en la cabecera de la web.

88

CAPTULO 16.

MENS VERTICALES

Merece la pena trastear con esta tcnica, puede dar lugar a mens muy logrados.

Apndice A
Por qu en IE se ve bien y en Firefox se ve mal

Slo hay dos cosas innitas: el Universo y la estupidez humana, y no estoy muy seguro acerca del primero.
Albert Einstein, fsico

Un da una amiga me coment que una compaera suya estaba

en el Explorer se ve bien y en Firefox mal , y me pregunt que a qu podra ser debido. Le di una
haciendo una web, y que respuesta deprisa y corriendo y creo que no me expres bien, as que aqu va la full version. La comparto aqu con vosotros porque seguramente nos esperen muchas ms preguntas de este estilo. La clave para entenderlo bien es darle la vuelta a la tortilla. La realidad es que en IE se ve mal, y en

el resto de los navegadores (no slo Firefox) se ve bien. Pongo bien y mal
entre comillas, porque son apreciaciones que hacemos los humanos, subjetivas. Los navegadores

no son adivinos con bolas de cristal que se

conectan a la mente del maquetador web e interpretan su voluntad. El maquetador tiene que dejar escrito, detalladamente, el contenido y apariencia de la pgina web: esto se consigue con los lenguajes XHTML y CSS. Estos lenguajes se encuentran bien denidos como

estndar

en el WWW Consortium (W3C para los colegas). Este organismo 89

APNDICE A. 90

POR QU EN IE SE VE BIEN Y EN FIREFOX SE VE MAL

se encarga de describir con precisin cmo deben interpretar el XHTML y el CSS los navegadores. Ahora bien, los navegadores no siempre cumplen a pies juntillas lo que dice el W3C. Es ms, cierto navegador

1 no hace ni puto caso.

Pongamos un ejemplo cticio: imaginemos que el Explorer confunde los colores rojo y blanco, y los intercambia, debido a un error de programacin (no entraremos a valorar si por descuido o deliberadamente). Es decir, que donde pone

#f00,

#fff

IE lo interpreta como

y viceversa. En este ejemplo, supondremos que el resto de

navegadores interpretan los colores correctamente. Qu pasara si quisiramos hacer una pgina web con fondo blanco? En nuestro cdigo CSS, pondramos algo as. . .

body { background : # f00 };

. . . que en IE se mostrara blanco. Entonces cuando vamos alegremente a mirar la web con otros navegadores, vemos que se muestra de color rojo fosforito. En Firefox se ve mal . Pues no. Por mucho que se empee el Explorer en hacer creer a los desarrolladores web, el nmero

#f00

signica rojo, y prou.

Lo que ha pasado es que una pgina se ha (a menudo inconscientemente) para rrectamente, pero por

desarrollado mal forzar a que se vea bien en

IE. Lo que obtenemos es que en IE la pgina se visualiza inco-

casualidades msticas, esa visualizacin

coincide con los deseos del diseador. Un caso real y muy grco de cmo IE visualiza mal las pginas lo podemos encontrar en el

Acid Test2 . Es un ejemplo de

pgina web que construye mediante cdigo estndar y vlido un dibujito de una cara sonriente. Segn lo bien programado que est el navegador, veremos ese dibujo ms o menos bien. Los nicos navegadores mayoritarios que lo muestran correctamente son

Safari (Mac), Konqueror (GNU/Linux) y Opera

(multiplataforma). Firefox se queda a medio camino, pero lo de Internet Explorer clama al cielo. En resumen, lo ms fcil para que una web se vea ms o menos bien en todos los navegadores es podamos para Internet Explorer.

hacerla primero para Firefox

o cualquier otro navegador, y luego apaarla como buenamente

1 Quien-T-Ya-Sabes 2 http://www.webstandards.org/les/acid2/test.html

Apndice B
Migracin rpida a XHTML

Bienvenido al Mundo Real. The Matrix

Morfeo, capitn de la Nabucodonosor

Si ya usabas

HTML 4,

puedes aprender muy rpido XHTML,

puesto que las bases son las mismas. Slo hay que tener en cuenta

se centra en el contenido y en la semntica. En lugar de usar una etiqueque XHTML deja de lado todo aspecto esttico y ta para dar un aspecto concreto, usamos etiquetas para hacer que las palabras signiquen una cosa u otra. Ahora veremos una serie de reglas a seguir para pasarnos a XHTML. Tambin es recomendable leer el captulo 2, donde se explica la estructura de un documento XHTML. Evidentemente, no se muestran aqu todas las diferencias, pero sirve para hacernos una idea de qu es lo que nos espera .

B.1.

Minsculas y comillas, por favor

Antes era una prctica muy comn escribir las etiquetas en mayscula, para diferenciarlas del cdigo. Por compatibilidad con XML, en XHTML todas las etiquetas deben ir en minsculas.

1 Diego

Lafuente, aka Mini-D, ha escrito artculos muy buenos en su blog

sobre el tema. Destaca el post titulado 13 pasos para dar el salto . Podis encontrarlo en

www.minid.net

91

92

APNDICE B.

MIGRACIN RPIDA A XHTML

Adems, todos los atributos tienen que estar entre comillas dobles. Por ejemplo, si antes tenamos:

< IMG SRC = icono . gif ALT = Icono >

Ahora escribimos:

< img src = " icono . gif " alt = " Icono " / >
B.2. Todas las etiquetas se cierran

Con HTML podamos crear prrafos con la etiqueta necesidad de cerrarla con ejemplo. En XHTML

</p>.

Lo mismo ocurra con

<p> sin <li>, por

ninguna etiqueta puede quedar sin ce-

rrar.
Lo de ninguna es literal, y etiquetas que no tienen una de cierre, como

<img>, <br>

deben ser cerradas tambin. Cmo lo

hacemos? Insertando la barra ahora nos queda

<br />.

/,

de forma que el salto de lnea

El espacio en blanco que hay entre el

nombre y la barra es necesario para que los navegadores antiguos reconozcan la etiqueta.

B.3.

FONT y ciertos atributos desaparecen

Hemos dicho que XHTML deja de lado la apariencia del documento, ya que eso es controlado por CSS. Entonces, las etiquetas

<font>

<basefont>

carecen de sentido.

Adems, esos atributos de algunas etiquetas que hacen referencia al

color de las cosas, imgenes de fondo, etc. tambin des-

aparecen por este motivo: son sustituidos por reglas CSS. As que

saynara a

bgcolor y compaa. Lo mismo para el atributo align

usado en prrafos e imgenes.

B.4.

B y amigos tambin se van

Ciertas etiquetas de formato, como

<b> (negrita), <i> (cursiva), <strong>.

Los navegadores

etc. ya no se usan porque hacen referencia exclusivamente a la

apariencia de las palabras. Si queremos dar nfasis, utilizamos

<em>,

y para dar nfasis ms fuerte

suelen mostrarlas como cursiva y negrita, respectivamente, aunque esto es lo de menos porque podemos cambiarlo con CSS.

B.5. HAY QUE USAR ALT Y TITLE

93

B.5.

Hay que usar alt y title

accesibilidad de un documento, y

XHTML hace hincapi en la La etiqueta

por eso debemos facilitar atributos de apoyo a algunas etiquetas.

<img> dispone del atributo alt, que se muestra cuando

la imagen no se puede cargar (a veces tambin cuando se pasa el cursor del ratn por encima). Hay que utilizarlo siempre. Existe un atributo muy similar llamado la etiqueta

<a>

title, que se utiliza en

(entre otras) y sirve para mostrar una descripcin

del sitio al que nos dirigimos. Por ejemplo:

<a href = " http :// www . google . es " title = " Buscador " > Google </ a >

B.6.

Cuidado al anidar etiquetas

anidacin de etiquetas. block y los inline.

XHTML es muy estricto en cuanto a la

Bsicamente, hay dos tipos de elementos: los

Los block son etiquetas como prrafos, headings, listas, etc. As a ojo los distinguimos porque siempre van solos e insertan saltos de lnea. Los inline no interrumplen el ujo del texto. Son las eti-

No podemos meter un elemento block dentro de uno inline.

quetas de formato, los enlaces, y dems. Por ejemplo, si queremos hacer que el heading principal de nuestra pgina sea un enlace, esto sera

incorrecto:

<a href = " .. " title = " ... " > < h1 > Texto </ h1 > </ a >
Hay que hacerlo as:

< h1 > <a href = " ... " title = " ... " > Texto </ a > </ h1 >
Adems, hay ciertas etiquetas que no admiten otras dentro. Si tienes dudas, lo mejor es utilizar el Consortium .

validador de cdigo del WWW

B.7.

No existen los frames

Aunque la especicacin XHTML 1.0 Frameset permite el uso de frames (marcos) en una pgina, tanto la Transitional como la

2 http://www.w3c.org

94

APNDICE B.

MIGRACIN RPIDA A XHTML

Strict los prohben . As que ya no podemos usar

ni frames ni

inline frames.
De todos modos, aunque se pudieran emplear, no deberamos, ya que los frames son un atentado contra la usabilidad .

B.8.

No se puede utilizar target

Antes, la etiqueta

<a>

tena un parmetro llamado

target

que

permita especicar en qu frame deba cargarse el destino de un link. Como ya no hay frames, este atributo es innecesario. A los amantes del

target="blank" para abrir webs en ventanas

5 es bastante molesto que se abran nuevas

nuevas les digo que si el visitante quiere abrir un ventanuco nuevo, lo har con el botn derecho del ratn. Y para los que usamos navegacin con pestaas instancias del navegador. Gracias.

B.9.

Las tablas no se usan para maquetar

Aunque puedes crear un documento XHTML con tablas para maquetar que pase el anlisis del validor del W3C, va contra la losofa de dejar XHTML slo para el contenido. Las tablas estn hechas para representar layouts. De todos modos, el paso para un layout

informacin tabulada, no para disear

tableless no suele ser

fcil, as que creo que es conveniente familiarizarse primero con el resto de XHTML y CSS, y dejar la maquetacin sin tablas para ms tarde .

B.10.

Los ampersands dan por saco

ampersand (&), te llevars

Si tienes URL's que contengan el debido a las

la sorpresa de que el validador del W3C se pelea con ellas. Esto es

entities.

3 En
compra.

realidad esto es como la Cherry Coke. Existir, existe, pero nadie la

4 Y a Google no le gustan, de paso. 5 Ahora mismo prcticamente toda la 6 Tarde

no signica nunca.

humanidad con acceso a Intenet, ya

que la nueva versin del Maligno por n las trae

B.10. LOS AMPERSANDS DAN POR SACO

95

Qu demonios son? Pues la manera que tenemos de insertar caracteres de forma segura . Por ejemplo, el carcter ra

&aacute;.

se escribi-

Como ves, las entities comienzan por un ampersand

y acaban en punto y coma. Por eso, cuando se leen las URLs que contienen ampersands, hay confusin porque lo que sigue no es una entity. . . As que lo que tenemos que hacer es sustituir el ampersand por su propia entity, que es

&amp;.

Es decir, que esta URL:

http :// alianza . net / p . php ? nick = leia & show = all
Se quedara en:

http :// alianza . net / p . php ? nick = leia & amp ; show = all
Aunque hemos estado hablando de URL's, tambin debemos emplear la entity

&amp; en nuestro texto normal y corriente cuando

queramos escribir un ampersand.

7 Es

decir, que se vean cuando usamos una codicacin muy limitada, como

el ASCII estndar. Si usamos Unicode no deberamos tener ningn problema.

Apndice C
A favor del Unicode

Un idiota no se curar hasta que se muera. Proverbio japons

A la hora de almacenar archivos de texto, podemos elegir entre bastantes

codicaciones, que viene a ser qu numerito (y de qu

tamao en bits) se asigna a cada carcter. Qu es lo que pasa cuando abrimos un archivo en una codicacin (por ejemplo, la Shift-JIS que es una japonesa) y le decimos que la lea con otra (la ISO 8850-1, de caracteres latinos)? Pues que obtenemos un motn de plo, cuando alguien me enva un trackback distinta a la que uso en el blog. Pero qu pasa si se quiere hacer un documento

smbolos extraos. Esto pasa, por ejem1 con una codicacin multilinge

con distintos alfabetos? Qu pasa si desde una aplicacin quiero leer cualquier documento en cualquier lengua? Para esto existe una Sacado de su web :

codicacin de caracteres estndar, que es la Unicode. 2

Unicode proporciona un nmero nico para cada carcter, sin importar la plataforma, ni el programa, ni la lengua.

1 Los

trackback son un tipo especial de comentarios en los blogs. Cuando

alguien de otro blog te enlaza al tuyo, si te manda un trackback, aparecer en tu post un comentario con la URL del blog de la otra persona. Es til para saber quin habla sobre cosas que has dicho.

2 http://www.unicode.org

97

98

APNDICE C.

A FAVOR DEL UNICODE

Existen varios formatos de Unicode, el ms usado es el

UTF-8

y est bastante extendido en la Red. De hecho, en la blogosfera hispana las dos codicaciones ms usadas son la ISO 8859-1 y la UTf-8. Usar Unicode es bueno y es la codicacin la.

estndar. Usad-