Le immagini

Anche le immagini possono essere inserite all'interno di una pagina web. Le immagini hanno il loro tag a parte <img .... /> che come nel caso di <meta .... /> ha una chiusura implicita. La struttura minima completa del tag immagine è:

<img src="percorso_immagine" alt="testo_alternativo" />

Dove src e alt sono detti “attributi” del tag img e sono due degli attributi più importanti del tag img. In pratica definiscono delle caratteristiche che questo tag assume: * src (source) specifica qual è il percorso relativo o assoluto in cui è posizionata l'immagine. Questo percorso non deve contenere spazi. * alt (alternate text) specifica un testo alternativo, ovvero un testo che sostituisce l'immagine e che è particolarmente utile nel caso di persone ipovedenti. I software di lettura del testo possono infatti leggere il testo contenuto nell'attributo alt e quindi dare un'idea ad una persona che non può vedere l'immagine di cosa l'immagine contenga. Inoltre, il testo alternativo è mostrato ogni qualvolta che l'immagine non viene caricata completamente o non viene trovata al percorso specificato

Un esempio di immagine può essere:

<img src="mia_immagine.jpg" alt="Immagine di uno scoiattolo" />

Come si può vedere, in src è stato inserito il nome di una immagine, ovvero “mia_immagine.jpg”. Quando si inserisce il nome di una immagine bisogna prestare attenzione all'estensione dell'immagine, in questo caso è un'immagine di tipo .jpg.

Quello che si specifica all'interno di src è il percorso di cartelle che dobbiamo attraversare per raggiungere l'immagine a partire da dove si trova la pagina web. Ad esempio, se la pagina è contenuta in una cartella detta “Mio_sito” e insieme alla pagina c'è un file immagine, possiamo detto mia_immagine.jpg possiamo specificare solo il nome dell'immagine perché l'immagine si trova nella stessa cartella della pagina.

E questa è la struttura dell'albero delle cartelle:

└───Mio_sito
    |   mia_immagine.jpg
    │   mia_pagina.html

Cosa succede se noi ad esempio sbagliamo il nome dell'immagine specificata in src o sbagliamo la posizione? In questo caso la pagina web non trova la risorsa immagine e quindi esce questo simbolino:

E se l'alternate text è stato specificato comparirà anche quello:

Entrambi indicano che l'immagine non è stata trovata nell'indirizzo specificato in src.

L'albero delle cartelle

Le cartelle in un computer sono organizzate in una struttura detta ad albero

Come si può vedere dall'immagine, le cartelle (in giallo) sono infatti disposte un po' ad un albero rovesciato. Ogni cartella che contiene una o più cartelle o file è detta “padre” (ad esempio “Fauser” è padre di “Documenti” e “Classi”), mentre il contenuto di ciascuna cartella è “figlio” di essa (“Fauser” è figlio di “Desktop”). Quando più cartelle o file sono contenuti nella stessa cartella e quindi sono figli di essa si dicono “fratelli” (“Documenti” è fratello di “Classi” perché entrambe sono figlie di “Fauser”). Seguendo queste definizioni e osservando il disegno possiamo dire che:

La cartella “Desktop” è il padre di tutte le altre cartelle e per questa è detta anche nodo radice. Come si può vedere infatti ogni altra cartella è contenuta in “Desktop”;
La cartella “Fauser” è figlia di “Desktop” e padre, ovvero contiene, due sottocartelle: “Documenti” e “Classi”;
La cartella “Documenti” è a sua volta padre perché contiene due file, circolare1.pdf e circolare2.pdf. Trattandosi di file, questi non possono contenere altre cartelle, per cui non possono essere padri e per questo sono nominati nodi foglia;
La cartella “Classi” è figlia di “Fauser” ed è padre di due sottocartelle: “1HIN” e “2HIN”;
La cartella “1HIN” è figlia di “Classi”;
La cartella “2HIN” è figlia di “Classi” ed è padre di 4 sottocartelle: “STA”, “Fisica”, “Matematica” e “Italiano”;
La cartella “STA” ha due figli che sono dei nodi foglia, ovvero prima_pagina.html e compito.html;
La cartella “Italiano” ha un figlio, ovvero tema.docx;

Quando noi indichiamo un'immagine all'interno di una pagina web usiamo le “/” per scendere nell'albero delle cartelle. Ad esempio, se la nostra pagina è contenuta nella cartella “Fauser” e l'immagine che vogliamo inserire si trova in “Classi” -> “2HIN” -> “STA” -> “mie_immagini” e si chiama immagine.jpg allora dovremo referenziarla come:

<img src="Classi/2HIN/STA/mie_immagini/immagine.jpg" alt="Immagine di uno scoiattolo" />

La cartella “immagini”

Cosa succede se il nostro sito contiene tante immagini? A questo punto è sconveniente mettere tutte le immagini nella stessa cartella dove sta la pagina web perché ci sarebbe disordine nell'organizzazione dei file. In questo caso si può creare una cartella a parte contenente le immagini:

└───Mio_sito
    │   Mia_pagina.html
    │
    └───immagini
            mia_imm1.jpg
            mia_imm2.jpg
            mia_imm3.jpg
            mia_imm4.jpg
            mia_imm5.jpg

La cartella che contiene le immagini è stata nominata “immagini” e contiene 5 immagini diverse. In questo modo i file risultano più organizzati ed è più facile navigare tra le cartelle soprattutto nel caso in cui il sito non fosse composto da 1, ma da tante pagine. Come cambia l'indirizzo in src? Visto che Mia_pagina.html e “immagini” sono entrambe figlie di “Mio_sito” si può specificare in src la cartella “immagini” e farla seguire da uno “/” che ci permette di scendere all'interno di “immagini” e recuperare i file in essa contenuti. Ad esempio se vogliamo aggiungere mia_imm1.jpg metteremo nel percorso:

<img src="immagini/mia_imm1.jpg" alt="Immagine di uno scoiattolo" />

Gli attributi width ed height

Gli attributi width ed height specificano all'interno del tag immagine rispettivamente la larghezza e l'altezza in pixel che l'immagine andrà ad occupare all'interno della pagina web. Ad esempio, per una immagine di 300x400 pixel (dove in questo caso 300 indica la larghezza e 400 l'altezza), possiamo specificare:

<img src="mia_immagine.jpg" alt="Immagine di un arcobaleno" width="300" height="400" />

Gli attributi width ed height servono per rendere il caricamento dell'immagine più veloce. Essi fanno sì che sia predisposta un'area all'interno della pagina web all'interno della quale sarà inserita l'immagine. Specificare una dimensione dell'immagine diversa da quella originale fa sì che l'immagine possa essere ingrandita o rimpicciolita a seconda dei casi. Tuttavia, questi casi sono sempre accompagnati da una perdita di risoluzione, per cui l'immagine può apparire più o meno sgranata. Nel caso specifico in cui venga rimpicciolita, essa occuperà sempre lo stesso spazio in memoria del file originale. In questo caso, se si necessita di un'immagine più piccola dell'originale, sarebbe utile rimpicciolirla tramite un programma di modifica delle immagini, ad esempio Gimp, in modo che anche la dimensione dell'immagine sia inferiore e adeguata al suo spazio nella pagina.