1

2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
una serie de páginas. Pero cómo sabe Google qué páginas ha de mostrar? Bien fácil. Google y el resto de
buscadores se pasean continuamente por la red leyendo las palabras de cada página web. Si en mi web
en que aparecen las palabras !como!" !crear!" !páginas! y !web!" lo memori#an y mostraran mi web en
sus listas cuando alguien haga una b$squeda con alguna de esas palabras.
% porqué unas páginas aparecen más arriba y otras más aba&o en esas listas? 'os motios son muchos"
pero uno de ellos (hay muchos más motios) es que algunas de esas palabras apare#can destacadas y
destacadas es" o bien que apare#can en negrita o bien que apare#can dentro de un t*tulo tipo h+" h,
etc. Por eso es me&or hacer los titulos usando h+" pues si lo hacemos como párrafos los buscadores
nunca sabrán que se trata de un t*tulo y no tomarán esa palabra tan en cuenta (también la tienen en
cuenta" pero menos).
-l resto de motios los iremos iendo en lecciones sucesias. -so si" no por lo dicho antes amos a
poner toooodos los te.tos dentro de un t*tulo" pues los buscadores pueden pensar (con ra#ón) que
estamos haciendo trampas y en lugar de posicionarnos me&or en sus listas" aparecer*amos los $ltimos. /o
se debe abusar.
0tra cosa importante. %a que sabemos la importancia de las palabras de los t*tulos" es bueno incluir
en estos aquellas palabras por las que queremos ser encontrados. -s por eso que en los t*tulos de 1123
se intenta colocar estas palabras clae. -n esta sección por e&emplo" he aproechado el t*tulo de arriba
para colocar palabras que me interesan" como !titulos! (alguien puede estar buscando cómo insertar
t*tulos en una web y me interesa que apare#ca esta página 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 !página web!. 'o pillas?
4epito" no es cuestión de saturar con t*tulos" es suficiente con aproecharlos muy bien" y saber qué
palabras poner sin que el te.to del t*tulo pierda su sentido" claro. 5a de tener que er a la e# con el
te.to que hay deba&o de él" sino" será muy bueno para el buscador pero los isitantes pensarian que se
te ha ido la cabe#a... &e &e &e.
Buscando alojamiento para la página web
%a a siendo hora de ir subiendo nuestro traba&o a la red" erdad? 6unque a$n no esté terminada la
página web" es bueno tener ya un sitio para alo&arla (a ese sitio se le llama 5osting) para ir iendo cómo
se comporta la web en realidad.
Para no repetir aqu* cosas que ya tenemos e.plicadas en 1123" os inito a isitar la sección 5osting y
7ominios. 8na e# que entres all* aprenderas todos los conceptos relacionados" con los que podrás
escoger con más idea el hosting que más se amolde a tus necesidades.
Si tienes mucha prisa y quieres ir al grano" e directamente a la página donde e.plico cómo
registrarte en un seridor gratuito sin publicidad" pero no olides oler a esa sección y leer el resto de
información cuando puedas" te será $til en el futuro.
1uando termines de leer esa sección" te darás de alta en el 5osting que quieras y podrás seguir con
las lecciones siguientes" pero recuerda apuntarte en un papelito (ale también una 5o&a de -.cel o del
/otepad) los siguientes datos9 Nombre de usuario para el 5osting.
• Contraseña de tu cuenta de 5osting.
• Dirección FTP con la que subir tus datos a la red.
• Dirección de tu página web.
6hora seguramente te suene a chino todo eso" pero tras leer esa sección sabrás lo que significa cada
cosa. 6prenderás all* a escoger un hosting tanto de pago como gratuito" ambos siren perfectamente
para aprender" de modo que no tienes escusa. Si no lo haces no podrás aproechar las lecciones al +::;"
aunque también aprenderias cosas" claro. Ser*a como aprender a conducir sin tocar nunca un coche....
osea" ná de ná.
/o lo olides" para cuando regreses aqu* para seguir las lecciones" has de tener ya los datos
anteriores" ale? Pues ya sabes. % ante cualquier duda recuerda que en el <oro 1123 tienes una sección
para cada consulta" $salo sin que te de erg=en#a preguntar tonterias y no te arrepentirás.
Configurar Html!it para el nue"o alojamiento
6hora se supone que ya tienes los datos de los que te hablé en la página anterior" nombre de usuario"
contrase>a" dirección del <2P y además conoces la dirección de tu nuea web. 4ecuerda que puedes
60
registrarte arias eces" con nombres distintos para crear más de una cuenta y por tanto tener más de
una página web" por tanto" olida usar estas lecciones para crear la página que tienes en la cabe#a.
?e&or sigue las instrucciones al pie de la letra hasta el final y una e# que aprendas podrás hacer lo que
te de la gana en otra cuenta" con tu página web definitia" o@i? -s para que no te lies durante estas
lecciones.
2erminado el sermón" &e &e &e" pasamos a configurar el 5tmlABit para poder subir la página de la
lección al nueo seridor" o@i?
Configuración del nue"o #er"idor en el Html!it
4ecuerdas cuando creamos la carpeta local para colocar dentro los archios de la web? Pues amos a
hacer algo muy similar" erás.
6bre tu 5tmlABit y en la barra de arriba" donde pone $or%space escoge la opción &ñadir
Carpetas'#er"idor FTP C &ñadir #er"idor FTP" como en la imagen de aba&o9
6parece una entana donde tienes que colocar algunos de los datos que apuntaste" eamos qué datos
son y dónde an apuntados.
(+) 6qu* pon la dirección de tu FTP. Suele empe#ar por ftp.nombredelseridor.. pero cada hosting es
algo firerente. -n la imágen de arriba puedes er los datos que yo puse para la configuración del <tp de
una cuenta creada en 4a#y (recomendado para seguir el curso).
(,) 6qu* se pone el puerto de cone(ión. /i yo se lo que es" pero coloca un ,+ a no ser que tu hosting
te indique otra cosa.
(D) 2u nombre de usuario para el 5osting que tengas. -n 4a#y son n$meros aleatorios" como puedes
er en la imagen.
(E) 'a contraseña o password.
61
(F) 6ctia esta casilla si no quieres tener que estar escribiendo la contrase>a cada e# que quieras
conectar tu <tp.
(G) -s solo el nombre que aparecerá en la entana 3or@space del 5tml Bit. Pon lo que más te guste.
%o he puesto webAe&emploAcctwAinternet para diferenciarlo de la carpeta local que llamamos webA
e&emploAcctwAlocal. Para seguir el e&emplo de este curso ha# como yo y as* eitarás perderte cuando me
refiera a esa carpeta. 'uego" para tus traba&os la puedes llamar como te de la gana" claro.
(H) )nitial Director*9 -n ocasiones al registrarte en un seridor te indican la ruta inicial o FTP Pat+"
que has de colocar en el <tp. 6 eces es IwwwI otras eces es IhtmlJpublicI... Si te has registrado en
4a#y escribe aqu* lo mismo que pusiste en el punto (+) y te funcionará bien. Para qué sire?
Simplemente indica al <tp cuál será la carpeta rai# que se a a mostrar. 'o entenderás con el tiempo" no
es muy importante.
(K) Passi"e ,ode. -sto no lo domino bien. Si se que unos seridores piden que se use el modo actio y
otros el modo pasio. Si lo pones al contrario qui#ás te cueste conectarte. 4a#y por e&emplo pide que se
actie. 2iene que er son los puertos que se usan para la cone.ión.... un rollo" amos" &e &e.
-l resto de opciones de esa pesta>a y de las otras dos no hace falta tocarlas. Pulsa en -! y
seguirmos.
Nuestro nue"o #er"idor FTP
6hora podemos er una nuea carpeta en la entana de la derecha (er C 3or@space) del 5tmlABit. -s
esta se>alada en la imagen de aba&o9
Si ahora simplemente pulsas sobre esa carpeta" se abrirá mostrando todos los archios que hay en
internet. Seguramente solo haya uno llamado inde..html sin contenido alguno o con alg$n mensa&e de
!-n construcción!. -sa página la pone el propio hosting mientras que t$ no subes la tuya.
0&oL Si al pulsar sobre el signo !M! de la carpeta a#ul ésta no llega a abrirse nunca sino que aparece
una lupa buscando y tarda demasiado (arios minutos) sin que termine de mostrar los archios de
dentro" podr*a ser que9
• 2ienes en casa un cortafuegos o firewall que impide al 5tmlBit conectarse. 2endrás que
darle permisos al 5tmlBit en tu cortafuegos de windows.
• -stas en el traba&o (no diremos nada...) donde seguramente tienen un pro.y que impide
la cone.ión de <2Ps. Pruebalo entonces desde casa.
• 'os datos que has colocado no han sido escritos correctamente. 6 eces copiar y pegar no
funciona (pues a>ade un espacio en blanco al final). Prueba a escribirlo a mano.
• Puede que los datos de usuario o contrase>a los pusieras con alguna may$scula y has de
escribirlo igual que lo pusiste al registrarte.
62
• /o has pagado la cone.ión a internet este mes o el gato le ha dao un bocao al cable...
• Si no logras conectarte erificando estas medidas" preg$ntanos en el foro 1123.
Nué? 5a sido facil? Si tienes problemas con esto lan#a tu pregunta en el <oro 1123" en la sección
!Problemas de 1one.ión!" o@i? y recuerda indicarnos cuál es tu hosting para poder ayudarte me&or" y la
dirección" etc" etc.
#ubir el inde(.+tml de tu página web con Html!it
%a tenemos unos cuantos archios de nuestra web de e&emplo. 'os podemos er en la entana
3or@space del 5tml Bit" dentro de la carpeta !webAe&emploAcctwAlocal!. 2ambién tenemos el ftp
configurado y lo podemos er en la misma entana" deba&o de la carpeta anterior con un s*mbolo a su
i#quierda de color a#ul. -stos s*mbolos a#ules indican que se tratan de carpetas de seridores (archios
en la red) mientras que los amarillos indican que son locales (están en tu ordenata).
6hora amos a er cómo nos las ingeniamos para subir los archios desde nuestro desAordenador hacia
nuestro nueo hosting usando el <tp configurado antes.
5aciendo clic en el signo !M! de la i#quierda de la carpeta del ftp !webAe&emploAcctwAinternet! podrás
er qué archios hay en tu seridor (hosting) en estos momentos. 7ale y erás que aparece un archio
inde..html
-ste archio inde..html es el primero que lee el naegador cuando se teclea la dirección de cualquier
web en él. 2odas las webs tienen un inde..html y el que t$ es ahora es el que ha colocado tu hosting
para que se ea alguna cosa mientras que subes tu propio inde..
Cómo borrar arc+i"os
Para empe#ar amos a borrar ese inde(.+tml que nos han colocado por defecto (0&o" el de la carpeta
!webejemplocctwinternet!" no ayas a borrar el de la carpeta !webejemplocctwlocal!LL). Para
ello basta con hacer clic sobre él una e# con el botón derecho del ratón y escoger !Delete...! que
significa Borrar. 6l final aprendes inglés y todo" &e &e &e.
63
2e preguntará si estás seguro. %o se que seguro seguro lo que se dice seguro... no lo as a estar" pero
como confias en lo que yo te diga" le dirás que si" &e &e &e. 7ale sin miedo. 2enemos ahora el hosting
totalmente acio. Oerás que poco tardamos en llenarlo de tonterias" &a &a &a.
#ubir el primer arc+i"o
1omo sabes" para que la gente ea tu web" los archios han de estar en el hosting. 7e nada sire
tenerlos en tu Pc. Por tanto los tenemos que pasar desde la carpeta amarilla !webejemplocctw
local! hasta la carpeta a#ul !webejemplocctwinternet!. 'o ideal ser*a pinchar desde la carpeta
local y arrastrarlos hasta la otra" pero por el momento el 5tml Bit no nos permite esa opción. 6ndo
inestigando si hay alg$n mod para arreglar esto" pero por el momento nos tendremos que conformar
con el método siguiente.
Oamos a subir el archio inde(.+tml al hosting. Para ello hacemos clic con el botón derecho del ratón
sobre la carpeta !webejemplocctwinternet! (en adelante la llamaremos simplemente !internet!" que
me estoy cansando de ese nombre tan largo" &e &e) y del men$ que se abre escogemos la opción
!Connect! que significa !1onectar al seridor!. Si no te aparece actiada es porque ya está conectado9
7espues hacemos lo mismo" clic con el botón derecho del ratón y escogemos esta e# la opción
!/pload! que significa !Subir!9
Se abre entonces una entana donde debemos buscar" dentro de la carpeta donde guardamos los
archios de la web de e&emplo" el archio inde(.+tml (la ruta ser*a algo as* como 19P7ocuments and
SettingsP8suarioP-scritorioPmisApaginasAwebPwebAe&emploAcctw). Selecciona el inde(.+tml y pulsa en
!&brir!.
64
Pues ya está. 6hora aparecerá en la entana 3or@space del 5tml Bit el nueo archio inde(.+tml"
pero esta e# es el nuestro. Si ahora isitas tu página web escribiendo en tu naegador la dirección"
erás algo parecido a la página web del e&emplo que estamos haciendo. 1oncretamente erás esto9
/o se e ni la sonrisa" ni la imagen de fondo" ni el bu#ón ni se están respetando los estilos css. Por
qué puede ser? -ste es el error más frecuente al principio y por eso te pido que prestes atención a
esto.... Si no subes el archio correspondiente" no se en los elementos. Si no se e el bu#ón es porque
no se ha subido (upload) el archio del dibu&o del bu#ón. 'o mismo para el fondo. % si los estilos no se
están respetando es porque no se ha subido a$n la 5o&a de -stilo (estilos.css). 0bio erdad? Pues erás
como caes alguna e#" &e &e.
-n la página siguiente aprendemos a subir el resto de archios y as* arreglamos el problema.
#ubir el resto de arc+i"os al ser"idor
-sto es fácil" pues lo acabas de hacer hace un momento con el inde." no? 5as de seleccionar los
archios uno por uno y hacerles el !/pload!. 4ecuerda9
65
+.A 1onectar con el seridor con botón derecho del ratón sobre la carpeta a#ul y pulsando en
!Connect!.
,.A Botón derecho sobre la misma carpeta a#ul de nueo y seleccionar !/pload!.
D.A Seleccionar un archio y pulsar en !&brir!.
E.A 'o mismo para el siguiente archio. 5a#lo solo para los archios estilos.css0 estilogeneral.css y
plantilla.+tml.
6 la hora de seleccionar el archio que quieres subir puedes tener apretada la tecla Shift de tu
teclado (la flecha del teclado que hay a la i#quierda apuntando hacia arriba) y as* podrás seleccionar
arios archios de una sola e#.
Oerás como no es posible subir la carpeta !objetos!. 1uando la seleccionas para subirla en lugar de
subirse se abre mostrando sus componentes. 'o que hay que hacer es crear primero la carpeta ob&etos
en el seridor o hosting. Oeamos como9
Crear nue"as carpetas
5a# clic con el botón derecho del ratón sobre el nombre de la carpeta !webejemplocctwinternet!.
Selecciona la opción New M Create New Folder. Si no te aparece actia tendrás que conectar primero el
<tp (botón derecho sobre la carpeta y pulsar !Connect!" como antes)9
Se abre una entanita donde has de ponerle el nombre a la carpeta. 4ecuerda" es ! objetos! (todo en
min$sculas) no !-bjetos!9
6hora que ya tienes la carpeta !objetos! dentro de tu hosting. 2en en cuenta una cosa importante.
1uando quieras colocar un archio directamente en la rai# de la web (la rai# significa en el primer niel
de la web" es decir" fuera de cualquier carpeta) has de hacer el !clic derecho! sobre el nombre !web
ejemplocctwinternet!. Pero si lo que quieres es colocar alg$n archio !dentro! de una carpeta" es
sobre esa carpeta donde has de hacer !clic derecho! para escoger luego !/pload!. -n caso contrario el
archio no se subirá dentro de esa carpeta. 0&oL
Por tanto" para subir ahora los archios que hay dentro de la carpeta !objetos! de tu disco duro a la
carpeta !objetos! del seridor" has de hacer clic derecho sobre la carpeta ob&etos a#ul" hacer clic en
!upload! (o en Connect antes si se ha desconectado) y después escoger los archios a subir" ale? Pues
dale" a er si lo consigues...
1n definiti"a...
66
6l final" si abres las carpetas webejemplocctwlocal y webejemplocctwinternet en la entana
$or%space del 5tml Bit y si has hecho los deberes correctamente" te ha de aparecer algo como lo que
se muestra en la imagen de la derecha.
%a tenemos los archios de lo que lleamos hecho de e&emplo en el nueo hosting. /o es
emocionante? 6 partir de ahora" cada e# que hagamos alg$n cambio o me&ora en el e&emplo podremos
subirlo al seridor (o hosting) para er como a quedando. 6$n nos queda mucho por hacer" as* que...
paciencia y ánimo.
Por cierto" si quieres er tu plantilla.+tml en tu seridor después de haberla subido" basta con
escribir su dirección en tu naegador. Su dirección será la misma que escribes para er el inde." seguido
de 'plantilla.+tml
-s decir" si tu dirección es +ttp2''*omismo.onlinewebs+op.net' la dirección de la plantilla será
+ttp2''testeando.onlinewebs+op.net'plantilla.+tml
Como colocar bordes a la plantilla de nuestra página web
2al y como tenemos la plantilla" queda un poco cutre" as* que amos a ponerle unos bordes a los lados
para me&orar su aspecto.
1on los bordes hay que tener mucho cuidado" pues cada naegador interpreta los bordes de un modo
distinto y podr*a estropearnos el aspecto de nuestra página. Qmagina un rectángulo. Si le definimos un
borde de +: pi.eles de anchura" unos naegadores pintan ese borde por fuera de ese rectángulo"
mientras que otros lo pintan por dentro del rectángulo. 6l final resulta que los isitantes que ean la
web con un tipo de naegador la eran bien" pero otros que usen otros naegadores no la erán como
nosotros queremos. 'a forma que aqu* proponemos es sencilla y procura que la página web se ea
idéntica usando cualquier naegador.
Dónde se define un borde
Si a$n te acuerdas de lo e.plicado al principio de las lecciones (esperemos que s*...) nos propusimos
definir los contenidos en el código html de las páginas de&ando la definición del aspecto en la 5o&a de
-stilo. 1omo los bordes son más aspectos decoratios que contenidos en s*" amos a definirlos en la 5o&a
de -stilo. 6s* además podremos cambiarlo cuando nos de la gana con solo ariar algunos detalles del
archio de estilo en lugar de tener que hacerlo en cada una de las páginas de la web.
Cómo se definen los bordes
-n la 5o&a de -stilos" se define el borde de un elemento (por e&emplo de una capa o di) escribiendo
esto entre sus corchetes9
border2 3p( solid blac% 4
67
donde 3p( es la anchura del borde" solid significa que será una l*nea continua y blac% (negro) será el
color que queremos que tenga la l*nea de borde. 5ay otras formas de definir el borde" pero para el
e&emplo nos basta con saber esto. 1uando quieras aprender más cosas sobre el Border solo tienes que
isitar la sección 1urso de -stilos 1SS de 1omo1rear2u3eb.
'a l*nea anterior crea por tanto un borde de + pi.el de ancho" con una l*nea continua de color negro
por arriba" aba&o y por los lados del elemento al que se lo apliquemos. Pero en ocasiones qui#as
prefiramos dibu&ar el borde solo por uno de los lados de&ando sin borde los otros. 1ómo podr*amos hacer
esto?
Dibujar el borde solo por algunos lados
Para dibu&ar el borde solo por un lado" se pone esta l*nea en lugar de la anterior9
bordertop2 blac% 3p( solid (dibu&a el borde solo por arriba)
borderbottom2 blac% 3p( solid (dibu&a el borde solo por aba&o)
borderleft2 blac% 3p( solid (dibu&a el borde solo por la i#quierda)
borderrig+t2 blac% 3p( solid (dibu&a el borde solo por derecha)
Si queremos dibu&ar el borde por arios lados pero no por los cuatro" basta con escribir (entre los
corchetes del elemento al que se lo queremos aplicar) las l*neas anteriores que queramos" separadas por
punto y coma !4!.
5eamos un ejemplo de aplicación de bordes
Para practicar" amos a dibu&ar algunos bordes en el e&emplo que lleamos hecho. 6bre tu 5tml Bit y
abre el archio estilogeneral.css
6hora" dentro de los corchetes del elemento !contenido! escribe esto de aba&o para dibu&ar un borde
a la i#quierda y un borde a la derecha9
contenido 6 ....lo que ya hab*a .......... 4 borderleft2 blac% 3p( solid 4 borderrig+t2 blac% 3p(
solid 7
Si ahora guardas la 5o&a de -stilo estilogeneral.css y haces ista preia en el archio plantilla.+tml
podrás er como aparecen bordes negros a los lados de la capa !contenidos!.
Problema con los distintos na"egadores
-l ob&etio de toda página web es que se ea identicamente en cualquier naegador. 1on lo que
lleamos hecho en el e&emplo ya podemos obserar un fallo. 6cabo de descubrir una regla9
!Si defines un borde en un elemento" ese elemento no puede llear también definido un ancho
concreto mediante el widt+" es decir" no le podemos asignar una cantidad numérica" solamente se le
puede definir widt+2auto!. Si no seguimos esta regla" la web no se erá bien en todos los naegadoresL!
Para arreglar esto basta con eliminar la cifra de la anchura para la capa !contenido!. 4ealmente no
a a ser un problema eliminar ese widt+2899p(" pues la anchura ya está definida por la capa que
contiene a contenido (global)" as* que eliminamos widt+2899p( de la capa contenidos en estilo
general.css la guardamos y hacemos ista preia para er que ha ocurrido.
Oaya" más problemas.... ahora resulta que en Qnternet -.plorer se e bien" pero con el 0pera se nos
estropea la estructura... -sto lo arreglamos ahora mismo eliminando en la definición de estilo de la capa
contenido la propiedad float2left que en realidad no nos hac*a mucha falta.
6hora s* que se e correctamente en todos los naegadores... o al menos.. eso espero. Si no es as*
d*melo en el <oro 1123 ale?
Bordes para el resto de capas
Bueno" ahora que emos que esto del borde funciona" amos a ponerle borde a otras capas"
recordando por supuesto la regla anterior que dec*a... !Si la capa tiene definida una cantidad numérica
para el widt+" no podemos definirle el borde o se deformará la capa un poco!.
6hora amos a ir colocando bordes a arias de las capas de la plantilla" teniendo en cuenta que
cuando tenemos una capa encima de otra" si le ponemos un borde inferior a la de arriba" no será
necesario ponerle borde superior a la de aba&o (pues le ale el borde inferior de la de encima... se
entiende esto?...).
68
6 la capa o di llamada na"egacion le amos a poner borde por lo cuatro costados (por arriba" aba&o "
i#quierda y derecha)" que como ya sabemos" se hace a>adiendo esto de aba&o entre los corchetes de la
5o&a de -stilo estilogeneral.css9
border2 blac% 3p( solid
quedando esa l*nea as* en la 5o&a de -stilo9
:na"egacion 6bac%groundcolor2 pin% 4 border2 blac% 3p( solid 7
Si ahora le pusieramos borde a la capa de arriba del todo (cabecera) por los cuatro costados" nos
aparecer*a un borde de , pi.eles entre esa capa y la capa na"egacion" (+ pi.el definido en la capa
na"egacion más otro pi.el definido para la capa cabecera). Por tanto y para no tener unos bordes más
gruesos que otros" a la capa cabecera le amos a definir el borde solamente por ariba y por los lados.
-sto" como ya sabes" se hace as*9
:cabecera 6 bac%groundcolor2 pin% 4 borderleft2 blac% 3p( solid 4 borderrig+t2 blac% 3p(
solid 4 bordertop2 blac% 3p( solid 7
6hora amos con la capa pie. Oamos a definirle un borde por los cuatro costados de este modo9
:pie 6bac%groundcolor2 brown 4 border2 blac% 3p( solid 7
% con esto quedan todas la capas bordeadas. %a sabes usar los bordes y la página tiene me&or pinta.
-n adelante la me&oraremos a$n más hasta que quede totalmente profesional...
1s;uinas redondeadas para las capas de la web
'os bordes no quedan mal del todo" pero si consiguiéramos redondear las esquinas ya ser*a para sacar
nota" erdad? Pues amos allá.
/o e.iste 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. 1ómo? Simplemente dibu&ando el contorno redondeado en una imagen y colocándola
después en la capa como imagen de fondo. 7e este modo no solo podemos conseguir el redondeado" sino
también cualquier otra forma que seamos capaces de dibu&ar" como por e&emplo la#os" sombras de
colores" etc" etc (el etc depende solo de tu imaginación).
Solo es necesario tener un poco de destre#a para dibu&ar lo que necesitamos con un programa de
dibu&o" como el Paint del 3indows" o similar. -n el <oro 1123 hay una sección en la que se habla del
Paint Shop Pro (PSP) que qui#ás te sea de ayuda para aprender a dibu&ar con el ordenador.
Para no me#clar mucho las cosas" partirémos aqu* de algunas imágenes ya hechas. 'as usaremos para
este e&emplo de página web que estamos haciendo y te de&o a t* que crees las tuyas para que la pongas
en tu propia web" o@i?
Para empe#ar" cópiate estas dos imágenes y pégalas en la carpeta !ob&etos! para poder seguir estas
lecciones. Por si no recerdas cómo se copiaban imágenes de otras webs" te recuerdo que solo tiene que
hacer clic con el botón derecho del ratón sobre la imágen y escoger la opción !1opiar Qmagen...! (o algo
parecido). 'uego seleccionas la carpeta de tu disco duro donde la quieres pegar (la carpeta ob&etos) y
listo.
Se trata de imágenes con e.tensión gif y con fondo transparente. Guárdalas poniéndoles de nombre
curaAsuperior.gif y curaAinferior.gif
6 continuación eremos paso a paso como poner estas imágenes en la parte alta y ba&a de la página
web para conseguir un efecto más profesional.
/na capa nue"a para el borde superior
69
'a imágen de la cura de la parte superior de la página web la amos a poner como una imagen de
fondo (un gif) en una nuea capa que amos a insertar en la página web" &usto que quede al principio de
todas las demás. 'a amos a llamar cur"asuperior. %a sabes" por un lado escribimos unas l*neas en el
código html de la plantilla.+tml y por otro lado definiremos las propiedades de esta nuea capa en la
5o&a de -stilos llamada estilogeneral.css
6bre el archio plantilla.+tml con tu 5tml Bit e inserta esta l*nea &usto entre la l*nea de la capa
glogal y la de contenido9
<di" id=>cur"asuperior>?<'di"?
5a de quedar por tanto as*9
.....
<div id="global">
<div id="curva-superior"></div>
<div id="cabecera">Bienvenidos a mi web</div>
.....
1omo erás" esta l*nea no tiene contenido ninguno. 4ealmente no le hace falta pues lo $nico que
queremos ponerle es la imagen de la cura de antes" pero eso lo amos a definir con estilos css" no en el
html de modo que se a a quedar as*" acia.
6hora abre la ho&a de estilos estilogeneral.css e inserta esta otra l*nea donde definimos las
propiedades de la capa curaAsuperior9
:cur"asuperior 6 bac%groundimage2 url@objetos'cur"asuperior.gifA 4 bac%groundrepeat2 no
repeat 7
Nué hemos definido conesa l*nea de estilo? 'e hemos dicho que la imagen de fondo será curaA
superior.gif" que está en la carpeta ob&etos y que no se repita. Si ahora guardas la ho&a de estilo estiloA
general.css y haces ista preia desde el 5tml Bit erás este resultado.
Oaya mierda" que decepción. Se e e.áctamente lo mismo que antes de insertar la capa" nada de
imagenes con bordes redondeados... qué ha pasado? Bueno" como la capa curaAsuperior no contiene
nada de nada en su interior (en el html) el naegador la muestra con una anchura de cero y una altura
cero" por lo que emos... 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 e&emplo una letra o una palabra" pero como no
quiero que apare#ca nada de eso" lo que haremos será definirle en la ho&a de estilo una anchura y una
altura. 1uál? pues la misma que tiene la imagen y asi nos aseguramos que se e entera.
#curva-superior { background-image: url(obe!os/curva-superior.gi"# $
background-repea!: no-repea! $
wid!%:&''p( $
%eig%!: )*p( +
5as isto? 1on width9 K::p. le indicamos que la capa ha de tener K:: pi.eles de ancho y con height9
+,p. le decimos que su altura ha de ser de +, pi.eles" igual que la imagen de fondo. 6hora es de esperar
que se ea y además completa" amos a er....
Bueno" la cosa a me&orando" aunque ahora encontramos otra cosilla que no nos gusta" y es que
haciendo ista preia con Qnternet -.plorer (con el <irefo. no ocurre) aunque la imagen sale
prefectamente" aparece un espacio en blanco separando la imagen del resto de la página y queda
bastante feo.
-sto se arregla muy fácil a>adiendo en la ho&a de estilo" además de la altura y la anchura de antes"
una palabra mágica nuea" que no amos a e.plicar ahora pero que puedrás encontrar en el 1urso de
-stilos 1SS. 'o que hemos de a>adir es esto9
70
#curva-superior { background-image: url(obe!os/curva-superior.gi"# $
background-repea!: no-repea! $
wid!%:&''p( $
%eig%!: )*p( $
overflow : hidden +
6hora" si guardas la ho&a de estilo y haces ista preia si que se e correctamente" aunque ahora parece
que sobran dos cosas. Por un lado el borde entre la imagen y la capa donde pone bienenido sobra y por
otro lado" si le damos color de fondo blanco (white) a esa capa rosa" el efecto será a$n me&or.
Para eliminar el borde solo de la parte de arriba de la capa cabecera eliminamos lo que pongo en ro&o
aba&o9
:cabecera 6 bac%groundcolor2 pin% 4 borderleft2 blac% 3p( solid 4 borderrig+t2 blac% 3p(
solid 4 bordertop2 blac% 3p( solid 7
y para poner color de fondo blanco (white) en lugar de rosa (pin@) de&amos finalmente la l*nea as*9
:cabecera 6 bac%groundcolor2 w+ite 4 borderleft2 blac% 3p( solid 4 borderrig+t2 blac% 3p(
solid 7
-l efecto conseguido" aunque no es asombroso" es más profesional.
Borde redondeado para la parte inferior
'o mismo que hemos hecho con la parte de arriba podemos oler a hacerlo para la parte inferior de
la página para conseguir un me&or aspecto. 2e lo recuerdo paso a paso y as* terminas de pillarlo" ale?
+.A 1reamos una nuea capa en plantilla.+tml llamada cur"ainferior sin ning$n contenido dentro. 'a
colocamos al final de todas las capas9
.....
<div id="pie">,s!e es el pi- de p.gina</div>
<div id="curva-inferior"></div>
</div>
.....
,.A 6brimos estilogeneral.css e incluimos la definicion de la nuea capa cur"ainferior que será
igual que la de antes pero cambiando el nombre de la imagen de fondo9
#curva-in"erior { background-image: url(obe!os/curva-inferior.gi"# $
background-repea!: no-repea! $
wid!%:&''p( $
%eig%!: )*p(
over"low: %idden +
D.A Nuitamos el borde de aba&o de la capa pie (ya sabes" eliminamos border2 blac% 3p( solid que da
borde a los cuatro lados y a>adimos los tres lados que queremos" left" right y top) y además le ponemos
color blanco (white) de fondo a esa capa9
#pie { background-color: w%i!e $
border-le"!: black )p( solid $
border-rig%!: black )p( solid$
border-!op: black )p( solid +
71
4epito" he eliminado el border2 blac% 3p( solid que le daba borde a los cuatro costados y he
colocado en su lugar el borde por la i#quierda" derecha y arriba solamente.
E .A Guardamos la ho&a de estilo y obtenemos esta isión.
/ploading... #ubiendo los arc+i"os al ser"idor
6unque ya lo hemos hecho antes con el inde(.+tml y algunos archios de la carpeta ob&etos" amos a
repetir cómo se suben los archios al seridor y as* aproechamos para subir estos $ltimos que hemos
creado" ale? 6s* quedará todo un poco más claro y no lo olidaremos (espero...).
Si no recuerdo mal" desde esa e# anterior tenemos arios archios nueos" como las dos imágenes de
la carpeta objetos" los de arriba y aba&o de la plantilla" y por otro lado también hemos ariado la
plantilla.+tml y la ho&a de estilos estilogeneral.css
4ecuerda que cuando hacemos un cambio en los archios de nuestra página web" estos cambios solo
están en nuestro ordenador. 7e modo que para que los isitantes de la web puedan erlos" tenemos que
subir esos mismos archios con los cambios reali#ados al seridor. Si no" los isitantes seguir*an iendo la
ersión antigua.
Por tanto" los archios que tenemos que subir son9
• curaAsuperior.gif
• curaAinferior.gif
• plantilla.html
• estiloAgeneral.css
Para subir los archios plantilla.+tml y estilogeneral.css basta con hacer clic con el botón derecho
del ratón sobre la carpeta a#ul webejemplocctwinternet" escoger la opción !connect! para
conectar el <2P al seridor" depués hacer clic de nueo sobre el mismo sitio y escoger la opción
!/pload...!" seleccionar el archio que queremos subir al seridor (puedes seleccionar esos dos de una
sola e# manteniendo pulsada la tecla Control a la e# que haces clic en arios de los archios) y listo.
Si el archio ya e.ist*a" te dirá que ya e.iste y te pregunta si lo quieres sobreescribir.
7ile que sB y listo" archio actuali#ado.
Para subir los dos archios de las imágenes de la parte alta y ba&a de la plantilla que acabamos de
usar en las páginas anteriores" se hace del mismo modo" pero haciendo clic derecho sobre la carpeta
objetos antes de elegir /pload. -n caso contrario los archios irán a parar a la rai# del seridor" es
decir" fuera de la carpeta objetos y claro" no aparecerán en la web" pues el naegador los a a buscar
dentro de esa carpeta. Si te ocurriera eso" simplemente borra los archios que se han colado fuera de la
carpeta y ueles a subirlos" esta es correctamente.
5a de quedar una cosa as* en la ista de 3or@space del 5tmlABit9
72
Cómo colocar el logotipo con enlace en la web
%a se que a$n es pronto para que tengais el banner o logotipo de la web listo" pues seguramente a$n
nisiquiera tienes claro de qué a a tratar" pero amos a e.plicar cómo insertar el logo en la parte
superior y cómo colocarle un enlace para que al hacer clic sobre él se diri&a al isitante a la página
principal. 1uando más adelante tengas el banner o logotipo terminado solo tendrás que sustituir uno por
otro.
-n cualquier caso" te recuerdo que este e&emplo que estamos !fabricando! debes seguirlo al pie de la
letra para no perderte en ning$n paso. 'uego" en tus e.perimentos puedes colocar lo que te de la gana
" o@i? &e &e.
Bien" amos a partir de un banner genial" el de 1123 que nos ha creado nuestra amiga %aneth (con
tu permiso...). Qmagino que ya sabes copiar y pegar imagenes desde una web" erdad? Pues copiate este
banner que de&o aba&o y pégalo dentro de tu carpeta ob&etos para seguir.
6hora que lo has pegado en tu carpeta ob&etos" cambiale el nombre. 5a de llamarse logotipo.gif" o@i?
73
-ste logotipo.gif lo amos a situar en la parte superior de cada una de las páginas" por lo que la capa
correspondiente será el di llamado cabecera. Para facilitar la colocación de los elementos que
pongamos en la cabecera" que me&or que crear dos diisiones dentro de ese espacio o capa? 6s*" será
más fácil colocar el logotipo a la i#quierda y de&ar un espacio a la derecha" en otro di" para en un
futuro colocar una foto guapa o quien sabe" qui#ás publicidad para ganar algo de dinero e.tra y
pagarnos el hosting de la web" no?
Pues seg$n eso" amos a crear dos dis dentro del di cabecera. 'os llamaremos... logotipo y ...
publicidad" por qué no. 6s* que" abre la plantilla.+tml con tu 5tml Bit" y e a la ista de código para
cambiar esta l*nea (te recuerdo que los códigos 5tml los escribo en a#ul y los de la ho&a de estilos en
erde)9
<div id="cabecera">Bienvenidos a mi /eb</div>
por estas otras9
<div id="cabecera">
<div id="logotipo"></div>
<div id="publicidad">Bienvenidos a mi /eb</div>
</div>
1omo es" hemos metido las dos capas nueas dentro de la capa cabecera" y hemos quitado el
mensa&e de Bieenida de la capa cabecera para colocarlo directamente dentro de la capa publicidad"
por poner algo mientras en ella.
6hora toca colocar dentro el logotipo. %a imos cómo colocar una imagen y también cómo hacerle un
enlace cuando imos lo del bu#ón de correo" te acuerdas? Pues ahora es casi igual (pero en lugar de
mailto2tudireccionCemail.com se pone la ruta de la página destino). -scribimos la l*nea de la imagen
dentro del di logotipo" quedando esa l*nea de este modo9
<div id="logo!ipo">
<img src="objetos/logotipo.gif" width="2!" height=""!"
alt="#a$ clic a%u& para volver a la p'gina de inicio">
</div>
'o que he puesto dentro del alt=>> es el mensa&e que aparecerá en algunos naegadores si de&amos el
cursor sobre el logotipo.
6hora nos toca crear y darle propiedades a esa nueas capas en la ho&a de estilos estilogeneral.css
as* que la abrimos y a>adimos esto (le he puesto colores de fondo para er donde está cada una)9
#logo!ipo {background-color: brown+
74
#publicidad {background-color: pink+
Para guardar un cierto orden" incluye esas dos lineas &usto después de la definición de la capa
cabecera de la ho&a de estilo. 6s*" en orden" nos será más fácil encontrarlo todo.
Bien. Nué propiedades le damos a estas dos capas? Para empe#ar habr*a que definirles la anchura. -n
principio le daremos un ancho de ,K: pi.eles a logotipo" pues es un poco más que lo que ocupa la
imagen (,H:p.). 6 publicidad le daremos el resto" es decir" K::A,K:A,RF+K pi.eles. (ese , es un pi.el del
borde i#quierdo más otro pi.el de grosor del lado derecho de esa capa" pues los grosores también
ocupan un espacio).
#logo!ipo {background-color: brown $ width:2"!p(+
#publicidad {background-color: pink $ width:)*"p(+
Guardando la ho&a de estilos y haciendo ista preia emos que realmente estas dos capas están una
encima de otra. 1ómo se eitaba esto ? Oenga" ha# memoria... qué propiedad permite que podamos
poner una a un lado y la otra al otro lado? 6 er si te haces una chuletaL (en ?e&ico creo que se llama
acordeón" &e &e).
Por si no te acuerdas te ayudo un poco. Oamos a ponerle float2left a logotipo para colocarlo a la
i#quierda y float2rig+t a publicidad para mandarla a la derecha.
#logo!ipo {background-color: brown $ wid!%:*&'p( $ float:left +
#publicidad {background-color: pink $ wid!%:0)&p( $ float:right +
Guardamos la ho&a de estilo y hacemos ista preia en plantilla.+tml para er cómo ha quedado...
e.ácto" una erdadera mierda " &e &e &e. Oamos a arreglarlo un poco. Para empe#ar amos a darle una
altura concreta a la capa cabecera" por e&emplo de KF pi.eles (un poquito más que la altura del
logotipo que es K:p.). 6s* la capa gris que emos que se mete dentro del espacio de publicidad
respetará esa dimensión. 6s* que de&amos cabecera as*9
#cabecera {background-color: w%i!e $ border-le"!: black )p( solid $
border-rig%!: black )p( solid $ height:")p(+
1on esto la cosa se arregla bastante. 6hora solo queda ba&ar un poco el te.to de Bienenida y qui#ás
hacer el tama>o de letra algo mayor (esto del tama>o de letra lo emos luego). ?odificamos en la ho&a
de estilos la capa publicidad para de&arla as*9
#publicidad {background-color: pink$ wid!%:0)&p( $ "loa!:rig%! $
margin-top:2)p(+
6hora" si guardas la ho&a de estilo y haces ista preia s* que se e realmente bien. %a pudes
eliminarle los bac%groundcolor a las capas logotipo y publicidad" pues ya no necesitamos esos colores
para saber dónde acaba cada una. 2ras eliminar eso uele a guardar la ho&a de estilo. -sto ya pinta
me&or" no?
Solo nos queda ponerle el enlace hacia la página principal. -so lo imos ya" as* que pongo
directamente la l*nea" ale? 6bres la plantilla.+tml y a esta l*nea9
<div id="logo!ipo">
<img src="obe!os/logo!ipo.gi"" wid!%="*1'" %eig%!="&'"
al!="2a3 clic a4u5 para volver a la p.gina de inicio">
</div>
le a>ades esto que marco en negrita9
<div id="logo!ipo">
<a href="inde(.html">
<img src="obe!os/logo!ipo.gi"" wid!%="*1'" %eig%!="&'"
al!="2a3 clic a4u5 para volver a la p.gina de inicio">
</a>
</div>
75
'isto" ha# ista preia y erifica que todo a bien. 6hora no solo tenemos el banner" sino que tenemos
preparado un hueco para poder poner un fondo que me&ore el aspecto o publicidad" si lo deseamos. Para
cualquiera de esas dos cosas" habr*a que retocar algo" como por e&emplo eliminar el margintop2DEp(
de la capa publicidad en la 5o&a de -stilos" pero es algo que eremos en su momento. Si es que se me
olida me lo recuerdas en el <oro 1123L
Cómo colocar el menF +oriGontal en enlace en la web
6unque más adelante eremos como crear men$s más complicados en la parte superior" amos a
comen#ar por uno sencillo para no asustarnos e ir cogiendo base.
6ntes de crear tu propia web es muy importante que tengas claro un par de cosas. 'o primero es
saber de qué as a hablar en la web y lo sengundo es tener más o menos claro cómo as a estructurar
esos contenidos. -s decir" desglosar lo que quieres contar en secciones y subsecciones. 7e ese modo
sabrás qué secciones as a colocar en el men$ superior.
6 la hora de crear la web" colocar*as las secciones en el men$ hori#ontal superior y al hacer clic sobre
cada una de esas secciones" se abrir*a la página principal de esa sección mostrando en el men$ ertical
lateral (el de la i#quierda que ya hemos colocado en este e&emplo) las subsecciones.
Por e&emplo" digamos que oy a crear una web de un grupo de m$sica. 'as secciones que se me
ocurren son" !Presentación!" !5istoria del grupo!" !2raba&os musicales!" !1onciertos! y !Sona de
7escarga!. 'uego" cada una de esas secciones principales pueden desglosarse o diidirse en otras
subsecciones. Por e&emplo" en la sección !2raba&os ?usicales! podr*an aparecer las subsecciones !7isco
+!" !7isco ,!....!7isco T!. 'a sección descargas podr*a diidir se !1anciones!" !Oideos!" !Poster y 1arteles!"
!'etras!....
Para que entendais la idea" las secciones principales irian en el men$ hori#ontal que amos a
aprender a crear ahora mismo" mientras que las subsecciones irian en el men$ lateral.
Creando el ,enF HoriGontal
-l men$ hori#ontal lo amos a colocar en la capa que hemos llamado na"egacion. -s esa capa gris
hori#ontal que hay deba&o del logotipo. 6s* que" como imaginarás" tendremos que retocar un poco el
html de la plantilla y luego colocar las propiedades apropiadas en la ho&a de estilo para la capa
na"egacion.
Colocando el Html para el menF
1omo siempre" abre la plantilla.+tml con tu 5tmlABit. Oe a la ista de código y encontrarás la l*nea
de la capa na"egacion9
<div id="navegacion">Barra de 6avegaci7n</div>
Borraremos las palabras Barra de Na"egación y las sustituiremos por una lista" en la que cada
elemento será un enlace del men$. 'as listas en 5tml empie#an con un <ul? y terminan con un <'ul?.
7entro de una lista cada elemento de la misma empie#a por un <li? y termina con un <'li?" te acuerdas?
'a lista completa con los enlaces ser*a algo as*9
<ul>
<li>8ecci7n )</li>
<li>8ecci7n *</li>
<li>8ecci7n 9</li>
<li>8ecci7n :</li>
</ul>
Pues ese es el código 5tml que tenemos que poner dentro de la capa naegación" eliminando claro el
te.to que ten*a de !Barra de /aegación! quedando al final as*9
<div id="navegacion">
<ul>
<li>8ecci7n )</li>
<li>8ecci7n *</li>
76
<li>8ecci7n 9</li>
<li>8ecci7n :</li>
</ul>
</div>
1uando hagas tus e.perimentos y quieras a>adir o eliminar enlaces en el men$ hori#ontal" solo
tendrás que irte a la plantilla.+tml y a>adir o eliminar l*neas <li? #ección H<'li? a este tro#o de código
de arriba.
Si haces ista preia de la plantilla erás algo as*. Sorpresa? Puedes er que los elementos no
aparecen uno al lado de otro sino un deba&o del otro. -sto es normal" pues las listas son as*. Pero
nosotros amos a cambiar eso con solo poner la palabra mágica adecuada en la ho&a de estilos" que para
eso está.
6bre el archio estilo.general.css con el 5tmlABit y amos a modificar la l*nea de la capa
na"egacion" que hasta este momento era as*9
#navegacion {background-color: gra; $ border: black )p( solid +
Para empe#ar amos a intentar que todos los elementos de este menu de naegación apare#can uno
al lado de otro" en l*nea. 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 i#quierda"
el primero de ellos se irá hacia la i#quierda" el segundo igual quedando al lado del anterior y as* con
todos los demas. Oamos a probarlo a er qué pasa.
6l querer ponerle float2left a todos los elementos de la lista" parece lógico pensar que en la ho&a de
estilo hay que ponérselo a los li que haya dentro de la capa na"egacion (hay que eitar que los li de la
otra capa del men$ lateral tomen esa propiedad)" as* que a>adiriamos esta otra l*nea en la ho&a estilo
general.css9
#navegacion li {"loa!:le"!+
5aciendo ista preia emos este resultado en la plantilla. 1omo era de esperar... emos un
auténtico churro" pero amos a terminar de arreglarlo. /ormalmente" si le damos una altura concreta a
la capa" se arregla todo. Oamos a colocarle +eig+t2D9p( a la capa na"egacion (no a :na"egacion li
6...." sino a :na"egacion 6.... ) y eamos que pasa9
#navegacion {background-color: gra; $ border: black )p( solid $
height:2!p(+
6hora s* que sale realmente como queremos. /os faltan a$n algunas cosillas" como eliminar el punto
negro de la i#quierda de cada elemento del men$ lateral y como ponerle unos margenes adecuados para
separarlos un poco.
-n la página siguiente aprenderemos a me&orar a$n más el aspecto de este men$ hori#ontal. Oerás
que bien nos a a quedar .

1liminando el punto negro del menF HoriGontal
Para eliminar ese puntito tan molesto" hay que ponerle la propiedad listst*le2none a alguna de las
l*neas de la ho&a de estilo. 6 cuál crees que hay que ponérsela? Pues por e&emplo a la l*nea :na"egacion
li" pues esa l*nea contiene las propiedades de cada una de las secciones del men$" erdad? Oamos a er
que pasa. 6>ade esto9
#navegacion li {"loa!:le"! $ list-st+le:none +
1onseguimos esta otra ista preia de la plantilla. 6hora no aparecen esos punto" que bien.
&comodando el margen de los enlaces del menF +oriGontal
6 estas alturas ya debes saber como retocar los margenes para que en lugar de aparecer todos los
enlaces del men$ hori#ontal tan pegados se muestren un poco más separados. Qmagino que sospechas
que eso se hace o bien con el margin o bien con el padding. 4econo#co que es un poco complicado
saber si hay que usar el margin o el padding" a m* me ocurre lo mismo. Siempre recurro a la foto del
77
apartado ?argin o Padding para aclararme" &e &e &e. Pero ante la duda lo me&or es probar" si uno no a
bien" usa el otro.
Oamos a intentar separar cada enlace del men$. Para ello le pondremos un margin al los elementos li
de la capa na"egacion. Para ello ya sabes" hacemos esto9
#navegacion li {"loa!:le"! $ lis!-s!;le:none $ margin: !p( *!p( !p(
*!p( +
Si recuerdas" el orden de esas cifras era9 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 i#quierda. Seg$n la l*nea de
arriba" hemos de&ado unos margenes de +: pi.eles por la i#quierda y derecha de cada enlace del men$.
Nueda as* ahora la plantilla de nuestra web.
Parece un poco escaso. Oamos a cambiar los dos 39p( por D9p( para aumentar la separación entre
ellos" quedando ahora as* la plantilla. 6hora queda me&or.
Dando margen al conjunto de enlaces
5emos isto como separar los enlaces entre ellos" pero a$n podemos de&arlo me&or si los centramos"
no? 1omo no consigo centrarlos fácilmente amos a hacerlo de otro modo. Oamos a colocarle un margen
a la capa na"egacion ul por la i#quierda de unos E9p(. 1on eso conseguimos moer a la derecha todo el
grupo de enlaces. 'a nuea l*nea de css que hay que poner a la ho&a de estilos es esta9
,navegacion ul - margin-left: )!p( .
6hora tendremos este aspecto. 1omo es" hemos despla#ado todos los enlaces un poco (F: pi.eles) a
la derecha. Oamos a aumentarlo a 389p( para que quede más centrado. -ste el el resultado.
%a sabes que cuando hagas tus propios e.perimentos basados en este e&emplo" si a>ades más enlaces
a este men$ hori#ontal tendrás que disminuir estas cantidades para centrarlo.
Colocando enlaces al menF
Solo nos falta ya colocarle los enlaces a los elementos del men$. -so si que debes saberlo ya" pero lo
repetimos para recordarlo. 1omo a$n no sabemos a qué página mandar al isitante cuando hagan clic en
ellos" en lugar de ponerle la ruta de la página destino le colocaremos un simple :. -so hace que los
enlaces se muestren como tales" pero al pulsar sobre ellos no te mandan a ning$n lado.
Para conertir los elementos de la lista del men$ hori#ontal en enlaces" basta con colocarle esto que
os se>alo en negrita al código inicial que pusimos en el archio plantilla.html9
<div id="navegacion">
<ul>
<li><a href=",">8ecci7n )</a></li>
<li><a href=",">8ecci7n *</a></li>
<li><a href=",">8ecci7n 9</a></li>
<li><a href=",">8ecci7n :</a></li>
</ul>
</div>
1on eso" la plantilla se e ahora de esta forma.
<*&ate que ahora los enlaces del men$ hori#ontal se comportan como los del men$ lateral" es decir"
aparecen ro&os y sin subrayar y cuando colocas el cursor del ratón sobre ellos aparecen con fondo gris
claro y con l*nea ba&o ellos. -sto es porque cuando definimos las propiedades a las etiquetas a en la
ho&a de estilo" lo hicimos de forma general" es decir" para 2070S los enlaces. ?ás adelante
aprenderemos a crear arios tipos de enlaces" por si queremos que los del men$ lateral se comporten de
un modo distinto a los del men$ hori#ontal o incluso distintos a otros elementos del cuerpo de la página
web.
78
,ejorando el menF lateral
-l men$ lateral quedó más o menos bien" pero estarás de acuerdo en que puede me&orarse" erdad?
Pues amos a ello. 'o que amos a er aqu* es cómo darle la apariencia que tienen los men$s de la web
de 1omo1rear2u3eb" que pueden gustarte más o menos" pero eso da igual" pues una e# sepas hacer lo
que te propongo a continuación" serás capa# de me&orar su aspecto. 2en en cuanta que lo que yo intento
ense>arte es a crear el !esqueleto!" pero una e# sepas esto si tienes un poco de gusto y buena mano
podrás de&arlo mucho más guapo que el mio" pues será solo cuestión de ponerle buenos gráficos"
imagenes me&ores" colores más istosos.. ah* es donde entra el genio que lleas dentro... o no... &e &e
&e.
Bien" se trata de escoger dos imagenes. 8na se coloca arriba del todo del men$ lateral y la otra &usto
deba&o. 1omo ese men$ irá creciendo hacia aba&o conforme ayamos incorporando nueas secciones
(enlaces) al mismo" lo haremos de un modo algo peculiar.
'a imagen de arriba será fi&a y tendrá una altura concreta. -n cambio la imagen de aba&o ha de ser
bastante larga" lo suficientemente larga (hacia aba&o) como para contener el má.imo n$mero de
enlaces que tengamos preisto colocar en un futuro en cada uno de los men$s laterales (digo cada uno
porque cada sección tendrá su propio men$ lateral).
'as imágenes que amos a utili#ar para el e&emplo que estamos creando son las siguientes9
Qgual que hemos hecho en otras ocasiones" guarda estas dos imágenes en tu carpeta objetos y ponles
estos nombres9 menucur"asuperior.gif y menuparteinferior.gif
Qmagino que imaginas lo que toca hacer ahora... un poquito de 5tml y otro poco de 1SS y asunto
concluido. Será fácil. -state atento y podrás aplicar luego todo esto a tu propio proyecto.
Ietocando los códigos
-l código 5tml completo del men$ lateral era por el momento este9
<div id="menu">
<ul>
<li><a %re"="#">,nlace )</a></li>
<li><a %re"="#">,nlace *</a></li>
<li><a %re"="#">,nlace 9</a></li>
</ul>
</div>
Bueno" realmente es ese pero todas las l*neas entre <ul? y <'ul? han de estar seguidas una &usto
después de la otra para que el internet e.plorer muestre bien el men$. %o aqu* lo escribo en l*neas
separadas para que se ea más claro" pero acuérdate de luego guardar la plantilla con todas esas l*neas
seguidas.
'a idea de colocar las imágenes anteriores como fondos" pues as* no nos molestará a la hora de
escribir los enlaces dentro. Para ello la imagen más larga se la amos a poner de fondo a la capa menu"
mientras que la imagen más corta" la de arriba se la tenemos que poner a alg$n elemento de dentro de
79
esa capa. Si se la ponemos de fondo a los enlaces" esa imagen se repetirá con cada enlace" con lo que
no nos ale (solo debe aparecer una e# y además arriba del todo).
Para remediarlo le amos a poner un t*tulo al men$. 1omo cada sección tendrá su propio men$
parece buena idea que ese t*tulo sea el nombre de esa sección. 6s*" si una sección se llama !poesias!"
por e&emplo" pondremos la palabra !Poesias! arriba del todo del men$" como si fuera un t*tulo" y al
elemento t*tulo (+3) le colocaremos ese fondo corto. % todo arreglado.
7e modo que" lo $nico que hemos de retocar en el código 5tml de la plantilla.html será el incluir el
t*tulo. Si recuerdas de lecciones anteriores" los t*tulos se escriben igual que los párrafos" pero en lugar
de usar las etiquetas <p? y <'p? se usaban estas otras" <+3? y <+3? @es un uno0 no una eleJA.
-l men$ anterior con el t*tulo puesto quedar*a entonces con este código 5tml9
<div id="menu">
<ul>
<h*>/&tulo de 0ecci1n *</h*>
<li><a %re"="#">,nlace )</a></li>
<li><a %re"="#">,nlace *</a></li>
<li><a %re"="#">,nlace 9</a></li>
</ul>
</div>
-l problema que se nos presenta es que nosotros ya hab*amos definido unas caracter*sticas para los
párrafos tipo h+" por lo que ahora si las cambiamos" también cambian las propiedades de los t*tulos que
en un futuro pongamos en el contenido de la página.
-sto se supone que sabemos arreglaro. Nueremos definir unas propiedades para los t*tulos del tipo
h+" pero solo para los que están dentro del men$" es decir" los que pertenecen a la capa menu. 2e
acuerdas como se hac*a? Ue &e &e" que memoria...
6bre el archio estiloAgeneral e incluye esta l*nea" por e&emplo" deba&o de la l*nea donde definimos
la capa menu" as* seguiremos cierto orden.
#menu %) {+
1on esa l*nea lo que conseguimos es darla propiedades S0'0 a los t*tulos que hay dentro de la capa
menu" sin tocar para nada los demás. Solo un problema" y es que como los naegadores leen desde
arriba hacia aba&o. 2e lo e.plico me&or.
Qmagina una casa llamada Body. 7entro de ella hay unas cuantas habitaciones que llamamos 1apas y
dentro de cada habitación o capa hay arios elementos (párrafo" enlaces" etc). Qmagina ahora que la
ho&a de estilos le cambia los aspectos a los elementos de la casa. Por e&emplo" si escribo esto9
< {el color del pelo ser. rubio+
2odos (el asterisco V indica 2070S los elementos) los habitantes de la casa serán rubios. 2e acuerdas?
/osotros en lecciones pasadas pusimos una l*nea similar" que empe#aba con un asterisco.
6hora imagina que le digo con esta otra l*nea9
#cocina {el color del pelo ser. moreno+
que todos los elementos de la cocina (la capa cocina) han de ser morenos. Nué ocurre? 6l final serán
rubios como dec*a la l*nea de antes o serán morenos como dice esta otra? Pues como la $ltima orden
que he dado es la segunda" la de cocina" esa será la que manda. -n caso de que dos l*neas digan
distintas cosas para una misma propiedas (altura" anchura" borde.... color del pelo..) la que al final se
muestra en el naegador es siempre la $ltima.
Por supuesto" los elementos del ba>o y del salón siguen siendo rubios" pues la l*nea de la !capa!
cocina solo habla de sus elementos" no de los del resto de la casa. Se entiende ahora? -spero que si" &e
80
&e. % si no se entiende" d*melo en el <oro 1123 e intento e.plicarlo me&or" o@i? 2e lo agradecer*a
muchoL
Bien" pues si miras en la ho&a de estilogeneral.css" erás que tenemos al final del todo esta l*nea9
%) {"on!-si3e: ).*em$ color:blue $ "on!-weig%!: bold $ !e(!-
decora!ion: underline $ !e(!-align: cen!er+
6l estar al final" y estar definiendo propiedades para todos los +3 de la web" son esas las
caracter*sticas que mandan y será inutil darle otras propiedades en la l*nea nuea que hemos puesto.
Por qué? Pues porque ésta l*nea está después.
1ómo lo arreglamos? <ácil" la situamos antes de la otra y listo" o@i?
Para no perdernos" te de&o la ho&a de estilogeneral.css tal y como ha de estar ahora mismo" después
de haber incluido (aunque a$n acia) la l*nea para definir los t*tutlos de dentro de la capa menu.
1omparala con la que tienes por el momento y si no está igual" sustituyela" o@i? 7ebe tener ese orden
para no liarnos lecciones sucesias9
2 -te(t-indent:!p( 3 margin:!p( 3 padding:!p( 3 border:!p(.
p {!e(!-align: us!i";+
%) {"on!-si3e: ).*em$ color:blue $ "on!-weig%!: bold $ !e(!-
decora!ion: underline $
!e(!-align: cen!er+
%* {"on!.si3e: ).)em$ color:blue $ "on!-weig%!: bold $ !e(!-
decora!ion: none $
!e(!-align: cen!er+
bod; {!e(!-align: cen!er +
#global {wid!%:&''p( $ margin::p( au!o +
#curva-superior { background-image: url(obe!os/curva-superior.gi"# $
background-repea!: no-repea! $
wid!%: &''p( $
%eig%!:)*p( $
over"low: %idden +
#cabecera {background-color: w%i!e $ border-le"!: black )p( solid $
border-rig%!: black )p( solid $ %eig%!:&0p(+
#logo!ipo {wid!%:*&'p( $ "loa!:le"! +
#publicidad {wid!%:0)&p( $ "loa!:rig%! $ margin-!op:*0p( $ "on!-si3e:
)=p( +
#navegacion {background-color: gra; $ border: black )p( solid $
%eig%!:*'p(+
#navegacion li {"loa!:le"! $ lis!-s!;le:none $ margin: 'p( *'p( 'p(
*'p( +
#navegacion ul { margin-le"!: )&'p( +
#con!enido {background-color: orange $ border-le"!: black )p( solid $
border-rig%!: black )p( solid +
#con!enido p {margin: 0p( )'p( 'p( )'p( $ !e(!-inden!: )0p(+
#menu {background-color: ;ellow $ wid!%: )0'p( $ "loa!:le"! $
!e(!-align:le"! $ margin: 9p( )'p( 9p( 9p( +
81
#menu li {lis!-s!;le:none $ margin: :p( 'p( :p( =p( +
,menu h* -.
#pie { background-color: w%i!e $
border-le"!: black )p( solid $
border-rig%!: black )p( solid$
border-!op: black )p( solid +
#curva-in"erior { background-image: url(obe!os/curva-in"erior.gi"# $
background-repea!: no-repea! $
wid!%: &''p( $
%eig%!:)*p( $
over"low: %idden +
a {color: brown $ !e(!-decora!ion:none $ displa;: block +
a:link {+
a:visi!ed {+
a:%over {color:red $ !e(!-decora!ion:underline $ background-color:
silver+
a:ac!ive {+
Si te fi&as" he puesto casi arriba del todo las l*neas que definen p" +3 y +D. 4ecuerda además que la
l*nea del asterisco ha de estar por narices la primera de todas. Por qué? Pues por que si la ponemos en
medio o al final" uele a poner a cero los margenes y bordes de las capas que estén definidas antes que
ella. -s por lo mismo que acabo de e.plicarte.
Parece un poco lio tanto código" erdad? Pero imagino que mirándo l*nea por l*nea más o menos sabes
de que a todo" no? 7e hecho lo has ido escribiendo t$ mismo a lo largo de estas lecciones... Si no te
aclaras mucho siempre puedes empe#ar desde el principio y puedes ir repasando porqué se puso cada
cosa. /o te endr*a mal para ir repasando estilos.. /o te asustes" pronto" con un poco de más práctica
estos códigos no tendrán secretos para t*. 2e aseguro que muchos de los que se hacen llamar 3ebmaster
no tienen ni idea de estilos ni de capas. %a eres me&or que la mayoriaLL
5ol"iendo al menF
Guardando estilogeneral.css y haciendo ista preia a la plantilla.html podemos er esto9
Bueno" qui#ás quede me&or sin el subrayado y con una letra más peque>a" erdad? Para eliminarle el
subrayado se ponia en la ho&a de estilo esto9
!e(!-decora!ion:none
Para cambiar el tama>o del te.to se pone esto otro9
"on!-si3e:)'p(
donde 39p( es la altura de una letra en pi.eles. 5ay otras unidades que podemos usar en lugar de
pi.eles" pero lo eremos más adelante.
82
-l caso es que la l*nea de estilogeneral.css que define a los t*tulos de dentro de la capa menu ha de
quedar" por el momento as*9
#menu %) {te(t-decoration:none $ font-si$e:*!p(+
Guardamos la ho&a de estilo" hacemos un preiew o ista preia y....
?ucho me&or" no? 6hora cámbiale el tama>o por 3Dp( que as* qui#ás sea un poco peque>a de más.
6 eces parece mentira como cambia una web con solo ir retocando la ho&a de estilos" erdad?.
Sigamos inestigando a er si logramos colocarle las imágenes" ale?
Colocando la imagen superior
'as imágenes de fondo ya sabes ponerlas as* que te de&o solo con esto.... &e &e &e. 2e has puesto
blanco? &a &a. Oenga" te ayudo un poquito.
%a di&imos que la imagen superior se la ibamos a poner de fondo al t*tulo del men$" as* que a>adimos
las palabras mágicas del fondo de imagen a la capa :menu +3" quedando as*9
#menu %) {!e(!-decora!ion:none $ "on!-si3e:)*p( $
bac4ground-image: url5objetos/menu-parte-superior.gif6 +
Si guardas y haces ista preia erás esto9
/os amos acercando eh? Oemos dos !fallos!. ?e encantan los fallos" as* aprendemos másL &e &e &e.
-l primero es que la imagen se repite por la derecha y el segundo fallo es que se en las esquinas de
color blanco y queda un poco feo.. bueno" bastante feo" si que si.
1"itando el blanco de las es;uinas
-sto a a ser rápido. 2an solo hace falta abrir los archios de las imágenes con un programa de dibu&o
(por e&emplo el Paint de 3indows) y colorear esas esquinas del mismo color que ayamos a poner el
fondo de la web (que ahora es naran&a" pero que pronto cambiaremos a otro más mono). 6s* que
bastar*a con eso" colorear las esquinas de naran&a y oler a guardar esas mismas imagenes con el
mismo nombre y e.tensión. (no es necesario que lo hagas" espera un poco" impacienteL )
83
&moldando la anc+ura de la imagen
-ste fallito se arregla con un programa de dibu&o" ariando su anchura. Por e&emplo con el Paint de
3indows que imagino que lo tenemos todos. Si no lo tienes seguramente cualquier otro programa sea
capa# de hacer lo mismo. Pero para no perder mucho tiempo te de&o aqu* los dos archios ya arreglados
y en otro momento" cuando encuentre un software gratis de dibu&o que esté bien os lo e.plico paso a
paso todo (en realidad basta con decirle al programa que cambie el ancho de la imagen para que tenga
+F: pi.eles" que es el ancho que le dimos a la capa menu" de ese modo coincidirán ambos anchos).
Kas nue"as imágenes *a retocadas
'as nueas imágenes" con la anchura adecuada (que coincide con el ancho de la capa menu) y con las
esquinas ya pintadas de naran&a son estas dos9
Guarda esos dos archios (guárdate esas imagenes en objetos)" sustit$yelos por los archios que
ten*as en la carpeta objetos y seguimos.
Si ahora haces ista preia de nueo" has de er esto de la foto de aba&o. Si no lo es as*" guarda la
plantilla.+tml" ciérrala y uele a abrirla con el 5tmlABit9
6hora siL 6hora amos a por el fondo de la parte inferior. 6 er si nos sale tan bien como esteL
Colocando la imagen inferior
Solo se puede poner una imagen de fondo a un elemento" no se le pueden poner dos. 'a ra#ón por la
que no le hemos puesto un $nico fondo que sea el dibu&o del men$ completo es por que no quiero estar
retocando la imagen cada e# que incluya un enlace más al men$. 1on esto que hacemos nos olidamos
de los fondos ya sea el men$ muy cortito o muy largo" ya lo erás.
-ste otro fondo que será la parte inferior se lo amos a colocar directamente a la capa menu. Para
ello" incluimos el siguiente tro#o de código css en la ho&a de estilo estilogeneral.css9
84
#menu {background-color: ;ellow $ wid!%: )0'p( $ "loa!:le"! $
!e(!-align:le"! $ margin: 9p( )'p( 9p( 9p( $
bac4ground-image: url5objetos/menu-parte-inferior.gif6 +
5aciendo ista preia de la plantilla.+tml emos esto (acuérdate" antes de hacer ista preia siempre
guarda la ho&a de estilo)9
Bueno... ahora se e el fondo" pero no conseguimos er bien la parte inferior... por qué puede ser? 6
er" a er... Pues claroL 4esulta que si no se indica nada" las imágenes se colocan pegando su parte de
arriba a la parte de arriba de la capa y como la capa es más peque>a que la imagen no emos la parte
inferior que es la que nos interesaL 'o que nos interesa realmente es que la parte inferior del fondo se
pegue a la parte inferior de la capa y as* podremos er la cura de la imagen que está en su parte más
ba&a.
1ómo lograremos esto? Pues solo hay que decir en la ho&a de estilo" que en esa capa" la imagen de
fondo ha de alinearse por la parte de aba&o. -sto se hace as*9
#menu {background-color: ;ellow $ wid!%: )0'p( $ "loa!:le"! $
!e(!-align:le"! $ margin: 9p( )'p( 9p( 9p( $
background-image: url(obe!os/menu-par!e-in"erior.gi"#$
bac4ground-position: bottom +
Bottom significa culo o parte de aba&o. 5aciendo ista preia (como siempre" guarda antes la ho&a de
estilo) la cosa queda.... genial" sencillamente genialL ?ira9
Nué te parece?
Lltimos Ieto;ues
85
<*&ate ahora. 6bre tu plantilla.+tml con el 5tmlABit si la tienes cerrada y a>ade un tercer enlace al
men$. %a sabes" después de la l*nea del -nlace D" pones una idéntica y le cambias el n$mero D por el E"
es decir" a>ades esto9
<div id="menu">
<ul>
<li><a %re"="#">,nlace )</a></li>
<li><a %re"="#">,nlace *</a></li>
<li><a %re"="#">,nlace 9</a></li>
<li><a href=",">7nlace 8</a></li>
</ul>
</div>
Si de nueo haces ista preia erás como no hay que tocar para nada los fondos del men$" sino que
estos crecen con él. 5ay que ahorrar traba&o" no? &e &e &e.
%a para terminar de de&arlo perfecto" a>ade un paddingtop23Dp( (margen por arriba al t*tulo del
men$) para separarlo un poco de la fran&a oscura de la imagen y listo" queda perfecto" genial"
fenomenal... er.. no tengo palabras" casi lloro de emoción" t$ no? &e &e.
2ambién endr*a bien de&ar un poco de margen por la parte inferior" pues parece que el -nlace E está
demasiado pegado a la parte ba&a de la imagen" no? -sto lo podemos arreglar colocando un padding por
aba&o de unos F pi.eles a la capa menu" incluyendo en su estilo algo as*9
#menu {background-color: ;ellow $ wid!%: )0'p( $ "loa!:le"! $
!e(!-align:le"! $ margin: 9p( )'p( 9p( 9p( $
background-image: url(obe!os/menu-par!e-in"erior.gi"#$
background-posi!ion: bo!!om $
padding-bottom:)p( +
Pensando un poco... ahora que toda la capa del men$ está cubierta por imagen de fondo" podemos
eliminar eso de bac%groundcolor2 *ellow que tenemos al principio del código de arriba" no crees? 6s*
ahorramosL &e &e. Puedes eliminar esa parte.
?ás cosas? Oenga ale.... a er... SQL 5a# ista preia y pon el ratón sobre cada uno de los enlaces de
este men$ ertical. 1omo erás" la sombra gris que aparece cuando haces eso tiene un margen por la
i#quierda" pero en cambio no lo tiene por la derecha y ese efecto es un poquillo feo. 1ómo lo
arreglamos? -l margen que emos por su i#quierda ha de estar definido por nosotros en alg$n lugar de la
ho&a de estilos... seguramente en la l*nea que define los li del men$" es decir" en esta l*nea9
#menu li {lis!-s!;le:none $ margin: :p( 'p( :p( =p( +
y ah* está la solución. Oemos que tiene definidos unos margenes de E por arriba y por aba&o" G pi.eles
por la i#quierda y un cero patatero por la derecha. Ponle un 8p( por e&emplo en lugar de cero y f*&ate
como ahora se e me&or" erdad?
86
Sómos unos 1rac@sL
-l efecto ahora es para morirse de gustoL G868LL
Por cierto. Nui#ás no eas bien los acentos en tu web cuando la subas al seidor. -n ese caso no
olides insertar esta l*nea de código entre <+ead? y <'+ead?9
<meta +ttpe;ui"=>ContentT*pe> content=>te(t'+tml4 c+arset=iso88EM3>?
2oma nota e insertalo en todas las páginas que hagas" siempre que en ellas se usen acentos" o@i?
Iecordando el código ;ue lle"amos +asta el momento
Si te has fi&ado" si no sigues al pie de la letra las e.plicaciones y se te ocurre crear alguna capa más"
alguna capa menos" otros te.tos" otros párrafos etc distintos a lo que aqui te comento lo $nico que
conseguirás es perderte" pues cuando más adelante te diga !en el párrafo donde pone Bienenido ha#
esto y lo otro! no sabrás a qué me refiero.
-s por eso que debes seguir todo esto al pie de la letra" sin improisar nada" sin cambiar nada de
nada de nada.
1laro que por el camino se te an a ocurrir ideas propias e incluso as a querer ir remodelando lo que
yo te e.plico para que el e&emplo se aya pareciendo a tu idea de web" pero eso es algo que puedes
hacer a la par" pero en otra carpeta distinta" de modo que la del e&emplo de estas e.plicaciones quede
tal cual la e.plico" o@i? -n otra carpeta puedes hacerlo a tu manera y de hecho" es lo que deber*as estar
haciendo ya para ir asentando lo que aprendes y para ir ensayando etc.
Por si acaso te has columpiado ya (seguro que si" &e &e) te de&o ahora los códigos de los archios
plantilla.html y estiloAgeneral.css para que erifiques que son iguales a los tuyos" o@i?
6 eces puede que te diga... !en la l*nea +F de la ho&a de estilo cambia tal por cual!. 6s* que" procura
que sean e.actamente iguales para no perderte. /o solo es por eso claro" es porque tanto en 5tml como
en 1SS el orden que tomen las l*neas tiene gran importancia. -n 1SS colocar cierta l*nea al principio o al
final puede cambiarlo todo (si no te lo crees prueba a colocar la l*na del asterisco al final y erás como
todo cambia...).
Código Html de la plantilla.+tml
<>?@ABCD, 2BEF DGBFHA "-///9A//?B? 2BEF :.' Bransi!ional//,6">
<%!ml>
<%ead>
<!i!le>Dage !i!le</!i!le>
<link rel="s!;les%ee!" %re"="es!ilo-general.css" !;pe="!e(!/css"
media="all">
</%ead>
<bod;>
<div id="global">
<div id="curva-superior"></div>
<div id="cabecera">
<div id="logo!ipo"><a %re"="inde(.%!ml"><img
src="obe!os/logo!ipo.gi"" wid!%="*1'"
%eig%!="&'" al!="2a3 clic a4u5 para volver a la p.gina de
inicio"></a></div>
87
<div id="publicidad">Bienvenidos a mi /eb</div>
</div>
<div id="navegacion">
<ul>
<li><a %re"="#">8ecci7n )</a></li>
<li><a %re"="#">8ecci7n *</a></li>
<li><a %re"="#">8ecci7n 9</a></li>
</ul>
</div>
<div id="con!enido">
<div id="menu">
<%)>B5!ulo de 8ecci7n )</%)>
<ul><li><a %re"="#">,nlace )</a></li><li><a %re"="#">,nlace
*</a></li><li>
<a %re"="#">,nlace 9</a></li><li><a %re"="#">,nlace :</a></li></ul>
</div>
<%)>,s!a ser. la 3ona principal de la web</%)>
<p>,s!e es mi segundo p.rra"o. Icabo de poner un pun!o ; en cambio
sigue siendo un p.rra"o
pues no le %e colocado aJn la e!i4ue!a de cierre. Ko; a ponersela
us!o a4u5.</p>
<%*>C es!e es el !ercer p.rra"o.</%*>
<p>,n pocas lecciones aprender- a darle margenes para
separarlos unos de o!rosL e incluso %acerles sanguias por la i34uierda
a la primera l5neaL
4ue 4ueda muc%o meor.</p>
<p>IndaL "ia!e> 8alen !odos cen!radosL 4ue cosa. ,spero 4ue Morgens
nos enseNe a ponerlos
alineados a la i34uierdaL o us!i"icados. Is5 es!o parece una poesia>
e e e.</p>
</div>
<div id="pie">,s!e es el pi- de p.gina</div>
<div id="curva-in"erior"></div>
</div>
</bod;>
</%!ml>
Código C## de estilogeneral.css
< {!e(!-inden!:'p( $ margin:'p( $ padding:'p( $ border:'p(+
p {!e(!-align: us!i";+
%) {"on!-si3e: ).*em$ color:blue $ "on!-weig%!: bold $ !e(!-
decora!ion: underline $
88
!e(!-align: cen!er+
%* {"on!.si3e: ).)em$ color:blue $ "on!-weig%!: bold $ !e(!-
decora!ion: none $
!e(!-align: cen!er+
bod; {!e(!-align: cen!er +
#global {wid!%:&''p( $ margin::p( au!o +
#curva-superior { background-image: url(obe!os/curva-superior.gi"# $
background-repea!: no-repea! $
wid!%: &''p( $
%eig%!:)*p( $
over"low: %idden +
#cabecera {background-color: w%i!e $ border-le"!: black )p( solid $
border-rig%!: black )p( solid $ %eig%!:&0p(+
#logo!ipo {wid!%:*&'p( $ "loa!:le"! +
#publicidad {wid!%:0)&p( $ "loa!:rig%! $ margin-!op:*0p( $ "on!-si3e:
)=p( +
#navegacion {background-color: gra; $ border: black )p( solid $
%eig%!:*'p(+
#navegacion li {"loa!:le"! $ lis!-s!;le:none $ margin: 'p( *'p( 'p(
*'p( +
#navegacion ul { margin-le"!: )&'p( +
#con!enido {background-color: orange $ border-le"!: black )p( solid $
border-rig%!: black )p( solid +
#con!enido p {margin: 0p( )'p( 'p( )'p( $ !e(!-inden!: )0p(+
#menu {wid!%: )0'p( $ "loa!:le"! $
!e(!-align:le"! $ margin: 9p( )'p( 9p( 9p( $
background-image: url(obe!os/menu-par!e-in"erior.gi"#$
background-posi!ion: bo!!om $
padding-bo!!om:0p( +
#menu li {lis!-s!;le:none $ margin: :p( &p( :p( =p( +
#menu %) {!e(!-decora!ion:none $ "on!-si3e:)*p( $ padding-!op:)*p( $
background-image: url(obe!os/menu-par!e-superior.gi"# +
#pie { background-color: w%i!e $
border-le"!: black )p( solid $
border-rig%!: black )p( solid$
border-!op: black )p( solid +
#curva-in"erior { background-image: url(obe!os/curva-in"erior.gi"# $
background-repea!: no-repea! $
wid!%: &''p( $
89
%eig%!:)*p( $
over"low: %idden +
a {color: brown $ !e(!-decora!ion:none $ displa;: block +
a:link {+
a:visi!ed {+
a:%over {color:red $ !e(!-decora!ion:underline $ background-color:
silver+
a:ac!ive {+
Bien. % este es el aspecto que ha de tener esa plantilla. Oamos ahora a la siguiente lección? Oenga"
amosL Pero antes os de&o una chorrada" ale? &e &e &e. -sto es para er la progresión que hemos
logrado. 0s gusta? &e &e &e" tonterias que se me ocurrenL &a &a &a.
1l pie de página de nuestra web
Oes como poco a poco esto a tomando forma? 5a llegado el momento de meterle mano al pie de
página. Oamos a intentar colocarle un hueco a la i#quierda y otro a la derecha donde colocaremos
accesos directos (enlaces) a diersas secciones de la web que coniene que el isitante tenga a la ista
en todo momento. ?e refiero a enlaces al mapa de la web (importante para el posicionamiento de la
página)" a una página desde donde puedan contactarnos (muy $til para conocer siempre el punto de
ista del isitante)" otro enlace hacia una página de enlaces (que usaremos a la hora de darnos de alta
en directorios) y también por qué no" unos enlaces al futuro foro" top y directorio de nuestra web (todo
eso lo aprenderemos más adelante).
-n medio de estos dos espacios de&aremos un hueco con dimensiones idoneas para incorporar en un
futuro" o bien otra serie de enlaces amigos" o bien una entanita donde colocar las $ltimas noticias o
aisos que queramos de&ar o" seguramente" para colocar un poco de publicidad que nos ayude a pagar
un buen hosting sin necesidad de poner un centao de nuestro bolsillo. 'os hobbies están muy bien" pero
si nos salen gratis... me&or que me&or" no? Ue &e &e.
Dónde "a el pie de páginaN
1omo bien habrás adiinado el pie de página lo amos a colocar dentro de la capa :pie (tampoco hay
que ser muy adiino...). -ste es su código en la plantilla.+tml en estos momentos9
<div id="pie">,s!e es el pi- de p.gina</div>
1ada uno tiene sus manias" y yo no oy a ser menos. 1uando quiero colocar arias capas que están
&untas hori#ontalmente (una &usto al lado de la otra) siempre las meto dentro de otra capa que las
engloba. 6s* me es más fácil aplicarle luego los estilos y queda todo más recogidito. 1omo en este caso
quiero crear tres huecos rectangulares" y todos uno al lado del otro" crearé tres capas" una para los
enlaces de la i#quierda" otra para el espacio central que en principio usaremos para poner publicidad y
otra para los enlaces de la derecha. -sas tres capas las oy a meter dentro de la capa :pie.
'os nombres que les oy a dar son" :pieuno :piedos y :pietres as* que ahora mismo" las escribo en
el código de la plantilla.+tml y coloco una palabrita dentro para er como an quedando cuando haga
ista preia. 5a de quedar as* en la plantilla.+tml (f*&ate que borro el te.to !-ste es el pié de página!
que hab*a antes)9
90
'isto" la ista preia se e as*9
Seguimos?
Colocar las capas en lBnea
1omo era de esperar" nos ha pasado como cuando hicimos lo del logotipo. -n lugar de aparecer una
capa &unto a la otra nos han salido una deba&o de otra. 4ecuerdas como arreglamos esto la otra e#?
Oenga" ha# un esfuer#oLL &e &e. 'o arreglamos colocándole un float2left a cada capa. 6s* que abrimos la
ho&a de estilos estilogeneral.css y definimos esas tres capas colocándole un color de fondo para er
bien dónde empie#a y dónde termina cada una (te coloco también las l*neas de antes y después para
que eas donde a>adir estas l*neas" como erás las he colocado &usto después de la capa :pie" por
guardar un orden)9
............
#pie {border-le"!: black )p( solid $
border-rig%!: black )p( solid $
border-!op: black )p( solid $ +
,pieuno -bac4ground-color: brown 3 float:left.
,piedos -bac4ground-color: green 3 float:left.
,pietres -bac4ground-color: red 3 float:left.
#curva-in"erior { background-image: url(obe!os/curva-in"e.....
...............
%a se an colocando en su sitio. /o te preocupes por los colores" en cuanto tengamos el pie listo le
pondremos otros más decentes.
6hora les daremos dimensiones de anchura colocándoles un widt+. 'e amos a dar un alor a :pieuno
y :pietres de por e&emplo 3E9p( y a la :piedos el resto" que serán unos... K::p. A ,p. (del borde
i#quierdo y derecho) A+F:p. A +F:p. (de las otras dos capas) R ETKpi.eles. 6 er que sale con esto...9
#pieuno {background-color: brown $ "loa!:le"! 3 width:*)!p( +
#piedos {background-color: green $ "loa!:le"! 3 width:89"p( +
#pie!res {background-color: red $ "loa!:le"! 3 width:*)!p( +
Dónde está la capa :pieN
6hora amos a comprender una cosilla de las capas y del css que nos endrá muy bien en el futuro. Si
haces ista preia te encontrarás con esto9
91
Nue habrá pasado con el borde? Pues te lo e.plico. -n teor*a" como las tres nueas capas están
dentro de la otra capa llamada :pie" deber*a aparecer un borde por sus partes i#quierda" derecha y
arriba" pues as* está definido en la ho&a de estilos" pero parece que al incluir estas tres capas el borde
ha desaparecido tal y como os se>alo con c*rculos ro&os en la imagen de arriba.
Nui#ás no me creas" pero los bordes de la capa :pie s* que están dibu&ados. 'o que ocurre es que
cuando una capa no tiene ning$n contenido" la altura que toma es cero y por tanto en lugar de ser un
rectángulo se queda como una l*nea.
Pero... la capa :pie s*i que tiene contenido" ni más ni menos las otras capas :pieuno" :piedos y
:pietres" no? Pues No. 1omo le he escrito a estas tres capas la propiedad float" las capas están flotando
sobre la capa :pie por lo que es como si :pie no tuiera ning$n contenido.
Oenga ale" pero dónde está entonces la capa :pie y sus bordes? Pues están &usto encima de las tres
nueas capas. Oes esa l*nea negra fina que a por la parte de arriba de las tres capas? Pues esa l*nea es
la capa :pie. 1omo no tiene ning$n contenido dentro" su altura es 3p( y por eso tiene forma de l*nea.
2e se>alo la capa :pie en el dibu&o para que lo eas más claro9
-sa l*nea negra rodeada de ro&o es todo lo que nos queda de la capa :pie. 'as otras tres capas se
salen de la capa :pie" pues como son flotantes... quedan &usto deba&o" pero fuera de :pie. -ntiendes
ahora por qué no emos 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 imágen o una capa
siempre que no tenga un float!.
Pero si no te interesa colocarle nada que no sea una capa con float a$n nos queda una opción y es
definirle nosotros la altura. % eso es lo que amos a hacer.
Oe a la ho&a de estilos estilogeneral.css y define una altura de" por e&emplo" OEp( a la capa :pie.
?ás tarde podremos retocar esa cantidad para amoldarla a nuestro gusto. Nuedar*a as* la capa :pie
(4ecuerda que siempre escribo en negrita los códigos que incluyo o modifico)9
#pie { background-color: w%i!e $
border-le"!: black )p( solid $
border-rig%!: black )p( solid $
border-!op: black )p( solid $
height: :)p( 3
+
5aciendo ista preia emos que hemos conseguido esto9
Oes? 'as tres capas :pieuno" :piedos y :pietres ahora parecen estar dentro" aunque realmente están
!flotando dentro!. Siguen sin ser contenido de la capa :pie" pero al darle altura ocupa el espacio que
necesitábamos y queda pintado el borde como quer*amos. Parece un poco complicado" pero en realidad
son solo unos pocos trucos los que necesitamos conocer.
% por qué las tres capas de dentro no ocupan esa misma altura? Pues porque si no le indicamos la
altura que queremos que tenga" ocuparán solo el espacio necesario para contener lo que tengan dentro"
en este caso las palabras !pie uno!" !pie dos! y !pie tres!.
/osotros no amos a darle altura a esas tres capas" pues conforme le a>adamos el contenido a cada
una iran llenando todo ese lugar.
92
Bordes para separar las tres capas
Oamos a separar isualmente las tres capas dibu&ándoles un borde. 'os bordes si que debes ya saber
colocarlos" erdad? 7e todas formas te ayudo. 'a erdad es que para separarlas solo necesitamos una
sola l*nea de borde entre las capas :pieuno y :piedos y otra entre las capas :piedos y :pietres" de
modo que el código de esas tres capas quedar*a as*9
#pieuno {background-color: brown $ "loa!:le"! $ wid!%:)0'p( 3
border-right: blac4 *p( solid +
#piedos {background-color: green $ "loa!:le"! $ wid!%::O&p( +
#pie!res {background-color: red $ "loa!:le"! $ wid!%:)0'p( 3
border-left: blac4 *p( solid +
1on eso hemos puesto un borde por la derecha de la capa :pieuno y otra por la i#quierda de la capa
:pietres. 'o mismo hubiéramos conseguido colocando borde a ambos lados de la capa :piedos o
cualquier otra combinación.
1omo erás" aunque la primera e# te sonó a chino" ahora ya dibu&ar un borde no guarda muchos
secretos para t*. 'o mismo te a a ocurrir con el resto de cosas" la primera e# no se entiende muy bien"
pero en cuanto apare#can dos o tres eces en las lecciones seguro que te acabas familiari#ando.
-l efecto conseguido es este9
6hora que has isto de nueo cómo colocar bordes" amos a quitárselos pues el efecto no queda del
todo bien. 1omo e&ercicio de repaso te propongo algo" a er si lo consigues" o@i?
1jercicio de práctica
1omo e&ercicio de prácticas" intenta hacer que tanto el fondo de :pieuno como el de :pietres sean
blancos" que el fondo de :piedos sea gris claro (sil"er) y elimina los bordes que de&amos antes. 6s*
terminarás de familiari#arte con todo esto" o@i?
Pero inténtalo de erdad antes de mirar el código de aba&o. D" , +... engaL
-l código 1SS de las E capas del pie han de quedar como te indico aba&o. Si el e&ercicio te sale bien y
funciona" enhorabuenaL pero pon este otro para que as* tanto t$ como yo tengamos el mismo y as* no te
pierdas en las lecciones siguientes" o@i?
#pie {border-le"!: black )p( solid $ border-rig%!: black )p(
solid $
border-!op: black )p( solid $ %eig%!: =0p( +
#pieuno {"loa!:le"! $ wid!%:)0'p( +
#piedos {"loa!:le"! $ wid!%::O&p( 3 bac4ground-color: silver+
#pie!res {"loa!:le"! $ wid!%:)0'p( +
Cómo colocar los enlaces del pie
'os enlaces ya imos como se colocaban cuando hicimos los men$s. -n este caso an a ser tres
enlaces en la capa :pieuno y otros tres en la capa :piedos colocados uno encima de otro. 1omo eso
parece una lista" lo me&or es usar una lista para ello" erdad? Oamos allá.
7entro del código 5tml de la plantilla.+tml" en la parte correspondiente a la capa :pieuno coloca
esto9
<div id="pieuno">
<ul>
93
<li><a href=",">;oro 7jemplo</a></li>
<li><a href=","><ontactos</a></li>
<li><a href=",">=os 7nla$an</a></li>
</ul>
</div>
% ha# lo mismo con el 5tml de la capa :pietres con este otro código9
<div id="pie!res">
<ul>
<li><a href=",">>irectorio</a></li>
<li><a href=",">/op0ite</a></li>
<li><a href=",">?apa de la @eb</a></li>
</ul>
</div>
5aciendo ista preia" como siempre nos pasa antes de retocar la ho&a de estilo... nos encontramos
este churro...
%a puedes imaginarte un poco cómo debemos arreglarlo para reducir un poco el espacio que hay
entre ellos" eliminarles el punto negro de la i#quierda y reducirles un poco el tama>o de la letra" no?
Qnténtalo t$" o@i? &e &e &e.
Cómo eliminar el punto negro a las listas
Basta con poner listst*le2none en el lugar adecuado de la ho&a de estilos estilogeneral.css" pero
eamos qué posibilidades tenemos.
'a primera puede ser incluir ese código dentro de la primera l*nea de la ho&a de estilos" aquella que
comien#a con un asterisco V. 1omo recordarás el asterisco representa a tooodos los elementos por lo
que si escribimos ese código dentro de sus corchetes estaremos diciendo que todos los elementos de la
web han de aparecer sin ese puntito.
'o bueno de esta opción es que con solo eso ya no tenemos que preocuparnos más en los dichosos
puntos. 'o malo? Nue si alguna e# queremos hacer una lista con sus puntos" por e&emplo alguna e# en
el contenido de la web" amos a encontrarnos con que el punto no aparece. 6s* que desechamos esta
opción.
'a segunda opción es poner ese código dentro de las propiedades de las capas :pieuno li y :pietres
li. 'o bueno es que funciona" y lo malo es que tenemos que crear dos l*neas más de codigo css y no
tenemos ganas de escribir tanto... &e &e
'a tercera opción es sencilla también" y es colocar ese código en una nuea l*nea que indique que
todas las listas de dentro de la capa :pie han de salir sin esos puntos. 'o bueno es que matamos dos
pá&aros de un tiro y lo malo... lo malo es que te metan en el o&o un palo" &a &a &a.
-sa tercera opción se consigue con esta nuea l*nea" que amos a colocar por seguir un orden &usto
después de la l*nea de la capa :pie.
.............
94
#pie {border-le"!: black )p( solid $ border-rig%!: black )p(
solid $
border-!op: black )p( solid $ %eig%!: =0p( +
,pie li -list-st+le: none .
#pieuno {"loa!:le"! $ wid!%:)0'p( +
.............
% papeleta solucionada.
Cómo ponerle el tamaño de letra algo menor a esas listas
Para definir el tama>o de letra se usaba fontsiGe" asi que en esa misma linea que hemos creado
indicamos un tama>o de 3Dp( de este modo9
#pie li {lis!-s!;le: none 3 font-si$e: *2p( +
Si te fi&as en la ista preia" erás como todos los te.tos del pie son ahora menores" menos el te.to
de la capa :piedos. -sto es lógico" pues el te.to !pie dos! no pertenece a un elemento de lista ( li) y por
tanto el estilo definido no le afecta para nada.
&minorar la distancia de separación entre los elementos de las listas
-s curioso" pues aunque en la ho&a de estilo le habiamos indicado al naegador que pusiera todos los
margenes a cero (con la famosa l*nea del asterisco) ahora nos encontramos con un margen en esa lista y
además bastante grande (al menos usando el Qnternet -.plorer). Oamos a probar el truco aquel que te
conté" el de poner todo el código html de la lista en la misma l*nea" recuerdas? 5a de quedar as*9
<div id="pieuno">
<ul>
<li><a href=",">;oro 7jemplo</a></li><li><a
href=","><ontactos</a></li><li>....
</ul>
</div>
% lo mismo para la otra lista" la de la capa :pietres" o@i?
<div id="pie!res">
<ul>
<li><a href=",">>irectorio</a></li><li><a
href=",">/op0ite</a></li><li><a......
</ul>
</div>
Pues s*" era eso" &e &e &e.
6$n puedes disminuir algo más el espaciado entre los enlaces de esas capas. -l problema es que no
sabr*a e.plicártelo muy bien" pues a simple ista no tiene mucho sentido" pero el caso es que funciona.
-n fin" te digo cómo y pasamos de la e.plicación por el momento pues me llear*a unas cuantas páginas
conencerte del porqué" &e &e. 6demás en el e&emplo no lo de&aremos as*" sino como lo tenemos hasta
95
ahora" o@i? Ser*a a>adiendo la propiedad fontsiGe23Dp( a la l*nea de definición de la capa :pieuno. Si
en lugar de 3Dp( disminuyes ese alor erás como el tama>o del te.to no aria (pues ese tama>o está
definido en la capa :pie li) pero s* decrece el espacio entre los tres enlaces. Pero repito" eso no lo
hacemos en este e&emplo" o@i? Wsalo t$ en tus cosas si lo necesitas.
1on esto queda por terminado por el momento el pie de página. 6s* que quita ya el color gris claro
(sil"er) que hab*amos puesto a la linea de la capa :piedos (elim*nale el 4 bac%groundcolor2 sil"er)"
guarda la ho&a de estilo y ha# ista preia para er cómo ha quedado.
Definir enlaces de distintos tipos
%a imos cómo conseguir cambiar el estilo de los enlaces de toda la web de una sola e#. 'a cuestión
ahora es... y si quiero tener arios enlaces con aspectos distintos? Pues como siempre" lo conseguimos
gracias a la ho&a de estilos.
'as l*neas de estilogeneral.css que por el momento están afectando a los estilos son las siguientes9
< {!e(!-inden!:'p( $ margin:'p( $ padding:'p( $ border:'p( +
a {color: brown $ !e(!-decora!ion:none $ displa;: block +
a:link {+
a:visi!ed {+
a:%over {color:red $ !e(!-decora!ion:underline $ background-color:
silver+
a:ac!ive {+
% por qué incluyo la l*nea del asterisco V? Sencillo" porque como ya hemos dicho antes" esa l*nea" al
llear asterisco afecta a todos los elementos de la web.
Bien. -so nos da un tipo de enlace general" para todos los enlaces de la web. 2endrán por tanto
margenes nulos" nada de indentado" sin bordes" de color marrón todos" etc" etc. Oamos a er la forma
de crear una nuea clase de enlace con otras propiedades sin que por ello se pierda el tipo ya definido.
/na nue"a clase de enlaces
6nteriomente hemos dicho que los estilos para elementos que solo aparecen una sola e# en una
página web concreta los definiriamos con la almohadilla X antes de su nombre. Pero como este nueo
estilo de enlace si puede que se repita para arios elementos dentro de una página" lo definimos del
otro modo" con un punto en la ho&a de estilo y llamándolos con class=>lo;uesea> en lugar de con
id=>lo;uesea> en el html de la página.
Para definir una clase de enlace nuea" primero escogemos un nombre. 1omo siempre" todo en
min$sculas" sin espacios ni s*mbolos raros ni empe#ando con un n$mero. 'e pondremos el nombre
.enlaceuno y lo escribimos as* en estilogeneral.css" &usto al final (no escribas este código aFn en tu
+oja de estilos)9
a.enlaceuno {+
a.enlaceuno:link {+
a.enlaceuno:visi!ed {+
a.enlaceuno:%over {+
a.enlaceuno:ac!ive {+
'os enlaces definidos en las otras l*neas que ya ten*amos actuan sobre todos los enlaces" pero como
estos nueos están colocados después" serán respetados para aquellos enlaces donde indiquemos que
son de la clase .enlaceuno
P cómo se indica a un enlace ;ue +a de mostrarse segFn lo definido en la
clase >enlaceuno>N
96
8n enlace normal tiene esta forma9
<a %re"="#">8o; un enlace normal</a>
-ste enlace tomará la forma que tengamos definida en la ho&a de estilo estilogeneral.css en la parte
general (la antigua). Si ahora quiero que tome otras propiedades (color" tama>o" subrayado...) tengo
que indicar en esa l*nea de 5tml que es de la clase .enlaceuno y se hace a>adiendo esto9
<a class="enlaceuno" %re"="#">I%ora so; un enlace de la clase
enlaceuno</a>
Nué ocurre entonces? 1uando alguien isita tu web el naegador primero mira todo el html" e que
e.iste un enlace y e que hay ho&a de estilo en el Head as* que empie#a a leerla por el principio. Oe la
primera l*nea" la del asterisco y le da margenes cero" le quita los bordes y el indentado. Sigue leyendo
estilogeneral.css y e que primero se han definido una serie de propiedades para todos los enlaces y se
los da (los antiguos) pero al seguir leyendo e que está definido en esa misma ho&a de estilo una nuea
clase" la clase enlaceuno" de modo que a>ade esas nueas propiedades a las propiedades antiguas. Si
alguna está repetida dos eces" toma la nuea por buena y elimina la antigua.
Con"irtiendo enlaces a la nue"a clase
Oamos a darle la clase .enlaceuno a todos los enlaces del pie de página. 8n modo es colocando el
código class=>enlaceuno> a cada una de las l*neas 5tml de los enlaces del pie" un poco traba&oso"
erdad? Ser*a as* (no lo +agas aFn)9
<div id="pieuno">
<ul>
<li><a class="enlaceuno" %re"="#">Poro ,emplo</a></li><li><a
class="enlaceuno" %re"="#">Aon!ac!os
</a></li><li><a class="enlaceuno" %re"="#">6os ,nla3an</a></li>
</ul>
</div>
y lo mismo para los enlaces de la capa :pietres. 6hora que has aprendido a definir una clase de
enlace y a aplicarlo" te ense>o otro modo más fácil y rápido.
&plicando una clase de estilos solo a los enlaces de una determinada capa
Se trata de definir en la ho&a de estilos que todos los enlaces que pertene#can a una capa
determinada deban seguir esos estilos. 1on esto nos ahorramos escribir nada en el código 5tml de la
plantilla.+tml" erás.
6bre estilogeneral.css y a>ade (sin eliminar el antiguo código de los enlaces) esto" &usto al final9
..........
#pie a {color: red$ !e(!-decora!ion:none $ displa;: block +
#pie a:link {+
#pie a:visi!ed {+
#pie a:%over {color:red $ !e(!-decora!ion:underline $ background-
color: ;ellow +
#pie a:ac!ive {color:blue+
Si guardas la ho&a de estilo y haces ista preia ahora a la plantilla" erás como todos los enlaces del
pié de página han tomado las nueas propiedades sin necesidad de tocar para nada el código 5tml de la
plantilla.+tml" mágico" erdad? &e &e
97
1omo esas propiedades son realmente horribles" cámbialas por estas otras para que al menos sean...
presentables" &e &e &e9

#pie a {color: blue$ !e(!-decora!ion:none $ displa;: block +
#pie a:link {+
#pie a:visi!ed {+
#pie a:%over {color:blac4 $ !e(!-decora!ion:underline $ background-
color: white +
#pie a:ac!ive {color:blac4+
6hora se en un poco me&or.
1liminar el fondo del enlace del logotipo
6hora que sabemos ariar las propiedades de solo algunos enlaces determinados sin ariarlos todos"
podemos eliminar ese fondo gris que aparece al poner el ratón sobre el logotipo. Por qué aparece? Pues
simplemente porque al tener el logotipo un enlace hacia el inde(.+tml se conierte la imagen en un
enlace adoptando los estilos definidos para los enlaces en la 5o&a de -stilos.
Si a>adimos algo similar a lo anterior pero para todos los enlaces de la capa :logotipo podremos
conseguir eliminar ese fondo gris tan feo. Nué propiedades le pondr*as para eitar eso? 4ealmente"
como no contiene te.tos me da igual" solo me interesa eliminar el fondo gris y eso lo consigo
colocándole un fondo blanco cuando el ratón se situe sobre el logotipo (2+o"er)" as* que puedo colocar
esto al final de la ho&a de estilo9
#logo!ipo a {+
#logo!ipo a:link {+
#logo!ipo a:visi!ed {+
#logo!ipo a:%over {background-color: white +
#logo!ipo a:ac!ive {+
6hora se e el logotipo sin esa sombra gris. %a sabes algo más de los enlaces. -res todo un maestroL
Cómo e"itar ;ue apareGcan mal las palabras con acentos
Seg$n en qué seridor alo&emos nuestra bonita página" eremos o no que las palabras acentuadas
aparecen mal escritas. 1laro" eso solo a a pasar si has escrito con acentos" que $ltimamente te los
comes todosLL &e &e &e. Si por el contrario has puesto alguno (también estar*a bien que lo pusieras
correctamente....) y en lugar del acento aparece un s*mbolo raro" podemos arreglarlo rápidamente.
Pero por ;uQ salen mal escritos los acentosN
-s por que los naegadores interpretan el código 5tml de muy distintas formas seg$n piense que la
web está escrita en un idioma o en otro. 7istingue cada idioma por un tipo de !codificación!. 'o que
amos a hacer nosotros ahora mismo es poner en la cabecera de 2076S nuestras páginas una l*nea que
indica al naegador la codificación que debe interpretar. -sta codificación sabe de acentos" por lo que
las palabras acentuadas aparecerán correctamente sin más.
'a l*nea a insertar dentro de la cabecera de todas las páginas de la web (por el momento solo
tenemos la plantilla" pero acuérdate de ponerlo en todas las demás también) es la siguiente9
<me!a con!en!="!e(!/%!ml$ c%arse!=iso-&&0O-)" %!!p-e4uiv=Aon!en!-B;pe>
/o hay mucho que saber de esta l*nea. -s una de esas l*neas que llaman ?etatags que no muestran
nada en la web" nada isible" sino que indican al naegador cómo interpretar el código de dentro del
Body. 1oncretamente indica que el contenido del Body es código 5tml y que la codificación es del tipo
isoAKKTFA+" que corresponde a la codificación europea (que entiende de acentos" amos). /o le hagas
mucho caso" solo ponla dentro de la cabecera y ten fe en m*" &e &e &e.
98
Pero dónde? -n que parte de la cabecera? /o temas" que te pones de los nerios en seguidaL &a &a &a.
-n principio da igual en qué parte de la cabecera la pongas" pero para que tengamos t$ y yo el mismo
código y te sea más sencillo seguir el curso ponla por e&emplo &usto deba&o de la l*nea YheadC.
7espués de insertar esa l*nea" guarda la página" la subes al seridor y e a erla con el naegador. Si
todo a ido bien y yo no la he cagado ya no tendrás problemas con los acentos. Bueno" el $nico problema
es que no sepas donde ponerlos" &e &e" pero se mostrarán correctamente" seguro.
Bueno" ahora en las dos siguientes lecciones os ense>o un modo de ahorra tiempo al generar el resto
de páginas de la web. 2ambién os ense>o a poner enlaces de unas a otras. 6hora s* que conseguiremos
una página completita.
Kas partes comunes de nuestra página web
1omo te he dicho antes" e.isten arios modos de ahorranos tiempo y traba&o cuando se reali#an
cambios en partes de una web que son idénticas en arias páginas. Pero antes de seguir dé&ame por
faor que insista en definir eso de !partes de una web que son idénticas en arias páginas!.
1uando me refiero a idénticas quiero decir iguales" condenadamente iguales. Si hay alguna ligera
diferencia este truco ya no nos sire. Para que eas un e&emplo rápido te puedo adelantar que la
siguiente parte de código es com$n a tooodas las páginas de nuestra web de e&emplo9
<>?@ABCD, 2BEF DGBFHA "-///9A//?B? 2BEF :.') Bransi!ional//,6">
<2BEF>
<%ead>
Oerdad? -n estas tres l*neas no hay ning$n alor o parámetros que tengamos que cambiar de una
página a otra" por lo que es una parte bien com$n.
-n cambio" esta otra l*nea no es com$n en todas las páginas de la web9
<!i!le>,s!e es el !5!ulo de la p.gina de la web</!i!le>
Pues el t*tulo será normalmente distinto de una página a otra. 'o pillas" erdad? Oemos que partes
comunes hay arias" pero nosotros amos a prestar especial atención a unas partes comunes en
concreto" las que más probabilidad tienen de ser modificadas por nosotros en el futuro" como por
e&emplo" la cabecera" el men$ lateral de la i#quierda y el pie de página. 0s oy a mostrar en las
siguientes páginas estas tres partes" para que eais su código correspondiente y os familiariceis con
ellas. /ormalmente retocaremos algo de all* y no esta de más conocerlas bien.
Ka cabecera de la página web de ejemplo
'a cabecera es una parte idéntica a todas las páginas de la web y en ocasiones nos dá por
modificarla. Bien para cambiar el logotipo" ponerle unas curitas en las esquinas" ariar el fondo o quién
sabe" para a>adirle un bonito banner de publicidad y sacar un dinerillo para pagar el hosting... pero eso
es otra historia para la que a$n falta un poco. -ntendemos que nuestra cabecera está formada por la
parte superior de la web hasta el men$ hori#ontal" incluido este" o@i? 6unque a$n se podr*a diidir en la
parte con fondo blanco y el men$ hori#ontal con fondo gris.
-se men$ con fondo gris también será com$n a todas las páginas de la web y desde él se podrá
acceder a las distintas secciones en las que diidamos los contenidos. Por e&emplo" para la página de un
grupo de m$sica estas secciones podr*an ser Portada" 5istoria" 7iscograf*a" etc" etc. -n bree
traba&aremos sobre ese men$ hori#ontal.
'a cabecera" incluido el men$ hori#ontal es por tanto todo esto9
-l código de la cabecera" tal cuál está ahora en el e&emplo que lleamos hecho es este9
<>-- H6HAH@ A@?HQ@ ?, AIB,A,RI - 6@ B@AIR -->
<div id="curva-superior"></div>
99
<div id="cabecera">
<div id="logo!ipo">
<a %re"="inde(.%!ml">
<img src="obe!os/logo!ipo.gi"" wid!%="*1'" %eig%!="&'"
al!="2a3 clic a4u5 para volver a la p.gina de inicio">
</a>
</div>
<div id="publicidad">Bienvenidos a mi /eb</div>
</div>
<div id="navegacion">
<ul>
<li><a %re"="#">8ecci7n )</a></li>
<li><a %re"="#">8ecci7n *</a></li>
<li><a %re"="#">8ecci7n 9</a></li>
</ul>
</div>
<>-- PH6 ?, A@?HQ@ ?, AIB,A,RI -->
1omo es" he a>adido dos l*neas para encerrar a este cacho de código. -sto es para que si alguna e#
le metemos mano a la página" recordemos que lo que hay dentro es com$n a todas las páginas de la
web" y por tanto no debemos tocar nada de su interior a menos que sea siguiendo las instrucciones que
os cuento en bree.
/o te preocupes por esas l*neas de comentario" te las e.plico ahora después.
1l menF lateral iG;uierdo
-ste es otro cacho de código 5tml que en principio es igual en todas las páginas de la web" o al
menos" en todas las páginas de una misma sección. -n los casos en los que no sea com$n a toda la web
sino solo a parte de la web" también nos ale este truco que eremos a continuación" también
ahorraremos mucho tiempo" as* que lo tendremos en cuenta como elemento com$n. -l men$ lateral
i#quierdo hoy por hoy es este9
Para que te hagas una idea" desde el men$ de fondo gris accedemos a las secciones de la web y
dentro de cada sección" desde este men$ accederemos a las subsecciones. Por e&emplo" para una
supuesta web dedicada a un grupo de m$sica" la sección !1onciertos! podr*a diidirse en las
subsecciones !1onciertos 6nteriores! y !Pró.imos 1onciertos!" no?
% su código 5tml es el siguiente. 1omo es" le a>ado una l*nea al principio y otra al final para indicar
donde empie#a y termina" como antes9
<>-- H6HAH@ A@?HQ@ ?, E,6G FIB,RIF HSTGH,R?@ - 6@ B@AIR -->
<div id="menu">
100
<%)>B5!ulo de 8ecci7n )</%)>
<ul><li><a %re"="#">,nlace )</a></li><li><a %re"="#">,nlace
*</a></li><li><a %re"="#">,nlace 9....
</div>
<>-- PH6 ?, A@?HQ@ ?, E,6G FIB,RIF HSTGH,R?@ -->
1omo creo que ya te he comentado y como puedes er en el código" he colocado todas las l*neas YliC
seguidas unas de otras" para eitar el fallo aquel que daba el Qnternet -.plorer cuando las colocábamos
separadas" una en cada renglón.
1l pie de página
'o mismo para el pie de página. -s algo com$n a todas las páginas de la web y en ocasiones qui#ás
queramos modificarlo para a>adir enlaces" publicidad o qué se yo lo que se nos puede ocurrir.
6nda" acabo de hacer ista preia de esta página que estás leyendo ahora mismo y resulta que la
imagen de aba&o" la del pie de página" se me monta por deba&o del men$ de la i#quierda de 1123... y
ahora que hago? Nué mal que queda.... ?enos mál que cono#co un truco para eitarlo. 2e lo cuento? Ue
&e &e" es muy fácil.
Si escribo un poco más de te.to aqu* mismito conseguiré llenar este hueco" de la parte derecha del
men$ que tienes a la i#quierda" y as* la imagen del pie ba&ará y ya no se montará ba&o el men$. Si" a
eces hay que escrbir algo" aunque sea para llenar y conseguir eso" aunque no tenga mucho sentido" &a
&a &a. 6ndaL pues acabo de llenarlo con esta chorrada que te acabo de contarL <*&ate que cosa t$L Nué
alegria" qué bien. Bueno" seguimos... que ya se ha arreglao...
'a imagen del pié es esta9
% su código" con las l*neas de comentario ya colocadas" es este9
<>-- H6HAH@ A@?HQ@ DH, ?, DIQH6I - 6@ B@AIR -->
<div id="pie">
<div id="pieuno">
<ul><li><a %re"="#">Poro ,emplo3/a></li><li><a
%re"="#">Aon!ac!os</a></li><li><a %re"="#">6os..
</div>
<div id="piedos">pie dos</div>
<div id="pie!res">
<ul><li><a %re"="#">?irec!orio</a></li><li><a
%re"="#">Bop8i!e</a></li><li><a %re"="#">Eapa de..
</div>
</div>
<>-- PH6 A@?HQ@ DH, ?, DIQH6I -->
Bien" imagino que a la e# que yo" has colocado esas l*neas de comentario en la plantilla" no? (a$n
estás a tiempo para no perderte luegoLL). Pues seguimos con esto" pero antes oy a e.plicaros me&or
qué es eso de los comentarios dentro del código 52?' y cómo se a>aden" ale? /o te que&arás" as a
aprender hasta el $ltimo detalleL &e &e.
Kos comentarios dentro del código HT,K de la página web
101
-n el e&emplo que estamos construyendo tenemos ya un montón de código 52?'. Por ahora" como
acabamos de crear la plantilla y no hay demasiada cosa" no nos perdemos con facilidad" pero en cuanto
pasen unos d*as o en cuanto a>adamos más y más código a nuestra plantilla llegará un momento que al
er el código estaremos más perdidos que un pulpo en un gara&e.
Por ese motio se inentaron los comentarios en el código. Se trata de poder a>adir las notas que nos
de la gana dentro" para que nos sira de recordatorio de qué parte de código es" por qué lo pusimos o lo
que nos de la gana. -so si" para que el naegador no se lie tratando de inestigar que debe hacer con
esas l*neas tan raras para él" lo que se hace es encerrar el comentario entre unos signos especiales. 6s*"
cuando el naegador se pone a leer el código 5tml de nuestra página" al llegar al signo de inicio de
comentario simplemente pasa de nosotros y no hace ning$n caso a lo que hay escrito hasta que lea el
signo de cierre de comentario. <ácil de entender" no?
1omo habrás isto en la página anterior" el signo de inicio de comentario dentro de código 5tml es
este9
<>--
-l signo que indica final de comentario es este otro9
-->
7e modo que si queremos poner una tonteria dentro de nuestro código 5tml bastar*a con poner esta
l*nea9
<>-- Bon!eria -->
Si olidas poner el signo de cierre es muy posible que algunos naegadores de&en de leer todo lo que
queda de código 5tml" as* que recuerda colocarlo" no te olides.
Si la tonteria que queremos poner es muy larga y ocupa arias l*neas (estoy seguro que tratándose de
tonterias podr*as llenar páginas y páginas... &e &e &e &e) bastar*a con poner el signo al principio de la
primera l*nea y el de cierre al final de la $ltima l*nea. Oamos" que no es necesario abrir y cerrar cada
una de ellas. 6lgo as* ser*a9
<>-- ,s!o es una !on!eria
de varias lineasL pero no !engo ganas de poner signos
de aper!ura ; cierre de comen!arios
en cada una de ellasL 4u- pasa...
-->
6demás de serirte para poner chorradas en el 5tml" también sire para anular temporalmente
alguna l*nea de código. Por e&emplo" imagina que tienes un enlace en tu men$ lateral de la i#quierda
que as a de&ar fuera de uso" que no quieres que apare#ca en el men$ por que andas retocandolo.
Bastar*a con encerrarlo entre los signos de inicio y fin de comentario y el naegador no lo leer*a. ?ás
tarde" basta eliminar esos signos para que uela a aparecerle a los isitantes. 6 eces es me&or que
eliminar la l*nea" pues qui#ás al d*a siguiente no recuerdas bien lo que ten*as puesto.
Por $ltimo decirte que tampoco coniene abusar de los comentarios" pues al fin y al cabo ocupan algo
de memoria y el archio de la web tardar*a un pel*n más en cargarse si hubieran muchos o fueran muy
largos. 1asi no se nota" pero si tardar*a un poquillo más. 6s* que" los &ustos" o@i?
'a plantilla por tanto queda as*. Sin cambios aparentes pues lo que hemos puesto son comentarios"
pero puedes er las nueas l*neas de comentario mirando su código 5tml.
Creando el resto de páginas de la web
6hora que tenemos claras cuales serán las partes comunes de la web" podemos sin miedo empe#ar a
crear el resto de páginas de nuestra web de e&emplo. -sto lo podemos hacer a partir de la plantilla" que
para eso está. % cómo hacemos esto? Pues como siempre te he dicho" antes de actuar debemos tener
102
claro lo que queremos alcan#ar. 6ntes de crear y crear páginas sin ton ni son tenemos que pensar
cuántas secciones y subsecciones queremos tener en nuestra web. ?ás tarde podremos ir a>adiendo más
secciones y subsecciones" o incluso eliminar alguna" pero partiremos de una base ya pensada para no
liarnos mucho.
7e modo que el siguiente paso es pensar (no duele tanto...) en eso" qué secciones y subsecciones
amos a tener en nuestra nuea web.'o me&or es coger lápi# y papel y empe#ar a elaborar un esquema
de la web que tenemos en la cabe#a. -n el caso de este e&emplo ya te lo daré hecho" pero ten eso en
cuenta cuando elabores tu própia web.
1ómo? /o te aclaras con eso de diidir los contenidos en secciones y subsecciones? Bueno" te lo
e.plico un poco.
Di"idir los contenidos de la web en secciones * subsecciones
6unque t$ tendrás tu propia idea para hacer tu página web" amos a ponernos todos en el mismo
lugar para reali#ar el resto del e&emplo. Sigue mis mismos pasos para no liarte mucho con el resto de
e.plicaciones y ha# todo igual que yo" con las mismas secciones y subsecciones. 'uego" en otra carpeta"
puedes hacer tus propios e.perimentos" o@i?
Qmagina que la web de nuestro e&emplo la amos a dedicar a un grupo de m$sica que tenemos o que
nos gusta. -n cuántas secciones principales se podr*a diidir? Nui#ás en estas9
• Página de presentación o portada. -n esta e.plicamos el estilo de m$sica del grupo" y
comentamos las partes más importantes de la web. 7eber*a ser bree para que el isitante
sepa de un solo ista#o qué puede encontrar en la web. -sta sección es bree y rápida as*
que no la diidimos en subsecciones. 4ecuerda" es la primera página que e el isitante
cuando acceder a la web" por tanto corresponde con la inde..html
• 5istoria del grupo. 6qu* se puede comentar cómo" dónde y cuándo surgió la idea de la
formación del grupo" qué m$sicos han formado parte de la banda a lo largo de los a>os" cuál
es la formación actual" y cosas as*. -sta sección se podr*a diidir en algunas subsecciones"
por e&emplo" 1ómo surge la banda" ?iembros que han pasado por ella" <ormación actual e
incluso un 6lbum de fotosL
• 7iscograf*a. 'o t*pico" una sección en la que se muestra cada album o 17 publicado. -sta
sección se puede diidir por 17s publicados" por e&emplo en las subsecciones ?aquetas"
17+" 17," 17D.
• 1onciertos. 6qu* se informa al isitante de cuáles son los pró.imos conciertos de la banda
y se muestran también los conciertos celebrados hasta el momento. Se puede diidir por
e&emplo en las subsecciones 1onciertos 6nteriores y Pró.imos 1onciertos.
• <oro. Siempre es buena idea saber la opinión de los isitantes" tanto para me&orar la
propia web como para saber qué piensan del grupo de m$sica. /os reseramos una sección
para en el futuro incorporar un foro a la web" si puede ser" integrado en la misma estructura
de la página. -sta sección en principio no tendr*a subsecciones.
• 7escargas. -n este otro apartado se pueden colocar cosas que los fans se pueden ba&ar
como curiosidad. Por e&emplo" posters del grupo" imágenes" las mismas canciones" letras"
ideos" etc" etc. -sta sección se puede diidir en las subsecciones" 1anciones ?PD" 'etras"
Posters" Qmágenes y Oideos.
• Souenirs. Nui#ás se piense en ender camisetas" gorras o 17s del grupo. -sta puede ser
otra sección que se puede diidir por e&emplo en 1ómo 1omprar" 1amisetas y 17s.
Oes que fácil? /o hay que preocuparse demasiado si más tarde se nos ocurren otras secciones" pues
con el truco que te he comentado páginas atrás y que te e.plico más adelante será muy fácil a>adir"
eliminar o modificar las secciones. Pero s* está bien tener una idea más o menos clara al principio sobre
la que partir.
1omo imagino que adiinas" los t*tulos de las secciones (Portada" 5istoria" 7iscograf*a" etc) los
colocaremos en el men$ hori#ontal que hay ba&o la cabecera de las páginas (el que ahora tiene fondo
gris) y las subsecciones las colocaremos en el men$ lateral i#quierdo. 6s* será muy fácil para el isitante
ir directamente a donde desea llegar.
2e de&o finalmente el esquema de secciones y subsecciones que amos a usar en la web de e&emplo
para que lo eas más claro. -ste deber*a ser el resultado al que deber*as llegar tras tomar papel y lapi#
y pensar en los apartados de la web en la que estás traba&ando. -s el esquema de la derecha.
103
1uando hagas tu propia web" recuerda hacerte un esquema parecido y guárdalo como si fuera un
mapa de tu web (ale escrito a mano con papel y lapi# en un papel) para tener una ista rápida de
dónde está cada parte. 2e será muy util a la hora de escribir rutas" er dónde enca&ar un apartado nueo
que quieres a>adir" etc" etc.
Bien" ahora que tenemos clara la estructura inicial de la web" amos a rellenar en la plantilla.html
todas estas secciones y comen#amos a crear las demás páginas y a enla#arlas entre s*" o@i? Oenga"
ánimoL
Nombrando los arc+i"os de las secciones de la web de ejemplo
6hora s* empe#amos con todo esto. Oamos primero a decidir qué enlaces pondremos en el men$
hori#ontal de secciones que hemos comentado antes. 2e de&o la chuleta a la derecha para que la tengas
a mano. 1omo erás" las secciones son Portada" 5istoria" 7iscograf*a" 1onciertos" 7escargas" <oro y
Souenirs" no? Pues basta con a>adir los enlaces correspondientes dentro de la capa !naegacion! en el
código de la plantilla.html cuyo código era este hasta ahora9
<div id="navegacion">
<ul>
<li><a %re"="#">8ecci7n )</a></li>
<li><a %re"="#">8ecci7n *</a></li>
<li><a %re"="#">8ecci7n 9</a></li>
</ul>
</div>
1omo adiinarás" tenemos que a>adir algunas l*neas <li? más (antes solo ten*amos tres enlaces en la
plantilla y ahora son siete los enlaces que queremos)" y tenemos que a>adir la ruta de cada una de
ellas. 4ecuerda que la ruta hay que ponerla en lugar de la almohadilla (:). Por ahora las páginas de las
secciones que queremos poner no e.isten" pero podemos decidir ya cómo se a a llamar cada archio de
cada una de estas páginas y as* podemos escribir la ruta ya en esos enlaces. 'o me&or a la hora de
decidir el nombre para un archio 5tml es nombrarlo con el nombre de la sección o subsección y as* será
muy fácil saber qué contiene.
4ecuerda estas normas básicas e important*simas a la hora de nombrar archios tanto html como de
imágenes" carpetas" archios de m$sica o cualquier otra cosa9
• 8sar solo min$sculas.
104
• Solo usar letras y n$meros" nunca s*mbolos raros.
• /unca empe#ar el nombre de un archio con un n$mero (+nombre.html).
• /o de&ar espacios en blanco" como mucho guiones medios !A! (no ba&os !J!).
• /unca poner acentos en los nombres de los archios.
• Ponerle un nombre que refle&e el contenido" sección o subsección de la web. /unca cosas
como pagina+.html sino nombres que tengan sentido.
2eniendo todo esto en cuenta" el nombre de los archios de las páginas de estas secciones deber*an
ser estos9
• portada.html (pero como corresponde a la página principal" ser*a en realidad inde..html)
• historia.html
• discografia.html
• conciertos.html
• descargas.html
• foro.html
• souenirs.html
Oes? Sencillos" representatios" sin cosas raras... ma@e it simpleL dec*a -instein ZR)
105
/na carpeta para cada sección
Si tuieramos todos los archios de la web guardados en la misma carpeta" a la larga nos ser*a muy
complicado encontrar un archio determinado" de modo que me parece una buena idea crear una
carpeta para cada sección. 1ada una de esas carpetas tendr*a el nombre de la sección (recordando las
normas anterioresL). 7entro de cada una de ellas colocar*amos tanto las páginas de esa sección (las
subsecciones) como las imágenes" archios de m$sica" etc que tenga" por e&emplo en una carpeta
llamada !ob&etos!.
6s* que antes de nada ya puedes empe#ar creando una carpeta para cada una de esas secciones. %a
sabes" con los nombres historia" discograf*a" conciertos" descargas" foro y souenirs. 4ecuerdas cómo se
crean las carpetas? Puedes hacerlo de dos maneras. 8na directamente abriendo la carpeta donde
guardamos la web de e&emplo en tu escritorio y creando las carpetas y otro modo es desde el 5tml Bit.
Oamos a hacerlo desde el 5tml Bit para recordar cómo era" o@i?
Creando las carpetas
Oamos a recordar cómo se crean carpetas en el sitio web con el 5tml Bit" como siempre" paso a paso
para que no pierdas detalle.
6bre para empe#ar el 5tml Bit y ha# que se muestre la entanita de 3or@Space. %a sabes cómo" clic
en !Oer! del men$ de arriba del 5tml Bit" y clic en !3or@Space! dentro del desplegable que se abre. 5a#
clic con el botón derecho del ratón sobre la carpeta amarilla webAe&emploAcctwAlocal y en este otro
desplegable que se abre elige !/ew! y !1reate /ew <older!" como en la imagen de aqu* aba&o....
... anda" me ha uelto a pasar lo mismo" perdona. Si" se e que si coloco a la derecha de mi men$ de
la i#quierda de 1123 una imagen muy grande" como no cabe" se me queda un hueco entre el primer
párrafo y la imagen" un espacio muy feo" todo acio... menos mal que recuerdo el truco" escribir una
chorrada para rellenar y conseguir as* que la imagen se quede un poco más aba&o.. lo he logrado ya o
tengo que seguir escribiendo tonterias... a er... Pues s*" ya parece suficiente" perdona de nueo" &e &e
&e
Se abre una entana en la que pondremos el nombre de la carpeta que queremos crear. 4ecuerda que
la sección portada di&imos que no iba a tener carpeta" por lo que la primera que crearemos será
!historia!. 4ecuerda" sin e.tensión ninguna" no es un archio" es una carpeta9
106
Podremos er como aparece esa carpeta en la entana de 3or@Space9
4epite la misma operación con el resto de carpetas" discografia" conciertos" descargas" foro y
souenirs.
Kas carpetas >objetos>
6demás" hemos dicho que dentro de cada una de estas carpetas que acabamos de crear ibamos a
crear otra carpeta llamada objetos" en la que guardar*amos los archios de imágenes" sonido etc que
pertenecieran a esa sección" as* que adelante. -n esta ocasión como la carpeta que queremos crear está
dentro de cada una de las creadas recientemente" tendremos que hacer clic con el botón derecho del
ratón sobre el nombre de la carpeta en la que la queramos crear. ?e e.plico con un e&emplo. Para crear
la carpeta objetos dentro de la carpeta +istoria" ha# clic con el botón derecho del ratón sobre la
carpeta +istoria" pulsa sobre New R Create New Folder y ponle el nombre !ob&etos! cuando te lo
pregunte. 'o es? <ácil no? Pues ha# t$ lo mismo con el resto de carpetas objeto que tenemos que crear
en el resto de carpetas" o@i? 6l final querdar*a una cosa as* en la entana de 3or@Space9
107
'a $nica sección que no a a estar dentro de ninguna carpeta será la portada" pues como a a ser la
misma página principal (inde..html) no podemos colocarla dentro de ninguna carpeta" debe ir
directamente en la rai# del seridor y además se debe llamar inde..html" es decir" el archio de la
portada no se llamará portada.html sino inde..html y no estará dentro de ninguna carpeta. [?ás
información sobre qué es la rai# del seridor aqu*\
'os archios de la portada también estarán en una carpeta objetos" que es la que ya ten*amos. -s la
que he se>alado en a#ul en la imagen de arriba y que ya contiene algunos archios" los de los bordes del
men$" etc.
Creando las páginas de las secciones
Bien" ha llegado el gran d*aL Oamos a crear las páginas de cada una de las secciones ahora mismo. 2e
imaginas tener que hacer todo lo que lleamos hecho cada e# que queremos hacer una nuea página?
Pffff" ser*a de locos. -s por eso que hemos creado la plantilla" para ahorrarnos todo ese traba&o. Oerás
qué rápido generamos todas las demás páginas.
6bre el 5tmlABit y abre la plantilla.html. Bien" de esa plantilla amos a aproechar todo. 'a
copiaremos en todas las carpetas y as* en lugar de empe#ar desde cero con cada una solo tendremos que
a>adir los contenidos. Pero antes amos a retocarla ligeramente" eliminando lo que no nos hace falta y
colocando unas equis en los lugares donde deberiamos rellenar algo" para más tarde acordarnos" ale?
Oamos a er qué cosas son las que debemos rellenar para personali#ar cada una de las páginas que
amos a crear.
6bre la plantilla y mira su código 5tml. -n la quinta l*nea emos que se define el t*tulo de esa página.
6hora mismo pone !Page 2itle! cuando en realidad deber*a poner el t*tulo de esa página concreta. Oamos
a borrar !Page 2itle! y colocaremos unas pocas equis" y as* recordaremos que ese es un hueco que
tendremos que rellenar en todas las páginas que amos a crear. 7ebe quedar as*9
Por otro lado" si miras más aba&o en ese mismo código 5tml de la plantilla" más o menos en las l*neas
D+" D," DD y DE (estos n$meros se en en la parte i#quierda de cada l*nea" lo es en la imagen de aqu*
arriba?) tenemos los comentarios o te.tos que aparecen en la plantilla de e&emplo. 1omo esos te.tos no
deben aparecer en las páginas de las secciones (que ya tendrán sus propios te.tos) amos a borrarlos y
poner de nueo unas equis en su lugar para acordarnos que es ah* donde podemos escribir lo que
queremos que salga en las nueas páginas.
5asta hace un minuto esa parte de código 5tml era as*9
108
% ahora deber*a quedar as*9
6hora ya sabes que cuando copiemos la plantilla en cada una de las carpetas de las secciones" solo
tenemos que rellenar las partes con ]]]]] para personali#ar cada página" lo eremos más adelante. -l
resto de la plantilla nos ale tal y como está" por ahora. Guarda la plantilla y seguimos.
8na obseración. Si haces ista preia a la plantilla ahora" erás que sale algo (bastante) deformada.
6lgo as*9
109
/o te preocupes en absoluto. -so se debe a que hemos eliminado gran parte del contenido" de los te.tos
de la parte central. 1omo apenas tenemos dos frases (las de las equis) la página se queda tan cortita
que se desmorona un poco" pero en cuanto le a>adamos algo de contenido todo se arregla solo" la
página uele a recuperar su forma. Si lo prefieres" escribe muchas más equis de&ando algunos espacios
entre ellas" hasta tener las suficientes como para llenar un espacio considerable de la web. 7e ese modo
no sale esa deformación.
/na nue"a página para la sección +istoria
Para crear la página historia.html que guardaremos en la carpeta historia" haremos lo siguiente. 6bre
el 5tml Bit" abre la plantilla.html y ahora la guardamos con otro nombre y en otro lugar. -l otro nombre
será historia.html y el lugar donde la amos a guardar es dentro de la carpeta historia.
Para hacer eso" en el 5tml Bit y con la plantilla abierta" pulsa en el men$ de arriba donde pone
6rchio y del desplegable que se abre" pulsa en Salar 1omo9
110
Se abre entonces una entana desde la que tienes que elegir la carpeta en la quieres guardar la copia.
-n este caso será la carpeta historia. 6demás" antes de guardar o salar (es lo mismo) tienes que
ponerle un nombre al archio" pues ya no se a a llamar plantilla sino historia.html
111
Oes?
-n este caso" al tratarse de una página web lo que guardamos" no olides ponerle la e.tensión
correspondiente" es decir" el nombre más un punto y las letras html (en min$scula todoLL)
Pues ya tenemos lista la página historia. 'a página que se te queda abierta ahora en el 5tml Bit ya no
es plantilla.html sino historia.html pero como ambas son idénticas" podemos usar historia.html que ya
está abierta para hacer lo mismo con el resto de páginas de las demás secciones. 7e modo que" de
nueo" pulsa sobre 6rchio M Salar 1omo" y ahora dentro de la carpeta discografia guarda una copia
llamada discografia.html
1uando hagas eso" repites creando otra llamada conciertos.html dentro de la carpeta conciertos"
después dentro de la carpeta descargas otra página llamada descargas.html y lo mismo para foro y
souenirs. Nui#ás te pare#ca un poco pesado" pero imagina si tuieras que hacerlas desde cero.... aya
tela" no?
SuQ les pasa a los estilos C## de estas páginas de secciónN
Oaya" si hacemos ista preia a alguna de esas páginas de sección que hemos creado.... se e toda
deformada. Por qué puede ser? Parece como si los estilos 1SS que tenemos definidos en la ho&a de estilo
no funcionaran...
112
-n realidad lo que ocurre es que las páginas no encuentran la ho&a de estilos. Oamos a er cuál es la
ruta que tienen en el enlace de la cabecera para descubrir qué es lo que está mal" ale? [?ás
información sobre qué son las rutas aqu*\
Si miramos el código de" por e&emplo" la página historia.html emos que dentro de la cabecera
(head) el enlace a la ho&a de estilos es este9
Bien" emos que la ruta (relatia) de la ho&a de estilos es !estiloAgeneral.css!. -sto significa que el
naegador cuando isita la página historia.html debe buscar la ho&a de estilos en la misma carpeta en la
que esté historia.html y ese no es el caso. Para arreglarlo tenemos dos opciones.
'a primera de ellas es colocar una copia de estiloAgeneral.css en cada una de las carpetas de sección
que tenemos. -sto tiene arios inconenientes. 2endr*amos unos cuantos archios repetidos. Si un dia
decidimos hacer un cambio en la ho&a de estilos tendr*amos que hacer lo mismo en la el resto de
carpetas y eso es un rollo.
'a segunda opción es retocar la ruta para que busque la ho&a de estilos donde está ahora" es decir"
fuera de la carpeta historia" en la rai# del seridor. 6s* tendr*amos una sola ho&a de estilos para todas las
páginas de todas las secciones. -sta opción parece me&or" pues si alguna e# queremos hacer un cambio
basta con retocar una sola ho&a de estilo. 7e modo que amos a retocar la ruta.
% qué ruta tenemos que poner? Si el naegador está isitando la página historia.html" para acceder a
estiloAgeneral.css tendrá primero que salir de la carpeta historia y después abrir estiloAgeneral.css 2e
acuerdas como se escrib*a eso en 5tml? Para salir de una carpeta se escribian en la ruta dos puntos y
después una contrabarra (..I). % para abrir un archio se escribia su nombre. 6s* que la ruta que
debemos colocar será9
113
<link rel="s!;les%ee!" %re"="../es!ilo-general.css" !;pe="!e(!/css"
media="all">
-stás de acuerdo? Bien. % qué ruta habrá que poner por e&emplo en la nuea página discografia.html?
Pues si te fi&as" ser*a la misma que la de historia.html pues hace falta lo mismo" salir de su carpeta (..I)
y abrir la ho&a de estilo.
<*&ate el traba&o que tenemos ahora.... tenemos que modificar la ruta de todas las páginas que
tenemos creadas... % eso no es nada. Qmaginas cuando queramos cambiar algo en todas las páginas de la
web y tengamos unas F:: o mil páginasLLL &uasL 5ay que inentar algo para eitar eso erdad? Pues no
pienses mucho que ya está inentado. 'o emos en la lección siguiente.
Buscar * IeemplaGar
Para arreglar las rutas que imos antes de un solo pluma#o podemos recurrir a un software
(programa" recuerda" &e &e) que traba&e por nosotros. /o e.isten muchos programas que hagan lo que
necesitamos" yo solo cono#co un par de ellos. -l primero es el 7reamweaer pero es de pago y cuesta
una pasta y el segundo gracias a 7ios es gratuito y se llama -ditPad 'ite. -ste es el que amos a utili#ar"
no solo para retocar esta ruta que tenemos mal" sino para miles de cosas más adelante. Por el momento
amos a descargarlo a nuestro ordenador" lo instalamos y aproechamos el problemilla de las rutas para
aprender a usarlo" o@i? Será tu me&or aliado y un genial complemento para el 5tml Bit" erás.
-l -ditPad'ite se puede descargar desde este enlace que nos llea a la web oficial9
7escargar -ditPad'ite
6l hacer clic se abrirá la web oficial del programa en una nuea entana" para que puedas ir leyendo
estas instrucciones a la e# que lo descargas. -l primer paso es hacer clic en la parte de aba&o del todo
de esa web" donde pone 7ownload -ditPad 'ite9
1omo es está en inglés" pero no te preocupes que no nos hace falta entender demasiado. 6demás
qui#ás encuentre alg$n modo de traducirlo al espa>ol" pero amos" que no a a ser ning$n problema"
erás que no.
6l hacer clic en 7ownload" aparece una entana de 3indows preguntándonos si queremos guardarlo.
Nué cosas erdad? Pulsa sobre Guardar 6rchio9
1reo que una e# te comenté que pod*as tener una carpeta en la que ir guardando todo el software
que ayamos usando" por si alg$n d*a te hace falta. Si lo hiciste puedes guardar este programa también
all*.
8na e# que tengas el archio de instalación en tu P1" ha# doble clic sobre él para instalarlo. 'a
instalación es bien sencilla" le dices a todo que si y listo. Si tienes alg$n problema me lo comentas en el
foro y lo e.plico más detalladamente" pero imagino que no es necesario.
8na e# instalado el programa puedes ya abrirlo para aprender a mane&arlo. 'o emos a
continuación.
114
Poniendo en marc+a el 1ditPad Kite
/ada más abrir el nueo programa" el -ditPad 'ite" nos aparecerá una entana de 2ips. 'os 2ips son
conse&os que te dan para que aprendas a usar el programa me&or. Siempre sale uno al iniciar el
programa. 1omo están en inglés de poco nos an a serir" &e &e" as* que desmarcamos (quitamos) la
casilla de aba&o para que no uela a aparecer la pró.ima e# que abramos el programa. 7espués de
desactiarla pulsa sobre 2han@sL
6hora s* que emos la entana del -ditPad 'ite. Busca en el men$ de arriba de ese programa la
opción Search (que significa Buscar) y dentro del desplegable escoge la opción !Show Search Panel! que
significa mostrar el panel de b$squeda. 2ambién se puede abrir pulsando a la e# las teclas de tu
teclado 1trl M <9
Se abre entonces el panel de b$squeda del -ditPad 'ite" que es as*9
115
Pues bien" en la entanita donde pone !Search!" aba&o" donde yo he escrito !1odigo que queremos
buscar! podemos poner las l*neas de código que ya no nos alen y que queremos sustituir por otras
nueas. 6s*" el -ditPad 'ite buscará en todos los archios que le digamos esa parte de código. Si
encuentra ese tro#o de código que hemos colocado en esa entana" lo que hace es sustiruirlo por el que
pongamos en la entana de aba&o.
-sto que qui#ás ahora no te diga mucho es de una utilidad bestialL <*&ate que a partir de ahora" cada
e# que queramos cambiar algo que está en arias páginas de nuestra web solo tendremos que abrir el
-ditPad 'ite" pegar el código que queremos sustituir arriba" el nueo aba&o y 8alaL -l se encarga de todo
en cuestión de segundos.
Oamos a aproechar que tenemos que corregir la ruta de la ho&a de estilo en todas aquellas páginas
para hacer un e&emplo de uso de este programa. Sigue todos mis pasos y erás que fácil es.
Ieparando la ruta de la +oja de estilo
2ienes abierto el -ditPad 'ite? Pues amos a reparar las rutas aquellas. 2en en cuenta que este
programa a a buscar y reempla#ar el código que le indiquemos solo en las páginas que abramos con él
en ese momento. -s decir" si quiero hacer la !b$squeda y reempla#o! en tres páginas concretas" tenemos
que abrirlas con ese programa" de&arlas abiertas y entonces hacer eso de buscar y reempla#ar. 7e este
modo nos aseguramos de que no se a a buscar ese código en otras páginas que no nos interesen.
1omo nosotros queremos hacer la b$squeda y reempla#o en las páginas de las carpetas de las
secciones que hemos creado antes" lo primero que amos a hacer es abrirlas con el -ditPad 'ite. 1ómo
se hace esto? Oamos a erlo.
Primero abre el -ditPad 'ite. 6hora e a <ile (significa archio) que está en el men$ hori#ontal de
arriba de ese programa y escoge 0pen (abrir).
116
Se abre entonces una entana como esta" desde la que debes indicar qué archios quieres abrir. Oe
buscando una por una todas las páginas en las que queremos arreglar las rutas y las as abriendo" una
por una. 6s* por e&emplo se abre la página historia.html9
%a has abierto todas? 4ecuerda" son todas estas" historia.html" discografia.html" conciertos.html"
descargas.html" foro.html y souenirs.html. Bien" pues seguimos en la página siguiente.
Iellenando datos en el 1ditPad Kite
6hora" en ese mismo programa" selecciona la l*nea completa de la ruta en cualquiera de esas páginas
abiertas. -n la imágen de aqu* aba&o erás como el código 5tml de las páginas abiertas aparece en la
entana de arriba del todo del -ditPad 'ite. -s ah* donde puedes seleccionar esa l*nea de código.
Para seleccionarla ya sabes" haces clic al principio de la l*nea" arrastras sin soltar el botón del ratón
hasta el final de esa l*nea" sueltas (se queda todo a#ulado) y ahora pulsas sobre la selección (lo a#ul)
con el botón derecho del ratón y escoges 1opy" tal y como puedes er en la imagen de aba&o.
5as merendado ya? /o tienes hambre? Pues yo me tomaba ahora mismo un bocata de nocilla y me
quedaba listo" &e &e &e. Oaya" ya me has pillado otra e# escribiendo chorradas para que se ba&e un poco
la imagen. Uo" es que me trope#aba con el men$... &e &e. Oenga ale" seguimos... aqu* tienes la imagen9
117
-n esa imagen también puedes er las leng=etas de las páginas abiertas. 'as he se>alado con un
borde ro&o" las es en la parte de arriba? Solo por curiosidad. Pues ahora que tenemos el código que
queremos cambiar copiado" e a la entana de Search y pegas lo que acabas de copiar. Para pegar" pon
el cursor del ratón sobre esa entana (de las dos de aba&o es la de arriba) y haciéndo clic con el botón
derecho del ratón sobre ella escoge Paste (que significa pegar). Nueda entonces as*9
6hora" en la entana de deba&o de esa" en la que pone 4eplace a su i#quierda" tenemos que escribir
la nuea l*nea que queremos que reemplace a la anterior. 1omo son casi iguales" pega de nueo en esa
entana la que tenemos copiada y le corregimos la ruta luego a mano" pues lo demás está bien. 2iene
que quedar de esta forma9
118
1omo es" la $nica diferencia entre las l*neas que hemos pegado es la ruta" que aba&o le hemos
a>adido ..' para que salga de la carpeta. %a estamos listos para que el -ditPad 'ite haga su traba&o"
pero antes hay que marcar la casilla que te he se>alado con un circulo ro&o" la de la derecha. Pone !6ll
<iles! que significa que ha de buscar y reempla#ar esas l*neas en todos los archios que tiene abierto el
programa. Si no se marca" solo hará el traba&o en la página que esté actia.
Oamos a la página siguiente y empe#amos a reempla#ar. Será pan comidoL
IeemplaGando códigos con 1ditPad Kite
Bien" amos allá a er que pasa. Pulsa donde pone 4eplace 6ll y cru#a los dedosLLL -l botón de
4eplace 6ll te lo se>alo en la imagen de aba&o por si no lo encuentras9
2res dos uno.... ha# clicLLL .... em... pues con tanto rollo seguro que esperabas un redoble de
tambores" o fuegos artificiales o qué se yo" pero... la erdad es que al apretar el botón ese no he
sentido nada por el cuerpo... 6brá funcionado? Pues s*L Si te fi&as pulsando en las distintas leng=etas de
las páginas abiertas en el -ditPad 'ite podrás er como esa l*nea ha sido reempla#ada y que ahora todos
esos archios tienen la ruta correctaL Si que ha sido rápido erdad? 6hora solo hace falta cerrar el
-dipPad 'ite pulsando sobre la ] que hay en la esquina superior derecha.
1uando pulses sobre esa ] para cerrarlo" cómo es lógico" el programa te pregunta si quieres guardar
los cambios. 2e pregunta por estas cuatro opciones9
>#a"e T+is File>9 -sto es si quieres guardar la página que está actia" no las otras.
>DonTt #a"e T+is File>9 Significa que la que está actia no quieres guardarla.
119
>#a"e &ll Files>9 -scoge esta opción cuando quieras guardarlas todas. -sta es la opción que
necesitamos ahora nosotros. 5a# cl*c en ella.
>DonTt #a"e &n*>9 Significa que no quieres guardar ning$n cambio.
>Cancel Close>9 -s para cancelar el cerrar el programa.
0@i? 6s* que elige >#a"e &ll Files> y ya te funcionarán los estilos en todas esas páginas. Grandioso" no?
Ieparando el logotipo
Bueno" a eces todo arreglo tiene sus da>os colaterales" &e &e &e" pero no pasa nada. -stas cosillas
nos siren muy bien para seguir aprendiendo y practicar con todo lo que oy ense>ando as* que"
sigamos. 4esulta que si ahora haces ista preia sobre cualquiera de las nueas páginas creadas" como
por e&emplo sobre historia.html te darás cuenta de que ahora no se e el logotipo que ten*amos" el de
comocreartuweb de la parte superior. 6demás" ya no funciona su enlace y en lugar de llearnos a
inde..html nos da un error. /o es dificil adiinar porqué" pero te lo digo yo que soy más rápido" &e &e.
4esulta que ahora las rutas del archio del logotipo.gif y la del enlace hacia el inde. no son
correctas. -sto es por el mismo motio 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.
Oeamos rápidamente cuales son las rutas de logotipo.gif y la del enlace a inde..html en la página
historia.html. -n el código 5tml de esa página emos esto9
<div id="cabecera">
<div id="logo!ipo"><a %re"="inde(.html"><img
src="objetos/logotipo.gif" wid!%="*1'" %eig%!="&'"
al!="2a3 clic a4u5 para volver a la p.gina de inicio"></a></div>
<div id="publicidad">Bienvenidos a mi /eb</div>
</div>
1omo es" el naegador cuando isite esa página intentará buscar un archio llamado logotipo.gif
dentro de la carpeta ob&etos que hay dentro de la carpeta historia (pues es en esta carpeta donde está
la página que está isitando" historia.html). Pero en realidad el logotipo.gif se encuentra en la carpeta
ob&etos de la rai# de la web" fuera de la carpeta historia. 6s* que" la ruta correcta ser*a otra. Para llegar
desde historia.html hasta el logotipo.gif es necesario" primero salir de la carpeta historia (eso se hac*a
con ..I )" luego entrar en la carpeta ob&etos (la antigua" en la que guardamos al principio los archios
del logotipo" etc)" y finalmente abrir el logotipo.gif
Por otro lado" para llegar desde cualquier página que haya dentro de una de las carpetas de la web
de e&emplo al inde..html" es necesario salir de la carpeta. 6s* que la ruta correcta del enlace será
!..Iinde..html! y no !inde..html!
Por tanto las rutas correctas serán9
<div id="cabecera">
<div id="logo!ipo"><a %re"="../inde(.html"><img
src="../objetos/logotipo.gif" wid!%="*1'" %eig%!="&'"
al!="2a3 clic a4u5 para volver a la p.gina de inicio"></a></div>
<div id="publicidad">Bienvenidos a mi web</div>
</div>
?uy parecidas" solo cambia el a>adirle los puntos y la contabarra.
Pero esto hay que cambiarlo en tooodas las páginas web que tenemos dentro de las carpetas de
secciónL Oaya tela" no? ?enos mal que ahora sabemos mane&ar perfectamente el -ditPad 'ite y será
coser y cantarL Oamos allá y lo recordamos? -sta e# te lo e.plico de un modo más rápido" no creo que
necesites mucha ayuda otra e#" no?
6brimos el -ditPad 'ite" abrimos desde él todas las páginas que tenemos dentro de carpetas (las
mismas que la e# anterior). -scribimos en la entana de arriba (la de Search) esto9
120
<div id="cabecera">
<div id="logo!ipo"><a %re"="inde(.html"><img
src="objetos/logotipo.gif" wid!%="*1'" %eig%!="&'"
al!="2a3 clic a4u5 para volver a la p.gina de inicio"></a></div>
<div id="publicidad">Bienvenidos a mi web</div>
</div>
% en la entana de aba&o esto otro9
<div id="cabecera">
<div id="logo!ipo"><a %re"="../inde(.html"><img
src="../objetos/logotipo.gif" wid!%="*1'" %eig%!="&'"
al!="2a3 clic a4u5 para volver a la p.gina de inicio"></a></div>
<div id="publicidad">Bienvenidos a mi web</div>
</div>
'e damos al botón !4eplace 6ll!" cerramos el -ditPad 'ite" le indicamos que guarde todos los archios
y... ya está. 2odo reparado. Nue gusto erdad? Ue &e &e.
PersonaliGando un poco cada página de sección
Bien" ya tenemos lista la estructura de carpetas de la web para tenerlo todo bien ordenado. 6demás
tenemos la página principal de cada una de las secciones. -l siguiente paso ser*a hacer funcionar el
men$ hori#ontal (la barra de naegación que hay ba&o la cabecera" con el fondo gris) de todas estas
páginas" es decir" colocar los enlaces en ese men$ (un enlace para cada sección) para que estemos en la
sección que estemos" desde all* podamos dirigirnos a cualquier otra sección de la web.
5ay una peque>a pega y es que" como todas las páginas que tenemos ahora mismo son e.áctamente
iguales" cuando hagamos funcionar el men$ hori#ontal no sabremos si funciona o no" pues nos dirigirá a
una página idéntica y no amos a obserar ning$n cambio. 4ecuerda que todas ellas son copia e.ácta de
la plantilla. 'o pillas? 6s* que antes de ponernos a arreglar el men$ y sus enlaces amos a personali#ar
un poco cada una de las páginas de las distintas secciones.
Para ello simplemente abriremos cada una de ellas con el 5tml Bit y rellenaremos el titulo (<title?) y
pondremos un poco de te.to en la parte del contenido principal. ale? Pues amos allá.
-mpe#aremos por la página historia.html 6brela con el 5tml Bit y pone como t*tulo este" !5istoria de
la banda!. %a sabes cómo" no? -scribiéndolo entre <title? y <'title?. 6hora en el t*tulo del contenido"
entre <+3? y <'+3? escribe esto otro9 !-sta es la historia de la banda!. %a" no es muy original" pero es lo
que doy de s* a estas horas... &e &e &e. % para terminar" inéntate algo para poner en el párrafo que hay
deba&o del t*tulo que acabas de retocar. Nuitas las equis y te inentas algo tal que as*9
!'a banda nació en +TK," cuando tras er por la tele un concierto de Bruce Springsteen dos chaalotes
se digeron... y si aprendemos a tocar algo? <ue entonces cuando Uuanito se compró su primera bater*a y
Pepito su primer ampli y guitarra. 2ras encontrarse con Pablito y conencerle de que le pidiera el ba&o a
su tio" empe#aron a ensayar en el gara&e de uno de ellos. 6l principio intentaban tocar sus canciones
preferidas" las que sonaban en esos momentos por la radio y cosas as*. ?ás tarde Pepito empe#ó a
escribir algunas letras a las que pusieron m$sica. 6s* nació la banda" imagino que" igual que muchas
otras!.
Si yo fuera bueno escribiendo noelas no estar*a aqu* ense>andote a crear páginas web" as* que no te
rias de m* y de lo que me inento y ale" a copiar gand$lL &e &e &e. 6hora ha# lo mismo con el resto de las
páginas que tenemos en las demás carpetas. Ponle el 2itle y el t*tulo 5+ a cada una e intenta inentarte
un par de párrafos para que las páginas recuperen un poco la forma" o@i? Si" se que es un tostón" pero
hay que hacerlo para poder seguir" enga....
121
Haciendo funcionar los enlaces del menF +oriGontal
%a estamos en condiciones de hacer funcionar el men$ hori#ontal de arriba" también llamado barra
de naegación. Para ello abre una página cualquiera de las que tenemos hechas" por e&emplo
historia.html
Si te fi&as en su código 5tml" en la capa naegacion teniamos puesto esto9
<div id="navegacion">
<ul>
<li><a %re"="#">8ecci7n )</a></li>
<li><a %re"="#">8ecci7n *</a></li>
<li><a %re"="#">8ecci7n 9</a></li>
</ul>
</div>
-se código tenemos que transformarlo para que apare#can enlaces a todas las secciones" incluida la
portada. Para ello basta con a>adir E l*neas más como las que ya hay" quedando una para cada uno de
los enlaces que necesitamos. % ya que estamos" en lugar de Sección +" Sección ," etc" escribiremos el
te.to que queremos que apare#ca en el men$" es decir" Portada" 5istoria" 7iscograf*a" 1onciertos"
7escargas" <oro y Souenirs9
<div id="navegacion">
<ul>
<li><a %re"="#">Dor!ada</a></li>
<li><a %re"="#">2is!oria</a></li>
<li><a %re"="#">?iscogra"5a</a></li>
<li><a %re"="#">Aoncier!os</a></li>
<li><a %re"="#">?escargas</a></li>
<li><a %re"="#">Poro</a></li>
<li><a %re"="#">8ouvenirs</a></li>
</ul>
</div>
Oa tomando forma" bien bien. 6hora solo falta colocarle la ruta en lugar de la almohadilla (X). 1uál
crees que será la ruta de estos archios? Pues" esté el naegador en la página que sea" siempre tendrá
que" primero salir de esa carpeta ( ..I )" después entrar en la carpeta de la sección correspondiente
( nombre de la carpeta) y finalmente abrir el archio de la página (nombredelapagina.html). -s decir"
as*9
<div id="navegacion">
<ul>
<li><a %re"="#">Dor!ada</a></li>
<li><a %re"="../%is!oria/%is!oria.%!ml">2is!oria</a></li>
<li><a
%re"="../discogra"ia/discogra"ia.%!ml">?iscogra"5a</a></li>
<li><a %re"="../concier!os/concier!os.%!ml">Aoncier!os</a></li>
<li><a %re"="../descargas/descargas.%!ml">?escargas</a></li>
122
<li><a %re"="../"oro/"oro.%!ml">Poro</a></li>
<li><a %re"="../souvenirs/souvenirs.%!ml">8ouvenirs</a></li>
</ul>
</div>
1omo erás" la ruta de la portada no la he puesto a$n. -sa ruta será diferente" pues para llegar desde
la página de cualquier sección a la portada (que como digimos iba a ser la inde..html) la ruta a seguir es
simplemente ..I (para salir de la carpeta de sección en la que se esté) seguido de inde..html quedando
todo ese código as*9
<div id="navegacion">
<ul>
<li><a %re"="../inde(.%!ml">Dor!ada</a></li>
<li><a %re"="../%is!oria/%is!oria.%!ml">2is!oria</a></li>
<li><a
%re"="../discogra"ia/discogra"ia.%!ml">?iscogra"5a</a></li>
<li><a %re"="../concier!os/concier!os.%!ml">Aoncier!os</a></li>
<li><a %re"="../descargas/descargas.%!ml">?escargas</a></li>
<li><a %re"="../"oro/"oro.%!ml">Poro</a></li>
<li><a %re"="../souvenirs/souvenirs.%!ml">8ouvenirs</a></li>
</ul>
</div>
-stás de acuerdo conmigo en estos códigos? Si" erdad? Ue &e &e &e" es? %a hablamos de códigos 5tml
de t$ a t$L -stás hecho todo un 3ebmasterLLL
Bueno" para ser correctos del todo" deber*as recordar aquél error que comentamos una e# que surge
en el Qnternet -.plorer si ponemos las l*neas de código 5tml de ese modo. 'a norma era que todo el
código 5tml de una lista ha de estar todo seguido" por tanto antes de reempla#ar ese código amos a
ponerlo en una sola l*nea. Para ello" pones el cursor al final de cada l*nea y das a la tecla !Supr! hasta
que la siguiente quede pegada a la anterior. % as* con todas. 7ebe quedar más o menos as*9
<div id="navegacion">
<ul><li><a %re"="../inde(.%!ml">Dor!ada</a></li><li><a
%re"="../%is!oria/%is!oria.%!ml">2is!oria</a>
</li><li><a
%re"="../discogra"ia/discogra"ia.%!ml">?iscogra"5a</a></li><li><a
%re"="../concier!os/
concier!os.%!ml">Aoncier!os</a></li><li><a
%re"="../descargas/descargas.%!ml">?escargas</a></li><li>
<a %re"="../"oro/"oro.%!ml">Poro</a></li><li><a
%re"="../souvenirs/souvenirs.%!ml">8ouvenirs</a></li>
</ul>
</div>
6hora solo nos queda usar el buscar y reempla#ar del -ditPad 'ite para de un pluma#o actuali#ar los
códigos de los men$s hori#ontales de tooodas las páginas de las secciones. 2e atrees a hacerlo sin
ayuda?
6bre el -ditPad 'ite" abre todas las páginas de las secciones" (Portada" 5istoria" 7iscograf*a"
1onciertos" 7escargas" <oro y Souenirs)" y desde una de ellas" escribes el código a buscar en la parte de
arriba y el nueo código que queremos en la parte de aba&o. 2e recuerdo que el código a buscar era
este9
<div id="navegacion">
<ul>
123
<li><a %re"="#">8ecci7n )</a></li>
<li><a %re"="#">8ecci7n *</a></li>
<li><a %re"="#">8ecci7n 9</a></li>
</ul>
</div>
-l que queremos (que a en la entada de aba&o del -ditPad 'ite) lo puse antes. 6hora pulsas sobre
!4eplace 6ll! y listo" cierras el programa" le dices que guarde todas y... misión cumplida de nueoL
Corrigiendo la deformación del menF lateral
Si si" ya se que lleamos un montón de lecciones ya corrigiendo cosas" pero.... y lo que estás
aprendiendo? Ue &e &e. Oerás como pronto tenemos la web de e&emplo terminada y puedes entrar a
construir la tuya propia. 6demás" erás que cada e# que corregimos algo aprendemos cosas nueas" no?
7e eso se trata.
Si haces ista preia en cualquiera de las páginas de sección" por e&emplo de la página historia.html"
erás como ahora el men$ lateral de la i#quierda aparece casi en el centro deformando la web. -sta
deformación solo se e bien usando <irefo." pues si usas el Qnternet -.plorer apenas se aprecia. -n
cualquier caso hay que arreglarlo.
6demás" erás como los elementos del men$ hori#ontal que acabamos de hacer" están descentrados.
5ay que modificar los margenes de la capa naegación para a&ustarlo me&or y eitar además la
deformación que tenemos. -so se hace muy rápido retocando la ho&a de estilos" estiloAgeneral.css
?ira" esta es la deformación que te digo usando Qnternet -.plorer9
124
% esta es usando <irefo.9

5ay un hueco demasiado grande a la i#quierda de los enlaces del men$ hori#ontal y además se nos
ba&a el enlace Souenirs a una segunda l*nea que no queremos. 6demás puedes er como los usuarios de
<irefo. an a er la web deformada por ese mismo motio" al despla#arse el enlace Souenirs a una
segunda l*nea" despla#a también el men$ lateral. /o te preocupes" lo arreglamos enseguida.
6bre la ho&a de estilos" estiloAgeneral.css y echa un ista#o a las l*neas donde hemos definido estilos
a la capa naegación" son estas tres principalmente9
#navegacion {background-color: gra; $ border: black )p( solid $
%eig%!:*'p(+
#navegacion li {"loa!:le"! $ lis!-s!;le:none $ margin: 'p( *'p( 'p(
*'p( +
#navegacion ul { margin-le"!: *"!p( +
-l problema lo tenemos en la tercera de esas l*neas. 6l principio le pusimos un margen por la
i#quierda de +K: pi.eles. 'o hicimos para centrar los tres enlaces que ten*amos al comien#o de la
lección" pero como ahora tenemos unos siete" es necesario hacerlo más peque>o. 6s* que en lugar de
+K:p. amos a er qué tal se e con solo G:p." es decir" modificándo esa l*nea para de&arla as*9
#navegacion ul { margin-le"!: :!p( +
125
Si ahora guardas la ho&a de estilo y haces ista preia sobre cualquier página de sección" erás que
ahora se e... genialL /o somos unos genios?
6$n podr*amos retocarlo un poco más ariando la segunda l*nea ( margin9 :p. ,:p. :p. ,:p. ).
4etocando esos parámetros puedes hacer que los enlaces estén más o menos cerca unos de otros" pero
eso te lo de&o para cuando hagas tu propia web" o@i? Solo recuerdalo por si te hace falta.
/ota9 2e recuerdo que si es que las páginas aparecen un poco deformadas" es por que te falta
escribir algo de contenido en la parte central. 5a#me caso y rellenala" as* como el t*tulo y esas cosas
que te he dicho.
Si se deforman pero no se arregla con eso" tal e# hayas cometido alg$n error al usar el -ditPad 'ite.
-n ese caso coméntanoslo en el foro y te ayudamos a corregirlo" o@i? -sto a iento en popaLLL
Ka nue"a inde( o portada
Seguramente en muchas ocasiones habrás isto que al entrar en una página web aparece en primer
lugar una página de presentación que suele ser ya t*pica. 8n banner o logotipo grande de la web en
cuestión y un enlace en el que pone con letras grandes !-/2464! y... poco más. Personalmente y aunque
en mis comien#os la usaba en mis webs" hoy en d*a no me gusta nada ese tipo de portada o página de
presentación.
'os motios son diersos. Por un lado la apariencia de esas páginas no suele tener mucho que er con
las que encontramos luego en el interior de la web" perdiendo coherencia con el resto de páginas. Por
otro lado" hoy pienso que el isitante quiere encontrar lo que busca de un modo rápido y ese tipo de
página de presentación no es más que un clic más que tiene que hacer el isitante para acceder a esa
información que busca.
7e modo que" a pesar de que hemos construido una inde..html a modo de presentación" amos a
eliminarla y a colocar en su lugar una página copiada de nuestra plantilla. 7e este modo la apariencia
será la misma que la de las demás páginas quedando el con&unto más coherente. 7esde el men$
hori#ontal de arriba de esa página el isitante puede ya acceder a las distintas secciones de la web. -n
la parte central" donde se coloca el te.to o contenidos" pondremos una bree descripción de lo que el
isitante puede encontrar en la web. 0s parece bien?
Si" si" ya se que después de lo que hemos traba&ado en la inde. en estas lecciones da un poco de pena
eliminarla as*" tan friamente" &e &e" pero recuerda que al construirla has aprendido conceptos básicos
que nos serirán para seguir aprendiendo" no creo que haya sido en ano.
6s* que para crear la nuea inde..html abre tu 5tml Bit" y abre la plantilla con él. 6hora lo que
haremos es irnos al men$ de arriba del 5tml Bit y pulsar sobre 6rchio M Salar 1omo.
-n la entana que se abre ponedle de nombre inde..html y pusa en Guardar. 2e aisa entonces de que
ya e.iste un documento con ese nombre y te pregunta si quieres sobreescribirlo. 7ile que s* y el inde.
antiguo de&ará de e.istir. -n su lugar tendremos un inde..html cuyo contenido es idéntico al de la
plantilla.
PersonaliGando el inde(.+tml
6unque pare#ca un poco pesado" realmente esto nos sire para seguir practicando de modo que no te
que&es demasiado" &e &e &e. Para m* ser*a más fácil dártelo todo ya terminado" pero entonces no tendr*a
sentido esto de las lecciones.
-l caso es que ahora que tenemos el inde. copiado de la plantilla" tenemos que hacer funcionar el
men$ hori#ontal de arriba igual que hicimos con las páginas de las secciones. -n este caso no nos ale el
mismo código que en aquellas páginas" pues esas estaban dentro de una carpeta mientras que
inde..html está fuera. Por eso" las rutas no son e.áctamente las mismas y tenemos que ponérselas
correctamente. -s fácil" ya eras.
8na e# tengas abierta la página inde..html con el 5tml Bit" e a er su código" concretamente la
parte del men$ superior hori#ontal. 6hora mismo es como este9
<div id="navegacion">
<ul>
<li><a %re"="#">8ecci7n )</a></li>
<li><a %re"="#">8ecci7n *</a></li>
<li><a %re"="#">8ecci7n 9</a></li>
</ul>
126
</div>
5ay que a>adir los enlaces para el resto de secciones" como hicimos antes. Nuedar*a as*9
<div id="navegacion">
<ul>
<li><a %re"="#">Dor!ada</a></li>
<li><a %re"="#">2is!oria</a></li>
<li><a %re"="#">?iscogra"5a</a></li>
<li><a %re"="#">Aoncier!os</a></li>
<li><a %re"="#">?escargas</a></li>
<li><a %re"="#">Poro</a></li>
<li><a %re"="#">8ouvenirs</a></li>
</ul>
</div>
% ahora le ponemos las rutas correctas. Para la portada es fácil" como estamos en la portada" para
oler a ella otra e# solo es necesario abrir su archio" por lo que la ruta ser*a !inde..html! (recuerda
que el archio de la portada es inde..html" no portada.html).
Para el resto de páginas de ese men$ tendr*amos que" para llegar desde la portada hasta cada una de
ellas hay que" primero entrar en la carpeta correspondiente y después abrir el archio de la página" por
lo que las rutas al final quedan todas de este modo9
<div id="navegacion">
<ul>
<li><a %re"="inde(.%!ml">Dor!ada</a></li>
<li><a %re"="%is!oria/%is!oria.%!ml">2is!oria</a></li>
<li><a %re"="discogra"ia/discogra"ia.%!ml">?iscogra"5a</a></li>
<li><a %re"="concier!os/concier!os.%!ml">Aoncier!os</a></li>
<li><a %re"="descargas/descargas.%!ml">?escargas</a></li>
<li><a %re"=""oro/"oro.%!ml">Poro</a></li>
<li><a %re"="souvenirs/souvenirs.%!ml">8ouvenirs</a></li>
</ul>
</div>
-stás de acuerdo con esto? Pero recuerda" el código de las listas deben tener todas las l*neas
seguidas" de modo que lo pondr*amos de este modo (eliminando espacios y saltos de l*neas)9
<div id="navegacion">
<ul><li><a %re"="inde(.%!ml">Dor!ada</a></li><li><a
%re"="%is!oria/%is!oria.%!ml">2is!oria</a></li>
<li><a %re"="discogra"ia/discogra"ia.%!ml">?iscogra"5a</a></li><li><a
%re"="concier!os/concier!os.%
!ml">Aoncier!os</a></li><li><a
%re"="descargas/descargas.%!ml">?escargas</a></li><li><a %re"=""oro/
127
"oro.%!ml">Poro</a></li><li><a
%re"="souvenirs/souvenirs.%!ml">8ouvenirs</a></li></ul>
</div>
Bien. Pues pon en la inde..html ese código y ya lo puedes guardar. Si le haces ista preia ahora al
inde..html erás como aparece algo descuadrado. %a sabes que és por no tener a penas contenido" de
modo que aproechando que estamos liados con ese archio" escr*bele un par de párrafos más o menos
largos" ponle un <title? decente" como por e&emplo9
<!i!le>D.gina @"icial de la banda</!i!le>
y ya puestos" escr*bele también alg$n t*tulo entre <+3? y <'+3?" donde pusimos las equis" ale? Por
e&emplo esto9
<%)>Bienvenidos a la p.gina o"icial de la banda</%)>
6hora s* debe erse bien la ista preia.
6hora en teor*a se puede naegar perfectamente por toda la web que tenemos desde el men$
hori#ontal superior y desde todas las páginas de la web de e&emplo. Por cierto" como hemos eliminado
la antigua inde..html" puedes borrar de la carpeta ob&etos todos los archios que usaba el inde." como
por e&emplo la sonrisa y el bu#ón de correo. 6s* eitas ir acumulando archios que al fin y al cabo no
usas en la web y ya no nos hacen falta. Si no sabes borrar carpetas o archios con el 5tml Bit aqu* tienes
unas pistas.
-l siguiente paso es hacer funcionar también el men$ lateral de la i#quierda y es ese el paso que
daremos a continuación. 1omo poco te mereces ya un diplomaL
Completando el menF lateral iG;uierdo
-n primer lugar tendr*amos que decidir qué secciones an a tener o no ese men$ lateral i#quierdo
que ahora mismo poseen todas las páginas de nuestra web. Si recuerdas el esquema que hicimos al
principio" habiamos decidido crear todas estas secciones y subsecciones9
Si a$n mantenemos esa estructura" emos que desde el men$ hori#ontal se puede acceder a la
portada y a las páginas principales de cada sección. 8na e# en ellas" haremos que desde el men$
128
lateral i#quierdo se pueda acceder a las subsecciones. 'a portada no a a tener subsecciones y por tanto
no tiene sentido mantener en ella ese men$ lateral. 'o mismo ocurre con la sección <oro" no a a tener
subsecciones" de modo que eliminaremos ese men$ lateral de ambas" tanto de la portada (inde..html)
como del foro (foro.html).
Para eliminar el men$" basta con borrar las l*neas de código que lo definen en los archios inde..html
y foro.html. 4ecuerda que el código a eliminar es este9
<div id="menu">
<%)>B5!ulo de 8ecci7n )</%)>
<ul><li><a %re"="#">,nlace )</a></li><li><a %re"="#">,nlace
*</a></li><li><a %re"="#">,nlace 9</a>
</li><li><a %re"="#">,nlace :</a></li></ul>
</div>
'as páginas portada y foro no se an a deformar por eliminar esa parte de código. 2an solo no se erá
el men$ y el espacio que ocupaba pasa a formar parte del contenido central. -n el futuro" si cambiamos
de idea y queremos colocar de nueo el men$" bastará con colocar de nueo esas l*neas de código" de
modo que ya lo puedes eliminar sin miedo de ambas páginas" o@i?
Si lo deseas" elimina solo el código que te acabo de decir arriba" pero de&a las dos l*neas de
comentarios que hab*amos puesto hace unas páginas. ?e refiero a estas dos9
<>-- H6HAH@ ?, A@?HQ@ ?, E,6G FIB,RIF HSTGH,R?@ - 6@ B@AIR -->
<>-- PH6 ?, A@?HQ@ ?, E,6G FIB,RIF HSTGH,R?@ -->
7e ese modo" si un d*a quieres oler a poner el men$ sabrás dónde iba" ale? 6delanteL -limina esos
códigos y seguimos pa^lanteL
,enF lateral de Historia
-l método es muy similar al anterior" al que hemos usado para crear el men$ hori#ontal de la parte de
arriba" pero en este caso no amos a partir de la plantilla sino que amos a partir de la página que ya
e.iste en cada una de las carpetas de sección. -s decir" para generar las páginas de la sección historia"
abriremos el archio historia.html y la guardaremos con los nombres de las subsecciones.
Pero antes de hacer eso arreglaremos el men$ lateral de esa página. 7e ese modo" cuando guardemos
con el nombre del resto de página de esa sección ya se guardan con el men$ lateral terminado y no será
necesario acudir al -ditPad 'ite para reempla#ar esa parte de código. -ntiendes? Nué bienL &e &e.
-mpe#aremos entonces abriendo el archio historia.html y mirando el código que por ahora tenemos
para ese men$ lateral. -se código es este9
<div id="menu">
<%)>B5!ulo de 8ecci7n )</%)>
<ul><li><a %re"="#">,nlace )</a></li><li><a %re"="#">,nlace
*</a></li><li>
<a %re"="#">,nlace 9</a></li><li><a %re"="#">,nlace
:</a></li></ul>
</div>
Bien" qué cosas hay que cambiar aqu*? Para empe#ar le amos a poner el t*tulo de la sección entre
<+3? y <'+3?. 'o que escribamos ah* aparecerá en la parte alta del men$ lateral. Pondremos entonces
!5istoria! y quedar*a as* esa l*nea9
<%)>2is!oria</%)>
129
6 continuación escribimos los anchor te.t de cada enlace. 6unque ya lo he dicho" qui#ás se te haya
olidado. -l anchor te.t es el te.to que aparece isible en el enlace" es decir" las palabras sobre las que
hay que pulsar para ir a la página enla#ada. 1omo las subsecciones de la sección historia son 0rigen"
?iembros" <ormación 6ctual y 6lbum de <otos" pondremos esos te.tos como 6nchor 2e.t. Nuedar*a as*
por ahora el código del men$9
<div id="menu">
<%)>2is!oria</%)>
<ul><li><a %re"="#">@rigen</a></li><li><a
%re"="#">Eiembros</a></li><li><a %re"="#">
Pormaci7n Ic!ual</a></li><li><a %re"="#">Ilbum de
Po!os</a></li></ul>
</div>
6hora solo queda colocar bien las rutas. Pero claro" a$n no e.isten los archios de las subsecciones"
erdad? 6s* que no sabemos qué poner en la ruta de cada uno... /o pasa nada. 7ecidimos yá cómo se
an a llamar esos archios y como sabemos que los amos a guardar en la carpeta historia" tenemos
todos los datos que nos hacen falta para escribir las rutas correctamente. Oeamos.
Si el archio de la subsección 0rigen lo amos a llamar origen.html" y sabemos que lo amos a
guardar (cuando lo generemos) dentro de la carpeta historia" sabremos que para ir desde cualquier
página de la sección historia a la página origen.html solo es necesario abrir dicho archio. /o es
necesario salir ni entrar en ninguna carpeta" por lo que la ruta será simplemente el nombre del archio"
es decir" !origen.html!.
'o mismo a a ocurrir con el resto de enlaces de las demás subsecciones" no es as*? -ntonces es fácil
adiinar que el código completo quedar*a de este modo9
<div id="menu">
<%)>2is!oria</%)>
<ul><li><a %re"="origen.%!ml">@rigen</a></li><li><a
%re"="miembros.%!ml">Eiembros</a>
</li><li><a %re"=""ormacion.%!ml">Pormaci7n Ic!ual</a></li><li><a
%re"="album.%!ml">
Ilbum de Po!os</a></li></ul>
</div>
1orrecto? Pues listo" ya podemos escribir ese código en lugar del antiguo que hab*a en el archio
historia.html. 8na e# hecho" guarda la página historia.html (esta e# con su mismo nombre).
Uenerando el resto de subsecciones de Historia
-l resto es bien fácil" uele a abrir la página historia.html y ahora as arriba" al men$ del 5tml Bit y
pulsando sobre 6rchio M Salar 1omo le as dando los nombres de los archios de las subsecciones uno a
uno. -s decir" la guardas como origen.html" miembros.html" formacion.html y album.html y ya tenemos
toda esa sección completa.
Solo nos faltar*a ahora personali#ar un poco cada una de esas subsecciones. 1ómo? Pues igual que
hicimos con las secciones. 'e ponemos el t*tulo correspondiente en el <title?" cambiamos el contenido"
los párrafos para hablar de lo que toque en cada subsección" etc" etc. 7e lo contrario" cuando
naeguemos por la web no nos amos a dar cuenta de dónde estamos" pues todo el contenido será copia
de historia.html. 7e acuerdo?
130
-l resto es cosa tuya. /o creo que sea necesario que te e.plique paso a paso cómo actuar con el resto
de secciones" no? %a sabes" ahora abres la página de la siguiente sección" discografia" arreglas el men$
lateral en ella" la guardas y luego generas el resto de páginas de las subsecciones de discografia" que
son maquetas.html" cd+.html" cd,.html y cdD.html. 'uego le personali#ar los t*tulos" les pones algo de
te.to personali#ado" algo que hable de esa sección y listo" pasas a la sección siguiente. Si" es una lata"
lo se" &e &e &e.
1uando termines con todo eso tendrás una web completamente lista para ser publicada en internet.
1on solo cambiar los t*tulos" los párrafos con la información que te de la gana" a>adir o quitar secciones
o subsecciones" modificar colores de fondo en la ho&a de estilo" etc" etc" tendrás tu propia página web.
Nué me dices? % todo sin costarte un chaoL /o ha sido genial? Ua &a &a &a.
2e de&o aqu* un enlace de cómo ha quedado esta web de e&emplo hasta el momento.
1laro que a$n queda mucho que aprender y cosas que aplicar a este e&emplo" como aprender a
insertar imágenes en la parte central de la web" donde a el contenido" saber colocarlas a la i#quierda o
a la derecha" que el te.to las rodee o no" hacer que los enlaces se marquen indicando en qué página
está el isitante" me&orar cosas para aparecer de los primeros en Google" aprender a insertar publicidad
para costear un hosting y dominio... y cientos de cosas más" pero lo básico ya lo tienes.
2odo eso y mucho más lo encontrarás en las lecciones siguientes de 1ómo1rear2u3eb. Por cierto" si
te sientes en deuda con 1123 te agradecer*amos que cuando cuelgues tu nuea web en internet
coloques un enlace hacia nosotros y por qué no" que recomiendes estas lecciones a tus amigos. -so nos
ayudará a crecer y repercutirá sin duda en la me&ora de esta página. 7esde ya mis más sinceros
agradecimientos por tu apoyo.
-n las pró.imas lecciones (tengo que terminarlas primero) eremos como me&orar a$n más esta web
de e&emplo. ?ientras tanto ha# tus propios e.perimentos" retoca todo lo que puedas para ir practicando
y usa el foro para resoler tus dudas y ayudar a los colegas re#agadosL
131