Collegare le pagine

Quando apriamo una pagina web, una delle caratteristiche principali consiste nella possibilità di collegare pagine diverse fra loro. Il tag <a> che vedremo in questa lezione è l’ultimo elemento fondamentale che tratteremo in questa guida ed è il tag che rende possibile la navigazione fra i contenuti.

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

[immagine wikipedia]

Ricordate quando abbiamo definito l’HTML? Abbiamo parlato di Hypertext Markup Language, ovvero il linguaggio che ci permette di strutturare un sito web.

Fino ad ora ci siamo concentrati molto sulla parte relativa al markup, senza approfondire quella legata all’hypertext.  Tuttavia mi preme molto dirvi che aver posticipato questo argomento non lo rende affatto secondario, anzi. Quando vi ho accennato la storia delle pagine web, avete potuto comprendere quanto fosse importante l’idea di poter collegare tanti contenuti fra loro, in modo che gli utenti potessero passare da una parte all’altra del web con estrema semplicità. Effettivamente, non potrete mai creare un sito web senza saper collegare le pagine fra loro, rendendo di conseguenza il contenuto interattivo.

Hypertext o ipertesto

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 ci permette di specificare l’indirizzo della risorsa verso cui navigare. Il principio di navigazione e reperimento delle risorse è identico a quanto abbiamo visto nella scorsa lezione con l’inserimento delle immagini.

Collegare una pagina attraverso un URL assoluto

Possiamo specificare nell’href di una anchor link dei percorsi assoluti per collegare le pagine provenienti da diversi siti web. Quando abbiamo definito i percorsi assoluti nell’inserimento delle immagini, facevamo riferimento a  quella sequenza di caratteri che indica l’indirizzo esatto della risorsa (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.

[immagine che mostra le 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;
  • Il percorso verso la risorsa, che ci permette di attraversare il sito web passando fra le varie directory che lo compongono.

Prendiamo come esempio questo percorso e analizziamolo:

<a href="https://creativecode.it/html-per-principianti/presentazione-del-corso.html">
  Vai alla guida
</a>

Il contenuto dell’elemento <a>: “Vai alla guida”,  ci condurrà verso un file di nome: “presentazione-del-corso.html”. Questo file è una pagina web posizionata all’interno di una cartella chiamata html-per-principianti. Per trovare questa directory, dobbiamo metterci in contatto con l’host che ha in memoria il sito web, attraverso il nome di dominio creativecode.it. Il tutto avviene attraverso un protocollo standard di sicurezza (https) che assicura l’integrità dei dati scambiati, ecc.

Collegare una pagina attraverso un URL relativo

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

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 dovreste essere in grado già da soli di dare una spiegazione a questo comportamento. Ripetiamo: essendo index.html e about.html due pagine che si trovano nella stessa cartella, per puntare verso l’una o verso l’altra non abbiamo bisogno di specificare alcun passaggio di directory, perciò ci basterà indicare il nome del file.

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

Collegare le pagine ad un menu di navigazione

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

Analizziamo 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 vedete in alto è la costruzione di un menu attraverso una lista html, che ha come elementi 3 anchor tags che ci permettono di navigare fra le varie pagine.

Osserviamo con particolare attenzione il link che fa riferimento all’homepage, ovvero alla pagina index, quella in cui ci troviamo.

Non notate qualcosa di strano? Effettivamente è la prima volta che ricorriamo al ./ nella definizione di un percorso. Essendo molto simili, fate attenzione a non confondere il ./ con il ../ che abbiamo 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 avremmo potuto ottenere lo stesso risultato scrivendo <a href="index.html">Home</a>, tuttavia, per esperienza, vi consiglio di adottare la sintassi con ./ perché con l’approfondimento di siti più complessi, sarà piuttosto facile perdere la bussola se non si è abbastanza specifici.

Collegare gli assets

Quando scriviamo un tag <a> non dobbiamo necessariamente specificare un’altra pagina web, possiamo 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.

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

  • index.html
  • pages [cartella]
    • about.html
    • contatti.html
  • images [cartella]
    • html-per-principianti-cover.jpg

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

<a href="./images/html-per-principianti.jpg">Copertina della guida HTML per principianti</a>

Provate a fare la stessa cosa anche voi iniziando a prendere confidenza con la sintassi ./ .

Altri elementi come link

Possiamo scegliere di rendere interattivi tutti gli elementi che abbiamo visto fino ad ora. Un classico esempio è quello di rendere cliccabile un’area con un’immagine e un titolo. Proviamo per esempio a creare un jumbotron old school. Il jumbotron è un web component molto comune che viene spesso utilizzato per messaggi promozionali o di marketing (trovate qui sotto un esempio).

[immagine jumbotron]

Possiamo creare il nostro jumbotron con il titolo HTML Per principianti preceduto  dall’illustrazione del corso. Aggiungeremo di seguito una breve descrizione e un link che invoglia il comunicatore ad andare alla pagina di presentazione della guida. Proviamo inoltre a rendere cliccabili anche l’immagine e il titolo, in modo che la navigazione possa risultare più immediata. Vediamo come fare…

<a href="https://creativecode.it/">
  <img src="" alt="Illustrazione HTML per principianti">
  <h3>HTML Per principianti</h3>
</a>
<hr />
<p>
  Breve descrizione del corso
</p>
<a href="https://creativecode.it/">Vai alla guida</a>

In questo modo sto utilizzando l’elemento <a> come link contenitore di <img /> e <h3> affinché entrambi possano essere collegati alla pagina di presentazione del corso.

Attributi comuni di un anchor tag

Fra gli attributi più comuni di un anchor tag, oltre l’href, ne esistono altri che ci 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 possiamo garantire al sito web una buona accessibilità, permettendo la visualizzazione anche alle persone che soffrono di disturbi alla vista o ai disabili. 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 rivolta agli inesperti che desiderano imparare le basi dei linguaggi per il web"
href="https://creativecode.it/html-per-principianti">
Vai alla guida HTML Per principianti
</a>

Attributo download

L’attributo download permette di scaricare direttamente nella memoria del dispositivo su cui stiamo 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://crativecode.it/html-per-principianti-cover.jpg" download>Scarica la copertina della guida</a>

Attributo target

L’attributo target ci permette di specificare dove aprire il documento indicato nell’href. Attraverso di esso potremo quindi 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 stiamo 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 colleghiamo una pagina ad un’altra rimarremo sempre sulla stessa finestra.

<a href="https://creativecode.it/html-per-principianti-cover.jpg" target="_blank">Apri la copertina in una nuova finestra</a>

Sito Web Old School [Parte 5]

A questo punto siete ad un passo dal completamento del vostro sito web old school. Potete scegliere di rendere interattiva la vostra singola pagina web creando una sezione blog in index, con i titoli dei vostri articoli più recenti separati da una linea orizzontale. Potete scegliere di mostrare sotto i titoli anche una breve descrizione dell’articolo con la data di pubblicazione attraverso uno o più tag <p> e inserire in alto un’immagine thumbnail. Cercate di inserire quanti più elementi possibile.

Create le nuove pagine articolo sfruttando il boilerplate HTML. Non preoccupatevi se non avete degli articoli o dei contenuti vostri già pronti; essendo un’esercitazione potete copiare da qualsiasi cosa vi passi per la testa (anche da questo sito, tanto per capirci), l’importante è tenere tutto in locale senza pensare di pubblicare dei contenuti copiati da altri siti, perché non sarebbe saggio!

Provate a creare una nuova directory blog nella cartella del vostro sito e posizionate all’interno 3 o 4 pagine articolo (articolo-1-febbraio-2019.html, articolo-2-febbraio-2019.html, ecc.).

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

A proposito di futuro, siamo ormai agli sgoccioli di questa guida introduttiva! Nella prossima lezione completeremo l’aspetto legato agli anchor tags parlando della navigazione dei contenuti all’interno di una singola pagina web.

Lascia un commento

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *