Vínculos

La principal característica de las páginas web es la facilidad para pasar de unas páginas a otras con un simple click. Esto se consigue en lenguaje Html con la etiqueta <a> con el siguiente formato:

`<a href="destino"> </a>`
`href="destino"`	Aquí se escribe la página html o el archivo de destino. `<a href="http://www.elpais.es">El País</a>` Vínculo a la página web del periódico El País `<a href="index.htm">index</a>` Vínculo a la página `index.htm` dentro de nuestra web `<a href="mailto:tutorialhtml@terra.es"> Enviar e−mail</a>` Envía un e-mail a la dirección indicada `<a href="foto.jpg">Foto</a>` Vínculo a la imagen `foto.jpg`
Atributos opcionales
`target="opción"`	Indica donde se abrirá el vínculo. Se utiliza sobre todo cuando la página está dividida en cuadros. De esto hablaremos más tarde. Los posibles valores son: `target="nombre"` - cuando la página tiene cuadros abre el vínculo en el cuadro `nombre` `target="_self"` - abre el vínculo en el mismo en el que se encuentra. Es el valor por defecto si no se indica nada `target="_top"` - abre el vínculo en la ventana del navegador original sin cuadros `target="_parent"` - abre el vínculo en el cuadro padre inmediatamente superior al actual, equivale a `_self` si no tiene padre. `target="_blank"` - abre el vínculo en una nueva ventana del navegador
`title="texto"`	Muestra una breve descripción del vínculo, que es visible cuando pasamos el cursor por encima. Prueba con el siguiente para ver el efecto: Foto
`name="texto"`	Crea un punto de inserción asignando un nombre para posteriormente poder hacer un vínculo a este punto de la página. Si se utiliza este atributo no podemos utilizar href y viceversa. Más abajo se explica con detalle.

Actividad 7.1

Edita la página agua.htm que creaste en la actividad 4.4
Añade al final del documento una línea horizontal, y a continuación escribe la palabra fuego
Asigna a esta palabra fuego un vínculo a la página fuego.htm
Guarda la página
Edita la página fuego.htm que creaste en la actividad 5.4
Añade al final del documento una línea horizontal, y a continuación escribe la palabra agua
Asigna a esta palabra agua un vínculo a la página agua.htm
Guarda la página y ábrela en el navegador, pulsa el vínculo creado al final de cada página para canviar de una a otra

Para escribir vínculos, igual que para insertar imágenes, hay que tener en cuenta la ruta de acceso al archivo correspondiente y escribirla correctamente, de otro modo el navegador podría no encontrarla.
Hasta ahora las imágenes y vínculos que hemos creado estaban dentro de la misma carpeta donde se encontraba la página desde donde llamamos, y así sólo necesitábamos escribir el nombre del archivo. Sin embargo en muchas ocasiones esto no será así.

Árbol de carpetas Imaginemos la estructura de la izquierda para nuestra web. Las distintas subcarpetas se indicarán en los vínculos separadas por la barra inclinada /. Veamos algunos posibles casos:

`<a href="Fotos/foto.htm">`	Abre el archivo `foto.htm` que se encuentra dentro de la carpeta `Fotos` cuando llamamos desde una página ubicada en la carpeta `Web`
`<a href="../Fotos/foto.htm">`	Abre el archivo `foto.htm` que se encuentra dentro de la carpeta `Fotos` cuando llamamos desde una página ubicada en la carpeta `Sonidos`
`<img src="Fotos/arbol.gif">`	Inserta la imagen `arbol.gif` que se encuentra dentro de la carpeta `Fotos` en una página ubicada en la carpeta `Web`

Las páginas fuera de nuestra web se indican precedidas de http:// y usando el mismo criterio para las subcarpetas

<a href="http://www.mallorcaweb.net/spaais">SPAAIS</a>

Nota: A menudo las páginas llevan el símbolo ~, éste se obtiene con la combinación de teclas Alt+126

Otra posibilidad es crear un vínculo a un punto concreto de la página. Para ello antes hemos tenido que crear una etiqueta en este punto mediante <a name="nombre">...</a>.
Al principio de esta página por ejemplo hemos añadido <a name="arriba"></a>. Para hacer un vínculo a este punto escribiremos el nombre de la etiqueta, en nuestro caso arriba, precedido del símbolo # después del nombre del archivo.
Así pulsando el vínculo siguiente <a href="vinculos.html#arriba">superior</a> iremos a la parte superior de esta página.
Al tratarse de la misma página hubiésemos podido prescindir de escribir el nombre del archivo y escribir sólo <a href="#arriba">superior</a>

La mayoría de estas lecciones llevan al principio un breve índice de contenidos de la lección con vínculos dentro de la misma página. Este es un método muy eficaz para poder moverse dentro de páginas con bastante contenido.

Las hojas de estilo en cascada permiten dinamizar los vínculos definiendo un formato distinto según sea su estado. Se permiten cinco estados diferentes. Para ver un ejemplo y su significado aquí se especifica el estilo utilizado en estas páginas donde sólo cambia el color:

Estilo	Significado
`a:link {color: Navy;}`	Estilo de un vínculo que aún no ha sido visitado
`a:visited {color: Navy;}`	Estilo de un vínculo que ya ha sido visitado
`a:hover {color: Blue;}`	Estilo de un vínculo sobre el que pasamos el cursor
`a:active {color: Red;}`	Estilo del vínculo activo
`a:focus {color: Red;}`	Estilo del vínculo sobre el que se encuentra el focus
Fíjate por ejemplo como cambia este vínculo al pasar el cursor por encima, se han usado cuatro propiedades diferentes, ¿sabrías decir cuales son? Arriba En el estilo para el menú de la dercha hamos añadido además la propiedad `a {text−decoration: none;}` con lo que eliminamos el subrayado.

Actividad 7.2

Edita la hoja de estilos en cascada miestilo.css que creaste en la actividad 5.4
Añade estilos personalizados para las distintas opciones de la etiqueta <a>
Guarda la hoja de estilos
Abre la página fuego.htm y observa si los estilos que acabas de definir se corresponden con lo que pretendías. Pulsa el vínculo agua.htm y observa las diferencias con el modo de verse los vínculos en esta otra página

7. Vínculos

Crear un vínculo

Vínculos dentro de una página

Dinamizar los vínculos