Curso de CSS y HTML

download Curso de CSS y HTML

of 44

Transcript of Curso de CSS y HTML

Curso de CSS y HTMLEste curso cubre cmo crear pginas web usando las tecnologas estndares, CSS y XHTML, recomendadas por el World Wide Web Consortium (Es el organismo que se encarga de regular los estndares de la Web. Algo as como la RAE con el castellano.). 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. Un navegador (o varios) que funcione bien y respete los estndares. El Mozilla Firefox, por ejemplo. Es multiplataforma, libre, y lo puedes bajar desde la web del proyecto Mozilla. Un navegador que funcione mal, tenga todo el mundo, y pase de los estndares: 3 Ya-Sabes-Cul . 3 Su nombre est escrito en la Lengua Negra, que no pronunciar aqu. 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. Esta obra est bajo licencia Reconocimiento-NoComercial-CompartirIgual 2.5 Espaa de Creative Commons. Para ver una copia de esta licencia, visite la pgina de la licencia. Consejo: Guarda esta pagina en tus favoritos (Oprimiendo CTRL+D) para poder volver al ndice cuando quieras. 1. Introduccin 2. Parte 1: XHTML 1. Estructura XHTML 2. Etiquetas bsicas 3. Enlaces 4. Listas 5. Imgenes 6. Tablas 7. Formularios 3. Parte 2: CSS 1. Qu es CSS? 2. Colores, fondos y fuentes 3. El modelo de caja 4. Trucos con CSS 5. Crear un layout con CSS 6. Cabecera 7. Listas personalizadas 8. Mens verticales 4. Por qu se ve "bien" con Internet Explorer y "mal" con Firefox? 5. Migracin rpida a XHTML 6. Usa Unicode

IntroduccinPor: benko

Ver indice Esconder indice1. Curso de CSS y HTML 2. Introduccin 3. Parte 1: XHTML 1. Estructura XHTML 2. Etiquetas bsicas 3. Enlaces 4. Listas 5. Imgenes 6. Tablas 7. Formularios 4. Parte 2: CSS 1. Qu es CSS? 2. Colores, fondos y fuentes 3. El modelo de caja 4. Trucos con CSS 5. Crear un layout con CSS 6. Cabecera 7. Listas personalizadas 8. Mens verticales 5. Por qu se ve "bien" con Internet Explorer y "mal" con Firefox? 6. Migracin rpida a XHTML 7. Usa Unicode

Qu es el XHTML?XHTML significa eXtensible HyperText Markup Language y es la versin modernizada del 4 tradicional HTML . Si ya conoces HTML, al final del manual hay un apndice para que sea ms fcil la migracin a XHTML. 4 Lenguaje utilizado para crear pginas web. 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.

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 y al Proyecto Camalen.

Cmo funciona el XHTML?XHTML es un lenguaje basado en etiquetas (tags). Una etiqueta tiene la siguiente forma: Algo aqu dentro Volviendo al ejemplo anterior de nuestro ttulo: la etiqueta para poner el ttulo principal en la pgina es . Entonces nos quedara: What is the Matrix? Como ves, marca el inicio de la etiqueta, mientras que se encarga de cerrarla. Hay etiquetas que funcionan con una sola parte, y son as: Observa el espacio en blanco que hay entre el nombre de la etiqueta y la barra /. Es muy importante para que los navegadores antiguos no se vuelvan locos. Hay etiquetas que pueden modificarse con atributos. Ahora mismo no hace falta entender qu hacen, ya los veremos ms adelante. Slo qudate con cmo van escritos: Por ltimo, queda comentar un par de reglas que siguen las etiquetas: siempre en 7 minsculas y los atributos entre comillas . 7 Esto es un diferencia respecto al HTML, ya que podamos poner atributos sin comillas y no importaba si escribamos en maysculas o minsculas.

Pero para hacer webs no se usa el FrontPage?S. Tambin puedes frer huevos con aceite para el coche.

Mi amigo que es diseador usa DreamweaverEl Macromedia Dreamweaver es un editor WYSIWYG muy extendido e idolatrado por infinidad de diseadores. El problema es que nos permite hacer webs sin tocar nada de cdigo. 8 What You See Is What You Get (en castellano, lo que ves es lo que obtienes). S, eso es un problema. Genera cdigo basura y no tenemos control sobre lo que hacemos. As que antes de usar Dreamweaver o algo similar, tenemos que aprender a hacer las webs nosotros solitos. Que quede claro que es mi opinin y no Ley Divina. . .8

Una preguntilla...Has mirado primero en Google? Es muy listo y lo sabe (casi) todo. Si an as no te aclaras, mi e-mail es [email protected]. Tambin puedes preguntar en el foro de CSS y XHTML de Cristalab.

Parte 1: XHTMLEsconder indice1. Curso de CSS y HTML 2. Introduccin

3. Parte 1: XHTML 1. Estructura XHTML 2. Etiquetas bsicas 3. Enlaces 4. Listas 5. Imgenes 6. Tablas 7. Formularios 4. Parte 2: CSS 1. Qu es CSS? 2. Colores, fondos y fuentes 3. El modelo de caja 4. Trucos con CSS 5. Crear un layout con CSS 6. Cabecera 7. Listas personalizadas 8. Mens verticales 5. Por qu se ve "bien" con Internet Explorer y "mal" con Firefox? 6. Migracin rpida a XHTML 7. Usa Unicode 1. Parte 1: XHTML 1. Estructura XHTML 2. Etiquetas bsicas 3. Enlaces 4. Listas 5. Imgenes 6. Tablas 7. Formularios

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

La codicacinLa primera lnea que debemos tener en un documento XHTMl es la que marca la codicacin. Qu es esto? Simplemente formato en el que se guardan los caracteres en el archivo. La codicacin estndar es la Unicode (utf-8) y soporta caracteres de todas las lenguas: occidentales, griegos, chinos, rabes, japoneses, coreanos... ) Existen multitud de codicaciones, en su mayora Criaturas del Mal. Deberas usar siempre la Unicode. La razn? chale un vistazo a este apndice. 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). Al grano, hay que escribir esto: No somos masocas, as que no nos lo tenemos que aprender de memoria. Simplemente copia y pega.

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 documento, 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 Las letras es son el cdigo de la lengua castellana. Podis ver algunos otros cdigos en la siguiente tabla. Los trekkies pueden escribir en su lengua con el cdigo x-klingon. Exigimos quenya ya! Lengua Cdigo Castellano es Cataln ca Gallego gl euskera eu Ingls Francs Alemn Japons en fr de ja

La cabecera (HEAD)La cabecera contiene informacin que no forma parte del contenido 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 ttulo de la pgina. La cabecera va encerrada entre y , mientras que para el ttulo usamos la etiqueta . 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 web El sangrado no es obligatorio, pero s que viene muy bien para aclararnos con el cdigo

El cuerpo (BODY)Por ltimo, nos encontramos con el cuerpo, encerrado entre y , y que contiene toda la chicha. Quedara tal que as: Aqu va el cuerpo de la web

La plantillaRecopilando todo, nos quedara algo como esto: Ttulo de la web Aqu va el contenido Y est pidiendo a gritos que guardes una copia en un archivito llamado plantilla.html para usos posteriores.

Etiquetas bsicasPrrafosLos prrafos sirven para estructurar el contenido. En la web funcionan igual que en el Mundo Real: contienen una o ms frases relacionadas entre s. Para crear un prrafo, metemos texto entre las etiquetas y . Un ejemplo: 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. Da igual insertar un salto de lnea entre la etiqueta y el contenido, ya que ser interpretado como un espacio en blanco.

Si pruebas ese ejemplo, te dar scuenta 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.

Saltos de lneaHay veces que necesitamos forzar un salto de lnea dentro de un prrafo. Para ello, usamos la etiqueta
,as: DarkChestofWonders
Seentroughttheeyes
Oftheonewithpureheart
Once,solongago. Dark Chest of Wonders, de Nightwish, en el lbum Once. Aunque estticamente podamos obtener elmismo resultado mediante prrafos (con ) que saltos de lnea de forma indiscriminada, hay que tener en cuenta que usar
para separar prrafos es algo malvado, propio de una mente retorcida.

Los ttulos (headings)Los 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 clasificados por secciones, cada una de ellas bajo un subttulo diferente: Blogs, Descargas y Videojuegos. Incluso podramos tener subcategoras dentro de una misma seccin, como por ejemplo RPG's, Aventuras Grficas y Arcades. Para conseguir esto, tenemos las etiquetas y ,donde x es un nmero del 1 al 6. corresponde al ttulo ms importante y slo debera haber uno por pgina. Veamos todo lo anterior en un ejemplo: Mislinksfavoritos Blogs Videojuegos RPG's Arcades 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).

CitasExisten tres etiquetas para poder escribir citas: , y . Mientras que y se usan para escribir la cita en s (las frases), se emplea para marcar el origen (persona, libro, cancin o lo que sea). Entonces, en qu se diferencian y ? Pues que est hecha para contener citas largas. Es decir, que dentro de un tendremos que poner prrafos. funciona al revs, puesto que est pensada para escribir citas cortas. va dentro de prrafos. La razn tcnica es que es un elemento de bloque (block), mientras que es inline, y un inline no puede estar "aislado".

Todo lo anterior puede resultar confuso, as que ahora toca un ejemplo clarificador: Aqu os dejo un fragmento de la cancin Die for Rock 'n' Roll, de Dover: Everybody danced (while)
I was lying on the floor
I was ready to die
for Rock 'n' Roll
/blockquote> Mi parte preferida es cuando dice lo de I was ready to die[...].

Separadores horizontalesLos 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 : Los videojuegos Bla bla bla... Msica Bla bla bla...

ComentariosLos comentarios son notitas que ponemos en el cdigo fuente de una pgina, pero que no se muestran en pantalla. Para el navegador, son invisibles. Son tiles para indicar qu hacen ciertas partes del cdigo. Para insertar un comentario, lo escribimos entre . Ten en cuenta que el comentario tiene que estar en una sola lnea.

EnlacesEnlace a una pgina externaSi queremos enlazar a una pgina o archivo que est en otro servidor (normalmente webs que no son nuestras), usamos de esta forma: Texto del enlace El atributo href contiene la URL a la que queremos enlazar. Es muy importante que no se 1 nos olvide el protocolo (en este caso http://) o no funcionar. 1. http:// es el protocolo para la web, ftp:// para los FTP, etc. En title escribimos una descripcin de la pgina que enlazamos. Al igual que con y , en la mayora de navegadores este ttulo aparecer al pasar el ratn

por encima del link. No hay que confundir el ttulo con el texto del enlace. Son completamente independientes. 2 Imagina que quieres enlazar a Barrapunto : 2. Blog colectivo geek, similar a Slashdot. Ya no es lo que era, pero sigue usando Debian. Barrapunto

Enlace a una pgina localPara enlazar a una pgina que est en nuestro servidor, necesitamos saber la ruta (path) desde donde estemos hasta la ubicacin 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: Ficha personal Si el destino estuviera en un subdirectorio, utilizaramos una barra / para indicar el 3 camino : 3. Atencin usuarios del Maligno! En Windows se utilizan las barras invertidas \ para separar los directorios. En el resto del universo, se utilizan las barras normales. Ver dibujos a color Si el destino estuviera un directorio por encima, pondramos dos puntitos y una barra ../ de esta manera: Volver al inicio

Enlace a una direccin de e-mailPodemos crear un enlace que, al pulsar sobre l, se abra automticamente una ventana del 4 cliente de correo que tenga el usuario para que escriba un mensaje a esa direccin. 4. Normalmente el infame Outlook. Usa Thunderbird, que es mejor y libre. Para ello, slo tenemos que usar mailto: en el atributo href, seguido de una direccin de correo electrnico: Leia

AnclasLas 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 enlazar despus. Para esto, usamos el atributo id (podemos ponerlo prcticamente en cualquier etiqueta). Por ejemplo, as: Lista de comentarios Ahora creamos un link que nos transporte a ese ancla. Ponemos en href la ID de antes precedida de una almohadilla #: Leer comentarios Tambin podemos enlazar a un ancla que est en otra pgina: Comentarios del post no 5 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!):

Y ya est todo lo que hay que saber sobre anclas. Son tiles para pginas muy largas, como 5 las FAQs : 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 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. 5. FAQ significa Frequently Asked Questions y es una recopilacin de las preguntas ms frecuentes sobre un tema, contestadas. Est muy mal no leerse las FAQs y luego preguntar sobre cosas que ya estn respondidas, as que ya sabes qu hacer si no quieres que Matrix te castigue.

ListasAhora veremos cmo implementar listas en nuestras pginas. Las hay de tres tipos: ordenadas, sin ordenar, y de definicin. Venga, que esto es muy facilito.

Listas ordenadasLas listas ordenadas muestran sus elementos numerados. Se crean con la etiqueta : Mis escritores favoritos (en orden de preferencia): R. A. Salvatore George R R Martin Isabel Allende 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).

Listas sin ordenarLas listas sin ordenar marcan cada elemento con una vieta, de modo que no se sigue una numeracin. Se crean con la etiqueta

  • . El helado perfecto (am!):
    • 1 bola de helado de chocolate
  • 1 bola de helado de limn

Trocitos de pia y melocotn en almbar

Sirope de chocolate Al igual que con las listas ordenadas, podemos modificar su apariencia con CSS y elegir el 1 2 tipo de vietas que queremos . Por cierto, prueba el helado, est riqusimo . 1 Es ms, podemos sustituir las vietas por imgenes. 2 Tambin puedes aadir guindas y nata.

Listas de definicinLas listas de definicin se diferencian de las anteriores en que cada tem est compuesto por un par de elementos: un trmino y su definicin. Se usan estas etiquetas: para crear la lista, para cda trmino y para las definiciones. Significado de algunos smileys : :) Sonrisa xD Carcajada :P Sacar la lengua Y s, tambin se puede cambiar el aspecto y bla, bla, bla. Comentar que las palabras trmino y definicin no slo se refieren a una palabra y a su significado. Tambin podemos usar una lista de definicin para crear un perfil (por ejemplo), relacionando los pares Nombre-Leia, Ciudad-Coruscant y Profesin-Senadora.

Listas anidadasNo, las listas anidadas no son un nuevo tipo de lista, slo una combinacin de las anteriores. Anidar significa meter una lista dentro de otra. Por ejemplo: Algunos libros de Salvatore :

  • I Triloga de El Elfo Oscuro
  • La Morada

El Exilio El Refugio Triloga de El Valle del Viento Helado La Piedra de Cristal Ros de Plata La Gema del Halfling No es difcil, slo debemos tener cuidado cerrando la etiqueta que toque. Cmo lo sabemos? Fcil: primero se cierran las interiores, y despus las de fuera. Es por esto, que cuando insertamos una lista dentro de un tem de otra lista (esto es, primero

y despus , despus debemos cerrar primero la lista, y luego el tem de la lista exterior. Un buen sangrado como el del ejemplo ayuda mucho.

ImgenesLas 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 formatos de imagen: GIF, JPEG y PNG. El JPEG es el ms adecuado para imgenes con muchos colores, como fotografas, y que no tengan grandes reas de colores planos. Las imgenes GIF slo pueden almacenar hasta 256 colores diferentes, pero uno de estos colores puede ser transparente. El formato PNG es el estndar y podemos elegir varias profundidades de paleta (nmero de colores). Adems, les podemos aadir un canal alpha para crear efectos con transparencias de diferente opacidad. Pero Ya-SabisCul navegador en su versin 6 y anteriores no implementa correctamente los PNG, as que hay que llevar cuidado.

Insertar una imagenPara poner una imagen, hacemos uso de la etiqueta con unos cuantos atributos: Con src establecemos qu imagen queremos mostrar. Al igual que con los links, hay que tener en cuenta la ruta hacia la imagen. Por motivos de organizacin, normalmente tendremos las imgenes en un subdirectorio (o varios) llamado images, as que escribiramos src="images/algo.gif". Los atributos width y height nos permiten establecer el ancho y el alto de la imagen. Podemos indicar un valor absoluto en pxeles o uno relativo en tanto por ciento. Por ejemplo, width="200" mostrara la imagen con 200 pxeles de ancho, mientras que width="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. Una cita muy comn entre desarrolladores web suele ser: "El visitante ms importante de tu web es ciego y se llama Google". Como ejemplo, as podramos insertar la imagen de un banner:

Imgenes como linksTambin podemos hacer que una imagen sea a su vez un enlace 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 : 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:

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 imagen con width y height no hace que pese menos. Tenemos que coger un programa de dibujo, escalar la imagen, y guardar esta copia ms pequea (de 5KB, por ejemplo): Firefox no es tan bueno.

Sobre el uso y abuso de imgenesDicen 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 reflejo. Es por esto que debemos limitar los GIF's animados, as como evitar el uso indiscriminado de imgenes. Recuerda: slo hay que poner las imgenes necesarias. Adems, te ahorrars una pasta en ancho de banda de tu servidor.

TablasLas tablas son el mecanismo que nos proporciona XHTML para presentar 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!

Una tabla bsicaLas principales etiquetas que disponemos para crear una tabla son estas: : crea la tabla : pone ttulo a la tabla

: crea una fila : 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 , y . Aqu tenemos una tabla de 2x2: Videojuegos Ttulo Gnero

Sonic Plataformas

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 e insertamos all las celdas que correspondan. Dentro de cada celda podemos meter prcticamente cualquier cosa, pero debemos tener siempre en mente que el objetivo de las tablas es tabular informacin.

Atributos de tableLa etiqueta dispone de una serie de atributos que nos permiten modificar 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 distancia entre una celda y otra, empleamos el atributo cellspacing con un valor en pxeles. Y para modificar la distancia del contenido de la 2 celda a los bordes de esta, usamos cellpadding . La diferencia entre cellspacing y 3 cellpadding puede confundir al principio, as que lo mejor es verlo con un ejemplo , modificando la tabla anterior (prubalo): 1 Los 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 est n muy exagerados para que se note la diferencia. Videojuegos Ttulo Gnero Sonic Plataformas 1

Expandir filas y columnasMuchas 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: Videojuegos

Ttulo Gnero Sim City Simulacin Estrategia 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: Ttulo Sim City Gneros Simulacin Estrategia

Sim City Simulacin Gneros 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. Ttulo

Tablas para layouts? Insensato!A da de hoy, la mayora de las pginas web estn maquetadas usando tablas con border="0". Antes de la llegada del CSS, era totalmente imposible crear texto a columnas y, 4 en definitiva, maquetas un sitio web . Afortunadamente, CSS implementa capas, con lo que se puede configurar 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 tutorial aprenderemos a crear varios tipos de diseo populares para as tumbar el mito de que las capas son difciles. 4 Bueno, se poda apaar algo utilizando frames, pero era peor el remedio que la enfermedad.

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 modificar el archivo CSS. Ms razones? Al ser el cdigo ms complicado, las pginas son ms pesadas y gastan ms ancho de banda. Adems, tardan ms en cargar, ya que hasta que no se carga todo lo que hay en la tabla, no se muestran los resultados parciales. El futuro es XHTML y todos los sitios web importantes han rediseado su layout con capas. 6 As que te animo a que cumplas los estndares y no uses las tablas para maquetar :) 6 En la web de Steal these buttons! (http://gtmcknight.com/buttons/) hay botoncitos muy cucos para mostrar al mundo que formas parte del Clan de Paladines del CSS.

FormulariosLos 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 correo electrnico, es muy importante tener en cuenta de que se trata de 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.

La etiqueta FORMTodos los formularios estn encerrados por y . 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 , suponiendo que va a ser un formulario que se enviar por correo electrnico: El atributo action recoge qu se va a hacer una vez que se pulse el botn de enviar 1 (Submit). En ese ejemplo, el formulario se enva a la direccin [email protected] . Si tuvisemos un script para procesar el formulario, hubisemos puesto algo como action="enviar_info.php". 1 Lo siento chicos, pero la princesa Leia no me ha autorizado a publicar aqu su verdadera direccin de e-mail :( Con method especificamos 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 2 las variables en la query string (URL) . 2 Si esto te suena a chino, no te preocupes. Slo es necesario saberlo en el caso de que vayas a usar un script. . .Y en ese caso, ya lo aprenders cuando te enseen a programarlos. Por ltimo, con enctype="text/plain" conseguimos que llegue a nuestra bandeja de entrada el formulario en forma de texto plano sin caracteres extraos.

Campos de textoLa mayora de los campos de un formulario se crea con una sola etiqueta, , y mediante su parmetro type especificamos el tipo de campo que queremos. Un campo de texto bsico quedara as: Vamos a pegarle un vistazo a los atributos. Con type="text" indicamos que se trata de un campo de texto. El atributo size recoge el ancho del campo, medido en caracteres. Ahora bien, qu hacen id y name? Pues id es un identificador. Esto implica que nada en todo el documento puede llamarse 3 igual que este elemento. Este parmetro sirve para CSS y para ms cosillas, como usarlo con la etiqueta (que veremos ahora). 3 Estableciendo un aspecto exclusivo para ese elemento, por ejemplo. 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 id y name. Hay que complicarse la vida lo menos posible. Hay otros atributos adicionales para nuestros campos de texto. Podemos indicar el nmero mximo de caracteres que puede introducir el usuario con maxsize Y si queremos que aparezca un valor por defecto, podemos usar value="algo". Por ejemplo, para pedir la direccin de la pgina web del visitante: Y, por supuesto, no debemos olvidarnos de nuestro socorrido title, que funciona igual que con la etiqueta .

Campos de contraseaLos 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 no va cifrada de ninguna manera. La diferencia entre un campo de texto y uno de contrasea es meramente esttica. Los atributos son los mismos que los de los campos de texto, lo nico que cambia es qe debemos introducir type="password". Ejemplillo:

Etiquetar camposYa 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: Nombre :
Mal. Podemos tener problemas con navegadores no visuales. Entonces, cmo sabemos que la palabra "Nombre" hace referencia al campo con el atributo id="nombre"? Para eso disponemos de una etiqueta nueva: .

Esta etiqueta se encarga de asociar texto con su campo correspondiente. Slo tiene un atributo, for, y en l tenemos que indicar la id del campo al que queremos hacer referencia. El ejemplo anterior sera correcto de esta manera: Nombre :

reas de textoCon las reas de texto damos a nuestros visitantes la posibilidad de introducir texto con varias lneas. La etiqueta a usar es , y su funcionamiento es un poco diferente al de . La etiqueta dispone de los atributos id, name y title, que funcionan como en el resto de campos de formulario. Adems, disponemos de otros dos para indicar las dimensiones del rea de texto: cols se encarga de establecer el ancho (medido en caracteres) y rows el alto, medido en lneas. 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: Algn comentario?
Bla bla bla Fjate en que tiene etiqueta de cierre. El texto que hay entre la etiqueta de apertura y la de cierre es el valor por defecto que contendr el campo; en este caso "Bla bla bla.

Casillas de verificacinUna casilla de verificacin (ms conocida como checkbox) es un cuadradito que el usuario puede activar y desactivar pulsando en l. Se crean con la etiqueta y type="checkbox". Los atributos id, name y title funcionan con normalidad, pero value funciona de manera algo distinta. Lo que escribamos en value es lo que nos saldr en el email que recibamos como el valor de la variable (indicada en name) si la casilla est activada. Es decir, que si ponemos esto. . . Has jugado a ...

Monkey Island I ...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="checked". As: Has jugado a ...
Monkey Island I X- Wing Alliance 4 Nos quedara entonces la casilla etiquetada como "Monkey Island , mientras que la de "XWing Alliance sin activar. 4 Yo soy cola, t pegamento.

Botones de seleccinNo 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 indicando el parmetro type="radio", 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 5 pelcula de la triloga de Star Wars es su favorita. Evidentemente, slo puede coger una, as que nos toca emplear radio buttons en lugar de casillas de verificacin. 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, el atributo name es el mismo para todo el grupo. Y qu hacemos con id? Bien, no puede haber dos valores de id repetidos, as que la id en cada botn ha de ser distinta. En otras palabras, los radio buttons son los nicos campos en los que la id y name deben ser diferentes. Disponemos adems del atributo checked por si queremos marcar alguna opcin por defecto. El cdigo para este ejemplo sera as:

5

De la triloga original, por supuesto. No queremos ofender a nadie. Peli preferida :
A New Hope The Empire Strikes Back The Return of the Jedi 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.

Listas de seleccinLas listas de seleccin tienen una funcin parecida a los radio buttons, en tanto que se 6 nos presentan mltiples opciones agrupadas en las que escogemos una . La diferencia es que la lista 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 y tiene etiqueta de cierre. Entre ellas, insertamos las opciones que tenemos con la etiqueta . Pongamos el mismo ejemplo de antes, el de elegir la pelcula preferida de Star Wars. 6 Mentira, hay un atributo que permite que seleccionemos varias opciones de la lista, pulsando la tecla Ctrl. No seas un pequeo bastardo y lo pongas, que es muy incmodo. Pelcula preferida :

A New Hope The Empire Strikes Back The Return of the Jedi 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.

Botones de enviar y reestablecerYa hemos visto todos los campos de formulario que podemos crear, ahora slo nos falta comentar dos botones especiales: el de enviar (submit) y el de reestablecer (reset). Ambos se crean con . 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 value indicaremos el texto que aparecer en el botn. El botn de enviar se encarga de mandar la informacin del formulario, segn lo que hayamos especificado en . Para crear el botn, simplemente indicamos type="submit": El botn de reestablecer borra el formulario y vuelve a poner los valores por defecto. til para formularios largos. Lo conseguimos con type="reset": 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 2: CSS1. Parte 2: CSS 1. Qu es CSS? 2. Colores, fondos y fuentes 3. El modelo de caja 4. Trucos con CSS 5. Crear un layout con CSS 6. Cabecera 7. Listas personalizadas 8. Mens verticales

Qu es CSS?En la parte de XHTML hemos comentado muchas veces que podemos cambiar el aspecto de una pgina web mediante CSS (Cascading Style Sheets). Ahora es el momento de aprender cmo 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 Googleando un poco, podrs encontrar muchas. Y siempre te queda consultar las especificaciones oficiales en la web del W3C. Es un PDF muy majo de 359 pginas..

Dnde escribo el cdigo CSS?Hay dos opciones para insertar CSS en un documento XHTML. Lo ms normal es hacerlo en un archivo externo (que se llama "hoja de estilos") y enlazarlo desde nuestro documento XHTML. 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 modificar 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 (): La otra opcin es escribir la informacin referente a los estilos incrustada en el mismo archivo XHTML. Lo podemos hacer escribiendo entre las etiquetas y , que tambin deben ir en la cabecera. Si hacemos las dos cosas a la vez, siempre tienen prioridad las reglas que estn dentro de .

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: 10pt; } 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.

Selectores?Los 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.

Si queremos elegir una etiqueta, simplemente escribimos su nombre. Por ejemplo, si queremos establecer las propiedades para los enlaces: a { ... } Tambin podemos elegir un elemento nico utilizando su atributo id. Para ello, empleamos la almohadilla: #menu { ... } Otra cosa que podemos hacer es definir una clase y hacer que muchos elementos la utilicen, escribiendo un punto antes del nombre. Por ejemplo, si queremos destacar algo: .importante { ... } Luego podramos emplear esa clase en los prrafos que queramos (o cualquier otro elemento), usando el atributo class de este modo: Bla bla bla Tambin podemos seleccionar ciertos elementos, pero slo cuando estn contenidos dentro de otros. Por ejemplo, si queremos seleccionar los , pero slo de las listas sin ordenar: ul li { ... }

Qu significa eso de "cascading"?Cascading significa 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, sus hijos (td entre otros) tambin tendrn esas mismas reglas. 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.

Puedo poner comentarios?Claro, pero son distintos a los de XHTML, que van entre . /* Esto es un comentario */

Por qu #fff significa 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\ldots adems de que supone una falta de precisin absoluta. As que normalmente se usa la notacin en hexadecimal. 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? Los colores en nuestro monitor est formado por tres haces de luz: rojo, verde y azul. Se llama sistema RGB (Red Green Blue). 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 0 a 255 (se usan 8 bits para representar este rango).

Por ejemplo, si queremos amarillo puro, ponemos 255 para el rojo, 255 para el verde y 0 para el azul. Qu tiene que ver esto con el sistema hexadecimal? Pues que este rango de valores (0..255) puede ser representado con dos dgitos hexadecimales, que van desde el 00 hasta el FF. La forma de escribir un color completo es #RRGGBB, donde la almohadilla indica que se trata de un color hexadecimal, y RR, GG y BB son los dgitos correspondientes al rojo, verde y azul, respectivamente. Entonces el amarillo sera #ffff00. La mayora de los colores que usaremos tendrn por cada componente los mismos dgitos. Por ejemplo: #ff0000 (rojo), #0000aa (azul marino) o #000000 (negro). Estos colores los podemos abreviar y dejarlos en tres cifras. Por ejemplo, #f00 es completamente equivalente a #ff0000. Sin embargo, colores como #a0a0a0 no pueden ser abreviados. Por tanto, para conseguir el color blanco, debemos poner poner todas las componentes a 255, que en hexadecimal nos quedara #ffffff, y abreviado en #fff. 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.

Colores, fondos y fuentesPara empezar a meter mano al CSS, conviene conocer algunas propiedades sencillas. Empezamos!

El color de primer planoLa propiedad color hace referencia al foreground color, es decir, al 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.

El fondoPodemos modificar el fondo de un elemento con la propiedad background, que tiene la siguiente sintaxis: background : color | image | repeat | attachment | position ; El primer parmetro corresponde al color de fondo, los siguientes son relativos a la imagen 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 repeat se repite siempre en ambos sentidos (valor por defecto), mientras que con no-repeat no se repite nunca. Con repeat-x se repite slo en horizontal, y con repeat-y slo en vertical. attachment: sirve para indicar si el fondo se queda fijo 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 scroll (valor por defecto) el fondo se desplaza, y con fixed se queda siempre en el mismo sitio. position: indica la posicin del fondo. Indicamos tanto la posicion desde la izquierda como desde arriba (ya sea en pxeles, porcentajes, o incluso palabras).

En este caso, si podemos usar palabras, es preferible que lo hagamos. Disponemos de top (arriba), bottom (abajo), left (izquierda) y right (derecha). Los valores por defecto son 0 % 0 %, que sitan al fondo en la esquina superior izquierda. Si lo quisiramos en las coordenadas 20,30 (tomando como el origen a la esquina superior izquierda), escribiramos 20px 30px. Si queremos el fondo centrado, pues 50 % 50 %. 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 { 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, pero no te malacostumbres. Ahora iremos mucho ms deprisa, y seguramente te toque buscar ms informacin por tu cuenta. Recuerdas ese librito majo de 359 pginas?

FuenteHay varias propiedades que nos permiten jugar con el aspecto del texto. Podemos englobar todas bajo font, pero primero veremos algunas subpropiedades. Antes de nada, debemos considerar que no todos los ordenadores tienen las mismas fuentes instaladas. Es decir, que mi wonderfulosa fuente llamada chachi.ttf no tiene por qu tenerla 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 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. La Ley de Murphy, como en cualquier otro aspecto de la vida, es aplicable al diseo web tambin. 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 ejemplo: Haz esto y muere. La irrupcin de la Comic Sans por doquier slo es comparable a la aparicin de Jar Jar Binks en Star Wars. font-family: "Comic Sans MS", Arial, sans-serif; EL tamao de la fuente lo controlamos con font-size. Podemos indicar medidas en pxeles (px) o en puntos (pt). Mentira cochina. Podemos (y mucha gente opina que debemos) usar medidas relativas, pero el tema de la herencia es muy importante en estos casos y... Dejmoslo en que no es newbie-friendly.

Para alinear el texto tenemos a text-align, que puede tomar los valores right (derecha), left (izquierda), center (centrado) o justify (justificado). A mucha gente le gusta montar Guerras Sagradas acerca de la conveniencia o no de usar texto justificado. Todava no se han puesto de acuerdo, as que probablemente es un asunto de gustos. Es muy normal tener una clase as: .centrar { text-align: center; } Si queremos indentar los prrafos, pues usamos text-indent: p { text-indent : 2em; } Qu significa em? Es una 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 fuente. Bueno, exactamente equivale a la anchura de la letra "M" mayscula. As, 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 20px, siempre sera esa, aunque el tamao de la fuente fuera de 20 o de 32 pxeles. Tambin podemos cambiar la decoracin del texto mediante text-decoration. Puede tomar diversos valores, como none (sin adornos), underline (subrayado), overline (subrayado superior) o line-through (tachado). Cuidado! Los humanos tenemos la estpida mana de pensar que cualquier texto subrayado es un enlace. Si queremos que nuestros links no tengan subrayado, pondremos: a { text-decoration : none; } Podemos transformar las maysculas y minsculas con la propiedad text-transform. Si ponemos lowercase, todo se mostrar en minsculas; con uppercase, en maysculas; y con capitalize pondremos una letra capital al principio de cada palabra. En cuanto al espaciado, para la distancia entre palabras usamos word-spacing; para el de las letras, letter-spacing; y para el interlineado, line-height. Un ejemplo con todo esto, para la etiqueta : strong { color: #000; letter-spacing: 0.25 em; text-trasform: uppercase; } 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.

El modelo de cajaEs 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.

Cmo es el modelo de caja?En realidad, todos los elementos de una web (prrafos, enlaces, imgenes, tablas, etc.) son cajas rectangulares. Los navegadores sitan estas cajas de la forma que nosotros les hayamos indicado para maquetar la pgina.

Hay dos tipos de cajas: block e inline. Los elementos block rompen el flujo de maquetacin. Esto es, aparecen solos, insertando saltos de lnea. Los elementos inline siguen el flujo, y estn contenidos dentro de elementos de bloque. Por ejemplo, un prrafo sera un elemento block (no podemos tener un prrafo al lado del otro, sino que dos prrafos seguidos aparecern uno abajo del otro. En cambio, un enlace es un elemento inline, ya que no corta el texto donde est metido. 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 figura 1.

Figura 1 - Modelo de Caja Las propiedades ms importantes de una caja son: width (ancho), height (alto), padding (relleno), border (borde) y margin (margen).

Ancho y altoLa propiedad width es un poco confusa, y durante mucho tiempo 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 quebradero de cabeza menos. Lo que ha dado lugar a competiciones de a ver quin consegua el chanchullo ms bonito para sortear el bug. Si ests interesado, googlea buscando box model hack. A lo que bamos, width representa el ancho de la caja. Pero es el ancho interior, es decir, si bordes, mrgenes, ni padding. Podemos indicar este ancho en medidas absolutas (normalmente pxeles) o relativas (normalmente %). Aunque los elementos inline tienen width, si la modificamos 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 tenemos un enlace que consiste en un texto de cinco caracteres, el ancho (width) de este elemento ser lo que ocupen esos cinco caracteres. Sobre el alto de la caja, se controla con la propiedad height, y todo lo que hemos dicho antes sobre el ancho, tambin se aplica aqu.

PaddingCon 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; Podemos establecer un padding distinto para cada lado, usando los sufijos -top (superior), bottom (inferior), left (izquierda) y right (derecha): padding-top: 10px; padding-bottom: 5px; padding-left: 30px; padding-right: 20px; 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: 10px 20px 5px 30px; Otro atajo til es especificar 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: 10px 20px;

BordesSi queremos que nuestra caja tenga bordes, lo conseguimos con la propiedad border. Tiene la siguiente sintaxis: border: width | style | color Como habrs supuesto, width especifica el grosor del borde. Normalmente es una medida en pxeles, pero tambin podemos utilizar las palabras thin (fino), medium (normal) y thick (grueso). Por supuesto, cmo de gordo es thick queda a interpretacin del navegador. En cuanto a style, es el tipo de borde. Hay bastantes, pero los ms comunes son: solid (lnea continua), dashed (lnea discontinua), dotted (lnea de puntos) y double (lnea continua doble). Por ltimo, color indica el color del borde. Wow! Podemos escoger un tipo de borde diferente para cada lado con los sufijos -top, -bottom, left y -right. Por ejemplo, para poner que algo tenga el borde inferior de 1 pxel a puntitos rojos: border-bottom: 1px 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 importante 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 fijo de las hojas de estilos: img { border: none; }

MrgenesLos 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: 20px 5px; Truco del almendruco! Para centrar un elemento de bloque, podemos hacer uso de auto: margin: 0px auto;

CapasVamos a hablar de una etiqueta XHTML que nos qued por ver y est estrechamente ligada con CSS: . 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 semnticamente 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: Ojo! Cabecera en cuanto a maquetacin. No tiene nada que ver con la etiqueta head! Mi blog

  • Principal

Acerca de

Enlaces El otro uso de las capas es el de maquetar. Por ejemplo, el layout tpico de un blog tiene cuatro capas: la cabecera, la del contenido principal, la de la barra lateral y la del pie de pgina. Mediante CSS, podemos controlar la disposicin de estas capas, y as conseguir el diseo que queramos. Muy til y socorrida para poner pijadas, como la wishlist de Amazon. Y si cuela, cuela.

FloatsLos 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, incrustando 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 { float: left; } Podemos indicar tanto left (izquierda) como right (derecha). Fcil, rpido y para toda la familia? No. Despus de un float, suelen ocurrir sucesos paranormales. La mayora de ellos suelen desaparecer mediante la propiedad clear, que se encarga de anular los floats. Los valores que admiten son left, right y both (que significa ambos). Ya te dars cuenta, ya. 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.

Trucos con CSSPor: benko

Ver indice Esconder indice1. Curso de CSS y HTML 2. Introduccin 3. Parte 1: XHTML 1. Estructura XHTML 2. Etiquetas bsicas 3. Enlaces 4. Listas 5. Imgenes 6. Tablas 7. Formularios 4. Parte 2: CSS 1. Qu es CSS? 2. Colores, fondos y fuentes 3. El modelo de caja 4. Trucos con CSS 5. Crear un layout con CSS 6. Cabecera 7. Listas personalizadas 8. Mens verticales 5. Por qu se ve "bien" con Internet Explorer y "mal" con Firefox? 6. Migracin rpida a XHTML 7. Usa Unicode 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.

Links que cambianLos enlaces tienen tres estados: sin visitar (normales), hover (cuando pasamos el cursor del ratn por encima), activos (cuando hacemos clic) y visitados (cuando ya hemos ido a esa direccin). Estos estados se corresponden a 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; color: #00a; } /* 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?

Links con el subrayado de diferente colorAl 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 quitar el subrayado y poner en su lugar un borde: a { color: #fff; text-decoration: none; border-bottom: 1px solid #f0c; } a:hover { border: none; } 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 hover funciona para cualquier otro elemento de la web. No dudes en usarlo en celdas de tablas o capas. A no ser que uses una versin antigua de un navegador subdesarrollado. . . S, ese.

Campos de formulario chulosUn efecto muy Web 2.0 es hacer los campos de formulario con fuente gigante y que el fondo del campo cambie cuando el usuario est usndolo. Esto se consigue con el pseudoelemento focus: 2 Es decir, pijo. input, textarea { font-size: large; border: 3px solid #70C332; color: #666;2

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.

Blockquotes 2.0Otro legado de la Web 2.0: blockquotes con texto gigante y unas comillas gigantes. Quizs es algo difcil de imaginar con esta descripcin, pero si echas un vistazo a la figura 1, seguro que ya lo has visto en algn sitio antes.

Figura 1: Blockquote moln Un ejemplo de cdigo podra ser este: blockquote { background: url (comillas.gif) top left; background-repeat: no-repeat; text-indent: 30 px; text-align: left; font-size: x- large; padding: 0px; } 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.

Cambiar texto por imagenMuchas 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): Enlaces /* CSS */ h3# enlaces { width: 300 px; height: 100 px; padding: 0px;

background: url(links.png) top left no-repeat; } h3 span { visibility: hidden; } 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 dimensiones de con las de la imagen. Despus, gracias al 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 y hacerla enana.

Crear un layout con CSSEsconder indice1. Curso de CSS y HTML 2. Introduccin 3. Parte 1: XHTML 1. Estructura XHTML 2. Etiquetas bsicas 3. Enlaces 4. Listas 5. Imgenes 6. Tablas 7. Formularios 4. Parte 2: CSS 1. Qu es CSS? 2. Colores, fondos y fuentes 3. El modelo de caja 4. Trucos con CSS 5. Crear un layout con CSS 6. Cabecera 7. Listas personalizadas 8. Mens verticales 5. Por qu se ve "bien" con Internet Explorer y "mal" con Firefox? 6. Migracin rpida a XHTML 7. Usa Unicode 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.

CaractersticasEsta maquetacin tiene las siguientes propiedades: Anchura fija

Puedes

Centrado 2 columnas (una de ellas de barra lateral) Cabecera (header) Pie de pgina (footer) echarle una ojeada en la figura 1.

Figura 1: Layout de 2 columnas

Cdigo XHTMLEl esqueleto del cdigo XHTML de nuestra pgina es el siguiente (ira dentro del body): Ttulo Subttulo Seccin Bla bla ... Seccin Contenido principal Pie de pgina Como ves, tenemos cuatro capas. Ahora veremos el cdigo CSS de cada una de ellas.

#containerEsta capa es un contenedor para el resto de la pgina. Establece la anchura de todo y es la que centra el contenido. El truco est en usar auto dentro de margin para lograr el centrado. Esto 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: 700px; margin: 0px auto; text-align: left; }

#sidebarEsta 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: 200px; padding: 10px; float: left; } El padding no es obligatorio, pero lo he puesto para despus poder explicar bien la siguiente capa. Tambin es necesario especificar el ancho en pxeles. Ah, con este mtodo la barra no se extender hasta abajo, sino que se corta en su final (esto se ve bien en la figura 13.1). Si pones la barra de otro color, y quieres que llegue hasta abajo, puedes usar la 1 tcnica de Faux Columns . 1 http://www.alistapart.com/articles/fauxcolumns/ Es un chanchullo sencillo e ingenioso. Bsicamente consiste en poner una imagen de fondo que simule la columna.

#mainEsta 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, pasando 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: 225px; }

#footerLa capa del pie de pgina viene bien para poner informacin de copyright/copyleft o cualquier otro tipo de datos miscelneos. Aqu nicamente hemos de tener cuidado de anular el oat que tiene la barra lateral mediante un clear: 2 Recordad, chicos, las licencias Creative Commons son buenas para la salud y para el karma. #footer { clear: both; } Ya tenemos nuestro propio layout tablas que cumple los estndares del W3C!2

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

Cdigo XHTMLLos estndares nos dicen que el ttulo principal de la pgina se pone con la etiqueta . No obstante, el texto de esta etiqueta lo cambiaremos por una imagen. Como queremos adems meterle un link, tambin usaremos la etiqueta . Dentro del link, metemos una etiqueta para poder ocultar con CSS el texto y que slo se vea la imagen que har de cabecera. . . pero nos estamos adelantando. El cdigo XHTML sera este: Ttulo

#headerPrimero 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: 400px; height: 100px; margin: 0px; padding: 0px; }

El headingTambin quitamos los mrgenes a la etiqueta (para que la capa mida exactamente lo que la imagen) y hacemos invisible el contenido de la etiqueta , para que el texto de la cabecera slo se muestre en navegadores de texto o aurales: #header h1 { margin: 0px; } #header a span { visibility: hidden; }

El enlaceAhora slo nos falta la etiqueta . 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: 400px; height: 100px; display: block; padding: 0px; margin: 0px; text-decoration: none; } Et voil! Ya tenemos nuestra cabecera cuca con enlace incorporado.

Listas personalizadasAhora vamos a aprender cmo modificar 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.

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

  • Sonata Arctica

Nightwish

HIM

La listaAhora la parte de CSS. Disponemos de una propiedad que se llama list-style-image, pero da problemas con ciertas medidas de vietas. As que tenemos que guarrear un poco el cdigo. Para el elemento ul sera: ul { padding-left: 10px; margin-left: 10px; list-style-type: none; } Lo ms importante es el list-style-type: none, que se encarga de quitar esas vietas feas que pone el navegador por defecto. El padding y el margin es para sangrar la lista (puedes poner los valores que quieras, o incluso quitarlos).

Los temsYa slo queda poner nuestra vieta! Para ello, modificamos el estilo de los li que estn en listas desordenadas: ul li { padding-left: 12px; background: url(bullet.png) 0em 0.5em no-repeat; margin-bottom: 1em; } 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 modificar dependiendo de las dimensiones de la imagen de tu vieta. Despus, nos encontramos con la propiedad background}. Despus de establecer la imagen, debemos indicar en qu posicin (recuerda: primero horizontal, luego vertical) se encuentra la vieta. Aqu hay truco! Como ves, trabajamos con em y no con medidas absolutas en pxeles. Por qu? Porque as nos vale para cualquier tamao del texto. Recuerda que 1em equivale a la anchura de la letra M. 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 i para evitar el mosaico. Por ltimo, margin-bottom se encarga de establecer la separacin entre un tem y otro de la lista. Muy sencillo, no?

Mens verticalesSabas que con listas se pueden hacer mens verticales chulos? Que por 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.

Que, 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. 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 figura 1. Como va con CSS, podramos fcilmente incorporar imgenes, pero eso queda como ejercicio. No tiene gracia si te lo dan todo mascadito.

Figura 1: Men vertical

Cdigo XHTMLAl grano, necesitamos una lista tal que as:

  • Home

Archivos Enlaces

Acerca de

La listaA 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: 0px; padding: 0px; width: 200px; font-family: Arial, sans-serif; font-size: 11pt; } Ponemos a continuacin un color de fondo para los tems de la lista (

). Lo normal sera poner aqu los efectos de 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; }

EnlacesY aqu viene el chanchullo del que os hablaba antes para hacer el hover: poner el enlace como si fuera un bloque, y as ocupar todo el li y podremos manipular sus dimensiones. Haz memoria: es lo mismo que empleamos en un captulo anterior para poner un enlace en la cabecera de la web. #menu ul li a { color: #ccc; text-decoration: none; text-transform: uppercase; display: block; padding: 10px 10px 10px 20px; } Slo nos queda hacer los cambios para el hover: #menu ul li a:hover { background: #000; border-left: 10px 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: 10px solid #666; Merece la pena trastear con esta tcnica, puede dar lugar a mens muy logrados.

Por qu se ve "bien" con Internet Explorer y "mal" con Firefox?Un da una amiga me coment que una compaera suya estaba haciendo una web, y que en el Explorer se ve bien y en Firefox mal, y me pregunt que a qu podra ser debido. Le di una 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 definidos como estndar en el WWW Consortium (W3C para los colegas). Este organismo 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 elW3C. Es ms, 1 cierto navegador no hace ni puto caso. 1 Quien-T-Ya-Sabes. Pongamos un ejemplo ficticio: 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 #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 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 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 incorrectamente, pero por casualidades msticas, esa visualizacin coincide con los deseos del diseador. Un caso real y muy grfico de cmo IE visualiza mal las pginas lo podemos encontrar en el Acid Test. 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.

Migracin rpida a XHTMLSi ya usabas HTML 4, puedes aprender muy rpido XHTML, puesto que las bases son las mismas. Slo hay que tener en cuenta que XHTML deja de lado todo aspecto esttico y se centra en el contenido y en la semntica. En lugar de usar una etiqueta para dar un aspecto concreto, usamos etiquetas para hacer que las palabras signifiquen una cosa u otra. Ahora veremos una serie de reglas a seguir para pasarnos a XHTML. Tambin es recomendable leer el captulo donde se explica la estructura de un documento XHTML. Evidentemente, no se muestran aqu todas las diferencias, pero sirve para hacernos una 1 idea de qu es lo que nos espera .

Minsculas y comillas, por favorAntes 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. Adems, todos los atributos tienen que estar entre comillas dobles. Por ejemplo, si antes tenamos: Ahora escribimos:

Todas las etiquetas se cierranCon HTML podamos crear prrafos con la etiqueta sin necesidad de cerrarla con . Lo mismo ocurra con

, por ejemplo. En XHTML ninguna etiqueta puede quedar sin cerrar. Lo de ninguna es literal, y etiquetas que no tienen una de cierre, como ,
deben ser cerradas tambin. Cmo lo hacemos? Insertando la barra /, de forma que el salto de lnea ahora nos queda
. El espacio en blanco que hay entre el nombre y la barra es necesario para que los navegadores antiguos reconozcan la etiqueta.

y ciertos atributos desaparecenHemos dicho que XHTML deja de lado la apariencia del documento, ya que eso es controlado por CSS. Entonces, las etiquetas y carecen de sentido. Adems, esos atributos de algunas etiquetas que hacen referencia al color de las cosas, imgenes de fondo, etc. tambin desaparecen 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.

y amigos tambin se vanCiertas etiquetas de formato, como (negrita), (cursiva), etc. ya no se usan porque hacen referencia exclusivamente a la apariencia de las palabras. Si queremos dar nfasis, utilizamos , y para dar nfasis ms fuerte . Los navegadores suelen mostrarlas como cursiva y negrita, respectivamente, aunque esto es lo de menos porque podemos cambiarlo con CSS.Hay que usar alt y titleXHTML hace hincapi en la accesibilidad de un documento, y por eso debemos facilitar atributos de apoyo a algunas etiquetas. La etiqueta 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 title, que se utiliza en la etiqueta (entre otras) y sirve para mostrar una descripcin del sitio al que nos dirigimos. Por ejemplo: GoogleCuidado al anidar etiquetasXHTML es muy estricto en cuanto a la anidacin de etiquetas. Bsicamente, hay dos tipos de elementos: los block y los inline. 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 flujo del texto. Son las etiquetas de formato, los enlaces, y dems. No podemos meter un elemento block dentro de uno inline. Por ejemplo, si queremos hacer que el heading principal de nuestra pgina sea un enlace, esto sera incorrecto: Texto Hay que hacerlo as: TextoAdems, hay ciertas etiquetas que no admiten otras dentro. Si tienes dudas, lo mejor es utilizar el validador de cdigo del WWW Consortium.No existen los framesAunque la especificacin XHTML 1.0 Frameset permite el uso de frames (marcos) en una 3 pgina, tanto la Transitional como la Strict los prohben . As que ya no podemos usar ni frames ni inline frames. 3 En realidad esto es como la Cherry Coke. Existir, existe, pero nadie la compra. De todos modos, aunque se pudieran emplear, no deberamos, ya que los frames son un 4 atentado contra la usabilidad . 4 Y a Google no le gustan, de paso.No se puede utilizar targetAntes, la etiqueta tena un parmetro llamado target que permita especificar 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 nuevas les digo que si el visitante quiere abrir un ventanuco nuevo, lo har con el botn derecho del ratn. Y para los 5 que usamos navegacin con pestaas es bastante molesto que se abran nuevas instancias del navegador. Gracias. 5 Ahora mismo prcticamente toda la humanidad con acceso a Intenet, ya que la nueva versin del Maligno por fin las trae.Las tablas no se usan para maquetarAunque puedes crear un documento XHTML con tablas para maquetar que pase el anlisis del validor del W3C, va contra la filosofa de dejar XHTML slo para el contenido. Las tablas estn hechas para representar informacin tabulada, no para disear layouts. De todos modos, el paso para un layout 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 6 tablas para ms tarde . 6 Tarde no significa nunca.Los ampersands dan por sacoSi tienes URLs que contengan el ampersand (&), te llevars la sorpresa de que el validador del W3C se pelea con ellas. Esto es debido a las entities. Qu demonios son? Pues la manera que tenemos de insertar caracteres de forma 7 segura . Por ejemplo, el carcter se escribira . Como ves, las entities comienzan por un ampersand y acaban en punto y coma. 7 Es decir, que se vean cuando usamos una codificacin muy limitada, como el ASCII estndar. Si usamos Unicode no deberamos tener ningn problema. 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 &. Es decir, que esta URL: http://alianza.net/p.php?nick=leia&show=all Se quedara en: http://alianza.net/p.php?nick=leia&show=allAunque hemos estado hablando de URLs, tambin debemos emplear la entity & en nuestro texto normal y corriente cuando queramos escribir un ampersand.Usa UnicodeA la hora de almacenar archivos de texto, podemos elegir entre bastantes codificaciones, 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 codificacin (por ejemplo, la ShiftJIS 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 smbolos extraos. Esto pasa, por ejemplo, 1 cuando alguien me enva un trackback con una codificacin distinta a la que uso en el blog. 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. Pero qu pasa si se quiere hacer un documento multilinge con distintos alfabetos? Qu pasa si desde una aplicacin quiero leer cualquier documento en cualquier lengua? Para esto existe una codificacin de caracteres estndar, que es la Unicode. Sacado de su web. Unicode proporciona un nmero nico para cada carcter, sin importar la plataforma, ni el programa, ni la lengua. 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 codificaciones ms usadas son la ISO 8859-1 y la UTf-8. Usar Unicode es bueno y es la codificacin estndar. Usadla.