Identificarse | Registrarse | FAQ
Anonymous

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> 

que se visualizará así en el navegador:

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> 

Si la página 2 estuviera en una subcarpeta (llamada "subcarpeta"), el enlace tendría el siguiente aspecto:

Ejemplo 3:

<a href="subcarpeta/pagina2.htm">Haz clic para ir a la página 2</a> 

En sentido inverso, enlazar desde la página 2 (en la subcarpeta) a la página 1 se haría usando con el siguiente código:

Ejemplo 4:

<a href="../pagina1.htm">Enlace a la pagina1</a> 

Los dos puntos con la barra, "../", hacen referencia a una carpeta que se encuentra un nivel por encima de donde se encuentra el fichero desde el que se crea el enlace. Siguiendo este mismo sistema, se puede señalar a dos (o más) carpetas en niveles superiores escribiendo "../../".

¿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 llamado id (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> 

Ahora ya puedes crear un enlace a dicho elemento usando la almohadilla "#" en el atributo "href" del elemento 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> 

Vamos a ver un ejemplo para que todo quede claro:

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>
	 

que se visualizará así en el navegador (haz clic en los dos enlaces):

Enlace con el primer encabezado

Enlace con el segundo encabezado

Primer encabezado

Texto texto texto texto

Segundo encabezado

Texto texto texto texto

(Nota: El atributo "id" debe empezar con una letra)

¿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:[email protected]">Envíe un mensaje a nadie en HTML.net</a> 

que se visualizará en el navegador así:

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 atributo href. 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> 

que se verá así en el navegador:

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".



<< Lección 7: Atributos

Lección 9: Imágenes >>

?>