You are on page 1of 162

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:
<html> (todas empiezan con esto)
</html> (todas terminan con esto otro)

En adelante, siempre que escriba código HTML lo haré de este modo, de color azul. La primera
palabra <html> indica que ahí empieza el código de la web. La segunda </html> 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:
<html>
<head>
</head>
<body>
</body>
</html>

En Html, se indica que va a empezar la cabecera con la palabra <head> y termina con la misma
palabra pero colocandole la contrabarra, </head> tal y como hemos visto que pasaba para cerrar
</html>. Lo mismo podemos decir del cuerpo, que comienza con <body> y termina con </body>.
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):
<html>
<head>
<title>TITULO</title>
</head>
<body>
</body>
</html>

Como siempre, empieza por la palabra <title> y termina con la misma pero con la contrabarra
delante, es decir, con </title>. 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 "web-
ejemplo-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 <body> y </body> 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 <html> seguido de la cabecera
y después el cuerpo o Body, para cerrarse al final con </html> 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
<title> y </title>.

Mi primer párrafo
Al igual que un título se escribe entre <title> y </title>, un párrafo hay que escribirlo entre las
etiquetas <p> y </p>. 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 <body> y </body>. 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 <p> y </p>. 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 <a> y la de cierre </a>. 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í:
<a>palabra</a>
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:
<a href="ruta">palabra</a>
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:
<a href="http://edi.scienceontheweb.net">EDI</a>
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 <head> y </head> es
esta:
<link rel="stylesheet" href="estilos.css" type="text/css" media="all">
De modo que abrimos el Html-Kit, abrimos la página index.html y escribimos esa línea de código
entre <head> y </head>
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 "mis-
paginas-web", y una vez copiada allí le cambias el nobre y le pones "fondo.png".
Suponiendo que le hemos puesto de nombre fondo.png el 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) ; background-
repeat:no-repeat }
Para que el fondo se repita solo horizontalmente, se pone esto en su lugar: background-
repeat:repeat-x
body {background-color: #E6E6FA ; background-image: url(objetos/fondo.png) ; background-
repeat:repeat-x }
Para que se repita solo verticalmente se escribe: background-repeat:repeat-y
body {background-color: #E6E6FA ; background-image: url(objetos/fondo.png) ; background-
repeat:repeat-y }
Para que se repita vertical y horizontalmente no hace falta poner nada, pero si lo deseas puedes
poner esto: background-repeat:repeat, tal que así:
body {background-color: #E6E6FA ; background-image: url(objetos/fondo.png) ; background-
repeat: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) ; background-
repeat: 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) ; background-
repeat: 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) ; background-
repeat: no-repeat ; background-position: center center}
En otros navegadores no pasa nada, pero en Firefox es necesario especificar la altura del body para
que el fondo salga centrado verticalmente. Para conseguirlo solo hemos de indicar en esa misma
línea que el body va a tener una altura del 100%
body {background-color: #E6E6FA ; background-image: url(objetos/fondo.png) ; background-
position: 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 <p> y </p>.

Código Html para insertar una imagen


Para insertar una imagen, se coloca el siguiente código:
<img src="ruta/imagen.gif" width="XXpx" height="YYpx" alt="descripcion de la imagen">
Como ves, este es uno de los pocos casos en los que no hay etiqueta de cierre, es decir, no se pone
</img>. 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 </p> (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 <p> y </p> que también debemos escribir):
<p><img src="objetos/sonrisa.gif" width="60px" height="60px" alt="Bienvenidos al ejemplo de
EDI"></p>

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:
<a href="mailto:tudireccion@email.com">Texto que quieras poner para hacer clic en él </a>
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
</body>), 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 <p> </p>.
Ahora situa el cursor dentro de ese párrafo (colocándolo entre <p> y </p>) y en el Html-Kit tal y
como hicimos anteriormente pulsa en insertar una imagen.
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
<img alt="Pulsa para escribirme un E-Mail!" src="objetos/buzon.gif" height="32px"
width="32px" />
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 <img alt="...... hasta 23px" />. No selecciones la parte de <p> ni la
de </p>
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 <p>. 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 <p> dejándola así:
<p class="centrado"> Bienvenidos a mi página web. Muy pronto estará lista!</p>
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) ; background-
repeat: 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í:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>Pagina Principal del Ejemplo CCTW</title>
<link rel="stylesheet" href="estilos.css" type="text/css" media="all">
</head>
<body>
<p class="centrado">Bienvenidos a mi página web. Muy pronto estará lista!</p>
<p><img alt="Bienvenido al ejemplo de CCTW" src="objetos/sonrisa.gif" height="60"
width="60" /></p>
<p>Página creada gracias a <a href="http://edi.scienceontheweb.net"
target="_blank">CCTW</a></p>
<p><a href="mailto:nombre@wanadoo.es"><img alt="Pulsa para escribirme un E-Mail!"
src="objetos/buzon.gif" height="32px" width="32px" /></a></p>
</body>
</html>
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 "estilo-
general.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:
<link rel="stylesheet" href="estilo-general.css" type="text/css" media="all">

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.
<div>Bienvenidos a mi Web</div>
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 <body> y </body> 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í:
<div id="cabecera">Bienvenidos a mi Web</div>
Abre ahora el archivo plantilla.html y pon esa línea de código. Ha de quedar así:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <html> <head>
<title>Page title</title> <link rel="stylesheet" href="estilo-general.css" type="text/css"
media="all"> </head> <body> <div id="cabecera">Bienvenidos a mi Web</div> </body> </html>
Si has guardado antes la Hoja de Estilo y haces vista previa en la plantilla, 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:
<div id="navegacion">Barra de Navegación</div>
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:
<div id="contenido">Esta será la zona principal de la web</div>
<div id="pie">Este es el pié de página</div>

Y el resultado es...
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:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <html> <head>
<title>Page title</title> <link rel="stylesheet" href="estilo-general.css" type="text/css"
media="all"> </head> <body> <div id="cabecera">Bienvenidos a mi Web</div> <div
id="navegacion">Barra de Navegación</div> <div id="contenido">Esta será la zona principal de la
web</div> <div id="pie">Este es el pié de página</div> </body> </html>

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 <body> y la de cierre
justo antes de </body>.
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í:
<div id=”contenidos”>
<div id=”menu”>menu</div>
contenidos
</div>
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 <ul>
mientras que la otra define el inicio de un elemento de la lista, que es <li>.
Por supuesto, cuando termina la lista se coloca su etiqueta de cierre que será </ul> y cuando termina
un elemento de la lista (un enlace en este caso) se coloca </li>, de forma que el código Html de una
lista completa sería este mismo:
<ul>
<li> elemento1 </li>
<li> elemento2 </li>
<li> elemento3 </li>
</ul>
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:
<a href="ruta/archivo.html">Texto del Enlace</a>
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ú.
<a href="#">Enlace 1</a>
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 <li> y </li>.
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 <a> y por tanto está claro que para modificar
sus propiedades basta con escribir una "a" en la Hoja de Estilos y modificar cosas entre 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 text-
decoration: 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 <li> hay que ponerlos todos seguidos, en la misma línea que los
<ul> y </ul>. 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 <p> al incio y como no, la etiqueta </p> 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 <p> y </p> 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
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>Page title</title>
<link rel="stylesheet" href="estilo-general.css" type="text/css" media="all">
</head>
<body>
<div id="global">
<div id="cabecera">Bienvenidos a mi Web</div>
<div id="navegacion">Barra de Navegación</div>
<div id="contenido">
<div id="menu">
<ul><li><a href="#">Enlace 1</a></li><li><a href="#">Enlace 2</a></li><li><a
href="#">Enlace 3</a></li></ul> </div>
<p>Esta será la zona principal de la web</p> <p>Este es 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</p>
<p>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</p>
<p>Sale todo centrado y el texto indentado, pues adelante y podrás experimentar tus propios
diseños</p>
</div> <div id="pie">Este es el pié de página</div>
</div>
</body>
</html>

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

Un poco 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, arriba-
derecha-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 <p> y </p>,
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:
<h1>Este es un título de importancia Uno</h1>
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 <p> y </p>, de modo
que lo encerramos entre <h2> y </h2> y pasamos la etiqueta <p> de ese párrafo después de ese
trozo de texto.
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 web-
ejemplo-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-edi-
local" 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 estilo-
general.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):
<div id="cabecera">Bienvenidos a mi Web</div>

por estas otras:


<div id="cabecera">
<div id="logotipo"></div>
<div id="publicidad">Bienvenidos a mi Web</div>
</div>
Como ves, 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:
<div id="logotipo">
<img src="objetos/logotipo.gif" width="270" height="80"
alt="Haz clic aquí para volver a la página de inicio">
</div>

Lo que he puesto dentro del alt="" es el mensaje que aparecerá en algunos navegadores si dejamos
el cursor sobre el logotipo.
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 ; margin-
top: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.
<div id="logotipo">
<img src="objetos/logotipo.gif" width="270" height="80"
alt="Haz clic aquí para volver a la página de inicio">
</div>

le añades esto que marco en negrita:

<div id="logotipo">
<a href="index.html">
<img src="objetos/logotipo.gif" width="270" height="80"
alt="Haz clic aquí para volver a la página de inicio">
</a></div>

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:
<div id="navegacion">Barra de Navegación</div>

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 <ul> y terminan con un
</ul>. Dentro de una lista cada elemento de la misma empieza por un <li> y termina con un </li>
La lista completa con los enlaces sería algo así:
<ul>
<li>Sección 1</li>
<li>Sección 2</li>
<li>Sección 3</li>
<li>Sección 4</li>
</ul>

Pues ese es el código Html que tenemos que poner dentro de la capa navegación, eliminando claro
el texto que tenía de "Barra de Navegación" quedando al final así:
<div id="navegacion">
<ul>
<li>Sección 1</li>
<li>Sección 2</li>
<li>Sección 3</li>
<li>Sección 4</li>
</ul>
</div>

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 <li> Sección X</li> 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:
<div id="navegacion">
<ul>
<li><a href="#">Sección 1</a></li>
<li><a href="#">Sección 2</a></li>
<li><a href="#">Sección 3</a></li>
<li><a href="#">Sección 4</a></li>
</ul>
</div>

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:
<div id="menu">
<ul>
<li><a href="#">Enlace 1</a></li>
<li><a href="#">Enlace 2</a></li>
<li><a href="#">Enlace 3</a></li>
</ul></div>
Bueno, realmente es ese pero todas las líneas entre <ul> y </ul> han de estar seguidas una justo
después de la otra para que el internet explorer muestre bien el menú. 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 <p> y </p> se usaban estas otras, <h1> y <h1> (es un uno, no una ele!).
El menú anterior con el título puesto quedaría entonces con este código Html:
<div id="menu">
<ul>
<h1>Título de Sección 1</h1>
<li><a href="#">Enlace 1</a></li>
<li><a href="#">Enlace 2</a></li>
<li><a href="#">Enlace 3</a></li>
</ul>
</div>

El problema que se nos presenta es que nosotros ya habíamos definido unas características para los
párrafos tipo h1, 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:
<div id="menu">
<ul>
<li><a href="#">Enlace 1</a></li>
<li><a href="#">Enlace 2</a></li>
<li><a href="#">Enlace 3</a></li>
<li><a href="#">Enlace 4</a></li>
</ul>
</div>

#menu li {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 <head> y </head>:
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
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
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>Page title</title>
<link rel="stylesheet" href="estilo-general.css" type="text/css" media="all">
</head>
<body>
<div id="global">
<div id="cabecera">
<div id="logotipo"><a href="index.html"><img src="objetos/logotipo.gif"
width="270"
height="80" alt="Haz clic aquí para volver a la página de inicio"></a></div>
<div id="publicidad">Bienvenidos a mi Web</div>
</div>
<div id="navegacion">
<ul>
<li><a href="#">Sección 1</a></li>
<li><a href="#">Sección 2</a></li>
<li><a href="#">Sección 3</a></li>
</ul>
</div>
<div id="contenido">
<div id="menu">
<h1>Título de Sección 1</h1>
<ul><li><a href="#">Enlace 1</a></li><li><a href="#">Enlace 2</a></li><li>
<a href="#">Enlace 3</a></li><li><a href="#">Enlace 4</a></li></ul>
</div>
<h1>Esta será la zona principal de la web</h1>
<p>Este es mi segundo párrafo. 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í.</p>
<h2>Y este es el tercer párrafo.</h2>
<p>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.</p>
<p>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.</p>
</div>
<div id="pie">Este es el pié de página</div>
</div>
</body>
</html>

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 {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 {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:
<div id="pie">Este es el pié de página</div>

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):
<div id="pie">
<div id="pieuno">pie uno</div>
<div id="piedos">pie dos</div>
<div id="pietres">pie tres</div>
</div>

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 estilo-
general.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:
<div id="pieuno">
<ul>
<li><a href="#">Foro Ejemplo</a></li>
<li><a href="#">Contactos</a></li>
<li><a href="#">Nos Enlazan</a></li>
</ul>
</div>

Y haz lo mismo con el Html de la capa #pietres con este otro código:
<div id="pietres">
<ul>
<li><a href="#">Directorio</a></li>
<li><a href="#">TopSite</a></li>
<li><a href="#">Mapa de la Web</a></li>
</ul>
</div>

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í:
<div id="pieuno">
<ul>
<li><a href="#">Foro Ejemplo</a></li><li><a
href="#">Contactos</a></li><li>....
</ul>
</div>

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


<div id="pietres">
<ul>
<li><a href="#">Directorio</a></li><li><a
href="#">TopSite</a></li><li><a......
</ul>
</div>

Con esto queda por terminado por el momento el pie de página. Así que quita ya el color gris claro
(silver) que habíamos puesto a la linea de la capa #piedos (elimínale el ; background-color: silver),
guarda la hoja de estilo y haz vista previa.

Definir enlaces de distintos tipos


Ya vimos cómo conseguir cambiar el estilo de los enlaces de toda la web de una sola vez. La
cuestión ahora es... y si quiero tener varios enlaces con aspectos distintos? Pues como siempre, lo
conseguimos gracias a la hoja de estilos.
Las líneas de estilo-general.css que por el momento están afectando a los estilos son las siguientes:
* {text-indent:0px ; margin:0px ; padding:0px ; border:0px }
a {color: brown ; text-decoration:none ; display: block }
a:link {}
a:visited {}
a:hover {color:red ; text-decoration:underline ; background-color: silver}
a:active {}

Y por qué incluyo la línea del asterisco *? Sencillo, porque como ya hemos dicho antes, esa línea, al
llevar asterisco afecta a todos los elementos de la web.
Bien. Eso nos da un tipo de enlace general, para todos los enlaces de la web. Tendrán por tanto
margenes nulos, nada de indentado, sin bordes, de color marrón todos, etc, etc. Vamos a ver la
forma de crear una nueva clase de enlace con otras propiedades sin que por ello se pierda el tipo ya
definido.

Una nueva clase de enlaces


Anteriomente hemos dicho que los estilos para elementos que solo aparecen una sola vez en una
página web concreta los definiriamos con la almohadilla # antes de su nombre. Pero como este
nuevo estilo de enlace si puede que se repita para varios elementos dentro de una página, lo
definimos del otro modo, con un punto en la hoja de estilo y llamándolos con class="loquesea" en
lugar de con id="loquesea" en el html de la página.
Para definir una clase de enlace nueva, primero escogemos un nombre. Como siempre, todo en
minúsculas, sin espacios ni símbolos raros ni empezando con un número. Le pondremos el
nombre .enlaceuno y lo escribimos así en estilo-general.css, justo al final (no escribas este código
aún en tu hoja de estilos):
a.enlaceuno {}
a.enlaceuno:link {}
a.enlaceuno:visited {}
a.enlaceuno:hover {}
a.enlaceuno:active {}

Los enlaces definidos en las otras líneas que ya teníamos actuan sobre todos los enlaces, pero como
estos nuevos están colocados después, serán respetados para aquellos enlaces donde indiquemos
que son de la clase .enlaceuno

Y cómo se indica a un enlace que ha de


mostrarse según lo definido en la clase
"enlaceuno"?
Un enlace normal tiene esta forma:
<a href="#">Soy un enlace normal</a>

Este enlace tomará la forma que tengamos definida en la hoja de estilo estilo-general.css en la parte
general (la antigua). Si ahora quiero que tome otras propiedades (color, tamaño, subrayado...) tengo
que indicar en esa línea de Html que es de la clase .enlaceuno y se hace añadiendo esto:
<a class="enlaceuno" href="#">Ahora soy un enlace de la clase enlaceuno</a>

Qué ocurre entonces? Cuando alguien visitar tu web el navegador primero mira todo el html, ve que
existe un enlace y ve que hay hoja de estilo en el Head así que empieza a leerla por el principio. Ve
la primera línea, la del asterisco y le da margenes cero, le quita los bordes y el indentado. Sigue
leyendo estilo-general.css y ve que primero se han definido una serie de propiedades para todos los
enlaces y se los da (los antiguos) pero al seguir leyendo ve que está definido en esa misma hoja de
estilo una nueva clase, la clase enlaceuno, de modo que añade esas nuevas propiedades a las
propiedades antiguas. Si alguna está repetida dos veces, toma la nueva por buena y elimina la
antigua.

Convirtiendo enlaces a la nueva clase


Vamos a darle la clase .enlaceuno a todos los enlaces del pie de página. Un modo es colocando el
código class="enlaceuno" a cada una de las líneas Html de los enlaces del pie, un poco trabajoso,
verdad? Sería así (no lo hagas aún):
<div id="pieuno">
<ul>
<li><a class="enlaceuno" href="#">Foro Ejemplo</a></li><li><a
class="enlaceuno" href="#">Contactos
</a></li><li><a class="enlaceuno" href="#">Nos Enlazan</a></li>
</ul>
</div>

y lo mismo para los enlaces de la capa #pietres. Ahora que has aprendido a definir una clase de
enlace y a aplicarlo, te enseño otro modo más fácil y rápido.

Aplicando una clase de estilos solo a los enlaces


de una determinada capa
Se trata de definir en la hoja de estilos que todos los enlaces que pertenezcan a una capa
determinada deban seguir esos estilos. Con esto nos ahorramos escribir nada en el código Html de
la plantilla.html, verás.
Abre estilo-general.css y añade (sin eliminar el antiguo código de los enlaces) esto, justo al final:
#pie a {color: blue; text-decoration:none ; display: block }
#pie a:link {}
#pie a:visited {}
#pie a:hover {color:black ; text-decoration:underline ;
background-color: white }
#pie a:active {color:black}

Si guardas la hoja de estilo, verás como todos los enlaces del pié de página han tomado las nuevas
propiedades sin necesidad de tocar para nada el código Html de la plantilla.html.

Eliminar el fondo del enlace del logotipo


Ahora que sabemos variar las propiedades de solo algunos enlaces determinados sin variarlos todos,
podemos eliminar ese fondo gris que aparece al poner el ratón sobre el logotipo. Por qué aparece?
Pues simplemente porque al tener el logotipo un enlace hacia el index.html se convierte la imagen
en un enlace adoptando los estilos definidos para los enlaces en la Hoja de Estilos.
Si añadimos algo similar a lo anterior pero para todos los enlaces de la capa #logotipo podremos
conseguir eliminar ese fondo gris. Qué propiedades le pondrías para evitar eso? Realmente, como
no contiene textos me da igual, solo me interesa eliminar el fondo gris y eso lo consigo colocándole
un fondo blanco cuando el ratón se situe sobre el logotipo (:hover), así que puedo colocar esto al
final de la hoja de estilo:
#logotipo a {}
#logotipo a:link {}
#logotipo a:visited {}
#logotipo a:hover {background-color: white }
#logotipo a:active {}

Para que aparezcan las palabras con acentos


Según en qué servidor alojemos nuestra página, veremos o no que las palabras acentuadas aparecen
mal escritas.

Pero por qué salen mal escritos los acentos?


Es por que los navegadores interpretan el código Html de muy distintas formas según piense que la
web está escrita en un idioma o en otro. Distingue cada idioma por un tipo de "codificación". Lo
que vamos a hacer nosotros ahora mismo es poner en la cabecera de TODAS nuestras páginas una
línea que indica al navegador la codificación que debe interpretar. Esta codificación sabe de
acentos, por lo que las palabras acentuadas aparecerán correctamente sin más.
La línea a insertar dentro de la cabecera de todas las páginas de la web (por el momento solo
tenemos la plantilla, pero acuérdate de ponerlo en todas las demás también) es la siguiente:
<meta content="text/html; charset=iso-8859-1" http-equiv=Content-Type>

No hay mucho que saber de esta línea. Es una de esas líneas que llaman Metatags que no muestran
nada en la web, nada visible, sino que indican al navegador cómo interpretar el código de dentro del
Body. Concretamente indica que el contenido del Body es código Html y que la codificación es del
tipo iso-8895-1, que corresponde a la codificación europea.
Pero dónde? En que parte de la cabecera? En principio da igual en qué parte de la cabecera la
pongas, pero para que tengamos tú y yo el mismo código y te sea más sencillo seguir el curso ponla
por ejemplo justo debajo de la línea <head>.
Después de insertar esa línea, guarda la página, la subes al servidor y ve a verla con el navegador.

Las partes comunes de nuestra página web


Existen varios modos de ahorrarnos tiempo y trabajo cuando se realizan cambios en partes de una
web que son idénticas en varias páginas. Pero antes de seguir déjame por favor que insista en definir
eso de "partes de una web que son idénticas en varias páginas".
Cuando me refiero a idénticas quiero decir iguales. Si hay alguna ligera diferencia este truco ya no
nos sirve. Para que veas un ejemplo rápido te puedo adelantar que la siguiente parte de código es
común a todas las páginas de nuestra web de ejemplo:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<HTML>
<head>

Verdad? En estas tres líneas no hay ningún valor o parámetros que tengamos que cambiar de una
página a otra, por lo que es una parte común.
En cambio, esta otra línea no es común en todas las páginas de la web:
<title>Este es el título de la página de la web</title>

Pues el título será normalmente distinto de una página a otra. Vamos a prestar especial atención a
unas partes comunes en concreto, las que más probabilidad tienen de ser modificadas por nosotros
en el futuro, como por ejemplo, la cabecera, el menú lateral de la izquierda y el pie de página. Os
voy a mostrar en las siguientes páginas estas tres partes, para que veais su código correspondiente y
os familiariceis con ellas. Normalmente retocaremos algo de allí y no esta de más conocerlas bien.

La cabecera de la página web de ejemplo


La cabecera es una parte idéntica a todas las páginas de la web y en ocasiones nos dá por
modificarla. Bien para cambiar el logotipo, ponerle unas curvitas en las esquinas, variar el fondo o
quién sabe, para añadirle un bonito banner de publicidad. Entendemos que nuestra cabecera está
formada por la parte superior de la web hasta el menú horizontal, incluido este Aunque aún se
podría dividir en la parte con fondo blanco y el menú horizontal con fondo gris.
Ese menú con fondo gris también será común a todas las páginas de la web y desde él se podrá
acceder a las distintas secciones en las que dividamos los contenidos. Por ejemplo, para la página de
un grupo de música estas secciones podrían ser Portada, Historia, Discografía, etc, etc. En breve
trabajaremos sobre ese menú horizontal.
El código de la cabecera, tal cuál está ahora en el ejemplo que llevamos hecho es este:
<!-- INICIO CODIGO DE CABECERA - NO TOCAR -->
<div id="curva-superior"></div>
<div id="cabecera">
<div id="logotipo">
<a href="index.html">
<img src="objetos/logotipo.gif" width="270" height="80"
alt="Haz clic aquí para volver a la página de inicio">
</a>
</div>
<div id="publicidad">Bienvenidos a mi Web</div>
</div>
<div id="navegacion">
<ul>
<li><a href="#">Sección 1</a></li>
<li><a href="#">Sección 2</a></li>
<li><a href="#">Sección 3</a></li>
</ul>
</div>
<!-- FIN DE CODIGO DE CABECERA -->

Como ves, he añadido dos líneas para encerrar a este fragmento de código. Esto es para que si
alguna modificamos la página, recordemos que lo que hay dentro es común a todas las páginas de la
web, y por tanto no debemos tocar nada de su interior a menos que sea siguiendo las instrucciones
que os cuento en breve.

El menú lateral izquierdo


Este es otro fragmento de código Html que en principio es igual en todas las páginas de la web, o al
menos, en todas las páginas de una misma sección. En los casos en los que no sea común a toda la
web sino solo a parte de la web, también nos vale este truco que veremos a continuación, también
ahorraremos mucho tiempo, así que lo tendremos en cuenta como elemento común.
Para que te hagas una idea, desde el menú de fondo gris accedemos a las secciones de la web y
dentro de cada sección, desde este menú accederemos a las subsecciones. Por ejemplo, para una
supuesta web dedicada a un grupo de música, la sección "Conciertos" podría dividirse en las
subsecciones "Conciertos Anteriores" y "Próximos Conciertos".
Y su código Html es el siguiente. Como ves, le añado una línea al principio y otra al final para
indicar donde empieza y termina:
<!-- INICIO CODIGO DE MENU LATERAL IZQUIERDO - NO TOCAR -->
<div id="menu">
<h1>Título de Sección 1</h1>
<ul><li><a href="#">Enlace 1</a></li><li><a href="#">Enlace 2</a></li><li><a
href="#">Enlace 3....
</div>
<!-- FIN DE CODIGO DE MENU LATERAL IZQUIERDO -->

He colocado todas las líneas <li> seguidas unas de otras, para evitar el fallo aquel que daba el
Internet Explorer cuando las colocábamos separadas, una en cada renglón.

El pie de página
Lo mismo para el pie de página. Es algo común a todas las páginas de la web y en ocasiones quizás
queramos modificarlo para añadir enlaces, publicidad o qué se yo lo que se nos puede ocurrir.
Su código, con las líneas de comentario ya colocadas, es este:
<!-- INICIO CODIGO PIE DE PAGINA - NO TOCAR -->
<div id="pie">
<div id="pieuno">
<ul><li><a href="#">Foro Ejemploz/a></li><li><a
href="#">Contactos</a></li><li><a href="#">Nos..
</div>
<div id="piedos">pie dos</div>
<div id="pietres">
<ul><li><a href="#">Directorio</a></li><li><a
href="#">TopSite</a></li><li><a href="#">Mapa de..
</div>
</div>
<!-- FIN CODIGO PIE DE PAGINA -->

Bien, imagino que a la vez que yo, has colocado esas líneas de comentario en la plantilla, no? (aún
estás a tiempo para no perderte luego!!). Pues seguimos con esto, pero antes voy a explicaros mejor
qué es eso de los comentarios dentro del código HTML y cómo se añaden.

Los comentarios dentro del código HTML


En el ejemplo que estamos construyendo tenemos ya un montón de código HTML. Por ahora, como
acabamos de crear la plantilla y no hay demasiada cosa, no nos perdemos con facilidad, pero en
cuanto pasen unos días o en cuanto añadamos más y más código a nuestra plantilla llegará un
momento que al ver el código estaremos un poco perdidos.
Por ese motivo se inventaron los comentarios en el código. Se trata de poder añadir las notas que
deseemos dentro, para que nos sirva de recordatorio de qué parte de código es, por qué lo pusimos,
ect. Eso si, para que el navegador no se lie tratando de investigar que debe hacer con esas líneas tan
raras para él, lo que se hace es encerrar el comentario entre unos signos especiales. Así, cuando el
navegador se pone a leer el código Html de nuestra página, al llegar al signo de inicio de
comentario simplemente ignora lo que hay escrito hasta que lea el signo de cierre de comentario.
Como habrás visto en la página anterior, el signo de inicio de comentario dentro de código Html es
este:
<!--

El signo que indica final de comentario es este otro:


-->

De modo que si queremos poner una indicación dentro de nuestro código Html bastaría con poner
esta línea:
<!-- indicación -->

Si olvidas poner el signo de cierre es muy posible que algunos navegadores dejen de leer todo lo
que queda de código Html, así que recuerda colocarlo, no te olvides.
Si la indicación que queremos poner es muy larga y ocupa varias líneas, bastaría con poner el signo
al principio de la primera línea y el de cierre al final de la última línea. Algo así sería:
<!-- Esto es una indicación
de varias lineas, pero no pongo signos
de apertura y cierre de comentarios
en cada una de ellas...

También sirve para anular temporalmente alguna línea de código. Por ejemplo,
imagina que tienes un enlace en tu menú lateral de la izquierda que vas a dejar
fuera de uso, que no quieres que aparezca en el menú por que andas retocandolo.
Bastaría con encerrarlo entre los signos de inicio y fin de comentario y el
navegador no lo leería. Más tarde, basta eliminar esos signos para que vuelva a
aparecerle a los visitantes. A veces es mejor que eliminar la línea, pues quizás
al día siguiente no recuerdas bien lo que tenías puesto.

Por último decirte que tampoco conviene abusar de los comentarios, pues al fin y al cabo ocupan
algo de memoria y el archivo de la web tardaría un pelín más en cargarse si hubieran muchos o
fueran muy largos. Casi no se nota, pero si tardaría un poquilto más.

Creando el resto de páginas de la web


Ahora que tenemos claras cuales serán las partes comunes de la web, podemos sin miedo empezar a
crear el resto de páginas de nuestra web de ejemplo. Esto lo podemos hacer a partir de la plantilla. Y
cómo hacemos esto? Pues como siempre te he dicho, antes de actuar debemos tener claro lo que
queremos alcanzar. Antes de crear y crear páginas sin ton ni son tenemos que pensar cuántas
secciones y subsecciones queremos tener en nuestra web. Más tarde podremos ir añadiendo más
secciones y subsecciones, o incluso eliminar alguna, pero partiremos de una base ya pensada para
no liarnos mucho.
De modo que el siguiente paso es pensar en eso, qué secciones y subsecciones vamos a tener en
nuestra nueva web.Lo mejor es coger lápiz y papel y empezar a elaborar un esquema de la web que
tenemos en la cabeza. En el caso de este ejemplo ya te lo daré hecho, pero ten eso en cuenta cuando
elabores tu própia web.

Dividir contenidos en secciones y subsecciones


Aunque tú tendrás tu propia idea para hacer tu página web, vamos a ponernos todos en el mismo
lugar para realizar el resto del ejemplo. Sigue mis mismos pasos para no liarte mucho con el resto
de explicaciones y haz todo igual que yo, con las mismas secciones y subsecciones. Luego, en otra
carpeta, puedes hacer tus propios experimentos.
Imagina que la web de nuestro ejemplo la vamos a dedicar a un grupo de música que tenemos o que
nos gusta. En cuántas secciones principales se podría dividir? Quizás en estas:
• Página de presentación o portada. En esta explicamos el estilo de música del grupo, y
comentamos las partes más importantes de la web. Debería ser breve para que el visitante
sepa de un solo vistazo qué puede encontrar en la web. Esta sección es breve y rápida así
que no la dividimos en subsecciones. Recuerda, es la primera página que ve el visitante
cuando acceder a la web, por tanto corresponde con la index.html
• Historia del grupo. Aquí se puede comentar cómo, dónde y cuándo surgió la idea de la
formación del grupo, qué músicos han formado parte de la banda a lo largo de los años, cuál
es la formación actual, y cosas así. Esta sección se podría dividir en algunas subsecciones,
por ejemplo, Cómo surge la banda, Miembros que han pasado por ella, Formación actual e
incluso un Album de fotos!
• Discografía. Lo típico, una sección en la que se muestra cada album o CD publicado. Esta
sección se puede dividir por CDs publicados, por ejemplo en las subsecciones Maquetas,
CD1, CD2, CD3.
• Conciertos. Aquí se informa al visitante de cuáles son los próximos conciertos de la banda y
se muestran también los conciertos celebrados hasta el momento. Se puede dividir por
ejemplo en las subsecciones Conciertos Anteriores y Próximos Conciertos.
• Foro. Siempre es buena idea saber la opinión de los visitantes, tanto para mejorar la propia
web como para saber qué piensan del grupo de música. Nos reservamos una sección para en
el futuro incorporar un foro a la web, si puede ser, integrado en la misma estructura de la
página. Esta sección en principio no tendría subsecciones.
• Descargas. En este otro apartado se pueden colocar cosas que los fans se pueden bajar como
curiosidad. Por ejemplo, posters del grupo, imágenes, las mismas canciones, letras, videos,
etc, etc. Esta sección se puede dividir en las subsecciones, Canciones MP3, Letras, Posters,
Imágenes y Videos.
• Souvenirs. Quizás se piense en vender camisetas, gorras o CDs del grupo. Esta puede ser
otra sección que se puede dividir por ejemplo en Cómo Comprar, Camisetas y CDs.
No hay que preocuparse demasiado si más tarde se nos ocurren otras secciones, pues con el truco
que te he comentado páginas atrás y que te explico más adelante será muy fácil añadir, eliminar o
modificar las secciones. Pero sí está bien tener una idea más o menos clara al principio sobre la que
partir.
Como imagino que adivinas, los títulos de las secciones (Portada, Historia, Discografía, etc) los
colocaremos en el menú horizontal que hay bajo la cabecera de las páginas (el que ahora tiene
fondo gris) y las subsecciones las colocaremos en el menú lateral izquierdo. Así será muy fácil para
el visitante ir directamente a donde desea llegar.
Cuando hagas tu propia web, recuerda hacerte un esquema como si fuera un mapa de tu web para
tener una vista rápida de dónde está cada parte. Te será muy util a la hora de escribir rutas, ver
dónde encajar un apartado nuevo que quieres añadir, etc, etc.

Nombrando los archivos de las secciones


Vamos primero a decidir qué enlaces pondremos en el menú horizontal de secciones que hemos
comentado antes. Las secciones son Portada, Historia, Discografía, Conciertos, Descargas, Foro y
Souvenirs. Pues basta con añadir los enlaces correspondientes dentro de la capa "navegacion" en el
código de la plantilla.html cuyo código era este hasta ahora:
<div id="navegacion">
<ul>
<li><a href="#">Sección 1</a></li>
<li><a href="#">Sección 2</a></li>
<li><a href="#">Sección 3</a></li>
</ul>
</div>

Como adivinarás, tenemos que añadir algunas líneas <li> más (antes solo teníamos tres enlaces en
la plantilla y ahora son siete los enlaces que queremos), y tenemos que añadir la ruta de cada una de
ellas. Recuerda que la ruta hay que ponerla en lugar de la almohadilla (#). Por ahora las páginas de
las secciones que queremos poner no existen, pero podemos decidir ya cómo se va a llamar cada
archivo de cada una de estas páginas y así podemos escribir la ruta ya en esos enlaces. Lo mejor a la
hora de decidir el nombre para un archivo Html es nombrarlo con el nombre de la sección o
subsección y así será muy fácil saber qué contiene.
Recuerda estas normas básicas e importantísimas a la hora de nombrar archivos tanto html como de
imágenes, carpetas, archivos de música o cualquier otra cosa:
• Usar solo minúsculas.
• Solo usar letras y números, nunca símbolos raros.
• Nunca empezar el nombre de un archivo con un número (1nombre.html).
• No dejar espacios en blanco, como mucho guiones medios "-" (no bajos "_").
• Nunca poner acentos en los nombres de los archivos.
• Ponerle un nombre que refleje el contenido, sección o subsección de la web. Nunca cosas
como pagina1.html sino nombres que tengan sentido.
Teniendo todo esto en cuenta, el nombre de los archivos de las páginas de estas secciones deberían
ser estos:
• portada.html (pero como corresponde a la página principal, sería en realidad index.html)
• historia.html
• discografia.html
• conciertos.html
• descargas.html
• foro.html
• souvenirs.html

Una carpeta para cada sección


Si tuvieramos todos los archivos de la web guardados en la misma carpeta, a la larga nos sería muy
complicado encontrar un archivo determinado, de modo que me parece una buena idea crear una
carpeta para cada sección. Cada una de esas carpetas tendría el nombre de la sección (recordando
las normas anteriores!). Dentro de cada una de ellas colocaríamos tanto las páginas de esa sección
(las subsecciones) como las imágenes, archivos de música, etc que tenga, por ejemplo en una
carpeta llamada "objetos".

Así que antes de nada ya puedes empezar creando una carpeta para cada una de esas secciones. Ya
sabes, con los nombres historia, discografía, conciertos, descargas, foro y souvenirs. Recuerdas
cómo se crean las carpetas? Puedes hacerlo de dos maneras. Una directamente abriendo la carpeta
donde guardamos la web de ejemplo en tu escritorio y creando las carpetas y otro modo es desde el
Html Kit. Vamos a hacerlo desde el Html Kit para recordar cómo era.
Creando las carpetas
Vamos a recordar cómo se crean carpetas en el sitio web con el Html Kit, como siempre, paso a
paso para que no pierdas detalle.
Abre para empezar el Html Kit y haz que se muestre la ventanita de WorkSpace. Ya sabes cómo,
clic en "Ver" del menú de arriba del Html Kit, y clic en "WorkSpace" dentro del desplegable que se
abre. Haz clic con el botón derecho del ratón sobre la carpeta amarilla web-ejemplo-edi-local y en
este otro desplegable que se abre elige "New" y "Create New Folder",
Se abre una ventana en la que pondremos el nombre de la carpeta que queremos crear. Recuerda que
la sección portada dijimos que no iba a tener carpeta, por lo que la primera que crearemos será
"historia". Recuerda, sin extensión ninguna, no es un archivo, es una carpeta:
Podremos ver como aparece esa carpeta en la ventana de WorkSpace:
Repite la misma operación con el resto de carpetas, discografia, conciertos, descargas, foro y
souvenirs.

Las carpetas "objetos"


Además, hemos dicho que dentro de cada una de estas carpetas que acabamos de crear ibamos a
crear otra carpeta llamada objetos, en la que guardaríamos los archivos de imágenes, sonido etc que
pertenecieran a esa sección, así que adelante. En esta ocasión como la carpeta que queremos crear
está dentro de cada una de las creadas recientemente, tendremos que hacer clic con el botón derecho
del ratón sobre el nombre de la carpeta en la que la queramos crear. Me explico con un ejemplo.
Para crear la carpeta objetos dentro de la carpeta historia, haz clic con el botón derecho del ratón
sobre la carpeta historia, pulsa sobre New + Create New Folder y ponle el nombre "objetos"
cuando te lo pregunte. Haz lo mismo con el resto de carpetas objetos que tenemos que crear en el
resto de carpetas.
La única sección que no va a estar dentro de ninguna carpeta será la portada, pues como va a ser la
misma página principal (index.html) no podemos colocarla dentro de ninguna carpeta, debe ir
directamente en la raiz del servidor y además se debe llamar index.html, es decir, el archivo de la
portada no se llamará portada.html sino index.html y no estará dentro de ninguna carpeta.
Los archivos de la portada también estarán en una carpeta objetos, que es la que ya teníamos.

Creando las páginas de las secciones


Vamos a crear las páginas de cada una de las secciones ahora mismo. Te imaginas tener que hacer
todo lo que llevamos hecho cada vez que queremos hacer una nueva página? Es por eso que hemos
creado la plantilla, para ahorrarnos todo ese trabajo. Verás qué rápido generamos todas las demás
páginas.
Abre el Html-Kit y abre la plantilla.html. Bien, de esa plantilla vamos a aprovechar todo. La
copiaremos en todas las carpetas y así en lugar de empezar desde cero con cada una solo tendremos
que añadir los contenidos. Pero antes vamos a retocarla ligeramente, eliminando lo que no nos hace
falta y colocando unas equis en los lugares donde deberiamos rellenar algo, para más tarde
acordarnos. Vamos a ver qué cosas son las que debemos rellenar para personalizar cada una de las
páginas que vamos a crear.
Abre la plantilla y mira su código Html. En la quinta línea vemos que se define el título de esa
página. Ahora mismo pone "Page Title" cuando en realidad debería poner el título de esa página
concreta. Vamos a borrar "Page Title" y colocaremos unas pocas equis, y así recordaremos que ese
es un hueco que tendremos que rellenar en todas las páginas que vamos a crear.
Por otro lado, si miras más abajo en ese mismo código Html de la plantilla, más o menos en las
líneas 31, 32, 33 y 34 (estos números se ven en la parte izquierda de cada línea) tenemos los
comentarios o textos que aparecen en la plantilla de ejemplo. Como esos textos no deben aparecer
en las páginas de las secciones (que ya tendrán sus propios textos) vamos a borrarlos y poner de
nuevo unas equis en su lugar para acordarnos que es ahí donde podemos escribir lo que queremos
que salga en las nuevas páginas.
Ahora ya sabes que cuando copiemos la plantilla en cada una de las carpetas de las secciones, solo
tenemos que rellenar las partes con XXXXX para personalizar cada página, lo veremos más
adelante. El resto de la plantilla nos vale tal y como está, por ahora. Guarda la plantilla y seguimos.
Una observación. Si haces vista previa a la plantilla ahora, verás que sale algo deformada.
No te preocupes en absoluto. Eso se debe a que hemos eliminado gran parte del contenido, de los
textos de la parte central. Como apenas tenemos dos frases (las de las equis) la página se queda tan
cortita que se desmorona un poco, pero en cuanto le añadamos algo de contenido todo se arregla
solo, la página vuelve a recuperar su forma. Si lo prefieres, escribe muchas más equis dejando
algunos espacios entre ellas, hasta tener las suficientes como para llenar un espacio considerable de
la web. De ese modo no sale esa deformación.

Una nueva página para la sección historia


Para crear la página historia.html que guardaremos en la carpeta historia, haremos lo siguiente. Abre
el Html Kit, abre la plantilla.html y ahora la guardamos con otro nombre y en otro lugar. El otro
nombre será historia.html y el lugar donde la vamos a guardar es dentro de la carpeta historia.
Para hacer eso, en el Html Kit y con la plantilla abierta, pulsa en el menú de arriba donde pone
Archivo y del desplegable que se abre, pulsa en Salvar Como:
Se abre entonces una ventana desde la que tienes que elegir la carpeta en la quieres guardar la copia.
En este caso será la carpeta historia. Además, antes de guardar o salvar (es lo mismo) tienes que
ponerle un nombre al archivo, pues ya no se va a llamar plantilla sino historia.html

Ves?

En este caso, al tratarse de una página web lo que guardamos, no olvides ponerle la extensión
correspondiente, es decir, el nombre más un punto y las letras html (en minúscula todo!!)
Pues ya tenemos lista la página historia. La página que se te queda abierta ahora en el Html Kit ya
no es plantilla.html sino historia.html pero como ambas son idénticas, podemos usar historia.html
que ya está abierta para hacer lo mismo con el resto de páginas de las demás secciones. De modo
que, de nuevo, pulsa sobre Archivo + Salvar Como, y ahora dentro de la carpeta discografia guarda
una copia llamada discografia.html
Cuando hagas eso, repites creando otra llamada conciertos.html dentro de la carpeta conciertos,
después dentro de la carpeta descargas otra página llamada descargas.html y lo mismo para foro y
souvenirs. Quizás te parezca un poco pesado, pero imagina si tuvieras que hacerlas desde cero....
vaya tela, no?

Qué les pasa a los estilos CSS de estas páginas


de sección?
Vaya, si hacemos vista previa a alguna de esas páginas de sección que hemos creado.... se ve toda
deformada. Por qué puede ser? Parece como si los estilos CSS que tenemos definidos en la hoja de
estilo no funcionaran...
En realidad lo que ocurre es que las páginas no encuentran la hoja de estilos. Vamos a ver cuál es la
ruta que tienen en el enlace de la cabecera para descubrir qué es lo que está mal.
Si miramos el código de, por ejemplo, la página historia.html vemos que dentro de la cabecera
(head) el enlace a la hoja de estilos es este:
<link rel=”stylesheet” href=”estilo-general.css” type=”text/css” media=”all”>
Bien, vemos que la ruta (relativa) de la hoja de estilos es "estilo-general.css". Esto significa que el
navegador cuando visita la página historia.html debe buscar la hoja de estilos en la misma carpeta
en la que esté historia.html y ese no es el caso. Para arreglarlo tenemos dos opciones.
La primera de ellas es colocar una copia de estilo-general.css en cada una de las carpetas de sección
que tenemos. Esto tiene varios inconvenientes. Tendríamos unos cuantos archivos repetidos. Si un
dia decidimos hacer un cambio en la hoja de estilos tendríamos que hacer lo mismo en la el resto de
carpetas y eso es tedioso.
La segunda opción es retocar la ruta para que busque la hoja de estilos donde está ahora, es decir,
fuera de la carpeta historia, en la raiz del servidor. Así tendríamos una sola hoja de estilos para todas
las páginas de todas las secciones. Esta opción parece mejor, pues si alguna vez queremos hacer un
cambio basta con retocar una sola hoja de estilo. De modo que vamos a retocar la ruta.
Y qué ruta tenemos que poner? Si el navegador está visitando la página historia.html, para acceder a
estilo-general.css tendrá primero que salir de la carpeta historia y después abrir estilo-general.css Te
acuerdas como se escribía eso en Html? Para salir de una carpeta se escribian en la ruta dos puntos
y después una contrabarra (../). Y para abrir un archivo se escribia su nombre. Así que la ruta que
debemos colocar será:
<link rel="stylesheet" href="../estilo-general.css" type="text/css" media="all">

Estás de acuerdo? Bien. Y qué ruta habrá que poner por ejemplo en la nueva página
discografia.html? Pues si te fijas, sería la misma que la de historia.html pues hace falta lo mismo,
salir de su carpeta (../) y abrir la hoja de estilo.
Fíjate el trabajo que tenemos ahora.... tenemos que modificar la ruta de todas las páginas que
tenemos creadas... Y eso no es nada. Imaginas cuando queramos cambiar algo en todas las páginas
de la web y tengamos unas 500 o mil páginas!!! Hay que inventar algo para evitar eso verdad? Pues
no pienses mucho que ya está inventado.

Buscar y Reemplazar
Para arreglar las rutas que vimos antes de un solo plumazo podemos recurrir a un software que
trabaje por nosotros. El primero es el Dreamweaver pero es de pago y el segundo es gratuito y se
llama EditPad Lite. Este es el que vamos a utilizar, no solo para retocar esta ruta que tenemos mal,
sino para miles de cosas más adelante. Por el momento vamos a descargarlo a nuestro ordenador, lo
instalamos y aprovechamos el problemilla de las rutas para aprender a usarlo. Será tu mejor aliado y
un genial complemento para el Html Kit, verás.
El EditPadLite se puede descargar desde este enlace que nos lleva a la web oficial:
Descargar EditPadLite
Al hacer clic se abrirá la web oficial del programa en una nueva ventana, para que puedas ir leyendo
estas instrucciones a la vez que lo descargas. El primer paso es hacer clic en la parte de abajo del
todo de esa web, donde pone Download EditPad Lite:
Como ves está en inglés, pero no te preocupes que no nos hace falta entender demasiado.
Al hacer clic en Download, aparece una ventana de Windows preguntándonos si queremos
guardarlo. Pulsa sobre Guardar Archivo:
Creo que una vez te comenté que podías tener una carpeta en la que ir guardando todo el software
que vayamos usando, por si algún día te hace falta. Si lo hiciste puedes guardar este programa
también allí.
Una vez que tengas el archivo de instalación en tu PC, haz doble clic sobre él para instalarlo. La
instalación es bien sencilla, le dices a todo que si y listo.
Una vez instalado el programa puedes ya abrirlo para aprender a manejarlo. Lo vemos a
continuación.

Poniendo en marcha el EditPad Lite


Nada más abrir el nuevo programa, el EditPad Lite, nos aparecerá una ventana de Tips. Los Tips
son consejos que te dan para que aprendas a usar el programa mejor. Siempre sale uno al iniciar el
programa. Desmarcamos (quitamos) la casilla de abajo para que no vuelva a aparecer la próxima
vez que abramos el programa. Después de desactivarla pulsa sobre Thanks!
Ahora sí que vemos la ventana del EditPad Lite. Busca en el menú de arriba de ese programa la
opción Search (que significa Buscar) y dentro del desplegable escoge la opción "Show Search
Panel" que significa mostrar el panel de búsqueda. También se puede abrir pulsando a la vez las
teclas de tu teclado Ctrl + F:
Se abre entonces el panel de búsqueda del EditPad Lite.
Pues bien, en la ventanita donde pone "Search", abajo, podemos poner las líneas de código que ya
no nos valen y que queremos sustituir por otras nuevas. Así, el EditPad Lite buscará en todos los
archivos que le digamos esa parte de código. Si encuentra ese trozo de código que hemos colocado
en esa ventana, lo que hace es sustiruirlo por el que pongamos en la ventana de abajo.
Esto que quizás ahora no te diga mucho es de una utilidad grandisima! Fíjate que a partir de ahora,
cada vez que queramos cambiar algo que está en varias páginas de nuestra web solo tendremos que
abrir el EditPad Lite, pegar el código que queremos sustituir arriba, el nuevo abajo y el se encarga
de todo en cuestión de segundos.
Vamos a aprovechar que tenemos que corregir la ruta de la hoja de estilo en todas aquellas páginas
para hacer un ejemplo de uso de este programa. Sigue todos mis pasos y verás que fácil es.

Reparando la ruta de la hoja de estilo


Tienes abierto el EditPad Lite? Pues vamos a reparar las rutas aquellas. Ten en cuenta que este
programa va a buscar y reemplazar el código que le indiquemos solo en las páginas que abramos
con él en ese momento. Es decir, si quiero hacer la "búsqueda y reemplazo" en tres páginas
concretas, tenemos que abrirlas con ese programa, dejarlas abiertas y entonces hacer eso de buscar y
reemplazar. De este modo nos aseguramos de que no se va a buscar ese código en otras páginas que
no nos interesen.
Como nosotros queremos hacer la búsqueda y reemplazo en las páginas de las carpetas de las
secciones que hemos creado antes, lo primero que vamos a hacer es abrirlas con el EditPad Lite.
Cómo se hace esto? Vamos a verlo.
Primero abre el EditPad Lite. Ahora ve a File (significa archivo) que está en el menú horizontal de
arriba de ese programa y escoge Open (abrir).
Se abre entonces una ventana , desde la que debes indicar qué archivos quieres abrir. Ve buscando
una por una todas las páginas en las que queremos arreglar las rutas y las vas abriendo, una por una.
Ya has abierto todas? Recuerda, son todas estas, historia.html, discografia.html, conciertos.html,
descargas.html, foro.html y souvenirs.html.

Rellenando datos en el EditPad Lite


Ahora, en ese mismo programa, selecciona la línea completa de la ruta en cualquiera de esas
páginas abiertas.
Para seleccionarla ya sabes, haces clic al principio de la línea, arrastras sin soltar el botón del ratón
hasta el final de esa línea, sueltas (se queda todo azulado) y ahora pulsas sobre la selección (lo azul)
con el botón derecho del ratón y escoges Copy.
También puedes ver las lengüetas de las páginas abiertas. Las he señalado con un borde rojo, las ves
en la parte de arriba? Solo por curiosidad. Pues ahora que tenemos el código que queremos cambiar
copiado, ve a la ventana de Search y pegas lo que acabas de copiar. Para pegar, pon el cursor del
ratón sobre esa ventana (de las dos de abajo es la de arriba) y haciéndo clic con el botón derecho del
ratón sobre ella escoge Paste (que significa pegar).
Ahora, en la ventana de debajo de esa, en la que pone Replace a su izquierda, tenemos que escribir
la nueva línea que queremos que reemplace a la anterior. Como son casi iguales, pega de nuevo en
esa ventana la que tenemos copiada y le corregimos la ruta luego a mano, pues lo demás está bien.
Como ves, la única diferencia entre las líneas que hemos pegado es la ruta, que abajo le hemos
añadido ../ para que salga de la carpeta. Ya estamos listos para que el EditPad Lite haga su trabajo,
pero antes hay que marcar "All Files" que significa que ha de buscar y reemplazar esas líneas en
todos los archivos que tiene abierto el programa. Si no se marca, solo hará el trabajo en la página
que esté activa.
Vamos a la página siguiente y empezamos a reemplazar.

Reemplazando códigos con EditPad Lite


Bien, vamos allá a ver que pasa. Pulsa donde pone Replace All.
Si te fijas pulsando en las distintas lengüetas de las páginas abiertas en el EditPad Lite podrás ver
como esa línea ha sido reemplazada y que ahora todos esos archivos tienen la ruta correcta. Ahora
solo hace falta cerrar el EdipPad Lite pulsando sobre la X que hay en la esquina superior derecha.
Cuando pulses sobre esa X para cerrarlo, cómo es lógico, el programa te pregunta si quieres guardar
los cambios.
"Save This File": Esto es si quieres guardar la página que está activa, no las otras.
"Don´t Save This File": Significa que la que está activa no quieres guardarla.
"Save All Files": Escoge esta opción cuando quieras guardarlas todas. Esta es la opción que
necesitamos ahora nosotros. Haz clíc en ella.
"Don´t Save Any": Significa que no quieres guardar ningún cambio.
"Cancel Close": Es para cancelar el cerrar el programa.
Así que elige "Save All Files" y ya te funcionarán los estilos en todas esas páginas.

Reparando el logotipo
Bueno, a veces todo arreglo tiene sus daños colaterales. Esto nos sirve para seguir aprendiendo y
practicar con todo lo que voy enseñando así que, sigamos. Resulta que si ahora haces vista previa
sobre cualquiera de las nuevas páginas creadas, como por ejemplo sobre historia.html te darás
cuenta de que ahora no se ve el logotipo que teníamos, en la parte superior. Además, ya no funciona
su enlace y en lugar de llevarnos a index.html nos da un error. No es dificil adivinar porqué?.
Resulta que ahora las rutas del archivo del logotipo.gif y la del enlace hacia el index no son
correctas. Esto es por el mismo motivo que antes, porque son copia de la plantilla que antes no
estaba dentro de ninguna carpeta y como ahora si lo está, tenemos que reparar las rutas, corregirlas.
Veamos rápidamente cuales son las rutas de logotipo.gif y la del enlace a index.html en la página
historia.html. En el código Html de esa página vemos esto:
<div id="cabecera">
<div id="logotipo"><a href="index.html"><img src="objetos/logotipo.gif"
width="270" height="80"
alt="Haz clic aquí para volver a la página de inicio"></a></div>
<div id="publicidad">Bienvenidos a mi Web</div>
</div>

Como ves, el navegador cuando visite esa página intentará buscar un archivo llamado logotipo.gif
dentro de la carpeta objetos que hay dentro de la carpeta historia (pues es en esta carpeta donde está
la página que está visitando, historia.html). Pero en realidad el logotipo.gif se encuentra en la
carpeta objetos de la raiz de la web, fuera de la carpeta historia. Así que, la ruta correcta sería otra.
Para llegar desde historia.html hasta el logotipo.gif es necesario, primero salir de la carpeta historia
(eso se hacía con ../ ), luego entrar en la carpeta objetos (la antigua, en la que guardamos al
principio los archivos del logotipo, etc), y finalmente abrir el logotipo.gif
Por otro lado, para llegar desde cualquier página que haya dentro de una de las carpetas de la web
de ejemplo al index.html, es necesario salir de la carpeta. Así que la ruta correcta del enlace será
"../index.html" y no "index.html"
Por tanto las rutas correctas serán:
<div id="cabecera">
<div id="logotipo"><a href="../index.html"><img src="../objetos/logotipo.gif"
width="270" height="80"
alt="Haz clic aquí para volver a la página de inicio"></a></div>
<div id="publicidad">Bienvenidos a mi web</div>
</div>

Muy parecidas, solo cambia el añadirle los puntos y la contabarra.


Pero esto hay que cambiarlo en todas las páginas web que tenemos dentro de las carpetas de
sección! Menos mal que ahora sabemos manejar perfectamente el EditPad Lite. Vamos allá y lo
recordamos? Esta vez te lo explico de un modo más rápido, no creo que necesites mucha ayuda.
Abrimos el EditPad Lite, abrimos desde él todas las páginas que tenemos dentro de carpetas (las
mismas que la vez anterior). Escribimos en la ventana de arriba (la de Search) esto:
<div id="cabecera">
<div id="logotipo"><a href="index.html"><img src="objetos/logotipo.gif"
width="270" height="80"
alt="Haz clic aquí para volver a la página de inicio"></a></div>
<div id="publicidad">Bienvenidos a mi web</div>
</div>
Y en la ventana de abajo esto otro:
<div id="cabecera">
<div id="logotipo"><a href="../index.html"><img src="../objetos/logotipo.gif"
width="270" height="80"
alt="Haz clic aquí para volver a la página de inicio"></a></div>
<div id="publicidad">Bienvenidos a mi web</div>
</div>

Le damos al botón "Replace All", cerramos el EditPad Lite, le indicamos que guarde todos los
archivos y... ya está. Todo reparado.

Personalizando cada página de sección


Bien, ya tenemos lista la estructura de carpetas de la web para tenerlo todo bien ordenado. Además
tenemos la página principal de cada una de las secciones. El siguiente paso sería hacer funcionar el
menú horizontal (la barra de navegación que hay bajo la cabecera, con el fondo gris) de todas estas
páginas, es decir, colocar los enlaces en ese menú (un enlace para cada sección) para que estemos
en la sección que estemos, desde allí podamos dirigirnos a cualquier otra sección de la web.
Hay una pequeña pega y es que, como todas las páginas que tenemos ahora mismo son exáctamente
iguales, cuando hagamos funcionar el menú horizontal no sabremos si funciona o no, pues nos
dirigirá a una página idéntica y no vamos a observar ningún cambio. Recuerda que todas ellas son
copia exácta de la plantilla. Así que antes de ponernos a arreglar el menú y sus enlaces vamos a
personalizar un poco cada una de las páginas de las distintas secciones.
Para ello simplemente abriremos cada una de ellas con el Html Kit y rellenaremos el titulo (<title>)
y pondremos un poco de texto en la parte del contenido principal.
Empezaremos por la página historia.html Abrela con el Html Kit y ponle como título este, "Historia
de la banda". Escribiéndolo entre <title> y </title>. Ahora en el título del contenido, entre <h1> y
</h1> escribe esto otro: "Esta es la historia de la banda". Y para terminar, invéntate algo para poner
en el párrafo que hay debajo del título que acabas de retocar. Quitas las equis y te inventas algo.
Ahora haz lo mismo con el resto de las páginas que tenemos en las demás carpetas. Ponle el Title y
el título H1 a cada una e intenta inventarte un par de párrafos para que las páginas recuperen un
poco la forma.

Creando los enlaces del menú horizontal


Ya estamos en condiciones de hacer funcionar el menú horizontal de arriba, también llamado barra
de navegación. Para ello abre una página cualquiera de las que tenemos hechas, por ejemplo
historia.html
Si te fijas en su código Html, en la capa navegacion teniamos puesto esto:
<div id="navegacion">
<ul>
<li><a href="#">Sección 1</a></li>
<li><a href="#">Sección 2</a></li>
<li><a href="#">Sección 3</a></li>
</ul>
</div>

Ese código tenemos que transformarlo para que aparezcan enlaces a todas las secciones, incluida la
portada. Para ello basta con añadir 4 líneas más como las que ya hay, quedando una para cada uno
de los enlaces que necesitamos. Y ya que estamos, en lugar de Sección 1, Sección 2, etc,
escribiremos el texto que queremos que aparezca en el menú, es decir, Portada, Historia,
Discografía, Conciertos, Descargas, Foro y Souvenirs:
<div id="navegacion">
<ul>
<li><a href="#">Portada</a></li>
<li><a href="#">Historia</a></li>
<li><a href="#">Discografía</a></li>
<li><a href="#">Conciertos</a></li>
<li><a href="#">Descargas</a></li>
<li><a href="#">Foro</a></li>
<li><a href="#">Souvenirs</a></li>
</ul>
</div>

Ahora solo falta colocarle la ruta en lugar de la almohadilla (#). Cuál crees que será la ruta de estos
archivos? Pues, esté el navegador en la página que sea, siempre tendrá que, primero salir de esa
carpeta ( ../ ), después entrar en la carpeta de la sección correspondiente ( nombre de la carpeta) y
finalmente abrir el archivo de la página (nombredelapagina.html). Es decir, así:
<div id="navegacion">
<ul>
<li><a href="#">Portada</a></li>
<li><a href="../historia/historia.html">Historia</a></li>
<li><a href="../discografia/discografia.html">Discografía</a></li>
<li><a href="../conciertos/conciertos.html">Conciertos</a></li>
<li><a href="../descargas/descargas.html">Descargas</a></li>
<li><a href="../foro/foro.html">Foro</a></li>
<li><a href="../souvenirs/souvenirs.html">Souvenirs</a></li>
</ul>
</div>

Como verás, la ruta de la portada no la he puesto aún. Esa ruta será diferente, pues para llegar desde
la página de cualquier sección a la portada (que como digimos iba a ser la index.html) la ruta a
seguir es simplemente ../ (para salir de la carpeta de sección en la que se esté) seguido de index.html
quedando todo ese código así:
<div id="navegacion">
<ul>
<li><a href="../index.html">Portada</a></li>
<li><a href="../historia/historia.html">Historia</a></li>
<li><a href="../discografia/discografia.html">Discografía</a></li>
<li><a href="../conciertos/conciertos.html">Conciertos</a></li>
<li><a href="../descargas/descargas.html">Descargas</a></li>
<li><a href="../foro/foro.html">Foro</a></li>
<li><a href="../souvenirs/souvenirs.html">Souvenirs</a></li>
</ul>
</div>

Bueno, para ser correctos del todo, deberías recordar aquél error que comentamos una vez que surge
en el Internet Explorer si ponemos las líneas de código Html de ese modo. La norma era que todo el
código Html de una lista ha de estar todo seguido, por tanto antes de reemplazar ese código vamos a
ponerlo en una sola línea. Para ello, pones el cursor al final de cada línea y das a la tecla "Supr"
hasta que la siguiente quede pegada a la anterior. Y así con todas.
Ahora solo nos queda usar el buscar y reemplazar del EditPad Lite para de un plumazo actualizar
los códigos de los menús horizontales de todas las páginas de las secciones.
Abre el EditPad Lite, abre todas las páginas de las secciones, (Portada, Historia, Discografía,
Conciertos, Descargas, Foro y Souvenirs), y desde una de ellas, escribes el código a buscar en la
parte de arriba y el nuevo código que queremos en la parte de abajo. Te recuerdo que el código a
buscar era este:
<div id="navegacion">
<ul>
<li><a href="#">Sección 1</a></li>
<li><a href="#">Sección 2</a></li>
<li><a href="#">Sección 3</a></li>
</ul>
</div>

El que queremos (que va en la ventada de abajo del EditPad Lite) lo puse antes. Ahora pulsas sobre
"Replace All" y listo, cierras el programa, le dices que guarde todas y... misión cumplida de nuevo!

Corrigiendo la deformación del menú lateral


Si haces vista previa en cualquiera de las páginas de sección, por ejemplo de la página historia.html,
verás como ahora el menú lateral de la izquierda aparece casi en el centro deformando la web. Esta
deformación solo se ve bien usando Firefox, pues si usas el Internet Explorer apenas se aprecia. En
cualquier caso hay que arreglarlo.
Además, verás como los elementos del menú horizontal que acabamos de hacer, están descentrados.
Hay que modificar los margenes de la capa navegación para ajustarlo mejor y evitar además la
deformación que tenemos. Eso se hace muy rápido retocando la hoja de estilos, estilo-general.css
Hay un hueco demasiado grande a la izquierda de los enlaces del menú horizontal y además se nos
baja el enlace Souvenirs a una segunda línea que no queremos. Además puedes ver como los
usuarios de Firefox van a ver la web deformada por ese mismo motivo, al desplazarse el enlace
Souvenirs a una segunda línea, desplaza también el menú lateral. No te preocupes, lo arreglamos
enseguida.
Abre la hoja de estilos, estilo-general.css y echa un vistazo a las líneas donde hemos definido estilos
a la capa navegación, son estas tres principalmente:
#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 }

El problema lo tenemos en la tercera de esas líneas. Al principio le pusimos un margen por la


izquierda de 180 pixeles. Lo hicimos para centrar los tres enlaces que teníamos al comienzo de las
lecciones, pero como ahora tenemos unos siete, es necesario hacerlo más pequeño. Así que en lugar
de 180px vamos a ver qué tal se ve con solo 60px, es decir, modificándo esa línea para dejarla así:
#navegacion ul { margin-left: 60px }

Si ahora guardas la hoja de estilo y haces vista previa sobre cualquier página de sección, verás que
ahora se ve... genial!
Aún podríamos retocarlo un poco más variando la segunda línea ( margin: 0px 20px 0px 20px ).
Retocando esos parámetros puedes hacer que los enlaces estén más o menos cerca unos de otros,
pero eso te lo dejo para cuando hagas tu propia web. Solo recuerdalo por si te hace falta.
Nota: Te recuerdo que si ves que las páginas aparecen un poco deformadas, es por que te falta
escribir algo de contenido en la parte central. Hazme caso y rellenala, así como el título y esas cosas
que te he dicho.
Si se deforman pero no se arregla con eso, tal vez hayas cometido algún error al usar el EditPad Lit.
La nueva index o portada
Seguramente en muchas ocasiones habrás visto que al entrar en una página web aparece en primer
lugar una página de presentación que suele ser ya típica. Un banner o logotipo grande de la web en
cuestión y un enlace en el que pone con letras grandes "ENTRAR" y... poco más.
A pesar de que hemos construido una index.html a modo de presentación, vamos a eliminarla y a
colocar en su lugar una página copiada de nuestra plantilla. De este modo la apariencia será la
misma que la de las demás páginas quedando el conjunto más coherente. Desde el menú horizontal
de arriba de esa página el visitante puede ya acceder a las distintas secciones de la web. En la parte
central, donde se coloca el texto o contenidos, pondremos una breve descripción de lo que el
visitante puede encontrar en la web.
Así que para crear la nueva index.html abre tu Html Kit, y abre la plantilla con él. Ahora lo que
haremos es irnos al menú de arriba del Html Kit y pulsar sobre Archivo + Salvar Como.
En la ventana que se abre ponedle de nombre index.html y pusa en Guardar. Te avisa entonces de
que ya existe un documento con ese nombre y te pregunta si quieres sobreescribirlo. Dile que sí y el
index antiguo dejará de existir. En su lugar tendremos un index.html cuyo contenido es idéntico al
de la plantilla.

Personalizando el index.html
El caso es que ahora que tenemos el index copiado de la plantilla, tenemos que hacer funcionar el
menú horizontal de arriba igual que hicimos con las páginas de las secciones. En este caso no nos
vale el mismo código que en aquellas páginas, pues esas estaban dentro de una carpeta mientras que
index.html está fuera. Por eso, las rutas no son exáctamente las mismas y tenemos que ponérselas
correctamente. Es fácil, ya veras.
Una vez tengas abierta la página index.html con el Html Kit, ve a ver su código, concretamente la
parte del menú superior horizontal. Ahora mismo es como este:
<div id="navegacion">
<ul>
<li><a href="#">Sección 1</a></li>
<li><a href="#">Sección 2</a></li>
<li><a href="#">Sección 3</a></li>
</ul>
</div>

Hay que añadir los enlaces para el resto de secciones, como hicimos antes. Quedaría así:
<div id="navegacion">
<ul>
<li><a href="#">Portada</a></li>
<li><a href="#">Historia</a></li>
<li><a href="#">Discografía</a></li>
<li><a href="#">Conciertos</a></li>
<li><a href="#">Descargas</a></li>
<li><a href="#">Foro</a></li>
<li><a href="#">Souvenirs</a></li>
</ul>
</div>

Y ahora le ponemos las rutas correctas. Para la portada es fácil, como estamos en la portada, para
volver a ella otra vez solo es necesario abrir su archivo, por lo que la ruta sería "index.html"
(recuerda que el archivo de la portada es index.html, no portada.html).
Para el resto de páginas de ese menú tendríamos que, para llegar desde la portada hasta cada una de
ellas hay que, primero entrar en la carpeta correspondiente y después abrir el archivo de la página,
por lo que las rutas al final quedan todas de este modo:
<div id="navegacion">
<ul>
<li><a href="index.html">Portada</a></li>
<li><a href="historia/historia.html">Historia</a></li>
<li><a href="discografia/discografia.html">Discografía</a></li>
<li><a href="conciertos/conciertos.html">Conciertos</a></li>
<li><a href="descargas/descargas.html">Descargas</a></li>
<li><a href="foro/foro.html">Foro</a></li>
<li><a href="souvenirs/souvenirs.html">Souvenirs</a></li>
</ul>
</div>

Estás de acuerdo con esto? Pero recuerda, el código de las listas deben tener todas las líneas
seguidas, (eliminando espacios y saltos de líneas):

Bien. Pues pon en la index.html ese código y ya lo puedes guardar. Si le haces vista previa ahora al
index.html verás como aparece algo descuadrado. Ya sabes que és por no tener a penas contenido,
de modo que aprovechando que estamos con ese archivo, escríbele un par de párrafos más o menos
largos, ponle un <title> decente, como por ejemplo:
<title>Página Oficial la Banda</title>

y ya puestos, escríbele también algún título entre <h1> y </h1>, donde pusimos las equis. Por
ejemplo esto:
<h1>Bienvenidos a la página oficial de la banda</h1>

Ahora sí debe verse bien la vista previa.


Ahora en teoría se puede navegar perfectamente por toda la web que tenemos desde el menú
horizontal superior y desde todas las páginas de la web de ejemplo. Por cierto, como hemos
eliminado la antigua index.html, puedes borrar de la carpeta objetos todos los archivos que usaba el
index, como por ejemplo la sonrisa y el buzón de correo. Así evitas ir acumulando archivos que al
fin y al cabo no usas en la web y ya no nos hacen falta.
El siguiente paso es hacer funcionar también el menú lateral de la izquierda y es ese el paso que
daremos a continuación.

Completando el menú lateral izquierdo


En primer lugar tendríamos que decidir qué secciones van a tener o no ese menú lateral izquierdo
que ahora mismo poseen todas las páginas de nuestra web.
Desde el menú horizontal se puede acceder a la portada y a las páginas principales de cada sección.
Una vez en ellas, haremos que desde el menú lateral izquierdo se pueda acceder a las subsecciones.
La portada no va a tener subsecciones y por tanto no tiene sentido mantener en ella ese menú
lateral. Lo mismo ocurre con la sección Foro, no va a tener subsecciones, de modo que
eliminaremos ese menú lateral de ambas, tanto de la portada (index.html) como del foro (foro.html).
Para eliminar el menú, basta con borrar las líneas de código que lo definen en los archivos
index.html y foro.html. Recuerda que el código a eliminar es este:
<div id="menu">
<h1>Título de Sección 1</h1>
<ul><li><a href="#">Enlace 1</a></li><li><a href="#">Enlace 2</a></li><li><a
href="#">Enlace 3</a>
</li><li><a href="#">Enlace 4</a></li></ul>
</div>

Las páginas portada y foro no se van a deformar por eliminar esa parte de código. Tan solo no se
verá el menú y el espacio que ocupaba pasa a formar parte del contenido central. En el futuro, si
cambiamos de idea y queremos colocar de nuevo el menú, bastará con colocar de nuevo esas líneas
de código, de modo que ya lo puedes eliminar sin miedo de ambas páginas.
Si lo deseas, elimina solo el código que te acabo de decir arriba, pero deja las dos líneas de
comentarios que habíamos puesto hace unas páginas. Me refiero a estas dos:
<!-- INICIO DE CODIGO DE MENU LATERAL IZQUIERDO - NO TOCAR -->
<!-- FIN DE CODIGO DE MENU LATERAL IZQUIERDO -->

De ese modo, si un día quieres volver a poner el menú sabrás dónde iba . Adelante! Elimina esos
códigos y seguimos...

Menú lateral de Historia


El método es muy similar al anterior, al que hemos usado para crear el menú horizontal de la parte
de arriba, pero en este caso no vamos a partir de la plantilla sino que vamos a partir de la página que
ya existe en cada una de las carpetas de sección. Es decir, para generar las páginas de la sección
historia, abriremos el archivo historia.html y la guardaremos con los nombres de las subsecciones.
Pero antes de hacer eso arreglaremos el menú lateral de esa página. De ese modo, cuando
guardemos con el nombre del resto de página de esa sección ya se guardan con el menú lateral
terminado y no será necesario acudir al EditPad Lite para reemplazar esa parte de código.
Empezaremos entonces abriendo el archivo historia.html y mirando el código que por ahora
tenemos para ese menú lateral. Ese código es este:
<div id="menu">
<h1>Título de Sección 1</h1>
<ul><li><a href="#">Enlace 1</a></li><li><a href="#">Enlace 2</a></li><li>
<a href="#">Enlace 3</a></li><li><a href="#">Enlace 4</a></li></ul>
</div>

Bien, qué cosas hay que cambiar aquí? Para empezar le vamos a poner el título de la sección entre
<h1> y </h1>. Lo que escribamos ahí aparecerá en la parte alta del menú lateral. Pondremos
entonces "Historia" y quedaría así esa línea:
<h1>Historia</h1>

A continuación escribimos los anchor text de cada enlace. Aunque ya lo he dicho, quizás se te haya
olvidado. El anchor text es el texto que aparece visible en el enlace, es decir, las palabras sobre las
que hay que pulsar para ir a la página enlazada. Como las subsecciones de la sección historia son
Origen, Miembros, Formación Actual y Album de Fotos, pondremos esos textos como Anchor Text.
Quedaría así por ahora el código del menú:
<div id="menu">
<h1>Historia</h1>
<ul><li><a href="#">Origen</a></li><li><a href="#">Miembros</a></li><li><a
href="#">
Formación Actual</a></li><li><a href="#">Album de Fotos</a></li></ul>
</div>

Ahora solo queda colocar bien las rutas. Pero claro, aún no existen los archivos de las subsecciones,
verdad? Así que no sabemos qué poner en la ruta de cada uno... No pasa nada. Decidimos yá cómo
se van a llamar esos archivos y como sabemos que los vamos a guardar en la carpeta historia,
tenemos todos los datos que nos hacen falta para escribir las rutas correctamente. Veamos.
Si el archivo de la subsección Origen lo vamos a llamar origen.html, y sabemos que lo vamos a
guardar (cuando lo generemos) dentro de la carpeta historia, sabremos que para ir desde cualquier
página de la sección historia a la página origen.html solo es necesario abrir dicho archivo. No es
necesario salir ni entrar en ninguna carpeta, por lo que la ruta será simplemente el nombre del
archivo, es decir, "origen.html".
Lo mismo va a ocurrir con el resto de enlaces de las demás subsecciones, no es así? Entonces es
fácil adivinar que el código completo quedaría de este modo:
<div id="menu">
<h1>Historia</h1>
<ul><li><a href="origen.html">Origen</a></li><li><a
href="miembros.html">Miembros</a>
</li><li><a href="formacion.html">Formación Actual</a></li><li><a
href="album.html">
Album de Fotos</a></li></ul>
</div>

Pues listo, ya podemos escribir ese código en lugar del antiguo que había en el archivo
historia.html. Una vez hecho, guarda la página historia.html (esta vez con su mismo nombre).

Generando el resto de subsecciones de Historia


El resto es bien fácil, vuelve a abrir la página historia.html y ahora vas arriba, al menú del Html Kit
y pulsando sobre Archivo + Salvar Como le vas dando los nombres de los archivos de las
subsecciones uno a uno. Es decir, la guardas como origen.html, miembros.html, formacion.html y
album.html y ya tenemos toda esa sección completa.
Solo nos faltaría ahora personalizar un poco cada una de esas subsecciones. Cómo? Pues igual que
hicimos con las secciones. Le ponemos el título correspondiente en el <title>, cambiamos el
contenido, los párrafos para hablar de lo que toque en cada subsección, etc, etc. De lo contrario,
cuando naveguemos por la web no nos vamos a dar cuenta de dónde estamos, pues todo el
contenido será copia de historia.html.
El resto es cosa tuya. No creo que sea necesario que te explique paso a paso cómo actuar con el
resto de secciones, no? Ya sabes, ahora abres la página de la siguiente sección, discografia, arreglas
el menú lateral en ella, la guardas y luego generas el resto de páginas de las subsecciones de
discografia, que son maquetas.html, cd1.html, cd2.html y cd3.html. Luego le personalizar los
títulos, les pones algo de texto personalizado, algo que hable de esa sección y listo, pasas a la
sección siguiente.
Cuando termines con todo eso tendrás una web completamente lista para ser publicada en internet.
Con solo cambiar los títulos, los párrafos con la información que te de la gana, añadir o quitar
secciones o subsecciones, modificar colores de fondo en la hoja de estilo, etc, etc, tendrás tu propia
página web.
Claro que aún queda mucho que aprender y cosas que aplicar a este ejemplo, como aprender a
insertar imágenes en la parte central de la web, donde va el contenido, saber colocarlas a la
izquierda o a la derecha, que el texto las rodee o no, hacer que los enlaces se marquen indicando en
qué página está el visitante, mejorar cosas para aparecer de los primeros en Google, aprender a
insertar publicidad para costear un hosting y dominio... y cientos de cosas más, pero lo básico ya lo
tienes.
Por cierto, si te sientes en deuda con EDI te agradeceríamos que cuando cuelgues tu nueva web en
internet coloques un enlace hacia nosotros y por qué no, que recomiendes estas lecciones a tus
amigos. Eso nos ayudará a crecer y repercutirá sin duda en la mejora de esta página. Desde ya mis
más sinceros agradecimientos por tu apoyo.
Qué contiene el tema?
Includes
Librerias
Dreamweaver
Menú desplegable

Métodos para partes comunes en tu página


Normalmente las páginas que componen una web poseen un menú de navegación para ayudar al
visitante a dirigirse a donde desea y este menú es común, idéntico en todas esas páginas de la web.
Si de pronto decido ampliar o modificar ese menú... tengo que hacer el cambio en todas las páginas
de la web de una en una.
Todas las páginas de una web disponen también de una cabecera, que muestra un logotipo de la
web, un mensaje de bienvenida y por ejemplo un banner de publicidad. Si quiero cambiar la forma
de la cabecera, o cambiar de publicidad... tengo que modificar todas las páginas de la web.
Por suerte existen varios trucos o métodos que nos ayudarán en estos trabajos evitando tener que
modificar una a una todas las páginas que contienen elementos idénticos como los mencionados,
menús, códigos de publicidad, cabeceras, pie de página, etc.
Si consigues dominar al menos uno de estos métodos que te explico en estas páginas, lograrás hacer
cambios en toda la web con tan solo un par de clics. Si aún tenias la tentación de usar marcos o
frames para esos casos, con esto que te cuento lograrás evitarlo.
A continuación tienes tres métodos. Te recomiendo que mires todos ellos e incluso que los pruebes
antes de decidirte por uno. Algunos quizás no puedas hacerlos funcionar por no permitirtelo tu
servidor, o el programa que uses para crear las webs, pero de todos ellos seguro que al menos uno si
que puedes usar.

Includes para las partes comunes de tu web


Quizás sea la mejor de todas las opciones que tenemos a la hora de crear y modificar partes que se
van a repetir en varias de las páginas de nuestra web. El único requisito es que funcione en nuestro
servidor o hosting. Haremos una prueba rápida para asegurarnos antes de seguir.
Se trata de determinar qué partes son las que van a repetirse en todas o varias de las páginas de
nuestra web, como el menú de navegación, la publicidad, la cabecera...
Una vez determinamos una parte que va a repetirse en más de una página, basta sustituir ese
fragmento de código por una línea, esta:
<?php include("comun01.txt"); ?>
y pegar todo ese código de parte común dentro del archivo que en la línea anterior hemos llamado
comun-01.txt
Qué ganamos con esto? Dos cosas muy cómodas:
A.- Por un lado cada vez que queramos incluir lo que hemos pegado dentro de ese archivo en una
página nueva, en lugar de volver a escribir el código hmtl correspondiente, bastará con pegar en su
lugar esa lína de código.
B.- Por otro lado, ahora si quiero modificar esa parte común, en lugar de modificarlo en todas las
páginas que lo contienen, basta con abrir ese archivo que hemos llamado comun-01.txt, modificarlo
a nuestro gusto, guardarlo y subirlo al servidor, sin tocar para nada el resto de páginas ni tener que
volver a subirlas al servidor.

Prueba para ver si nuestro hosting admite Includes


Como no todos los hosting admiten este método, vamos a hacer una rápida comprobación en
nuestro servidor o hosting para ver si podemos utilizar esta opción. Vamos a hacerlo poco a poco,
como siempre.
1.- Creamos la siguiente página web y la guardamos con el nombre test-01.html:
<html>
<head>
<title>Test para comprobar includes</title>
</head>
<body>
<p>Si todo va bien, debajo de este párrafo debe leerse la palabra
"EDI". Vamos a ver....</p>
<?php include("comun-01.txt"); ?>
</body>
</html>

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


<p>EDI</p>
<p>Parece que funciona!</p>

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 <TD> hasta </TD>, o desde <TR> hasta </TR> o desde <TABLE> hasta </TABLE>....), o
todo el contenido de un DIV concreto (desde <DIV class="...> hasta </DIV>..).
Una vez que decidimos qué fragmento de código vamos a poner en el elemento de libreria lo
copiamos (edición > copiar).
Ahora abrimos la biblioteca pulsando en la barra de arriba del Dreamweaver en Ventana >
Biblioteca o directamente pulsando F6 y nos aparecerá esta ventana:

Naturalmente, está en blanco. Vamos a crear un nuevo elemento de la biblioteca pulsando en el


icono rodeado en rojo en la foto de antes. Aparece entonces un nuevo archivo dentro de esa ventana:

Ponle un nombre adecuado para acordarte luego. Por ejemplo, si va a contener el menú de la
sección Fotos, ponle de nombre menu-fotos.
Bien, ahora lo abrimos haciendo doble clic sobre él y aparecerá su contenido (vacio) de este modo:

Pulsa ahora sobre el icono rodeado de rojo para ver el código HTMl del elemento nuevo:
Naturalmente, aparece vacio también, pues no le hemos puesto nada. Ahora en esa ventana (en la
vista HTML) pegamos todo el contenido que habiamos copiado antes, es decir, el código HTML del
elemento que queremos convertir en elemento de Biblioteca o Libreria.
Tras pegarlo cerramos esa ventana y lo guardamos. Como ya le hemos puesto un nombre basta con
pulsar en Guardar y no en Guardar Como... Ya está listo el elemento. Solo nos queda ir a cada
página para decirle que busque el código en este archivo recien creado. Vamos a ver cómo se hace.

Incluyendo el elemento de Biblioteca en cada


página
Vamos a abrir la página de la que hemos copiado antes el código original y que luego hemos pegado
y guardado en el elemento de Bliblibloteca. Ahora tenemos que borrar todo ese código. Sin miedo,
pues lo tenemos guardado en la biblioteca. Eso si, borra exactamente lo que tenemos en la
biblioteca, ni más ni menos. En caso contrario al final se perderá algo de código o nos sobrará,
apareciendo algún error por algún lado.
Una vez eliminado el código de la página hacemos lo siguiente:
( Estamos en la vista del código HTML de la página donde queremos insertar el elemento de
Biblioteca)
1.- Pulsamos F6 para ver la ventana de la Biblioteca.
2.- En la misma ventana donde vemos el código HTML, ponemos el cursor justo en la parte donde
hemos dejado ese hueco al borrar (donde antes estaba el código original que hemos borrado).
3.- Pulsamos una sola vez sobre el archivo menu-fotos (o como lo hayas llamado tú) y después
sobre el icono donde pone "Insertar".

Automaticamente, Dreamweaver pega en ese lugar donde tenias el cursor todo el contenido del
elemento de Biblioteca pero con una cosa especial. Todo ese código aparece en la página web donde
lo has insertado pero encerrado entre dos trozos de código HTML nuevos, los siguientes:
<!-- #BeginLibraryItem "/Library/menu-fotos.lbi" -->xxxxxxxx<!-- #EndLibraryItem -->
donde lo rojo sería el código HTMl que hay dentro del elemento de biblioteca y lo azul el código al
que me refiero. Con estas nuevas líneas el Dreamweaver sabe ya que cada vez que el fichero menu-
fotos.lbi varie, ha de cambiarlo en esta página. Ahora guarda y cierra esa página, verifica que
funciona haciendole vista previa y si todo va bien continua con el resto de páginas haciendo lo
mismo.

Cosas a Saber...
Una cosa que hay que saber al usar la libreria es la siguiente. Nunca retoqueis el código encerrado
entre esas lineas, pues no hace falta. Si quereis cambiar algo hacedlo directamente en el archivo .lbi
que podéis encontrar en una nueva carpeta que Dreamweaver ha creado en la carpeta de tu web
llamada Library. Tras retocar ese archivo, al guardarlo y cerrarlo Dreamweaver te preguntará si
quieres actualizar todas las webs que lo tienen incorporado. Le decís que sí y listo. Solo os queda
subir todos esos archivos al servidor.
Como Dreamweaver ha creado la carpeta Library dentro de la carpeta de tu web, te preguntarás si
esta carpeta tienes que subirla o no al servidor. La respuesta es no, no es necesario. Esos archivos
(los .lbi) solo los usa Dreamweaver para actualizar las páginas, pero no valen para nada en tu
servidor. En cualquier caso para mi es más fácil subirlos aunque no sirva para nada que decirle al
Dreamweaver que suba todo menos eso.... de modo que también los mando al servidor, pero sabed
que no es necesario.
Lo bueno de tenerlo en el servidor es que si alguna vez pierdes los datos de tu PC, puedes
recuperarlos del servidor, incluida la carpeta Library.
Cómo Usar el Dreamweaver
Si has pasado ya por el curso, verás que del Dreamweaver solo hemos usado un par de cosillas.
Sobre todo el tema de crear sitios y conectarnos al servidor para actualizar la página web, pero
realmente el grueso de la web la hemos estado haciendo casi directamente en HTML o usando el
Block de notas.
En esta sección trataré de explicaros algunas funciones simplemente geniales que posee el
Dreamweaver y que, a pesar de que aprendamos a hacer páginas directamente escribiendo en
HTML, nos serán de gran utilidad.
Como la versión 3.0 del Dreamweaver ya está practicamente, os lo explicaré también para la última
versión, aunque practicamente será lo mismo.

Cómo Usar "Reemplazar"?


Imagina que tu web ya tiene un montón de páginas. Imagina que no has usado marcos, ni includes,
ni bibliotecas.. y que de repente se te ocurre crear una sección más y poner un enlace nuevo en el
menú de todas las páginas, o cambiar el logotipo de la web de todas ellas, o en definitiva, cambiar
algo que es común a todas. Lo normal es abrir página por página y variar lo que quieres, pero es un
trabajo exagerado, te lo aseguro.
Dreamweaver posee una magnífica herramienta que es capaz de buscar el código html que
queramos cambiar en todas las páginas de la web y reemplazarlo por otro código de un modo rápido
y sencillo.
La herramienta la podemos encontrar en la ventada de diseño del Dreamweaver (cuando abrimos
una página html con él). Está en la barra de herramientas de arriba, en Edición > Reemplazar... (o
pulsando Control + H). Al hacerlo se abre una ventana como esta:

Por ejemplo. Imagina que en todas las páginas de nuestra web tenemos puesto un título en el código
HTML de este modo: <TITLE>Untitled Document</TITLE> y que leyendo estas páginas
aprendemos que esta línea es para poner nuestro título y nos vemos con que hemos de cambiarlo en
más de 50 páginas.. Pues con esta herramienta podemos arreglarlo inmediatamente.
Escribimos en el hueco blanco de arriba de esa ventana el código que queremos que cambie. Luego
ponemos este otro código en el hueco "Reemplazar con:" <TITLE>Bienvenido a
www.Perico.com!</TITLE> y ahora escogemos, dentro de "Buscar en:" la opción "Sitio Actual"
para que cambie ese código en todas las páginas del sitio y no solo en esa página concreta.
Después de esto le damos a Reemp. Todos y automáticamente hará los cambios oportunos.
Solo tiene una pega. Si no lo hacemos bien no podemos dar marcha atrás, de modo que yo siempre
hago una copia de seguridad de TODA la carpeta de mi web antes de seguir.
Pues del mismo modo, si tienes un menú con enlaces a cada una de las páginas de tu web en todas
tus páginas, y un día decides inlcuir una sección más, solo tienes que,
0. Hacer una copia de la carpeta de tu web, por seguridad.
1.- Abrir una de las páginas donde haya uno de esos menús.
2.- Ir a la Vista HTML y copiar todo el código del menú.
3.- Abrir la ventana de Reemplazar.
4.- Pegar en el cuadro "Buscar" todo ese código.
5.- Pegar el código nuevo en el cuadro "Reemplazar con" (Puedes pegar el mismo que has pegado
en Buscar y retocarlo ahí mismo...)

6.- Escoger "Buscar en:" Sitio Actual (También puedes escoger si te interesa, hacerlo solo en una
carpeta concreta, pero casi no se ve la opción, tienes que pulsar en las flechitas de arriba y abajo ).

7.- Pulsar en "Reemplazar Todos"


8.- Ahora te dice en cuantos documentos ha buscado y cuantos cambios ha realizado. Ya está listo!

Tu Icono En la URL de tu Página Web


(favicon.ico)
Probablemente os hayáis encontrado en alguna ocasión que al incluir una determinada web en el
apartado "Favoritos" de vuestro navegador, esa web se queda almacenada con un icono pequeñito
justo al lado de la dirección. Ese icono saldrá cuando accedáis a esa página y se puede ver en
vuestro navegador a la izquierda de la dirección de esa web.
Es una cosa bastante sencilla. El único problema es que para incluir un icono de estos en vuestra
web, primero tenéis que tener un icono.Con qué programa poder diseñar el vuestro si lo deseais?

Dónde Conseguir un Editor de Iconos?


Es un archivo tipo gráfico con extensión .ico.
Se trata del IconEdit 2. El único problema que tiene es que es una demo y no te deja que guardes el
icono que has hecho con él, pero no hay nada que no pueda solucionarse.
Podéis encontrar multitud de programas (entre ellos, éste) en la siguiente dirección:
http://tucows.mundivia.es
Poned el nombre del programa en el buscador de esa página y lo encontraréis.

Cómo Crear un Icono (favicon.ico) con


IconEdit
Suponiendo que ya os lo habéis bajado, basta con ponerlo en marcha. Tras instalarlo lo podréis
encontrar en el menú de inicio. Al ejecutarlo aparece una ventanita como la siguiente:
La pantalla interior es el huevo que tenéis para crear el icono. Está dividido en cuadritos, de modo
que resulta muy fácil construir el icono.
El funcionamiento es bastante sencillo, de modo que no creo que haga falta dar muchas
explicaciones sobre como crearlos. Haciendo clic en los rectángulos que aparecen superpuestos a la
derecha, se abre la paleta de colores, donde podéis elegir el que queráis.
Una vez terminado el icono, hacéis clic en uno de los botones de abajo y lo guardáis. Recordar
meterlo en la carpeta adecuada con el fin de mantener todos los archivos bien bien ordenados.

Dónde Conseguir Iconos ya Hechos?


Ya sabéis que los iconos tienen extensión .ico, de modo que es fácil localizarlos. Por ejemplo,
podéis probar a buscar todos los iconos que tenéis en vuestro disco duro, por si os gusta alguno para
vuestra web. Es muy fácil hacer esto. Simplemente os vais al botoncito de abajo a la izquierda de
vuestro ordenador, lo pulsáis y elegís la opción Buscar y luego en Archivos o Carpetas. En la
ventana que se abre, donde pone Nombre, poned *.ico y pulsáis en Buscar Ahora. Os mostrará una
lista de todos los iconos que hay en vuestro disco duro. Si os gusta alguno seleccionadlo, copiadlo y
pegarlo en la carpeta donde guardéis las cosas de vuestra página.
También existen por ahí bibliotecas de iconos ya hechos, de modo que bastará con buscar el que
más os guste o más se amolde a la idea que tengáis para vuestra web. Un ejemplo de estas
bibliotecas lo podéis encontrar en el siguiente programa, que podéis bajaros haciendo clic en él.
IconCool5e
(si no funciona este hipervínculo, buscadlo en http://tucows.mundivia.es o con el Emule, Kazaa,
etc..)

Cómo Insertar el Favicon.ico en Tu Página?


Una vez tenemos listo y preparado nuestro icono lo guardaremos en el lugar adecuado para
mantener siempre el orden.
Recordar que se trata de un pequeño archivo con extensión .ico .
Ahora, para que cuando un visitante al agregar vuestra web en sus favoritos le salga el icono que
hemos creado junto a la dirección de la página, tendremos que incluir un pequeño código en nuestra
web.
• 1.- Acceder al Código
• 2.- Localizar Dónde Incluir el Código. El trozo de código que vamos a introducir, lo
tenemos que meter entre la línea donde pone <HEAD> y la que pone </HEAD>. Para ello
podemos hacer lo siguiente: Ponemos el cursor justo al final de la palabra <HEAD>,
pulsamos la tecla Intro o Enter. Con eso, crearemos una línea nueva debajo de la anterior. En
esa nueva línea introduciremos el siguiente código.
• 3.- Introducir el Código: Tenemos que escribir lo siguiente:
<LINK REL="SHORTCUT ICON" HREF="http://XXXXrutaXXXX/favicon.ico">
pero donde yo he puesto XXXXrutaXXXX, vosotros tenéis que poner la ruta donde habéis
guardado el archivo del icono, y donde pone favicon.ico, tenéis que poner el nombre
completo de dicho archivo, con su .ico (extensión) incluida.
• 4.- Para finalizar: Ya esta todo. Ahora solo tenéis que guardar la página que hemos
modificado y luego, mediante el FTP[?] o el programa que usemos para subir los archivos
de nuestra web al servidor, actualizamos nuestra web, es decir, subimos esa página recién
modificada y, claro está, el icono.
• 5.- La comprobación: Para comprobar que lo hemos hecho bien, una vez que hemos subido
todo con el FTP o lo que sea, nos conectamos a Internet, visitamos nuestra web y, en nuestro
navegador, pulsamos en Favoritos y luego en Agregar a Favoritos. Si todo ha ido bien,
aparecerá nuestro icono junto a la dirección de nuestra página, y lo mismo le ocurrirá a los
visitantes que hagan lo mismo.
Debo avisaros de una cosilla. Esto solo funciona si el visitante agrega a sus favoritos esa página,
pero no si agrega otra cualquiera de vuestra web, pues solo hemos hecho esto en una de las páginas
que componen nuestra web. Para que funcione desde todas las páginas que forman nuestra web
hemos de hacer esto para cada una de las páginas que la componen. A menos que nuestra web sea
de marcos, en cuyo caso bastará con que añadamos el código a la página principal de los marcos,
generalmente la llamada index.htm. Para evitar el tener que meter todo esto en cada una de las
páginas (solo en el caso de páginas simples) podríamos haber previsto todo esto antes y haber
creado una plantilla, en la cual, habríamos metido todo lo común a todas las páginas de nuestra web,
como por ejemplo este código, el fondo de pantalla, el logotipo, etc, etc. Si vuestra web no es de
marcos (o Frames) y no tenéis ganas de hacerlo página a página, hacedlo solo en la principal, pues
es desde la que la mayoría de los visitantes agregan a Favoritos.
También os aviso, que los navegadores son algo caprichosillos y a veces, a pesar de tener el código
bien, no muestran el icono. Por tanto, si estáis seguros de haberlo hecho todo bien y aún así no
aparece, pensad que es posible que el navegador sea la causa. Esto no significa que los visitantes no
lo vean, sino que tú no lo ves. También es normal que al vaciar la carpeta Temporal de Archivos de
Internet del Windows dejes de ver dicho icono, hasta que vuelvas a cargar esa página de nuevo.

Música de Fondo para tu Página Web.


Para empezar, os puedo decir que hay varios formatos para los archivos de sonido. Los más
conocidos son los que terminan en .wav.mp3 y .mid. El primero tiene muy buena calidad pero
ocupa mucho espacio (unas 20 megas por canción). El segundo suele tener la misma calidad y
ocupa solo unas 5 megas, pero necesitas un programa especial que los ejecute, como por ejemplo, el
conocido WinAmp. El último, el tipo .mid ocupa muy muy poco, pero no suena tan bien como los
otros. Son los llamados archivos MIDI como el que podéis escuchar al entrar a esta web. Como
ocupan tan poco, son los únicos que se suelen utilizar en las webs, de modo que nos ceñiremos a
este tipo exclusivamente, hasta que la tecnología nos permita utilizar el resto sin problemas de
tiempo de carga.
Como os he indicado, estos archivos, tipo MIDI, ocupan entre 5 Kb y 100 Kb. Como una de las
cosas más importantes a la hora de crear webs es que sean rápidas, para no desesperar a nuestros
visitantes, se eligen estos frente a los otros, que tardarían una eternidad en cargarse, y para entonces,
el visitante seguro que se ha marchado aburrido de esperar. La razón por la cual ocupan tan poco, es
porque no guardan la voz del cantante, sino solo la música. Además, no guardan la música como
sonidos, sino que memorizan la partitura de una canción, y es tu propio ordenador el que la
interpreta con ayuda de tu tarjeta de sonido. Debido a esto, es normal que el que tenga una tarjeta de
sonido muy muy buena, escuche el mismo archivo MIDI mucho mejor que los que tienen tarjetas de
audio más normalitas.

Dónde Conseguir Archivos de Música Midi?


Pero cómo consigo la canción que yo quiero si no puedo crearla yo mismo fácilmente? Pues me
temo que la única opción que tenéis es la de buscarla en la red. No os podéis ni imaginar la cantidad
de canciones que andan por ahí, y es muy posible que con un buen buscador terminéis
encontrándola.
Yo os recomiendo que utilicéis el buscador de http://www.lycos.es, pues indicándole que busque
archivos tipo .MID e incluyendo la palabra o titulo de canción, o artista que queráis, os enseñará
una lista más o menos larga, en función de lo famosa que sea la canción. Obviamente, si la canción
es rara, o demasiado nueva, lo tendréis más difícil, pero para canciones famosillas no suele haber
problema alguno. Haced la prueba, id al buscador que os he dicho pinchando en la dirección de
arriba. Haced clic en "Búsqueda Avanzada", Elegid la opción"En Sonidos" y poned el título o el
artista que buscáis y haced clic en "Buscar".
Os aparecerá una lista (si habéis tenido suerte) de las canciones encontradas. Pinchando ahora en las
líneas de color azul, os aparecerá la ventana que os comente. Elegís, por ejemplo, la opción, "Abrir
este archivo desde su ubicación actual" si queréis escucharla, o en "Guardar este archivo a
disco" para guardarlo en vuestro disco duro. Desechad los que acaben en .wav, pues ocupan mucho
para una web.
Cuando os muestre la lista de canciones no tenéis más que hacer clic en la dirección que os indique.
Tras hacer eso, os aparecerá una ventanita preguntado si queréis abrir (escuchar) el archivo sin
guardarlo en vuestro disco duro o si queréis guardároslo directamente. Con la primera opción
podréis escuchar la canción, lo cual tarda muy muy poco. Más o menos unos 20 segundos según lo
que ocupe. Si os gusta pincháis otra vez en el mismo sitio y seleccionáis la opción "Guardar en el
Disco Duro". Elegid bien donde queréis guardarlo para que luego no os volváis locos/locas
buscándolo.

Agregar Música con HTML


Para insertar un sonido de fondo en una página, solo tenéis que acudir a ver el código HTML de la
misma.
Veis una de las primeras líneas de código que empieza por <body....>? pues justo antes de esa
línea cread otra y en ella escribís esto:
<bgsound src="sonido.mid" loop="1">
donde sonido.mid lo podéis sustituir por el nombre del archivo del sonido o música. Puede ser
un formato mid, mp3, wev, etc, pero sabed que en función de qué tipo sea puede tardar más o
menos en cargarse. Procurad evitar los formatos largos como MP3 y Wav.
Donde pone loop="1" podéis poner el número de veces que queréis que suene la canción. Con
"1" solo suena una vez y depués nada.
Una Canción Nueva cada Vez que Visitan Tu
Web
Primero necesitaréis unas cuantas canciones. En principio bastarán 4 o 5 para empezar. Más tarde
podréis incluir más, pues el procedimiento es el mismo sin más que variar algún dato sin
importancia que ya os indicaré. Tenéis unas cuantas en la sección Herramientas Útiles.
Imaginemos que tenemos 5 archivos midi de 5 canciones que nos hemos grabado de algún sitio.
Supongamos que se llaman así:
musica1.mid musica2.mid musica3.mid musica4.mid musica5.mid
Cread una carpeta llamada "sonidos" dentro de la carpeta donde guardáis toda vuestra página,
donde meteréis esas 5 canciones. Ya sabéis que el orden es muy importante a la hora de crear webs.
Ahora hay que decidir en que página vamos a incluir esos archivos de música. Si os habéis decidido
por una página simple, no hay duda, la página a modificar es esa misma. Pero si os habéis inclinado
por la web de marcos o frames tenéis que decidir en que frame meter el sonido. Una vez decidido,
será en ese archivo donde tenéis que meter el código que os muestro a continuación.
En el archivo que hayáis elegido hay que meter el siguiente código:
<SCRIPT><!-- PRINCIPIO SCRIPT MIDI ALEATORIO -->

var nummidi = 5
day = new Date()
seed = day.getTime()
ran = parseInt(((seed - (parseInt(seed/1000,10) * 1000))/10)/100*nummidi + 1,10)

if (ran == (1))
midi=("ruta-del-archivo-de-sonido/musica1.mid")
if (ran == (2))
midi=("ruta-del-archivo-de-sonido/musica2.mid")
if (ran == (3))
midi=("ruta-del-archivo-de-sonido/musica3.mid")
if (ran == (4))
midi=("ruta-del-archivo-de-sonido/musica4.mid")
if (ran == (5))
midi=("ruta-del-archivo-de-sonido/musica5.mid")

document.write('<BGSOUND SRC= "' + midi + '" loop=infinite AUTOSTART=TRUE>')

</SCRIPT><!-- FINAL SCRIPT MIDI ALEATORIO -->

Por ahora tenéis que saber que lo único que tenéis que cambiar vosotros es lo que hay señalado en
rojo. Donde pone var nummidi = 5 en lugar de 5, tenéis que poner el número de canciones que vais a
incluir en la lista, de la cual, se elegirá una al azar. Además, si habéis llamado a los archivos de las
canciones de forma distinta a la que os he indicado antes, tendréis que poner el nombre de dichos
archivos en lugar de los nombres que hay en rojo. Si en lugar de 5 canciones vais a poner 10, tenéis
que cambiar la segunda línea por var nummidi = 10 y luego, como en ese código solo hay 5
canciones, vosotros tenéis que incluir 5 fragmentosde código más, que corresponden a las otras 5
canciones, es decir. Por cada canción que añadáis, tenéis que añadir también el siguiente trozo de
código:
if (ran == (6))
midi=("ruta-del-archivo-de-sonido/musica6.mid")
Pero poniendo el número de orden correspondiente y el nombre del archivo de sonido, que
obviamente, será igual a como se llame ese archivo en vuestro disco duro (procurad que no lleven
espacios en blanco o guiones bajos "_" ni símbolos raros).
Donde pone infinite, podéis poner el número de veces que queréis que se escuche esa canción, o
podéis dejarlo como está si deseáis que suene infinitas veces.
En cuanto a lo que pone de "ruta-del-archivo-de-sonido/", se trata de indicar la ruta del archivo donde
se va a encontrar el archivo de sonido en vuestro servidor.
Una vez que habéis personalizado vuestro código solo tenéis que copiarlo en la página donde
queréis insertar el sonido de fondo.
Tenéis que copiarlo siempre dentro del BODY del código, es decir, en cualquier sitio entre la línea
donde pone </BODY> y la que pone </BODY>. Por ejemplo, ponéis el cursor al final de la palabra
<BODY>
Una vez copiado el código, guardáis el archivo de la página y comprobáis como funciona. Si no
funciona bien, es decir, si no suena nada, es muy posible que el fallo sea de las rutas de los
archivos .mid.

Cómo insertar un menú desplegable


Para empezar es necesario pegar esto dentro del head, es decir, entre las líneas <HEAD> Primer
codigo </HEAD> del código html de tu página web:

<script type="text/javascript">
var qm_si,qm_li,qm_lo,qm_tt,qm_th,qm_ts,qm_la;
var qp="parentNode";
var qc="className";
var qm_t=navigator.userAgent;
var qm_o=qm_t.indexOf("Opera")+1;
var qm_s=qm_t.indexOf("afari")+1;
var qm_s2=qm_s&&window.XMLHttpRequest;
var qm_n=qm_t.indexOf("Netscape")+1;
var qm_v=parseFloat(navigator.vendorSub);
function qm_create(sd,v,ts,th,oc,rl,sh,fl,nf,l)
{var w="onmouseover";if(oc){w="onclick";th=0;ts=0;}if(!l)
{l=1;qm_th=th;sd=document.getElementById("qm"+sd);
if(window.qm_pure)sd=qm_pure(sd);sd[w]=function(e)
{qm_kille(e)};document[w]=qm_bo;sd.style.zoom=1;
if(sh)x2("qmsh",sd,1);if(!v)sd.ch=1;}else
if(sh)sd.ch=1;if(sh)sd.sh=1;if(fl)sd.fl=1;if(rl)sd.rl=1;sd.style.zIndex=l+""+1;
var lsp;var sp=sd.childNodes;for(var i=0;i<sp.length;i++){var b=sp[i];if(b.tagName=="A")
{lsp=b;b[w]=qm_oo;b.qmts=ts;
if(l==1&&v){b.style.styleFloat="none";b.style.cssFloat="none";}}if(b.tagName=="DIV")
{x2("qmparent",lsp,1);lsp.cdiv=b;b.idiv=lsp;
if(qm_n&&qm_v<8&&!b.style.width)b.style.width=b.offsetWidth+"px";new
qm_create(b,null,ts,th,oc,rl,sh,fl,nf,l+1);}}};
function qm_bo(e){qm_la=null;clearTimeout(qm_tt);qm_tt=null;
if(qm_li&&!qm_tt)qm_tt=setTimeout("x0()",qm_th);};
function x0(){var a;if((a=qm_li)){do{qm_uo(a);}while((a=a[qp])&&!qm_a(a))}qm_li=null;};
function qm_a(a){if(a[qc].indexOf("qmmc")+1)return 1;};
function qm_uo(a,go){if(!
go&&a.qmtree)return;if(window.qmad&&qmad.bhide)eval(qmad.bhide);a.style.visibility="";x2("q
mactive",a.idiv);};;
function qa(a,b){return String.fromCharCode(a.charCodeAt(0)-(b-(parseInt(b/2)*2)));}
function qm_oo(e,o,nt){if(!o)o=this;if(qm_la==o)return;if(window.qmad&&qmad.bhover&&!
nt)eval(qmad.bhover);if(window.qmwait){qm_kille(e);
return;}clearTimeout(qm_tt);qm_tt=null;if(!nt&&o.qmts)
{qm_si=o;qm_tt=setTimeout("qm_oo(new Object(),qm_si,1)",o.qmts);
return;}var a=o;if(a[qp].isrun){qm_kille(e);
return;}qm_la=o;var go=true;while((a=a[qp])&&!qm_a(a))
{if(a==qm_li)go=false;}if(qm_li&&go){a=o;if((!a.cdiv)||(a.cdiv&&a.cdiv!
=qm_li))qm_uo(qm_li);a=qm_li;while((a=a[qp])&&!qm_a(a)){if(a!=o[qp])qm_uo(a);else
break;}}var b=o;var c=o.cdiv;if(b.cdiv){var aw=b.offsetWidth;var ah=b.offsetHeight;var
ax=b.offsetLeft;var ay=b.offsetTop;if(c[qp].ch){aw=0;if(c.fl)ax=0;}else {if(c.rl){ax=ax-
c.offsetWidth;aw=0;}ah=0;}if(qm_o){ax-=b[qp].clientLeft;ay-=b[qp].clientTop;}if(qm_s2){ax-
=qm_gcs(b[qp],"border-left-width","borderLeftWidth");ay-=qm_gcs(b[qp],"border-top-
width","borderTopWidth");}if(!c.ismove){c.style.left=(ax+aw)+"px";c.style.top=(ay+ah)
+"px";}x2("qmactive",o,1);if(window.qmad&&qmad.bvis)eval(qmad.bvis);c.style.visibility="inheri
t";qm_li=c;}else if(!qm_a(b[qp]))qm_li=b[qp];else qm_li=null;qm_kille(e);};function
qm_gcs(obj,sname,jname){var
v;if(document.defaultView&&document.defaultView.getComputedStyle)v=document.defaultView.
getComputedStyle(obj,null).getPropertyValue(sname);else
if(obj.currentStyle)v=obj.currentStyle[jname];if(v&&!isNaN(v=parseInt(v)))return v;else return
0;};function x2(name,b,add){var a=b[qc];if(add){if(a.indexOf(name)==-1)b[qc]+=(a?' ':'')
+name;}else {b[qc]=a.replace(" "+name,"");b[qc]=b[qc].replace(name,"");}};function qm_kille(e)
{if(!e)e=event;e.cancelBubble=true;if(e.stopPropagation&&!
(qm_s&&e.type=="click"))e.stopPropagation();};function qm_pure(sd){if(sd.tagName=="UL"){var
nd=document.createElement("DIV");nd.qmpure=1;var
c;if(c=sd.style.cssText)nd.style.cssText=c;qm_convert(sd,nd);var
csp=document.createElement("SPAN");csp.className="qmclear";csp.innerHTML="&nbsp;";nd.ap
pendChild(csp);sd=sd[qp].replaceChild(nd,sd);sd=nd;}return sd;};function qm_convert(a,bm,l){if(!
l){bm.className=a.className;bm.id=a.id;}var ch=a.childNodes;for(var i=0;i<ch.length;i++)
{if(ch[i].tagName=="LI"){var sh=ch[i].childNodes;for(var j=0;j<sh.length;j++)
{if(sh[j]&&(sh[j].tagName=="A"||
sh[j].tagName=="SPAN"))bm.appendChild(ch[i].removeChild(sh[j]));if(sh[j]&&sh[j].tagName=="
UL"){var na=document.createElement("DIV");var
c;if(c=sh[j].style.cssText)na.style.cssText=c;if(c=sh[j].className)na.className=c;na=bm.appendC
hild(na);new qm_convert(sh[j],na,1)}}}}}
</script>

Tras pegar el código anterior, debeis pegar este otro entre <BODY>
segundo codigo</BODY>:

<div id="menudesplegable">
<ul id="qm0" class="qmmc">
<li><a class="qmparent" href="#" style="padding:0px;"><img class="qm-is qm-ia"
src="objetos/ciencia.jpg" width="110" height="82"></a>

<ul>
<li><a href="#">Satisfaction</a></li>
<li><a href="#">Our Goals</a></li>
<li><a href="#">Product Warranty</a></li>
<li><a href="#">Future Outlook</a></li>
<li><a href="#">Product Quality</a></li>
<li><a href="#">Continued Support</a></li>
</ul></li>
<li><a class="qmparent" href="#"><img class="qm-is qm-ia" src="objetos/ingenieria.jpg"
width="110" height="82"></a>

<ul>
<li><a href="#">Industriales</a></li>
<li><a href="#">Telecomunicación</a></li>
<li><a href="#">Informatica</a></li>
<li><a href="#">Arquitectura</a></li>
<li><a href="#">Caminos</a></li>
<li><a href="#">Aeronaútica</a></li>
<li><a href="#">Agronomos</a></li>
<li><a href="#">Montes</a></li>
<li><a href="#">Minas</a></li>
<li><a href="#">Navales</a></li>
</ul></li>

<li><a class="qmparent" href="#"><img class="qm-is qm-ia" src="objetos/medicina.jpg"


width="110" height="82"></a>

<ul>
<li><a href="#">Satisfaction</a></li>
<li><a href="#">Our Goals</a></li>
<li><a href="#">Product Warranty</a></li>
<li><a href="#">Future Outlook</a></li>
<li><a href="#">Product Quality</a></li>
<li><a href="#">Continued Support</a></li>
</ul></li>

<li><a class="qmparent" href="#"><img class="qm-is qm-ia"


src="objetos/informatica.jpg" width="110" height="82"></a>

<ul>
<li><a href="#">Curso de HTML</a></li>
<li><a href="#">Curso de Java</a></li>
<li><a href="#">Curso de Flash</a></li>
<li><a href="#">Otros Cursos</a></li>
</ul></li>

<li><a class="qmparent" href="#" style="padding:0px;"><img class="qm-is qm-ia"


src="objetos/fisica.jpg" width="110" height="82"></a>
<ul>
<li><a href="#">Satisfaction</a></li>
<li><a href="#">Our Goals</a></li>
<li><a href="#">Product Warranty</a></li>
<li><a href="#">Future Outlook</a></li>
<li><a href="#">Product Quality</a></li>
<li><a href="#">Continued Support</a></li>
</ul></li>
<li><a class="qmparent" href="#" style="padding:0px;"><img class="qm-is qm-ia"
src="objetos/matematicas.jpg" width="110" height="82"></a>

<ul>
<li><a href="#">Satisfaction</a></li>
<li><a href="#">Our Goals</a></li>
<li><a href="#">Product Warranty</a></li>
<li><a href="#">Future Outlook</a></li>
<li><a href="#">Product Quality</a></li>
<li><a href="#">Continued Support</a></li>
</ul></li>
<li><a class="qmparent" href="#"><img class="qm-is qm-ia" src="objetos/foro.jpg" width="110"
height="82"></a>

<ul>
<li><a href="#">Satisfaction</a></li>
<li><a href="#">Our Goals</a></li>
<li><a href="#">Product Warranty</a></li>
<li><a href="#">Future Outlook</a></li>
<li><a href="#">Product Quality</a></li>
<li><a href="#">Continued Support</a></li>
</ul></li>

<!--<li class="qmclear">&nbsp;</li>-->
</ul>
<script type="text/javascript">qm_create(0,false,0,500,false,false,false,false);</script>
</div>

Y por último en la hoja de estilos pegamos esto otro:


#menudesplegable {background-color: #CD0000 ; border-left: #CD0000 1px solid ; border-right:
#CD0000 1px solid ; width:800px; height:25px }

.qmmc .qmdivider{display:block;font-size:1px;border-width:0px;border-style:solid;}.qmmc
.qmdividery{float:left;width:0px;}.qmmc .qmtitle{display:block;cursor:default;white-
space:nowrap;}.qmclear {font-size:1px;height:0px;width:0px;clear:left;line-
height:0px;display:block;float:none !important;}.qmmc {position:relative;zoom:1;}.qmmc a,
.qmmc li {float:left;display:block;white-space:nowrap;}.qmmc div a, .qmmc ul a, .qmmc ul li
{float:none;}.qmsh div a {float:left;}.qmmc div{visibility:hidden;position:absolute;}.qmmc ul
{left:-10000px;position:absolute;}.qmmc, .qmmc ul {list-
style:none;padding:0px;margin:0px;}.qmmc li a {float:none}.qmmc li{position:relative;}.qmmc ul
{z-index:10;}.qmmc ul ul {z-index:20;}.qmmc ul ul ul {z-index:30;}.qmmc ul ul ul ul {z-
index:40;}.qmmc ul ul ul ul ul {z-index:50;}li:hover>ul{left:auto;}#qm0 ul {top:100%;}#qm0 ul
li:hover>ul{top:0px;left:100%;}
/*!!!!!!!!!!! Para modificar !!!!!!!!!!!*/
/* Menu 0 */

/*"""""""" (MAIN) Container""""""""*/


#qm0
{margin:0px 0px 0px 9px;}

/*"""""""" (MAIN) Items""""""""*/


#qm0 a
{ padding:0px 3px 0px 0px;
margin:0px;
background-color:#222222;
color:#ffffff;
font-family:Arial;
font-size:15px;
text-decoration:none;
border-width:1px;
border-style:none;}

/*"""""""" (SUB) Container""""""""*/


#qm0 div, #qm0 ul
{ background-color:transparent;
background-image:url(objetos/fondodesplegable.jpg);
background-repeat:repeat-y;
background-position:left center;
border-width:1px;
border-style:solid;
border-color:#222222;}

/*"""""""" (SUB) Items""""""""*/


#qm0 div a, #qm0 ul a
{ padding:2px 40px 2px 2px;
margin:0px;
background-color:transparent;
color:#eeeeee;
font-family:Arial;
font-size:15px;
text-decoration:none;
border-width:0px;
border-style:none;
border-color:#000000;}

/*"""""""" (SUB) Hover State""""""""*/


#qm0 div a:hover, #qm0 ul a:hover
{ color:#ffffff;
text-decoration:underline;}
/*"""""""" (SUB) Active State""""""""*/
body #qm0 div .qmactive, body #qm0 div .qmactive:hover
{ background-color:#ffffff;
color:#000000;}

/*"""""""" Individual Vertical Dividers""""""""*/


#qm0 .qmdividery
{ border-left-width:1px;
height:82px;}

En las rutas marcadas en rojo, en los codigos anteriores debeis poner las vuestras propias, donde
encontrar las imagines que deseais insertar en el menú desplegable.
Insertar un Foro en una Página Web
Una de las mejores maneras de mantener una página web viva es sin duda incluir un buen foro.
Además de dar la sensación de que la web es actualizada a diario (cada día hay nuevos mensajes
que leer) crea (si consigues buen ambiente en él) una especie de adicción en sus visitantes de forma
que te aseguras que la gente volverá periódicamente para ver qué nuevos temas se tratan en él.
Por supuesto, para ello es preciso mimar al foro, es decir, cuidar que no aparezcan mensajes basura
(spam, cosas que nada tienen que ver con el foro y que suelen molestar bastante al visitante),
responder rápidamente a las cuestiones que se plantean, escuchar la opinión de tus visitas y hacerles
caso cuando te propongan mejoras. En definitiva, mantenerlo saludable y con buena onda.
Existen multitud de alternativas a la hora de escoger un foro para tu página web, gratuitas en la
mayoría de los casos, aunque por desgracia los mejores foros necesitan de ciertos requisitos que no
todos los servidores (espacios web) te ofrecen, pero eso lo veremos ahora.
Te recomiendo que empieces verificando si tu servidor cumple los requisitos para alojar un foro tipo
phpBB2 ( o phpBB3). Si es así adelante, instalate uno siguiendo las instrucciones del siguiente
apartado. En caso contrario aún puedes conseguir uno de ese tipo pero instalándolo en algún otro
servidor (esto lo puedes ver en la sección Otros Foros) o confórmate con un simple foro, que
aunque con menos posibilidades, también ayudan a dar ese toque "vivo" a tu web. La mayoría de
hosting (u hospedajes o espacios web) gratuitos no cumplen los requisitos para poder colocar un
buen foro. De todas formas no creas que un hosting de pago es tan caro. Mira este por ejemplo.
Por supuesto, si no tienes algo de tiempo para dedicarle al foro, mejor no lo pongas en tu página
web, pues en lugar de resultar útil a tus visitantes, será un motivo de enfado al ver que no les
respondes, a no ser que cuentes con buena gente que te ayude a responder por tí...
En el menú de la izquierda de esta página encontraras las opciones que detallamos paso a paso para
que puedas instalar un foro sin problemas, simplemente siguiendo las instrucciones. Si no tienes ni
idea de cuál escoger fiate de mi y elige el foro tipo phpBB3.

Características de un foro tipo PhpBB3 para


tu página web
Siguiendo estas instrucciones paso a paso lograrás instalar un foro del tipo phpBB3 en tu página
web. Como sabrás ya, existen varios tipos de foros para instalar en tu web, pero quizás unos de los
mejores sean los tipo phpBB, por su fácil uso para los visitantes y fácil instalación para el
webmaster. Eso si, el servidor donde lo instales debe cumplir una serie de requisitos que veremos
más adelante.
Como una imagen vale más que mil palabras, te dejo la dirección de algunos foros de este tipo para
que veas tú mismo qué aspecto tiene y las funcionalidades que ofrece, oki?
• Foro phpBB3 del grupo de Rock, La Fonda.
• Foro de soporte phpBB (en inglés, pero sirve para ver como son, no? je je)
Quizás ya estés acostumbrado al tipo phpBB2, pero este nuevo tipo, el phpBB3 dispone de algunas
mejoras, como una mayor defensa frente a los mensajes basura, y frente a ataques hacker, soporte
UTF-8, permite a los usuarios subir archivos para compartir con el resto de visitantes, tiene lista de
amigos,..... entre otras cosas. Aquí puedes ver las diferencias entre phpBB2 y phpBB3.
Si te gusta la apariencia sigue leyendo e instalate uno fácil y gratuitamente. Más adelante
aprenderemos a personalizarlo un poco, cambiando colores de fondo, el logotipo de arriba y muchas
otras cosas.

Requisitos para instalar un foro tipo PhpBB3


Para instalar un foro phpbb3 en tu página web necesitaras como mínimo los siguientes requisitos:
1.- Un espacio web:
Un servidor o hosting. Puede ser gratuito o de pago. Es el mismo en el que tienes o tendrás tu web,
es decir, no es necesario tener un hosting para la web y otro para el foro.
2.- Una base de datos Mysql:
Este servidor te debe dar una base de datos del tipo mysql, con versión 3.X como mínimo.
3.- El servidor debe aceptar PHP4:
Si tu servidor corre bajo linux seguro que lo tiene. Si corre bajo windows seguro que no (hablamos
del servidor, que tu tengas windows o linux en tu ordenador no importa para nada). Como pista, si
tu servidor acepta ASP lo más seguro es que no acepte PHP.
4.- Activar la base de datos:
Tienes que tener activa la base de datos para el foro y conocer el nombre de usuario para la misma,
la contraseña y la dirección de esa base de datos. Normalmente tienes que activarla tú, desde el
panel de control de tu servidor. Pero si no sabes hacerlo pregúntales o pídeles que te la activen y que
te pasen los datos necesarios.
5.- Poder subir los archivos:
Has de poder subir los archivos del foro a tu servidor para su instalación. Esto se hace o bien con un
programa FTP o bien desde el panel de acceso de tu servidor si tiene la opción de administrar
archivos.
AVISO: Sin estos requisitos mínimos no puedes incluir un foro de este tipo y tendrás que
apañartelas de otra forma. Y si no tienes claro alguno de estos requisitos, escribe a tu servidor para
que te facilite datos o ayuda.
Normalmente un servidor gratuito puede que no te ofrezca estas cosas, en especial el que funcione
el php o el que te ceda una base de datos, pero si buscas seguramente encuentres alguno. En la
sección Hosting te damos algunas pistas. Si no encuentras ningún servidor gratuito que te convenza,
ten en cuenta que uno de pago no es actualmente nada caro. Por unos 24 dolares (19 euros?) al año
puedes encontrar alguno como este, de muy alta calidad y que cumplen perfectamente estos
requisitos.

Cómo Instalar un foro tipo PhpBB3 en tu


página web
Para empezar nos vamos a la página oficial de phpBB, de donde podemos descargar directamente la
versión más actual del foro phpBB3. Podéis abrir esa web desde aquí: http://www.phpbb.com Se
abrirá en una nueva página para que tengas las dos abiertas y puedas seguir las instrucciones paso a
paso.
Descarga los archivos que aparecen en este apartado de la imagen:

Al pulsar allí se abre otra página en la que tienes que hacer clic acá:

Acepta la descarga y guardate el archivo zip en una carpeta cualquiera de tu PC. Mejor que no sea
dentro de la carpeta de tu página web por ahora. No estaría mal si creas una carpeta en tu escritorio
llamada programas, donde ir guardando las cosillas que te descargues relacionadas con la página
web, pero es solo una idea.
Una vez descargado, hazle doble clic para descomprimir el archivo zip. Si no puedes
descomprimirlo será que te falta un programa de descompresión de archivos zip. Descárgate el
winzip.
Una vez abras el archivo zip, descarga su contenido (una carpeta llamada phpBB3) dentro de la
carpeta donde guardas tus archivos de la página web. Para descargarlo basta con abrir el winzip (o
software similar) y arrastrar la carpeta phpBB3 hasta la carpeta donde guardas los archivos de tu
web. Ya lo has hecho? Bien, ahora abre el programa que uses para subir archivos a tu web y sube
esa carpeta. Recuerda que han de subirse todos y correctamente para que el foro funcione, de modo
que si te da algún error mejor vuelve a subir todo antes de continuar con la instalación.
Una vez subida la carpeta phpBB3 con todo su contenido a tu servidor, pasamos a la siguiente
sección donde te explico cómo configurarlo y hacerlo funcionar, oki? Pronto te veo escribiendo en
tu propio foro! je je je.

Cómo Configurar el foro PhpBB3 de tu página


web
Bien. Si has seguido las instrucciones hasta ahora, tendrás dentro de la carpeta donde guardas los
archivos de tu web en tu ordenador una nueva carpeta phpBB3 (con el nombre que le hayas
puesto...) con todos los archivos necesarios para que funcione el nuevo foro y la habrás subido
correctamente a tu espacio web o hosting.
El siguiente paso es dar de alta la base de datos MySql que necesitas para el foro. Contacta con tu
servidor para saber cómo hacerlo o pregúntanos en el Foro CCTW pues quizás podamos ayudarte.
Hay una sección llamada Foros donde podemos hablar de estos temas.
Una vez tengas la base de datos dada de alta o activada, tendrás un nombre de usuario (de la base de
datos), un nombre de la base de datos y una contraseña para su administración. Sin estas tres cosas
no puedes configurar el foro para hacerlo funcionar, así que mientras que no tengas esos tres datos
no hace falta que sigas con estas instrucciones. Averigualo antes de seguir o bien preguntando a tu
servidor directamente o bien preguntándonos a nosotros en nuestro foro.
Ya tienes esos tres datos? Genial! sigamos.
Para configurar tu nuevo foro phpBB3 tienes que irte a tu navegador y escribir la dirección de tu
web seguida de una barra y esto:
www.ladirecciondetuweb/phpBB3
Bueno, realmente en lugar de phpBB3 tienes que poner el nombre que le has dado a esa carpeta.
Visita esa dirección y verás esta ventana:

Si, está todo en inglés por ahora, pero no te preocupes que al final lo traducimos al castellano. Haz
clic en Install para continuar con la instalación del foro. Aparece entonces esta otra ventana en la
que la única opción es pulsar el botón de la parte de abajo. Facil verdad? Je je je...

En la siguiente ventana el programa de instalación hace un chequeo para comprobar si tu servidor


cumple todos los requisitos necesarios. Quizás te salgan algunos requisitos en rojo. En ese caso
toma nota y nos lo comentas en el foro. O si es posible que hagas una captura de la pantalla para
enseñarnosla, mejor que mejor.
En el apartado de bases de datos, llamado Supported databases te mostrará varias en rojo. Es
suficiente que tengas una en verde.
En cualquier caso, pulsa en el botón de abajo de esa pantalla para continuar la instalación. Ten en
cuenta que algunos de esos puntos rojos pueden no ser imprescindibles.
En la siguiente pantalla vemos esto de abajo. Te explico punto por punto lo que tienes que poner,
(1) Aquí escojes el tipo de base de datos que admite tu servidor y en la que vas a instalar el foro.
Normalmente aparece MySQL. De todas formas solo aparecen las que ha detectado, de modo que
escoje cualquiera, pero preferentemente MySQL si te aparece.
(2) Es el servidor de la base de datos. Normalmente no es necesario poner nada, pero si tras darle a
seguir no lo acepta en blanco, entonces escribe localhost en esa casilla y repites la operación. Si
tampoco funciona pregunta a tu servidor qué tienes que poner, o nos lo consultas en el foro.
(3) Es el puerto del servidor. Déjalo en blanco.
(4) Nombre de la base de datos. Este es uno de los tres datos que te dan cuando activas la base de
datos en la que vas a instalar el foro.
(5) Nombre de usuario para acceder a la base de datos. Este es el segundo dato que te dan al activar
la base de datos.
(6) Contraseña de la base de datos, es el tercer dato que te dije antes.
(7) Prefijo de la base de datos. Cuando instalas algo en una base de datos (un foro, un top, o lo que
sea) se suele instalar con un prefijo. De este modo, todos los componentes de una aplicación tendrán
un prefijo y otra aplicación puede tener otro prefijo distinto. Esto sirve para no mezclar
componentes de dos aplicaciones instalados en la misma base de datos. Por ejemplo, si solo
dispones de una base de datos y deseas instalar dos foros, a uno le puedes poner el prefijo foro1_ y
al otro otroforo2_ y así no se mezclan componentes. Déjalo como está (phpbb_) pero ten en cuenta
esto que te digo por si alguna vez deseas instalar alguna otra cosa en esa base de datos, oki?
Pues ya está. Dale a seguir y veamos que pasa... Si todo sale bien te aparecerá esto:

Y si no... apunta el fallo, vuelve a intentarlo y si no te sale nos lo dices, o avisas a tu servidor para
que te ayude. Cuando todo salga bien te aparecerá esta nueva ventana diciendo que se ha realizado
un test y que todo está perfecto
Tras pulsar sobre "Proceed to next step" (seguir con el siguiente paso) aparece otra ventana más:

Vaya tela, menos mal que nos nos piden datos y más datos sino que simplemente hay que aceptar, je
je je. Acepta de nuevo y aparece otra ventana más en la que tenemos que poner algunos datos para
la configuración del foro. Puedes dejarla tal y como está y pulsar en "Proceed to next step", pues lo
que viene por defecto es totalmente válido.
Nos lleva a.... otra ventana más.

De nuevo, haz clic en aceptar y seguimos. En la siguiente pantalla te da la enhorabuena


(Congratulations!), te pide que borres o renombres la carpeta install de tu servidor (que está dentro
de la carpeta de archivos del foro), así que abre el programa que uses para subir los archivos a tu
web (sin cerrar la ventana del navegador en la que estás haciendo la instalación del foro) y
renombra o borra esa carpeta que ya no nos hace falta.
Tras eliminarla o renombrarla vuelve a la ventana de configuración del foro y pulsa sobre "Login",
ese botón que aparece en la parte de abajo de la ventana donde te han dado la enhorabuena.

Tras pulsar sobre "login" te aparece el panel de administración de tu nuevo foro, que ya está en
marcha. Desde este panel puedes personalizar el foro a tu gusto. Crear las secciones que quieras, dar
permisos a los visitantes, convertirlos en moderadores, etc, etc, etc.
Para ir a lo que es el foro en sí, pulsa arriba a la derecha donde pone "board Index" y verás el
aspecto de tu foro ya funcionando. Como verás, está todo en inglés y además las secciones que tiene
no son para nada las que tu quieres. Como te he comentado, para darle la forma que deseas has de
hacerlo desde el panel de administración. Para volver a él cualquier otro día has de visitar el foro,
logearte (pulsando donde pone "login") en él (con el nombre y contraseña que pusiste durante la
configuración) y después pulsar abajo del todo donde pone "Administration Control Panel".
Pues eso. Ya tienes el foro creado. A continuación vamos a ponerlo en castellano y después
aprenderemos a crear las secciones del foro que queremos y otras cosillas interesantes.
Tag HTML
A continuación, encontrarás una lista de todos los tags HTML (lenguaje de marcas hipertextual)
para el estándar HTML 4.01, que también pertenecen al estándar XHTML (lenguaje de marcas
hipertextual extensible) con la excepción de aquellos desaprobados. Junto a cada tag encontrarás un
símbolo indicando si el tag es vacío o no, el cual representa una mejor opción no tan difícil de
lograr. Recomendamos fuertemente usar XHTML en lugar de HTML, debido a los beneficios y a
las pequeñas diferencias.
El color rojo se ha usado para marcar tags desaprobados, cuyo uso no es recomendado. Esto se debe
a que han sido reemplazados por otros tags (por ejemplo, el tag applet ha sido reemplazado por el
tag object) o porque las hojas de estilos se han convertido en la forma preferida de lograr sus
mismos efectos.

Lista de tags HTML


Tag Vacío Descripción corta
<!-- --> Inserta comentarios ocultos
<!DOCTYPE> Establece el tipo de documento
<a> Inserta vínculos o marcadores
<abbr> Explica abreviaciones
<acronym> Explica acrónimos
<address> Provee información de contacto
<applet> Inserta un applet (scripts)
<area> Define sectores para mapas de imagen
<b> Texto en negrita
<base> URI base para resolver URIs relativas
<basefont> Tamaño de la fuente predeterminado
<bdo> Suprime el algoritmo bidireccional
<big> Texto en tamaño "grande".
<blockquote> Citar párrafos
<body> Contiene los elementos a mostrar
<br> Fuerza un quiebre de línea
<button> Crea un botón
<caption> Establece un título para una tabla
<center> Centra su contenido
<cite> Inserta una cita o referencia
<code> Representa texto de computadora
<col> Da atributos a columnas en una tabla
<colgroup> Agrupa columnas en una tabla
<dd> Define descripciones en una lista
<del> Indica texto eliminado
<dfn> Asigna una definición a un término
<dir> Inserta una lista de directorios (árbol)
<div> Define un bloque de contenido
<dl> Define una lista
<dt> Inserta un término en una lista
<em> Indica énfasis
<fieldset> Agrupa controles en un formulario
<font> Establece el estilo de fuente
<form> Inserta un formulario
<frame> Inserta un marco
<frameset> Inserta un grupo de frames
<h1> Encabezado de nivel 1
<h2> Encabezado de nivel 2
<h3> Encabezado de nivel 3
<h4> Encabezado de nivel 4
<h5> Encabezado de nivel 5
<h6> Encabezado de nivel 6
<head> Define el bloque de encabezado
<hr> Dibuja una línea o regla horizontal
<html> Contiene al documento
<i> Muestra texto en itálica
<iframe> Inserta un marco dentro del documento
<img> Inserta una imagen
<input> Muestra controles de entrada
<ins> Indica texto insertado
<isindex> Entrada de línea simple
<kbd> Indica texto a ingresarse por el usuario
<label> Establece una etiqueta para un control
<legend> Asigna un título a un "fieldset"
<li> Define un artículo en una lista
<link> Ofrece informacón relacional
<map> Define un mapa de imagen
<menu> Lista menú
<meta> Da información sobre el documento
<noframes> Contenido alternativo para marcos
<noscript> Contenido alternativo para scripts
<object> Ejecuta aplicaciones externas
<ol> Inserta una lista ordenada
<optgroup> Agrupa opciones en un control select
<option> Define una opción en un control select
<p> Define un párrafo
<param> Da un parámetro para un objeto
<pre> Bloque de texto preformateado
<q> Inserta una cita en una línea
<s> Muestra texto tachado
<samp> Representa texto de programas
<script> Contiene scripts
<select> Crea un control select
<small> Muestra texto en letra "pequeña"
<span> Asigna atributos al texto en líneas
<strike> Muestra texto tachado
<strong> Indica énfasis fuerte
<style> Define atributos visuales (hojas estilo)
<sub> Define texto en sub-índice
<sup> Define texto en super-índice
<table> Inserta una tabla
<tbody> Define un cuerpo en una tabla
<td> Celda regular de una tabla
<textarea> Entrada de texto de líneas múltiples
<tfoot> Define un pie en una tabla
<th> Celda de encabezado de una tabla
<thead> Define un encabezado de tabla
<title> Define el título del documento
<tr> Inserta una fila en una tabla
<tt> Muestra texto en "teletype"
<u> Muestra texto subrayado
<ul> Inserta una lista sin orden
<var> Indica una instancia de una variable
Eventos en HTML
Así como los atributos, los eventos pueden ser definidos en tags HTML (lenguaje de marcas
hipertextual). Los eventos, en lugar de dar valores a los elementos como lo hacen los atributos,
ejecutan acciones cuando ocurren. Estas acciones son definidas por un script del "lado cliente", que
son programas escritos para realizar cierta acción en un lenguaje específico (por ejemplo,
JavaScript, VBScript, etc.). Existen diferentes eventos que se disparan en diferentes instancias de
acuerdo con las acciones de los usuarios o navegadores.

Lista de eventos
A continuación hay una lista de eventos disponibles para el estándar HTML 4.01.
• onload: El evento onload ocurre cuando el agente de usuario termina de cargar la ventana o
todos los marcos en una página de marcos.
• onunload: El evento onunload ocurre cuando el agente de usuario quita un documento de
una ventana o marco.
• onclick: El evento onclick es disparado cuando el botón del mouse es presionado y soltado
(click) sobre el elemento.
• ondblclick: El evento ondblclick ocurre cuando el botón del puntero es presionado dos veces
(doble click) sobre un elemento.
• onmousedown: El evento onmousedown es disparado cuando el botón del mouse es
presionado sobre el elemento.
• onmouseup: El evento onmouseup ocurre cuando el botón del puntero es soltado sobre un
elemento.
• onmouseover: El evento onmouseover es disparado cuando el mouse se mueve sobre el
elemento (desde afuera).
• onmousemove: El evento onmousemove ocurre cuando el puntero es movido mientras está
sobre un elemento.
• onmouseout: El evento onmouseout es disparado cuando el mouse es movido hacia afuera
de un elemento.
• onfocus: El evento onfocus ocurre cuando un elemento recibe el enfoque sea con el puntero
o con la tecla tab.
• onblur: El evento onblur es disparado cuando un elemento pierde el enfoque sea con el
puntero o con la tecla tab.
• onkeypress: El evento onkeypress ocurre cuando una tecla es presionada y soltada sobre un
elemento.
• onkeydown: El evento onkeydown se dispara cuando una tecla es presionada sobre el
elemento.
• onkeyup: El evento onkeyup ocurre cuando una tecla es soltada sobre un elemento.
• onsubmit: El evento onsubmit es disparado cuando un formulario es enviado.
• onreset: El evento onreset ocurre cuando un formulario es reseteado.
• onselect: El evento onselect es disparado cuando un usuario selecciona un texto en un campo
de texto.
• onchange: El evento onchange ocurre cuando un control pierde el enfoque y su valor ha sido
modificado desde que recibió el enfoque.
Referencia de entidad de caracteres (character
entity reference)
Una entidad de carácter es un código utilizado para representar caracteres que no son soportados
por el set de caracteres de un documento. Existen tres formas de escribir una entidad de carácter, y
todas ellas comienzan con un símbolo "&" y terminan con un punto y coma ";":
• Nombre de la entidad: El nombre asignado (por ejemplo, &aacute; para á)
• Decimal: Su valor decimal (por ejemplo, &225; para á)
• Hexadecimal: Su valor hexadecimal (por ejemplo, &#xE1; para á)
Muchos navegadores no proveen soporte para todas las entidades de caracteres y usualmente
muestran un cuadrado blanco en su lugar. Otro problema existente con respecto a la compatibilidad
de los navegadores es que algunos de ellos fallan en interpretar una o más de las formas disponibles
para escribirlos (por ejemplo, por su valor hexadecimal).
A continuación, mostramos tres listas de entidades de caracteres escritas y mostradas (por tu
navegador) en las tres formas:

Referncia de entidad de caracteres para caracteres ISO 8859-1 (Latin 1)


Nombre de entidad Código decimal Código hexadecimal
&nbsp; &#160; &#xA0;
&iexcl; ¡ &#161; ¡ &#xA1; ¡
&cent; ¢ &#162; ¢ &#xA2; ¢
&pound; £ &#163; £ &#xA3; £
&curren; ¤ &#164; ¤ &#xA4; ¤
&yen; ¥ &#165; ¥ &#xA5; ¥
&brvbar; ¦ &#166; ¦ &#xA6; ¦
&sect; § &#167; § &#xA7; §
&uml; ¨ &#168; ¨ &#xA8; ¨
&copy; © &#169; © &#xA9; ©
&ordf; ª &#170; ª &#xAA; ª
&laquo; « &#171; « &#xAB; «
&not; ¬ &#172; ¬ &#xAC; ¬
&shy; &#173; &#xAD;
&reg; ® &#174; ® &#xAE; ®
&macr; ¯ &#175; ¯ &#xAF; ¯
&deg; ° &#176; ° &#xB0; °
&plusmn; ± &#177; ± &#xB1; ±
&sup2; ² &#178; ² &#xB2; ²
&sup3; ³ &#179; ³ &#xB3; ³
&acute; ´ &#180; ´ &#xB4; ´
&micro; µ &#181; µ &#xB5; µ
&para; ¶ &#182; ¶ &#xB6; ¶
&middot; · &#183; · &#xB7; ·
&cedil; ¸ &#184; ¸ &#xB8; ¸
Nombre de entidad Código decimal Código hexadecimal
&sup1; ¹ &#185; ¹ &#xB9; ¹
&ordm; º &#186; º &#xBA; º
&raquo; » &#187; » &#xBB; »
&frac14; ¼ &#188; ¼ &#xBC; ¼
&frac12; ½ &#189; ½ &#xBD; ½
&frac34; ¾ &#190; ¾ &#xBE; ¾
&iquest; ¿ &#191; ¿ &#xBF; ¿
&Agrave; À &#192; À &#xC0; À
&Aacute; Á &#193; Á &#xC1; Á
&Acirc; Â &#194; Â &#xC2; Â
&Atilde; Ã &#195; Ã &#xC3; Ã
&Auml; Ä &#196; Ä &#xC4; Ä
&Aring; Å &#197; Å &#xC5; Å
&AElig; Æ &#198; Æ &#xC6; Æ
&Ccedil; Ç &#199; Ç &#xC7; Ç
&Egrave; È &#200; È &#xC8; È
&Eacute; É &#201; É &#xC9; É
&Ecirc; Ê &#202; Ê &#xCA; Ê
&Euml; Ë &#203; Ë &#xCB; Ë
&Igrave; Ì &#204; Ì &#xCC; Ì
&Iacute; Í &#205; Í &#xCD; Í
&Icirc; Î &#206; Î &#xCE; Î
&Iuml; Ï &#207; Ï &#xCF; Ï
&ETH; Ð &#208; Ð &#xD0; Ð
&Ntilde; Ñ &#209; Ñ &#xD1; Ñ
&Ograve; Ò &#210; Ò &#xD2; Ò
&Oacute; Ó &#211; Ó &#xD3; Ó
&Ocirc; Ô &#212; Ô &#xD4; Ô
&Otilde; Õ &#213; Õ &#xD5; Õ
&Ouml; Ö &#214; Ö &#xD6; Ö
&times; × &#215; × &#xD7; ×
&Oslash; Ø &#216; Ø &#xD8; Ø
&Ugrave; Ù &#217; Ù &#xD9; Ù
&Uacute; Ú &#218; Ú &#xDA; Ú
&Ucirc; Û &#219; Û &#xDB; Û
&Uuml; Ü &#220; Ü &#xDC; Ü
&Yacute; Ý &#221; Ý &#xDD; Ý
&THORN; Þ &#222; Þ &#xDE; Þ
&szlig; ß &#223; ß &#xDF; ß
&agrave; à &#224; à &#xE0; à
&aacute; á &#225; á &#xE1; á
&acirc; â &#226; â &#xE2; â
Nombre de entidad Código decimal Código hexadecimal
&atilde; ã &#227; ã &#xE3; ã
&auml; ä &#228; ä &#xE4; ä
&aring; å &#229; å &#xE5; å
&aelig; æ &#230; æ &#xE6; æ
&ccedil; ç &#231; ç &#xE7; ç
&egrave; è &#232; è &#xE8; è
&eacute; é &#233; é &#xE9; é
&ecirc; ê &#234; ê &#xEA; ê
&euml; ë &#235; ë &#xEB; ë
&igrave; ì &#236; ì &#xEC; ì
&iacute; í &#237; í &#xED; í
&icirc; î &#238; î &#xEE; î
&iuml; ï &#239; ï &#xEF; ï
&eth; ð &#240; ð &#xF0; ð
&ntilde; ñ &#241; ñ &#xF1; ñ
&ograve; ò &#242; ò &#xF2; ò
&oacute; ó &#243; ó &#xF3; ó
&ocirc; ô &#244; ô &#xF4; ô
&otilde; õ &#245; õ &#xF5; õ
&ouml; ö &#246; ö &#xF6; ö
&divide; ÷ &#247; ÷ &#xF7; ÷
&oslash; ø &#248; ø &#xF8; ø
&ugrave; ù &#249; ù &#xF9; ù
&uacute; ú &#250; ú &#xFA; ú
&ucirc; û &#251; û &#xFB; û
&uuml; ü &#252; ü &#xFC; ü
&yacute; ý &#253; ý &#xFD; ý
&thorn; þ &#254; þ &#xFE; þ
&yuml; ÿ &#255; ÿ &#xFF; ÿ

Referencia de entidad de caracteres para símbolos, símbolos matemáticos, y


letras griegas
Nombre de la entidad Código decimal Código hexadecimal
&fnof; ƒ &#402; ƒ &#x192; ƒ
&Alpha; Α &#913; Α &#x391; Α
&Beta; Β &#914; Β &#x392; Β
&Gamma; Γ &#915; Γ &#x393; Γ
&Delta; Δ &#916; Δ &#x394; Δ
&Epsilon; Ε &#917; Ε &#x395; Ε
&Zeta; Ζ &#918; Ζ &#x396; Ζ
Nombre de la entidad Código decimal Código hexadecimal
&Eta; Η &#919; Η &#x397; Η
&Theta; Θ &#920; Θ &#x398; Θ
&Iota; Ι &#921; Ι &#x399; Ι
&Kappa; Κ &#922; Κ &#x39A; Κ
&Lambda; Λ &#923; Λ &#x39B; Λ
&Mu; Μ &#924; Μ &#x39C; Μ
&Nu; Ν &#925; Ν &#x39D; Ν
&Xi; Ξ &#926; Ξ &#x39E; Ξ
&Omicron; Ο &#927; Ο &#x39F; Ο
&Pi; Π &#928; Π &#x3A0; Π
&Rho; Ρ &#929; Ρ &#x3A1; Ρ
&Sigma; Σ &#931; Σ &#x3A3; Σ
&Tau; Τ &#932; Τ &#x3A4; Τ
&Upsilon; Υ &#933; Υ &#x3A5; Υ
&Phi; Φ &#934; Φ &#x3A6; Φ
&Chi; Χ &#935; Χ &#x3A7; Χ
&Psi; Ψ &#936; Ψ &#x3A8; Ψ
&Omega; Ω &#937; Ω &#x3A9; Ω
&alpha; α &#945; α &#x3B1; α
&beta; β &#946; β &#x3B2; β
&gamma; γ &#947; γ &#x3B3; γ
&delta; δ &#948; δ &#x3B4; δ
&epsilon; ε &#949; ε &#x3B5; ε
&zeta; ζ &#950; ζ &#x3B6; ζ
&eta; η &#951; η &#x3B7; η
&theta; θ &#952; θ &#x3B8; θ
&iota; ι &#953; ι &#x3B9; ι
&kappa; κ &#954; κ &#x3BA; κ
&lambda; λ &#955; λ &#x3BB; λ
&mu; μ &#956; μ &#x3BC; μ
&nu; ν &#957; ν &#x3BD; ν
&xi; ξ &#958; ξ &#x3BE; ξ
&omicron; ο &#959; ο &#x3BF; ο
&pi; π &#960; π &#x3C0; π
&rho; ρ &#961; ρ &#x3C1; ρ
&sigmaf; ς &#962; ς &#x3C2; ς
&sigma; σ &#963; σ &#x3C3; σ
&tau; τ &#964; τ &#x3C4; τ
&upsilon; υ &#965; υ &#x3C5; υ
&phi; φ &#966; φ &#x3C6; φ
&chi; χ &#967; χ &#x3C7; χ
&psi; ψ &#968; ψ &#x3C8; ψ
Nombre de la entidad Código decimal Código hexadecimal
&omega; ω &#969; ω &#x3C9; ω
&thetasym; ϑ &#977; ϑ &#x3D1; ϑ
&upsih; ϒ &#978; ϒ &#x3D2; ϒ
&piv; ϖ &#982; ϖ &#x3D6; ϖ
&bull; • &#8226; • &#x2022; •
&hellip; … &#8230; … &#x2026; …
&prime; ′ &#8242; ′ &#x2032; ′
&Prime; ″ &#8243; ″ &#x2033; ″
&oline; ‾ &#8254; ‾ &#x203E; ‾
&frasl; ⁄ &#8260; ⁄ &#x2044; ⁄
&weierp; ℘ &#8472; ℘ &#x2118; ℘
&image; ℑ &#8465; ℑ &#x2111; ℑ
&real; ℜ &#8476; ℜ &#x211C; ℜ
&trade; ™ &#8482; ™ &#x2122; ™
&alefsym; ℵ &#8501; ℵ &#x2135; ℵ
&larr; ← &#8592; ← &#x2190; ←
&uarr; ↑ &#8593; ↑ &#x2191; ↑
&rarr; → &#8594; → &#x2192; →
&darr; ↓ &#8595; ↓ &#x2193; ↓
&harr; ↔ &#8596; ↔ &#x2194; ↔
&crarr; ↵ &#8629; ↵ &#x21B5; ↵
&lArr; ⇐ &#8656; ⇐ &#x21D0; ⇐
&uArr; ⇑ &#8657; ⇑ &#x21D1; ⇑
&rArr; ⇒ &#8658; ⇒ &#x21D2; ⇒
&dArr; ⇓ &#8659; ⇓ &#x21D3; ⇓
&hArr; ⇔ &#8660; ⇔ &#x21D4; ⇔
&forall; ∀ &#8704; ∀ &#x2200; ∀
&part; ∂ &#8706; ∂ &#x2202; ∂
&exist; ∃ &#8707; ∃ &#x2203; ∃
&empty; ∅ &#8709; ∅ &#x2205; ∅
&nabla; ∇ &#8711; ∇ &#x2207; ∇
&isin; ∈ &#8712; ∈ &#x2208; ∈
&notin; ∉ &#8713; ∉ &#x2209; ∉
&ni; ∋ &#8715; ∋ &#x220B; ∋
&prod; ∏ &#8719; ∏ &#x220F; ∏
&sum; ∑ &#8721; ∑ &#x2211; ∑
&minus; − &#8722; − &#x2212; −
&lowast; ∗ &#8727; ∗ &#x2217; ∗
&radic; √ &#8730; √ &#x221A; √
&prop; ∝ &#8733; ∝ &#x221D; ∝
&infin; ∞ &#8734; ∞ &#x221E; ∞
&ang; ∠ &#8736; ∠ &#x2220; ∠
Nombre de la entidad Código decimal Código hexadecimal
&and; ∧ &#8743; ∧ &#x2227; ∧
&or; ∨ &#8744; ∨ &#x2228; ∨
&cap; ∩ &#8745; ∩ &#x2229; ∩
&cup; ∪ &#8746; ∪ &#x222A; ∪
&int; ∫ &#8747; ∫ &#x222B; ∫
&there4; ∴ &#8756; ∴ &#x2234; ∴
&sim; ∼ &#8764; ∼ &#x223C; ∼
&cong; ≅ &#8773; ≅ &#x2245; ≅
&asymp; ≈ &#8776; ≈ &#x2248; ≈
&ne; ≠ &#8800; ≠ &#x2260; ≠
&equiv; ≡ &#8801; ≡ &#x2261; ≡
&le; ≤ &#8804; ≤ &#x2264; ≤
&ge; ≥ &#8805; ≥ &#x2265; ≥
&sub; ⊂ &#8834; ⊂ &#x2282; ⊂
&sup; ⊃ &#8835; ⊃ &#x2283; ⊃
&nsub; ⊄ &#8836; ⊄ &#x2284; ⊄
&sube; ⊆ &#8838; ⊆ &#x2286; ⊆
&supe; ⊇ &#8839; ⊇ &#x2287; ⊇
&oplus; ⊕ &#8853; ⊕ &#x2295; ⊕
&otimes; ⊗ &#8855; ⊗ &#x2297; ⊗
&perp; ⊥ &#8869; ⊥ &#x22A5; ⊥
&sdot; ⋅ &#8901; ⋅ &#x22C5; ⋅
&lceil; ⌈ &#8968; ⌈ &#x2308; ⌈
&rceil; ⌉ &#8969; ⌉ &#x2309; ⌉
&lfloor; ⌊ &#8970; ⌊ &#x230A; ⌊
&rfloor; ⌋ &#8971; ⌋ &#x230B; ⌋
&lang; 〈 &#9001; 〈 &#x2329; 〈
&rang; 〉 &#9002; 〉 &#x232A; 〉
&loz; ◊ &#9674; ◊ &#x25CA; ◊
&spades; ♠ &#9824; ♠ &#x2660; ♠
&clubs; ♣ &#9827; ♣ &#x2663; ♣
&hearts; ♥ &#9829; ♥ &#x2665; ♥
&diams; ♦ &#9830; ♦ &#x2666; ♦

Referencia de entidades de caracteres para marcas y caracteres de


internacionalización
Nombre de la entidad Código decimal Código hexadecimal
&quot; " &#34; " &#x22; "
&amp; & &#38; & &#x26; &
&lt; < &#60; < &#x3C; <
&gt; > &#62; > &#x3E; >
Nombre de la entidad Código decimal Código hexadecimal
&OElig; Œ &#338; Œ &#x152; Œ
&oelig; œ &#339; œ &#x153; œ
&Scaron; Š &#352; Š &#x160; Š
&scaron; š &#353; š &#x161; š
&Yuml; Ÿ &#376; Ÿ &#x178; Ÿ
&circ; ˆ &#710; ˆ &#x2C6; ˆ
&tilde; ˜ &#732; ˜ &#x2DC; ˜
&ensp;   &#8194;   &#x2002;  
&emsp;   &#8195;   &#x2003;  
&thinsp;   &#8201;   &#x2009;  
&zwnj; ‌ &#8204; ‌ &#x200C; ‌
&zwj; ‍ &#8205; ‍ &#x200D; ‍
&lrm; &#8206; &#x200E;
&rlm; &#8207; &#x200F;
&ndash; – &#8211; – &#x2013; –
&mdash; — &#8212; — &#x2014; —
&lsquo; ‘ &#8216; ‘ &#x2018; ‘
&rsquo; ’ &#8217; ’ &#x2019; ’
&sbquo; ‚ &#8218; ‚ &#x201A; ‚
&ldquo; “ &#8220; “ &#x201C; “
&rdquo; ” &#8221; ” &#x201D; ”
&bdquo; „ &#8222; „ &#x201E; „
&dagger; † &#8224; † &#x2020; †
&Dagger; ‡ &#8225; ‡ &#x2021; ‡
&permil; ‰ &#8240; ‰ &#x2030; ‰
&lsaquo; ‹ &#8249; ‹ &#x2039; ‹
&rsaquo; › &#8250; › &#x203A; ›
&euro; € &#8364; € &#x20AC; €
Códigos de colores HTML
Los colores en HTML son construidos usando una combinación de tres colores básicos: rojo, verde
y azul. Cada uno de estos colores toma un valor entre 0 y 255 y son representados en notación
hexadecimal (00 a FF). De esta forma, un color está compuesto por seis caracteres donde los dos
primeros representan el valor para el rojo, los dos segundos representan el valor para el verde y los
dos terceros representan el valor para el azul (por ejemplo, el rojo tiene FF para el valor rojo y 00
para el resto: "FF0000").
Al mezclar estos colores se mezclan los colores, de modo que puedes hacer un amarillo mezclando
el rojo y el verde (por ejemplo, "FFFF00"), violeta mezclando el rojo y el azul (por ejemplo,
"FF00FF") o magenta mezclando verde y azul (por ejemplo, "00FFFF"). Esto funciona exactamente
como la paleta de un pintor.
El tono del color también puede ser variado incrementando (por ejemplo, violeta claro "FF66FF") o
decrementando (por ejemplo, violeta oscuro "AA00AA") los tres valores proporcionalmente.
Nota: por la naturaleza de esta página, los no videntes pueden encontrar el siguiente mapa de
colores escasamente útil.

Mapa de colores
Este mapa de colores muestra un amplio conjunto de colores HTML que pueden ser usados en
documentos HTML. El propósito de este mapa es simplemente mostrar algunos colores disponibles.
La funcionalidad extra está solamente disponible en navegadores que soporten JavaScript, y permite
a los usuarios hacer una vista previa de una determinada selección de colores en un documento
ejemplo.

Fondo: #F4F4F4
Primer encabezado: #FFBF00
Primer párrafo: #002699
Segundo encabezado: #FFBF00
Segundo párrafo: #555555
Fondo del panel derecho: #99CCFF
Borde del panel derecho: #007FFF
Título del panel derecho: #FFFFFF
Texto del panel derecho: #990072
Códigos de colores HTML
Cambiando tonos
El tono del color también puede ser variado incrementando (por ejemplo, violeta claro "FF66FF")
o decrementando (por ejemplo, violeta oscuro "AA00AA") los tres valores proporcionalmente.

Los colores en HTML son construidos usando una combinación de tres colores básicos: rojo, verde
y azul. Cada uno de estos colores toma un valor entre 0 y 255 y son representados en notación
hexadecimal (00 a FF). De esta forma, un color está compuesto por seis caracteres donde los dos
primeros representan el valor para el rojo, los dos segundos representan el valor para el verde y los
dos terceros representan el valor para el azul (por ejemplo, el rojo tiene FF para el valor rojo y 00
para el resto: "FF0000").

Mapa de colores
Este mapa de colores muestra un amplio conjunto de colores HTML que pueden ser usados en
documentos HTML. El propósito de este mapa es simplemente mostrar algunos colores
disponibles. La funcionalidad extra está solamente disponible en navegadores que soporten
JavaScript, y permite a los usuarios hacer una vista previa de una determinada selección de colores
en un documento ejemplo.
Redireccionar una página:
Si tenés una dirección larga, y los servidores que te dan direcciones cortas no tienen buena
capacidad de almacenamiento o de taza de transferencia de datos, con este código podés
hacer que al escribir una dirección se abra otra, solo tenés que insertar este código en el
index.html del dominio corto poniendo tu dirección actual donde está en verde:
<HTML>
<HEAD>
<TITLE>Redireccionado por www.CheNico.com</TITLE>
<SCRIPT LANGUAGE="JavaScript">
location.href='http://www.CheNico.com';
</SCRIPT>
</HEAD>
<BODY>

Abrir una Web en Pop Up:


Con este código vamos a hacer que al entrar en nuestra página automáticamente se abra otra,
ej. otra Web nuestra, una sección que queremos mostrar, una publicidad, etc.
<script language='JavaScript'>window.open('http://www.chenico.com',
'geoflotante', '');</script>

No dejar seleccionar el texto de nuestra Web:


Con este código vamos a impedir que los visitantes seleccionen el texto de nuestra página para
luego copiarlo a otro lado.
<script language="Javascript">
<!-- Begin
function disableselect(e){
return false
}
function reEnable(){
return true
}
document.onselectstart=new Function ("return false")
if (window.sidebar){
document.onmousedown=disableselect
document.onclick=reEnable
}
// End -->
</script>

Horas restantes para finalizar el día:


Con este código insertamos un pequeño relojito que indica la cuenta regresiva de las horas,
minutos y segundos que faltan para finalizar el día.
<body>
<p>El reloj...</p>
<form name="Reloj">
<input type="text" size="7" name="tiempo" value="mm:hh:ss" title="Tiempo
restante para finalizar el día">
<script language="JavaScript">
<!--
var tiempoAtras;

updateReloj();
function updateReloj() {
var tiempo = new Date();
var hora = 23-tiempo.getHours();
var minutos = 59-tiempo.getMinutes();
var segundos = 59-tiempo.getSeconds();

tiempoAtras= (hora < 10) ? hora :hora;


tiempoAtras+= ((minutos < 10) ? ":0" : ":") + minutos;
tiempoAtras+= ((segundos < 10) ? ":0" : ":") + segundos;

document.Reloj.tiempo.value = tiempoAtras;

setTimeout("updateReloj()",1000);
}
//-->
</script>
</form>
</body>

Recomendar Pagina:
Con este código podemos hacer que si a un visitante le gustó nuestra Web, la recomiende a un
amigo escribiendo su dirección de correo electrónico en la casilla, al hacer click en
"Recomendar esta Web" se envía un mensaje de correo con el asunto "Pienso que te puede
interesar esta página..." y en el cuerpo del mensaje aparece la dirección completa donde se
encuentra el código y el título de la misma.
<form name="eMailer">
ENVÍA ESTA PÁGINA A UN AMIGO
<br>
Indica su e-mail:
<br>
<input type="text" name="address" size="25">
<br>
<input type="button" value="Recomendá esta Web!" onClick="mailThisUrl();">
</form>
<script language="JavaScript1.2">
var good;
function checkEmailAddress(field) {
// the following expression must be all on one line...
var goodEmail = field.value.match(/\b(^(\S+@).+((\.com)|(\.net)|
(\.edu)|(\.mil)|(\.gov)|(\.org)|(\..{2,2}))$)\b/gi);
if (goodEmail){
good = true
} else {
alert('Por favor introduce un e-mail valido')
field.focus()
field.select()
good = false
}
}
u = window.location;
m = "Pienso que te puede interesar esta página...";
function mailThisUrl(){
good = false
checkEmailAddress(document.eMailer.address)
if (good){
// the following expression must be all on one line...
window.location = "mailto:"+document.eMailer.address.value+"?
subject="+m+"&body="+document.title+" "+u;
}
}
</script>

Crear un Formulario o Libro de Visitas:


Con este código podemos crear un formulario para que complete el visitante. O también un
libro de visitas, luego que el visitante apriete el botón "enviar", los datos serán enviados a tu
casilla de correo.
<H2>Libro de visitas de www.CheNico.com</H2>
<FORM ACTION="mailto:tunombre@tuservidor.com" METHOD="post">

<TABLE>

<TD ALIGN=RIGHT>Nombre:</TD>
<TD><INPUT type="text" size=36 name="nombre"></TD>
<TR><TD ALIGN=RIGHT>Direccion E-mail:</TD>
<TD><INPUT type="text" size=36 name="direccion"></TD>
<TR><TD ALIGN=RIGHT>como llegaste hasta esta pagina?</TD>
<TD><INPUT type="text" size=36 name="procedencia"></TD>
<TR><TD ALIGN=RIGHT>Tus comentatios:</TD>
<TD><TEXTAREA rows=5 cols=30 name="comentarios"></TEXTAREA></TD>

</TABLE>

<INPUT type="reset" value="Borrar todo"> <INPUT type="submit"


value="Enviar">

</FORM>

Crear un Título que cambia de colores:


Con este código podemos crear por ejemplo el título para nuestra Web o una de nuestras
secciones.

Este es el código:
<!-- inicio de head-->
<script>
mesk=new
Array();mesk[10]="A";mesk[11]="B";mesk[12]="C";mesk[13]="D";mesk[14]="E";
mesk[15]="F";A=10;B=11;C=12;D=13;E=14;F=15;let="ABCDEF";function
mes(num){if(let.indexOf(num) != -1){return eval(num)};else{if(num
< 10){return eval(num)};else{return mesk[num]}}};

function color(begin,einde,stappen,stap){
hh1=(mes(begin.charAt(0))*16)+mes(begin.charAt(1));
hh2=(mes(begin.charAt(2))*16)+mes(begin.charAt(3));
hh3=(mes(begin.charAt(4))*16)+mes(begin.charAt(5));
pp1=(mes(einde.charAt(0))*16)+mes(einde.charAt(1));
pp2=(mes(einde.charAt(2))*16)+mes(einde.charAt(3));
pp3=(mes(einde.charAt(4))*16)+mes(einde.charAt(5));

if(hh1 < pp1){ff1=hh1+Math.floor((pp1-hh1)/stappen*stap);


ff1=eval("\'"+mes(Math.floor(ff1/16))+"\'")+eval("\'"+mes(ff1-
(Math.floor(ff1/16)*16))+"\'");}

;else{ff1=hh1-Math.floor((hh1-pp1)/stappen*stap);
ff1=eval("\'"+mes(Math.floor(ff1/16))+"\'")+eval("\'"+mes(ff1-
(Math.floor(ff1/16)*16))+"\'");}

if(hh2 < pp2){ff2=hh2+Math.floor((pp2-hh2)/stappen*stap);


ff2=eval("\'"+mes(Math.floor(ff2/16))+"\'")+eval("\'"+mes(ff2-
(Math.floor(ff2/16)*16))+"\'");}

;else{ff2=hh2-Math.floor((hh2-pp2)/stappen*stap);
ff2=eval("\'"+mes(Math.floor(ff2/16))+"\'")+eval("\'"+mes(ff2-
(Math.floor(ff2/16)*16))+"\'");}

if(hh3 < pp3){ff3=hh3+Math.floor((pp3-hh3)/stappen*stap);


ff3=eval("\'"+mes(Math.floor(ff3/16))+"\'")+eval("\'"+mes(ff3-
(Math.floor(ff3/16)*16))+"\'");}

;else{ff3=hh3-Math.floor((hh3-pp3)/stappen*stap);
ff3=eval("\'"+mes(Math.floor(ff3/16))+"\'")+eval("\'"+mes(ff3-
(Math.floor(ff3/16)*16))+"\'");}

;return ff1+ff2+ff3}
bum=0;bum2=0;txt=new Array();txt[0]="";function lightf(){
for(i=0;i !=
Math.floor(message.length/2);i++)
{txt[i]=color(lightcolor1,lightcolor2,Math.floor(message.length/2),i)};

for(i=Math.floor(message.length/2);i !=
message.length;i++)
{txt[i]=color(lightcolor2,lightcolor1,Math.floor(message.length/2),(i-
Math.floor(message.length/2)))};

lightf1()}
function
lightf1(){txt[message.length+1]="";bum2=message.length-bum;for(i=0;i !=
message.length;i++){if(i+bum
< message.length){txt[message.length+1]=txt[message.length+1]+"<font
color='#"+txt[(i+bum)]+"'>"+message.charAt(i)
+"</font>"};else{txt[message.length+1]=txt[message.length+1]+"<font
color='#"+txt[i-bum2]+"'>"+message.charAt(i)+"</font>"
}};if(bum !=
message.length){bum+
+;};else{bum=0};light.innerHTML=txt[message.length+1];setTimeout("lightf1()",5
0)}

</script>
</head>

<body bgcolor="#FFFFFF" background="globulos.jpg">


<!--inicio del body -->
<center><h1><div id="light"></div></h1>
<script>
lightcolor1="FF0000" // color
lightcolor2="33CC66" // color
message="Título que cambia de colores" // introduce el texto
lightf()
</script>
</center>
<!--fin del body -->

Cuadro explicativo de los enlaces:


Sorprendé a tus visitantes con este asombroso truco. Al pasar el mouse sobre el link, aparece
la explicación de ese link en un cuadro con la cantidad de palabras que queramos poner. Solo
tenés que reemplazar mis direcciones por las tuyas, y el texto deseado por el tuyo.
<p>
<script language="JavaScript"><!--
function escribe(frase){document.desplaza.cuadro.value=frase; }
// --></script>
</p>
<table border="0">
<tr>
<td width="200"><p align="center"><strong>Opciones.</strong></p>

<p><a href="http://www.CheNico.com"
onmouseover="escribe(' Página principal\n ----------------\n\n Cuando hagas Click
en este enlace irás directamente a la página de inicio de mi web');">Página
principal</a><br>
<a href="http://usuarios.lycos.es/pauluk/trucosprin.htm"
onmouseover="escribe(' Trucos PC\n -----------\n\n Este enlace te llevará a la
página de Trucos PC en la que podés encontrar muchos más trucos interesantes para
realizar e incluir en tus páginas web');">Trucos PC</a><br>
<a href="http://usuarios.lycos.es/pauluk/GLOSARIO.HTM"
onmouseover="escribe(' Glosario\n -------------- \n\n Diccionario de Términos
Informáticos. Enterate el significado de esas palabras de computación que decís
todos los días pero que no sabés exactamente qué significa.');">Glosario</a><br>
</p>
</td>
<td><form name="desplaza">
<p><textarea name="cuadro" rows="8" cols="30"
wrap="physical"></textarea></p>
</form>
</td>
</tr>
</table>

Insertar un sonido o música de fondo:


Si quieren que los visitantes escuchen una canción mientras visitan la Web, o simplemente
recibirlos con una melodía estilo presentación, este es el código que estabas buscando. Solo
tenés que guardar el sonido en el directorio raíz de tu servidor e insertar el siguiente código
html:
<BGSOUND SRC="sonido.mid" LOOP=none>
<WIDTH=200 HEIGHT=55 AUTOSTART="true" LOOP="false" HIDDEN="true">
Se recomienda usar sonidos en formato "midi" que son los de menor peso.

Crear un link para download:


Si queremos poner archivos para que los visitantes los puedan descargar a sus computadoras,
solo debemos subir ese archivo a nuestro servidor e insertar en nuestra Web el siguiente
código HTML:
<a href="ejemplo.exe">Descripción del enlace </a>
No existe un comando que inicie la descarga. Lo que sucede es que, siempre que aparece un
tipo de archivo no reconocido por el navegador, este comienza a descargarlo automáticamente.
Ejemplo: Si el navegador no logra abrir un archivo "zip" (compactado), inicia la descarga
automáticamente.

Efecto nieve con cualquier imagen:


Con este truco podés hacer que caigan por la pantalla varias veces la misma imagen con un
efecto estilo nieve. Si querés ver el código y el efecto HACÉ CLIC ACÁ .

Subrayar un Link al pasar el mouse:


Con este código podemos lograr ese tan conocido efecto que al pasar el mouse sobre un link,
este se subraye. Podemos hacer que tenga un color antes de visitar el link, y que tenga otro
una vez visitado.
<STYLE type="text/css">
<!--
A:link {COLOR: red; TEXT-DECORATION: none}
A:visited {COLOR: gray; TEXT-DECORATION: none}
A:active {TEXT-DECORATION: none}
A:hover {COLOR: blue; TEXT-DECORATION: underline} -->
</STYLE>
</p>
<p><a href="l1.htm">El texto que quieras.</a><br>
<a href="l2.htm">otro texto.</a><br>
<a href="l3.htm">Otro texto.</a><br>
</p>

Transformar el cursor en una mira:


Transformá la clásica flechita de Windows en una mira de disparo.
<style type="text/css">
<!--
body { cursor: crosshair}
-->
</style>

Tabla de colores HTML:


Esta tabla contiene todos los códigos para ponerle colores a las barras de desplazamiento, a
las fuentes y muchas otras funciones más. Haga click acá para ver la Tabla Completa.

Comentario sobre un link en la barra de estado:


Al pasar el mouse sobre el link deseado, veremos en la barra de estado un comentario sobre
éste. Por ejemplo posicionen el mouse sobre Pauluk Computación y vean en la barra de estado.
(para verlo bien en ésta página pasen el mouse varias veces, ya que hay otro código parecido
que lo obstruye).
<a href="http://www.CheNico.com"
onmouseout="window.status=''"
onmouseover="window.status='Acá aparece el mensaje que quieras';return true">
Pauluk Computación</a>

Dificultar copia de página:


Con este recurso sencillo podemos hacer más difícil el acceso al código-fuente o la copia de
imágenes de nuestro sitio. Cuando el visitante haga click con el botón derecho del mouse,
surgirá un mensaje creado previamente por nosotros. Recordemos que a algunas personas no
les gusta este tipo de bloqueo. Nosotros tenemos que decidir si queremos incluirlo o no en
nuestras páginas.
Podemos colocarlo antes de la etiqueta <html> o después de la etiqueta <body>.

<Script language=JavaScript>
function right(e) {
if (navigator.appName == 'Netscape' && (e.which == 3 || e.which == 2)){
alert("Coloca el mensaje aquí.");
return false;
}
else if (navigator.appName == 'Microsoft Internet Explorer' &&
(event.button == 2 || event.button == 3)) {
alert("Coloca el mensaje aquí.");
return false;
}
return true;
}
document.onmousedown=right;
if (document.layers) window.captureEvents(Event.MOUSEDOWN);
window.onmousedown=right;
</script>

Nota: Para evitar este truco, también hay un contratruco, si entrás a una página que tiene
este truco que no te deja copiar imágenes o texto, solo tenés que hacer click con el botón
derecho del mouse sobre la barra de estado y sin soltarlo arrastrarlo hasta la imágen. Listo, se
abrirá el menú como si la página no estuviese bloqueada a la copia. Hay que tener en cuenta
que muy poca gente conoce este truco, por lo tanto podés usar tranquilo el truco de bloqueo.

Establecer una página como inicio:


Este código html te sirve para crear un link para que el visitante pueda hacer que tu página
sea la de inicio de su computadora. Con solo hacer clic sobre el link creado, tu página se
iniciará automáticamente cada vez que esa persona se conecte a Internet.
<A class=chlnk style="FONT-WEIGHT: bold; CURSOR: hand;
COLOR: #004080; FONT-FAMILY: Verdana" onclick=
"this.style.behavior='url(#default#homepage)';
this.setHomePage('http://www.CheNico.com');">
<FONT face=Arial color=#000000 size=-2><U>
Establecer como página de inicio</U></FONT></A>

Enviar un e-mail con Asunto y Mensaje:


Con este truco podés hacer que al hacer clic sobre una palabra, se abra el Outlook para enviar
un mensaje con tu dirección, el asunto que quieras y el texto que quieras. Por ejemplo: Hacé
clic acá para mandarme un mensaje
<a href="mailto:webmaster@pauluk.8k.com?subject=Prueba.&body=Estoy
probando el truco...">Hacé clic acá para mandarme un mensaje</a>

Abrir un Link en una Ventana Nueva:


Cuando tenemos Links en nuestras páginas y alguien hace clic sobre ellos, automáticamente se
abre esa dirección en nuestra ventana. Con este truco podemos hacer que al hacer clic sobre
un determinado Link, esta dirección se abra en una ventana nueva, quedando la nuestra
también abierta:
<a href="http://www.CheNico.com" target="_blank">Pauluk Computación</a>

Crear un PopUp:
Abrir una pequeña ventana con una imagen. Podemos darle las medidas que queramos
cambiando "Width" y "Height".

<a name="1"></a><A

onclick="window.open('MiFoto.jpg','Estructuras','toolbar=no,location=no,scrollbars
=yes,directories=
no,status=no,menubar=no,resizable=no,width=400,height=475');"
href="#1"><b><font face="Verdana" size="2">Ejemplo</font></b></a>

Otra barra con mas colores:


A continuación veremos otro código para ponerle color a la barra de desplazamiento, en este
caso vamos a poder personalizar los colores de la barra, del fondo y los bordes. Reemplazar los
nombres de los colores por otros o por los código de letras y números. Mas abajo está la tabla
de colores.
<style>
<!--
body { scrollbar-face-color: darkgreen ;
scrollbar-shadow-color: yellow;
scrollbar-highlight-color: violet;
scrollbar-3dlight-color: navy;
scrollbar-darkshadow-color: magenta;
scrollbar-track-color: blue;
scrollbar-arrow-color: black }
-->
</style>
Observación: para ver este truco, es necesario tener instalada las últimas versiones de los
navegadores. Preferentemente Internet Explorer 6.
Abrir un link de una imagen en una ventana nueva:
Con este código podemos insertar una imagen (ej. banner) y que al hacer click sobre ella se
abra el link de destino en una ventana nueva. Primero ponemos la ruta del link de destino, y
luego la ruta donde está alojada la imagen. Si está alojada en la raíz de nuestro servidor solo
ponemos el nombre y listo.
<a href="http://www.CheNico.com" target="_blank"><img src="imagen.gif"
border=0></a>

Hora y texto en la barra de estado:


Con este truco, podemos hacer que aparezca en la barra de estado la hora de la PC que entra
a nuestra Web y poner el texto que queramos.
<script language="JavaScript">
<!--
mensaje=" |======| www.CheNico.com "
function hora() {
var h = new Date();
window.status="|======| "
+ h.getHours() +":"+ h.getMinutes() +"" +mensaje ;
window.setTimeout('hora()',100);
}
hora()
//-->
</script>

Botón animado:
Aprendé a dar movimiento a tu página con botones animados por Java Script. Cada botón
puede llevar a un enlace distinto. Sólo tienes que configurar los parámetros "lineArr" y
"urlArr" del script, que permiten destacar cosas en tu página.
<font face="Arial, Helvetica, sans-serif" size="2">
<script language="JavaScript">
var timerID = null
var timerRunning = false
var charNo = 0
var charMax = 0
var lineNo = 0
var lineMax = 3
var lineArr = new Array(lineMax)
var urlArr = new Array(lineMax)
lineArr[1] = "Pauluk Computación"
urlArr[1] = "http://www.CheNico.com"
lineArr[2] = "Trucos PC"
urlArr[2] = "http://www.pauluk.8k.com/trucosprin.htm"
lineArr[3] = "Noticias Tecnológicas y Actualidad"
urlArr[3] = "http://www.pauluk.8k.com/noticias.htm"
var lineText = lineArr[1]
function StartShow() {
StopShow()
ShowLine()
timerRunning = true
}
function FillSpaces() {
for (var i = 1; i <= lineWidth; i++) {
spaces += " "
}
}
function StopShow() {
if (timerRunning) {
clearTimeout(timerID)
timerRunning = false
}
}
function ShowLine() {
if (charNo == 0) {
if (lineNo < lineMax) {
lineNo++
}
else {
lineNo = 1
}
lineText = lineArr[lineNo]
charMax = lineText.length
}
if (charNo <= charMax) {
document.formDisplay.buttonFace.value = lineText.substring(0, charNo)
charNo++
timerID = setTimeout("ShowLine()", 100)
}
else {
charNo = 0
timerID = setTimeout("ShowLine()", 3000)
}
}
function GotoUrl(url)
{
top.location.href = url
}
document.write("<form name=\"formDisplay\">");
document.write("<input type=\"button\" name=\"buttonFace\"
value=\"&{lineText}\" size=\"18\" onClick=\"GotoUrl(urlArr[lineNo])\">");
document.write("</form>");
StartShow();
</script></font>

Letrero de mensajes:
Este es un efecto muy fácil de lograr y muy funcional para tu página. Podés definir cuántos
textos y enlaces quieras. Ellos se destacarán y tu página quedará mucho más dinámica. Podés
ver cómo personalizar este recurso al final de esta página. Es mejor que Java ya que es mucho
más liviano y rápido de cargarse, y no necesita archivos adicionales.
Para incluir este recurso en tu página debes seguir dos pasos:
Paso 1: Incluye el siguiente código en tu etiqueta "<BODY>", agrega un espacio después del
último parámetro e incluye:
onload="if (document.all||document.layers) {regenerate2();update()}"

Observa un ejemplo sencillo de cómo quedaría la etiqueta:

<body onload="if (document.all||document.layers) {regenerate2();update()}">

Paso 2: Pega en tu página HTML el siguiente código personalizando las partes indicadas:

<style>
<!--
#mensagem{
position:relative;
layer-background-color:black;
width:400;
height:12;
}
#submensagem{
background-color:black;
position:absolute;
border: 1px solid black;
width:400;
height:12;
}
.submensagemfont{
font:bold 12px Verdana;
text-decoration:none;
color:white;
}
.submensagemfont a{
top:0;
color:white;
text-decoration:none;
}
-->
</style>
<div id="mensagem">
<div id="submensagem" class="submensagemfont">Iniciando...</div>
</div>
<script language="JavaScript1.2">
var speed=4500
var textos=new Array()
textos[0]="<center><a href='Enlace1 Aquí'>Descripción del enlace1
aquí</a></center>"
textos[1]="<center><a href='Enlace2 Aquí'>Descripción del enlace2
aquí</a></center>"
textos[2]="<center><a href='Enlace3 Aquí'>Descripción del enlace3
aquí</a></center>"
i=0
if (document.all)
tickerobject=document.all.submensagem.style
else
tickerobject=document.mensagem.document
function regenerate(){
window.location.reload()
}
function regenerate2(){
if (document.layers)
setTimeout("window.onresize=regenerate",450)
}
function update(){
BgFade(0xff,0xff,0xff, 0x00,0x00,0x00,10);
if (document.layers){
document.mensagem.document.submensagem.document.write('<span
class="submensagemfont">'+textos[i]+'</span>')
document.mensagem.document.submensagem.document.close()
}
else
document.all.submensagem.innerHTML=textos[i]
if (i<textos.length-1)
i++
else
i=0
setTimeout("update()",speed)
}

function BgFade(red1, grn1, blu1, red2,


grn2, blu2, steps) {
sred = red1; sgrn = grn1; sblu = blu1;
ered = red2; egrn = grn2; eblu = blu2;
inc = steps;
step = 0;
RunFader();
}
function RunFader() {
var epct = step/inc;
var spct = 1 - epct;
if (document.layers)
tickerobject.bgColor =
Math.floor(sred * spct + ered *
epct)*256*256 +
Math.floor(sgrn * spct + egrn * epct)*256 +
Math.floor(sblu * spct + eblu * epct);
else
tickerobject.backgroundColor=
Math.floor(sred * spct + ered *
epct)*256*256 +
Math.floor(sgrn * spct + egrn * epct)*256 +
Math.floor(sblu * spct + eblu * epct);
if ( step < inc ) {
setTimeout('RunFader()',50);
}
step++;
}
</script>

Pantalla que tiembla:


Al insertar este código, cada vez que entremos en la Web se producirá una especie de
terremoto en el explorador. Un efecto interesante para atraer la atención de nuestros
visitantes.
<html>
<head>
<title>www.CheNico.com</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>

<body bgcolor="#FFFFFF" text="#000000">


<p>
<script language="JavaScript1.2">

function tremer(n) {

if (self.moveBy) {

for (i = 10; i > 0; i--) {

for (j = n; j > 0; j--) {

self.moveBy(0,i);

self.moveBy(i,0);

self.moveBy(0,-i);

self.moveBy(-i,0);

}}}}

tremer(5)

</script>
<Script language=JavaScript>

function right(e) {

if (navigator.appName == 'Netscape' && (e.which == 3 || e.which == 2)){

alert("www.CheNico.com");

return false;

else if (navigator.appName == 'Microsoft Internet Explorer' &&

(event.button == 2 || event.button == 3)) {

alert("www.CheNico.com");

return false;

return true;

document.onmousedown=right;
if (document.layers) window.captureEvents(Event.MOUSEDOWN);

window.onmousedown=right;

</script>
</body>
</html>

Botón Colorido:
¿Cansado del botón siempre gris? Ahora con CSS podés definir cualquier color para tus
botones. Ellos combinarán más con tu página y son muy fáciles de crear.
Copia el código que sigue y pegalo dentro de la etiqueta de formulario de tu página:

<input type="submit" name="button" value="www.CheNico.com" style="color:


#000000; background-color: #FF9900">

Texto que sigue al mouse:

Hacé que un texto cualquiera siga al mouse del visitante en tu página. Es un efecto fabuloso y
fácil de incluir en las páginas
Incluye el siguiente código en tu página HTML:

<style>
.animado {position:absolute;visibility:visible;top:-50px;font-size:10pt;font-
family:Arial;font-weight:bold;color:black;}
</style>
<script language=JavaScript>
var x,y
var tempo=10
var espera=0
var texto="www.CheNico.com"
texto=texto.split("")
var xpos=new Array()
for (i=0;i<=texto.length-1;i++) {
xpos[i]=-50
}
var ypos=new Array()
for (i=0;i<=texto.length-1;i++) {
ypos[i]=-50
}
function seguir(e){
x = (document.layers) ? e.pageX : document.body.scrollLeft+event.clientX
y = (document.layers) ? e.pageY : document.body.scrollTop+event.clientY
espera=1
}
function animar_cursor() {
if (espera==1 && document.all) {
for (i=texto.length-1; i>=1; i--) {
xpos[i]=xpos[i-1]+tempo
ypos[i]=ypos[i-1]
}
xpos[0]=x+tempo
ypos[0]=y
for (i=0; i<texto.length-1; i++) {
var camada = eval("span"+(i)+".style")
camada.posLeft=xpos[i]
camada.posTop=ypos[i]
}
}
else if (espera==1 && document.layers) {
for (i=texto.length-1; i>=1; i--) {
xpos[i]=xpos[i-1]+tempo
ypos[i]=ypos[i-1]
}
xpos[0]=x+tempo
ypos[0]=y
for (i=0; i<texto.length-1; i++) {
var camada = eval("document.span"+i)
camada.left=xpos[i]
camada.top=ypos[i]
}
}
var timer=setTimeout("animar_cursor()",30)
}
</script>
<script Language=JavaScript>
for (i=0;i<=texto.length-1;i++) {
document.write("<span id='span"+i+"' class='animado'>")
document.write(texto[i])
document.write("</span>")
}
if (document.layers){
document.captureEvents(Event.MOUSEMOVE);
}
document.onmousemove = seguir;
animar_cursor()
</script>

Imagen volando por la pantalla:


Este efecto hace que cualquier imagen que elijas quede "paseando" por la pantalla, siendo un
recurso excelente tanto para llamar la atención por alguna novedad en tu sitio como para darle
más movimiento a la página.
Copiá y pegá el siguiente código en tu página HTML.
Recordá que la imagen debe estar en el mismo directorio de tu página html.
<SCRIPT language="JavaScript1.2">
var imagem="Ingresa el nombre del archivo de imagen aquí"
if (document.layers)
{document.write("<LAYER NAME='animacao' LEFT=10 TOP=10><img
src='"+imagem+"' ></LAYER>")}
else if (document.all){document.write("<div id='animacao'
style='position:absolute;top:10px;left:10px;width:17px;height:22px;z-
index:50'><img src='"+imagem+"'></div>")}
conta=-1;
move=1;
function curva(){
abc=new Array(0,1,1,1,2,3,4,0,6,-1,-1,-1,-2,-3,-4,0,-6)
for (i=0; i < abc.length; i++)
{var C=Math.round(Math.random()*[i])}
iniciar=abc[C];
setTimeout('curva()',1900);
return iniciar;
}
ypos=10;
xpos=10;
movimento = 60;
function moveR(){
caminho=movimento+=iniciar;
y = 4*Math.sin(caminho*Math.PI/180);
x = 6*Math.cos(caminho*Math.PI/180);
if (document.layers){
ypos+=y;
xpos+=x;
document.animacao.top=ypos+window.pageYOffset;
document.animacao.left=xpos+window.pageXOffset;
}
else if (document.all){
ypos+=y;
xpos+=x;
document.all.animacao.style.top=ypos+document.body.scrollTop;
document.all.animacao.style.left=xpos+document.body.scrollLeft;
}
T=setTimeout('moveR()',50);
}
function edges(){
if (document.layers){
if (document.animacao.left >= window.innerWidth-
40+window.pageXOffset)movimento=Math.round(Math.random()*45+157.5);
if (document.animacao.top >= window.innerHeight-
30+window.pageYOffset)movimento=Math.round(Math.random()*45-112.5);
if (document.animacao.top <= 2+window.pageYOffset) movimento =
Math.round(Math.random()*45+67.5);//OK!
if (document.animacao.left <= 2+window.pageXOffset) movimento =
Math.round(Math.random()*45-22.5);//OK!
}
else if (document.all)
{
if (document.all.animacao.style.pixelLeft >= document.body.offsetWidth-
45+document.body.scrollLeft)movimento=Math.round(Math.random()*45+157.5);
if (document.all.animacao.style.pixelTop >= document.body.offsetHeight-
35+document.body.scrollTop)movimento=Math.round(Math.random()*45-112.5);
if (document.all.animacao.style.pixelTop <= 2+document.body.scrollTop)
movimento = Math.round(Math.random()*45+67.5);//OK!
if (document.all.animacao.style.pixelLeft <= 2+document.body.scrollLeft)
movimento = Math.round(Math.random()*45-22.5);//OK!
}
setTimeout('edges()',100);
}
function efeito(){
curva();
moveR();// onUnload="opener.gO()"
edges();
}
if (document.all||document.layers)
efeito()
</script>

Texto en expansión:
Colocá en tu página mensajes animados que se agrandan y llaman la atención de los
visitantes. Además, incluyen enlaces hacia donde vos quieras.
Copiá el siguiente código y pegalo en tus páginas debajo de la etiqueta <Body>.

<script language="JavaScript">
var velocidade = 45;
var ciclo = 2000;
var tamanho = 20;
var x = 0;
var y = 0;
var mensagens, size;
var esize = "</font>";
function initArray() {
this.length = initArray.arguments.length;
for (var i = 0; i < this.length; i++) {
this[i] = initArray.arguments[i];
}
}
var mensagens2 = new initArray(
"Visita",
"www.CheNico.com",
"webmaster@pauluk.8k.com"
);
if(navigator.appName == "Netscape")
document.write('<layer id="wds"></layer><br>');
if (navigator.appVersion.indexOf("MSIE") != -1)
document.write('<span id="wds"></span><br>');
function aumenta(){
mensagens = mensagens2[y];
if (x < tamanho) {
x++;
setTimeout("aumenta()",velocidade);
}
else setTimeout("diminui()",ciclo);
if(navigator.appName == "Netscape") {
size = "<font face=arial color=#000099 point-size='"+x+"pt'>";
document.wds.document.write(size+"<center><a href=http://www.CheNico.com
Target=_blank style=text-
decoration:none;color:#000099>"+mensagens+"</a></center>"+esize);
document.wds.document.close();
}
if (navigator.appVersion.indexOf("MSIE") != -1){
wds.innerHTML = "<font face=arial color=#000099><center><a
href=http://www.CheNico.com Target=_blank style=text-
decoration:none;color:#000099>"+mensagens+"</a></center></font>";
wds.style.fontSize=x+'px'
}
}
function diminui(){
if (x > 1) {
x--;
setTimeout("diminui()",velocidade);
}
else {
setTimeout("aumenta()",ciclo);
y++;
if (y > mensagens2.length - 1) y = 0;
}
if(navigator.appName == "Netscape") {
size = "<font face=arial color=#000099 point-size='"+x+"pt'>";
document.wds.document.write(size+"<center><a href=http://www.CheNico.com
Target=_blank style=text-
decoration:none;color:#000099>"+mensagens+"</a></center>"+esize);
document.wds.document.close();
}
if (navigator.appVersion.indexOf("MSIE") != -1){
wds.innerHTML = "<font face=arial color=#000099><center><a
href=http://www.CheNico.com Target=_blank style=text-
decoration:none;color:#000099>"+mensagens+"</a></center></font>";
wds.style.fontSize=x+'px'
}
}
setTimeout("aumenta()",velocidade);
</script>

Página protegida por clave:


Este es un excelente recurso. Podés proteger tus páginas con una clave. Así podés definir
exactamente quienes entrarán a tu página. No tenés que preocuparte por configuraciones. Es
muy sencillo: la clave siempre será el nombre de tu página sin la extensión .htm, es decir, si la
página tiene el nombre de "ejemplo.htm", la clave será "ejemplo". ¿Ves que fácil?.
Para tener este recurso en tu sitio debes incluir un código en la página de "entrada" en donde
el visitante ingresará la clave, y enviar a tu sitio el archivo de la página que será cargada.

<Form name="frm">
<center>
<Script Language="JavaScript">
<!--
//
function loadpage(){
var psj=0;
newwin = window.open(document.frm.pswd.value + ".htm")
}
//-->
</script>
Ingresa tu clave:
<input
type="password" name="pswd" size="20">
</center>
<center>
<p>
<input type="button" value="Entra"
onClick="loadpage()" name="button">
&nbsp;</p>
</center>
</form>

Cambiar el color de la barra de desplazamiento al pasar el


mouse:
Con este truco podés hacer que además de cambiar el color clásico gris de la barra de
desplazamiento por otro, hacer que cuando el mouse se pose sobre ella cambie a otro color.
Cambiando los números y letras en verde variaran los colores. Probalo pasando por la barra de
la derecha!.

<script language="JavaScript1.2">
<!--
function scrollBar(line,face,theme)
{
if (!line||!face)
{
line=null;
face=null;
switch(theme)
{
case "blue":
var line="black";
var face="#6699FF";
break;
}
}

with(document.body.style)
{
scrollbarDarkShadowColor=line;
scrollbar3dLightColor=line;
scrollbarArrowColor="black";
scrollbarBaseColor=face;
scrollbarFaceColor=face;
scrollbarHighlightColor=face;
scrollbarShadowColor=face;
scrollbarTrackColor="#FFFFFF";
}
}

function colorBar(){
var w = document.body.clientWidth;
var h = document.body.clientHeight;
var x = event.clientX;
var y = event.clientY;
if(x>w) scrollBar('#000080','#E58D28');
else scrollBar(null,null,"blue");
}

if (document.all){
scrollBar(null,null,"blue");
document.onmousemove=colorBar;
}
//-->
</script>"#6699FF";
break;
}
}

with(document.body.style)
{
scrollbarDarkShadowColor=line;
scrollbar3dLightColor=line;
scrollbarArrowColor="black";
scrollbarBaseColor=face;
scrollbarFaceColor=face;
scrollbarHighlightColor=face;
scrollbarShadowColor=face;
scrollbarTrackColor="#FFFFFF";
}
}

function colorBar(){
var w = document.body.clientWidth;
var h = document.body.clientHeight;
var x = event.clientX;
var y = event.clientY;
if(x>w) scrollBar('#000080','#E58D28');
else scrollBar(null,null,"blue");
}

if (document.all){
scrollBar(null,null,"blue");
document.onmousemove=colorBar;
}
//-->
</script>

Cambiar el color de la barra de desplazamiento:


Con éste código van a conseguir cambiar el clásico color gris de la barra de desplazamiento de
la derecha y abajo por el color que quieran. Para cambiar de colores, cambien el número
000000 por otros, cada color tiene su número, pero la lista es muy larga, así que prueben con
los número que ya van a encontrar el deseado.
<style>
<!--
BODY { scrollbar-base-color : #000000;
scrollbar-arrow-color : #FFFFFF; }
.nav {
color : #FFCC00;
font-size : 8pt;}
-->
</style>

Reloj - formato texto:


Este es otro tipo de reloj que también cuenta los segundos y que puede utilizar texto. Es muy
fácil incluirlo en tu página. Siempre que un usuario acceda a tu sitio el efecto será iniciado.

Paso 1: Para que el recurso se inicie junto con la página, debes incluir dentro de la etiqueta
<body> el parámetro de inicio. Agregá un espacio después del último parámetro e incluye:

Onload="show5()"

Observa un ejemplo sencillo de cómo queda la etiqueta:

<body Onload="show5()">

¡Atención! Sin eso tu reloj no funcionará.

Paso 2: Incluye el siguiente código en tu página después de la etiqueta <body>.

<Font face=Verdana><span id=relogio style="POSITION: absolute"></span>


<Script Language=JavaScript>
<!--
function show5(){
if (!document.layers&&!document.all)
return
var Digital=new Date()
var hours=Digital.getHours()
var minutes=Digital.getMinutes()
var seconds=Digital.getSeconds()
var dn="AM"
if (hours>12){
dn="PM"
hours=hours-12
}
if (hours==0)
hours=12
if (minutes<=9)
minutes="0"+minutes
if (seconds<=9)
seconds="0"+seconds
meurelogio="<font size='5' face='Arial'><b>"+hours+":"+minutes+":"
+seconds+" "+dn+"</b></font>"
if (document.layers){
document.layers.relogio.document.write(meurelogio)
document.layers.relogio.document.close()
}
else if (document.all)
relogio.innerHTML=meurelogio
setTimeout("show5()",1000)
}
//-->
</script>
</font>

Poniendo fecha en tu sitio:


Aprendé a incluir la fecha en tu sitio sin necesidad de actualizarla cada día. Sólo tenés que
usar un JavaScript que automáticamente exhibirá la fecha del día en tu página cada vez que
ésta se abra.
No tenés que preocuparte con ninguna configuración. Sólo tenés que copiar y pegar el código
en tu página.

<script language="JavaScript">
<!--
mydate = new Date();
myday = mydate.getDay();
mymonth = mydate.getMonth();
myweekday= mydate.getDate();
weekday= myweekday;
if(myday == 0)
day = " Domingo, "
else if(myday == 1)
day = " Lunes, "
else if(myday == 2)
day = " Martes, "
else if(myday == 3)
day = " Miércoles, "
else if(myday == 4)
day = " Jueves, "
else if(myday == 5)
day = " Viernes, "
else if(myday == 6)
day = " Sábado, "
if(mymonth == 0)
month = "Enero "
else if(mymonth ==1)
month = "Febrero "
else if(mymonth ==2)
month = "Marzo "
else if(mymonth ==3)
month = "Abril "
else if(mymonth ==4)
month = "Mayo "
else if(mymonth ==5)
month = "Junio "
else if(mymonth ==6)
month = "Julio "
else if(mymonth ==7)
month = "Agosto "
else if(mymonth ==8)
month = "Setiembre "
else if(mymonth ==9)
month = "Octubre "
else if(mymonth ==10)
month = "Noviembre "
else if(mymonth ==11)
month = "Diciembre "
document.write("<font face=arial, size=1>"+ day);
document.write(myweekday+" de "+month+ "</font>");
// -->
</script>

Mensaje de bienvenida:
Con este recurso personalizás tu sitio para el visitante. Al entrar, el visitante verá un espacio
para ingresar su nombre y un mensaje que dice "Hola, Fulano".
Copiá el siguiente código y pégalo donde quieras que aparezca el mensaje:

<Script language="JavaScript">
mensagem = prompt("Por favor, ingresa tu nombre",'');
if (mensagem==null) {
document.write("¡Hola, visitante!")
}else{
if (mensagem=='') {
document.write("<b><font face=arial size=2 color=#000000>¡Hola, visitante!
</font></b>")
}else{
document.write("<b><font face=arial size=2 color=#000000>¡Hola"+mensagem+"!
Bienvenido a mi sitio</font></b>");
}
}
</script>

Atrás y Adelante:
Atrás:

<a href="javascript:history.go(-1)">Atrás </a>

Adelante:
<a href="javascript:history.go(1)">Adelante</a>

Imprimir pagina actual:


<a href="javascript:print()">Imprimir</a>

Cartel de novedades:
Este efecto te permite tener un cartel o letrero de mensajes incluyendo enlaces para tu sitio.
Los mensajes van cruzando la pantalla como si fueran noticias; es un recurso excelente para
destacar características especiales de tu sitio. Cada mensaje tendrá un enlace
Paso 1: Copiá el siguiente código y pegalo en tu página:

<script language="JavaScript1.2">
var largura=150
var altura=120
var bgcolor='white'
var fundo=''
var mensagens=new Array()
mensagens[0]="<center><font face='Arial' size=2><a href='Coloca la dirección de
la página 1 aquí'>Coloca el texto del enlace 1 aquí</a></font></center>"
mensagens[1]="<center><font face='Arial' size=2><a href='Coloca la dirección de
la página 2 aquí'>Coloca el texto del enlace 2 aquí</a></font></center>"
mensagens[2]="<center><font face='Arial' size=2><a href='Coloca la dirección de
la página 3 aquí'>Coloca el texto del enlace 3 aquí</a></font></center>"
mensagens[3]="<center><font face='Arial' size=2><a href='Coloca la dirección de
la página 4 aquí'>Coloca el texto del enlace 4 aquí</a></font></center>"
mensagens[4]="<center><font face='Arial' size=2><a href='Coloca la dirección de
la página 5 aquí'>Coloca el texto del enlace 5 aquí</a></font></center>"
if (mensagens.length>1)
i=2
else
i=0
function mover1(whichlayer){
tlayer=eval(whichlayer)
if (tlayer.top>0&&tlayer.top<=5){
tlayer.top=0
setTimeout("mover1(tlayer)",3000)
setTimeout("mover2(document.principal.document.segundo)",3000)
return
}
if (tlayer.top>=tlayer.document.height*-1){
tlayer.top-=5
setTimeout("mover1(tlayer)",100)
}
else{
tlayer.top=altura
tlayer.document.write(mensagens[i])
tlayer.document.close()
if (i==mensagens.length-1)
i=0
else
i++
}
}
function mover2(whichlayer){
tlayer2=eval(whichlayer)
if (tlayer2.top>0&&tlayer2.top<=5){
tlayer2.top=0
setTimeout("mover2(tlayer2)",3000)
setTimeout("mover1(document.principal.document.primeiro)",3000)
return
}
if (tlayer2.top>=tlayer2.document.height*-1){
tlayer2.top-=5
setTimeout("mover2(tlayer2)",100)
}
else{
tlayer2.top=altura
tlayer2.document.write(mensagens[i])
tlayer2.document.close()
if (i==mensagens.length-1)
i=0
else
i++
}
}
function mover3(whichdiv){
tdiv=eval(whichdiv)
if (tdiv.style.pixelTop>0&&tdiv.style.pixelTop<=5){
tdiv.style.pixelTop=0
setTimeout("mover3(tdiv)",3000)
setTimeout("mover4(segundo2)",3000)
return
}
if (tdiv.style.pixelTop>=tdiv.offsetHeight*-1){
tdiv.style.pixelTop-=5
setTimeout("mover3(tdiv)",100)
}
else{
tdiv.style.pixelTop=altura
tdiv.innerHTML=mensagens[i]
if (i==mensagens.length-1)
i=0
else
i++
}
}
function mover4(whichdiv){
tdiv2=eval(whichdiv)
if (tdiv2.style.pixelTop>0&&tdiv2.style.pixelTop<=5){
tdiv2.style.pixelTop=0
setTimeout("mover4(tdiv2)",3000)
setTimeout("mover3(primeiro2)",3000)
return
}
if (tdiv2.style.pixelTop>=tdiv2.offsetHeight*-1){
tdiv2.style.pixelTop-=5
setTimeout("mover4(segundo2)",100)
}
else{
tdiv2.style.pixelTop=altura
tdiv2.innerHTML=mensagens[i]
if (i==mensagens.length-1)
i=0
else
i++
}
}
function iniciar(){
if (document.all){
mover3(primeiro2)
segundo2.style.top=altura
segundo2.style.visibility='visible'
}
else if (document.layers){
document.principal.visibility='show'
mover1(document.principal.document.primeiro)
document.principal.document.segundo.top=altura+5
document.principal.document.segundo.visibility='show'
}
}
</script>

<table width="150" border="1" cellspacing="1" cellpadding="0">


<tr>
<td>
<ilayer id="principal" width=&{largura}; height=&{altura}; bgColor=&{bgcolor};
background=&{fundo}; visibility=hide>
<layer id="primeiro" left=0 top=1 width=&{largura};>
<script language="JavaScript1.2">
if (document.layers)
document.write(mensagens[0])
</script>
</layer>
<layer id="segundo" left=0 top=0 width=&{largura}; visibility=hide>
<script language="JavaScript1.2">
if (document.layers)
document.write(mensagens[1])
</script>
</layer>
</ilayer>
<script language="JavaScript1.2">
if (document.all){
document.writeln('<span id="principal2"
style="position:relative;width:'+largura+';height:'+altura+';overflow:hiden;backgro
und-color:'+bgcolor+' ;background-image:url('+fundo+')">')
document.writeln('<div
style="position:absolute;width:'+largura+';height:'+altura+';clip:rect(0 '+largura+'
'+altura+' 0);left:0;top:0">')
document.writeln('<div id="primeiro2"
style="position:absolute;width:'+largura+';left:0;top:1;">')
document.write(mensagens[0])
document.writeln('</div>')
document.writeln('<div id="segundo2"
style="position:absolute;width:'+largura+';left:0;top:0;visibility:hidden">')
document.write(mensagens[1])
document.writeln('</div>')
document.writeln('</div>')
document.writeln('</span>')
}
iniciar()
</script>
</td>
</tr>
</table>>

Personalizando: Para cambiar el color de fondo o incluir una imagen de fondo, observa esta
parte del código:

var largura=150
var altura=120
var bgcolor='white'
var fundo=''

Donde dice "white" podés ingresar el valor hexadecimal del nuevo color; por ejemplo:
#FFCC00

En "fondo" podés colocar el nombre de la imagen de fondo del letrero; por ejemplo:

var largura=150
var altura=120
var bgcolor='white'
var fundo='Nombre del archivo de imagen'
Para incluir más mensajes en el letrero, observá que el último mensaje aparece de la siguiente
forma:

mensagens[4]="<center><font face='Arial' size=2><a href='Coloca la dirección de


la página 5 aquí'>Coloca el texto del enlace 5 aquí</a></font></center>"
Sólo tenés que agregar una unidad al número indicado al final del mensaje. Por ejemplo:

mensagens[5]="<center><font face='Arial' size=2><a href='Coloca la dirección de


la página 5 aquí'>Coloca el texto del enlace 5 aquí</a></font></center>"
mensagens[6]="<center><font face='Arial' size=2><a href='Coloca la dirección de
la página 6 aquí'>Coloca el texto del enlace 6 aquí</a></font></center>"
Seguí hasta llegar al número total de mensajes que desees incluir.

Barra de estado fija:


Podés colocar la palabra o el mensaje que quieras en la barra de estado de tu sitio y
mantenerlo fijo. De esta forma tu sitio quedará mucho más personalizado, además de contar
con otras ventajas. Por ejemplo: el visitante no verá la dirección del enlace al que está
apuntando, sólo el mensaje definido por vos.

<Script language="JavaScript">
statuss();
function statuss()
{
window.status = "www.pauluk.8k.com - Un Sitio. Muchas Opciones.";
setTimeout("statuss()", 1);
}
</script>

Saludo al visitante:
Puedes poner en tu sitio un mensaje personalizado según la hora en que el visitante entre.
Este puede recibir el saludo "Buen día", "Buenas tardes", "Buenas noches", o puedes
sustituirlos por otros mensajes de tu preferencia. De esta forma el visitante verá el mensaje de
acuerdo con el horario que entre a tu página.

<Font size=2 face=arial><b>


<Script Language="JavaScript">
<!--
today = new Date()
if(today.getMinutes() < 10){
pad = "0"}
else
pad = "";
document.write ;if((today.getHours() >=6) && (today.getHours() <=9)){
document.write("¡Buen día!")
}
if((today.getHours() >=10) && (today.getHours() <=11)){
document.write("¡Buen día!")
}
if((today.getHours() >=12) && (today.getHours() <=19)){
document.write("¡Buenas tardes!")
}
if((today.getHours() >=20) && (today.getHours() <=23)){
document.write("¡Buenas noches!")
}
if((today.getHours() >=0) && (today.getHours() <=3)){
document.write("¡Buenas noches!")
}
if((today.getHours() >=4) && (today.getHours() <=5)){
document.write("¡Buenas noches!")
}
// -->
</script>
</b></font>

Texto animado:
Con este recurso puedes hacer que cualquier texto tenga movimiento en tu página. Es ideal
para destacar tu logo o lo que vos prefieras.

<script language="JavaScript">
<!--
done = 0;
step = 4
function anim(yp,yk)
{
if(document.layers) document.layers["texto"].top=yp;
else document.all["texto"].style.top=yp;
if(yp>yk) step = -4
if(yp<60) step = 4
setTimeout('anim('+(yp+step)+','+yk+')', 35);
}
function start()
{
if(done) return
done = 1;
if(navigator.appName=="Netscape") {
document.texto.left=innerWidth/2 - 145;
anim(60,innerHeight - 60)
}
else {
texto.style.left=11;
anim(60,document.body.offsetHeight - 60)
}
}
// --></script>
<div id="texto" style="position: absolute; top: -50; color: #FF8000; font-family:
Arial, Helvetica; font-weight:bold; font-size:40px;">
<p><font face="Arial, Helvetica, sans-serif" size="3"><b><font size="6"
color="#990000">INGRESA TU TEXTO AQUI</font></b></font></p>
</div>
<script language="JavaScript">
<!--
setTimeout('start()',10);
//-->
</script>

Texto de apertura:
Este es un recurso muy interesante. Podés lograr que, al entrar a tu página, el usuario vea un
mensaje de bienvenida o cualquier otro que configures. Luego, el usuario es llevado
automáticamente a la página que tú definas.
Para tener este recurso en tu página, sólo debes copiar el siguiente código, pegarlo en tu
editor y guardar la página como principal. De esta forma, al entrar a tu página, los visitantes
verán los mensajes y luego serán llevados a la página que tú definas. Es muy fácil configurar
este recurso. Basta con alterar las áreas destacadas en negrito en el código. Si tienes
problemas con algún editor HTML que no reconozca el código, copia y pega este código en el
bloc de notas del Windows u otro editor de texto y no olvides guardarlo con extensión html.

<HTML>
<HEAD>
<TITLE>Ingresa el título aquí</TITLE>
<SCRIPT LANGUAGE = "JavaScript">
function makeArray() {
this.length = makeArray.arguments.length;
for (var i = 0; i < this.length; i++)
this[i + 1] = makeArray.arguments[i];
}
function makeSlideShow (obj, wait, pre, url) {
this.curText = '';
this.posit = 1;
this.word = obj;
this.length = obj.length;
this.pre = pre;
this.wait = wait;
this.url = url;
this.display = displaySlideShow;
}
function displaySlideShow() {
if (this.posit <= this.length) {
this.curText = this.word[this.posit]
outStringWord = blankFrameTop + this.pre + this.curText + blankFrameBottom;
parent.draw.location = 'javascript:parent.outStringWord';
this.posit++;
}
else {
doneLoop = true;
top.location = this.url;
}
}
function displayLoop() {
if (!doneLoop) reDraw = setTimeout('displayLoop()', wordIntro.wait);
wordIntro.display();
}
var words = new makeArray ('Ingresa el primer texto aquí', 'Ingresa el segundo
texto aquí', 'Ingresa el tercer texto aquí', 'Ingresa el cuarto texto aquí', 'ABRIENDO
EL SITIO... ');
var wordIntro = new makeSlideShow (words, 2500,
'<CENTER><BR><BR><BR><BR><BR><BR><BR><BR><FONT SIZE = 5>',
'Ingresa aquí el URL de la página que aparecerá');
var blankFrameTop = '<HTML><BODY BGCOLOR = "#000000" TEXT = "#FFFFFF">';
var blankFrameBottom = '</BODY></HTML>';
var blankFrame = blankFrameTop + blankFrameBottom;
var doneLoop = false;
</SCRIPT>
</HEAD><FRAMESET onLoad = "displayLoop()" ROWS = "100%, *" FRAMEBORDER
= NO BORDER = 0>
<FRAME
SCROLLING=AUTO
SRC = "javascript:parent.blankFrame"
NAME = "draw"
MARGINWIDTH = 2
MARGINHEIGHT = 2>
</FRAMESET>
</HTML>

Texto en la barra de estado:


Con este recurso podés incluir varios mensajes, novedades y noticias sobre tu sitio. Es una
forma de destacar lo que quieras y también de agregar un efecto diferente a tu sitio.

<script LANGUAGE="JavaScript">
<!--
var speed = 10
var pause = 1500
var timerID = null
var bannerRunning = false
var ar = new Array()
ar[0] = "Ingresa aquí el primer texto "
ar[1] = "Ingresa aquí el segundo texto"
ar[2] = "Ingresa aquí el tercer texto"
ar[3] = "Ingresa aquí el cuarto texto"
ar[4] = "Ingresa aquí el quinto texto"
var message = 0
var state = ""
clearState()
function stopBanner() {
if (bannerRunning)
clearTimeout(timerID)
timerRunning = false
}
function startBanner() {
stopBanner()
showBanner()
}
function clearState() {
state = ""
for (var i = 0; i < ar[message].length; ++i) {
state += "0"
}
}
function showBanner() {
if (getString()) {
message++
if (ar.length <= message)
message = 0
clearState()
timerID = setTimeout("showBanner()", pause)
}
else {
var str = ""
for (var j = 0; j < state.length; ++j) {
str += (state.charAt(j) == "1") ? ar[message].charAt(j) : " "
}
window.status = str
timerID = setTimeout("showBanner()", speed)
}
}
function getString() {
var full = true
for (var j = 0; j < state.length; ++j) {
if (state.charAt(j) == 0)
full = false
}
if (full) return true
while (1) {
var num = getRandom(ar[message].length)
if (state.charAt(num) == "0")
break
}
state = state.substring(0, num) + "1" + state.substring(num + 1, state.length)
return false
}
function getRandom(max) {
var now = new Date()
var num = now.getTime() * now.getSeconds() * Math.random()
return num % max
}
// -->
</script>

Paso 2: Ingresa el siguiente código en la etiqueta <body> de tu página:


<Body onLoad="startBanner()">
Si ya existen otros parámetros en tu etiqueta body, sólo agrega un espacio después del último
e incluye onLoad="startBanner()".
Este comando es importante para hacer que el texto aparezca en la barra de estado
inmediatamente al cargarse la página.

Efecto de apertura:
Este es un recurso fabuloso y muy fácil que permite crear un efecto de entrada a tu página. Es
sólo copiar y pegar el código en tu página. Siempre que alguien acceda a tu sitio el efecto será
activado.

<style>
<!--
.entrada{
position:absolute;
left:0;
top:0;
layer-background-color:green;
background-color:green;
border:0.1px solid green
}
-->
</style>
<div id="i1" class="entrada"></div>
<div id="i2" class="entrada"></div>
<div id="i3" class="entrada"></div>
<div id="i4" class="entrada"></div>
<div id="i5" class="entrada"></div>
<div id="i6" class="entrada"></div>
<div id="i7" class="entrada"></div>
<div id="i8" class="entrada"></div>
<script language="JavaScript1.2">
//
var velocidade=10
var tempo=new Array()
var tempo2=new Array()
if (document.layers){
for (i=1;i<=8;i++){
tempo[i]=eval("document.i"+i+".clip")
tempo2[i]=eval("document.i"+i)
tempo[i].width=window.innerWidth/8-0.3
tempo[i].height=window.innerHeight
tempo2[i].left=(i-1)*tempo[i].width
}
}
else if (document.all){
var clipbottom=document.body.offsetHeight,cliptop=0
for (i=1;i<=8;i++){
tempo[i]=eval("document.all.i"+i+".style")
tempo[i].width=document.body.clientWidth/8
tempo[i].height=document.body.offsetHeight
tempo[i].left=(i-1)*parseInt(tempo[i].width)
}
}
function openit(){
window.scrollTo(0,0)
if (document.layers){
for (i=1;i<=8;i=i+2)
tempo[i].bottom-=velocidade
for (i=2;i<=8;i=i+2)
tempo[i].top+=velocidade
if (tempo[2].top>window.innerHeight)
clearInterval(stopit)
}
else if (document.all){
clipbottom-=velocidade
for (i=1;i<=8;i=i+2){
tempo[i].clip="rect(0 auto+"+clipbottom+" 0)"
}
cliptop+=velocidade
for (i=2;i<=8;i=i+2){
tempo[i].clip="rect("+cliptop+" auto auto)"
}
if (clipbottom<=0)
clearInterval(stopit)
}
}
function gogo(){
stopit=setInterval("openit()",100)
}
gogo()
</script>

¿Querés cambiar el color? Podés cambiarlo por cualquier otro color. ¡Es muy fácil:
Observá que existe una parte del código que contiene:

<style>
<!--
.entrada{
position:absolute;
left:0;
top:0;
layer-background-color:green;
background-color:green;
border:0.1px solid green
}
-->
</style>

Donde dice "green", debes poner el nombre en inglés o el código hexadecimal del color que
deseas.
Podés también seleccionar uno de los colores que siguen y sustituir la referida parte del código
original por esta nueva que vas a recibir.

Imagen que sigue al mouse:

Observá cómo queda el cursor del mouse con este recurso. Podés elegir la imagen que quieras
y ésta acompañará el movimiento del mouse. Puede ser el logotipo de tu empresa, por
ejemplo, o la imagen de tu preferencia. Tu sitio ganará personalidad y combinará mucho más
con tu estilo.
Para tener este recurso en tu página, tenés que seguir dos pasos:
Paso 1: Incluí el siguiente código en tu página HTML.

<script language="JavaScript">
<!--
function YY_Mousetrace(evnt)
{
if (yyns4)
{
if (evnt.pageX) {yy_ml=evnt.pageX; yy_mt=evnt.pageY;} }
else{
yy_ml=(event.clientX + document.body.scrollLeft);
yy_mt=(event.clientY + document.body.scrollTop);
}
if (yy_tracescript)eval(yy_tracescript)
}
//-->
</script>
<script language="JavaScript">
<!--
function
YY_Layerfx(yyleft,yytop,yyfnx,yyfny,yydiv,yybilder,yyloop,yyto,yycnt,yystep) {
if ((document.layers)||(document.all)){
eval("myfunc=yyfnx.replace(/x/gi, yycnt)");
with (Math) {yynextx= eval(myfunc)}
eval("myfunc=yyfny.replace(/x/gi, yycnt)");
with (Math) {yynexty= eval(myfunc)}
yycnt=(yyloop && yycnt>=yystep*yybilder)?0:yycnt+yystep;
if (document.layers){
eval(yydiv+".top="+(yynexty+yytop))
eval(yydiv+".left="+(yynextx+yyleft))
}
if (document.all){
eval("yydiv=yydiv.replace(/.layers/gi, '.all')");
eval(yydiv+".style.pixelTop="+(yynexty+yytop));
eval(yydiv+".style.pixelLeft="+(yynextx+yyleft));
}
argStr='YY_Layerfx('+yyleft+','+yytop+',"'+yyfnx+'","'+yyfny+'","'+yydiv+'",
'+yybilder+','+yyloop+','+yyto+','+yycnt+','+yystep+')';
if (yycnt<=yystep*yybilder){eval(yydiv+".yyto=setTimeout(argStr,yyto)");}
}
}
//-->
</script>
<script language='JavaScript'>
<!--
var yyns4=window.Event?true:false; var yy_mt = 0; var yy_ml = 0;
if (yyns4) document.captureEvents(Event.MOUSEMOVE);
document.onmousemove = YY_Mousetrace;
yy_tracescript = '';
//-->
</script>
<div id="Orbita" style="position:absolute; left: 475px; top: 11px; width: 36px;
height: 32px"><img src="Ingresa aquí el nombre del archivo de imagen"
border=0></div>

En las últimas líneas donde dice que tenés que ingresar el nombre del archivo de imagen que
aparecerá con el cursor del mouse, podés incluir archivos del tipo gif o jpg.

Paso 2: Ahora es necesario que incluyas el código que sigue en tu tag <body>, que quedará
así:
<body onLoad="YY_Mousetrace('',',document.YY_Mousetrace1');
YY_Layerfx(8,18,'yy_ml','yy_mt','document.layers[\'Orbita\']',50000,false,0,0,10)"
>
Si ya existen otros parámetros en tu etiqueta , agregá un espacio después del último y luego
incluí:

onLoad="YY_Mousetrace('',',document.YY_Mousetrace1');
YY_Layerfx(8,18,'yy_ml','yy_mt','document.layers[\'Orbita\']',50000,false,0,0,10)"

Efectos de transición especiales:


Estos efectos de transición son especiales porque con ellos tu página tendrá una apertura muy
original, pero sólo funcionarán con Internet Explorer. No tendrás problemas para utilizar este
recurso, ya que los usuarios de otros navegadores no verán errores y la página se cargará
normalmente.

Ingresá el código debajo de la etiqueta <body> de tu página.

<script language=javaScript>
var n = 15
fadeIn();
function fadeIn(){
var num=new
Array("FFFFFF","FFCC00","2","3","4","5","6","7","8","9","a","b","c","d","e","f","g")
for (var i=0; i<=n; i++){
for (var j=0; j<= n; j++){
color=num[i]+num[j]+num[i]+num[j]+num[i]+num[j]
document.bgColor=color
}}
document.bgColor="#FFFFFF"
}
</script>

Menú desplegable:

El menú desplegable permite que coloques varios enlaces en un solo lugar. Con esto, ganás
espacio y facilidad de navegación. Este menú no necesita un botón para activarse. Basta con
seleccionar el enlace y automáticamente el navegador se dirigirá a la página. Este menú
funciona en páginas sin marcos.

Para crear tu menú y personalizarlo, pegá el siguiente código en tu página HTML:

<form>
<select NAME="links"
onChange="top.location.href=this.form.links.options[this.form.links.selectedIndex].
value">
<option SELECTED>Elija la sección que desee</option>
<option VALUE="http://www.pauluk.8k.com">Pauluk Computación</option>
<option VALUE="http://www.pauluk.8k.com/trucos.htm">Trucos PC</option>
<option VALUE="http:/www.pauluk.8k.com/noticias.htm">Noticias
Tecnológicas</option>
</select>
</form>

Instrucciones para personalización: Observá que cada opción del menú se hace con la
etiqueta:

<option VALUE="Ingresa el enlace aquí">Ingresa el nombre del enlace


aquí</option>
No alteres la siguiente etiqueta:
<select NAME="links"
onChange="top.location.href=this.form.links.options[this.form.links.selectedIndex].
value">
Si cambiás algo en ella, tu menú no funcionará correctamente.

Tu icono en la lista de los favoritos:


Este recurso es muy bueno pero sólo funcionará en IE. Cuando alguien agrega tu página a la
lista de favoritos, aparece al lado del título un pequeño icono de Internet Explorer. ¿Qué tal si
colocas tu propio icono allí? Sí: más personalización para tu sitio.
Para que el icono aparezca en la lista de favoritos del usuario, tenés que colocarlo, primero,
dentro de tu espacio y después, incluir dentro de tus páginas una pequeña y simple línea de
código que hará que el mismo aparezca en la lista. Podés usar cualquier icono que desees (no
olvides que los archivos de icono tienen la extensión .ICO, imágenes gif o jpg no
pueden ser usadas).
Incluye el siguiente código entre las etiquetas "<head>" y "</head>" de tu página:

<link rel="SHORTCUT ICON" href="ÍCONO AQUÍ">

Sonido de fondo en la página:

Podés incluir en tu página un sonido de fondo. De esta forma, siempre que alguien acceda a tu
página, escuchará dicho sonido. Así podés darle más personalidad a tu sitio. Los archivos de
sonido ideales para una homepage son aquellos en formato MIDI (.MID), pero también podés
incluir sonidos del tipo WAVE (.WAV).

Netscape e Internet Explorer presentan algunas diferencias en su sistema y, por lo tanto, en


algunas versiones de Netscape el sonido puede no ser escuchado.

La etiqueta para incluir sonido en tu página debe ser <EMBED>. Observá el ejemplo:

<embed src="nombre del tema" autostart="true" loop="10" width="1"


height="1"></embed>

- En "nombre del tema", ingresás el nombre del tema mid o wav.


- En "loop", ingresás el número de veces que el sonido será repetido.
- En "autostart", definís si querés que el tema comience a sonar solo (atributo TRUE). Si
colocás "FALSE", el usuario tendrá que hacer clic en el botón "play" para escuchar el tema.

Actualizar:
La página "Actualizar" lleva al usuario a otra página sin que el mismo deba ejecutar acción
alguna. Funciona como un simple redireccionador.

<HTML>
<HEAD>
<META HTTP-EQUIV="REFRESH"
CONTENT="Segundos;URL=http://www.pauluk.8k.com">
<TITLE> Titulo </TITLE>
</HEAD>
<BODY>
Códigos HTML
</BODY>
</HTML>
En "segundos", colocás el tiempo que deseas que la página demore hasta redireccionar el
usuario al nuevo URL.

Agregar página a Favoritos:


Aprendé a incluir en tu página un enlace para que los usuarios puedan agregarla
automáticamente a los favoritos del navegador. El visitante sólo tiene que hacer clic en un
enlace para que la página se incluya en su lista de favoritos.
<a href="javascript:window.external.AddFavorite('http://www.pauluk.8k.com',
'Pauluk Computacion')"><small><font face="Verdana" size="1">
Agregar a favoritos</font></small></a>

Barra de estado animada:


Podés darle movimiento a la barra de estado del navegador del visitante en tu sitio. Es un
efecto fabuloso que te permite destacar lo que desees.
Copiá el siguiente código y pegalo en tus páginas debajo de la etiqueta <Body>.

<script language="JavaScript">
tempo = 10;
chars = 5;
texto = "-- Ingresa el texto aquí --";
wtexto = new Array(33);
wtexto[0] = texto;
blnk = " ";//Mantén estos espacios
for (i = 1; i < 32; i++) {
b = blnk.substring(0, i);
wtexto[i] = "";
for (j = 0; j < texto.length; j++) wtexto[i] = wtexto[i] + texto.charAt(j) + b;
}
function animastatus() {
if (chars > -1) str = wtexto[chars];
else str = wtexto[0];
if (chars-- < -40) chars = 31;
status = str;
clearTimeout(tempo);
tempo = setTimeout("animastatus()", 150);
}
animastatus()
</script>

Efecto de apertura múltiple:


Este efecto ofrece otra alternativa de apertura para tu sitio, una forma diferente de presentarlo
a los visitantes. Es sólo copiar y pegar el código en tu página. Siempre que alguien acceda a tu
sitio el efecto será activado.
<style>
.intro{position:absolute;
left:0;
top:0;
layer-background-color:green;
background-color:green;
border:0.1px solid green
}
</style>
<div id="i1" class="intro"></div>
<div id="i2" class="intro"></div>
<div id="i3" class="intro"></div>
<div id="i4" class="intro"></div>
<div id="i5" class="intro"></div>
<div id="i6" class="intro"></div>
<div id="i7" class="intro"></div>
<div id="i8" class="intro"></div>
<script language="JavaScript1.2">
var velocidade=20
var tempo=new Array()
var tempo2=new Array()
if (document.layers){
for (i=1;i<=8;i++){
tempo[i]=eval("document.i"+i+".clip")
tempo2[i]=eval("document.i"+i)
tempo[i].width=window.innerWidth
tempo[i].height=window.innerHeight/8
tempo2[i].top=(i-1)*tempo[i].height
}
}
else if (document.all){
var clipright=document.body.clientWidth,clipleft=0
for (i=1;i<=8;i++){
tempo[i]=eval("document.all.i"+i+".style")
tempo[i].width=document.body.clientWidth
tempo[i].height=document.body.offsetHeight/8
tempo[i].top=(i-1)*parseInt(tempo[i].height)
}
}
function openit(){
window.scrollTo(0,0)
if (document.layers){
for (i=1;i<=8;i=i+2)
tempo[i].right-=velocidade
for (i=2;i<=8;i=i+2)
tempo[i].left+=velocidade
if (tempo[2].left>window.innerWidth)
clearInterval(stopit)
}
else if (document.all){
clipright-=velocidade
for (i=1;i<=8;i=i+2){
tempo[i].clip="rect(0 "+clipright+" auto 0)"
}
clipleft+=velocidade
for (i=2;i<=8;i=i+2){
tempo[i].clip="rect(0 auto auto "+clipleft+")"
}
if (clipright<=0)
clearInterval(stopit)
}
}
function gogo(){
stopit=setInterval("openit()",100)
}
gogo()
</script>

¿Quieres cambiar el color? Puedes cambiarlo por cualquier otro color. ¡Es muy fácil:
Observá que existe una parte del código que contiene:

<style>
<!--
.entrada{
position:absolute;
left:0;
top:0;
layer-background-color:green;
background-color:green;
border:0.1px solid green
}
-->
</style>
Donde dice "green", tenés que poner el nombre en inglés o el código hexadecimal del color
que deseas.
Podés también seleccionar uno de los colores que siguen y sustituir la referida parte del código
original por esta nueva que vas a recibir.

Cambiando la barra de estado:


¿Querés que la barra de estado cambie cuando el mouse pase sobre los enlaces? ¡Es fácil!
Podés hacer que cualquier mensaje aparezca en la barra de estado del navegador cuando
alguien pase el mouse sobre los enlaces de tu página. Observá cómo hacerlo acá:
- Ejemplo- El código HTML de un enlace común se parece al siguiente ejemplo:

<a href=fotos.html>Fotos del Viaje</a>

Sólo tenés que incluir el siguiente código:

ONMOUSEOVER="window.status='COLOCA EL TEXTO AQUI';return true;"


ONMOUSEOUT="window.status='';return true;"
- Código<a href=fotos.html ONMOUSEOVER="window.status='COLOCA EL TEXTO
AQUI';return true;" ONMOUSEOUT="window.status='';return true;">Fotos del
Viaje</a>
Copia el código y pégalo en tus páginas debajo de la etiqueta <Body>.
Texto aleatorio:
Con el texto aleatorio es posible hacer que, a cada visita a tu página, el usuario vea un
mensaje diferente sin necesidad de actualizar tu sitio a todo momento.

<Script Language="JavaScript">
hoje = new Date()
numero_de_textos = 4
segundos = hoje.getSeconds()
numero = segundos % numero_de_textos
if (numero == 0){
texto = "Ingresa el primer texto aquí"
}
if (numero == 01){
texto = "Ingresa el segundo texto aquí"
}
if (numero == 02){
texto = "Ingresa el tercer texto aquí"
}
if (numero == 03){
texto = "Ingresa el cuarto texto aquí"
}
document.write('' + texto +'')
</script>

Instrucciones para personalización: Si deseas incluir más de tres textos, debes ingresar en
"numero de textos" el número total de textos que aparecerán.
if (numero == Ingresa el número del texto aquí){
texto = "Ingresa el texto que aparecerá aquí"
}
En "Ingresa el número del texto aquí", sigue la secuencia. En el código, por ejemplo, el
último número era "03", por lo tanto, para incluir un nuevo texto, el número será "04", y así
sucesivamente para cada nuevo texto.
¡ATENCION! Incluye el código del nuevo texto siempre antes de "document.write('' + texto
+'') </script>".

Imagen aleatoria:
Con este recurso es posible hacer que, a cada visita a tu página, el usuario vea una imagen
diferente sin necesidad de actualizar tu sitio a cada momento.
Imágenes aleatórias con enlaces: Pegá el siguiente código en tu página HTML. Podés
pegarlo donde quieras que aparezcan las imágenes.

<Script Language="JavaScript">
hoje = new Date()
numero_de_imagens = 2
segundos = hoje.getSeconds()
numero = segundos % numero_de_imagens
if (numero == 0){
banner = "Ingresa el nombre de la imagen 1 aqui"
link = "http://"
alvo = "_self"
}
if (numero == 1){
banner = "Ingresa el nombre de la imagen 2 aqui"
link = "http://"
alvo = "_self"
}
document.write('<a href="' + link + '" target="' + alvo + '" ><img src="' + banner
+ '" border=0></a>')
</script>

Añadir el Asunto y el cuerpo cuando nos envíen un e-mail:


Ya sabés que para enviar un mensaje, tenés que incluir mailto:webmaster@pauluk.8k.com
Bueno, si añadís al final de la dirección de correo ?subject=el subject, éste aparecerá de
forma automática en ese campo, así de fácil.
<html>
<a href="mailto:webmaster@pauluk.8k.com?subject=Probando.&body=Probando
truco">Hacé clic aquí</a>

Detectar el navegador:
Esto sirve para comprobar el navegador que se está usando, por si queremos crear una página
para Netscape y otra para Internet Explorer:

<script language="JavaScript">
<!--
function esIE30(){
var browserType=navigator.userAgent;
if (browserType.indexOf("MSIE")==-1)
return false;
else
return true;
}

<!-- Cargar la página según el explorador -->


function cargar(){
if (esIE30())
window.location.href="indice_ie.htm";
else
window.location.href="indice_netscape.htm";
}
//-->
</script>

Ir a un lugar dentro de la misma página:


Nota: Hay que tener en cuenta que se diferencian las mayúsculas de las minúsculas.
<a href="#posicion1">Ir a la posicion1</a>

Ir a un lugar determinado de otra página:


Nota: Hay que tener en cuenta que se diferencian las mayúsculas de las minúsculas.

<a href="otra_pagina.htm#posicion1">Ir a la posicion1 de otra_pagina</a>

Cambiar el contenido de una página cada "x" segundos:


O mejor dicho, cargar otra página después de "x" segundos.
Este comando debe estar en el bloque <HEAD>...</HEAD>

<HEAD>
<!-- otras cosas -->
<META http-equiv="refresh" content="segundos; url=siguiente_pagina.htm">
<!--y algunas mas -->
</HEAD>

You might also like