Baúl de Rasec: Curso HTML IV

Bueno amigos ya estamos en el cuarto curso de páginas web HTML, a partir de ahora iremos incorporando a nuestras páginas las CSS o hojas de estilo que hace que las página parezca aún más profesionales.

Las hojas de estilo Web han estado disponibles por varios años, pero su potencia e importancia fueron muy ignoradas ya que existían pocas implementaciones. Los autores Web, ansiosos de agregar creatividad a sus páginas incidiendo en la presentación, comenzaron a usar las extensiones propietarias de Netscape en vez de las más potentes hojas de estilo. Esto era muy natural, ya que las extensiones propietarias de Netscape podían ser vistas por una parte significativa de los usuarios de la Web, mientras que pocos podían ver mejoras con hojas de estilo.

Hoy en día, más y más navegadores está implementando hojas de estilos, abriendo los ojos de los autores a características únicas que permiten incidir sobre la presentación y preservar la independencia de plataforma. Las ventajas de las hojas de estilo se volvieron obvias, así como las desventajas de crear continuamente más etiquetas HTML para efectos de presentación.

Los atributos BODY de Netscape son ahora ampliamente aceptados en la Web, y pronto serán norma en HTML 3.2. Sin embargo, BGCOLOR, TEXT y sus amigos simplemente no brindan la flexibilidad de las hojas de estilo. La mayoría de imágenes de fondo dejarían una página ilegible para alguien con una pantalla de sólo 16 colores; muchas páginas son difíciles de leer con sólo 256 colores. Con los atributos BODY convencionales, un autor debe elegir si los beneficios de una imagen de fondo son mayores que los costos; con hojas de estilo, un autor puede ofrecer un número de imágenes diferentes, en diferentes hojas de estilo, tal que el usuario pueda elegir la "hoja de estilo de 24-bit" o la "hoja de estilo de 8-bit," dependiendo de cuantos colores puede mostrar su sistema. Si ningún estilo brindado por el autor es adecuado para el usuario, se puede simplemente ignorar el estilo del autor.

Las hojas de estilo pueden hacer mucho más sencilla la vida de un autor. Mientras que uno podría usar <HR WIDTH="75%" SIZE=5 ALIGN=center> para cada regla horizontal, esto se vuelve muy engorroso para el autor. Con hojas de estilo, solo se necesita especificar tal preferencia una vez, y el estilo puede ser aplicado al sitio completo. Y si el autor decide que WIDTH="50%" sería mejor, solo necesita cambiar esta preferencia en un solo lugar, en vez de tener que buscar a través de cientos de páginas para cambiar el HTML. Las hojas de estilo también reducen el tiempo de descarga cuando un archivo contiene toda la información de estilos.

Las hojas de estilo también ofrecen mucho mayor flexibilidad en términos de los efectos de presentación que brindan. Las propiedades como color, background, margin, border, y muchas más pueden aplicarse a todos los elementos. Con solo HTML y sus extensiones propietarias, uno debe confiar en atributos como BGCOLOR, que está disponible solo para unos cuantos elementos. Las hojas de estilo dan la flexibilidad de aplicar un estilo a todos los párrafos, o a todos los encabezados de nivel dos, o a todo el texto con énfasis.

Con hojas de estilo, los autores pueden usar la propiedad text-indent para sangrar texto, en vez de recurrir a desagradables artificios como <DD> o <IMG SRC="blanco.gif" WIDTH=10 ALT=""> que acarrean muchos efectos laterales negativos. Los márgenes pueden ser sugeridos sin tener que poner la página entera en una tabla. Las hojas de estilo también reducen la necesidad de búsqueda y reemplazo en multi-archivos; si un autor decide cambiar la sangría de todos los párrafos en un sitio, solo tiene que cambiar una línea en la hoja de estilo.

Las hojas de estilo representan un gran paso adelante para la Web. Con la separación de contenido y presentación entre HTML y hojas de estilo, la Web ya no necesita alejarse del gran ideal de independencia de plataforma que brindó el medio con su inicial impulso de popularidad. Finalmente, los autores pueden modificar la presentación de documentos sin dejar las páginas ilegilbles a los usuarios.

Una hoja de estilo está compuesta de reglas de estilo que le dicen a un navegador como mostrar un documento. Hay varias formas de enlazar estas reglas de estilo a sus documentos HTML, pero la forma más sencilla para comenzar es usar el elemento STYLE de HTML. Este elemento se coloca en la cabecera HEAD del documento y contiene las reglas de estilo para la página.

Cada regla está compuesta de un selector --usualmente un elemento HTML como BODY, P, o EM --y el estilo a ser aplicado al selector.

Hay muchas propiedades que pueden definirse para un elemento. Cada propiedad toma un valor, que junto con la propiedad describen como debería mostrarse el selector.

Las reglas de estilo se forman así:

selector { propiedad: valor }

Pueden separarse múltiples declaraciones de estilo para un solo selector con dos puntos :

selector { propiedad1: valor1; propiedad2: valor2 }

Como un ejemplo, el siguiente segmento de código define las propiedades color y font-size para los elementos H1 y H2:

<HEAD>
<TITLE>Ejemplo CSS</TITLE>
<STYLE TYPE="text/css">
  H1 { font-size: x-large; color: red }
  H2 { font-size: large; color: blue }
</STYLE>
</HEAD>

Enlazando Hojas de estilo con HTML

Hay muchas maneras de enlazar hojas de estilo a HTML, cada una con sus ventajas y desventajas. Se han introducido nuevos elementos y atributos HTML para permitir la fácil incorporación de hojas de estilo en documentos HTML.

Enlazándose a una hoja de estilo externa

Una hoja de estilo externa puede ser enlazada a un documento HTML mediante el elemento LINK de HTML:

<LINK REL=StyleSheet HREF="estilo.css" TYPE="text/css" MEDIA=screen> <LINK REL=StyleSheet HREF="color-8b.css" TYPE="text/css" TITLE="estilo de color 8-bit" MEDIA="screen, print"> <LINK REL="Alternate StyleSheet" HREF="color-24b.css" TYPE="text/css" TITLE="estilo de color 24-bit" MEDIA="screen, print"> <LINK REL=StyleSheet HREF="aural.css" TYPE="text/css" MEDIA=screen>

La etiqueta <LINK> se coloca en la cabecera HEAD del documento. El atributo opcional TYPE se usa para especificar un tipo de medio --text/css para una hoja de estilo en cascada-- permitiéndole a los navegadores omitir los tipos de hoja de estilo que no soportan. También es una buena idea configurar el servidor para enviar text/css como Content-type para archivos CSS.

Las hoja de estilo externas no debrían contener ninguna etiqueta HTML como <HEAD> o <STYLE>. La hoja de estilo solo debería consistir simplemente de reglas de estilo o sentencias. Un archivo que solo consista de

P { margin: 2em }

podría usarse como una hoja de estilo externa.

La etiqueta <LINK> también toma un atributo opcional MEDIA, que especifica el medio o medios en que debería aplicarse la hoja de estilo. Los valores posibles son

screen (valor por defecto), para presentación en pantallas de computadoras no-paginadas;

print, para salida a una impresora;

projection, para presentaciones en proyectores;

aural, para sintetizadores de voz;

braille, para presentación en dispositivos braille;

tty, para pantalla en celda de caracteres (usando una fuente de inclinación fija);

tv, para televisores;

all, para todos los dispositivos de salida.

Medios múltiples se especifican mediante una lista separada por comas, o por el valor all.

Netscape Navigator 4.x ignora incorrectamente cualquier hoja de estilo enlazada o incrustada declarada con valores MEDIA diferentes de screen. Por ejemplo, MEDIA="screen, projection" provocará que la hoja de estilo sea ignorada por Navigator 4.x, aun si el dispositivo de presentación es una pantalla de computadora. Navigator 4.x también ignora hojas de estilo declaradas con MEDIA=all.

El atributo REL se usa para definir la relación entre el archivo enlazado y el documento HTML. REL=StyleSheet especifica un estilo persistente o preferido mientras que REL="Alternate StyleSheet" define un estilo alterno. Un estilo persistente es aquel que siempre se aplica si están activas las hojas de estilo. La ausencia del atributo TITLE, como en la primera etiqueta <LINK> en el ejemplo, define un estilo persistente.

Un estilo preferido es uno que se aplica automáticamente, como en la segunda etiqueta <LINK> en el ejemplo. La combinación de REL=StyleSheet y un atributo TITLE especifica un estilo preferido. Los autores no pueden especificar más de un estilo preferido.

Un estilo alterno se indica por REL="Alternate StyleSheet". La tercera etiqueta <LINK> en el ejemplo define un estilo alterno, que el usuario podría elegir para reemplazar la hoja de estilo preferido.

Note que los navegadores actuales generalmente carecen de la capacidad de elegir estilos alternos.

Un estilo simple también puede ser dado mediante múltiples hojas de estilo:

<LINK REL=StyleSheet HREF="basico.css" TITLE="Contemporaneo"> <LINK REL=StyleSheet HREF="tablas.css" TITLE="Contemporaneo"> <LINK REL=StyleSheet HREF="formas.css" TITLE="Contemporaneo">

En este ejemplo, tres hojas de esilo son combinadas en un estilo "Contemporaneo" que se aplica como una hoja de estilo preferido. Para combinar múltiples hojas de estilo en un estilo único, se debe usar el mismo TITLE con cada hoja de estilo.

Una hoja de estilo externa es ideal cuando el estilo se aplica a muchas páginas. Con una hoja de estilo externo, un autor podría cambiar la apariencia de un sitio completo mediante el cambio de un solo archivo. Además, la mayoría de navegadores guardan en caché las hojas de estilo externas, evitando así una demora en la presentación una vez que la hoja de estilo se ha guardado en caché.

Microsoft Internet Explorer 3 para Windows 95/NT4 no soporta imágenes o colores de fondo (background) en BODY desde hojas de estilo enlazadas. Con este defecto, los autores podrían querer tener otro mecanismo para incluir una imagen o color de fondo, como incrustando o usando el estilo en línea, o usando el atributo BACKGROUND del elemento BODY.

Incrustando una hoja de estilo

Una hoja de estilo puede incrustarse en un documento con el elemento STYLE:

<STYLE TYPE="text/css" MEDIA=screen>
<!--
  BODY  { background: url(foo.gif) red; color: black }
  P EM  { background: yellow; color: black }
  .nota { margin-left: 5em; margin-right: 5em }
-->
</STYLE>

La etiqueta <STYLE> se coloca en la cabecera HEAD del documento. El atributo requerido TYPE se usa para especificar un tipo de medio, así como su función con el elemento LINK. En forma similar, los atributos TITLE y MEDIA también pueden especificarse con STYLE.

Los navegadores más antiguos, que ignoran el elemento STYLE normalmente mostrarían su contenido como si fuera parte de BODY, haciendo así visible la hoja de estilo para el usuario. Para evitarlo, el contenido del elemento STYLE está contenido dentro de un comentario SGML (), como en el ejemplo precedente.de arriba.

Debería usarse una hoja de estilo incrustada cuando un único documento tiene un único estilo. Si la misma hoja de estilo se usa en múltiples documentos, entonces sería más apropiada una hoja de estilo externa.

Importación de una hoja de estilo

Una hoja de estilo puede ser importada con la sentencia @import de CSS. Esta sentencia puede usarse en un archivo CSS o dentro del elemento STYLE:

<STYLE TYPE="text/css" MEDIA="screen, projection">
<!--
  @import url(http://www.htmlhelp.com/estilo.css);
  @import url(/stylesheets/punk.css);
  DT { background: yellow; color: black }
-->
</STYLE>

Note que otras reglas de CSS pueden aún estar incluidas en el elemento STYLE, pero todas las sentencias @import deben ocurrir al inicio de la hoja de estilo. Cualquier regla especificada en la misma hoja de estilo prevalecerá sobre reglas contradictorias en las hojas de estilo importadas. Por ejemplo, inclusive si una de las hojas de estilo importadas contuviera DT { background: aqua}, los términos de definición aún tendrían un fondo amarillo.

El orden en el que las hojas de estilo son importadas es importante para determinar como trabajan en cascada. En el ejemplo de arriba, si la hoja de estilo importada estilo.css especifica que los elementos STRONG se muestren en rojo y la hoja de estilo punk.css especifica que los elementos STRONG se muestren en amarillo, la última regla prevalecería, y los elementos STRONG serían amarillos.

Las hojas de estilo importadas son útiles para fines de modularidad. Por ejemplo, un sitio puede separar diferentes hojas de estilo por los selectores usados. Puede haber una hoja de estilo simple.css que dé las reglas para elementos comunes como BODY, P, H1y H2. Además, puede haber una hoja de estilo extra.css que de reglas para los elementos menos comnes como CODE, BLOCKQUOTE y DFN. Una hoja de estilo tablas.css puede usarse para definir reglas para elementos tabla. Estas tres hojas de estilo podrían ser incluidas en documentos HTML con la sentencia @import. Las tres hojas de estilo también podrían ser combinadas mediante el elemento LINK.

Estilo en línea

Puede usarse estilos en línea mediante el atributo STYLE. El atributo STYLE puede ser aplicado a cualquier elemento BODY (incluyendo el mismo BODY) excepto para BASEFONT, PARAM y SCRIPT. El atributo toma como su valor, cualquier número de declaraciones CSS, donde cada declaración está separada por un punto y coma. Ejemplo:

<P STYLE="color: red; font-family: 'New Century Schoolbook', serif">Este párrafo usa estilos en rojo con la fuente New Century Schoolbook, si está disponible.</P>

Note que New Century Schoolbook está en comillas simples en el atributo STYLE, ya que las comillas dobles se usan para contener las declaraciones de estilo.

El estilo en línea es mucho más inflexible que los otros métodos. Para suar estilo en línea, se debe declarar un único lenguaje de hojas de estilo para el documento completo usando la extensión de cabecera HTTP Content-Style-Type. Con CSS en línea, un autor debe enviar text/css como la cabecera HTTP Content-Style-Type o incluir la siguiente etiqueta en la cabecera HEAD:

<META HTTP-EQUIV="Content-Style-Type" CONTENT="text/css">

Los estilos en línea pierden muchas de las ventajas de las hojas de estilo al mezclar contenido con presentación. Así mismo, los estilos en línea se aplican implícitamente a todos los medios, ya que no hay un mecanismo para especificar el medio deseado para un estilo en línea. Este método debería usarse con moderación, como cuando se aplica un estilo en todos los medios para una sola ocurrencia de un elemento. Si el estilo debe aplicarse a un único elemento pero solo con cierto medio, use el atributo ID en lugar del atributo STYLE.

Atributo CLASS

El atributo CLASS se usa para especificar la clase de estilo a la cual pertenece el elemento. Por ejemplo, la hoja de estilo puede haber creado las clases punk y advertencia:

.punk     { color: lime; background: #ff80c0 }
P.advertencia { font-weight: bolder; color: red; background: white }

Se podría hacer referencia a estas clases en HTML con el atributo CLASS:

<H1 CLASS=punk>Extensiones proprietarias</H1> <P CLASS=advertencia>Muchas extensiones proprietarias pueden tener efectos laterales negativos, tanto en los navegadores que las soportan como en los que no lo hacen...

En este ejemplo, la clase punk puede aplicarse a cualquier elemento BODY ya que no tiene un elemento HTML asociado con ella en la hoja de estilo. Al usar la hoja de estilo del ejemplo, la clase advertencia solo puede aplicarse al elemento P.

Una buena práctica es llamar a las clases de acuerdo a su función y no por su apariencia. La clase advertencia de ejemplo anterior, podría haberse llamado red (rojo), pero este nombre perdería significación si el autor decidiera cambiar el estilo de la clase aun color diferente, o si el autor quisiera definir un estilo aural para quienes usan sintetizadores de voz.

Las clases pueden ser un método muy eficaz para aplicar diferentes estilos a secciones estructuralmente idénticas de un documento HTML. Por ejemplo, esta página usa clases para dar un estilo diferente al código CSS y al código HTML.

Atributo ID

El atributo ID se usa para definir un estilo único para un elemento. Una regla CSS como

#wdg97 { font-size: larger }

puede aplicarse en HTML mediante el atributo ID:

<P ID=wdg97>¡Bienvenido al Web Design Group!</P>

Cada atributo ID debe tener un valor único a través del documento. El valor debe ser una letra inicial seguida por letras, dígitos o guiones. Las letras solo pueden ser A-Z y a-z.

Note que HTML 4.0 permite puntos en valores del atributo ID, pero CSS1 no permite puntos en selectores ID. Note también que CSS1 permite los caracteres Unicode 161-255 así como los caracteres de escape Unicode como códigos numéricos, pero HTML 4.0 no permite estos caracteres en el valor de atributo ID.

El uso de ID es apropiado cuando una hoja de estilo solo necesita ser aplicada una vez en algún documento. ID contrasta con el atributo STYLE en que el primero permite estilos específicos al medio y también puede aplicarse a múltiples documentos (aunque sólo uno en cada documento).

Elemento SPAN

El elemento SPAN fue introducido en HTML para permitir a los autores dar un estilo que no pudiera estar conectado a un elemento estructural HTML. SPAN puede usarse como un selector en una hoja de estilo, y también acepta los atributos STYLE, CLASS e ID.

SPAN es un elemento en línea, así que puede usarse simplemente como un elemento, tal como EM y STRONG en HTML. La gran diferencia es que mientras EM y STRONG conllevan significado estructural, SPAN no tiene tal significado. Existe solamente para aplicar estilos, y por lo tanto, no tiene efecto cuando la hoja de estilo está desactivada.

Algunos ejemplos de SPAN:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<HTML>
<HEAD>
<TITLE>Ejemplo de SPAN</TITLE>
<META HTTP-EQUIV="Content-Style-Type" CONTENT="text/css">
<STYLE TYPE="text/css" MEDIA="screen, print, projection">
<!--
  .primeraspalabras { font-variant: small-caps }
-->
</STYLE>
</HEAD>
<BODY>
<P><SPAN CLASS=primeraspalabras>Las primeras palabras</SPAN> de un
párrafo podrían estar en small-caps. El estilo también puede estar en línea, como
para cambiar el estilo de una palabra como <SPAN STYLE="font-family: Arial">
Arial</SPAN>.</P>

Elemento DIV

El elemento DIV es similar al elemento SPAN en función, con la gran diferencia que DIV (abreviatura para "división") es un elemento de nivel bloque. DIV puede contener párrafos, encabezados, tablas, y aun otras divisiones. Esto hace ideal a DIV para hacer diferentes clases de contenedores, como capítulo, resumen o nota. Por ejemplo:

<DIV CLASS=nota> <H1>Divisiones</H1> <P>El elemento DIV está definido en HTML 3.2, pero solo el atributo ALIGN está permitido en HTML 3.2. HTML 4.0 agrega los atributos CLASS, STYLE e ID , entre otros.</P> <P>Ya que DIV puede contener otros contenedores de nivel bloque, es útil para hacer grandes secciones de un documento, como esta nota.</P> <P>Requiere la etiqueta de cierre.</P> </DIV>

Una nota acerca de validación

Pocos documentos con estilos CSS se validarán en el nivel HTML 3.2 (Wilbur). HTML 3.2 no define el elemento SPAN, ni los atributos CLASS, STYLE o ID, y también carece de soporte para los atributos TYPE y MEDIA en los elementos LINK y STYLE.

Estos elementos relacionados con estilos no son negativos para navegadores que no los soportan, ya que son ignorados en forma segura. Los documentos que usen estos elementos y atributos pueden validarse contra HTML 4.0.

Dependencia de Hojas de estilo

Las hojas de estilo en cascada todavía no tienen un uso muy extendido, pero ya han comenzado su uso inadecuado. Las hojas de estilo, si se usan apropiadamente, pueden ser una herramienta efectiva para brindar una presentación única y atractiva, permitiendo que la página sea accesible a todos los usuarios. Sin embargo, en cuanto el mensaje de una página se vuelve dependiente de la hoja de estilo, la página se convierte en una falla en la Web.

Las hojas de estilo fueron diseñadas para permitir al autor modificar la presentación, pero no para controlarla . Las hojas de estilo pueden ser pasadas por alto por usuarios que puedan elegir --o necesitar--sus propias hojas de estilo. Por estas razones, los autores que dependen de un cierto estilo encontrarán que sus páginas son inaccesibles a una parte importante de usuarios.

El pobre uso de las hojas de estilo está mostrado en muchas de las llamadas galerías CSS. Un error característico que ha aparecido en varios lugares es el llamado "drop shadow", o "aplicación de sombras". Este se crea usando márgenes negativos e implica una gran dependencia de la hoja de estilo. Cuando se elimina la hoja de estilo, ya sea a discrecion del usuario o por emplear un navegador que no soporta CSS, con frecuencia la página se vuelve inutilizable.

Como ejemplo, vea SpaceGUN Magazine, una revista de ficción representada en la Galería de CSS de Microsoft. Al usar Microsoft Internet Explorer 3.01 con hojas de estilo activadas, la presentación es ciertamente única y atractiva a la vista:

Pero en cuanto se desactivan las hojas de estilo, el resultado es muy diferente, aun usando el mismo navegador:

Muy claramente, la página es inutilizable en la Web debido a su 'aplicación de sombras' y otros trucos de márgenes negativos que dejan al visitante con un verdadero enredo. El ejemplo también muestra que la dependencia en hojas de estilo es una receta para el fracaso. Un documento web no es efectivo si no es accesible.

Los diseñadores de hojas de estilo siempre deberían tener cuidado de asegurarse de que sus páginas web no sean dependientes de la hoja de estilo en absoluto. Algunos autores han tratado de usar la fuente WingDings para obtener símbolos sin mucho problema y evitar el mayor tiempo de descarga de imágenes verdaderas. Aunque el objetivo de reducir el tiempo de descarga es admirable, esta foma de redacción depende de que el usuario tenga la fuente WingDings y de que tenga activadas las hojas de estilo --condiciones que nunca pueden asegurarse en la Web.

Hasta aquí una muestra de lo que podemos hacer con las CSS próximamente ejemplos de programación.

Hasta la próxima

SALU2

jueves, 16 de abril de 2009

Curso HTML IV