Lección 8: Enlaces
En esta lección aprenderás a crear enlaces entre páginas.¿Qué necesito para crear un enlace?
Para crear enlaces se usa lo que siempre usamos al codificar HTML: un elemento. Un sencillo elemento con un atributo y podrás enlazar con cualquier cosa y con todo. Vas a ver ahora mismo un ejemplo de cómo se codificaría un enlace a HTML.net:Ejemplo 1:
<a href="http://www.html.net/">Desde aquí enlazamos con HTML.net</a>
El elemento
a
es la abreviatura de "anchor" (ancla, en español). Y el atributo href
es la abreviatura de "hypertext reference" (es decir, referencia hipertextual), que especifica hacia dónde nos dirige el enlace; normalmente, una dirección de internet o un nombre de fichero.En el ejemplo anterior el atributo
href
contiene el valor "http://www.html.net", que es la dirección completa de HTML.net y que se denomina URL (Uniform Resource Locator; en español, localizador de recursos uniforme). Ten en cuenta que "http://" siempre debe incluirse en las URLs. El texto "Desde aquí enlazamos con HTML.net" es el que aparece en el navegador como enlace. Recuerda cerrar el elemento con la etiqueta de cierre </a>
.¿Y se pueden crear enclaces entre mis propias páginas?
Si quieres crear enlaces entre las páginas de un mismo sitio web, no es necesario incluir la dirección completa (el URL) del documento. Por ejemplo, si has creado dos páginas (llamémoslas pagina1.htm y pagina2.htm) y las has guardado en la misma carpeta, puedes enlazar una página con la otra con sólo escribir el nombre del fichero en el enlace. Si este es el caso, enlazar la pagina1.htm con la pagina2.htm tendría el siguiente aspecto:Ejemplo 2:
<a href="pagina2.htm">Haz clic para ir a la página 2</a>
Ejemplo 3:
<a href="subcarpeta/pagina2.htm">Haz clic para ir a la página 2</a>
Ejemplo 4:
<a href="../pagina1.htm">Enlace a la pagina1</a>
¿Has captado cómo funciona el sistema? De forma alternativa, siempre puedes escribir la dirección completa del fichero (el URL).
¿Y se pueden crear enlaces internos dentro de una misma página?
También puedes crear enlaces internos dentro de una misma página; por ejemplo, una tabla de contenidos en la parte superior de la página con enlaces a cada capítulo que se encuentra más abajo. Todo lo que necesitas es usar un atributo muy útil llamadoid
(identification, en inglés; es decir, identificador) y el símbolo "#", conocido como almohadilla.Usa el atributo
id
para marcar el elemento con el que quieras enlazar. Por ejemplo:<h1 id="encabezado1">Primer encabezado</h1>
a
. El símbolo "#" debe ir seguido del id
de la etiqueta con la que quieres enlazar. Por ejemplo:<a href="#encabezado1">Enlace con el primer encabezado</a>
Ejemplo 5:
<html>
<head>
</head>
<body>
<p><a href="#encabezado1">Enlace con el primer encabezado</a></p>
<p><a href="#encabezado2">Enlace con el segundo encabezado</a></p>
<h1 id="encabezado1">Primer encabezado</h1>
<p>Texto texto texto texto</p>
<h1 id="encabezado2">Segundo encabezado</h1>
<p>Texto texto texto texto</p>
</body>
</html>
Enlace con el primer encabezado
Enlace con el segundo encabezado
(Nota: El atributo "id" debe empezar con una letra)Enlace con el segundo encabezado
Primer encabezado
Texto texto texto textoSegundo encabezado
Texto texto texto texto¿Puedo crear enlaces a otras cosas?
También puedes crear enlaces a una dirección de correo electrónico. Se hace casi igual que cuando se crea un enlace a un documento:Ejemplo 6:
<a href="mailto:nobody@html.net">Envíe un mensaje a nadie en HTML.net</a>
La única diferencia entre un enlace a una dirección de correo electrónico y un enlace a un fichero consiste en que en lugar de escribir la dirección del documento, se escribe:
mailto:
seguido de dicha dirección de correo electrónico. Al hacer clic sobre el enlace se abre el programa de correo por defecto con un nuevo mensaje en blanco dirigido a la dirección de correo especificada. Téngase en cuenta que esta fúnción sólo funcionará si tienes instalado un programa de correo electrónico en tu ordenador. ¡Pruébalo!¿Hay más atributos que debería conocer?
Para crear un enlace, siempre tienes que usar el atributohref
. Además, también puedes poner un título (atributo title
) al enlace:Ejemplo 7:
<a href="http://www.html.net/" title="Visita HTML.net y aprende HTML">HTML.net</a>
El atributo
title
se usa para incluir una breve descripción del enlace. Si se coloca el cursor sobre el enlace -sin pulsarlo- aparecerá el texto "Visita HTML.net y aprende HTML".
No hay comentarios:
Publicar un comentario