Usa como Enlaces otros elementos HTML

Enlaces HTML - expandido

---

CONTINUACIÓN...

Usar imágenes como si fuesen enlaces

Es común usar imágenes como enlaces:

<a href="tutorialHTML5.asp">
 <img src="sonriente.gif" alt="imagen que enlaza al tutorial de HTML5" style="width:42px;height:42px;border:0;">
</a>

Nota: border:0; se añade para prevenir que IE9 (y sus versiones anteriores) muestre un borde alrededor de la imagen (cuando la imagen es un enlace).

---

Creando un marcapaginas

Los marcapaginas HTML se usan para permitirles a los lectores saltarse a partes específicas de una pagina Web.

Los marcapaginas pueden ser utiles si tu pagina web es muy extensa.

Para beneficarte de los marcapaginas en tu página, primero debes añadir el marcapaginas al elemento deseado, y luego crear un enlace que refiera hacia dicha señal o marcapaginas.

Cuando el enlace se cliquea, la pagina se desplazara a la locación que tiene el marcapaginas.

Ejemplo:

Primero, crea un marcapaginas utilizando el atributo id:

<h2 id="tips">Seccion con tips utiles para ti</h2>

Luego, crea un enlace que refiera hacia dicho marcapaginas, desde la misma pagina:

<a href="#tips">Dale un vistazo a la seccion de tips</a>

O, crea un enlace que te mande hasta el marcapaginas, desde otra pagina:

<a href="tutorialHTML5.html#tips"> Dale un vistazo a la seccion previa de tips</a>

Rutas ajenas a la página web actual

Las páginas externas pueden ser referenciadas con una URL absoluta o con una ruta relativa a la corriente o presente pagina web:

• Este ejemplo usa una URL absoluta para enlazarse a una pagina web externa, es decir, un archivo HTML independiente, el cual puede o no estar almacenado localmente, aunque usar una URL absoluta en el primer caso no es algo que se aconseje, lo veremos luego:

  <a href="http://www.ejemplo.com/html/tutorial.html">Tutorial HTML</a>

• Este ejemplo se enlaza a una pagina web externa, es decir, un archivo HTML independiente, que está almacenado localmente, alojado en la carpeta “html” del presente sitio web, termino NO igual a “pagina web”, una página web se encuentra dentro de un sitio web, los dos son términos abstractos distintos, pero el segundo termino(sitio web), podríamos decir que se refiere a una configuración de hardware y software, que forma un servidor o computador dedicado, sobre la cual funciona o se establece un sitio web:

  <a href="/html/tutorial.html">Tutorial HTML</a>

  Para quien esté familiarizado a su disco duro, en el ejemplo de arriba se omite lo que va justo antes de “/html” a razón de que se entiende similar a “C:\html\tutorial.html”, en donde “C:” que es la raíz de todo, puede omitirse “\html\tutorial.html” y equivaldría al contenedor físico-lógico para las páginas web del servidor, es decir, vagamente hablando, equivaldría al sitio web mismo “www.ejemplo.com\html\tutorial.html”. No es lo mismo “html\tutorial.html” que “\html\tutorial.html”, lo veremos luego. Puedes sustituir las “\”s por “/”s a fin facilitar la comprensión.

• Este ejemplo enlaza a una pagina web externa, es decir, un archivo HTML independiente, que está almacenado localmente, alojado en la misma carpeta en donde se encuentra la presente pagina web:

  <a href="tutorial.html">Tutorial HTML</a>

Así que agrega algunos marcapaginas, y suma funcionalidad a tu pagina.

Podrás leer mas sobre las rutas de archivo en una sección posterior, dedicada a las rutas de archivo en HTML.

---

Resumen de lo aprendido

• Usa el elemento <a>para definir un enlace
• Usa el atributo href para definir la dirección del enlace
• Usa el atributo target para definir en donde se abrirá el documento enlazado
• Usa el elemento <img> adentro de un elemento <a>, para usar la imagen como un enlace
• Usa el atributo id (id=“valor”) para definir marcapaginas en una pagina
• Usa el atributo href (href=“#valor”) para enlazar hacia un marcapaginas

final de Enlaces HTML - expandido, a continuación mas temas...