In questa lezione vi mostro come rendere cliccabile una immagine per trasformarla in un collegamento.
Non sempre un link deve essere basato sul testo: ad esempio può essere necessario usare una immagine e renderla cliccabile (come un pulsante) per raggiungere la nostra destinazione.
Link grafici
Possiamo trasformare una immagine in un pulsante, racchiudendo il tag <img> all’interno del tag dei collegamenti <a>:
<a href="destinazione"> <img src="foto.jpg"> </a>
In questo modo, l’immagine diventa cliccabile e vi porterà alla destinazione del collegamento.
In questa lezione vi parlo di come rendere accessibile il vostro sito usando un testo alternativo per le immagini.
Se volete rendere il vostro sito alla portata di tutti, comprese persone che presentano disabilità visive, dovete inserire un testo alternativo per ciascuna immagine di ogni pagina.
Testo alternativo
Il testo alternativo va inserito come valore dell’attributo alt, all’interno del tag <img>:
<img src"foto.jpg" alt="descrizione della foto">
Le persone che hanno disabilità visive possono usare un programma speciale che, anziché mostrare le immagini, va a leggere le descrizioni che esse contengono.
In questa lezione vi spiego come si impostano le dimensioni di una immagine.
Normalmente le immagini vengono inserite sulla pagina mediante il tag <img>, che avete già visto.
Se non specifichiamo nulla, le immagini vengono visualizzate con la loro dimensione nativa, ovvero con i loro valori predefiniti di larghezza e altezza, tuttavia è possibile specificare la loro dimensione direttamente nel tag HTML con cui le inserite.
width e height
Per impostare la larghezza di una immagine, possiamo usare l’attributo width:
<img src="foto.jpg" width="200">
Il valore dell’attributo width è un numero che indica la larghezza dell’immagine espressa in pixel.
Per impostare l’altezza di una immagine, usiamo l’attributo height:
<img src="foto.jpg" height="200">
Anche il valore dell’attributo height è un numero inteso come pixel.
Nota: sebbene sia possibile impostare la dimensione delle immagini da HTML (come avete visto), si consiglia di usare sempre i CSS per questo tipo di formattazione.
In questa lezione vi mostro degli esempi pratici su come si inserisce un’immagine sulla vostra pagina, usando in maniera corretta il percorso del file.
In questa lezione vi spiego come inserire immagini nella vostra pagina web.
I file immagine
Nelle pagine web potete inserire file di tipo immagine, ovvero file con le seguenti estensioni:
.JPG o .JPEG
.GIF
.PNG
Per inserire una immagine nella pagina, dovete averla in una qualche cartella del vostro sito, oppure deve essere presente su un altro sito, ma dovete conoscere il suo indirizzo.
<img>
Il tag <img> serve per inserire una immagine nella pagina. Come per il tag <br>, anche questo è autoconclusivo, non occorre chiuderlo.
Il tag <img> vuole l’attributo src per sapere dove si trova l’immagine da visualizzare:
<img src="percorso immagine">
Esempio di immagine
Per inserire una immagine, potete usare un percorso relativo (se l’immagine è nel vostro sito) o assoluto (se si trova su un sito esterno).
In questa lezione vi mostro come creare un collegamento verso destinazioni diverse da una pagina web.
Tipi di destinazione
Ad un link potete assegnare una destinazione diversa da una pagina, ad esempio:
un documento (es: di Word o un PDF)
una immagine (es: GIF, JPEG)
un archivio (es: ZIP)
Quando la destinazione del vostro link è diversa da una pagina, basta indicare nell’attributo href il nome del file destinazione, compresa l’estensione:
In questa lezione vi illustro come funzionano i collegamenti interni ad una pagina web.
I link interni
Non tutti i collegamenti del tag <a> puntano necessariamente ad un’altra pagina: esistono dei casi in cui avete bisogno di rimanere nella stessa pagina in cui siete ma spostandovi verso l’alto o verso il basso, in un punto preciso.
Per fare questo, si inserisce nel codice in corrispondenza della destinazione, ovvero nel punto in cui volete fissare la visualizzazione della pagina, un punto di ancoraggio.
Il punto di ancoraggio si inserisce sempre usando il tag <a>, ma in modo diverso:
<a name="nome">
L’attributo name indica il nome della vostra ancora: inizio, fine, articolo1, ecc.
Il passo successivo è quello di dire al collegamento che non vogliamo uscire verso un’altra pagina, ma vogliamo raggiungere l’ancora posizionata dentro questa.
In questa lezione vi spiego quali percorsi potete usare per i vostri collegamenti.
Tipi di percorso
Un collegamento deve portare ad una sola destinazione: per poterlo fare, dobbiamo indicare al link dove si trova tale destinazione.
Si trova sul sito stesso della pagina di origine? Si trova nella stessa cartella? O si trova in un’altro sito?
Se si trova su un sito web esterno, si utilizza un percorso assoluto.
Se si trova sullo stesso sito web, possiamo usare un percorso relativo.
Percorsi assoluti
In un percorso assoluto si comunica al browser di andare a prendere la destinazione partendo direttamente dal dominio (es: www.miosito.it), muovendosi poi verso la posizione del file che si vuole raggiungere.
Per fare un’esempio pratico, basato sulla vita reale, è come se io volessi incontrare una persona basandomi sul suo indirizzo:
per prima cosa mi reco nella città dove si trova
poi cerco la via
quindi il numero civico
infine cerco il cognome sul citofono
Questo metodo funziona per qualsiasi indirizzo voglio usare, basta cercare la città dove abita la persona ed è fatta.
Esempio:
http://www.miosito.it/pippo/pluto.html
Dove:
http: indica il tipo di protocollo usato (in questo caso il protocollo di trasferimento di ipertesti)
www.miosito.it indica il dominio che identifica un server web sulla rete
pippo indica la cartella del sito in cui è contenuta la pagina di destinazione
pluto.html è il nome della pagina che rappresenta la destinazione
Il link finale sarà così composto:
<a href="http://www.miosito.it/pippo/pluto.html">Testo del collegamento</a>
Percorsi relativi
In un percorso relativo dobbiamo spiegare al browser quale strada dovrà seguire per poter andare a raggiungere la pagina web destinazione, partendo dal punto in cui si trova quella di partenza.
Per riferirmi all’esempio descritto sopra, cosa potrebbe succedere se volessi incontrare una persona che abita nella mia stessa via, usando il metodo descritto per il percorso assoluto?
Dovrei di nuovo uscire dalla città per poi rientrarci: inutile, no?
Se la persona abita nella mia stessa via, mi segno soltanto il numero civico e:
esco di casa
vado al palazzo di destinazione
cerco il cognome sul citofono.
Ovviamente questo procedimento non va bene se la persona si trova in un’altro paese.
Facciamo ora un esempio.
Il nostro sito contiene la seguente struttura:
www.sito.it:
homepage.html
cartella1/
partenza.html
topolino.html
sottocartella/
pluto.html
cartella2/
pippo.html
Immaginiamo di essere sulla pagina partenza.html e di voler raggiungere una delle altre pagine con questo collegamento:
<a href="">Vai alla destinazione</a>
Caso 1 – Destinazione = topolino.html
La pagina di destinazione del collegamento è nella stessa cartella che ospita la pagina di origine (cartella1).
Non mi muovo da lì, perché la pagina partenza vede perfettamente la pagina topolino (sono nella stessa cartella), quindi mi basta chiamare la pagina di destinazione col suo nome:
<a href="topolino.html">Vai alla destinazione</a>
Caso 2 – Destinazione = pluto.html
La pagina di destinazione del collegamento non è nella stessa cartella ma è immediatamente raggiungibile entrando in una cartella che riusciamo a vedere e scrivendo il nome della pagina:
<a href="sottocartella/pluto.html">Vai alla destinazione</a>
Caso 3 – Destinazione = homepage.html
La pagina di destinazione del collegamento è immediatamente fuori dalla cartella che ospita la pagina di origine (cartella1).
Se la pagina non è nella stessa cartella, devo “uscire” da dove mi trovo ora usando:
../
e poi digito il nome del file:
<a href="../homepage.html">Vai alla destinazione</a>
Caso 4 – Destinazione = pippo.html
La pagina di destinazione del collegamento non è nella stessa cartella (quindi usciamo con ../), ma non riusciamo ancora a vederla, perché si trova in un’altra cartella.
Scriviamo quindi il nome della cartella e, quindi, il nome del file:
<a href="../cartella2/pippo.html">Vai alla destinazione</a>
