Le immagini, le protagoniste del Web

Il web è fatto di codice.

Codice per definirne la struttura, lo stile, il significato semantico e anche di codice in grado di visualizzare le immagini.

Sono sicuro che le lezioni che hai seguito fino ad ora sono state un po’ noiose, abbiamo visto come modificare il testo e il colore di sfondo dei nostri elementi ma si tratta sempre di piccole modifiche.

Le immagini sono veramente potenti perché in qualsiasi era della storia umana sono stati elementi in grado di semplificare i concetti presentati, di dare un ritmo al testo letto e anche di abbellire il contenuto presentato.

Insomma, le immagini sono fondamentali per la realizzazione di un sito web!

E in questa lezione andremo proprio a vedere da vicino questi elementi e scopriremo come sia possibile aggiungerle al proprio codice HTML, anche per usarle come sfondo grazie ai CSS.

Con queste due tecniche si raggiungono degli scopi completamente differenti, grazie al codice HTML siamo in grado di aggiungere queste immagini all’interno della propria pagina e farle entrare a far parte del contenuto, con i CSS abbiamo invece la possibilità di utilizzare l’immagine proposta proprio come sfondo dell’elemento.

Che cosa è un’immagine?

Per quanto sia facile da concepire per noi esseri umani, dal punto di vista del computer un’immagine non è altro che un insieme di codici che, ricomposti, gli permettono di costruire l’immagine stessa.

Questo discorso un po’ contorto mi è servito soltanto per farti capire che esiste un particolare elemento HTML che permette al browser di comprendere che i dati che gli stiamo passando sono effettivamente delle immagini, tutto questo grazie all’elemento <img>.

Questo elemento è molto particolare perché nonostante venga definito come elemento in linea, ovvero uno di quegli elementi che non modificano il flusso verticale della pagina, allo stesso tempo possiamo assegnare a questo anche dei valori di padding, margin e border che, come hai scoperto nelle lezioni precedenti, sono proprietà dedicate agli elementi blocco.

Ma prima di complicarci la vita cercando di capire come si comportano le immagini se mescolate assieme al nostro testo, che ne dici se andiamo a scoprire come sia possibile utilizzarlo all’interno delle nostre pagine HTML?

<img src="percorso/immagine.jpg" alt="testo" width="200" height="100">

Come puoi notare richiamare un’immagine nella pagina non è diverso dal creare un qualsiasi altro elemento HTML. Nell’esempio appena mostrato ci sono dei nuovi attributi che voglio presentarti da vicino:

• src – con questa abbreviazione si identifica il percorso, la sorgente (source), dove il browser può andare a prendere l’immagine e caricarla all’interno della pagina. Come puoi notare, il percorso che ho indicato all’interno dell’esempio è un percorso relativo che prende come radice la posizione stessa del file HTML in cui è stata dichiarata l’immagine, ma niente ti vieta di prendere direttamente l’indirizzo di un’immagine dal web indicandone il suo percorso assoluto (ovviamente in questo caso controlla che tu possa utilizzare l’immagine);
• alt – dato che i computer (e quindi anche i motori di ricerca) non sono in grado di comprendere il contenuto di un’immagine, è consigliabile inserire sempre un testo alternativo che aiuti queste macchine ad indicizzare meglio la nostra immagine. Oltre a questo, il testo contenuto in questo attributo verrà mostrato automaticamente se, per qualche motivo, il browser non è in grado di caricare l’immagine indicata;
• width e height – questi due attributi non sono obbligatori ma nel caso desideri assicurarti che l’immagine venga mostrata nelle sue corrette dimensioni, non devi far altro che dichiararle al loro interno.

Adesso che sai come richiamare un’immagine all’interno delle tue pagine HTML, non credi che sia arrivato il momento per qualche sano esercizio?

Se non l’hai ancora fatto, scarica l’archivio per questa lezione perché al suo interno troverai alcune immagini con le quali faremo i prossimi esperimenti e potrai così utilizzare la stessa struttura che ti verrà presentata nel corso della lezione.

Aprendo la pagina index.html all’interno del tuo editor di testo troverai una struttura molto più dettagliata rispetto a quelle viste precedentemente, se la apri invece con il tuo browser noterai la mia incompetenza grafica 😉

Oltre a questo, prima di iniziare, vorrei farti notare che all’interno della cartella del nostro progetto sono apparse due nuove cartelle: css/ e img/.

Questa organizzazione in cartelle ti sarà molto utile man mano che il tuo progetto web crescerà perché ti permetterà di distinguere i diversi tipi di file che compongono il tuo sito. Ovviamente dovrai far capire al tuo HTML le tue modifiche ed è per questo che l’elemento <link> (che ci permette di collegare il foglio di stile) è stato modificato in questo modo:

<link rel='stylesheet' href='css/style.css' type='text/css' media='all'>

Come puoi notare tu stesso, il percorso al file style.css è stato modificato per permettere al browser di trovarlo all’interno della cartella css/; ci sono altri attributi che non ti ho presentato precedentemente come type="" e media="" ma al momento non devi preoccupartene, servono soltanto a fornire maggiori informazioni al browser.

Per iniziare a fare pratica con qualche immagine, controlla all’interno della cartella img/ dove troverai un’immagine che si chiama logo.png. A questo punto posizionati all’altezza dell’elemento div.site-branding (nota che ho usato la sintassi CSS) ed inserisci tu stesso l’immagine.

Per il momento queste modifiche dovranno essere applicate nella pagina index.html ma quando sarai pronto potrai implementarle anche nelle altre pagine del progetto.

Le informazioni che ti ho precedentemente fornito dovrebbero essere sufficienti per permetterti questo inserimento, ma se hai bisogno di un aiuto non devi far altro che copiare il codice seguente:

<div class="site-branding">
  <img src="img/logo.png" alt="Logo skillsAndMore" />
  <h1 class="site-title"><a href="#" rel="home">Lezione 8</a></h1>
  <h2 class="site-description">Immagini, le Protagoniste del Web</h2>
</div>

Aggiornando la pagina del browser ti potrà sembrare che l’immagine appena inserita si comporta come un blocco, ma questo non è vero.

Se provi a controllare meglio con gli strumenti di sviluppo del tuo browser (FireFox e Chrome ne hanno di ottimi), noterai che l’immagine occupa soltanto la sua dimensione, sono i titoli che occupano tutto lo spazio presente (caratteristica degli elementi blocco) nella pagina e che per questo sono costretti ad andare a capo.

Esistono soluzioni che andremo a vedere più avanti che permetteranno di modificare il flusso di questi elementi, ma quello che mi preme farti capire adesso è che in questo momento l’immagine può diventare anche qualcos’altro.

Hai presente che in un gran numero di siti, compreso questo, il logo rappresenta anche un link che punta alla homepage del sito stesso? Com’è possibile?

La cosa è molto semplice e non dovrai far altro che racchiudere l’immagine con un elemento che hai recendemente scoperto, l’elemento <a>.

<div class="site-branding">
  <a href="https://skillsandmore.org"> <img src="img/logo.png" alt="Logo skillsAndMore" /> </a>
  <h1 class="site-title"><a href="#" rel="home">Lezione 8</a></h1>
  <h2 class="site-description">Immagini, le Protagoniste del Web</h2>
</div>

Ecco fatto, adesso se clicchi sull’immagine appena inserita, non farai altro che puntare la finestra del tuo browser sulla homepage di SkillsAndMore 😉

Prima di passare alla sezione in cui ti mostro come poter utilizzare le immagini per creare degli sfondi grazie al codice CSS, voglio mostrarti che un’immagine non è altro che un elemento in linea attraverso questo piccolo esempio.

Se ti posizioni sull’elemento section.entry-content (ti suggerisco di utilizzare la funzionalità di ricerca presente nel tuo editor di testo ma ricorda che questa è la sintassi CSS) noterai che all’interno del testo contenuto nel suo paragrafo è presente questa immagine:

<img src="img/img_small.png">

In poche parole ho inserito nel bel mezzo del testo un’immagine di piccole dimensioni, non devi far altro che aggiornare il tuo browser per vederla:

Come puoi vedere tu stesso, l’immagine si posiziona esattamente dove è stata dichiarata, senza troncare il testo in alcun modo, ma cosa succede se l’immagine fosse più grande?

Proviamo adesso a sostituire img_small.png con img_mid.png (altra immagine presente nella cartella img/).

Adesso, dato che l’immagine inserita è più grande, questa continua a mostrarsi nella corretta posizione, ma ha fatto inevitabilmente alzare anche lo spazio verticale occupato dalla singola riga di testo.

Con questi ultimi esempi ho cercato di farti capire che le immagini, anche se vengono considerate degli elementi in linea, hanno alcune proprietà (come in questo caso larghezza ed altezza) che potrebbero far sballare il tuo layout.

Torneremo su questi concetti successivamente perché adesso voglio mostrarti alcune tecniche che ti permetteranno di inserire delle immagini come dei veri e propri sfondi, ovvero che non possono modificare il ritmo del tuo contenuto.

Aggiungi le immagini con i CSS

Dovresti aver già incontrato il concetto di sfondo quando ti ho presentato la regola CSS background, quando siamo andati a vedere il concetto di scorciatoia relativo a questa proprietà, la prima che ti ho presentato è stata proprio background-image.

Forse sul momento non ci hai fatto troppo caso, ma è proprio questa la regola CSS che ci permetterà di inserire le immagini.

Prima di poter fare i nostri esperimenti abbiamo bisogno di rimuovere l’immagine logo.png dal nostro codice HTML, questo perché tendenzialmente un logo non è un’immagine che fornisce molto valore e dato che sarà presente in tutte le pagine è molto più intelligente collegarla a qualcosa che ha un valore semantico maggiore, come un titolo.

<div class="site-branding">
  <h1 class="site-title"><a href="#" rel="home">Lezione 8</a></h1>
  <h2 class="site-description">Immagini, le Protagoniste del Web</h2>
</div>

Adesso che abbiamo fatto questa modifica è giunto il momento di divertirci con un po’ di CSS 😉

Apri il file style.css ed aggiungi quanto segue:

h1{
    background: url(../img/logo.png) no-repeat center left;
}

Se hai provato ad aggiornare immediatamente la pagina all’interno del tuo browser molto probabilmente non hai ottenuto l’effetto che speravi, il testo del titolo si sovrappone all’immagine appena caricata e non sei neanche in grado di vederla tutta…

Questo avviene perché quando inseriamo un’immagine via CSS questo non andrà a rispettare le dimensioni dell’immagine stessa (cosa che invece avviene se inserita via HTML) ma rispetta le dimensioni dell’elemento parente.

Prima di andare a vedere come risolvere questa situazione, vorrei analizzare con te i singoli valori che abbiamo passato alla regola background:

• url() – dato che il nostro file style.css si trova all’interno della cartella css/ per raggiungere l’immagine abbiamo dovuto dire al nostro browser di spostarti una cartella sopra (con i simboli ../) e successivamente entrare dentro la cartella img/ dove può trovare l’immagine logo.png;
• no-repeat – come vedremo a breve, grazie ai CSS possiamo ripetere un’immagine per fare in modo che questa occupi tutto lo spazio preso dall’elemento contenitore, ma dato che in questo caso stiamo inserendo un logo non è la soluzione più adatta;
• center e left – con questi due valori posso indicare al CSS dove posizionare la mia immagine all’interno dell’elemento contenitore. In questo esempio la sto posizionando centralmente e a sinistra ma ti basta usare le parole top, center, bottom, left e right per posizionarla dove meglio credi.

Con il codice precedente abbiamo usato la scorciatoia che ci permette di inserire uno sfondo e dato che abbiamo omesso il suo colore, il nostro browser applicherà un colore trasparente. Ma se non conoscessi la scorciatoia background come sarei stato in grado di inserire questa immagine? Vediamolo subito:

h1{
    background-image: url(../img/logo.png);
    background-repeat: no-repeat;
    background-position: center left;
}

Ecco un altro esempio in cui le scorciatoie si dimostrano incredibilmente utili! C’è soltanto un problema che dobbiamo ancora risolvere… Come fare per mostrare la nostra immagine senza che il nostro testo si posizioni sopra di essa?

Per fare questo esistono ovviamente molte soluzioni, ma quella più semplice è quella di utilizzare il padding che, come abbiamo visto quando abbiamo incontrato la definizione del box model, permette di distanziare il contenuto di un elemento dal suo bordo.

Oltre a questo bisogna anche impostare l’altezza dell’elemento ad una che sia in grado di contenere l’immagine stessa, per fare questo non dovrai far altro che impostare la proprietà height allo stesso valore dell’altezza dell’immagine. Ecco quindi la nostra dichiarazione CSS corretta:

h1{
    background: url(../img/logo.png) no-repeat center left;
    height: 117px;
    padding-left: 195px;
    line-height: 117px;
}

Adesso, se aggiorni la finestra del tuo browser, noterai che il logo che abbiamo inserito viene visualizzato completamente (grazie a height: 117px;) e anche che il testo non si trova più sopra di esso ma bensì al suo fianco (grazie a padding-left: 195px che è leggermente più grande della larghezza dell’immagine).

Molto probabilmente ti è cascato l’occhio sull’ultima e nuova proprietà CSS che abbiamo inserito, la proprietà line-height. Questa ci permette di definire l’altezza di una riga all’interno di un testo ed impostando il suo valore alla stessa altezza dell’immagine non facciamo altro che posizionare il testo nel centro della sua altezza.

Conclusioni

Siamo giunti al termine di un’altra lezione teorica all’interno della quale hai scoperto la possibilità di inserire le immagini in due modi completamente diversi ma comunque fondamentali per la realizzazione di qualsiasi pagina web.

D’ora in avanti ci muoveremo per argomenti molto più pratici dato che nelle prossime lezioni ti mostrerò come sia possibile costruire ad una ad una le pagine del nostro sito di esempio. In questo modo sarai in grado di utilizzare tutte le conoscenze che hai acquisito fin ora e di scoprirne di nuove facendo pratica.

Come sempre, prima di poter proseguire dovrai rispondere alle domande che ti ho preparato e ricorda che per qualsiasi problema il nostro forum è aperto per ogni richiesta 😉