Guida di HTML (base)

Immagini

Fino a questo momento abbiamo esaminato gli strumenti che HTML mette a disposizione per trattare il testo. HTML però non si limita al testo: in questo articolo impareremo ad inserire delle immagini all'interno delle nostre pagine.

Inserire un'immagine

In realtà incorporare un'immagine nella pagina non è un'operazione molto diversa rispetto a quelle che abbiamo già svolto: ancora una volta esiste un tag fatto apposta per questo. Questo tag è il tag <img>.

La grossa differenza sta nel fatto che l'immagine da inserire non possiamo "scriverla" nel documento, in mezzo agli altri tag. Un'immagine è un file esterno: come fare dunque per andarlo a prendere?

Prima di vedere come fare, prepariamo l'ambiente in cui lavoreremo: ci serve una cartella vuota in cui eseguire l'"esperimento", dentro alla quale andremo a mettere:

  • Un documento HTML (abbiamo visto come si fa nel primo capitolo) vuoto con nome, ad esempio, immagini.html.

  • Un'immagine qualsiasi; nell'esempio io userò il file fuga.png.

    Se non hai un'immagine sottomano puoi scaricare fuga.png cliccando con il tasto destro su questo link, e scegliendo "Salva con nome..." dal menu a tendina che compare nel browser).

All'inizio del nostro lavoro, quindi, avremo davanti una situazione come questa:

A questo punto possiamo andare a scrivere il codice HTML della nostra pagina immagini.html (naturalmente la riga che ci interessa è la riga 8, in cui viene caricata l'immagine):

<html>
<head>
<title>Immagini!</title>
</head>

<body>
<p>In mezzo al testo...</p>
<img src="fuga.png" alt="Due scolari scappano da una frana." />
<p>...metto un'immagine!</p>
</body>
</html>

Prima di analizzare il tag che abbiamo usato, <img>, diamo un'occhiata al risultato aprendo la pagina con il nostro browser web:

Il tag <img>

Concentriamoci ora sul tag che abbiamo usato, <img>:

<img src="fuga.png" alt="Due scolari scappano da una frana." />

Cerchiamo di capire come funziona, smontandolo nelle sue varie parti:

  • img è, banalmente, il nome del tag, e quindi si trova sempre all'inizio.

  • src="NOME" è un attributo obbligatorio, che serve a specificare il nome (o, come vedremo tra qualche paragrafo, il percorso) del file immagine che vogliamo inserire; nel nostro caso il file era fuga.png.

    Attenzione! Come gli utenti di Mac e Linux sanno bene, i nomi dei files in Internet sono case sensitive, ovvero distinguono tra lettere maiuscole e minuscole. I nomi "fuga.png", "FUGA.PNG", "Fuga.png", "fuga.PNG" (e così via) sono quindi da considerare differenti tra loro: se il file nella mia cartella si chiama fuga.png (tutto minuscolo), sarà scorretto aprirlo con <img src="FuGa.PnG" alt="Due scolari scappano da una frana." />

    Purtroppo chi usa Windows non può sperimentare questa differenza, perchè Windows è un sistema case insensitive, e quindi non si preoccupa di maiuscole e minuscole nei nomi dei file (se in una pagina inserisci un'immagine FUGA.PNG, questa viene aperta anche se il file si chiama fuga.png); è importante comunque che presti attenzione ai nomi che scrive: quando un sito viene messo su Internet (di questo parleremo meglio negli ultimi capitoli) è molto probabile che sia "ospitato" su una macchina *nix, che quindi non utilizza Windows, e di conseguenza distingue tra maiuscole e minuscole.

  • alt="Testo alternativo" è un altro attributo obbligatorio, e serve a contenere una descrizione a parole del contenuto dell'immagine.

  • /: il tag si chiude con uno slash, una barra obliqua. Questo perchè il tag <img> non serve a racchiudere del testo, e non prevede quindi un tag di chiusura (cioè, non esiste nessun </img> in HTML); come tutti i tag singoli, quindi, </img> va concluso con uno slash.

Soffermiamoci un attimo sul testo alternativo; uno potrebbe chiedersi "Ma perchè dovrei scrivere una descrizione a parole se c'è già l'immagine?". Questa domanda ha due importanti risposte:

  1. Non sempre le cose vanno come vogliamo: se la nostra pagina è online potrebbe capitare che la linea sia sovraccarica e un visitatore non riesca a scaricare l'immagine per visualizzarla; oppure potremmo aver commesso noi un errore nello scrivere la pagina (ebbene sì, succede anche questo...), rendendo l'immagine impossibile da reperire.

    A chi non è mai capitato, navigando in internet, di trovare "buchi" al posto delle immagini? Un testo alternativo sarebbe certo stato d'aiuto.

  2. Il web dovrebbe essere accessibile: quando realizziamo un sito web dobbiamo tenere ben presente che non tutti navigano su Internet come siamo abituati noi. Un esempio sempre più diffuso è dato dalla gente che naviga con il telefonino, spesso disabilitando le immagini per risparmiare traffico. Addirittura esistono dispositivi per non vedenti che sono in grado di leggere le pagine web all'utente, simulando la voce di un essere umano. In questi casi qualsiasi immagine è inutilizzabile, e un testo che ne spiega il contenuto sarà sicuramente molto apprezzato.

Dimensione: gli attributi width e height

Il tag </img> prevede altri due utilissimi attributi: width (width="LARGHEZZA") ed height (height="ALTEZZA").

Questi due attributi servono a specificare la dimensione dell'immagine nel documento; in inglese infatti width significa larghezza, mentre height significa altezza; chi non ha dimestichezza con l'inglese faccia molta attenzione a come sono scritte queste due parole: uno degli errori più frequenti infatti è dato proprio dalla scorretta scrittura degli attributi.

Vediamo come utilizzare nella pratica questi attributi.

Specificare la dimensione

<img src="fuga.png" alt="Due scolari scappano da una frana." width="238" height="200" />

I valori che ho usato (238 per la larghezza, 200 per l'altezza) sono i valori esatti della dimensione della mia immagine fuga.png. Apparentemente questo non ha senso; uno infatti si aspetterebbe di modificare la dimensione dell'immagine, rendendola più grande o più piccola, ma non delle stesse dimensioni di prima!

In realtà, anche se non è obbligatorio, è una buona regola specificare la dimensione delle immagini in una pagina web, anche se non le si vuole ingrandire o rimpicciolire. Questo perchè la comunicazione su Internet è soggetta ad errori, e potrebbe capitare che l'immagine cercata sia irraggiungibile. Oppure potrebbe darsi che il file immagine occupi molto spazio, e ci metta un po' ad essere scaricato. In questi casi conoscerne le dimensioni è un aiuto per il browser, che riesce così a "prendere le misure" per disegnare la pagina, anche se non ha l'immagine vera e propria a disposizione.

Possiamo sperimentare l'utilità di width ed height in caso di errore provocandone uno. Proviamo a rinominare il file immagine che abbiamo usato, in modo che il browser non possa più reperirlo:


L'immagine di esempio non è più raggiungibile (ha un nome diverso rispetto a quello specificato nel tag img). Nel primo caso (a sinistra) il browser può comunque tracciarne il contorno grazie a width e height, e spiegarne il contenuto grazie ad alt. Nel secondo caso queste informazioni mancano: Firefox non può fare altro che mostrare un anonimo quadratino al posto dell'immagine mancante.

Per scoprire quanto sono grandi le nostre immagini possiamo dare un'occhiata alle proprietà del file: è sufficiente esplorare la cartella che lo contiene, cliccare col tasto destro e selezionare "Proprietà"; praticamente ogni sistema operativo mostra, tra le proprietà, altezza e larghezza delle immagini:

La grandezza è sempre espressa in pixel. Un pixel è il più piccolo quadratino che compone le immagini sul nostro schermo. L'intera quantità di pixel su uno schermo è generalmente 1280x1024 (1280 pixel in larghezza, 1024 in altezza) o 1024x768, ma questi valori dipendono dallo schermo (più esattamente dalla risoluzione dello schermo) di chi visualizza la nostra pagina.


Ingrandendo un'immagine si vedono i singoli pixel che la compongono.

A volte la dimensione di un'immagine è presentata come LARGHEZZAxALTEZZA (ad esempio, 238x200). Per convenzione il numero a sinistra della x indica la larghezza, il numero a destra della x indica l'altezza.

Modificare la dimensione

Naturalmente gli attributi width ed height possono anche essere utilizzati per modificare le dimensioni delle figure che inseriamo.

Proviamo per esempio a modificare il contenuto della pagina che stiamo creando in questo modo:

<p>In mezzo al testo... <img src="fuga.png" alt="Due scolari scappano
 da una frana." width="50" height="50" /> ...metto un'immagine!</p>

Otteniamo un risultato interessante:

L'immagine, che prima era in mezzo a due paragrafi, è stata messa dentro il paragrafo stesso. Inoltre la sua dimensione è stata ridotta a 50x50.

Il risultato di questa operazione è che la nostra icona viene trattata come se fosse un carattere della linea di testo; per questo motivo questo tipo di posizionamento è detto, in inglese, inline.

Dimensione in percentuale

I pixel non sono l'unica unità di misura che possiamo usare per impostare la dimensione di un'immagine. HTML permette infatti di utilizzare le percentuali per ottenere una dimensione relativa.

Bisogna però fare attenzione a cosa si intende per relativo. Prendiamo ad esempio questo tag:

<img src="fuga.png" alt="Due scolari scappano da una frana." width="100%" height="100%" />

Potremmo aspettarci che la dimensione, 100%, sia interpretata come sinonimo di "a grandezza naturale", "nella dimensione originale" ma, attenzione, questo non è vero.

Se infatti proviamo a visualizzare il tag scritto qua sopra otteniamo un'immagine gigantesca, grande quanto la dimensione dell'intera finestra del browser.

La percentuale infatti si riferisce proprio a questo: non riguarda l'immagine, ma lo spazio che la circonda. Dire 100% quindi significa dire "riempi il 100% dello spazio libero attorno all'immagine" che, nel nostro caso è l'intera pagina.

C'è da dire una cosa molto importante sul dimensionamento con le percentuali: essendo relativo questo varia al variare dello spazio a disposizione. Possiamo capire meglio questo concetto provando a creare una pagina con un'immagine a dimensione 100%, per poi ingrandire e rimpicciolire la finestra del browser che la visualizza:

Se specifichiamo la dimensione con le percentuali questa dipenderà dalla grandezza della finestra del browser!.

A seconda della grandezza del browser la dimensione dell'immagine cambia!

Posizione nel testo

A questo punto uno si potrebbe chiedere come si fa a posizionare l'immagine nella pagina, ad esempio:

  • Come faccio a mattere l'immagine al centro della pagina?
  • Come faccio, in un'immagine inline, a posizionare il testo al centro rispetto all'altezza dell'immagine?
  • Come faccio a fare in modo che il testo del paragrafo circondi l'intera immagine?
  • Come faccio ad aggiungere un bordo colorato all'immagine?

Il linguaggio HTML prevedeva diversi attributi per rispondere a queste domande, ma chi ha sbirciato la fine di questo paragrafo avrà sicuramente capito che questi attributi non sono spiegati in questa guida: chi indovina perchè?

Il motivo è il solito: tutte le domande che abbiamo elencato sono relative alla formattazione fisica dell'immagine nella pagina, ed il linguaggio HTML ormai non serve più a questo scopo. Tutte le risposte, e molto altro, su come configurare aspetto e posizione delle immagini sono da cercare in una guida sui fogli di stile CSS. Ricordiamo, infatti, che alle pagine HTML può essere allegato un foglio di stile, che specifica le caratteristiche "fisiche" degli elementi HTML, tra cui anche il tag <img>.

A caccia di file

Quando creiamo un sito web di solito non mettiamo tutti i files nella stessa directory, ma piuttosto predisponiamo diverse cartelle, in modo da mantenere ordinati tutti i files che compongono un sito. Un classico dei siti internet è la cartella "immagini", dove i webmaster posizionano tutte le immagini usate nel sito.

Questo per noi è un problema: infatti, se l'immagine si trova in una cartella diversa da quella in cui si trova la stessa pagina HTML, specificare soltanto il nome del file non è più sufficiente.

Chi è pratico di Linux, o ha mai utilizzato il sistema operativo MS-DOS, ha senz'altro capito dove voglio andare a parare: in questo paragrafo vedremo come scrivere l'intero path (percorso), che porta dalla pagina HTML alla cartella in cui si trova l'immagine. I nostri linuxiani possono, ovviamente, saltare questo paragrafo, tenendo a mente che il nome del file può essere sostituito dal suo path, generalmente il path relativo alla cartella in cui si trova il file HTML.

Chi invece non ha mai sentito parlare di path e compagnia potrà ora fare pratica con qualche sperimentazione.

Dentro le sottocartelle

Prima di tutto prepariamo l'ambiente per le successive sperimentazioni; andiamo nella nostra cartella, in cui abbiamo lavorato fino ad adesso, creiamo una sottocartella immagini, e spostiamo dentro quest'ultima il file fuga.png:

Il nostro compito sarà modificare il file immagini.html, in modo che questo vada a prendere l'immagine fuga.png cercandola nella nuova cartella immagini.

Per fare questo è sufficiente aggiungere l'informazione sulla cartella nell'HTML, modificando il tag img in questo modo:

<img src="immagini/fuga.png" alt="Due scolari scappano da una frana." />

La modifica consiste semplicemente nell'aggiungere la cartella prima del nome del file (immagini/fuga.png), separandola da esso con uno slash (la barra obliqua, /). Quello che prima era un semplice nome, ora è diventato un percorso (path, in inglese, e nel gergo informatico), perchè indica quali cartelle bisogna visitare per andare a prendere il file. Questo percorso viene interpretato dal browser in questo modo:

  1. Parti dalla cartella in cui si trova lo stesso documento HTML (questo è il comportamento predefinito in qualsiasi caso)
  2. Spostati nella cartella immagini/
  3. Apri il file fuga.png

Semplice no?

Adesso complichiamo (ma proprio poco) le cose: andiamo nella cartella immagini (quella dove abbiamo messo fuga.png) e, al suo interno, creiamo una sottocartella, che andiamo a chiamare, ad esempio, Messaggi (occhio alla M, che è maiuscola!)

Spostiamo fuga.png all'interno di Messaggi: chi indovina qual'è il percorso dalla pagina immagini.html al file fuga.png?

La risposta naturalmente è immagini/Messaggi/fuga.png: dalla cartella in cui si trova la pagina web, spostarsi in immagini; da lì spostarsi in Messaggi; da lì aprire il file fuga.png. Se adesso volessimo inserire la nostra iconcina nella pagina web dovremmo quindi usare questo tag:

<img src="immagini/Messaggi/fuga.png" alt="Due scolari scappano da una frana." />

Risalire i livelli

Se andare a cercare un'immagine dentro le sottocartelle è stato abbastanza semplice, risalire da una sottocartella alle cartelle superiori lo è altrettanto.

Immaginiamo di invertire la posizione dei file immagini.html e fuga.png: spostiamo immagini.html dalla cartella principale dentro alla cartella Messaggi, e fuga.png dalla cartella Messaggi alla cartella principale (quella dove si trovava immagini.html).

Qui nasce il problema: come modificare il codice HTML per dire di andare a cercare l'immagine non più in una sottocartella, ma in una cartella superiore?

La risposta è banale: è sufficiente utilizzare la la sequenza ../

In particolare, per risolvere la situazione descritta qua sopra (ovvero per fare in modo che immagini.html apra l'immagine fuga.png, che si trova due livelli più in alto) modificheremo in questo modo il tag img:

<img src="../../fuga.png" alt="Due scolari scappano da una frana." />

Questo codice viene interpretato in questo modo dal browser:

  1. Parti dalla cartella in cui si trova lo stesso documento HTML (comportamento predefinito in qualsiasi caso), che nel nostro caso è Messaggi.
  2. Spostati nella cartella superiore (../), che nel nostro caso è immagini.
  3. Spostati nella cartella superiore (../), che sarà quindi la cartella principale, dove si trova il file fuga.png.
  4. Apri il file fuga.png

In breve...

In questo capitolo abbiamo visto che...

  • Per inserire un'immagine nelle nostre pagine web usiamo il tag <img src="NOMEFILE" alt="DESCRIZIONE">
    • Attenzione a come è scritto il nome: su Internet lettere maiuscole e minuscole sono diverse!
    • Il brower cerca il nome dell'immagine nella stessa cartella in cui si trova la pagina web.
    • Non solo il nome, ma anche la descrizione dell'immagine è un campo obbligatorio, per rendere la pagina accessibile anche a chi non può visualizzare le immagini.
  • Gli attributi width e height servono a regolare la dimensione dell'immagine nella pagina: il primo regola la larghezza, il secondo l'altezza.
    • Anche se non è obbligatorio, è una buona regola specificare la dimensione dell'immagine anche se vogliamo mantenere le dimensioni originali, per permettere al browser di conoscere lo spazio occupato dall'immagine anche se questa è assente o lenta a caricare.
    • Se si intende rimpicciolire un'immagine di norma è meglio farlo con un programma di grafica (vedi capitolo successivo)piuttosto che con gli attributi width e height: nel primo caso il file occuperà di meno e sarà più veloce da scaricare, mentre nel secondo il file contiene comunque l'immagine a dimensione piena, che viene "ristretta" solo dopo essere stata scaricata.
    • La dimensione può essere espressa in pixel o in percentuale; in quest'ultimo caso la dimensione dell'immagine si adatterà a quella della finestra che la contiene.
  • Se il file immagine non si trova nella stessa cartella del file HTML bisogna specificare il suo intero percorso (path) nel tag img.
    • Per indicare una sottocartella scriviamo il nome di quest'ultima, seguito da uno slash (es. <img src="NOMECARTELLA/NOMEFILE" alt="DESCRIZIONE">)
    • Per indicare una cartella superiore utilizziamo la sequenza di simboli ../ (es. <img src="../NOMEFILE" alt="DESCRIZIONE">)
  1. Introduzione
  2. La prima pagina web
  3. Formattare il testo (1)
  4. Formattare il testo (2)
  5. Elenchi
  6. Immagini
  7. Immagini per il Web
  8. Collegamenti ipertestuali
  9. Tabelle
  10. Altri tag