Vous êtes sur la page 1sur 11

En este manual aprenders a crear pginas en Html, desde qu tipo de programas podemos usar para la creacin de nuestra pgina

web hasta como usar frames, introducir msica o videos en una pgina web. Ten paciencia, ya que algunas cosas no son difciles de entender, pero requieren ms esfuerzo. Si no llegaras a entender algo, trata de leerlo nuevamente. Incluye a lgunas imgenes (carpeta Images) y ejemplos (carpeta Samples) para que comprendas mejor. Para no confundirse, los cdigos estn en color verde oscuro y las etiquetas en negrita. Este manual no es copiado, lo hice yo, as que si lo ves en otro lugar avsame. Espero que te sea til. 1. Qu programa debo usar? Para empezar a programar con Html, se necesita un programa en el cual podamos in troducir nuestro cdigo y as, crear nuestra web. Existen varios programas (editores web) con los cuales puedes ayudarte, entre los ms conocidos estn DreamWeaver, Fro ntpage y HomeSite. Sin embargo, el mejor sigue siendo DreamWeaver por ser tan co mpleto. Existe tambin la posibilidad de usar el Bloc de Notas, el cual yo recomendara para que te aprendes las etiquetas y no te las escribe el programa (yo aprend con el bloc de notas), pero la decisin es tuya. Bueno, ya sabemos que programa podemos utilizar, ahora veremos qu es exactamente el Html. 2. Qu es Html? Html es el lenguaje con el que al escribir eitquetas creamos pginas web. Las pgina s se visualizan por medio de un navegador (Internet Explorer, Netscape...). Con Html puedes crear tablas, colocar imgenes, reproducir audio y/o video, etc. El Html no es el nico lenguaje que existe, es simplemente el bsico, ya que los dems lenguajes como Php, Asp, Javascript... tambin requieren de algunos cdigos de Html para poder funcionar. Debido a que hay distintos navegadores, a veces se pueden omitir o agregar cdigos para que otros navegadores puedan tambin visualizar una pgina. Tal vez te estars preguntando Qu extensin es para lo archivos HTML?, bueno pues pued en ser dos tipos .htm - .html, cualquiera de las dos extensiones nos sirven, ya ser tu decisin cual poner. Ahora, comencemos con las etiquetas de Html. 3. Estructura y etiquetas Como dijimos, el Html es un lenguaje (de programacin) que contiene etiquetas, las cuales nos permiten configurar nuestra web. Las etiquetas se escriben entre < > y (la mayora) tienen la etiqueta de cierre < / >, que es la misma etiqueta solo que con la barra / despus de <. Lo que est entre las dos etiquetas recibe el efect o. Para qu una etiqueta de cierre?, bueno es para limitar nuestra etiqueta, o sea, co mo no queremos que todo este subrayado (por ejemplo) donde ya no queremos que se a as escribimos el cierre. La etiqueta y su etiqueta de cierre, , indica subrayar un texto. Ejemplo: Texto subrayado Texto Normal, el resultado es: Texto subrayado Texto Normal Las partes del documento: Los documentos deben empezar con la etiqueta principal, que es <html> y terminar con su etiqueta de cierre </html>. El encabezado, que es el ttulo de la pgina se escribe entre las etiquetas <head> y </head>. El ttulo se escribe entre las etiquetas <title> y </title> dentro de la etiqueta <head>. Y el contenido de la pgina, entre <body> y </body>. No importa si lo ponemos en maysculas o minsculas, lo importante es que el cierre

sea igual a como se abri. Todo esto quedara as: <html> <head> <title> Ttulo de mi pgina </title> </head> <body> Aqu va el contenido de mi

Crear un link para download: Si queremos poner archivos para que los visitantes los puedan descargar a sus co mputadoras, solo debemos subir ese archivo a nuestro servidor e insertar en nues tra Web el siguiente cdigo HTML: <a href="ejemplo.exe" mce_href="ejemplo.exe">Descripcin del enlace </a> No existe un comando que inicie la descarga. Lo que sucede es que, siempre que a parece un tipo de archivo no reconocido por el navegador, este comienza a descar garlo automticamente. Ejemplo: Si el navegador no logra abrir un archivo "zip" (c ompactado), inicia la descarga automticamente. pgina </body> </html> 4. Mi primer pgina Ya tenemos los conceptos para empezar a crear nuestra primer pgina. Ahora vamos a crear una pgina con texto en negritas y con espacio de una lnea. La etiqueta indi ca texto en negrita, y la etiqueta <p> indica salto de lnea (dejar una lnea de sep aracin). El cdigo es este: <html> <head> <title>Msica</title> </head> <body> <p>Bienvenido,</p> <p>Estas en la mejor pgina.</p> <p>La mejor msica solo aqu.</p> </body> </html> Copia y pega este cdigo en tu editor y gurdalo con un nombre con extensin .htm - .h tml (pag.html, por ejemplo). Nota: Te recomiendo no usar espacios, maysculas o caracteres especiales (# $ % ) e n el nombre de tu archivo, para evitar problemas de lectura con el navegador. Podras utilizar guiones ( - ) o guiones bajos ( _ ) para reemplazar a los espacio s y nombrar a tu archivo algo as: pagina_1.html Ya tenemos una sencilla pgina creada con texto en negritas y con espacios. Ahora vemos en la siguiente imgen lo que hemos puesto:

Si haces click con el botn derecho del mouse y seleccionas Ver Cdigo Fuente (o en el men seleccionas Ver Cdigo Fuente) puedes ver el cdigo (con el bloc de notas) q

ue has escrito para esa pgina. Importante: La pgina principal de tu sitio, osea la primer pgina que aparece, debe mos nombrarla index seguida de un punto y el tipo d extensin (en este caso .htm o .html), as: index.html o index.htm 5. Estilos de prrafos Resulta comn querer hacer espacios entre prrafos. Antes vimos que la etiquieta <p> dejaba una lnea en blanco y despus se escriba el texto, pero esta no es la nica eti queta que puede hacer esto. Existe tambin la etiqueta [br /] que deja una linea d e espacio. Podemos repetir la etiqueta para dejar dos lneas de espacio. Ejemplo: Texto 1[br /] Texto 2[br /][br /]Texto3, resultado: Texto 1 Texto 2 Texto 3 Tambin podemos colocar una lnea para separar, con la etiqueta y podemos ponerle el tamao con la propiedad size, el ancho con width y el color con color, ejemplo: <hr size="3" color="purple" width="75%">, resultado:

Nota: Las etiquetas [br /] y son unas de las etiquetas que no tienen cierre, as q ue no es necesario poner la que sera etiqueta de cierre </br> o </hr>. 6. Alineacin Ya sabemos como dejar espacio, pero nos falta algo que es la alineacin. Yo quiero que despes de dejar el espacio en blanco se escriba el texto al centro, o a la d erecha. Para esto tenemos dos etiquetas<p>, que adems de dejar espacio en blanco, puede alinear o <div>. Usando alguna de estas dos etiquetas y agregando un atri buto llamado align, seguido del signo = y despus la posicin, escrita en ingls (left , right, center) entre comillas ( " ). Veamos un ejemplo para entenderlo mejor: <p align="center">Texto Centrado</p>, resultado: Texto Centrado Tambin podemos hacerlo con la otra etiqueta, <div>: <div align="center">Texto centrado</div>, resultado: Texto Centrado Consejo: No olvides de poner las comillas ( " ) al valor del atributo, es decir, si alineas un texto al centro pon entre comillas center. Esto es porque algunos navegadores no reconocen el valor, aunque en la mayora de los casos no es necesario. Nota: No es necesario agregar el valor left a un atributo de alineacin, osea, nun ca deberas poner por ejemplo: <div align="left">, debido a que predeterminadament e todo se alinea a la izquierda sin tener que indicarlo. 7. Encabezados Los encabezados son como estilos predeterminados de texto. La etiqueta para hace ro es <h ms el nmero> (que sea entre 1 y 6) y su etiqueta de cierre (</h ms el nmero >, pongamos un ejemplo para entender: <h3>Encabezado 3</h3>, resultado: Encabezado 3 Aqu vemos todos los encabezados del ms chico (6) al ms grande (1):

Encabezado Encabezado Encabezado Encabezado Encabezado Encabezado

6 5 4 3 2 1

8. Formato de texto A veces, queremos que algn texto resalte en nuestra pgina, podemos hacerlo ms grand e aumentando el tamao de la fuente (lo que veremos en el prximo captulo), pero lo ms correcto sera ponerlo en negrita, cursiva, subrayado o tachado. Explico cada una de estas etiquetas: Negrita: La etiqueta correspondiente puede una de estas dos o <strong> (y su eti queta de cierre), b proviene de la palabra en ingls bold, que significa negrita. Importante: Hay una diferencia entre el uso de y <strong>, aunque normalmente el efecto es el mismo. La etiqueta indica que el texto sea en negrita y la etiquet a <strong> indica que el texto est sobresaltado, y para algunos navegadores no qu iere decir que est en negritas, podr ser subrayado, cursiva o tachado. Subrayado: Como ya mencion anteriormente, esto se hace con la etiqueta (y la etiq ueta de cierre), la u que proviene de la palabra en ingls underlined, significa s ubrayado. Cursiva: Tambin conocida como itlica. Esta tambin tiene dos etiquetas o (y la etiqu eta de cierre), normalmente encontrars la etiqueta . La i, proviene de la palabra en ingls italic, que significa italica. Subndices y suprandices: Estos se usan normalmente para frmulas. La etiqueta para l os subndices es <sub> y para los suprandices es <sup> (y las etiquetas de cierre). Veamos un ejemplo de esto: <sup>13</sup>CC H<sub>2</sub>O, resultado: 13CC H2O Tachado: Esto normalmente se usa para mostrar que una frase o una palabra est inc orrecta, la etiqueta es <strike> (y su cierre). Strike, en ingls, significa tacha r. Seguro te ha surgido una pregunta... Cmo hago para que una parte del texto est en e n cursiva y todo el texto est en negrita?. Bueno, esto se hace poniendo una etiqu eta adentro de otra, la etiqueta dentro de la y cerrando primero la etiqueta que pusimos al final, un ejemplo para entender: Texto en negritaTexto en cursiva y negrita, resultado: Texto en negritaTexto en cursiva y negrita Ahora yo te pongo una ms difcil, haz un texto todo subrayado con una palabra en ne grita, dos tachadas, cinco palabras en cursiva y la frmula del agua. Cdigo: Negrita <strike>Dos Tachadas</strike> Las Cinco palabras en Cursiva Y la fr mula del agua H<sub>2</sub>O, resultado: Negrita Dos Tachadas Las Cino palabras en Cursiva Y la frmula del agua H2O 9. Atributos del texto En este captulo aprenderemos a darle color a un texto, modificar el tamao y el tip o de fuente. La etiqueta que debemos usar es <font> (y su etiqueta de cierre) co n los atributos color, face (tipo de letra) y size (tamao), sin embargo en prximas versiones de Html puede ser que esta etiqueta quede sin funcionar, as que es mej or estudiar despus de este manual, el de Css (mejor conocidas como hojas de estil o cascada), pero por el momento usaremos esta etiqueta (en el manual de Css hay ms sobre esto). Explico los diferentes atributos de esta etiqueta: Face: Indica el tipo de letra que se le quiere dar al texto. Hay muchos tipos de fuentes, entre las ms conocidas se encuentran Times New Roman, Arial y Verdana. A veces, es recomendable poner varias fuentes separadas por comas ( , ), debido a que cada navegador dispone de otros tipos de fuentes. Esto se indica despues d el signo = y entre comillas ( " ). Ejemplo:

<font face="Verdana,Comic Sans Ms, Arial">Fuentes Arial - Verdana - Comic Sans M S</font>, resultado: Fuentes Arial - Verdana - Comic Sans MS As, el navegador comprobar que est disponible la primer fuente, sino se va a la seg unda, as.. hasta encontrar una fuente que est disponible, y si ya no hay fuentes d isponibles para este navegador, pone la predeterminada (que es Times New Roman). Size: Este atributo indica el tamao del texto. Los valores pueden ser del 1 al 7 y se escriben como cualquier valor, despus del signo = y entre comillas ( " ). Ej emplo: <font size="5">Texto con tamao 5</font>, resultado: Texto con tamao 5 Color: Este atributo indica el color del texto. Hay dos formas de indicar el col or que deseamos poner: 1. Escribiendo el nombre del color que queremos, pero en ingls, si queremos que a lgo este en rojo el valor del atirbuto color sera red. 2. Indicando el valor de RGB (Red Green Blue - Rojo Verde Azul) con numeracin hex adecimal (del 0 al 9 y de la A a la F) despus del signo de nmero ( # ). Este suele ser un poco ms complicado, pero si queremos indicar colores ms exactos debemos us ar este mtodo. Un valor se conseguira poniendo los valores RRGGBB. Ejemplo: <font color="#FF00FF"> Texto rosa</font>, resultado: Texto rosa Aqu tienes una tabla de la paleta de colores que se obtienen con distintos valore s: Tambin podramos incluir estos 3 atributos: <font color="#CC0000" size="4" face="Co mic Sans MS">Texto con todos los atributos</font>, resultado: Texto con todos los atributos 10. Atributos de <BODY> Hay algunos atributos que se aaden a <body> (y tambin a tablas, filas, celdas...) para cambiar el color de fondo, poner una imgen como fondo, hacer ms grueso el mrge n, definir el color de un enlace (mejor conocido como link), definir un color pa ra todo el texto de la pgina... Adems de estos hay mucho ms, pero por el momento so lo usaremos estos. Los atributos son: bgcolor: Sirve para poner un color fijo de la pgina. Como ya indicamos en el captu lo anterior se indica con el nombre del color (en ingls) o el valor RGB. <body bg color="#00CCFF"> background: Coloca una imgen de fondo de la pgina, esta se repite varias veces has ta llenar toda la pgina. Pueden ser fondos con extensin JPG, GIF, BMP o PNG (4 tip os de imgenes), solo escribimos el nombre de la imgen y su extensin. <body backgrou nd="fondo.jpg"> Nota: Cuando ponemos un fondo en una pgina, tambin podemos indicarle otro atributo , que es el de fijar el fondo (este efecto solo funciona si hay ms espacio y tene mos que usar las barras de desplazamiento). <body background="fondo.jpg" bgproperties="fixed"> text: Indica el color para todo el texto de la pgina, que por defecto es el negro ( black - #000000 ). Adems, podemos indicar el color de los enlaces (links) para diferenciar del resto del texto, por defecto vienen subrayados (esto se puede mejorar con css): link: El color del link normal, es decir, uno que no ha sido visitado (que no se ha hecho click sobre l). Por defecto es el azul ( #FF0000 ). vlink: Es el color de un link visitado (que se ha hecho click). Por defecto es el morado ( #800080 ). alink: Indica el color de un enlace activo, quiere decir, cuando un enlace est pr esionado (este casi no se nota). Por defecto es el rojo ( #FF0000 ).

Tambin podemos indicar el mrgen de la pgina, quiere decir, desde donde se va a escr ibir, los valores debern ser en pixeles y son 4 propiedades: leftmargin: Indica el espacio de los lados de la pgina (derecha e izquierda). topmargin: Indica el espacio del borde superior e inferior. marginwidth: Es el equivalente a leftmargin. marginheight: Es el equivalente a topmargin. <body leftmargin="2" topmargin="2" marginwidth="0" marginheight="1"> Importante: Las primeras dos propiedades (leftmargin y topmargin) son vlidas solo para Internet Explorer, y las otras dos (marginwidth y marginheight) son vlidas para Netscape. Vamos a juntar todas estas propiedades: <body background="../Images/backy.jpg" bgproperties="fixed" text="#000099" link= "#FF0000" vlink="#009900" alink="#009900" topmargin="8" leftmargin="4" marginwid th="4" marginheight="8"> <h3>Texto normal</h3> Ejemplo de Link </body> Ve el resultado aqu. Nota: La etiqueta <a> hace que un texto se convierta en enlace, por ahora ignora esa etiqueta. En este ejemplo se us para ver el efecto de las propiedades de <bo dy>, ms adelante se relatar ms sobre esta etiqueta. 11. Tipos de listas Muchas veces queremos hacer una lista de nuestros productos, numerar captulos... Y todo esto se puede hacer con distintos tipos de listas: Listas Desordenadas: Se usa la etiqueta <ul> (y la etiqueta de cierre). Ul provi ene de las palabras en ingls unorder list (lista desordenadas). Cada elemento se pone con la etiqueta <li>, sin etiqueta de cierre. Ejemplo: <p>Pases distribuidores</p> <ul> <li>Mxico <li>Estados Unidos <li>Canad </ul> </p> Resultado: Pases distribuidores Mxico Estados Unidos Canad Tambin podemos cambiar el tipo de vieta (el punto), hay tres tipos: o circle ? square disc Estos se pueden poner con el atributo type, ya sea en la etiqueta <ul> o <li>: <ul type="square"> <li>Mxico <li type="circle">Estados Unidos <li>Canad </ul> Resultado: ? Mxico o Estados Unidos ? Canad Listas Ordenadas: Se hacen con la etiqueta <ol> (y su etiqueta de cierre). Ol pr oviene de la palabra en ingls Ordered List (lista ordenada). Como la otra lista, cada elemento se pone con <li>: <p>Reglas</p> <ol>

<li>No fumar <li>No gritar <li>Tener paciencia </ol> Resultado: Reglas 1. No fumar 2. No gritar 3. Tener paciencia As como para la listas desordenadas se puede cambiar el tipo de vieta, en listas o rdenadas se puede cambiar el tipo de numeracin que se indique en el atributo type y pueden ser: 1 Ordena con nmeros a Ordena alfabticamente en minsculas A Ordena alfabticamente en maysculas i Ordena con nmeros romanos en minsculas I Ordena con nmeros romanos en maysculas <p>Ordenamos por numeros</p> <ol type="1"> <li>Elemento 1 <li> Elemento 2 </ol> <p>Ordenamos por letras</p> <ol type="a"> <li>Elemento a <li> Elemento b </ol> Resultado: Ordenamos por nmeros I. Elemento I II. Elemento II Ordenamos por letras A. Elemento A B. Elemento B Si queremos que empiece a contar desde otro nmero, por ejemplo 10 o X en vez de 1 o I, lo haramos con el atributo start seguido del nmero o letra por el que queram os empezar: <p>Ordenamos por nmeros romanos empezando por el 10</p> <ol type="i" start="10"> <li>Elemento 10 <li>Elemento 11 </ol> <p>Ordenamos por nmeros romanos empezando por el 10 (en romano)</p> <ol type="i" start="10"> <li>Elemento x <li>Elemento xi </ol> Resultado: Ordenamos por nmeros romanos empezando por el 10 10. Elemento 10 11. Elemento 11 Ordenamos por nmeros romanos empezando por el 10 (en romano) x. Elemento x xi. Element xi Podemos juntar los estilos y hacer una lista mixta: <p>Pases distribuidores</p> <ul> <li>Candad

<ol> <li>Toronto <li>Calgary </ol> <li>Estados Unidos <ol> <li>Nueva York <li>Los Angeles <li>Miami </ol> </ul> Resultado: Pases distribuidores Candad 1. Toronto 2. Calgary Estados Unidos 1. Nueva York 2. Los Angeles 3. Miami 12. Enlaces Links Un enlace (o link) puede ser para ver otra pgina, descargar archivos o ir a otro sitio. Los enlaces se pueden identificar si el texto es de otro color o al pasar el mouse se produce un efecto (cambia de color, se subraya...). Tambin podemos enlazar una imgen, es decir, que una imgen nos sirva como enlace y a l presionar sobre esta nos lleve a otra pgina. Para hacer un enlace se usa la eti queta <a> (y la etiqueta de cierre), seguida de la propiedad href, que su valor ser el enlace. Como dijimos, existen varios tipos de enlaces: Internos: Nos llevan a otras partes dentro de la misma pgina. Locales: Son los enlaces que nos dirigen a otras pginas del mismo sitio. Remotos: Nos dirigen a otro sitio o a una pgina de otro sitio (sitio externo al n uestro). E-Mail: Como dice, enva un mensaje a un e-mail. Archivos: Sirven para descargar o ver archivos (exe, doc, pdf, mp3...). 13. Enlaces internos y locales Internos: Este tipo de enlaces nos manda a una parte de la pgina en la que estamo s. Normalmente, se usan cuando una pgina es muy grande y se necesita ir a una par te especfica. Esto se hace con la etiqueta <a>, la propiedad href, despus el signo de nmero ( # ) y el nombre que colocaremos en la parte donde queramos que vaya el visitante. Ejemplo: <a href="#texto">Ir al texto[/url] y en la parte donde queramos ir <a name="text o">[/url] Ver el resultado. Locales: Los sitios web estn formados de pginas, que muestran diferentes contenido s. Las propiedas de la etiqueta son las mismas que en los enlaces internos, pero sin el signo de nmero (a menos que en la otra pgina queramos abrirla e ir a una p arte especfica). Se tendra que escribir el nombre del archivo seguido de un punto y la extensin. En tre la etiqueta se deber escribir el texto que aparecer. Ejemplo: <a href="1.html">Ir al ejemplo de Body[/url], resultado: Ir al ejemplo de Body. Si hay pginas en otro directorio (o carpeta), deberemos poner el nombre ce la car peta, despes una barra ( / ) y la pgina. Ejemplo: <a href="Images/titulo.png">Ver logo del manual[/url], resultado: Ver logo del m anual. Si tenemos un archivo (cualquier tipo) en una subcarpeta y queremos enlazar a un

a imgen (o cualquier otro tipo de archivo) que est en la carpeta principal u otra subcarpeta, deberamos poner en la ruta dos puntos ( .. ), seguida de la carpeta q ue contiene el archivo y despus el nombre del archivo. Podemos ver en la siguient e imgen (ejemplo de con este manual): Para enlazar desde indice.html a excavando.gif, pones <a href="Images/excavando. gif">Enlace[/url]

Para enlazar desde body.html a excavando.gif, pones <a href="../Images/excavando .gif>Enlace[/url] Si existira una subcarpeta dentro de otra subcarpeta, por ejemplo, dentro de la s ubcarpeta Samples, una subcarpeta Archivos, dentro de esta hay un archivo, y enl azamos desde body.html, ponemos dos puntos, una barra, dos puntos, otra barra y el nombre del archivo. Ejemplo: <a href="../../Archivos/imagen.gif>Imagen[/url] Para ir a otra pgina e ir a una parte en especfico, pones el nombre de la pgina seg uido del signo de nmero y el nombre de la seccin. Ejemplo: <a href="indice.html#Ind">Ir al indice[/url] Existe un atributo ms, que al pasar el mouse por algn enlace, aparezca un texto. E l atributo es title y el valor es el texto que se quiera mostrar: <a href="#" title="Texto del enlace">Enlace[/url] Resultado (pon el mouse sobre el texto): Enlace 14. Enlaces remotos, e-mail y archivos Remotos: Este tipo de enlaces son para acceder a pginas que estn fuera de nuestros sitios. Es igual que un enlace local, pero el URL (nombre del sitio) debe empez ar por http://. Ejemplo: Microsoft, resultado: Microsoft. Pero tambin tiene 4 propiedades, junto con el atributo target para abrir de disti ntas formas un enlace: blank: Esta propiedad hace que la ventana se abra en una pgina por aparte, una ve ntana nueva. top: Se abre a pantalla completa, sin frames (pginas independientes, que veremos en los ltimos captuos). self: Esta propiedad abre el enlace en la misma pgina en la que est, es la propied ad por defecto. parent: El enlace se abre sobre su padre, si no hay un padre se abre en la misma pgina. E-mail: Estos enlaces nos dirigen a una direccin de mail. Se coloca el atributo m ailto: despus del href, seguido del mail. Ejemplo: [email]leoj90@gmail.com[/email], resultado: leoj90@gmail.com. Tambin se puede agregar el asunto y una copia para que se enve a otro mail, con la s propiedades subject?= y &cc. Ejemplo: ccinfo@microsoft.com[/email]][email]leoj90@gmail.com[/email], el resultado es el mismo aparentemente, pero pon el mouse sobre el siguiente enlace y ve la barra de estado (abajo donde normalmente dice Listo): leoj90@gmail.com Importante: Este mtodo no es muy comn para enviar un e-mail, en el captulo 18 se de talla ms sobre esto. Archivos: Este tipo de enlace se usa para ver o descargar un archivo. Si es ZIP o EXE, al hacer click se muestra un cuadro de dilogo para ver o descargar, otros formatos, como de audio y/o video (mp3, mpg, avi, wav, mov, wmv...) abren el pro grama predeterminado del usuario para reproducirlo. Para evitar esto, podras pone r un mensaje que diga "Haz click con el botn derecho del mouse y selecciona 'Guar

dar destino como...' para descargar el archivo". Vamos a ver cual es el cdigo par a decargar el Msn Plus! (por ejempo): Descargar Msn Plus!, resultado: Descargar Msn Plus! ### IMAGEN VOLANDO POR LA PANTALLA ###

<SCRIPT language="JavaScript1.2"> var imagem="Ingresa el nombre del archivo de imagen aqu " if (document.layers) {document.write("<LAYER NAME='animacao' LEFT=10 TOP=10><img src='"+imagem+"' ></ LAYER>"} else if (document.all){document.write("<div id='animacao' style='position:absolu te;top:10px;left:10px;width:17px;height:22px;z-index:50'><img src='"+imagem+"'>< /div>"} conta=-1; move=1; function curva(){ abc=new Array(0,1,1,1,2,3,4,0,6,-1,-1,-1,-2,-3,-4,0,-6) for (i=0; i < abc.length; i++) {var C=Math.round(Math.random()*)} iniciar=abc[C]; setTimeout('curva()',1900); return iniciar; } ypos=10; xpos=10; movimento = 60; function moveR(){ caminho=movimento+=iniciar; y = 4*Math.sin(caminho*Math.PI/180); x = 6*Math.cos(caminho*Math.PI/180); if (document.layers){ ypos+=y; xpos+=x; document.animacao.top=ypos+window.pageYOffset; document.animacao.left=xpos+window.pageXOffset; } else if (document.all){ ypos+=y; xpos+=x; document.all.animacao.style.top=ypos+document.body.scrollTop; document.all.animacao.style.left=xpos+document.body.scrollLeft; } T=setTimeout('moveR()',50); } function edges(){ if (document.layers){ if (document.animacao.left >= window.innerWidth-40+window.pageXOffset)movimento= Math.round(Math.random()*45+157.5); if (document.animacao.top >= window.innerHeight-30+window.pageYOffset)movimento= Math.round(Math.random()*45-112.5); if (document.animacao.top <= 2+window.pageYOffset) movimento = Math.round(Math.r andom()*45+67.5);//OK! if (document.animacao.left <= 2+window.pageXOffset) movimento = Math.round(Math. random()*45-22.5);//OK! } else if (document.all)

{ if (document.all.animacao.style.pixelLeft >= document.body.offsetWidth-45+docume nt.body.scrollLeft)movimento=Math.round(Math.random()*45+157.5); if (document.all.animacao.style.pixelTop >= document.body.offsetHeight-35+docume nt.body.scrollTop)movimento=Math.round(Math.random()*45-112.5); if (document.all.animacao.style.pixelTop <= 2+document.body.scrollTop) movimento = Math.round(Math.random()*45+67.5);//OK! if (document.all.animacao.style.pixelLeft <= 2+document.body.scrollLeft) movimen to = Math.round(Math.random()*45-22.5);//OK! } setTimeout('edges()',100); } function efeito(){ curva(); moveR();// onUnload="opener.gO()" edges(); } if (document.all document.layers) efeito() </script>

Vous aimerez peut-être aussi