HTML - Enlaces de texto

Una página web puede contener varios enlaces que lo llevan directamente a otras páginas e incluso a partes específicas de una página determinada. Estos enlaces se conocen como hipervínculos.

Los hipervínculos permiten a los visitantes navegar entre sitios web haciendo clic en palabras, frases e imágenes. Por lo tanto, puede crear hipervínculos utilizando texto o imágenes disponibles en una página web.

Note- Te recomiendo que sigas un breve tutorial sobre cómo comprender la URL.

Vinculación de documentos

Un enlace se especifica mediante la etiqueta HTML <a>. Esta etiqueta se llamaanchor tagy cualquier cosa entre la etiqueta de apertura <a> y la etiqueta de cierre </a> se convierte en parte del vínculo y el usuario puede hacer clic en esa parte para acceder al documento vinculado. A continuación se muestra la sintaxis simple para usar la etiqueta <a>.

<a href = "Document URL" ... attributes-list>Link Text</a>

Ejemplo

Intentemos seguir el ejemplo que enlaza http://www.tutorialspoint.com en su página:

<!DOCTYPE html>
<html>
   
   <head>
      <title>Hyperlink Example</title>
   </head>
	
   <body>
      <p>Click following link</p>
      <a href = "https://www.tutorialspoint.com" target = "_self">Tutorials Point</a>
   </body>
	
</html>

Esto producirá el siguiente resultado, donde puede hacer clic en el enlace generado para llegar a la página de inicio de Tutorials Point (en este ejemplo).

El atributo objetivo

Hemos usado targetatributo en nuestro ejemplo anterior. Este atributo se utiliza para especificar la ubicación donde se abre el documento vinculado. A continuación se muestran las posibles opciones:

No Señor	Opción y descripción
1	_blank Abre el documento vinculado en una nueva ventana o pestaña.
2	_self Abre el documento vinculado en el mismo marco.
3	_parent Abre el documento vinculado en el marco principal.
4	_top Abre el documento vinculado en todo el cuerpo de la ventana.
5	targetframe Abre el documento vinculado en un marco de destino con nombre .

Ejemplo

Pruebe el siguiente ejemplo para comprender la diferencia básica en algunas opciones dadas para el atributo de destino.

<!DOCTYPE html>
<html>

   <head>
      <title>Hyperlink Example</title>
      <base href = "https://www.tutorialspoint.com/">
   </head>
	
   <body>
      <p>Click any of the following links</p>
      <a href = "/html/index.htm" target = "_blank">Opens in New</a> |
      <a href = "/html/index.htm" target = "_self">Opens in Self</a> |
      <a href = "/html/index.htm" target = "_parent">Opens in Parent</a> |
      <a href = "/html/index.htm" target = "_top">Opens in Body</a>
   </body>

</html>

Esto producirá el siguiente resultado, donde puede hacer clic en diferentes enlaces para comprender la diferencia entre varias opciones dadas para el atributo de destino.

Uso de la ruta base

Cuando vincula documentos HTML relacionados con el mismo sitio web, no es necesario que proporcione una URL completa para cada vínculo. Puede deshacerse de él si usa<base>etiqueta en el encabezado de su documento HTML. Esta etiqueta se utiliza para proporcionar una ruta base para todos los enlaces. Por lo tanto, su navegador concatenará la ruta relativa dada a esta ruta base y creará una URL completa.

Ejemplo

El siguiente ejemplo hace uso de la etiqueta <base> para especificar la URL base y luego podemos usar la ruta relativa a todos los enlaces en lugar de proporcionar la URL completa para cada enlace.

<!DOCTYPE html>
<html>

   <head>
      <title>Hyperlink Example</title>
      <base href = "https://www.tutorialspoint.com/">
   </head>
	
   <body>
      <p>Click following link</p>
      <a href = "/html/index.htm" target = "_blank">HTML Tutorial</a>
   </body>
	
</html>

Esto producirá el siguiente resultado, donde puede hacer clic en el enlace generado HTML Tutorial para llegar al tutorial HTML.

Ahora la URL proporcionada <a href = "/html/index.htm" se considera <ahref = "http://www.tutorialspoint.com/html/index.htm"

Vinculación a una sección de página

Puede crear un enlace a una sección particular de una página web determinada utilizando nameatributo. Este es un proceso de dos pasos.

Note- El atributo de nombre en desuso en HTML5. No utilice este atributo. En su lugar, utilice el atributo id y title .

Primero cree un enlace al lugar al que desea llegar dentro de una página web y asígnele un nombre usando la etiqueta <a ...> de la siguiente manera:

<h1>HTML Text Links <a name = "top"></a></h1>

El segundo paso es crear un hipervínculo para vincular el documento y el lugar al que desea llegar:

<a href = "/html/html_text_links.htm#top">Go to the Top</a>

Esto producirá el siguiente enlace, donde puede hacer clic en el enlace generado Go to the Top para llegar a la parte superior del tutorial HTML Text Link.

Go to the Top

Configuración de colores de enlace

Puede configurar los colores de sus enlaces, enlaces activos y enlaces visitados utilizando link, alink y vlink atributos de la etiqueta <body>.

Ejemplo

Guarde lo siguiente en test.htm y ábralo en cualquier navegador web para ver cómo link, alink y vlink los atributos funcionan.

<!DOCTYPE html>
<html>
   
   <head>
      <title>Hyperlink Example</title>
      <base href = "https://www.tutorialspoint.com/">
   </head>
	
   <body alink = "#54A250" link = "#040404" vlink = "#F40633">
      <p>Click following link</p>
      <a href = "/html/index.htm" target = "_blank" >HTML Tutorial</a>
   </body>
   
</html>

Esto producirá el siguiente resultado. Simplemente verifique el color del enlace antes de hacer clic en él, luego verifique su color cuando lo active y cuando el enlace haya sido visitado.

Descargar enlaces

Puede crear un enlace de texto para que sus archivos PDF, DOC o ZIP se puedan descargar. Esto es muy simple; solo necesita proporcionar la URL completa del archivo descargable de la siguiente manera:

<!DOCTYPE html>
<html>

   <head>
      <title>Hyperlink Example</title>
   </head>
	
   <body>
      <a href = "https://www.tutorialspoint.com/page.pdf">Download PDF File</a>
   </body>
	
</html>

Esto producirá el siguiente enlace y se utilizará para descargar un archivo.

Cuadro de diálogo de descarga de archivos

A veces se desea que desee dar una opción en la que un usuario haga clic en un enlace y aparecerá un cuadro de "Descarga de archivo" para el usuario en lugar de mostrar el contenido real. Esto es muy fácil y se puede lograr usando un encabezado HTTP en su respuesta HTTP.

Por ejemplo, si quieres hacer un Filename archivo descargable desde un enlace dado, su sintaxis será la siguiente.

#!/usr/bin/perl

# Additional HTTP Header
print "Content-Type:application/octet-stream; name = \"FileName\"\r\n";
print "Content-Disposition:attachment; filename = \"FileName\"\r\n\n";

# Open the target file and list down its content as follows
open( FILE, "<FileName" );

while(read(FILE, $buffer, 100)){
   print("$buffer");
}

Note- Para obtener más detalles sobre los programas PERL CGI, consulte el tutorial PERL y CGI .

↰ Previous page Next page ↱