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. Qu, la mitad de lo que acabo de decir ni te suena eh? ja ja ja ja, no te preocupes, te lo voy a
explicar todo paso a paso, como si fueras idiota, vale? ja ja ja. Hey, que era broma, no te vayas!!!
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 vers un men horizontal con fondo naranja. Desde all puedes acceder a las distintas lecciones
de este tutorial. Al hacer clic en cada una aparece un men a la izquierda, con fondo blanco como el que
hay ahora, desde 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 abajo. 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!!

Software Necesario
Un software es un programa informtico, lo que ocurre es que al decir software parece que la cosa tiene
ms importancia, como es una palabra en ingls... ya se sabe... pero no es ms que eso, un programa.
1

Para crear nuestra pgina web necesitamos un programa. Para crear webs hay miles, de pago, gratuitos,
regalados, pirateados... Nosotros vamos a ser buenos y usaremos uno gratuito, por ejemplo uno que se
llama Html-Kit

De dnde descargar Html-Kit

El Html-Kit es un editor de html y css (entre otros) gratuito. Editor significa que podemos escribir con l
y Html y Css son los lenguajes que se usan para hacer pginas web. Es 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 versin ms moderna. La pgina es www.htmlkit.com. Ve haciendo clic y se abrir una
ventana aparte, para que puedas seguir leyendo estas instrucciones.
Al acceder a la web de Html-Kit podrs ver en la parte alta un cartelito similar a este:

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? Tienes que marcar la
casilla que te he marcado en rojo en la imagen de aqu abajo y despus pulsar en Next> :

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 el que
pone Html Kit y escoger "Crear Acceso Directo". En ese momento si vuelves a abrir el desplegable
vers dos iconos de Html Kit. En el recien creado aparece un "2" al lado. Haz clic una sola vez sobre
ese icono y SIN soltar el botn, arrstralo hasta tu escritorio y listo, ya lo tienes a mano. La prxima vez
que quieras abrir el Html Kit bastar con darle dos veces a ese icono de tu escritorio.

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

Aceptamos de nuevo presionando "Finish" y vemos, 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 vamos 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 "Dont 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/

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

10

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 sobra, 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:

11

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:

12

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:

13

Mucho mejor, verdad? Ya estamos preparados para empezar el juego. Vers como crear pginas web va a
ser pan comido para t. Ahora es una buena oportunidad para empezar a saber qu es ese cdigo que
aparece en la pantalla del Html-Kit. Vamos a verlo en la 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, podramos usar por ejemplo el
Block de Notas de Windows para crear una pgina web completa. Tan solo hay que saber qu letras y
nmeros escribir y luego guardar el archivo, pero en lugar de hacerlo con extensin .txt se guardara con
extensin .html o .htm (son iguales).
Nosotros vamos a usar en estas lecciones otro programa distinto al Notepad o Block de Notas, el HtmlKit, 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>

(todas empiezan con esto)

14

</html>

(todas terminan con esto otro)

En adelante, siempre que escriba cdigo HTML lo har de este modo, de color azul y con fondo gris
para que lo 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
dnde empieza la pgina y dnde termina, la cabecera llamada HEAD y el cuerpo llamado BODY se
colocan y escriben as en Html:
<html>
<head>
</head>
<body>
</body>
</html>

En Html, se indica que va a empezar la cabecera con la palabra <head> y termina con la misma palabra
pero 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 oye, 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>

15

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

16

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?

17

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. Te repito, es muy importante que sigas mis pasos al
pie de la letra, de modo que cuando digo que a esa carpeta la llames "objetos", hazme caso y no la
llames "Objetos", ni "OBJETOS". Todo en minsculas, oki? Ya entenders por qu.

18

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:

19

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:

20

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

21

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-paginas-web" si quieres.

Cmo crear la primera pgina de la web

La primera pgina que vamos a crear es la pgina principal. La pgina principal es la que se muestra por
defecto al visitante cuando nos visita, la primera que ve. Su archivo ha de llamarse obligatoriamente
index.html sea cual sea el servidor donde la alojemos.
Como esta pgina va a pertenecer al sitio "web-ejemplo-cctw", tendremos que 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...

22

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) preguntndonos 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:
23

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.

24

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:

25

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 cmo
quedara la web vista por internet. A esta vista previa o preview se accede haciendo clic abajo del todo,
junto a donde pone "Editor". Haz clic ah y veamos como queda nuestro ejemplo por el momento, vale?

26

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 incluir ese segundo
prrafo debajo del anterior y encerrarlo entre las etiquetas <p> y </p>. Por ejemplo, vamos a poner este
segundo prrafo: "Pgina creada gracias a CCTW". En la vista "Editor" la pgina quedara as:

27

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 ( la ventana Workspace) y una vez
que aparezca haz clic en el signo "+" a la izquierda de "web-ejemplo-cctw" para ver su contenido. Ppara
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 espacio.

El cdigo Html de los enlaces o vnculos

28

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 entre las comillas su ruta absoluta que es esta:
http://www.comocreartuweb.com quedando el cdigo del enlace de este modo:
<a href="http://www.comocreartuweb.com">CCTW</a>
Te dejo una vista del Html-Kit para que lo veas ms claro, vale?

En la misma o en otra ventana?

Si no se indica ninguna cosa ms, cuando el visitante haga clic en el enlace la pgina destino se 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 indicrselo dentro de la primera etiqueta. Yo te recomiendo que
29

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 que
escribimos en el cdigo Html.
Para evitar esto lo mejor es usar estilos CSS. Mucha gente piensa que es algo complicado, pero como lo
vamos a ir aprendiendo sobre la marcha no te va a resultar nada dificil, 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 archivo
aparte 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?
30

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

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 las caractersticas que hay en estilos.css para que sepa qu
propiedades 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 tendrs que cambiar en algunas ocasiones de esa lnea es ruta/. Y cual ser? Si leiste bien
el apartado de las explicaciones de las rutas de los archivos de ComoCrearTuWeb se te har ms fcil
entenderlo (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:

32

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. Venga, lo ests haciendo
genial!

Explicando el color y la imagen de fondo de una

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

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

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 s, 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, una a una, a mano!!... es un buen invento o no? Pues
an hay webmasters que no lo saben usar... 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 queremos pero separndo unas de otras con un punto y coma ";". En el caso
anterior, como la propiedad era para el cuerpo, hemos escrito "body" y entre corchetes hemos definido la
propiedad. Background que significa fondo. background-color se usa para especificar el color de fondo
no solo del body sino de otros muchos elementos, como prrafos, enlaces, etc,. Ese nmero raro, el
#E6E6FA es el cdigo que corresponde a uno de los colores que 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.png".
Suponiendo que le hemos puesto de nombre fondo.png el cdigo a insertar en la hoja de estilos sera
este:
body {background-color: #E6E6FA ; background-image: url(objetos/fondo.png) }
Fjate como hemos separado la propiedad color de fondo de la propiedad imagen de fondo con un punto
y coma, tal y como te coment antes.

Explicando el Background-Image
En este caso la propiedad se llama background-image y sirve para indicar el archivo de imagen de fondo
que ha de tener la web. La ruta del archivo de imagen se escribe entre los parntesis tal y como hemos
visto en el cdigo. Por defecto, es decir, si no decimos lo contrario, esta imagen de fondo se repetir
horizontal y verticalmente para ocupar todo el fondo de la pgina, como formando un mosaico.
34

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:norepeat }
Para que el fondo se repita solo horizontalmente, se pone esto en su lugar: background-repeat:repeat-x
body {background-color: #E6E6FA ; background-image: url(objetos/fondo.png) ; backgroundrepeat:repeat-x }
Para que se repita solo verticalmente se escribe: background-repeat:repeat-y
body {background-color: #E6E6FA ; background-image: url(objetos/fondo.png) ; backgroundrepeat:repeat-y }
Para que se repita vertical y horizontalmente no hace falta poner nada, pero si lo deseas puedes poner
esto: background-repeat:repeat, tal que as:
body {background-color: #E6E6FA ; background-image: url(objetos/fondo.png) ; backgroundrepeat:repeat }
An hay otro valor posible que podemos dar. Se trata del valor "inherit" que significa algo as como
fondo anclado. Significa que aunque movamos la web el fondo quedara fijo y solo se desplaza el
contenido, no el fondo. Eso si, no funciona en todos los navegadores, tenlo en cuenta si lo aplicas.

Background-Position
Tambin puedes elegir que el fondo aparezca arriba y centrado, abajo a la izquierda y todas estas
combinaciones con la propiedad background-position. Te dejo un ejemplo para que lo pruebes y veas
como funciona:
body {background-color: #E6E6FA ; background-image: url(objetos/fondo.png) ; background-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. Un pixel es
35

una medida de distancia y equivale a un puntito de tu monitor. Si te acercas mucho mucho a tu monitor,
casi pegando las narices a l, vers que todo est hecho con puntitos. Pues cada uno de esos es un pixel.
Para hacerte una idea, estas letras que lees deben tener unos 10 pixeles de ancho cada letra. Una pgina
web suele tener una achura de 800 pixeles.

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

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

Aplicando color e imagen de fondo a nuestro

ejemplo
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 ah 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
para insertarle esta lnea):
body {background-color: #E6E6FA}

Aplicando una imagen de fondo

36

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:
body {background-color: #E6E6FA ; background-image: url(objetos/fondo.png) ; background-repeat:
no-repeat }
Adems la quiero centrada tanto vertical como horizontalmente, as que le aado esto:
body {background-color: #E6E6FA ; background-image: url(objetos/fondo.png) ; background-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:
body {background-color: #E6E6FA ; background-image: url(objetos/fondo.png) ; background-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...):

37

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

38

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? Las imgenes nunca tienen etiqueta de cierre. Vamos a ver lo que hay dentro
de ese cdigo.
Para empezar se coloca la ruta, que como siempre puede ser una ruta relativa (si la imagen pertenece a, o
est guardada en tu espacio web) o absoluta (siempre que la imagen la ests obteniendo de otra web
distinta a la tuya, aunque esto no es recomendable). Las rutas van siempre encerradas entre comillas, no
lo olvides.
Luego se coloca su anchura y altura expresada en pixeles con las siglas "px". No debes dejar nunca
espacios en blanco entre la cantidad y las unidades, es decir, no vale poner esto "100 px", sino que lo
vlido es ponerlo junto, as "100px". Estas cantidades las coloca normalmente el Html-Kit
automticamente y si t las cambias seguramente la imagen se vea desvirtuada y perder definicin. Si
necesitas cambiar el tamao mejor hacerlo con un programa grfico y luego la vuelves a pegar en la
pgina, 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 de la imagen. Este contenido aparece
en el hueco de la imagen en el caso de que la propia imagen no se visualizara por algn problema. Por
otro lado, algunos buscadores como Google tienen en cuenta estas palabras escritas en estas
descripciones para relacionar las bsquedas de sus usuarios con el contenido de las pginas web, de
modo que es bueno adems hacer que aquellas palabras por las que queremos ser encontrados aparezcan
en esa descripcin. En mi caso, si quiero aparecer en Google cuando la gente busque por las palabras
"html-kit", por ejemplo, me viene bien colocar descripciones en los alt de las imgenes como "Men del
Html-Kit", o "As se descarga el Html-Kit", pero siempre que tengan su sentido con esa imagen, claro.

Vamos a insertar una imagen en nuestro ejemplo

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

Si ya tienes ese archivo guardado en "objetos" abre ahora el Html-Kit y la pgina index.html para
continuar. Vamos a colocar la imagen entre el prrafo donde dice "Bienvenidos a mi pgina web" y el
39

que dice "Pgina creada....". Como va entre los dos, nos vamos al Html-Kit a la vista "Editor" y
ponemos el cursor despus del primer </p> (al final de la lnea de cdigo del primer prrafo). A
continuacin pulsamos Intro para crear una nueva lnea e insertamos esto (como te he dicho, la
encerramos entre nuevos <p> y </p> que tambin debemos escribir):
<p><img src="objetos/sonrisa.gif" width="60px" height="60px" alt="Bienvenidos al ejemplo de
CCTW"></p>

Quieres aprender a hacerlo directamente desde las opciones del

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

Aparece entonces esta ventana:

40

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:

41

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

42

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

43

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 colocar el cursor all y pulsa luego el Intro para crear una nueva
lnea. Como te dije anteriormente, conviene poner las cosas dentro de un prrafo, de modo que creamos
ese prrafo an vacio escribiendo sus etiquetas <p> </p>.
Ahora situa el cursor dentro de ese prrafo (colocndolo entre <p> y </p>) y en el Html-Kit tal y como
hicimos anteriormente pulsa en insertar una imagen (te dejo una foto para que recuerdes cmo era):

44

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

45

Fjate como tras seleccionar el archivo buzn en la ventana derecha de arriba, podemos escribir el "alt"
del que hablamos pginas atras, 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 EMail.

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

46

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:

47

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}
48

Esto indica que, todos los elementos de imagen (img) han de cumplir lo que hemos puesto entre
corchetes, es decir, que no tengan ningna tipo de borde.

Si guardamos la hoja de estilo y abrimos el index.html veremos como en el "Overview" o vista previa ya
no aparece ese recuadro. Tampoco saldr ya en ninguna de las imgenes de ninguna de nuestras pginas.
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.
49

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 "Bienvenidos...". Para ello vamos a la vista del
cdigo html del index y modificamos esa etiqueta <p> dejndola as:
<p class="centrado"> Bienvenidos a mi pgina web. Muy pronto estar lista!</p>
Si ahora haces vista previa o "Overview" desde el Html-Kit, vers como este prrafo aparece ahora
centrado. 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!
50

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:

51

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.

52

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. Crala tu mismo. Toma, por si no
te acuerdas de cmo crear una Hoja de Estilo Vacia, pero recuerda ponerle de nombre "estilogeneral.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?

53

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

Qu es una Capa o un DIV?

No es ms que un elemento rectangular dentro del cual podemos incluir lo que queramos, palabras,
prrafos, enlaces, imgenes, varias de estas cosas a la vez o incluso otras capas o tambin tablas. Es un
simple hueco. Lo bueno que tiene es que luego, desde la Hoja de Estilos, podemos darle a todo su
contenido propiedades como color de fondo, tamao de letra, dimensiones de ese recuadro, margenes,
bordes, etc, etc.
Al principio quizs te de un poco de pnico todo esto, pero te prometo que no es nada dificil, ya vers.
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 delante. Entre ambas
etiquetas se coloca su contenido.
Escribe esa lnea de cdigo en el archivo plantilla.html, por supuesto, entre <body> y </body> pues se
trata de algo que debe "verse". Ahora haz vista previa "Preview" y observa qu aparece. 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 a ese 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.
54

Las clases de estilo, que se pueden usar sobre varios elementos (varios prrafos, varias celdas, enlaces,
etc) se definen en la Hoja de Estilo como vimos al crear la clase de estilo ".centrado", es decir, con un
punto delante del nombre y luego colocando las propiedades entre los corchetes. Luego, en el cdigo
Html se asigna esa clase de estilo a un elemento colocando dentro de su etiqueta de inicio esto,
class="nombredelaclasedeestilo".
En cambio los estilos nicos se definen en la Hoja de Estilo con una almohadilla como esta "#" (se
escribe pulsando a la vez la tecla Alt Gr, que est a la derecha del espacio y la tecla del nmero 3 de tu
teclado) en lugar de con un punto, y en el cdigo Html se asigna este tipo de estilo nico escribiendo
dentro de la etiqueta del elemento esto otro id="nombredelestilounico" en lugar de con el class, que es
para clases (estilos que se pueden asignar a varios elementos).
Si te he echo la picha un lio, leelo despacito. Es importante entenderlo.
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 sola 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).
55

Qu es una barra de navegacin?

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

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

Creando la capa navegacion

La llamaremos "navegacion" y solo va a existir una por pgina, luego se trata de un estilo nico y se
define por tanto as en la Hoja de estilo:
#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

56

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

Resoluciones 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 se desmorone cuando el usuario cambie el tamao de
esa ventana. Los elementos grandes no caben y desplazan el contenido siguiente hacia abajo,
produciendo un caos en la web. Lo bueno es que se aprovecharia todo el espacio, cuando lo hay, claro.
El otro caso es darle un ancho fijo a la pgina web (por ejemplo 20 cm, o 800 pixeles). As el usuario
podr hacer lo que quiera con la ventana de su navegador que la web seguir manteniendo su forma y no
se deformar en absoluto. Eso es lo bueno, lo malo es que si no acertamos en qu anchura darle, pasar
que unos la vern muy grande y la vern tan pequea que tendrs ms margenes a los lados que espacio
para la web....

Qu opcin tomamos entonces?

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

Un Div para dominarlos a todosss

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

58

Ves como encierra a los otros divs? Ahora, en la hoja de estilo definimos #global con las siguientes
propiedades:
#global {width:800px ; margin: 4px auto }
Esto significa que la capa global tendr un ancho de 800 pixeles y aparece una propiedad que no hemos
visto antes, (margin: 4px auto) que define el margen a dejar entre el elemento (en este caso el div global)
y el resto de cosas a su alrededor. El 4px es la cantidad de margen que vamos a dejar por encima y por
debajo de la web, mientras que auto es la cantidad de margen que dejaremos por cada lado. Auto
significa automtico, por lo que se dejar todo lo que exceda de 800px y automticamente, es decir, la
mitad a la derecha y la otra mitad a la izquierda y por tanto, centrado. 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

Presta mucha atencin 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.
59

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.....bla
bla blal...), 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
60

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 el inicio de un elemento de la lista, que es <li>. Te lo puedes apuntar, yo
siempre me liaba y terminaba poniendo lu y il, 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 tendramos que colocar dentro del div del
men.
Para empezar, abre tu Html-Kit y escribe el cdigo de arriba dentro del div menu, eliminando claro la
palabra "men" que habia ya colocada.
Ha de quedar de este modo:
61

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 sirve para que haga el efecto de enlace pero sin enviarnos a ningn lado por ahora.
Cuando tengamos ms pginas en la web pondremos las rutas de aquellas pginas que queremos enlazar
desde el men, 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="_blank" 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 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.
62

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 s ha de tener 800px de ancho? El colocarle el float:left evita
que en algn navegador se descuadre todo. No se explicarte porqu ahora mismo, y vers como a veces,
a pesar de que cumplas todas las buenas prcticas que se pueden leer por la red, hay que hacer alguna
"pirula" para que se vea correctamente la pgina web con cualquier navegador. Es todo un reto, pero por
ahora lo estamos consiguiendo.
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 tengamos 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..... }
63

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

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

#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 m 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 es 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 escriben con la etiqueta <a> y por tanto est claro que para modificar sus
propiedades basta con escribir una "a" en la Hoja de Estilos y modificar cosas entre los corchetes. Las
caractersticas que definamos as para los enlaces se aplicarn a todos ellos sea cual sea su estado. 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.
66

- 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 textdecoration: underline
Si no quieres destacar los enlaces segn los estados que te he explicado antes, basta con definirlos en esa
nica lnea, no obstante si quieres darle algn toque diferente en funcin de alguno de esos estados, se
vuelve obligatorio definir los cuatro estados y adems en ese mismo orden que te he puesto.

Sin subrayar y marrones, excepto cuando se lococa el cursor

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

Estas lneas de cdigo puedes escribirlas ya en la Hoja de Estilos estilo-general.css Depus gurdala y
mira los cambios con la vista precia en plantilla.html
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

67

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 lejos 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 el cdgo Html de todos los elementos de la lista uno seguido del otro, en lugar de uno
en cada lnea de cdigo en la vista Html y vers como se arregla. En adelante, ya sabes que los
elementos de las listas, los <li> hay que ponerlos todos seguidos, en la misma lnea que los <ul> y </ul>.
Con eso se solventa el tema.
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 sombreado, con un fondo de color.... gris. Se hace retocando el cdigo de
los enlaces de antes, pero solo la lnea del hover, dejndola as:
a:hover {color:red ; text-decoration:underline ; background-color: silver}
La propiedad background-color 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
68

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 prrafos la etiqueta "p", pero, qu etiqueta
hemos de modificar para cambiar las propiedades del texto de la parte principal de nuestra plantilla?
Aquella en la que pone "Esta ser la zona principal de la web"?
Va a ser dificil, pues no est encerrada entre ningna etiqueta concreta, luego ni es un prrafo, ni un
enlace, ni n de n. Nosotros pretendemos que sea un prrafo, verdad? Pues vamos a indicrselo
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.
69

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 textalign:center, como quieras. En el ejemplo lo dejamos con Justify.

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)

70

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

71

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 tocar mucho ms la
plantilla.html aunque realmente, poco la hemos tocado, verdad? El resto 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 solo 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 t 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

72

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. El borde por
defecto, si no se indica otra cosa, es una lnea continua de 1 pixel de grosor y de color negro.

Padding

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

Margin

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.

73

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 sufieran 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 prohibi 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.

74

Realmente parece que por debajo es mucho y por arriba y la izquierda me he pasao un poco. Vamos a
probarlo con estos otros valores (recuerda el orden de las dimensiones del margin, arriba-derecha-abajoizquierda)
#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. (Me refiero a ttulos de texto, no al title de la pgina como vimos al
principio de estas lecciones).
La forma correcta para un ttulo sera esta:
<h1>Este es un ttulo de importancia Uno</h1>
Fjate como de nuevo, tiene una etiqueta de apertura al inicio y otra de cierre al final con la contrabarra.
En lugar de un h1 podemos usar un h2, un h3 y as hasta h6. Los h1 son ttulos principales y el resto van
siendo de menos importancia y por lo tanto aparecen con letra ms pequea cada vez. Se usan por tanto
los h1 para ttulos principales y los h2 para subtitulos. Normalmente no se usan los dems pues no se
suele abusar de sub sub subttulos, je je.

75

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 que el
resto de los textos y adems subrayados y de otro color distinto al texto normal, que suele ser negro.
Para los subttulos (h2) me gusta en cambio un tamao algo menor que el h1 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? Pinsalo.
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:

76

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 cmo sabe Google qu pginas ha de mostrar? Bien fcil. Google y el
resto de buscadores se pasean continuamente por la red leyendo las palabras de cada pgina web. Si en
mi web ven que aparecen las palabras "como", "crear", "pginas" y "web", lo memorizan y mostraran mi
web en sus listas cuando alguien haga una bsqueda con alguna de esas palabras.
Y porqu unas pginas aparecen ms arriba y otras ms abajo en esas listas? Los motivos son muchos,
pero uno de ellos (hay muchos ms motivos) es que algunas de esas palabras aparezcan destacadas y
destacadas es, o bien que aparezcan en negrita o bien que aparezcan dentro de un ttulo tipo h1, h2 etc.
Por eso es mejor hacer los titulos usando h1, pues si lo hacemos como prrafos los buscadores nunca
sabrn que se trata de un ttulo y no tomarn esa palabra tan en cuenta (tambin la tienen en cuenta, pero
menos).
77

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 trampas 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 estar buscando cmo 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 pensarian 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 ese sitio se le llama Hosting) para ir viendo cmo
se comporta la web en realidad.
Para no repetir aqu cosas que ya tenemos explicadas en CCTW, os invito a visitar la seccin Hosting y
Dominios. Una vez que entres all aprenderas todos los conceptos relacionados, con los que podrs
escoger con ms idea el hosting que ms se amolde a tus necesidades.
Si tienes mucha prisa y quieres ir al grano, ve directamente a la pgina donde explico cmo registrarte
en un servidor gratuito sin publicidad, pero no olvides volver a esa seccin y leer el resto de informacin
cuando puedas, te ser til en el futuro.
Cuando termines de leer esa seccin, te dars de alta en el Hosting que quieras y podrs seguir con las
lecciones siguientes, pero recuerda apuntarte en un papelito (vale tambin una Hoja de Excel o del
Notepad) los siguientes datos:

Nombre de usuario para el Hosting.

Contrasea de tu cuenta de Hosting.
Direccin FTP con la que subir tus datos a la red.
Direccin de tu pgina web.
78

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 aqu para seguir las lecciones, has de tener ya 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 son
y dnde van apuntados.

79

(1) Aqu pon la direccin de tu FTP. Suele empezar por ftp.nombredelservidor.. pero cada hosting es
algo firerente. En la imgen de arriba puedes ver los datos que yo puse para la configuracin del Ftp de
una cuenta creada en Razy (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-ejemplocctw-local. Para seguir el ejemplo de este curso haz como yo y as evitars perderte cuando me refiera a
esa carpeta. Luego, para tus trabajos la puedes llamar como te de la gana, claro.
(7) Initial Directory: En ocasiones al registrarte en un servidor te indican la ruta inicial o FTP Path,
que has de colocar en el Ftp. A veces es /www/ otras veces es /html_public/... Si te has registrado en
Razy escribe aqu lo mismo que pusiste en el punto (1) y te funcionar bien. 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.

80

(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 construccin". 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 (varios minutos) sin que termine de mostrar los archivos de dentro,
podra ser que:

Tienes en casa un cortafuegos o firewall que impide al HtmlKit conectarse. Tendrs que darle
permisos al HtmlKit en tu cortafuegos de windows.
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.
81

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 HtmlKit

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

82

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, los archivos han de estar en el hosting. De nada sirve tenerlos
en tu Pc. Por tanto los tenemos que pasar desde la carpeta amarilla "web-ejemplo-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:

83

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

84

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

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 carpetas

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

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

86

Ahora que ya tienes la carpeta "objetos" dentro de tu hosting. Ten en cuenta una cosa importante.
Cuando quieras colocar un archivo directamente en la raiz de la web (la raiz significa en el primer nivel
de la web, es decir, fuera de cualquier carpeta) has de hacer el "clic derecho" sobre el nombre "webejemplo-cctw-internet". Pero si lo que quieres es colocar algn archivo "dentro" de una carpeta, es
sobre esa carpeta donde has de hacer "clic derecho" para escoger luego "Upload". En caso contrario el
archivo no se subir dentro de esa carpeta. 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
87

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

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.

88

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

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 navegacion le vamos a poner borde por lo cuatro costados (por arriba, abajo ,
izquierda y derecha), que como ya sabemos, se hace aadiendo esto de abajo entre los corchetes de la
Hoja de Estilo estilo-general.css:
border: black 1px solid
quedando esa lnea as en la Hoja de Estilo:
#navegacion {background-color: pink ; border: black 1px solid }
Si ahora le pusieramos borde a la capa de arriba del todo (cabecera) por los cuatro costados, nos
aparecera un borde de 2 pixeles entre esa capa y la capa navegacion, (1 pixel definido en la capa
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 ; bordertop: 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.
90

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="curva-superior"></div>

91

<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 curvasuperior.gif, que est en la carpeta objetos y que no se repita. Si ahora guardas la hoja de estilo estilogeneral.css y haces vista previa desde el Html Kit vers este resultado.
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:
#curva-superior { background-image: url(objetos/curva-superior.gif) ;
background-repeat: no-repeat ;
width:800px ;
height: 12px ;
overflow : hidden }

Ahora, si guardas la hoja de estilo y haces vista previa si que se ve correctamente, aunque ahora parece
que sobran dos cosas. Por un lado el borde entre la imagen y la capa donde pone bienvenido sobra y por
otro lado, si le damos color de fondo blanco (white) a esa capa rosa, el efecto ser an mejor.
92

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 ; bordertop: black 1px solid }
y para poner color de fondo blanco (white) en lugar de rosa (pink) dejamos finalmente la lnea as:
#cabecera { background-color: white ; border-left: black 1px solid ; border-right: black 1px solid }
El efecto conseguido, aunque no es asombroso, es ms profesional.

Borde redondeado para la parte inferior

Lo mismo que hemos hecho con la parte de arriba podemos volver a hacerlo para la parte inferior de la
pgina para conseguir un mejor aspecto. 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="pie">Este es el pi de pgina</div>
<div id="curva-inferior"></div>
</div>
.....

2.- Abrimos estilo-general.css e incluimos la definicion de la nueva capa curva-inferior que ser igual
que la de antes pero cambiando el nombre de la imagen de fondo:
#curva-inferior { background-image: url(objetos/curva-inferior.gif) ;
background-repeat: no-repeat ;
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

93

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

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.

95

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"

96

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}

97

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">
<img src="objetos/logotipo.gif" width="270" height="80"
alt="Haz clic aqu para volver a la pgina de inicio">
</div>

le aades esto que marco en negrita:

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

Listo, haz vista previa y verifica que todo va bien. Ahora no solo tenemos el banner, sino que tenemos
preparado un hueco para poder poner un fondo que mejore el aspecto o publicidad, si lo deseamos. Para
cualquiera de esas dos cosas, habra que retocar algo, como por ejemplo eliminar el margin-top:25px de
la capa publicidad en la Hoja de Estilos, 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"....
98

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
<li>Seccin
<li>Seccin
<li>Seccin
</ul>

1</li>
2</li>
3</li>
4</li>

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.

99

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

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
100

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:
<div id="navegacion">
<ul>
<li><a href="#">Seccin
<li><a href="#">Seccin
<li><a href="#">Seccin
<li><a href="#">Seccin
</ul>
</div>

1</a></li>
2</a></li>
3</a></li>
4</a></li>

101

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:

102

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>
<li><a href="#">Enlace 2</a></li>
<li><a href="#">Enlace 3</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>
<li><a href="#">Enlace 1</a></li>
<li><a href="#">Enlace 2</a></li>
<li><a href="#">Enlace 3</a></li>
</ul>
</div>

103

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?
104

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}
p {text-align: justify}
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}
body
{text-align: center }
#global
{width:800px ; margin:4px auto }
#curva-superior { background-image: url(objetos/curva-superior.gif) ;
background-repeat: no-repeat ;
width: 800px ;
height:12px ;
overflow: hidden }
#cabecera
{background-color: white ; border-left: black 1px solid ;
border-right: black 1px solid ; height:85px}
#logotipo
{width:280px ; float:left }
#publicidad {width:518px ; float:right ; margin-top:25px ; font-size: 16px }
#navegacion {background-color: gray ; border: black 1px solid ; height:20px}
#navegacion li {float:left ; list-style:none ; margin: 0px 20px 0px 20px }
#navegacion ul { margin-left: 180px }
#contenido {background-color: orange ; border-left: black 1px solid ;
border-right: black 1px solid }
#contenido p {margin: 5px 10px 0px 10px ; text-indent: 15px}
#menu
{background-color: yellow ; width: 150px ; float:left ;
text-align:left ; margin: 3px 10px 3px 3px }
#menu li
{list-style:none ; margin: 4px 0px 4px 6px }
#menu h1 {}
#pie { background-color: white ;
border-left: black 1px solid ;
border-right: black 1px solid;
border-top: black 1px solid }
#curva-inferior { background-image: url(objetos/curva-inferior.gif) ;
background-repeat: no-repeat ;
width: 800px ;
height:12px ;
overflow: hidden }
a
{color: brown ; text-decoration:none ; display: block }
a:link
{}
a:visited {}
a:hover
{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
105

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

106

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

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

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

108

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:
#menu

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

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

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

109

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:
#menu {background-color: yellow ; width: 150px ; float:left ;
text-align:left ; margin: 3px 10px 3px 3px ;
background-image: url(objetos/menu-parte-inferior.gif);
background-position: bottom }

Bottom significa culo o parte de abajo. Haciendo vista previa (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>
<li><a href="#">Enlace
<li><a href="#">Enlace
<li><a href="#">Enlace
<li><a href="#">Enlace
</ul>
</div>

1</a></li>
2</a></li>
3</a></li>
4</a></li>

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.

110

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: yellow ; width: 150px ; float:left ;

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

Pensando un poco... ahora que toda la capa del men est cubierta por imagen de fondo, podemos
eliminar eso de background-color: yellow que tenemos al principio del cdigo de arriba, no crees? As
ahorramos! je je. Puedes eliminar esa parte.
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:
#menu li

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

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!!
111

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="curva-superior"></div>
<div id="cabecera">
<div id="logotipo"><a href="index.html"><img src="objetos/logotipo.gif"
width="270"
height="80" alt="Haz clic aqu para volver a la pgina de inicio"></a></div>
<div id="publicidad">Bienvenidos a mi Web</div>
</div>

112

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

Cdigo CSS de estilo-general.css

* {text-indent:0px ; margin:0px ; padding:0px ; border:0px}
p {text-align: justify}
h1 {font-size: 1.2em; color:blue ; font-weight: bold ; text-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 }
#curva-superior { background-image: url(objetos/curva-superior.gif) ;
background-repeat: no-repeat ;
width: 800px ;
height:12px ;
overflow: hidden }
#cabecera
{background-color: white ; border-left: black 1px solid ;
border-right: black 1px solid ; height:85px}
#logotipo
{width:280px ; float:left }
#publicidad {width:518px ; float:right ; margin-top:25px ; font-size: 16px }
#navegacion {background-color: gray ; border: black 1px solid ; height:20px}
#navegacion li {float:left ; list-style:none ; margin: 0px 20px 0px 20px }
#navegacion ul { margin-left: 180px }
#contenido {background-color: orange ; border-left: black 1px solid ;
border-right: black 1px solid }
#contenido p {margin: 5px 10px 0px 10px ; text-indent: 15px}
#menu
{width: 150px ; float:left ;

113

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

background-image: url(objetos/menu-parte-inferior.gif);
background-position: bottom ;
padding-bottom:5px }
#menu li
{list-style:none ; margin: 4px 8px 4px 6px }
#menu h1 {text-decoration:none ; font-size:12px ; padding-top:12px ;
background-image: url(objetos/menu-parte-superior.gif) }
#pie { background-color: white ;
border-left: black 1px solid ;
border-right: black 1px solid;
border-top: black 1px solid }
#curva-inferior { background-image: url(objetos/curva-inferior.gif) ;
background-repeat: no-repeat ;
width: 800px ;
height:12px ;
overflow: hidden }
a
{color: brown ; text-decoration:none ; display: block }
a:link
{}
a:visited {}
a:hover
{color:red ; text-decoration:underline ; background-color: 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:
<div id="pie">Este es el pi de pgina</div>

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
114

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.

115

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
116

no vemos los bordes? Pues ya sabes, "Siempre que pongas una capa en tu web has de colocarle algo
de contenido, por ejemplo un punto, una letra, una palabra, una imgen o una capa siempre que no
tenga un float".
Pero si no te interesa colocarle nada que no sea una capa con float an nos queda una opcin y es
definirle nosotros la altura. Y eso es lo que vamos a hacer.
Ve a la hoja de estilos estilo-general.css y define una altura de, por ejemplo, 65px a la capa #pie. Ms
tarde podremos retocar esa cantidad para amoldarla a nuestro gusto. Quedara as la capa #pie (Recuerda
que siempre escribo en negrita los cdigos que incluyo o modifico):
#pie { background-color: white
border-left: black 1px
border-right: black 1px
border-top:
black 1px
height: 65px ;
}

;
solid ;
solid ;
solid ;

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 ;

border-right: black 1px solid }
#piedos {background-color: green ; float:left ; width:498px }
#pietres {background-color: red
; float:left ; width:150px ;
border-left: black 1px solid }

117

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>

118

</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.
119

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

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:
*
a
a:link
a:visited
a:hover
a:active

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

{color: brown ; text-decoration:none ; display: block }
{}
{}
{color:red ; text-decoration:underline ; background-color: silver}
{}

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

{}
{}
{}
{}

121

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.

122

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
#pie a:link
#pie a:visited
#pie a:hover
#pie a:active

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

{}
{}
{color:red ; text-decoration:underline ; background-color: yellow }
{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
#pie
#pie
#pie
#pie

a
a:link
a:visited
a:hover
a:active

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

{}
{}
{color:black ; text-decoration:underline ; background-color: white }
{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 {}

123

#logotipo a:hover
#logotipo a:active

{background-color: white }
{}

Ahora se ve el logotipo sin esa sombra gris. Ya sabes algo ms de los enlaces. Eres todo un maestro!

Cmo evitar que aparezcan mal las palabras con

acentos
Segn en qu servidor alojemos nuestra bonita pgina, veremos o no que las palabras acentuadas
aparecen mal escritas. Claro, eso solo va a pasar si has escrito con acentos, que ltimamente te los comes
todos!! je je je. Si por el contrario has puesto alguno (tambin estara bien que lo pusieras
correctamente....) y en lugar del acento aparece un smbolo raro, podemos arreglarlo rpidamente.

Pero por qu salen mal escritos los acentos?

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

No hay mucho que saber de esta lnea. Es una de esas lneas que llaman Metatags que no muestran nada
en la web, nada visible, sino que indican al navegador cmo interpretar el cdigo de dentro del Body.
Concretamente indica que el contenido del Body es cdigo Html y que la codificacin es del tipo iso8895-1, que corresponde a la codificacin europea (que entiende de acentos, vamos). No le hagas mucho
caso, solo ponla dentro de la cabecera y ten fe en m, je je je.
Pero dnde? En que parte de la cabecera? No temas, que te pones de los nervios en seguida! ja ja ja. En
principio da igual en qu parte de la cabecera la pongas, pero para que tengamos t y yo el mismo
cdigo y te sea ms sencillo seguir el curso ponla por ejemplo justo debajo de la lnea <head>.
Despus de insertar esa lnea, guarda la pgina, la subes al servidor y ve a verla con el navegador. Si
todo a ido bien y yo no la he cagado ya no tendrs problemas con los acentos. Bueno, el nico problema
es que no sepas donde ponerlos, je je, pero se mostrarn correctamente, seguro.
Bueno, ahora en las dos siguientes lecciones os enseo un modo de ahorra tiempo al generar el resto de
pginas de la web. Tambin os enseo a poner enlaces de unas a otras. Ahora s que conseguiremos una
pgina completita.

Las partes comunes de nuestra pgina web

124

Como te he dicho antes, existen varios modos de ahorranos tiempo y trabajo cuando se realizan cambios
en partes de una web que son idnticas en varias pginas. Pero antes de seguir djame por favor que
insista en definir eso de "partes de una web que son idnticas en varias pginas".
Cuando me refiero a idnticas quiero decir iguales, condenadamente iguales. Si hay alguna ligera
diferencia este truco ya no nos sirve. Para que veas un ejemplo rpido te puedo adelantar que la siguiente
parte de cdigo es comn a tooodas las pginas de nuestra web de ejemplo:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<HTML>
<head>

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

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

La cabecera de la pgina web de ejemplo

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

125

El cdigo de la cabecera, tal cul est ahora en el ejemplo que llevamos hecho es este:
<!-- INICIO CODIGO DE CABECERA - NO TOCAR -->
<div id="curva-superior"></div>
<div id="cabecera">
<div id="logotipo">
<a href="index.html">
<img src="objetos/logotipo.gif" width="270" height="80"
alt="Haz clic aqu para volver a la pgina de inicio">
</a>
</div>
<div id="publicidad">Bienvenidos a mi Web</div>
</div>
<div id="navegacion">
<ul>
<li><a href="#">Seccin 1</a></li>
<li><a href="#">Seccin 2</a></li>
<li><a href="#">Seccin 3</a></li>
</ul>
</div>
<!-- FIN DE CODIGO DE CABECERA -->

Como ves, he aadido dos lneas para encerrar a este cacho de cdigo. Esto es para que si alguna vez le
metemos mano a la pgina, recordemos que lo que hay dentro es comn a todas las pginas de la web, y
por tanto no debemos tocar nada de su interior a menos que sea siguiendo las instrucciones que os
cuento en breve.
No te preocupes por esas lneas de comentario, te las explico ahora despus.

El men lateral izquierdo

Este es otro cacho de cdigo Html que en principio es igual en todas las pginas de la web, o al menos,
en todas las pginas de una misma seccin. En los casos en los que no sea comn a toda la web sino solo
a parte de la web, tambin nos vale este truco que veremos a continuacin, tambin ahorraremos mucho
tiempo, as que lo tendremos en cuenta como elemento comn. El men lateral izquierdo hoy por hoy es
este:

Para que te hagas una idea, desde el men de fondo gris accedemos a las secciones de la web y dentro de
cada seccin, desde este men accederemos a las subsecciones. Por ejemplo, para una supuesta web
dedicada a un grupo de msica, la seccin "Conciertos" podra dividirse en las subsecciones "Conciertos
Anteriores" y "Prximos Conciertos", no?

126

Y su cdigo Html es el siguiente. Como ves, le aado una lnea al principio y otra al final para indicar
donde empieza y termina, como antes:
<!-- INICIO CODIGO DE MENU LATERAL IZQUIERDO - NO TOCAR -->
<div id="menu">
<h1>Ttulo de Seccin 1</h1>
<ul><li><a href="#">Enlace 1</a></li><li><a href="#">Enlace 2</a></li><li><a
href="#">Enlace 3....
</div>
<!-- FIN DE CODIGO DE MENU LATERAL IZQUIERDO -->

Como creo que ya te he comentado y como puedes ver en el cdigo, he colocado todas las lneas <li>
seguidas unas de otras, para evitar el fallo aquel que daba el Internet Explorer cuando las colocbamos
separadas, una en cada rengln.

El pie de pgina
Lo mismo para el pie de pgina. Es algo comn a todas las pginas de la web y en ocasiones quizs
queramos modificarlo para aadir enlaces, publicidad o qu se yo lo que se nos puede ocurrir.
Anda, acabo de hacer vista previa de esta pgina que ests leyendo ahora mismo y resulta que la imagen
de abajo, la del pie de pgina, se me monta por debajo del men de la izquierda de CCTW... y ahora que
hago? Qu mal que queda.... Menos ml que conozco un truco para evitarlo. Te lo cuento? Je je je, es
muy fcil.
Si escribo un poco ms de texto aqu mismito conseguir llenar este hueco, de la parte derecha del men
que tienes a la izquierda, y as la imagen del pie bajar y ya no se montar bajo el men. Si, a veces hay
que escrbir algo, aunque sea para llenar y conseguir eso, aunque no tenga mucho sentido, ja ja ja. Anda!
pues acabo de llenarlo con esta chorrada que te acabo de contar! Fjate que cosa t! Qu alegria, qu
bien. Bueno, seguimos... que ya se ha arreglao...
La imagen del pi es esta:

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

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

127

</div>
<!-- FIN CODIGO PIE DE PAGINA -->

Bien, imagino que a la vez que yo, has colocado esas lneas de comentario en la plantilla, no? (an ests
a tiempo para no perderte luego!!). Pues seguimos con esto, pero antes voy a explicaros mejor qu es eso
de los comentarios dentro del cdigo HTML y cmo se aaden, vale? No te quejars, vas a aprender
hasta el ltimo detalle! je je je.

Los comentarios dentro del cdigo HTML de la

pgina web
En el ejemplo que estamos construyendo tenemos ya un montn de cdigo HTML. Por ahora, como
acabamos de crear la plantilla y no hay demasiada cosa, no nos perdemos con facilidad, pero en cuanto
pasen unos das o en cuanto aadamos ms y ms cdigo a nuestra plantilla llegar un momento que al
ver el cdigo estaremos ms perdidos que un pulpo en un garaje.
Por ese motivo se inventaron los comentarios en el cdigo. Se trata de poder aadir las notas que nos de
la gana dentro, para que nos sirva de recordatorio de qu parte de cdigo es, por qu lo pusimos o lo que
nos de la gana. Eso si, para que el navegador no se lie tratando de investigar que debe hacer con esas
lneas tan raras para l, lo que se hace es encerrar el comentario entre unos signos especiales. As,
cuando el navegador se pone a leer el cdigo Html de nuestra pgina, al llegar al signo de inicio de
comentario simplemente pasa de nosotros y no hace ningn caso a lo que hay escrito hasta que lea el
signo de cierre de comentario. Fcil de entender, no?
Como habrs visto en la pgina anterior, el signo de inicio de comentario dentro de cdigo Html es este:
<!--

El signo que indica final de comentario es este otro:

-->

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

Si olvidas poner el signo de cierre es muy posible que algunos navegadores dejen de leer todo lo que
queda de cdigo Html, as que recuerda colocarlo, no te olvides.
Si la tonteria que queremos poner es muy larga y ocupa varias lneas (estoy seguro que tratndose de
tonterias podras llenar pginas y pginas... je je je je) bastara con poner el signo al principio de la
primera lnea y el de cierre al final de la ltima lnea. Vamos, que no es necesario abrir y cerrar cada una
de ellas. Algo as sera:
<!-- Esto es una tonteria
de varias lineas, pero no tengo ganas de poner signos
de apertura y cierre de comentarios
en cada una de ellas, qu pasa...

128

-->

Adems de servirte para poner chorradas en el Html, tambin sirve para anular temporalmente alguna
lnea de cdigo. Por ejemplo, imagina que tienes un enlace en tu men lateral de la izquierda que vas a
dejar fuera de uso, que no quieres que aparezca en el men por que andas retocandolo. Bastara con
encerrarlo entre los signos de inicio y fin de comentario y el navegador no lo leera. Ms tarde, basta
eliminar esos signos para que vuelva a aparecerle a los visitantes. A veces es mejor que eliminar la lnea,
pues quizs al da siguiente no recuerdas bien lo que tenas puesto.
Por ltimo decirte que tampoco conviene abusar de los comentarios, pues al fin y al cabo ocupan algo de
memoria y el archivo de la web tardara un peln ms en cargarse si hubieran muchos o fueran muy
largos. Casi no se nota, pero si tardara un poquillo ms. As que, los justos, oki?
La plantilla por tanto queda as. Sin cambios aparentes pues lo que hemos puesto son comentarios, pero
puedes ver las nuevas lneas de comentario mirando su cdigo Html.

Creando el resto de pginas de la web

Ahora que tenemos claras cuales sern las partes comunes de la web, podemos sin miedo empezar a
crear el resto de pginas de nuestra web de ejemplo. Esto lo podemos hacer a partir de la plantilla, que
para eso est. Y cmo hacemos esto? Pues como siempre te he dicho, antes de actuar debemos tener
claro lo que queremos alcanzar. Antes de crear y crear pginas sin ton ni son tenemos que pensar cuntas
secciones y subsecciones queremos tener en nuestra web. Ms tarde podremos ir aadiendo ms
secciones y subsecciones, o incluso eliminar alguna, pero partiremos de una base ya pensada para no
liarnos mucho.
De modo que el siguiente paso es pensar (no duele tanto...) en eso, qu secciones y subsecciones vamos
a tener en nuestra nueva web.Lo mejor es coger lpiz y papel y empezar a elaborar un esquema de la
web que tenemos en la cabeza. En el caso de este ejemplo ya te lo dar hecho, pero ten eso en cuenta
cuando elabores tu prpia web.
Cmo? No te aclaras con eso de dividir los contenidos en secciones y subsecciones? Bueno, te lo explico
un poco.

Dividir los contenidos de la web en secciones y

subsecciones
Aunque t tendrs tu propia idea para hacer tu pgina web, vamos a ponernos todos en el mismo lugar
para realizar el resto del ejemplo. Sigue mis mismos pasos para no liarte mucho con el resto de
explicaciones y haz todo igual que yo, con las mismas secciones y subsecciones. Luego, en otra carpeta,
puedes hacer tus propios experimentos, oki?
Imagina que la web de nuestro ejemplo la vamos a dedicar a un grupo de msica que tenemos o que nos
gusta. En cuntas secciones principales se podra dividir? Quizs en estas:

129

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

comentamos las partes ms importantes de la web. Debera ser breve para que el visitante sepa de
un solo vistazo qu puede encontrar en la web. Esta seccin es breve y rpida as que no la
dividimos en subsecciones. Recuerda, es la primera pgina que ve el visitante cuando acceder a
la web, por tanto corresponde con la index.html
Historia del grupo. Aqu se puede comentar cmo, dnde y cundo surgi la idea de la formacin
del grupo, qu msicos han formado parte de la banda a lo largo de los aos, cul es la formacin
actual, y cosas as. Esta seccin se podra dividir en algunas subsecciones, por ejemplo, Cmo
surge la banda, Miembros que han pasado por ella, Formacin actual e incluso un Album de
fotos!
Discografa. Lo tpico, una seccin en la que se muestra cada album o CD publicado. Esta
seccin se puede dividir por CDs publicados, por ejemplo en las subsecciones Maquetas, CD1,
CD2, CD3.
Conciertos. Aqu se informa al visitante de cules son los prximos conciertos de la banda y se
muestran tambin los conciertos celebrados hasta el momento. Se puede dividir por ejemplo en
las subsecciones Conciertos Anteriores y Prximos Conciertos.
Foro. Siempre es buena idea saber la opinin de los visitantes, tanto para mejorar la propia web
como para saber qu piensan del grupo de msica. Nos reservamos una seccin para en el futuro
incorporar un foro a la web, si puede ser, integrado en la misma estructura de la pgina. Esta
seccin en principio no tendra subsecciones.
Descargas. En este otro apartado se pueden colocar cosas que los fans se pueden bajar como
curiosidad. Por ejemplo, posters del grupo, imgenes, las mismas canciones, letras, videos, etc,
etc. Esta seccin se puede dividir en las subsecciones, Canciones MP3, Letras, Posters, Imgenes
y Videos.
Souvenirs. Quizs se piense en vender camisetas, gorras o CDs del grupo. Esta puede ser otra
seccin que se puede dividir por ejemplo en Cmo Comprar, Camisetas y CDs.

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

130

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

Nombrando los archivos de las secciones de la

web de ejemplo
Ahora s empezamos con todo esto. Vamos primero a decidir qu enlaces pondremos en el men
horizontal de secciones que hemos comentado antes. Te dejo la chuleta a la derecha para que la tengas a
mano. Como vers, las secciones son Portada, Historia, Discografa, Conciertos, Descargas, Foro y
Souvenirs, no? Pues basta con aadir los enlaces correspondientes dentro de la capa "navegacion" en el
cdigo de la plantilla.html cuyo cdigo era este hasta ahora:
131

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

Como adivinars, tenemos que aadir algunas lneas <li> ms (antes solo tenamos tres enlaces en la
plantilla y ahora son siete los enlaces que queremos), y tenemos que aadir la ruta de cada una de ellas.
Recuerda que la ruta hay que ponerla en lugar de la almohadilla (#). Por ahora las pginas de las
secciones que queremos poner no existen, pero podemos decidir ya cmo se va a llamar cada archivo de
cada una de estas pginas y as podemos escribir la ruta ya en esos enlaces. Lo mejor a la hora de decidir
el nombre para un archivo Html es nombrarlo con el nombre de la seccin o subseccin y as ser muy
fcil saber qu contiene.
Recuerda estas normas bsicas e importantsimas a la hora de nombrar archivos tanto html como de
imgenes, carpetas, archivos de msica o cualquier otra cosa:

Usar solo minsculas.

Solo usar letras y nmeros, nunca smbolos raros.
Nunca empezar el nombre de un archivo con un nmero (1nombre.html).
No dejar espacios en blanco, como mucho guiones medios "-" (no bajos "_").
Nunca poner acentos en los nombres de los archivos.
Ponerle un nombre que refleje el contenido, seccin o subseccin de la web. Nunca cosas como
pagina1.html sino nombres que tengan sentido.

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

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

historia.html
discografia.html
conciertos.html
descargas.html
foro.html
souvenirs.html

Ves? Sencillos, representativos, sin cosas raras... make it simple! deca Einstein ;=)

Una carpeta para cada seccin

Si tuvieramos todos los archivos de la web guardados en la misma carpeta, a la larga nos sera muy
complicado encontrar un archivo determinado, de modo que me parece una buena idea crear una carpeta
para cada seccin. Cada una de esas carpetas tendra el nombre de la seccin (recordando las normas
anteriores!). Dentro de cada una de ellas colocaramos tanto las pginas de esa seccin (las
subsecciones) como las imgenes, archivos de msica, etc que tenga, por ejemplo en una carpeta
llamada "objetos".
As que antes de nada ya puedes empezar creando una carpeta para cada una de esas secciones. Ya sabes,
con los nombres historia, discografa, conciertos, descargas, foro y souvenirs. Recuerdas cmo se crean
las carpetas? Puedes hacerlo de dos maneras. Una directamente abriendo la carpeta donde guardamos la
web de ejemplo en tu escritorio y creando las carpetas y otro modo es desde el Html Kit. Vamos a
hacerlo desde el Html Kit para recordar cmo era, oki?

Una carpeta para cada seccin

Si tuvieramos todos los archivos de la web guardados en la misma carpeta, a la larga nos sera muy
complicado encontrar un archivo determinado, de modo que me parece una buena idea crear una carpeta
para cada seccin. Cada una de esas carpetas tendra el nombre de la seccin (recordando las normas
anteriores!). Dentro de cada una de ellas colocaramos tanto las pginas de esa seccin (las
subsecciones) como las imgenes, archivos de msica, etc que tenga, por ejemplo en una carpeta
llamada "objetos".
As que antes de nada ya puedes empezar creando una carpeta para cada una de esas secciones. Ya sabes,
con los nombres historia, discografa, conciertos, descargas, foro y souvenirs. Recuerdas cmo se crean
las carpetas? Puedes hacerlo de dos maneras. Una directamente abriendo la carpeta donde guardamos la
web de ejemplo en tu escritorio y creando las carpetas y otro modo es desde el Html Kit. Vamos a
hacerlo desde el Html Kit para recordar cmo era, oki?

Creando las carpetas

Vamos a recordar cmo se crean carpetas en el sitio web con el Html Kit, como siempre, paso a paso
para que no pierdas detalle.

133

Abre para empezar el Html Kit y haz que se muestre la ventanita de WorkSpace. Ya sabes cmo, clic en
"Ver" del men de arriba del Html Kit, y clic en "WorkSpace" dentro del desplegable que se abre. Haz
clic con el botn derecho del ratn sobre la carpeta amarilla web-ejemplo-cctw-local y en este otro
desplegable que se abre elige "New" y "Create New Folder", como en la imagen de aqu abajo....
... anda, me ha vuelto a pasar lo mismo, perdona. Si, se ve que si coloco a la derecha de mi men de la
izquierda de CCTW una imagen muy grande, como no cabe, se me queda un hueco entre el primer
prrafo y la imagen, un espacio muy feo, todo vacio... menos mal que recuerdo el truco, escribir una
chorrada para rellenar y conseguir as que la imagen se quede un poco ms abajo.. lo he logrado ya o
tengo que seguir escribiendo tonterias... a ver... Pues s, ya parece suficiente, perdona de nuevo, je je je

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

134

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

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

Las carpetas "objetos"

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

ves? Fcil no? Pues haz t lo mismo con el resto de carpetas objeto que tenemos que crear en el resto de
carpetas, oki? Al final querdara una cosa as en la ventana de WorkSpace:

La nica seccin que no va a estar dentro de ninguna carpeta ser la portada, pues como va a ser la
misma pgina principal (index.html) no podemos colocarla dentro de ninguna carpeta, debe ir
directamente en la raiz del servidor y adems se debe llamar index.html, es decir, el archivo de la
portada no se llamar portada.html sino index.html y no estar dentro de ninguna carpeta. [Ms
informacin sobre qu es la raiz del servidor aqu]
Los archivos de la portada tambin estarn en una carpeta objetos, que es la que ya tenamos. Es la que
he sealado en azul en la imagen de arriba y que ya contiene algunos archivos, los de los bordes del
men, etc.

Creando las pginas de las secciones

Bien, ha llegado el gran da! Vamos a crear las pginas de cada una de las secciones ahora mismo. Te
imaginas tener que hacer todo lo que llevamos hecho cada vez que queremos hacer una nueva pgina?
Pffff, sera de locos. Es por eso que hemos creado la plantilla, para ahorrarnos todo ese trabajo. Vers
qu rpido generamos todas las dems pginas.
Abre el Html-Kit y abre la plantilla.html. Bien, de esa plantilla vamos a aprovechar todo. La copiaremos
en todas las carpetas y as en lugar de empezar desde cero con cada una solo tendremos que aadir los
contenidos. Pero antes vamos a retocarla ligeramente, eliminando lo que no nos hace falta y colocando
unas equis en los lugares donde deberiamos rellenar algo, para ms tarde acordarnos, vale? Vamos a ver
qu cosas son las que debemos rellenar para personalizar cada una de las pginas que vamos a crear.
Abre la plantilla y mira su cdigo Html. En la quinta lnea vemos que se define el ttulo de esa pgina.
Ahora mismo pone "Page Title" cuando en realidad debera poner el ttulo de esa pgina concreta.
Vamos a borrar "Page Title" y colocaremos unas pocas equis, y as recordaremos que ese es un hueco
que tendremos que rellenar en todas las pginas que vamos a crear. Debe quedar as:
136

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

Y ahora debera quedar as:

137

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

138

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

Una nueva pgina para la seccin historia

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

139

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

Ves?
140

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

Qu les pasa a los estilos CSS de estas pginas de

seccin?
Vaya, si hacemos vista previa a alguna de esas pginas de seccin que hemos creado.... se ve toda
deformada. Por qu puede ser? Parece como si los estilos CSS que tenemos definidos en la hoja de estilo
no funcionaran...

141

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

142

Bien, vemos que la ruta (relativa) de la hoja de estilos es "estilo-general.css". Esto significa que el
navegador cuando visita la pgina historia.html debe buscar la hoja de estilos en la misma carpeta en la
que est historia.html y ese no es el caso. Para arreglarlo tenemos dos opciones.
La primera de ellas es colocar una copia de estilo-general.css en cada una de las carpetas de seccin que
tenemos. Esto tiene varios inconvenientes. Tendramos unos cuantos archivos repetidos. Si un dia
decidimos hacer un cambio en la hoja de estilos tendramos que hacer lo mismo en la el resto de carpetas
y eso es un rollo.
La segunda opcin es retocar la ruta para que busque la hoja de estilos donde est ahora, es decir, fuera
de la carpeta historia, en la raiz del servidor. As tendramos una sola hoja de estilos para todas las
pginas de todas las secciones. Esta opcin parece mejor, pues si alguna vez queremos hacer un cambio
basta con retocar una sola hoja de estilo. De modo que vamos a retocar la ruta.
Y qu ruta tenemos que poner? Si el navegador est visitando la pgina historia.html, para acceder a
estilo-general.css tendr primero que salir de la carpeta historia y despus abrir estilo-general.css Te
acuerdas como se escriba eso en Html? Para salir de una carpeta se escribian en la ruta dos puntos y
despus una contrabarra (../). Y para abrir un archivo se escribia su nombre. As que la ruta que debemos
colocar ser:
<link rel="stylesheet" href="../estilo-general.css" type="text/css" media="all">

Ests de acuerdo? Bien. Y qu ruta habr que poner por ejemplo en la nueva pgina discografia.html?
Pues si te fijas, sera la misma que la de historia.html pues hace falta lo mismo, salir de su carpeta (../) y
abrir la hoja de estilo.
Fjate el trabajo que tenemos ahora.... tenemos que modificar la ruta de todas las pginas que tenemos
creadas... Y eso no es nada. Imaginas cuando queramos cambiar algo en todas las pginas de la web y
tengamos unas 500 o mil pginas!!! juas! Hay que inventar algo para evitar eso verdad? Pues no pienses
mucho que ya est inventado. Lo vemos en la leccin siguiente.

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

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

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

Poniendo en marcha el EditPad Lite

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

144

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

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

145

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

Reparando la ruta de la hoja de estilo

Tienes abierto el EditPad Lite? Pues vamos a reparar las rutas aquellas. Ten en cuenta que este programa
va a buscar y reemplazar el cdigo que le indiquemos solo en las pginas que abramos con l en ese
momento. Es decir, si quiero hacer la "bsqueda y reemplazo" en tres pginas concretas, tenemos que
abrirlas con ese programa, dejarlas abiertas y entonces hacer eso de buscar y reemplazar. De este modo
nos aseguramos de que no se va a buscar ese cdigo en otras pginas que no nos interesen.

146

Como nosotros queremos hacer la bsqueda y reemplazo en las pginas de las carpetas de las secciones
que hemos creado antes, lo primero que vamos a hacer es abrirlas con el EditPad Lite. Cmo se hace
esto? Vamos a verlo.
Primero abre el EditPad Lite. Ahora ve a File (significa archivo) que est en el men horizontal de arriba
de ese programa y escoge Open (abrir).

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

147

Ya has abierto todas? Recuerda, son todas estas, historia.html, discografia.html, conciertos.html,
descargas.html, foro.html y souvenirs.html. Bien, pues seguimos en la pgina siguiente.

Rellenando datos en el EditPad Lite

Ahora, en ese mismo programa, selecciona la lnea completa de la ruta en cualquiera de esas pginas
abiertas. En la imgen de aqu abajo vers como el cdigo Html de las pginas abiertas aparece en la
ventana de arriba del todo del EditPad Lite. Es ah donde puedes seleccionar esa lnea de cdigo.
Para seleccionarla ya sabes, haces clic al principio de la lnea, arrastras sin soltar el botn del ratn hasta
el final de esa lnea, sueltas (se queda todo azulado) y ahora pulsas sobre la seleccin (lo azul) con el
botn derecho del ratn y escoges Copy, tal y como puedes ver en la imagen de abajo.
Has merendado ya? No tienes hambre? Pues yo me tomaba ahora mismo un bocata de nocilla y me
quedaba listo, je je je. Vaya, ya me has pillado otra vez escribiendo chorradas para que se baje un poco la
imagen. Jo, es que me tropezaba con el men... je je. Venga vale, seguimos... aqu tienes la imagen:

148

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

149

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

150

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

Reemplazando cdigos con EditPad Lite

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

151

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

"Save This File": Esto es si quieres guardar la pgina que est activa, no las otras.
"Dont Save This File": Significa que la que est activa no quieres guardarla.

152

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

Reparando el logotipo
Bueno, a veces todo arreglo tiene sus daos colaterales, je je je, pero no pasa nada. Estas cosillas nos
sirven muy bien para seguir aprendiendo y practicar con todo lo que voy enseando as que, sigamos.
Resulta que si ahora haces vista previa sobre cualquiera de las nuevas pginas creadas, como por
ejemplo sobre historia.html te dars cuenta de que ahora no se ve el logotipo que tenamos, el de
comocreartuweb de la parte superior. Adems, ya no funciona su enlace y en lugar de llevarnos a
index.html nos da un error. No es dificil adivinar porqu, pero te lo digo yo que soy ms rpido, je je.
Resulta que ahora las rutas del archivo del logotipo.gif y la del enlace hacia el index no son correctas.
Esto es por el mismo motivo que antes, porque son copia de la plantilla que antes no estaba dentro de
ninguna carpeta y como ahora si lo est, tenemos que reparar las rutas, corregirlas.
Veamos rpidamente cuales son las rutas de logotipo.gif y la del enlace a index.html en la pgina
historia.html. En el cdigo Html de esa pgina vemos esto:
<div id="cabecera">
<div id="logotipo"><a href="index.html"><img src="objetos/logotipo.gif"
width="270" height="80"
alt="Haz clic aqu para volver a la pgina de inicio"></a></div>
<div id="publicidad">Bienvenidos a mi Web</div>
</div>

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

153

alt="Haz clic aqu para volver a la pgina de inicio"></a></div>

<div id="publicidad">Bienvenidos a mi web</div>
</div>

Muy parecidas, solo cambia el aadirle los puntos y la contabarra.

Pero esto hay que cambiarlo en tooodas las pginas web que tenemos dentro de las carpetas de seccin!
Vaya tela, no? Menos mal que ahora sabemos manejar perfectamente el EditPad Lite y ser coser y
cantar! Vamos all y lo recordamos? Esta vez te lo explico de un modo ms rpido, no creo que necesites
mucha ayuda otra vez, no?
Abrimos el EditPad Lite, abrimos desde l todas las pginas que tenemos dentro de carpetas (las mismas
que la vez anterior). Escribimos en la ventana de arriba (la de Search) esto:
<div id="cabecera">
<div id="logotipo"><a href="index.html"><img src="objetos/logotipo.gif"
width="270" height="80"
alt="Haz clic aqu para volver a la pgina de inicio"></a></div>
<div id="publicidad">Bienvenidos a mi web</div>
</div>

Y en la ventana de abajo esto otro:

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

Le damos al botn "Replace All", cerramos el EditPad Lite, le indicamos que guarde todos los archivos
y... ya est. Todo reparado. Que gusto verdad? Je je je.

Personalizando un poco cada pgina de seccin

Bien, ya tenemos lista la estructura de carpetas de la web para tenerlo todo bien ordenado. Adems
tenemos la pgina principal de cada una de las secciones. El siguiente paso sera hacer funcionar el
men horizontal (la barra de navegacin que hay bajo la cabecera, con el fondo gris) de todas estas
pginas, es decir, colocar los enlaces en ese men (un enlace para cada seccin) para que estemos en la
seccin que estemos, desde all podamos dirigirnos a cualquier otra seccin de la web.
Hay una pequea pega y es que, como todas las pginas que tenemos ahora mismo son exctamente
iguales, cuando hagamos funcionar el men horizontal no sabremos si funciona o no, pues nos dirigir a
una pgina idntica y no vamos a observar ningn cambio. Recuerda que todas ellas son copia excta de
la plantilla. Lo pillas? As que antes de ponernos a arreglar el men y sus enlaces vamos a personalizar
un poco cada una de las pginas de las distintas secciones.
Para ello simplemente abriremos cada una de ellas con el Html Kit y rellenaremos el titulo (<title>) y
pondremos un poco de texto en la parte del contenido principal. vale? Pues vamos all.

154

Empezaremos por la pgina historia.html Abrela con el Html Kit y pone como ttulo este, "Historia de la
banda". Ya sabes cmo, no? Escribindolo entre <title> y </title>. Ahora en el ttulo del contenido, entre
<h1> y </h1> escribe esto otro: "Esta es la historia de la banda". Ya, no es muy original, pero es lo que
doy de s a estas horas... je je je. Y para terminar, invntate algo para poner en el prrafo que hay debajo
del ttulo que acabas de retocar. Quitas las equis y te inventas algo tal que as:
"La banda naci en 1982, cuando tras ver por la tele un concierto de Bruce Springsteen dos chavalotes
se digeron... y si aprendemos a tocar algo? Fue entonces cuando Juanito se compr su primera batera y
Pepito su primer ampli y guitarra. Tras encontrarse con Pablito y convencerle de que le pidiera el bajo a
su tio, empezaron a ensayar en el garaje de uno de ellos. Al principio intentaban tocar sus canciones
preferidas, las que sonaban en esos momentos por la radio y cosas as. Ms tarde Pepito empez a
escribir algunas letras a las que pusieron msica. As naci la banda, imagino que, igual que muchas
otras".
Si yo fuera bueno escribiendo novelas no estara aqu enseandote a crear pginas web, as que no te rias
de m y de lo que me invento y ale, a copiar gandl! je je je. Ahora haz lo mismo con el resto de las
pginas que tenemos en las dems carpetas. Ponle el Title y el ttulo H1 a cada una e intenta inventarte
un par de prrafos para que las pginas recuperen un poco la forma, oki? Si, se que es un tostn, pero
hay que hacerlo para poder seguir, venga....

Haciendo funcionar los enlaces del men

horizontal
Ya estamos en condiciones de hacer funcionar el men horizontal de arriba, tambin llamado barra de
navegacin. Para ello abre una pgina cualquiera de las que tenemos hechas, por ejemplo historia.html
Si te fijas en su cdigo Html, en la capa navegacion teniamos puesto esto:
<div id="navegacion">
<ul>
<li><a href="#">Seccin 1</a></li>
<li><a href="#">Seccin 2</a></li>
<li><a href="#">Seccin 3</a></li>
</ul>
</div>

155

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

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

156

<li><a href="../souvenirs/souvenirs.html">Souvenirs</a></li>
</ul>
</div>

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

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

Ahora solo nos queda usar el buscar y reemplazar del EditPad Lite para de un plumazo actualizar los
cdigos de los mens horizontales de tooodas las pginas de las secciones. Te atreves a hacerlo sin
ayuda?
Abre el EditPad Lite, abre todas las pginas de las secciones, (Portada, Historia, Discografa, Conciertos,
Descargas, Foro y Souvenirs), y desde una de ellas, escribes el cdigo a buscar en la parte de arriba y el
nuevo cdigo que queremos en la parte de abajo. Te recuerdo que el cdigo a buscar era este:
<div id="navegacion">
<ul>
<li><a href="#">Seccin 1</a></li>
<li><a href="#">Seccin 2</a></li>
<li><a href="#">Seccin 3</a></li>

157

</ul>
</div>

El que queremos (que va en la ventada de abajo del EditPad Lite) lo puse antes. Ahora pulsas sobre
"Replace All" y listo, cierras el programa, le dices que guarde todas y... misin cumplida de nuevo!

Corrigiendo la deformacin del men lateral

Si si, ya se que llevamos un montn de lecciones ya corrigiendo cosas, pero.... y lo que ests
aprendiendo? Je je je. Vers como pronto tenemos la web de ejemplo terminada y puedes entrar a
construir la tuya propia. Adems, vers que cada vez que corregimos algo aprendemos cosas nuevas, no?
De eso se trata.
Si haces vista previa en cualquiera de las pginas de seccin, por ejemplo de la pgina historia.html,
vers como ahora el men lateral de la izquierda aparece casi en el centro deformando la web. Esta
deformacin solo se ve bien usando Firefox, pues si usas el Internet Explorer apenas se aprecia. En
cualquier caso hay que arreglarlo.
Adems, vers como los elementos del men horizontal que acabamos de hacer, estn descentrados. Hay
que modificar los margenes de la capa navegacin para ajustarlo mejor y evitar adems la deformacin
que tenemos. Eso se hace muy rpido retocando la hoja de estilos, estilo-general.css
Mira, esta es la deformacin que te digo usando Internet Explorer:

Y esta es usando Firefox:

158

Hay un hueco demasiado grande a la izquierda de los enlaces del men horizontal y adems se nos baja
el enlace Souvenirs a una segunda lnea que no queremos. Adems puedes ver como los usuarios de
Firefox van a ver la web deformada por ese mismo motivo, al desplazarse el enlace Souvenirs a una
segunda lnea, desplaza tambin el men lateral. No te preocupes, lo arreglamos enseguida.
Abre la hoja de estilos, estilo-general.css y echa un vistazo a las lneas donde hemos definido estilos a la
capa navegacin, son estas tres principalmente:
#navegacion {background-color: gray ; border: black 1px solid ; height:20px}
#navegacion li {float:left ; list-style:none ; margin: 0px 20px 0px 20px }
#navegacion ul { margin-left: 180px }

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

Si ahora guardas la hoja de estilo y haces vista previa sobre cualquier pgina de seccin, vers que ahora
se ve... genial! No somos unos genios?
An podramos retocarlo un poco ms variando la segunda lnea ( margin: 0px 20px 0px 20px ).
Retocando esos parmetros puedes hacer que los enlaces estn ms o menos cerca unos de otros, pero
eso te lo dejo para cuando hagas tu propia web, oki? Solo recuerdalo por si te hace falta.
159

Nota: Te recuerdo que si ves que las pginas aparecen un poco deformadas, es por que te falta escribir
algo de contenido en la parte central. Hazme caso y rellenala, as como el ttulo y esas cosas que te he
dicho.
Si se deforman pero no se arregla con eso, tal vez hayas cometido algn error al usar el EditPad Lite. En
ese caso comntanoslo en el foro y te ayudamos a corregirlo, oki? Esto va viento en popa!!!

La nueva index o portada

Seguramente en muchas ocasiones habrs visto que al entrar en una pgina web aparece en primer lugar
una pgina de presentacin que suele ser ya tpica. Un banner o logotipo grande de la web en cuestin y
un enlace en el que pone con letras grandes "ENTRAR" y... poco ms. Personalmente y aunque en mis
comienzos la usaba en mis webs, hoy en da no me gusta nada ese tipo de portada o pgina de
presentacin.
Los motivos son diversos. Por un lado la apariencia de esas pginas no suele tener mucho que ver con
las que encontramos luego en el interior de la web, perdiendo coherencia con el resto de pginas. Por
otro lado, hoy pienso que el visitante quiere encontrar lo que busca de un modo rpido y ese tipo de
pgina de presentacin no es ms que un clic ms que tiene que hacer el visitante para acceder a esa
informacin que busca.
De modo que, a pesar de que hemos construido una index.html a modo de presentacin, vamos a
eliminarla y a colocar en su lugar una pgina copiada de nuestra plantilla. De este modo la apariencia
ser la misma que la de las dems pginas quedando el conjunto ms coherente. Desde el men
horizontal de arriba de esa pgina el visitante puede ya acceder a las distintas secciones de la web. En la
parte central, donde se coloca el texto o contenidos, pondremos una breve descripcin de lo que el
visitante puede encontrar en la web. Os parece bien?
Si, si, ya se que despus de lo que hemos trabajado en la index en estas lecciones da un poco de pena
eliminarla as, tan friamente, je je, pero recuerda que al construirla has aprendido conceptos bsicos que
nos servirn para seguir aprendiendo, no creo que haya sido en vano.
As que para crear la nueva index.html abre tu Html Kit, y abre la plantilla con l. Ahora lo que haremos
es irnos al men de arriba del Html Kit y pulsar sobre Archivo + Salvar Como.
En la ventana que se abre ponedle de nombre index.html y pusa en Guardar. Te avisa entonces de que ya
existe un documento con ese nombre y te pregunta si quieres sobreescribirlo. Dile que s y el index
antiguo dejar de existir. En su lugar tendremos un index.html cuyo contenido es idntico al de la
plantilla.

Personalizando el index.html
Aunque parezca un poco pesado, realmente esto nos sirve para seguir practicando de modo que no te
quejes demasiado, je je je. Para m sera ms fcil drtelo todo ya terminado, pero entonces no tendra
sentido esto de las lecciones.

160

El caso es que ahora que tenemos el index copiado de la plantilla, tenemos que hacer funcionar el men
horizontal de arriba igual que hicimos con las pginas de las secciones. En este caso no nos vale el
mismo cdigo que en aquellas pginas, pues esas estaban dentro de una carpeta mientras que index.html
est fuera. Por eso, las rutas no son exctamente las mismas y tenemos que ponrselas correctamente. Es
fcil, ya veras.
Una vez tengas abierta la pgina index.html con el Html Kit, ve a ver su cdigo, concretamente la parte
del men superior horizontal. Ahora mismo es como este:
<div id="navegacion">
<ul>
<li><a href="#">Seccin 1</a></li>
<li><a href="#">Seccin 2</a></li>
<li><a href="#">Seccin 3</a></li>
</ul>
</div>

Hay que aadir los enlaces para el resto de secciones, como hicimos antes. Quedara as:
<div id="navegacion">
<ul>
<li><a href="#">Portada</a></li>
<li><a href="#">Historia</a></li>
<li><a href="#">Discografa</a></li>
<li><a href="#">Conciertos</a></li>
<li><a href="#">Descargas</a></li>
<li><a href="#">Foro</a></li>
<li><a href="#">Souvenirs</a></li>
</ul>
</div>

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

Ests de acuerdo con esto? Pero recuerda, el cdigo de las listas deben tener todas las lneas seguidas, de
modo que lo pondramos de este modo (eliminando espacios y saltos de lneas):
<div id="navegacion">

161

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

Bien. Pues pon en la index.html ese cdigo y ya lo puedes guardar. Si le haces vista previa ahora al
index.html vers como aparece algo descuadrado. Ya sabes que s por no tener a penas contenido, de
modo que aprovechando que estamos liados con ese archivo, escrbele un par de prrafos ms o menos
largos, ponle un <title> decente, como por ejemplo:
<title>Pgina Oficial de la banda</title>

y ya puestos, escrbele tambin algn ttulo entre <h1> y </h1>, donde pusimos las equis, vale? Por
ejemplo esto:
<h1>Bienvenidos a la pgina oficial de la banda</h1>

Ahora s debe verse bien la vista previa.

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

Completando el men lateral izquierdo

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

162

Si an mantenemos esa estructura, vemos que desde el men horizontal se puede acceder a la portada y a
las pginas principales de cada seccin. Una vez en ellas, haremos que desde el men lateral izquierdo
se pueda acceder a las subsecciones. La portada no va a tener subsecciones y por tanto no tiene sentido
mantener en ella ese men lateral. Lo mismo ocurre con la seccin Foro, no va a tener subsecciones, de
modo que eliminaremos ese men lateral de ambas, tanto de la portada (index.html) como del foro
(foro.html).
Para eliminar el men, basta con borrar las lneas de cdigo que lo definen en los archivos index.html y
foro.html. Recuerda que el cdigo a eliminar es este:
<div id="menu">
<h1>Ttulo de Seccin 1</h1>
<ul><li><a href="#">Enlace 1</a></li><li><a href="#">Enlace 2</a></li><li><a
href="#">Enlace 3</a>
</li><li><a href="#">Enlace 4</a></li></ul>
</div>

Las pginas portada y foro no se van a deformar por eliminar esa parte de cdigo. Tan solo no se ver el
men y el espacio que ocupaba pasa a formar parte del contenido central. En el futuro, si cambiamos de
idea y queremos colocar de nuevo el men, bastar con colocar de nuevo esas lneas de cdigo, de modo
que ya lo puedes eliminar sin miedo de ambas pginas, oki?
Si lo deseas, elimina solo el cdigo que te acabo de decir arriba, pero deja las dos lneas de comentarios
que habamos puesto hace unas pginas. Me refiero a estas dos:
<!-- INICIO DE CODIGO DE MENU LATERAL IZQUIERDO - NO TOCAR -->
<!-- FIN DE CODIGO DE MENU LATERAL IZQUIERDO -->

163

De ese modo, si un da quieres volver a poner el men sabrs dnde iba, vale? Adelante! Elimina esos
cdigos y seguimos palante!

Men lateral de Historia

El mtodo es muy similar al anterior, al que hemos usado para crear el men horizontal de la parte de
arriba, pero en este caso no vamos a partir de la plantilla sino que vamos a partir de la pgina que ya
existe en cada una de las carpetas de seccin. Es decir, para generar las pginas de la seccin historia,
abriremos el archivo historia.html y la guardaremos con los nombres de las subsecciones.
Pero antes de hacer eso arreglaremos el men lateral de esa pgina. De ese modo, cuando guardemos
con el nombre del resto de pgina de esa seccin ya se guardan con el men lateral terminado y no ser
necesario acudir al EditPad Lite para reemplazar esa parte de cdigo. Entiendes? Qu bien! je je.
Empezaremos entonces abriendo el archivo historia.html y mirando el cdigo que por ahora tenemos
para ese men lateral. Ese cdigo es este:
<div id="menu">
<h1>Ttulo de Seccin 1</h1>
<ul><li><a href="#">Enlace 1</a></li><li><a href="#">Enlace 2</a></li><li>
<a href="#">Enlace 3</a></li><li><a href="#">Enlace 4</a></li></ul>
</div>

Bien, qu cosas hay que cambiar aqu? Para empezar le vamos a poner el ttulo de la seccin entre <h1>
y </h1>. Lo que escribamos ah aparecer en la parte alta del men lateral. Pondremos entonces
"Historia" y quedara as esa lnea:
<h1>Historia</h1>

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

Ahora solo queda colocar bien las rutas. Pero claro, an no existen los archivos de las subsecciones,
verdad? As que no sabemos qu poner en la ruta de cada uno... No pasa nada. Decidimos y cmo se
van a llamar esos archivos y como sabemos que los vamos a guardar en la carpeta historia, tenemos
todos los datos que nos hacen falta para escribir las rutas correctamente. Veamos.
Si el archivo de la subseccin Origen lo vamos a llamar origen.html, y sabemos que lo vamos a guardar
(cuando lo generemos) dentro de la carpeta historia, sabremos que para ir desde cualquier pgina de la
seccin historia a la pgina origen.html solo es necesario abrir dicho archivo. No es necesario salir ni
164

entrar en ninguna carpeta, por lo que la ruta ser simplemente el nombre del archivo, es decir,
"origen.html".

Lo mismo va a ocurrir con el resto de enlaces de las dems subsecciones, no es as? Entonces es fcil
adivinar que el cdigo completo quedara de este modo:
<div id="menu">
<h1>Historia</h1>
<ul><li><a href="origen.html">Origen</a></li><li><a
href="miembros.html">Miembros</a>
</li><li><a href="formacion.html">Formacin Actual</a></li><li><a
href="album.html">
Album de Fotos</a></li></ul>
</div>

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

Generando el resto de subsecciones de Historia

El resto es bien fcil, vuelve a abrir la pgina historia.html y ahora vas arriba, al men del Html Kit y
pulsando sobre Archivo + Salvar Como le vas dando los nombres de los archivos de las subsecciones
uno a uno. Es decir, la guardas como origen.html, miembros.html, formacion.html y album.html y ya
tenemos toda esa seccin completa.
Solo nos faltara ahora personalizar un poco cada una de esas subsecciones. Cmo? Pues igual que
hicimos con las secciones. Le ponemos el ttulo correspondiente en el <title>, cambiamos el contenido,
los prrafos para hablar de lo que toque en cada subseccin, etc, etc. De lo contrario, cuando
naveguemos por la web no nos vamos a dar cuenta de dnde estamos, pues todo el contenido ser copia
de historia.html. De acuerdo?
El resto es cosa tuya. No creo que sea necesario que te explique paso a paso cmo actuar con el resto de
secciones, no? Ya sabes, ahora abres la pgina de la siguiente seccin, discografia, arreglas el men
lateral en ella, la guardas y luego generas el resto de pginas de las subsecciones de discografia, que son
maquetas.html, cd1.html, cd2.html y cd3.html. Luego le personalizar los ttulos, les pones algo de texto
personalizado, algo que hable de esa seccin y listo, pasas a la seccin siguiente. Si, es una lata, lo se, je
je je.
Cuando termines con todo eso tendrs una web completamente lista para ser publicada en internet. Con
solo cambiar los ttulos, los prrafos con la informacin que te de la gana, aadir o quitar secciones o
subsecciones, modificar colores de fondo en la hoja de estilo, etc, etc, tendrs tu propia pgina web. Qu
me dices? Y todo sin costarte un chavo! No ha sido genial? Ja ja ja ja.
Te dejo aqu un enlace de cmo ha quedado esta web de ejemplo hasta el momento.
165

Claro que an queda mucho que aprender y cosas que aplicar a este ejemplo, como aprender a insertar
imgenes en la parte central de la web, donde va el contenido, saber colocarlas a la izquierda o a la
derecha, que el texto las rodee o no, hacer que los enlaces se marquen indicando en qu pgina est el
visitante, mejorar cosas para aparecer de los primeros en Google, aprender a insertar publicidad para
costear un hosting y dominio... y cientos de cosas ms, pero lo bsico ya lo tienes.
Todo eso y mucho ms lo encontrars en las lecciones siguientes de CmoCrearTuWeb. Por cierto, si te
sientes en deuda con CCTW te agradeceramos que cuando cuelgues tu nueva web en internet coloques
un enlace hacia nosotros y por qu no, que recomiendes estas lecciones a tus amigos. Eso nos ayudar a
crecer y repercutir sin duda en la mejora de esta pgina. Desde ya mis ms sinceros agradecimientos
por tu apoyo.
En las prximas lecciones (tengo que terminarlas primero) veremos como mejorar an ms esta web de
ejemplo. Mientras tanto haz tus propios experimentos, retoca todo lo que puedas para ir practicando y
usa el foro para resolver tus dudas y ayudar a los colegas rezagados!

Cmo y Dnde Conseguir el Dreamweaver

El primer paso ser conseguir el programa que usaremos para estas lecciones y que se llama
"Dreamweaver 3.0". Existen versiones ms modernas de este programa, pero me he inclinado por esta
por las siguientes razones:
1.- Est disponible en castellano. Very Well Manuel, je je. Seguro que lo agradeceris.
2.- Tiene todo (o ms de) lo que vamos a necesitar.
3.- Es la versin que menos ocupa, cosa buena para los que os tenis que bajar el programa, no?
4.- Es muy muy similar al resto de versiones ms modernas, por lo que dominada la versin 3.0 podrs
utilizar las siguientes versiones sin problemas, si es que lo deseas. Esas versiones posteriores estn ms
encaminadas a bases de datos, y cosas que an se nos quedan "algo" grandes. De todos modos, no te ser
dificil seguir el curso con otras versiones distintas, como la 4.0, etc.
5.- Porque me da la gana. Je je je. Bueno esto ltimo era medio en broma...

Lo Correcto sera....
Lo lgico, al estar empezando con este tema, es conseguir una versin "demo", pues sera desagradable
comprarse este programa y que luego no os guste. Puedes conseguir en la red una versin demostracin
de este programa. La versin demostracin solo funciona 30 das. Pasado este tiempo el programa deja
de funcionar. Si no te ha dado tiempo a decidir si te gusta o no, puedes volver a instalarlo
(desinstalndolo antes) y tendrs otros 30 das, y as cuantas veces quieras.

Y lo Incorrecto sera....
166

Hay gente que tras bajarse la versin Demo, busca por la red el Crack. Es un archivo que se copia dentro
del directorio donde est instalado el Dreamweaver y elimina ese lmite de duracin. Eso no es muy
legal, pero hay gente que lo hace, pues es prcticamente imposible que alguien se d cuenta de ello. All
cada uno.
Hay gente an ms "mala" si cabe, que se baja el programa completo (no demo) con programas como el
eMule, Kazaa, eDonkey, ect, y luego durante la instalacin, le introduce un nmero de serie que ha
encontrado en internet y que a veces viene adjunto al propio programa que se bajan, funcionando el
programa de maravilla. Hay que ver que gente ms malvada.... hay que ver....

Moraleja...
En la seccin Herramientas tiles que puedes encontrar en la pestaa de arriba, te dejo algunas
direcciones donde puedes conseguir este fabuloso programa y algunos otros no menos interesantes junto
con una breve descripcin de los mismos. Si alguno de los enlaces falla me avisas y lo arreglar de
inmediato. All te explico tambin cosillas relacionadas con programas tiles para bajar software y otros
asuntos relacionados.
Puedes ser bueno y bajarte la versin Demo para 30 das, o ser malo y pillar la versin completa con el
crack, pero recuerda: En estas lecciones nos basaremos en el DreamWeaver 3.0 en Castellano (sea
Demo o no, craqueado u original).
Ahora, consigue este programa. Cuando lo tengas, antes de instalarlo visita el apartado La Instalacin
para ver las instrucciones de un modo ms detallado. Pero como seguramente tardars un ratito en
bajrtelo, en la siguiente pgina haremos unos cuantos deberes para hacer tiempo. No vamos a
desperdiciar ni un segundo! El tiempo es Oro!

CURSO DE TABLAS

Escoger un Servidor Para Tu Pgina Web.

A grandes rasgos, un servidor no es ms que un gran ordenador conectado las 24 horas del da de forma
ininterrumpida (o al menos, eso esperamos). Este gran ordenador posee un disco duro muy muy grande,
un montn de megas de Ram y una velocidad bastante alta para internet.
Cuando una persona visita cualquier web, en realidad lo que est haciendo es acceder a uno de esos
grandes ordenadores, concretamente al que alberga esa web en su gran disco duro. Obviamente si ese
ordenador estubiera apagado en ese momento sera imposible visitarla.
Un servidor como por ejemplo Terra, Tripod, Wanadoo, etc, cuando te ofrece un espacio de, por
ejemplo, X megas para tu pgina web, en realidad te est dejando X megas de su disco duro para que t
metas los archivos de tu web. Para mandar esos archivos al disco duro del servidor, solemos usar un
programa FTP, pero eso es otra historia que explico en otra seccin.

167

Aunque esta explicacin es un tanto burda, nos puede aclarar bastante las cosas a los novatillos. Je je, yo
al principio, creia que eso de internet era algo etreo, que mi pgina web estaba como flotando en los
cables de telefnica, je je, que burro leche, ja ja ja.
Si comprendemos bien qu es un servidor, podemos adivinar que cualquiera puede construir su propio
servidor. Bueno, cualquiera que econmicamente pueda mantener un ordenador ms o menos decente
conectado las 24 horas del da a Internet. De este modo el lmite de nuestra web ser el que nos marque
nuestro propio disco duro, no tendremos que aguantar propaganda ajena, no necesitamos FTP, etc, etc.
Pero esa es tambin otra Historia que an no controlo lo suficiente como para ensertela. Por el
momento, saber que es posible. Cuando controle ms el tema te lo explicar, vale?
De esto podris deducir, entre otras cosas, que una vez que has subido con el FTP tu pgina al servidor,
ocurre que:
1.- Podemos borrar los archivos de nuestra pgina que an tenemos en nuestro disco duro de casa, pues
lo que los visitantes ven es lo que hay en el servidor. No obstante, es mejor tenerlas tambin en nuestro
disco duro para poder realizar cambios.
2.- Si variamos nuestra pgina web de nuestro disco duro de casa, ampliamos la pgina, etc, los
visitantes no vern esos cambios hasta que subamos (actualicemos) los datos que hay en nuestro
servidor. Es decir, tras retocar tenemos que volver a subir todos los archivos que han variado a nuestro
servidor con el FTP.
Supongo que ahora tienes la cosa algo ms clara.

Vale, Pero Qu Servidor Escoger?

A continuacin te explico las caractersticas que suelen ofrecer los servidores. En la seccin siguiente te
indico cmo registrarte en uno de ellos. Lo cierto es que siempre es lo mismo, de modo que si prefieres
algn otro servidor las instrucciones del apartado siguiente van a ser igualmente tiles.
Las cosas a tener en cuenta para decidirte por uno de ellos son:
- El espacio web que te ceden: Cantidad mxima en megas que el servidor te cede para alojar todos los
archivos de tu web (pginas, imgenes, sonidos, incluso los E-Mails ocupan este espacio). No te dejes
asombrar por las megas que te regalen. Llenar 10 megas con pginas web os puede llevar aos, a menos
que subas vdeos, etc, que ocupan ms. Para que os hagis una idea, ComoCrearTuWeb tiene unos 900
archivos en total y apenas ocupa 6 megas. Vamos, que con 5 Megas vas sobrados por el momento O
acaso pretendes ocupar ms que yo???? Ni te atrevas.... je je je je.
- Si permite gestionar los archivos por FTP: El modo ms cmodo es subir y bajar los archivos con
FTP [?] (te recuerdo que el Dreamweaver tiene uno incorporado y es genial). Algunos servidores no te lo
permiten, y tienes que hacerlo a travs de su portal... un rollo.
- La publicidad que os incluyen a cambio: Es el precio "a pagar" por un servicio gratuito. En algunos
casos apenas molesta (wanadoo) pero en otros casos es odiosa (iespana, geocities), pues te descuajeringa
(vaya palabra me ha salo...) por completo la web. Es la causa ms crtica por las que la gente se decide
por uno u otro servidor. Los de pago no tienen propaganda, pero eso, son de pago... de todos modos hoy
168

en da no son tan caros como antes (o quizs ahora tenga yo ms dinero que hace unos aos... je je), de
modo que siempre puedes estudiar esa posibilidad. En el apartado Hosting y Dominos de
CmoCrearTuWeb encontrars informacin al respecto.
- El tipo de direccin (tambin se llama URL, para los ms avanzados...) que te dan para tu web: En
funcin del servidor escogido, la direccin que han de teclear tus visitantes puede ser algo tan cortito
como http://comocreartuweb.tripod.com hasta algo tan laaaargo y feo como
http://www.tripod.es/usuarios/comocreartuweb. La diferencia salta a la vista (bueno, casi salta de pgina,
je je je). Os adelanto que las direcciones tipo www.tunombre.com cuestan un dinerillo. Es lo que se
llama registrar un domino. No cuesta demasiado dinero eso si, pero es un dinerillo, de modo que lo
dejaremos para ms adelante.
- La tasa de transferencia mensual: [?] A ver si lo consigo explicar a la primera... Una web realmente
ocupa, lo que ocupan los archivos de las pginas que la forman (en Kilobytes), ms lo que ocupan las
imgenes, msicas de fondo, archivos para que se bajen tus visitantes, ect. Cada vez que un visitante
accede a una de tus pginas, el servidor donde la alojas le descarga todos estos Kilobytes (los de los
archivos de todo lo que visite de tu web). Cuando el total de Kilobytes descargados por tooodos los
visitantes durante ese mes superan un cierto valor (Tasa de Transferencia), el servidor corta el grifo y...
simplemente, tu web no se v hasta el mes siguiente. Esto puede ocurrir por poner archivos de video o
msica para descargar (no digamos ya si pones pelculas, je je je, no te llega ni para los anuncios..),o
tambin porque el nmero de visitantes es demasiado elevado (ojala sea por esto ltimo!!). Cada
servidor te ofrece una Tasa de Transferencia, que suele rondar 1 Gb (1 Giga). Los de pago te ofrecen
ms, segn lo que pagues, claro.
- Lenguajes que soporta: Por supuesto, todos soportan HTML y CSS, pero algunos adems admiten
PHP, ASP, extensiones de Frontpage, CGI.... y mil cosas que ahora mismo no me apetece explicar (es
que es tarde y me quiero acostar ya!!! ja ja ja ja). En principio, cualquiera nos vale en este sentido, pues
cuando aprendamos todas esas cosas raras que he nombrado, podremos irnos a otro servidor que nos
guste ms.
En la seccin Hosting y Dominios puedes ver estos datos para cada uno de los servidores propuestos. Si
conoces algn otro servidor que merezca la pena en funcin de las caractersticas citadas, no dudes en
escribirme para que lo pruebe y lo incluya.
Como vers, la mayoria de ellos son gratuitos. Los de pago pueden merecer la pena si las caractersticas
que os ofrecen los gratuitos se os quedan cortas. Esto suele suceder, no por espacio para las pginas, sino
por superar la tasa de transferencia mensual y sobre todo, porque los de pago no insertan su propia
publicidad en tu web como los gratuitos, en los que en algunos casos es tan molesta que los visitantes te
dejan de visitar.
Si deseas curiosear un poco a cerca de los servidores de pago, visitad tambin la seccin Hosting y
Dominios. En realidad no son nada caros. No obstante, es mejor comenzar por uno gratuito para ver
cmo nos va. Siempre hay tiempo de pasar a otro de pago o incluso a otro tambin gratuito que nos
guste ms.
Hay que ver qu pgina ms larga me ha salo. Si es que me lio a escribir.... y pasa lo que pasa....

Cmo Registrarse en www.orange.es

169

Bien, empezaremos visitando su web en:

www.orange.es
Al hacer clic en el enlace anterior (un enlace se suele llamar tambin "vnculo"), se abrir una pgina
nueva, para que puedas seguir a la vez las indicaciones de CmoCrearTuWeb al tiempo que haces el
registro en Orange.
Al abrirse la web de Orange, has de ir hasta la parte de abajo del todo, donde encontrars un enlace
donde pone "Pginas Personales". Haz clic en l.

Se abre entonces una nueva pgina de Orange. Puedes cerrar la anterior sin problemas. En esa nueva
pgina, en la parte superior izquierda, encontrars algo como lo siguiente:

170

Haz Clic en "Regstrate", sin necesidad de escribir nada en los huecos de al lado. Aparece entonces el
siguiente formulario que has de rellenar con tus datos. Los campos (huecos) marcados con asterisco (*)
son los obligatorios. El resto no tienes que rellenarlo si no quieres.

Una vez hecho esto, pulsa ms abajo, activando la opcin siguiente:

171

Y despus en el botn de Aceptar.

En la siguiente ventana, si no ha pasado nada malo, aparecer un mensaje de enhorabuena y las opciones
de visitar vuestro nuevo correo y activar la nueva web. Pulsa sobre "Clica y Actvala" y seguimos en la
pgina siguiente.

172

Date cuenta que tu E-Milio es tunombre@orangemail.es Esto va de maravilla!

Alta de nuestra nueva Web en Orange.

Hasta ahora, tenemos hecho el registro en Orange, y la pgina est dada de alta, pero nos falta activarla.
Para ello simplemente pulsa sobre "Clica y Actvala", en la ltima ventana que se abri.

Si por error (o por las prisas....) la has cerrado, no te preocupes, simplemente ve a www.orange.es y
vuelve a hacer clic en "Pginas Personales", casi al final de la pgina. Si recuerdas, es el mismo enlace
que pulsaste el comienzo del registro.
Ahora se abre de nuevo la pgina inicial, y tendremos que escribir el nombre de usuario y contrasea
para acceder a nuestro panel de control.

Recuerda, escoge @orangemail.es, no @orange.es ! ! ! Tras escribir los datos, pulsa en el botn de OK.
Aparece entonces otra ventana con este cuadro ms o menos por el centro de la pgina:
173

Haz clic ahora donde pone "EL ASISTENTE" para activar tu nueva pgina. Se abre el siguiente cuadro,
donde tendrs que escoger la categora de tu web y escribir un ttulo y una descripcin de la misma.
(Quizs te pida tu nombre de usuario y contrasea antes de que aparezca esta ventana de abajo. En ese
caso, donde pone elige dominio escoge orangemail.es).

Adems, escribe las palabras clave. Estas palabras clave son aquellas (de tu eleccin) que mejor
describan tu pgina. Separalas con comas. Si por ejemplo una de ellas es "fotografa", cuando un
174

visitante escriba esta palabra en el buscador de Orange, habr ms posibilidades de que tu web salga
entre los resultados, todo, por haber escogido esa palabra en este cuadro. No pongas ms de 8 o 10, pues
demasiadas palabras no mejoran los resultados, de modo que, escoje bien.
Tras rellenar todo esto y pulsa en "Enviar" y aparece otra ventana. Entra y cotillea un poco, pero la web
ya est activa, que es lo que queramos. Mi consejo es.. una vez aparezca esa ventana, cierrala y
volvemos a las explicaciones de ComoCrearTuWeb. Siempre puedes registrarte de nuevo con otro
nombre para hacer experimentos con esas plantillas que ofrece Orange, pero por mi parte, cierra esa
ventana y seguimos a nuestro rollo.

En Resumen
Resumiendo, ya tenemos la pgina web lista. Vacia, si, pero lista y visible en internet. Ya sabes la
direccin, (http://www.perso.gratisweb.com/tunombredelogin) pues vena en el cuadro anterior, al
igual que tu nuevo correo electrnico. Vers que ha sido rpido, no? y bien explicado... je je je. Ah! y ten
en cuenta que si la visitas ahora saldr una pgina web totalmente en blanco, pues no hemos escrito an
nada en ella. Eso si, no aparece ningn cdigo de error ni nada, simplemente todo blanco. Si te
encuentras la pgina as, es que todo ha salido correctamente, como no? je je. Seguimos en la siguiente
pgina.

La Instalacin del Dreamweaver.

La instalacin del Dreamweaver 3.0 en espaol (las otras versiones se instalan de la misma manera) es
bastante facilita. El programa una vez instalado ocupa unas 16 megas en vuestro disco duro, (segn
versin). Poca cosa para tu monstruo de PC, je je.
Para realizar la instalacin haz lo siguiente:
1.- Doble clic en el archivo de instalacin.
2.- Tras una ventana de presentacin pulsa en "Siguiente"
3.- Te pregunta si aceptas las condiciones de uso. Pulsa en "Si".
4.- Si el programa est completo, te pedir el nmero de serie. Si el programa es tuyo lo tendrs en la
caja del programa. Si no es as, sera ilegal que incluyers el nmero de serie de otra persona, pero all
cada uno con su conciencia.
5.- Una vez introducido el nmero de serie te pregunta dnde querieres instalarlo. Puedes dejar lo que
viene por defecto y luego pulsar en "Siguiente". En la Versin Demo, no te pedir nmero de serie.
6.- Te pregunta con que nombre quieres que aparezca en el menu de programas. Pinchad en "Siguiente".
7.- Resumen de lo que has elegido. De nuevo, clic en "Siguiente".
8.- Tras unos segundos el programa queda instalado y te pregunta si quieres leer el archivo de ayuda.
Puedes pasar de l quitando la seleccin y pulsar en finalizar.
175

9.- Aparece una ventana en el escritorio. Arrastra el icono verde y negro hasta el escritorio para hacer un
Acceso Directo al Dreamweaver y cerrar esa ventana.
10.- Haz clic en ese acceso directo y tes saldr una ventana preguntando si te queris registrar. Si le das a
no volver a mostrar, no saldr ms.
11.- Ahora te dars un susto, pues se abren unas cuantas ventanas que desconocemos por el momento.
Cierra todas menos la ms grandota con fondo blanco. A esta ventana la llamaremos de ahora en
adelante "Ventana Diseo" recuerdalo. Te enseo como es:

12.- Esa ventana que queda ser nuestra mesa de trabajo en estas lecciones. Cotillea un poco las
opciones que ofrece antes de continuar con estas lecciones para que te sea ms familiar. Date cuenta que
las ventanas que hemos cerrado ahora mismo podis abrirlas y cerrarlas haciendo clic en los botones que
aparecen abajo de esa ventana principal, a la derecha, con dibujos de un cuaderno, una flecha, etc, ms o
menos como estos:

Mantn en Orden desde el Principio.

Los que ya me conocis, sabris cuanto me gusta el orden de los archivos, de modo que no os
sorprender nada lo que os dir a continuacin. Al resto solo les puedo decir que confien en m y hagan
lo que les indico. Aunque puede resultar un poco rollo, pronto me daris la razn.
Pues bien. Vamos a crear una carpeta en nuestro disco duro llamada "Mis Webs" (por ejemplo). Dentro
de ella crearemos otras carpetas, una para cada una de nuestras webs. Si si, ya se que por ahora os
bastara con tener una, pero nunca se sabe. Quizs os guste registrar otra web ms, donde hacer
experimentos... no?. Por ahora, que solo tenis una, dentro de la carpeta "Mis Webs" cread otra carpeta y
ponedle el nombre de la nueva web que vais a crear. En mi caso se llamara "ComoCrearTuWeb", en el
ejemplo que seguiremos, la llamar "miejemplo". Si, ya se que soy muy original, ya.
La carpeta debera quedar como en la foto:
176

En la carpeta "miejemplo" es donde iremos haciendo la pgina que explicamos en estas lecciones. Pero,
repito, podis crear otra carpeta, por ejemplo llamada "WebPrueba" donde vosotros mismos podris
experimentar cosas nuevas. As no mezclaremos cosas.
De este modo, conforme vayamos aprendiendo cosas, las podris ir aplicando a vuestra propia web sin
mezclar nada de nada. Asimismo, si queris probar cosas por vuestra cuenta, antes de hacerlo
directamente en vuestra web (por si no os gusta luego o no funciona) lo probis en la carpeta
"WebPrueba". Creo que pillais la idea, no?
A continuacin definiremos el "sitio" en el Dreamweaver.

Cmo Configurar tu Sitio en el Dreamweaver.

Como ya sabemos, el servidor donde vamos a alojar nuestra web nos ofrece un espacio de algunas
megas. El conjunto de pginas, imagenes, sonidos, etc, que vamos a subir es lo que podramos definir
como nuestro "Sitio" y todo eso junto podr ocupar como mximo, el espacio que tengamos en el
servidor (wanadoo en el caso del ejemplo de este curso).
El Dreamweaver nos permite definir las caractersticas de nuestro sitio, es decir, podemos indicarle cul
es nuestro Nick y Password (o contrasea), adems de la direccin FTP [?] que nos ofrece nuestro
servidor para subir nuestra web, y de este modo, el mismo programa se encargar, cuando nosotros se lo
mandemos, de actualizarlo all en el servidor. Tambin nos podr revisar toda la web antes de subirla
para comprobar que los vnculos (enlaces) estan definidos correctamente. Otra ventaja de este programa
es que nos permite cambiar de nombre o de lugar (de carpeta) algunas de las pginas de nuestra web sin
que por ello tengamos que retocar las rutas. De eso se encarga ya el Dreamweaver. Para poder hacer
esto, lo primero que necesitamos es Definir Nuestro Sitio. (Ya os explicar que son las "rutas" esas).
Dreamweaver adems nos permite definir varios sitios, no uno solo. Esto es muy til si tenemos varias
Webs. Esta caracterstica nos vendr muy bien, pues el procedimiento de definir sitios lo podemos hacer
177

varias veces, una para cada una de las carpetas creadas anteriormente (VuestraWeb, miejemplo,
experimentos....). Para ello, haced lo siguiente:

Creando el Sitio "miejemplo"

Antes de nada, supondo que habrs creado las carpetas que te dije antes, no? Vale, vale. Entonces abre el
Dreamweaver y:
1.- Pulsa sobre "Sitio" + "Definir Sitios". Aparecer una ventanita como esta: (sin nada dentro)

2.- Pulsa sobre "Nuevo" para definir un nuevo Sitio. Ahora sale otra ventana:

3.- Donde pone "Nombre del Sitio" escribe el nombre de tu nueva web, en mi caso "miejemplo".
4.- En "Carpeta raiz local", pulsa sobre la carpeta amarilla y escoge la carpeta antes creada y llamada
"miejemplo", dentro de la carpeta "Mis Webs". Una vez seleccionada pulsa sobre "Abrir" y luego sobre
"Guardar".
178

5.- Activa las casillas de "Actualizar lista..." y "Cach" para mejorar la rapidez del programa.
6.- Pulsa sobre "Diseo del mapa del sitio", a la izquierda de esa ventana (donde el fondo es blanco).

7.- Aparecen otras opciones. Donde pone "Pgina principal" escribe "index.htm" y pulsa en "Aceptar".
Entonces te dira que el archivo no existe y que si quieres crearlo. Dile que si, es decir, pulsa en
"Aceptar".
8.- Activa la opcin "Mostrar archivos marcados como ocultos", para evitar subir archivos sin saberlo.
Todo ha de estar bajo control!
9.- A continuacin haz clic en "Datos del servidor Web", tambin en la parte izquierda de esa ventana.
Aparece entonces esta otra ventanilla:

179

10.- Dentro de "Acceso al servidor" haz clic y al abrirse escoge "FTP". Los datos que has de poner
dependen del servidor en el que te has registrado:
En Orange :: A continuacin, escribe "ftp.orange.es" (sin las comillas) en el apartado "Servidor FTP".
Esta es la direccin del FTP de Orange, comn a todas sus pginas personales. Bueno, si te registraste
con OrangeMail y no con Orange, el FTP es ftp.orangemail.es. El campo (hueco) donde pone
"Directorio del Servidor" dejalo en blanco. En "Conectar" escribes el E-Mail que te han dado al registrar
la web en Orange, en mi caso "ejemplomio@orangemail.es", y ten en cuenta que una letra mayscula y
una minscula no son lo mismo para el servidor. Escribelo entonces tal y como lo escribiste al
registrarte. Por ltimo, coloca tu contrasea y dejando el resto como est, pulsa en "Aceptar"
En iEspana :: A continuacin, escribe "tu-nombre-de-registro.iespana.es" (sin las comillas) en el
apartado "Servicio FTP". El campo (hueco) donde pone "Directorio del Servidor" dejalo en blanco. En
"Conectar" escribes el nombre con el que has registrado la web en iEspana seguido de guin bajo y el
nmero 5, es decir, si te registraste con el nombre "miejemplo" entonces en "conectar" has de poner
"miejemplo_5", y ten en cuenta que una letra mayscula y una minscula no son lo mismo para el
servidor. Escribelo entonces tal y como lo escribiste al registrarte. Por ltimo, coloca tu contrasea y
dejando el resto como est, pulsa en "Aceptar"
11.- Ahora en la ventana del principio aparecer el nuevo sitio creado. As de fcil. Pulsa en "Listo" y
seguimos hablando.

Creando Otro Sitio Distinto

9.- Sigue los pasos anteriores si deseas crear otro "sitio" (si has registrado alguna otra web en wanadoo o
tienes otro espacio en tu propio servidor). Se hace igual pero cambiando el nombre y la carpeta. Ten en
cuenta que si tu servidor no es Orange, el procedimiento es igual, pero cambia la direccin del FTP. Para
Orange hemos visto que podia ser ftp.orangemail.es o ftp.orange.es pero para otro distinto, llamado por
ejemplo xxxxx, seguramente la direccin sea ftp.xxxxx.es o ftp.xxxxx.com

Creando una Pgina Simple de Prueba.

El siguiente paso es crear una pagina principal. Como ya sabris cada servidor os pide un nombre
determinado para esa pagina principal. Puede ser index.htm home.htm etc. Para el ejemplo que nos
ocupa, (alojados en el servidor Wanadoo) se ha de llamar index.htm
180

Para crearla volved a la ventana "SITIO" y pulsad en "Abrir Sitio" + "miejemplo". Se abre entonces el
Sitio de nuestro ejemplo y aparece dentro la pgina "index.htm" que es la pgina principal. Si recordais,
la hemos creado al configurar el sitio.

Si pinchais dos veces sobre index.htm, se abre esta ventana, que de ahora en adelante denominaremos
"Ventana de Diseo":

(En principio os saldr completamente en blanco)

Para empezar, vamos a escribir en ella algo as como "Esta es mi pgina principal". Haced clic una vez
en esa ventana, en la parte de dentro, y escribid esa frase o algo similar.
A continuacin, vamos a guardarla. Para guardar esa pgina pulsad (en esa misma venana) en "Archivo"
y luego en "Guardar".
Como podis comprobar, en la ventana "SITIO" se os indica el nombre de cada archivo, su tamao, el
tipo y la fecha de su ltima actualizacin. La ventana de la pgina principal (la index.htm) podis
181

cerrarla ya. Para volver a abrirla solo tenis que hacer doble clic en la ventana "SITIO", donde aparece
su nombre.
Esto no es tan dificil, verdad? Ya os dije que confiarais en m. Vamos a seguir con otras cosillas, vale?

Ms Navegadores para la Vista Previa

Voy a explicaros un poco mejor eso de las Vistas Previas en el DreamWeaver. Como sabris ya a estas
alturas, los programas de diseo web nos muestran como se vera nuestra pgina si estubiera ya en la
red. Esto es lo que llamamos Vista Previa.
El Dreamweaver nos permite hacer las Vistas Previas con todos los Navegadores que tengamos
instalados en nuestro ordenador. Y para qu quiero yo ver mi web con ms de un Navegador? Pues es
bien sencillo. Desgraciadamente las webs no se ven igual con el Internet Explorer que con el Netscape,
Opera u otros Navegadores. En algunos casos las diferencias son mnimas, pero en otros (y esto es lo
ms normal) el resultado es desastroso. Por eso, conviene que hagamos las webs de modo que se vean
ms o menos bien en todos los Navegadores (nosotros aprenderemos a hacerlo as).
Hay personas que prefieren olvidarse de ciertos Navegadores para ahorrarse trabajo, alegando que hay
muy poca gente que use el Opera o el Netscape. Esto es un gran fallo, pues aunque solo un 5 o 6% de los
Navegantes utilizasen esos Navegadores, es una cifra muy respetable.
Pues bien. Para poder comprobar qu tal se ve nuestra pgina web no hay ms remedio que tener
instalados algunos de estos Navegadores. Al final de esta pgina os recomiendo los ms utilizados y os
dejo una direccin de donde descargarlos de forma gratuita.
Una vez instalados en nuestro disco duro, hay que decirle al Dreamweaver cuales son los Navegadores
que tenemos para poder hacer la vista previa con cada uno de ellos.
Para ello, bien en la ventana "SITIO" o en la ventana de Diseo, pinchad en "Archivo" + "Vista Previa
en el Explorador..." + "Editar Lista de Exploradores".

182

Se abre entonces una ventanita. En el recuadro con fondo blanco de la parte central aparecern los ya
definidos (si es que tenemos alguno definido por defecto).
Para incluir cualquier otro Navegador, pulsad en el signo " " y se abrir otra ventana en la que
pondremos el nombre del nuevo Navegador que queremos aadir y luego pulsamos en "Examinar" para
buscar el archivo ejecutable (es decir, con extensin .exe) de dicho Navegador.

Si no sabis donde encontrar ese archivo, os ayudo un poco. Todos los programas que instalais (por
defecto) se suelen almacenar en la carpeta "Archivos de Programa", de modo que para encontrar por
ejemplo el archivo del Opera, tras pulsar en "Examinar" os vais a "Mi Pc", buscais "C:" + "Archivos de
Programa" y dentro de esta, la carpeta "Opera" o "Netscape" o "Internet Explorer" segn el caso. Dentro
de esas carpetas aparecer un archivo con extensin .exe con el nombre del Navegador en cuestin,
usualmente con un dibujo en su icono. Elegidlo y luego pulsais en "Abrir" y luego en "Aceptar".
Entonces, habremos aadido otro Navegador. Haced esto con cada uno de los que tengis instalados.
En esa misma ventana podis escoger un como Navegador Principal y otro como secundario. Esto es
para hacer ms rpida y fcil la vista previa, pues pulsando F12 se ver la Vista Previa con el Navegador
Principal escogido y pulsando "Control" + "F12" lo mismo con el Navegador Secundario. Si tenis ms
de dos Navegadores instalados, el resto se escogern pulsando sobre "Archivo" + "Vista Previa en el
Explorador.." y eligiendo cualquiera de ellos.
Como adelanto os dir que para conseguir que las pginas se vean idnticas con cualquier Navegador es
imprescindible el uso de Los Estilos, de los que encontraris suficiente informacin en el Curso de Estilo
CSS.
No obstante, los ejemplos que vamos a hacer en esta seccin, intentaremos que sigan las normas de
estilo para que se vean correctamente en todos los Navegadores. Para ello os ir indicando como
utilizarlos conforme nos hagan falta.

Un "Peln" de HTML... vamos.. casi nada.. de

verdad.
Vamos a ver ms cosillas. Si tenis abierta la ventana de la pgina principal (la podis abrir haciendo
doble clic en ella desde la ventana "SITIO") podis ver que abajo a la derecha hay un icono parecido a
183

esto " ". Si pulsais en l veris una nueva ventana donde os presenta el cdigo HTML que
corresponde a la pgina creada. Pulsa en ese icono y veris ese cdigo.
En un principio pensaba dejar las explicaciones HTML aparte, por si a alguno no le interesaba, pero
cada da recibo ms y ms preguntas vuestras cuya nica solucin pasa por meter mano a ese cdigo, por
lo tanto, lo siento, pero tendris que tragaros tambin las explicaciones de HTML. Venga, no quejaros
miedicas, que eso no es n, je je je je. Veris como me lo agradecis el da de maana cuando queris
meter un contador, o un banner, o publicidad, o un enlace, o lo que sea. Hace falta para todo, bueno, a
menos que no te importe tener fallos en la pgina, que no lo creo, verdad? Je je. pues adelante mis
valientes.
Al pulsar en ese icono que os deca veris el cdigo HTML. En la pgina recien creada, el cdigo, ms o
menos es el siguiente:
<hmtl>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>
<body bgcolor="#FFFFFF">
Esta es mi p&aacute;gina principal.
</body>
</html>

Os explico lo que significa. Toda pgina HTML comienza con un <html> y termina con </html>. A su
vez, todas las webs tienen dos partes, Cabecera (tambin llamada Head) y Cuerpo (llamado Body). En
estas dos partes, tambin se indica su comienzo y final, de modo que una pgina completamente en
blanco sera:
<html>

(esto indica el comienzo de la pgina)

<head>

(esto otro, indica que empieza la cabecera)

</head>
<body>

(esto el principio del cuerpo, o body de la pgina)

</body>
</html>

(esto indica el final de la cabecera)

(esto el final del cuerpo)

(y esto, el final de la pgina)

184

Pero como vis, en el cdigo de nuestra pgina principal hay mas cosillas. Os explico cada una de ellas:
- Esto indica el ttulo de esa pgina.
<title>Untitled Document</title>

No confundis el ttulo de la pgina con el nombre de su archivo. El ttulo es lo que sale en la barra
superior del navegador (la barra azul) cuando se visita esa pgina. Si abrs la pgina index.htm que
habis creado y haceis vista previa (Arhivo+Vista previa+Navegador) veris que arriba aparece
"Untitled Document ....". Eso queda muy feo, no? Mejor es ponerle un ttulo a nuestro gusto. Para poner
ttulo, solo tenis que escribirlo entre los commandos <title> y </title>. Por ejemplo, para que los
visitantes vean en esa barra lo siguiente, "Bienvenidos a mi nueva pgina" el cdigo debe quedar como:
<html>
<head>
<title>Bienvenidos a mi nueva pgina</title>
etc..etc..

Creo que ha sido fcil quejicas, je je je, no? En realidad, al escribir el ttulo hemos cometido un pequeo
gran fallo. Se trata del tema de los acentos, pero eso lo explicar algo ms adelante. Por ahora lo
dejamos as.
Otra forma de acceder al ttulo de la pgina para cambiarlo es la siguiente:
1.- Desde la ventana del dreamweaver abierta con esa pgina cuyo ttulo queremos cambiar, pulsamos en
"Ver" + "Contenido del Head".
2.- Aparecen en la parte superior un par de iconos. Si hacemos doble clic en el primero aparece otra
nueva ventana donde podremos escribir el ttulo deseado en lugar de "Untitled Document". Una vez
hecho, podemos cerrarla.
Esto es ms fcil que lo de HTML, pero as no os habriais enterado de la estructura HTML de una web,
verdad?

- El resto de lneas que aparezcen en la seccin HEAD (en la cabecera de las pginas) son las funciones
Metas (Metatags) que son lneas que se aaden para que los buscadores puedan localizar las pginas y
mostrarlas a la gente. Si deseas saber ms cosillas sobre las Metatags (o como ser encontrado por los
buscadores) visita la seccin Las Metatags en el apartado La Promocin.

- Despus viene la seccin "BODY" (o Cuerpo). Aqu es donde va definido el contenido de la pgina, es
decir, las letras, imagenes, enlaces, sonidos, ... todo.
En nuestro caso solo encontramos una lnea que corresponde al texto escrito.
185

etc, etc...
<body bgcolor="#FFFFFF">
esta es mi p&aacute;gina principal.
</body>
etc, etc...

Como vis el Cuerpo (o Body) empieza con <body> y termina con </body...>
Junto a <body... encontris esto: bgcolor="#FFFFFF". Esto indica el color de fondo que va a tener esa
pgina, (background color). El cdigo #FFFFFF representa el color blanco. Como es el color por defecto,
si no lo ponis el resultado sera el mismo, de modo que vamos a quitarlo. Ya os contar una forma
mejor de ponerle el fondo deseado. El color de fondo en la ventana del Dreamweaver se volver gris,
pero haciendo vista previa veris como es blanco. Hacedme caso en lo que os vaya diciendo y
aprenderis un montn. Si os saltis algo o lo hacis a vuestra manera es posible que luego os perdis en
algo. T mismo.
Por ahora el cdigo completo de nuestra pgina principal es el siguiente:
<html>
<head>
<title>Bienvenidos a mi nueva pgina</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>
<body bgcolor="#FFFFFF">
esta es mi p&aacute;gina principal.
</body>
</html>

Supongo que os habris dado cuenta que en el cdigo, la palabra "Pgina" aparece en el cdigo un poco
rara (sale como p&aacute;gina). Esto es por el tema de los acentos, que explicar ms adelante.
Fijaos en una curiosidad (que no es tal, en realidad). Si copiais este cdigo en el Notepad de Windows y
lo guardis como "loquesea.htm", habris construido una pgina web de la misma manera que las
construidas con cualquier otro programa. Es decir, si hacis eso y lo guardis, al hacer doble clic sobre
ese archivo se abrira igual que una pgina web realizada con Dreamweaver, Frontpage u otros
programas similares. Eso demuestra como hay gente que dice saber hacer webs con solo el block de
notas, simplemente sabiendo cdigo HTML.
Ya sabis un poco de HTML. Viste como no doli? je je je.
186

Subiendo la Pgina Web al Servidor.

Ahora vamos a subir esa pgina principal recien creada (la index.htm). Ya, ya se que hay no hay casi
nada an, pero es para que veais como se actualiza vuestro sitio y como se suben las cosas.
En primer lugar tenis que enchufaros a internet (InterLento en mi caso, je je je).Una vez conectados
abrid el Dreamweaver si no lo tenis abierto, y en la ventana "SITIO" pichad una vez en "Conectar".

Observad que justo a su lado hay un pequeo botn redondo y negro. Cuando estis conectados se
pondr verde. Si no consegus conectaros con vuestro sitio, ser que no habis puesto bien los datos del
FTP [?] (nick o contrasea) en la Definicin del Sitio. Repasadlo y si an as no lo consegus me escribs
o decidlo en el Foro CCTW para que os lo solucionemos.
Si el botn se pone verde BIENNN!! ya estis conectados directamente con vuestro sitio. Ahora, en la
ventana "SITIO" pulsad en el icono de abajo a la izquierda, ese con forma de flechita blanca , hasta
que se vean dos ventanas dentro de esa. Como os he dicho, la de la izquierda es lo que tenis en vuestro
espacio web, es decir, en vuestro servidor. La de la derecha representa lo que tenis en vuestro
ordenador, en el disco duro.
Lo normal es que la ventana de la izquierda est vacia, pues an no habis subido nada. Pero eso va a
durar poco, je je, porque vamos a subir la pgina principal que hemos creado. En algunos casos quizs
exista ya un index.html en blanco y lo que haremos entonces es sustituirlo por el nuestro
(sobreescribirlo). Para ello, hay varios caminos, pero por ahora vamos a usar solo uno. Ms tarde,
cuando tengamos ms archivos, os explico el resto de maneras. (La ventana de la izquierda, la del
servidor, solo mostrar los archivos que hay en la red si Dreamweaver est en conexin con el servidor.
En caso contrario aparecer vacia aunque existan archivos en nuestro servidor.)
Bien, para subir esa pgina principal a vuestro servidor, desde la ventana "SITIO" pulsad una sola vez en
su archivo (index.htm) pero con el botn derecho del ratn, y escoged la opcin "Colocar". Esperad unos
segundos. Lo normal es que mientras el Dreamweaver est subiendo algo, se quede como bloqueado. En
realidad no est bloqueado, sino muy ocupado. Cuando te deje hacer cosas ser que ya ha terminado de
subir lo que le habis mandado. Sed pacientes, no tardar ms de unos segundos.
Ya esta subida la pagina principal? bien. Ahora podis desconectaros del sito pulsando en el mismo
botn que pulsamos a la hora de conectar. (esto es independiente de cortar la conexin a Internet, no os
confundis). El botn verde se pondr ahora oscuro.
Como nuestra pgina principal ya est en nuestro servidor, ya podemos verla desde nuestro navegador.
De hecho, cualquier internauta puede ya verla si sabe la direccin. De modo que para comprobar lo que
hemos hecho, vamos a abrir nuestro navegador (Netscape, Internet Explorer o el que sea), escribimos la
direccin de nuestra pgina (llamada URL) y a esperar a ver que pasa.... Acordaos que la URL ser algo
as como "http://perso.wanadoo.es/miejemplo"

187

Deberiamos ver entonces una pgina en blanco con la frase esa que escribmos al princio, esa que deca
"Esta es mi pagina principal". Si lo vis es que hemos hecho todo muy muy bien. Si no, mala suerte
amigo, je je. Escribenos al Foro CCTW y te lo solucionaremos, pero cuentanos con detalle lo que crees
que no has entendido para as ayudarte mejor. Si nos das la URL de tu web y nos indicas cul es tu
servidor tambin nos ser ms fcil ayudarte.
Dreamweaver nos permite ver el aspecto que tendr nuestra pgina cuando la subamos al servidor. Para
ver eso, una vez que estis en la ventana de una de las pginas (por ejempo la de index.htm) pulsad F12.
Otra forma es pulsar en "Archivo" + "Vista Previa en el Exporador" y escogedlo. Al hacer esto, en la
ventana "SITIO" se crea un archivo llamado "TMP34918....htm" (TMP significa temporal). Este archivo
es como una copia temporal de la pgina de la que habis hecho "Vista Previa". Desaparecer ms tarde,
aunque quizs os moleste a la hora de actualizar la web, pues si an esta en ese momento, es posible que
la subas tambin sin querer. Vamos, que si la quieres borrar antes de actualizar no pasa nada y te ahorras
el problema.
Para bajaros e instalaros algunos Navegadores nuevos, id a Herramientas tiles y buscad el apartado
"Programas" > "Navegadores".

Resumen de lo Aprendido Hasta el Momento.

Por el momento hemos aprendido bastantes cosillas. Tenemos instalado el Dreamweaver, configurado
nuestro sitio en l, hemos dado de alta nuestra web, escrito algo en ella y hemos subido la pgina
(actualizado) sin problemas. Adems, sabemos algo ya de HTML. Cuanto tiempo os ha costado? Tan
solo unos minutillos de n, no os quejaris, je je je.
Esto sol es el principio, an hemos de hacer muchas cosas juntos. Espero no obstante que empecis a
participar el el Foro CCTW pues adems de dudas resueltas, puedes encontrar opiniones, consejos y
otras cosas que te pueden resultar tiles.
No olvides nunca lo siguiente:
1.- Mantener el orden de los archivos.
188

2.- No poner en la carpeta de tu web nada ms que lo que uses en ella.

3.- No dejar espacios en blanco al nombrar los ficheros de imagenes, sonidos o pginas.
4.- Usar siempre letras minsculas para los nombres de los archivos.
5.- No poner acentos en los nombres de los archivos.
6.- Hacer una copia de la carpeta de vez en cuando. Es buena idea antes de hacer cosas de las que no
ests muy seguro.
7.- Ojea webs y toma nota de lo que te gusta (para aplicar en tu web) y de lo que no te gusta (para no
hacerlo en la tuya).
8.- Visita los enlaces que te recomiendo, encontrars cosas interesantes.
9.- Acuerdate de m y visitame de vez en cuando, je je je.
Nos vemos en el Bloque II, Ciao!

BLOQUE II

Comienza con una pgina web con Estilo

Imagiaos una cosilla antes de seguir. Imaginad que algn da vuestra web llegue a tener unas 12 pginas
(no es mucho, la ma tiene cerca de 150). Imaginad que de pronto, os d el nervio y decids que el fondo
no os gusta y que lo queris cambiar. Os veo haciendo la misma operacin 12 veces (en mi caso duelen
ms, 150 veces, je je).
Imaginad otra cosa. Que el tipo de letra no os convence, o que el tamao debera ser mayor o menor, o el
color del texto, en lugar de negro, lo queris ahora azul oscuro. Imaginad el trabajo de cambiar todo eso
pgina a pgina. Os lo aseguro, prefiero tragarme un disco de Tamara (la espaola, digo) que hacer todo
eso.
Imaginad que de pronto os da la vena, y queris que los enlaces de vuestra web aparezcan sin subrayado
o de un color diferente, o que cuando se ponga el ratn sobre ellos cambien de color.
Todo esto y mucho ms se puede conseguir cambiandolo SOLO en un archivo en lugar de hacerlo
pgina a pgina. El resto cambiar automticamente. Cual es el truco? Los estilos CSS. Y porqu me
cuenta este tio todo eso ahora si acabo de empezar a aprender?Si todava no tengo ms que una pgina
ridcula?Este tio esta zumbao? Pues no.
Es por que si empezis sin conocer esto que tan poco trabajo cuesta, luego os va a costar un montn
arreglar lo que haris seguramente mal. Si queris hacer una web rapidamente sin pretender que dure
ms de un ms usar el Frontpage, cuyas lecciones estn muy detalladas en CreaTuWeb, pero si queris
algo ms, seguid con esto. Os aseguro que tras estas lecciones seris capaces de hacer pginas tan
189

buenas o mejores que la mayoria sin mucho esfuerzo. Os lo aseguro. Pero para no teneros quietos
leyendo, vamos a hacer cosillas y as veris de lo que os hablo.
Empezaremos creando una Hoja de Estilo donde definiremos el color de fondo de las pginas o las
imagenes de fondo, el tamao tipo y color de las letras, el formato de los prrafos y caractersticas de los
enlaces. Ms adelante si queris saber an ms de los estilos, visitad la seccin "Los Estilos" desde el
men principal de CreaTuWeb, vale?
Por supuesto, el Dreamweaver, que es muy completito, permite crear estilos de una forma facilita, pero
pienso que an ser ms fcil hacerlo a mano. De esta forma tendremos mucho ms control de lo que
hacemos y queremos. Confiad en m.
Por ahora bastar con lo que os vaya explicando, de modo que vamos a la pgina siguiente.

Utilizar el Notepad o Block de Notas para

retocar Estilos
Para poder escribir en la Hoja de Estilo, es decir, en el archivo estilo.css que vamos a crear, tenemos que
retocar una cosilla en el Dreamweaver. Haced lo siguiente:
1.- En la ventana "SITIO" haced clic en "Edicin" + "Preferencias".
2.- En la lista de la izquierda de la ventana que se abre, haced un solo clic en "Editores Externos".

3.- Ahora veris dos cuadros con fondo blanco en la parte baja. Sobre el de la izquierda haced clic en el
signo "+", escribid .css y dadle al Enter.

190

4.- Ahora haced clic en el signo

de la derecha (aseguraos que el .css recien escrito esta sombreado o
de color azul) y se abre una ventana donde tenis que buscar y seleccionar el programa "Notepad.exe".
Este programa est en la carpeta de "Windows". Buscadlo, tiene un icono con un block de notas azul
clarito. Seleccionarlo y pulsar en "Abrir".

5.- Pulsad en "Aceptar" en la ventana que os queda y listo.

Ahora crearemos la Hoja de Estilos. Para ello:

1.- Nos vamos a la ventana "SITIO".
2.- Pinchamos en "Archivo" + "Nueva Ventana".
3.- Ahora, en esa nueva ventana que se ha abierto hacemos clic en "Archivo" + "Guardar Como".
4.- Se abre una ventana donde hay que ponerle un nombre. Junto a "Nombre de Archivo" poned
estilo.css y pulsad en "Guardar" y luego la cerramos (importante el cerrarla).
Ya tenemos Hoja de Estilo. Ya podis ver el contenido del archivo "estilo.css" que en este caso se abrir
con el Notepad en lugar de hacerlo con una ventana de Dreamweaver (esto es gracias a los pasos 1 a 4
que acabamos de hacer).

191

Antes de nada hay que vaciarlo, pues estar lleno de cdigo HTML que no nos hace falta, pues este
archivo no es una pgina web. Pulsad dos veces sobre el archivo estilo.css (se abrir con el Notepad de
Windows) y borrad sin miedo todo lo que haya dentro. Aseguraos antes de que se trata del archivo
"estilo.css", no vayamos a borrar el contenido de "index.htm" por error!
Ya queda menos. Vamos a la siguiente pgina, vale?

La Hoja de Estilo
Ahora hay que indicarle a la pgina "index.htm" que la definicin de los fondos, propiedades del texto
etc, tendr que buscarla en ese archivo "estilo.css". Para ello, abrimos la pgina "index.htm" (la de
estilo.css la podemos cerrar por ahora) y en la cabecera (entre <head> y </head>) copiad este trocillo de
cdigo:
<link rel="StyleSheet" href="estilo.css" media="screen" type="text/css">

El cdigo total de la pgina "index.htm" quedar de la siguiente forma tras aadir esa lnea:
<html>
<head>
<title>Mi pgina</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link rel="StyleSheet" href="estilo.css" media="screen" type="text/css">
</head>
<body>
Esta es mi pagina principal
</body>

192

</html>

Guardad y cerrar esa pgina ahora. Lo que hemos hecho es decirle a esa pgina que busque los estilos
que queremos que siga nuestra web en el archivo "estilo.css". Queda clarito? Me alegro. Si algo no lo
entendis me lo decs en el Foro. No os preocupis si os parece chino. Poco a poco lo iris
comprendiendo. Confiad en mi y que la fuerza os acompae, je je je.
Por supuesto, an no podemos ver los efectos que pretendemos, pues por un lado, no hay elementos a los
que aplicar esos estilos y por otro, an no hemos creado la Hoja de Estilos.
En otros programas, la definicin de cosas como el color o imagen de fondo de una pgina, las
propiedades del texto (tipo de letra, tamao, color, etc) y muchas otras cosas se hacen en la propia
pgina. Esto produce serios problemas a la hora de ver esa pgina con determinados Navegadores.
Muchos habris oido comentar por ah que cierta web no se ve bien con un determinado Navegador.
Pues bien, haciendo las cosas de este modo (es decir, utilizando estilos) evitaremos esto en gran medida.
Si no lo creeis, intentad ver CreaTuWeb con otros Navegadores y veris como apenas hay diferencias.
Lo que haremos nosotros es definir todas esas cosas en la Hoja de Estilos, es decir, en el archivo
"estilo.css".
En la pgina siguiente crearemos esa Hoja de Estilo.

a Hoja de Estilo
La Hoja de Estilo no es una pgina web, por lo que no empiezan ni acaban en <html>. Adems no tiene
ni cabecera (Head) ni cuerpo (Body) por lo que son mucho ms sencillas. Lo que os indico ahora es el
cdigo que va a tener nuestra Hoja de Estilo. No os preocupis si no entendis algo, pues lo ir
explicando conforme lo vayamos utilizando. Adems, est bien explicado en la seccin "Los Estilos" a
la que podis acceder desde el men principal de CreaTuWeb si queris ms informacin.
Abrid el archivo "estilo.css" pulsando dos veces sobr l y copiad en l todo el siguiente cdigo:
/* Esto es mi hoja de estilo */
BODY { background-color:orange ; }
A:link { font-weight: bold ; color: blue ; text-decoration: none; }
A:visited { font-weight: bold ; color: blue ; text-decoration: none; }
A:hover { font-weight: bold ; color: red ; }
A:active { font-weight: bold ; color: green ; }
P { font-family: Arial, Helvetica, sans-serif ; font-size: 17px ;
text-align:justify ; text-indent: 20px ; margin: 7px 8px 7px 8px ; }
/* Fin de mi hoja de estilo */

(Ms adelante veremos como simplificar este trozo de cdigo para que ocupe menos diciendo lo mismo)
193

A la hora de copiarlo quizas os vendra bien saber que:

- No se deben separar 17 de px. Es decir, vale "17px"(junto) pero no vale "17 px"(con un espacio en
medio).
- Los signos "{" y "}" se escriben pulsando, a la vez, "Alt Gr" ms una de las dos teclas que hay junto al
Enter o Intro ,que llevan su smbolo correspondiente a esos corchetes o parntesis.
Una vez copiado guardarla y cerrarla. Si ahora abrs la pgina "index.htm" con el DreamWeaver y hacis
"Vista Previa" para ver como se vera en Internet, (pulsad en "Archivo" + "Vista Previa en Explorador" +
"Navegador" + "escoged uno"), veris como sale el fondo de color naranja.
Adems hemos definido otras caractersticas que ms adelante os comentar. Lo que quiero que sepis
es que a partir de ahora en lugar de tener que definir esas propiedades o caractersticas, solo tendremos
que aadir la lnea que aadimos antes entre <head> y <head> en cada una de las pginas que creemos
ms adelante. Esto, sin duda, es un gran ahorro de esfuerzo y espacio, entre muchas otras cosas.
Pasamos a comentar por encima el cdigo de la Hoja de Estilos. Las lneas primera y ltima, que como
vis, empiezan y acaban con /* y */, no son ms que comentarios nuestros. Se usan para aclarar lo que
estamos haciendo y no influyen en nada ms. Si queris poner algn comentario escribid esos smbolos
al principio y al final del comentario.
La lnea que comienza con BODY.... indica que el color de fondo de la pgina (del Body de la pgina)
ser naranja (orange). Si deseis otro color (que es lo ms seguro) podis cambiar la palabra "orange"
por otra que corresponda a algn color vlido. Estos colores vlidos se muestran en la seccin "Los
Estilos" de CreaTuWeb, en el men principal, en la seccin "Las Propiedades" si no recuerdo mal.
Las lneas que comienzan con A:... indican que los enlaces (o vnculos) se mostraran en negrita (bold)
sin subrayado (text-decoration: none) y de colores distintos segn el estado del enlace, es decir, azul
(blue) en estado normal (link) y en enlaces previamente visitados (visited); rojo (red) cuando se pase el
ratn por encima (hover) y verde (green) cuando el enlace est pulsado (active). Si queris otros colores
ya sabis lo que hacer.
La linea que empieza con P.... indica las caractersticas del texto de la web. El tipo de letra, el tamao
(17px) (deben ir seguidos el nmero y las letras "px"), que se represente justificado (text-align:justify),
que la primera lnea de cada prrafo este metida hacia la derecha un cierto espacio, tambin llamado
"sangria" (text-indent:20px), y que cada prrafo se separe del resto una distancia de 7px (pixeles) por
arriba y abajo y de 8px por los lados.
Ms adelente iremos aadiendo ms estilos, conforme nos vayan haciendo falta.
Por ahora vamos a escribir en "index.htm" un prrafo ms largo que el que tenemos para comprobar lo
de la primera lnea (hemos dicho que tena una sangria de 20px) y aadiremos un enlace para verificar
que se muestra con los colores indicados, pero todo esto, en la pgina siguiente, que esta ya esta muy
llena, je je je.

194

Aplicando los Estilos

Vamos a escribir en "index.htm" un prrafo ms largo que el que tenemos para comprobar lo de la
primera lnea (hemos dicho que tena una sangria de 20px) y aadiremos un enlace para verificar que se
muestra con los colores indicados.
1.- Abrimos la pgina index.htm desde el Dreamweaver (que saldr ya con el fondo naranja).
2.- Escribimos un prrafo de varias lneas. Inventaos algo largo, de tres o cuatro lneas seguidas, sin salto
de lnea, es decir, sin apretar "intro".
3.- Una vez escrito un prrafo de varias lneas haced Vista Previa (o pulsad F12 si hacis definido los
Navegadores).
4.- La primera lnea debera estar ms a la izquierda, es as? Bien.
Como veis, los efectos de la Hoja de Estilo solo se ven con la vista previa, mientras que en la ventana de
Dreamweaver quizas no. As que para comprobar los estilos, pulsad F12 (Vista Previa).
Ahora vamos a aprender a meter un enlace y a la vez comprobaremos lo de los colores.
En la pgina "index.htm" poned el cursor justo al final del ltimo prrafo y pulsad en Enter o Intro para
crear otro prrafo. En esa nueva lnea escribid "CreaTuWeb".
Ahora seleccionar toda esa palabra, por ejempo haciendo doble clic sobre ella. Se pondr toda azul.
Sin que deje de estar seleccionada (de color azul) pulsad en "Modificar" + "Crear Vnculo".
Se abre una ventana. En donde pone URL poned lo siguiente: http://creatuweb.tripod.com No os
confundis y lo pongis donde pone "Nombre de Archivo" que si no no funcionar!
Luego pulsad en "Seleccionar".
En ese momento habris creado un enlace a mi pgina. (no os preocupis que se puede quitar ms tarde,
je je) y saldr subrayado.
Ahora pulsad en F12 para ver la "Vista Previa". Vis lo que os dije? El enlace ya no sale subrayado, sale
en negrita y cambia de color al pasar el ratn sobre l. Esto lo hemos conseguido sin definir nada de
nada (salvo la hoja de estilo, claro) pues el estilo de los enlaces estaba ya definido en "estilo.css" No os
parece interesante? Pues eso no es nada ms que el principio. Aqu os dejo una imagen de como se ve la
vista previa de la pgina "index.htm"con el Navegador Opera:

195

Si si, ya se que el fondo naranja es horrible, je je je, pero pronto os comentar como cambiar el color de
fondo o meter una imagen de fondo. Paciencia.
Como y sabris, al crear ese prrafo y el enlace, el Dreamweaver traduce lo que nosotros queremos en
cdigo HTML, luego, es de esperar que el cdigo que antes vimos haya cambiado, o mejor dicho, se
haya ampliado. Vamos a verlo en la pgina siguiente.

Carcteres Especiales
Como y os he comentado antes, al crear el prrafo y el enlace, el Dreamweaver traduce lo que nosotros
queremos en cdigo HTML, luego, es de esperar que el cdigo que antes vimos haya cambiado, o mejor
dicho, se haya ampliado. Vamos a verlo pulsando, en la ventana de diseo de index.htm del
Dreamweaver, sobre el icono que aparece en la parte de abajo, con forma de " ". El cdigo ser algo
as como...
<html>
<head>
<title>Mi pgina</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link rel="StyleSheet" href="estilo.css" media="screen" type="text/css">
</head>
<body>

196

<p>Esta es mi pagina principal</p>

<p>Con esto espero comprobar el efecto que tiene la hoja de estilos sobre el
p&aacute;rrafo. La primera l&iacute;nea deber&iacute;a separarse por la izquierda
del resto. Vamos a ver si es verdad.</p>
<p><a href="http://creatuweb.tripod.com">CreaTuWeb</a></p>
</body>
</html>

Cosas nuevas son las lneas que empiezan y acaban con <p> y </p>. Estos smbolos nuevos indican el
comienzo y el final de un Prrafo. Si recordais nuestra Hoja de Estilo, una de las lneas empezaba con
P... pues esa lnea era donde se definieron las propiedades de los prrafos.
Hay dos cosillas nuevas en este cdigo. La primera es como se escriben ciertos carcteres o smbolos en
HTML. Las letras acentuadas, la letra y otros smbolos no son reconocidos en HTML. En su lugar, al
escribir directamente en HTML hay que poner, por ejemplo:
&aacute;

en lugar de

&eacute;

en lugar de

&iacute;

en lugar de

&oacute;

en lugar de

&uacute;

en lugar de

&ntilde;

en lugar de

etc...
Y para letras mayusculas acentuadas o la letra "" mayscula:
&Aacute; &Eacute; &Iacute; &Oacute; &Uacute; &Ntilde;

Respectivamente.

Me explico. Si escribimos el texto en la pantalla de cdigo HTML (la que aparece al pulsar el smbolo "
"), tendremos que usar esos smbolos para escribir acentos, s y esas cosas. En cambio si escribimos
en la ventana normal de diseo s que podemos escribir acentos y smbolos raros, pues Dreamweaver los
traduce el solito. Solo os deca esto por si os resulta extrao que aparezcan en el cdigo HTML, y para
que os vayis familiarizando con el cdigo, pues aunque no haya que saberse nada de memoria, viene
muy bien saber para que sirve cada palabreja de esas.
Esto es lo que os dije en alguna leccin anterior. Al escribir el ttulo de la pgina principal, pusimos en el
cdigo:
<title>Mi pgina principal.</title>

197

Y por esa razn, el acento est mal puesto. Para arreglarlo tenemos que irnos a la ventana de cdigo y
cambiar la "a" acentuada de la palabra "pgina" por &aacute; De esta forma. el ttulo se presentar de
forma correcta en la parte superior del Navegador, al hacer Vista Previa.
La forma correcta sera:
<title>Mi p&aacute;gina principal.</title>

Si alguna vez encontramos en nuestra web un smbolo raro o un carcter que no corresponde, en lugar de
una letra acentuada o una , ya sabemos que la forma de arreglarlo es acudir al cdigo HTML y cambiar
la letra acentuada que encontremos por los cdigos antes mencionados para cada una de ellas.
La otra cosa nueva que aparece en ese cdigo son los enlaces, que os explico en la siguiente pgina.

Los Enlaces o Vnculos

La segunda cosilla nueva son los enlaces (o vnculos). En nuestro caso el enlace est dentro de un
prrafo, es decir, entre <p> y </p>. Los enlaces tienen todos la siguiente estructura:
<a href="http://www.comocreartuweb.com">Como Crear Una Web</a>

..es decir..
<a href="ruta_del_archivo_destino">texto_del_enlace_para_pinchar_sobre_el</a>

Para saber que ruta de archivo tienes que poner, leete la seccin "Las Rutas" desde el men principal. En
este caso de ejemplo, la nueva pgina se abrir en la misma ventana en la que estaba "index.htm". Si por
el contrario queremos que cuando nuestros visitantes hagan clic sobre el enlace, la pgina apuntada se
abra en otra ventana disinta a index.htm lo que hay que hacer es aadirle un cachito de cdigo ms a esa
lnea.
El cachito extra es el siguiente: target="_blank" que significa, "Objetivo (target) = una pgina nueva
(_blank)". La cosa quedara de la forma:
<a href="http://www.comocreartuweb.com" target="_blank">Como Crear Una Web</a>

En lugar de recurrir a retocar el cdigo HTML cada vez que queramos hacer esto en un enlace,para hacer
esto, Dreamweaver nos permite algo ms cmodo. Haced clic una sola vez sobre el enlace (en la pantalla
index.htm abierta con el Dreamweaver) y luego pulsad en "Ventana" + "Propiedades". Esa misma
ventana se puede ver ms rpido pinchando sobre el icono de la parte inferior derecha con forma de
organigrama, justo al lado del icono con forma de libro abierto.
Con esto, se abre una nueva ventana (es una de las que cerramos al iniciar el Dreamweaver la primera
vez, junto a muchas otras). En ella se muestran las propiedades de ese enlace, la ruta (pgina a la que
apunta), etc.
Si pulsais una sola vez sobre un enlace y luego os vais a la ventana "propiedades" (mostrada en la figura
de abajo), y pulsais sobre eso que pone "Dest" y seleccionais "_blank" habris hecho lo mismo que
198

cambiando el cdigo HTML a mano. Elegid vosotros. De esta manera es mucho ms fcil, pero quera
que al ver el cdigo HTML supierais detectar que trozo corresponde a un enlace.

Como vis, adems de "_blank" para abrir el enlace en una nueva ventana, podis encontrar otras
opciones, como:
- _parent : Carga la pgina vinculada en el conjunto de marcos padre o en la ventana del marco que
contiene el vnculo. Si no se usan marcos, el documento vinculado se cargar en la ventana completa del
explorador.
- _self : Carga el documento vinculado en el mismo marco o la misma ventana que el vnculo. Este
destino es el predeterminado, por lo que se tomar este valor si no se especifica ninguno.
- _top :Carga el documento vinculado en la ventana completa del explorador, eliminando de esta forma
todos los marcos si los hay.
Bueno, ya sabemos algo de Estilos, algo de HTML y como insertar enlaces y prrafos. No est mal para
tan poco tiempo y esfuerzo. Vis como no era ni tan dificil ni tan complicado? Es que tenis que confiar
un poquillo ms en m! je je je.
Seguid adelante y haremos ms cosillas de estas tan interesantes. Ahora que ya controlis un poco el
tema, ya que habis cambiado lo del ttulo de la pgina principal, podrais conectaros al Sitio
WebEjemplo254 y actualizar ese archivo tal y como hicimos anteriormente.
Ya casi sois Webmasters, je je je.

Insertando Imgen de Fondo en la pgina web

Como hemos podido comprobar, el fondo color naranja es horroroso. En esta seccin vamos a aprender
a poner una imagen de fondo, pero en lugar de hacerlo desde Dreamweaver, vamos a utilizar de nuevo
los Estilos.
Lo primero es escoger el fondo que deseamos. En principio vale cualquier imagen, pero os recomiendo
que escojais una que no ocupe mucho, es decir, de pocos bytes. La cantidad de bytes que ocupa cada
imagen (tambin llamada "peso" de la imagen) har que la web se visualice mas o menos rpido, de
modo que hay que encontrar un equilibrio entre calidad y cantidad de bytes.
Para vuestra web podis utilizar el que queris, pero para realizar este ejemplo usaremos uno de los que
incluimos en ComoCrearTuWeb, concretamente en la seccin "Galera de Imgenes".
Por otro lado hay que estar atentos y escoger un fondo que no dificulte la lectura del texto. Es decir, si el
texto est en negro y el fondo es oscuro, el texto casi no se podr ver. Tenedlo en cuenta.
199

Antes de nada crearemos dentro de la carpeta "WebEjemplo" otra carpeta que llamaremos "objetos" (en
minsculas!!) donde iremos metiendo las imgenes que utilicemos. Venga, hacedlo en un segundo.
Ahora copiar el fondo que os dejo aqu abajo pulsando sobre l con el botn derecho del ratn y
escogiendo "Guardar imagen como.." Escoged la carpeta "objetos" que habis creado dentro de la
carpeta "WebEjemplo" y ponedle el nombre "fondo1.jpg" a la imagen.

Bien. Una vez guardado ese fondo con el nombre "fondo1.jpg" en la carpeta "objetos" pasamos a retocar
la Hoja de Estilos para que en lugar de mostrar el fondo naranja muestre esa imagen. Como veris, no
tocamos la pgina "index.htm" en absoluto. Solo ser necesario retocar el archivo "estilo.css" y
automticamente el fondo cambiar.
Abrid la ventana Sitio"del DreamWeaver. Si al abrir Dreamweaver no aparece esa ventana directamente,
pinchad en "Sitio" + "Abrir Sitio" + "WebEjemplo". Aparecer entonces esta ventana:

Pinchad dos veces sobre "estilo.css" para abrirlo.

La lnea que vamos a retocar es:
BODY { background-color:orange ; }

que debe quedar de la forma:

BODY { background: url("objetos/fondo1.jpg") ; }

Os lo explico un poco. La palabra background indica que se va a definir el fondo, mientras que el resto
indica donde se encuentra el archivo que va a ser la imagen de fondo.
200

En nuestro caso, usaremos Rutas Relativas. La ruta es el camino que hay que seguir para encontrar un
archivo, mientras que Relativas quiere decir que el camino empieza en el lugar donde se encuentra la
pgina que estamos retocando, y acaba en el lugar donde est el archivo al que llamamos. Si lo queris
tener ms clarito visitad la seccin "Las Rutas" desde el men principal de CreaTuWeb.
El caso es que para encontrar la imagen (definir ese camino) hay que meterse en la carpeta "objetos" y
luego buscar el archivo "fondo1.jpg", y por eso la ruta es:
"objetos/fondo1.jpg"

Bueno, no os asustis tanto que esto no es n, je je je. Vamos a cambiar esa lnea del archivo "estilo.css"
para que quede como os he comentado. Despus guardar el archivo "estilo.css" y lo cerris.
Ahora abrid el archivo "index.htm" con el DreamWeaver y comprobaris que el fondo se ve muy raro,
de un color gris muy feo. No os preocupis, pues es como se ver de ahora en adelante cuando trabajis
con Dreamweaver. No obstante, si hacis Vista Previa podris ver que el fondo sale perfectamente.
La pgina "index.htm" quedar ahora como:

Esto ya tiene mejor aspecto, desde luego. Si en lugar de tener solamente una pgina, hubiesemos tenido
100, el trabajo habra sido exactamente el mismo, ni ms ni menos. No es una gran ventaja esto de los
Estilos?

201

Centrando un Prrafo
Vamos a aprender ahora como centrar un texto. Utilizaremos, como no, los estilos.
En muchas ocasiones os convendr que cierto prrafo aparezca centrado. Nuestros prrafos aparecen,
por defecto (es decir, si no le indicamos otra cosa distinta) de modo "justificado".
Ahora vamos a crear un nuevo estilo llamado "centrado" que aplicaremos a los prrafos que deseemos
que aparezcan de ese modo.
Para ello abrid el arhivo "estilo.css" e inlcuid la siguiente lnea de cdigo:
p.centrado { text-indent:0px ; text-align:center ; }

Los prrafos los teniamos antes definidos con la lnea que empezaba por "p {...". Esa es la forma que
tomarn todos nuestros prrafos a menos que le digamos lo contrario.
Con la nueva lnea que hemos insertado hemos definido el estilo de prrafo "centrado". Ahora guardad el
archivo "estilo.css" y seguimos con la explicacin.
Abrid ahora el archivo "index.htm". Vamos a centrar la lnea del vnculo de CreaTuWeb.
Para ello realizad antes los siguiente pasos:

1.- Pinchad en "Texto" + "Estilo CSS" + "Editar hoja de estilos..."

202

2.- Escojed la unica que sale, llamada "estilo.css" pinchando dos veces sobre ese archivo. Despus haced
clic en y "Guardar" y luego en "Listo".
Esto era para que se reconocieran los estilos definidos en "estilo.css", Eso ya no hay que hacerlo ms
veces.
Ahora vamos a centrar la lnea donde est el enlace a CreaTuWeb.
1- Pinchad una sola vez sobre el enlace de CreaTuWeb.
2.- Ahora pinchad sobre "Texto" + "Estilos CSS" y encontraris el estilo antes creado llamado
"centrado".
3.- Haced clic sobre el estilo "centrado" y veris como la lnea donde est el enlace de CreaTuWeb sale
ahora en el centro.
Eso est muy bien, si que si. Ahora haced lo mismo con la primera lnea, donde pone "Esta es mi pgina
principal". Se hace de la misma manera, de modo que os dejo hacerlo solos, je je je.
La pgina ahora queda as:

Centrando un Prrafo (un poco ms de HTML)

Como sabemos, cada vez que hacemos algo sobre la pgina "index.htm" usando el Dreamweaver, su
cdigo HTML va cambiando o ampliandose.
Como es de suponer, al decirle a esos dos prrafos que tienen que mostrarse centrados, el cdigo HTML
de dichos prrafos han sufrido una variacin.
Antes de decirles que se mostraran centrados eran as:
203

<p>Esta es mi p&aacute;gina principal</p>

<p><a href="http://www.comocreaetuweb.com">Como Crear Una Web</a></p>

Y al decirles que pertenecan al estilo "centrado" el cdigo vari para acabar de este otro modo:
<p class="centrado">Esta es mi p&aacute;gina principal</p>
<p class="centrado"><a href="http://www.comocreartuweb.com>Como Crear Una
Web</a></p>

La diferencia ha sido que se ha incluido class="centrado" en cada una de esas lneas. Con esto ahora
sabemos que si queremos que un prrafo (que empiezan todos con <p>bla bla bla </p>) aparezca
centrado, solo tenemos que escribir en el cdigo la clase a la que pertenece, es decir, class="centrado"
justo despus de <p. Eso es todo.
Por supuesto, nosotros no lo haremos en el cdigo, pues es mucho ms rpido y cmodo hacerlo desde
Dreamweaver, con "Texto" + "Estilos CSS" + "centrado", pero es muy bueno saber estas cosillas, pues
nos permitiran salir de algn apuro en algunas ocasiones.
De todas maneras, para que veis que eso del HTML no es tan complicado vamos a hacer un ejemplo:
1.- Abrid el archivo "index.htm" con el dreamweaver.
2.- Pulsad sobre el icono de HTML

para ver el cdigo.

3.- Poned el cursor justo antes de </body> y pulsad intro para crear una nueva lnea.
4.- Escribid en la lnea creada esto: <p>Bienvenidos</p> en esa lnea. Con eso hemos creado un nuevo
prrafo normal.
Podis hacer Vista Previa para comprobarlo.
5.- Ahora incluid class="centrado" justo despus de <p de modo que quede <p
class="centrado>Bienvenidos</p>". Con esto otro, lo hemos centrado.
Haced Vista Previa para comprobarlo de nuevo. Como vis es facilsimo. La pgina queda ahora como:

204

Os aseguro que ya sabis cosas que la mayora de la gente que hace webs desconoce totalmente. Ya casi
sois hasta profesionales!!! je je je. Bueno, an no, pero estamos cerquita, de verdad.
Vamos a seguir con ms cosas en la siguiente leccin.

Escogiendo Preferencias en DreamWeaver

Ahora que ya ms o menos sabemos manejarnos con el Dreamweaver, vamos a profundizar un poquitn
las opciones que podemos escoger.
Concretamente vamos a estudiar las opciones que podemos elegir en la ventana "preferencias". Podis ir
abriendola ya pulsando sobre "Edicin" + "Preferencias".
Haced clic una sola vez en la parte izquierda de esa ventana, donde pone "General" y saldr esto:

Actualizar vnculos: Esto hace que Dreamweaver arregle las rutas el solito cada vez que cambiemos el
nombre a algn archivo que tenga enlaces. Como sabis, si hacemos un enlace a una pgina y luego le
cambiamos el nombre, entonces no encontrar ese archivo al pulsar en el enlace (o vnculo). Podemos
escoger entre "nunca", "siempre" o "mensaje". Dejad este ltimo para que siempre los arregle y adems
nos avise del arreglo.
Diccionario: Nos permite usar un corrector ortogrfico en el idioma que escojamos.
Combinacin de colores: Esto no es importante.
205

Paleta de Objetos: Tampoco es importante.

Agregar extensin al guardar: permite que al pulsar en "Guardar Como" solo tengamos que poner el
nombre del archivo. Dreamweaver le pone el .htm el solito.
Edicin rpida de tabla: Hace que si escribimos dentro de una tabla, esta se vaya agrandando conforme
escribimos.
Abrir archivos en nueva ventana: Permite tener abiertas ms de una ventana de edicin para poder
retocar una sin cerrar la otra. De la otra forma, si tenemos una ventana de edicin de Dreamweaver
abierta e intentamos abrir otra, antes se cerrar la anterior.
Mostrar solo ventana del sitio al iniciar: Si no est activada, acedlo. Esto evita que cada vez que abris
Dreamweaver se abra tambin una ventana de edicin en blanco. As, solo se abrir la ventana Sitio, y
desde all podremos abrir la que queramos.
El resto dejadlas como estn.. Ya os las explicar.

Haced clic una sola vez en la siguiente seccin de la parte derecha, donde pone "Barra de estado" y
aparecer esto:

Todas estas opciones definen lo que queremos que aparezca en la barra inferior de la ventana de diseo
del Dreamweaver.
Tamaos de ventana: permite escoger el tamao de la ventana de diseo. Supongo que para comprobar
como se vera en distintas resoluciones. Nos deja definir nuevos tamaos. Dejandlo como esta por ahora.
Velocidad de conexin: Nos muestra el tiempo en segundos que tardara la pgina que estamos
diseando, en cargarse completamente usando un modem de 28,8 Kb/s.. Si prefirmos ver lo tardara en
cargarse con otros modems escoged la velocidad all. Yo lo tengo puesto a 56Kb que es lo ms normal.
206

Lanzador: Si lo dejais activo (recomendable) aparecen los botones que permiten abrir distintas
ventanitas en la parte baja de la ventana de diseo. Ya sabis, los botones estos:

Dejadlo activo para tener ms fcil acceso a la ventana de cdigo HTML.

La siguiente seccin est dedicada a las Capas. Como an no las domino bien, pasamos de esta parte.
Cuando las sepa usar bien os contar de que van, vale?

Pulsad sobre donde pone "Colores HTML" y aparecer:

Esta ventana solo es para determinar los colores de la ventana donde se nos muestra el cdigo HTML.
No afectan para nada a nuestras pginas. Como podris ver, resulta ms fcil encontrar los cdigos que
buscamos si estos estan escritos en distintos colores. Por ejemplo, los cdigos HTML que se refieren a
enlaces o vnculos, aparecen en verde. Los comentarios (que se escriben en cdigo entre los smbolos
<!-- y -->) se muestran en gris claro, y as un largo etctera. Dejadlo todo como est por ahora. Si ms
adelante queris cambiarlo ya sabis donde estn.

La siguiente seccin es la llamada "Editores Externos". Es la siguiente:

207

Esta os resultar familiar pues la hemos usado antes para decirle a Dreamweaver que los archivos de
estilo debe abrirlos con el Notepad de Windows. Si hay algn tipo de archivo que queris que se abra
con un determinado programa, este es el sitio donde indicarlo.
Por ejemplo. En la ventana Sitio podemos ver nuestro archivo de imagen de fondo que es del tipo
"*.jpg". Si pinchamos dos veces sobre l, se abrir con un programa de imgenes (tipo Paintbrush)
determinado. Si en lugar de abrirlo con ese programa queremos que se abra con otro que tengamos, solo
tenemos que buscar la extensin ".jpg" en la lista de "Extensiones" y seleccionarla. Entonces aparece en
la ventana de al lado el programa con el que va a abrirse. Si deseamos otro, borramos el que aparece ,
pinchamos en el signo

y escogemos el programa que deseamos.

Esto es util sobre todo si queremos retocar fotos con un programa distinto al que est predeterminado en
Dreamweaver.

La siguiente seccin se llama "Elementos Invisibles". Pulsad sobre ella para que aparezcan estas
opciones:

208

Espero explicarme bien. Cuando insertamos algunos tipos de objetos en nuestra web, como sabis,
aparecen nuevos cdigos en nuestra pgina. Por ejemplo, si nos vamos a la ventana de HTML de nuestra
pgina y escribimos un comentario, este no se mostrar realmente en la pgina, solo es visible en la
ventana de HTML. Ya os explicar luego como se escriben comentarios.
El caso es que aunque ciertos elementos no se vean en la ventana de diseo, podemos hacer que en su
lugar aparezca un simbolillo amarillo como el que se ve en la foto de arriba. Esto solo es para indicarnos
que en la ventana de HTML hay un objeto de ese tipo. Ese simbolo amarillo no se ver si hacemos Vista
Previa. Solo es para nuestra informacin.
Para no liarnos vamos a desactivarlas todas y listo. Ms adelante podis activarlas si lo deseais. Si no las
desactivis, tened presente al menos, que si aparece un smbolo de esos no hay que hacerle caso, pues no
aparecer realmente en la pgina.
Otra cosa que podemos hacer en lugar de desactivarlas es pinchar en "Ver" y verificar que la opcin
"Elementos Invisibles" esta desactivada.

La siguiente etiqueta se llama "Estilos CSS" pero no vamos a tocarla, pues nosotros trabajaremos los
Estilos a mano, sin hacer que DreamWeaver los haga por nosotros. Es mejor as, pues nos permite
comprender su funcionamiento mejor, confiad en m.

La siguiente se llama "Formato HTML".

209

El cdigo HTML que se va creando al ir aadiendo cosillas a nuestra web se va ordenando de acuerdo a
estas opciones. Os recomiendo que dejis estas opciones tal y como aparecen en la imagen de arriba.
Esto nos permitir poner el cdigo como queramos nosotros, no como quiera Dreamweaver.

La seccin siguiente, llamada "FTP del Sitio" no es importante de modo que la dejaremos tal y como
est. La otra llamada "Fuentes / codificacin" tampoco.

Vamos con la siguiente, "Paletas Flotantes".

210

La parte de arriba indica que programas estarn en modo "Siempre Visibles". Esto significa que si esa
ventana est abierta, se ver siempre por encima de las dems aunque no estn activas. Dejad eso como
esta.
La parte de abajo especifica que ventanas aparecern en el Lanzador. El lanzador es el conjunto de
botones que aparecen en la parte de abajo de las ventanas de diseo, es decir, estos:

Con estas opciones podemos escoger las ventanas que queremos que aparezcan en ese conjunto de
botones. Esto nos permite un acceso ms rpido y fcil.
Por ejemplo, ya que no vamos a usar algunos de los que nos aparecen ahora, vamos a quitar algunos.
Para quitar uno (ms tare se pueden volver a poner) se selecciona y luego se pincha sobre el signo menos
de arriba.
Vamos a quitar los botones "Biblioteca", "Estilos HTML", "Comportamientos" y "Marcador".
Ahora vamos a incluir uno nuevo que si usaremos bastante. Se llama "Propiedades" y aparece al pulsar
sobre el signo

Ahora nos aparecern los siguientes botones en la parte baja de la ventana de diseo:

Ya os explicar para que sirve el botn de la "i".

211

Pasamos ahora a la ltima seccin de todas, la llamada "Vista en Explorador". Esta no es nueva pues la
usamos antes para definir los Navegadores con los que queramos hacer Vista Previa.
Simplemente deciros que seleccionando alguno de los que aparecen y activando la casilla "Explorador
Principal" nos permitir ver la Vista Previa simplemente pulsando "F12".
Si tenemos un segundo Navegador (o explorador) definido, y lo ponemos como "Explorador
Secundario" podremos acceder a su Vista Previa ms fcilmente pulsando a la vez "F12" y "Control"

El resto de secciones no las vamos a ver pues no nos interesan ahora. Con esto ya est bien por hoy no?
Siento haberos aburrido un poco, pero se trataba de aprender cosas no? Adems ahora podemos hacer las
cosas con ms comodidad.
Venga, prometo que el resto ser ms agradable, vale?

Insertando un Buzn en nuestra Pgina Web

Bien. Despus del rollo que os acabo de meter en la leccin anterior, vamos con algo ms agradable. La
insercin de imgenes.
Para ello insertaremos la imagen de un buzn de correos en la pgina "index.htm" que nos servir para
que los visitantes, al hacer clic sobre l, puedan mandarnos un E-Mail.
En primer lugar guardaros en la carpeta "objetos" del sitio "WebEjemplo" la siguiente imgen:

Como veis se trata de una imgen animada. Todas las imgenes animadas tienen que tener el formato
"*.gif" para poder moverse. Claro que no todas las imgenes gif se mueven.
Si no os acordis de como se guardan las imgenes os lo recuerdo. Pulsais con el botn derecho del
ratn sobre la imgen, escogis "Guardar Imagen Como" y luego escogis la carpeta donde queris
guardarla. En este caso, la carpeta "objetos" dentro de la carpeta "WebEjemplo". Ponedle el nombre
"buzon.gif".
Una vez guardada, abrimos el Dreamweaver, y en la ventana Sitio del Sitio WebEjemplo, hacemos doble
clic en el archivo "index.htm" para abrirlo.
Una vez abierto escogemos un lugar para pegarlo. Por ejemplo, poned el cursor al final de la palabra
"Bienvenidos" y pulsad "Intro" una vez para crear una nueva lnea.
Como la lnea anterior estaba centrada (class="centrado"), la siguiente lnea tambin lo estar.
212

Una vez creada la siguiente lnea (o nuevo prrafo) haced lo siguiente:

1.-Pulsad en "Insertar" + "Imagen".
2.- Buscad en la carpeta donde lo guardsteis, escogedlo y pulsad en "Seleccionar".
Ya hemos aprendido a insertar una imgen. Bienn!!! je je. Ahora vamos a inserarle un vnculo de
mensaje de correo electrnico para que los visitantes, al pulsarlo, nos puedan escribir algo.
Para ello haced esto:
1.- Haced clic una sola vez sobre el buzn.
2.- Haced clic ahora en el nuevo botn que aadmos en la seccin anterior, el que tiene una "i" con el
fondo azul . Con ello se abrir la ventana de "Propiedades". Si no habis sido buenos y no me hicsteis
caso, os dejo abrirla haciendo clic en "Ventana" + "Propiedades".
3.- En esa ventana, llamada "Propiedades", donde pone "Vnculo" tenis que poner "mailto:" seguido de
vuestro correo electrnico con arroba y todo. Es decir, en mi caso escribira en ese hueco lo siguiente:
mailto:comocreartuweb@iespana.es
4.- Ya podis cerra esa ventana de Propiedades bien haciendo clic en la cruz de su esquina superior
izquierda o bien pulsando de nuevo el icono .
Ya tenemos listo el correo. Para comprobarlo haced Vista Previa y pulsad sobre el buzn. Veris como se
abre vuestro programa de correo para escribir un mensaje y como ya sale en l vuestra direccin. Listo
para enviar. No esta nada mal, verdad?

Cada Imagen con su Comentario.

ALT="imagen"
Importante. Si queris que vuestro cdigo HTML sea correcto hemos de tener cuidado con ciertas
cosillas. Una de ellas muy importante es incluir en cada imagen que insertemos un pequeo comentario
acerca de ella. Basta una o dos palabras, aunque pueden ser ms.
Este comentario lo podemos insertar mediante la ventana de Propiedades apretando el botn

El contenido de esa ventana cambiar segn hagamos clic en una u otra parte de la ventana de diseo. Si
hacemos clic una vez sobre la imgen del buzn, aparecer de esta forma:

213

Donde pone "Vnculo" es donde deberais haber puesto lo de "mailto:noseque@loquesea.com" (vuestro

E-Mail) y donde pone "Alt" es donde DEBIS poner algo, lo que sea, como por ejemplo "Buzn",
"Foto" o lo que queris.
Adems, los visitantes que utilicen Internet Explorer vern el comentario que all escribis cuando
mantengan el ratn sobre la imagen. En el resto de exploradores no ocurre, pero en Explorer si.
Si por alguna razn no os interesa que aparezca ese mensaje, poned en el hueco de "Alt" simplemente un
par de espacios en blanco, pero poned algo. Ms adelante os explicar el porqu de poner algo. Por
ahora ... fiarse de mi, je je je.
Ya que estamos con la Ventana Propiedades abierta, vamos a comentarla un poco para el caso de tenerla
activa sobre una imagen.
En la parte superior izquierda aparece un dibujo de la imgen y lo que ocupa en Kbytes.
Justo a su lado el tamao que debe tener en nuestra pgina. Por cierto. Si alguna vez insertis una
imagen y os parece demasiado grande, es mejor retocarla con un programa de imgenes que acortarla en
la pgina. Podis darle el tamao que queris desde la pgina, pero el tamao en Kbytes no varia por
eso, sino que es el mismo. En fn. El tamao aparece tambin en esa ventana de Propiedades, como "An"
que es el Ancho y "Al" que es el Alto.
En "origen" se muestra la Ruta del Archivo de Imagen.
En "Vnculo" podemos escoger alguna otra pgina para establecer un enlace al pinchar sobre la imagen.
(Por eso nosotros hemos puesto eso de mailto:.....@.....").
El resto os lo explicar cuando nos haga falta, vale?
El aspecto que tiene nuestra pgina de ejemplo, la "index.htm", es el siguiente:

214

Parece que vamos mejorando, eh? je je je.

Hasta Ahora...
Bueno bueno. Hasta este momento hemos aprendido ya varias cosillas muy interesantes.
- Conseguimos el Dreamweaver y pudimos instalarlo.
- Hemos preparado el Dreamweaver para poder usarlo ms comodamente.
- Sabemos subir pginas al servidor en el que nos hemos registrado.
- Conocemos los principios bsicos de HTML.
- Ya nos hemos adentrado en el mundo de los Estilos CSS.
- Sabemos algo de enlaces e imagenes, etc, etc.
Pero no vamos a quedarnos ah, no? Vamos a avanzar mucho ms en el siguiente men, al cual podis
acceder pinchando en el men de la izquierda, donde pone "Siguiente Men". Para retroceder al men en
el que estamos ahora solo tenis que pichar en "Men Anterior" desde la siguiente pgina.
Veremos all como crear plantillas para las dems pginas que compondrn nuestra web, distintos
bocetos de estrucuras de webs para que escojais el que ms os guste. Aadiremos un men muy
simptico que facilite la navegacin a los visitantes. Nos adentraremos un poco ms en los Estilos y en
el HTML. Insertaremos propaganda en nuestra web, as como un foro, libro de visitas y estadsticas. Y
un montn de cosas ms.
215

Venga, os espero en el men siguiente, donde os contar que ms cosas vamos a aprender.
Nos leemos!!

Crear una Plantilla Maestra para las pginas de

la web
Vamos a suponer que habis hecho los deberes, habis visitado otras webs y tras verlas tenis una idea
de la estructura que queris para vuestra pgina.
Supondremos tambin que estis de acuerdo en una estructura en la que aparezcan un espacio superior
para el intercambio de banners y el logotipo, un men lateral (a la izquierda como en esta web) y una
barra inferior para algunas otras cosillas de interes. En definitiva, una estructura similar a esta.
Pues supuesto esto, vamos a comenzar a crearla. Como os he comentado otras veces, la pgina principal
(index) tendr una estructura difrerente al resto, pues es la pgina de presentacin. Todas las dems
deberan tener un formato similar, es decir, una estructura casi idntica, para facilitar que el visitante
acabe familiarizandose con ella y no se pierda demasiado.
Por todo esto, vamos a crear una plantilla donde guardaremos todo lo comn a todas las pginas. Es
decir, la estructura, el men lateral, los colores, etc.
De este modo, cada vez que queramos incorporar una pgina ms, no tendremos que hacerlo desde el
principio, sino simplemente insertar lo nuevo a esa determinada pgina, osea, el texto y algunas
imgenes. El resto al ser comn a todas, estar hecho ya en esa plantilla que ahora vamos a explicar.

crear una Plantilla Maestra para las pginas de

la web
Vamos a suponer que habis hecho los deberes, habis visitado otras webs y tras verlas tenis una idea
de la estructura que queris para vuestra pgina.
Supondremos tambin que estis de acuerdo en una estructura en la que aparezcan un espacio superior
para el intercambio de banners y el logotipo, un men lateral (a la izquierda como en esta web) y una
barra inferior para algunas otras cosillas de interes. En definitiva, una estructura similar a esta.
Pues supuesto esto, vamos a comenzar a crearla. Como os he comentado otras veces, la pgina principal
(index) tendr una estructura difrerente al resto, pues es la pgina de presentacin. Todas las dems
deberan tener un formato similar, es decir, una estructura casi idntica, para facilitar que el visitante
acabe familiarizandose con ella y no se pierda demasiado.
Por todo esto, vamos a crear una plantilla donde guardaremos todo lo comn a todas las pginas. Es
decir, la estructura, el men lateral, los colores, etc.

216

De este modo, cada vez que queramos incorporar una pgina ms, no tendremos que hacerlo desde el
principio, sino simplemente insertar lo nuevo a esa determinada pgina, osea, el texto y algunas
imgenes. El resto al ser comn a todas, estar hecho ya en esa plantilla que ahora vamos a explicar.

Poniendo el ttulo a nuestra plantilla

Para crear la estrucura de la plantilla, que servir de base para todas las pginas de la web, hay que tener
muy clarito el concepto de Tablas y Celdas, e incluso conocer un poco ms a fondo el HTML.
Desde luego, podemos crear tablas sin recurrir al cdigo HTML, pues tanto el Dreamweaver como el
resto de programas lo permiten, pero os aseguro que os liaris mucho ms si no sabis como queda el
cdigo por dentro. Confiad en m como hasta ahora. Como siempre, os lo explicar paso a paso. Veris
como no es tn dificil.
En primer lugar crearemos el archivo de la plantilla, llamandola "plantilla1.htm". Le ponemos el "1" por
si queremos mas tarde hacer experimentos.
Para crearla abrid el Dreamweaver y pulsad en "Archivo" + "Nuevo" o "Archivo" + "Nueva Ventana" si
lo hacis desde la ventana "Sitio" del Dreamweaver.
En ambos casos aparece una ventana nueva. Para empezar vamos a guardarla con el nombre
"plantilla1.htm". Ya sabis, pulsad en "Archivo" + "Guardar como" y escogis la carpeta donde guardis
la web.
Que cosas van a ser comunes a todas las pginas de nuestra nueva web? Pensad un poco..... ya?
Por ejemplo, el ttulo de las pginas, aunque puede ser distinto en cada pgina, seguro que nos conviene
que empiecen con el nombre de nuestra web. Es decir, mi web se llama CreaTuWeb, de modo que todas
las pginas de la misma, tienen un ttulo que empieza por esa palabra. Ms tarde, a cada una de las
pginas le puedo poner (optativo) el nombre de la seccin, quedando por ejemplo "CreaTuWeb : Como
insertar imagenes" o algo as.
Pero como hemos visto, todas empiezan con el nombre de la pgina general, de modo que nos vamos al
cdigo HTML, y ponemos esa palabra en el ttulo, es decir, cambiamos la lnea:
<title>Untitled Document</title>

por:
<title>Nombre de mi web : PONER SECCION</title>

En "Nombre de mi web" poned el ttulo de la web, y dejad el resto " : PONER SECCION" tal que as.
Luego, conforma usemos la plantilla para crear nuevas pginas, esa ser una de las cosas a personalizar.
De este modo, si creamos una nueva pgina, tenemos ya medio titulo terminado, solo a falta de cambiar
" : PONER SECCIN" por el nombre de la seccin de la nueva pgina.

217

Enlace para la Hoja de Estilos

Que ms cosas se os ocurre que sern comunes?
Acordaos que vamos a usar una hoja de estilo para todas estas nuevas pginas. La que usamos para la
pgina principal se llam "estilo1.css", pero los estilos del resto van a ser algo diferentes, de modo que
crearemos una nueva hoja de estilo que llamaremos "estilo2.css".
Como sabis, tras crearla hay que decirle a cada pgina donde est y como se llama la hoja de estilo que
queremos que siga, de modo que vamos a insertar en la plantilla la lnea que hace todo eso. Ms tarde
creamos la hoja "estilo2.css".
Si recordis (espero que si) esa lnea era:
<link href="ruta/estilo2.css" media="screen" rel="StyleSheet" type="text/css">

donde "ruta/estilo2.css" es la ruta relativa del archivo de la hoja de estilo. Nosotros, por comodidad,
guardaremos el archivo estilo2.css en el mismo lugar que la hoja de estilo anterior, luego la ruta ser
simplemente href="estilo2.css".
Por tanto la lnea que tenemos que poner es:
<link href="estilo2.css" media="screen" rel="StyleSheet" type="text/css">

y como recordaris hay que situarla dentro de la cabecera del cdigo, es decir, entre <HEAD> y </HEAD>
quedando por ahora el cdigo completo de plantilla1.htm como este:

Una vez terminado todo esto guardamos la pgina con el nombre que ya sabis, "plantilla1.htm" y la
cerramos.

Creando la segunda Hoja de Estilos

Ahora vamos a crear la segunda hoja de estilo, la que vamos a llamar "estilo2.css".
218

Para ello, de nuevo, pulsad "Archivo" + "Nuevo" o "Archivo" + "Nueva ventana" y aparecer una nueva
ventana, (obviamente).
Ahora le damos a "Archivo" + "Guardar Como..." le ponemos el nombre "estilo2.css" guardamos y la
cerramos.
Pero como esto no es una pgina web sino una hoja de estilo, que como sabis, no tienen las palabrejas
<HEAD> y esas cosas, tenemos que borrar todo el cdigo que Dreamweaver le ha puesto por defecto.
Para eso, nos vamos a la ventana "Sitio", hacemos doble clic en "estilo2.css" para abrirla. Esta vez no
aparece como una ventana de Dreamweaver sino como un documento de Block de Notas de Windows.
(Esto es por ponerle al guardar la extensin .css en lugar de .htm)
Podemos as ver su cdigo. Este es el cdigo que Dreamweaver pone a todas las pginas HTML, pero en
este caso no es HTML sino CSS de modo que borramos TODO el cdigo que aparece y la cerramos
guardando los cambios. Ms adelante iremos aadiendo los estilos de la plantilla conforme nos haga
falta, pero por ahora ah lo tenemos, completamente en blanco.
Parece una maniobra algo absurda, verdad? Quizs no lo he explicado muy bien. La cosa es que hemos
creado un archivo en blanco y lo hemos llamado "estilo2.css", simplemente. No tiene ms historia.

Crear la estructura de la pgina web

Alguno de vosotros habr pensado en algunas otras cosas ms que podamos incluir en la plantilla por ser
comunes a todas las pginas, como las metatags ect. No os preocupis que lo haremos ms adelante.
Ahora vamos a incluir lo ms importante que es la estructura. Hay muchos buenos webmasters que
odian el uso de las tablas y celdas para crear las estructuras, pero personalmente, creo que una vez
entendidas no tienen porque causar el mnimo problema. De hecho, esta misma web usa tablas para la
estructura y me complace decir que adems de ser una estructura sencilla, no se va al traste con ningn
navegador (al menos por ahora) de modo que hoy por hay es mi forma preferida.
Si alguien desea conocer alternativas solo puedo decirle que investige el uso de los "divs" y capas.
Pero vamos a lo nuestro. Vamos a crear una estructura basada en tablas. Concretamente sern cinco
tablas:
La primera tabla ser una franja superior en la que podremos colocar un bonito dibujo del ttulo de
nuestra web (un banner nuestro) y quizs algo de propaganda externa o intercambio de banners (ms
tarde veremos todo esto).
En la segunda tabla, justo debajo de la primera, pondremos el ttulo de la seccin en la que nos
encontramos, adems de unas flechitas para facilitar al visitante la navegacin (adelante, atras..). Ser
similar a la barra verde oscura de arriba de la versin anterior de CmoCrearTuWeb.
La tercera tabla es la ms importante. En ella colocaremos los textos y/o contenidos de la web. La
dividiresmos en dos partes. Una parte izquierda con el men y otra parte derecha ms ancha donde irn
los contenidos en si.
219

La cuarta tabla es similar a la segunda en aspecto. Incluir, adems de las flechitas de la segunda tabla,
algunos enlaces rpidos, como el chat, actualizaciones, etc.
La quinta y ltima tabla, ser la de abajo del todo, donde podremos colocar la fecha de ltima
actualizacin de esa pgina concreta, nuestra firma, y algunas cosillas ms que se nos ocurran.
Como adivinaris, crear todo esta cada vez que queramos incluir una nueva pgina en nuestra web seria
un tostn, de modo que solo la vamos a crear una sola vez en la plantilla. Cuando queramos crear una
nueva pgina solo tendremos que incluir en la plantilla algunas cosas y listo. Se guarda con el nombre
que queramos y mantenemos la plantilla.
Dicho esto, vamos a crear esas cinco tablas y ya de paso os explico como se crean en HTML, vale?

Cmo Crear Tablas

Para comenzar vamos a ir abriendo con el Dreamweaver la pgina anteriormente creada para la plantilla,
la llamada "plantilla1.htm".
Si echis un vistazo al cdigo HTML de la misma, veris que an no hay nada entre <BODY> y </BODY>,
es decir, no tiene nada que mostrar.
Nosotros vamos a crear la primera tabla, que ser la tabla Superior.
Para ello, en Dreamweaver pulsamos en "Insertar" + "Tabla" y en la ventanita gris que aparecer
ponemos
- Filas: Nmero de filas (horizontales) que queremos que tenga la tabla.
- Columnas: Nmero de columnas (verticales) que deseamos.
- Ancho: Anchura de la tabla completa. Se puede escoger un ancho determinado en pixeles o que se
muestre con un ancho igual a una cantidad relativa a la anchura de la pgina, como por ejemplo, que sea
la mitad de la anchura de la pgina, o el 100 por cien, etc.
- Borde: Si ponemos un nmero distinto de cero ser el grosor de las lneas que delimitan cada celda de
la tabla, es decir, aparecen las celdas con un recuadro de cierto grosor. Si ponemos un cero (0) los bordes
sern invisibles.
- Relleno Celda y Espacio Celda: Son los margenes de cada celda, es decir, la separacin entre lo que
contienen y los bordes.
Nosotros, para esta primera tabla, vamos a escoger 1 fila, 2 columnas, ancho 95% en porcentaje, borde
cero y relleno y espacio de celda cero tambin. (poned un cero en estos).
Una vez aceptais, aparece la tabla delimitada con unas lneas discontnuas que luego no se vern en la
web. Ahora toca retocarla para darle el aspecto deseado, pero antes quisiera que supierais que ha hecho
Dreamweaver para crear esa tabla, es decir, que ha cambiado en nuestro cdigo HTML.
220

Para saberlo, basta con ver el cdigo HTML de la pgina "plantilla1.htm" pulsando

Podemos ver que al insertar la tabla aparece, entre <BODY> y </BODY> lo siguiente:

En la pgina siguiente os explico que significa este cdigo.

Propiedades de las Tablas

Os coloco el cdigo para recordarlo:

Esto es lo que Dreamweaver nos ha insertado en el cdigo de nuestra pgina para que nos aparezca la
tabla.
Como vis, todas las tablas empezan por <TABLE> y deben acabar con </TABLE>. Todo lo que hay entre
esas dos palabrejas forma parte de la tabla.
Tambin vemos que aparecen otras cosillas dentro de la primera de esas palabras mgicas. Os recuerdo:
<table width="90%" border="0" cellspacing="0" cellpadding="0">

Veamos esto detalladamente...

221

Width="90%"
La primera cosa que aparece es "WIDTH" que significa anchura. el 90% indica que la tabla debe ser de
ancho un 90% del ancho de la ventana del navegador que tenga abierta el visitante. Si pusieramos 50%,
la tabla siempre ocupara la mitad de la ventana del navegador.
Otra opcin sera indicarle un tamao fijo, como por ejemplo 200px. Las letras "px" indican "pixeles" y
el la unidad con la que se miden las dimensiones de, por ejemplo, la resolucin de un monitor (800x600
pixeles). Tambin se pueden especificar las dimensiones en centimetros, puntos, etc, pero no es
recomendable.

Border="0"
Esto indica que el borde de las celdas y de la tabla en si, tendrn un borde de cero, es decir, no tiene
borde o no se ver.
Se puede indicar un borde de 5px (cinco pixeles) o algo as para que sea visible, pero en este ejemplo no
lo usaremos, pues as queda ms profesional la cosa, je je.
No olvidad nunca especificar las unidades de esas medidas. Dreamweaver parece que lo ha olvidado, de
modo que nosotros, en cada una de las medidas que hay en nuestro cdigo le vamos a incluir las letras
"px" indicando que son pixeles.
De este modo, el cdigo quedar as:
<table width="90%" border="0px" cellspacing="0px" cellpadding="0px">

No dejeis ningn espacio entre el nmero y las letras px, pues entonces no funciona el invento. El 90%
no necesita unidades de medida, recordadlo.

cellspacing="0"
Es el margen desde el contenido de las celdas hasta el borde de su celda. Si por ejemplo especificamos
un cellspacing de 20px el contenido de la celda estar separado del borde de esa celda por arriba, abajo y
por los lados una distancia de 20 pixeles.

cellpadding="0"
222

Esta palabreja indica el margen que deseamos dejar desde el borde de las celdas de la tabla, hasta el
borde de la tabla. Por supuesto, tenemos que insertarle las letras "px" tras el cero o el nmero que sea.
Vaya lio! Mejor os dejo un dibujillo donde seguro que me expreso mejor. En rojo tenis la distancia
correspondiente al "cellspacing" y en azul la que corresponde a "cellpadding":

Bueno, pues as es como se define una tabla bsica. Ahora vamos a ver como se organiza, pero eso ser
en la pgina siguiente, vale?

Tablas, segn HTML

Os coloco de nuevo el cdigo para tenerlo a mano. Observar que le he aadido las letras "px" a las
medidas:

Por si alguno anda despistado, os recuerdo que las tablas se organizan en filas y columnas. Las filas son
horizontales y las columnas, las divisiones verticales (de arriba a abajo).
En HTML, las tablas se dividen en filas y luego cada fila se puede dividir en tantas columnas.
Las filas se representan con la palabra mgica "TR" y su contenido debe estar entre las palabras <TR> y
</TR>. Como podis ver en el cdigo de arriba, solo existe una fila en esa tabla.
A su vez, cada fila se puede dividir en columnas. Cada columna se representa con las letras "TD" y su
cdigo se encierra entre <TD> y </TD> como se puede ver en el ejemplo de arriba.
El cdigo que aparece dentro de cada fila es &nbsp; que en HTML representa un espacio en blanco, es
decir, como una letra invisible o transparente, vamos, un hueco.
223

Visto todo esto creo que es fcil interpretar el cdigo anterior, no? Es solo una tabla de anchura 90%, sin
borde ni margenes, con una sola fila y dos columnas. A su vez, cada columna tiene un espacio en blanco
dentro. Y ya est.

Tablas, segn HTML

Os coloco de nuevo el cdigo para tenerlo a mano. Observar que le he aadido las letras "px" a las
medidas:

Por si alguno anda despistado, os recuerdo que las tablas se organizan en filas y columnas. Las filas son
horizontales y las columnas, las divisiones verticales (de arriba a abajo).
En HTML, las tablas se dividen en filas y luego cada fila se puede dividir en tantas columnas.
Las filas se representan con la palabra mgica "TR" y su contenido debe estar entre las palabras <TR> y
</TR>. Como podis ver en el cdigo de arriba, solo existe una fila en esa tabla.
A su vez, cada fila se puede dividir en columnas. Cada columna se representa con las letras "TD" y su
cdigo se encierra entre <TD> y </TD> como se puede ver en el ejemplo de arriba.
El cdigo que aparece dentro de cada fila es &nbsp; que en HTML representa un espacio en blanco, es
decir, como una letra invisible o transparente, vamos, un hueco.
Visto todo esto creo que es fcil interpretar el cdigo anterior, no? Es solo una tabla de anchura 90%, sin
borde ni margenes, con una sola fila y dos columnas. A su vez, cada columna tiene un espacio en blanco
dentro. Y ya est.

Estilos CSS para las Tablas

Para darle un poco de gracia a la tablas les podemos poner unos colores de fondo y adems, para que no
se nos desordenen mucho cuando el visitante cambie el tamao de la ventana del navegador, les
pondremos un tamao determinado a algunas de las celdas, pero eso os lo explico sobre la marcha.
El caso es que estas cosillas se pueden hacer aadiendo otras palabrejas como las vistas antes (border,
cellspacing, etc...) pero a veces son interpretadas de manera diferente segn el tipo de navegador que use
el visitante y aparece todo desvirtuado.
224

Para evitarlo vamos a recurrir al uso de los estilos CSS. Esto no impide esas desvirtuaciones al 100 por
100, pero si las reduce notablemente. Adems tiene otras muchas ventajas que ya iras descubriendo por
el camino.
Os acordais de esa segunda hoja de estilo que creamos en lecciones anteriores y que habiamos dejado en
blanco? Pues vamos a meterle mano ahora. Os recuerdo que la llamabamos "estilo2.css".
En fin, vamos a definir el unos estilos para algunas de estas celdas, como por ejemplo, el color de fondo,
la anchura y en algunas adems, que el contenido aparezca centrado o justificado.
Primero definiremos esos nuevos estilos en la hoja de estilo "estilo2.css" y despus, en la pgina
"plantilla1.htm" indicaremos a cada celda qu tipo de estilo deseamos que tenga.
Quizs los colores de fondo o la anchura no os gusten para vuestra web, pero no ser problema, pues en
cualquier momento se puede rectifiar con solo retocar ligeramente la hoja de estilo. Esto es ms rpido
que retocar cada una de las pginas de nuestra web y eso es una de las ventajas de usar los estilos.
No me enrrollo ms, vamos a ponernos en marcha ya!!!

Definiendo los Estilos CSS

Vamos a definir los estilos para algunas tablas, y celdas. Paso a paso, como siempre:

Estilos para Tablas

Como habis visto antes, hemos definido que las tablas creadas sern de una anchura del 99% de la
ventana del navegador. Esto lo podemos hacer con la hoja de estilos de la siguiente forma.
Definimos en la hoja "estilo2.css" el tipo de tabla llamado por ejemplo "tabla.ancho99" escribiendo en
ella esto:
table.ancho99{width:99%}

donde:
table

indica que vamos a crear un tipo de estilo de tabla

.ancho99
99%

indica que ese tipo de estilo se llamar 99

indica la anchura definida

Daos cuenta que la forma de definir los estilos no es igual que el HTML. Para definir propiedades en
HTML se pona width="99%" mientras que en la hoja de estilos se escribe como width:99%, con dos
puntos y sin comillas.
Ms tarde tendremos que indicar en la "plantilla1.htm" que las tablas tienen que seguir el estilo .ancho99
pero lo vemos despus.
225

Estilos para celdas

Ahora vamos a definir el color de fondo de algunas celdas. Para diferenciar unas celdas de otras les
pondremos colores diferentes a algunas, tal y como en esta misma web. Adems, cada una tendr una
anchura distinta, de modo que definiremos un estilo para cada una de las celdas. Parece un tostn, pero
una vez hecho resulta de lo ms comodo, os lo prometo.
Os acordais del juego ese de hundir la flota? Ese de los barquitos, que uno deca h4, "tocadoo", e2
"Hundidoo!!!", je je. Pues vamos a hacer lo mismo con las celdas.
As, la celda superior de la izquierda ser la "a1", la superior del centro la "a2" y la superior de la
derecha la "a3". Los estilos de las celdas de la tabla siguiente sern "b1" y "b2" y as con todas ellas.
Vamos a abrir la hoja de estilos "estilo2.css" si la habis cerrado, y escribimos en ella esto (podis copiar
y pegar):

Aqu vemos definido el estilo de la tabla de antes y las definiciones "vacias" de cada celda de la pgina.
Vamos acompletar estas definiciones.
Los espacios que gue he dejado en blanco son solo para separar por tablas, vamos, para aclarar un poco
solamente. Cada propiedad va dentro de los corchetes (no son parntesis, sino corchetes!!). Ahora est
en blanco como vis. Os recuerdo tambin que dentro pueden ir varias propiedades, pero deben
separarse unas de otras mediante punto y coma " ; ".
Notad tambin que en el caso de definir propiedades en CSS (en la hoja de estilos) no se ponen las
unidades de medida entre "comillas" tal y como hacamos en HTML, aunque sigue siendo recomendable
indicar las unidades (pixeles, puntos, centmetros...) con las letras correspondientes (px, pt, cm...).
Vamos a rellenar esas propiedades en la siguiente pgina...

Los Colores
La primera propiedad que vamos a definir para cada celda es el color de fondo, aunque os explico de
paso cmo insertar tambin imagenes de fondo.

226

Los colores pueden ser todos los colores posibles los cuales se pueden indicar de distintas formas.
Existe una serie de 16 colores estandar que pueden indicarse directamente con su nombre en ingls. Son
los siguientes:
Black

Teal

Gray

Blue

Silver

Green

Red

Lime

Purple

Olive

Maroon

Yellow

Fuchsia

Aqua

Navy

White

Si no os basta con estos, y necesitais algn matiz de color que no est en la tabla, podis definir
cualquiera de los 16 millones restantes (no creo que los useis todos, no? je je je). Pero definirlos es un
poco ms complicado, pues ya no van por el nombre sino por un cdigo con este aspecto: #307596
Daos cuenta que los colores definidos por un cdigo se escriben con un smbolo de "almohadilla" o "#"
delante, pero los colores bsicos no.
Y cmo saber que cdigo tiene cierto color? Pues con Dreamweaver es muy facilito. Simplemente
seleccionad una palabra en una pgina de prueba de Dreamweaver (cread una pgina de prueba para esto
y luego si eso la borrais).
Selecionada la palabra, pinchad arriba en Texto > Color... y os aparece esta ventana (aunque se ver
mejor que aqu, je je je):

Ahora solamente pichais en el cuadro de la derecha, llena de colores, luego subid la flecha negra que hay
casi escondida en la parte baja de la columna de matices a la derecha del todo para terminar de decidiros
y tras eso, pinchad en "Agregar a los colores personalizados". Luego en Aceptar y ya est.

227

La palabra antes seleccionada aparece en ese color. Ahora, para sabes e cdigo de ese color basta con
mirar el cdigo HTML de la pgina esa de pruebas y apuntar en un papel el nmero que tiene y que
aparece en una lnea similar a esta:
<font color="#298D56">palabra</font>

El cdigo de el color de este ejemplo sera #298D56. Os recuerdo que para escribir el cuadradillo "#" o
almohadilla (creo que se llama as ese smbolo) hay que pulsar a la vez las teclas "AltGr" + "3".
Una vez que encontrais los colores que queris para cada celda o grupo de celdas, lo pondremos en la
hoja de estilos, tal y como os explico a continuacin en la siguiente pgina.
Recordad que podis cambiar esos colores rpida y fcilmente ms tarde si cambiais de opinin. No os
costar ningn esfuerzo gracias a los estilos CSS, pues solo tendris que retocar la hoja de estilos
"estilo2.css" y automaticamente cambia el color en todas las pginas que usen ese estilo.

LECCION 4

Definiendo las tablas y terminando la plantilla

bsica
En esta cuarta leccin, vamos a definir el estilo de las tablas y sus elementos, que formarn la plantilla
base para el resto de hojas de nuestra nueva pgina web.
Tambin veremos otras cosas, como la insercin de la fecha de ltima actualizacin (es automtica, no
hay que retocar nada tras insertarla), algo acerca de las imgenes en las pginas web, con lo que
aprovechamos para insertar las flechas de navegacin, y por ltimo, cmo incluir la firma de la pgina y
un enlace para que los visitanes puedan enviarnos un correo electrnico para decirnos lo bien que lo
hacemos.
Espero que os resulten fciles y sobre todo prcticas. Y no olvides decirme algo en el ForoCCTW si
alguna cosa no ha quedado suficientemente clara. Oki?
Adelante pues.

Definir el color de fondo de las celdas

Bien, supongamos que me han gustado los siguientes colores con estos cdigos:
blanco: white
Verde Claro: #9ED7D7
Verde Oscurillo: #0EBEBA
Amarillento: #F6DA98
228

(o si os habis conformado con los colores bsicos red, yellow, etc....)

Para definir que una celda b1 tenga el color de fondo, por ejemplo, de color verde oscuro cuyo cdigo es
#OEBEBA tenemos que poner en la hoja de estilos "estilo2.css" lo siguiente:
td.b1 { background-color: #OEBEBA ; }

Como sabis, td indica columna, .b1 es el nombre que le damos a cierta celda, background-color indica
que vamos a definir el color de fondo y #OEBEBA es el cdigo del color verde oscuro.
De la misma forma definimos el resto de las celdas, de modo que quedara as.

Todo esto puede simplificarse bastante, reuniendo todas las celdas a las que vamos a dar las mismas
propiedades, es decir, el mismo color de fondo.
Por ejemplo, si las celdas td.b1 td.b2 y td.b3 van a tener el mismo color de fondo, #OEBEBA, podemos
simplificar las tres lneas de este modo:

es decir, las ponemos todas seguidas y separadas por una coma "," y a continuacin ponemos la
propiedad o propiedades entre corchetes una sola vez. De este modo ahorramos espacio, aunque por
ahora no lo vamos a hacer, pues como seguramente definiremos ms propiedades adems del color de
fondo, quizs no nos interese hacerlo.
Bien, dicho esto, ya tenemos definidos los colores de fondo de todas las celdas de la plantilla. Ahora
vamos a definir la anchura.

Anchura de las Celdas

Para definir la anchura que deseamos que tenga una celda, usaremos el comando "WIDTH". Como ya os
he comentado, podemos utilizar distintas unidades, como por ejemplo, centmetros (cm), puntos (pt),
porcentajes (%) o pixeles (px) entre otros.
Os recomiendo usar siempre pixeles, pues creo que son las ms comodas. Recordad que se indican con
las letras "px" despus del nmero.
229

Imagina que no sabris cuanto mide un pixel (ni yo mismo lo se, je je) de modo que lo mejor es hacer
algunas pruebas hasta que veamos que la anchura es la deseada.
Como an no sabemos exactamente que anchura queremos darle a cada celda, pondremos un valor
aproximado y ms tarde, dependiendo del contenido de cada celda, la ajustaremos mejor.
Cuando definimos varias propiedades para el mismo elemento (por ejemplo, color de fondo y anchura en
una celda) podemos hacerlo en la misma lnea. Para ello basta con insertar el trozo de cdigo
correspondiente a la nueva propiedad junto a la propiedad definida antes, pero separandolas una de otra
por un punto y coma ";".
De este modo, si ponemos una determinada anchura a una celda de las definidas en el apartado anterior,
la hoja de estilo "estilo2.css" quedara as:

El punto y coma ";" del final (el de antes del corchete final) no es necesario, pero yo suelo incluirlo
siempre por si alguna vez incluyo alguna otra propiedad ms, no olvidarme de separarla de la anterior.
Como al principio habiamos definido que la anchura de las tablas sera del 99%, solo es necesario
definir el ancho de todas las celdas de la tabla menos una. Esa ltima a la que no definimos la anchura
tomar el ancho restante, es decir, el que le permitan las otras celdas a las que si hemos definido el
ancho.
As, por ejemplo, fijaos en esta misma pgina, la que estis leyendo. A la izquierda hay un menu que es
una celda con un ancho definido en la hoja de estilo. Adems, a la derecha de estas lneas, hay otra celda
con otro ancho diferente definido. En cambio, la celda en la que estn estas palabras, con fondo amarillo,
no tiene definido el ancho, de modo que ocupa lo que le dejan las celdas de los lados hasta ocupar todas
juntas el 99% de la ventana del navegador.
El caso es que solo vamos a definir el ancho a aquellas celdas que sabemos lo que queremos que ocupen
de anchura, el resto las dejaremos sin definir. No se si se entiende bien el proposito, espero que si.
En el ejemplo que estamos haciendo, el la primera tabla con las celdas a1 y a2, solo definiremos la a1,
pues en ella vamos a poner un banner de nuestra pgina que sabremos (cuando lo hagamos, claro) el
ancho que va a tener. En cambio, dejaremos que la celda a2 ocupe todo lo que quede hasta completar el
99% de la tabla. En ese espacio podremos poner un banner de publicidad o de intercambio de banners, y
nos da ms o menos igual lo que ocupe.
En la tabla segunda, que hemos dividido en tres celdas, b1, b2 y b3, solo definiremos las celdas b1 y b3,
pues ms o menos sabemos y queremos que ocupe un ancho determinado, en cambio dejaremos que la
b2 ocupe el resto y por eso no definimos su anchura en la hoja de estilos "estilo2.css".
En la tabla tercera, donde ir el men lateral y el contenido de las pginas, solo definiremos el ancho de
la celda del men, la c1, y dejaremos que la c2 ocupe el resto, que es donde irn los contenidos de la
pgina.
230

Asimismo, en la siguiente tabla, solo definimos las celdas d1 y d3 dejando que la d2 tome el resto del
ancho hasta el 99%.
Y finalmente en la ltima tabla solo definimos el ancho en las celdas e1 y e3 dejando libre la central.
Puede sonar un poco rollo todo esto, verdad? Venga, animo que la cosa est saliendo muy bien.

Asignando Estilos CSS a las Celdas

A continuacin os muestro cmo queda la hoja de estilos "estilo2.css" tras completar la definicin del
ancho de algunas celdas:

Bueno, pues antes de seguir aadiendo ms propiedades, vamos a volver a la pgina "plantilla1.htm"
para completar unas cosillas y ver que tal funcionan estas definiciones y como ponerlas en marcha.
En primer lugar guardamos y cerramos la hoja de estilo "estilo2.css" y abrimos la pgina
"plantilla1.htm" con el dreamweaver.
Por si las moscas, os indico que tal haba quedado el cdigo HTML de esa plantilla:

Como podris comprobar, si hacis vista previa de esa pgina, no los colores ni los anchos son tal y
como hemos definido en la hoja de estilos. Por qu puede ser?
Pues porque no hemos indicado en la pgina qu estilo debe seguir cada celda. Hemos definido los
estilos pero an no los hemos aplicado a nada.
Ahora vamos a aprender a asignar un estilo definido a un elemento de una pgina.
Para hacer esto solo necesitamos echar un vistazo al cdigo HTML de la pgina "plantilla1.htm".
231

Para hacer que una determinada celda siga un determinado estilo reformamos el cdigo para quede, en
lugar de as:
<td>Logotipo</td>

de esta otra forma:

<td class="a1">Logotipo</td>

Lo que hemos hecho es especificar que esa celda es del tipo "a1" y por tanto, seguir las propiedades
definidas en la hoja de estilo, segn el estilo de "td.a1".
Para eso, se ha incluido el comando class, que indica la clase de estilo a seguir y se ha indicado la clase (
="a1").
Lo mismo haremos con todas las dems celdas. No ser facil identifiarlas en el cdigo HTML pues antes
habiamos escrito una palabra representativa en cada una de ellas.
As, por ejemplo, en el cdigo correspondiente a la celda "a2" pondremos esto:
<td class="a2">banner</td>

y as con todas las dems.

El cdigo de la pgina "plantilla1.htm" queda as entonces:

rel="StyleSheet" type="text/css">
</head>
<body bgcolor="#FFFFFF">
<table width="99%" border="0px" cellspacing="0px" cellpadding="0px">
<tr>
<td class="a1">Logotipo</td>
<td class="a2">Banner</td>
</tr>
232

</table>
<table width="99%" border="0px" cellspacing="0px" cellpadding="0px">
<tr>
<td class="b1">titulo</td>
<td class="b2">ruta</td>
<td class="b3">flechas</td>
</tr>
</table>
<table width="99%" border="0px" cellspacing="0px" cellpadding="0px">
<tr>
<td class="c1">menu</td>
<td class="c2">contenido</td>
</tr>
</table>
<table width="99%" border="0px" cellspacing="0px" cellpadding="0px">
<tr>
<td class="d1">contador</td>
<td class="d2">opciones</td>
<td class="d3">flechas</td>
</tr>
</table>
<table width="99%" border="0px" cellspacing="0px" cellpadding="0px">
<tr>
<td class="e1">fecha</td>
<td class="e2">hueco</td>
233

<td class="e3">firma</td>
</tr>
</table>
</body>
</html>

nsertar comentarios en el cdigo HTML

Ahora la cosa va cogiendo forma, poca, eso si, pero algo de forma, no?
Si guardais la hoja de estilo "estilo2.css" y la pgina "plantilla1.htm" y hacis una vista previa de esta
ltima, podris ver lo que hemos conseguido (si es que habis hecho bien los debers, claro, je je je).
Os muestro aqu una imagen de cmo se debera ver esa plantilla por ahora desde el DreaWeaver:

Y desde un navegador, por ejemplo el iExplorer:

234

Ya ya, ya se que eso no parece en absoluto una pgina web sino una tabla sin ningn fuste (sentido),
pero poco a poco vers como se va pareciendo ms a una web de verdad, paciencia y confianza
amiguetes!
Como resulta que vamos a meterle mano al cdigo HTML de nuestra plantilla ms de una vez, conviene
tener bien estructurado el cdigo, para as no perdernos demasiado y poder identificar rpidamente cada
trozo de cdigo.
Para facilitar eso, tenemos una opcin muy buena. Se trata de poder incluir en el cdigo algunos
comentarios. Los comentarios no se ven al hacer vista previa (vamos, que no lo ve el visitante) y en
realidad no hacen nada de nada de nada. Para lo nico que valen es para facilitarnos la identificacin del
cdigo.
Os pongo un ejemplo para aclararnos un peln.
Podemos incluir anter del comienzo del cdigo de cada tabla, un comentario indicando algo as como
"Comienzo de la tabla tercera". De este modo, si tenemos que retocar algo de la tercera tabla, bastar
con buscar esa lnea (comentario) para saber que trozo de cdigo es el que buscamos. Creo que es util,
no?
Pues vamos al lio. Vamos a abrir la pgina "plantilla1.htm", y nos vamos a ver su cdigo HTML
pulsando el botn
del dreamweaver.
Para insertar un comentario solo necesitamos encerrarlo entre estos dos smbolos: <!-- y -->
Por ejemplo, esto que sigue es un comentario:
<!-- Esto es un ejemplo de comentario y no saldr en la pgina -->

Otro ejemplo es este, donde vemos que podemos meter ms guiones por si queremos dejarlo ms visible:
<!-------principio tabla tercera ---------->

Pues entendido esto, vamos a crear un comentario al principio de cada una de las 5 tablas que creamos
antes en la plantilla.
El cdigo ahora queda as:
<html>
<head>
<title>Titulo de tu pagina : PONER SECCION</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-2">
<link href="estilo2.css" media="screen" rel="StyleSheet" type="text/css">
</head>
235

<body bgcolor="#FFFFFF">
<!---- Principio Tabla Primera ---->
<table width="99%" border="0px" cellspacing="0px" cellpadding="0px">
<tr>
<td class="a1">Logotipo</td>
<td class="a2">Banner</td>
</tr>
</table>
<!---- Principio Tabla Segunda ---->
<table width="99%" border="0px" cellspacing="0px" cellpadding="0px">
<tr>
<td class="b1">titulo</td>
<td class="b2">ruta</td>
<td class="b3">flechas</td>
</tr>
</table>
<!---- Principio Tabla Tercera ---->
<table width="99%" border="0px" cellspacing="0px" cellpadding="0px">
<tr>
<td class="c1">menu</td>
<td class="c2">contenido</td>
</tr>
</table>
<!---- Principio Tabla Cuarta ---->
<table width="99%" border="0px" cellspacing="0px" cellpadding="0px">
236

<tr>
<td class="d1">contador</td>
<td class="d2">opciones</td>
<td class="d3">flechas</td>
</tr>
</table>
<!---- Principio Tabla Quinta ---->
<table width="99%" border="0px" cellspacing="0px" cellpadding="0px">
<tr>
<td class="e1">fecha</td>
<td class="e2">hueco</td>
<td class="e3">firma</td>
</tr>
</table>
</body>
</html>
Ahora es algo ms largo en total, pero creo que nos ser ms fcil identificar cada trozo.

Aplicando Estilos CSS a las Tablas

Hay que ver como sois. Hemos definido antes un estilo para las tablas, para que ocupen un 99% del
ancho, y se me ha olvidado usarlo. Y vosotros no me avisais!! Hay que estar ms atentos!! je je je je.
Vamos pues a decirle a las tablas que deben seguir el estilo definido antes en la hoja de estilo. Os
acordais? Ese que definimos as:
table.ancho99 {width:99%}

en la hoja de estilo "estilo2.css".

237

Al principio, al crear las tablas escogimos, junto con el tamao de borde cero y esas cosas, que el ancho
fuera 99%, os acordais? Pues el Dreamweaver incluy un trozo de cdigo en nuestras tablas para
cumplir eso. El cdigo era este:
<table width="99%" border="0px" cellspacing="0px" cellpadding="0px">

Pero resulta que nosotros no vamos a querer que el ancho est definido en el cdigo HTML de la
plantilla sino solo en la hoja de estilo, de modo que vamos a ver el cdigo HTML de la plantilla y
borraremos el trozo de cdigo este width="99%". Ese trozo borrado (acordaos de borrarlo en las cinco
tablas que tenemos) no nos hace falta, pues la anchura la tenemos definida en la Hoja de Estilos. El
cdigo queda entonces as:
<table border="0px" cellspacing="0px" cellpadding="0px">

Ahora acudimos de nuevo a ver el cdigo HTML de la plantilla y aadir en las lneas:
<table......

lo siguiente:
class="ancho99"

quedando la cosa as (para cada una de las cinco tablas):

<table class="ancho99" border="0px" cellspacing="0px" cellpadding="0px">

y listo, con solo eso, todas las tablas ocuparn ahora el 99% del ancho de la ventana del navegador.
Si queris hacer una prueba de que tal funciona esto, haced lo siguiente:
- Guardad la plantilla.
- Abrid la hoja de estilos y en lugar de 99% poned 50%.
- Guardad la hoja de estilos.
- Abrid la plantilla y veris como ha cambiado el ancho con solo retocar un numerito.
Parece una tonteria porque el ejemplo es tonto, pero imaginad la cantidad de cosas que se pueden variar
en segundos con solo un par de clics, verdad?
Bueno, pues ahora volved a poner el 99% en la hoja de estilos y seguimos con el tema.
Acordaos de poner lo de <table class="ancho99"......> en las cinco tablas.

Texto de Celdas en Negrita

Mirando la vista previa de lo que hasta ahora tenemos como plantilla se me ocurren un par de cosillas.
238

Por ejemplo, me gustara que el texto de algunas celdas apareciera centrado, el de otras justificado, el de
otras en negrita, y otras con texto de un color distinto al negro, por ejemplo azul.
Imaginad que ya llevo terminadas 20 pginas y me decido a hacer todos esos cambios. Que Horror!!
Tengo que cambiar eso en cada una de las 20 pginas? Pues mire usted, no! Solo tenemos que
modificar la Hoja de Estilos y Listo, asunto arreglado.
No os quejareis eh? Ser que no os enseo cosas utiles y fciles..... je je je. Pues vamos all!

Celdas con Textos en Negrita

Decidimos que queremos que los textos de las celdas b1, b2, c1, d2, c1, c2 y c3 se muestren en negrita.
Para ello solo tenemos que incluir la propiedad que os escribo abajo, en cada una de las lneas
correspondientes a cada celda que queremos en negrita, dentro de la hoja de estilos "estilo2.css":
font-weight:bold

donde bold significa "negrita" en CSS.

De este modo, la hoja de estilos quedar as:
table.ancho99 {width:99% ;}

td.a1{ background-color: white ; width: 150px ; }

td.a2{ background-color: white ; }

td.b1{ background-color: #0EBEBA ; width: 150px ; font-weight: bold ; }

td.b2{ background-color: #0EBEBA ; font-weight: bold ; }
td.b3{ background-color: #0EBEBA ; width: 50px ; }

td.c1{ background-color: #9ED7D7 ; width: 150px ; font-weight: bold ; }

td.c2{ background-color: #F6DA98 ; }

239

td.d1{ background-color: #0EBEBA ; width: 50px ; }

td.d2{ background-color: #0EBEBA ; font-weight: bold ; }
td.d3{ background-color: #0EBEBA ; width: 50px ; }

td.e1{ background-color: white ; width: 150px ; font-weight: bold ; }

td.e2{ background-color: white ; font-weight: bold ; }

td.e3{ background-color: white ; width: 150px ; font-weight: bold ; }

y se ver de esta forma en el iExplorer:

Centrado, Justificado y Color de Texto

Vamos ahora a aadir el resto de propiedades. que queremos que sigan algunas celdas.

Celdas con Texto Centrado

Para que la web tenga mejor pinta, decidimos que el texto de algunas celdas debe ir centrado. En
realidad todas las celdas quedan bien si las centramos, excepto una, la celda c2 que queda mejor si el
texto aparece justificado. Para que todas las dems aparezcan centradas incluimos en el cdigo de la hoja
de estilo, y para cada una de las definiciones de las celdas (menos para la c2) lo siguiente:
text-align:center

As, por ejemplo, una de las lneas de cdigo de una celda, quedara como:
240

td.b1{ background-color: #OEBEBA ; width: 150px ; font-weight: bold ; text-align:

center ; }

Y as hacemos con todas las dems celdas (menos la c2).

Celdas con Texto Justificado

La celda c2 en cambio es donde meteremos los textos de la web. Es la zona principal y por eso queda
mejor "justificada" que centrada.
Para esto, el cdigo a insertar en la hoja de estilo, y solo en la lnea de cdigo de la celda c2,
incluiriamos esto:
text-align: justify

quedando entonces esa lnea as:

td.c2{ background-color: #F6DA98 ; text-align: justify ; }

Celdas con Texto de otro Color

Imaginaos que ahora se me ocurre que el texto de la celda b2 no sea negro, sino azul oscuro. Tras
investigar cual es el cdigo de ese color mediante el metodo usado y explicado en secciones anteriores,
encuentro que el cdigo es: #000080
Pues solo hay que insertar la siguiente propiedad en la lnea de cdigo de la hoja de estilo,
correspondiente a la celda b2,
color: #XXXXX ;

donde XXXX es el cdigo del color.

de modo que quedaria as esa lnea:

td.b2{ background-color: #OEBEBA ; font-weight: bold ; color: #000080}

y listo, solo tenemos ahora que guardar la hoja de estilos:

table.ancho99 {width:99% ;}

td.a1{ background-color: white ; width: 150px ; text-align: center ; }

td.a2{ background-color: white ; text-align: center ; }

td.b1{ background-color: #0EBEBA ; width: 150px ; font-weight: bold ; text-align: center ; }

241

td.b2{ background-color: #OEBEBA ; font-weight: bold ; color: #000080; text-align: center ; }

td.b3{ background-color: #0EBEBA ; width: 50px ; text-align: center ; }

td.c1{ background-color: #9ED7D7 ; width: 150px ; font-weight: bold ; text-align: center ; }

td.c2{ background-color: #F6DA98 ; text-align: justify ; }

td.d1{ background-color: #0EBEBA ; width: 50px ; text-align: center ; }

td.d2{ background-color: #0EBEBA ; font-weight: bold ; text-align: center ; }
td.d3{ background-color: #0EBEBA ; width: 50px ; text-align: center ; }

td.e1{ background-color: white ; width: 150px ; font-weight: bold ; text-align: center ; }

td.e2{ background-color: white ; font-weight: bold ; text-align: center ; }
td.e3{ background-color: white ; width: 150px ; font-weight: bold ; text-align: center ; }
y hacer una vista previa para ver lo que hemos conseguido, que ser ms o menos esto:

que an tiene mejor pinta que la versin anterior, no? Ya os dije que esto ria tomando forma....

Flechas de Navegacin
Aunque parezca metira, la estructura ya est terminda. Lo nico que tenemos hacer ahora es rellenarla
con elementos comunes a todas las pginas de nuestra web.
242

Por ejemplo, todas van a tener las flechitas de desplazamiento en las tablas b y d. Estas servirn para que
el usuario pueda avanzar y retroceder de pgina fcilmente. Es muy conveniente dar estas y otras
facilidades a los visitantes.
Vamos entonces a insertar esas flechitas.
Lo primero es conseguir los archivos de esas flechitas. Tenis varias opciones, una es buscar unas
flechas que os gusten en internet, otra es buscarlas en nuestra Galeria de Objetos a la que podis acceder
desde el men principal de esta web.
La ltima opcin es crearlas vosotros mismos con algn programa de dibujo. Eso si, os recomiendo que
le pongais pocos colores y que el tamao no sea muy grande para no ralentizar la carga de la pgina.
Para ir ms rpido en este ejemplo, vamos a aprovecharnos de las flechas de esta misma pgina. Os las
coloco aqu mismo para que os las guardeis en vuestro disco duro.
Para ello, pulsad sobre ellas con el botn derecho del rotn y pulsad en "Guardar Imagen Como...".
Acordaos guardarla en la carpeta de la web.

Ahora vamos a insertarlas en las celdas b3 y d3. Para ello:

- Abrid la pgina "plantilla1.htm" con el Dreamweaver.
- borrad la palabra "flechas" que hay en la celda b3.
- Pinchad en Insertar > Imagen
- Se abre una ventana del dreamweaver. Buscad en esa ventana la carpeta donde guardsteis los archivos
de esas flachas (obligatoriamente, deben estar dentro de la carpeta de vuestra web).
- Una vez encontrado el archivo de la flecha "atras" pusad en "Seleccionar" y la flecha aparecer en la
celda.
Ahora, para que la flecha de la derecha, la de "Adelante" no se quede demasiado pegada a la de "atras"
vamos a insertar un espacio en blanco. Es decir, ponis el cursor a la derecha de la flecha insertada y
pulsais una vez el espacio.
- El siguiente paso es insertar la flecha de "Adelante" de la misma forma que la otra.
Bien, no ha quedado mal del todo, no?
Ahora hacemos lo mismo en la tabla d3 y despus guardamos la plantilla.
La pgina se ve ahora as:

243

Por cierto, sabed que por ahora si hacemos clic en las flechas, no pasa nada de nada. Eso es porque an
no hemos puesto los enlaces en las flechas.
Aunque las flechas son comunes a todas las pginas, (por eso las ponemos en la plantilla) los enlaces
sern siempre distintos en una y otra pgina, claro, y por eso los enaces no los incluimos en la plantilla.
Como sabris, Dreamweaver a escrito el cdigo HTML correspondiente a esas flechas en el cdigo de la
plantilla. Vamos a echarle un ojillo en la siguiente pgina para ir conociendo un poquitn ms ese mundo
del HTML.

Cdigo HTML en la Insercin de Imgenes

Si abrimos el archivo "plantilla1.htm" con el Dreamweaver y miramos el cdigo podremos ver esto:
<html>
<head>
<title>Titulo de tu pagina : PONER SECCION</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-2">
<link href="estilo2.css" media="screen" rel="StyleSheet" type="text/css">
</head>
<body bgcolor="#FFFFFF">
<!---- Principio Tabla Primera ---->
<table class="ancho99" width="99%" border="0px" cellspacing="0px" cellpadding="0px">
<tr>
244

<td class="a1">Logotipo</td>
<td class="a2">Banner</td>
</tr>
</table>
<!---- Principio Tabla Segunda ---->
<table class="ancho99" width="99%" border="0px" cellspacing="0px" cellpadding="0px">
<tr>
<td class="b1">titulo</td>
<td class="b2">ruta</td>

<td class="b3"><img src="atras.gif" width="13" height="19"> <img src="adelante.gif" width="13"

height="19"></td>
</tr>
</table>
<!---- Principio Tabla Tercera ---->
<table class="ancho99" width="99%" border="0px" cellspacing="0px" cellpadding="0px">
<tr>
<td class="c1">
<p>menu</p>
</td>
<td class="c2">
<p>contenido</p>
</td>
</tr>
</table>
245

<!---- Principio Tabla Cuarta ---->

<table class="ancho99" width="99%" border="0px" cellspacing="0px" cellpadding="0px">
<tr>
<td class="d1">contador</td>
<td class="d2">opciones</td>

<td class="d3"><img src="atras.gif" width="13" height="19"> <img src="adelante.gif" width="13"

height="19"></td>
</tr>
</table>
<!---- Principio Tabla Quinta ---->
<table class="ancho99" width="99%" border="0px" cellspacing="0px" cellpadding="0px">
<tr>
<td class="e1">fecha</td>
<td class="e2">hueco</td>
<td class="e3">firma</td>
</tr>
</table>
</body>
</html>
pero vamos a ver solo la parte de la celda b3, pues el cdigo de la elda d3 es casi idntico:
.....
<!---- Principio Tabla Segunda ---->
<table class="ancho99" width="99%" border="0px" cellspacing="0px" cellpadding="0px">
<tr>
246

<td class="b1">titulo</td>
<td class="b2">ruta</td>

<td class="b3"><img src="atras.gif" width="13" height="19"> <img src="adelante.gif" width="13"

height="19"></td>
</tr>
</table>
.....
Vemos que lo nico que se ha cambiado del cdigo es que en lugar de aparecer:
<td class="b3">flechas</td>

al borrar la palabra "flechas" e incluir las flechas se ha quedado as (os pongo en rojo lo nuevo):
<td class="b3">
<img src="atras.gif" width="13" height="19">
<img src="adelante.gif" width="13" height="19">
</td>

Pues bien, vemos que para incluir una imagen solo tenemos que irnos al cdigo HTML y escribir:
<img

que significa que se va a meter una imagen.

src="...."

poner la ruta del archivo de la imagen.

width="..."

indicar el ancho de la imagen.

height="..."

indicar la altura de la imagen.

Fijaos que toda esa lnea empieza y acaba con < y > es decir, hay que cerrarla tras definir en ella la ruta,
ancho y alto con el smbolo > .
Eso si, tal y como os decia otro da, es recomendable, aunque no obligatorio, incluir al lado del nmero,
qu a qu tipo de unidades de medida nos referimos. De modo que no estara mal poner, a la derecha de
cada nmero de anchura y altura, las letras de pixeles, "px", quedando el cdigo as:
<td class="b3">
<img src="atras.gif" width="13px" height="19px">

247

<img src="adelante.gif" width="13px" height="19px">

</td>

Listo, ya sabis como meter imagenes, tanto con Dreamweaver como en el puro estilo "HTML a mano",
je je je. No estais contentos? Es que no os oigo aplaudir!!! je je je je.

Insertar la Fecha de la ltima Actualizacin

Qu os parece si ahora incluimos en una de las celdas la fecha de la ltima actualizacin de la pgina?
Bien, no? Pues vamos.
No se trata de que cada vez que reformemos algo pongamos la nueva fecha, eso es un rollo. Lo que
haremos es que el propio Dreamweaver, actualice esa fecha cada vez que cambiemos y guardemos
alguna de nuestras pginas.
La fecha en cuestin no es la misma para cada pgina. Cada pgina de nuestra web tendr su propia
fecha de actualizacin. De todas formas, el cdigo de esa aplicacin es el mismo para todas las pginas,
de modo que podemos incluirlo en la plantilla.
Venga vamos, pero como siempre, paso a paso:
- Abrid la plantilla con el Dreamweaver.
- Poned el cursor en la celda e1.
- Borrad la palabra que pusimos antes, la palabra "fecha".
- Haced clic en Insertar > fecha y os aparcer esta ventana de Dreamweaver:

Escoged el formato que ms os guste. Y no olvidad marcar o activar la casilla de abajo, para que
Dreamweaver actualice la fecha al guardar cada pgina.
Si escogis poner tambin el formato del da, es posible que si estos llevan acentos, al insertarlo
aparezca una cosa muy rara en lugar del nombre del da, pero no os preocupeis, eso se ve bien en la vista
previa. Ya os explicar ms adelante que es eso tan raro.
248

En el ejemplo no he elegido incluir tambin la hora, para no llenar mucho la celda.

Vamos a ver como queda esa celda una vez pulsamos en Aceptar.
La pgina se ve ahora as en iExplorer:

Seguramente eso no sea suficiente y queramos incluir antes de eso, las palabras "Actualizada el ". As,
todo completo, la cosa quedara tal y como en mi web.
Para hacer eso basta con escribir "Actualizada el " antes de la fecha. Para ello poned el cursor antes de
las palabras que aparecen en la celda y sin ms, escribidlo. Despus guardad la pgina.
La celda queda as :

Como veis, sale todo en negrita, pues as lo habiamos definido antes en la hoja de estilos. Mola verdad?

Firma de Pgina
Qu ms cosillas son comunes a todas las pginas? Amos a pensar... a ver... YA! la firma!
Quizs querais que en todas las pginas de vuestra web aparezca, por ejemplo eso de "Creada por
Fulano" o "Dieada por XXX ".
A estas alturas seguro que sabis hacerlo solos solas, verdad? Bueno, vamos a explicarlo de todos
modos, por si acaso.
249

Abrimos la pgina "plantilla1.htm" con el Dreamweaver, ponemos el cursor en la celda e3 y borramos lo

que en ella hay, la palabra "firma".
Ahora escribimos directamente lo que deseamos que aparezca y luego la guardamos.
OS doy unas pistas por si os interesan.
El smbolo o o etc, etc, podis insertarlos de la siguiente forma:
- Poneis el cursor en el lugar donde queris insertarlo.
- Pulsais en el dreamweaver, en la seccin Insertar > Caracteres y podis escoger entre todos los que hay
disponibles, que son un montn. (Hasya el Euro! ).
Es posible que al insertar alguno de estos carcteres raros, en la ventana del Dreamweaver se vea alguna
cosilla rara, como cdigo. No pasa nada, pues el visitante no lo ver as sino bien. Probad la vista previa
y lo comprobais.
La pgina queda ahora as:

No os asusteis al ver eso de "hueco" justo al lado de "Creada por Fulano". Eso es porque para hacer las
fotos de estas ventanas y que no ocupen mucho, debo reducir esas ventanas y aparece todo muy pegado,
pero agrandando un poco la ventana se ve ms separado, mejor.
Si quereis, podemos hacer que cuando la gente pinche en "Fulano" (en vuestro caso, vuestro nombre) el
visitante os pueda escribir un mensaje. Solo hay que crear un enlace de mensajes.
Os recuerdo como se hacia en la siguiente pgina.

Enlace de Correo para la Firma

Seleccionad la palabra en la que queris insertar el enlace de correo electrnico. Por ejemplo, la palabra
"Fulano".
250

Despus, con la palabra seleccionada, haced clic en aquel botn de proppiedades que pusimos en
Dreamweaver en las lecciones del principio, del otro men, aque con este aspecto:

Si no lo tenis (por no hacerme caso en su momento, je je) podis pinchar en Modificar > Propiedades
de la Seleccin.
En cualquier caso, se abre esta ventanita:

Pues bien, si tenis seleccionada la palabra, ahora, en esa ventana, en el hueco donde pone Vnculo
escribid lo siguiente:
mailto:XXXXX@XXXXXX.XX
donde XXX@XXXX.XX es la direccin a donde queris que vayan a parar los E-Milios que os manden.
Ya podis cerrar esa ventana y estar listo el enlace de correo electrnico. Facil, no? je je.
Veamos qu cdigo se ha insertado en la pgina para conseguir esto. Antes de crear el vnculo teniamos
en esa celda esto:
<td class="e3">Creada por Fulano &copy; </td>

y tras poner el enlace de correo, esto otro:

<td class="e3">Creada por
<a href="mailto:jorgegens@wanadoo.es">Fulano</a> &copy; </td>

Por lo tanto, podemos deducir que para incluir un enlace cualquiera, solo necesitamos escribir esto:
<a href="direccin del enlace">palabra para el enlace</a>

Si adems, no se trata de un enlace normal, sino de un enlace de correo electrnico, hemos de escribir la
palabra mgica mailto: antes de la direccin de correo.
Es facilsimo, verdad? je je je, bueno, quizs algo lioso al principio, pero veris como le acabis
perdiendo el miedo.
El cdigo de la plantilla es ahora este:

251

Cuando en lugar de un enlace de correo electrnico se quiere poner un enlace a una pgina se debe poner
en aquel hueco la direccin del enlace. A esa direccin se le suele llamar Ruta del Archivo. Es muy
importante tener claro el concepto de Ruta de Archivo, pues el 70% de los errores y dudas que me
comentais son debidos a estas.
Haced muchos exerimentos y usad el Foro CCTW para cualquier duda. Como estoy muy mal de tiempo
no os puedo asegurar respuestas a los mensajes que me envieis a mi correo. Lo intentar pero no creo
poder responder tantos, sois demasiados para mi, je je je. Por eso prefiero que usis el Foro, al que
puedo aceder sin mucho problema desde el trabajo (que no se entere el jefe!!! je je je je je).
Pronto inlcuir ms cosillas. Nos leemos.

Veamos lo que llevamos hecho hasta el momento

Tan solo llevamos cuatro lecciones y vers como ya va tomando forma la pgina web. Por el momento
hemos conseguido crear lo siguiente:
Con el cdigo HTML de la pgina (plantilla.html):
<html>
<head>
<title>Titulo de tu pagina : PONER SECCION</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-2">
<link href="estilo2.css" media="screen" rel="StyleSheet" type="text/css">
</head>
<body bgcolor="#FFFFFF">
<!---- Principio Tabla Primera ---->
<table class="ancho99" width="99%" border="0px" cellspacing="0px" cellpadding="0px">
252

<tr>
<td class="a1">Logotipo</td>
<td class="a2">Banner</td>
</tr>
</table>
<!---- Principio Tabla Segunda ---->
<table class="ancho99" width="99%" border="0px" cellspacing="0px" cellpadding="0px">
<tr>
<td class="b1">titulo</td>
<td class="b2">ruta</td>

<td class="b3"><img src="atras.gif" width="13px" height="19px"> <img src="adelante.gif"

width="13px" height="19px"></td>
</tr>
</table>
<!---- Principio Tabla Tercera ---->
<table class="ancho99" width="99%" border="0px" cellspacing="0px" cellpadding="0px">
<tr>
<td class="c1">
<p>menu</p>
</td>
<td class="c2">
<p>contenido</p>
</td>
</tr>
253

</table>
<!---- Principio Tabla Cuarta ---->
<table class="ancho99" width="99%" border="0px" cellspacing="0px" cellpadding="0px">
<tr>
<td class="d1">contador</td>
<td class="d2">opciones</td>

<td class="d3"><img src="atras.gif" width="13px" height="19px"> <img src="adelante.gif"

width="13px" height="19px"></td>
</tr>
</table>
<!---- Principio Tabla Quinta ---->
<table class="ancho99" width="99%" border="0px" cellspacing="0px" cellpadding="0px">
<tr>

<td class="e1">Actualizada el <!-- #BeginDate format:fcEn2 -->S&aacute;bado, 20-Jul-2002<!-#EndDate --></td>

<td class="e2">hueco</td>

<td class="e3">Creada por <a href="mailto:tucorreo@wanadoo.es">Fulano</a> &copy;</td>

</tr>
</table>
</body>
</html>
Junto con la hoja de estilo siguiente (estilo2.css):
table.ancho99 {width:99% ;}
254

td.a1{ background-color: white ; width: 150px ; text-align: center ; }

td.a2{ background-color: white ; text-align: center ; }

td.b1{ background-color: #0EBEBA ; width: 150px ; font-weight: bold ; text-align: center ; }

td.b2{ background-color: #0EBEBA ; font-weight: bold ; color: #000080; text-align: center ; }
td.b3{ background-color: #0EBEBA ; width: 50px ; text-align: center ; }

td.c1{ background-color: #9ED7D7 ; width: 150px ; font-weight: bold ; text-align: center ; }

td.c2{ background-color: #F6DA98 ; text-align: justify ; }

td.d1{ background-color: #0EBEBA ; width: 50px ; text-align: center ; }

td.d2{ background-color: #0EBEBA ; font-weight: bold ; text-align: center ; }
td.d3{ background-color: #0EBEBA ; width: 50px ; text-align: center ; }

td.e1{ background-color: white ; width: 150px ; font-weight: bold ; text-align: center ; }

td.e2{ background-color: white ; font-weight: bold ; text-align: center ; }
td.e3{ background-color: white ; width: 150px ; font-weight: bold ; text-align: center ; }
Hemos conseguido esto:

255

Aunque parezca un poco rara no te preocupes, en la leccin siguiente le vamos a incluir un men comn
para todas las pginas e insertaremos algo en el contenido central. Vers como al llenarla va tomando
mejor aspecto.
Tambin veremos en la siguiente leccin como escoger las aractersticas que deseamos para los enlaces
de nuestra pgina web, es decir, como hacer para que los enlaces aparezcan de otro color y sin
subrayado, por ejemplo. Anmate y nos leemos en la leccin V.

LECCION

Creando el Men Principal de la Pgina web

Insertar un Men en todas las Pginas de la
Web.
Hasta el momento tenemos lista la estructura de la pgina web que nos va a servir de plantilla. Pero se
trata de una estructura muy simple que en esta seccin vamos a completar.
Para empezar vamos a crear lo que ser el men de la parte izquierda, donde insertaremos las secciones
de la web. Tras esto y por la cantidad de peticiones que he recibido de vosotros en el Foro CCTW (para
que veais que las sugerencias no caen en saco roto) veremos como hacer para crear este men una sola
vez y como insertarlo en cada una de las pginas de modo que cada vez que lo variemos (incluyendo
nuevas secciones por ejemplo) no tengamos que tocar nada ms que un archivo, el del men.
Pensando en todos vosotros, he decidido explicar esto ltimo de dos modos, una para los que tenis el
Dreamweaver (el uso de las bibliotecas), otra para los su servidor les permita hacer cierto truco (usando
Includes). An queda una tercera, que es usando frames o marcos, pero esa no me gusta pues nos dar
problemas a la hora de ser bien encontrados por los buscadores.
Estoy seguro de que esta nueva leccin os va a gustar. Ya me contareis que os parece.

Cmo Disear un men para las Pginas de la

Web.
Si recuerdas, al principio de estas lecciones te coment que antes de crear la web era necesario tener bien
clara la idea de lo que queramos. En este caso, la creacin de un men comn para todas las pginas de
la web (o para una seccin de la misma), debemos tener tambin una idea clara de lo que nos va a haer
falta.
Lo primero es saber qu contenidos vamos a incluir en la pgina web y ms o menos saber cuanta
cantidad de informacin vamos a plasmar en ella para as, poder repartir este contenido en diversas
256

secciones o apartados. Esto es importante pues estas secciones o apartados son las que vamos a poner
como enlaces en el men.
Ten en cuenta que las pginas no deben quedar demasiado vacias de contenido (pues como el men
alarga la pgina hacia abajo, si no hay contenido quedara un hueco vacio, algo feillo), ni demasiado
cargadas (seran muy largas y el lector podra cansarse).
No conviene que sean ms de dos veces la altura de la ventana del navegador, y por supuesto, que nunca
el visitante tenga que usar la barra de desplazamiento lateral (me refiero a la que permite ir hacia la
izquierda y derecha de la pgina, no a la de subir y bajar).
Dicho esto, piensa un poco en los contenidos a insertar y con papel y lapiz, traza una lista de los
apartados en los que dividir esos contenidos. Si ves que uno de ellos va a ser bastante largo, piensa en
dividirlo en dos o ms secciones de forma que todas tengan ms o menos la misma altura o cantidad de
contenido.
Listo? Pues bien, para el ejemplo que vamos a contruir, usaremos estas secciones:

Presentacin.
Formacin.
Historia del Grupo.
Conciertos.
Discos Editados.
o En directo.
o De estudio.
Prximos Proyectos.
Contacto.
Libro de Visitas.

He imaginado en el ejemplo que una de las secciones va a tener mucho de contenido (la seccin anterior
de Discos Editados que contiene dos subsecciones). As veremos tambin como diferenciar secciones de
subsecciones usando la hoja de estilos.
En el ejemplo que t vas a construir, cambialas por las secciones que te convengan.

Cmo Construir un men para las Pginas de la

Web.
Para crear el men principal de la pgina web, una vez tenemos claras las secciones que lo formarn,
haremos lo siguiente.
Crearemos una "lista" de elementos, que sern las secciones principales tambin las subsecciones del
apartado "Discos Editados", como si todas fueran al mismo nivel. Ms tarde las diferenciaremos.
En cdigo HTML, hacer una lista es de lo ms sencillo. Hay que tener en cuenta que la lista empieza con
<UL> y termina con </UL>, y que dentro de esta, cada seccin de la lista empieza con <LI> y termina
con </LI>, eso es todo. Ms fcil imposible.
257

Veamoslo con un ejemplo para terminar de tenerlo claro. Para hacer la lista comentada en la pgina
anterior, basta con hacer esto:
<UL>
<LI>Formacin</LI>
<LI>Historia del Grupo</LI>
<LI>Conciertos</LI>
<LI>Discos Editados</LI>
<LI>En Directo</LI>
<LI>En Estudio</LI>
<LI>Prximos Proyectos</LI>
<LI>Contacto</LI>
<LI>Libro de Visitas</LI>
</UL>
Creo que ha quedado claro, no? Solo nos queda saber en qu parte de la plantilla copiar este cdigo
HTMl del men.
Antes deciros algo. Como vis, no hemos usado el Dreamweaver para hacer la lista. Por qu? No se
puede? Pues s que se puede, sin ms que pinchar sobre "Texto" + "Lista" + "Lista sin Ordenar", pero de
todos modos, no nos viene nada ml seguir aprendiendo cosas del HTML, que por otro lado no es tan
dificil, como veis.
Ven a la pgina siguiente y lo pegamos juntos en la plantilla que ya tenamos, vale?

Cmo Insertar el men en la Plantilla de la Web.

Para insertar el men en la plantilla, primero vamos a abrir la plantilla creada anteriormente. Podemos
hacer dos cosas, o bien abrirla con el block de notas de windows para acceder directamente a ver su
cdigo HTML e insertar el cdigo del men, o bien abrimos la plantilla1.html con el Dreamweaver y
pulsamos sobre
para ver su cdigo. En este ejemplo lo haremos con Dreamweaver.
Abrimos el Dreamweaver y pinchamos dos veces sobre el archivo "plantilla.html",

258

Tras abrirse, pulsamos el botn

en la parte inferior derecha.

Con esto, saldr la ventana de cdigo HTML, tal que as:

259

Te he marcado el cdigo que tienes que ser sustituido por el del men que hicimos en la pgina anterior,
es decir, has de borrar el cdigo seleccionado en la foto de arriba <p>menu</p> y pegar en su lugar el
del men.
Y poe qu all? Por que se trata de insertar el men en la celda izquierda de la tabla de la plantilla,
donde pona men. Una vez pegado all el cdigo, la plantilla se queda as:

260

Valla mierda de men, que decepcin... pensar alguno (y con razn, je je je). Pero tranquilos, vamos a
darle forma poco a poco, no desanimeis.

Mejorar el Men de la Plantilla de la Web.

Realmente no ha quedado muy mono, pero no es para ponerse as, je je. Es normal pues an no le hemos
definido el estilo que deseamos para l, pero vamos a hacerlo en un momentito.
Para retocar el estilo del men, como sabis, hay que ir a la hoja de estilo llamada estilo2.css y cambiar
un par de aspectos.
Si te has dado cuenta, las secciones aparecen pegadas a la derecha. Eso es por que teniamos definido el
estilo text-align: center para la celda td.c1, que es la del men. Como ahora que lo hemos pensado mejor
la queremos pegada a la izquierda, hemos de cambiarlo por text-align: left (izquierda en ingls).
Haced este cambio en la hoja estilo2.css y guardar el archivo. Esa lnea de la hoja de estilos se debe
quedar as (en rojo el cambio realizado):
td.c1{ background-color: #9ED7D7 ; width: 150px ; font-weight: bold ; text-align:
left ; }

Ahora guarda esa hoja de estilo y en Dreamweaver, ve a vista previa y vers como ahora las secciones se
van hacia la izquierda (si ya tenas abierta la ventana del navegador con la vista previa, pulsa en el
navegador en "Actuaizar").
Ahora se ve as:

261

Pero an no queda perfecto. Deberia quedarse an ms pegado a la izquierda, verdad? mmmm... Eso
tiene arreglo. Lo vemos en la pgina siguiente.

Eliminar el margen de la lista del men

Como puedes imaginar, esto lo vamos a hacer tambin en la hoja de estilo. Normalmente, todo lo
referente al "contenido" de una pgina web, se hace en el cdigo HTML, mientras que lo relacionado
con el "aspecto" que han de tener los elementos de la pgina se retoca o define en la hoja de estilo. Esto
es un buen mtodo para asegurarse de que se vea todo igual de bien con cualquie navegador.
Las etiquetas que hemos usado para contruir la lista del menu, son <LU> y <LI>. Ambas tienen un estilo
ya definido en cuanto a margenes, el punto negro redondo que aparece ante cada elemento de la lista,
etc. Como cada uno tiene definido un margen (por defecto aparecen con un margen a la izquierda)
nosotros mediante la hoja de estilo vamos a quitarselo.
Existen dos tipos de margenes, el margin y el padding. Uno es el espacio que se deja entre el contenido
del elemento y el texto que contiene, mientras que el otro se refiere al espacio que hay que dejar entra el
contenido y el exterior, pero esto lo veremos ms adelante, pues es algo complicado.
Por ahora, es suficiente saber que los elementos <LU> e <LI> tienen un margen preestablecido que
vamos a anular desde la hoja de estilo.
Te explico como se define el margen.
margin: apx bpx cpx dpx
Como ves, la palabra para definir el margen es "margin" y va seguido de dos puntos, ms el margen que
deseamos dejar arriba (a), a la derecha (b), por abajo (c) y a la izquierda (d), seguido cada uno de px que
significa pixel.
Luego en nuestro caso, vamos a poner en la hoja de estilo una nueva linea al final, donde escogeremos
una cifra de 18px para el margen izquierdo (d) y un cero para el resto (arriba, abajo y derecha). Lo malo
es que hay navegadores que no hacen caso al margin, y otros no lo hacen al padding, de modo que
vamos a dar la mitad de 18 a cada valor para obtener unos resultados similares en cualquier navegador.
La lnea ha de quedar as:
ul {margin:0px 0px 0px 9px; padding: 0px 0px 0px 9px ; }
No separes nunca el nmero del px, es decir no pongas 9 px, sino 9px siempre. Si ahora guardais la hoja
de estilo, la plantilla queda de esta forma:

262

Y esto si que parece ya ms un men, no? Con esto ya te tienes que estar dando cuenta de lo fcil que va
a ser cambiar cualquier cosas desde la hoja de estilo. Si un dia prefieres otro margen, otro color, o lo que
sea, bastar con cambiar una sola palabra de la hoja de estilo y todas las pginas de la web varian
automticamente. No te parece genial este invento? A mi s.
Vemos ahora como crear los enlaces del men? Pues vamos all.

La ventana de Propiedades del Dreamweaver

Una pgina web sin enlaces no tiene mucho sentido verdad? Vamos en este apartado a crear los vnculos
del men. En principio no podra ser posible, pues cada enlace va a parar a una pgina de nuestra web
que an no existe, pero no podemos crearlas an porque no hemos terminado la plantilla (es lap
pescadilla que se muerde la cola...), pero vamos imaginar que existen y vreamos los enlaces
correspondientes. Ms tarde podremos terminar de arreglarlo.
En este caso vamos a usar el Dreamweaver para crear los vnculos o enlaces, o hipervnculos (cada uno
le llama de un modo ;) ).
Para ello usaremos la ventana de "Mostrar Propiedades" del Dreamweaver. Para abrirla (imagino que
an tenis abierta la ventana de la plantilla en el Dreamweaver), hay tres caminos. Una es pinchar en el
men superior del Dream, donde pone "Ventana" y escoger "Mostrar Propiedades". Otra es pulsar la
tecla "control" y sin soltarla, pulsar despus "F3". El tercer modo es decirle al Dreamweaver que nos
muestre un pequeo botoncillo en la parte inferior para abrir y cerrar esa ventana . Os explico cmo
hacerlo.
263

Pulsar en "Edicin" + "Preferencias" para abrir la ventana de preferencias del Dreamweaver:

Sigue el orden. Pulsa en "Paletas Flotantes" (1), luego en el signo " " (2), despus en "Propiedades"
(3) y por ltimo en "Aceptar" (4) y aparece un botn como ste en la parte inferior derecha de la ventana
del Dreamweaver. Ahora es mucho ms cmodo abrir y cerrar cuando nos haga falta.

Seguimos en la pgina siguiente. Esto se pone interesante de nuevo...

Creando enlaces en el men de la web

Una vez que sabemos acceder a la ventana de "mostrar Propiedades" del Dreamweaver, podemos ya
aprender a crear enlaces o vnculos (es lo mismo) en el men de nuestra pgina web.
Para comenzar, abrimos la pgina "plantilla1.html" con el Dreamweaver y en la vista de diseo (no en la
de cdigo HTML) seleccionamos todo el texto de la primera seccin del men principal, tal que as:

264

Ahora, con ese texto seleccionado, abrimos la ventana de "Mostrar Propiedades" con el botn
pulsando Control + F3) y aparecer dicha ventana.

(o

En ella aparecen muchas opciones, pero las iremos viendo conforme nos haga falta. As ser ms fcil
memorizar cada una de ellas.
En principio, a travs de esta ventana vamos a definir ciertas propiedades al objeto seleccionado, en este
caso como tenemos seleccionado el texto de la primera opcin del men de nuestra web, le podemos dar
propiedades.
Vamos entonces a crear un enlace para este texto. Es decir, vamos a hacer que al pulsar sobre este texto,
el navegador se dirija a una pgina distinta que, en este caso no existe (an no la hemos creado) pero
existir pronto.
Para ello no tenemos ms que escribir el nombre de la pgina enlazada en el cuadro donde pone Vnculo.
Pero qu ponemos exctamente. Pues suponiendo que la pgina enlazada se llamara formacion.html
(recuerda, no pongas nunca maysculas ni acentos ni guiones bajos ni espacios en blanco en el nombre
de los archivos de tu web), el cuadro ha de quedar as:

Ya est. La ventana de Propiedades podemos cerrarla pulsando de nuevo Control + F3 o el botn

correspondiente. Ahora haz lo mismo para el resto de las secciones del men. A no ser que seas
265

espabilado y para que podamos seguir las lecciones bien, para el ejemplo que ests haciendo pon el
mismo nombre de archivo que yo si lo deseas, para no liarte en las lecciones siguientes.
Imaginaremos que hemos optado por llamarlas as (voy a usar una lista con <UL> e <IL> para hacer la
lista de aqu abajo, je je je):

formacion.html
historia-del-grupo.html
conciertos.html
discos-editados-en-directo.html
discos-editados-en-estudio.html
proximos-proyectos.html
contacto.html
libro-de-visitas.html

Como ves, no hay ni acentos, ni espacios, ni nada raro y adems para acordarme de sus nombres los he
llamado igual que las opciones. Para los nombres de los archivos de las subsecciones he puesto el
nombre de su seccin seguido del nombre de la subseccin y para la seccin Discos editados no he
colocado enlace, pues va a ser un simple ttulo, sin vnculo.
Quieres ver el cdigo HTML que he usado para hacer esta lista?
Si ahora hacemos una vista previa de la plantilla, veremos que queda as:

Sigamos!
266

Definir estilos para los enlaces del men de la

web
An no hemos terminado con el men. Vamos a darle un toque ms avanzado usando la hoja de estilos.
Ya sabeis que usar la hoja de estilo significa que ser fcil, ya lo habis visto antes.
Tras vuestras muchas peticiones, os explico como eliminar el subrayado de los enlaces y como hacer que
estos cambien de color cuando se pasa el ratn sobre ellos, entre otras cosas. Es sencillsimo y funciona
en todos los navegadores (como todo lo que os explico). Veamos.
Al igual que los prrafos se definen con la etiqueta <P> ("P" de Prrafo), los enlaces se definan con la
etiqueta <A> ("A" de... s, de... esto. . . . mmm, Ah! de All va el enlace!). Por tanto, si queremos
cambiar sus caractersticas lo haremos creando una nueva lnea en la hoja de estilos, que empezar por la
letra "A", seguido de corchetes con las caractersticas dentro.
Las caractersticas que le podemos definir a un enlaces son casi las mismas que a un texto (de hecho es
un texto..), como por ejemplo:
el tamao de la letra: TEXT-SIZE: 12px ; el que aparezca en negrita: FONT-WEIGHT: bold ; un color
de fondo: BACKGROUND-COLOR: red ; que aparezca subrayado: TEXT-DECORATION: underline ;
la alineacin que queremos darle: TEXT-ALIGN: center ; etc, etc.
Adems, podemos definir las caractersticas que han de tener los enlaces en cualquier caso (dentro de A
{....}). o bien las que han de tener en ciertos momentos, como cuando el enlaces ha sido visitado, cuando
se pasa el ratn sobre l, etc. Vamos a verlo ms detalladamente.
Hay cuatro estados posibles para un enlace:
1.- Para los estados normales, sin haber sido visitado antes y sin el ratn encima de l
En este caso, se definen sus caractersticas con:
A:link {......}
2.- Para los enlaces que han sido visitados anteriormente por el visitante
A:visited {......}
3.- Para cuando el ratn est encima del enlace, aunque sin el botn apretado
A:hover {......}
4.- Cuando finalmente el enlace est siendo pulsado
A:active {.........}

267

Tenemos dos alternativas posibles, o bien definir propiedades solo usando A {.....}, en cuyo caso las
propiedades declaradas funcionarn siempre, haga lo que haga el ratn, o, declarar estados diferentes
segn lo que haga en ratn, en cuyo caso se deben colocar en la hoja de estilo TODOS los cuatro
estados, en ese orden aunque en alguno de ellos no definamos nada. Han de estar todos y en ese mismo
orden.
Para nuestro ejemplo, queremos que siempre estn en negrita, pero no es necesario ponerlo aqu, pues ya
habiamos definido la propiedad negrita en la hoja de estilo para la celda tipo C1 (recuerda, td.c1 {.....}).
Si hubieramos tenido que definirla lo tendriamos que haber hecho en la parte A {....}, pues es donde va
todo lo comn a los cuatro estados.
Queremos que los enlaces aparezcan sin subrayado, salvo que si el ratn pasa por encima del enlace,
luego pondremos, por ahora:
A {text-decoration: none}
A:link {}
A:visited {}
A:hover {text-decoration: underline}
A:active {}
Queremos que sean de color azul siempre, pero rojo si tiene el ratn encima o est siendo pulsado, por lo
que el cdigo anterior ser ahora as:
A {text-decoration: none ;}
A:link {color:blue ;}
A:visited {color:blue ;}
A:hover {color:red ; text-decoration: underline ;}
A:active {color:red ;}
Por supuesto esto suceder no solo para los enlaces del men sino para todos los que aparezcan en la
pgina. Ya aprenderemos a hacer distinciones, es decir, un estilo para cada tipo de enlace.
Segn lo anterior, la hoja de estilo ha de ser ahora as:
table.ancho99 {width:99% ;}

td.a1{ background-color: white ; width: 150px ; text-align: center ; }

td.a2{ background-color: white ; text-align: center ; }
268

td.b1{ background-color: #0EBEBA ; width: 150px ; font-weight: bold ; text-align: center ; }

td.b2{ background-color: #0EBEBA ; font-weight: bold ; color: #000080; text-align: center ; }
td.b3{ background-color: #0EBEBA ; width: 50px ; text-align: center ; }

td.c1{ background-color: #9ED7D7 ; width: 150px ; font-weight: bold ; text-align: left ; }

td.c2{ background-color: #F6DA98 ; text-align: justify ; }

td.d1{ background-color: #0EBEBA ; width: 50px ; text-align: center ; }

td.d2{ background-color: #0EBEBA ; font-weight: bold ; text-align: center ; }
td.d3{ background-color: #0EBEBA ; width: 50px ; text-align: center ; }

td.e1{ background-color: white ; width: 150px ; font-weight: bold ; text-align: center ; }

td.e2{ background-color: white ; font-weight: bold ; text-align: center ; }
td.e3{ background-color: white ; width: 150px ; font-weight: bold ; text-align: center ; }

ul

{padding: 0px 0px 0px 9px; margin:0px 0px 0px 9px; }

{text-decoration:none ;}

A:link

{color:blue :}

A:visited

{color:blue ;}

A:hover
A:active

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

{color:red ;}

Y tambin puedes ver como ha quedado la plantilla por ahora. Recuerda que tenemos un Curso de Estilo
CSS en esa web!
269

Definir estilos para los sub-apartados del men

de la Web
Si recordis, an nos falta darle ms margen a los dos subapartados llamados "...en Directo" y "...en
Estudio", as que vamos a hacerlo ahora.
En las primeras pginas de esta leccin hemos definido un margen para la etiqueta <UL> (para la lista) y
ahora queremos definir un estilo para "algunos" apartados de esta lista. Al igual que UL define en
HTML un listado general, la etiqueta LI define cada elemento de este listado. Podriamos definir un
margen mayor para LI, pero en este caso todos tomarian este margen y nosotros solo queremos que lo
tengan dos de ellos.
Lo que haremos entonces es inventar un tipo de elemento de lista concreto, al que le pondremos un
nombre, definiremos las propiedades que deseamos para estos elementos especiales y despues
indicaremos en el cdigo HTML, qu elementos de la tabla tendrn estas caractersticas. Puede sonar
lioso, pero paso a paso se entiende muy bien (espero..).
Para empezar, creamos este tipo de elemento al que llamaremos sub-apartado. Date cuenta que no he
usado ni espacio, ni guin bajo, ni acentos, ni maysculas, ni nada raro.
Como queremos que tenga un margen a la izquierda algo superior que el resto de elementos de lista,
especificaremos este nuevo margen as:
IL.sub-apartado {text-indent: 60px ;}
donde LI es la etiqueta de elemento de lista, y el punto seguido del nombre, est indicando que no se
trata de todos los elementos de la lista sino solo los que se llamen sub-apartados, es decir, los que sean
de esa clase. El text-indent en una caracterstica de estilo CSS que significa que queremos dejar un
espacio de 60px (60 pixeles) al principio del prrafo. Realmente es parecido a hacer un margen a la
izquierda.
Escribimos eso en la hoja de estilo, la guardamos y hacemos vista previa de la plantilla, para ver que ha
ocurrido.
Vaya, no ha ocurrido nada. Por qu?.... Porque aunque hemos definido bien esta clase de elemento de
lista, no le hemos indicado a la pgina qu elementos son de esa clase. Esto hay que hacerlo en el cdigo
HTML de la pgina plantilla.html del siguiente modo:
Abrimos la plantilla y nos vamos a la vista de cdigo pulsando en el botn
cdigo las lneas siguientes:

. Buscamos dentro de ese

<LI><A href="discos-editados-en-directo.html">En Directo</A></LI>

<LI><A href="discos-editados-en-estudio.html">En Estudio</A></LI>
Y las transformamos en estas otras:
270

<LI class="sub-apartado"><A href="discos-editados-en-directo.html">En Directo</A></LI>

<LI class="sub-apartado"><A href="discos-editados-en-estudio.html">En Estudio</A></LI>
Como ves, hemos aadido unas palabras para hacerle saber a la pgina que no se trata de elementos de
lista normales, sino que son de la clase sub-apartado (class="sub-apartado"). Creo que es bien sencillo.
Ahora podemos ver una vista previa de la plantilla, para ver que pasa.

Ufff, vemos que la separacin es tan grande que se nos estropea la estructura, de modo que le ponemos
un margen menor que el anterior en la hoja de estilo. As que la abrimos y ponemos 20px en lugar de
60px:
LI.sub-apartado {text-indent: 20px ;}
Ahora que est corregido, volvemos a guardar la hoja de estilo para que los cambios hagan efecto y
conseguimos esta otra cosa.

Esto s que nos vale. Y sin tocar para nada la plantilla, no es genial?
La Hoja de estilo (estilo2.css) queda entonces as:
table.ancho99 {width:99% ;}

td.a1{ background-color: white ; width: 150px ; text-align: center ; }

271

td.a2{ background-color: white ; text-align: center ; }

Recuerda que si has puesto nombres demasiado largos en el men y estos no caben, puedes aumentar el
ancho de la celda del men poniendo una cifra mayor para la anchura en la hoja de estilos, es decir, en
lugar de poner:
td.c1{ background-color: #9ED7D7 ; width: 150px ; font-weight: bold ; text-align: left ; }
pondramos, para una anchura de 180 en lugar de 150px, lo siguiente:
td.c1{ background-color: #9ED7D7 ; width: 180px ; font-weight: bold ; text-align: left ; }

HTML, El cdigo. Curso de HTML Paso a Paso

Lo que hace el FrontPage, Dreamweaver o cualquier otro programa de esos que te ayudan a hacer
pginas, es traducir lo que vosotros queris a cierto cdigo llamado HTM o HTML. En un principio las
pginas se hacan directamente en este cdigo, hasta que surgieron programas como el mencionado
antes, o el Dreamweaver del que espero hablaros pronto cuando lo domine, je je je).
No obstante, es recomendable conocer, al menos, algunos aspectos bsicos de este cdigo, pues nos
permitir hacer muchas mejoras en nuestra web, como por ejemplo, mejorar nuestra posicin el los
buscadores, insertar con xito publicidad, contadores, estadsticas y foros, y otras cosillas que os contar
conforme vayamos avanzando en esto.
Debido a que ya algunos de vosotros conoce los principios bsicos de este lenguaje y me peds ciertos
cdigos para hacer distintas cosas, ir elaborando la leccin bsica y la seccin de cdigos especficos a
la vez, para que ni unos ni otros os desesperis mucho esperndome. De todas formas al ser un peln ms
complicado que el funcionamiento de programas como el FrontPage, necesitar explicarlo con ms
cuidado y por tanto, tambin necesitar ms tiempo y ms paciencia por vuestra parte.
Aunque os pueda parecer en principio algo muy etreo y complicado, os recomiendo que le deis un
repaso a estas lecciones, pues os abren un gran abanico de posibilidades. Si habis seguido las lecciones
de "CmoCrearTuWeb" seguro que os habris encontrado con estos cdigos, por ejemplo, cuando os
expliqu lo de los Metatags, lo de los Contadores, etc, de modo que tampoco os resultar demasiado
raro.
Os recomiendo tambin que a la vez que os metis en esto del HTML os miris tambin el tema de las
Hojas de Estilo, pues no solo son parecidos (a grandes rasgos) sino complementarios, de modo que
seguramente os convenga hacer ciertas cosas en HTML y otras en CSS (Hojas de Estilo). A la larga lo
agradeceris mucho.
Bueno, sin ms rollo, vamos palante y veris que facilito es y el gran provecho que se le puede sacar a
esto.

La Estructura de una pgina Web en HTML.

272

Ms de una vez os habris tropezado, bien por curiosidad o bien por error al pulsar el boton equivocado,
con una pantalla lleeeena de numerajos y letruchas que ni por asomo parecen las tripas de una web. Los
mas aventureros habris entrado en esa sala prohibida para insertar algunos fragmentos de cdigo para
vuestro contador, estadsticas, etc, pensando "como esto no chute....como me cargue mi querida
pagina...va a ver ese Jorgens lo que es bueno" je je je. Pues bien, vamos a desmenuzar la estructura de
una pagina web para ir perdiendole el miedo.
Toda pgina web, (en lo sucesivo, al mencionar pgina web, me referir a las basadas en el HTML), por
complicada que parezca, se divide en dos partes bien diferentes a las que llamaremos Cabecera (HEAD)
y Cuerpo (BODY). Adems, todas empiezan y acaban con la palabra mgica HTML. Para que os hagis
una idea, esto sera una pgina web con todas las de la Ley, eso si, vacia.
<HTML>
<HEAD>
</HEAD>
<BODY>
</BODY>
</HTML>

Buscando un simil, podramos decir que todo el cdigo va metido en un armario llamado HTML que
tiene dos compartimentos separados, uno llamado HEAD y otro llamado BODY.
El cdigo correspondiente a la cabecera (HEAD) tendr que ir siempre entre <HEAD> que indica inicio de
la cabecera, y </HEAD> que indica el fin de la cabecera (se diferencian por la barra que tiene delante el
que indica fin: / ).
Lo mismo ocurre con el Cuerpo (BODY), cuyo cdigo ha de estar siempre entre las lneas <BODY> que
indica comienzo del Cuerpo, y la lnea </BODY> que indica su final. Con esto ya os habris dado cuenta
de que la barra "/" indica final de una parte, no?
Existen cosillas que SOLO podremos meter en el encabezado y otras cosas que solo funcionarn en el
cuerpo, pero eso lo iremos viendo conforme avancemos.
Os muestro abajo el cdigo de una pgina web vacia, pero con algunas cosillas ms. Este cdigo es el
que tiene una pgina de esas que creais con FrontPage, Dreamweaver o programas por el estilo, nada
ms empezar, es decir, cuando an no habis metido nada en ella.
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>
<body bgcolor="#FFFFFF">
</body>
273

</html>
Vemos en este cdigo las palabras mgicas comentadas antes, HTML, HEAD, BODY y sus
correspondientes cierres con la barra "/". A estas palabras y a algunas otras las llamaremos comandos, y
a lo que vaya encerrado con los simbolos < y > etiquetas.
Aparecen algunas cosillas nuevas. Podemos ver algunas lneas dentro de la cabecera, como son:
<title>Untitled Document</title> y
<meta http-equiv="Content-Type"
content="text/html; charset=iso-8859-1">

La primera es la lnea que indica el ttulo de esa pgina y la segunda es una de las famosas Metatags, que
se utilizan para ser encontrado en los buscadores y que ya hemos visto en la seccin "Las Metatags".
Con lo que ya hemos visto, sabramos facilmente ponerle un ttulo a cada una de nuestras pginas, no?
Solo habra que entrar a ver el cdigo de nuestra pgina y escribirlo entre los comandos <title> y
</title>. Este ttulo es distinto para cada una de las pginas que forman nuestra web y es lo que
aparece escrito en la barra superior del navegador (en la franja azul). Eso si, si usais pginas con marcos
o frames, solo se ver en esa barra el ttulo de la pgina principal, pero a pesar de eso, conviene
ponerselo a todas.
Otra cosa que nos puede llamar la atencin es lo que aparece justo al lado de la etiqueta <body>. En el
ejemplo que os he puesto aparece:
<body bgcolor="#FFFFFF">

indica el color de fondo y #FFFFF es el cdigo de un color en concreto. Vemos que se pueden
escribir algunas cosillas antes de cerrar la etiqueta del body con la flechita >.
bgcolor

El resultado de ese cdigo, como antes coment, es NADA, pues an no tiene nada visible, a parte de un
ttulo en la parte superior del navegador y un color de fondo (en este caso #FFFFFF, blanco), pero como
ireis adivinando, ya sabemos que el ttulo y los metatags van en el encabezado de las pginas, es decir,
entre <HEAD> y </HEAD>.
No estara mal que os asomrais a ver el cdigo de alguna de vuestras pginas y reconocierais los
comandos vistos, distinguiendo el encabezado y el cuerpo, observando como empieza y acaba con
<HTML> y </HTML> respectivamente, verificando que el ttulo es el que queris para esa pgina y
finalmente, que todos los Metatags estn dentro del encabezado, es decir, entre <HEAD> y </HEAD> y no
fuera de este, donde carecen de sentido.
Por supuesto, adems del ttulo y las Metatags, pueden haber ms cosas en vuestra pgina, pero las
veremos ms adelante. Recordar que, ahora que sabis donde introducir estos Metatags, quizs sera un
buen momento para leeros la seccin "Las Metatags" en la seccin "Promocin" y poner la pgina en
condiciones aprovechando de paso para familiarizaros con lo explicado.

Como insertar Texto

274

Con lo explicado antes seguimos teniendo una pgina vacia. Cada tipo de elemento que vamos a insertar
tiene una forma distinta. Os explico algunos.

Los prrafos
Lo ms bsico que podemos insertar en nuestra nueva pgina, an en blanco, son palabras. Vamos a ver
como se pone, en cdigo HTML un prrafo.
En primer lugar deciros que todos los elementos (o casi) de una web, (me reiero a todo lo visible, o casi)
ir dentro del BODY que ya conocis, es decir, entre <BODY> y </BODY>.
Para escribir un prrafo, lo haremos dentro de esa parte encerrando lo que queremos escribir entre los
smbolos <p> y </p>.
Como vis, el primero indica comienzo de prrafo (de ah la "p" de prrafo) y el segundo indica el final,
pues lleva la barrita "/".
Por ejemplo, si queremos que en nuestra web aparezca el siguiente prrafo:
Hola amigos, esta es mi nueva Web
tendremos que escribir, entre <BODY> y </BODY> la siguiente lnea:
<p>Hola amigos, esta es mi nueva Web</p>

de forma que el ejemplo anterior quedara como:

Como vis, en este ejemplo se ha puesto ya el ttulo a la pgina. En concreto se le ha llamado "Mi Nueva
Web".
Si ahora queris meter otro prrafo, simplemente aadid otra lnea ms antes o despus de la escrita
antes, segn queris que la nueva aparezca encima o debajo del prrafo antiguo.
Por ejemplo, si quiero que antes del prrafo "Hola amigos...." aparezca la palabra "BIENVENIDOS" el
cdigo HTML debera quedar como sigue:
275

Aunque a veces funcione sin l, no olvideis nunca indicar el final del prrafo con </p>. Os evitar
problemas ms adelante.
Ver como queda la cosa hasta ahora.
Si una vez abierta la ventana le dais a "Ver" y luego en "Cdigo Fuente" veris el cdigo HTML de esa
pgina. Por supuesto, debera ser idntico al escrito arriba.
Si os va gustando todo esto seguidme a la pgina siguiente.

Cmo insertar un Texto Resaltado

Con el tag <p> (as se llama eso, que se le va a hacer...) ya sabemos poner un texto simple. Pero quizs
en algn momento queramos escribir en negrita, o subrrayado, o cursiva, etc, etc, verdad? Pues tambin
para esos estilos existe un "tag" determinado.

Textos en Negrita
Si encerramos un texto entre <b> y </b> ste aparecer en negrita. El tag <b> representa a la propiedad
"bold" que significa negrita.
Podemos aplicar a la vez los tags <p>, <b> y cualquiera de los que se explican abajo.
Un ejemplo de un prrafo simple con una palabra en negrita, la palabra "negrita":

276

Ver Ejemplo
Recuerda que para insertar un prrafo debes incluir esa lnea entre <Body> y </Body>.

Textos en Cursiva
Si encerramos un texto entre <i> y </i> ste aparecer en cursiva. El tag <i> representa a la propiedad
cursiva. Al igual que "b" representa "bold", "i" representa "italic" que significa cursiva (lo se porque me
lo han dicho colegas del foro CCTW je je je).
Podemos aplicar a la vez los tags <p>, <b>, <i> y cualquiera de los que se explican abajo.
Un ejemplo de un prrafo simple con dos palabras en cursiva, las palabras "cursiva" y "ves":

Ver Ejemplo

Textos Subrayados
Si encerramos un texto entre <u> y </u> ste aparecer subrayados. El tag <u> representa a la propiedad
subrayado. Al igual que "b" representa "bold", "u" representar.... yoques.. si lo sabes me lo dices
(underscore quizs?).
Podemos aplicar a la vez los tags <p>, <b>, <i> y <u>, entre otros.
Un ejemplo de un prrafo simple con un trozo subrayado:

Ver Ejemplo

Textos con Varios Estilos a la Vez

277

Como os he dicho antes, podemos combinar todos estos estilos HTML. Eso s, debemos respetar una
cosilla. Espero explicarla bien, que no se no se...
A ver... "no podemos cerrar una etiqueta fuera de la etiqueta que la contiene". Lo veis? No es tan fcil de
explicar, je je je. No os habis enterado no? Bueno, vamos a ver si con un ejemplillo...
Mirad esta lnea:
<p>Hola amigos y amigas</p>

Todo esto es un prrafo, pues est encerrado entre <p> y </p>. Vamos a poner todo en negrita:
<p><b>Hola amigos y amigas</b></p>

Ahora todo est en negrita. Esto est bien, pues hemos cerrado la etiqueta "b" dentro de la que la
contiene, es decir, dentro de la etiqueta "p", de prrafo.
Vamos a ver un ejemplo mal hecho:
<p><b>Hola amigos y amigas</p></b>

Esta lnea est mal, pues se ha cerrado la etiqueta "b" fuera (detrs) de la etiqueta que la contiene, es
decir, fuera de "p".
Vamos a ver un tercer ejemplo mal hecho:
<p>Este <u>es un <b>ejemplo de
etiquetas</u></b> en html</p>

Esta lnea est mal hecha, pues hemos cerrado "b" fuera de "u". Como "b" empieza dentro de "u", debe
cerrarse tambin dentro de "u".
El mismo ejemplo pero bien hecho sera:
<p>Este <u>es un <b>ejemplo de
etiquetas</b></u> en html</p>

Ver Ejemplo
Espero que os hayais aclarado con esto. Sabed que las etiquetas pueden escribirse en maysculas o
minsculas, da lo mismo. Adems, todas estas deben cerrarse siempre. No vale abrir una etiqueta, por
ejemplo <p> y no cerrarla al fina con </p>. Es muy posible que a pesar de no cerrarla, parezca que
funciona, pero os recomiendo cerrarlas siempre para evitar problemas a la gente que os visite con otros
navegadores distintos al vuestro.

Cmo insertar Comentarios

278

Para insertar un comentario solo necesitamos encerrarlo entre estos dos smbolos o etiquetas:
<!--->

Este es el smbolo que indica inicio de comentario

Con esto se termina el comentario

Por ejemplo, esto que sigue es un comentario:

<!-- esto es un comentario -->

Otro ejemplo es este, donde vemos que podemos meter ms guiones por si queremos dejarlo ms visible:
<!----- esto es un comentario ----->

pero como mnimo, debe tener los dos guiones tanto al principio como al final, adems de <, > o !.
Los comentarios no aparecen en la pgina cuando la visita alguien. En realidad no hacen nada de nada
de nada. Solo sirven para que el autor ed la web, cuando mire su cdigo, sepa qu es cada trozo de
cdigo. Es decir, podemos insertar comentarios en alguna parte del cdigo HTML de nuestra pgina para
saber qu hace ese trozo.
Por ejemplo, si algn da insertamos un contador en nuestra web (lo haremos, lo haremos..) se nos
proporcionar un trozo de cdigo para que al insertarlo en la pgina aparezca ese contador. Podemos
entonces poner al principio y al final de ese cdigo algunos comentarios indicando, por ejemplo, "inicio
de codigo contador" y "final de codigo contador".
De ese modo, si pasado el tiempo revisamos la pgina, es posible que ni nos acordemos de qu es ese
trozo de cdigo tan raro. Pero al haber puesto esos comentarios podremos acordarnos facilmente.
Vamos a aplicar esto. Podemos poner en una pgina un comentario para recordar que la parte <HEAD>
o cabecera es donde debemos insertar la "metatags". El da que las insertemos, podemos quitarlo, pero
mientras, nos recordar dnde hay quie ponerlas. El cdigo sera el siguiente:

Ver Ejemplo
279

En Dreamweaver es muy fcil identificar esos comentarios, pues al ver el cdigo de cualquier web con
l, los comentarios aparecen en gris claro.
Otra utilidad que tienen los comentarios es la siguiente. Si deseais anular algn trozo de vuestra web,
pero no queris borrar su cdigo, pues no sabis si ms adelante os har falta, o simplemente, por que
queris ver que tal se ve la web sin cierto elemento, solo tenis que encerrar todo ese trozo de cdigo
entre los smbolos de comentario y ese trozo quedar anulado.
Si ms tarde os arrepents, podis volver a ponerlo en funcionamiento sin ms que quitar los smbolos de
comentario. Util, no?
Por ejemplo, para evitar que en el ejemplo de aqu arriba (de la ventana de fondo blanco) aparezca la
frase "Bienvenidos", bastara con poner los smbolos de comentario al inicio y final de esa lnea, as:
<!-- <p>BIENVENIDOS</p> -->

Ver Ejemplo
y no aparecer en la web, aunque el cdigo an est en la pgina.
No olvidis cerrar siempre los comentarios.

CURSO DE ESTILOS CSS

Los Estilos CSS

Las Hojas de Estilo nos permitirn varias cosillas muy muy interesantes, a saber:

Nos ahorra tiempo a la hora de crear pginas.

Ls pginas pesan menos (ocupan menos Kbytes) por lo que su carga ser algo ms rpida.
Permite que las pginas se vean ms o menos igual en cualquier Navegador.
Podemos introducir algunos efectos determinados fcilmente sin tener que recurrir a cdigos
demasiado raros para los que empezamos en esto.
280

Estaremos a la "ltima" en diseo de Webs.

Nos os parece increible? Pues espero poder explicarlo todo bien clarito. Es algo complicado al principio,
si no lo has usado nunca, pero merece la pena acostumbrarse a l antes de ir cogiendo vicios.
Desafortunadamente, yo lo conoc tarde y me ha costado una semana poner la pgina a tono, pero si lo
conocis desde un principio la cosa es muy muy facil. Adems, explicado por m no tenis porqu tener
ninguna pega, je je je.
En las siguientes pginas os ir explicando su funcionamiento. A estas alturas ya sabris que pulsando
sobre las flechitas que aparecen abajo a la derecha podis ir pasando de pgina. Y para volver al menu
anterior pulsad en Menu Principal arriba a la izquierda.
Al final os propongo una serie de direcciones donde podris encontrar ms informacin al respecto..
Bueno, no me enrollo ms. Vamos a comenzar con todo esto. Os aseguro que os va a encantar. Alguna
vez os he mentido? je je je. Como siempre, paso a paso y si tenis cualquier duda, la insertais en el Foro
de Estilos que podis encontrar en el men de la izquierda, casi al final.
Suerte, Valor . . . Y al Toro!!!
Existen distintos modos de insertar los Estilos en una web. La eleccin de cada uno de esos modos
depende de las caractersticas de cada uno de ellos. Al final sois vosotros los que tendris que elegir que
modo utilizar, en funcin de lo que os indique en lo sucesivo.
En definitiva, podemos: 1.- usar los Estilos Predeterminados, 2.- redefinir estos estilos predeterminados
y acomodarlos a nuestro gusto, y por ltimo, 3.- crear nuevos Estilos.

Opciones de Estilo
Estilos CSS Predeterminados
Existen varios tipos de estilo ya definidos en cualquier navegador, es decir, todos los Navegadores los
conocen y no hay necesidad de especificarlos en nuestra pgina. Ejemplos de estos tipos de Estilos
Predeterminados son:
: Indica que las palabras contenidas entre esas etiquetas deben mostrarse en
Negrita. (Una etiqueta, para entendernos, es lo contenido entre <>, en estos casos son etiquetas

<b> loquesea </b>

<b> y </b>.
<p> loquesea <p>

: Indica que lo contenido entre esas etiquetas forman un prrafo con unas
propiedades de formato (una forma) predeterminadas.
<i> loquesea <i> : Indica que el texto entre las etiquetas debe ir en cursiva.
<BODY> ..... </BODY>: Indica que comienza el cuerpo de la pgina. Ente las propiedades que
lleva predeterminadas estan, un color de fondo blanco, ninguna imagen de fondo, etc. Por eso, si
queremos otro color o una imagen de fondo hay que decirselo aparte.
<H1> esto es un titulo </H1>: Indica que lo incluido ente esas etiquetas forman un ttulo
con unas propiedades predeerminadas.
y un monton ms, como <H2>, <H3>....<H6>, <pre>, <caption>, <yms y ms>.
281

Hay muchos ms, pero no quiero aburriros demasiado. Estos tipos (selectores) de Estilos no hace falta
definirlos, pues ya lo conocen todos los Navegadores. De modo que si, por ejemplo queris que una
parte del texto de vuestra web aparezca con aspecto de ttulo, no teneis ms que escoger entre los
distintos tipos de ttulo predeterminados, como los selectores H1, H2, etc. Si en cambio deseis que el
texto tenga apariencia de cdigo, usais los selectores <code> y </code> e introducs el texto deseado
entre ellos. Yo suelo usar el selector Code cuando escribo cdigo HTML, y se muestra de color azul y
con un tipo de letra especfica. De este modo me ahorro tener que definir el color, forma, etc cada vez
que quiera mostrar algo con ese aspecto.
Ahora no nos vendra nada mal realizar algn ejemplo para ver lo que os cuento. Iros al Ejemplo I (en el
men de la izquierda) y as veremos todo esto ms claro.
Posiblemente esto no os supone nada nuevo, pues todos habis puesto algn fragmento de texto en
negrita o cursiva alguna vez sin necesidad de conocer todo esto, pero confiad en mi. Esto os ayudar a
comprender mucho mejor las siguientes lecciones. Adems, el saber no ocupa lugar (bueno, eso
dicen...mi disco duro no piensa de la misma manera "er mu jodio", je je je... La enciclopdia Espasa
Calpe es otra excepcin que confirma la regla. ;)

Crear Nuevos Estilos CSS para tus Pginas Web

A veces la forma o apariencia que deseamos para nuestro ttulo no la conseguimos con ninguno de los
selectores predeterminados H1, H2, etc. Otras veces el prrafo definido por el selector <p> no es tampoco
el que queremos, bien porque deseamos unos margenes mayores, un tipo de letra diferente, cierta
sangria, etc. Una segunda opcin es redefinir estos Estilos Predeterminados a nuestro gusto o incluso
crear diferentes tipos de alguno de ellos, es decir, por ejemplo un tipo de prrafo centrado, otro tipo con
color de fondo blanco, etc.
En cualquier caso tenemos dos opciones, una buena y otra mala. La opcin mala es definir, cada vez que
queramos poner un ttulo a nuestro gusto, la forma deseada. O cada vez que empezamos un prrafo,
definir sus margenes, tipo de letra etc. Esto es un trabajo de chinos y ocupa un espacio que se puede
evitar con la opcin buena. No obstante, si solo vamos a usar ese tipo de formato una vez, puede
merecer la pena.
La opcin buena es variar las caractersticas de H1, de H2, de P o de cualquier otro selector de forma que
las nuevas caractersticas queden tal y como las definamos,sin necesidad de estar constantemente
definiendo el formato deseado.
Dentro de la buena opcin tenemos a su vez dos posibilidades. Una es hacer que el nuevo estilo
permanezca en todas las pginas que forman nuestra web y la otra es hacer que solo funcione en una o
unas pginas concretas, volviendo a las condiciones predeterminadas en el resto de pginas.
Para todas las pginas de la web: En mi caso, se correspondera a los ttulos de las secciones, los
fragmentos de cdigo, los parrafos, etc, etc. Como en todas o casi todas las pginas de mi web aparecen
estos elementos, es preferible definirlos una sola vez y que a la vez funcionen en todas y cada una de la
pginas.

282

Para una o dos pginas solamente: Si por ejemplo, vosotros tenis una web con 20 pginas y queris un
estilo determinado de formato, pero que solo usaris en una o dos de esas 20 pginas, quizs prefiris
definirla solo en esas pginas.
En las siguientes lecciones os muestro los pasos a seguir para estos dos casos. Mmmm os veo un poco
paliduchos... asustados..a punto de abandonar quizs? Venga, animo que ya queda muy poco para que
veis la verdadera utilidad de las Hojas de Estilo. Intentar hacerla ms amena (y graciosa si es posible
je je), pero es que hacer de esto un chiste... no lo consigue ni er Chiquito de la Calzada, je je je.

Estilos CSS para una sola pgina

Cuando queremos aplicar un estilo concreto a un elemento que solo aparecer en una o dos de nuestras
pginas, no es necesario (aunque tambin se puede hacer) incluirla en la Hoja de Estilo, sino que basta
con definirla en la propia pgina.
Por ejemplo, imaginaos que en una pgina de nuestra web queremos hacer una lista donde aparezcan, yo
que se, emm, los nmeros de telfono de nuestros amigos, y adems queremos que aparezan con un
fondo de color verde, con los nmeros en color blanco, en cursiva, negrita y con un tamao muy
grandote. (una tontera, pero para el ejemplo nos servir).
La opcin mala seria especificar para cada nmero de telfono todas esas caractersticas, lo cual sera
tedioso. Os voy a indicar como se hara usando los Estilos. No os indico como definir el color, tipo de
letra, fondo, etc para no agobiar. Eso os lo mostrar ms adelante.
En primer lugar escogemos un nombre para ese elemento (a este nombre se le llama selector). Le
llamaremos telefono, para ser originales. Esto es similar al selector rojo del ejemplo aquel que os puse al
principio de estas lecciones.
En segundo lugar hay que definir sus caractersticas (a esto se le llama declaracin).
Al conjunto de selector y declaracin se le llama a su vez Regla de Estilo o mejor dicho Regla CSS.
La regla CSS la incluiremos en la cabecera de la pgina, ya sabis, entre <HEAD> y </HEAD> e ir
encerrada entre las estiquetas <STYLE> y </STYLE>.
Os muestro ahora el aspecto del cdigo de una pgina que define el estilo telefono y lo usa en una lista.
No seais flojos, copiadlo en el NotePad o Block de Notas tal y como os he enseado y veris su utilidad.
Fijaos que lo que encierra el formato de .telefono no son parentesis ( ) sino corchetes { } (tecla "Alt Gr"
y las de al lado de la "", a la vez).
<HTML>
<HEAD>
<TITLE> Listin de Telefonos </TITLE>
<STYLE>
.telefono { font: italic bold 12px ;
background-color: green ;
color: white ; }
</STYLE>
</HEAD>

283

<BODY>
<p>Los telefonos de mis amigos: </p>
<p>Jorgito: <SPAN CLASS="telefono">968
<p>Martita: <SPAN CLASS="telefono">945
<p>Jaimito: <SPAN CLASS="telefono">676
<p>Pablito: <SPAN CLASS="telefono">606
</BODY>
</HTML>

123
321
987
123

456</SPAN></p>
654</SPAN></p>
654</SPAN></p>
456</SPAN></p>

VER RESULTADO
Como podris comprobar mirando el cdigo, en la Cabecera (entre <HEAD> y </HEAD>)se definen las
caractersticas o formato del selector telefono y en el Cuerpo (entre <BODY> y </BODY>) simplemente se
indica que cada nmero de telfono debe ser de esa forma, mediante la etiqueta <span
class="telefono">676 398 787</span>.
Daos cuenta de que aunque el selectos se define poniendole un punto delante (.telefono), a la hora de
indicar a un elemento que debe mostrase con ese tipo, el punto no se pone (...CLASS="telefono">)
aunque si que se escribe entre comillas.
Sin duda el cdigo se ha simplificado notablemente frente a la opcin mala. Adems, si un buen da
queremos que el tamao de letra de los telfonos sea distinto, o variar el color del texto o lo que sea, en
lugar de cambiar esas caractersticas para cada telefono, solo hay que variar el cdigo que hay entre
<STYLE> y </STYLE> lo cual es otra gran ventaja, no?
En este ejemplo se ve an mejor uno de los objetivos de las Hojas de Estilo: separar el contenido (que va
dentro del BODY) del aspecto que deben tener (que va dentro de STYLE). Como ya os he indicado
anteriormente, esto evitar que al visitar la pgina con otros Navegadores, la pgina se deforme o
aparezca de una forma rara (en el mejor de los casos).
Tened en cuenta que los elementos que definamos de este modo no los podemos usar en otras pginas de
nuestra web, a menos que los volvamos a definir en la cabecera de aquellas pginas de la misma forma
que lo hemos hecho. Si lo que queremos es poder usarlas en todas ellas definiendolas una sola vez
usaremos la segunda buena opcin que veremos a continuacin.
A que ya la cosa se va alegrando? Pues an no habis visto nada...

Estilos CSS para Toda una Web

Si al contrario de lo visto en la leccin anterior, existen elementos que van a ser utilizado en todas o casi
todas las pginas de nuestra web, como pueden ser ttulos, prrafos, o como hago yo cuando escribo
cdigo HTML en esta web (como por ejempo <este trocillo> que ya os es tan familiar), lo que ms
nos interesa es definirlo una sola vez y que todas las pginas de nuestra web lo capten de alguna manera.
Por supuesto podemos hacer como en la leccin anterior, es decir, definirlo en la cabecera para cada una
de las pginas mediante la etiqueta STYLE, pero adems de ser muy laborioso, si un buen da queremos
variar las caractersticas de un elemento, tendramos que hacerlo pgina a pgina.

284

Lo mejor en este caso es crear un archivo donde solamente irn las definiciones de los estilos (lo que
antes hemos llamado Reglas CSS, es decir, selectores y declaraciones). Luego, en cada pgina,
tendremos que incluir una pequea lnea que le indique donde est ese archivo y como se llama. (Esto es
algo parecido a lo que os comente en la seccin "Alternativa a Marcos" pero mucho ms facil y adems
vlido para cualquier servidor que utilicis, Terra, Tripod. etc...).
Esta tarea la podemos dividir en tres partes que son:

Creando Hojas de Estilo: Definicin de las propiedades de cada uno de los Estilos deseados
Asociando Hojas de Estilo: Indicar a una pgina que debe seguir las indicacciones de la Hoja de
Estilo situada en tl sitio.
Aplicando Hojas de Estilo: Aplica cierto estilo a cada uno de los elementos de una pgina,
prrafos, ttulos, etc.

Estas tres tareas se corresponden con las tres secciones siguientes, a las que podis acceder desde el
men de la izquierda.
Cuando controlis estas tres partes, el trabajo de contruccin de pginas ser mucho ms rpida, estaris
a la ltima en diseo, os evitaris calentaros la cabeza, cambiar el look de la pgina ser coser y cantar,
en definitiva . . . dominaris el mundo!! (o al menos, un buen cacho).

Creando Hojas de Estilo

Requisitos para crear una Hoja de Estilo CSS
Para crear la Hoja de Estilos vamos a utilizar el NotePad o Block de notas de Windows. De esta manera
comprenderemos su funcionamiento mejor que si nos la hace el FrontPage, DreamWeaver, etc. y nos
ayudar a familiarizarnos con los Estilos an ms.
Quizs esta seccin sea la ms laboriosa, no por su dificultad, sino por la cantidad de opciones que hay.
Por supuesto, antes de empezar a crear tipos y tipos de estilos, hemos de saber que estilos son los que
nos van a hacer falta.
Por ello, es necesario que antes de ponerse con esto, apaguis la luz de la habitacin, cerreis la puerta y
los ojos, os sentis comodamente y os imagineis como queris estructurar la web. Cuantos tipos distintos
queris crear. No obstante, ms adelante podis aadir ms tipos e incluso (y esta es la gran ventaja)
reformarlos fcil y rpidamente.
Os pongo el ejemplo que mejor conozco, el de CreaTuweb. En esta web hay unos cuantos tipos de
estilos distintos que os paso a comentar.

Tipo Titulo: Para mostrar los ttulos de algunas secciones he utilizado el estilo predeterminado
H1, pero lo he variado un poco, pues lo quera de color azul y con un tamao algo mayor.

285

Tipo Parrafo: Uso tambin el predeterinado pero reformado, pues deseaba que la letra tubiera
otro tamao, unos margenes a mi gusto y una sangra en la primera lnea (la sangra es que la
primera lnea est un poco metida dentro del parrafo, tal y como vis en los parrafos de arriba.).
Tipo Subttulo: Este no es predeterminado, sino que lo he definido por completo. Lo quera azul,
en negrita y subrayado entre otras cosas. Este tipo es el que uso en estas lneas.
Tipo enlace: Los uso para que aparezcan siempre de color azul y en negrita, y para que cuando
pongis el ratn sobre ellos se vuelvan rojos y verdes cuando pinchais sobre ellos. Estas dos
ltimas cosas no funcionan en el Netscape, o en versiones antiguas, pero la pgina se ve
correctamente a pesar de eso.
Tipo Cdigo: Esta basado en el tipo predeterminado "code", pero ligeramente variado a mi gusto.
Ya lo conocis, es con el que suelo mostrar los cdigos HTML.
Tipo Lista: es el usado en esta lista de tipos. Es tambin predeterminado pero reformado por mi
para darle unos margenes ms estrechos, un tamao de letra algo menor, etc.
Tipo Cuerpo o BODY: Lo uso ms que nada para dejar definido el fondo de pantalla, as me
ahorro de especificarlo en cada una de las pginas. Solo pongo BODY y ella ya sabe que tiene
que meterle el fondo de pantalla que le especifico en la Hoja de Estilo.
Tipo resaltado: Lo utilizo cuando quiero resaltar una palabra, como por ejemplo, esta palabra.

Por supuesto hay un montn de posibilidades ms, pero dependen de la imaginacin que le echeis cada
uno. Por ejemplo, podeis crear un estilo que haga que al aplicarlo a un parrafo, este se muestre en la
pgina con un color de fondo determinado, como por ejemplo este:
Hola amiguetes de CreaTuWeb. Esto es muy rpido de hacer con estilos. Sin ellos se puede hacer
tambin, pero creando una tabla, poniendole color de fondo, metiendo el texto, etc, etc. En fin, un rollo
que os podis ahorrar muy facilmente con los Estilos.
Como este estilo solo lo uso en esta pgina en concreto, en lugar de definirlo en la Hoja de Estilos, lo he
definido en la cabecera de esta pgina tal y como os he comentado anteriormente.
En las siguientes pginas os muestro como crear nuevos estilos y como retocar los ya predeterminados.
Ahora si que queda menos!!!

La Sintaxis del CSS

En la Hoja de Estilos que vamos a crear con el Notepad no hay que indicar nada ms que el estilo y su
definicin o ms tcnicamente hablando, el selector y su declaracin, que juntos componen la Regla
CSS.
El selector puede ser un nombre aleatorio inventado por nosotros, pero sin espacios intermedios ni
smbolos, ni guiones, ni nada. Todo seguido. En el caso de querer variar un estilo ya predeterminado, lo
escribiremos tal y como es.
En primer lugar se escribe el selector con un punto delante ( .miparrafo .mititulo
.titulocentrado .parrafofondoverde .resaltado etc, etc, etc) o en el caso de querer variar uno
de los predeterminados, solo su nombre ( p, pre, h1, code, etc).
Tras cada uno de esos selectores y sin preocuparnos demasiado en la cantidad de espacios en blanco que
pongamos entre ellos, pondremos la declaracin recogida entre corchetes { y }. Por cierto, se escriben
286

pulsando la tecla "Alt Gr" y a la vez las teclas que hay a la derecha de la "". Asi, mirad . . . . { . . .}. . .
{}{ , je je je.
Os muestro un ejemplo. Ms tarde os cuento el significado de lo que hay entre los corchetes.
.selector { propiedad1:valor1 ; propiedad2:valor2 ; propiedadX:valorX ;}
.resaltado { font-size: 14px ; font-style: italic ; color: red ;}
p
{ text-indent: 10px ;}

Como vis, entre los corchetes se pone cada propiedad (caracterstica), dos puntos y su valor seguido de
punto y coma para separar todo eso de la siguiente propiedad a definir.
Si en lugar de crear un nuevo estilo lo que queris es variar alguno de los estilos predeterminados, NO
pondremos el punto delante del selector. Por ejemplo, para que los parrafos aparezcan de color azul,
hariamos:
p { color: blue; }

Donde "p" es el selector predeterminado para los prrafos, "color" una propiedad que define el color
del texto de ese prrafo y "blue" es el valor que queremos darle a esa propiedad (azul, se entiende). El
punto y coma de la ltima propiedad que metamos entre los corchetes no es obligatoria pero si muy
recomendable. En cuanto a los espacios en blanco, poner tantos como queris, de forma que la Hoja de
Estilo quede fcil de ver, es decir, clarita. Obviamente si lo ponis todo junto os liaris ligeramente a la
hora de querer retocarla, pues los valores no se verian bien. Un buen mtodo es poner en lnea los
primeros corchetes, tal y como vis en el ejemplo de arriba, pero eso ya es cosa vuestra, cuestin de
manias.
Ya solo nos falta conocer cuantas propiedades distintas hay, que valores pueden tener cada una de ellas y
para que sirven. Pero eso lo vemos en la siguiente leccin. Verdad que esto est requetefcil? Si hasta yo
se hacerlo!! Vamos que ya queda menos.

Las Propiedades de Estilo CSS

A los distintos elementos que pueden aparecer en una pgina web se le pueden definir distintas
propiedades las cuales, a su vez pueden tomar distintos valores. A continuacin os muestro una lista de
las propiedades ms utilizadas, su funcin y forma de definirlas.

Propiedades de Estilo CSS para las Fuentes y

Textos
Se pueden aplicar a todos los textos, inlcuidos los enlaces de los cuales se habl en un apartado especial
para ellos. Para definir un estilo para un texto podemos usar, entre otros, los siguientes atributos: fontfamily, font-style, font-weight y font-size.
1.- La propiedad font-family se usa para determinar la fuente con la que se quiere representar el texto.
Se pueden indicar varias de modo que si el visitane no dispone de la primera, se pasa a comprobar la
287

segunda y as sucesivamente hasta encontrar una. De todas formas, si usais fuentes estandar o comunes
no debe haber problema, con lo que bastar con poner una o dos solamente.
.parrafouno { font-family: Arial,Verdana,Helvetica,sans-serif ; }

Fijaos que cada tipo de fuente est separada por una coma.
2.- Para poner el texto en cursiva se usa la propiedad font-style, cuyo valor es italic para cursivas y
normal para . . pues para normales, claro.
.parrafodos { font-style:italic ; }

3.- Con la propiedad font-weight definimos el grosor de la letra y puede tomar los valores bold,
bolder, 900, 800, ....300, 200, 100 y lighter. El primero es el mas "negrito" y el ltimo el
ms grosor ms fino. Un ejemplo para un texto en negrita sera:
.textonegrito { font-weight:bold ; }

A veces no se diferencian bien los valores muy cercanos (200 y 300 por ejemplo), aunque eso depende
del Navegador.
4.- Para definir el tamao del texto usaremos la propiedad font-size indicando su valor y sin olvidar
nunca la unidad en la que se mide (pixeles, puntos, etc..). Si definimos un tamao, en unidades fijas el
visitante las ver tal como hemos indicado, a pesar de que elija ver el texto mayor desde su navegador,
por lo que habr que escoger un tamao bien estudiado, evitando as que visitantes que usen un tamao
de pantalla grande tengan que coger los prismticos para leer nuestra web, xD. Os explico el uso y las
distintas unidades que podemos emplear en el partado "Las Unidades".
Resumiendo: Si vamos a definir todas estas propiedades para un texto, quizs os venga bien resumirlo
un poco. Esto se puede hacer de la forma siguiente y cuidando este mismo orden:
.selector { font : ValordeStyle ValordeWeight ValordeSize ValoresdeFamily ; }

recordando que no hay que separar con comas nada ms que los distintos valores de Family si es que
ponermos varios. El resto ir separado con espacios solamente. Vemos un ejemplo:
.otrotextomas { font: italic bolder 15px Arial,Verdana,sans-serif ; }

Si no se indica italic se comprende que el texto es normal, es decir, no en cursiva.

5.- El atributo text-decoration, puede tomar los valores none, overline, underline, through y blink,
aunque es conveniente comprobarlos, pues algunos no funcionan correctamente en determinados
Navegadores que no siguen correctamente las indicaciones de CSS (de las Hojas de Estilo).

none es el valor por defecto e indica que no se representar el texto con ningun tipo de
decoracin.
overline mostrar una lnea por encima del texto escogido.
underline representa el texto subrayado.
through tacha el texto y
blink lo muestra parpadeante, cuando al navegador le da la gana, por cierto.
288

Un texto tachado y de color rojo se podra definir con:

.textotachao { text-decoratin:through ; color:red ; }

6.- Para mostrar un texto alineado podemos usar la propiedad text-align que puede tomar los valores
left, right, justify o center que lo alinearn respecto al lugar donde se encuentre dicho texto. La
forma de definirlo es, por ejemplo:
.parrafojustificao { text-align:justify ; }

7.- Si queris definir el prrafo de la misma manera que lo tengo yo, con la primera lnea un poco metida
hacia dentro (a esto se le llama sangra y no es para bebersela borrachines) lo podis hacer con la
propiedad text-indent, cuyo valor hay que especificar con unidades y todo, (pixeles, puntos, tanto por
ciento, etc..) por ejemplo:
p { text-indent:50px ; }

Propiedad color
Esta propiedad define el color del texto de un elemento. Como valor puede tomar todos los colores
posibles los cuales se pueden indicar de distintas formas. Existe una serie de 16 colores estandar que
pueden indicarse directamente con su nombre en ingls. Son los siguientes:
Black

Teal

Gray

Blue

Silver

Green

Red

Lime

Purple

Olive

Maroon

Yellow

Fuchsia

Aqua

Navy

White

Para crear un estilo caracterizado por un color de texto rojo, llamado por ejemplo textorojo,
escribiramos con el NotePad en la Hoja de Estilo la siguiente Regla de CSS:
.textorojo { color:red ; }

donde por supuesto, podis cambiar lo de textorojo por el nombre que queris.
Esta forma de indicar el color nos limita a usar solamente esos 16 colores, pero es posible definir otros
muchos mediante lo que se llama el Valor Hexadecimal, que indica la cantidad de rojo, verde y azul que
contiene un color. Por este mtodo pueden definirse hasta 16 millones de colores. Os pondra la lista de
los 16 millones de colores y sus respectivos valores, pero casi mejor os la imaginais, vale? je je je.
La forma de definir colores mediante su valor hexadecimal es la siguiente:
289

.textorojo { color:#FF0000 ;}

Es algo pesado aprenderse los 16 millones de cdigos de cada color, no? Hay programas de dibujo e
incluso editores de HTML que te permiten elegir el color deseado de entre esos 16 millones y te
muestran su cdigo hexadecimal. Podis usar esos programas para obtener el valor del color que buscais
y as ponerlo en la hoja de estilo tal y como os acabo de apuntar. De todas formas, con los 16 colores
estandar hay mas que suficientes, no? Exite alguna que otra forma de especificar los colores pero con
esto tenis mas que suficiente. Para aprender ms, acudir a los enlaces recomendados al final.
Tened en cuenta tambin que no todo el mundo tiene un peaso de targeta grfica con un puao de
colores, de modo que si escogis alguno raro, es posible que esa gente no lo vea correctamente.

Propiedad Color de Fondo

Indica el color de fondo del elemento al que se aplica esta propiedad. Si se aplica por ejempo a BODY,
corresponder al color de fondo de la pgina. Si se aplica a una celda, ser el del fondo de la celda, etc.
Esta propiedad se define de la siguiente manera:
.selector { background-color:red ; }

donde selector es el nombre del nuevo estilo que queremos crear o incluso el nombre de un estilo
predeterminado que queremos variar (en cuyo caso ira sin el punto delante, claro). El valor de la
propiedad Background-color se indica de la misma manera que el color de texto visto antes. As, para
hacer que las pginas tengan un color de fondo amarillo, redefiniramos la estiqueta <BODY> de la
siguietne manera:
BODY { background-color:yellow ; }

y ya no har falta especificarlo cada vez que creemos una nueva pgina. El color de fondo ya viene
incluido simplemente al poner <BODY> en cada una de ellas. (por supuesto, siempre y cuando le hayamos
asociado una hoja de estilo, como ya veremos) Util, no?.

Propiedad Imagen de Fondo

Es similar al anterior, pero en lugar de indicar un color de fondo, indica una imagen de fondo. La Regla
CSS para esta propiedad es:
.selector {background-image:url("RutaDeLaImagen") ; }

En nuestro caso, donde pone RutaDeLaImagen, tendremos que indicar la Ruta del archivo de la imagen
que queremos que aparezca de fondo. Por ejemplo, si queremos que en todas las pginas de nuestra web
aparezca una imagen de fondo dada por el archivo fondo1.jpg que est en la carpeta "imagenes" que hay
en la carpeta donde se encuentran esas pginas, pondramos lo siguiente:
BODY { background-image:url("imagenes/fondo1.jpg"); }

Lo mismo podemos hacer para una tabla o para una celda. En esos casos en lugar de BODY pondramos
las etiquetas de la Tabla o de la Celda, que son TABLE y TD respectivamente.
290

Si defins una imagen de fondo, se recomienda tambin definir un color de fondo a la vez. Esto se hace
para que mientras no se cargue la imagen (o en el caso de que el navegador no la cargue por lo que sea)
aparezca un color de fondo que facilite la lectura del texto. Para definir ambas cosas a la vez se escribir
en modo resumido lo siguiente:
.selector { background: url("graficos/fondo4.jpg") white ; }

se pone solo background y seguido de dos puntos, la ruta entre parntesis y comillas, y luego el color de
fondo, seguido de punto y coma. Lo de color claro es lo que tenemos que cambiar segn nuestros gustos.
Lo azul marino (ms oscuro) es obligatorio en este ejemplo.

Propiedad Margen
Hay diversos elementos en los que podemos establecer ciertos margenes para separarlos as de otros
elementos. Por ejemplo podemos separar unos prrafos de otros, o incluso separarlos respecto de los
margenes de la pgina. Para todo esto, se pueden definir cuatro atributos para esa propiedad:

margin-top: define el margen superior del elemento al que se aplique.

margin-bottom: define el margen inferior.
margin-left: margen izquierdo y...
margin-right: que define el margen derecho.

Y como se definen sus valores? Existen varias formas de hacerlo, o mejor dicho, diversas unidades que
se pueden utilizar, a saber: puntos (pt), pixeles (px) tantos por ciento (%), pero no centmetros (cm) ni
pulgadas (in) que son para uso en HTML (es decir, directamente en el cuerpo o BODY), no en CSS que
es el caso que nos ocupa.
Un ejemplo. Si queremos que todos los prrafos tengan unos margenes de 10 pixeles y un color de texto
azul, tendremos que definir la siguiente Regla CSS en la Hoja de Estilo:
p { margin-top:10px ; margin-bottom:10px ;
margin-left:10px ; margin-right:10px ;
color:blue ;}

Si definimos los cuatro tipos (atributos) de margenes comentados, podemos resumirlo de la siguiente
manera:
margin: valorsuperior valorderecho valorinferior valorizquierdo ;

eso si, respetando ese orden y SIN separar esos valores con comas. El ejemplo anterior quedara as de
cortito:
p { margin:10px 10px 10px 10px; color:blue ; }

Veis que corto? si es que esto son todo ventajas, je je je.

291

Propiedad Margenes Interiores

En este caso tratamos los margenes o distancias entre un elemento y los bordes que lo rodean. Por
ejemplo las celdas de una tabla. Si si si, quizs alguno de vosotros ya ha usado esto con algn programa,
que le permite escoger estos margenes, pero de lo que se trata con el CSS es de serarar el contenido de la
forma, como ya os he dicho varias veces. El programa define estos margenes dentro del BODY como
lenguaje HTML y lo que queremos es hacerlo fuera de l, es decir, en la Hoja de Estilo. As que pasad
olmpicamente del uso de esos programas para hacer estas cosillas y hacerlo de esta forma.
La forma de definir estos margenes es casi igual que en el caso anterior, pero ahora cambia el atributo,
que en este caso es padding. Por ejemplo, para definir que todas las celdas tengan ciertos margenes,
insertaremos en la Hoja de Estilo la siguiente Regla CSS:
td { padding: valorsuperior valorderecho valorinferior valorizquierdo ;}

adems respetando tambin ese orden y de nuevo SIN comas.

Si quisieramos que las todas las celdas que aparecen en nuestra web tubieran color de fondo negro, color
de texto blanco y unos margenes internos de 20px por arriba y abajo y de 10px por los lados (macarra
que es uno, je je) redefiniramos el selector de celda de la forma siguiente en la Hoja de Esilo (o si solo
lo queremos en una sola pgina, entre <Style> y </Style> tal y como vimos en seciones anteriores):
td { background-color:black ; color:white ; padding:20px 10px 20px 10px ; }

Si en cambio queremos que los margenes sean de por ejemplo 20px por los cuatro costados, podemos
resumir an ms, pues basta indicar padding:20px ; y listo.

Propiedad Ancho
Podemos tambin definir la anchura (mnima en algunos navegadores) de las imgenes, de las celdas, de
las tablas y no se de que ms, mediante el atributo "width" cuyas unidades son las mismas que en el caso
anterior, aunque se suelen preferir los tantos por ciento o px.
Un ejemplillo facilillo. Queremos una tabla que tenga una anchura igual a la mitad de la pgina. En este
caso el valor de width sera 50%. El visitante ver la tabla con una anchura justo la mitad del tamao que
tenga su navegador en ese momento. Si agranda o hace ms pequeaja la ventana del Navegador, la tabla
aumentar o disminuir su anchura hasta ocupar de nuevo el 50%, es decir, la mitad de la ventana (o
mejor dicho, del documento). La redefinicin (pues este selector es otro de los predeterminados) del
selector de las tablas quedara como:
table { width:50% ; }

aunque tambien podemos definir la clase .lamitad como:

.lamitad { width: 50%; }

y aplicarselo solo a las tablas que queramos, indicando ya en la pgina (dentro del BODY) lo siguiente:
292

<TABLE CLASS="lamitad">.....

tal y como hemos visto en otras secciones.

Por supuesto si queremos incluirle ms propiedades de la ya vistas, lo podemos hacer dentro de los
corchetes separndolos de los que ya tiene con punto y coma, color de fondo, imagen de fondo,
margenes, etc....

Propiedades Grosor, Color y Estilo de Borde

Seguro que lo habis acertado ya. Se trata de definir el grosor que queremos que tenga el borde de una
imagen o de una celda, o incluso de un prrafo, en cuyo caso saldr recuadrado. (algunos Navegadores
como el Netscape 4.08 no representan los bordes en CSS, o al menos, yo no lo he conseguido. En
Internet Explorer si que funciona).
1.- El atributo para definir el grosor de borde de un elemento es border-width y utiliza unidades como
las ya comentadas, aunque suele emplearse el pixel (px). Este atributo define el ancho de los cuatro
lados que rodean el elemento en cuestin, pero si queremos definir distintos bordes para cada uno de los
lados podemos usar los atributos:

border-top-width: que define el grosor del borde de arriba.

border-bottom-width: para el grosor del borde de abajo
border-left-width: para el izquierdo y...
border-right-width: para el derecho.
Recordad que border-width se usa para poner el mismo grosor a los cuatro costados.

Si queremos que uno de ellos no se vea simplemente le ponemos un grosor nulo, es decir, cero, "0"
patatero. Veamos un ejemplo. Si quiero que las celdas de todas las tablas de mi web aparezcan con
bordes superior e inferior de 10 pixeles de grosor y de 20 por los lados, con un color de fondo negro y
color de texto blanco, tendr que redefinir (pues al ser un selector predeterminado ya estaba definido por
defecto, aunque con otros valores) la Regla CSS siguiente para el selector celda "td":
td { border-top-width:10px; border-bottom-width:10 px ; border-left-width:20px ;
border-right-width:20px ; background-color:black ; color:white ; }

2.- Tambin podemos definir el color de ese borde mediante el atributo border-color cuyos valores son
los mostrados antes para estos.
3.- En cuanto al estilo del borde, se define mediante el atributo border-style y puede tomar los
siguientes valores: solid, inset, groove, outset y double. Los efectos de cada uno de ellos lo podris ver
vosotros mismos aplicando la regla correspondiente.
Resumiendo: Un ejemplo que agrupa algunas propiedades vistas hasta ahora podra ser el de un prrafo
de texto rojo, con un recuadro azul rodeandolo de tamao 10px y con apariencia de doble lnea. La
Regla CSS correspondiente sera la siguiente:
p { text-color:red ; border-color:blue ; border-width:10px ; border-style:double ; }

293

Hay un montn de Propiedades ms, pero estas son las ms usuales. Espero ir incluyendo ms conforme
las vaya dominando. Tambin podis adelantaros y visitar los enlaces recomendados, donde encontraris
mucha ms informacin sobre todo este mundillo de los Estilos.

Las Unidades de Medida en Estilos CSS

Como hemos visto, algunas propiedades toman valores numricos, pero para que funcionen
correctamente tenemos que indicar en que unidades estamos midiendo. No es lo mismo un centmetro
que un Kilmetro, verdad? Pues si solo indicamos como valor 1, el navegador no sabr muy bien si es
una u otra unidad y los efectos pueden ser desastrosos.
Para remediar esto haremos uso de tres tipos de unidades. Las unidades absolutas, las relativas y los
tantos por ciento.

Unidades Absolutas
Son medidas de un tamao fijo, como por ejemplo, un centmetro. Si indicamos medidas de este tipo, es
posible que una imagen (por ejemplo) de 10 cm sea demasiado grandota para un monitor grandote, y
relativamente pequea para uno menor. Es por eso que se prefieran las medidas Relativas. Las absolutas
solo deben usarse (bajo mi punto de vista, claro) cuando sepamos con certeza las dimensiones del medio
de salida (monitor, impresora, etc) lo cual no siempre en posible.
Las distintas unidades Absolutas que podemos usar son las siguientes:

in: son pulgadas (en ingls "inches") y equivalen a 2.5 centmetros aproximadamente.
cm; centmetros y equivalen exactamente a .. pues a un centmetro.
mm: Acertaste, es el milmetro.
pt: el Punto equivale a 0.014 pulgadas, si la memoria no me falla (que suele ocurrir con
frecuencia).
pc: Las picas, equivalen a 12 puntos.

Si queris ponerle decimales usad el punto, no la coma.

Unidades Relativas
Adoptan el valor relativo al tamao del documento, del monitor, impresora, etc, segn el caso.
Personalmente las recomiendo para casi todo. Son las siguientes:

px: la ms utilizada es el Pixel que es , para entendernos, la cantidad de puntos en los que se
divide el monitor. Si tu monitor tiene una definicin de 800x600, se refiere a pixeles.
ex: se refiere a la altura de la "x" del tipo de letra usada, creo.
em: tambin llamada "cuadratn" es relativa al tamao de letra definido por font-size.

Como veis, las dos ltimas no las conozco mucho, je je, pero nadie es perfecto y menos un servidor, je
je. Pero podis hacer experimentos con ellas para ver como se comportan. Yo suelo usar los pixeles casi
siempre.
294

ATENCIN!!: Nunca separis la cifra (el nmero) de las unidades (px, pt, ex, em) pues entonces
algunos Navegadores no las leeran. Es decir, no vale poner 15_px (suponiendo que "_" es un espacio).
Solo vale 15px (todo junto) Recordadlo bien, vale?

Los tantos por ciento % o porcentajes

Se refiere al tanto por ciento de la medida caracterstica de la zona donde est el elemento al que se
aplica. Por ejemplo, si se especifica un tamao de celda de 25%, sta ser una cuarta parte de la tabla. Si
se indica una anchura del 25% a una tabla, esta sera el 25% del sitio donde ste, normalmente del
documento, pero si la tabla est dentro de otra, ser el 25% del tamao de la tabla que la contiene.
Claro? un poco lioso, no? je je.
Algunas propiedades admiten valores negativos para todas estas unidades, aunque los efectos no sern
claros siempre, de modo que conviene comprobarlos antes de nada.
Agunos ejemplos de propiedades, sus valores y unidades podran ser:
p { text-indent: 20px; } sangria de prrafo de 20 px
.gigante { font-size: 10cm} texto de 10cm de "alto?"
p { word-spacing: 5mm} espacio entre palabras de 5 mm

etc.. Otros ejemplos aplicados son:

Tamao de letra de 12px

Tamao de letra de 12pt

Tamao de letra de 0.3in

Tamao de letra de 10mm

Puedes comprobar que las medidas absolutas no varian de tamao aunque tu varies el tamao del texto
desde tu navegador. Esto hay que tenerlo en cuenta, pues un tamao absoluto pequeo puede
imposibilitar la lectura a algunos visitantes, pues les quitas la opcin de agrandar el texto con el
Navegador (si es que conocen esa posibilidad, claro.). As que prueba bien las medidas escogidas.

Asociando Hojas de Estilo

Cmo Asociar Una Hoja de Estilo a Tu Pgina
Web
295

Ahora que ya sabemos crear hojas de Estilo, el siguiente paso es indicarle a cada pgina donde se
encuentra. Como vimos antes, la Hoja de Estilo puede llamarse como queris (aunque siempre os he
recomendado usar minsculas y evitar espacios en blanco y simbolos "raros") pero la extensin (las tres
letritas que van detras del nombre del archivo) debe ser .css.
Imaginemos que, con la originalidad que nos caracteriza, lo hemos llamado estilo.css. Obviamente
tendremos que indicar en cada pgina la ruta de ese archivo, respecto de esa pgina y adems hay que
hacerlo en un sitio y de una forma determinada.
Llamaremos a dicho archivo con la siguiente lnea:
<LINK REL="StyleSheet" MEDIA="screen" TYPE="text/css" HREF="estilo.css">

que tendreos que incluir dentro de la cabecera de cada una de las pginas que queramos que use esa Hoja
de Estilos, es decir, entre los <HEAD> y </HEAD> de esas pginas. No olvides respetar las comillas.
En dicha lnea os he marcado en rojo lo que debera ser la ruta del archivo estilo.css respecto de esa
pgina en concreto. Supongo que habis sido buenos y buenas y os habis empapado la seccin Rutas.
de la Enciclopedia de ComoCrearTuWeb Si no es as, echarle un vistazo que es muy muy importante. Os
recomiendo usar rutas relativas.
Os recuerdo de todos modos que si por ejemplo, el archivo estilo.css est en la misma carpeta que la
pgina, simplemente tenis que poner el nombre del archivo estilo.css. Si en cambio la pgina est en
una carpeta llamada "mibiografia" y el archivo estilo.css esta en la carpeta anterior a esta (es decir, fuera
de "mibiografia") tendris que poner ../estilo.css. De todas formas, en la Enciclopedia, en la seccin
Rutas, esta explicado todo esto completa y claramente.
Pues listo. Una vez que habis insertado esa lnea en cada una de las pginas en las que queris utilizar
esos estilos (que seguro que son en todas) el paso siguiente ser aprender a utilizarlos, es decir, como
indicar a la pgina que un elemento debe mostrarse con un estilo de los definidos en la Hoja de Estilos.
Vamos a verlo en la siguiente leccin.
Ya estis apunto de pasar de ser Webmastercillos a ser WebSuperMasters!! je je je. Tiembla Bill Gates!!!

Aplicando Hojas de Estilo

Qu Opciones Tengo para usar Estilos CSS?
Bien, ya sabemos (o al menos eso espero) como definir y asociar la Hoja de Estilo. El siguiente paso
ser aplicar cada uno de los estilos a los elementos de nuestra web.
Podramos dividir las formas de aplicar los estilos segn la forma de definirlos en :

Aplicar Estilos Predeterminados

Aplicar Estilos Redefinidos
Aplicar Nuevos Estilos
296

Aplicar Estilos CSS Predeterminados

Como ya os he contado, los estilos predeterminados son los que todo Navagador conoce sin tener que
definirlos. Para utilizarlos no tenis ms que escribir su etiqueta correspondiente. En la seccin "Estilos
Predeterminados" tenis los ms utilizados, as como sus funciones y algunos ejemplos.

Aplicar Estilos CSS Redefinidos o Retocados

Si hemos retocado alguno de los estilos predeterminados, tampoco hace falta indicar nada distinto a lo
comentado en el apartado anterior. El Navegador se encarga de leer las nuevas definiciones de nuestra
Hoja de Estilo y para aplicarlos, actuaremos como en el caso de los Estilos Predeterminados. Como si
nada. La nica diferencia es que ahora los elementos se presentarn de la forma que hayamos indicado.

Aplicar Estilos CSS Nuevos

Si hemos creado nuevos tipos (clases) de estilo, bien para todos los elementos (.rojo) o bien para
determinados selectores (p.negrita), para conseguir que estos aparezcan de la forma que queremos
hemos de indicarlo mediante la palabra mgica "CLASS".
A estas alturas hemos de diferenciar entre elementos a nivel de Lnea y elementos a nivel de Bloque.
Un elemento a nivel de Bloque es por ejemplo un prrafo (Todo un prrafo), una celda, una tabla, un
ttulo. Algo entero y completo.
En cambio un elemento a nivel de Lnea suele ser una parte de un elemento a nivel de bloque. Por
ejemplo, son elemetos a nivel de Lnea unas pocas palabras dentro de un prrafo, o algunas palabras (o
solo una o una letra) de un ttulo.
Os cuento esto porque a la hora de indicar a un elemento que debe mostrarse con un cierto estilo, los
mtodos son distintos para uno u otro caso.
En las dos secciones siguientes os indico como aplicar estilos en estos casos.

Estilos CSS a Nivel de Bloque

Para un elemento a Nivel de Bloque.
As, para indicar a un elemento de bloque como un prrafo, que debe tener el estilo .rojoplata, definido
en la hoja de estilo por:
.rojo { color: red
;
background-color:silver ; }

tenemos que escribir, ya en el BODY (entre <BODY> y </BODY>) de la pgina, lo siguiente:

297

<p class="rojoplata">Esto es el prrafo. Es un

bloque y por ello se indica el tipo de <estilo
junto a su etiqueta. Todo el prrafo tendr
el color rojo y fondo plata pues as lo manda "class".
As sea.</p>

VER RESULTADO
Si a continuacin queremos un prrafo normal, simplemente lo encerraramos entre <p> y </p>. Si
queremos escribir otro prrafo con el estilo ese tan feo, pues lo encerramos entre <p
class="rojoverde"> y </p> y a correr.
Ya de paso os indico que los estilos definidos con un punto al principio, pueden usarse en todo tipo de
elementos, sin ms que poner:
<p class="nombredelestilosinelpunto">...

para prrafos

<td class="nombredelestilosinelpunto">...

para celdas

<code class="nombredelestilosinelpunto">...

para codigos

etc..
Os he puesto "VER RESULTADO" para que lo veis facilmente, pero os recomiendo que lo copiis en
el Notepad y vayais cogiendole el truco a todo esto. No es tan dificil. El exito de los estilos depende de
vuestro gusto, je je, de modo que , a experimentar con otros colores y caractersticas!!

Estilos CSS a Nivel de Lnea

Para un elemento a Nivel de lnea
El caso ms claro es cuando dentro de un prrafo (un bloque) queremos que solo unos pocos de sus
elementos se muestren con un estilo determinado.
Imaginaos el caso de antes. Si quiero que el prrafo sea como entonces, pero que algunas palabras
aparezcan en negrita, un poco ms grandes y verdes en lugar de rojas, primero tendremos que definir ese
estilo en la Hoja de Estilo (estilo.css) o bien en la cabecera con <STYLE>. En cualquier caso, la
definicin podra ser:
.otroestilo { font-weight:bold ;
font-size:22px
;
color:green
;

que habr que incluir junto con la anterior definicin para ver el ejemplo.
En la pgina, dentro del prrafo de antes, escogemos las palabras que queremos mostrar con el nuevo
estilo y las encerramos entre las palabras mgicas <SPAN CLASS="otroestilo"> y </SPAN>. Podemos
hacerlo en todas las palabras que queramos. Eso si, si lo aplicamos a dos palabras seguidas, es mejor
298

encerrarlas ambas juntas que por separado, ya sabis, para ahorrar, je je. Veamos un ejemplo. Para no
alargarlo mucho solo lo aplico a dos o tres palabras, vale? El cdigo HTML a incluir en la pgina sera:
<p class="rojoplata">Esto es el prrafo. Es un bloque y por ello
se indica el tipo de <SPAN CLASS="otroestilo">estilo</SPAN>
junto a <SPAN CLASS="otroestilo">su etiqueta.</SPAN> Todo el
prrafo tendr el color rojo y fondo plata pues as lo manda
"class". As sea.</p>

VER RESULTADO
Fijaos en una cosilla. El prrafo tiene color de texto rojo y en cambio las palabras escogidas son verdes.
Esto nos demuestra que si en un estilo en lnea se definen propiedades que ya hay definidas en el
elemento de bloque, predominan siempre las de lnea. El resto de las propiedades definidas para el
bloque se mantienen (se heredan) tambin en el elemento de lnea. Si no quisierais, por ejemplo, que las
palabras a las que hemos aplicado el estilo "otroestilo" tengan fondo gris, tendamos que definir en ese
estilo el fondo que queremos.

De un Solo Uso. Aplicar y Definir Estilos CSS

para una sola Vez.
Ya os he contado que si algn estilo lo vais a usar solo una vez o dos, en una o dos pginas de vuestra
web, en lugar de incluirla en la Hoja de Estilo, podis definirla en la cabecera, es decir, entre <HEAD> y
<HEAD/> de la pgina en cuestin. Pero si solo se va a usar una sola vez, nisiquiera merece la pena
meterlo all. Mejor definimos ese estilo en la misma lnea que el elemeno, ya en en BODY de la pgina.
Veamoslo con un sencillo y rpido ejemplo. Quiero mostrar un prrafo con fondo amarillo. Solo lo voy a
usar una sola vez en una sola de mis pginas. Pues defino el estilo en el BODY tal y como sigue:
<p Style=" background-color : yellow ">Este prrafo est definido
en la misma lnea HTML que lo contiene, es decir, en el BODY, y
tiene un fondo amarillo, horrible, por cierto. De modo que no pienso
usarlo ms, je je je.</p>

VER RESULTADO
Poniendo esto directamente en una pgina saldr con el fondo definido, sin necesidad de declararlo en el
HEAD ni en la Hoja de Estilo. Si lo vamos a usar varias veces en una pgina mejor se define en el
HEAD y si lo usamos en varias lo clavamos en la Hoja de Estilo. Esta clarito, no? Pos me alegro un
montn.
Por si no lo sabais, os cuento algo. Al pulsar sobre "VER RESULTADO" se abre una nueva ventana de
vuestro Navegador para ver el ejemplo. Pues bien, si de las opciones que tenis en vuestro Navegador
pinchais en "VER" y luego en "Cdigo Fuente" en el Internet Explorer o si usais el Netscape ,mediante
"View" y "Page Source" creo, veris el cdigo HTML de la pgina de ejemplo. Acostumbraros a
curiosear esos cdigos. Os ser muy til.

299

Una vez que lo vis, podis guardaroslo en el disco duro para ojearlo ms tarde o incluso imprimirlo y
as descubrir su estructura, que cosas usa, las metatags que utiliza y muchas otras cosas que os cuento en
la seccin "Nociones de HTML".

Ejemplos Prcticos
De un Solo Uso. Aplicar y Definir Estilos CSS
para una sola Vez.
Ya os he contado que si algn estilo lo vais a usar solo una vez o dos, en una o dos pginas de vuestra
web, en lugar de incluirla en la Hoja de Estilo, podis definirla en la cabecera, es decir, entre <HEAD> y
<HEAD/> de la pgina en cuestin. Pero si solo se va a usar una sola vez, nisiquiera merece la pena
meterlo all. Mejor definimos ese estilo en la misma lnea que el elemeno, ya en en BODY de la pgina.
Veamoslo con un sencillo y rpido ejemplo. Quiero mostrar un prrafo con fondo amarillo. Solo lo voy a
usar una sola vez en una sola de mis pginas. Pues defino el estilo en el BODY tal y como sigue:
<p Style=" background-color : yellow ">Este prrafo est definido
en la misma lnea HTML que lo contiene, es decir, en el BODY, y
tiene un fondo amarillo, horrible, por cierto. De modo que no pienso
usarlo ms, je je je.</p>

VER RESULTADO
Poniendo esto directamente en una pgina saldr con el fondo definido, sin necesidad de declararlo en el
HEAD ni en la Hoja de Estilo. Si lo vamos a usar varias veces en una pgina mejor se define en el
HEAD y si lo usamos en varias lo clavamos en la Hoja de Estilo. Esta clarito, no? Pos me alegro un
montn.
Por si no lo sabais, os cuento algo. Al pulsar sobre "VER RESULTADO" se abre una nueva ventana de
vuestro Navegador para ver el ejemplo. Pues bien, si de las opciones que tenis en vuestro Navegador
pinchais en "VER" y luego en "Cdigo Fuente" en el Internet Explorer o si usais el Netscape ,mediante
"View" y "Page Source" creo, veris el cdigo HTML de la pgina de ejemplo. Acostumbraros a
curiosear esos cdigos. Os ser muy til.
Una vez que lo vis, podis guardaroslo en el disco duro para ojearlo ms tarde o incluso imprimirlo y
as descubrir su estructura, que cosas usa, las metatags que utiliza y muchas otras cosas que os cuento en
la seccin "Nociones de HTML".

Antes de Empezar con los ejemplos ...

Quizs la mejor manera de entender todo esto sea con algn ejemplo rapidillo. Os aconsejo que an no
apliquis esto en vuestra web directamente. Mejor cread una pgina nueva para cada ejemplo.

300

Recordad tambin que para ver o hacer estos ejemplo no es indispensable usar el FrontPage u otros
programas, sino que os bastar con el Block de Notas (NotePad) de Windows. Os lo recomiendo, pues
as veris ms de cerca el cdigo y os iris familiarizando con l.

Para comprobar estos ejemplo, abrid el Block de Notas de Windows.

Escribid en l el cdigo que indique en cada ejemplo (podis usar "Copiar" y "Pegar",
naturalmente).
Una vez copiado, guardarlo en una carpeta llamada, por ejemplo "Ejemplos de Esilo" pero fuera
de la carpeta donde tenis vuestra pgina.
Se guardar con la extensin .txt Para poder verla como pgina web, cambiadle esas tres letrillas
(.txt) y ponerle .htm
Ahora pinchad en ese archivo dos veces y se abrir con vuestro Navegador, tal y como si fuese
una pgina web normal (de hecho lo es).
Si queris reformarla o retocarla le volvis a poner la extensin .txt y para verla de nuevo le
ponis .htm

Os aseguro que haciendo algunos ejemplos, pronto dominaris el tema y podris aplicarlo a vuestra web.
Merecer la pena.

Uso de los Estilos CSS Predeterminados.

Ejemplo I
Como ya os he contado, podemos hacer uso de los Estilos Predeterminados, para los cuales no es
necesario ni crear una Hoja de Estilo ni Asociarla a nuestra web ni nada de nada.
Para usar esos estilos simplemente hemos de encerrar las palabras que queremos que adopten ese estilo
(o elementos), entre ciertas etiquetas.
Por ejemplo, para indicar que una frase tome el aspecto de cierto ttulo, bastar con escribir esas
palabras, entrar en el cdigo HTML, localizar esas palabras en el cdigo y encerrarlas entre las etiquetas
<h2> y </h2>. El efecto conseguido ser el siguiente:

Esto es un ttulo con h2

Como podis ver, tiene un tamao de letra mayor, est en negrita, se separa el solo de los otros prrafos
y est pegado al margen izquierdo. Estas son sus propiedades predeerminadas. Por tanto sera un gasto
tonto de tiempo, indicar que est en negrita, pues ya lo tiene definido.
Veamos que pasa si en lugar de H2, encerramos esas palabras entre las etiquetas <H3> y </H3>:

Esto es un ttulo con h3

Vaya! Ahora aparece igual pero con un tamao de letra algo menor.
Podis comprobar vosotros mismos el efecto de cada uno de los Estilos Predeterminados sin ms que
escribirlos directamente en una nueva pgina de pruebas. Os explico como hacerlo y los distintos estilos
predeterminados que hay disponibles.
301

Cambiar Colores y Caractersticas de los Enlaces

Con este ejemplo aprenderemos a cambiar las caractersticas de los enlace de nuestras pginas web.
Veremos cmo dar un aspecto diferente a estos enlaces cuando pasemos el cursor del ratn por encima
de ellos y cmo eliminar el subrayado y los colores.
Aunque esto puede hacerse tambin usando las opciones del Dreamweaver, os lo voy a explicar
escribiendo el cdigo correspondiente en la hoja de estilo. De este modo os ser ms fcil cambiarlo a
vuestro gusto y adems os ireis familiarizando an ms con los cdigos. Adems se trata de aprender
CSS, no?
Bien, basta con incluir en la Hoja de Estilo lo siguiente (si an no sabes enlazar o crear la hoja de estilo
pasa antes por el ejemplo IV):
A
A:LINK
A:VISITED
A:HOVER
A:ACTIVE

{
{
{
{
{

}
}
}
}
}

/*Para caracteristicas generales a los enlaces*/

/*para el enlace, tal cual*/
/*Para cuando ha sido visitado*/
/*Cuando el ratn est sobre l*/
/*Cuando est siendo pulsado*/

Y basta con insertar dentro de los corchetes las caractersticas que deseas para cada estado. Por ejemplo,
si deseas que en todos los casos los enlaces estn en negrita, sin subrayar y con un tamao de 12px, ser
una caracterstica a poner en la parte general.
A

{font-weight:bold ; font-sixe:12px ; text-decoration: none ; }

Como el estilo para los enlaces cuando no ocurre nada especial con ellos es el mismo que el definido en
la parte general (la anterior), no es necesario incluir nada en esta parte, pero hay que ponerla de todos
modos, aunque vacia.
A:LINK

;}

Si no deseas ningn cambio para los enlaces ya visitados, lo dejas vacio, pero ponlo tambin.
Estos cuatro estados han de ser definidos todos, aunque estn vacios, y adems en ese orden.
302

A:VISITED {

;}

Si deseas que cuando el cursor del ratn pase sobre el enlace, ste se ponga, por ejemplo, rojo, pon:
A:HOVER

{color:red ; }

Y por ltimo, si quieres que aparezca subrayado cuando el enlace est siendo pulsado, pon:
A:ACTIVE

{text-decoration: underline ; }

NOTA: En la regla general ( la primera que hemos definido) se defini sin subrayar, pero cuando est
pulsado saldr subrayado por estar definido DESPUS de la definicin general. Normalmente,
predomina la ltima definida en caso de que una caracterstica sea definida dos veces.
El cdigo completo a insertar ser entonces el siguiente:
A {font-weight:bold ; font-sixe:12px ; text-decoration: none ; }
A:LINK
{
;}
A:VISITED {
;}
A:HOVER
{color:red ; }
A:ACTIVE {text-decoration: underline ; }

Espero que estas explicaciones sean suficientes. En caso contrario decidme algo en el Foro.

Ejemplo III de Estilos CSS. Dar formato al texto

Con este ejemplo vamos a ver como darle un formato concreto y algo distinto al predeterminado a
nuestros ttulos y comprobaremos como estn separadas la parte que indica el Aspecto de la que indica el
Contenido.
Este es el cdigo para dicho ejemplo. No os asustis porque en lo sucesivo os explico todo lo que aqui
aparece detalladamente.
Copiaros este cdigo tal y como os dije en el apartado anterior y os comento como funciona. (lo que
rodea a "color:red" son corchetes "{ }", no parntesis "( )" !! )

303

Vemos como estn claramente separadas la zona de definicin de la Forma y de Contenido. En la

cabecera, entre <STYLE> y </STYLE> se define la forma en que se deben representar los contenidos. Por
otro lado, entre <BODY> y </BODY> se encuentran los contenidos en s, y se indica el tipo de presentacin
(el formato) que debe tener cada elemento, los cuales ya han sido definidos en la zona STYLE.

Zona de Definicin de la Forma

Las definiciones de cada uno de los estilos se agupan entre las etiquetas <STYLE> y </STYLE> dentro de
la cabecera (HEAD).
Podemos definir todos los estilos que queramos, e incluso retocar los ya existentes. Aunque os lo explico
ms adelante, en el ejemplo que nos ocupa se puede ver que se esta definiendo un estilo llamado rojo,
que simplemente se caracteriza por convertir en color rojo (red) el elemento al que se le aplique.
Por si accedis a alguno de los tutoriales que indico al final para el que quiera perfeccionar o profundizar
en el tema, os adelanto que la definicin de un estilo se denomina "regla" y que consta de un "selector"
(en el caso del ejemplo el selector sera "rojo") y una "declaracin", donde se indican las caractersticas
que deseamos que tenga ese elemento o selector.

Zona de Definicin del Contenido

En esta zona, vemos que se ha escrito un prrafo (caracterizado por ir entre los simbolos <p> y <p>) y
que a una de sus palabras (concretamente "Estilo") se le ha aplicado el estilo "rojo" antes definido.
Vemos como para aplicar ese estilo a esa palabra se usa la nueva palabreja <span>.
Todo lo encerrado entre <span...> y </span> tendr el formato que se indique mediante la otra
palabreja class.
Para especificar que tipo de estilo de los definidos en STYLE se deben aplicar a lo encerrado entre
<span...> y </span> se utiliza la palabra class de la forma que veis en el ejemplo:
304

<span class="tipodeestilo"> texto al que se va a aplicar el estilo </span>

No es tan dificil, no?

Ejemplo IV de Estilos CSS. Definir un Estilo

para todas las pginas de la web
Si lo que queremos es que cierto estilo definido por nosotros, sea vlido en todas las pginas de nuestra
web, usaremos este mtodo, la creacin de una Hoja de Estilo.
Dividiremos la tarea en tres partes: 1.- Crear la Hoja de Estilo; 2.- Indicar a cada pgina de nuestra web
donde est y como se llama la Hoja de Estilo que debe seguir, y 3.- Aplicar los estilos definidos en la
Hoja de Estilo a los elementos de cada Pgina.

1.- Crear la Hoja de Estilo.

Vamos a crear nuestra Hoja de Estilo con el NotePad de Windows. Una vez abierto escribimos lo
siguiente:

Si ya os habis mirado bien las lecciones de estilo os sonarn estos terminos. Si no, no os preocupis.
Con este ejemplo solo quiero que veais, a grandes rasgos, como usar las hojas de estilo. Los detalles
como las propiedades, etc, las podris ver mejor en otros ejemplos.
Una vez copiado esto en el Notepad lo guardis con el nombre "estilo.css" con comillas y todo!! De esta
forma evitaris que el NotePad lo guarde con la extensin .txt que no nos vale. Nosotros lo queremos
con extensin .css. Si por cualquier cosa se os guarda con .txt solo tenis que cambiarle el nombre por
estilo.css. Guardarla en la carpeta "ejemplo2".

2.- Asociar la Hoja de Estilo a la Web.

305

Aunque os parezca un poco fuerte, vamos a hacer la pgina de este ejemplo "a pelo", es decir,
directamente en HTML. ALAAAAA!!! No hombre, no , no os asustis que es muy fcil, adems, alguna
vez os he dejado solos? Je je. Eso os ayudar un montn a familiarizaros con el HTML y el CSS.
Para ello usaremos tambin el NotePad de Windows. Abridlo y escribid (o copiad y pegad los ms
vaguetes) el siguiente cdigo en la hoja del NotePad:

Si guardis este cdigo como "ejemplo2.htm" (con las comillas tambin, por lo dicho antes) podris
abrirlo luego con vuestro Navegador usual y ver la pgina como va quedando. Para volver a abrirla con
el Notepad solo tenis que cambiarle la extensin, quitarle .htm y ponerle .txt. Despus de retocarla le
volvis a poner .htm para poder verla. Un poco lio, pero es fcil y util.
Si veis esta pgina con el Navegador (poniendole la extensin .htm) veris que es una simple pgina
donde pone "Mi segundo ejemplo de Estilo", sin ms. A continuacin os muestro como asociarle la hoja
de estilo creada antes.
Dentro de la cabecera (entre Head y /head) , por ejemplo, despues del ttulo (tras la lnea <title>.....)
tenis que meter el siguiente cdigo:
<LINK href="estilo.css" rel=StyleSheet type=text/css>

Quedando el cdigo completo como:

306

Recordad que, donde pone "estilo.css" se indica la Ruta del Archivo de Estilo, respecto a esa pgina. en
nuestro caso, como tanto la pgina como la Hoja de Estilo estn en la misma carpeta solo hay que
indicar estilo.css.
Bien ahora queda el ltimo paso. Decid a los elementos de la pgina, que tipo de estilo deben adoptar.

3.- Indicar Estilos a los elementos de la pgina

En la Hoja de Estilo creada antes, habamos definido un estilo de prrafo (p) y una clase de estilo (.rojo).
Para poner algunas palabras de color rojo, solo hemos de encerrarlas entre las palabras mgicas <span
class="clasedeestilo"> y </span>.
En cambio, para que la unica lnea que tenemos en la web, adopte la forma del prrafo definida en la
Hoja de Estilo, bastara con encerrar la frase entre <p> y </p>.
Vamos a retocar el cdigo HTML de nuestro ejemplo. Encerraremos la frase "Mi segundo ejemplo de
Estilo" entre las palabras <p> y </p>, de forma que esa frase adoptar el estilo de prrafo definido en la
Hoja de estilo.

Si comprobis los efectos de este nuevo cdigo con el navegador, veris lo que hemos logrado. La frase
aparece con unos margenes, sangria, tamao de letra y justificacin, indicada en la Hoja de Estilo.
Ahora vamos a poner las palabras "Ejemplo" y "Estilo" en color rojo, mediante la clase de estilo definida
con el nomnre .rojo en la Hoja de Estilo. Como he dicho antes, encerraremos esas palabras entre <span
class="rojo"> y </span>. (Observar que aunque en la hoja de estilo las clases aparecen con un punto
delante, cuando se les llama desde la pgina no se le pone el punto). El cdigo para conseguir esto, debe
quedar como:

307

Comprobad lo que hemos conseguido visualizando este cdigo en el Navegador, tal y como os he
indicado antes.
Otra cosa que podemos hacer es poner toda esa frase con el formato de prrafo especificado en la Hoja
de Estilo, pero adems, en rojo. Una opcin es esta:
<p><span class="rojo">Mi segundo Ejemplo de Estilo</span></p>

pero se puede simplificar, indicando al parrafo que tipo de clase de estilo debe adoptar:
<p class="rojo">Mi segundo Ejemplo de Estilo</p>

De este modo, el prrafo tomar las caractersticas definidas tanto en p como en .rojo de la hoja de
estilo.
Podis ahora seguir haciendo experimentos incluyendo en la hoja de estilos mas clases, como por
ejemplo:
.verde { text-color:green ; }
.amarillo { text-color:yellow ; }

y poner algunas de esas palabras en estos nuevos colores.

Si queris poner nuevos prrafos solo tenis que escribir su contenido en una nueva lnea y rodearla
entre <p> y </p>.
Si queris conocer ms acerca de las distintas caractersticas que pueden tomar elementos como los
prrafos, los ttulos, etc, consultad la seccin "Las Propiedades". Venga, a hacer pruebas, que esto es
muy fcil. Y cualquier duda ... al Foro de Estilo!

Ejemplo V de Estilos CSS. Los Acentos

308

Como y sabris, al crear ese prrafo y el enlace, el Dreamweaver traduce lo que nosotros queremos en
cdigo HTML, luego, es de esperar que el cdigo que antes vimos haya cambiado, o mejor dicho, se
haya ampliado. Vamos a echarle un ojo a ver que a pasado con l.
Pulsad en el icono ese "<>" y veamos ese cdigo.
<html>
<head>
<title>Mi pgina</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link rel="StyleSheet" href="estilo.css" media="screen" type="text/css">
</head>
<body>
<p>Esta es mi pagina principal</p>
<p>Con esto espero comprobar el efecto que tiene la hoja de estilos sobre el
prrafo. La primera lnea deberia separarse por la izquierda del resto. Vamos a ver
si es verdad. </p>
</p><a href="http://creatuweb.tripod.com">CreaTuWeb</a></p>
</body>
</html>

Las nicas cosas nuevas son las lneas que empiezan y acaban con <p> y </p>. Estos smbolos nuevos
indican el comienzo y el final de un Prrafo. Si recordais nuestra Hoja de Estilo, una de las lneas
empezaba con P... pues esa lnea era donde se definieron las propiedades de los prrafos.
Hay dos cosillas que nos sorprenden en este cdigo. La primera es como se escriben ciertos carcteres o
smbolos en HTML, como por ejemplo Las letras acentuadas, la letra y otros smbolos no son
reconocidos en HTML, de modo que para poder representarlos, en su lugar, al escribir directamente en
HTML hay que poner, por ejemplo:
&aacute;

en lugar de

&eacute;

en lugar de ,

&iacute;

en lugar de

&oacute;

en lugar de

&uacute;

en lugar de

&ntilde;

en lugar de etc...
309

Me explico. Si escribimos el texto en la pantalla de cdigo HTML tendremos que usar esos smbolos
para escribir acentos, s y esas cosas. Si escribimos en la ventana normal de diseo si podemos escribir
acentos y smbolos raros, pues Dreamweaver los traduce el solito. Solo os digo esto por si os resulta
extrao que aparezcan en el cdigo HTML.
La segunda cosilla nueva son los enlaces (o vnculos). En nuestro caso el enlace est dentro de un
prrafo, es decir, entre <p> y </p>. Los enlaces tienen todos la siguiente estructura:
< a href="http://www.comocreartuweb.com">ComoCrearTuWeb</a>
Pero esto lo explicamos en la pgina siguiente para no saturar, vale?

Mejora tu Web
En este apartado te muestro distintas formas y elementos para mejorar el aspecto de tu pgina web. Son
tantos los temas de los que se puede hablar aqu que dudo completarlo nunca, je je je, pero vamos a
intentarlo.
Primero quiero que sepas que tu participacin es indispensable tambin en este apartado. Cmo?
Simplemente, si quieres una mejora para tu web que no encuentras aqu, hzmelo saber en el Foro
CCTW y te doy mi palabra que har lo posible para incorporar las explicaciones oportunas.
Algunas de las mejoras que, hoy por hoy estn disponibles o en camino son las siguientes:

Cmo incluir un Foro

Tenemos dos opciones dependiendo de que tu servidor te ofrezca una base de datos o no. En el primer
caso puedes optar por un foro como el de CmoCrearTuWeb. En caso contrario tendrs que conformarte
con otros tipos, menos buenos, pero tasmbin validos. Como siempre, paso a paso.

Cmo incluir estadsticas en una pgina web

Normalmente nos dan informacin en tiempo real no solo de la cantidad de visitas que tiene cada una de
las pginas de nuestra web, sino adems, nos muestran grficos de las visitas por da, semana, mes y
ao, de donde vienen los visitantes (de qu enlaces, o en qu navegadores nos han encontrado), con que
sistema operativo, resolucin de pantalla etc, nos han visitado.... una gran cantidad de informacin
imprescindible para saber que tal vamos.

Icono personalizado junto a la URL de la web

Seguramente, alguna vez habeis entrado en alguna web y habeis visto que en el navegador, justo antes
de la direccin de la web (URL) aparece un icono pequeito, el logotipo de esa web en cuestin. Queda
bastante bien, no? Pues aqu te muestro desde cmo hacer el icono hasta cmo insertarlo en tu web, para
que veas.

Msica de fondo para mis pginas web

310

Quieres una cancin de fondo para tu web? Que cada vez que se entre en ella suene una cancin
distinta? Que la cancin no se corte cuando tus visitantes pasen de una pgina a otra? Que cada vez que
se pase el ratn por un lugar, suene un sonido? Esto y mucho ms lo podrs encontrar en este apartado.

Trucos Extra
En esta seccin os muestro un sin fin de trucos que podis aplicar en vuestas pginas. Tened cuidado,
pues demasiados "fuegos artificiales" pueden resultar molestos a los visitantes, de modo que mejor no
abusar. En cualquier caso, ah queda eso. Cosillas que siguen al ratn, evitar que os copien, hacer pgina
de inicio, redireccionar una pgina, texto en la barra de desplazamiento.... mejor entra y mira lo que hay.

Coleccin de Scripts para tu pgina web

En esta seccin encontrars un montn (poco a poco abr ms...) de cosillas que darn un toque especial
a tu pgina web. A veces ese toque ser tan especial que dara asco visitarla, je je je, as que mucho
cuidado y no abuseis de estas cosas, pues acaban desesperando a los visitantes.
En cualquier caso, ah los dejo. Todo es bueno si no se abusa....
Si sabes de algn Script interesante, dnoslo en el Foro y lo incluiremos en esta seccin encantados. oki?
Un saludo y que aproveche!

Definicin. Qu es un Script?
Para que nos entendamos, un script podra ser una serie de lneas de cdigo que son leidas por el
servidor (por el ordenador del hosting donde estn nuestras pginas) y que causan una serie de acciones
que deseamos. Cada una de estas acciones pueden ocasionar efectos distintos segn algunas variables de
modo que cada vez que se ejecuten los resultados pueden ser distintos. Esto es bsicamente lo que
diferencia lo que conseguirmos con html y lo que conseguimos con Scripts, pues en html el resultado
siempre es el mismo, mientras que como acabo de decir, usando Scripts cada vez pueden resultar cosas
distintas. Vamos a verlo con un ejemplo.
Usando Html puedo conseguir que en la pgina web aparezca este texto:
Hoy es 12 de febrero de 2008.
Esto se consigue con este cdigo html:
<p>Hoy es 12 de febrero de 2008</p>
Tanto si visitas la web hoy como si la visitas cualquier otro da, el resultado es siempre el mismo, un
resultado esttico (no cambia), la misma fecha, el mismo texto. No obstante, usando Scripts podemos
conseguir resultados dinmicos (que varian, pues cada da es un resultado distnto), o lo que es lo mismo,
que se muestre la fecha actual.
<?

311

echo date ( "h:i:s" , $fecha );

?>

Esa es la diferencia bsica entre Html y Scripts.

Por su puesto, la diferencia no queda simplemente en fechas autoactualizables. Hay cientos de acciones
que podemos conseguir si sabemos cmo. En estas pginas no creo que lo veamos todo, pero al menos
aprenders lo bsico para hacer tus primeros pinitos y lo justo para poder investigar por tu cuenta lo que
no encuentres ac.

Coleccin de Scripts para tu Pgina Web

Efecto Nieve para tu pgina web
Aunque el efecto original es el de una gran nevada, este script puede usarse con cualquier smbolo e
inlcuso texto. El efecto nieve se consigue con un asterisco "*", pero puedes cambiarlo por una letra o
palabra para conseguir otros efectos distintos.
Basta copiar este cdigo justo despus de la lnea del <BODY...> para conseguir el efecto.

<script>
// numero de copos de nieve (maximo 35)
var snowmax=35
// colores para la nieve. puedes poner varios
var snowcolor=new Array("#aaaacc","#ddddFF","#ccccDD")
// fuente para los copos de nieve. puedes poner varios
var snowtype=new Array("Arial Black","Arial
Narrow","Times","Comic Sans MS")
// coloca la letra que hara de copo, normalmente un asterisco *
var snowletter="*"
// velocidad de la nieve. se recomienda entre 0.2 a 2
var sinkspeed=0.6
312

// tamao maximo para los copos de nieve

var snowmaxsize=22
// tamao minimo para los copos de nieve
var snowminsize=8
// Aqui selecciona el modo de nive. pon 1 para que la nieve caiga por todos
lados
// 2 para que venga de la izquierda, 3 desde la derecha y 4 desde arriba.
var snowingzone=3
// lo siguiente no se debe variar
var snow=new Array()
var marginbottom
var marginright
var timer
var i_snow=0
var x_mv=new Array();
var crds=new Array();
var lftrght=new Array();
var browserinfos=navigator.userAgent
var ie5=document.all&&document.getElementById&&!
browserinfos.match(/Opera/)
var ns6=document.getElementById&&!document.all
var opera=browserinfos.match(/Opera/)
313

var browserok=ie5||ns6||opera
function randommaker(range) {
rand=Math.floor(range*Math.random())
return rand
}
function initsnow() {
if (ie5 || opera) {
marginbottom = document.body.clientHeight
marginright = document.body.clientWidth
}
else if (ns6) {
marginbottom = window.innerHeight
marginright = window.innerWidth
}
var snowsizerange=snowmaxsize-snowminsize
for (i=0;i<=snowmax;i++) {
crds[i] = 0;
lftrght[i] = Math.random()*15;
x_mv[i] = 0.03 + Math.random()/10;
snow[i]=document.getElementById("s"+i)
snow[i].style.fontFamily=snowtype[randommaker(snowtype.length)]
314

snow[i].size=randommaker(snowsizerange)+snowminsize
snow[i].style.fontSize=snow[i].size
snow[i].style.color=snowcolor[randommaker(snowcolor.length)]
snow[i].sink=sinkspeed*snow[i].size/5
if (snowingzone==1) {snow[i].posx=randommaker(marginrightsnow[i].size)}
if (snowingzone==2) {snow[i].posx=randommaker(marginright/2snow[i].size)}
if (snowingzone==3) {snow[i].posx=randommaker(marginright/2snow[i].size)+marginright/4}
if (snowingzone==4) {snow[i].posx=randommaker(marginright/2snow[i].size)+marginright/2}
snow[i].posy=randommaker(2*marginbottom-marginbottom2*snow[i].size)
snow[i].style.left=snow[i].posx
snow[i].style.top=snow[i].posy
}
movesnow()
}
function movesnow() {
for (i=0;i<=snowmax;i++) {
crds[i] += x_mv[i];
snow[i].posy+=snow[i].sink
315

snow[i].style.left=snow[i].posx+lftrght[i]*Math.sin(crds[i]);
snow[i].style.top=snow[i].posy
if (snow[i].posy>=marginbottom-2*snow[i].size ||
parseInt(snow[i].style.left)>(marginright-3*lftrght[i])){
if (snowingzone==1) {snow[i].posx=randommaker(marginrightsnow[i].size)}
if (snowingzone==2) {snow[i].posx=randommaker(marginright/2snow[i].size)}
if (snowingzone==3) {snow[i].posx=randommaker(marginright/2snow[i].size)+marginright/4}
if (snowingzone==4) {snow[i].posx=randommaker(marginright/2snow[i].size)+marginright/2}
snow[i].posy=0
}
}
var timer=setTimeout("movesnow()",50)
}
for (i=0;i<=snowmax;i++) {
document.write("<span id='s"+i+"'
style='position:absolute;top:-"+snowmaxsize+"'>"+snowletter+"</span>
")
}
if (browserok) {
window.onload=initsnow
316

}
</script>
Puedes personalizarlo un poco. Se pueden cambiar los colores, velocidad de caida, etc.

Enlace para que tu visitante ponga tu pgina

web como su pgina de inicio
Con este otro cdigo podrs colocar un enlace de estos que cuando el visitante hace clic sobre l tu
pgina web pasar a ser su pgina de inicio en su navegador.
No se hasta que punto puede ser interesante. Quizs se algo pesado. A t te gusta encontrrtelo en las
webs que visitas? Si la respuesta es no.... ya sabes.
Basta copiar este cdigo donde deseas que aparezca el enlace. En el cdigo de abajo has de cambiar
donde pone "http://tu-direccion.com" por la URL de tu pgina.

Puedes personalizarlo un poco definiendo las propiedades de estilo, o bien en la hoja de estilo o bien en
la cabecera de la pgina. Este es un ejemplo:

Esto es un ejemplo de lo que os saldra (Si hacis clic ser vuestra pgina de Inicio, je je):
Pgina de inicio?
Si tienes algn problema ya sabes que puedes contar con nosotros en el Foro. Nos leemos all

Efecto Enlace Parpadeante!

Nota: Funciona en iExplorer, pero no en Firefox.
317

Mediante este script puedes conseguir que un simple texto de enlace aparezca parpadeante cuando pasas
el cursor por encima.
Basta copiar este cdigo justo antes de la lnea </HEAD> en cada una de las pginas donde quieras que
el enlace parpadee.

Adems, has de colocar en la raiz del directorio de tu web este archivo que tiene extensin js. Para
crearlo abre tu Notepad o Block de Notas de Windows, copia el cdigo, pgalo en ese archivo de texto y
al guardarlo (directamente en la carpeta de tu web) le pones el nombre "parpadeante.js". Puedes
personalizarlo un poco, pero tendrs que investigar tu mismo..... Se pueden cambiar los colores,
velocidad, etc.
/*************
**** <config>
**/
startColor = "#808000"; // MouseOut link color
endColor = "#FFFFFF"; // MouseOver link color

stepIn = 50; // delay when fading in

stepOut = 30; // delay when fading out

/*
** set to true or false; true will
** cause all links to fade automatically
***/
autoFade = true;
/*
** set to true or false; true will cause all CSS
318

** classes with "fade" in them to fade onmouseover

***/
sloppyClass = true;
/**
**** </config>
**************/
/*************
**** <install>
**
**
**** </install>
**************/

hexa = new makearray(16);

for(var i = 0; i < 10; i++)
hexa[i] = i;
hexa[10]="a"; hexa[11]="b"; hexa[12]="c";
hexa[13]="d"; hexa[14]="e"; hexa[15]="f";

document.onmouseover = domouseover;
document.onmouseout = domouseout;

startColor = dehexize(startColor.toLowerCase());
endColor = dehexize(endColor.toLowerCase());

319

var fadeId = new Array();

var timerID = 0;
var theElement,theTagName,theClassName,theUniqueID

function dehexize(Color){
var colorArr = new makearray(3);
for (i=1; i<7; i++){
for (j=0; j<16; j++){
if (Color.charAt(i) == hexa[j]){
if (i%2 !=0)
colorArr[Math.floor((i-1)/2)]=eval(j)*16;
else
colorArr[Math.floor((i-1)/2)]+=eval(j);
}
}
}
return colorArr;
}

function domouseover() {
if(document.all) {
clearTimeout(timerID);
theElement = event.srcElement;
theTagName = theElement.tagName;
theClassName = theElement.className;
320

theUniqueID = theElement.uniqueID;
if ((theTagName == "A" && autoFade) || theClassName == "fade" || (sloppyClass &&
theClassName.indexOf("fade") != -1)) {
//alert(theElement);
fade(startColor,endColor,theUniqueID,stepIn);
timerID = setTimeout('pulsedown()',20);
}
}
}

function pulseup() {
if(document.all) {
clearTimeout(timerID);
if ((theTagName == "A" && autoFade) || theClassName == "fade" || (sloppyClass &&
theClassName.indexOf("fade") != -1)) {
//alert(theElement);
fade(startColor,endColor,theUniqueID,stepIn);
timerID = setTimeout('pulsedown(theElement)',20);
}
}
}

function pulsedown(theElement) {
if (document.all) {
clearTimeout(timerID);

321

if ((theTagName == "A" && autoFade) || theClassName == "fade" || (sloppyClass &&

theClassName.indexOf("fade") != -1)) {
//alert(theElement);
fade(endColor,startColor,theUniqueID,stepOut);
timerID = setTimeout('pulseup()',20);
}
}
}

function domouseout() {
if (document.all) {
clearTimeout(timerID);
var srcElement = event.srcElement;
if ((srcElement.tagName == "A" && autoFade) || srcElement.className == "fade" || (sloppyClass &&
srcElement.className.indexOf("fade") != -1))
fade(endColor,startColor,srcElement.uniqueID,stepOut);
}
}

function makearray(n) {
this.length = n;
for(var i = 1; i <= n; i++)
this[i] = 0;
return this;
}
322

function hex(i) {
if (i < 0)
return "00";
else if (i > 255)
return "ff";
else
return "" + hexa[Math.floor(i/16)] + hexa[i%16];}

function setColor(r, g, b, element) {

var hr = hex(r); var hg = hex(g); var hb = hex(b);
element.style.color = "#"+hr+hg+hb;
}

function fade(s,e, element,step){

var sr = s[0]; var sg = s[1]; var sb = s[2];
var er = e[0]; var eg = e[1]; var eb = e[2];

if (fadeId[0] != null && fade[0] != element){

setColor(sr,sg,sb,eval(fadeId[0]));
var i = 1;
while(i < fadeId.length){
clearTimeout(fadeId[i]);
i++;
}
323

for(var i = 0; i <= step; i++) {

fadeId[i+1] = setTimeout("setColor(Math.floor(" +sr+ " *(( " +step+ " - " +i+ " )/ " +step+ " ) + " +er+ "
* (" +i+ "/" +
step+ ")),Math.floor(" +sg+ " * (( " +step+ " - " +i+ " )/ " +step+ " ) + " +eg+ " * (" +i+ "/" +step+
")),Math.floor(" +sb+ " * ((" +step+ "-" +i+ ")/" +step+ ") + " +eb+ " * (" +i+ "/" +step+
")),"+element+");",i*step);
}
fadeId[0] = element;
}
Puedes personalizarlo un poco, pero tendrs que investigar tu mismo..... Se pueden cambiar los colores,
velocidad, etc.

Cmo Promocionar una Pgina Web

En CmoCrearTuWeb, entenderemos por promocin de pginas web a toda aquella actividad que tenga
por objetivo principal atraer visitantes hacia nuestra web. No se si la defininin es correcta o no, pero es
la que tomaremos.
Ten en cuenta que aunque la promocin de pginas web solo ocupa una de las secciones de esta web, el
tema da para llenar muchas muchas pginas, que adems estaran en continuo cambio y actualizacin, de
modo que te aconsejo que no te pares aqu, sino que visites las webs relacionadas que te propongo, que
leas todo lo que puedas del tema, saques tus propias conclusiones y por fin experimentes en tus propias
carnes (o pginas) lo que con todo esto aprendas.
Hay personas que se dedican exclusivamente a promocionar pginas web, y an as, es fcil quedarse
atras si no ests al da en estos temas. De todos modos, aqu encontrars informacin suficiente como
para dar el primer paso, pelear por tus primeras posiciones en buscadores y dar a conocer tu pgina web,
al menos, con ms nivel que no ya la mayora de personas que crean una web, sino que la mayora de
aquellos que se hacen llamar webmaster (yo mismo lo hago, fjate....)

324

Espero no haberos asustado. Realmente la promocin de webs no tiene nada de complicado. Es solo
cuestin de "conocer" algunas normas bsicas y sobre todo, sentido comn (lamentablemente el menos
comn de los sentidos).
En los enlaces de esta secin, puedes ver distintos modos de dar a conocer tus pginas web al mundo.
Date un paseo por ellos y ve aplicando cada una de las cosillas que aprendas. Lo ms bsico en este caso
es tener paciencia. No esperes obtener resultados desde el primer da, ni siquiera desde el primer mes,
pues la mayora de cosas bien hechas llevan su tiempo en devolver buenos resultados, pero si sigues
confiando en m, sabrs que al final agradecers lo aprendido en estas pginas.
Solo una anotacin antes de dejaros seguir. Arriba, en la barra amarilla, si pulsas en Ms econtrars otros
apartados acerca de promocin de pginas web. No haba sitio para todas, que le vamos a hacer :) Nos
leemos!

Malas prcticas en Promocin de Paginas Web

Realmente, la verdadera mala prctica en cuanto a promocin de webs es simplemente no practicar.
Todo lo que hagamos en cuanto a promocin puede servir para dar a conocer nuestra pgina web, pero
interesa que nos conozcan "de buen grado", es decir, en sentido positivo. Y por qu digo esto?
Es una prctica habitual en todos nosotros al comenzar a promocionar nuestra nueva pgina web, el
cantar a todos los vientos que nuestra web es magnfica (interese o no a la gente a la que informamos),
que contiene todo lo que estn buscando (sea o no cierto), que est repleta de informacin (aunque est
an vacia o con el famoso cartelito "en contruccin"), y para colmo, lo hacemos no una ni dos, sino que
machacamos al personal comunicndoselo decenas de veces. Eso se llama Spam, meterle a la gente por
los ojos una publicidad no solicitada, casi siempre repetitiva e indiscriminadamente. Eso, lejos de ser un
buen modo de promocionar una pgina web, termina cansando al posible visitante haciendo que ste
huya de lo que le proponis. Poneos en su lugar y descubriris cul es el buen camino a la hora de
promocionar una pgina web. Preguntaros a vosotros mismos..
Deseo recibir informacin acerca de la aparicin de una nueva web, me interese o no el tema que
tratan? Normalmente la respuesta es no, aunque podra ser un s si... si qu? (volveos a preguntar).
Quizs aceptara si solo me lo hicieran saber una sola vez (suele serme suficiente...).
Deseo visitar un Foro y ver anuncios de pginas web? Bueno, solo si realmente est relacionado con la
temtica del foro, y siempre que no encuentre ms de un mensaje de promocin.
Deseo recibir esta informacin en mi correo electrnico? Personalmente, suelo borrarlos en cuanto los
veo aparecer (a menos que sean vuestros, claro, je je je).
325

Me gusta recibir noticias sobre actualizaciones de una pgina web? Realmente, solo si lo he pedido
antes, y solo si me describen qu es lo que han actualizado y si no es demasiado frecuente. No me gusta
recibir estos mensajes y luego acudir a la web y verla tal y como estaba.
Sueles votar en aquellas webs que visitas donde aparece el tpico cartelito "Vota por esta web"? Solo si
me ha impresionado, o es de un colega, y si tengo unos minutos que perder, auque si para votar hay que
registrarse en algo, paso del tema rpidamente.
Sueles ir a buscar pginas de tu inters en listados de webs? Si te refieres a esas listas obtenidas por los
"Vtame" anteriores, realmente nunca lo he hecho.
Entonces Cmo demonios encuentras las pginas que realmente te interesa? Est claro, uso buscadores
o pincho en algn enlace que me llama la atencin en algunas webs. Pero lo hago POR QUE QUIERO.
Bueno, las respuestas a las preguntas anteriores son por supuesto personales, pero quizs os sintis algo
identificados con ellas. De estas respuestas podis sacar en claro que:
1.- A la gente no le suele gustar recibir E-Mails de promocin, y menos si son repetitivos, engaosos o
fuera de lugar.
2.- No les gusta el spam en los foros y a menudo no les hacen ningn caso.
3.- Los tpicos "Vtame" o "Tops", no valen para mucho (aunque pueden aprovecharse...como veremos).
4.- Lo que realmente interesa es aparecer en los buscadores y conseguir enlaces a mis pginas web.
Adems, ante tal avalancha de spam, ya con ver un anuncio en la web no hacemos ni caso, pero si en
lugar de encontrarlo en la red lo encontramos en... que se yo, en la calle, nos llama realmente la
atencin. Quizs por no existir demasiados an. Por ejemplo, si entro en una tienda y veo un cartel con
una web apuntada, me llama la atencin ms que si la veo en un portal famoso de internet. Os da esto
alguna idea....?
Todo esto lo veremos an ms claro en el resto de apartados. Supongo que con estas lneas vas captando
la idea.

Los Mtodos Clsicos tambin cuentan en la

Promocin de Pginas Web
Estamos tan inmersos en el mundo de internet (algunos...) que a veces pasamos por alto caminos
realmente fciles y en ocasiones bastante eficientes a la hora de promocionar una pgina web.
Olvidate por un momento de que existe internet. Cmo daras a conocer tu pgina web?

1.- Colocando carteles en la calle, en la tienda de al lado, en la

papelera,...
326

Si si, no lo tomes a broma. Sobre todo cuando el tema de nuestra web tenga un caracter "local", como
hablar de la ciudad en la que vives, o sobre un grupo de msica local, o si es de una asociacin.. los
carteles pueden ser una muy buena opcin.
Usualmente veo en las escuelas, panaderas, etc., el tpico folio con la propaganda particular, y con el
telefono de contacto colocado a modo de "flecos" que cuelgan del papel, para que el interesado lo
arrangue del folio principal y no tenga que tomar nota. Lo mismo podemos hacer con la URL de nuestra
web. Y si pasamos al da siguiente por el lugar, veremos cuantos "flecos" le faltan, para ver si tiene exito
o no (mira tambin en el cubo de la basura que hay junto a l, por si acaso ... je je je).

2.- Un anuncio en alguna revista local de tirada gratuita?

Psate por la concejala de juventud de tu ciudad. All podrs obtener un listado de las asociaciones
registradas y quizs descubras alguna con una temtica similar a la de tu web. Si es as, contacta con
ellos y proponles insertar algn anuncio en sus publicaciones, si las tienen, claro. Es mala idea? Tu
vers...

3.- Cuntalo a todos

Cuenta que tienes tu web a todos tus amigos, a tus familiares, (al policia que te multa..) a todo el mundo
que te cruces. Espero que la URL sea fcil de recordar, sino, igual de boquilla se olvidan.

4.- Qu tal colocar pancartas en la pared?

O un grafity (all donde se pueda, claro)? O en el poste de un semaforo? Ayer mismo, cuando iba al
trabajo vi un coche delante del mo en el que el tio haba puesto, con letras de pegatina bien hermosas y
azules (el coche era blanco) "www.aquetepegoconlapala.com" je je je. Es tan gracioso que no lo he
olvidado. ESO, es promocin.

5.- Y unas camisetas con tu logotipo y direccin de la web?

Tampoco es mala opcin hacer unas camisetas o gorras con el logotipo y la url de tu pgina web. Busca
alguna tienda y pregunta cunto puede costarte y tendrs dos opciones, o regalarlas, o ponerlas como
premios en algn concurso que organizes, o incluso por qu no, venderlas desde tu pgina web... (Si
deseas saber cmo podras cobrar cosas que vendas en la red, visita la pgina de PayPal).
Mira por ejemplo aqu:

Ves que fcil es pedir unas camisetas? Escribes lo que quieres y listo, a pagar y esperar recibirlas! A ver
si me animo, pido unas cuantas y las rifamos en el foro, oki?

327

Los Buscadores y la Promocin de Pginas Web

Sin duda, la importancia de aparecer entre los primeros puestos de los principales buscadores existentes
es algo clave para conseguir un nmero importante de nuevos visitantes para nuestras pginas web.
Si crees que no hay nada que hacer para mejorar nuestras posiciones ests totalmente equivocado. Hay
multitud de cosas que podemos hacer y vamos a verlas todas en esta seccin de Los Buscadores.
En el argot de los webmasters a esto se le llama "Posicionamiento de Pginas Web" y es toda una
ciencia en contnua evolucin. Existen empresas y profesionales que se dedican exclusivamente a
colocar las pginas de sus clientes en esos preciados primeros puestos. Estas personas se hacen llamar
"Seos".
Esto significa que simplemente con escribir "posicionamiento web" en cualquier buscador, puedes
encontrar infinidad de informacin sobre este tema. Pero cmo sabe un buscador qu pginas mostrar
segn las palabras que ponemos en ellos? En esta seccin aprenders cmo. Tambin aprenders a
realizar pequeos cambios en tus pginas web para mejorar posiciones, te mostrar en qu buscadores
realizar el alta de tus web e incluso como comprobar que tal te va con estos consejos con el paso del
tiempo gracias a ciertas pginas que te muestran esta evolucin.
Pero para todo ello es necesario tener una idea de los parmetros en los que se basan los buscadores para
determinar si una web debe estar en los primeros puestos o no.
Tambin, segn uses estos consejos, los buscadores pueden banearte, es decir, colocarte en una lista
negra por hacer cosas que no les gustan nada, pero tambin de esto hablaremos un poco para que no te
ocurra. Eso si, lee estos consejos antes de ponerte manos a la obra, para evitar problemas irreversibles en
la mayoria de los casos.
Utilizando correctamente estos consejos y un poquito de sentido comn, logrars un mejor
posicionamiento de tus pginas web.
Y si todo esto se os queda corto, siempre podis acudir a algunas buenas pginas donde verdaderos
profesionales del posicionamiento web pueden echaros una mano, como por ejemplo, las siguientes:

www.xeoweb.com, posicionamiento web.

Tambin puedes visitar el foro de posicionamiento en buscadores de www.xeoweb.com

Los Tops de Pginas Web

Se trata de webs donde puedes insertar tu pgina y que hacen un ranking en base a las votaciones que
hace la gente. Normalmente tienes que insertar en tu web un banner de la pgina que ofrece el Top para
que tus visitantes puedan votarte desde tu web. Cuantos ms votos obtengas ms alta ser tu posicin en
el ranking o top. No es gran cosa, pero es una forma de promocionar tu web al principio.
Ponemos un ejemplo? Pincha en el banner de abajo para votar por ComoCrearTuWeb:

328

TopWeb de MuchoGrafico

Promocin de Pginas Web en News y Foros

Ciertamente, me da cierto pavor contaros lo que a continuacin os describo. Solo espero que sepais
usarlo con tacto y sin llegar al Spam. En fn, confio en vosotros.
Adems de que son una fuente inagotable de donde conseguir la informacin que seguramente necesitis
para terminar de rematar el contenido de vuestra pgina web, los foros y las news o grupos de noticias
son tambin un buen lugar donde promocionar una pgina web.
Todos conocis lo que son los foros y su funcionamiento, pero quizs no tantos conocen realmente lo
que es un grupo de noticias, tambin llamadas News.
Se trata de un colectivo de personas que envian sus preguntas o respuestas de otros usuarios al resto de
colegas de ese mismo grupo. Es decir, que al participar con ellos, recibes todos los mensajes que ellos
generan. Estos mensajes pueden ser o bien dudas o consultas, o bien las respuesta a las mismas. As, si
envas una cuestin al grupo, la reciben todos. Si uno de ellos responde a una cuestin, todos, incluido
t, lo reciben igualmente. Aunque los mensajes de un News pueden consultarse directamente en alguna
web, lo normal es recibirlas en tu programa de correo (Outlook, por ejemplo).
Existe infinidad de grupos de noticias, cada uno con un tema ms o menos especfico. Si el tema de tu
web trata de pelculas de cine, seguro que existe un grupo de noticias que hable de esto. Una vez
localizado el que te interesa, puedes dar a conocer tu web a todos sus componentes sin ms que enviar
un mensaje al grupo. Todos lo recibirn. Pero.....
Antes de hacerlo, y para evitar caer en el Spam, deberas informarte de sus reglas. Quizs lo mejor sea
escribir un mensaje dndote a conoer y preguntando sobre esas reglas. Entabla conversacin (si el tema
est relacionado con tu pgina web seguro que encuentras la ocasin) y no fuerces el momento en el que
promocionar tu web para evitar que todos te rechacen.
Lo mejor es esperar a que te conozcan un poco. As, adems de no molestarse por que les comentes
acerca de tu web, quizs les agrade ms visitarla y ver de lo que has sido capaz. Puede ser una buena
idea preguntarles su opinin acerca de la web, qu cosas les agradan y que cosas no, en lugar de soltar
simplemente que tienes una web y que quieres que la visiten. Adems, seguro que obtendrs valiosa
informacin. No olvides que "el cliente siempre lleva la razn" y si la web al fin y al cabo la haces para
tu pblico, stos se merecen que les escuches y les hagas cierto caso.
Lo dicho para los grupos de noticias es igualmente vlido a la hora de promocionar una pgina web en
un foro. No debera molestarte entablar cierta amistad antes de soltar tu anzuelo, de modo que ten
paciencia.
Una vez hecho, responde con amabilidad a los comentarios obtenidos y no vuelvas a pedir que te visiten
hasta pasado un tiempo razonable, y con algn motivo justificado (una cambio importante, alguna
actualizacin considerable...). No olvides que en un Foro, el mensaje queda ah por mucho tiempo, por
lo que obtendrs visitas durante quizs unos meses.
329

Evita publicar estos anuncios de promocin en Foros o News que nada tengan que ver con la temtica de
tu pgina web, pues ni te servirn de mucho ni les agradar a los lectores. No pierdas el tiempo,
invirtelo en participar en los que realmente tienen que ver. Y si realmente conocer del tema (es de
esperar que si, pues tienes una web del mismo) responde a las consultas del resto de colegas.
No olvides adems escoger una buena firma para tus mensajes, tanto en Foros, News como en cualquier
E-Mail que envies a tus amigos. Es un espacio til que no debes desaprovechar.
Pero hazme caso, no seas plasta, no canses a la gente, lo bueno si breve... dos veces bueno.

Qu son las NewsLetters?

Las Newsletters no son ms que mensajes o E-Mails que podis utilizar para mantener informados a
vuestros visitantes de los cambios y novedades que ocurren en vuestra pgina web con el fn de que no
tengan que estar cada dos por tres visitandola para ver si algo ha variado.
Las Newsletters (a partir de ahora las llamar News para abreviar) son entonces simples E-Mails. De
todos modos, si queris que tengan un mejor aspecto, podis darle forma de pgina web, es decir, no un
simple texto sino un texto cuidado, con palabras de distinto color segn proceda, ttulos destacados, o
incluso enlaces y imgenes.
Esto se hace igual que una pgina web normal, pero algo ms cortita y sencilla, pues tampoco es plan de
que el que lo reciba se pase media hora descargndolo, no?
Como una imagen vale ms de mil palabras y ya llevo unas 300, je je je, mejor os pongo un ejemplo de
una posible News que podra mandaros yo mismo para anunciaros las novedades de CmoCreaTuWeb.
Pinchad aqu para verla.
Respecto a alguna que otra recomendacin, os dir lo siguiente:
1.- Imaginad que sois vosotros los que recibs la News que habis pensado mandar. De esta manera
sabris ms o menos lo que el que la recibe puede soportar. Es decir, si no os gusta recibir ese tipo de EMails cada da, no los mandis cada da. Si no os gusta que sean largos, no los escribais largos. Usad
vuestro sentido comn (y que Dios nos proteja, je je je).
2.- Intentad ser ordenados y muy escuetos.
3.- Que no sea demasiado larga.
4.- Como mucho, mandarlo una vez al mes para no haceros muy pesados.
5.- No mandrselo a quien no lo pida.
6.- Dejad de mandarlo a quien no quiera recibirlo ms.
7.- Llevad un control de las personas interesadas en recibir la News para evitar errores. Eliminad a los
que no la quieran recibir ms y aadir a los nuevos.
330

8.- Incluid un mensaje al final pidiendo disculpas si han recibido el E-Mail por error.
9.- Incluid vuestro correo por si alguien quiere comentaros algo.
10. Por suspuesto, incluid el nombre y direccin de vuestra web y recordadles a que pgina os refers,
pues puede que el que reciba la News no recuerde de qu les estis hablando.
11.- MUY IMPORTANTE!! Cuidado con los Virus. Estos se propagan mucho con los E-Milios de
modo que si tenis la menor sospecha de que estis infectados, NO ENVIEIS las News, pues podis
infectar a vuestros visitantes y pueden enfadarse mucho (y con razn).
Si lo deseais, pedidme en el Foro CCTW que inserte explicaciones ms detalladas sobre cmo crear una
Newsletter, aunque como os digo, es similar a una pgina web y adems os dej un ejemplo para que lo
estudieis. An as, avisadme si queris que profundice an ms.

Crear un Formulario para Recomendar tus

Pginas gracias a
www.CutAndPasteScripts.com
En este apartado veremos como insertar en nuestra pgina web un formulario que permita a nuestros
visitantes, enviar un E-Milio a sus colegas desde nuestra web, en el que l les recomienda que nos
visiten. Todo de forma automtica, fcil y, profesional (a tu salud Swanyta, je je je).
Para ello necesitamos que alguien nos ofrezca este servicio. Tras probar algunos distintos, he optado por
el que seguiremos en estas notas. Se trata de Cut And Paste Scripts, un portal con varios Scripts que os
pueden resultar tiles. Ser necesario registrarse en ese portal que adems est en ingls, pero no os
preocupis por eso, yo os lo doy ms que digerido para que no tengis problemas.
Por supuesto, antes de entrar de lleno en el asunto, que solo nos llevar unos pocos minutillos, os dejo
una imagen de lo que podis conseguir.

331

Tambin podis probar el que yo tengo en CmoCrearTuWeb, en la seccin Acerca de CCTW, para que
veais si os gusta antes de nada. Ten en cuenta que se puede retocar todo, los colores, el tamao, etc.
Tambin os indicar paso a paso cmo hacerlo.
Si te interesa nos vemos en la siguiente pgina pulsando en el men lateral de la izquierda, sobre El
Registro.

Crear una cuenta en

www.CutAndPasteScripts.com
En primer lugar vamos a abrir la pgina de Cut And Paste Sripts. Al pulsar se abrir en una pgina
distinta para poder seguir las indicaciones. Est todo en ingles, pero no hay problema, fiaros de mi, je je
je.
Aparecer algo como esto:

332

Pulsad sobre "Sign Up" (donde apunta la flecha en la foto de arriba) para registraros.

Ahora, tras leeros todo lo que aparece (je je je, os voy conociendo ya...) haced clic en la frase de abajo,
en azul ("I agree to these terms and conditions" = Estoy de acuerdo con los trminos y condiciones) para
aceptar los trminos que "todos" os habis leido y entendido... o no...
A continuacin rellenar vuestros datos en la siguiente pgina.

333

Y tras aceptar os aparecer una pantalla para confirmar los datos.

Tras pulsar sobre el botn "Create Account!" quedaris registrados y os aparece la confirmacin:

Bien. Ahora la cuenta est creada. Tenis el nombre de usuario y la contrasea para entrar pulsando
sobre la frase de la siguiente pantalla "Click here to enter your Members Area" o sobre el cuadro
derecho, donde pone "Member Login".

334

Configurar el servicio Recomienda de

www.CutAndPasteScripts.com
Como deciamos, ahora la cuenta est creada. Tenis el nombre de usuario y la contrasea para entrar
pulsando sobre la frase de la siguiente pantalla "Click here to enter your Members Area" o sobre el
cuadro derecho, donde pone "Member Login".

Si todo ha ido bien, ya podis acceder a la seccin que queremos haciendo clic en "Recommendation".

335

En el primer recuadro de la ventana siguiente, escribid el mensaje que deseais que reciban los colegas de
vuestros visitantes. En el segundo un saludo para empezar el mensaje y en el tercero una despedida. No
es muy fcil ser original... Despus pulsad en "Next" (siguiente).

En el primer recuadro de la siguiente ventana, escribid el "asunto" del E-Mail que se va a enviar a los
colegas de vuestros visitantes, en el segundo el asunto del E-Mail que t recibiras avisndote que alguien
a usado el servicio, es decir, que alguien, realmente te ha recomendado. En los recuadros tercero y
cuarto, escribid la direccin "completa" de (si las habis hecho, sino dejarlo en blanco) de las pginas a
las que los usuarios sern enviados, cuando el servicio haya funcionado con xito y cuando haya
ocurrido un error, respectivamente.

336

En los dos ltimos recuadros poned vuestro nombre y E-Milio, donde os enviarn los avisos cuando el
servicio de recomendacin sea usado. As, estaris al loro de cunto es usado y por quin.
Oki, una vez terminado todo esto se os mostrar el cdigo que habis de pegar en la pgina donde
deseais que aparezca la tabla con el formulario de recomendacin. Seleccionarlo "todo", copiarlo y
pegarlo por ahora en un archivo txt, para tenerlo siempre a mano.

Casi al final de ese cdigo aparece un nmero que usaremos ms adelante. En la imagen de arriba
aparece coloreado para que sepis a cul me refiero. Luego veremos para qu es.
337

Personalizar el Formulario de
www.CutAndPasteScripts.com
Quizs no os termine de gustar el aspecto del formulario. Por defecto, es una tabla como la que os pongo
abajo. Pero no os preocupis, pues podis apaarla a vuestro antojo con solo saber un poquito de HTML,
je je je. No pasa nada. Por un lado, en la seccin Curso de HTML podis aprender suficiente, y por otro,
os dar algunos formatos distintos por si os gusta el trabajo hecho, ja ja. Lo importante para que os
funcione bien es colocar el nmero que aparece en el cdigo anterior, casi al final del cdigo, donde
pone "activenumbre" VALUE="XXXXXXXX" (el de la imagen de la pgina de antes). Tomad nota de
l pues os vendr bien si queris usar los formatos que yo os dejo a continuacin.
El formato que os saldr con el cdigo original es este:

Bueno, realmente a vosotros os saldr en ingles, pero os ensear como ponerlo en spanis, no hay
problema.

338

Si usais el Dreamweaver, veris que al pegarlo saltan algunos errores (aunque todo funcionar
correctamente). Es por que el cdigo deja mucho que desear, pero podis arreglarlo o usar el mio, ya
corregido y depurado, que queda algo as como este otro (ste si est en espaol!):

El cdigo de este formato es el siguiente. Recordad poner vuestro nmero de cuenta en lugar de las
XXXXXXX y cambiar los textos de los ttulos a vuestro gusto.

Realmente, en este cdigo estn ms datos, de modo que an teneis que cambiar estas cosillas (son las
ltimas lneas del cdigo).
<INPUT type="HIDDEN" name="activenumber"
value="XXXXXXXXXXXXX">

339

En lugar de XXXXXXXXX poner el nmero del crculo rojo de la pgina anterior (el vuestro, claro).
<INPUT type="hidden" name="redirect"
value="http://www.comocreartuweb.com/enviado-ok.html">

En lugar de www.comocreartuweb..... poned la ruta completa de la pgina a la que queris que el

visitante retorne tras enviar la recomendacin. Puede ser una pgina creada con ese propsito, donde
ponga "gracias por usar el servicio" o algo as, o puede ser la que t quieras. Asegrate que queda entre
las "comillas".
<INPUT type="hidden" name="membername"
value="Jorgens. Webmaster de CmoCrearTuWeb.">

En lugar de "Jorgens. Webmaster de CmoCrearTuWeb", colocad lo que queris, entre las comillas de
nuevo.
<INPUT type="hidden" name="memberemail"
value="comocreartuweb@comocreartuweb.com">

Entre estas comillas, poned vuestro E-Milio.

<INPUT type="hidden" name="username"
value="jorgens">

Y aqu, el nombre que pussteis al registraros con CutAndPasteScripts, respetando las maysculas y
minsculas.
Listo, tras cambiar esto ya tenis el cdigo preparado para insertarlo en vuestra web.
Haced experimentos con l y ya me contaris en el Foro CCTW qu es lo que os sale. Al final todo a
quedado genial y en espaol. No ha costado casi nada y encima funciona. Esto no suele ocurrir siempre,
de modo que no os acostumbreis, ja ja ja. Hasta otra!
(Esto no est terminado. Dejame unos das para mejorarlo. Las siguientes secciones "Insertndolo",
"Verificacin" y "Otros Servicios",no estn acabadas an, y las existentes sern retocadas. Disculpa.)

Los Directorios de Pginas Web

Como ya sabrs a estas alturas, para obtener una buena cantidad de visitas, necesitas aparecer en los
primeros puestos de los principales buscadores, pero para que stos te incorporen (te indexen) en sus
bsquedas, antes necesitas ser un poco famoso, es decir, tener unos pocos enlaces hacia tu web, desde
otras pginas.
Cuando tu pgina web es algo popular no hay problema en conseguir poco a poco ms y ms enlaces (si
la pgina es buena, a menudo los webmaster pondrn enlaces a tu web en sus pginas sin que se lo
pidas), pero cuando la pgina es nueva, cuesta lo suyo encontrar esos primero e indispensables enlaces.
Una buena manera de obtener enlaces hacia tu web en los inicios es registrar tu pgina en los directorios.
Pero qu son los Directorios?
340

No son ms que listas de enlaces de pginas web organizadas por categorias. Hay directorios gratuitos y
directorios de pago, directorios que te piden algo a cambio (como poner un enlace desde tu web al
mismo directorio, lo que se suele llamar "Enlaces Recprocos") y otros que no piden nada, directorios
que aceptarn tu pgina web sin problemas y directorios realmente dificiles de insertar una pgina. De
hecho, Google, Yahoo, Altavista.. son directorios de pginas web.
En un principio vamos a intentar insertar (realmente se dice indexar) tu nueva pgina en una laaarga lista
de directorios gratuitos y que adems no te van a pedir nada a cambio. Para ello antes has de tener
algunas cosas bien claras y definidas. Lo vemos en la pgina siguiente.

Los Directorios de Pginas Web

Antes de ponerte como un loco a insertar tus pginas web en todos los directorios que encuentres por la
red (en la pgina siguiente hay unos cuantos), tienes que tener un par de cosas bien claras.

0.- Como siempre, un poco de orden

Toma nota de cada uno de los directorios en los que te das de alta. Normalmente a los propietarios de
estos directorios no les agrada mucho que repitas tu peticin de insercin de tu web en sus listados una y
otra vez. En algunos casos si te repites te borran, luego es mejor tener cierto control de los directorios a
los que vamos accediendo. De este modo, si oimos hablar de alguno que pensamos que es nuevo,
podremos comprobar si nuestra web est ya en su lista y evitamos dar la bara.
Adems, en la mayoria de estos directorios de pginas web existe un buscador interno. Antes de insertar
nuestra pgina web hemos de comprobar con ese buscador si est ya registrada, por ejemplo, escribiendo
en l el nombre de dominio de nuestra web (www.comocreartuweb.com, por ejemplo).

1.- La seleccin de Keywords o palabras clave

Ponte en el lugar de un posible visitante de tu web. Imagina que an no conoce tu pgina y piensa Qu
palabra o conjunto de palabras debera escribir para que tu web apareciera en un buscador? Para mi
pgina web, por ejemplo, estas palabras o conjunto de palabras clave seran, "crear webs", "crear pginas
web", "diseo web", etc, etc, etc. Cules seran las tuyas? Pues bien, esas son las palabras que han de
aparecer en los enlaces hacia tu web. De este modo, Google, MSN, Yahoo etc, te conocern por esas
palabras aparecidas en enlaces hacia t desde otras webs. Este es el truco!
Cuando ingreses en un directorio, este te pedir que escribas un ttulo y una descripcin. Te explico eso a
continuacin.

2.- El ttulo de la pgina web

El ttulo de la web que has de colocar en los directorios debera estar formado por dos, tres o cuatro
palabras, no ms. Adems, sera bueno que incluyeran alguna de las palabras clave que hemos visto
antes. Por ejemplo, algunos buenos ttulos para mi web seran "Crear Pginas Web", "Diseo Web",
"Crear Pginas", etc. Nadie va a escribir en un buscador "Como crear tu web", no es lgico. Es ms
lgico pensar que escribirn "Como crear mi web", pues son ellos los que escriben y los que desean
341

aprender, por lo tanto, ponte en su lugar y piensa un poco qu es lo que ellos escribirian al hacer una
bsqueda.
Y por qu entonces yo tengo como dominio www.comocreartuweb.com en lugar de
www.comocrearmiweb.com? Simplemente porque me inform tarde de lo que ahora os estoy contando,
y ahora no me apetece registrar un nuevo dominio. De todos modos, cuando escojo un ttulo en un
directorio pongo las frases que puse de ejemplo antes, pues no tiene nada que ver el ttulo de la pgina
web (puede ser el que t quieras) con el nombre del dominio.

3.- La descripcin de la pgina web

Adems del ttulo la mayora de directorios te pedirn una breve descripcin de tu pgina web. Evita
incluir mensajes como "somos los mejores", "haz clic aqu", etc. Simplemente una clara descripcin de
la web. Si adems puedes incluir en esa desripcin alguna de las plabaras clave vistas anteriormente,
mejor que mejor.

4.- Palabras clave

En otros casos quizs te pidan adems que escribas tus palabras clave preferidas para tu pgina web.Ya
hemos visto cmo escoger estas palabras clave, de modo que no me repetir.

5.- Enlaces Recprocos

En algunos casos, algn directorio puede exigir que incluyas en tu pgina web un enlace hacia ellos a
cambio de que tu web aparezca en sus listados. Esto es lo que se llama un enlace Recproco, es decir, tu
web aparece en el directorio y un enlace hacia ese directorio aparece en tu web. Si no ests dispuesto a
esto no pierdas el tiempo intentando insertar tu web en esos directorios.
Si realmente te interesa ponerles un enlace recproco y acabas ponindolo en tu web, toma nota en la
lista que te coment al principio de estas lneas. Es decir, apunta en una hoja tanto los directorios en los
que te has inscrito como tambin si les has colocado un enlace recproco. Ms que nada, para tener
cierto orden y control de tu trabajo.
Combiene poner el enlace en tu web hacia el directorio correspondiente antes de darte de alta en ellos (si
es que optas por hacerlo), pues normalmente, a la vez que te piden los datos de tu web te pedirn
tambin la direccin en la que has colocado el enlace hacia ellos. Por favor, no pierdas el tiempo
engandoles, no sirve de nada.

Moraleja
Bueno, esto es todo lo que has de saber por el momento. Ya ests preparado para continuar en la pgina
siguiente, donde encontrars un listado de directorios. En cada uno te indico su enlace, las temticas que
aceptan, si permiten la inclusin o no de pginas con contenido para adultos (la mayora no las acepta),
el idioma y por ltimo si obligan que les pongas o no un enlace recproco. Adelante y suerte.

Listado de Directorios de Pginas Web

342

Aqu os dejo un listado de directorios donde poder incluir vuestra pgina web. En algunos casos es
opcional inlcuir en vuestra web un enlace hacia ellos. Aunque sea opcional, no est de ms colocarlo,
para agradecer el gesto de aparecer en ellos, recordadlo.
Si conoces algn otro dmelo en el Foro.
Directorio
eldirectoriode.net
Ruleta
Idirectorio-Directorio de links gratis
www.directorio-hispano.net
www.caraygaray.com.ar
www.avizora.com
www.ezilon.com
www.troglod.com
www.guiaserviciosweb.com
www.hiperenlaces.com
www.spacebom.org
interspain.net
www.posicionatuweb.net
directorio.valdemoro.biz
All links Directorio de enlaces
www.todo-letras.net/directorio
directorio Web (de Davilac.net)
www.goipcom.info
Directorio Gratuito
Add URL-Free.com - High PR Free Directory
es.dir.alego.com
www.cheinternet.com
www.odpmap.org
www.directorio.soyd.org
directorio.logicsystemdata.com
www.compartimos.net/directorio
www.esdirectorio.com
Directorio Web
Directorio de Pginas Web
VDSLTodo
www.tagoror.com
www.abcdirectorio.com
Infodatos.Net - Directorio Web Espaa
www.xeoweb.net
Directorio de Empresas
Sitios Web
plantillas web
DirectorioES

Temtica
todas
todas
todas
todas
todas
?
?
todas
todas
todas
todas
todas
todas
todas
todas
todas
Todas
Todas
Todas
Todas
Todas
Todas
todas
todas
todas
todas
todas
todas

Adultos
No
No
No
?
?
?
?
no
?
?
?
?
?
?
?
?
?
?
?
No
?
?
Si
?
?
?
?
?

Idioma
Espaol
Espaol
Espaol
Espaol
Espaol
?
?
Espaol
Esp/Ing
Espaol
Esp/Ingl
Esp
Esp/?
Esp/?
Esp/?
Esp/?
Esp/?
Esp/?
Esp/?
Esp/Ing
Espaol
Esp/?
Esp/?
Esp/?
Esp/?
Esp/?
Esp/?
Esp/?

Recprocos
Opcional
Obligatorio
opcional
opcional
opcional
?
?
opcional
opcional
opcional
opcional
opcional
?
Obligatorio
Opcional
Opcional
Opcional
Opcional
Opcional
Opcional
?
No
opcional
opcional
opcional
?
Obligatorio

todas
?
todas
todas
todas
todas
todas
??
??

No
?
?
No
?
?
?
??
??

Epp/Ing
Esp/?
Esp/?
Esp/?
Esp/?
Esp/Ingles
Esp/?
Esp/??
Esp

Obligatorio
?
Opcional
Opcional
Opcional
Opcional
Obligatorio
?
?
343

Blog de tecnologa: Comunicaciones, audio, video y

Todas
??
Esp
entretenimiento
Buscador - Empresas
Todas
??
Esp
Ocio y Diversion
Todas
??
Esp
Hacer paginas web
Todas
??
Esp
Diseo web
Todas
??
Esp
Directorio03 de enlaces
Todas
No
Esp
Promociona tu web : Directorio de Enlaces
Todas
No
Esp
Directorio de enlaces BD
Todas
No
Esp
Crea tu web desde cero
Todas
??
Esp
Diseo Web Malaga
Todas
No
Esp
Web Directory: Directorio tematico de sitios interesantes. Encuentra lo que buscas por
categorias o por palabras claves como viajes, hoteles, blogs y muchas cosas ms.Todas??Esp

Opcional
Opcional
Opcional
Opcional
Si
opcional
opcional
opcional
Opcional
Obligado
Opcional

Tambin te dejo una serie de directorios en Cataln, por si te interesa.

Nota para los Webmasters de Directorios: Si tienes un directorio y deseas aparecer hzmelo saber en
el Foro. Igualmente, si te interesa cambiar las palabras clave de tu enlace o aclarar alguna caracterstica.

Cmo Hacer Rentable tu Pgina Web

Existen algunos modos de que ganes algn dinero gracias a tu web, pero no creas que vas a poder dejar
de trabajar y vivir solo de esto. No es imposible, pero desde luego no es lo normal. Eso si, no es muy
dificil llegar a ganar lo suficiente como para pagar un registro de dominio y un servidor decente, e
incluso quizs te sobre algo para tus pequeos vicios.
CmoCrearTuWeb obtiene hoy por hoy unos 6 euros al mes (Octubre de 2005), y teniendo en cuenta que
dedico el 95% de mi tiempo libre en mejorar la web y sus contenidos y apenas nada de tiempo en
optimizar la web con fines econmicos, no esta nada mal.
Si, he dicho "optimizar la web con fines econmicos", pues existen extrategias para hacer que una
pgina web obtenga ms ingresos. En esta seccin te hablar de la insercin de banners y enlaces
publicitarios a travs de los cuales obtener un dinerillo, centrndonos basicamente en agencias
publicitarias que yo mismo he probado y que me parecen serias.
Esto no es como el tpico mensaje basura que te prometen el oro y el moro. Son solo consejos que
puedes seguir o no y que pueden funcionar o no segn cmo marche tu web y cmo enfoques tu
estrategia. Como se suele decir en estos casos (sea o no cierto), yo no gano con esto mas que mostraros
algo que quizs os sea til, eso me basta.
Las ganancias que puedes obtener mediante la publicidad en tu pgina web dependen principalmente de
factores relacionados bien con la pgina web, o con la publicidad o bien con los visitantes.
Desde el men de la izquierda puedes profundizar acerca de estos factores. Ya me contaris en el Foro
vuestras experiencias y dudas.

344

Por cierto, no intentis hacer clic en vuestra propia publicidad. La mayoria de las compaias
publicitarias pueden detectar estos fraudes y anularn la cuenta irreversiblemente y de por vida, una
pena. Tampoco incitis a vuestros visitantes a hacerlo, simplemente dejar la publicidad ah y que sea lo
que Dios quiera. Que haga clic el que lo desee, sin presiones. Es un consejo.

Factores Relacionados con tu Pgina Web

Puedes adivinar fcilmente que las ganancias que puedes obtener a travs de la insercin de publicidad
en tu pgina web estan altamente relacionadas entre otras cosas con la cantidad de visitas que tengas. En
principio cuantas ms visitas tenga tu pgina web mayor ser el nmero de impresiones, clics, registros
y/o ventas gracias a los anuncios y por tanto mayor sern tus ganancias.
Es importante que a tus visitantes les guste tu web y que vuelvan a ella peridicamente (quizs no les
interese hoy tu publicidad, pero quizs s otro da).
De modo que el truco estar en coseguir la mxima cantidad de visitas posible. Y cmo se hace esto?
Pregntatelo a t mismo. Por qu visitarias una web?

Porque el tema me interesa.

Porque no hay muchas webs mejores que esa.
Porque es la que he encontado en los buscadores.
Porque varia los contenidos periodicamente

Porque me resuelve cosas

Porque tiene un Foro muy vivo y ameno.
Porque tiene un diseo agadable.

Y por qu razones no lo haras? Quizs por...

Porque la pgina tarda mucho en cargar.

Porque hace mil aos que no se actualiza y est anticuada ya.
Porque el contenido es pobre y/o no me interesa.
Porque hay pginas mejores.
Porque odio la msica de fondo que tiene.
Porque sus colores me hacen dao a la vista.
Porque est llena de pginas sin terminar, an en construccin o con enlaces que no funcionan.
Porque es dificil navegar por ella, me pierdo fcilmente.

Si no ests de acuerdo con algo de las listas anteriores o quieres incluir algo ms dmelo en el Foro y la
completo. Sera de gran ayuda. Si te ha parecido bien, ya sabes, aplcate el cuento!

345

Adems de que tus visitantes vuelvan de vez en cuando, es tambin muy importante que cada da nuevas
personas descubran tu web, para lo cual, la promocin de la pgina web es bsica. Aparecer en
buscadores, en directorios, insertar tu firma en tus mensajes, participar en Foros donde darte a conocer...
Todos estos aspectos os lo explico en la seccin La Promocin, de modo que no lo repetir aqu.

Factores Relacionados con la Publicidad

Una vez que hemos conseguido que cada da nuesta pgina web tenga ms y ms visitas, es necesario
que estos estn interesados en la publicidad insertada y esta es el segundo factor a tener en cuenta. Para
ver que es lo que nos interesa y lo que no, volvemos a preguntarnos, Qu es lo que me gusta de la
publicidad que he encontrado en esta web?

Que no es intrusiva ni agresiva. No me molesta que aparezca ni me obliga a actuar de un modo

que no deseo. Prefiero que no est, pero no me molesta.
Que lo anunciado est muy relacionado con la temtica de la web, de modo que quizs algn da
me interese el anuncio. Est bien que aparezca.
Que no rompe la esttica de la pgina, los colores no son desagradables, las dimensiones cuadran
con la estructura... no me molesta.

Y qu cosas os molestan de la publicidad?

El tener que soportar que se cargue para poder ver el resto de la web.
Encontrarla en medio del texto que estaba leyendo.
Confundirla con un apartado de la web y descubrir que era publicidad.
Que se me habran mil ventanas de propaganda nada ms entrar en la pgina web.
Que tras hacer clic en la publicidad el enlace est roto.
Que al hacer clic descubro que lo anunciado no tiene nada que ver con lo que pona en el
anuncio.
Que el Webmaster me oblique a hacer clic para acceder al resto de la web, o que me recomiende
que piche en sus enlaces publicitarios.
Que lo anunciado no tenga nada que ver con mis necesidades.

Bueno, son solo opiniones personales que pueden variar de una persona a otra, pero las puedes tener en
cuenta a la hora de escoger qu pubicidad y cmo incluir en tu pgina web. Si se te ocurren ms dmelo
en el Foro, por favor.

Factores Relacionados con tus Visitantes

Tras ver de que manera pude influir tu web o la publicidad que insertes en ella, vamos a ver de que
modo influyen tus visitantes en los beneficios que puedas ganar con estos mtodos.
Dentro de los tipos de publicidad que puedas insertar en tu pgina web, habr de los que te paguen por
cada clic realizado por un visitante, de los que te paguen por registros realizados a travs de tu web y por
ltimo de los que te paguen cierta comisin por cada venta realizada.
Olvida el compaerismo en este asunto. Lejos de hacerte un favor, si incitas a tus visitantes a hacer clic
en tus banners acabars perdiendo ese servicio de publicidad. Ten en cuenta que ellos pagan por obtener
346

beneficios. Si t les atraes miles de visitas pero nadie hace uso del servicio que ofrecen (registro, venta,
etc,) la compaia publicitaria no te querr y te dar de baja. T ganas solo si ellos ganan, tenlo en cuenta.
Si tus visitantes tienen un escaso poder econmico (como por ejemplo, en una web dedicada a los nios
pequeos) seguramente no tengas mucho futuro con las comisiones.
Si tus visitantes no encuentran nada interesante en la publicidad que ofreces, olvidate de las ganancias.
Por eso conviene escoger publicidad relacionada con la temtica de tu web, pues as es ms probable que
tus visitas se sientan interesadas en comprar o hacer clic.
Es curioso, pero suele suceder que al cabo de cierto tiempo, la cantidad de beneficios baja a pesar de
tener ms visitas. Esto puede pasar por que los visitantes acaban siendo siempre los mismos y conocen
perfectamente la propaganda de tu web. Digamos que estn tan familiarizados con verla que terminan
sin mirarla siquiera. Es por eso que conviene de vez en cuando cambiar los banners por otros distintos, o
cambiarlos de lugar para as que les llame un poco ms la antencin.
Son solo ideas, pero quizs os resulten tiles.

Tipos de publicidad que existen para tus pginas

web
Existen muchas compaias que te pueden pagar un dinero extra a cambio de insertar sus anuncios en tus
pginas web. Aunque casi todas son muy similares quizs la mayor diferencia entre unas y otras sea el
modo de contabilizar tus ganancias. De este modo, podemos decir que hay compaias publicitarias que
te pagan por clics, por impresiones, por registro, por ventas o simplemente por colocar un anuncio en tus
pginas. Veamos con ms detalle estos tipos de publicidad.

Pagos por Impresiones

Una impresin es cada vez que uno de los anuncios de la compaia publicitaria es mostrada en tu web a
alguno de tus visitantes. Existen algunas compaias de publicidad que te pagan por esta cantidad. Por
supuesto, es un sistema bueno para aquellos webmaster con pginas con muchas visitas al da y con
sitios web con gran nmero de pginas.
Ya sabes, cuanto mayor sea el nmero de visitas y cuantas ms pginas vea cada visitante mayor ser la
cantidad de impresiones de los anuncios y mayor el beneficio. Un foro por ejemplo suele ser un buen
lugar para este tipo de anuncios, pues los foros adems de ser muy visitados, poseen gran cantidad de
pginas (cada mensaje es el menos una pgina) y por otro lado la gente que visita foros suele visitar
varias de las pginas del mismo.
Normalmente en los foros se suele hacer poco caso a la publicidad, pues los usuarios se acostumbran
muy rpido a ella y al final terminan no haciendoles mucho caso. En cambio en este caso, al cobrar por
impresiones nos dar igual que el visitante haga o no haga clic en ellos y por eso es una buena opcin
para los foros.

Pagos por Clic

347

En este caso la empresa publicitaria te paga una cantidad por cada clic que tus visitantes hagan en los
anuncios que has colocado en tus pginas. En este caso interesa que el producto anunciado sea de inters
para tus visitantes, claro. Por eso estar bien siempre y cuando puedas escoger qu cosas se van a
anunciar en esos banners. Imagina un anuncio de consultoria fiscal en una pgina dedicada a nios
pequeos... vaya ruina, no? je je je. Hay que elegir bien los anuncios que vas a poner intentando que
sean de productos de inters para tus visitantes, no lo olvides.
Es muy importante es este caso no hacer nunca clic en tus propios anuncios. Si te dedicas a hacer clic en
ellos te detectarn y te darn de baja de por vida y eso no merece la pena. Tampoco conviene tratar de
convencer a los visitantes para que lo hagan. Djalos a su aire, si les interesa el anuncio harn clic, si no
no pasa nada. Es lo mejor.

Pagos por Registro

En este caso no es suficiente con que tu visitante haga clic en el banner de la compaia publicitaria, sino
que adems ste tendr que registrarse en la pgina anunciada para que t te ganes la comisin. Esto
suele ser ms dificil de conseguir, pero a cambio las ganancias por registro suelen ser algo mayores para
compensar. De nuevo, puede ser una buena opcin siempre que lo anunciado sea de inters a tus visitas.

Pagos por Venta

En este otro caso la empresa de publicidad te pagar un porcentaje de lo que tus visitantes se gasten
haciendo compras a travs de los anuncios de tus pginas web. Este es el caso ms dificil y complicado.
La gente no suele comprar por internet demasiadas cosas as que para compensarlo las ganancias por
venta suelen ser mucho mayores que las ganancias por impresin o por clic.
Como imagino que adivinas, el xito de las ventas depende muy mucho de cunto interesen los
productos en venta a tus visitantes, de modo que solo merece la pena si esos productos les son de inters.
Anunciar abrigos en una pgina de recetas de cocina quizs sea pero idea que vender hosting y dominios
en una pgina web que ensee a hacer pginas, no? Hay que tener un poco de vista comercial! je je je.

Pagos por colocar enlaces

Como sabrs si una pgina web consigue muchos enlaces desde pginas externas, aumentarn sus visitas
por dos cosas. Primero porque la gente que vea esos enlaces puede que visiten la web y segundo, porque
los buscadores te colocan ms arriba en sus puestos si tu web tiene muchos enlaces hacia ella (se suelen
llamar backlinks).
Es por eso que algunas compaias se dedican a pagar a los webmasters que le ceden un espacio en sus
pginas para colocar los enlaces de esas otras webs que quieren ganar visitas. Por ejemplo, imagina que
yo quiero ganar visitas y para ello pago a una compaia de publicidad 100 euros al mes para que me
busque otras pginas en las que colcocar enlaces hacia CCTW. Esa empresa contacta con otros
websmastes, ellos acceden a poner enlaces hacia mi web y a cambio les paga digamos que unos 50
euros. Yo gano visitas, esos webmasters ganan 50 euros y la empresa intermediaria se lleva los otros 50
euros.

348

El nico riesgo es que a algunos buscadores no les agrada mucho que los webmasters compren o vendan
enlaces y puede ser que alguna vez se enfaden y estos sean sancionados por ejemplo bajndolos de
posiciones en sus listas.. es un riego a correr, claro.
La cantidad que te pagan en este caso es fija al mes y no depende para nada de si los visitantes hacen
clic o no en ellos. La cantidad que te pagan por cada enlace suele depender del Pagerank que tenga la
pgina en la que vas a colocar el enlace y puede variar entre 2,5 y 20 euros por enlace. Imagina, si
colocas 5 o 10 enlaces en cada una de las pginas y si tienes 50 pginas dentro de tu web...podras
llevarte bastante al mes, no? El problema es que una vez te das de alta no suelen ofrecerte muchsimos
enlaces para colocar en tu web, tan solo unos pocos al principio y luego, cada mes, te van dando ms y
ms.
Lo que si es importante es que los enlaces que te ofrezcan sean del tipo <a href="www.pagina-apublicitar.com">Empresa a Patrocinar</a>, es decir, enlaces simples y no cdigos largos y raros. As
ser muy dificil para los buscadores saber si ests vendiendo huecos para enlaces de pago (por el peligro
de que te sancionen bajndote de posiciones en los buscadores) o si lo has colocado por que te ha dado
la gana (en este caso no te pueden sancionar). Tenlo en cuenta.
Una compaa que cumple esto, que yo mismo uso y que funciona bien es eXponsor. Empresas que se
que pueden hacerte caer de posiciones en los buscadores si las usas con TLA (Text Link Add).
En el ltimo apartado del men de la izquierda te comento cuales son las compaias que yo mismo uso
en esta y otras de mis webs y que se que funcionan. Luego, en el men horizontal de arriba (con fondo
amarillo) puedes acceder a ms detalles sobre todas ellas, pero te recomiendo que sigas leyendo todas las
secciones del men de la izquierda antes de nada para saber cmo funciona todo y poder elegir bien. No
olvides que pulsando sobre las flechas de aqu abajo tambin puedes ir viendo todas las secciones por
orden.

El sistema de Referidos
Gran parte de las compaias de publicidad con las que puedes colocar anuncios en tus pginas web y
obtener unos ingresos extra tienen una opcin llamada "Referidos" o "Sistema de Referidos". Al
margen de los anuncios que coloques en tu web te dan la posibilidad de colocar algunos enlaces hacia
ellas mismas para promocionarse de modo que si un visitante de tu web hace clic en ese anuncio, visita
la pgina de la compaia de publicidad y se registra para usarla como t, la compaia te regala un
porcentaje de las ganancias que ese visistante obtenga.
Esto no significa que la parte que te regala a t se la quite a l, claro que no. Si por ejemplo alguien se
registra en una compaia que t promocionas y termina ganando ese mes 100 euros, tu ganas un
porcentaje (un 5, un 10%... segn la compaia, claro).
Est bastante bien pues ests ganado un dinero sin hacer nada. O incluso podras ganar bastante si
consigues unos cuantos referidos que funcionen bien, a pesar de que t no tengas publicidad en tus
pginas (salvo la que manda a los referidos a registrarse de tu parte, claro).
La mayoria de las empresas que te comento en estas pginas poseen sistema de referidos y si te registras
con ellos a travs de los enlaces que he colocado te convertirs en un referido mio, por lo que si t ganas
un dinero, a mi me darn un porcentaje. Imagino que no te importar, verdad? je je je. Creo que sera
349

justo a cambio de la informacin que te doy, no? Adems t no pierdes nada, claro. De todas formas si
prefieres no ser referido mio puedes registrarte igual si en lugar de hacer clic en mis anuncios visitas su
pgina tecleando la direccin directamente en tu navegador. Seria como regalarle esa comisin a la
propia agencia publicitaria. Para eso mejor que me lo gane yo, no? ja ja ja. Gracias amigo!
Si te surje alguna duda con este sistema de referidos no dudes en consultrmelo en el foro, en la seccin
"Rentabiliza tu Web" y te ayudar encantado. Si te haces referido mio y me avisas, mejor que mejor. As
podr darte las gracias.

Cmo insertar los cdigos de publicidad en las

pginas de tu web
Una vez que te registres en cualquiera de las empresas publicitarias que te comento en estas pginas,
tendrs acceso a un panel de control desde el cul puedes ver, completar y modificar tus datos
personales, los datos de tu pgina web y tambin podrs generar los cdigos que has de insertar en las
pginas de tu web donde quieras colocar sus anuncios para empezar a ganar dinero extra.
Normalmente es un fragmento de cdigo html en el que va incluido tu nmero de referencia. De este
modo la agencia publicitaria sabr en todo momento si el clic de un usuario ha venido de tus pginas.
Cuando veas ese cdigo solo tendrs que copiarlo y pegarlo integramente y sin modificaciones en el
lugar de tu pgina donde deseas que salga el anuncio. Si alguna vez quieres colocar ese mismo anuncio
en otra de tus pginas, bastar con acceder de nuevo a tu panel de control, copiar de nuevo el cdigo y
pegarlo en esa otra pgina.
Para que te sea ms fcil, simpre puedes copiarlo y pegarlo en un archivo txt (del block de notas de
windows o Notepad) y as lo tendrs a mano cuando quieras.
El lugar en el que pegar ese cdigo dentro de tu pgina web quizs te cueste un poco al principio. Me
gustara poner unas notas aqui sobre dnde pegarlo, pero como cada pgina es distinta me va a ser
imposible, de modo que mejor, si alguna vez tienes una duda de eso o de lo que sea, pregntamela en el
foro, en el apartado "Rentabiliza tu Web" y listo, te lo soluciono enseguida, oki?
Si por ejemplo tu pgina web tiene la estructura de la web de ejemplo que te explico en el Curso Paso a
Paso, ser genial, pues en esas lecciones ya habiamos preparado un par de sitios en los que poder incluir
publicidad. Pero si no es el caso no te preocupes, me preguntas y te ayudo encantado.
Algo muy importante! Nunca retoques ni modifiques el interior del frangmento de cdigo que te ofrecen
para los anuncios. Si lo haces te arriegas a que no funcione bien, es decir, que no aparezcan los anuncios
o lo que es peor, que apare

Cmo se cobran los beneficios de la publicidad

Normalmente, al colocar anuncios en tus pginas web y empezar a generar clics, impresiones, registros
y/o ventas, irs acumulando poco a poco beneficios que segn la empresa publicitaria estarn en euros o
dolares US.
350

Cada una de estas compaias tiene un lmite mnimo que suele ser de 30, 50 o 100 dolares o euros.
Mientras que no alcances esa cantidad mnima no te harn el pago de forma que si en un mes no has
llegado a esa cifr, los beneficios que tienes se acumulan para el mes siguiente y as sucesivamente hasta
que llegas a esa cantidad. En ocasiones t mismo puedes escoger una cantidad an superior si lo deseas.
El mes en el que alcances esa cantidad mnima con los beneficios acumulados, la empresa publicitaria te
har el pago de los beneficios por alguno de estos mtodos.

Pagos por Paypal

Se trata de una cuenta virtual que puedes abrir en la pgina de Paypal. Puedes registrarte con ellos y
abrir una cuenta que normalmente va relacionada con una cuenta bancaria tuya. Una vez la tienes creada
puedes pedir a estas agencias de publicidad que te hagan los pagos all. Cuando lo desees puedes
descargar el dinero que tengas en tu cuenta Paypal a tu banco o bien, puedes usar ese dinero para hacer
pagos de otras compras por internet, como hosting, libros, viajes, etc.
Yo la uso tanto para pagar como para cobrar los beneficios de alguna compaia de publicidad y nunca
me ha dado mingn problema, es bastante segura (y en espaol).

Pagos mediante un cheque

En este caso, cuando llegas a la cantidad mnima la compaia publicitaria te manda un cheque por
correo a la direccin que t le digas y a tu nombre. Al recibirlo basta ir a un banco y cobrarlo.
Seguramente el banco te cobre alguna comisin por ello, por lo que no se suele usar demasiado.

Pagos por transferencia bancaria

En el panel de control de tu cuenta de la empresa de publicidad tienes un apartado en el que puedes
incluir los datos de tu cuenta bancaria. De este modo al llegar a la cantidad mnima para cobrar la
empresa de publicidad te har una transferencia a tu banco y recibirs el dinero ms rpido que si lo
recibes por cheque y adems (normalmente) sin gastos ni comisiones.
Posiblemente veas que a la hora de poner los datos de tu cuenta te piden un cdigo llamado Swift o algo
as. Es un cdigo que has de pedir a tu banco para completar esta informacin. No tiene que ver con tu
cuenta, cada banco tiene su propio cdigo.
En el caso de que residas en europa y los pagos te los hagan en dolares, al llegar la transferencia a tu
banco ste har la conversin a euros, por lo que no importa demasiado si la compaia de publicidad
paga en euros o no. Claro que al precio que tiene el dolar frente al euro... pero bueno.

Casos especiales
No es lo normal, pero en algn caso raro la empresa publicitaria te solicitar que les envies una factura
para proceder a hacerte el pago de tus beneficios (por el momento solo lo he visto en ImpresionesWeb).
Para poder hacer una factura tienes que ser empresa o ser autnomo, por lo que si ests empezando en
esto es posible que no te interese. Hacerse autnomo conlleva unos gastos fijos que en ocasiones (sobre
todo al comienzo) sobrepasan con creces los beneficios que puedes obtener con la publicidad.
351

En la seccin siguiente te hablo un poco de todo esto por si te es de inters.

Consejos a la hora de insertar publicidad en tu

Web
Cmo ya llevo un par de aos con publicidad en mis pginas, djame que te de algunos consejos para
que no tropieces nada ms empezar, oki?
1.- Nunca hagas clic en tus propios anuncios! Nunca me cansar de decir esto, je je je. Basta un solo clic
tuyo en uno de tus anuncios de Adsense, por ejemplo, para que te anulen la cuenta de por vida. Merece
la pena el riesgo? NO. Adsense detecta todos los ordenadores desde los que has entrado en su panel de
control. Si detecta cualquier clic desde cualquiera de esos ordenadores.... se acab. Obvia decir que no
debes entrar en tu panel de control desde un ciber ni desde el curro, si usan un proxy todos los currantes
entran con la misma IP y lo normal es que alguno de ellos te quiera "hacer el favor" de hacerte clics y....
a la mierda todo...
2.- No seas demasiado agresivo con los anuncios. No llenes la web de ellos haciendo que los usuarios
salgan huyendo de tu web.
3.- Evita los anuncios tipo PopUp. Esas ventanitas que se abren solas con anuncios. La gente los odia, t
no?
4.- No incites ni invites a tus visitantes a hacer clic en la publicidad (tan solo en tus anuncios de
referidos est permitido).
5.- Si llegas a ganar una cantidad mediana al mes con la piblicidad (digamos unos 300 o 400 euros al
mes), gstate un poco en ir a un asesor y que te oriente un poco sobre si hacerte autnomo o no o de las
posibilidades que tienes. Merece la pena ir sobre seguro. Y no dudes en contarnos lo que aprendas en ese
tema en el foro, oki? Nosotros an no lo tenemos del todo claro!
6.- Invierte en tu web. Si tienes beneficios compra tu dominio si an no lo tienes, aloja tu web en un
buen servidor de pago, haz algn concurso para tus visitantes, compra algn libro con el que aprendas
algo bueno para tu web, o haz algn curso en tu ciudad. Invertir no es tirar el dinero, siempre trae
beneficios.
7.- Por ltimo, no dejes de contarnos cmo te va, cuntanoslo en nuestro Foro, oki? Suerte maestro!

Agencias Publicitarias que merecen la pena

A continuacin te dejo un listado de las agencias de publicidad que yo mismo uso en CCTW o en alguna
otra de mis webs y de las que se (por haber ganado ya algo) que son serias y que funcionan bien.
Te indico para cada una el tipo de publicidad con el que trabaja y la modalidad de pago que tienen para
que te sea ms fcil escoger. No olvides que si te registras en alguna de ellas pulsando alguno de los
enlaces de estas pginas, te convertirs en un referido mo y me darn una bonificacin que me servir
352

para ir mejorando ms y ms CCTW, para poder hacer ms concursos y regalaros Hostings como otras
veces, etc, etc, oki? Gracias de antemano!
Al margen de la informacin de esta pgina, fjate que en el men horizontal de arriba puedes ver ms
detalles de cada una de ellas.
Suerte y Buenos Beneficios!!!

Adsense (ver ms detalles en CCTW)

Idioma: Espaol
Tipo de pago: Por clic. Pagan en Dolares US (pero da igual) en tu banco o por cheque por correo.
Bueno para cualquier web, nueva o no, grande o pequea.

Exponsor (ver ms detalles en CCTW)

Idioma: Espaol
Tipo de pago: Por insertar enlaces en tu web, pago fijo al mes. Pagos a tu banco o por Paypal.
Buena si el Pagerank de tus pginas es mayor que 1. Cuanto mayor mejor, claro.
Tambin tienen anuncios tipo Adsense con pago por clic.

Affiliate Future (ver ms detalles en CCTW)

Idioma: Espaol
Tipo de pago: Por Registro, Por venta. Pagan por el banco.
Buena para cualquier tipo de web.
Da igual la temtica siempre que no sean de sexo, violencia, armas de fuego, xenofogas etc.

Impresiones Web (ver ms detalles en CCTW)

Idioma: Espaol
Tipo de pago: Por impresiones y por clic. Pagos por el banco o por Paypal envindoles Factura (tienes
que ser empresa o autnomo, en el resto de compaias no es imprescindible).
Buena para webs con muchas pginas vistas.

Qu tal si vendes enlaces en tu pgina web?

353

Como ya sabes, obtener una buena posicin en los buscadores depende en gran medida de la cantidad de
enlaces que apuntan hacia la pgina web en cuestin. Una de las formas de obtener estos enlaces es
pagar por ellos, pero Y si eres tu quien vende esos enlaces?
Se trata de disear a conciencia la estructura de tus pginas web y escoger ciertos lugares donde colocar
enlaces a quien pague por ellos. La parte superior, inferior, alguna columna lateral quizs... Puedes
vender un enlace en una pgina concreta de tu web o la posibilidad de colocar ese enlace en todas las
pginas de tu web.. hay muchas opciones.
Ten en cuenta que la gente que compra enlaces sabe lo que hace. Conocen bien la importancia de los
enlaces y saben que es mejor un enlace de texto (un par de palabras que enlazan a su sitio) que un
banner, por bonito que este sea. Por tanto, a la hora de disear los espacios donde colocar los enlaces
vendidos, ten eso en cuenta.
Quizs sea bueno colocar enlaces vendidos en una columna lateral y dejar los huecos superior e inferior
para banners de compaias publicitarias como Tradedoubler o Adsense.
Y cuanto se puede pedir por un enlace? Imagino que conoces la ley de la oferta y la demanda.
Bsicamente dice que algo vale lo que alguien est dispuesto a pagar.... Es cuestin de preguntar un
poco, o ver lo que piden pginas de calidad similar. Puedes solicitar un dinero mensual o incluso una
cantidad mayor por ... no se, 5 aos, por ejemplo.
Los pagos se pueden hacer fcilmente por Paypal. Yo nunca lo haba usado hasta hace unos meses.
Quera comprar un enlace en un directorio de pago (costaba solo 10 euros en pago nico, es decir, con
duracin indefinida) y habia que pagar por medio de Paypal. Me result un poco raro, pero tras
registrarme hice el pago sin problemas y hoy en da lo he usado unas 16 veces, todas con buenos
resultados.
Si deseas vender enlaces o cualquier otra cosa desde tu web, no es mala idea abrirse una cuenta en
PayPal y automatizar as todos los cobros. Resulta muy muy cmodo.

Necesitas dar los datos de tu cuenta, claro, pues los pagos se hacen a travs del banco. Yo me fio, por
ahora.... Ya os contar si me ocurre alguna desgracia monetaria, je je je.
Quizs sea buena idea abrirse una cuenta en el banco solamente para hacer estas tonterias en internet. De
ese modo y metiendo en ella solo el dinero justo para hacer los pagos que deseamos, no corremos riesgo
de que nos sableen la cuenta, o al menos, no perderiamos mas que unos pocos euros... haya cada cul,
pero realmente no lo veo arriesgado.
Existen pginas donde puedes consultar y hacerte una idea de cunto podras pedir por insertar un enlace
de alguien en tu pgina web, (los precios que te den son totalmente orientativos, tenlo en cuenta).
Tambin hay algunas compaias que hacen de intermediarios. Tu te registras con ellos, les dices cul es
tu pgina y ellos la ofrecen a sus clientes por si desean un enlace desde tu web. En caso de haber algn
interesado, te ofrecen el enlace hacia su cliente y te pagan por tenerlo en tu web. Son bastante fiables y
354

serios y se puede ganar bastante. Las dos compaas que yo conozco, que uso y que se que son serias
son www.text-link-ads.com (en ingls) y www.linkicidad.com (en espaol).
Hey! si te decides a vender enlaces dnoslo en el Foro, quizs nos interese a algunos

355