Documentos de Académico
Documentos de Profesional
Documentos de Cultura
HTML
HTML
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.
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.
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.
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.
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.
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.
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.
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.
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.
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".
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>
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.
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}
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.
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.
(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.
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
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>
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>
<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>
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}
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.
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.
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.
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
Ú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>
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.
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>
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 }
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 ;
}
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.
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 }
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.
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.
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.
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.
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
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.
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.
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.
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.
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.
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.
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.
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.
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
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.
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?
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.
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>
Le damos al botón "Replace All", cerramos el EditPad Lite, le indicamos que guarde todos los
archivos y... ya está. Todo reparado.
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!
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>
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...
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).
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.
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.
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.
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 ).
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")
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.
<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=" ";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>
<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>
<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>
<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"> </li>-->
</ul>
<script type="text/javascript">qm_create(0,false,0,500,false,false,false,false);</script>
</div>
.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 */
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.
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.
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...
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.
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 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, á para á)
• Decimal: Su valor decimal (por ejemplo, &225; para á)
• Hexadecimal: Su valor hexadecimal (por ejemplo, á 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:
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>
updateReloj();
function updateReloj() {
var tiempo = new Date();
var hora = 23-tiempo.getHours();
var minutos = 59-tiempo.getMinutes();
var segundos = 59-tiempo.getSeconds();
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>
<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>
</FORM>
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));
;else{ff1=hh1-Math.floor((hh1-pp1)/stappen*stap);
ff1=eval("\'"+mes(Math.floor(ff1/16))+"\'")+eval("\'"+mes(ff1-
(Math.floor(ff1/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))+"\'");}
;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>
<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>
<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.
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>
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()}"
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 tremer(n) {
if (self.moveBy) {
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) {
alert("www.CheNico.com");
return false;
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:
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>
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",
"[email protected]"
);
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>
<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">
</p>
</center>
</form>
<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>
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()"
<body Onload="show5()">
<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:
Adelante:
<a href="javascript:history.go(1)">Adelante</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>
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:
<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.
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>
<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>
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.
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)"
<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.
<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:
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).
La etiqueta para incluir sonido en tu página debe ser <EMBED>. Observá el ejemplo:
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.
<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>
¿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.
<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>
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;
}
<HEAD>
<!-- otras cosas -->
<META http-equiv="refresh" content="segundos; url=siguiente_pagina.htm">
<!--y algunas mas -->
</HEAD>