AdNow

loading...

Enlaces HTML

-

Enlaces HTML

❮ AnteriorSiguiente ❯
Los enlaces se encuentran en casi todas las páginas web. Los enlaces permiten a los usuarios hacer clic en el camino de una página a otra.

Enlaces HTML - Hipervínculos

Los enlaces HTML son hipervínculos.
Puede hacer clic en un enlace y saltar a otro documento.
Cuando mueva el mouse sobre un enlace, la flecha del mouse se convertirá en una pequeña mano.
Nota: un enlace no tiene que ser texto. Puede ser una imagen o cualquier otro elemento HTML.

HTML Enlaces - Sintaxis

En HTML, los enlaces se definen con la etiqueta a :
<a href="url">link text</a>

Ejemplo

<a href="https://www.w3schools.com/html/">Visit our HTML tutorial</a>
Pruebelo usted mismo »
El atributo href especifica la dirección de destino (https://www.w3schools.com/html/) del enlace.
El texto del enlace es la parte visible (Visite nuestro tutorial HTML).
Al hacer clic en el texto del enlace, se lo enviará a la dirección especificada.
Nota: Sin una barra inclinada en las direcciones de las subcarpetas, puede generar dos solicitudes al servidor. Muchos servidores agregarán automáticamente una barra inclinada a la dirección y luego crearán una nueva solicitud.

Enlaces locales

El ejemplo anterior usó una URL absoluta (una dirección web completa).
Se especifica un enlace local (enlace al mismo sitio web) con una URL relativa (sin http: // www ....).

Ejemplo

<a href="html_images.asp">HTML Imágenes</a>
Pruebelo usted mismo »

Colores de enlace HTML

Por defecto, un enlace aparecerá así (en todos los navegadores):
  • Un enlace no visitado está subrayado y azul
  • Un enlace visitado está subrayado y morado
  • Un enlace activo está subrayado y rojo
Puede cambiar los colores predeterminados, mediante el uso de estilos:

Ejemplo

Pruebelo usted mismo »

HTML Enlaces - El atributo de destino

El atributo de destino especifica dónde abrir el documento vinculado.
El atributo de destino puede tener uno de los siguientes valores:
  • _blank: abre el documento vinculado en una nueva ventana o pestaña
  • _self: abre el documento vinculado en la misma ventana / pestaña en la que se hizo clic (es el valor predeterminado)
  • _parent: abre el documento vinculado en el marco principal
  • _top: abre el documento vinculado en todo el cuerpo de la ventana
  • framename: abre el documento vinculado en un marco con nombre
Este ejemplo abrirá el documento vinculado en una nueva ventana / pestaña del navegador:

Ejemplo

<a href="https://www.w3schools.com/" target="_blank">Visit W3Schools!</a>
Pruebelo usted mismo »
Consejo: si su página web está bloqueada en un marco, puede usar target = "_ top" para salir del marco:

Ejemplo

<a href="https://www.w3schools.com/html/" target="_top">HTML5 tutorial!</a>
Pruebelo usted mismo »

HTML Enlaces - Image as Link

Es común usar imágenes como enlaces:

Ejemplo

<a href="default.asp">
  <img src="smiley.gif" alt="HTML tutorial"style="width:42px;height:42px;border:0;">
</a>
Pruebelo usted mismo »
Nota: borde: 0; se agrega para evitar que IE9 (y anterior) muestre un borde alrededor de la imagen (cuando la imagen es un enlace).

HTML Enlaces - Create a Bookmark

Los marcadores HTML se utilizan para permitir a los lectores saltar a partes específicas de una página web.
Los marcadores pueden ser útiles si su página web es muy larga.
Para hacer un marcador, primero debe crear el marcador y luego agregarle un enlace.
Cuando se hace clic en el enlace, la página se desplazará a la ubicación con el marcador.

Ejemplo

Primero, crea un marcador con el atributo id:
<h2 id="C4">Chapter 4</h2>
Luego, agregue un enlace al marcador ("Saltar al Capítulo 4"), desde dentro de la misma página:
<a href="#C4">Jump to Chapter 4</a>
O bien, agregue un enlace al marcador ("Saltar al Capítulo 4"), desde otra página:

Ejemplo

<a href="html_demo.php#C4">Jump to Chapter 4</a>
Pruebelo usted mismo »

Caminos Externos

Las páginas externas se pueden referenciar con una URL completa o con una ruta relativa a la página web actual.
Este ejemplo usa una URL completa para vincular a una página web:

Ejemplo

<a href="https://www.w3schools.com/html/default.asp">HTML tutorial</a>
Este ejemplo vincula a una página ubicada en la carpeta html en el sitio web actual:

Ejemplo

<a href="/html/default.asp">HTML tutorial</a>
Este ejemplo vincula a una página ubicada en la misma carpeta que la página actual:

Ejemplo

<a href="default.asp">HTML tutorial</a>
Puede leer más sobre rutas de archivos en el capítulo Rutas de archivos HTML .

Resumen del capítulo

  • Usa el elemento a para definir un enlace
  • Use el atributo href para definir la dirección del enlace
  • Use el atributo de destino para definir dónde abrir el documento vinculado
  • Usa el elemento img (dentro de a) para usar una imagen como enlace
  • Use el atributo id (id = " value ") para definir marcadores en una página
  • Use el atributo href (href = "# value ") para vincular al marcador

Ponte a prueba con ejercicios!

Etiquetas de enlace HTML

TagDescription
aDefines a hyperlink

❮ AnteriorSiguiente ❯

Formulario de contacto

Nombre

Correo electrónico *

Mensaje *

Entradas más populares de este blog

Listado pasaporte y cedulas SAIME 2018

-
Imagen
click aqui para descargar el listado en formato pdf 21 de Julio de 2018 Con el propósito de dar celeridad al proceso de entrega de documentos, el Director General del Servicio Administrativo de Identificación, Migración y Extranjería (Saime), Gustavo Vizcaíno Gil, ordenó habilitar todas las oficinas del país los días sábados, únicamente para la entrega de cédulas y pasaportes. Saime abre sus oficinas los días sábados Con el propósito de dar celeridad al proceso de entrega de documentos, el Director General del Servicio Administrativo de Identificación, Migración y Extranjería (Saime), Gustavo Vizcaíno Gil, ordenó habilitar todas las oficinas del país los días sábados, únicamente para la entrega de cédulas y pasaportes. Los usuarios podrán ingresar en la página web del Saime  www.saime.gob.ve  y verificar si están en el listado donde le indicará en que oficina pueden retirar sus documentos de identificación. Esta iniciativa  da cumplimiento a la sép...
Leer más

Etiqueta HTML < abbr >

-
Etiqueta  HTML  <abbr> ❮ Referencia HTML completa anterior Siguiente  ❯ Ejemplo Una abreviatura se marca de la siguiente manera: The  < abbr  title ="World Health Organization" > WHO < /abbr >  was founded in 1948. Pruebelo usted mismo » Definición y uso La etiqueta <abbr> define una abreviatura o un acrónimo, como "Sr.", "Dec.", "ASAP", "ATM". Sugerencia:  una abreviatura y un acrónimo son versiones abreviadas de otra cosa.  Ambos a menudo se representan como una serie de letras. Marcar las abreviaturas puede proporcionar información útil para navegadores, sistemas de traducción y motores de búsqueda. Soporte del navegador Element <abbr> Yes Yes Yes Yes Yes Consejos y notas Consejo:  El atributo de título global se puede usar en la etiqueta <abbr> para mostrar la versión completa de la abreviatura / acrónimo al pasar el mouse sobre el elemento <abbr>. Difere...
Leer más

HTML < a > tag

-
HTML  <a>  día ❮ Referencia HTML completa anterior Siguiente  ❯ Ejemplo Un enlace a W3Schools.com: < a  href ="https://www.w3schools.com" > Visit W3Schools.com! < /a > Pruebelo usted mismo » More "Pruebelo usted mismo" examples below. Definición y uso La etiqueta <a> define un hipervínculo, que se usa para vincular de una página a otra. El atributo más importante del elemento <a> es el atributo href, que indica el destino del enlace. Por defecto, los enlaces aparecerán de la siguiente manera en todos los navegadores: Un enlace no visitado está subrayado y azul Un enlace visitado está subrayado y morado Un enlace activo está subrayado y rojo Soporte del navegador Element <a> Yes Yes Yes Yes Yes Consejos y notas Sugerencia:  los siguientes atributos: descarga, hreflang, medios, rel, destino y tipo no pueden estar presentes si el atributo href no está presente. Consejo:  Normalmente,...
Leer más

Visitas a este blog