Lección 4
|
|
Así que querés hacer
una Página WEB!
Lección 4 |
Hablemos de links.
En realidad es bastante simple. Hagamos un link a
Altavista
.
Empecemos con esto...
<BODY BGCOLOR="#00FF00">
Andá a Altavista!
</BODY>
Andá a Altavista!
|
Ahora agreguemos un par de etiquetas de link.
<BODY BGCOLOR="#00FF00">
Andá a
<A>
Altavista!
</A>
</BODY>
|
Andá a Altavista!
|
Agregá la dirección (URL) y estamos listos. URL significa Universal Resource Locator (o sea Localizador de Recursos Universal) Esa es una frase grandilocuente que se les ocurrió a los capos de la computación. Esos muchachos se la pasan poniendo ese tipo de nombres a todo... Bueno, URL es sólo una dirección.
<BODY BGCOLOR="#00FF00">
Andá a <A
HREF="http://www.altavista.com/"
>Altavista!</A>
</BODY>
|
Andá a
Altavista!
|
Hagamos una más.
<BODY BGCOLOR="#00FF00">
Andá a CinicMan!
</BODY>
|
Andá a CinicMan!
|
<BODY BGCOLOR="#FFFFFF">
Andá a
<A HREF="http://members.xoom.com/CinicMan">
CinicMan!
</A>
</BODY>
|
Andá a
CinicMan!
|
Un link a una dirección de corrreo electrónico (e-mail) funciona de la misma forma. Solamente tenemos que reemplazar la dirección http por la de un e-mail..
<BODY BGCOLOR="#FFFFFF">
Mandame un <A
HREF="mailto:
josemir@lujambio.com
">E-Mail!</A>
</BODY>
|
Mandame un
E-Mail!
|
|
FAQ:
Cómo puedo especificar un Subject para mis mensajes
de e-mail?
<A HREF="mailto:josemir@lujambio.com ?subject:che yorugua ladron! "> Ojo! Tené en cuenta que ahí afuera hay muchos tipos de programas para enviar e-mails. Algunos lo van a mandar sin problema, con Subject y todo, otros lo van a mandar con el Subject en blanco, y hay algunos que no van a poder envíar nada. Puede llegar a ocurrir que para esta gente va a parecer que lo mandaron, pero en realidad no. Si la posibilidad de perder algunos mensajes puede ser un problema para vos, entonces no especifiques el Subject y listo. |
|
FAQ:
Cómo puedo eliminar el subrayado de mis links?
<style type="text/css"><!--
|
Podemos hacer que una imagen contenga un link... Usando el "Andá a CinicMan!" de arriba podemos sustituir CinicMan por una etiqueta <IMG>
<BODY BGCOLOR="#00FF00">
Andá a <A HREF="http://members.xoom.com/CinicMan">
<IMG
SRC="glorioso.jpg" WIDTH=100 HEIGHT=56>
</A>
</BODY>
Andá a
|
Podemos borrar ese reborde azul tan desagradable? Sí señor, podemos.. Usando BORDER=0 como atributo adentro de la etiqueta <IMG> ...
<BODY BGCOLOR="#00FF00">
Andá a <A HREF="http://members.xoom.com/CinicMan">
<IMG
SRC="glorioso.jpg" WIDTH=100 HEIGHT=56 BORDER=0>
</A>
</BODY>
|
Andá a
|
Algo más acerca de los links... Nadie tiene porque enojarse si le hacés un link a su página en la tuya sin preguntarle antes. Además de que eso es lo que hace que la Web sea la Web , no deja de ser propaganda para su página.
Bueno, ahora que sabés como hacer links, se viene el discurso del pibe (sin cargo adicional ;-).... Si hay algo que odio es cuando busco información en algún buscador, y lo único que obtengo son páginas con cientos de links a otras partes, que a su vez tienen links que te hacen volver al principio, o no llegás a ningún lado...
Si estás haciendo tu página, por supuesto que está bien que agregues links si le agregan valor a tu página, o sirven para ampliar la información.... Pero tenés que tratar de evitar hacer una página que consista de links, links, más links y nada más que links....
Cuando incluyas imágenes en tu página, acordate que representan MUCHA información, y por lo tanto pueden ser lentas de cargar. Una manera de reducir el tamaño (me refiero al tamaño en Kb) es reduciendo sus dimensiones. Reducir el alto y el ancho a la mitad, resulta en una imagen que es 1/4 del original. O sea, va a tardar la cuarta parte en cargar! También podés tratar de reducir el número de colores en la imagen. Mirá los ejemplos de abajo
Dimensiones: 250x379 Nro. de colores: 256 Tamaño: 63 Kb. |
|
Dimensiones: 150x227 Nro. de colores: 256 Tamaño: 27 Kb. |
Dimensiones: 150x227 Nro. de colores: 64 Tamaño: 14 Kb. |
La edición gráfica fue hecha con el Photo Line 5.0 versión Shareware.
Ok, lo admito. La primer imagen es más grande, más linda y de mejor calidad. Pero pensalo de esta manera: si tu página toma 2 años para bajar, probablemente tus visitantes se van a ir, y no van a ver nada .
Para darte una idea de cuanto se puede reducir el tamaño de una imagen, probá el GIF Optimizer abajo. Le mandás tu imagen, y vuelve progresivamente más "optimizada". El GIF Optimizer no es parte de este tutorial, por cierto. Es un programa que reside en otra computadora. Tenés que estar conectado para usarlo.
Otra opción(y la mejor, en mi opinión), si tu página contiene muchas imágenes grandes, es proveer "muestras" (thumbnails) que estén linkeadas a una versión más grande de esa imagen. Digamos que quiero mostrar tres imagenes muy bonitas de, digamos, mis novias (sí, claro!)
|
|
|
| Hacé click arriba para ver la imagen completa | ||
Lo primero que tenés que hacer es cargar tu editor gráfico, y hacer versiones chiquititas de tus imágenes. También ayudaría que le reduzcas la cantidad de colores (la calidad que perdés es poca). Esto de hacer versiones más pequeñas es importante. He visto varias veces que algunos quieren hacer thumbnails simplemente reduciendole el tamaño adentro de la etiqueta <IMG> . Lo que hace esto es cargar TODA la imagen grande (no hay ganancia de tiempo de carga), y luego embutir esa imagen en el espacio que le dieron. ESO NO SIRVE. Tenés que hacer una copia más pequeña de la imagen, y usarla como link a la grande.
Vamos a hacer una de muestra. Creo que me siento como para usar a Pam.... (la de la izquierda, en caso de que haya algún desubicado en este Universo que no sepa cual es). Grabá las dos imagenes (la completa y la reducida) en tu carpeta de trabajo. Una vez más, tenés que usar el click derecho & Save Image As .
Empecemos con la etiqueta <IMG> .
<BODY BGCOLOR="#00FF00">
<IMG SRC="t_novia1.gif" WIDTH=115 HEIGHT=82>
</BODY>
|
Agregá tus etiquetas <A> .
<BODY BGCOLOR="#00FF00">
<A>
<IMG SRC="t_novia1.gif" WIDTH=115 HEIGHT=82>
</A>
</BODY>
|
|
Agregá el URL y bingo, ya está!
<BODY BGCOLOR="#00FF00">
<A
HREF="novia1.jpg"
><IMG SRC="t_novia1.gif"
WIDTH=115 HEIGHT=82></A>
</BODY>
|
|
Podés, si querés, eliminar el reborde azul. Aunque, puede que quieras dejarlo para que tus visitantes sepan que hay un link. Tu decisión.
<BODY BGCOLOR="#00FF00">
<A HREF="novia1.jpg"><IMG SRC="t_novia1.gif" WIDTH=115
HEIGHT=82
BORDER=0
></A>
</BODY>
|
|
Otra forma de hacer links es hacer links no a una página, sino a una parte específica de una página. Hacé click acá para ser mágicamente transportado a donde empezamos a hablar de los URLs. Ya que va a hacerse complicado explicarlo mediante un ejemplo, voy a tratar de hacerlo lo mejor que pueda explicando como se hace.
Primero empezá eligiendo el lugar al que querés que la gente sea transportada. Elegí una palabra (o lo que se te ocurra) y atrapala entre etiquetas <A> .
<A> Agregá </A> la dirección y listo!
Ahora dale un nombre a ese lugar
<A NAME="arriba" >Agregá</A> la dirección y listo!
Lo que acabás de hacer es marcar ese lugar. Ahora podés hacer
referencias a él.
Ahora vamos a crear el link.
Hacé click
<A>
acá
</A>
para ser mágicamente transportado...
Agregá el documento al cual te referís...
Hacé click <A HREF="leccion04.htm" >acá</A> para ser mágicamente transportado...
Por último, agregá la etiqueta NOMBRE ...
Hacé click <A HREF="leccion04.htm #arriba ">acá</A> para ser mágicamente transportado...
Y ya está!! No es mandar un hombre a la luna tampoco, no?
| Así que querés hacer una Página WEB! | ||
|
Lecciones
Intro - 1 - 2 - 3 - 4 - 5 - 6 |
||
| Principiantes | Tutorial de Tablas | Tutorial de Frames |
|