Además de los muchos estilos y capacidades de presentación de texto que nos ofrece HTML para estructurar el documento en sí, disponemos de la etiqueta A que nos permite definir relaciones entre diferentes objetos y estructurar todo un conjunto de documentos para crear una unidad lógica. La facilidad para definir este tipo de enlaces es una de las razones de la potencia y versatilidad de HTML.
Los enlaces en HTML se expresan rodeando con la etiqueta <A>...</A> el objeto, que puede ser una palabra, frase o imagen, la cual nos enlaza con otra sección del mismo documento, otro documento HTML, mostrar una texto plano (TXT), una imagen (GIF o JPG), un sonido (AU o WAV), un video (AVI), o cualquier otro objeto que pueda ser manejado desde nuestro navegador cliente por ejemplo JavaScript. Además se puede enviar mensajes de correo y transferir archivos empaquetados (ZIP).
| Atributo | Descripción |
|---|---|
| HREF | URL a mostrar |
| TARGET | Especifica donde. _blank | _parent | _self | _top |
| REL | Especifica la relacion entre este documento y el enlace. alternate|author|bookmark|external|help|license|next|nofollow|noreferrer|noopener|prev|search|tag |
| DOWLOAD | Nombre del archivo a descargar. |
| hreglang | Especifica el lenguaje del enlace. |
| PING | Especifica una lista de URL separadas por espacios a las que, cuando se sigue el enlace, el navegador enviará solicitudes de publicación con el ping del cuerpo (en segundo plano). Normalmente se usa para el seguimiento. |
| REFERRERPOLICY | no-referrer|no-referrer-when-downgrade|origin|origin-when-cross-origin|unsafe-url |
| MEDIA | Especifica el medio del enlace. |
| TYPE | Especifica el tipo de medio |
No importa que tan cerca o lejos esté el enlace, siempre sera igual de sencillo ir a él. Si queremos referirnos a otro lugar del mismo documento solo hay que poner HREF=#top o el nombre de un destino predefinido con el atributo ID= introducido en cualquier etiquetas. Si se trata de otro documento en la misma carpeta usaremos HREF=archivo.htm, si se trata de otra carpeta o servidor solo hay que incluir la URL completa incluyendo el protocolo si es necesario.
Después de hacer clic en un enlace, el color del mismo permanece modificado durante 24 horas, para recordarte que el enlace ha sido visitado por el usuario.
Esta es un etiqueta usada para establecer una conexión de hypertexto o enlace. Acepta muchos parámetros opcionales, pero solo es obligatorio el HREF=URL. Donde URL puede contener ruta, nombre de archivo y posición dentro de el.
<A HREF=[ruta/]pagina[#id]>texto del enlace</A>
#id es opcional y se refiere a enfocar un lugar especifico dentro de pagina. Tambien podrias usar #top, #booton
Existen lo que se llama enlaces relativos que son los que al estar en el mismo dominio no es necesario poner http:// y basta con poner el nombre del archivo si este se encontraba en la misma carpeta y la ruta mas nombre de archivo si esta en mismo servidor. Los enlaces absolutos normalmente están fuera del servidor actual y es necesario introducir http://url
Este es un elemento en linea, NO se inicia en una nueva línea y sólo ocupa tanto ancho como sea necesario.
<A href=https://apuntes.perut.org/CSS/><IMG SRC=logo_css.gif></A>
<A HREF="javascript:alert('Hola mundo');">Execute JavaScript</A>
| Atributo | Descripción |
|---|---|
| HREF | URL |
| TARGET | _blank|_parent|_self|_top|nombre del frame |
| DOWNLOAD | nombre del archivo |
| HREFLAG | código lenguaje |
| PING | lista de URL separadas por espacio |
| REFERRERPOLICY | no-referrer|no-referrer-when-downgrade|origin|origin-when-cross-origin|unsafe-url| |
| REL | alternate|author|bookmark|external|help|license|next|nofollow|noreferrer|noopener|prev|search|tag |
| TYPE | Tipo de medio |
| MEDIA | Tipo de medio |
Una página vinculada normalmente se muestra en la ventana actual del navegador, a menos que especifique otro objetivo con el atributo TARGET.
Si este parámetro está presente, el texto entre <A>... </A> es un enlace y cuando es seleccionado desde el visualizador, mueve el puntero hacia otro documento u otra parte del mismo documento, cuya localización está especificada con una dirección URL.
Puedes especificar direcciones URL relativas, es decir las que están referidas a la carpeta en uso por el documento actual, en cuyo caso no es necesario especificar protocolo. También se puede especificar URL absolutas, es decir dando el protocolo, nombre del servidor y luego ruta completa de ubicación y nombre del documento.
Ejemplo 1:<A HREF=#top>Arriba</A>
En este ejemplo un clic en Arriba nos lleva a la parte superior de este mismo documento.
Ejemplo 2:<A HREF=h0.htm>Referencias</A>
En este ejemplo un clic en Referencias nos presentará el documento "H0.HTM" que se encuentra en el mismo directorio.
Ejemplo 3:<A HREF=../peru/lima.htm>Lima-Perú</A>
Aquí mostramos una dirección relativa, un clic en Lima-Perú nos presentará el documento "LIMA.HTM" que se encontraría en otro directorio.
Ejemplo 4:Consulta <A HREF=file:///c|/wc/bbs.htm>ATJ</A> para más información.
Aquí mostramos una dirección URL absoluta, un clic en el objeto definido como ATJ, te lleva al documento "bbs.htm" localizado en la ruta "c:\wc" localmente en la PC del cliente.
Ejemplo 5:<A HREF=temas.htm#Mas>M</A>
En este ejemplo nos referimos a una posición específica sobre el documento "Temas.htm" que contiene por ejemplo una serie de definiciones y un clic en el objeto "Mas" te lleva a la etiqueta que tenga el parámetro id=Mas.
Ejemplo 6:
Ejecuta un JavaScript.
<A HREF="javascript:alert('Hola mundo');">Ejecuta un JavaScript</A>
Si no incluimos este parámetro opcional la nueva pagina se abrirá sobre la misma venta. Los navegadores modernos pueden manejar más de una página HTML a la vez, cada una en una ventana, con este atributos consultas si la respectiva ventana está abierta, si no es así la abre en ese momento.
| Valor | Descripción |
|---|---|
| _blank | En una nueva ventana |
| _parent | En el FRAME padre |
| _self | En la misma ventana (default) |
| _top | En la ventana principal de Windows (usado con FRAMES) |
| nombre de frame | En un FRAME especifico |
<A HREF=url.htm TARGET=_blank>Click aquí para abrir una nueva ventana</A>
El atributo especifica la relación entre el documento actual y el documento vinculado.
| Valor | Descripción |
|---|---|
| alternate | Proporciona un enlace a una representación alternativa del documento (es decir, página impresa, traducida o espejo) |
| author | Proporciona un enlace al autor del documento. |
| bookmark | URL permanente usada como marcador. |
| external | Indica que el documento referenciado no es parte del mismo sitio que el documento actual |
| help | Proporciona un enlace a un documento de ayuda. |
| license | Proporciona un enlace a la información de licencia del documento. |
| next | Proporciona un enlace al siguiente documento de la serie. |
| nofollow | Google usa eta etiqueta para especificar que la araña de búsqueda no debe seguir ese enlace. |
| noopener | Requiere que cualquier contexto de navegación creado siguiendo el hipervínculo no debe tener un contexto de navegación inicial |
| prev | El documento anterior en una selección |
| search | Enlaces a una herramienta de búsqueda para el documento |
| tag | Una etiqueta (palabra clave) para el documento actual |
<a href=h02.htm rel=nofollow>h01</a>
Cuando quieres que un archivo sea descargado y no intente el navegador mostrarlo.
<a href=archivo download>nombre</a>
El atributo ping especifica una lista de URLs a notificar si el usuario sigue el hipervínculo. Cuando el usuario hace clic en el hipervínculo, el atributo ping enviará una breve solicitud HTTP POST a la URL especificada.
Este atributo es útil para monitorear/rastrear.
<a href=../archivo.txt ping=https://sitio.com/seguir.php download>Descargar</a>
Pero hay muchas maneras de hacer referencia incluso a otros objetos, ej:
Un clic en ver archivo texto plano me mostrará el contenido del archivo texto. Muy poco usado porque comparado al HTML es muy poco atractivo.
<A HREF=sitemap.xml>Ver el archivo texto plano</A>
En este ejemplo cuando haces clic en la palabra Acción se mostrará "Action.gif"
<A HREF=action.gif>Acción</A>
Se muestra la imagen "chica.gif" y cuando hagas clic se mostrará la imagen "grande.jpg", un buen método para dejar al usuario la decisión de ver o no una imagen más detallada que demorará en cargar. Es normal en este caso la sea en realidad la misma imagen en dos resoluciones o tamaños distintos.
<A HREF=grande.jpg><IMG SRC=chico.gif></A>
Un clic en la palabra Toca sonará el archivo "Start.wav".
<A HREF=start.wav;>Toca</A>
En este ejemplo cuando haces clic en la palabra Win verás el video "Stone.avi".
<A HREF=welcome2.avi>Win</A>
En este ejemplo cuando haces clic en DEMO de HTML bajarás este archivo demo.
<A HREF=demo.zip DOWNLOAD>Apuntes HTML</A>.
En este ejemplo activamos la opción de correo.
<A HREF="mailto:[email protected]?Subject='Pregunta o sugerencia'">Buzón de sugerencias</A>
