Crea Web

Aprender a Crear una Pgina Web Paso a Paso
En estas pginas vas a aprender a crear una pgina web, a escoger un servidor de pago o gratuito, a
subirla a internet, a mejorarla y actualizarla a tu gusto e incluso a sacarle un buen provecho econmico
si lo deseas. No hace falta que tengas conocimientos de nada, simplemente con leer estas lecciones lo
vas a lograr, vers. El resultado final ser una web igual que esta, con su foro, un top, un directorio de
enlaces, optimizada para aparecer en buenas posiciones en los buscadores, con un cdigo html y css
vlidos, etc, etc.
Adems, te lo explicamos todo tan bien que sabrs como personalizar tu pgina web a tu antojo. Una
vez termines el tutorial podrs cambiar los colores, la estructura, los mens, etc, etc para adaptarla a
tus gustos. Tras aprender todos los trucos podrs hacer cualquier otro proyecto desde cero con lo que
vas a aprender aqu.
Qu vamos a necesitar?
En principio solo conexin a internet y seguir estas instrucciones. El resto de recursos necesarios los
conseguiremos de la red, como por ejemplo el software (gratuito) que vamos a seguir para las lecciones,
el espacio web (gratuito tambin) para alojar tu proyecto, el software para el foro, para el directorio y
para el topsites (de nuevo, gratis), etc, etc. Si tienes acceso a internet tendrs todo lo necesario. Bueno
y un poco de tiempo y paciencia, claro.
Y si no entendemos algo?
En ese caso dispones del Foro CCTW donde puedes escribir todas tus dudas. Las resolvemos todas, de
modo que... si no tienes pgina web ser solo porque no quieres. No hay escusa! Para leer el foro no es
necesario registrarse, para escribir tus dudas en l s (es necesario para poder evitar un poco el Spam, lo
siento).
Bien, cmo seguimos las lecciones de esta web?

Arriba a la izquierda vers un men horizontal con fondo naranja. Desde all puedes acceder a las
distintas lecciones de este tutorial. Al hacer clic en cada uno aparece un men a la izquierda donde
acceders a las distintas partes de cada leccin. Adems, pulsando sobre las flechas "Siguiente" y
"Anterior" de la parte baja de cada pgina puedes ir avanzando las lecciones por orden. Todo claro? Pues
adelante, basta con pulsar la flecha derecha de aqu a bajo.
Recuerda, lee con atencin las lecciones, sigue al pie de la letra cada paso y consulta todas tus dudas
en el foro CCTW. Paciencia y... Suerte!!
De dnde descargar Html-Kit

El Html-Kit es un editor de html y css (entre otros) gratuito. Esto significa que no has de pagar un duro
por l, 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, no? As estaremos seguros de
obtener la ltima versin. La pgina es www.htmlkit.com. Ve haciendo clic y se abrir en 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 donde pone Download. Haz
clic all y aparece otra ventana. Busca un cuadrado 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 la de abajo puedes escribir tu email si deseas recibir
informacin de actualizaciones de este software y cosas as. No son obligatorios ninguno, pero ya que es
gratuito no est al menos contestarles a la primera pregunta, no?
A continuacin, pulsad en la parte de abajo de ese cuadro, donde poe Download HTML-Kit para
preceder 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 mostando una ventana de bienvenida y preguntndote si quieres seguir o no... parece que
an no ha entendido que "si".. je je:
Como va siendo habitual, ahora aceptamos los las condiciones, cmo no, verdad?:
Siguiente paso? Inicarle en que carpeta de nuestro disco duro lo queremos instalar. La opcin por
defecto es perfectamente vlida:
Seguidamente, nos pregunta qu opciones deseamos instalar. Como no hay quien nos pare, nosotros
escogemos todas (que chulos somos,eh?). Seguramente no las usemos, pero tampoco es cuestin de
perderse algo, as que... t pa dentro.
Si an no te has cansado de aceptar y aceptar, aqu tienes 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. Que majo... pero un poco pesado..
Pulsamos Install y... all va eso! Se instala en un segundo y claro, para no perder costumbre, nos dice
que ya est todo listo. Te recomiendo no dejar marcada la casilla marcada con un circulo rojo por m.
Eso es para descargarte ms cosas, pero por el momento vamos sobrados. Quita la marca (mira la foto
de abajo) y seguimos, oki?
Hacer un acceso directo al Html-Kit en tu escritorio
Si no igual te cuesta trabajo encontrarlo luego... Basta con 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 l 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. Arrstralo hasta tu escritorio y listo,
ya lo tienes a mano.
Arrancando el Html-Kit
En la pgina anterior nos quedamos en esta ventana:
Aceptamos de nuevo presionando "Finish" y vemos, cmo no, una preguntita....

Dice arriba que las preguntas siguientes (vaya, que no es solo una...) 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 y al hacerlo, claro, aparece otra pregunta...
Quieres que Html-Kit detecte los navegadores que tienes para usar la vista previa con ellos? Fjate, a
esta le vamo a decir que s, para que no se diga...
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, pues ya nos estamos cansando de tanta preguntita y
queremos ver el programa de una vez..
No contento con la contestacin, nos pregunta si queremos verificar si hay alguna versin ms
moderna del programa... arghhh. Adivina que ponemos?
Y finalmente (espero) nos invita a dar una vuelta por el programa con el tutorial. Lo siento pero no,
mi paciencia tiene un lmite, je je je.
Bueno. Ahora ya si que si, 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 "Don display this screen again" o "No mostrar esta ventana de nuevo".
TACHAAANNN!! Por fin! El programa se deja ver! je je je.

Traducir el Html-Kit al espaol
Ahora que tenemos el Html-Kit instalado vamos a traducirlo al castellano para enterderlo 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/
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. As que para no liarnos mucho con tanto men vamos a simplificar
todo esto. Trataremos de desactivar todo aquello que no vayamos a usar e iremos activandolo conforme
nos haga falta. As ser todo ms claro, oki? Para empezar, abre tu Html-Kit (si lo tienes abierto, cierralo
y lo vuelves a abrir).
Nada ms abrirlo nos sale la ventana donde nos pregunta qu tipo de archivo queremos crear. Esto es
lo primero que nos sobre, de modo que marcamos la casilla de la parte de abajo de esa ventana para
que no vuelva a aparecer:
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 circulo rojo en la siguiente
imagen:
Todas ellas las puedes activar cuando quieras haciendo lo mismo de nuevo, pero como vers, de este
modo la superficie de trabajo que nos queda es mucho ms amplia y clara, no? Quedara as:
Mucho mejor, 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, podriamos 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, pues nos va a facilitar algunas cosas que no nos hace el Notepad y que iremos viendo a su
debido tiempo.
El cdigo html de una pgina web

Todas las pginas web empiezan y terminan con el mismo cdigo y es el siguiente:
<html>
</html>
En adelante, siempre que escriba cdigo HTML lo har de este modo, de color azul y con fondo gris
para que lo distingais. 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 donde empieza la pgina y donde 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 colocandole 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 vacia.
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 cuando termina, verdad? Que lince, que inteligencia la tuya, je je. 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>
Como siempre, empieza por la palabra <title> y termina con la misma pero con la contrabarra
delante, es decir, con </title>. Fcil, no? Si guardaramos 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. Todo un logro, verdad? je je je.
do 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 pgima 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, podriamos 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, pues nos va a facilitar algunas cosas que no nos hace el Notepad y que iremos viendo a su
debido tiempo.
El cdigo html de una pgina web

Todas las pginas web empiezan y terminan con el mismo cdigo y es el siguiente:
<html>
</html>
En adelante, siempre que escriba cdigo HTML lo har de este modo, de color azul y con fondo gris
para que lo distingais. 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 donde empieza la pgina y donde 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 colocandole 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 vacia.
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 cuando termina, verdad? Que lince, que inteligencia la tuya, je je. 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>
Como siempre, empieza por la palabra <title> y termina con la misma pero con la contrabarra
delante, es decir, con </title>. Fcil, no? Si guardaramos 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. Todo un logro, verdad? je je je.
Cmo ver el cdigo Html de cualquier pgina web?

Como vers, estas lecciones estn explicadas para quien no tiene ni idea. Si sabes ver el cdigo Html
de una pgina web puedes pasar sin miedo a la pgina siguiente. Si tienes tus dudas, mejor lee estas
notas. El curso te va a costar lo mismo de modo que... aprovechate! je je.
Aunque te parezca una chorrada mira el cdigo Html de una pgina web, pronto vers que resulta
muy util, tanto para corregir errores en tus pginas como para ver cmo narices una web que te ha
gustado a podido hacer alguna cosa. Una vez que domines un poco ms el diseo de pginas web,
aprenders mucho cotilleando el cdigo Html de otras 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.
Como ves, son todos parecidos y por supuesto, el cdigo mostrado ha de ser idntico. Haz la prueba
con esta misma pgina, o con el ejemplo de la pgina anterior, y as compruebas el cdigo del ejemplo,
oki?
Una Carpeta para dominarlas a todas...

Antes de seguir aprendiendo y creando cosillas con el Html vamos a ordenar un poco nuestros
archivos para no perdernos ms adelante. 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. Fcil, no?
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.
As que, si a la vez que sigues estas lecciones quieres ir creando otra a tu bola, puedes crear otra
carpeta con el nombre que quieras dentro de "mis-paginas-web", junto a "web-ejemplo-cctw". As no
mezclamos cosas, vale?
Dentro de la carpeta "web-ejemplo-cctw" crea otra carpeta ms y llmala "objetos". En ella
guardaremos las imgenes, archivos de sonidos, etc.
Como ves, por el momento no tenemos nada de nada, solo sabemos crear pginas web vacias y
carpetas vacias, pero en un par de pginas vers como cambia esto.. confia en m.
Configurar nuestro Sitio en en Html-Kit

Ahora que tenemos la carpeta lista, llega el momento de configurar nuestro Sitio en el Html-Kit. Y
qu es un Sitio? Se llama sitio a toda la web, incluyendo todos sus pginas, imagenes 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

Empezamos desde cero, vale? Cierra el Html-Kit si lo tienes abierto y sigue estos pasos de uno en uno
y hasta el final y no tendrs ningn problema.
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:
Vemos tres carpetas ya creadas pero en principio no les vamos a hacer ningn caso. Cuando seas
mayor si quieres las cotilleas pero ahora vamos a lo nuestro. En el futuro, puedes cerra esa ventana
pulsando sobre la x de su parte superior derecha y puedes volver a verla siguiendo lo explicado en el
paso 2. Cuando te moleste la cierras, cuando te haga falta la abres. Fcil, verdad? Y para qu sirve esto?
Lo vemos ahora mismo.
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 (como ves, la traduccin al espaol no es completa, pero podremos
defendernos, ya vers), tienes que poner la carpeta "pagina-ejemplo-cctw" en el primer hueco (pincha
en la carpeta amarilla de su derecha para encontrarla y escogerla) y en el segundo hueco 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:
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.
Ahora s que podemos ya empezar a crear nuestra pgina web. Que emocionante...... no?
Que tal crear otro sitio para tus pruebas?

Como veo que eres un poco impaciente, vamos 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-webs" 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, la primera que ve y 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 apaarnoslas 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-ejemplo-
cctw" 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:
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 preguntando (este programa no para de preguntar.. verdad? que
pesao es... je je) preguntandonos el nombre que queremos que tenga ese archivo. Cul debe ser? Cmo?
Que no lo sabes? Ejem.... hay que estar ms atento! je je. 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:
Tras pulsar Ok no vemos nada nuevo, pero el archivo index.html a sido creado. Para verlo solo tienes
que hacer clic en el signo "+" que hay a la izquierda del sitio "web-ejemplo-cctw"m 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
Ya estamos listos para escribir contenidos el la pgina principal, index.html as que vamos a la
siguiente pgina y comenzamos el juego!
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 muetre 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.
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". Como vers, el cdigo de esta pgina coincide ms o menos
con el que te expliqu en las primeras lecciones, verdad? 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 de la que no te he hablado an. Esa lnea describe el tipo de pgina
que es, las normas de Html que est siguiento. 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 todos "Pagina Principal del Ejemplo CCTW". Ya sabes, entre
<title> y </title>.
Mi primer prrafo
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 cuales son los
resultados el Html-Kit dispone de otra vista llamada "Preview" o vista previa, que nos muestra como
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 como queda nuestro ejemplo por el momento, vale?
Bueno, por el momento no es gran cosa pero... sabas hacer esto antes? Pues pronto aprenders
mucho ms. No vamos a parar hasta que aprendas a crear pginas como ComoCrearTuWeb, oki? je je, no
va a ser dificil, vers.
Haciendo clic sobre "Editor", junto a "Preview" puedes volver a ver la vista de cdigo Html. Ya
sabemos algo ms.
Crear un segundo prrafo en la pgina

Para crear un segundo prrafo ya imaginars lo que hay que hacer, no? Basta con inlcuir 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:
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, e irte a merendar, que
llevas ya mucho tiempo delante del ordenador, je je je je.
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 (se supone que has guardado los cambios hechos en la
pgina de antes). 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, llamada Workspace y una vez que
aparezca, haz clic en el signo "+" a la izquierda de "web-ejemplo-cctw" para ver su contenido y para
terminar, doble clic sobre el archivo index.html para ver su cdigo. Tras esto, como sabes, puedes cerrar
la venata de Workspace para tener ms hueco.
El cdigo Html de los enlaces o vnculos

Como estars sospechando, 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" (que poco original, no?) la lnea quedara as:
<a>palabra</a>
Pero con esto no conseguimos nada, pues de alguna manera hay que indicar a qu pgina queremos
enviar al visitante al hacer clic all, no? 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. Te
evitarn muchos problemas en el futuro.
Como queremos enlazar a una web externa, pondremos 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 para que lo veas ms claro, vale?
En la misma o en otra ventana?

Si no indica ninguna cosa ms, cuando el visitante haga clic en el enlace la pgina destino se abrira
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 indicarselo 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:
Quieres ver como est quedando? Este es el aspecto del ejemplo 3.
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. El el peor sueo que
podemos tener, je je je. Esto pasa porque no todos lo navegadores interpretan igual las cosas.
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, ya lo vers.
La idea es colocar en las pginas web solamente los contenidos, sin tener en cuenta colores,
tamaos, anchuras ni nada de nada, solo contenidos puros y duros. Por otro lado crearemos un solo
archivo donde definiremos todas las caractersticas que queremos que tenga cada elemento de cada una
de las pgina de la web. De este modo si un da creemos por poner un caso que el tamao de la letra es
muy pequeo y queremos hacerlo ms grande, solo tenemos que indicarlo en ese archivo de
caractersticas y automticamente el tamao de letra quedar cambiado en tooodas las pginas de
nuestra web. Genial, no? Lo mismo podremos hacer a la hora de cambiar el fondo de la pgina, la
posicin de cierto elemento, el color de fondo de una parte, el coloreado de los enlaces.... todo lo que
tenga que ver con el modo de presentar las cosas de la web se queda definido en ese archivo de
caractersticas, vale?
La hoja de estilos css

Este archivo de caractersticas se llama Hoja de Estilos y aunque podemos ponerle el nombre que
queramos, vamos a llamarlo siempre estilos.css para no liarnos. La extensin, .css es obligatoria.
Por un lado hemos de crear ese nuevo archivo y por otro lado 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". Igual que hicimos para crear la pgina principal index.html
ahora vamos a hacer algo parecido para crear el archivo estilos.css
Hacemos clic con el botn derecho del ratn 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 os enseo 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
qu 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 para variar, en blanco.
Esto cada vez pinta mejor, no?
Relaccionar la Hoja de Estilos CSS con la pgina web

Ahora que tenemos creada la Hoja de Estilos (en blanco, pero la tenemos) hay que decirle a la pgina
web index.html que tiene que leer los contenidos de estilos.css para que sepa qu caractersticas
queremos que tenga cada elemento de la pgina. No te preocupes si no te enteras mucho de cules con
estas caractersticas, pues lo vamos a ver muy pronto y te va a quedar bien clarito.
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 no? Pues vamos all. 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 tiendrs 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 (leelo ahora si no lo has visto antes). 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 como no hay cambio alguno. Esto es porque la Hoja de Estilo (estilos.css) est todava vacia, pero
te prometo que te va a encantar el invento este cuando veas de lo que es capaz.
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. 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. oki? (Cmo crees que hago esto? je je je, pues si, con estilos CSS..)
Si ahora guardas el archivo estilos.css, abres el index.html y pulsas abajo en "Preview" para ver como
queda, vers como el fondo ahora es del color elegido. Bien, no? Y vers que no hemos tocado el
index.html para nada. Si en lugar de solo el index tuvieramos 500 pginas pasara lo mismo, todas
cambiarian con solo retocar el archivo estilos.css y en cambio si no usaramos Hoja de Estilos tendramos
que cambiar el color de fondo en las 500 pginas... es un buen invento o no? Pues an hay webmaster
que no la usan... vaya tela.
Un poco de estilos CSS

Ya de paso te explico 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 queramos 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 significa fondo. background-color se usa para especificar el color de
fondo no solo del body sino de otros muchos elementos, como prragos, enlaces, etc,. Ese nmero raro,
el #E6E6FA es el cdigo que corresponde a uno de los colores que aparecian 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. Te parece muy raro todo esto? No te preocupes, pronto
te ser familiar y lo hars con los ojos cerrados... bueno con uno un poco abierto sale mejor.. je je.
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-paginas-
web", y una vez copiada all le cambias el nobre y le pones "fondo".
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) ; background-
repeat: no-repeat }
Para que el fondo se repita solo horizontalmente, se pone esto en su lugar: background-repeat: x
repeat: x }
Para que se repita solo verticalmente se escribe: background-repeat: y
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:
repeat: repeat }
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. Te dejo un ejemplo para que lo pruebes y veas
como funciona:
repeat: no-repeat ; background-position: left bottom}
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
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.
Codigos colores
Cor Cdigo Java Cdigo HTML

Snow 255 250 250 #FFFAFA
GhostWhite 248 248 255 #F8F8FF
WhiteSmoke 245 245 245 #F5F5F5
Gainsboro 220 220 220 #DCDCDC
FloralWhite 255 250 240 #FFFAF0
OldLace 253 245 230 #FDF5E6
Linen 250 240 230 #FAF0E6
AntiqueWhite 250 235 215 #FAEBD7
PapayaWhip 255 239 213 #FFEFD5
BlanchedAlmond 255 235 205 #FFEBCD
Bisque 255 228 196 #FFE4C4
PeachPuff 255 218 185 #FFDAB9
NavajoWhite 255 222 173 #FFDEAD
Moccasin 255 228 181 #FFE4B5
Cornsilk 255 248 220 #FFF8DC
Ivory 255 255 240 #FFFFF0
LemonChiffon 255 250 205 #FFFACD
Seashell 255 245 238 #FFF5EE
Honeydew 240 255 240 #F0FFF0
MintCream 245 255 250 #F5FFFA
Azure 240 255 255 #F0FFFF
AliceBlue 240 248 255 #F0F8FF
lavender 230 230 250 #E6E6FA
LavenderBlush 255 240 245 #FFF0F5
MistyRose 255 228 225 #FFE4E1
White 255 255 255 #FFFFFF
Black 000 #000000
DarkSlateGray 47 79 79 #2F4F4F
DimGrey 105 105 105 #696969
SlateGrey 112 128 144 #708090
LightSlateGray 119 136 153 #778899
Grey 190 190 190 #BEBEBE
LightGray 211 211 211 #D3D3D3
MidnightBlue 25 25 112 #191970
NavyBlue 0 0 128 #000080
CornflowerBlue 100 149 237 #6495ED
DarkSlateBlue 72 61 139 #483D8B
SlateBlue 106 90 205 #6A5ACD
MediumSlateBlue 123 104 238 #7B68EE
LightSlateBlue 132 112 255 #8470FF
MediumBlue 0 0 205 #0000CD
RoyalBlue 65 105 225 #4169E1
Blue 0 0 255 #0000FF

DodgerBlue 30 144 255 #1E90FF
DeepSkyBlue 0 191 255 #00BFFF
SkyBlue 135 206 235 #87CEEB
LightSkyBlue 135 206 250 #87CEFA
SteelBlue 70 130 180 #4682B4
LightSteelBlue 176 196 222 #B0C4DE
LightBlue 173 216 230 #ADD8E6
PowderBlue 176 224 230 #B0E0E6
PaleTurquoise 175 238 238 #AFEEEE
DarkTurquoise 0 206 209 #00CED1
MediumTurquoise 72 209 204 #48D1CC
Turquoise 64 224 208 #40E0D0
Cyan 0 255 255 #00FFFF
LightCyan 224 255 255 #E0FFFF
CadetBlue 95 158 160 #5F9EA0
MediumAquamarine 102 205 170 #66CDAA
Aquamarine 127 255 212 #7FFFD4
DarkGreen 0 100 0 #006400
DarkOliveGreen 85 107 47 #556B2F
DarkSeaGreen 143 188 143 #8FBC8F
SeaGreen 46 139 87 #2E8B57
MediumSeaGreen 60 179 113 #3CB371
LightSeaGreen 32 178 170 #20B2AA
PaleGreen 152 251 152 #98FB98
SpringGreen 0 255 127 #00FF7F
LawnGreen 124 252 0 #7CFC00
Green 0 255 0 #00FF00
Chartreuse 127 255 0 #7FFF00
MedSpringGreen 0 250 154 #00FA9A
GreenYellow 173 255 47 #ADFF2F
LimeGreen 50 205 50 #32CD32
YellowGreen 154 205 50 #9ACD32
ForestGreen 34 139 34 #228B22
OliveDrab 107 142 35 #6B8E23
DarkKhaki 189 183 107 #BDB76B
PaleGoldenrod 238 232 170 #EEE8AA
LtGoldenrodYello 250 250 210 #FAFAD2
LightYellow 255 255 224 #FFFFE0
Yellow 255 255 0 #FFFF00
Gold 255 215 0 #FFD700
LightGoldenrod 238 221 130 #EEDD82
goldenrod 218 165 32 #DAA520
DarkGoldenrod 184 134 11 #B8860B

RosyBrown 188 143 143 #BC8F8F
IndianRed 205 92 92 #CD5C5C
SaddleBrown 139 69 19 #8B4513
Sienna 160 82 45 #A0522D
Peru 205 133 63 #CD853F
Burlywood 222 184 135 #DEB887
Beige 245 245 220 #F5F5DC
Wheat 245 222 179 #F5DEB3
SandyBrown 244 164 96 #F4A460
Tan 210 180 140 #D2B48C
Chocolate 210 105 30 #D2691E
Firebrick 178 34 34 #B22222
Brown 165 42 42 #A52A2A
DarkSalmon 233 150 122 #E9967A
Salmon 250 128 114 #FA8072
LightSalmon 255 160 122 #FFA07A
Orange 255 165 0 #FFA500
DarkOrange 255 140 0 #FF8C00
Coral 255 127 80 #FF7F50
LightCoral 240 128 128 #F08080
Tomato 255 99 71 #FF6347
OrangeRed 255 69 0 #FF4500
Red 255 0 0 #FF0000
HotPink 255 105 180 #FF69B4
DeepPink 255 20 147 #FF1493
Pink 255 192 203 #FFC0CB
LightPink 255 182 193 #FFB6C1
PaleVioletRed 219 112 147 #DB7093
Maroon 176 48 96 #B03060
MediumVioletRed 199 21 133 #C71585
VioletRed 208 32 144 #D02090
Magenta 255 0 255 #FF00FF
Violet 238 130 238 #EE82EE
Plum 221 160 221 #DDA0DD
Orchid 218 112 214 #DA70D6
MediumOrchid 186 85 211 #BA55D3
DarkOrchid 153 50 204 #9932CC
DarkViolet 148 0 211 #9400D3
BlueViolet 138 43 226 #8A2BE2
Purple 160 32 240 #A020F0
MediumPurple 147 112 219 #9370DB
Thistle 216 191 216 #D8BFD8
Snow1 255 250 250 #FFFAFA
Snow2 238 233 233 #EEE9E9
Snow3 205 201 201 #CDC9C9
Snow4 139 137 137 #8B8989
Seashell1 255 245 238 #FFF5EE
Seashell2 238 229 222 #EEE5DE
Seashell3 205 197 191 #CDC5BF
Seashell4 139 134 130 #8B8682
AntiqueWhite1 255 239 219 #FFEFDB
AntiqueWhite2 238 223 204 #EEDFCC
AntiqueWhite3 205 192 176 #CDC0B0
AntiqueWhite4 139 131 120 #8B8378
Bisque1 255 228 196 #FFE4C4
Bisque2 238 213 183 #EED5B7
Bisque3 205 183 158 #CDB79E
Bisque4 139 125 107 #8B7D6B
PeachPuff1 255 218 185 #FFDAB9
PeachPuff2 238 203 173 #EECBAD
PeachPuff3 205 175 149 #CDAF95
PeachPuff4 139 119 101 #8B7765
NavajoWhite1 255 222 173 #FFDEAD
NavajoWhite2 238 207 161 #EECFA1
NavajoWhite3 205 179 139 #CDB38B
NavajoWhite4 139 121 94 #8B795E
LemonChiffon1 255 250 205 #FFFACD
LemonChiffon2 238 233 191 #EEE9BF
LemonChiffon3 205 201 165 #CDC9A5
LemonChiffon4 139 137 112 #8B8970
Cornsilk1 255 248 220 #FFF8DC
Cornsilk2 238 232 205 #EEE8CD
Cornsilk3 205 200 177 #CDC8B1
Cornsilk4 139 136 120 #8B8878
Ivory1 255 255 240 #FFFFF0
Ivory2 238 238 224 #EEEEE0
Ivory3 205 205 193 #CDCDC1
Ivory4 139 139 131 #8B8B83
Honeydew1 240 255 240 #F0FFF0
Honeydew2 224 238 224 #E0EEE0
Honeydew3 193 205 193 #C1CDC1
Honeydew4 131 139 131 #838B83
LavenderBlush1 255 240 245 #FFF0F5
LavenderBlush2 238 224 229 #EEE0E5
LavenderBlush3 205 193 197 #CDC1C5
LavenderBlush4 139 131 134 #8B8386
SlateGray4 108 123 139 #6C7B8B

LightSteelBlue1 202 225 255 #CAE1FF
LightSteelBlue2 188 210 238 #BCD2EE
LightSteelBlue3 162 181 205 #A2B5CD
LightSteelBlue4 110 123 139 #6E7B8B
LightBlue1 191 239 255 #BFEFFF
LightBlue2 178 223 238 #B2DFEE
LightBlue3 154 192 205 #9AC0CD
LightBlue4 104 131 139 #68838B
LightCyan1 224 255 255 #E0FFFF
LightCyan2 209 238 238 #D1EEEE
LightCyan3 180 205 205 #B4CDCD
LightCyan4 122 139 139 #7A8B8B
PaleTurquoise1 187 255 255 #BBFFFF
PaleTurquoise2 174 238 238 #AEEEEE
PaleTurquoise3 150 205 205 #96CDCD
PaleTurquoise4 102 139 139 #668B8B
CadetBlue1 152 245 255 #98F5FF
CadetBlue2 142 229 238 #8EE5EE
CadetBlue3 122 197 205 #7AC5CD
CadetBlue4 83 134 139 #53868B
Turquoise1 0 245 255 #00F5FF
Turquoise2 0 229 238 #00E5EE
Turquoise3 0 197 205 #00C5CD
Turquoise4 0 134 139 #00868B
Cyan1 0 255 255 #00FFFF
Cyan2 0 238 238 #00EEEE
Cyan3 0 205 205 #00CDCD
Cyan4 0 139 139 #008B8B
DarkSlateGray1 151 255 255 #97FFFF
DarkSlateGray2 141 238 238 #8DEEEE
DarkSlateGray3 121 205 205 #79CDCD
DarkSlateGray4 82 139 139 #528B8B
Aquamarine1 127 255 212 #7FFFD4
Aquamarine2 118 238 198 #76EEC6
Aquamarine3 102 205 170 #66CDAA
Aquamarine4 69 139 116 #458B74
DarkSeaGreen1 193 255 193 #C1FFC1
DarkSeaGreen2 180 238 180 #B4EEB4
DarkSeaGreen3 155 205 155 #9BCD9B
DarkSeaGreen4 105 139 105 #698B69
SeaGreen1 84 255 159 #54FF9F
SeaGreen2 78 238 148 #4EEE94
Firebrick4 139 26 26 #8B1A1A

Brown1 255 64 64 #FF4040
Brown2 238 59 59 #EE3B3B
Brown3 205 51 51 #CD3333
Brown4 139 35 35 #8B2323
Salmon1 255 140 105 #FF8C69
Salmon2 238 130 98 #EE8262
Salmon3 205 112 84 #CD7054
Salmon4 139 76 57 #8B4C39
LightSalmon1 255 160 122 #FFA07A
LightSalmon2 238 149 114 #EE9572
LightSalmon3 205 129 98 #CD8162
LightSalmon4 139 87 66 #8B5742
Orange1 255 165 0 #FFA500
Orange2 238 154 0 #EE9A00
Orange3 205 133 0 #CD8500
Orange4 139 90 0 #8B5A00
DarkOrange1 255 127 0 #FF7F00
DarkOrange2 238 118 0 #EE7600
DarkOrange3 205 102 0 #CD6600
DarkOrange4 139 69 0 #8B4500
Coral1 255 114 86 #FF7256
Coral2 238 106 80 #EE6A50
Coral3 205 91 69 #CD5B45
Coral4 139 62 47 #8B3E2F
Tomato1 255 99 71 #FF6347
Tomato2 238 92 66 #EE5C42
Tomato3 205 79 57 #CD4F39
Tomato4 139 54 38 #8B3626
OrangeRed1 255 69 0 #FF4500
OrangeRed2 238 64 0 #EE4000
OrangeRed3 205 55 0 #CD3700
OrangeRed4 139 37 0 #8B2500
Red1 255 0 0 #FF0000
Red2 238 0 0 #EE0000
Red3 205 0 0 #CD0000
Red4 139 0 0 #8B0000
DeepPink1 255 20 147 #FF1493
DeepPink2 238 18 137 #EE1289
DeepPink3 205 16 118 #CD1076
DeepPink4 139 10 80 #8B0A50
HotPink1 255 110 180 #FF6EB4
HotPink2 238 106 167 #EE6AA7
Gold2 238 201 0 #EEC900
Aplicando color e imagen de fondo a nuestro ejemplo

Ups, creo que en la pgina de antes me he pasado un poco escribiendo. Espero no haberte asustado,
je je je. Solo acurdate de que ahi hay informacin de los fondos por si algn da te hace falta. Vamos
ahora a aplicar un color de fondo a la web de 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
par insertarle esta lnea):
body {background-color: #E6E6FA}
Aplicando una imagen de fondo

Suponiendo que hemos escogido esta imagen para el fondo de la web (lo se, es horrible, pero para el
ejemplo sirve, no?):
(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:
repeat: no-repeat }
Adems la quiero centrada tanto vertical como horizontalmente, as que le aado esto:
repeat: 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:
position: 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, pero t tienes la suerte de contar con CCTW, je je je.
La pgina de ejemplo, tras guardar la hoja de estilo, se vera as con cualquier navegador (espero...):
Si t la ves diferente, rara, nos lo dices en el foro, en la seccin de Html-Kit y as lo reparamos y

retocamos la leccin, oki?
Qu tal? Mereci la pena el rollo de la pgina anterior? je je je. Intentar hacerlo ms ameno la
prxima vez..
Cmo insertar una imagen en una pgina web

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, verdad?
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>. Recurdalo, oki? 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). Va siempre encerrada 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 tama mejor hacerlo con un programa grfico y luego la vuelves a pegar en la
pgina, oki?
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. Eso es bueno, no crees?
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 del contenido 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 u otros cuando la
gente busque por las palabras "html-kit", por ejemplo, me viene bien colocar descripciones en los alt de
las imgenes como "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
copiartela 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 detras 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:
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. Curioso, verdad?
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, para no saturarnos, oki?
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.
Si te soy sincero, estoy aprendiendo a usar el Html-Kit a la vez que hago las lecciones, je je je. En
cuanto descubra como hacer para que aparezcan las unidades automticamente os lo dir, .
Cmo insertar un enlace a tu E-Mail

Sin conocer lo que piensan tus visitantes no tienes nada que hacer, nada que mejorar, de modo que
colocar un enlace donde el usuario pueda hacer clic para escibirte un E-Milio parece algo
imprescindible, verdad? Claro que ms adelante colocaremos un foro en la web, pero nunca est de ms
al menos saber como insertar estos enlaces de correo, as que vamos a aprender.
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 E-
Mail en un dibujo de un buzn. Aunque sea para aprender, oki?
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. Mejor, verdad? je je.
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 coloar el cursor all y pulsa luego el Intro para crear una
nueva lnea. Como te dije anteriormente, conviene poner muchas 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 (te dejo la imagen para que recuerdes cmo
era):
(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 a tras, y como por fn he descubierto como poner las unidades en el
ancho y alto de la imagen.... era obvio verdad? je je je. Pues si, 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 para escribirme un E-Mail!" src="objetos/buzon.gif" height="32px"
width="32px" />
y si le das a "preview" podrs ver el buzn en cuestin. Vamos ahora a colocarle el enlace a nuestro E-
Mail.
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>, oki?
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:
y a continuacin de mailto: escribe tu direccin de correo.
Despus pulsa Ok y listo..
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
pgina. Buen invento esta hoja de estilos, verdad? Pues an tiene cosas mejores, ya lo vers ms
adelante.
Cmo centrar un prrafo de la pgina web

Lo que hemos conseguido hasta ahora no es gran cosa comparado con lo que nos espera, pero por lo
pronto hemos aprendido ya algunas cosas interesantes. El aspecto de la web conseguida hasta ahora no
est mal del todo, pero se le echa en falta por lo menos el conseguir centrar algunos prrafos.
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

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 "Bievenidos...". Para ello vamos a la vista del
cdigo html del index y modificamos la 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 prrago aparece ahora
centrado. Fcil, verdad?
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). Estas cosas no las sabe cualquiera, no te creas... ests
empezando a ser un Webmaster de verdad!
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
siguientes, oki?
La maravillosa Hoja de Estilo queda as:
Y el cdigo Html del index.html de ejemplo as:

Y con esta pgina terminamos con la primera leccin. Pulsando arriba, en la barra de navegacin
naranja sobre leccin segunda o pulsando en la flecha derecha de aqu abajo continuamos con la
segunda, donde empezaremos a meter mano a la plantilla.
Espero que me des tu opinin de estas lecciones en el Foro CCTW, eh? Solo con tu punto de vista y tu
opinin puedo mejorar todo esto, acurdate de m! je je je.
Comenzando a crear la plantilla de nuestra pgina Web

La pgina index.html que hemos visto hasta el momento no est terminada ni mucho menos. Su
aspecto final no tiene nada que ver con lo que tiene ahora, pero trabajaremos sobre ella ms adelante.
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...
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. Como siempre que se crea un archivo nuevo, aparece casi vacio.
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. Mientras que la anterior
(estilos.css) la vamos a usar solo para el index, esta segunda Hoja de Estilo que llamaremos "estilo-
general.css" se usar para todas las dems pginas de la web. Creala tu mismo. Toma, por si no te
acuerdas de cmo crear una Hoja de Estilo Vacia, pero recuerda ponerle de nombre "estilo-general.css".
Relacionando estilo-general.css con plantilla.html
Ahora te toca relacionar esta segunda Hoja de Estilos con la plantilla.html recien creada. Te
recuerdo que haba que colocar una lnea de cdigo en el Head. Te dejo esto por si no te acuerdas de
cmo relacionar la hoja de estilo con la web, pero recuerda poner en la ruta "estilo-general.css" en
lugar de "estilos.css", oki?
Como tanto plantilla.html como estilo-general.css estn en la misma carpeta, es suficiente con
escribir esto:
<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 sn 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 caul podemos incluir lo que queramos, palabras,
prrafos, enlaces, imagenes, 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, etc.
Al principio quizs te de un poco de pnico todo esto, pero te prometo que no es nada dificil, ya
veras. Fjate, esto de abajo es el cdigo Html de un Div sencillo.
<div>Bienvenidos a mi Web</div>
A que no te ha dolido? je je. 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. 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 que aparece. Nada
asombroso, ya lo se.
Dando estilos a un Div

Ese Div no tiene ningn atractivo, claro. Para adornarlo lo que hacemos es definir un tipo de estilo en
la Hoja de Estilos y aplicarselo al DIV.
Para empezar a jugar, 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 "#" (Alt Gr
+ 3) 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:
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). Es la magia del CSS aplicado a los
Divs, pero no te creas que esto queda as, vers lo asombroso que es todo esto ms adelante.
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...
no es algo descabellado, no te creas.
Pero con esa capa solo no tenemos ni para empezar, je je. Vamos a crear una segunda capa que
contendr una barra de navegacin. La llamaremos, navegacion (sin acentos, y todo en minsculas,
claro).
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 a mano. No es bueno tener pginas
econdidas, 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:
#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). Ms adelante le pondremos ms cosas, pero ahora seguimos creando el resto de capas.
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:
En la plantilla.html esto otro:
Y aqu tienes el resultado del ejemplo. Se que no parece una pgina web, pero no me dirs que no
est tomando forma, no? Vers como esto empieza a cambiar en breve..
Rescoluciones de pantalla y pginas web

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 de 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 aprovecha todo el espacio, cuando lo hay, claro.
El otro caso es darle un ancho fijoa 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 echo, 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, las dos cosas a la vez, oki?
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. Lo llamaremos.... "global". Como va a ser nico,
es decir, solo va a haber uno 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 izquiera y por tanto, centrado. Lo veremos mejor ms
adelante, no te preocupes si no lo entiendes demasiado bien, vale?
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.
Esto es lo que hemos conseguido con el ejemplo hasta el momento. Va mejorando poco a poco..
El men de nuestra pgina web

Estate atento en esta leccin, que igual es un poco espesa, 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.
Parece lgico, no? 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 (Esta ser la tal
y cual...), 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 (Esta ser
la ....) 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):
Ale, lo de siempre.. guarda la Hoja de Estilos y mira como est quedando la plantilla haciendo vista
previa, o si el cansancio puede contigo, miralo aqu mismo, je je je. Bueno, ya estn todas las capas
creadas (mucho ms adelante quizs metamos alguna ms...) as que ahora vamos a rellenarlas y a
darles una mejor presencia, oki?
Rellenando el men de nuestra pgina web

El men as como lo hemos dejado ni parece men ni parece n de n. 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, no? En realidad un men no es ms que una lista
y, lo mejor para poner una lista es usar el elemento... lista? Excto.
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 en inicio de un elemento de la lista, que es <li>. Te lo puedes apuntar, yo
siempre me liaba y terminaba poniendo lu y il, je je je.
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. Cmo? Pues como siempre, con solo poner una cosilla
en la Hoja de Estilos. Pero antes vamos a ver qu cul es el cdigo que tendriamos 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 colocado.
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 (eso espero...) 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 sierve 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, vale?
<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="_blanck" se pone para que el enlace se abra
en una pgina distinta, lo recuerdas?).
Pues adelante, abre tu Html-Kit, abre la plantilla.html y copia 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" como siempre,
se lo daremos con la Hoja de Estilo ahora mimo.
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.
Recuerda que la estrategia perfecta para no tener problemas con algunos navegadores y para tener un
cdigo Html sencillo para revisarlo nosotros, y sencillo para que los buscadores lo lean bien e indexen
nuestras pginas correctamente, es poner en el Html lo justito, y dejar los detalles de cmo queremos
adornar cada cosa para la Hoja de Estilo. Adems esto nos permitir hacer cualquier cambio en todas las
pginas de nuestra web con solo cambiar una palabra en la Hoja de Estilos. Es genial.
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
Esto, despus de muuuchas pruebas lo he conseguido arreglar de este modo, 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 si 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.
Sin ms rollo, abres 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... o no? Si ves algn fallo no dudes en decirmelo en el Foro CCTW, plis!
Eliminando los puntos de la lista

Esta es fcil y comprensible. 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 tengasmos en
la web dejarn de tener ese punto, 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 pudieramos 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 menu. Toma ya. Cmo te has quedao? je je je. Esto se hace as:
#menu li { ...propiedades..... }
Cuando se pone 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 (en este caso
menu). Que bien, no?
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, como por ejemplo el puntito aquel. 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 tubieras varios navegadores diferentes, como el Internet Exporer, el Opera, el Firefox, etc, etc, te
darias cuanta 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 pagina
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 si.
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 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, justamente centrado, sin margenes. Tambin han desaparecido otros
margenes que rodeaban la capa global, etc. Tenemos el poder! je je je.. Eso si, 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 lna. Acurdate!
Enlaces del men hacia la izquierda

Has visto que todos los elementos de la web de ejemplo salen centrados? Sabes porqu? Pues 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..... a no ser que le indiquemos otra cosa a cada
estilo concreto, claro.
Por ejemplo, los enlaces del men quedan mucho mejor si aparecen alineados a la izquierda, verdad?
Pues vamos a arreglar eso ahora mismito! 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, no? 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>. Tiene sentido, verdad? Lo dejamos definido en el
#menu por ahora.
Ahora los enlaces aparecen bien, a la izquierda, pero un poco demasiado pegados a la izquierda,
verdad? Seguimos mejorando el aspecto en la pgina siguiente.
Qu tal lo llevas? Levntate un poco y estira las piernas, que te va a dar algo malo! je je je je. Si no
entiendes algo o quieres que te explique mejor alguna parte dmelo en el Foro CCTW, sin problemas, o
escribe all tus dudas o sugerencias, que para eso estamos colega!
Arreglando los mrgenes del men

Esto ya es cosa de probar y probar, claro. Lo suyo es ajustar los margenes cuando tengamos los
enlaces definitivos, pues segn lo largo que sea el texto de cada enlace podemos ajustarlo ms o menos,
al igual que la anchura del men. Pero como ya estamos liados con esto, vamos palante y lo
terminamos, te parece? Va a ser muy facilito.
An no te lo he dicho, pero quizs hayas visto ya por algn lado varias formas de especificar los
margenes. 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 (puedes escoger el que te venga mejor segn si los margenes son iguales para todos
los lados o diferentes) 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, pues as podemos retocar muy facilmente 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 pillas?
As que, tras varias pruebas (te invito a que hagas tus experimentos poniendo valores un poco
exagerados para ver mejor los efectos) lo vamos a dejar as:
#menu li {list-style:none ; margin: 4px 0px 4px 6px}
Te recomiendo que en estos ejemplos que vamos haciendo pongas exactamente lo mimo que yo. As
no te liars ms adelante cuando hagamos cambios. Confa en mi un poco, no? Tu puedes ir a tu bola si
quieres, pero en el otro sitio que hemos creado al principio, al que llamamos mis-experimientos, oki?
Sigo echando de menos algo... Ah! claro, lo de eliminar el subrayado y hacer que cambien de color los
enlaces cuando pasas el ratn por encima! Eso mola, vamos a verlo en la pgina siguiente, es muy
sencillo tambin, y gratis! je je je.
Aplicando estilos css a los enlaces del men

Estoy seguro de que esto era algo que siempre quisiste hacer, je je. Vamos a ver cmo eliminar el
subrayado de los enlaces y cmo resaltar los enlaces del men cuando pasas el ratn por encima, oki?
Eso si, primero un poco de base para que no te pierdas luego.
Cmo se definen las propiedades de los enlaces

Los enlaces como ya sabes, de definen con la etiqueta <a> luego 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.
Ahora te cuento qu es eso de los estados.
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, verdad? 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: Y este es el estado de un enlace o vnculo cuando est siendo presionado por el ratn y
mientras no se suelta el dedo.
Hay que ver cuanto ests aprendiendo eh? Y gratis! No te quejaras, je je je. Bueno, pues como te
deca antes, 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, claro):
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 text-
decoration: underline
Si no quieres destacar los enlaces segn los estados que te he expicado 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 definirl 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
Qu, se va animando esto o no? No? pues vamos a mejorarlo an ms..
Aplicando ms estilos css a los enlaces del men

Para que se note que controlamos esto un montn, vamos a aplicar un par de propiedades ms 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. En cambio podemos hacer un pequeo truco para que estos se activen, funcionen, con solo
colocar el cursor sobre la lnea, sin necesidad de colocarlo justamente sobre el texto. No se si te has
enterado de lo que acabo de decir, igual suena un poco extrao, pero tu haz lo que te digo y vers a qu
me refiero.
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 lejor del texto, tambin se activa el enlace. La segunda es
mala, y es que se nos han separado demasiado los enlaces verticalmente. Por qu ser?
Es un defecto de algunos navegadores, como el Internet Explorer, pero esto lo arreglamos rpido con
otro truquillo. Pon 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.
Como te veo con los ojos perdidos mirando al techo... te dejo una imagen para que veas a qu me
refiero con ponerlos seguidos. Antes estaban as:
Y hay que ponerlos as:
Aplicando un fondo a los enlaces activos

Bueno, en realidad es a los enlaces en estado Hover. Vamos a hacer que al poner el cursor sobre un
enlace del men, este aparezca sobmbreado, 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 te debera sonar, la vimos al principio del curso para poner fondo a la
pgina index, te acuerdas? je je. Silver significa plata en ingls, es un color gris clarito. El resto de
lneas del cdigo no se tocan, que te veo. Si guardas y haces vista previa a la plantilla.html vers los
efectos logrados con todo esto.
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, etc sin ms que poner
la propiedad correspondiente. Pero para eso, todas las partes del contenido de la pgina web deben "ser
algo". Si son enlaces modificaremos la etiqueta "a", si son prragos 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, ni n de n. Nosotros pretendemos que sea un prrafo, verdad? Pues vamos a indicarselo
poniendole a esa frase la etiqueta <p> al incio y como no, la etiqueta </p> de cierre al final. Ale, dale
al teclado! 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

Ups, los prrafos se ven centrados y eso parece una poesia ms que una web, je je je. Eso es por que
le pusimos align:center a body en la Hoja de Estilo. Pero no pasa nada, lo arreglamos rpido definiendo
un estilo justificado para todos los prrafos de la web. Si ms tarde nos interesa alguno con otra
alineacin, lo crearemos en su momento.
Por ahora, 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, sin huecos. 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 Justity.
Los margenes de los prrafos de la pgina web

La cosa va mejorando, pero ahora vemos como los textos se pegan demasiado tanto al men lateral
como a los extremos de la pgina. Eso no queda muy bien, as que vamos a arreglarlo.
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 y listo. Qu
prefieres? je je je.
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), verdad? Por eso le pusimos esos
colores tan feos, para encontrar cada capa rpidamente, je je je. Pero solo queremos por ahora poner
margen a sus prrafos, es decir, queremos margenes para los prrafos de dentro de la capa #contenido,
as que, si recuerdas bien lo que hicimos la otra vez, 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.
(Margen entre men lateral y textos principales)

Vaya... 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, verdad? 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 }
Ahora si que lo hemos conseguido, mira el resultado del ejemplo.
La indentacin de los prrafos

Eso si que es una palabra rara. 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. Te
gusta? 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
(en realidad lo hago para llenar hueco, que esta pgina se me haba quedado muy cortita, je je je je)
plantilla.html
estilo-general.css
Un poco ms de estilos css

A estas alturas y aunque no lo creas, pocas capas ms tendremos que crear para tener completa
nuestra pgina web. El resto ser contenido vuestro, propio y ya no tendremos que tocas mucho ms la
plantilla.html aunque realmente, poco la hemos tocado, verdad? El restop del trabajo lo tendremos con
la hoja de estilo, que se encargar de darle vistosidad al Html. Repito de nuevo que lo bueno de las
Hojas de Estilo es que si un da te cansas del aspecto de la web, con oslo cambiar un poco la Hoja de
Estilos tendrs una web con el mismo contenido (pues no tocaremos el html) pero con una apariencia
totalmente distinta. Para eso claro, hay que saberse los trucos del CSS y por eso vamos a profundizar tu
y yo ahora 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
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 pegadito pegadito al contenido, como en este caso de la derecha.
Padding
El padding lo usaremos para definir una distancia de separacin entre el borde y el contenido. Es
decir, separa el borde de su contenido en una distancia igual a la que le indiquemos. Concretamente,
esta zona sera como la parte rojo 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
Ahora tenemos otra distancia ms. 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.
El ejemplo del castillo de paladines rodeados de marginados

Hace mucho tiempo exista un castillo donde un montn de paladines (soldados de la edad media) se
refugiaban de seres marginales, los marginados los llamaban. El rey orden contruir unas buenas
barreras (border) para protegerse. Adems, clav un montn de estacas afiladas por fuera de los muros
para evitar que los marginales se acercaran demasiado (margin) y para proteger a los paladines orden
que ninguno de ellos se acercara al muro a menos de dos metros (padding: 2 metros) para evitar que los
paladines sufierean alguna herida si algn marginal atravesara alguna lanza por alguna ventana del
muro. De este modo, los marginales no podian acercarse mucho al castillo (gracias al margin) y a los
paladines se les prohibio acercarse al muro (gracias al padding).
Es un cuento muy tonto, je je je, pero quizs te ayude a recordar para qu es cada uno.
En la pgina siguiente lo entenders mejor al aplicrselo a nuestro men lateral, ya vers.
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. Cul de los dos?
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, no?
Hace un par de pginas pusimos a la capa #menu este margen: margin-right:10px, te acuerdas? 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 (y ya puestos, por
debajo tambin), 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. Vamo a
probarlo con estos otros valores (recuerda el orden de las dimensiones del margin, arriba-derecha-
abajo-izquierda)
#menu {................... margin:3px 10px 3px 3px}
Y haciendo de nuevo vista previa sobre plantilla.html vemos que queda mucho mejor, dnde va a
parar, je je je.
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 y en los casos en los que no sea posible ya nos buscaremos las maas para
poder usar bordes sin problemas, pero eso ser ms adelante.
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, 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.
Yo por mi parte intentar ponerte algunos ejemplos en cuanto pueda para esclarecer estos
conceptos, oki? Pero recuerda, no lo pruebes en los archivos de este ejemplo para no perdernos en las
lecciones, hazlo en un archivo aparte.
Mientras tanto, seguimos con las lecciones, vale?
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.
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. Normalmente no se usan los dems pues no
se suele abusar de sub sub subttulos, je je.
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.
A mi me gustan por ejemplo titulos principales (h1) en negrita, con un tamao ligeramente mayor y
adems subrayados y de otro color distinto al texto normal, que suele ser negro. Para los subttulos ( h2)
me gusta en cambio un tamao algo menor y adems sin subrayar, pero tambin del color del h1 y en
negrita. As que, como las lecciones las hago yo, vamos a definir en la hoja de estilos este aspecto para
esos dos elementos a mi gusto, je je je. Ah, tambien los quiero centrados los dos!
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. Por qu crees que puede ser?
Piensalo. Pues claro, 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. Lgico no? 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, que te veo... Veremos esto en la vista previa:
El subttulo, de etiqueta h2, lo vamos a poner en el texto "Y este es el tercer prrafo" (en realidad
ahora es el segundo, pues el pimero lo hemos convertido en un ttulo h1, pero bueno). 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, o mejor dicho, no dejan que otra cosa como
por ejemplo un prrafo, continue a su derecha, mandndolo directamente a la lnea siguiente. 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, no? Pues ya est. Ya
sabemos ms cosas. Si te gustan 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 como sabe Google qu pginas ha de mostrar? Bien fcil. Google y el
resto de buscadores se pasean continamente por la red leyendo la 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 com prrafos los buscadores nunca
sabrn que se trata de un ttulo y no tomarn esa palabra tan en cuenta.
El resto de motivos los iremos viendo en lecciones sucesivas. Eso si, no por lo dicho antes vamos a
poner toooodos los textos dentro de un ttulo, pues los buscadores pueden pensar (con razn) que
estamos haciendo tampas y en lugar de posicionarnos mejor en sus listas, apareceramos los ltimos. No
se debe abusar.
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 estas buscando como insertar
ttulos en una web y me interesa que aparezca esta pgina en ese caso), tambien he colocado la palabra
"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". Lo pillas?
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 pensarn que se
te ha ido la cabeza... je je je.
Buscando alojamiento para la pgina web

Ya va siendo hora de ir subiendo nuestro trabajo a la red, verdad? Aunque an no est terminada la
pgina web, es bueno tener ya un sitio para alojarla (a esto 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 como
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.
Ahora seguramente te suene a chino todo eso, pero tras leer esa seccin sabrs lo que significa cada
cosa. Aprenders all a escoger un hosting tanto de pago como gratuito, ambos sirven perfectamente
para aprender, de modo que no tienes escusa. Si no lo haces no podrs aprovechar las lecciones al 100%,
aunque tambin aprenderias cosas, claro. Sera como aprender a conducir sin tocar nunca un coche....
osea, n de n.
No lo olvides, para cuando regreses aqui para seguir las lecciones, has de tener los datos anteriores,
vale? Pues ya sabes. Y ante cualquier duda recuerda que en el Foro CCTW tienes una seccin para cada
consulta, salo sin que te de vergenza preguntar tonterias y no te arrepentirs.
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. Recuerda que puedes
registrarte varias veces, con nombres distintos para crear ms de una cuenta y por tanto tener ms de
una pgina web, por tanto, olvida usar estas lecciones para crear la pgina que tienes en la cabeza.
Mejor sigue las instrucciones al pie de la letra hasta el final y una vez que aprendas podrs hacer lo que
te de la gana en otra cuenta, con tu pgina web definitiva, oki? Es para que no te lies durante estas
lecciones.
Terminado el sermn, je je je, pasamos a configurar el Html-Kit para poder subir la pgina de la
leccin al nuevo servidor, oki?
Configuracin del nuevo Servidor en el Html-Kit

Recuerdas cuando creamos la carpeta local para colocar dentro los archivos de la web? Pues vamos a
hacer algo muy similar, vers.
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
con y donde van apuntados.
(1) Aqu pon la direccin de tu FTP. Suele empezar por ftp.nombredelservidor.. Otras veces en lugar
de por ftp comienza por www, 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 (recomendado para seguir
el curso).
(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 web-
ejemplo-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) En ocasiones al registrarte en un servidor te indican la ruta inicial 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. Para qu sirve? Simplemente indica al Ftp cul ser la
carpeta raiz que se va a mostrar. Lo entenders con el tiempo, no es muy importante.
(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.... un rollo, vamos, je je.
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:
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 contruccin". Esa pgina la pone el propio hosting mientras que t no subes la tuya.
Ojo! 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 (vario 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.
Estas en el trabajo (no diremos nada...) donde seguramente tienen un proxy que impide
la conexin de FTPs. Pruebalo entonces desde casa.
Los datos que has colocado no han sido escritos correctamente. A veces copiar y pegar no
funciona (pues aade un espacio en blanco al final). Prueba a escribirlo a mano.
Puede que los datos de usuario o contrasea los pusieras con alguna mayscula y has de
escribirlo igual que lo pusiste al registrarte.
No has pagado la conexin a internet este mes o el gato le ha dao un bocao al cable...
Si no logras conectarte verificando estas medidas, pregntanos en el foro CCTW.
Qu? Ha sido facil? Si tienes problemas con esto lanza tu pregunta en el Foro CCTW, en la seccin
"Problemas de Conexin", oki? y recuerda indicarnos cul es tu hosting para poder ayudarte mejor, y la
direccin, etc, etc.
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 como 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 (Ojo, el de la carpeta
"web-ejemplo-cctw-internet", no vayas a borrar el de la carpeta "web-ejemplo-cctw-local"!!). Para
ello basta con hacer clic sobre l una vez con el botn derecho del ratn y escoger "Delete..." que
significa Borrar. Al final aprendes ingls y todo, je je je.
Te preguntar si ests seguro. Yo se que seguro seguro lo que se dice seguro... no lo vas a estar, pero
como confias en lo que yo te diga, le dirs que si, je je je. Dale sin miedo. Tenemos ahora el hosting
totalmente vacio. Vers que poco tardamos en llenarlo de tonterias, ja ja ja.
Subir el primer archivo

Como sabes, para que la gente vea tu web, sus archivos han de estar en el hosting. De nada sirve
tenerlos en el Pc. Por tanto los tenemos que pasar desde la carpeta amarilla "web-ejemplo-cctw-
local" hasta la carpeta azul "web-ejemplo-cctw-internet". Lo ideal sera pinchar desde la carpeta
local y arrastrarlos hasta la otra, pero por el momento el Html Kit no nos permite esa opcin. Ando
investigando si hay algn mod para arreglar esto, pero por el momento nos tendremos que conformar
con el mtodo siguiente.
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-internet" (en adelante la llamaremos simplemente "internet", que
me estoy cansando de ese nombre tan largo, je je) 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:
No se ve ni la sonrisa, ni la imagen de fondo, ni el buzn ni se estn respetando los estilos css. Por
qu puede ser? Este es el error ms frecuente al principio y por eso te pido que prestes atencin a
esto.... Si no subes el archivo correspondiente, no se ven los elementos. Si no se ve el buzn es porque
no se ha subido (upload) el archivo del dibujo del buzn. Lo mismo para el fondo. Y si los estilos no se
estn respetando es porque no se ha subido an la Hoja de Estilo (estilos.css). Obvio verdad? Pues vers
como caes alguna vez, je je.
En la pgina siguiente aprendemos a subir el resto de archivos y as arreglamos el problema.
Subir el resto de archivos al servidor

Esto es fcil, pues lo acabas de hacer hace un momento con el index, no? Has de 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 carpeas

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":
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 "web-
ejemplo-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. Ojo!
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, vale? Pues
dale, a ver si lo consigues...
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. No es
emocionante? 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. An nos queda mucho por hacer, as que...
paciencia y nimo.
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

Tal y como tenemos la plantilla, queda un poco cutre, as que vamos a ponerle unos bordes a los lados
para mejorar su aspecto.
Con los bordes hay quetener 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.
Dnde se define un borde

Si an te acuerdas de lo explicado al principio de las lecciones (esperemos que s...) nos propusimos
definir los contenidos en el cdigo html de las pginas dejando la definicin del aspecto en la Hoja de
Estilo. 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. Cmo podramos hacer
esto?
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

Para practicar, vamos a dibujar algunos bordes en el ejemplo que llevamos hecho. 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 estilo-
general.css la guardamos y hacemos vista previa para ver que ha ocurrido.
Vaya, ms problemas.... ahora resulta que en Internet Explorer se ve bien, pero con el Opera se nos
estropea la estructura... Esto lo arreglamos ahora mismo 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... o al menos.. eso espero. Si no es as
dmelo en el Foro CCTW vale?
Bordes para el resto de capas

Bueno, 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... se
entiende esto?...).
A la capa o div llamada navegacin 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
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. Ya sabes usar los bordes y la pgina tiene mejor pinta.
En adelante la mejoraremos an ms hasta que quede totalmente profesional...
Esquinas redondeadas para las capas de la web

Los bordes no quedan mal del todo, pero si consiguiramos redondear las esquinas ya sera para sacar
nota, verdad? Pues vamos all.
No existe ninguna propiedad por el momento para conseguir mediante css ni html crear el efecto de
redondeado de aristas o esquinas, pero yo que soy muy listo... he descubierto la forma de hacerlo de
otro modo. Cmo? Simplemente 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, etc (el etc depende solo de tu imaginacin).
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.
Para no mezclar mucho las cosas, partirmos aqu de algunas imgenes ya hechas. Las
usaremos para este ejemplo de pgina web que estamos haciendo y te dejo a t que crees las tuyas para
que la pongas en tu propia web, oki?
Para empezar, cpiate estas dos imgenes y pgalas en la carpeta "objetos" para poder seguir estas
lecciones. Por si no recerdas cmo se copiaban imgenes de otras webs, te recuerdo que solo tiene que
hacer clic con el botn derecho del ratn sobre la imgen y escoger la opcin "Copiar Imagen..." (o algo
parecido). Luego seleccionas la carpeta de tu disco duro donde la quieres pegar (la carpeta objetos) y
listo.
Se trata de imgenes con extensin gif y con fondo transparente. Gurdalas ponindoles de nombre
curva-superior.gif y curva-inferior.gif
A continuacin veremos paso a paso como poner estas imgenes en la parte alta y baja de la pgina
web para conseguir un efecto ms profesional.
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="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: no-
repeat }
Qu hemos definido conesa lnea de estilo? Le hemos dicho que la imagen de fondo ser curva-
superiorgif, que est en la carpeta objetos y que no se repita. Si ahora guardas la hoja de estilo estilo-
general.css y haces vista previa desde el Html Kit vers este resultado.
Vaya mierda, que decepcin. Se ve exctamente lo mismo que antes de insertar la capa, nada de
imagenes con bordes redondeados... qu ha pasado? Bueno, como la capa curva-superior no contiene
nada de nada en su interior (en el html) el navegador la muestra con una anchura de cero y una altura
cero, por lo que vemos... cero de esa capa y por tanto nada de imagen de fondo. Para arreglarlo basta
con ponerle algo de contenido a esa capa, como por ejemplo una letra o una palabra, pero como no
quiero que aparezca nada de eso, lo que haremos ser definirle en la hoja de estilo una anchura y una
altura. Cul? pues la misma que tiene la imagen y asi nos aseguramos que se ve entera.
#curva-superior { background-image: url(objetos/curva-superior.gif) ;
background-repeat: no-repeat ;
width:800px ;
height: 12px }
Has visto? 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,
una palabra mgica nueva, que no vamos a explicar ahora pero que puedrs encontrar en el Curso de
Estilos CSS. Lo que hemos de aadir es esto:
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 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. Te lo recuerdo paso a paso y as terminas de pillarlo, vale?
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="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) ;
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 }
Repito, he eliminado el border: black 1px solid que le daba borde a los cuatro costados y he
colocado en su lugar el borde por la izquierda, derecha y arriba solamente.
4 .- Guardamos la hoja de estilo y obtenemos esta visin.
Uploading... Subiendo los archivos al servidor

Aunque ya lo hemos hecho antes con el index.html y algunos archivos de la carpeta objetos, vamos a
repetir cmo se suben los archivos al servidor y as aprovechamos para subir estos ltimos que hemos
creado, vale? As quedar todo un poco ms claro y no lo olvidaremos (espero...).
Si no recuerdo mal, desde esa vez anterior 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:
Cmo colocar el logotipo con enlace en la web

Ya se que an es pronto para que tengais el banner o logotipo de la web listo, pues seguramente an
nisiquiera tienes claro de qu va a tratar, pero 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.
En cualquier caso, te recuerdo que este ejemplo que estamos "fabricando" debes seguirlo al pie de la
letra para no perderte en ningn paso. Luego, en tus experimentos puedes colocar lo que te de la gana
, oki? je je.
Bien, vamos a partir de un banner genial, el de CCTW que nos ha creado nuestra amiga Yaneth (con
tu permiso...). Imagino que ya sabes copiar y pegar imagenes desde una web, verdad? Pues copiate 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, oki?
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? 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 guapa o quien sabe, quizs publicidad para ganar algo de dinero extra y
pagarnos el hosting de la web, no?
Pues segn eso, vamos a crear dos divs dentro del div cabecera. Los llamaremos... logotipo y ...
publicidad, por qu no. As que, abre la plantilla.html con tu Html Kit, y ve a la vista de cdigo para
cambiar esta lnea (te recuerdo que 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>
Como ves, 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, te acuerdas? 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 estilo-general.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. As, en orden, nos ser ms fcil encontrarlo todo.
Bien. 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 ? Venga, haz memoria... qu propiedad permite que podamos
poner una a un lado y la otra al otro lado? A ver si te haces una chuleta! (en Mejico creo que se llama
acorden, je je).
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 quedado...
excto, una verdadera mierda , je je je. 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 ;
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. Esto ya pinta
mejor, no?
Solo nos queda ponerle el enlace hacia la pgina principal. Eso lo vimos ya, as que pongo
directamente la lnea, vale? Abres la plantilla.html y a esta lnea:
<div id="logotipo">
</div>
le aades esto que marco en negrita:
<div id="logotipo">
<a href="index.html">
</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, pero es algo que veremos en su momento. Si ves que se me
olvida me lo recuerdas en el Foro CCTW!
Cmo colocar el men horizontal en enlace en la web

Aunque ms adelante veremos como crear mens ms complicados en la parte superior, vamos a
comenzar por uno sencillo para no asustarnos e ir cogiendo base.
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:
<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>, te acuerdas?
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. Sorpresa? 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 mgica adecuada en la hoja de estilos, que para
eso est.
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. Como era de esperar... vemos un
autntico churro, pero 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. Vers
que bien nos va a quedar .
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. A cul crees que hay que ponrsela? Pues por ejemplo a la lnea #navegacion
li, pues esa lnea contiene las propiedades de cada una de las secciones del men, verdad? 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, que bien.
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 para aclararme, je je je. 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 }
Si recuerdas, 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,
no? Como no consigo centrarlos fcilmente vamos a hacerlo de otro modo. 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

Solo nos falta ya colocarle los enlaces a los elementos del men. Eso si que debes saberlo ya, pero lo
repetimos para recordarlo. 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:
<ul>
<li><a href="#">Seccin 1</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 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

El men lateral qued ms o menos bien, pero estars de acuerdo en que puede mejorarse, verdad?
Pues vamos a ello. 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.. ah es donde entra el genio que llevas dentro... o no... je je
je.
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
Imagino que imaginas lo que toca hacer ahora... un poquito 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>
</ul>
</div>
Bueno, realmente 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. Yo 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. Y todo arreglado.
De modo que, lo nico que hemos de retocar en el cdigo Html de la plantilla.html ser el incluir el
ttulo. Si recuerdas de lecciones anteriores, 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, no una ele!).
El men anterior con el ttulo puesto quedara entonces con este cdigo Html:
<div id="menu">
<ul>
<h1>Ttulo de Seccin 1</h1>
</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. Te
acuerdas como se haca? Je je je, que memoria...
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. Te acuerdas?
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. Qu 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? Espero que si, je
je. Y si no se entiende, dmelo en el Foro CCTW e intento explicarlo mejor, oki? Te lo agradecera
mucho!
Bien, pues si miras en la hoja de estilo-general.css, vers que tenemos al final del todo esta lnea:
h1 {font-size: 1.2em; color:blue ; font-weight: bold ; text-
decoration: 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.
Cmo lo arreglamos? Fcil, la situamos antes de la otra y listo, oki?
Para no perdernos, te dejo 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, oki? Debe tener ese orden
para no liarnos lecciones sucesivas:
* {text-indent:0px ; margin:0px ; padding:0px ; border:0px}
decoration: underline ;
text-align: center}
h2 {font.size: 1.1em; color:blue ; font-weight: bold ; text-
decoration: none ;
text-align: center}
body {text-align: center }
#global {width:800px ; margin:4px auto }
width: 800px ;
height:12px ;
overflow: hidden }
#logotipo {width:280px ; float:left }
#publicidad {width:518px ; float:right ; margin-top:25px ; font-size:
16px }
height:20px}
20px }
#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 {}
width: 800px ;
height:12px ;
overflow: hidden }
a:link {}
a:visited {}
a:hover {color:red ; text-decoration:underline ; background-color:
silver}
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.
Parece un poco lio tanto cdigo, verdad? Pero imagino que mirndo lnea por lnea ms o menos sabes
de que va todo, no? De hecho lo has ido escribiendo t mismo a lo largo de estas lecciones... Si no te
aclaras mucho siempre puedes empezar desde el principio y puedes ir repasando porqu se puso cada
cosa. No te vendra mal para ir repasando estilos.. No te asustes, pronto, con un poco de ms prctica
estos cdigos no tendrn secretos para t. Te aseguro que muchos de los que se hacen llamar Webmaster
no tienen ni idea de estilos ni de capas. Ya eres mejor que la mayoria!!
Volviendo al men
Guardando estilo-general.css y haciendo vista previa a la plantilla.html podemos ver esto:
Bueno, quizs quede mejor sin el subrayado y con una letra ms pequea, verdad? 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....
Mucho mejor, no? Ahora cmbiale el tamao por 12px que as quizs sea un poco pequea de ms.
A veces parece mentira como cambia una web con solo ir retocando la hoja de estilos, verdad?.
Sigamos investigando a ver si logramos colocarle las imgenes, vale?
Colocando la imagen superior

Las imgenes de fondo ya sabes ponerlas as que te dejo solo con esto.... je je je. Te has puesto
blanco? ja ja. Venga, te ayudo un poquito.
Ya dijimos que la imagen superior se la ibamos a poner de fondo al ttulo del men, as que aadimos
las palabras mgicas 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:
Nos vamos acercando eh? Vemos dos "fallos". Me encantan los fallos, as aprendemos ms! je je je.
El primero es que la imagen se repite por la derecha y el segundo fallo es que se ven las esquinas de
color blanco y queda un poco feo.. bueno, bastante feo, si que si.
Evitando el blanco de las esquinas

Esto va a ser rpido. 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. (no es necesario que lo hagas, espera un poco, impaciente! )
Amoldando la anchura de la imagen

Este fallito se arregla con un programa de dibujo, variando su anchura. Por ejemplo con el Paint de
Windows que imagino que lo tenemos todos. Si no lo tienes seguramente cualquier otro programa sea
capaz de hacer lo mismo. Pero para no perder mucho tiempo te dejo aqu los dos archivos ya arreglados
y en otro momento, cuando encuentre un software gratis de dibujo que est bien os lo explico paso a
paso todo (en realidad basta con decirle al programa que cambie el ancho de la imagen para que tenga
150 pixeles, que es el ancho que le dimos a la capa menu, de ese modo coincidirn ambos anchos).
Las nuevas imgenes ya retocadas

Las nuevas imgenes, con la anchura adecuada (que coincide con el ancho de la capa menu) y con las
esquinas ya pintadas de naranja son estas dos:
Guarda esos dos archivos (gurdate esas imagenes en objetos), sustityelos por los archivos que
tenas en la carpeta objetos y seguimos.
Si ahora haces vista previa de nuevo, 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:
Ahora si! Ahora vamos a por el fondo de la parte inferior. A ver si nos sale tan bien como este!
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:
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? A
ver, a ver... Pues claro! 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:
background-image: url(objetos/menu-parte-inferior.gif);
background-position: bottom }
Bottom significa culo o parte de abajo. Haciendo vista previa (como siempre, guarda antes la hoja de
estilo) la cosa queda.... genial, sencillamente genial! Mira:
Qu te parece?
ltimos Retoques
Fjate ahora. Abre tu plantilla.html con el Html-Kit si la tienes cerrada y aade un tercer enlace al
men. Ya sabes, 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>
</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, no? je je je.
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, genial,
fenomenal... er.. no tengo palabras, casi lloro de emocin, t no? je je.
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, no? 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: lorange ; width: 150px ; float:left ;
background-position: bottom ;
padding-bottom:5px }
Ms cosas? Venga vale.... a ver... SI! 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 poquillo feo. Cmo lo
arreglamos? El margen que vemos por su 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:
y ah est la solucin. Vemos que tiene definidos unos margenes de 4 por arriba y por abajo, 6 pixeles
por la izquierda y un cero patatero por la derecha. Ponle un 8px por ejemplo en lugar de cero y fjate
como ahora se ve mejor, verdad?
Smos unos Cracks!

El efecto ahora es para morirse de gusto! GUAU!!
Por cierto. 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, oki?
Recordando el cdigo que llevamos hasta el momento

Si te has fijado, si no sigues al pie de la letra las explicaciones y se te ocurre crear alguna capa ms,
alguna capa menos, otros textos, otros prrafos etc distintos a lo que aqui te comento lo nico que
conseguirs es perderte, pues cuando ms adelante te diga "en el prrafo donde pone Bienvenido haz
esto y lo otro" no sabrs a qu me refiero.
Es por eso que debes seguir todo esto al pie de la letra, sin improvisar nada, sin cambiar nada de
nada de nada.
Claro que por el camino se te van a ocurrir ideas propias e incluso vas a querer ir remodelando lo que
yo te explico para que el ejemplo se vaya pareciendo a tu idea de web, pero eso es algo que puedes
hacer a la par, pero en otra carpeta distinta, de modo que la del ejemplo de estas explicaciones quede
tal cual la explico, oki? En otra carpeta puedes hacerlo a tu manera y de hecho, es lo que deberas estar
haciendo ya para ir asentando lo que aprendes y para ir ensayando etc.
Por si acaso te has columpiado ya (seguro que si, je je) te dejo ahora los cdigos de los archivos
plantilla.html y estilo-general.css para que verifiques que son iguales a los tuyos, oki?
A veces puede que te diga... "en la lnea 15 de la hoja de estilo cambia tal por cual". As que, procura
que sean exactamente iguales para no perderte. No solo es por eso claro, es porque tanto en Html como
en CSS el orden que tomen las lneas tiene gran importancia. En CSS colocar cierta lnea al principio o al
final puede cambiarlo todo (si no te lo crees prueba a colocar la lna del asterisco al final y vers como
todo cambia...).
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="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>
<ul>
</ul>
</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>
</body>
</html>
Cdigo CSS de estilo-general.css

* {text-indent:0px ; margin:0px ; padding:0px ; border:0px}
decoration: underline ;
text-align: center}
h2 {font.size: 1.1em; color:blue ; font-weight: bold ; text-
decoration: none ;
text-align: center}
body {text-align: center }
#global {width:800px ; margin:4px auto }
width: 800px ;
height:12px ;
overflow: hidden }
#logotipo {width:280px ; float:left }
#publicidad {width:518px ; float:right ; margin-top:25px ; font-size:
16px }
height:20px}
20px }
#contenido {background-color: orange ; border-left: black 1px solid ;
#contenido p {margin: 5px 10px 0px 10px ; text-indent: 15px}
#menu {background-color: lorange ; width: 150px ; float:left ;
background-position: bottom ;
padding-bottom:5px }
#menu h1 {text-decoration:none ; font-size:12px ; padding-top:12px ;
background-image: url(objetos/menu-parte-superior.gif) }
width: 800px ;
height:12px ;
overflow: hidden }
a:link {}
a:visited {}
silver}
a:active {}
Bien. Y este es el aspecto que ha de tener esa plantilla. Vamos ahora a la siguiente leccin? Venga,
vamos! Pero antes os dejo una chorrada, vale? je je je. Esto es para ver la progresin que hemos
logrado. Os gusta? je je je, tonterias que se me ocurren! ja ja ja.
El pie de pgina de nuestra web

Ves como poco a poco esto va tomando forma? 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 por qu no, unos enlaces al futuro foro, top y directorio de nuestra web (todo
eso lo aprenderemos ms adelante).
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. Los hobbies estn muy bien, pero
si nos salen gratis... mejor que mejor, no? Je je je.
Dnde va el pie de pgina?

Como bien habrs adivinado el pie de pgina lo vamos a colocar dentro de la capa #pie (tampoco hay
que ser muy adivino...). Este es su cdigo en la plantilla.html en estos momentos:
Cada uno tiene sus manias, y yo no voy a ser menos. 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 recogidito. 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 ahora mismo, las escribo 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 que borro el texto "Este es el pi de pgina"
que haba antes):
<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:
Seguimos?
Colocar las capas en lnea

Como era de esperar, nos ha pasado como cuando hicimos lo del logotipo. En lugar de aparecer una
capa junto a la otra nos han salido una debajo de otra. Recuerdas como arreglamos esto la otra vez?
Venga, haz un esfuerzo!! je je. Lo arreglamos colocndole 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}
#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?

Ahora vamos a comprender una cosilla de las capas y del css que nos vendr muy bien en el futuro. Si
haces vista previa te encontrars con esto:
Que habr pasado con el borde? Pues te lo explico. 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.
Quizs no me creas, pero 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, no? 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.
Venga vale, 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):
border-right: black 1px solid ;
border-top: black 1px solid ;
height: 65px ;
}
Haciendo vista previa vemos que hemos conseguido esto:
Ves? 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. Los bordes si que debes ya saber
colocarlos, verdad? De todas formas te ayudo. 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 ;
#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.
Como vers, aunque la primera vez te son a chino, ahora ya dibujar un borde no guarda muchos
secretos para t. Lo mismo te va a ocurrir con el resto de cosas, la primera vez no se entiende muy bien,
pero en cuanto aparezcan dos o tres veces en las lecciones seguro que te acabas familiarizando.
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. Como ejercicio de repaso te propongo algo, a ver si lo consigues, oki?
Ejercicio de prctica
Como ejercicio de prcticas, 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. As
terminars de familiarizarte con todo esto, oki?
Pero intntalo de verdad antes de mirar el cdigo de abajo. 3, 2 1... venga!
El cdigo CSS de las 4 capas del pie han de quedar como te indico abajo. Si el ejercicio te sale bien y
funciona, enhorabuena! pero pon este otro para que as tanto t como yo tengamos el mismo y as no te
pierdas en las lecciones siguientes, oki?
#pie {border-left: black 1px solid ; border-right: black 1px
solid ;
border-top: black 1px solid ; height: 65px }
#pieuno {float:left ; width:150px }
#piedos {float:left ; width:498px ; background-color: silver}
#pietres {float:left ; width:150px }
Cmo colocar los enlaces del pie

Los enlaces ya vimos como se colocaban cuando hicimos los mens. 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, verdad? Vamos all.
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, como siempre nos pasa antes de retocar la hoja de estilo... nos encontramos
este churro...
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, no?
Intntalo t, oki? je je je.
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 tooodos 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 puntito.
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. Lo bueno es que funciona, y lo malo es que tenemos que crear dos lneas ms de codigo css y no
tenemos ganas de escribir tanto... je je
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. Lo bueno es que matamos dos
pjaros de un tiro y lo malo... lo malo es que te metan en el ojo un palo, ja ja ja.
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.
.............
#pie {border-left: black 1px solid ; border-right: black 1px

solid ;
border-top: 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

Es curioso, 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 (al menos usando el Internet Explorer). Vamos a probar el truco aquel que te
cont, el de poner todo el cdigo html de la lista en la misma lnea, recuerdas? 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, oki?
<div id="pietres">
<ul>
<li><a href="#">Directorio</a></li><li><a
href="#">TopSite</a></li><li><a......
</ul>
</div>
Pues s, era eso, je je je.
An puedes disminuir algo ms el espaciado entre los enlaces de esas capas. El problema es que no
sabra explicrtelo muy bien, pues a simple vista no tiene mucho sentido, pero el caso es que funciona.
En fin, te digo cmo y pasamos de la explicacin por el momento pues me llevara unas cuantas pginas
convencerte del porqu, je je. Adems en el ejemplo no lo dejaremos as, sino como lo tenemos hasta
ahora, oki? 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, oki? salo t en tus cosas si lo necesitas.
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

Ya vimos cmo conseguir cambiar el estilo de los enlaces de toda la web de una sola vez. La cuestin
ahora es... y si quiero tener varios enlaces con aspectos distintos? Pues como siempre, lo conseguimos
gracias a la hoja de estilos.
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 }
a:link {}
a:visited {}
silver}
a:active {}
Y por qu incluyo la lnea del asterisco *? Sencillo, porque como ya hemos dicho antes, esa lnea, al
llevar asterisco afecta a todos los elementos de la web.
Bien. 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, 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>
Qu ocurre entonces? 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
estilo-general.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.
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 ; background-
color: 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, mgico, verdad? je je
Como esas propiedades son realmente horribles, cmbialas por estas otras para que al menos sean...
presentables, je je je:
#pie a {color: blue; text-decoration:none ; display: block }

#pie a:link {}
#pie a:visited {}
#pie a:hover {color:black ; text-decoration:underline ; background-
color: white }
#pie a:active {color:black}
Ahora se ven un poco mejor.
Eliminar el fondo del enlace del logotipo

Ahora que sabemos variar las propiedades de solo algunos enlaces determinados sin variarlos todos,
podemos eliminar ese fondo gris que aparece al poner el ratn sobre el 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 tan feo. Qu propiedades le pondras para evitar eso? Realmente,
como no contiene textos me da igual, solo me interesa eliminar el fondo gris y eso lo consigo
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:
#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. Eres todo un maestro!
Cmo instalar un men desplegable en una pgina web

Se que esta ser la leccin estrella, as que tratar de explicarlo bien porque para principiantes
puede resultar un poco complicado. pero bien explicado seguro que lo consigues. Se trata de insertar un
men desplegable que colocaremos donde ahora tenemos el men horizontal, debajo del logotipo.
Por si alguien no sabe a lo que me refiero lo explico un poco. Se trata de un men horizontal en el
que cuando colocas el puntero de ratn sobre una de sus secciones, esta se abre mostrando el resto de
subsecciones. Es un recurso muy bueno pues permite tener multitud de enlaces en una pgina web sin
necesidad de tenerlos todos visibles continuamente, lo que nos ahorra espacio en la web para otras
cosas. Adems, resulta bastante elegante.
Si sigues estas pginas conseguirs colocar en tu plantilla este men desplegable.
Conseguir los archivos necesarios

Para instalar un men desplegable como el que vamos a ver necesitaremos unos cuantos archivos que
contienen el cdigo necesario para definir las distintas secciones, el estilo css que tendr, que definan
el movimiento de desplegue del men etc. No te preocupes porque en esta web encontrars todos ellos.
Despues de descargarlos y guardarlos en la carpeta que te indique, tendremos que hacer unos retoques
para personalizarlos un poco a nuestro gusto. Cuando termines la leccin y tengas tu men desplegable
en tu pgina web de ejemplo sabrs sin problemas colocarlo ms tarde en tu propia pgina web, as que
hazme caso en cada uno de los pasos que te muestro y sguelos al pie de la letra para no perderte. Ms
tarde puedes hacer tus propios experimentos, pero por ahora hazme caso y sigue las instrucciones tal
cual te las muestro, oki?
Los archivos necesarios son estos. Descrgalos y guardalos en el lugar donde se indica en cada uno de
ellos:
estilo-menu-desplegable.css (en la raiz de tu web)
no-tocar.txt (en la raiz de tu web)
definir-menus.txt (en la raiz de tu web)
numero-de-menus.txt (en la raiz de tu web)
blanco.png (en la carpeta "objetos")
gris.png (en la carpeta "objetos")
punto.gif (en la carpeta "objetos")
submenu-abierto.gif (en la carpeta "objetos")
submenu-cerrado.gif (en la carpeta "objetos")
espaciador.gif (en la carpeta "objetos")
fondo-activo.gif (en la carpeta "objetos")
fondo-no-activo.gif (en la carpeta "objetos")
Te los dejo todos comprimidos en dos archivo zip. En el primero estn los archivos que has de pegar
en la carpeta objetos y en el segundo los que tienes que colocar directamente en tu carpeta raiz.
Bien, una vez tienes todos esos archivos guardados en las carpetas correspondientes seguimos con las
instrucciones. Recuerda dejarles los mismos nombres que yo he colocado, y cada uno en su lugar (en su
carpeta) o no funcionar bien este invento!
Los estilos css del men desplegable

Este men desplegable se basa en una hoja de estilos llamada estilo-menu-desplegable.css y es el
primero de los archivos de la lista anterior. Como ya sabes, para que una pgina web pueda leer una
hoja de estilos hay que colcocar dentro del head una lnea de cdigo. Te acuerdas de la que pusimos al
principio para la hoja de estilos estilo-general.css? Pues ahora hemos de colocar otra idntica (pero con
este otro nombre) seguida de aquella primera.
Trata de hacerlo t mismo sin mirar ms pistas. Deberias saber hacerlo! je je je. El cdigo de la
cabecera (head) de tu plantilla.html ha de quedar as:
.....
<head>
<link rel="stylesheet" href="estilo-general.css"
type="text/css" media="all">
<link rel="stylesheet" href="estilo-menu-desplegable.css"
</head>
.....
Con esta lnea conseguimos por tanto que la plantilla lea los estilos de la hoja de estilos del men.
Por suerte ya est terminada de modo que no vamos a entrar a analizarla, oki? Lo importante es que
funcione! je je je.
Asociando los scripts de men desplegable
Algunos mens desplegables funcionan tan solo con "trucos" hechos con css, sin ms, pero este men
desplegable que os presento est hecho con scripts. Como an no los hemos estudiado no os lo explico e
iremos directamente a colocarlos en la web.
Igual que el cdigo Css, el cdigo de los scripts puede o bien escribirse directamente dentro del html
de la pgina o bien guardarlo todo dentro de un archivo y luego hacerle una llamada desde el head de la
web (igual que se hace con la hoja de estilos) que es lo que vamos a hacer.
Todo el cdigo script que necesita este men se va a guardar en tres archivos diferentes. En principio
a estos archivos se les suele poner extensin .js pero como algunos vamos a tenerlos que editar para
retocarlos les vamos a poner extensin .txt para que nos sea ms fcil abrirlos con el block de notas
(tranquilo, ya llevan la extensin .txt).
Abre de nuevo la plantilla.html y coloca estas nuevas lnea debajo de la que hemos escrito antes:
.....
<head>
<link rel="stylesheet" href="estilo-general.css"
<link rel="stylesheet" href="estilo-menu-desplegable.css"
<script language="javascript" src="no-tocar.txt"
type="text/javascript"></script>
<script language="javascript" src="numero-de-menus.txt"
</head>
.....
Lo que hacen realmente estas lneas es insertar en su lugar todo el contenido de los archivos txt. Otro
modo habria sido colocar el contenido directamente, pero de este modo ganamos dos cosas. Por un lado
evitamos tener demasiado contenido en las pginas html y por otro lado evitamos tener que reformar
todas las pginas html de la web cada vez que queremos retocar algo de ese cdigo. Para cualquier
cambio solo necesitamos de este modo retocar el archivo txt y no todas las pginas de la web. Todo un
invento, no?
Ya tenemos la hoja de estilos y las hojas de scripts relacionadas. Ahora vamos al siguiente paso.
Retocar el Body
Para que estos scripts funcionen bien, nuestro servidor tiene que leerlos (cargarlos) antes de mostrar
el men. Esto se soluciona facil y rpidamente retocando la linea <body> para que ponga esto otro:
<body onload="init();">
Si quieres que te diga la verdad, an no se muy bien qu es lo que hace exctamente esa lnea ;)
pero creo que sirve para eso, para que cuando el navegador llegue a ella ste se vea obligado a leer los
cdigos script incluidos en la pgina antes de seguir leyendo contenidos del body.... creo...je je je..
Otro archivo con Scripts para el Body

Como vers an nos queda un archivo de scripts pendiente (definir-menus.txt). Esta otra parte de
cdigo ira dentro del Body. Es necesario colocarlo en cualquier lugar despus de que ya se haya definido
el men al que vamos a asociar este desplegable, es decir, despus del cdigo html del div navegacin.
Para no liarnos lo que vamos a hacer es colocarlo justo antes del final del body, es decir, justo antes de
la lnea </body>, oki?
Igual que antes, en lugar de pegar unas cuantas lneas de scripts, lo que hemos hecho es meterlas
todo dentro del archivo definir-menus.txt por lo que ser solo necesario hacer una llamada a ese
archivo igual que hemos hecho antes. El cdigo de la plantilla.html ha de quedar as (recuerda, la lnea
la ponemos antes de la lnea </body>):
.......
</div>
<script language="javascript" src="definir-menus.txt"
</body>
</html>
No dirs que no es facil, no?
Asignando estilos a las secciones de nuestro men de navegacin

Al igual nosotros al principio hemos definido una capa llamada cabecera, otra llamada logotipo, etc,
en los archivos estos tan raros que acabamos de pegar en nuestra carpeta de ejemplo se ha definido un
tipo de men (que va a ser desplegable) y se le ha puesto el nombre de desplegable1.
Por lo tanto, para que una seccin de nuestro men de navegacin sea desplegable hemos de
aplicarle esa clase llamada "desplegable1". Para hacer esto basta con abrir la plantilla.html y escribir
esto:
......
<ul>
<li><a id="desplegable1" href="#">Seccin 1</a></li>
</ul>
</div>
......
Con esto tendremos un men desplegable asignado a la Seccin 1. Ms adelante seguiremos
colocndole desplegables a las otras dos secciones.
Si ahora guardas la plantilla.html y le haces una vista previa podrs ver lo que hemos conseguido.
Cuando pones el cursor encima de Seccin 1 aparece un deplegable bastante profesional. Eso si, los
apartados que aparecen seguramente no sean los que t quieres. Esos que puedes ver estn predefinidos
en uno de los archivos de scripts que hemos copiado en la web. Si quieres modificarlo para que
aparezcan los apartados que t quieres y adems colocarle las rutas hacia las pginas que deseas
tendrs que retocar esos archivos. Quieres aprender conmigo? Pues adelante!
Personalizando los textos de los enlaces en el men desplegable

El archivo donde se guarda la informacin de los apartados y subapartados del men desplegable se
llama definir-menus.txt y ha de estar en la raiz de tu web. Al tener extensin .txt te ser fcil abrirlo
con el block de notas de windows. Abrelo y vamos a verle las tripas.
if (TransMenu.isSupported())
{
var ms=new TransMenuSet
(TransMenu.direction.down,1,0, TransMenu.reference.bottomLeft);
var desplegable1 = ms.addMenu
(document.getElementById('desplegable1'));
desplegable1.addItem('Seccion 1','ruta');
var desplegable1_0 = desplegable1.addMenu(desplegable1.items[1]);
desplegable1_0.addItem('Sub-Seccion 2.1','ruta');
TransMenu.renderAll();
}
Por cierto, recuerdas que quedamos en que los cdigos html los ibamos a poner en azul y los cdigos
css en verde para diferenciarlos? Pues a los codigos de scripts los pondremos en rojo.
No intentes adivinar nada, je je je. Esto seguramente no tenga ningn sentido para t y reconozco
que tampoco tiene demasiado para m, ja ja ja ja. Nos ser suficiente con saber qu es lo que debemos
retocar para que nuestro men desplegable funcione como queremos, no?
En negrita puedes ver el nombre de este tipo de desplegable. Te dije que se llamaba desplegable1.
Eso no tienes que modificarlo. Lo nico que has de retocar ser lo que te indico en oscuro. Donde pone
Seccion 1, Seccion 2 y Seccion 3 has de colocar el texto que quieres que aparezcan en esas tres
secciones del desplegagle. Si te fijas en el ejemplo que hemos hecho, al poner el cursor sobre Seccion 2
se abre otro desplegable mostrando las sub-secciones 2.1, 2.2 y 2.3. Si modificas esos textos en el Script
(sealados tambin de oscuro) modificars el texto que aparece en el men.
Vers que junto al texto pone tambin ruta. Ah es donde has de escribir la ruta de la pgina que
pretendes que se abra cuando se haga clic sobre ese enlace.
Esto no tiene mucha ms historia, no? Parece complicado, pero llevando cierto orden creo que lo vas
a conseguir.
Aumentando el nmero de secciones

Imaginemos ahora que has puesto los textos que quieres y las rutas adecuadas, pero que necesitas
aadir dos secciones ms. Cmo lo conseguimos? Pues basta con aadir ms lneas a ese script. Por
ejemplo, si deseamos dos secciones ms, las secciones 4 y 5, bastara con aadir estas dos lneas al
script:
{
}
Fcil, no?
Aumentando el nmero de Sub Secciones

Ahora imaginemos que quieres colocar 2 subsecciones a la seccin 5. Sera suficiente con insertar
estas otras tres lneas:
{
}
Ves que sencillo? Basta con aadir la linea esa que empieza por var y luego tantas lneas como
subsecciones queramos. Luego acurdate de ponerle el texto que quieras y la ruta correspondiente a la
pgina que deseas abrir con cada nueva subseccin.
Una cosa importante que an no te he dicho. Ves ese nmero marcado en oscuro? Ese cuatro
encerrado entre corchetes [4]? Te explico para que sirve. Presta atencin que quizs sea un poco
complicado.
El nmero que has de colocar entre esos corchetes ha de ser el nmero de la seccin a la que
pertenece pero restndole uno. Es decir, como estas ltimas subsecciones pertenecen a la seccin 5, le
restas uno y colocas all un 4.
Ves como en la lna correspondiente a la seccin 2 hemos puesto antes un 1 entre los corchetes? Es
por eso, porque corresponde a la seccin 2 y por tanto, 2 - 1 = 1, ponemos un 1. Bueno, no es tan
complicado al fin y al cabo, verdad?
Para eliminar secciones y subsecciones se hace del mismo modo, eliminas las lneas que no quieres y
listo, solucionado.
Me ha costado mucho encontrar este men por internet, de modo que espero que lo aproveches bien!
je je je. Ah, esos cdigos de script no los he hecho yo (no soy tan listo! je je je) sino un tal Aaron
Boodman. Ese tio fue quin lo invento y sus crditos aparecen escritos dentro del archivo llamado no-
tocar.txt adems de otros cdigos imprescindibles para que el men funcione. Todos podeis usar ese
script que l nos cede a cambio de respetar el contenido del archivo no-tocar.txt, oki? Mis ms sinceros
agradecimientos a Aaron desde ac.
Por si solo has leido pero no has puesto en prctica estas lecciones, te dejo cmo queda la plantilla
tras estos retoques. En la pgina siguiente te enseo como hacer lo mismo con el resto de secciones de
la barra de navegacin.
Nota: Si al hacer vista previa usas Internet Explorer vers como el men aparece entrecortado. No te
preocupes, lo arreglamos en la ltima de estas lecciones, pero ya llegaremos. En el resto de
navegadores no ocurre, pero en cualquier caso, uses el que uses, tendrs que repararlo, oki?
Ms desplegables para otras secciones

Ya tenemos listo el desplegable de la Seccin 1. Vamos a ver ahora cmo ponemos desplegables
tambin a las secciones 2 y 3. Una vez controles esto vers lo fcil que te resulta colocar desplegables a
cualquier otra seccin.
Para empezar tenemos que abrir el archivo numero-de-menus.txt y veremos as este contenido de
cdigo script:
function init()
{
{
TransMenu.initialize();
desplegable1.onactivate=function()
{document.getElementById('desplegable1').className='hover';};
desplegable1.ondeactivate=function()
{document.getElementById('desplegable1').className = ''; }
}
}
De todas esas lneas, las que he marcado en negrita (bueno, quizs debera decir rojita.... je je je je)
son las correspondientes al desplegable de antes (desplegable1) y el resto de lnea son comunes para
todos los mens desplegables que pongamos.
De modo que para incluir un segundo desplegable al que llamaremos desplegable2 bastar con copiar
esas dos lneas, pegarlas debajo y cambiar el nmero 1 de desplegable1 por un 2.
Como queremos aplicar un desplegable a la seccin 2 y otro a la seccin 3, realmente debemos hacer
eso dos veces, es decir, copiar esas dos lneas que he sealado arriba y pegarlas dos veces justo debajo
de las mismas y luego, en las lneas 3 y 4 colocar un 2 donde pone un 1 y en las lneas 5 y 6 sustituir el 1
por un 3.
El cdigo final ha de quedar de este modo. Os coloreo con colores diferentes las lneas nuevas para el
desplegable2 y desplegable3, oki?
function init()
{
{
TransMenu.initialize();
{document.getElementById('desplegable1').className = 'hover'; };
}
}
No dirs que es dificil! je je je.
Aplicando estos tipos en el Html
Recuerdas cmo al principio le pusimos un id="desplegable1" al cdigo html de la seccin 1? Pues
ahora tendremos que volver a hacerlo para las secciones 2 y 3, claro. Abre la plantilla.html y modifica el
cdigo html de la parte de la capa #navegacin hasta dejarlo de este modo:
......
<ul>
</ul>
</div>
......
Ya puedes guardar y cerrar la plantilla. Si haces vista previa no notars ningn cambio an. Por qu
puede ser? Lgico, an no hemos definido los apartados y subapartados que queremos para cada uno de
estos dos nuevos desplegables. Si recuerdas, eso habia que hacerlo en el archivo de scripts llamado
definir-menus.txt
Definiendo secciones y subsecciones al resto de mens desplegables

El contenido que ya teniamos para ese archivo era este:
{
var ms=new TransMenuSet(TransMenu.direction.down,1,0,
TransMenu.reference.bottomLeft);
var desplegable1 =
ms.addMenu(document.getElementById('desplegable1'));
}
Las lneas en rojo oscuro son exclusivamente para el desplegable1. Las otras lneas del principio y del
final son comunes a todos los desplegables y no se tocan. De acuerdo? Pues para definir los desplegables
2 y 3 podemos empezar por copiar las lneas del desplegable1 y pegarlas dos veces a continuacin. Con
eso obtendremos mens idnticos al desplegable1 y luego solo tendramos que cambiar lo que
corresponda, es decir, eliminar o insertar ms lneas si queremos ms secciones o menos, cambiar el 1
de desplegable1 por el 2 o el 3, y colocar los textos y las rutas de los enlaces.
Si copiamos las lneas correspondientes al desplegable1 y lo pegamos dos veces a continuacin del
que tenemos, nos queda as (ya le he cambiado el numero 1 por el 2 y el 3):
{
var ms=new TransMenuSet(TransMenu.direction.down,1,0,
TransMenu.reference.bottomLeft);
var desplegable1 =
var desplegable2 =
var desplegable3 =
}
Ya los tenemos a los tres funcionando. Solo te queda eliminar o insertar nuevas lneas si quieres
quitar o poner ms secciones o subsecciones, escribir los textos de cada enlace y terminar de poner las
rutas a las pginas que enlaza cada enlace del men desplegable.
Ms sencillo imposible! Aqu tienes el restultado final de la plantilla con los 3 mens desplegables.
Posibles errores y fallos

Si tras estas instrucciones el desplegable no aparece puede deberse a varias cosas:
1.- Tu servidor no admite este tipo de importacin de archivos. Es decir, no admite guardar cdigos en
estos txt y luego llamarlos desde la pgina web.
2.- Has olvidado subir todos los archivos a tu servidor.
3.- Has subido algunos archivos a carpetas incorrectas de tu servidor.
4.- Has nombrado a algunos archivos con alguna mayscula, espacio, acento o smbolo raro.
5.- Te has equivocado al escribir el cdigo, o te ha faltado cambiar algn nmero (desplegable2 en
lugar de desplegable3, etc).
Si no te funciona revisa esos puntos o pregntanos en el Foro CCTW donde te ayudaremos
encantados!
Nota de Agradecimiento: Quiero dar las gracias desde aqu a Yaneth, Dnix y a todos los amigos del
foro que me ayudaron a reaparar un pequeo fallo que daba el desplegable al visualizarlo con Internet
Exporer. No se qu haria sin los colegas del foro de CCTW. Si la web est bien, el foro est cien veces
mejor, gracias a todos ellos, clao. Gracias!!!
Cmo personalizar los mens desplegables

Saba que no tardarias mucho en hacerme esa pregunta, as que prefiero adelantarme y responderte
ahora, je je je. Si, es posible hacer algunos cambios en estos desplegables. Podemos cambiar las
imgenes de los archivos que subimos al principio con solo editarlos, dibujar en ellos lo que queremos,
guardarlos y subirlos de nuevo al servidor. Los cambios sern instantaneos.
Tambin podemos cambiar el tipo de letra de estos mens, el color, etc, etc haciendo uso de nuestra
hoja de estilo, claro.
Por otro lado, si abres el archivo que hemos llamado no-tocar.txt podrs ver como muy al principio
aparecen unas cuantas opciones que puedes personalizar. Estn bajo el ttulo de "Configuration
properties". Desde ah puedes cambiar la ruta de las imagenes usadas, modificar la velocidad de
apertura y cierre de los desplegables y poco ms. El resto de cdigo de ese archivo mejor no lo toques
(a no ser que sepas lo que haces) o puede que los desplegables te dejen de funcionar.
Quieres un men desplegable transparente?

Otra cosa muy muy interesante. Recuerdas esos dos archivos llamados fondo-no-activo.gif y fondo-
activo.gif? Pues bien. El primero es una simple imagen de fondo para cada una de las subsecciones
abiertas cuando no tiene el cursor del ratn encima. El otro es el fondo que se muestra en una
subseccin cuando el ratn pasa por encima. Hasta aqu bien, pero... qu ocurre si eliminas esos dos
archivos? Qu crees que pasara?
Pues que como no tienen fondo los mens sern ligeramente transparentes, mostrandose lo que hay
detras. El efecto es genial, de veras. Haz la prueba. Pero en lugar de eliminarlos (por si acaso no te
gusta el efecto de transparencia) cambiales el nombre. Luego, si los quieres recuperar le pones el
nombre original y marchando.
Qu? Qu tl lo ves transparente? Mola verdad? je je je.
Cambiar el color de la transparencia del men desplegable

Otra cosa ms. Si te decides por el modo transparente, quizs no te guste mucho el color que queda.
Para cambiarlo solo tienes que poner el color que te guste en la linea 34 (ms o menos) del archivo no-
tocar.txt. Es una lnea as:
TransMenu.backgroundColor = "#C4CCCC"; // color of the background
(transparency set in CSS)
Si cambias lo que he sealado en negro cambiar el color de ese fondo.
Cambiando el color de la sombra del men desplegable

Adems, en ese mismo archivo un par de lneas por encima vers otra lnea similar en la que podrs
cambiar el color de la sombra.
Que creias? Que todos ibamos a tener el desplegable identico? ja ja ja.
Nota Final
Ahora ya sabes colocar un men horizontal (capa #navegacion), un men lateral (capa #menu) y
tambin uno desplegable. Seguramente sean demasiados mens para tu plantilla. Recuerda que puedes
eliminar por ejemplo el men lateral que seguramente ya no te haga falta si te decides por el
desplegable. Tambin puedes vaciarlo, pero no eliminarlo y aprovechar as ese espacio rectangular para
colocar en un futuro algn anuncio tuyo comentando alguna noticia o novedad en tu web, o para poner
publicidad, algn dibujo decorativo, etc.
Nos vemos pronto con ms lecciones!
Hasta el momento hemos aprendido...

Bueno, ya tenemos el programa instalado, sabemos usarlo un poco y hemos creado una index muy
sencilla y una plantilla ya ms avanzada. Adems ya nos suena bastante eso del cdigo Html como los
estilos CSS, que no es poco, y sabemos ya conectarnos al FTP de nuestro sitio y subir archivos (espero...
je je je). No todo el mundo usa estilos y como vers son lo mejor que hay para crear pginas web. Ahora
quizs no lo notes mucho, pero pronto vers la cantidad de ventajas que tiene. Adems sabemos enlazar
pginas que es un elemento imprescindible en toda web y hemos aprendido a colocar imagenes en capas
para dar un mejor aspecto a la pgina web, colocar un banner, mejorar el aspecto de las capas como
hemos hecho en el men lateral, e incluso ahora sabemos ya colocar un men desplegable!! No te
podrs quejar, no? .... Para ser solo cuatro lecciones no ha estado mal, no? Doli? je je je.
Y ahora qu hago?
Vers que an queda mucho por ensearte, pero parece eres ms rpido aprendiendo que yo
haciendo las lecciones, je je je. Mientras que publico ms (suelo tardar ms o menos una semana o dos
en publicar lecciones nuevas...), puedes ir haciendo experimentos, creando otra carpera local segn los
pasos vistos al principio y haciendo cosas por tu cuenta. As aprenders cosas nuevas por t mismo, que
tampoco esta mal. Pero procura no tocar la web del ejemplo o te perders en las siguientes lecciones,
pues nos basaremos en el trabajo que llevamos hecho.
Y cualquier duda que te surja pregntanosla en el Foro CCTW (hay un enlace en la parte de abajo de
todas las pginas de CCTW) y te responderemos enseguida. Hay una seccin para este programa (Html
Kit), bscala y pregunta cuanto quieras. Tambin te agradecera que en ese mismo apartado me
comentaras qu partes no has entendido y en cuanto pueda lo intento mejorar, oki? Las lecciones son
para vosotros, vosotros mandis!
Espero incluir ms lecciones pronto. Estate atento, suerte, nimo y .. paciencia!!
NOTA: Por favor, no sigais preguntando en el foro para cuando saldr la prxima leccin. No
dispongo de mucho tiempo libre para crearlas y este tipo de mensajes en el foro solo me hacen
gastar ese poco tiempo que tengo.. Siempre estoy trabajando en nuevas lecciones, pero aunque os
parezca fcil, llevan mucho trabajo. Lo siento, pero es la realidad....

Crea Web

Hochgeladen von

Dokumentinformationen

Originaltitel

Copyright

Verfügbare Formate

Dieses Dokument teilen

Dokument teilen oder einbetten

Freigabeoptionen

Stufen Sie dieses Dokument als nützlich ein?

Sind diese Inhalte unangemessen?

Copyright:

Verfügbare Formate

Crea Web

Hochgeladen von

Copyright:

Verfügbare Formate

Aprender a Crear una Pgina Web Paso a Paso

Bien, cmo seguimos las lecciones de esta web?

De dnde descargar Html-Kit

Quizs te aparezca un mensaje como este:

Cmo Instalar el Html-Kit

Aceptamos de nuevo presionando "Finish" y vemos, cmo no, una preguntita....

TACHAAANNN!! Por fin! El programa se deja ver! je je je.

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

Simplifica el Html-Kit, Hazlo fcil!

Mucho mejor, Primer contacto con el cdigo HTML?

El cdigo html de una pgina web

La estructura de una pgina web en HTML

Definir el ttulo de una pgina web

Primer contacto con el cdigo HTML?

El cdigo html de una pgina web

La estructura de una pgina web en HTML

Cmo ver el cdigo Html de cualquier pgina web?

Una Carpeta para dominarlas a todas...

La carpeta de nuestras webs

Configurar nuestro Sitio en en Html-Kit

Abriendo la ventana WorkSpace

Sitio Local y Sitio Virtual

Que tal crear otro sitio para tus pruebas?

Cmo crear la primera pgina de la web

Cmo crear un prrafo en la pgina web

Crear un segundo prrafo en la pgina

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

Cmo crear un enlace en la pgina web

El cdigo Html de los enlaces o vnculos

En la misma o en otra ventana?

Quieres ver como est quedando? Este es el aspecto del ejemplo 3.

Los estilos css

La hoja de estilos css

Crear la Hoja de Estilos "estilos.css"

Esto cada vez pinta mejor, no?

Relaccionar la Hoja de Estilos CSS con la pgina web

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

Un poco de estilos CSS

Cor Cdigo Java Cdigo HTML

Cor Cdigo Java Cdigo HTML

Cor Cdigo Java Cdigo HTML

SlateGray4 108 123 139 #6C7B8B

Firebrick4 139 26 26 #8B1A1A

Aplicando color e imagen de fondo a nuestro ejemplo

Aplicando el color de fondo

Aplicando una imagen de fondo

Si t la ves diferente, rara, nos lo dices en el foro, en la seccin de Html-Kit y as lo reparamos y

Cmo insertar una imagen en una pgina web

Dnde insertar la imagen.

Vamos a insertar una imagen en nuestro ejemplo

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

Cmo insertar un enlace a tu E-Mail

Cdigo Html de un enlace de E-Mail

Problemas de este tipo de enlace

Enlace de E-Mail en una imagen

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

Enlace de E-Mail con Html-Kit:

Despus pulsa Ok y listo..

Los estilos CSS para las imgenes con enlaces

Cmo centrar un prrafo de la pgina web

Crear un estilo centrado

Crear una clase de estilo

Centrar prrafos en el Html