Enlaces en la página web

Las páginas web no son más que un caso particular de documentos de hipertexto, es decir, documentos cuyo contenido no es solo el texto simple que podemos leer sino también el contenido de otras fuentes a las que accedemos desde el documento.

En el caso de las páginas web estas otras fuentes pueden estar situadas en cualquier parte de la red, y a ellos se accede mediante los enlaces o links: unos elementos interactivos del documento que aparentemente son solo eso una palabra o un gráfico que habitualmente destacan por su color o su forma. Es prácticamente imposible que una página web no posea uno de estos enlaces. Al pulsar sobre ellos con el ratón el navegador mostrará el recurso al que apunte, habitualmente otra página web.

Los enlaces que nos encontramos en cualquier página pueden ser de dos tipos: enlaces internos, a la propia página, o enlaces externos, a otra página. La forma de construir unos y otros es muy similar como verás a continuación.

La etiqueta <a></a> nos sirve para delimitar la etiqueta que constituye el enlace. Lo que esté encerrado en esta etiqueta será mostrado por el navegador de forma resaltada, bien sea por el color si es texto o por un borde si es una imagen (a menos que modifiquemos el formato), y si pulsamos con el cursor del ratón sobre ese elemento el navegador se dirigirá al lugar anotado en esa etiqueta. El formato completo de esta etiqueta es el que sigue:

<a href="dirección de destino" target="destino">Pulsar para saltar</a>

La dirección de destino será la página web especificada mediante una URL, en formato absoluto o relativo. En ambos casos el destino puede incluso ser un elemento concreto dentro de la página. En este caso se ha usado un texto pero igualmente podríamos colocar una imagen.

El atributo target es una manera de decirle al navegador en que ventana debe abrir esa nueva página. Por ahora veremos dos de sus valores posibles:

_blank

Muestra la nueva página en una ventana nueva y sin nombre del navegador.

_self

Muestra la nueva página en el marco donde está declarado el enlace. Este es el destino por defecto de cualquier enlace dentro de una página y no es necesario indicarlo

En el apartado dedicado a los frames veremos algo más de este parámetro.

Cualquier elemento conectado a la red internet se identifica por un conjunto de cuatro números entre 0 y 255, algo así como 84.234.12.122, cualquier sitio de internet está identificado por esta dirección, que se conoce como IP. Pero como quiera que recordar esos números no es nada fácil existen unos servidores de nombre que transforman esas direcciones en nombres más humanos como www.espaciolatino.com. A estas direcciones se les llama Universal Resource Locator, o URL, es la forma de localizar cualquier recurso en internet. En general tiene el siguiente formato:

protocolo://máquina:puerto/ruta/fichero@usuario

donde protocolo puede ser uno de los siguientes:

http

Es el protocolo para la transmisión de documentos HTML, es decir, el que habitualmente usamos para ver las páginas en nuestro navegador.

https

Es similar al anterior pero con la particularidad de que la información viaja codificada mediante técnicas de encriptación.

ftp

Es un protocolo para la transmisión de ficheros (File Transfer Protocol). Permite intercambiar ficheros con sitios en los que se ejecuten servidores ftp. Los navegadores actuales permiten acceder a estos servidores FTP, pero lo más normal es usasr unos programas al efecto denominados clientes de FTP.

mailto

Otro protocolo para la transmisión de datos, pero en este caso a través de servidores de correo.

news

Mediante este protocolo accedemos a los denominados grupos de noticias, listas de distribución de mensajes relativos a temas concretos. Habitualmente se accede a estos servidores mediante el cliente de correo.

telnet

Es un terminal de acceso remoto en modo texto. Es un sistema bastante inseguro por lo que no es habitual en servidores donde la seguridad esté bien pensada.

Lo más normal en nuestras páginas será acceder a elementos de otros páginas y por tanto lo habitual será usar URL del estilo http://servidor.com/página.htm o similar. También es fácil que usemos estos enlaces para direcciones de email, al pulsarlo abre el program email del usuario.

En un enlace podremos usar la URL como hemos escrito más arriba, URL absoluta, pero también podremos usar formatos como /pagina.htm, parece que faltara la primera parte de la dirección ¿verdad? Pues no, en estos casos el navegador completa esa parte del inicio con la correspondiente de la página en la que esté el enlace, son las URL relativas. Por ejemplo si miras la URL de esta página en la barra de direcciones de tu navegador verás que es

https://www.auladiv.com/tutorhtml/tema6.html

Pues bien si en esta página colocara un enlace en la forma

<a href="tema3.htm">Tema 3</a>

Esta dirección realmente apuntaría a

https://www.auladiv.com/tutorhtml/tema3.html

Como último detalle a tener en cuenta es el uso de la / como forma de referirse a la raiz del sitio. Así este enlace

<a href="/index.htm">Portada</a>

estaría apuntando a https://www.auladiv.com/index.html. Se añade la dirección completa del dominio donde está el sitio web..

Como dijimos, es posible acceder a una posición dentro del documento HTML. Para ello lo primero que tenemos que hacer es colocar marcas de destino en el documento al que queremos acceder:

<a name="ancla">

A estos elementos se les llama anclas. Su uso es muy simple: en una etiqueta de enlace colocamos el símbolo # seguido del nombre del ancla de esta manera:

<a href="#ancla">Ancla en esta página</a>

Al pulsar sobre este enlace se mostrará en la ventana la parte de la página actual que contiene el ancla. Si queremos acceder a un ancla en otra página basta indicarlo al final de su URL. Como en este ekemplo:

<a href="enlaces.html#ancla">Ancla en la página enlaces.html</a>