Guida HTML: Immagini e Tabelle

E' tempo di liberare la potenza comunicativa di immagini e tabelle o, in altre parole, è tempo di fare la conoscenza dei tag img e table.
Entro la fine di questo capitolo avrai finito di fare conoscenza con quasi tutti i principali tag HTML e, per mettere in pratica le competenze appena acquisite, ti farò realizzare il tuo primo progetto web: un album fotografico composto da più pagine HTML collegate tra loro.

Le Immagini

Cosa sarebbe il web senza le immagini? Un posto senza gattini.
Scherzi a parte, le immagini permettono di comunicare sfruttando il canale visivo dell’utente che, specialmente per alcuni messaggi dal contenuto emozionale, è molto più potente del linguaggio parlato. Non per niente si dice: “un’immagine vale più di mille parole”.

Hai presente?

 

Se stai apprezzando questa guida gratuita, ti sarei molto grato se mi aiutassi un po’ a farla conoscere. Come puoi immaginare per metterla insieme servono molto lavoro e dedizione, mentre a te per ringraziarmi basta solo un click:

Ora promettimi solennemente che non userai mai quello che sto per insegnarti a scopo gattaro e procediamo.

Innanzitutto ci serve un’immagine di esempio, per questo motivo ho chiesto alla mia socia, Marta Petrella, di realizzarne una. Ecco il risultato:

Ti presento CiccioGatto...

Come tutte le risorse su Internet, anche CiccioGatto ha il suo URL: http://nemboweb.com/images/corsi/webmaster-tutorial/cicciogatto.jpg 

Prova a visitare l’url col browser per verificare che il nostro gattone blu si trovi effettivamente lì. Puoi farlo copiando-incollando l’url nella barra degli indirizzi del tuo browser, oppure, cliccando qui. Poi ricordati di tornare a questa pagina, ti aspetto qui...

Bentornato!
Ora che abbiamo appurato che il nostro Gattone Blu si trova effettivamente dove dice di essere, possiamo scoprire come utilizzare il tag img per inserlo in una tua pagina web. 

Il tag img

Per inserire una immagine in una pagina HTML, ci vuole un apposito tag HTML: il tag img, contrazione di “image” (immagine).

La sintassi del tag img è la seguente:

<img src="URL-O-PATH-IMMAGINE" alt="TESTO-ALTERNATIVO" />

Dal codice possiamo dedurre che il tag img è un tag singolo (non esiste il rispettivo tag di chiusura) e che necessita di due attributi fondamentali:

1. src, contrazione di “source” (sorgente),  contenente l’url dell’immagine che si vuole mostrare o il suo path (il suo percorso, vedremo in seguito cosa si intende)
2. alt, da “alternate text” (testo alternativo),  contenente un testo descrittivo dell’immagine. Alcuni browser utilizzeranno il testo alternativo nel caso in cui l’immagine non sia disponibile o in altri casi particolari come, per esempio, nel caso si tratti di un browser per non vedenti.

Il codice completo, per mostrare l’immagine del nostro amico in una tua pagina web, è quindi il seguente:

<img src="http://nemboweb.com/images/corsi/webmaster-tutorial/cicciogatto.jpg" alt="Gattone blu"/>

Ovviamente al posto di “Gattone blu” puoi scrivere quello che preferisci!
Nota bene: l’ordine degli attributi in un tag HTML non è importante, puoi scrivere l’attributo alt prima di src, se preferisci.

Proviamo subito.

Esercizio n. 1.3.0: inserire una immagine in una pagina HTML

1. Crea la cartella “lezione-3” per gli esercizi di questa lezione;
2. All’interno di essa crea il file 0-img-cicciogatto.html, con la struttura completa che devono avere i file HTML vista nella lezione precedente (doctype, head, title, charset e body);
3. All’interno del file inserisci un titolo h1 e un paragrafo;
4. All’interno del paragrafo inserisci il tag img in modo tale che compaia l’immagine del gattone blu.

SOLUZIONE

Nota bene: non è un caso che l’immagine sia stata inserita all’interno del paragrafo. Nelle regole HTML 5 è specificato che il tag img dev’essere contenuto all’interno di tag che possono contenere “phrasing elements” (elementi di enunciazione, o di contenuto) come, per l’appunto, il tag p.

Prova ad aprire il file in anteprima per visualizzare il risultato:

Un pizzico di Style

Hai notato che l’immagine è piuttosto grande? non sarebbe comodo poter mettere il gattone, per così dire,  un po’ a “dieta” e ottenere un risultato come quello qui in basso?

Puoi farlo facilmente aggiungendo una regola di stile al tag img. In particolare, per ottenere una immagine con una width (larghezza) di 300 pixel puoi inserire il seguente attributo “style” al tag img:

<img style="width:300px" src="http://nemboweb.com/images/corsi/webmaster-tutorial/cicciogatto.jpg" alt="Gattone blu" />

L’istruzione all’interno dell’attributo style, “width:300px” è scritta in linguaggio CSS e serve semplicemente a comunicare al browser che la larghezza di quell’immagine deve essere, per l’appunto, di 300 pixel. Approfondiremo il linguaggio CSS in seguito.

Possiedi già tutte le competenze necessarie a realizzare un semplice album fotografico, seppur non proprio bellissimo. A renderlo più carino penseremo in seguito, intanto pensiamo ai contenuti!

Esercizio 1.3.1 Il tuo Primo Album Fotografico (bruttino)

Crea il file “1-album-foto.html” sulla falsariga di quello appena realizzato, con tutte le immagini che vuoi. Per ciascuna immagine crea un paragrafo che contenga l’immagine stessa e una breve didascalia (come nel file 0-img-cicciogatto.html appena visto).

Se non lo hai già fatto, procurati una decina di foto fra le tue preferite (mi raccomando, foto pubblicabili online perché, se hai selezionato un workspace pubblico, saranno visibili a tutti!)

Se non hai delle foto da utilizzare, puoi usare queste (si tratta di un file "zippato" che contiene le 9 immagini che sto per utilizzare negli esempi successivi).

Una volta che sei in possesso delle immagini che vuoi usare, devi caricarle nel tuo workspace su Atom.
Per prima cosa crea la cartella “immagini”.

Quindi trascina al suo interno i file delle immagini che hai scelto con un semplice drag and drop.

Ora dovresti aver importato le tue immagini nella cartella, così:

Ora puoi creare il file "/HTML/lezione-3/1-album-fotografico.html" e impostare la struttura HTML di base. Il titolo del mio album fotografico sarà “Il mio Macaone domestico” perché in esso voglio raccontarti di quella volta che ho mi sono trovato ad avere come animale domestico una delle più grandi farfalle europee: il macaone, appunto.

Possiamo procedere all’inserimento delle immagini prendendo a esempio il file “0-img-cicciogatto.html” e tenendo presente una fondamentale distinzione: questa volta i file non si trovano in un sito esterno (nemboweb.com), bensì nel tuo stesso ambiente di lavoro. Ne consegue che, nell’attributo src del tag img, invece di specificare l’url dell’immagine è possibile specificare solo il path (percorso) relativo. Ecco come:

Nota bene: il valore dell’attributo src: “immagini/macaone-1.jpg” non è un url completo composto da protocollo (http o https), dominio internet e percorso come nell’esempio precedente, ma solo dal percorso che porta al file desiderato, che si trova all’interno della cartella “immagini”. Un percorso di questo tipo prende il nome di path relativo. E’ possibile specificare un path relativo ogni volta che la risorsa che si desidera richiamare (in questo caso il file macaone-1.jpg) si trova nella stessa applicazione web del file che lo richiama (in questo caso il file 1-album-fotografico.html). Più avanti approfondiremo tutti i modi con cui si può fare riferimento a un file all’interno dell’attributo src.

Adesso possiamo inserire le altre immagini: ciascuna deve trovarsi all’interno di un paragrafo (un tag p) e deve avere una didascalia.

Ecco quello che dovresti ottenere (sentiti libero di raccontare la storia che preferisci, non devi usare per forza i miei testi, ovviamente):

Nota bene: il risultato era troppo corposo per poter essere inserito all’interno di un’immagine come ho fatto finora, quindi per realizzare l’anteprima ho utilizzato un elemento html che permette di inserire una pagina all’interno di un’altra. Tale elemento prende il nome di iframe, come vedremo in una prossima lezione.

SOLUZIONE

Ecco il codice HTML completo della mia soluzione, sentiti libero di copiarlo-incollarlo in un tuo file per studiarlo più da vicino e provare a modificarlo.

Ora hai la possibilità di raccontare le tue storie facendo uso di immagini. Tuttavia serebbe molto più bello se queste immagini fossero organizzate meglio. Per esempio potremmo disporle in una griglia, così:

e poi fare in modo che cliccando su ogni miniatura nella griglia si apra una pagina con l’immagine in grande e un testo a essa dedicato.

Il modo più semplice per realizzare una griglia di immagini è quello di inserirle in una tabella, pertanto penso sia prorio arrivato il momento di parlartene.

Le Tabelle

Il concetto di tabella penso ti sia già chiaro: è quel costrutto che serve a organizzare dei dati in righe e colonne.

In HTML una tabella è definita dal tag table (tabella). Esso presenta un tag di apertura e uno di chiusura:

<table>
</table>

All’interno dei quali viene definita la struttura della tabella, utilizzando altri due tag fondamentali: tr (da table row, riga della tabella) e td (da table data, cella della tabella).

Per esempio proviamo a definire una tabella con le date di nascita dei principali “Giganti del Web”:  Google, Facebook e Twitter.

Per prima cosa crea il file “2-table.html” nel tuo workspace, imposta la struttura di base del file e, nella sezione body, apri e chiudi il tag table per iniziare a definire la tabella:

All’interno del tag table, definisci la prima riga aprendo e chiudendo il tag tr:

Quindi definisci due celle col tag td, nella prima inseriremo il testo “Google”, mentre nella seconda la sua data di nascita, che è il 1997 (anno in cui è stato registrato il dominio google.com).
Nel seguente esempio ho definito le due celle all’interno della prima riga della tabella, ma le ho lasciate vuote:

Se provassi a visualizzare l’anteprima di questo file col browser non vedresti nulla. 

Questo perché la tabella ha una struttura del tutto trasparente. Per rendere la tabella visibile possiamo impostare l’attributo border del tag table a 1px (impostando così un bordo di 1 pixel per la struttura della tabella). Questo attributo in realtà è poco utilizzato, ma in questo caso torna molto utile a scopo didattico:

Visualizzando ora il file in anteprima dovresti essere in grado di vedere una minuscola struttura composta da una riga con all’interno due celle:

Ora possiamo inserire all’interno della prima cella la scritta “Google” a all’interno della seconda il numero 1997, così:

Il risultato in anteprima adesso è il seguente:

 Aggiungiamo una seconda riga alla tabella, utilizzando nuovamente il tag tr:

Al suo interno possiamo aggiungere le due celle che conterranno “Facebook” e il suo anno di nascita, il 2004:

Ottenendo questo risultato:

Ora prova ad aggiungere un’ultima riga alla tabella contenente “Twitter” e il suo anno di nascita, il 2006 (si, in meno di 10 anni Twitter è riuscito a rivoluzionare il mondo della comunicazione a livello globale... mai sottovalutare la potenza delle Applicazioni Web!)

Esercizio 1.3.2: Completa la tabella

Completa il codice appena scritto

per ottenere questo risultato:

SOLUZIONE

Tabelle avanzate

Nel corso del precedente esercizio abbiamo ottenuto una tabella con le tre più famosi Applicazioni Web e i rispettivi anni di nascita. Tuttavia il risultato ottenuto è solo un insieme di dati senza nessuna spiegazione. Sarebbe molto meglio poter specificare che la prima colonna contiene i nomi dei “Giganti del Web”  mentre la seconda il loro anno di nascita. In altre parole, sarebbe bello poter inserire un’intestazione della tabella.

Per definire i titoli delle colonne si utilizza il tag th (table column heading, titolo della colonna della tabella) che, a sua volta, dev’essere inserito all’interno di un tag tr. Così:

Il tag th informa il browser del fatto che “Nome” e “Anno” non sono dati come tutti gli altri, bensì i titoli delle colonne sottostanti. Il risultato è che essi vengono stilati in modo diverso (nel mio caso, in grassetto e centrati):

Ora manca solo una cosa: il titolo della tabella.
L’ideale sarebbe aggiungere una riga sopra a tutte le altre con scritto “I Giganti del Web per anno di nascita”. Cominciamo con l’inserire una riga sopra a tutte le altre, al suo interno dev’esserci solo una cella th:

Tuttavia, così facendo, il risultato è il seguente:

Questo perché la cella che dobbiamo appena aggiunto dovrebbe occupare due colonne invece di una. Se fossimo su un foglio Excel diremmo che vogliamo “unire due celle”.
In HTML è possibile specificare la dimensione in colonne e righe che una cella (th o td) deve occupare utilizzando gli attributi colspan (larghezza in colonne) e rowspan (altezza in righe). Nel nostro caso vogliamo che l’ultimo th aggiunto abbia una larghezza di due colonne, istruzione che si esprime in questo modo:

<th colspan="2">

Ed ecco il risultato finale:

La tabella appena realizzata sarebbe perfetta se fossimo ancora nel 2012, prima che uscisse la quinta versione di HTML: HTML5.
Quest’ultima versione, infatti, definisce altri 3 tag fondamentali che consentono di specificare meglio la struttura delle tabelle. Questi tag risultano particolarmente utili nel caso di tabelle molto complesse e sono i seguenti:

• thead da “table head” (testa della tabella)
• tbody da “table body” (corpo della tabella)
• tfoot  da “table foot”   (piede della tabella)

I primi due si usano in modo del tutto simile ai tag head e body contenuti all’interno del tag html e che già conosciamo bene. Mentre il tag tfoot si usa per identificare le ultime righe della tabella che solitamente contengono dei dati riepilogativi.

Esempio di utilizzo dei nuovi tag HTML5

Per chiarire tutti questi concetti proviamo ad estendere la tabella appena realizzata aggiungendo anche il guadagno annuo di ciascun “Gigante”. Dei dati approssimativi sono facilmente recuperabili con una ricerca su Google, da cui si scopre che annualmente ciascuna di queste aziende guadagna circa:

• Google: 14,4 miliardi di dollari
• Facebook: 1,5 miliardi di dollari
• Twitter: 1,4 miliardi di dollari

Cominciamo col crare il file 3-advanced-table.html che, all’inizio, deve essere un duplicato del file 2-table.html:

Ora possiamo aggiungere a tutti la colonna del guadagno annuo, coi rispettivi valori:

Nota bene:

• il colspan del primo th alla riga 10 è diventa pari a “3” perché ora il titolo della tabella deve essere largo 3 colonne
• è possibile utilizzare il simbolo del dollaro “$” in virtù del charset utf-8 specificato alla riga 5.

Osservando il codice risulta sempre più difficile capire quale parte definisce l’intestazione della tabella e quale il suo corpo. Per ovviare a questo problema possiamo markare le sezioni corrispondenti proprio coi tag thead e tbody, e indentare il codice di conseguenza. Nell’esempio che segue ho anche inserito dei commenti per evidenziare ulteriormente i tag inseriti.

Provando a ri-visualizzare l’anteprima, il risultato è invariato.

Infine possiamo aggiungere un’ultima riga, all’interno del tag tfoot, che esprima il totale del guadagno annuale dei tre “Giganti”:

Nota bene: 

• Il colspan del td alla riga 38 è stato impostato a “2”
• I tag thead, tbody e tfoot appena introdotti non modificano minimamente lo stile della tabella, lo stesso risultato in anteprima poteva essere utilizzato senza aggiungerli.

Ma allora, se i tag appena introdotti sono praticamente “invisibili”, perché sono importanti?

Il Web Semantico e la SEO

E’ importante capire che il Web, col passare degli anni, non solo è utilizzato da sempre più esseri umani, ma anche da sempre più programmi informatici. Nell’ultima versione di HTML rilasciata nel 2012 sono stati quindi inseriti una serie di tag semantici (che, cioé, definiscono il significato delle porzioni di codice che racchiudono) allo scopo di facilitare l’estrapolazione di informazioni da parte di utenti del web non umani. 
Si pensi, ad esempio, a un motore di ricerca come Google. Esso funziona visitando quasi tutte le pagine web disponibili online (miliardi e miliardi) e creandosi una rappresentazione interna delle informazioni che tali pagine contengono. Il tutto allo scopo di rispondere il più velocemente possibile alle domande che gli rivolgi ogni qualvolta effettui una ricerca su Google. 

L’utilizzo dei tag semantici come thead, tbody e tfoot servono quindi a facilitare programmi come Google nella comprensione del contesto e del significato dei dati contenuti in una pagina HTML. In altre parole servono ad aiutare i programmi connessi al web a ricavare informazioni utili dalle pagine HTML.

Per approfondire vedasi la definizione di web semantico su Wikipedia e questi video sul funzionamento di Google.

Come sicuramente avrai intuito, avere un sito in grado di farsi comprendere al meglio da Google (e dagli altri motori di ricerca) è un requisito fondamentale per posizionarti bene nei risultati di ricerca e farti trovare dai tuoi potenziali clienti o datori di lavoro. La disciplina che si occupa di questo obiettivo è conosciuta come “SEO” da “Search Engine Optimization” (ottimizzazione del posizionamento sui motori di ricerca) e sarà trattata in seguito, nei capitoli a essa dedicati.

Ora, prima di proseguire, ti consiglierei proprio di prenderti una bella pausa: hai appena imparato parecchie cose nuove. Beviti un caffè o dormici sopra.

PRENDITI UNA BELLA PAUSA

Un Vero Album Fotografico

Bentornato, ora che sai definire le tabelle in HTML puoi raggiungere l’obiettivo che ci siamo prefissati all’inizio di questa lezione, ricapitolando: 

1. Realizzare un album fotografico composto da una pagina che contenga le miniature di tutte le foto in una tabella 3x3 e...
2. ...far sì che ciascuna miniatura rimandi a una pagina con la foto in grande e la didascalia ad essa dedicata.

Comincia crando il file “4-album-index.html” nella cartella “lezione-3” all’interno del tuo workspace:

Esercizio 1.3.3: All’interno del file appena creato definisci la struttura di una tabella

La tabella da definire deve avere tre righe e tre colonne, per realizzarla utilizza solo i tag table, tr e td.

SOLUZIONE

All’interno delle 9 celle (i tag td) ora puoi inserire le miniature delle immagini. Per ottenere una miniatura ti ricordo che basta utilizzare l’istruzione CSS width:250px all’interno dell’attributo style del tag img di ciascuna immagine. Ecco un esempio con l’inserimento delle prime 3 immagini:

E il risultato in anteprima:

Esercizio 1.3.4: Inserisci le altre 6 miniature mancanti e un titolo

Lo scopo è ottenere il seguente risultato:

SOLUZIONE

Complimenti, hai realizzato la prima pagina del tuo album fotografico!

Nota bene: questa pratica di organizzare la posizione degli oggetti utilizzando le tabelle era in voga negli anni '90 per la mancanza di strumenti più adeguati. Dai primi anni del nuovo millennio si è affermato il principio di design "tableless" (senza tabelle) la cui filosofia consiste nell'utilizzare il tag table solo per gestire i dati strutturati (ovvero per tabelle vere e proprie) mentre per il posizionamento degli elementi si utilizzano i tag div e span, in combinazione col linguaggio CSS. Vedremo alcuni esempi nel prossimo capitolo-tutorial.

Ora dobbiamo fare in modo che ciascuna miniatura diventi un link che rimandi a una pagina dedicata all’immagine. Per prima cosa creiamo un file dedicato a ciascuna immagine. I file devono chiamarsi uno.html, due.html, tre.html e così via, fino a nove.html:

Ciascun file deve contenere l’immagine in grande, una didascalia e i link per 

1. tornare all’indice delle immagini (il file “4-album-index” con le miniature),
2. andare all’immagine successiva.

Se vuoi può contenere anche un titolo.

Esercizio 1.3.5: Completa i 7 file mancanti, da “4-3.html” a “4-9.html”.

Per esempio il file uno.html può essere realizzato così:

Mentre il file due.html dev’essere fatto così:

Nota bene: nell’attributo href del link per tornare all’album abbiamo potuto inserire solo il nome del file destinazione perché esso si trova nella stessa cartella del file linkante. Per l’attributo href valgono le stesse regole già accennate per l’attributo src: può contenere url o percorsi. Inoltre i link già visitati potrebbero comparire con un colore diverso da quelli mai visitati prima (impareremo a cambiare questi effetti col linguaggio CSS, più avanti).

Per completare l’esercizio ora non resta che collegare le miniature alle rispettive pagine con l’immagine in grande.

Esercizio 1.3.6: Completa l’album collegando le miniature alle rispettive pagine dedicate

Per raggiungere questo obiettivo basta sapere che il tag a può contenere sia testo che immagini! Quindi basta trasformare le miniature in link inserendole all’interno di un opportuno tag a. Ecco realizzati i primi 3 link di esempio:

Prova a realizzare i restanti 6 link da solo!

SOLUZIONE

Qui trovi tutti i file della lezione, puoi consultarli liberamente e confrontarli coi tuoi.

Complimenti: hai appena realizzato il un album fotografico composto da ben 10 pagine HTML collegate fra loro!

Nel corso del prossimo tutorial faremo conoscenza con gli ultimi tag fondamentali di HTML e utilizzeremo tutto quello che abbiamo imparato finora per realizzare il tuo Curriculum Vitae in HTML. Inoltre scoprirai come registrare un dominio internet per poi mettere online il tuo CV realizzando così il tuo primo sito web vero e proprio.

»Vai al prossimo Tutorial: Il tuo CV in HTML e altre meraviglie.

Scritto da

Duccio Armenise

Corsidia Founder

Aiuto solo i migliori Maestri a trovare i loro prossimi Studenti. Come? Così! :)

Bio - uCV

Per

Corsidia

I tuoi prossimi Studenti ti stanno già cercando, tu ci sei?