| 2002 a 2006 |
Ángel
R. Puente Pérez |
 |
 |
 |
Es una de las herramientas más interesantes de los documentos html. La sintaxis para establecer un enlace es: <a href="destino">texto</a>
Donde destino es el documento con el que se enlaza y texto es la palabra o palabras que, al pulsar, nos llevan a ese destino (también puede ser una imagen).
15.1.- Vínculos a otro documento del mismo sitio.
Nuestro sitio estará formado por varios archivos generadores de varios documentos. Los documentos tendrán la extensión .html (o .htm). Para establecer el vínculo escribiremos sencillamente el nombre del documento en el destino y, entre las etiquetas de apertura y cierre la palabra o palabras que activarán el vínculo.
Como ejemplo vamos a establecer un enlace a la primera página de este sitio (primer documento) cuyo archivo tiene como nombre index.htm
<html> <head> <title> Vínculos 1 </title> </head> <body> <center> <a href="index.htm"> Ir al inicio de este curso </a> </center> </body> </html> |
15.2.- Vínculos a otro documento externo al sitio.
En este caso en destino deberemos escribir toda la dirección URL del sitio.
Vamos a establecer un enlace a la página del buscador Google cuya dirección URL es http://www.google.es
<html> <head> <title> Vínculos 2 </title> </head> <body> <center> <a href="http://www.google.es"> Ir a Google </a> </center> </body> </html> |
Muchas veces puede resultar interesante escribir la propia dirección URL como activador del vínculo:
<html> <head> <title> Vínculos 3 </title> </head> <body> <center> Ir a Google:<br> <a href="http://www.google.es"> http://www.google.es</a> </center> </body> </html> |
15.3.- Vínculos a otra parte del mismo documento.
A veces cuando el documento es muy extenso conviene establecer formas rápidas para subir o bajar a una parte determinada del documento.
Para realizar esto, primero hay que establecer un ancla o marca en la/s parte/s del documento a los que queremos acceder de forma rápida.
La sintaxis del ancla es <a name="ancla1"></a> poniéndolo en el punto de destino. No hace fata que haya nada entre la etiqueta de apertura y cierre.
En el punto activador escribiremos <a href ="#ancla1"> Ir a la parte tal </a>.
Como ejemplo vamos a movernos por las partes anteriores a esta línea del punto en el que estamos.
En primer lugar hemos nombrado las anclas con el mismo nombre que tienen los diferentes apartados (cambiando el punto por un guión bajo) a los que vamos a desplazarnos:
| código |
|
| Ir al apartado 15 | <a href="#15>Ir al apartado 15</a> |
| Ir al apartado 15.1 | <a href="#15_1>Ir al apartado 15.1</a> |
| Ir al apartado 15.2 | <a href="#15_2>Ir al apartado 15.2</a> |
| Ir al apartado 15.3 | <a href="#15_3>Ir al apartado 15.3</a> |
15.4.- Vínculos a una parte concreta de otro documento de nuestro sitio.
Se pueden combinar este último tipo de enlaces con el vínculo a otro documento de nuestro sitio.
La sintaxis sería <a href="paginax.htm#ancla"> Ir al apartado tal de tal página </a>
<html> <head> <title> Vínculos 4 </title> </head> <body> <center> <a href="diez.htm#13_2"> Ir al apartado 13.2 de este curso </a> </center> </body> </html> |
15.5.- Vínculos de correo electrónico.
Vamos a ver los enlaces a una dirección de correo electrónico. Cuando el navegante pinche sobre el activador del vínculo, se abrirá el programa de correo con la dirección del destinatario ya escrita en el mensaje.
La sintaxis es <a href="mailto:login@servidor.es"> Mándame un mensaje </a>
<html> <head> <title> Vínculos 5 </title> </head> <body> <center> <a href="mailto:apuente@roble.pntic.mec.es"> Dime lo que piensas de este curso </a> </center> </body> </html> |
15.6.- Imagen como vínculo a otro documento.
En lugar de texto podemos utilizar una imagen como vínculo.
En primer lugar deberemos escribir la etiqueta de apertura del vínculo y luego la etiqueta de inclusión de la imagen cerrando, posteriormente, la etiqueta del vínculo.
Para este tipo de vínculos se suelen emplear pequeñas imágenes, aunque, a veces, también se utilizan imágenes de gran formato (sobre todo en los portales de los sitios).
<html> <head> <title> Vínculos 6 </title> </head> <body> <center> Visita la página de TERRA:<P> <a href="http://www.terra.es"> <img src="imag/logo_terra.gif"> </a> </center> </body> </html> |
Para eliminar este borde tan antiestético que se coloca alrededor de la imagen tenemos el atributo border="0"
<html> <head> <title> Vínculos 7 </title> </head> <body> <center> Visita la página de TERRA:<p> <a href="http://www.terra.es"> <img src="imag/logo_terra.gif" border="0"> </a> </center> </body> </html> |
| Si deseas profundizar en este tema, pulsa el botón... |  |
|
|
|
| 2002 a 2006 |
Ángel
R. Puente Pérez |
