I collegamenti ipertestuali sono riferimenti incorporati che consentono una navigazione fluida tra i documenti, siti webe diverse sezioni all'interno di una pagina.
Che cos'è un collegamento ipertestuale?
Un collegamento ipertestuale, spesso definito semplicemente come link, è un riferimento in un documento digitale che consente agli utenti di navigare da una posizione all'altra all'interno dello stesso documento, attraverso documenti diversi o verso siti Web completamente diversi. Questo riferimento è in genere incorporato nel testo o in un'immagine e, quando cliccato, istruisce il del browser or applicazione per caricare la destinazione specificata. Gli hyperlink sono una componente essenziale dell'ipertesto, il sistema che consente la navigazione non lineare delle informazioni su Internet.
Collegamento vs. collegamento ipertestuale
I termini "link" e "hyperlink" vengono spesso usati in modo intercambiabile, ma tra i due esiste una sottile distinzione.
Un "link" è un termine generico che in genere si riferisce a qualsiasi elemento in un documento o pagina web che si collega a un'altra posizione, che può includere sia testo che immagini. D'altro canto, un "hyperlink" si riferisce specificamente a un collegamento incorporato in un ipertesto, che è testo visualizzato su un computer o dispositivo digitale con hyperlink che forniscono accesso ad altro testo o informazioni.
Sebbene tutti i collegamenti ipertestuali siano link, non tutti i link sono considerati collegamenti ipertestuali. Ad esempio, un URL digitato in un documento di testo normale è un collegamento, ma non un collegamento ipertestuale finché non diventa cliccabile all'interno di un sistema ipertestuale. In sostanza, un collegamento ipertestuale è una forma più specifica di collegamento, progettata per facilitare la navigazione facile e interattiva all'interno e tra documenti digitali.
Qual è lo scopo dei collegamenti ipertestuali?
Lo scopo principale degli hyperlink è facilitare la navigazione facile e intuitiva tra diversi pezzi di contenuto digitale, sia all'interno dello stesso documento che su più documenti e siti web. Gli hyperlink consentono agli utenti di accedere rapidamente alle informazioni correlate, migliorando l'esperienza utente complessiva offrendo un modo fluido per esplorare risorse interconnesse. Servono come fondamento della struttura del web, consentendo l'esplorazione non lineare del contenuto, che è fondamentale per il funzionamento di Internet.
Oltre ad agevolare la navigazione, gli hyperlink sono essenziali per organizzare e strutturare le informazioni in modo da renderle più accessibili e comprensibili. Collegano argomenti rilevanti, forniscono contesto aggiuntivo e aiutano gli utenti ad approfondire aree di interesse specifiche senza ingombrare il contenuto principale.
Gli hyperlink svolgono inoltre un ruolo fondamentale nella SEO (ottimizzazione per i motori di ricerca), aiutando i motori di ricerca a indicizzare e classificare i contenuti in base alle relazioni tra le pagine collegate, influenzando così il modo in cui le informazioni vengono scoperte e assegnate priorità nei risultati di ricerca.
Una breve storia degli hyperlink
Il concetto di collegamenti ipertestuali affonda le sue radici nella visione iniziale dell'ipertesto, un sistema che consente al testo di essere interconnesso in modo non lineare. Questa idea fu espressa per la prima volta da Vannevar Bush nel suo saggio del 1945 "As We May Think", dove immaginava una macchina chiamata "Memex" che avrebbe consentito agli utenti di navigare tra i documenti utilizzando associazioni collegate.
L'hyperlink moderno prese forma negli anni '1960 con lo sviluppo dell'Hypertext Editing System (HES) e, in seguito, di sistemi più avanzati come il Progetto Xanadu di Ted Nelson, che mirava a creare una rete globale di informazioni collegate.
La vera svolta arrivò tra la fine degli anni '1980 e l'inizio degli anni '1990 con l'invenzione dell' World Wide Web di Sir Tim Berners-Lee. Propose l'uso di collegamenti ipertestuali come parte fondamentale dell'architettura del web, consentendo agli utenti di cliccare su testo o immagini evidenziati per passare da una pagina web all'altra. La prima implementazione di successo di collegamenti ipertestuali avvenne con il rilascio del browser web di Berners-Lee, WorldWideWeb, nel 1991, che consentiva agli utenti di esplorare il web in rapida crescita tramite collegamenti cliccabili.
Da allora, gli hyperlink sono diventati un elemento onnipresente di Internet, plasmando il modo in cui le informazioni vengono connesse, accessibili e condivise a livello globale. Si sono evoluti da semplici link basati su testo a forme più sofisticate, tra cui contenuti multimediali incorporati e dinamici, ma il loro scopo principale di collegare le informazioni rimane lo stesso.
Tipi di collegamento ipertestuale
Gli hyperlink si presentano in varie forme, ciascuna progettata per svolgere funzioni specifiche all'interno di contenuti digitali. Comprendere i diversi tipi di hyperlink è essenziale per un web design efficace e per la navigazione dell'utente. Di seguito è riportata una spiegazione dei principali tipi di hyperlink comunemente utilizzati.
Collegamenti ipertestuali di testo
Gli hyperlink di testo sono il tipo più comune, in cui il testo cliccabile (spesso sottolineato e in un colore diverso) indirizza gli utenti a un'altra posizione. Questi link sono in genere incorporati nel corpo di un documento o di una pagina web e sono definiti da HTML tag, che include l'URL di destinazione. Quando cliccati, gli hyperlink di testo consentono agli utenti di navigare verso una nuova pagina, una sezione diversa della stessa pagina o un sito Web esterno.
Collegamenti ipertestuali di immagini
Gli hyperlink di immagini sono immagini cliccabili che funzionano allo stesso modo degli hyperlink di testo. Invece del testo, un'immagine viene utilizzata come elemento cliccabile. Questi hyperlink sono utili per creare elementi di navigazione visivamente accattivanti, come pulsanti, banner o icone che portano ad altre pagine o risorse quando vengono cliccati.
Collegamenti ipertestuali in linea
Gli hyperlink inline sono incorporati in un blocco di testo e sono utilizzati per fare riferimento a contenuti correlati o fornire informazioni aggiuntive senza interrompere il flusso di lettura. Questi link sono spesso utilizzati in articoli o documenti per indirizzare i lettori a fonti, definizioni o spiegazioni estese pertinenti al contenuto principale.
Collegamenti di ancoraggio (collegamenti di salto)
I link di ancoraggio, noti anche come link di salto, consentono agli utenti di navigare verso una parte specifica della stessa pagina web. Questi collegamenti ipertestuali sono particolarmente utili per pagine web lunghe, come articoli, FAQ o siti web di una sola pagina, dove consentono un rapido accesso a diverse sezioni saltando direttamente al contenuto desiderato.
Collegamenti ipertestuali e-mail
Gli hyperlink e-mail aprono il client di posta elettronica predefinito di un utente e creano un nuovo messaggio e-mail quando vengono cliccati. Questi link sono formattati utilizzando lo schema URL mailto: e sono comunemente utilizzati nei siti Web per consentire agli utenti di contattare facilmente qualcuno tramite e-mail. Il link può anche includere una riga dell'oggetto predefinita o un corpo del messaggio.
Collegamenti ipertestuali ai file
Gli hyperlink di file indirizzano gli utenti a scaricare un file specifico, come un PDF, un'immagine o un documento. Questi link sono spesso utilizzati in contesti educativi o professionali in cui gli utenti devono accedere a risorse scaricabili direttamente da una pagina web. Quando cliccato, il file viene in genere scaricato sul dispositivo dell'utente.
Collegamenti ipertestuali esterni
Gli hyperlink esterni indirizzano gli utenti a un sito web o dominio diverso da quello che stanno visitando in quel momento. Questi link sono essenziali per fare riferimento a fonti, guidare gli utenti verso risorse aggiuntive o indirizzare il traffico verso siti partner. Di solito si aprono in una nuova scheda o finestra del browser per mantenere la sessione di navigazione corrente dell'utente.
Collegamenti ipertestuali interni
I collegamenti ipertestuali interni collegano diverse pagine all'interno dello stesso sito web o dominioSono essenziali per la navigazione del sito web, aiutando gli utenti a muoversi tra le varie sezioni o pagine di un sito. I link interni svolgono anche un ruolo significativo nella SEO migliorando la struttura del sito e aiutando i motori di ricerca a comprendere la relazione tra le diverse pagine.
Come creare un collegamento ipertestuale?
Creare un collegamento ipertestuale è un processo semplice che prevede l'aggiunta di codice HTML specifico al testo o all'immagine per renderli cliccabili, indirizzando gli utenti a un'altra posizione. Di seguito è riportata una guida passo passo su come creare un collegamento ipertestuale di base:
1. Scegli il testo o l'immagine. Per prima cosa, decidi quale testo o immagine vuoi trasformare in un collegamento ipertestuale. Potrebbe essere una parola, una frase, un pulsante o un'immagine su cui gli utenti cliccheranno per navigare verso un'altra pagina o risorsa.
2. Scrivi il codice HTML. Per creare un collegamento ipertestuale, utilizzerai il tag HTML (noto anche come tag di ancoraggio). La sintassi di base è la seguente:
<a href="URL">Link Text or Image</a>- . Questo tag definisce l'inizio del collegamento ipertestuale.
- href="URL". L'attributo href specifica l'URL di destinazione, che può essere una pagina web, un file o un'altra sezione della stessa pagina. Sostituisci "URL" con l'indirizzo web effettivo o il percorso del file.
- Collega testo o immagine. Questo è il testo o l'immagine che sarà cliccabile. Per un collegamento ipertestuale di testo, inserisci semplicemente il testo desiderato qui. Per un collegamento ipertestuale di immagine, inserisci un tag immagine HTML ( ) all'interno dei tag di ancoraggio.
3. Esempio di collegamento ipertestuale di testo. Per creare un collegamento ipertestuale di testo che indirizza gli utenti a "http://example.com" quando cliccano sulla parola "Example":
<a href="http://example.com">Example</a>4. Esempio di collegamento ipertestuale a un'immagine. Per creare un collegamento ipertestuale a un'immagine utilizzando un'immagine presente in "image.jpg" che rimanda a "http://example.com":
<a href="http://example.com">
<img src="image.jpg" alt="Description of Image">
</a>5. Salvare e testare. Dopo aver scritto il codice HTML, salva le modifiche e testa l'hyperlink in un browser web. Fai clic sul link per assicurarti che ti indirizzi alla destinazione corretta.
Attributi aggiuntivi (facoltativo)
- destinazione="_vuota". Questo attributo apre il collegamento in una nuova scheda o finestra.
- title="Testo suggerimento". Fornisce informazioni aggiuntive sul collegamento quando gli utenti ci passano sopra con il mouse.
Ad esempio, per aprire il collegamento in una nuova scheda:
<a href="http://example.com" target="_blank">Example</a>Come collegarsi a una pagina diversa sullo stesso sito utilizzando URL relativi
Il collegamento a una pagina diversa sullo stesso sito tramite URL relativi è un modo efficiente per creare collegamenti ipertestuali interni senza dover specificare l'indirizzo web completo. Un URL relativo punta a un file o a una posizione all'interno dello stesso dominio, consentendo al sito di funzionare correttamente anche se il nome del dominio cambia. Ecco come creare tali collegamenti:
Collegamento a una pagina nella stessa directory
Immagina di avere due file HTML, index.html e about.html, entrambi situati nella directory principale del tuo sito. Per creare un collegamento da index.html a about.html, dovresti usare:
<a href="about.html">About Us</a>Collegamento a una pagina in una directory padre
Supponiamo che la tua pagina corrente si trovi in una sottodirectory chiamata blog, e vuoi collegarti a index.html che si trova nella directory principale. Dovresti usare:
<a href="../index.html">Home</a>Collegamento a una pagina in una sottodirectory
Se si collega da index.html nella directory principale a post.html situato in un blog sottodirectory, il tuo collegamento apparirà così:
<a href="blog/post.html">Read Blog Post</a>Come creare un collegamento a una sezione specifica di una pagina
Il collegamento a una sezione specifica di una pagina, noto anche come creazione di un "link di ancoraggio" o "link di salto", è un modo utile per indirizzare gli utenti a una parte specifica di una pagina web. Ciò è particolarmente utile su pagine lunghe in cui si desidera fornire un accesso rapido a sezioni specifiche. Ecco come è possibile creare tali link:
Passaggio 1: identificare o creare la sezione di destinazione
Per prima cosa, devi identificare o creare un'"ancora" nella sezione della pagina a cui vuoi collegarti. Questo si fa aggiungendo un attributo id a un elemento HTML, come un titolo o un paragrafo, a cui vuoi che il collegamento vada.
Ad esempio, se hai una sezione con l'intestazione "Contattaci", puoi aggiungere un ID all'intestazione in questo modo:
<h2 id="contact">Contact Us</h2>Passaggio 2: creare il collegamento alla sezione
Successivamente, crei un collegamento che punta all'id della sezione di destinazione. Questo viene fatto usando un URL relativo che include il simbolo # seguito dal valore id.
Per creare un collegamento alla sezione "Contattaci" da un punto qualsiasi della stessa pagina, il codice HTML dovrebbe apparire così:
<a href="#contact">Go to Contact Us</a>Passaggio 3: collegamento da un'altra pagina
Se vuoi collegarti a una sezione specifica da una pagina diversa sullo stesso sito, includi sia l'URL della pagina che l'ID nel link. Ad esempio, se la sezione "Contattaci" si trova su una pagina chiamata about.html, il link apparirà così:
<a href="about.html#contact">Go to Contact Us</a>Esempio in pratica
Considera uno scenario in cui hai una pagina con sezioni diverse come "Introduzione", "Servizi" e "Contattaci". Ecco come potresti impostarla:
<h2 id="intro">Introduction</h2>
<p>Welcome to our website...</p>
<h2 id="services">Services</h2>
<p>We offer a variety of services...</p>
<h2 id="contact">Contact Us</h2>
<p>You can reach us at...</p>Link di navigazione
<nav>
<ul>
<li><a href="#intro">Introduction</a></li>
<li><a href="#services">Services</a></li>
<li><a href="#contact">Contact Us</a></li>
</ul>
</nav>Come aprire un collegamento in una nuova scheda
Per aprire un collegamento in una nuova scheda, devi aggiungere l'attributo target con il valore _blank al tag HTML. Questo dice al browser di aprire il documento collegato in una nuova scheda anziché nella stessa scheda della pagina corrente. Ecco come puoi farlo:
<a href="URL" target="_blank">Link Text</a>- href="URL". Questo attributo specifica l'URL della pagina o della risorsa a cui si desidera collegarsi.
- destinazione="_vuota". Questo attributo e valore indicano al browser di aprire il collegamento in una nuova scheda.
