Buenas a todos!

Hoy iniciamos esta sección “Códigos de Ejemplo ” con unos cuantos ejemplos en HTML, que integran pequeños códigos JavaScript y realizan funciones concretas para que podáis añadir a vuestro sitio web o simplemente ver como funciona.

Si deseáis enviarnos códigos interesantes o educativos ( HTML, JavaScript, .NET, C, C++, C#, Visual Basic, etc…) enviadnos vuestros códigos con nuestro formulario de contacto pinchando AQUI! o Pulsando “Contacto” en el pié de página de nuestro blog!

Espero vuestros códigos!!!

Redireccionar una página

Si tenéis una dirección larga, y los servidores que te dan direcciones cortas no tienen buena capacidad de almacenamiento o de tasa de transferencia de datos, con este código podéis hacer que al escribir una dirección se abra otra, solo tenéis que insertar este código en el “index.html” del dominio corto poniendo tu dirección actual donde está en verde:

Abrir una web en Pop-Up

Con este código vamos a hacer que al entrar en nuestra página automáticamente se abra otra, ej. otra Web nuestra, una sección que queremos mostrar, una publicidad, etc.

No dejar seleccionar el texto de nuestra Web

Con este código vamos a impedir que los visitantes seleccionen el texto de nuestra página para luego copiarlo a otro lado.

Horas restantes para finalizar el día

Con este código insertamos un pequeño reloj que indica la cuenta regresiva de las horas, minutos y segundos que faltan para finalizar el día.

Recomendar página

Con este código podemos hacer que si a un visitante le gustó nuestra Web, la recomiende a un amigo escribiendo su dirección de correo electrónico en la casilla, al hacer click en “Recomendar esta Web” se envía un mensaje de correo con el asunto “Pienso que te puede interesar esta página…” y en el cuerpo del mensaje aparece la dirección completa donde se encuentra el código y el título de la misma.

Crear un formulario o Libro de Visitas

Con este código podemos crear un formulario para que complete el visitante. O también un libro de visitas, luego que el visitante apriete el botón “enviar”, los datos serán enviados a tu casilla de correo.

Cuadro explicativo en los enlaces

Sorprende 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. Solo tenéis que reemplazar mis direcciones por las tuyas, y el texto deseado por el tuyo.

Insertar un sonido o música de fondo

Si queréis que los visitantes escuchen una canción mientras visitan la Web, o simplemente recibirlos con una melodía con estilo de presentación, este es el código que estabas buscando. Solo tenéis que guardar el sonido en el directorio raíz de tu servidor e insertar el siguiente código html:

Se recomienda usar sonidos en formato “midi” que son los de menor peso.

Crear un link para un Download

Si queremos poner archivos para que los visitantes los puedan descargar a su PC, solo debemos subir ese archivo a nuestro servidor e insertar en nuestra Web el siguiente código HTML:

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.

Subrayar un link al pasar el mouse por encima

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.

Cambia el puntero a una mirilla de disparo!

Transforma la clásica flechita de Windows en una mira de disparo.

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.

Dificulta el copiado de nuestra web

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

Nota: Para evitar este truco, también hay una forma, si entras a una página que tiene este truco que no te deja copiar imágenes o texto, solo tenéis que hacer click con el botón derecho del mouse sobre la barra de estado y sin soltarlo arrastrarlo hasta la imagen. 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 puedes usar tranquilo el truco de bloqueo.

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.

Enviar un e-mail con Asunto y Mensaje

Con este truco podéis 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: Hacer clic aquí para mandarme un mensaje:

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: