Nel precedente articolo, Inserire Collegamenti Ipertestuali in HTML5, abbiamo esplorato come inserire collegamenti ipertestuali in HTML5 per creare link a risorse esterne e interne. In questo articolo, approfondiremo come gestire i collegamenti tra pagine HTML all'interno di un sito web, un aspetto fondamentale per creare una navigazione fluida e intuitiva.
Collegamenti tra Pagine dello Stesso Sito
Per collegare pagine HTML diverse, all'interno dello stesso sito, utilizziamo i percorsi relativi. I percorsi relativi puntano a pagine che si trovano all'interno della stessa struttura di cartelle del sito. I percorsi relativi partono sempre dal file caricato nel browser.
Collegamento a pagina sullo stesso livello
Supponiamo di voler collegare una pagina html memorizzata allo stesso livello
della pagina corrente. Se le due pagine si trovano nella stessa cartella,
possiamo semplicemente usare il nome del file:
<a href="pagina2.html">Vai a Pagina 2</a>
Una struttura di cartelle corretta in questo caso è la seguente:
www
|- pagina1.html
|- pagina2.html
Collegamento a pagina in sottocartella
Supponiamo invece che il file da aprire sia memorizzato in una sottocartella; ad esempio consideriamo la seguente alberatura:
www
|- pagina1.html
|- sottocartella/
|- pagina2.html
In questo caso dobbiamo specificare il percorso completo dal file caricato al file che si intende collegare:
<a href="sottocartella/pagina3.html">Vai a Pagina 3</a>
Collegamento a pagina in cartella di livello superiore
Se la pagina collegata si trova in una cartella superiore rispetto alla pagina
corrente, usiamo ../ per indicare il passaggio a un livello superiore. Supponiamo di avere la seguente struttura di cartelle e file:
www
|- pagina4.html
|- sottocartella/
|- pagina2.html
Per collegare correttamente la pagina4.html dalla pagina2.html scriviamo:
<a href="../pagina4.html">Vai a Pagina 4</a>
Collegamenti con Percorsi Assoluti
I percorsi assoluti includono l'intero URL della pagina di destinazione e vengono utilizzati quando si desidera collegarsi a una risorsa esterna o quando si vuole specificare un URL completo. A differenza dei percorsi relativi, i percorsi assoluti non dipendono dalla posizione del file corrente.
Esempio di collegamento assoluto:
<a href="https://www.miosito.com/sezione/pagina5.html">Vai a Pagina 5</a>
Questo tipo di collegamento è utile quando si collegano risorse che si trovano su un dominio diverso o su una sezione completamente separata del sito web. Tuttavia, può risultare meno flessibile rispetto ai percorsi relativi, poiché un cambiamento di dominio o di struttura del sito richiederebbe l'aggiornamento manuale di tutti i collegamenti assoluti.
Relativi vs Assoluti: Quando Usarli?
Percorsi Relativi: Sono ideali per collegare pagine all'interno dello stesso sito. Il vantaggio principale è che funzionano indipendentemente dal dominio e non devono essere aggiornati se il sito viene spostato su un altro server o dominio. Sono anche più corti e facili da gestire, soprattutto in progetti di grandi dimensioni.
Percorsi Assoluti: Si usano quando si punta a risorse esterne o quando è necessario fornire l'intero URL per garantire che il collegamento funzioni indipendentemente dal contesto in cui viene utilizzato. Sono particolarmente utili per collegamenti esterni o file che risiedono su domini diversi.
| Relativo | Assoluto |
|---|---|
| Utilizza il percorso relativo alla posizione attuale | Include l'intero URL della risorsa |
| Maggiore flessibilità in caso di spostamento del sito | Rischio di rompere i link se cambia il dominio o la struttura |
Esempio: sottocartella/pagina3.html |
Esempio: https://miosito.com/pagina3.html |
Conclusioni
Saper gestire correttamente i collegamenti tra le pagine di un sito web è fondamentale per creare una navigazione fluida e intuitiva. Mentre i percorsi relativi offrono flessibilità per collegare pagine interne, i percorsi assoluti sono essenziali per collegare risorse esterne o specificare percorsi fissi. In un progetto ben strutturato, è importante scegliere il tipo di percorso più adatto in base alle esigenze del sito e al contesto di utilizzo.
