Inserire le immagini

Reperire risorse esterne navigando fra le cartelle

creativecode avatar Giulio Tiseo

27 Giu, 2019

~6min.

Ti mostrerò come inserire le immagini in una pagina web. Ti consiglio di prestare particolare attenzione ai prossimi paragrafi perché l'inserimento delle immagini prepara il terreno a tutto ciò che riguarda l'inclusione di risorse esterne da importare nel documento HTML.

Requisiti

Per inserire un’immagine in un documento HTML occorre avere ben chiare le idee su cos’è un attributo perché attraverso di essi è possibile dare dimensioni personalizzate alle foto che inserirai. In questo articolo riprendo un esempio mostrato in Struttura della tabella HTML quindi ti suggerisco di darci uno sguardo se non lo hai già fatto. 

# L’importanza delle immagini

Ricorda che una pagina web è un insieme di contenuti di diverso tipo integrati in un singolo documento. Tali contenuti possono essere raccolti da fonti esterne e inserite all’interno della pagina web.

Come sai, una componente estremamente importante nella costruzione di una pagina HTML è la grafica, di cui le immagini sono l’elemento principale. Inserire le immagini in una pagina HTML è piuttosto semplice ma occorre avere ben chiare le idee su come scrivere un percorso in formato stringa.

Ok, parto dall’inizio: in che tag si dichiara un’immagine? Easy, attraverso il self-closing tag <img />.

# Gli attributi dell’immagine

Per poter realmente mostrare qualcosa, occorre applicare all’elemento img degli attributi. Tali attributi ci  permettono di specificare parametri fondamentali per la visualizzazione o la formattazione. Analizzerò singolarmente gli attributi più importanti in modo da darti un’idea precisa del loro utilizzo.

SRC: l’attributo source o sorgente

L’attributo src indica il percorso o l’URL che punta all’immagine. Per inserire all’interno della tua pagina un’immagine presa dal web, ti basta copiarne l’indirizzo. Per farlo vai su google immagini, cerca un’immagine, clicca con il tasto destro sulla foto e seleziona Copia indirizzo immagine.

A questo punto incolla l’indirizzo nel valore dell’attributo src in questo modo:

<img src="https://placekitten.com/200/300" />

In questo momento non stai facendo altro che caricare, attraverso il tag img, il percorso assoluto che punta alla foto di un gattino. 

Quando lavoriamo in locale, può capitare di inserire delle immagini non presenti sulla rete. Per inserire le immagini presenti nella memoria del tuo computer hai bisogno di indicare il percorso relativo che punta all’immagine.

# Ricercare le immagini navigando fra le cartelle

Inserire immagini contenute nella stessa cartella di index.html

Ammettiamo di avere l’immagine gattini.jpg nella stessa cartella della homepage. Quando specifichiamo un percorso relativo, facciamo riferimento alla posizione del file index.html; perciò se volessimo mostrare l’immagine nel browser ci basterebbe scrivere:

<img src="gattini.jpg" />

Inserire immagini contenute all’interno di una sottocartella

Ma cosa devo fare se l’immagine gattini.jpg è situata all’interno di una sottocartella chiamata images?

In questo caso hai bisogno di specificare il percorso manualmente in questo modo:

<img src="images/gattini.jpg" />

Attraverso il comando slash ( / ) puoi dire al browser di spostare la ricerca della risorsa nella sottocartella images.

Secondo lo stesso criterio puoi indicare al browser percorsi sempre più profondi definendo tutte le sottocartelle separandole con lo slash ( / ).

<img src="images/kittens/gattini.jpg" />

Nell’esempio in alto ti mostro come raggiungere l’immagine gattini.jpg contenuta all’interno della cartella kittens, che è a sua volta una sottocartella di images. È più facile farlo che dirlo, non c’è dubbio… prova!

Inserire immagini contenute in una cartella precedente

Come posso raggiungere delle immagini che sono contenute in cartelle precedenti alla index?

È molto semplice: per navigare a ritroso fra le cartelle ti basta specificare nel valore della source (src) due puntini di sospensione, seguiti dallo slash ( ../ ).

Immaginando di avere una struttura gerarchica del sito simile a questa:

  • Creative Code
    • gattini.jpg
    • html
      • index.html

Puoi raggiungere l’immagine scrivendo il percorso in questo modo:

<img src="../gattini.jpg" />

Considerato che ogni percorso ha come punto di partenza la posizione della index, con i due puntini di sospensione esci dalla cartella html per poter puntare subito dopo alla posizione dell’immagine.

ESERCIZIO: INSERIRE LE IMMAGINI INDICANDO IL PERCORSO RELATIVO

Crea in questo esercizio una struttura gerarchica di questo tipo:

  • Creative Code
    • html
      • index.html
    • images
      • kittens
        • gattini.jpg

Puoi scaricare tranquillamente l’immagine dei gattini seguendo questo link. Inserisci in index.html l’immagine gattini.jpg specificando il percorso corretto.

ATTENZIONE l’errore più frequente in questi casi è quello di dimenticare l’estensione del file dopo il nome dell’immagine. Ricorda sempre di inserire le estensioni .jpg, .png o .gif a seconda del formato scaricato. Hai inserito la tua immagine e non vedi altro che quest’icona orribile?

Icona immagine non trovata
icona mostrata da Mozilla Firefox per indicare un’immagine non trovata

Sai già il perché: hai scritto male il percorso o hai dimenticato di riportare l’estensione!

alt: il testo alternativo

L’attributo alt serve a specificare un testo alternativo (alternative text). Il contenuto dell’alt può essere mostrato al posto dell’immagine quando quest’ultima non può essere visualizzata. Puoi interpretare l’alt come una sorta di descrizione dell’immagine.

L’attributo alt è molto importante anche perché fornisce delle informazioni ai motori di ricerca affinché il crawler, ovvero il software che analizza il contenuto di una pagina web, possa comprendere la reale entità della foto ai fini dell’indicizzazione. Inoltre l’alt ha lo scopo di rendere il contenuto accessibile anche a chi soffre di disabilità.

<img src="https://placekitten.com/200/300" alt="Immagine di gattini" />

# Esempio pratico di inserimento delle immagini

Riprendi la tabella dei colori RGB che hai realizzato nella articolo precedente e completala inserendo delle miniature che mostrano il campione di colore associato.

Gli indirizzi per recuperare le immagini da usare come miniature sono:

  • Rosso: https://www.colorcombos.com/images/colors/FF0000.png
  • Verde: https://www.colorcombos.com/images/colors/00FF00.png
  • Blu: https://www.colorcombos.com/images/colors/0000FF.png
<table border="1">
   <thead>
      <tr>
        <th>Campione</th>
         <th>Colore</th>
         <th>HEX</th>
         <th>CMYK</th>
         <th>HSB</th>
      </tr>
   </thead>
   <tbody>
      <tr>
        <td><img src="https://www.colorcombos.com/images/colors/FF0000.png" width="60" height="60" alt="Campione colore rosso"></td>
         <td>Rosso</td>
         <td>#ff0000</td>
         <td>0, 100, 100, 0</td>
         <td>0, 100, 100</td>
      </tr>
      <tr>
        <td><img src="https://www.colorcombos.com/images/colors/00FF00.png" width="60" height="60" alt="Campione colore verde"></td>
         <td>Verde</td>
         <td>#00ff00</td>
         <td>57, 0, 100, 0</td>
         <td>120, 100, 100</td>
      </tr>
      <tr>
        <td><img src="https://www.colorcombos.com/images/colors/0000FF.png" width="60" height="60" alt="Campione colore blu"></td>
         <td>Blu</td>
         <td>#0000ff</td>
         <td>89, 75, 0, 0</td>
         <td>240, 100, 100</td>
      </tr>
   </tbody>
</table>

Nel mio esempio ho riportato tutti percorsi assoluti che puntano direttamente alle miniature colore. Puoi notare come ho formattato le dimensioni delle immagini attraverso gli attributi width e height. Ecco il risultato:

Immagini inserite in tabella
Immagini inserite in tabella e dimensionate con gli attributo with e height

Come esercizio puoi provare ad eseguire la stessa tabella puntando però alle immagini attraverso un percorso relativo.

# Creare una pagina web in puro HTML – Il classico social (Parte 4)

È arrivato il momento di inserire l’immagine del profilo. Corri a farti il più bel selfie del secolo, stai per inserire la tua foto nel Classico Social.

Sei libero di scegliere dove inserire l’immagine del profilo; puoi farlo prima o dopo il nome. Mi raccomando, utilizza gli attributi width e height per dimensionare correttamente l’immagine.

# Inserire immagini proporzionate

Nota importante: stai faticando ad inserire l’immagine in modo proporzionato e stai ottenendo un’oscenità tipo questa?

Immagine sproporzionata
Tag img che ha come parametri di larghezza e altezza i seguenti valori: width=”320″ height=”120″

Questo avviene quando dai delle grandezze assolute su width e height senza rispettare le proporzioni della foto.

Se hai bisogno di inserire un’immagine proporzionata (come avviene in questo caso per l’immagine del profilo), puoi dichiarare solo il parametro width o il parametro height. Il browser applicherà all’attributo mancante il valore di auto così da poter mantenere le proporzioni dell’immagine.

Inserimento di un'immagine proporzionata
Immagine proporzionata ottenuta dichiarando esclusivamente il parametro width=320″. Il browser applica automaticamente all’immagine l’attributo height=”auto”

Nel prossimo articolo della Guida Base all’HTML affronteremo un argomento fondamentale: come creare più pagine e collegarle fra loro. Tieniti forte, stai per creare la tua pagina per la galleria di immagini!

Lascia un commento

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *