Inserire le immagini

Capire come inserire le immagini vi aiuterà a comprendere il modo in cui vengono reperite le risorse esterne da importare nel documento HTML. Ricordate che una pagina web è un insieme di contenuti multimediali integrati in un singolo documento.

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. Iniziamo prima di tutto definendo 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. Analizziamo singolarmente gli attributi più importanti in modo da avere 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 vostra pagina un’immagine presa dal web, ci basta copiarne l’indirizzo. Per farlo, clicchiamo con il tasto destro sulla foto e selezioniamo Copia indirizzo immagine.

A questo punto incolliamo l’indirizzo come valore dell’attributo src.

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

Nell’esempio stiamo caricando attraverso il tag img il percorso assoluto che punta alla foto di un gattino. 

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

Ricercare le risorse 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 bastebbe scrivere:

<img src="gattini.jpg" />

Inserire immagini contenute all’interno di una sottocartella

Ma cosa facciamo se l’immagine gattini.jpg è situata all’interno di una sottocartella chiamata images? In questo caso abbiamo bisogno di specificare il percorso manualmente in questo modo:

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

Attraverso il comando slash ( / ) possiamo far capire al browser di spostare la ricerca della risorsa nella sottocartella images.

Secondo lo stesso criterio possiamo indicare al browser percorsi sempre più profondi specificando tutte le cartelle separate dallo slash ( / ).

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

Nell’esempio qui sopra vi 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!

Inserire immagini contenute in una cartella precedente

Come raggiungiamo delle immagini che sono contenute in cartelle precedenti alla nostra index? È molto semplice: per navigare a ritroso fra le cartelle ci 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

Possiamo 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 usciamo dalla cartella html per poter puntare subito dopo alla posizione dell’immagine.

ESERCIZIO: INSERIRE le IMMAGINI INDICANDO IL PERCORSO RELATIVO

Creiamo in questo esercizio una struttura gerarchica di questo tipo:

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

Possiamo scaricare tranquillamente l’immagine dei gattini seguendo questo link. Inserite 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. Ricordate sempre di inserire le estensioni .jpg, .png o .gif a seconda del formato scaricato. Avete inserito la vostra immagine e non vedete altro che quest’icona orribile? [immagine non trovata]. Sapete già la risposta: avete scritto male il percorso o 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. Potete 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 coloro che soffrono di disabilità e leggono i siti web attraverso appositi screen reader.

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

Esempio pratico di inserimento delle immagini

Riprendiamo la tabella che abbiamo realizzato nella lezione precedente e completiamola inserendo le immagini dello staff di Creative Code.

<table border="1">
  <caption>Lo Staff di Creative Code</caption>
  <colgroup>
    <col span="1" width="150px" />
    <col span="2" width="250px" />
  </colgroup>
  <thead>
    <tr>
      <th>Avatar</th>
      <th>Nome</th>
      <th>Ruolo</th>
    </tr>
  </thead>

  <tbody>
    <tr>
      <td><img src="https://creativecode.it/wp-content/uploads/2018/08/wordpress.jpg" alt="Avatar del founder" width="120px" height="auto" /></td>
      <td>Giulio Carlo Tiseo</td>
      <td>Founder di Creative Code</td>
    </tr>
    <tr>
      <td><img src="https://creativecode.it/wp-content/uploads/2018/08/wordpress.jpg" alt="Avatar della Copywriter" width="120px" height="auto" /></td>
      <td>Deborah Macrino</td>
      <td>Copywriter e revisione testi</td>
    </tr>
    <tr>
      <td><img src="https://creativecode.it/wp-content/uploads/2018/08/wordpress.jpg" alt="Avatar del Visual Designer" width="120px" height="auto" /></td>
      <td>Raffaello Sanso</td>
      <td>Visual Designer</td>
    </tr>
  </tbody>
</table>

Nel mio esempio ho riportato tutti percorsi assoluti che puntano direttamente alle immagini dello staff. Potete notare come ho formattato le dimensioni delle immagini attraverso gli attributi width e height. Il valore auto specificato per l’altezza, indica una dimensione dell’immagine proporzionata alla larghezza. Potreste applicare una dimensione precisa anche per height, ma fate attenzione a non provocare distorsioni dell’immagine troppo evidenti. Con il valore automatico impostato sull’altezza, invece, ho ottenuto una cella con un’immagine proporzionata.

Come esercizio potete provare a fare la stessa cosa, specificando delle immaginipartendo da un percorso relativo.

Sito Web Old School [Parte 4]

Direi che a occhio il  vostro sito web ha decisamente bisogno di immagini. In queste fasi così primordiali dello sviluppo non siamo ancora pronti per creare particolari soluzioni grafiche, ma le immagini ci aiuteranno a rendere il tutto più gradevole.

Inserite sopra il vostro nome un’immagine che vi raffiguri. Potete scegliere di inserire anche delle immagini per i loghi delle aziende o delle scuole che avete frequentato. Non dimenticate mai di fare particolare attenzione ai percorsi e alle estensioni delle immagini!

Nella prossima lezione vedremo come aggiungere dei collegamenti nelle pagine in modo da poter navigare nel nostro sito web.

Lascia un commento

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