Il cuore grande dell'HTML

Sviluppo Web

Il cuore grande dell'HTML

by Francesca
Giugno 2020

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
>

html
 
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:

html

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:

html

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! 

Vuoi approfondire gli argomenti?
Scegli un corso SinerVis e formati con i professionisti del settore 👇
Francesca
Grafico
UI & UX Designer
Docente Sinervis
Sono Francesca: web e graphic designer, content creator e formatrice in ambito multimediale. Il mio percorso professionale è iniziato quasi vent’anni fa. Dopo aver ottenuto delle certificazioni in ambito informatico (partendo dalle più basilari come l’ECDL, EIPASS, fino ad arrivare al...