 |
In un sito web, non tutti i contenuti devono essere visualizzati direttamente nella pagina. Spesso è necessario condividere risorse aggiuntive — come manuali in PDF, moduli in Word, presentazioni o archivi compressi — che l'utente deve poter conservare sul proprio dispositivo per consultarli offline o stamparli.
Lo scopo di questa guida è spiegare come rendere queste risorse facilmente accessibili. Imparerai non solo come collegare fisicamente un file alla tua pagina web, ma anche come ottimizzare l'esperienza di download, garantendo che il browser dell'utente riconosca correttamente il file e lo salvi in modo intuitivo.
1. Il metodo base (HTML)
Per creare un link a un documento, devi utilizzare l'attributo href all'interno di un tag <a>.
Sintassi:
<a href="percorso/del/tuo/file.pdf">Clicca qui per scaricare il documento</a>Spiegazione dei componenti:
href="...": Indica il percorso dove si trova il file. Può essere un percorso relativo (se il file è sul tuo server) o assoluto (un URL completo).- Testo del link: È il testo visibile all'utente (es. "Scarica il manuale").
2. Suggerimenti per l'esperienza utente (UX)
Per rendere il download più intuitivo, ti consiglio di aggiungere due attributi specifici:
L'attributo download
Se vuoi forzare il browser a scaricare il file invece di aprirlo (molto utile per i PDF che i browser solitamente aprono in una scheda dedicata), aggiungi l'attributo download:
<a href="documenti/report-2026.pdf" download>Scarica il report in formato PDF</a>Indicare il formato e la dimensione
È sempre buona norma informare l'utente su cosa sta per scaricare. Puoi aggiungere queste informazioni direttamente nel testo del link:
<a href="manuale.pdf" download>Scarica il Manuale Utente (PDF, 2.5MB)</a>3. Gestione dei file sul server
Per far sì che il link funzioni, assicurati di seguire queste regole:
- Organizzazione: Ti consiglio di creare una cartella dedicata nel tuo progetto (es.
/assets/downloads/o/files/) per tenere i documenti separati dalle immagini o dagli script. - Nomi dei file: Evita spazi, caratteri speciali (come
à,è,ì) e maiuscole nei nomi dei file.
4. Esempio completo
Ecco come apparirebbe il codice in una pagina strutturata:
<h3>Documentazione Disponibile</h3>
<ul>
<li>
<a href="/files/brochure-aziendale.pdf" download>
Scarica la Brochure 2026 (PDF, 1.2MB)
</a>
</li>
<li>
<a href="/files/listino-prezzi.zip" download>
Scarica il Listino Prezzi Completo (.ZIP)
</a>
</li>
</ul>Una nota sulla sicurezza
Se stai caricando file su un server remoto o tramite un CMS (come WordPress), assicurati che la cartella che contiene i file abbia i permessi di lettura corretti, altrimenti il browser restituirà un errore 403 Forbidden quando l'utente cercherà di scaricare il documento.
Follow me #techelopment
Official site: www.techelopment.it
facebook: Techelopment
instagram: @techelopment
X: techelopment
Bluesky: @techelopment
telegram: @techelopment_channel
whatsapp: Techelopment
youtube: @techelopment
