9. Enlaces o vínculos.
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).
9.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 uno de los ejercicios que hemos ido haciendo:
Siendo el resultado:
al clicar sobre el enlace Ir al ejercicio 1 se me abrirá el archivo ejercicio1.html.
9.2. Vínculos a una página web externa al sitio.
En este caso en el 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
Siendo el resultado:
al clicar sobre el enlace Ir a Google se me abrirá la página web de Google .
9.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.
En el punto activador escribiremos <a href ="#ancla1"> Ir a la parte tal del texto </a>. Ancla1 es un nombre genérico que yo he puesto. Segun el ejercicio, deberemos cambiar este nombre por el adecuado.
La sintaxis del ancla es <a name="ancla1">Nombre de la parte tal del texto donde irá el ancla </a> poniéndolo en el punto de destino. No hace falta que haya nada entre la etiqueta de apertura y cierre.
9.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>
9.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>
Un ejemplo sería:
Siendo el resultado:
9.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).
Veamos cómo podemos hacer un enlace a Google desde su icono:
Siendo el resultado:
Recordad que la imagen tiene que estar en un sitio determinado (preferiblemente en una carpeta que se llame imágenes ), debiendo indicar su ubicación en la parte del código correspondiente (por ejemplo: <img src="imágenes/logo_google.jpg"> ).
Ejercicio 9. Enlaces 1.
A partir del texto (texto ejercicio9) que se te proporciona, debes crear una página web que tenga el mismo aspecto que la siguiente imagen:
Además, tienes que tener en cuenta los siguientes requisitos:
Para ver la solución del ejercicio 9, escribe el código que te facilitará el profesor:
Contraseña:
Ejercicio 10. Enlaces2.
Crear el archivo "Ejercicio10.html" :
Al pinchar en el enlace "Buscadores" se debe acceder (en la misma pestaña del navegador) al archivo buscadores.html (un archivo html nuevo):
En el documento "buscadores.html" , al pinchar sobre los enlaces "Bing" , "DuckDuckGo" y "Google" , hay que acceder respectivamente a los siguientes sitios web en nuevas pestañas (target="blank"):
Y haciendo clic en el enlace "aquí" , se tiene que volver a la página principal "Ejercicio10.html" .
Por otra parte, al pinchar en el enlace "Redes sociales" se debe acceder (también en la misma pestaña del navegador) al archivo redessociales.html (un archivo html nuevo):
En este caso, pinchando en "Facebook" , "Instagram" y "Twitter" , hay que abrir nuevas pestañas a los sitios web (target="blank"):
- Video explicativo:
Para ver la solución del ejercicio 10, escribe el código que te facilitará el profesor. En este caso, se compone de tres partes
Contraseña Parte 1:
Contraseña Parte 2:
Contraseña Parte 3: