Enlaces en la página web
Como ya habrás leído la páginas web es un ejemplo de documento de hipertexto, es decir, documentos que contienen información directamente visible (como las páginas de un libro) y además formas de acceder a otras fuentes de información, normalmente relacionada con el documento.
Estas otras fuentes pueden ser una imagen, un video, un audio, otro documento u otra página web. Esta propiedad es la que enriquece y da utilidad a las páginas web.
Para construir estos accesos a otras fuentes de datos se usan los hiperenlaces (hyperlinks): elementos interactivos de la página que al ser activados nos muestran contenido de otro lugar. Habitualmente se abrevia y se les llama links o enlaces web. Estos elementos de la web suelen destacarse de alguna forma: color, subrayado, una imagen, un botón para llamar la atención del usuario.
La etiqueta <a href ></a> nos sirve para definir estos enlaces web. Lo que esté encerrado en esta etiqueta será un elemento interactivo que puede ser activado por el usuario, normalmente con un click del ratón o con el dedo en el caso de pantallas táctiles.
Si escribiste la página de ejemplo ejemplo01.htm ya has usado este elemento:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Ejercicio1: Zona de Lectura</title>
</head>
<body>
<header>Zona para tus libros</header>
<nav>
<a href="ebooks.htm">E-books</a>
<a href="enpapel.htm">Papel</a>
</nav>
</body>
</html>
Como ves el atributo href tiene como valor la URL del recurso de destino. La url puede ser tanto absoluta como relativa. Y no solo apuntar a una página externa, puede apuntar a un elemento concreto de una página.
El contenido del elemento puede ser texto o una imagen. Si se usa un texto este aparece por defecto en azul y subrayados: E-books, aunque mediante los estilos CSS este aspecto se puede modificar.
Este atributo es el fundamental para definir el elemneto hyperenlace. Existen otros atributos
| Atributo | Uso | Valores |
|---|---|---|
| href | Indica el destino del enlace | Url del destino |
| target | Donde abrir el destino del enlace | _blank, _self, _parent, _top, frame |
| download | Es un enlace para descargar un recurso | URL del recurso |
| rel | Información sobre la relación entre el destino del enlace y la página actual. Pueden darse varios valores separados por un espacio | alternate, author, bookmark, external, help, license, next, nofollow, noreferrer, noopener, prev, search, tag |
| ping | Envia una petición POST a una o varias direcciones web | Lista de Url,s. |
| type | Nombre del tipo de recurso apuntado. | Identificador MIME |
El atributo target permite definir donde se va a abrir la página llamada con href. Se puede abrir en la misma ventana o en otra nueva o en un marco. Los valores lo dicen claro:
- _blank:
- la nueva página se abre en una nueva ventana o pestaña del navegador. La página original sigue abierta.
- _self:
- es la opción por defecto y no es necesario escribirla, la página se abre en la ventana actual, sustituye a la página origen
- _parent,
- si el enlace está en un marco la página se abre en la ventana padre, la que contiene al marco
- _top,
- si existen marcos la página llamada sustituye a todos los marcos, que se cierran y solo queda la página nueva
- frame
- Es el nombre de un marco (iframe) en el que se abrirá la nueva página. Es el atributo name del iframe.
El mecanismo de los marcos es uitl para construir índices compartidos por todo un sitio. Una página con un índice o barra de navegación abriría las páginas en un iframe. Si se quiere modificar el menú solo hay que ahcerlo en una página, la página padre o contenedora del iframe donde se cargan las páginas señaladas en el menú.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Documento sin título</title>
<base href="/tutorhtml5/ejemplos-html5/">
</head>
<body>
<p>Pulsa los enlaces para rellenar el iframe</p>
<a href= "ejercicio01.htm" target="ejemplos">Ejemplo 1</a><br>
<a href= "ejercicio02.htm" target="ejemplos">Ejemplo 2</a><br>
<iframe name="ejemplos" style="with: 600px; height: 600px; border: 1px solid blue"></iframe>
<p>Página contenedora</p>
</body>
</html>
Las marcas de enlaces internos
El destino dentro de una página se marca mediante un elemento <a></a>
sin href, solo necesita un identificador (atributo id). Ahora tendríamos un ancla u objetivo para un hiperenlace. El valor del atributo id la identifica y su url sería la url de la página seguida del simbolo# y el nombre de la refrencia. Por ejemplo, si pulsas este enlace ir a la cabecera la pa´gina hace scroll y sube sola al inicio.
Pero además podemos hacer que se abra la nueva página y se desplace hasta el ancla que le indiquemos, basta con añadir a la url el símbolo # seguido del nombre del ancla
<a href="#cabecera">Ir a la cabecera</a>
<a href="loslibros.htm#papel">Ir a libros</a>
En este ejemplo el primer enlace lleva a una referencia de la misma página con id="cabecera" haciendo el scroll necesario para que esa referenci quede en la parte superior de la ventana del navegador.
Mientras que el segundo enlace abriría la página loslibros.htm y haría el scroill vertical necesario para mostrar la página a partir del ancla con id="papel".