Collegare le pagine

creativecode avatar Giulio Tiseo

19 Lug, 2019

~10min.

Scoprirai come collegare più pagine HTML fra loro attraverso link ipertestuali e il tag . Una delle caratteristiche principali del web è appunto la straordinaria capacità di creare interconnessioni fra più pagine attraverso dei semplici link.

Requisiti

Questo articolo potrebbe risultare piuttosto avanzato per chi è alle prime armi. Prima di immergervi nella lettura, rispondi a queste domande: sai come funziona internet? Sei in grado di inserire immagini in un documento HTML? Sai costruire una lista? Sai scrivere l’attributo di un tag? Se le risposte a queste domande non dovessero essere tutte positive, ti suggerisco di leggere prima gli articoli che ti ho indicato. Buona lettura.

# Hypertext o ipertesto

Il tag <a> che vedrai in questo articolo è l’ultimo elemento fondamentale che tratteremo in questa guida ed è il tag che rende possibile la navigazione fra i contenuti.

Quando ti parlo di collegamenti ipertestuali di una pagina web, faccio riferimento a quelle frasi o parole che spesso sono visualizzate con un colore diverso e che ci consentono tutti i giorni di navigare in internet passando da un argomento all’altro.

Pagine collegate fra loro su wikipedia
L’immagine mostra esempi di link ipertestuali, contrassegnati con una colorazione blu, in una classica pagina di Wikipedia

In un altro articolo ti ho spiegato cos’è l’Hypertext Markup Language, ovvero del linguaggio che ti permette di strutturare un sito web e che stai studiando in questa guida.

Fino ad ora ci siamo concentrati molto sulla parte relativa al markup, senza approfondire quella legata all’hypertext. Aver posticipato questo argomento non lo rende affatto secondario, anzi. Possiamo tranquillamente affermare che una pagina web non può essere considerata tale se non vi è la presenza di almeno un link che permette di navigare o interagire con la pagina.

L’hypertext o ipertesto non è altro che una collezione di documenti di testo che possono essere collegati attraverso l’uso di hyperlinks (collegamenti ipertestuali). È possibile creare questi collegamenti attraverso il tag <a> (anchor tag). Sul tag<a>è necessario applicare l’attributo href (hypertext reference) che ti permetterà di specificare l’indirizzo della risorsa verso cui navigare.

Rilassati, se hai seguito con attenzione questa guida e hai capito tutto, non avrai problemi a capire gli anchor tags. Tieni presente che il principio di navigazione e reperimento delle risorse è identico a quanto hai visto nell’articolo precedente con l’inserimento delle immagini.

# Collegare una pagina attraverso un URL assoluto

Puoi specificare nell’href di una anchor link dei percorsi assoluti per collegare le pagine provenienti da diversi siti web. Quando ti ho spiegato i percorsi assoluti nel caso dell’inserimento delle immagini (vedi articolo precedente), facevo riferimento a quella sequenza di caratteri che indica l’indirizzo esatto della risorsa (es. http://placekitten.com/200/300). Questo tipo di percorso può essere definito con un nome ben preciso: URL (Uniform Resource Locator).

L’URL permette di reperire documenti e risorse presenti sul web attraverso un indirizzo strutturato in almeno tre parti.

  • il protocollo, ovvero il metodo di accesso alla risorsa. Il protocollo nativo del web è l’http (https per le comunicazioni sicure), ma ne esistono anche altri che ci permettono ad esempio di trasferire i file (protocollo ftp) o di inoltrare le mail (protocollo mailto);
  • Il nome di dominio DNS, che ci permette di raggiungere l’indirizzo IP dell’host che ha in memoria la risorsa, come abbiamo visto nella in questo articolo;
  • Il percorso verso la risorsa, che ci permette di attraversare il sito web passando fra le varie directory che lo compongono.
Da cosa è composto un URL
L’immagine mostra da cosa è composto un classico URL

Prendiamo come esempio questo percorso e analizziamolo:

<!-- Il codice seguente ha solo fine illustrativo -->
<a href="https://creativecode.it/guida-base-html/collegare-le-pagine.html">
  Vai alla guida
</a>

Il contenuto dell’elemento <a>: “Vai alla guida”,  conduce a un file di nome: “collegare-le-pagine.html”. Questo file è in teoria una pagina web posizionata all’interno di una cartella chiamata guida-base-html.

In pratica, per trovare tale directory ti metterai in contatto con l’host che ha in memoria il sito web e gli chiederai di accedere al sito che ha come dominio creativecode.it. In realtà queste fasi si svolgeranno per vie indirette in quanto sarà il browser a gestire la comunicazione per conto tuo (leggi l’articolo Come funziona internet per saperne di più).

Il tutto avviene attraverso un protocollo standard di sicurezza (https) che assicura l’integrità dei dati scambiati.

# Collegare una pagina attraverso un URL relativo

Naturalmente esiste la possibilità di collegare le pagine anche specificando un URL relativo. Tieni sempre conto che l’href di un link punta a un file iniziando il percorso DALLA directory relativa alla pagina in cui ti trovi.

Ammettendo quindi di avere una struttura del sito web simile a questa:

  • index.html
  • about.html

Per spostarmi dalla Hompage alla pagina “Chi sono” mi basterà scrivere in index:

<a href="about.html">Chi sono</a>

Allo stesso modo, dalla pagina Chi sono posso tornare alla homepage scrivendo:

<a href="index.html">Home</a>

A questo punto dovresti essere in grado già da solo di dare una spiegazione a questo comportamento.

Come esercizio prova anche tu a collegare le pagine HTML in questo modo, simulando un contenuto random con titoli e paragrafi.

# Collegare le pagine a un menu di navigazione

Ma come ci comportiamo se le pagine sono organizzate in cartelle diverse?

Analizziamo insieme un caso reale ipotizzando di voler creare un menu di navigazione, tenendo conto di questa struttura:

  • index.html
  • pages [cartella]
    • about.html
    • contatti.html

Ammettiamo di trovarci in Homepage (index.html) e di voler creare un menu con le seguenti voci: Home, Chi sono, Contatti.

Posso scrivere il mio codice in questo modo:

<!-- Da index.html -->
<ul>
    <li><a href="./index.html">Home</a></li>
    <li><a href="pages/about.html">Chi sono</a></li>
    <li><a href="pages/contatti.html">Contatti</a></li>
</ul>

Quella che vedi in alto è la costruzione di un menu attraverso una lista html, che ha come elementi 3 anchor tags che ti permetteranno di navigare fra le varie pagine.

Osserva con particolare attenzione il link che fa riferimento all’homepage, ovvero alla pagina index.

Non noti qualcosa di strano? Effettivamente è la prima volta che ti mostro la sintassi ./ nella definizione di un percorso. Essendo molto simili, fai attenzione a non confonderla con il ../ che hai già usato in precedenza per navigare a ritroso fra le directory.

Quando scriviamo un URL preceduto dai caratteri: ./ stiamo esprimendo un path relativo che obbliga il browser ad iniziare il percorso dalla cartella in cui ci troviamo.  In teoria avresti potuto ottenere lo stesso risultato scrivendo <a href="index.html">Home</a>, tuttavia, per esperienza, ti consiglio di adottare la sintassi con ./ perché con l’approfondimento di siti dinamici più complessi, sarà piuttosto facile perdere la bussola se non si è abbastanza specifici.

# Collegare altri contenuti

Quando scrivi un tag <a> non devi necessariamente specificare un’altra pagina web, puoi anche indicare un URL che punta a un’immagine, un video o un audio. In tal caso, il browser aprirà la risorsa in una nuova finestra.

Puoi provare a verificarlo implementando la struttura vista nel paragrafo precedente in questo modo:

  • index.html
  • pages [cartella]
    • about.html
    • contatti.html
  • images [cartella]
    • guida-base-html-cover.jpg

Immagina quindi di inserire in homepage, sotto il menù di navigazione, un link che porta all’immagine html-per-principianti-cover.jpg.

<a href="./images/guida-base-html-cover.jpg ">Copertina della Guida base all'HTML</a>

Prova a fare la stessa cosa anche tu iniziando a prendere confidenza con la sintassi ./ .

Puoi scegliere di rendere interattivi tutti gli elementi che hai visto fino ad ora. Un classico esempio è quello di rendere cliccabile un’area con un’immagine e un titolo.

Prova per esempio a creare un banner adv minimal. Un banner adv è un tipo di web component molto comune che viene utilizzato per messaggi promozionali o di marketing sulle pagine web (trovate qui sotto un esempio).

Esempio banner ADV
Esempio di Banner ADV cliccabile

Prova a creare una pagina web in cui carichi l’immagine in alto e fai in modo che sia cliccabile. Aggiungi in basso il titolo della guida e la descrizione.

Se ti senti un po’ perso, tranquillo… vediamo insieme come fare:

<a href="https://creativecode.it/guide/guida-base-html/">
  <img src="https://creativecode.it/wp-content/uploads/2019/01/banner-adv.png" alt="Illustrazione Guida base HTML">
  <h3>Guida base HTML</h3>
</a>
<hr />
<p>
Vuoi creare siti web ma non sai da dove cominciare? L’HTML è senza dubbio il miglior punto di partenza per un primo approccio ai linguaggi informatici. Avrai una panoramica dei contenuti fondamentali sullo sviluppo di siti web partendo dalle basi e inizierai a costruire pagine HTML anche se non hai alcuna esperienza con il coding.
</p>
<a href="https://creativecode.it/guide/guida-base-html/">Vai alla guida</a>

In questo esempio stai utilizzando l’elemento <a> come link/contenitore di <img /> e <h3> affinché entrambi possano essere collegati alla pagina di presentazione del corso. Dopodiché puoi inserire una descrizione della guida e un link ipertestuale che, così come l’immagine e il titolo, conducono alla pagina di presentazione.

# Attributi comuni di un anchor tag

Fra gli attributi più comuni di un anchor tag, oltre l’href, ne esistono altri che permettono di definire meglio l’entità e il comportamento che deve assumere il browser con le risorse a cui punta il link.  

Attributo title

L’attributo title viene utilizzato per specificare un testo che descriva il senso e l’utilità del collegamento ipertestuale. Attraverso il title puoi garantire al sito web una buona accessibilità, permettendo la visualizzazione anche alle persone che soffrono di disturbi alla vista. Il contenuto dell’attributo title compare anche sotto forma di etichetta quando fermiamo il cursore del mouse per qualche secondo sul link.

<a title="Guida HTML che si rivolge agli inesperti che desiderano imparare le basi dei linguaggi per il web"
href="https://creativecode.it/guide/guida-base-html/">
Vai alla Guida Base all'HTML
</a>

Attributo download

L’attributo download permette di scaricare direttamente nella memoria del dispositivo su cui stai navigando la risorsa indicata nell’href. L’attributo download non ha bisogno di esprimere alcun valore, sarà sufficiente quindi applicarlo in questo modo:

<a href="https://creativecode.it/wp-content/uploads/2019/01/banner-adv.png" download>Scarica in banner promozionale della guida</a>

Attributo target

L’attributo target ti permette di specificare dove aprire il documento indicato nell’href. Attraverso di esso potrai dire al browser di aprire la risorsa in una nuova finestra o di sostituire la finestra corrente con la nuova pagina. I valori più comuni utilizzati per l’attributo target sono due: _blank e _self.

Il primo apre il documento in una nuova finestra o una nuova tab, a seconda del browser con cui stai navigando. Il secondo apre il documento sostituendo la finestra corrente con quella nuova. L’attributo target="_self" è applicato di default a tutti gli anchor tag, quindi a meno che non sia specificato un _blank, ogni volta che colleghi una pagina ad un’altra, rimarrai sempre nella stessa finestra.

<a href="https://creativecode.it/wp-content/uploads/2019/01/banner-adv.png" target="_blank">Apri il banner promozionale in una nuova finestra</a>

# Creare una pagina web in puro HTML – Il classico social (Parte 5)

A questo punto sei ad un passo dal completamento del tuo profilo social. Ricordi quando hai creato la lista con le voci di menu nell’articolo Liste in HTML? Finalmente puoi completare il menu creando dei link all’interno di ciascun list item.

Crea quindi altre 5 pagine (info.html, photo.html, video.html, friends.html) e associale alle rispettive voci di menu attraverso degli anchor tags. Ovviamente mi aspetto che ci metta un po’ di impegno nello sviluppare anche ciascuna pagina!

info.html potrebbe essere una pagina con delle intestazioni e una serie di paragrafi dove puoi parlare di te, dei tuoi interessi, ecc.

photo.html e video.html sono inseriti in un cartella di nome gallery-pages. Inserisci una serie di miniature affiancate nella pagina photo.html e una sotto l’altra nella pagina video.html. Nella pagina friends.html invece crea una lista non ordinata dei tuoi amici con nome e immagine del profilo.

Inserisci un menu di navigazione uguale a quello della index in ogni pagina, in modo da poter navigare su tutte le pagine.

Ovviamente questa è solo una base; hai tutto il diritto di modificare, aggiungere elementi e migliorare il profilo del tuo Classico social.

Formatta le pagine ricorrendo a tutti gli elementi che hai visto nel corso della guida. In queste fasi dell’apprendimento hai bisogno di ripetere, ripetere e ripetere. Occorre del tempo per assimilare la sintassi e prendere confidenza con tutti gli elementi, perciò impegnati ora per risparmiare tempo in futuro!

A proposito di futuro, siamo ormai agli sgoccioli di questa guida. Nella prossima lezione completerai l’aspetto legato agli anchor tags e ti parlerò della navigazione dei contenuti all’interno di una singola pagina web, dopodiché sarai pronto per tuffarvi nel vivo della costruzione dei layout!