Sviluppo Web
HTML Cap.3: impariamo a inserire delle immagini e a creare dei collegamenti ipertestuali.
I COLLEGAMENTI IPERTESTUALI
Oggi ci avviciniamo alla realizzazione del tuo sogno andando dritti al cuore dell'HTML: i collegamenti ipertestuali. Sì, perché Internet non è altro che una immensa rete di collegamenti ipertestuali. Sono sicura che ti viene in mente qualcosa: HTML non significa HyperText Markup Language? 🧐
Ma che cos'è un collegamento ipertestuale? È una sorta di bottone (che può essere un testo, un'immagine o altro) che, al clic, mi rimanda da un'altra parte.
Per creare un collegamento ipertestuale mi servono 3 cose:
- Un oggetto su cui cliccare.
- Un indirizzo di destinazione.
- Un oggetto da aprire che si trova all'indirizzo di destinazione.
Il tag di riferimento è <a> che viene accompagnato necessariamente dall'attributo href (che mi permette di indicare l'indirizzo di destinazione).
A questo proposito bisogna anche sapere che esistono 3 tipi di collegamenti:
- Assoluti: che specificano l'intero indirizzo e che si usano per collegare pagine esterne al nostro sito (es: https://www.sinervis.com/corsi.html)
- Relativi: che specificano una pagina relativa al nostro sito e che non necessitano della ripetizione di tutta l'URL (es: contatti.html)
- Interni: collegamenti all'interno di una stessa pagina (per esempio se dalla fine voglio andare direttamente a inizio pagina)
Impariamo a creare e gestire i primi due tipi:
COLLEGAMENTI ASSOLUTI
Obiettivo: creare un link che punti alla pagina dei corsi SinerVis in partenza a Torino.
La sintassi sarà questa:
<a href=”https://corsi.sinervis.com/date-partenza-corsi-informatica-torino”>CORSI IN PARTENZA A TORINO</a>
Tutto ciò che c'è fra la apertura del tag <a> e la sua chiusura, verrà linkato alla pagina che ha l'indirizzo scritto nell'href.
Se poi vogliamo aggiungere un'etichetta per indicizzare1 il sito e per renderlo più usabile2 e accessibile3, ti consiglio di aggiungere un altro attributo: title. Farà apparire una piccola didascalia:
<a href=”https://corsi.sinervis.com/date-partenza-corsi-informatica-torino” title=”vai alla pagina dei corsi in partenza a Torino”>CORSI IN PARTENZA A TORINO
</a>
COLLEGAMENTI RELATIVI
Obiettivo: creare un menù testuale che permetta di navigare le pagine del mio sito:
In questo caso nell’href ci basterà inserire semplicemente il nome della pagina da linkare, la sintassi ed il risultato, quindi, saranno i seguenti:
E se volessi creare un link usando un'immagine?
Il tag che useremo per richiamare un'immagine è <img/>. Si tratta di un tag empty, perché non si deve chiudere. L'attributo per richiamare l'immagine e per specificare la sua posizione è src.
Per prima cosa devo inserire un'immagine nella mia pagina. Anche in questo caso lavoro di indirizzi. Qual è la posizione (l'indirizzo) della mia immagine relativamente alla struttura de mio sito web e qual è il suo nome completo? Normalmente si crea una cartella nominata img e qui dentro si posizionano le immagini che si vogliono utilizzare. Questa cartella sarà nella root principale del sito.
Quindi, adesso possiamo
CREARE UN LINK USANDO UN'IMMAGINE.
Obiettivo: creare un link a Google usando il suo Logo.
La sintassi e il risultato saranno questi:
in poche parole, al posto di un testo, fra l'apertura e la chiusura di <a>, abbiamo inserito il tag <img/> (infatti tutto quello che c'è fra l'apertura e la chiusura di <a> verrà linkato all'indirizzo specificato nell'href.)
Per adesso è tutto e nel prossimo articolo impareremo a usare le tabelle per impaginare gli elementi della nostra pagina!
