Documenti di Didattica
Documenti di Professioni
Documenti di Cultura
Primeros pasos
Aprender a Crear una Pgina Web Paso a Paso
En estas pginas vas a aprender a crear una pgina web, a escoger un servidor de pago o gratuito, a subirla a internet, a mejorarla y actualizarla a tu gusto e incluso a sacarle un buen provecho econmico si lo deseas. No hace falta que tengas conocimientos de nada, simplemente con leer estas lecciones lo vas a lograr, vers. El resultado final ser una web igual que esta, con su foro, un top, un directorio de enlaces, optimizada para aparecer en buenas posiciones en los buscadores, con un cdigo html y css vlidos, etc, etc. Qu, la mitad de lo que acabo de decir ni te suena eh? ja ja ja ja, no te preocupes, te lo voy a explicar todo paso a paso, como si fueras idiota, vale? ja ja ja. Hey, que era broma, no te vayas!!! Adems, te lo explicamos todo tan bien que sabrs como personalizar tu pgina web a tu antojo. Una vez termines el tutorial podrs cambiar los colores, la estructura, los mens, etc, etc para adaptarla a tus gustos. Tras aprender todos los trucos podrs hacer cualquier otro proyecto desde cero con lo que vas a aprender aqu.
Qu vamos a necesitar?
En principio solo conexin a internet y seguir estas instrucciones. El resto de recursos necesarios los conseguiremos de la red, como por ejemplo el software (gratuito) que vamos a seguir para las lecciones, el espacio web (gratuito tambin) para alojar tu proyecto, el software para el foro, para el directorio y para el topsites (de nuevo, gratis), etc, etc. Si tienes acceso a internet tendrs todo lo necesario. Bueno y un poco de tiempo y paciencia, claro.
Y si no entendemos algo?
En ese caso dispones del Foro CCTW donde puedes escribir todas tus dudas. Las resolvemos todas, de modo que... si no tienes pgina web ser solo porque no quieres. No hay escusa! Para leer el foro no es necesario registrarse, para escribir tus dudas en l s (es necesario para poder evitar un poco el Spam, lo siento).
Software Necesario
Un software es un programa informtico, lo que ocurre es que al decir software parece que la cosa tiene ms importancia, como es una palabra en ingls... ya se sabe... pero no es ms que eso, un programa. Para crear nuestra pgina web necesitamos un programa. Para crear webs hay miles, de pago, gratuitos, regalados, pirateados... Nosotros vamos a ser buenos y usaremos uno gratuito, por ejemplo uno que se llama Html-Kit
En el hueco de arriba te preguntan donde oiste hablar de Html-Kit. Puedes poner lo que quieras, la direccin de esta web, un buscador, etc, etc. En el hueco de abajo puedes escribir tu email si deseas recibir informacin de actualizaciones de este
Pagina 2 de 129
software y cosas as. No son obligatorios ninguno, pero ya que es gratuito no est al menos contestarles a la primera pregunta, no? A continuacin, pulsa en la parte de abajo de ese cuadro, donde pone Download HTML-Kit para proceder a la descarga del archivo. Son unas 2.8 megas, por lo que ser algo rpido. Al hacer clic se abre una ventana preguntado si lo deseas guardar o ejecutar directamente. Escoge Guardar y as lo tendrs a mano en caso de que te haga falta:
Tras terminar de bajarlo aparece otra ventana. Escoge Ejecutar para empezar su instalacin:
Pagina 3 de 129
Puedes aceptar y Ejecutar sin problemas. Este programa es seguro. En seguida, el programa empieza a instalarse en tu PC.
Como va siendo habitual, ahora aceptamos los las condiciones, cmo no, verdad? Tienes que marcar la casilla que te he marcado en rojo en la imagen de aqu abajo y despus pulsar en Next> :
Pagina 4 de 129
Siguiente paso? Inicarle en que carpeta de nuestro disco duro lo queremos instalar. La opcin por defecto es perfectamente vlida:
Seguidamente, nos pregunta qu opciones deseamos instalar. Como no hay quien nos pare, nosotros escogemos todas (que chulos somos,eh?). Seguramente no las usemos, pero tampoco es cuestin de perderse algo, as que... t pa dentro.
Pagina 5 de 129
Si an no te has cansado de aceptar y aceptar, aqu tienes otra ventana que te pregunta cul quieres que sea el nombre del programa en tu barra de programas... aceptamos de nuevo...
Bueno... ahora nos muestra las opciones que se van a instalar. Que majo... pero un poco pesado..
Pagina 6 de 129
Pulsamos Install y... all va eso! Se instala en un segundo y claro, para no perder costumbre, nos dice que ya est todo listo. Te recomiendo no dejar marcada la casilla marcada con un circulo rojo por m. Eso es para descargarte ms cosas, pero por el momento vamos sobrados. Quita la marca (mira la foto de abajo) y seguimos, oki?
Arrancando el Html-Kit
En la pgina anterior nos quedamos en esta ventana:
Dice arriba que las preguntas siguientes (vaya, que no es solo una...) son para ayudarte a configurar el programa, pero que siempre puedes cambiar estas cosas ms tarde desde Edit > Preferencias. Esta pregunta de arriba es por si quieres que los archivos HTML se abran siempre por defecto con este programa. Por el momento le diremos que no y al hacerlo, claro, aparece otra pregunta...
Pagina 8 de 129
Quieres que Html-Kit detecte los navegadores que tienes para usar la vista previa con ellos? Fjate, a esta le vamos a decir que s, para que no se diga... Ahora como ves en la ventana de aqui abajo, pregunta si quieres descargarte enlaces de ayuda e informacin actualizada.. A esto le diremos que no, pues ya nos estamos cansando de tanta preguntita y queremos ver el programa de una vez..
No contento con la contestacin, nos pregunta si queremos verificar si hay alguna versin ms moderna del programa... arghhh. Adivina que ponemos?
Y finalmente (espero) nos invita a dar una vuelta por el programa con el tutorial. Lo siento pero no, mi paciencia tiene un lmite, je je je.
Pagina 9 de 129
Bueno. Ahora ya si que si, aparece una ventana preguntando qu tipo de archivo queremos abrir para empezar. Como opciones tenemos: Create a new file (Crear un nuevo archivo) Create a new file based on a template (Crear un archivo basado en una plantilla) etc, etc, etc. Escogemos Create a new File y antes de pulsar OK desactivamos la casilla de abajo del todo, donde pone "Dont display this screen again" o "No mostrar esta ventana de nuevo".
Pagina 10 de 129
Pulsa donde pone "start download" que significa "empezar a descargarlo". Al hacer clic all se abre esta ventana de Windows preguntandote donde guardar el archivo. Hazlo en la carpeta "default" que se encuentra dentro de una de las carpetas donde has instalado el programa:
Una vez guardado el archivo (llamado irTranslationSpanish.zip) descomprime su contenido en esa misma carpeta y listo. La prxima vez que abras el Html-Kit estar en Castellano gran parte del men, no todo, pero la gran mayoria. Si te descargas ese archivo y no logras descomprimirlo haciendo doble cllic sobre l, quizs sea porque no tienes ningn programa descompresor instalado. Puedes bajarte el winrar, instalarlo y poder as descomprimir tanto este como los que te bajes en el futuro. Para cualquier duda al respecto usa el Foro CCTW.
Pagina 11 de 129
El Html-Kit es un programa sencillo, pero an as tiene cantidad de opciones que no vamos a necesitar, al menos por el momento. As que para no liarnos mucho con tanto men vamos a simplificar todo esto. Trataremos de desactivar todo aquello que no vayamos a usar e iremos activandolo conforme nos haga falta. As ser todo ms claro, oki? Para empezar, abre tu Html-Kit (si lo tienes abierto, cierralo y lo vuelves a abrir). Nada ms abrirlo nos sale la ventana donde nos pregunta qu tipo de archivo queremos crear. Esto es lo primero que nos sobra, de modo que marcamos la casilla de la parte de abajo de esa ventana para que no vuelva a aparecer:
Tras desactivar esa opcin y pulsar OK vemos de nuevo el programa con una pgina nueva, tal que as:
Pagina 12 de 129
Empecemos a desactivar cosas. Para empezar haz clic en la barra de herramientas, donde pone Ver y vamos a desactivar una a una todas las opciones que te marco con un crculo rojo en la siguiente imagen:
Pagina 13 de 129
Todas ellas las puedes activar cuando quieras haciendo lo mismo de nuevo, pero como vers, de este modo la superficie de trabajo que nos queda es mucho ms amplia y clara, no? Quedara as:
Pagina 14 de 129
Mucho mejor, verdad? Ya estamos preparados para empezar el juego. Vers como crear pginas web va a ser pan comido para t. Ahora es una buena oportunidad para empezar a saber qu es ese cdigo que aparece en la pantalla del Html-Kit. Vamos a verlo en la pgima siguiente.
<html> </html>
En adelante, siempre que escriba cdigo HTML lo har de este modo, de color azul y con fondo gris para que lo distingais. Pues bien, si eso lo escribimos en un archivo y lo guardamos con extensin .htm o .html ser una pgina web. Vacia si, pero una pgina web. La primera palabra <html> indica que ah empieza el cdigo de la web. La segunda </html> indica que el cdigo de la pgina web a terminado. Se distinguen por la contrabarra / que siempre indica que algo ha terminado.
Pagina 15 de 129
Dentro de cualquier pgina web hay cosas que se ven (o que se escuchan) y cosas que no. Las cosas que se ven son los textos, las imgenes, sonidos, etc. Por otro lado lo que no se ve son sus caractersticas, como el ttulo, su descripcin, y otra serie de cosas que veremos ms adelante. Las cosas que no se ven se colocan dentro del cdigo HTML en una zona llamada cabecera (Head en ingls) y lo que se muestra se pone en lo que se llama cuerpo (o Body en ingls). Pues igual que antes hemos escrito en cdigo dnde empieza la pgina y dnde termina, la cabecera llamada HEAD y el cuerpo llamado BODY se colocan y escriben as en Html:
<html> <head> <title>Este es el ttulo de mi web y puedo escribir lo que quiera!</title> </head> <body> </body> </html>
Como siempre, empieza por la palabra <title> y termina con la misma pero con la contrabarra delante, es decir, con </title>. Fcil, no? Si guardaramos esto en un archivo con extensin .html o .htm qu veriamos? Una ventana del navegador completamente en blanco, pero con un ttulo en la parte superior del navegador como el que hemos escrito. Mira un ejemplo haciendo clic aqu. Si tras hacer clic en ese enlace y abrirse la pgina del ejemplo miras el cdigo de esa pgina web, vers como coincide exctamente con el mostrado antes. Si no sabes, te enseo como mirar el cdigo html de una pgina web en la pgina siguiente. Por el momento, ya sabes crear pginas en blanco. Todo un logro, verdad? je je je.
Pagina 16 de 129
Si usas el Internet Explorer puedes ver el cdigo haciendo clic en Ver > Cdigo Fuente. Cuando pongo esta flechita ">" es para indicar que primero se hace clic en la opcin Ver y al abrirse el desplegable con otras opciones, se toma la opcin Cdigo Fuente. Te enseo una imagen para que lo tengas ms claro:
Si en cambio ests usando el Firefox, la opcin est en Ver > Cdigo Fuente de la Pgina o teclas Control + U. Para el navegador Opera, el cdigo Html se puede lo tienes en Ver + Cdigo Fuente o pulsando las teclas Control + F3. Como ves, son todos parecidos y por supuesto, el cdigo mostrado ha de ser idntico. Haz la prueba con esta misma pgina, o con el ejemplo de la pgina anterior, y as compruebas el cdigo del ejemplo, oki?
Pagina 17 de 129
Dentro de esta carpeta como te digo, vamos a guardar todos los archivos que usemos en cada web. Digo "en cada web" porque adems de la que vamos a crear ahora, t mismo puedes seguir creando otras. Asi que dentro de esa carpeta vamos a crear otra llamada "web-ejemplo-cctw", que ser donde guardemos los archivos de esta web de ejemplo que iremos creando con estas lecciones.
As que, si a la vez que sigues estas lecciones quieres ir creando otra a tu bola, puedes crear otra carpeta con el nombre que quieras dentro de "mis-paginas-web", junto a "web-ejemplo-cctw". As no mezclamos cosas, vale? Dentro de la carpeta "web-ejemplo-cctw" crea otra carpeta ms y llmala "objetos". En ella guardaremos las imgenes, archivos de sonidos, etc. Te repito, es muy importante que sigas mis pasos al pie de la letra, de modo que cuando digo que a esa carpeta la llames "objetos", hazme caso y no la llames "Objetos", ni "OBJETOS". Todo en minsculas, oki? Ya entenders por qu.
Pagina 18 de 129
Como ves, por el momento no tenemos nada de nada, solo sabemos crear pginas web vacias y carpetas vacias, pero en un par de pginas vers como cambia esto.. confia en m.
2.- Haz clic sobre la barra de herramientas, donde pone Herramientas y activa la opcin Workspace.
Pagina 19 de 129
3.- Aparece ahora una ventana donde podemos definir nuestros sitios:
Vemos tres carpetas ya creadas pero en principio no les vamos a hacer ningn caso. Cuando seas mayor si quieres las cotilleas pero ahora vamos a lo nuestro. En el futuro, puedes cerrar esa ventana pulsando sobre la x de su parte superior derecha y puedes volver a verla siguiendo lo explicado en el paso 2. Cuando te moleste la cierras, cuando te haga falta la abres. Fcil, verdad? Y para qu sirve esto? Lo vemos ahora mismo.
Pagina 20 de 129
Dentro de esa ventana llamada WorkSpace vamos a definir dos sitios. Uno que se llama Sitio Local que se corresponde con la carpeta que tenemos en el ordenador llamada antes "ejemplo-web-cctw" y otro sitio que podemos llamar Sitio Virtual, que ser el espacio en internet. Este segundo lo veremos ms adelante. Por ahora vamos a definir el Sitio Local de la siguiente forma: 1.- Hacemos clic en la barra de herramientas, donde pone Workspace y escogemos Aadir Carpeta Local/Red.
2.- En la ventana que se abre (como ves, la traduccin al espaol no es completa, pero podremos defendernos, ya vers), tienes que poner la carpeta "pagina-ejemplo-cctw" en el primer hueco (pincha en la carpeta amarilla de su derecha para encontrarla y escogerla) y en el segundo hueco pon un ttulo cualquiera, por ejemplo, "web-ejemplo-cctw-local" y pulsa OK:
3.- Tras pulsar OK vers como aparece este nuevo sitio en la ventana de Workspace:
A partir de ahora, cada vez que queramos trabajar sobre archivos de esta pgina web, en lugar de abrir la carpeta que hemos creado en lecciones anteriores (web-ejemplo-cctw), podemos acceder a ellos directamente desde ac. Ahora s que podemos ya empezar a crear nuestra pgina web. Que emocionante...... no?
Pagina 21 de 129
Como veo que eres un poco impaciente, vamos a crear una segunda carpeta o sitio local, en el que podrs hacer todos los experimentos que quieras. As podrs dejar el sitio "web-ejemplo-cctw-local" solo para lo explicado aqui y no te hars un lio mezclando lo que explicamos con tus propias pruebas, vale? Para crear esa otra carpeta local repite los pasos anteriores, y crea otra para tus cosas llamada como quieras, por ejemplo "misexperimentos". A la hora de crearla te pide una carpeta. Puedes crear una llamada "mis-experimentos" dentro de la carpeta del escritorio llamada "mis-paginas-web" si quieres.
Pagina 22 de 129
Haz clic sobre la lengeta en la que pone "General", escoge el tipo de archivo "Blank HTML Page" (pgina html en blanco) y pulsa Ok. En seguida aparece otra ventana preguntando (este programa no para de preguntar.. verdad? que pesao es... je je) preguntndonos el nombre que queremos que tenga ese archivo. Cul debe ser? Cmo? Que no lo sabes? Ejem.... hay que estar ms atento! je je. Se tiene que llamar index.html pues ser la pgina principal, as que lo escribimos en esa ventana, con la extensin y todo y pulsamos en Ok:
Tras pulsar Ok no vemos nada nuevo, pero el archivo index.html a sido creado. Para verlo solo tienes que hacer clic en el signo "+" que hay a la izquierda del sitio "web-ejemplo-cctw"m en la ventana Workspace. Haz clic all.
Como ves, no solo te muestra el archivo index.html sino tambin la carpeta "objetos" que hemos creado anteriormente. Si te vas a MiPc y abres la carpeta vers como adems de la carpeta "objetos" tambin aparece all el archivo index.html Ya estamos listos para escribir contenidos el la pgina principal, index.html as que vamos a la siguiente pgina y comenzamos el juego!
Pagina 23 de 129
Como por ahora solo vamos a trabajar sobre el index.html podemos cerrar la ventana Workspace para tener ms sitio visible. De modo que hacemos clic en la x de Workspace para cerrarla y despus maximizamos la ventana del index para ocupar toda la ventana del Html-Kit, quedando as:
Pagina 24 de 129
Esta es la vista llamada "Editor de Html". Como vers, el cdigo de esta pgina coincide ms o menos con el que te expliqu en las primeras lecciones, verdad? Empieza por <html> seguido de la cabecera y despus el cuerpo o Body, para cerrarse al final con </html> que como toda etiqueta de cierre lleva su contrabarra "/". Se ve tambin esa primera lnea de la que no te he hablado an. Esa lnea describe el tipo de pgina que es, las normas de Html que est siguiento. No tiene mayor importancia, la dejaremos y listo.
Cambiando el ttulo
Vamos a cambiarle el ttulo a esta index. Bastar con escribir el ttulo que quedamos en lugar de donde pone "Page title". Vamos a ponerle todos "Pagina Principal del Ejemplo CCTW". Ya sabes, entre <title> y </title>.
Mi primer prrafo
Al igual que un ttulo se escribe entre <title> y </title>, un prrafo hay que escribirlo entre las etiquetas <p> y </p>. As, para escribir por ejemplo "Bienvenidos a mi pgina web. Muy pronto estar lista!" basta con escribir esa frase encerrada entre esas etiquetas, dentro del cuerpo de la pgina es decir, entre <body> y </body>. Quedara as:
Pagina 25 de 129
Claro que con la vista "Editor" no vemos lo que estamos consiguiendo. Para ver cuales son los resultados el Html-Kit dispone de otra vista llamada "Preview" o vista previa, que nos muestra cmo quedara la web vista por internet. A esta vista previa o preview se accede haciendo clic abajo del todo, junto a donde pone "Editor". Haz clic ah y veamos como queda nuestro ejemplo por el momento, vale?
Bueno, por el momento no es gran cosa pero... sabas hacer esto antes? Pues pronto aprenders mucho ms. No vamos a parar hasta que aprendas a crear pginas como ComoCrearTuWeb, oki? je je, no va a ser dificil, vers. Haciendo clic sobre "Editor", junto a "Preview" puedes volver a ver la vista de cdigo Html. Ya sabemos algo ms.
Pagina 26 de 129
Pagina 27 de 129
Como queremos enlazar a una web externa, pondremos entre las comillas http://www.comocreartuweb.com quedando el cdigo del enlace de este modo: <a href="http://www.comocreartuweb.com">CCTW</a> Te dejo una vista del Html-Kit para que lo veas ms claro, vale? su ruta absoluta que es esta:
Pagina 28 de 129
Pagina 29 de 129
Fjate que est en la primera pestaa, donde pone StyleSheet que significa Hoja de Estilo y que hemos escogido "Blank Style Sheet" que significa Hoja de Estilo en blanco. Al pulsar Ok nos pregunta qu nombre queremos darle al nuevo archivo. Escribimos "estilos.css"
Tras pulsar Ok aparece este nuevo archivo en la lista de archivos del sitio "web-ejemplo-cctw" de la ventana Workspace, nuestra Hoja de Estilo para variar, en blanco.
Pagina 30 de 129
(No pongas lo escrito en rojo. Eso significa que en ese lugar tienes que escribir la ruta, no que tengas que escribir " ruta/" literalmente. Sigue leyendo para tenerlo ms claro)
Lo nico que tendrs que cambiar en algunas ocasiones de esa lnea es ruta/. Y cual ser? Si leiste bien el apartado de las explicaciones de las rutas de los archivos de ComoCrearTuWeb se te har ms fcil entenderlo (leelo ahora si no lo has visto antes). Vamos a usar una ruta relativa para indicar dnde ha de leer la pgina index.html el archivo estilos.css Como tanto la pgina index.html como el archivo estilos.css estn en la misma carpeta, basta con escribir el nombre del archivo de la Hoja de Estilo. Esto es, usar rutas relativas. El cdigo Html ha de queda entonces as. <link rel="stylesheet" href="estilos.css" type="text/css" media="all">
De modo que abrimos el Html-Kit, abrimos la pgina index.html y escribimos esa lnea de cdigo dentro del Head, quedando de esta forma:
Si ahora nos vamos a la vista previa haciendo clic en "Preview" (en la parte de abajo del Html-Kit) vers como no hay cambio alguno. Esto es porque la Hoja de Estilo (estilos.css) est todava vacia, pero te prometo que te va a encantar el invento este cuando veas de lo que es capaz. Venga, lo ests haciendo genial!
Color de fondo
Por defecto, el color de fondo de una pgina web es el blanco. Si queremos cualquier otro tenemos que indicarlo. El elemento al que tenemos que decir que tiene que tener el color que queramos es el Body, pues engloba a todo "lo que se ve" de la pgina web. Los colores se definen por un cdigo muy raro (como por ejemplo #E6E6FA). Te dejo aqu un enlace con una lista de colores y sus cdigos que te puede venir muy bien. Escoge uno que te guste para el fondo y seguimos. Para indicar el color deseado, abrimos el Html-Kit, activamos la ventana Workspace y abrimos la Hoja de Estilos creada antes. Escribe en ella este cdigo: body {background-color: #E6E6FA} En adelante, cuando escriba cdigos de CSS los pondr en color verde para distinguirlos del cdigo Html que lo pondr de color azul. oki? (Cmo crees que hago esto? je je je, pues s, con estilos CSS..) Si ahora guardas el archivo estilos.css, abres el index.html y pulsas abajo en "Preview" para ver como queda, vers como el fondo ahora es del color elegido. Bien, no? Y vers que no hemos tocado el index.html para nada. Si en lugar de solo el index tuvieramos 500 pginas pasara lo mismo, todas cambiarian con solo retocar el archivo estilos.css y en cambio si no usaramos
Pagina 31 de 129
Hoja de Estilos tendramos que cambiar el color de fondo en las 500 pginas, una a una, a mano!!... es un buen invento o no? Pues an hay webmasters que no lo saben usar... vaya tela.
Imagen de fondo
La imagen de fondo se define de forma similar al color de fondo. Primero vamos a escoger una imagen que nos guste. Tienes un montn en la Galera de Imgenes, pero puedes colocar cualquiera que tengas a mano. Cuando la tengas, copiala y la pegas en la carpeta "objetos" que hemos creado lecciones atrs en tu escritorio, dentro de la carpeta "web-ejemplo-cctw" que hay en la carpeta "mis-paginas-web", y una vez copiada all le cambias el nobre y le pones "fondo.png". Suponiendo que le hemos puesto de nombre fondo.png el cdigo a insertar en la hoja de estilos sera este: body {background-color: #E6E6FA ; background-image: url(objetos/fondo.png) } Fjate como hemos separado la propiedad color de fondo de la propiedad imagen de fondo con un punto y coma, tal y como te coment antes.
Explicando el Background-Image
En este caso la propiedad se llama background-image y sirve para indicar el archivo de imagen de fondo que ha de tener la web. La ruta del archivo de imagen se escribe entre los parntesis tal y como hemos visto en el cdigo. Por defecto, es decir, si no decimos lo contrario, esta imagen de fondo se repetir horizontal y verticalmente para ocupar todo el fondo de la pgina, como formando un mosaico. Se puede hacer que no se repita, que se repita solo horizontalmente, o solo verticalmente e incluso que no se repita y colocarlo en el centro, o en la parte baja o a la derecha.... En cambio no es posible conseguir que solo salga una vez y que a la vez se expanda ocupando toda la pgina. Vamos a ver todas esas opciones.
Background-Repeat
Para que el fondo solo salga una vez hay que decirle, en la misma lnea de la hoja de estilo que no se repita, de este modo: background-repeat:no-repeat quedando as el cdigo de la Hoja de Estilos: body {background-color: #E6E6FA ; background-image: url(objetos/fondo.png) ; background-repeat:no-repeat } Para que el fondo se repita solo horizontalmente, se pone esto en su lugar: background-repeat:repeat-x body {background-color: #E6E6FA ; background-image: url(objetos/fondo.png) ; background-repeat:repeat-x } Para que se repita solo verticalmente se escribe: background-repeat:repeat-y body {background-color: #E6E6FA ; background-image: url(objetos/fondo.png) ; background-repeat:repeat-y } Para que se repita vertical y horizontalmente no hace falta poner nada, pero si lo deseas puedes poner esto: backgroundrepeat:repeat, tal que as: body {background-color: #E6E6FA ; background-image: url(objetos/fondo.png) ; background-repeat:repeat } An hay otro valor posible que podemos dar. Se trata del valor "inherit" que significa algo as como fondo anclado. Significa que aunque movamos la web el fondo quedara fijo y solo se desplaza el contenido, no el fondo. Eso si, no funciona en todos los navegadores, tenlo en cuenta si lo aplicas.
Background-Position
Tambin puedes elegir que el fondo aparezca arriba y centrado, abajo a la izquierda y todas estas combinaciones con la propiedad background-position. Te dejo un ejemplo para que lo pruebes y veas como funciona: body {background-color: #E6E6FA ; background-image: url(objetos/fondo.png) ; background-repeat: no-repeat ; background-position: left bottom} Los valores que puede tomar son: top (arriba), center (centrado) y bottom (abajo) para la alineacin vertical; y left (izquierda) center (centro) y right (derecha) para la alineacin horizontal, de modo que puedes usar cualquiera de esas combinaciones. Aunque no se recomienda, tambin puedes usar distancias, es decir, indicarle que se posicione a 50 pixeles desde la derecha y 100 pixeles desde arriba, as: background-position: 50px 100px. Un pixel es una medida de distancia y equivale a un puntito de tu monitor. Si te acercas mucho mucho a tu monitor, casi pegando las narices a l, vers que todo est hecho con puntitos. Pues cada uno de esos es un pixel. Para hacerte una idea, estas letras que lees deben tener unos 10 pixeles de ancho cada letra. Una pgina web suele tener una achura de 800 pixeles.
Nota:
Realmente, si definimos una imagen de fondo no es necesario el color de fondo. Puede estar bien por si el archivo de la imagen de fondo no se cargara, pero si estamos seguros de que est bien podemos eliminar la propiedad background-color de la lnea de la hoja de estilos, no crees? Pues a no ser que la imagen no ocupe toda la pgina, la imagen tapar el color de fondo. En cambio si la imagen solo ocupa una parte si puede ser interesante colocar el color de fondo. Eso queda ya a tu criterio.
y suponiendo que la hemos guardado en la carpeta "objetos" y que la hemos llamado "fondo.png", abrimos la hoja de estilo y dejamos la lnea de antes as: body {background-color: #E6E6FA ; background-image: url(objetos/fondo.png) } Como no quiero que se repita, le pongo tambien esto: body {background-color: #E6E6FA ; background-image: url(objetos/fondo.png) ; background-repeat: no-repeat } Adems la quiero centrada tanto vertical como horizontalmente, as que le aado esto: body {background-color: #E6E6FA ; background-image: url(objetos/fondo.png) ; background-repeat: no-repeat ; background-position: center center} En otros navegadores no pasa nada, pero en Firefox es necesario especificar la altura del body para que el fondo salga centrado verticalmente. Para conseguirlo solo hemos de indicar en esa misma lnea que el body va a tener una altura del 100%, esto es... que va a ocupar lo que tenga que ocupar. Una chorrada, lo se, pero si no el Firefox no se lo traga, de modo que lo ponemos y listo, perfecto: body {background-color: #E6E6FA ; background-image: url(objetos/fondo.png) ; background-position: center center ; background-repeat: no-repeat ; height:100%; } A veces hay que buscar el truco para que se vea bien en cualquier navegador y la mayoria de veces es un calentamiento de cabeza tremendo, pero t tienes la suerte de contar con CCTW, je je je. La pgina de ejemplo, tras guardar la hoja de estilo, se vera as con cualquier navegador (espero...):
(Para guardrtela, pon el ratn sobre ella, haz clic derecho y escoge guardar como. Luego la guardas en la carpeta "objetos".)
Pagina 33 de 129
Si t la ves diferente, rara, nos lo dices en el foro, en la seccin de Html-Kit y as lo reparamos y retocamos la leccin, oki? Qu tal? Mereci la pena el rollo de la pgina anterior? je je je. Intentar hacerlo ms ameno la prxima vez..
Pagina 34 de 129
que la propia imagen no se visualizara por algn problema. Por otro lado, algunos buscadores como Google tienen en cuenta estas palabras escritas en estas descripciones para relacionar las bsquedas de sus usuarios con el contenido de las pginas web, de modo que es bueno adems hacer que aquellas palabras por las que queremos ser encontrados aparezcan en esa descripcin. En mi caso, si quiero aparecer en Google cuando la gente busque por las palabras "html-kit", por ejemplo, me viene bien colocar descripciones en los alt de las imgenes como "Men del Html-Kit", o "As se descarga el Html-Kit", pero siempre que tengan su sentido con esa imagen, claro.
Si ya tienes ese archivo guardado en "objetos" abre ahora el Html-Kit y la pgina index.html para continuar. Vamos a colocar la imagen entre el prrafo donde dice "Bienvenidos a mi pgina web" y el que dice "Pgina creada....". Como va entre los dos, nos vamos al Html-Kit a la vista "Editor" y ponemos el cursor despus del primer </p> (al final de la lnea de cdigo del primer prrafo). A continuacin pulsamos Intro para crear una nueva lnea e insertamos esto (como te he dicho, la encerramos entre nuevos <p> y </p> que tambin debemos escribir): <p><img src="objetos/sonrisa.gif" width="60px" height="60px" alt="Bienvenidos al ejemplo de CCTW"></p>
Pagina 35 de 129
Pulsas sobre Add... y en la ventana que se abre (mira la imagen de aqui arriba) busca la carpeta "objetos". Tras pulsar en Aceptar se ve esto en la misma ventana:
Pagina 36 de 129
Si seleccionas el archivo "sonrisa.gif" del cuadro de la derecha, vers como aparecen una serie de datos que te he sealado en rojo en la foto de arriba. Aparce la ruta relativa, lo que ocupa, el ancho, el alto, etc. Curioso, verdad? Nos falta ya que estamos ah poner la descripcin. Para eso pulsamos a la derecha de donde pone "alt" (arriba a la izquierda, junto a la ruta relativa) y escribimos la descripcin que te dije antes "Bienvenido al Ejemplo de CCTW". Como vers hay muchsimas ms opciones para las imgenes en esa ventana, pero por ahora lo dejamos as, para no saturarnos, oki? Tras escribir la descripcin y pulsar Ok, vemos como aparece la lnea de cdigo en nuestra index.html aunque le falta colocarle las unidades, es decir, escribir "px" tras cada cantidad de anchura y altura. Ponlo t mismo a mano (sin dejar espacios entre el nmero y el px !!!) y seguimos. Si te soy sincero, estoy aprendiendo a usar el Html-Kit a la vez que hago las lecciones, je je je. En cuanto descubra como hacer para que aparezcan las unidades automticamente os lo dir, .
Pagina 37 de 129
Ahora abre el index de tu Html-Kit y pon la vista "Editor". Como siempre, puedes cerrar la ventana de Workspace de la derecha para tener ms sitio y maximizar la ventana del index. Mejor, verdad? je je. Pon el cursor del ratn justo al final de la lnea de cdigo del ltimo prrafo (justo antes de </body>), pulsa con el ratn una sola vez para colocar el cursor all y pulsa luego el Intro para crear una nueva lnea. Como te dije anteriormente, conviene poner las cosas dentro de un prrafo, de modo que creamos ese prrafo an vacio escribiendo sus etiquetas <p> </p>. Ahora situa el cursor dentro de ese prrafo (colocndolo entre <p> y </p>) y en el Html-Kit tal y como hicimos anteriormente pulsa en insertar una imagen (te dejo una foto para que recuerdes cmo era):
(Fijate como en la lnea nmero 15 del cdigo html en la imagen de arriba, he escrito ya <p></p> y he colocado el cursor entre esas dos etiquetas) Y del mismo modo que la otra vez, ponemos algunos datos en la ventana que aparece:
Pagina 38 de 129
Fjate como tras seleccionar el archivo buzn en la ventana derecha de arriba, podemos escribir el "alt" del que hablamos pginas atras, y como por fn he descubierto como poner las unidades en el ancho y alto de la imagen.... era obvio verdad? je je je. Pues si, escribe "px" detrs de cada cifra de auchura y altura despus de poner al "alt" y luego pulsa el Ok. Automticamente aparece esa nueva lnea de cdigo Html en la ventana de nuestro index <img alt="Pulsa para escribirme un E-Mail!" src="objetos/buzon.gif" height="32px" width="32px" /> y si le das a "preview" podrs ver el buzn en cuestin. Vamos ahora a colocarle el enlace a nuestro E-Mail.
Pagina 39 de 129
Se abre la ventana de los links y vemos como en la ventana de la parte inferior derecha aparece la imagen seleccionada (aunque puede que no se vea). Ahora en la lista de opciones de la izquierda de esa ventana, en la lnea que pone " href" escoge "mailto:", as:
Pagina 40 de 129
Si guardamos la hoja de estilo y abrimos el index.html veremos como en el "Overview" o vista previa ya no aparece ese recuadro. Tampoco saldr ya en ninguna de las imgenes de ninguna de nuestras pginas. Buen invento esta hoja de estilos, verdad? Pues an tiene cosas mejores, ya lo vers ms adelante.
Pagina 41 de 129
Por ejemplo, podramos crear un nuevo tipo o clase de estilo que podemos llamar como queramos, por ejemplo "centrado". Definimos en la Hoja de Estilo las propiedades que queremos que tenga y luego en el Html de la pgina le indicamos a un prrafo concreto que ha de tomar ese estilo. Vamos a verlo por partes.
img
.centrado { text-align:center }
Pagina 42 de 129
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <html> <head> <title>Pagina Principal del Ejemplo CCTW</title> <link rel="stylesheet" href="estilos.css" type="text/css" media="all"> </head> <body> <p class="centrado">Bienvenidos a mi pgina w eb. Muy pronto estar lista!</p> <p><img alt="Bienvenido al ejemplo de CCTW" src="objetos/sonrisa.gif" height="60" w idth="60" /></p> <p>Pgina creada gracias a <a href="http://w w w .comocreartuw eb.com" target="_blank">CCTW</a></p> <p><a href="mailto:nombre@w anadoo.es"><img alt="Pulsa para escribirme un EMail!" src="objetos/buzon.gif" height="32px" w idth="32px" /></a></p> </body> </html>
Y con esta pgina terminamos con la primera leccin. Pulsando arriba, en la barra de navegacin naranja sobre "Leccin Segunda" o pulsando en la flecha derecha de aqu abajo continuamos con la segunda, donde empezaremos a meter mano a la plantilla. Espero que me des tu opinin de estas lecciones en el Foro CCTW, eh? Solo con tu punto de vista y tu opinin puedo mejorar todo esto, acurdate de m! je je je.
Segunda leccin
Pagina 43 de 129
Abrimos el Html-Kit. Hacemos visible la ventana Workspace. Ponemos el ratn sobre el sitio "web-ejemplo-cctw-local" y pulsamos sobre l con el botn derecho del ratn. Escogemos New > Create File...
Escogemos crear "Blank Html Page" desde la pestaa "General" y pulsamos Ok.
Pagina 44 de 129
Ahora la abrimos haciendo doble clic en su nombre, en la ventana Workspace para empezar a trabajar sobre ella. Como siempre que se crea un archivo nuevo, aparece casi vacio.
Pagina 45 de 129
Existen dos formas de definir estilos. Una es crear una clase de estilo, que es un tipo de estilo que podemos asignar luego a uno o a varios elementos. Por otro lado estn los estilos nicos, que solo se deben aplicar a un elemento por pgina web. Las clases de estilo, que se pueden usar sobre varios elementos (varios prrafos, varias celdas, enlaces, etc) se definen en la Hoja de Estilo como vimos al crear la clase de estilo ".centrado", es decir, con un punto delante del nombre y luego colocando las propiedades entre los corchetes. Luego, en el cdigo Html se asigna esa clase de estilo a un elemento colocando dentro de su etiqueta de inicio esto, class="nombredelaclasedeestilo". En cambio los estilos nicos se definen en la Hoja de Estilo con una almohadilla como esta "#" (se escribe pulsando a la vez la tecla Alt Gr, que est a la derecha del espacio y la tecla del nmero 3 de tu teclado) en lugar de con un punto, y en el cdigo Html se asigna este tipo de estilo nico escribiendo dentro de la etiqueta del elemento esto otro id="nombredelestilounico" en lugar de con el class, que es para clases (estilos que se pueden asignar a varios elementos). Si te he echo la picha un lio, leelo despacito. Es importante entenderlo. Como puedes ver, el estilo de antes #cabecera {background-color: pink } es un Estilo nico y por lo tanto se asigna este tipo a un solo elemento, y se hace en el Html as: <div id="cabecera">Bienvenidos a mi Web</div> Abre ahora el archivo plantilla.html y pon esa lnea de cdigo. Ha de quedar as:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <html> <head> <title>Page title</title> <link rel="stylesheet" href="estilo-general.css" type="text/css" media="all"> </head> <body> <div id="cabecera">Bienvenidos a mi Web</div> </body> </html>
Si has guardado antes la Hoja de Estilo y haces vista previa en la plantilla, vers como ahora la frase "Bienvenido a mi Web" aparece diferente. Con un fondo rosa (pink). Es la magia del CSS aplicado a los Divs, pero no te creas que esto queda as, vers lo asombroso que es todo esto ms adelante.
Ms capas, ms capas
Ya tenemos nuestra primera capa llamada cabecera. Al final de estas lecciones esta capa contendr la cabecera, que segurametne conste del logotipo de la web y de un hueco para, por ejemplo, algo de publicidad para sufragar los gastos de un posible dominio propio y quin sabe, de un hosting de pago... no es algo descabellado, no te creas. Pero con esa capa sola no tenemos ni para empezar, je je. Vamos a crear una segunda capa que contendr una barra de navegacin. La llamaremos, navegacion (sin acentos, y todo en minsculas, claro).
Como ves, dan acceso a varias secciones y pueden ser muy sencillas o ms complicadas o llamativas con lengetas y todo eso. Pues ahora que sabes lo que son, vamos a crear la capa de nuestra barra de navegacin.
Y el resultado es...
Tras guardar todo, en la Hoja de Estilo tendrs esto:
#cabecera {background-color: pink } #navegacion {background-color: gray } #contenido {background-color: orange } #pie {background-color: brow n }
Y aqu tienes el resultado del ejemplo. Se que no parece una pgina web, pero no me dirs que no est tomando forma, no? Vers como esto empieza a cambiar en breve..
Pagina 47 de 129
ancho concreto, de modo que los que tengan un monitor pequeo la vern muy grande y los que la tengan ms grande (la pantalla...) la vern ms chica... Ambos casos tienen su parte buena y su parte mala. En el primer caso, si le decimos que ocupe toda la pantalla del navegador es muy posible que la web se desmorone cuando el usuario cambie el tamao de esa ventana. Los elementos grandes no caben y desplazan el contenido siguiente hacia abajo, produciendo un caos en la web. Lo bueno es que se aprovecharia todo el espacio, cuando lo hay, claro. El otro caso es darle un ancho fijo a la pgina web (por ejemplo 20 cm, o 800 pixeles). As el usuario podr hacer lo que quiera con la ventana de su navegador que la web seguir manteniendo su forma y no se deformar en absoluto. Eso es lo bueno, lo malo es que si no acertamos en qu anchura darle, pasar que unos la vern muy grande y la vern tan pequea que tendrs ms margenes a los lados que espacio para la web....
Ves como encierra a los otros divs? Ahora, en la hoja de estilo definimos #global con las siguientes propiedades: #global {width:800px ; margin: 4px auto } Esto significa que la capa global tendr un ancho de 800 pixeles y aparece una propiedad que no hemos visto antes, (margin: 4px auto) que define el margen a dejar entre el elemento (en este caso el div global) y el resto de cosas a su alrededor. El 4px es la cantidad de margen que vamos a dejar por encima y por debajo de la web, mientras que auto es la cantidad de margen que dejaremos por cada lado. Auto significa automtico, por lo que se dejar todo lo que exceda de 800px y automticamente, es decir, la mitad a la derecha y la otra mitad a la izquierda y por tanto, centrado. Lo veremos mejor ms adelante, no te preocupes si no lo entiendes demasiado bien, vale? Esto no funciona en todos los navegadores a menos que definamos una caracteristica a Body en la Hoja de Estilo estilogeneral.css. Abrela si la cerraste y escribe al principio del todo esta nueva lnea de css: body {text-align: center} Body no es un nombre de un estilo inventado por nosotros, como cabecera, pie, tal y cual, sino que es una etiqueta de Html, y a las etiquetas de Html (como body, p, a, table, div, etc..) no se les pone ni el punto delante ni la almohadilla (#). Lo que estamos haciendo al ponerle propiedades a una etiqueta es cambiar las propiedades que tiene por defecto. Con esto ya queda toda la web centrada en toooodos los navegadores. Si guardas ahora la Hoja de Estilo y haces vista previa de la plantilla.html vers como todo aparece centrado y con un ancho fijo de 800px. Ahora no ser fcil descuadrar tu web. Esto es lo que hemos conseguido con el ejemplo hasta el momento. Va mejorando poco a poco....
Pagina 48 de 129
Ahora queremos crear un men lateral parecido al de esta misma web, el de la izquierda de estas lneas. Te gusta? Pues a ti te puede quedar mucho mejor si tienes un poco de gusto y ganas de experimentar. Como un men es ms o menos una zona rectangular, vamos a crear una capa para meter en ella este men. Como queremos que salga dentro de la parte central de la pgina, dentro de la zona de los textos, meteremos o crearemos este div que vamos a llamar menu dentro del div contenido. Parece lgico, no? Esto es lo que se llama anidar capas. Empezamos creando la capa. Abre en el Html-Kit la plantilla.html y escribe la siguiente lnea justo despus de la etiqueta de inicio de la capa contenidos y antes del texto de dentro suya (Esta ser la.....bla bla blal...), de forma que quede el cdigo Html as:
Como vers, despus del cdigo Html de la capa menu, van los textos de la capa contenido (Esta ser la ....) y despus, en la siguiente lnea vemos la etiqueta de cierre del div contenidos. Ahora tienes que definir el estilo de la capa menu en la Hoja de Estilos. Abre estilo-general.css y escribe esta lnea para el div menu: #menu {background-color: yellow; width: 150px ; float:left } Como solo hay un men por pgina, lo definimos como estilo nico, con la almohadilla (#). Le ponemos un color diferente al resto para distinguir donde empieza y donde termina la capa menu y colocamos dos propiedades ms. La primera es width:150px con la que le damos una anchura fija de 150 pixeles. Quizs sea poco, pero por ahora lo dejamos as hasta que veamos si nos va a faltar anchura en esa capa. La segunda nueva caraterstica que vemos es nueva, la propiedad Float.
Ale, lo de siempre.. guarda la Hoja de Estilos y mira como est quedando la plantilla haciendo vista previa, o si el cansancio puede contigo, miralo aqu mismo, je je je. Bueno, ya estn todas las capas creadas (mucho ms adelante quizs metamos alguna ms...) as que ahora vamos a rellenarlas y a darles una mejor presencia, oki?
Pagina 49 de 129
Para nuestro ejemplo, seguramente nos moleste el dichoso puntito negro a la izquierda de cada elemento de lista, pero eso lo podemos arreglar. Cmo? Pues como siempre, con solo poner una cosilla en la Hoja de Estilos. Pero antes vamos a ver qu cul es el cdigo que tendramos que colocar dentro del div del men. Para empezar, abre tu Html-Kit y escribe el cdigo de arriba dentro del div menu, eliminando claro la palabra "men" que habia ya colocada. Ha de quedar de este modo:
Si haces vista previa vers cosas un poco raras, como que el men se descuelga un poco por debajo de la web, pero eso lo arreglamos en las siguientes pginas.
Eso es todo lo que tenemos que hacer en la plantilla.html porque lo dems, el "aspecto" como siempre, se lo daremos con la Hoja de Estilo ahora mimo.
Pagina 50 de 129
Vamos a empezar a arreglar cosas en la Hoja de Estilos para dar mejor aspecto a este men. Recuerda que la estrategia perfecta para no tener problemas con algunos navegadores y para tener un cdigo Html sencillo para revisarlo nosotros, y sencillo para que los buscadores lo lean bien e indexen nuestras pginas correctamente, es poner en el Html lo justito, y dejar los detalles de cmo queremos adornar cada cosa para la Hoja de Estilo. Adems esto nos permitir hacer cualquier cambio en todas las pginas de nuestra web con solo cambiar una palabra en la Hoja de Estilos. Es genial.
Pagina 51 de 129
Has visto que todos los elementos de la web de ejemplo salen centrados? Sabes porqu? Pues porque pusimos text-align:center en la etiqueta body, y como el body contiene toda la web, entonces todos los elementos de la web estarn centrados, a no ser que..... a no ser que le indiquemos otra cosa a cada estilo concreto, claro. Por ejemplo, los enlaces del men quedan mucho mejor si aparecen alineados a la izquierda, verdad? Pues vamos a arreglar eso ahora mismito! Abre tu Html-Kit, la Hoja de Estilo y, escribe text-align:left dentro de las propiedades de la capa menu, tal que quede as: #menu {background-color: yellow ; width: 150px ; float:left ; text-align:left } La verdad, tambin se hubiera podido poner el text-align:center en el estilo #menu li, no? De la forma anterior se aplica a todos los elementos de la lista, mientras que definiendolo en #menu li solo se aplicara a los elementos encerrados entre <li> y </li>. Tiene sentido, verdad? Lo dejamos definido en el #menu por ahora. Ahora los enlaces aparecen bien, a la izquierda, pero un poco demasiado pegados a la izquierda, verdad? Seguimos mejorando el aspecto en la pgina siguiente. Qu tal lo llevas? Levntate un poco y estira las piernas, que te va a dar algo malo! je je je je. Si no entiendes algo o quieres que te explique mejor alguna parte dmelo en el Foro CCTW, sin problemas, o escribe all tus dudas o sugerencias, que para eso estamos colega!
Pagina 52 de 129
Los enlaces como ya sabes, de escriben con la etiqueta <a> y por tanto est claro que para modificar sus propiedades basta con escribir una "a" en la Hoja de Estilos y modificar cosas entre los corchetes. Las caractersticas que definamos as para los enlaces se aplicarn a todos ellos sea cual sea su estado. Ahora te cuento qu es eso de los estados. Se distinguen cuatro estados posibles para los enlaces, que son los siguientes: - link: Es el estado normal que tiene un enlace cuando no est en ninguno de los otros tres estados. - Visited: Imagino que te habrs fijado que en algunas webs se colorean de otro color los enlaces que ya has visitado antes, verdad? Pues "visited" es el estado del enlace cuando ste ya ha sido visitado por el usuario anteriormente. - Hover: Es el estado del enlace cuando el cursor del ratn est justo encima de l, pero sin apretar el botn an. Tambin lo has debido ver, pasas el ratn sobre un men y se van coloreando o poniendo en negrita los enlaces que sealas. - Active: Y este es el estado de un enlace o vnculo cuando est siendo presionado por el ratn y mientras no se suelta el dedo. Hay que ver cuanto ests aprendiendo eh? Y gratis! No te quejaras, je je je. Bueno, pues como te deca antes, si en la Hoja de Estilo solo indicas la "a" de enlace seguido de los corchetes con sus propiedades, entonces esas propiedades afectarn a los enlaces sean cuales sean sus estados. Se hara as (en la Hoja de Estilos, claro): a {color: blue; font-size:1.3em ; text-decoration: none} En este ejemplo de arriba le hemos indicado que TODOS los enlaces, sean cuales sean sus estados, han de ser azules (color:blue), han de tener un tamao de letra de 1,3 veces lo que correspondera normalmente (font-size:1,3em) y finalmente que no deben tener ningn tipo de decoracin, esto es, el subrayado (text-decoration: none). Por defecto siempre salen subrayados, que se define con text-decoration: underline Si no quieres destacar los enlaces segn los estados que te he explicado antes, basta con definirlos en esa nica lnea, no obstante si quieres darle algn toque diferente en funcin de alguno de esos estados, se vuelve obligatorio definir los cuatro estados y adems en ese mismo orden que te he puesto.
Sin subrayar y marrones, excepto cuando se lococa el cursor encima que pasan a rojos y subrayados
Con estos estilos los enlaces nunca aparecen subrayados hasta que se coloca el cursor del ratn sobre ellos. Esto es bueno, para destacar al usuario que son enlaces. Adems pasan de color marrn (brown) a color rojo (red) cuando se pasa el ratn sobre ellos. Fjate como defino todos los estados aunque deje vacios algunos estados. Siempre hay que ponerlos todos y en ese orden adems.
Estas lneas de cdigo puedes escribirlas ya en la Hoja de Estilos estilo-general.css Depus gurdala y mira los cambios con la vista precia en plantilla.html Qu, se va animando esto o no? No? pues vamos a mejorarlo an ms...
Pagina 53 de 129
Ms contenidos
Tras esta aclaracin, vamos a incluir un par de prrafos ms a continuacin de ese. Ya sabes, has de poner <p> y </p> al principio y al final de cada uno para que el navegador sepa donde empiezan y terminan. Escribe un par de prrafos que tengan bastante texto, al menos lo suficiente como para sobrepasar lo que ocupa el men de la izquierda. Si escribes lo suficiente en cantidad, conseguirs ver este aspecto en tu plantilla.html
Pagina 54 de 129
Con esto los textos quedan justificados. Esto significa que se reparten para que empiecen justo en la parte izquierda y terminen todas las lneas justo en el margen derecho, sin huecos. A mi me gusta as, pero si lo prefieres, en tus pginas puedes definirlo como text-align: left o text-align:right o text-align:center, como quieras. En el ejemplo lo dejamos con Justify.
plantilla.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <html> <head> <title>Page title</title> <link rel="stylesheet" href="estilo-general.css" type="text/css" media="all"> </head> <body> <div id="global"> <div id="cabecera">Bienvenidos a mi Web</div> <div id="navegacion">Barra de Navegacin</div> <div id="contenido">
estilo-general.css
Pagina 55 de 129
* {text-indent:0px ; margin:0px ; padding:0px ; border:0px} body {text-align: center } #global {w idth:800px ; margin:4px auto } #cabecera {background-color: pink } #navegacion {background-color: gray } #contenido {background-color: orange ; w idth: 800px ; float:left } #contenido p {padding: 5px 10px 5px 10px ; text-indent: 15px} #menu {background-color: yellow ; w idth: 150px ; float:left ; text-align:left ; margin-right: 10px } #menu li {list-style:none ; margin: 4px 0px 4px 6px } #pie {background-color: brow n } a {color: brow n ; text-decoration:none ; display: block } a:link {}
Border
Si en una capa solo definimos su contenido en Html, esta solo mostrar eso, el contenido, ya sea una imagen, un prrafo o lo que sea. Pues bien, la propiedad border dibuja un borde alrededor justo de ese contenido. El borde estar pegadito pegadito al contenido, como en este caso de la derecha. El borde por defecto, si no se indica otra cosa, es una lnea continua de 1 pixel de grosor y de color negro.
Padding
El padding lo usaremos para definir una distancia de separacin entre el borde y el contenido. Es decir, separa el borde de su contenido en una distancia igual a la que le indiquemos. Concretamente, esta zona sera como la parte roja que se ve en esta otra imagen de la derecha. Como ves, el borde ahora no est pegado a la imagen, sino separada de ella por la zona roja que ha sido definida con la propiedad margin. Fjate que el borde ahora est pegado al padding, no al contenido.
Margin
Ahora tenemos otra distancia ms. El margin es la distancia de separacin que se va a dejar entre el borde y la parte exterior del elemento de la capa. En este caso no se ve, pues es una zona exterior al dibujo en la que no se permite que aparezca nada. Por eso se usa para separar unos prrafos de otros, como vimos en las lecciones primeras. En este caso solo hay definido el margin en el ejemplo de la derecha. Como ves, hay una separacin entre la imagen y este mismo prrafo, aunque no se ve.
El trio Margin-Padding-Border
Pagina 56 de 129
En la imagen de abajo puedes ver mejor a qu zona corresponde cada una de estas propiedades.
Puedes ver el borde, que le he puesto color azul para distinguirlo. Entre el borde y el contenido est la separacin creada por el padding y entre el borde y el exterior el espaciado dejado por el margin. As, si ponemos dos imgenes una junto a la otra y queremos separarlas, usaremos por ejemplo el margin. Lo mismo para los prrafos etc. Si quisieramos separar un elemento A de los que tiene alrededor, le pondriamos a A un margin. Si tenemos un elemento encerrado en una capa y queremos que su contenido se separe un poco de su extremo (de su borde) le hariamos un padding.
Pagina 57 de 129
No estara de ms que crearas una pgina aparte e investigaras los efectos del margin, el border y el padding por tu cuenta. Para distinguir una cosa de otra lo mejor es ponerle un color al body (a estas alturas debes saber hacerlo), creas una capa a la que pones nombre y le aplicas otro color diferente y luego le aplicas otro color distinto ms al elemento que pongas dentro de la capa, que puede ser una imagen, un prrafo, una lista, etc, etc. Seguro que te resultar curioso observar los cambios que produce variar esos datos en la hoja de estilo y seguro que aprendes un montn. Yo por mi parte intentar ponerte algunos ejemplos en cuanto pueda para esclarecer estos conceptos, oki? Pero recuerda, no lo pruebes en los archivos de este ejemplo para no perdernos en las lecciones, hazlo en un archivo aparte. Mientras tanto, seguimos con las lecciones, vale?
El subttulo, de etiqueta h2, lo vamos a poner en el texto "Y este es el tercer prrafo" (en realidad ahora es el segundo, pues el pimero lo hemos convertido en un ttulo h1, pero bueno). Para convertir ese trozo en subttulo, ya sabes que no debe estar entre las etiquetas <p> y </p>, de modo que lo encerramos entre <h2> y </h2> y pasamos la etiqueta <p> de ese prrafo despus de ese trozo de texto, quedando as:
Pagina 58 de 129
Los ttulos aparecen como elementos de una sola lnea, o mejor dicho, no dejan que otra cosa como por ejemplo un prrafo, continue a su derecha, mandndolo directamente a la lnea siguiente. Lo ves en la vista previa?
Aunque en el cdigo HTML pongamos un prrafo seguido de un ttulo (en la misma lnea de cdigo), el prrafo siempre aparecer debajo, en la siguiente lnea, pues para eso es un ttulo, no? Pues ya est. Ya sabemos ms cosas. Si te gustan los ttulos alineados a la izquierda ya sabes como cambiar la Hoja de Estilo para conseguirlo (text-align: left). Lo mismo para el resto de propiedades.
Tercera leccin
Buscando alojamiento para la pgina web
Ya va siendo hora de ir subiendo nuestro trabajo a la red, verdad? Aunque an no est terminada la pgina web, es bueno tener ya un sitio para alojarla (a ese sitio se le llama Hosting) para ir viendo cmo se comporta la web en realidad.
Pagina 59 de 129
Para no repetir aqu cosas que ya tenemos explicadas en CCTW, os invito a visitar la seccin Hosting y Dominios. Una vez que entres all aprenderas todos los conceptos relacionados, con los que podrs escoger con ms idea el hosting que ms se amolde a tus necesidades. Si tienes mucha prisa y quieres ir al grano, ve directamente a la pgina donde explico cmo registrarte en un servidor gratuito sin publicidad, pero no olvides volver a esa seccin y leer el resto de informacin cuando puedas, te ser til en el futuro. Cuando termines de leer esa seccin, te dars de alta en el Hosting que quieras y podrs seguir con las lecciones siguientes, pero recuerda apuntarte en un papelito (vale tambin una Hoja de Excel o del Notepad) los siguientes datos:
Nombre de usuario para el Hosting. Contrasea de tu cuenta de Hosting. Direccin FTP con la que subir tus datos a la red. Direccin de tu pgina web.
Ahora seguramente te suene a chino todo eso, pero tras leer esa seccin sabrs lo que significa cada cosa. Aprenders all a escoger un hosting tanto de pago como gratuito, ambos sirven perfectamente para aprender, de modo que no tienes escusa. Si no lo haces no podrs aprovechar las lecciones al 100%, aunque tambin aprenderias cosas, claro. Sera como aprender a conducir sin tocar nunca un coche.... osea, n de n. No lo olvides, para cuando regreses aqu para seguir las lecciones, has de tener ya los datos anteriores, vale? Pues ya sabes. Y ante cualquier duda recuerda que en el Foro CCTW tienes una seccin para cada consulta, salo sin que te de vergenza preguntar tonterias y no te arrepentirs.
Aparece una ventana donde tienes que colocar algunos de los datos que apuntaste, veamos qu datos son y dnde van apuntados.
Pagina 60 de 129
(1) Aqu pon la direccin de tu FTP. Suele empezar por ftp.nombredelservidor.. pero cada hosting es algo firerente. En la imgen de arriba puedes ver los datos que yo puse para la configuracin del Ftp de una cuenta creada en Razy (recomendado para seguir el curso). (2) Aqu se pone el puerto de conexin. Ni yo se lo que es, pero coloca un 21 a no ser que tu hosting te indique otra cosa. (3) Tu nombre de usuario para el Hosting que tengas. En Razy son nmeros aleatorios, como puedes ver en la imagen. (4) La contrasea o password. (5) Activa esta casilla si no quieres tener que estar escribiendo la contrasea cada vez que quieras conectar tu Ftp. (6) Es solo el nombre que aparecer en la ventana Workspace del Html Kit. Pon lo que ms te guste. Yo he puesto web-ejemplocctw-internet para diferenciarlo de la carpeta local que llamamos web-ejemplo-cctw-local. Para seguir el ejemplo de este curso haz como yo y as evitars perderte cuando me refiera a esa carpeta. Luego, para tus trabajos la puedes llamar como te de la gana, claro. (7) Initial Directory: En ocasiones al registrarte en un servidor te indican la ruta inicial o FTP Path, que has de colocar en el Ftp. A veces es /www/ otras veces es /html_public/... Si te has registrado en Razy escribe aqu lo mismo que pusiste en el punto (1) y te funcionar bien. Para qu sirve? Simplemente indica al Ftp cul ser la carpeta raiz que se va a mostrar. Lo entenders con el tiempo, no es muy importante. (8) Passive Mode. Esto no lo domino bien. Si se que unos servidores piden que se use el modo activo y otros el modo pasivo. Si lo pones al contrario quizs te cueste conectarte. Razy por ejemplo pide que se active. Tiene que ver son los puertos que se usan para la conexin.... un rollo, vamos, je je. El resto de opciones de esa pestaa y de las otras dos no hace falta tocarlas. Pulsa en OK y seguirmos.
Pagina 61 de 129
Ahora podemos ver una nueva carpeta en la ventana de la derecha (ver > Workspace) del Html-Kit. Es esta sealada en la imagen de abajo:
Si ahora simplemente pulsas sobre esa carpeta, se abrir mostrando todos los archivos que hay en internet. Seguramente solo haya uno llamado index.html sin contenido alguno o con algn mensaje de "En construccin". Esa pgina la pone el propio hosting mientras que t no subes la tuya.
Ojo! Si al pulsar sobre el signo "+" de la carpeta azul sta no llega a abrirse nunca sino que aparece una lupa buscando y tarda demasiado (varios minutos) sin que termine de mostrar los archivos de dentro, podra ser que:
Tienes en casa un cortafuegos o firewall que impide al HtmlKit conectarse. Tendrs que darle permisos al HtmlKit
en tu cortafuegos de windows. Estas en el trabajo (no diremos nada...) donde seguramente tienen un proxy que impide la conexin de FTPs. Pruebalo entonces desde casa. Los datos que has colocado no han sido escritos correctamente. A veces copiar y pegar no funciona (pues aade un espacio en blanco al final). Prueba a escribirlo a mano. Puede que los datos de usuario o contrasea los pusieras con alguna mayscula y has de escribirlo igual que lo pusiste al registrarte. No has pagado la conexin a internet este mes o el gato le ha dao un bocao al cable... Si no logras conectarte verificando estas medidas, pregntanos en el foro CCTW. Qu? Ha sido facil? Si tienes problemas con esto lanza tu pregunta en el Foro CCTW, en la seccin "Problemas de Conexin", oki? y recuerda indicarnos cul es tu hosting para poder ayudarte mejor, y la direccin, etc, etc.
Pagina 62 de 129
Ya tenemos unos cuantos archivos de nuestra web de ejemplo. Los podemos ver en la ventana Workspace del Html Kit, dentro de la carpeta "web-ejemplo-cctw-local". Tambin tenemos el ftp configurado y lo podemos ver en la misma ventana, debajo de la carpeta anterior con un smbolo a su izquierda de color azul. Estos smbolos azules indican que se tratan de carpetas de servidores (archivos en la red) mientras que los amarillos indican que son locales (estn en tu ordenata). Ahora vamos a ver cmo nos las ingeniamos para subir los archivos desde nuestro des-ordenador hacia nuestro nuevo hosting usando el Ftp configurado antes. Haciendo clic en el signo "+" de la izquierda de la carpeta del ftp "web-ejemplo-cctw-internet" podrs ver qu archivos hay en tu servidor (hosting) en estos momentos. Dale y vers que aparece un archivo index.html Este archivo index.html es el primero que lee el navegador cuando se teclea la direccin de cualquier web en l. Todas las webs tienen un index.html y el que t ves ahora es el que ha colocado tu hosting para que se vea alguna cosa mientras que subes tu propio index.
Pagina 63 de 129
Despues hacemos lo mismo, clic con el botn derecho del ratn y escogemos esta vez la opcin "Upload" que significa "Subir":
Se abre entonces una ventana donde debemos buscar, dentro de la carpeta donde guardamos los archivos de la web de ejemplo, el archivo index.html (la ruta sera algo as como C:\Documents and Settings\Usuario\Escritorio\mis-paginas-web\web-ejemplocctw). Selecciona el index.html y pulsa en "Abrir".
Pagina 64 de 129
Pues ya est. Ahora aparecer en la ventana Workspace del Html Kit el nuevo archivo index.html, pero esta vez es el nuestro. Si ahora visitas tu pgina web escribiendo en tu navegador la direccin, vers algo parecido a la pgina web del ejemplo que estamos haciendo. Concretamente vers esto:
No se ve ni la sonrisa, ni la imagen de fondo, ni el buzn ni se estn respetando los estilos css. Por qu puede ser? Este es el error ms frecuente al principio y por eso te pido que prestes atencin a esto.... Si no subes el archivo correspondiente, no se ven los elementos. Si no se ve el buzn es porque no se ha subido (upload) el archivo del dibujo del buzn. Lo mismo para el fondo. Y si los estilos no se estn respetando es porque no se ha subido an la Hoja de Estilo (estilos.css). Obvio verdad? Pues vers como caes alguna vez, je je. En la pgina siguiente aprendemos a subir el resto de archivos y as arreglamos el problema.
Pagina 65 de 129
Se abre una ventanita donde has de ponerle el nombre a la carpeta. Recuerda, es "objetos" (todo en minsculas) no "Objetos":
Ahora que ya tienes la carpeta "objetos" dentro de tu hosting. Ten en cuenta una cosa importante. Cuando quieras colocar un archivo directamente en la raiz de la web (la raiz significa en el primer nivel de la web, es decir, fuera de cualquier carpeta) has de hacer el "clic derecho" sobre el nombre "web-ejemplo-cctw-internet". Pero si lo que quieres es colocar algn archivo "dentro" de una carpeta, es sobre esa carpeta donde has de hacer "clic derecho" para escoger luego "Upload". En caso contrario el archivo no se subir dentro de esa carpeta. Ojo! Por tanto, para subir ahora los archivos que hay dentro de la carpeta "objetos" de tu disco duro a la carpeta "objetos" del servidor, has de hacer clic derecho sobre la carpeta objetos azul, hacer clic en "upload" (o en Connect antes si se ha desconectado) y despus escoger los archivos a subir, vale? Pues dale, a ver si lo consigues...
En definitiva...
Al final, si abres las carpetas web-ejemplo-cctw-local y web-ejemplo-cctw-internet en la ventana Workspace del Html Kit y si has hecho los deberes correctamente, te ha de aparecer algo como lo que se muestra en la imagen de la derecha.
Pagina 66 de 129
Ya tenemos los archivos de lo que llevamos hecho de ejemplo en el nuevo hosting. No es emocionante? A partir de ahora, cada vez que hagamos algn cambio o mejora en el ejemplo podremos subirlo al servidor (o hosting) para ver como va quedando. An nos queda mucho por hacer, as que... paciencia y nimo. Por cierto, si quieres ver tu plantilla.html en tu servidor despus de haberla subido, basta con escribir su direccin en tu navegador. Su direccin ser la misma que escribes para ver el index, seguido de /plantilla.html Es decir, si tu direccin es http://yomismo.onlinewebshop.net/ la direccin de la plantilla ser http://testeando.onlinewebshop.net/plantilla.html
Pagina 67 de 129
border-right: black 1px solid (dibuja el borde solo por derecha) Si queremos dibujar el borde por varios lados pero no por los cuatro, basta con escribir (entre los corchetes del elemento al que se lo queremos aplicar) las lneas anteriores que queramos, separadas por punto y coma ";".
Pagina 68 de 129
Solo es necesario tener un poco de destreza para dibujar lo que necesitamos con un programa de dibujo, como el Paint del Windows, o similar. En el Foro CCTW hay una seccin en la que se habla del Paint Shop Pro (PSP) que quizs te sea de ayuda para aprender a dibujar con el ordenador. Para no mezclar mucho las cosas, partirmos aqu de algunas imgenes ya hechas. Las usaremos para este ejemplo de pgina web que estamos haciendo y te dejo a t que crees las tuyas para que la pongas en tu propia web, oki? Para empezar, cpiate estas dos imgenes y pgalas en la carpeta "objetos" para poder seguir estas lecciones. Por si no recerdas cmo se copiaban imgenes de otras webs, te recuerdo que solo tiene que hacer clic con el botn derecho del ratn sobre la imgen y escoger la opcin "Copiar Imagen..." (o algo parecido). Luego seleccionas la carpeta de tu disco duro donde la quieres pegar (la carpeta objetos) y listo. Se trata de imgenes con extensin gif y con fondo transparente. Gurdalas ponindoles de nombre curva-superior.gif y curvainferior.gif A continuacin veremos paso a paso como poner estas imgenes en la parte alta y baja de la pgina web para conseguir un efecto ms profesional.
Pagina 69 de 129
background-repeat: no-repeat ; width:800px ; height: 12px ; overflow : hidden }
Ahora, si guardas la hoja de estilo y haces vista previa si que se ve correctamente, aunque ahora parece que sobran dos cosas. Por un lado el borde entre la imagen y la capa donde pone bienvenido sobra y por otro lado, si le damos color de fondo blanco (white) a esa capa rosa, el efecto ser an mejor. Para eliminar el borde solo de la parte de arriba de la capa cabecera eliminamos lo que pongo en rojo abajo: #cabecera { background-color: pink ; border-left: black 1px solid ; border-right: black 1px solid ; border-top: black 1px solid } y para poner color de fondo blanco (white) en lugar de rosa (pink) dejamos finalmente la lnea as: #cabecera { background-color: white ; border-left: black 1px solid ; border-right: black 1px solid } El efecto conseguido, aunque no es asombroso, es ms profesional.
#curva-inferior { background-image: url(objetos/curva-inferior.gif) ; background-repeat: no-repeat ; width:800px ; height: 12px overflow: hidden }
3.- Quitamos el borde de abajo de la capa pie (ya sabes, eliminamos border: black 1px solid que da borde a los cuatro lados y aadimos los tres lados que queremos, left, right y top) y adems le ponemos color blanco (white) de fondo a esa capa:
#pie { background-color: white ; border-left: black 1px solid ; border-right: black 1px solid; border-top: black 1px solid }
Repito, he eliminado el border: black 1px solid que le daba borde a los cuatro costados y he colocado en su lugar el borde por la izquierda, derecha y arriba solamente. 4 .- Guardamos la hoja de estilo y obtenemos esta visin.
Pagina 70 de 129
Aunque ya lo hemos hecho antes con el index.html y algunos archivos de la carpeta objetos, vamos a repetir cmo se suben los archivos al servidor y as aprovechamos para subir estos ltimos que hemos creado, vale? As quedar todo un poco ms claro y no lo olvidaremos (espero...). Si no recuerdo mal, desde esa vez anterior tenemos varios archivos nuevos, como las dos imgenes de la carpeta objetos, los de arriba y abajo de la plantilla, y por otro lado tambin hemos variado la plantilla.html y la hoja de estilos estilo-general.css Recuerda que cuando hacemos un cambio en los archivos de nuestra pgina web, estos cambios solo estn en nuestro ordenador. De modo que para que los visitantes de la web puedan verlos, tenemos que subir esos mismos archivos con los cambios realizados al servidor. Si no, los visitantes seguiran viendo la versin antigua. Por tanto, los archivos que tenemos que subir son:
Para subir los archivos plantilla.html y estilo-general.css basta con hacer clic con el botn derecho del ratn sobre la carpeta azul web-ejemplo-cctw-internet, escoger la opcin "connect" para conectar el FTP al servidor, depus hacer clic de nuevo sobre el mismo sitio y escoger la opcin "Upload...", seleccionar el archivo que queremos subir al servidor (puedes seleccionar esos dos de una sola vez manteniendo pulsada la tecla Control a la vez que haces clic en varios de los archivos) y listo. Si el archivo ya exista, te dir que ya existe y te pregunta si lo quieres sobreescribir.
Dile que s y listo, archivo actualizado. Para subir los dos archivos de las imgenes de la parte alta y baja de la plantilla que acabamos de usar en las pginas anteriores, se hace del mismo modo, pero haciendo clic derecho sobre la carpeta objetos antes de elegir Upload. En caso contrario los archivos irn a parar a la raiz del servidor, es decir, fuera de la carpeta objetos y claro, no aparecern en la web, pues el navegador los va a buscar dentro de esa carpeta. Si te ocurriera eso, simplemente borra los archivos que se han colado fuera de la carpeta y vuelves a subirlos, esta ves correctamente. Ha de quedar una cosa as en la vista de Workspace del Html-Kit:
Pagina 71 de 129
Ahora que lo has pegado en tu carpeta objetos, cambiale el nombre. Ha de llamarse logotipo.gif, oki?
Pagina 72 de 129
Este logotipo.gif lo vamos a situar en la parte superior de cada una de las pginas, por lo que la capa correspondiente ser el div llamado cabecera. Para facilitar la colocacin de los elementos que pongamos en la cabecera, que mejor que crear dos divisiones dentro de ese espacio o capa? As, ser ms fcil colocar el logotipo a la izquierda y dejar un espacio a la derecha, en otro div, para en un futuro colocar una foto guapa o quien sabe, quizs publicidad para ganar algo de dinero extra y pagarnos el hosting de la web, no? Pues segn eso, vamos a crear dos divs dentro del div cabecera. Los llamaremos... logotipo y ... publicidad, por qu no. As que, abre la plantilla.html con tu Html Kit, y ve a la vista de cdigo para cambiar esta lnea (te recuerdo que los cdigos Html los escribo en azul y los de la hoja de estilos en verde):
<div id="logotipo"> <img src="objetos/logotipo.gif" width="270" height="80" alt="Haz clic aqu para volver a la pgina de inicio"> </div>
Lo que he puesto dentro del alt="" es el mensaje que aparecer en algunos navegadores si dejamos el cursor sobre el logotipo. Ahora nos toca crear y darle propiedades a esa nuevas capas en la hoja de estilos estilo-general.css as que la abrimos y aadimos esto (le he puesto colores de fondo para ver donde est cada una):
#logotipo
{background-color: brown}
Pagina 73 de 129
decir, 800-280-2=518 pixeles. (ese 2 es un pixel del borde izquierdo ms otro pixel de grosor del lado derecho de esa capa, pues los grosores tambin ocupan un espacio).
#logotipo
Guardando la hoja de estilos y haciendo vista previa vemos que realmente estas dos capas estn una encima de otra. Cmo se evitaba esto ? Venga, haz memoria... qu propiedad permite que podamos poner una a un lado y la otra al otro lado? A ver si te haces una chuleta! (en Mejico creo que se llama acorden, je je). Por si no te acuerdas te ayudo un poco. Vamos a ponerle float:left a logotipo para colocarlo a la izquierda y float:right a publicidad para mandarla a la derecha.
#logotipo
Guardamos la hoja de estilo y hacemos vista previa en plantilla.html para ver cmo ha quedado... excto, una verdadera mierda , je je je. Vamos a arreglarlo un poco. Para empezar vamos a darle una altura concreta a la capa cabecera, por ejemplo de 85 pixeles (un poquito ms que la altura del logotipo que es 80px). As la capa gris que vemos que se mete dentro del espacio de publicidad respetar esa dimensin. As que dejamos cabecera as:
#cabecera {background-color: white ; border-left: black 1px solid ; border-right: black 1px solid ; height:85px}
Con esto la cosa se arregla bastante. Ahora solo queda bajar un poco el texto de Bienvenida y quizs hacer el tamao de letra algo mayor (esto del tamao de letra lo vemos luego). Modificamos en la hoja de estilos la capa publicidad para dejarla as:
<div id="logotipo"> <img src="objetos/logotipo.gif" width="270" height="80" alt="Haz clic aqu para volver a la pgina de inicio"> </div>
le aades esto que marco en negrita:
<div id="logotipo"> <a href="index.html"> <img src="objetos/logotipo.gif" width="270" height="80" alt="Haz clic aqu para volver a la pgina de inicio"> </a> </div>
Listo, haz vista previa y verifica que todo va bien. Ahora no solo tenemos el banner, sino que tenemos preparado un hueco para poder poner un fondo que mejore el aspecto o publicidad, si lo deseamos. Para cualquiera de esas dos cosas, habra que retocar algo, como por ejemplo eliminar el margin-top:25px de la capa publicidad en la Hoja de Estilos, pero es algo que veremos en su momento. Si ves que se me olvida me lo recuerdas en el Foro CCTW!
Pagina 74 de 129
Antes de crear tu propia web es muy importante que tengas claro un par de cosas. Lo primero es saber de qu vas a hablar en la web y lo sengundo es tener ms o menos claro cmo vas a estructurar esos contenidos. Es decir, desglosar lo que quieres contar en secciones y subsecciones. De ese modo sabrs qu secciones vas a colocar en el men superior. A la hora de crear la web, colocaras las secciones en el men horizontal superior y al hacer clic sobre cada una de esas secciones, se abrira la pgina principal de esa seccin mostrando en el men vertical lateral (el de la izquierda que ya hemos colocado en este ejemplo) las subsecciones. Por ejemplo, digamos que voy a crear una web de un grupo de msica. Las secciones que se me ocurren son, "Presentacin", "Historia del grupo", "Trabajos musicales", "Conciertos" y "Zona de Descarga". Luego, cada una de esas secciones principales pueden desglosarse o dividirse en otras subsecciones. Por ejemplo, en la seccin "Trabajos Musicales" podran aparecer las subsecciones "Disco 1", "Disco 2"...."Disco 9". La seccin descargas podra dividir se "Canciones", "Videos", "Poster y Carteles", "Letras".... Para que entendais la idea, las secciones principales irian en el men horizontal que vamos a aprender a crear ahora mismo, mientras que las subsecciones irian en el men lateral.
<ul> <li>Seccin 1</li> <li>Seccin 2</li> <li>Seccin 3</li> <li>Seccin 4</li> </ul>
Pues ese es el cdigo Html que tenemos que poner dentro de la capa navegacin, eliminando claro el texto que tena de "Barra de Navegacin" quedando al final as:
<div id="navegacion"> <ul> <li>Seccin 1</li> <li>Seccin 2</li> <li>Seccin 3</li> <li>Seccin 4</li> </ul> </div>
Cuando hagas tus experimentos y quieras aadir o eliminar enlaces en el men horizontal, solo tendrs que irte a la plantilla.html y aadir o eliminar lneas <li> Seccin X</li> a este trozo de cdigo de arriba. Si haces vista previa de la plantilla vers algo as. Sorpresa? Puedes ver que los elementos no aparecen uno al lado de otro sino un debajo del otro. Esto es normal, pues las listas son as. Pero nosotros vamos a cambiar eso con solo poner la palabra mgica adecuada en la hoja de estilos, que para eso est. Abre el archivo estilo.general.css con el Html-Kit y vamos a modificar la lnea de la capa navegacion, que hasta este momento era as:
Pagina 75 de 129
Para empezar vamos a intentar que todos los elementos de este menu de navegacin aparezcan uno al lado de otro, en lnea. Para ello usaremos la propiedad float, que hace que los elementos floten y se desplacen hacia el lado que queramos. Si a definimos que todos los elementos floten hacia la izquierda, el primero de ellos se ir hacia la izquierda, el segundo igual quedando al lado del anterior y as con todos los demas. Vamos a probarlo a ver qu pasa. Al querer ponerle float:left a todos los elementos de la lista, parece lgico pensar que en la hoja de estilo hay que ponrselo a los li que haya dentro de la capa navegacion (hay que evitar que los li de la otra capa del men lateral tomen esa propiedad), as que aadiriamos esta otra lnea en la hoja estilo-general.css:
#navegacion li {float:left}
Haciendo vista previa vemos este resultado en la plantilla. Como era de esperar... vemos un autntico churro, pero vamos a terminar de arreglarlo. Normalmente, si le damos una altura concreta a la capa, se arregla todo. Vamos a colocarle height:20px a la capa navegacion (no a #navegacion li {...., sino a #navegacion {.... ) y veamos que pasa:
Pagina 76 de 129
destino le colocaremos un simple #. Eso hace que los enlaces se muestren como tales, pero al pulsar sobre ellos no te mandan a ningn lado. Para convertir los elementos de la lista del men horizontal en enlaces, basta con colocarle esto que os sealo en negrita al cdigo inicial que pusimos en el archivo plantilla.html:
<div id="navegacion"> <ul> <li><a href="#">Seccin 1</a></li> <li><a href="#">Seccin 2</a></li> <li><a href="#">Seccin 3</a></li> <li><a href="#">Seccin 4</a></li> </ul> </div>
Con eso, la plantilla se ve ahora de esta forma. Fjate que ahora los enlaces del men horizontal se comportan como los del men lateral, es decir, aparecen rojos y sin subrayar y cuando colocas el cursor del ratn sobre ellos aparecen con fondo gris claro y con lnea bajo ellos. Esto es porque cuando definimos las propiedades a las etiquetas a en la hoja de estilo, lo hicimos de forma general, es decir, para TODOS los enlaces. Ms adelante aprenderemos a crear varios tipos de enlaces, por si queremos que los del men lateral se comporten de un modo distinto a los del men horizontal o incluso distintos a otros elementos del cuerpo de la pgina web.
Pagina 77 de 129
Igual que hemos hecho en otras ocasiones, guarda estas dos imgenes en tu carpeta objetos y ponles estos nombres: menucurva-superior.gif y menu-parte-inferior.gif Imagino que imaginas lo que toca hacer ahora... un poquito de Html y otro poco de CSS y asunto concluido. Ser fcil. Estate atento y podrs aplicar luego todo esto a tu propio proyecto.
<div id="menu"> <ul> <li><a href="#">Enlace 1</a></li> <li><a href="#">Enlace 2</a></li> <li><a href="#">Enlace 3</a></li> </ul> </div>
Bueno, realmente es ese pero todas las lneas entre <ul> y </ul> han de estar seguidas una justo despus de la otra para que el internet explorer muestre bien el men. Yo aqu lo escribo en lneas separadas para que se vea ms claro, pero acurdate de luego guardar la plantilla con todas esas lneas seguidas. La idea de colocar las imgenes anteriores como fondos, pues as no nos molestar a la hora de escribir los enlaces dentro. Para ello la imagen ms larga se la vamos a poner de fondo a la capa menu, mientras que la imagen ms corta, la de arriba se la tenemos que poner a algn elemento de dentro de esa capa. Si se la ponemos de fondo a los enlaces, esa imagen se repetir con cada enlace, con lo que no nos vale (solo debe aparecer una vez y adems arriba del todo). Para remediarlo le vamos a poner un ttulo al men. Como cada seccin tendr su propio men parece buena idea que ese ttulo sea el nombre de esa seccin. As, si una seccin se llama "poesias", por ejemplo, pondremos la palabra "Poesias" arriba del todo del men, como si fuera un ttulo, y al elemento ttulo (h1) le colocaremos ese fondo corto. Y todo arreglado. De modo que, lo nico que hemos de retocar en el cdigo Html de la plantilla.html ser el incluir el ttulo. Si recuerdas de lecciones anteriores, los ttulos se escriben igual que los prrafos, pero en lugar de usar las etiquetas <p> y </p> se usaban estas otras, <h1> y <h1> (es un uno, no una ele!). El men anterior con el ttulo puesto quedara entonces con este cdigo Html:
<div id="menu">
Pagina 78 de 129
<ul> <h1>Ttulo de Seccin 1</h1> <li><a href="#">Enlace 1</a></li> <li><a href="#">Enlace 2</a></li> <li><a href="#">Enlace 3</a></li> </ul> </div>
El problema que se nos presenta es que nosotros ya habamos definido unas caractersticas para los prrafos tipo h1, por lo que ahora si las cambiamos, tambin cambian las propiedades de los ttulos que en un futuro pongamos en el contenido de la pgina. Esto se supone que sabemos arreglaro. Queremos definir unas propiedades para los ttulos del tipo h1, pero solo para los que estn dentro del men, es decir, los que pertenecen a la capa menu. Te acuerdas como se haca? Je je je, que memoria... Abre el archivo estilo-general e incluye esta lnea, por ejemplo, debajo de la lnea donde definimos la capa menu, as seguiremos cierto orden.
#menu h1 {}
Con esa lnea lo que conseguimos es darla propiedades SOLO a los ttulos que hay dentro de la capa menu, sin tocar para nada los dems. Solo un problema, y es que como los navegadores leen desde arriba hacia abajo. Te lo explico mejor. Imagina una casa llamada Body. Dentro de ella hay unas cuantas habitaciones que llamamos Capas y dentro de cada habitacin o capa hay varios elementos (prrafo, enlaces, etc). Imagina ahora que la hoja de estilos le cambia los aspectos a los elementos de la casa. Por ejemplo, si escribo esto:
Para no perdernos, te dejo la hoja de estilo-general.css tal y como ha de estar ahora mismo, despus de haber incluido (aunque an vacia) la lnea para definir los ttutlos de dentro de la capa menu. Comparala con la que tienes por el momento y si no est igual, sustituyela, oki? Debe tener ese orden para no liarnos lecciones sucesivas:
* {text-indent:0px ; margin:0px ; padding:0px ; border:0px} p {text-align: justify} h1 {font-size: 1.2em; color:blue ; font-weight: bold ; text-decoration: underline ; text-align: center} h2 {font.size: 1.1em; color:blue ; font-weight: bold ; text-decoration: none ; text-align: center}
Pagina 79 de 129
body #global {text-align: center } {width:800px ; margin:4px auto }
#curva-superior { background-image: url(objetos/curva-superior.gif) ; background-repeat: no-repeat ; width: 800px ; height:12px ; overflow: hidden } #cabecera {background-color: white ; border-left: black 1px solid ; border-right: black 1px solid ; height:85px} #logotipo {width:280px ; float:left }
#publicidad {width:518px ; float:right ; margin-top:25px ; font-size: 16px } #navegacion {background-color: gray ; border: black 1px solid ; height:20px}
#navegacion li {float:left ; list-style:none ; margin: 0px 20px 0px 20px } #navegacion ul { margin-left: 180px } #contenido {background-color: orange ; border-left: black 1px solid ; border-right: black 1px solid } #contenido p {margin: 5px 10px 0px 10px ; text-indent: 15px} #menu {background-color: yellow ; width: 150px ; float:left ; text-align:left ; margin: 3px 10px 3px 3px } #menu li #menu h1 {} #pie { background-color: white ; border-left: black 1px solid ; border-right: black 1px solid; border-top: black 1px solid } #curva-inferior { background-image: url(objetos/curva-inferior.gif) ; background-repeat: no-repeat ; width: 800px ; height:12px ; overflow: hidden } a a:link {color: brown ; text-decoration:none ; display: block } {} {list-style:none ; margin: 4px 0px 4px 6px }
Si te fijas, he puesto casi arriba del todo las lneas que definen p, h1 y h2. Recuerda adems que la lnea del asterisco ha de estar por narices la primera de todas. Por qu? Pues por que si la ponemos en medio o al final, vuelve a poner a cero los margenes y bordes de las capas que estn definidas antes que ella. Es por lo mismo que acabo de explicarte.
Pagina 80 de 129
Parece un poco lio tanto cdigo, verdad? Pero imagino que mirndo lnea por lnea ms o menos sabes de que va todo, no? De hecho lo has ido escribiendo t mismo a lo largo de estas lecciones... Si no te aclaras mucho siempre puedes empezar desde el principio y puedes ir repasando porqu se puso cada cosa. No te vendra mal para ir repasando estilos.. No te asustes, pronto, con un poco de ms prctica estos cdigos no tendrn secretos para t. Te aseguro que muchos de los que se hacen llamar Webmaster no tienen ni idea de estilos ni de capas. Ya eres mejor que la mayoria!!
Volviendo al men
Guardando estilo-general.css y haciendo vista previa a la plantilla.html podemos ver esto:
Bueno, quizs quede mejor sin el subrayado y con una letra ms pequea, verdad? Para eliminarle el subrayado se ponia en la hoja de estilo esto:
text-decoration:none
Para cambiar el tamao del texto se pone esto otro:
font-size:10px
donde 10px es la altura de una letra en pixeles. Hay otras unidades que podemos usar en lugar de pixeles, pero lo veremos ms adelante. El caso es que la lnea de estilo-general.css que define a los ttulos de dentro de la capa menu ha de quedar, por el momento as:
Mucho mejor, no? Ahora cmbiale el tamao por 12px que as quizs sea un poco pequea de ms. A veces parece mentira como cambia una web con solo ir retocando la hoja de estilos, verdad?. Sigamos investigando a ver si logramos colocarle las imgenes, vale?
Nos vamos acercando eh? Vemos dos "fallos". Me encantan los fallos, as aprendemos ms! je je je. El primero es que la imagen se repite por la derecha y el segundo fallo es que se ven las esquinas de color blanco y queda un poco feo.. bueno, bastante feo, si que si.
Pagina 82 de 129
Guarda esos dos archivos (gurdate esas imagenes en objetos), sustityelos por los archivos que tenas en la carpeta objetos y seguimos. Si ahora haces vista previa de nuevo, has de ver esto de la foto de abajo. Si no lo ves as, guarda la plantilla.html, cirrala y vuelve a abrirla con el Html-Kit:
Ahora si! Ahora vamos a por el fondo de la parte inferior. A ver si nos sale tan bien como este!
#menu
{background-color: yellow ; width: 150px ; float:left ; text-align:left ; margin: 3px 10px 3px 3px ; background-image: url(objetos/menu-parte-inferior.gif) }
Haciendo vista previa de la plantilla.html vemos esto (acurdate, antes de hacer vista previa siempre guarda la hoja de estilo):
Pagina 83 de 129
Bueno... ahora se ve el fondo, pero no conseguimos ver bien la parte inferior... por qu puede ser? A ver, a ver... Pues claro! Resulta que si no se indica nada, las imgenes se colocan pegando su parte de arriba a la parte de arriba de la capa y como la capa es ms pequea que la imagen no vemos la parte inferior que es la que nos interesa! Lo que nos interesa realmente es que la parte inferior del fondo se pegue a la parte inferior de la capa y as podremos ver la curva de la imagen que est en su parte ms baja. Cmo lograremos esto? Pues solo hay que decir en la hoja de estilo, que en esa capa, la imagen de fondo ha de alinearse por la parte de abajo. Esto se hace as:
#menu {background-color: yellow ; width: 150px ; float:left ; text-align:left ; margin: 3px 10px 3px 3px ; background-image: url(objetos/menu-parte-inferior.gif); background-position: bottom }
Bottom significa culo o parte de abajo. Haciendo vista previa (como siempre, guarda antes la hoja de estilo) la cosa queda.... genial, sencillamente genial! Mira:
Qu te parece?
ltimos Retoques
Fjate ahora. Abre tu plantilla.html con el Html-Kit si la tienes cerrada y aade un tercer enlace al men. Ya sabes, despus de la lnea del Enlace 3, pones una idntica y le cambias el nmero 3 por el 4, es decir, aades esto:
Pagina 84 de 129
<li><a href="#">Enlace 3</a></li> <li><a href="#">Enlace 4</a></li> </ul> </div>
Si de nuevo haces vista previa vers como no hay que tocar para nada los fondos del men, sino que estos crecen con l. Hay que ahorrar trabajo, no? je je je. Ya para terminar de dejarlo perfecto, aade un padding-top:12px (margen por arriba al ttulo del men) para separarlo un poco de la franja oscura de la imagen y listo, queda perfecto, genial, fenomenal... er.. no tengo palabras, casi lloro de emocin, t no? je je.
Tambin vendra bien dejar un poco de margen por la parte inferior, pues parece que el Enlace 4 est demasiado pegado a la parte baja de la imagen, no? Esto lo podemos arreglar colocando un padding por abajo de unos 5 pixeles a la capa menu, incluyendo en su estilo algo as:
#menu
{background-color: yellow ; width: 150px ; float:left ; text-align:left ; margin: 3px 10px 3px 3px ; background-image: url(objetos/menu-parte-inferior.gif); background-position: bottom ; padding-bottom:5px }
Pensando un poco... ahora que toda la capa del men est cubierta por imagen de fondo, podemos eliminar eso de backgroundcolor: yellow que tenemos al principio del cdigo de arriba, no crees? As ahorramos! je je. Puedes eliminar esa parte. Ms cosas? Venga vale.... a ver... SI! Haz vista previa y pon el ratn sobre cada uno de los enlaces de este men vertical. Como vers, la sombra gris que aparece cuando haces eso tiene un margen por la izquierda, pero en cambio no lo tiene por la derecha y ese efecto es un poquillo feo. Cmo lo arreglamos? El margen que vemos por su izquierda ha de estar definido por nosotros en algn lugar de la hoja de estilos... seguramente en la lnea que define los li del men, es decir, en esta lnea:
#menu li
y ah est la solucin. Vemos que tiene definidos unos margenes de 4 por arriba y por abajo, 6 pixeles por la izquierda y un cero patatero por la derecha. Ponle un 8px por ejemplo en lugar de cero y fjate como ahora se ve mejor, verdad?
Pagina 85 de 129
Por cierto. Quizs no veas bien los acentos en tu web cuando la subas al sevidor. En ese caso no olvides insertar esta lnea de cdigo entre <head> y </head>: <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> Toma nota e insertalo en todas las pginas que hagas, siempre que en ellas se usen acentos, oki?
Pagina 86 de 129
<ul><li><a href="#">Enlace 1</a></li><li><a href="#">Enlace 2</a></li><li> <a href="#">Enlace 3</a></li><li><a href="#">Enlace 4</a></li></ul> </div> <h1>Esta ser la zona principal de la web</h1> <p>Este es mi segundo prrafo. Acabo de poner un punto y en cambio sigue siendo un prrafo pues no le he colocado an la etiqueta de cierre. Voy a ponersela justo aqu.</p> <h2>Y este es el tercer prrafo.</h2> <p>En pocas lecciones aprender a darle margenes para separarlos unos de otros, e incluso hacerles sanguias por la izquierda a la primera lnea, que queda mucho mejor.</p> <p>Anda, fijate! Salen todos centrados, que cosa. Espero que Jorgens nos ensee a ponerlos alineados a la izquierda, o justificados. As esto parece una poesia! je je je.</p> </div> <div id="pie">Este es el pi de pgina</div> <div id="curva-inferior"></div> </div> </body> </html>
#curva-superior { background-image: url(objetos/curva-superior.gif) ; background-repeat: no-repeat ; width: 800px ; height:12px ; overflow: hidden } #cabecera {background-color: white ; border-left: black 1px solid ; border-right: black 1px solid ; height:85px} #logotipo {width:280px ; float:left }
Pagina 87 de 129
#publicidad {width:518px ; float:right ; margin-top:25px ; font-size: 16px } #navegacion {background-color: gray ; border: black 1px solid ; height:20px}
#navegacion li {float:left ; list-style:none ; margin: 0px 20px 0px 20px } #navegacion ul { margin-left: 180px } #contenido {background-color: orange ; border-left: black 1px solid ; border-right: black 1px solid } #contenido p {margin: 5px 10px 0px 10px ; text-indent: 15px} #menu {width: 150px ; float:left ; text-align:left ; margin: 3px 10px 3px 3px ; background-image: url(objetos/menu-parte-inferior.gif); background-position: bottom ; padding-bottom:5px } #menu li {list-style:none ; margin: 4px 8px 4px 6px }
#menu h1 {text-decoration:none ; font-size:12px ; padding-top:12px ; background-image: url(objetos/menu-parte-superior.gif) } #pie { background-color: white ; border-left: black 1px solid ; border-right: black 1px solid; border-top: black 1px solid } #curva-inferior { background-image: url(objetos/curva-inferior.gif) ; background-repeat: no-repeat ; width: 800px ; height:12px ; overflow: hidden } a a:link {color: brown ; text-decoration:none ; display: block } {}
Bien. Y este es el aspecto que ha de tener esa plantilla. Vamos ahora a la siguiente leccin? Venga, vamos! Pero antes os dejo una chorrada, vale? je je je. Esto es para ver la progresin que hemos logrado. Os gusta? je je je, tonterias que se me ocurren! ja ja ja.
Cuarta leccin
El pie de pgina de nuestra web
Pagina 88 de 129
Ves como poco a poco esto va tomando forma? Ha llegado el momento de meterle mano al pie de pgina. Vamos a intentar colocarle un hueco a la izquierda y otro a la derecha donde colocaremos accesos directos (enlaces) a diversas secciones de la web que conviene que el visitante tenga a la vista en todo momento. Me refiero a enlaces al mapa de la web (importante para el posicionamiento de la pgina), a una pgina desde donde puedan contactarnos (muy til para conocer siempre el punto de vista del visitante), otro enlace hacia una pgina de enlaces (que usaremos a la hora de darnos de alta en directorios) y tambin por qu no, unos enlaces al futuro foro, top y directorio de nuestra web (todo eso lo aprenderemos ms adelante). En medio de estos dos espacios dejaremos un hueco con dimensiones idoneas para incorporar en un futuro, o bien otra serie de enlaces amigos, o bien una ventanita donde colocar las ltimas noticias o avisos que queramos dejar o, seguramente, para colocar un poco de publicidad que nos ayude a pagar un buen hosting sin necesidad de poner un centavo de nuestro bolsillo. Los hobbies estn muy bien, pero si nos salen gratis... mejor que mejor, no? Je je je.
<div id="pie"> <div id="pieuno">pie uno</div> <div id="piedos">pie dos</div> <div id="pietres">pie tres</div> </div>
Listo, la vista previa se ve as:
Seguimos?
............
#pie
{border-left:
border-right: black 1px solid ; border-top: #pieuno #piedos black 1px solid ; }
Pagina 89 de 129
...............
Ya se van colocando en su sitio. No te preocupes por los colores, en cuanto tengamos el pie listo le pondremos otros ms decentes.
Ahora les daremos dimensiones de anchura colocndoles un width. Le vamos a dar un valor a #pieuno y #pietres de por ejemplo 150px y a la #piedos el resto, que sern unos... 800px - 2px (del borde izquierdo y derecho) -150px - 150px (de las otras dos capas) = 498pixeles. A ver que sale con esto...:
#pieuno #piedos
{background-color: brown ; float:left ; width:150px } {background-color: green ; float:left ; width:498px } ; float:left ; width:150px }
Que habr pasado con el borde? Pues te lo explico. En teora, como las tres nuevas capas estn dentro de la otra capa llamada #pie, debera aparecer un borde por sus partes izquierda, derecha y arriba, pues as est definido en la hoja de estilos, pero parece que al incluir estas tres capas el borde ha desaparecido tal y como os sealo con crculos rojos en la imagen de arriba. Quizs no me creas, pero los bordes de la capa #pie s que estn dibujados. Lo que ocurre es que cuando una capa no tiene ningn contenido, la altura que toma es cero y por tanto en lugar de ser un rectngulo se queda como una lnea. Pero... la capa #pie si que tiene contenido, ni ms ni menos las otras capas #pieuno, #piedos y #pietres, no? Pues No. Como le he escrito a estas tres capas la propiedad float, las capas estn flotando sobre la capa #pie por lo que es como si #pie no tuviera ningn contenido. Venga vale, pero dnde est entonces la capa #pie y sus bordes? Pues estn justo encima de las tres nuevas capas. Ves esa lnea negra fina que va por la parte de arriba de las tres capas? Pues esa lnea es la capa #pie. Como no tiene ningn contenido dentro, su altura es 1px y por eso tiene forma de lnea. Te sealo la capa #pie en el dibujo para que lo veas ms claro:
Esa lnea negra rodeada de rojo es todo lo que nos queda de la capa #pie. Las otras tres capas se salen de la capa #pie, pues como son flotantes... quedan justo debajo, pero fuera de #pie. Entiendes ahora por qu no vemos los bordes? Pues ya sabes, "Siempre que pongas una capa en tu web has de colocarle algo de contenido, por ejemplo un punto, una letra, una palabra, una imgen o una capa siempre que no tenga un float". Pero si no te interesa colocarle nada que no sea una capa con float an nos queda una opcin y es definirle nosotros la altura. Y eso es lo que vamos a hacer. Ve a la hoja de estilos estilo-general.css y define una altura de, por ejemplo, 65px a la capa #pie. Ms tarde podremos retocar esa cantidad para amoldarla a nuestro gusto. Quedara as la capa #pie (Recuerda que siempre escribo en negrita los cdigos que incluyo o modifico):
border-right: black 1px solid ; border-top: height: 65px ; black 1px solid ;
Pagina 90 de 129
}
Haciendo vista previa vemos que hemos conseguido esto:
Ves? Las tres capas #pieuno, #piedos y #pietres ahora parecen estar dentro, aunque realmente estn "flotando dentro". Siguen sin ser contenido de la capa #pie, pero al darle altura ocupa el espacio que necesitbamos y queda pintado el borde como queramos. Parece un poco complicado, pero en realidad son solo unos pocos trucos los que necesitamos conocer. Y por qu las tres capas de dentro no ocupan esa misma altura? Pues porque si no le indicamos la altura que queremos que tenga, ocuparn solo el espacio necesario para contener lo que tengan dentro, en este caso las palabras "pie uno", "pie dos" y "pie tres". Nosotros no vamos a darle altura a esas tres capas, pues conforme le aadamos el contenido a cada una iran llenando todo ese lugar.
#pieuno
#piedos
Ahora que has visto de nuevo cmo colocar bordes, vamos a quitrselos pues el efecto no queda del todo bien. Como ejercicio de repaso te propongo algo, a ver si lo consigues, oki?
Ejercicio de prctica
Como ejercicio de prcticas, intenta hacer que tanto el fondo de #pieuno como el de #pietres sean blancos, que el fondo de #piedos sea gris claro (silver) y elimina los bordes que dejamos antes. As terminars de familiarizarte con todo esto, oki? Pero intntalo de verdad antes de mirar el cdigo de abajo. 3, 2 1... venga! El cdigo CSS de las 4 capas del pie han de quedar como te indico abajo. Si el ejercicio te sale bien y funciona, enhorabuena! pero pon este otro para que as tanto t como yo tengamos el mismo y as no te pierdas en las lecciones siguientes, oki?
#pie
{border-left:
Pagina 91 de 129
border-top: #pieuno #piedos black 1px solid ; height: 65px } {float:left ; width:150px } {float:left ; width:498px ; background-color: silver}
<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 cdigo:
<div id="pietres"> <ul> <li><a href="#">Directorio</a></li> <li><a href="#">TopSite</a></li> <li><a href="#">Mapa de la Web</a></li> </ul> </div>
Haciendo vista previa, como siempre nos pasa antes de retocar la hoja de estilo... nos encontramos este churro...
Ya puedes imaginarte un poco cmo debemos arreglarlo para reducir un poco el espacio que hay entre ellos, eliminarles el punto negro de la izquierda y reducirles un poco el tamao de la letra, no? Intntalo t, oki? je je je.
Pagina 92 de 129
La segunda opcin es poner ese cdigo dentro de las propiedades de las capas #pieuno li y #pietres li. Lo bueno es que funciona, y lo malo es que tenemos que crear dos lneas ms de codigo css y no tenemos ganas de escribir tanto... je je La tercera opcin es sencilla tambin, y es colocar ese cdigo en una nueva lnea que indique que todas las listas de dentro de la capa #pie han de salir sin esos puntos. Lo bueno es que matamos dos pjaros de un tiro y lo malo... lo malo es que te metan en el ojo un palo, ja ja ja. Esa tercera opcin se consigue con esta nueva lnea, que vamos a colocar por seguir un orden justo despus de la lnea de la capa #pie.
.............
#pie
{border-left: border-top:
black 1px solid ; border-right: black 1px solid ; black 1px solid ; height: 65px }
#pie li #pieuno
.............
Y papeleta solucionada.
#pie li
Si te fijas en la vista previa, vers como todos los textos del pie son ahora menores, menos el texto de la capa #piedos. Esto es lgico, pues el texto "pie dos" no pertenece a un elemento de lista (li) y por tanto el estilo definido no le afecta para nada.
Pagina 93 de 129
Con esto queda por terminado por el momento el pie de pgina. As que quita ya el color gris claro (silver) que habamos puesto a la linea de la capa #piedos (elimnale el ; background-color: silver), guarda la hoja de estilo y haz vista previa para ver cmo ha quedado.
<div id="pieuno">
Pagina 94 de 129
<ul> <li><a class="enlaceuno" href="#">Foro Ejemplo</a></li><li><a class="enlaceuno" href="#">Contactos </a></li><li><a class="enlaceuno" href="#">Nos Enlazan</a></li> </ul> </div>
y lo mismo para los enlaces de la capa #pietres. Ahora que has aprendido a definir una clase de enlace y a aplicarlo, te enseo otro modo ms fcil y rpido.
Aplicando una clase de estilos solo a los enlaces de una determinada capa
Se trata de definir en la hoja de estilos que todos los enlaces que pertenezcan a una capa determinada deban seguir esos estilos. Con esto nos ahorramos escribir nada en el cdigo Html de la plantilla.html, vers. Abre estilo-general.css y aade (sin eliminar el antiguo cdigo de los enlaces) esto, justo al final:
#pie a:visited {} #pie a:hover #pie a:active {color:red ; text-decoration:underline ; background-color: yellow } {color:blue}
Si guardas la hoja de estilo y haces vista previa ahora a la plantilla, vers como todos los enlaces del pi de pgina han tomado las nuevas propiedades sin necesidad de tocar para nada el cdigo Html de la plantilla.html, mgico, verdad? je je Como esas propiedades son realmente horribles, cmbialas por estas otras para que al menos sean... presentables, je je je:
#pie a:visited {} #pie a:hover #pie a:active {color:black ; text-decoration:underline ; background-color: white } {color:black}
{} {}
Ahora se ve el logotipo sin esa sombra gris. Ya sabes algo ms de los enlaces. Eres todo un maestro!
Pagina 95 de 129
Segn en qu servidor alojemos nuestra bonita pgina, veremos o no que las palabras acentuadas aparecen mal escritas. Claro, eso solo va a pasar si has escrito con acentos, que ltimamente te los comes todos!! je je je. Si por el contrario has puesto alguno (tambin estara bien que lo pusieras correctamente....) y en lugar del acento aparece un smbolo raro, podemos arreglarlo rpidamente.
Quinta leccion
Las partes comunes de nuestra pgina web
Como te he dicho antes, existen varios modos de ahorranos tiempo y trabajo cuando se realizan cambios en partes de una web que son idnticas en varias pginas. Pero antes de seguir djame por favor que insista en definir eso de "partes de una web que son idnticas en varias pginas". Cuando me refiero a idnticas quiero decir iguales, condenadamente iguales. Si hay alguna ligera diferencia este truco ya no nos sirve. Para que veas un ejemplo rpido te puedo adelantar que la siguiente parte de cdigo es comn a tooodas las pginas de nuestra web de ejemplo:
Pagina 96 de 129
<head>
Verdad? En estas tres lneas no hay ningn valor o parmetros que tengamos que cambiar de una pgina a otra, por lo que es una parte bien comn. En cambio, esta otra lnea no es comn en todas las pginas de la web:
El cdigo de la cabecera, tal cul est ahora en el ejemplo que llevamos hecho es este:
<!-- INICIO CODIGO DE CABECERA - NO TOCAR --> <div id="curva-superior"></div> <div id="cabecera"> <div id="logotipo"> <a href="index.html"> <img src="objetos/logotipo.gif" width="270" height="80" alt="Haz clic aqu para volver a la pgina de inicio"> </a> </div> <div id="publicidad">Bienvenidos a mi Web</div> </div> <div id="navegacion"> <ul> <li><a href="#">Seccin 1</a></li> <li><a href="#">Seccin 2</a></li> <li><a href="#">Seccin 3</a></li> </ul>
Pagina 97 de 129
</div> <!-- FIN DE CODIGO DE CABECERA -->
Como ves, he aadido dos lneas para encerrar a este cacho de cdigo. Esto es para que si alguna vez le metemos mano a la pgina, recordemos que lo que hay dentro es comn a todas las pginas de la web, y por tanto no debemos tocar nada de su interior a menos que sea siguiendo las instrucciones que os cuento en breve. No te preocupes por esas lneas de comentario, te las explico ahora despus.
Para que te hagas una idea, desde el men de fondo gris accedemos a las secciones de la web y dentro de cada seccin, desde este men accederemos a las subsecciones. Por ejemplo, para una supuesta web dedicada a un grupo de msica, la seccin "Conciertos" podra dividirse en las subsecciones "Conciertos Anteriores" y "Prximos Conciertos", no? Y su cdigo Html es el siguiente. Como ves, le aado una lnea al principio y otra al final para indicar donde empieza y termina, como antes:
<!-- INICIO CODIGO DE MENU LATERAL IZQUIERDO - NO TOCAR --> <div id="menu"> <h1>Ttulo de Seccin 1</h1> <ul><li><a href="#">Enlace 1</a></li><li><a href="#">Enlace 2</a></li><li><a href="#">Enlace 3.... </div> <!-- FIN DE CODIGO DE MENU LATERAL IZQUIERDO -->
Como creo que ya te he comentado y como puedes ver en el cdigo, he colocado todas las lneas <li> seguidas unas de otras, para evitar el fallo aquel que daba el Internet Explorer cuando las colocbamos separadas, una en cada rengln.
El pie de pgina
Lo mismo para el pie de pgina. Es algo comn a todas las pginas de la web y en ocasiones quizs queramos modificarlo para aadir enlaces, publicidad o qu se yo lo que se nos puede ocurrir. Anda, acabo de hacer vista previa de esta pgina que ests leyendo ahora mismo y resulta que la imagen de abajo, la del pie de pgina, se me monta por debajo del men de la izquierda de CCTW... y ahora que hago? Qu mal que queda.... Menos ml que conozco un truco para evitarlo. Te lo cuento? Je je je, es muy fcil. Si escribo un poco ms de texto aqu mismito conseguir llenar este hueco, de la parte derecha del men que tienes a la izquierda, y as la imagen del pie bajar y ya no se montar bajo el men. Si, a veces hay que escrbir algo, aunque sea para llenar y conseguir eso, aunque no tenga mucho sentido, ja ja ja. Anda! pues acabo de llenarlo con esta chorrada que te acabo de contar! Fjate que cosa t! Qu alegria, qu bien. Bueno, seguimos... que ya se ha arreglao... La imagen del pi es esta:
Pagina 98 de 129
<!-- INICIO CODIGO PIE DE PAGINA - NO TOCAR --> <div id="pie"> <div id="pieuno"> <ul><li><a href="#">Foro Ejemploz/a></li><li><a href="#">Contactos</a></li><li><a href="#">Nos.. </div> <div id="piedos">pie dos</div> <div id="pietres"> <ul><li><a href="#">Directorio</a></li><li><a href="#">TopSite</a></li><li><a href="#">Mapa de.. </div> </div> <!-- FIN CODIGO PIE DE PAGINA -->
Bien, imagino que a la vez que yo, has colocado esas lneas de comentario en la plantilla, no? (an ests a tiempo para no perderte luego!!). Pues seguimos con esto, pero antes voy a explicaros mejor qu es eso de los comentarios dentro del cdigo HTML y cmo se aaden, vale? No te quejars, vas a aprender hasta el ltimo detalle! je je.
<!--
-->
De modo que si queremos poner una tonteria dentro de nuestro cdigo Html bastara con poner esta lnea:
Pagina 99 de 129
Si la tonteria que queremos poner es muy larga y ocupa varias lneas (estoy seguro que tratndose de tonterias podras llenar pginas y pginas... je je je je) bastara con poner el signo al principio de la primera lnea y el de cierre al final de la ltima lnea. Vamos, que no es necesario abrir y cerrar cada una de ellas. Algo as sera:
<!-- Esto es una tonteria de varias lineas, pero no tengo ganas de poner signos de apertura y cierre de comentarios en cada una de ellas, qu pasa... -->
Adems de servirte para poner chorradas en el Html, tambin sirve para anular temporalmente alguna lnea de cdigo. Por ejemplo, imagina que tienes un enlace en tu men lateral de la izquierda que vas a dejar fuera de uso, que no quieres que aparezca en el men por que andas retocandolo. Bastara con encerrarlo entre los signos de inicio y fin de comentario y el navegador no lo leera. Ms tarde, basta eliminar esos signos para que vuelva a aparecerle a los visitantes. A veces es mejor que eliminar la lnea, pues quizs al da siguiente no recuerdas bien lo que tenas puesto. Por ltimo decirte que tampoco conviene abusar de los comentarios, pues al fin y al cabo ocupan algo de memoria y el archivo de la web tardara un peln ms en cargarse si hubieran muchos o fueran muy largos. Casi no se nota, pero si tardara un poquillo ms. As que, los justos, oki? La plantilla por tanto queda as. Sin cambios aparentes pues lo que hemos puesto son comentarios, pero puedes ver las nuevas lneas de comentario mirando su cdigo Html.
Pgina de presentacin o portada. En esta explicamos el estilo de msica del grupo, y comentamos las partes ms
importantes de la web. Debera ser breve para que el visitante sepa de un solo vistazo qu puede encontrar en la web. Esta seccin es breve y rpida as que no la dividimos en subsecciones. Recuerda, es la primera pgina que ve el visitante cuando acceder a la web, por tanto corresponde con la index.html Historia del grupo. Aqu se puede comentar cmo, dnde y cundo surgi la idea de la formacin del grupo, qu msicos han formado parte de la banda a lo largo de los aos, cul es la formacin actual, y cosas as. Esta seccin se podra dividir en algunas subsecciones, por ejemplo, Cmo surge la banda, Miembros que han pasado por ella, Formacin actual e incluso un Album de fotos! Discografa. Lo tpico, una seccin en la que se muestra cada album o CD publicado. Esta seccin se puede dividir por CDs publicados, por ejemplo en las subsecciones Maquetas, CD1, CD2, CD3. Conciertos. Aqu se informa al visitante de cules son los prximos conciertos de la banda y se muestran tambin los conciertos celebrados hasta el momento. Se puede dividir por ejemplo en las subsecciones Conciertos Anteriores y Prximos Conciertos. Foro. Siempre es buena idea saber la opinin de los visitantes, tanto para mejorar la propia web como para saber qu piensan del grupo de msica. Nos reservamos una seccin para en el futuro incorporar un foro a la web, si puede ser, integrado en la misma estructura de la pgina. Esta seccin en principio no tendra subsecciones. Descargas. En este otro apartado se pueden colocar cosas que los fans se pueden bajar como curiosidad. Por ejemplo, posters del grupo, imgenes, las mismas canciones, letras, videos, etc, etc. Esta seccin se puede dividir en las subsecciones, Canciones MP3, Letras, Posters, Imgenes y Videos. Souvenirs. Quizs se piense en vender camisetas, gorras o CDs del grupo. Esta puede ser otra seccin que se puede dividir por ejemplo en Cmo Comprar, Camisetas y CDs.
Como imagino que adivinas, los ttulos de las secciones (Portada, Historia, Discografa, etc) los colocaremos en el men horizontal que hay bajo la cabecera de las pginas (el que ahora tiene fondo gris) y las subsecciones las colocaremos en el men lateral izquierdo. As ser muy fcil para el visitante ir directamente a donde desea llegar. Te dejo finalmente el esquema de secciones y subsecciones que vamos a usar en la web de ejemplo para que lo veas ms claro. Este debera ser el resultado al que deberas llegar tras tomar papel y lapiz y pensar en los apartados de la web en la que ests trabajando. Es el esquema de la derecha. Cuando hagas tu propia web, recuerda hacerte un esquema parecido y gurdalo como si fuera un mapa de tu web (vale escrito a mano con papel y lapiz en un papel) para tener una vista rpida de dnde est cada parte. Te ser muy util a la hora de escribir rutas, ver dnde encajar un apartado nuevo que quieres aadir, etc, etc. Bien, ahora que tenemos clara la estructura inicial de la web, vamos a rellenar en la plantilla.html todas estas secciones y comenzamos a crear las dems pginas y a enlazarlas entre s, oki? Venga, nimo!
<div id="navegacion"> <ul> <li><a href="#">Seccin 1</a></li> <li><a href="#">Seccin 2</a></li> <li><a href="#">Seccin 3</a></li> </ul> </div>
Como adivinars, tenemos que aadir algunas lneas <li> ms (antes solo tenamos tres enlaces en la plantilla y ahora son siete los enlaces que queremos), y tenemos que aadir la ruta de cada una de ellas. Recuerda que la ruta hay que ponerla en lugar de la almohadilla (#). Por ahora las pginas de las secciones que queremos poner no existen, pero podemos decidir ya cmo se va a llamar cada archivo de cada una de estas pginas y as podemos escribir la ruta ya en esos enlaces. Lo mejor a la hora de decidir el nombre para un archivo Html es nombrarlo con el nombre de la seccin o subseccin y as ser muy fcil saber qu contiene. Recuerda estas normas bsicas e importantsimas a la hora de nombrar archivos tanto html como de imgenes, carpetas, archivos de msica o cualquier otra cosa:
Usar solo minsculas. Solo usar letras y nmeros, nunca smbolos raros. Nunca empezar el nombre de un archivo con un nmero (1nombre.html). No dejar espacios en blanco, como mucho guiones medios "-" (no bajos "_"). Nunca poner acentos en los nombres de los archivos. Ponerle un nombre que refleje el contenido, seccin o subseccin de la web. Nunca cosas como pagina1.html sino nombres que tengan sentido.
Teniendo todo esto en cuenta, el nombre de los archivos de las pginas de estas secciones deberan ser estos:
portada.html (pero como corresponde a la pgina principal, sera en realidad index.html) historia.html discografia.html conciertos.html
Repite la misma operacin con el resto de carpetas, discografia, conciertos, descargas, foro y souvenirs.
La nica seccin que no va a estar dentro de ninguna carpeta ser la portada, pues como va a ser la misma pgina principal (index.html) no podemos colocarla dentro de ninguna carpeta, debe ir directamente en la raiz del servidor y adems se debe llamar index.html, es decir, el archivo de la portada no se llamar portada.html sino index.html y no estar dentro de ninguna carpeta. [Ms informacin sobre qu es la raiz del servidor aqu]
Por otro lado, si miras ms abajo en ese mismo cdigo Html de la plantilla, ms o menos en las lneas 31, 32, 33 y 34 (estos nmeros se ven en la parte izquierda de cada lnea, lo ves en la imagen de aqu arriba?) tenemos los comentarios o textos que aparecen en la plantilla de ejemplo. Como esos textos no deben aparecer en las pginas de las secciones (que ya tendrn sus propios textos) vamos a borrarlos y poner de nuevo unas equis en su lugar para acordarnos que es ah donde podemos escribir lo que queremos que salga en las nuevas pginas. Hasta hace un minuto esa parte de cdigo Html era as:
Ahora ya sabes que cuando copiemos la plantilla en cada una de las carpetas de las secciones, solo tenemos que rellenar las partes con XXXXX para personalizar cada pgina, lo veremos ms adelante. El resto de la plantilla nos vale tal y como est, por ahora. Guarda la plantilla y seguimos. Una observacin. Si haces vista previa a la plantilla ahora, vers que sale algo (bastante) deformada. Algo as:
No te preocupes en absoluto. Eso se debe a que hemos eliminado gran parte del contenido, de los textos de la parte central. Como apenas tenemos dos frases (las de las equis) la pgina se queda tan cortita que se desmorona un poco, pero en cuanto le aadamos algo de contenido todo se arregla solo, la pgina vuelve a recuperar su forma. Si lo prefieres, escribe muchas ms equis dejando algunos espacios entre ellas, hasta tener las suficientes como para llenar un espacio considerable de la web. De ese modo no sale esa deformacin.
Se abre entonces una ventana desde la que tienes que elegir la carpeta en la quieres guardar la copia. En este caso ser la carpeta historia. Adems, antes de guardar o salvar (es lo mismo) tienes que ponerle un nombre al archivo, pues ya no se va a llamar plantilla sino historia.html
Ves?
En este caso, al tratarse de una pgina web lo que guardamos, no olvides ponerle la extensin correspondiente, es decir, el nombre ms un punto y las letras html (en minscula todo!!) Pues ya tenemos lista la pgina historia. La pgina que se te queda abierta ahora en el Html Kit ya no es plantilla.html sino historia.html pero como ambas son idnticas, podemos usar historia.html que ya est abierta para hacer lo mismo con el resto de pginas de las dems secciones. De modo que, de nuevo, pulsa sobre Archivo + Salvar Como, y ahora dentro de la carpeta discografia guarda una copia llamada discografia.html Cuando hagas eso, repites creando otra llamada conciertos.html dentro de la carpeta conciertos, despus dentro de la carpeta descargas otra pgina llamada descargas.html y lo mismo para foro y souvenirs. Quizs te parezca un poco pesado, pero imagina si tuvieras que hacerlas desde cero.... vaya tela, no?
En realidad lo que ocurre es que las pginas no encuentran la hoja de estilos. Vamos a ver cul es la ruta que tienen en el enlace de la cabecera para descubrir qu es lo que est mal, vale? [Ms informacin sobre qu son las rutas aqu] Si miramos el cdigo de, por ejemplo, la pgina historia.html vemos que dentro de la cabecera (head) el enlace a la hoja de estilos es este:
Bien, vemos que la ruta (relativa) de la hoja de estilos es "estilo-general.css". Esto significa que el navegador cuando visita la pgina historia.html debe buscar la hoja de estilos en la misma carpeta en la que est historia.html y ese no es el caso. Para arreglarlo tenemos dos opciones. La primera de ellas es colocar una copia de estilo-general.css en cada una de las carpetas de seccin que tenemos. Esto tiene varios inconvenientes. Tendramos unos cuantos archivos repetidos. Si un dia decidimos hacer un cambio en la hoja de estilos tendramos que hacer lo mismo en la el resto de carpetas y eso es un rollo. La segunda opcin es retocar la ruta para que busque la hoja de estilos donde est ahora, es decir, fuera de la carpeta historia, en la raiz del servidor. As tendramos una sola hoja de estilos para todas las pginas de todas las secciones. Esta opcin parece
Sexta leccion
Buscar y Reemplazar
Para arreglar las rutas que vimos antes de un solo plumazo podemos recurrir a un software (programa, recuerda, je je) que trabaje por nosotros. No existen muchos programas que hagan lo que necesitamos, yo solo conozco un par de ellos. El primero es el Dreamweaver pero es de pago y cuesta una pasta y el segundo gracias a Dios es gratuito y se llama EditPad Lite. Este es el que vamos a utilizar, no solo para retocar esta ruta que tenemos mal, sino para miles de cosas ms adelante. Por el momento vamos a descargarlo a nuestro ordenador, lo instalamos y aprovechamos el problemilla de las rutas para aprender a usarlo, oki? Ser tu mejor aliado y un genial complemento para el Html Kit, vers. El EditPadLite se puede descargar desde este enlace que nos lleva a la web oficial: Descargar EditPadLite Al hacer clic se abrir la web oficial del programa en una nueva ventana, para que puedas ir leyendo estas instrucciones a la vez que lo descargas. El primer paso es hacer clic en la parte de abajo del todo de esa web, donde pone Download EditPad Lite:
Como ves est en ingls, pero no te preocupes que no nos hace falta entender demasiado. Adems quizs encuentre algn modo de traducirlo al espaol, pero vamos, que no va a ser ningn problema, vers que no.
Creo que una vez te coment que podas tener una carpeta en la que ir guardando todo el software que vayamos usando, por si algn da te hace falta. Si lo hiciste puedes guardar este programa tambin all. Una vez que tengas el archivo de instalacin en tu PC, haz doble clic sobre l para instalarlo. La instalacin es bien sencilla, le dices a todo que si y listo. Si tienes algn problema me lo comentas en el foro y lo explico ms detalladamente, pero imagino que no es necesario. Una vez instalado el programa puedes ya abrirlo para aprender a manejarlo. Lo vemos a continuacin.
Ahora s que vemos la ventana del EditPad Lite. Busca en el men de arriba de ese programa la opcin Search (que significa Buscar) y dentro del desplegable escoge la opcin "Show Search Panel" que significa mostrar el panel de bsqueda. Tambin se puede abrir pulsando a la vez las teclas de tu teclado Ctrl + F:
Se abre entonces una ventana como esta, desde la que debes indicar qu archivos quieres abrir. Ve buscando una por una todas las pginas en las que queremos arreglar las rutas y las vas abriendo, una por una. As por ejemplo se abre la pgina historia.html:
Ya has abierto todas? Recuerda, son todas estas, historia.html, discografia.html, conciertos.html, descargas.html, foro.html y souvenirs.html. Bien, pues seguimos en la pgina siguiente.
En esa imagen tambin puedes ver las lengetas de las pginas abiertas. Las he sealado con un borde rojo, las ves en la parte de arriba? Solo por curiosidad. Pues ahora que tenemos el cdigo que queremos cambiar copiado, ve a la ventana de Search y pegas lo que acabas de copiar. Para pegar, pon el cursor del ratn sobre esa ventana (de las dos de abajo es la de arriba) y hacindo clic con el botn derecho del ratn sobre ella escoge Paste (que significa pegar). Queda entonces as:
Como ves, la nica diferencia entre las lneas que hemos pegado es la ruta, que abajo le hemos aadido ../ para que salga de la carpeta. Ya estamos listos para que el EditPad Lite haga su trabajo, pero antes hay que marcar la casilla que te he sealado con un circulo rojo, la de la derecha. Pone "All Files" que significa que ha de buscar y reemplazar esas lneas en todos los archivos que tiene abierto el programa. Si no se marca, solo har el trabajo en la pgina que est activa. Vamos a la pgina siguiente y empezamos a reemplazar. Ser pan comido!
Tres dos uno.... haz clic!!! .... em... pues con tanto rollo seguro que esperabas un redoble de tambores, o fuegos artificiales o qu se yo, pero... la verdad es que al apretar el botn ese no he sentido nada por el cuerpo... Abr funcionado? Pues s! Si te fijas pulsando en las distintas lengetas de las pginas abiertas en el EditPad Lite podrs ver como esa lnea ha sido reemplazada y que ahora todos esos archivos tienen la ruta correcta! Si que ha sido rpido verdad? Ahora solo hace falta cerrar el EdipPad Lite pulsando sobre la X que hay en la esquina superior derecha. Cuando pulses sobre esa X para cerrarlo, cmo es lgico, el programa te pregunta si quieres guardar los cambios. Te pregunta por estas cuatro opciones:
"Save This File": Esto es si quieres guardar la pgina que est activa, no las otras. "Dont Save This File": Significa que la que est activa no quieres guardarla. "Save All Files": Escoge esta opcin cuando quieras guardarlas todas. Esta es la opcin que necesitamos ahora nosotros. Haz clc en ella. "Dont Save Any": Significa que no quieres guardar ningn cambio. "Cancel Close": Es para cancelar el cerrar el programa. Oki? As que elige "Save All Files" y ya te funcionarn los estilos en todas esas pginas. Grandioso, no?
Reparando el logotipo
Bueno, a veces todo arreglo tiene sus daos colaterales, je je je, pero no pasa nada. Estas cosillas nos sirven muy bien para seguir aprendiendo y practicar con todo lo que voy enseando as que, sigamos. Resulta que si ahora haces vista previa sobre cualquiera de las nuevas pginas creadas, como por ejemplo sobre historia.html te dars cuenta de que ahora no se ve el logotipo que tenamos, el de comocreartuweb de la parte superior. Adems, ya no funciona su enlace y en lugar de llevarnos a index.html nos da un error. No es dificil adivinar porqu, pero te lo digo yo que soy ms rpido, je je.
<div id="cabecera"> <div id="logotipo"><a href="index.html"><img src="objetos/logotipo.gif" width="270" height="80" alt="Haz clic aqu para volver a la pgina de inicio"></a></div> <div id="publicidad">Bienvenidos a mi Web</div> </div>
Como ves, el navegador cuando visite esa pgina intentar buscar un archivo llamado logotipo.gif dentro de la carpeta objetos que hay dentro de la carpeta historia (pues es en esta carpeta donde est la pgina que est visitando, historia.html). Pero en realidad el logotipo.gif se encuentra en la carpeta objetos de la raiz de la web, fuera de la carpeta historia. As que, la ruta correcta sera otra. Para llegar desde historia.html hasta el logotipo.gif es necesario, primero salir de la carpeta historia (eso se haca con ../ ), luego entrar en la carpeta objetos (la antigua, en la que guardamos al principio los archivos del logotipo, etc), y finalmente abrir el logotipo.gif Por otro lado, para llegar desde cualquier pgina que haya dentro de una de las carpetas de la web de ejemplo al index.html, es necesario salir de la carpeta. As que la ruta correcta del enlace ser "../index.html" y no "index.html" Por tanto las rutas correctas sern:
<div id="cabecera"> <div id="logotipo"><a href="../index.html"><img src="../objetos/logotipo.gif" width="270" height="80" alt="Haz clic aqu para volver a la pgina de inicio"></a></div> <div id="publicidad">Bienvenidos a mi web</div> </div>
Muy parecidas, solo cambia el aadirle los puntos y la contabarra. Pero esto hay que cambiarlo en tooodas las pginas web que tenemos dentro de las carpetas de seccin! Vaya tela, no? Menos mal que ahora sabemos manejar perfectamente el EditPad Lite y ser coser y cantar! Vamos all y lo recordamos? Esta vez te lo explico de un modo ms rpido, no creo que necesites mucha ayuda otra vez, no? Abrimos el EditPad Lite, abrimos desde l todas las pginas que tenemos dentro de carpetas (las mismas que la vez anterior). Escribimos en la ventana de arriba (la de Search) esto:
<div id="cabecera"> <div id="logotipo"><a href="index.html"><img src="objetos/logotipo.gif" width="270" height="80" alt="Haz clic aqu para volver a la pgina de inicio"></a></div> <div id="publicidad">Bienvenidos a mi web</div> </div>
Y en la ventana de abajo esto otro:
<div id="cabecera"> <div id="logotipo"><a href="../index.html"><img src="../objetos/logotipo.gif" width="270" height="80" alt="Haz clic aqu para volver a la pgina de inicio"></a></div> <div id="publicidad">Bienvenidos a mi web</div> </div>
Le damos al botn "Replace All", cerramos el EditPad Lite, le indicamos que guarde todos los archivos y... ya est. Todo reparado. Que gusto verdad? Je je je.
<div id="navegacion"> <ul> <li><a href="#">Seccin 1</a></li> <li><a href="#">Seccin 2</a></li> <li><a href="#">Seccin 3</a></li> </ul> </div>
Ese cdigo tenemos que transformarlo para que aparezcan enlaces a todas las secciones, incluida la portada. Para ello basta con aadir 4 lneas ms como las que ya hay, quedando una para cada uno de los enlaces que necesitamos. Y ya que estamos, en lugar de Seccin 1, Seccin 2, etc, escribiremos el texto que queremos que aparezca en el men, es decir, Portada, Historia, Discografa, Conciertos, Descargas, Foro y Souvenirs:
<div id="navegacion"> <ul> <li><a href="#">Portada</a></li> <li><a href="#">Historia</a></li> <li><a href="#">Discografa</a></li> <li><a href="#">Conciertos</a></li> <li><a href="#">Descargas</a></li> <li><a href="#">Foro</a></li> <li><a href="#">Souvenirs</a></li> </ul> </div>
Va tomando forma, bien bien. Ahora solo falta colocarle la ruta en lugar de la almohadilla (#). Cul crees que ser la ruta de estos archivos? Pues, est el navegador en la pgina que sea, siempre tendr que, primero salir de esa carpeta ( ../ ), despus entrar en la carpeta de la seccin correspondiente ( nombre de la carpeta) y finalmente abrir el archivo de la pgina (nombredelapagina.html). Es decir, as:
<div id="navegacion"> <ul> <li><a href="#">Portada</a></li> <li><a href="../historia/historia.html">Historia</a></li> <li><a href="../discografia/discografia.html">Discografa</a></li> <li><a href="../conciertos/conciertos.html">Conciertos</a></li>
<div id="navegacion"> <ul> <li><a href="../index.html">Portada</a></li> <li><a href="../historia/historia.html">Historia</a></li> <li><a href="../discografia/discografia.html">Discografa</a></li> <li><a href="../conciertos/conciertos.html">Conciertos</a></li> <li><a href="../descargas/descargas.html">Descargas</a></li> <li><a href="../foro/foro.html">Foro</a></li> <li><a href="../souvenirs/souvenirs.html">Souvenirs</a></li> </ul> </div>
Ests de acuerdo conmigo en estos cdigos? Si, verdad? Je je je je, ves? Ya hablamos de cdigos Html de t a t! Ests hecho todo un Webmaster!!! Bueno, para ser correctos del todo, deberas recordar aqul error que comentamos una vez que surge en el Internet Explorer si ponemos las lneas de cdigo Html de ese modo. La norma era que todo el cdigo Html de una lista ha de estar todo seguido, por tanto antes de reemplazar ese cdigo vamos a ponerlo en una sola lnea. Para ello, pones el cursor al final de cada lnea y das a la tecla "Supr" hasta que la siguiente quede pegada a la anterior. Y as con todas. Debe quedar ms o menos as:
<div id="navegacion"> <ul><li><a href="../index.html">Portada</a></li><li><a href="../historia/historia.html">Historia</a> </li><li><a href="../discografia/discografia.html">Discografa</a></li><li><a href="../conciertos/ conciertos.html">Conciertos</a></li><li><a href="../descargas/descargas.html">Descargas</a></li><li> <a href="../foro/foro.html">Foro</a></li><li><a href="../souvenirs/souvenirs.html">Souvenirs</a></li> </ul> </div>
Ahora solo nos queda usar el buscar y reemplazar del EditPad Lite para de un plumazo actualizar los cdigos de los mens horizontales de tooodas las pginas de las secciones. Te atreves a hacerlo sin ayuda? Abre el EditPad Lite, abre todas las pginas de las secciones, (Portada, Historia, Discografa, Conciertos, Descargas, Foro y Souvenirs), y desde una de ellas, escribes el cdigo a buscar en la parte de arriba y el nuevo cdigo que queremos en la parte de abajo. Te recuerdo que el cdigo a buscar era este:
Hay un hueco demasiado grande a la izquierda de los enlaces del men horizontal y adems se nos baja el enlace Souvenirs a una segunda lnea que no queremos. Adems puedes ver como los usuarios de Firefox van a ver la web deformada por ese mismo motivo, al desplazarse el enlace Souvenirs a una segunda lnea, desplaza tambin el men lateral. No te preocupes, lo arreglamos enseguida. Abre la hoja de estilos, estilo-general.css y echa un vistazo a las lneas donde hemos definido estilos a la capa navegacin, son estas tres principalmente:
; height:20px}
#navegacion li {float:left ; list-style:none ; margin: 0px 20px 0px 20px } #navegacion ul { margin-left: 180px }
El problema lo tenemos en la tercera de esas lneas. Al principio le pusimos un margen por la izquierda de 180 pixeles. Lo hicimos para centrar los tres enlaces que tenamos al comienzo de la leccin, pero como ahora tenemos unos siete, es necesario hacerlo ms pequeo. As que en lugar de 180px vamos a ver qu tal se ve con solo 60px, es decir, modificndo esa lnea para dejarla as:
Personalizando el index.html
Aunque parezca un poco pesado, realmente esto nos sirve para seguir practicando de modo que no te quejes demasiado, je je je. Para m sera ms fcil drtelo todo ya terminado, pero entonces no tendra sentido esto de las lecciones. El caso es que ahora que tenemos el index copiado de la plantilla, tenemos que hacer funcionar el men horizontal de arriba igual que hicimos con las pginas de las secciones. En este caso no nos vale el mismo cdigo que en aquellas pginas, pues esas estaban dentro de una carpeta mientras que index.html est fuera. Por eso, las rutas no son exctamente las mismas y tenemos que ponrselas correctamente. Es fcil, ya veras. Una vez tengas abierta la pgina index.html con el Html Kit, ve a ver su cdigo, concretamente la parte del men superior horizontal. Ahora mismo es como este:
<div id="navegacion"> <ul> <li><a href="#">Seccin 1</a></li> <li><a href="#">Seccin 2</a></li> <li><a href="#">Seccin 3</a></li> </ul> </div>
Hay que aadir los enlaces para el resto de secciones, como hicimos antes. Quedara as:
<div id="navegacion"> <ul> <li><a href="#">Portada</a></li> <li><a href="#">Historia</a></li> <li><a href="#">Discografa</a></li> <li><a href="#">Conciertos</a></li> <li><a href="#">Descargas</a></li> <li><a href="#">Foro</a></li> <li><a href="#">Souvenirs</a></li> </ul> </div>
<div id="navegacion"> <ul> <li><a href="index.html">Portada</a></li> <li><a href="historia/historia.html">Historia</a></li> <li><a href="discografia/discografia.html">Discografa</a></li> <li><a href="conciertos/conciertos.html">Conciertos</a></li> <li><a href="descargas/descargas.html">Descargas</a></li> <li><a href="foro/foro.html">Foro</a></li> <li><a href="souvenirs/souvenirs.html">Souvenirs</a></li> </ul> </div>
Ests de acuerdo con esto? Pero recuerda, el cdigo de las listas deben tener todas las lneas seguidas, de modo que lo pondramos de este modo (eliminando espacios y saltos de lneas):
<div id="navegacion"> <ul><li><a href="index.html">Portada</a></li><li><a href="historia/historia.html">Historia</a></li> <li><a href="discografia/discografia.html">Discografa</a></li><li><a href="conciertos/conciertos.h tml">Conciertos</a></li><li><a href="descargas/descargas.html">Descargas</a></li><li><a href="foro/ foro.html">Foro</a></li><li><a href="souvenirs/souvenirs.html">Souvenirs</a></li></ul> </div>
Bien. Pues pon en la index.html ese cdigo y ya lo puedes guardar. Si le haces vista previa ahora al index.html vers como aparece algo descuadrado. Ya sabes que s por no tener a penas contenido, de modo que aprovechando que estamos liados con ese archivo, escrbele un par de prrafos ms o menos largos, ponle un <title> decente, como por ejemplo:
Si an mantenemos esa estructura, vemos que desde el men horizontal se puede acceder a la portada y a las pginas principales de cada seccin. Una vez en ellas, haremos que desde el men lateral izquierdo se pueda acceder a las subsecciones. La portada no va a tener subsecciones y por tanto no tiene sentido mantener en ella ese men lateral. Lo mismo ocurre con la seccin Foro, no va a tener subsecciones, de modo que eliminaremos ese men lateral de ambas, tanto de la portada (index.html) como del foro (foro.html). Para eliminar el men, basta con borrar las lneas de cdigo que lo definen en los archivos index.html y foro.html. Recuerda que el cdigo a eliminar es este:
<div id="menu"> <h1>Ttulo de Seccin 1</h1> <ul><li><a href="#">Enlace 1</a></li><li><a href="#">Enlace 2</a></li><li><a href="#">Enlace 3</a> </li><li><a href="#">Enlace 4</a></li></ul> </div>
Las pginas portada y foro no se van a deformar por eliminar esa parte de cdigo. Tan solo no se ver el men y el espacio que ocupaba pasa a formar parte del contenido central. En el futuro, si cambiamos de idea y queremos colocar de nuevo el men, bastar con colocar de nuevo esas lneas de cdigo, de modo que ya lo puedes eliminar sin miedo de ambas pginas, oki? Si lo deseas, elimina solo el cdigo que te acabo de decir arriba, pero deja las dos lneas de comentarios que habamos puesto hace unas pginas. Me refiero a estas dos:
<!-- INICIO DE CODIGO DE MENU LATERAL IZQUIERDO - NO TOCAR --> <!-- FIN DE CODIGO DE MENU LATERAL IZQUIERDO -->
De ese modo, si un da quieres volver a poner el men sabrs dnde iba, vale? Adelante! Elimina esos cdigos y seguimos pa lante!
<div id="menu"> <h1>Ttulo de Seccin 1</h1> <ul><li><a href="#">Enlace 1</a></li><li><a href="#">Enlace 2</a></li><li> <a href="#">Enlace 3</a></li><li><a href="#">Enlace 4</a></li></ul> </div>
Bien, qu cosas hay que cambiar aqu? Para empezar le vamos a poner el ttulo de la seccin entre <h1> y </h1>. Lo que escribamos ah aparecer en la parte alta del men lateral. Pondremos entonces "Historia" y quedara as esa lnea:
<h1>Historia</h1>
A continuacin escribimos los anchor text de cada enlace. Aunque ya lo he dicho, quizs se te haya olvidado. El anchor text es el texto que aparece visible en el enlace, es decir, las palabras sobre las que hay que pulsar para ir a la pgina enlazada. Como las subsecciones de la seccin historia son Origen, Miembros, Formacin Actual y Album de Fotos, pondremos esos textos como Anchor Text. Quedara as por ahora el cdigo del men:
<div id="menu"> <h1>Historia</h1> <ul><li><a href="#">Origen</a></li><li><a href="#">Miembros</a></li><li><a href="#"> Formacin Actual</a></li><li><a href="#">Album de Fotos</a></li></ul> </div>
Ahora solo queda colocar bien las rutas. Pero claro, an no existen los archivos de las subsecciones, verdad? As que no sabemos qu poner en la ruta de cada uno... No pasa nada. Decidimos y cmo se van a llamar esos archivos y como sabemos que los vamos a guardar en la carpeta historia, tenemos todos los datos que nos hacen falta para escribir las rutas correctamente. Veamos. Si el archivo de la subseccin Origen lo vamos a llamar origen.html, y sabemos que lo vamos a guardar (cuando lo generemos) dentro de la carpeta historia, sabremos que para ir desde cualquier pgina de la seccin historia a la pgina origen.html solo es necesario abrir dicho archivo. No es necesario salir ni entrar en ninguna carpeta, por lo que la ruta ser simplemente el nombre del archivo, es decir, "origen.html".
Lo mismo va a ocurrir con el resto de enlaces de las dems subsecciones, no es as? Entonces es fcil adivinar que el cdigo completo quedara de este modo: