Il tag <img>
Il tag <img> serve per inserire un'immagine in una pagina.
Nel codice non viene inserita l'immagine vera e propria ma nell'attributo src viene indicato l'URL della sua posizione nel file system del sito.
Il percorso delle immagini può essere assoluto, nella forma src="http://www.nomesito.it/immagine.png", oppure relativo, nella forma src="../../immagine.png" dove ad ogni ../ corrisponde uno spostamento alla cartella superiore.
E' anche possibile inserire l'URL di una immagine che si trova su un sito esterno.
E' obbligatorio l'attributo alt che definisce un testo alternativo all'immagine utile agli screen reader o nei casi in cui non sia possibile caricare l'immagine.
Si usa anche indicare nell'attributo width o height la larghezza o l'altezza dell'immagine in modo che il browser abbia già un'indicazione del suo ingombro.
La grandezza è espressa di default in pixel quindi non bisogna indicare l'unità di misura.
L'attributo width o height può essere usato anche per visualizzare l'immagine in una dimensione diversa senza modificare l'immagine originale.
Spesso un'immagine è contenuta in un tag <a> in modo da creare un link.
Non necessita del tag di chiusura in quanto è un elemento vuoto.
L'immagine linkata deve avere estensione png oppure jpg/jpeg o gif.
C'è un altro formato che però non è supportato da tutti i browser, l'SVG (Scalar Vector Graphic). A differenza degli altri formati che sono bitmap, il formato SVG è vettoriale, quindi è possibile ingrandire l'immagine senza perdita di definizione.
I tag <map> e <area>
Il tag <map> serve per associare una mappa ad un'immagine che la divide in diverse aree cliccabili, definite attraverso il tag <area>.
L'immagine in questione deve avere impostato l'attributo usemap con valore il name definito nel tag <map>.
Il tipico esempio è quello di una cartina dell'Italia in cui ogni regione è un'area dell'immagine.
Il tag <area> non necessita del tag di chiusura.
Per definire le aree bisogna indicarne la forma nell'attributo shape e le coordinate nell'attributo coords.
Per definire un rettangolo l'attributo shape ha valore "rect" e l'attributo coords ha due valori: le coordinate del punto in alto a sinistra e quelle del punto in basso a destra del rettangolo.
Per definire un'area circolare l'attributo shape ha valore "circ" e coords ha due valori: le coordinate del centro del cerchio e la dimensione in pixel del raggio.
Per definire una forma poligonale, ad esempio un pentagono, l'attributo shape ha valore "poly" e coords ha i valori delle coordinate di ogni vertice, in questo caso ci saranno cinque coppie di valori sugli assi x e y.
La favicon
La favicon è l'icona che compare nella scheda del browser e nell'elenco dei preferiti.
La favicon non viene considerata un'immagine come le altre, infatti non va inserita nel body ma nell'head, non usa il tag <img> ma il tag <link> e deve essere in formato ICO.
In alcuni browser è accettata anche come immagine PNG o GIF.
Gli attributi rel con valore "shortcut icon" e l'attributo src con valore l'URL dell'immagine sono obbligatori.
I dispositivi mobili Apple richiedono invece che l'attributo rel abbia valore "apple-touch-icon" o "apple-touch-icon-precomposed", quest'ultimo indica al browser che non deve essere aggiunto l'effetto riflesso tipico delle icone Apple.
I dispositivi con sistema operativo Windows 8 invece non richiedono il tag <link> ma due tag <meta>, uno che specifica lo sfondo dell'icona e uno che specifica l'immagine vera e propria.
La favicon è sempre quadrata e ha dimensioni 16x16 pixel, anche se alcuni browser accettano il formato 32x32.
I dispositivi Apple richiedono invece dimensioni 57×57 o 114×114 per gli schermi ad alta risoluzione.
<p>Possiamo inserire un'immagine presente in un sito esterno e con un link, come questa: <a
href="https://www.google.it/" rel="external" target="_blank" title="vai sulla pagina di Google"><img
src="https://www.google.it/images/srpr/logo11w.png" width="50" alt="logo Google"></a> </p>
<p>Oppure possiamo inserire un'immagine presente nel file system del sito: <img
src="https://www.appunti-digitali.it/sites/default/files/gattino.jpg" alt="gattino"></p>
<p>Cliccando sulla banda verde della bandiera si andrà su Google, cliccando sulla banda bianca si andrà su Amazon,
cliccando sulla banda rossa si andrà su Ebay <br>
<img src="https://www.appunti-digitali.it/sites/default/files/bandiera-Italia.png" alt="bandiera Italia"
usemap="#bandiera"></p>
<map name="bandiera">
<area shape="rect" coords="0,0,66,132" href="https://www.google.it/" alt="verde" target="_blank">
<area shape="rect" coords="66,0,133,132" href="http://www.amazon.it/" alt="bianco" target="_blank">
<area shape="rect" coords="133,0,199,132" href="http://www.ebay.it/" alt="rosso" target="_blank">
</map>
<p>Cliccando sulla luce verde del semaforo si andrà su Google, cliccando sulla luce gialla si andrà su Amazon, cliccando
sulla luce rossa si andrà su Ebay</p> <img src="https://www.appunti-digitali.it/sites/default/files/semaforo.png"
alt="semaforo" usemap="#semaforo">
<map name="semaforo">
<area shape="circ" coords="34, 50, 30" href="https://www.google.it/" alt="verde" target="_blank">
<area shape="circ" coords="100, 50, 30" href="http://www.amazon.it/" alt="giallo" target="_blank">
<area shape="circ" coords="166, 50, 30" href="http://www.ebay.it/" alt="rosso" target="_blank">
</map>
<p>Cliccando sul pentagono rosso si andrà su Google, cliccando sul pentagono giallo si andrà su Amazon, cliccando sul
pentagono verde si andrà su Ebay</p> <img src="https://www.appunti-digitali.it/sites/default/files/pentagoni.png"
alt="pentagoni" usemap="#pentagono">
<map name="pentagono">
<area shape="poly" coords="33, 26, 58, 44, 49, 73, 17, 73, 19, 44" href="https://www.google.it/" alt="rosso"
target="_blank">
<area shape="poly" coords="99, 26, 125, 44, 115, 73, 84, 73, 73, 44" href="http://www.amazon.it/" alt="giallo"
target="_blank">
<area shape="poly" coords="165, 26, 190, 44, 181, 73, 149, 73, 141, 44" href="http://www.ebay.it/" alt="verde"
target="_blank">
</map>
/* no css */
// no js