Códigos HTML Para Paginas Web
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 códigos
HTML para paginas web 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).
en plazas limitadas.
Tabla de contenidos
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 Páginas 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…
Añade al final del nombre de tu archivo la extensión .html y dale click en Guardar.
Eso te generará un icono del navegador que tengas por defecto con el nombre que le diste a
archivo.
Si abres el archivo que acabas de generar podrás visualizar el sencillo sitio web que acabamos de
crear.
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="[Link]
ZBKrnpzqBrk/s200/[Link]" 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
([Link]('div')[1].getElementsByTagName('div')
[0].[Link] != '') { [Link]('div')
[1].getElementsByTagName('div')[0].[Link] = '';[Link] = ''; [Link] = 'Ocultar'; } else {
[Link]('div')[1].getElementsByTagName('div')
[0].[Link] = 'none'; [Link] = '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() {[Link]=txt;txt=[Link](1,[Link])
+[Link](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 [Link])
Object 1
Super Mario flash | juegos online gratuito con [Link]
8- Texto (modificable) con un Efecto Parpadeante
<script language="JavaScript"> var estado=true; setTimeout("ver()",450); function ver (){ estado=!
estado; if(estado==true) [Link]="visible"; else [Link]="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="[Link] style="text-
align: center;margin:0;padding:0;">
<a href="[Link] style="border:0;" src="[Link]
alt="降水確率 100%ブログパーツ;" /></a></p>
<p style="text-align:center;font-size:12px;margin:10px 0 0 0;padding:0;">
[PR] <a href="[Link] rel="nofollow">楽しくタイピング練習！</a></p>
</div>
<iframe allowtransparency='true' frameborder='0' marginheight='0' marginwidth='0' scrolling='no'
src='[Link] 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){[Link]=frase; }
// --></script>
</p>
<table border="0">
<tr>
<td width="200"><p align="center"><strong>Opciones.</strong></p><p><a
href="[Link]
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="[Link]
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="[Link]
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 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
Esto va entre las etiquetas <head> y </head>
<head><script>
function abrir() {
open('[Link]','','top=300,left=300,width=300,height=300') ;
}
</script></head>
Debes colocar el parámetro onload=»abrir()» en de esta forma:
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=[Link]("script"); [Link]=true;
[Link]="[Link]
[Link]("head")[0].appendChild(s);
})();</script>
14- Inserta un Pequeño y Bonito Calendario en tu Página Web
<script type="text/javascript" src="[Link]
15- Efecto de sangre cayendo desde la parte superior de tu web
<img border='0'
src='[Link]
[Link]' style='position:fixed; top:0; left:0; width:100%; height:150px;'/>
16- El Pájaro de Twitter volando por toda tu página web o blog
<script src="[Link]
type="text/javascript"></script>
<script type="text/javascript">
var birdSprite='[Link]
QPZ0-DbHgtc/s1600/[Link]';
var targetElems=new
Array('img','hr','table','td','div','input','textarea','button','select','ul','ol','li','h1','h2','h3','h4','p','code','obje
ct','a','b','strong','span');
var twitterAccount = '[Link]
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="[Link]='URL del enlace 1'; return true;"
type="checkbox" />Título del enlace 1
</li>
<li style="background-image:none;">
<input value="ON" onclick="[Link]='URL del enlace 2'; return true;"
type="checkbox" />Título del enlace 2
</li>
<li style="background-image:none;">
<input value="ON" onclick="[Link]='URL del enlace 3'; return true;"
type="checkbox" />Título del enlace 3
</li>
<li style="background-image:none;">
<input value="ON" onclick="[Link]='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="[Link]">Hola Sonso.</a><br>
<a href="[Link]">Como estas.</a><br>
<a href="[Link]">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([Link][1].selected)
[Link]('[Link]
aries_st.html','hrscp','width=460,height=100,top=150,left=175,scrolling=0,frameborder=0,status=0,m
enubar=0,scrollbars=0');
else if([Link][2].selected)
[Link]('[Link]
taurus_st.html','hrscp','width=460,height=100,top=150,left=175,scrolling=0,frameborder=0,status=0,
menubar=0,scrollbars=0');
else if([Link][3].selected)
[Link]('[Link]
gemini_st.html','hrscp','width=460,height=100,top=150,left=175,scrolling=0,frameborder=0,status=0,
menubar=0,scrollbars=0');
else if([Link][4].selected)
[Link]('[Link]
cancer_st.html','hrscp','width=460,height=100,top=150,left=175,scrolling=0,frameborder=0,status=0,
menubar=0,scrollbars=0');
else if([Link][5].selected)
[Link]('[Link]
leo_st.html','hrscp','width=460,height=100,top=150,left=175,scrolling=0,frameborder=0,status=0,me
nubar=0,scrollbars=0');
else if([Link][6].selected)
[Link]('[Link]
virgo_st.html','hrscp','width=460,height=100,top=150,left=175,scrolling=0,frameborder=0,status=0,m
enubar=0,scrollbars=0');
else if([Link][7].selected)
[Link]('[Link]
libra_st.html','hrscp','width=460,height=100,top=150,left=175,scrolling=0,frameborder=0,status=0,m
enubar=0,scrollbars=0');
else if([Link][8].selected)
[Link]('[Link]
scorpio_st.html','hrscp','width=460,height=100,top=150,left=175,scrolling=0,frameborder=0,status=0
,menubar=0,scrollbars=0');
else if([Link][9].selected)
[Link]('[Link]
sagittarius_st.html','hrscp','width=460,height=100,top=150,left=175,scrolling=0,frameborder=0,status
=0,menubar=0,scrollbars=0');
else if([Link][10].selected)
[Link]('[Link]
capricorn_st.html','hrscp','width=460,height=100,top=150,left=175,scrolling=0,frameborder=0,status
=0,menubar=0,scrollbars=0');
else if([Link][11].selected)
[Link]('[Link]
aquarius_st.html','hrscp','width=460,height=100,top=150,left=175,scrolling=0,frameborder=0,status=
0,menubar=0,scrollbars=0');
else if([Link][12].selected)
[Link]('[Link]
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 fácil.
<center><span style="font-family: Arial, Helvetica, sans-serif; font-size: x-small;"><script
language="JavaScript" type="text/javascript">
//<![CDATA[
<!-- scrip presentado por [Link] -->
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 = [Link]
}
if (charNo <= charMax) {
[Link] = [Link](0, charNo)
charNo++
timerID = setTimeout("ShowLine()", 100)
}
else {
charNo = 0
timerID = setTimeout("ShowLine()", 3000)
}
}
function GotoUrl(url)
{
[Link] = url
}
[Link]("<form name="formDisplay">");
[Link]("<input type="button" name="buttonFace" value="&{lineText}" size="18"
onClick="GotoUrl(urlArr[lineNo])">");
[Link]("</form>");
StartShow();
//]]>
</script></span></center>
21- Widget para mostrar la fecha exacta en tu web
Para la edición del este código HTML ingresa al sitio web (tamaño, zona
horaria) [Link]
<div style="text-align:center;padding:1em 0;"> <h3><a style="text-decoration:none;"
href="[Link]
style="color:gray;">Hora actual en</span><br />America/Argentina/Cordoba</a></h3> <iframe
src="[Link]
language=es&size=medium&timezone=America%2FArgentina%2FCordoba" width="100%"
height="115" frameborder="0" seamless></iframe> </div>
22- Crear un botón para abrir un enlace
<input type="button" value="Abrir" onclick="[Link]('Aqui la direccion que quieres que se
abra')" />
23- Inserta un formulario de suscripción para tus visitantes
<div id="after_submit"></div>
<form id="contact_form" action="#" method="POST" enctype="multipart/form-data">
<div class="row">
<label class="required" for="name">Your name:</label><br />
<input id="name" class="input" name="name" type="text" value="" size="30" /><br />
<span id="name_validation" class="error_message"></span>
</div>
<div class="row">
<label class="required" for="email">Your email:</label><br />
<input id="email" class="input" name="email" type="text" value="" size="30" /><br />
<span id="email_validation" class="error_message"></span>
</div>
<div class="row">
<label class="required" for="message">Your message:</label><br />
<textarea id="message" class="input" name="message" rows="7" cols="30"></textarea><br />
<span id="message_validation" class="error_message"></span>
</div>
<input id="submit_button" type="submit" value="Send email" />
</form>
24- Código para un banner que se abre en una nueva ventana
Debes modificar las Urls y el tamaño del banner.
<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>
25- Colocar el buscador de Google
<form action="[Link] method="get" target="_blank"> <table width="100%"
align="center" cellpadding="0" cellspacing="0" bgcolor="#FFFFFF"> <tr> <td width="23%"
align="right" valign="top"><img src="Imge/Google_Logo.gif" width="128" height="53" alt="Google
Logo" /></td> <p> <td width="77%" align="center"> <input type="text" name="q" size=75
maxlength="255" value=""> <input type="submit" name="btnG" value="Buscar En Google"><span
style=font-size:-1;><br /></span></td> </tr> </table> <!-- SiteSearch Google --> </form>
26- Colocar una cuenta regresiva
Para editar este código te recomiendo ingresar a la web [Link] editarlo
desde allí.
<iframe width="300" height="154" src="[Link]
frameborder="0"></iframe>
Bueno creo que te dejé varios trucos y códigos HTML para tu página web. No hemos llegado a
dejar a los 100 códigos pero son los suficientes para que debas invertir un buen rato en revisarlos
todos. Lo más importante es que hayas aprendido el como implementarlos, luego según la
necesidad existe san Google para encontrar el código adecuado