Unidad 1. Mi primera página web (I)

1.1. Introducción

El objetivo de este curso es enseñar a crear páginas web, partiendo desde cero y usando

herramientas gratuitas.

El lenguaje que se utiliza para crear una página web es el HTML, Hyper Text Markup Lenguage

(Lenguaje de Marcas de Hypertexto.

Vamos a explicar brevemente que queremos decir con esto. Lo fundamental para escribir páginas

web es saber HTML pero no es suficiente. Si quieres poner una imagen en tu página necesitarás

saber un poco sobre gráficos web, para recortar la imagen al tamaño adecuado, si quieres poner un

menú desplegable es conveniente que conozcas algo sobre JavaScript, si quieres recoger datos de

los usuarios mediante un formulario es conveniente hacerlo con un lenguaje tipo PHP.

También es conveniente utilizar un editor web para facilitar la escritura de páginas web, como

KompoZer, para que tu página sea agradable es conveniente saber algo sobre diseño web, y por

último para que todo el mundo vea tu trabajo necesitarás subir tu página a un servidor de Internet y

darla a conocer.

Pues bien, todo esto y un poco más es lo que hay en este curso. Además hemos intentado

explicarlo de forma que lo pueda entender cualquier persona sin conocimientos previos sobre todos

estos temas. Dicho así, parece una misión casi imposible, esperamos que sigas todo el curso y

llegues al final cumpliendo estas expectativas. Es un reto complicado pero esperamos crear un

curso que sea un punto de partida a este apasionante mundo de la comunicación global a través de

Internet y te dote de la visión general que te permita avanzar hasta lograr crear páginas web

atractivas y completas. A final del curso estamos seguros que lograrás crear conocimiento y ponerlo

a disposición de las personas, y algo del espiritu de colaboración y gratuidad desde el que está

hecho este curso quizás llegue a contagiarte un poco. Se acaba dando parte de lo que se recibe.

Por supuesto, tratar todos estos temas en profundidad exigiría un curso de un tamaño enorme,

pero el objetivo es dar una introducción a cada tema, de forma que el alumno se pueda desenvolver

en las tareas básicas y tenga las nociones suficientes para poder ampliar lo que más le interese en

otros sitios. Por esto, al final de los últimos temas hemos puesto unas cuantas direcciones con lo

mejor de la red en ese tema.

1.2. Contenidos

Para que sea más fácil de entender hemos desarrollado el temario de forma progresiva mediante

la creación de un sitio web sobre flores, introduciendo cada concepto según se va necesitando.

Así, primero veremos los conceptos básicos de HTML, escribir texto, darle formato, hiperenlaces,

estilos, etc. Luego explicaremos brevemente el editor KompoZer, luego veremos como estructurar

una página web y un sitio web, más adelante introduciremos el programa Gimp para trabajar con

gráficos, unas ideas para crear gráficos vectoriales, como por ejemplo un logotipo para la página,

con el programa Inkscape. En el siguiente tema introduciremos conceptos sobre JavaScript, y luego

un poco de PHP. En los temas finales, teorizaremos un poco sobre cómo publicar nuestro sitio y

como conseguir que aparezca en los buscadores y tenga visitas.

1.3. Metodología

Como hemos dicho los diversos conceptos los introduciremos según sean necesarios a medida

que vamos desarrollando un sitio web. Primero crearemos una página sencilla para introducir los

elementos básicos de HTML, luego iremos añadiendo elementos a esa página, como un menú,

gráficos, formularios, etc.

En algunos temas, sobre todo al principio, la explicación será un poco más teoría y general.

Muchas veces, encontrarás la opción de probar el código que se está explicando. Te animamos a

que hagas cambios sobre esos ejemplos y los vuelvas a probar, para ver qué sucede.

En otros temas, nos centraremos más en trabajar sobre el sitio de ejemplo, realizando cambios

concretos. Por eso, te sugerimos que vayas creando el mismo sitio, asegurándote de haber aplicado

los cambios explicados en cada tema.

1.4. Alternativas

Crear páginas web es la forma básica de comunicar en Internet, pero no la única, ni la más

adecuada para todos los casos.

Si te gusta la informática y quieres tener tu propio sitio web como una afición, o si quieres crear un

sitio web para tu club de fútbol, tu pequeña empresa o para dedicarte profesionalmente al mundo de

Internet, este curso, probablemente, te interesará mucho. Si en cambio la tecnología te espanta un

poco y sólo te interesa la parte más literaria seguramente haya otras formas de publicar en Internet

que te resulten más adecuadas, como, por ejemplo, los blogs. Escribir contenidos en un blog es más

sencillo que crear una página web aunque menos flexible. En cualquier caso, puedes empezar a leer

el curso, quizás te sorprenda lo sencillo que es crear una página web.

1.5. Servidores y direcciones URL

Cuando visitamos páginas web en realidad estamos accediendo a archivos en un servidor web.

La dirección o URL tiene este formato:

http://www.nombredominio.com/directorio/paginaweb.htm

Donde http:// es el protocolo y www indica el sistema de páginas web. Habrás observado que

no hace falta escribir esto en el navegador. Pero es porque el navegador se encarga de añadirlo, no

porque nos sea necesario. nombredominio.com es el nombre del sitio. Al ir directamente ahí,

vamos a su página de inicio. La última parte indica el archivo del sitio que estamos viendo. En este

caso, una página llamada paginaweb.htm que está en una carpeta llamada directorio.

Podemos visitar una dirección desde un buscador o desde un enlace en otra página. Podemos

teclear la dirección en la barra de direcciones del navegador o acceder desde nuestros favoritos.

Internet está formado por un conjunto de servidores conectados. Un servidor es un ordenador

conectado a la red de acceso a Internet que dispone de un programa que es capaz de recibir una

URL y devolver una página web al que hizo la petición.

Podríamos decir que Internet está formado por una gran cantidad de ordenadores que

pueden intercambiar información entre ellos. Es una gran red mundial de ordenadores.

Los ordenadores se pueden comunicar porque están unidos a través de conexiones y gracias a

que utilizan un lenguaje o protocolo común, el TCP/IP.

Según el esquema que podemos ver en la imagen, un usuario se conecta a la red (a través de un

módem o un router, ya sea vía línea telefónica, cable, satélite, etc...). A partir de este momento el

protocolo TCP/IP entra en juego, gracias a él puedes comunicarte con tu Proveedor de servicios

de Internet (ISP) dándole a conocer tu dirección física.

Utilizando TCP/IP, el ISP asigna una dirección IP a tu PC y en ese momento se te da acceso a la

red.

Cuando queremos acceder a una página proporcionamos un dominio que es traducido en los

Servidores DNS y localizado. Cuando sabemos en qué Servidor Web se encuentra la página que

queremos visitar se procede a su descarga y visualización en el navegador del PC.

1.6. ¿Qué es una página web?

Una página web es un documento de texto con marcas, llamadas etiquetas (tags en inglés).

Cuando este documento se ve a través de un navegador web, las etiquetas se interpretan y se

visualiza el documento como una página web. Las etiquetas no se muestran pero determinan el

aspecto de la página, y otras características, por ejemplo, si el texto es un enlace, en la etiqueta se

indica la página a la que nos lleva el enlace.

Por lo tanto, si somos capaces de escribir un documento de texto, seremos capaces de escribir

una página web. Sólo necesitamos conocer el lenguaje de las etiquetas o HTML.

Es conveniente que vayas probando las cosas a medida que las explicamos. Para ello deberás de

tener dos ventanas abiertas, una con el curso y otra con el programa correspondiente.

Vamos a comenzar por escribir una página web muy sencilla. Para ello utilizaremos un editor de

texto sin formato, como puede ser el Bloc de notas (Notepad) incluido en Windows.

Escribiremos el siguiente código. Más adelante ya veremos qué es cada elemento:

<html>

<head>

<title>Mi primera página</title>

</head>

<body>

<p>Hola mundo</p>

</body>

</html>

Una vez escrito, vamos a guardarlo. Pero antes de continuar, debemos de explicar que es la

extensión de un archivo. La extensión indica de qué tipo es un archivo. La extensión son las tres

letras que van después del punto al final del nombre de un archivo (por ejemplo, imagen.gif o

documento.doc). Puedes abrir cualquier carpeta para comprobarlo. Si no puedes ver las

extensiones, es porque Windows las oculta. Si es tu caso, puedes hacer que las muestre a través

del menú Organizar, Opciones de carpeta y búsquedas, pestaña Ver, desmarcando la opción

Ocultar extensiones de archivo para tipos de archivos conocidos, en Windows Vista. En

Windows XP encontramos esta opción en el menú Herramientas, Opciones de carpeta, también

en la pestaña Ver.

Vamos a continuar guardando la página. Pulsamos en el menú Archivo y elegimos Guardar.

Introducimos el nombre, por ejemplo Primera. Si ahora pulsásemos Guardar, se guardaría con la

extensión txt, que indica que es un documento de texto sin formato. Para guardarlo como una

página web, debemos de emplear la extensión .htm (o .html). Por lo que completamos el nombre

para que quede Primera.htm y pulsamos Guardar.

Nota: Es conveniente que guardes los archivos creados durante el curso en la misma carpeta.

Ahora, utilizando el Explorador de Windows, abrimos la carpeta en la que hemos guardado el

archivo y hacemos doble clic sobre él. Como el archivo tiene extensión .htm, se abrirá la página con

el navegador que tengamos como predeterminado. Por ejemplo, en Internet Explorer 7, el

resultado se ve así:

Observa que no se muestra todo lo que hemos escrito. Si te fijas en el documento del Bloc de

notas, verás que todo lo que aparece entre los signos < y > no se muestra. Esos signos delimitan

una etiqueta de HTML, y todas las que hemos utilizado siguen el formato

<etiqueta>contenido</etiqueta>. Por ejemplo, la etiqueta <title> contiene el texto que se

mostrará como título de la página, y la etiqueta <p> indica un párrafo con texto normal.

Por lo tanto, un navegador web es una aplicación capaz de interpretar el código HTML, formado

por etiquetas y mostrarlo debidamente formateado. En cualquier momento, podemos ver el código

HTML de la página que estamos viendo. En Internet Explorer, podemos hacerlo desde el menú Ver

→ Código fuente, y se mostrará utilizando el Bloc de notas. En Mozilla Firefox lo hacemos también

desde el menú Ver, eligiendo la opción Mostrar el código fuente de la página (teclas Ctrl + U), y

muestra el código fuente formateado con colores. Puedes probarlo viendo el código fuente de esta

página.

1.7. Un sitio web

Cuando tenemos varias páginas, podemos organizarlas en un sitio web. Un sitio no es más que

una carpeta que se encuentra en un equipo informático, ya sea nuestro ordenador personal o un

potente servidor. La primera carpeta es la carpeta raíz. Por ejemplo, si accedemos a

"www.aulaclic.es", estamos accediendo a la carpeta raíz del sitio de aulaClic.

Cuando escribimos "www.aulaclic.es" en el navegador, en realidad estamos accediendo a la

página www.aulaclic.es/index.htm, es decir, al escribir una dirección que no acaba en .html (o

en .html), el navegador lo interpreta como el nombre de una carpeta y busca en ella un archivo que

se llame index.htm, si no lo encuentra devuelve el mensaje del tipo "No se puede encontrar la

página web".

Tal como lo haríamos con una carpeta de Windows, podemos organizar nuestro sitio con

subcarpetas. Por ejemplo, una carpeta con todas las imágenes, otra con los vídeos, etc.

Coloquialmente, es frecuente referirse a un sitio web sólo como página web, por ejemplo "se ha

actualizado la página web del ministerio", aunque no nos estemos refiriendo a una página en

concreto.

Veremos más detenidamente qué es un sitio web cuando creemos los sitios para nuestras

páginas, más adelante.

Unidad 2. HTML básico

A continuación vamos a ver los elementos básicos o fundamentales del HTML. Primero veremos

la estructura general de las etiquetas, luego la estructura básica de la página, a continuación

empezaremos a colocar cosas en la página, primero texto, luego imágenes, enlaces y por último

hablaremos brevemente del elemento que nos sirve para colocar cada cosa en el sitio que

queramos, las capas.

2.1. Etiquetas

El lenguaje HTML se basa en etiquetas, por eso es importante entender bien la sintaxis de las

etiquetas.

Al realizar nuestro primer ejemplo, hemos visto algunas etiquetas.

Las etiquetas siempre van contenidas entre los signos de desigualdad < y >. Por ejemplo

<body>, <title> o <p>.

Las etiquetas tienen una etiqueta de apertura y una de cierre, marcada por el signo /. Por ejemplo

<body> (apertura) y </body> (cierre). Entre la apertura y el cierre, está el contenido de la etiqueta,

que puede ser texto u otras etiquetas, depende del tipo de etiqueta. Algunas etiquetas, no tienen

contenido, y se cierran sobre sí mismas. Esto se expresa colocando la apertura y el cierre en la

misma etiqueta, como por ejemplo: <br/>, que equivaldría a <br></br>. La etiqueta <br/>

escribe un salto de línea.

Vamos a fijarnos en la apertura de la etiqueta. La primera palabra que aparece es el nombre o

identificador de la etiqueta. A parte, podemos encontrar atributos con sus valores, siguiendo el

formato <etiqueta atributo1="valor" atributo2="valor">. La forma correcta de

escribirlo es escribir el nombre de la etiqueta y los atributos en minúscula, y los valores contenidos

entre comillas dobles. Si un atributo tiene más de un valor, se escriben todos los valores dentro de

las mismas comillas, separados por espacios en blanco, por ejemplo <etiqueta

atributo="valor1 valor2">.

Hasta hace poco, lo más usual a la hora de escribir páginas web era que cada etiqueta tuviera

bastantes atributos, que se referían a propiedades del formato o representación de los elementos.

La tendencia actual es la de separar el formato del contenido, descartando estos atributos,

sustituyéndolos por propiedades de estilo.

Por ejemplo, para escribir la siguiente línea:

Bienvenidos a www.aulaclic.esAntes, sin estilos:

<p align="center"><font color="#993366" size="4" face="Comic Sans MS,

Arial, MS Sans Serif">Bienvenidos a www.aulaclic.es</font></p>

Ahora, con estilos:

<p class="presentacion">Bienvenidos a www.aulaclic.es </p>

Como veremos en el siguiente tema, en otro lugar se definen las características del estilo.

2.2. Estructura básica de la página

Todo el documento HTML viene contenido dentro de la etiqueta <html></html>.

Dentro de la etiqueta <html>, encontramos dos subdivisiones, la cabecera, delimitada por las

etiquetas <head></head> y el cuerpo, delimitado por las etiquetas <body></body>. Por lo tanto,

el aspecto básico de cualquier página web, es el siguiente:

<html><head>

...</head><body>

...</body></html>

La etiqueta <head> contiene información sobre la página. Por ejemplo contiene etiquetas que

pueden decir de qué va la página, el título que debe de mostrar en la barra del navegador, o código

javascript y estilos, que pueden estar en el propio encabezado o como llamadas a otros archivos.

Normalmente, lo que contiene esta etiqueta no se muestra en el navegador.

Iremos viendo lo que puede contener esta etiqueta a medida que nos haga falta. De momento

sólo comentaremos que obligatoriamente debe de contener la etiqueta <title></title>, que

contiene el título de la página, que es lo que se ve en la barra de título del navegador.

En el <body> encontramos el contenido de la página, lo que se ve a través del navegador: texto,

imágenes, enlaces, tablas, etc...

En el siguiente ejemplo, puedes ver que hemos modificado el código que utilizamos en la página

Primera.htm creada en el tema anterior. En él vemos los elementos que hemos comentado. Hemos

añadido la etiqueta <br/> para saltar de línea. Esta es la primera página del sitio que vamos a ir

construyendo a lo largo del curso.

<html><head> <title>Floramics. Amigos de las flores</title></head><body> <p>Bienvenido a Floramics<br /> En esta web encontrarás información sobre la asociación y nuestra colección de fotografías de flores.</p></body></html>

Puedes copiarlo y pegarlo en el bloc de notas para verlo funcionar. Observa como los espacios en

blanco no son tenidos en cuenta, un poco más adelante volveremos sobre este tema.

Luego puedes añadir un salto de línea y un nuevo texto "Tenemos las fotografías organizadas en

diferentes categorías" y volverlo a visualizar.

2.3. Estructura del texto

Ya hemos comentado que todo el texto de la página estará dentro del <body>, que a su vez

estará dentro del <html>. El texto dentro del <body>debe estar dentro de párrafos. En HTML, los

párrafos se identifican con la etiqueta <p></p>. Dentro de los párrafos colocaremos texto e

imágenes, y algunas etiquetas que nos permitan dar formato al texto, pero no podemos tener otros

párrafos anidados.

A su vez, disponemos de encabezados que nos permiten organizar el texto. Los encabezados van

desde el <h1></h1> de mayor tamaño, al <h6></h6>, el más pequeño. Por ejemplo, utilizaríamos

un <h1> para poner el rótulo principal de la página, <h2> para los títulos de los apartados, <h3>

para los apartados de segundo nivel, etc. El texto de cada apartado iría contenido en párrafos

<p></p>.

Una de las peculiaridades del texto, es que los espacios en blanco consecutivos y saltos de línea

no se muestran como en el código fuente. Si hay varios espacios seguidos, sólo se mostrará uno.

Por ejemplo, si en el código fuente escribimos Bienvenido a Floramics se verá Bienvenido

a Floramics. Si queremos poner varios espacios seguidos, utilizaremos el código html para el

espacio, &nbsp;.

El navegador también ignora los saltos de línea. Así si dentro de un párrafo colocamos varios

saltos de línea pulsando Intro, estos no se verán. Como ya vimos para crear un salto de línea

dentro de un párrafo, utilizamos la etiqueta <br />.

Puedes ver todo esto en el siguiente ejemplo:

<html><head> <title>Floramics. Amigos de las flores</title></head><body><h1>Bienvenido a Floramics</h1><h2>Presentación</h2><p> En esta web encontrarás información sobre la asociación y nuestra colección de fotografías de flores.<br />Tenemos las fotografías organizadas en diferentes categorías</p>

<h2>Contacto</h2><p> Si quieres comunicarte con nosotros visita nuestra página de contacto. &nbsp;&nbsp;Te esperamos.</p></body></html>

Puedes probar cómo se ve el resultado, y cambiar los tipos de encabezado.

Es interesante utilizar encabezados, ya que muchos programas podrán generar tablas de

contenido a partir de cómo hayamos estructurado nuestra página.

A la hora de escribir texto, hay más cosas que hemos de tener en cuenta relativas al idioma y a

los caracteres especiales, como las letras acentuadas y la ñ.

Avanzado: Texto y caracteres especiales

Cuando escribimos texto, hemos de tener en cuenta ciertas consideraciones.

Por ejemplo, quién va a ver la página. No todos los idiomas tienen los mismos caracteres. Por

ejemplo, no todos los idiomas tienen las letras acentuadas, y la letra ñ es exclusiva del español. Esto

puede producir que estos caracteres no se vean correctamente, dependiendo del navegador y la

región.

Una forma de solucionar esto, es indicar en la página web que codificación utilizamos. Por

ejemplo, podemos hacerlo añadiendo la siguiente etiqueta a nuestra página:

<meta http-equiv="content-type" content="text/html; charset=iso-8859-1"/>

La etiqueta informa de que es una página de texto/HTML, y que utiliza el juego de carácteres iso-8859-i. Como esta etiqueta da información sobre la página, la incluiremos en el <head>.

Pero existen otros caracteres especiales que no podemos mostrar en la página. Por ejemplo, si

queremos escribir 1<2, el navegador interpretará < como una apertura de etiqueta. Por ello, todos

los caracteres se pueden representar como un código con el formato &codigo;. Por ejemplo, si

conocemos el código ASCII de un carácter, podemos escribirlo en el código fuente como &#num;.

Así, la letra ñ, cuyo código ASCII es 241, se podría escribir &#241;. Los caracteres más utilizados,

tienen también un código html propio, como vemos en la siguiente tabla:

Carácter Representación

< &lt;

> &gt;

á &aacute;

Á &Aacute;

é &eacute;

É &Eacute;

í &iacute;

Í &Iacute;

ó &oacute;

Ó &Oacute;

ú &uacute;

Ú &Uacute;

ñ &ntilde;

Ñ &Ntilde;

Espacio &nbsp;

Carácter Representación

€ &euro;

ç &ccedil;

Ç &Ccedil;

ü &uuml;

Ü &Uuml;

& &amp;

¿ &iquest;

¡ &iexcl;

" &quot;

· &middot;

º &ordm;

ª &ordf;

¬ &not;

© &copy;

® &reg;

Utilizar estos códigos nos asegura que no haya ningún problema al visualizar nuestra página.

Así, si escribimos en el código fuente &quot;&iquest;Ser&aacute; Mar&iacute;a?

&quot; podremos leer "¿Será María?".

Otra de las peculiaridades del texto, como ya hemos visto, es que varios espacios en blanco se

mostrarán como uno solo. Por ejemplo, si en el código fuente escribimos hola mundo se verá hola

mundo. Si queremos poner varios espacios seguidos, utilizaremos el código html para el espacio,

&nbsp;.

El navegador también ignora los saltos de línea. Así si dentro de un párrafo colocamos varios

saltos de línea pulsando Intro, estos no se verán. Para crear un salto de línea dentro de un

párrafo, utilizamos la etiqueta <br />.

Si queremos que los saltos de línea y espacios se muestren igual que en el código fuente,

podemos utilizar la etiqueta <pre></pre> en vez del párrafo. Aunque de esta forma no podremos

utilizar otro tipo de formatos.

Otra cosa que se muestra en el código pero no en el navegador son los comentarios. Podemos

escribir un comentario con el siguiente formato <!-- contenido del comentario -->. En el

comentario podemos poner texto y etiquetas, que el navegador ignorará.

Puedes ver todo esto en el siguiente ejemplo:

<html>

<head>

<title>Texto</title>

<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />

</head>

<body>

<p>Caracteres especiales:</p>

<p>El &ntilde;and&uacute; y la cig&uuml;e&ntilde;a.<br />

3 &gt; 2, y 2 &lt; 4<p>

<p>Aqu&iacute; hay 5 espacios [ ]</p>

<p>Aqu&iacute; s&iacute; que hay 5 espacios [&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;]</p>

<p>Este p&aacute;rrafo

tiene saltos

en el c&oacute;digo fuente</p>

<p>Aqu&iacute;<br />y aqu&iacute;<br />hay saltos</p>

<pre>En la etiqueta pre

si aparecen

saltos y es pa ci os</pre>

<p>En el &uacute;ltimo p&aacute;rrafo<!--el comentario solo

se ve en el c&oacute;digo--> hay un comentario.</p>

</body>

</html>

Pruébalo, cambiando lo que quieras:

2.4. Imágenes

Uno de los elementos más utilizados en una página web son las imágenes, tanto para mostrar

información como parte del propio diseño de la página. Pueden ser fotografías o gráficos creados

por programas como Photoshop, Illustrator. etc. Más adelante veremos cómo utilizar dos programas

gratuitos de este tipo: Gimp e Inkscape.

Básicamente, en páginas web nos encontramos tres tipos de imágenes: GIF, PNG y JPG.

Cuando queremos introducir una imagen, lo hacemos con la etiqueta <img />. Los atributos que

como mínimo ha de tener esta etiqueta son los siguientes:

<img src="ubicacion/imagen.gif" alt="texto alternativo" />

Lo primero que debemos de saber es dónde está la imagen, su ubicación, que es lo que debe

contener el atributo src:

Si la imagen está en una página Web, basta con saber su ruta, por ejemplo http://www.aulaclic.es/logo_ac1.jpg. Esto es lo que se llama una dirección absoluta.

Si la imagen está en el mismo sito que la página web, podemos utilizar una dirección relativa,

como imagen.gif o imagenes/imagen.gif.

Cuando el navegador no encuentre la imagen ubicada en scr no podrá mostrar la imagen. En

su lugar puede mostrar una imagen de error. Además se mostrará el texto contenido en el atributo

alt, ya que ésa es su función: mostrar un texto alternativo cuando no se puede mostrar la imagen.

Esto es importante para la accesibilidad a la web. Imaginemos que tenemos unas imágenes que

hacen de botón para ir a partes de nuestra web, como Inicio o Galería. Si no ponemos el alt, y no

se muestran las imágenes, el usuario no podrá navegar por nuestro sitio.

Aunque no son obligatorios, es muy frecuente añadir a la imagen los atributos height (alto) y

width (ancho), introduciendo en ellos las dimensiones de la imagen, en píxeles. Al cargar una

página, el navegador muestra primero el texto y después las imágenes. Si conoce las dimensiones

de cada imagen, puede dejar un hueco reservado para ellas. Si no, pondrá el texto y luego irá

desplazándolo para colocar las imágenes, lo que hará incómodo leer la página hasta que no esté

totalmente cargada.

Otro atributo frecuente en las imágenes es title. Si lo ponemos en la imagen, al posar el cursor

sobre ella se mostrará su valor. En IE7, cuando se omite title, se muestra el contenido de alt.

Por ejemplo, para el siguiente código se muestra la siguiente imagen:

<img src="comunes/aulaclic.gif" alt="aulaClic" width="91" height="41"

title="El logo de aulaClic" />

Los valores de height y width puedes verlos al seleccionar la imagen desde el Explorador de

Windows o desde un programa de gráficos. Si cambias esos valores la imagen también cambiará. Si

reduces los valores, manteniendo la proporción, la imagen se verá más pequeña, si los aumentas se

verá más grande, pero con peor calidad, como puedes ver en el siguiente ejemplo:

<img src="comunes/aulaclic.gif" alt="aulaClic" width="126" height="56"

title="El logo de aulaClic" />

Para aumentar o disminuir una imagen es conveniente utilizar un programa gráfico, ya que estos

programas tienen opciones para optimizar el tamaño de las imágenes. En el tema 9 veremos cómo

hacerlo con el programa gráfico Gimp.

Vamos a añadir la siguiente imagen a nuestra página de Floramics. La imagen se encuentra en

graficos/flor_ejemplo2.jpg

Hemos reducido su tamaño variando los atributos, lo cual no es una buena técnica ya que,

aunque se ve bien, se tiene que cargar una imagen grande para luego verla más pequeña.

Este es el código:

<html><head> <title>Floramics. Amigos de las flores</title></head><body><h1>Bienvenido a Floramics</h1><h2>Presentación</h2><p> En esta web encontrarás información sobre la asociación y nuestra colección de fotografías de flores.<br />Tenemos las fotografías organizadas en diferentes categorías.</p><img src="graficos/flor_ejemplo2.jpg" width="150" height="150" alt="No se encuentra esta imagen" /><h2>Contacto</h2><p> Si quieres comunicarte con nosotros visita nuestra página de contacto. &nbsp;&nbsp;Te esperamos.</p></body></html>

Puedes probar cómo se ve el resultado, y cambiar el tamaño de la imagen:

Por último, a la hora de elegir una imagen, hemos de tener en cuenta que para poder mostrarla, el

navegador debe de descargarla primero. Y es fácil que una sola imagen ocupe más tamaño que el

resto de elementos de la página. Por eso hemos de intentar optimizar al máximo las imágenes, e

intentar que "pesen" lo menos posible, es decir que su tamaño en Kb. sea bajo. El sentido común

nos dice que cuanto más grande sea la imagen, más ocupa, por lo tanto, hay que procurar usar

imágenes lo más pequeñas posibles, siempre que lo que queramos mostrar se vea con suficiente

nitidez.

Pero dos imágenes del mismo tamaño pueden tener pesos diferentes, ya que una de ellas puede

tener más resolución de la que es necesaria para que se vea bien. Es decir que aparte del tamaño

influye la resolución, para optimizar la resolución de las imágenes conviene utilizar un programa

gráfico, ya que estos programas tienen opciones para ello. En el tema 10 veremos cómo hacerlo con

el programa gráfico GIMP.

2.5. Enlaces

Cualquier página web tiene imágenes o texto, que al pulsarlos nos llevan a otra página del mismo

sitio, o a una página de un sitio distinto. Esto es un enlace o hiperenlace (en inglés link o hyperlink)

también llamado hipertexto o hipervínculo.

Un enlace se diferencia del texto normal porque al colocar el cursor encima, este cambia de forma

y pasa de una flecha a una mano. También es muy frecuente que los enlaces aparezcan

subrayados, ya que es la opción por defecto que les asigna el HTML.

En HTML, el enlace se identifica con la etiqueta <a></a>. La forma más básica de un enlace es

la siguiente:

<a href="archivo_enlazado">contenido del enlace</a>

El atributo href indica la dirección (URL) a la que se enlaza, que normalmente es un archivo

html, por ejemplo http://www.aulaclic.es/index.html . El contenido del enlace es lo que el usuario

ve en la página y que al pulsar sobre él nos lleva al enlace. Normalmente es texto o una imagen, en

el siguiente ejemplo es el texto aquí.

Pulsa <a href="http://www.aulaclic.es">aquí</a>.

El atributo href puede ser una dirección absoluta, como

http://www.aulaclic.es/paginasweb/ejercicios/citas_celebres.htm, o una dirección relativa, como

ejercicios/citas_celebres.htm, de la misma forma que vimos para las imágenes.

Es muy común añadir a los enlaces el atributo title, para que muestre información sobre el

destino del enlace cuando el usuario deje unos instantes el cursor encima del enlace. Por ejemplo:

<a href="http://www.aulaclic.es" title="Visita la web de

aulaClic">aqu&iacute;</a>.

Por defecto, el enlace se abrirá en la misma ventana. Si queremos que se abra en una nueva

ventana, podemos utilizar el atributo target="_blank". Aunque, el W3C, el organismo que regula

los estándares del HTML desaconseja su uso, con la idea de que se debe permitir al usuario decidir

si quiere abrir el enlace en la misma u otra ventana pulsando con el botón derecho del ratón sobre el

enlace, el atributo target se sigue utilizando porque la mayoría de los usuarios pulsan directamente

sobre el enlace, sin usar el botón derecho. Así pues si en nuestra página queremos informar sobre

la existencia de otra página del mismo tema, colocaremos un enlace a ella y le pondremos el

atributo target="_blank" para evitar que el usuario se vaya a esa página y no se acuerde de

volver a la nuestra.

Normalmente utilizaremos enlaces para navegar por nuestro sitio. Hemos de evitar enviar al

usuario a páginas en las cuales no sepa como volver a la página anterior o como ir a la página

principal. Siempre es mejor añadir un enlace volver, que confiar en que el usuario utilice el botón

Atrás del navegador. Más adelante, veremos como diseñar un buen sistema de navegación para

nuestro sitio web.

Aquí puedes ver un ejemplo con enlaces e imágenes:

<html><head> <title>Floramics. Amigos de las flores</title></head><body><h1>Bienvenido a Floramics</h1><h2>Presentación</h2><p> En esta web encontrarás información sobre la asociación y nuestra colección de fotografías de flores.<br />Tenemos un índice alfabético con todas las fotografías, o puedes verlas organizadas en diferentes categorías.</p><img src="graficos/flor_ejemplo2.jpg" width="150" height="150" alt="No se encuentra esta imagen" /><p>Interesante enlace sobre flores: <a href="http://www.mundoflores.net">Mundoflores</a><h2>Contacto</h2><p> Si quieres comunicarte con nosotros visita nuestra página de contacto. &nbsp;&nbsp;Te esperamos.</p></body></html>

Un enlace también puede llevarnos a una parte concreta dentro de una página. Por ejemplo, si la

página es muy larga podemos poner un enlace que nos lleve al principio de la página.

Avanzado: Enlaces

Enlaces en la misma página:

También podemos enlazar con un elemento concreto de una web, con un determinado párrafo o

una imagen. Para ello, primero debemos de identificar el elemento con el atributo id, y darle un

valor que debe de ser único en la página. Por ejemplo, para enlazar con el título del apartado 2 de la

página pagina1.htm, iríamos a su encabezado y añadiríamos el id de la siguiente forma <h2

id="ap_2">. Para enlazar con este apartado, debemos de escribir la dirección de la página # y el

id, por ejemplo <a href="pagina1.htm#ap_2">. Si el elemento se encuentra en la misma

página, podemos omitir la dirección de la página y escribir directamente <a href="#ap_2">. Otra

opción, en vez de añadir el atributo id a un elemento, es crear un marcador y apuntar a él, con la

estructura <a name="nombre" id="nombre"></a>.

Enlaces a otras páginas:

Aunque lo más normal es enlazar con otra página web, también podemos enlazar a otros tipos de

archivos como gráficos o archivos zip. Al enlazar con un archivo .zip se abrirá una ventana para que

el usuario pueda descargárselo y guardarlo en su ordenador.

Existen otros en formato de enlace, que no enlazan con archivos. Por ejemplo, los enlaces que

comienzan por mailto: sirven para enlazar con una dirección de correo, y al pulsarlos, se abre el

gestor de correo predeterminado, con un nuevo mensaje para esa dirección. Los enlaces ftp

enlazan con cuentas FTP.

Puedes ver todo esto en el siguiente ejemplo:

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

<title>Imágenes y enlaces</title>

</head>

<body>

<h1>Im&aacute;genes y enlaces</h1>

<p id="primero">&Eacute;ste es el primer p&aacute;rrafo. <a href="#ultimo">Ir al &uacute;ltimo</a>.</p>

<p>Aqu&iacute; tenemos la imagen de un gatito, pon el cursor sobre ella:<br />

<img src="graficos/gatito.gif" width="199" height="164" alt="gatito" title="¡Qué a gusto duerme!" /></p>

<p>Aqu&iacute; una imagen que no existe <img src="noimagexxx.png" width="50" height="50" alt="Por eso muestra el ALT" />.</p>

<p>Aqu&iacute; tenemos un <a href="http://www.aulaclic.es">enlace a aulaClic</a>, con una direcci&oacute;n absoluta.</p>

<p>Y si pulsas sobre esta imagen <a href="index.htm"><img src="comunes/aulaclic.gif" alt="aulaClic" width="91" height="41" /></a>

ir&aacute;s al &iacute;ndice del curso.</p>

<p><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /></p>

<p id="ultimo">&Eacute;ste es el &aacute;ltimo p&aacute;rrafo. <a href="#primero">Volver al primero</a>.</p>

</body>

</html>

Pruébalo y edita lo que quieras.

2.6. Divisiones o capas

Una etiqueta muy utilizada es la etiqueta <div></div>. Esta etiqueta forma una caja, un

rectángulo, igual que el párrafo. Pero mientras que el párrafo es más común utilizarlo para contener

texto, en un div podemos colocar lo que queramos, siempre que respetemos la anidación. Esta

etiqueta nos resultara muy útil para distribuir los elementos en nuestras páginas.

Esta etiqueta es denominada de muchas formas: divisiones, capas, cajas, contenedores. Así que

puede que a lo largo del curso utilicemos estos nombres para referirnos a ellas.

Por ejemplo, si queremos colocar la imagen de nuestro ejemplo en la parte derecha, crearemos

una capa con el estilo "flotar a la derecha" y pondremos la imagen dentro. Más adelante

explicaremos el estilo "flotar a la derecha" style="float: right".

<html><head> <title>Floramics. Amigos de las flores</title></head><body><h1>Bienvenido a Floramics</h1><h2>Presentación</h2><p> En esta web encontrarás información sobre la asociación y nuestra colección de fotografías de flores.<br />Tenemos las fotografías organizadas en diferentes categorías.</p><div style="float: right"><img src="graficos/flor_ejemplo2.jpg" width="150" height="150" alt="No se encuentra esta imagen" /></div><h2>Contacto</h2><p> Si quieres comunicarte con nosotros visita nuestra página de contacto. &nbsp;&nbsp;Te esperamos.</p></body></html>

Unidad 3. Aspecto de la página. Estilos básicos

Hasta ahora hemos aprendido a utilizar los elementos básicos de HTML para escribir texto,

imágenes y enlaces, pero los resultados han sido muy pobres desde el punto de vista estético. A

continuación vamos a ver cómo poner "guapa" nuestra página formateando el texto, con bordes,

márgenes y fondos. Veremos un concepto muy importante y potente: el estilo CSS. El aspecto de la

página se controla con los estilos CSS.

Por ejemplo, añadiendo estilos CSS a la página de nuestro ejemplo obtenemos este resultado.

Los estilos que hemos añadidos son los que puedes ver en esta imagen y que vamos a comentar

a continuación:

3.1. Estilos

La forma en que se ven todos los elementos de nuestra página web depende del estilo.

El estilo se compone de distintas propiedades y sus valores correspondientes. Las propiedades

pueden ser el color de la fuente, el tamaño, la alineación, los márgenes, etc... Los valores dependen

de cada propiedad, por ejemplo, a la propiedad color le podemos asignar valores como red (rojo),

blue (azul), ... y a la propiedad tamaño fuente le podemos asignar un valor en porcentaje 100%,

120%, ... o en pixels 12px, 15px, ....

El formato a seguir para definir una propiedad es: propiedad: valor; o propiedad:

valor1 valor2 valor3; si puede tener varios valores.

Por ejemplo, si queremos que el texto sea de color rojo y un tamaño de fuente de 120%,

escribiríamos el siguiente estilo:

color:red; font-size:120%

y obtendríamos el siguiente resultado:

Texto rojo a 120%

¿Dónde escribimos el estilo? Hay varias formas de hacerlo, como vamos a ir viendo a lo largo del

curso, pero lo más recomendable es agrupar todas las declaraciones de estilos en un solo lugar,

definiendo un bloque dentro de la etiqueta Head que contenga la definición de estilos. Para ello,

tenemos que incluir en la etiqueta <style type="text/css"> ... </style> y definir dentro los

estilos correspondientes a cada elemento de nuestra página, como puedes ver al principio de esta

página.

Si queremos que un estilo afecte a todos los elementos de la página, debemos definir un estilo

para la etiqueta body. En esta etiqueta se suele definir el color de fondo y los valores genéricos de

color y tamaño del tipo de letra. En nuestro ejemplo hemos definido el estilo del body así:

body {font-family: Verdana,Arial,sans-serif;

font-size: 15px;

color: #735846;

text-align: justify;

background-color: #3d2e2a;}

Que quiere decir que, el tipo de letra o fuente, será Verdana, ( o Arial si no existe Verdana, o

sans-serif si no existen las anteriores); el tamaño será 15 pixels, el color será el definido por el valor

#735846, la alienación del texto será justificada y el color de fondo de la página será el #3d2e2a.

A continuación vamos a definir el estilo de la etiqueta H1, de la siguiente forma:

h1{ margin-left: 80px;

margin-top: 20px;

font-size: 180%;

color: #d38451;}

Que quiere decir que todas las cabeceras H1 tendrán un margen izquierdo de 80 pixels (si no se

pone la unidad, se toman pixels), un margen superior de 20 pixels, un tamaño de letra de 180% y el

color #d38451 , como puedes comprobar en la imagen del principio de este punto, la cabecera

"Bienvenido a Floramics" queda así:

Es decir, el color y tamaño de este estilo han prevalecido sobre los ya definidos en la etiqueta

Body.

Siguiendo con nuestro ejemplo, a continuación definimos un mismo estilo para las cabeceras H2 y

H3, pero como queremos que la cabecera H3 tenga un color diferente, volvemos a definir otro estilo

a continuación para H3 con el valor del color deseado. Es decir, el valor válido es el último valor

definido, por esto los estilos se llaman CSS (Cascade Style Sheet. Hojas de estilo en cascada). Más

adelante hablaremos más sobre el orden de aplicación de los estilos.

A continuación definimos el estilo de los párrafos (etiqueta p) con un line-height (interlineado) de

1.5em, una identación de 15 pixels y un margen de 35 pixels.

Con lo definido hasta ahora el texto que escribamos en los párrafos tomará las propiedades

definidas en los estilos de la etiqueta Body y de la etiqueta p, pero ¿Cómo podemos cambiar el

color de una palabra concreta dentro de un párrafo? Para hacer esto tenemos que definir un nuevo

tipo de estilo: las clases. Definir un estilo de clase es muy sencillo, basta escribir un punto y un

nombre elegido por nosotros, por ejemplo:

.azul { font-weight: bold;

color: #6C6CCA;}

Así hemos definido un estilo para la clase azul con tipo de fuente negrita y color #6C6CCA.

Una vez definida la clase, para aplicársela a una palabra basta utilizar la etiqueta span

enmarcando la palabra. Por ejemplo, para asignarle la clase azul a la palabra información (que

está dentro de un párrafo), escribiríamos:

<p>En esta web encontrarás <span class="azul">información </span> sobre la

asociación y nuestra colección de fotografías de flores.</p>

Lo cual, haría que el párrafo se viese así:

Puedes observar que la clase azul ha "añadido" las propiedades color azul y negrita a la palabra

información, manteniendo las otras propiedades que ya tenía por pertenecer a un párrafo. Es decir,

los estilos van sumando propiedades sin eliminar las que ya se tienen.

Independencia entre el contenido y el formato.

Con los estilos CSS conseguimos dar formato a las páginas web de una forma que no existía

hasta que aparecieron ellos: separando el formato del contenido. Por un lado tenemos la definición

de estilos y por otro lado el propio texto de la página. Este concepto es muy importante porque hace

que el trabajo de creación y mantenimiento de una página web sea más sencillo.

Hasta que aparecieron los estilos CSS el formato y el texto estaban mezclados. Ahora se pueden

separar y los estilos CSS nos proporcionan las herramientas para hacerlo, aunque también es

posible mezclarlo todo. En este curso procuraremos hacerlo bien.

Siguiendo esta forma de hacer las cosas obtendremos páginas web en las que cambiar su

aspecto sea algo sencillo, simplemente habrá que modificar un estilo en un solo lugar.

3.2. Formato del texto

Hemos visto los fundamentos de los estilos CSS, ahora vamos a entrar en más detalle viendo las

posibilidades que ofrecen. Empezaremos con el formato del texto y las propiedades que se le

pueden aplicar: color, fuente, tamaño, inclinación, grosor, decoración y mayúsculas/minúsculas.

Color

El color se expresa con la propiedad color. El valor que puede tomar esta propiedad se puede

expresar de varias formas:

a. Un número hexadecimal. Por ejemplo color: #0000FF;,o color: 0x800080;.

b. Tres números entre 0 y 255. Por ejemplo color: rgb(0, 0, 255);.

c. Tres números entre 0 y 100. Por ejemplo color: rgb(10%, 20%, 75%);.

d. Un nombre. Algunos colores se pueden expresar con su nombre en inglés. Por ejemplo color: green; o color: DarkGreen;.

Como todo esto es un poco lioso, hay herramientas que facilitan el trabajo con los colores, por

ejemplo, ColorPic es un pequeño programa gratuito que puedes descargarte en esta dirección:

http://www.iconico.com/colorpic/. Los mejores editores gráficos también incorporan herramientas en

este sentido, más adelante veremos cómo trabajar con colores con el editor Kompozer.

En el tema 8 volveremos a hablar sobre colores, ampliando algunas cuestiones relativas a la

elección de los colores más apropiados.

Fuente

Podemos elegir la fuente (o tipo de letra) a través del atributo font-family. Podemos indicar

cualquier fuente que queramos, teniendo en cuenta que si incluye espacios, debe de ir entre

comillas dobles. Por ejemplo font-family: arial; o font-family: "Times New Roman".

Pero hemos de tener en cuenta que puede que quien vea la página no tenga instalada la fuente

que queramos. Para evitar esto, existen cinco fuentes genéricas que sí se mostrarán en cualquier

equipo: serif, sans-serif,cursive,fantasy, monospace. Esto no quiere decir que sólo debamos de

utilizar estas cinco. El valor de font-family pueden ser varias fuentes, separadas por comas. El

navegador elegirá, comenzando por la derecha, la primera disponible, por lo que es conveniente

terminar por una genérica.

Por ejemplo, font-family:Georgia, "Times New Roman", Times, serif;.

Igual que ocurría con el color, los editores gráficos ofrecen la posibilidad de elegir diferentes

fuentes y previsualizar su forma, más adelante veremos cómo hacerlo con Kompozer.

Tamaño

El tamaño se regula a través de la propiedad font-size. Podemos utilizar cualquiera de las

unidades de tamaño, pero lo más frecuente es utilizar px (pixels), o porcentajes % o em, estas dos

últimas son tamaños relativos al tamaño de la fuente del elemento que está por encima. 100% o

1em, sería el mismo tamaño, mientras que 200% o 2em sería el doble y 50% o 0.5em sería la

mitad.

Si utilizamos valores relativos, facilitamos que se pueda cambiar de tamaño todo el texto de la

página de forma más coherente. Así los discapacitados visuales podrán utilizar el comando para

cambiar el tamaño de texto que tienen los navegadores. http://usalo.es/152/botones-para-cambiar-

el-tamano-de-letra/

Inclinación

Podemos poner una fuente en cursiva utilizando la propiedad font-style. Puede tomar uno de

los siguientes valores:

normal. Coloca el estilo de forma normal, sin inclinación.

oblique. Inclina el texto.

italic. Además de inclinarlo, sustituye la fuente por su versión en itálica si está disponible. Aunque la mayoría de los navegadores no lo hacen.

Grosor

Podemos aumentar el grosor de la fuente, lo que equivaldría a ponerla en negrita, utilizando

font-weight. Puede tomar los siguientes valores:

normal. El texto no se muestra en negrita.

bold. El texto se muestra en negrita.

Nota. En teoría se pueden expresar distintas intensidades de negrita, pero los navegadores no las

muestran.

Decoración

Con la propiedad text-decoration podemos hacer que el texto muestre, por ejemplo, los

distintos tipos de subrayado, con los siguientes valores:

none, el texto se muestra sin ningún tipo de decoración.

underline, el texto aparece subrayado.

overline, el texto aparece sobrerrayado.

line-through, el texto aparece tachado.

blink, el texto parpadea. (No funciona en Internet Explorer, en Firefox 3, si).

Mayúsculas y minúsculas

Aunque escribamos el texto en mayúsculas o minúsculas, luego podemos cambiarlo a través del

estilo. Por ejemplo utilizando text-transform podemos transformar el texto de ejemplo "Es un

texto de EJEMPLO" de las siguientes maneras:

uppercase, para transformarlo todo a mayúsculas. "ES UN TEXTO DE EJEMPLO".

lowercase, para transformarlo todo a minúsculas. "Es un texto de EJEMPLO".

capitalize, para poner la primera letra de cada palabra en mayúsculas. "Es un texto de EJEMPLO".

none, para no realizar ninguna transformación.

Existe otra propiedad que juega con la mayúsculas, font-variant. Esta propiedad puede hacer

que las minúsculas se muestren como mayúsculas de menor tamaño. Vamos a utilizar "Este texto

de Ejemplo".

small-caps, realiza la conversión de las minúsculas. "ESTE TEXTO DE EJEMPLO".

normal, no realiza la conversión.

Nota: El consorcio W3C regula las reglas de estilo para crear el estándar. No obstante, en la

práctica, hay muchas propiedades que los navegadores no representan, o que sólo se muestran en

algunos, por lo que no las utilizaremos. Otras, se ven con algunas diferencias dependiendo del

navegador. Por eso, es conveniente probar nuestra web en los principales navegadores.

Los navegadores más importantes actualmente son:

Internet Explorer

Mozilla Firefox

Safari

Opera

Google Chrome

Veamos un ejemplo con lo que hemos visto:

<html><head> <title>Estilo del Texto</title> <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />

</head><body> <h1 style="font-size:100%">&Eacute;ste es un h1 del mismo tama&ntilde;o que un p&aacute;rrafo normal.</h1> <p>&Eacute;ste es un p&aacute;rrafo normal.</p> <p style="color:red">&Eacute;ste p&aacute;rrafo es de color rojo, con algunas palabras en <span style="color:blue">azul</span>.</p> <p>Podemos cambiar la fuente: <span style="font-family:serif;">y poner este texto en serif</span>, <span style="font-family:sans-serif;">esta parte en sans-serif</span>, <span style="font-family:cursive;"> la familia de esta palabra es cursive</span>, <span style="font-family:fantasy;">tambi&eacute;n tenemos fantasy</span>, <span style="font-family:monospace;">y acabamos con monospace</span>. </p> <p style="font-weight:bold; text-decoration:underline">Este p&aacute;rrafo (<span style="font-weight: normal; text-decoration: none;">menos esta parte</span>) est&aacute; en negrita y subrayado. <span style="text-decoration:overline">Este

fragmento, adem&aacute;s sobrerrayado</span>.</p> <p style="text-transform:lowercase;"><span style="font-size:85%;">&Eacute;STE,</span> EST&Aacute; <span style="font-size:110%;">ESCRITO TODO </span><span style="font-size:120%;">EN MAY&Uacute;SCULAS</span>, <span style="font-size:130%;">Y ADEM&Aacute;S VA</span><span style="font-size:140%;"> CRECIENDO.</span></p></body></html>

Lo normal es dar a la etiqueta body los atributos generales del documento, como el tamaño o el

tipo de fuente.

3.3. Bordes

Podemos agregar un borde alrededor de un elemento html, con la propiedad border. Esta

propiedad engloba las tres propiedades del borde.

color, un color RGB. Se define con la propiedad border-color. Por ejemplo, border-color: blue; o border-color: #F37760.

grosor, normalmente expresado en px. se define con la propiedad border-width. Por ejemplo, border-width: 2px.

estilo, uno de los estilos o aspecto que puede tener el borde. Puede ser cualquiera de los siguientes, que definimos con la propiedad border-style:

none dotted dashed solid double groove ridge inset

outset

Por lo tanto, podríamos definir el borde de un elemento de la siguiente manera:

<p style="border-color:#009933; border-width: 3px; border-

style:double;">bordes</p>

bordes

En este caso, podemos resumirlo con el atributo border, siguiendo el formato border: color

grosor estilo;, lo que quedaría border:#009933 3px double;.

Cada elemento tiene cuatro bordes, que podríamos definir de forma independiente, como

border-top, border-right, border-bottom y border-left. A su vez, para cada uno de

ellos podemos definir su color, grosor y estilo de forma independiente, por ejemplo border-

bottom-color o border-top-width.

3.4. Márgenes

Los elementos html tienen dos márgenes. El margen externo y el margin interno. Ambos se

refieren a la distancia hacia uno u otro lado con respecto al borde del elemento, a su límite,

independientemente de que el borde sea visible o no.

El margen externo se regula con la propiedad margin. El margen exterior es la distancia mínima

que habrá entre el borde exterior del elemento y el elemento siguiente, por cada uno de sus cuatros

lados.

margin: 0margin: 0margin:5pxmargin:5px 35pxmargin:15px

margin: 0margin-left:-20px

Los márgenes no se suman, se solapan, prevaleciendo el mayor. Así, si un párrafo tiene un

margen inferior de 50px y el de abajo un margen superior de 30px, entre ellos quedará un margen

de 50px, por ser el mayor, pero no de 70px.

Otro valor que podemos dar al margen es auto. Este valor da a ambos márgenes el mismo valor,

y nos permite, por ejemplo, horizontalmente un elemento con una anchura determinada.

El margen está fuera del elemento. Observa, por ejemplo que no mantiene el color de fondo del

elemento.

El margen interno se regula con la propiedad padding. Se refiere a la distancia que hay ente el

borde del elemento y su contenido, por ejemplo el texto.

padding: 0padding: 0padding:5pxpadding:5px 35pxpadding:15pxpadding: 0padding-bottom:20px

El padding sí que forma parte del elemento, por eso muestra el mismo fondo.

Por defecto, la mayoría de elementos incluyen un margen exterior, y algunos un margen interior,

que debemos de tener en cuenta.

Veamos un ejemplo con lo que hemos visto. Ve cambiando los valores:

<html><head> <title>Bordes y m&aacute;rgenes</title> <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />

</head><body style="background-color:whitesmoke; font-family: sans-serif;"> <h1 style="font-size: 120%; background-color: #99CCFF; color: #FFFFFF; border-color: #6666FF; border-style: solid; border-width: 0 0 2px 5px; padding-left: 20px;">Bordes y m&aacute;rgenes</h1> <p style="background-color:#99CCFF; margin: 0;">&Eacute;ste es un p&aacute;rrafo sin margen.</p> <p style="background-color:#99CCFF; margin: 0;">&Eacute;ste es otro p&aacute;rrafo sin margen.</p> <p style="background-color:#99CCFF; margin: 20px;">&Eacute;ste es un p&aacute;rrafo con margin:20px.</p> <p style="background-color:#99CCFF; margin: 20px;">&Eacute;ste es un p&aacute;rrafo con margin:20px.</p> <p style="background-color:#99CCFF; margin: 20px; padding: 10px">&Eacute;ste es un p&aacute;rrafo con margin:20px y padding:10px.</p> <p style="background-color:#99CCFF; margin: 20px; padding: 10px; border: cyan 4px inset">&Eacute;ste es un p&aacute;rrafo con margin:20px, padding:10px y border: cyan 4px inset</p> <p style="background-color:#99CCFF; margin-right:25%;">&Eacute;ste es un p&aacute;rrafo con margin-right:25%.<br /> Cambia al cambiar la ventana.</p></body></html>

3.5. Fondo

Otro aspecto que podemos personalizar es el fondo, con la propiedad background.

background-color nos permite establecer el color de fondo del elemento. Por ejemplo,

background-color: green;.

También podemos utilizar una imagen, con la propiedad background:

url(graficos/fondo.png);. En url() introducimos la dirección de la imagen que queremos

utilizar.

Si utilizamos una imagen podemos configurar otras propiedades:

background-repeat, determina si el fondo se repite. Puede tomar los valores no-repeat si no

queremos que se repita, repeat-x para que se repita en horizontal, repeat-y para que lo haga en

vertical o repeat para que llene todo el fondo, que es el valor que toma si no le indicamos otra

cosa.

Si no se repite la imagen de fondo, podemos posicionarla con background-position.

Podemos darle los valores de los cuatros lados (top, right, bottom y left), combinarlos para

colocarla en las esquinas, por ejemplo top left, o centrarla con el valor center. También

podemos introducir medidas, donde el primer valor se refiere a la posición horizontal y el segundo al

vertical, por ejemplo background-position: 50% 50%;.

<html><head> <title>Bordes y m&aacute;rgenes</title> <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />

</head><body style="background-image: url(graficos/fondo_ladrillos.jpg); background-color: #C9B2AC; background-repeat: repeat-y; background-position: center"><h1 style="background-color: #CC9999; color: #FFFFFF;">Fondos</h1><p style="background-color: #CC9999; color: #FFFFFF;">Ve cambiando los valores de background-repeat y background-position.</p></body></html>

3.6. Cómo declarar un estilo

Hasta ahora hemos aplicado los estilos directamente sobre el elemento, utilizando el atributo

style. Esto es lo que se denomina estilos incrustados. Esto es útil cuando tenemos que dar un

estilo muy concreto a un elemento puntual. Pero no cuando queremos aplicarlos a todos los

elementos de una página. Por ejemplo, imaginemos una página con 20 párrafos. Sería muy costoso

cambiar definirlo para cada uno. Y volver a hacerlo cada vez que queramos hacer un cambio.

Para evitar esto, podemos declarar un estilo.

Un estilo se declara con un selector y un bloque de declaración, siguiendo el formato

selector {bloque de declaración;}.

El selector identifica al elemento al que se le aplica el estilo . Puede hacerlo de las

siguientes maneras:

Si queremos formatear todas las apariciones de una etiqueta, utilizamos la etiqueta como selector. Por ejemplo, body o p.

Para formatear determinados elementos, podemos definir clases. Para definir una clase, utilizamos el signo . seguido del nombre (descriptivo) que queramos dar a la clase. Por ejemplo .resaltado. De esta forma, creamos una clase genérica, y el estilo afectará a todos los elementos, sean del tipo que sean, que tengan esa clase. También podemos especificar cómo se comporta la clase para cada elemento, con el formato etiqueta.clase. Por ejemplo p.resaltado. Por último, para aplicar la clase a los elementos, no hay más añadirles el atributo class con el nombre de la clase deseada. Por ejemplo <p class="resaltado">.

Para darle estilo a un elemento en concreto, podemos utilizar su atributo id. En el selector, precedemos el id por el signo #. Por ejemplo, #logo. De forma opcional, podemos preceder el identificador con el tipo de elemento de que se trata. Esto puede ser útil para ayudarnos a recordar de qué elemento se trata.

También podemos anidar selectores, separándolos por espacios. En este caso, el estilo sólo afectará a los elementos contenidos en el selector que haya más a la izquierda. Por ejemplo, el selector p.resaltado span sólo afectara a las etiquetas span que estén dentro de algún párrafo (p) que tenga la clase resaltado (class="resaltado").

Al definir estilos, podemos utilizar varios selectores a la vez, si los separamos por comas. Por ejemplo, utilizando el selector p, h2, h1 podemos definir a la vez el estilo de las etiquetas p, h1 y h2.

El bloque de declaración, es la relación de cada propiedad del estilo con el valor que toma. Es

decir, contendrá lo que colocaríamos en la etiqueta style del propio elemento. El bloque de

declaración lo colocaremos detrás del selector, encerrado entre llaves { }. Lo normal es formatearlo

para que nos sea fácil de leer. Para ello podemos utilizar saltos de línea, espacios o tabulaciones, ya

que son ignorados. Una forma común de formatear el estilo, es como vemos en el siguiente ejemplo:

p {

color: blue;

background-color: #F7F0E2; font-style: oblique;}

3.7. Dónde declarar un estilo

En casos muy puntuales y concretos, declararemos el estilo incrustado al elemento o en línea,

utilizando el atributo style. Por ejemplo, en un determinado párrafo al que queremos aumentar un

poco el margen porque queda mejor. Nos será más sencillo recordar que el estilo está en el

elemento, que crear una clase que no nos serviría de nada si borramos el elemento. De todas

formas, aquí no declararemos todo el estilo, solo los atributos que sean distintos al resto de

elementos del mismo tipo.

Si sólo tenemos una página, podemos definir los estilos dentro del <head>. Para ello, tenemos

que incluir en la etiqueta <style type="text/css"> ... </style>. En esta etiqueta, definiremos

los estilos con el selector y su bloque de declaración.

Pero lo más habitual es tener varias páginas. En este caso resulta muy útil tener los estilos

definidos en una hoja independiente, una hoja de estilos. Una hoja de estilos no es más que un

archivo de texto, pero con la extensión .css, donde aparecen definidos los estilos que utilizarán las

páginas. Para que funcione, debemos de enlazar con la hoja de estilo, para lo que utilizaremos la

siguiente etiqueta en el <head> de nuestras páginas:

<link href="hoja_de_estilo.css" rel="stylesheet" type="text/css" />

href indica la ubicación de la hoja de estilo, tal como lo pondríamos en un enlace.

rel se refiere a la relación del archivo con nuestra página. Al poner stylesheet le indicamos

que se trata de una hoja de estilo. Por ejemplo, podríamos poner alternate stylesheet lo

que indicaría que se trata de una hoja de estilo alternativa. Algunos navegadores como Firefox,

nos permiten elegir entre la hoja normal o la alternativa a través del menú Ver → Estilo de página.

3.8. Orden de aplicación de los estilos CSS

Entonces, si definimos en varios sitios el estilo para un elemento ¿cuál se aplica? Bueno,

realmente los estilos se van sumando. Por lo que si no repetimos ninguna propiedad, el estilo final

de un elemento será la suma de todos los estilos que afecten al elemento.

Pero ¿qué ocurre si repetimos una propiedad? Como norma general, prevalecerá el estilo más

concreto sobre el más genérico. Por ejemplo, si en la hoja de estilo establecemos el texto de los

párrafos en rojo, y en la cabecera de la página definimos el color de los párrafos en azul,

prevalecerá éste último, ya que es más concreto, se refiere sólo a los párrafos de esa página. Y si

en un párrafo de la página, en el atributo style indicamos el color de texto verde, prevalecerá éste

por ser el más concreto de todos.

Lo mismo ocurre con los selectores. Por ejemplo, p.inicio es más concreto que p, ya que se

refiere sólo a los párrafos con esa clase. Y p#titulo sería aún más concreto, ya que se refiere

directamente a un determinado párrafo. Lo mismo ocurre al anidar los selectores, p.inicio span

es más concreto que poner sólo span.

En caso de empate, por ejemplo si definimos varias veces la misma propiedad en una hoja de

estilo, se tomará en cuenta la última, que machacará a las anteriores. Por ejemplo, poner p

{margin: 20px; margin-bottom: 5px;} sería como poner p {margin: 20px 20px

5px;}.

En cualquier momento podemos saltarnos el orden de prioridad de los estilos, añadiendo !

important al final de una propiedad. Esto hace que tenga preferencia sobre el resto. Por ejemplo,

en este ejemplo:

p { color: blue !important; color: red;}

El párrafo debería de ser de color rojo, porque el valor rojo "machaca" al azul. Sin embargo, al

poner !important, hace que el texto sea rojo.

Hay que tener en cuenta que las propiedades se heredan de los elementos padre. Por ejemplo, si

decimos que el texto del body será de color azul, todos los elementos tendrán este color para el

texto, a no ser que indiquemos otra cosa.

La mejor forma de entender todo esto, es probando un ejemplo (recuerda que puedes

modificarlo):

<html><head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <title>Estilos</title> <style type="text/css"> body { font-family:sans-serif; background-color: lightyellow; } h1 { border-bottom: #FFCC66 5px solid; text-align: center; } p { color:#660000; border: #FF9933 10px solid; border-width: 0 0 2px 2px; } p.derecha { text-align: right; border-width: 0 2px 2px 0; } #Pepe { color: red; border-width: 0;

} .destacado { color: white; background-color: red; } p.destacado span.destacado { color: red; background-color: white; } </style></head><body> <h1>Estilos</h1> <p>Los estilos simplifican el dise&ntilde;o de una p&aacute;gina.</p> <p class="derecha">Podemos definirlos en el propio <span class="destacado">elemento</span>.</p> <p>Definirlos en la <span class="destacado">cabecera</span>.</p> <p class="derecha">O utilizar una <span class="destacado">hoja de estilo</span>.</p> <p>&nbsp;</p> <p id="Pepe">Este es el p&aacute;rrafo Pepe, con su propio estilo.</p> <p class="destacado">Este es un p&aacute;rafo de la clase <span class="destacado">destacado</span>.</p> <p class="destacado" style="background-color: orange">&Eacute;ste, tambi&eacute;n es destacado, pero con style=&quot;background-color: orange&quot;.</p></body></html>

Unidad 4. Editor Web

Quizá estés un poco cansado de escribir etiquetas HTML, si es así en este tema vamos a explicar

cómo ahorrarte ese trabajo. Un editor web también ayuda en otros muchos aspectos de la creación

de páginas web.

4.1. ¿Qué es un editor Web?

Un editor Web sería cualquier aplicación que nos permita crear, editar y guardar una página Web.

Como ya hemos visto, una página no es más que un archivo de texto, por lo que cualquier programa

que nos permita editar texto, puede funcionar como un editor Web.

Podemos considerar tres categorías de editores Web:

Editores de texto.

Nos permiten editar el código fuente puro y duro, como puede ser el bloc de notas.

Editores de HTML.Funcionan como los editores de texto, pero pueden tener algunas opciones más avanzadas. Como mostrar las etiquetas de colores, o cerrarlas automáticamente.

Editores WYSIWYG.Por un lado, nos permiten editar el código fuente como los editores de HTML. Y por otro, nos permiten trabajar en vista de diseño. Es decir, ver la página como se vería en un navegador mientras la editamos. La mayoría de estos editores suelen tener opciones para realizar tareas adicionales de forma más fácil, como por ejemplo, crear elementos de un formulario, insertar menús, e incluso código JavaScript tipo AJAX ( más adelante veremos de qué se trata). Editores de este tipo pueden ser Amaya o Dreamweaver.

Escribir directamente el código fuente nos da un mayor control sobre la página, obteniendo un

código más preciso y sin etiquetas innecesarias. Pero el tener que escribir cada etiqueta hace que

sea mucho más lento y que debamos conocer mejor el HTML.

Utilizar editores WYSIWYG resulta más cómodo. Ya que no hemos de preocuparnos por la

mayoría de las etiquetas, y escribimos el texto como lo haríamos en un procesador de texto. No

obstante, no siempre se generará el código que queramos. Y sobre todo si utilizamos editores no

especializados, como Word que permite guardar como página web, aunque generando un código

muy "sucio". Por ejemplo, crear un html con Word en el que sólo ponga "Hola mundo", con letra Arial

y tamaño 16px, genera un archivo de 22KB y 400 líneas de código.

Lo habitual es realizar el grueso de la página en vista de diseño, sobre todo escribir el texto. Y

después, cosas más concretas y correcciones, realizarlas sobre el código fuente. Esto también

depende de los conocimientos de cada uno.

Nota: Aunque en un editor WYSIWYG podemos ver cómo quedará la página, siempre hemos de

probarla en los navegadores más utilizados, en este momento Internet Explorer y Mozilla Firefox.

Para realizar este curso, te recomendamos que no pierdas de vista el código fuente, e intentes

trabajar directamente con él la mayoría de las veces, sobre todo al hacer cosas nuevas. Puede que

vayas un poco más despacio al principio, pero aprenderás mucho mejor el HTML, y después no

tendrás problema para utilizar cualquier editor.

4.2. Elegir un editor

Existe un gran número de editores Web, unos más completos que otros, con más o menos

opciones y con más o menos fallos.

Y como al elegir cualquier programa, lo primero es optar por una solución gratuita o de pago. Para

realizar nuestra página Web, vamos a utilizar un editor WYSIWYG. Uno de los mejores (si no el

mejor) editor de este tipo es Dreamweaver, de Adobe. Es un editor muy completo, y el elegido por la

mayoría de desarrolladores profesionales. Pero se trata de un editor de pago, aunque es cierto que

podemos probarlo gratuitamente durante 30 días. En cuanto a opciones gratuitas, podemos

encontrar, entre otros, Bluefish, más enfocado a programadores; Amaya, desarrollado por el

consorcio W3C; o KompoZer. Nos hemos quedado con este último por ser bastante simple e

intuitivo.

Podemos descargar KompoZer desde su página oficial. No requiere instalación, basta con

descomprimirlo en una carpeta y ejecutarlo, aunque sí deberemos instalar el paquete de idiomas en

español como se explica en el sitio.

4.3. El entorno de KompoZer

Vamos a echar un vistazo al entorno del editor KompoZer, y ver cómo realizamos con él las

acciones más comunes.

El aspecto general es el siguiente:

En la parte superior encontramos la barra de título, donde se ve el título de la hoja.

Debajo, encontramos una barra de menús, desde la que podemos acceder a todas las opciones

del programa. Las opciones más comunes, como Guardar, Nuevo, o insertar Enlaces o Imágenes

las encontramos en la llamada barra de redacción:

Debajo de esta barra, encontramos las barras de formato, pensadas para formatear el

documento.

Normalmente no utilizaremos estos formatos, ya que todo lo referente al estilo lo trabajaremos

directamente sobre la hoja de estilos. Pero si encontramos dos desplegables muy interesantes. El

primero, que en la imagen muestra Texto en el cuerpo, nos permite elegir el elemento que

contienen el texto que escribimos, por ejemplo un encabezado o un párrafo. El segundo, que en la

imagen muestra (sin clase) nos permite asignar una clase al texto. Si seleccionamos un fragmento

de texto, y le asignamos una clase, encerrará el texto en una etiqueta <span> con la clase dada.

En la parte central, encontramos el área de edición, donde podemos editar el contenido de

nuestra página. Podemos tener varias abiertas en distintas pestañas.

La forma en que podemos ver y trabajar con la página, depende del modo de edición, de las

cuatros disponibles en la parte inferior:

Normal. Con este modo, vemos el diseño de la página como se mostraría en un navegador. Aunque aparecen algunas marcas más, como información de la ubicación de algunas etiquetas especiales, como comentarios y scripts, y líneas rojas punteadas en los bordes de tablas y divisiones.

El modo Etiquetas HTML funciona como el anterior, pero mostrando en cada etiqueta un cuadradito amarillo con su identificador.

El modo Código fuente nos permite trabajar directamente sobre el código fuente de la página.

El modo Vista preliminar, muestra la página como se vería en un navegador, sin ninguna marca adicional.

También podemos ver el resultado en nuestro navegador predeterminado pulsando la tecla F5.

En la parte inferior, en la barra de estado, encontramos una barra que muestra la jerarquía de

etiquetas que hay sobre el lugar donde está el punto de inserción.

Es decir, lo que aquí vemos son todas las etiquetas que contienen a lo que tenemos

seleccionado, desde la más inmediata a la derecha del todo, a la primera, que suele ser el <body>.

Esto nos permite seleccionar cualquier etiqueta y todo su contenido sólo haciendo clic sobre ella.

Si hacemos clic derecho sobre una etiqueta, aparece un menú con opciones muy útiles:

Seleccionar hace lo mismo que la hacer clic sobre la etiqueta.

Eliminar etiqueta borra la etiqueta, pero no su contenido. Muy útil, por ejemplo, para quitar un span.

Cambiar etiqueta, sustituye una etiqueta por otra sin lateral si contenido. Por ejemplo, podemos cambiar un párrafo por un encabezado.

ID muestra una lista de los ID que utilicemos en nuestros estilos, y nos permite asignárselos a un elemento.

Clases, como con ID, muestra las clases disponibles y nos permite asignarlas al elemento. Además, nos muestra la clase ya asignada a un elemento, pudiendo quitarla.

Estilos en línea. Nos permite definir el estilo del elemento, para lo que creará el atributo style.

Propiedades avanzadas. Accedemos a una ventana en la que podemos ver todos los atributos del elemento y sus valores, editarlos, eliminarlos o añadir nuevos. También podremos definir el estilo incrustado.

Podemos mostrar u ocultar todas estas barras a través del menú Ver → Mostrar / Ocultar.

4.4. Opciones de configuración

Vamos a cambiar algunas de las opciones que vienen por defecto en KompoZer antes de

comenzar a crear nuestras páginas.

La ventana de Opciones es accesible a través del menú Herramientas → Preferencias.... La

ventana aparece dividida en cuatro secciones:

En General, nos aseguraremos de que está marcada la opción Usar estilos CSS en lugar de

elementos y atributos HTML.

En Config. Nuevas páginas, si no lo está, en Conjunto de caracteres, seleccionaremos

Occidental (ISO-8859-1).

En Avanzado, vamos a cambiar las siguientes opciones:

En la sección Marcado, vamos a configurar el Lenguaje como XHTML1 y el DTD como

Estricto. Si quieres saber qué es esto y qué es el Doctype, consulta este avanzado .

Nos aseguraremos de que está marcada la opción Dentro de un párrafo, pulsar Enter lo cierra y crea uno nuevo.

En Mostrar los siguientes caracteres como entidades, seleccionaremos Los anteriores y las letras Latin-1, para que al introducir caracteres, como letras acentuadas, KompoZer los sustituya por la entidad correspondiente.

Esto no quiere decir que debamos de seleccionar estas opciones para poder crear una página,

pero son las que utilizaremos en el curso.

4.5. Crear y guardar una página

Para crear una nueva página, basta con pulsar el botón . Esto creará una página.

Con las opciones que hemos configurado, el código de la página tendrá este aspecto

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta content="text/html; charset=ISO-8859-1"

http-equiv="content-type" />

<title></title>

</head>

<body>

<br />

</body>

</html>

Cuando realicemos cambios en la página, y no los hayamos guardado, aparecerá un pequeño

icono en la pestaña. .

Para guardar los cambios, podemos pulsar la combinación de teclas Ctrl + S, o el botón

.

La primera vez que guardemos la página, deberemos indicar el título que le queremos dar (el

contenido de la etiqueta title en la cabecera), y su ubicación.

4.6. Escribir texto en KompoZer

La forma de escribir el texto, utilizar el teclado, etc. es la misma que con cualquier editor de texto.

Es importante saber en qué elemento estamos escribiendo. Normalmente lo haremos dentro de

párrafos y encabezados, incluso en divisiones. Esto podemos seleccionarlo en el primer desplegable

de la barra de herramientas. En otras ocasiones, utilizaremos otros elementos como listas o tablas.

Recuerda, que siempre puedes saber en qué etiqueta estamos mirándolo en la barra de estado.

Nota: En este curso crearemos páginas XHTML Estrict, que no permiten escribir directamente

sobre el cuerpo del documento, hay que utilizar párrafos.

A la hora de escribir dentro de un párrafo, cuando pulsemos la tecla Intro crearemos un salto de

línea. Esto se debe a que cerramos el párrafo y comenzamos uno nuevo, porque así lo hemos

elegido en las opciones. Si lo que queremos es crear un salto dentro del párrafo, lo que equivaldría a

una etiqueta html del tipo <br />, tenemos que mantener pulsada la tecla Mayúsculas (Shift)

mientras pulsamos Intro.

4.7. Hojas de estilo en KompoZer

Ya vimos cómo podemos definir un estilo incrustado para el elemento. Vamos a ver ahora como

crear y definir una hoja de estilo.

Todo lo referente a la hoja de estilo, se gestiona utilizando el Editor CSS, accesible a través del

botón .

Crear o adjuntar una hoja de estilo

Desde la ventana del editor, pulsamos sobre el desplegable de arriba a la izquierda, y

seleccionamos Elem. enlace, ya que una hoja es eso, un archivo externo que se enlaza.

La zona de la derecha cambiará como se ve en la imagen:

Si ya tenemos creada la hoja, solo tenemos que seleccionarla pulsando en Escoja archivo. Si la

hoja aún no existe, basta con introducir el nombre que queramos, para crear una hoja en la misma

carpeta que la página. En ambos casos, pulsamos en Crear hoja de estilos. Si no existía aún, el

archivo no se creará hasta que no definamos algún estilo. Para cerrar la ventana, pulsamos

Aceptar.

Con esto, lo que hemos hecho realmente es incluir en la cabecera de la página la llamada a la

hoja de estilo. Puedes comprobarlo en la vista Código fuente.

Definir y editar un estilo

Podemos definir un estilo desde el mismo Editor CSS, pero seleccionando en el menú la opción

Regla.

Lo primero que tendremos que elegir será el selector que queremos utilizar. Podemos

seleccionar una de las opciones, según el tipo de selector, pero es más cómodo escribir

directamente el selector que nos interesa, por ejemplo body; o .miclase; o div#principal p... etc,

cualquier selector válido.

Cuando lo tengamos, pulsamos en Crear regla de estilo. Nos encontraremos con una serie de

pestañas:

La pestaña General nos permite editar el estilo directamente, escribiendo propiedades y valores.

El resto de pestañas se refieren a categorías de propiedades, y en ellas podremos definir el estilo de

forma gráfica, lo que puede resultarnos más cómodo e intuitivo.

Los distintos selectores que definamos, aparecerán "colgando" de la hoja de estilo, en el panel de

la izquierda, para que podamos editarlos. Si queremos borrar el estilo seleccionado, debemos pulsar

el icono , y para cambiar el selector pulsamos en . Para editar las propiedades del estilo, no

tenemos más que cambiar lo que queramos en las distintas pestañas.

Por ejemplo, la categoría de Texto tiene el siguiente aspecto:

Podemos elegir el tipo de letra o fuente desde los desplegables, así como el color, tamaño y otras

características.

En la parte inferior de la ventana podemos previsualizar el aspecto del texto según los valores que

hayamos elegido.

Para elegir un color para el texto podemos escribir su valor en el campo Color o hacer clic en el

botón de la derecha para que se abra una ventana donde podremos seleccionar el color deseado.

Nota: La versión que hemos utilizado durante este curso (0.7.10) tiene un fallo o bug, que se

produce si intentamos definir estilos para varios selectores sin aceptar los cambios. Por eso,

recomendamos definir el nuevo selector y su estilo, aceptar los cambios, y volver a abrir el editor

CSS para crear el siguiente estilo.

Unidad 5. Preparar nuestro sitio

5.1. ¿Qué es un sitio web?

Un sitio web o website, es un conjunto de páginas web, más o menos extensas, agrupadas bajo

un dominio, como puede ser www.aulaclic.es o www.elpais.com.

Lo normal, es que el sitio web parta desde una página inicial, o home, desde la que podemos

acceder, de forma jerárquica a todo el contenido del sitio, a través de hiperenlaces. A su vez,

podemos encontrar enlaces hacia otros sitios distintos, ya que cada sitio tiene una URL única que

nos permite acceder a él.

En conjunto de los sitios publicados en Internet forman la WEB o WWW.

El contenido de las páginas del sitio, puede estar escrito directamente en HTML. Esto genera un

sitio estático, que sólo recibe actualizaciones de vez en cuando, ya que hay que hacerlas

manualmente sobre el código.

En cambio, existen otros lenguajes, como PHP, ASP o JSP que generan en HTML a partir de

datos, como contenidos de bases de datos, datos introducidos por el usuario, información global,

etc. Esto origina sitios dinámicos, ya que los cambios se producen frecuentemente y son generados

desde la propia página. Por ejemplo, una página que muestra la fecha del día actual sería un

contenido dinámico. Otro ejemplo sería un foro.

5.2. La temática del sitio

La idea de crear un sitio web nace porque tenemos algo que comunicar con el mundo. Y un tema

que puede resultar interesante. Porque, por ejemplo, aunque crear una página Web con nuestros

hobbies y aventuras cotidianas puede ser un buen ejercicio como aprendizaje, a la hora de la verdad

a poca gente le resultará interesante leerlo. Para esto, obtendremos mejores resultados creándonos

una cuenta en una de las numerosas redes sociales.

El tema también debe de ser concreto. Si dominamos la informática y la jardinería, no resultará

serio si creamos un sitio en el que encontremos las dos cosas. Es mejor crear un sitio independiente

para cada una.

No sólo debemos de elegir un tema que resulte atractivo para un grupo de usuarios, si no que

debemos de tener información sobre él. No tiene demasiado sentido crear un sitio para escribir un

sólo artículo de media página.

El tema elegido determinará el diseño de la página. No es lo mismo si pensamos mostrar fotos de

animales para los amantes de las mascotas, una web para niños, una empresa de informática, etc.

Una vez elegido la temática, debemos de distinguir cuales son las categorías en las que vamos a

dividir nuestro sitio. Estas serán más genéricas o menos, dependiendo del tamaño del sitio.

En nuestro ejemplo vamos a crear la web de una asociación de aficionados a las flores.

Principalmente, a esta ficticia asociación le interesa exponer sus fotografías de flores en la web,

pero también crearemos las páginas que den a conocer la asociación y que permitan ponerse en

contacto con ella.

5.3. Organizar los archivos

El sitio web se encuentra alojado en un servidor, que no es más que un ordenador conectado a

internet, capaz de "dar" archivos a quien se lo solicita.

Por lo tanto, cuando accedemos a un sitio web, realmente accedemos a una carpeta de ese

ordenador, que funciona como raíz del sitio. Internamente, dentro de esa carpeta, encontramos

archivos y subcarpetas que nos permiten organizar el sitio, igual que organizamos los documentos

en las carpetas de nuestro equipo.

Entonces ¿cómo organizamos los archivos del sitio? No existe una regla exacta, ya que depende

de muchos factores: número de páginas, cómo queremos navegar entre ellas, cómo se organiza el

contenido, etc.

Pero por lo general, y sin entrar en mucha teoría, tendremos en cuenta una serie de cosas:

En la raíz del sitio, tendremos como mínimo la página de inicio, a la que llamaremos

index.html (o .htm). Esto se debe a que cuando a un navegador le indicamos que abra una carpeta,

busca el archivo index de la misma.

Organizaremos los tipos de archivo en carpetas. Por ejemplo, una carpeta para las imágenes

que forman parte del diseño de la página. Si a parte tenemos fotografías de una galería, o de

productos, es mejor ponerlas en otra carpeta, ya que no tienen relación con el diseño. Otra carpeta

para los archivos javascript, etc.

Si tenemos secciones claramente definidas, podemos guardar sus páginas en subcarpetas. Por

ejemplo, en aulaclic.es tenemos una carpeta para cada curso. Recuerda que es conveniente incluir

en cada carpeta que contenga páginas htm, un archivo index.html, más que nada para que no se

produzca un error si se accede directamente a la carpeta.

Por otro lado, daremos un nombre descriptivo a los archivos. Nos resultará mucho más sencillo si

nuestros archivos se llaman contacto.html y noticias.html que si los llamamos pagina_1.html y

pagina_2.html. A no ser que se trate de páginas del mismo tipo en las que es muy importante el

orden, como páginas de un manual.

Es conveniente planificar cómo va a ser el sitio, y partir de las carpetas iniciales. Lógicamente, no

vamos a tenerlo todo en cuenta, por lo que a medida que vaya creciendo nuestro sitio, iremos

creando las carpetas que nos hagan falta.

En nuestro ejemplo pensamos crear un sitio pequeño, de menos de 10 páginas.

Primero crearemos el sitio en nuestro equipo, y cuando lo acabemos ya los subiremos a un

servidor Web.

Comenzamos por crear la carpeta raíz. En este caso, la hemos llamado sitio_flores, y la hemos

ubicado en la carpeta de ejercicios del curso.

¿Qué tendremos dentro de esta carpeta? A priori, contendrá las páginas, entre las que incluimos

un index. También tendremos una hoja de estilo, e imágenes del diseño de la página, como logos,

imágenes para el fondo, etc. Por lo que será mejor si agrupamos estas imágenes en una carpeta,

que podemos llamar imagenes (omitimos el acento porque no conviene incluir caracteres

especiales en los nombres de archivos y carpetas). Si más adelante tenemos otros elementos, como

archivos javascript, archivos para descargar, etc, ya nos preocuparemos por crear más carpetas

para ellos.

Vamos a echar un vistazo a las secciones que queremos crear:

Una sección sobre las flores, con fotografías.

Una página sobre la asociación.

Un formulario de contacto.

Una página con noticias sobre el tema.

A excepción de la sección de flores, las otras serán páginas simples, que podemos dejar en la

carpeta raíz.

Pensemos en la sección de flores. Queremos mostrar una amplia galería de fotografías. Para que

el visitante pueda encontrar una flor en concreto, es importante que las clasifiquemos. Por eso

crearemos in índice alfabético con las flores. En otra página, mostraremos las fotos de las flores.

Como no conviene crear una página muy grande, con muchas fotografías, la dividiremos en las

distintas categorías, que en principio serán cuatro.

En resumen, para la sección de flores, necesitamos 5 páginas y fotografías, que estarán mejor

recogidas en una carpeta, que podemos llamar fotos. No son muchos elementos, pero podemos

pensar en agruparlos todos dentro de una carpeta. Esto se hace necesario cuando hay muchos

archivos, pero con tan pocos puede resultar molesto, porque tendremos que tenerlo en cuenta a la

hora de crear enlaces o utilizar las imágenes del diseño. De todas formas, como el fin de este curso

es didáctico, vamos a crear una subcarpeta para esta sección, a la que llamaremos flores, para

aprender así a manejarlas.

Por lo tanto, la estructura de archivos que planteamos para nuestro sitio quedaría así:

Comenzaremos por crear las carpetas, y si ya tenemos las imágenes, guardarlas en ellas. Las

páginas y hoja de estilos, las iremos creando cuando nos hagan falta.

KompoZer dispone de un administrador de sitios, que nos permite ver los archivos del sitio y

abrirlos directamente. En este tema avanzado te explicamos cómo hacerlo

5.4. Navegación

Antes de comenzar a definir la navegación, debemos de tener una idea de cómo va a ser el sitio

web, es decir, debemos tener una idea formada de la estructura y extensión del sitio. Así podremos

decidir qué sistema de navegación es el más adecuado.

Si construimos un sitio sobre la marcha, sin planificación, según vaya creciendo, se irá

complicando la navegación y al final no nos quedará más remedio que hacer modificaciones que

resultarán más costosas que haberlo pensado un poco mejor con anterioridad.

Existe una regla que dice que un usuario no debería de necesitar más de tres clics para

llegar a la página que busca. Por eso lo primero que hemos de pensar es en facilitar a navegación.

El usuario debe de ser capaz de moverse de forma intuitiva por nuestro sitio sin perderse ,

para ello:

Debe de saber dónde está. Debemos de dejarle claro en qué parte del sitio se encuentra.

Para esto es muy útil el título de la página y utilizar un encabezado que identifique la

sección. También debe de distinguir si sigue en nuestro sitio, o si ha pulsado un enlace

que le lleve a un sitio distinto.

Debe de saber dónde ha estado. Debemos de evitar que el usuario pase una y otra vez

por la misma página para buscar algo. Por ejemplo, distinguiendo los enlaces ya visitados.

Debe de saber dónde puede ir. Una página web se basa en enlaces, y estos deben de

ser claramente identificables. Además, no deben de ofrecer dudas de a dónde llevan, por

ejemplo con nombres de páginas entendibles, que se muestran en la barra de estado, o

con textos de información emergentes.

Debe de poder seguir navegando. No le enviaremos a una página sin enlaces, desde la

que no pueda continuar recorriendo el sitio. Piensa que puede acceder directamente a esa

página, por ejemplo a través de un buscador, por lo que no podría utilizar ni el botón Atrás

del navegador.

La forma de navegar por nuestro sitio, debe de ser constante. Así, con visitar unas pocas páginas

aprenderá a moverse por nuestro sitio, y le resultará más cómodo.

La forma más habitual de solucionar todo esto es utilizar un menú, que se mostrará en todas las

páginas.

5.5. Estructura del menú

El uso de menús es muy habitual en las páginas web. Un menú no es más que una lista de

enlaces relativos a nuestro sitio, llamados elementos del menú.

Por lo general el menú se suele colocar en la parte superior de la página, junto al logo o

debajo de él, o en un lateral, normalmente el izquierdo.

El menú no debe de ser demasiado extenso. En un sitio grande no podemos pretender

enlazar con todas las páginas, y no sería útil hacer buscar al usuario entre cincuenta

enlaces.

Normalmente, aparecerán las secciones de nuestro sitio web. Y por ejemplo, podemos

utilizar diversos métodos para que el usuario pueda expandir cada sección y ver enlaces a

los apartados de la sección, o utilizar menús desplegables. También podemos mostrar los

enlaces a las distintas partes de la sección en que se encuentra el usuario, ya que si está

en esa sección es probable que le interesen los apartados relacionados.

Los elementos del menú deben de ser descriptivos. Por ejemplo, no es útil poner una

imagen, por bonita que sea, si puede que el usuario no entienda qué significa o a dónde

lleva. O que para saberlo tenga que poner el cursor sobre él.

El menú debe de ser ligero, y no ocupar demasiado espacio, ya que se repetirá en todas

las páginas.

En lo que se refiere al código, el menú suele tener estos elementos:

Los menús se suelen basar en listas <ul></ul>. Dentro de cada elemento de la lista,

colocaremos un enlace.

El aspecto del menú se consigue por CSS.

Suelen tener código javascript, por ejemplo para mostrarlo, producir efectos más o menos

avanzados, o en vez de los enlaces.

Por lo tanto, comenzaremos creando nuestro menú como una lista, a la que más adelante le

iremos dando estilo hasta convertirla en un atractivo elemento de navegación.

5.6. Estructura de la página

En nuestro ejemplo, como norma general todas las páginas mantendrán la misma estructura.

Por ejemplo, tendrán el mismo logo o título, el sistema de navegación en la misma posición, el

mismo pie, etc. Sólo iremos cambiando el contenido.

Una excepción a esto puede ser la página de inicio. Pensemos que esta página es la

presentación de nuestro sitio, y el visitante se hará una idea de qué puede encontrar en nuestro sitio

a partir de ella. Por eso no es extraño que tenga más enlaces que el resto de páginas. Esto, como

siempre, dependerá del tamaño del sitio.

Pero pensando en el resto de páginas, no es una mala idea comenzar creando una página base,

con esos elementos comunes que podamos utilizar a modo de plantilla.

Vamos a ver qué elementos necesitamos en nuestro ejemplo:

Un título, para lo que podemos utilizar un encabezado h1. En el se mostrará el nombre de la asociación, Floramics.

Un menú. En este caso pondremos un enlace a las siguientes secciones:

Inicio (index.html)

Flores (flores/index.html)

Nosotros (nosotros.html)

Contacto (contacto.html)

Noticias (noticias.html)

Como son sólo cinco elementos, vamos a ponerlo en la parte superior, ya que en un lateral desperdiciaríamos espacio.

Un área para el contenido. Cambiará en cada página, pero tendrá un título para la sección.

El pie, por ejemplo para poner el copyright de la página. Podemos utilizar un elemento de

bloque como un párrafo o un div. También existe una etiqueta específica, <address> utilizada

para contener información sobre el autor de la página.

Para que nos quede mejor estructurada la página, vamos a utilizar divisiones en las tres

secciones diferenciadas:

EncabezadoTítulo y menú

Contenido

Pie

De esta manera, entre páginas prácticamente sólo cambiaremos el contenido.

Con esta estructura en mente, vamos a escribir el código:

Creamos una nueva página, con el Doctype, head, body, etc... como ya hemos visto.

Dentro, creamos tres divisiones.

En la primera, colocamos un <h1> con el nombre de la asociación. También una <ul>,

con un elemento y un enlace para cada una de las secciones.

La división central la dejamos en blanco, ya que será la que iremos cambiando.

En la tercera división, introducimos el texto del pie. Por ejemplo, © Todos los derechos reservados.

Y no hemos de olvidar, que en un futuro contendrá un enlace a la hoja de estilos. Por lo que es

conveniente que lo pongamos ya, decidiendo un nombre para la hoja, por ejemplo estilo.css.

Una vez creada, guardamos la página como base.html.

La página tiene pocos elementos, y te recomendamos que intentes hacerla escribiendo

directamente el código fuente

Una vez creada, visualiza la página con un navegador. Puedes pulsar F5 desde KompoZer o

hacer doble clic directamente sobre el archivo.

5.7. Páginas básicas

Partiendo de la página que hemos creado, vamos a crear un par de páginas sencillas. La idea es

tener páginas con algunos elementos, como texto, para poder comenzar con el diseño.

Otra opción podrá ser crear la páginas con un texto de prueba. En este caso, como ya sabemos lo

que queremos poner podemos adelantar trabajo.

Como básicamente se trata de introducir texto, lo haremos mucho más rápido utilizando el editor

de KompoZer.

Vamos a comenzar por la página index.html.

Como tenemos una página que nos sirve de plantilla (base.html) vamos a utilizarla. La abrimos, y

en menú Archivo seleccionamos Guardar como, y le damos el nombre index.html. De este modo

tenemos una página con la misma estructura que la página base. Sólo nos queda cambiar el

contenido de la división central.

Comenzamos por el título de la sección. Como estamos en la página inicial, y trata de ser una

web amistosa, vamos a darle la bienvenida al usuario. Por ejemplo, lo cambiamos por ¡Bienvenidos

a la web de Floramics!

Al estar en la página inicial, vamos describir brevemente qué puede encontrar el usuario en

nuestra página. Recuerda que la idea principal es que los usuarios visiten nuestra galería de fotos,

que pensábamos dividir en cuatro categorías. Por lo que sería una buena idea poner enlaces

directamente a esas categorías, así remarcamos que es el contenido principal del sitio. De

momento, crearemos el enlace, utilizando una lista como con el menú. Como aún no sabemos que

categorías tendremos, vamos a dejar el enlace provisional, enlazando sólo con # (<a

href="#">Enlace</a>).

Por ejemplo, esto es lo que hemos introducido en el contenido del index.html, viéndolo en el

modo de edición de etiquetas de KompoZer:

La otra página que vamos a crear es nosotros.html. En ella hablaremos un poco de nuestra

asociación.

Como antes, partimos del archivo base.html, que guardaremos como nosotros.html, y

cambiaremos el contenido:

Una vez editado el contenido, guarda la página.

Ahora ya puedes probar los enlaces del menú, para ir de inicio a nosotros y viceversa.

Unidad 6. Diseño y Usabilidad

El contenido de una página web es lo más importante pero un buen contenido con un mal diseño

no es una buena página web. Tampoco sirve de nada un buen diseño con un mal contenido.

Suponemos que el buen contenido lo pones tú, nosotros vamos a intentar darte unas

orientaciones para conseguir un buen diseño.

6.1. Un buen diseño

El cómo presentamos la información es muy importante para un sitio web. Y esto lo conseguimos

con un buen diseño.

Pero ¿qué es un buen diseño web? Bueno, este punto puede dar para mucho, pero vamos a

intentar transmitir unas pocas ideas básicas:

Comodidad para el visitante. Le debe de resultar cómodo navegar por el sitio, y también debe

de poder captar la información (texto, imágenes, flash, vídeos...). Por eso es importante un buen

sistema de navegación, y presentar el contenido de forma clara y espaciada.

Comodidad para el autor. Cuanto más fácil nos resulte realizar modificaciones, mejor. Por eso

separaremos el contenido del diseño, utilizando hojas de estilo.

Accesibilidad. Cuanta más gente pueda ver nuestro sitio mejor. Pensemos en cómo accede el

visitante. En el aspecto técnico, el sitio debería de seguir los estándares, para facilitar la

compatibilidad con navegadores antiguos, u otros dispositivos, como teléfonos móviles. También es

importante un diseño que soporte las pantallas pequeñas, pero que aproveche las pantallas de gran

tamaño, cada vez más frecuentes. Además, hacerlo legible y poner textos descriptivos a las

imágenes puede facilitar el uso para visitantes con problemas visuales.

Usabilidad. Por otra parte, pensemos en quién es el visitante. No es lo mismo si se dirige a niños,

adultos, personas mayores o a todo el mundo. En cualquier caso, nuestro sitio debe de ser fácil de

usar.

Transmitir. El diseño debe de transmitir lo que el usuario puede esperar de él. Por ejemplo, de un

banco esperamos seriedad, por lo que un diseño informal puede ser contraproducente.

Bonito y original. El diseño debe de ser agradable, combinar bien colores, organización de los

elementos, etc. Y cuanto más original sea, más lo será nuestro sitio.

Simple. Cuanto más simple sea el diseño, más se facilitarán el resto de aspectos que hemos

comentado.

Estos aspectos debemos de tenerlos en cuenta, pero no podemos pretender aplicar cada uno al

100%. Por ejemplo, un diseño más original implicará utilizar más elementos, y que todos aparezcan

correctamente ordenados, lo que lo hará más complejo. Y al final un buen diseño depende de la

temática de la página y de lo que queramos transmitir con ella.

6.2. Colores

La elección de colores apropiados es una de las cosas que más influyen en el aspecto del sitio.

Lo habitual es utilizar una gama de colores armónicos, con variaciones de tonos de un mismo

color. Con ellos formaremos la paleta de colores de nuestro sitio. Utilizar la misma paleta es

importante, porque si no iremos utilizando variaciones del color, y al final tendremos un sitio con

muchos colores distintos.

Para aquellos que no sean buenos combinando colores, siempre se pueden inspirar en el diseño

de páginas web, o herramientas que nos facilitan paletas de colores. Una buena idea es utilizar un

selector de color, una herramienta que nos permita tomar el color de una parte de la pantalla o de la

página web. Existen muchas herramientas gratuitas de este tipo. Nosotros hemos utilizado ColorPic.

Un buen ejercicio sería que intentases capturar la paleta del sitio que queremos crear utilizando

ColorPic. Captura sólo el color de los elementos HTML, no los colores que forman parte de las

imágenes.

Esta es la paleta que hemos utilizado para nuestro ejemplo:

#3D2E2A #5F4232 #735846 #AF7051 #AA876F

#D38451 #FF7600 #F0D7B5 #F5E4CC

6.3. El texto

Al comenzar a aplicar estilos al sitio, comenzaremos por lo más general e iremos hasta lo más

concreto. Y lo más genérico es el estilo del texto.

La mayoría de los visitantes no leen todo el texto, echan un vistazo por encima buscando lo que

les interesa. Es muy importante que el texto sea claramente legible, para lo que tenemos que tener

en cuenta ciertas cosas:

Nota: Vamos ir haciendo cambios en la hoja de estilo del sitio de ejemplo. Es conveniente que los

vayas realizando y viendo cómo queda en el navegador, con las páginas que tenemos hasta ahora.

Tipo de fuente. Ya comentamos al hablar del estilo básico del texto que con la propiedad

font-family nos permitía asignar una o varias fuentes al texto. Debemos de escoger una fuente

que se lea fácilmente, y que sea común, para que el usuario la tenga instalada. Mientras que en el

texto impreso es habitual el uso de fuentes con serifa (Times New Roman, serif), al tener menor

resolución en los monitores se leen mejor las fuentes sin serifa, como Verdana, Arial, o la

genérica sans-serif.

En nuestro ejemplo, vamos a utilizar la fuente Verdana. Aunque es común, puede que el

navegador no la tenga. En ese caso, indicaremos que utilice Arial, muy parecida y más común. Y si

tampoco la tiene, que utilice la fuente sin serifa genérica del navegador. Por lo tanto, en la hoja de

estilo declaramos el selector body, que contendrá todo el texto, y le asignamos la propiedad font-

family: Verdana,Arial,sans-serif;.

Tamaño de la fuente. Con el tipo de fuente ya seleccionado, ya que hay fuentes más

pequeñas que otras, podemos elegir el tamaño. Es obvio que un tamaño muy pequeño dificultará la

lectura. Tampoco utilizaremos una fuente excesivamente grande para el texto. Lo normal son 12px

para arriba, siempre que el diseño lo permita. Las recomendaciones en cuanto a usabilidad

aconsejan expresar estos tamaños como relativos, utilizando em o %. Si no al body, al resto de

elementos. Esto permite que después, con sólo cambiar el tamaño de la fuente del body, cambie

proporcionalmente el de todos los elementos, y no resulta difícil permitir que el visitante adapte esto

a su gusto.

En nuestro ejemplo, hemos optado por darle a la fuente en general un tamaño de 15px,

añadiendo al selector body la propiedad font-size:15px;. También hemos controlado el tamaño

de los títulos, esta vez con valores porcentuales, definiendo los estilos h1 {font-size: 180%;}

y h2 {font-size: 150%;}. También tendrá un tamaño distinto el pie de la página. Para

diferencialo, creamos una nueva regla de estilo, para la clase div.pie. El estilo para la nueva clase

será div.pie {font-size: 85%;}.

Para que se refleje, debemos de asignarle la clase al div. Para hacerlo con KompoZer, hacemos

clic en el contenido del pie, y en la barra de estado, hacemos clic derecho sobre la etiqueta div. En

el menú, elegimos clases → pie.

Color del texto. Para que el texto sea legible, debe de haber un buen contraste entre el color

del texto y el color de fondo. Lo que más cómodo resulta de leer es un texto oscuro sobre un fondo

claro. Tampoco se lee bien el texto sobre una imagen con varios colores.

Texto de ejemplo - Texto de ejemplo - Texto de ejemplo - Texto de ejemplo - Texto de ejemplo

Además, debemos de seguir cierta armonía, ya que hay colores que al combinarlos pueden

resultar demasiado intensos o casi molestos, sobre todo en textos amplios.

Texto de ejemplo - Texto de ejemplo - Texto de ejemplo - Texto de ejemplo - Texto de ejemplo

Al final, elegir un color u otro acaba siendo una cuestión de gusto.

En nuestro ejemplo, vamos a utilizar uno de los tonos marrones oscuros de nuestra paleta para

el texto en general, el color #735846. Así que le añadimos al body la propiedad color:

#735846;. Para los encabezados, vamos a elegir un color un poco más llamativo, que tenga más

energía. Nos decantamos por un marrón anaranjado de la paleta, #D38451. Por tanto, añadimos la

propiedad color: #D38451; a los selectores h1 y h2.

Espacios. Un texto muy comprimido no invita a leerlo. Hay que dejarlo espaciado. Para ello es

importante dejar separación (margin o padding) entre el texto y otros elementos, como imágenes,

y entre párrafos. Tampoco deben de estar muy pegadas las líneas del párrafo. Esto lo podemos

regular con la propiedad line-height.

En nuestro ejemplo, ya iremos regulando el margen de los distintos elementos cuando se vaya

complicando el estilo. Pero si vamos a separar un poco las líneas de los párrafos. Definimos un

nuevo selector, p, y le aplicamos la propiedad line-height: 1.5em;, utilizando valores relativos

al tamaño del texto.

Alineación. Es importante alinear correctamente el texto, lo que podemos hacer con la

propieada text-align. Por defecto, está alineado a la izquierda (text-align: left;), aunque

en párrafos con poco texto, como el pie, suele quedar mejor centrado (text-align: center;).

Cuando hay mucho texto, suele haber muchos saltos de línea, como en las columnas. En este caso,

queda mejor el texto justificado (text-align: justify;).

En nuestro ejemplo, por lo general tendremos el texto justificado. Por lo que añadiremos al

selector body esta propiedad. El texto del pie (div.pie) lo centraremos.

De momento, la hoja de estilo de nuestro ejemplo tiene este aspecto:

body {

font-family: Verdana,Arial,sans-serif;

font-size: 15px;

color: #735846;

text-align: justify;

}

h2 {

font-size: 150%;

color: #d38451;

}

h1 {

font-size: 180%;

color: #d38451;

}

p {

line-height: 1.5em;

}

div.pie {

font-size: 80%;

text-align: center;

}

Pág. 6.2

6.4. Fondo

Ya hemos comentado que el fondo del texto debe de tener un buen contraste. Así que las zonas

de nuestra página destinadas a contener texto tendrán un fondo normalmente de un color, evitando

utilizar imágenes que puedan dificultar la lectura.

Pero es habitual que las páginas no ocupen todo el contenido, dejando márgenes laterales. Por

ejemplo, pensemos en una página con una columna central de ancho fijo. A los lados quedan

huecos, que no suelen tener el mismo fondo que el texto. Para esto es muy común utilizar

imágenes. Si decidimos utilizarlas, debemos de elegir una imagen que no resulte demasiado

llamativa, para que no desvíe la atención del contenido de la página.

Puede quedar bonito, pero distrae la atención del usuario.

En nuestro ejemplo, vamos a utilizar dos fondos. Uno para el texto, para el contenido de la

página general. Escogemos el color más claro de nuestra paleta, #F5E4CC. En contraste,

utilizaremos un fondo oscuro para la página. Hemos escogido el tono más oscuro de la paleta

#3D2E2A.

Por lo tanto, desde el editor de CSS de KompoZer, añadimos al selector body el color para el

fondo (background-color: #3D2E2A;).

Como el contenido ya lo tenemos en una división, lo que vamos a hacer es darle una clase, que

vamos a llamar contenido. En KompoZer, creamos una nueva regla de estilo, para el selector

div.contenido. Le daremos el color de fondo más claro (background-color:#F5E4CC;), y un

poco de margen para que se muestre el color (margin: 20px;) oscuro del fondo. También le

daremos un poco de margen interno (padding: 20px;) para que el texto no quede pegado a los

bordes.

En resumen, hemos definido la siguiente clase:

div.contenido {

margin: 20px;padding: 20px;background-color: #f5e4cc;

}

Una vez creada la clase, se la vamos a asignar a las divisiones correspondientes. No tenemos

más que hacer clic en el texto que está dentro de la división a la que le queremos asignar la clase, y

en la barra de estado de KompoZer, hacer clic derecho sobre la etiqueta div. En el menú, elegimos

clases → contenido.

Aplica las clases pie y contenido a los elementos correspondientes de todas las páginas creadas

hasta ahora.

Unidad 7. Maquetación web

7.1. Maquetar una página web

La maquetación es la distribución de los elementos en nuestra página. Piensa en una página web

cualquiera. Seguro que distingues algunos elementos, como encabezados, columnas, menús

laterales, etc.

Hace unos años, la maquetación de las páginas web se realizaba utilizando tablas (<table>).

Una vez entendido este proceso podía resultar sencillo, aunque si no se dominaban las tablas, podía

convertirse en algo tedioso. El problema de las tablas es que generaban una página muy

encorsetada, y el código se volvía complejo de entender. Además, algunos buscadores encontraban

problemas al analizar la estructura de la página.

Actualmente, la maquetación con tablas ha caído en desuso, y se realiza utilizando capas (<div>), también llamadas divisiones o contenedores. La colocación de las capas en la página se

realiza a través de CSS. Esto permite, por ejemplo, que podamos pasar de un diseño con un menú

lateral a otro con el menú en la parte superior, sólo cambiando la hoja de estilos.

En esta unidad veremos las técnicas de maquetación más comunes, aunque hay que decir que

existen diversas formas de conseguir una misma maquetación.

Las capas pueden estar anidadas unas dentro de otra. Básicamente, lo que haremos será definir

cómo se posiciona en la página, su colocación y su tamaño.

Nota: Lo aquí explicado funciona para webs con el DTD XHTML Transitional o Strict. Al declarar

otro DTD, o no hacerlo, puede que el resultado no sea el esperado.

7.2. Tamaño

Por lo general, la maquetación se realiza sobre elementos en bloque. Normalmente divisiones,

pero también lo podemos hacer con párrafos, listas, o con el propio body. Por defecto los elementos

de bloque ocupan todo el ancho del elemento que lo contiene, y su alto se ajusta al contenido.

Cualquier elemento HTML de bloque, tiene dos atributos que pueden definir su tamaño: ancho

(width) y alto (height).

Los valores para estas medidas, pueden ser expresados en las medidas habituales:

Tamaños absolutos, utilizando px, cm, etc...

Tamaños relativos al elemento que lo contiene, utilizando porcentajes (%).

Tamaños relativos a la fuente, utilizando em.

El valor auto es el valor por defecto. Por ejemplo, un párrafo, por defecto, tienen un ancho del 100% y un alto ajustado al contenido.

Por ejemplo, hemos definido el tamaño para el siguiente párrafo:

<p style="width:200px; height:100px; border: red 2px solid">

Por defecto, al no ocupar todo el ancho, el elemento queda alineado a la izquierda, como en el

ejemplo anterior. Una forma sencilla de centrarlo es dándole al margen (margin) derecho e

izquierdo el valor auto.

<p style="width:200px; height:100px; border: red 2px solid; margin: auto;">

Con sólo esto, podríamos maquetar una página web que contenga una columna central, con un

ancho fijo o relativo. En el siguiente ejemplo, hemos contenido todo el texto en una capa, a la que le

hemos asignado el id="contenido", y en la hoja de estilo le hemos asignado un ancho fijo y la

hemos centrado.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta content="text/html; charset=ISO-8859-1"

http-equiv="content-type" />

<title>Una columna</title>

<style type="text/css">

body {

background-color:#C2C5E7;

margin: 0; }

div#contenido {

width: 800px;

margin: auto;

border-left: #6699FF 2px solid;

border-right: #6699FF 2px solid;

background-color: #EDEEF8;

padding: 5px;

}

</style>

</head>

<body>

<div id="contenido">

<h1>P&aacute;gina con una columna</h1>

<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed facilisis nulla et risus. In eleifend sapien a neque. Etiam fermentum. Sed dapibus suscipit diam. Praesent non nisi ac leo congue vestibulum. Mauris ac orci eu nisl dictum ultrices. Morbi blandit dolor vitae sapien. Vivamus in neque. Integer sit amet mi. Curabitur ipsum lectus, ultricies sit amet, bibendum a, sodales vitae, massa. Quisque metus. Sed blandit hendrerit urna. Aenean eu nulla. Praesent vulputate dui id lacus. Nunc vel odio. Nulla eleifend rutrum nulla. </p>

<p>Praesent ut ipsum. Nullam vitae nunc. Nam sit amet libero id mauris consectetur pulvinar. Suspendisse vulputate lorem quis lectus. Quisque commodo purus et nibh. Nunc quis mi quis risus hendrerit ultricies. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aliquam ac dui. Mauris vulputate fermentum tellus. Morbi rhoncus lorem id nibh. </p>

<p>Etiam cursus nulla ac purus. Pellentesque massa elit, dignissim et, volutpat eu, sagittis tristique, sem. Quisque nec leo. Etiam fringilla pellentesque turpis. Vestibulum at est. Sed sapien nunc, faucibus ac, suscipit sit amet, lacinia porttitor, mauris. Curabitur congue justo sed nunc. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Integer tristique diam vitae ligula. Nulla tincidunt, metus sit amet congue porttitor, purus pede commodo odio, vel varius mauris nulla id augue. Mauris pellentesque volutpat lacus. Maecenas erat. </p>

<p>Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Vestibulum volutpat, lacus non mattis vulputate, lorem nunc varius odio, in venenatis ante augue quis nisl. Praesent ut mi interdum lorem consequat vulputate. Vivamus ac urna non elit pellentesque volutpat mollis. Quisque mollis, nulla a porttitor commodo, orci diam commodo pede, ac congue neque libero quis justo. Donec sit amet ligula. In vehicula, elit ut pellentesque viverra, arcu nisl tincidunt ipsum, in viverra dui orci vel massa. Nunc tincidunt congue risus. Donec nec sem id elit egestas porttitor. Fusce ultrices nulla. </p>

</div>

</body>

</html>

7.3. Desbordamiento

Al utilizar un elemento de bloque, como una capa, un párrafo, el body, etc... el tamaño depende

del contenido. Pero al definir un tamaño fijo nos puede surgir un problema: ¿qué pasa si el contenido

del elemento (texto, imágenes, etc...) no cabe? Entonces se produce un desbordamiento, que

podemos controlar desde el estilo con la propiedad overflow. Podemos darle estos valores:

visible. Es la opción por omisión. El contenido sale de elemento, y puede que se solape con los elementos que haya a continuación.

hidden. Lo que no quepa en el elemento, queda oculto.

auto. Muestra las barras de desplazamiento en el elemento cuando sea necesario.

scroll. Siempre muestra las barras de desplazamiento.

visible. El texto en esta capa no cabe al tener un tamaño fijo, por lo que desborda.

hidden. El texto en esta capa no cabe al tener un tamaño fijo, por lo que desborda.

auto. El texto en esta capa no cabe al tener un tamaño fijo, por lo que desborda.

auto. Éste sí cabe.

scroll. Éste sí cabe.

Si el desbordamiento es visible, puede tapar a los elementos que haya después.

7.4. Posicionamiento

El posicionamiento es el lugar donde el navegador coloca un elemento HTML para visualizarlo.

Por defecto, los elementos se posicionan uno a continuación de otro. Si se trata de elementos de

bloque, como capas, párrafos, listas, etc, se irán colocando uno debajo del otro. A este

posicionamiento se le denomina estático.

Utilizando CSS, con la propiedad position podemos cambiar el tipo de posicionamiento de los

elementos. Existen cuatro tipos de posicionamiento:

static. Es el normal.

relative. El posicionamiento relativo coloca el elemento en su posición normal. A partir de ahí, podemos desplazar el elemento, permaneciendo el hueco de su posición original.

absolute. Con el posicionamiento absoluto, especificamos la posición del elemento con respecto al elemento que lo contiene.

fixed. Se establece la posición del elemento de forma parecida al absoluto, pero el elemento queda fijo en la pantalla, aunque utilicemos barras de desplazamiento.

Al cambiar el desplazamiento de un elemento, es fácil que se solape sobre otro. Esto produce que

un elemento quede oculto. Para controlar esto, disponemos de la propiedad CSS z-index, a la que

podemos asignar un valor numérico. Un elemento con un z-index mayor se verá por encima de

otro con un z-index menor.

Las cajas del siguiente ejemplo aparecen solapadas. Al pasar el cursor sobre ellas, se le asigna

z-index: 10;, lo que hace que se vean por encima del resto.

Nota: para que z-index funcione, se debe de haber especificado un tipo de posicionamiento para

el elemento.

7.5. Posicionamiento relativo

El posicionamiento relativo coloca el elemento en su posición normal, y a partir de ahí lo desplaza

la distancia que le indiquemos. Al desplazarlo deja un "hueco" donde estaría su posición normal.

Para aplicarlo, lo primero es declararlo en el estilo, utilizando position: relative;.

Para indicar el desplazamiento horizontal, utilizamos left para desplazarlo a la izquierda y

right para hacerlo a la derecha. Utilizar valores negativos, produce el efecto opuesto. Por ejemplo,

para desplazar un elemento 40px a la derecha, podríamos poner right: 40px; o left: -

40px;.

Del mismo modo, podemos desplazarlo verticalmente utilizando top para desplazarlo hacia arriba

o bottom para hacerlo hacia abajo.

Si no establecemos valores de desplazamiento el elemento no cambia su posición, por eso es

muy común asignar el posicionamiento relativo a elementos para poder utilizar una propiedad que

requiere posicionamiento, como puede ser z-index.

7.6. Posicionamiento absoluto

Al utilizar el posicionamiento absoluto indicamos de forma precisa la posición del elemento en la

página.

Al contrario que con el posicionamiento relativo, el elemento al que le hemos asignado un

posicionamiento absoluto no deja un hueco en la página. Podemos decir que el resto de elementos

lo ignoran, y se colocan como si no existiese.

Para aplicarlo, lo primero es declararlo en el estilo, utilizando position: absolute;.

La posición y tamaño del elemento se indica siempre en relación a otro elemento que lo contiene.

El elemento contenedor será el más cercano que haya con posicionamiento no estático. Si no

hay ninguno, se utilizará el body.

Para definir la posición utilizamos top para referirnos a la distancia entre el borde superior del

elemento posicionado y el borde superior del elemento contenedor. Por lo tanto left será la

distancia entre los lados izquierdos, right entre los lados derechos y bottom entre los lados

inferiores.

Para posicionar un elemento del que conocemos sus dimensiones, basta con indicar un punto en

vertical (top o bottom) y un punto en horizontal (right o lef). En el siguiente elemento, todas las cajas

tienen position: absolute; witdth: 60px; height: 60px y un borde. Para cada una

hemos cambiado la posición. Además, a la caja que contiene a todas, le hemos dado position:

relative; para que las cajas de dentro tomen su posición a partir de ella.

top: 0;left: 0;bottom: 0;left: 0;top: 50%;left: 50%;bottom: 50%;right: 50%;top: 50%;right: 0;top: 70px;left: 100px;top: 25%;right: 25%;

Utilizando este posicionamiento, obtenemos gran flexibilidad para maquetar nuestra página. Por

ejemplo, podemos dividir la página en dos (o más) columnas. Utilizaremos dos capas, con un

alto al 100%, y que la suma de sus anchos sea el total de la página. Por ejemplo:

div#columna_izquierda {

position: absolute;

left: 0;

top: 0;

height: 100%;

width: 50%;

}

div#columna_derecha {

position: absolute;

right: 0;

top: 0;

height: 100%;

width: 50%;

}

Esto originaría dos columnas, cada una con un ancho de la mitad del de la página (o del elemento

que las contenga).

Si queremos obtener dos columnas, una con un ancho fijo y la otra con lo que sobre, lo haremos

de otra forma. Por ejemplo, si la columna de la izquierda la queremos con un ancho fijo, por ejemplo

de 200px, lo que haremos será asignar a la columna de la derecha una distancia con el lado

izquierdo de esos 200px, y con el lado derecho de 0, en vez de indicar el ancho.

div#columna_izquierda {

position: absolute;

left: 0;

top: 0;

height: 100%;

width: 200px;

}

div#columna_derecha {

position: absolute;

right: 0;

left: 200px;

top: 0;

height: 100%;

}

Hay que decir que esto no funciona correctamente en Internet Explorer 6, que no interpreta

correctamente el ancho del elemento si definimos la posición de los dos lados, en vez de un lado y

el ancho.

Unidad 7. Maquetación web

Podemos conseguir un efecto muy interesante controlando el desbordamiento de las columnas.

Podemos dejar una columna fija, por ejemplo con un menú, y otra que muestre el contenido, a la

que damos la propiedad overflow: auto;. Esto hará que nos podamos desplazar por el

contenido de la página manteniendo el menú siempre visible. Como por defecto, Internet Explorer

siempre muestra la barra de desplazamiento en la etiqueta html, queda mejor si lo quitamos html

{overflow:hidden;}. Todo esto lo veremos mejor con un ejemplo:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta content="text/html; charset=ISO-8859-1"

http-equiv="content-type" />

<title>Columna sin scroll a la izquierda</title>

<style type="text/css">

html {

overflow: hidden;

}

div#columna_izquierda {

position: absolute;

top:0; left: 0;

height: 100%;

width:20%;

background-color:#FFE9D7;

}

div#columna_derecha {

position: absolute;

top:0; right: 0;

height: 100%;

width: 80%;

overflow: auto;

background-color:#DDF2F9;

}

</style>

</head>

<body>

<div id="columna_izquierda">

<ul>

<li><a href="#ap1">Apartado 1</a></li>

<li><a href="#ap2">Apartado 2</a></li>

<li><a href="#ap3">Apartado 3</a></li>

</ul>

</div>

<div id="columna_derecha">

<h2> Columna fija a la derecha</h2>

<h3 id="ap2"> Apartado 1</h3>

<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed facilisis nulla et risus. In eleifend sapien a neque. Etiam fermentum. Sed dapibus suscipit diam. Praesent non nisi ac leo congue vestibulum. Mauris ac orci eu nisl dictum ultrices. Morbi blandit dolor vitae sapien. Vivamus in neque. Integer sit amet mi. Curabitur ipsum lectus, ultricies sit amet, bibendum a, sodales vitae, massa. Quisque metus. Sed blandit hendrerit urna. Aenean eu nulla. Praesent vulputate dui id lacus. Nunc vel odio. Nulla eleifend rutrum nulla. </p>

<p>Praesent ut ipsum. Nullam vitae nunc. Nam sit amet libero id mauris consectetur pulvinar. Suspendisse vulputate lorem quis lectus. Quisque commodo purus et nibh. Nunc quis mi quis risus hendrerit ultricies. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aliquam ac dui. Mauris vulputate fermentum tellus. Morbi rhoncus lorem id nibh. </p>

<h3 id="ap2">Apartado 2</h3>

<p>Etiam cursus nulla ac purus. Pellentesque massa elit, dignissim et, volutpat eu, sagittis tristique, sem. Quisque nec leo. Etiam fringilla pellentesque turpis. Vestibulum at est. Sed sapien nunc, faucibus ac, suscipit sit amet, lacinia porttitor, mauris. Curabitur congue justo sed nunc. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Integer tristique diam vitae ligula. Nulla tincidunt, metus sit amet congue porttitor, purus pede commodo odio, vel varius mauris nulla id augue. Mauris pellentesque volutpat lacus. Maecenas erat. </p>

<p>Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Vestibulum volutpat, lacus non mattis vulputate, lorem nunc varius odio, in venenatis ante augue quis nisl. Praesent ut mi interdum lorem consequat vulputate. Vivamus ac urna non elit pellentesque sollicitudin. Nunc pharetra nibh in quam. Proin eu magna ut ligula volutpat mollis. Quisque mollis, nulla a porttitor commodo, orci diam commodo pede, ac congue neque libero quis justo. Donec sit amet ligula. In vehicula, elit ut pellentesque viverra, arcu nisl tincidunt ipsum, in viverra dui orci vel massa. Nunc tincidunt congue risus. Donec nec sem id elit egestas porttitor. Fusce ultrices nulla. </p>

<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed facilisis nulla et risus. In eleifend sapien a neque. Etiam fermentum. Sed dapibus suscipit diam. Praesent non nisi ac leo congue vestibulum. Mauris ac orci eu nisl dictum ultrices. Morbi blandit dolor vitae sapien. Vivamus in neque. Integer sit amet mi. Curabitur ipsum lectus, ultricies sit amet, bibendum a, sodales vitae, massa. Quisque metus. Sed blandit hendrerit urna. Aenean eu nulla. Praesent vulputate dui id lacus. Nunc vel odio. Nulla eleifend rutrum nulla. </p>

<p>Praesent ut ipsum. Nullam vitae nunc. Nam sit amet libero id mauris consectetur pulvinar. Suspendisse vulputate lorem quis lectus. Quisque commodo purus et nibh. Nunc quis mi quis risus hendrerit ultricies. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aliquam ac dui. Mauris vulputate fermentum tellus. Morbi rhoncus lorem id nibh. </p>

<h3 id="ap3">Apartado 3</h3>

<p>Etiam cursus nulla ac purus. Pellentesque massa elit, dignissim et, volutpat eu, sagittis tristique, sem. Quisque nec leo. Etiam fringilla pellentesque turpis. Vestibulum at est. Sed sapien nunc, faucibus ac, suscipit sit amet, lacinia porttitor, mauris. Curabitur congue justo sed nunc. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Integer tristique diam vitae ligula. Nulla tincidunt, metus sit amet congue porttitor, purus pede commodo odio, vel varius mauris nulla id augue. Mauris pellentesque volutpat lacus. Maecenas erat. </p>

<p>Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Vestibulum volutpat, lacus non mattis vulputate, lorem nunc varius odio, in venenatis ante augue quis nisl. Praesent ut mi interdum lorem consequat vulputate. Vivamus ac urna non elit pellentesque sollicitudin. Nunc pharetra nibh in quam. Proin eu magna ut ligula volutpat mollis. Quisque mollis, nulla a porttitor commodo, orci diam commodo pede, ac congue neque libero quis justo. Donec sit amet ligula. In vehicula, elit ut pellentesque viverra, arcu nisl tincidunt ipsum, in viverra dui orci vel massa. Nunc tincidunt congue risus. Donec nec sem id elit egestas porttitor. Fusce ultrices nulla. </p>

</div>

</body>

</html>

Recuerda que podemos anidar las capas. Por ejemplo, podríamos subdividir una de las capas en

otras dos dentro de ella, utilizando el mismo sistema.

Otro elemento muy utilizado en la maquetación, es el encabezado y el pie. Observa que en los

ejemplos que hemos visto, colocábamos las capas en la parte superior del todo (top: 0;). Si

queremos utilizar un encabezado, en vez de comenzar arriba del todo, debemos de dejar una

separación igual al alto del encabezado. Si el alto del encabezado lo indicamos en porcentajes, el

alto de las columnas deberá de ser del 100% - el alto del encabezado. En vez de eso, resulta más

claro si en vez del alto de las columnas, indicamos la parte superior (top) y la inferior (bottom). En

este caso, nos dará igual la medida que utilicemos. Como mejor lo veremos será con un ejemplo:

div#encabezado { position: absolute; top:0; left: 0;

height:10%; width:100%; background-color:RoyalBlue; } div#columna_izquierda { position: absolute; top:10%; left: 0;

height: 90%; width:20%; background-color:SandyBrown; } div#columna_derecha { position: absolute; top:10%; right: 0;

bottom: 0; width: 80%; background-color:LightGreen; }

En el primero de los ejercicios paso a paso anterior hemos visto una forma de crear una

columna centrada en la página. Ya vimos que esto se podía hacer también definiendo un

ancho y utilizando la propiedad margin: 0 auto;. No da igual utilizar uno u otro. Si lo hacemos

con posicionamiento absoluto, y hacemos la ventana más pequeña que la columna, dejarán de

verse el lado derecho y el izquierdo por igual. En cambio, de la otra forma, dejara de verse el

lado derecho de la columna. Por lo que es mejor este sistema si tenemos un menú de

navegación a la izquierda que queremos que se vea siempre.

Los principales inconvenientes del posicionamiento absoluto es que hemos de definir el

tamaño del elemento, no se ajusta al contenido, y no se crean huecos en la página, por eso no

podemos utilizarlo para cualquier cosa.

7.7. Posicionamiento flotante

El posicionamiento es un poco distinto al resto. Para empezar, no se define con la propiedad

position, si no con la propiedad float. Puede tomar estos valores:

left : flotante a la izquierda (float: left;).

right : flotante a la derecha (float: right;).

none : sin flotante.

Lo que hace este posicionamiento es desplazar el elemento todo lo que pueda hacia la dirección

indicada, hasta encontrar el límite del elemento contenedor, u otro elemento también flotante.

Además hace que todos los elementos fluyan alrededor de él.

Es muy común utilizarlo en imágenes, para que el texto fluya alrededor de ellas. En el siguiente

ejemplo, todas las cajas contienen un párrafo con una imagen al principio (<p><img />

Texto</p>). Sólo cambia el float de la imagen.

Normal. La imagen queda en la posición inicial, aumentando el alto de la línea, y no aparecen varias líneas de texto junto a la imagen.

Derecha. La imagen está en la misma posición, pero con un float: right;. Esto permite que aparezcan varias líneas de texto junto a la imagen, y cuando llegue al final, que continúe por debajo.

Izquierda. La imagen está en la misma posición, pero con un float: left;. Esto permite que aparezcan varias líneas de texto junto a la imagen, y cuando llegue al final, que continúe por debajo.

Observa que el texto puede quedar demasiado pegado a la imagen. Para solucionarlo, no hay

más que aplicar un pequeño margin a la imagen, hacia el lado que está el texto.

Existen algunos inconvenientes al utilizar el posicionamiento flotante. Un elemento que contiene a

otro flotante, no lo tiene en cuenta para su tamaño a lo alto. Por ejemplo, el siguiente párrafo tiene

un borde, y vemos que si la imagen es flotante, "se sale".

Normal. El párrafo se ajusta a la imagen y el texto.

Derecha. El párrafo sólo ajusta su alto al texto.

Además, si por ejemplo hay varios párrafos con elementos flotantes al mismo lado, hace que se

"amontonen":

Normal. Primer párrafo.

Normal. Segundo párrafo.

Derecha. Primer párrafo

Derecha. Segundo párrafo.

Para solucionar esto, disponemos de la propiedad clear, que rompe el flotamiento. Puede tomar

tres valores:

left: impide el flotamiento a la izquierda.

right: impide el flotamiento a la derecha.

both: impide el flotamiento por ambos lados.

En el siguiente ejemplo, utilizamos el mismo que en el ejemplo anterior, pero al segundo párrafo

le hemos dado la propiedad de estilo clear: right;.

Derecha. Primer párrafo

Derecha. Segundo párrafo.

Con el posicionamiento flotante, podemos por ejemplo colocar elementos uno al lado del otro. En

el siguiente ejemplo, hemos utilizado cajas, todas con float:left; y un pequeño margen para

que no se peguen. Observa cómo se comportan cuando cambias el tamaño de la ventana:

De forma muy parecida, podemos utilizar el posicionamiento flotante para crear columnas en

un documento. Basta con que la suma del ancho de las capas que harán de columnas quepa en el

ancho de elemento contenedor, y que tengan posicionamiento flotante. En Internet Explorer, si la

suma de los anchos es del 100%, para algunos tamaños de ventana no cabe, por lo que mostrará

una columna debajo de la otra, aunque esto sólo ocurre a veces. Por eso, cuando utilizamos

porcentajes es mejor utilizar un ancho total un poco menor, por ejemplo del 99% o 99.5%.

De acuerdo con lo que hemos dicho, podemos dividir un elemento en dos columnas de la

siguiente manera:

div#columna_izquierda { float: left; width: 30%; height: 100%; background-color:SandyBrown; } div#columna_derecha { float: left; width: 69.5%; height: 100%; background-color:LightGreen; }

Para añadir una cabecera al principio, no hay más que poner una capa antes de las

columnas, con todo el ancho. Y para poner un pie, haríamos lo mismo, pero colocándolo

después de las columnas, y rompiendo el flotamiento con clear:both;.

div#cabecera { width: 99.5%; height: 10%; background-color:RoyalBlue; } div#columna_izquierda { float: left; width: 30%; height: 80%;

background-color:SandyBrown; } div#columna_derecha { float: left; width: 69.5%; height: 80%; background-color:LightGreen; } div#pie { clear: both; width: 99.5%; height: 10%; background-color:Violet; }

La principal diferencia con el posicionamiento absoluto es que al flotante sí le afectan

los márgenes, propios y del elemento contenedor, y que no estamos obligados a definir el

alto. En el ejemplo anterior, hemos establecido el alto porque no hay contenido, pero si no

lo especificamos, el alto se ajustaría al contenido del elemento.

7.8. Posicionamiento fijo

El posicionamiento fijo (position: fixed;) se define igual que el posicionamiento absoluto,

con las propiedades top, bottom, left y right. Pero su comportamiento es distinto: el

posicionamiento fijo se refiere siempre a la ventana del navegador, independientemente de que

el elemento posicionado esté dentro de otro elemento con posicionamiento, como pasaba con el

absoluto. Además, el elemento siempre se muestra en la misma posición, aunque la página sea

larga y nos desplacemos hacia abajo o hacia un lado.

En el siguiente ejemplo, tenemos dos cajas con posicionamiento fijo. La de la izquierda está al

principio de la página. La de la derecha, está al final, dentro de elementos con posicionamiento.

Observa que esto no le afecta.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta content="text/html; charset=ISO-8859-1"

http-equiv="content-type" />

<title>Posicionamiento fijo</title>

<style type="text/css">

div#fijo_izquierda {

position: fixed;

left: 10%;

top: 50px;

width: 100px;

height: 100px;

border: #663366 5px double;

}

div#fijo_derecha {

position: fixed;

right: 10%;

top: 50px;

width: 100px;

height: 100px;

border: #663366 5px double;

}

div#columna {

width: 50%;

margin: auto;

}

.verde, .azul {

height: 500px;

border: #006666 5px dashed;

border-width: 0 5px 5px 5px;

position: relative;

}

.verde {

background-color: #66CC99;

}

.azul {

background-color:#6699FF;

}

</style>

</head>

<body>

<div id="fijo_izquierda">Posicionamiento fijo<br />Izquierda</div>

<div id="columna">

<div class="azul"></div>

<div class="verde"></div>

<div class="azul"></div>

<div class="verde"></div>

<div class="azul"></div>

<div class="verde"></div>

<div class="azul"></div>

<div class="verde"></div>

<div class="azul"></div>

<div class="verde"></div>

<div class="azul"></div>

<div class="verde">

<div id="fijo_derecha">Posicionamiento fijo<br />Derecha</div></div>

</div>

</body>

</html>

Una de las propiedades de este posicionamiento es que si imprimimos la página web y ocupa

varias páginas en papel, los elementos fijos se imprimen en todas las páginas, por lo que puede

resultar útil para pies y encabezados.

Nota: Intenet Explorer 6 no soportaba este posicionamiento.

7.9. Ancho de la página, líquido o elástico

Al crear el diseño de una web, básicamente existen dos tendencias: que la página ocupe todo el

ancho de la ventana del navegador (diseño líquido), o que ocupe sólo una columna con un ancho

fijo (diseño fijo).

No es que uno sea claramente mejor que otro, tienen sus pros y sus contras:

Diseño fijo.

En el diseño fijo, la página tiene un tamaño exacto, normalmente expresado en píxel. Esto facilita

el diseño, sobre todo si está compuesto por imágenes divididas en trozos que deben casar

perfectamente, ya que podemos posicionar todo de forma exacta. También nos permite controlar el

ancho de los elementos de texto, no creando columnas ni demasiado largas ni demasiado

pequeñas.

Por contra, no aprovecha bien el espacio. Pensemos en una página de ancho fijo, de 900px. Si un

usuario la ve desde la pantalla de su teléfono móvil, que tiene un ancho de 320px, la mayor parte de

la página no quedará visible. En cambio, si se ve desde un monitor panorámico de 24'', con 1920px

de ancho, la mayor parte del espacio estará desaprovechado.

Diseño líquido.

En el diseño líquido, en vez de unidades absolutas se utilizan relativas al tamaño de la ventana.

Esto hace que la página sea más flexible a los distintos dispositivos de visualización.

Por contra, es más difícil controlar el diseño, sobre todo si se basa en muchas imágenes, porque

hay que pensar en qué ocurre si la ventana es muy pequeña o muy grande, y que no se descoloque

todo al cambiar de tamaño. También puede producir líneas de texto muy largas, lo que incomoda la

lectura. Aunque el usuario siempre tiene la opción de hacer más pequeña su ventana.

Para intentar controlar un poco el tamaño de los elementos, existen las propiedades de estilo

max-width (ancho máximo), min-width (ancho mínimo), max-height (alto máximo) y min-

height (alto mínimo).

Diseño elástico.

Últimamente, se ha acuñado el término "diseño elástico" para el diseño en el que el tamaño de los

objetos, no es ni fijo ni en relación al tamaño de la ventana, si no al tamaño del texto (basado en

em), dando al usuario la posibilidad de cambiar su tamaño, y en proporción, el de todos los

elementos. Aunque permite que el texto se controle, sigue sin adaptarse a las distintas ventanas, y

resulta difícil controlar las imágenes.

Actualmente, la mayoría de las páginas ofrecen un diseño fijo, sobre todo si tienen un diseño más

elaborado. Las que ofrecen un diseño más elástico, suelen mostrar una columna central elástica,

que se adapta a la pantalla, y columnas con un ancho fijo, para menús o para la publicidad.