Programación en XHTML: enlaces
Hipervínculos, enlaces o links.
Los enlaces (links) son los elementos más importantes de una página, a través de ellos es posible saltar de un documento web a otro, lo que conocemos comúnmente como "navegar" o "navegación". El sistema con el que está constituida la Web se basa en Hipertexto, cientos de miles de páginas conectadas entre sí a través de un sistema de enlaces. Los enlaces definen la estructura de nuestro sitio web, cómo estan conectadas nuestras páginas internamente y también hacia el resto del mundo.
En una página web un enlace puede ser una simple palabra, frase, imagen, etc. Para el caso de palabras, es fácil de identificar, por defecto el navegador las muestra subrayadas y de color azul y al posicionar el puntero del mouse sobre ella, éste se transforma en una mano que indica que al hacer clic puedo "saltar" hacia otra parte. Estos son los valores por defecto, ya el color y comportamiento del puntero dependen de la configuracion del navegador y del sistema. Además, también es posible cambiar el aspecto visual de los enlaces a través de CSS. Por ejemplo, una práctica habitual es quitar el subrayado y cambiar el color predeterminado.
Para definir un enlace se utiliza la etiqueta "a" junto a una serie de parámetros.
Por ejemplo:
El navegador lo muestra así:
El atributo "href" permite establecer el "destino" del enlace, en el ejemplo anterior "apunta" hacia el archivo llamado "productos.html". Al igual que los archivos de imagenes, el archivo "productos.html" debería estar en el mismo directorio junto a las demás páginas.
Podemos enlazar una página de nuestro sitio web, una página en Internet, una imagen o cualquier otro tipo de archivo. Por ejemplo un archivo comprimido en ZIP o RAR, un archivo en PDF, un documento DOC, ODT, etc.
Clasificación de los enlaces
Los enlaces pueden direccionarnos a otra página dentro de nuestro sitio web, a otra página de Internet. También "saltar" a distintas partes del mismo documento, si este fuera muy extenso. De esta forma, según donde "apunten" se los puede clasificar en:
Enlaces locales
Son aquellos enlaces que apuntan hacia un archivo de nuestro sitio web. Puede ser una página web, una imagen, un archivo PDF, etc. todos alojados en alguna carpeta de nuestro host.
Ejemplo:
Enlaces externos
Son aquellos que apuntan hacia una página de otro sitio web de Internet. En esos casos, en el atributo "href" se debe especificar la dirección URL completa. Verificar que indique el protocolo por ejemplo "http://", sino el enlace no funcionará.
Ejemplo:
Enlaces internos
Llamaremos internos a aquellos enlaces que apuntan hacia una parte o sección de la misma página web, puede ser un título, un parrafo, etc. Para utilizar este tipo de enlaces primero debemos definir las "secciones" en nuestra página utilizando el atributo "id".
Primero definimos las secciones:
<h2 id="hardware">Hardware</h2> <p>Corresponde a la parte física de una computadora. Por ejemplo: teclado, monitor, mouse, disco duro, etc.</p> <h2 id="software">Software</h2> <p>Corresponde a la parte lógica de una computadora, osea son los programas. Por ejemplo: Winamp, Firefox, Quicktime, Winzip, etc.</p>
Luego crear los enlaces que apunten a dichas secciones:
<h2>Menú Principal:</h2> <a href="#hardware" >Concepto de Hardware</a> <a href="#software" >Concepto de Software</a>
Se debe anteponer "#" (signo numeral o almohadilla) al nombre del elemento definido con "id". Este ejemplo es para saltos dentro de la misma página. También se pueden definir enlaces que salten a otra página y a su vez a una sección en particular. Sólo se debe especificar en el atributo "href" el nombre de la página (o dirección URL completa en caso de páginas externas) y al final agregar el nombre.
Por ejemplo:
O bien:
Hacia una cuenta de correo electrónico
Al hacer clic sobre este tipo de enlace se iniciará el cliente de correo electrónico predeterminado (por ejemplo MS Outlook) el cual debe estar debidamente configurado para poder funcionar. Sólo debemos agregar en el atributo "href" mailto: seguido de la dirección de e-mail.
Ejemplo:
Se suele incluir este tipo de enlace pero es poco común que las personas utilicen este tipo de programas. Quedando el mismo sin utilidad. Ya que, de no tener una cuenta previamente configurada, al hacer clic sobre el enlace se inicia el asistente de configuración. Y en la mayoría de los casos se cierra o cancela el mismo.
Establecer una imagen como enlace
Es posible, a través de una imagen, definir un enlace de cualquier tipo. A diferencia de los enlaces de texto, en el contenido de la etiqueta "a" se debe indicar la imagen a mostrar utilizando la etiqueta "img". Suele ser útil para botones de navegación, logos, menús, galerías de imágenes, etc.
Ejemplo:
Última actualización: Junio 2021
EPET20 - Programación Web
Made with Bluefish HTML editor.
WebDesign: AFC2011/2020
