PlanetaPi

¿Cómo podemos poner una imagen en una web?

A veces es útil incluir imágenes, fotos, dibujos en nuestra web. Sin duda quedará más llamativa.

Ponemos todos los archivos de la práctica en la misma carpeta «TUNOMBRE».

Puedes hacer subcarpeta (ej.: IMAGENES) si quieres para meter dentro sólo las fotos.

Para insertar la imagen JPG de un dinosaurio escribimos en el documento HTML

<img src="dinosaur.jpg">

Nota: Igual para otros archivos de imagen BMP, GIF, PNG, …

Si la imagen está en la carpeta IMAGENES que está dentro de la carpeta TUNOMBRE, escribimos

<img src="imagenes/dinosaur.jpg">

Para insertar una imagen que está en otra página web, debemos conseguir la URL, por ejemplo

<img src="https://www.example.com/imagenes/dinosaur.jpg">

Una Web gratuita donde puedes buscar imágenes es https://www.freepik.es/

Sólo tienes que hacer clic con el botón derecho del ratón sobre la foto y «Copiar dirección de la imagen» para obtener su URL en la memoria del PC.

Importante: Esto sólo debe hacerse si la imagen es de dominio público, no imágenes con derechos de autor; por eso es importante que incluyas tus propias imágenes, dibujos, …

ATRIBUTO ALT

Podemos usar el atributo ALT para describir la imagen. Así el navegador sabe de qué trata la imagen (te la posicionará mejor en google) y aparecerá el texto si la imagen tarda en cargar.

<img src="imagenes/dinosaur.jpg" alt="La cabeza del dinosaurio">

ALTURA Y ANCHURA

Debemos intentar mantener la altura (height) y la anchura (width) de forma proporcional. Es posible escribirla en pixeles o en porcentaje. Puedes escribir sólo width o bien height si no quieres modificar ambas.

<img src="imagenes/dinosaur.jpg" alt="La cabeza del dinosaurio"  width="400" height="341">
<img src="imagenes/dinosaur.jpg" alt="La cabeza del dinosaurio"  width="40%">

TÍTULO

<img src="imagenes/dinosaur.jpg"      alt="La cabeza del dinosaurio" width="400" height="341"
 title="Exposición de un T-Rex.">