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> , d onde 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:
9.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
Siendo el resultado:
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>.
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 siguiente:
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:
Y haciendo clic en el enlace "aquí" , se tiene que volver a la página "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 siguiente:
En este caso, pinchando en "Facebook" , "Instagram" y "Twitter" , hay que abrir nuevas pestañas a los sitios web:
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: