Fundamentos de HTML: enlaces y anclas

• Mayo 18, 2024

Puede usar enlaces para conectar su página a otras páginas, o incluso para saltar a diferentes partes de la misma página. Los enlaces le dan a su sitio web una calidad dinámica que lo hace diferente de, por ejemplo, un libro o una revista.

En su nivel más básico, una etiqueta de enlace se ve así:



Cualquier etiqueta que comience con 'a' indica un enlace, pero hay dos tipos básicos de enlaces: hipervínculos y anclas con nombre. Un hipervínculo es un enlace que conecta una página web con una página web diferente y se verá así:

Enlace de texto aquí

La información dentro de la etiqueta le dice a su navegador que este es un hipervínculo (href) que se conecta a la página web 'page.html'. El texto dentro de las etiquetas (Texto del enlace aquí) es la parte del enlace que el visitante ve realmente, y puede hacer clic para saltar a page.html. Si está vinculando a una página en su sitio desde una página ubicada en el mismo sitio, puede omitir la información del dominio. Por ejemplo, si estaba creando un enlace en su página ubicada en www.domain.com/home.html y el enlace conectado a la página de destino www.domain.com/page.html, podría escribir el enlace como y omitir el información de nombre de dominio. Si omite el nombre de dominio, el navegador asumirá que la página de destino se encuentra en el mismo sitio web que la página de enlace.

El ancla nombrada (a menudo llamada simplemente 'ancla') tiene un propósito diferente. Como habrás adivinado por el nombre, un ancla crea una bandera invisible en la página que le dice a tu navegador dónde aterrizar cuando configuras un enlace que deja caer a los visitantes en un punto específico de una página. Un ancla se ve así:



Por lo general, un ancla no contiene ningún texto entre las etiquetas de apertura y cierre, porque está ahí simplemente para marcar un punto en la página. Para crear un enlace que permita a los visitantes saltar a este lugar en la página desde una página diferente, puede crear un hipervínculo como este:

Visita la sección de publicaciones

El '#' dentro del enlace le dice al navegador que se está vinculando a un ancla con nombre. Si desea crear un hipervínculo que dirija a un visitante a una sección diferente de la misma página, se vería así:

Visita la sección de publicaciones

Otra parte importante de sus hipervínculos es el atributo 'target'. Esto le dice al navegador cómo mostrar la página de destino. Tiene tres opciones principales: 'target = "_ blank",' 'target = "_ self",' y 'target = "_ top".'

El argumento '_blank' abrirá la página vinculada en una nueva ventana. Esto es particularmente útil cuando se vincula a un sitio externo, ya que el visitante puede navegar a través del nuevo sitio hasta el contenido de su corazón sin perder su ubicación en su sitio. También es mejor abrir documentos como PDF en una nueva ventana, ya que los visitantes a menudo cierran automáticamente el documento cuando terminan con él.

El argumento '_self' hace que la página vinculada reemplace la página actual en la ventana del navegador existente. Esto es mejor para enlaces dentro de su sitio; de lo contrario, los visitantes que naveguen mucho por su sitio terminarán con muchas ventanas abiertas, lo que puede ser extremadamente molesto. Este es el argumento predeterminado para el atributo 'target', por lo que si no especifica un target, sus enlaces siempre usarán la ventana del navegador existente.

El argumento '_top' se usa generalmente en sitios web de conjuntos de marcos y le dice al navegador que sobrescriba todo el conjunto de marcos, en lugar de simplemente cargar la nueva página en cualquier parte del conjunto de marcos que contenga el enlace original.

Instrucciones De Vídeo: Curso de HTML y CSS #9 - HTML: Enlaces (Mayo 2024).