Aprender a Crear una Página Web Paso a Paso

En estas páginas vas a aprender a crear una página web, a escoger un servidor de pago o gratuito, a
subirla a internet, a mejorarla y actualizarla a tu gusto e incluso a sacarle un buen provecho económico
si lo deseas. No hace falta que tengas conocimientos de nada, simplemente con leer estas lecciones lo
vas a lograr, verás. El resultado final será una web igual que esta, con su foro, un top, un directorio de
enlaces, optimizada para aparecer en buenas posiciones en los buscadores, con un código html y css
válidos, etc, etc.
Además, te lo explicamos todo tan bien que sabrás como personalizar tu página web a tu antojo. Una
vez termines el tutorial podrás cambiar los colores, la estructura, los menús, etc, etc para adaptarla a
tus gustos. Tras aprender todos los trucos podrás hacer cualquier otro proyecto desde cero con lo que
vas a aprender aquí.

Qué vamos a necesitar?
En principio solo conexión a internet y seguir estas instrucciones. El resto de recursos necesarios los
conseguiremos de la red, como por ejemplo el software (gratuito) que vamos a seguir para las lecciones,
el espacio web (gratuito también) para alojar tu proyecto, el software para el foro, para el directorio y
para el topsites (de nuevo, gratis), etc, etc. Si tienes acceso a internet tendrás todo lo necesario. Bueno
y un poco de tiempo y paciencia, claro.

Y si no entendemos algo?
En ese caso dispones del Foro CCTW donde puedes escribir todas tus dudas. Las resolvemos todas, de
modo que... si no tienes página web será solo porque no quieres. No hay escusa! Para leer el foro no es
necesario registrarse, para escribir tus dudas en él sí (es necesario para poder evitar un poco el Spam, lo
siento).

Bien, cómo seguimos las lecciones de esta web?
Arriba a la izquierda verás un menú horizontal con fondo naranja. Desde allí puedes acceder a las
distintas lecciones de este tutorial. Al hacer clic en cada uno aparece un menú a la izquierda donde
accederás a las distintas partes de cada lección. Además, pulsando sobre las flechas "Siguiente" y
"Anterior" de la parte baja de cada página puedes ir avanzando las lecciones por orden. Todo claro? Pues
adelante, basta con pulsar la flecha derecha de aquí a bajo.
Recuerda, lee con atención las lecciones, sigue al pie de la letra cada paso y consulta todas tus dudas
en el foro CCTW. Paciencia y... Suerte!!

De dónde descargar Html-Kit
El Html-Kit es un editor de html y css (entre otros) gratuito. Esto significa que no has de pagar un duro
por él, aunque tienes la opción de pagar para tener acceso a un sin fín de herramientas extra. Por lo
pronto, con la versión gratuita nos va a sobrar.
Para conseguirlo, qué mejor que descargarlo desde la pgina oficial, no? Así estaremos seguros de
obtener la última versión. La página es www.htmlkit.com. Ve haciendo clic y se abrirá en una ventana
aparte, para que puedas seguir leyendo estas instrucciones.
Al acceder a la web de Html-Kit podrás ver en la parte alta un cartelito donde pone Download. Haz
clic allí y aparece otra ventana. Busca un cuadrado similar a este:

En el hueco de arriba te preguntan donde oiste hablar de Html-Kit. Puedes poner lo que quieras, la
dirección de esta web, un buscador, etc, etc. En la de abajo puedes escribir tu email si deseas recibir
información de actualizaciones de este software y cosas así. No son obligatorios ninguno, pero ya que es
gratuito no está al menos contestarles a la primera pregunta, no?
A continuación, pulsad en la parte de abajo de ese cuadro, donde poe Download HTML-Kit para
preceder a la descarga del archivo. Son unas 2.8 megas, por lo que será algo rápido. Al hacer clic se
abre una ventana preguntado si lo deseas guardar o ejecutar directamente. Escoge Guardar y así lo
tendrás a mano en caso de que te haga falta:

Tras terminar de bajarlo aparece otra ventana. Escoge Ejecutar para empezar su instalación:

Quizás te aparezca un mensaje como este:

Puedes aceptar y Ejecutar sin problemas. Este programa es seguro. En seguida, el programa empieza
a instalarse en tu PC.

Cómo Instalar el Html-Kit
Comienza mostando una ventana de bienvenida y preguntándote si quieres seguir o no... parece que
aún no ha entendido que "si".. je je:

Como va siendo habitual, ahora aceptamos los las condiciones, cómo no, verdad?:

Siguiente paso? Inicarle en que carpeta de nuestro disco duro lo queremos instalar. La opción por
defecto es perfectamente válida:

Seguidamente, nos pregunta qué opciones deseamos instalar. Como no hay quien nos pare, nosotros
escogemos todas (que chulos somos,eh?). Seguramente no las usemos, pero tampoco es cuestión de
perderse algo, así que... tó pa dentro.

Si aún no te has cansado de aceptar y aceptar, aquí tienes otra ventana que te pregunta cuál quieres
que sea el nombre del programa en tu barra de programas... aceptamos de nuevo...

Bueno... ahora nos muestra las opciones que se van a instalar. Que majo... pero un poco pesado..

Pulsamos Install y... allá va eso! Se instala en un segundo y claro, para no perder costumbre, nos dice
que ya está todo listo. Te recomiendo no dejar marcada la casilla marcada con un circulo rojo por mí.
Eso es para descargarte más cosas, pero por el momento vamos sobrados. Quita la marca (mira la foto
de abajo) y seguimos, oki?

Hacer un acceso directo al Html-Kit en tu escritorio
Si no igual te cuesta trabajo encontrarlo luego... Basta con ir a Inicio > Todos los programas > Html Kit
y en el icono de la ventana que se despliega, hacer clic con el botón derecho del ratón sobre él que
pone Html Kit y escoger "Crear Acceso Directo". En ese momento si vuelves a abrir el desplegable verás
dos iconos de Html Kit. En el recien creado aparece un "2" al lado. Arrástralo hasta tu escritorio y listo,
ya lo tienes a mano.

Arrancando el Html-Kit
En la página anterior nos quedamos en esta ventana:

Aceptamos de nuevo presionando "Finish" y vemos, cómo no, una preguntita....

nos pregunta si queremos verificar si hay alguna versión más moderna del programa. que no es solo una. arghhh. pero que siempre puedes cambiar estas cosas más tarde desde Edit > Preferencias.. No contento con la contestación.. Adivina que ponemos? .. para que no se diga. pregunta si quieres descargarte enlaces de ayuda e información actualizada. como ves en la ventana de aqui abajo. A esto le diremos que no. Quieres que Html-Kit detecte los navegadores que tienes para usar la vista previa con ellos? Fíjate. Dice arriba que las preguntas siguientes (vaya... Por el momento le diremos que no y al hacerlo. a esta le vamo a decir que sí. pues ya nos estamos cansando de tanta preguntita y queremos ver el programa de una vez... Ahora. claro.) son para ayudarte a configurar el programa.. aparece otra pregunta. Esta pregunta de arriba es por si quieres que los archivos HTML se abran siempre por defecto con este programa...

donde pone "Doný display this screen again" o "No mostrar esta ventana de nuevo". mi paciencia tiene un límite. Lo siento pero no. je je je. Bueno. Escogemos Create a new File y antes de pulsar OK desactivamos la casilla de abajo del todo. TACHAAANNN!! Por fin! El programa se deja ver! je je je. Y finalmente (espero) nos invita a dar una vuelta por el programa con el tutorial. . etc. etc. aparece una ventana preguntando qué tipo de archivo queremos abrir para empezar. Ahora ya si que si. Como opciones tenemos: Create a new file (Crear un nuevo archivo) Create a new file based on a template (Crear un archivo basado en una plantilla) etc.

Hazlo en la carpeta "default" que se encuentra dentro de una de las carpetas donde has instalado el programa: Una vez guardado el archivo (llamado irTranslationSpanish. al menos por el momento. Para cualquier duda al respecto usa el Foro CCTW. Así que para no liarnos mucho con tanto menú vamos a simplificar todo esto.Traducir el Html-Kit al español Ahora que tenemos el Html-Kit instalado vamos a traducirlo al castellano para enterderlo mejor.. El archivo necesario lo puedes encontrar en: http://www. La próxima vez que abras el Html-Kit estará en Castellano gran parte del menú. Trataremos de desactivar todo aquello que no vayamos a usar e iremos activandolo conforme . Si te descargas ese archivo y no logras descomprimirlo haciendo doble cllic sobre él.zip) descomprime su contenido en esa misma carpeta y listo. quizás sea porque no tienes ningún programa descompresor instalado.com/html-kit/download/plugin/irtranslationspanish/ Al hacer clic allí se abre esta ventana de Windows preguntandote donde guardar el archivo. no todo. pero aún así tiene cantidad de opciones que no vamos a necesitar. instalarlo y poder así descomprimir tanto este como los que te bajes en el futuro.html-kit. pero la gran mayoria. Puedes bajarte el winrar. Simplifica el Html-Kit.. Hazlo fácil! El Html-Kit es un programa sencillo. Para ello es suficiente bajar un archivo de la página web oficial de Html-Kit y descomprimirlo en una carpeta de nuestro disco duro.

nos haga falta. Así será todo más claro. Para empezar haz clic en la barra de herramientas. cierralo y lo vuelves a abrir). de modo que marcamos la casilla de la parte de abajo de esa ventana para que no vuelva a aparecer: Tras desactivar esa opción y pulsar OK vemos de nuevo el programa con una página nueva. Nada más abrirlo nos sale la ventana donde nos pregunta qué tipo de archivo queremos crear. tal que así: Empecemos a desactivar cosas. donde pone Ver y vamos a desactivar una a una todas las opciones que te marco con un circulo rojo en la siguiente imagen: . oki? Para empezar. Esto es lo primero que nos sobre. abre tu Html-Kit (si lo tienes abierto.

pero como verás. no? Quedaría así: Mucho mejor. de este modo la superficie de trabajo que nos queda es mucho más amplia y clara. Primer contacto con el código HTML? . Todas ellas las puedes activar cuando quieras haciendo lo mismo de nuevo.

Firefox.txt se guardaría con extensión . La estructura de una página web en HTML Dentro de cualquier página web hay cosas que se ven (o que se escuchan) y cosas que no. Como puedes ver. verdad? Que lince. la cabecera llamada HEAD y el cuerpo llamado BODY se colocan y escriben así en Html: <html> <head> </head> <body> </body> </html> En Html. Las cosas que no se ven se colocan dentro del código HTML en una zona llamada cabecera (Head en inglés) y lo que se muestra se pone en lo que se llama cuerpo (o Body en inglés). que inteligencia la tuya. las imágenes. je je. siempre que escriba código HTML lo haré de este modo. por lo que seguimos teniendo una página web vacia. El título se define así (como ves. La segunda </html> indica que el código de la página web a terminado. su descripción. La primera palabra <html> indica que ahí empieza el código de la web. Al ser tan solo eso. Mozilla. se indica que va a empezar la cabecera con la palabra <head> y termina con la misma palabra pero colocandole la contrabarra. Pues bien. que comienza con <body> y termina con </body>. Este título realmente no se ve en la web. Pues igual que antes hemos escrito en código donde empieza la página y donde termina. sonidos. tanto la cabecera como el cuerpo no contienen nada dentro. existe una palabra para indicar que va a comenzar el título y otra para indicar cuando termina. pero una página web. El código html de una página web Todas las páginas web empiezan y terminan con el mismo código y es el siguiente: <html> </html> En adelante.Una página web no es más que un puñado de letras y números que son interpretados por los navegadores mostrando lo que ves por internet. dentro de la cabecera o head): <html> <head> <title>Este es el título de mi web y puedo escribir lo que quiera! </title> </head> . etc son tipos de navegadores) por lo que resulta importante aprender a definirlo. Antes hemos dicho que en la cabecera se colocaban las cosas que no se mostraban en la web. Definir el título de una página web Una de las cosas que se pueden definir dentro de la cabecera o head es el título de la página. podriamos usar por ejemplo el Block de Notas de Windows para crear una página web completa.html o . como el título. pero en lugar de hacerlo con extensión . de color azul y con fondo gris para que lo distingais. pues nos va a facilitar algunas cosas que no nos hace el Notepad y que iremos viendo a su debido tiempo. letras y números. Tan solo hay que saber qué letras y números escribir y luego guardar el archivo. pero si en la barra azul de la parte alta del navegador (Explorer. etc. Por otro lado lo que no se ve son sus características.htm (son iguales). el Html-Kit. si eso lo escribimos en un archivo y lo guardamos con extensión . Nosotros vamos a usar en estas lecciones otro programa distinto al Notepad o Block de Notas. Se distinguen por la contrabarra / que siempre indica que algo ha terminado. Más adelante veremos por qué es tan importante. Lo mismo podemos decir del cuerpo.html será una página web. Las cosas que se ven son los textos. Vacia si. </head> tal y como hemos visto que pasaba para cerrar </html>. y otra serie de cosas que veremos más adelante.htm o . Como ya estarás sospechando.

no? Si guardaramos esto en un archivo con extensión . Las cosas que se ven son los textos. Como puedes ver. podriamos usar por ejemplo el Block de Notas de Windows para crear una página web completa. Primer contacto con el código HTML? Una página web no es más que un puñado de letras y números que son interpretados por los navegadores mostrando lo que ves por internet. Por el momento. ya sabes crear páginas en blanco. Ahora es una buena oportunidad para empezar a saber qué es ese código que aparece en la pantalla del Html-Kit. tanto la cabecera como el cuerpo no contienen nada dentro. pero con un título en la parte superior del navegador como el que hemos escrito. <body> </body> </html> Como siempre. es decir. do para tí. </head> tal y como hemos visto que pasaba para cerrar </html>. Todo un logro. Pues bien. Si no sabes. sonidos. Tan solo hay que saber qué letras y números escribir y luego guardar el archivo. por lo que seguimos teniendo una página web vacia. La estructura de una página web en HTML Dentro de cualquier página web hay cosas que se ven (o que se escuchan) y cosas que no. y otra serie de cosas que veremos más adelante.html o . pero una página web. su descripción. como el título. siempre que escriba código HTML lo haré de este modo. etc.html será una página web. Lo mismo podemos decir del cuerpo. . de color azul y con fondo gris para que lo distingais.htm qué veriamos? Una ventana del navegador completamente en blanco. verdad? je je je.html o . empieza por la palabra <title> y termina con la misma pero con la contrabarra delante. El código html de una página web Todas las páginas web empiezan y terminan con el mismo código y es el siguiente: <html> </html> En adelante. pero en lugar de hacerlo con extensión . con </title>. verás como coincide exáctamente con el mostrado antes.htm (son iguales). pues nos va a facilitar algunas cosas que no nos hace el Notepad y que iremos viendo a su debido tiempo. Si tras hacer clic en ese enlace y abrirse la página del ejemplo miras el código de esa página web. Mira un ejemplo haciendo clic aquí. si eso lo escribimos en un archivo y lo guardamos con extensión . las imágenes. el Html-Kit. la cabecera llamada HEAD y el cuerpo llamado BODY se colocan y escriben así en Html: <html> <head> </head> <body> </body> </html> En Html. que comienza con <body> y termina con </body>. Fácil. La segunda </html> indica que el código de la página web a terminado. se indica que va a empezar la cabecera con la palabra <head> y termina con la misma palabra pero colocandole la contrabarra. Pues igual que antes hemos escrito en código donde empieza la página y donde termina.htm o . Vacia si. Las cosas que no se ven se colocan dentro del código HTML en una zona llamada cabecera (Head en inglés) y lo que se muestra se pone en lo que se llama cuerpo (o Body en inglés). Por otro lado lo que no se ve son sus características. letras y números. La primera palabra <html> indica que ahí empieza el código de la web. Se distinguen por la contrabarra / que siempre indica que algo ha terminado. Vamos a verlo en la págima siguiente.txt se guardaría con extensión . Al ser tan solo eso. Nosotros vamos a usar en estas lecciones otro programa distinto al Notepad o Block de Notas. te enseño como mirar el código html de una página web en la página siguiente.

aprenderás mucho cotilleando el código Html de otras páginas. estas lecciones están explicadas para quien no tiene ni idea. dentro de la cabecera o head): <html> <head> <title>Este es el título de mi web y puedo escribir lo que quiera! </title> </head> <body> </body> </html> Como siempre. pronto verás que resulta muy util. se toma la opción Código Fuente.. no? Si guardaramos esto en un archivo con extensión . Si tienes tus dudas. Cómo ver el código Html de cualquier página web? Como verás. mejor lee estas notas. Fácil. con </title>. Aunque te parezca una chorrada mira el código Html de una página web. Como ya estarás sospechando. La forma más sencilla de ver el código Html de una página web es haciendo clic en las opciones que aparecen normalmente en la barra de herramientas superior de cualquier navegador. tanto para corregir errores en tus páginas como para ver cómo narices una web que te ha gustado a podido hacer alguna cosa.. etc son tipos de navegadores) por lo que resulta importante aprender a definirlo. La opción concreta dependerá de cuál sea el navegador que estés usando. Antes hemos dicho que en la cabecera se colocaban las cosas que no se mostraban en la web. Si no sabes. El curso te va a costar lo mismo de modo que. pero si en la barra azul de la parte alta del navegador (Explorer. ya sabes crear páginas en blanco. El título se define así (como ves. pero con un título en la parte superior del navegador como el que hemos escrito. Firefox. existe una palabra para indicar que va a comenzar el título y otra para indicar cuando termina. es decir. Te enseño una imagen para que lo tengas más claro: . je je. Cuando pongo esta flechita ">" es para indicar que primero se hace clic en la opción Ver y al abrirse el desplegable con otras opciones. que inteligencia la tuya. aprovechate! je je. Si tras hacer clic en ese enlace y abrirse la página del ejemplo miras el código de esa página web. Una vez que domines un poco más el diseño de páginas web. Todo un logro. Este título realmente no se ve en la web.htm qué veriamos? Una ventana del navegador completamente en blanco. verás como coincide exáctamente con el mostrado antes. Si sabes ver el código Html de una página web puedes pasar sin miedo a la página siguiente. Mozilla. Si usas el Internet Explorer puedes ver el código haciendo clic en Ver > Código Fuente. Por el momento.Definir el título de una página web Una de las cosas que se pueden definir dentro de la cabecera o head es el título de la página.html o . verdad? je je je. te enseño como mirar el código html de una página web en la página siguiente. verdad? Que lince. Mira un ejemplo haciendo clic aquí. empieza por la palabra <title> y termina con la misma pero con la contrabarra delante. Más adelante veremos por qué es tan importante.

Como ves. la opción está en Ver > Código Fuente de la Página o teclas Control + U. de modo que vamos a crear una carpeta allí llamada "mis-paginas-web". Antes de seguir aprendiendo y creando cosillas con el Html vamos a ordenar un poco nuestros archivos para no perdernos más adelante. La carpeta de nuestras webs Cuando tengamos lista nuestra página web tendremos que mandar todos los archivos utilizados a la red (a nuestro servidor) por lo que es necesario que todos ellos estén en una misma carpeta.. En caso contrario sería un lio tremendo saber qué tenemos que subir. Haces clic allí con el botón derecho del ratón y escoges Nuevo > Carpeta. oki? Una Carpeta para dominarlas a todas. el código Html se puede lo tienes en Ver + Código Fuente o pulsando las teclas Control + F3. El lugar más accesible es nuestro escritorio de Windows. y así compruebas el código del ejemplo. Crear esta carpeta es bien sencillo. no? . o con el ejemplo de la página anterior. Para el navegador Opera. son todos parecidos y por supuesto. A continuación le pones el nombre que os he dicho " mis-paginas-web" y pulsamos Intro. Pones el cursor de tu ratón sobre una parte de tu escritorio donde no haya ningún icono. Si en cambio estás usando el Firefox. Para ello sigue estas indicaciones paso a paso. Haz la prueba con esta misma página. el código mostrado ha de ser idéntico.. Fácil. Ya tenemos lista la carpeta.

solo sabemos crear páginas web vacias y carpetas vacias. vale? Dentro de la carpeta "web-ejemplo-cctw" crea otra carpeta más y llámala "objetos". En ella guardaremos las imágenes. Digo "en cada web" porque además de la que vamos a crear ahora. si a la vez que sigues estas lecciones quieres ir creando otra a tu bola. por el momento no tenemos nada de nada. confia en mí. pero en un par de páginas verás como cambia esto. Configurar nuestro Sitio en en Html-Kit .. Así no mezclamos cosas. Asi que dentro de esa carpeta vamos a crear otra llamada "web-ejemplo-cctw". que será donde guardemos los archivos de esta web de ejemplo que iremos creando con estas lecciones. archivos de sonidos. Dentro de esta carpeta como te digo. Así que. puedes crear otra carpeta con el nombre que quieras dentro de "mis-paginas-web". etc. tú mismo puedes seguir creando otras. Como ves. vamos a guardar todos los archivos que usemos en cada web. junto a "web-ejemplo-cctw".

. vale? Cierra el Html-Kit si lo tienes abierto y sigue estos pasos de uno en uno y hasta el final y no tendrás ningún problema. imagenes y demás elementos. llega el momento de configurar nuestro Sitio en el Html-Kit. Aparecerá en blanco con una pantalla como esta: 2. pues esa era su función. Abriendo la ventana WorkSpace Empezamos desde cero. Y qué es un Sitio? Se llama sitio a toda la web. englobar todos los archivos del sitio para no liarnos ni liar al Html-Kit.Abre el Html-Kit. donde pone Herramientas y activa la opción Workspace.Haz clic sobre la barra de herramientas. . Ahora que tenemos la carpeta lista. incluyendo todos sus páginas. 1. Coincide o ha de coincidir con la carpeta que acabamos de crear.

verdad? Y para qué sirve esto? Lo vemos ahora mismo. tienes que poner la carpeta "pagina-ejemplo-cctw" en el primer hueco (pincha en la carpeta amarilla de su derecha para encontrarla y escogerla) y en el segundo hueco pon un título cualquiera. pero podremos defendernos. Por ahora vamos a definir el Sitio Local de la siguiente forma: 1. 2.Hacemos clic en la barra de herramientas. En el futuro.. puedes cerra esa ventana pulsando sobre la x de su parte superior derecha y puedes volver a verla siguiendo lo explicado en el paso 2. Sitio Local y Sitio Virtual Dentro de esa ventana llamada WorkSpace vamos a definir dos sitios. cuando te haga falta la abres..En la ventana que se abre (como ves. Este segundo lo veremos más adelante. Cuando te moleste la cierras. "web-ejemplo-cctw-local" y pulsa OK: . Fácil. 3. Uno que se llama Sitio Local que se corresponde con la carpeta que tenemos en el ordenador llamada antes "ejemplo-web-cctw" y otro sitio que podemos llamar Sitio Virtual. la traducción al español no es completa. Cuando seas mayor si quieres las cotilleas pero ahora vamos a lo nuestro.. donde pone Workspace y escogemos Añadir Carpeta Local/Red. ya verás). por ejemplo.Aparece ahora una ventana donde podemos definir nuestros sitios: Vemos tres carpetas ya creadas pero en principio no les vamos a hacer ningún caso. que será el espacio en internet.

Cómo crear la primera página de la web La primera página que vamos a crear es la página principal. la opción Create File.. dentro de la sección New.. A la hora de crearla te pide una carpeta. Para crearla ponemos el cursor del ratón dentro de la ventana de Workspace. en el que podrás hacer todos los experimentos que quieras. Ahora sí que podemos ya empezar a crear nuestra página web. no? Que tal crear otro sitio para tus pruebas? Como veo que eres un poco impaciente.. por ejemplo "mis-experimentos".. .html sea cual sea el servidor donde la alojemos. Que emocionante. cada vez que queramos trabajar sobre archivos de esta página web. La página principal es la que se muestra por defecto al visitante.Tras pulsar OK verás como aparece este nuevo sitio en la ventana de Workspace: A partir de ahora. Se abre entonces una ventana en la que tenemos que escoger.. tendremos que apañarnoslas para crearla dentro de ese sitio y no en los otros que aparecen en la ventana de Workspace... justo encima del sitio " web-ejemplo- cctw" y pulsamos el botón derecho del ratón. Así podrás dejar el sitio "web-ejemplo-cctw-local" solo para lo explicado aqui y no te harás un lio mezclando lo que explicamos con tus propias pruebas. vale? Para crear esa otra carpeta local repite los pasos anteriores. y crea otra para tus cosas llamada como quieras. 3.. la primera que ve y su archivo ha de llamarse obligatoriamente index. vamos a crear una segunda carpeta o sitio local. Como esta página va a pertenecer al sitio "web-ejemplo-cctw". Puedes crear una llamada "mis-experimentos" dentro de la carpeta del escritorio llamada "mis-webs" si quieres. en lugar de abrir la carpeta que hemos creado en lecciones anteriores (web-ejemplo-cctw). podemos acceder a ellos directamente desde acá.

. con la extensión y todo y pulsamos en Ok: ... aparece esta otra ventana: Haz clic sobre la lengüeta en la que pone "General"... así que lo escribimos en esa ventana..html pues será la página principal.. hay que estar más atento! je je. verdad? que pesao es. En seguida aparece otra ventana preguntando (este programa no para de preguntar. Al hacer clic sobre Create File. je je) preguntandonos el nombre que queremos que tenga ese archivo. Cuál debe ser? Cómo? Que no lo sabes? Ejem. Se tiene que llamar index.. escoge el tipo de archivo "Blank HTML Page" (página html en blanco) y pulsa Ok.

Haz clic allí. te acordarás de que las cosas que se ven en la web se colocan dentro del cuerpo o Body. Empezaremos abriendo el Html-Kit. Para verlo solo tienes que hacer clic en el signo "+" que hay a la izquierda del sitio "web-ejemplo-cctw"m en la ventana Workspace.html o página principal. . pero el archivo index. Si te vas a MiPc y abres la carpeta verás como además de la carpeta "objetos" también aparece allí el archivo index. es decir.html así que vamos a la siguiente página y comenzamos el juego! Cómo crear un párrafo en la página web Si has prestado atención a lo dicho hasta ahora. no solo te muestra el archivo index.html sino también la carpeta "objetos" que hemos creado anteriormente. Se abre entonces la ventana de ese archivo mostrando todo su código Html. hacemos clic en el signo "+" que hay a la izquierda del sitio "web-ejemplo-cctw" para que se muetre su contenido y después hacemos doble clic en el archivo index.html Ya estamos listos para escribir contenidos el la página principal. si vamos a escribir un párrafo tendremos que hacerlo allí. Tras pulsar Ok no vemos nada nuevo. entre las etiquetas <body> y </body> de modo que.html a sido creado. Una vez abierto nos vamos a la ventana Workspace. Como ves. index.

la dejaremos y listo. Como verás. las normas de Html que está siguiento. Muy pronto estará lista!" basta con escribir esa frase encerrada entre esas etiquetas.html podemos cerrar la ventana Workspace para tener más sitio visible. para cerrarse al final con </html> que como toda etiqueta de cierre lleva su contrabarra "/". Mi primer párrafo Al igual que un título se escribe entre <title> y </title>. No tiene mayor importancia. Esa línea describe el tipo de página que es. el código de esta página coincide más o menos con el que te expliqué en las primeras lecciones. un párrafo hay que escribirlo entre las etiquetas <p> y </p>. entre <title> y </title>. para escribir por ejemplo "Bienvenidos a mi página web. entre <body> y </body>. Quedaría así: . Bastará con escribir el título que quedamos en lugar de donde pone "Page title". quedando así: Esta es la vista llamada "Editor de Html". Como por ahora solo vamos a trabajar sobre el index. Vamos a ponerle todos "Pagina Principal del Ejemplo CCTW". Se ve también esa primera línea de la que no te he hablado aún. Así. Ya sabes. De modo que hacemos clic en la x de Workspace para cerrarla y después maximizamos la ventana del index para ocupar toda la ventana del Html-Kit. verdad? Empieza por <html> seguido de la cabecera y después el cuerpo o Body. Cambiando el título Vamos a cambiarle el título a esta index. dentro del cuerpo de la página es decir.

no? Basta con inlcuir ese segundo párrafo debajo del anterior y encerrarlo entre las etiquetas <p> y </p>. No vamos a parar hasta que aprendas a crear páginas como ComoCrearTuWeb. junto a donde pone "Editor". vamos a poner este segundo párrafo: "Página creada gracias a CCTW". verás. sabías hacer esto antes? Pues pronto aprenderás mucho más. no va a ser dificil. Para ver cuales son los resultados el Html-Kit dispone de otra vista llamada "Preview" o vista previa.. Haz clic ahí y veamos como queda nuestro ejemplo por el momento. junto a "Preview" puedes volver a ver la vista de código Html. Haciendo clic sobre "Editor".. Claro que con la vista "Editor" no vemos lo que estamos consiguiendo. Ya sabemos algo más. A esta vista previa o preview se accede haciendo clic abajo del todo. En la vista "Editor" la página quedaría así: Esto es lo que hemos conseguido hasta el momento: ejemplo 2. . Por ejemplo. por el momento no es gran cosa pero. oki? je je. que nos muestra como quedaría la web vista por internet. Crear un segundo párrafo en la página Para crear un segundo párrafo ya imaginarás lo que hay que hacer. vale? Bueno.

como sabes. Te recomiendo que leas las instrucciones sobre rutas que tenemos en ComoCrearTuWeb.com quedando el código del enlace de este modo: <a href="http://www. La palabra que encerremos entre esas dos etiquetas será la que el visitante pueda pinchar para acceder a la página enlazada. una es desde qué palabra de nuestra web lo queremos hacer y segundo a qué página lo queremos dirigir. si la palabra fuera "palabra" (que poco original. llamada Workspace y una vez que aparezca. e irte a merendar.com Para ello cierra el Html-Kit y lo vuelves a abrir (se supone que has guardado los cambios hechos en la página de antes). Por lo tanto. El código Html de los enlaces o vínculos Como estarás sospechando. que llevas ya mucho tiempo delante del ordenador. pues de alguna manera hay que indicar a qué página queremos enviar al visitante al hacer clic allí. vale? En la misma o en otra ventana? . Para crear un enlace hay que decidir dos cosas. pulsa sobre Ver > Workspace para que aparezca la ventana de los sitios.comocreartuweb. así que vamos a aprender a crearlos. puedes cerrar la venata de Workspace para tener más hueco. no? Esto se define dentro de la etiqueta de inicio. Ya puedes cerrar el Html-Kit sin miedo a perder nada. je je je je. de este modo: <a href="ruta">palabra</a> Donde pone "ruta" hemos de poner la dirección completa del lugar a donde queremos mandar al visitante. Te evitarán muchos problemas en el futuro.Cómo guardar los cambios realizados Para guardar lo que hemos hecho hasta el momento pulsa en la barra de herramientas.html para ver su código. los enlaces empiezan con una etiqueta y terminan con otra de cierre. no?) la línea quedaría así: <a>palabra</a> Pero con esto no conseguimos nada. En ese caso ya sabes.com">CCTW</a> Te dejo una vista del Html-Kit para que lo veas más claro. Para el ejemplo vamos a crear un enlace desde la palabra "CCTW" que tenemos escrita en el segundo párrago hacia la dirección www. pondremos su ruta absoluta que es esta: http://www. Como queremos enlazar a una web externa.comocreartuweb. Cómo crear un enlace en la página web Lo importante de una página web es la posibilidad de navegar de unas páginas a otras sin más que hacer clic en los enlaces. doble clic sobre el archivo index. Ahora vuelve a abrirlo y aparecerá el Html-Kit en blanco. haz clic en el signo "+" a la izquierda de "web-ejemplo-cctw" para ver su contenido y para terminar.comocreartuweb. donde pone Archivo y escoge Salvar. La etiqueta de inicio para definir enlaces es <a> y la de cierre </a>. Tras esto.

Si no indica ninguna cosa más.css" Para crear la hoja de estilos volvamos a abrir el Html-Kit y activamos la vista de Workspace para tener a mano el sitio "web-ejemplo-cctw". Yo te recomiendo que todos los enlaces hacia páginas de tu misma web se abran en la misma ventana. sin tener en cuenta colores. y que todos los enlaces hacia páginas externas las abras en ventanas diferentes. pero si quieres que en lugar de eso se abra en una ventana distinta (por ejemplo. la posición de cierto elemento.css es obligatoria. Crear la Hoja de Estilos "estilos. Por otro lado crearemos un solo archivo donde definiremos todas las características que queremos que tenga cada elemento de cada una de las página de la web. para que no se pierda la web anterior) has de indicarselo dentro de la primera etiqueta. vamos a llamarlo siempre estilos.css . vale? La hoja de estilos css Este archivo de características se llama Hoja de Estilos y aunque podemos ponerle el nombre que queramos. Por un lado hemos de crear ese nuevo archivo y por otro lado hemos de indicar en cada una de las páginas de nuestra web que ha de leer esa Hoja de Estilos para saber cómo queremos que se presenten los elementos de la web. La idea es colocar en las páginas web solamente los contenidos. Mucha gente piensa que es algo complicado. Igual que hicimos para crear la página principal index. A veces terminamos una web que se ve perfecta en Explorer y de pronto viéndola con el Opera o con el Firefox descubrimos que está toda desordenada. Los estilos css El mayor problema que encontramos los que hacemos páginas web es el conseguir que se vea idéntica en cualquier navegador. De este modo si un día creemos por poner un caso que el tamaño de la letra es muy pequeño y queremos hacerlo más grande. La extensión. el color de fondo de una parte. Genial.. ya lo verás. anchuras ni nada de nada. Esto pasa porque no todos lo navegadores interpretan igual las cosas.. tamaños. el coloreado de los enlaces. pero como lo vamos a ir aprendiendo sobre la marcha no te va a resultar nada dificil. Para evitar esto lo mejor es usar estilos CSS.css para no liarnos. cuando el visitante haga clic en el enlace la página destino se abrira en la misma ventana. todo lo que tenga que ver con el modo de presentar las cosas de la web se queda definido en ese archivo de características. no? Lo mismo podremos hacer a la hora de cambiar el fondo de la página.html ahora vamos a hacer algo parecido para crear el archivo estilos. je je je. .. solo tenemos que indicarlo en ese archivo de características y automáticamente el tamaño de letra quedará cambiado en tooodas las páginas de nuestra web. El el peor sueño que podemos tener. Como este enlace apunta a una página externa (no forma parte de la web de ejemplo) le vamos a indicar que ha de abrirse en una ventana distinta y esto se hace añadiendo este trozo de código target="_blank" quedando por tanto el código así: Quieres ver como está quedando? Este es el aspecto del ejemplo 3. solo contenidos puros y duros.

etc). en blanco. No te preocupes si no te enteras mucho de cuáles con estas características. pues lo vamos a ver muy pronto y te va a quedar bien clarito. es decir. no? Relaccionar la Hoja de Estilos CSS con la página web Ahora que tenemos creada la Hoja de Estilos (en blanco.css" Tras pulsar Ok aparece este nuevo archivo en la lista de archivos del sitio "web-ejemplo-cctw" de la ventana Workspace.html que tiene que leer los contenidos de estilos. parece fácil adivinar que los estilos (o la llamada a la hoja de estilo) hay que indicarlos dentro de la cabecera o Head de la página no? Pues vamos allá. Se abre entonces la ventana que nos pregunta qué tipo de archivo queremos crear. Escogemos este que os enseño en la imagen de abajo: Fíjate que está en la primera pestaña.css para que sepa qué características queremos que tenga cada elemento de la página. Como los estilos no son un elemento que aparecerá en la página sino algo que indica cómo se han de mostrar los elementos (color. entre <head> y </head> es esta: <link rel="stylesheet" href="ruta/estilos. Escribimos "estilos. donde pone StyleSheet que significa Hoja de Estilo y que hemos escogido "Blank Style Sheet" que significa Hoja de Estilo en blanco.css" type="text/css" media="all"> .. La línea de código Html que tenemos que incluir en la cabecera. Al pulsar Ok nos pregunta qué nombre queremos darle al nuevo archivo. nuestra Hoja de Estilo para variar. tamaño. Hacemos clic con el botón derecho del ratón sobre la carpeta del sitio "web-ejemplo-cctw" de la ventana Workspace y escogemos New > Create File.. pero la tenemos) hay que decirle a la página web index. Esto cada vez pinta mejor.

Para indicar el color deseado. <link rel="stylesheet" href="estilos. cuando escriba códigos de CSS los pondré en color verde para distinguirlos del código Html que lo pondré de color azul.) . Si queremos cualquier otro tenemos que indicarlo.css) está todavía vacia. (No pongas lo escrito en rojo.css están en la misma carpeta. abrimos la página index. basta con escribir el nombre del archivo de la Hoja de Estilo. vamos a hacerlo en la Hoja de Estilos para evitar los problemas y aprovechar las ventajas que te he comentado en la página anterior. de paso. Explicando el color y la imagen de fondo de una página web Aunque podemos indicar un color y/o un fondo de página directamente en el código Html.css para definir las características de las página web. con estilos CSS. El código Html ha de queda entonces así. Escoge uno que te guste para el fondo y seguimos. pues si. el color de fondo de una página web es el blanco. quedando de esta forma: Si ahora nos vamos a la vista previa haciendo clic en "Preview" (en la parte de abajo del Html-Kit) verás como no hay cambio alguno.css" type="text/css" media="all"> De modo que abrimos el Html-Kit. oki? (Cómo crees que hago esto? je je je. Los colores se definen por un código muy raro. Vamos a usar una ruta relativa para indicar dónde ha de leer la página index. Color de fondo Por defecto.. abrimos el Html-Kit. pues engloba a todo "lo que se ve" de la página web. usar rutas relativas. Así. Esto es. Te dejo aquí un enlace con una lista de colores y sus códigos que te puede venir muy bien.html y escribimos esa línea de código dentro del Head.html como el archivo estilos. pero te prometo que te va a encantar el invento este cuando veas de lo que es capaz. Y cual será? Si leiste bien el apartado de las explicaciones de las rutas de los archivos de ComoCrearTuWeb se te hará más fácil entenderlo (leelo ahora si no lo has visto antes). Sigue leyendo para tenerlo más claro) Lo único que tiendrás que cambiar en algunas ocasiones de esa línea es ruta/. El elemento al que tenemos que decir que tiene que tener el color que queramos es el Body. no que tengas que escribir " ruta/" literalmente. Escribe en ella este código: body {background-color: #E6E6FA} En adelante. activamos la ventana Workspace y abrimos la Hoja de Estilos creada antes.html el archivo estilos. Esto es porque la Hoja de Estilo (estilos. vamos a prendiendo a usar el archivo estilos. Eso significa que en ese lugar tienes que escribir la ruta.css Como tanto la página index.

background-image: url(objetos/fondo. se escribe en la hoja de estilos el nombre de la etiqueta y a continuación. en la misma línea de la hoja de estilo que no se repita. Cuando la tengas. background- repeat: no-repeat } Para que el fondo se repita solo horizontalmente...png el código a insertar en la hoja de estilos sería este: body {background-color: #E6E6FA ..png) .png) } Fíjate como hemos separado la propiedad color de fondo de la propiedad imagen de fondo con un punto y coma. como formando un mosaico. si no decimos lo contrario.. vaya tela. background-image: url(objetos/fondo. que se repita solo horizontalmente. Para dar propiedades a los elementos de la web. je je. Primero vamos a escoger una imagen que nos guste.". Te parece muy raro todo esto? No te preocupes. En el caso anterior. La ruta del archivo de imagen se escribe entre los paréntesis tal y como hemos visto en el código. enlaces. tal que así: body {background-color: #E6E6FA .. background- repeat: x } Para que se repita solo verticalmente se escribe: background-repeat: y body {background-color: #E6E6FA ... pero puedes colocar cualquiera que tengas a mano. verás como el fondo ahora es del color elegido. el #E6E6FA es el código que corresponde a uno de los colores que aparecian en la tabla de colores del enlace que te puse antes. Suponiendo que le hemos puesto de nombre fondo. copiala y la pegas en la carpeta "objetos" que hemos creado lecciones atrás en tu escritorio.css. hemos escrito "body" y entre corchetes hemos definido la propiedad. todas cambiarian con solo retocar el archivo estilos. como la propiedad era para el cuerpo. background- repeat: repeat } Background-Position También puedes elegir que el fondo aparezca arriba y centrado. Si en lugar de solo el index tuvieramos 500 páginas pasaría lo mismo. background-image: url(objetos/fondo. Background significa fondo. background-image: url(objetos/fondo. o en la parte baja o a la derecha.png) .. como párragos. etc.html y pulsas abajo en "Preview" para ver como queda. Ese número raro. pronto te será familiar y lo harás con los ojos cerrados..html para nada. Background-Repeat Para que el fondo solo salga una vez hay que decirle. dentro de la carpeta "web-ejemplo-cctw" que hay en la carpeta "mis-paginas- web". Si ahora guardas el archivo estilos. Explicando el Background-Image En este caso la propiedad se llama background-image y sirve para indicar el archivo de imagen de fondo que ha de tener la web.png) . pero si lo deseas puedes poner esto: background-repeat: repeat. es decir. abres el index. Imagen de fondo La imagen de fondo se define de forma similar al color de fondo.. o solo verticalmente e incluso que no se repita y colocarlo en el centro. background-color se usa para especificar el color de fondo no solo del body sino de otros muchos elementos. no? Y verás que no hemos tocado el index. encerrado entre los corchetes "{" y "}" se define cada propiedad que queramos pero separándo unas de otras con un punto y coma ". Un poco de estilos CSS Ya de paso te explico un poco de estilos css. como solo hemos definido una propiedad. tal y como te comenté antes. Te dejo un ejemplo para que lo pruebes y veas como funciona: .png) . se pone esto en su lugar: background-repeat: x body {background-color: #E6E6FA . En este caso. En cambio no es posible conseguir que solo salga una vez y que a la vez se expanda ocupando toda la página. background-image: url(objetos/fondo. Por defecto. es un buen invento o no? Pues aún hay webmaster que no la usan. esta imagen de fondo se repetirá horizontal y verticalmente para ocupar todo el fondo de la página. Se puede hacer que no se repita. abajo a la izquierda y todas estas combinaciones con la propiedad background-position. background- repeat: y } Para que se repita vertical y horizontalmente no hace falta poner nada. y una vez copiada allí le cambias el nobre y le pones "fondo".css y en cambio si no usaramos Hoja de Estilos tendríamos que cambiar el color de fondo en las 500 páginas. bueno con uno un poco abierto sale mejor. no es necesario poner el punto y coma. pues no hay nada que separar.. Bien. de este modo: background-repeat: no-repeat quedando así el código de la Hoja de Estilos: body {background-color: #E6E6FA . Tienes un montón en la Galería de Imágenes. Vamos a ver todas esas opciones.

la imagen tapará el color de fondo. Aunque no se recomienda. background-image: url(objetos/fondo. y left (izquierda) center (centro) y right (derecha) para la alineación horizontal. también puedes usar distancias. Los valores a tomar son fixed o scroll. pero si estamos seguros de que está bien podemos eliminar la propiedad background-color de la línea de la hoja de estilos. Pero no te lo recomiendo por que depende del navegador conseguiras el efecto o no. Eso queda ya a tu criterio. Nota: Realmente.png) . body {background-color: #E6E6FA . Codigos colores Cor Código Java Código HTML Snow 255 250 250 #FFFAFA GhostWhite 248 248 255 #F8F8FF WhiteSmoke 245 245 245 #F5F5F5 Gainsboro 220 220 220 #DCDCDC FloralWhite 255 250 240 #FFFAF0 OldLace 253 245 230 #FDF5E6 Linen 250 240 230 #FAF0E6 AntiqueWhite 250 235 215 #FAEBD7 PapayaWhip 255 239 213 #FFEFD5 BlanchedAlmond 255 235 205 #FFEBCD Bisque 255 228 196 #FFE4C4 PeachPuff 255 218 185 #FFDAB9 NavajoWhite 255 222 173 #FFDEAD Moccasin 255 228 181 #FFE4B5 Cornsilk 255 248 220 #FFF8DC Ivory 255 255 240 #FFFFF0 LemonChiffon 255 250 205 #FFFACD Seashell 255 245 238 #FFF5EE Honeydew 240 255 240 #F0FFF0 MintCream 245 255 250 #F5FFFA Azure 240 255 255 #F0FFFF AliceBlue 240 248 255 #F0F8FF lavender 230 230 250 #E6E6FA LavenderBlush 255 240 245 #FFF0F5 MistyRose 255 228 225 #FFE4E1 White 255 255 255 #FFFFFF Black 000 #000000 DarkSlateGray 47 79 79 #2F4F4F DimGrey 105 105 105 #696969 SlateGrey 112 128 144 #708090 LightSlateGray 119 136 153 #778899 Grey 190 190 190 #BEBEBE . de modo que puedes usar cualquiera de esas combinaciones. no crees? Pues a no ser que la imagen no ocupe toda la página. Puede estar bien por si el archivo de la imagen de fondo no se cargara. si definimos una imagen de fondo no es necesario el color de fondo. así: background-position: 50px 100px Background-Attachment Esto no funciona en todos los navegadores y hace que la imagen de fondo se quede fija mientras mueves la página con la barra de desplazamiento o que se mueva con ella. center (centrado) y bottom (abajo) para la alineación vertical. En cambio si la imagen solo ocupa una parte si puede ser interesante colocar el color de fondo. background- repeat: no-repeat . background-position: left bottom} Los valores que puede tomar son: top (arriba). indicarle que se posicione a 50 pixeles desde la derecha y 100 pixeles desde arriba. es decir.

LightGray 211 211 211 #D3D3D3 MidnightBlue 25 25 112 #191970 NavyBlue 0 0 128 #000080 CornflowerBlue 100 149 237 #6495ED DarkSlateBlue 72 61 139 #483D8B SlateBlue 106 90 205 #6A5ACD MediumSlateBlue 123 104 238 #7B68EE LightSlateBlue 132 112 255 #8470FF MediumBlue 0 0 205 #0000CD RoyalBlue 65 105 225 #4169E1 Blue 0 0 255 #0000FF Cor Código Java Código HTML DodgerBlue 30 144 255 #1E90FF DeepSkyBlue 0 191 255 #00BFFF SkyBlue 135 206 235 #87CEEB LightSkyBlue 135 206 250 #87CEFA SteelBlue 70 130 180 #4682B4 LightSteelBlue 176 196 222 #B0C4DE LightBlue 173 216 230 #ADD8E6 PowderBlue 176 224 230 #B0E0E6 PaleTurquoise 175 238 238 #AFEEEE DarkTurquoise 0 206 209 #00CED1 MediumTurquoise 72 209 204 #48D1CC Turquoise 64 224 208 #40E0D0 Cyan 0 255 255 #00FFFF LightCyan 224 255 255 #E0FFFF CadetBlue 95 158 160 #5F9EA0 MediumAquamarine 102 205 170 #66CDAA Aquamarine 127 255 212 #7FFFD4 DarkGreen 0 100 0 #006400 DarkOliveGreen 85 107 47 #556B2F DarkSeaGreen 143 188 143 #8FBC8F SeaGreen 46 139 87 #2E8B57 MediumSeaGreen 60 179 113 #3CB371 LightSeaGreen 32 178 170 #20B2AA PaleGreen 152 251 152 #98FB98 SpringGreen 0 255 127 #00FF7F LawnGreen 124 252 0 #7CFC00 Green 0 255 0 #00FF00 Chartreuse 127 255 0 #7FFF00 MedSpringGreen 0 250 154 #00FA9A GreenYellow 173 255 47 #ADFF2F LimeGreen 50 205 50 #32CD32 YellowGreen 154 205 50 #9ACD32 ForestGreen 34 139 34 #228B22 OliveDrab 107 142 35 #6B8E23 DarkKhaki 189 183 107 #BDB76B PaleGoldenrod 238 232 170 #EEE8AA LtGoldenrodYello 250 250 210 #FAFAD2 LightYellow 255 255 224 #FFFFE0 .

Yellow 255 255 0 #FFFF00 Gold 255 215 0 #FFD700 LightGoldenrod 238 221 130 #EEDD82 goldenrod 218 165 32 #DAA520 DarkGoldenrod 184 134 11 #B8860B Cor Código Java Código HTML RosyBrown 188 143 143 #BC8F8F IndianRed 205 92 92 #CD5C5C SaddleBrown 139 69 19 #8B4513 Sienna 160 82 45 #A0522D Peru 205 133 63 #CD853F Burlywood 222 184 135 #DEB887 Beige 245 245 220 #F5F5DC Wheat 245 222 179 #F5DEB3 SandyBrown 244 164 96 #F4A460 Tan 210 180 140 #D2B48C Chocolate 210 105 30 #D2691E Firebrick 178 34 34 #B22222 Brown 165 42 42 #A52A2A DarkSalmon 233 150 122 #E9967A Salmon 250 128 114 #FA8072 LightSalmon 255 160 122 #FFA07A Orange 255 165 0 #FFA500 DarkOrange 255 140 0 #FF8C00 Coral 255 127 80 #FF7F50 LightCoral 240 128 128 #F08080 Tomato 255 99 71 #FF6347 OrangeRed 255 69 0 #FF4500 Red 255 0 0 #FF0000 HotPink 255 105 180 #FF69B4 DeepPink 255 20 147 #FF1493 Pink 255 192 203 #FFC0CB LightPink 255 182 193 #FFB6C1 PaleVioletRed 219 112 147 #DB7093 Maroon 176 48 96 #B03060 MediumVioletRed 199 21 133 #C71585 VioletRed 208 32 144 #D02090 Magenta 255 0 255 #FF00FF Violet 238 130 238 #EE82EE Plum 221 160 221 #DDA0DD Orchid 218 112 214 #DA70D6 MediumOrchid 186 85 211 #BA55D3 DarkOrchid 153 50 204 #9932CC DarkViolet 148 0 211 #9400D3 BlueViolet 138 43 226 #8A2BE2 Purple 160 32 240 #A020F0 MediumPurple 147 112 219 #9370DB Thistle 216 191 216 #D8BFD8 Snow1 255 250 250 #FFFAFA .

Snow2 238 233 233 #EEE9E9 Snow3 205 201 201 #CDC9C9 Snow4 139 137 137 #8B8989 Seashell1 255 245 238 #FFF5EE Seashell2 238 229 222 #EEE5DE Seashell3 205 197 191 #CDC5BF Seashell4 139 134 130 #8B8682 AntiqueWhite1 255 239 219 #FFEFDB AntiqueWhite2 238 223 204 #EEDFCC AntiqueWhite3 205 192 176 #CDC0B0 AntiqueWhite4 139 131 120 #8B8378 Bisque1 255 228 196 #FFE4C4 Bisque2 238 213 183 #EED5B7 Bisque3 205 183 158 #CDB79E Bisque4 139 125 107 #8B7D6B PeachPuff1 255 218 185 #FFDAB9 PeachPuff2 238 203 173 #EECBAD PeachPuff3 205 175 149 #CDAF95 PeachPuff4 139 119 101 #8B7765 NavajoWhite1 255 222 173 #FFDEAD NavajoWhite2 238 207 161 #EECFA1 NavajoWhite3 205 179 139 #CDB38B NavajoWhite4 139 121 94 #8B795E LemonChiffon1 255 250 205 #FFFACD LemonChiffon2 238 233 191 #EEE9BF LemonChiffon3 205 201 165 #CDC9A5 LemonChiffon4 139 137 112 #8B8970 Cornsilk1 255 248 220 #FFF8DC Cornsilk2 238 232 205 #EEE8CD Cornsilk3 205 200 177 #CDC8B1 Cornsilk4 139 136 120 #8B8878 Ivory1 255 255 240 #FFFFF0 Ivory2 238 238 224 #EEEEE0 Ivory3 205 205 193 #CDCDC1 Ivory4 139 139 131 #8B8B83 Honeydew1 240 255 240 #F0FFF0 Honeydew2 224 238 224 #E0EEE0 Honeydew3 193 205 193 #C1CDC1 Honeydew4 131 139 131 #838B83 LavenderBlush1 255 240 245 #FFF0F5 LavenderBlush2 238 224 229 #EEE0E5 LavenderBlush3 205 193 197 #CDC1C5 LavenderBlush4 139 131 134 #8B8386 SlateGray4 108 123 139 #6C7B8B LightSteelBlue1 202 225 255 #CAE1FF LightSteelBlue2 188 210 238 #BCD2EE LightSteelBlue3 162 181 205 #A2B5CD LightSteelBlue4 110 123 139 #6E7B8B LightBlue1 191 239 255 #BFEFFF LightBlue2 178 223 238 #B2DFEE .

LightBlue3 154 192 205 #9AC0CD LightBlue4 104 131 139 #68838B LightCyan1 224 255 255 #E0FFFF LightCyan2 209 238 238 #D1EEEE LightCyan3 180 205 205 #B4CDCD LightCyan4 122 139 139 #7A8B8B PaleTurquoise1 187 255 255 #BBFFFF PaleTurquoise2 174 238 238 #AEEEEE PaleTurquoise3 150 205 205 #96CDCD PaleTurquoise4 102 139 139 #668B8B CadetBlue1 152 245 255 #98F5FF CadetBlue2 142 229 238 #8EE5EE CadetBlue3 122 197 205 #7AC5CD CadetBlue4 83 134 139 #53868B Turquoise1 0 245 255 #00F5FF Turquoise2 0 229 238 #00E5EE Turquoise3 0 197 205 #00C5CD Turquoise4 0 134 139 #00868B Cyan1 0 255 255 #00FFFF Cyan2 0 238 238 #00EEEE Cyan3 0 205 205 #00CDCD Cyan4 0 139 139 #008B8B DarkSlateGray1 151 255 255 #97FFFF DarkSlateGray2 141 238 238 #8DEEEE DarkSlateGray3 121 205 205 #79CDCD DarkSlateGray4 82 139 139 #528B8B Aquamarine1 127 255 212 #7FFFD4 Aquamarine2 118 238 198 #76EEC6 Aquamarine3 102 205 170 #66CDAA Aquamarine4 69 139 116 #458B74 DarkSeaGreen1 193 255 193 #C1FFC1 DarkSeaGreen2 180 238 180 #B4EEB4 DarkSeaGreen3 155 205 155 #9BCD9B DarkSeaGreen4 105 139 105 #698B69 SeaGreen1 84 255 159 #54FF9F SeaGreen2 78 238 148 #4EEE94 Firebrick4 139 26 26 #8B1A1A Brown1 255 64 64 #FF4040 Brown2 238 59 59 #EE3B3B Brown3 205 51 51 #CD3333 Brown4 139 35 35 #8B2323 Salmon1 255 140 105 #FF8C69 Salmon2 238 130 98 #EE8262 Salmon3 205 112 84 #CD7054 Salmon4 139 76 57 #8B4C39 LightSalmon1 255 160 122 #FFA07A LightSalmon2 238 149 114 #EE9572 LightSalmon3 205 129 98 #CD8162 LightSalmon4 139 87 66 #8B5742 Orange1 255 165 0 #FFA500 .

Solo acuérdate de que ahi hay información de los fondos por si algún día te hace falta. es horrible. pon el ratón sobre ella.) y suponiendo que la hemos guardado en la carpeta "objetos" y que la hemos llamado "fondo. Orange2 238 154 0 #EE9A00 Orange3 205 133 0 #CD8500 Orange4 139 90 0 #8B5A00 DarkOrange1 255 127 0 #FF7F00 DarkOrange2 238 118 0 #EE7600 DarkOrange3 205 102 0 #CD6600 DarkOrange4 139 69 0 #8B4500 Coral1 255 114 86 #FF7256 Coral2 238 106 80 #EE6A50 Coral3 205 91 69 #CD5B45 Coral4 139 62 47 #8B3E2F Tomato1 255 99 71 #FF6347 Tomato2 238 92 66 #EE5C42 Tomato3 205 79 57 #CD4F39 Tomato4 139 54 38 #8B3626 OrangeRed1 255 69 0 #FF4500 OrangeRed2 238 64 0 #EE4000 OrangeRed3 205 55 0 #CD3700 OrangeRed4 139 37 0 #8B2500 Red1 255 0 0 #FF0000 Red2 238 0 0 #EE0000 Red3 205 0 0 #CD0000 Red4 139 0 0 #8B0000 DeepPink1 255 20 147 #FF1493 DeepPink2 238 18 137 #EE1289 DeepPink3 205 16 118 #CD1076 DeepPink4 139 10 80 #8B0A50 HotPink1 255 110 180 #FF6EB4 HotPink2 238 106 167 #EE6AA7 Gold2 238 201 0 #EEC900 Aplicando color e imagen de fondo a nuestro ejemplo Ups. no?): (Para guardártela. Espero no haberte asustado. Vamos ahora a aplicar un color de fondo a la web de nuestro ejemplo. creo que en la página de antes me he pasado un poco escribiendo. pero para el ejemplo sirve. Luego la guardas en la carpeta "objetos". abrimos la hoja de estilo y dejamos la línea de antes así: . abres el Html-Kit y abres la hoja de estilo par insertarle esta línea): body {background-color: #E6E6FA} Aplicando una imagen de fondo Suponiendo que hemos escogido esta imagen para el fondo de la web (lo se. haz clic derecho y escoge guardar como. para aplicar el color de fondo #E6E6FA a la página web pondremos a la etiqueta body de nuestra hoja de estilo lo siguiente (ya sabes. Aplicando el color de fondo Tal y como hemos visto antes.png". je je je.

background- repeat: no-repeat } Además la quiero centrada tanto vertical como horizontalmente. como este ejemplo y sin que el párrafo se corte.. pero si no el Firefox no se lo traga. Si creamos la línea de código Html en cualquier parte dentro del Body. verdad? Pues bien.png) } Como no quiero que se repita. entre palabras. Al principio uno de los problemas que vas a tener es no saber en qué parte del código Html insertar la línea de código correspondiente a un elemento para conseguir que aparezca donde deseas. así que le añado esto: body {background-color: #E6E6FA . se vería así con cualquier navegador (espero. Como puedes sospechar. esto es. rara. perfecto: body {background-color: #E6E6FA .. Intentaré hacerlo más ameno la próxima vez. nos lo dices en el foro. . background-position: center center} En otros navegadores no pasa nada. background- repeat: no-repeat . es decir. pero en Firefox es necesario especificar la altura del body para que el fondo salga centrado verticalmente. background-image: url(objetos/fondo. La página de ejemplo. background-image: url(objetos/fondo.png) . En qué lugar? Eso ya depende de donde la queramos insertar. le pongo tambien esto: body {background-color: #E6E6FA .): Si tú la ves diferente. pero tú tienes la suerte de contar con CCTW. background-repeat: no-repeat . body {background-color: #E6E6FA . oki? Qué tal? Mereció la pena el rollo de la página anterior? je je je. je je je. como las imágenes son "visibles" van definidas dentro del Body. background-image: url(objetos/fondo. a pesar de que sea la imagen lo único que haya en esa línea. background-image: url(objetos/fondo. una imagen puede insertarse o bien dentro de un párrafo. o bien como una línea independiente.png) . en la sección de Html-Kit y así lo reparamos y retocamos la lección. ésta aparecerá allí. es decir. en cualquier parte. height:100%. Dónde insertar la imagen. siempre encerrada entre <p> y </p>. Una chorrada. tras guardar la hoja de estilo. background- position: center center . En ambos casos es aconsejable meterla en un párrafo. } A veces hay que buscar el truco para que se vea bien en cualquier navegador y la mayoria de veces es un calentamiento de cabeza tremendo... Para conseguirlo solo hemos de indicar en esa misma línea que el body va a tener una altura del 100%.. lo se.png) . de modo que lo ponemos y listo. Cómo insertar una imagen en una página web Ya hemos insertado una imagen como fondo de página pero para insertar una imagen dentro de la misma el procedimiento es algo distinto. que va a ocupar lo que tenga que ocupar.

. es decir. ocuparían el lugar de esa imagen.". Eso es bueno. Estas cantidades las coloca normalmente el Html-Kit automáticamente y si tú las cambias seguramente la imagen se vea desvirtuada y perderá definición. la guardas en tu carpeta "objetos" y seguimos. como antes. oki? En el caso de que no pongamos ni width (anchura) ni height (altura). . no se pone </img>.gif y seguimos adelante. respetando la estructura de la web. pero siempre que tengan su sentido con esa imagen. Recuérdalo. si el archivo de la página fallara. Sería como si no existiera. que para eso está. aunque esto no es recomendable). Para empezar se coloca la ruta... A continuación pulsamos Intro para crear una nueva línea e insertamos esto (como te he dicho. Si ya tienes ese archivo guardado en "objetos" abre ahora el Html-Kit y la página index..html para continuar. Vamos a insertar una imagen en nuestro ejemplo En primer lugar necesitaremos una imagen guardada en la carpeta "objetos". el resto de los elementos como párrafos etc. En cambio... Como va entre los dos. Vamos a colocar la imagen entre el párrafo donde dice "Bienvenidos a mi página web" y el que dice "Página creada. pero para tener un código válido es necesario poner ese alt y además escribir entre las comillas una breve descripción del contenido de la imagen. apretar el botón derecho del ratón y escoger "Guardar imagen como. Copia esta misma que dejo debajo. la encerramos entre nuevos <p> y </p> que también debemos escribir): <p><img src="objetos/sonrisa. si quiero aparecer en Google u otros cuando la gente busque por las palabras "html-kit". Luego se coloca su anchura y altura expresada en pixeles con las siglas "px". si ocurre un fallo con la imagen y esta no se muestra. de modo que es bueno además hacer que aquellas palabras por las que queremos ser encontrados aparezcan en esa descripción. En mi caso. No es obligatorio.. este es uno de los pocos casos en los que no hay etiqueta de cierre. es decir. No debes dejar nunca espacios en blanco entre la cantidad y las unidades. no lo olvides.".. el navegador dejará un rectángulo con esas medidas en blanco.. algunos buscadores como Google tienen en cuenta estas palabras escritas en estas descripciones para relacionar las búsquedas de sus usuarios con el contenido de las páginas web.. que como siempre puede ser una ruta relativa (si la imagen pertenece a. sino que lo válido es ponerlo junto así "100px".". no crees? Por último vemos un alt=". nos vamos al Html-Kit a la vista "Editor" y ponemos el cursor detras del primer </p> (al final de la línea de código del primer párrafo). oki? Vamos a ver lo que hay dentro de ese código. Este contenido aparece en el hueco de la imagen en el caso de que la propia imagen no se visualizara por algún problema. si definimos anchura y altura. claro. Si necesitas cambiar el tamaó mejor hacerlo con un programa gráfico y luego la vuelves a pegar en la página.. por ejemplo. Ponle el nombre sonrisa.. o está guardada en tu espacio web) o absoluta (siempre que la imagen la estés obteniendo de otra web distinta a la tuya.Código Html para insertar una imagen Para insertar una imagen. Recuerda que para copiartela solo tienes que poner tu ratón sobre ella. o "Así se descarga el Html-Kit". Va siempre encerrada entre comillas.. no vale poner esto "100 px". Pulsa Intro para crear una nueva línea y seguidamente ve a la barra de herramientas del Html-Kit y escoge Etiquetas > Imagen > Insertar Imagen. Por otro lado. se coloca el siguiente código: <img src="ruta/imagen. sin mover nada..gif" width="60px" height="60px" alt="Bienvenidos al ejemplo de CCTW"></p> Quieres aprender a hacerlo directamente desde las opciones del Html-Kit? Situa el cursor al final del primer párrafo. me viene bien colocar descripciones en los alt de las imágenes como "Menú del Html-Kit".gif" width="XXpx" height="YYpx" alt="descripcion de la imagen"> Como ves.

.. Aparece entonces esta ventana: Pulsas sobre Add. Tras pulsar en Aceptar se ve esto en la misma ventana: . y en la ventana que se abre (mira la imagen de aqui arriba) busca la carpeta "objetos".

el ancho. escribir "px" tras cada cantidad de anchura y altura. . vemos como aparece la línea de código en nuestra index. Cómo insertar un enlace a tu E-Mail Sin conocer lo que piensan tus visitantes no tienes nada que hacer. Problemas de este tipo de enlace El problema que yo le veo a esto es que hay miles de robots pululando por la red en busca de direcciones de E-Mail para crear bases de datos con ellos y enviarles todo ese spam del que terminamos tan hartos. Solo cambian una palabrilla. Ponlo tú mismo a mano (sin dejar espacios entre el número y el px !!!) y seguimos. etc. de modo que colocar un enlace donde el usuario pueda hacer clic para escibirte un E-Milio parece algo imprescindible. verás como aparecen una serie de datos que te he señalado en rojo en la foto de arriba." escribe las palabras que verá el visitante y donde ha de hacer clic para enviarte el mensaje. Si seleccionas el archivo "sonrisa. así que vamos a aprender. oki? Tras escribir la descripción y pulsar Ok. es decir. y por supuesto la ruta. pero nunca está de más al menos saber como insertar estos enlaces de correo. más incomoda para el visitante pero efectiva contra el spam.gif" del cuadro de la derecha.. Curioso.html aunque le falta colocarle las unidades. "Clic para escribirme" o simplemente la propia dirección de tu E-Mail. el alto. Por lo que quizás prefieras una alternativa. Aparce la ruta relativa. nada que mejorar. Se trata de escribir tu dirección de E-Mail con un programa de dibujo y colocar la . Si te soy sincero. Puedes poner "Envíame un E-Milio". En cuanto descubra como hacer para que aparezcan las unidades automáticamente os lo diré. verdad? Claro que más adelante colocaremos un foro en la web. verdad? Nos falta ya que estamos ahí poner la descripción. es muy parecido al código Html de un enlace a otra página web. Código Html de un enlace de E-Mail Como vas a ver. Como verás hay muchísimas más opciones para las imágenes en esa ventana. Para eso pulsamos a la derecha de donde pone "alt" (arriba a la izquierda. que en este caso será simplemente tu dirección E-Mail. lo que ocupa. La línea de código en Html es la siguiente: <a href="mailto:tudireccion@email. para no saturarnos. pero por ahora lo dejamos así. estoy aprendiendo a usar el Html-Kit a la vez que hago las lecciones. je je je. junto a la ruta relativa) y escribimos la descripción que te dije antes "Bienvenido al Ejemplo de CCTW".com">Texto que quieras poner para hacer clic en él </a> Donde pone "Texto que quieras poner.

Aunque sea para aprender.. Como te dije anteriormente. puedes cerrar la ventana de Workspace de la derecha para tener más sitio y maximizar la ventana del index.gif Ya tenemos tres archivos en la carpeta de "objetos": Ahora abre el index de tu Html-Kit y pon la vista "Editor". También puedes colocar un botón cualquiera y hacer el enlace desde allí. por lo que seguimos con el mismo problema. oki? Enlace de E-Mail en una imagen Primero guárdate esta imagen en tu carpeta de "objetos" para poder seguir. Pon el cursor del ratón justo al final de la línea de código del último párrafo (justo antes de </body>). de modo que creamos ese párrafo aún vacio escribiendo sus etiquetas <p> </p>. Mejor. estos robots no pueden cazar tu dirección mientras que cualquiera de tus visitantes siempre puede leerla y escribirla en su programa de correo para mandarte sus felicitaciones. El botón sería un simple dibujo con el texto "E-Mail" o el dibujo de un buzón de correo o algo así. Como siempre. como las imágenes no pueden ser leidas. verdad? je je. De este modo.imagen en la web. Qué hacemos entonces? Por el momento y para el caso del ejemplo. Ahora situa el cursor dentro de ese párrafo (colocándolo entre <p> y </p>) y en el Html-Kit tal y como hicimos anteriormente pulsa en insertar una imagen (te dejo la imagen para que recuerdes cómo era): . En ese caso los robots de spam no pueden leer la imagen. conviene poner muchas cosas dentro de un párrafo. pero quizás puedan sacar la dirección de tu E-Mail desde el código html de tu web.. pulsa con el ratón una sola vez para coloar el cursor allí y pulsa luego el Intro para crear una nueva línea. vamos a colocar el enlace de E- Mail en un dibujo de un buzón. Al guardarla ponle de nombre buzon.

(Fijate como en la línea número 15 del código html en la imagen de arriba. podemos escribir el "alt" del que hablamos páginas a tras. y como por fín he descubierto como poner las unidades en el . he escrito ya <p></p> y he colocado el cursor entre esas dos etiquetas) Y del mismo modo que la otra vez. ponemos algunos datos en la ventana que aparece: Fíjate como tras seleccionar el archivo buzón en la ventana derecha de arriba.

tienes que seleccionar todo el código html de la imagen primero. Lo que tienes que seleccionar es el que he puesto arriba. Vamos ahora a colocarle el enlace a nuestro E- Mail. así: .. era obvio verdad? je je je...ancho y alto de la imagen.. Si te cuesta trabajo seleccionarlo. Ahora en la lista de opciones de la izquierda de esa ventana. desde <img alt=". esa que se pulsa para escribir mayúsculas... prueba colocando el cursor en el inicio y luego haciendo clic pulsando a la vez la tecla "Shift" (es la flecha que apunta para arriba. hasta 23px" />. Automáticamente aparece esa nueva línea de código Html en la ventana de nuestro index <img alt="Pulsa para escribirme un E-Mail!" src="objetos/buzon. escribe "px" detrás de cada cifra de auchura y altura después de poner al "alt" y luego pulsa el Ok.. oki? Una vez seleccionado pulsa en la barra de herramientas del Html-Kit sobre Etiquetas > Crear Link. Pues si.. justo encima del "Control") de tu teclado teniendo el cursor al final del código que quieres seleccionar. Enlace de E-Mail con Html-Kit: Para insertar un enlace de E-Mail desde una imagen.gif" height="32px" width="32px" /> y si le das a "preview" podrás ver el buzón en cuestión. No selecciones la parte de <p> ni la de </p>.: Se abre la ventana de los links y vemos como en la ventana de la parte inferior derecha aparece la imagen seleccionada (aunque puede que no se vea).. en la línea que pone "href" escoge "mailto:"..

html de tu Html-Kit y abre la hoja de estilos llamada "estilos. Después pulsa Ok y listo. para indicar que son enlaces. Verás como solo tenemos aquella línea que habiamos definido para el body. . y a continuación de mailto: escribe tu dirección de correo. los enlaces aparecen siempre subrayados con una lína azul.css". Vamos a incluir otra línea más con este contenido: img {border-style: none} Esto indica que. la imagen del buzón de correo aparece recuadrada en azul. Cuando se hace un enlace desde una imagen en lugar de aparecer subrrayada aparece recuadrada en azul. que no tengan ningúna tipo de borde. de modo que vamos a corregirlo.. Esto es porque por defecto. Los estilos CSS para las imágenes con enlaces Como verás si pulsas en "Overview" o vista previa. Cierra el index. todos los elementos de imagen (img) han de cumplir lo que hemos puesto entre corchetes. Esto no queda demasiado bien.Verás qué rápido y fácil se hace esto con la hoja de estilo y sin tocar para nada el index. es decir.

Si necesitas separar el nombre en dos o más palabras usa guiones medios "nombre-nombre". pero se le echa en falta por lo menos el conseguir centrar algunos párrafos. sino centrar solo unos pocos. Si quisieramos que todos los párrafos aparecieran centrados. En estos casos en los que queremos definir un estilo pero no queremos que se aplique a todos los elementos. . pero por lo pronto hemos aprendido ya algunas cosas interesantes. Por ejemplo. Crear un estilo centrado La propiedad en CSS que define la alineación de un elemento es text-align y se le pueden dar los valores left (pegado a la izquierda). Tampoco saldrá ya en ninguna de las imágenes de ninguna de nuestras página. Buen invento esta hoja de estilos. Cómo centrar un párrafo de la página web Lo que hemos conseguido hasta ahora no es gran cosa comparado con lo que nos espera. Es importante que sepas que al ponerle nombre a estos estilos creados por nosotros hemos de seguir ciertas normas para evitar problemas: . simbolos raros ni espacios en blanco. Crear una clase de estilo Abrimos la Hoja de Estilo y escribimos esta línea: .Nunca empezar el nombre con un número.centrado {text-align:center} Fíjate que hemos puesto un punto seguido del nombre que nos ha dado la gana y a continuación entre los corchetes hemos dado la propiedad de centrado. es necesario definir lo que se llaman Clases de Estilo. right (pegado a la derecha). .Siempre en minúsculas. Solo letras y números. podríamos crear un nuevo tipo o clase de estilo que podemos llamar como queramos. Vamos a aprender a centrar párrafos de un modo muy sencillo gracias como siempre a nuestra grandiosa Hoja de Estilos. . Vamos a verlo por partes. Si guardamos la hoja de estilo y abrimos el index. y justify (justificado). center (centrado). ya lo verás más adelante.html veremos como en el "Overview" o vista previa ya no aparece ese recuadro. El aspecto de la web conseguida hasta ahora no está mal del todo. por ejemplo "centrado". bastaría con poner en la Hoja de Estilo esta línea: p {text-align:center} El problema de esto es que nos centra TODOS los párrafos y seguramente no queramos eso. Definimos en la Hoja de Estilo las propiedades que queremos que tenga y luego en el Html de la página le indicamos a un párrafo concreto que ha de tomar ese estilo. verdad? Pues aún tiene cosas mejores.No poner acentos. nunca bajos "nombre_nombre". .

cada vez que quieras centrar un elemento solo tienes que ponerle class="centrado" dentro de la etiqueta de inicio en su código Html. Estas cosas no las sabe cualquiera. Pues es dentro de esa etiqueta donde tenemos que indicarle (si es que lo queremos así) la clase de estilo que queremos que tome. creando otra carpeta dentro de la carpeta "mis-paginas-web" que hemos creado en tu escritorio y repitiendo los primeros pasos de estas lecciones... Para ello vamos a la vista del código html del index y modificamos la etiqueta <p> dejándola así: <p class="centrado"> Bienvenidos a mi página web. Recuerda que puedes hacer experimentos creando otro sitio local. Muy pronto estará lista!</p> Si ahora haces vista previa o "Overview" desde el Html-Kit. Que te quede claro: Se define en la Hoja de Estilo poniendo un punto más el nombre y se indica en el html con class="nombre" (aquí sin el punto).".html de ejemplo así: . Pero la web del ejemplo es mejor que no la toques mucho pues te podrías perder cuando la usamos en las lecciones siguientes. no te creas. Bien. Fácil. todos los párrafos empiezan con la etiqueta <p>. Centrar párrafos en el Html Como recordarás. te dejo aquí lo conseguido hasta el momento. Vamos por ejemplo a centrar el párrafo donde ponemos "Bievenidos. verás como este párrago aparece ahora centrado.html para centrar algunos párrafos.. una vez claras estas normas (recuérdalas muy bien!) guarda la Hoja de Estilos y abrimos el index.. estás empezando a ser un Webmaster de verdad! Cómo va nuestra página web por el momento? Por si te has perdido o por si has estado experimentando por tu cuenta y te has cargao el código Html de la web de ejemplo. verdad? A partir de ahora. oki? La maravillosa Hoja de Estilo queda así: Y el código Html del index.

. que nos valdrá para generar a partir de ella el resto de páginas de nuestra web. eh? Solo con tu punto de vista y tu opinión puedo mejorar todo esto. acuérdate de mí! je je je.  Hacemos visible la ventana Workspace.html Recordando los pasos dados antes para crear el index. Comenzando a crear la plantilla de nuestra página Web La página index. en la barra de navegación naranja sobre lección segunda o pulsando en la flecha derecha de aquí abajo continuamos con la segunda.. donde empezaremos a meter mano a la plantilla. Te doy pistas por si no te acuerdas. Y con esta página terminamos con la primera lección. Pulsando arriba. Espero que me des tu opinión de estas lecciones en el Foro CCTW.html vamos a crear ahora el archivo de la plantilla. Crear el archivo plantilla.html que hemos visto hasta el momento no está terminada ni mucho menos. pero trabajaremos sobre ella más adelante. Ahora lo que vamos a hacer es comenzar creando la plantilla.  Escogemos New > Create File. Su aspecto final no tiene nada que ver con lo que tiene ahora. .  Abrimos el Html-Kit.  Ponemos el ratón sobre el sitio "web-ejemplo-cctw-local" y pulsamos sobre él con el botón derecho del ratón.

 Le ponemos de nombre plantilla. esta segunda Hoja de Estilo que llamaremos "estilo- general.  Escogemos crear "Blank Html Page" desde la pestaña "General" y pulsamos Ok. en la ventana Workspace para empezar a trabajar sobre ella. por si no te acuerdas de cómo crear una Hoja de Estilo Vacia. Ahora la abrimos haciendo doble clic en su nombre.css". Toma.css" se usará para todas las demás páginas de la web. Creala tu mismo. Mientras que la anterior (estilos. pero recuerda ponerle de nombre "estilo-general. .css) la vamos a usar solo para el index. aparece casi vacio. Como siempre que se crea un archivo nuevo.html y pulsamos Ok de nuevo. Creando la Hoja de Estilo para el resto de páginas de la web Hacemos lo mismo para crear una Hoja de Estilo distinta a la anterior.

o avanzar un poco más y usar tablas. Es un simple hueco.Relacionando estilo-general. class="nombredelaclasedeestilo". La estructuración con Capas o Divs? El darle forma a una web se le suele llamar estructurarla. Fíjate. Las clases de estilo. palabras. pero te prometo que no es nada dificil. párrafos. tamaño de letra. que solo se deben aplicar a un elemento por página web. entre <body> y </body> pues se trata de algo que debe "verse".html recien creada. y se hace en el Html así: .css están en la misma carpeta. Para adornarlo lo que hacemos es definir un tipo de estilo en la Hoja de Estilos y aplicarselo al DIV.css". Para estructurar una web podemos usar simples saltos de línea. imagenes. etc.css" type="text/css" media="all"> Una vez creados estos dos archivos y relacionados entre sí. Entre ambas etiquetas se coloca su contenido.css que se abrirá vacio. varias celdas. Es darle una estructura concreta para colocar luego el menú aquí. Ahora haz vista previa "Preview" y observa que aparece. Por otro lado están los estilos únicos. pasamos a meterles mano. o enmaquetarla. es decir. que es un tipo de estilo que podemos asignar luego a uno o a varios elementos. margenes. Como puedes ver. bordes. varias de estas cosas a la vez o incluso otras capas o también tablas. igual pero con la contrabarra. Para empezar a jugar. el estilo de antes #cabecera {background-color: pink } es un Estilo Único y por lo tanto se asigna este tipo a un solo elemento. ya veras. Clases de Estilo y Estilos Únicos Existen dos formas de definir estilos. claro. celdas en las que podemos colocar más comodamente los elementos que queramos. con un punto delante del nombre y luego colocando las propiedades entre los corchetes. En cambio los estilos únicos se definen en la Hoja de Estilo con una almohadilla como esta "#" (Alt Gr + 3) en lugar de con un punto. <div>Bienvenidos a mi Web</div> A que no te ha dolido? je je.css" en lugar de "estilos. el contenido allá. Una es crear una clase de estilo. Te dejo esto por si no te acuerdas de cómo relacionar la hoja de estilo con la web. podemos darle a todo su contenido propiedades como color de fondo. pon esto dentro y luego guárdalo: #cabecera {background-color: pink } Nota: Cada vez que hagas un cambio en la Hoja de Estilos. Dando estilos a un Div Ese Div no tiene ningún atractivo. oki? Como tanto plantilla. tienes que guardarla para poder ver sus efectos en la vista previa de la página web. etc. igual que ocurría con los elementos que vimos atrás. dimensiones de ese recuadro.html Ahora te toca relacionar esta segunda Hoja de Estilos con la plantilla.css con plantilla. pero recuerda poner en la ruta "estilo-general. por supuesto. Pero el método más profesional. ya lo se. desde la Hoja de Estilos. abre el archivo estilo-general. esto de abajo es el código Html de un Div sencillo. que dividen el espacio en celdas. Te recuerdo que había que colocar una línea de código en el Head. enlaces. y en el código 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. Al principio quizás te de un poco de pánico todo esto.centrado". También se puede estructurar una web partiéndola en frames o marcos. que se pueden usar sobre varios elementos (varios párrafos. etc) se definen en la Hoja de Estilo como vimos al crear la clase de estilo ". etc. empieza con una etiqueta y termina con otra de cierre. Nada asombroso. Qué es una Capa o un DIV? No es más que un elemento rectangular dentro del caul podemos incluir lo que queramos. es suficiente con escribir esto: <link rel="stylesheet" href="estilo-general. Escribe esa línea de código en el archivo plantilla. que es para clases (estilos que se pueden asignar a varios elementos). Como puedes ver.html como estilo-general. enlaces. Lo bueno que tiene es que luego.html. límpio y cómodo es sn duda el uso de Capas o Divs (es lo mismo decir capa que div). Luego en el código Html se asigna esa clase de estilo a un elemento colocando dentro de su etiqueta de inicio esto.

Al final de estas lecciones esta capa contendrá la cabecera. algo de publicidad para sufragar los gastos de un posible dominio propio y quién sabe. Más capas.. La llamaremos. no es algo descabellado. Así. No es bueno tener páginas econdidas. En esta barra que aparecerá en todas las páginas de la web pondremos enlaces a las secciones que tratemos. je je. verás lo asombroso que es todo esto más adelante. Creando la capa navegacion La llamaremos "navegacion" y solo va a existir una por página.. luego entrar en otro lado y finalmente conseguir acceder a una página en concreto. Pues ahora que sabes lo que son. es decir. luego a la subsección cual. vamos a crear la capa de nuestra barra de navegación. que segurametne conste del logotipo de la web y de un hueco para. Con un fondo rosa (pink). <div id="cabecera">Bienvenidos a mi Web</div> Abre ahora el archivo plantilla. páginas a las que para acceder haya que ir primero a la sección tal. y todo en minúsculas. Ha de quedar así: Si has guardado antes la Hoja de Estilo y haces vista previa en la plantilla. de un hosting de pago. navegacion (sin acentos. más capas Ya tenemos nuestra primera capa llamada cabecera. Qué es una barra de navegación? Una de las cosas más importantes en una página web es el dar facilidades al visitante para que pueda navegar por nuestras páginas sin perderse y que lo tenga todo a mano. en cualquier momento el visitante puede ir de un lado a otro sin perderse. La barra de navegación nos ayuda a esto. luego se trata de un estilo único y se define por tanto así en la Hoja de estilo: #navegacion {background-color: gray } . por ejemplo. no te creas. verás como ahora la frase "Bienvenido a mi Web" aparece diferente. Esto es son varios ejemplos de barras de navegación: Como ves. Pero con esa capa solo no tenemos ni para empezar. Es la magia del CSS aplicado a los Divs. claro). dan acceso a varias secciones y pueden ser muy sencillas o más complicadas o llamativas con lengüetas y todo eso. pero no te creas que esto queda así.html y pon esa línea de código. Vamos a crear una segunda capa que contendrá una barra de navegación. Todas las páginas deberían ser accesibles sin más que pulsar un par de enlaces desde el index o página principal.

html esto otro: Y aquí tienes el resultado del ejemplo.. si le decimos que ocupe toda la pantalla del navegador es muy posible que la web de desmorone cuando el usuario cambie el tamaño de esa ventana. o también podemos darle un ancho concreto. produciendo un caos en la web. sea como sea esta de grande.. pero ahora seguimos creando el resto de capas.. Creando las capas contenido y pie Ya que estamos. También vamos a crear otra capa para la parte más baja de la web que llamaremos pie en la que más tarde tendremos algunos enlaces. en la Hoja de Estilo le hemos dado a navegacion la propiedad de color de fondo gris (gray). la tenga o no maximizada (la ventana. de modo que los que tengan un monitor pequeño la verán muy grande y los que la tengan más grande (la pantalla. Rescoluciones de pantalla y páginas web Existen varias formas de darle un tamaño a una página web. pero no me dirás que no está tomando forma. Tras guardar todo. a continuación del div cabecera.html y ponemos estas otras dos líneas después 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 página</div> Y el resultado es.. la parte principal. no? Verás como esto empieza a cambiar en breve. Escribimos eso en la Hoja de Estilo.. 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.) la verán más chica.html y escribimos. cuando lo hay. Por ejemplo... en la Hoja de Estilo tendrás esto: En la plantilla. En el primer caso. La primera se llamará contenido y en ella pondremos luego un menú lateral y los textos de nuestra web. un mensaje de copyright y puede que otro espacio para publicidad. claro. Los elementos grandes no caben y desplazan el contenido siguiente hacia abajo. vamos a crear dos capas más. Después abrimos la plantilla. Más adelante le pondremos más cosas.). esta otra línea: <div id="navegacion">Barra de Navegación</div> Como puedes ver. Siguiendo las mismas instrucciones que antes. . Lo bueno es que se aprovecha todo el espacio. Se que no parece una página web.. podemos hacer que ocupe toda la pantalla del navegador del usuario. ya veremos. abrimos la plantilla. Ambos casos tienen su parte buena y su parte mala..

Abrela si la cerraste y escribe al principio del todo esta nueva línea de css: body {text-align: center} Body no es un nombre de un estilo inventado por nosotros. Eso es lo bueno. Si guardas ahora la Hoja de Estilo y haces vista previa de la plantilla. centrado. (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. no tendrán que usar demasiado la barra de desplazamiento y además. pie. pero de un modo algo especial para que funcione en todos los navegadores. El otro caso es darle un ancho fijoa la página web (por ejemplo 20 cm. lo malo es que si no acertamos en qué anchura darle. "global". en la hoja de estilo definimos #global con las siguientes propiedades: #global {width:800px .. El menú de nuestra página web Estate atento en esta lección. pero estudiando muy bien cuál será esa anchura. vamos a darle a la web del ejemplo esa anchura y además vamos a hacer que aparezca centrada en la ventana del navegador. table.. solo va a haber uno por página. Auto significa automático. Como va a ser único. etc. Qué opción tomamos entonces? Lo mejor es tomar la segunda opción.css. sino que es una etiqueta de Html. Lo veremos mejor más adelante.. es decir. ponemos la etiqueta de inicio justo después de <body> y la de cierre justo antes de </body>. p.) 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. no te preocupes si no lo entiendes demasiado bien. es decir. Ahora no será fácil descuadrar tu web. y a las etiquetas de Html (como body.html verás como todo aparece centrado y con un ancho fijo de 800px. El código Html queda así: Ves como encierra a los otros divs? Ahora. oki? Un Div para dominarlos a todosss Exácto. serán la minoría. pero merece la pena para crear el menú lateral y empezar a entender como se usan estas capas o divs.. si unos pocos usan una resolución de pantalla un poco mayor no verán unos márgenes exagerados y los que usen resoluciones un poco menores al ancho que le demos. lo haremos con la almohadilla y con id="global". Como queremos centrarlo todo. a. las dos cosas a la vez. o 800 pixeles). div. Lo mejor es darle un ancho que sea cómodo para la resolución más usada por todo nuestro público. en lugar de definirlo con un punto delante y el class="global" en el Html. . vale? Esto no funciona en todos los navegadores a menos que definamos una caracteristica a Body en la Hoja de Estilo estilo-general. Lo llamaremos. dar un ancho fijo a la web. que igual es un poco espesa.. Va mejorando poco a poco. 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. mientras que auto es la cantidad de margen que dejaremos por cada lado. Así. tal y cual. margin: 4px auto } Esto significa que la capa global tendrá un ancho de 800 pixeles y aparece una propiedad que no hemos visto antes. Esto es lo que hemos conseguido con el ejemplo hasta el momento.. 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. Para encerrar todo lo visible. como cabecera. si miras las webs que sueles visitar verás que es así y que quedan muy bien con cualquier resolución. pasará que unos la verán muy grande y la verán tan pequeña que tendrás más margenes a los lados que espacio para la web. Con esto ya queda toda la web centrada en toooodos los navegadores. la mitad a la derecha y la otra mitad a la izquiera y por tanto. De echo. El 4px es la cantidad de margen que vamos a dejar por encima y por debajo de la web. Parece ser que hoy por hoy la anchura óptima para una página web es de 800 pixeles. por lo que se dejará todo lo que exceda de 800px y automáticamente.. Así que.

guarda la Hoja de Estilos y mira como está quedando la plantilla haciendo vista previa. float:left } Como solo hay un menú por página.. el de la izquierda de estas líneas..) y después. después del código Html de la capa menu. . La primera es width:150px con la que le damos una anchura fija de 150 pixeles.). Vamos a insertarle algunos enlaces (ficticios. lo mejor para poner una lista es usar el elemento. La Hoja de Estilos queda por tanto así (puedes ver como voy ordenando los estilos definidos por orden de aparición en la página. Para que sirve la propiedad Float? La propiedad Float hace que el elemento flote sobre el resto de la web. pero parece demasiada capa. oki? Rellenando el menú de nuestra página web El menú así como lo hemos dejado ni parece menú ni parece ná de ná. Empezamos creando la capa. La segunda nueva caraterística que vemos es nueva. lista? Exácto. en la siguiente línea vemos la etiqueta de cierre del div contenidos. usa listas Puedes imaginar el menú como una serie de enlaces uno debajo de otro.. Y el resultado final. van los textos de la capa contenido (Esta será la . vamos a crear una capa para meter en ella este menú. Quizás sea poco.. miralo aquí mismo. es decir. con la almohadilla ( #).. Ahora queremos crear un menú lateral parecido al de esta misma web. Ahora tienes que definir el estilo de la capa menu en la Hoja de Estilos. lo de siempre. dentro de la zona de los textos. por ahora. Como un menú es más o menos una zona rectangular. no? Esto es lo que se llama anidar capas. pues aún no tenemos páginas que enlazar) y así de paso vemos como se estructura correctamente. pero por ahora lo dejamos así hasta que veamos si nos va a faltar anchura en esa capa. meteremos o crearemos este div que vamos a llamar menu dentro del div contenido. Esto vale para cambiarlo de posición más fácilmente. Abre en el Html-Kit la plantilla.. je je je. lo definimos como estilo único. Bueno. Te gusta? Pues a ti te puede quedar mucho mejor si tienes un poco de gusto y ganas de experimentar. o si el cansancio puede contigo.html y escribe la siguiente línea justo después de la etiqueta de inicio de la capa contenidos y antes del texto de dentro suya (Esta será la tal y cual.) así que ahora vamos a rellenarlas y a darles una mejor presencia.css y escribe esta línea para el div menu: #menu {background-color: yellow. incluir tantos divs pequeños dentro de la capa menu como enlaces vayamos a poner. Abre estilo-general.. la propiedad Float. Le ponemos un color diferente al resto para distinguir donde empieza y donde termina la capa menu y colocamos dos propiedades más. Si es un listado... Parece lógico. no? En realidad un menú no es más que una lista y. Como nosotros queremos tenerlo a la izquierda. de arriba a abajo): Ale. A la propiedad float se le suele poner uno de estos dos valores.. ya están todas las capas creadas (mucho más adelante quizás metamos alguna más.. width: 150px . a la izquierda de la capa contenido.. Como queremos que salga dentro de la parte central de la página. left (que flote a la izquierda) o right (lo manda a la derecha). es decir... de forma que quede el código Html así: Como verás.. Se podría pensar en colocar un div para cada uno de ellos. le pondremos la propiedad float:left y esto lo manda pegarse al borde izquierdo de la capa en la que está.

abre tu Html-Kit y escribe el código de arriba dentro del div menu. con solo poner una cosilla en la Hoja de Estilos. pero eso lo podemos arreglar.Como se hace una lista Las listas se definen en Html con dos etiquetas. puedes escribir Enlace 1. asi que en lugar de poner nada en la ruta le vamos a colocar una almohadilla (#) que sierve para que haga el efecto de enlace pero sin enviarnos a ningún lado por ahora.html y copia coloca un enlace en cada uno de los tres elementos de lista que tenemos. la primera indica el principio de la lista y es <ul> mientras que la otra define en inicio de un elemento de la lista. Enlace 2 y Enlace 3. como que el menú se descuelga un poco por debajo de la web. Enlaces para el menú de nuestra página web Como recordarás (eso espero. Para diferenciarlos.. pero eso lo arreglamos en las siguientes páginas. Ha de quedar de este modo: Si haces vista previa verás cosas un poco raras. que es <li>. de forma que el código Html de una lista completa sería este mismo: y se vería haciendo vista previa de este modo: Para nuestro ejemplo. Pero antes vamos a ver qué cuál es el código que tendriamos que colocar dentro del div del menú. Para empezar.. abre tu Html-Kit. yo siempre me liaba y terminaba poniendo lu y il. no es necesario ponerle el target al código del enlace (el target="_blanck" se pone para que el enlace se abra en una página distinta.html">Texto del Enlace</a> así que vamos a poner ese código dentro de cada elemento li de la lista del menú. eliminando claro la palabra "menú" que habia ya colocado. abre la plantilla. seguramente nos moleste el dichoso puntito negro a la izquierda de cada elemento de lista. vale? <a href="#">Enlace 1</a> Como no vamos a querer que se abran esos enlaces en páginas distintas sino en la misma. Te lo puedes apuntar.) los enlaces tenian esta forma: <a href="ruta/archivo. Cómo? Pues como siempre. 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>. Si ponemos una ruta falsa nos dará algún problema. je je je. lo recuerdas?). Por supuesto. Cuando tengamos más páginas en la web pondremos las rutas de aquellas páginas que queremos enlazar desde el menú. Pues adelante. Así que el código del menú completo se tiene que quedar así: .

pero es la única combinación que logra que en todos los navegadores se corrija ese fallo. definiremos en la Hoja de Estilo propiedades para todos los li que cumplan la condición de estar dentro de la capa menu. pero por ahora lo estamos consiguiendo.. a pesar de que cumplas todas las buenas prácticas que se pueden leer por la red. luego lo amarillo del menú es parte de la capa contenido. float:left} y luego guardas la Hoja de Estilo y haces vista previa de la plantilla. Por eso... En la página siguiente seguimos arreglando el menú. Reparando el fallo del menú. No se explicarte porqué ahora mismo.html porque lo demás. pero ten en cuenta que el menú está dentro de él. Así que. o no? Si ves algún fallo no dudes en decirmelo en el Foro CCTW.propiedades. Es todo un reto. tomarán todas las propiedades que le digamos ahora. Podemos modificar las propiedades del elemento li en la Hoja de Estilos. todas las listas que tengasmos en la web dejarán de tener ese punto. Que bien. como por ejemplo el puntito aquel. y dejar los detalles de cómo queremos adornar cada cosa para la Hoja de Estilo. width: 800px ..Eso es todo lo que tenemos que hacer en la plantilla. Sin más rollo. hay que hacer alguna "pirula" para que se vea correctamente la página web con cualquier navegador. Recuerda que la estrategia perfecta para no tener problemas con algunos navegadores y para tener un código Html sencillo para revisarlo nosotros. Realmente le estamos indicando a la capa contenido que ha de tener un ancho de 800 pixeles. mejor que modificar las propiedades del elemento li. y es más. abres la Hoja de Estilo. igual que el ancho de la página. y sencillo para que los buscadores lo lean bien e indexen nuestras páginas correctamente. no? Las propiedades que le vamos a dar son las siguientes: #menu li { list-style:none } Esto hace que no tenga ningún (none) tipo de estilo.. } Cuando se pone la capa antes de un tipo de estilo.css Esto. Cómo te has quedao? je je je.css) y haces vista previa de la plantilla verás que ya no aparece. Vamos a reparar esto desde la Hoja de Estilo. pero el problema que podemos tener es que si lo hacemos así.html para que veas como ahora todo se ha solucionado. Si ya hiciste vista previa de la plantilla. lo que haremos será crear un estilo nuevo de li. que usaremos solo en el menú.. Ves ahora como si ha de tener 800px de ancho? El colocarle el float:left evita que en algún navegador se descuadre todo. 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). 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ú. Es genial. . es poner en el Html lo justito. Abre tu Html-Kit y abre estilo-general. En realidad parece que ocupara menos. Toma ya. colocando un width: 800px y un float:left a la capa contenido. se lo daremos con la Hoja de Estilo ahora mimo. No me preguntes mucho porqué. Si guardas la Hoja de Estilo (estilo-general. De este modo todas las listas que pudieramos poner en las otras partes de la web serían normales. y verás como a veces. Además esto nos permitirá hacer cualquier cambio en todas las páginas de nuestra web con solo cambiar una palabra en la Hoja de Estilos. plis! Eliminando los puntos de la lista Esta es fácil y comprensible. dejas la línea del estilo contenido de este modo: #contenido {background-color: orange .. habrás visto que al poner varios enlaces dentro ha crecido y se sale por debajo de la página web. después de muuuchas pruebas lo he conseguido arreglar de este modo.. Esto se hace así: #menu li { . el "aspecto" como siempre.

pero un poco demasiado pegados a la izquierda. etc. float:left . no? De la forma anterior se aplica a todos los elementos de la lista. ponemos un asterisco.. el Opera. Ahora los enlaces aparecen bien. pero por el momento lo ponemos todo a cero. Pero como ya estamos liados con esto. Tiene sentido. o escribe allí tus dudas o sugerencias. también se hubiera podido poner el text-align:center en el estilo #menu li. que te va a dar algo malo! je je je je. Como cada uno toma por defecto un valor inicial para los margenes y bordes. Lo suyo es ajustar los margenes cuando tengamos los enlaces definitivos. sin problemas. o un poco más a la izquierda en otros. como el navegador va leyendo los estilos de arriba a abajo. También han desaparecido otros margenes que rodeaban la capa global.. entonces todos los elementos de la web estarán centrados.Formatear los estilos a cero Si tubieras varios navegadores diferentes.. mientras otros navegadores deciden que no. Al final lo que ocurre es que parece imposible ver una pçagina web exáctamente igual con todos los navegadores. pues según lo largo que sea el texto de cada enlace podemos ajustarlo más o menos. te darias cuanta que en cada uno de ellos el menú (y algunas otras cosas) se ve ligeramente distinto. tal que quede así: #menu {background-color: yellow . width: 150px . no se te ocurra ponerla la cuarta. claro. Por ejemplo. etc. no olvides colocar esa línea la primera de todas.. En unos los enlaces aparecen en el centro. Eso si.. vamos pa´lante y lo terminamos. Todos los problemas de este tipo no los vamos a poder arreglar de golpe. vamos a formatear los estilos! Para indicar que ha de aplicarse a todos. Luego. Acuérdate! 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. verdad? Pues vamos a arreglar eso ahora mismito! Abre tu Html-Kit.. etc. unos navegadores deciden dejar un margen de unos pocos pixeles para cada elemento. margin: 10px 20px Este otro modo. Si no entiendes algo o quieres que te explique mejor alguna parte dímelo en el Foro CCTW. verdad? Seguimos mejorando el aspecto en la página siguiente. la Hoja de Estilo y. Qué tal lo llevas? Levántate un poco y estira las piernas. De lo contrario. el Firefox. o lo que es igual. la primera cifra indica el margen de arriba y abajo y la otra la de los lados. con dos cantidades. la quinta. verdad? Lo dejamos definido en el #menu por ahora. padding y borde cero basta con colocar en la primera línea de todas. pero quizás hayas visto ya por algún lado varias formas de especificar los margenes. y como el body contiene toda la web. indica que se ha de dejar 10 pixeles por arriba y abajo y 20 pixeles por la derecha e izquierda. en otros un poco a la derecha. a la izquierda. a no ser que le indiquemos otra cosa a cada estilo concreto. escribe text:align:left dentro de las propiedades de la capa menu. como el Internet Exporer. Aún no te lo he dicho. lo definiremos en la Hoja de Estilos.. pero uno bien importante si.css. te parece? Va a ser muy facilito. debe ser la primera de todas. lo que haremos será indicar nosotros en la Hoja de Estilos que TODOS los elementos van a tener un valor cero para los bordes y margenes. text-align:left } La verdad. mientras que definiendolo en #menu li solo se aplicaría a los elementos encerrados entre <li> y </li>. a no ser que. si deseamos cambiar alguno. margin: 10px 20px 5px 15px . Para indicar que tengan margen. esta: * {margin:0px . si la lee de las últimas anularás los margenes y bordes de las capas definidas antes de esa lína. Es decir. los enlaces del menú quedan mucho mejor si aparecen alineados a la izquierda. 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. la guardas y haces vista previa de la plantilla verás como ahora el menú aparece centrado. que para eso estamos colega! Arreglando los márgenes del menú Esto ya es cosa de probar y probar. sin margenes. etc. padding:0px . Tenemos el poder! je je je. border: 0px} Si escribes esta línea en estilo-general. justamente centrado. claro. que hay que dejar un poco más o un poco menos. arriba del todo en estilo-general. al igual que la anchura del menú. Esto es porque mientras no se indique lo contrario.css..

no obstante si quieres darle algún toque diferente en función de alguno de esos estados. y gratis! je je je. Así no te liarás más adelante cuando hagamos cambios. abrir tu Html-Kit. por abajo y por la izquierda respectivamente.Visited: Imagino que te habrás fijado que en algunas webs se colorean de otro color los enlaces que ya has visitado antes.Active: Y este es el estado de un enlace o vínculo cuando está siendo presionado por el ratón y mientras no se suelta el dedo. Hay que ver cuanto estás aprendiendo eh? Y gratis! No te quejaras. de definen con la etiqueta <a> luego está claro que para modificar sus propiedades basta con escribir una "a" en la Hoja de Estilos y modificar cosas entre los corchetes. Lo que más me interesa es dejar un poquito de margen hacia la izquierda para separar los enlaces del borde. si en la Hoja de Estilo solo indicas la "a" de enlace seguido de los corchetes con sus propiedades. Se haría así (en la Hoja de Estilos. . han de tener un tamaño de letra de 1. verdad? Pues "visited" es el estado del enlace cuando éste ya ha sido visitado por el usuario anteriormente.3em .3 veces lo que correspondería normalmente (font-size:1. 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. Cómo se definen las propiedades de los enlaces Los enlaces como ya sabes.. O para acordarnos. con las cuatro cifras. Empezamos como siempre. por la derecha. para el caso de los margenes del menú vamos a escoger la última forma. lo de eliminar el subrayado y hacer que cambien de color los enlaces cuando pasas el ratón por encima! Eso mola. margin: 4px 0px 4px 6px} Te recomiendo que en estos ejemplos que vamos haciendo pongas exactamente lo mimo que yo. Vamos a ver cómo eliminar el subrayado de los enlaces y cómo resaltar los enlaces del menú cuando pasas el ratón por encima.. derecha . text-decoration: none} En este ejemplo de arriba le hemos indicado que TODOS los enlaces. 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 .Hover: Es el estado del enlace cuando el cursor del ratón está justo encima de él. Las características que definamos así para los enlaces se aplicarán a todos ellos sea cual sea su estado. al que llamamos mis-experimientos. que se define con text- decoration: underline Si no quieres destacar los enlaces según los estados que te he expicado antes. También lo has debido ver. Y este otro modo (puedes escoger el que te venga mejor según si los margenes son iguales para todos los lados o diferentes) define por orden los margenes a dejar por arriba. claro): a {color: blue. no? Tu puedes ir a tu bola si quieres. es muy sencillo también. je je.link: Es el estado normal que tiene un enlace cuando no está en ninguno de los otros tres estados. lo pillas? Así que. Ah! claro. . que son los siguientes: . Bueno. primero un poco de base para que no te pierdas luego. oki? Sigo echando de menos algo. el subrayado (text-decoration: none). esto es. Se distinguen cuatro estados posibles para los enlaces. Aplicando estilos css a los enlaces del menú Estoy seguro de que esto era algo que siempre quisiste hacer. pasas el ratón sobre un menú y se van coloreando o poniendo en negrita los enlaces que señalas. Sin subrayar y marrones. font-size:1.3em) y finalmente que no deben tener ningún tipo de decoración. . pues como te decía antes. pero sin apretar el botón aún. En cambio el margen derecho me interesa más que siga a cero. sean cuales sean sus estados. Ahora te cuento qué es eso de los estados. vamos a verlo en la página siguiente. pues así tengo más hueco para colocar el texto de cada enlace. entonces esas propiedades afectarán a los enlaces sean cuales sean sus estados. basta con definirlos en esa única línea. excepto cuando se lococa el cursor encima que pasan a rojos y subrayados . je je je. se vuelve obligatorio definirl los cuatro estados y además en ese mismo orden que te he puesto. Nosotros. pero en el otro sitio que hemos creado al principio. abrir la Hoja de Estilos y escribir dentro de los corchetes de la capa #menu li lo siguiente: #menu li {list-style:none . abajo e izquierda). y también un poco de margen por encima y por debajo para que no se vean muy apiñados. Por defecto siempre salen subrayados. la primera cifra es la de arriba y las demás van en sentido de las agujas del reloj (arriba. pues así podemos retocar muy facilmente y ver como va quedando. han de ser azules (color:blue). oki? Eso si. Confía en mi un poco.

html verás 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.html Qué. Siempre hay que ponerlos todos y en ese orden además. es el efecto que te acabo de comentar. Por qué será? Es un defecto de algunos navegadores. pero solo la línea del hover. y es que se nos han separado demasiado los enlaces verticalmente. pero tu haz lo que te digo y verás a qué me refiero. text-decoration:none . lo segundo ponerles un color de fondo. text-decoration:underline . background-color: silver} . también se activa el enlace. La primera es buena. que situando el cursor en la misma línea del enlace pero lejor del texto. para destacar al usuario que son enlaces. Lo primero será tratar estos enlaces como bloques. Tratar elementos como bloques Si te fijas en la vista previa de la plantilla. ya sabes que los elementos de las listas. Con estos estilos los enlaces nunca aparecen subrayados hasta que se coloca el cursor del ratón sobre ellos. No se si te has enterado de lo que acabo de decir. Pon todos los elementos de la lista uno seguido del otro. Aplicando más estilos css a los enlaces del menú Para que se note que controlamos esto un montón. Como te veo con los ojos perdidos mirando al techo. sin necesidad de colocarlo justamente sobre el texto. funcionen. con solo colocar el cursor sobre la línea. Fíjate como defino todos los estados aunque deje vacios algunos estados.. se va animando esto o no? No? pues vamos a mejorarlo aún más. te dejo una imagen para que veas a qué me refiero con ponerlos seguidos. En adelante. Estas líneas de código puedes escribirlas ya en la Hoja de Estilos estilo-general. como el Internet Explorer.. Añade esta última propiedad dejando el estilo de enlaces de la Hoja de Estilos estilo-general. igual suena un poco extraño. display: block } Ocurren dos cosas ahora.css así: a {color: brown . en realidad es a los enlaces en estado Hover.. La segunda es mala. gris.. Además pasan de color marrón ( brown) a color rojo (red) cuando se pasa el ratón sobre ellos. este aparezca sobmbreado. en la misma línea que los <ul> y </ul>. Se hace retocando el código de los enlaces de antes. Antes estaban así: Y hay que ponerlos así: Aplicando un fondo a los enlaces activos Bueno.. los <li> hay que ponerlos todos seguidos. en lugar de uno en cada línea de código en la vista Html y verás como se arregla. Vamos a hacer que al poner el cursor sobre un enlace del menú. dejándola así: a:hover {color:red . En cambio podemos hacer un pequeño truco para que estos se activen. con un fondo de color. Con eso se solventa el tema..css Depués guárdala y mira los cambios con la vista precia en plantilla. Esto es bueno. pero esto lo arreglamos rápido con otro truquillo. vamos a aplicar un par de propiedades más a los enlaces del menú.

Pero para eso.html verás los efectos logrados con todo esto. ni un enlace. pero. sin huecos. podemos varias los aspectos de los enlaces. je je je. En el ejemplo lo dejamos con Justity. abre tu Hoja de Estilo e incluye esta nueva línea. o algo un poco más sencillo. poner un par de palabras en la Hoja de Estilo y listo. en tus páginas puedes definirlo como text-align: left o text-align:right o text- align:center. para encontrar cada capa rápidamente. Pero no pasa nada. Eso es por que le pusimos align:center a body en la Hoja de Estilo. Qué prefieres? je je je. así que vamos a arreglarlo. por ejemplo. verdad? Por eso le pusimos esos colores tan feos. lo crearemos en su momento. Si guardas y haces vista previa a la plantilla. Nosotros pretendemos que sea un párrafo. conseguirás ver este aspecto en tu plantilla. Por ahora. Si son enlaces modificaremos la etiqueta "a". si son párragos la etiqueta "p". Escribe un par de párrafos que tengan bastante texto. dale al teclado! Ha de quedar así: Más contenidos Tras esta aclaración. je je je. Esto significa que se reparten para que empiecen justo en la parte izquierda y terminen todas las líneas justo en el margen derecho. Tienes dos opciones. pues no está encerrada entre ningúna etiqueta concreta. los fondos de ciertos elementos. que te veo.html Elementos que no son nada ¿? Ya sabemos que gracias a la Hoja de Estilos. A mi me gusta así. Eso no queda muy bien.html (estilo-general. ya sabemos a qué capa incluirle la propiedad padding (el padding es parecido al margin. es un color gris clarito. los párrafos se ven centrados y eso parece una poesia más que una web. La propiedad background-color te debería sonar. Si escribes lo suficiente en cantidad. pero ahora vemos como los textos se pegan demasiado tanto al menú lateral como a los extremos de la página. te acuerdas? je je. al menos lo suficiente como para sobrepasar lo que ocupa el menú de la izquierda. Vamos a insertar más texto en la parte principal de la página web para ver como se comporta el menú lateral en el caso de que haya mucho más texto en la parte derecha. Ya sabes. luego ni es un párrafo. has de poner <p> y </p> al principio y al final de cada uno para que el navegador sepa donde empiezan y terminan. Pero solo queremos por ahora poner . etc. Rellenando la Zona Principal Veamos realmente como funciona esta estructura que hemos hecho. al final de su contenido: p {text-align: justify} Con esto los textos quedan justificados.html Justificar los párrafos de la página web Ups. Abre la Hoja de Estilos de la plantilla. 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". todas las partes del contenido de la página web deben "ser algo".css) y vamos a reparar esos margenes. etc sin más que poner la propiedad correspondiente. la etiqueta </p> de cierre al final. 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. Silver significa plata en inglés. Ale. ni ná de ná. una es definirle el margen concreto a cada uno de los párrafos de todas tus páginas web. pero si lo prefieres. vamos a incluir un par de párrafos más a continuación de ese. El resto de líneas del código no se tocan. podemos cambiar el tamaño de la letra de toda la web. Los margenes de los párrafos de la página web La cosa va mejorando. lo arreglamos rápido definiendo un estilo justificado para todos los párrafos de la web. la vimos al principio del curso para poner fondo a la página index. Si más tarde nos interesa alguno con otra alineación. Abre el Html-Kit y abre tu plantilla. verdad? Pues vamos a indicarselo poniendole a esa frase la etiqueta <p> al incio y como no. ya veremos la diferencia). como quieras.

je je je je) plantilla.. mira el resultado del ejemplo. La indentación de los párrafos Eso si que es una palabra rara. Para eso tendríamos que poner un margen por la derecha para el menú. Se aplica colocando "text-indent: XXpx" entre los corchetes del elemento al que se lo queremos aplicar. verdad? Vamos a ver como solucionamos esto. Le hemos puesto 10px en los dos lados y solo 5 por arriba y abajo. float:left . los margenes no están mal del todo.css según han quedado hasta ahora (en realidad lo hago para llenar hueco. margin-right: 10px } Ahora si que lo hemos conseguido. que eso queda muy bien. de modo que ésta queda más metida a la derecha que las demás líneas. width: 150px . y como pertenece a la capa #menu tocaría retocar esa línea en estilo-general. queremos margenes para los párrafos de dentro de la capa #contenido. las propiedades.. escribimos primero la capa y luego el elemento de dentro de esa capa al que queremos definir cosas y luego.css y haz vista previa de la plantilla para ver como queda. para ver como queda e ir variando cada uno hasta que quede a nuestro gusto si fuera necesario. Vamos a aplicarlo a todos los párrafos de la parte principal. text-align:left . pero vemos que los dos primeros párrafos no parece que hayan tomado el margen izquierdo para separarse del menú principal.html y vemos los resultados por si queremos variar alguna de esas dimensiones.margen a sus párrafos.html y de la hoja estilo-general. mientras que en esos dos párrafos debería contarse desde la derecha del menú. Esto es por que se cuenta el margen desde la parte izquierda de la capa #contenido. Imagino que proviene de la propiedad "text-indent" que se aplica para establecer un margen a la izquierda solamente de la primera línea de cada párrafo. Cómo llevamos los códigos? Para estar seguros de que estamos haciendo el ejemplo según las lecciones aprovecho ahora para dejaros los códigos de la plantilla. que esta página se me había quedado muy cortita. Cuando están centrados no se suele usar. si recuerdas bien lo que hicimos la otra vez. (Margen entre menú lateral y textos principales) Vaya. haz vista previa de la plantilla. incluimos el text-indent en esta línea (lo subrayo para que lo veas claro): #contenido p {padding: 5px 10px 5px 10px . Escribe esa línea justo después de la definición en la Hoja de Estilo de la capa #contenido.css añadiéndole esto último que he subrayado: #menu {background-color: yellow . Un indentado de 15px creo que es suficiente. Como va a ser una propiedad para los párrafos (p) de dentro de la capa #contenido. esto se pone así: #contenido p {padding: 5px 10px 5px 10px} Resumiendo.html . así que. text-indent: 15px} Ahora guarda la hoja estilo-general. entre paréntesis. pues no hace falta ese efecto. es decir. Guarda la Hoja de Estilo. Te gusta? Esto de indentar solo tiene sentido cuando los textos están justificados o alineados a la izquierda.

verdad? El restop del trabajo lo tendremos con la hoja de estilo. el contenido. esta solo mostrará eso. propio y ya no tendremos que tocas mucho más la plantilla. Estas propiedades son margin. poco la hemos tocado. como en este caso de la derecha. Border Si en una capa solo definimos su contenido en Html. padding y border. El resto será contenido vuestro. un párrafo o lo que sea. estilo-general. que se encargará de darle vistosidad al Html. ya sea una imagen. la propiedad border dibuja un borde alrededor justo de ese contenido. Repito de nuevo que lo bueno de las Hojas de Estilo es que si un día te cansas del aspecto de la web. El borde estará pegadito pegadito al contenido. Pues bien. Para eso claro. con oslo cambiar un poco la Hoja de Estilos tendrás una web con el mismo contenido (pues no tocaremos el html) pero con una apariencia totalmente distinta. hay que saberse los trucos del CSS y por eso vamos a profundizar tu y yo ahora con tres propiedades muy importantes que si no quedan claras nos van a dar muchos dolores de cabeza.html aunque realmente. pocas capas más tendremos que crear para tener completa nuestra página web.css Un poco más de estilos css A estas alturas y aunque no lo creas. Padding .

Como ves. El trio Margin-Padding-Border En la imagen de abajo puedes ver mejor a qué zona corresponde cada una de estas propiedades. usaremos por ejemplo el margin. ya verás. En este caso no se ve. pero quizás te ayude a recordar para qué es cada uno. hay una separación entre la imagen y este mismo párrafo. clavó un montón de estacas afiladas por fuera de los muros para evitar que los marginales se acercaran demasiado (margin) y para proteger a los paladines ordenó que ninguno de ellos se acercara al muro a menos de dos metros (padding: 2 metros) para evitar que los paladines sufierean alguna herida si algún marginal atravesara alguna lanza por alguna ventana del muro. el borde ahora no está pegado a la imagen. Entre el borde y el contenido está la separación creada por el padding y entre el borde y el exterior el espaciado dejado por el margin. como vimos en las lecciones primeras. no? . El rey ordenó contruir unas buenas barreras (border) para protegerse. Fíjate que el borde ahora está pegado al padding. aunque no se ve. los marginados los llamaban. sino separada de ella por la zona roja que ha sido definida con la propiedad margin. separa el borde de su contenido en una distancia igual a la que le indiquemos. Como ves. tenemos que aplicar margin. los marginales no podian acercarse mucho al castillo (gracias al margin) y a los paladines se les prohibio acercarse al muro (gracias al padding). Por eso se usa para separar unos párrafos de otros. Así. le pondriamos a A un margin. Si quisieramos separar un elemento A de los que tiene alrededor. que le he puesto color azul para distinguirlo. Es un cuento muy tonto. Puedes ver el borde. esta zona sería como la parte rojo que se ve en esta otra imagen de la derecha. Cuál de los dos? Como lo que queremos es separar la capa #menu (la amarilla) de los elementos exteriores. El margin es la distancia de separación que se va a dejar entre el borde y la parte exterior del elemento de la capa. Además. Concretamente. En la página siguiente lo entenderás mejor al aplicárselo a nuestro menú lateral. no al contenido. De este modo. Separar un poco el menú Según lo explicado en la página de antes. para conseguir separar un poco el menú lateral (toda la zona amarilla) del borde de la parte naranja de la página. para meterlo un poco más dentro de la parte central. je je je. Margin Ahora tenemos otra distancia más. En este caso solo hay definido el margin en el ejemplo de la derecha. si ponemos dos imágenes una junto a la otra y queremos separarlas. Es decir. El padding lo usaremos para definir una distancia de separación entre el borde y el contenido. Lo mismo para los párrafos etc. 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. podríamos colocar un margin o un padding. El ejemplo del castillo de paladines rodeados de marginados Hace mucho tiempo existía un castillo donde un montón de paladines (soldados de la edad media) se refugiaban de seres marginales. pues es una zona exterior al dibujo en la que no se permite que aparezca nada. es decir. Si aplicáramos padding a la capa #menu el efecto sería crear una separación entre el borde amarillo y los enlaces de dentro.

.. te acuerdas? Era para dejar una separación entre el menú y los textos de la parte naranja que están a su derecha. Ah. que suele ser negro... je je je.. Seguro que te resultará curioso observar los cambios que produce variar esos datos en la hoja de estilo y seguro que aprendes un montón..2em.html Si hacemos vista previa a la plantilla no veremos ningún cambio. Te toca currártelo por tu cuenta No estaría de más que crearas una página aparte e investigaras los efectos del margin. Igual que para indicar que una frase debía tener aspecto de párrafo con las etiquetas <p> y </p>... text-align: center} h2 {font.html vemos que queda mucho mejor. el border y el padding por tu cuenta. podemos siempre cambiar su aspecto indicando las propiedades que nos de la gana en la Hoja de Estilo. 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 mañas para poder usar bordes sin problemas. pero eso será más adelante.size: 1. Los h1 son títulos principales y el resto van siendo de menos importancia y por lo tanto aparecen con letra más pequeña cada vez. font-weight: bold . seguimos con las lecciones. dónde va a parar. etc. una lista. 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. Se usan por tanto los h1 para títulos principales y los h2 para subtitulos.. Ahora.1em. tambien los quiero centrados los dos! Abrimos el Html-Kit. no lo pruebes en los archivos de este ejemplo para no perdernos en las lecciones.. Esto es por que cada navegador interpreta el borde de un modo distinto y vamos a evitarlo todo lo posible. como hemos visto que también sería bueno separarlo por la izquierda y por arriba (y ya puestos. arriba-derecha- abajo-izquierda) #menu {.. color:blue . etc. con un tamaño ligeramente mayor y además subrayados y de otro color distinto al texto normal.. text-decoration: underline . A mi me gustan por ejemplo titulos principales (h1) en negrita. oki? Pero recuerda. Así que.. Por qué crees que puede ser? Piensalo... vale? Insertar títulos con h1. un párrafo. Pues claro. Si aplicamos esas etiquetas sin más obtendremos una simple frase pero en negrita y con un tamaño mayor de lo normal para que se vea destacado. Hace un par de páginas pusimos a la capa #menu este margen: margin-right:10px. je je je.. como las lecciones las hago yo.. que para eso está. ampliamos la definición y la ponemos de este modo: # menu {. un h3 y así hasta h6. Si no nos gusta cómo queda por defecto. que puede ser una imagen. por debajo también).. etc. Para distinguir una cosa de otra lo mejor es ponerle un color al body (a estas alturas debes saber hacerlo). Para los subtítulos ( h2) me gusta en cambio un tamaño algo menor y además sin subrayar. text-decoration: none .css obtendríamos esta apariencia. Yo por mi parte intentaré ponerte algunos ejemplos en cuanto pueda para esclarecer estos conceptos.. pero también del color del h1 y en negrita. margin:10px 10px 10px 10px} Esto es lo mismo que poner solo margin: 10px.. Colocando ese margin en estilo-general. color:blue .. font-weight: bold . Normalmente no se usan los demás pues no se suele abusar de sub sub subtítulos..... existen otras etiquetas para indicar que se trata de un título y estas etiquetas se escriben con una " h" seguida de un número que puede ir del 1 al 6.. Realmente parece que por debajo es mucho y por arriba y la izquierda me he pasao un poco.css y definimos estos dos títulos del siguiente modo: h1 {font-size: 1. hazlo en un archivo aparte. abrimos el archivo estilo-general.. porque como no hemos dicho a ningún elemento de la plantilla que es un título.. Mientras tanto.. tiene una etiqueta de apertura al inicio y otra de cierre al final con la contrabarra.. je je. La forma correcta para un título sería esta: <h1>Este es un título de importancia Uno</h1> Fíjate como de nuevo.... vamos a definir en la hoja de estilos este aspecto para esos dos elementos a mi gusto.. En lugar de un h1 podemos usar un h2. no .. margin:3px 10px 3px 3px} Y haciendo de nuevo vista previa sobre plantilla.. h2. Vamo a probarlo con estos otros valores (recuerda el orden de las dimensiones del margin. text-align: center} Guardamos ahora la Hoja de Estilo y abrimos la plantilla. creas una capa a la que pones nombre y le aplicas otro color diferente y luego le aplicas otro color distinto más al elemento que pongas dentro de la capa. Aún no hemos aplicado ningún borde a ninguna capa.

No te olvides de la contrabarra en la etiqueta de cierre. pues para eso es un título. lo memorizan y mostraran mi web en sus listas cuando alguien haga una búsqueda con alguna de esas palabras. o una cosa o la otra. Cuando una persona hace una búsqueda con por ejemplo Google y escribe "como crear páginas web" Google le muestra una serie de páginas.. no dejan que otra cosa como por ejemplo un párrafo. Pero como sabe Google qué páginas ha de mostrar? Bien fácil. Si te gustan los títulos alineados a la izquierda ya sabes como cambiar la Hoja de Estilo para conseguirlo (text-align: left). Ya sabemos más cosas. Lo mismo para el resto de propiedades. lo vamos a poner en el texto "Y este es el tercer párrafo" (en realidad ahora es el segundo. Si en mi web ven que aparecen las palabras "como". tamaño mayor. eliminamos la "p" y ponemos un "h1". de etiqueta h2. tanto al principio como al final. el párrafo siempre aparecerá debajo. Veremos esto en la vista previa: El subtítulo. definirle las propiedades de centrado. no podría crear una clase de párrafo (p.titulo). quedando así: Los títulos aparecen como elementos de una sola línea. que te veo. "páginas" y "web". Una frase no debería ser a la vez párrafo y título.hay nada que mostrar con estos cambios en la Hoja de Estilo. va a ser el texto donde pone "Esta será la zona principal de la web". si que puedes. pero bueno). de modo que le cambiamos las etiquetas a esa frase. continue a su derecha. ya sabes que no debe estar entre las etiquetas <p> y </p>.. no? Pues ya está. en la siguiente línea... Lógico no? Vamos ahora a crear un título (h1) y un subtítulo (h2). Lo ves en la vista previa? Aunque en el código HTML pongamos un párrafo seguido de un título (en la misma línea de código). de modo que lo encerramos entre <h2> y </h2> y pasamos la etiqueta <p> de ese párrafo después de ese trozo de texto. "crear".. pero está muy bien usar las etiquetas de títulos por lo siguiente. color y subrayado y usar ese estilo en lugar de las etiquetas h1? Pues si. La importancia de los títulos en el posicionamiento de una página web Y tú pensarás. Para convertir ese trozo en subtítulo. Google y el resto de buscadores se pasean continamente por la red leyendo la palabras de cada página web. El título está claro. . pues el pimero lo hemos convertido en un título h1. bueno. mandándolo directamente a la línea siguiente. o mejor dicho. si puedo definir el estilo que me da la gana.

apareceríamos los últimos. No se debe abusar.. Terminado el sermón. pero tras leer esa sección sabrás lo que significa cada cosa. Lo pillas? Repito.. ve directamente a la página donde explico como registrarte en un servidor gratuito sin publicidad. pero recuerda apuntarte en un papelito (vale también una Hoja de Excel o del Notepad) los siguientes datos:  Nombre de usuario para el Hosting. pasamos a configurar el Html-Kit para poder subir la página de la lección al nuevo servidor. h2 etc. Para no repetir aquí cosas que ya tenemos explicadas en CCTW. dirección del FTP y además conoces la dirección de tu nueva web. con nombres distintos para crear más de una cuenta y por tanto tener más de una página web. sino. pero no olvides volver a esa sección y leer el resto de información cuando puedas. Otra cosa importante. y saber qué palabras poner sin que el texto del título pierda su sentido. no por lo dicho antes vamos a poner toooodos los textos dentro de un título.  Dirección de tu página web. es bueno incluir en estos aquellas palabras por las que queremos ser encontrados. Sería como aprender a conducir sin tocar nunca un coche. Una vez que entres allí aprenderas todos los conceptos relacionados. te será útil en el futuro. Mejor sigue las instrucciones al pie de la letra hasta el final y una vez que aprendas podrás hacer lo que te de la gana en otra cuenta. pues los buscadores pueden pensar (con razón) que estamos haciendo tampas y en lugar de posicionarnos mejor en sus listas. aunque también aprenderias cosas. je je je. Si no lo haces no podrás aprovechar las lecciones al 100%. con los que podrás escoger con más idea el hosting que más se amolde a tus necesidades. oki? Configuración del nuevo Servidor en el Html-Kit . Ya que sabemos la importancia de las palabras de los títulos. Ahora seguramente te suene a chino todo eso. No lo olvides. no es cuestión de saturar con títulos.  Contraseña de tu cuenta de Hosting. has de tener los datos anteriores. Y ante cualquier duda recuerda que en el Foro CCTW tienes una sección para cada consulta. oki? Es para que no te lies durante estas lecciones. Eso si. En esta sección por ejemplo. es bueno tener ya un sitio para alojarla (a esto se le llama Hosting) para ir viendo cómo se comporta la web en realidad. te darás de alta en el Hosting que quieras y podrás seguir con las lecciones siguientes. osea. Aprenderás allí a escoger un hosting tanto de pago como gratuito. úsalo sin que te de vergüenza preguntar tonterias y no te arrepentirás... contraseña. he aprovechado el título de arriba para colocar palabras que me interesan. claro. verdad? Aunque aún no esté terminada la página web. claro. Recuerda que puedes registrarte varias veces. Ha de tener que ver a la vez con el texto que hay debajo de él. con tu página web definitiva.. pero uno de ellos (hay muchos más motivos) es que algunas de esas palabras aparezcan destacadas y destacadas es. je je je. Buscando alojamiento para la página web Ya va siendo hora de ir subiendo nuestro trabajo a la red. Cuando termines de leer esa sección. para cuando regreses aqui para seguir las lecciones. es suficiente con aprovecharlos muy bien. o bien que aparezcan en negrita o bien que aparezcan dentro de un título tipo h1. olvida usar estas lecciones para crear la página que tienes en la cabeza. Es por eso que en los títulos de CCTW se intenta colocar estas palabras clave. El resto de motivos los iremos viendo en lecciones sucesivas. las palabras "página web". ambos sirven perfectamente para aprender. vale? Pues ya sabes. Y porqué unas páginas aparecen más arriba y otras más abajo en esas listas? Los motivos son muchos. ná de ná. Configurar Html-Kit para el nuevo alojamiento Ahora se supone que ya tienes los datos de los que te hablé en la página anterior. pues si lo hacemos com párrafos los buscadores nunca sabrán que se trata de un título y no tomarán esa palabra tan en cuenta. de modo que no tienes escusa. Por eso es mejor hacer los titulos usando h1. por tanto. nombre de usuario. 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. como "titulos" (alguien puede estas buscando como insertar títulos en una web y me interesa que aparezca esta página en ese caso). os invito a visitar la sección Hosting y Dominios. Si tienes mucha prisa y quieres ir al grano.  Dirección FTP con la que subir tus datos a la red. será muy bueno para el buscador pero los visitantes pensarán que se te ha ido la cabeza.

verás. (2) Aquí se pone el puerto de conexión. para tus trabajos la puedes llamar como te de la gana. Si te has registrado en Razy escribe aquí lo mismo que . En Razy son números aleatorios. (7) En ocasiones al registrarte en un servidor te indican la ruta inicial que has de colocar en el Ftp.. veamos qué datos con y donde van apuntados. como puedes ver en la imagen. donde pone Workspace escoge la opción Añadir Carpetas/Servidor FTP > Añadir Servidor FTP. Suele empezar por ftp. Otras veces en lugar de por ftp comienza por www. A veces es /www/ otras veces es /html_public/. como en la imagen de abajo: Aparece una ventana donde tienes que colocar algunos de los datos que apuntaste.nombredelservidor. En la imágen de arriba puedes ver los datos que yo puse para la configuración del Ftp de una cuenta creada en Razy (recomendado para seguir el curso). pero coloca un 21 a no ser que tu hosting te indique otra cosa. (6) Es solo el nombre que aparecerá en la ventana Workspace del Html Kit. (5) Activa esta casilla si no quieres tener que estar escribiendo la contraseña cada vez que quieras conectar tu Ftp.. cada hosting es algo firerente. Pon lo que más te guste. Para seguir el ejemplo de este curso haz como yo y así evitarás perderte cuando me refiera a esa carpeta.. Abre tu Html-Kit y en la barra de arriba. Ni yo se lo que es. Recuerdas cuando creamos la carpeta local para colocar dentro los archivos de la web? Pues vamos a hacer algo muy similar. claro. (4) La contraseña o password. (1) Aquí pon la dirección de tu FTP. Yo he puesto web-ejemplo-cctw-internet para diferenciarlo de la carpeta local que llamamos web- ejemplo-cctw-local. Luego. (3) Tu nombre de usuario para el Hosting que tengas.

Esto no lo domino bien. . se abrirá mostrando todos los archivos que hay en internet.  Si no logras conectarte verificando estas medidas.  No has pagado la conexión a internet este mes o el gato le ha dao un bocao al cable. Si se que unos servidores piden que se use el modo activo y otros el modo pasivo... Qué? Ha sido facil? Si tienes problemas con esto lanza tu pregunta en el Foro CCTW. je je. Ojo! Si al pulsar sobre el signo "+" de la carpeta azul ésta no llega a abrirse nunca sino que aparece una lupa buscando y tarda demasiado (vario minutos) sin que termine de mostrar los archivos de dentro.. etc. y la dirección.. Es esta señalada en la imagen de abajo: Si ahora simplemente pulsas sobre esa carpeta. Esa página la pone el propio hosting mientras que tú no subes la tuya. Nuestro nuevo Servidor FTP Ahora podemos ver una nueva carpeta en la ventana de la derecha (ver > Workspace) del Html-Kit. oki? y recuerda indicarnos cuál es tu hosting para poder ayudarte mejor.html sin contenido alguno o con algún mensaje de "En contrucción".. en la sección "Problemas de Conexión".. pregúntanos en el foro CCTW.pusiste en el punto (1) y te funcionará bien.  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. podría ser que:  Tienes en casa un cortafuegos o firewall que impide al HtmlKit conectarse. etc. Si lo pones al contrario quizás te cueste conectarte.  Los datos que has colocado no han sido escritos correctamente.  Estas en el trabajo (no diremos nada. El resto de opciones de esa pestaña y de las otras dos no hace falta tocarlas. Prueba a escribirlo a mano.. Para qué sirve? Simplemente indica al Ftp cuál será la carpeta raiz que se va a mostrar.) donde seguramente tienen un proxy que impide la conexión de FTPs. (8) Passive Mode. Pulsa en OK y seguirmos. Tiene que ver son los puertos que se usan para la conexión. Seguramente solo haya uno llamado index. Tendrás que darle permisos al HtmlKit en tu cortafuegos de windows. vamos. Pruebalo entonces desde casa. no es muy importante. un rollo. Lo entenderás con el tiempo. Razy por ejemplo pide que se active. A veces copiar y pegar no funciona (pues añade un espacio en blanco al final).

debajo de la carpeta anterior con un símbolo a su izquierda de color azul.. Vamos a subir el archivo index.html y el que tú ves ahora es el que ha colocado tu hosting para que se vea alguna cosa mientras que subes tu propio index.html que nos han colocado por defecto (Ojo.. no vayas a borrar el de la carpeta "web-ejemplo-cctw-local"!!). Ahora vamos a ver como nos las ingeniamos para subir los archivos desde nuestro des-ordenador hacia nuestro nuevo hosting usando el Ftp configurado antes. el de la carpeta "web-ejemplo-cctw-internet". Para ello hacemos clic con el botón derecho del ratón sobre la carpeta "web-ejemplo-cctw-internet" (en adelante la llamaremos simplemente "internet". Verás que poco tardamos en llenarlo de tonterias. Subir el index. Si no te aparece activada es porque ya está conectado: . Todas las webs tienen un index. le dirás que si. Cómo borrar archivos Para empezar vamos a borrar ese index.. pero por el momento nos tendremos que conformar con el método siguiente. no lo vas a estar. También tenemos el ftp configurado y lo podemos ver en la misma ventana. que me estoy cansando de ese nombre tan largo. pero como confias en lo que yo te diga. pero por el momento el Html Kit no nos permite esa opción.. Yo se que seguro seguro lo que se dice seguro." que significa Borrar.html al hosting. Haciendo clic en el signo "+" de la izquierda de la carpeta del ftp "web-ejemplo-cctw-internet" podrás ver qué archivos hay en tu servidor (hosting) en estos momentos. De nada sirve tenerlos en el Pc.html Este archivo index. je je) y del menú que se abre escogemos la opción "Connect" que significa "Conectar al servidor".html de tu página web con Html-Kit Ya tenemos unos cuantos archivos de nuestra web de ejemplo. Tenemos ahora el hosting totalmente vacio. Te preguntará si estás seguro. Dale y verás que aparece un archivo index. Al final aprendes inglés y todo. Dale sin miedo. ja ja ja. Estos símbolos azules indican que se tratan de carpetas de servidores (archivos en la red) mientras que los amarillos indican que son locales (están en tu ordenata). je je je. je je je. dentro de la carpeta "web-ejemplo-cctw-local". para que la gente vea tu web. Los podemos ver en la ventana Workspace del Html Kit. Ando investigando si hay algún mod para arreglar esto. Lo ideal sería pinchar desde la carpeta local y arrastrarlos hasta la otra. sus archivos han de estar en el hosting. Por tanto los tenemos que pasar desde la carpeta amarilla "web-ejemplo-cctw- local" hasta la carpeta azul "web-ejemplo-cctw-internet". Subir el primer archivo Como sabes. Para ello basta con hacer clic sobre él una vez con el botón derecho del ratón y escoger "Delete.html es el primero que lee el navegador cuando se teclea la dirección de cualquier web en él.

Selecciona el index. Despues hacemos lo mismo. . dentro de la carpeta donde guardamos los archivos de la web de ejemplo.html (la ruta sería algo así como C:\Documents and Settings\Usuario\Escritorio\mis-paginas-web\web-ejemplo-cctw). clic con el botón derecho del ratón y escogemos esta vez la opción "Upload" que significa "Subir": Se abre entonces una ventana donde debemos buscar. el archivo index.html y pulsa en "Abrir".

css y plantilla. verás algo parecido a la página web del ejemplo que estamos haciendo... no? Has de seleccionar los archivos uno por uno y hacerles el "Upload". Si no subes el archivo correspondiente.Conectar con el servidor con botón derecho del ratón sobre la carpeta azul y pulsando en "Connect".css. Lo mismo para el fondo. Ahora aparecerá en la ventana Workspace del Html Kit el nuevo archivo index. Si no te aparece activa tendrás que conectar primero el Ftp (botón derecho sobre la carpeta y pulsar "Connect". A la hora de seleccionar el archivo que quieres subir puedes tener apretada la tecla Shift de tu teclado (la flecha del teclado que hay a la izquierda apuntando hacia arriba) y así podrás seleccionar varios archivos de una sola vez. Veamos como: Crear nuevas carpeas Haz clic con el botón derecho del ratón sobre el nombre de la carpeta "web-ejemplo-cctw-internet". Lo que hay que hacer es crear primero la carpeta objetos en el servidor o hosting. Y si los estilos no se están respetando es porque no se ha subido aún la Hoja de Estilo (estilos. Cuando la seleccionas para subirla en lugar de subirse se abre mostrando sus componentes. 2. Por qué puede ser? Este es el error más frecuente al principio y por eso te pido que prestes atención a esto.Lo mismo para el siguiente archivo. como antes): . Si no se ve el buzón es porque no se ha subido (upload) el archivo del dibujo del buzón. Selecciona la opción New + Create New Folder. Recuerda: 1.css).Seleccionar un archivo y pulsar en "Abrir". pero esta vez es el nuestro. Concretamente verás esto: No se ve ni la sonrisa. pues lo acabas de hacer hace un momento con el index. ni el buzón ni se están respetando los estilos css. Si ahora visitas tu página web escribiendo en tu navegador la dirección.. ni la imagen de fondo. Obvio verdad? Pues verás como caes alguna vez...html.. 4. Pues ya está. Verás como no es posible subir la carpeta "objetos". Hazlo solo para los archivos estilos. estilo-general.html. no se ven los elementos.Botón derecho sobre la misma carpeta azul de nuevo y seleccionar "Upload".. je je. En la página siguiente aprendemos a subir el resto de archivos y así arreglamos el problema. Subir el resto de archivos al servidor Esto es fácil. 3.

es decir. si abres las carpetas web-ejemplo-cctw-local y web-ejemplo-cctw-internet en la ventana Workspace del Html Kit y si has hecho los deberes correctamente. fuera de cualquier carpeta) has de hacer el "clic derecho" sobre el nombre "web- ejemplo-cctw-internet". Recuerda. . Se abre una ventanita donde has de ponerle el nombre a la carpeta. hacer clic en "upload" (o en Connect antes si se ha desconectado) y después escoger los archivos a subir.. para subir ahora los archivos que hay dentro de la carpeta "objetos" de tu disco duro a la carpeta "objetos" del servidor. te ha de aparecer algo como lo que se muestra en la imagen de la derecha. En caso contrario el archivo no se subirá dentro de esa carpeta... es " objetos" (todo en minúsculas) no "Objetos": Ahora que ya tienes la carpeta "objetos" dentro de tu hosting.. es sobre esa carpeta donde has de hacer "clic derecho" para escoger luego "Upload". has de hacer clic derecho sobre la carpeta objetos azul. En definitiva. a ver si lo consigues. Pero si lo que quieres es colocar algún archivo "dentro" de una carpeta. Ojo! Por tanto. Al final. Ten en cuenta una cosa importante. Cuando quieras colocar un archivo directamente en la raiz de la web (la raiz significa en el primer nivel de la web. vale? Pues dale.

Por cierto. unos navegadores pintan ese borde por fuera de ese rectángulo. si quieres ver tu plantilla. se define el borde de un elemento (por ejemplo de una capa o div) escribiendo esto entre sus corchetes: border: 1px solid black . Imagina un rectángulo. basta con escribir su dirección en tu navegador. si tu dirección es http://yomismo. mientras que otros lo pintan por dentro del rectángulo. donde 1px es la anchura del borde. Aún nos queda mucho por hacer.. La línea anterior crea por tanto un borde de 1 pixel de ancho. así que.html en tu servidor después de haberla subido.onlinewebshop.. cada vez que hagamos algún cambio o mejora en el ejemplo podremos subirlo al servidor (o hosting) para ver como va quedando. No es emocionante? A partir de ahora. Su dirección será la misma que escribes para ver el index. Si le definimos un borde de 10 pixeles de anchura. Ya tenemos los archivos de lo que llevamos hecho de ejemplo en el nuevo hosting. paciencia y ánimo.html Es decir. Cuando quieras aprender más cosas sobre el Border solo tienes que visitar la sección Curso de Estilos CSS de ComoCrearTuWeb. seguido de /plantilla.net/plantilla.) nos propusimos definir los contenidos en el código html de las páginas dejando la definición del aspecto en la Hoja de Estilo. con una línea continua de color negro por arriba. Hay otras formas de definir el borde. abajo y por los lados del elemento al que se lo apliquemos. queda un poco cutre. pero otros que usen otros navegadores no la verán como nosotros queremos. Al final resulta que los visitantes que vean la web con un tipo de navegador la veran bien. Como los bordes son más aspectos decorativos que contenidos en sí.. Dónde se define un borde Si aún te acuerdas de lo explicado al principio de las lecciones (esperemos que sí.. La forma que aquí proponemos es sencilla y procura que la página web se vea idéntica usando cualquier navegador. solid significa que será una línea continua y black (negro) será el color que queremos que tenga la línea de borde. pero para el ejemplo nos basta con saber esto.html Como colocar bordes a la plantilla de nuestra página web Tal y como tenemos la plantilla. así que vamos a ponerle unos bordes a los lados para mejorar su aspecto.onlinewebshop. Cómo se definen los bordes En la Hoja de Estilos. pues cada navegador interpreta los bordes de un modo distinto y podría estropearnos el aspecto de nuestra página.net/ la dirección de la plantilla será http://testeando. Con los bordes hay quetener mucho cuidado. Así además podremos cambiarlo cuando nos de la gana con solo variar algunos detalles del archivo de estilo en lugar de tener que hacerlo en cada una de las páginas de la web. vamos a definirlos en la Hoja de Estilo. Pero en ocasiones quizas .

que como ya sabemos. Si no es así dímelo en el Foro CCTW vale? Bordes para el resto de capas Bueno.css: border: black 1px solid quedando esa línea así en la Hoja de Estilo: #navegacion {background-color: pink .... pues la anchura ya está definida por la capa que contiene a contenido (global). izquierda y derecha).. Acabo de descubrir una regla: "Si defines un borde en un elemento. basta con escribir (entre los corchetes del elemento al que se lo queremos aplicar) las líneas anteriores que queramos.. o al menos. (1 pixel definido en la capa navegacion más otro pixel definido para la capa cabecera). Vaya. abajo . eso espero. Con lo que llevamos hecho en el ejemplo ya podemos observar un fallo..css Ahora. como ya sabes.."... Ahora vamos a ir colocando bordes a varias de las capas de la plantilla.. pero con el Opera se nos estropea la estructura. border-right: black 1px solid } Si ahora guardas la Hoja de Estilo estilo-general. separadas por punto y coma ". la web no se verá bien en todos los navegadores!" Para arreglar esto basta con eliminar la cifra de la anchura para la capa "contenido". Abre tu Html Kit y abre el archivo estilo-general. Realmente no va a ser un problema eliminar ese width:800px. Esto.. Por tanto y para no tener unos bordes más gruesos que otros. ahora que vemos que esto del borde funciona. Veamos un ejemplo de aplicación de bordes Para practicar.. border: black 1px solid } Si ahora le pusieramos borde a la capa de arriba del todo (cabecera) por los cuatro costados. Ahora sí que se ve correctamente en todos los navegadores.lo que ya había .. A la capa o div llamada navegación le vamos a poner borde por lo cuatro costados (por arriba. más problemas. border-top: black 1px solid } .. Si no seguimos esta regla.css la guardamos y hacemos vista previa para ver que ha ocurrido. no podemos definirle el borde o se deformará la capa un poco". no le podemos asignar una cantidad numérica. vamos a dibujar algunos bordes en el ejemplo que llevamos hecho. .. solamente se le puede definir width:auto". vamos a ponerle borde a otras capas. nos aparecería un borde de 2 pixeles entre esa capa y la capa navegacion. no será necesario ponerle borde superior a la de abajo (pues le vale el borde inferior de la de encima.).css y haces vista previa en el archivo plantilla. Cómo podríamos hacer esto? Dibujar el borde solo por algunos lados Para dibujar el borde solo por un lado. es decir.....html podrás ver como aparecen bordes negros a los lados de la capa "contenidos"... así que eliminamos width:800px de la capa contenidos en estilo- general. se pone esta línea en lugar de la anterior: border-top: black 1px solid (dibuja el borde solo por arriba) border-bottom: black 1px solid (dibuja el borde solo por abajo) border-left: black 1px solid (dibuja el borde solo por la izquierda) border-right: black 1px solid (dibuja el borde solo por derecha) Si queremos dibujar el borde por varios lados pero no por los cuatro.prefiramos dibujar el borde solo por uno de los lados dejando sin borde los otros. recordando por supuesto la regla anterior que decía. ese elemento no puede llevar también definido un ancho concreto mediante el width. se hace añadiendo esto de abajo entre los corchetes de la Hoja de Estilo estilo-general. "Si la capa tiene definida una cantidad numérica para el width. border-right: black 1px solid ... a la capa cabecera le vamos a definir el borde solamente por ariba y por los lados. border-left: black 1px solid . Esto lo arreglamos ahora mismo eliminando en la definición de estilo de la capa contenido la propiedad float:left que en realidad no nos hacía mucha falta. se hace así: #cabecera { background-color: pink . Problema con los distintos navegadores El objetivo de toda página web es que se vea identicamente en cualquier navegador. border-left: black 1px solid ... dentro de los corchetes del elemento "contenido" escribe esto de abajo para dibujar un borde a la izquierda y un borde a la derecha: contenido { .. si le ponemos un borde inferior a la de arriba. se entiende esto?. teniendo en cuenta que cuando tenemos una capa encima de otra. ahora resulta que en Internet Explorer se ve bien.

Como verás.gif A continuación veremos paso a paso como poner estas imágenes en la parte alta y baja de la página web para conseguir un efecto más profesional. etc (el etc depende solo de tu imaginación). Para no mezclar mucho las cosas. verdad? Pues vamos allá. Solo es necesario tener un poco de destreza para dibujar lo que necesitamos con un programa de dibujo. por un lado escribimos unas líneas en el código html de la plantilla. no en el html de modo que se va a quedar así. como por ejemplo lazos.gif y curva-inferior. partirémos aquí de algunas imágenes ya hechas. De este modo no solo podemos conseguir el redondeado.. Ya sabes usar los bordes y la página tiene mejor pinta. cópiate estas dos imágenes y pégalas en la carpeta "objetos" para poder seguir estas lecciones. como el Paint del Windows. <div id="global"> <div id="curva-superior"></div> <div id="cabecera">Bienvenidos a mi web</div> . Se trata de imágenes con extensión gif y con fondo transparente. 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 "Copiar Imagen.html y por otro lado definiremos las propiedades de esta nueva capa en la Hoja de Estilos llamada estilo-general. . Luego seleccionas la carpeta de tu disco duro donde la quieres pegar (la carpeta objetos) y listo.. Esquinas redondeadas para las capas de la web Los bordes no quedan mal del todo..html con tu Html Kit e inserta esta línea justo entre la línea de la capa glogal y la de contenido: <div id="curva-superior"></div> Ha de quedar por tanto así: . que está en la carpeta objetos y que no se repita. Realmente no le hace falta pues lo único que queremos ponerle es la imagen de la curva de antes.css Abre el archivo plantilla. En el Foro CCTW hay una sección en la que se habla del Paint Shop Pro (PSP) que quizás te sea de ayuda para aprender a dibujar con el ordenador. Vamos a definirle un borde por los cuatro costados de este modo: #pie {background-color: brown .. pero yo que soy muy listo. Si ahora guardas la hoja de estilo estilo- general.css e inserta esta otra línea donde definimos las propiedades de la capa curva-superior: #curva-superior { background-image: url(objetos/curva-superior. Una capa nueva para el borde superior La imágen de la curva de la parte superior de la página web la vamos a poner como una imagen de fondo (un gif) en una nueva capa que vamos a insertar en la página web. sombras de colores. Por si no recerdas cómo se copiaban imágenes de otras webs. Ahora abre la hoja de estilos estilo-general... vacia. o similar.. border: black 1px solid } Y con esto quedan todas la capas bordeadas. En adelante la mejoraremos aún más hasta que quede totalmente profesional.. Guárdalas poniéndoles de nombre curva-superior. Las usaremos para este ejemplo de página web que estamos haciendo y te dejo a tí que crees las tuyas para que la pongas en tu propia web. No existe ninguna propiedad por el momento para conseguir mediante css ni html crear el efecto de redondeado de aristas o esquinas.. pero si consiguiéramos redondear las esquinas ya sería para sacar nota. he descubierto la forma de hacerlo de otro modo.. background-repeat: no- repeat } Qué hemos definido conesa línea de estilo? Le hemos dicho que la imagen de fondo será curva- superiorgif... Cómo? Simplemente dibujando el contorno redondeado en una imagen y colocándola después en la capa como imagen de fondo. justo que quede al principio de todas las demás. oki? Para empezar. etc. pero eso lo vamos a definir con estilos css.css y haces vista previa desde el Html Kit verás este resultado." (o algo parecido). esta línea no tiene contenido ninguno.gif) . Ya sabes. sino también cualquier otra forma que seamos capaces de dibujar. Ahora vamos con la capa pie. La vamos a llamar curva-superior...

una palabra mágica nueva.. lo que haremos será definirle en la hoja de estilo una anchura y una altura... Cuál? pues la misma que tiene la imagen y asi nos aseguramos que se ve entera. border-top: black 1px solid } y para poner color de fondo blanco (white) en lugar de rosa (pink) dejamos finalmente la línea así: #cabecera { background-color: white .. height: 12px } Has visto? Con width: 800px le indicamos que la capa ha de tener 800 pixeles de ancho y con height: 12px le decimos que su altura ha de ser de 12 pixeles. vamos a ver. como por ejemplo una letra o una palabra... Por un lado el borde entre la imagen y la capa donde pone bienvenido sobra y por otro lado. y es que haciendo vista previa con Internet Explorer (con el Firefox no ocurre) aunque la imagen sale prefectamente.. Vaya mierda.. aunque ahora parece que sobran dos cosas.. height: 12px . nada de imagenes con bordes redondeados. si guardas la hoja de estilo y haces vista previa si que se ve correctamente.. width:800px . <div id="pie">Este es el pié de página</div> <div id="curva-inferior"></div> </div> . el efecto será aún mejor. Esto se arregla muy fácil añadiendo en la hoja de estilo. que decepción.. Se ve exáctamente lo mismo que antes de insertar la capa. #curva-superior { background-image: url(objetos/curva-superior. si le damos color de fondo blanco (white) a esa capa rosa. aparece un espacio en blanco separando la imagen del resto de la página y queda bastante feo. aunque ahora encontramos otra cosilla que no nos gusta. cero de esa capa y por tanto nada de imagen de fondo. es más profesional. además de la altura y la anchura de antes. width:800px . que no vamos a explicar ahora pero que puedrás encontrar en el Curso de Estilos CSS. vale? 1.html llamada curva-inferior sin ningún contenido dentro.Creamos una nueva capa en plantilla. pero como no quiero que aparezca nada de eso. Borde redondeado para la parte inferior Lo mismo que hemos hecho con la parte de arriba podemos volver a hacerlo para la parte inferior de la página para conseguir un mejor aspecto.gif) . border-right: black 1px solid } El efecto conseguido. Para eliminar el borde solo de la parte de arriba de la capa cabecera eliminamos lo que pongo en rojo abajo: #cabecera { background-color: pink .. border-left: black 1px solid . Para arreglarlo basta con ponerle algo de contenido a esa capa. igual que la imagen de fondo. Lo que hemos de añadir es esto: #curva-superior { background-image: url(objetos/curva-superior.. overflow : hidden } Ahora. Te lo recuerdo paso a paso y así terminas de pillarlo. background-repeat: no-repeat . border-left: black 1px solid .gif) . .. Ahora es de esperar que se vea y además completa.. La colocamos al final de todas las capas: . por lo que vemos. border-right: black 1px solid . background-repeat: no-repeat . Bueno.. como la capa curva-superior no contiene nada de nada en su interior (en el html) el navegador la muestra con una anchura de cero y una altura cero. aunque no asombroso. qué ha pasado? Bueno. la cosa va mejorando.

border-left: black 1px solid . te dirá que ya existe y te pregunta si lo quieres sobreescribir.gif  plantilla.).css Recuerda que cuando hacemos un cambio en los archivos de nuestra página web. desde esa vez anterior tenemos varios archivos nuevos. como las dos imágenes de la carpeta objetos. derecha y arriba solamente. border-top: black 1px solid } Repito. los de arriba y abajo de la plantilla... width:800px .. vale? Así quedará todo un poco más claro y no lo olvidaremos (espero..Guardamos la hoja de estilo y obtenemos esta visión. height: 12px overflow: hidden } 3.html y la hoja de estilos estilo-general.Abrimos estilo-general.css Para subir los archivos plantilla. estos cambios solo están en nuestro ordenador.css e incluimos la definicion de la nueva capa curva-inferior que será igual que la de antes pero cambiando el nombre de la imagen de fondo: #curva-inferior { background-image: url(objetos/curva-inferior. De modo que para que los visitantes de la web puedan verlos. Por tanto..html y algunos archivos de la carpeta objetos. Si el archivo ya existía. Subiendo los archivos al servidor Aunque ya lo hemos hecho antes con el index. los visitantes seguirían viendo la versión antigua. right y top) y además le ponemos color blanco (white) de fondo a esa capa: #pie { background-color: white . Si no recuerdo mal. depués hacer clic de nuevo sobre el mismo sitio y escoger la opción "Upload. los archivos que tenemos que subir son:  curva-superior. vamos a repetir cómo se suben los archivos al servidor y así aprovechamos para subir estos últimos que hemos creado.gif) .html  estilo-general. Uploading. 2. .gif  curva-inferior..html y estilo-general...css basta con hacer clic con el botón derecho del ratón sobre la carpeta azul web-ejemplo-cctw-internet.Quitamos el borde de abajo de la capa pie (ya sabes. escoger la opción "connect" para conectar el FTP al servidor. seleccionar el archivo que queremos subir al servidor (puedes seleccionar esos dos de una sola vez manteniendo pulsada la tecla Control a la vez que haces clic en varios de los archivos) y listo.. 4 . eliminamos border: black 1px solid que da borde a los cuatro lados y añadimos los tres lados que queremos. Si no. he eliminado el border: black 1px solid que le daba borde a los cuatro costados y he colocado en su lugar el borde por la izquierda. y por otro lado también hemos variado la plantilla. left. tenemos que subir esos mismos archivos con los cambios realizados al servidor.". border-right: black 1px solid. background-repeat: no-repeat .

gif. vamos a partir de un banner genial. Para subir los dos archivos de las imágenes de la parte alta y baja de la plantilla que acabamos de usar en las páginas anteriores. cambiale el nombre. Bien. Luego. se hace del mismo modo. Ha de quedar una cosa así en la vista de Workspace del Html-Kit: Cómo colocar el logotipo con enlace en la web Ya se que aún es pronto para que tengais el banner o logotipo de la web listo.. el de CCTW que nos ha creado nuestra amiga Yaneth (con tu permiso.. oki? je je. fuera de la carpeta objetos y claro. Imagino que ya sabes copiar y pegar imagenes desde una web. pues el navegador los va a buscar dentro de esa carpeta. no aparecerán en la web. esta ves correctamente.). Si te ocurriera eso. simplemente borra los archivos que se han colado fuera de la carpeta y vuelves a subirlos. en tus experimentos puedes colocar lo que te de la gana . Dile que sí y listo. pues seguramente aún nisiquiera tienes claro de qué va a tratar. verdad? Pues copiate este banner que dejo abajo y pégalo dentro de tu carpeta objetos para seguir. oki? . te recuerdo que este ejemplo que estamos "fabricando" debes seguirlo al pie de la letra para no perderte en ningún paso. Cuando más adelante tengas el banner o logotipo terminado solo tendrás que sustituir uno por otro. es decir. En cualquier caso. En caso contrario los archivos irán a parar a la raiz del servidor. Ahora que lo has pegado en tu carpeta objetos. pero vamos a explicar cómo insertar el logo en la parte superior y cómo colocarle un enlace para que al hacer clic sobre él se dirija al visitante a la página principal. pero haciendo clic derecho sobre la carpeta objetos antes de elegir Upload. archivo actualizado. Ha de llamarse logotipo.

por qué no. Ya vimos cómo colocar una imagen y también cómo hacerle un enlace cuando vimos lo del buzón de correo. en otro div. y hemos quitado el mensaje de Bievenida de la capa cabecera para colocarlo directamente dentro de la capa publicidad. Así que.gif lo vamos a situar en la parte superior de cada una de las páginas. por lo que la capa correspondiente será el div llamado cabecera..css así que la abrimos y añadimos esto (le he puesto colores de fondo para ver donde está cada una): #logotipo {background-color: brown} #publicidad {background-color: pink} . Ahora toca colocar dentro el logotipo.. por poner algo mientras en ella. que mejor que crear dos divisiones dentro de ese espacio o capa? Así.com se pone la ruta de la página destino). vamos a crear dos divs dentro del div cabecera. te acuerdas? Pues ahora es casi igual (pero en lugar de mailto:tudireccion@email. quizás publicidad para ganar algo de dinero extra y pagarnos el hosting de la web. Los llamaremos. abre la plantilla. Ahora nos toca crear y darle propiedades a esa nuevas capas en la hoja de estilos estilo-general.. quedando esa línea de este modo: <div id="logotipo"> <img src="objetos/logotipo. Para facilitar la colocación de los elementos que pongamos en la cabecera. hemos metido las dos capas nuevas dentro de la capa cabecera. y ve a la vista de código para cambiar esta línea (te recuerdo que los códigos Html los escribo en azul y los de la hoja de estilos en verde): <div id="cabecera">Bienvenidos a mi Web</div> por estas otras: <div id="cabecera"> <div id="logotipo"></div> <div id="publicidad">Bienvenidos a mi Web</div> </div> Como ves. no? Pues según eso.. para en un futuro colocar una foto guapa o quien sabe. Escribimos la línea de la imagen dentro del div logotipo. será más fácil colocar el logotipo a la izquierda y dejar un espacio a la derecha. Este logotipo.html con tu Html Kit. publicidad. logotipo y .gif" width="270" height="80" alt="Haz clic aquí para volver a la página de inicio"> </div> Lo que he puesto dentro del alt="" es el mensaje que aparecerá en algunos navegadores si dejamos el cursor sobre el logotipo.

Modificamos en la hoja de estilos la capa publicidad para dejarla así: #publicidad {background-color: pink. haz vista previa y verifica que todo va bien. pues ya no necesitamos esos colores para saber dónde acaba cada una. je je je. haz memoria. #logotipo {background-color: brown . Por si no te acuerdas te ayudo un poco. je je). Así que dejamos cabecera así: #cabecera {background-color: white . float:right } Guardamos la hoja de estilo y hacemos vista previa en plantilla.gif" width="270" height="80" alt="Haz clic aquí para volver a la página de inicio"> </div> le añades esto que marco en negrita: <div id="logotipo"> <a href="index. float:left } #publicidad {background-color: pink . Para . margin-top:25px} Ahora. (ese 2 es un pixel del borde izquierdo más otro pixel de grosor del lado derecho de esa capa. en orden.. Tras eliminar eso vuelve a guardar la hoja de estilo.. 800-280-2=518 pixeles.html y a esta línea: <div id="logotipo"> <img src="objetos/logotipo. nos será más fácil encontrarlo todo. vale? Abres la plantilla. si lo deseamos.. Vamos a ponerle float:left a logotipo para colocarlo a la izquierda y float:right a publicidad para mandarla a la derecha. qué propiedad permite que podamos poner una a un lado y la otra al otro lado? A ver si te haces una chuleta! (en Mejico creo que se llama acordeón. si guardas la hoja de estilo y haces vista previa sí que se ve realmente bien. es decir. Ya pudes eliminarle los background-color a las capas logotipo y publicidad.gif" width="270" height="80" alt="Haz clic aquí para volver a la página de inicio"> </a> </div> Listo. border-right: black 1px solid . así que pongo directamente la línea.html para ver cómo ha quedado. A publicidad le daremos el resto. Para empezar vamos a darle una altura concreta a la capa cabecera. incluye esas dos lineas justo después de la definición de la capa cabecera de la hoja de estilo. una verdadera mierda . sino que tenemos preparado un hueco para poder poner un fondo que mejore el aspecto o publicidad. pues los grosores también ocupan un espacio). width:518px} Guardando la hoja de estilos y haciendo vista previa vemos que realmente estas dos capas están una encima de otra. En principio le daremos un ancho de 280 pixeles a logotipo. Vamos a arreglarlo un poco. width:280px} #publicidad {background-color: pink . #logotipo {background-color: brown . Así la capa gris que vemos que se mete dentro del espacio de publicidad respetará esa dimensión. Ahora solo queda bajar un poco el texto de Bienvenida y quizás hacer el tamaño de letra algo mayor (esto del tamaño de letra lo vemos luego). border-left: black 1px solid . Ahora no solo tenemos el banner. Así. pues es un poco más que lo que ocupa la imagen (270px). width:518px . height:85px} Con esto la cosa se arregla bastante. no? Solo nos queda ponerle el enlace hacia la página principal. Para guardar un cierto orden. Esto ya pinta mejor. Bien. Eso lo vimos ya. por ejemplo de 85 pixeles (un poquito más que la altura del logotipo que es 80px). width:518px .html"> <img src="objetos/logotipo. float:right .. Qué propiedades le damos a estas dos capas? Para empezar habría que definirles la anchura. exácto. width:280px . Cómo se evitaba esto ? Venga.

"Poster y Carteles". "Conciertos" y "Zona de Descarga". cada una de esas secciones principales pueden desglosarse o dividirse en otras subsecciones.. vamos a comenzar por uno sencillo para no asustarnos e ir cogiendo base. Para que entendais la idea. colocarías las secciones en el menú horizontal superior y al hacer clic sobre cada una de esas secciones. Antes de crear tu propia web es muy importante que tengas claro un par de cosas. habría que retocar algo. desglosar lo que quieres contar en secciones y subsecciones. Por ejemplo. como por ejemplo eliminar el margin-top:25px de la capa publicidad en la Hoja de Estilos. eliminando claro el texto que tenía de "Barra de Navegación" quedando al final así: <div id="navegacion"> <ul> <li>Sección 1</li> <li>Sección 2</li> <li>Sección 3</li> <li>Sección 4</li> ..cualquiera de esas dos cosas.. Si ves que se me olvida me lo recuerdas en el Foro CCTW! Cómo colocar el menú horizontal en enlace en la web Aunque más adelante veremos como crear menús más complicados en la parte superior. Las secciones que se me ocurren son. "Videos". Lo primero es saber de qué vas a hablar en la web y lo sengundo es tener más o menos claro cómo vas a estructurar esos contenidos. Luego. La sección descargas podría dividir se "Canciones". se abriría la página principal de esa sección mostrando en el menú vertical lateral (el de la izquierda que ya hemos colocado en este ejemplo) las subsecciones.."Disco 9". digamos que voy a crear una web de un grupo de música. Por ejemplo. pero es algo que veremos en su momento. te acuerdas? La lista completa con los enlaces sería algo así: <ul> <li>Sección 1</li> <li>Sección 2</li> <li>Sección 3</li> <li>Sección 4</li> </ul> Pues ese es el código Html que tenemos que poner dentro de la capa navegación. Creando el Menú Horizontal El menú horizontal lo vamos a colocar en la capa que hemos llamado navegacion. "Disco 2".. "Historia del grupo". Ve a la vista de código y encontrarás la línea de la capa navegacion: <div id="navegacion">Barra de Navegación</div> Borraremos las palabras Barra de Navegación y las sustituiremos por una lista. De ese modo sabrás qué secciones vas a colocar en el menú superior. "Letras". las secciones principales irian en el menú horizontal que vamos a aprender a crear ahora mismo. abre la plantilla. Las listas en Html empiezan con un <ul> y terminan con un </ul>. Dentro de una lista cada elemento de la misma empieza por un <li> y termina con un </li>. Colocando el Html para el menú Como siempre. "Trabajos musicales". Es decir.. A la hora de crear la web. "Presentación". Así que. mientras que las subsecciones irian en el menú lateral. en la sección "Trabajos Musicales" podrían aparecer las subsecciones "Disco 1". tendremos que retocar un poco el html de la plantilla y luego colocar las propiedades apropiadas en la hoja de estilo para la capa navegacion. en la que cada elemento será un enlace del menú. Es esa capa gris horizontal que hay debajo del logotipo.html con tu Html-Kit. como imaginarás.

html y añadir o eliminar líneas <li> Sección X</li> a este trozo de código de arriba. pues las listas son así.. si uno no va bien.. Verás que bien nos va a quedar . a mí me ocurre lo mismo. Al querer ponerle float:left a todos los elementos de la lista. Siempre recurro a la foto del apartado Margin o Padding para aclararme. vemos un auténtico churro... A cuál crees que hay que ponérsela? Pues por ejemplo a la línea #navegacion li.css con el Html-Kit y vamos a modificar la línea de la capa navegacion. que bien. Para ello le pondremos un margin al los elementos li de la capa navegacion. Imagino que sospechas que eso se hace o bien con el margin o bien con el padding. Nos faltan aún algunas cosillas. margin: 0px 10px 0px 10px } . Pero nosotros vamos a cambiar eso con solo poner la palabra mágica adecuada en la hoja de estilos. Pero ante la duda lo mejor es probar. que hasta este momento era así: #navegacion {background-color: gray . En la página siguiente aprenderemos a mejorar aún más el aspecto de este menú horizontal. hacemos esto: #navegacion li {float:left . que hace que los elementos floten y se desplacen hacia el lado que queramos. Para ello usaremos la propiedad float. border: black 1px solid } Para empezar vamos a intentar que todos los elementos de este menu de navegación aparezcan uno al lado de otro. si le damos una altura concreta a la capa. Abre el archivo estilo. </ul> </div> Cuando hagas tus experimentos y quieras añadir o eliminar enlaces en el menú horizontal. je je je. Sorpresa? Puedes ver que los elementos no aparecen uno al lado de otro sino un debajo del otro. sino a #navegacion {. como eliminar el punto negro de la izquierda de cada elemento del menú lateral y como ponerle unos margenes adecuados para separarlos un poco. list-style:none } Conseguimos esta otra vista previa de la plantilla. Ahora no aparecen esos punto. así que añadiriamos esta otra línea en la hoja estilo- general. hay que ponerle la propiedad list-style:none a alguna de las líneas de la hoja de estilo. usa el otro. list-style:none .. Normalmente. Añade esto: #navegacion li {float:left .. que para eso está. height:20px} Ahora sí que sale realmente como queremos.. Como era de esperar. Eliminando el punto negro del menú Horizontal Para eliminar ese puntito tan molesto. Vamos a probarlo a ver qué pasa. en línea.. verdad? Vamos a ver que pasa.css: #navegacion li {float:left} Haciendo vista previa vemos este resultado en la plantilla. el segundo igual quedando al lado del anterior y así con todos los demas. Esto es normal. parece lógico pensar que en la hoja de estilo hay que ponérselo a los li que haya dentro de la capa navegacion (hay que evitar que los li de la otra capa del menú lateral tomen esa propiedad). pero vamos a terminar de arreglarlo. Si haces vista previa de la plantilla verás algo así. Para ello ya sabes. solo tendrás que irte a la plantilla. border: black 1px solid . Reconozco que es un poco complicado saber si hay que usar el margin o el padding. se arregla todo. Vamos a colocarle height:20px a la capa navegacion (no a #navegacion li {. Acomodando el margen de los enlaces del menú horizontal A estas alturas ya debes saber como retocar los margenes para que en lugar de aparecer todos los enlaces del menú horizontal tan pegados se muestren un poco más separados.. ) y veamos que pasa: #navegacion {background-color: gray . el primero de ellos se irá hacia la izquierda. pues esa línea contiene las propiedades de cada una de las secciones del menú.general. Vamos a intentar separar cada enlace del menú. Si a definimos que todos los elementos floten hacia la izquierda.

lo hicimos de forma general. Como ves. pero lo repetimos para recordarlo. es decir. Lo que vamos a ver aquí es cómo darle la apariencia que tienen los menús de la web de ComoCrearTuWeb... pero al pulsar sobre ellos no te mandan a ningún lado.. Vamos a aumentarlo a 180px para que quede más centrado. se trata de escoger dos imagenes. Mejorando el menú lateral El menú lateral quedó más o menos bien. por si queremos que los del menú lateral se comporten de un modo distinto a los del menú horizontal o incluso distintos a otros elementos del cuerpo de la página web. Este el el resultado. pero aún podemos dejarlo mejor si los centramos. colores más vistosos. Dando margen al conjunto de enlaces Hemos visto como separar los enlaces entre ellos. La nueva línea de css que hay que poner a la hoja de estilos es esta: #navegacion ul { margin-left: 50px } Ahora tendremos este aspecto. Más adelante aprenderemos a crear varios tipos de enlaces. . aparecen rojos y sin subrayar y cuando colocas el cursor del ratón sobre ellos aparecen con fondo gris claro y con línea bajo ellos. Como ese menú irá creciendo hacia abajo conforme vayamos incorporando nuevas secciones (enlaces) al mismo. Ten en cuanta que lo que yo intento enseñarte es a crear el "esqueleto". basta con colocarle esto que os señalo en negrita al código inicial que pusimos en el archivo plantilla. Fíjate que ahora los enlaces del menú horizontal se comportan como los del menú lateral. quedando ahora así la plantilla. la tercera para el margen inferior y la última para el de la izquierda. pero estarás de acuerdo en que puede mejorarse.. imagenes mejores. Vamos a colocarle un margen a la capa navegacion ul por la izquierda de unos 50px. pues será solo cuestión de ponerle buenos gráficos. hemos dejado unos margenes de 10 pixeles por la izquierda y derecha de cada enlace del menú..html: <div id="navegacion"> <ul> <li><a href="#">Sección 1</a></li> <li><a href="#">Sección 2</a></li> <li><a href="#">Sección 3</a></li> <li><a href="#">Sección 4</a></li> </ul> </div> Con eso. Queda así ahora la plantilla de nuestra web. Ya sabes que cuando hagas tus propios experimentos basados en este ejemplo. je je je. Esto es porque cuando definimos las propiedades a las etiquetas a en la hoja de estilo. Si recuerdas. Con eso conseguimos mover a la derecha todo el grupo de enlaces. Según la línea de arriba. Ahora queda mejor. Para convertir los elementos de la lista del menú horizontal en enlaces. Como aún no sabemos a qué página mandar al visitante cuando hagan clic en ellos. la segunda para el de la derecha. Una se coloca arriba del todo del menú lateral y la otra justo debajo. Eso si que debes saberlo ya. Bien. si añades más enlaces a este menú horizontal tendrás que disminuir estas cantidades para centrarlo. no? Como no consigo centrarlos fácilmente vamos a hacerlo de otro modo. es decir. el orden de esas cifras era: la primera cifra para el margen superior. o no. hemos desplazado todos los enlaces un poco (50 pixeles) a la derecha. Parece un poco escaso. Vamos a cambiar los dos 10px por 20px para aumentar la separación entre ellos. en lugar de ponerle la ruta de la página destino le colocaremos un simple #. para TODOS los enlaces. serás capaz de mejorar su aspecto. lo haremos de un modo algo peculiar. la plantilla se ve ahora de esta forma. pero una vez sepas esto si tienes un poco de gusto y buena mano podrás dejarlo mucho más guapo que el mio. que pueden gustarte más o menos. ahí es donde entra el genio que llevas dentro. verdad? Pues vamos a ello. Eso hace que los enlaces se muestren como tales. Colocando enlaces al menú Solo nos falta ya colocarle los enlaces a los elementos del menú. pero eso da igual. pues una vez sepas hacer lo que te propongo a continuación.

.gif y menu-parte-inferior. la de arriba se la tenemos que poner a algún elemento de dentro de esa capa. Para remediarlo le vamos a poner un título al menú. lo suficientemente larga (hacia abajo) como para contener el máximo número de enlaces que tengamos previsto colocar en un futuro en cada uno de los menús laterales (digo cada uno porque cada sección tendrá su propio menú lateral). con lo que no nos vale (solo debe aparecer una vez y además arriba del todo). pues así no nos molestará a la hora de escribir los enlaces dentro. guarda estas dos imágenes en tu carpeta objetos y ponles estos nombres: menu-curva-superior. En cambio la imagen de abajo ha de ser bastante larga. pero acuérdate de luego guardar la plantilla con todas esas líneas seguidas. si una sección se llama "poesias". Si se la ponemos de fondo a los enlaces. Así. Yo aquí lo escribo en líneas separadas para que se vea más claro. Será fácil. La imagen de arriba será fija y tendrá una altura concreta. Las imágenes que vamos a utilizar para el ejemplo que estamos creando son las siguientes: Igual que hemos hecho en otras ocasiones. mientras que la imagen más corta. un poquito de Html y otro poco de CSS y asunto concluido. La idea de colocar las imágenes anteriores como fondos.gif Imagino que imaginas lo que toca hacer ahora. Para ello la imagen más larga se la vamos a poner de fondo a la capa menu. Estate atento y podrás aplicar luego todo esto a tu propio proyecto.. realmente es ese pero todas las líneas entre <ul> y </ul> han de estar seguidas una justo después de la otra para que el internet explorer muestre bien el menú. Retocando los códigos El código Html completo del menú lateral era por el momento este: <div id="menu"> <ul> <li><a href="#">Enlace 1</a></li> <li><a href="#">Enlace 2</a></li> <li><a href="#">Enlace 3</a></li> </ul> </div> Bueno. Como cada sección tendrá su propio menú parece buena idea que ese título sea el nombre de esa sección. esa imagen se repetirá con cada enlace..

Solo un problema. Qué ocurre? Al 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. .css. Y todo arreglado.css tal y como ha de estar ahora mismo. y estar definiendo propiedades para todos los h1 de la web.. Por qué? Pues porque ésta línea está después. Imagina una casa llamada Body.. Por ejemplo. que memoria. Por supuesto. lo único que hemos de retocar en el código Html de la plantilla. después de haber incluido (aunque aún vacia) la línea para definir los títutlos de dentro de la capa menu. Y si no se entiende.por ejemplo. te dejo la hoja de estilo-general.2em.. borde. text- decoration: underline . y es que como los navegadores leen desde arriba hacia abajo. #menu h1 {} Con esa línea lo que conseguimos es darla propiedades SOLO a los títulos que hay dentro de la capa menu. debajo de la línea donde definimos la capa menu. color:blue . font-weight: bold . los títulos se escriben igual que los párrafos. Te lo explico mejor. la de cocina.. Te acuerdas como se hacía? Je je je. Se entiende ahora? Espero que si. De modo que. Si recuerdas de lecciones anteriores. pero solo para los que están dentro del menú. también cambian las propiedades de los títulos que en un futuro pongamos en el contenido de la página. no una ele!). los elementos del baño y del salón siguen siendo rubios. pues si miras en la hoja de estilo-general. no de los del resto de la casa. que empezaba con un asterisco. anchura. El menú anterior con el título puesto quedaría entonces con este código Html: <div id="menu"> <ul> <h1>Título de Sección 1</h1> <li><a href="#">Enlace 1</a></li> <li><a href="#">Enlace 2</a></li> <li><a href="#">Enlace 3</a></li> </ul> </div> El problema que se nos presenta es que nosotros ya habíamos definido unas características para los párrafos tipo h1.) la que al final se muestra en el navegador es siempre la última.html será el incluir el título. por ejemplo. son esas las características que mandan y será inutil darle otras propiedades en la línea nueva que hemos puesto. así seguiremos cierto orden. pero en lugar de usar las etiquetas <p> y </p> se usaban estas otras. Esto se supone que sabemos arreglaro. je je. dímelo en el Foro CCTW e intento explicarlo mejor. y al elemento título (h1) le colocaremos ese fondo corto. es decir. enlaces.. Te acuerdas? Nosotros en lecciones pasadas pusimos una línea similar. oki? Te lo agradecería mucho! Bien. Dentro de ella hay unas cuantas habitaciones que llamamos Capas y dentro de cada habitación o capa hay varios elementos (párrafo. si escribo esto: * {el color del pelo será rubio} Todos (el asterisco * indica TODOS los elementos) los habitantes de la casa serán rubios. oki? Para no perdernos. <h1> y <h1> (es un uno. pondremos la palabra "Poesias" arriba del todo del menú. etc). sin tocar para nada los demás. En caso de que dos líneas digan distintas cosas para una misma propiedas (altura. verás que tenemos al final del todo esta línea: h1 {font-size: 1. por lo que ahora si las cambiamos. color del pelo. esa será la que manda. text-align: center} Al estar al final. como si fuera un título. Ahora imagina que le digo con esta otra línea: #cocina {el color del pelo será moreno} que todos los elementos de la cocina (la capa cocina) han de ser morenos. Cómo lo arreglamos? Fácil. pues la línea de la "capa" cocina solo habla de sus elementos. Queremos definir unas propiedades para los títulos del tipo h1. la situamos antes de la otra y listo. los que pertenecen a la capa menu.. Imagina ahora que la hoja de estilos le cambia los aspectos a los elementos de la casa. Abre el archivo estilo-general e incluye esta línea.

float:right . margin: 4px 0px 4px 6px } #menu h1 {} #pie { background-color: white . background-repeat: no-repeat . margin: 0px 20px 0px 20px } #navegacion ul { margin-left: 180px } #contenido {background-color: orange .Comparala con la que tienes por el momento y si no está igual. font-weight: bold . border-left: black 1px solid . float:left } #publicidad {width:518px . list-style:none .gif) . font-weight: bold . border: black 1px solid . background-repeat: no-repeat . height:85px} #logotipo {width:280px . text- decoration: underline . border-right: black 1px solid . margin:0px . width: 800px .gif) . text- decoration: none .size: 1. height:20px} #navegacion li {float:left . color:blue . float:left . border-left: black 1px solid . overflow: hidden } #cabecera {background-color: white . border-top: black 1px solid } #curva-inferior { background-image: url(objetos/curva-inferior. font-size: 16px } #navegacion {background-color: gray .1em. text-align: center} body {text-align: center } #global {width:800px . border:0px} p {text-align: justify} h1 {font-size: 1. text-align:left . text-indent: 15px} #menu {background-color: yellow . border-left: black 1px solid . text-align: center} h2 {font. padding:0px . color:blue . . margin-top:25px .2em. height:12px . oki? Debe tener ese orden para no liarnos lecciones sucesivas: * {text-indent:0px . margin:4px auto } #curva-superior { background-image: url(objetos/curva-superior. margin: 3px 10px 3px 3px } #menu li {list-style:none . border-right: black 1px solid. border-right: black 1px solid } #contenido p {margin: 5px 10px 0px 10px . width: 150px . sustituyela.

No te asustes. hacemos un preview o vista previa y.. No te vendría mal para ir repasando estilos.. text-decoration:none . Es por lo mismo que acabo de explicarte. text-decoration:underline . font-size:10px} Guardamos la hoja de estilo.html podemos ver esto: Bueno.css y haciendo vista previa a la plantilla.css que define a los títulos de dentro de la capa menu ha de quedar. he puesto casi arriba del todo las líneas que definen p. . width: 800px . Ya eres mejor que la mayoria!! Volviendo al menú Guardando estilo-general.. Recuerda además que la línea del asterisco ha de estar por narices la primera de todas.. pero lo veremos más adelante. Si no te aclaras mucho siempre puedes empezar desde el principio y puedes ir repasando porqué se puso cada cosa. por el momento así: #menu h1 {text-decoration:none . h1 y h2. overflow: hidden } a {color: brown .. verdad? Para eliminarle el subrayado se ponia en la hoja de estilo esto: text-decoration:none Para cambiar el tamaño del texto se pone esto otro: font-size:10px donde 10px es la altura de una letra en pixeles. quizás quede mejor sin el subrayado y con una letra más pequeña. no? De hecho lo has ido escribiendo tú mismo a lo largo de estas lecciones. Hay otras unidades que podemos usar en lugar de pixeles. El caso es que la línea de estilo-general. height:12px . Parece un poco lio tanto código. display: block } a:link {} a:visited {} a:hover {color:red . background-color: silver} a:active {} Si te fijas. verdad? Pero imagino que mirándo línea por línea más o menos sabes de que va todo. Te aseguro que muchos de los que se hacen llamar Webmaster no tienen ni idea de estilos ni de capas. vuelve a poner a cero los margenes y bordes de las capas que estén definidas antes que ella. Por qué? Pues por que si la ponemos en medio o al final. pronto. con un poco de más práctica estos códigos no tendrán secretos para tí..

bastante feo.. (no es necesario que lo hagas. Mucho mejor. Ya dijimos que la imagen superior se la ibamos a poner de fondo al título del menú. si que si.. Tan solo hace falta abrir los archivos de las imágenes con un programa de dibujo (por ejemplo el Paint de Windows) y colorear esas esquinas del mismo color que vayamos a poner el fondo de la web (que ahora es naranja. bueno. colorear las esquinas de naranja y volver a guardar esas mismas imagenes con el mismo nombre y extensión. espera un poco. Sigamos investigando a ver si logramos colocarle las imágenes.. impaciente! ) Amoldando la anchura de la imagen .gif) } Si guardas y haces vista previa verás esto: Nos vamos acercando eh? Vemos dos "fallos". Así que bastaría con eso. así que añadimos las palabras mágicas del fondo de imagen a la capa #menu h1. pero que pronto cambiaremos a otro más mono). verdad?. font-size:12px . vale? Colocando la imagen superior Las imágenes de fondo ya sabes ponerlas así que te dejo solo con esto. Venga. Te has puesto blanco? ja ja. así aprendemos más! je je je.. Evitando el blanco de las esquinas Esto va a ser rápido. no? Ahora cámbiale el tamaño por 12px que así quizás sea un poco pequeña de más. background-image: url(objetos/menu-parte-superior. te ayudo un poquito. Me encantan los fallos. El primero es que la imagen se repite por la derecha y el segundo fallo es que se ven las esquinas de color blanco y queda un poco feo. je je je. A veces parece mentira como cambia una web con solo ir retocando la hoja de estilos. quedando así: #menu h1 {text-decoration:none .

Si no lo ves así. Pero para no perder mucho tiempo te dejo aquí los dos archivos ya arreglados y en otro momento. con la anchura adecuada (que coincide con el ancho de la capa menu) y con las esquinas ya pintadas de naranja son estas dos: Guarda esos dos archivos (guárdate esas imagenes en objetos). Las nuevas imágenes ya retocadas Las nuevas imágenes. variando su anchura.html. Si ahora haces vista previa de nuevo. guarda la plantilla. no se le pueden poner dos. has de ver esto de la foto de abajo. cuando encuentre un software gratis de dibujo que esté bien os lo explico paso a paso todo (en realidad basta con decirle al programa que cambie el ancho de la imagen para que tenga 150 pixeles. Si no lo tienes seguramente cualquier otro programa sea capaz de hacer lo mismo. A ver si nos sale tan bien como este! Colocando la imagen inferior Solo se puede poner una imagen de fondo a un elemento. Este fallito se arregla con un programa de dibujo. ciérrala y vuelve a abrirla con el Html-Kit: Ahora si! Ahora vamos a por el fondo de la parte inferior. que es el ancho que le dimos a la capa menu. Por ejemplo con el Paint de Windows que imagino que lo tenemos todos. de ese modo coincidirán ambos anchos). sustitúyelos por los archivos que tenías en la carpeta objetos y seguimos. La razón por la que no le hemos puesto un único fondo que sea el dibujo del menú completo es por que no quiero estar .

Este otro fondo que será la parte inferior se lo vamos a colocar directamente a la capa menu. por qué puede ser? A ver. la imagen de fondo ha de alinearse por la parte de abajo.retocando la imagen cada vez que incluya un enlace más al menú. width: 150px . background-image: url(objetos/menu-parte-inferior.... Con esto que hacemos nos olvidamos de los fondos ya sea el menú muy cortito o muy largo. margin: 3px 10px 3px 3px ..html vemos esto (acuérdate. width: 150px . a ver. margin: 3px 10px 3px 3px . sencillamente genial! Mira: Qué te parece? Últimos Retoques . float:left .css: #menu {background-color: yellow . que en esa capa. text-align:left .. genial. ya lo verás. pero no conseguimos ver bien la parte inferior. guarda antes la hoja de estilo) la cosa queda. background-image: url(objetos/menu-parte-inferior.gif). float:left . Esto se hace así: #menu {background-color: yellow .. antes de hacer vista previa siempre guarda la hoja de estilo): Bueno. Para ello. Haciendo vista previa (como siempre. ahora se ve el fondo. Cómo lograremos esto? Pues solo hay que decir en la hoja de estilo. incluimos el siguiente trozo de código css en la hoja de estilo estilo-general. background-position: bottom } Bottom significa culo o parte de abajo.. 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 vemos la parte inferior que es la que nos interesa! Lo que nos interesa realmente es que la parte inferior del fondo se pegue a la parte inferior de la capa y así podremos ver la curva de la imagen que está en su parte más baja. Pues claro! Resulta que si no se indica nada.gif) } Haciendo vista previa de la plantilla... text-align:left .

queda perfecto. Como verás. Abre tu plantilla. genial. 6 pixeles por la izquierda y un cero patatero por la derecha. background-position: bottom . text-align:left .. Cómo lo arreglamos? El margen que vemos por su izquierda ha de estar definido por nosotros en algún lugar de la hoja de estilos.. es decir. después de la línea del Enlace 3. sino que estos crecen con él. incluyendo en su estilo algo así: #menu {background-color: lorange . margin: 4px 0px 4px 6px } y ahí está la solución. Vemos que tiene definidos unos margenes de 4 por arriba y por abajo. Ya sabes.. pones una idéntica y le cambias el número 3 por el 4.. añade un padding-top:12px (margen por arriba al título del menú) para separarlo un poco de la franja oscura de la imagen y listo. tú no? je je. no? je je je.. pero en cambio no lo tiene por la derecha y ese efecto es un poquillo feo. verdad? Sómos unos Cracks! .. en esta línea: #menu li {list-style:none . er. no tengo palabras. padding-bottom:5px } Más cosas? Venga vale. Ponle un 8px por ejemplo en lugar de cero y fíjate como ahora se ve mejor.. SI! Haz vista previa y pon el ratón sobre cada uno de los enlaces de este menú vertical. También vendría bien dejar un poco de margen por la parte inferior. width: 150px .. es decir. la sombra gris que aparece cuando haces eso tiene un margen por la izquierda.. seguramente en la línea que define los li del menú. float:left .. Fíjate ahora. no? Esto lo podemos arreglar colocando un padding por abajo de unos 5 pixeles a la capa menu.html con el Html-Kit si la tienes cerrada y añade un tercer enlace al menú. Ya para terminar de dejarlo perfecto.gif). Hay que ahorrar trabajo. background-image: url(objetos/menu-parte-inferior. pues parece que el Enlace 4 está demasiado pegado a la parte baja de la imagen. margin: 3px 10px 3px 3px . a ver. fenomenal. añades esto: <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> <li><a href="#">Enlace 4</a></li> </ul> </div> Si de nuevo haces vista previa verás como no hay que tocar para nada los fondos del menú. casi lloro de emoción.

je je) te dejo ahora los códigos de los archivos plantilla. si no sigues al pie de la letra las explicaciones y se te ocurre crear alguna capa más. es lo que deberías estar haciendo ya para ir asentando lo que aprendes y para ir ensayando etc. Es por eso que debes seguir todo esto al pie de la letra.. pues cuando más adelante te diga "en el párrafo donde pone Bienvenido haz esto y lo otro" no sabrás a qué me refiero. procura que sean exactamente iguales para no perderte.. Código Html de la plantilla. Claro que por el camino se te van a ocurrir ideas propias e incluso vas a querer ir remodelando lo que yo te explico para que el ejemplo se vaya pareciendo a tu idea de web. charset=iso-8859-1"> Toma nota e insertalo en todas las páginas que hagas. oki? Recordando el código que llevamos hasta el momento Si te has fijado.0 Transitional//EN"> <html> <head> <title>Page title</title> <link rel="stylesheet" href="estilo-general. Quizás no veas bien los acentos en tu web cuando la subas al sevidor. pero eso es algo que puedes hacer a la par. Así que.html y estilo-general. otros párrafos etc distintos a lo que aqui te comento lo único que conseguirás es perderte. oki? En otra carpeta puedes hacerlo a tu manera y de hecho. En ese caso no olvides insertar esta línea de código entre <head> y </head>: <meta http-equiv="Content-Type" content="text/html.html <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4. Por si acaso te has columpiado ya (seguro que si. de modo que la del ejemplo de estas explicaciones quede tal cual la explico. "en la línea 15 de la hoja de estilo cambia tal por cual".html"><img src="objetos/logotipo.css para que verifiques que son iguales a los tuyos. es porque tanto en Html como en CSS el orden que tomen las líneas tiene gran importancia. alguna capa menos. sin improvisar nada.gif" width="270" height="80" alt="Haz clic aquí para volver a la página de inicio"></a></div> <div id="publicidad">Bienvenidos a mi Web</div> </div> <div id="navegacion"> <ul> <li><a href="#">Sección 1</a></li> <li><a href="#">Sección 2</a></li> <li><a href="#">Sección 3</a></li> . En CSS 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 verás como todo cambia. otros textos. No solo es por eso claro. oki? A veces puede que te diga. siempre que en ellas se usen acentos. El efecto ahora es para morirse de gusto! GUAU!! Por cierto..)..css" type="text/css" media="all"> </head> <body> <div id="global"> <div id="curva-superior"></div> <div id="cabecera"> <div id="logotipo"><a href="index. sin cambiar nada de nada de nada. pero en otra carpeta distinta.

e incluso hacerles sanguias por la izquierda a la primera línea. que cosa. text-align: center} h2 {font. border:0px} p {text-align: justify} h1 {font-size: 1. color:blue . Acabo de poner un punto y en cambio sigue siendo un párrafo pues no le he colocado aún la etiqueta de cierre.size: 1. Así esto parece una poesia! je je je. Espero que Jorgens nos enseñe a ponerlos alineados a la izquierda. fijate! Salen todos centrados.2em. font-weight: bold .</p> </div> <div id="pie">Este es el pié de página</div> <div id="curva-inferior"></div> </div> </body> </html> Código CSS de estilo-general. Voy a ponersela justo aquí.</p> <h2>Y este es el tercer párrafo. que queda mucho mejor. color:blue . </ul> </div> <div id="contenido"> <div id="menu"> <h1>Título de Sección 1</h1> <ul><li><a href="#">Enlace 1</a></li><li><a href="#">Enlace 2</a></li><li> <a href="#">Enlace 3</a></li><li><a href="#">Enlace 4</a></li></ul> </div> <h1>Esta será la zona principal de la web</h1> <p>Este es mi segundo párrafo. text- decoration: none . o justificados.css * {text-indent:0px . text- decoration: underline . text-align: center} body {text-align: center } #global {width:800px . margin:4px auto } . font-weight: bold .</h2> <p>En pocas lecciones aprenderé a darle margenes para separarlos unos de otros. padding:0px .1em. margin:0px .</p> <p>Anda.

height:12px . padding-bottom:5px } #menu li {list-style:none . border-right: black 1px solid } #contenido p {margin: 5px 10px 0px 10px . overflow: hidden } #cabecera {background-color: white . border-left: black 1px solid .gif) } #pie { background-color: white . margin: 0px 20px 0px 20px } #navegacion ul { margin-left: 180px } #contenido {background-color: orange . border: black 1px solid . border-right: black 1px solid . height:85px} #logotipo {width:280px .#curva-superior { background-image: url(objetos/curva-superior. overflow: hidden } a {color: brown . height:20px} #navegacion li {float:left . float:left .gif). width: 800px .gif) . border-top: black 1px solid } #curva-inferior { background-image: url(objetos/curva-inferior. list-style:none . background-position: bottom . border-left: black 1px solid . text-indent: 15px} #menu {background-color: lorange . background-image: url(objetos/menu-parte-inferior. font-size: 16px } #navegacion {background-color: gray . border-right: black 1px solid. margin-top:25px . border-left: black 1px solid . float:left } #publicidad {width:518px . margin: 3px 10px 3px 3px . padding-top:12px . background-image: url(objetos/menu-parte-superior. font-size:12px . width: 150px . width: 800px . text-align:left . text-decoration:none . display: block } a:link {} . background-repeat: no-repeat .gif) . height:12px . background-repeat: no-repeat . margin: 4px 8px 4px 6px } #menu h1 {text-decoration:none . float:right .

#pieuno #piedos y #pietres así que ahora mismo. mejor que mejor. Como en este caso quiero crear tres huecos rectangulares. Los nombres que les voy a dar son. nos ha pasado como cuando hicimos lo del logotipo. Me refiero a enlaces al mapa de la web (importante para el posicionamiento de la página). y yo no voy a ser menos.). haz un esfuerzo!! je je. Recuerdas como arreglamos esto la otra vez? Venga. Lo arreglamos colocándole un float:left a cada capa. vale? je je je. Cuando quiero colocar varias capas que están juntas horizontalmente (una justo al lado de la otra) siempre las meto dentro de otra capa que las engloba..html en estos momentos: <div id="pie">Este es el pié de página</div> Cada uno tiene sus manias. a una página desde donde puedan contactarnos (muy útil para conocer siempre el punto de vista del visitante).html (fíjate que borro el texto "Este es el pié de página" que había antes): <div id="pie"> <div id="pieuno">pie uno</div> <div id="piedos">pie dos</div> <div id="pietres">pie tres</div> </div> Listo. no? Je je je. las escribo en el código de la plantilla. Así que abrimos la . En medio de estos dos espacios dejaremos un hueco con dimensiones idoneas para incorporar en un futuro. En lugar de aparecer una capa junto a la otra nos han salido una debajo de otra. Y este es el aspecto que ha de tener esa plantilla. Vamos ahora a la siguiente lección? Venga. Dónde va el pie de página? Como bien habrás adivinado el pie de página lo vamos a colocar dentro de la capa #pie (tampoco hay que ser muy adivino. El pie de página de nuestra web Ves como poco a poco esto va tomando forma? Ha llegado el momento de meterle mano al pie de página.. unos enlaces al futuro foro. Os gusta? je je je. Este es su código en la plantilla. otra para el espacio central que en principio usaremos para poner publicidad y otra para los enlaces de la derecha. background-color: silver} a:active {} Bien. para colocar un poco de publicidad que nos ayude a pagar un buen hosting sin necesidad de poner un centavo de nuestro bolsillo. la vista previa se ve así: Seguimos? Colocar las capas en línea Como era de esperar. Ha de quedar así en la plantilla. top y directorio de nuestra web (todo eso lo aprenderemos más adelante). pero si nos salen gratis..html y coloco una palabrita dentro para ver como van quedando cuando haga vista previa. o bien otra serie de enlaces amigos. seguramente. 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. Los hobbies están muy bien. y todos uno al lado del otro. Vamos a intentar colocarle un hueco a la izquierda y otro a la derecha donde colocaremos accesos directos (enlaces) a diversas secciones de la web que conviene que el visitante tenga a la vista en todo momento. text-decoration:underline . Así me es más fácil aplicarle luego los estilos y queda todo más recogidito. o bien una ventanita donde colocar las últimas noticias o avisos que queramos dejar o.. crearé tres capas. Esto es para ver la progresión que hemos logrado. Esas tres capas las voy a meter dentro de la capa #pie. tonterias que se me ocurren! ja ja ja.a:visited {} a:hover {color:red . vamos! Pero antes os dejo una chorrada. una para los enlaces de la izquierda.

width:498px } #pietres {background-color: red . por guardar un orden): . float:left} #pietres {background-color: red . pero los bordes de la capa #pie sí que están dibujados.... Ves esa línea negra fina que va por la parte de arriba de las tres capas? Pues esa línea es la capa #pie.. No te preocupes por los colores. pero parece que al incluir estas tres capas el borde ha desaparecido tal y como os señalo con círculos rojos en la imagen de arriba... Lo que ocurre es que cuando una capa no tiene ningún contenido. su altura es 1px y por eso tiene forma de línea. no? Pues No. #pie {border-left: black 1px solid ... la capa #pie síi que tiene contenido..hoja de estilos estilo-general.. float:left . debería aparecer un borde por sus partes izquierda. la altura que toma es cero y por tanto en lugar de ser un rectángulo se queda como una línea... que serán unos. Como no tiene ningún contenido dentro. width:150px } #piedos {background-color: green . Le vamos a dar un valor a #pieuno y #pietres de por ejemplo 150px y a la #piedos el resto. Ahora les daremos dimensiones de anchura colocándoles un width. Venga vale...... 800px .. Como le he escrito a estas tres capas la propiedad float.. float:left . las capas están flotando sobre la capa #pie por lo que es como si #pie no tuviera ningún contenido..2px (del borde izquierdo y derecho) -150px . border-top: black 1px solid .. float:left . width:150px } Dónde está la capa #pie? Ahora vamos a comprender una cosilla de las capas y del css que nos vendrá muy bien en el futuro..css y definimos esas tres capas colocándole un color de fondo para ver bien dónde empieza y dónde termina cada una (te coloco también las líneas de antes y después para que veas donde añadir estas líneas. como las tres nuevas capas están dentro de la otra capa llamada #pie.. pues así está definido en la hoja de estilos. pero dónde está entonces la capa #pie y sus bordes? Pues están justo encima de las tres nuevas capas.... border-right: black 1px solid .. float:left} #curva-inferior { background-image: url(objetos/curva-infe.150px (de las otras dos capas) = 498pixeles... float:left} #piedos {background-color: green .. Quizás no me creas.. ni más ni menos las otras capas #pieuno. en cuanto tengamos el pie listo le pondremos otros más decentes.. .: #pieuno {background-color: brown . como verás las he colocado justo después de la capa #pie. Te señalo la capa #pie en el dibujo para que lo veas más claro: . En teoría... derecha y arriba. A ver que sale con esto. Pero.. Ya se van colocando en su sitio. #piedos y #pietres. Si haces vista previa te encontrarás con esto: Que habrá pasado con el borde? Pues te lo explico. } #pieuno {background-color: brown .

Las otras tres capas se salen de la capa #pie.css y define una altura de. Y por qué las tres capas de dentro no ocupan esa misma altura? Pues porque si no le indicamos la altura que queremos que tenga.. "Siempre que pongas una capa en tu web has de colocarle algo de contenido. por ejemplo. float:left . border-top: black 1px solid . border-right: black 1px solid } #piedos {background-color: green .. Quedaría así la capa #pie (Recuerda que siempre escribo en negrita los códigos que incluyo o modifico): #pie { background-color: white . float:left . #piedos y #pietres ahora parecen estar dentro. border-left: black 1px solid } Con eso hemos puesto un borde por la derecha de la capa #pieuno y otra por la izquierda de la capa #pietres. aunque realmente están "flotando dentro". de modo que el código de esas tres capas quedaría así: #pieuno {background-color: brown . pero en cuanto aparezcan dos o tres veces en las lecciones seguro que te acabas familiarizando. Más tarde podremos retocar esa cantidad para amoldarla a nuestro gusto. width:498px } #pietres {background-color: red . Como verás. border-left: black 1px solid . pero al darle altura ocupa el espacio que necesitábamos y queda pintado el borde como queríamos. Ve a la hoja de estilos estilo-general. "pie dos" y "pie tres". Nosotros no vamos a darle altura a esas tres capas. width:150px . Lo mismo te va a ocurrir con el resto de cosas. una letra. quedan justo debajo. ahora ya dibujar un borde no guarda muchos secretos para tí. } Haciendo vista previa vemos que hemos conseguido esto: Ves? Las tres capas #pieuno. Y eso es lo que vamos a hacer. pero en realidad son solo unos pocos trucos los que necesitamos conocer. Parece un poco complicado. width:150px . 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. 65px a la capa #pie. Los bordes si que debes ya saber colocarlos. por ejemplo un punto. El efecto conseguido es este: . aunque la primera vez te sonó a chino. la primera vez no se entiende muy bien. Entiendes ahora por qué no vemos los bordes? Pues ya sabes. en este caso las palabras "pie uno". Siguen sin ser contenido de la capa #pie. border-right: black 1px solid . pero fuera de #pie. ocuparán solo el espacio necesario para contener lo que tengan dentro. una imágen o una capa siempre que no tenga un float". una palabra. height: 65px . Esa línea negra rodeada de rojo es todo lo que nos queda de la capa #pie. Lo mismo hubiéramos conseguido colocando borde a ambos lados de la capa #piedos o cualquier otra combinación. La verdad 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. Bordes para separar las tres capas Vamos a separar visualmente las tres capas dibujándoles un borde. pues como son flotantes. float:left . verdad? De todas formas te ayudo. pues conforme le añadamos el contenido a cada una iran llenando todo ese lugar.

Dentro del código Html de la plantilla. Ahora que has visto de nuevo cómo colocar bordes. 3. oki? Ejercicio de práctica Como ejercicio de prácticas. vamos a quitárselos pues el efecto no queda del todo bien. lo mejor es usar una lista para ello. Así terminarás de familiarizarte con todo esto. Si el ejercicio te sale bien y funciona. oki? Pero inténtalo de verdad antes de mirar el código de abajo. Como eso parece una lista. oki? #pie {border-left: black 1px solid .. width:150px } #piedos {float:left . width:150px } Cómo colocar los enlaces del pie Los enlaces ya vimos como se colocaban cuando hicimos los menús. En este caso van a ser tres enlaces en la capa #pieuno y otros tres en la capa #piedos colocados uno encima de otro.html. height: 65px } #pieuno {float:left . . verdad? Vamos allá... como siempre nos pasa antes de retocar la hoja de estilo. border-top: black 1px solid . 2 1.. venga! El código CSS de las 4 capas del pie han de quedar como te indico abajo. a ver si lo consigues. border-right: black 1px solid .. Como ejercicio de repaso te propongo algo. enhorabuena! pero pon este otro para que así tanto tú como yo tengamos el mismo y así no te pierdas en las lecciones siguientes. que el fondo de #piedos sea gris claro (silver) y elimina los bordes que dejamos antes.. background-color: silver} #pietres {float:left . intenta hacer que tanto el fondo de #pieuno como el de #pietres sean blancos. en la parte correspondiente a la capa #pieuno coloca esto: <div id="pieuno"> <ul> <li><a href="#">Foro Ejemplo</a></li> <li><a href="#">Contactos</a></li> <li><a href="#">Nos Enlazan</a></li> </ul> </div> Y haz lo mismo con el Html de la capa #pietres con este otro código: <div id="pietres"> <ul> <li><a href="#">Directorio</a></li> <li><a href="#">TopSite</a></li> <li><a href="#">Mapa de la Web</a></li> </ul> </div> Haciendo vista previa. nos encontramos este churro. width:498px .

Esto es lógico. je je La tercera opción es sencilla también.. vamos a encontrarnos con que el punto no aparece. font-size: 12px } Si te fijas en la vista previa.... que vamos a colocar por seguir un orden justo después de la línea de la capa #pie... La segunda opción es poner ese código dentro de las propiedades de las capas #pieuno li y #pietres li. por ejemplo alguna vez en el contenido de la web... Como 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.. lo malo es que te metan en el ojo un palo. pues el texto "pie dos" no pertenece a un elemento de lista ( li) y por tanto el estilo definido no le afecta para nada.css. y es colocar ese código en una nueva línea que indique que todas las listas de dentro de la capa #pie han de salir sin esos puntos.. Ya puedes imaginarte un poco cómo debemos arreglarlo para reducir un poco el espacio que hay entre ellos. y lo malo es que tenemos que crear dos líneas más de codigo css y no tenemos ganas de escribir tanto. pero veamos qué posibilidades tenemos. Cómo ponerle el tamaño de letra algo menor a esas listas Para definir el tamaño de letra se usaba font-size. . border-right: black 1px solid .. pues aunque en la hoja de estilo le habiamos indicado al navegador que pusiera todos los margenes a cero (con la famosa línea del asterisco) ahora nos encontramos con un margen en esa lista y .. Esa tercera opción se consigue con esta nueva línea.. Lo bueno es que funciona... menos el texto de la capa #piedos. no? Inténtalo tú.. oki? je je je.... asi que en esa misma linea que hemos creado indicamos un tamaño de 12px de este modo: #pie li {list-style: none .. eliminarles el punto negro de la izquierda y reducirles un poco el tamaño de la letra. Así que desechamos esta opción. Cómo eliminar el punto negro a las listas Basta con poner list-style:none en el lugar adecuado de la hoja de estilos estilo-general.. Lo bueno de esta opción es que con solo eso ya no tenemos que preocuparnos más en los dichosos puntos. Lo malo? Que si alguna vez queremos hacer una lista con sus puntos.. width:150px } .. verás como todos los textos del pie son ahora menores. aquella que comienza con un asterisco *. ja ja ja.. height: 65px } #pie li {list-style: none } #pieuno {float:left ... border-top: black 1px solid .. Aminorar la distancia de separación entre los elementos de las listas Es curioso. Y papeleta solucionada.. Lo bueno es que matamos dos pájaros de un tiro y lo malo. #pie {border-left: black 1px solid . La primera puede ser incluir ese código dentro de la primera línea de la hoja de estilos.

. margin:0px . de color marrón todos. Pero como este nuevo . je je. nada de indentado. sino como lo tenemos hasta ahora.además bastante grande (al menos usando el Internet Explorer). background-color: silver). La cuestión ahora es. padding:0px .. lo conseguimos gracias a la hoja de estilos. Una nueva clase de enlaces Anteriomente hemos dicho que los estilos para elementos que solo aparecen una sola vez en una página web concreta los definiriamos con la almohadilla # antes de su nombre. Pero repito. recuerdas? Ha de quedar así: <div id="pieuno"> <ul> <li><a href="#">Foro Ejemplo</a></li><li><a href="#">Contactos</a></li><li>. y si quiero tener varios enlaces con aspectos distintos? Pues como siempre. el de poner todo el código html de la lista en la misma línea. al llevar asterisco afecta a todos los elementos de la web.. guarda la hoja de estilo y haz vista previa para ver cómo ha quedado.css que por el momento están afectando a los estilos son las siguientes: * {text-indent:0px . display: block } a:link {} a:visited {} a:hover {color:red . etc.. Vamos a probar el truco aquel que te conté. </ul> </div> Pues sí. Así que quita ya el color gris claro (silver) que habíamos puesto a la linea de la capa #piedos (elimínale el . Además en el ejemplo no lo dejaremos así.. Bien. oki? Sería añadiendo la propiedad font-size:12px a la línea de definición de la capa #pieuno. sin bordes. border:0px } a {color: brown . te digo cómo y pasamos de la explicación por el momento pues me llevaría unas cuantas páginas convencerte del porqué. pues a simple vista no tiene mucho sentido. oki? <div id="pietres"> <ul> <li><a href="#">Directorio</a></li><li><a href="#">TopSite</a></li><li><a.. Tendrán por tanto margenes nulos. etc. En fin.. Con esto queda por terminado por el momento el pie de página. porque como ya hemos dicho antes. text-decoration:none . El problema es que no sabría explicártelo muy bien. la de la capa #pietres. je je je.. Aún puedes disminuir algo más el espaciado entre los enlaces de esas capas. para todos los enlaces de la web. text-decoration:underline . background-color: silver} a:active {} Y por qué incluyo la línea del asterisco *? Sencillo. era eso. </ul> </div> Y lo mismo para la otra lista.. eso no lo hacemos en este ejemplo. Las líneas de estilo-general. Si en lugar de 12px disminuyes ese valor verás como el tamaño del texto no varia (pues ese tamaño está definido en la capa #pie li) pero sí decrece el espacio entre los tres enlaces. esa línea. oki? Úsalo tú en tus cosas si lo necesitas. pero el caso es que funciona. Vamos a ver la forma de crear una nueva clase de enlace con otras propiedades sin que por ello se pierda el tipo ya definido.. Eso nos da un tipo de enlace general. Definir enlaces de distintos tipos Ya vimos cómo conseguir cambiar el estilo de los enlaces de toda la web de una sola vez.

enlaceuno:visited {} a.css. primero escogemos un nombre. lo definimos del otro modo.) tengo que indicar en esa línea de Html que es de la clase . Si alguna está repetida dos veces. Sigue leyendo estilo-general. Si ahora quiero que tome otras propiedades (color.estilo de enlace si puede que se repita para varios elementos dentro de una página.css en la parte general (la antigua). le quita los bordes y el indentado. sin espacios ni símbolos raros ni empezando con un número. con un punto en la hoja de estilo y llamándolos con class="loquesea" en lugar de con id="loquesea" en el html de la página. serán respetados para aquellos enlaces donde indiquemos que son de la clase . subrayado. ve que existe un enlace y ve que hay hoja de estilo en el Head así que empieza a leerla por el principio.. toma la nueva por buena y elimina la antigua.enlaceuno y lo escribimos así en estilo-general.enlaceuno Y cómo se indica a un enlace que ha de mostrarse según lo definido en la clase "enlaceuno"? Un enlace normal tiene esta forma: <a href="#">Soy un enlace normal</a> Este enlace tomará la forma que tengamos definida en la hoja de estilo estilo-general. un poco trabajoso. la del asterisco y le da margenes cero. Como siempre. Para definir una clase de enlace nueva. justo al final (no escribas este código aún en tu hoja de estilos): a. la clase enlaceuno.enlaceuno:hover {} a. tamaño.css y ve que primero se han definido una serie de propiedades para todos los enlaces y se los da (los antiguos) pero al seguir leyendo ve que está definido en esa misma hoja de estilo una nueva clase.enlaceuno a todos los enlaces del pie de página. todo en minúsculas. te enseño otro modo más fácil y rápido.enlaceuno y se hace añadiendo esto: <a class="enlaceuno" href="#">Ahora soy un enlace de la clase enlaceuno</a> Qué ocurre entonces? Cuando alguien visita tu web el navegador primero mira todo el html. Ahora que has aprendido a definir una clase de enlace y a aplicarlo. pero como estos nuevos están colocados después. Ve la primera línea. Aplicando una clase de estilos solo a los enlaces de una determinada capa .enlaceuno:link {} a. verdad? Sería así (no lo hagas aún): <div id="pieuno"> <ul> <li><a class="enlaceuno" href="#">Foro Ejemplo</a></li><li><a class="enlaceuno" href="#">Contactos </a></li><li><a class="enlaceuno" href="#">Nos Enlazan</a></li> </ul> </div> y lo mismo para los enlaces de la capa #pietres. Un modo es colocando el código class="enlaceuno" a cada una de las líneas Html de los enlaces del pie. de modo que añade esas nuevas propiedades a las propiedades antiguas.enlaceuno {} a.. Convirtiendo enlaces a la nueva clase Vamos a darle la clase . Le pondremos el nombre .enlaceuno:active {} Los enlaces definidos en las otras líneas que ya teníamos actuan sobre todos los enlaces.

Con esto nos ahorramos escribir nada en el código Html de la plantilla. Abre estilo-general.. justo al final: .. je je je: #pie a {color: blue. Se trata de definir en la hoja de estilos que todos los enlaces que pertenezcan a una capa determinada deban seguir esos estilos. como no contiene textos me da igual... text-decoration:underline . background- color: white } #pie a:active {color:black} Ahora se ven un poco mejor.. así que puedo colocar esto al final de la hoja de estilo: #logotipo a {} #logotipo a:link {} #logotipo a:visited {} #logotipo a:hover {background-color: white } #logotipo a:active {} Ahora se ve el logotipo sin esa sombra gris. debajo del logotipo. pero bien explicado seguro que lo consigues.. Por qué aparece? Pues simplemente porque al tener el logotipo un enlace hacia el index.. Qué propiedades le pondrías para evitar eso? Realmente. esta se abre mostrando el resto de subsecciones. presentables.html..css y añade (sin eliminar el antiguo código de los enlaces) esto. verás.html se convierte la imagen en un enlace adoptando los estilos definidos para los enlaces en la Hoja de Estilos. podemos eliminar ese fondo gris que aparece al poner el ratón sobre el logotipo. text-decoration:underline . Se trata de insertar un menú desplegable que colocaremos donde ahora tenemos el menú horizontal. 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 (:hover). Se trata de un menú horizontal en el que cuando colocas el puntero de ratón sobre una de sus secciones. verás como todos los enlaces del pié de página han tomado las nuevas propiedades sin necesidad de tocar para nada el código Html de la plantilla. mágico. display: block } #pie a:link {} #pie a:visited {} #pie a:hover {color:red . Por si alguien no sabe a lo que me refiero lo explico un poco.html. Eliminar el fondo del enlace del logotipo Ahora que sabemos variar las propiedades de solo algunos enlaces determinados sin variarlos todos.. text-decoration:none . display: block } #pie a:link {} #pie a:visited {} #pie a:hover {color:black . verdad? je je Como esas propiedades son realmente horribles.. Ya sabes algo más de los enlaces. 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. #pie a {color: red. text-decoration:none . Eres todo un maestro! Cómo instalar un menú desplegable en una página web Se que esta será la lección estrella.. así que trataré de explicarlo bien porque para principiantes puede resultar un poco complicado. cámbialas por estas otras para que al menos sean. background- color: yellow } #pie a:active {color:blue} Si guardas la hoja de estilo y haces vista previa ahora a la plantilla. Es un recurso muy bueno pues permite tener multitud de enlaces en una página web sin .

.necesidad de tenerlos todos visibles continuamente..gif (en la carpeta "objetos")  submenu-abierto. una vez tienes todos esos archivos guardados en las carpetas correspondientes seguimos con las instrucciones. Conseguir los archivos necesarios Para instalar un menú desplegable como el que vamos a ver necesitaremos unos cuantos archivos que contienen el código necesario para definir las distintas secciones.css" type="text/css" media="all"> </head> . el estilo css que tendrá. Con esta línea conseguimos por tanto que la plantilla lea los estilos de la hoja de estilos del menú. Como ya sabes. <head> <title>Page title</title> <link rel="stylesheet" href="estilo-general.gif (en la carpeta "objetos")  fondo-no-activo. para que una página web pueda leer una hoja de estilos hay que colcocar dentro del head una línea de código. pero por ahora hazme caso y sigue las instrucciones tal cual te las muestro.css y es el primero de los archivos de la lista anterior. En el primero están los archivos que has de pegar en la carpeta objetos y en el segundo los que tienes que colocar directamente en tu carpeta raiz. Si sigues estas páginas conseguirás colocar en tu plantilla este menú desplegable. Deberias saber hacerlo! je je je.css (en la raiz de tu web)  no-tocar. Trata de hacerlo tú mismo sin mirar más pistas... Además.. Despues de descargarlos y guardarlos en la carpeta que te indique. Por suerte ya está terminada de modo que no vamos a entrar a analizarla. lo que nos ahorra espacio en la web para otras cosas. oki? Lo importante es que funcione! je je je.gif (en la carpeta "objetos")  submenu-cerrado. No te preocupes porque en esta web encontrarás todos ellos. . resulta bastante elegante. Cuando termines la lección y tengas tu menú desplegable en tu página web de ejemplo sabrás sin problemas colocarlo más tarde en tu propia página web. que definan el movimiento de desplegue del menú etc. Más tarde puedes hacer tus propios experimentos. Bien.css" type="text/css" media="all"> <link rel="stylesheet" href="estilo-menu-desplegable. Te acuerdas de la que pusimos al principio para la hoja de estilos estilo-general. Descárgalos y guardalos en el lugar donde se indica en cada uno de ellos:  estilo-menu-desplegable. así que hazme caso en cada uno de los pasos que te muestro y síguelos al pie de la letra para no perderte.gif (en la carpeta "objetos")  fondo-activo. El código de la cabecera (head) de tu plantilla. Recuerda dejarles los mismos nombres que yo he colocado..txt (en la raiz de tu web)  blanco.gif (en la carpeta "objetos")  espaciador.png (en la carpeta "objetos")  punto.txt (en la raiz de tu web)  numero-de-menus.. tendremos que hacer unos retoques para personalizarlos un poco a nuestro gusto.html ha de quedar así: ..gif (en la carpeta "objetos") Te los dejo todos comprimidos en dos archivo zip. y cada uno en su lugar (en su carpeta) o no funcionará bien este invento! Los estilos css del menú desplegable Este menú desplegable se basa en una hoja de estilos llamada estilo-menu-desplegable.css? Pues ahora hemos de colocar otra idéntica (pero con este otro nombre) seguida de aquella primera.png (en la carpeta "objetos")  gris.txt (en la raiz de tu web)  definir-menus. oki? Los archivos necesarios son estos.

Igual que el código Css....txt). Es necesario colocarlo en cualquier lugar después de que ya se haya definido el menú al que vamos a asociar este desplegable. Todo el código script que necesita este menú se va a guardar en tres archivos diferentes.txt" type="text/javascript"></script> </head> . aún no se muy bien qué es lo que hace exáctamente esa línea .) pero creo que sirve para eso. es decir. no? Ya tenemos la hoja de estilos y las hojas de scripts relacionadas.je je je.. El código de la plantilla. pero este menú desplegable que os presento está hecho con scripts.. lo que hemos hecho es meterlas todo dentro del archivo definir-menus. la línea la ponemos antes de la línea </body>): . <div id="curva-inferior"></div> ... Para no liarnos lo que vamos a hacer es colocarlo justo antes del final del body. <head> <title>Page title</title> <link rel="stylesheet" href="estilo-general.html y coloca estas nuevas línea debajo de la que hemos escrito antes: .txt). en lugar de pegar unas cuantas líneas de scripts. oki? Igual que antes.txt por lo que será solo necesario hacer una llamada a ese archivo igual que hemos hecho antes.css" type="text/css" media="all"> <script language="javascript" src="no-tocar.. el código de los scripts puede o bien escribirse directamente dentro del html de la página o bien guardarlo todo dentro de un archivo y luego hacerle una llamada desde el head de la web (igual que se hace con la hoja de estilos) que es lo que vamos a hacer. ya llevan la extensión ..html ha de quedar así (recuerda. Retocar el Body Para que estos scripts funcionen bien. Otro modo habria sido colocar el contenido directamente.. Para cualquier cambio solo necesitamos de este modo retocar el archivo txt y no todas las páginas de la web. Asociando los scripts de menú desplegable Algunos menús desplegables funcionan tan solo con "trucos" hechos con css.. En principio a estos archivos se les suele poner extensión .. Lo que hacen realmente estas líneas es insertar en su lugar todo el contenido de los archivos txt. Por un lado evitamos tener demasiado contenido en las páginas html y por otro lado evitamos tener que reformar todas las páginas html de la web cada vez que queremos retocar algo de ese código. Todo un invento.. nuestro servidor tiene que leerlos (cargarlos) antes de mostrar el menú...css" type="text/css" media="all"> <link rel="stylesheet" href="estilo-menu-desplegable.. creo. Como aún no los hemos estudiado no os lo explico e iremos directamente a colocarlos en la web.txt" type="text/javascript"></script> <script language="javascript" src="numero-de-menus... sin más. es decir. Esto se soluciona facil y rápidamente retocando la linea <body> para que ponga esto otro: <body onload="init(). después del código html del div navegación."> Si quieres que te diga la verdad. Ahora vamos al siguiente paso. para que cuando el navegador llegue a ella éste se vea obligado a leer los códigos script incluidos en la página antes de seguir leyendo contenidos del body..txt para que nos sea más fácil abrirlos con el block de notas (tranquilo.. Esta otra parte de código iría dentro del Body. pero de este modo ganamos dos cosas. Otro archivo con Scripts para el Body Como verás aún nos queda un archivo de scripts pendiente (definir-menus.js pero como algunos vamos a tenerlos que editar para retocarlos les vamos a poner extensión . justo antes de la línea </body>. Abre de nuevo la plantilla.

'ruta').. Si ahora guardas la plantilla.1'.1.txt te será fácil abrirlo con el block de notas de windows. <div id="navegacion"> <ul> <li><a id="desplegable1" href="#">Sección 1</a></li> <li><a href="#">Sección 2</a></li> <li><a href="#">Sección 3</a></li> </ul> </div> .html y le haces una vista previa podrás ver lo que hemos conseguido. etc..html y escribir esto: . desplegable1_0.direction.. Abrelo y vamos a verle las tripas.bottomLeft). Esos que puedes ver están predefinidos en uno de los archivos de scripts que hemos copiado en la web.items[1]).addItem('Sub-Seccion 2.txt y ha de estar en la raiz de tu web. otra llamada logotipo.txt" type="text/javascript"></script> </body> </html> No dirás que no es facil. Por lo tanto.. desplegable1. Quieres aprender conmigo? Pues adelante! Personalizando los textos de los enlaces en el menú desplegable El archivo donde se guarda la información de los apartados y subapartados del menú desplegable se llama definir-menus..'ruta'). .down. Al tener extensión . var desplegable1 = ms. Para hacer esto basta con abrir la plantilla. los apartados que aparecen seguramente no sean los que tú quieres..addItem('Seccion 2'. desplegable1.getElementById('desplegable1')). no? Asignando estilos a las secciones de nuestro menú de navegación Al igual nosotros al principio hemos definido una capa llamada cabecera.'ruta').. Eso si. Con esto tendremos un menú desplegable asignado a la Sección 1..addItem('Seccion 1'.0. para que una sección de nuestro menú de navegación sea desplegable hemos de aplicarle esa clase llamada "desplegable1". Cuando pones el cursor encima de Sección 1 aparece un deplegable bastante profesional. var desplegable1_0 = desplegable1.reference.addMenu(desplegable1. TransMenu.. if (TransMenu.. en los archivos estos tan raros que acabamos de pegar en nuestra carpeta de ejemplo se ha definido un tipo de menú (que va a ser desplegable) y se le ha puesto el nombre de desplegable1. Más adelante seguiremos colocándole desplegables a las otras dos secciones.addMenu (document. Si quieres modificarlo para que aparezcan los apartados que tú quieres y además colocarle las rutas hacia las páginas que deseas tendrás que retocar esos archivos.isSupported()) { var ms=new TransMenuSet (TransMenu.</div> <script language="javascript" src="definir-menus.

desplegable1_0.addItem('Sub-Seccion 2.2','ruta');
desplegable1_0.addItem('Sub-Seccion 2.3','ruta');
desplegable1.addItem('Seccion 3','ruta');
TransMenu.renderAll();
}
Por cierto, recuerdas que quedamos en que los códigos html los ibamos a poner en azul y los códigos
css en verde para diferenciarlos? Pues a los codigos de scripts los pondremos en rojo.
No intentes adivinar nada, je je je. Esto seguramente no tenga ningún sentido para tí y reconozco
que tampoco tiene demasiado para mí, ja ja ja ja. Nos será suficiente con saber qué es lo que debemos
retocar para que nuestro menú desplegable funcione como queremos, no?
En negrita puedes ver el nombre de este tipo de desplegable. Te dije que se llamaba desplegable1.
Eso no tienes que modificarlo. Lo único que has de retocar será lo que te indico en oscuro. Donde pone
Seccion 1, Seccion 2 y Seccion 3 has de colocar el texto que quieres que aparezcan en esas tres
secciones del desplegagle. Si te fijas en el ejemplo que hemos hecho, al poner el cursor sobre Seccion 2
se abre otro desplegable mostrando las sub-secciones 2.1, 2.2 y 2.3. Si modificas esos textos en el Script
(señalados también de oscuro) modificarás el texto que aparece en el menú.
Verás que junto al texto pone también ruta. Ahí es donde has de escribir la ruta de la página que
pretendes que se abra cuando se haga clic sobre ese enlace.
Esto no tiene mucha más historia, no? Parece complicado, pero llevando cierto orden creo que lo vas
a conseguir.

Aumentando el número de secciones
Imaginemos ahora que has puesto los textos que quieres y las rutas adecuadas, pero que necesitas
añadir dos secciones más. Cómo lo conseguimos? Pues basta con añadir más líneas a ese script. Por
ejemplo, si deseamos dos secciones más, las secciones 4 y 5, bastaría con añadir estas dos líneas al
script:
if (TransMenu.isSupported())
{
var ms=new TransMenuSet
(TransMenu.direction.down,1,0, TransMenu.reference.bottomLeft);
var desplegable1 = ms.addMenu
(document.getElementById('desplegable1'));
desplegable1.addItem('Seccion 1','ruta');
desplegable1.addItem('Seccion 2','ruta');
var desplegable1_0 = desplegable1.addMenu(desplegable1.items[1]);
desplegable1_0.addItem('Sub-Seccion 2.1','ruta');
desplegable1_0.addItem('Sub-Seccion 2.2','ruta');
desplegable1_0.addItem('Sub-Seccion 2.3','ruta');
desplegable1.addItem('Seccion 3','ruta');
desplegable1.addItem('Seccion 4','ruta');
desplegable1.addItem('Seccion 5','ruta');
TransMenu.renderAll();
}
Fácil, no?

Aumentando el número de Sub Secciones

Ahora imaginemos que quieres colocar 2 subsecciones a la sección 5. Sería suficiente con insertar
estas otras tres líneas:
if (TransMenu.isSupported())
{
var ms=new TransMenuSet
(TransMenu.direction.down,1,0, TransMenu.reference.bottomLeft);
var desplegable1 = ms.addMenu
(document.getElementById('desplegable1'));
desplegable1.addItem('Seccion 1','ruta');
desplegable1.addItem('Seccion 2','ruta');
var desplegable1_0 = desplegable1.addMenu(desplegable1.items[1]);
desplegable1_0.addItem('Sub-Seccion 2.1','ruta');
desplegable1_0.addItem('Sub-Seccion 2.2','ruta');
desplegable1_0.addItem('Sub-Seccion 2.3','ruta');
desplegable1.addItem('Seccion 3','ruta');
desplegable1.addItem('Seccion 4','ruta');
desplegable1.addItem('Seccion 5','ruta');
var desplegable1_0 = desplegable1.addMenu(desplegable1.items[4]);
desplegable1_0.addItem('Sub-Seccion 5.1','ruta');
desplegable1_0.addItem('Sub-Seccion 5.2','ruta');
TransMenu.renderAll();
}
Ves que sencillo? Basta con añadir la linea esa que empieza por var y luego tantas líneas como
subsecciones queramos. Luego acuérdate de ponerle el texto que quieras y la ruta correspondiente a la
página que deseas abrir con cada nueva subsección.
Una cosa importante que aún no te he dicho. Ves ese número marcado en oscuro? Ese cuatro
encerrado entre corchetes [4]? Te explico para que sirve. Presta atención que quizás sea un poco
complicado.
El número que has de colocar entre esos corchetes ha de ser el número de la sección a la que
pertenece pero restándole uno. Es decir, como estas últimas subsecciones pertenecen a la sección 5, le
restas uno y colocas allí un 4.
Ves como en la lína correspondiente a la sección 2 hemos puesto antes un 1 entre los corchetes? Es
por eso, porque corresponde a la sección 2 y por tanto, 2 - 1 = 1, ponemos un 1. Bueno, no es tan
complicado al fin y al cabo, verdad?
Para eliminar secciones y subsecciones se hace del mismo modo, eliminas las líneas que no quieres y
listo, solucionado.
Me ha costado mucho encontrar este menú por internet, de modo que espero que lo aproveches bien!
je je je. Ah, esos códigos de script no los he hecho yo (no soy tan listo! je je je) sino un tal Aaron
Boodman. Ese tio fue quién lo invento y sus créditos aparecen escritos dentro del archivo llamado no-
tocar.txt además de otros códigos imprescindibles para que el menú funcione. Todos podeis usar ese
script que él nos cede a cambio de respetar el contenido del archivo no-tocar.txt, oki? Mis más sinceros
agradecimientos a Aaron desde acá.
Por si solo has leido pero no has puesto en práctica estas lecciones, te dejo cómo queda la plantilla
tras estos retoques. En la página siguiente te enseño como hacer lo mismo con el resto de secciones de
la barra de navegación.
Nota: Si al hacer vista previa usas Internet Explorer verás como el menú aparece entrecortado. No te
preocupes, lo arreglamos en la última de estas lecciones, pero ya llegaremos. En el resto de
navegadores no ocurre, pero en cualquier caso, uses el que uses, tendrás que repararlo, oki?

Más desplegables para otras secciones

Ya tenemos listo el desplegable de la Sección 1. Vamos a ver ahora cómo ponemos desplegables
también a las secciones 2 y 3. Una vez controles esto verás lo fácil que te resulta colocar desplegables a
cualquier otra sección.
Para empezar tenemos que abrir el archivo numero-de-menus.txt y veremos así este contenido de
código script:
function init()
{
if (TransMenu.isSupported())
{
TransMenu.initialize();
desplegable1.onactivate=function()
{document.getElementById('desplegable1').className='hover';};
desplegable1.ondeactivate=function()
{document.getElementById('desplegable1').className = ''; }
}
}
De todas esas líneas, las que he marcado en negrita (bueno, quizás debería decir rojita.... je je je je)
son las correspondientes al desplegable de antes (desplegable1) y el resto de línea son comunes para
todos los menús desplegables que pongamos.
De modo que para incluir un segundo desplegable al que llamaremos desplegable2 bastará con copiar
esas dos líneas, pegarlas debajo y cambiar el número 1 de desplegable1 por un 2.
Como queremos aplicar un desplegable a la sección 2 y otro a la sección 3, realmente debemos hacer
eso dos veces, es decir, copiar esas dos líneas que he señalado arriba y pegarlas dos veces justo debajo
de las mismas y luego, en las líneas 3 y 4 colocar un 2 donde pone un 1 y en las líneas 5 y 6 sustituir el 1
por un 3.
El código final ha de quedar de este modo. Os coloreo con colores diferentes las líneas nuevas para el
desplegable2 y desplegable3, oki?
function init()
{
if (TransMenu.isSupported())
{
TransMenu.initialize();
desplegable1.onactivate=function()
{document.getElementById('desplegable1').className = 'hover'; };
desplegable1.ondeactivate=function()
{document.getElementById('desplegable1').className = ''; }
desplegable2.onactivate=function()
{document.getElementById('desplegable2').className = 'hover'; };
desplegable2.ondeactivate=function()
{document.getElementById('desplegable2').className = ''; }
desplegable3.onactivate=function()
{document.getElementById('desplegable3').className = 'hover'; };
desplegable3.ondeactivate=function()
{document.getElementById('desplegable3').className = ''; }
}
}
No dirás que es dificil! je je je.

addItem('Sub-Seccion 2. aún no hemos definido los apartados y subapartados que queremos para cada uno de estos dos nuevos desplegables. desplegable1. Por qué puede ser? Lógico.direction.bottomLeft).1'.'ruta'). TransMenu. ..addItem('Seccion 2'.2'.'ruta').isSupported()) { var ms=new TransMenuSet(TransMenu. desplegable1. desplegable1.2'.addItem('Seccion 1'.'ruta').addItem('Sub-Seccion 5.3'.. Ya puedes guardar y cerrar la plantilla.addItem('Sub-Seccion 2.down.addItem('Seccion 3'. Abre la plantilla. desplegable1_0. desplegable1.1.1'.addItem('Sub-Seccion 5. <div id="navegacion"> <ul> <li><a id="desplegable1" href="#">Sección 1</a></li> <li><a id="desplegable2" href="#">Sección 2</a></li> <li><a id="desplegable3" href="#">Sección 3</a></li> </ul> </div> .reference.. var desplegable1_0 = desplegable1..addMenu(desplegable1.renderAll()..addItem('Seccion 5'.txt Definiendo secciones y subsecciones al resto de menús desplegables El contenido que ya teniamos para ese archivo era este: if (TransMenu.html y modifica el código html de la parte de la capa #navegación hasta dejarlo de este modo: . Aplicando estos tipos en el Html Recuerdas cómo al principio le pusimos un id="desplegable1" al código html de la sección 1? Pues ahora tendremos que volver a hacerlo para las secciones 2 y 3. Si recuerdas. Si haces vista previa no notarás ningún cambio aún.addMenu(document.'ruta').items[1])..'ruta'). eso habia que hacerlo en el archivo de scripts llamado definir-menus.getElementById('desplegable1')).0.'ruta').. desplegable1_0.. desplegable1_0..addItem('Sub-Seccion 2. var desplegable1 = ms. desplegable1_0. claro..items[4]).addMenu(desplegable1.'ruta').'ruta'). TransMenu. desplegable1.'ruta'). desplegable1_0.addItem('Seccion 4'. var desplegable1_0 = desplegable1.'ruta').

'ruta'). var desplegable2_0 = desplegable2. Con eso obtendremos menús idénticos al desplegable1 y luego solo tendríamos que cambiar lo que corresponda.addItem('Seccion 4'. desplegable1.3'. desplegable1. TransMenu.'ruta'). y colocar los textos y las rutas de los enlaces. desplegable1_0. var desplegable1_0 = desplegable1.addItem('Sub-Seccion 5.addItem('Seccion 2'. nos queda así (ya le he cambiado el numero 1 por el 2 y el 3): if (TransMenu. var desplegable1_0 = desplegable1.'ruta').isSupported()) { var ms=new TransMenuSet(TransMenu.addItem('Sub-Seccion 2. desplegable2.addItem('Seccion 2'.'ruta'). desplegable2.addMenu(document. .1'.addItem('Sub-Seccion 2. var desplegable2_0 = desplegable2.reference. var desplegable1 = ms.down. desplegable2. desplegable1. De acuerdo? Pues para definir los desplegables 2 y 3 podemos empezar por copiar las líneas del desplegable1 y pegarlas dos veces a continuación.1.'ruta').addItem('Seccion 5'. es decir.addItem('Sub-Seccion 2.} Las líneas en rojo oscuro son exclusivamente para el desplegable1.items[1]).'ruta').addItem('Sub-Seccion 5.addMenu(desplegable1.getElementById('desplegable2')). desplegable1.items[1]).'ruta').'ruta').addItem('Sub-Seccion 2.'ruta').items[4]). desplegable2.'ruta'). var desplegable2 = ms.2'. desplegable1_0.'ruta'). desplegable2_0.'ruta').addItem('Seccion 3'. Si copiamos las líneas correspondientes al desplegable1 y lo pegamos dos veces a continuación del que tenemos. Las otras líneas del principio y del final son comunes a todos los desplegables y no se tocan.addItem('Seccion 5'.addItem('Seccion 1'.'ruta').addMenu(desplegable2.'ruta').2'. desplegable1_0. cambiar el 1 de desplegable1 por el 2 o el 3.addItem('Sub-Seccion 2. desplegable2.direction.addItem('Seccion 1'.1'.addItem('Sub-Seccion 2. desplegable1. desplegable1_0.items[4]).'ruta').0.'ruta').addItem('Seccion 3'.addMenu(desplegable1.bottomLeft).1'. eliminar o insertar más líneas si queremos más secciones o menos.'ruta'). desplegable1_0.addMenu(document.addMenu(desplegable2.3'. desplegable2_0.'ruta'). desplegable2_0.getElementById('desplegable1')).addItem('Seccion 4'.2'.

Podemos cambiar las imágenes de los archivos que subimos al principio con solo editarlos. o te ha faltado cambiar algún número (desplegable2 en lugar de desplegable3. el color. También podemos cambiar el tipo de letra de estos menús.addItem('Sub-Seccion 5.'ruta'). } Ya los tenemos a los tres funcionando. desplegable2_0. clao.2'. Están bajo el título de "Configuration .'ruta'). desplegable3. claro.'ruta').addItem('Seccion 5'. acento o símbolo raro. no admite guardar códigos en estos txt y luego llamarlos desde la página web. var desplegable3_0 = desplegable3. je je je.addMenu(desplegable3. etc haciendo uso de nuestra hoja de estilo.2'. var desplegable3 = ms. Por otro lado.. desplegable3. Es decir.Has olvidado subir todos los archivos a tu servidor.1'. gracias a todos ellos.getElementById('desplegable3')).addItem('Sub-Seccion 5. Si no te funciona revisa esos puntos o pregúntanos en el Foro CCTW donde te ayudaremos encantados! Nota de Agradecimiento: Quiero dar las gracias desde aquí a Yaneth. Posibles errores y fallos Si tras estas instrucciones el desplegable no aparece puede deberse a varias cosas: 1. Si la web está bien.'ruta').'ruta'). guardarlos y subirlos de nuevo al servidor.'ruta'). desplegable3.addItem('Sub-Seccion 5. 3.Has subido algunos archivos a carpetas incorrectas de tu servidor. dibujar en ellos lo que queremos. 4. desplegable3_0. desplegable3.'ruta'). 2.addItem('Seccion 3'. etc). escribir los textos de cada enlace y terminar de poner las rutas a las páginas que enlaza cada enlace del menú desplegable. No se qué haria sin los colegas del foro de CCTW.addMenu(desplegable3.'ruta').addItem('Sub-Seccion 2.. si abres el archivo que hemos llamado no-tocar..1'. el foro está cien veces mejor. etc.addItem('Seccion 4'.Tu servidor no admite este tipo de importación de archivos.addMenu(document.. Gracias!!! Cómo personalizar los menús desplegables Sabía que no tardarias mucho en hacerme esa pregunta.'ruta').1'.'ruta').items[4]).items[1]). var desplegable3_0 = desplegable3. desplegable3_0.txt podrás ver como muy al principio aparecen unas cuantas opciones que puedes personalizar.'ruta').addItem('Sub-Seccion 2. desplegable3_0. 5. desplegable2_0. Si. desplegable3_0.addItem('Sub-Seccion 2. TransMenu. Más sencillo imposible! Aquí tienes el restultado final de la plantilla con los 3 menús desplegables.2'. Solo te queda eliminar o insertar nuevas líneas si quieres quitar o poner más secciones o subsecciones. así que prefiero adelantarme y responderte ahora.addItem('Seccion 2'. espacio.addItem('Sub-Seccion 5.Has nombrado a algunos archivos con alguna mayúscula. desplegable3.. Dnix y a todos los amigos del foro que me ayudaron a reaparar un pequeño fallo que daba el desplegable al visualizarlo con Internet Exporer.'ruta').3'.addItem('Seccion 1'.Te has equivocado al escribir el código.renderAll(). desplegable3_0. Los cambios serán instantaneos. es posible hacer algunos cambios en estos desplegables.

Hasta aquí bien. Para cambiarlo solo tienes que poner el color que te guste en la linea 34 (más o menos) del archivo no- tocar. y sabemos ya conectarnos al FTP de nuestro sitio y subir archivos (espero. No todo el mundo usa estilos y como verás son lo mejor que hay para crear páginas web. pero pronto verás la cantidad de ventajas que tiene. Hay una sección para este programa (Html Kit). Bueno. Pero procura no tocar la web del ejemplo o te perderás en las siguientes lecciones. colocar un banner.. Además sabemos enlazar páginas que es un elemento imprescindible en toda web y hemos aprendido a colocar imagenes en capas para dar un mejor aspecto a la página web. e incluso ahora sabemos ya colocar un menú desplegable!! No te podrás quejar. búscala y pregunta cuanto quieras. Haz la prueba. Recuerdas esos dos archivos llamados fondo-no-activo. Para ser solo cuatro lecciones no ha estado mal. Qué? Qué tál lo ves transparente? Mola verdad? je je je. creando otra carpera local según los pasos vistos al principio y haciendo cosas por tu cuenta.). Ahora quizás no lo notes mucho.txt. qué ocurre si eliminas esos dos archivos? Qué crees que pasara? Pues que como no tienen fondo los menús serán ligeramente transparentes. Si te decides por el modo transparente. Además ya nos suena bastante eso del código Html como los estilos CSS...... Y cualquier duda que te surja pregúntanosla en el Foro CCTW (hay un enlace en la parte de abajo de todas las páginas de CCTW) y te responderemos enseguida. Recuerda que puedes eliminar por ejemplo el menú lateral que seguramente ya no te haga falta si te decides por el desplegable. si los quieres recuperar le pones el nombre original y marchando. El resto de código de ese archivo mejor no lo toques (a no ser que sepas lo que haces) o puede que los desplegables te dejen de funcionar. sabemos usarlo un poco y hemos creado una index muy sencilla y una plantilla ya más avanzada. Nos vemos pronto con más lecciones! Hasta el momento hemos aprendido. vosotros mandáis! .. Que creias? Que todos ibamos a tener el desplegable identico? ja ja ja. oki? Las lecciones son para vosotros.properties". pero.gif y fondo- activo. // color of the background (transparency set in CSS) Si cambias lo que he señalado en negro cambiará el color de ese fondo. je je je. También te agradecería que en ese mismo apartado me comentaras qué partes no has entendido y en cuanto pueda lo intento mejorar. mejorar el aspecto de las capas como hemos hecho en el menú lateral. pero no eliminarlo y aprovechar así ese espacio rectangular para colocar en un futuro algún anuncio tuyo comentando alguna noticia o novedad en tu web. o para poner publicidad. Así aprenderás cosas nuevas por tí mismo. Y ahora qué hago? Verás que aún queda mucho por enseñarte. El otro es el fondo que se muestra en una subsección cuando el ratón pasa por encima. Quieres un menú desplegable transparente? Otra cosa muy muy interesante. etc. ya tenemos el programa instalado. El efecto es genial. modificar la velocidad de apertura y cierre de los desplegables y poco más. Luego. je je je). El primero es una simple imagen de fondo para cada una de las subsecciones abiertas cuando no tiene el cursor del ratón encima. un menú lateral (capa #menu) y también uno desplegable. Nota Final Ahora ya sabes colocar un menú horizontal (capa #navegacion). Cambiar el color de la transparencia del menú desplegable Otra cosa más. También puedes vaciarlo.. Desde ahí puedes cambiar la ruta de las imagenes usadas. en ese mismo archivo un par de líneas por encima verás otra línea similar en la que podrás cambiar el color de la sombra. mostrandose lo que hay detras.gif? Pues bien. Pero en lugar de eliminarlos (por si acaso no te gusta el efecto de transparencia) cambiales el nombre.. que tampoco esta mal.. puedes ir haciendo experimentos.backgroundColor = "#C4CCCC". Seguramente sean demasiados menús para tu plantilla. Es una línea así: TransMenu. no? . Mientras que publico más (suelo tardar más o menos una semana o dos en publicar lecciones nuevas. Cambiando el color de la sombra del menú desplegable Además. no? Dolió? je je je. de veras. algún dibujo decorativo. quizás no te guste mucho el color que queda. que no es poco. pero parece eres más rápido aprendiendo que yo haciendo las lecciones. pues nos basaremos en el trabajo que llevamos hecho..

llevan mucho trabajo. pero aunque os parezca fácil.. no sigais preguntando en el foro para cuando saldrá la próxima lección.. . ánimo y .. pero es la realidad.. Lo siento.. paciencia!! NOTA: Por favor. suerte. No dispongo de mucho tiempo libre para crearlas y este tipo de mensajes en el foro solo me hacen gastar ese poco tiempo que tengo. Siempre estoy trabajando en nuevas lecciones. Espero incluir más lecciones pronto. Estate atento.