≫ 100 Codigos HTML para páginas web 【en bloc de notas】

Códigos HTML Para Paginas Web En Bloc De Notas

68 comentarios / Blogging, Programación Basica / Por Luis Forgiarini

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

Post que te puede interesar: 18 increíbles códigos CSS para potenciar tu sitio web

Si quieres aprender de una forma profesional y bajo titulación mira los cursos de Escuela ecommerce, apúrate que hay descuentos de hasta el 60% 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.

¿Buscas una plantilla para WordPress? No siga buscando. Aprovecha estos increíbles descuentos para Divi de Elegant Themes, la mejor plantilla multi-propósito premium de WordPress.

Descuento Del 20 % Plan Yearly Access

Descuento Del 10 % Plan Lifetime Access

Recuerda que no solo estas adquiriendo Divi sino también las demás 87 plantillas premium de Elegant Themes y sus fabulosos plugins (Divi Builder, Bloom, Monarch).

Nota: Este artículo contiene enlaces de afiliado, por los que recibiré una comisión en caso de una venta. Solo recomiendo los mejores productos del mercado que obviamente uso para mi blog.

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.

Post que te puede interesar: Ejemplo de Paginas web en HTML y CSS + Tutorial de edicion

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

¿Buscas una plantilla para WordPress? No siga buscando. Aprovecha estos increíbles descuentos para Divi de Elegant Themes, la mejor plantilla multi-propósito premium de WordPress.

Descuento Del 20 % Plan Yearly Access

Descuento Del 10 % Plan Lifetime Access

Recuerda que no solo estas adquiriendo Divi sino también las demás 87 plantillas premium de Elegant Themes y sus fabulosos plugins (Divi Builder, Bloom, Monarch).

Nota: Este artículo contiene enlaces de afiliado, por los que recibiré una comisión en caso de una venta. Solo recomiendo los mejores productos del mercado que obviamente uso para mi blog.

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.

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.

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="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh4p5bYOViE_AfdevGl23lP-TWRCrfwvgEbq14rhno7rRaf7X02X-oXTGhVyq4RlM1kNaFc14i5-mX7VTKzXpv4SBbsN0KIrvM0aoxxwMN6aFDXmegdD3H0gdpxGe-j6B20MgJ9ukOEhT0/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)

Super Mario flash | juegos online gratuito con Games68.com

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="https://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="https://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='https://audio-play.blogspot.com/p/lluvia.html' style='height:0; width:0;'></iframe>
<!-- Fin lluvia en el blog -->

¿Buscas una plantilla para WordPress? No siga buscando. Aprovecha estos increíbles descuentos para Divi de Elegant Themes, la mejor plantilla multi-propósito premium de WordPress.

Descuento Del 20 % Plan Yearly Access

Descuento Del 10 % Plan Lifetime Access

Recuerda que no solo estas adquiriendo Divi sino también las demás 87 plantillas premium de Elegant Themes y sus fabulosos plugins (Divi Builder, Bloom, Monarch).

Nota: Este artículo contiene enlaces de afiliado, por los que recibiré una comisión en caso de una venta. Solo recomiendo los mejores productos del mercado que obviamente uso para mi 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 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('pagina.html','','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=document.createElement("script"); s.async=true;
s.src="https://widgets.amung.us/classic.js";
document.getElementsByTagName("head")[0].appendChild(s);
})();</script>

Post que te puede interesar: 18 increíbles códigos CSS para potenciar tu sitio web

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

<script type="text/javascript" src="https://100widgets.com/js_data.php?id=106"></script>

15- Efecto de sangre cayendo desde la parte superior de tu web

<img border='0' src='https://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 Twitter 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 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 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

Para la edición del este código HTML ingresa al sitio web (tamaño, zona horaria) https://www.zeitverschiebung.net/es/clock-widget

<div style="text-align:center;padding:1em 0;"> <h3><a style="text-decoration:none;" href="https://www.zeitverschiebung.net/es/timezone/america--argentina--cordoba"><span style="color:gray;">Hora actual en</span><br />America/Argentina/Cordoba</a></h3> <iframe src="https://www.zeitverschiebung.net/clock-widget-iframe-v2?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="window.open('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="http://www.google.com/search" 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 https://countingdownto.com/es editarlo desde allí.

<iframe width="300" height="154" src="https://w2.countingdownto.com/2734593" 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 😉

Espero que toda esta info haya sido de utilidad, y de ser así compártelo que no cuesta nada.

68 comentarios en “Códigos HTML Para Paginas Web En Bloc De Notas”

Pedro Antonio
abril 28, 2017 a las 4:07 pm

Excelente post, me sirvió de mucho para mi web. Un saludo!! 🙂

Responder

Luis Forgiarini
mayo 3, 2017 a las 3:20 pm

Muchas gracias por pasar por mi blog. Saludos.

Responder

Angel Garcia
junio 29, 2020 a las 6:19 am

que debo hacer para que mi pagina pueda ser visible por alguien mas?

Responder

Luis Forgiarini
agosto 29, 2020 a las 3:46 pm

Hola Angel, entiendo que lo que quieres es aumentar el trafico en tu web. Sin dudas lo que necesitas es algo de conocimiento sobre SEO. Te dejo un post muy básico sobre el tema, te servirá si estas apenas arrancando. Saludos. https://luisforgiarini.com/guia-seo-principiantes-dummies/

Responder

Anónimo

septiembre 29, 2017 a las 7:29 pm

4.5

Responder

Anónimo

octubre 15, 2017 a las 4:51 pm

Responder

Anónimo

noviembre 1, 2017 a las 5:53 pm

1.5

Responder

Luis Forgiarini

marzo 9, 2018 a las 5:31 pm

4.5

Responder

danyXD

marzo 16, 2018 a las 3:22 pm

😀 thanks you my friend

Responder

luis

enero 31, 2019 a las 11:00 am

HOLA, OCUPO UN CODIGO PARA CENTRAR Y PONER UN MARGEN EN MI PAGINA WEB GRACIAS DE ANTEMANO ESCRIBE EL
Sr. Luis

Responder

Luis Forgiarini
octubre 27, 2019 a las 4:07 pm

Perfect! Saludos Sr. Luis. 😉

Responder

JLPC

octubre 26, 2019 a las 9:21 am

EXCELENTE SITIO…FELICITACIONES Y ADELANTE!!!

Responder

Luis Forgiarini
octubre 27, 2019 a las 4:05 pm

Gracias JLPC! Saludos.

Responder

caranchoa

noviembre 26, 2019 a las 12:41 am

me sirvió mucho, no presté atención en clase

Responder

Luis Forgiarini
noviembre 27, 2019 a las 7:20 am

Me alegro que te hay servido!! Saludos. 🙂

Responder

YURI

enero 7, 2020 a las 2:04 pm

GENIAL!!! GRACIAS

Responder

Luis Forgiarini
enero 14, 2020 a las 8:48 am

Gracias a vos por comentar Yuri!!

Responder

ROY

febrero 17, 2020 a las 12:29 pm

UN SLIDER DE IMAGNES PAROOO

Responder

Luis Forgiarini
febrero 21, 2020 a las 5:20 pm

Hola Roy, no entiendo tu comentario. Igual gracias. 😉

Responder

alexis
marzo 5, 2020 a las 4:18 am

un slider se refiere a un carrusel de imagenes

Responder

Luis Forgiarini
marzo 10, 2020 a las 6:20 pm

Hola Alexis, se que es un slider, lo que no entendí fue el comentario. Gracias!! 🙂

Responder

Mario Alberto

marzo 2, 2020 a las 4:51 pm

Luis, me ha sido de gran utilidad el código de la marquesina que publicaste. Seguiré probando con el resto y gracias por la compilación. Si puedes publicar algún de un banner animado de imágenes, como para mostrar una serie de fotografías en un mismo cuadro o marco con temporizador para cada imagen, es decir, que se muestren cada 3 segundos.

Mil gracias por tu ayuda.

Responder

Luis Forgiarini
marzo 4, 2020 a las 9:49 pm

Hola Mario,que bueno que haya sido útil uno de los códigos. 🙂

No te prometo nada, pero en cuanto tenga tiempo buscare un código como el que me pides.

Por lo pronto gracias por comentar, saludos.

Responder

Cesar Villamizar

marzo 10, 2020 a las 1:39 pm

Buen día en el juego de mario como puedo cambiar para que salga otros juegos, esta muy interesante

Gracias

Responder

Luis Forgiarini
marzo 10, 2020 a las 6:08 pm

Hola Cesar, que bueno que te haya interesado ese código. Sí, no tienes mas que entrar a la web https://www.games68.com/ y buscar otro juego. Cuenta con un muy amplio catálogo. 🙂

Cuando encuentres el juego que buscas debes irte hasta el final de la página, allí encontrarás el código HTML.

Saludos!!

Responder

Juanma

marzo 24, 2020 a las 8:59 am

YO QUERIA 100 CODIGOS HTML. ¡VAYA MENTIRA!
Pero muchas gracias por haberlos puesto porque me han servido de mucho.

Responder

Luis Forgiarini
marzo 24, 2020 a las 9:30 am

Hola Juanma, disculpa por la pequeña mentira. La verdad tenía compilados más códigos en un principio, pero con el tiempo dejaron de ser funcionales y no he tenido tiempo de buscar más. 🙁

Saludos y gracias por pasarte y comentar.

Responder

Eduardo

abril 19, 2020 a las 3:28 pm

Hola, Gracias por estos códigos están super geniales, me van a servir mucho para esta cuarentena ya que me piden unos cuantos proyectos de paginas web con de mi carrera, recién estoy comenzando y me ayudan bastante.

Excelente trabajo, saludos desde México

Responder

Luis Forgiarini
abril 19, 2020 a las 7:24 pm

Hola Eduardo, me alegro que sirva de algo mi blog en esta cuarentena.

Saludos desde Argentina. 🙂

Responder

linda

mayo 7, 2020 a las 11:54 pm

Hola, necesito un codigo para poder poner comentarios en mi pagina web y que estos me lleguen a mi correo electronico

Responder

Luis Forgiarini
mayo 16, 2020 a las 9:28 am

Hola Linda, si usas WordPress no necesitas ningún Plugin. Solo ve a la barra de herramientas Ajustes–> Comentarios –> Enviarme un correo electrónico cuando. Ahí podrás seleccionar dos opciones para recibir un correo cuando alguien envía un comentario y/o se ha recibido un comentario para moderar. Espero haber sacado tu duda. Saludos.

Responder

Edward
agosto 5, 2020 a las 6:10 pm

Hola. No soy conocedor de este tema. Estos mismos códigos me sirven para aplicaciones android

Responder

Luis Forgiarini
agosto 29, 2020 a las 3:38 pm

Hola Edward, no estoy muy familiarizado con la programación de Android, pero estoy seguro que estos códigos no sirven. Saludos.

Responder

mickel

mayo 11, 2020 a las 1:59 am

muchas gracias bro me ayudo para practicar algo en esta caurentena xd

Responder

Luis Forgiarini
mayo 16, 2020 a las 9:25 am

Hola Mickel, gracias a vos por pasarte y comentar. Saludos! 🙂

Responder

fredy

mayo 12, 2020 a las 7:18 pm

hola luis como estas,,,como les quito las barras de desplazamiento en el codigo

Responder

Luis Forgiarini
mayo 16, 2020 a las 9:24 am

Hola Fredy, a cual de todos los códigos te referís??

Responder

PABLO PANTA

junio 3, 2020 a las 3:43 am

QUE BUEN APORTE MUCHAS GRACIAS

Responder

Daniel Galvez

junio 21, 2020 a las 2:32 am

muy buenos códigos pero es posible que me comparta el código para que mis clientes dejen su testimonio ?

Responder

Luis Forgiarini
agosto 29, 2020 a las 3:51 pm

Hola Daniel, visita este link. Tiene los codigos HTML y CSS que buscas. https://codepen.io/Adhy/pen/dYegGK

Responder

Fredy Gomez

julio 5, 2020 a las 4:42 pm

Viejo Muchas gracias, si deseo colocar el boton de Whatsapp flotante en mi pagina como lo hago.

Como lo organizco

Responder

Luis Forgiarini
agosto 29, 2020 a las 3:43 pm

Hola Fredy Gomez, mira si tu web está montada con WordPress existen muchos plugins que pueden resolver esa necesidad. Te dejo uno totalmente gratuito aqui https://wordpress.org/plugins/creame-whatsapp-me/. Pero como digo hay varios más tanto gratuitos como de pago. Saludos.

Responder

nadie

septiembre 30, 2020 a las 1:40 pm

mugusto mucho esta pag me sirvio bastante

Responder

gabriel

octubre 8, 2020 a las 7:06 pm

me gustaria saber como hacer una barra de comentarios igual a esta alguien me puede ayudar

Responder

Luis Forgiarini
diciembre 4, 2020 a las 10:03 am

Hola Gabriel. Una caja de comentarios como la de mi web?

Responder

yanamaris

octubre 12, 2020 a las 10:55 am

Muy buenos codigos, aunque tengo duda en como hacer un formulario que me envie correos a mi bandeja ya que aun no cuento con un servidor web ya que no he publicado mi sitio, lo estoy creando a partir de plantillas porque es para mi empresa y no tengo mucho tiempo libre para crear

Responder

Luis Forgiarini
diciembre 4, 2020 a las 10:02 am

Hola yanamaris, te recomiendo que uses WordPress para crear tu web. Sobre todo si no tienes mucho tiempo libre para dedicar a la programación.

Responder

Bruno

enero 30, 2021 a las 5:48 am

como puedo insertar algun video ¿?

Responder

Luis Forgiarini
febrero 15, 2021 a las 5:59 pm

Hola Bruno, si es muy sencillo. En caso que sea un video de Youtube no tienes mas que ir a la opción compartir y buscar el código que se encuentra en la opción incorporar <>.

Responder

sara
abril 22, 2021 a las 5:55 pm

1.- crear una página web donde tenga 8 formatos diferentes de audio

2.- crear una página web donde tenga 8 formatos de diferentes de video

3.- crear una página web donde tenga 8 formatos de diferentes de video con 5 propiedades diferentes.

4.- crear una página web donde tenga 8 formatos diferentes de audio separado por una línea verde de 15 puntos.

5.- crear una página web donde tenga 8 formatos diferentes de audio con imagen de fondo y tamaño diferentes

Hola no encuentro solucion a esto , me pide diferente formato con audio y video externos, no descargarlo en mi computadora e insertarlo si no con la url

Responder

Luis Forgiarini
mayo 5, 2021 a las 5:09 pm

Hola Sara, no se si he terminado de entender. Pero si lo que te pide es insertarlo desde una URL dichos audios y videos deben estar cargados en algún servidor externo a tu pagina web.

Responder

agos

marzo 26, 2021 a las 6:34 pm

muchas gracias!!!
es muy completo, me gustaron todas las ideas y me sirvió mucho para la tarea del colegio.

Responder

Luis Forgiarini
abril 7, 2021 a las 5:24 pm

Hola Agos, me alegra que te haya servido mi post. Saludos! 🙂

Responder

Pingback: 12-05 Fundamentos del código III – Learn Ux-UI

Andres

junio 21, 2021 a las 6:03 pm

Quiero que aparezcan los productos que ofrece la empresa, y quiero que de cada foto que sale, al darle clic se pueda desplegar la información del producto y así con todas, gracias.

Responder

Pingback: Grado Undécimo – Línea de profundización WEB APP

Pingback: Grado Décimo – Línea de profundización WEB APP

Darwin

agosto 8, 2021 a las 6:54 pm

Quiero un código para subir videos y se puedan ver cómo la mecánica que tiene tik tok que es muy fácil ver videos o me puedes explicar como se hace me ayudarías al mil!! Porfa

Responder

Luis Forgiarini
septiembre 2, 2021 a las 8:05 pm

Hola Darwin, por lo que me comentas creo que lo que buscas es un carrusel para reproducir videos. La verdad nunca necesite hacer algo así. Fíjate si esto te sirve.

https://mobirise.com/bootstrap-carousel/bootstrap-video-carousel.html

Espero que si, saludos.

Responder

Pingback: Porque es necesario conocer sobre HTML y CSS - Preguntas / respuestas

Osvaldo

septiembre 2, 2021 a las 4:06 pm

Luis, como estás ?? Interesante tu blog, estoy intentando hacer un sitio de información (a partir de una plantilla), para un Consorcio de Propietarios, en el cual quiero introducir una «Caja de Comentarios», encontré una que está en inglés (de «Commentbox), pero no me deja modificar el código para pasarlo al español. Hay otras cajas, pero, para mi, son muy complicadas, no se nada de programación, me animo a copiar y pegar los códigos y a lo sumo modificar algún texto dentro del mismo. Tendrás algún código para introducir una caja de comentarios para que haya un ida y vuelta entre los vecinos (mensajes anónimos no). Quise colocar la caja de comentarios de Facebook y no pude. Gracias. Osvaldo

Responder

Luis Forgiarini
septiembre 2, 2021 a las 7:57 pm

Hola Osvaldo, en tu caso en el cual por lo que dices manejas de manera muy profunda la programación lo que te recomendaria es usar WordPress para crear y gestionar tu web. De esta manera cuanqlquier función que quieras añadir (ej introducir una caja de comentarios) es posible instalando simplemente un plugin. Crear una web a partir de una plantilla solo te dará dolores de cabeza si no manejas de manera profunda HTML, Css, javascript, etc.

Responder

Osvaldo
septiembre 3, 2021 a las 9:20 am

Luis, buen día !! Gracias por tu pronta respuesta.
Contrariamente a lo que aprecias, no tengo la menor idea de programación, utilizo las plantillas como medio para iniciar un proyecto, y luego voy investigando sobre lo que me interesa que el sitio tenga, se me complica cuando tengo que empezar a relacionar la base que elegí con otros sistemas. Voy a intentar como me sugerís, con WordPress. Saludos

Responder

Yilson Alexis Malambo

octubre 5, 2021 a las 12:38 am

Subirla a un hosting y configurar dicho dominio según el seo de la página.

Responder

Laura

noviembre 15, 2021 a las 7:57 pm

Hola Luis, me ha gustado mucho tu post ya que estoy aprendiendo código y me viene genial.

¿Qué opinas de la web de https://www.w3schools.com/html/default.asp? ¿Cuál es tu web de código favorita?

Gracias

Responder

Luis Forgiarini
diciembre 22, 2021 a las 3:50 pm

Hola Laura, que bueno que te haya servido. La verdad no tengo una web favorita, solo busco en Google cuando necesito un código en especifico y listo. Igual debo reconocer que w3schools.com es de las webs mejor posicionadas en ese sector, por lo que casi siempre termino por ahi. Un saludo.

Responder

Peter4578pro9

noviembre 20, 2021 a las 8:08 pm

Me sirvió mucho
Muchísimas gracias

Responder

Luis Forgiarini
noviembre 21, 2021 a las 10:55 am

Me alegra que te haya servido. Saludos.

Responder

codigos htm js principais para criar sites

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

Estructura básica de un documento HTML

Edición De Texto En HTML

Codigos HTML Para Páginas Web En Bloc De Notas

Segunda Parte: Trucos HTML Para Tu Sitio Web

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

2- Inserta el famoso botón de «Ir Arriba». Imagen modificable (solo cambia la URL)

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

4- Contenido oculto (ejemplo: código html) con botón «Mostrar»

5- Titulo en la barra de direcciones con movimiento

6- Insertar un simple botón: «Imprimir Página Actual»

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

8- Texto (modificable) con un Efecto Parpadeante

9- Interesante código HTML para insertar lluvia en tu pagina

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

11- Inserta una caja para poner códigos HTML

12- Abrir una pagina en Popup

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

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

15- Efecto de sangre cayendo desde la parte superior de tu web

16- El Pájaro de Twitter volando por toda tu página web o blog

17- Opciones en casilla que abren un enlace al seleccionarse.

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

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

20- Un solo botón y varios enlaces

21- Widget para mostrar la fecha exacta en tu web

22- Crear un botón para abrir un enlace

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

24- Código para un banner que se abre en una nueva ventana

25- Colocar el buscador de Google

26- Colocar una cuenta regresiva

Entradas relacionadas

68 comentarios en “Códigos HTML Para Paginas Web En Bloc De Notas”

Deja un comentario Cancelar respuesta

Comentários

Enviar um comentário

Mensagens populares deste blogue

Oração para entrar em jesus