Imatges

Les imatges són possiblement l’element més important dins d’una pàgina web després del text. Poden utilitzar-se com a elements que contenen informació en si mateixos, com en una col·lecció de fotografies d’un viatge, diagrames i gràfics per il·lustrar i completar un text, etc. També poden ser utilitzades simplement com a element decoratiu com, per exemple, els fons que s’utilitzen en alguns documents.

Si desitgem utilitzar una imatge com a part de l’estructura del nostre document utilitzarem l’etiqueta <img>. Observa que aquesta etiqueta no conté res i, per tant, no es tanca amb </img>.

L’etiqueta img inclou necessàriament dos atributs:

• L’atribut src indicarà l’url de la imatge.

• L’atribut alt permetrà definir un text alternatiu que apareixerà quan no siga possible mostrar la imatge. Pensa que és possible inhabilitar les imatges als navegadors, que hi ha dispositius que solament poden mostrar text i que un lector per a persones amb dificultats visuals no podrà mostrar la imatge. En qualsevol dels tres cassos anteriors l’atribut alt serà imprescindible.

Un exemple d’una etiqueta img completa és el següent:

<img src="mapae.png" alt="Mapa d'Espanya">

Estil de les imatges

Dins dels fitxers CSS podem definir l’alçada i amplada que desitgem que tinguen les imatges amb els atributs width i height i en el cas de no utilitzar-los, la imatge es mostrarà a la seua grandaria original.

Naturalment, altres atributs com els marges i vores també es poden utilitzar amb les imatges.

img {
    border: 2px solid red;
    padding: 2px;
    margin: 30px;
    width: 150px;
    height: 300px;
}