Contenido:

3 --------------------- La Plantilla
5 --------------------- Las Capas o Divs
7 --------------------- Creando ms capas
9 --------------------- Un Ancho Fijo
11 ------------------- El men de la web
12 ------------------- Enlaces del Men
13 ------------------- Estilos para Enlaces
14 ------------------- Estilos para Listas
16 ------------------- Formatear a Cero
17 ------------------- Mrgenes del Men
18 ------------------- Enlaces Cambiantes
20 ------------------- Enlaces con Fondo
21 ------------------- Margen en prrafos
23 ------------------- Indentar Prrafos
25 ------------------- Margin y Padding
27 ------------------- Separar el men
28 ------------------- Los Ttulos
30 ------------------- Posicionamiento
 Comenzando a crear la plantilla de nuestra pgina Web

La pgina index.html que hemos visto hasta el momento no est terminada ni mucho
menos. Su aspecto final no tiene nada que ver con lo que tiene ahora, pero trabajaremos
sobre ella ms adelante. Ahora lo que vamos a hacer es comenzar creando la plantilla,
que nos valdr para generar a partir de ella el resto de pginas de nuestra web.

Crear el archivo plantilla.html

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

Abrimos el Html-Kit.
Hacemos visible la ventana Workspace.
Ponemos el ratn sobre el sitio "web-ejemplo-cctw-local" y pulsamos sobre l con el
botn derecho del ratn.
Escogemos New > Create File...

Escogemos crear "Blank Html Page" desde la pestaa "General" y pulsamos Ok.
 Le ponemos de nombre plantilla.html y pulsamos Ok de nuevo.

Ahora la abrimos haciendo doble clic en su nombre, en la ventana Workspace para

empezar a trabajar sobre ella. Como siempre que se crea un archivo nuevo, aparece casi
vacio.

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

Hacemos lo mismo para crear una Hoja de Estilo distinta a la anterior. Mientras que la
anterior (estilos.css) la vamos a usar solo para el index, esta segunda Hoja de Estilo que
llamaremos "estilo-general.css" se usar para todas las dems pginas de la web. Crala
tu mismo. Toma, por si no te acuerdas de cmo crear una Hoja de Estilo Vacia, pero
recuerda ponerle de nombre "estilo-general.css".

Relacionando estilo-general.css con plantilla.html

Ahora te toca relacionar esta segunda Hoja de Estilos con la plantilla.html recien
creada. Te recuerdo que haba que colocar una lnea de cdigo en el Head. Te dejo esto
por si no te acuerdas de cmo relacionar la hoja de estilo con la web, pero recuerda
poner en la ruta "estilo-general.css" en lugar de "estilos.css", oki?

Como tanto plantilla.html como estilo-general.css estn en la misma carpeta, es

suficiente con escribir esto:

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

Una vez creados estos dos archivos y relacionados entre s, pasamos a meterles mano.
 La estructuracin con Capas o Divs?
El darle forma a una web se le suele llamar estructurarla, o enmaquetarla. Es darle una
estructura concreta para colocar luego el men aqu, el contenido all, etc. Para
estructurar una web podemos usar simples saltos de lnea, o avanzar un poco ms y usar
tablas, que dividen el espacio en celdas, celdas en las que podemos colocar ms
comodamente los elementos que queramos. Tambin se puede estructurar una web
partindola en frames o marcos.

Pero el mtodo ms profesional, lmpio y cmodo es sin duda el uso de Capas o Divs (es
lo mismo decir capa que div).

Qu es una Capa o un DIV?

No es ms que un elemento rectangular dentro del cual podemos incluir lo que

queramos, palabras, prrafos, enlaces, imgenes, varias de estas cosas a la vez o incluso
otras capas o tambin tablas. Es un simple hueco. Lo bueno que tiene es que luego,
desde la Hoja de Estilos, podemos darle a todo su contenido propiedades como color de
fondo, tamao de letra, dimensiones de ese recuadro, margenes, bordes, etc, etc.

Al principio quizs te de un poco de pnico todo esto, pero te prometo que no es nada
dificil, ya vers. Fjate, esto de abajo es el cdigo Html de un Div sencillo.

<div>Bienvenidos a mi Web</div>

A que no te ha dolido? je je. Como puedes ver, igual que ocurra con los elementos que
vimos atrs, empieza con una etiqueta y termina con otra de cierre, igual pero con la
contrabarra delante. Entre ambas etiquetas se coloca su contenido.

Escribe esa lnea de cdigo en el archivo plantilla.html, por supuesto, entre <body> y
</body> pues se trata de algo que debe "verse". Ahora haz vista previa "Preview" y
observa qu aparece. Nada asombroso, ya lo se.

Dando estilos a un Div

Ese Div no tiene ningn atractivo, claro. Para adornarlo lo que hacemos es definir un
tipo de estilo en la Hoja de Estilos y aplicarselo a ese DIV.

Para empezar a jugar, abre el archivo estilo-general.css que se abrir vacio, pon esto
dentro y luego gurdalo:

#cabecera {background-color:pink;}

Nota: Cada vez que hagas un cambio en la Hoja de Estilos, tienes que guardarla para
poder ver sus efectos en la vista previa de la pgina web.

Clases de Estilo y Estilos nicos

 Existen dos formas de definir estilos. Una es crear una clase de estilo, que es un tipo
de estilo que podemos asignar luego a uno o a varios elementos. Por otro lado estn los
estilos nicos, que solo se deben aplicar a un elemento por pgina web.

Las clases de estilo, que se pueden usar sobre varios elementos (varios prrafos, varias
celdas, enlaces, etc) se definen en la Hoja de Estilo como vimos al crear la clase de estilo
".centrado", es decir, con un punto delante del nombre y luego colocando las propiedades
entre los corchetes. Luego, en el cdigo Html se asigna esa clase de estilo a un elemento
colocando dentro de su etiqueta de inicio esto, class="nombredelaclasedeestilo".

En cambio los estilos nicos se definen en la Hoja de Estilo con una almohadilla como
esta "#" (se escribe pulsando a la vez la tecla Alt Gr, que est a la derecha del espacio y
la tecla del nmero 3 de tu teclado) en lugar de con un punto, y en el cdigo Html se
asigna este tipo de estilo nico escribiendo dentro de la etiqueta del elemento esto otro
id="nombredelestilounico" en lugar de con el class, que es para clases (estilos que se
pueden asignar a varios elementos).

Si te he hecho la picha un lio, leelo despacito. Es importante entenderlo.

Como puedes ver, el estilo de antes #cabecera {background-color: pink } es un Estilo

nico y por lo tanto se asigna este tipo a un solo elemento, y se hace en el Html as:

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

Abre ahora el archivo plantilla.html y pon esa lnea de cdigo. Ha de quedar as:

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

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

Si has guardado antes la Hoja de Estilo y haces vista previa en la plantilla, vers como
ahora la frase "Bienvenido a mi Web" aparece diferente. Con un fondo rosa (pink). Es la
magia del CSS aplicado a los Divs, pero no te creas que esto queda as, vers lo
asombroso que es todo esto ms adelante.
 Ms capas, ms capas

Ya tenemos nuestra primera capa llamada cabecera. Al final de estas lecciones esta
capa contendr la cabecera, que segurametne conste del logotipo de la web y de un
hueco para, por ejemplo, algo de publicidad para sufragar los gastos de un posible
dominio propio y quin sabe, de un hosting de pago... no es algo descabellado, no te
creas.

Pero con esa capa sola no tenemos ni para empezar, je je. Vamos a crear una segunda
capa que contendr una barra de navegacin. La llamaremos, navegacion (sin acentos, y
todo en minsculas, claro).

Qu es una barra de navegacin?

Una de las cosas ms importantes en una pgina web es el dar facilidades al visitante
para que pueda navegar por nuestras pginas sin perderse y que lo tenga todo siempre a
mano. No es bueno tener pginas escondidas, es decir, pginas a las que para acceder
haya que ir primero a la seccin tal, luego a la subseccin cual, luego entrar en otro lado
y finalmente conseguir acceder a una pgina en concreto. Todas las pginas deberan ser
accesibles sin ms que pulsar un par de enlaces desde el index o pgina principal.

La barra de navegacin nos ayuda a esto. En esta barra que aparecer en todas las
pginas de la web pondremos enlaces a las secciones que tratemos. As, en cualquier
momento el visitante puede ir de un lado a otro sin perderse.

Esto es son varios ejemplos de barras de navegacin:

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

Creando la capa navegacion

La llamaremos "navegacion" y solo va a existir una por pgina, luego se trata de un

estilo nico y se define por tanto as en la Hoja de estilo:

#navegacion {background-color:gray;}

Escribimos eso en la Hoja de Estilo. Despus abrimos la plantilla.html y escribimos, a

continuacin del div cabecera, esta otra lnea:
 <div id="navegacion">Barra de Navegacin</div>

Como puedes ver, en la Hoja de Estilo le hemos dado a navegacion la propiedad de

color de fondo gris (gray). Ms adelante le pondremos ms cosas, pero ahora seguimos
creando el resto de capas.

Creando las capas contenido y pie

Ya que estamos, vamos a crear dos capas ms. La primera se llamar contenido y en
ella pondremos luego un men lateral y los textos de nuestra web, la parte principal.
Tambin vamos a crear otra capa para la parte ms baja de la web que llamaremos pie
en la que ms tarde tendremos algunos enlaces, un mensaje de copyright y puede que
otro espacio para publicidad, ya veremos.

Siguiendo las mismas instrucciones que antes, definimos estas otras dos capas en la
Hoja de Estilo:

#contenido {background-color:orange;}
#pie {background-color:brown;}

Y tras guardas la Hoja de Estilo, abrimos la plantilla.html y ponemos estas otras dos
lneas despus de la de la capa navegacion:

<div id="contenido">Esta ser la zona principal de la web</div>

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

Y el resultado es...

Tras guardar todo, en la Hoja de Estilo tendrs esto:

#cabecera {background-color:pink;}
#navegacion {background-color:gray;}
#contenido {background-color:orange;}
#pie {background-color: brown;}

En la plantilla.html esto otro:

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

<html>
<head>
<title>Page title</title>
<link rel="stylesheet" href="estilo-general.css" type="text/css" media="all">
</head>
<body>
<div id="cabecera">Bienvenidos a mi Web</div>
<div id="navegacion">Barra de Navegacin</div>
<div id="contenido">Esta ser la zona principal de la web</div>
<div id="pie">Este es el pi de pgina</div>
</body>
</html>

Y aqu tienes el resultado del ejemplo. Se que no parece una pgina web, pero no me
dirs que no est tomando forma, no? Vers como esto empieza a cambiar en breve..
 Resoluciones de pantalla y pginas web

Existen varias formas de darle un tamao a una pgina web. Por ejemplo, podemos
hacer que ocupe toda la pantalla del navegador del usuario, sea como sea esta de
grande, la tenga o no maximizada (la ventana...), o tambin podemos darle un ancho
concreto, de modo que los que tengan un monitor pequeo la vern muy grande y los que
la tengan ms grande (la pantalla...) la vern ms chica...

Ambos casos tienen su parte buena y su parte mala. En el primer caso, si le decimos
que ocupe toda la pantalla del navegador es muy posible que la web se desmorone
cuando el usuario cambie el tamao de esa ventana. Los elementos grandes no caben y
desplazan el contenido siguiente hacia abajo, produciendo un caos en la web. Lo bueno
es que se aprovecharia todo el espacio, cuando lo hay, claro.

El otro caso es darle un ancho fijo a la pgina web (por ejemplo 20 cm, o 800 pixeles).
As el usuario podr hacer lo que quiera con la ventana de su navegador que la web
seguir manteniendo su forma y no se deformar en absoluto. Eso es lo bueno, lo malo es
que si no acertamos en qu anchura darle, pasar que unos la vern muy grande y la
vern tan pequea que tendrs ms margenes a los lados que espacio para la web....

Qu opcin tomamos entonces?

Lo mejor es tomar la segunda opcin, dar un ancho fijo a la web, pero estudiando muy
bien cul ser esa anchura. Lo mejor es darle un ancho que sea cmodo para la
resolucin ms usada por todo nuestro pblico. As, si unos pocos usan una resolucin de
pantalla un poco mayor no vern unos mrgenes exagerados y los que usen resoluciones
un poco menores al ancho que le demos, no tendrn que usar demasiado la barra de
desplazamiento y adems, sern la minora.

Parece ser que hoy por hoy la anchura ptima para una pgina web es de 800 pixeles.
De hecho, si miras las webs que sueles visitar vers que es as y que quedan muy bien con
cualquier resolucin. As que... vamos a darle a la web del ejemplo esa anchura y adems
vamos a hacer que aparezca centrada en la ventana del navegador, las dos cosas a la vez,
oki? Sers capaz? je je, fijo que s.

Un Div para dominarlos a todosss

Excto. Como queremos centrarlo todo, lo que haremos ser encerrar toda la parte
visible de la web en un div al que le definiremos en la Hoja de Estilo la propiedad de
centrado, pero de un modo algo especial para que funcione en todos los navegadores.
Llamaremos a esa capa.... "global". Como va a ser nica, es decir, solo va a haber un
elemento "global" por pgina, en lugar de definirlo con un punto delante y el
class="global" en el Html, lo haremos con la almohadilla y con id="global".

Para encerrar todo lo visible, ponemos la etiqueta de inicio justo despus de <body> y
la de cierre justo antes de </body>. El cdigo Html queda as:
 Ves como encierra a los otros divs? Ahora, en la hoja de estilo definimos #global con las
siguientes propiedades:

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

Esto significa que la capa global tendr un ancho de 800 pixeles y aparece una
propiedad que no hemos visto antes, (margin: 4px auto) que define el margen a dejar
entre el elemento (en este caso el div global) y el resto de cosas a su alrededor. El 4px es
la cantidad de margen que vamos a dejar por encima y por debajo de la web, mientras
que auto es la cantidad de margen que dejaremos por cada lado. Auto significa
automtico, por lo que se dejar todo lo que exceda de 800px y automticamente, es
decir, la mitad a la derecha y la otra mitad a la izquierda y por tanto, centrado. Lo
veremos mejor ms adelante, no te preocupes si no lo entiendes demasiado bien, vale?

Esto no funciona en todos los navegadores a menos que definamos una caracteristica a
Body en la Hoja de Estilo estilo-general.css. Abrela si la cerraste y escribe al principio
del todo esta nueva lnea de css:

body {text-align:center;}

Body no es un nombre de un estilo inventado por nosotros, como cabecera, pie, tal y
cual, sino que es una etiqueta de Html, y a las etiquetas de Html (como body, p, a,
table, div, etc..) no se les pone ni el punto delante ni la almohadilla (#). Lo que estamos
haciendo al ponerle propiedades a una etiqueta es cambiar las propiedades que tiene por
defecto. Con esto ya queda toda la web centrada en toooodos los navegadores. Si
guardas ahora la Hoja de Estilo y haces vista previa de la plantilla.html vers como todo
aparece centrado y con un ancho fijo de 800px. Ahora no ser fcil descuadrar tu web.

Esto es lo que hemos conseguido con el ejemplo hasta el momento. Va mejorando poco
a poco....
 El men de nuestra pgina web

Presta mucha atencin en esta leccin, que igual es un poco espesa, pero merece la
pena para crear el men lateral y empezar a entender como se usan estas capas o divs.

Ahora queremos crear un men lateral parecido al de esta misma web, el de la

izquierda de estas lneas. Te gusta? Pues a ti te puede quedar mucho mejor si tienes un
poco de gusto y ganas de experimentar. Como un men es ms o menos una zona
rectangular, vamos a crear una capa para meter en ella este men. Como queremos que
salga dentro de la parte central de la pgina, dentro de la zona de los textos, meteremos
o crearemos este div que vamos a llamar menu dentro del div contenido. Parece lgico,
no? Esto es lo que se llama anidar capas.

Empezamos creando la capa. Abre en el Html-Kit la plantilla.html y escribe la

siguiente lnea justo despus de la etiqueta de inicio de la capa contenidos y antes del
texto de dentro suya (Esta ser la.....bla bla blal...), de forma que quede el cdigo Html
as:

Como vers, despus del cdigo Html de la capa menu, van los textos de la capa
contenido (Esta ser la ....) y despus, en la siguiente lnea vemos la etiqueta de cierre
del div contenidos.

Ahora tienes que definir el estilo de la capa menu en la Hoja de Estilos. Abre estilo-
general.css y escribe esta lnea para el div menu:

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

Como solo hay un men por pgina, lo definimos como estilo nico, con la almohadilla
(#). Le ponemos un color diferente al resto para distinguir donde empieza y donde
termina la capa menu y colocamos dos propiedades ms.

La primera es width:150px con la que le damos una anchura fija de 150 pixeles. Quizs
sea poco, pero por ahora lo dejamos as hasta que veamos si nos va a faltar anchura en
esa capa. La segunda nueva caraterstica que vemos es nueva, la propiedad Float.

Para que sirve la propiedad Float?

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

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

Ale, lo de siempre.. guarda la Hoja de Estilos y mira como est quedando la plantilla
haciendo vista previa, o si el cansancio puede contigo, mralo aqu mismo, je je je.
Bueno, ya estn todas las capas creadas (mucho ms adelante quizs metamos alguna
ms...) as que ahora vamos a rellenarlas y a darles una mejor presencia, oki?

Rellenando el men de nuestra pgina web

El men as como lo hemos dejado ni parece men ni parece n de n. Vamos a

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

Si es un listado, usa listas

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

Como se hace una lista

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

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

Para nuestro ejemplo, seguramente nos moleste el dichoso puntito negro a la izquierda
de cada elemento de lista, pero eso lo podemos arreglar. Cmo? Pues como siempre, con
solo poner una cosilla en la Hoja de Estilos. Pero antes vamos a ver qu cul es el cdigo
que tendramos que colocar dentro del div del men.

Para empezar, abre tu Html-Kit y escribe el cdigo de arriba dentro del div menu,
eliminando claro la palabra "men" que habia ya colocada.

Ha de quedar de este modo:

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

Enlaces para el men de nuestra pgina web

Como recordars (eso espero...) los enlaces tenian esta forma:

<a href="ruta/archivo.html">Texto del Enlace</a>

as que vamos a poner ese cdigo dentro de cada elemento li de la lista del men. Si
ponemos una ruta falsa nos dar algn problema, asi que en lugar de poner nada en la
ruta le vamos a colocar una almohadilla (#) que sirve para que haga el efecto de enlace
pero sin enviarnos a ningn lado por ahora. Cuando tengamos ms pginas en la web
pondremos las rutas de aquellas pginas que queremos enlazar desde el men, vale?
 <a href="#">Enlace 1</a>

Como no vamos a querer que se abran esos enlaces en pginas distintas sino en la
misma, no es necesario ponerle el target al cdigo del enlace (el target="_blank" se pone
para que el enlace se abra en una pgina distinta, lo recuerdas?).

Pues adelante, abre tu Html-Kit, abre la plantilla.html y coloca un enlace en cada uno
de los tres elementos de lista que tenemos. Para diferenciarlos, puedes escribir Enlace
1, Enlace 2 y Enlace 3.

As que el cdigo del men completo se tiene que quedar as:

Eso es todo lo que tenemos que hacer en la plantilla.html porque lo dems, el

"aspecto", como siempre se lo daremos con la Hoja de Estilo ahora mismo.

Dar estilos Css a la lista del men

Vamos a empezar a arreglar cosas en la Hoja de Estilos para dar mejor aspecto a este
men. Recuerda que la estrategia perfecta para no tener problemas con algunos
navegadores y para tener un cdigo Html sencillo para revisarlo nosotros, y sencillo para
que los buscadores lo lean bien e indexen nuestras pginas correctamente, es poner en el
Html lo justito, y dejar los detalles de cmo queremos adornar cada cosa para la Hoja de
Estilo. Adems esto nos permitir hacer cualquier cambio en todas las pginas de nuestra
web con solo cambiar una palabra en la Hoja de Estilos. Es genial.

Reparando el fallo del men.

Si ya hiciste vista previa de la plantilla habrs visto que al poner varios enlaces dentro
ha crecido y se sale por debajo de la pgina web. Vamos a reparar esto desde la Hoja de
Estilo. Abre tu Html-Kit y abre estilo-general.css

Esto, despus de muuuchas pruebas lo he conseguido arreglar de este modo, colocando

un width:800px y un float:left a la capa contenido. No me preguntes mucho porqu, pero
es la nica combinacin que logra que en todos los navegadores se corrija ese fallo.
Realmente le estamos indicando a la capa contenido que ha de tener un ancho de 800
pixeles, igual que el ancho de la pgina. En realidad parece que ocupara menos, pero ten
en cuenta que el men est dentro de l, luego lo amarillo del men es parte de la capa
contenido. Ves ahora como s ha de tener 800px de ancho? El colocarle el float:left evita
que en algn navegador se descuadre todo. No se explicarte porqu ahora mismo, y vers
como a veces, a pesar de que cumplas todas las buenas prcticas que se pueden leer por
la red, hay que hacer alguna "pirula" para que se vea correctamente la pgina web con
cualquier navegador. Es todo un reto, pero por ahora lo estamos consiguiendo.

Sin ms rollo, abre la Hoja de Estilo y deja la lnea del estilo contenido de este modo:

# contenido {background-color:orange; width:800px; float:left;}

y luego guardas la Hoja de Estilo y haces vista previa de la plantilla.html para ver cmo
ahora todo se ha solucionado... o no? Si ves algn fallo no dudes en decrmelo en el Foro
CCTW, plis!

Eliminando los puntos de la lista

Esta es fcil y comprensible. Podemos modificar las propiedades del elemento li en la

Hoja de Estilos, pero el problema que podemos tener es que si lo hacemos as, todas las
listas que tengamos en la web dejarn de tener ese punto, y es ms, tomarn todas las
propiedades que le digamos ahora. Por eso, mejor que modificar las propiedades del
elemento li, lo que haremos ser crear un estilo nuevo de li, que usaremos solo en el
men. De este modo todas las listas que pudieramos poner en las otras partes de la web
seran normales.

As que, definiremos en la Hoja de Estilo propiedades para todos los li que cumplan la
condicin de estar dentro de la capa menu. Toma ya. Cmo te has quedao? je je je. Esto
se hace as:

#menu li { ...propiedades..... }

Cuando se pone la capa antes de un tipo de estilo, se est indicando que esas
propiedades solo han de respetarse cuando el elemento (en este caso el li) est dentro
de la capa escrita antes (en este caso menu). Que bien, no?

Las propiedades que le vamos a dar en estilo-general.css) son las siguientes:

#menu li {list-style:none;}

Esto hace que no tenga ningn (none) tipo de estilo tpico de lista, como por ejemplo
el puntito aquel. Si guardas la Hoja de Estilo (estilo-general.css) y haces vista previa de
la plantilla vers que ya no aparece. En la pgina siguiente seguimos arreglando el men.
 Formatear los estilos a cero

Si tuvieras varios navegadores diferentes, como el Internet Exporer, el Opera, el

Firefox, etc, etc, te darias cuenta que en cada uno de ellos el men (y algunas otras
cosas) se ve ligeramente distinto. En unos los enlaces aparecen en el centro, en otros un
poco a la derecha, o un poco ms a la izquierda en otros.. Esto es porque mientras no se
indique lo contrario, unos navegadores deciden dejar un margen de unos pocos pixeles
para cada elemento, mientras otros navegadores deciden que no, que hay que dejar un
poco ms o un poco menos... Al final lo que ocurre es que parece imposible ver una
pgina web exctamente igual con todos los navegadores.

Todos los problemas de este tipo no los vamos a poder arreglar de golpe, pero uno bien
importante s. Como cada uno toma por defecto un valor inicial para los margenes y
bordes, lo que haremos ser indicar nosotros en la Hoja de Estilos que TODOS los
elementos van a tener un valor cero para los bordes y mrgenes. Luego, si deseamos
cambiar alguno, lo definiremos en la Hoja de Estilos, pero por el momento lo ponemos
todo a cero, o lo que es igual, vamos a formatear los estilos!

Para indicar que ha de aplicarse a todos los elementos posibles, ponemos un asterisco.
Para indicar que tengan margen, padding (padding es otro tipo de margen que ya
explicar) y borde cero basta con colocar en la primera lnea de la Hoja de Estilo, esto:

* {margin:0px; padding:0px; border:0px;}

Si escribes esta lnea en estilo-general.css, la guardas y haces vista previa de la

plantilla vers como ahora el men aparece centrado, justamente centrado, sin
mrgenes. Tambin han desaparecido otros mrgenes que rodeaban la capa global, etc.
Tenemos el poder! je je je.. Eso s, no olvides colocar esa lnea la primera de todas, no
se te ocurra ponerla la cuarta, la quinta, etc, debe ser la primera de todas, arriba del
todo en estilo-general.css. De lo contrario, como el navegador va leyendo los estilos de
arriba a abajo, si la lee de las ltimas anulars los mrgenes y bordes de las capas
definidas antes de esa lnea. Acurdate!

Enlaces del men hacia la izquierda

Has visto que todos los elementos de la web de ejemplo salen centrados? Sabes porqu?
Pues porque pusimos text-align:center en la etiqueta body, y como el body contiene a
toda la web entonces todos los elementos de la web estarn centrados, a no ser que.....
a no ser que le indiquemos otra cosa a cada estilo concreto, claro.

Por ejemplo, los enlaces del men quedan mucho mejor si aparecen alineados a la
izquierda, verdad? Pues vamos a arreglar eso ahora mismito! Abre tu Html-Kit, abre la
Hoja de Estilo y, escribe text-align:left dentro de las propiedades de la capa #menu, tal
que quede as:

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

 La verdad, tambin se hubiera podido poner el text-align:center en el estilo #menu li,
no? De la forma primera se aplica a todos los elementos de la lista, mientras que
definiendolo en #menu li solo se aplicara a los elementos encerrados entre <li> y </li>.
Tiene sentido, verdad? Lo dejamos definido en el #menu por ahora.

Ahora los enlaces aparecen bien, a la izquierda, pero un poco demasiado pegados a la
izquierda, verdad? Seguimos mejorando el aspecto en la pgina siguiente.

Qu tal lo llevas? Levntate un poco y estira las piernas, que te va a dar algo malo! je
je je je. Si no entiendes algo o quieres que te explique mejor alguna parte dmelo en el
Foro CCTW, sin problemas, o escribe all tus dudas o sugerencias, que para eso estamos
colega!

Arreglando los mrgenes del men

Esto ya es cosa de probar y probar, claro. Lo suyo es ajustar los mrgenes cuando
tengamos los enlaces definitivos, pues segn lo largo que sea el texto de cada enlace
podemos ajustarlo ms o menos, al igual que la anchura del men. Pero como ya estamos
liados con esto, vamos palante y lo terminamos, te parece? Va a ser muy facilito.

An no te lo he dicho, pero quizs hayas visto ya por algn lado varias formas de
especificar los mrgenes. Se pueden definir de estas formas:

margin:10px

Esto indica que se ha de dejar 10 pixeles tanto por arriba como por abajo y por ambos
lados.

margin:10px 20px

Este otro modo, con dos cantidades, indica que se ha de dejar 10 pixeles por arriba y
abajo y 20 pixeles por la derecha e izquierda. Es decir, la primera cifra indica el margen
de arriba y abajo y la otra la de los lados.

margin:10px 20px 5px 15px

Y este otro modo (puedes escoger el que te venga mejor segn si los mrgenes son
iguales para todos los lados o diferentes) define por orden los margenes a dejar por
arriba, por la derecha, por abajo y por la izquierda respectivamente. O para acordarnos,
la primera cifra es la de arriba y las dems van en sentido de las agujas del reloj (arriba,
derecha , abajo e izquierda).

Nosotros, para el caso de los mrgenes del men vamos a escoger la ltima forma, con
las cuatro cifras, pues as podemos retocar muy fcilmente y ver como va quedando.
Empezamos como siempre, abrir tu Html-Kit, abrir la Hoja de Estilos y escribir dentro de
los corchetes de la capa #menu li lo siguiente:
 #menu li {list-style:none; margin:0px 0px 0px 0px;}

Lo he puesto todos a cero (en realidad ya estaban todos a cero pues hicimos el
formateo con el asterisco hace muy poco) y vamos probando con distintos valores para
ver como va quedando.

Lo que ms me interesa es dejar un poquito de margen hacia la izquierda para separar

los enlaces del borde, y tambin un poco de margen por encima y por debajo para que no
se vean muy apiados. En cambio el margen derecho me interesa ms que siga a cero,
pues as tengo ms hueco para colocar el texto de cada enlace, lo pillas?

As que, tras varias pruebas (te invito a que hagas tus experimentos poniendo valores
un poco exagerados para ver mejor los efectos) lo vamos a dejar as:

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

Te recomiendo que en estos ejemplos que vamos haciendo pongas exactamente lo

mismo que yo. As no te liars ms adelante cuando hagamos cambios. Confa en m un
poco, no? Tu puedes ir a tu bola si quieres, pero en el otro sitio que hemos creado al
principio, al que llamamos <>bmis-experimientos, pero en esta mando yo, oki? je je je.

Sigo echando de menos algo... Ah! claro, lo de eliminar el subrayado y hacer que
cambien de color los enlaces cuando pasas el ratn por encima! Eso mola, vamos a verlo
en la pgina siguiente, es muy sencillo tambin, y es gratis! je je je.

Aplicando estilos css a los enlaces del men

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

Cmo se definen las propiedades de los enlaces

Los enlaces como ya sabes, de escriben con la etiqueta <a> y por tanto est claro que
para modificar sus propiedades basta con escribir una "a" en la Hoja de Estilos y modificar
cosas entre los corchetes. Las caractersticas que definamos as para los enlaces se
aplicarn a todos ellos sea cual sea su estado. Ahora te cuento qu es eso de los estados.

Se distinguen cuatro estados posibles para los enlaces, que son los siguientes:

- Link: Es el estado normal que tiene un enlace cuando no est en ninguno de los otros
tres estados.
 - Visited: Imagino que te habrs fijado que en algunas webs se colorean de otro color
los enlaces que ya has visitado antes, verdad? Pues "visited" es el estado del enlace
cuando ste ya ha sido visitado por el usuario anteriormente.

- Hover: Es el estado del enlace cuando el cursor del ratn est justo encima de l,
pero sin apretar el botn an. Tambin lo has debido ver, pasas el ratn sobre un men y
se van coloreando o poniendo en negrita los enlaces que sealas.

- Active: Y este es el estado de un enlace o vnculo cuando est siendo presionado por
el ratn y mientras no se suelta el dedo.

Hay que ver cuanto ests aprendiendo eh? Y gratis! No te quejars, je je je. Bueno,
pues como te deca antes, si en la Hoja de Estilo solo indicas la "a" de enlace seguido de
los corchetes con sus propiedades, entonces todas esas propiedades afectarn a todos los
enlaces sean cuales sean sus estados. Se hara as (en la Hoja de Estilos, claro):

a {color:blue; font-size:1.3em; text-decoration:none;}

En este ejemplo de arriba le hemos indicado que TODOS los enlaces, sean cuales sean
sus estados, han de ser azules (color:blue), han de tener un tamao de letra de 1,3 veces
lo que correspondera normalmente (font-size:1,3em) y finalmente que no deben tener
ningn tipo de decoracin, esto es, el subrayado (text-decoration: none). Por defecto
siempre salen subrayados, propiedad que se define con text-decoration: underline

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

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

pasan a rojos y subrayados

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

Estas lneas de cdigo puedes escribirlas ya en la Hoja de Estilos estilo-general.css

Depus gurdala y mira los cambios con la vista previa en plantilla.html

Qu, se va animando esto o no? No? pues vamos a mejorarlo an ms...

 Aplicando ms estilos css a los enlaces del men

Para que se note que controlamos esto un montn, vamos a aplicar un par de
propiedades ms a los enlaces del men. Lo primero ser tratar estos enlaces como
bloques, lo segundo ponerles un color de fondo.

Tratar elementos como bloques

Si te fijas en la vista previa de la plantilla.html vers que es necesario poner el cursor

justo encima de las palabras del enlace (se suele llamar Anchor Text a los textos de los
enlaces) para que estos funcionen. En cambio podemos hacer un pequeo truco para que
estos se activen, funcionen, con solo colocar el cursor sobre la lnea, sin necesidad de
colocarlo justamente sobre el texto. No se si te has enterado de lo que acabo de decir,
igual suena un poco extrao, pero tu haz lo que te digo y vers a qu me refiero.

Aade esta ltima propiedad dejando el estilo de enlaces de la Hoja de Estilos estilo-
general.css as:

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

Ocurren dos cosas ahora. La primera es buena, es el efecto que te acabo de comentar,
que situando el cursor en la misma lnea del enlace pero lejos del texto, tambin se
activa el enlace. La segunda es mala, y es que se nos han separado demasiado los enlaces
verticalmente. Por qu ser?

Es un defecto de algunos navegadores, como el Internet Explorer, pero esto lo

arreglamos rpido con otro truquillo. Pon el cdgo Html de todos los elementos de la lista
uno seguido del otro, en lugar de uno en cada lnea de cdigo en la vista Html y vers
como se arregla. En adelante, ya sabes que los elementos de las listas, los <li> hay que
ponerlos todos seguidos, en la misma lnea que los <ul> y </ul>. Con eso se solventa el
tema.

Como te veo con los ojos perdidos mirando al techo... te dejo una imagen para que
veas a qu me refiero con ponerlos seguidos. Antes estaban as:

Y hay que ponerlos as:

 Aplicando un fondo a los enlaces activos

Bueno, en realidad es a los enlaces en estado Hover. Vamos a hacer que al poner el
cursor sobre un enlace del men, este aparezca sombreado, con un fondo de color....
gris. Se hace retocando el cdigo de los enlaces de antes, pero solo la lnea del hover,
dejndola as:

a:hover {color:red; text-decoration:underline; background-color: silver;}

La propiedad background-color te debera sonar, la vimos al principio del curso para

poner fondo a la pgina index, te acuerdas? je je. Silver significa plata en ingls, es un
color gris clarito. El resto de lneas del cdigo no se tocan, que te veo. Si guardas y haces
vista previa a la plantilla.html vers los efectos logrados con todo esto.

Rellenando la Zona Principal

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

Elementos que no son nada ?

Ya sabemos que gracias a la Hoja de Estilos podemos cambiar el tamao de la letra de

toda la web, podemos variar los aspectos de los enlaces, los fondos de ciertos elementos,
etc, etc sin ms que poner la propiedad correspondiente. Pero para eso todas las partes
del contenido de la pgina web deben "ser algo". Si son enlaces modificaremos la
etiqueta "a", si son prrafos la etiqueta "p", pero, qu etiqueta hemos de modificar para
cambiar las propiedades del texto de la parte principal de nuestra plantilla? Aquella en la
que pone "Esta ser la zona principal de la web"?

Va a ser dificil, pues no est encerrada entre ningna etiqueta concreta, luego ni es un
prrafo, ni un enlace, ni n de n. Nosotros pretendemos que sea un prrafo, verdad?
Pues vamos a indicrselo ponindole a esa frase la etiqueta <p> al incio y como no, la
etiqueta </p> de cierre al final. Ale, dale al teclado! Ha de quedar as:

Ms contenidos

Tras esta aclaracin, vamos a incluir un par de prrafos ms a continuacin de ese. Ya

sabes, has de poner <p> y </p> al principio y al final de cada uno para que el navegador
sepa donde empieza y termina ese prrafo. Escribe un par de prrafos que tengan
bastante texto, al menos lo suficiente como para sobrepasar lo que ocupa el men de la
izquierda.

Si escribes lo suficiente en cantidad, conseguirs ver este aspecto en tu plantilla.html

Justificar los prrafos de la pgina web

Ups, los prrafos se ven centrados y eso parece una poesia ms que una web, je je je.
Eso es por que le pusimos align:center a body en la Hoja de Estilo. Pero no pasa nada, lo
arreglamos rpido definiendo un estilo justificado para todos los prrafos de la web. Si
ms tarde nos interesa alguno con otra alineacin, lo crearemos en su momento.

Por ahora, abre tu Hoja de Estilo e incluye esta nueva lnea, por ejemplo al final de su
contenido:

p {text-align:justify;}

Con esto los textos quedan justificados. Esto significa que se reparten para que
empiecen justo en la parte izquierda y terminen todas las lneas justo en el margen
derecho, sin huecos. A mi me gusta as, pero si lo prefieres, en tus pginas puedes
definirlo como text-align: left o text-align:right o text-align:center, como quieras. En el
ejemplo lo dejamos con Justify.

Los mrgenes de los prrafos de la pgina web

La cosa va mejorando pero ahora vemos como los textos se pegan demasiado tanto al
men lateral como a los extremos de la pgina. Eso no queda muy bien, as que vamos a
arreglarlo.

Tienes dos opciones, una es definirle el margen concreto a cada uno de los prrafos de
todas tus pginas web, o algo un poco ms sencillo, poner un par de palabras en la Hoja
de Estilo y listo. Qu prefieres? je je je.

Abre la Hoja de Estilos de la plantilla.html (estilo-general.css) y vamos a reparar esos

mrgenes. Como los textos que vemos sin margen pertenecen a la capa de fondo naranja
(orange) y en la Hoja de Estilos solo pone "orange" en la capa "#contenido", ya sabemos a
qu capa incluirle la propiedad padding (el padding es parecido al margin, ya veremos la
diferencia), verdad? Por eso le pusimos esos colores tan feos, para encontrar cada capa
rpidamente, je je je. Pero solo queremos por ahora poner margen a sus prrafos, es
decir, queremos mrgenes para los prrafos de dentro de la capa #contenido, as que, si
recuerdas bien lo que hicimos la otra vez, esto se pone as:

#contenido p {padding:5px 10px 5px 10px;}

Resumiendo, escribimos primero la capa y luego el elemento de dentro de esa capa al

que queremos definir cosas y luego, entre parntesis, las propiedades. Le hemos puesto
10px en los dos lados y solo 5 por arriba y abajo, para ver como queda e ir variando cada
uno hasta que quede a nuestro gusto si fuera necesario.
 Escribe esa lnea justo despus de la definicin en la Hoja de Estilo de la capa
#contenido. Guarda la Hoja de Estilo, haz vista previa de la plantilla.html y vemos los
resultados por si queremos variar alguna de esas dimensiones.

(Margen entre men lateral y textos principales)

Vaya... los mrgenes no estn mal del todo, pero vemos que los dos primeros prrafos
no parece que hayan tomado el margen izquierdo para separarse del men principal. Esto
es por que se cuenta el margen desde la parte izquierda de la capa #contenido, mientras
que en esos dos prrafos debera contarse desde la derecha del men, verdad? Vamos a
ver como solucionamos esto.

Para eso tendramos que poner un margen por la derecha para el men, y como
pertenece a la capa #menu tocara retocar esa lnea en estilo-general.css aadindole
esto ltimo que he subrayado:

#menu {background-color:yellow; width:150px; float:left; text-align:left; margin-right:10px;}

Ahora si que lo hemos conseguido, mira el resultado del ejemplo.

La indentacin de los prrafos

Eso si que es una palabra rara. Imagino que proviene de la propiedad "text-indent" que
se aplica para establecer un margen a la izquierda solamente de la primera lnea de cada
prrafo, de modo que sta queda ms metida a la derecha que las dems lneas.

Se aplica colocando "text-indent: XXpx" entre los corchetes del elemento al que se lo
queremos aplicar.

Vamos a aplicarlo a todos los prrafos de la parte principal, que eso queda muy bien.
Un indentado de 15px creo que es suficiente. Como va a ser una propiedad para los
prrafos (p) de dentro de la capa #contenido, incluimos el text-indent en esta lnea (lo
subrayo para que lo veas claro):

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

 Ahora guarda la hoja estilo-general.css y haz vista previa de la plantilla para ver como
queda. Te gusta? Esto de indentar solo tiene sentido cuando los textos estn justificados
o alineados a la izquierda. Cuando estn centrados no se suele usar, pues no hace falta
ese efecto.

Cmo llevamos los cdigos?

Para estar seguros de que estamos haciendo el ejemplo segn las lecciones aprovecho
ahora para dejaros los cdigos de la plantilla.html y de la hoja estilo-general.css segn
han quedado hasta ahora (en realidad lo hago para llenar hueco, que esta pgina se me
haba quedado muy cortita, je je je je)

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

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

Un poco ms de estilos css

A estas alturas y aunque no lo creas, pocas capas ms tendremos que crear para tener
completa nuestra pgina web. El resto ser contenido vuestro, propio y ya no tendremos
que tocar mucho ms la plantilla.html aunque realmente, poco la hemos tocado, verdad?
El resto del trabajo lo tendremos con la hoja de estilo, que se encargar de darle
vistosidad al Html. Repito de nuevo que lo bueno de las Hojas de Estilo es que si un da te
cansas del aspecto de la web, con solo cambiar un poco la Hoja de Estilos tendrs una
web con el mismo contenido (pues no tocaremos el html) pero con una apariencia
totalmente distinta. Para eso claro, hay que saberse los trucos del CSS y por eso vamos a
profundizar t y yo ahora con tres propiedades muy importantes que si no quedan claras
nos van a dar muchos dolores de cabeza. Estas propiedades son margin, padding y border.

Border

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

Padding

El padding lo usaremos para definir una distancia de separacin entre el borde y el

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

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

El trio Margin-Padding-Border

En la imagen de abajo puedes ver mejor a qu zona corresponde cada una de estas
propiedades.

Puedes ver el borde, que le he puesto color azul para distinguirlo. Entre el borde y el
contenido est la separacin creada por el padding y entre el borde y el exterior el
espaciado dejado por el margin.

As, si ponemos dos imgenes una junto a la otra y queremos separarlas, usaremos por
ejemplo el margin. Lo mismo para los prrafos etc. Si quisieramos separar un elemento A
de los que tiene alrededor, le pondriamos a A un margin.

Si tenemos un elemento encerrado en una capa y queremos que su contenido se separe

un poco de su extremo (de su borde) le hariamos un padding.

El ejemplo del castillo de paladines rodeados de marginados

Hace mucho tiempo exista un castillo donde un montn de paladines (soldados de la

edad media) se refugiaban de seres marginales, los marginados los llamaban. El rey
orden contruir unas buenas barreras (border) para protegerse. Adems, clav un montn
de estacas afiladas por fuera de los muros para evitar que los marginales se acercaran
demasiado (margin) y para proteger a los paladines orden que ninguno de ellos se
acercara al muro a menos de dos metros (padding: 2 metros) para evitar que los
paladines sufieran alguna herida si algn marginal atravesara alguna lanza por alguna
ventana del muro. De este modo, los marginales no podian acercarse mucho al castillo
(gracias al margin) y a los paladines se les prohibi acercarse al muro (gracias al
padding).

Es un cuento muy tonto, je je je, pero quizs te ayude a recordar para qu es cada
uno.
 En la pgina siguiente lo entenders mejor al aplicrselo a nuestro men lateral, ya
vers.

Separar un poco el men

Segn lo explicado en la pgina de antes, para conseguir separar un poco el men

lateral (toda la zona amarilla) del borde de la parte naranja de la pgina, es decir, para
meterlo un poco ms dentro de la parte central, podramos colocar un margin o un
padding. Cul de los dos?

Como lo que queremos es separar la capa #menu (la amarilla) de los elementos
exteriores, tenemos que aplicar margin. Si aplicramos padding a la capa #menu el
efecto sera crear una separacin entre el borde amarillo y los enlaces de dentro, no?

Hace un par de pginas pusimos a la capa #menu este margen: margin-right:10px, te

acuerdas? Era para dejar una separacin entre el men y los textos de la parte naranja
que estn a su derecha. Ahora, como hemos visto que tambin sera bueno separarlo por
la izquierda y por arriba (y ya puestos, por debajo tambin), ampliamos la definicin y la
ponemos de este modo:

# menu {................... margin:10px 10px 10px 10px}

Esto es lo mismo que poner solo margin: 10px, pero mejor lo dejamos del otro modo as
podemos poner margenes diferentes en los cuatro lados si vemos que el mismo para todos
los lados no nos gusta.

Colocando ese margin en estilo-general.css obtendramos esta apariencia.

Realmente parece que por debajo es mucho y por arriba y la izquierda me he pasao un
poco. Vamos a probarlo con estos otros valores (recuerda el orden de las dimensiones del
margin, arriba-derecha-abajo-izquierda)

#menu {................... margin:3px 10px 3px 3px}

Y haciendo de nuevo vista previa sobre plantilla.html vemos que queda mucho mejor,
dnde va a parar, je je je.

An no hemos aplicado ningn borde a ninguna capa. Esto es por que cada navegador
interpreta el borde de un modo distinto y vamos a evitarlo todo lo posible. En su lugar
usaremos imagenes de fondo con el borde ya dibujado y en los casos en los que no sea
posible ya nos buscaremos las maas para poder usar bordes sin problemas, pero eso ser
ms adelante.

Te toca currrtelo por tu cuenta

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

Yo por mi parte intentar ponerte algunos ejemplos en cuanto pueda para esclarecer
estos conceptos, oki? Pero recuerda, no lo pruebes en los archivos de este ejemplo para
no perdernos en las lecciones, hazlo en un archivo aparte.

Mientras tanto, seguimos con las lecciones, vale?

Insertar ttulos con h1, h2, etc.

Igual que para indicar que una frase deba tener aspecto de prrafo con las etiquetas
<p> y </p>, existen otras etiquetas para indicar que se trata de un ttulo y estas
etiquetas se escriben con una "h" seguida de un nmero que puede ir del 1 al 6. (Me
refiero a ttulos de texto, no al title de la pgina como vimos al principio de estas
lecciones).

La forma correcta para un ttulo sera esta:

<h1>Este es un ttulo de importancia Uno</h1>

Fjate como de nuevo, tiene una etiqueta de apertura al inicio y otra de cierre al final
con la contrabarra.

En lugar de un h1 podemos usar un h2, un h3 y as hasta h6. Los h1 son ttulos

principales y el resto van siendo de menos importancia y por lo tanto aparecen con letra
ms pequea cada vez. Se usan por tanto los h1 para ttulos principales y los h2 para
subtitulos. Normalmente no se usan los dems pues no se suele abusar de sub sub
subttulos, je je.

Si aplicamos esas etiquetas sin ms obtendremos una simple frase pero en negrita y con
un tamao mayor de lo normal para que se vea destacado. Si no nos gusta cmo queda
por defecto, podemos siempre cambiar su aspecto indicando las propiedades que nos de
la gana en la Hoja de Estilo, que para eso est.

A mi me gustan por ejemplo titulos principales (h1) en negrita, con un tamao

ligeramente mayor que el resto de los textos y adems subrayados y de otro color distinto
al texto normal, que suele ser negro. Para los subttulos (h2) me gusta en cambio un
tamao algo menor que el h1 y adems sin subrayar, pero tambin del color del h1 y en
negrita. As que, como las lecciones las hago yo, vamos a definir en la hoja de estilos
este aspecto para esos dos elementos a mi gusto, je je je. Ah, tambien los quiero
centrados los dos!
 Abrimos el Html-Kit, abrimos el archivo estilo-general.css y definimos estos dos ttulos
del siguiente modo:

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

h2 {font-size:1.1em; color:blue; font-weight:bold; text-decoration:none; text-align:center;}

Guardamos ahora la Hoja de Estilo y abrimos la plantilla.html

Si hacemos vista previa a la plantilla no veremos ningn cambio. Por qu crees que
puede ser? Pinsalo. Pues claro, porque como no hemos dicho a ningn elemento de la
plantilla que es un ttulo, no hay nada que mostrar con estos cambios en la Hoja de
Estilo. Lgico no? Vamos ahora a crear un ttulo (h1) y un subttulo (h2).

El ttulo est claro, va a ser el texto donde pone "Esta ser la zona principal de la
web". Una frase no debera ser a la vez prrafo y ttulo, o una cosa o la otra, de modo
que le cambiamos las etiquetas a esa frase, eliminamos la "p" y ponemos un "h1", tanto al
principio como al final. No te olvides de la contrabarra en la etiqueta de cierre, que te
veo... Veremos esto en la vista previa:

El subttulo, de etiqueta h2, lo vamos a poner en el texto "Y este es el tercer prrafo"
(en realidad ahora es el segundo, pues el pimero lo hemos convertido en un ttulo h1,
pero bueno). Para convertir ese trozo en subttulo, ya sabes que no debe estar entre las
etiquetas <p> y </p>, de modo que lo encerramos entre <h2> y </h2> y pasamos la
etiqueta <p> de ese prrafo despus de ese trozo de texto, quedando as:

Los ttulos aparecen como elementos de una sola lnea, o mejor dicho, no dejan que
otra cosa como por ejemplo un prrafo, continue a su derecha, mandndolo
directamente a la lnea siguiente. Lo ves en la vista previa?
 Aunque en el cdigo Html pongamos un prrafo seguido de un ttulo (en la misma lnea
de cdigo), el prrafo siempre aparecer debajo, en la siguiente lnea, pues para eso es
un ttulo, no? Pues ya est. Ya sabemos ms cosas. Si te gustan los ttulos alineados a la
izquierda ya sabes como cambiar la Hoja de Estilo para conseguirlo (text-align: left). Lo
mismo para el resto de propiedades.

La importancia de los ttulos en el posicionamiento de una

pgina web
Y t pensars... bueno, si puedo definir el estilo que me da la gana.. no podra crear
una clase de prrafo (p.titulo), definirle las propiedades de centrado, tamao mayor,
color y subrayado y usar ese estilo en lugar de las etiquetas h1?

Pues si, si que puedes, pero est muy bien usar las etiquetas de ttulos por lo siguiente.
Cuando una persona hace una bsqueda con Google por ejemplo y escribe "como crear
pginas web" Google le muestra una serie de pginas (espero que tambin la ma, je je
je). Pero cmo sabe Google qu pginas ha de mostrar? Bien fcil. Google y el resto de
buscadores se pasean continuamente por la red leyendo las palabras de cada pgina web.
Si en mi web ven que aparecen las palabras "como", "crear", "pginas" y "web", lo
memorizan y mostraran mi web en sus listas cuando alguien haga una bsqueda con
alguna de esas palabras.

Y porqu unas pginas aparecen ms arriba y otras ms abajo en esas listas? Los
motivos son muchos, pero uno de ellos (hay muchos ms motivos) es que algunas de esas
palabras aparezcan destacadas y destacadas es, o bien que aparezcan en negrita o bien
que aparezcan dentro de un ttulo tipo h1, h2 etc. Por eso es mejor hacer los titulos
usando h1, pues si lo hacemos como prrafos los buscadores nunca sabrn que se trata de
un ttulo y no tomarn esa palabra tan en cuenta (tambin la tienen en cuenta, pero
menos).

El resto de motivos los iremos viendo en lecciones sucesivas. Eso si, no por lo dicho
antes vamos a poner toooodos los textos dentro de un ttulo, pues los buscadores pueden
pensar (con razn) que estamos haciendo trampas y en lugar de posicionarnos mejor en
sus listas, apareceramos los ltimos. No se debe abusar.
 Otra cosa importante. Ya que sabemos la importancia de las palabras de los ttulos, es
bueno incluir en estos aquellas palabras por las que queremos ser encontrados. Es por eso
que en los ttulos de CCTW se intenta colocar estas palabras clave. En esta seccin por
ejemplo, he aprovechado el ttulo de arriba para colocar palabras que me interesan,
como "titulos" (alguien puede estar buscando cmo insertar ttulos en una web y me
interesa que aparezca esta pgina en ese caso), tambien he colocado la palabra
"posicionamiento" (me interesa que quien busque por esa palabra encuentre mi web) y
por supuesto algo que no puede faltar en mi caso, las palabras "pgina web". Lo pillas?

Repito, no es cuestin de saturar con ttulos, es suficiente con aprovecharlos muy bien,
y saber qu palabras poner sin que el texto del ttulo pierda su sentido, claro. Ha de
tener que ver a la vez con el texto que hay debajo de l, sino, ser muy bueno para el
buscador pero los visitantes pensarian que se te ha ido la cabeza... je je je.

By Adrin Albarracn.