Title: enlaces
Course: Ciencias de la computación 1º Bachillerato

Enlaces

Como hemos visto, la estructura de las páginas web es ramificada, no lineal como la de un libro. Lo que permite la ramificación son los hipervínculos, esto es determinadas zonas que al pulsar sobre ellas nos envían a otra página o a otra parte dentro de la misma página.

Etiquetas

La etiqueta de vínculo es <a> y la de cierre </a>. La zona englobada entre ambas etiquetas será la que el navegador muestre zona activa que va a permitir dirigirnos al destino al pinchar sobre ella. Necesita un atributo href="ubicación del enlace" con la ruta al destino del enlace para indicar a dónde debe dirigirse el navegador. De forma que el mínimo códico html para hacer un hipervículo será:

<a href="destino">texto activo</a>

Zona activa:

La zona activa es la parte de la página que nos conducirá al destino al pinchar sobre ella. Puede ser un texto o una imagen

Un ejemplo con este código que nos dirige a una página de ejemplo sería: texto activo

Ubicación del enlace.

La página que el navegador intentará cargar cuando pinchemos sobre el texto activo, puede ser otra página de nuestro sitio, otra zona de la misma página, una página web que esté en la red o una dirección de correo electrónico.

Ruta relativa

Cuando el destino es otra página de nuestro sitio, lo normal es darle la ruta relativa, esto es dónde está la página desde la direción de la página de origen. Para que un editor web pueda realizar bien esa acción, es imprescindible que la página de origen y la de destino se hayan guardado ya en la localización de carpetas definitiva en el momento de realizar el vínculo.

Ruta absoluta

Cuando el destino es una dirección de internet, se debe usar una ruta absoluta que será la url (el texto que aparece en la barra de direcciones del navegador) de ese recurso de internet. En ese caso, la ruta debe enpezar por http:// o https://
A veces es interesante usar rutas absolutas a recursos que están dentro de nuestro sitio, como por ejemplo los vínculos a las hojas de estilos. En ese caso, también las rutas tendrán esta forma: http://servidor/ruta_absoluta.
Nunca se deben usar rutas absolutas que empiecen por file://. Porque en ese caso va a intentar buscar el destino en nuestro ordenador y no en el servidor. El público de internet no podría llegar al enlace.

Abrir en página nueva

Si queremos que un enlace se abra en una ventana nueva, debemos añadir a la etiqueta de apertura el atributo target="_blank"

Cuando se diseña una página hay que pensar en el usuario que vaya a navegar por ella. Si el enlace se abre en la misma página, sustituyendo a la de origen, si el usuario quiere volver, deberá pulsar en los botones de retroceder en el navegador, a menos que le hayamos puesto otros vínculos en la página de destino que nos permitan volver a la inicial. Esto puede dificultar la navegación sobre todo cuando queremos retroceder varias páginas atrás. otro prpblema es que si el usuario cierra la ventana, pierde la dirección de origen.

Abrir el vínculo en una ventana nueva tiene la ventaja de que no perdemos el origen aunque se cierre la ventana de destino. Pero puede tener el inconveniente de que se abrán demasiadas ventanas en vínculos profundos.

Q: Tenemos la siguiente estructura de carpetas
[Image: mundo]

En cada carpeta de un país hay un archivo .html con el nombre del pais. En la carpeta mundo hay un documento llamado index.html que tienen enlaces a todos los paises.
Escribe el código de la página index.html que llevaría a francia.html en una ventana nueva al pulsar sobre la palabra Francia
A: Francia

Q: Escribe el código necesario para que al pinchar en la palabra google se vaya a www.google.com
A: google / google

Q: Tenemos la siguiente estructura de carpetas
[Image: mundo]

En cada carpeta de un país hay un archivo .html con el nombre del pais. En la carpeta mundo hay un documento llamado index.html que tienen enlaces a todos los paises.
Escribe el código de la página index.html que llevaría a marruecos en una ventana nueva al pulsar sobre la palabra Marruecos
A: Marruecos

Q: En este enlace encontraras unas carpetas con unos archivos html.
Escribe el código necesario para que haya un enlace en index en el que al pinchar sobre la palabra Primates vayamos al html de los primates en una ventana nueva
A: Primates

Q: En este enlace encontraras unas carpetas con unos archivos html.
Escribe el código necesario para que haya un enlace en index en el que al pinchar sobre la palabra Serpientes vayamos al html de las serpientes
A: Serpientes