TEMA 4. ENLACES O VÍNCULOS EN HTML
Los enlaces o hipervínculos, también llamados hipertextos son una parte vital de HTML y consituyen la razón misma por la cual la WWW existe. Internet es considerada una «red» debido a cómo los vínculos conectan todas estas partes singulares (o documentos) unas con otras.
Los enlaces son los textos o los objetos sobre los que podemos hacer clic para que nos lleven a:
- Otra parte del documento
- Otra página HTML
- Una imagen
- Un documento PDF
- Otros recursos digitales
Un enlace define una relación entre dos recursos en la web.
A la hora de colocar un enlace en una página, tenemos que distinguir dos elementos:
- El texto (o imagen) sobre el que pinchamos en la página HTML, y que puede ser el que nosotros queramos.
- La URL (dirección web) a la que queremos ir al pinchar en ese enlace.
Para definir enlaces o hipervínculos utilizaremos la etiqueta <a> de la siguiente manera:
<a href=”hipervínculo del enlace”>Texto que aparecerá en pantalla</a>
href: la URL de la página a la que queremos ir.
El texto (o la imagen) que queramos poner para hacer clic sobre él, deberá ir entre el par de etiquetas a.
Veamos unos ejemplos:
<a href="https://ccnafacil.com/"> Página CCNA Fácil </a>
<p>Ir a la <a href="https://iessanvicente.com/">web del IES San Vicente</a>.</p>
Ir a la web del IES San Vicente.
Atributo href
Sirve para indicar la dirección destino del enlace
<a href="URL"> texto ancla </a>
- El atributo href contiene el valor de la url de destino
- El texto ancla es el texto visible, el texto donde se hará clic.
- Puede ir dentro de un párrafo para un texto ancla especifico.
- Se puede colocar enlace tanto a texto como a imágenes.
Atributo title
El atributo “title” es una característica opcional de los elementos HTML como imágenes o enlaces que sirve para especificar su título asociado, los navegadores muestran como descripción emergente (tooltip) cuando el ratón se coloca encima.
<a href="https://ccnafacil.com/" title="CCNA Fácil"> Página CCNA Fácil </a>
Aunque no es un elemento asociado, su utilización, tanto en texto como en imágenes es esencial para el SEO de la página.
Atributo target
El atributo target, que sirve para indicar dónde queremos abrir el enlace. Si no ponemos este atributo, el enlace se abrirá en la misma ventana de la página que tenemos actualmente, con lo que dejaremos de ver la página actual y pasamos a la nueva (en cualquier caso, podemos recuperar la página antigua pulsando el botón de Atrás del navegador). Pero podemos darle otros valores, como por ejemplo _blank, para que se abra en una ventana o pestaña nueva.
- Target=»_self» es la opción por defecto, mostrando el contenido del link en la misma ventana.
- Target=»_top» muestra el enlace en pantalla completa en la misma ventana.
- Target=»_parent» muestra la página de destino en el frame anterior.
El siguiente ejemplo modifica el enlace anterior, añadiéndole un title y haciendo que se abra en una ventana nueva:
<p>Ir a la <a href="https://ccnafacil.com/" title="CCNA Fácil" target="_blank"> Página CCNA Fácil </a>. </p>
Aprendizaje activo: Crea un enlace a la página IES San Vicente, el texto sea «Ir a la» y el texto enlace sea «IES San Vicente«, un title que aprezca » San Vicente» y lo abra en una ventana nueva
Atributo rel
El atributo rel de HTML sirve para indicar la relación que existe entre la página del cual sale el enlace y la pagina que recibe el enlace, muy importante para indicar a los motores de búsqueda dicha relación y también a los usuarios. Dos valores principales “follow” (por defecto) y “nofollow”
- sponsored.Para indicar que el enlace es un enlace de pago.
- ugc.Indica que el enlace es un enlace generado por el usuario.
- nofollow. Indica a los motores de búsqueda que no siga el enlace como si fuera natural.
- Follow (dofollow). Indica a los motores de búsqueda que siga el enlace.
Un aspecto muy importante para el SEO es saber cuándo se debe utilizar follow o nofollow en los enlaces de un sitio. Como no entraremos en materia SEO en la asignatura os dejo un enlace que puede resultar interesante al respecto.
Puntos de anclaje y enlaces internos
Además de poder enlazar con otras páginas y otras webs, los enlaces también permiten saltar a otras zonas dentro de una misma página. Para ello, debemos seguir dos pasos:
Ir a la zona a la que queremos saltar, y definir un punto de anclaje (en inglés, anchor). Para ello, asignamos un atributo id con el nombre que queramos (siempre que no se repita) a la zona donde queremos ir. Por ejemplo, a un encabezado de nivel 1 o 2:
<body> ... <h1 id="introduccion">Introducción</h1> <p>blablablabla...</p>
Luego, vamos donde queramos poner el enlace, y utilizamos la misma etiqueta a de los enlaces. En el atributo href pondremos, en lugar de un nombre de archivo o una URL, el nombre del anclaje que hemos usado antes, precedido de una almohadilla “#”. Para el ejemplo anterior, podríamos ir al principio de la página y poner un enlace como este:
<body> <a href="#introduccion">Introducción</a> ... <h1 id="introduccion">Introducción</h1> ...
Aprendizaje activo: Realiza un índice con varios puntos de anclaje y comprueba que funcionan correctamente. Algo parecido a lo de la siguiente imagen:
Imágenes y enlaces
Como hemos comentado anteriormente, dentro del contenido de un enlace, además de texto, podemos colocar imágenes, de modo que al hacer clic sobre la imagen vayamos a la ruta indicada por el enlace. Aquí tenemos un ejemplo de ello:
<a href="https://ccnafacil.com/">
<img src="imagenes/logo.png" alt="CCNA Fácil">
</a>
Aprendizaje activo: Crea un enlace a una página que sea una imagen que te guste