Atributos de la etiqueta <IMG>

1.  src=: este atributo es obligatorio e indica el nombre del archivo de imagen (entre comillas) o la URL que se va a representar.
2.  align=: este atributo permite controlar la alineacion de la imagen, con respecto a un texto o imagen que este en la misma linea.
3.  alt=: este atributo sirve para suplantar la imagen con un texto o titulo, en caso de que la imagen no se vea, o este en carga. Tambien cuando la imagen fue cargada, al pasar el mouse encima nos muestra el texto o titulo que escribimos anteriormente.
4.  title=: este atributo es opcional, sirve para dar un titulo a la imagen, parecido al atributo alt=.
5.  width=: este atributo es opcional, sirve para dar una anchura a la imagen.
6.  height=: este atributo es opcional, sirve para dar una altura a la imagen.
7.  border=: con este atributo podemos especificar un borde que rodee la imagen, y darle un ancho determinado (siempre en pixeles).

---

Aprendiendo a utilizar los atributos

 Ahora que conocemos los atributos de la etiqueta <IMG>, vamos a aprender a colocar imagenes, y vamos a mostrar lo que hace cada atributo.

Atributo	Codigo	Resultado
src=	<img src="https://img.webme.com/pic/h/html-basico/flechadecostado.png">
align="left"	A la izquierda<img src="https://img.webme.com/pic/h/html-basico/flechadecostado.png" align="left">	A la izquierda
align="right"	A la derecha<img src="https://img.webme.com/pic/h/html-basico/flechadecostado.png" align="right">	A la derecha
align="center"	Centrada<img src="https://img.webme.com/pic/h/html-basico/flechadecostado.png" align="center">	Centrada
align="top"	Arriba<img src="https://img.webme.com/pic/h/html-basico/flechadecostado.png" align="top">	Arriba
alt=	<img alt="Esta imagen no se ve, y el texto no se puede seleccionar.Y se muestra el texto" src="http://www.lala.jpg">
title=	<img src="https://img.webme.com/pic/h/html-basico/flechadecostado.png" title="Esta imagen no se ve, pero se muestra el titulo al estar encima de la imagen">
width=	<img width="40" src="http://www.alal.es/images/imagen.gif"> Su anchura es de 40px	Su anchura es de 40px
height=	<img height="20" src="http://www.alal.es/images/imagen.gif"> Su altura es de 20px	Su altura es de 20px
height=     + width=	<img height="20" width="40" src="http://www.alal.es/images/imagen.gif"> Su altura es de 20px, y su anchura de 40px	Su altura es de 20px, y su anchura de 40px
border="1"	<img border="1" src="https://img.webme.com/pic/h/html-basico/flechadecostado.png"> Ahora tiene un borde de 1px de color negro	Ahora tiene un borde de 1px de color negro
border="2"	<img border="2" src="https://img.webme.com/pic/h/html-basico/flechadecostado.png"> Ahora tiene un borde de 2px de color negro	Ahora tiene un borde de 2px de color negro

---

¿Como insertar un link en una imagen?

 Esta es la manera de insertar un link en una imagen, es decir, que al hacer click sobre la imagen, èsta lleve a la pagina deseada.

Abrir en	Codigo	Resultado
La misma ventana	<a href="http://html-basico.es.tl"><img width="100" height="40" border="0" src="http://o.imm.io/Qhw.jpg">
Otra ventana o pestaña	<a target="_blank" href="http://html-basico.es.tl"><img width="100" height="40" border="0" src="http://o.imm.io/Qhw.jpg">