Codigos de html basicos
Cerrado
Novato20
Mensajes enviados
2
Fecha de inscripción
miércoles, 25 de junio de 2008
Estatus
Miembro
Última intervención
miércoles, 25 de junio de 2008
-
25 jun 2008 a las 17:29
GuilleCastro - 24 jun 2019 a las 01:23
GuilleCastro - 24 jun 2019 a las 01:23
Hola,
Soy novato como lo dice nick.Empecea estudiar diseño web. Nesecitos ejemplos de codigos en HTML?
Gracias
Soy novato como lo dice nick.Empecea estudiar diseño web. Nesecitos ejemplos de codigos en HTML?
Gracias
Consulta también:
- Códigos html para copiar y pegar
- Codigos html basicos - Mejores respuestas
- Codigos html para paginas web - Mejores respuestas
- Copiar estructura de HTML en una pagina ✓ - Foro de webmastering
- Barra vertical copiar y pegar - Guide
- Guion bajo copiar y pegar - Guide
- Codigos para pokemon rojo fuego - Guide
- Arroba copiar y pegar - Guide
12 respuestas
Aqui hay unos cuantos, pruevalos en tu pagina, en donde quieres que cargen en forma de fuente HTML:
Crear un Título que cambia de colores:
Con este código podemos crear por ejemplo el título para nuestra Web o una de nuestras secciones. Como el código es muy largo Hacé Click acá para verlo en una nueva ventana
Subrayar un Link al pasar el mouse:
Con este código podemos lograr ese tan conocido efecto que al pasar el mouse sobre un link, este se subraye. Podemos hacer que tenga un color antes de visitar el link, y que tenga otro una vez visitado.
<STYLE type="text/css">
<!--
A:link {COLOR: red; TEXT-DECORATION: none}
A:visited {COLOR: gray; TEXT-DECORATION: none}
A:active {TEXT-DECORATION: none}
A:hover {COLOR: blue; TEXT-DECORATION: underline} -->
</STYLE>
</p>
<p><a href="l1.htm">El texto que quieras.</a><br>
<a href="l2.htm">otro texto.</a><br>
<a href="l3.htm">Otro texto.</a><br>
</p>
Cuadro explicativo de los enlaces:
Sorprendé a tus visitantes con este asombroso truco. Al pasar el mouse sobre el link, aparece la explicación de ese link en un cuadro con la cantidad de palabras que queramos poner.
<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://www6.suweb.net/?tdfs=1&searchbox=1&showDomain=1"
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://www6.suweb.net/?tdfs=1&searchbox=1&showDomain=1"
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>
Otra barra con mas colores:
A continuación veremos otro código para ponerle color a la barra de desplazamiento, en este caso vamos a poder personalizar los colores de la barra, del fondo y los bordes. Reemplazar los nombres de los colores por otros o por los código de letras y números. Mas abajo está la tabla de colores.
<style>
<!--
body { scrollbar-face-color: darkgreen ;
scrollbar-shadow-color: yellow;
scrollbar-highlight-color: violet;
scrollbar-3dlight-color: navy;
scrollbar-darkshadow-color: magenta;
scrollbar-track-color: blue;
scrollbar-arrow-color: black }
-->
</style>
Observación: para ver este truco, es necesario tener instalada las últimas versiones de los navegadores
Crear un formulario:
Con este código podemos crear un formulario para que complete el visitante. Por ejemplo un libro de visitas, luego que el visitante apriete el botón enviar, los datos serán enviados a tu casilla de correo.
<H2>Libro de visitas</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>
Insertar un sonido o música de fondo:
Si quieren que los visitantes escuchen una canción mientras visitan la Web, o simplemente recibirlos con una melodía estilo presentación, este es el código que estabas buscando.
Se recomienda usar sonidos en formato "midi" que son los de menor peso.
<BGSOUND SRC="sonido.mid" LOOP=none>
<WIDTH=200 HEIGHT=55 AUTOSTART="true" LOOP="false" HIDDEN="true">
Pantalla que tiembla:
Al insertar este código, cada vez que entremos en la Web se producirá una especie de terremoto en el explorador. Un efecto interesante para atraer la atención de nuestros visitantes.
<html>
<head>
<title>www.pauluk.8k.com</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>
<body bgcolor="#FFFFFF" text="#000000">
<p>
<script language="JavaScript1.2">
function tremer(n) {
if (self.moveBy) {
for (i = 10; i > 0; i--) {
for (j = n; j > 0; j--) {
self.moveBy(0,i);
self.moveBy(i,0);
self.moveBy(0,-i);
self.moveBy(-i,0);
}}}}
tremer(5)
</script>
<Script language=JavaScript>
function right(e) {
if (navigator.appName == 'Netscape' && (e.which == 3 || e.which == 2)){
alert("www.pauluk.8k.com");
return false;
}
else if (navigator.appName == 'Microsoft Internet Explorer' &&
(event.button == 2 || event.button == 3)) {
alert("www.pauluk.8k.com");
return false;
}
return true;
}
document.onmousedown=right;
if (document.layers) window.captureEvents(Event.MOUSEDOWN);
window.onmousedown=right;
</script>
</body>
</html>
Crear un link para download:
Si queremos poner archivos para que los visitantes los puedan descargar a sus computadoras, solo debemos subir ese archivo a nuestro servidor e insertar en nuestra Web el siguiente código HTML:
<a href="ejemplo.exe">Descripción del enlace </a>
No existe un comando que inicie la descarga. Lo que sucede es que, siempre que aparece un tipo de archivo no reconocido por el navegador, este comienza a descargarlo automáticamente. Ejemplo: Si el navegador no logra abrir un archivo "zip" (compactado), inicia la descarga automáticamente.
Efecto nieve con cualquier imagen:
Con este truco podés hacer que caigan por la pantalla varias veces la misma imagen con un efecto estilo nieve. Si querés ver el código y el efecto HACÉ CLIC ACÁ .
Hora y texto en la barra de estado:
Con este truco, podemos hacer que aparezca en la barra de estado la hora de la PC que entra a nuestra Web y poner el texto que queramos.
<script language="JavaScript">
<!--
mensaje=" |======| www.pauluk.8k.com "
function hora() {
var h = new Date();
window.status="|======| "
+ h.getHours() +":"+ h.getMinutes() +"" +mensaje ;
window.setTimeout('hora()',100);
}
hora()
//-->
</script>
Transformar el cursor en una mira:
Transformá la clásica flechita de Windows en una mira de disparo.
<style type="text/css">
<!--
body { cursor: crosshair}
-->
</style>
Tabla de colores HTML:
Esta tabla contiene todos los códigos para ponerle colores a las barras de desplazamiento, a las fuentes y muchas otras funciones más. Haga click acá para ver la Tabla Completa.
Comentario sobre un link en la barra de estado:
Al pasar el mouse sobre el link deseado, veremos en la barra de estado un comentario sobre éste. Por ejemplo posicionen el mouse sobre Pauluk Computación y vean en la barra de estado. (para verlo bien en ésta página pasen el mouse varias veces, ya que hay otro código parecido que lo obstruye).
<a href="http://www.pauluk.8k.com"
onmouseout="window.status=''"
onmouseover="window.status='Acá aparece el mensaje que quieras';return true">
Pauluk Computación</a>
Dificultar copia de página:
Con este recurso sencillo podemos hacer más difícil el acceso al código-fuente o la copia de imágenes de nuestro sitio. Cuando el visitante haga click con el botón derecho del mouse, surgirá un mensaje creado previamente por nosotros. Recordemos que a algunas personas no les gusta este tipo de bloqueo. Nosotros tenemos que decidir si queremos incluirlo o no en nuestras páginas.
Podemos colocarlo antes de la etiqueta <html> o después de la etiqueta <body>.
<Script language=JavaScript>
function right(e) {
if (navigator.appName == 'Netscape' && (e.which == 3 || e.which == 2)){
alert("Coloca el mensaje aquí.");
return false;
}
else if (navigator.appName == 'Microsoft Internet Explorer' &&
(event.button == 2 || event.button == 3)) {
alert("Coloca el mensaje aquí.");
return false;
}
return true;
}
document.onmousedown=right;
if (document.layers) window.captureEvents(Event.MOUSEDOWN);
window.onmousedown=right;
</script>
Nota: Para evitar este truco, también hay un contratruco, si entrás a una página que tiene este truco que no te deja copiar imágenes o texto, solo tenés que hacer click con el botón derecho del mouse sobre la barra de estado y sin soltarlo arrastrarlo hasta la imágen. Listo, se abrirá el menú como si la página no estuviese bloqueada a la copia. Hay que tener en cuenta que muy poca gente conoce este truco, por lo tanto podés usar tranquilo el truco de bloqueo.
Establecer una página como inicio:
Este código html te sirve para crear un link para que el visitante pueda hacer que tu página sea la de inicio de su computadora. Con solo hacer clic sobre el link creado, tu página se iniciará automáticamente cada vez que esa persona se conecte a Internet.
<A class=chlnk style="FONT-WEIGHT: bold; CURSOR: hand;
COLOR: #004080; FONT-FAMILY: Verdana" onclick=
"this.style.behavior='url(#default#homepage)';
this.setHomePage('http://www.pauluk.8k.com');">
<FONT face=Arial color=#000000 size=-2><U>
Establecer como página de inicio</U></FONT></A>
Redireccionar una página:
Si tenés una dirección larga y encontraste una nueva mas corta, o tu alojamiento anterior gratis ahora se hizo pago, con este código podés hacer que cada vez que alguien entre a tu página vieja, automáticamente se abra en la nueva dirección. Lo único que tenés que hacer es insertar el siguiente código en el index de tu página vieja:
<HTML>
<HEAD>
<TITLE>Redireccionando rápidamente</TITLE>
<SCRIPT LANGUAGE="JavaScript">
location.href='http://www.pauluk.8k.com';
</SCRIPT>
</HEAD>
<BODY>
Enviar un e-mail con Asunto y Mensaje:
Con este truco podés hacer que al hacer clic sobre una palabra, se abra el Outlook para enviar un mensaje con tu dirección, el asunto que quieras y el texto que quieras. Por ejemplo: Hacé clic acá para mandarme un mensaje
<a href="mailto:pauluk@argentina.com?subject=Prueba.&body=Estoy probando el truco...">Hacé clic acá para mandarme un mensaje</a>
Abrir un Link en una Ventana Nueva:
Cuando tenemos Links en nuestras páginas y alguien hace clic sobre ellos, automáticamente se abre esa dirección en nuestra ventana. Con este truco podemos hacer que al hacer clic sobre un determinado Link, esta dirección se abra en una ventana nueva, quedando la nuestra también abierta:
<a href="http://www.pauluk.8k.com" target="_blank">Pauluk Computación</a>
Crear un Título que cambia de colores:
Con este código podemos crear por ejemplo el título para nuestra Web o una de nuestras secciones. Como el código es muy largo Hacé Click acá para verlo en una nueva ventana
Subrayar un Link al pasar el mouse:
Con este código podemos lograr ese tan conocido efecto que al pasar el mouse sobre un link, este se subraye. Podemos hacer que tenga un color antes de visitar el link, y que tenga otro una vez visitado.
<STYLE type="text/css">
<!--
A:link {COLOR: red; TEXT-DECORATION: none}
A:visited {COLOR: gray; TEXT-DECORATION: none}
A:active {TEXT-DECORATION: none}
A:hover {COLOR: blue; TEXT-DECORATION: underline} -->
</STYLE>
</p>
<p><a href="l1.htm">El texto que quieras.</a><br>
<a href="l2.htm">otro texto.</a><br>
<a href="l3.htm">Otro texto.</a><br>
</p>
Cuadro explicativo de los enlaces:
Sorprendé a tus visitantes con este asombroso truco. Al pasar el mouse sobre el link, aparece la explicación de ese link en un cuadro con la cantidad de palabras que queramos poner.
<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://www6.suweb.net/?tdfs=1&searchbox=1&showDomain=1"
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://www6.suweb.net/?tdfs=1&searchbox=1&showDomain=1"
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>
Otra barra con mas colores:
A continuación veremos otro código para ponerle color a la barra de desplazamiento, en este caso vamos a poder personalizar los colores de la barra, del fondo y los bordes. Reemplazar los nombres de los colores por otros o por los código de letras y números. Mas abajo está la tabla de colores.
<style>
<!--
body { scrollbar-face-color: darkgreen ;
scrollbar-shadow-color: yellow;
scrollbar-highlight-color: violet;
scrollbar-3dlight-color: navy;
scrollbar-darkshadow-color: magenta;
scrollbar-track-color: blue;
scrollbar-arrow-color: black }
-->
</style>
Observación: para ver este truco, es necesario tener instalada las últimas versiones de los navegadores
Crear un formulario:
Con este código podemos crear un formulario para que complete el visitante. Por ejemplo un libro de visitas, luego que el visitante apriete el botón enviar, los datos serán enviados a tu casilla de correo.
<H2>Libro de visitas</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>
Insertar un sonido o música de fondo:
Si quieren que los visitantes escuchen una canción mientras visitan la Web, o simplemente recibirlos con una melodía estilo presentación, este es el código que estabas buscando.
Se recomienda usar sonidos en formato "midi" que son los de menor peso.
<BGSOUND SRC="sonido.mid" LOOP=none>
<WIDTH=200 HEIGHT=55 AUTOSTART="true" LOOP="false" HIDDEN="true">
Pantalla que tiembla:
Al insertar este código, cada vez que entremos en la Web se producirá una especie de terremoto en el explorador. Un efecto interesante para atraer la atención de nuestros visitantes.
<html>
<head>
<title>www.pauluk.8k.com</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>
<body bgcolor="#FFFFFF" text="#000000">
<p>
<script language="JavaScript1.2">
function tremer(n) {
if (self.moveBy) {
for (i = 10; i > 0; i--) {
for (j = n; j > 0; j--) {
self.moveBy(0,i);
self.moveBy(i,0);
self.moveBy(0,-i);
self.moveBy(-i,0);
}}}}
tremer(5)
</script>
<Script language=JavaScript>
function right(e) {
if (navigator.appName == 'Netscape' && (e.which == 3 || e.which == 2)){
alert("www.pauluk.8k.com");
return false;
}
else if (navigator.appName == 'Microsoft Internet Explorer' &&
(event.button == 2 || event.button == 3)) {
alert("www.pauluk.8k.com");
return false;
}
return true;
}
document.onmousedown=right;
if (document.layers) window.captureEvents(Event.MOUSEDOWN);
window.onmousedown=right;
</script>
</body>
</html>
Crear un link para download:
Si queremos poner archivos para que los visitantes los puedan descargar a sus computadoras, solo debemos subir ese archivo a nuestro servidor e insertar en nuestra Web el siguiente código HTML:
<a href="ejemplo.exe">Descripción del enlace </a>
No existe un comando que inicie la descarga. Lo que sucede es que, siempre que aparece un tipo de archivo no reconocido por el navegador, este comienza a descargarlo automáticamente. Ejemplo: Si el navegador no logra abrir un archivo "zip" (compactado), inicia la descarga automáticamente.
Efecto nieve con cualquier imagen:
Con este truco podés hacer que caigan por la pantalla varias veces la misma imagen con un efecto estilo nieve. Si querés ver el código y el efecto HACÉ CLIC ACÁ .
Hora y texto en la barra de estado:
Con este truco, podemos hacer que aparezca en la barra de estado la hora de la PC que entra a nuestra Web y poner el texto que queramos.
<script language="JavaScript">
<!--
mensaje=" |======| www.pauluk.8k.com "
function hora() {
var h = new Date();
window.status="|======| "
+ h.getHours() +":"+ h.getMinutes() +"" +mensaje ;
window.setTimeout('hora()',100);
}
hora()
//-->
</script>
Transformar el cursor en una mira:
Transformá la clásica flechita de Windows en una mira de disparo.
<style type="text/css">
<!--
body { cursor: crosshair}
-->
</style>
Tabla de colores HTML:
Esta tabla contiene todos los códigos para ponerle colores a las barras de desplazamiento, a las fuentes y muchas otras funciones más. Haga click acá para ver la Tabla Completa.
Comentario sobre un link en la barra de estado:
Al pasar el mouse sobre el link deseado, veremos en la barra de estado un comentario sobre éste. Por ejemplo posicionen el mouse sobre Pauluk Computación y vean en la barra de estado. (para verlo bien en ésta página pasen el mouse varias veces, ya que hay otro código parecido que lo obstruye).
<a href="http://www.pauluk.8k.com"
onmouseout="window.status=''"
onmouseover="window.status='Acá aparece el mensaje que quieras';return true">
Pauluk Computación</a>
Dificultar copia de página:
Con este recurso sencillo podemos hacer más difícil el acceso al código-fuente o la copia de imágenes de nuestro sitio. Cuando el visitante haga click con el botón derecho del mouse, surgirá un mensaje creado previamente por nosotros. Recordemos que a algunas personas no les gusta este tipo de bloqueo. Nosotros tenemos que decidir si queremos incluirlo o no en nuestras páginas.
Podemos colocarlo antes de la etiqueta <html> o después de la etiqueta <body>.
<Script language=JavaScript>
function right(e) {
if (navigator.appName == 'Netscape' && (e.which == 3 || e.which == 2)){
alert("Coloca el mensaje aquí.");
return false;
}
else if (navigator.appName == 'Microsoft Internet Explorer' &&
(event.button == 2 || event.button == 3)) {
alert("Coloca el mensaje aquí.");
return false;
}
return true;
}
document.onmousedown=right;
if (document.layers) window.captureEvents(Event.MOUSEDOWN);
window.onmousedown=right;
</script>
Nota: Para evitar este truco, también hay un contratruco, si entrás a una página que tiene este truco que no te deja copiar imágenes o texto, solo tenés que hacer click con el botón derecho del mouse sobre la barra de estado y sin soltarlo arrastrarlo hasta la imágen. Listo, se abrirá el menú como si la página no estuviese bloqueada a la copia. Hay que tener en cuenta que muy poca gente conoce este truco, por lo tanto podés usar tranquilo el truco de bloqueo.
Establecer una página como inicio:
Este código html te sirve para crear un link para que el visitante pueda hacer que tu página sea la de inicio de su computadora. Con solo hacer clic sobre el link creado, tu página se iniciará automáticamente cada vez que esa persona se conecte a Internet.
<A class=chlnk style="FONT-WEIGHT: bold; CURSOR: hand;
COLOR: #004080; FONT-FAMILY: Verdana" onclick=
"this.style.behavior='url(#default#homepage)';
this.setHomePage('http://www.pauluk.8k.com');">
<FONT face=Arial color=#000000 size=-2><U>
Establecer como página de inicio</U></FONT></A>
Redireccionar una página:
Si tenés una dirección larga y encontraste una nueva mas corta, o tu alojamiento anterior gratis ahora se hizo pago, con este código podés hacer que cada vez que alguien entre a tu página vieja, automáticamente se abra en la nueva dirección. Lo único que tenés que hacer es insertar el siguiente código en el index de tu página vieja:
<HTML>
<HEAD>
<TITLE>Redireccionando rápidamente</TITLE>
<SCRIPT LANGUAGE="JavaScript">
location.href='http://www.pauluk.8k.com';
</SCRIPT>
</HEAD>
<BODY>
Enviar un e-mail con Asunto y Mensaje:
Con este truco podés hacer que al hacer clic sobre una palabra, se abra el Outlook para enviar un mensaje con tu dirección, el asunto que quieras y el texto que quieras. Por ejemplo: Hacé clic acá para mandarme un mensaje
<a href="mailto:pauluk@argentina.com?subject=Prueba.&body=Estoy probando el truco...">Hacé clic acá para mandarme un mensaje</a>
Abrir un Link en una Ventana Nueva:
Cuando tenemos Links en nuestras páginas y alguien hace clic sobre ellos, automáticamente se abre esa dirección en nuestra ventana. Con este truco podemos hacer que al hacer clic sobre un determinado Link, esta dirección se abra en una ventana nueva, quedando la nuestra también abierta:
<a href="http://www.pauluk.8k.com" target="_blank">Pauluk Computación</a>
30 abr 2011 a las 04:36
Yo les dejo un código para hacer botones con colores personalizados:
<form action="tupaginaweb.com">
<input type=submit name=button value="Aqui el nombre de tu boton" style="color: #FFFFFF; background-color: #000000">
</form>
Sustituye los espacios "tupaginaweb.com" por tu sitio, "Aqui el nombre de tu boton" por el nombre de tu botón , "#FFFFFF" por tu color de fuente en hexadecimal y también "#000000" por tu color de fondo del boton en hexadecimal.
Espero que les sirva.
15 ago 2011 a las 23:31