Ir al contenido principal

Enlaces y direccionamientos

No hay página web que no tenga enlaces. Pues una página web no es un libro. Es una herramienta dinámica y el enlace, sin ser el elemento centro, es parte de su esencia.

<a href="https://www.ludoviclaisnez.com/index.php">Leer más</a>

Podemos poner una ruta corta si sabemos que el documento enlazado se encuentra en la misma carpeta que el documento actual: <a href="index.php">Leer más</a>

Para forzar un cambio de carpeta escribimos la ruta entera o parte de ella:

<a href="https://www.enreinosa.com/index.php">Otra web</a>
o
<a href="../index.php">Otra web</a>

El elemento [A]

Los enlaces en HTML están definidos con el elemento [A]. Por defecto, los enlaces tienen un aspecto específico para ayudar a identificarles. Este aspecto tiene que comunicar al usuario información que debe saber:

  • dónde están los enlaces.
  • si ya hemos visitado el enlace.
  • si, actualmente, estamos sobrevolando algún enlace.
  • si el enlace se encuentra actualmente activo.

El enlace está configurado con el atributo href="ruta". La ruta es el camino que tenemos que seguir para llegar al contenido enlazado.

El atributo title

Ejemplo de enlace con el atributo title

<a href="https://www.enreinosa.com/index.php" title="visitar la página web de enreinosa">Leer más</a>

Cuando creamos un enlace, las normas de accesibilidad piden que indiquemos al usuario qué va a pasar si pulsamos sobre él. Esto se hace con atributo title="Va a pasar tal cosa".

El atributo target

Cuando creamos el enlace, podemos indicar al navegador qué comportamiento tiene que adoptar con el atributo target="_comportamiento".

Existen numerosas opciones de configuración. Pero las más utilizadas son:

  • target="_blank": indica que queremos que la página se abra en una nueva pestaña.
  • target="_self": indica que queremos que la página se abra en la misma pestaña.

Las imágenes enlazadas

Se utilizan mucho las imágenes para enlazar contenidos. En este caso tenemos que incluir la etiqueta [img] entre las etiquetas de apertura y cierre del enlace.

Veremos con más detalle el funcionamiento de las imágenes en el capítulo imágenes y elementos multimedia.

Estructura de una imagen enlazada

<a href="ruta" title="va abrir una nueva página">
<img src="ruta" alt="titulo alternativo" title="Algún título"/>
</a>

Ejemplo de marcador

Meta :
<h2 id="mi-meta"></h2>

Enlace que lleva a la meta:
<a href="#mi-meta">ir a mi meta</a>

Los marcadores

Cuando una página tiene mucho contenido, se emplea esta opción para conducir al usuario a una parte específica del mismo documento o simplemente para volver arriba.
Para ello, necesitamos declarar la meta dónde va a apuntar el enlace local con el id. Y en la declaración del atributo href="" indicamos nuestra meta.

Newsletter

Si mandas tu email desde este formulario, te responderé con una oferta de 5% aplicable a tu próximo presupuesto. Más adelante, te enviaré ofertas y noticias acerca de mi actividad.
No spam. Tus datos están protegidos y no compartidos.

imagen Captcha correspondiente a toma6

Por favor, escribir el nombre visible en esta imagen sin tilde, mayúscula, símbolo...

Parte inferior de la sección rellenada por fotos de gente