Unidad 2. HTML básico (V)


2.5. Enlaces

Cualquier página web tiene imágenes o texto, que al pulsarlos nos llevan a otra página del mismo sitio, o a una página de un sitio distinto. Esto es un enlace o hiperenlace (en inglés link o hyperlink) también llamado hipertexto o hipervínculo.

Un enlace se diferencia del texto normal porque al colocar el cursor encima, este cambia de forma y pasa de una flecha a una mano. También es muy frecuente que los enlaces aparezcan subrayados, ya que es la opción por defecto que les asigna el HTML.

En HTML, el enlace se identifica con la etiqueta <a></a>. La forma más básica de un enlace es la siguiente:

<a href="archivo_enlazado">contenido del enlace</a>

El atributo href indica la dirección (URL) a la que se enlaza, que normalmente es un archivo html, por ejemplo http://www.aulaclic.es/index.html . El contenido del enlace es lo que el usuario ve en la página y que al pulsar sobre él nos lleva al enlace. Normalmente es texto o una imagen, en el siguiente ejemplo es el texto aquí.

Pulsa <a href="http://www.aulaclic.es">aquí</a>.

se verá así:       Pulsa aquí.

El atributo href puede ser una dirección absoluta, como http://www.aulaclic.es/paginasweb/ejercicios/citas_celebres.htm, o una direccion relativa, como ejercicios/citas_celebres.htm, de la misma forma que vimos para las imágenes.

Es muy común añadir a los enlaces el atributo title, para que muestre información sobre el destino del enlace cuando el usuario deje unos instantes el cursor encima del enlace. Por ejemplo:

Pulsa aquí. → Pulsa <a href="http://www.aulaclic.es" title="Visita la web de aulaClic">aqu&iacute;</a>.

Por defecto, el enlace se abrirá en la misma ventana. Si queremos que se abra en una nueva ventana, podemos utilizar el atributo target="_blank". Aunque, el W3C, el organismo que regula los estándares del HTML desaconseja su uso, con la idea de que se debe permitir al usuario decidir si quiere abrir el enlace en la misma u otra ventana pulsando con el botón derecho del ratón sobre el enlace, el atributo target se sigue utilizando porque la mayoría de los usuarios pulsan directamente sobre el enlace, sin usar el botón derecho. Así pues si en nuestra página queremos informar sobre la existencia de otra página del mismo tema, colocaremos un enlace a ella y le pondremos el atributo target="_blank" para evitar que el usuario se vaya a esa página y no se acuerde de volver a la nuestra.

Normalmente utilizaremos enlaces para navegar por nuestro sitio. Hemos de evitar enviar al usuario a páginas en las cuales no sepa como volver a la página anterior o como ir a la página principal. Siempre es mejor añadir un enlace volver, que confiar en que el usuario utilice el botón Atrás del navegador. Más adelante, veremos como diseñar un buen sistema de navegación para nuestro sitio web.

Aquí puedes ver un ejemplo con enlaces e imágenes:

<html>
<head>
<title>Floramics. Amigos de las flores</title>
</head>
<body>
<h1>Bienvenido a Floramics</h1>
<h2>Presentación</h2>
<p> En esta web encontrarás información sobre la
asociación y nuestra colección de fotografías de
flores.<br />
Tenemos un índice alfabético con todas las fotografías, o puedes verlas organizadas en diferentes categorías.</p>
<img src="graficos/flor_ejemplo2.jpg" width="150" height="150"
alt="No se encuentra esta imagen" />
<p>Interesante enlace sobre flores: <a href="http://www.mundoflores.net">Mundoflores</a><
h2>Contacto</h2>
<p> Si quieres comunicarte con nosotros
visita nuestra página de contacto. &nbsp;&nbsp;Te esperamos.</p>
</body>
</html>

Puedes copiar el código y pegarlo en la caja de texto que encontrarás en esta página Probar código .

Un enlace también puede llevarnos a una parte concreta dentro de una página. Por ejemplo, si la página es muy larga podemos poner un enlace que nos lleve al principio de la página. En este tema avanzado puedes ver cómo hacer esto y algunas cosas más.

2.6. Divisiones o capas

Una etiqueta muy utilizada es la etiqueta <div></div>. Esta etiqueta forma una caja, un rectángulo, igual que el párrafo. Pero mientras que el párrafo es más común utilizarlo para contener texto, en un div podemos colocar lo que queramos, siempre que respetemos la anidación. Esta etiqueta nos resultara muy útil para distribuir los elementos en nuestras páginas.

Esta etiqueta es denominada de muchas formas: divisiones, capas, cajas, contenedores. Así que puede que a lo largo del curso utilicemos estos nombres para referirnos a ellas.

Por ejemplo, si queremos colocar la imagen de nuestro ejemplo en la parte derecha, crearemos una capa con el estilo "flotar a la derecha" y pondremos la imagen dentro. Más adelante explicaremos el estilo "flotar a la derecha" style="float: right".

<html>
<head>
<title>Floramics. Amigos de las flores</title>
</head>
<body>
<h1>Bienvenido a Floramics</h1>
<h2>Presentación</h2>
<p> En esta web encontrarás información sobre la
asociación y nuestra colección de fotografías de
flores.<br />
Tenemos las fotografías organizadas en diferentes categorías.</p>
<div style="float: right"><img src="graficos/flor_ejemplo2.jpg" width="150" height="150" alt="No se encuentra esta imagen" /></div>
<h2>Contacto</h2>
<p> Si quieres comunicarte con nosotros
visita nuestra página de contacto. &nbsp;&nbsp;Te esperamos.</p>
</body>
</html>

Puedes copiar el código y pegarlo en la caja de texto que encontrarás en esta página Probar código .

• Ejercicio propuesto la Unidad 2 • Prueba evaluativa de la Unidad 2

Enero-2010
Pág. 2.5

Atrás  Inicio  Adelante




.