Hojas De Estilo

HOJAS DE ESTILO. INTRODUCCIÓN Cuando hablamos de páginas Web, nos estamos refiriendo a un documento creado con código HTML capaz de ser interpretado por un programa navegador de Internet, que será el que permita visualizarlo. Las páginas Web han sido creadas para su visualización en pantalla pero esto está cambiando y cada vez son más las necesidades de impresión (directamente a impresora o a un archivo PDF) e incluso de nuevos medios como por ejemplo Screenreader para personas con discapacidad visual. ENLACES RELACIONADOS Navegadotes Screenreader Editor HTML El problema de los navegadores es que cada uno interpreta el código HTML y lo representa de forma similar, pero en raras ocasiones se muestra exactamente igual. PRÁCTICAS IE HerramientasOpciones de InternetGeneralAccesibilidad FIREFOXEditarPreferencias OPERA EL DISEÑO. Hay muchas formas de construir páginas Web, pero la idea original era la creación de un sistema en el que crear documentos con la separación del contenido y diseño del documento, de modo que a un mismo documento se le puedan aplicar diferentes diseños, por ejemplo es posible crear un diseño para la pantalla del PC, otro para la pantalla del móvil, otro para su impresión (directamente a impresora o a un documento, etc.). Esto significa que a la hora de construir tendremos un núcleo (el código HTML), sobre el que se acoplan diferentes capas que actuarán a la hora de mostrarla: - CSS, para la pantalla. - CSS, para la impresora. - JavaScript (AJAX), para facilitar su interacción. Estas capas van a cambiar su aspecto o apariencia para hacerlas más atractivas y eficientes. De cualquier forma hay que tener en cuenta que no es posible conseguir que una misma página se muestre exactamente igual en todos los navegadores, aunque lo que realmente debemos buscar es que funcione correctamente en todos los navegadores y para todo tipo de usuarios. Las hojas de estilo son conocidas normalmente como CSS (“Cascading Style Sheets”) y pretenden separar el diseño de las páginas Web de su contenido. Han sido elaboradas en el seno del consorcio W3, más conocido como el W3C, en cuyo sitio Web podemos encontrar todo lo relacionado con las CSS. Recomiendo una visita a las guías breves: ENLACES RELACIONADOS W3C. Consorcio de la triple W. http://www.w3c.org Guías breves del W3C.

http://www.w3c.org En primer lugar veamos un ejemplo de lo que tenemos entre manos. Las hojas de estilo no cambian el contenido de una página, sino su aspecto y de este modo pueden, no sólo embellecer la página, sino además resaltar aquellas partes sobre las que es preciso llamar la atención del visitante. Vemos un pequeño ejemplo que he encontrado en la página de DISEÑORAMA. En este ejemplo la autora ha creado una página con un pequeño código en JavaScript para eliminar el efecto de las hojas de estilo en la página: PRÁCTICAS Veamos un ejemplo en el que mostramos el contenido de una página con las hojas de estilo habilitadas o deshabilitadas. Pulse el enlace… Puede abrir el archivo HTML desde este enlace.

En estas dos imágenes estamos viendo la misma página, la de la izquierda muestra el efecto de aplicar las hojas de estilo sobre el código HTML, mientras que la de la derecha presenta el estilo propio del navegador que está usando y muestra el contenido sin apenas estilos aplicados. Juzgue por sí mismo si el tiempo empleado en aplicar hojas de estilo merece la pena para conseguir un resultado final mejor. Construir páginas Web con hojas de estilo requiere un nuevo concepto de esta tarea, es preciso partir de documentos HTML bien estructurados carentes de formato para los elementos utilizados, para posteriormente aplicar el diseño según las posibilidades que nos proporcionan las hojas de estilo. El sistema de trabajo recomendado para crear una página Web es el siguiente: 1. Escribir el contenido de la página con código HTML, bien escribiendo directamente el código sobre un editor de textos, bien utilizando alguno de los conocidos editores HTML que existen en la Red, como Dreamweaver, Frontpage, Composer y otros. Es recomendable utilizar siembre minúsculas para las etiquetas HTML. 2. Definir los estilos a aplicar en un archivo independiente que después cargaremos desde la cabecera de nuestra página Web. 3. Abrir la página Web con el navegador para observar los resultados obtenidos. 4. Si lo considera necesario, realice los cambios oportunos para probar cambios sobre el estilo de la página.

5. Una vez concretado el diseño definitivo, podemos aplicarlo a todos los documentos HTML que queramos. Vemos esto poco a poco en los siguientes apartados, para finalmente siguiendo estos cinco pasos construir nuestro sitio Web con diseño CSS.

CÓMO AÑADIR ESTILO A UNA PÁGINA: Hay tres modos de aplicar estilo a una página Web, y todos ellos suceden en la cabecera de la página: - Estilo predefinido que se carga directamente de Internet. Hay ocho estilos de este tipo que podemos usar libremente, pero para ser usados requieren que estemos permanentemente conectados a Internet, lo que por otra parte es imprescindible si lo que queremos es difundir nuestra página. - Insertando código CSS en la cabecera entre las etiquetas <style…> y . - Y por último el sistema más recomendable, utilizar un archivo independiente para definir los estilos de la página. Después se añade a la página Web mediante una etiqueta similar a esta:

Este sistema tiene la ventaja de que podemos incluirlo en cualquier página que queramos que adopte ese estilo.

Estilo desde Internet. Existen diferentes estilos predefinidos en Internet y sólo tenemos que invocarlos mediante una instrucción similar a esta:

Para cambiar de estilo sólo hay que sustituir la palabra Tradicional por cualquiera de los estilos que se muestran a continuación: Traditional-Midnight-Ultramarine-Chocolate-Oldstyle-Modernist-Steely-Swiss

Si no hay conexión a internet, no tendrá estilo y su apariencia será idéntica a la página sin estilos.

Estilo dentro de la misma página. Básicamente incluimos una etiqueta <style… en la que se hacen las definiciones de los estilos de los diferentes elementos HTML. En los comentarios del ejemplo podemos entender perfectamente el modo en que actúa la CSS. <style type="text/css"> body{ /* Aplicamos estilo exclusivamente al cuerpo de la página background-color:#efefef; /* Color de fondo gris color:#666666; /* Color del texto (fuente) font:11px/16px Arial, Helvetica,sans-serif; /* Estilo de la fuente }

*/ */ */ */

Estilo en un archivo externo de extensión “.css” Finalmente la opción más utilizada, es la de crear un archivo independiente de estilos, de modo que cualquier página que necesite utilizar este estilo, sólo tiene que incluirlo mediante una instrucción similar a la siguiente:



En esta instrucción podemos observar que el archivo con el estilo tiene extensión “.css”. Además en este caso su nombre es “estilo-v3.css” y también vemos que ese archivo está ubicado en un subdirectorio o carpeta con el nombre de “estilos”. Podemos ver este ejemplo sobre el modo de incorporar las hojas de estilo a una página Web, en el siguiente enlace: PRÁCTICAS El ejemplo que proponemos a continuación, permite ver las diferentes hojas de estilo que podemos utilizar con una misma página con los diferentes modos de hacer uso de ellas. Pulse el enlace y abrirá una página Web con los enlaces adecuados… EjemplosCSS/index-ej-css.html

CÓMO ESCRIBIR EL CONTENIDO HTML: Para crear el documento HTML al que le vamos a aplicar el diseño mediante CSS, no hay que hacer ninguna operación previa, aunque es recomendable utilizar el modelo de cajas, mediante el que estructuramos las diferentes zonas en bloques rectangulares tal y como hemos podido observar en el ejemplo anterior. Para crear el documento HTML podemos utilizar cualquier editor de texto plano o también editores HTML, nosotros recomendamos el KIT-HTML, gratuito y muy potente. ENLACES RELACIONADOS HTML-KIT http://www.HTMLKIT.es A la hora de crear una página Web es preciso seguir cierto orden en lo que a la estructura de directorios y archivos se refiere, y es importante establecerla de forma previa y mantenerla durante todo el proceso de creación. Nosotros vamos a establecer la siguiente estructura de directorios, en los ejemplos que vamos a seguir en todo este curso:

Ejercicio: En el ejemplo anterior podemos ver el código fuente de cada uno de los archivos de contenido (HTML) y de diseño (CSS), con comentarios sobre dichos códigos de modo que resulte sencillo comprender lo que hace cada una de las líneas de instrucciones del código. Pero lo ideal para aprender hojas de estilo es practicarlas, de modo que partiendo de todo lo visto hasta ahora (especialmente de los ejemplos), os propongo el siguiente ejercicio: 1. Crear una página Web sobre un tema libre (relacionado con el currículo de 2º de Bachillerato) siguiendo las indicaciones que detallamos a continuación. 2. Utilizar una página inicial compuesta por las capas que se utilizan en la versión tres del ejemplo (principal, encabezado, navegación, contenido y pie). 3. La página principal debe seguir el formato e indicaciones de la siguiente página:

4. Debe tener al menos cinco apartados, aunque alguno de ellos puede estar destinado a ejercicios, curiosidades, enlaces, etc. 5. Cada uno de los apartados debe seguir la estructura e indicaciones de la siguiente página de muestra:

6. Finalmente debes aplicar un diseño personal mediante un archivo independiente de estilos.

Direcciones de Interés: Consorcio de las Tres W. http://www.w3c.es/ Guía de Referencia Rápida CSS http://www.w3c.es/Divulgacion/GuiasReferencia/CSS21/ Guía de Referencia Rápida XHTML http://www.w3c.es/Divulgacion/GuiasReferencia/XHTML1/ Ejemplos del uso de CSS, ZenGarden http://www.csszengarden.com/ Ejemplos de uso de CSS en español, Camaleón http://www.camaleoncss.com/1/p1/camaleon.html Web Developer http://chrispederick.com/word/webdeveloper/ Manual de CSS http://www.manualdecss.com/ Tutoriales CSS en Scour Design http://www.scourdesign.com/articulos/tutoriales/css/ Plantillas de Diseño. Open Source Web Design. http://www.oswd.org/ Plantillas CSS con diversas técnicas http://www.intensivstation.ch/templates/