Professional Documents
Culture Documents
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).
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
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?
Arrancando el Html-Kit
En la pgina anterior nos quedamos en esta ventana:
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".
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
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.
14
</html>
En adelante, siempre que escriba cdigo HTML lo har de este modo, de color azul y con fondo gris
para que lo distingais. Pues bien, si eso lo escribimos en un archivo y lo guardamos con extensin .htm o
.html ser una pgina web. Vacia si, pero una pgina web.
La primera palabra <html> indica que ah empieza el cdigo de la web. La segunda </html> indica que
el cdigo de la pgina web a terminado. Se distinguen por la contrabarra / que siempre indica que algo
ha terminado.
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.
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.
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?
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.
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.
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?
22
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!
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.
27
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?
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:
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
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!
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
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.
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 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>
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, .
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.
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.
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
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.
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.
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.
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
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.
Una vez creados estos dos archivos y relacionados entre s, pasamos a meterles mano.
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).
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
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.
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:
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
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....
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.
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?
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.
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
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.
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!
- 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.
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...
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:
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.
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
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.
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.
plantilla.html
71
estilo-general.css
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.
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.
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.
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.
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.
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.
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.
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
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
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
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?
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?
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.
91
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.
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.
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.
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>
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
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>
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!
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.
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
Conseguimos esta otra vista previa de la plantilla. Ahora no aparecen esos punto, que bien.
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.
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.
1</a></li>
2</a></li>
3</a></li>
4</a></li>
101
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.
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
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}
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?
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.
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!
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
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
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?
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?
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>
113
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.
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>
Seguimos?
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 }
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 ;
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.
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
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.
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
Y papeleta solucionada.
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.
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.
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.
{}
{}
{}
{}
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
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.
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
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
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!
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.
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.
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.
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:
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.
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.
129
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!
<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:
Teniendo todo esto en cuenta, el nombre de los archivos de las pginas de estas secciones deberan ser
estos:
132
Ves? Sencillos, representativos, sin cosas raras... make it simple! deca Einstein ;=)
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
Repite la misma operacin con el resto de carpetas, discografia, conciertos, descargas, foro y souvenirs.
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.
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:
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.
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?
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.
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:
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.
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.
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!
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
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.
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....
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!
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!!!
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>
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!
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).
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!
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
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.
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....
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.
171
172
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.
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:
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.
varias veces, una para cada una de las carpetas creadas anteriormente (VuestraWeb, miejemplo,
experimentos....). Para ello, haced lo siguiente:
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.
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":
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?
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.
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á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>
<head>
</head>
<body>
</body>
</html>
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á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á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á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
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".
BLOQUE II
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.
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
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
194
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
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:
á
en lugar de
é
en lugar de
í
en lugar de
ó
en lugar de
ú
en lugar de
ñ
en lugar de
etc...
Y para letras mayusculas acentuadas o la letra "" mayscula:
Á É Í Ó Ú Ñ
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 á 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á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.
..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.
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:
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:
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:
Y al decirles que pertenecan al estilo "centrado" el cdigo vari para acabar de este otro modo:
<p class="centrado">Esta es mi pá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
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.
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
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:
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?
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.
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
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.
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.
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:
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?
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
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
214
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!!
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.
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
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.
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.
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?
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:
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">
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?
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 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.
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 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.
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!!!
donde:
table
.ancho99
99%
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
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
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.
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.
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>
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>
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>
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.
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"
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.
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!
239
As, por ejemplo, una de las lneas de cdigo de una celda, quedara como:
240
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.
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.
<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="b1">titulo</td>
<td class="b2">ruta</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
src="...."
width="..."
height="..."
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
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.
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
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
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.
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 © </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.
<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>
</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>
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
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.
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?
258
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.
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.
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.
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.
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:
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
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% ;}
ul
{text-decoration:none ;}
A:link
{color:blue :}
A:visited
{color:blue ;}
A:hover
A:active
Y tambin puedes ver como ha quedado la plantilla por ahora. Recuerda que tenemos un Curso de Estilo
CSS en esa web!
269
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% ;}
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.
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>
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.
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
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.
Para insertar un comentario solo necesitamos encerrarlo entre estos dos smbolos o etiquetas:
<!--->
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.
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> 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. ;)
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.
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...
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).
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!!!
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.
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 ; }
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
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.
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?.
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:
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 ; }
291
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% ; }
y aplicarselo solo a las tablas que queramos, indicando ya en la pgina (dentro del BODY) lo siguiente:
292
<TABLE CLASS="lamitad">.....
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.
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.
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?
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!!!
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!!
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.
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".
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.
Os aseguro que haciendo algunos ejemplos, pronto dominaris el tema y podris aplicarlo a vuestra web.
Merecer la pena.
{
{
{
{
{
}
}
}
}
}
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
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.
303
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".
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>
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.
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 ; }
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:
á
en lugar de
é
en lugar de ,
í
en lugar de
ó
en lugar de
ú
en lugar de
ñ
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:
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.
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
<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
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.
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
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
/*
** 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
document.onmouseover = domouseover;
document.onmouseout = domouseout;
startColor = dehexize(startColor.toLowerCase());
endColor = dehexize(endColor.toLowerCase());
319
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
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];}
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!
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.
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).
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
328
TopWeb de MuchoGrafico
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.
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.
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.
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
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
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 "Jorgens. Webmaster de CmoCrearTuWeb", colocad lo que queris, entre las comillas de
nuevo.
<INPUT type="hidden" name="memberemail"
value="comocreartuweb@comocreartuweb.com">
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.)
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.
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.
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.
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
Opcional
Opcional
Opcional
Opcional
Si
opcional
opcional
opcional
Opcional
Obligado
Opcional
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.
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.
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.
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.
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.
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.
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.
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
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!!!
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