Il cuore grande dell'HTML: Creazione di collegamenti e inserimento di immagini

Cuore HTML
Web Design
Francesca Gallesio
14 Dicembre 2019

Per prima cosa ti faccio i miei complimenti. Lo sai che solo il 10% di chi studia in autoistruziuone arriva alla terza lezione? Tu sei già alla quarta! Questo vuol dire che il mondo del web ti appassiona davvero tanto e che molto probabilmente diventerà la tua professione :-) Anche in questo caso apparterrai a una piccola (piccolissima!) percentuale di persone che fa un lavoro che gli piace...e si sa come diceva Confucio: “Fai quello che ami e non lavorerai un solo giorno della tua vita” E io  lo posso sottoscrivere.

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
>

Example 1
 
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:

Example 2

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:

Example 3

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 sapere di più? Iscriviti al MASTER in Web Design e Developer!