Blog
Te presento la segunda parte del curso básico de HTML y CSS. Veamos; seguramente muchas veces te has topado con links o hipervínculos, es algo obvio ya que gracias a estos textos especiales es que funciona la web, estos textos que muchas veces vemos resaltados en color azul y con un subrayado simple son los que se encargan de darle el dinamismo a la web para que interactuen las páginas web entre sí. Son casi como un puente entre una página y otra. Aprendamos a usarlos.
¿Qué es un link?
Los enlaces o links se hallan en casi todas las páginas web. Estos le permiten a cada usuario que esté navegando en la web redirigire a otras páginas web con tan solo un clic.
En Internet, un enlace se denomina más apropiadamente hipervínculo y es lo que conecta las páginas web con otras páginas web. Y permite la interacción entre cada una de ellas. Un enlace (“ancla,en español”) es un pequeño lapso de texto que te dirigirá a una sección diferente de la página en la que te encuentras navegando, o incluso; a una página diferente a la que estabas originalmente. Cuando el usuario mueva el mouse sobre un enlace, la flecha del mouse se convertirá en una pequeña mano. Para que puedas crear un enlace, deberás especificar a dónde deseas que se dirija al usuario cuando se haga clic en el texto del enlace especificando el atributo de la etiqueta <a> llamado href.
Por defecto, los enlaces aparecerán de la siguiente manera en todos los navegadores web:
- Un enlace no visitado se encontrará subrayado y su texto estará teñido en azul.
- Un enlace que ya fue visitado (o sea, que ya le dieron clic anteriormente) estará subrayado y su fuente estará en color púrpura.
- Un enlace activo está subrayado y en rojo.
Etiqueta <a>…</a>
Como ya mencionamos la etiqueta <a>…</a> contendrá dentro de sí un enlace o hipervínculo, que puede dirigir al usuario a distintas partes de una página web o incluso a otra página web. Gracias a esta etiqueta el texto que ella encierra toma otra forma o estilo, los cuales le indicarán al usuario que ese texto está funcionando como un hipervínculo activo.
Atributo href
El atributo más importante del elemento <a> es el atributo href, que indica el destino del enlace.
La etiqueta <a>…</a> trabaja en conjunto al atributo href que será el que contenga la ruta del enlace, esto quedará así: <a href=”ruta”>Texto</a>
Enlaces externos
Existen dos tipos de enlaces, los enlaces externos; y los enlaces internos, o marcadores. Un enlace externo va a dirigir al usuario a una nueva página web, una distinta a la que el se hallaba originalmente.
<a href="https://www.google.com/">Este link te dirigirá a Google</a>
Nota: un enlace no tiene que ser texto. Puede ser una imagen o cualquier otro elemento HTML, eso depende totalmente de ti.
Enlaces internos
Para crear un enlace hacia una sección diferente de la misma página en la que te encuentras; debes utilizar un signo de numeral, o mayormente conocido como hastahg (#), en conjunto con la ID del elemento donde deseas que salte tu navegador. Por ejemplo:
<a href="#ejemplo">Haga clic aquí para dirigirte a otra parte de la página web</a>
El elemento ID se denota usando el atributo id:
<h3 id="ejemplo">Texto de ejemplo</h3> <p>Párrafo de ejemplo</p>
Probémoslo:
<!DOCTYPE html> <html> <head> <title>Ejemplo de enlaces</title> <meta charset="utf-8"> </head> <body> <h1>Mi primera página</h1> <p>Esta es mi primera página.</p> <a href="#ejemplo">Haga clic aquí para leer las Preguntas Frecuentes</a> <hr> <h3 id="ejemplo">Preguntas más frecuentes</h3> <p>La primera regla sobre el club de la lucha es que usted no habla del club de la lucha.</p> <p>Sin embargo, si tiene preguntas, por favor envíeme un correo electrónico a foo@bar.com</p> </body> </html>
Salida en pantalla:
Mi primera página Esta es mi primera página. Haga clic aquí para leer las Preguntas Frecuentes Preguntas más frecuentes La primera regla sobre el club de la lucha es que usted no habla del club de la lucha. Sin embargo, si tiene preguntas, por favor envíeme un correo electrónico a foo@bar.com
¡Felicitaciones! Ya terminaste la sección “Links”, no te olvides de poner en práctica lo aprendido, para que así mejores en tu forma de maquetar páginas web. Continua aprendiendo HTML y CSS con nuestro curso gratis:
[…] Links (AprenderHtmlyCss Curso Principiante) […]
[…] Links […]
[…] Links […]
[…] Links […]
[…] Links […]
[…] Links […]