¿De qué trata esta lección?
En esta lección aprendemos cómo agregar una imagen a una página web. Añadimos uno o varios enlaces a imágenes. Probamos algunas modificaciones en Paint, ya que un desarrollador web debe tener algún conocimiento básico sobre edición de imágenes.

Nuevas etiquetas de esta lección
<img> - usamos esta etiqueta si necesitamos incluir una imagen en nuestra página web. Esta etiqueta no tiene cierre.
<map> </map> - usamos esta etiqueta si queremos agregar más enlaces a una imagen. En realidad podemos agregar diferentes enlaces a diferentes partes de la imagen.
<area> - esta etiqueta es necesaria para la etiqueta <map>, marcamos las partes de la imagen que son enlaces y definimos las páginas que abrirán los enlaces.
<figure> </figure> - esta etiqueta se puede utilizar para unir una imagen con un texto / título.
<figcaption></figcaption> - el contenido de una etiqueta <figure> define un título para la imagen adjunta.

La etiqueta <img> tiene más atributos:
src – este atributo es el más importante, le agregamos el nombre y la ruta de la imagen que se muestra.
alt – podemos atribuir a esta propiedad un texto que aparece si no se puede mostrar la imagen definida en el atributo src.
width – aunque no es la forma recomendada, podemos definir el ancho de la imagen para que aparezca en el navegador. Esto no significa que realmente cambiemos el tamaño de la imagen, las imágenes aparecen con el ancho dado. 
height – Al igual que el atributo anterior, este es para definir una altura para la imagen.

La etiqueta  <map>  tiene un atributo que usaremos:
name – Tenemos que agregar un identificador / nombre al mapa. Usamos este nombre para hacer referencia al mapa de la imagen.

La etiqueta <area>  tiene más atributos que usaremos:
shape – con este atributo podemos definir la forma / figura del enlace. Los valores posibles son: rect (rectángulo), circle (círculo), poly (polígono), default (las partes de la imagen que permanecen sin un enlace adjunto).
coords – a este atributo agregamos las coordenadas de la forma agregada al atributo de forma.

Para un rectángulo necesitamos las coordenadas de las cuatro esquinas: esto significa ocho valores.
Para un círculo necesitamos definir las coordenadas de los centros y el radio: esto significa tres valores.
El polígono puede tener cualquier número de puntos: esto significa dos valores para cada punto.



La etiqueta <img>:

• Las imágenes deben copiarse a su posición final en la carpeta y nombrarse antes de incluirlas en las páginas HTML. Si los modificamos o los cambiamos de nombre después, debemos corregir todas las referencias a ellos en los documentos HTML.
• El nombre de las imágenes debe ser corto y significativo.
• Podemos dar los tamaños de las imágenes en píxeles o en porcentaje del tamaño original.
• Si cambiamos el tamaño de una imagen utilizando atributos <img>, podemos agregar valor a uno de los atributos (width o height), la imagen se redimensiona proporcionalmente. Si damos ambos tamaños, la imagen podría aparecer distorsionada.
• Aunque podemos dar el tamaño con atributos, la mejor manera es cambiar el tamaño de las imágenes con un editor de imágenes al tamaño que necesitamos para que aparezca. Estas imágenes con los archivos HTML deben viajar a través de Internet, por lo que las imágenes grandes innecesariamente reducen la velocidad de descarga de una página web.

Ejemplo de la etiqueta <img>:


La imagen kv.jpg está en el documento HTML, por lo que solo necesitamos dar su nombre. Por primera vez el ancho es de 100 píxeles. La segunda imagen tiene ambos tamaños agregados, pero los números no son proporcionales, por eso aparece distorsionado. La tercera etiqueta se refiere a un archivo inexistente, por lo que aparece el texto dado al atributo alt.


Si agregamos un título a la primera imagen: el texto aparece debajo de la imagen, el título y la imagen aparecen separados del otro contenido, como un bloque.

La etiqueta <map>:

• Podemos leer las coordenadas necesarias de un editor de imágenes, pero si agregamos tamaños a la imagen en la etiqueta HTML, las coordenadas pueden deslizarse.
• La imagen a la que debemos agregar el mapa debe completarse con un atributo usemap. El valor del atributo debe ser el nombre de los mapas que queremos usar.

Ejemplo de la etiqueta <map>:


La imagen insertada es kv.jpg, el tamaño original no se cambia en el código. El mapa llamado im se aplica a la imagen.
El mapa se describe después de la imagen y contiene tres enlaces con formas diferentes:
El primer enlace tiene forma de polígono, definido con cuatro puntos. Si hacemos clic en esta parte, se abrirá la página de Wikipedia sobre libros.
El segundo enlace tiene la forma de un círculo, se dan las coordenadas del centro y el radio. Cuando hagas clic en la página de Wikipedia sobre el café se abrirá.
La tercera página web abre, cuando hacemos clic en cualquier otro lugar, este enlace que hace referencia a la página sobre desarrollo web.

Redimensionar imágenes
Para redimensionar una imagen grande, podemos usar el programa Paint.

Pestaña Inicio /Cambiar tamaño


Abrimos la imagen y seleccionamos el botón cambiar tamaño. El tamaño se puede dar en píxeles o porcentaje. La opción Mantener relación de aspecto debe estar marcada, solo se debe ingresar un tamaño, el otro se calcula proporcionalmente. 

Si no tiene el programa Paint en su ordenador, puede usar cualquier otro editor de imágenes, como el programa gratuito GIMP o incluso un editor de imágenes en línea. https://pixlr.com/editor/.

Buscando coordenadas
Para crear un mapa necesitamos coordenadas. Podemos definir coordenadas abriendo la imagen en Paint. Moviendo el cursor sobre las coordenadas de la imagen se puede leer desde la parte inferior izquierda de la ventana de Paint (en la imagen 290, 181). El tamaño de la imagen se puede leer desde la parte inferior hasta (400, 300).