Imagen con link

Bienvenidos a un nuevo tutorial, continuando con HTML básico, hoy aprenderemos a agregar una imagen a nuestra web, y luego agregarle un LINK a esa imagen.
Sin perder tiempo en detalles, veamos el primero código, este sirve para agregar una imagen de la manera mas sencilla y prática:

<img src="imagen.jpg">

1)Comenzemos analizar el código, en este caso no es compuesto como habíamos visto en el anterior tutorial, sino que es un código totalmente simple.
La parte editable es la siguiente:

imagen.jpg

2)Lo que debemos hacer ahi, es poner la ruta en donde está nuestra imagen.
Hay que tener mucho cuidado, ya que si la ruta no es la correcta, la imagen no se vera.
Si nuestra imagen está alojada en la red, no abría problemas, ya que simplemente copiamos la URL completa y la pegamos entre las comillas del código.
Si la imagen la alojamos en la misma carpeta del servidor, debemos estar seguro que la ruta sea la correcta.
En mi ejemplo, tomaré la imagen que tenemos en nuestro sitio, el cual muestra una banderas para el traductor del sitio.
El código con la ruta agregada, nos quedaría asi:

<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhZuFs0r8iDG5mAOAx7-CV4EevO6RlCRNvb8KTFnFGyu6uBzHXPhFp-P0d32DVn0hGjXSg751pwcIg19mvm0Z8FxjQ19JiGR9KDsrfK_AlcHz7-zbkOWFLE3Aalxvz_QrRNxlMAa1oPEfR0/s320/1.jpg">

3)Ahora lo que haré, será ejecutar el código en la siguiente linea.



4)Y efectivamente al ejecutar el código, podemos ver nuestra imagen.
Algo que deben tener en cuenta, es la extensión de nuestra imagen, recuerdo que si es .gif o .png deben agregalo.
Como dije anteriormente, esté código es totalmente básico, pero ¿Qué significa que este código sea básico?
Significa que no tiene atributos o parámetros si es que asi lo desean llamar, este tipo de atributos nos permitirá por ejemplo hacer que la imagen tenga un enlace al hacer clic en ella, indicar su tamaño y otros.
Entre los atributos más usados tenemos:
a)Height: nos indica la altura de la imagen
b)Width: nos indica la anchura de la imagen
c)Border: si agregamos un número mayor a 0, podremos ver un borde que contornea la iamgen, cuanto mayor sea el número, mayor será el grosor
d)Title: Se usa para agregar una descripción al apoyar el mouse sobre la imagen.
e)<a href="direccion": Agrega un enlace a la imagen
A continuación mostraré un ejemplo de como agregar estos atributos:

<a href="http://rankingmu.com"><img
src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhZuFs0r8iDG5mAOAx7-CV4EevO6RlCRNvb8KTFnFGyu6uBzHXPhFp-P0d32DVn0hGjXSg751pwcIg19mvm0Z8FxjQ19JiGR9KDsrfK_AlcHz7-zbkOWFLE3Aalxvz_QrRNxlMAa1oPEfR0/s320/1.jpg" title="descripcion" WIDTH="245" HEIGHT=30 BORDER=3 ></a>

5)En la siguiente linea, mostraré el código ejecutado. Lo que veremos será la misma imagen que el ejemplo anterior con el enlace.

Espero que les sirva.
Recuerden que si tienen alguna duda pueden dejar su comentario o escribirnos a través de nuestros canales de comunicación.
Será hasta el próximo tutorial asd*

Con tu donación ayudas a mantener el sitio activo