HTML: Imágenes
La etiqueta <img>
La etiqueta <img> se utiliza para insertar imágenes en una página web.
Además esta etiqueta tiene una particularidad y es que forma parte
de un selecto grupo de etiquetas llamadas etiquetas de auto-cierre,
esto significa que no tiene una etiqueta de cierre.
<img />
Aunque no obligatorio, es recomendable que a las etiquetas de auto-cierre se les coloque una barra diagonal al final de la etiqueta de apertura.
Para indicarle a la etiqueta <img> la imagen que debe mostrar,
se utiliza el atributo src (source) y se le asigna la URL de la imagen.
La url puede ser una imagen que tengas en tu dispositivo o una imagen que esté
alojada en internet.
<img src="url-de-la-imagen.jpg" />
Por ejemplo, el siguiente código HTML muestra una imagen de un gato:
<img src="https://cataas.com/cat" />
El resultado sería el siguiente:
miarchivo.html
Genial, ¿verdad? 😺
Además algo divertido, es que para el ejemplo estoy utilizando una web que genera imágenes de gatos aleatorias, si recargas la página verás un gato diferente cada vez.
Atributo ALT
El atributo alt (texto alternativo) es muy importante, ya que se utiliza
para describir la imagen en caso de que no se pueda mostrar o para que personas
con discapacidad visual puedan entender el contenido de la imagen.
Google penalizará el posicionamiento de tu web si no utilizas el atributo alt en tus imágenes.
<img src="url-de-la-imagen.jpg" alt="Descripción de la imagen" />
Por ejemplo, el siguiente código HTML muestra una imagen de un gato con un texto alternativo:
<img src="https://cataas.com/cat" alt="Un gato muy bonito" />
Fijar el tamaño de una imagen
Para fijar el tamaño de una imagen, se pueden utilizar los atributos width y height.
width: Ancho de la imagen en píxeles.
height: Alto de la imagen en píxeles.
<img src="https://cataas.com/cat" width="300" height="300" />
Esto se vería así:
miarchivo.html
En el siguiente capítulo
En el siguiente episodio aprenderemos a usar vídeos en HTML.