Trucos html para paginas web

97

Click here to load reader

description

html

Transcript of Trucos html para paginas web

Page 1: Trucos html para paginas web

Trucos html para paginas web (parte 1)

Anuncios Google

Plant. de encuest. grat.www.SurveyMonkey.com - Obtenga ayuda con diseños,obtención de respuestas y análisis ¡Únase ya!

Hola a todos los users de Taringa que estan online bueno hoy les traigo un post de codigos html son todos exactamente y al mero ultimo les voy a dejar la

fuente para que entren y los chequen bien bueno aqui estan los trucos html: 

Redireccionar a una pagina

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 permitir seleccionar el texto de nuestra web

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

<script language="Javascript"> 

<!-- Begin 

function disableselect(e){ 

return false 

function reEnable(){ 

return true 

Page 2: Trucos html para paginas web

document.onselectstart=new Function ("return false"  

if (window.sidebar){ 

document.onmousedown=disableselect 

document.onclick=reEnable 

Page 3: Trucos html para paginas web

// End --> 

</script> 

Horas restantes para finalizar el dia

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; 

Page 4: Trucos html para paginas web

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

Page 5: Trucos html para paginas web

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

document.Reloj.tiempo.value = tiempoAtras; 

setTimeout("updateReloj()",1000); 

Page 6: Trucos html para paginas web

//--> 

</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 un 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:[email protected]" 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> 

Page 7: Trucos html para paginas web

Crear un titulo que cambia de Colores

Este codigo esta muy largo pero de todas formas lo dejo para que lo chequen y tambien les voy a dejar el link para que vean como tiene que quedar 

Este es el código: 

<!-- inicio de head--> 

<script> 

mesk=new 

Array();mesk[10]="A";mesk[11]="B";mesk[12]="C";mesk[13]="D";mesk[14]="E";mesk[15]="F";A=10;B=11;C=12;D=13;E=14;F=15;let="ABCDEF";function

mes(num){if(let.indexOf(num) != -1){return eval(num)};else{if(num 

< 10){return eval(num)};else{return mesk[num]}}}; 

function color(begin,einde,stappen,stap){ 

hh1=(mes(begin.charAt(0))*16)+mes(begin.charAt(1)); 

hh2=(mes(begin.charAt(2))*16)+mes(begin.charAt(3)); 

hh3=(mes(begin.charAt(4))*16)+mes(begin.charAt(5)); 

pp1=(mes(einde.charAt(0))*16)+mes(einde.charAt(1)); 

pp2=(mes(einde.charAt(2))*16)+mes(einde.charAt(3)); 

pp3=(mes(einde.charAt(4))*16)+mes(einde.charAt(5)); 

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

Page 8: Trucos html para paginas web

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

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

Page 9: Trucos html para paginas web

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); 

Page 10: Trucos html para paginas web

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

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

Page 11: Trucos html para paginas web

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); 

Page 12: Trucos html para paginas web

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

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

Page 13: Trucos html para paginas web

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 != 

Page 14: Trucos html para paginas web

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

for(i=Math.floor(message.length/2);i != 

message.length;i++){txt=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"> 

<!--inicio del body --> 

<center><h1><div id="light"></div></h1> 

<script> 

lightcolor1="FF0000" // color 

lightcolor2="33CC66" // color 

message="Título que cambia de colores" // introduce el texto 

lightf() 

</script> 

</center> 

<!--fin del body --> 

Este es el link de la pagina para que vean como queda 

http://www.trucos-pc.8k.com/trucospchcolores.htm 

Cuadro explicativo de enlaces

Sorprendé a tus visitantes con este asombroso truco. Al pasar el mouse sobre el link, aparece la explicación de ese link en un cuadro con la cantidad de

palabras que queramos poner. Solo tenés que reemplazar mis direcciones por las tuyas, y el texto deseado por el tuyo. 

<p> 

<script language="JavaScript"><!-- 

function escribe(frase){document.desplaza.cuadro.value=frase; } 

// --></script> 

</p> 

<table border="0"> 

<tr> 

<td width="200"><p align="center"><strong>Opciones.</strong></p> 

<p><a href="http://www.CheNico.com" 

onmouseover="escribe(' Página principaln ----------------nn 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://***/pauluk/trucosprin.htm" 

onmouseover="escribe(' Trucos PCn -----------nn 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://***/pauluk/GLOSARIO.HTM" 

onmouseover="escribe(' Glosarion -------------- nn 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. 

Page 15: Trucos html para paginas web

Crear un link para dowland

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 en cualquier imagen

Podés cambiar la imagen reemplazando por una tuya alojada en el servidor poniendo su nombre donde está en rojo. 

<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 = 0; // set coordinate variables 

xp = Math.random()*(doc_width-50); // set position variables 

yp = Math.random()*doc_height; 

am = Math.random()*20; // set amplitude variables 

stx = 0.02 + Math.random()/10; // set step variables 

sty = 0.7 + Math.random(); // set step variables 

if (ns4up) { // set layers 

if (i == 0) { 

Page 16: Trucos html para paginas web

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

Page 17: Trucos html para paginas web

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

Page 18: Trucos html para paginas web

document.write(snowflake + "" border="0"></layer>" ; 

} else { 

Page 19: Trucos html para paginas web

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

Page 20: Trucos html para paginas web

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

Page 21: Trucos html para paginas web

document.write(snowflake + "" border="0"></layer>" ; 

} else if (ie4up) { 

if (i == 0) { 

Page 22: Trucos html para paginas web

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

Page 23: Trucos html para paginas web

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

Page 24: Trucos html para paginas web

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

Page 25: Trucos html para paginas web

document.write(snowflake + "" border="0"></div>" ; 

} else { 

Page 26: Trucos html para paginas web

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

Page 27: Trucos html para paginas web

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

Page 28: Trucos html para paginas web

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

Page 29: Trucos html para paginas web

document.write(snowflake + "" border="0"></div>" ; 

function snowNS() { // Netscape main animation function 

Page 30: Trucos html para paginas web

for (i = 0; i < no; ++ i) { // iterate for every dot 

yp += sty; 

if (yp > doc_height-50) { 

xp = Math.random()*(doc_width-am-30); 

yp = 0; 

stx = 0.02 + Math.random()/10; 

sty = 0.7 + Math.random(); 

doc_width = self.innerWidth; 

doc_height = self.innerHeight; 

dx += stx; 

document.layers["dot"+i].top = yp; 

document.layers["dot"+i].left = xp + am*Math.sin(dx); 

setTimeout("snowNS()", speed); 

function snowIE() { // IE main animation function 

for (i = 0; i < no; ++ i) { // iterate for every dot 

yp += sty; 

if (yp > doc_height-50) { 

xp = Math.random()*(doc_width-am-30); 

yp = 0; 

stx = 0.02 + Math.random()/10; 

sty = 0.7 + Math.random(); 

doc_width = document.body.clientWidth; 

doc_height = document.body.clientHeight; 

dx += stx; 

document.all["dot"+i].style.pixelTop = yp; 

document.all["dot"+i].style.pixelLeft = xp + am*Math.sin(dx); 

setTimeout("snowIE()", speed); 

if (ns4up) { 

snowNS(); 

} else if (ie4up) { 

snowIE(); 

</script> 

Link para que vean como queda: 

http://www.trucos-pc.8k.com/trucospcnieve.htm 

Subrayar link al pasar el mouse

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

visitar el link, y que tenga otro una vez visitado. 

<STYLE type="text/css"> 

<!-- 

A:link {COLOR: red; TEXT-DECORATION: none} 

A:visited {COLOR: gray; TEXT-DECORATION: none} 

A:active {TEXT-DECORATION: none} 

A:hover {COLOR: blue; TEXT-DECORATION: underline} --> 

</STYLE> 

</p> 

<p><a href="l1.htm">El texto que quieras.</a><br> 

<a href="l2.htm">otro texto.</a><br> 

<a href="l3.htm">Otro texto.</a><br> 

</p> 

Transformar el cursor en una mira

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

<style type="text/css"> 

<!-- 

body { cursor: crosshair} 

--> 

</style> 

Page 31: Trucos html para paginas web

Tabla de colores html competa

Esta si esta dificil de poner en el post mejor les voy a poner el link para que se vallan directamente a ella: 

http://www.usuarios.sion.com/pauluk/coloreshtml.htm 

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 pagina

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)){ 

Page 32: Trucos html para paginas web

alert("Coloca el mensaje aquí." ; 

return false; 

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

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

Page 33: Trucos html para paginas web

alert("Coloca el mensaje aquí." ; 

return false; 

return true; 

Page 34: Trucos html para paginas web

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 como una pagina de 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 mensaje y asunto

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 

<a href="mailto:[email protected]?subject=Prueba.&body=Estoy probando el truco...">Hacé clic acá para mandarme un mensaje</a> 

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

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

Crear un PopUp:

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

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

onclick="window.open('MiFoto.jpg','Estructuras','toolbar=no,location=no,scrollbars=yes,directories=

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

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

Otra barra con mas colores:

A continuación veremos otro código para ponerle color a la barra de desplazamiento, en este caso vamos a poder personalizar los colores de la barra, del fondo y los bordes. Reemplazar los

Page 35: Trucos html para paginas web

nombres de los colores por otros o por los código de letras y números. Mas abajo está la tabla de colores.

<style><!--body { scrollbar-face-color: darkgreen ;scrollbar-shadow-color: yellow;scrollbar-highlight-color: violet;scrollbar-3dlight-color: navy;scrollbar-darkshadow-color: magenta;scrollbar-track-color: blue;scrollbar-arrow-color: black }--></style>

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

Abrir un link de una imagen en una ventana nueva:

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

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

Hora y texto en la barra de estado:

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

<script language="JavaScript"><!--mensaje=" |======| www.CheNico.com " function hora() { var h = new Date(); window.status="|======| "+ h.getHours() +":"+ h.getMinutes() +"" +mensaje ; window.setTimeout('hora()',100); }

Page 36: Trucos html para paginas web

hora()//--></script>

Botón animado:

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

<font face="Arial, Helvetica, sans-serif" size="2"><script language="JavaScript">var timerID = nullvar timerRunning = falsevar charNo = 0var charMax = 0var lineNo = 0var lineMax = 3var 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}}

Page 37: Trucos html para paginas web

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 = 0timerID = 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:

Page 38: Trucos html para paginas web

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

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

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

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

<style><!-- #mensagem{position:relative;layer-background-color:black;width:400;height:12;}#submensagem{background-color:black;position:absolute;border: 1px solid black;width:400;height:12;}.submensagemfont{font:bold 12px Verdana;text-decoration:none;color:white;}.submensagemfont a{top:0;color:white;text-decoration:none;}--></style><div id="mensagem"> <div id="submensagem" class="submensagemfont">Iniciando...</div>

Page 39: Trucos html para paginas web

</div><script language="JavaScript1.2">var speed=4500var 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=0if (document.all)tickerobject=document.all.submensagem.styleelsetickerobject=document.mensagem.documentfunction 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++elsei=0setTimeout("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();}

Page 40: Trucos html para paginas web

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); elsetickerobject.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--) {

Page 41: Trucos html para paginas web

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);

Page 42: Trucos html para paginas web

window.onmousedown=right;

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

Botón Colorido:

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

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

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

Texto que sigue al mouse:

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

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

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

Page 43: Trucos html para paginas web

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.clientXy = (document.layers) ? e.pageY : document.body.scrollTop+event.clientYespera=1}

function animar_cursor() {if (espera==1 && document.all) {for (i=texto.length-1; i>=1; i--) {xpos[i]=xpos[i-1]+tempoypos[i]=ypos[i-1]}xpos[0]=x+tempoypos[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]+tempoypos[i]=ypos[i-1]}xpos[0]=x+tempoypos[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++) {

Page 44: Trucos html para paginas web

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;

Page 45: Trucos html para paginas web

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();

Page 46: Trucos html para paginas web

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","[email protected]");if(navigator.appName == "Netscape")document.write('<layer id="wds"></layer><br>');if (navigator.appVersion.indexOf("MSIE") != -1)document.write('<span id="wds"></span><br>');function aumenta(){ mensagens = mensagens2[y];if (x < tamanho) {x++;

Page 47: Trucos html para paginas web

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:

Page 48: Trucos html para paginas web

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

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

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

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

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

<script language="JavaScript1.2"><!--

Page 49: Trucos html para paginas web

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;}

Page 50: Trucos html para paginas web

}

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

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

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

Cambiar el color de la barra de desplazamiento:

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

<style><!--BODY { scrollbar-base-color : #000000;scrollbar-arrow-color : #FFFFFF; }.nav {

Page 51: Trucos html para paginas web

color : #FFCC00;font-size : 8pt;}--></style>

Reloj - formato texto:

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

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

Onload="show5()"

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

<body Onload="show5()">

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

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

<Font face=Verdana><span id=relogio style="POSITION: absolute"></span><Script Language=JavaScript><!--function show5(){if (!document.layers&&!document.all)returnvar Digital=new Date()var hours=Digital.getHours()var minutes=Digital.getMinutes()var seconds=Digital.getSeconds()var dn="AM"

Page 52: Trucos html para paginas web

if (hours>12){dn="PM"hours=hours-12}if (hours==0)hours=12if (minutes<=9)minutes="0"+minutesif (seconds<=9)seconds="0"+secondsmeurelogio="<font size='5' face='Arial'><b>"+hours+":"+minutes+":"+seconds+" "+dn+"</b></font>"if (document.layers){document.layers.relogio.document.write(meurelogio)document.layers.relogio.document.close()}else if (document.all)relogio.innerHTML=meurelogiosetTimeout("show5()",1000)}

//--></script></font>

Poniendo fecha en tu sitio:

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

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

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

Page 53: Trucos html para paginas web

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 "

Page 54: Trucos html para paginas web

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>

Page 55: Trucos html para paginas web

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=150var altura=120var 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=2elsei=0

function mover1(whichlayer){tlayer=eval(whichlayer)if (tlayer.top>0&&tlayer.top<=5){tlayer.top=0setTimeout("mover1(tlayer)",3000)setTimeout("mover2(document.principal.document.segundo)",3000)

Page 56: Trucos html para paginas web

return}if (tlayer.top>=tlayer.document.height*-1){tlayer.top-=5setTimeout("mover1(tlayer)",100)}else{tlayer.top=alturatlayer.document.write(mensagens[i])tlayer.document.close()if (i==mensagens.length-1)i=0elsei++}}

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

function mover3(whichdiv){tdiv=eval(whichdiv)if (tdiv.style.pixelTop>0&&tdiv.style.pixelTop<=5){tdiv.style.pixelTop=0setTimeout("mover3(tdiv)",3000)setTimeout("mover4(segundo2)",3000)

Page 57: Trucos html para paginas web

return}if (tdiv.style.pixelTop>=tdiv.offsetHeight*-1){tdiv.style.pixelTop-=5setTimeout("mover3(tdiv)",100)}else{tdiv.style.pixelTop=alturatdiv.innerHTML=mensagens[i]if (i==mensagens.length-1)i=0elsei++}}

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

function iniciar(){if (document.all){mover3(primeiro2)segundo2.style.top=alturasegundo2.style.visibility='visible'}else if (document.layers){document.principal.visibility='show'

Page 58: Trucos html para paginas web

mover1(document.principal.document.primeiro)document.principal.document.segundo.top=altura+5document.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>')}

Page 59: Trucos html para paginas web

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=150var altura=120var 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=150var altura=120var 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.

Page 60: Trucos html para paginas web

Barra de estado fija:

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

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

Saludo al visitante:

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

 

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

Page 61: Trucos html para paginas web

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

 

 

Texto animado:

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

 

<script language="JavaScript"><!--done = 0;step = 4function anim(yp,yk){if(document.layers) document.layers["texto"].top=yp;else document.all["texto"].style.top=yp;if(yp>yk) step = -4if(yp<60) step = 4setTimeout('anim('+(yp+step)+','+yk+')', 35);}function start(){if(done) returndone = 1;if(navigator.appName=="Netscape") {document.texto.left=innerWidth/2 - 145;anim(60,innerHeight - 60)}else {texto.style.left=11;anim(60,document.body.offsetHeight - 60)}}// --></script>

<div id="texto" style="position: absolute; top: -50; color: #FF8000; font-family: Arial, Helvetica; font-weight:bold; font-size:40px;"> <p><font face="Arial, Helvetica, sans-serif" size="3"><b><font size="6" color="#990000">INGRESA TU TEXTO AQUI</font></b></font></p></div>

<script language="JavaScript"><!--setTimeout('start()',10);//--></script>

 

 

Page 62: Trucos html para paginas web

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();}

Page 63: Trucos html para paginas web

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=AUTOSRC = "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 = nullvar 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()

Page 64: Trucos html para paginas web

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}

Page 65: Trucos html para paginas web

// --></script>

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

<Body onLoad="startBanner()">

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

Efecto de apertura:

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

 

<style><!--.entrada{position:absolute;left:0;top:0;layer-background-color:green;background-color:green;border:0.1px solid green}--></style><div id="i1" class="entrada"></div><div id="i2" class="entrada"></div><div id="i3" class="entrada"></div><div id="i4" class="entrada"></div><div id="i5" class="entrada"></div><div id="i6" class="entrada"></div><div id="i7" class="entrada"></div><div id="i8" class="entrada"></div><script language="JavaScript1.2">//var velocidade=10var 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.3tempo[i].height=window.innerHeighttempo2[i].left=(i-1)*tempo[i].width}}else if (document.all){var clipbottom=document.body.offsetHeight,cliptop=0

Page 66: Trucos html para paginas web

for (i=1;i<=8;i++){tempo[i]=eval("document.all.i"+i+".style")tempo[i].width=document.body.clientWidth/8tempo[i].height=document.body.offsetHeighttempo[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-=velocidadefor (i=2;i<=8;i=i+2)tempo[i].top+=velocidadeif (tempo[2].top>window.innerHeight)clearInterval(stopit)}else if (document.all){clipbottom-=velocidadefor (i=1;i<=8;i=i+2){tempo[i].clip="rect(0 auto+"+clipbottom+" 0)"}cliptop+=velocidadefor (i=2;i<=8;i=i+2){tempo[i].clip="rect("+cliptop+" auto auto)"}if (clipbottom<=0)clearInterval(stopit)}}function gogo(){stopit=setInterval("openit()",100)}gogo()</script>

 

¿Querés cambiar el color? Podés cambiarlo por cualquier otro color. ¡Es muy fácil:

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

 

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

 

Page 67: Trucos html para paginas web

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

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

 

 

Imagen que sigue al mouse:

 

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

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

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

 

<script language="JavaScript"><!-- function YY_Mousetrace(evnt){ if (yyns4){if (evnt.pageX) {yy_ml=evnt.pageX; yy_mt=evnt.pageY;} }else{yy_ml=(event.clientX + document.body.scrollLeft);yy_mt=(event.clientY + document.body.scrollTop);}if (yy_tracescript)eval(yy_tracescript)}//--></script><script language="JavaScript"><!--function YY_Layerfx(yyleft,yytop,yyfnx,yyfny,yydiv,yybilder,yyloop,yyto,yycnt,yystep) {if ((document.layers)||(document.all)){eval("myfunc=yyfnx.replace(/x/gi, yycnt)");with (Math) {yynextx= eval(myfunc)}eval("myfunc=yyfny.replace(/x/gi, yycnt)");with (Math) {yynexty= eval(myfunc)}yycnt=(yyloop && yycnt>=yystep*yybilder)?0:yycnt+yystep;if (document.layers){eval(yydiv+".top="+(yynexty+yytop))eval(yydiv+".left="+(yynextx+yyleft))}if (document.all){eval("yydiv=yydiv.replace(/.layers/gi, '.all')");

Page 68: Trucos html para paginas web

eval(yydiv+".style.pixelTop="+(yynexty+yytop));eval(yydiv+".style.pixelLeft="+(yynextx+yyleft));}argStr='YY_Layerfx('+yyleft+','+yytop+',"'+yyfnx+'","'+yyfny+'","'+yydiv+'", '+yybilder+','+yyloop+','+yyto+','+yycnt+','+yystep+')';if (yycnt<=yystep*yybilder){eval(yydiv+".yyto=setTimeout(argStr,yyto)");}} } //--></script><script language='JavaScript'><!--var yyns4=window.Event?true:false; var yy_mt = 0; var yy_ml = 0;if (yyns4) document.captureEvents(Event.MOUSEMOVE);document.onmousemove = YY_Mousetrace;yy_tracescript = '';//--></script>

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

 

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

 

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

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

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

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

Efectos de transición especiales:

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

 

Page 69: Trucos html para paginas web

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

 

<script language=javaScript>var n = 15fadeIn();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>

 

Page 70: Trucos html para paginas web

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).

 

Page 71: Trucos html para paginas web

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:

Page 72: Trucos html para paginas web

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 espaciosfor (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.

 

Page 73: Trucos html para paginas web

<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=20var 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.innerWidthtempo[i].height=window.innerHeight/8tempo2[i].top=(i-1)*tempo[i].height}}else if (document.all){var clipright=document.body.clientWidth,clipleft=0for (i=1;i<=8;i++){tempo[i]=eval("document.all.i"+i+".style")tempo[i].width=document.body.clientWidthtempo[i].height=document.body.offsetHeight/8tempo[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-=velocidadefor (i=2;i<=8;i=i+2)tempo[i].left+=velocidadeif (tempo[2].left>window.innerWidth)clearInterval(stopit)}else if (document.all){clipright-=velocidadefor (i=1;i<=8;i=i+2){tempo[i].clip="rect(0 "+clipright+" auto 0)"}clipleft+=velocidadefor (i=2;i<=8;i=i+2){tempo[i].clip="rect(0 auto auto "+clipleft+")"}

Page 74: Trucos html para paginas web

if (clipright<=0)clearInterval(stopit)}}function gogo(){stopit=setInterval("openit()",100)}gogo()</script>

 

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

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

 

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

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

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

 

 

Cambiando la barra de estado:

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

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

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

 

Page 75: Trucos html para paginas web

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_textosif (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>".

 

Page 76: Trucos html para paginas web

 

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 = 2segundos = hoje.getSeconds()numero = segundos % numero_de_imagensif (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:[email protected]

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:[email protected]?subject=Probando.&body=Probando truco">Hacé clic aquí</a>

 

 

Page 77: Trucos html para paginas web

Detectar el navegador:

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

 <script language="JavaScript"><!--function esIE30(){var browserType=navigator.userAgent;if (browserType.indexOf("MSIE")==-1)return false;elsereturn true;} <!-- Cargar la página según el explorador -->function cargar(){if (esIE30())window.location.href="indice_ie.htm";elsewindow.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>

 

Page 78: Trucos html para paginas web

 

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

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

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

Trucos Html

Anuncios Google

Software grat. p encuest.www.SurveyMonkey.com - Obtenga ayuda con diseños,obtención de respuestas y análisis ¡Únase ya!

Voy a ir agregando cada ves mas codigos! 

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='www.CheNico.com'; </SCRIPT> </HEAD> <BODY> 

Abrir una Web en Pop Up: 

Con este código vamos a hacer que al entrar en nuestra página automáticamente se abra otra, ej. otra Web nuestra, una sección que queremos mostrar, una publicidad, etc. 

<script language='JavaScript'>window.open('http://www.chenico.com', 'geoflotante', '');</script> 

No dejar seleccionar el texto de nuestra Web: 

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

<script language="Javascript"> <!-- Begin function disableselect(e){ 

Page 79: Trucos html para paginas web

return false } function reEnable(){ return true } document.onselectstart=new Function ("return false"  if (window.sidebar){ document.onmousedown=disableselect document.onclick=reEnable } // End --> </script> 

Horas restantes para finalizar el día: 

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

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

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

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

document.Reloj.tiempo.value = tiempoAtras; 

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

Recomendar Pagina: 

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

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

Page 80: Trucos html para paginas web

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:[email protected]" 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> 

Cuadro explicativo de los enlaces: 

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

<p> <script language="JavaScript"><!-- function escribe(frase){document.desplaza.cuadro.value=frase; } // --></script> </p> <table border="0"> <tr> <td width="200"><p align="center"><strong>Opciones.</strong></p> 

<p><a href="http://www.CheNico.com" onmouseover="escribe(' Página principal\n ----------------\n\n Cuando hagas Click en este enlace irás directamente a la página de inicio de mi web');">Página principal</a><br> <a href="http://***/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://***/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: 

Page 81: Trucos html para paginas web

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

<BGSOUND SRC="sonido.mid" LOOP=none> <WIDTH=200 HEIGHT=55 AUTOSTART="true" LOOP="false" HIDDEN="true"> 

Se recomienda usar sonidos en formato "midi" que son los de menor peso. 

Crear un link para download: 

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

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

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

Efecto nieve con cualquier imagen: 

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

Subrayar un Link al pasar el mouse: 

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

<STYLE type="text/css"> <!-- A:link {COLOR: red; TEXT-DECORATION: none} A:visited {COLOR: gray; TEXT-DECORATION: none} A:active {TEXT-DECORATION: none} A:hover {COLOR: blue; TEXT-DECORATION: underline} --> </STYLE> </p> <p><a href="l1.htm">El texto que quieras.</a><br> <a href="l2.htm">otro texto.</a><br> <a href="l3.htm">Otro texto.</a><br> </p> 

Transformar el cursor en una mira: 

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

<style type="text/css"> <!-- body { cursor: crosshair} --> </style> 

Tabla de colores HTML: 

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

Page 82: Trucos html para paginas web

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:[email protected]?subject=Prueba.&body=Estoy probando el truco...">Hacé clic acá para mandarme un mensaje</a> 

Page 83: Trucos html para paginas web

Abrir un Link en una Ventana Nueva: 

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

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

Crear un PopUp: 

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

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

Otra barra con mas colores: 

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

<style> <!-- body { scrollbar-face-color: darkgreen ; scrollbar-shadow-color: yellow; scrollbar-highlight-color: violet; scrollbar-3dlight-color: navy; scrollbar-darkshadow-color: magenta; scrollbar-track-color: blue; scrollbar-arrow-color: black } --> </style> 

Abrir un link de una imagen en una ventana nueva: 

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

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

Hora y texto en la barra de estado: 

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

<script language="JavaScript"> <!-- mensaje=" |======| www.CheNico.com " function hora() { var h = new Date(); window.status="|======| " + h.getHours() +":"+ h.getMinutes() +"" +mensaje ; window.setTimeout('hora()',100); } hora() //--> </script> 

Botón animado: 

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

<font face="Arial, Helvetica, sans-serif" size="2"> <script language="JavaScript"> var timerID = null var timerRunning = false var charNo = 0 var charMax = 0 var lineNo = 0 

Page 84: Trucos html para paginas web

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: 

Page 85: Trucos html para paginas web

<style> <!-- #mensagem{ position:relative; layer-background-color:black; width:400; height:12; } #submensagem{ background-color:black; position:absolute; border: 1px solid black; width:400; height:12; } .submensagemfont{ font:bold 12px Verdana; text-decoration:none; color:white; } .submensagemfont a{ top:0; color:white; text-decoration:none; } --> </style> <div id="mensagem"> <div id="submensagem" class="submensagemfont">Iniciando...</div> </div> <script language="JavaScript1.2"> var speed=4500 var textos=new Array() textos[0]="<center><a href='Enlace1 Aquí'>Descripción del enlace1 aquí</a></center>" textos[1]="<center><a href='Enlace2 Aquí'>Descripción del enlace2 aquí</a></center>" textos[2]="<center><a href='Enlace3 Aquí'>Descripción del enlace3 aquí</a></center>" 

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

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

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 + 

Page 86: Trucos html para paginas web

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.youtube.com"

return false; 

return true; 

document.onmousedown=right; 

if (document.layers) window.captureEvents(Event.MOUSEDOWN); 

window.onmousedown=right; 

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

Valorar una web : 

Page 87: Trucos html para paginas web

Vemos un interesante taller de HTML donde ofrecemos al visitante de nuestra web un formulario rápido para valorar nuestra web. 

El objetivo de este taller de HTML consiste en colocar un pequeño formulario para que las personas que visitan nuestro web puedan valorarlo rápidamente. Se trata de un ejemplo de recurso sencillísimo que se puede obtener con sólo utilizar un poco de HTML. La sencillez es belleza y compatibilidad con los distintos navegadores, así que veamos sin más el efecto que pretendemos conseguir. 

Valora esta web 

Como se puede ver a la derecha, el formulario nos propone que valoremos la página y al lado tenemos un botón para mandar la dicha valoración al webmaster del sitio. 

No pretendo explicar en este artículo los formularios en HTML, ya que éstos se explican en el manual. 

El código de este ejemplo es tan sencillo como este: 

<form action="mailto:[email protected]" method="post" enctype="text/plain"> Valora esta web<br> <select name="Valoracion"> <option>1</option> <option>2</option> <option>3</option> <option>4</option> <option>5</option> <option>6</option> <option>7</option> <option>8</option> <option>9</option> <option>10</option> </select> <input type="submit" value="Enviar"> </form> 

Se puede copiar y pegar en la página que lo desees. La única línea que habría que modificar es la de la etiqueta <FORM>, donde tenemos que cambiar la dirección de email del atributo action por la dirección donde queramos que llegue el correo con la valoración. 

Si quisiésemos que el correo le llegase a [email protected] pondríamos así nuestro atributo action: 

action="malito:[email protected]

Si querés poner el buscador de Google en tu web solo debes ingresar el siguiente codigo: 

<!-- Búsqueda Google --> <center> <FORM method=GET action="http://www.google.com/search"> <TABLE bgcolor="#FFFFFF"><tr><td> <A HREF="http://www.google.com/"> <IMG SRC="http://www.google.com/logos/Logo_40wht.gif" border="0" ALT="Google" align="absmiddle"></A> <INPUT TYPE=text name=q size=31 maxlength=255 value=""> <INPUT TYPE=hidden name=hl value=es> <INPUT type=submit name=btnG VALUE="Búsqueda Google"> </td></tr></TABLE> </FORM> </center> <!-- Búsqueda Google -->