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 https://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="https://www.aulaclic.es">aquí</a>.
se verá así: Pulsa aquí.
El atributo href puede ser una dirección absoluta, como https://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="https://www.aulaclic.es" title="Visita la web de aulaClic">aquí</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. 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.
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. 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 |
Cursos Informática Gratuitos Síguenos en: Facebook Sobre aulaClic Política de Cookies
© aulaClic S.L. Todos los derechos reservados. Prohibida la reproducción por cualquier medio.