• Categories
• Hojas de estilo en cascada
• HTML
• Página web
• Red mundial
• Tecnología

Citation preview

---

Crear una Página Web Paso por Paso En estas páginas vas a aprender a crear una página web, a escoger un servidor de pago o gratuito, a subirla a internet, a mejorarla y actualizarla a tu gusto e incluso a sacarle un buen provecho económico si lo deseas. No hace falta que tengas conocimientos de nada, simplemente con leer estos pasos lo vas a lograr. El resultado final será una web parecida a esta, con su foro, un top, un directorio de enlaces, optimizada para aparecer en buenas posiciones en los buscadores.

Herramientas necesarias En principio solo conexión a internet y seguir estas instrucciones. El resto de recursos necesarios los conseguiremos de la red, como por ejemplo el software (gratuito) que vamos a seguir para las lecciones, el espacio web (gratuito también) para alojar tu proyecto, el software para el foro, para el directorio y para el topsites (gratuito también). Si tienes acceso a internet tendrás todo lo necesario.

Cómo seguimos los pasos del curso? Arriba a la izquierda verás un menú vertical. Desde allí puedes acceder a los distintos pasos de este curso. Lee con atención los pasos, sigue al pie de la letra cada uno y consultanos todas tus dudas.

Software Necesario Un software es un programa informático. Para crear nuestra página web necesitamos un programa. Nosotros usaremos uno gratuito, que se llama Html-Kit.

De dónde descargar Html-Kit El Html-Kit es un editor de html y css (entre otros) gratuito. Editor significa que podemos escribir con él y Html y Css son los lenguajes que se usan para hacer páginas web. Para conseguirlo, qué mejor que descargarlo desde la página oficial. La página es www.htmlkit.com. Al acceder a la web de Html-Kit podrás ver en la parte alta un cartelito similar a este:

En el hueco de arriba te preguntan donde oiste hablar de Html-Kit. Puedes poner lo que quieras, la dirección de esta web, un buscador, etc, etc. En el hueco de abajo puedes escribir tu email si deseas recibir información de actualizaciones de este software . A continuación, 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 rápido. Al hacer clic se abre una ventana preguntado si lo deseas guardar o ejecutar directamente. Escoge Guardar y así lo tendrás a mano en caso de que te haga falta:

Tras terminar de bajarlo aparece otra ventana. Escoge Ejecutar para empezar su instalación:Puedes aceptar y Ejecutar sin problemas. Este programa es seguro. En seguida, el programa empieza a instalarse en tu PC.

Primer contacto con el código HTML Una página web no es más que un puñado de letras y números que son interpretados por los navegadores mostrando lo que ves por internet. Tan solo hay que saber qué letras y números escribir y luego guardar el archivo, con extensión .html o .htm (son iguales). Nosotros vamos a usar en estos pasos el programa Html-Kit.

El código html de una página web Todas las páginas web empiezan y terminan con el mismo código y es el siguiente: (todas empiezan con esto) (todas terminan con esto otro)

En adelante, siempre que escriba código HTML lo haré de este modo, de color azul. La primera palabra indica que ahí empieza el código de la web. La segunda indica que el código de la página web a terminado. Se distinguen por la contrabarra / que siempre indica que algo ha terminado.

La estructura de una página web en HTML Dentro de cualquier página web hay cosas que se ven (o que se escuchan) y cosas que no. Las cosas que se ven son los textos, las imágenes, sonidos, etc. Por otro lado lo que no se ve son sus características, como el título, su descripción, y otra serie de cosas que veremos más adelante. Las cosas que no se ven se colocan dentro del código HTML en una zona llamada cabecera (Head en inglés) y lo que se muestra se pone en lo que se llama cuerpo (o Body en inglés). Pues igual que antes hemos escrito en código dónde empieza la página y dónde termina, la cabecera llamada HEAD y el cuerpo llamado BODY se colocan y escriben así en Html:





En Html, se indica que va a empezar la cabecera con la palabra y termina con la misma palabra pero colocandole la contrabarra, tal y como hemos visto que pasaba para cerrar . Lo mismo podemos decir del cuerpo, que comienza con y termina con . Como puedes ver, tanto la cabecera como el cuerpo no contienen nada dentro, por lo que seguimos teniendo una página web vacia.

Definir el título de una página web Una de las cosas que se pueden definir dentro de la cabecera o head es el título de la página. Antes hemos dicho que en la cabecera se colocaban las cosas que no se mostraban en la web. Este título realmente no se ve en la web, pero si en la barra azul de la parte alta del navegador (Explorer, Mozilla, Firefox, etc son tipos de navegadores) por lo que resulta importante aprender a definirlo.

Más adelante veremos por qué es tan importante. Como ya estarás sospechando, existe una palabra para indicar que va a comenzar el título y otra para indicar cuando termina. El título se define así (como ves, dentro de la cabecera o head):

TITULO



Como siempre, empieza por la palabra y termina con la misma pero con la contrabarra delante, es decir, con . Si guardaramos esto en un archivo con extensión .html o .htm qué veriamos? Una ventana del navegador completamente en blanco, pero con un título en la parte superior del navegador como el que hemos escrito.

Cómo ver el código Html de cualquier web? La forma más sencilla de ver el código Html de una página web es haciendo clic en las opciones que aparecen normalmente en la barra de herramientas superior de cualquier navegador. La opción concreta dependerá de cuál sea el navegador que estés usando. Si usas el Internet Explorer puedes ver el código haciendo clic en Ver > Código Fuente. Si en cambio estás usando el Firefox, la opción está en Ver > Código Fuente de la Página o teclas Control + U. Para el navegador Opera, el código Html se puede lo tienes en Ver + Código Fuente o pulsando las teclas Control + F3. Como ves, son todos parecidos y por supuesto, el código mostrado ha de ser idéntico. Haz la prueba con esta misma página.

La carpeta de nuestras webs Cuando tengamos lista nuestra página web tendremos que mandar todos los archivos utilizados a la red (a nuestro servidor) por lo que es necesario que todos ellos estén en una misma carpeta. El lugar más accesible es nuestro escritorio de Windows, de modo que vamos a crear una carpeta allí llamada "mis-paginas-web". Crear esta carpeta es bien sencillo. Pones el cursor de tu ratón sobre una parte de tu escritorio donde no haya ningún icono. Haces clic allí con el botón derecho del ratón y escoges Nuevo > Carpeta. A continuación le pones el nombre que os he dicho "mis-paginas-web" y pulsamos Intro. Ya tenemos lista la carpeta. 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 estos pasos. Dentro de la carpeta "web-ejemplo-cctw" crea otra carpeta más y llámala "objetos". En ella guardaremos las imágenes, archivos de sonidos, etc. Te repito, es muy importante que sigas mis pasos al pie de la letra.

Configurar nuestro sitio en el Html-Kit Ahora que tenemos la carpeta lista, llega el momento de configurar nuestro Sitio en el Html-Kit. Y qué es un Sitio? Se llama sitio a toda la web, incluyendo todos sus páginas, imagenes y demás

elementos. Coincide o ha de coincidir con la carpeta que acabamos de crear, pues esa era su función, englobar todos los archivos del sitio para no liarnos ni liar al Html-Kit.

Abriendo la ventana WorkSpace Empezamos desde cero. Cierra el Html-Kit si lo tienes abierto y sigue estos pasos de uno en uno. 1- Abre el Html-Kit. Aparecerá en blanco con una pantalla como esta: 2.- Haz clic sobre la barra de herramientas, donde pone Herramientas y activa la opción Workspace. 3.- Aparece ahora una ventana donde podemos definir nuestros sitios: Vemos tres carpetas ya creadas pero en principio no les vamos a hacer ningún caso.

Sitio Local y Sitio Virtual 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 más 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 Añadir Carpeta Local/Red. 2.- En la ventana que se abre, tienes que poner la carpeta "pagina-ejemplo-cctw" en el primer hueco (pincha en la carpeta amarilla de su derecha para encontrarla y escogerla) y en el segundo hueco pon un título cualquiera, por ejemplo, "web-ejemplo-cctw-local" y pulsa OK: 3.- Tras pulsar OK verás como aparece este nuevo sitio en la ventana de Workspace: A partir de ahora, cada vez que queramos trabajar sobre archivos de esta página 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 página web.

Cómo crear la primera página de la web? La primera página que vamos a crear es la página principal. La página principal es la que se muestra por defecto al visitante cuando nos visita, la primera que ve. Su archivo ha de llamarse obligatoriamente index.html sea cual sea el servidor donde la alojemos. Como esta página va a pertenecer al sitio "web-ejemplo-cctw", tendremos que apañarnoslas para crearla dentro de ese sitio y no en los otros que aparecen en la ventana de Workspace. Para crearla ponemos el cursor del ratón dentro de la ventana de Workspace, justo encima del sitio "webejemplo-cctw" y pulsamos el botón derecho del ratón. Se abre entonces una ventana en la que tenemos que escoger, dentro de la sección New, la opción Create File... Al hacer clic sobre Create File... Haz clic sobre la lengüeta en la que pone "General", escoge el tipo de archivo "Blank HTML Page" (página html en blanco) y pulsa Ok. En seguida aparece otra ventana preguntándonos el nombre que queremos que tenga ese archivo. Se tiene que llamar index.html pues será la página principal, así que lo escribimos en esa ventana, con la extensión 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" en la ventana Workspace. Haz clic allí. Como ves, no solo te muestra el archivo index.html sino también la carpeta "objetos" que hemos creado anteriormente. Si te vas a MiPc y abres la carpeta verás como además de la carpeta "objetos" también aparece allí el archivo index.html Ya estamos listos para escribir contenidos el la página principal, index.html.

Cómo crear un párrafo en la página web? Si has prestado atención a lo dicho hasta ahora, te acordarás de que las cosas que se ven en la web se colocan dentro del cuerpo o Body, es decir, entre las etiquetas y de modo que, si vamos a escribir un párrafo tendremos que hacerlo allí. Empezaremos abriendo el Html-Kit. Una vez abierto nos vamos a la ventana Workspace, hacemos clic en el signo "+" que hay a la izquierda del sitio "web-ejemplo-cctw" para que se muestre su contenido y después hacemos doble clic en el archivo index.html o página principal. Se abre entonces la ventana de ese archivo mostrando todo su código Html. Esta es la vista llamada "Editor de Html". Como verás, el código de esta página coincide más o menos con el que te expliqué en las primeras lecciones. Empieza por seguido de la cabecera y después el cuerpo o Body, para cerrarse al final con que como toda etiqueta de cierre lleva su contrabarra "/". Se ve también esa primera línea de la que no te he hablado aún. Esa línea describe el tipo de página que es, las normas de Html que está siguiento. No tiene mayor importancia, la dejaremos y listo.

Cambiando el título Vamos a cambiarle el título a esta index. Bastará con escribir el título que queramos en lugar de donde pone "Page title". Vamos a ponerle todos "Pagina Principal de Ejemplo". Ya sabes, entre y .

Mi primer párrafo Al igual que un título se escribe entre y , un párrafo hay que escribirlo entre las etiquetas

y

. Así, para escribir por ejemplo "Bienvenidos a mi página web. Muy pronto estará lista!" basta con escribir esa frase encerrada entre esas etiquetas, dentro del cuerpo de la página es decir, entre y . Quedaría así:

Claro que con la vista "Editor" no vemos lo que estamos consiguiendo. Para ver cuales son los

resultados el Html-Kit dispone de otra vista llamada "Preview" o vista previa, que nos muestra cómo quedaría 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. Haciendo clic sobre "Editor", junto a "Preview" puedes volver a ver la vista de código Html. Ya sabemos algo más.

Crear un segundo párrafo en la página Para crear un segundo párrafo ya imaginarás lo que hay que hacer, no? Basta con incluir ese segundo párrafo debajo del anterior y encerrarlo entre las etiquetas

y

. Por ejemplo, vamos a poner este segundo párrafo: "Página creada gracias a EDI".

Cómo guardar los cambios realizados Para guardar lo que hemos hecho hasta el momento pulsa en la barra de herramientas, donde pone Archivo y escoge Salvar. Ya puedes cerrar el Html-Kit sin miedo a perder nada.

Cómo crear un enlace en la página web? Lo importante de una página web es la posibilidad de navegar de unas páginas a otras sin más que hacer clic en los enlaces, así que vamos a aprender a crearlos. Para crear un enlace hay que decidir dos cosas, una es desde qué palabra de nuestra web lo queremos hacer y segundo a qué página lo queremos dirigir. Para el ejemplo vamos a crear un enlace desde la palabra "EDI" que tenemos escrita en el segundo párrago hacia la dirección edi.scienceontheweb.net Para ello cierra el Html-Kit y lo vuelves a abrir (se supone que has guardado los cambios hechos en la página de antes). Ahora vuelve a abrirlo y aparecerá el Html-Kit en blanco. En ese caso ya sabes, pulsa sobre Ver > Workspace para que aparezca la ventana de los sitios ( la ventana Workspace) y una vez que aparezca haz clic en el signo "+" a la izquierda de "web-ejemplo" para ver su contenido. Para terminar, doble clic sobre el archivo index.html para ver su código. Tras esto, como sabes, puedes cerrar la venata de Workspace para tener más espacio.

El código Html de los enlaces o vínculos La etiqueta de inicio para definir enlaces es y la de cierre . La palabra que encerremos entre esas dos etiquetas será la que el visitante pueda pinchar para acceder a la página enlazada. Por lo tanto, si la palabra fuera "palabra" la línea quedaría así: palabra Pero con esto no conseguimos nada, pues de alguna manera hay que indicar a qué página queremos enviar al visitante al hacer clic allí. Esto se define dentro de la etiqueta de inicio, de este modo: palabra Donde pone "ruta" hemos de poner la dirección completa del lugar a donde queremos mandar al visitante. Como queremos enlazar a una web externa, pondremos entre las comillas su ruta absoluta que es esta: http://edi.scienceontheweb.net quedando el código del enlace de este modo: EDI

En la misma o en otra ventana? Si no se indica ninguna cosa más, cuando el visitante haga clic en el enlace la página destino se abrira en la misma ventana, pero si quieres que en lugar de eso se abra en una ventana distinta (por ejemplo, para que no se pierda la web anterior) has de indicárselo dentro de la primera etiqueta. Yo te recomiendo que todos los enlaces hacia páginas de tu misma web se abran en la misma ventana, y que todos los enlaces hacia páginas externas las abras en ventanas diferentes. Como este enlace apunta a una página externa (no forma parte de la web de ejemplo) le vamos a indicar que ha de abrirse en una ventana distinta y esto se hace añadiendo este trozo de código target="_blank"

Los estilos css El mayor problema que encontramos los que hacemos páginas web es el conseguir que se vea idéntica en cualquier navegador. A veces terminamos una web que se ve perfecta en Explorer y de pronto viéndola con el Opera o con el Firefox descubrimos que está toda desordenada. Esto pasa porque no todos lo navegadores interpretan igual las cosas que escribimos en el código Html. Para evitar esto lo mejor es usar estilos CSS. La idea es colocar en las páginas web solamente los contenidos, sin tener en cuenta colores, tamaños, anchuras ni nada de nada, solo contenidos puros y duros. Por otro lado crearemos un archivo aparte donde definiremos todas las características que queremos que tenga cada elemento de cada una de las página de la web. De este modo si un día creemos por poner un caso que el tamaño de la letra es muy pequeño y queremos hacerlo más grande, solo tenemos que indicarlo en ese archivo de características y automáticamente el tamaño de letra quedará cambiado en todas las páginas de nuestra web. Lo mismo podremos hacer a la hora de cambiar el fondo de la página, la posición de cierto elemento, el color de fondo de una parte, el coloreado de los enlaces.... todo lo que tenga que ver con el modo de presentar las cosas de la web se queda definido en ese archivo de características.

La hoja de estilos css Este archivo de características se llama Hoja de Estilos y aunque podemos ponerle el nombre que queramos, vamos a llamarlo siempre estilos.css para no liarnos. La extensión, .css es obligatoria. Por un lado hemos de crear ese nuevo archivo y por otro lado hemos de indicar en cada una de las páginas de nuestra web que ha de leer esa Hoja de Estilos para saber cómo queremos que se presenten los elementos de la web.

Crear la Hoja de Estilos "estilos.css" Para crear la hoja de estilos volvamos a abrir el Html-Kit y activamos la vista de Workspace para tener a mano el sitio "web-ejemplo-cctw". Igual que hicimos para crear la página principal index.html ahora vamos a hacer algo parecido para crear el archivo estilos.css Hacemos clic con el botón derecho del ratón sobre la carpeta del sitio "web-ejemplo" de la ventana Workspace y escogemos New > Create File... Se abre entonces la ventana que nos pregunta qué tipo de archivo queremos crear. Fíjate que está en la primera pestaña, 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" de la ventana Workspace, nuestra Hoja de Estilo para variar, en blanco.

Relaccionar estilos.css con la página web Ahora que tenemos creada la Hoja de Estilos (en blanco, pero la tenemos) hay que decirle a la página web index.html que tiene que leer las características que hay en estilos.css para que sepa qué propiedades queremos que tenga cada elemento de la página. La línea de código Html que tenemos que incluir en la cabecera, es decir, entre y es esta:

De modo que abrimos el Html-Kit, abrimos la página index.html y escribimos esa línea de código entre y Si ahora nos vamos a la vista previa haciendo clic en "Preview" (en la parte de abajo del Html-Kit) verás como no hay cambio alguno. Esto es porque la Hoja de Estilo (estilos.css) está todavía vacia.

El color y la imagen de fondo de una web Aunque podemos indicar un color y/o un fondo de página directamente en el código Html, vamos a hacerlo en la Hoja de Estilos para evitar los problemas y aprovechar las ventajas que te he comentado en la página anterior. Así de paso, vamos a prendiendo a usar el archivo estilos.css para definir las características de las página web.

Color de fondo Por defecto, el color de fondo de una página 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 página web. Los colores se definen por un código m (como por ejemplo #E6E6FA). Te dejo aquí un enlace con una lista de colores y sus códigos 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 código: body {background-color: #E6E6FA} En adelante, cuando escriba códigos de CSS los pondré en color verde para distinguirlos del código Html que lo pondré de color azul. Si ahora guardas el archivo estilos.css, abres el index.html y pulsas abajo en "Preview" para ver como queda, verás como el fondo ahora es del color elegido. Y verás que no hemos tocado el index.html para nada. Si en lugar de solo el index tuvieramos 500 páginas pasaría lo mismo, todas cambiarian con solo retocar el archivo estilos.css y en cambio si no usaramos Hoja de Estilos tendríamos que cambiar el color de fondo en las 500 páginas, una a una.

Un poco de estilos CSS Para dar propiedades a los elementos de la web, se escribe en la hoja de estilos el nombre de la etiqueta y a continuación, encerrado entre las llaves "{" y "}" se define cada propiedad que queremos pero separándo unas de otras con un punto y coma ";". En el caso anterior, como la propiedad era para el cuerpo, hemos escrito "body" y entre llaves hemos definido la propiedad.

Background que significa fondo. background-color se usa para especificar el color de fondo no solo del body sino de otros muchos elementos, como párrafos, enlaces, etc,. el #E6E6FA es el código que corresponde a uno de los colores que aparecian en la tabla de colores del enlace que te puse antes. En este caso, como solo hemos definido una propiedad, no es necesario poner el punto y coma, pues no hay nada que separar.

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 montón en la Galería de Imágenes, pero puedes colocar cualquiera que tengas a mano. Cuando la tengas, copiala y la pegas en la carpeta "objetos" que hemos creado lecciones atrás en tu escritorio, dentro de la carpeta "web-ejemplo" que hay en la carpeta "mispaginas-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 código a insertar en la hoja de estilos sería este: body {background-color: #E6E6FA ; background-image: url(objetos/fondo.png) } Fíjate 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 paréntesis tal y como hemos visto en el código. 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 página, 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 página. Vamos a ver todas esas opciones.

Background-Repeat Para que el fondo solo salga una vez hay que decirle, en la misma línea de la hoja de estilo que no se repita, de este modo: background-repeat:no-repeat quedando así el código de la Hoja de Estilos: body {background-color: #E6E6FA ; background-image: url(objetos/fondo.png) ; backgroundrepeat:no-repeat } Para que el fondo se repita solo horizontalmente, se pone esto en su lugar: backgroundrepeat:repeat-x body {background-color: #E6E6FA ; background-image: url(objetos/fondo.png) ; backgroundrepeat:repeat-x } Para que se repita solo verticalmente se escribe: background-repeat:repeat-y body {background-color: #E6E6FA ; background-image: url(objetos/fondo.png) ; backgroundrepeat:repeat-y } Para que se repita vertical y horizontalmente no hace falta poner nada, pero si lo deseas puedes poner esto: background-repeat:repeat, tal que así: body {background-color: #E6E6FA ; background-image: url(objetos/fondo.png) ; backgroundrepeat:repeat }

Aún 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 quedaría 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 También 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) ; backgroundrepeat: no-repeat ; background-position: left bottom} Los valores que puede tomar son: top (arriba), center (centrado) y bottom (abajo) para la alineación vertical; y left (izquierda) y right (derecha) para la alineación horizontal, de modo que puedes usar cualquiera de esas combinaciones. Aunque no se recomienda, también 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. Una página web suele tener una achura de 800 pixeles.

Background-Attachment Esto no funciona en todos los navegadores y hace que la imagen de fondo se quede fija mientras mueves la página con la barra de desplazamiento o que se mueva con ella. Los valores a tomar son fixed o scroll. Pero no te lo recomiendo por que depende del navegador conseguiras el efecto o no.

Aplicar color e imagen de fondo al ejemplo Vamos ahora a aplicar un color de fondo a la web de nuestro ejemplo.

Aplicando el color de fondo Tal y como hemos visto antes, para aplicar el color de fondo #E6E6FA a la página web pondremos a la etiqueta body de nuestra hoja de estilo lo siguiente (ya sabes, abres el Html-Kit y abres la hoja de estilo para insertarle esta línea): body {background-color: #E6E6FA}

Aplicando una imagen de fondo Suponiendo que hemos escogido una imagen para el fondo . 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 línea 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) ; backgroundrepeat: no-repeat } Además la quiero centrada tanto vertical como horizontalmente, así que le añado esto:

body {background-color: #E6E6FA ; background-image: url(objetos/fondo.png) ; backgroundrepeat: 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 línea que el body va a tener una altura del 100% body {background-color: #E6E6FA ; background-image: url(objetos/fondo.png) ; backgroundposition: center center ; background-repeat: no-repeat ; height:100%

Cómo insertar una imagen en página web? Ya hemos insertado una imagen como fondo de página pero para insertar una imagen dentro de la misma el procedimiento es algo distinto. Como puedes sospechar, como las imágenes son "visibles" van definidas dentro del Body. En qué lugar? Eso ya depende de donde la queramos insertar.

Dónde insertar la imagen. Si creamos la línea de código Html en cualquier parte dentro del Body, ésta aparecerá allí, en cualquier parte. Al principio uno de los problemas que vas a tener es no saber en qué parte del código Html insertar la línea de código correspondiente a un elemento para conseguir que aparezca donde deseas. Pues bien, una imagen puede insertarse o bien dentro de un párrafo, es decir, entre palabras, y sin que el párrafo se corte, o bien como una línea independiente. En ambos casos es aconsejable meterla en un párrafo, a pesar de que sea la imagen lo único que haya en esa línea, es decir, siempre encerrada entre

y

.

Código Html para insertar una imagen Para insertar una imagen, se coloca el siguiente código:

Como ves, este es uno de los pocos casos en los que no hay etiqueta de cierre, es decir, no se pone . Recuérdalo. Las imágenes nunca tienen etiqueta de cierre. Vamos a ver lo que hay dentro de ese código. Para empezar se coloca la ruta, que como siempre puede ser una ruta relativa (si la imagen pertenece a, o está guardada en tu espacio web) o absoluta (siempre que la imagen la estés obteniendo de otra web distinta a la tuya, aunque esto no es recomendable). Las rutas van siempre encerradas entre comillas, no lo olvides. Luego se coloca su anchura y altura expresada en pixeles con las siglas "px". No debes dejar nunca espacios en blanco entre la cantidad y las unidades, es decir, no vale poner esto "100 px", sino que lo válido es ponerlo junto, así "100px". Estas cantidades las coloca normalmente el Html-Kit automáticamente y si tú las cambias seguramente la imagen se vea desvirtuada y perderá definición. Si necesitas cambiar el tamaño mejor hacerlo con un programa gráfico y luego la vuelves a pegar en la página. En el caso de que no pongamos ni width (anchura) ni height (altura), si el archivo de la página fallara, el resto de los elementos como párrafos etc, ocuparían el lugar de esa imagen. Sería como si no existiera. En cambio, si definimos anchura y altura, si ocurre un fallo con la imagen y esta no se muestra, el navegador dejará un rectángulo con esas medidas en blanco, respetando la estructura de la web, sin mover nada.

Por último vemos un alt="........". No es obligatorio, pero para tener un código válido es necesario poner ese alt y además escribir entre las comillas una breve descripción de la imagen. Este contenido aparece en el hueco de la imagen en el caso de que la propia imagen no se visualizara por algún problema. Por otro lado, algunos buscadores como Google tienen en cuenta estas palabras escritas en estas descripciones para relacionar las búsquedas de sus usuarios con el contenido de las páginas web, de modo que es bueno además hacer que aquellas palabras por las que queremos ser encontrados aparezcan en esa descripción. En mi caso, 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 imágenes como "Menú del Html-Kit", o "Así se descarga el Html-Kit", pero siempre que tengan su sentido con esa imagen.

Vamos a insertar una imagen en nuestro ejemplo En primer lugar necesitaremos una imagen guardada en la carpeta "objetos". Ponle el nombre sonrisa.gif y seguimos adelante. Si ya tienes ese archivo guardado en "objetos" abre ahora el Html-Kit y la página index.html para continuar. Vamos a colocar la imagen entre el párrafo donde dice "Bienvenidos a mi página web" y el que dice "Página creada....". Como va entre los dos, nos vamos al Html-Kit a la vista "Editor" y ponemos el cursor después del primer

(al final de la línea de código del primer párrafo). A continuación pulsamos Intro para crear una nueva línea e insertamos esto (como te he dicho, la encerramos entre nuevos

y

que también debemos escribir):

Directamente desde las opciones del Html-Kit? Situa el cursor al final del primer párrafo, como antes. Pulsa Intro para crear una nueva línea y seguidamente ve a la barra de herramientas del Html-Kit y escoge Etiquetas > Imagen > Insertar Imagen... En la nueva ventana Pulsas sobre Add... y en la ventana que se abre busca la carpeta "objetos". Tras pulsar en Aceptar Si seleccionas el archivo "sonrisa.gif" del cuadro de la derecha. Nos falta ya que estamos ahí poner la descripción. Para eso pulsamos a la derecha de donde pone "alt" (arriba a la izquierda, junto a la ruta relativa) y escribimos la descripción que te dije antes "Bienvenido al Ejemplo de EDI", Tras escribir la descripción y pulsar Ok, vemos como aparece la línea de código 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 número y el px ).

Cómo insertar un enlace a tu E-Mail Sin conocer lo que piensan tus visitantes no tienes nada que hacer, nada que mejorar, de modo que colocar un enlace donde el usuario pueda hacer clic para escibirte un e-mail..

Código Html de un enlace de E-Mail Como vas a ver, es muy parecido al código Html de un enlace a otra página web. Solo cambian una palabra, y por supuesto la ruta, que en este caso será simplemente tu dirección e-mail. La línea de

código en Html es la siguiente: Texto que quieras poner para hacer clic en él Donde pone "Texto que quieras poner.." escribe las palabras que verá el visitante y donde ha de hacer clic para enviarte el mensaje. Puedes poner "Envíame un E-Mail"

Problemas de este tipo de enlace Puedes colocar un botón cualquiera y hacer el enlace desde allí. El botón sería un simple dibujo con el texto "E-Mail" o el dibujo de un buzón de correo o algo así. En ese caso los robots de spam no pueden leer la imagen. Por el momento y para el caso del ejemplo, vamos a colocar el enlace de E-Mail en un dibujo de un buzón.

Enlace de E-Mail en una imagen Primero guárdate una imagen en tu carpeta de "objetos" para poder seguir. Al guardarla ponle de nombre buzon.gif Ya tenemos tres archivos en la carpeta de "objetos": Ahora abre el index de tu Html-Kit y pon la vista "Editor". Pon el cursor del ratón justo al final de la línea de código del último párrafo (justo antes de ), pulsa con el ratón una sola vez para colocar el cursor allí y pulsa luego el Intro para crear una nueva línea. Como te dije anteriormente, conviene poner las cosas dentro de un párrafo, de modo que creamos ese párrafo aún vacio escribiendo sus etiquetas

. Ahora situa el cursor dentro de ese párrafo (colocándolo entre

y

) y en el Html-Kit tal y como hicimos anteriormente pulsa en insertar una imagen. Y del mismo modo que la otra vez, ponemos algunos datos en la ventana que aparece: Fíjate como tras seleccionar el archivo buzón en la ventana derecha de arriba, podemos escribir el "alt" del que hablamos páginas atras. Pues si, escribe "px" detrás de cada cifra de auchura y altura después de poner al "alt" y luego pulsa el Ok. Automáticamente aparece esa nueva línea de código Html en la ventana de nuestro index

y si le das a "preview" podrás ver el buzón en cuestión. Vamos ahora a colocarle el enlace a nuestro E-Mail.

Enlace de E-Mail con Html-Kit: Para insertar un enlace de E-Mail desde una imagen, tienes que seleccionar todo el código html de la imagen primero. Si te cuesta trabajo seleccionarlo, prueba colocando el cursor en el inicio y luego haciendo clic pulsando a la vez la tecla "Shift" de tu teclado teniendo el cursor al final del código que quieres seleccionar, desde . No selecciones la parte de

ni la de

Una vez seleccionado pulsa en la barra de herramientas del Html-Kit sobre Etiquetas > Crear Link...:

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 línea que pone "href" escoge "mailto:"y a continuación de mailto: escribe tu dirección de correo. Después pulsa Ok

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

Cómo centrar un párrafo de la página web Vamos a aprender a centrar párrafos de un modo muy sencillo gracias como siempre a nuestra Hoja de Estilos.

Crear un estilo centrado La propiedad en CSS que define la alineación de un elemento es text-align y se le pueden dar los valores left (pegado a la izquierda), right (pegado a la derecha), center (centrado), y justify (justificado). Si quisieramos que todos los párrafos aparecieran centrados, bastaría con poner en la Hoja de Estilo esta línea: p {text-align:center} El problema de esto es que nos centra TODOS los párrafos y seguramente no queramos eso, sino centrar solo unos pocos. En estos casos en los que queremos definir un estilo pero no queremos que se aplique a todos los elementos, es necesario definir lo que se llaman Clases de Estilo. Por ejemplo, podríamos 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 página le indicamos a un párrafo concreto que ha de tomar ese estilo. Vamos a verlo por partes.

Crear una clase de estilo Abrimos la Hoja de Estilo y escribimos esta línea: .centrado {text-align:center} Fíjate que hemos puesto un punto seguido del nombre que nos ha dado la gana y a continuación entre las llaves hemos dado la propiedad de centrado. Es importante que sepas que al ponerle nombre a estos estilos creados por nosotros hemos de seguir ciertas normas para evitar problemas: - Siempre en minúsculas. - No poner acentos, simbolos raros ni espacios en blanco. Solo letras y números. - Nunca empezar el nombre con un número. - Si necesitas separar el nombre en dos o más palabras usa guiones medios "nombre-nombre", nunca bajos "nombre_nombre". Bien, una vez claras estas normas (recuérdalas muy bien!) guarda la Hoja de Estilos y abrimos el index.html para centrar algunos párrafos.

Centrar párrafos en el Html Como recordarás, todos los párrafos empiezan con la etiqueta

. Pues es dentro de esa etiqueta donde tenemos que indicarle (si es que lo queremos así) la clase de estilo que queremos que tome. Vamos por ejemplo a centrar el párrafo donde ponemos "Bienvenidos...". Para ello vamos a la vista del código html del index y modificamos esa etiqueta

dejándola así:

Bienvenidos a mi página web. Muy pronto estará lista!

Si ahora haces vista previa o "Overview" desde el Html-Kit, verás como este párrafo aparece ahora centrado. Que te quede claro: Se define en la Hoja de Estilo poniendo un punto, más el nombre, y se indica en el html con class="nombre" (aquí sin el punto).

Cómo va nuestra página web por el momento? La maravillosa Hoja de Estilo (estilos.css) queda así: body { background-color: #E6E6FA ; background-image: url(objetos/fondo.png) ; backgroundrepeat: no-repeat ; background-position: center center } img { border-style: none } .centrado { text-align:center } Y el código Html del index.html de ejemplo así:

Pagina Principal del Ejemplo CCTW

Bienvenidos a mi página web. Muy pronto estará lista!

Página creada gracias a CCTW

Y con esta página terminamos con la primera lección.

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

Crear el archivo plantilla.html Recordando los pasos dados antes para crear el index.html vamos a crear ahora el archivo de la plantilla. Te doy pistas por si no te acuerdas. • Abrimos el Html-Kit. • Hacemos visible la ventana Workspace. • Ponemos el ratón sobre el sitio "web-ejemplo-edi-local" y pulsamos sobre él con el botón derecho del ratón. • Escogemos New > Create File... • Escogemos crear "Blank Html Page" desde la pestaña "General" y pulsamos Ok. • Le ponemos de nombre plantilla.html y pulsamos Ok de nuevo. Ahora la abrimos haciendo doble clic en su nombre, en la ventana Workspace para empezar a trabajar sobre ella. Como siempre que se crea un archivo nuevo, aparece casi vacio.

Creando la Hoja de Estilo para el resto de páginas de la web Hacemos lo mismo para crear una Hoja de Estilo distinta a la anterior. Mientras que la anterior (estilos.css) la vamos a usar solo para el index, esta segunda Hoja de Estilo que llamaremos "estilogeneral.css" se usará para todas las demás páginas de la web. Créala tu mismo. Pero recuerda ponerle de nombre "estilo-general.css".

Relacionando estilo-general.css con plantilla.html Ahora te toca relacionar esta segunda Hoja de Estilos con la plantilla.html recien creada. Te recuerdo que había que colocar una línea de código en el Head. Pero recuerda poner en la ruta "estilo-general.css" en lugar de "estilos.css" Como tanto plantilla.html como estilo-general.css están en la misma carpeta, es suficiente con escribir esto:

La estructuración con Capas o Divs El darle forma a una web se le suele llamar estructurarla, o enmaquetarla. Es darle una estructura concreta para colocar luego el menú aquí, el contenido allá, etc. Para estructurar una web podemos usar simples saltos de línea, o avanzar un poco más y usar tablas, que dividen el espacio en celdas, celdas en las que podemos colocar más comodamente los elementos que queramos. También se puede estructurar una web partiéndola en frames o marcos.

Pero el método más profesional, límpio y cómodo es sin duda el uso de Capas o Divs

Qué es una Capa o un DIV? No es más que un elemento rectangular dentro del cual podemos incluir lo que queramos, palabras, párrafos, enlaces, imágenes, varias de estas cosas a la vez o incluso otras capas o también tablas. Es un simple hueco. Lo bueno que tiene es que luego, desde la Hoja de Estilos, podemos darle a todo su contenido propiedades como color de fondo, tamaño de letra, dimensiones de ese recuadro, margenes, bordes, etc, etc. Esto de abajo es el código Html de un Div sencillo. Bienvenidos a mi Web Como puedes ver, igual que ocurría con los elementos que vimos atrás, empieza con una etiqueta y termina con otra de cierre, igual pero con la contrabarra delante. Entre ambas etiquetas se coloca su contenido. Escribe esa línea de código en el archivo plantilla.html, por supuesto, entre y pues se trata de algo que debe "verse". Ahora haz vista previa "Preview" y observa qué aparece.

Dando estilos a un Div Ese Div no tiene ningún atractivo. Para adornarlo lo que hacemos es definir un tipo de estilo en la Hoja de Estilos y aplicarselo a ese DIV. Para empezar a jugar, abre el archivo estilo-general.css que se abrirá vacio, pon esto dentro y luego guárdalo: #cabecera {background-color: pink } Nota: Cada vez que hagas un cambio en la Hoja de Estilos, tienes que guardarla para poder ver sus efectos en la vista previa de la página web.

Clases de Estilo y Estilos Únicos Existen dos formas de definir estilos. Una es crear una clase de estilo, que es un tipo de estilo que podemos asignar luego a uno o a varios elementos. Por otro lado están los estilos únicos, que solo se deben aplicar a un elemento por página web. Las clases de estilo, que se pueden usar sobre varios elementos (varios párrafos, 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 código 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 "#" en lugar de con un punto, y en el código Html se asigna este tipo de estilo único escribiendo dentro de la etiqueta del elemento esto otro id="nombredelestilounico" en lugar de con el class, que es para clases (estilos que se pueden asignar a varios elementos). 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í: Bienvenidos a mi Web Abre ahora el archivo plantilla.html y pon esa línea de código. Ha de quedar así:

Page title Bienvenidos a mi Web Si has guardado antes la Hoja de Estilo y haces vista previa en la plantilla, verás como ahora la frase "Bienvenido a mi Web" aparece diferente. Con un fondo rosa (pink).

Más capas, más 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 . Vamos a crear una segunda capa que contendrá una barra de navegación. La llamaremos, navegacion (sin acentos, y todo en minúsculas).

Qué es una barra de navegación? Una de las cosas más importantes en una página web es el dar facilidades al visitante para que pueda navegar por nuestras páginas sin perderse y que lo tenga todo siempre a mano. No es bueno tener páginas escondidas, es decir, páginas a las que para acceder haya que ir primero a la sección tal, luego a la subsección cual, luego entrar en otro lado y finalmente conseguir acceder a una página en concreto. Todas las páginas deberían ser accesibles sin más que pulsar un par de enlaces desde el index o página principal. La barra de navegación nos ayuda a esto. En esta barra que aparecerá en todas las páginas de la web pondremos enlaces a las secciones que tratemos. Así, en cualquier momento el visitante puede ir de un lado a otro sin perderse.

Creando la capa navegación La llamaremos "navegacion" y solo va a existir una por página, luego se trata de un estilo único y se define por tanto así en la Hoja de estilo: #navegacion {background-color: gray } Escribimos eso en la Hoja de Estilo. Después abrimos la plantilla.html y escribimos, a continuación del div cabecera, esta otra línea: Barra de Navegación Como puedes ver, en la Hoja de Estilo le hemos dado a navegacion la propiedad de color de fondo gris (gray). Más adelante le pondremos más cosas, pero ahora seguimos creando el resto de capas.

Creando las capas contenido y pie Ya que estamos, vamos a crear dos capas más. La primera se llamará contenido y en ella pondremos luego un menú lateral y los textos de nuestra web, la parte principal. También vamos a crear otra capa para la parte más baja de la web que llamaremos pie en la que más tarde tendremos algunos enlaces, un mensaje de copyright y puede que otro espacio para publicidad.. Siguiendo las mismas instrucciones que antes, definimos estas otras dos capas en la Hoja de Estilo: #contenido {background-color: orange} #pie {background-color: brown}

Y tras guardas la Hoja de Estilo, abrimos la plantilla.html y ponemos estas otras dos líneas después de la de la capa navegacion: Esta será la zona principal de la web Este es el pié de página

Y el resultado es... Tras guardar todo, en la Hoja de Estilo tendrás esto: #cabecera {background-color: pink } #navegacion {background-color: gray } #contenido {background-color: orange } #pie {background-color: brown } En la plantilla.html esto otro: Page title Bienvenidos a mi Web Barra de Navegación Esta será la zona principal de la web Este es el pié de página

Resoluciones de pantalla y páginas web Existen varias formas de darle un tamaño a una página web. Por ejemplo, podemos hacer que ocupe toda la pantalla del navegador del usuario, sea como sea esta de grande, la tenga o no maximizada (la ventana...), o también podemos darle un ancho concreto, de modo que los que tengan un monitor pequeño la verán muy grande y los que la tengan más grande (la pantalla...) la verán más 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 tamaño 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 página 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 verán muy grande y la verán tan pequeña que tendrás más margenes a los lados que espacio para la web....

Qué opción tomamos entonces? Lo mejor es tomar la segunda opción, dar un ancho fijo a la web, pero estudiando muy bien cuál será esa anchura. Lo mejor es darle un ancho que sea cómodo para la resolución más usada por todo nuestro público. Así, si unos pocos usan una resolución de pantalla un poco mayor no verán unos márgenes exagerados y los que usen resoluciones un poco menores al ancho que le demos, no tendrán que usar demasiado la barra de desplazamiento y además, serán la minoría. Parece ser que hoy por hoy la anchura óptima para una página web es de 800 pixeles. De hecho, si miras las webs que sueles visitar verás que es así y que quedan muy bien con cualquier resolución. Así que... vamos a darle a la web del ejemplo esa anchura y además vamos a hacer que aparezca centrada en la ventana del navegador, las dos cosas a la vez.

Un Div para dominarlos a todos Exácto. Como queremos centrarlo todo, lo que haremos será encerrar toda la parte visible de la web en un div al que le definiremos en la Hoja de Estilo la propiedad de centrado, pero de un modo algo especial para que funcione en todos los navegadores. Llamaremos a esa capa.... "global". Como va a ser única, es decir, solo va a haber un elemento "global" por página, en lugar de definirlo con un punto delante y el class="global" en el Html, lo haremos con la almohadilla y con id="global". Para encerrar todo lo visible, ponemos la etiqueta de inicio justo después de y la de cierre justo antes de . 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 automático, por lo que se dejará todo lo que exceda de 800px y automáticamente, es decir, la mitad a la derecha y la otra mitad a la izquierda y por tanto, centrado. Lo veremos mejor más adelante, no te preocupes si no lo entiendes demasiado bien. Esto no funciona en todos los navegadores a menos que definamos una caracteristica a Body en la Hoja de Estilo estilo-general.css. Abrela si la cerraste y escribe al principio del todo esta nueva línea 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 todos los navegadores. Si guardas ahora la Hoja de Estilo y haces vista previa de la plantilla.html verás como todo aparece centrado y con un ancho fijo de 800px. Ahora no será fácil descuadrar tu web.

El menú de nuestra página web Ahora queremos crear un menú lateral . Como un menú es más 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 página, dentro de la zona de los textos, meteremos o crearemos este div que vamos a llamar menu dentro del div contenido. Esto es lo que se llama anidar capas. Empezamos creando la capa. Abre en el Html-Kit la plantilla.html y escribe la siguiente línea justo después de la etiqueta de inicio de la capa contenidos y antes del texto de dentro suya, de forma que quede el código Html así:

menu contenidos

Como verás, después del código Html de la capa menu, van los textos de la capa contenido y después, en la siguiente línea 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 línea para el div menu: #menu {background-color: yellow; width: 150px ; float:left } Como solo hay un menú por página, 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 más. La primera es width:150px con la que le damos una anchura fija de 150 pixeles. Quizás sea poco, pero por ahora lo dejamos así hasta que veamos si nos va a faltar anchura en esa capa. La segunda nueva caraterística que vemos es nueva, la propiedad Float.

Para que sirve la propiedad Float? La propiedad Float hace que el elemento flote sobre el resto de la web. Esto vale para cambiarlo de posición más fácilmente. A la propiedad float se le suele poner uno de estos dos valores: left (que flote a la izquierda) o right (lo manda a la derecha). Como nosotros queremos tenerlo a la izquierda, le pondremos la propiedad float:left y esto lo manda pegarse al borde izquierdo de la capa en la que está, es decir, a la izquierda de la capa contenido.

Rellenando el menú de nuestra página web Vamos a insertarle algunos enlaces (ficticios, pues aún no tenemos páginas que enlazar) y así de paso vemos como se estructura correctamente. En realidad un menú no es más que una lista y, lo mejor para poner una lista es usar el elemento... lista.

Como se hace una lista Las listas se definen en Html con dos etiquetas, la primera indica el principio de la lista y es

mientras que la otra define el inicio de un elemento de la lista, que es
• . Por supuesto, cuando termina la lista se coloca su etiqueta de cierre que será

y cuando termina un elemento de la lista (un enlace en este caso) se coloca , de forma que el código Html de una lista completa sería este mismo:

• elemento1
• elemento2
• elemento3

vamos a ver qué cuál es el código que tendríamos que colocar dentro del div del menú. Para empezar, abre tu Html-Kit y escribe el código de arriba dentro del div menu, eliminando claro la palabra "menú" que habia ya colocada. Si haces vista previa verás cosas un poco raras, como que el menú se descuelga un poco por debajo de la web, pero eso lo arreglamos en las siguientes páginas.

Enlaces para el menú de nuestra página web Como recordarás (eso espero...) los enlaces tenian esta forma:

Texto del Enlace así que vamos a poner ese código dentro de cada elemento li de la lista del menú. Si ponemos una ruta falsa nos dará algún problema, asi que en lugar de poner nada en la ruta le vamos a colocar una almohadilla (#) que sirve para que haga el efecto de enlace pero sin enviarnos a ningún lado por ahora. Cuando tengamos más páginas en la web pondremos las rutas de aquellas páginas que queremos enlazar desde el menú. Enlace 1 Como no vamos a querer que se abran esos enlaces en páginas distintas sino en la misma, no es necesario ponerle el target al código del enlace (el target="_blank" se pone para que el enlace se abra en una página distinta, lo recuerdas?). Pues adelante, abre tu Html-Kit, abre la plantilla.html y coloca un enlace en cada uno de los tres elementos de lista que tenemos. Para diferenciarlos, puedes escribir Enlace 1, Enlace 2 y Enlace 3. Eso es todo lo que tenemos que hacer en la plantilla.html porque lo demás, el "aspecto" como siempre, se lo daremos con la Hoja de Estilo.

Dar estilos Css a la lista del menú Vamos a empezar a arreglar cosas en la Hoja de Estilos para dar mejor aspecto a este menú. Recuerda que la estrategia perfecta para no tener problemas con algunos navegadores y para tener un código Html sencillo para revisarlo nosotros, y sencillo para que los buscadores lo lean bien e indexen nuestras páginas correctamente, es poner en el Html lo justito, y dejar los detalles de cómo queremos adornar cada cosa para la Hoja de Estilo. Además esto nos permitirá hacer cualquier cambio en todas las páginas de nuestra web con solo cambiar una palabra en la Hoja de Estilos.

Reparando el fallo del menú. Si ya hiciste vista previa de la plantilla, habrás visto que al poner varios enlaces dentro ha crecido y se sale por debajo de la página web. Vamos a reparar esto desde la Hoja de Estilo. Abre tu Html-Kit y abre estilo-general.css Colocando un width: 800px y un float:left a la capa contenido. Realmente le estamos indicando a la capa contenido que ha de tener un ancho de 800 pixeles, igual que el ancho de la página. En realidad parece que ocupara menos, pero ten en cuenta que el menú está dentro de él, luego lo amarillo del menú es parte de la capa contenido. El colocarle el float:left evita que en algún navegador se descuadre todo. Sin más rollo, abres la Hoja de Estilo, dejas la línea del estilo contenido de este modo: #contenido {background-color: orange ; width: 800px ; float:left} y luego guardas la Hoja de Estilo y haces vista previa de la plantilla.html para que veas como ahora todo se ha solucionado.

Eliminando los puntos de la lista Podemos modificar las propiedades del elemento li en la Hoja de Estilos, pero el problema que podemos tener es que si lo hacemos así, todas las listas que tengamos en la web dejarán de tener ese punto, y es más, tomarán todas las propiedades que le digamos ahora. Por eso, mejor que modificar las propiedades del elemento li, lo que haremos será crear un estilo nuevo de li, que usaremos solo en el menú. De este modo todas las listas que pudieramos poner en las otras partes de la web serían normales. Así que, definiremos en la Hoja de Estilo propiedades para todos los li que cumplan la condición de

estar dentro de la capa menu. Esto se hace así: #menu li { list-style:none } Esto hace que no tenga ningún (none) tipo de estilo, como por ejemplo el puntito aquel. Si guardas la Hoja de Estilo (estilo-general.css) y haces vista previa de la plantilla verás que ya no aparece.

Formatear los estilos a cero Si tuvieras varios navegadores diferentes, como el Internet Exporer, el Opera, el Firefox, etc, etc, te darias cuenta que en cada uno de ellos el menú (y algunas otras cosas) se ve ligeramente distinto. En unos los enlaces aparecen en el centro, en otros un poco a la derecha, o un poco más a la izquierda en otros.. Esto es porque mientras no se indique lo contrario, unos navegadores deciden dejar un margen de unos pocos pixeles para cada elemento, mientras otros navegadores deciden que no, que hay que dejar un poco más o un poco menos... Al final lo que ocurre es que parece imposible ver una página web exáctamente igual con todos los navegadores. Todos los problemas de este tipo no los vamos a poder arreglar de golpe, pero uno bien importante sí. Como cada uno toma por defecto un valor inicial para los margenes y bordes, lo que haremos será indicar nosotros en la Hoja de Estilos que TODOS los elementos van a tener un valor cero para los bordes y margenes. Luego, si deseamos cambiar alguno, lo definiremos en la Hoja de Estilos, pero por el momento lo ponemos todo a cero, o lo que es igual, vamos a formatear los estilos! Para indicar que ha de aplicarse a todos, ponemos un asterisco. Para indicar que tengan margen, padding (padding es otro tipo de margen que ya explicaré) y borde cero basta con colocar en la primera línea de todas, esta: * {margin:0px ; padding:0px ; border: 0px} Si escribes esta línea en estilo-general.css, la guardas y haces vista previa de la plantilla verás como ahora el menú aparece centrado, justamente centrado, sin margenes. También han desaparecido otros margenes que rodeaban la capa global. Eso si, no olvides colocar esa línea la primera de todas, no se te ocurra ponerla la cuarta, la quinta, etc, debe ser la primera de todas, arriba del todo en estilo-general.css. De lo contrario, como el navegador va leyendo los estilos de arriba a abajo, si la lee de las últimas anularás los margenes y bordes de las capas definidas antes de esa línea.

Enlaces del menú hacia la izquierda Has visto que todos los elementos de la web de ejemplo salen centrados? Sabes porqué? Pues porque pusimos text-align:center en la etiqueta body, y como el body contiene toda la web, entonces todos los elementos de la web estarán centrados. Por ejemplo, los enlaces del menú quedan mucho mejor si aparecen alineados a la izquierda. 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, también se hubiera podido poner el text-align:center en el estilo #menu li De la forma anterior se aplica a todos los elementos de la lista, mientras que definiendolo en #menu li solo se aplicaría a los elementos encerrados entre

y

. Ahora los enlaces aparecen bien, a la izquierda, pero demasiado pegados a la izquierda.

Arreglando los márgenes del menú Esto ya es cosa de probar y probar, claro. Lo suyo es ajustar los margenes cuando tengamos los enlaces definitivos, pues según lo largo que sea el texto de cada enlace podemos ajustarlo más o menos, al igual que la anchura del menú. Pero como ya estamos liados con esto, vamos pa´lante y lo terminamos, te parece? Va a ser muy facilito. Aún no te lo he dicho, pero quizás hayas visto ya por algún lado varias formas de especificar los margenes. Se pueden definir de estas formas: margin: 10px Esto indica que se ha de dejar 10 pixeles tanto por arriba como por abajo y por ambos lados. margin: 10px 20px Este otro modo, con dos cantidades, indica que se ha de dejar 10 pixeles por arriba y abajo y 20 pixeles por la derecha e izquierda. Es decir, la primera cifra indica el margen de arriba y abajo y la otra la de los lados. margin: 10px 20px 5px 15px Y este otro modo (puedes escoger el que te venga mejor según si los margenes son iguales para todos los lados o diferentes) define por orden los margenes a dejar por arriba, por la derecha, por abajo y por la izquierda respectivamente. O para acordarnos, la primera cifra es la de arriba y las demás van en sentido de las agujas del reloj (arriba, derecha , abajo e izquierda). Nosotros, para el caso de los margenes del menú vamos a escoger la última forma, con las cuatro cifras, pues así podemos retocar muy facilmente y ver como va quedando. Empezamos como siempre, abrir tu Html-Kit, abrir la Hoja de Estilos y escribir dentro de los corchetes de la capa #menu li lo siguiente: #menu li {list-style:none ; margin: 0px 0px 0px 0px} Lo he puesto todos a cero (en realidad ya estaban todos a cero pues hicimos el formateo con el asterisco hace muy poco) y vamos probando con distintos valores para ver como va quedando. Lo que más me interesa es dejar un poquito de margen hacia la izquierda para separar los enlaces del borde, y también un poco de margen por encima y por debajo para que no se vean muy apiñados. En cambio el margen derecho me interesa más que siga a cero, pues así tengo más hueco para colocar el texto de cada enlace. Así que, tras varias pruebas (te invito a que hagas tus experimentos poniendo valores un poco exagerados para ver mejor los efectos) lo vamos a dejar así: #menu li {list-style:none ; margin: 4px 0px 4px 6px} Te recomiendo que en estos ejemplos que vamos haciendo pongas exactamente lo mimo que yo. Así no te liarás más adelante cuando hagamos cambios.

Aplicando estilos css a los enlaces del menú Vamos a ver cómo eliminar el subrayado de los enlaces y cómo resaltar los enlaces del menú cuando pasas el ratón por encima. Eso si, primero un poco de base para que no te pierdas luego.

Cómo se definen las propiedades de los enlaces Los enlaces como ya sabes, de escriben con la etiqueta y por tanto está claro que para modificar sus propiedades basta con escribir una "a" en la Hoja de Estilos y modificar cosas entre las llaves.

Las características que definamos así para los enlaces se aplicarán 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 habrás 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 ratón está justo encima de él, pero sin apretar el botón aún. También lo has debido ver, pasas el ratón sobre un menú y se van coloreando o poniendo en negrita los enlaces que señalas. - Active: Y este es el estado de un enlace o vínculo cuando está siendo presionado por el ratón y mientras no se suelta el dedo. 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 tamaño de letra de 1,3 veces lo que correspondería normalmente (font-size:1,3em) y finalmente que no deben tener ningún tipo de decoración, esto es, el subrayado (text-decoration: none). Por defecto siempre salen subrayados, que se define con textdecoration: underline Si no quieres destacar los enlaces según los estados que te he explicado antes, basta con definirlos en esa única línea, no obstante si quieres darle algún toque diferente en función de alguno de esos estados, se vuelve obligatorio definir los cuatro estados y además en ese mismo orden que te he puesto.

Sin subrayar y marrones, excepto cuando se coloca el cursor encima que pasan a rojos y subrayados Con estos estilos los enlaces nunca aparecen subrayados hasta que se coloca el cursor del ratón sobre ellos. Esto es bueno, para destacar al usuario que son enlaces. Además pasan de color marrón (brown) a color rojo (red) cuando se pasa el ratón sobre ellos. Fíjate como defino todos los estados aunque deje vacios algunos estados. Siempre hay que ponerlos todos y en ese orden además. a {color:brown ; test-decoration: none} a:link {} a:visited {} a:hover {color: red; test-decoration: underline} a:active {} Estas líneas de código puedes escribirlas ya en la Hoja de Estilos estilo-general.css Depués guárdala y mira los cambios con la vista precia en plantilla.html.

Más estilos css a los enlaces del menú Vamos a aplicar un par de propiedades más a los enlaces del menú. Lo primero será tratar estos enlaces como bloques, lo segundo ponerles un color de fondo.

Tratar elementos como bloques Si te fijas en la vista previa de la plantilla.html verás que es necesario poner el cursor justo encima de las palabras del enlace (se suele llamar Anchor Text a los textos de los enlaces) para que estos

funcionen. En cambio podemos hacer un pequeño truco para que estos se activen, funcionen, con solo colocar el cursor sobre la línea, sin necesidad de colocarlo justamente sobre el texto. Añade esta última propiedad dejando el estilo de enlaces de la Hoja de Estilos estilo-general.css así: a {color: brown ; text-decoration:none ; display: block } Ocurren dos cosas ahora. La primera es buena, es el efecto que te acabo de comentar, que situando el cursor en la misma línea del enlace pero lejos del texto, también se activa el enlace. La segunda es mala, y es que se nos han separado demasiado los enlaces verticalmente. Es un defecto de algunos navegadores, como el Internet Explorer, pero esto lo arreglamos rápido con otro truquillo. Pon el códgo Html de todos los elementos de la lista uno seguido del otro, en lugar de uno en cada línea de código en la vista Html y verás como se arregla. En adelante, ya sabes que los elementos de las listas, los

hay que ponerlos todos seguidos, en la misma línea que los

y

. Con eso se solventa el tema.

Aplicando un fondo a los enlaces activos Bueno, en realidad es a los enlaces en estado Hover. Vamos a hacer que al poner el cursor sobre un enlace del menú, este aparezca sombreado, con un fondo de color.... gris. Se hace retocando el código de los enlaces de antes, pero solo la línea del hover, dejándola así: a:hover {color:red ; text-decoration:underline ; background-color: silver} La propiedad background-color te debería sonar, la vimos al principio del curso para poner fondo a la página index. Silver significa plata en inglés, es un color gris clarito. El resto de líneas del código no se tocan. Si guardas y haces vista previa a la plantilla.html verás lo logrado.

Rellenando la Zona Principal Veamos realmente como funciona esta estructura que hemos hecho. Vamos a insertar más texto en la parte principal de la página web para ver como se comporta el menú lateral en el caso de que haya mucho más texto en la parte derecha. Abre el Html-Kit y abre tu plantilla.html

Elementos que no son nada Ya sabemos que gracias a la Hoja de Estilos, podemos cambiar el tamaño de la letra de toda la web, podemos varias los aspectos de los enlaces, los fondos de ciertos elementos, etc, etc sin más que poner la propiedad correspondiente. Pero para eso, todas las partes del contenido de la página web deben "ser algo". Si son enlaces modificaremos la etiqueta "a", si son párrafos la etiqueta "p", pero, qué etiqueta hemos de modificar para cambiar las propiedades del texto de la parte principal de nuestra plantilla? Aquella en la que pone "Esta será la zona principal de la web"? Va a ser dificil, pues no está encerrada entre ningúna etiqueta concreta, luego ni es un párrafo, ni un enlace. Nosotros pretendemos que sea un párrafo, verdad? Pues vamos a indicárselo poniendole a esa frase la etiqueta

al incio y como no, la etiqueta

de cierre al final.

Más contenidos Tras esta aclaración, vamos a incluir un par de párrafos más a continuación de ese. Ya sabes, has de poner

y

al principio y al final de cada uno para que el navegador sepa donde empiezan y terminan. Escribe un par de párrafos que tengan bastante texto, al menos lo suficiente como para sobrepasar lo que ocupa el menú de la izquierda.

Justificar los párrafos de la página web Los párrafos se ven centrados y eso parece una poesia más que una web. Eso es por que le pusimos align:center a body en la Hoja de Estilo. Pero no pasa nada, lo arreglamos rápido definiendo un estilo justificado para todos los párrafos de la web. Si más tarde nos interesa alguno con otra alineación, lo crearemos en su momento. Por ahora, abre tu Hoja de Estilo e incluye esta nueva línea, por ejemplo, al final de su contenido: p {text-align: justify} Con esto los textos quedan justificados. Esto significa que se reparten para que empiecen justo en la parte izquierda y terminen todas las líneas justo en el margen derecho, sin huecos. A mi me gusta así, pero si lo prefieres, en tus páginas puedes definirlo como text-align: left o text-align:right o text-align:center, como quieras.

Los margenes de los párrafos de la página web La cosa va mejorando, pero ahora vemos como los textos se pegan demasiado tanto al menú lateral como a los extremos de la página. Eso no queda muy bien, así que vamos a arreglarlo. Tienes dos opciones, una es definirle el margen concreto a cada uno de los párrafos de todas tus páginas web, o algo un poco más sencillo, poner un par de palabras en la Hoja de Estilo y listo. Abre la Hoja de Estilos de la plantilla.html (estilo-general.css) y vamos a reparar esos margenes. Como los textos que vemos sin margen pertenecen a la capa de fondo naranja (orange) y en la Hoja de Estilos solo pone "orange" en la capa "#contenido", ya sabemos a qué capa incluirle la propiedad padding (el padding es parecido al margin, ya veremos la diferencia). Por eso le pusimos esos colores, para encontrar cada capa rápidamente. Pero solo queremos por ahora poner margen a sus párrafos, es decir, queremos margenes para los párrafos de dentro de la capa #contenido, así que, si recuerdas bien lo que hicimos la otra vez, esto se pone así: #contenido p {padding: 5px 10px 5px 10px} Resumiendo, escribimos primero la capa y luego el elemento de dentro de esa capa al que queremos definir cosas y luego, entre paréntesis, las propiedades. Le hemos puesto 10px en los dos lados y solo 5 por arriba y abajo, para ver como queda e ir variando cada uno hasta que quede a nuestro gusto si fuera necesario. Escribe esa línea justo después de la definición en la Hoja de Estilo de la capa #contenido. Guarda la Hoja de Estilo, haz vista previa de la plantilla.html Vaya... los margenes no están mal del todo, pero vemos que los dos primeros párrafos no parece que hayan tomado el margen izquierdo para separarse del menú principal. Esto es por que se cuenta el margen desde la parte izquierda de la capa #contenido, mientras que en esos dos párrafos debería contarse desde la derecha del menú, verdad? Vamos a ver como solucionamos esto. Para eso tendríamos que poner un margen por la derecha para el menú, y como pertenece a la capa #menu tocaría retocar esa línea en estilo-general.css añadiéndole esto último que he subrayado: #menu {background-color: yellow ; width: 150px ; float:left ; text-align:left ; margin-right: 10px } Ahora si que lo hemos conseguido.

La indentación de los párrafos Eso si que es una palabra rara. Imagino que proviene de la propiedad "text-indent" que se aplica para establecer un margen a la izquierda solamente de la primera línea de cada párrafo, de modo que ésta queda más metida a la derecha que las demás líneas. Se aplica colocando "text-indent: XXpx" entre los corchetes del elemento al que se lo queremos aplicar. Vamos a aplicarlo a todos los párrafos de la parte principal, que eso queda muy bien. Un indentado de 15px creo que es suficiente. Como va a ser una propiedad para los párrafos (p) de dentro de la capa #contenido, incluimos el text-indent en esta línea (lo subrayo para que lo veas claro): #contenido p {padding: 5px 10px 5px 10px ; text-indent: 15px} Ahora guarda la hoja estilo-general.css y haz vista previa de la plantilla para ver como queda. Te gusta? Esto de indentar solo tiene sentido cuando los textos están justificados o alineados a la izquierda. Cuando están centrados no se suele usar, pues no hace falta ese efecto.

Cómo llevamos los códigos? Para estar seguros de que estamos haciendo el ejemplo según las lecciones aprovecho ahora para dejaros los códigos de la plantilla.html y de la hoja estilo-general.css según han quedado hasta ahora

plantilla.html

Page title



Bienvenidos a mi Web Barra de Navegación

• Enlace 1
• Enlace 2
• Enlace 3

Esta será la zona principal de la web

Este es el segundo parrafo de prueba, para ver como queda nuestro contenido principal, creo que te estara interesando el curso, continua y verás como te conviertes en un maestro de web

Este es el tercer párrafo. En pocos temas aprenderás un monton de trucos para familiarizarte y emprender el diseño de tu propia página, verás como es magnífico

Sale todo centrado y el texto indentado, pues adelante y podrás experimentar tus propios

diseños

Este es el pié de página



estilo-general.css •

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

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

Border Si en una capa solo definimos su contenido en Html, esta solo mostrará eso, el contenido, ya sea una imagen, un párrafo o lo que sea. Pues bien, la propiedad border dibuja un borde alrededor justo de ese contenido. El borde estará pegadito pegadito al contenido. El borde por defecto, si no se

indica otra cosa, es una línea continua de 1 pixel de grosor y de color negro.

Padding El padding lo usaremos para definir una distancia de separación entre el borde y el contenido. Es decir, separa el borde de su contenido en una distancia igual a la que le indiquemos.

Margin Ahora tenemos otra distancia más. El margin es la distancia de separación que se va a dejar entre el borde y la parte exterior del elemento de la capa. 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 párrafos de otros, como vimos en las lecciones primeras.

Separar un poco el menú Para conseguir separar un poco el menú lateral (toda la zona amarilla) del borde de la parte naranja de la página, es decir, para meterlo un poco más dentro de la parte central, podríamos colocar un margin o un padding. Cuál de los dos? Como lo que queremos es separar la capa #menu (la amarilla) de los elementos exteriores, tenemos que aplicar margin. Si aplicáramos padding a la capa #menu el efecto sería crear una separación entre el borde amarillo y los enlaces de dentro. Hace un par de páginas pusimos a la capa #menu este margen: margin-right:10px, te acuerdas? Era para dejar una separación entre el menú y los textos de la parte naranja que están a su derecha. Ahora, como hemos visto que también sería bueno separarlo por la izquierda y por arriba (y ya puestos, por debajo también), ampliamos la definición y la ponemos de este modo: # menu {................... margin:10px 10px 10px 10px} Esto es lo mismo que poner solo margin: 10px, pero mejor lo dejamos del otro modo así podemos poner margenes diferentes en los cuatro lados si vemos que el mismo para todos los lados no nos gusta. Vamos a probarlo con estos otros valores (recuerda el orden de las dimensiones del margin, arribaderecha-abajo-izquierda) #menu {................... margin:3px 10px 3px 3px} Aún no hemos aplicado ningún borde a ninguna capa. Esto es por que cada navegador interpreta el borde de un modo distinto y vamos a evitarlo todo lo posible. En su lugar usaremos imagenes de fondo con el borde ya dibujado y en los casos en los que no sea posible ya nos buscaremos las mañas para poder usar bordes sin problemas, pero eso será más adelante.

Insertar títulos con h1, h2, etc. Igual que para indicar que una frase debía tener aspecto de párrafo con las etiquetas

y

, existen otras etiquetas para indicar que se trata de un título y estas etiquetas se escriben con una "h" seguida de un número que puede ir del 1 al 6. (Me refiero a títulos de texto, no al title de la página como vimos al principio de estas lecciones). La forma correcta para un título sería esta: Este es un título de importancia Uno

Fíjate como de nuevo, tiene una etiqueta de apertura al inicio y otra de cierre al final con la contrabarra. En lugar de un h1 podemos usar un h2, un h3 y así hasta h6. Los h1 son títulos principales y el resto van siendo de menos importancia y por lo tanto aparecen con letra más pequeña cada vez. Se usan por tanto los h1 para títulos principales y los h2 para subtitulos. Normalmente no se usan los demás pues no se suele abusar de sub sub subtítulos. Si aplicamos esas etiquetas sin más obtendremos una simple frase pero en negrita y con un tamaño mayor de lo normal para que se vea destacado. Si no nos gusta cómo queda por defecto, podemos siempre cambiar su aspecto indicando las propiedades que nos de la gana en la Hoja de Estilo, que para eso está. A mi me gustan por ejemplo titulos principales (h1) en negrita, con un tamaño ligeramente mayor que el resto de los textos y además subrayados y de otro color distinto al texto normal, que suele ser negro. Para los subtítulos (h2) me gusta en cambio un tamaño algo menor que el h1 y además sin subrayar, pero también del color del h1 y en negrita. Abrimos el Html-Kit, abrimos el archivo estilo-general.css y definimos estos dos títulos del siguiente modo: h1 {font-size: 1.2em; color:blue ; font-weight: bold ; text-decoration: underline ; text-align: center} h2 {font.size: 1.1em; color:blue ; font-weight: bold ; text-decoration: none ; text-align: center} Guardamos ahora la Hoja de Estilo y abrimos la plantilla.html Si hacemos vista previa a la plantilla no veremos ningún cambio. Por qué crees que puede ser? Piénsalo. Pues claro, porque como no hemos dicho a ningún elemento de la plantilla que es un título, no hay nada que mostrar con estos cambios en la Hoja de Estilo. Lógico no? Vamos ahora a crear un título (h1) y un subtítulo (h2). El título está claro, va a ser el texto donde pone "Esta será la zona principal de la web". Una frase no debería ser a la vez párrafo y título, o una cosa o la otra, de modo que le cambiamos las etiquetas a esa frase, eliminamos la "p" y ponemos un "h1", tanto al principio como al final. No te olvides de la contrabarra en la etiqueta de cierre. El subtítulo, de etiqueta h2, lo vamos a poner en el texto "Y este es el tercer párrafo" (en realidad ahora es el segundo, pues el pimero lo hemos convertido en un título h1, pero bueno). Para convertir ese trozo en subtítulo, ya sabes que no debe estar entre las etiquetas

y

, de modo que lo encerramos entre y y pasamos la etiqueta

de ese párrafo después de ese trozo de texto. Los títulos aparecen como elementos de una sola línea, o mejor dicho, no dejan que otra cosa como por ejemplo un párrafo, continue a su derecha, mandándolo directamente a la línea siguiente. Aunque en el código HTML pongamos un párrafo seguido de un título (en la misma línea de código), el párrafo siempre aparecerá debajo, en la siguiente línea, pues para eso es un título, no? Pues ya está. Ya sabemos más cosas. Si te gustan los títulos alineados a la izquierda ya sabes como cambiar la Hoja de Estilo para conseguirlo (text-align: left). Lo mismo para el resto de propiedades.

La importancia de los títulos en el posicionamiento de una página web Y tú pensarás... bueno, si puedo definir el estilo que me da la gana.. no podría crear una clase de párrafo (p.titulo), definirle las propiedades de centrado, tamaño mayor, color y subrayado y usar ese estilo en lugar de las etiquetas h1? Pues si, si que puedes, pero está muy bien usar las etiquetas de títulos por lo siguiente. Cuando una persona hace una búsqueda con por ejemplo Google y escribe "como crear páginas web" Google le muestra una serie de páginas. Pero cómo sabe Google qué páginas ha de mostrar? Bien fácil. Google y el resto de buscadores se pasean continuamente por la red leyendo las palabras de cada página web. Si en mi web ven que aparecen las palabras "como", "crear", "páginas" y "web", lo memorizan y mostraran mi web en sus listas cuando alguien haga una búsqueda con alguna de esas palabras. Y porqué unas páginas aparecen más arriba y otras más abajo en esas listas? Los motivos son muchos, pero uno de ellos (hay muchos más motivos) es que algunas de esas palabras aparezcan destacadas y destacadas es, o bien que aparezcan en negrita o bien que aparezcan dentro de un título tipo h1, h2 etc. Por eso es mejor hacer los titulos usando h1, pues si lo hacemos como párrafos los buscadores nunca sabrán que se trata de un título y no tomarán esa palabra tan en cuenta (también la tienen en cuenta, pero menos). El resto de motivos los iremos viendo en lecciones sucesivas. Eso si, no por lo dicho antes vamos a poner todos los textos dentro de un título, pues los buscadores pueden pensar que estamos haciendo trampas y en lugar de posicionarnos mejor en sus listas, apareceríamos los últimos. No se debe abusar. Otra cosa importante. Ya que sabemos la importancia de las palabras de los títulos, es bueno incluir en estos aquellas palabras por las que queremos ser encontrados. Es por eso que en los títulos de EDI se intenta colocar estas palabras clave. En esta sección por ejemplo, he aprovechado el título de arriba para colocar palabras que me interesan, como "titulos" (alguien puede estar buscando cómo insertar títulos en una web y me interesa que aparezca esta página en ese caso), tambien he colocado la palabra "posicionamiento" (me interesa que quien busque por esa palabra encuentre mi web) y por supuesto algo que no puede faltar en mi caso, las palabras "página web". Repito, no es cuestión de saturar con títulos, es suficiente con aprovecharlos muy bien, y saber qué palabras poner sin que el texto del título pierda su sentido, claro. Ha de tener que ver a la vez con el texto que hay debajo de él, sino, será muy bueno para el buscador pero los visitantes pensarian que estamos un poquito “idos”.

Buscando alojamiento para la página web Ya va siendo hora de ir subiendo nuestro trabajo a la red. Aunque aún no esté terminada la página web, es bueno tener ya un sitio para alojarla (a ese sitio se le llama Hosting) para ir viendo cómo se comporta la web en realidad.

Hosting Gratis con RazyHosting.com Te ofrecen 150 megas de espacio web, 4 gigas de transferencia mensual , 1 base de datos MySql, la posibilidad de comprar un dominio de verdad, tipo .com o .es y relacionarlo con ese espacio y encima sin publicidad alguna o si lo prefieres te regalan un subdominio gratuito. Si más adelante se te queda pequeño, por solo un par de dolares puede mejorar esas caracteristicas.

El registro en RazyHosting Paso a Paso 1.- Visita la web de RazyHosting en http://razyhosting.com (se abrirá en una ventana nueva para que puedas seguir estas instrucciones). 2.- Pulsa en el "Order now" en rojo ("pídelo ahora" significa) que hay encima del S0.00. 3.- Se abre otra ventana en la que se te muestran los distintos planes que puedes elegir. Si lo quieres gratis escoge el primero de todos llamado "FREE Hosting Plan". Para seleccionarlo pincha en el circulito que aparece a su izquierda. Lo pones en verde haciendo clic sobre él. Si has comprado alguna vez un nombre de dominio y quieres aprovecharlo para este hosting solo tienes que escribir su nombre un poco más abajo, donde pone Choose Domain Name. Si no tienes un dominio de pago Razy te regala un subdominio. En cualquier caso después de seleccionar el plan gratuito pulsa sobre Continue que aparece abajo en rojo. 5.- Seguidamente has de rellenar tus datos personales para darte de alta. Realmente no interesa dar datos falsos, es una tonteria. Además si pones por ejemplo un correo electrónico inventado nunca te llegarán los correos de activación. Si ya has estado registrado con Razy antes basta con rellenar la primera parte, en la que pone Existing Client (Cliente existente): Si eres nuevo en Razy pasa a rellenar los datos de más abajo, donde pone New Client (nuevo cliente): Te traduzco por si acaso: - First Name: Es tu nombre. - Last Name: Es tu primer apellido. Fuera de España se usa solo uno. En España se usan dos, pero puedes poner uno solo. - Company: En el nombre de tu empresa. Si no tienes no pongas nada, o pon "ninguna". - E-Mail: Tu dirección de correo. Ha de ser válida para que te llegue el correo de activación! - Confirm E-Mail: Repite el correo que has puesto antes. - Address 1: Tu dirección. Es obligatorio llenar los cuadros con asterisco rojo. - Address 2: Esto es solo por si no tienes suficiente espacio en el cuadro de dirección de arriba. - City: Tu ciudad. - State: Tu provincia.

- ZIP: Es tu código postal. - Country: Tu Pais. - Phone: Tu número de teléfono. Pone que es obligatorio. - Fax: Número de Fax. Es opcional. Ahora lo siguiente es aceptar los términos de condiciones marcando la casilla junto al Yes y pulsar sobre Continue: Tras pulsar en "Continue" te aparece este mensaje de verificación. Estás registrado! Te da las gracias y te dice que tu cuenta ha sido creada. Ahora tienes que abrir tu programa de correo y mirar, pues en unos segundos recibirás dos e-mail con tu login o nombre de usuario y tu contraseña o password. De ese E-Mail tienes que apuntarte en alguna parte el Client ID y el Password pues son los dos datos que te pedirán para logearte o iniciar tu sesión en Razy. En el segundo E-Mail que recibirás de Razy te dan datos para configurar el FTP (si ahora mismo no sabes ni qué es no te preocupes que lo explico en el curso paso a paso) y el coreo electrónico: La información del primer recuadro rojo de arriba solo te hace falta si dispones de un dominio propio (que has comprado) y quieres relaccionarlo con este hosting, es decir, que al escribir la dirección de tu dominio aparezca la web alojada en este espacio web. Si no dispones de dominio propio no te hace falta. Los datos del segundo recuadro rojo son los que necesitarás más tarde para configurar tu programa FTP y poder así subir los archivos de tu web que tienes en tu Pc hasta el hosting o servidor para que la gente pueda visitarla. Para configurar tu programa de correo electrónico y ver en él los correos de la cuenta que te regala Razy tienes también algunos datos al final del E-Mail. Pues bien, sigamos por orden. Si abres el primer correo que menciono verás en él un enlace. Tienes que hacer clic en él para acceder a la ventana de login de Razy y confirmar tu cuenta. Para ello abre ese E-Mail y haz clic donde te he senalado con un circulo rojo:

Acceder así a esta página de Razy en la que tienes que indicar los datos que recibiste y que ya deberías haberte apuntado.

Tras poner tus datos pulsa en "Login" y entrarás por fin en tu Panel de Control. Lo importante de la página que se te va a abrir en el navegador está en la parte izquierda. Verás allí unos menús con un montón de opciones. Vamos a ver que hay por esos menús. En el primer menú, el de más arriba, nos contramos con nuestro nombre y algunas opciones que por el momento no vamos a usar. Todas esas opciones son de pago: Entre ellas tenemos escoger otro plan mayor de pago (Plan Upgrades), registrar un dominio de pago (Domain Registration), ofertas especiales y renovar cuenta (Account Renewal). Como te digo, por el momento las olvidamos. El resto de menús de abajo son las estadísticas resumidas donde se puede ver el espacio de disco usado y restante, el trafico generado, etc. Si te fijas, en ese mismo lateral y abajo del todo pone algo así como "Hosting Settings". Pulsa sobre "Hosting Settings" para poner en marcha nuestro espacio web. Aparece otra página con este otro menú en el lado izquierdo:

Este es el menú "Website Manager" y se puede acceder a él también pulsando sobre un enlace con ese mismo nombre en una barra horizontal de enlaces que hay en la página de Razy en la parte de arriba. Si ahora pulsas sobre "Subdomain Manager" podrás escoger tu subdominio. Esto será la dirección de tu página web en Razy. La primera parte del nombre la elijes tu y has de escribirla dentro del recuadro en blanco de esa página: La segunda parte del nombre o subdominio la tienes que elegir de entre los que aparecen en el desplegable de la derecha. Una vez escribas el nombre de tu web en el recuadro y escojas la segunda parte que más te guste (o que menos te desagrade) pulsas en Add Subdomain y esperas unos segundos mientras se genera. Aparece entonces esta ventana:

En ella te dice que en 5 minutos estará activo (tienen que configurarlo ellos en su servidor para que te funcione y les lleva un tiempo). Desde esa misma ventana puedes hacer varias cosas. Si haces clic en las dos ruefas amarilla y azul de la derecha puedes modificar el nombre del subdominio. Si haces clic en la cruz roja (cuidado, ambas cosas están muy cerca) puedes eliminarlo. También puedes pulsar sobre el enlace azul de la izquierda, que te dirige a.... tu nueva página!! Apuntate esa dirección, pues es la URL de tu web. Si pulsas sobre ella te aparece una página por defecto. No está en blanco sino que aprovechan para poner cosas suyas. Cuando configures tu FTP y subas tu página se verá la tuya en lugar de esa, no te preocupes.

Resumiendo: Si te das de alta en Razy tienes que saber y apuntarte para poder configurar tu FTP los siguientes datos: - Nombre de usuario: Es un número que te envian en el E-Mail. - Contraseña: Es el password que te envian en el E-Mail. - Dirección FTP: es la dirección de tu web, algo parecido a esteesmisubdominio.atwebpages.com y tiene dos partes, una que te has inventado tu (en mi caso esteesmisubdominio) y después del punto, otra que has elegido del desplegable que salia (en mi caso atwebpages.com). - Ruta del servidor: es de nuevo la dirección de tu web, como el apartado de antes. - En tu FTP has de activar la casilla de ACTIVE o servidor ACTIVO. Sabiendo esas cosas podrás configurar tu FTP sin problema alguno.

Configurar Html-Kit para el nuevo alojamiento Ahora se supone que ya tienes los datos de los que te hablé en la página anterior, nombre de usuario, contraseña, dirección del FTP y además conoces la dirección de tu nueva web. Recuerda que puedes registrarte varias veces, con nombres distintos para crear más de una cuenta y por tanto tener más de una página web, por tanto, olvida usar estas lecciones para crear la página que tienes en la cabeza. Mejor sigue las instrucciones al pie de la letra hasta el final. Pasamos a configurar el Html-Kit para poder subir la página de la lección al nuevo servidor.

Configuración del nuevo Servidor en el Html-Kit Recuerdas cuando creamos la carpeta local para colocar dentro los archivos de la web? Pues vamos a hacer algo muy similar, verás. Abre tu Html-Kit y en la barra de arriba, donde pone Workspace escoge la opción Añadir Carpetas/Servidor FTP > Añadir Servidor FTP, como en la imagen de abajo: Aparece una ventana donde tienes que colocar algunos de los datos que apuntaste, veamos qué datos son y dónde van apuntados.

(1) Aquí pon la dirección de tu FTP. Suele empezar por ftp.nombredelservidor.. pero cada hosting es algo firerente. En la imágen de arriba puedes ver los datos que yo puse para la configuración del Ftp de una cuenta creada en Razy (recomendado para seguir el curso). (2) Aquí se pone el puerto de conexión. 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 números aleatorios, como puedes ver en la imagen. (4) La contraseña o password.

(5) Activa esta casilla si no quieres tener que estar escribiendo la contraseña cada vez que quieras conectar tu Ftp. (6) Es solo el nombre que aparecerá en la ventana Workspace del Html Kit. Pon lo que más te guste. Yo he puesto web-ejemplo-cctw-internet para diferenciarlo de la carpeta local que llamamos webejemplo-cctw-local. Para seguir el ejemplo de este curso haz como yo y así evitarás 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 cuál será la carpeta raiz que se va a mostrar. Lo entenderás con el tiempo, no es muy importante. (8) Passive Mode. Razy pide que se active. Tiene que ver son los puertos que se usan para la conexión. El resto de opciones de esa pestaña y de las otras dos no hace falta tocarlas. Pulsa en OK y seguirmos.

Nuestro nuevo Servidor FTP Ahora podemos ver una nueva carpeta en la ventana de la derecha (ver > Workspace) del Html-Kit. Es esta señalada 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 algún mensaje de "En construcción". Esa página 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, podría ser que: • Tienes en casa un cortafuegos o firewall que impide al HtmlKit conectarse. Tendrás que darle permisos al HtmlKit en tu cortafuegos de windows. • Estas en el trabajo donde seguramente tienen un proxy que impide la conexión de FTPs. Pruebalo entonces desde casa. • Los datos que has colocado no han sido escritos correctamente. A veces copiar y pegar no funciona (pues añade un espacio en blanco al final). Prueba a escribirlo a mano. • Puede que los datos de usuario o contraseña los pusieras con alguna mayúscula y has de escribirlo igual que lo pusiste al registrarte. • Si no logras conectarte verificando estas medidas, pregúntanos.

Subir el index.html de tu página web 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-edi-local". También tenemos el ftp configurado y lo podemos ver en la misma ventana, debajo de la carpeta anterior con un símbolo a su izquierda de color azul. Estos símbolos azules indican que se tratan de carpetas de servidores (archivos en la red) mientras que los amarillos indican que son locales (están en tu ordenador). Ahora vamos a ver cómo nos las ingeniamos para subir los archivos desde nuestro 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"

podrás ver qué archivos hay en tu servidor (hosting) en estos momentos. Dale y verás que aparece un archivo index.html Este archivo index.html es el primero que lee el navegador cuando se teclea la dirección 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.

Cómo borrar archivos Para empezar vamos a borrar ese index.html que nos han colocado por defecto (Ojo, el de la carpeta "web-ejemplo-edi-internet", no vayas a borrar el de la carpeta "web-ejemplo-edi-local"!!). Para ello basta con hacer clic sobre él una vez con el botón derecho del ratón y escoger "Delete..." Te preguntará si estás seguro.. Tenemos ahora el hosting totalmente vacio.

Subir el primer archivo Como sabes, para que la gente vea tu web, los archivos han de estar en el hosting. De nada sirve tenerlos en tu Pc. Por tanto los tenemos que pasar desde la carpeta amarilla "web-ejemplo-edilocal" hasta la carpeta azul "web-ejemplo-edi-internet". Lo ideal sería pinchar desde la carpeta local y arrastrarlos hasta la otra, pero por el momento el Html Kit no nos permite esa opción. Vamos a subir el archivo index.html al hosting. Para ello hacemos clic con el botón derecho del ratón sobre la carpeta "web-ejemplo-edi-internet" y del menú que se abre escogemos la opción "Connect" que significa "Conectar al servidor". Si no te aparece activada es porque ya está conectado: Despues hacemos lo mismo, clic con el botón derecho del ratón y escogemos esta vez la opción "Upload" que significa "Subir": Se abre entonces una ventana donde debemos buscar, dentro de la carpeta donde guardamos los archivos de la web de ejemplo, el archivo index.html (la ruta sería algo así como C:\Documents and Settings\Usuario\Escritorio\mis-paginas-web\web-ejemplo-edi). Selecciona el index.html y pulsa en "Abrir". 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 página web escribiendo en tu navegador la dirección, verás algo parecido a la página web del ejemplo que estamos haciendo. No se ve ni la sonrisa, ni la imagen de fondo, ni el buzón ni se están respetando los estilos css. Por qué puede ser? Este es el error más frecuente al principio y por eso te pido que prestes atención a esto.... Si no subes el archivo correspondiente, no se ven los elementos. Si no se ve el buzón es porque no se ha subido (upload) el archivo del dibujo del buzón. Lo mismo para el fondo. Y si los estilos no se están respetando es porque no se ha subido aún la Hoja de Estilo (estilos.css). En la página siguiente aprendemos a subir el resto de archivos y así arreglamos el problema.

Subir el resto de archivos al servidor Esto es fácil, pues lo acabas de hacer hace un momento con el index, no? Has de seleccionar los archivos uno por uno y hacerles el "Upload". Recuerda: 1.- Conectar con el servidor con botón derecho del ratón sobre la carpeta azul y pulsando en "Connect". 2.- Botón derecho sobre la misma carpeta azul de nuevo y seleccionar "Upload".

3.- Seleccionar un archivo y pulsar en "Abrir". 4.- Lo mismo para el siguiente archivo. Hazlo solo para los archivos estilos.css, estilo-general.css y plantilla.html. A la hora de seleccionar el archivo que quieres subir puedes tener apretada la tecla Shift de tu teclado (la flecha del teclado que hay a la izquierda apuntando hacia arriba) y así podrás seleccionar varios archivos de una sola vez. Verás como no es posible subir la carpeta "objetos". Cuando la seleccionas para subirla en lugar de subirse se abre mostrando sus componentes. Lo que hay que hacer es crear primero la carpeta objetos en el servidor o hosting. Veamos como:

Crear nuevas carpetas Haz clic con el botón derecho del ratón sobre el nombre de la carpeta "web-ejemplo-edi-internet". Selecciona la opción New + Create New Folder. Si no te aparece activa tendrás que conectar primero el Ftp (botón derecho sobre la carpeta y pulsar "Connect", como antes): Se abre una ventanita donde has de ponerle el nombre a la carpeta. Recuerda, es "objetos" (todo en minúsculas) 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 algún 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 después escoger los archivos a subir. Pues dale, a ver si lo consigues...

En definitiva... Ya tenemos los archivos de lo que llevamos hecho de ejemplo en el nuevo hosting. A partir de ahora, cada vez que hagamos algún cambio o mejora en el ejemplo podremos subirlo al servidor (o hosting) para ver como va quedando. Por cierto, si quieres ver tu plantilla.html en tu servidor después de haberla subido, basta con escribir su dirección en tu navegador. Su dirección será la misma que escribes para ver el index, seguido de /plantilla.html Es decir, si tu dirección es http://yo.onlinewebshop.net/ la dirección de la plantilla será http://yo.onlinewebshop.net/plantilla.html

Colocar bordes a la plantilla de nuestra web Vamos a ponerle unos bordes a los lados para mejorar su aspecto. Con los bordes hay que tener mucho cuidado, pues cada navegador interpreta los bordes de un modo distinto y podría estropearnos el aspecto de nuestra página. Imagina un rectángulo. Si le definimos un borde de 10 pixeles de anchura, unos navegadores pintan ese borde por fuera de ese rectángulo, mientras que otros lo pintan por dentro del rectángulo. Al final resulta que los visitantes que vean la web con un tipo de navegador la veran bien, pero otros que usen otros navegadores no

la verán como nosotros queremos. La forma que aquí proponemos es sencilla y procura que la página web se vea idéntica usando cualquier navegador.

Dónde se define un borde Si aún te acuerdas de lo explicado al principio de las lecciones, nos propusimos definir los contenidos en el código html de las páginas dejando la definición del aspecto en la Hoja de Estilo. Como los bordes son más aspectos decorativos que contenidos en sí, vamos a definirlos en la Hoja de Estilo. Así además podremos cambiarlo cuando nos de la gana con solo variar algunos detalles del archivo de estilo en lugar de tener que hacerlo en cada una de las páginas de la web.

Cómo se definen los bordes En la Hoja de Estilos, se define el borde de un elemento (por ejemplo de una capa o div) escribiendo esto entre sus corchetes: border: 1px solid black ; donde 1px es la anchura del borde, solid significa que será una línea continua y black (negro) será el color que queremos que tenga la línea de borde. Hay otras formas de definir el borde, pero para el ejemplo nos basta con saber esto. La línea anterior crea por tanto un borde de 1 pixel de ancho, con una línea continua de color negro por arriba, abajo y por los lados del elemento al que se lo apliquemos. Pero en ocasiones quizas prefiramos dibujar el borde solo por uno de los lados dejando sin borde los otros. Cómo podríamos hacer esto?

Dibujar el borde solo por algunos lados Para dibujar el borde solo por un lado, se pone esta línea en lugar de la anterior: border-top: black 1px solid (dibuja el borde solo por arriba) border-bottom: black 1px solid (dibuja el borde solo por abajo) border-left: black 1px solid (dibuja el borde solo por la izquierda) border-right: black 1px solid (dibuja el borde solo por derecha) Si queremos dibujar el borde por varios lados pero no por los cuatro, basta con escribir (entre los corchetes del elemento al que se lo queremos aplicar) las líneas anteriores que queramos, separadas por punto y coma ";".

Veamos un ejemplo de aplicación de bordes Para practicar, vamos a dibujar algunos bordes en el ejemplo que llevamos hecho. Abre tu Html Kit y abre el archivo estilo-general.css Ahora, dentro de los corchetes del elemento "contenido" escribe esto de abajo para dibujar un borde a la izquierda y un borde a la derecha: contenido { ....lo que ya había .......... ; border-left: black 1px solid ; border-right: black 1px solid } Si ahora guardas la Hoja de Estilo estilo-general.css y haces vista previa en el archivo plantilla.html podrás ver como aparecen bordes negros a los lados de la capa "contenidos".

Problema con los distintos navegadores El objetivo de toda página web es que se vea identicamente en cualquier navegador. Con lo que llevamos hecho en el ejemplo ya podemos observar un fallo. Acabo de descubrir una regla: "Si defines un borde en un elemento, ese elemento no puede llevar también definido un ancho concreto mediante el width, es decir, no le podemos asignar una cantidad numérica, solamente se le puede definir width:auto". Si no seguimos esta regla, la web no se verá bien en todos los navegadores!" Para arreglar esto basta con eliminar la cifra de la anchura para la capa "contenido". Realmente no va a ser un problema eliminar ese width:800px, pues la anchura ya está definida por la capa que contiene a contenido (global), así que eliminamos width:800px de la capa contenidos en estilogeneral.css la guardamos y hacemos vista previa para ver que ha ocurrido. Vaya, más problemas.... ahora resulta que en Internet Explorer se ve bien, pero con el Opera se nos estropea la estructura... Esto lo arreglamos ahora mismo eliminando en la definición de estilo de la capa contenido la propiedad float:left que en realidad no nos hacía mucha falta. Ahora sí que se ve correctamente en todos los navegadores.

Bordes para el resto de capas Bueno, ahora que vemos que esto del borde funciona, vamos a ponerle borde a otras capas, recordando por supuesto la regla anterior que decía... "Si la capa tiene definida una cantidad numérica para el width, no podemos definirle el borde o se deformará la capa un poco". Ahora vamos a ir colocando bordes a varias de las capas de la plantilla, teniendo en cuenta que cuando tenemos una capa encima de otra, si le ponemos un borde inferior a la de arriba, no será necesario ponerle borde superior a la de abajo (pues le vale el borde inferior de la de encima... se entiende esto?...). A la capa o div llamada navegacion le vamos a poner borde por lo cuatro costados (por arriba, abajo , izquierda y derecha), que como ya sabemos, se hace añadiendo esto de abajo entre los corchetes de la Hoja de Estilo estilo-general.css: border: black 1px solid quedando esa línea así en la Hoja de Estilo: #navegacion {background-color: pink ; border: black 1px solid } Si ahora le pusieramos borde a la capa de arriba del todo (cabecera) por los cuatro costados, nos aparecería un borde de 2 pixeles entre esa capa y la capa navegacion, (1 pixel definido en la capa navegacion más otro pixel definido para la capa cabecera). Por tanto y para no tener unos bordes más gruesos que otros, a la capa cabecera le vamos a definir el borde solamente por ariba y por los lados. Esto, como ya sabes, se hace así: #cabecera { background-color: pink ; border-left: black 1px solid ; border-right: black 1px solid ; border-top: black 1px solid } Ahora vamos con la capa pie. Vamos a definirle un borde por los cuatro costados de este modo: #pie {background-color: brown ; border: black 1px solid } Y con esto quedan todas la capas bordeadas. Ya sabes usar los bordes y la página tiene mejor pinta. En adelante la mejoraremos aún más hasta que quede totalmente profesional... Recuerda que cuando hacemos un cambio en los archivos de nuestra página web, estos cambios solo están 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 seguirían viendo la versión antigua. Por tanto, los archivos que tenemos que subir son: • plantilla.html • estilo-general.css Para subir los archivos plantilla.html y estilo-general.css basta con hacer clic con el botón derecho del ratón sobre la carpeta azul web-ejemplo-edi-internet, escoger la opción "connect" para conectar el FTP al servidor, depués hacer clic de nuevo sobre el mismo sitio y escoger la opción "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 existía, te dirá que ya existe y te pregunta si lo quieres sobreescribir. Dile que sí y listo, archivo actualizado.

Cómo colocar el logotipo con enlace en la web Ya se que aún es pronto para que tengais el banner o logotipo de la web listo, pues seguramente aún nisiquiera tienes claro de qué va a tratar, pero vamos a explicar cómo insertar el logo en la parte superior y cómo colocarle un enlace para que al hacer clic sobre él se dirija al visitante a la página principal. Cuando más adelante tengas el banner o logotipo terminado solo tendrás que sustituir uno por otro. En cualquier caso, te recuerdo que este ejemplo que estamos "fabricando" debes seguirlo al pie de la letra para no perderte en ningún paso. Bien, vamos a partir de un banner genial, el de EDI. Imagino que ya sabes copiar y pegar imagenes desde una web, verdad? Pues copiate este banner que dejo abajo y pégalo dentro de tu carpeta objetos para seguir.

Ahora que lo has pegado en tu carpeta objetos, cambiale el nombre. Ha de llamarse logotipo.gif Este logotipo.gif lo vamos a situar en la parte superior de cada una de las páginas, por lo que la capa correspondiente será el div llamado cabecera. Para facilitar la colocación de los elementos que pongamos en la cabecera, que mejor que crear dos divisiones dentro de ese espacio o capa. Así, será más fácil colocar el logotipo a la izquierda y dejar un espacio a la derecha, en otro div, para en un futuro colocar una foto o quien sabe, quizás publicidad para ganar algo de dinero extra y pagarnos el hosting de la web, no? Pues según 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 código para cambiar esta línea (te recuerdo que los códigos Html los escribo en azul y los de la hoja de estilos en verde): Bienvenidos a mi Web

por estas otras:

Bienvenidos a mi Web

Como ves, hemos metido las dos capas nuevas dentro de la capa cabecera, y hemos quitado el mensaje de Bievenida de la capa cabecera para colocarlo directamente dentro de la capa publicidad, por poner algo mientras en ella. Ahora toca colocar dentro el logotipo. Escribimos la línea de la imagen dentro del div logotipo, quedando esa línea de este modo:



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 añadimos esto (le he puesto colores de fondo para ver donde está cada una): #logotipo {background-color: brown} #publicidad {background-color: pink}

Para guardar un cierto orden, incluye esas dos lineas justo después de la definición de la capa cabecera de la hoja de estilo. Así, en orden, nos será más fácil encontrarlo todo. Bien. Qué propiedades le damos a estas dos capas? Para empezar habría que definirles la anchura. En principio le daremos un ancho de 280 pixeles a logotipo, pues es un poco más que lo que ocupa la imagen (270px). A publicidad le daremos el resto, es decir, 800-280-2=518 pixeles. (ese 2 es un pixel del borde izquierdo más otro pixel de grosor del lado derecho de esa capa, pues los grosores también ocupan un espacio). #logotipo {background-color: brown ; width:280px} #publicidad {background-color: pink ; width:518px}

Guardando la hoja de estilos y haciendo vista previa vemos que realmente estas dos capas están una encima de otra. Cómo se evitaba esto ? Venga, haz memoria... qué propiedad permite que podamos poner una a un lado y la otra al otro lado? Vamos a ponerle float:left a logotipo para colocarlo a la izquierda y float:right a publicidad para mandarla a la derecha. #logotipo {background-color: brown ; width:280px ; float:left } #publicidad {background-color: pink ; width:518px ; float:right }

Vamos a darle una altura concreta a la capa cabecera, por ejemplo de 85 pixeles (un poquito más que la altura del logotipo que es 80px). Así la capa gris que vemos que se mete dentro del espacio de publicidad respetará esa dimensión. 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 quizás hacer el tamaño de letra algo mayor (esto del tamaño de letra lo vemos luego). Modificamos en la hoja de estilos la capa publicidad para dejarla así: #publicidad {background-color: pink; width:518px ; float:right ; margintop:25px}

Ahora, si guardas la hoja de estilo y haces vista previa sí que se ve realmente bien. Ya pudes eliminarle los background-color a las capas logotipo y publicidad, pues ya no necesitamos esos colores para saber dónde acaba cada una. Tras eliminar eso vuelve a guardar la hoja de estilo. Solo nos queda ponerle el enlace hacia la página principal.



le añades esto que marco en negrita:



Colocar el menú horizontal en enlace en la web Aunque más adelante veremos como crear menús más complicados en la parte superior, vamos a comenzar por uno sencillo e ir cogiendo base. 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 más o menos claro cómo vas a estructurar esos contenidos. Es decir, desglosar lo que quieres contar en secciones y subsecciones. De ese modo sabrás qué secciones vas a colocar en el menú superior. A la hora de crear la web, colocarías las secciones en el menú horizontal superior y al hacer clic sobre cada una de esas secciones, se abriría la página principal de esa sección mostrando en el menú 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 cultura. Las secciones que se me ocurren son, "Presentación", "Literatura", "Historia", "Arte" y "Ciencia". Luego, cada una de esas secciones principales pueden desglosarse o dividirse en otras subsecciones. Por ejemplo, en la sección "Historia" podrían aparecer las subsecciones "España", "Europa"...."Mundial". La sección Ciencia podría dividir se "Ingenieria", "Medicina", "Informática", "Física".... 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.

Creando el Menú Horizontal El menú horizontal lo vamos a colocar en la capa que hemos llamado navegacion. Es esa capa gris horizontal que hay debajo del logotipo. Así que, como imaginarás, tendremos que retocar un poco el html de la plantilla y luego colocar las propiedades apropiadas en la hoja de estilo para la capa navegacion.

Colocando el Html para el menú Como siempre, abre la plantilla.html con tu Html-Kit. Ve a la vista de código y encontrarás la línea de la capa navegacion: Barra de Navegación

Borraremos las palabras Barra de Navegación y las sustituiremos por una lista, en la que cada elemento será un enlace del menú. Las listas en Html empiezan con un

y terminan con un

. Dentro de una lista cada elemento de la misma empieza por un

y termina con un

La lista completa con los enlaces sería algo así:

• Sección 1



• Sección 2
• Sección 3
• Sección 4

Pues ese es el código Html que tenemos que poner dentro de la capa navegación, eliminando claro el texto que tenía de "Barra de Navegación" quedando al final así:

• Sección 1
• Sección 2
• Sección 3
• Sección 4

Cuando hagas tus experimentos y quieras añadir o eliminar enlaces en el menú horizontal, solo tendrás que irte a la plantilla.html y añadir o eliminar líneas

Sección X

a este trozo de código de arriba. 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 mágica adecuada en la hoja de estilos. Abre el archivo estilo.general.css con el Html-Kit y vamos a modificar la línea de la capa navegacion, que hasta este momento era así: #navegacion {background-color: gray ; border: black 1px solid }

Para empezar vamos a intentar que todos los elementos de este menu de navegación aparezcan uno al lado de otro, en línea. Para ello usaremos la propiedad float, que hace que los elementos floten y se desplacen hacia el lado que queramos. Si a definimos que todos los elementos floten hacia la 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 lógico pensar que en la hoja de estilo hay que ponérselo a los li que haya dentro de la capa navegacion (hay que evitar que los li de la otra capa del menú lateral tomen esa propiedad), así que añadiriamos esta otra línea en la hoja estilo-general.css: #navegacion li {float:left}

Vamos a colocarle height:20px a la capa navegacion (no a #navegacion li {...., sino a #navegacion {.... ) y veamos que pasa: #navegacion {background-color: gray ; border: black 1px solid ; height:20px}

Eliminar el punto negro del menú Horizontal Para eliminar ese puntito tan molesto, hay que ponerle la propiedad list-style:none a alguna de las líneas de la hoja de estilo. A cuál crees que hay que ponérsela? Pues por ejemplo a la línea #navegacion li, pues esa línea contiene las propiedades de cada una de las secciones del menú, verdad? Vamos a ver que pasa. Añade esto: #navegacion li {float:left ; list-style:none }

Acomodando el margen de los enlaces del menú horizontal A estas alturas ya debes saber como retocar los margenes para que en lugar de aparecer todos los enlaces del menú horizontal tan pegados se muestren un poco más separados. Imagino que sospechas que eso se hace o bien con el margin o bien con el padding. Vamos a intentar separar cada enlace del menú. Para ello le pondremos un margin al los elementos li de la capa navegacion. #navegacion li {float:left ; list-style:none ; margin: 0px 10px 0px 10px }

Si recuerdas, el orden de esas cifras era: la primera cifra para el margen superior, la segunda para el de la derecha, la tercera para el margen inferior y la última para el de la izquierda. Según la línea de arriba, hemos dejado unos margenes de 10 pixeles por la izquierda y derecha de cada enlace del menú. Parece un poco escaso. Vamos a cambiar los dos 10px por 20px para aumentar la separación entre ellos.

Dando margen al conjunto de enlaces Hemos visto como separar los enlaces entre ellos, pero aún podemos dejarlo mejor si los centramos, no? Como no consigo centrarlos fácilmente vamos a hacerlo de otro modo. Vamos a colocarle un margen a la capa navegacion ul por la izquierda de unos 50px. Con eso conseguimos mover a la derecha todo el grupo de enlaces. La nueva línea de css que hay que poner a la hoja de estilos es esta: #navegacion ul { margin-left: 50px }

Como ves, hemos desplazado todos los enlaces un poco (50 pixeles) a la derecha. Vamos a aumentarlo a 180px para que quede más centrado. Ya sabes que cuando hagas tus propios experimentos basados en este ejemplo, si añades más enlaces a este menú horizontal tendrás que disminuir estas cantidades para centrarlo.

Colocando enlaces al menú Solo nos falta ya colocarle los enlaces a los elementos del menú. Eso si que debes saberlo ya, pero lo repetimos para recordarlo. Como aún no sabemos a qué página mandar al visitante cuando hagan clic en ellos, en lugar de ponerle la ruta de la página destino le colocaremos un simple #. Eso hace que los enlaces se muestren como tales, pero al pulsar sobre ellos no te mandan a ningún lado. Para convertir los elementos de la lista del menú horizontal en enlaces, basta con colocarle esto:

• Sección
• Sección
• Sección
• Sección

1 2 3 4

Fíjate 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 ratón sobre ellos aparecen con fondo gris claro y con línea 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. Más 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 página web.

Retocando los códigos El código Html completo del menú lateral era por el momento este:

• Enlace 1
• Enlace 2
• Enlace 3

Bueno, realmente es ese pero todas las líneas entre

y

han de estar seguidas una justo después de la otra para que el internet explorer muestre bien el menú. Yo aquí lo escribo en líneas separadas para que se vea más claro, pero acuérdate de luego guardar la plantilla con todas esas líneas seguidas. Le vamos a poner un título al menú. Como cada sección tendrá su propio menú parece buena idea que ese título sea el nombre de esa sección. Así, si una sección se llama "poesias", por ejemplo, pondremos la palabra "Poesias" arriba del todo del menú, como si fuera un título, y al elemento título (h1) le colocaremos ese fondo corto. Y todo arreglado. De modo que, lo único que hemos de retocar en el código Html de la plantilla.html será el incluir el título. Si recuerdas de lecciones anteriores, los títulos se escriben igual que los párrafos, pero en lugar de usar las etiquetas

y

se usaban estas otras, y (es un uno, no una ele!). El menú anterior con el título puesto quedaría entonces con este código Html:

Título de Sección 1
• Enlace 1
• Enlace 2
• Enlace 3

El problema que se nos presenta es que nosotros ya habíamos definido unas características para los párrafos tipo h1, por lo que ahora si las cambiamos, también cambian las propiedades de los títulos que en un futuro pongamos en el contenido de la página. Esto se supone que sabemos arreglaro. Queremos definir unas propiedades para los títulos del tipo h1, pero solo para los que están dentro del menú, es decir, los que pertenecen a la capa menu. Abre el archivo estilo-general e incluye esta línea, por ejemplo, debajo de la línea donde definimos la capa menu, así seguiremos cierto orden. #menu h1 {}

Con esa línea lo que conseguimos es darla propiedades SOLO a los títulos que hay dentro de la capa menu, sin tocar para nada los demás. Solo un problema, y es que como los navegadores leen desde arriba hacia abajo. Bien, pues si miras en la hoja de estilo-general.css, verás que tenemos al final del todo esta línea: h1 {font-size: 1.2em; color:blue ; font-weight: bold ; text-decoration: underline ; text-align: center}

Al estar al final, y estar definiendo propiedades para todos los h1 de la web, son esas las características que mandan y será inutil darle otras propiedades en la línea nueva que hemos puesto.

Por qué? Pues porque ésta línea está después. Cómo lo arreglamos? Fácil, la situamos antes de la otra y listo. Para no perdernos, te dejo la hoja de estilo-general.css tal y como ha de estar ahora mismo, después de haber incluido (aunque aún vacia) la línea para definir los títutlos de dentro de la capa menu. Comparala con la que tienes por el momento y si no está igual, sustituyela. Debe tener ese orden para no liarnos lecciones sucesivas: * {text-indent:0px ; margin:0px ; padding:0px ; border:0px} p {text-align: justify} h1 {font-size: 1.2em; color:blue ; font-weight: bold ; text-decoration: underline ; text-align: center} h2 {font.size: 1.1em; color:blue ; font-weight: bold ; text-decoration: none ; text-align: center} body {text-align: center } #global {width:800px ; margin:4px auto } #cabecera {background-color: white ; border-left: black 1px solid ; border-right: black 1px solid ; height:85px} #logotipo {width:280px ; float:left } #publicidad {width:518px ; float:right ; margin-top:25px ; font-size: 16px } #navegacion {background-color: gray ; border: black 1px solid ; height:20px} #navegacion li {float:left ; list-style:none ; margin: 0px 20px 0px 20px } #navegacion ul { margin-left: 180px } #contenido {background-color: orange ; border-left: black 1px solid ; border-right: black 1px solid } #contenido p {margin: 5px 10px 0px 10px ; text-indent: 15px} #menu {background-color: yellow ; width: 150px ; float:left ; text-align:left ; margin: 3px 10px 3px 3px } #menu li {list-style:none ; margin: 4px 0px 4px 6px } #menu h1 {} #pie { background-color: white ; border-left: black 1px solid ; border-right: black 1px solid; border-top: black 1px solid } a {color: brown ; text-decoration:none ; display: block } a:link {} a:visited {} a:hover {color:red ; text-decoration:underline ; background-color: silver} a:active {}

Si te fijas, he puesto casi arriba del todo las líneas que definen p, h1 y h2. Recuerda además que la línea del asterisco ha de estar 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 estén definidas antes que ella. Es por lo mismo que acabo de explicarte. Pronto, con un poco de práctica estos códigos no tendrán 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ú Bueno, quizás quede mejor sin el subrayado y con una letra más pequeña, verdad? Para eliminarle el subrayado se ponia en la hoja de estilo esto: text-decoration:none

Para cambiar el tamaño del texto se pone esto otro: font-size:10px

donde 10px es la altura de una letra en pixeles. Hay otras unidades que podemos usar en lugar de pixeles, pero lo veremos más adelante. El caso es que la línea de estilo-general.css que define a los títulos de dentro de la capa menu ha de quedar, por el momento así: #menu h1 {text-decoration:none ; font-size:10px}

Últimos Retoques Fíjate ahora. Abre tu plantilla.html con el Html-Kit si la tienes cerrada y añade un tercer enlace al menú. Ya sabes, después de la línea del Enlace 3, pones una idéntica y le cambias el número 3 por el 4, es decir, añades esto:

• Enlace
• Enlace
• Enlace
• Enlace

#menu li

1 2 3 4

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

Por cierto. Quizás no veas bien los acentos en tu web cuando la subas al sevidor. En ese caso no olvides insertar esta línea de código entre y :

Toma nota e insertalo en todas las páginas que hagas, siempre que en ellas se usen acentos.

Recordando el código que llevamos hasta el momento Si te has fijado, si no sigues al pie de la letra las explicaciones y se te ocurre crear alguna capa más, alguna capa menos, otros textos, otros párrafos etc distintos a lo que aqui te comento lo único que conseguirás es perderte, pues cuando más adelante te diga "en el párrafo donde pone Bienvenido haz esto y lo otro" no sabrás a qué me refiero. Es por eso que debes seguir todo esto al pie de la letra, sin improvisar nada, sin cambiar nada de nada de nada. Claro que por el camino se te van a ocurrir ideas propias e incluso vas a querer ir remodelando lo que yo te explico para que el ejemplo se vaya pareciendo a tu idea de web, pero eso es algo que puedes hacer a la par, pero en otra carpeta distinta, de modo que la del ejemplo de estas explicaciones quede tal cual la explico. En otra carpeta puedes hacerlo a tu manera y de hecho, es lo que deberías estar haciendo ya para ir asentando lo que aprendes y para ir ensayando etc.

Código Html de la plantilla.html

Page title



Bienvenidos a mi Web

• Sección 1
• Sección 2
• Sección 3

Título de Sección 1

• Enlace 1
• Enlace 2
• Enlace 3
• Enlace 4

Esta será la zona principal de la web

Este es mi segundo párrafo. Acabo de poner un punto y en cambio sigue siendo un párrafo pues no le he colocado aún la etiqueta de cierre. Voy a ponersela justo aquí.

Y este es el tercer párrafo.

En pocas lecciones aprenderé a darle margenes para separarlos unos de otros, e incluso hacerles sanguias por la izquierda a la primera línea, que queda mucho mejor.

Anda, fijate! Salen todos centrados, que cosa. Espero que Jorgens nos enseñe a ponerlos alineados a la izquierda, o justificados. Así esto parece una poesia! je je je.

Este es el pié de página



Código CSS de estilo-general.css * {text-indent:0px ; margin:0px ; padding:0px ; border:0px} p {text-align: justify} h1 {font-size: 1.2em; color:blue ; font-weight: bold ; text-decoration: underline ; text-align: center} h2 {font.size: 1.1em; color:blue ; font-weight: bold ; text-decoration: none ; text-align: center} body {text-align: center } #global {width:800px ; margin:4px auto } #cabecera {background-color: white ; border-left: black 1px solid ; border-right: black 1px solid ; height:85px}

#logotipo #publicidad #navegacion #navegacion #navegacion #contenido

{width:280px ; float:left } {width:518px ; float:right ; margin-top:25px ; font-size: 16px } {background-color: gray ; border: black 1px solid ; height:20px} li {float:left ; list-style:none ; margin: 0px 20px 0px 20px } ul { margin-left: 180px } {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 } a {color: brown ; text-decoration:none ; display: block } a:link {} a:visited {} a:hover {color:red ; text-decoration:underline ; background-color: silver} a:active {}

El pie de página de nuestra web Ves como poco a poco esto va tomando forma Ha llegado el momento de meterle mano al pie de página. 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 página), a una página desde donde puedan contactarnos (muy útil para conocer siempre el punto de vista del visitante), otro enlace hacia una página de enlaces (que usaremos a la hora de darnos de alta en directorios) y también por qué no, unos enlaces al futuro foro, top y directorio de nuestra web (todo eso lo aprenderemos más adelante). 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.

Dónde va el pie de página? Como bien habrás adivinado el pie de página lo vamos a colocar dentro de la capa #pie. Este es su código en la plantilla.html en estos momentos: Este es el pié de página

Cuando quiero colocar varias capas que están juntas horizontalmente (una justo al lado de la otra) siempre las pongo dentro de otra capa que las engloba. Así me es más fácil aplicarle luego los estilos y queda todo más recogido. Como en este caso quiero crear tres huecos rectangulares, y todos uno al lado del otro, crearé tres capas, una para los enlaces de la izquierda, otra para el espacio central que en principio usaremos para poner publicidad y otra para los enlaces de la derecha. Esas tres capas las voy a meter dentro de la capa #pie. Los nombres que les voy a dar son, #pieuno #piedos y #pietres así que ahora mismo, las escribo en el código de la plantilla.html y coloco una palabrita dentro para ver como van quedando cuando haga vista previa. Ha de quedar así en la plantilla.html (fíjate que borro el texto "Este es el pié de página" que había antes):

pie uno pie dos pie tres

Colocar las capas en línea Como era de esperar, nos ha pasado como cuando hicimos lo del logotipo. En lugar de aparecer una capa junto a la otra nos han salido una debajo de otra. Recuerdas como arreglamos esto la otra vez? Lo arreglamos colocándole un float:left a cada capa. Así que abrimos la hoja de estilos estilogeneral.css y definimos esas tres capas colocándole un color de fondo para ver bien dónde empieza y dónde termina cada una (te coloco también las líneas de antes y después para que veas donde añadir estas líneas, como verás las he colocado justo después de la capa #pie, por guardar un orden) #pie

{border-left:

black 1px solid ;

border-right: black 1px solid ; border-top: black 1px solid ; } #pieuno {background-color: brown ; float:left} #piedos {background-color: green ; float:left} #pietres {background-color: red ; float:left} #curva-inferior { background-image: url(objetos/curva-infe..... ...............

Ya se van colocando en su sitio. No te preocupes por los colores, en cuanto tengamos el pie listo le pondremos otros.. Ahora les daremos dimensiones de anchura colocándoles un width. Le vamos a dar un valor a #pieuno y #pietres de por ejemplo 150px y a la #piedos el resto, que serán unos... 800px - 2px (del borde izquierdo y derecho) -150px - 150px (de las otras dos capas) = 498pixeles. A ver que sale con esto...: #pieuno {background-color: brown ; float:left ; width:150px } #piedos {background-color: green ; float:left ; width:498px } #pietres {background-color: red ; float:left ; width:150px }

Dónde está la capa #pie? Que habrá pasado con el borde? Pues te lo explico. En teoría, como las tres nuevas capas están dentro de la otra capa llamada #pie, debería 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. Los bordes de la capa #pie sí que están dibujados. Lo que ocurre es que cuando una capa no tiene ningún contenido, la altura que toma es cero y por tanto en lugar de ser un rectángulo se queda como una línea. Pero... la capa #pie sí que tiene contenido, ni más 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 están flotando sobre la capa #pie por lo que es como si #pie no tuviera ningún contenido. Pero dónde está entonces la capa #pie y sus bordes? Pues están justo encima de las tres nuevas capas. Ves esa línea negra fina que va por la parte de arriba de las tres capas, esa línea es la capa #pie. Como no tiene ningún contenido dentro, su altura es 1px y por eso tiene forma de línea. Te señalo la capa #pie en el dibujo para que lo veas más claro:

Esa línea 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 imágen o una capa siempre que no tenga un float". Pero si no te interesa colocarle nada que no sea una capa con float aún nos queda una opción y es definirle nosotros la altura. 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. Más tarde podremos retocar esa cantidad para amoldarla a nuestro gusto. Quedaría así la capa #pie : #pie { background-color: white ;

border-left: black 1px solid ; border-right: black 1px solid ; border-top: black 1px solid ; height: 65px ; }

Haciendo vista previa vemos que hemos conseguido esto:

Las tres capas #pieuno, #piedos y #pietres ahora parecen estar dentro, aunque realmente están "flotando dentro". Siguen sin ser contenido de la capa #pie, pero al darle altura ocupa el espacio que necesitábamos y queda pintado el borde como queríamos. Parece un poco complicado, pero en realidad son solo unos pocos trucos los que necesitamos conocer. 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, ocuparán 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 añadamos el contenido a cada una iran llenando todo ese lugar.

Bordes para separar las tres capas Vamos a separar visualmente las tres capas dibujándoles un borde. Los bordes si que debes ya saber colocarlos, verdad? De todas formas te ayudo. La verdad es que para separarlas solo necesitamos una sola línea de borde entre las capas #pieuno y #piedos y otra entre las capas #piedos y #pietres, de modo que el código de esas tres capas quedaría así: #pieuno

{background-color: brown ; float:left ; width:150px ; border-right: black 1px solid } #piedos {background-color: green ; float:left ; width:498px } #pietres {background-color: red ; float:left ; width:150px ; border-left: black 1px solid }

Con eso hemos puesto un borde por la derecha de la capa #pieuno y otra por la izquierda de la capa #pietres. Lo mismo hubiéramos conseguido colocando borde a ambos lados de la capa #piedos o cualquier otra combinación. Ahora que has visto de nuevo cómo colocar bordes, vamos a quitárselos pues el efecto no queda del todo bien. Como ejercicio de repaso te propongo algo, a ver si lo consigues.

Ejercicio de práctica Como ejercicio de prácticas, intenta hacer que tanto el fondo de #pieuno como el de #pietres sean blancos, que el fondo de #piedos sea gris claro (silver) y elimina los bordes que dejamos antes. Así terminarás de familiarizarte con todo esto. El código 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. #pie

{border-left:

black 1px solid ; border-right: black 1px solid ;

border-top: black 1px solid ; height: 65px } #pieuno {float:left ; width:150px } #piedos {float:left ; width:498px ; background-color: silver} #pietres {float:left ; width:150px }

Cómo colocar los enlaces del pie Los enlaces ya vimos como se colocaban cuando hicimos los menús. En este caso van a ser tres enlaces en la capa #pieuno y otros tres en la capa #piedos colocados uno encima de otro. Como eso parece una lista, lo mejor es usar una lista para ello. Dentro del código Html de la plantilla.html, en la parte correspondiente a la capa #pieuno coloca esto:

• Foro Ejemplo
• Contactos
• Nos Enlazan

Y haz lo mismo con el Html de la capa #pietres con este otro código:

• Directorio
• TopSite
• Mapa de la Web

Ya puedes imaginarte un poco cómo debemos arreglarlo para reducir un poco el espacio que hay entre ellos, eliminarles el punto negro de la izquierda y reducirles un poco el tamaño de la letra.

Cómo eliminar el punto negro a las listas? Basta con poner list-style:none en el lugar adecuado de la hoja de estilos estilo-general.css, pero veamos qué posibilidades tenemos. La primera puede ser incluir ese código dentro de la primera línea de la hoja de estilos, aquella que comienza con un asterisco *. Como recordarás el asterisco representa a todos los elementos por lo que si escribimos ese código dentro de sus llaves estaremos diciendo que todos los elementos de la web han de aparecer sin ese puntito. Lo bueno de esta opción es que con solo eso ya no tenemos que preocuparnos más en los dichosos puntos. Lo malo? Que si alguna vez queremos hacer una lista con sus puntos, por ejemplo alguna vez en el contenido de la web, vamos a encontrarnos con que el punto no aparece. Así que desechamos esta opción. La segunda opción es poner ese código 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 líneas más de codigo css. La tercera opción es sencilla también, y es colocar ese código en una nueva línea que indique que todas las listas de dentro de la capa #pie han de salir sin esos puntos. Esa tercera opción se consigue con esta nueva línea, que vamos a colocar por seguir un orden justo después de la línea de la capa #pie. .............

#pie

{border-left: black 1px solid ; border-right: black 1px solid ; border-top: black 1px solid ; height: 65px } #pie li {list-style: none } #pieuno {float:left ; width:150px } .............

Cómo ponerle el tamaño de letra algo menor a esas listas Para definir el tamaño de letra se usaba font-size, asi que en esa misma linea que hemos creado indicamos un tamaño de 12px de este modo: #pie li

{list-style: none ; font-size: 12px }

Si te fijas en la vista previa, verás como todos los textos del pie son ahora menores, menos el texto de la capa #piedos. Esto es lógico, pues el texto "pie dos" no pertenece a un elemento de lista (li) y por tanto el estilo definido no le afecta para nada.

Aminorar la distancia de separación entre los elementos de las listas Es curioso, pues aunque en la hoja de estilo le habiamos indicado al navegador que pusiera todos los margenes a cero (con la famosa línea del asterisco) ahora nos encontramos con un margen en esa lista y además bastante grande (al menos usando el Internet Explorer). Vamos a probar el truco aquel que te conté, el de poner todo el código html de la lista en la misma línea, recuerdas? Ha de quedar así:

• Foro Ejemplo
• Contactos
• ....

Y lo mismo para la otra lista, la de la capa #pietres.

• Directorio
• TopSite
• 
  
  2.- Ahora creamos este otro archivo y lo nombramos comun-01.txt:

  EDI

  Parece que funciona!

  
  
  3.- Guarda ambos archivos en la raiz de la carpeta de tu web y súbelos a tu servidor para ver si funciona. 4.- Para verificarlo abre tu navegador estando conectado a internet y escribe la dirección completa de tu página web seguido de /test-01.html (y sin poner index.html). Si aparece la palabra "EDI" en esa pagina que se abre significa que puedes usar este método, enhorabuena! Si no aparece ninguna página sino un mensaje de error significa que no lo hemos hecho bien, de modo que aún hay esperanza. Si en cambio aparece la frase del "Vamos a ver" pero no la palabra "Estupendo" debajo.... entonces no hay nada que hacer y tienes que tomar alguna de las demás opciones que te explico debajo.
  
  Ventajas del Include La ventaja salta a la vista. Si incluyes todo el código html de por ejemplo un menú dentro de un archivo llamado menu.txt, cuando más adelante quieras hacer algún cambio como añadir otra sección más, o lo que sea, solo tendrás que modificar ese archivo y subirlo al servidor. Realmente se le puede poner la extensión que queramos a esos archivos. Nosotros le hemos puesto extensión txt para que nos sea más fácil abrirlo y retocarlo, pero le puedes poner extensión .php, o .html o .edi si lo deseas.
  
  Librerias para partes comunes de tu web Por el momento, el único programa de diseño web que permite crear elementos de librería en los que definir fragmentos de código html pertenecientes a elementos o partes que van a repetirse en varias páginas de una web es el Dreamweaver.
  
  Si no estás usando ese programa no es necesario que sigas leyendo, pues no te va a servir de mucho. De todas formas seguro que puedes aprovechar el resto de alternativas que te propongo. Se trata de lo siguiente. Cuando tengas partes que van a repetirse en varias de las páginas de tu web, como el menú de navegación, la cabecera, el pie de página o incluso la publicidad de tu web, basta con crear un elemento de libreria y colocar el código html correspondiente dentro. Después tan solo tienes que ir creando el resto de páginas y cuando toque poner el código html de ese elemento de libreria, en lugar de escribirlo de nuevo, simplemente pegas el elemento. Lo bueno de esto es que si un día quieres modificar esa parte, basta con abrir el elemento de libreria y hacer los cambios que quieras. Al guardarlo el Dreamweaver te pregunta si deseas actualizar las páginas que leen ese elemento y tras decirle que sí, modifica todas las páginas que lo contienen en tan solo un par de segundos. Luego solo tienes que subir a tu servidor o hosting todas esas páginas y listo, solucionado el problema de modificar una a una todas las páginas de tu web cada vez que haces un cambio.
  
  Cómo Usar las Librerias o Bibliotecas de Dreamweaver? En el artículo Reemplazar hemos visto una utilidad para evitar tener que reescribir una y otra vez lo mismo en distintas páginas de una web, pero aún tenemos algo más profesional en el Dreamweaver, las Librerias o Bibliotecas. Para entendernos, una Libreria en Dreamweaver no es más que una carpeta que se va a crear dentro de la carpeta de vuestra web, llamada Library. En ella se van guardando automáticamente todos los elementos de libreria que vamos creando.
  
  Y qué es un elemento de libreria? Pues sencillamente un archivo (con extensión .lbi) que guarda un fragmento de código HTML que seguramente se repita en varias páginas y que cambiaremos con cierta frecuencia. Puede ser una línea de código o un montón de ellas. Puede incluir un logotipo, un menú, cualquier cosa.
  
  Para que sirve un elemento de Libreria? Si vamos a tener un fragmento o parte de código HTML que se va a repetir en varias páginas (como un menú, la publicidad, el contador, el logotipo de la web...) y que puede que algún día cambiemos, es bueno guardar ese trozo de código dentro de un elemento de libreria. De ese modo, si queremos cambiarlo solo hay que variar ese archivo y al guardarlo el Dreamweaver nos preguntará si deseamos actualizar todas las páginas que lo tienen como referencia.
  
  Cómo se crea un elemento de Libreria? En primer lugar hemos de decidir qué trozo de código queremos incluir en el elemento de libreria. Lo mejor es hacerlo con elementos completos, es decir, todo el código de una celda de una tabla (desde hasta , o desde hasta o desde hasta ....), o todo el contenido de un DIV concreto (desde