Apuntes de CSS y HTML para hacer páginas mejores

(y trabajar menos)

Introducción

Hacer páginas web es mucho más fácil que lo que muchos que hacen páginas web piensan que es. En serio. A través de los años las tecnologías web fueron perfeccionándose, evolucionando, cambiando. Se fueron depurando las técnicas y los navegadores fueron mejorando. Sin embargo mucha gente está en la oscuridad y piensa que las cosas son mucho más complejas que lo que realmente son. Este artículo está pensado para esa gente, para ver si se les puede dar una mano.

Algunos de los problemas que he visto son:

Repasando el HTML

Vamos a repasar algunas cosas básicas del HTML.

Primero: Poner doctype para declarar que somos modernos

En toda página nueva que hagas, al princpio del archivo, hay que poner estas dos líneas tal cual:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
	"http://www.w3.org/TR/html4/loose.dtd">

Estas dos líneas les dicen a los navegadores que desactiven bugs que tienen específicamente para dar soporte a páginas viejas. El doctype hace que los navegadores se ajusten más firmemente a los nuevos estándares y, por lo tanto, que se parezcan más entre sí. Entre los bugs que se "desactivan" está el de que se pierde el color y la tipografía en los td, o las inconsistencias entre navegadores respecto al "padding", "width", etc.

Estructura general

La estructura básica de un documento HTML es: Un elemento html que envuelve a todo el documento. Dentro de él hay solamente dos otros elementos: head y body. Después van otros elementos que están diseñados o para head o para body. El emento script es el único que puede estar en los dos, no hay ningún otro elemento que pueda estar alternativamente en uno y otro. Los elementos que sólo pueden estar en head son:

Y los que pueden estar en el body son:

Este lenguaje de armado de páginas tiene su historia, y por esa historia es que tiene cosas obsoletas que hay que olvidar. Por ejemplo: hay hoy en día una sola forma de poner colorcitos y tipografías. Vía CSS. No se usa más el tag font. Nunca. Se usa CSS. Siempre. Es más fácil.

Uso de "title"

Todos sabemos que cerca del principio de la página va un tag llamado "title". ¿Qué tiene que tener? Tiene que tener un título de la página, no del sitio. Es decir, tiene que tener algo que se diferente en cada página. Veamos por qué.

Supongamos que tenemos un sitio llamado "Portal feliz" en el que hay, entre otras, dos páginas. Una es una "Cartelera de cine" y la otra es un "Test del amor".

Si en todas las páginas puse como "title" "Portal feliz", entonces, un navegante que quiera ver su historia verá que estuvo en Portal feliz, luego en Portal feliz y más tarde pasó por Portal feliz. Poco útil.

Si un usuario pone un "bookmark" o "favorito" en la cartelera de cine, en el título de su bookmark tendrá "Portal feliz". Poco útil.

Además las mismas herramientas que nos dan estadísticas sobre nuestro sitio usan los títulos de las páginas para mostrarnos con más elegancia cuál se ve más y cuál menos.

Si no querés que se pierda la referencia al "Portal feliz" en todo caso podés poner un título como el que sigue: "Cartelera de cine - Portal feliz".

Lo peor que se ha visto en mal uso del tag title es lo que hace el diario Clarín, que es poner el titular de la noticia más relevante del día. Intenten hacer un bookmark de ese sitio... =).

Estilos

Aprovechar la cascada

Lo primer a entender es la cascada. ¡Mirá si será importante esto que representa la primera letra de CSS! La cascada funciona en dos sentidos, por ahora hablamos del primero. La cuestión es así:

Todas las cosas de estilo que establecemos para un tag, se aplican también a los que están dentro y que no tienen otros estilos establecidos.

Gracias a esta regla podemos evitar repetir por todos lados la tipografía que usamos. Si queremos que la página tenga tipografía "Verdana, sans-serif" solamente será necesario establecerlo en el elemento "body":

body {
	font-family: verdana, sans-serif;
}

Sólo con esto ya toda la página usará verdana! Lo mismo vale para el color de la letra o para su tamaño. Suponga que más adelante tenemos una "clase" llamada "notita", definida de esta manera:

.notita {
	font-style: italic;
}

La "notita" heredará el estilo del body. No hace falta repetir acá la tipografía, ni el color ni nada. Si mañana cambiamos el color será sólo cambiarlo en el body.

Despreocuparse de los tags

La idea de CSS es simple. Todos los tags son iguales, todos los tags se pueden convertir en cualquier cosa... ¿cómo? con CSS. El ejemplo más simple: Para poner un título principal de página, usamos un h1... aunque el h1 quede por sí solo horrible, no importa, por CSS lo cambiamos por completo. Cómo se hace? En la página escribimos:

<h1>Presentación del producto ACME 2000</h1>
<p>Blah, blah...

... y arriba, donde va el estilo, ponemos:

h1 {
	font-size: 120%;
	color: red;
}

Elegimos poner h1 porque sabemos que lo que va adentro es un título. Punto. No tiene nada que ver con como querramos mostrarlo. Repito: Todos los tags pueden mostrarse de cualquier manera. Por lo tanto el único criterio para elegir uno u otro tag es qué tanto me va ayudar a darle estilo a la página de un plumazo. Si yo sé que todos mis títulos en todas las páginas son h1, yo fácilmente puedo decir que todos sean rojos.

HTML incluye una serie de tags para demarcar pedazos de texto que suelen existir en documentos: párrafos, listas, direcciones, glosarios, etc. Pero claro está, no alcanzan. Porque, además del párrafo normal "p" yo podría querer hablar de un estilo particular para un "párrafo copete", o para un "párrafo notita". Para extender el vocabulario y, de alguna manera, inventar nuevos tags, es que se usa el atributo "class". Entonces, para mis párrafos-notita uso <p class=notita>. Para nombrar a las clases se deben usar siempre palabras que hagan referencia a lo que ese fragmento significa en el texto (como "notita"), no a si es rojo o verde.

Como colofón de lo anterior hay que decir que todos los tags que tenían un sentido puramente colorístico-tipografístico-presentacional son, a partir de ¡ya!.. obsoletos! No más "font", ni "center", ni ninguno de esos. Prohibidos.

Usar tamaños relativos de letra

Los tamaños relativos de letra pueden ser muy útiles. Funcionan así:

Si yo en un estilo pongo que el tamaño de la letra (font-size) para un tag X es 120%, eso quiere decir que lo que esté dentro de X va a ser 120% más grande que lo que está fuera.

Lo bueno de los tamaños relativos es que si en un momento nos interesa tener algo "más chico", no tenemos que ir a ver qué significa ese "más chico". Es muy cómodo poder decir que la "notita" debe tener un tamaño de 90%. Y después usar el "p" de clase "notita" en un div en el que la tipografía es enorme y en otro en el que la tipografía es más chica. Y la notita, en ambos casos, va tener su texto un poco más chico que el texto de afuera.

La unidad em

Hablando de tamaños relativos es interesante mencionar a la unidad em. Esta unidad de medida para CSS equivale al alto de un renglón según la tipografía actual. Por lo tanto font-size: 120%; y font-size: 1.2em son dos maneras decir lo mismo. Lo interesante de "em" es que se puede utilizar para otras cosas además de para tipografías. Y esos estilos se adaptarán a la tipografía del lugar en donde aparecen. Por ejemplo, si quiero que el p de clase "notita" tenga un margen, lo puedeo especificar con "ems", y de esa manera lograr que el margen sea relativo al tamaño de la letra. Si pongo una "notita" en un párrafo que, por alguna razón, es más chico ese margen también será proporcionalmente más chico.


Por Nicolás Lichtmaier.

Valid HTML 4.01!