Manejar HTML puede servirte tanto para crear una web desde cero como para potenciar un sitio web creado con algún gestor (estilo WordPress). Por ello decidí dividir este artículo sobre HTML  en dos partes:

  • Primera parte: en esta estudiaremos la estructura básica del HTML y además te dejaré códigos HTML para páginas web en Bloc de notas. Con esto podrás, desde cero, crear tu sitio web.
  • Segunda parte: aquí daré varios trucos de HTML, útiles tanto para aquellos que quieren crear su Web solo con HTML como para quienes usan algún gestor de contenido (WordPress).

Primera Parte: Códigos HTML Para Páginas Web

No te puedo tirar códigos si no entiendes la estructura básica. Presta atención a lo que sigue, ya que es tan fácil como importante, no quiero que metas la pata desde el arranque.. jeje

 

Estructura básica de un documento HTML

La estructura de un documento Html, comienza siempre con la etiqueta <HTML> y termina con la etiqueta de cierre </HTML>. En el interior de estas dos etiquetas, existen dos espacios que son el encabezamiento y el cuerpo.

El encabezamiento esta delimitado por las etiquetas <HEAD> de apertura y </HEAD> de cierre. Esta parte está destinada a definir ciertas características de nuestra web, por ejemplo pueden introducirse codigos css. También en el encabezamiento se posiciona el título de la ventana de nuestra página web la cual empieza con la etiqueta <TITLE> y cierra con la etiqueta </TITLE>.

La segunda parte de un documento HTML es el cuerpo, inicia con la etiqueta <BODY> y culmina con la etiqueta </BODY>, en esta parte es donde se concentra el contenido de nuestra web, prácticamente la mayor parte del código se desarrolla en esta parte.

Podemos ver más claramente el orden de las etiquetas antes mencionadas en la siguiente tabla:

ETIQUETA
FUNCIÓN
<HTML>Empieza un documento HTML
<HEAD>Zona de cabecera
<TITLE>Zona de título
</TITLE>Termina zona de título
</HEAD>Termina zona de cabecera
<BODY>Zona de cuerpo del documento
</BODY>Termina zona de cuerpo del documento
</HTML>Termina documento HTML

Las etiquetas tienen propiedades, las cuales son descritas por medio de los Atributos. Un atributo es una opción que permite proporcionar detalles acerca de cómo una etiqueta afectará el contenido.

Ninguna página debe carecer de título ya que el explorador lo buscará para identificarla, además es fundamental a la hora de la indexación por parte de los buscadores.

Habiendo aprendido la estructura básica del HTML podemos escribir un sencillo código como el siguiente.

<html>
<head>
<title>Este es solo un ejemplo</title>
</head>
<body>
Aqui se encuentra el contenido de la web
</body>

Lo único que se verá en la pagina del ejemplo es el texto “Aqui se encuentra el contenido de la web”, ya que se encuentra dentro del la etiqueta <body>. En lo que sigue veremos como dar formato al texto.

 

Edición De Texto En HTML

Para la edicion de textos se usan etiquetas y atributos, comencemos viendo los atributos más destacados:

  • Face: fuente. nombre de la fuente, o fuentes
  • Color: color del texto. número hexadecimal o texto predefinido.
  • Size: tamaño del texto. valores del 1 al 7, siendo por defecto el 3, o desplazamiento respecto al tamaño por defecto, añadiendo + o – delante del valor

Por ejemplo, para insertar el texto:

   Aquí se encuentra en contenido de la web

Habría que escribir:

<font color=”#993366″ size=”4″ face=”Comic Sans MS, Arial, MS Sans Serif”>Aquí se encuentra el contenido de la web</font>

Otra forma de darle tamaño al texto es mediante la etiqueta <hx> con x que va creciendo de 1 en 1. Teniendo <h1>; <h2>; <h3>; <h4>; etc. Estas etiquetas no solo dan tamaño sino también jerarquizan al texto. Siendo el texto que coloques en la etiqueta <h1> el titulo principal de la página y los demás <h2>, <h3>, etc subtitulos. Es muy importante respetar y estructurar con estas etiquetas tus páginas para una mejorar indexación de tu contenido.

Para resaltar los textos existen varias etiquetas:

<b> negrita negrita

<i> cursiva cursiva

<u> subrayado subrayado

<s> tachado tachado

<tt> máquina de escribir máquina de escribir

Por ejemplo, para insertar el texto:

Aquí se encuentra el contenido de la web

Habría que escribir:

<font color=”#ED1CF7″ size=”5″ face=”Comic Sans MS, Arial, MS Sans Serif”><u>Aquí<u> se <s>encuentra</s> el contenido de la <b>web</b></font>

 

Codigos HTML Para Paginas Web En Bloc De Notas

Vamos a aplicar lo que aprendimos para escribir un código HTML y crear una web desde un bloc de notas. Lo primero que debes hacer es abrir un bloc de notas y escribir el código. Como ejemplo puedes tomar el siguiente:

<html>
<head>
<title>Este es solo un ejemplo</title>
</head>
<body bgcolor=”#A2F9FC”><h1><center>Este Es El Título Principal De La Página</center></h1><font size=”3″ face=”Comic Sans MS, Arial, MS Sans Serif”>
Aqui podemos colocar alguna <b>introducción</b> al contenido que encontrarás… bla bla bla</font><h2><center><u>Este Es Un Subtítulo De La Página</u><center></h2><font size=”3″ face=”Comic Sans MS, Arial, MS Sans Serif”>
Aqui se encontrará el <i>desarrollo</i> con todo lo que quieras..</font></body>
</html>

Si prestaste atención habrás visto que añadí el atributo bgcolor dentro de la etiqueta <body>, esto permite dar color al fondo del sitio. Puedes seleccionar el color en formato hexadecimal, personalmente siempre saco los colores de esta web. Además hice uso de la etiqueta <center> para centrar el título y subtitulo <h1> y <h2> respectivamente. Las demás etiquetas y atributos que use las hemos visto anteriormente. 🙂

Para visualizar este sencillo sitio web debes guardar el bloc de notas con la extensión .html. Sigue mis pasos, Archivo –> Guardar como…

 

Codigos HTML para Paginas Web en bloc de notas

 

Añade al final del nombre de tu archivo la extensión .html y dale click en Guardar.

 

Codigo HTML para paginas web en bloc de notas

 

Eso te generará un icono del navegador que tengas por defecto con el nombre que le diste a archivo.

 

Probando los códigos HTML

 

Si abres el archivo que acabas de generar podrás visualizar el sencillo sitio web que acabamos de crear.

 

Sencilla página web html desde bloc de notas

 

Consejo Uno: Una buena forma de aprender HTML es leer códigos de otras webs, eso te ayudará a ir amigandote con el lenguaje. El acceder al HTML de cualquier web es bien sencillo, abre dicho sitio con Google Chrome y presiona Ctrl+U. Eso te abrirá una nueva ventana con el código fuente de la página. Te recomiendo que comiences leyendo sitios web sencillos, ya que de lo contrario podrá confundirte.
Consejo Dos: Si vas a armar tu página con HTML pero no quieres perder tiempo en escribir todo el código pásate por este sitio web desde el cual puedes descargar excelentes plantillas html gratuitas. Si te decides a descargar alguna plantilla aprovecha para darle una hojeada a como están escritas.. 😉

Segunda Parte: Trucos HTML Para Tu Sitio Web

Como ya te dije anteriormente, y dejo claro en el título, aquí te daré muchos trucos. He recopilado estos códigos HTML para páginas web de varios foros y páginas webs, los que aquí dejo son todos los que logre que funcionen. Igualmente si tienes problema con alguno de estos trucos dímelo en la caja de comentarios así lo reviso. 🙂

1. Poner en tu web un texto con Movimiento (Arriba-Abajo).

<marquee id=”ejemplo” direction=”up”>AQUI VA EL TEXTO QUE DESEES </marquee><a href=”javascript:void(0);” onclick=”getElementById(‘ejemplo’).direction=’down’;”>Hacia abajo</a>—<a href=”javascript:void(0);” onclick=”getElementById(‘ejemplo’).direction=’up’;”>Hacia arriba</a>

 

2. Inserta el famoso botón de “Ir Arriba”. Imagen modificable (solo cambia la URL).

</script></div><div class=”n”><div class=”n”> <a href=”#” title=”Ir arriba”><img alt=”Ir arriba” border=”0″ src=”http://2.bp.blogspot.com/_qgZA1ny_dAs/S0QFsV1WD7I/AAAAAAAADhs/ZBKrnpzqBrk/s200/arrow8a.png” style=position:fixed;bottom:0;right:0;/></a> </div>

 

3. Añade una atractiva Marquesina con el texto que quieras.

<center> <div class=”n”><p>    <b><font color=”#000000″ face=”georgia” size=”4″><marquee width=”400″ scrollamount=”5″ bgcolor=”#FFFFFF”>Aquí tu texto</marquee>    </font></b></p><center>

 

4. Contenido oculto (ejemplo: código html) con botón “Mostrar”.

<div class=”pre-spoiler”>    <span style=”color: #00ffff;”>Clic Para Mostrar El Contenido</span> <input type=”button” value=”Mostrar Contenido” style=”width:80px;font-size:15px;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’;}” />gt;    </div><div>    <div class=”spoiler” style=”display: none;”>        AQUI ESCRIBEN TODO EL CONTENIDO QUE OCULTARAN YA SEA UN CHAT, REPRODUCTOR,ETC    </div></div>

 

5. Titulo en la barra de direcciones con movimiento.

<SCRIPT LANGUAGE=”JavaScript”>var txt=” TITULO DE LA WEB “;var espera=140;var refresco=null;function rotulo_title() {document.title=txt;txt=txt.substring(1,txt.length)+txt.charAt(0);refresco=setTimeout(“rotulo_title()”,espera);}rotulo_title();</script>

 

6. Insertar un simple botón: “Imprimir Página Actual”.

<h2><a href=”javascript:print()”><span style=”color: rgb(0, 255, 255);”><span style=”font-family: Arial;”><span style=”font-size: x-large;”>Imprimir Contenido</span></span></span></a></h2>

 

7. Añade el juego Mario Bross en tu sitio web. (Mas juegos en Games68.com).

</p>
<table cellpadding=”0″ cellspacing=”0″ style=”margin:0 0 10px 0; width:244px; background:#fff; border:1px solid #F3F3F3;”>
<tbody>
<tr>
<td style=”font-family:verdana; font-size:11px; color:#000; padding:5px 5px;”>
<object classid=”clsid:D27CDB6E-AE6D-11cf-96B8-444553540000″ codebase=”http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,29,0″ height=”480″ width=”480″><param name=”movie” value=”http://www.games68.com/games/jeux-flash-2904.swf” /><param name=”quality” value=”high” /><param name=”menu” value=”false” /><embed height=”480″ menu=”false” pluginspage=”http://www.macromedia.com/go/getflashplayer” quality=”high” src=”http://www.games68.com/games/jeux-flash-2904.swf” type=”application/x-shockwave-flash” width=”480″></embed></object></td>
</tr>
<tr>
<td align=”center” style=”font-family:verdana; font-size:11px; padding:5px 10px; border-top:1px solid #F3F3F3;”>
<strong><a href=”http://www.games68.com/games.php?id=6629″ target=”_blank”>Super Mario flash</a></strong> | <a href=”http://www.games68.com”>Flash games</a> with <a href=”http://www.games68.com” title=”Games with Games68.com”>Games68.com</a></td>
</tr>
</tbody>
</table>
<p>
&nbsp;</p>

 

8. Texto (modificable) con un Efecto Parpadeante.

<script language=”JavaScript”>  var estado=true;  setTimeout(“ver()”,450);  function ver (){  estado=!estado;  if(estado==true)  texto1.style.visibility=”visible”;  else  texto1.style.visibility=”hidden”;  setTimeout(“ver()”,450);  }  </script><p align=”center” id=”texto1″  style=”visibility:visible”><font face=”Arial, Helvetica,  sans-serif size=”3″>AÑADE AQUI EL TEXTO QUE QUIERAS</font></p>

 

9. interesante código HTML para insertar lluvia en tu pagina.

<!– Lluvia en el blog –>
<div style=”display:none;”>
<script type=”text/javascript” src=”http://blogparts.giffy.me/0117/parts.js”></script><p style=”text-align: center;margin:0;padding:0;”>
<a href=”http://giffy.me/baby/”><img style=”border:0;” src=”http://blogparts.giffy.me/0117/parts.gif” alt=”降水確率100%ブログパーツ;” /></a></p>
<p style=”text-align:center;font-size:12px;margin:10px 0 0 0;padding:0;”>
[PR] <a href=”http://typing.twi1.me/” rel=”nofollow”>楽しくタイピング練習!</a></p>
</div>
<iframe allowtransparency=’true’ frameborder=’0′ marginheight=’0′ marginwidth=’0′ scrolling=’no’ src=’http://audio-play.blogspot.com/p/lluvia.html’ style=’height:0; width:0;’></iframe>
<!– Fin lluvia en el blog –>

 

10. Al pasar el mouse por un link se desplegará una ventana explicando la función del mismo.

<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.pauluk.8k.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://www.suweb.net/users/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://www.suweb.net/users/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>

 

11. Inserta una caja como esta para poner códigos HTML.

<div align=”center”> <div id=”preview” style= “BORDER-RIGHT: #000 1px solid; PADDING-RIGHT: 0px; BORDER-TOP: #000 1px solid; PADDING-LEFT: 2px; PADDING-BOTTOM: 2px; WORD-SPACING: 1px; OVERFLOW: scroll; BORDER-LEFT: #000 1px solid; WIDTH: 400px; PADDING-TOP: 1px; BORDER-BOTTOM: #000 2px solid; HEIGHT: 150px; TEXT-ALIGN: left”> <p> AQUI VA LO QUE TU QUIERAS, CAMBIA ESTE TEXTO. </p> </div></div>

 

12. Abrir una pagina en Popup. Inserta el parámetro onload=”abrir()” en <body> de esta forma: <body onload=”abrir()”>.

<head><script>
function abrir() {
open(‘pagina.html’,”,’top=300,left=300,width=300,height=300′) ;
}
</script></head>

 

13. Pequeño widget que da en tiempo real el número de usuarios activos en tu web.

<script id=”_wauwaa”>var _wau = _wau || []; _wau.push([“classic”, “zltotgacrhd9”, “waa”]);
(function() {var s=document.createElement(“script”); s.async=true;
s.src=”http://widgets.amung.us/classic.js”;
document.getElementsByTagName(“head”)[0].appendChild(s);
})();</script>

 

14. Inserta un Pequeño y Bonito Calendario en tu Página Web.

<script type=”text/javascript” src=”http://100widgets.com/js_data.php?id=106″></script>

 

15. Efecto de sangre callendo desde la parte superior de tu web.

<img border=’0′ src=’http://u.jimdo.com/www21/o/s4e9df44a0ad8ccd8/img/i0425d9e289ed1713/1297446540/std/image.gif’ style=’position:fixed; top:0; left:0; width:100%; height:150px;’/>

 

16. El Pájaro de Twiiter volando por toda tu página web o blog.

<script src=”https://sites.google.com/site/ayudabloggers/scripts/tripleflap.js” type=”text/javascript”></script>
<script type=”text/javascript”>
var birdSprite=’https://lh3.googleusercontent.com/-StM0Csn4ktc/TYNPdDXzNGI/AAAAAAAAAds/QPZ0-DbHgtc/s1600/birdsprite.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/emprender_100’;
var twitterThisText =”;
tripleflapInit();
</script>

 

17. Opciones en casilla que abren un enlace al seleccionarse. Sigue lo que se dice en el código para modificar los textos.

<form>
<ul>
<li style=”background-image:none;”>
<input value=”ON” onclick=”RubicusFrontendIns.location=’URL del enlace 1′; return true;” type=”checkbox” />Título del enlace 1
</li>

<li style=”background-image:none;”>
<input value=”ON” onclick=”RubicusFrontendIns.location=’URL del enlace 2′; return true;” type=”checkbox” />Título del enlace 2
</li>

<li style=”background-image:none;”>
<input value=”ON” onclick=”RubicusFrontendIns.location=’URL del enlace 3′; return true;” type=”checkbox” />Título del enlace 3
</li>

<li style=”background-image:none;”>
<input value=”ON” onclick=”RubicusFrontendIns.location=’URL del enlace 4′; return true;” type=”checkbox” />Título del enlace 4
</li>
</ul>
</form>

 

18. Logra un efecto de subrayado cuando pasas el mouse sobre un link.

<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”>Hola Sonso.</a><br>
<a href=”l2.htm”>Como estas.</a><br>
<a href=”l3.htm”>Carl.</a><br>
</p>

 

19. Código HTML para insertar pequeño widget de Horoscopos en tu web.

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

<table>    <tr>        <td height=”27″ class=”edit_rb_footer” id=”edit_rb_footer_1″>
</td>    </tr></table>;

 

20. Un solo botón y varios enlaces. Fijate lo que hay que cambiar, es facil.

<center><span style=”font-family: Arial, Helvetica, sans-serif; font-size: x-small;”><script language=”JavaScript” type=”text/javascript”>
//<![CDATA[
<!– scrip presentado por truco95.jimdo.com –>
var timerID = null
var timerRunning = false
var charNo = 0
var charMax = 0
var lineNo = 0
var lineMax = 3
var lineArr = new Array(lineMax)
var urlArr = new Array(lineMax)
lineArr[1] = “Texto número 1”
urlArr[1] = “Enlace número 1”
lineArr[2] = “Texto número 2”
urlArr[2] = “Enlace número 2”
lineArr[3] = “Texto número 3”
urlArr[3] = “Enlace número 3″
var lineText = lineArr[1] function StartShow() {
StopShow()
ShowLine()
timerRunning = true
}
function FillSpaces() {
for (var i = 1; i <= lineWidth; i++) {
spaces += ” ”
}
}
function StopShow() {
if (timerRunning) {
clearTimeout(timerID)
timerRunning = false
}
}
function ShowLine() {
if (charNo == 0) {
if (lineNo < lineMax) {
lineNo++
}
else {
lineNo = 1
}
lineText = lineArr[lineNo] charMax = lineText.length
}
if (charNo <= charMax) {
document.formDisplay.buttonFace.value = lineText.substring(0, charNo)
charNo++
timerID = setTimeout(“ShowLine()”, 100)
}
else {
charNo = 0
timerID = setTimeout(“ShowLine()”, 3000)
}
}
function GotoUrl(url)
{
RubicusFrontendIns.location.href = url
}
document.write(“<form name=”formDisplay”>”);
document.write(“<input type=”button” name=”buttonFace” value=”&{lineText}” size=”18″ onClick=”GotoUrl(urlArr[lineNo])”>”);
document.write(“</form>”);
StartShow();
//]]>
</script></span></center>

 

21. Widget para mostrar la fecha exacta en tu web.

<p style=”text-align: center;”>    <iframe width=”200″ height=”200″ scrolling=”no”
src=”http://pagina-del-dia.euroresidentes.es/gadget-dia-de-hoy.php?fondo=Rojo.png&amp;texto=FFFFFF” frameborder=”0″></iframe>gt;</p>

 

22. Crear un boton para abrir un enlace. Configuralo.

<input type=”button” value=”Abrir” onclick=”window.open(‘Aqui la direccion que quieres que se abra’)” />

 

23. Inserta un formulario de suscripción para tus visitantes.

<H2>Libro de visitas</H2>
<FORM ACTION=”mailto:tunombre@tuservidor.com” METHOD=”post”><TABLE><TD ALIGN=RIGHT>Nombre:</TD>
<TD><INPUT type=”text” size=36 name=”nombre”></TD>
<TR><TD ALIGN=RIGHT>Direccion E-mail:</TD>
<TD><INPUT type=”text” size=36 name=”direccion”></TD>
<TR><TD ALIGN=RIGHT>como llegaste hasta esta pagina?</TD>
<TD><INPUT type=”text” size=36 name=”procedencia”></TD>
<TR><TD ALIGN=RIGHT>Tus comentatios:</TD>
<TD><TEXTAREA rows=5 cols=30 name=”comentarios”></TEXTAREA></TD></TABLE><INPUT type=”reset” value=”Borrar todo”> <INPUT type=”submit” value=”Enviar”></FORM>

 

 

24. Hermoso efecto de caída de nieve para tu sitio web

<head>
</head>
<script>// Numero de copos, recomendados entre 30 y 40
var nieve_cantidad=35// Colores de los copos se mostraran de forma aleatoria
var nieve_colorr=new Array(“#aaaacc”,”#ddddFF”,”#ccccDD”)// Tipo de letra de los copos
var nieve_tipo=new Array(“Arial Black”,”Arial Narrow”,”Times”,”Comic Sans MS”)// Valor o letra de los copos
var nieve_letra=”*”// velocidad de caida
var nieve_velocidad=0.6// tamaño mas grande de los copos
var nieve_cantidadsize=30// tamaño mas pequeño de los copos
var nieve_chico=8// 1 toda la pagina – 2 zona izquierda – 3 centro de pagina – 4 zona derecha
var nieve_zona=1var nieve=new Array()
var marginbottom
var marginright
var timer
var i_nieve=0
var x_mv=new Array();
var crds=new Array();
var lftrght=new Array();
var browserinfos=navigator.userAgent
var ie5=document.all&&document.getElementById&&!browserinfos.match(/Opera/)
var ns6=document.getElementById&&!document.all
var opera=browserinfos.match(/Opera/)
var browserok=ie5||ns6||operafunction aleatorio(range) {
rand=Math.floor(range*Math.random())
return rand
}function initnieve() {
if (ie5 || opera) {
marginbottom = document.body.clientHeight
marginright = document.body.clientWidth
}
else if (ns6) {
marginbottom = window.innerHeight
marginright = window.innerWidth
}
var nievesizerange=nieve_cantidadsize-nieve_chico
for (i=0;i<=nieve_cantidad;i++) {
crds[i] = 0;
lftrght[i] = Math.random()*15;
x_mv[i] = 0.03 + Math.random()/10;
nieve[i]=document.getElementById(“s”+i)
nieve[i].style.fontFamily=nieve_tipo[aleatorio(nieve_tipo.length)] nieve[i].size=aleatorio(nievesizerange)+nieve_chico
nieve[i].style.fontSize=nieve[i].size
nieve[i].style.color=nieve_colorr[aleatorio(nieve_colorr.length)] nieve[i].sink=nieve_velocidad*nieve[i].size/5
if (nieve_zona==1) {nieve[i].posx=aleatorio(marginright-nieve[i].size)}
if (nieve_zona==2) {nieve[i].posx=aleatorio(marginright/2-nieve[i].size)}
if (nieve_zona==3) {nieve[i].posx=aleatorio(marginright/2-nieve[i].size)+marginright/4}
if (nieve_zona==4) {nieve[i].posx=aleatorio(marginright/2-nieve[i].size)+marginright/2}
nieve[i].posy=aleatorio(2*marginbottom-marginbottom-2*nieve[i].size)
nieve[i].style.left=nieve[i].posx
nieve[i].style.top=nieve[i].posy
}
movenieve()
}function movenieve() {
for (i=0;i<=nieve_cantidad;i++) {
crds[i] += x_mv[i];
nieve[i].posy+=nieve[i].sink
nieve[i].style.left=nieve[i].posx+lftrght[i]*Math.sin(crds[i]);
nieve[i].style.top=nieve[i].posyif (nieve[i].posy>=marginbottom-2*nieve[i].size || parseInt(nieve[i].style.left)>(marginright-3*lftrght[i])){
if (nieve_zona==1) {nieve[i].posx=aleatorio(marginright-nieve[i].size)}
if (nieve_zona==2) {nieve[i].posx=aleatorio(marginright/2-nieve[i].size)}
if (nieve_zona==3) {nieve[i].posx=aleatorio(marginright/2-nieve[i].size)+marginright/4}
if (nieve_zona==4) {nieve[i].posx=aleatorio(marginright/2-nieve[i].size)+marginright/2}
nieve[i].posy=0
}
}
var timer=setTimeout(“movenieve()”,50)
}for (i=0;i<=nieve_cantidad;i++) {
document.write(“<span id=’s”+i+”‘ style=’position:absolute;top:-“+nieve_cantidadsize+”‘>”+nieve_letra+”</span>”)
}
if (browserok) {
window.onload=initnieve
}
</script>
<body bgcolor=”#333″><br>
<br><div style=’width:100%;height:500px;background-color:#666666;color:#339900;’>Contenido de la pagina</div>
</body>

 

25. Trasnforma el cursos en una mira de disparo

<style type=”text/css”>
<!–
body { cursor: crosshair}
–>
</style>

 

26. Código para un banner que se abre en una nueva ventana, modifica las Urls y el tamaño del banner (width y height).

<a href=”COLOCA AQUI URL DE PAGINA DE DESTINO” target=”_blank”><img style=”opacity: 1;” src=”COLOCA AQUI URL DE BANNER” width=”468″ height=”60″ /></a>

 

27. Inserta un reloj con las horas restantes 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>

 

 

28. Inserta un botón animado a tu web.

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

 

 

29. Coloca el buscador de Google en tu sitio web.

<form method=”get” action=”http://www.google.com/search”> <input type=”hidden” name=”ie” value=”UTF-8″ /> <input type=”hidden” name=”oe” value=”UTF-8″ /> <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” /></a> </td> <td> <input type=”text” name=”q” size=”31″ maxlength=”255″ value=”” /> <input type=”submit” name=”btnG” value=”Buscar en” /> <font size=”-1″><input type=”hidden” name=”domains” value= “https://luisforgiariniblog.com/” /><br /> <input type=”radio” name=”sitesearch” value=”” /> Google <input type=”radio” name=”sitesearch” value=”Esta página” checked=”checked” /> https://luisforgiariniblog.com/<br /></font> </td> </tr> </table></form><!– Script presentado por luisforgiariniblog.com –><!– SiteSearch Google –>

 

30. Lista de enlaces en movimiento (marquesina) facil de entender para modificar.

<marquee direction=”up” onmouseout=”this.start()” onmouseover=”this.stop()” scrollamount=”1″ style=”border: 2px solid #000; height: 200px; padding: 3px; text-align: center; width: 200px;”>

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

<a href=”Enlace 2″>Título 2</a><br />
<a href=”Enlace 3″>Título 3</a>
</marquee>

 

31. Cerrar la ventana en la que se está con botón. Texto editable.

<input type=”button” value=”Cerrar Ventana” onclick=”window.close()” />

 

32. Cuenta regresiva. Debes modificar la fecha (formato Mes/Día/Año) y huso horario.

<script language=”JavaScript”> TargetDate = “MES/DIA/AÑO 12:00 AM/PM UTC+0100”; BackColor = “green”; ForeColor = “blue”; CountActive = true; CountStepper = -1; LeadingZero = true; DisplayFormat = “%%D%% Días, %%H%% Horas, %%M%% Minutos, %%S%% Segundos.”; FinishMessage = “Ha terminado la cuenta atrás”; </script> <script language=”JavaScript” src=”http://scripts.hashemian.com/js/countdown.js”></script>

 

33. Enmarcar un texto con borde configurable.

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

 

Bueno creo que te deje varios trucos y códigos HTML para tu página web. Tendrás un largo rato para revisarlos todos. 🙂 Espero que toda esta info haya sido de utilidad, y de ser así compártelo que no cuesta nada.. jeje