Icono Trucos prácticos para HTML

Pese a que durante el transcurso del manual ya incluyo una serie de abundantes trucos, para que nuestras páginas tengan una mayor vistosidad, aquí tienes algunos trucos más, entre los que también incluyo al gún que otro Javascript muy curioso y útil para nuestros espectaculares dise�os.

* Detectar el navegador

Para comprobar el navegador que se está usando, por si queremos crear una página para Net scape y otra para Internet Explorer:


<script language="JavaScript">
<!--
function esIE30(){
    var browserType=navigator.userAgent;
    if (browserType.indexOf("MSIE")==-1)
        return false;
    else
        return true;
}

<!-- Cargar la página según el explorador -->
function cargar(){
    if (esIE30())
        window.location.href="indice_ie.htm";
    else
        window.location.href="indice_netscape.htm";
}

//-->
</script>

* Cambiar el contenido de una página cada "x" segundos

O mejor dicho, cargar otra página después de "x" segundos. Este comando debe estar en el bloque <HEAD>...</HEAD>:


<HEAD>
<!-- otras cosas -->
<META http-equiv="refresh" content="segundos; url=siguiente_pagina.htm">
<!--y algunas mas -->
</HEAD>

* Información adicional sobre la página

Si te has fijado en el código HTML de una página, habrás visto, dentro de <head>... </head> algo parecido a esto:


<meta name="GENERATOR" content="Microsoft FrontPage 2.0">
<title>Título de la página</title>

Pues también puedes incluir información adicional sobre la página, algunos "localizadores" la utilizan. Por ejemplo, el autor, las palabras claves, la descripción, etc.


<meta name="Author" content="Guillermo Som - el Guille">
<meta name="Description" content="Trucos y listados sobre Visual Basic, HTML...">
<meta name="KeyWords" content="Visual Basic, VB, VBScript, JavaScript, JScript, tips">

* Link para que te envíen un mensaje

<a href="mailto:[email protected]">Envíame un mensaje</a>

* A�adir el subject, al hacer el mailto

Pues otra cosa más para a�adir a tus trucos de HTML. Ya sabes que para enviar un mensaje, tienes que incluir mailto:dirección@correo (no pulses ya que no va a ningún lado). Bien, pues si a�ades al final de la dirección de correo ?subject=el subject, éste aparecerá de forma automática en ese campo, así de fácil.

En este ejemplo, las sentencias HTML, quedarían así: Envía un mensaje con el subject: Prueba de subject a [email protected]

Envía un mensaje con el subject: Prueba de subject a


<a href=" [email protected]?subject=Prueba de subject">[email protected] </a><br>


* Saber el tama�o de la ventana con Netscape

Sólo funcionará con la versión 3 o superior, pero...


if(navigator.javaEnabled()){
    var toolkit = java.awt.Toolkit.getDefaultToolkit();
    var screen_size = toolkit.getScreenSize();
    wz = screen_size.width;
    hz = screen_size.height;
}

* Forzar que la página se muestre en la pantalla completa

Cuando estás navegando en una página, de tantas (incluidas las mías), que tienen frames, al pulsar en algunos links que te interesan, te darás cuenta que se mustran estas páginas dentro del marco (frame) en el que has picado el link... Esto lo sufrimos todos, después de horas arreglando la presentación de nuestras páginas, nos damos cuenta de que al estar dentro de un marco... �se jode el invento! No sé si esto funcionará siempre, pero las pocas pruebas que he hecho, han dado resultados positivos.

�Que hay que hacer? Crear una página que a su vez cargue a nuestra página principal, además de solucionar el problema anterior de la fecha/hora esa del a�o 1600, solucionas el que te "encierren" dentro de un frame. Aquí está el código:


<html>
<script language="javascript">
<!--
function carga(){
        parent.location.href="indice_cf.htm"

}

//-->

</script>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Página cargadora...</title>
</head>
<body bgcolor="#FFFFFF" text="#000080" onload="carga()">
<h1 align="center"><strong>cargando<br>

Página de prueba

</body>
</html>

El truco está en el parent.location.href= "nombre de la página".


* Columnas rápidas

Desde la versión 3.0b5, Netscape soporta un nuevo tipo de atributo que nos permite formatear texto en columnas al estilo de los periódicos de forma rápida y sencilla.. Este tipo de atributo es muy sencillo de utilizar, lo único que se debe de poner es:


<MULTICOL>
...
<MULTICOL>

entre del texto que deseamos que se muestre en el navegador en columnas. Esta directiva tiene 2 atributos, uno de las cuales es obligatoria: COLS y GUTTER. COLS es el atributo obligatorio he indica el número de columnas en las que será mostrada la información que deseemos. GUTTER (canal), es el otro tipo de atributo opcional que posee un valor por defecto de 10. Inica en pixels el espacio en blanco que habrá entre columnas con este atributo.

Este es un ejemplo de texto a 2 columnas con una separación entre las mismas de 20 pixels entre columna y columna. Como se ve da un resultado muy espectacular y muy limpio de cara al visitante. Este truco es uno de los más empleados por casi todos los que lo conocen, a la hora de hacer una presentación rápida de texto en columnas, sin recurrir a las tablas, y mucho más sencillo que éstas.
* Fácil detección del navegador

��Por qué has de emplear un script para saber qué navegador emplea tu visitante??. No es necesario. Lo que puedes hacer en poner un empuje dede el cliente de modo que si emplean Netscape o Explorer, les conduzca a su página de navegador (que previamente habrás escrito para cada uno de los 2 visitantes.), optimizada para el mismo o para su navegador.


<META HTTP-EQUIV="Refresh" CONTENT="3; URL=http://lucas.cdf.udc.es/jgorriz/index_net.htm">
<HEAD>
<TITLE>;Detectando tu navegador...</TITLE>
</HEAD>
<BODY>
<H2>;En estos momentos se está detectando tu navegador...</H2>
Si estás empleando una versión de netscape, la página optimizada para Netscapese cargará automáticamente.
Sino fuera así puedes acceder a la página pulsando en el enlace
<A HREF="http://lucas.cdf.udc.es/jgorriz/index_otro.html">Siguiente</A>

Cuando la gente sin Netscape accede a la página, deberán pulsar en enlace "Siguiente", para poder acceder a los contenidos de la misma, mientras que si el visitante posee Netscape, no tiene que hacer nada más que esperar 3seg, para que el resto de la página se le cargue y la visualice correctamente. Este truco es muy conveniente por ejemplo si queremos tener dos páginas, una optimizada para Netscape, y la otra para el resto de navegadores...


* Frames sin barras divisiorias

Este truco se emplea mucho para poner la típica página con frames, de modo que no nos aparezca una barra de división entre a,bas columnas... Es muy vistoso y la verdad es que muy impresionante a la vista. Truco muy recomendado para personas que empleen frames en sus páginas. Lógicamente, sólo se podrá emplear en navegadores que soporten FRAMES.


<html>
<head>
<title> Menu Menu </title>
</head>
<frameset cols="240,*" border="0">
<frame name="menu" src="izda.htm" noresize  frameborder="0" scrolling="no">
<frame name="principal" src="derecha.htm" noresize frameborder="0">
</frameset>
</html>

* Envío de Mail desde Formulario

Este truco es especialmente indicado para todos aquellos que deseen que nuestros visitantes nos manden unas palabras de agradecimiento o de desprecio, desde nuestra página WEB, sin que para ello deban de configurar ninguna preferencia de E-mail desde su navegador favorito. El truco es muy simple. Un formulario que recoge los nombres, e-mail, y sugerencias de nuestros interlocutores, y los envia por medio del correo electrónico nuestro, a nuestro buzón. El truco está en el atributo de FORM denominado ENCTYPE, que no hace otra cosa que informar al navegador que el texto que se introduzcan en los distintos campos debe ser pasado por medio de la cabecera MIME, text/plain o texto plano para que podamos leerlo tranquilamente y formateado en nuestro buzón e-mail...


<html>
<head>
<title>Mail mediante form</title>
<body>
<form action="mailto:[email protected]" method="post" enctype="text/plain">
NOMBRE:<input type=text size=20 name="nombre"><br>
E-MAIL:<input type=text size=20 name="mail"><br>
COMENTARIOS:<BR>
<textarea name="comentarios" rows=5 cols=25></textarea><br>
<input type=submit value="ENVIAR">
<input type=reset value="BORRAR">
</form>
</body>
</html>
Anterior Menu Anterior