Los enlaces, una de las características más importantes de la web, se implementan con la etiqueta <a>.
Enlace a una página externa
Para enlazar a una página o archivo que se encuentra en otro servidor utilizamos <a> de esta manera:
<a href=http://www.algo.com title="Descripción">
Texto del enlace
</a>
El atributo href contiene la URL a la que queremos enlazar. Es importante no olvidar el protocolo (en esta caso http://) al escribir la URL para que funcione.
En title se escribe una descripción de la página que enlazamos, que se verá en la mayoría de los navegadores al pasar el mouse por encima del link. El texto del enlace es independiente del título y se deben confundir.
Por ejemplo:
<a href="http://www.barrapunto.com" title="La información que te interesa">Barrapunto</a>
Enlace a una página local
Si queremos enlazar a una página que está dentro de nuestro servidor, necesitamos conocer la ruta (o path) desde la página donde está el enlace hasta el documento al que queremos enlazar.
Si el origen está en el mismo directorio que el destino, solamente escribimos el nombre del archivo así:
<a href="profile.html" title="Información sobre mí">Ficha personal</a>
En cambio, si el destino de encuentra en un subdirectorio, utilizamos la barra / para indicar el camino:
<a href="galeria/color.html" title="Galería color">Ver dibujos a color</a>
Y si el destino está ubicado en un directorio por encima, ponemos dos puntos y la barra ../ de esta manera:
<a href="../index.html" title="Página principal">Volver al inicio</a>
Enlace a una dirección de e-mail
Si colocamos mailto: en el atributo href, seguido de una dirección de correo electrónico, crearemos un enlace que, al hacer clic sobre él, abrirá automáticamente una ventana del cliente de correo que tenga el usuario para que escriba un mensaje a esa dirección.
Por ejemplo:
<a href="mailto:leia@alianza.net" title="E-mail de la Princesa Leia">Leia</a>
Anclas
Con las anclas (anchor) podemos hacer un enlace a una posición concreta de la página. Funcionan así:
Primero tenemos que crear el ancla. Esto se hace agregando el atributo id, que se puede utilizar en prácticamente cualquier etiqueta.
Por ejemplo:
<h3 id="comentarios">Lista de comentarios</h3>
Después tenemos que crear un link que no lleve a esa ancla. Para esto, ponemos en href el ID precedido de una almohadilla o numeral #, así:
<a href="#comentarios" title="Lista de comentarios">Leer comentarios</a>
También se puede enlazar a un ancla que esté en otra página:
<a href="post005.html#comentarios" title="Lista de comentarios">Comentarios del post nº 5</a>
Las anclas son útiles para páginas muy extensas, como las FAQs que tienen un índice de preguntas con enlace al ancla correspondiente de su respuesta. También es habitual otro enlace en la respuesta que lleva a un ancla ubicada en el índice, para facilitar la navegación.
Para enlazar a una página o archivo que se encuentra en otro servidor utilizamos <a> de esta manera:
<a href=http://www.algo.com title="Descripción">
Texto del enlace
</a>
El atributo href contiene la URL a la que queremos enlazar. Es importante no olvidar el protocolo (en esta caso http://) al escribir la URL para que funcione.
En title se escribe una descripción de la página que enlazamos, que se verá en la mayoría de los navegadores al pasar el mouse por encima del link. El texto del enlace es independiente del título y se deben confundir.
Por ejemplo:
<a href="http://www.barrapunto.com" title="La información que te interesa">Barrapunto</a>
Enlace a una página local
Si queremos enlazar a una página que está dentro de nuestro servidor, necesitamos conocer la ruta (o path) desde la página donde está el enlace hasta el documento al que queremos enlazar.
Si el origen está en el mismo directorio que el destino, solamente escribimos el nombre del archivo así:
<a href="profile.html" title="Información sobre mí">Ficha personal</a>
En cambio, si el destino de encuentra en un subdirectorio, utilizamos la barra / para indicar el camino:
<a href="galeria/color.html" title="Galería color">Ver dibujos a color</a>
Y si el destino está ubicado en un directorio por encima, ponemos dos puntos y la barra ../ de esta manera:
<a href="../index.html" title="Página principal">Volver al inicio</a>
Enlace a una dirección de e-mail
Si colocamos mailto: en el atributo href, seguido de una dirección de correo electrónico, crearemos un enlace que, al hacer clic sobre él, abrirá automáticamente una ventana del cliente de correo que tenga el usuario para que escriba un mensaje a esa dirección.
Por ejemplo:
<a href="mailto:leia@alianza.net" title="E-mail de la Princesa Leia">Leia</a>
Anclas
Con las anclas (anchor) podemos hacer un enlace a una posición concreta de la página. Funcionan así:
Primero tenemos que crear el ancla. Esto se hace agregando el atributo id, que se puede utilizar en prácticamente cualquier etiqueta.
Por ejemplo:
<h3 id="comentarios">Lista de comentarios</h3>
Después tenemos que crear un link que no lleve a esa ancla. Para esto, ponemos en href el ID precedido de una almohadilla o numeral #, así:
<a href="#comentarios" title="Lista de comentarios">Leer comentarios</a>
También se puede enlazar a un ancla que esté en otra página:
<a href="post005.html#comentarios" title="Lista de comentarios">Comentarios del post nº 5</a>
Las anclas son útiles para páginas muy extensas, como las FAQs que tienen un índice de preguntas con enlace al ancla correspondiente de su respuesta. También es habitual otro enlace en la respuesta que lleva a un ancla ubicada en el índice, para facilitar la navegación.
Serviweb
Diseño web Murcia