Videos Tutoriales, Diseño web, Códigos HTML, Descargas, Música y mucho más

Codigos HTML para tu web


  Codigos HTML
 

Google en tu página web:
<!-- 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 --> 

Quitar lo subrayado de los enlaces:

 

<style type="text/css">
A {text-decoration: none;} </style>


Cambiar imagén al pasar el cursor:

<img src="URL de la imagen UNO" onmouseover="this.src='URL de la imagen DOS';" onmouseout="this.src='URL de la imagen UNO';"/>

Quitar botón de la intro:

 

<style type="text/css"> <!-- input { visibility: hidden; } //--> </style>


Pantalla completa:

 

<form> <input TYPE="BUTTON"  NAME="BTN_FullScreen" VALUE="Modo pantalla completa"  OnClick="window.open(document.location, 'big', 'fullscreen=yes')">  </form>

 
Camara de vigilancia: 

<div style="text-align: center;"><a href="http://www.youtube.com/user/"

 

_fcksavedurl="http://www.youtube.com/user/RHM901" style="right: 0px; position: 

fixed; top: 0px;"><img src="http://www.imagenesanimadas.net/Tecnologia/Camaras-

Vigilancia/Camaras-01.gif" 

_fcksavedurl="http://www.imagenesanimadas.net/Tecnologia/Camaras-

Vigilancia/Camaras-01.gif" alt="" /></a></div>

 

 
Centrar pagina:

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http:/www.w3.org/1999/xhtml"> <div style="width:900px; position: relative; margin-left: auto; margin-right: auto;">

 
Fondo fijo:

 <form> <style type="text/css"> .cuerpo{ background-image:url(URL DE LA IMAGEN); background-repeat:no-repeat; background-attachment:fixed; background-position:0px 0px; } </style> <body class="cuerpo"> </body> <form> 

 
Fondo con movimiento:

 <style type="text/css">

 

body 

{

background-image:

url(PONER URL DE IMAGEN AQUI)

}

</style>

 

 
Cuadro de texto:

 <div align="center">

 

<div style="background-color:white; border-color: black; border-style: solid; color: black; height: 100px; overflow: scroll; width: 250px;">

<span style="color: black; font-family: tahoma; font-size: 85%;"><b></b></span>

<div align="center">

<span style="color: black; font-family: tahoma; font-size: 85%;"><b></b></span>

</div>

<span style="color: black; font-family: tahoma; font-size: 85%;"></span>

</div>

</div>

<b></b>

 

 
Palabra new en el menu:

 <img src="//img.webme.com/pic/s/spongebob7cweb/icon_new.gif" alt="">

 
Menu desplegable:

<form>

 

<SELECT NAME="urldestino">

<option selected>--- M E N U ---

<option value="http://goldentags.es.tl" >Goldentags.es.tl

<option value="seccion1.html">Album de fotos

<option value="seccion2.html">Textos interesantes

<option value="seccion3.html">Noticias

<option value="seccion4.html">Novedades

<option value="seccion5.html">Mi diario

</SELECT>

<input type="button" value="IR" onClick="location=this.form.urldestino.value" name="button">

</form>

 

 
Mensaje de bienvenida:

 <body onload="window.alert('Bienvenido a mi pagina web, gracias por visitarnos')">

 
Mensaje de despedida:

 <body onUnload="window.alert('Gracias por tu visita! nos vemos pronto ^^')">

 
Evitar que te roben contenido:

 <body oncontextmenu = "alert('Material Protegido');return false;" onselectstart = "alert('Material Protegido');return false;" onkeydown="alert('Material Protegido');return false;" ondragstart = "alert('Material Protegido');return false;"></body>

 
Texto scroll:

 <marquee>ESCRIBE AQUI LO QUE QUIERAS</marquee>

 
Imagen en la parte inferior izquierda:

 <a href='URL DEL SITIO WEB' _fcksavedurl='URL DEL SITIO WEB'style='display:scroll;position:fixed;bottom:0px;left:0px;'> <img src='URL DE LA IMAGEN' _fcksavedurl='URL DE LA IMAGEN' _fcksavedurl='URL DE LA IMAGEN'/></a>

 
Imagen en la parte inferior derecha:

 <a href='URL DEL SITIO WEB' _fcksavedurl='URL DEL SITIO WEB'style='display:scroll;position:fixed;bottom:0px;right:0px;'> <img src='URL DE LA IMAGEN' _fcksavedurl='URL DE LA IMAGEN' _fcksavedurl='URL DE LA IMAGEN'/></a>

 
Imagen con link:

 <a href="URL_DEL_SITIO" target="_self"> <img src="URL_DE_TU_IMAGEN" border="0" alt="" /> </a>

 
Probador HTML:

 <!-- Goldentags,YonkoChileWebRox -->

 

<script>

function probar(texto) {

ventana = window.open('', 'popup', '');

ventana.document.write(texto);

}

</script>

<form action="" name="probador">

<font face="Verdana" size="2">Esto es un probador de c&oacute;digos, inserta el c&oacute;digo HTML y te dar&aacute; el resultado en una ventana nueva!<hr />

</font><textarea rows="10" cols="50" name="texto"></textarea><font face="Verdana" size="2"> <br />

</font><input type="button" onclick="probar(texto.value)" value="Convertir" /><font face="Verdana" size="2"> </font>

</form>

 

 
Imagen animada de welcome:

 <a href="http://goldentags.es.tl"><img src="https://img.webme.com/pic/c/chatroh/8484484848484.gif" alt="Welcome" width="300" height="100" border="0" /></a>

 
Transformar el cursor en una mira:

  <style type="text/css">

 

<!--

body { cursor: crosshair}

-->

</style>

 

 
Luces a los lados de la web:

 <style>body {

 

background-image: url(http://photos1.hi5.com/0031/763/432/vr3mEw763432-03.gif);

background-repeat: repeat;

background-position: top center;

background-attachment: fixed;

background-repeat: repeat-y;

}</style>

 

 
Pajaro volador de Twitter:

 <script src="http://plantillasgratis.comuv.com/disemucho/pajaro_twitter_navidad/twitter/disemucho.js" type="text/javascript">

 

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

//<![CDATA[

        var birdSprite='http://u.jimdo.com/www21/o/s4e9df44a0ad8ccd8/img/iffeafe7e991f963f/1341590653/std/image.png';

        var targetElems=new Array('img','hr','table','td','div','input','textarea','button',


'select','ul','ol','li','h1','h2','h3','h4','p','code','object','a','b','strong','span');

        var twitterAccount = 'http://twitter.com/#!/futenlinea';

        var twitterThisText ='Sigueme en Twitter';

        tripleflapInit();

//]]>

</script>

 

 
Fuegos artificiales en tu web:

 <script type="text/javascript">

 

 

//mas codigos en disemucho.jimdo.com<![CDATA[

 

var bits=100; // cuantos bits

 

var intensity=7; // que tan "poderosa" es la explosión. (recomendado entre 3 y 10)

 

var speed=20; // rapidez (a menor numero, mas rapido)

 

var colours=new Array("#03f", "#f03", "#0e0", "#93f", "#0cc", "#f93");

 

//azul rojo verde purpura cyan, naranjo

 


 

var dx, xpos, ypos, bangheight;

 

var Xpos=new Array();

 

var Ypos=new Array();

 

var dX=new Array();

 

var dY=new Array();

 

var decay=new Array();

 

var colour=0;

 

var swide=800;

 

var shigh=600;

 

function write_fire() {

 

var b, s;

 

b=document.createElement("div");

 

s=b.style;

 

s.position="absolute";

 

b.setAttribute("id", "bod");

 

document.body.appendChild(b);

 

set_scroll();

 

set_width();

 

b.appendChild(div("lg", 3, 4));

 

b.appendChild(div("tg", 2, 3));

 

for (var i=0; i<bits; i++) b.appendChild(div("bg"+i, 1, 1));

 

}

 

function div(id, w, h) {

 

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

 

d.style.position="absolute";

 

d.style.overflow="hidden";

 

d.style.width=w+"px";

 

d.style.height=h+"px";

 

d.setAttribute("id", id);

 

return (d);

 

}

 

function bang() {

 

var i, X, Y, Z, A=0;

 

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

 

X=Math.round(Xpos[i]);

 

Y=Math.round(Ypos[i]);

 

Z=document.getElementById("bg"+i).style;

 

if((X>=0)&&(X<swide)&&(Y>=0)&&(Y<shigh)) {

 

Z.left=X+"px";

 

Z.top=Y+"px";

 

}

 

if ((decay[i]-=1)>14) {

 

Z.width="3px";

 

Z.height="3px";

 

}

 

else if (decay[i]>7) {

 

Z.width="2px";

 

Z.height="2px";

 

}

 

else if (decay[i]>3) {

 

Z.width="1px";

 

Z.height="1px";

 

}

 

else if (++A) Z.visibility="hidden";

 

Xpos[i]+=dX[i];

 

Ypos[i]+=(dY[i]+=1.25/intensity);

 

}

 

if (A!=bits) setTimeout("bang()", speed);

 

}

 


 

function stepthrough() {

 

var i, Z;

 

var oldx=xpos;

 

var oldy=ypos;

 

xpos+=dx;

 

ypos-=4;

 

if (ypos<bangheight||xpos<0||xpos>=swide||ypos>=shigh) {

 

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

 

Xpos[i]=xpos;

 

Ypos[i]=ypos;

 

dY[i]=(Math.random()-0.5)*intensity;

 

dX[i]=(Math.random()-0.5)*(intensity-Math.abs(dY[i]))*1.25;

 

decay[i]=Math.floor((Math.random()*16)+16);

 

Z=document.getElementById("bg"+i).style;

 

Z.backgroundColor=colours[colour];

 

Z.visibility="visible";

 

}

 

bang();

 

launch();

 

}

 

document.getElementById("lg").style.left=xpos+"px";

 

document.getElementById("lg").style.top=ypos+"px";

 

document.getElementById("tg").style.left=oldx+"px";

 

document.getElementById("tg").style.top=oldy+"px";

 

}

 

function launch() {

 

colour=Math.floor(Math.random()*colours.length);

 

xpos=Math.round((0.5+Math.random())*swide*0.5);

 

ypos=shigh-5;

 

dx=(Math.random()-0.5)*4;

 

bangheight=Math.round((0.5+Math.random())*shigh*0.4);

 

document.getElementById("lg").style.backgroundColor=colours[colour];

 

document.getElementById("tg").style.backgroundColor=colours[colour];

 

}

 

window.onscroll=set_scroll;

 

function set_scroll() {

 

var sleft, sdown;

 

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

 

sdown=self.pageYOffset;

 

sleft=self.pageXOffset;

 

}

 

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

 

sdown=document.body.scrollTop;

 

sleft=document.body.scrollLeft;

 

}

 

else if (document.documentElement && (document.documentElement.scrollTop || document.documentElement.scrollLeft)) {

 

sleft=document.documentElement.scrollLeft;

 

sdown=document.documentElement.scrollTop;

 

}

 

else {

 

sdown=0;

 

sleft=0;

 

}

 

var s=document.getElementById("bod").style;

 

s.top=sdown+"px";

 

s.left=sleft+"px";

 

}

 

window.onresize=set_width;

 

function set_width() {

 

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

 

swide=self.innerWidth;

 

shigh=self.innerHeight;

 

}

 

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

 

swide=document.documentElement.clientWidth;

 

shigh=document.documentElement.clientHeight;

 

}

 

else if (document.body.clientWidth) {

 

swide=document.body.clientWidth;

 

shigh=document.body.clientHeight;

 

}

 

}

 

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

 

set_width();

 

write_fire();

 

launch();

 

setInterval('stepthrough()', speed);

 

}}

 

//]]>

</script>

 

 
Mostar y ocultar texto:

 <div class="pre-spoiler">

    <span style="color: #00ffff;">Clik Aqui Esta El Codigo</span> <input type="button" value="Mostrar" style="width:80px;font-size:10px;margin:0px;padding:0px;" onclick=

    "if (this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display != '') { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = '';this.innerText = ''; this.value = 'Ocultar'; } else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.value = 'Mostrar';}" />

    </div>


<div>

    <div class="spoiler" style="display: none;">

        AQUI ESCRIBEN TODO EL CONTENIDO QUE OCULTARAN YA SEA UN CHAT, REPRODUCTOR,ETC

    </div>

</div>

 

 
Si algun codigo no funciona favor de escribirme un mensaje "aqui"

 
¡Hoy había/n 50 visitantes (56 clics a subpáginas) en ésta página!

Redes Sociales


En edición...

Suscríbete a mi canal


Este sitio web fue creado de forma gratuita con PaginaWebGratis.es. ¿Quieres también tu sitio web propio?
Registrarse gratis