Enlaces
Son de las etiquetas más importantes en nuestra página web, ya que, estas nos permiten comunicarnos con otras páginas web. Esto es lo que permite construir lo que conocemos como Internet, en donde, las páginas se pueden entrelazar entre ellas. La sintaxis para esta etiqueta es:
<a>. .. </a>
Algo importante, es que, identificarás esta etiqueta porque automáticamente se coloreará de azul y tendrá un subrayado indicando, que podrás redireccionarte a la página web deseada.
Atributos
Ahora bien, al usar solamente la sintaxis mencionada, no podemos aún enlazar a otra página web. Para ello debemos utilizar los atributos de esta etiqueta, a continuación los detallamos:
- href: Este atributos nos permite decidir a que página queremos redireccionarnos. Dentro de este atributo escribiremos la url de la página web a la que queremos ir.
- target: Este atributo permite decidir el lugar en donde se desea abrir en enlace, es decir, en la misma pestaña, una nueva, etc. Para saber como interactúa, es necesario conocer los valores que se le pueden asignar:
- _blank: Permite abrir el enlace en una nueva pestaña.
- _self: Permite abrir el enlace en la misma pestaña.
- _parent: Es útil cuando usamos iframes, permitiendo abrir el enlace en un marco padre, pero de lo contrario, se comporta como _self.
- _top: De igual manera, es útil al usar iframes, ya que permite abrirlo en todo el marco de la ventana.
- title: Este atributo permite asignarle un título a nuestra etiqueta de enlace, permitiendo dar un poco más de información acerca del enlace, y el cual se activará al poner nuestro mouse por encima de la etiqueta.
Estos son los atributos más usados al momento de enlazar nuestras páginas web. Es importante que los conozcamos para entender como funcionan.
Ancla
Esta es la misma etiqueta de enlace que usamos para redireccionarnos a otras páginas web. Con la única diferencia, que, se le conoce como ancla ya que redirecciona a otros elementos en la misma página web. Para ello usamos lo que se conoce como id, es decir, un identificador. Debemos asignar un id como atributo al elemento al que deseamos redireccionar, y en nuestra etiqueta de enlace la llamamos con # (hashtag), por ejemplo:
Etiqueta para redireccionar
<a href="#elemento">Enlace</a>
Elemento al cual redireccionaremos
<p id="elemento">Elemento en la misma página</p>
Con estos elementos podremos ahora enlazar tanto páginas web externas como elementos dentro de nuestra misma página web. Ahora te reto a que lo intentes tú. Intenta enlazar otras páginas utilizando los distintos valores del atributo "target" y experimenta.
Nos vemos la próxima clase ...