Enlaces en HTML

Los enlaces son los elementos que nos permiten navegar por las paginas HTML y son tan importantes que la web no tendría sentido sin ellos.

INTRODUCCION

Hasta aquí, hemos podido ver que una página web es un archivo HTML en el podemos incluir, entre otras cosas, textos formateados a nuestro gusto e imágenes. Del mismo modo, un sitio web podría ser considerado como el conjunto de archivos, principalmente paginas HTML e imágenes, que constituyen el contenido al que el navegante tiene acceso.

Sin embargo, no podíamos hablar de navegante o navegación si estos archivos HTML no estuviesen debidamente conectados entre ellos y con el exterior de nuestro sitio por medio de enlaces hipertexto. En efecto, el atractivo original del HTML radica en la posible puesta en relación de los contenidos de los archivos introduciendo referencias bajo forma de enlaces que permita un acceso rápido a la información deseada. De poco serviría en la red tener páginas aisladas a las que la gente no pueda acceder y desde las que la gente no pueda saltar a otras.

Un enlace puede ser fácilmente detectado por el usuario en una página. Basta con deslizar el puntero del ratón sobre las imágenes o el texto, y ver cómo cambia de su forma original transformándose por regla general, en una mano con un dedo señalador. Adicionalmente, estos enlaces suelen ir, en el caso de los textos, coloreados y subrayados para que el usuario no tenga dificultad en reconocerlos.

SINTAXIS DEL ENLACE

Para colocar un enlace, nos serviremos de la etiqueta <a>…</a>. Dentro de la etiqueta de apertura, deberemos especificar a sí mismo el destino del enlace. Este destino será introducido bajo forma de atributo, el cual lleva por nombre “href”.

<a href=’destino’>Contenido</a>

Siendo el “contenido” un texto o una imagen. Es la parte de la página que se colocara activa y donde deberemos pulsar para acceder al enlace. Por su parte, el “destino” será una página, un correo electrónico o un archivo.

ASPECTO DE LOS ENLACES

Mediante el HTML y las hojas de estilo CSS, podemos definir el aspecto que tendrán los enlaces en una página. Sin embargo, ya de manera predeterminada el navegador los destaca para que los podamos distinguir. Generalmente encontráremos a los enlaces subrayados y coloreados en azul, aunque esta regla depende del navegador del usuario y de sus estilos definidos como predeterminados.

En el caso de las imágenes que sirven de enlace, tradicionalmente aparecían encuadradas en un marco azul por defecto. Aunque ese estilo predeterminado también cambiara dependiendo del navegador y de hecho, en 2016, la mayoría de navegadores ya no ponen ese marcó azul, así que tenemos un ejemplo de cómo los estilos predeterminados pueden cambiar con el tiempo y con versiones del navegador.

Por ese incierto estilo predeterminado, siempre es interesante marcar por nosotros mismo s el estilo que los enlaces deben tener en nuestra página. Ese estilo, lo correcto es colocarlo en el código CSS, pero también se puede definir en la etiqueta <body>.

TIPOS DE ENLACE

En función del destino, los enlaces son clásicamente agrupados del siguiente modo:

ENLACES INTERNOS

Quizás enlaces internos pueda ser un poco ambiguo, porque podríamos pensar tanto en enlaces internos dentro del mismo sitio web, o enlaces internos dentro de la misma página. En este punto nos referimos a los enlaces que apuntan a un lugar diferente que apunta dentro de la misma página.

Este tipo de enlaces son esencialmente utilizados en páginas donde el acceso a los contenidos puede verse dificultado debido al gran tamaño del texto. Es un enlace poco habitual en páginas web como blogs o paginas comerciales que presentan un producto o servicio. Se encuentran más en páginas de referencia donde además el contenido está dividido en diversas opciones y queremos poder navegar entre esas secciones que se encuentran dentro del mismo archivo HTML. Otro uso habitual de los enlaces internos, es ofrecer al visitante la posibilidad de ir rápidamente al principio de la página.

Para crear un enlace de este tipo son necesario dos componentes:

Supongamos que queremos crear un enlace al final de la página. Lo primero será colocar nuestro enlace origen. Este enlace de origen es el que el usuario podrá hacer click.

<a href=’#abajo’>Ir abajo</a>

Como podéis ver el contenido del enlace es el texto “ir abajo” y el destino “abajo”, es un punto de la página que todavía no hemos definido. Ojo al símbolo “#”, es el quien especifica al navegador que el enlace apunta a una sección en particular, a un punto interno dentro de la misma página.

En segundo lugar, hay que generar un enlace en el destino al que hemos llamado “ancla”. Este enlace no llevara contenido, puesto que no queremos que nadie lo pulse, sino que nos sirva de ancla. Tampoco llevara el atributo “href”, porque no tiene que apuntar a ningún lugar, sino que le apuntaran a él. Para poder distinguirlo de otros posibles enlaces realizados dentro de la misma página, a cada ancla se le asigna un nombre por medio del atributo “name”.

<a name=’abajo’></a>

También existe la posibilidad de navega hacia partes concretas de una página desde enlaces ubicados en otros documentos. Para implementar este tipo de enlaces basta con implementar en el atributo “href” del vínculo de origen, el nombre del documento HTML de destino seguido del carácter “#” y del nombre de referencia (valor del atributo “name”) del ancla.

ATRIBUTOS DE LOS ENLACES

Los principales atributos que se suelen utilizar en la etiqueta <a> son:

ENLACES LOCALES

Se trata de un tipo de enlace mucho más común en el día a día del desarrollo. De hecho, es el tipo de enlace que más se produce en general. Estos enlaces locales nos permiten relacionar distintos documentos HTML que componen un sitio web. Gracias a los enlaces locales, podremos convertir varias páginas sueltas en un sitio web completo, compuesto de varios documentos.

<a href=’archivo.html’>Contenido</a>

Por regla general, para una mejor organización, los sitios suelen estar ordenados por directorios. Estos directorios suelen contener diferentes secciones de la página, imágenes, scripts, estilos, etc. Es por ello que en muchos casos no nos valdrá con especificar el nombre del archivo, sino que tendremos que especificar además el directorio en el que nuestro “archivo.html” está alojado.

Una serie de indicaciones seria:

Por ejemplo, en el documento “index.html” se desea insertar un enlace al documento “doc1.html”. Al estar ambos documentos en el mismo directorio, la sintaxis seria:

<a href=’doc1.html’>Contenido</a>

En el caso de que los documentos de origen y destino no se encuentran en el mismo directorio, será necesario escribir la ruta relativa entre ambos documentos. Por ejemplo, si se desea establecer un enlace en “index.html” que direccione a “doc2.html”, estando este dentro del directorio documentos, las sintaxis seria:

<a href=’documentos/doc2.html’>Contenido</a>

También es posible que se deseen direccionar a un documento o archivo que se encuentra en un directorio superior al documento HTML que contenga el enlace. En este caso, sería necesario añadir “../” por cada nivel que separe a los archivos de origen y destino. Por ejemplo, si el documento “doc2.html” se encuentra dentro del directorio “documentos”, y se desea escribir en él un enlace que direccione a “doc1.html” (el cual se encuentra en la carpeta raíz del sitio), la sintaxis seria:

<a href=’../doc1.html’>Contenido</a>

ENLACE REMOTO

Son los enlaces que se dirigen hacia páginas que se encuentran fuera de nuestro sitio web.

Este tipo de enlaces son muy comunes. Simplemente colocamos en el atributo “href” de nuestra etiqueta <a> la URL o dirección de la página con la que queremos enlazar.

<a href=’http://www.marca.com’>Ir a Marca</a>

Todas las direcciones web (URLs) empiezan por “http://” o “https://” en el caso que la página de destino se sirva mediante un servidor seguro.

Otra cosa interesante es que no tenemos que enlazar con una página web con el protocolo “HTTP” necesariamente. También podemos acceder a recursos a través de otros protocolos como “FTP”. En tal caso, las direcciones de los recursos no comenzaran por “http://” sino por “ftp://”.

ENLACES A DIRECCIONES DE CORREO

Los enlaces a direcciones de correo son aquellos que al seleccionarlos permiten enviar un correo electrónico a través de un asistente de correo electrónico que debe estar instalado en el equipo o dispositivo que el usuario este utilizando.

NOTA: el asistente de correo electrónico es un software que es capaz de enviar y recibir emails. Algunos ejemplos de programas de este tipo, son: “Mozilla thunderbird”, “incredimail”, “Outlook”, etc.

Para crear un enlaces de este tipo es necesario incluir en el atributo “href” del link correspondiente, la cadena “mailto:”, seguida de la dirección de correo electrónico de destino.

<a href=’mailto:ejemplo@gmail.com’>Contenido</a>

Par crear, además de la dirección de destino en el atributo “href” se puede especificar la siguiente información:

  1. asunto de mensaje: se escribe a continuación de la dirección del correo destinatario. Se debe utilizar el carácter “?” como separador entre dicho asunto y el correo destinatario, “?subject=asunto”.

  2. copia: también es posible indicar otra dirección de correo a la que se enviara el email. Esto se indica después del asunto y se debe incluir el carácter “&” como separador entre ambas informaciones, “cc=dirección adicional”.

<a href=’mailto:ejemplo@gmail.com?subject=correodeprueba&cc= ejemplo2@gmail.com’>Contenido</a>

VINCULO DE ARCHIVOS

Los enlaces hacia archivos son aquellos que están dirigidos a archivos que no son documentos web. Para implementarlos, basta con escribir, en el atributo “href” del enlace, la ruta en la que se encuentra el archivo, seguido del nombre y extensión. El ejemplo <a href=’fichero.zip’>descargar</a> muestra el código HTML de un enlaces que direcciona a un archivo llamado, “fichero.zip” que está ubicado en el mismo directorio que el documento que contiene el enlace.

Si el navegador no es capaz de abrir el archivo, cuando se hace click sobre el enlace aparecerá una ventana en la que se preguntara al usuario, si desea ejecutar o simplemente descargar el archivo al que apunta dicho link.

NOTA: no colocar en internet archivos ejecutables directamente, sino archivos comprimidos. Por dos razones:

  1. el archivo ocupara menos, con lo que será más rápida su transferencia.

  2. al preguntar al usuario lo que desea hacer con el fichero le ofrece la opción de abrirlo y guardarlo en disco. Nosotros generalmente desearemos que el usuario lo guarde en disco y no lo ejecute hasta que lo tenga en su disco duro. Si se decidió a abrirlo en vez de guardarlo, simplemente lo pondrá en marcha y cuando lo pare no se quedara guardado en su sistema. Si los archivos están comprimidos, obligaremos al usuario a descomprimirlos en su disco duro antes de ponerlos en marcha, con lo que nos aseguramos que el usuario lo guarde en su ordenador antes de ejecutarlo.

Si queremos enlazar a otro tipo de archivos como un PDF o un mundo VRML (realidad virtual para internet) lo seguiremos haciendo de la misma manera. El navegador, si reconoce el tipo de archivo, es el responsable de abrirlo utilizando el conector adecuado para ello. Así, si por ejemplo enlazamos con un PDF pondrá el programa Acrobat Reader en funcionamiento para mostrar los contenidos. Si enlazamos con un mundo VRML pondrá en marcha el plugin que el usuario tenga instalado para ver los mundos virtuales.

Ejercicio-1

ejer32

Ejercicio-2

ejer33

Ejercicio-3

ejer34

Ejercicio-4

ejer35

Ejercicio-5

ejer36

Ejercicio-6

ejer37

Ejercicio-7

ejer38

Ejercicio-8

ejer39