Inserire un'immagine
Ultima modifica: 13/07/12
Molto spesso capita che in un documento si voglia inserire un'immagine. In HTML esiste un tag apposito, <img> (img sta per immagine), la cui sintassi è:
<img src="link/percorso dell'immagine"/>
Potete osservare che in questo caso non c'è il tag di chiusura, infatti il tag si chiude automaticamente con lo slash / finale dopo le virgolette, quindi fate molta attenzione a non dimenticarlo altrimenti riscontrerete un errore!
L'attributo src sta per source (origine), e quindi tra virgolette, al posto di link/percorso dell'immagine, dovete scrivere il percorso che il browser deve compiere per trovare il file.
L'immagine infatti deve trovarsi su internet, non potete utilizzare un'immagine del vostro pc che non è stata caricata sul web.
Inserire un'immagine dal web
Se l'immagine che volete inserire si trova già sul web cliccateci sopra col tasto destro e cliccate su copia indirizzo immagine (l'indirizzo è il link dell'immagine, cioè quello del tipo http://ecc...). Una volta copiato l'indirizzo incollatelo tra le virgolette del codice: quello è il percorso che seguirà il browser per trovare (e quindi poi visualizzare) l'immagine.
Esempio
Supponiamo vogliate inserire l'immagine del bannerino in alto a sinistra di questo sito. Il link dell'immagine è http://yuka88.altervista.org/Facebook/logo.png. Quindi:
| Codice | Visualizzazione |
|---|---|
<img src="http://yuka88.altervista.org/Facebook/logo.png"/> |
 |
Inserire un'immagine dal pc
Se invece volete utilizzare un'immagine che avete nel vostro pc dovete caricarla sul web. Per farlo potete hostarla (caricarla) in un sito free hosting: si tratta di siti che permettono di caricare dei file e di metterli sul web restituendovi l'indirizzo del file caricato (http://ecc...). Questo è consigliabile soprattutto se state scrivendo in un blog. Se invece state creando un vostro sito web per caricare questo sito avrete uno spazio sul web (questo sito ad esempio sfrutta uno spazio gratuito di altervista), quindi conviene sfruttare tale spazio anche per caricare le immagini che avete nel vostro pc! In questo caso tra le virgolette dell'src del codice dovrete scrivere il percorso che il borwser dovrà compiere per trovare l'immagine fra le cartelle che avete caricato nello spazio per il vostro sito. Spieghiamo meglio ciò con un esempio.
Esempio
Tutte le pagine della sezione HTML di questo sito sono state caricate su altervista in un'unica cartella denominata HTML. In essa è stata caricata anche l'immagine in alto a sinistra. Il suo nome è logo.png. In questo caso per inserirla è bastato scrivere tra le virgolette dell'src del codice il nome dell'immagine (anche con l'estensione, cioè il tipo di file, in questo caso png):
<img src="logo.png"/>
E se l'immagine non si fosse trovata nella cartella HTML? In questo caso oltre al nome dell'immagine bisogna specificare meglio anche il percorso, perchè stavolta non è diretto. Si possono presentare due casi:
- l'immagine si trova in una sottocartella della cartella HTML. In questo caso prima del nome dell'immagine bisogna scrivere il nome della sottocartella (supponiamo sia immagini) seguito da uno slash:
- l'immagine si trova in una cartella che contiene la cartella HTML. In questo caso prima del nome dell'immagine bisogna scrivere ../:
<img src="immagini/logo.png"/>
<img src="../logo.png"/>
