Documentos de Académico
Documentos de Profesional
Documentos de Cultura
Licencia
Esta obra est bajo una licencia Reconocimiento-NoComercial-
CompartirIgual 2.5 Espaa de Creative Commons. Para ver una
copia de esta licencia, visite la pgina de la licencia1 o enve una
carta a Creative Commons, 559 Nathan Abbott Way, Stanford,
California 94305, USA.
Resumen de la licencia:
1 http://creativecommons.org/licenses/by-nc-sa/2.5/es/
XHTML + CSS
de una maldita vez!
3 de diciembre de 2006
1
ndice general
Licencia . . . . . . . . . . . . . . . . . . . . . . . . . . . . i
ndice general 2
1 Introduccin 7
1.1. Qu es el XHTML? . . . . . . . . . . . . . . . . . . 8
1.2. Y eso de CSS? . . . . . . . . . . . . . . . . . . . . . 8
1.3. Cmo funciona el XHTML? . . . . . . . . . . . . . 8
1.4. Pero para hacer webs no se usa el FrontPage? . . . 9
1.5. Mi amigo que es diseador usa Dreamweaver . . . . 9
1.6. Una preguntilla. . . . . . . . . . . . . . . . . . . . . . 10
I XHTML 11
2 Estructura XHTML 13
2.1. La codificacin . . . . . . . . . . . . . . . . . . . . . 13
2.2. El DOCTYPE . . . . . . . . . . . . . . . . . . . . . 14
2.3. El elemento raz (HTML) . . . . . . . . . . . . . . . 15
2.4. La cabecera (HEAD) . . . . . . . . . . . . . . . . . . 15
2.5. El cuerpo (BODY) . . . . . . . . . . . . . . . . . . . 16
2.6. La plantilla . . . . . . . . . . . . . . . . . . . . . . . 16
3 Etiquetas bsicas 17
3.1. Prrafos . . . . . . . . . . . . . . . . . . . . . . . . . 17
3.2. Saltos de lnea . . . . . . . . . . . . . . . . . . . . . 18
3.3. Los ttulos (headings) . . . . . . . . . . . . . . . . . 18
3.4. Citas . . . . . . . . . . . . . . . . . . . . . . . . . . . 19
3.5. Separadores horizontales . . . . . . . . . . . . . . . . 20
3.6. Comentarios . . . . . . . . . . . . . . . . . . . . . . . 20
2
3
4 Enlaces 21
4.1. Enlace a una pgina externa . . . . . . . . . . . . . . 21
4.2. Enlace a una pgina local . . . . . . . . . . . . . . . 22
4.3. Enlace a una direccin de e-mail . . . . . . . . . . . 22
4.4. Anclas . . . . . . . . . . . . . . . . . . . . . . . . . . 23
5 Listas 25
5.1. Listas ordenadas . . . . . . . . . . . . . . . . . . . . 25
5.2. Listas sin ordenar . . . . . . . . . . . . . . . . . . . . 26
5.3. Listas de definicin . . . . . . . . . . . . . . . . . . . 26
5.4. Listas anidadas . . . . . . . . . . . . . . . . . . . . . 27
6 Imgenes 29
6.1. Insertar una imagen . . . . . . . . . . . . . . . . . . 29
6.2. Imgenes como links . . . . . . . . . . . . . . . . . . 30
6.3. Sobre el uso y abuso de imgenes . . . . . . . . . . . 31
7 Tablas 33
7.1. Una tabla bsica . . . . . . . . . . . . . . . . . . . . 33
7.2. Atributos de table . . . . . . . . . . . . . . . . . . . 34
7.3. Expandir filas y columnas . . . . . . . . . . . . . . . 35
7.4. Tablas para layouts? Insensato! . . . . . . . . . . . 36
8 Formularios 39
8.1. La etiqueta FORM . . . . . . . . . . . . . . . . . . . 39
8.2. Campos de texto . . . . . . . . . . . . . . . . . . . . 40
8.3. Campos de contrasea . . . . . . . . . . . . . . . . . 41
8.4. Etiquetar campos . . . . . . . . . . . . . . . . . . . . 41
8.5. reas de texto . . . . . . . . . . . . . . . . . . . . . 42
8.6. Casillas de verificacin . . . . . . . . . . . . . . . . . 43
8.7. Botones de seleccin . . . . . . . . . . . . . . . . . . 44
8.8. Listas de seleccin . . . . . . . . . . . . . . . . . . . 45
8.9. Botones de enviar y reestablecer . . . . . . . . . . . 46
II CSS 47
9 Introduccin al CSS 49
9.1. Dnde escribo el cdigo CSS? . . . . . . . . . . . . 49
9.2. Vale, pero cmo funciona? . . . . . . . . . . . . . . 50
4 NDICE GENERAL
9.3. Selectores? . . . . . . . . . . . . . . . . . . . . . . . 50
9.4. Qu significa eso de cascading? . . . . . . . . . . . 51
9.5. Puedo poner comentarios? . . . . . . . . . . . . . . 52
9.6. Por qu #fff significa blanco? . . . . . . . . . . . . 52
11 El modelo de caja 61
11.1. Cmo es el modelo de caja? . . . . . . . . . . . . . 61
11.2. Ancho y alto . . . . . . . . . . . . . . . . . . . . . . 62
11.3. Padding . . . . . . . . . . . . . . . . . . . . . . . . . 63
11.4. Bordes . . . . . . . . . . . . . . . . . . . . . . . . . . 63
11.5. Mrgenes . . . . . . . . . . . . . . . . . . . . . . . . 64
11.6. Capas . . . . . . . . . . . . . . . . . . . . . . . . . . 65
11.7. Floats . . . . . . . . . . . . . . . . . . . . . . . . . . 65
12 Algunos truquitos 67
12.1. Links que cambian . . . . . . . . . . . . . . . . . . . 67
12.2. Links con el subrayado de diferente color . . . . . . . 68
12.3. Campos de formulario chulos . . . . . . . . . . . . . 69
12.4. Blockquotes 2.0 . . . . . . . . . . . . . . . . . . . . . 69
12.5. Cambiar texto por imagen . . . . . . . . . . . . . . . 70
14 Cabeceras 77
14.1. Cdigo XHTML . . . . . . . . . . . . . . . . . . . . 77
14.2. #header . . . . . . . . . . . . . . . . . . . . . . . . . 78
14.3. El heading . . . . . . . . . . . . . . . . . . . . . . . . 78
14.4. El enlace . . . . . . . . . . . . . . . . . . . . . . . . . 78
5
15 Listas personalizadas 81
15.1. Cdigo XHTML . . . . . . . . . . . . . . . . . . . . 81
15.2. La lista . . . . . . . . . . . . . . . . . . . . . . . . . 81
15.3. Los tems . . . . . . . . . . . . . . . . . . . . . . . . 82
16 Mens verticales 85
16.1. Cdigo XHTML . . . . . . . . . . . . . . . . . . . . 86
16.2. La lista . . . . . . . . . . . . . . . . . . . . . . . . . 86
16.3. Enlaces . . . . . . . . . . . . . . . . . . . . . . . . . 87
Introduccin
Este manual cubre cmo crear pginas web usando las tecnolo-
gas estndares recomendadas por el World Wide Web Consor-
tium1 . No son necesarios conocimientos previos, as que lo nico
que necesitas es:
7
8 CAPTULO 1. INTRODUCCIN
1.1. Qu es el XHTML?
XHTML significa eXtensible HyperText Markup Language y
es la versin modernizada del tradicional HTML4 . Si ya conoces
HTML, al final del manual hay un apndice para que sea ms fcil
la migracin a XHTML.
XHTML es un lenguaje semntico, lo que quiere decir que no
definimos el aspecto de las cosas, sino lo que significan. 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 nues-
tras pginas, pero eso es tarea de las hojas de estilo CSS, no del
XHTML.
obtienes).
10 CAPTULO 1. INTRODUCCIN
9 http://www.google.com
Parte I
XHTML
11
Captulo 2
Estructura XHTML
Prlogo de A=B
Donald Knuth, cientfico de la
computacin
2.1. La codificacin
La primera lnea que debemos tener en un documento XHTMl
es la que marca la codificacin. Qu es esto? Simplemente el
formato en el que se guardan los caracteres en el archivo. La codi-
ficacin estndar es la Unicode (utf-8)1 y soporta caracteres de
todas las lenguas: occidentales, griegos, chinos, rabes, japoneses,
coreanos. . . )
Asegrate de que el editor de textos que uses te guarda el ar-
chivo en formato Unicode (normalmente es una opcin a elegir en
el cuadro de dilogo de Guardar como).
1 Existen multitud de codificaciones, en su mayora Criaturas del Mal. De-
13
14 CAPTULO 2. ESTRUCTURA XHTML
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-
mento, antes que ninguna otra. Lo que pasa es que da problemas
si trabajamos con PHP3 . Si usas PHP, la etiqueta que marca el
inicio del script puede ser <?, as que los navegadores se hacen un
lo. La solucin? Podemos omitir esa lnea del principio y decla-
rar la codificacin dentro de la seccin head (ahora veremos
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 blanco4 . En realidad podramos escribir todo el archivo XHTML
en una sola lnea. O cada palabra en una lnea diferente.
2.2. El DOCTYPE
Lo siguiente que toca es indicar el DOCTYPE. Se encarga
de decirle al navegador qu demonios contiene el archivo que es-
t abriendo. Nosotros usaremos la especificacin XHTML 1.0
Strict, que es esta:
<! DOCTYPE html PUBLIC " -// W3C // DTD XHTML 1.0 Strict // EN "
" http :// www . w3c . org / TR / xhtml1 / DTD / xhtml1 - strict . dtd " >
Lengua Cdigo
castellano es
cataln ca
gallego gl
euskera eu
ingls en
francs fr
alemn de
japons ja
Cuadro 2.1: Cdigos de lenguas
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 " >
Etiquetas bsicas
Disidente!
La Vida de Brian
Frente Popular de Judea,
revolucionarios
3.1. Prrafos
Los prrafos sirven para estructurar el contenido. En la
web funcionan igual que en el Mundo RealTM : contienen una o
ms frases relacionadas entre s. Para crear un prrafo, metemos
texto entre las etiquetas <p> y </p>. Un ejemplo1 :
<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 >
17
18 CAPTULO 3. ETIQUETAS BSICAS
3.4. Citas
Existen tres etiquetas para poder escribir citas: <blockquote>,
<q> y <cite>. Mientras que <blockquote> y <q> se usan para
escribir la cita en s (las frases), <cite> se emplea para marcar el
origen (persona, libro, cancin o lo que sea).
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.
<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 clarificador:
<p > Aqu os dejo un fragmento de la cancin
< cite > Die for Rock n Roll </ cite > , de Dover : </ p >
< hr / >
3.6. Comentarios
Los comentarios son notitas que ponemos en el cdigo fuente
de una pgina, pero que no se muestran en pantalla. Para el na-
vegador, son invisibles. Son tiles para indicar qu hacen ciertas
partes del cdigo. Para insertar un comentario, lo escribimos entre
<!-- y -->. Ten en cuenta que el comentario tiene que estar en
una sola lnea.
<! -- Esto es un comentario -- >
Captulo 4
Enlaces
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 Barrapunto2 :
<a href = " http :// www . barrapunto . com " title = " La
informacin que te interesa " > Barrapunto </ a >
usando Debian.
3 Atencin usuarios del Maligno! En Windows se utilizan las barras inver-
tidas \ para separar los directorios. En el resto del universo, se utilizan las
barras normales.
4 Normalmente el infame Outlook. Usa Thunderbird
(http://www.mozilla.org), que es mejor y libre.
4.4. ANCLAS 23
4.4. Anclas
Las anclas nos permiten enlazar a una posicin concreta de la
pgina, en plan teletransporte. Funcionan as:
Primero creamos el ancla en el sitio al que queremos enla-
zar despus. Para esto, usamos el atributo id (podemos ponerlo
prcticamente en cualquier etiqueta). Por ejemplo, as:
< h3 id = " comentarios " > Lista de comentarios </ h3 >
Y ya est todo lo que hay que saber sobre anclas. Son tiles
para pginas muy largas, como las FAQs5 : 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 significa Frequently Asked Questions y es una recopilacin de las
Listas
< ol >
< li >R . A . Salvatore </ li >
< li > George R . R . Martin </ li >
< li > Isabel Allende </ li >
</ ol >
25
26 CAPTULO 5. LISTAS
< 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 modificar su
apariencia con CSS y elegir el tipo de vietas que queremos1 .
Por cierto, prueba el helado, est riqusimo2 .
< dl >
< dt > :) </ dt >
< dd > Sonrisa </ dd >
< 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-
ta que toque. Cmo lo sabemos? Fcil: primero se cierran las
interiores, y despus las de fuera. Es por esto, que cuando inser-
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
29
30 CAPTULO 6. IMGENES
1 Una cita muy comn entre desarrolladores web suele ser: El visitante ms
</ 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 width y height no
hace que pese menos2 . Tenemos que coger un programa de dibujo,
escalar la imagen, y guardar esta copia ms pequea (de 5KB, por
ejemplo):
<a href = " matrix . jpg " title = " Wallpaper " >
< img src = " matrix_thumb . jpg " width = " 100 "
height = " 50 " alt = " Wallpaper de Trinity " / >
</ a >
2 Firefox
no es tan bueno.
3 Aunque parezca mentira, esto estaba muy de moda en los tiempos de los
mdems de 56K baudios.
Captulo 7
Tablas
Bienvenido a mi pesadilla!!!
33
34 CAPTULO 7. TABLAS
< 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 Gnero
Sonic Plataformas
El mtodo es siempre el mismo. Por cada fila que queramos,
abrimos una etiqueta <tr> e insertamos all las celdas que corres-
pondan. Dentro de cada celda podemos meter prcticamente cual-
quier cosa, pero debemos tener siempre en mente que el objetivo
de las tablas es tabular informacin.
< tr >
< th > Ttulo </ th >
< th > Gnero </ th >
</ tr >
< tr >
< td > Sonic </ td >
< td > Plataformas </ td >
</ tr >
</ table >
< tr >
< th > Ttulo </ th >
< th colspan = " 2 " > Gnero </ th >
</ tr >
< tr >
< td > Sim City </ td >
< td > Simulacin </ td >
< td > Estrategia </ td >
</ tr >
</ table >
Ttulo Gnero
Sim City Simulacin Estrategia
Como ves, para expandir una celda por varias columnas hemos
utilizado el atributo colspan. Podemos hacer lo mismo con las filas,
mediante rowspan. Vamos a hacer la misma tabla de antes, pero
girada 90 grados:
36 CAPTULO 7. TABLAS
< 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 >
4 Bueno, se poda apaar algo utilizando frames, pero era peor el remedio
que la enfermedad.
7.4. TABLAS PARA LAYOUTS? INSENSATO! 37
Formularios
39
40 CAPTULO 8. FORMULARIOS
Tambin podemos hacer que una casilla est activada por de-
fecto, 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 >
< 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 >
</ p >
Quizs parezca un poco lioso, pero una vez hayas hecho un par
de formularios, todo ir bien.
< select name = " peli " id = " peli " >
< option value = " hope " >A New Hope </ option >
< option value = " jedi " selected = " selected " >
The Return of the Jedi </ option >
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
Final Fantasy X
Auron, guardin legendario
sultar las especificaciones oficiales en la web del W3C. Es un PDF muy majo
de 359 pginas.
49
50 CAPTULO 9. INTRODUCCIN AL CSS
9.3. Selectores?
Los selectores los utilizamos para elegir a qu elementos se
aplican las propiedades que escribimos. Hay diferentes tipos de se-
lectores, los ms importantes son los que veremos ahora.
9.4. QU SIGNIFICA ESO DE CASCADING? 51
Otra cosa que podemos hacer es definir una clase y hacer que
muchos elementos la utilicen, escribiendo un punto antes del nom-
bre. Por ejemplo, si queremos destacar algo:
. importante {
...
}
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
10.2. El fondo
Podemos moificar el fondo de un elemento con la propiedad
background, que tiene la siguiente sintaxis:
background : color | image | repeat |
attachment | position ;
55
56 CAPTULO 10. TRASTEANDO POR PRIMERA VEZ
10.3. Fuente
Hay varias propiedades que nos permiten jugar con el aspecto
del texto. Podemos englobar todas bajo font, pero primero vere-
mos algunas subpropiedades.
Antes de nada, debemos considerar que no todos los orde-
nadores tienen las mismas fuentes instaladas. Es decir, que
mi wonderfulosa fuente llamada chachi.ttf no tiene por qu te-
nerla mi vecino. Es ms, lo normal es que no la tenga3 . Entonces
qu hacemos? Usar slo fuentes estndar, que tengan la mayora
de ordenadores. Adems, podemos especificar varias, de forma que
si no se tiene la primera, se muestre la segunda, si no se tiene la
segunda, pues la tercera, etc.
A lo que bamos. La propiedad que sirve para cambiar la fuente
es font-family. Como acabamos de ver, podemos indicar varias
fuentes, por orden de preferencia. Si el nombre de una fuente tiene
espacios en blanco, hay que ponerla entre comillas. Por ejemplo4 :
font - family : " Comic Sans MS " , Arial , sans - serif ;
El modelo de caja
61
62 CAPTULO 11. EL MODELO DE CAJA
11.3. Padding
Con padding establecemos la distancia de relleno entre el
lmite interior de la caja y el exterior (borde). Es una definicin
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 ;
11.4. Bordes
Si queremos que nuestra caja tenga bordes, lo conseguimos con
la propiedad border. Tiene la siguiente sintaxis:
border : width | style | color
64 CAPTULO 11. EL MODELO DE CAJA
11.5. Mrgenes
Los mrgenes se controlan con la propiedad margin, y es la
distancia entre el borde de la caja y los elementos que la rodean.
En cuanto a la forma de usarla, es igual que con la propiedad
padding, 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 ;
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: <div>. Esta etiqueta se
encarga de crear una capa, que es un elemento de bloque que sirve
de contenedor a otros elementos de bloque e inline.
Para qu nos sirven? Primero, para organizar semnticamen-
te nuestra pgina. El atributo id tiene carga semntica, as que si
queremos poner en la cabecera3 de nuestra web el ttulo y el men,
haramos esto:
< 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 >
11.7. Floats
Los floats son probablemente una de las cosas que ms cuesta
dominar. En ingls los califican como tricky. Yo los califico como
pequeos cabroncetes.
Lo que hacen los floats es alterar el flujo 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:
etiqueta head!
4 Muy til y socorrida para poner pijadas, como la wishlist de Amazon. Y
si cuela, cuela.
66 CAPTULO 11. EL MODELO DE CAJA
. izquierda {
float : left ;
}
Podemos indicar tanto left (izquierda) como right (derecha).
Fcil, rpido y para toda la familia? No. Despus de un float, sue-
len ocurrir sucesos paranormales5 . La mayora de ellos suelen
desaparecer mediante la propiedad clear, que se encarga de anu-
lar los floats. Los valores que admiten son left, right y both
(que significa ambos).
Volviendo al ejemplo de layouts de blogs, lo normal es poner el
contenido y la barra lateral mediante floats. 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 final de todo. Esto se suele arreglar as:
# footer {
clear : both ;
}
Buena suerte, y que la Fuerza te acompae.
Algunos truquitos
Blade Runner
Roy Batty, replicante
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 ;
}
a {
color : # fff ;
text - decoration : none ;
border - bottom : 1 px solid # f0c ;
}
a : hover {
border : none ;
}
12.3. CAMPOS DE FORMULARIO CHULOS 69
do. . . S, ese.
2 Es decir, pijo.
70 CAPTULO 12. ALGUNOS TRUQUITOS
/* 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 significa 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 dimensio-
nes 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
13.1. Caractersticas
Esta maquetacin tiene las siguientes propiedades:
Anchura fija
Centrado
2 columnas (una de ellas de barra lateral)
Cabecera (header )
Pie de pgina (footer )
73
74 CAPTULO 13. LAYOUT TABLELESS A DOS COLUMNAS
13.3. #container
Esta capa es un contenedor para el resto de la pgina. Esta-
blece la anchura de todo y es la que centra el contenido. El truco
est en usar auto dentro de margin para lograr el centrado. Es-
to no funciona en el IE, as que tendremos que echar mano de
text-align: center en el body. El CSS completo es este:
body {
text - align : center ;
}
# container {
width : 700 px ;
margin : 0 px auto ;
text - align : left ;
}
13.4. #sidebar
Esta es la barra lateral tan famosa en los blogs. En otras
pginas web, podemos poner ah mens, publi, o cualquier otra
cosa. La clave en esta capa es usar float: left, que la sita a la
izquierda y hace que todos los dems elementos la rodeen. Aqu va
el cdigo:
# sidebar {
width : 200 px ;
padding : 10 px ;
float : left ;
}
13.5. #main
Esta es la capa donde ir el contenido (en un blog, esto seran
los posts). Lo importante en esta capa es indicar con margin-left
la distancia desde el borde del #container 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
La capa del pie de pgina viene bien para poner informacin
de copyright/copyleft2 o cualquier otro tipo de datos miscelneos.
Aqu nicamente hemos de tener cuidado de anular el float
que tiene la barra lateral mediante un clear:
# footer {
clear : both ;
}
Ya tenemos nuestro propio layout tablas que cumple los estn-
dares del W3C!
cillo e ingenioso. Bsicamente consiste en poner una imagen de fondo que simule
la columna.
2 Recordad, chicos, las licencias Creative Commons son buenas para la salud
y para el karma.
Captulo 14
Cabeceras
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.
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 <h1> (para que
la capa mida exactamente lo que la imagen) y hacemos invisible el
contenido de la etiqueta <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 <a>. Lo que queremos conseguir
es que se pueda hacer clic en todo el rea de la cabecera, no slo
en lo que sera el texto (invisible) del enlace. Para eso, tenemos
que transformar el enlace en un elemento de bloque, y darle las
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
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
Mens verticales
House M.D.
Greg House, mdico
instalado el plugin de Flash (nunca des por supuesto que el vistante tenga
instalado un plugin), ni siquiera podr navegar por tu pgina.
2 No tiene gracia si te lo dan todo mascadito.
85
86 CAPTULO 16. MENS VERTICALES
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
16.3. Enlaces
Y aqu viene el chanchullo del que os hablaba antes para hacer
el hover3 : poner el enlace como si fuera un bloque, y as ocupar
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 li, y
as parece que no existe:
border - left : 10 px solid #666;
Por qu en IE se ve bien y
en Firefox se ve mal
89
APNDICE A. POR QU EN IE SE VE BIEN Y EN
90 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 navegador1 no hace ni puto caso.
Pongamos un ejemplo ficticio: imaginemos que el Explorer con-
funde los colores rojo y blanco, y los intercambia, debido a un error
de programacin (no entraremos a valorar si por descuido o delibe-
radamente). Es decir, que donde pone #fff IE lo interpreta como
#f00, 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 ale-
gremente a mirar la web con otros navegadores, vemos que se mues-
tra de color rojo fosforito. En Firefox se ve mal. Pues no. Por mu-
cho que se empee el Explorer en hacer creer a los desarrolladores
web, el nmero #f00 significa rojo, y prou.
Lo que ha pasado es que una pgina se ha desarrollado mal
(a menudo inconscientemente) para forzar a que se vea bien en
IE. Lo que obtenemos es que en IE la pgina se visualiza inco-
rrectamente, pero por casualidades msticas, esa visualizacin
coincide con los deseos del diseador.
Un caso real y muy grfico de cmo IE visualiza mal las p-
ginas 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 correc-
tamente 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 hacerla primero para Firefox
o cualquier otro navegador, y luego apaarla como buenamente
podamos para Internet Explorer.
1 Quien-T-Ya-Sabes
2 http://www.webstandards.org/files/acid2/test.html
Apndice B
The Matrix
Morfeo, capitn de la Nabucodonosor
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 do-
bles. Por ejemplo, si antes tenamos:
< IMG SRC = icono . gif ALT = Icono >
Ahora escribimos:
< img src = " icono . gif " alt = " Icono " / >
compra.
4 Y a Google no le gustan, de paso.
5 Ahora mismo prcticamente toda la humanidad con acceso a Intenet, ya
7 Es decir, que se vean cuando usamos una codificacin muy limitada, como
Proverbio japons
97
98 APNDICE C. A FAVOR DEL UNICODE