En el lenguaje HTML se usa la etiqueta <img> para la inserción de cualquier tipo de imagen en el documento web.
La sintaxis de esta etiqueta es:
<img src=»imagen.jpg» />
De esta forma se inserta la imagen que se encuentre en la carpeta raíz o donde esté el documento en el que se está trabajando, pero si por ejemplo la imagen está en una carpeta, se tiene que poner la ruta completa, por ejemplo:
<img src=»imagenes/logo.jpg» />
Si estamos trabajando en una carpeta y la imagen se encuentra en la raíz, entonces utilizamos dos puntos (..):
<img src=»../logo.jpg» />
Esta etiqueta no tiene otra de cierre, es decir, </img> no existe, en lugar de esto, se deja un espacio después del último atributo y se coloca la diagonal; <img src=»imagen.gif» />
Los atributos más usados en esta etiqueta son los de tamaño; width y height, su sintaxis es:
<img src=»imagen.jpg» width=»100px» height=»100px» />
De esta manera se puede modificar el tamaño de la imagen. Pero los valores deben ser proporcionales a los originales para que la imagen no se distorsione demasiado.
También se puede usar el atributo border para dar un borde a la imagen;
<img src=»imagen.png» border=»2″ />
Si se quiere poner una descripción corta, que salga al pasar el cursor sobre la imagen, se utiliza el atributo title;
<img src=»imagen.jpg» title=»Descripcion» />
Estos son los atributos más utilizados, se pueden combinar etiquetas para que al dar clic en la imagen nos lleve a alguna página o cosas parecidas, pero eso lo veremos en otros tutoriales.
