Está en la página 1de 54

Unidad 1.

Mi primera página web (I)

1.1. Introducción

Pulsa en este icono para ver un videotutorial con el contenido de esta unidad.
El objetivo de este curso es enseñar a crear páginas web, partiendo desde cero y usando herramientas gratuitas.
Para seguir el curso sólo necesitas un ordenador y ganas de aprender, al final del curso podrás crear páginas
como la que puedes ver haciendo clic aquí o aquí.
El lenguaje que se utiliza para crear una página web es el HTML, Hyper Text Markup Lenguage (Lenguaje de
Marcas de Hipertexto) Hay muchos cursos de HTML pero creemos que este es diferente porque pretende ser
un curso integral de creación de páginas web.
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
mundial 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 facil 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 (tema 2,3) veremos los conceptos básicos de HTML, escribir texto, darle formato, hiperenlaces,
estilos, etc. Luego (tema 5) explicaremos brevemente el editor KompoZer, luego veremos cómo estructurar una
página web y un sitio web (tema 6), más adelante introduciremos el programa Gimp para trabajar con gráficos
(tema 9), unas ideas para crear gráficos vectoriales, como por ejemplo un logotipo para la página, con el
programa Inkscape. En el siguiente tema (tema 10) introduciremos conceptos sobre JavaScript, y luego un poco
de PHP (tema 11). 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.
Los temas están explicados también en videotutoriales, a los que puedes acceder al principio de cada uno.
Aunque en ellos no explicamos cosas nuevas, puede que te ayuden a entender algunos conceptos al verlos de
forma más visual.
Al final de cada tema encontrarás unos ejercicios propuestos. Con ellos, irás creando otro sitio con lo visto 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 intersa la parte más
literaría 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 ea
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 esta formada por un conjunto de servidores conectados. Un servidor es un ordenador conectado a la red
de acceso a Intenet 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. Si no sabes cómo hacerlo, te lo
explicamos en este básico .

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) incluído en Windows. Puedes encontrarlo en Todos los
programas → Accesorios. El aspecto del Bloc de notas es muy simple, una hoja en blanco con una barra de
menús.
Si no estás familiarizado con las forma de escribir en un ordenador, consulta este básico .
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 lo 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 el. 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
mostralo 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ónMostrar 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.

Si necesitas más ayuda con el Bloc de notas, puedes verla en este básico .
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 raiz. Por ejemplo, si accedemos a "www.aulaclic.es", estamos accediendo a la carpeta raiz
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.
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 <etiquetaatributo1="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.es
Antes, 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 caracteristicas 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 copiar el código y pegarlo en la caja de texto que encontrarás en esta página Probar código .
Luego pulsar en Visualizar el código escrito esto hará que se abra una ventana o una pestaña en tu navegador
en la que podrás ver cómo queda la página. Es equivalente a lo que hicimos en el tema anterior con el bloc de
notas pero de una forma más cómoda para ti. Observa como los espacios en blanco no son tenidos en cuenta, un
poco más adelante volveremos sobre este tema.
Luego puedes añadir un salto de línea y un nuevo texto "Tenemos las fotografías organizadas en diferentes
categorías" y volverlo a visualizar.
2.3. Estructura del texto
Ya hemos comentado que todo el texto de la página estará dentro del <body>, que a su vez estará dentro
del <html>. El texto dentro del <body>debe estar dentro de párrafos. En HTML, los párrafos se identifican con
la etiqueta <p></p>. Dentro de los párrafos colocaremos texto e imágenes, y algunas etiquetas que nos permitan
dar formato al texto, pero no podemos tener otros párrafos anidados.
A su vez, disponemos de encabezados que nos permiten organizar el texto. Los encabezados van desde
el <h1></h1> de mayor tamaño, al <h6></h6>, el más pequeño. Por ejemplo, utilizaríamos un <h1> para poner
el rótulo principal de la página, <h2> para los títulos de los apartados, <h3> para los apartados de segundo
nivel, etc. El texto de cada apartado iría contenido en párrafos <p></p>.
Una de las peculiaridades del texto, es que los espacios en blanco consecutivos y saltos de línea no se muestran
como en el código fuente. Si hay varios espacios seguidos, sólo se mostrará uno. Por ejemplo, si en el código
fuente escribimos Bienvenido a Floramics se verá Bienvenido a Floramics. Si queremos poner varios espacios
seguidos, utilizaremos el código html para el espacio, &nbsp;.
El navegador también ignora los saltos de línea. Así si dentro de un párrafo colocamos varios saltos de línea
pulsando Intro, estos no se verán. Como ya vimos para crear un salto de línea dentro de un párrafo, utilizamos la
etiqueta <br />.
Puedes ver todo esto en el siguiente ejemplo:
<html>
<head>
<title>Floramics. Amigos de las flores</title>
</head>
<body>
<h1>Bienvenido a Floramics</h1>
<h2>Presentación</h2>
<p> En esta web encontrarás información sobre la
asociación y nuestra colección de fotografías de
flores.<br />
Tenemos las fotografías organizadas en diferentes categorías</p>

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

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


Puedes copiar el código y pegarlo en la caja de texto que encontrarás en esta página Probar código .
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 ñ. Puedes verlas en este tema avanzado .
Puedes realizar este ejercicio paso a paso para crear una página sencilla.
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. Puedes ver con más
detalle cada formato en este básico .
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. Si no sabes cómo indicar una dirección relativa, consulta este
básico .
Cuando el navegador no encuentre la imagen ubicada en scr no podrá mostrar la imagen. En su lugar puede

mostrar una imagen de error, como en Internet Explorer que muestra . Además se mostrará el texto
contenido en el atributo alt, ya que ésa es su función: mostrar un texto alternativo cuando no se puede mostrar la
imagen. Esto es importante para la accesibilidad a la web. Imaginemos que tenemos unas imágenes que hacen
de botón para ir a partes de nuestra web, como Inicio o Galería. Si no ponemos el alt, y no se muestran las
imágenes, el usuario no podrá navegar por nuestro sitio.
Aunque no son obligatorios, es muy frecuente añadir a la imagen los atributos height (alto) y width (ancho),
introduciendo en ellos las dimensiones de la imagen, en píxeles. Al cargar una página, el navegador muestra
primero el texto y después las imágenes. Si conoce las dimensiones de cada imagen, puede dejar un hueco
reservado para ellas. Si no, pondrá el texto y luego irá desplazándolo para colocar las imágenes, lo que hará
incómodo leer la página hasta que no esté totalmente cargada.
Otro atributo frecuente en las imágenes es title. Si lo ponemos en la imagen, al posar el cursor sobre ella se
mostrará su valor. En IE7, cuando se omite title, se muestra el contenido de alt.
Por ejemplo, para el siguiente código se muestra la siguiente imagen:
<img src="comunes/aulaclic.gif" alt="aulaClic" width="91" height="41" title="El logo de aulaClic" />

Los valores de height y width puedes verlos al seleccionar la imagen desde el Explorador de Windows o desde
un programa de gráficos. Si cambias esos valores la imagen también cambiará. Si reduces los valores,
manteniendo la proporción, la imagen se verá más pequeña, si los aumentas se verá más grande, pero con peor
calidad, como puedes ver en el siguiente ejemplo:
<img src="comunes/aulaclic.gif" alt="aulaClic" width="126" height="56" title="El logo de aulaClic" />

Para aumentar o disminuir una imagen es conveniente utilizar un programa gráfico, ya que estos programas
tienen opciones para optimizar el tamaño de las imágenes. En el tema 9 veremos cómo hacerlo con el programa
gráfico Gimp.
Vamos a añadir la siguiente imagen a nuestra página de Floramics. La imagen se encuentra
en graficos/flor_ejemplo2.jpg
Hemos reducido su tamaño variando los atributos, lo cual no es una buena técnica ya que, aunque se ve bien, se
tiene que cargar una imagen grande para luego verla más pequeña.
Este es el código:
<html>
<head>
<title>Floramics. Amigos de las flores</title>
</head>
<body>
<h1>Bienvenido a Floramics</h1>
<h2>Presentación</h2>
<p> En esta web encontrarás información sobre la
asociación y nuestra colección de fotografías de
flores.<br />
Tenemos las fotografías organizadas en diferentes categorías.</p>
<img src="graficos/flor_ejemplo2.jpg" width="150" height="150"
alt="No se encuentra esta imagen" />
<h2>Contacto</h2>
<p> Si quieres comunicarte con nosotros
visita nuestra página de contacto. &nbsp;&nbsp;Te esperamos.</p>
</body>
</html>

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


Puedes copiar el código y pegarlo en la caja de texto que encontrarás en esta página Probar código .
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. Con Photoshop se hace
como se muestra en este enlace del curso de aulaClic. Y con Illustrator como se muestra aquí.

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>.
se verá así: Pulsa aquí.
El atributo href puede ser una dirección absoluta,
como http://www.aulaclic.es/paginasweb/ejercicios/citas_celebres.htm, o una direccion 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:
Pulsa aquí. → Pulsa <a href="http://www.aulaclic.es" title="Visita la web de aulaClic">aqu&iacute;</a>.
Por defecto, el enlace se abrirá en la misma ventana. Si queremos que se abra en una nueva ventana, podemos
utilizar el atributo target="_blank". Aunque, el W3C, el organismo que regula los estándares del HTML
desaconseja su uso, con la idea de que se debe permitir al usuario decidir si quiere abrir el enlace en la misma u
otra ventana pulsando con el botón derecho del ratón sobre el enlace, el atributo target se sigue utilizando
porque la mayoría de los usuarios pulsan directamente sobre el enlace, sin usar el botón derecho. Así pues si en
nuestra página queremos informar sobre la existencia de otra página del mismo tema, colocaremos un enlace a
ella y le pondremos el atributo target="_blank" para evitar que el usuario se vaya a esa página y no se acuerde
de volver a la nuestra.
Normalmente utilizaremos enlaces para navegar por nuestro sitio. Hemos de evitar enviar al usuario a páginas
en las cuales no sepa como volver a la página anterior o como ir a la página principal. Siempre es mejor añadir
un enlace volver, que confiar en que el usuario utilice el botón Atrás del navegador. Más adelante, veremos
como diseñar un buen sistema de navegación para nuestro sitio web.
Aquí puedes ver un ejemplo con enlaces e imágenes:
<html>
<head>
<title>Floramics. Amigos de las flores</title>
</head>
<body>
<h1>Bienvenido a Floramics</h1>
<h2>Presentación</h2>
<p> En esta web encontrarás información sobre la
asociación y nuestra colección de fotografías de
flores.<br />
Tenemos un índice alfabético con todas las fotografías, o puedes verlas organizadas en diferentes
categorías.</p>
<img src="graficos/flor_ejemplo2.jpg" width="150" height="150"
alt="No se encuentra esta imagen" />
<p>Interesante enlace sobre flores: <a href="http://www.mundoflores.net">Mundoflores</a><
h2>Contacto</h2>
<p> Si quieres comunicarte con nosotros
visita nuestra página de contacto. &nbsp;&nbsp;Te esperamos.</p>
</body>
</html>
Puedes copiar el código y pegarlo en la caja de texto que encontrarás en esta página Probar código .
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. En este tema avanzado puedes ver cómo
hacer esto y algunas cosas más.
2.6. Divisiones o capas
Una etiqueta muy utilizada es la etiqueta <div></div>. Esta etiqueta forma una caja, un rectángulo, igual que el
párrafo. Pero mientras que el párrafo es más común utilizarlo para contener texto, en un div podemos colocar lo
que queramos, siempre que respetemos la anidación. Esta etiqueta nos resultara muy útil para distribuir los
elementos en nuestras páginas.
Esta etiqueta es denominada de muchas formas: divisiones, capas, cajas, contenedores. Así que puede que a lo
largo del curso utilicemos estos nombres para referirnos a ellas.
Por ejemplo, si queremos colocar la imagen de nuestro ejemplo en la parte derecha, crearemos una capa con el
estilo "flotar a la derecha" y pondremos la imagen dentro. Más adelante explicaremos el estilo "flotar a la
derecha" style="float: right".
<html>
<head>
<title>Floramics. Amigos de las flores</title>
</head>
<body>
<h1>Bienvenido a Floramics</h1>
<h2>Presentación</h2>
<p> En esta web encontrarás información sobre la
asociación y nuestra colección de fotografías de
flores.<br />
Tenemos las fotografías organizadas en diferentes categorías.</p>
<div style="float: right"><img src="graficos/flor_ejemplo2.jpg" width="150" height="150" alt="No se
encuentra esta imagen" /></div>
<h2>Contacto</h2>
<p> Si quieres comunicarte con nosotros
visita nuestra página de contacto. &nbsp;&nbsp;Te esperamos.</p>
</body>
</html>

Puedes copiar el código y pegarlo en la caja de texto que encontrarás en esta página Probar código .

Ejercicio propuesto la Unidad 2 Prueba evaluativa de la Unidad 2

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 como
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:

Puedes ver la página en tu navegador pulsando aquí.


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

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%, escribiriamos 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 contega 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 (en este tema
básico sobre colores puedes ver qué quiere decir esto), 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 (en
este tema básico sobre unidades de medida puedes ver qué quiere decir em) , 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 ejempo, para asignarle la clase azul a la palabra información (que esta dentro de un párrafo), escribiriamos:
<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.
Aún es posible aplicar formato sin separarlo del contenido, si quieres ver lo que no hay que hacer, mira este
tema básico.
Unidad 3. Aspecto de la página. Estilos básicos (III)

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:
Un número hexadecimal. Por ejemplo color: #0000FF;,o color: 0x800080;.
Tres números entre 0 y 255. Por ejemplo color: rgb(0, 0, 255);.
Tres números entre 0 y 100. Por ejemplo color: rgb(10%, 20%, 75%);.
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 como trabajar con colores con el editor Kompozer.
Si todavía no lo has hecho, es conveniente que veas este tema básico sobre colores . Puedes encontrar más
información sobre los colores en el Curso de Illustrator.
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 como 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, susituye 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).
Unidad 3. Aspecto de la página. Estilos básicos (IV)

Mayúsculas y minúsculas
Aunque escribamos el texto en mayúsculas o minúsculas, luego podemos cambiarlo a través del estilo. Por
ejemplo utilizando text-transform podemos transformar el texto de ejemplo "Es un texto de EJEMPLO" de las
siguientes maneras:
uppercase, para transformarlo todo a mayúsculas. "ES UN TEXTO DE EJEMPLO".
lowercase, para transformarlo todo a minúsculas. "es un texto de ejemplo".
capitalize, para poner la primera letra de cada palabra en mayúsculas. "Es Un Texto De EJEMPLO".
none, para no realizar ninguna transformación.
Existe otra propiedad que juega con la mayúsculas, font-variant. Esta propiedad puede hacer que las minúsculas
se muestren como mayúsculas de menor tamaño. Vamos a utilizar "Este texto de Ejemplo".
small-caps, realiza la conversión de las minúsculas. "ESTE TEXTO DE EJEMPLO".
normal, no realiza la conversión.

Nota: El consorcio W3C regula las reglas de estilo para crear el estándar. No obstante, en la práctica, hay
muchas propiedades que los navegadores no representan, o que sólo se muestran en algunos, por lo que no las
utilizaremos. Otras, se ven con algunas diferencias dependiendo del navegador. Por eso, es conveniente probar
nuestra web en los principales navegadores.
Los navegadores más importantes actualmente son:

Internet Explorer
Mozilla Firefox
Safari
Opera
Google Chrome
Veamos un ejemplo con lo que hemos visto:
<html>
<head>
<title>Estilo del Texto</title>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
</head>
<body>
<h1 style="font-size:100%">&Eacute;ste es un h1 del mismo tama&ntilde;o que un p&aacute;rrafo
normal.</h1>
<p>&Eacute;ste es un p&aacute;rrafo normal.</p>
<p style="color:red">&Eacute;ste p&aacute;rrafo es de color rojo,
con algunas palabras en <span style="color:blue">azul</span>.</p>
<p>Podemos cambiar la fuente: <span style="font-family:serif;">y poner este texto en serif</span>,
<span style="font-family:sans-serif;">esta parte en sans-serif</span>, <span style="font-family:cursive;">
la familia de esta palabra es cursive</span>, <span style="font-family:fantasy;">tambi&eacute;n tenemos
fantasy</span>,
<span style="font-family:monospace;">y acabamos con monospace</span>. </p>
<p style="font-weight:bold; text-decoration:underline">Este p&aacute;rrafo
(<span style="font-weight: normal; text-decoration: none;">menos esta parte</span>) est&aacute;
en negrita y subrayado. <span style="text-decoration:overline">Este fragmento, adem&aacute;s
sobrerrayado</span>.</p>
<p style="text-transform:lowercase;"><span style="font-size:85%;">&Eacute;STE,</span> EST&Aacute;
<span style="font-size:110%;">ESCRITO TODO </span><span style="font-size:120%;">EN
MAY&Uacute;SCULAS</span>,
<span style="font-size:130%;">Y ADEM&Aacute;S VA</span><span style="font-size:140%;">
CRECIENDO.</span></p>
</body>
</html>

Puedes copiar el código y pegarlo en la caja de texto que encontrarás en esta página Probar código .
Lo normal es dar a la etiqueta body los atributos generales del documento, como el tamaño o el tipo de fuente.
Unidad 3. Aspecto de la página. Estilos básicos (V)

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.
Si no sabes como referirte a los distintos lados de un elemento, visita este básico .
3.4. Márgenes
Los elementos html tienen dos márgenes. El margen externo y el margin interno. Ambos se refieren a la 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: 0
margin: 0
margin:5px
margin:5px 35px
margin:15px
margin: 0
margin-left:-20px
Los margenes 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: 0
padding: 0
padding:5px
padding:5px 35px
padding:15px
padding: 0
padding-bottom:20px
El padding si que forma parte del elemento, por eso muestra el mismo fondo.

Por defecto, la mayoría de elementos incluyen un margen exterior, y algunos un margen interior, que debemos
de tener en cuenta.
Veamos un ejemplo con lo que hemos visto. Ve cambiando los valores:
<html>
<head>
<title>Bordes y m&aacute;rgenes</title>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
</head>
<body style="background-color:whitesmoke; font-family: sans-serif;">
<h1 style="font-size: 120%; background-color: #99CCFF; color: #FFFFFF; border-color: #6666FF;
border-style: solid; border-width: 0 0 2px 5px; padding-left: 20px;">Bordes y m&aacute;rgenes</h1>
<p style="background-color:#99CCFF; margin: 0;">&Eacute;ste es un p&aacute;rrafo sin margen.</p>
<p style="background-color:#99CCFF; margin: 0;">&Eacute;ste es otro p&aacute;rrafo sin margen.</p>
<p style="background-color:#99CCFF; margin: 20px;">&Eacute;ste es un p&aacute;rrafo con
margin:20px.</p>
<p style="background-color:#99CCFF; margin: 20px;">&Eacute;ste es un p&aacute;rrafo con
margin:20px.</p>
<p style="background-color:#99CCFF; margin: 20px; padding: 10px">&Eacute;ste es un p&aacute;rrafo con
margin:20px y padding:10px.</p>
<p style="background-color:#99CCFF; margin: 20px; padding: 10px; border: cyan 4px inset">&Eacute;ste
es un p&aacute;rrafo con margin:20px, padding:10px y border: cyan 4px inset</p>
<p style="background-color:#99CCFF; margin-right:25%;">&Eacute;ste es un p&aacute;rrafo con margin-
right:25%.<br />
Cambia al cambiar la ventana.</p>
</body>
</html>

Puedes copiar el código y pegarlo en la caja de texto que encontrarás en esta página Probar código .
Unidad 3. Aspecto de la página. Estilos básicos (VI)

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 propieadad background: url(graficos/fondo.png);. En url()
introducimos la dirección de la imagen que queremos utilizar.
Si utilizamos una imagen podemos configurar otras propiedades:
background-repeat, determina si el fondo se repite. Puede tomar los valores no-repeat si no queremos que se
repita, repeat-x para que se repita en horizontal, repeat-y para que lo haga en vertical o repeat para que llene
todo el fondo, que es el valor que toma si no le indicamos otra cosa.
Si no se repite la imagen de fondo, podemos posicionarla con background-position. Podemos darle los valores
de los cuatros lados (top, right, bottom y left), combinarlos para colocarla en las esquinas, por ejemplo top left,
o centrarla con el valor center. También podemos introducir medidas, donde el primer valor se refiere a la
posición horizontal y el segundo al vertical, por ejemplo background-position: 50% 50%;.
<html>
<head>
<title>Bordes y m&aacute;rgenes</title>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
</head>
<body style="background-image: url(graficos/fondo_ladrillos.jpg); background-color: #C9B2AC;
background-repeat: repeat-y; background-position: center">
<h1 style="background-color: #CC9999; color: #FFFFFF;">Fondos</h1>
<p style="background-color: #CC9999; color: #FFFFFF;">Ve cambiando los valores de background-repeat y
background-position.</p>
</body>
</html>

Puedes copiar el código y pegarlo en la caja de texto que encontrarás en esta página Probar código .
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;
}
Unidad 3. Aspecto de la página. Estilos básicos (VII)

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 los 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.

Puedes practicar algunas de las cosas que hemos visto con el ejercicio paso a paso Aplicar estilos sencillos.
3.8. Orden de aplicación de los estilos CSS
Entonces, si definimos en varios sitios el estilo para un elemento ¿cuál se aplica? Bueno, realmente los estilos se
van sumando. Por lo que si no repetimos ninguna propiedad, el estilo final de un elemento será la suma de todos
los estilos que afecten al elemento.
Pero ¿qué ocurre si repetimos una propiedad? Como norma general, prevalecerá el estilo más concreto sobre el
más genérico. Por ejemplo, si en la hoja de estilo establecemos el texto de los párrafos en rojo, y en
la cabecera de la página definimos el color de los párrafos en azul, prevalecerá éste último, ya que es más
concreto, se refiere sólo a los párrafos de esa página. Y si en un párrafo de la página, en el
atributo style indicamos el color de texto verde, prevalecerá éste por ser el más concreto de todos.
Lo mismo ocurre con los selectores. Por ejemplo, p.inicio es más concreto que p, ya que se refiere sólo a los
párrafos con esa clase. Y p#titulo sería aún más concreto, ya que se refiere directamente a un determinado
párrafo. Lo mismo ocurre al anidar los selectores, p.inicio span es más concreto que poner sólo span.
En caso de empate, por ejemplo si definimos varias veces la misma propiedad en una hoja de estilo, se tomará
en cuenta la última, que machacará a las anteriores. Por ejemplo, poner p {margin: 20px; margin-
bottom:5px;} sería como poner p {margin: 20px 20px 5px;}.
En cualquier momento podemos saltarnos el orden de prioridad de los estilos, añadiendo !important al final de
una propiedad. Esto hace que tenga preferencia sobre el resto. Por ejemplo, en este ejemplo:
p { color: blue !important;
color: red;
}
El párrafo debería de ser de color rojo, porque el valor rojo "machaca" al azul. Sin embargo, al
poner !important, hace que el texto sea rojo.
Hay que tener en cuenta que las propiedades se heredan de los elementos padre. Por ejemplo, si decimos que el
texto del body será de color azul, todos los elementos tendrán este color para el texto, a no ser que indiquemos
otra cosa.
La mejor forma de entender todo esto, es probando un ejemplo (recuerda que puedes modificarlo):
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Estilos</title>
<style type="text/css">
body {
font-family:sans-serif;
background-color: lightyellow;
}
h1 {
border-bottom: #FFCC66 5px solid;
text-align: center;
}
p{
color:#660000;
border: #FF9933 10px solid;
border-width: 0 0 2px 2px;
}
p.derecha {
text-align: right;
border-width: 0 2px 2px 0;
}
#Pepe {
color: red;
border-width: 0;
}
.destacado {
color: white;
background-color: red;
}
p.destacado span.destacado {
color: red;
background-color: white;
}
</style>
</head>
<body>
<h1>Estilos</h1>
<p>Los estilos simplifican el dise&ntilde;o de una p&aacute;gina.</p>
<p class="derecha">Podemos definirlos en el propio <span class="destacado">elemento</span>.</p>
<p>Definirlos en la <span class="destacado">cabecera</span>.</p>
<p class="derecha">O utilizar una <span class="destacado">hoja de estilo</span>.</p>
<p>&nbsp;</p>
<p id="Pepe">Este es el p&aacute;rrafo Pepe, con su propio estilo.</p>
<p class="destacado">Este es un p&aacute;rafo de la clase <span class="destacado">destacado</span>.</p>
<p class="destacado" style="background-color: orange">&Eacute;ste, tambi&eacute;n es destacado,
pero con style=&quot;background-color: orange&quot;.</p>
</body>
</html>

Puedes copiar el código y pegarlo en la caja de texto que encontrarás en esta página Probar código .

Ejercicio propuesto la Unidad 3 Prueba evaluativa de la Unidad 3

Unidad 4. Editor Web (I)


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. Si necesitas ayuda para instalarlo, sigue este básico .
Unidad 4. Editor Web (II)

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.
Unidad 4. Editor Web (III)

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.
Unidad 4. Editor Web (IV)

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.

Unidad 4. Editor Web (V)

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.

Puedes practicar cómo crear algunos estilos básicos con el ejercicio paso a paso Estilos con KompoZer.

Ejercicio propuesto la Unidad 4 Prueba evaluativa de la Unidad 4

Unidad 5. Preparar nuestro sitio (I)

5.1. ¿Qué es un sitio web?

Un sitio web o website, es un conjunto de páginas web, más o menos extenso, 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 .
Unidad 5. Preparar nuestro sitio (III)

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. Si
no sabes qué son las listas, puedes verlo en este básico .
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.
Unidad 5. Preparar nuestro sitio (IV)

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:
Encabezado
Tí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. De todas formas, puedes seguir este ejercicio paso a paso para realizar la página con KompoZer, y
comprobar el código generado.

Una vez creada, visualiza la página con un navegador. Puedes pulsar F5 desde KompoZer o hacer doble clic
directamente sobre el archivo.
Unidad 5. Preparar nuestro sitio (V)

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.
Ejercicio propuesto la Unidad 5 Prueba evaluativa de la Unidad 5

Unidad 6. Diseño y Usabilidad (I)

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. Si necesitas ayuda para instalar y
utilizar la herramienta, visita este básico .
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

Unidad 6. Diseño y Usabilidad (II)

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;
}
Unidad 6. Diseño y Usabilidad (III)

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.
Al final, el sitio nos habrá quedado como podemos ver aquí.

Ejercicio propuesto la Unidad 6 Prueba evaluativa de la Unidad 6

Unidad 7. Maquetación web (I)

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 un página muy encorsetada, y el código se volvía complejo de
entender. Además, algunos buscadores encontraban problemas al analizar la estructura de la página.
Actualmente, la maquetación con tablas ha caído en desuso, y se realiza utilizando capas (<div>), también
llamadas divisiones o contenedores. La colocación de las capas en la página se realiza a través de CSS. Esto
permite, por ejemplo, que podamos pasar de un diseño con un menú lateral a otro con el menú en la parte
superior, sólo cambiando la hoja de estilos.
En esta unidad veremos las técnicas de maquetación más comunes, aunque hay que decir que existen diversas
formas de conseguir una misma maquetación.
Las capas pueden estar anidadas unas dentro de otra. Básicamente, lo que haremos será definir cómo se
posiciona en la página, su colocación y su tamaño.
Nota: Lo aquí explicado funciona para webs con el DTD XHTML Transitional o Strict. Al declarar otro DTD, o
no hacerlo, puede que el resultado no sea el esperado.
7.2. Tamaño
Por lo general, la maquetación se realiza sobre elementos en bloque. Normalmente divisiones, pero también lo
podemos hacer con párrafos, listas, o con el propio body. Por defecto los elementos de bloque ocupan todo el
ancho del elemento que lo contiene, y su alto se ajusta al contenido.
Cualquier elemento HTML de bloque, tiene dos atributos que pueden definir su tamaño: ancho (width) y alto
(height).
Los valores para estas medidas, pueden ser expresados en las medidas habituales:
Tamaños absolutos, utilizando px, cm, etc...
Tamaños relativos al elemento que lo contiene, utilizando porcentajes (%).
Tamaños relativos a la fuente, utilizando em.
El valor auto es el valor por defecto. Por ejemplo, un párrafo, por defecto, tienen un ancho del 100% y un alto
ajustado al contenido.
Por ejemplo, hemos definido el tamaño para el siguiente párrafo:
<p style="width:200px; height:100px; border: red 2px solid">
Por defecto, al no ocupar todo el ancho, el elemento queda alineado a la izquierda, como en el ejemplo anterior.
Una forma sencilla de centrarlo es dándole al margen (margin) derecho e izquierdo el valor auto.
<p style="width:200px; height:100px; border: red 2px solid; margin: auto;">
Con sólo esto, podríamos maquetar una página web que contenga una columna central, con un ancho fijo o
relativo. En el siguiente ejemplo, hemos contenido todo el texto en una capa, a la que le hemos asignado
el id="contenido", y en la hoja de estilo le hemos asignado un ancho fijo y la hemos centrado.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"

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

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

<head>

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

http-equiv="content-type" />

<title>Una columna</title>

<style type="text/css">

body {

background-color:#C2C5E7;

margin: 0;

div#contenido {

width: 800px;

margin: auto;
border-left: #6699FF 2px solid;

border-right: #6699FF 2px solid;

background-color: #EDEEF8;

padding: 5px;

</style>

</head>

<body>

<div id="contenido">

<h1>P&aacute;gina con una columna</h1>

<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed facilisis nulla et risus. In eleifend sapien a
neque. Etiam fermentum. Sed dapibus suscipit diam. Praesent non nisi ac leo congue vestibulum. Mauris ac
orci eu nisl dictum ultrices. Morbi blandit dolor vitae sapien. Vivamus in neque. Integer sit amet mi. Curabitur
ipsum lectus, ultricies sit amet, bibendum a, sodales vitae, massa. Quisque metus. Sed blandit hendrerit urna.
Aenean eu nulla. Praesent vulputate dui id lacus. Nunc vel odio. Nulla eleifend rutrum nulla. </p>

<p>Praesent ut ipsum. Nullam vitae nunc. Nam sit amet libero id mauris consectetur pulvinar. Suspendisse
vulputate lorem quis lectus. Quisque commodo purus et nibh. Nunc quis mi quis risus hendrerit ultricies. Cum
sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aliquam ac dui. Mauris
vulputate fermentum tellus. Morbi rhoncus lorem id nibh. </p>

<p>Etiam cursus nulla ac purus. Pellentesque massa elit, dignissim et, volutpat eu, sagittis tristique, sem.
Quisque nec leo. Etiam fringilla pellentesque turpis. Vestibulum at est. Sed sapien nunc, faucibus ac, suscipit
sit amet, lacinia porttitor, mauris. Curabitur congue justo sed nunc. Pellentesque habitant morbi tristique
senectus et netus et malesuada fames ac turpis egestas. Integer tristique diam vitae ligula. Nulla tincidunt,
metus sit amet congue porttitor, purus pede commodo odio, vel varius mauris nulla id augue. Mauris
pellentesque volutpat lacus. Maecenas erat. </p>

<p>Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Vestibulum
volutpat, lacus non mattis vulputate, lorem nunc varius odio, in venenatis ante augue quis nisl. Praesent ut mi
interdum lorem consequat vulputate. Vivamus ac urna non elit pellentesque 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>
Puedes copiar el código y pegarlo en la caja de texto que encontrarás en esta página Probar código .

Enero-2010
Pág. 7.1
Unidad 7. Maquetación web (II)

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.
Unidad 7. Maquetación web (III)

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 40pxa
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.
Unidad 7. Maquetación web (IV)

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 (V)

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>

Puedes copiar el código y pegarlo en la caja de texto que encontrarás en esta página Probar código .
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;
}

Para practicar todo esto, te recomendamos hacer el ejercicio paso a paso Maquetar con posicionamiento
absoluto, y después el ejercicio paso a paso Simular páginas. Y para que veas que con un poco de imaginación
se pueden hacer muchas cosas, te recomendamos el ejercicio paso a paso Texto en 3D.
En el primero de los ejercicios ejercicio 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.
Unidad 7. Maquetación web (VI)

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.
Para practicar lo que hemos visto, te recomendamos que hagas los ejercicios Maquetar con posicionamiento
flotante y Organizar elementos.
Unidad 7. Maquetación web (VII)

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>

Puedes copiar el código y pegarlo en la caja de texto que encontrarás en esta página Probar código .
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.
Unidad 7. Maquetación web (VIII)

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.
Como ejemplo de diseño fijo, tenemos la página de inicio de aulaClic.
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).
Un ejemplo de diseño líquido puede ser la página de este curso.
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.

Ejercicio propuesto la Unidad 7 Prueba evaluativa de la Unidad 7

Unidad 8. Menús (I)

8.1. El HTML del menú

El menú es un elemento fundamental de nuestra web, y hemos de dedicarle una atención especial.
Básicamente, el menú es un conjunto de enlaces a las distintas partes de nuestro sitio, y lo más habitual es
encontrarlo en el html de la página, o en un archivo javascript. De momento, vamos a ver cómo crearlo desde el
HTML.
La estructura puede ser cualquiera: podemos hacer un menú con divs, con tablas, etc. Pero lo más común, por
ser una estructura sencilla de manejar, es utilizar una lista (<ul></ul>), y está forma es la que explicaremos. Si
desactivamos los estilos del navegador (en Firefox, menú Ver → Estilo de página → Sin estilo; IE no tiene
esta opción) o vemos el código fuente de webs como www.elpais.es o www.marca.es, podremos encontrar que
en el lugar del menú aparece una lista.
Por tanto, cada elemento del menú es un elemento de la lista <li></li>. El elemento, contendrá normalmente un
enlace (<a href=""></a>) a una página del sitio.
Observa que hemos el menú de nuestro ejemplo, siguiendo esta estructura:
<ul>
<li><a href="index.html">Inicio</a></li>
<li><a href="flores/index.html">Flores</a></li>
<li><a href="nosotros.html">Nosotros</a></li>
<li><a href="contacto.html">Contacto</a></li>
<li><a href="noticias.html">Noticias</a></li>
</ul>
8.2. Estilo básico del menú
Una vez creado el menú, todo lo referente a su aspecto lo haremos utilizando estilos CSS. Lo más cómodo será
darle un id, por ejemplo id="menu". De esta manera podremos referirnos la menú como ul#menu, y a sus
elementos como ul#menu li.
Las listas se muestran casi igual en IE que en Firefox, pero en el primero se desplazan hacia la derecha
utilizando margin, y en el segundo padding. Para no liarnos, podemos comenzar por poner ambos a 0, y ya les
daremos algún valor si lo creemos necesario.
Otra cosa característica de las listas son las viñetas. Podemos quitarlas con la propiedad list-style-type: none;, o
utilizar una imagen con la propiedad list-style-image: url(imagen.png);.
Al final los elementos de la lista tendrán el aspecto de botones que se pueden pulsar. Pero esto no es cierto, ya
que el enlace sólo está en el texto, porque la etiqueta <a> es un elemento en línea que se ajusta a su contenido.
Podemos cambiar este comportamiento con aplicándole a los enlaces del menú la regla display: block. Esto lo
convierte en un elemento de bloque, y hace que ocupe todo su contenedor.
Daremos un formato apropiado al texto, a los enlaces, y añadiremos un borde a los elementos para
diferenciarlos. Todo esto en función del diseño que queramos conseguir.
ul#menu {

margin: 0;

padding: 0;

list-style-type: none;

#menu li {

background-color: #AF7051;

border: #5F4232 3px solid;

margin: 1px;

#menu a {

color: #F0D7B5;

text-decoration:none;

display: block;

padding: 2px;

}
Inicio
Flores
Nosotros
Contacto
Noticias

Unidad 8. Menús (II)


8.3. Posición de los elementos
Por defecto, los elementos de la lista se muestran uno debajo de otro. Pero por cuestiones de diseño, podemos
preferir que se muestren en horizontal, uno al lado del otro. Esto podemos conseguirlo, por ejemplo poniendo
los elementos como flotantes.
#menu li {
background-color: #AF7051;
border: #5F4232 3px solid;
margin: 1px;
float: left;
}
Inicio
Flores
Nosotros
Contacto
Noticias

También podemos ponerlos en horizontal con la propiedad display: inline;. En este caso, lo mostramos como
elementos en línea, por lo que no podremos regular su tamaño.
8.4. Tamaño de los elementos
Por defecto, el ancho (width) de una lista es del 100% del elemento que la contiene. Su alto (height) depende de
la cantidad de elementos que contenga. El ancho de los elementos es del 100% de la lista cuando están en
vertical, y ajustado al contenido cuando están en horizontal. El alto, se ajusta siempre al contenido.
Por cuestiones estéticas, puede que queramos personalizar estos tamaños. Por ejemplo, para que todos los
elementos que están en línea tengan el mismo ancho, basta con definir un ancho con la propiedad width,
suficiente para contener al elemento mayor:
#menu li {
background-color: #AF7051;
border: #5F4232 3px solid;
margin: 1px;
padding: 2px;
float: left;
width: 60px;
}
Inicio
Flores
Nosotros
Contacto
Noticias

Si estamos utilizando los enlaces con display: block, debemos de darle el mismo alto para que lo llene todo.
Otra opción sería definir el tamaño sobre los enlaces, ya que los elementos de lista flotantes se ajustarán al
tamaño.
Recuerda, que siempre puedes centrar horizontalmente el contenido de un elemento con la propiedad text-
align: center;.
Del mismo modo, podemos definir un alto con la propiedad height.
#menu li {
background-color: #AF7051;
border: #5F4232 3px solid;
margin: 1px;
width: 150px;
text-align: center;
height: 30px;
}

Inicio
Flores
Nosotros
Contacto
Noticias

En CSS no existe una propiedad para centrar verticalmente el contenido de un elemento. Pero en casos como
éste, en el que sólo tenemos una línea de texto, podemos utilizar un truco. Si al alto de la línea (la
propiedad line-height) le damos el mismo tamaño que el alto del elemento (en el ejemplo anterior, habría que
añadir line-height: 30px;), el texto se mostrará centrado verticalmente.