TEMA 8: Enlaces

INTRODUCCIÓN

Quizá una de las características del lenguaje html que más ha influido en la enorme difusión de la WWW ha sido precisamente su capacidad para hacer enlaces de Hipertexto. Los enlaces permiten a los visitantes de las páginas web teletransportarse de un documento a otro de forma instantánea y sin que importe en absoluto su ubicación física.

Puedes estar viendo un documento ubicado en un ordenador en EEUU, y al pulsar un enlace, accederás a un documento situado en un ordenador en Australia, y con un solo clic.

CÓMO SE HACE UN ENLACE

Para hacer un enlace:

<a href=”dirección”> Para abrir el enlace
</a> para cerrar el enlace.

Nos quedaría así:

<a href="dirección_a_la_que_apunto">Texto</a>

TIPOS DE ENLACES

Fundamentalmente tenemos:

  • Enlaces con otras páginas
    • Enlaces con páginas fuera de nuestro Web Site
    • Enlaces dentro de nuestro Web Site
  • Enlaces dentro de la misma página (Anclas)
  • Enlaces con una dirección de email

También hay enlaces ftp, usenet pero son demasiado poco utilizados como para incluirlos en este manual introductorio.

ENLACES CON OTRAS PÁGINAS

Antes que nada aclaremos unos conceptos:

Llamamos página a cada documento html independiente
Llamamos website a un conjunto de páginas relacionadas entre sí.

a)Enlaces con páginas fuera de nuestro Web Site:

Supongamos que queremos hacer un enlace con la página de la ONU.

Sabemos que la página web de la ONU está en http://www.onu.org

Así que cogemos nuestra etiqueta y le ponemos esta dirección:

<a href ="http://www.onu.org">Organización de las Naciones Unidas</a>

Nos quedaría así: Organización de las Naciones Unidas, sólo que en color azul y subrayado que es cómo salen los enlaces por defecto, cuando todavía no hemos aplicado estilos.

¿Y si en vez de querer enlazar con la página principal queremos enlazar con una sección concreta? Pues exactamente igual:

<a href ="http://www.fao.org/food/default-s.htm">Organización de las Naciones Unidas (FAO)</a>

Nos quedaría así:Organización de las Naciones Unidas (FAO)

Ver los ejemplos, en una página sin estilos

Ver los ejemplos, en una página sin estilos

Este tipo de enlaces, en los que utilizamos la dirección completa de un documento se llaman enlaces absolutos. Para más información sobre las URLS y su funcionamiento podéis consultar el artículo:

http://www.tomatoma.ws/articulo.php?topic_id=27&forum_id=10

b) Enlaces con paginas dentro de nuestro Web site

Para enlazar archivos dentro de nuestro propio site, lo hacemos igual que como lo hacíamos para insertar imágenes. Volvamos a utilizar nuestra imagen de las carpetas:

Image

Los dos documentos están en la misma carpeta

<a href ="pagina_enlazada.html">Texto</a>

El documento que incluye el enlace está en la carpeta a y el documento enlazado está en la carpeta b

<a href ="b/pagina_enlazada.html>Texto</a>

El documento que incluye el enlace está en la carpeta b y el documento enlazado está en la carpeta a

<a href ="../pagina_enlazada.html">Texto</a>

El documento que incluye el enlace está en la carpeta e y el documento enlazado está en la carpeta a

<a href ="../pagina_enlazada.html">Texto</a>

El documento que incluye el enlace está en la carpeta i y el documento enlazado está en la carpeta a

<a href ="../../pagina_enlazada.html">Texto</a>

El documento que incluye el enlace está en la carpeta a y el documento enlazado está en la carpeta i

<a href ="b/g/i/pagina_enlazada.html">Texto</a>

Ejercicio: Captar el concepto de los enlaces relativos es fundamental por lo que vamos a hacer un ejercicio.

Para realizar este ejercicio necesitaréis unos archivos. He preparado un archivo zip que contiene todos los archivos y páginas html que hemos desarrollado hasta ahora, en sus respectivas carpetas numeradas de acuerdo con la lección a la que pertenecen. Al descomprimirlo, os creará una carpeta llamada “html” que contendrá varias subcarpetas: 3, 4, 5 y 6.

Vamos a crear un archivo “indice” con enlaces a todas las páginas que hemos ido haciendo. Así de paso repasaremos las listas.

En la carpeta llamada “6” crea un nuevo archivo html y trata de imitar este resultado. Y ya sabéis para ver el código correcto, menú ver/código fuente.

ANCLAS (Enlaces con paginas dentro de de un mismo documento)

Cuando tenemos documentos muy largos, las anclas nos permiten hacernos un índice y saltar de un lado a otro del documento. Para poder hacerlo tenemos que crear primero las “anclas” (o puntos de destino) y después los enlaces a dichas anchas.

Para definir un ancla, un punto de destino, utilizamos la etiqueta <a name=”destino”>loquesea</a>

Por ejemplo:

<a name="introduccion">Introducción</a>

Para ir a esa sección concreta de la página haremos en enlace de la siguiente manera:

<a href="#introduccion">Introducción</a>

Más de una vez habréis visto un enlace en el que pone “ir a la parte superior” o “arriba”, pues exactamente así cómo se hace. En la parte de arriba del documento se suele incluir un ancla, sin texto, para que quede invisible, tal y como mostramos.

<a name="arriba"></a>

Luego, a lo largo del texto, siempre que queramos que el usuario pueda volver a la parte superior de la página sin tener que utilizar la barra de scroll pondremos un enlace de la siguiente manera:

<a href="#arriba">Volver a la parte superior</a>

Ejercicio: Os he preparado un archivo, en el que ya tenemos puesto un ancla en “introducción”, y un ancla para volver a la parte superior. El ejercicio consiste en completar todo el indice, y después de cada sección añadir un enlace que nos haga volver a la parte superior. El ejercicio terminado para que podáis ver el código correcto.

Enlaces con una dirección de email

Los enlaces con una dirección de email son esos que cuando los pulsas se te abre el programa de correo con la dirección, veamos cómo se hace:

<a href="[color=blue]mailto:direccion@dominio.net[/color]">escribidme</a>

EL ATRIBUTO TITLE

A veces, por motivos de espacio, el texto explicativo de los enlaces, es muy corto por lo que damos poca información, el atributo title, nos sirve para ampliar información, su función es similar a la que vimos en el atributo ALT para las imágenes, nos permite amplicar la información y aparece al pasar el ratón por encima.

<a href="imágenes.html" title="Mi primera prueba cutre de incluir imágenes en un documento html">Imágenes</a>

Para ver cómo funciona, cambiaremos los enlaces del artículo anterior para incluir en ellos el atributo title. Abre el archivo ejercicio.html de la carpeta 6 y guardalo como title.html, ponle el atributo title a todos los enlaces y visualizaló en el navegador.

A primera vista el resultado será el mismo que antes, pero deja el ratón un segundo encima y ¡milagro! Aparece tu pista en un cartelito.

UTILIZAR IMAGENES EN LOS ENLACES

Para utilizar una imagen en el enlace, en lugar de texto, es fácil, simplemente en el lugar en que pondríamos el texto ponemos la imagen.

<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html lang=”es”>
<head>
<title>Ejemplo de enlaces</title>
</head>
<body>
<h1>Ejercicio de enlaces</h1>
<a href=”http://www.mp3.com/&#8221; title=”Vamos a visitar sitios musicales”><img src=”discovinillo.jpg” width=”200″ height=”200″ alt=”Vamos a visitar sitios musicales” ></a>
<p>&nbsp;</p>
</body>
</html>
Comprobad el resultado

Cómo podéis ver, para indicar que se trata de un enlace, la imagen aparece rodeada de un borde azul. Para librarnos de este borde, tenemos que definir el atributo “border=0” a la imagen. Este atributo en XHTML 1.0 ya no existe pues se trata de una característica visual, y debemos hacerlo mediante css, pero de momento vamos a verlo para que veáis como funciona, ya que os lo váis a encontrar muchas veces. Rehacemos el código anterior sin el borde.

<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html lang=”es”>
<head>
<title>Ejemplo de enlaces</title>
</head>
<body>
<h1>Ejercicio de enlaces</h1>
<a href=”http://www.mp3.com/&#8221; title=”Vamos a visitar sitios musicales”><img src=”discovinillo.jpg” width=”200″ height=”200″ border=”0″ alt=”Vamos a visitar sitios musicales” ></a>
<p>&nbsp;</p>
</body>
</html>
Comprobad el resultado

Tema 7 –  Indice –  Tema 9

Leave a Reply

Please log in using one of these methods to post your comment:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s