Abrir el menú de navegación

Configuración de usuario

¡Te damos la bienvenida a Scribd!

Saltar el carrusel

HTML 22

Cargado por

Alejandra Torres

0% encontró este documento útil (0 votos)

159 vistas141 páginas

Título original

HTML...22 (2)

Derechos de autor

© © All Rights Reserved

Formatos disponibles

DOCX, PDF, TXT o lea en línea desde Scribd

Compartir este documento

Compartir o incrustar documentos

Opciones para compartir

¿Le pareció útil este documento?

¿Este contenido es inapropiado?

Denunciar este documento

Copyright:

© All Rights Reserved

Formatos disponibles

Descargue como DOCX, PDF, TXT o lea en línea desde Scribd

Marcar por contenido inapropiado

0% encontró este documento útil (0 votos)

159 vistas141 páginas

HTML 22

Cargado por

Alejandra Torres

Copyright:

© All Rights Reserved

Formatos disponibles

Descargue como DOCX, PDF, TXT o lea en línea desde Scribd

Marcar por contenido inapropiado

Saltar a página

Está en la página 1de 141

Buscar dentro del documento

<embed src="Bocaraca front seat on-ride HD POV Parque Diversiones Costa Rica.

mp4"width="500" height="500">

<P ALIGN=right><b><u><i><font color="#000000">

Internet, como está ahora, es una excelente herramienta <br>

para búsqueda de información,independientemente de en qué<br>

punto del mundo se encuentre. Las aplicaciones de negocios,<br> de

hecho, se afanan por dar a los usuarios herramientas<br> para

crear nueva información a partir de cero.<br></p>

<p>

<HTML>

<head></head>

<title</title>

<frameset rows="50,*">

<frame src="3.pagina.html" name="arriba">

<frameset cols="50,*">

<frame src="2.pagina.html" name="izquierda">

<frame src="estefania.html" name="derecha">

</frameset </frameset>

<body> </body>

</html>

Etiqueta Etiqueta
Des. DTD Descripción
inicial final

a <a> </a> Origen o destino del vínculo

abbr <abbr> </abbr> Abreviatura (p.ej.:WWW, HTTP, etc.)

acronym <acronym> </acronym>

address <address> </address> Información sobre el autor

applet <applet> </applet> D L Applet Java

area <area> Prohibido Área de un mapa de imágenes en el

lado del cliente
b <b> </b> Estilo de texto en negrita

base <base> Prohibido URI base del documento

basefont <basefont> Prohibido D L Tamaño base de fuente

bdo <bdo> </bdo> Anular algoritmo BiDi I18N

big <big> </big> Estilo de texto grande

blockquote <blockquote> </blockquote> Cita larga

body Opcional Opcional Cuerpo del documento

br <br> Prohibido Salto de línea forzado

button <button> </button> Botón

caption <caption> </caption> Título de tabla

center <center> </center> D L Forma abreviada de DIV align=center

cite <cite> </cite> Cita

code <code> </code> Fragmento de código de computadora

col <col> Prohibido Columna de una tabla

colgroup <colgroup> Opcional Grupo de columnas de una tabla

dd <dd> Opcional Descripción de una definición

del <del> </del> Texto borrado

dfn <dfn> </dfn> Definición

dir <dir> </dir> D L Lista tipo directorio

div <div> </div> Contenedor genérico de idioma/estilo

dl <dl> </dl> Lista de definiciones

dt <dt> Opcional Término definido

em <em> </em> Énfasis

fieldset <fieldset> </fieldset> Grupo de controles de un formulario

font <font> </font> D L Cambio local de la fuente

form <form> </form> Formulario interactivo

frame <frame> Prohibido F Subventana

frameset <frameset> </frameset> F Subdivisión en ventanas

h1 <h1> </h1> Encabezado

h2 <h2> </h2> Encabezado

h3 <h3> </h3> Encabezado

h4 <h4> </h4> Encabezado

h5 <h5> </h5> Encabezado

h6 <h6> </h6> Encabezado

head Opcional Opcional Cabecera del documento

hr <hr> Prohibido Separador horizontal

html Opcional Opcional Elemento raíz del documento

i <i> </i> Estilo de texto en itálica

iframe <iframe> </iframe> L Subventana en línea

img <img> Prohibido Imagen incluida

input <input> Prohibido Control de formulario

ins <ins> </ins> Texto insertado

isindex <isindex> Prohibido D L Entrada de texto en una sola línea con

indicador
kbd <kbd> </kbd> Texto que debe introducir el usuario

label <label> </label> Texto del rótulo de un campo de

formulario
legend <legend> </legend> Leyenda de un grupo de campos

li <li> Opcional Objeto de lista

link <link> Prohibido Un vínculo independiente del medio

map <map> </map> Mapa de imágenes en el lado del
cliente
menu <menu> </menu> D L Lista tipo menú

meta <meta> Prohibido Metainformación genérica

noframes <noframes> </noframes> F Contenedor de contenidos alternativos

para la representación no basada en
marcos
noscript <noscript> </noscript> Contenedor de contenidos alternativos
para la representación no basada en
scripts
object <object> </object> Objeto incluido genérico

ol <ol> </ol> Lista ordenada

optgroup <optgroup> </optgroup> Grupo de opciones

option <option> Opcional Opción seleccionable

p <p> Opcional Párrafo

param <param> Prohibido Valor de propiedad con nombre

pre <pre> </pre> Texto preformateado

q <q> </q> Cita corta en línea

s <s> </s> D L Estilo de texto tachado

samp <samp> </samp> Ejemplo de salida de programas,

scripts, etc.
script <script> </script> Sentencias de script

select <select> </select> Selector de opciones

small <small> </small> Estilo de texto pequeño

span <span> </span> Contenedor genérico de idioma/estilo

strike <strike> </strike> D L Estilo de texto tachado

strong <strong> </strong> Énfasis fuerte

style <style> </style> Información de estilo

sub <sub> </sub> Subíndice

sup <sup> </sup> Superíndice

table <table> </table>

tbody Opcional Opcional Cuerpo de tabla

td <td> Opcional Celda de datos de una tabla

textarea <textarea> </textarea> Campo de texto multilínea

tfoot <tfoot> Opcional Pie de tabla

th <th> Opcional Celda de encabezado de tabla

thead <thead> Opcional Cabecera de tabla

title <title> </title> Título del documento

tr <tr> Opcional Fila de una tabla

tt <tt> </tt> Estilo de texto de teletipo o

monoespacio
u <u> </u> D L Estilo de texto subrayado

ul <ul> </ul> Lista no ordenada

var <var> </var> Variable o argumento de un programa

  Home page
IMG>
Antes de describir en detalle la marca principal de inserción de imágenes en
los hipertextos, es conveniente precisar algunos conceptos de HTML. A   Test
diferencia de muchos procesadores de texto (Ms Word, por ejemplo), los
hipertextos no se "funden" con las imágenes que les sirven de
acompañamiento gráfico, sino que se limitan a invocarlas desde un recorrido   F.a.q.
específico in situ o en el web. Dicho de otro modo, existe una división muy
clara entre archivo .htm e imágenes (y también sonidos, apliques, etc.). Los
documentos HTML se limitan a prever dentro de ellos un espacio en el que   Copyright
se insertan las imágenes solicitadas.

La marca <IMG> no necesita cierre y su sintaxis correcta es:

<IMG SRC="immagine.gif">
500 Applet Java
donce SRC corresponde al inglés Search y es el recorrido del que el Dynamic HTML
navegador saca la imagen (en este caso "immagine.gif"). Como hemos 350 Javascript
señalado, esta marca es única en el sentido de que NO lleva como cierre el un JS a la
correspondiente </IMG>. semana

Para un ejemplo práctico, haz clic aquí

Los navegadores (Netscape, MsIe, Opera etc.) reconocen numerosos

formatos gráficos, aunque los más utilizados son dos: GIF (Graphics
Interchange Format) y JPEG (Joint Photographics Experts Group). En los Guía HTML
últimos meses, asistimos a la difusión a nivel internacional de otro Guía a las
formato:PNG (Portable Network Graphics). CSS

El elemento <IMG> va acompañado de diversos atributos que facilitan su

uso. Veamos ahora juntos cuáles son.

ALT
El uso de texto para comentar las imágenes es una regla fundamental que Macromedia Flash
debemos observar en la creación de sitios web por varias razones: Accessibilidad
Curso Javascript
Tutorial Javascript
 algunos navegadores pordrían estar impostados para no invocar las Tutorial DHTML
imágenes; La Guía Smil
La guía a
 los navegadores textuales para invidentes no conseguirían interpretar las PHP
imágenes si carecieran de comentario;
 es posible evitar pies de imagen incluyendo comentarios dentro de la
imagen misma.

En todos estos casos, el uso de comentarios resuelve el problema y permite

optimizar la página web. La sintaxis correcta de los comentarios es la
siguiente: Introducción al Java
La Guía Perl
Curso CGI
<IMG SRC="immagine.gif" ALT="Obra de K. Haring">
Curso SQL
Seminario Apache
Para un ejemplo práctico, haz clic aquí Seminario
IIS
Para comprobar sus efectos, pasa el ratón por encima de la imagen del
ejemplo.

WIDTH y HEIGHT
En los ejemplos vistos hasta ahora, no hemos especificado las medidas de la
imagen que el navegador se ha encargado de buscar automáticamente. Es
posible definir la anchura y la altura de la imagen gracias a los atributos width
y height, respectivamente:

<IMG SRC="immagine.gif" WIDTH=178 HEIGHT=180 ALT="Obra de K.

Haring">

donde WIDTH=178 es la dimensión horizontal (ancho) de la imagen

expresada en píxel, y HEIGHT=180 la dimensión vertical (alto).

Mediante estos atributos podemos definir dimensiones diferentes de las que

realmente tiene la imagen. En cualquier caso, es aconsejable insertar
imágenes con su tamaño efectivo sobre todo si están en formato GIF, dado
que, cuando se cambian las medidas, este formato pierde mucha calidad.
BORDER
Con el atributo BORDER podemos aplicar un borde a la imagen. Los valores
son numéricos y van expresados en píxel. Si impostamos el valor BORDER
en 0, la imagen no va recuadrada. Cuando omitimos este atributo, el
navegador no aplica ningún borde, pero si la imagen es también un enlace
automáticamente se le asignará un BORDER=1. La sintaxis correcta es:

<IMG SRC="immagine.gif" WIDTH=178 HEIGHT=180 BORDER=2

ALT="Obra de K. Haring">

Para un ejemplo práctico, haz clic aquí

HSPACE y VSPACE
Con estos dos atributos podemos establecer la distancia en píxel de la
imagen a los objetos que se encuentran a los cuatro lados de la misma.

 HSPACE define la distancia de los lados derecho e izquierdo de la

imagen a los objetos más cercanos (texto, imágenes, apliques, etc.).

 VSPACE define la distancia de los lados superior e inferior de la imagen a

los objetos más cercanos (texto, imágenes, apliques, etc.). La sintaxis
correcta es

<IMG SRC="immagine.gif" WIDTH=178 HEIGHT=180 BORDER=2

VSPACE=3 HSPACE=3 ALT="Obra de K. Haring">

Estos atributos resultan útiles cuando queremos distanciar la imagen de los

objetos más cercanos.

ALIGN
El atributo ALIGN define la posición de la imagen respecto al texto colocado
inmediatamente antes o después de la misma. Existen varias opciones para
el atributo ALIGN:

 ALIGN=top: alinea la primera línea de texto con la parte superior de la

imagen.
Para un ejemplo práctico, haz clic aquí.

 ALIGN=middle: alinea la primera línea del texto con el centro de la

imagen.
Para un ejemplo práctico, haz clic aquí.

 ALIGN=bottom: alinea la primera línea de texto con la parte inferior de la

imagen.
Para un ejemplo práctico, haz clic aquí.

 ALIGN=left: el texto se coloca a la derecha de la imagen empezando

desde la parte superior de la misma.
Para un ejemplo práctico, haz clic aquí.

 ALIGN=right: el texto se coloca a la izquierda de la imagen empezando

desde la parte superior de la misma.
Para un ejemplo práctico, haz clic aquí.

S i g u i e n t e l e c c i ó n
[ Í n d i c e ]

© 1997-2006 - All rights reserved HTML.it s.r.l. - Design, layout and articles are copyrighted.

Una de las primeras cosas que debemos aprender del HTML es la etiqueta <img> que
funciona para colocar imágenes dentro de una página web.

Para poner una imágen utilizamos el siguiente código:

<img src="imagenHTML.jpg">

Donde "imagenHTML.jpg" es la imagen que vamos a colocar. Deberá estar ubicada en el

mismo directorio. Si queremos colocar una imagen con HTML en una página que no está
colocada dentro del mismo directorio, podemos usar una ruta absoluta:

<img src="folder/imagenHTML.jpg"

La etiqueta <img> tiene varias propiedas como son:

border, width, height, alt

Ejemplo con propiedades de imágen en HTML

<img src="imagenHTML.jpg" border="0" width="10" height="10">

El ancho y alto (width, height) se coloca en pixeles y deben corresponder al tamaño original
de la imagen para que no se distorcione.

Los formatos soportados por el explorer son jpg, gif y png.

Vimos en su momento el atributo align que nos permitía alinear el texto a

derecha, izquierda o centro de nuestra página. Dijimos que este atributo no era
exclusivo de la etiqueta <p> sino que podía ser encontrado en otro tipo de
etiquetas.
Pues bien, <img> resulta ser una de esas etiquetas que aceptan este atributo
aunque en este caso el funcionamiento resulta ser diferente.

Para alinear una imagen horizontalmente podemos hacerlo de la misma forma que
el texto, es decir, utilizando el atributo align dentro de una etiqueta <p> o <div>.
En este caso, lo que incluiremos dentro de esa etiqueta será la imagen en lugar
del texto:

Este código mostrará la imagen en el centro:

<div align="center"><img src="logo.gif"></div>

Quedaría así:

Sin embargo, ya hemos dicho que la etiqueta <img> puede aceptar el atributo
align. En este caso, la utilidad que le damos difiere de la anterior.

El hecho de utilizar el atributo align dentro de la etiqueta <img> nos permite, en

el caso de darle los valores left o right, justificar la imagen del lado que
deseamos a la vez que rellenamos con texto el lado opuesto. De esta forma
embebemos nuestras imágenes dentro del texto de una manera sencilla.

Aquí podéis ver el tipo de código a crear para obtener dicho efecto:
<p>
<img src="imagen.gif" align="right">Texto tan extenso como queramos que cubrirá la parte
izquierda de la imagen. Sigo poniendo texto para que se vea el efecto, Bla bla bla bla bla
bla bla...
</p>
Quedaría así:
Texto tan extenso
como queramos
que cubrirá la
parte izquierda de
la imagen. Sigo poniendo texto para
que se vea el efecto, Bla bla bla bla
bla bla bla...
<p>
<img src="imagen.gif" align="left">Texto tan extenso como queramos que cubrirá la parte
derecha de la imagen. Sigo poniendo texto para que se vea el efecto, Bla bla bla bla bla
bla bla...
</p>
Quedaría así:
Texto tan extenso
como queramos
que cubrirá la
parte izquierda de
la imagen. Sigo poniendo texto para
que se vea el efecto, Bla bla bla bla
bla bla bla...
Si en algún momento deseásemos dejar de rellenar ese espacio lateral, podemos
pasar a una zona libre introduciendo un salto de línea <br> dentro del cual
añadiremos un atributo: clear

Así, etiquetas del tipo:

<br clear="left">
Saltara verticalmente hasta encontrar el lateral izquierdo libre.
<br clear="right">
Saltara verticalmente hasta encontrar el lateral derecho libre.
<br clear="all">
Saltará verticalmente hasta encontrar ambos laterales libres.
Ejemplo de clear:
Texto tan extenso
como queramos
que cubrirá la
parte izquierda.
Esto está debajo de la imagen.
Existen otro tipo de valores que puede adoptar el atributo align dentro de la
etiqueta <img>. Estos son relativos a la alineación vertical de la imagen.
Supongamos que escribimos una línea al lado de nuestra imagen. Esta línea
puede quedar por ejemplo arriba, abajo o al medio de la imagen. Asimismo, puede
que en una misma línea tengamos varias imágenes de alturas diferentes que
pueden ser alineadas de distintas formás.
Estos valores adicionales del atributo align son:

top
Ajusta la imagen a la parte más alta de la línea. Esto quiere decir que, si hay una
imagen más alta, ambas imágenes presentaran el borde superior a la misma
altura.
bottom
Ajusta el bajo de la imagen al texto.
Absbottom
Colocara el borde inferior de la imagen a nivel del elemento más bajo de la línea.
middle
Hace coincidir la base de la línea de texto con el medio vertical de la imagen.
absmiddle
Ajusta la imagen al medio absoluto de la línea.
Estas explicaciones, que pueden resultar un poco complicadas, pueden ser más
fácilmente asimiladas a partir con un poco de practica.

Nos queda explicar como introducir debajo de la imagen un pie de foto o

explicación. Para ello tendremos que ver antes de nada las tablas, en el próximos
capítulos...

Cómo mover texo e imágenes con html.

Publicado por Abraham Santos Fernández en 4:43:00 p. m. ,
El código siguiente es para poder hacer mover un texto o imagen, hacia la derecha, izquierda, arriba
o abajo. Es muy fácil, vamos a ver.

Primero antes de la imagen o texto tenemos que poner el siguiente código:

<marquee direction="up" onmouseout="start()" onmouseover="stop()" scrollamount="2"
scrolldelay="145"> </marquee>

Para poder cambiar la dirección de movimiento tenemos que cambiar la palabra up (arriba)
por right(derecha), left(izquierda) o down(abajo).

Ahora, para cambiar la rapidez con la cual se mueven las imagenes o el texto hay que cambiar el
Número 2 que viene por defecto donde se encuetra scrollamount. Mientras más grande sea la cifra
o el Número más rápido será.

Cuando ustedes le ponen el ratón o mause encima de la imagen se detiene.

He aquí varios ejemplos.

Aquí es el que tiene con el número 2:

Aquí es el que tiene 50:

Y aquí es donde tiene 100:

URL del artículo: http://www.ejemplode.com/17-html/532-
ejemplo_de_como_poner_imagen_de_fondo_en_html.html
Leer completo: Cómo poner imagen de fondo en HTML

<html>
<body background="fondo.jpg">

<h3>Ejemplo de imagen de fondo</h3>

<p>Se pueden utilizar archivos en formato jpg, gif o png. No es recomendable usar otro
formato.</p>

<p>Si la imagen es más pequeña que la página, se repetirá en mozaico.>

</body>
</html>

URL del artículo: http://www.ejemplode.com/17-html/532-

ejemplo_de_como_poner_imagen_de_fondo_en_html.html
Leer completo: Cómo poner imagen de fondo en HTML
El baloncesto está presente en los Juegos Olímpicos de forma ininterrumpida desde los Juegos Olímpicos de
Berlín 1936, habiendo sido previamente deporte de exhibición en Juegos Olímpicos de San Luis 1904.

El gran dominador de la competición masculina ha sido históricamente la Selección de Estados Unidos que, en las
18 ediciones disputadas ha ganado un total de 17 medallas: catorce de oro, una de plata y dos de bronce. La única
edición en la que Estados Unidos no aparece en el podio es en los Juegos Olímpicos de Moscú 1980, ya que no
participó por motivos políticos.

En los Juegos Olímpicos de Barcelona 1992 la competición se abrió por primera vez a la participación de los
jugadores profesionales de la NBA, acudiendo a los juegos uno de los equipos más potentes de la historia de este
deporte, conocido desde entonces con el sobrenombre de Dream Team, en el que se reunieron jugadores tan
extraordinarios como Michael Jordan, Magic Johnson o Larry Bird.

El vigente campeón olímpico es Estados Unidos, que ganó la medalla de oro en los Juegos Olímpicos de Rio de
Janeiro, derrotando en la final a España en la categoría femenina y Serbia en la categoría masculina.
<html> Defines the root of an HTML document
<i> Defines a part of text in an alternate voice or mood

<iframe> Defines an inline frame

<img> Defines an image

<input> Defines an input control

<ins> Defines a text that has been inserted into a document

<kbd> Defines keyboard input

<keygen> Defines a key-pair generator field (for forms)

<label> Defines a label for an <input> element

<legend> Defines a caption for a <fieldset> element

<li> Defines a list ítem

<link> Defines the relationship between a document and an external resource (most used
sheets)

<main> Specifies the main content of a document

<map> Defines a client-side image-map

<mark> Defines marked/highlighted text

<menu> Defines a list/menu of commands

<menuitem Defines a command/menu item that the user can invoke from a popup menu
>

<meta> Defines metadata about an HTML document

<meter> Defines a scalar measurement within a known range (a gauge)

<nav> Defines navigation links

<noframes> Not supported in HTML5.

Defines an alternate content for users that do not support frames

<noscript> Defines an alternate content for users that do not support client-side scripts

<object> Defines an embedded object

<ol> Defines an ordered list

<optgroup> Defines a group of related options in a drop-down list

<option> Defines an option in a drop-down list

<output> Defines the result of a calculation

<p> Defines a paragraph

<param> Defines a parameter for an object

<pre> Defines preformatted text

<progress> Represents the progress of a task

<q> Defines a short quotation

<rp> Defines what to show in browsers that do not support ruby annotations

<rt> Defines an explanation/pronunciation of characters (for East Asian typography)

<ruby> Defines a ruby annotation (for East Asian typography)

<s> Defines text that is no longer correct

<samp> Defines sample output from a computer program

<script> Defines a client-side script

<section> Defines a section in a document

<select> Defines a drop-down list

<small> Defines smaller text

<source> Defines multiple media resources for media elements (<video> and <audio>)

<span> Defines a section in a document

<strike> Not supported in HTML5. Use <del> or <s> instead.

Defines strikethrough text

<strong> Defines important text

<style> Defines style information for a document

<sub> Defines subscripted text

<summary> Defines a visible heading for a <details> element

<sup> Defines superscripted text

<table> Defines a table

<tbody> Groups the body content in a table

<td> Defines a cell in a table

<textarea> Defines a multiline input control (text area)

<tfoot> Groups the footer content in a table

<th> Defines a header cell in a table

<thead> Groups the header content in a table

<time> Defines a date/time

<title> Defines a title for the document

<tr> Defines a row in a table

<track> Defines text tracks for media elements (<video> and <audio>)

<tt> Not supported in HTML5. Use CSS instead.

Defines teletype text

<u> Defines text that should be stylistically different from normal text

<ul> Defines an unordered list

<var> Defines a variable

<video> Defines a video or movie

<wbr> Defines a possible line-break

Tag Description

<table> Defines a table

<caption> Defines a table caption

<th> Defines a header cell in a table

<tr> Defines a row in a table

<td> Defines a cell in a table

<thead> Groups the header content in a table

<tbody> Groups the body content in a table

<tfoot> Groups the footer content in a table

<col> Specifies column properties for each column within a <colgroup> element

<colgroup> Specifies a group of one or more columns in a table for formatting

Attribute Belongs to

accept <input>

accept-charset <form>

accesskey Global Attributes

action <form>

align Not supported in HTML 5.

alt <area>, <img>, <input>

async <script>

autocomplete <form>, <input>

autofocus <button>, <input>, <keygen>, <select>,<textarea>
autoplay <audio>, <video>

bgcolor Not supported in HTML 5.

border Not supported in HTML 5.

challenge <keygen>

charset <meta>, <script>

checked <input>

cite <blockquote>, <del>, <ins>, <q>

class Global Attributes

color Not supported in HTML 5.

cols <textarea>

colspan <td>, <th>

content <meta>

contenteditable Global Attributes

contextmenu Global Attributes

controls <audio>, <video>

coords <area>

data <object>

data-* Global Attributes

datetime <del>, <ins>, <time>

default <track>
defer <script>

dir Global Attributes

dirname <input>, <textarea>

disabled <button>, <fieldset>, <input>, <keygen>, <optgroup>, <option>, <select>,<textarea>

download <a>, <area>

draggable Global Attributes

dropzone Global Attributes

enctype <form>
for <label>, <output>

form <button>, <fieldset>, <input>, <keygen>, <label>, <meter>, <object>, <output>,<select>, <textarea>

formaction <button>, <input>

headers <td>, <th>

height <canvas>, <embed>, <iframe>, <img>,<input>, <object>, <video>

hidden Global Attributes

high <meter>

href <a>, <area>, <base>, <link>

hreflang <a>, <area>, <link>

http-equiv <meta>

id Global Attributes
ismap <img>

keytype <keygen>

kind <track>

label <track>

lang Global Attributes

list <input>

loop <audio>, <video>

low <meter>

manifest <html>

max <input>, <meter>, <progress>
maxlength <input>, <textarea>

media <a>, <area>, <link>, <source>, <style>

method <form>

min <input>, <meter>

multiple <input>, <select>

muted <video>

name <button>, <fieldset>, <form>, <iframe>,<input>, <keygen>, <map>, <meta>,<object>, <output>, <param>, <se

novalidate <form>

onabort <audio>, <embed>, <img>, <object>,<video>

onafterprint <body>

onbeforeprint <body>
onbeforeunload <body>

onblur All visible elements.

oncanplay <audio>, <embed>, <object>, <video>

oncanplaythrough <audio>, <video>

onchange All visible elements.

onclick All visible elements.

oncontextmenu All visible elements.

oncopy All visible elements.

oncuechange <track>

oncut All visible elements.

ondblclick All visible elements.

ondrag All visible elements.

ondragend All visible elements.

ondragenter All visible elements.

ondragleave All visible elements.

ondragover All visible elements.

ondragstart All visible elements.

ondrop All visible elements.

ondurationchange <audio>, <video>

onemptied <audio>, <video>
onended <audio>, <video>

onerror <audio>, <body>, <embed>, <img>,<object>, <script>, <style>, <video>

onfocus All visible elements.

onhashchange <body>

oninput All visible elements.

oninvalid All visible elements.

onkeydown All visible elements.

onkeypress All visible elements.

onkeyup All visible elements.

onload <body>, <iframe>, <img>, <input>,<link>, <script>, <style>
onloadeddata <audio>, <video>

onloadedmetadata <audio>, <video>

onloadstart <audio>, <video>

onmousedown All visible elements.

onmousemove All visible elements.

onmouseout All visible elements.

onmouseover All visible elements.

onmouseup All visible elements.

onmousewheel All visible elements.

onoffline <body>
ononline <body>

onpagehide <body>

onpageshow <body>

onpaste All visible elements.

onpause <audio>, <video>

onplay <audio>, <video>

onplaying <audio>, <video>

onpopstate <body>

onprogress <audio>, <video>

onratechange <audio>, <video>
onreset <form>

onresize <body>

onscroll All visible elements.

onsearch <input>

onseeked <audio>, <video>

onseeking <audio>, <video>

onselect All visible elements.

onshow <menu>

onstalled <audio>, <video>
onstorage <body>

onsubmit <form>

onsuspend <audio>, <video>

ontimeupdate <audio>, <video>

ontoggle <details>

onunload <body>

onvolumechange <audio>, <video>

onwaiting <audio>, <video>
onwheel All visible elements.

open <details>

optimum <meter>

pattern <input>

placeholder <input>, <textarea>

poster <video>

preload <audio>, <video>

readonly <input>, <textarea>

rel <a>, <area>, <link>
required <input>, <select>, <textarea>

reversed <ol>

rows <textarea>

rowspan <td>, <th>

sandbox <iframe>

scope <th>

scoped <style>

selected <option>

shape <area>
size <input>, <select>

sizes <link>

span <col>, <colgroup>

spellcheck Global Attributes

src <audio>, <embed>, <iframe>, <img>,<input>, <script>, <source>, <track>,<video>

srcdoc <iframe>

srclang <track>

start <ol>

step <input>

style Global Attributes

tabindex Global Attributes

target <a>, <area>, <base>, <form>

title Global Attributes

translate Global Attributes

type <button>, <embed>, <input>, <link>,<menu>, <object>, <script>, <source>,<style>

usemap <img>, <object>

value <button>, <input>, <li>, <option>,<progress>, <param>

width <canvas>, <embed>, <iframe>, <img>,<input>, <object>, <video>

wrap <textarea>

Color Name HEX Color S

AliceBlue #F0F8FF S

AntiqueWhite #FAEBD7 S

Aqua #00FFFF S

Aquamarine #7FFFD4 S

Azure #F0FFFF S

Beige #F5F5DC S

Bisque #FFE4C4 S

Black #000000 S

BlanchedAlmond #FFEBCD S

Blue #0000FF S

BlueViolet #8A2BE2 S

Brown #A52A2A S

BurlyWood #DEB887 S
CadetBlue #5F9EA0 S

Chartreuse #7FFF00 S

Chocolate #D2691E S

Coral #FF7F50 S

CornflowerBlue #6495ED S

Cornsilk #FFF8DC S

Crimson #DC143C S

Cyan #00FFFF S

DarkBlue #00008B S

DarkCyan #008B8B S

DarkGoldenRod #B8860B S

DarkGray #A9A9A9 S

DarkGrey #A9A9A9 S
DarkGreen #006400 S

DarkKhaki #BDB76B S

DarkMagenta #8B008B S

DarkOliveGreen #556B2F S

DarkOrange #FF8C00 S

DarkOrchid #9932CC S

DarkRed #8B0000 S

DarkSalmon #E9967A S

DarkSeaGreen #8FBC8F S

DarkSlateBlue #483D8B S

DarkSlateGray #2F4F4F S

DarkSlateGrey #2F4F4F S

DarkTurquoise #00CED1 S
DarkViolet #9400D3 S

DeepPink #FF1493 S

DeepSkyBlue #00BFFF S

DimGray #696969 S

DimGrey #696969 S

DodgerBlue #1E90FF S

FireBrick #B22222 S

FloralWhite #FFFAF0 S

ForestGreen #228B22 S

Fuchsia #FF00FF S

Gainsboro #DCDCDC S

GhostWhite #F8F8FF S

Gold #FFD700 S
GoldenRod #DAA520 S

Gray #808080 S

Grey #808080 S

Green #008000 S

GreenYellow #ADFF2F S

HoneyDew #F0FFF0 S

HotPink #FF69B4 S

IndianRed #CD5C5C S

Indigo #4B0082 S

Ivory #FFFFF0 S

Khaki #F0E68C S

Lavender #E6E6FA S

LavenderBlush #FFF0F5 S
LawnGreen #7CFC00 S

LemonChiffon #FFFACD S

LightBlue #ADD8E6 S

LightCoral #F08080 S

LightCyan #E0FFFF S

LightGoldenRodYellow #FAFAD2 S

LightGray #D3D3D3 S

LightGrey #D3D3D3 S

LightGreen #90EE90 S

LightPink #FFB6C1 S

LightSalmon #FFA07A S

LightSeaGreen #20B2AA S

LightSkyBlue #87CEFA S
LightSlateGray #778899 S

LightSlateGrey #778899 S

LightSteelBlue #B0C4DE S

LightYellow #FFFFE0 S

Lime #00FF00 S

LimeGreen #32CD32 S

Linen #FAF0E6 S

Magenta #FF00FF S

Maroon #800000 S

MediumAquaMarine #66CDAA S

MediumBlue #0000CD S

MediumOrchid #BA55D3 S

MediumPurple #9370DB S
MediumSeaGreen #3CB371 S

MediumSlateBlue #7B68EE S

MediumSpringGreen #00FA9A S

MediumTurquoise #48D1CC S

MediumVioletRed #C71585 S

MidnightBlue #191970 S

MintCream #F5FFFA S

MistyRose #FFE4E1 S

Moccasin #FFE4B5 S

NavajoWhite #FFDEAD S

Navy #000080 S

OldLace #FDF5E6 S

Olive #808000 S
OliveDrab #6B8E23 S

Orange #FFA500 S

OrangeRed #FF4500 S

Orchid #DA70D6 S

PaleGoldenRod #EEE8AA S

PaleGreen #98FB98 S

PaleTurquoise #AFEEEE S

PaleVioletRed #DB7093 S

PapayaWhip #FFEFD5 S

PeachPuff #FFDAB9 S

Peru #CD853F S

Pink #FFC0CB S

Plum #DDA0DD S
PowderBlue #B0E0E6 S

Purple #800080 S

RebeccaPurple #663399 S

Red #FF0000 S

RosyBrown #BC8F8F S

RoyalBlue #4169E1 S

SaddleBrown #8B4513 S

Salmon #FA8072 S

SandyBrown #F4A460 S

SeaGreen #2E8B57 S

SeaShell #FFF5EE S

Sienna #A0522D S

Silver #C0C0C0 S
SkyBlue #87CEEB S

SlateBlue #6A5ACD S

SlateGray #708090 S

SlateGrey #708090 S

Snow #FFFAFA S

SpringGreen #00FF7F S

SteelBlue #4682B4 S

Tan #D2B48C S

Teal #008080 S

Thistle #D8BFD8 S

Tomato #FF6347 S

Turquoise #40E0D0 S

Violet #EE82EE S
Wheat #F5DEB3 S

White #FFFFFF S

WhiteSmoke #F5F5F5 S

Yellow #FFFF00 S

YellowGreen #9ACD32

<hr align=<center><IMG SRC=”1.gif” WIDTH=10% color=”orange” NOSHADE> <br>

Redireccionar una página:

Si tenés una dirección larga, y los servidores que te dan direcciones cortas no tienen buena capacidad de
almacenamiento o de taza de transferencia de datos, con este código podés hacer que al escribir una
dirección se abra otra, solo tenés que insertar este código en el index.html del dominio corto poniendo tu
dirección actual donde está en verde:

<HTML>
<HEAD>
<TITLE>Redireccionado por www.CheNico.com</TITLE>
<SCRIPT LANGUAGE="JavaScript">
location.href='http://www.CheNico.com';
</SCRIPT>
</HEAD>
<BODY>

Abrir una Web en Pop Up:

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

No dejar seleccionar el texto de nuestra Web:

Con este código vamos a impedir que los visitantes seleccionen el texto de nuestra página para luego
copiarlo a otro lado.

<script language="Javascript">

</script>

Horas restantes para finalizar el día:

Con este código insertamos un pequeño relojito que indica la cuenta regresiva de las horas, minutos y
segundos que faltan para finalizar el día.

<body>
<p>El reloj...</p>
<form name="Reloj">
<input type="text" size="7" name="tiempo" value="mm:hh:ss" title="Tiempo restante para
finalizar el día">
<script language="JavaScript">
<!--
var tiempoAtras;

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

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

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

document.Reloj.tiempo.value = tiempoAtras;

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

Recomendar Pagina:
Con este código podemos hacer que si a un visitante le gustó nuestra Web, la recomiende a un amigo
escribiendo su dirección de correo electrónico en la casilla, al hacer click en "Recomendar esta Web" se
envía un mensaje de correo con el asunto "Pienso que te puede interesar esta página..." y en el cuerpo
del mensaje aparece la dirección completa donde se encuentra el código y el título de la misma.

<form name="eMailer">
ENVÍA ESTA PÁGINA A UN AMIGO
<br>
Indica su e-mail:
<br>
<input type="text" name="address" size="25">
<br>
<input type="button" value="Recomendá esta Web!" onClick="mailThisUrl();">
</form>
<script language="JavaScript1.2">
var good;
function checkEmailAddress(field) {
// the following expression must be all on one line...
var goodEmail = field.value.match(/\b(^(\S+@).+((\.com)|(\.net)|
(\.edu)|(\.mil)|(\.gov)|(\.org)|(\..{2,2}))$)\b/gi);
if (goodEmail){
good = true
} else {
alert('Por favor introduce un e-mail valido')
field.focus()
field.select()
good = false
}
}
u = window.location;
m = "Pienso que te puede interesar esta página...";
function mailThisUrl(){
good = false
checkEmailAddress(document.eMailer.address)
if (good){
// the following expression must be all on one line...
window.location = "mailto:"+document.eMailer.address.value+"?
subject="+m+"&body="+document.title+" "+u;
}
}
</script>

Crear un Formulario o Libro de Visitas:

Con este código podemos crear un formulario para que complete el visitante. O también un libro de
visitas, luego que el visitante apriete el botón "enviar", los datos serán enviados a tu casilla de correo.

<H2>Libro de visitas de www.CheNico.com</H2>

<FORM ACTION="mailto:tunombre@tuservidor.com" METHOD="post">

<TABLE>

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

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

</FORM>

Crear un Título que cambia de colores:

Con este código podemos crear por ejemplo el título para nuestra Web o una de nuestras secciones. Como
el código es muy largo Hacé Click acá para verlo en una nueva ventana

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

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

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

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

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

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

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

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

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

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

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

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

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

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

</script>
</head>

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

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

Cuadro explicativo de los enlaces:

Sorprendé a tus visitantes con este asombroso truco. Al pasar el mouse sobre el link, aparece la
explicación de ese link en un cuadro con la cantidad de palabras que queramos poner. Solo tenés que
reemplazar mis direcciones por las tuyas, y el texto deseado por el tuyo.

<p>
<script language="JavaScript"></script>
</p>
<table border="0">
<tr>
<td width="200"><p align="center"><strong>Opciones.</strong></p>

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

Insertar un sonido o música de fondo:

Si quieren que los visitantes escuchen una canción mientras visitan la Web, o simplemente recibirlos con
una melodía estilo presentación, este es el código que estabas buscando. Solo tenés que guardar el sonido
en el directorio raíz de tu servidor e insertar el siguiente código html:

<BGSOUND SRC="sonido.mid" LOOP=none>

<WIDTH=200 HEIGHT=55 AUTOSTART="true" LOOP="false" HIDDEN="true">
Se recomienda usar sonidos en formato "midi" que son los de menor peso.

Crear un link para download:

Si queremos poner archivos para que los visitantes los puedan descargar a sus computadoras, solo
debemos subir ese archivo a nuestro servidor e insertar en nuestra Web el siguiente código HTML:

<a href="ejemplo.exe">Descripción del enlace </a>

No existe un comando que inicie la descarga. Lo que sucede es que, siempre que aparece un tipo de
archivo no reconocido por el navegador, este comienza a descargarlo automáticamente. Ejemplo: Si el
navegador no logra abrir un archivo "zip" (compactado), inicia la descarga automáticamente.

Efecto nieve con cualquier imagen:

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

<script>
var no = 5; // snow number
var speed = 15; // smaller number moves the snow faster
var snowflake = "snow.gif";

var ns4up = (document.layers) ? 1 : 0; // browser sniffer

var ie4up = (document.all) ? 1 : 0;
var dx, xp, yp; // coordinate and position variables
var am, stx, sty; // amplitude and step variables
var i, doc_width = 400, doc_height = 500;
if (ns4up) {
doc_width = self.innerWidth;
doc_height = self.innerHeight;
} else if (ie4up) {
doc_width = 500;
doc_height = 500;
}
dx = new Array();
xp = new Array();
yp = new Array();
am = new Array();
stx = new Array();
sty = new Array();
for (i = 0; i < no; ++ i) {
dx[i] = 0; // set coordinate variables
xp[i] = Math.random()*(doc_width-50); // set position variables
yp[i] = Math.random()*doc_height;
am[i] = Math.random()*20; // set amplitude variables
stx[i] = 0.02 + Math.random()/10; // set step variables
sty[i] = 0.7 + Math.random(); // set step variables
if (ns4up) { // set layers
if (i == 0) {
document.write("<layer name=\"dot"+ i +"\" left=\"15\" ");
document.write("top=\"15\" visibility=\"show\"><img src=\"");
document.write(snowflake + "\" border=\"0\"></layer>");
} else {
document.write("<layer name=\"dot"+ i +"\" left=\"15\" ");
document.write("top=\"15\" visibility=\"show\"><img src=\"");
document.write(snowflake + "\" border=\"0\"></layer>");
}
} else if (ie4up) {
if (i == 0) {
document.write("<div id=\"dot"+ i +"\" style=\"POSITION: ");
document.write("absolute; Z-INDEX: "+ i +"; VISIBILITY: ");
document.write("visible; TOP: 15px; LEFT: 15px;\"><img src=\"");
document.write(snowflake + "\" border=\"0\"></div>");
} else {
document.write("<div id=\"dot"+ i +"\" style=\"POSITION: ");
document.write("absolute; Z-INDEX: "+ i +"; VISIBILITY: ");
document.write("visible; TOP: 15px; LEFT: 15px;\"><img src=\"");
document.write(snowflake + "\" border=\"0\"></div>");
}
}
}
function snowNS() { // Netscape main animation function
for (i = 0; i < no; ++ i) { // iterate for every dot
yp[i] += sty[i];
if (yp[i] > doc_height-50) {
xp[i] = Math.random()*(doc_width-am[i]-30);
yp[i] = 0;
stx[i] = 0.02 + Math.random()/10;
sty[i] = 0.7 + Math.random();
doc_width = self.innerWidth;
doc_height = self.innerHeight;
}
dx[i] += stx[i];
document.layers["dot"+i].top = yp[i];
document.layers["dot"+i].left = xp[i] + am[i]*Math.sin(dx[i]);
}
setTimeout("snowNS()", speed);
}

function snowIE() { // IE main animation function

for (i = 0; i < no; ++ i) { // iterate for every dot
yp[i] += sty[i];
if (yp[i] > doc_height-50) {
xp[i] = Math.random()*(doc_width-am[i]-30);
yp[i] = 0;
stx[i] = 0.02 + Math.random()/10;
sty[i] = 0.7 + Math.random();
doc_width = document.body.clientWidth;
doc_height = document.body.clientHeight;
}
dx[i] += stx[i];
document.all["dot"+i].style.pixelTop = yp[i];
document.all["dot"+i].style.pixelLeft = xp[i] + am[i]*Math.sin(dx[i]);
}
setTimeout("snowIE()", speed);
}

if (ns4up) {
snowNS();
} else if (ie4up) {
snowIE();
}
</script>

Subrayar un Link al pasar el mouse:

Con este código podemos lograr ese tan conocido efecto que al pasar el mouse sobre un link, este se
subraye. Podemos hacer que tenga un color antes de visitar el link, y que tenga otro una vez visitado.

<STYLE type="text/css">

</STYLE>
</p>
<p><a href="l1.htm">El texto que quieras.</a><br>
<a href="l2.htm">otro texto.</a><br>
<a href="l3.htm">Otro texto.</a><br>
</p>

Transformar el cursor en una mira:

Transformá la clásica flechita de Windows en una mira de disparo.

<style type="text/css">

</style>

Tabla de colores HTML:

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

os que están en negrita se pueden escribir en lugar de los códigos.

Nombre del color Código del color Apariencia

White #FFFFFF
Red #FF0000
Green #00FF00
Blue #0000FF
Magenta #FF00FF
Cyan #00FFFF
Yellow #FFFF00
Black #000000
Aqua #70DB93
Baker's Chocolate #5C3317
Blue Violet #9F5F9F
Brass #B5A642
Bright Gold #D9D919
Brown #A62A2A
Bronze #8C7853
Bronze II #A67D3D
Cadet Blue #5F9F9F
Cool Copper #D98719
Copper #B87333
Coral #FF7F00
Corn Flower Blue #42426F
Dark Brown #5C4033
Dark Green #2F4F2F
Dark Green Copper #4A766E
Dark Olive Green #4F4F2F
Dark Orchid #9932CD
Dark Purple #871F78
Dark Slate Blue #6B238E
Dark Slate Grey #2F4F4F
Dark Tan #97694F
Dark Turquoise #7093DB
Dark Wood #855E42
Dim Grey #545454
Dusty Rose #856363
Feldspar #D19275
Firebrick #8E2323
Forest Green #238E23
Gold #CD7F32
Goldenrod #DBDB70
Gray #C0C0C0
Green Copper #527F76
Green Yellow #93DB70
Hunter Green #215E21
Indian Red #4E2F2F
Khaki #9F9F5F
Light Blue #C0D9D9
Light Grey #A8A8A8
Light Steel Blue #8F8FBD
Light Wood #E9C2A6
Lime #32CD32
Mandarian Orange #E47833
Maroon #8E236B
Medium Aquamarine #32CD99
Medium Blue #3232CD
Medium Forest Green #6B8E23
Medium Goldenrod #EAEAAE
Medium Orchid #9370DB
Medium Sea Green #426F42
Medium Slate Blue #7F00FF
Medium Spring
Green
#7FFF00
Medium Turquoise #70DBDB
Medium Violet Red #DB7093
Medium Wood #A68064
Midnight Blue #2F2F4F
Navy #23238E
Neon Blue #4D4DFF
Neon Pink #FF6EC7
New Midnight Blue #00009C
New Tan #EBC79E
Old Gold #CFB53B
Orange #FF7F00
Orange Red #FF2400
Orchid #DB70DB
Pale Green #8FBC8F
Pink #BC8F8F
Plum #EAADEA
Quartz #D9D9F3
Rich Blue #5959AB
Salmon #6F4242
Scarlet #8C1717
Sea Green #238E68
Semi-Sweet
Chocolate
#6B4226
Sienna #8E6B23
Silver #E6E8FA
Sky Blue #3299CC
Slate Blue #007FFF
Spicy Pink #FF1CAE
Spring Green #00FF7F
Steel Blue #236B8E
Summer Sky #38B0DE
Tan #DB9370
Thistle #D8BFD8
Turquoise #ADEAEA
Very Dark Brown #5C4033
Very Light Grey #CDCDCD
Violet #4F2F4F
Violet Red #CC3299
Wheat #D8D8BF
Yellow Green #99CC32
CÓDIGO COLOR CÓDIGO COLOR CÓDIGO COLOR CÓDIGO COLOR CÓDIGO COLOR CÓDIGO COLOR
#000000 #330000 #660000 #990000 #CC0000 #FF0000
#000033 #330033 #660033 #990033 #CC0033 #FF0033
#000066 #330066 #660066 #990066 #CC0066 #FF0066
#000099 #330099 #660099 #990099 #CC0099 #FF0099
#0000CC #3300CC #6600CC #9900CC #CC00CC #FF00CC
#0000FF #3300FF #6600FF #9900FF #CC00FF #FF00FF
#003300 #333300 #663300 #993300 #CC3300 #FF3300
#003333 #333333 #663333 #993333 #CC3333 #FF3333
#003366 #333366 #663366 #993366 #CC3366 #FF3366
#003399 #333399 #663399 #993399 #CC3399 #FF3399
#0033CC #3333CC #6633CC #9933CC #CC33CC #FF33CC
#0033FF #3333FF #6633FF #9933FF #CC33FF #FF33FF
#006600 #336600 #666600 #996600 #CC6600 #FF6600
#006633 #336633 #666633 #996633 #CC6633 #FF6633
#006666 #336666 #666666 #996666 #CC6666 #FF6666
#006699 #336699 #666699 #996699 #CC6699 #FF6699
#0066CC #3366CC #6666CC #9966CC #CC66CC #FF66CC
#0066FF #3366FF #6666FF #9966FF #CC66FF #FF66FF
#009900 #339900 #669900 #999900 #CC9900 #FF9900
#009933 #339933 #669933 #999933 #CC9933 #FF9933
#009966 #339966 #669966 #999966 #CC9966 #FF9966
#009999 #339999 #669999 #999999 #CC9999 #FF9999
#0099CC #3399CC #6699CC #9999CC #CC99CC #FF99CC
#0099FF #3399FF #6699FF #9999FF #CC99FF #FF99FF
#00CC00 #33CC00 #66CC00 #99CC00 #CCCC00 #FFCC00
#00CC33 #33CC33 #66CC33 #99CC33 #CCCC33 #FFCC33
#00CC66 #33CC66 #66CC66 #99CC66 #CCCC66 #FFCC66
#00CC99 #33CC99 #66CC99 #99CC99 #CCCC99 #FFCC99
#00CCCC #33CCCC #66CCCC #99CCCC #CCCCCC #FFCCCC
#00CCFF #33CCFF #66CCFF #99CCFF #CCCCFF #FFCCFF
#00FF00 #33FF00 #66FF00 #99FF00 #CCFF00 #FFFF00
#00FF33 #33FF33 #66FF33 #99FF33 #CCFF33 #FFFF33
#00FF66 #33FF66 #66FF66 #99FF66 #CCFF66 #FFFF66
#00FF99 #33FF99 #66FF99 #99FF99 #CCFF99 #FFFF99
#00FFCC #33FFCC #66FFCC #99FFCC #CCFFCC #FFFFCC
#00FFFF #33FFFF #66FFFF #99FFFF #CCFFFF #FFFFFF

Comentario sobre un link en la barra de estado:

Al pasar el mouse sobre el link deseado, veremos en la barra de estado un comentario sobre éste. Por
ejemplo posicionen el mouse sobre Pauluk Computación y vean en la barra de estado. (para verlo bien en
ésta página pasen el mouse varias veces, ya que hay otro código parecido que lo obstruye).

<a href="http://www.CheNico.com"
onmouseout="window.status=''"
onmouseover="window.status='Acá aparece el mensaje que quieras';return true">
Pauluk Computación</a>

Dificultar copia de página:

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

Podemos colocarlo antes de la etiqueta <html> o después de la etiqueta <body>.

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

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

Establecer una página como inicio:

Este código html te sirve para crear un link para que el visitante pueda hacer que tu página sea la de
inicio de su computadora. Con solo hacer clic sobre el link creado, tu página se iniciará automáticamente
cada vez que esa persona se conecte a Internet.

<A class=chlnk style="FONT-WEIGHT: bold; CURSOR: hand;

COLOR: #004080; FONT-FAMILY: Verdana" onclick=
"this.style.behavior='url(#default#homepage)';
this.setHomePage('http://www.CheNico.com');">
<FONT face=Arial color=#000000 size=-2><U>
Establecer como página de inicio</U></FONT></A>

Enviar un e-mail con Asunto y Mensaje:

Con este truco podés hacer que al hacer clic sobre una palabra, se abra el Outlook para enviar un mensaje
con tu dirección, el asunto que quieras y el texto que quieras. Por ejemplo: Hacé clic acá para mandarme
un mensaje

<a href="mailto:webmaster@pauluk.8k.com?subject=Prueba.&body=Estoy probando el

truco...">Hacé clic acá para mandarme un mensaje</a>

Abrir un Link en una Ventana Nueva:

Cuando tenemos Links en nuestras páginas y alguien hace clic sobre ellos, automáticamente se abre esa
dirección en nuestra ventana. Con este truco podemos hacer que al hacer clic sobre un determinado Link,
esta dirección se abra en una ventana nueva, quedando la nuestra también abierta:

<a href="http://www.CheNico.com" target="_blank">Pauluk Computación</a>

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

<a name="1"></a><A
onclick="window.open('MiFoto.jpg','Estructuras','toolbar=no,location=no,scrollbars=yes,direct
ories=

no,status=no,menubar=no,resizable=no,width=400,height=475');"

href="#1"><b><font face="Verdana" size="2">Ejemplo</font></b></a>

Otra barra con mas colores:

A continuación veremos otro código para ponerle color a la barra de desplazamiento, en este caso vamos
a poder personalizar los colores de la barra, del fondo y los bordes. Reemplazar los nombres de los colores
por otros o por los código de letras y números. Mas abajo está la tabla de colores.

<style>

</style>

Observación: para ver este truco, es necesario tener instalada las últimas versiones de los navegadores.
Preferentemente Internet Explorer 6.

Abrir un link de una imagen en una ventana nueva:

Con este código podemos insertar una imagen (ej. banner) y que al hacer click sobre ella se abra el link
de destino en una ventana nueva. Primero ponemos la ruta del link de destino, y luego la ruta donde está
alojada la imagen. Si está alojada en la raíz de nuestro servidor solo ponemos el nombre y listo.

<a href="http://www.CheNico.com" target="_blank"><img src="imagen.gif" border=0></a>

Hora y texto en la barra de estado:

Con este truco, podemos hacer que aparezca en la barra de estado la hora de la PC que entra a nuestra
Web y poner el texto que queramos.

<script language="JavaScript">

</script>

Botón animado:
Aprendé a dar movimiento a tu página con botones animados por Java Script. Cada botón puede llevar a
un enlace distinto. Sólo tienes que configurar los parámetros "lineArr" y "urlArr" del script, que permiten
destacar cosas en tu página.

<font face="Arial, Helvetica, sans-serif" size="2">

<script language="JavaScript">
var timerID = null
var timerRunning = false
var charNo = 0
var charMax = 0
var lineNo = 0
var lineMax = 3
var lineArr = new Array(lineMax)
var urlArr = new Array(lineMax)
lineArr[1] = "Pauluk Computación"
urlArr[1] = "http://www.CheNico.com"
lineArr[2] = "Trucos PC"
urlArr[2] = "http://www.pauluk.8k.com/trucosprin.htm"
lineArr[3] = "Noticias Tecnológicas y Actualidad"
urlArr[3] = "http://www.pauluk.8k.com/noticias.htm"
var lineText = lineArr[1]
function StartShow() {
StopShow()
ShowLine()
timerRunning = true
}
function FillSpaces() {
for (var i = 1; i <= lineWidth; i++) {
spaces += " "
}
}
function StopShow() {
if (timerRunning) {
clearTimeout(timerID)
timerRunning = false
}
}
function ShowLine() {
if (charNo == 0) {
if (lineNo < lineMax) {
lineNo++
}
else {
lineNo = 1
}
lineText = lineArr[lineNo]
charMax = lineText.length
}
if (charNo <= charMax) {
document.formDisplay.buttonFace.value = lineText.substring(0, charNo)
charNo++
timerID = setTimeout("ShowLine()", 100)
}
else {
charNo = 0
timerID = setTimeout("ShowLine()", 3000)
}
}
function GotoUrl(url)
{
top.location.href = url
}
document.write("<form name=\"formDisplay\">");
document.write("<input type=\"button\" name=\"buttonFace\" value=\"&{lineText}\"
size=\"18\" onClick=\"GotoUrl(urlArr[lineNo])\">");
document.write("</form>");
StartShow();
</script></font>

Letrero de mensajes:
Este es un efecto muy fácil de lograr y muy funcional para tu página. Podés definir cuántos textos y
enlaces quieras. Ellos se destacarán y tu página quedará mucho más dinámica. Podés ver cómo
personalizar este recurso al final de esta página. Es mejor que Java ya que es mucho más liviano y rápido
de cargarse, y no necesita archivos adicionales.

Para incluir este recurso en tu página debes seguir dos pasos:

Paso 1: Incluye el siguiente código en tu etiqueta "<BODY>", agrega un espacio después del último
parámetro e incluye:

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

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

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

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

<style>

</style>
<div id="mensagem">
<div id="submensagem" class="submensagemfont">Iniciando...</div>
</div>
<script language="JavaScript1.2">
var speed=4500
var textos=new Array()
textos[0]="<center><a href='Enlace1 Aquí'>Descripción del enlace1 aquí</a></center>"
textos[1]="<center><a href='Enlace2 Aquí'>Descripción del enlace2 aquí</a></center>"
textos[2]="<center><a href='Enlace3 Aquí'>Descripción del enlace3 aquí</a></center>"

i=0
if (document.all)
tickerobject=document.all.submensagem.style
else
tickerobject=document.mensagem.document
function regenerate(){
window.location.reload()
}
function regenerate2(){
if (document.layers)
setTimeout("window.onresize=regenerate",450)
}

function update(){
BgFade(0xff,0xff,0xff, 0x00,0x00,0x00,10);
if (document.layers){
document.mensagem.document.submensagem.document.write('<span
class="submensagemfont">'+textos[i]+'</span>')
document.mensagem.document.submensagem.document.close()
}
else
document.all.submensagem.innerHTML=textos[i]

if (i<textos.length-1)
i++
else
i=0
setTimeout("update()",speed)
}

function BgFade(red1, grn1, blu1, red2,

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

Pantalla que tiembla:

Al insertar este código, cada vez que entremos en la Web se producirá una especie de terremoto en el
explorador. Un efecto interesante para atraer la atención de nuestros visitantes.

<html>
<head>
<title>www.CheNico.com</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>

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

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

function tremer(n) {

if (self.moveBy) {

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

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

self.moveBy(0,i);

self.moveBy(i,0);

self.moveBy(0,-i);

self.moveBy(-i,0);

}}}}

tremer(5)

</script>
<Script language=JavaScript>

function right(e) {

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

alert("www.CheNico.com");

return false;

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

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

alert("www.CheNico.com");

return false;

return true;

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

window.onmousedown=right;

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

Más Trucos HTML en 3

Botón Colorido:
¿Cansado del botón siempre gris? Ahora con CSS podés definir cualquier color para tus botones. Ellos
combinarán más con tu página y son muy fáciles de crear.

Copia el código que sigue y pegalo dentro de la etiqueta de formulario de tu página:

<input type="submit" name="button" value="www.CheNico.com" style="color: #000000;
background-color: #FF9900">

Texto que sigue al mouse:

Hacé que un texto cualquiera siga al mouse del visitante en tu página. Es un efecto fabuloso y fácil de
incluir en las páginas

Incluye el siguiente código en tu página HTML:

<style>
.animado {position:absolute;visibility:visible;top:-50px;font-size:10pt;font-family:Arial;font-
weight:bold;color:black;}
</style>
<script language=JavaScript>
var x,y
var tempo=10
var espera=0

var texto="www.CheNico.com"
texto=texto.split("")
var xpos=new Array()
for (i=0;i<=texto.length-1;i++) {
xpos[i]=-50
}

var ypos=new Array()

for (i=0;i<=texto.length-1;i++) {
ypos[i]=-50
}

function seguir(e){
x = (document.layers) ? e.pageX : document.body.scrollLeft+event.clientX
y = (document.layers) ? e.pageY : document.body.scrollTop+event.clientY
espera=1
}

function animar_cursor() {
if (espera==1 && document.all) {
for (i=texto.length-1; i>=1; i--) {
xpos[i]=xpos[i-1]+tempo
ypos[i]=ypos[i-1]
}
xpos[0]=x+tempo
ypos[0]=y

for (i=0; i<texto.length-1; i++) {

var camada = eval("span"+(i)+".style")
camada.posLeft=xpos[i]
camada.posTop=ypos[i]
}
}

else if (espera==1 && document.layers) {

for (i=texto.length-1; i>=1; i--) {
xpos[i]=xpos[i-1]+tempo
ypos[i]=ypos[i-1]
}
xpos[0]=x+tempo
ypos[0]=y

for (i=0; i<texto.length-1; i++) {

var camada = eval("document.span"+i)
camada.left=xpos[i]
camada.top=ypos[i]
}
}
var timer=setTimeout("animar_cursor()",30)
}

</script>
<script Language=JavaScript>
for (i=0;i<=texto.length-1;i++) {
document.write("<span id='span"+i+"' class='animado'>")
document.write(texto[i])
document.write("</span>")
}
if (document.layers){
document.captureEvents(Event.MOUSEMOVE);
}
document.onmousemove = seguir;
animar_cursor()
</script>

Imagen volando por la pantalla:

Este efecto hace que cualquier imagen que elijas quede "paseando" por la pantalla, siendo un recurso
excelente tanto para llamar la atención por alguna novedad en tu sitio como para darle más movimiento a
la página.

Copiá y pegá el siguiente código en tu página HTML.

Recordá que la imagen debe estar en el mismo directorio de tu página html.

<SCRIPT language="JavaScript1.2">
var imagem="Ingresa el nombre del archivo de imagen aquí"
if (document.layers)
{document.write("<LAYER NAME='animacao' LEFT=10 TOP=10><img src='"+imagem+"'
></LAYER>")}
else if (document.all){document.write("<div id='animacao'
style='position:absolute;top:10px;left:10px;width:17px;height:22px;z-index:50'><img
src='"+imagem+"'></div>")}

conta=-1;
move=1;
function curva(){
abc=new Array(0,1,1,1,2,3,4,0,6,-1,-1,-1,-2,-3,-4,0,-6)
for (i=0; i < abc.length; i++)
{var C=Math.round(Math.random()*[i])}
iniciar=abc[C];
setTimeout('curva()',1900);
return iniciar;
}
ypos=10;
xpos=10;
movimento = 60;
function moveR(){
caminho=movimento+=iniciar;
y = 4*Math.sin(caminho*Math.PI/180);
x = 6*Math.cos(caminho*Math.PI/180);
if (document.layers){
ypos+=y;
xpos+=x;
document.animacao.top=ypos+window.pageYOffset;
document.animacao.left=xpos+window.pageXOffset;
}
else if (document.all){
ypos+=y;
xpos+=x;
document.all.animacao.style.top=ypos+document.body.scrollTop;
document.all.animacao.style.left=xpos+document.body.scrollLeft;
}
T=setTimeout('moveR()',50);
}
function edges(){
if (document.layers){
if (document.animacao.left >= window.innerWidth-
40+window.pageXOffset)movimento=Math.round(Math.random()*45+157.5);
if (document.animacao.top >= window.innerHeight-
30+window.pageYOffset)movimento=Math.round(Math.random()*45-112.5);
if (document.animacao.top <= 2+window.pageYOffset) movimento =
Math.round(Math.random()*45+67.5);//OK!
if (document.animacao.left <= 2+window.pageXOffset) movimento =
Math.round(Math.random()*45-22.5);//OK!
}
else if (document.all)
{
if (document.all.animacao.style.pixelLeft >= document.body.offsetWidth-
45+document.body.scrollLeft)movimento=Math.round(Math.random()*45+157.5);
if (document.all.animacao.style.pixelTop >= document.body.offsetHeight-
35+document.body.scrollTop)movimento=Math.round(Math.random()*45-112.5);
if (document.all.animacao.style.pixelTop <= 2+document.body.scrollTop) movimento =
Math.round(Math.random()*45+67.5);//OK!
if (document.all.animacao.style.pixelLeft <= 2+document.body.scrollLeft) movimento =
Math.round(Math.random()*45-22.5);//OK!
}
setTimeout('edges()',100);
}
function efeito(){
curva();
moveR();// onUnload="opener.gO()"
edges();
}
if (document.all||document.layers)
efeito()
</script>

Texto en expansión:
Colocá en tu página mensajes animados que se agrandan y llaman la atención de los visitantes. Además,
incluyen enlaces hacia donde vos quieras.

Copiá el siguiente código y pegalo en tus páginas debajo de la etiqueta <Body>.

<script language="JavaScript">
var velocidade = 45;
var ciclo = 2000;
var tamanho = 20;
var x = 0;
var y = 0;
var mensagens, size;
var esize = "</font>";

function initArray() {
this.length = initArray.arguments.length;
for (var i = 0; i < this.length; i++) {
this[i] = initArray.arguments[i];
}
}
var mensagens2 = new initArray(
"Visita",
"www.CheNico.com",
"webmaster@pauluk.8k.com"
);
if(navigator.appName == "Netscape")
document.write('<layer id="wds"></layer><br>');
if (navigator.appVersion.indexOf("MSIE") != -1)
document.write('<span id="wds"></span><br>');
function aumenta(){
mensagens = mensagens2[y];
if (x < tamanho) {
x++;
setTimeout("aumenta()",velocidade);
}
else setTimeout("diminui()",ciclo);

if(navigator.appName == "Netscape") {
size = "<font face=arial color=#000099 point-size='"+x+"pt'>";
document.wds.document.write(size+"<center><a href=http://www.CheNico.com
Target=_blank style=text-
decoration:none;color:#000099>"+mensagens+"</a></center>"+esize);
document.wds.document.close();
}
if (navigator.appVersion.indexOf("MSIE") != -1){
wds.innerHTML = "<font face=arial color=#000099><center><a
href=http://www.CheNico.com Target=_blank style=text-
decoration:none;color:#000099>"+mensagens+"</a></center></font>";
wds.style.fontSize=x+'px'
}
}
function diminui(){
if (x > 1) {
x--;
setTimeout("diminui()",velocidade);
}
else {
setTimeout("aumenta()",ciclo);
y++;
if (y > mensagens2.length - 1) y = 0;
}
if(navigator.appName == "Netscape") {
size = "<font face=arial color=#000099 point-size='"+x+"pt'>";
document.wds.document.write(size+"<center><a href=http://www.CheNico.com
Target=_blank style=text-
decoration:none;color:#000099>"+mensagens+"</a></center>"+esize);
document.wds.document.close();
}
if (navigator.appVersion.indexOf("MSIE") != -1){
wds.innerHTML = "<font face=arial color=#000099><center><a
href=http://www.CheNico.com Target=_blank style=text-
decoration:none;color:#000099>"+mensagens+"</a></center></font>";
wds.style.fontSize=x+'px'
}
}
setTimeout("aumenta()",velocidade);
</script>

Página protegida por clave:

Este es un excelente recurso. Podés proteger tus páginas con una clave. Así podés definir exactamente
quienes entrarán a tu página. No tenés que preocuparte por configuraciones. Es muy sencillo: la clave
siempre será el nombre de tu página sin la extensión .htm, es decir, si la página tiene el nombre de
"ejemplo.htm", la clave será "ejemplo". ¿Ves que fácil?.

Para tener este recurso en tu sitio debes incluir un código en la página de "entrada" en donde el visitante
ingresará la clave, y enviar a tu sitio el archivo de la página que será cargada.

<Form name="frm">
<center>
<Script Language="JavaScript">

</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>

Cambiar el color de la barra de desplazamiento al pasar el mouse:

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

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

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

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

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

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

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

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

Cambiar el color de la barra de desplazamiento:

Con éste código van a conseguir cambiar el clásico color gris de la barra de desplazamiento de la derecha
y abajo por el color que quieran. Para cambiar de colores, cambien el número 000000 por otros, cada
color tiene su número, pero la lista es muy larga, así que prueben con los número que ya van a encontrar
el deseado.

<style>

</style>

Reloj - formato texto:

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

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

Onload="show5()"

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

<body Onload="show5()">

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

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

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

<Script Language=JavaScript>

</script>
</font>

Poniendo fecha en tu sitio:

Aprendé a incluir la fecha en tu sitio sin necesidad de actualizarla cada día. Sólo tenés que usar un
JavaScript que automáticamente exhibirá la fecha del día en tu página cada vez que ésta se abra.

No tenés que preocuparte con ninguna configuración. Sólo tenés que copiar y pegar el código en tu
página.

<script language="JavaScript">
<!--
mydate = new Date();
myday = mydate.getDay();
mymonth = mydate.getMonth();
myweekday= mydate.getDate();
weekday= myweekday;

if(myday == 0)
day = " Domingo, "

else if(myday == 1)
day = " Lunes, "

else if(myday == 2)
day = " Martes, "

else if(myday == 3)
day = " Miércoles, "

else if(myday == 4)
day = " Jueves, "

else if(myday == 5)
day = " Viernes, "

else if(myday == 6)
day = " Sábado, "

if(mymonth == 0)
month = "Enero "

else if(mymonth ==1)

month = "Febrero "

else if(mymonth ==2)

month = "Marzo "
else if(mymonth ==3)
month = "Abril "

else if(mymonth ==4)

month = "Mayo "

else if(mymonth ==5)

month = "Junio "

else if(mymonth ==6)

month = "Julio "

else if(mymonth ==7)

month = "Agosto "

else if(mymonth ==8)

month = "Setiembre "

else if(mymonth ==9)

month = "Octubre "

else if(mymonth ==10)

month = "Noviembre "

else if(mymonth ==11)

month = "Diciembre "

document.write("<font face=arial, size=1>"+ day);

document.write(myweekday+" de "+month+ "</font>");
// -->
</script>

Mensaje de bienvenida:
Con este recurso personalizás tu sitio para el visitante. Al entrar, el visitante verá un espacio para ingresar
su nombre y un mensaje que dice "Hola, Fulano".

Copiá el siguiente código y pégalo donde quieras que aparezca el mensaje:

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

Atrás y Adelante:
Atrás:

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

Adelante:

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

Imprimir pagina actual:

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

Cartel de novedades:
Este efecto te permite tener un cartel o letrero de mensajes incluyendo enlaces para tu sitio. Los
mensajes van cruzando la pantalla como si fueran noticias; es un recurso excelente para destacar
características especiales de tu sitio. Cada mensaje tendrá un enlace

Paso 1: Copiá el siguiente código y pegalo en tu página:

<script language="JavaScript1.2">
var largura=150
var altura=120
var bgcolor='white'
var fundo=''

var mensagens=new Array()

mensagens[0]="<center><font face='Arial' size=2><a href='Coloca la dirección de la página
1 aquí'>Coloca el texto del enlace 1 aquí</a></font></center>"
mensagens[1]="<center><font face='Arial' size=2><a href='Coloca la dirección de la página
2 aquí'>Coloca el texto del enlace 2 aquí</a></font></center>"
mensagens[2]="<center><font face='Arial' size=2><a href='Coloca la dirección de la página
3 aquí'>Coloca el texto del enlace 3 aquí</a></font></center>"
mensagens[3]="<center><font face='Arial' size=2><a href='Coloca la dirección de la página
4 aquí'>Coloca el texto del enlace 4 aquí</a></font></center>"
mensagens[4]="<center><font face='Arial' size=2><a href='Coloca la dirección de la página
5 aquí'>Coloca el texto del enlace 5 aquí</a></font></center>"

if (mensagens.length>1)
i=2
else
i=0

function mover1(whichlayer){
tlayer=eval(whichlayer)
if (tlayer.top>0&&tlayer.top<=5){
tlayer.top=0
setTimeout("mover1(tlayer)",3000)
setTimeout("mover2(document.principal.document.segundo)",3000)
return
}
if (tlayer.top>=tlayer.document.height*-1){
tlayer.top-=5
setTimeout("mover1(tlayer)",100)
}
else{
tlayer.top=altura
tlayer.document.write(mensagens[i])
tlayer.document.close()
if (i==mensagens.length-1)
i=0
else
i++
}
}

function mover2(whichlayer){
tlayer2=eval(whichlayer)
if (tlayer2.top>0&&tlayer2.top<=5){
tlayer2.top=0
setTimeout("mover2(tlayer2)",3000)
setTimeout("mover1(document.principal.document.primeiro)",3000)
return
}
if (tlayer2.top>=tlayer2.document.height*-1){
tlayer2.top-=5
setTimeout("mover2(tlayer2)",100)
}
else{
tlayer2.top=altura
tlayer2.document.write(mensagens[i])
tlayer2.document.close()
if (i==mensagens.length-1)
i=0
else
i++
}
}
function mover3(whichdiv){
tdiv=eval(whichdiv)
if (tdiv.style.pixelTop>0&&tdiv.style.pixelTop<=5){
tdiv.style.pixelTop=0
setTimeout("mover3(tdiv)",3000)
setTimeout("mover4(segundo2)",3000)
return
}
if (tdiv.style.pixelTop>=tdiv.offsetHeight*-1){
tdiv.style.pixelTop-=5
setTimeout("mover3(tdiv)",100)
}
else{
tdiv.style.pixelTop=altura
tdiv.innerHTML=mensagens[i]
if (i==mensagens.length-1)
i=0
else
i++
}
}

function mover4(whichdiv){
tdiv2=eval(whichdiv)
if (tdiv2.style.pixelTop>0&&tdiv2.style.pixelTop<=5){
tdiv2.style.pixelTop=0
setTimeout("mover4(tdiv2)",3000)
setTimeout("mover3(primeiro2)",3000)
return
}
if (tdiv2.style.pixelTop>=tdiv2.offsetHeight*-1){
tdiv2.style.pixelTop-=5
setTimeout("mover4(segundo2)",100)
}
else{
tdiv2.style.pixelTop=altura
tdiv2.innerHTML=mensagens[i]
if (i==mensagens.length-1)
i=0
else
i++
}
}

function iniciar(){
if (document.all){
mover3(primeiro2)
segundo2.style.top=altura
segundo2.style.visibility='visible'
}
else if (document.layers){
document.principal.visibility='show'
mover1(document.principal.document.primeiro)
document.principal.document.segundo.top=altura+5
document.principal.document.segundo.visibility='show'
}
}
</script>
<table width="150" border="1" cellspacing="1" cellpadding="0">
<tr>
<td>
<ilayer id="principal" width=&{largura}; height=&{altura}; bgColor=&{bgcolor};
background=&{fundo}; visibility=hide>
<layer id="primeiro" left=0 top=1 width=&{largura};>
<script language="JavaScript1.2">
if (document.layers)
document.write(mensagens[0])
</script>
</layer>
<layer id="segundo" left=0 top=0 width=&{largura}; visibility=hide>
<script language="JavaScript1.2">
if (document.layers)
document.write(mensagens[1])
</script>
</layer>
</ilayer>

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

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

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

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

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

var largura=150
var altura=120
var bgcolor='white'
var fundo='Nombre del archivo de imagen'

Para incluir más mensajes en el letrero, observá que el último mensaje aparece de la siguiente forma:

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

5 aquí'>Coloca el texto del enlace 5 aquí</a></font></center>"

Sólo tenés que agregar una unidad al número indicado al final del mensaje. Por ejemplo:

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

5 aquí'>Coloca el texto del enlace 5 aquí</a></font></center>"
mensagens[6]="<center><font face='Arial' size=2><a href='Coloca la dirección de la página
6 aquí'>Coloca el texto del enlace 6 aquí</a></font></center>"

Seguí hasta llegar al número total de mensajes que desees incluir.

Barra de estado fija:

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

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

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

<Font size=2 face=arial><b>
<Script Language="JavaScript">

</script>
</b></font>

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

<script language="JavaScript">
</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">

</script>

Texto de apertura:
Este es un recurso muy interesante. Podés lograr que, al entrar a tu página, el usuario vea un mensaje de
bienvenida o cualquier otro que configures. Luego, el usuario es llevado automáticamente a la página que
tú definas.

Para tener este recurso en tu página, sólo debes copiar el siguiente código, pegarlo en tu editor y guardar
la página como principal. De esta forma, al entrar a tu página, los visitantes verán los mensajes y luego
serán llevados a la página que tú definas. Es muy fácil configurar este recurso. Basta con alterar las áreas
destacadas en negrito en el código. Si tienes problemas con algún editor HTML que no reconozca el
código, copia y pega este código en el bloc de notas del Windows u otro editor de texto y no olvides
guardarlo con extensión html.

<HTML>
<HEAD>
<TITLE>Ingresa el título aquí</TITLE>
<SCRIPT LANGUAGE = "JavaScript">
function makeArray() {
this.length = makeArray.arguments.length;
for (var i = 0; i < this.length; i++)
this[i + 1] = makeArray.arguments[i];
}

function makeSlideShow (obj, wait, pre, url) {

this.curText = '';
this.posit = 1;
this.word = obj;
this.length = obj.length;
this.pre = pre;
this.wait = wait;
this.url = url;
this.display = displaySlideShow;
}

function displaySlideShow() {
if (this.posit <= this.length) {
this.curText = this.word[this.posit]
outStringWord = blankFrameTop + this.pre + this.curText + blankFrameBottom;
parent.draw.location = 'javascript:parent.outStringWord';
this.posit++;
}
else {
doneLoop = true;
top.location = this.url;
}
}

function displayLoop() {
if (!doneLoop) reDraw = setTimeout('displayLoop()', wordIntro.wait);
wordIntro.display();
}

var words = new makeArray ('Ingresa el primer texto aquí', 'Ingresa el segundo texto aquí',
'Ingresa el tercer texto aquí', 'Ingresa el cuarto texto aquí', 'ABRIENDO EL SITIO... ');
var wordIntro = new makeSlideShow (words, 2500,
'<CENTER><BR><BR><BR><BR><BR><BR><BR><BR><FONT SIZE = 5>', 'Ingresa aquí el
URL de la página que aparecerá');
var blankFrameTop = '<HTML><BODY BGCOLOR = "#000000" TEXT = "#FFFFFF">';
var blankFrameBottom = '</BODY></HTML>';
var blankFrame = blankFrameTop + blankFrameBottom;
var doneLoop = false;

</SCRIPT>
</HEAD><FRAMESET onLoad = "displayLoop()" ROWS = "100%, *" FRAMEBORDER = NO
BORDER = 0>

<FRAME
SCROLLING=AUTO
SRC = "javascript:parent.blankFrame"
NAME = "draw"
MARGINWIDTH = 2
MARGINHEIGHT = 2>
</FRAMESET>
</HTML>

Texto en la barra de estado:

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

<script LANGUAGE="JavaScript">
<!--
var speed = 10
var pause = 1500
var timerID = null
var bannerRunning = false
var ar = new Array()

ar[0] = "Ingresa aquí el primer texto "

ar[1] = "Ingresa aquí el segundo texto"
ar[2] = "Ingresa aquí el tercer texto"
ar[3] = "Ingresa aquí el cuarto texto"
ar[4] = "Ingresa aquí el quinto texto"

var message = 0
var state = ""
clearState()

function stopBanner() {
if (bannerRunning)
clearTimeout(timerID)
timerRunning = false
}

function startBanner() {
stopBanner()
showBanner()
}

function clearState() {
state = ""
for (var i = 0; i < ar[message].length; ++i) {
state += "0"
}
}

function showBanner() {
if (getString()) {
message++
if (ar.length <= message)
message = 0
clearState()
timerID = setTimeout("showBanner()", pause)
}
else {
var str = ""
for (var j = 0; j < state.length; ++j) {
str += (state.charAt(j) == "1") ? ar[message].charAt(j) : " "
}
window.status = str
timerID = setTimeout("showBanner()", speed)
}
}

function getString() {
var full = true
for (var j = 0; j < state.length; ++j) {
if (state.charAt(j) == 0)
full = false
}
if (full) return true
while (1) {
var num = getRandom(ar[message].length)
if (state.charAt(num) == "0")
break
}
state = state.substring(0, num) + "1" + state.substring(num + 1, state.length)
return false
}

function getRandom(max) {
var now = new Date()
var num = now.getTime() * now.getSeconds() * Math.random()
return num % max
}
// -->
</script>

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

<Body onLoad="startBanner()">

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

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

<style>

</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>

</style>

Donde dice "green", debes poner el nombre en inglés o el código hexadecimal del color que deseas.

Podés también seleccionar uno de los colores que siguen y sustituir la referida parte del código original por
esta nueva que vas a recibir.

Imagen que sigue al mouse:

Observá cómo queda el cursor del mouse con este recurso. Podés elegir la imagen que quieras y ésta
acompañará el movimiento del mouse. Puede ser el logotipo de tu empresa, por ejemplo, o la imagen de
tu preferencia. Tu sitio ganará personalidad y combinará mucho más con tu estilo.

Para tener este recurso en tu página, tenés que seguir dos pasos:

Paso 1: Incluí el siguiente código en tu página HTML.

<script language="JavaScript">

</script>
<script language="JavaScript">

</script>
<script language='JavaScript'>

</script>

<div id="Orbita" style="position:absolute; left: 475px; top: 11px; width: 36px; height:
32px"><img src="Ingresa aquí el nombre del archivo de imagen" border=0></div>

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

Paso 2: Ahora es necesario que incluyas el código que sigue en tu tag <body>, que quedará así:

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

Si ya existen otros parámetros en tu etiqueta , agregá un espacio después del último y luego incluí:

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

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

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

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

Menú desplegable:

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

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

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

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

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

No alteres la siguiente etiqueta:

<select NAME="links"
onChange="top.location.href=this.form.links.options[this.form.links.selectedIndex].value">

Si cambiás algo en ella, tu menú no funcionará correctamente.

Tu icono en la lista de los favoritos:

Este recurso es muy bueno pero sólo funcionará en IE. Cuando alguien agrega tu página a la lista de
favoritos, aparece al lado del título un pequeño icono de Internet Explorer. ¿Qué tal si colocas tu propio
icono allí? Sí: más personalización para tu sitio.

Para que el icono aparezca en la lista de favoritos del usuario, tenés que colocarlo, primero, dentro de tu
espacio y después, incluir dentro de tus páginas una pequeña y simple línea de código que hará que el
mismo aparezca en la lista. Podés usar cualquier icono que desees (no olvides que los archivos de
icono tienen la extensión .ICO, imágenes gif o jpg no pueden ser usadas).

Incluye el siguiente código entre las etiquetas "<head>" y "</head>" de tu página:

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

Sonido de fondo en la página:

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

Netscape e Internet Explorer presentan algunas diferencias en su sistema y, por lo tanto, en algunas
versiones de Netscape el sonido puede no ser escuchado.

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

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

height="1"></embed>

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

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

<HTML>
<HEAD>
<META HTTP-EQUIV="REFRESH" CONTENT="Segundos;URL=http://www.pauluk.8k.com">
<TITLE> Titulo </TITLE>
</HEAD>
<BODY>
Códigos HTML
</BODY>
</HTML>

En "segundos", colocás el tiempo que deseas que la página demore hasta redireccionar el usuario al
nuevo URL.

Agregar página a Favoritos:

Aprendé a incluir en tu página un enlace para que los usuarios puedan agregarla automáticamente a los
favoritos del navegador. El visitante sólo tiene que hacer clic en un enlace para que la página se incluya
en su lista de favoritos.

<a href="javascript:window.external.AddFavorite('http://www.pauluk.8k.com',
'Pauluk Computacion')"><small><font face="Verdana" size="1">
Agregar a favoritos</font></small></a>

Barra de estado animada:

Podés darle movimiento a la barra de estado del navegador del visitante en tu sitio. Es un efecto fabuloso
que te permite destacar lo que desees.

Copiá el siguiente código y pegalo en tus páginas debajo de la etiqueta <Body>.

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

Efecto de apertura múltiple:

Este efecto ofrece otra alternativa de apertura para tu sitio, una forma diferente de presentarlo a los
visitantes. Es sólo copiar y pegar el código en tu página. Siempre que alguien acceda a tu sitio el efecto
será activado.

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

<div id="i1" class="intro"></div>

<div id="i2" class="intro"></div>
<div id="i3" class="intro"></div>
<div id="i4" class="intro"></div>
<div id="i5" class="intro"></div>
<div id="i6" class="intro"></div>
<div id="i7" class="intro"></div>
<div id="i8" class="intro"></div>
<script language="JavaScript1.2">
var velocidade=20
var tempo=new Array()
var tempo2=new Array()
if (document.layers){
for (i=1;i<=8;i++){
tempo[i]=eval("document.i"+i+".clip")
tempo2[i]=eval("document.i"+i)
tempo[i].width=window.innerWidth
tempo[i].height=window.innerHeight/8
tempo2[i].top=(i-1)*tempo[i].height
}
}
else if (document.all){
var clipright=document.body.clientWidth,clipleft=0
for (i=1;i<=8;i++){
tempo[i]=eval("document.all.i"+i+".style")
tempo[i].width=document.body.clientWidth
tempo[i].height=document.body.offsetHeight/8
tempo[i].top=(i-1)*parseInt(tempo[i].height)
}
}
function openit(){
window.scrollTo(0,0)
if (document.layers){
for (i=1;i<=8;i=i+2)
tempo[i].right-=velocidade
for (i=2;i<=8;i=i+2)
tempo[i].left+=velocidade
if (tempo[2].left>window.innerWidth)
clearInterval(stopit)
}
else if (document.all){
clipright-=velocidade
for (i=1;i<=8;i=i+2){
tempo[i].clip="rect(0 "+clipright+" auto 0)"
}
clipleft+=velocidade
for (i=2;i<=8;i=i+2){
tempo[i].clip="rect(0 auto auto "+clipleft+")"
}
if (clipright<=0)
clearInterval(stopit)
}
}
function gogo(){
stopit=setInterval("openit()",100)
}
gogo()
</script>

¿Quieres cambiar el color? Puedes cambiarlo por cualquier otro color. ¡Es muy fácil:

Observá que existe una parte del código que contiene:

<style>

</style>

Donde dice "green", tenés que poner el nombre en inglés o el código hexadecimal del color que deseas.

Podés también seleccionar uno de los colores que siguen y sustituir la referida parte del código original por
esta nueva que vas a recibir.

Cambiando la barra de estado:

¿Querés que la barra de estado cambie cuando el mouse pase sobre los enlaces? ¡Es fácil! Podés hacer
que cualquier mensaje aparezca en la barra de estado del navegador cuando alguien pase el mouse sobre
los enlaces de tu página. Observá cómo hacerlo acá:

- Ejemplo- El código HTML de un enlace común se parece al siguiente ejemplo:

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

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

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

ONMOUSEOUT="window.status='';return true;"

- Código<a href=fotos.html ONMOUSEOVER="window.status='COLOCA EL TEXTO AQUI';return

true;" ONMOUSEOUT="window.status='';return true;">Fotos del Viaje</a>
Copia el código y pégalo en tus páginas debajo de la etiqueta <Body>.

Texto aleatorio:
Con el texto aleatorio es posible hacer que, a cada visita a tu página, el usuario vea un mensaje diferente
sin necesidad de actualizar tu sitio a todo momento.

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

Instrucciones para personalización: Si deseas incluir más de tres textos, debes ingresar en "numero
de textos" el número total de textos que aparecerán.

if (numero == Ingresa el número del texto aquí){

texto = "Ingresa el texto que aparecerá aquí"
}

En "Ingresa el número del texto aquí", sigue la secuencia. En el código, por ejemplo, el último número
era "03", por lo tanto, para incluir un nuevo texto, el número será "04", y así sucesivamente para cada
nuevo texto.

¡ATENCION! Incluye el código del nuevo texto siempre antes de "document.write('' + texto +'')
</script>".

Imagen aleatoria:
Con este recurso es posible hacer que, a cada visita a tu página, el usuario vea una imagen diferente sin
necesidad de actualizar tu sitio a cada momento.

Imágenes aleatórias con enlaces: Pegá el siguiente código en tu página HTML. Podés pegarlo donde
quieras que aparezcan las imágenes.

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

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

Ya sabés que para enviar un mensaje, tenés que incluir mailto:webmaster@pauluk.8k.com

Bueno, si añadís al final de la dirección de correo ?subject=el subject, éste aparecerá de forma

automática en ese campo, así de fácil.

<html>
<a href="mailto:webmaster@pauluk.8k.com?subject=Probando.&body=Probando truco">Hacé
clic aquí</a>

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

<script language="JavaScript">

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

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

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

<a href="#posicion1">Ir a la posicion1</a>

Ir a un lugar determinado de otra página:

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

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

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

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

<HEAD>

<META http-equiv="refresh" content="segundos; url=siguiente_pagina.htm">

</HEAD>

-Botón de Facebook flotante

-Botón de Twitter Flotante

-Corazones Cayendo

-Reproductor de Audio

-Abrir Link en Otra Pestaña

-Deshabilitar Clic Derecho

-Abrir Link y Cambiar de Color

-Ventana Pop Up

-Botón Para Compartir en Facebook

-Botón de Me Gusta flotante

- Insertar el botón de Suscribirse a mi perfil de facebook en mi

web

-Efecto de Nieve

-Ir Al Principio

-Texto a la par del Favicon

-Hacer Que La Plantilla Tiemble

-Poner Fecha

-Mensaje de Bienvenida

-Calculadoras

-Menú Despegable

-Texto Que Cambie Automáticamente

-Imagen Que Cambie Automáticamente

-Cuadro de Me Gusta de Facebook

-Colocar Imagen Firme

-Colocar Imagen Flotante

-Chat

-Buscador de Google

-Encuesta

-Traductor de Google

-Relojes

-Cuadro de Actividad de Twitter

-Mensaje de Alerta al dar Clic

-Da de Alta Tu Página en Buscadores

-Texto en Movimiento Para Arriba

-Cuenta Regresiva

-Ampliar Imagen Al Hacer Clic

-Cambiar Imagen Al Pasar el Mouse

-Ampliar Imagen Al Pasar el Mouse

-Cambiar Favicon

-Reproductor de Audio

-Reproductor de Audio 2

-Ventana de Texto

-Texto en Movimiento

-Calendario

-Poner Color de Fondo Al Texto

-Como Subir Tus Propios Archivos

-Crear Un Foro

-Botón Con Diferentes Links

-Usuarios Online

-Diccionario

-Diario

-Horóscopo

-Esconder Texto Con Botón

-Google Analytics

-Como Mejorar Tus Etiquetas

-Como Enmarcar Un Texto

-Fuegos Artificiales en tu Web

-Photoshop en tu Web

-Cambiar Color de Fondo a tu Web

-Botón de Atrás y Adelante

-Traductor con Banderas

-Texto Parpadeante

-Botón Para Imprimir

-Abrir Web en otra Web

-Redireccionar una Web

-Flecha Para Ir Abajo

-Conversor de Monedas

-Menú Despegable Con Botón

-Rotador de Imagenes Flotantes

-Abrir Enlace Con Botón

-Actualizar Página Con Botón

-Actualizar Página Con Texto

-Cerrar Ventana Con Botón

-Cerrar Ventana Con Texto

-Atrás y Adelante Con Texto

-Enlaces Con Cuadro Explicativo

-Saludo Diferente Por Hora

-Cerrar Ventana Automáticamente

-Bloquear Botón Derecho Sin Mensajes

-Bloquear Botón Derecho y Teclado

-Atrás, Adelante y Arriba

-Imagen Con Link

-Marquesina con Imágenes y Links

-Links Con Casillas

-Buscador de Youtube en tu Web

-Botón de Suscriptores a tu Canal de Youtube

-Buscador de Google 2

-Buscador de Bing en tu Página

-Buscador de Google 3

-Ir Arriba con Texto

-Enlaces en Movimiento
Botón de Facebook Flotante

Para agregar un botón de Facebook flotante solo debes de pegar este código en tu web:

CODIGO
<a href='URL de tu página de facebook' target='_blank' title='Sígueme en Facebook'><img src='URL DE TU
IMAGEN'style='display:scroll;position:fixed;bottom:225px;right:0px' alt="" /></a>
NOTA: En Url de tu página va la dirección de tu página de facebook y no borres las comillas

corazones cayendo

<script language='javascript' type='text/javascript'>

//<![CDATA[

// Script original de Eloi Gallés Villaplana adaptado por -truco95.jimdo.com

var numero = 8

var velocidad = 40

var imagenamor = "http://i1041.photobucket.com/albums/b416/conanaz72/GIF/heart.gif "

var ns4arriba = (document.layers) ? 1 : 0

var ie4arriba = (document.all) ? 1 : 0

var dombrowser = (document.getElementById) ? 1 : 0

var dx, xp, yp

var am, stx, sty

var i, doc_ancho = 1024, doc_alto = 768

function amor() {

establece_dimensiones()

dx = new Array()

xp = new Array()

yp = new Array()

am = new Array()

stx = new Array()

sty = new Array();

for (i = 0; i < numero; ++ i) {

dx[i] = 0

xp[i] = Math.random()*(doc_ancho-50)

yp[i] = Math.random()*doc_alto

am[i] = Math.random()*20

stx[i] = 0.02 + Math.random()/10

sty[i] = 0.7 + Math.random()

if (document.layers) {

if (i == 0) {

document.write("<layer name=\"dot"+ i +"\" left=\"15\" ")

document.write("top=\"15\" visibility=\"show\"><img src=\"")

document.write(imagenamor + "\" border=\"0\"></layer>")

} else {

document.write("<layer name=\"dot"+ i +"\" left=\"15\" ")

document.write("top=\"15\" visibility=\"show\"><img src=\"")

document.write(imagenamor + "\" border=\"0\"></layer>")

}

} else if (document.all

|| document.getElementById) {

if (i == 0) {

document.write("<div id=\"dot"+ i +"\" style=\"POSITION: ")

document.write("absolute; Z-INDEX: "+ i +"; VISIBILITY: ")

document.write("visible; TOP: 15px; LEFT: 15px;\"><img src=\"")

document.write(imagenamor + "\" border=\"0\"></div>")

} else {

document.write("<div id=\"dot"+ i +"\" style=\"POSITION: ")

document.write("absolute; Z-INDEX: "+ i +"; VISIBILITY: ")

document.write("visible; TOP: 15px; LEFT: 15px;\"><img src=\"")

document.write(imagenamor + "\" border=\"0\"></div>")

}

}

}

corazon()

}
function corazon() {

for (i = 0; i < numero; ++ i) {

yp[i] += sty[i];

if (yp[i] > doc_alto) {

xp[i] = Math.random()*(doc_ancho-am[i]-30)

yp[i] = 0

stx[i] = 0.02 + Math.random()/10

sty[i] = 0.7 + Math.random()

establece_dimensiones()

}

dx[i] += stx[i];

if ( document.all ) {

var imagen = eval("dot" + i )

imagen.style.posLeft = xp[i] + am[i]*Math.sin(dx[i])

imagen.style.posTop = yp[i]

}

else if ( document.layers ) {

var imagen = eval("document.dot" + i)

imagen.left = xp[i] + am[i]*Math.sin(dx[i])

imagen.top = yp[i]

}

else if ( document.getElementById ) {

var imagen = document.getElementById( "dot" + i)

imagen.style.left = xp[i] + am[i]*Math.sin(dx[i]) + 'px'

imagen.style.top = yp[i] + 'px'

}

}

setTimeout("corazon()", velocidad)

function establece_dimensiones() {

if (self.innerHeight) {

doc_ancho = self.innerWidth - 50

doc_alto = self.innerHeight - 21

} else if (document.documentElement &&

document.documentElement.clientHeight) {

doc_ancho = document.documentElement.clientWidth

doc_alto = document.documentElement.clientHeight - 25

} else if (document.body) {

doc_ancho = document.body.clientWidth

doc_alto = document.body.clientHeight - 25

}

//]]>

</script>

<script language='javascript' type='text/javascript'>

amor()

</script>

Efecto nieve
<script type="text/javascript">

// <![CDATA[

var colour="#f0f";

var sparkles=50;

/****************************

* Tinkerbell Magic Sparkle *

* http://www.mf2fm.com/rv *

* NO EDITAR TEXTO MAS ABAJO *

****************************/

var x=ox=400;

var y=oy=300;

var swide=800;

var shigh=600;

var sleft=sdown=0;

var tiny=new Array();

var star=new Array();

var starv=new Array();

var starx=new Array();

var stary=new Array();

var tinyx=new Array();

var tinyy=new Array();

var tinyv=new Array();

window.onload=function() { if (document.getElementById) {

var i, rats, rlef, rdow;

for (var i=0; i<sparkles; i++) {

var rats=createDiv(3, 3);

rats.style.visibility="hidden";

document.body.appendChild(tiny[i]=rats);

starv[i]=0;

tinyv[i]=0;

var rats=createDiv(5, 5);

rats.style.backgroundColor="transparent";

rats.style.visibility="hidden";

var rlef=createDiv(1, 5);

var rdow=createDiv(5, 1);

rats.appendChild(rlef);

rats.appendChild(rdow);

rlef.style.top="2px";

rlef.style.left="0px";

rdow.style.top="0px";

rdow.style.left="2px";
document.body.appendChild(star[i]=rats);

set_width();

sparkle();

}}

function sparkle() {

var c;

if (x!=ox || y!=oy) {

ox=x;

oy=y;

for (c=0; c<sparkles; c++) if (!starv[c]) {

star[c].style.left=(starx[c]=x)+"px";

star[c].style.top=(stary[c]=y)+"px";

star[c].style.clip="rect(0px, 5px, 5px, 0px)";

star[c].style.visibility="visible";

starv[c]=50;

break;

}

for (c=0; c<sparkles; c++) {

if (starv[c]) update_star(c);

if (tinyv[c]) update_tiny(c);

setTimeout("sparkle()", 40);

function update_star(i) {

if (--starv[i]==25) star[i].style.clip="rect(1px, 4px, 4px, 1px)";

if (starv[i]) {

stary[i]+=1+Math.random()*3;

if (stary[i]<shigh+sdown) {

star[i].style.top=stary[i]+"px";

starx[i]+=(i%5-2)/5;
star[i].style.left=starx[i]+"px";

}

else {

star[i].style.visibility="hidden";

starv[i]=0;

return;

}

else {

tinyv[i]=50;

tiny[i].style.top=(tinyy[i]=stary[i])+"px";

tiny[i].style.left=(tinyx[i]=starx[i])+"px";

tiny[i].style.width="2px";

tiny[i].style.height="2px";

star[i].style.visibility="hidden";

tiny[i].style.visibility="visible"

function update_tiny(i) {

if (--tinyv[i]==25) {

tiny[i].style.width="1px";

tiny[i].style.height="1px";

if (tinyv[i]) {

tinyy[i]+=1+Math.random()*3;

if (tinyy[i]<shigh+sdown) {

tiny[i].style.top=tinyy[i]+"px";

tinyx[i]+=(i%5-2)/5;

tiny[i].style.left=tinyx[i]+"px";

}

else {

tiny[i].style.visibility="hidden";

tinyv[i]=0;
return;

}

else tiny[i].style.visibility="hidden";

document.onmousemove=mouse;

function mouse(e) {

set_scroll();

y=(e)?e.pageY:event.y+sdown;

x=(e)?e.pageX:event.x+sleft;

function set_scroll() {

if (typeof(self.pageYOffset)=="number") {

sdown=self.pageYOffset;

sleft=self.pageXOffset;

else if (document.body.scrollTop || document.body.scrollLeft) {

sdown=document.body.scrollTop;

sleft=document.body.scrollLeft;

else if (document.documentElement && (document.documentElement.scrollTop ||

document.documentElement.scrollLeft)) {

sleft=document.documentElement.scrollLeft;

sdown=document.documentElement.scrollTop;

else {

sdown=0;

sleft=0;

window.onresize=set_width;
function set_width() {

if (typeof(self.innerWidth)=="number") {

swide=self.innerWidth;

shigh=self.innerHeight;

else if (document.documentElement && document.documentElement.clientWidth) {

swide=document.documentElement.clientWidth;

shigh=document.documentElement.clientHeight;

else if (document.body.clientWidth) {

swide=document.body.clientWidth;

shigh=document.body.clientHeight;

function createDiv(height, width) {

var div=document.createElement("div");

div.style.position="absolute";

div.style.height=height+"px";

div.style.width=width+"px";

div.style.overflow="hidden";

div.style.backgroundColor=colour;

return (div);

// ]]>

</script>

--+, widget/html--

Boton flotante
<div style="display:scroll;position:fixed;bottom:5px;left:5px;">

<iframe src=
"http://www.facebook.com/plugins/like.php?href="?
skip_nax_wizard=true&send=false&layout=box_count&show_faces=false&width=500&action=l
ike&font=verdana&colorscheme=light&height=65"

scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:120px; height:65px;"></iframe>

</div>

Texto que cambie automaticamente

<script language="JavaScript" type="text/javascript">

//<![CDATA[
hoje = new Date()
numero_de_textos = 4
segundos = hoje.getSeconds()
numero = segundos % numero_de_textos
if (numero == 0){
texto = "Texto número 1"
}
if (numero == 01){
texto = "Texto número 2"
}
if (numero == 02){
texto = "Texto número 3"
}
if (numero == 03){
texto = "Texto número 4"
}
document.write('' + texto +'')
//]]>
</script>

Calculadora 1
<script language="JavaScript" type="text/javascript">//<![CDATA[
//]]></script>

<center> <form> <input name="display" value="0" size="25" /><br /> <input

type="button" value=" exp " onclick="if (checkNum(this.form.display.value)) { exp(this.form) }" /> <input
type="button" value=" 7 " onclick="addChar(this.form.display, '7')"
/>   <input type="button" value=" 8 " onclick="addChar(this.form.display, '8')" /> <input type="button" value=" 9 "
onclick="addChar(this.form.display, '9')" /> <input type="button" value=" / "   onclick="addChar(this.form.display,
'/')" /><br />
<input type="button" value=" ln " onclick="if (checkNum(this.form.display.value)) { ln(this.form) }" /> <input
type="button" value=" 4 "
onclick="addChar(this.form.display, '4')" />   <input type="button" value=" 5 " onclick="addChar(this.form.display,
'5')" /> <input type="button"
value=" 6 " onclick="addChar(this.form.display, '6')" /> <input type="button" value=" * "
onclick="addChar(this.form.display, '*')" /><br
/>   <input type="button" value=" sqrt " onclick="if (checkNum(this.form.display.value)) { sqrt(this.form) }" />
<input type="button" value=" 1 "
onclick="addChar(this.form.display, '1')" />   <input type="button" value=" 2 " onclick="addChar(this.form.display,
'2')" /> <input type="button"
value=" 3 " onclick="addChar(this.form.display, '3')" /> <input type="button" value=" - "
onclick="addChar(this.form.display, '-')" /><br
/>   <input type="button" value=" sq " onclick="if (checkNum(this.form.display.value)) { square(this.form) }" />
<input type="button" value=" 0 "
onclick="addChar(this.form.display, '0')" />   <input type="button" value=" . " onclick="addChar(this.form.display,
'.')" /> <input type="button"
value=" +/- " onclick="changeSign(this.form.display)" /> <input type="button" value=" + "
onclick="addChar(this.form.display, '+')" /><br
/>   <input type="button" value=" ( " onclick="addChar(this.form.display, '(')" /> <input type="button" value=" cos "
onclick="if
(checkNum(this.form.display.value)) { cos(this.form) }" />   <input type="button" value=" sin " onclick="if
(checkNum(this.form.display.value)) {
sin(this.form) }" /> <input type="button" value=" tan " onclick=   "if (checkNum(this.form.display.value))
{ tan(this.form) }" /> <input
type="button" value=" ) " onclick="addChar(this.form.display, ')')" /><br />   <input type="button" value=" Clear "
onclick="this.form.display.value = 0" /> <input type="button" value=" Back Space "
onclick="deleteChar(this.form.display)" /> <input type="button" value=
" Enter " name="enter" onclick="if (checkNum(this.form.display.value)) { compute(this.form) }" />
</form></center>

Calculadora 2

<center>   <form name="Calc" id="Calc">   <table
border="4">   <tr>   <td>
<input type="text" name="Input" size="16" /><br />   </td>
</tr>   <tr>
<td>   <input type="button" name="one" value=" 1 "
onclick="Calc.Input.value += '1'" /> <input type="button" name="two" value=" 2 " onclick="Calc.Input.value += '2'" />
<input type=
"button" name="three" value=" 3 " onclick="Calc.Input.value += '3'" /> <input type="button" name="plus"
value=" + " onclick="Calc.Input.value += '
+ '" /><br />   <input type="button" name="four" value=" 4 " onclick="Calc.Input.value += '4'" />
<input type="button" name="five" value=" 5 " onclick="Calc.Input.value += '5'" /> <input type=   "button"
name="six" value=" 6 " onclick="Calc.Input.value += '6'" /> <input type="button" name="minus" value=" - "
onclick="Calc.Input.value += ' - '" /><br />
<input type="button" name="seven" value=" 7 " onclick="Calc.Input.value += '7'" /> <input type="button"
name="eight"
value=" 8 " onclick="Calc.Input.value += '8'" /> <input type=   "button" name="nine" value=" 9 "
onclick="Calc.Input.value += '9'" /> <input type="button" name="times" value=" x " onclick="Calc.Input.value += ' *
'" /><br />
<input type="button" name="clear" value=" c " onclick="Calc.Input.value = ''" /> <input type="button"
name="zero" value=" 0 "
onclick="Calc.Input.value += '0'" /> <input type=   "button" name="DoIt" value=" = "
onclick="Calc.Input.value = eval(Calc.Input.value)" /> <input type="button" name="div" value=" / "
onclick="Calc.Input.value += ' / '" /><br />
</td>   </tr>   </table>
</form></center>

Calculadora 3

<script language="JavaScript" type="text/javascript">//<![CDATA[<!--

Web Site: http://www.hmhd.com/steve -->

<!-- Beginvar Memory = 0;var Number1 = "";var Number2 = "";var NewNumber = "blank";var opvalue = "";

function Display(displaynumber) {document.calculator.answer.value = displaynumber;}

function MemoryClear() {Memory = 0;document.calculator.mem.value = "";}

function MemoryRecall(answer) {if(NewNumber != "blank") {Number2 += answer;} else {Number1 =

answer;}NewNumber = "blank";Display(answer);}

function MemorySubtract(answer) {Memory = Memory - eval(answer);}

function MemoryAdd(answer) {Memory = Memory + eval(answer);document.calculator.mem.value = " M

";NewNumber = "blank";}

function ClearCalc() {Number1 = "";Number2 = "";NewNumber = "blank";Display("");}

function Backspace(answer) {answerlength = answer.length;answer = answer.substring(0, answerlength - 1);if

(Number2 != "") {Number2 =
answer.toString();Display(Number2);} else {Number1 = answer.toString();Display(Number1); }}

function CECalc() {Number2 = "";NewNumber = "yes";Display("");}

function CheckNumber(answer) {if(answer == ".") {Number =

document.calculator.answer.value;if(Number.indexOf(".") != -1) {answer = "";
}}if(NewNumber == "yes") {Number2 += answer;Display(Number2);}else {if(NewNumber == "blank") {Number1 =
answer;Number2 = "";NewNumber = "no";}else {Number1 +=
answer;}Display(Number1);   }}function AddButton(x) {if(x == 1) EqualButton();if(Number2 != "") {Number1 =
parseFloat(Number1) + parseFloat(Number2);}NewNumber = "yes";opvalue =
'+';Display(Number1);}function SubButton(x) {if(x == 1) EqualButton();if(Number2 != "") {Number1 =
parseFloat(Number1) - parseFloat(Number2);}NewNumber = "yes";opvalue =
'-';Display(Number1);}function MultButton(x) {if(x == 1) EqualButton();if(Number2 != "") {Number1 =
parseFloat(Number1) * parseFloat(Number2);}NewNumber = "yes";opvalue =
'*';Display(Number1);}function DivButton(x) {if(x == 1) EqualButton();if(Number2 != "") {Number1 =
parseFloat(Number1) / parseFloat(Number2);}NewNumber = "yes";opvalue =
'/';Display(Number1);}function SqrtButton() {Number1 = Math.sqrt(Number1);NewNumber =
"blank";Display(Number1);}function PercentButton() {if(NewNumber != "blank") {Number2 *=
.01;NewNumber = "blank";Display(Number2);   }}function RecipButton() {Number1 = 1/Number1;NewNumber =
"blank";Display(Number1);}function NegateButton() {Number1 =
parseFloat(-Number1);NewNumber = "no";Display(Number1);}function EqualButton() {if(opvalue == '+')
AddButton(0);if(opvalue == '-') SubButton(0);if(opvalue == '*') MultButton(0);if(opvalue
== '/') DivButton(0);Number2 = "";opvalue = "";}// End -->//]]></script><center>   <form name="calculator"
id="calculator">
<table bgcolor="#AAAAAA" width="220">   <tr>
<td>   <table bgcolor="#CCCCCC" border="1">
<tr>   <td>
<table border="0" cellpadding="0">
<tr>
<td bgcolor="#000080">
<b style="color:white">Calculator</b>
</td>
</tr>

   <tr>
<td>
<table width="100%" border="0">
<tr>
<td
colspan="6">
<input type="text" name="answer" size="30" maxlength="30" onchange="CheckNumber(this.value)" />
</td>
</tr>

<tr>
<td colspan="6">
<table border="0" cellpadding="0">
<tr>

<td>
<input type="text" name="mem" size="3" maxlength="3" /> <input type="button" name="backspace"
class="red" value="Backspace"
onclick="Backspace(document.calculator.answer.value); return false;" /> <input
type="button" name="CE" class="red" value=" CE "
onclick="CECalc(); return false;" /> <input type="reset" name="C" class="red"
value=" C " onclick="ClearCalc(); return false;" />
</td>
</tr>

</table>
</td>
</tr>

<tr>
<td>
<input type="button" name="MC" class="red" value=" MC " onclick="MemoryClear(); return false;" />

</td>
<td>
<input type="button" name="calc7" class="blue" value=" 7 " onclick="CheckNumber('7'); return false;" />
</td>

<td>
<input type="button" name="calc8" class="blue" value=" 8 " onclick="CheckNumber('8'); return false;" />
</td>
<td>

<input type="button" name="calc9" class="blue" value=" 9 " onclick="CheckNumber('9'); return false;" />
</td>
<td>
<input type="button"
name="divide" class="red" value=" / " onclick="DivButton(1); return false;" />
</td>
<td>
<input type="button" name="sqrt" class="blue" value="sqrt"
onclick="SqrtButton(); return false;" />
</td>
</tr>

<tr>
<td>
<input type="button" name="MR" class="red" value=" MR " onclick="MemoryRecall(Memory); return
false;" />

</td>
<td>
<input type="button" name="calc4" class="blue" value=" 4 " onclick="CheckNumber('4'); return false;" />
</td>

<td>
<input type="button" name="calc5" class="blue" value=" 5 " onclick="CheckNumber('5'); return false;" />
</td>
<td>

<input type="button" name="calc6" class="blue" value=" 6 " onclick="CheckNumber('6'); return false;" />
</td>
<td>
<input type="button"
name="multiply" class="red" value=" * " onclick="MultButton(1); return false;" />
</td>
<td>
<input type="button" name="percent" class="blue" value=" %
" onclick="PercentButton(); return false;" />
</td>
</tr>

<tr>
<td>
<input type="button" name="MS" class="red" value=" MS "
onclick="MemorySubtract(document.calculator.answer.value); return
false;" />
</td>
<td>
<input type="button" name="calc1" class="blue" value=" 1 " onclick="CheckNumber('1'); return false;" />

</td>
<td>
<input type="button" name="calc2" class="blue" value=" 2 " onclick="CheckNumber('2'); return false;" />
</td>

<td>
<input type="button" name="calc3" class="blue" value=" 3 " onclick="CheckNumber('3'); return false;" />
</td>
<td>

<input type="button" name="minus" class="red" value=" - " onclick="SubButton(1); return false;" />
</td>
<td>
<input type="button"
name="recip" class="blue" value="1/x " onclick="RecipButton(); return false;" />
</td>
</tr>

<tr>
<td>
<input type="button" name="Mplus" class="red" value=" M+ "
onclick="MemoryAdd(document.calculator.answer.value); return
false;" />
</td>
<td>
<input type="button" name="calc0" class="blue" value=" 0 " onclick="CheckNumber('0'); return false;" />

</td>
<td>
<input type="button" name="negate" class="blue" value="+/- " onclick="NegateButton(); return false;" />
</td>

<td>
<input type="button" name="dot" class="blue" value=" . " onclick="CheckNumber('.'); return false;" />
</td>
<td>

<input type="button" name="plus" class="red" value=" + " onclick="AddButton(1); return false;" />
</td>
<td>
<input type="button"
name="equal" class="red" value=" = " onclick="EqualButton(); return false;" />
</td>
</tr>
</table>
</td>
</tr>   </table>
</td>
</tr>   </table>
</td>   </tr>   </table>
</form></center>

Menú desplegable

<form>
   <select name="links" onchange="top.location.href=this.form.links.options[this.form.links.selectedIndex].value">
       <option selected="selected">
           Mira nuestras secciones
       </option>
       <option value="URL número 1">
  Texto número 1
       </option>
       <option value="URL número 2>
           Texto número 2
       </option>
       <option value="URL número 3">
    Texto número 3
       </option>
   </select>
</form>
Todos los parámetros son modificables.
Lo que está en rojo lo tienes que cambiar por los enlaces que quieras agregarle al menú
lo que está en azul lo tienes que cambiar por el texto que quieras que salga en el menú
y lo que está en naranja es el mensaje principal del menú

Tradutor

<div>
<div id="google_translate_element">
</div>
<script type="text/javascript">
//<![CDATA[
function googleTranslateElementInit() {
new google.translate.TranslateElement({pageLanguage: 'es'}, 'google_translate_element');
}
//]]>
</script> <script src="http://translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"
type="text/javascript">
</script>
</div>

Para hacer que aparezca un mensaje de alerta en tu página al hacer clic debes solamente de
copiar y pegar este código

<a href="#" onmouseDown="alert('tu mensaje')">su texto aquí</a>

Tu texto aquí

También lo puedes hacer para que al pasar el mouse salga el mensaje.
Copia este código:

<a href="#" onmouseOver="alert('Mensaje de alerta al pasar el cursor')">su texto aquí</a>

Tu texto aquí

Si lo quieres hacer con una imagen, el código es este:

<a href="#" onClick="return false" onmouseOver="alert('tu mensaje aquí no borres las comillas ni los
paréntesis')">
<img src="URL de tu imagen" width="60" height="45">
</a>
Ampliar imagen al hacer click

Este es el código:

CODIGO
<img onclick="javascript:this.width=500;this.height=400" ondblclick="javascript:this.width=100;this.height=80"
src="URL de la imagen" width="100"/>

En width=500;this.height=400 pones el tamaño de tu imagen o el tamaño en que quieres

que se mire y en width=100;this.height=80 el tamaño en miniatura

Cambiar imagen

Este es el código:

<img src="URL de tu primer imagen" onmouseover="this.src="URL de tu segunda imagen';"
onmouseout="this.src='URL de tu primer imagen';" alt="" />

ampliar imagen al pasar el mouse

<img src="Tu imagen" onmouseover="this.width=500;this.height=400;"

onmouseout="this.width=100;this.height=80;" width="100" height="80" alt="" />
En width=500;this.height=400 pones el tamaño de tu imagen o el tamaño en que quieres
que se mire y en width=100;this.height=80 el tamaño en miniatura

Calendario
<center>
<script language="JavaScript" type="text/javascript">
//<![CDATA[

//]]>
</script>
</center>

Botón con deferentes enlaces

<center><span style="font-family: Arial, Helvetica, sans-serif; font-size: x-small;"><script language="JavaScript"

type="text/javascript">

//<![CDATA[

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] = "Texto número 1"

urlArr[1] = "Enlace número 1"

lineArr[2] = "Texto número 2"

urlArr[2] = "Enlace número 2"

lineArr[3] = "Texto número 3"

urlArr[3] = "Enlace número 3"

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></span></center>

horoscopo

<p align="center"> <font color="#0C0505"><b><font class="navtext"><font face="Verdana" style="font-size:

9pt">HOROSCOPO</font><font class="content" size="1"><br /></font></font> <font class="navtext"><font face=

"Verdana"
size="1">Descubre Tu Destino Para</font><font class="navtext"><br /></font> <font face="Verdana" size="1"><font
class="navtext">El Dia
de   Hoy</font><br /></font></font></b></font><b><font class="navtext" color="#0C0505"><font face="Verdana"
color="#0C0505" size="1"><br /></font> <select style=   "border-style:solid; border-width:1px; VISIBILITY: visible;
font-family:Verdana; font-size:8pt;
color:#0c0505; font-weight:bold; padding-left:5px; padding-right:6px; padding-top:1px; padding-bottom:1px;
background-color:#ffffff"   onchange=
"if(this.options[1].selected)
window.open('http://www.horoscopofree.com/misc/partnership/iframe/aries_st.html','hrscp','width=460,height=100,to
p=150,left=175,scrolling=0,frameborder=0,status=0,menubar=0,scrollbars=0');
else if(this.options[2].selected)
window.open('http://www.horoscopofree.com/misc/partnership/iframe/taurus_st.html','hrscp','width=460,height=100,t
op=150,left=175,scrolling=0,frameborder=0,status=0,menubar=0,scrollbars=0');
else if(this.options[3].selected)
window.open('http://www.horoscopofree.com/misc/partnership/iframe/gemini_st.html','hrscp','width=460,height=100,
top=150,left=175,scrolling=0,frameborder=0,status=0,menubar=0,scrollbars=0');
else if(this.options[4].selected)
window.open('http://www.horoscopofree.com/misc/partnership/iframe/cancer_st.html','hrscp','width=460,height=100,
top=150,left=175,scrolling=0,frameborder=0,status=0,menubar=0,scrollbars=0');
else if(this.options[5].selected)
window.open('http://www.horoscopofree.com/misc/partnership/iframe/leo_st.html','hrscp','width=460,height=100,top
=150,left=175,scrolling=0,frameborder=0,status=0,menubar=0,scrollbars=0');
else if(this.options[6].selected)
window.open('http://www.horoscopofree.com/misc/partnership/iframe/virgo_st.html','hrscp','width=460,height=100,to
p=150,left=175,scrolling=0,frameborder=0,status=0,menubar=0,scrollbars=0');
else if(this.options[7].selected)
window.open('http://www.horoscopofree.com/misc/partnership/iframe/libra_st.html','hrscp','width=460,height=100,to
p=150,left=175,scrolling=0,frameborder=0,status=0,menubar=0,scrollbars=0');
else if(this.options[8].selected)
window.open('http://www.horoscopofree.com/misc/partnership/iframe/scorpio_st.html','hrscp','width=460,height=100
,top=150,left=175,scrolling=0,frameborder=0,status=0,menubar=0,scrollbars=0');
else if(this.options[9].selected)
window.open('http://www.horoscopofree.com/misc/partnership/iframe/sagittarius_st.html','hrscp','width=460,height=1
00,top=150,left=175,scrolling=0,frameborder=0,status=0,menubar=0,scrollbars=0');
else if(this.options[10].selected)
window.open('http://www.horoscopofree.com/misc/partnership/iframe/capricorn_st.html','hrscp','width=460,height=1
00,top=150,left=175,scrolling=0,frameborder=0,status=0,menubar=0,scrollbars=0');
else if(this.options[11].selected)
window.open('http://www.horoscopofree.com/misc/partnership/iframe/aquarius_st.html','hrscp','width=460,height=10
0,top=150,left=175,scrolling=0,frameborder=0,status=0,menubar=0,scrollbars=0');
else if(this.options[12].selected)
window.open('http://www.horoscopofree.com/misc/partnership/iframe/pisces_st.html','hrscp','width=460,height=100,t
op=150,left=175,scrolling=0,frameborder=0,status=0,menubar=0,scrollbars=0');"
name="SucreVip" size="1">   <option selected="selected">   Elige tu signo
</option>   <option>   Aries   </option>
<option>   Tauro   </option>
<option>   Geminis   </option>   <option>
Cancer   </option>   <option>
Leo   </option>   <option>   Virgo
</option>   <option>   Libra   </option>
<option>   Escorpio   </option>
<option>   Sagitario   </option>   <option>
Capricornio   </option>   <option>
Acuario   </option>   <option>   Piscis
</option>   </select></font></b></p>

<table> <tr> <td height="27" class="edit_rb_footer" id="edit_rb_footer_1">

</td> </tr></table>

Como poner un Photoshop Online en mi web

<iframe id="pixlr" type="text/html" width="100%" height="100%" src="http://pixlr.com/editor/"
frameborder="0"></iframe>

ó
<object data="http://pixlr.com/editor/" width="1000" height="500"> <embed wmode="transparent"
src="http://pixlr.com/editor/" width="1000" height="500" /> Error: Embedded data could not be displayed.
</object>

Cambio de fondo

<center> <a href="#" onclick="javascript:document.body.style.backgroundColor='#ff0000';

document.body.style.backgroundImage='none';"><img src= "http://2.bp.blogspot.com/-
xtirugOu4XI/TrRDDMciptI/AAAAAAAACts/DrKSQs4_cH0/s1600/body-rojo.png" alt="" /></a> <a href="#" onclick=
"javascript:document.body.style.backgroundColor='#fff000'; document.body.style.backgroundImage='none';"><img src=
"http://2.bp.blogspot.com/-XQU_kL_Cl_c/TrRDDp6P6SI/AAAAAAAACt0/iS8-TCq6jAs/s1600/body-amarillo.png"
alt="" /></a> <a href="#" onclick= "javascript:document.body.style.backgroundColor='#04B404';
document.body.style.backgroundImage='none';"><img src= "http://4.bp.blogspot.com/-
5JZrMeiV8Jw/TrRDD_BSTuI/AAAAAAAACt8/9Dg08eZZUC4/s1600/body-verde.png" alt="" /></a> <a href="#" onclick=
"javascript:document.body.style.backgroundColor='#0080FF'; document.body.style.backgroundImage='none';"><img
src= "http://3.bp.blogspot.com/-esR5I2jdt5s/TrRDEHXeUZI/AAAAAAAACuE/UtvDfLScPdE/s1600/body-azul.png"
alt="" /></a> <a href="#" onclick= "javascript:document.body.style.backgroundColor='#CC00FF';
document.body.style.backgroundImage='none';"><img src= "http://2.bp.blogspot.com/-
iCseaBaS2YY/TrRDEbVo63I/AAAAAAAACuM/ndzFy12lNJY/s1600/body-morado.png" alt="" /></a> <a href="#" onclick=
"javascript:document.body.style.backgroundColor='#F781BE'; document.body.style.backgroundImage='none';"><img
src= "http://2.bp.blogspot.com/-N6NAxMK01Wk/TrRDEqhtHjI/AAAAAAAACuU/wzGtdtBwqmo/s1600/body-rosa.png"
alt="" /></a> <a href="#" onclick= "javascript:document.body.style.backgroundColor='#000000';
document.body.style.backgroundImage='none';"><img src= "http://4.bp.blogspot.com/-
sfS_CkD43Ew/TrRDE8NCSaI/AAAAAAAACuc/cZ3RqhKUXtE/s1600/body-negro.png" alt="" /></a> <a href="#" onclick=
"javascript:document.body.style.backgroundColor='#FFFFFF'; document.body.style.backgroundImage='none';"><img
src= "http://2.bp.blogspot.com/-RINn-ddKkds/TrRDFCtn1YI/AAAAAAAACuk/t5gsEip5FIM/s1600/body-blanco.png"
alt="" /></a></center>

esta es una imagen de como queda

Enmarcar texto

Por si alguna vez te preguntaste como enmarcar un texto déjame decirte que es muy sencillo y solo necesitas
usar este código

<p style="border: ridge #FF0000 2px"> Aquí va lo que quieres enmarcar</p>

Lo que está en rojo es el color y el grosor del marco. Lo que está en azul lo cambias por el texto que quieras.

Fuegos artificiales

<script type="text/javascript">
//<![CDATA[
var bits=100; // cuantos bits
var intensity=7; // que tan "poderosa" es la explosión. (recomendado entre 3 y 10)
var speed=20; // rapidez (a menor numero, mas rapido)
var colours=new Array("#03f", "#f03", "#0e0", "#93f", "#0cc", "#f93");
//azul rojo verde purpura cyan, naranjo

var dx, xpos, ypos, bangheight;

var Xpos=new Array();
var Ypos=new Array();
var dX=new Array();
var dY=new Array();
var decay=new Array();
var colour=0;
var swide=800;
var shigh=600;
function write_fire() {
var b, s;
b=document.createElement("div");
s=b.style;
s.position="absolute";
b.setAttribute("id", "bod");
document.body.appendChild(b);
set_scroll();
set_width();
b.appendChild(div("lg", 3, 4));
b.appendChild(div("tg", 2, 3));
for (var i=0; i<bits; i++) b.appendChild(div("bg"+i, 1, 1));
}
function div(id, w, h) {
var d=document.createElement("div");
d.style.position="absolute";
d.style.overflow="hidden";
d.style.width=w+"px";
d.style.height=h+"px";
d.setAttribute("id", id);
return (d);
}
function bang() {
var i, X, Y, Z, A=0;
for (i=0; i<bits; i++) {
X=Math.round(Xpos[i]);
Y=Math.round(Ypos[i]);
Z=document.getElementById("bg"+i).style;
if((X>=0)&&(X<swide)&&(Y>=0)&&(Y<shigh)) {
Z.left=X+"px";
Z.top=Y+"px";
}
if ((decay[i]-=1)>14) {
Z.width="3px";
Z.height="3px";
}
else if (decay[i]>7) {
Z.width="2px";
Z.height="2px";
}
else if (decay[i]>3) {
Z.width="1px";
Z.height="1px";
}
else if (++A) Z.visibility="hidden";
Xpos[i]+=dX[i];
Ypos[i]+=(dY[i]+=1.25/intensity);
}
if (A!=bits) setTimeout("bang()", speed);
}

function stepthrough() {
var i, Z;
var oldx=xpos;
var oldy=ypos;
xpos+=dx;
ypos-=4;
if (ypos<bangheight||xpos<0||xpos>=swide||ypos>=shigh) {
for (i=0; i<bits; i++) {
Xpos[i]=xpos;
Ypos[i]=ypos;
dY[i]=(Math.random()-0.5)*intensity;
dX[i]=(Math.random()-0.5)*(intensity-Math.abs(dY[i]))*1.25;
decay[i]=Math.floor((Math.random()*16)+16);
Z=document.getElementById("bg"+i).style;
Z.backgroundColor=colours[colour];
Z.visibility="visible";
}
bang();
launch();
}
document.getElementById("lg").style.left=xpos+"px";
document.getElementById("lg").style.top=ypos+"px";
document.getElementById("tg").style.left=oldx+"px";
document.getElementById("tg").style.top=oldy+"px";
}
function launch() {
colour=Math.floor(Math.random()*colours.length);
xpos=Math.round((0.5+Math.random())*swide*0.5);
ypos=shigh-5;
dx=(Math.random()-0.5)*4;
bangheight=Math.round((0.5+Math.random())*shigh*0.4);
document.getElementById("lg").style.backgroundColor=colours[colour];
document.getElementById("tg").style.backgroundColor=colours[colour];
}
window.onscroll=set_scroll;
function set_scroll() {
var sleft, sdown;
if (typeof(self.pageYOffset)=="number") {
sdown=self.pageYOffset;
sleft=self.pageXOffset;
}
else if (document.body.scrollTop || document.body.scrollLeft) {
sdown=document.body.scrollTop;
sleft=document.body.scrollLeft;
}
else if (document.documentElement && (document.documentElement.scrollTop ||
document.documentElement.scrollLeft)) {
sleft=document.documentElement.scrollLeft;
sdown=document.documentElement.scrollTop;
}
else {
sdown=0;
sleft=0;
}
var s=document.getElementById("bod").style;
s.top=sdown+"px";
s.left=sleft+"px";
}
window.onresize=set_width;
function set_width() {
if (typeof(self.innerWidth)=="number") {
swide=self.innerWidth;
shigh=self.innerHeight;
}
else if (document.documentElement && document.documentElement.clientWidth) {
swide=document.documentElement.clientWidth;
shigh=document.documentElement.clientHeight;
}
else if (document.body.clientWidth) {
swide=document.body.clientWidth;
shigh=document.body.clientHeight;
}
}
window.onload=function() { if (document.getElementById) {
set_width();
write_fire();
launch();
setInterval('stepthrough()', speed);
}}
//]]>
</script>

Texto parpadeante

<script language="JAVASCRIPT" type="text/javascript">
//<![CDATA[
TE1="Deja tu Comentario";
TE2="";
M=TE1;
cnt=0;
function SH(){
document.Switch.A.value=M;
cnt++;
if(cnt==1 && M==TE1){M=TE2;}
if(cnt==2 && M==TE2){cnt=0;M=TE1;}
setTimeout("SH()",500);
}
// -->
//]]>
</script>
<form name="Switch" id="Switch">
<div align="center">
<center>
<p>
<font color="#008000" face="Verdana"><input name="A" size="50" style=
"color: #000000; font-weight: bold; font-family: Verdana, Arial; background-color: rgb(255,255,255); border: 0px
outset rgb(0,128,0); margin-top: auto; padding-left: 5px" /></font>
<script language="JAVASCRIPT" type="text/javascript">
//<![CDATA[

//]]>
</script>
</p>
</center>
</div>
</form>

Traductor con banderas

<center> <div> <a class="google_translate" href="#" target="_blank" rel="nofollow" title="English" onclick=

"window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)
+'&langpair=auto%7Cen&hl=en'); return false;"><img
alt="English" border="0" align="absbottom"    title="English" height="24"
src="http://4.bp.blogspot.com/_5jbh95HruKA/S1YVBORD9bI/AAAAAAAAACs/XkaLmmin4zg/s200/United+Kingdom
(Great+Britain).png" style="cursor: pointer;margin-right:8px"
width="24" /></a> <a class="google_translate" href="#" target="_blank" rel="nofollow" title="French" onclick=
"window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=auto
%7Cfr&hl=en'); return false;"><img alt="French"
border="0" align="absbottom"    title="French" height="24"
src="http://4.bp.blogspot.com/_5jbh95HruKA/S1YVBrDZLrI/AAAAAAAAAC0/Kc6eDMT9LFI/s200/France.png"
style="cursor: pointer;margin-right:8px" width="24" /></a> <a class=    "google_translate" href="#"
target="_blank" rel="nofollow" title="German"
onclick=    "window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)
+'&langpair=auto%7Cde&hl=en'); return
false;"><img alt="German" border="0" align="absbottom"    title="German" height="24"
src="http://1.bp.blogspot.com/_5jbh95HruKA/S1YVBzoFF2I/AAAAAAAAAC8/WgvMK3zP1Rk/s200/Germany.png"
style="cursor: pointer;margin-right:8px" width="24" /></a>
<a class="google_translate" href="#" target="_blank" rel="nofollow" title="Spain" onclick=
"window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=auto
%7Ces&hl=en'); return false;"><img alt="Spain"
border="0" align="absbottom"    title="Spain" height="24"
src="http://3.bp.blogspot.com/_5jbh95HruKA/S1YVCdHp5VI/AAAAAAAAADE/lWHzr5znExU/s200/Spain.png"
style="cursor: pointer;margin-right:8px" width="24" /></a> <a class=    "google_translate" href="#"
target="_blank" rel="nofollow"
title="Italian" onclick=
"window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=auto
%7Cit&hl=en'); return false;"><img alt="Italian"
border="0" align="absbottom"    title="Italian" height="24"
src="http://4.bp.blogspot.com/_5jbh95HruKA/S1YVCskNubI/AAAAAAAAADM/ChdHC6vYT4s/s200/Italy.png"
style="cursor: pointer;margin-right:8px" width="24" /></a> <a class=    "google_translate" href="#"
target="_blank" rel="nofollow" title="Dutch"
onclick=    "window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)
+'&langpair=auto%7Cnl&hl=en'); return
false;"><img alt="Dutch" border="0" align="absbottom"    title="Dutch" height="24"
src="http://3.bp.blogspot.com/_5jbh95HruKA/S1YWRkFo9UI/AAAAAAAAADU/4AzKfc6Oyxg/s200/Netherlands.png"
style="cursor: pointer;margin-right:8px" width="24" /></a>
<a class="google_translate" href="#" target="_blank" rel="nofollow" title="Russian" onclick=
"window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=auto
%7Cru&hl=en'); return false;"><img alt="Russian"
border="0" align="absbottom"    title="Russian" height="24"
src="http://4.bp.blogspot.com/_5jbh95HruKA/S1YWR-
jg9pI/AAAAAAAAADc/vYZrPOzazHU/s200/Russian+Federation.png" style="cursor: pointer;margin-right:8px" width=

"24" /></a> <a class="google_translate" href="#" target="_blank" rel="nofollow" title="Portuguese" onclick=

"window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=auto
%7Cpt&hl=en'); return false;"><img alt="Portuguese"
border="0" align=    "absbottom" title="Portuguese" height="24"
src="http://1.bp.blogspot.com/_5jbh95HruKA/S1YWSGHcxOI/AAAAAAAAADk/ElHZBjDCZn8/s200/Brazil.png"
style="cursor: pointer;margin-right:8px" width=    "24"
/></a> <a class="google_translate" href="#" target="_blank" rel="nofollow" title="Japanese" onclick=
"window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=auto
%7Cja&hl=en'); return false;"><img alt="Japanese"
border="0" align="absbottom"    title="Japanese" height="24"
src="http://1.bp.blogspot.com/_5jbh95HruKA/S1YWSR2_wYI/AAAAAAAAADs/GtKdPLKUluE/s200/Japan.png"
style="cursor: pointer;margin-right:8px" width="24" /></a>    <a class="google_translate" href="#" target="_blank"
rel="nofollow" title="Korean"
onclick=    "window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)
+'&langpair=auto%7Cko&hl=en'); return
false;"><img alt="Korean" border="0" align="absbottom"    title="Korean" height="24"
src="http://2.bp.blogspot.com/_5jbh95HruKA/S1YWSrlfMyI/AAAAAAAAAD0/_MACsRIW8wg/s200/South+Korea.png
" style="cursor: pointer;margin-right:8px" width="24" /></a>
<a class="google_translate" href="#" target="_blank" rel="nofollow" title="Arabic" onclick=
"window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=auto
%7Car&hl=en'); return false;"><img alt="Arabic"
border="0" align="absbottom"    title="Arabic" height="24"
src="http://3.bp.blogspot.com/_5jbh95HruKA/S1YWq7SrDkI/AAAAAAAAAD8/ZE8A1isEZrw/s200/Saudi+Arabia.png
" style="cursor: pointer;margin-right:8px" width="24" /></a>
<a class="google_translate" href="#" target="_blank" rel="nofollow" title="Chinese Simplified" onclick=
"window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=auto
%7Czh-CN&hl=en'); return false;"><img alt="Chinese
Simplified" border="0"    align="absbottom" title="Chinese Simplified" height="24"
src="http://1.bp.blogspot.com/_5jbh95HruKA/S1YWrMQAw9I/AAAAAAAAAEE/r-DEVtWXp50/s200/China.png"
style=    "cursor: pointer;margin-right:8px" width="24"
/></a>    </div>    <div style="â??font-size:10px;margin:8px">    </div> </center>

Actualizar pagina con boton

<form method="post">
<input type="button" value="Actualizar Página" onclick="window.location.reload()" />
</form>

Buscador de google 1

<center>
<form method="get" action="http://www.google.com/search" target="_blank">
<input type="text" name="q" size="40" maxlength="255" onfocus="if(this.value=='Buscar En Google')
this.value='';" onblur="if(this.value=='') this.value='Buscar En Google';" value=
"Buscar En Google" style="color: #?--#ff0000--?; font-size: 12pt; border: 1px solid #888888; background-color:
#ffffff" /> <input type="hidden" name="hl" value="es" /> <input name="btnG"
value="Buscar" type="submit" style="color: #ffffff; font-size: 11pt; border: 1px solid #888888; background-color:
#000000" />
</form>
</center>

<center>
<form method="get" action="http://www.google.com/search" target="_blank">

<table bgcolor="#FFFFFF">
<tr>
<td>
<a href="http://www.google.com/" target="_blank"><img src="http://www.google.com/logos/Logo_40wht.gif"
alt="" /><br /></a> <input type="text" name="q" size="31" maxlength="255" value="" />

<input type="hidden" name="hl" value="en" /> <input type="submit" name="btnG" value="Google Search" />
</td>
</tr>
</table>
</form>
</center>

Enlaces en mivimiento

<marquee direction="up" onmouseout="this.start()" onmouseover="this.stop()" scrollamount="1" style="border: 2px

solid #000; height: 200px; padding: 3px; text-align: center; width: 200px;">

<a href="Enlace 1">Título 1</a><br />

<a href="Enlace 2">Título 2</a><br />

<a href="Enlace 3">Título 3</a>

</marquee>

Lo que está en rojo lo tenemos que cambiar por nuestros enlace y lo que está en naranja por los títulos. Lo que
está en azul es el alto y ancho del cuadro. Lo que está en verde el color del texto.

Para poner una marquesina en tu página con imagenes y enlaces usa este código:
CODIGO
<marquee direction="up" scrollamount="1" style="background-color: #000000; text-align: center;
width:150px;height:150px;border:2px solid #cccccc;padding:3px"
onmouseover="this.scrollAmount='0'"onmouseout="this.scrollAmount='1'"><a href="PRIMER ENLACE"
title="texto"><img src="URL DE TU PRIMERA IMAGEN" alt="" /></a><br /><a href="SEGUNDO ENLACE"
title="texto"><img src="URL DE TU SEGUNDA IMAGEN" alt="" /></a></marquee>
width:150px: es el ancho de la marquesina
height:150px es el largo de la marqusina
border:2px es el tamaño del borde de la marquesina
#000000: color del fondo de la marqusina
#cccccc color del borde de la marquesina
3px distancia entre las imagenes

También podría gustarte

51 Puc
Documento4 páginas
51 Puc
Alejandra Torres
Aún no hay calificaciones
3.3.3 Matriz
Documento8 páginas
3.3.3 Matriz
Alejandra Torres
Aún no hay calificaciones
Taller Kardex 2
Documento23 páginas
Taller Kardex 2
Alejandra Torres
Aún no hay calificaciones
Exposicion
Documento14 páginas
Exposicion
Alejandra Torres
Aún no hay calificaciones
Copia de GPFI-F-018 - Formato - Planeacion - Pedagogica GRADO 10
Documento6 páginas
Copia de GPFI-F-018 - Formato - Planeacion - Pedagogica GRADO 10
Alejandra Torres
Aún no hay calificaciones
G-3-Aa-Sesion 12-4 Taller Iva-Rtenciones
Documento4 páginas
G-3-Aa-Sesion 12-4 Taller Iva-Rtenciones
Alejandra Torres
Aún no hay calificaciones
ENTREVISTA
Documento1 página
ENTREVISTA
Alejandra Torres
Aún no hay calificaciones
Tema 2
Documento79 páginas
Tema 2
correobasura
Aún no hay calificaciones
Macros en Excel PDF
Documento57 páginas
Macros en Excel PDF
supertavote
Aún no hay calificaciones
Resumen
Documento16 páginas
Resumen
darrell huamani
Aún no hay calificaciones
Prácticas de Access
Documento16 páginas
Prácticas de Access
defcondos
100% (8)
Trabajo No.1 - Lista de Sistemas Operativos.
Documento25 páginas
Trabajo No.1 - Lista de Sistemas Operativos.
Mora Escarling
Aún no hay calificaciones
Selección de Preguntas Segundo Parcial de Cartografía y Sistemas de Información Georreferenciados
Documento3 páginas
Selección de Preguntas Segundo Parcial de Cartografía y Sistemas de Información Georreferenciados
gilberto
Aún no hay calificaciones
Design - Patterns Uniandes Colombia
Documento33 páginas
Design - Patterns Uniandes Colombia
carlos.h.rueda
Aún no hay calificaciones
Sefbd 0203
Documento10 páginas
Sefbd 0203
German Moreira
Aún no hay calificaciones
Manual de Administracion de Bases de Datos
Documento146 páginas
Manual de Administracion de Bases de Datos
molivares87
Aún no hay calificaciones
Hohg
Documento108 páginas
Hohg
Kenia Flores
Aún no hay calificaciones
PLC Grafcet
Documento18 páginas
PLC Grafcet
Félix San Mateo
100% (1)
Programación Dinámica
Documento8 páginas
Programación Dinámica
Giovanni MorccollaAncco
Aún no hay calificaciones
Informes Circuitos Con Pic
Documento26 páginas
Informes Circuitos Con Pic
Олмедо Три
Aún no hay calificaciones
Informe de Ensamblado
Documento20 páginas
Informe de Ensamblado
BethtoVH
Aún no hay calificaciones
Filtros Avanzados - Excel
Documento4 páginas
Filtros Avanzados - Excel
Julia Halek
Aún no hay calificaciones
Especifique El Nombre de Cada Uno de Los Siguientes Símbolos de Diagrama de Flujo
Documento10 páginas
Especifique El Nombre de Cada Uno de Los Siguientes Símbolos de Diagrama de Flujo
Juan Carlos Silvestre Santana
Aún no hay calificaciones
Arquitectura de Software para La Wed
Documento12 páginas
Arquitectura de Software para La Wed
Abraham Castillo Garcia
Aún no hay calificaciones
Unidad 2. Expresiones Regulares
Documento19 páginas
Unidad 2. Expresiones Regulares
Citlaly Zam
Aún no hay calificaciones
Practicas Con Varios Comandos Linux
Documento2 páginas
Practicas Con Varios Comandos Linux
Luis Carlos Zapata
Aún no hay calificaciones
Presentacion Curso Entity Framework
Documento15 páginas
Presentacion Curso Entity Framework
Alberto Baigorria
Aún no hay calificaciones
Ataque de Fuerza Bruta Con Diccionario Usando Medusa
Documento4 páginas
Ataque de Fuerza Bruta Con Diccionario Usando Medusa
Rigoberto Rivera Mendez
Aún no hay calificaciones
Equivalencias Programacion
Documento11 páginas
Equivalencias Programacion
FORCE MAX
Aún no hay calificaciones
Manual de Consistencia POI 2018 (Abril 2018)
Documento12 páginas
Manual de Consistencia POI 2018 (Abril 2018)
Lindsay Rommy
Aún no hay calificaciones
Cartilla Informatica 2011
Documento37 páginas
Cartilla Informatica 2011
Gisela Dorzán
Aún no hay calificaciones
Instrucciones de Instalación en AIX
Documento1 página
Instrucciones de Instalación en AIX
ErickEstra
Aún no hay calificaciones
Capitulo 3 Ingenieria de Software 6 Ed
Documento9 páginas
Capitulo 3 Ingenieria de Software 6 Ed
elusuario5
Aún no hay calificaciones
Firewall y Squid
Documento6 páginas
Firewall y Squid
Harden Alirio
Aún no hay calificaciones
Informe Análisis de Maquinas
Documento14 páginas
Informe Análisis de Maquinas
Giovanni Sanchez HiglerGts
Aún no hay calificaciones
Ejercicios Sistemas Tareas
Documento2 páginas
Ejercicios Sistemas Tareas
Dènilson Pablo
0% (1)
Figurines para el dibujo de moda
De Everand
Figurines para el dibujo de moda
Patrick John Ireland
Calificación: 5 de 5 estrellas
5/5 (1)
Inteligencia artificial: Lo que usted necesita saber sobre el aprendizaje automático, robótica, aprendizaje profundo, Internet de las cosas, redes neuronales, y nuestro futuro
De Everand
Inteligencia artificial: Lo que usted necesita saber sobre el aprendizaje automático, robótica, aprendizaje profundo, Internet de las cosas, redes neuronales, y nuestro futuro
Neil Wilkins
Calificación: 4 de 5 estrellas
4/5 (1)
La biblia del e-commerce: Los secretos de la venta online. Más de mil ideas para vender por internet
De Everand
La biblia del e-commerce: Los secretos de la venta online. Más de mil ideas para vender por internet
José Luis Torres Revert
Calificación: 5 de 5 estrellas
5/5 (7)
Inteligencia Artificial
De Everand
Inteligencia Artificial
Margaret A. Boden
Calificación: 3.5 de 5 estrellas
3.5/5 (6)
Python a fondo
De Everand
Python a fondo
Óscar Ramírez Jiménez
Calificación: 4.5 de 5 estrellas
4.5/5 (8)
UF0054: APROVISIONAMIENTO DE MATERIAS PRIMAS EN COCINA (HOTR0108)
De Everand
UF0054: APROVISIONAMIENTO DE MATERIAS PRIMAS EN COCINA (HOTR0108)
Direccionate Estrategias Empresariales S.L.
Aún no hay calificaciones
Agile: Una guía para la Gestión de Proyectos Agile con Scrum, Kanban y Lean
De Everand
Agile: Una guía para la Gestión de Proyectos Agile con Scrum, Kanban y Lean
James Edge
Calificación: 5 de 5 estrellas
5/5 (1)
Confección de cojines y ropa de hogar. TCPF0309
De Everand
Confección de cojines y ropa de hogar. TCPF0309
Rosario Rodríguez Baliña
Aún no hay calificaciones
El Método Agile: Lo que Necesita Saber Sobre Gestión de Proyectos Agile, el Proceso Kanban, Pensamiento Lean, y Scrum
De Everand
El Método Agile: Lo que Necesita Saber Sobre Gestión de Proyectos Agile, el Proceso Kanban, Pensamiento Lean, y Scrum
Robert McCarthy
Calificación: 5 de 5 estrellas
5/5 (1)
7 tendencias digitales que cambiarán el mundo
De Everand
7 tendencias digitales que cambiarán el mundo
Silvia Leal
Calificación: 4.5 de 5 estrellas
4.5/5 (87)
Electricidad... ¡Qué fácil!
De Everand
Electricidad... ¡Qué fácil!
Carlos Alberto Fernandes Rodrigues
Aún no hay calificaciones
Tu Primer Emprendimiento
De Everand
Tu Primer Emprendimiento
Wayne Walker
Calificación: 4 de 5 estrellas
4/5 (6)
44 Apps Inteligentes para Ejercitar su Cerebro: Apps Gratuitas, Juegos, y Herramientas para iPhone, iPad, Google Play, Kindle Fire, Navegadores de Internet, Windows Phone, & Apple Watch
De Everand
44 Apps Inteligentes para Ejercitar su Cerebro: Apps Gratuitas, Juegos, y Herramientas para iPhone, iPad, Google Play, Kindle Fire, Navegadores de Internet, Windows Phone, & Apple Watch
I. C. Robledo
Calificación: 3.5 de 5 estrellas
3.5/5 (2)
Ciclo de la calidad PHVA
De Everand
Ciclo de la calidad PHVA
Amparo Zapata
Calificación: 4 de 5 estrellas
4/5 (10)
Prácticas de refrigeración y aire acondicionado
De Everand
Prácticas de refrigeración y aire acondicionado
Juan Manuel Franco Lijó
Calificación: 5 de 5 estrellas
5/5 (6)
Influencia. La psicología de la persuasión
De Everand
Influencia. La psicología de la persuasión
Robert B.Cialdini
Calificación: 4.5 de 5 estrellas
4.5/5 (14)
JavaScript Una Guía de Aprendizaje para el Lenguaje de Programación JavaScript
De Everand
JavaScript Una Guía de Aprendizaje para el Lenguaje de Programación JavaScript
Troy Dimes
Calificación: 3 de 5 estrellas
3/5 (5)
Electrónica de potencia
De Everand
Electrónica de potencia
Robert Piqué López
Calificación: 4 de 5 estrellas
4/5 (7)