ticpl05.wikispaces.comWeb.docx · Web viewPara que sea más fácil de entender hemos desarrollado...
Transcript of ticpl05.wikispaces.comWeb.docx · Web viewPara que sea más fácil de entender hemos desarrollado...
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, .
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. 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 ñ. Los caracteres más utilizados,
tienen también un código html propio, como vemos en la siguiente tabla:
Carácter Representación
< <
> >
á á
Á Á
é é
É É
í í
Í Í
ó ó
Ó Ó
ú ú
Ú Ú
ñ ñ
Ñ Ñ
Espacio
Carácter Representación
€ €
ç ç
Ç Ç
ü ü
Ü Ü
& &
¿ ¿
¡ ¡
" "
· ·
º º
ª ª
¬ ¬
© ©
® ®
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 "¿Será María?
" 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,
.
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 ñandú y la cigüeña.<br />
3 > 2, y 2 < 4<p>
<p>Aquí hay 5 espacios [ ]</p>
<p>Aquí sí que hay 5 espacios [ ]</p>
<p>Este párrafo
tiene saltos
en el código fuente</p>
<p>Aquí<br />y aquí<br />hay saltos</p>
<pre>En la etiqueta pre
si aparecen
saltos y es pa ci os</pre>
<p>En el último párrafo<!--el comentario solo
se ve en el có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. 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í</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. 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ágenes y enlaces</h1>
<p id="primero">Éste es el primer párrafo. <a href="#ultimo">Ir al último</a>.</p>
<p>Aquí 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í una imagen que no existe <img src="noimagexxx.png" width="50" height="50" alt="Por eso muestra el ALT" />.</p>
<p>Aquí tenemos un <a href="http://www.aulaclic.es">enlace a aulaClic</a>, con una direcció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ás al í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">Éste es el áltimo pá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. 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%">Éste es un h1 del mismo tamaño que un párrafo normal.</h1> <p>Éste es un párrafo normal.</p> <p style="color:red">Éste pá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é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árrafo (<span style="font-weight: normal; text-decoration: none;">menos esta parte</span>) está en negrita y subrayado. <span style="text-decoration:overline">Este
fragmento, además sobrerrayado</span>.</p> <p style="text-transform:lowercase;"><span style="font-size:85%;">ÉSTE,</span> ESTÁ <span style="font-size:110%;">ESCRITO TODO </span><span style="font-size:120%;">EN MAYÚSCULAS</span>, <span style="font-size:130%;">Y ADEMÁ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á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árgenes</h1> <p style="background-color:#99CCFF; margin: 0;">Éste es un párrafo sin margen.</p> <p style="background-color:#99CCFF; margin: 0;">Éste es otro párrafo sin margen.</p> <p style="background-color:#99CCFF; margin: 20px;">Éste es un párrafo con margin:20px.</p> <p style="background-color:#99CCFF; margin: 20px;">Éste es un párrafo con margin:20px.</p> <p style="background-color:#99CCFF; margin: 20px; padding: 10px">Éste es un párrafo con margin:20px y padding:10px.</p> <p style="background-color:#99CCFF; margin: 20px; padding: 10px; border: cyan 4px inset">Éste es un párrafo con margin:20px, padding:10px y border: cyan 4px inset</p> <p style="background-color:#99CCFF; margin-right:25%;">Éste es un pá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á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ño de una pá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> </p> <p id="Pepe">Este es el párrafo Pepe, con su propio estilo.</p> <p class="destacado">Este es un párafo de la clase <span class="destacado">destacado</span>.</p> <p class="destacado" style="background-color: orange">Éste, también es destacado, pero con style="background-color: orange".</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á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.