Crea tu web, tutor html, css

Enlaces en la página web

Enlaces o vínculos

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.

Una página web es un documento de hipertexto gracias a los enlaces que la extiende por toda la red

La etiqueta

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.

El enlace (o hiperenlace) es la puerta por la que la pa´goina web te lleva a otro lugar, concretamente al anotado en el atributo href mediante una URL

Las URLs

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://creatuweb.espaciolatino.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://creatuweb.espaciolatino.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://creatuweb.espaciolatino.com/index.htm. Se añade la dirección completa del dominio donde está el sitio web..

En el mundo de la informática un protocolo de comunicaicón es un conjunto de reglas o normas que determinan como ha de ser la comunicación entre dos dispositivos.

Ancla

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>

Las anclas permiten moverse a puntos concretos de una página web directamente, sin necesidad de hacer scroll.

Es  unr ecurso útil para pa´ginas grandes o para tener un índice de las diversas pares de una página web.