Tipos de Enlaces – Parte I

Los enlaces se pueden establecer a diferentes niveles: en la misma página, en otras páginas del mismo proyecto o sitio web y como vimos anteriormente a otras páginas de otros sitios web. Como enlace se pueden utilizar texto o imágenes.

Tipos de Enlaces

  1. Enlaces internos dentro de la misma página.
  2. Enlaces a otras páginas del mismo proyecto o sitio web.
  3. Enlaces a otros sitios web.
  4. Enlaces a direcciones e-mail.
  5. Enlace a archivos para su descarga

Enlaces Internos

Un enlace interno es el que se hace dentro de la misma página, y sirve para acceder a elementos de una página cuando esta es muy larga. En lugar de ir de arriba a abajo buscando la información requerida, se puede acceder directamente creando un enlace al punto donde se encuentra dicha información.

Como todo tipo de enlace hay que tener dos elementos:

  • El enlace propiamente dicho desde donde se hace la conexión y
  • El objetivo o destino, que es el elemento a conectar.

El elemento objetivo o destino se crea utilizando la etiqueta <a>, pero utilizando el atributo name, el cual define un identificador que puede ser utilizado en el atributo href del elemento de enlace.

El par enlace – destino tiene la siguiente sintaxis:

<a href=”#nombre destino”>Texto o imagen</a>

<a name=”nombre destino”></a>

Hay que notar que en la dirección de href hay que colocar el símbolo de numeral (#) antes del nombre creado con el atributo name.

En la siguiente figura se observa cómo se crean los enlaces.

enlace-4
Fragmento de documento HTML donde se crean los enlaces internos.

Y los elementos de destino se crean con el atributo name tal y como se muestra en la siguiente figura.

enlace-5
Fragmento de documento HTML donde sea crean los elementos de destino.

Como se observa entre las etiquetas <a name=”nombre”> y </a> no existe ningún contenido. Ya que solo indica un punto de destino, el cual se posiciona delante de la etiqueta que continua, en estos casos son unos elementos de encabezado tipo 2 <h2>.

También es posible utilizar las etiquetas <a name=”nombre”></a> anidadas dentro de otros elementos. por ejemplo:

<h2>Párrafo 1: Introducción.<a name=”Introduccion”></a></h2>

La siguiente figura muestra la estructura del par enlace-destino.

enlace-6
Estructura de las etiquetas de enlace y destino.

La salida del navegador es la que se muestra a continuación:

enlace-7
Salida con elementos de enlace en color y subrayados.

Se observa que el texto utilizado como enlace aparece de color y subrayado. Al hacer click sobre alguno de ellos re direccionará el contenido de la ventana de forma que muestre el lugar que hemos definido como destino. Por ejemplo al hacer click sobre Párrafo 2 nos mostrara el párrafo 2 en la parte superior de la ventana.

enlace-8
Salida del navegador cuando se hace clic en el texto de enlace Párrafo 2.

 

 

Anuncios

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s