8. Imatges

Per inserir imatges a pàgines HTML, farem servir l'etiqueta <img> amb els paràmetres corresponents. Com veurem a l'exemple, l'etiqueta <img>, quasi sempre, estarà dins un paràgraf. D'aquesta manera es podran alinear i mantenir els marges amb els altres elements de la pàgina web. Tots els editors d'HTML tenen l'opció d'inserir imatges a la barra d'eines, per tant, és millor que inserim la imatge amb aquesta opció i després, si escau, modifiquem els paràmetres en el codi HTML.

El Notepad++, l'editor de text que farem servir en aquesta activitat, no és un editor d'HTML. Per tant, per inserir-hi imatges haureu d'indicar el nom de la imatge que hi voleu incorporar. Per fer servir aquesta opció, heu de tenir en compte que el fitxer (la imatge) ha d'estar emmagatzemat a la mateixa carpeta que el fitxer des del qual es fa la crida. En el nostre cas, en la mateixa carpeta que tinguem la Plantilla_pagina_HTML.html.

La sintaxi de l'etiqueta <img> conté:

• src="Imagen_1.jpg" (conté l'adreça de la imatge que s'ha de mostrar)
• alt="Les cases de muntanya" (conté la descripció que es veurà al navegador, si no es pot carregar la imatge. A més, també es fa servir com a descripció per implementar l'accessibilitat. Convé escriure-la)
• title="Les cases de muntanya" (conté el text emergent que es veurà quan ens situem amb el cursor damunt la imatge)
• width="700" (indica l'amplada de la imatge, en aquest cas, en píxels)
• height="174" (indica l'alçària de la imatge, en aquest cas, en píxels)

Si ens fixam en l'exemple, la imatge està alineada a l'esquerra, gràcies a l'estil del paràgraf.

<p style="text-align: left;"><img src="Imagen_1.jpg" alt="Les cases de muntanya" title="Les cases de muntanya" width="700" height="174" /></p>

Ara centrarem la imatge, amb l'estil de paràgraf.

<p style="text-align: center;"><img src="Imagen_1.jpg" alt="Les cases de muntanya" title="Les cases de muntanya" width="700" height="174" /></p>

I finalment, alinearem la imatge a la dreta, també mitjançant l'estil de paràgraf.

<p style="text-align: right;"><img src="Imagen_1.jpg" alt="Les cases de muntanya" title="Les cases de muntanya" width="700" height="174" /></p>

Si volem que la imatge ocupi tota l'amplada de la pantalla, o un percentatge d'aquesta, el que haurem de fer és eliminar el paràmetre height="174" que hi havia i modificar el paràmetre width="700" amb el percentatge que volem. En l'exemple, volem que ocupi el 100 % de l'amplada de la pantalla. El navegador calcularà automàticament l'alçària de la imatge, mantenint-ne les proporcions.

<p><img src="Imagen_1.jpg" alt="Les cases de muntanya" title="Les cases de muntanya" width="100%" /></p>

Quan hi volem inserir més d'una imatge, el millor és inserir-les linealment dins el mateix paràgraf, amb la mateixa mida (queda millor visualment) i separades per un espai. A l'exemple, alineam el paràgraf a l'esquerra. Si estrenyem horitzontalment la finestra, veim que les imatges, si no hi caben, van passant a la línia següent, és a dir, es van adaptant a la mida de la finestra del navegador. 

<p style="text-align: left;"><img src="Imagen_2.jpg" alt="Elefant al bosc" title="Elefant al bosc" width="311" height="170" /> <img src="Imagen_3.jpg" alt="Ocell volant" title="Ocell volant" width="311" height="170" /> <img src="Imagen_4.jpg" alt="Conill menjant" title="Conill menjant" width="311" height="170" /></p>

<p style="text-align: center;"><img src="Imagen_2.jpg" alt="Elefant al bosc" title="Elefant al bosc" width="311" height="170" /> <img src="Imagen_3.jpg" alt="Ocell volant" title="Ocell volant" width="311" height="170" /> <img src="Imagen_4.jpg" alt="Conill menjant" title="Conill menjant" width="311" height="170" /></p>

<p style="text-align: right;"><img src="Imagen_2.jpg" alt="Elefant al bosc" title="Elefant al bosc" width="311" height="170" /> <img src="Imagen_3.jpg" alt="Ocell volant" title="Ocell volant" width="311" height="170" /> <img src="Imagen_4.jpg" alt="Conill menjant" title="Conill menjant" width="311" height="170" /></p>

A vegades, quan inserim una foto amb fons blanc, un document escanejat, etc., potser no en podem veure la delimitació.

<p><img src="Imagen_5.jpg" alt="Fons blanc" title="Fons blanc" width="500" height="207" /></p>

Si necessitam que es vegi la delimitació de la imatge, podem afegir-hi un estil de vorera. Per fer-ho, afegim, després del paràmetre title="Fons blanc", l'estil style="border: 1px solid black;" (vorera d'1 píxel d'amplada, color negre, sòlid).

<p><img src="Imagen_5.jpg" alt="Fons blanc" title="Fons blanc" style="border: 1px solid black;" width="500" height="207" /></p>