Los últimos tutoriales de desarrollo web

Enlaces HTML


Los enlaces se encuentran en casi todas las páginas web. Enlaces permiten a los usuarios hacer clic su camino desde una página a otra.


Enlaces HTML Descripción

un hiperenlace, o simplemente un enlace, es una referencia a los datos que el lector pueda seguir directamente o bien haciendo clic, la grabación, o flotando.

Un hipervínculo apunta a un documento completo o para un elemento específico dentro de un documento. El hipertexto es texto con hipervínculos. El texto que está vinculado desde se llama el ancla de texto.

Un sistema de software que se utiliza para la visualización y creación de hipertexto es un sistema de hipertexto, y para crear un hipervínculo es un hipervínculo (o simplemente para enlazar). Un siguiente hipervínculos usuario se dice para navegar o navegar por la hipertexto.


Enlaces hipervínculos HTML -

enlaces HTML son hipervínculos.

Un hipervínculo es un texto o una imagen puede hacer clic en, y saltar a otro documento.


Enlaces HTML - Sintaxis

En HTML, los enlaces se definen con el <a> etiqueta:

<a href=" url "> link text </a>

Ejemplo

<a href="http://www.w3ii.com/html/default.html">Visit our HTML tutorial</a>
Inténtalo tú mismo "

El href atributo especifica la dirección de destino (http://www.w3ii.com/html/default.html)

El texto del enlace es la parte visible (Visit our HTML tutorial) .

Al hacer clic en el texto del enlace, le enviará a la dirección especificada.

El texto del enlace no tiene que ser un texto. Puede ser una imagen HTML o cualquier otro elemento HTML.

Sin una barra diagonal en las direcciones de las subcarpetas, es posible generar dos peticiones al servidor. Muchos servidores agregarán automáticamente una barra diagonal a la dirección, y luego crear una nueva solicitud.


Enlaces locales

El ejemplo anterior utiliza una URL absoluta (A full web address) .

Un local de enlace (link to the same web site) se especifica con una URL relativa (without http://www.... ) .

Ejemplo

<a href="html_images.asp">HTML Images</a>
Inténtalo tú mismo "

Enlaces HTML - Colores

Al mover el ratón sobre un enlace, dos cosas van a suceder normalmente:

  • La flecha del ratón se convertirá en una manita
  • El color del elemento de enlace cambiará

Por defecto, aparecerá un enlace como este (in all browsers) :

  • Un enlace no visitado está subrayado y azul
  • Un enlace visitado es subrayada y púrpura
  • Un vínculo activo es subrayada y rojo

Puede cambiar los colores por defecto, mediante el uso de estilos:

Ejemplo

<style>
a:link    {color:green; background-color:transparent; text-decoration:none}
a:visited {color:pink; background-color:transparent; text-decoration:none}
a:hover   {color:red; background-color:transparent; text-decoration:underline}
a:active  {color:yellow; background-color:transparent; text-decoration:underline}
</style>
Inténtalo tú mismo "

Enlaces HTML - El target de atributos

El target atributo especifica dónde abrir el documento vinculado.

En este ejemplo se va a abrir el documento vinculado en una nueva ventana del navegador o en una nueva pestaña:

Ejemplo

<a href="http://www.w3ii.com/" target="_blank">Visit w3ii!</a>
Inténtalo tú mismo "
Valor objetivo Descripción
_blank Abre el documento vinculado en una nueva ventana o pestaña
_self Abre el documento vinculado en el mismo marco que se ha hecho clic (this is default)
_parent Abre el documento vinculado en el marco padre
_top Abre el documento vinculado en el cuerpo completo de la ventana
framename Abre el documento vinculado en un marco llamado

Si su página web está bloqueado en un marco, puede utilizar target="_top" para salir de la trama:

Ejemplo

<a href="http://www.w3ii.com/html/default.html" target="_top">HTML5 tutorial!</a>
Inténtalo tú mismo "

Enlaces HTML - imagen como Enlace

Es común el uso de imágenes como enlaces:

Ejemplo

<a href="default.html">
  <img src="smiley.gif" alt="HTML tutorial" style="width:42px;height:42px;border:0">
</a>
Inténtalo tú mismo "

border: 0 se añade para evitar IE9 (and earlier) muestre un borde alrededor de la imagen.


Enlaces HTML - crear un marcador

marcadores HTML se utilizan para permitir a los lectores a saltar a partes específicas de una página Web.

Marcadores son prácticos si su sitio web tiene páginas largas.

Para hacer un marcador, primero debe crear el marcador y, a continuación, añadir un enlace a ella.

Cuando se hace clic en el enlace, la página se desplazará a la ubicación con el marcador.

Ejemplo

En primer lugar, crear un marcador con el id de atributo:

<h2 id="tips">Useful Tips Section</h2>

A continuación, agregue un enlace con el marcador ("Useful Tips Section") , desde dentro de la misma página:

<a href="#tips">Visit the Useful Tips Section</a>

O bien, añadir un enlace al marcador ("Useful Tips Section") , desde otra página:

Ejemplo

<a href="html_tips.html#tips">Visit the Useful Tips Section</a>
Inténtalo tú mismo "

Resumen del capítulo

  • Utilice el código HTML <a> elemento para definir un vínculo
  • Utilice el código HTML href atributo para definir la dirección del enlace
  • Utilice el código HTML target de atributos para definir dónde abrir el documento vinculado
  • Utilice el código HTML <img> elemento (inside <a> ) a utilizar una imagen como un enlace
  • Utilice el código HTML id atributo ( id=" value ") para definir los marcadores en una página
  • Utilice el código HTML href atributo ( href="# value ") para enlazar con el marcador

Ponte a prueba con los ejercicios!

Ejercicio 1 » Ejercicio 2» Ejercicio 3 » Ejercicio 4» Ejercicio 5 »


Etiquetas HTML Link

Etiqueta Descripción
<a> Define un hipervínculo