aulambra.com - Tecnologias de Internet
 
 

Lista de Correo

Para suscribirte a la lista de correo dejanos tu e-mail y preferencias en tecnologías.

Seguir >>

Valid HTML 4.01!
Valid CSS!

Web 2.0

Guardar... Compartir...
EMAIL: PASSWORD:
Darme de alta como usuario | Se me ha olvidado la contraseña

volvermarkup/html/Enlazando p?ginas

Links

Son lo que llamamos enlaces. Una parte importante del documento HTML son los links, ya que estos nos permiten desplazarnos de unas páginas a otras e incluso dentro de una misma página.

Los colores por defecto de los links son los que haya establecidos en el navegador. Por ejemplo en el IExplorer son el azul cuando el link no ha sido accedido y rojo cuando no lo ha sido, aunque esto se puede variar como ya vimos en el capitulo de colores.

La forma genérica de utilizar un enlace es mediante las etiquetas <A> y </A>. Dependiendo de como sea el enlace tenemos:


Enlace a otra página

El código para realizar esto es:

<a href="página de destino"> texto </a>

La página de destino puede estar dentro del mismo servidor, por ejemplo:

<a href="/graficos/bitmaps.htm"> texto </a>

o puede estar en otro servidor:

<a href="protocolo://servidor/página de destino"> texto </a>

Dependiendo del protocolo tendremos un tipo de conexión u otro. Los más utilizados son http (HyperText Transfer Protocol), ftp (File Transfer Protocol), mailto, luego tenemos otros como gopher, telnet, news,...

Nos podríamos encontrar con:

<a href = "http://www.greenpeace.org> GreenPeace </a><br>
<a href = "ftp://ftp.gui.uva.es"> Informática (UVA) </a>

Cuyo resultado sería:

GreenPeace
Informática (UVA)

Uno de los más utilizados es el que se utiliza para enviar correo electrónico. Es típico de toda página HTML el añadir al final de página la dirección de nuestro correo electrónico para que al pulsar sobre ella podamos enviar un mensaje en el momento y evitarnos el usar un programa que mande estos mensajes. Esto lo haremos mediante el siguiente código:

<a href="mailto:vcuervo@iname.com">vcuervo@iname.com</a>

El resultado sería el siguiente:

vcuervo@iname.com


Enlace a una misma página

En primer lugar, para poder acceder a otras partes de la página hay que señalarlas, esto lo hacemos mediante la etiqueta:

<a name="nombre"> texto </a>

Posteriormente tenemos que crear el enlace hacia esa parte de la página, mediante la siguiente sintaxis:

<a href="#nombre"> texto del enlace </a>

Incluso podemos acceder a una parte de otro documento HTML distinto, por ejemplo:

<a href="http://www.microsoft.com#vbasic"> texto del enlace </a>


Enlaces en la parte superior de la página

Una de las cosas que más se suelen hacer es, la de en una parte determinada del documento, añadir todos los enlaces del documento, ya sean en la misma página o en distinta. El código podría ser:

<a href =  "#">Ir Arriba</a> |
<a href="html/img/documento_img.htm">Imágenes</a> | 
<a href="html/img/documento_img.htm#img">Comando IMG</a>

El resultado sería el siguiente:

Ir Arriba | Imágenes  | Comando IMG

Enlaces que nos importan o muestran cosas

Si queremos crear un enlace que nos importe una cosa, lo más común es una imagen, aunque podremos traer cualquier cosa, utilizaremos el código similar al que sigue:

<a href="ace.jpg">Foto de Ace Ventura</a>
Foto de Ace Ventura

Enlaces con imágenes

Si bien lo que hemos visto hasta ahora han sido enlaces mediante textos, también podemos hacer enlaces mediante imágenes. Para conseguir esto lo único que deberemos hacer es sustituir el espacio dedicado para el texto por la sintaxis que carga la imagen, por ejemplo:

<a href="imagenes.htm"><img src="imagen.jpg"></a>

Lo más normal es utilizar imágenes como enlaces para visualizar una imagen más grande, por ejemplo:

<a href="dino.gif"><img src="dino2.gif"></a>
Su resultado es el siguiente:

Al introducir este código, la imagen saldrá rodeada de un borde, del color del enlace (link), el tamaño de este borde lo podemos modificar mediante el parámetro border, de la siguiente forma:

<a href="dino.gif"><img src="dino2.gif" border=0></a>

Su resultado es el siguiente:


O bien:

<a href="dino.gif"><img src="dino2.gif" border=4></a>
Su resultado es el siguiente:

arriba


"Muchas veces me moria pensando que no iba verte.
Pero moria la muerte cada vez que te veia". E.Galeano.


© Copyright 2001-2006. Víctor Cuervo
aulambra.com | Linea de Codigo