PRIMERA LECCION

PASO A PASO DISEAR PAGINA WEB

Software Necesario
Un software es un programa informtico. Para crear nuestra pgina web necesitamos un programa.
Para crear webs hay de pago y gratuitos, usaremos uno gratuito, por ejemplo uno que se llama Html-Kit.

De dnde descargar Html-Kit

El Html-Kit es un editor de html y css (entre otros) gratuito. Editor significa que podemos escribir con
l y Html y Css son los lenguajes que se usan para hacer pginas web. Aunque tienes la opcin de pagar
para tener acceso a un sin fn de herramientas extra, por lo pronto, con la versin gratuita nos va a
sobrar.
Para conseguirlo, qu mejor que descargarlo desde la pgina oficial. La pgina es www.htmlkit.com.
Ve haciendo clic y se abrir una ventana aparte, para que puedas seguir leyendo estas instrucciones.
Al acceder a la web de Html-Kit podrs ver en la parte alta un cartelito similar a este:

En el hueco de arriba te preguntan donde oiste hablar de Html-Kit. Puedes poner lo que quieras, la
direccin de esta web, un buscador, etc, etc. En el hueco de abajo puedes escribir tu email si deseas
recibir informacin de actualizaciones de este software y cosas as. No son obligatorios ninguno.
A continuacin, pulsa en la parte de abajo de ese cuadro, donde pone Download HTML-Kit para
proceder a la descarga del archivo. Son unas 2.8 megas, por lo que ser algo rpido. Al hacer clic se
abre una ventana preguntado si lo deseas guardar o ejecutar directamente. Escoge Guardar y as lo
tendrs a mano en caso de que te haga falta:

Tras terminar de bajarlo aparece otra ventana. Escoge Ejecutar para empezar su instalacin:

Quizs te aparezca un mensaje como este:

Puedes aceptar y Ejecutar sin problemas. Este programa es seguro. En seguida, el programa empieza
a instalarse en tu PC.

Cmo Instalar el Html-Kit

Comienza mostrando una ventana de bienvenida y preguntndote si quieres seguir o no.

Ahora aceptamos los las condiciones. Tienes que marcar la casilla que te he marcado en rojo en la
imagen de aqu abajo y despus pulsar en Next> :

Siguiente paso? Indicarle en que carpeta de nuestro disco duro lo queremos instalar. La opcin por
defecto es perfectamente vlida:

Seguidamente, nos pregunta qu opciones deseamos instalar. Escogemos todas.

Luego muestra otra ventana que te pregunta cul quieres que sea el nombre del programa en tu barra
de programas... aceptamos de nuevo...

Bueno... ahora nos muestra las opciones que se van a instalar.

Pulsamos Install. Se instala en un segundo, luego nos dice que ya est todo listo. Te recomiendo no
dejar marcada la casilla marcada con un crculo rojo.

Hacer un acceso directo al Html-Kit en tu escritorio

Ir a Inicio > Todos los programas > Html Kit y en el icono de la ventana que se despliega, hacer clic
con el botn derecho del ratn sobre el que pone Html Kit y escoger "Crear Acceso Directo". En ese
momento si vuelves a abrir el desplegable vers dos iconos de Html Kit. En el recien creado aparece un
"2" al lado. Haz clic una sola vez sobre ese icono y SIN soltar el botn, arrstralo hasta tu escritorio y
listo, ya lo tienes a mano. La prxima vez que quieras abrir el Html Kit bastar con darle dos veces a ese
icono de tu escritorio.

Arrancando el Html-Kit
En la pgina anterior nos quedamos en esta ventana:

Aceptamos de nuevo presionando "Finish" y vemos.

Dice arriba que las preguntas siguientes son para ayudarte a configurar el programa, pero que
siempre puedes cambiar estas cosas ms tarde desde Edit > Preferencias. Esta pregunta de arriba es por
si quieres que los archivos HTML se abran siempre por defecto con este programa. Por el momento le
diremos que no, luego muestra otra pregunta.

Quieres que Html-Kit detecte los navegadores que tienes para usar la vista previa con ellos? Fjate, a
esta le vamos a decir que s.
Ahora como ves en la ventana de aqui abajo, pregunta si quieres descargarte enlaces de ayuda e
informacin actualizada. A esto le diremos que no.

Luego pregunta si queremos verificar si hay alguna versin ms moderna del programa, ponga NO.

Y finalmente nos invita a dar una vuelta por el programa con el tutorial.

Bueno. Ahora aparece una ventana preguntando qu tipo de archivo queremos abrir para empezar.
Como opciones tenemos:
Create a new file (Crear un nuevo archivo)
Create a new file based on a template (Crear un archivo basado en una plantilla)
etc, etc, etc.
Escogemos Create a new File y antes de pulsar OK desactivamos la casilla de abajo del todo, donde
pone "Dont display this screen again" o "No mostrar esta ventana de nuevo".

Traducir el Html-Kit al espaol

Ahora que tenemos el Html-Kit instalado vamos a traducirlo al castellano para entenderlo mejor. Para
ello es suficiente bajar un archivo de la pgina web oficial de Html-Kit y descomprimirlo en una carpeta
de nuestro disco duro.
El archivo necesario lo puedes encontrar en:
http://www.html-kit.com/html-kit/download/plugin/irtranslationspanish/

Pulsa donde pone "start download" que significa "empezar a descargarlo". Al hacer clic all se abre
esta ventana de Windows preguntandote donde guardar el archivo. Hazlo en la carpeta "default" que se
encuentra dentro de una de las carpetas donde has instalado el programa:

Una vez guardado el archivo (llamado irTranslationSpanish.zip) descomprime su contenido en esa

misma carpeta y listo. La prxima vez que abras el Html-Kit estar en Castellano gran parte del men,
no todo, pero la gran mayoria.
Si te descargas ese archivo y no logras descomprimirlo haciendo doble cllic sobre l, quizs sea
porque no tienes ningn programa descompresor instalado. Puedes bajarte el winrar, instalarlo y poder
as descomprimir tanto este como los que te bajes en el futuro. Para cualquier duda al respecto usa el
Foro CCTW.

Simplifica el Html-Kit, Hazlo fcil!

El Html-Kit es un programa sencillo, pero an as tiene cantidad de opciones que no vamos a
necesitar, al menos por el momento. Trataremos de desactivar todo aquello que no vayamos a usar e
iremos activandolo conforme nos haga falta. Para empezar, abre tu Html-Kit .

Tras desactivar esa opcin y pulsar OK vemos de nuevo el programa con una pgina nueva, tal que as:

Empecemos a desactivar cosas. Para empezar haz clic en la barra de herramientas, donde pone Ver y
vamos a desactivar una a una todas las opciones que te marco con un crculo rojo en la siguiente
imagen:

Todas ellas las puedes activar cuando quieras haciendo lo mismo de nuevo, de este modo la superficie
de trabajo que nos queda es mucho ms amplia y clara. Quedara as:

Mucho mejor. Ya estamos preparados para empezar el juego. Vers cmo crear pginas web va a ser
pan comido para t. Ahora es una buena oportunidad para empezar a saber qu es ese cdigo que
aparece en la pantalla del Html-Kit. Vamos a verlo en la pgina siguiente.

Primer contacto con el cdigo HTML?

Una pgina web no es ms que un puado de letras y nmeros que son interpretados por los
navegadores mostrando lo que ves por internet. Al ser tan solo eso, letras y nmeros, podramos usar
por ejemplo el Block de Notas de Windows para crear una pgina web completa. Tan solo hay que saber
qu letras y nmeros escribir y luego guardar el archivo, pero en lugar de hacerlo con extensin .txt se
guardara con extensin .html o .htm (son iguales).
Nosotros vamos a usar en estas lecciones otro programa distinto al Notepad o Block de Notas, el
Html-Kit.

El cdigo html de una pgina web

Todas las pginas web empiezan y terminan con el mismo cdigo y es el siguiente:

<html>

(todas empiezan con esto)

</html>

(todas terminan con esto otro)

En adelante, siempre que escriba cdigo HTML lo har de este modo, de color azul y con fondo gris
para que lo distingis. Pues bien, si eso lo escribimos en un archivo y lo guardamos con extensin .htm o
.html ser una pgina web. Vacia si, pero una pgina web.
La primera palabra <html> indica que ah empieza el cdigo de la web. La segunda </html> indica
que el cdigo de la pgina web a terminado. Se distinguen por la contrabarra / que siempre indica que
algo ha terminado.

La estructura de una pgina web en HTML

Dentro de cualquier pgina web hay cosas que se ven (o que se escuchan) y cosas que no. Las cosas
que se ven son los textos, las imgenes, sonidos, etc. Por otro lado lo que no se ve son sus
caractersticas, como el ttulo, su descripcin, y otra serie de cosas que veremos ms adelante. Las
cosas que no se ven se colocan dentro del cdigo HTML en una zona llamada cabecera (Head en ingls) y
lo que se muestra se pone en lo que se llama cuerpo (o Body en ingls). Pues igual que antes hemos
escrito en cdigo dnde empieza la pgina y dnde termina, la cabecera llamada HEAD y el cuerpo
llamado BODY se colocan y escriben as en Html:

<html>
<head>
</head>
<body>
</body>
</html>
En Html, se indica que va a empezar la cabecera con la palabra <head> y termina con la misma
palabra pero colocndole la contrabarra, </head> tal y como hemos visto que pasaba para cerrar
</html>. Lo mismo podemos decir del cuerpo, que comienza con <body> y termina con </body>.
Como puedes ver, tanto la cabecera como el cuerpo no contienen nada dentro, por lo que seguimos
teniendo una pgina web vaca.

Definir el ttulo de una pgina web

Una de las cosas que se pueden definir dentro de la cabecera o head es el ttulo de la pgina. Antes
hemos dicho que en la cabecera se colocaban las cosas que no se mostraban en la web. Este ttulo
realmente no se ve en la web, pero si en la barra azul de la parte alta del navegador (Explorer, Mozilla,
Firefox, etc son tipos de navegadores) por lo que resulta importante aprender a definirlo. Ms adelante
veremos por qu es tan importante.
Como ya estars sospechando, existe una palabra para indicar que va a comenzar el ttulo y otra para
indicar cundo termina. El ttulo se define as (como ves, dentro de la cabecera o head):

<html>
<head>
<title>Este es el ttulo de mi web y puedo escribir lo que quiera!
</title>
</head>
<body>
</body>
</html>

10

Como siempre, empieza por la palabra <title> y termina con la misma pero con la contrabarra
delante, es decir, con </title>. Si guardramos esto en un archivo con extensin .html o .htm qu
veriamos? Una ventana del navegador completamente en blanco, pero con un ttulo en la parte superior
del navegador como el que hemos escrito. Mira un ejemplo haciendo clic aqu.
Si tras hacer clic en ese enlace y abrirse la pgina del ejemplo miras el cdigo de esa pgina web,
vers como coincide exctamente con el mostrado antes. Si no sabes, te enseo como mirar el cdigo
html de una pgina web en la pgina siguiente.
Por el momento, ya sabes crear pginas en blanco.

Cmo ver el cdigo Html de cualquier pgina web?

Si sabes ver el cdigo Html de una pgina web puedes pasar sin miedo a la pgina siguiente. Mirar el
cdigo Html de una pgina web resulta muy util, tanto para corregir errores en tus pginas.
La forma ms sencilla de ver el cdigo Html de una pgina web es haciendo clic en las opciones que
aparecen normalmente en la barra de herramientas superior de cualquier navegador. La opcin concreta
depender de cul sea el navegador que ests usando.
Si usas el Internet Explorer puedes ver el cdigo haciendo clic en Ver > Cdigo Fuente.
Cuando pongo esta flechita ">" es para indicar que primero se hace clic en la opcin Ver y al abrirse
el desplegable con otras opciones, se toma la opcin Cdigo Fuente. Te enseo una imagen para que lo
tengas ms claro:

Si en cambio ests usando el Firefox, la opcin est en Ver > Cdigo Fuente de la Pgina o teclas
Control + U.
Para el navegador Opera, el cdigo Html se puede lo tienes en Ver + Cdigo Fuente o pulsando las
teclas Control + F3.

Una Carpeta para dominarlas a todas...

Vamos a ordenar nuestros archivos. Para ello sigue estas indicaciones paso a paso.

La carpeta de nuestras webs

Cuando tengamos lista nuestra pgina web tendremos que mandar todos los archivos utilizados a la
red (a nuestro servidor) por lo que es necesario que todos ellos estn en una misma carpeta. En caso
contrario sera un lio tremendo saber qu tenemos que subir.
El lugar ms accesible es nuestro escritorio de Windows, de modo que vamos a crear una carpeta all
llamada "mis-paginas-web". Crear esta carpeta es bien sencillo. Pones el cursor de tu ratn sobre una
parte de tu escritorio donde no haya ningn icono. Haces clic all con el botn derecho del ratn y
escoges Nuevo > Carpeta. A continuacin le pones el nombre que os he dicho " mis-paginas-web" y
pulsamos Intro. Ya tenemos lista la carpeta.

11

Dentro de esta carpeta como te digo, vamos a guardar todos los archivos que usemos en cada web.
Digo "en cada web" porque adems de la que vamos a crear ahora, t mismo puedes seguir creando
otras. Asi que dentro de esa carpeta vamos a crear otra llamada "web-ejemplo-cctw", que ser donde
guardemos los archivos de esta web de ejemplo que iremos creando con estas lecciones.

Dentro de la carpeta "web-ejemplo-cctw" crea otra carpeta ms y llmala "objetos". En ella

guardaremos las imgenes, archivos de sonidos, etc., es muy importante que sigas estos pasos al pie de
la letra, de modo que cuando digo que a esa carpeta la llames "objetos", hazme caso y no la llames
"Objetos", ni "OBJETOS". Todo en minsculas.

Configurar nuestro Sitio en en Html-Kit

Debemos configurar nuestro Sitio en el Html-Kit. Y qu es un Sitio? Se llama sitio a toda la web,
incluyendo todas sus pginas, imgenes y dems elementos. Coincide o ha de coincidir con la carpeta
que acabamos de crear, pues esa era su funcin, englobar todos los archivos del sitio para no liarnos ni
liar al Html-Kit.

Abriendo la ventana WorkSpace

Cierra el Html-Kit si lo tienes abierto y sigue estos pasos de uno en uno y hasta el final.

12

1-

Abre el Html-Kit. Aparecer en blanco con una pantalla como esta:

2.- Haz clic sobre la barra de herramientas, donde pone Herramientas y activa la opcin Workspace.

3.- Aparece ahora una ventana donde podemos definir nuestros sitios:

13

Vemos tres carpetas ya creadas. Cuando seas mayor si quieres las cotilleas pero ahora vamos a lo
nuestro. En el futuro, puedes cerrar esa ventana pulsando sobre la x de su parte superior derecha y
puedes volver a verla siguiendo lo explicado en el paso 2.

Sitio Local y Sitio Virtual

Dentro de esa ventana llamada WorkSpace vamos a definir dos sitios. Uno que se llama Sitio Local
que se corresponde con la carpeta que tenemos en el ordenador llamada antes "ejemplo-web-cctw" y
otro sitio que podemos llamar Sitio Virtual, que ser el espacio en internet. Este segundo lo veremos
ms adelante. Por ahora vamos a definir el Sitio Local de la siguiente forma:
1.- Hacemos clic en la barra de herramientas, donde pone Workspace y escogemos Aadir Carpeta
Local/Red.

2.- En la ventana que se abre, tienes que poner la carpeta "pagina-ejemplo-cctw" en el primer cuadro
de texto (pincha en la carpeta amarilla de su derecha para encontrarla y escogerla) y en el segundo
cuadro de texto pon un ttulo cualquiera, por ejemplo, "web-ejemplo-cctw-local" y pulsa OK:

3.- Tras pulsar OK vers como aparece este nuevo sitio en la ventana de Workspace:

14

A partir de ahora, cada vez que queramos trabajar sobre archivos de esta pgina web, en lugar de
abrir la carpeta que hemos creado en lecciones anteriores (web-ejemplo-cctw), podemos acceder a
ellos directamente desde ac.

Que tal crear otro sitio para tus pruebas?

Vvamos a crear una segunda carpeta o sitio local, en el que podrs hacer todos los experimentos que
quieras. As podrs dejar el sitio "web-ejemplo-cctw-local" solo para lo explicado aqui y no te hars un
lio mezclando lo que explicamos con tus propias pruebas, vale?
Para crear esa otra carpeta local repite los pasos anteriores, y crea otra para tus cosas llamada como
quieras, por ejemplo "mis-experimentos". A la hora de crearla te pide una carpeta. Puedes crear una
llamada "mis-experimentos" dentro de la carpeta del escritorio llamada "mis-paginas-web" si quieres.

Cmo crear la primera pgina de la web

La primera pgina que vamos a crear es la pgina principal. La pgina principal es la que se muestra
por defecto al visitante cuando nos visita, la primera que ve. Su archivo ha de llamarse
obligatoriamente index.html sea cual sea el servidor donde la alojemos.
Como esta pgina va a pertenecer al sitio "web-ejemplo-cctw", tendremos que aparnoslas para
crearla dentro de ese sitio y no en los otros que aparecen en la ventana de Workspace. Para crearla
ponemos el cursor del ratn dentro de la ventana de Workspace, justo encima del sitio " web-ejemplocctw" y pulsamos el botn derecho del ratn.
Se abre entonces una ventana en la que tenemos que escoger, dentro de la seccin New, la opcin
Create File...

Al hacer clic sobre Create File... aparece esta otra ventana:

15

Haz clic sobre la lengeta en la que pone "General", escoge el tipo de archivo "Blank HTML Page"
(pgina html en blanco) y pulsa Ok.
En seguida aparece otra ventana preguntndonos el nombre que queremos que tenga ese archivo. Se
tiene que llamar index.html pues ser la pgina principal, as que lo escribimos en esa ventana, con la
extensin y todo y pulsamos en Ok:

Para ver el archivo tienes que hacer clic en el signo "+" que hay a la izquierda del sitio "web-ejemplocctwm en la ventana Workspace. Haz clic all.

Como ves, no solo te muestra el archivo index.html sino tambin la carpeta "objetos" que hemos
creado anteriormente. Si te vas a MiPc y abres la carpeta vers como adems de la carpeta "objetos"
tambin aparece all el archivo index.html

Cmo crear un prrafo en la pgina web

Si has prestado atencin a lo dicho hasta ahora, te acordars de que las cosas que se ven en la web se
colocan dentro del cuerpo o Body, es decir, entre las etiquetas <body> y </body> de modo que, si
vamos a escribir un prrafo tendremos que hacerlo all.
Empezaremos abriendo el Html-Kit. Una vez abierto nos vamos a la ventana Workspace, hacemos clic
en el signo "+" que hay a la izquierda del sitio "web-ejemplo-cctw" para que se muestre su contenido y
despus hacemos doble clic en el archivo index.html o pgina principal. Se abre entonces la ventana de
ese archivo mostrando todo su cdigo Html.

16

Como por ahora solo vamos a trabajar sobre el index.html podemos cerrar la ventana Workspace para
tener ms sitio visible. De modo que hacemos clic en la x de Workspace para cerrarla y despus
maximizamos la ventana del index para ocupar toda la ventana del Html-Kit, quedando as:

Esta es la vista llamada "Editor de Html". Empieza por <html> seguido de la cabecera y despus el
cuerpo o Body, para cerrarse al final con </html> que como toda etiqueta de cierre lleva su contrabarra
"/".
Se ve tambin esa primera lnea. Esa lnea describe el tipo de pgina que es, las normas de Html que
est siguiendo. No tiene mayor importancia, la dejaremos y listo.

Cambiando el ttulo
Vamos a cambiarle el ttulo a esta index. Bastar con escribir el ttulo que quedamos en lugar de
donde pone "Page title". Vamos a ponerle "Pagina Principal del Ejemplo CCTW". Ya sabes, entre <title>
y </title>.

Mi primer prrafo
17

Al igual que un ttulo se escribe entre <title> y </title>, un prrafo hay que escribirlo entre las
etiquetas <p> y </p>. As, para escribir por ejemplo "Bienvenidos a mi pgina web. Muy pronto estar
lista!" basta con escribir esa frase encerrada entre esas etiquetas, dentro del cuerpo de la pgina es
decir, entre <body> y </body>. Quedara as:

Claro que con la vista "Editor" no vemos lo que estamos consiguiendo. Para ver cules son los
resultados el Html-Kit dispone de otra vista llamada "Preview" o vista previa, que nos muestra cmo
quedara la web vista por internet. A esta vista previa o preview se accede haciendo clic abajo del todo,
junto a donde pone "Editor". Haz clic ah y veamos cmo queda nuestro ejemplo por el momento.

Haciendo clic sobre "Editor", junto a "Preview" puedes volver a ver la vista de cdigo Html.

Crear un segundo prrafo en la pgina

Para crear un segundo prrafo basta con incluir ese segundo prrafo debajo del anterior y encerrarlo
entre las etiquetas <p> y </p>. Por ejemplo, vamos a poner este segundo prrafo: "Pgina creada
gracias a CCTW". En la vista "Editor" la pgina quedara as:

18

Esto es lo que hemos conseguido hasta el momento: ejemplo 2.

Cmo guardar los cambios realizados

Para guardar lo que hemos hecho hasta el momento pulsa en la barra de herramientas, donde pone
Archivo y escoge Salvar. Ya puedes cerrar el Html-Kit sin miedo a perder nada.

Cmo crear un enlace en la pgina web

Lo importante de una pgina web es la posibilidad de navegar de unas pginas a otras sin ms que
hacer clic en los enlaces, as que vamos a aprender a crearlos. Para crear un enlace hay que decidir dos
cosas, una es desde qu palabra de nuestra web lo queremos hacer y segundo a qu pgina lo queremos
dirigir.
Para el ejemplo vamos a crear un enlace desde la palabra "CCTW" que tenemos escrita en el segundo
prrago hacia la direccin www.comocreartuweb.com
Para ello cierra el Html-Kit y lo vuelves a abrir Ahora vuelve a abrirlo y aparecer el Html-Kit en
blanco. En ese caso ya sabes, pulsa sobre Ver > Workspace para que aparezca la ventana de los sitios
( la ventana Workspace) y una vez que aparezca haz clic en el signo "+" a la izquierda de "web-ejemplocctw" para ver su contenido. Para terminar, doble clic sobre el archivo index.html para ver su cdigo.

El cdigo Html de los enlaces o vnculos

Los enlaces empiezan con una etiqueta y terminan con otra de cierre. La etiqueta de inicio para
definir enlaces es <a> y la de cierre </a>. La palabra que encerremos entre esas dos etiquetas ser la
que el visitante pueda pinchar para acceder a la pgina enlazada. Por lo tanto, si la palabra fuera
"palabra" la lnea quedara as:
<a>palabra</a>
Hay que indicar a qu pgina queremos enviar al visitante al hacer clic all. Esto se define dentro de
la etiqueta de inicio, de este modo:
<a href="ruta">palabra</a>
Donde pone "ruta" hemos de poner la direccin completa del lugar a donde queremos mandar al
visitante. Te recomiendo que leas las instrucciones sobre rutas que tenemos en ComoCrearTuWeb.
Como queremos enlazar a una web externa, pondremos entre las comillas su ruta absoluta que es
esta: http://www.comocreartuweb.com quedando el cdigo del enlace de este modo:
<a href="http://www.comocreartuweb.com">CCTW</a>
Te dejo una vista del Html-Kit.

19

En la misma o en otra ventana?

Si no se indica ninguna cosa ms, cuando el visitante haga clic en el enlace la pgina destino se abrir
en la misma ventana, pero si quieres que en lugar de eso se abra en una ventana distinta (por ejemplo,
para que no se pierda la web anterior) has de indicrselo dentro de la primera etiqueta. Yo te
recomiendo que todos los enlaces hacia pginas de tu misma web se abran en la misma ventana, y que
todos los enlaces hacia pginas externas las abras en ventanas diferentes.
Como este enlace apunta a una pgina externa (no forma parte de la web de ejemplo) le vamos a
indicar que ha de abrirse en una ventana distinta y esto se hace aadiendo este trozo de cdigo
target="_blank" quedando por tanto el cdigo as:

Los estilos css

El mayor problema que encontramos los que hacemos pginas web es el conseguir que se vea idntica
en cualquier navegador. A veces terminamos una web que se ve perfecta en Explorer y de pronto
vindola con el Opera o con el Firefox descubrimos que est toda desordenada. Esto pasa porque no
todos lo navegadores interpretan igual las cosas que escribimos en el cdigo Html.
Para evitar esto lo mejor es usar estilos CSS. Mucha gente piensa que es algo complicado, pero como
lo vamos a ir aprendiendo sobre la marcha no te va a resultar nada dificil.
La idea es colocar en las pginas web solamente los contenidos, sin tener en cuenta colores,
tamaos, anchuras, solo contenidos puros. Por otro lado crearemos un archivo aparte donde definiremos
todas las caractersticas que queremos que tenga cada elemento de cada una de las pginas de la web.
Si en el futuro deseamos hacer cambios en la fuente, solo tenemos que indicarlo en ese archivo de
caractersticas y automticamente quedar cambiado en todas las pginas de nuestra web, lo mismo

20

pasa si cambiamos el fondo, la posicin de cierto elemento, el color, todo lo que tenga que ver con el
modo de presentar el sitio web se queda definido en ese archivo.

La hoja de estilos css

Este archivo de caractersticas se llama Hoja de Estilos y vamos a llamarlo siempre estilos.css. La
extensin .css es obligatoria.
Por un lado hemos de crear ese nuevo archivo y por otro lados hemos de indicar en cada una de las
pginas de nuestra web que ha de leer esa Hoja de Estilos para saber cmo queremos que se presenten
los elementos de la web.

Crear la Hoja de Estilos estilos.css

Para crear la hoja de estilos volvamos a abrir el Html-Kit y activamos la vista de Workspace para
tener a mano el sitio web-ejemplo-cctw. Luego hacemos clic con el botn derecho del raton sobre la
carpeta del sitio web-ejemplo-cctw de la ventana Workspace y escogemos New > Create File Se abre
entonces la ventana que nos pregunta qu tipo de archivo queremos crear. Escogemos este que presenta
en la imagen de abajo:

Fjate que est en la primera pestaa, donde pone StyleSheet que significa Hoja de Estilo y que
hemos escogido Blank Style Sheet que significa Hoja de Estilo en Blanco. Al pulsar Ok nos pregunta
que nombre queremos darle al nuevo archivo. Escribimos estilos.css

Tras pulsar OK aparece este nuevo archivo en la lista de archivos del sitio web-ejemplo-cctw de la
ventana Workspace, nuestra hoja de Estilo en blanco.

21

Relacionar la Hoja de Estilos CSS con la pgina web

Ahora que tenemos creada la Hoja de Estilos hay que decirle a la pgina web index.html que tiene
que leer las caractersticas que hay en estilos.css para que sepa qu propiedades queremos que tenga
cada elemento de la pgina.
Como los estilos no son un elemento que aparecer en la pgina sino algo que indica cmo se han de
mostrar los elementos (color, tamao, etc), parece fcil adivinar que los estilos (o la llamada a la hoja
de estilo) hay que indicarlos dentro de la cabecera o Head de la pgina. La lnea de cdigo Html que
tenemos que incluir en la cabecera, es decir, entre <head> y </head> es esta:
<link rel="stylesheet" href="ruta/estilos.css" type="text/css" media="all">
(No pongas lo escrito en rojo. Eso significa que en ese lugar tienes que escribir la ruta, no que tengas que escribir " ruta/"
literalmente. Sigue leyendo para tenerlo ms claro)

Lo nico que tendrs que cambiar en algunas ocasiones de esa lnea es ruta/. Y cual ser? Si leiste
bien el apartado de las explicaciones de las rutas de los archivos de ComoCrearTuWeb se te har ms
fcil entenderlo. Vamos a usar una ruta relativa para indicar dnde ha de leer la pgina index.html el
archivo estilos.css
Como tanto la pgina index.html como el archivo estilos.css estn en la misma carpeta, basta con
escribir el nombre del archivo de la Hoja de Estilo. Esto es, usar rutas relativas. El cdigo Html ha de
queda entonces as.
<link rel="stylesheet" href="estilos.css" type="text/css" media="all">
De modo que abrimos el Html-Kit, abrimos la pgina index.html y escribimos esa lnea de cdigo
dentro del Head, quedando de esta forma:

Si ahora nos vamos a la vista previa haciendo clic en "Preview" (en la parte de abajo del Html-Kit)
vers cmo no hay cambio alguno. Esto es porque la Hoja de Estilo (estilos.css) est todava vaca.

Explicando el color y la imagen de fondo de una pgina web

Aunque podemos indicar un color y/o un fondo de pgina directamente en el cdigo Html, vamos a
hacerlo en la Hoja de Estilos para evitar los problemas y aprovechar las ventajas que te he comentado
en la pgina anterior. As de paso, vamos a prendiendo a usar el archivo estilos.css para definir las
caractersticas de las pgina web.

Color de fondo
Por defecto, el color de fondo de una pgina web es el blanco. Si queremos cualquier otro tenemos
que indicarlo. El elemento al que tenemos que decir que tiene que tener el color que queramos es el
Body, pues engloba a todo "lo que se ve" de la pgina web. Los colores se definen por un cdigo muy raro
(como por ejemplo #E6E6FA). Te dejo aqu un enlace con una lista de colores y sus cdigos que te puede
venir muy bien. Escoge uno que te guste para el fondo y seguimos.
Para indicar el color deseado, abrimos el Html-Kit, activamos la ventana Workspace y abrimos la Hoja
de Estilos creada antes. Escribe en ella este cdigo:
body {background-color: #E6E6FA}
En adelante, cuando escriba cdigos de CSS los pondr en color verde para distinguirlos del cdigo
Html que lo pondr de color azul.

22

Si ahora guardas el archivo estilos.css, abres el index.html y pulsas abajo en "Preview" para ver cmo
queda, vers como el fondo ahora es del color elegido. Y vers que no hemos tocado el index.html para
nada. Si en lugar de solo el index tuviramos 500 pginas pasara lo mismo, todas cambiaran con solo
retocar el archivo estilos.css y en cambio si no usramos Hoja de Estilos tendramos que cambiar el color
de fondo en las 500 pginas, una a una.

Un poco de estilos CSS

Para dar propiedades a los elementos de la web, se escribe en la hoja de estilos el nombre de la
etiqueta y a continuacin, encerrado entre los corchetes "{" y "}" se define cada propiedad que
queremos pero separndo unas de otras con un punto y coma ";". En el caso anterior, como la propiedad
era para el cuerpo, hemos escrito "body" y entre corchetes hemos definido la propiedad. Background
que significa fondo. background-color se usa para especificar el color de fondo no solo del body sino de
otros muchos elementos, como prrafos, enlaces, etc,. Ese nmero raro, el #E6E6FA es el cdigo que
corresponde a uno de los colores que aparecan en la tabla de colores del enlace que te puse antes. En
este caso, como solo hemos definido una propiedad, no es necesario poner el punto y coma, pues no hay
nada que separar.

Imagen de fondo
La imagen de fondo se define de forma similar al color de fondo. Primero vamos a escoger una
imagen que nos guste. Tienes un montn en la Galera de Imgenes, pero puedes colocar cualquiera que
tengas a mano. Cuando la tengas, copiala y la pegas en la carpeta "objetos" que hemos creado lecciones
atrs en tu escritorio, dentro de la carpeta "web-ejemplo-cctw" que hay en la carpeta "mis-paginasweb", y una vez copiada all le cambias el nombre y le pones "fondo.png".
Suponiendo que le hemos puesto de nombre fondo.png el cdigo a insertar en la hoja de estilos sera
este:
body {background-color: #E6E6FA ; background-image: url(objetos/fondo.png) }
Fjate como hemos separado la propiedad color de fondo de la propiedad imagen de fondo con un
punto y coma, tal y como te coment antes.

Explicando el Background-Image
En este caso la propiedad se llama background-image y sirve para indicar el archivo de imagen de
fondo que ha de tener la web. La ruta del archivo de imagen se escribe entre los parntesis tal y como
hemos visto en el cdigo. Por defecto, es decir, si no decimos lo contrario, esta imagen de fondo se
repetir horizontal y verticalmente para ocupar todo el fondo de la pgina, como formando un mosaico.
Se puede hacer que no se repita, que se repita solo horizontalmente, o solo verticalmente e incluso
que no se repita y colocarlo en el centro, o en la parte baja o a la derecha.... En cambio no es posible
conseguir que solo salga una vez y que a la vez se expanda ocupando toda la pgina. Vamos a ver todas
esas opciones.

Background-Repeat
Para que el fondo solo salga una vez hay que decirle, en la misma lnea de la hoja de estilo que no se
repita, de este modo: background-repeat:no-repeat quedando as el cdigo de la Hoja de Estilos:
body {background-color: #E6E6FA ; background-image: url(objetos/fondo.png) ; backgroundrepeat:no-repeat }
Para que el fondo se repita solo horizontalmente, se pone esto en su lugar: backgroundrepeat:repeat-x
body {background-color: #E6E6FA ; background-image: url(objetos/fondo.png) ; backgroundrepeat:repeat-x }
Para que se repita solo verticalmente se escribe: background-repeat:repeat-y
body {background-color: #E6E6FA ; background-image: url(objetos/fondo.png) ; backgroundrepeat:repeat-y }
Para que se repita vertical y horizontalmente no hace falta poner nada, pero si lo deseas puedes
poner esto: background-repeat:repeat, tal que as:
body {background-color: #E6E6FA ; background-image: url(objetos/fondo.png) ; backgroundrepeat:repeat }
An hay otro valor posible que podemos dar. Se trata del valor "inherit" que significa algo as como
fondo anclado. Significa que aunque movamos la web el fondo quedara fijo y solo se desplaza el
contenido, no el fondo. Eso si, no funciona en todos los navegadores, tenlo en cuenta si lo aplicas.

Background-Position
Tambin puedes elegir que el fondo aparezca arriba y centrado, abajo a la izquierda y todas estas
combinaciones con la propiedad background-position. Ejemplo:
body {background-color: #E6E6FA ; background-image: url(objetos/fondo.png) ; backgroundrepeat: no-repeat ; background-position: left bottom}

23

Los valores que puede tomar son: top (arriba), center (centrado) y bottom (abajo) para la alineacin
vertical; y left (izquierda) center (centro) y right (derecha) para la alineacin horizontal, de modo que
puedes usar cualquiera de esas combinaciones.
Aunque no se recomienda, tambin puedes usar distancias, es decir, indicarle que se posicione a 50
pixeles desde la derecha y 100 pixeles desde arriba, as: background-position: 50px 100px. Un pixel es
una medida de distancia y equivale a un puntito de tu monitor. Si te acercas mucho mucho a tu
monitor, casi pegando las narices a l, vers que todo est hecho con puntitos. Pues cada uno de
esos es un pixel. Para hacerte una idea, estas letras que lees deben tener unos 10 pixeles de ancho
cada letra. Una pgina web suele tener una achura de 800 pixeles.

Background-Attachment
Esto no funciona en todos los navegadores y hace que la imagen de fondo se quede fija mientras
mueves la pgina con la barra de desplazamiento o que se mueva con ella. Los valores a tomar son fixed
o scroll. Pero no te lo recomiendo por que depende del navegador conseguiras el efecto o no.

Nota:
Realmente, si definimos una imagen de fondo no es necesario el color de fondo. Puede estar bien por
si el archivo de la imagen de fondo no se cargara, pero si estamos seguros de que est bien podemos
eliminar la propiedad background-color de la lnea de la hoja de estilos, no crees? Pues a no ser que la
imagen no ocupe toda la pgina, la imagen tapar el color de fondo. En cambio si la imagen solo ocupa
una parte si puede ser interesante colocar el color de fondo. Eso queda ya a tu criterio.

Aplicando color e imagen de fondo a nuestro ejemplo

Aplicando el color de fondo
Tal y como hemos visto antes, para aplicar el color de fondo #E6E6FA a la pgina web pondremos a la
etiqueta body de nuestra hoja de estilo lo siguiente (ya sabes, abres el Html-Kit y abres la hoja de estilo
para insertarle esta lnea):
body {background-color: #E6E6FA}

Aplicando una imagen de fondo

Suponiendo que hemos escogido esta imagen para el fondo de la web :

(Para guardrtela, pon el ratn sobre ella, haz clic derecho y escoge guardar como. Luego la guardas en la carpeta
"objetos".)

y suponiendo que la hemos guardado en la carpeta "objetos" y que la hemos llamado "fondo.png",
abrimos la hoja de estilo y dejamos la lnea de antes as:
body {background-color: #E6E6FA ; background-image: url(objetos/fondo.png) }
Como no quiero que se repita, le pongo tambien esto:
body {background-color: #E6E6FA ; background-image: url(objetos/fondo.png) ; backgroundrepeat: no-repeat }
Adems la quiero centrada tanto vertical como horizontalmente, as que le aado esto:
body {background-color: #E6E6FA ; background-image: url(objetos/fondo.png) ; backgroundrepeat: no-repeat ; background-position: center center}
En otros navegadores no pasa nada, pero en Firefox es necesario especificar la altura del body para
que el fondo salga centrado verticalmente. Para conseguirlo solo hemos de indicar en esa misma lnea
que el body va a tener una altura del 100%, esto es... que va a ocupar lo que tenga que ocupar. Una
chorrada, lo se, pero si no el Firefox no se lo traga, de modo que lo ponemos y listo, perfecto:
body {background-color: #E6E6FA ; background-image: url(objetos/fondo.png) ; backgroundposition: center center ; background-repeat: no-repeat ; height:100%; }
A veces hay que buscar el truco para que se vea bien en cualquier navegador y la mayoria de veces es
un calentamiento de cabeza tremendo.
La pgina de ejemplo, tras guardar la hoja de estilo, se vera as con cualquier navegador:

24

Ya hemos insertado una imagen como fondo de pgina pero para insertar una imagen dentro de la
misma el procedimiento es algo distinto. Como puedes sospechar, como las imgenes son "visibles" van
definidas dentro del Body. En qu lugar? Eso ya depende de donde la queramos insertar.

Dnde insertar la imagen.

Si creamos la lnea de cdigo Html en cualquier parte dentro del Body, sta aparecer all, en
cualquier parte. Al principio uno de los problemas que vas a tener es no saber en qu parte del cdigo
Html insertar la lnea de cdigo correspondiente a un elemento para conseguir que aparezca donde
deseas?
Pues bien, una imagen puede insertarse o bien dentro de un prrafo, es decir, entre palabras, como
este ejemplo
y sin que el prrafo se corte, o bien como una lnea independiente. En ambos casos es
aconsejable meterla en un prrafo, a pesar de que sea la imagen lo nico que haya en esa lnea, es
decir, siempre encerrada entre <p> y </p>.

Cdigo Html para insertar una imagen

Para insertar una imagen, se coloca el siguiente cdigo:
<img src="ruta/imagen.gif" width="XXpx" height="YYpx" alt="descripcion de la imagen">
Como ves, este es uno de los pocos casos en los que no hay etiqueta de cierre, es decir, no se pone
</img>. Las imgenes nunca tienen etiqueta de cierre. Vamos a ver lo que hay dentro de ese cdigo.
Para empezar se coloca la ruta, que como siempre puede ser una ruta relativa (si la imagen
pertenece a, o est guardada en tu espacio web) o absoluta (siempre que la imagen la ests obteniendo
de otra web distinta a la tuya, aunque esto no es recomendable). Las rutas van siempre encerradas
entre comillas, no lo olvides.
Luego se coloca su anchura y altura expresada en pixeles con las siglas "px". No debes dejar nunca
espacios en blanco entre la cantidad y las unidades, es decir, no vale poner esto "100 px", sino que lo
vlido es ponerlo junto, as "100px". Estas cantidades las coloca normalmente el Html-Kit
automticamente y si t las cambias seguramente la imagen se vea desvirtuada y perder definicin. Si
necesitas cambiar el tamao mejor hacerlo con un programa grfico y luego la vuelves a pegar en la
pgina.
En el caso de que no pongamos ni width (anchura) ni height (altura), si el archivo de la pgina
fallara, el resto de los elementos como prrafos etc, ocuparan el lugar de esa imagen. Sera como si no
existiera. En cambio, si definimos anchura y altura, si ocurre un fallo con la imagen y esta no se
muestra, el navegador dejar un rectngulo con esas medidas en blanco, respetando la estructura de la
web, sin mover nada.
Por ltimo vemos un alt="........". No es obligatorio, pero para tener un cdigo vlido es necesario
poner ese alt y adems escribir entre las comillas una breve descripcin de la imagen. Este contenido
aparece en el hueco de la imagen en el caso de que la propia imagen no se visualizara por algn
problema. Por otro lado, algunos buscadores como Google tienen en cuenta estas palabras escritas en
estas descripciones para relacionar las bsquedas de sus usuarios con el contenido de las pginas web,
de modo que es bueno adems hacer que aquellas palabras por las que queremos ser encontrados
aparezcan en esa descripcin. En mi caso, si quiero aparecer en Google cuando la gente busque por las
palabras "html-kit", por ejemplo, me viene bien colocar descripciones en los alt de las imgenes como

25

"Men del Html-Kit", o "As se descarga el Html-Kit", pero siempre que tengan su sentido con esa imagen,
claro.

Vamos a insertar una imagen en nuestro ejemplo

En primer lugar necesitaremos una imagen guardada en la carpeta "objetos", que para eso est. Copia
esta misma que dejo debajo, la guardas en tu carpeta "objetos" y seguimos. Recuerda que para
copirtela solo tienes que poner tu ratn sobre ella, apretar el botn derecho del ratn y escoger
"Guardar imagen como...". Ponle el nombre sonrisa.gif y seguimos adelante.

Si ya tienes ese archivo guardado en "objetos" abre ahora el Html-Kit y la pgina index.html para
continuar. Vamos a colocar la imagen entre el prrafo donde dice "Bienvenidos a mi pgina web" y el que
dice "Pgina creada....". Como va entre los dos, nos vamos al Html-Kit a la vista "Editor" y ponemos el
cursor despus del primer </p> (al final de la lnea de cdigo del primer prrafo). A continuacin
pulsamos Intro para crear una nueva lnea e insertamos esto (como te he dicho, la encerramos entre
nuevos <p> y </p> que tambin debemos escribir):
<p><img src="objetos/sonrisa.gif" width="60px" height="60px" alt="Bienvenidos al ejemplo de
CCTW"></p>

Quieres aprender a hacerlo directamente desde las opciones del Html-Kit?

Situa el cursor al final del primer prrafo, como antes. Pulsa Intro para crear una nueva lnea y
seguidamente ve a la barra de herramientas del Html-Kit y escoge Etiquetas > Imagen > Insertar
Imagen...

Aparece entonces esta ventana:

26

Pulsas sobre Add... y en la ventana que se abre (mira la imagen de aqui arriba) busca la carpeta
"objetos". Tras pulsar en Aceptar se ve esto en la misma ventana:

Si seleccionas el archivo "sonrisa.gif" del cuadro de la derecha, vers como aparecen una serie de
datos que te he sealado en rojo en la foto de arriba. Aparce la ruta relativa, lo que ocupa, el ancho, el
alto, etc.
Nos falta ya que estamos ah poner la descripcin. Para eso pulsamos a la derecha de donde pone
"alt" (arriba a la izquierda, junto a la ruta relativa) y escribimos la descripcin que te dije antes
"Bienvenido al Ejemplo de CCTW". Como vers hay muchsimas ms opciones para las imgenes en esa
ventana, pero por ahora lo dejamos as.
Tras escribir la descripcin y pulsar Ok, vemos como aparece la lnea de cdigo en nuestra index.html
aunque le falta colocarle las unidades, es decir, escribir "px" tras cada cantidad de anchura y altura.
Ponlo t mismo a mano (sin dejar espacios entre el nmero y el px) y seguimos.

27

Cmo insertar un enlace a tu E-Mail

Cdigo Html de un enlace de E-Mail
Como vas a ver, es muy parecido al cdigo Html de un enlace a otra pgina web. Solo cambian una
palabrilla, y por supuesto la ruta, que en este caso ser simplemente tu direccin E-Mail. La lnea de
cdigo en Html es la siguiente:
<a href="mailto:tudireccion@email.com">Texto que quieras poner para hacer clic en l </a>
Donde pone "Texto que quieras poner.." escribe las palabras que ver el visitante y donde ha de hacer
clic para enviarte el mensaje. Puedes poner "Envame un E-Milio", "Clic para escribirme" o simplemente
la propia direccin de tu E-Mail.

Problemas de este tipo de enlace

El problema que yo le veo a esto es que hay miles de robots pululando por la red en busca de
direcciones de E-Mail para crear bases de datos con ellos y enviarles todo ese spam del que terminamos
tan hartos. Por lo que quizs prefieras una alternativa, ms incomoda para el visitante pero efectiva
contra el spam. Se trata de escribir tu direccin de E-Mail con un programa de dibujo y colocar la
imagen en la web. De este modo, como las imgenes no pueden ser leidas, estos robots no pueden cazar
tu direccin mientras que cualquiera de tus visitantes siempre puede leerla y escribirla en su programa
de correo para mandarte sus felicitaciones.
Tambin puedes colocar un botn cualquiera y hacer el enlace desde all. El botn sera un simple
dibujo con el texto "E-Mail" o el dibujo de un buzn de correo o algo as. En ese caso los robots de spam
no pueden leer la imagen, pero quizs puedan sacar la direccin de tu E-Mail desde el cdigo html de tu
web, por lo que seguimos con el mismo problema...
Qu hacemos entonces? Por el momento y para el caso del ejemplo, vamos a colocar el enlace de EMail en un dibujo de un buzn. Aunque sea para aprender.

Enlace de E-Mail en una imagen

Primero gurdate esta imagen en tu carpeta de "objetos" para poder seguir. Al guardarla ponle de
nombre buzon.gif

Ya tenemos tres archivos en la carpeta de "objetos":

Ahora abre el index de tu Html-Kit y pon la vista "Editor". Como siempre, puedes cerrar la ventana de
Workspace de la derecha para tener ms sitio y maximizar la ventana del index.
Pon el cursor del ratn justo al final de la lnea de cdigo del ltimo prrafo (justo antes de
</body>), pulsa con el ratn una sola vez para colocar el cursor all y pulsa luego el Intro para crear una
nueva lnea. Como te dije anteriormente, conviene poner las cosas dentro de un prrafo, de modo que
creamos ese prrafo an vacio escribiendo sus etiquetas <p> </p>.
Ahora situa el cursor dentro de ese prrafo (colocndolo entre <p> y </p>) y en el Html-Kit tal y
como hicimos anteriormente pulsa en insertar una imagen:

28

(Fijate como en la lnea nmero 15 del cdigo html en la imagen de arriba, he escrito ya <p></p> y
he colocado el cursor entre esas dos etiquetas)
Y del mismo modo que la otra vez, ponemos algunos datos en la ventana que aparece:

Fjate como tras seleccionar el archivo buzn en la ventana derecha de arriba, podemos escribir el
"alt" del que hablamos pginas atras, Para poner las unidades en el ancho y alto de la imagen. Escribe
"px" detrs de cada cifra de auchura y altura despus de poner al "alt" y luego pulsa el Ok.
Automticamente aparece esa nueva lnea de cdigo Html en la ventana de nuestro index
<img alt="Pulsa
width="32px" />

para

escribirme

un

E-Mail!"

src="objetos/buzon.gif"

height="32px"

y si le das a "preview" podrs ver el buzn en cuestin. Vamos ahora a colocarle el enlace a nuestro EMail.

29

Enlace de E-Mail con Html-Kit:

Para insertar un enlace de E-Mail desde una imagen, tienes que seleccionar todo el cdigo html de la
imagen primero. Si te cuesta trabajo seleccionarlo, prueba colocando el cursor en el inicio y luego
haciendo clic pulsando a la vez la tecla "Shift" (es la flecha que apunta para arriba, esa que se pulsa
para escribir maysculas, justo encima del "Control") de tu teclado teniendo el cursor al final del cdigo
que quieres seleccionar. Lo que tienes que seleccionar es el que he puesto arriba, desde <img alt="......
hasta 23px" />. No selecciones la parte de <p> ni la de </p>.
Una vez seleccionado pulsa en la barra de herramientas del Html-Kit sobre Etiquetas > Crear Link...:

Se abre la ventana de los links y vemos como en la ventana de la parte inferior derecha aparece la
imagen seleccionada (aunque puede que no se vea). Ahora en la lista de opciones de la izquierda de esa
ventana, en la lnea que pone "href" escoge "mailto:", as:

30

y a continuacin de mailto: escribe tu direccin de correo.

Despus pulsa Ok.

Los estilos CSS para las imgenes con enlaces

Como vers si pulsas en "Overview" o vista previa, la imagen del buzn de correo aparece recuadrada
en azul. Esto es porque por defecto, los enlaces aparecen siempre subrayados con una lna azul, para
indicar que son enlaces. Cuando se hace un enlace desde una imagen en lugar de aparecer subrrayada
aparece recuadrada en azul.
Esto no queda demasiado bien, de modo que vamos a corregirlo.Vers qu rpido y fcil se hace esto
con la hoja de estilo y sin tocar para nada el index.
Cierra el index.html de tu Html-Kit y abre la hoja de estilos llamada "estilos.css". Vers como solo
tenemos aquella lnea que habiamos definido para el body. Vamos a incluir otra lnea ms con este
contenido:
img {border-style: none}
Esto indica que, todos los elementos de imagen (img) han de cumplir lo que hemos puesto entre
corchetes, es decir, que no tengan ningna tipo de borde.

Si guardamos la hoja de estilo y abrimos el index.html veremos como en el "Overview" o vista previa
ya no aparece ese recuadro. Tampoco saldr ya en ninguna de las imgenes de ninguna de nuestras
pginas.

Cmo centrar un prrafo de la pgina web

Vamos a aprender a centrar prrafos de un modo muy sencillo gracias como siempre a nuestra
grandiosa Hoja de Estilos.

Crear un estilo centrado

La propiedad en CSS que define la alineacin de un elemento es text-align y se le pueden dar los
valores left (pegado a la izquierda), right (pegado a la derecha), center (centrado), y justify
(justificado).
Si quisieramos que todos los prrafos aparecieran centrados, bastara con poner en la Hoja de Estilo
esta lnea:
p {text-align:center}
El problema de esto es que nos centra TODOS los prrafos y seguramente no queramos eso, sino
centrar solo unos pocos. En estos casos en los que queremos definir un estilo pero no queremos que se
aplique a todos los elementos, es necesario definir lo que se llaman Clases de Estilo.
Por ejemplo, podramos crear un nuevo tipo o clase de estilo que podemos llamar como queramos,
por ejemplo "centrado". Definimos en la Hoja de Estilo las propiedades que queremos que tenga y luego
en el Html de la pgina le indicamos a un prrafo concreto que ha de tomar ese estilo. Vamos a verlo
por partes.

Crear una clase de estilo

31

Abrimos la Hoja de Estilo y escribimos esta lnea:

.centrado {text-align:center}
Fjate que hemos puesto un punto seguido del nombre que nos ha dado la gana y a continuacin entre
los corchetes hemos dado la propiedad de centrado.
Es importante que sepas que al ponerle nombre a estos estilos creados por nosotros hemos de seguir
ciertas normas para evitar problemas:
- Siempre en minsculas.
- No poner acentos, simbolos raros ni espacios en blanco. Solo letras y nmeros.
- Nunca empezar el nombre con un nmero.
- Si necesitas separar el nombre en dos o ms palabras usa guiones medios "nombre-nombre", nunca
bajos "nombre_nombre".
Bien, una vez claras estas normas (recurdalas muy bien!) guarda la Hoja de Estilos y abrimos el
index.html para centrar algunos prrafos.

Centrar prrafos en el Html

Como recordars, todos los prrafos empiezan con la etiqueta <p>. Pues es dentro de esa etiqueta
donde tenemos que indicarle (si es que lo queremos as) la clase de estilo que queremos que tome.
Vamos por ejemplo a centrar el prrafo donde ponemos "Bienvenidos...". Para ello vamos a la vista
del cdigo html del index y modificamos esa etiqueta <p> dejndola as:
<p class="centrado"> Bienvenidos a mi pgina web. Muy pronto estar lista!</p>
Si ahora haces vista previa o "Overview" desde el Html-Kit, vers como este prrafo aparece ahora
centrado.
A partir de ahora, cada vez que quieras centrar un elemento solo tienes que ponerle class="centrado"
dentro de la etiqueta de inicio en su cdigo Html.
Que te quede claro: Se define en la Hoja de Estilo poniendo un punto, ms el nombre, y se indica en
el html con class="nombre" (aqu sin el punto).

Cmo va nuestra pgina web por el momento?

Por si te has perdido o por si has estado experimentando por tu cuenta y te has cargao el cdigo Html
de la web de ejemplo, te dejo aqu lo conseguido hasta el momento. Recuerda que puedes hacer
experimentos creando otro sitio local, creando otra carpeta dentro de la carpeta "mis-paginas-web" que
hemos creado en tu escritorio y repitiendo los primeros pasos de estas lecciones. Pero la web del
ejemplo es mejor que no la toques mucho pues te podras perder cuando la usamos en las lecciones
siguientesLa maravillosa Hoja de Estilo queda as:
body

{ background-color: #E6E6FA ;
background-image: url(objetos/fondo.png) ;
background-repeat: no-repeat ;
background-position: center center }

img

{ border-style: none }

.centrado { text-align:center }

Y el cdigo Html del index.html de ejemplo as:

32

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<html>
<head>
<title>Pagina Principal del Ejemplo CCTW</title>
<link rel="stylesheet" href="estilos.css" type="text/css" media="all">
</head>
<body>
<p class="centrado">Bienvenidos a mi pgina w eb. Muy pronto estar lista!</p>
<p><img alt="Bienvenido al ejemplo de CCTW" src="objetos/sonrisa.gif"
height="60" w idth="60" /></p>
<p>Pgina creada gracias a <a href="http://w w w .comocreartuw eb.com"
target="_blank">CCTW</a></p>
<p><a href="mailto:nombre@w anadoo.es"><img alt="Pulsa para escribirme un EMail!" src="objetos/buzon.gif" height="32px" w idth="32px" /></a></p>
</body>
</html>

SEGUNDA LECCION
Comenzando a crear la plantilla de nuestra pgina Web
Ahora lo que vamos a hacer es comenzar creando la plantilla, que nos valdr para generar a partir de
ella el resto de pginas de nuestra web.

Crear el archivo plantilla.html

Recordando los pasos dados antes para crear el index.html vamos a crear ahora el archivo de la
plantilla. Te doy pistas por si no te acuerdas.

Abrimos el Html-Kit.

Hacemos visible la ventana Workspace.

Ponemos el ratn sobre el sitio "web-ejemplo-cctw-local" y pulsamos sobre l con el

botn derecho del ratn.
Escogemos New > Create File...

33

Escogemos crear "Blank Html Page" desde la pestaa "General" y pulsamos Ok.

Le ponemos de nombre plantilla.html y pulsamos Ok de nuevo.

Ahora la abrimos haciendo doble clic en su nombre, en la ventana Workspace para empezar a trabajar
sobre ella.

Creando la Hoja de Estilo para el resto de pginas de la web

Hacemos lo mismo para crear una Hoja de Estilo distinta a la anterior. Mienstras que la anterior
(estilos.css) la vamos a usar solo para el index, esta segunda Hoja de Estilo que llamaremos estilogeneral.css se usar para todas las dems pginas de la web.

Relacionando estilo-general.css con plantilla.html

Ahora te toca relacionar esta segunda Hoja de Estilos con la plantilla.html recin creada.
Como tanto plantilla.html como estilo-general.css estn en la misma carpeta, es suficiente con escribir
esto:

34

<link rel=stylesheet href=estilo-general.css type=text/css media=all>

Una vez creados estos dos archivos y relacionados entre s, pasamos a meterles mano.

La estructuracin con Capas o Divs?

El darle forma a una web se le suele llamar estructurarla, o enmaquetarla. Es darle una estructura
concreta para colocar luego el men aqu, el contenido all, etc. Para estructurar una web podemos
usar simples saltos de lnea, o avanzar un poco ms y usar tablas, que dividen el espacio en celdas,
celdas en las que podemos colocar ms comodamente los elementos que queramos. Tambin se puede
estructurar una web partindola en frames o marcos.
Pero el mtodo ms profesional, lmpio y cmodo es sin duda el uso de Capas o Divs (es lo mismo
decir capa que div).

Qu es una Capa o un DIV?

No es ms que un elemento rectangular dentro del cual podemos incluir lo que queramos, palabras,
prrafos, enlaces, imgenes, varias de estas cosas a la vez o incluso otras capas o tambin tablas. Es un
simple hueco. Lo bueno que tiene es que luego, desde la Hoja de Estilos, podemos darle a todo su
contenido propiedades como color de fondo, tamao de letra, dimensiones de ese recuadro, margenes,
bordes, etc.
Esto de abajo es el cdigo Html de un Div sencillo.
<div>Bienvenidos a mi Web</div>
Como puedes ver, igual que ocurra con los elementos que vimos atrs, empieza con una etiqueta y
termina con otra de cierre, igual pero con la contrabarra delante. Entre ambas etiquetas se coloca su
contenido.
Escribe esa lnea de cdigo en el archivo plantilla.html, por supuesto, entre <body> y </body> pues
se trata de algo que debe "verse". Ahora haz vista previa "Preview" y observa qu aparece.

Dando estilos a un Div

Ese Div no tiene ningn atractivo. Para adornarlo lo que hacemos es definir un tipo de estilo en la
Hoja de Estilos y aplicarselo a ese DIV.
Abre el archivo estilo-general.css que se abrir vacio, pon esto dentro y luego gurdalo:
#cabecera {background-color: pink }
Nota: Cada vez que hagas un cambio en la Hoja de Estilos, tienes que guardarla para poder ver sus
efectos en la vista previa de la pgina web.

Clases de Estilo y Estilos nicos

Existen dos formas de definir estilos. Una es crear una clase de estilo, que es un tipo de estilo que
podemos asignar luego a uno o a varios elementos. Por otro lado estn los estilos nicos, que solo se
deben aplicar a un elemento por pgina web.
Las clases de estilo, que se pueden usar sobre varios elementos (varios prrafos, varias celdas,
enlaces, etc) se definen en la Hoja de Estilo como vimos al crear la clase de estilo ".centrado", es decir,
con un punto delante del nombre y luego colocando las propiedades entre los corchetes. Luego, en el
cdigo Html se asigna esa clase de estilo a un elemento colocando dentro de su etiqueta de inicio esto,
class="nombredelaclasedeestilo".
En cambio los estilos nicos se definen en la Hoja de Estilo con una almohadilla como esta "#" (se
escribe pulsando a la vez la tecla Alt Gr, que est a la derecha del espacio y la tecla del nmero 3 de tu
teclado) en lugar de con un punto, y en el cdigo Html se asigna este tipo de estilo nico escribiendo
dentro de la etiqueta del elemento esto otro id="nombredelestilounico" en lugar de con el class, que
es para clases (estilos que se pueden asignar a varios elementos).
Como puedes ver, el estilo de antes #cabecera {background-color: pink } es un Estilo nico y por lo
tanto se asigna este tipo a un solo elemento, y se hace en el Html as:
<div id="cabecera">Bienvenidos a mi Web</div>
Abre ahora el archivo plantilla.html y pon esa lnea de cdigo. Ha de quedar as:

35

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<html>
<head>
<title>Page title</title>
<link rel="stylesheet" href="estilo-general.css" type="text/css" media="all">
</head>
<body>
<div id="cabecera">Bienvenidos a mi Web</div>
</body>
</html>

Si has guardado antes la Hoja de Estilo y haces vista previa en la plantilla, vers como ahora la frase
"Bienvenido a mi Web" aparece diferente. Con un fondo rosa (pink).

Ms capas, ms capas
Ya tenemos nuestra primera capa llamada cabecera. Al final de estas lecciones esta capa contendr
la cabecera, que segurametne conste del logotipo de la web y de un hueco para, por ejemplo, algo de
publicidad para sufragar los gastos de un posible dominio propio y quin sabe, de un hosting de pago.
Vamos a crear una segunda capa que contendr una barra de navegacin. La llamaremos, navegacion
(sin acentos, y todo en minsculas).

Qu es una barra de navegacin?

Una de las cosas ms importantes en una pgina web es el dar facilidades al visitante para que pueda
navegar por nuestras pginas sin perderse y que lo tenga todo siempre a mano. No es bueno tener
pginas escondidas, es decir, pginas a las que para acceder haya que ir primero a la seccin tal, luego a
la subseccin cual, luego entrar en otro lado y finalmente conseguir acceder a una pgina en concreto.
Todas las pginas deberan ser accesibles sin ms que pulsar un par de enlaces desde el index o pgina
principal.
La barra de navegacin nos ayuda a esto. En esta barra que aparecer en todas las pginas de la web
pondremos enlaces a las secciones que tratemos. As, en cualquier momento el visitante puede ir de un
lado a otro sin perderse.
Esto es son varios ejemplos de barras de navegacin:

Como ves, dan acceso a varias secciones y pueden ser muy sencillas o ms complicadas o llamativas
con lengetas y todo eso. Pues ahora que sabes lo que son, vamos a crear la capa de nuestra barra de
navegacin.

Creando la capa navegacion

La llamaremos "navegacion" y solo va a existir una por pgina, luego se trata de un estilo nico y se
define por tanto as en la Hoja de estilo:

36

#navegacion {background-color: gray }

Escribimos eso en la Hoja de Estilo. Despus abrimos la plantilla.html y escribimos, a continuacin
del div cabecera, esta otra lnea:
<div id="navegacion">Barra de Navegacin</div>
Como puedes ver, en la Hoja de Estilo le hemos dado a navegacion la propiedad de color de fondo gris
(gray).

Creando las capas contenido y pie

Ya que estamos, vamos a crear dos capas ms. La primera se llamar contenido y en ella pondremos
luego un men lateral y los textos de nuestra web, la parte principal. Tambin vamos a crear otra capa
para la parte ms baja de la web que llamaremos pie en la que ms tarde tendremos algunos enlaces,
un mensaje de copyright y puede que otro espacio para publicidad, ya veremos.
Siguiendo las mismas instrucciones que antes, definimos estas otras dos capas en la Hoja de Estilo:
#contenido {background-color: orange}
#pie {background-color: brown}
Y tras guardas la Hoja de Estilo, abrimos la plantilla.html y ponemos estas otras dos lneas despus de
la de la capa navegacion:
<div id="contenido">Esta ser la zona principal de la web</div>
<div id="pie">Este es el pi de pgina</div>

Y el resultado es...
Tras guardar todo, en la Hoja de Estilo tendrs esto:
#cabecera {background-color: pink }
#navegacion {background-color: gray }
#contenido {background-color: orange }
#pie
{background-color: brow n }

En la plantilla.html esto otro:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>Page title</title>
<link rel="stylesheet" href="estilo-general.css" type="text/css" media="all">
</head>
<body>
<div id="cabecera">Bienvenidos a mi Web</div>
<div id="navegacion">Barra de Navegacin</div>
<div id="contenido">Esta ser la zona principal de la w eb</div>
<div id="pie">Este es el pi de pgina</div>
</body>
</html>

Resoluciones de pantalla y pginas web

37

Existen varias formas de darle un tamao a una pgina web. Por ejemplo, podemos hacer que ocupe
toda la pantalla del navegador del usuario, sea como sea esta de grande, la tenga o no maximizada (la
ventana...), o tambin podemos darle un ancho concreto, de modo que los que tengan un monitor
pequeo la vern muy grande y los que la tengan ms grande (la pantalla...) la vern ms chica...
Ambos casos tienen su parte buena y su parte mala. En el primer caso, si le decimos que ocupe toda
la pantalla del navegador es muy posible que la web se desmorone cuando el usuario cambie el tamao
de esa ventana. Los elementos grandes no caben y desplazan el contenido siguiente hacia abajo,
produciendo un caos en la web. Lo bueno es que se aprovecharia todo el espacio, cuando lo hay, claro.
El otro caso es darle un ancho fijo a la pgina web (por ejemplo 20 cm, o 800 pixeles). As el usuario
podr hacer lo que quiera con la ventana de su navegador que la web seguir manteniendo su forma y
no se deformar en absoluto. Eso es lo bueno, lo malo es que si no acertamos en qu anchura darle,
pasar que unos la vern muy grande y la vern tan pequea que tendrs ms margenes a los lados que
espacio para la web....

Qu opcin tomamos entonces?

Lo mejor es tomar la segunda opcin, dar un ancho fijo a la web, pero estudiando muy bien cul ser
esa anchura. Lo mejor es darle un ancho que sea cmodo para la resolucin ms usada por todo nuestro
pblico. As, si unos pocos usan una resolucin de pantalla un poco mayor no vern unos mrgenes
exagerados y los que usen resoluciones un poco menores al ancho que le demos, no tendrn que usar
demasiado la barra de desplazamiento y adems, sern la minora.
Parece ser que hoy por hoy la anchura ptima para una pgina web es de 800 pixeles. De hecho, si
miras las webs que sueles visitar vers que es as y que quedan muy bien con cualquier resolucin. As
que... vamos a darle a la web del ejemplo esa anchura y adems vamos a hacer que aparezca centrada
en la ventana del navegador.

Un Div para dominarlos a todosss

Excto. Como queremos centrarlo todo, lo que haremos ser encerrar toda la parte visible de la web
en un div al que le definiremos en la Hoja de Estilo la propiedad de centrado, pero de un modo algo
especial para que funcione en todos los navegadores. Llamaremos a esa capa.... " global". Como va a ser
nica, es decir, solo va a haber un elemento "global" por pgina, en lugar de definirlo con un punto
delante y el class="global" en el Html, lo haremos con la almohadilla y con id="global".
Para encerrar todo lo visible, ponemos la etiqueta de inicio justo despus de <body> y la de cierre
justo antes de </body>. El cdigo Html queda as:

Ves como encierra a los otros divs? Ahora, en la hoja de estilo definimos #global con las siguientes
propiedades:
#global {width:800px ; margin: 4px auto }
Esto significa que la capa global tendr un ancho de 800 pixeles y aparece una propiedad que no
hemos visto antes, (margin: 4px auto) que define el margen a dejar entre el elemento (en este caso el
div global) y el resto de cosas a su alrededor. El 4px es la cantidad de margen que vamos a dejar por
encima y por debajo de la web, mientras que auto es la cantidad de margen que dejaremos por cada
lado. Auto significa automtico, por lo que se dejar todo lo que exceda de 800px y automticamente,
es decir, la mitad a la derecha y la otra mitad a la izquierda y por tanto, centrado.
Esto no funciona en todos los navegadores a menos que definamos una caracteristica a Body en la
Hoja de Estilo estilo-general.css. Abrela si la cerraste y escribe al principio del todo esta nueva lnea de
css:
body {text-align: center}
Body no es un nombre de un estilo inventado por nosotros, como cabecera, pie, tal y cual, sino que
es una etiqueta de Html, y a las etiquetas de Html (como body, p, a, table, div, etc..) no se les pone ni
el punto delante ni la almohadilla (#). Lo que estamos haciendo al ponerle propiedades a una etiqueta
es cambiar las propiedades que tiene por defecto. Con esto ya queda toda la web centrada en toooodos
los navegadores. Si guardas ahora la Hoja de Estilo y haces vista previa de la plantilla.html vers como
todo aparece centrado y con un ancho fijo de 800px. Ahora no ser fcil descuadrar tu web.

El men de nuestra pgina web

38

Presta mucha atencin en esta leccin, pero merece la pena para crear el men lateral y empezar a
entender como se usan estas capas o divs.
Ahora queremos crear un men lateral parecido al de esta misma web, el de la izquierda de estas
lneas. Te gusta? Pues a ti te puede quedar mucho mejor si tienes un poco de gusto y ganas de
experimentar. Como un men es ms o menos una zona rectangular, vamos a crear una capa para meter
en ella este men. Como queremos que salga dentro de la parte central de la pgina, dentro de la zona
de los textos, meteremos o crearemos este div que vamos a llamar menu dentro del div contenido. Esto
es lo que se llama anidar capas.
Empezamos creando la capa. Abre en el Html-Kit la plantilla.html y escribe la siguiente lnea justo
despus de la etiqueta de inicio de la capa contenidos y antes del texto de dentro suya, de forma que
quede el cdigo Html as:

Como vers, despus del cdigo Html de la capa menu, van los textos de la capa contenido y
despus, en la siguiente lnea vemos la etiqueta de cierre del div contenidos.
Ahora tienes que definir el estilo de la capa menu en la Hoja de Estilos. Abre estilo-general.css y
escribe esta lnea para el div menu:
#menu {background-color: yellow; width: 150px ; float:left }
Como solo hay un men por pgina, lo definimos como estilo nico, con la almohadilla ( #). Le
ponemos un color diferente al resto para distinguir donde empieza y donde termina la capa menu y
colocamos dos propiedades ms.
La primera es width:150px con la que le damos una anchura fija de 150 pixeles. Quizs sea poco,
pero por ahora lo dejamos as hasta que veamos si nos va a faltar anchura en esa capa. La segunda
nueva caraterstica que vemos es nueva, la propiedad Float.

Para que sirve la propiedad Float?

La propiedad Float hace que el elemento flote sobre el resto de la web. Esto vale para cambiarlo de
posicin ms fcilmente. A la propiedad float se le suele poner uno de estos dos valores: left (que flote
a la izquierda) o right (lo manda a la derecha). Como nosotros queremos tenerlo a la izquierda, le
pondremos la propiedad float:left y esto lo manda pegarse al borde izquierdo de la capa en la que est,
es decir, a la izquierda de la capa contenido.

Y el resultado final.... por ahora...

La Hoja de Estilos queda por tanto as (puedes ver como voy ordenando los estilos definidos por orden
de aparicin en la pgina, de arriba a abajo):

Guarda la Hoja de Estilos y mira como est quedando la plantilla haciendo vista previa. Ya estn
todas las capas creadas as que ahora vamos a rellenarlas y a darles una mejor presencia.

Rellenando el men de nuestra pgina web

Vamos a insertarle algunos enlaces (ficticios, pues an no tenemos pginas que enlazar) y as de paso
vemos como se estructura correctamente.

Si es un listado, usa listas

Puedes imaginar el men como una serie de enlaces uno debajo de otro. Se podra pensar en colocar
un div para cada uno de ellos, es decir, incluir tantos divs pequeos dentro de la capa menu como
enlaces vayamos a poner, pero parece demasiada capa. En realidad un men no es ms que una lista y,
lo mejor para poner una lista es usar el elemento lista.

Como se hace una lista

Las listas se definen en Html con dos etiquetas, la primera indica el principio de la lista y es <ul>
mientras que la otra define el inicio de un elemento de la lista, que es <li>. Te lo puedes apuntar, yo
siempre me liaba y terminaba poniendo lu y il.

39

Por supuesto, cuando termina la lista se coloca su etiqueta de cierre que ser </ul> y cuando termina
un elemento de la lista (un enlace en este caso) se coloca </li>, de forma que el cdigo Html de una
lista completa sera este mismo:

y se vera haciendo vista previa de este modo:

Para nuestro ejemplo, seguramente nos moleste el dichoso puntito negro a la izquierda de cada
elemento de lista, pero eso lo podemos arreglar. Tenemos que poner una cosilla en la Hoja de Estilos.
Pero antes vamos a ver qu cul es el cdigo que tendramos que colocar dentro del div del men.
Para empezar, abre tu Html-Kit y escribe el cdigo de arriba dentro del div menu, eliminando claro la
palabra "men" que habia ya colocada.
Ha de quedar de este modo:

Si haces vista previa vers cosas un poco raras, como que el men se descuelga un poco por debajo
de la web, pero eso lo arreglamos en las siguientes pginas.

Enlaces para el men de nuestra pgina web

Como recordars los enlaces tenian esta forma:
<a href="ruta/archivo.html">Texto del Enlace</a>
as que vamos a poner ese cdigo dentro de cada elemento li de la lista del men. Si ponemos una
ruta falsa nos dar algn problema, asi que en lugar de poner nada en la ruta le vamos a colocar una
almohadilla (#) que sirve para que haga el efecto de enlace pero sin enviarnos a ningn lado por ahora.
Cuando tengamos ms pginas en la web pondremos las rutas de aquellas pginas que queremos enlazar
desde el men.
<a href="#">Enlace 1</a>
Como no vamos a querer que se abran esos enlaces en pginas distintas sino en la misma, no es
necesario ponerle el target al cdigo del enlace (el target="_blank" se pone para que el enlace se abra
en una pgina distinta).
Abre tu Html-Kit, abre la plantilla.html y coloca un enlace en cada uno de los tres elementos de lista
que tenemos. Para diferenciarlos, puedes escribir Enlace 1, Enlace 2 y Enlace 3.
As que el cdigo del men completo se tiene que quedar as:

Eso es todo lo que tenemos que hacer en la plantilla.html porque lo dems, el "aspecto" se lo
daremos con la Hoja de Estilo ahora mimo.

40

Dar estilos Css a la lista del men

Vamos a empezar a arreglar cosas en la Hoja de Estilos para dar mejor aspecto a este men.

Reparando el fallo del men.

Si ya hiciste vista previa de la plantilla, habrs visto que al poner varios enlaces dentro ha crecido y
se sale por debajo de la pgina web. Vamos a reparar esto desde la Hoja de Estilo. Abre tu Html-Kit y
abre estilo-general.css
Colocando un width: 800px y un float:left a la capa contenido. No me preguntes mucho porqu, pero
es la nica combinacin que logra que en todos los navegadores se corrija ese fallo. Realmente le
estamos indicando a la capa contenido que ha de tener un ancho de 800 pixeles, igual que el ancho de
la pgina. En realidad parece que ocupara menos, pero ten en cuenta que el men est dentro de l,
luego lo amarillo del men es parte de la capa contenido. Ves ahora como s ha de tener 800px de
ancho? El colocarle el float:left evita que en algn navegador se descuadre todo. No se explicarte
porqu ahora mismo, y vers como a veces, a pesar de que cumplas todas las buenas prcticas que se
pueden leer por la red, hay que hacer alguna "pirula" para que se vea correctamente la pgina web con
cualquier navegador. Es todo un reto, pero por ahora lo estamos consiguiendo.
Abre la Hoja de Estilo, dejas la lnea del estilo contenido de este modo:
#contenido {background-color: orange ; width: 800px ; float:left}
y luego guardas la Hoja de Estilo y haces vista previa de la plantilla.html para que veas como ahora
todo se ha solucionado.

Eliminando los puntos de la lista

Podemos modificar las propiedades del elemento li en la Hoja de Estilos, pero el problema que
podemos tener es que si lo hacemos as, todas las listas que tengamos en la web dejarn de tener ese
puntom y es ms, tomarn todas las propiedades que le digamos ahora. Por eso, mejor que modificar las
propiedades del elemento li, lo que haremos ser crear un estilo nuevo de li, que usaremos solo en el
men. De este modo todas las listas que pudiramos poner en las otras partes de la web seran
normales.
As que definiremos en la Hoja de Estilo propiedades para todos los li que cumplan la condicin de
estar dentro de la capa men.
#menu li { propiedades.. }
Cuando se ponde la capa antes de un tipo de estilo, se est indicando que esas propiedades solo han
de respetarse cuando el elemento (en este caso el li) est dentro de la capa escrita antes.
Las propiedades que le vamos a dar son las siguientes:
#menu li { list-style:none }
Esto hace que no tenga ningn (none) tipo de estilo. Si guardas la Hoja de Estilo (estilo-general.css) y
haces vista previa de la plantilla vers que ya no aparece. En la pgina siguiente seguimos arreglando el
men.

Formatear los estilos a cero

Si tuvieras varios navegadores diferentes, como el Internet Exporer, el Opera, el Firefox, etc, te
darias cuenta que en cada uno de ellos el men (y algunas otras cosas) se ve ligeramente distinto. En
unos los enlaces aparecen en el centro, en otros un poco a la derecha, o un poco ms a la izquierda en
otros.. Esto es porque mientras no se indique lo contrario, unos navegadores deciden dejar un margen
de unos pocos pixeles para cada elemento, mientras otros navegadores deciden que no, que hay que
dejar un poco ms o un poco menos... Al final lo que ocurre es que parece imposible ver una pgina web
exctamente igual con todos los navegadores.
Todos los problemas de este tipo no los vamos a poder arreglar de golpe, pero uno bien importante s.
Como cada uno toma por defecto un valor inicial para los margenes y bordes, lo que haremos ser
indicar nosotros en la Hoja de Estilos que TODOS los elementos van a tener un valor cero para los bordes
y margenes. Luego, si deseamos cambiar alguno, lo definiremos en la Hoja de Estilos, pero por el
momento lo ponemos todo a cero, o lo que es igual, vamos a formatear los estilos!
Para indicar que ha de aplicarse a todos, ponemos un asterisco. Para indicar que tengan margen,
padding (padding es otro tipo de margen que ya explicar) y borde cero basta con colocar en la primera
lnea de todas, esta:
* {margin:0px ; padding:0px ; border: 0px}
Si escribes esta lnea en estilo-general.css, la guardas y haces vista previa de la plantilla vers como
ahora el men aparece centrado, sin margenes. Tambin han desaparecido otros margenes que
rodeaban la capa global, etc. No olvides colocar esa lnea la primera de todas, no se te ocurra ponerla
la cuarta, la quinta, etc, debe ser la primera de todas, arriba del todo en estilo-general.css. De lo
contrario, como el navegador va leyendo los estilos de arriba a abajo, si la lee de las ltimas anulars
los margenes y bordes de las capas definidas antes de esa lnea.

Enlaces del men hacia la izquierda

41

Has visto que todos los elementos de la web de ejemplo salen centrados. Esto es porque pusimos
text-align:center en la etiqueta body, y como el body contiene toda la web, entonces todos los
elementos de la web estarn centrados, a no ser que le indiquemos otra cosa a cada estilo concreto.
Por ejemplo, los enlaces del men quedan mucho mejor si aparecen alineados a la izquierda. Pues
vamos a arreglar eso. Abre tu Html-Kit, la Hoja de Estilo y, escribe text-align:left dentro de las
propiedades de la capa menu, tal que quede as:
#menu {background-color: yellow ; width: 150px ; float:left ; text-align:left }
La verdad, tambin se hubiera podido poner el text-align:center en el estilo #menu li. De la forma
anterior se aplica a todos los elementos de la lista, mientras que definiendolo en #menu li solo se
aplicara a los elementos encerrados entre <li> y </li>. Lo dejamos definido en el #menu por ahora.
Ahora los enlaces aparecen bien, a la izquierda, pero un poco demasiado pegados a la izquierda.

Arreglando los mrgenes del men

Se pueden definir de estas formas:
margin: 10px
Esto indica que se ha de dejar 10 pixeles tanto por arriba como por abajo y por ambos lados.
margin: 10px 20px
Este otro modo, con dos cantidades, indica que se ha de dejar 10 pixeles por arriba y abajo y 20
pixeles por la derecha e izquierda. Es decir, la primera cifra indica el margen de arriba y abajo y la otra
la de los lados.
margin: 10px 20px 5px 15px
Y este otro modo, define por orden los margenes a dejar por arriba, por la derecha, por abajo y por
la izquierda respectivamente. O para acordarnos, la primera cifra es la de arriba y las dems van en
sentido de las agujas del reloj (arriba, derecha , abajo e izquierda).
Nosotros, para el caso de los margenes del men vamos a escoger la ltima forma, con las cuatro
cifras, y ver como va quedando. Empezamos como siempre, abrir tu Html-Kit, abrir la Hoja de Estilos y
escribir dentro de los corchetes de la capa #menu li lo siguiente:
#menu li {list-style:none ; margin: 0px 0px 0px 0px}
Lo he puesto todos a cero (en realidad ya estaban todos a cero pues hicimos el formateo con el
asterisco hace muy poco) y vamos probando con distintos valores para ver como va quedando.
Lo que ms me interesa es dejar un poquito de margen hacia la izquierda para separar los enlaces del
borde, y tambin un poco de margen por encima y por debajo para que no se vean muy apiados. En
cambio el margen derecho me interesa ms que siga a cero, pues as tengo ms hueco para colocar el
texto de cada enlace. Lo vamos a dejar as:
#menu li {list-style:none ; margin: 4px 0px 4px 6px}

Aplicando estilos css a los enlaces del men

Vamos a ver cmo eliminar el subrayado de los enlaces y cmo resaltar los enlaces del men cuando
pasas el ratn por encima.

Cmo se definen las propiedades de los enlaces

Los enlaces se escriben con la etiqueta <a> y por tanto est claro que para modificar sus propiedades
basta con escribir una "a" en la Hoja de Estilos y modificar cosas entre los corchetes. Las caractersticas
que definamos as para los enlaces se aplicarn a todos ellos sea cual sea su estado.
Se distinguen cuatro estados posibles para los enlaces, que son los siguientes:
- link: Es el estado normal que tiene un enlace cuando no est en ninguno de los otros tres estados.
- Visited: Imagino que te habrs fijado que en algunas webs se colorean de otro color los enlaces que
ya has visitado antes. Pues "visited" es el estado del enlace cuando ste ya ha sido visitado por el
usuario anteriormente.
- Hover: Es el estado del enlace cuando el cursor del ratn est justo encima de l, pero sin apretar
el botn an. Tambin lo has debido ver, pasas el ratn sobre un men y se van coloreando o poniendo
en negrita los enlaces que sealas.
- Active: Es el estado de un enlace o vnculo cuando est siendo presionado por el ratn y mientras
no se suelta el dedo.
Si en la Hoja de Estilo solo indicas la "a" de enlace seguido de los corchetes con sus propiedades,
entonces esas propiedades afectarn a los enlaces sean cuales sean sus estados. Se hara as (en la Hoja
de Estilos):
a {color: blue; font-size:1.3em ; text-decoration: none}
En este ejemplo de arriba le hemos indicado que TODOS los enlaces, sean cuales sean sus estados,
han de ser azules (color:blue), han de tener un tamao de letra de 1,3 veces lo que correspondera
normalmente (font-size:1,3em) y finalmente que no deben tener ningn tipo de decoracin, esto es, el
subrayado (text-decoration: none). Por defecto siempre salen subrayados, que se define con textdecoration: underline

42

Si no quieres destacar los enlaces segn los estados que te he explicado antes, basta con definirlos en
esa nica lnea, no obstante si quieres darle algn toque diferente en funcin de alguno de esos estados,
se vuelve obligatorio definir los cuatro estados y adems en ese mismo orden que te he puesto.

Sin subrayar y marrones, excepto cuando se lococa el cursor encima que

pasan a rojos y subrayados
Con estos estilos los enlaces nunca aparecen subrayados hasta que se coloca el cursor del ratn sobre
ellos. Esto es bueno, para destacar al usuario que son enlaces. Adems pasan de color marrn ( brown) a
color rojo (red) cuando se pasa el ratn sobre ellos. Fjate como defino todos los estados aunque deje
vacios algunos estados. Siempre hay que ponerlos todos y en ese orden adems.

Estas lneas de cdigo puedes escribirlas ya en la Hoja de Estilos estilo-general.css Depus gurdala y
mira los cambios con la vista precia en plantilla.html

Aplicando ms estilos css a los enlaces del men

Lo primero ser tratar estos enlaces como bloques, lo segundo ponerles un color de fondo.

Tratar elementos como bloques

Si te fijas en la vista previa de la plantilla.html vers que es necesario poner el cursor justo encima
de las palabras del enlace (se suele llamar Anchor Text a los textos de los enlaces) para que estos
funcionen.
Aade esta ltima propiedad dejando el estilo de enlaces de la Hoja de Estilos estilo-general.css as:
a {color: brown ; text-decoration:none ; display: block }
Ocurren dos cosas ahora. La primera es buena, es el efecto que te acabo de comentar, que situando
el cursor en la misma lnea del enlace pero lejos del texto, tambin se activa el enlace. La segunda es
mala, y es que se nos han separado demasiado los enlaces verticalmente.
Es un defecto de algunos navegadores, como el Internet Explorer, pero esto lo arreglamos rpido. Pon
el cdgo Html de todos los elementos de la lista uno seguido del otro, en lugar de uno en cada lnea de
cdigo en la vista Html y vers como se arregla. En adelante, ya sabes que los elementos de las listas,
los <li> hay que ponerlos todos seguidos, en la misma lnea que los <ul> y </ul>. Con eso se solventa el
tema.
Antes estaban as:

Y hay que ponerlos as:

Aplicando un fondo a los enlaces activos

En realidad es a los enlaces en estado Hover. Vamos a hacer que al poner el cursor sobre un enlace
del men, este aparezca sombreado, con un fondo de color gris. Se hace retocando el cdigo de los
enlaces de antes, pero solo la lnea del hover, dejndola as:
a:hover {color:red ; text-decoration:underline ; background-color: silver}
La propiedad background-color , la vimos al principio del curso para poner fondo a la pgina index.
Silver significa plata en ingls, es un color gris clarito. El resto de lneas del cdigo no se tocan. Si
guardas y haces vista previa a la plantilla.html vers los efectos logrados con todo esto.

43

Rellenando la Zona Principal

Veamos realmente como funciona esta estructura que hemos hecho. Vamos a insertar ms texto en la
parte principal de la pgina web para ver como se comporta el men lateral en el caso de que haya
mucho ms texto en la parte derecha. Abre el Html-Kit y abre tu plantilla.html

Elementos que no son nada ?

Ya sabemos que gracias a la Hoja de Estilos, podemos cambiar el tamao de la letra de toda la web,
podemos varias los aspectos de los enlaces, los fondos de ciertos elementos, etc. Pero para eso, todas
las partes del contenido de la pgina web deben "ser algo". Si son enlaces modificaremos la etiqueta "a",
si son prrafos la etiqueta "p", pero, qu etiqueta hemos de modificar para cambiar las propiedades del
texto de la parte principal de nuestra plantilla? Aquella en la que pone "Esta ser la zona principal de la
web"?
Va a ser dificil, pues no est encerrada entre ningna etiqueta concreta, luego ni es un prrafo, ni un
enlace. Nosotros pretendemos que sea un prrafo. Pues vamos a indicrselo poniendole a esa frase la
etiqueta <p> al incio y la etiqueta </p> de cierre al final. Ha de quedar as:

Ms contenidos
Tras esta aclaracin, vamos a incluir un par de prrafos ms a continuacin de ese. Ya sabes, has de
poner <p> y </p> al principio y al final de cada uno para que el navegador sepa donde empiezan y
terminan. Escribe un par de prrafos que tengan bastante texto, al menos lo suficiente como para
sobrepasar lo que ocupa el men de la izquierda.
Si escribes lo suficiente en cantidad, conseguirs ver este aspecto en tu plantilla.html

Justificar los prrafos de la pgina web

Los prrafos se ven centrados y eso parece una poesia ms que una web. Eso es por que le pusimos
align:center a body en la Hoja de Estilo.
Abre tu Hoja de Estilo e incluye esta nueva lnea, por ejemplo, al final de su contenido:
p {text-align: justify}
Con esto los textos quedan justificados. Esto significa que se reparten para que empiecen justo en la
parte izquierda y terminen todas las lneas justo en el margen derecho. A mi me gusta as, pero si lo
prefieres, en tus pginas puedes definirlo como text-align: left o text-align:right o text-align:center,
como quieras. En el ejemplo lo dejamos con Justify.

Los margenes de los prrafos de la pgina web

Tienes dos opciones, una es definirle el margen concreto a cada uno de los prrafos de todas tus
pginas web, o algo un poco ms sencillo, poner un par de palabras en la Hoja de Estilo.
Abre la Hoja de Estilos de la plantilla.html (estilo-general.css) y vamos a reparar esos margenes.
Como los textos que vemos sin margen pertenecen a la capa de fondo naranja (orange) y en la Hoja de
Estilos solo pone "orange" en la capa "#contenido", ya sabemos a qu capa incluirle la propiedad
padding (el padding es parecido al margin, ya veremos la diferencia). Por eso le pusimos esos colores tan
feos, para encontrar cada capa rpidamente. Pero solo queremos por ahora poner margen a sus
prrafos, es decir, queremos margenes para los prrafos de dentro de la capa #contenido, esto se pone
as:
#contenido p {padding: 5px 10px 5px 10px}
Resumiendo, escribimos primero la capa y luego el elemento de dentro de esa capa al que queremos
definir cosas y luego, entre parntesis, las propiedades. Le hemos puesto 10px en los dos lados y solo 5
por arriba y abajo, para ver como queda e ir variando cada uno hasta que quede a nuestro gusto si fuera
necesario.
Escribe esa lnea justo despus de la definicin en la Hoja de Estilo de la capa #contenido. Guarda la
Hoja de Estilo, haz vista previa de la plantilla.html y vemos los resultados por si queremos variar alguna
de esas dimensiones.

44

(Margen entre men lateral y textos principales)

Los margenes no estn mal del todo, pero vemos que los dos primeros prrafos no parece que hayan
tomado el margen izquierdo para separarse del men principal. Esto es por que se cuenta el margen
desde la parte izquierda de la capa #contenido, mientras que en esos dos prrafos debera contarse
desde la derecha del men. Vamos a ver como solucionamos esto.
Para eso tendramos que poner un margen por la derecha para el men, y como pertenece a la capa
#menu tocara retocar esa lnea en estilo-general.css aadindole esto ltimo que he subrayado:
#menu {background-color: yellow ; width: 150px ; float:left ; text-align:left ; margin-right:
10px }

La indentacin de los prrafos

Imagino que proviene de la propiedad "text-indent" que se aplica para establecer un margen a la
izquierda solamente de la primera lnea de cada prrafo, de modo que sta queda ms metida a la
derecha que las dems lneas.
Se aplica colocando "text-indent: XXpx" entre los corchetes del elemento al que se lo queremos
aplicar.
Vamos a aplicarlo a todos los prrafos de la parte principal, que eso queda muy bien. Un indentado
de 15px creo que es suficiente. Como va a ser una propiedad para los prrafos (p) de dentro de la capa
#contenido, incluimos el text-indent en esta lnea (lo subrayo para que lo veas claro):
#contenido p {padding: 5px 10px 5px 10px ; text-indent: 15px}
Ahora guarda la hoja estilo-general.css y haz vista previa de la plantilla para ver como queda. Esto
de indentar solo tiene sentido cuando los textos estn justificados o alineados a la izquierda. Cuando
estn centrados no se suele usar, pues no hace falta ese efecto.

Cmo llevamos los cdigos?

Para estar seguros de que estamos haciendo el ejemplo segn las lecciones aprovecho ahora para
dejaros los cdigos de la plantilla.html y de la hoja estilo-general.css segn han quedado hasta ahora.

plantilla.html

45

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0

Transitional//EN">
<html>
<head>
<title>Page title</title>
<link rel="stylesheet" href="estilo-general.css" type="text/css"
media="all">
</head>
<body>
<div id="global">
<div id="cabecera">Bienvenidos a mi Web</div>
<div id="navegacion">Barra de Navegacin</div>
<div id="contenido">
<div id="menu">
<ul><li><a href="#">Enlace 1</a></li><li><a href="#">Enlace 2</a>
</li><li><a href="#">Enlace 3</a></li></ul>
</div>
<p>Esta ser la zona principal de la w eb</p>
<p>Este es mi segundo prrafo. Acabo de poner un punto y en
cambio sigue siendo un prrafo pues no le he colocado an la
etiqueta de cierre. Voy a ponersela justo aqu.</p>
<p>Y este es el tercer prrafo. En pocas lecciones aprender a
darle margenes para separarlos unos de otros, e incluso hacerles
sanguias por la izquierda a la primera lnea, que queda mucho
mejor.</p>
<p>Anda, fijate! Salen todos centrados, que cosa. Espero que
Jorgens nos ensee a ponerlos alineados a la izquierda, o
justificados. As esto parece una poesia! je je je.</p>
</div>
<div id="pie">Este es el pi de pgina</div>

estilo-general.css
* {text-indent:0px ; margin:0px ; padding:0px ; border:0px}
body
{text-align: center }
#global {w idth:800px ; margin:4px auto }
#cabecera {background-color: pink }
#navegacion {background-color: gray }
#contenido {background-color: orange ; w idth: 800px ; float:left }
#contenido p {padding: 5px 10px 5px 10px ; text-indent: 15px}
#menu
{background-color: yellow ; w idth: 150px ; float:left ;
text-align:left ; margin-right: 10px }
#menu li {list-style:none ; margin: 4px 0px 4px 6px }
#pie
{background-color: brow n }
a
{color: brow n ; text-decoration:none ; display: block }
a:link {}
a:visited {}
a:hover {color:red ; text-decoration:underline ; background-color:
silver}
a:active {}
p {text-align: justify}

Un poco ms de estilos css

Vamos a profundizar con tres propiedades muy importantes que si no quedan claras nos van a dar
muchos dolores de cabeza. Estas propiedades son margin, padding y border.

Border
46

Si en una capa solo definimos su contenido en Html, esta solo mostrar eso, el contenido, ya sea una
imagen, un prrafo o lo que sea. Pues bien, la propiedad border dibuja un borde alrededor justo de ese
contenido. El borde estar pegado al contenido, como en este caso de la derecha. El borde por defecto,
si no se indica otra cosa, es una lnea continua de 1 pixel de grosor y de color negro.

Padding

El padding lo usaremos para definir una distancia de separacin entre el borde y el contenido. Separa
el borde de su contenido en una distancia igual a la que le indiquemos. Concretamente, esta zona sera
como la parte roja que se ve en esta otra imagen de la derecha. Como ves, el borde ahora no est
pegado a la imagen, sino separada de ella por la zona roja que ha sido definida con la propiedad margin.
Fjate que el borde ahora est pegado al padding, no al contenido.

Margin

El margin es la distancia de separacin que se va a dejar entre el borde y la parte exterior del
elemento de la capa. En este caso no se ve, pues es una zona exterior al dibujo en la que no se permite
que aparezca nada. Por eso se usa para separar unos prrafos de otros, como vimos en las lecciones
primeras. En este caso solo hay definido el margin en el ejemplo de la derecha. Como ves, hay una
separacin entre la imagen y este mismo prrafo, aunque no se ve.

El trio Margin-Padding-Border
En la imagen de abajo puedes ver mejor a qu zona corresponde cada una de estas propiedades.

Puedes ver el borde, que le he puesto color azul para distinguirlo. Entre el borde y el contenido est
la separacin creada por el padding y entre el borde y el exterior el espaciado dejado por el margin.
As, si ponemos dos imgenes una junto a la otra y queremos separarlas, usaremos por ejemplo el
margin. Lo mismo para los prrafos etc. Si quisieramos separar un elemento A de los que tiene
alrededor, le pondriamos a A un margin.
Si tenemos un elemento encerrado en una capa y queremos que su contenido se separe un poco de su
extremo (de su borde) le hariamos un padding.

Separar un poco el men

Segn lo explicado en la pgina de antes, para conseguir separar un poco el men lateral (toda la
zona amarilla) del borde de la parte naranja de la pgina, es decir, para meterlo un poco ms dentro de
la parte central, podramos colocar un margin o un padding.

47

Como lo que queremos es separar la capa #menu (la amarilla) de los elementos exteriores, tenemos
que aplicar margin. Si aplicramos padding a la capa #menu el efecto sera crear una separacin entre
el borde amarillo y los enlaces de dentro.
Hace un par de pginas pusimos a la capa #menu este margen: margin-right:10px. Era para dejar
una separacin entre el men y los textos de la parte naranja que estn a su derecha. Ahora, como
hemos visto que tambin sera bueno separarlo por la izquierda y por arriba, ampliamos la definicin y
la ponemos de este modo:
# menu {................... margin:10px 10px 10px 10px}
Esto es lo mismo que poner solo margin: 10px, pero mejor lo dejamos del otro modo as podemos
poner margenes diferentes en los cuatro lados si vemos que el mismo para todos los lados no nos gusta.
Colocando ese margin en estilo-general.css obtendramos esta apariencia.
Realmente parece que por debajo es mucho y por arriba y la izquierda me he pasao un poco. Vamos a
probarlo con estos otros valores (recuerda el orden de las dimensiones del margin, arriba-derechaabajo-izquierda)
#menu {................... margin:3px 10px 3px 3px}
Y haciendo de nuevo vista previa sobre plantilla.html vemos que queda mucho mejor.
An no hemos aplicado ningn borde a ninguna capa. Esto es por que cada navegador interpreta el
borde de un modo distinto y vamos a evitarlo todo lo posible. En su lugar usaremos imagenes de fondo
con el borde ya dibujado.

Te toca currrtelo por tu cuenta

No estara de ms que crearas una pgina aparte e investigaras los efectos del margin, el border y el
padding por tu cuenta. Para distinguir una cosa de otra lo mejor es ponerle un color al body (a estas
alturas debes saber hacerlo), creas una capa a la que pones nombre y le aplicas otro color diferente y
luego le aplicas otro color distinto ms al elemento que pongas dentro de la capa, que puede ser una
imagen, un prrafo, una lista, etc. Seguro que te resultar curioso observar los cambios que produce
variar esos datos en la hoja de estilo y seguro que aprendes un montn.

Insertar ttulos con h1, h2, etc.

Igual que para indicar que una frase deba tener aspecto de prrafo con las etiquetas <p> y </p>,
existen otras etiquetas para indicar que se trata de un ttulo y estas etiquetas se escriben con una " h"
seguida de un nmero que puede ir del 1 al 6. (Me refiero a ttulos de texto, no al title de la pgina
como vimos al principio de estas lecciones).
La forma correcta para un ttulo sera esta:
<h1>Este es un ttulo de importancia Uno</h1>
Fjate como de nuevo, tiene una etiqueta de apertura al inicio y otra de cierre al final con la
contrabarra.
En lugar de un h1 podemos usar un h2, un h3 y as hasta h6. Los h1 son ttulos principales y el resto
van siendo de menos importancia y por lo tanto aparecen con letra ms pequea cada vez. Se usan por
tanto los h1 para ttulos principales y los h2 para subtitulos.
Si aplicamos esas etiquetas sin ms obtendremos una simple frase pero en negrita y con un tamao
mayor de lo normal para que se vea destacado. Si no nos gusta cmo queda por defecto, podemos
siempre cambiar su aspecto indicando las propiedades que nos de la gana en la Hoja de Estilo, que para
eso est.
Se pondr por ejemplo titulos principales (h1) en negrita, con un tamao ligeramente mayor que el
resto de los textos y adems subrayados y de otro color distinto al texto normal, que suele ser negro.
Para los subttulos (h2) un tamao algo menor que el h1 y adems sin subrayar, pero tambin del color
del h1 y en negrita. Vamos a definir en la hoja de estilos este aspecto para esos dos elementos y
centrados.
Abrimos el Html-Kit, abrimos el archivo estilo-general.css y definimos estos dos ttulos del siguiente
modo:
h1 {font-size: 1.2em; color:blue ; font-weight: bold ; text-decoration: underline ; text-align:
center}
h2 {font.size: 1.1em; color:blue ; font-weight: bold ; text-decoration: none ; text-align: center}
Guardamos ahora la Hoja de Estilo y abrimos la plantilla.html
Si hacemos vista previa a la plantilla no veremos ningn cambio porque como no hemos dicho a
ningn elemento de la plantilla que es un ttulo, no hay nada que mostrar con estos cambios en la Hoja
de Estilo. Vamos ahora a crear un ttulo (h1) y un subttulo (h2).
El ttulo est claro, va a ser el texto donde pone "Esta ser la zona principal de la web". Una frase
no debera ser a la vez prrafo y ttulo, o una cosa o la otra, de modo que le cambiamos las etiquetas a
esa frase, eliminamos la "p" y ponemos un "h1", tanto al principio como al final. No te olvides de la
contrabarra en la etiqueta de cierre. Veremos esto en la vista previa:

48

El subttulo, de etiqueta h2, lo vamos a poner en el texto "Y este es el tercer prrafo". Para
convertir ese trozo en subttulo, ya sabes que no debe estar entre las etiquetas <p> y </p>, de modo
que lo encerramos entre <h2> y </h2> y pasamos la etiqueta <p> de ese prrafo despus de ese trozo
de texto, quedando as:

Los ttulos aparecen como elementos de una sola lnea. Lo ves en la vista previa?

Aunque en el cdigo HTML pongamos un prrafo seguido de un ttulo (en la misma lnea de cdigo), el
prrafo siempre aparecer debajo, en la siguiente lnea, pues para eso es un ttulo. Los ttulos alineados
a la izquierda ya sabes como cambiar la Hoja de Estilo para conseguirlo (text-align: left). Lo mismo para
el resto de propiedades.

La importancia de los ttulos en el posicionamiento de una pgina web

Y t pensars... bueno, si puedo definir el estilo que me da la gana.. no podra crear una clase de
prrafo (p.titulo), definirle las propiedades de centrado, tamao mayor, color y subrayado y usar ese
estilo en lugar de las etiquetas h1?
Pues si, si que puedes, pero est muy bien usar las etiquetas de ttulos por lo siguiente. Cuando una
persona hace una bsqueda con por ejemplo Google y escribe "como crear pginas web" Google le
muestra una serie de pginas. Pero cmo sabe Google qu pginas ha de mostrar? Bien fcil. Google y el
resto de buscadores se pasean continuamente por la red leyendo las palabras de cada pgina web. Si en
mi web ven que aparecen las palabras "como", "crear", "pginas" y "web", lo memorizan y mostraran mi
web en sus listas cuando alguien haga una bsqueda con alguna de esas palabras.
Y porqu unas pginas aparecen ms arriba y otras ms abajo en esas listas? Los motivos son muchos,
pero uno de ellos (hay muchos ms motivos) es que algunas de esas palabras aparezcan destacadas y
destacadas es, o bien que aparezcan en negrita o bien que aparezcan dentro de un ttulo tipo h1, h2
etc. Por eso es mejor hacer los titulos usando h1, pues si lo hacemos como prrafos los buscadores
nunca sabrn que se trata de un ttulo y no tomarn esa palabra tan en cuenta (tambin la tienen en
cuenta, pero menos).
Otra cosa importante. Ya que sabemos la importancia de las palabras de los ttulos, es bueno incluir
en estos aquellas palabras por las que queremos ser encontrados. Es por eso que en los ttulos de CCTW
se intenta colocar estas palabras clave. En esta seccin por ejemplo, he aprovechado el ttulo de arriba
para colocar palabras que me interesan, como "titulos" (alguien puede estar buscando cmo insertar
ttulos en una web y me interesa que aparezca esta pgina en ese caso), tambien he colocado la palabra

49

"posicionamiento" (me interesa que quien busque por esa palabra encuentre mi web) y por supuesto algo
que no puede faltar en mi caso, las palabras "pgina web".
Repito, no es cuestin de saturar con ttulos, es suficiente con aprovecharlos muy bien, y saber qu
palabras poner sin que el texto del ttulo pierda su sentido, claro. Ha de tener que ver a la vez con el
texto que hay debajo de l, sino, ser muy bueno para el buscador pero los visitantes pensarian que se
te ha ido la cabeza.

TERCERA LECCION
Buscando alojamiento para la pgina web
Ya va siendo hora de ir subiendo nuestro trabajo a la red. Aunque an no est terminada la pgina
web, es bueno tener ya un sitio para alojarla (a ese sitio se le llama Hosting) para ir viendo cmo se
comporta la web en realidad.
Para no repetir aqu cosas que ya tenemos explicadas en CCTW, os invito a visitar la seccin Hosting y
Dominios. Una vez que entres all aprenderas todos los conceptos relacionados, con los que podrs
escoger con ms idea el hosting que ms se amolde a tus necesidades.
Si tienes mucha prisa y quieres ir al grano, ve directamente a la pgina donde explico cmo
registrarte en un servidor gratuito sin publicidad, pero no olvides volver a esa seccin y leer el resto de
informacin cuando puedas, te ser til en el futuro.
Cuando termines de leer esa seccin, te dars de alta en el Hosting que quieras y podrs seguir con
las lecciones siguientes, pero recuerda apuntarte en un papelito (vale tambin una Hoja de Excel o del
Notepad) los siguientes datos:

Nombre de usuario para el Hosting.

Contrasea de tu cuenta de Hosting.

Direccin FTP con la que subir tus datos a la red.

Direccin de tu pgina web.

Configurar Html-Kit para el nuevo alojamiento

Ahora se supone que ya tienes los datos de los que te habl en la pgina anterior, nombre de usuario,
contrasea, direccin del FTP y adems conoces la direccin de tu nueva web. Pasamos a configurar el
Html-Kit para poder subir la pgina de la leccin al nuevo servidor.

Configuracin del nuevo Servidor en el Html-Kit

Recuerdas cuando creamos la carpeta local para colocar dentro los archivos de la web.
Abre tu Html-Kit y en la barra de arriba, donde pone Workspace escoge la opcin Aadir
Carpetas/Servidor FTP > Aadir Servidor FTP, como en la imagen de abajo:

Aparece una ventana donde tienes que colocar algunos de los datos que apuntaste, veamos qu datos
son y dnde van apuntados.

50

(1) Aqu pon la direccin de tu FTP. Suele empezar por ftp.nombredelservidor, pero cada hosting es
algo firerente (en la imgen de arriba puedes ver los datos que yo puse para la configuracin del Ftp de
una cuenta creada en Razy).
(2) Aqu se pone el puerto de conexin. Ni yo se lo que es, pero coloca un 21 a no ser que tu hosting
te indique otra cosa.
(3) Tu nombre de usuario para el Hosting que tengas. En Razy son nmeros aleatorios, como puedes
ver en la imagen.
(4) La contrasea o password.
(5) Activa esta casilla si no quieres tener que estar escribiendo la contrasea cada vez que quieras
conectar tu Ftp.
(6) Es solo el nombre que aparecer en la ventana Workspace del Html Kit. Pon lo que ms te guste.
Yo he puesto web-ejemplo-cctw-internet para diferenciarlo de la carpeta local que llamamos webejemplo-cctw-local. Para seguir el ejemplo de este curso haz como yo y as evitars perderte cuando me
refiera a esa carpeta. Luego, para tus trabajos la puedes llamar como te de la gana, claro.
(7) Initial Directory: En ocasiones al registrarte en un servidor te indican la ruta inicial o FTP Path,
que has de colocar en el Ftp. A veces es /www/ otras veces es /html_public/... Si te has registrado en
Razy escribe aqu lo mismo que pusiste en el punto (1) y te funcionar bien. Simplemente indica al Ftp
cul ser la carpeta raiz que se va a mostrar.
(8) Passive Mode. Esto no lo domino bien. Si se que unos servidores piden que se use el modo activo y
otros el modo pasivo. Si lo pones al contrario quizs te cueste conectarte. Razy por ejemplo pide que se
active. Tiene que ver son los puertos que se usan para la conexin.
El resto de opciones de esa pestaa y de las otras dos no hace falta tocarlas. Pulsa en OK y
seguirmos.

Nuestro nuevo Servidor FTP

Ahora podemos ver una nueva carpeta en la ventana de la derecha (ver > Workspace) del Html-Kit. Es
esta sealada en la imagen de abajo:

51

Si ahora simplemente pulsas sobre esa carpeta, se abrir mostrando todos los archivos que hay en
internet. Seguramente solo haya uno llamado index.html sin contenido alguno o con algn mensaje de
"En construccin". Esa pgina la pone el propio hosting mientras que t no subes la tuya.

Si al pulsar sobre el signo "+" de la carpeta azul sta no llega a abrirse nunca sino que aparece una
lupa buscando y tarda demasiado (varios minutos) sin que termine de mostrar los archivos de dentro,
podra ser que:

Tienes en casa un cortafuegos o firewall que impide al HtmlKit conectarse. Tendrs que
darle permisos al HtmlKit en tu cortafuegos de windows.
Los datos que has colocado no han sido escritos correctamente.
Puede que los datos de usuario o contrasea los pusieras con alguna mayscula y has de
escribirlo igual que lo pusiste al registrarte.

Subir el index.html de tu pgina web con Html-Kit

Ya tenemos unos cuantos archivos de nuestra web de ejemplo. Los podemos ver en la ventana
Workspace del Html Kit, dentro de la carpeta "web-ejemplo-cctw-local". Tambin tenemos el ftp
configurado y lo podemos ver en la misma ventana, debajo de la carpeta anterior con un smbolo a su
izquierda de color azul. Estos smbolos azules indican que se tratan de carpetas de servidores (archivos
en la red) mientras que los amarillos indican que son locales (estn en tu ordenata).
Ahora vamos a ver cmo nos las ingeniamos para subir los archivos desde nuestro des-ordenador hacia
nuestro nuevo hosting usando el Ftp configurado antes.
Haciendo clic en el signo "+" de la izquierda de la carpeta del ftp "web-ejemplo-cctw-internet" podrs
ver qu archivos hay en tu servidor (hosting) en estos momentos. Dale y vers que aparece un archivo
index.html
Este archivo index.html es el primero que lee el navegador cuando se teclea la direccin de cualquier
web en l. Todas las webs tienen un index.html y el que t ves ahora es el que ha colocado tu hosting
para que se vea alguna cosa mientras que subes tu propio index.

Cmo borrar archivos

Para empezar vamos a borrar ese index.html que nos han colocado por defecto (el de la carpeta
"web-ejemplo-cctw-internet). Para ello basta con hacer clic sobre l una vez con el botn derecho del
ratn y escoger "Delete..." que significa Borrar.
Te preguntar si ests seguro,le dirs que si. Tenemos ahora el hosting totalmente vacio.

Subir el primer archivo

Como sabes, para que la gente vea tu web, los archivos han de estar en el hosting. De nada sirve
tenerlos en tu Pc. Por tanto los tenemos que pasar desde la carpeta amarilla
"web-ejemplo-cctwlocal" hasta la carpeta azul
"web-ejemplo-cctw-internet". Vamos a subir el archivo index.html al
hosting. Para ello hacemos clic con el botn derecho del ratn sobre la carpeta "web-ejemplo-cctw-

52

internet" (en adelante la llamaremos simplemente "internet") y del men que se abre escogemos la
opcin "Connect" que significa "Conectar al servidor". Si no te aparece activada es porque ya est
conectado:

Despues hacemos lo mismo, clic con el botn derecho del ratn y escogemos esta vez la opcin
"Upload" que significa "Subir":

Se abre entonces una ventana donde debemos buscar, dentro de la carpeta donde guardamos los
archivos de la web de ejemplo, el archivo index.html (la ruta sera algo as como C:\Documents and
Settings\Usuario\Escritorio\mis-paginas-web\web-ejemplo-cctw). Selecciona el index.html y pulsa en
"Abrir".

Pues ya est. Ahora aparecer en la ventana Workspace del Html Kit el nuevo archivo index.html,
pero esta vez es el nuestro. Si ahora visitas tu pgina web escribiendo en tu navegador la direccin,
vers algo parecido a la pgina web del ejemplo que estamos haciendo. Concretamente vers esto:

53

Y debemos subir el resto de los archivos para que se muestra la pagina completa.

Subir el resto de archivos al servidor

Debes seleccionar los archivos uno por uno y hacerles el "Upload". Recuerda:
1.- Conectar con el servidor con botn derecho del ratn sobre la carpeta azul y pulsando en
"Connect".
2.- Botn derecho sobre la misma carpeta azul de nuevo y seleccionar "Upload".
3.- Seleccionar un archivo y pulsar en "Abrir".
4.- Lo mismo para el siguiente archivo. Hazlo solo para los archivos estilos.css, estilo-general.css y
plantilla.html.
A la hora de seleccionar el archivo que quieres subir puedes tener apretada la tecla Shift de tu
teclado (la flecha del teclado que hay a la izquierda apuntando hacia arriba) y as podrs seleccionar
varios archivos de una sola vez.
Vers como no es posible subir la carpeta "objetos". Cuando la seleccionas para subirla en lugar de
subirse se abre mostrando sus componentes. Lo que hay que hacer es crear primero la carpeta objetos
en el servidor o hosting. Veamos como:

Crear nuevas carpetas

Haz clic con el botn derecho del ratn sobre el nombre de la carpeta "web-ejemplo-cctw-internet".
Selecciona la opcin New + Create New Folder. Si no te aparece activa tendrs que conectar primero el
Ftp (botn derecho sobre la carpeta y pulsar "Connect", como antes):

Se abre una ventanita donde has de ponerle el nombre a la carpeta. Recuerda, es " objetos" (todo en
minsculas) no "Objetos":

54

Ahora que ya tienes la carpeta "objetos" dentro de tu hosting. Ten en cuenta una cosa importante.
Cuando quieras colocar un archivo directamente en la raiz de la web (la raiz significa en el primer nivel
de la web, es decir, fuera de cualquier carpeta) has de hacer el "clic derecho" sobre el nombre "webejemplo-cctw-internet". Pero si lo que quieres es colocar algn archivo "dentro" de una carpeta, es
sobre esa carpeta donde has de hacer "clic derecho" para escoger luego "Upload". En caso contrario el
archivo no se subir dentro de esa carpeta.
Por tanto, para subir ahora los archivos que hay dentro de la carpeta "objetos" de tu disco duro a la
carpeta "objetos" del servidor, has de hacer clic derecho sobre la carpeta objetos azul, hacer clic en
"upload" (o en Connect antes si se ha desconectado) y despus escoger los archivos a subir.

En definitiva...
Al final, si abres las carpetas web-ejemplo-cctw-local y web-ejemplo-cctw-internet en la ventana
Workspace del Html Kit y si has hecho los deberes correctamente, te ha de aparecer algo como lo que
se muestra en la imagen de la derecha.

Ya tenemos los archivos de lo que llevamos hecho de ejemplo en el nuevo hosting. A partir de ahora,
cada vez que hagamos algn cambio o mejora en el ejemplo podremos subirlo al servidor (o hosting)
para ver como va quedando.
Por cierto, si quieres ver tu plantilla.html en tu servidor despus de haberla subido, basta con
escribir su direccin en tu navegador. Su direccin ser la misma que escribes para ver el index, seguido
de /plantilla.html
Es decir, si tu direccin es http://yomismo.onlinewebshop.net/ la direccin de la plantilla ser
http://testeando.onlinewebshop.net/plantilla.html

Como colocar bordes a la plantilla de nuestra pgina web

Con los bordes hay que tener mucho cuidado, pues cada navegador interpreta los bordes de un modo
distinto y podra estropearnos el aspecto de nuestra pgina. Imagina un rectngulo. Si le definimos un
borde de 10 pixeles de anchura, unos navegadores pintan ese borde por fuera de ese rectngulo,
mientras que otros lo pintan por dentro del rectngulo. Al final resulta que los visitantes que vean la
web con un tipo de navegador la veran bien, pero otros que usen otros navegadores no la vern como
nosotros queremos. La forma que aqu proponemos es sencilla y procura que la pgina web se vea
idntica usando cualquier navegador.

55

Dnde se define un borde

Como los bordes son ms aspectos decorativos que contenidos en s, vamos a definirlos en la Hoja de
Estilo. As adems podremos cambiarlo cuando nos de la gana con solo variar algunos detalles del
archivo de estilo en lugar de tener que hacerlo en cada una de las pginas de la web.

Cmo se definen los bordes

En la Hoja de Estilos, se define el borde de un elemento (por ejemplo de una capa o div) escribiendo
esto entre sus corchetes:
border: 1px solid black ;
donde 1px es la anchura del borde, solid significa que ser una lnea continua y black (negro) ser el
color que queremos que tenga la lnea de borde. Hay otras formas de definir el borde, pero para el
ejemplo nos basta con saber esto. Cuando quieras aprender ms cosas sobre el Border solo tienes que
visitar la seccin Curso de Estilos CSS de ComoCrearTuWeb.
La lnea anterior crea por tanto un borde de 1 pixel de ancho, con una lnea continua de color negro
por arriba, abajo y por los lados del elemento al que se lo apliquemos. Pero en ocasiones quizas
prefiramos dibujar el borde solo por uno de los lados dejando sin borde los otros.

Dibujar el borde solo por algunos lados

Para dibujar el borde solo por un lado, se pone esta lnea en lugar de la anterior:
border-top: black 1px solid (dibuja el borde solo por arriba)
border-bottom: black 1px solid (dibuja el borde solo por abajo)
border-left: black 1px solid (dibuja el borde solo por la izquierda)
border-right: black 1px solid (dibuja el borde solo por derecha)
Si queremos dibujar el borde por varios lados pero no por los cuatro, basta con escribir (entre los
corchetes del elemento al que se lo queremos aplicar) las lneas anteriores que queramos, separadas por
punto y coma ";".

Veamos un ejemplo de aplicacin de bordes

Vamos a dibujar algunos bordes en el ejemplo. Abre tu Html Kit y abre el archivo estilo-general.css
Ahora, dentro de los corchetes del elemento "contenido" escribe esto de abajo para dibujar un borde
a la izquierda y un borde a la derecha:
contenido { ....lo que ya haba .......... ; border-left: black 1px solid ; border-right: black 1px
solid }
Si ahora guardas la Hoja de Estilo estilo-general.css y haces vista previa en el archivo plantilla.html
podrs ver como aparecen bordes negros a los lados de la capa "contenidos".

Problema con los distintos navegadores

El objetivo de toda pgina web es que se vea identicamente en cualquier navegador. Con lo que
llevamos hecho en el ejemplo ya podemos observar un fallo. Acabo de descubrir una regla:
"Si defines un borde en un elemento, ese elemento no puede llevar tambin definido un ancho
concreto mediante el width, es decir, no le podemos asignar una cantidad numrica, solamente se le
puede definir width:auto". Si no seguimos esta regla, la web no se ver bien en todos los navegadores!"
Para arreglar esto basta con eliminar la cifra de la anchura para la capa "contenido". Realmente no
va a ser un problema eliminar ese width:800px, pues la anchura ya est definida por la capa que
contiene a contenido (global), as que eliminamos width:800px de la capa contenidos en estilogeneral.css la guardamos y hacemos vista previa para ver que ha ocurrido.
Ahora resulta que en Internet Explorer se ve bien, pero con el Opera se nos estropea la estructura.
Esto lo arreglamos eliminando en la definicin de estilo de la capa contenido la propiedad float:left que
en realidad no nos haca mucha falta.
Ahora s que se ve correctamente en todos los navegadores.

Bordes para el resto de capas

Ahora que vemos que esto del borde funciona, vamos a ponerle borde a otras capas, recordando por
supuesto la regla anterior que deca. "Si la capa tiene definida una cantidad numrica para el width, no
podemos definirle el borde o se deformar la capa un poco".
Ahora vamos a ir colocando bordes a varias de las capas de la plantilla, teniendo en cuenta que
cuando tenemos una capa encima de otra, si le ponemos un borde inferior a la de arriba, no ser
necesario ponerle borde superior a la de abajo (pues le vale el borde inferior de la de encima).
A la capa o div llamada navegacion le vamos a poner borde por lo cuatro costados (por arriba, abajo ,
izquierda y derecha), que como ya sabemos, se hace aadiendo esto de abajo entre los corchetes de la
Hoja de Estilo estilo-general.css:
border: black 1px solid
quedando esa lnea as en la Hoja de Estilo:
#navegacion {background-color: pink ; border: black 1px solid }
Si ahora le pusieramos borde a la capa de arriba del todo (cabecera) por los cuatro costados, nos
aparecera un borde de 2 pixeles entre esa capa y la capa navegacion, (1 pixel definido en la capa

56

navegacion ms otro pixel definido para la capa cabecera). Por tanto y para no tener unos bordes ms
gruesos que otros, a la capa cabecera le vamos a definir el borde solamente por ariba y por los lados.
Esto, como ya sabes, se hace as:
#cabecera { background-color: pink ; border-left: black 1px solid ; border-right: black 1px
solid ; border-top: black 1px solid }
Ahora vamos con la capa pie. Vamos a definirle un borde por los cuatro costados de este modo:
#pie {background-color: brown ; border: black 1px solid }
Y con esto quedan todas la capas bordeadas. En adelante la mejoraremos an ms hasta que quede
totalmente profesional.

Esquinas redondeadas para las capas de la web

No existe ninguna propiedad por el momento para conseguir mediante css ni html crear el efecto de
redondeado de aristas o esquinas, pero hay una forma de hacerlo de otro modo. Dibujando el contorno
redondeado en una imagen y colocndola despus en la capa como imagen de fondo. De este modo no
solo podemos conseguir el redondeado, sino tambin cualquier otra forma que seamos capaces de
dibujar, como por ejemplo lazos, sombras de colores, etc.
Solo es necesario tener un poco de destreza para dibujar lo que necesitamos con un programa de
dibujo, como el Paint del Windows, o similar. En el Foro CCTW hay una seccin en la que se habla del
Paint Shop Pro (PSP) que quizs te sea de ayuda para aprender a dibujar con el ordenador.
Partiremos de algunas imgenes ya hechas. Las usaremos para este ejemplo de pgina web que
estamos haciendo.
Para empezar, cpiate estas dos imgenes y pgalas en la carpeta objetos para poder seguir estas
lecciones

Si se trata de imgenes con extensin gif y con fondo transparente.

nombre curva-superior.gif y curva-inferior.gif

Gurdalas ponindoles de

Una capa nueva para el borde superior

La imgen de la curva de la parte superior de la pgina web la vamos a poner como una imagen de
fondo (un gif) en una nueva capa que vamos a insertar en la pgina web, justo que quede al principio de
todas las dems. La vamos a llamar curva-superior. Ya sabes, por un lado escribimos unas lneas en el
cdigo html de la plantilla.html y por otro lado definiremos las propiedades de esta nueva capa en la
Hoja de Estilos llamada estilo-general.css
Abre el archivo plantilla.html con tu Html Kit e inserta esta lnea justo entre la lnea de la capa
glogal y la de contenido:
<div id="curva-superior"></div>
Ha de quedar por tanto as:

.....
<div id="global">
<div id="curva-superior"></div>
<div id="cabecera">Bienvenidos a mi web</div>
.....
Como vers, esta lnea no tiene contenido ninguno. Realmente no le hace falta pues lo nico que
queremos ponerle es la imagen de la curva de antes, pero eso lo vamos a definir con estilos css, no en el
html de modo que se va a quedar as, vacia.
Ahora abre la hoja de estilos estilo-general.css e inserta esta otra lnea donde definimos las
propiedades de la capa curva-superior:
#curva-superior { background-image: url(objetos/curva-superior.gif) ; background-repeat: norepeat }
Qu hemos definido con esa lnea de estilo? Le hemos dicho que la imagen de fondo ser curvasuperior.gif, que est en la carpeta objetos y que no se repita. Si ahora guardas la hoja de estilo estilogeneral.css y haces vista previa desde el Html Kit vers este resultado.
Debes ponerle algo de contenido a esa capa, como por ejemplo una letra o una palabra, pero como
no se desea que aparezca nada de eso, lo que haremos ser definirle en la hoja de estilo una anchura y
una altura, pues la misma que tiene la imagen y asi nos aseguramos que se ve entera.

#curva-superior { background-image: url(objetos/curva-superior.gif) ;

57

background-repeat: no-repeat ;
width:800px ;
height: 12px }
Con width: 800px le indicamos que la capa ha de tener 800 pixeles de ancho y con height: 12px le
decimos que su altura ha de ser de 12 pixeles, igual que la imagen de fondo. Ahora es de esperar que se
vea y adems completa, vamos a ver....
Bueno, la cosa va mejorando, aunque ahora encontramos otra cosilla que no nos gusta, y es que
haciendo vista previa con Internet Explorer (con el Firefox no ocurre) aunque la imagen sale
prefectamente, aparece un espacio en blanco separando la imagen del resto de la pgina y queda
bastante feo.
Esto se arregla muy fcil aadiendo en la hoja de estilo, adems de la altura y la anchura de antes,
esto:

#curva-superior { background-image: url(objetos/curva-superior.gif) ;

background-repeat: no-repeat ;
width:800px ;
height: 12px ;
overflow : hidden }
Ahora, si guardas la hoja de estilo y haces vista previa si que se ve correctamente, aunque ahora
parece que sobran dos cosas. Por un lado el borde entre la imagen y la capa donde pone bienvenido
sobra y por otro lado, si le damos color de fondo blanco (white) a esa capa rosa, el efecto ser an
mejor.
Para eliminar el borde solo de la parte de arriba de la capa cabecera eliminamos lo que pongo en rojo
abajo:
#cabecera { background-color: pink ; border-left: black 1px solid ; border-right: black 1px solid
; border-top: black 1px solid }
y para poner color de fondo blanco (white) en lugar de rosa (pink) dejamos finalmente la lnea as:
#cabecera { background-color: white ; border-left: black 1px solid ; border-right: black 1px
solid }
El efecto conseguido, aunque no es asombroso, es ms profesional.

Borde redondeado para la parte inferior

Lo mismo que hemos hecho con la parte de arriba podemos volver a hacerlo para la parte
inferior de la pgina para conseguir un mejor aspecto.
1.- Creamos una nueva capa en plantilla.html llamada curva-inferior sin ningn contenido
dentro. La colocamos al final de todas las capas:

.....
<div id="pie">Este es el pi de pgina</div>
<div id="curva-inferior"></div>
</div>
.....
2.- Abrimos estilo-general.css e incluimos la definicion de la nueva capa curva-inferior que
ser igual que la de antes pero cambiando el nombre de la imagen de fondo:

#curva-inferior { background-image: url(objetos/curva-inferior.gif) ;

background-repeat: no-repeat ;

58

width:800px ;
height: 12px
overflow: hidden }
3.- Quitamos el borde de abajo de la capa pie (ya sabes, eliminamos border: black 1px solid
que da borde a los cuatro lados y aadimos los tres lados que queremos, left, right y top) y adems
le ponemos color blanco (white) de fondo a esa capa:

#pie { background-color: white ;

border-left: black 1px solid ;
border-right: black 1px solid;
border-top: black 1px solid }
4 .- Guardamos la hoja de estilo y presentamos.

Uploading... Subiendo los archivos al servidor

Ahora tenemos varios archivos nuevos, como las dos imgenes de la carpeta objetos, los de
arriba y abajo de la plantilla, y por otro lado tambin hemos variado la plantilla.html y la hoja de
estilos estilo-general.css
Recuerda que cuando hacemos un cambio en los archivos de nuestra pgina web, estos cambios
solo estn en nuestro ordenador. De modo que para que los visitantes de la web puedan verlos,
tenemos que subir esos mismos archivos con los cambios realizados al servidor. Si no, los visitantes
seguiran viendo la versin antigua.
Por tanto, los archivos que tenemos que subir son:

curva-superior.gif

curva-inferior.gif

plantilla.html

estilo-general.css

Para subir los archivos plantilla.html y estilo-general.css basta con hacer clic con el botn
derecho del ratn sobre la carpeta azul
web-ejemplo-cctw-internet, escoger la opcin
"connect" para conectar el FTP al servidor, depus hacer clic de nuevo sobre el mismo sitio y
escoger la opcin "Upload...", seleccionar el archivo que queremos subir al servidor (puedes
seleccionar esos dos de una sola vez manteniendo pulsada la tecla Control a la vez que haces clic
en varios de los archivos) y listo. Si el archivo ya exista, te dir que ya existe y te pregunta si lo
quieres sobreescribir.

Dile que s y listo, archivo actualizado.

Para subir los dos archivos de las imgenes de la parte alta y baja de la plantilla que acabamos
de usar en las pginas anteriores, se hace del mismo modo, pero haciendo clic derecho sobre la
carpeta objetos antes de elegir Upload. En caso contrario los archivos irn a parar a la raiz del
servidor, es decir, fuera de la carpeta objetos y claro, no aparecern en la web, pues el navegador
los va a buscar dentro de esa carpeta. Si te ocurriera eso, simplemente borra los archivos que se
han colado fuera de la carpeta y vuelves a subirlos, esta ves correctamente.
Ha de quedar una cosa as en la vista de Workspace del Html-Kit:

59

Cmo colocar el logotipo con enlace en la web

Vamos a explicar cmo insertar el logo en la parte superior y cmo colocarle un enlace para que
al hacer clic sobre l se dirija al visitante a la pgina principal. Cuando ms adelante tengas el
banner o logotipo terminado solo tendrs que sustituir uno por otro.
Bien, vamos a partir de un banner genial, el de CCTW, copia este banner que dejo abajo y
pgalo dentro de tu carpeta objetos para seguir.

Ahora que lo has pegado en tu carpeta objetos, cambiale el nombre. Ha de llamarse

logotipo.gif.

Este logotipo.gif lo vamos a situar en la parte superior de cada una de las pginas, por lo que la
capa correspondiente ser el div llamado cabecera. Para facilitar la colocacin de los elementos
que pongamos en la cabecera, que mejor que crear dos divisiones dentro de ese espacio o capa?

60

As, ser ms fcil colocar el logotipo a la izquierda y dejar un espacio a la derecha, en otro div,
para en un futuro colocar una foto, quizs publicidad.
Pues segn eso, vamos a crear dos divs dentro del div cabecera. Los llamaremos logotipo y
publicidad. As que, abre la plantilla.html con tu Html Kit, y ve a la vista de cdigo para cambiar
esta lnea (los cdigos Html los escribo en azul y los de la hoja de estilos en verde):

<div id="cabecera">Bienvenidos a mi Web</div>

por estas otras:

<div id="cabecera">
<div id="logotipo"></div>
<div id="publicidad">Bienvenidos a mi Web</div>
</div>
Hemos metido las dos capas nuevas dentro de la capa cabecera, y hemos quitado el mensaje de
Bievenida de la capa cabecera para colocarlo directamente dentro de la capa publicidad, por
poner algo mientras en ella.
Ahora toca colocar dentro el logotipo. Ya vimos cmo colocar una imagen y tambin cmo
hacerle un enlace cuando vimos lo del buzn de correo. Pues ahora es casi igual (pero en lugar de
mailto:tudireccion@email.com se pone la ruta de la pgina destino). Escribimos la lnea de la
imagen dentro del div logotipo, quedando esa lnea de este modo:

<div id="logotipo">
<img src="objetos/logotipo.gif" width="270" height="80"
alt="Haz clic aqu para volver a la pgina de inicio">
</div>
Lo que he puesto dentro del alt="" es el mensaje que aparecer en algunos navegadores si
dejamos el cursor sobre el logotipo.
Ahora nos toca crear y darle propiedades a esa nuevas capas en la hoja de estilos estilogeneral.css as que la abrimos y aadimos esto (le he puesto colores de fondo para ver donde est
cada una):

#logotipo

{background-color: brown}

#publicidad {background-color: pink}

Para guardar un cierto orden, incluye esas dos lineas justo despus de la definicin de la capa
cabecera de la hoja de estilo.
Qu propiedades le damos a estas dos capas? Para empezar habra que definirles la anchura. En
principio le daremos un ancho de 280 pixeles a logotipo, pues es un poco ms que lo que ocupa la
imagen (270px). A publicidad le daremos el resto, es decir, 800-280-2=518 pixeles. (ese 2 es un
pixel del borde izquierdo ms otro pixel de grosor del lado derecho de esa capa, pues los grosores
tambin ocupan un espacio).

#logotipo

{background-color: brown ; width:280px}

#publicidad {background-color: pink

; width:518px}

Guardando la hoja de estilos y haciendo vista previa vemos que realmente estas dos capas estn
una encima de otra. Cmo se evitaba esto, qu propiedad permite que podamos poner una a un
lado y la otra al otro lado?.
Por si no te acuerdas te ayudo un poco. Vamos a ponerle float:left a logotipo para colocarlo a la
izquierda y float:right a publicidad para mandarla a la derecha.

#logotipo

{background-color: brown ; width:280px ; float:left }

#publicidad {background-color: pink

; width:518px ; float:right }

Guardamos la hoja de estilo y hacemos vista previa en plantilla.html para ver cmo ha quedad.
Vamos a arreglarlo un poco. Para empezar vamos a darle una altura concreta a la capa cabecera,
por ejemplo de 85 pixeles (un poquito ms que la altura del logotipo que es 80px). As la capa gris
que vemos que se mete dentro del espacio de publicidad respetar esa dimensin. As que dejamos
cabecera as:

#cabecera {background-color: white ; border-left: black 1px solid ;

61

border-right: black 1px solid ; height:85px}

Con esto la cosa se arregla bastante. Ahora solo queda bajar un poco el texto de Bienvenida y
quizs hacer el tamao de letra algo mayor (esto del tamao de letra lo vemos luego).
Modificamos en la hoja de estilos la capa publicidad para dejarla as:

#publicidad {background-color: pink; width:518px ; float:right ;

margin-top:25px}
Ahora, si guardas la hoja de estilo y haces vista previa s que se ve realmente bien. Ya pudes
eliminarle los background-color a las capas logotipo y publicidad, pues ya no necesitamos esos
colores para saber dnde acaba cada una. Tras eliminar eso vuelve a guardar la hoja de estilo.
Solo nos queda ponerle el enlace hacia la pgina principal. Eso lo vimos ya, as que pongo
directamente la lnea, Abres la plantilla.html y a esta lnea:

<div id="logotipo">
<img src="objetos/logotipo.gif" width="270" height="80"
alt="Haz clic aqu para volver a la pgina de inicio">
</div>
le aades esto que marco en negrita:

<div id="logotipo">
<a href="index.html">
<img src="objetos/logotipo.gif" width="270" height="80"
alt="Haz clic aqu para volver a la pgina de inicio">
</a>
</div>
Listo, haz vista previa y verifica que todo va bien. Ahora no solo tenemos el banner, sino que
tenemos preparado un hueco para poder poner un fondo que mejore el aspecto o publicidad, si lo
deseamos. Para cualquiera de esas dos cosas, habra que retocar algo, como por ejemplo eliminar
el margin-top:25px de la capa publicidad en la Hoja de Estilos.

Cmo colocar el men horizontal en enlace en la web

Vamos a comenzar por un menu sencillo.
Antes de crear tu propia web es muy importante que tengas claro un par de cosas. Lo primero
es saber de qu vas a hablar en la web y lo sengundo es tener ms o menos claro cmo vas a
estructurar esos contenidos. Es decir, desglosar lo que quieres contar en secciones y subsecciones.
De ese modo sabrs qu secciones vas a colocar en el men superior.
A la hora de crear la web, colocaras las secciones en el men horizontal superior y al hacer clic
sobre cada una de esas secciones, se abrira la pgina principal de esa seccin mostrando en el
men vertical lateral (el de la izquierda que ya hemos colocado en este ejemplo) las subsecciones.
Por ejemplo, digamos que voy a crear una web de un grupo de msica. Las secciones que se me
ocurren son, "Presentacin", "Historia del grupo", "Trabajos musicales", "Conciertos" y "Zona de
Descarga". Luego, cada una de esas secciones principales pueden desglosarse o dividirse en otras
subsecciones. Por ejemplo, en la seccin "Trabajos Musicales" podran aparecer las subsecciones
"Disco 1", "Disco 2"...."Disco 9". La seccin descargas podra dividir se "Canciones", "Videos", "Poster
y Carteles", "Letras"....
Para que entendais la idea, las secciones principales irian en el men horizontal que vamos a
aprender a crear ahora mismo, mientras que las subsecciones irian en el men lateral.

Creando el Men Horizontal

El men horizontal lo vamos a colocar en la capa que hemos llamado navegacion. Es esa capa
gris horizontal que hay debajo del logotipo. As que, como imaginars, tendremos que retocar un
poco el html de la plantilla y luego colocar las propiedades apropiadas en la hoja de estilo para la
capa navegacion.

Colocando el Html para el men

Como siempre, abre la plantilla.html con tu Html-Kit. Ve a la vista de cdigo y encontrars la
lnea de la capa navegacion:

62

<div id="navegacion">Barra de Navegacin</div>

Borraremos las palabras Barra de Navegacin y las sustituiremos por una lista, en la que cada
elemento ser un enlace del men. Las listas en Html empiezan con un <ul> y terminan con un
</ul>. Dentro de una lista cada elemento de la misma empieza por un <li> y termina con un </li>.
La lista completa con los enlaces sera algo as:

<ul>
<li>Seccin 1</li>
<li>Seccin 2</li>
<li>Seccin 3</li>
<li>Seccin 4</li>
</ul>
Pues ese es el cdigo Html que tenemos que poner dentro de la capa navegacin, eliminando
claro el texto que tena de "Barra de Navegacin" quedando al final as:

<div id="navegacion">
<ul>
<li>Seccin 1</li>
<li>Seccin 2</li>
<li>Seccin 3</li>
<li>Seccin 4</li>
</ul>
</div>
Cuando hagas tus experimentos y quieras aadir o eliminar enlaces en el men horizontal, solo
tendrs que irte a la plantilla.html y aadir o eliminar lneas <li> Seccin X</li> a este trozo de
cdigo de arriba.
Si haces vista previa de la plantilla vers algo as. Puedes ver que los elementos no aparecen
uno al lado de otro sino un debajo del otro. Esto es normal, pues las listas son as. Pero nosotros
vamos a cambiar eso con solo poner la palabra adecuada en la hoja de estilos.
Abre el archivo estilo.general.css con el Html-Kit y vamos a modificar la lnea de la capa
navegacion, que hasta este momento era as:

#navegacion {background-color: gray ; border: black 1px solid }

Para empezar vamos a intentar que todos los elementos de este menu de navegacin aparezcan
uno al lado de otro, en lnea. Para ello usaremos la propiedad float, que hace que los elementos
floten y se desplacen hacia el lado que queramos. Si a definimos que todos los elementos floten
hacia la izquierda, el primero de ellos se ir hacia la izquierda, el segundo igual quedando al lado
del anterior y as con todos los demas. Vamos a probarlo a ver qu pasa.
Al querer ponerle float:left a todos los elementos de la lista, parece lgico pensar que en la
hoja de estilo hay que ponrselo a los li que haya dentro de la capa navegacion (hay que evitar
que los li de la otra capa del men lateral tomen esa propiedad), as que aadiriamos esta otra
lnea en la hoja estilo-general.css:

#navegacion li {float:left}
Haciendo vista previa vemos este resultado en la plantilla. Vamos a terminar de arreglarlo.
Normalmente, si le damos una altura concreta a la capa, se arregla todo. Vamos a colocarle
height:20px a la capa navegacion (no a #navegacion li {...., sino a #navegacion {.... ) y veamos
que pasa:

#navegacion {background-color: gray ; border: black 1px solid ;

height:20px}
Ahora s que sale realmente como queremos. Nos faltan an algunas cosillas, como eliminar el
punto negro de la izquierda de cada elemento del men lateral y como ponerle unos margenes
adecuados para separarlos un poco.
En la pgina siguiente aprenderemos a mejorar an ms el aspecto de este men horizontal.

63

Eliminando el punto negro del men Horizontal

Para eliminar ese puntito tan molesto, hay que ponerle la propiedad list-style:none a alguna de
las lneas de la hoja de estilo. Pues por ejemplo a la lnea #navegacion li, pues esa lnea contiene
las propiedades de cada una de las secciones del men. Vamos a ver que pasa. Aade esto:

#navegacion li {float:left ; list-style:none }

Conseguimos esta otra vista previa de la plantilla. Ahora no aparecen esos punto.

Acomodando el margen de los enlaces del men horizontal

A estas alturas ya debes saber como retocar los margenes para que en lugar de aparecer todos
los enlaces del men horizontal tan pegados se muestren un poco ms separados. Imagino que
sospechas que eso se hace o bien con el margin o bien con el padding. Reconozco que es un poco
complicado saber si hay que usar el margin o el padding, a m me ocurre lo mismo. Siempre
recurro a la foto del apartado Margin o Padding . Pero ante la duda lo mejor es probar, si uno no va
bien, usa el otro.
Vamos a intentar separar cada enlace del men. Para ello le pondremos un margin al los
elementos li de la capa navegacion. Para ello ya sabes, hacemos esto:

#navegacion li {float:left ; list-style:none ; margin: 0px 10px 0px

10px }
El orden de esas cifras era: la primera cifra para el margen superior, la segunda para el de la
derecha, la tercera para el margen inferior y la ltima para el de la izquierda. Segn la lnea de
arriba, hemos dejado unos margenes de 10 pixeles por la izquierda y derecha de cada enlace del
men. Queda as ahora la plantilla de nuestra web.
Parece un poco escaso. Vamos a cambiar los dos 10px por 20px para aumentar la separacin
entre ellos, quedando ahora as la plantilla. Ahora queda mejor.

Dando margen al conjunto de enlaces

Hemos visto como separar los enlaces entre ellos, pero an podemos dejarlo mejor si los
centramos. Vamos a colocarle un margen a la capa navegacion ul por la izquierda de unos 50px.
Con eso conseguimos mover a la derecha todo el grupo de enlaces. La nueva lnea de css que hay
que poner a la hoja de estilos es esta:

#navegacion ul { margin-left: 50px }

Ahora tendremos este aspecto. Como ves, hemos desplazado todos los enlaces un poco (50
pixeles) a la derecha. Vamos a aumentarlo a 180px para que quede ms centrado. Este el el
resultado.
Ya sabes que cuando hagas tus propios experimentos basados en este ejemplo, si aades ms
enlaces a este men horizontal tendrs que disminuir estas cantidades para centrarlo.

Colocando enlaces al men

Como an no sabemos a qu pgina mandar al visitante cuando hagan clic en ellos, en lugar de
ponerle la ruta de la pgina destino le colocaremos un simple #. Eso hace que los enlaces se
muestren como tales, pero al pulsar sobre ellos no te mandan a ningn lado.
Para convertir los elementos de la lista del men horizontal en enlaces, basta con colocarle esto
que os sealo en negrita al cdigo inicial que pusimos en el archivo plantilla.html:

<div id="navegacion">
<ul>
<li><a href="#">Seccin 1</a></li>
<li><a href="#">Seccin 2</a></li>
<li><a href="#">Seccin 3</a></li>
<li><a href="#">Seccin 4</a></li>
</ul>
</div>
Con eso, la plantilla se ve ahora de esta forma.
Fjate que ahora los enlaces del men horizontal se comportan como los del men lateral, es
decir, aparecen rojos y sin subrayar y cuando colocas el cursor del ratn sobre ellos aparecen con
fondo gris claro y con lnea bajo ellos. Esto es porque cuando definimos las propiedades a las

64

etiquetas a en la hoja de estilo, lo hicimos de forma general, es decir, para TODOS los enlaces. Ms
adelante aprenderemos a crear varios tipos de enlaces, por si queremos que los del men lateral
se comporten de un modo distinto a los del men horizontal o incluso distintos a otros elementos
del cuerpo de la pgina web.

Mejorando el men lateral

Lo que vamos a ver aqu es cmo darle la apariencia que tienen los mens de la web de
ComoCrearTuWeb, que pueden gustarte ms o menos, pero eso da igual, pues una vez sepas hacer
lo que te propongo a continuacin, sers capaz de mejorar su aspecto. Ten en cuanta que lo que
yo intento ensearte es a crear el "esqueleto", pero una vez sepas esto si tienes un poco de gusto y
buena mano podrs dejarlo mucho ms guapo que el mio, pues ser solo cuestin de ponerle
buenos grficos, imagenes mejores, colores ms vistosos
Bien, se trata de escoger dos imagenes. Una se coloca arriba del todo del men lateral y la otra
justo debajo. Como ese men ir creciendo hacia abajo conforme vayamos incorporando nuevas
secciones (enlaces) al mismo, lo haremos de un modo algo peculiar.
La imagen de arriba ser fija y tendr una altura concreta. En cambio la imagen de abajo ha de
ser bastante larga, lo suficientemente larga (hacia abajo) como para contener el mximo nmero
de enlaces que tengamos previsto colocar en un futuro en cada uno de los mens laterales (digo
cada uno porque cada seccin tendr su propio men lateral).
Las imgenes que vamos a utilizar para el ejemplo que estamos creando son las siguientes:

Igual que hemos hecho en otras ocasiones, guarda estas dos imgenes en tu carpeta objetos y
ponles estos nombres: menu-curva-superior.gif y menu-parte-inferior.gif
Ahora se debe un poco de Html y otro poco de CSS y asunto concluido. Ser fcil. Estate atento
y podrs aplicar luego todo esto a tu propio proyecto.

Retocando los cdigos

El cdigo Html completo del men lateral era por el momento este:

<div id="menu">
<ul>
<li><a href="#">Enlace 1</a></li>
<li><a href="#">Enlace 2</a></li>
<li><a href="#">Enlace 3</a></li>

65

</ul>
</div>
Es ese, pero todas las lneas entre <ul> y </ul> han de estar seguidas una justo despus de la
otra para que el internet explorer muestre bien el men. Aqu lo escribo en lneas separadas para
que se vea ms claro, pero acurdate de luego guardar la plantilla con todas esas lneas seguidas.
La idea de colocar las imgenes anteriores como fondos, pues as no nos molestar a la hora de
escribir los enlaces dentro. Para ello la imagen ms larga se la vamos a poner de fondo a la capa
menu, mientras que la imagen ms corta, la de arriba se la tenemos que poner a algn elemento
de dentro de esa capa. Si se la ponemos de fondo a los enlaces, esa imagen se repetir con cada
enlace, con lo que no nos vale (solo debe aparecer una vez y adems arriba del todo).
Para remediarlo le vamos a poner un ttulo al men. Como cada seccin tendr su propio men
parece buena idea que ese ttulo sea el nombre de esa seccin. As, si una seccin se llama
"poesias", por ejemplo, pondremos la palabra "Poesias" arriba del todo del men, como si fuera un
ttulo, y al elemento ttulo (h1) le colocaremos ese fondo corto.
De modo que, lo nico que hemos de retocar en el cdigo Html de la plantilla.html ser el
incluir el ttulo. Los ttulos se escriben igual que los prrafos, pero en lugar de usar las etiquetas
<p> y </p> se usaban estas otras, <h1> y <h1> (es un uno).
El men anterior con el ttulo puesto quedara entonces con este cdigo Html:

<div id="menu">
<ul>
<h1>Ttulo de Seccin 1</h1>
<li><a href="#">Enlace 1</a></li>
<li><a href="#">Enlace 2</a></li>
<li><a href="#">Enlace 3</a></li>
</ul>
</div>
El problema que se nos presenta es que nosotros ya habamos definido unas caractersticas para
los prrafos tipo h1, por lo que ahora si las cambiamos, tambin cambian las propiedades de los
ttulos que en un futuro pongamos en el contenido de la pgina.
Esto se supone que sabemos arreglaro. Queremos definir unas propiedades para los ttulos del
tipo h1, pero solo para los que estn dentro del men, es decir, los que pertenecen a la capa
menu.
Abre el archivo estilo-general e incluye esta lnea, por ejemplo, debajo de la lnea donde
definimos la capa menu, as seguiremos cierto orden.

#menu h1 {}
Con esa lnea lo que conseguimos es darla propiedades SOLO a los ttulos que hay dentro de la
capa menu, sin tocar para nada los dems. Solo un problema, y es que como los navegadores leen
desde arriba hacia abajo. Te lo explico mejor.
Imagina una casa llamada Body. Dentro de ella hay unas cuantas habitaciones que llamamos
Capas y dentro de cada habitacin o capa hay varios elementos (prrafo, enlaces, etc). Imagina
ahora que la hoja de estilos le cambia los aspectos a los elementos de la casa. Por ejemplo, si
escribo esto:

* {el color del pelo ser rubio}

Todos (el asterisco * indica TODOS los elementos) los habitantes de la casa sern rubios.
Nosotros en lecciones pasadas pusimos una lnea similar, que empezaba con un asterisco.
Ahora imagina que le digo con esta otra lnea:

#cocina {el color del pelo ser moreno}

que todos los elementos de la cocina (la capa cocina) han de ser morenos. Ocurre al final sern
rubios como deca la lnea de antes o sern morenos como dice esta otra? Pues como la ltima
orden que he dado es la segunda, la de cocina, esa ser la que manda. En caso de que dos lneas
digan distintas cosas para una misma propiedas (altura, anchura, borde.... color del pelo..) la que
al final se muestra en el navegador es siempre la ltima.
Por supuesto, los elementos del bao y del saln siguen siendo rubios, pues la lnea de la "capa"
cocina solo habla de sus elementos, no de los del resto de la casa. Se entiende ahora.
Si miras en la hoja de estilo-general.css, vers que tenemos al final del todo esta lnea:

66

h1 {font-size: 1.2em; color:blue ; font-weight: bold ; textdecoration: underline ; text-align: center}

Al estar al final, y estar definiendo propiedades para todos los h1 de la web, son esas las
caractersticas que mandan y ser inutil darle otras propiedades en la lnea nueva que hemos
puesto. Por qu? Pues porque sta lnea est despus.
Aqui la hoja de estilo-general.css tal y como ha de estar ahora mismo, despus de haber
incluido (aunque an vacia) la lnea para definir los ttutlos de dentro de la capa menu. Comparala
con la que tienes por el momento y si no est igual, sustituyela. Debe tener ese orden:

* {text-indent:0px ; margin:0px ; padding:0px ; border:0px}

p {text-align: justify}
h1 {font-size: 1.2em; color:blue ; font-weight: bold ; textdecoration: underline ;
text-align: center}
h2 {font.size: 1.1em; color:blue ; font-weight: bold ; textdecoration: none ;
text-align: center}
body

{text-align: center }

#global

{width:800px ; margin:4px auto }

#curva-superior { background-image: url(objetos/curva-superior.gif) ;

background-repeat: no-repeat ;
width: 800px ;
height:12px ;
overflow: hidden }
#cabecera

{background-color: white ; border-left: black 1px solid ;

border-right: black 1px solid ; height:85px}

#logotipo

{width:280px ; float:left }

#publicidad {width:518px ; float:right ; margin-top:25px ; font-size:

16px }
#navegacion {background-color: gray ; border: black 1px solid
height:20px}

#navegacion li {float:left ; list-style:none ; margin: 0px 20px 0px

20px }
#navegacion ul { margin-left: 180px }
#contenido

{background-color: orange ; border-left: black 1px solid ;

border-right: black 1px solid }

#contenido p {margin: 5px 10px 0px 10px ; text-indent: 15px}

#menu

{background-color: yellow ; width: 150px ; float:left ;

text-align:left ; margin: 3px 10px 3px 3px }

#menu li

{list-style:none ; margin: 4px 0px 4px 6px }

#menu h1 {}
#pie { background-color: white ;
border-left: black 1px solid ;
border-right: black 1px solid;

67

border-top: black 1px solid }

#curva-inferior { background-image: url(objetos/curva-inferior.gif) ;
background-repeat: no-repeat ;
width: 800px ;
height:12px ;
overflow: hidden }
a

{color: brown ; text-decoration:none ; display: block }

a:link

{}

a:visited {}
a:hover
silver}

{color:red ; text-decoration:underline ; background-color:

a:active

{}

Si te fijas, he puesto casi arriba del todo las lneas que definen p, h1 y h2. Recuerda adems
que la lnea del asterisco ha de estar por narices la primera de todas. Por qu? Pues por que si la
ponemos en medio o al final, vuelve a poner a cero los margenes y bordes de las capas que estn
definidas antes que ella. Es por lo mismo que acabo de explicarte.
Pero imagino que mirndo lnea por lnea ms o menos sabes de que va todo. De hecho lo has
ido escribiendo t mismo a lo largo de estas lecciones.

Volviendo al men
Guardando estilo-general.css y haciendo vista previa a la plantilla.html podemos ver esto:

Quizs quede mejor sin el subrayado y con una letra ms pequea. Para eliminarle el subrayado
se ponia en la hoja de estilo esto:

text-decoration:none
Para cambiar el tamao del texto se pone esto otro:

font-size:10px
donde 10px es la altura de una letra en pixeles. Hay otras unidades que podemos usar en lugar
de pixeles, pero lo veremos ms adelante.
El caso es que la lnea de estilo-general.css que define a los ttulos de dentro de la capa menu
ha de quedar, por el momento as:

#menu h1 {text-decoration:none ; font-size:10px}

Guardamos la hoja de estilo, hacemos un preview o vista previa y....

68

Mucho mejor. Ahora cmbiale el tamao por 12px que as quizs sea un poco pequea de ms.

Colocando la imagen superior

Ya dijimos que la imagen superior se la ibamos a poner de fondo al ttulo del men, as que
aadimos las palabras del fondo de imagen a la capa #menu h1, quedando as:

#menu h1 {text-decoration:none ; font-size:12px ;

background-image: url(objetos/menu-parte-superior.gif) }
Si guardas y haces vista previa vers esto:

Vemos dos "fallos". El primero es que la imagen se repite por la derecha y el segundo fallo es
que se ven las esquinas de color blanco.

Evitando el blanco de las esquinas

Tan solo hace falta abrir los archivos de las imgenes con un programa de dibujo (por ejemplo el
Paint de Windows) y colorear esas esquinas del mismo color que vayamos a poner el fondo de la
web (que ahora es naranja, pero que pronto cambiaremos a otro ms mono). As que bastara con
eso, colorear las esquinas de naranja y volver a guardar esas mismas imagenes con el mismo
nombre y extensin)

Amoldando la anchura de la imagen

Esto se arregla con un programa de dibujo variando su anchura, por ejemplo el Paint de
Windows o cualquier otro en el que puedas editar la imagen.
Ya retocadas has de ver esto de la foto de abajo. Si no lo ves as, guarda la plantilla.html,
cirrala y vuelve a abrirla con el Html-Kit:

69

Ahora vamos a por el fondo de la parte inferior.

Colocando la imagen inferior

Solo se puede poner una imagen de fondo a un elemento, no se le pueden poner dos. La razn
por la que no le hemos puesto un nico fondo que sea el dibujo del men completo es por que no
quiero estar retocando la imagen cada vez que incluya un enlace ms al men. Con esto que
hacemos nos olvidamos de los fondos ya sea el men muy cortito o muy largo, ya lo vers.
Este otro fondo que ser la parte inferior se lo vamos a colocar directamente a la capa menu.
Para ello, incluimos el siguiente trozo de cdigo css en la hoja de estilo estilo-general.css:

#menu

{background-color: yellow ; width: 150px ; float:left ;

text-align:left ; margin: 3px 10px 3px 3px ;
background-image: url(objetos/menu-parte-inferior.gif) }

Haciendo vista previa de la plantilla.html vemos esto (acurdate, antes de hacer vista previa
siempre guarda la hoja de estilo):

Bueno... ahora se ve el fondo, pero no conseguimos ver bien la parte inferior... por qu puede
ser? Resulta que si no se indica nada, las imgenes se colocan pegando su parte de arriba a la parte
de arriba de la capa y como la capa es ms pequea que la imagen no vemos la parte inferior que
es la que nos interesa! Lo que nos interesa realmente es que la parte inferior del fondo se pegue a
la parte inferior de la capa y as podremos ver la curva de la imagen que est en su parte ms
baja.
Cmo lograremos esto? Pues solo hay que decir en la hoja de estilo, que en esa capa, la imagen
de fondo ha de alinearse por la parte de abajo. Esto se hace as:

#menu {background-color: yellow ; width: 150px ; float:left ;

text-align:left ; margin: 3px 10px 3px 3px ;
background-image: url(objetos/menu-parte-inferior.gif);
background-position: bottom }
Bottom significa culo o parte de abajo. Haciendo vista previa:

70

ltimos Retoques
Abre tu plantilla.html con el Html-Kit si la tienes cerrada y aade un tercer enlace al men.
Despus de la lnea del Enlace 3, pones una idntica y le cambias el nmero 3 por el 4, es decir,
aades esto:

<div id="menu">
<ul>
<li><a href="#">Enlace 1</a></li>
<li><a href="#">Enlace 2</a></li>
<li><a href="#">Enlace 3</a></li>
<li><a href="#">Enlace 4</a></li>
</ul>
</div>
Si de nuevo haces vista previa vers como no hay que tocar para nada los fondos del men, sino
que estos crecen con l. Hay que ahorrar trabajo.
Ya para terminar de dejarlo perfecto, aade un padding-top:12px (margen por arriba al ttulo
del men) para separarlo un poco de la franja oscura de la imagen y listo, queda perfecto.

Tambin vendra bien dejar un poco de margen por la parte inferior, pues parece que el Enlace
4 est demasiado pegado a la parte baja de la imagen. Esto lo podemos arreglar colocando un
padding por abajo de unos 5 pixeles a la capa menu, incluyendo en su estilo algo as:

#menu

{background-color: yellow ; width: 150px ; float:left ;

text-align:left ; margin: 3px 10px 3px 3px ;
background-image: url(objetos/menu-parte-inferior.gif);
background-position: bottom ;
padding-bottom:5px }

Ahora que toda la capa del men est cubierta por imagen de fondo, podemos eliminar el
background-color: yellow que tenemos al principio del cdigo de arriba, elimina esa parte.
Haz vista previa y pon el ratn sobre cada uno de los enlaces de este men vertical. Como
vers, la sombra gris que aparece cuando haces eso tiene un margen por la izquierda, pero en
cambio no lo tiene por la derecha y ese efecto es un poco feo. El margen que vemos por su

71

izquierda ha de estar definido por nosotros en algn lugar de la hoja de estilos... seguramente en
la lnea que define los li del men, es decir, en esta lnea:

#menu li

{list-style:none ; margin: 4px 0px 4px 6px }

Vemos que tiene definidos unos margenes de 4 por arriba y por abajo, 6 pixeles por la izquierda
y un cero por la derecha. Ponle un 8px por ejemplo en lugar de cero y fjate como ahora se ve
mejor.

Quizs no veas bien los acentos en tu web cuando la subas al sevidor. En ese caso no olvides
insertar esta lnea de cdigo entre <head> y </head>:
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
Toma nota e insertalo en todas las pginas que hagas, siempre que en ellas se usen acentos.

Recordando el cdigo que llevamos hasta el momento

Te dejo ahora los cdigos de los archivos plantilla.html y estilo-general.css para que revises.

Cdigo Html de la plantilla.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>Page title</title>
<link rel="stylesheet" href="estilo-general.css" type="text/css"
media="all">
</head>
<body>
<div id="global">
<div id="curva-superior"></div>
<div id="cabecera">
<div id="logotipo"><a href="index.html"><img
src="objetos/logotipo.gif" width="270"
height="80" alt="Haz clic aqu para volver a la pgina de
inicio"></a></div>
<div id="publicidad">Bienvenidos a mi Web</div>
</div>
<div id="navegacion">
<ul>
<li><a href="#">Seccin 1</a></li>
<li><a href="#">Seccin 2</a></li>
<li><a href="#">Seccin 3</a></li>
</ul>

72

</div>
<div id="contenido">
<div id="menu">
<h1>Ttulo de Seccin 1</h1>
<ul><li><a href="#">Enlace 1</a></li><li><a href="#">Enlace
2</a></li><li>
<a href="#">Enlace 3</a></li><li><a href="#">Enlace 4</a></li></ul>
</div>
<h1>Esta ser la zona principal de la web</h1>
<p>Este es mi segundo prrafo. Acabo de poner un punto y en cambio
sigue siendo un prrafo
pues no le he colocado an la etiqueta de cierre. Voy a ponersela
justo aqu.</p>
<h2>Y este es el tercer prrafo.</h2>
<p>En pocas lecciones aprender a darle margenes para
separarlos unos de otros, e incluso hacerles sanguias por la izquierda
a la primera lnea,
que queda mucho mejor.</p>
<p>Anda, fijate! Salen todos centrados, que cosa. Espero que Jorgens
nos ensee a ponerlos
alineados a la izquierda, o justificados. As esto parece una poesia!
je je je.</p>
</div>
<div id="pie">Este es el pi de pgina</div>
<div id="curva-inferior"></div>
</div>
</body>
</html>

Cdigo CSS de estilo-general.css

* {text-indent:0px ; margin:0px ; padding:0px ; border:0px}
p {text-align: justify}
h1 {font-size: 1.2em; color:blue ; font-weight: bold ; textdecoration: underline ;
text-align: center}
h2 {font.size: 1.1em; color:blue ; font-weight: bold ; textdecoration: none ;
text-align: center}
body

{text-align: center }

#global

{width:800px ; margin:4px auto }

#curva-superior { background-image: url(objetos/curva-superior.gif) ;

background-repeat: no-repeat ;

73

width: 800px ;
height:12px ;
overflow: hidden }
#cabecera

{background-color: white ; border-left: black 1px solid ;

border-right: black 1px solid ; height:85px}

#logotipo

{width:280px ; float:left }

#publicidad {width:518px ; float:right ; margin-top:25px ; font-size:

16px }
#navegacion {background-color: gray ; border: black 1px solid
height:20px}

#navegacion li {float:left ; list-style:none ; margin: 0px 20px 0px

20px }
#navegacion ul { margin-left: 180px }
#contenido

{background-color: orange ; border-left: black 1px solid ;

border-right: black 1px solid }

#contenido p {margin: 5px 10px 0px 10px ; text-indent: 15px}

#menu

{width: 150px ; float:left ;

text-align:left ; margin: 3px 10px 3px 3px ;
background-image: url(objetos/menu-parte-inferior.gif);
background-position: bottom ;
padding-bottom:5px }

#menu li

{list-style:none ; margin: 4px 8px 4px 6px }

#menu h1 {text-decoration:none ; font-size:12px ; padding-top:12px ;

background-image: url(objetos/menu-parte-superior.gif) }
#pie { background-color: white ;
border-left: black 1px solid ;
border-right: black 1px solid;
border-top: black 1px solid }
#curva-inferior { background-image: url(objetos/curva-inferior.gif) ;
background-repeat: no-repeat ;
width: 800px ;
height:12px ;
overflow: hidden }
a

{color: brown ; text-decoration:none ; display: block }

a:link

{}

a:visited {}
a:hover
silver}

{color:red ; text-decoration:underline ; background-color:

a:active

{}

Bien. Y este es el aspecto que ha de tener esa plantilla. Vamos ahora a la siguiente leccin.

74

CUARTA LECCION

El pie de pgina de nuestra web

Ha llegado el momento de meterle mano al pie de pgina. Vamos a intentar colocarle un hueco
a la izquierda y otro a la derecha donde colocaremos accesos directos (enlaces) a diversas
secciones de la web que conviene que el visitante tenga a la vista en todo momento. Me refiero a
enlaces al mapa de la web (importante para el posicionamiento de la pgina), a una pgina desde
donde puedan contactarnos (muy til para conocer siempre el punto de vista del visitante), otro
enlace hacia una pgina de enlaces (que usaremos a la hora de darnos de alta en directorios) y
tambin unos enlaces al futuro foro, top y directorio de nuestra web.
En medio de estos dos espacios dejaremos un hueco con dimensiones idoneas para incorporar en
un futuro, o bien otra serie de enlaces amigos, o bien una ventanita donde colocar las ltimas
noticias o avisos que queramos dejar o, seguramente, para colocar un poco de publicidad que nos
ayude a pagar un buen hosting sin necesidad de poner un centavo de nuestro bolsillo.

Dnde va el pie de pgina?

Como bien habrs adivinado el pie de pgina lo vamos a colocar dentro de la capa #pie. Este es
su cdigo en la plantilla.html en estos momentos:

<div id="pie">Este es el pi de pgina</div>

Cuando quiero colocar varias capas que estn juntas horizontalmente (una justo al lado de la
otra) siempre las meto dentro de otra capa que las engloba. As me es ms fcil aplicarle luego los
estilos y queda todo ms recogido. Como en este caso quiero crear tres huecos rectangulares, y
todos uno al lado del otro, crear tres capas, una para los enlaces de la izquierda, otra para el
espacio central que en principio usaremos para poner publicidad y otra para los enlaces de la
derecha. Esas tres capas las voy a meter dentro de la capa #pie.
Los nombres que les voy a dar son, #pieuno #piedos y #pietres as que escribe en el cdigo de
la plantilla.html y coloco una palabrita dentro para ver como van quedando cuando haga vista
previa. Ha de quedar as en la plantilla.html (fjate se borra el texto "Este es el pi de pgina"):

<div id="pie">
<div id="pieuno">pie uno</div>
<div id="piedos">pie dos</div>
<div id="pietres">pie tres</div>
</div>
Listo, la vista previa se ve as:

Colocar las capas en lnea

Luego colocamos un float:left a cada capa. As que abrimos la hoja de estilos estilo-general.css
y definimos esas tres capas colocndole un color de fondo para ver bien dnde empieza y dnde
termina cada una (te coloco tambin las lneas de antes y despus para que veas donde aadir
estas lneas, como vers las he colocado justo despus de la capa #pie, por guardar un orden):

............

#pie

{border-left:

black 1px solid ;

border-right: black 1px solid ;

border-top:

black 1px solid ; }

#pieuno

{background-color: brown ; float:left}

#piedos

{background-color: green ; float:left}

75

#pietres {background-color: red

; float:left}

#curva-inferior { background-image: url(objetos/curva-infe.....

...............
Ya se van colocando en su sitio. No te preocupes por los colores, en cuanto tengamos el pie listo
le pondremos otros ms decentes.

Ahora les daremos dimensiones de anchura colocndoles un width. Le vamos a dar un valor a
#pieuno y #pietres de por ejemplo 150px y a la #piedos el resto, que sern unos... 800px - 2px
(del borde izquierdo y derecho) -150px - 150px (de las otras dos capas) = 498pixeles. A ver que sale
con esto:

#pieuno

{background-color: brown ; float:left ; width:150px }

#piedos

{background-color: green ; float:left ; width:498px }

#pietres {background-color: red

; float:left ; width:150px }

Dnde est la capa #pie?

Si haces vista previa te encontrars con esto:

Que habr pasado con el borde?. En teora, como las tres nuevas capas estn dentro de la otra
capa llamada #pie, debera aparecer un borde por sus partes izquierda, derecha y arriba, pues as
est definido en la hoja de estilos, pero parece que al incluir estas tres capas el borde ha
desaparecido tal y como os sealo con crculos rojos en la imagen de arriba.
Los bordes de la capa #pie s que estn dibujados. Lo que ocurre es que cuando una capa no
tiene ningn contenido, la altura que toma es cero y por tanto en lugar de ser un rectngulo se
queda como una lnea.
Pero... la capa #pie si que tiene contenido, ni ms ni menos las otras capas #pieuno, #piedos y
#pietres, Pues No. Como le he escrito a estas tres capas la propiedad float, las capas estn
flotando sobre la capa #pie por lo que es como si #pie no tuviera ningn contenido.
Pero dnde est entonces la capa #pie y sus bordes? Pues estn justo encima de las tres nuevas
capas. Ves esa lnea negra fina que va por la parte de arriba de las tres capas? Pues esa lnea es la
capa #pie. Como no tiene ningn contenido dentro, su altura es 1px y por eso tiene forma de
lnea. Te sealo la capa #pie en el dibujo para que lo veas ms claro:

Esa lnea negra rodeada de rojo es todo lo que nos queda de la capa #pie. Las otras tres capas
se salen de la capa #pie, pues como son flotantes... quedan justo debajo, pero fuera de #pie.
Entiendes ahora por qu no vemos los bordes? Pues ya sabes, "Siempre que pongas una capa en
tu web has de colocarle algo de contenido, por ejemplo un punto, una letra, una palabra, una
imgen o una capa siempre que no tenga un float".
Pero si no te interesa colocarle nada que no sea una capa con float an nos queda una opcin y
es definirle nosotros la altura. Y eso es lo que vamos a hacer.
Ve a la hoja de estilos estilo-general.css y define una altura de, por ejemplo, 65px a la capa
#pie. Ms tarde podremos retocar esa cantidad para amoldarla a nuestro gusto. Quedara as la
capa #pie (Recuerda que siempre escribo en negrita los cdigos que incluyo o modifico):

#pie { background-color: white ;

border-left:

black 1px solid ;

border-right: black 1px solid ;

76

border-top:

black 1px solid ;

height: 65px ;
}
Haciendo vista previa vemos que hemos conseguido esto:

Las tres capas #pieuno, #piedos y #pietres ahora parecen estar dentro, aunque realmente
estn "flotando dentro". Siguen sin ser contenido de la capa #pie, pero al darle altura ocupa el
espacio que necesitbamos y queda pintado el borde como queramos. Parece un poco complicado,
pero en realidad son solo unos pocos trucos los que necesitamos conocer.
Y por qu las tres capas de dentro no ocupan esa misma altura? Pues porque si no le indicamos
la altura que queremos que tenga, ocuparn solo el espacio necesario para contener lo que tengan
dentro, en este caso las palabras "pie uno", "pie dos" y "pie tres".
Nosotros no vamos a darle altura a esas tres capas, pues conforme le aadamos el contenido a
cada una iran llenando todo ese lugar.

Bordes para separar las tres capas

Vamos a separar visualmente las tres capas dibujndoles un borde. La verdad es que para
separarlas solo necesitamos una sola lnea de borde entre las capas #pieuno y #piedos y otra entre
las capas #piedos y #pietres, de modo que el cdigo de esas tres capas quedara as:

#pieuno

{background-color: brown ; float:left ; width:150px ;

border-right: black 1px solid }

#piedos

{background-color: green ; float:left ; width:498px }

#pietres {background-color: red

; float:left ; width:150px ;

border-left: black 1px solid }

Con eso hemos puesto un borde por la derecha de la capa #pieuno y otra por la izquierda de la
capa #pietres. Lo mismo hubiramos conseguido colocando borde a ambos lados de la capa
#piedos o cualquier otra combinacin.
El efecto conseguido es este:

Ahora que has visto de nuevo cmo colocar bordes, vamos a quitrselos pues el efecto no queda
del todo bien.

Ejercicio de prctica
Intenta hacer que tanto el fondo de #pieuno como el de #pietres sean blancos, que el fondo de
#piedos sea gris claro (silver) y elimina los bordes que dejamos antes.
El cdigo CSS de las 4 capas del pie han de quedar como te indico abajo.

#pie
solid ;

{border-left:
border-top:

black 1px solid ; border-right: black 1px

black 1px solid ; height: 65px }

#pieuno

{float:left ; width:150px }

#piedos

{float:left ; width:498px ; background-color: silver}

#pietres {float:left ; width:150px }

77

Cmo colocar los enlaces del pie

En este caso van a ser tres enlaces en la capa #pieuno y otros tres en la capa #piedos colocados
uno encima de otro. Como eso parece una lista, lo mejor es usar una lista para ello.
Dentro del cdigo Html de la plantilla.html, en la parte correspondiente a la capa #pieuno
coloca esto:

<div id="pieuno">
<ul>
<li><a href="#">Foro Ejemplo</a></li>
<li><a href="#">Contactos</a></li>
<li><a href="#">Nos Enlazan</a></li>
</ul>
</div>
Y haz lo mismo con el Html de la capa #pietres con este otro cdigo:

<div id="pietres">
<ul>
<li><a href="#">Directorio</a></li>
<li><a href="#">TopSite</a></li>
<li><a href="#">Mapa de la Web</a></li>
</ul>
</div>
Haciendo vista previa.

Ya puedes imaginarte un poco cmo debemos arreglarlo para reducir un poco el espacio que hay
entre ellos, eliminarles el punto negro de la izquierda y reducirles un poco el tamao de la letra.

Cmo eliminar el punto negro a las listas

Basta con poner list-style:none en el lugar adecuado de la hoja de estilos estilo-general.css,
pero veamos qu posibilidades tenemos.
La primera puede ser incluir ese cdigo dentro de la primera lnea de la hoja de estilos, aquella
que comienza con un asterisco *. Como recordars el asterisco representa a todos los elementos
por lo que si escribimos ese cdigo dentro de sus corchetes estaremos diciendo que todos los
elementos de la web han de aparecer sin ese punto.
Lo bueno de esta opcin es que con solo eso ya no tenemos que preocuparnos ms en los
dichosos puntos. Lo malo? Que si alguna vez queremos hacer una lista con sus puntos, por ejemplo
alguna vez en el contenido de la web, vamos a encontrarnos con que el punto no aparece. As que
desechamos esta opcin.
La segunda opcin es poner ese cdigo dentro de las propiedades de las capas #pieuno li y
#pietres li.
La tercera opcin es sencilla tambin, y es colocar ese cdigo en una nueva lnea que indique
que todas las listas de dentro de la capa #pie han de salir sin esos puntos.
Esa tercera opcin se consigue con esta nueva lnea, que vamos a colocar por seguir un orden
justo despus de la lnea de la capa #pie.

.............

78

#pie
solid ;

{border-left:
border-top:

black 1px solid ; border-right: black 1px

black 1px solid ; height: 65px }

#pie li

{list-style: none }

#pieuno

{float:left ; width:150px }

.............
Y papeleta solucionada.

Cmo ponerle el tamao de letra algo menor a esas listas

Para definir el tamao de letra se usaba font-size, asi que en esa misma linea que hemos
creado indicamos un tamao de 12px de este modo:

#pie li

{list-style: none ; font-size: 12px }

Si te fijas en la vista previa, vers como todos los textos del pie son ahora menores, menos el
texto de la capa #piedos. Esto es lgico, pues el texto "pie dos" no pertenece a un elemento de
lista (li) y por tanto el estilo definido no le afecta para nada.

Aminorar la distancia de separacin entre los elementos de las

listas
Pues aunque en la hoja de estilo le habiamos indicado al navegador que pusiera todos los
margenes a cero (con la famosa lnea del asterisco) ahora nos encontramos con un margen en esa
lista y adems bastante grande. Vamos a poner todo el cdigo html de la lista en la misma lnea,
ha de quedar as:

<div id="pieuno">
<ul>
<li><a href="#">Foro Ejemplo</a></li><li><a
href="#">Contactos</a></li><li>....
</ul>
</div>
Y lo mismo para la otra lista, la de la capa #pietres.

<div id="pietres">
<ul>
<li><a href="#">Directorio</a></li><li><a
href="#">TopSite</a></li><li><a......
</ul>
</div>
An puedes disminuir algo ms el espaciado entre los enlaces de esas capas. Sera aadiendo la
propiedad font-size:12px a la lnea de definicin de la capa #pieuno. Si en lugar de 12px
disminuyes ese valor vers como el tamao del texto no varia (pues ese tamao est definido en la
capa #pie li) pero s decrece el espacio entre los tres enlaces. Pero repito, eso no lo hacemos en
este ejemplo.
Con esto queda por terminado por el momento el pie de pgina. As que quita ya el color gris
claro (silver) que habamos puesto a la linea de la capa #piedos (elimnale el ; background-color:
silver), guarda la hoja de estilo y haz vista previa para ver cmo ha quedado.

Definir enlaces de distintos tipos

Ahora como tener varios enlaces con aspectos distintos?, lo conseguimos gracias a la hoja de
estilos.

79

Las lneas de estilo-general.css que por el momento estn afectando a los estilos son las
siguientes:

{text-indent:0px ; margin:0px ; padding:0px ; border:0px }

{color: brown ; text-decoration:none ; display: block }

a:link

{}

a:visited {}
a:hover
silver}

{color:red ; text-decoration:underline ; background-color:

a:active

{}

Y por qu incluyo la lnea del asterisco *?, porque esa lnea, al llevar asterisco afecta a todos los
elementos de la web.
La a, eso nos da un tipo de enlace general, para todos los enlaces de la web. Tendrn por tanto
margenes nulos, nada de indentado, sin bordes, de color marrn todos, etc. Vamos a ver la forma
de crear una nueva clase de enlace con otras propiedades sin que por ello se pierda el tipo ya
definido.

Una nueva clase de enlaces

Anteriomente hemos dicho que los estilos para elementos que solo aparecen una sola vez en una
pgina web concreta los definiriamos con la almohadilla # antes de su nombre. Pero como este
nuevo estilo de enlace si puede que se repita para varios elementos dentro de una pgina, lo
definimos del otro modo, con un punto en la hoja de estilo y llamndolos con class="loquesea" en
lugar de con id="loquesea" en el html de la pgina.
Para definir una clase de enlace nueva, primero escogemos un nombre. Como siempre, todo en
minsculas, sin espacios ni smbolos raros ni empezando con un nmero. Le pondremos el nombre
.enlaceuno y lo escribimos as en estilo-general.css, justo al final (no escribas este cdigo an
en tu hoja de estilos):

a.enlaceuno

{}

a.enlaceuno:link

{}

a.enlaceuno:visited {}
a.enlaceuno:hover

{}

a.enlaceuno:active

{}

Los enlaces definidos en las otras lneas que ya tenamos actuan sobre todos los enlaces, pero
como estos nuevos estn colocados despus, sern respetados para aquellos enlaces donde
indiquemos que son de la clase .enlaceuno

Y cmo se indica a un enlace que ha de mostrarse segn lo definido

en la clase "enlaceuno"?
Un enlace normal tiene esta forma:

<a href="#">Soy un enlace normal</a>

Este enlace tomar la forma que tengamos definida en la hoja de estilo estilo-general.css en la
parte general (la antigua). Si ahora quiero que tome otras propiedades (color, tamao,
subrayado...) tengo que indicar en esa lnea de Html que es de la clase .enlaceuno y se hace
aadiendo esto:

<a class="enlaceuno" href="#">Ahora soy un enlace de la clase

enlaceuno</a>
Cuando alguien visita tu web el navegador primero mira todo el html, ve que existe un enlace y
ve que hay hoja de estilo en el Head as que empieza a leerla por el principio. Ve la primera lnea,
la del asterisco y le da margenes cero, le quita los bordes y el indentado. Sigue leyendo estilogeneral.css y ve que primero se han definido una serie de propiedades para todos los enlaces y se
los da (los antiguos) pero al seguir leyendo ve que est definido en esa misma hoja de estilo una
nueva clase, la clase enlaceuno, de modo que aade esas nuevas propiedades a las propiedades
antiguas. Si alguna est repetida dos veces, toma la nueva por buena y elimina la antigua.

80

Convirtiendo enlaces a la nueva clase

Vamos a darle la clase .enlaceuno a todos los enlaces del pie de pgina. Un modo es colocando
el cdigo class="enlaceuno" a cada una de las lneas Html de los enlaces del pie, un poco
trabajoso, verdad? Sera as (no lo hagas an):

<div id="pieuno">
<ul>
<li><a class="enlaceuno" href="#">Foro Ejemplo</a></li><li><a
class="enlaceuno" href="#">Contactos
</a></li><li><a class="enlaceuno" href="#">Nos Enlazan</a></li>
</ul>
</div>
y lo mismo para los enlaces de la capa #pietres. Ahora que has aprendido a definir una clase de
enlace y a aplicarlo, te enseo otro modo ms fcil y rpido.

Aplicando una clase de estilos solo a los enlaces de una

determinada capa
Se trata de definir en la hoja de estilos que todos los enlaces que pertenezcan a una capa
determinada deban seguir esos estilos. Con esto nos ahorramos escribir nada en el cdigo Html de
la plantilla.html, vers.
Abre estilo-general.css y aade (sin eliminar el antiguo cdigo de los enlaces) esto, justo al
final:

..........
#pie a

{color: red; text-decoration:none ; display: block }

#pie a:link

{}

#pie a:visited {}
#pie a:hover
{color:red ; text-decoration:underline ; backgroundcolor: yellow }
#pie a:active

{color:blue}

Si guardas la hoja de estilo y haces vista previa ahora a la plantilla, vers como todos los
enlaces del pi de pgina han tomado las nuevas propiedades sin necesidad de tocar para nada el
cdigo Html de la plantilla.html.
Ahora cmbialas por estas otras.

#pie a

{color: blue; text-decoration:none ; display: block }

#pie a:link

{}

#pie a:visited {}
#pie a:hover
{color:black ; text-decoration:underline ; backgroundcolor: white }
#pie a:active

{color:black}

Ahora se ven un poco mejor.

Eliminar el fondo del enlace del logotipo

Por qu aparece? Pues simplemente porque al tener el logotipo un enlace hacia el index.html
se convierte la imagen en un enlace adoptando los estilos definidos para los enlaces en la Hoja de
Estilos.
Si aadimos algo similar a lo anterior pero para todos los enlaces de la capa #logotipo podremos
conseguir eliminar ese fondo gris. Qu propiedades le pondras para evitar eso? eso se consigue
colocndole un fondo blanco cuando el ratn se situe sobre el logotipo ( :hover), as que puedo
colocar esto al final de la hoja de estilo:

81

#logotipo a

{}

#logotipo a:link

{}

#logotipo a:visited {}
#logotipo a:hover

{background-color: white }

#logotipo a:active

{}

Ahora se ve el logotipo sin esa sombra gris. Ya sabes algo ms de los enlaces.

Cmo evitar que aparezcan mal las palabras con acentos

Segn en qu servidor alojemos nuestra bonita pgina, veremos o no que las palabras
acentuadas aparecen mal escritas. Y en lugar del acento aparece un smbolo raro, podemos
arreglarlo rpidamente.

Pero por qu salen mal escritos los acentos?

Es por que los navegadores interpretan el cdigo Html de muy distintas formas segn piense que
la web est escrita en un idioma o en otro. Distingue cada idioma por un tipo de "codificacin". Lo
que vamos a hacer nosotros ahora mismo es poner en la cabecera de TODAS nuestras pginas una
lnea que indica al navegador la codificacin que debe interpretar. Esta codificacin sabe de
acentos, por lo que las palabras acentuadas aparecern correctamente sin ms.
La lnea a insertar dentro de la cabecera de todas las pginas de la web (por el momento solo
tenemos la plantilla, pero acurdate de ponerlo en todas las dems tambin) es la siguiente:

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

No hay mucho que saber de esta lnea. Es una de esas lneas que llaman Metatags que no
muestran nada en la web, nada visible, sino que indican al navegador cmo interpretar el cdigo
de dentro del Body. Concretamente indica que el contenido del Body es cdigo Html y que la
codificacin es del tipo iso-8895-1, que corresponde a la codificacin europea (que entiende de
acentos, vamos). Ponla por ejemplo justo debajo de la lnea <head>.
Despus de insertar esa lnea, guarda la pgina, la subes al servidor y ve a verla con el
navegador.
Ahora en las dos siguientes lecciones os enseo un modo de ahorra tiempo al generar el resto de
pginas de la web. Tambin os enseo a poner enlaces de unas a otras. Ahora s que conseguiremos
una pgina completa.

QUINTA LECCION

Las partes comunes de nuestra pgina web

Existen varios modos de ahorranos tiempo y trabajo cuando se realizan cambios en partes de una
web que son idnticas en varias pginas.
Cuando me refiero a idnticas quiero decir iguales. Si hay alguna ligera diferencia este truco ya
no nos sirve. Para que veas un ejemplo rpido te puedo adelantar que la siguiente parte de cdigo
es comn a todas las pginas de nuestra web de ejemplo:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<HTML>
<head>
En estas tres lneas no hay ningn valor o parmetros que tengamos que cambiar de una pgina
a otra, por lo que es una parte bien comn.
En cambio, esta otra lnea no es comn en todas las pginas de la web:

<title>Este es el ttulo de la pgina de la web</title>

Pues el ttulo ser normalmente distinto de una pgina a otra. Vemos que partes comunes hay
varias, pero nosotros vamos a prestar especial atencin a unas partes comunes en concreto, las
que ms probabilidad tienen de ser modificadas por nosotros en el futuro, como por ejemplo, la
cabecera, el men lateral de la izquierda y el pie de pgina. Os voy a mostrar en las siguientes
pginas estas tres partes, para que veais su cdigo correspondiente y os familiariceis con ellas.
Normalmente retocaremos algo de all y no esta de ms conocerlas bien.

82

La cabecera de la pgina web de ejemplo

La cabecera es una parte idntica a todas las pginas de la web y en ocasiones nos d por
modificarla. Bien para cambiar el logotipo, ponerle unas curvitas en las esquinas, variar el fondo o
quin sabe, para aadirle un bonito banner de publicidad. Entendemos que nuestra cabecera est
formada por la parte superior de la web hasta el men horizontal, incluido este. Aunque an se
podra dividir en la parte con fondo blanco y el men horizontal con fondo gris.
Ese men con fondo gris tambin ser comn a todas las pginas de la web y desde l se podr
acceder a las distintas secciones en las que dividamos los contenidos. Por ejemplo, para la pgina
de un grupo de msica estas secciones podran ser Portada, Historia, Discografa, etc, etc. En
breve trabajaremos sobre ese men horizontal.
La cabecera, incluido el men horizontal es por tanto todo esto:

El cdigo de la cabecera, tal cul est ahora en el ejemplo que llevamos hecho es este:

<!-- INICIO CODIGO DE CABECERA - NO TOCAR -->

<div id="curva-superior"></div>
<div id="cabecera">
<div id="logotipo">
<a href="index.html">
<img src="objetos/logotipo.gif" width="270" height="80"
alt="Haz clic aqu para volver a la pgina de inicio">
</a>
</div>
<div id="publicidad">Bienvenidos a mi Web</div>
</div>
<div id="navegacion">
<ul>
<li><a href="#">Seccin 1</a></li>
<li><a href="#">Seccin 2</a></li>
<li><a href="#">Seccin 3</a></li>
</ul>
</div>
<!-- FIN DE CODIGO DE CABECERA -->
Como ves, he aadido dos lneas para encerrar a este cacho de cdigo. Esto es para que si
alguna vez le metemos mano a la pgina, recordemos que lo que hay dentro es comn a todas las
pginas de la web, y por tanto no debemos tocar nada de su interior a menos que sea siguiendo las
instrucciones que os cuento en breve.
No te preocupes por esas lneas de comentario, te las explico ahora despus.

El men lateral izquierdo

Es igual en todas las pginas de la web, o al menos, en todas las pginas de una misma seccin.
En los casos en los que no sea comn a toda la web sino solo a parte de la web, tambin nos vale

83

este truco que veremos a continuacin, tambin ahorraremos mucho tiempo, as que lo tendremos
en cuenta como elemento comn. El men lateral izquierdo hoy por hoy es este:

Desde el men de fondo gris accedemos a las secciones de la web y dentro de cada seccin,
desde este men accederemos a las subsecciones. Por ejemplo, para una supuesta web dedicada a
un grupo de msica, la seccin "Conciertos" podra dividirse en las subsecciones "Conciertos
Anteriores" y "Prximos Conciertos".
Y su cdigo Html es el siguiente. Como ves, le aado una lnea al principio y otra al final para
indicar donde empieza y termina, como antes:

<!-- INICIO CODIGO DE MENU LATERAL IZQUIERDO - NO TOCAR -->

<div id="menu">
<h1>Ttulo de Seccin 1</h1>
<ul><li><a href="#">Enlace 1</a></li><li><a href="#">Enlace
2</a></li><li><a href="#">Enlace 3....
</div>
<!-- FIN DE CODIGO DE MENU LATERAL IZQUIERDO -->
Como creo que ya te he comentado y como puedes ver en el cdigo, he colocado todas las
lneas <li> seguidas unas de otras, para evitar el fallo aquel que daba el Internet Explorer cuando
las colocbamos separadas, una en cada rengln.

El pie de pgina
Lo mismo para el pie de pgina. Es algo comn a todas las pginas de la web y en ocasiones
quizs queramos modificarlo para aadir enlaces, publicidad, etc.
La imagen del pi es esta:

Y su cdigo, con las lneas de comentario ya colocadas, es este:

<!-- INICIO CODIGO PIE DE PAGINA - NO TOCAR -->

<div id="pie">
<div id="pieuno">
<ul><li><a href="#">Foro Ejemploz/a></li><li><a
href="#">Contactos</a></li><li><a href="#">Nos..
</div>
<div id="piedos">pie dos</div>
<div id="pietres">
<ul><li><a href="#">Directorio</a></li><li><a
href="#">TopSite</a></li><li><a href="#">Mapa de..
</div>
</div>
<!-- FIN CODIGO PIE DE PAGINA -->

84

Los comentarios dentro del cdigo HTML de la pgina web

Se trata de poder aadir las notas para que nos sirva de recordatorio de qu parte de cdigo es,
por qu lo pusimos. Lo que se hace es encerrar el comentario entre unos signos especiales. As,
cuando el navegador se pone a leer el cdigo Html de nuestra pgina, al llegar al signo de inicio de
comentario simplemente pasa de nosotros y no hace ningn caso a lo que hay escrito hasta que lea
el signo de cierre de comentario.
Como habrs visto en la pgina anterior, el signo de inicio de comentario dentro de cdigo Html
es este:

<!-El signo que indica final de comentario es este otro:

-->
De modo que si queremos poner una tonteria dentro de nuestro cdigo Html bastara con poner
esta lnea:

<!-- Tonteria -->

Si olvidas poner el signo de cierre es muy posible que algunos navegadores dejen de leer todo lo
que queda de cdigo Html, as que recuerda colocarlo.
Si la tonteria que queremos poner es muy larga y ocupa varias lneas bastara con poner el signo
al principio de la primera lnea y el de cierre al final de la ltima lnea. Vamos, que no es
necesario abrir y cerrar cada una de ellas. Algo as sera:

<!-- Esto es una tonteria

de varias lineas, pero no tengo ganas de poner signos
de apertura y cierre de comentarios
en cada una de ellas, qu pasa...
-->
Sirve tambin para anular temporalmente alguna lnea de cdigo. Por ejemplo, imagina que
tienes un enlace en tu men lateral de la izquierda que vas a dejar fuera de uso, que no quieres
que aparezca en el men por que andas retocandolo. Bastara con encerrarlo entre los signos de
inicio y fin de comentario y el navegador no lo leera. Ms tarde, basta eliminar esos signos para
que vuelva a aparecerle a los visitantes. A veces es mejor que eliminar la lnea, pues quizs al da
siguiente no recuerdas bien lo que tenas puesto.
Por ltimo tampoco conviene abusar de los comentarios, pues ocupan algo de memoria y el
archivo de la web tardara un poco ms en cargarse si hubieran muchos o fueran muy largos.
La plantilla por tanto queda as. Sin cambios aparentes pues lo que hemos puesto son
comentarios, pero puedes ver las nuevas lneas de comentario mirando su cdigo Html.

85

Creando el resto de pginas de la web

Ahora que tenemos claras cuales sern las partes comunes de la web, podemos sin miedo
empezar a crear el resto de pginas de nuestra web de ejemplo. Esto lo podemos hacer a partir de
la plantilla, que para eso est. Y cmo hacemos esto? Pues como siempre te he dicho, antes de
actuar debemos tener claro lo que queremos alcanzar. Antes de crear y crear pginas sin ton ni son
tenemos que pensar cuntas secciones y subsecciones queremos tener en nuestra web. Ms tarde
podremos ir aadiendo ms secciones y subsecciones, o incluso eliminar alguna, pero partiremos
de una base ya pensada.
De modo que el siguiente paso es pensar en qu secciones y subsecciones vamos a tener en
nuestra nueva web. Lo mejor es coger lpiz y papel y empezar a elaborar un esquema de la web.

Dividir los contenidos de la web en secciones y subsecciones

Imagina que la web de nuestro ejemplo la vamos a dedicar a un grupo de msica que tenemos o
que nos gusta. En cuntas secciones principales se podra dividir? Quizs en estas:

Pgina de presentacin o portada. En esta explicamos el estilo de msica del grupo,

y comentamos las partes ms importantes de la web. Debera ser breve para que el
visitante sepa de un solo vistazo qu puede encontrar en la web. Esta seccin es breve
y rpida as que no la dividimos en subsecciones. Recuerda, es la primera pgina que
ve el visitante cuando acceder a la web, por tanto corresponde con la index.html

Historia del grupo. Aqu se puede comentar cmo, dnde y cundo surgi la idea de
la formacin del grupo, qu msicos han formado parte de la banda a lo largo de los
aos, cul es la formacin actual, y cosas as. Esta seccin se podra dividir en algunas
subsecciones, por ejemplo, Cmo surge la banda, Miembros que han pasado por ella,
Formacin actual e incluso un Album de fotos!

Discografa. Lo tpico, una seccin en la que se muestra cada album o CD publicado.

Esta seccin se puede dividir por CDs publicados, por ejemplo en las subsecciones
Maquetas, CD1, CD2, CD3.

Conciertos. Aqu se informa al visitante de cules son los prximos conciertos de la

banda y se muestran tambin los conciertos celebrados hasta el momento. Se puede
dividir por ejemplo en las subsecciones Conciertos Anteriores y Prximos Conciertos.

Foro. Siempre es buena idea saber la opinin de los visitantes, tanto para mejorar la
propia web como para saber qu piensan del grupo de msica. Nos reservamos una
seccin para en el futuro incorporar un foro a la web, si puede ser, integrado en la
misma estructura de la pgina. Esta seccin en principio no tendra subsecciones.

Descargas. En este otro apartado se pueden colocar cosas que los fans se pueden
bajar como curiosidad. Por ejemplo, posters del grupo, imgenes, las mismas
canciones, letras, videos, etc, etc. Esta seccin se puede dividir en las subsecciones,
Canciones MP3, Letras, Posters, Imgenes y Videos.

Souvenirs. Quizs se piense en vender camisetas, gorras o CDs del grupo. Esta puede
ser otra seccin que se puede dividir por ejemplo en Cmo Comprar, Camisetas y CDs.

No hay que preocuparse demasiado si ms tarde se nos ocurren otras secciones, pues con el
truco que te he comentado pginas atrs y que te explico ms adelante ser muy fcil aadir,
eliminar o modificar las secciones. Pero s est bien tener una idea ms o menos clara al principio
sobre la que partir.

86

Los ttulos de las secciones (Portada, Historia, Discografa, etc) los colocaremos en el men
horizontal que hay bajo la cabecera de las pginas y las subsecciones las colocaremos en el men
lateral izquierdo. As ser muy fcil para el visitante ir directamente a donde desea llegar.
Te dejo el esquema de secciones y subsecciones que vamos a usar en la web de ejemplo para
que lo veas ms claro. Este debera ser el resultado al que deberas llegar tras tomar papel y lapiz
y pensar en los apartados de la web en la que ests trabajando. Es el esquema de la derecha.
Cuando hagas tu propia web, recuerda hacerte un esquema parecido y gurdalo como si fuera
un mapa de tu web (vale escrito a mano con papel y lapiz en un papel) para tener una vista rpida
de dnde est cada parte. Te ser muy util a la hora de escribir rutas, ver dnde encajar un
apartado nuevo que quieres aadir, etc.
Ahora que tenemos clara la estructura inicial de la web, vamos a rellenar en la plantilla.html
todas estas secciones y comenzamos a crear las dems pginas y a enlazarlas entre s.

Nombrando los archivos de las secciones de la web de ejemplo

Vamos primero a decidir qu enlaces pondremos en el men horizontal de secciones que hemos
comentado antes. Como vers, las secciones son Portada, Historia, Discografa, Conciertos,
Descargas, Foro y Souvenirs. Pues basta con aadir los enlaces correspondientes dentro de la capa
"navegacion" en el cdigo de la plantilla.html cuyo cdigo era este hasta ahora:

87

<div id="navegacion">
<ul>
<li><a href="#">Seccin 1</a></li>
<li><a href="#">Seccin 2</a></li>
<li><a href="#">Seccin 3</a></li>
</ul>
</div>
Tenemos que aadir algunas lneas <li> ms y tenemos que aadir la ruta de cada una de ellas.
Recuerda que la ruta hay que ponerla en lugar de la almohadilla (#). Por ahora las pginas de las
secciones que queremos poner no existen, pero podemos decidir ya cmo se va a llamar cada
archivo de cada una de estas pginas y as podemos escribir la ruta ya en esos enlaces. Lo mejor a
la hora de decidir el nombre para un archivo Html es nombrarlo con el nombre de la seccin o
subseccin y as ser muy fcil saber qu contiene.
Recuerda estas normas bsicas e importantsimas a la hora de nombrar archivos tanto html
como de imgenes, carpetas, archivos de msica o cualquier otra cosa:

Usar solo minsculas.

Solo usar letras y nmeros, nunca smbolos raros.

Nunca empezar el nombre de un archivo con un nmero (1nombre.html).

No dejar espacios en blanco, como mucho guiones medios "-" (no bajos "_").

Nunca poner acentos en los nombres de los archivos.

Ponerle un nombre que refleje el contenido, seccin o subseccin de la web. Nunca

cosas como pagina1.html sino nombres que tengan sentido.

Teniendo todo esto en cuenta, el nombre de los archivos de las pginas de estas secciones
deberan ser estos:

portada.html (pero como corresponde a la pgina principal, sera en realidad

index.html)

historia.html

discografia.html

conciertos.html

descargas.html

foro.html

souvenirs.html

Una carpeta para cada seccin

Si tuvieramos todos los archivos de la web guardados en la misma carpeta, a la larga nos sera
muy complicado encontrar un archivo determinado, de modo que me parece una buena idea crear
una carpeta para cada seccin. Cada una de esas carpetas tendra el nombre de la seccin
(recordando las normas anteriores!). Dentro de cada una de ellas colocaramos tanto las pginas de
esa seccin (las subsecciones) como las imgenes, archivos de msica, etc que tenga, por ejemplo
en una carpeta llamada "objetos".

88

As que empezemos creando una carpeta para cada una de estas secciones, con los nombres
historia, discografa, concierto, descargas, foro y souvenirs.

Creando las carpetas

Vamos a recordar cmo se crean carpetas en el sitio web con el Html Kit.
Abre para empezar el Html Kit y haz que se muestre la ventanita de WorkSpace. Ya sabes cmo,
clic en "Ver" del men de arriba del Html Kit, y clic en "WorkSpace" dentro del desplegable que se
abre. Haz clic con el botn derecho del ratn sobre la carpeta amarilla web-ejemplo-cctw-local y
en este otro desplegable que se abre elige "New" y "Create New Folder", como en la imagen de
aqu abajo.

Se abre una ventana en la que pondremos el nombre de la carpeta que queremos crear.
Recuerda que la seccin portada dijimos que no iba a tener carpeta, por lo que la primera que
crearemos ser "historia". Recuerda, sin extensin ninguna, no es un archivo, es una carpeta:

Podremos ver como aparece esa carpeta en la ventana de WorkSpace:

89

Repite la misma operacin con el resto de carpetas, discografia, conciertos, descargas, foro y
souvenirs.

Las carpetas "objetos"

Adems, hemos dicho que dentro de cada una de estas carpetas que acabamos de crear ibamos
a crear otra carpeta llamada objetos, en la que guardaramos los archivos de imgenes, sonido etc
que pertenecieran a esa seccin, as que adelante. En esta ocasin como la carpeta que queremos
crear est dentro de cada una de las creadas recientemente, tendremos que hacer clic con el
botn derecho del ratn sobre el nombre de la carpeta en la que la queramos crear. Me explico
con un ejemplo. Para crear la carpeta objetos dentro de la carpeta historia, haz clic con el botn
derecho del ratn sobre la carpeta historia, pulsa sobre New + Create New Folder y ponle el
nombre "objetos" cuando te lo pregunte. Al final querdara as en la ventana de WorkSpace:

La nica seccin que no va a estar dentro de ninguna carpeta ser la portada, pues como va
a ser la misma pgina principal (index.html) no podemos colocarla dentro de ninguna carpeta,
debe ir directamente en la raiz del servidor y adems se debe llamar index.html, es decir, el

90

archivo de la portada no se llamar portada.html sino index.html y no estar dentro de ninguna

carpeta. [Ms informacin sobre qu es la raiz del servidor aqu]
Los archivos de la portada tambin estarn en una carpeta objetos, que es la que ya tenamos.
Es la que he sealado en azul en la imagen de arriba y que ya contiene algunos archivos, los de los
bordes del men, etc.

Creando las pginas de las secciones

Vamos a crear las pginas de cada una de las secciones ahora mismo.
Abre el Html-Kit y abre la plantilla.html. De esa plantilla vamos a aprovechar todo. La
copiaremos en todas las carpetas y as en lugar de empezar desde cero con cada una solo
tendremos que aadir los contenidos. Pero antes vamos a retocarla ligeramente, eliminando lo que
no nos hace falta y colocando unas equis en los lugares donde deberiamos rellenar algo, para ms
tarde acordarnos. Vamos a ver qu cosas son las que debemos rellenar para personalizar cada una
de las pginas que vamos a crear.
Abre la plantilla y mira su cdigo Html. En la quinta lnea vemos que se define el ttulo de esa
pgina. Ahora mismo pone "Page Title" cuando en realidad debera poner el ttulo de esa pgina
concreta. Vamos a borrar "Page Title" y colocaremos unas pocas equis, y as recordaremos que ese
es un hueco que tendremos que rellenar en todas las pginas que vamos a crear. Debe quedar as:

Por otro lado, si miras ms abajo en ese mismo cdigo Html de la plantilla, ms o menos en las
lneas 31, 32, 33 y 34 (estos nmeros se ven en la parte izquierda de cada lnea, lo ves en la
imagen de aqu arriba?) tenemos los comentarios o textos que aparecen en la plantilla de ejemplo.
Como esos textos no deben aparecer en las pginas de las secciones (que ya tendrn sus propios
textos) vamos a borrarlos y poner de nuevo unas equis en su lugar para acordarnos que es ah
donde podemos escribir lo que queremos que salga en las nuevas pginas.
Hasta hace un minuto esa parte de cdigo Html era as:

Y ahora debera quedar as:

91

Ahora ya sabes que cuando copiemos la plantilla en cada una de las carpetas de las secciones,
solo tenemos que rellenar las partes con XXXXX para personalizar cada pgina, lo veremos ms
adelante. El resto de la plantilla nos vale tal y como est, por ahora. Guarda la plantilla y
seguimos.
Una observacin. Si haces vista previa a la plantilla ahora, vers que sale algo (bastante)
deformada. Algo as:

Como apenas tenemos dos frases (las de las equis) la pgina se queda tan cortita que se
desmorona un poco, pero en cuanto le aadamos algo de contenido todo se arregla solo, la pgina
vuelve a recuperar su forma. Si lo prefieres, escribe muchas ms equis dejando algunos espacios
entre ellas, hasta tener las suficientes como para llenar un espacio considerable de la web. De ese
modo no sale esa deformacin.

Una nueva pgina para la seccin historia

Para crear la pgina historia.html que guardaremos en la carpeta historia, haremos lo siguiente.
Abre el Html Kit, abre la plantilla.html y ahora la guardamos con otro nombre y en otro lugar. El
otro nombre ser historia.html y el lugar donde la vamos a guardar es dentro de la carpeta
historia.
Para hacer eso, en el Html Kit y con la plantilla abierta, pulsa en el men de arriba donde pone
Archivo y del desplegable que se abre, pulsa en Salvar Como:

92

Se abre entonces una ventana desde la que tienes que elegir la carpeta en la quieres guardar la
copia. En este caso ser la carpeta historia. Adems, antes de guardar o salvar (es lo mismo) tienes
que ponerle un nombre al archivo, pues ya no se va a llamar plantilla sino historia.html

Ves?

93

En este caso, al tratarse de una pgina web lo que guardamos, no olvides ponerle la extensin
correspondiente, es decir, el nombre ms un punto y las letras html.
Pues ya tenemos lista la pgina historia. La pgina que se te queda abierta ahora en el Html Kit
ya no es plantilla.html sino historia.html pero como ambas son idnticas, podemos usar
historia.html que ya est abierta para hacer lo mismo con el resto de pginas de las dems
secciones. De modo que, de nuevo, pulsa sobre Archivo + Salvar Como, y ahora dentro de la
carpeta discografia guarda una copia llamada discografia.html
Cuando hagas eso, repites creando otra llamada conciertos.html dentro de la carpeta
conciertos, despus dentro de la carpeta descargas otra pgina llamada descargas.html y lo mismo
para foro y souvenirs. Quizs te parezca un poco pesado, pero imagina si tuvieras que hacerlas
desde cero.

Qu les pasa a los estilos CSS de estas pginas de seccin?

Parece como si los estilos CSS que tenemos definidos en la hoja de estilo no funcionaran.

94

En realidad lo que ocurre es que las pginas no encuentran la hoja de estilos. Vamos a ver cul
es la ruta que tienen en el enlace de la cabecera para descubrir qu es lo que est mal, vale? [ Ms
informacin sobre qu son las rutas aqu]
Si miramos el cdigo de, por ejemplo, la pgina historia.html vemos que dentro de la cabecera
(head) el enlace a la hoja de estilos es este:

Bien, vemos que la ruta (relativa) de la hoja de estilos es "estilo-general.css". Esto significa que
el navegador cuando visita la pgina historia.html debe buscar la hoja de estilos en la misma
carpeta en la que est historia.html y ese no es el caso. Para arreglarlo tenemos dos opciones.
La primera de ellas es colocar una copia de estilo-general.css en cada una de las carpetas de
seccin que tenemos. Esto tiene varios inconvenientes. Tendramos unos cuantos archivos
repetidos. Si un dia decidimos hacer un cambio en la hoja de estilos tendramos que hacer lo
mismo en la el resto de carpetas y eso es un rollo.
La segunda opcin es retocar la ruta para que busque la hoja de estilos donde est ahora, es
decir, fuera de la carpeta historia, en la raiz del servidor. As tendramos una sola hoja de estilos
para todas las pginas de todas las secciones. Esta opcin parece mejor, pues si alguna vez
queremos hacer un cambio basta con retocar una sola hoja de estilo. De modo que vamos a retocar
la ruta.

95

Y qu ruta tenemos que poner? Si el navegador est visitando la pgina historia.html, para
acceder a estilo-general.css tendr primero que salir de la carpeta historia y despus abrir estilogeneral.css Te acuerdas como se escriba eso en Html? Para salir de una carpeta se escribian en la
ruta dos puntos y despus una contrabarra (../). Y para abrir un archivo se escribia su nombre. As
que la ruta que debemos colocar ser:

<link rel="stylesheet" href="../estilo-general.css" type="text/css"

media="all">
Y qu ruta habr que poner por ejemplo en la nueva pgina discografia.html? Pues si te fijas,
sera la misma que la de historia.html pues hace falta lo mismo, salir de su carpeta (../) y abrir la
hoja de estilo.

SEXTA LECCION
Buscar y Reemplazar
Para arreglar las rutas que vimos antes de un solo plumazo podemos recurrir a un software que
trabaje por nosotros. No existen muchos programas que hagan lo que necesitamos, yo solo conozco
un par de ellos. El primero es el Dreamweaver pero es de pago y cuesta una pasta y el segundo
gracias a Dios es gratuito y se llama EditPad Lite. Este es el que vamos a utilizar, no solo para
retocar esta ruta que tenemos mal, sino para miles de cosas ms adelante. Por el momento vamos
a descargarlo a nuestro ordenador, lo instalamos y aprovechamos el problemilla de las rutas para
aprender a usarlo. Ser tu mejor aliado y un genial complemento para el Html Kit, vers.
El EditPadLite se puede descargar desde este enlace que nos lleva a la web oficial:
Descargar EditPadLite
Al hacer clic se abrir la web oficial del programa en una nueva ventana, para que puedas ir
leyendo estas instrucciones a la vez que lo descargas. El primer paso es hacer clic en la parte de
abajo del todo de esa web, donde pone Download EditPad Lite:

Como ves est en ingls, pero no te preocupes que no nos hace falta entender demasiado.
Adems quizs encuentre algn modo de traducirlo al espaol, pero vamos, que no va a ser ningn
problema, vers que no.
Al hacer clic en Download, aparece una ventana de Windows preguntndonos si queremos
guardarlo. Pulsa sobre Guardar Archivo:

Creo que una vez te coment que podas tener una carpeta en la que ir guardando todo el
software que vayamos usando, por si algn da te hace falta. Si lo hiciste puedes guardar este
programa tambin all.
Una vez que tengas el archivo de instalacin en tu PC, haz doble clic sobre l para instalarlo. La
instalacin es bien sencilla, le dices a todo que si y listo. Si tienes algn problema me lo comentas
en el foro y lo explico ms detalladamente, pero imagino que no es necesario.
Una vez instalado el programa puedes ya abrirlo para aprender a manejarlo. Lo vemos a
continuacin.

96

Poniendo en marcha el EditPad Lite

Nada ms abrir el nuevo programa, el EditPad Lite, nos aparecer una ventana de Tips. Los Tips
son consejos que te dan para que aprendas a usar el programa mejor. Siempre sale uno al iniciar el
programa. Como estn en ingls de poco nos van a servir, je je, as que desmarcamos (quitamos) la
casilla de abajo para que no vuelva a aparecer la prxima vez que abramos el programa. Despus
de desactivarla pulsa sobre Thanks!

Ahora s que vemos la ventana del EditPad Lite. Busca en el men de arriba de ese programa la
opcin Search (que significa Buscar) y dentro del desplegable escoge la opcin "Show Search Panel"
que significa mostrar el panel de bsqueda. Tambin se puede abrir pulsando a la vez las teclas de
tu teclado Ctrl + F:

Se abre entonces el panel de bsqueda del EditPad Lite, que es as:

97

En la ventanita donde pone "Search", abajo, donde yo he escrito "Codigo que queremos buscar"
podemos poner las lneas de cdigo que ya no nos valen y que queremos sustituir por otras nuevas.
As, el EditPad Lite buscar en todos los archivos que le digamos esa parte de cdigo. Si encuentra
ese trozo de cdigo que hemos colocado en esa ventana, lo que hace es sustiruirlo por el que
pongamos en la ventana de abajo.
Esto es de gran utilidad. Fjate que a partir de ahora, cada vez que queramos cambiar algo que
est en varias pginas de nuestra web solo tendremos que abrir el EditPad Lite, pegar el cdigo
que queremos sustituir arriba, el nuevo abajo. El se encarga de todo en cuestin de segundos.
Vamos a aprovechar que tenemos que corregir la ruta de la hoja de estilo en todas aquellas
pginas para hacer un ejemplo de uso de este programa. Sigue todos mis pasos y vers que fcil es.

Reparando la ruta de la hoja de estilo

Tienes abierto el EditPad Lite? Pues vamos a reparar las rutas aquellas. Ten en cuenta que este
programa va a buscar y reemplazar el cdigo que le indiquemos solo en las pginas que abramos
con l en ese momento. Es decir, si quiero hacer la "bsqueda y reemplazo" en tres pginas
concretas, tenemos que abrirlas con ese programa, dejarlas abiertas y entonces hacer eso de
buscar y reemplazar. De este modo nos aseguramos de que no se va a buscar ese cdigo en otras
pginas que no nos interesen.
Como nosotros queremos hacer la bsqueda y reemplazo en las pginas de las carpetas de las
secciones que hemos creado antes, lo primero que vamos a hacer es abrirlas con el EditPad Lite.
Cmo se hace esto? Vamos a verlo.
Primero abre el EditPad Lite. Ahora ve a File (significa archivo) que est en el men horizontal
de arriba de ese programa y escoge Open (abrir).

98

Se abre entonces una ventana como esta, desde la que debes indicar qu archivos quieres abrir.
Ve buscando una por una todas las pginas en las que queremos arreglar las rutas y las vas
abriendo, una por una. As por ejemplo se abre la pgina historia.html:

Ya has abierto todas? Recuerda, son todas estas, historia.html, discografia.html,

conciertos.html, descargas.html, foro.html y souvenirs.html. Bien, pues seguimos en la pgina
siguiente.

Rellenando datos en el EditPad Lite

Ahora, en ese mismo programa, selecciona la lnea completa de la ruta en cualquiera de esas
pginas abiertas. En la imgen de aqu abajo vers como el cdigo Html de las pginas abiertas
aparece en la ventana de arriba del todo del EditPad Lite. Es ah donde puedes seleccionar esa
lnea de cdigo.

99

Para seleccionarla ya sabes, haces clic al principio de la lnea, arrastras sin soltar el botn del
ratn hasta el final de esa lnea, sueltas (se queda todo azulado) y ahora pulsas sobre la seleccin
(lo azul) con el botn derecho del ratn y escoges Copy, tal y como puedes ver en la imagen de
abajo.
Has merendado ya? No tienes hambre? Pues yo me tomaba ahora mismo un bocata de nocilla y
me quedaba listo, je je je. Vaya, ya me has pillado otra vez escribiendo chorradas para que se
baje un poco la imagen. Jo, es que me tropezaba con el men. aqu tienes la imagen:

En esa imagen tambin puedes ver las lengetas de las pginas abiertas. Las he sealado con un
borde rojo, las ves en la parte de arriba? Solo por curiosidad. Pues ahora que tenemos el cdigo
que queremos cambiar copiado, ve a la ventana de Search y pegas lo que acabas de copiar. Para
pegar, pon el cursor del ratn sobre esa ventana (de las dos de abajo es la de arriba) y hacindo
clic con el botn derecho del ratn sobre ella escoge Paste (que significa pegar). Queda entonces
as:

Ahora, en la ventana de debajo de esa, en la que pone Replace a su izquierda, tenemos que
escribir la nueva lnea que queremos que reemplace a la anterior. Como son casi iguales, pega de
nuevo en esa ventana la que tenemos copiada y le corregimos la ruta luego a mano, pues lo dems
est bien. Tiene que quedar de esta forma:

100

Como ves, la nica diferencia entre las lneas que hemos pegado es la ruta, que abajo le hemos
aadido ../ para que salga de la carpeta. Ya estamos listos para que el EditPad Lite haga su
trabajo, pero antes hay que marcar la casilla que te he sealado con un circulo rojo, la de la
derecha. Pone "All Files" que significa que ha de buscar y reemplazar esas lneas en todos los
archivos que tiene abierto el programa. Si no se marca, solo har el trabajo en la pgina que est
activa.
Vamos a la pgina siguiente y empezamos a reemplazar. Ser pan comido!

Reemplazando cdigos con EditPad Lite

Bien, vamos all a ver que pasa. Pulsa donde pone Replace All y cruza los dedos!!! El botn de
Replace All te lo sealo en la imagen de abajo por si no lo encuentras:

101

Haz clic!. pues con tanto rollo seguro que esperabas un redoble de tambores, o fuegos
artificiales o qu se yo, pero... la verdad es que al apretar el botn ese no he sentido nada por el
cuerpo... Abr funcionado? Pues s! Si te fijas pulsando en las distintas lengetas de las pginas
abiertas en el EditPad Lite podrs ver como esa lnea ha sido reemplazada y que ahora todos esos
archivos tienen la ruta correcta! Ahora solo hace falta cerrar el EdipPad Lite pulsando sobre la X
que hay en la esquina superior derecha.
Cuando pulses sobre esa X para cerrarlo, cmo es lgico, el programa te pregunta si quieres
guardar los cambios. Te pregunta por estas cuatro opciones:

"Save This File": Esto es si quieres guardar la pgina que est activa, no las otras.
"Dont Save This File": Significa que la que est activa no quieres guardarla.
"Save All Files": Escoge esta opcin cuando quieras guardarlas todas. Esta es la opcin que
necesitamos ahora nosotros. Haz clc en ella.
"Dont Save Any": Significa que no quieres guardar ningn cambio.
"Cancel Close": Es para cancelar el cerrar el programa.
Oki? As que elige "Save All Files" y ya te funcionarn los estilos en todas esas pginas.

Reparando el logotipo
Resulta que si ahora haces vista previa sobre cualquiera de las nuevas pginas creadas, como
por ejemplo sobre historia.html te dars cuenta de que ahora no se ve el logotipo que tenamos, el
de comocreartuweb de la parte superior. Adems, ya no funciona su enlace y en lugar de llevarnos
a index.html nos da un error.
Resulta que ahora las rutas del archivo del logotipo.gif y la del enlace hacia el index no son
correctas. Esto es por el mismo motivo que antes, porque son copia de la plantilla que antes no
estaba dentro de ninguna carpeta y como ahora si lo est, tenemos que reparar las rutas,
corregirlas.
Veamos rpidamente cuales son las rutas de logotipo.gif y la del enlace a index.html en la
pgina historia.html. En el cdigo Html de esa pgina vemos esto:

<div id="cabecera">
<div id="logotipo"><a href="index.html"><img
src="objetos/logotipo.gif" width="270" height="80"
alt="Haz clic aqu para volver a la pgina de inicio"></a></div>
<div id="publicidad">Bienvenidos a mi Web</div>
</div>
Como ves, el navegador cuando visite esa pgina intentar buscar un archivo llamado
logotipo.gif dentro de la carpeta objetos que hay dentro de la carpeta historia (pues es en esta
carpeta donde est la pgina que est visitando, historia.html). Pero en realidad el logotipo.gif se
encuentra en la carpeta objetos de la raiz de la web, fuera de la carpeta historia. As que, la ruta
correcta sera otra. Para llegar desde historia.html hasta el logotipo.gif es necesario, primero salir
de la carpeta historia (eso se haca con ../ ), luego entrar en la carpeta objetos (la antigua, en la
que guardamos al principio los archivos del logotipo, etc), y finalmente abrir el logotipo.gif
Por otro lado, para llegar desde cualquier pgina que haya dentro de una de las carpetas de la
web de ejemplo al index.html, es necesario salir de la carpeta. As que la ruta correcta del enlace
ser "../index.html" y no "index.html"
Por tanto las rutas correctas sern:

<div id="cabecera">
<div id="logotipo"><a href="../index.html"><img
src="../objetos/logotipo.gif" width="270" height="80"
alt="Haz clic aqu para volver a la pgina de inicio"></a></div>
<div id="publicidad">Bienvenidos a mi web</div>

102

</div>
Muy parecidas, solo cambia el aadirle los puntos y la contabarra.
Abrimos el EditPad Lite, abrimos desde l todas las pginas que tenemos dentro de carpetas (las
mismas que la vez anterior). Escribimos en la ventana de arriba (la de Search) esto:

<div id="cabecera">
<div id="logotipo"><a href="index.html"><img
src="objetos/logotipo.gif" width="270" height="80"
alt="Haz clic aqu para volver a la pgina de inicio"></a></div>
<div id="publicidad">Bienvenidos a mi web</div>
</div>
Y en la ventana de abajo esto otro:

<div id="cabecera">
<div id="logotipo"><a href="../index.html"><img
src="../objetos/logotipo.gif" width="270" height="80"
alt="Haz clic aqu para volver a la pgina de inicio"></a></div>
<div id="publicidad">Bienvenidos a mi web</div>
</div>
Le damos al botn "Replace All", cerramos el EditPad Lite, le indicamos que guarde todos los
archivos y... ya est. Todo reparado.

Personalizando un poco cada pgina de seccin

Ya tenemos lista la estructura de carpetas de la web para tenerlo todo bien ordenado. Adems
tenemos la pgina principal de cada una de las secciones. El siguiente paso sera hacer funcionar el
men horizontal (la barra de navegacin que hay bajo la cabecera, con el fondo gris) de todas
estas pginas, es decir, colocar los enlaces en ese men (un enlace para cada seccin) para que
estemos en la seccin que estemos, desde all podamos dirigirnos a cualquier otra seccin de la
web.
Como todas las pginas que tenemos ahora mismo son exctamente iguales, cuando hagamos
funcionar el men horizontal no sabremos si funciona o no, pues nos dirigir a una pgina idntica
y no vamos a observar ningn cambio. Recuerda que todas ellas son copia excta de la plantilla.
As que antes de ponernos a arreglar el men y sus enlaces vamos a personalizar un poco cada una
de las pginas de las distintas secciones.
Para ello simplemente abriremos cada una de ellas con el Html Kit y rellenaremos el titulo
(<title>) y pondremos un poco de texto en la parte del contenido principal.
Empezaremos por la pgina historia.html Abrela con el Html Kit y pone como ttulo este,
"Historia de la banda". Escribindolo entre <title> y </title>. Ahora en el ttulo del contenido,
entre <h1> y </h1> escribe esto otro: "Esta es la historia de la banda". Y para terminar, invntate
algo para poner en el prrafo que hay debajo del ttulo que acabas de retocar. Quitas las equis y te
inventas algo tal que as:
"La banda naci en 1982, cuando tras ver por la tele un concierto de Bruce Springsteen dos
chavalotes se digeron... y si aprendemos a tocar algo? Fue entonces cuando Juanito se compr su
primera batera y Pepito su primer ampli y guitarra. Tras encontrarse con Pablito y convencerle de
que le pidiera el bajo a su tio, empezaron a ensayar en el garaje de uno de ellos. Al principio
intentaban tocar sus canciones preferidas, las que sonaban en esos momentos por la radio y cosas
as. Ms tarde Pepito empez a escribir algunas letras a las que pusieron msica. As naci la
banda, imagino que, igual que muchas otras".

Haciendo funcionar los enlaces del men horizontal

Ya estamos en condiciones de hacer funcionar el men horizontal de arriba, tambin llamado
barra de navegacin. Para ello abre una pgina cualquiera de las que tenemos hechas, por ejemplo
historia.html
Si te fijas en su cdigo Html, en la capa navegacion teniamos puesto esto:

<div id="navegacion">

103

<ul>
<li><a href="#">Seccin 1</a></li>
<li><a href="#">Seccin 2</a></li>
<li><a href="#">Seccin 3</a></li>
</ul>
</div>

Ese cdigo tenemos que transformarlo para que aparezcan enlaces a todas las secciones,
incluida la portada. Para ello basta con aadir 4 lneas ms como las que ya hay, quedando una
para cada uno de los enlaces que necesitamos. Y ya que estamos, en lugar de Seccin 1, Seccin 2,
etc, escribiremos el texto que queremos que aparezca en el men, es decir, Portada, Historia,
Discografa, Conciertos, Descargas, Foro y Souvenirs:

<div id="navegacion">
<ul>
<li><a href="#">Portada</a></li>
<li><a href="#">Historia</a></li>
<li><a href="#">Discografa</a></li>
<li><a href="#">Conciertos</a></li>
<li><a href="#">Descargas</a></li>
<li><a href="#">Foro</a></li>
<li><a href="#">Souvenirs</a></li>
</ul>
</div>
Va tomando forma, bien bien. Ahora solo falta colocarle la ruta en lugar de la almohadilla (#).
Cul crees que ser la ruta de estos archivos? Pues, est el navegador en la pgina que sea,
siempre tendr que, primero salir de esa carpeta ( ../ ), despus entrar en la carpeta de la seccin
correspondiente ( nombre de la carpeta) y finalmente abrir el archivo de la pgina
(nombredelapagina.html). Es decir, as:

<div id="navegacion">
<ul>

104

<li><a href="#">Portada</a></li>
<li><a href="../historia/historia.html">Historia</a></li>
<li><a
href="../discografia/discografia.html">Discografa</a></li>
<li><a href="../conciertos/conciertos.html">Conciertos</a></li>
<li><a href="../descargas/descargas.html">Descargas</a></li>
<li><a href="../foro/foro.html">Foro</a></li>
<li><a href="../souvenirs/souvenirs.html">Souvenirs</a></li>
</ul>
</div>
Como vers, la ruta de la portada no la he puesto an. Esa ruta ser diferente, pues para llegar
desde la pgina de cualquier seccin a la portada (que como digimos iba a ser la index.html) la
ruta a seguir es simplemente ../ (para salir de la carpeta de seccin en la que se est) seguido de
index.html quedando todo ese cdigo as:

<div id="navegacion">
<ul>
<li><a href="../index.html">Portada</a></li>
<li><a href="../historia/historia.html">Historia</a></li>
<li><a
href="../discografia/discografia.html">Discografa</a></li>
<li><a href="../conciertos/conciertos.html">Conciertos</a></li>
<li><a href="../descargas/descargas.html">Descargas</a></li>
<li><a href="../foro/foro.html">Foro</a></li>
<li><a href="../souvenirs/souvenirs.html">Souvenirs</a></li>
</ul>
</div>
Bueno, para ser correctos del todo, deberas recordar aqul error que comentamos una vez que
surge en el Internet Explorer si ponemos las lneas de cdigo Html de ese modo. La norma era que
todo el cdigo Html de una lista ha de estar todo seguido, por tanto antes de reemplazar ese
cdigo vamos a ponerlo en una sola lnea. Para ello, pones el cursor al final de cada lnea y das a la
tecla "Supr" hasta que la siguiente quede pegada a la anterior. Y as con todas. Debe quedar ms o
menos as:

<div id="navegacion">
<ul><li><a href="../index.html">Portada</a></li><li><a
href="../historia/historia.html">Historia</a>
</li><li><a
href="../discografia/discografia.html">Discografa</a></li><li><a
href="../conciertos/
conciertos.html">Conciertos</a></li><li><a
href="../descargas/descargas.html">Descargas</a></li><li>
<a href="../foro/foro.html">Foro</a></li><li><a
href="../souvenirs/souvenirs.html">Souvenirs</a></li>
</ul>
</div>

105

Ahora solo nos queda usar el buscar y reemplazar del EditPad Lite para de un plumazo actualizar
los cdigos de los mens horizontales de tooodas las pginas de las secciones. Te atreves a hacerlo
sin ayuda?
Abre el EditPad Lite, abre todas las pginas de las secciones, (Portada, Historia, Discografa,
Conciertos, Descargas, Foro y Souvenirs), y desde una de ellas, escribes el cdigo a buscar en la
parte de arriba y el nuevo cdigo que queremos en la parte de abajo. Te recuerdo que el cdigo a
buscar era este:

<div id="navegacion">
<ul>
<li><a href="#">Seccin 1</a></li>
<li><a href="#">Seccin 2</a></li>
<li><a href="#">Seccin 3</a></li>
</ul>
</div>
El que queremos (que va en la ventada de abajo del EditPad Lite) lo puse antes. Ahora pulsas
sobre "Replace All" y listo, cierras el programa, le dices que guarde todas y... misin cumplida de
nuevo!

Corrigiendo la deformacin del men lateral

Si haces vista previa en cualquiera de las pginas de seccin, por ejemplo de la pgina
historia.html, vers como ahora el men lateral de la izquierda aparece casi en el centro
deformando la web. Esta deformacin solo se ve bien usando Firefox, pues si usas el Internet
Explorer apenas se aprecia. En cualquier caso hay que arreglarlo.
Adems, vers como los elementos del men horizontal que acabamos de hacer, estn
descentrados. Hay que modificar los margenes de la capa navegacin para ajustarlo mejor y evitar
adems la deformacin que tenemos. Eso se hace muy rpido retocando la hoja de estilos, estilogeneral.css
Mira, esta es la deformacin que te digo usando Internet Explorer:

Y esta es usando Firefox:

106

Hay un hueco demasiado grande a la izquierda de los enlaces del men horizontal y adems se
nos baja el enlace Souvenirs a una segunda lnea que no queremos. Adems puedes ver como los
usuarios de Firefox van a ver la web deformada por ese mismo motivo, al desplazarse el enlace
Souvenirs a una segunda lnea, desplaza tambin el men lateral. No te preocupes, lo arreglamos
enseguida.
Abre la hoja de estilos, estilo-general.css y echa un vistazo a las lneas donde hemos definido
estilos a la capa navegacin, son estas tres principalmente:

#navegacion {background-color: gray ; border: black 1px solid

height:20px}

#navegacion li {float:left ; list-style:none ; margin: 0px 20px 0px

20px }
#navegacion ul { margin-left: 180px }
El problema lo tenemos en la tercera de esas lneas. Al principio le pusimos un margen por la
izquierda de 180 pixeles. Lo hicimos para centrar los tres enlaces que tenamos al comienzo de la
leccin, pero como ahora tenemos unos siete, es necesario hacerlo ms pequeo. As que en lugar
de 180px vamos a ver qu tal se ve con solo 60px, es decir, modificndo esa lnea para dejarla as:

#navegacion ul { margin-left: 60px }

Si ahora guardas la hoja de estilo y haces vista previa sobre cualquier pgina de seccin.
An podramos retocarlo un poco ms variando la segunda lnea ( margin: 0px 20px 0px 20px ).
Retocando esos parmetros puedes hacer que los enlaces estn ms o menos cerca unos de otros,
pero eso te lo dejo para cuando hagas tu propia web. Solo recuerdalo por si te hace falta.
Nota: Te recuerdo que si ves que las pginas aparecen un poco deformadas, es por que te falta
escribir algo de contenido en la parte central. Hazme caso y rellenala, as como el ttulo y esas
cosas que te he dicho.
Si se deforman pero no se arregla con eso, tal vez hayas cometido algn error al usar el EditPad
Lite. En ese caso comntanoslo en el foro y te ayudamos a corregirlo.

La nueva index o portada

Seguramente en muchas ocasiones habrs visto que al entrar en una pgina web aparece en
primer lugar una pgina de presentacin que suele ser ya tpica. Un banner o logotipo grande de la
web en cuestin y un enlace en el que pone con letras grandes "ENTRAR" y... poco ms. Los
motivos son diversos. Por un lado la apariencia de esas pginas no suele tener mucho que ver con
las que encontramos luego en el interior de la web, perdiendo coherencia con el resto de pginas.
Por otro lado, hoy pienso que el visitante quiere encontrar lo que busca de un modo rpido y ese
tipo de pgina de presentacin no es ms que un clic ms que tiene que hacer el visitante para
acceder a esa informacin que busca.

107

De modo que, a pesar de que hemos construido una index.html a modo de presentacin, vamos
a eliminarla y a colocar en su lugar una pgina copiada de nuestra plantilla. De este modo la
apariencia ser la misma que la de las dems pginas quedando el conjunto ms coherente. Desde
el men horizontal de arriba de esa pgina el visitante puede ya acceder a las distintas secciones
de la web. En la parte central, donde se coloca el texto o contenidos, pondremos una breve
descripcin de lo que el visitante puede encontrar en la web.
Vas a crear la nueva index.html, para crear la nueva index.html abre tu Html Kit y abre la
plantilla con l. Ahora lo que haremos es irnos al men de arriba del Html Kit y pulsar sobre
Archivo + Salvar Como.
En la ventana que se abre ponle el nombre index.html y pulsa Guardar.

Personalizando el index.html
El caso es que ahora que tenemos el index copiado de la plantilla, tenemos que hacer funcionar
el men horizontal de arriba igual que hicimos con las pginas de las secciones. En este caso no
nos vale el mismo cdigo que en aquellas pginas, pues esas estaban dentro de una carpeta
mientras que index.html est fuera. Por eso, las rutas no son exctamente las mismas y tenemos
que ponrselas correctamente.
Una vez tengas abierta la pgina index.html con el Html Kit, ve a ver su cdigo, concretamente
la parte del men superior horizontal. Ahora mismo es como este:

<div id="navegacion">
<ul>
<li><a href="#">Seccin 1</a></li>
<li><a href="#">Seccin 2</a></li>
<li><a href="#">Seccin 3</a></li>
</ul>
</div>
Hay que aadir los enlaces para el resto de secciones, como hicimos antes. Quedara as:

<div id="navegacion">
<ul>
<li><a href="#">Portada</a></li>
<li><a href="#">Historia</a></li>
<li><a href="#">Discografa</a></li>
<li><a href="#">Conciertos</a></li>
<li><a href="#">Descargas</a></li>
<li><a href="#">Foro</a></li>
<li><a href="#">Souvenirs</a></li>
</ul>
</div>
Y ahora le ponemos las rutas correctas. Para la portada es fcil, como estamos en la portada,
para volver a ella otra vez solo es necesario abrir su archivo, por lo que la ruta sera "index.html"
(recuerda que el archivo de la portada es index.html, no portada.html).
Para el resto de pginas de ese men tendramos que, para llegar desde la portada hasta cada
una de ellas hay que, primero entrar en la carpeta correspondiente y despus abrir el archivo de la
pgina, por lo que las rutas al final quedan todas de este modo:

<div id="navegacion">
<ul>
<li><a href="index.html">Portada</a></li>
<li><a href="historia/historia.html">Historia</a></li>

108

<li><a href="discografia/discografia.html">Discografa</a></li>
<li><a href="conciertos/conciertos.html">Conciertos</a></li>
<li><a href="descargas/descargas.html">Descargas</a></li>
<li><a href="foro/foro.html">Foro</a></li>
<li><a href="souvenirs/souvenirs.html">Souvenirs</a></li>
</ul>
</div>
Recuerda, el cdigo de las listas deben tener todas las lneas seguidas, de modo que lo
pondramos de este modo (eliminando espacios y saltos de lneas):

<div id="navegacion">
<ul><li><a href="index.html">Portada</a></li><li><a
href="historia/historia.html">Historia</a></li>
<li><a href="discografia/discografia.html">Discografa</a></li><li><a
href="conciertos/conciertos.h
tml">Conciertos</a></li><li><a
href="descargas/descargas.html">Descargas</a></li><li><a href="foro/
foro.html">Foro</a></li><li><a
href="souvenirs/souvenirs.html">Souvenirs</a></li></ul>
</div>
Bien. Pues pon en la index.html ese cdigo y ya lo puedes guardar. Si le haces vista previa ahora
al index.html vers como aparece algo descuadrado. Ya sabes que s por no tener a penas
contenido, de modo que aprovechando que estamos liados con ese archivo, escrbele un par de
prrafos ms o menos largos, ponle un <title> decente, como por ejemplo:

<title>Pgina Oficial de la banda</title>

y ya puestos, escrbele tambin algn ttulo entre <h1> y </h1>, donde pusimos las equis. Por
ejemplo esto:

<h1>Bienvenidos a la pgina oficial de la banda</h1>

Ahora s debe verse bien la vista previa.
Ahora en teora se puede navegar perfectamente por toda la web que tenemos desde el men
horizontal superior y desde todas las pginas de la web de ejemplo. Por cierto, como hemos
eliminado la antigua index.html, puedes borrar de la carpeta objetos todos los archivos que usaba
el index, como por ejemplo la sonrisa y el buzn de correo. As evitas ir acumulando archivos que
al fin y al cabo no usas en la web y ya no nos hacen falta. Si no sabes borrar carpetas o archivos
con el Html Kit aqu tienes unas pistas.
El siguiente paso es hacer funcionar tambin el men lateral de la izquierda y es ese el paso
que daremos a continuacin.

Completando el men lateral izquierdo

En primer lugar tendramos que decidir qu secciones van a tener o no ese men lateral
izquierdo que ahora mismo poseen todas las pginas de nuestra web. Si recuerdas el esquema que
hicimos al principio, habiamos decidido crear todas estas secciones y subsecciones:

109

Si an mantenemos esa estructura, vemos que desde el men horizontal se puede acceder a la
portada y a las pginas principales de cada seccin. Una vez en ellas, haremos que desde el men
lateral izquierdo se pueda acceder a las subsecciones. La portada no va a tener subsecciones y por
tanto no tiene sentido mantener en ella ese men lateral. Lo mismo ocurre con la seccin Foro, no
va a tener subsecciones, de modo que eliminaremos ese men lateral de ambas, tanto de la
portada (index.html) como del foro (foro.html).
Para eliminar el men, basta con borrar las lneas de cdigo que lo definen en los archivos
index.html y foro.html. Recuerda que el cdigo a eliminar es este:

<div id="menu">
<h1>Ttulo de Seccin 1</h1>
<ul><li><a href="#">Enlace 1</a></li><li><a href="#">Enlace
2</a></li><li><a href="#">Enlace 3</a>
</li><li><a href="#">Enlace 4</a></li></ul>
</div>
Las pginas portada y foro no se van a deformar por eliminar esa parte de cdigo. Tan solo no se
ver el men y el espacio que ocupaba pasa a formar parte del contenido central. En el futuro, si
cambiamos de idea y queremos colocar de nuevo el men, bastar con colocar de nuevo esas
lneas de cdigo, de modo que ya lo puedes eliminar sin miedo de ambas pginas.
Si lo deseas, elimina solo el cdigo que te acabo de decir arriba, pero deja las dos lneas de
comentarios que habamos puesto hace unas pginas. Me refiero a estas dos:

<!-- INICIO DE CODIGO DE MENU LATERAL IZQUIERDO - NO TOCAR -->

<!-- FIN DE CODIGO DE MENU LATERAL IZQUIERDO -->
De ese modo, si un da quieres volver a poner el men sabrs dnde iba, vale? Adelante! Elimina
esos cdigos.

Men lateral de Historia

El mtodo es muy similar al anterior, al que hemos usado para crear el men horizontal de la
parte de arriba, pero en este caso no vamos a partir de la plantilla sino que vamos a partir de la
pgina que ya existe en cada una de las carpetas de seccin. Es decir, para generar las pginas de
la seccin historia, abriremos el archivo historia.html y la guardaremos con los nombres de las
subsecciones.

110

Pero antes de hacer eso arreglaremos el men lateral de esa pgina. De ese modo, cuando
guardemos con el nombre del resto de pgina de esa seccin ya se guardan con el men lateral
terminado y no ser necesario acudir al EditPad Lite para reemplazar esa parte de cdigo.
Empezaremos entonces abriendo el archivo historia.html y mirando el cdigo que por ahora
tenemos para ese men lateral. Ese cdigo es este:

<div id="menu">
<h1>Ttulo de Seccin 1</h1>
<ul><li><a href="#">Enlace 1</a></li><li><a href="#">Enlace
2</a></li><li>
<a href="#">Enlace 3</a></li><li><a href="#">Enlace
4</a></li></ul>
</div>
Le vamos a poner el ttulo de la seccin entre <h1> y </h1>. Lo que escribamos ah aparecer
en la parte alta del men lateral. Pondremos entonces "Historia" y quedara as esa lnea:

<h1>Historia</h1>
A continuacin escribimos los anchor text de cada enlace. Aunque ya lo he dicho, quizs se te
haya olvidado. El anchor text es el texto que aparece visible en el enlace, es decir, las palabras
sobre las que hay que pulsar para ir a la pgina enlazada. Como las subsecciones de la seccin
historia son Origen, Miembros, Formacin Actual y Album de Fotos, pondremos esos textos como
Anchor Text. Quedara as por ahora el cdigo del men:

<div id="menu">
<h1>Historia</h1>
<ul><li><a href="#">Origen</a></li><li><a
href="#">Miembros</a></li><li><a href="#">
Formacin Actual</a></li><li><a href="#">Album de
Fotos</a></li></ul>
</div>
Ahora solo queda colocar bien las rutas. Pero an no existen los archivos de las subsecciones. As
que no sabemos qu poner en la ruta de cada uno. No pasa nada. Decidimos y cmo se van a
llamar esos archivos y como sabemos que los vamos a guardar en la carpeta historia, tenemos
todos los datos que nos hacen falta para escribir las rutas correctamente. Veamos.
Si el archivo de la subseccin Origen lo vamos a llamar origen.html, y sabemos que lo vamos a
guardar (cuando lo generemos) dentro de la carpeta historia, sabremos que para ir desde cualquier
pgina de la seccin historia a la pgina origen.html solo es necesario abrir dicho archivo. No es
necesario salir ni entrar en ninguna carpeta, por lo que la ruta ser simplemente el nombre del
archivo, es decir, "origen.html".

Lo mismo va a ocurrir con el resto de enlaces de las dems subsecciones, no es as? Entonces es
fcil adivinar que el cdigo completo quedara de este modo:

<div id="menu">
<h1>Historia</h1>
<ul><li><a href="origen.html">Origen</a></li><li><a
href="miembros.html">Miembros</a>
</li><li><a href="formacion.html">Formacin Actual</a></li><li><a
href="album.html">
Album de Fotos</a></li></ul>
</div>

111

Ya podemos escribir ese cdigo en lugar del antiguo que haba en el archivo historia.html. Una
vez hecho, guarda la pgina historia.html (esta vez con su mismo nombre).

Generando el resto de subsecciones de Historia

El resto es bien fcil, vuelve a abrir la pgina historia.html y ahora vas arriba, al men del Html
Kit y pulsando sobre Archivo + Salvar Como le vas dando los nombres de los archivos de las
subsecciones uno a uno. Es decir, la guardas como origen.html, miembros.html, formacion.html y
album.html y ya tenemos toda esa seccin completa.
Solo nos faltara ahora personalizar un poco cada una de esas subsecciones. ues igual que
hicimos con las secciones. Le ponemos el ttulo correspondiente en el <title>, cambiamos el
contenido, los prrafos para hablar de lo que toque en cada subseccin, etc, etc. De lo contrario,
cuando naveguemos por la web no nos vamos a dar cuenta de dnde estamos, pues todo el
contenido ser copia de historia.html.
El resto es cosa tuya. No creo que sea necesario que te explique paso a paso cmo actuar con el
resto de secciones. Ahora abres la pgina de la siguiente seccin, discografia, arreglas el men
lateral en ella, la guardas y luego generas el resto de pginas de las subsecciones de discografia,
que son maquetas.html, cd1.html, cd2.html y cd3.html. Luego le personalizar los ttulos, les pones
algo de texto personalizado, algo que hable de esa seccin y listo, pasas a la seccin siguiente.
Cuando termines con todo eso tendrs una web completamente lista para ser publicada en
internet. Con solo cambiar los ttulos, los prrafos con la informacin que te de la gana, aadir o
quitar secciones o subsecciones, modificar colores de fondo en la hoja de estilo, etc, tendrs tu
propia pgina web.
Te dejo aqu un enlace de cmo ha quedado esta web de ejemplo hasta el momento.
Claro que an queda mucho que aprender y cosas que aplicar a este ejemplo, como aprender a
insertar imgenes en la parte central de la web, donde va el contenido, saber colocarlas a la
izquierda o a la derecha, que el texto las rodee o no, hacer que los enlaces se marquen indicando
en qu pgina est el visitante, mejorar cosas para aparecer de los primeros en Google, aprender
a insertar publicidad para costear un hosting y dominio... y cientos de cosas ms, pero lo bsico ya
lo tienes.
Todo eso y mucho ms lo encontrars en las lecciones siguientes de CmoCrearTuWeb. Por
cierto, si te sientes en deuda con CCTW te agradeceramos que cuando cuelgues tu nueva web en
internet coloques un enlace hacia nosotros y por qu no, que recomiendes estas lecciones a tus
amigos. Eso nos ayudar a crecer y repercutir sin duda en la mejora de esta pgina. Desde ya mis
ms sinceros agradecimientos por tu apoyo.
En las prximas lecciones (tengo que terminarlas primero) veremos como mejorar an ms esta
web de ejemplo. Mientras tanto haz tus propios experimentos, retoca todo lo que puedas para ir
practicando y usa el foro para resolver tus dudas y ayudar a los colegas rezagados!

112