|
Home / Docencia / Introducción a HTML | |
Fases de Diseño de un sitio Web: IV. Fase Post-Producción |
|
|
MotivaciónHTML fue diseñado originalmente para intercambiar información textual en entornos académicos por tanto sus etiquetas sólo contenían información sobre la organización lógica del contenido (titulo, párrafo, etc.) y no sobre su presentación. Debido a esto una misma página podía verse de forma distinta dependiendo del navegador, el ordenador y sistema operativo sobre el que estuviese instalado y la configuración del usuario. A medida que Internet creció y fue adquiriendo popularidad el diseño de la páginas web comenzó a adquirir más importancia y se hicieron patentes algunos problemas del lenguaje. Como ya hemos visto en HTML es difícil controlar la presentación de los elementos en pantalla (márgenes, sangrado de texto, interlineado, colocación de las imágenes, etc.) las soluciones más ampliamente aceptadas por los diseñadores de páginas web consistían en:
El estandar CSS (Cascading Stylesheets)Para solucionar los problemas de control sobre los aspectos de presentación el W3C : World Wide Web Consortium (organismo responsable de la web) incluyo la definición de estilos de presentación en HTML 4.0 mediante la especificación CSS (del inglés Cascading Stylesheets que significa hojas de estilo en cascada). CSS permite definir como se presentan en pantalla cada uno de los elementos definidos en HTML. Esto permite:
|
|
Declaración de reglas de estiloLas hojas de estilo están formadas por reglas. Cada regla define un estilo y el contexto en el que se aplica.
Las reglas de estilo pueden definirse en distintos sitios:
Agrupación y diferenciación de reglas de estiloLas reglas de estilo se pueden agrupar y diferenciar de varias formas:
|
|
Mediante el atributo style se puede alterar el aspecto del elemento al que se le aplica. Se suele utilizar cuando se aplica un estilo al documento en su conjunto y se quiere hacer una modificación puntual en un elemento. Sólo se recomienda su uso de forma puntual y no para dar estilo a un documento ya que supondría sobrecargar el código con demasiadas etiquetas de estilo.
En este caso el selector es la propia etiqueta y el estilo se declara en
el atributo style.
Cuando el estilo no se quiere aplicar a todo el contenido de una etiqueta se suele utilizar la etiqueta <div>...</div> para seleccionar la porción del código HTML a la que queremos dotar de estilo. En el siguiente ejemplo tenemos un párrafo rodeado por las etiquetas <p>...</p> si aplicamos el atributo style al párrafo todo su contenido se vería en azul, pero como sólo queremos que se vea una palabra la seleccionamos mediante las etiquetas <div>...</div>
EjercicioTareaPractica la aplicación de estilos a elementos individuales Procedimiento
|
Solución:
Debería verse
Observaciones
|
|
Todas las reglas de estilo aplicables a un documento se puden definir conjuntamente
al principio del mismo, en la cabecera (<head>). De este
modo el estilo definido para un elemento se aplica todas las veces que el elemento
aparezca en el interior del documento evitando tener que añadir un atributo
style a cada elemento individual. Las reglas de estilo así
definidas aplican a todo el documento pero no se pueden reutilizar para documentos
distintos. En la siguiente imagen se puede ver un ejemplo de uso.
Las etiquetas <style>...</style> definen el principio y fin de la declaración de las reglas de estilo. El atributo type indica al navegador el tipo de contenido MIME que va a encontrar a continuación. El contenido de la hoja de estilo viene encerrado entre comentarios HTML (<!--comentario-->) esto permite que el navegador ignore la hoja de estilo si no tiene soporte para el tipo de contenido indicado en el atributo type EjercicioTareaPractica la aplicación de estilos en la cabecera del documento. Procedimiento
|
Solución:
Debería verse
Observaciones
|
|
Todas las reglas de estilo aplicables a un documento se puden definir en un
fichero aparte (fichero.css) que denominaremos hoja de estilo.
Para aplicar este estilo a un documento HTML será necesario establecer
un vínculo entre el documento html (fichero.html) y la
hoja de estilo (fichero.css). Esto se hace por medio de la etiqueta
<link> y los atributos rel, href y type
tal y como se indica a continuación. Donde el atributo rel
hace referencia que el enlace es a una hoja de estilo. El atributo type
indica el tipo de hoja de estilo (en este caso texto) y el atributo href
hace referencia a la dirección URL donde está ubicado el fichero.css.
Esta dirección puede ser absoluta, relativa, local o remota.
Las reglas de estilo así definidas permiten agrupar el estilo de
un conjunto de documentos en un único fichero. Para aplicar el estilo
a un conjunto de documentos sólo habría que crear un enlace
en la cabecera de cada uno de ellos que referenciase el fichero.css tal.
Si posteriormente se quiere modificar el estilo de todos los documentos
sólo sería necesario modificar el fichero.css evitando
tener que retocar cada documento HTML por separado y facilitando por tanto
el mantenimiento. En la siguiente figura puedes ver un ejemplo: EjercicioTareaPractica la creación de hojas de estilo en ficheros independientes y la vinculación de documentos HTML con hojas de estilo externas. Procedimiento
|
Solución:
Observaciones
|
|
En esta fase del proyecto trataremos de separar la estructura lógica de las páginas de los aspectos relacionados con su presentación. Para ello crearemos una hoja de estilo telemaco.css en la que añadiremos los aspectos de formato comunes a todas las páginas:
Para vincular cada una de las páginas con la hoja de estilo utilizaremos
la etiqueta
Modificaremos la página principal index.html para
eliminar los elementos de formato que incluimos en los párrafos y en su
lugar los etiquetaremos como "primero" y
"resumen". En a figura puedes ver la hoja de
estilo comentada y el resultado de aplicar la hoja de estilo sobre la
página principal.
Aplicación prácticaTarea
Crea una hoja de estilo para agrupar los aspectos de formato comunes a
todas tus páginas y vincula cada página con la hoja de estilo utilizando
la etiqueta
Procedimiento
|
Solución:
Observaciones
|
|