Crear enlaces con imágenes en HTML

En el capítulo anterior vimos como crear un enlace (link) utilizando un texto. Como sabes, no solo puedes crear enlaces usando texto, sino también imágen, puedes insertar una imagen en tu página utilizando <img>:

<img border=”0″ src=”dibujo.gif” width=”98″ height=”25″>

Esto insertaría la imagen “dibujo.gif” en la página. Ten en cuenta que si pruebas este ejemplo en tu ordenador debe existir una imagen con este nombre. Si no es así puedes utilizar cualquiera que tengas. También es importante que la imagen esté guardada en la misma carpeta que el documento html donde lo estás creando, si no es así, la imagen no se verá.

En el caso de que estés utilizando una imagen que esté en una carpeta distinta (por ejemplo ‘images’) tendrás que modificar la línea de esta forma:

<img border=”0″ src=”images/dibujo.gif” width=”98″ height=”25″>

… es decir, es muy importante que indiques el camino (o path) donde está almacenada la imagen. (Si no sabes qué es una carpeta o un ‘camino’ o un ‘path’ deberías aprender antes algo de Windows, tienes tutoriales gratis en www.territoriopc.com)

Para hacer que esta imagen sea un enlace que salte a la página de Disney simplemente hay que realizar la siguiente modificación:

<a href=”www.disney.com”><img border=”0″ src=”dibujo.gif” width=”98″ height=”25″></a>

De esta forma tan simple, al hacer click con el ratón sobre la imagen, automáticamente pasaremos a la página www.disney.com

Puedes probar en una página de prueba con varios enlaces de este tipo, eso si, asegúrate de utilizar imágenes que ya existan en tu ordenador

Existen otras posibilidades a la hora de crear enlaces, por ejemplo puedes llegar a crear un botón. Pero para ello es mejor utilizar JavaScript, que es un sencillo lenguaje de programación gracias al cual podemos mejorar sensiblemente el aspecto de nuestras páginas (tienes tutoriales gratis en www.territoriopc.com)