Formato

Los enlaces son los que hacen que la web sea la web. Con un simple click de ratón nos transfiere a otra página en cualquier lugar de la World Wide Web.

El formato de un enlace es como lo que sigue:

<a href="http://wikipedia.org">Wikipedia</a>

o esto:

<a href="index.html">Ir al inicio</a>

Veamos cada parte de esta declaración:

Atributos

Atributos, como recordará de la sección con ese título en la Lección 1, son modificadores de los elementos html con valores asignados a los nombres usando nombre="valor" dentro de una etiqueta abierta de un elemento. Se requiere el atributo href para los elementos de hiperenlace.

Hipertexto

El atributo de la etiqueta de hiperenlace, href, representa la referencia de hipertexto. Es el atributo href quien explica al navegador qué destino tiene que cargar cuando se hace clic sobre el hiperenlace (o enlace, como se le llama comunmente). Los enlaces son los vehículos de la World Wide Web y la convierten en algo muy popular.

Ubicación

El valor de un atributo href generalmente es una dirección de web, que describe la ubicación de otra página web. Las direcciones de web también se llaman URLs . Hay dos maneras de especificar la ubicación de un enlace de hipertexto.

Ubicación absoluta

Una ubicación absoluta utiliza el URL entero, así:

http://www.openbookproject.net/tutorials/getdown/manos_html/index.html

No solo es tedioso de escribir, sino que el uso de ubicaciones absolutas dificulta el mover el sitio, lo cual nos lleva a...

Ubicación relativa

Digamos que quiere ir desde

http://www.openbookproject.net/tutorials/getdown/manos_html/lección6.html

hacia

http://www.openbookproject.net/tutorials/getdown/manos_html/lección7.html

Dentro del archivo lección6.html, el enlace solo debe escribirse como:

<a href="lección7.html">Lección 7</a>

lección6.html y lección7.html están en el mismo directorio, y tienen la misma ubicación relativa.

Enlaces dentro del un documento

Los hiperenlaces también pueden enlazar lugares dentro de un documento - en el mismo documento o en otro distinto. Por ejemplo, hacer clic en este enlace le lleva a la sección de formato al principio de esta lección.

Se han combinado dos elementos para realizarlo. Primero, se ha añadido un atributo id="format" en el elemento h2 Format al principio de la lección. Segundo, se ha colocado un elemento de enlace href="#format" alrededor de la palabra este, creando un enlace local.

El enlace a la sección de Atributos de la Lección 1 de arriba es otro ejemplo de un enlace a una ubicación dentro de un documento. En este caso el enlace se ve así:

<a href="lección1.html#attributes">Lección 1</a>

y se ha combinado con el elemento

<h2 id="attributes">Atributos</h2>

para enlazar la Lección 1.

Ejercicios

1. Copie página_minima.html a favoritos.html. Coloque Mis sitios web favoritos en el título y en una cabecera de primer nivel. Cree una lista ordenada con enlaces absolutos a sus 10 principales sitios web. Su favoritos.html completada podría verse como esto.

2. Proyecto: Colocar las piezas juntas

   Edite el fichero manos.html que creó en la Lección 2, haciendo los cambios siguientes:

   • Cambie Elementos de bloque, Elementos en línea, Elementos de objetos, y Caracteres especiales de cabeceras de tercer nivel a listas de ítems. Colóquelos en una lista no ordenada. Enlace Elementos de bloque con el fichero bloque.html que creó en la Lección 3. Elementos en línea debería enlazarse con inline.html, Elementos de objetos con object.html, y Caracteres especiales con special.html.
   • Cambie Ordenadas, No ordenadas, y De definición de cabeceras de tercer nivel a elementos de lista. Póngalos en una lista no ordenada. Enlace Ordenadas al fichero ordered.html que creó en la Lección 4. Enlace también las otras dos etiquetas a sus correspondientes ficheros.
   • Cree otra lista no ordenada bajo la cabecera Tablas con dos ítems: Decimal, Binario, Octal, y Hex y Mi tabla. Enlace la primera con el fichero decbinocthex.html que creó en la Lección 5, y el segundo a mitabla.html.
   • Borre las dos cabeceras de tercer nivel de debajo de Enlaces (Absoluto y Relativo) y en su lugar cree una lista no ordenada con un solo elemento de lista. Coloque el texto Mis sitios web favoritos en este elemento de lista y enlácelo con el fichero favorite.html que ha creado en el ejercicio previo.
   • Para finalizar, añada una lista no ordenada bajo la cabecera Imágenes con los textos Galería I y Galería II en estos ítems de lista. Tendrá que crear estos enlaces en la lección siguiente.
3. Cuando haya finalizado, su página manos.html tendrá que verse como algo como esto, y todos los enlaces deberán cargar las páginas correctas cuando se haga clic en ellos.