Link o hyperlink \u00e8 il collegamento ipertestuale che collega le pagine di un sito o invia alla pagina di un altro sito o permette di saltare tra gli argomenti di una stessa pagina, in questo caso il link si chiama \u00e0ncora<\/em> .<\/p>\n\n\n\n

In html i collegamenti ipertestuali sono possibili utilizzando l’elemento a <\/em>e il suo attributo href=””.<\/a><\/em><\/p>\n\n\n\n

Dietro le quinte il markup \u00e8 scritto cos\u00ec: <a href=”indrizzo URL”>etichetta del link<\/a><\/i><\/p>\n\n\n\n

Nel browser, come impostazione predefinita il link ha l’aspetto di un testo sottolineato di solito di colore blu e su di essi il puntatore \u00e8 una manina con l’indice puntato.<\/p>\n\n\n\n

L’elemento X\/Html a<\/em> \u00e8 l’oggetto di questo articolo, ed \u00e8 il tag utilizzato per creare tutti i tipi di link ipertestuali che troviamo nel Web, dalle barre di navigazione ai collegamenti interni della pagina<\/a>, per raggiungere risorse esterne o per scaricare video o file di diversi formati.<\/p>\n\n\n\n

<\/span>Internet e ipertesto<\/span><\/h2>\n\n\n\n
Internet \u00e8 un immenso contenuto ipermediale, e si fonda proprio sui collegamenti tra pagine e all’interno delle pagine; senza i link Internet non esisterebbe.<\/p>\n\n\n\n
Il passaggio tra risorse interne ed esterne la pagina attiva \u00e8 reso possibile dai collegamenti, sono i link che trasformano la lettura lineare di un testo, tipica della lettura di una pagina scritta, in un ipertesto, una lettura non lineare che consente ad ogni lettore di creare il proprio percorso di lettura, grazie alla possibilit\u00e0 di seguire certi collegamenti e tralasciarne altri.<\/p>\n\n\n\n
Se l’ipertesto \u00e8 formato da solo testo si ha l’ipertesto vero e proprio, se all’interno dell’ipertesto sono presenti altre forme di comunicazione multimediale, immagini, suoni, video, si crea l’ipermedia.<\/p>\n\n\n\n
La linea logica dell’ipertesto, vale a dire la guida ai salti tra i contenuti, \u00e8 definita dall’autore dell’ipertesto ed \u00e8 importante per evitare salti multimediali dispersivi.<\/p>\n\n\n\n
Chi crea pagine Web ha la responsabilit\u00e0 di “guidare” l’utente verso le risorse e deve creare una navigazione coerente e accessibile per evitare dispersione e disorientamento.<\/p>\n\n\n\n
Per facilitare la navigazione ipertestuale e rendere usabili e accessibili i contenuti, nei siti sono necessari:<\/p>\n\n\n\n
\n
Barre di navigazione:<\/dt>\n
la barra di navigazione \u00e8 formata dai collegamenti strategici di un sito. \u00c8 l’insieme dei link che conducono alle parti di una pagina web, intesa non solo come singola pagina, ma anche come sito intero. Ogni pagina del sito deve contenere la navigazione per le pagine chiave del sito, soprattutto per la home page. Questo consente all’utente di muoversi liberamente tra le pagine, anche grazie ai menu briciole di pane<\/em> (breadcrumps),che tracciano la posizione dell’utente all’interno di un sito, rispetto alla home page.<\/dd>\n
Mappe del sito:<\/dt>\n
la mappa di un sito fornisce una visione completa dell’organizzazione ipertestuale di una pagina o sito<\/dd>\n
Sommari:<\/dt>\n
il sommario \u00e8 l’elenco delle sezioni pi\u00f9 importanti di una pagina Web, la loro creazione \u00e8 descritta nell’articolo Titoli, indici e sommari<\/a>.<\/dd>\n<\/dl>\n\n\n\n
<\/span>Creare link con l’editor di WordPress<\/span><\/h2>\n\n\n\n
Molto di quanto scritto in questo articolo pu\u00f2 essere trasferito nella creazione dei link delle barre di navigazione principali e secondarie di un sito, e gestite dal CMS WordPress dalla bacheca<\/a> alla voce aspetto\/menu, <\/em>visibile ad utenti con ruolo amministratore. <\/em><\/p>\n\n\n\n
Le informazioni qui descritte sono per\u00f2 maggiormente centrate sulla creazioni di link contestuali, vale a dire quei collegamenti che creiamo nel testo di un articolo. I link contestuali possono condurre ad altri contenuti situati all’interno o all’esterno della pagina su cui ci troviamo e possono essere attivati dal lettore per approfondire il tema principale come il link che porta alla descrizione della bacheca di WordPress<\/a> del paragrafo precedente e in questo.<\/p>\n\n\n\n
Con l’editor di WordPress aggiungere collegamenti a pagine o articoli \u00e8 molto semplice.<\/p>\n\n\n\n
Comincia con editare la pagina o l’articolo o creane uno nuovo.<\/p>\n\n\n\n
Ora seleziona il testo che vorresti fosse l’etichetta del link su cui fare click. Questo testo selezionato, se punta ad una risorsa esterna all’articolo, o alla pagina che stai scrivendo, si chiama etichetta del link, se punta ad una sezione interna dell’articolo o pagina \u00e8 chiamato \u00c0ncora<\/em>. <\/p>\n\n\n\n
Ora fai click sul pulsante Link<\/em>. Viene mostrata una finestra dove puoi inserire un URL. L’URL \u00e8 un indirizzo web come https:\/\/preverprova.it\/comprever\/ \u00e8 l’url della Community Prever.<\/p>\n\n\n\n
Devi solo copiare e incollare l’url dell’articolo o della pagina nel campo cerca o digita l’url<\/em>, fai click sul pulsante invia<\/em> a forma di freccia e il collegamneto \u00e8 inserito nell’articolo.<\/p>\n\n\n\n
Community Prever<\/p>\n\n\n\n
$\"finestra$ <\/figure>\n\n\n\n<\/div>\n\n\n\n
Se stai cercando di creare un collegamento ad un contenuto interno al tuo sito o blog, potrebbe essere pi\u00f9 veloce cercarlo. Per fare questo digita una o due parole chiave prese dal tuo titolo e WordPress cercher\u00e0 per te all’interno dei tuoi articoli o pagine, le risorse che includono quelle parole.<\/p>\n\n\n\n
$\"finestra$ <\/figure>\n\n\n\n
<\/div>\n\n\n\n
Fai click sul titolo della pagina o articolo alla quale vuoi fare il collegamento, e l’URL sar\u00e0 automaticamento collegato. Devi solo Fare click sul pulsante Invia<\/em> per rendere attivo il collegamento.<\/p>\n\n\n\n
Se vuoi che il collegamento si apra in una nuova finestra del Browser, devi solo attivare la selezione indicata come apri in una nuova scheda<\/em>.<\/p>\n\n\n\n
$\"attiva$ <\/figure>\n\n\n\n
Usa questa possibilit\u00e0 per collegamenti esterni. In questo modo i tuoi lettori non lasciano il tuo sito mentre lo visitano. La pratica di aprire un collegamento in una nuova finestra del browser non \u00e8 raccomandata per l’accessibilit\u00e0 perch\u00e9 pu\u00f2 disorientare gli utenti.<\/p>\n\n\n\n
<\/span>Come \u00e8 fatto un link<\/span><\/h2>\n\n\n\n
Il link \u00e8 formato da due parti:<\/p>\n\n\n\n
\n
etichetta:<\/dt>\n
\u00e8 la parte visibile sulla quale l’utente agisce per raggiungere la risorsa selezionata;<\/dd>\n
destinazione:<\/dt>\n
\u00e8 la parte di marcatura nascosta all’utente ma letta dal browser o altro programma utente dove \u00e8 scritto l’URL della risorsa.<\/dd>\n<\/dl>\n\n\n\n
$\"Come$ <\/figure>\n\n\n\n
<\/span><\/a>Etichetta di un link<\/span><\/h3>\n\n\n\n
L’etichetta di un link \u00e8 la parte attiva del collegamento e sulla quale l’utente deve agire per raggiungere la risorsa d’interesse, pu\u00f2 essere:<\/p>\n\n\n\n
un testo significativo<\/li>
un’immagine<\/li>
un testo e un’immagine insieme<\/li><\/ul>\n\n\n\n
<\/span>Testo come etichetta<\/span><\/h4>\n\n\n\n
L’etichetta di un link \u00e8 molto importante, guida il lettore e gli fa capire dove va, non deve fargli perdere tempo e non deve disorientare.<\/p>\n\n\n\n
<\/span>Scrivere l’etichetta di un link<\/span><\/h3>\n\n\n\n
I link possono essere di:<\/p>\n\n\n\n
navigazione interna: conducono ad altre parti del sito o saltano a contenuti all’interno di una stessa pagina;<\/li>
navigazione esterna: conducono ad altri siti o ad una certa pagina di un sito esterno:<\/li>
contestuali interni: puntano ad altri contenuti del sito;<\/li>
contestuali esterni: puntano ad altri contenuti esterni al sito.<\/li><\/ul>\n\n\n\n
L’etichetta dei link per la navigazione interna \u00e8 abbastanza semplice, una o due parole che guidano l’utente alla pagina di interesse; es: Prodotti<\/em>, Chi siamo<\/em>, Contatti, <\/em>ecc. I salti ipertestuali all’interno della stessa pagina di solito utilizzano le titolazioni, in questo caso per l’etichetta del link si riproduce il titolo o parte del titolo.<\/p>\n\n\n\n
L’etichetta che conduce alla home page o ad una certa pagina di un sito esterno \u00e8 definita con il nome della pagina di destinazione al quale si aggiunge un’ancora nel caso la destinazione fosse una sezione precisa di quella pagina.<\/p>\n\n\n\n
I link di navigazione interna di solito si trovano all’inizio della pagina (header <\/em>). I link che puntano a risorse esterne possono trovarsi su barre laterali (sidebar<\/em>) o nel pi\u00e8 di pagine (footer<\/em>). Questi link come nome per l’etichetta hanno sempre il nome del sito di destinazione con il nome della pagina se la risorsa \u00e8 in una pagina diversa.<\/p>\n\n\n\n
I collegamenti in tutte le pagine di un sito devono essere collocati nello stesso punto della pagina e devono avere lo stesso aspetto.<\/p>\n\n\n\n
I link contestuali, sono quelli che si trovano all’interno di un testo e puntano al contenuto di un’altra pagina dello stesso sito o di un altro sito. La scelta del testo che sar\u00e0 l’etichetta di un link di questo tipo va fatta con attenzione perch\u00e9 deve far capire al lettore lo scopo del link e la natura del contenuto. Di solito possono essere alcune parole chiave selezionate nel testo e che riproducono il senso della destinazione.<\/p>\n\n\n\n
In merito all’accessibilit\u00e0 dei link, il W3C – World WideWeb Consortium<\/a>, d\u00e0 due importanti disposizioni:<\/p>\n\n\n\n
il link sia testuale e il testo del link non sia dispersivo o troppo lungo, ma significativo dell’argomento e della destinazione anche se letto fuori contesto:<\/li>
evitare testi generici come il tanto abusato clicca qui <\/em>perche non \u00e8 usabile n\u00e8 accessibile. Fai clic qui<\/em> non ha contesto, \u00e8 dipendente dal dispositivo, obbliga il lettore che scorre velocemente la pagina a leggere il testo intorno al link per capire di cosa si sta parlando, sperando che lo spieghi, e non \u00e8 letto dagli screen reader<\/a>. Per esempio nel testo appena scritto per sapere cosa sono gli screen reader ho usato come etichetta del link le parole chiave contenute nel testo screen reader<\/em>, evitando fai click qui<\/em> per sapere cosa sono gli screen reader. Se poi clicca qui <\/em>\u00e8 parte di un’immagine come fosse il testo di un logo, se l’immagine \u00e8 priva di un testo alternativo specificato nell’attributo alt=””, allora il link \u00e8 completamente inaccessibile agli screen reader.<\/li><\/ul>\n\n\n\n
Se il testo serve per indicare il contenuto del link, la destinazione pu\u00f2 essere definita con varie tecniche come l’uso di contenuti generati attraverso i css<\/a>, o pi\u00f9 semplicemente specificando un valore all’attributo title=””<\/em>, anche se non sempre efficace, dove descrivere la destinazione e l’argomento del link.<\/p>\n\n\n\n
Storicamente i browser assegnano al link testuale la sottolineatura e un colore blu. Per questo \u00e8 buona pratica non evidenziare i testi con sottolineatura perch\u00e9 si confondono con i link. Questi attributi visuali del link possono essere modificati attraverso le regole css.<\/a><\/p>\n\n\n\n
<\/span>Immagini come etichetta<\/span><\/h4>\n\n\n\n
Come etichetta di un link pu\u00f2 essere utilizzata anche un’immagine. In questo caso, sempre il W3C, d\u00e0 delle disposizioni per rendere accessibili le immagini.<\/p>\n\n\n\n
Nel caso di un’immagine usata come link, (e per altri contenuti non testuali presenti in una pagina web, salvo alcune eccezioni, loghi e captcha), bisogna specificare nell’attributo alt=”…” del tag <img \/>, utilizzato per caricare le immagini, un testo alternativo, descrittivo ma non lungo, che sia significativo della natura dell’immagine; il testo inserito nell’attributo alt<\/em> \u00e8 importante perch\u00e9 \u00e8 presentato dal browser al posto dell’immagine nel caso questa non fosse disponibile ed \u00e8 letto dagli screen reader. Se l\u2019immagine contiene parole importanti per comprendere il contenuto, il testo alternativo dovrebbe fornire le stesse parole.<\/p>\n\n\n\n
Il tag <img \/> ha un altro attributo utile per descrizioni pi\u00f9 lunghe ed \u00e8 longdesc=”” che sta per long description<\/em>. Tra gli apici di questo attributo non deve essere ripetuto il testo indicato in alt=”…”, ma un URL con un file dove l’immagine \u00e8 descritta in modo esteso.<\/p>\n\n\n\n
Il tag <a> con un’immagine come etichetta potrebbe avere questo aspetto:<\/p>\n\n\n\n
<p><a href=”http:\/\/www.spazioprever.it\/”rel=”external” title=”Link esterno al sito Spazioprever”><img src=”\/mieimg\/spazioprever.jpg” alt=”Logo del sito di studio per gli studenti Spazioprever” longdesc<\/span>=<\/span>“http:\/\/www.spazioprever.it\/descrizioneimmagini\/descrizione_logospazioprever.html” <\/span><\/em> \/><\/a><\/p><\/p>\n\n\n\n
Purtroppo l’attributo longdesc<\/em> non ha un grande supporto dai browser, quindi \u00e8 preferibile creare una didascalia immagine (image caption).<\/p>\n\n\n\n
Il file grafico che descrive l’immagine deve avere un nome significativo, evitando di lasciare nomi incomprensibili come quelli delle immagini scattate da smartphone o fotocamere digitali, ma questo \u00e8 un principio valido per tutte le immagini e i file in generale, altri suggerimenti per i nomi sono:<\/p>\n\n\n\n
non lasciare spazi vuoti<\/li>
inserire un trattino o un trattino basso al posto degli spazi tra parole (l’uno o l’altro hanno impatto importante e diverso sulla SEO)<\/li>
usare le minuscole<\/li><\/ul>\n\n\n\n
Se l’immagine usata come link \u00e8 utilizzata come intestazione, \u00e8 opportuno racchiuderla all’interno di un elemento di titolazione come h1 o h2, questo serve per dare rilevanza semantica alla struttura, non solo in ottica accessibilit\u00e0 ma anche SEO (Search Engine Optimization).<\/p>\n\n\n\n
HTML5 consente all’elemento a<\/em> di contenere al suo interno quasi ogni altro tipo di elemento. Perci\u00f2 se la destinazione \u00e8 un titolo, l’esempio precedente potrebbe essere scritto cos\u00ec:<\/p>\n\n\n\n
esempio 1 tradizionale l’elemento di titolazione h1 contiene il link:<\/li><\/ul>\n\n\n\n
<h1><a href=”http:\/\/www.spazioprever.it\/” rel=”external” title=”Link esterno al sito Spazioprever”><img src=”\/mieimg\/spazioprever.jpg” alt=”Logo del sito di studio per gli studenti Spazioprever” longdesc<\/span>=<\/span>“http:\/\/www.spazioprever.it\/descrizioneimmagini\/descrizione_logospazioprever.html” <\/span> \/><\/a><\/h1><\/em><\/p>\n\n\n\n
esempio 2 l’elemento a<\/em> \u00e8 usato come elemento di blocco e contiene altri elementi. Si consiglia di non creare link di questo tipo troppo lunghi e con molti elementi:<\/li><\/ul>\n\n\n\n
<a href=”http:\/\/www.spazioprever.it\/” rel=”external” title=”Link esterno al sito Spazioprever”><h1><img src=”\/mieimg\/spazioprever.jpg” alt=”Logo del sito di studio per gli studenti Spazioprever” longdesc<\/span>=<\/span>“http:\/\/www.spazioprever.it\/descrizioneimmagini\/descrizione_logospazioprever.html” <\/span> \/><\/h1><\/a><\/em><\/p>\n\n\n\n
esempio 3 l’elemento a \u00e8 usato come elemento di blocco per altri elementi, ma solo l’etichetta testuale \u00e8 un titolo.<\/li><\/ul>\n\n\n\n
<a href=”http:\/\/www.spazioprever.it\/” rel=”external” title=”Link esterno al sito Spazioprever”><h1>Spazioprever<\/h1><img src=”\/mieimg\/spazioprever.jpg” alt=”Logo del sito di studio per gli studenti Spazioprever” longdesc<\/span>=<\/span>“http:\/\/www.spazioprever.it\/descrizioneimmagini\/descrizione_logospazioprever.html” <\/span> \/><\/a><\/em><\/p>\n\n\n\n
Anche se tutto questo \u00e8 possibile il consiglio \u00e8 quello di seguire il tradizionale e collaudato esempio 1.<\/p>\n\n\n\n
L’attributo rel=”external” indica al browser come esterna al sito la risorsa oggetto del collegamento. Potrebbe essere usato anche per definire stili CSS in base agli attributi per i collegamenti esterni al sito.<\/p>\n\n\n\n
<\/span>Destinazione di un link<\/span><\/h3>\n\n\n\n
La destinazione \u00e8 quella parte di marcatura html, letta dal browser e non visibile dall’utente, che reca l’indirizzo URL (Uniforme Resource Locator) della risorsa. Per raggiungere la risorsa il browser ha bisogno di leggere all’interno dell’elemento a<\/em> l’attributo href=”” con all’interno degli apici l’indirizzo URL della risorsa :<\/p>\n\n\n\n
<a href=”http:\/\/www.miosito.it”>miosito<\/a><\/em><\/p>\n\n\n\n
Abbiamo capito che l’elemento a<\/em> da solo non fa niente. Ha bisogno di alcuni attributi per poter funzionare. Il pi\u00f9 importante \u00e8 l’attributo href=”” che sta per hypertext reference <\/em>e tra le virgolette deve essere scritto l’ URL (Uniforme Resource Locator) di destinazione.<\/p>\n\n\n\n
Gli URL possono essere assoluti e relativi. Come regola di base, si usano URL relativi per collegare pagine e risorse all’interno di uno stesso sito, si usano URL assoluti per collegare pagine e risorse che si trovano su siti esterni.<\/p>\n\n\n\n
Noi li distinguiamo perch\u00e8 un URL assoluto comincia sempre con:<\/p>\n\n\n\n
http:\/\/nomesito\/nomecartella\/nomefile<\/em><\/p>\n\n\n\n
e corrisponde all’indirizzo che troviamo sulla barra degli indirizzi o come permalink nel CMS.<\/p>\n\n\n\n
Un URL relativo comincia con:<\/p>\n\n\n\n
\/nomecartella\/nomefile oppure ..\/nomecartella\/nomefile. <\/em><\/p>\n\n\n\n
Il percorso<\/em> definisce la posizione degli altri file rispetto al documento attivo, mentre i puntini indicano che il file si trova in una cartella un livello pi\u00f9 in alto della cartella attuale. Un percorso ..\/..\/nomecartella\/nomefile, <\/em>significa che il file si trova due livelli sopra la cartella attuale.<\/p>\n\n\n\n
<\/span>Altri tipi di link<\/span><\/h2>\n\n\n\n
Con l’elemento a<\/em>, si possono creare collegamenti a qualsiasi URL e ad altre risorse quali: e-mail, pdf, file multimediali, feed RSS ecc. L’importante \u00e8 scrivere correttamente l’URL del file.<\/p>\n\n\n\n
<\/span>Link ad indirizzi e-mail<\/span><\/h3>\n\n\n\n
Nel caso si volesse fare un collegamento ad una e-mail si scrive l’idirizzo e-mail, lo si seleziona e si procede come descritto per la creazione dei link. In questo modo il link diventa l’indirizzo e-mail che quando attivato apre il client di posta installato nel computer dell’utente.<\/p>\n\n\n\n
In Html lo si scrive cos\u00ec:<\/p>\n\n\n\n
<p><a href=”mailto:miamail@mail.com”>miamail@mail.com<\/a><\/p><\/p>\n\n\n\n
Due cose da notare:<\/p>\n\n\n\n
nell’indirizzo dell’attributo href=”” al posto di http:\/\/<\/em> c’\u00e8 mailto: <\/em>questo perch\u00e9 il protocollo di comunicazione http \u00e8 il protocollo usato per la trasmissione d’informazioni sul web client-server. Le specifiche del protocollo sono gestite dal World Wide Web Consortium (W3C). Mailto invece \u00e8 un protocollo di comunicazione riferito agli indirizzi di posta elettronica.<\/li><\/ol>\n\n\n\n
2. l’uso di un elemento contenitore come <p>contenuto<\/em><\/p> usato per definire i paragrafi per racchiudere l’elemento <a>. Questo aiuta a definire con maggiore precisione la struttura della pagina e nel caso di una sequenza di link a distribuirli ognuno in una nuova riga.<\/p>\n\n\n\n
Non \u00e8 consigliato creare link e-mail attivi perch\u00e8 gli spambot che in pochi secondi percorrono la Rete se ne appropriano e riempiono di spazzatura gli indirizzi degli sfortunati. Perci\u00f2 anche se non \u00e8 simpatico per l’utente si possono creare link testuali da copiare e incollare nel proprio client.<\/p>\n\n\n\n
La cosa migliore pu\u00f2 essere quella di inserire un modulo di contatto diretto.<\/p>\n\n\n\n
<\/span>Link a PDF o ad altri documenti non Html<\/span><\/h3>\n\n\n\n
I link possono puntare a documenti non Html come word, excel, pdf, ecc. quando possibile per\u00f2 \u00e8 sempre meglio collegare pagine Html. I PDF come gli altri file, possono impiegare diverso tempo per essere aperti e se nel browser dell’utente non \u00e8 installato un visualizzatore PDF, l’unica cosa che il browser pu\u00f2 fare \u00e8 scaricarlo in automatico, cosa che non sempre \u00e8 apprezzata dall’utente.<\/p>\n\n\n\n
Se proprio non si pu\u00f2 fare a meno del PDF, o altro tipo di documento, si dovrebbe spiegare all’utente che il link porta ad un PDF e non ad un contenuto Html. Si pu\u00f2 fare indicando tra parentesi il tipo di file e le sue dimensioni e potendo, si potrebbe mostrare un’icona del tipo di file.<\/p>\n\n\n\n
<p><a href=”collegarsi-al-mondo.pdf”>come collegarsi al mondo<\/a> (file PDF – 850 Kb) <\/p><\/p>\n\n\n\n
Per il CMS WordPress esistono diversi plugin per mostrare documenti PDF o word, che consentono la consultazione del file senza doverlo aprire nel browser o scaricare nell’hard disk del proprio computer.<\/p>\n\n\n\n
Nei siti della Pubblica Amministrazione, si dovrebbe evitare di pubblicare documenti PDF contenenti immagini di testo. Il contenuto di questi file deve essere trascritto nel documento sotto forma di testo accessibile, oppure convertito prima in testo accessibile, con un programma di OCR (Optical Character Recognition, \u201criconoscimento ottico dei caratteri\u201d) seguito dal controllo per eliminare gli errori di lettura e interpretazione dell\u2019OCR.<\/p>\n\n\n\n
<\/span>Attributo download<\/em><\/span><\/h3>\n\n\n\n
HTML5 ha introdotto un nuovo attributo per l’elemento a<\/em>. Questo attributo \u00e8 download<\/em> e dice al browser che il file indicato nel percorso href=””<\/em> non deve essere aperto ma scaricato e salvato sul computer.<\/p>\n\n\n\n
L\u2019utilizzo \u00e8 semplice e l’attributo si scrive in modalit\u00e0 Testo <\/em>all’interno del link di solito dopo il percoso definito dall’attributo href=””<\/em>:
Se il file da scaricare \u00e8 un’immagine:<\/p>\n\n\n\n
<a href=”https:\/\/www.comprever\/wp-content\/uploads\/2017\/06\/collegarsi-al-mondo.png” download<\/strong>>Scarica l’immagine<\/a><\/p>\n\n\n\n
In alternativa per un documento di testo o pdf:<\/p>\n\n\n\n
<a href=”https:\/\/www.comprever\/\/wp-content\/uploads\/2017\/06\/collegarsi-al-mondo.pdf” download=”collegarsi-al-mondo”>Scarica il file<\/a>.<\/p>\n\n\n\n
Questo esempio scarica il file con il nome attribuito alla risorsa.<\/p>\n\n\n\n
Se si vuole definire un altro nome al file scaricato, l’attributo download pu\u00f2 avere un valore es: download=”mondo-collegato.pdf”. In questo caso la risorsa scaricata non si chiamer\u00e0 collegarsi-al-mondo.pdf ma mondo-collegato.pdf.<\/p>\n\n\n\n
Non ci sono limitazioni sui valori permessi, e il browser riconosce in automatico la corretta estensione dei file e la aggiunge al file (.img, .pdf, .txt, .html, etc.).<\/p>\n\n\n\n
Particolare attenzione si deve fare nell’indicare il percorso esatto all’interno dell’attributo href=””<\/em> e verificare di utilizzare uno standard corretto nel definire il nome del file<\/a>, soprattutto nell’uso di punteggiatura nel nome del file.<\/p>\n\n\n\n
Un’altra raccomandazione e buona pratica \u00e8 quella di indicare il formato file e il peso del file:<\/p>\n\n\n\n
<a href=”https:\/\/www.comprever\/\/wp-content\/uploads\/2017\/06\/collegarsi-al-mondo.pdf” download=”collegarsi-al-mondo”>Scarica il file – file pdf, 85 Kb-<\/a>.<\/p>\n\n\n\n
<\/span>Elemento link<\/span><\/h3>\n\n\n\n
L’elemento link non \u00e8 usato per i link ipertestuali, non ha una parte cliccabile e non \u00e8 visto dagli utenti. \u00c8 inserito all’interno della sezione head<\/em> del documento html<\/a> ed \u00e8 letto dal browser o altro programma utente. Si usa per specificare relazioni tra il documento e altri documenti o oggetti. Un documento pu\u00f2 avere molti elementi link<\/em> per stabilire le sue relazioni con ogni tipo di oggetto o documento.<\/p>\n\n\n\n
$\"il$ <\/figure>\n\n\n\n
<\/span>Link di reindirizzamento<\/span><\/h3>\n\n\n\n
Quando si riorganizzano siti per non interrompere i link ai contenuti esistenti, si deve ricorrere ai reindirizzamenti. In questo modo le pagine continuano a funzionare e si informano gli utenti che il vecchio link non funziona pi\u00f9. Di solito le pagine con link di reindirizzamento restano attive alcuni mesi fino ad un anno, dopo di che vengono cancellate.<\/p>\n\n\n\n
Per fare questo la via pi\u00f9 semplice \u00e8 l’uso dell’elemento meta <\/em>anch’esso, come link<\/em>, \u00e8 inserito nella sezione head<\/em> del documento. Gli attributi dell’elemento meta possono avere numerosi parametri e servire a molti scopi, sono utilizzati per inviare informazioni al browser o programma utente. In questo caso si vuole comunicare al browser il nuovo indirizzo Web di un sito aggiornato, indicando destinazione, secondi di attesa e volendo anche un messaggio per l’utente.<\/p>\n\n\n\n
Es:<\/p>\n\n\n\n
<!DOCTYPE html><\/p>\n\n\n\n
<html><\/em><\/span><\/p>\n\n\n\n
<head><\/em><\/span><\/p>\n\n\n\n
<meta http-equiv=”refresh” content=”10; url=http:\/\/www.nuovosito.it\/index.html” \/><\/em><\/span><\/p>\n\n\n\n
<title>reindirizzamento al nuovo sito<\/title><\/em><\/span><\/p>\n\n\n\n
<\/head<\/em><\/span><\/p>\n\n\n\n
<body><\/em><\/span><\/p>\n\n\n\n
<h1>Il sito ha cambiato indirizzo Web<\/h1><\/em><\/span><\/p>\n\n\n\n
<p>Puoi aggiornare il tuo segnalibro o i preferiti. Questo \u00e8 l’indirizzo della nuova home page <a href=”http:\/www.nuovosito.it\/nome-pagina.html”>http:\/\/www.nuovosito.it\/index.html<\/a> <\/p><\/em><\/span><\/p>\n\n\n\n
<p>Sarei inviato al nuovo indirizzo tra 10 secondi ma se non vuoi aspettare <a href=”http:\/\/www.nuovosito.it\/index.html”>visita la pagina<\/a><\/p><\/em><\/span><\/p>\n\n\n\n
<\/body><\/em><\/span><\/p>\n\n\n\n
<\/html><\/em><\/span><\/p>\n\n\n\n
Volendo personalizzare si pu\u00f2 cambiare il numero che indica i secondi. Lo zero reindirizza subito al nuovo indirizzo. Passati i secondi indicati il browser carica automaticamente la pagina indicata.<\/p>\n\n\n\n
Per impostare redirect permanenti chimati redirect 301<\/em>, si devono implementare script lato server, robe un po’ pi\u00f9 complicate di queste e che lasciamo volentieri agli esperti di programmazione.<\/p>\n\n\n\n
Approfondimento:<\/strong> Come aggiungere un collegamento in WordPress ad un articolo o pagina<\/a>.<\/p>\n\n\n\n
Se hai suggerimenti o consigli sui collegamenti ipertestuali, puoi farceli sapere utilizzando il modulo dei comenti che trovi qui sotto.<\/p>\n","protected":false},"excerpt":{"rendered":"
Aggiornato 18 ottobre 2021 Link o hyperlink \u00e8 il collegamento ipertestuale che collega le pagine di un sito o invia alla pagina di un altro sito o permette di saltare tra gli argomenti di una stessa pagina, in questo caso il link si chiama \u00e0ncora . In html i collegamenti ipertestuali sono possibili utilizzando l’elemento a…<\/p>\n","protected":false},"author":2,"featured_media":14786,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_bbp_topic_count":0,"_bbp_reply_count":0,"_bbp_total_topic_count":0,"_bbp_total_reply_count":0,"_bbp_voice_count":0,"_bbp_anonymous_reply_count":0,"_bbp_topic_count_hidden":0,"_bbp_reply_count_hidden":0,"_bbp_forum_subforum_count":0,"_kad_post_transparent":"","_kad_post_title":"","_kad_post_layout":"","_kad_post_sidebar_id":"","_kad_post_content_style":"","_kad_post_vertical_padding":"","_kad_post_feature":"","_kad_post_feature_position":"","_kad_post_header":false,"_kad_post_footer":false,"_kad_post_classname":"","footnotes":""},"categories":[1319],"tags":[390,389,387,388],"class_list":["post-14737","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-supporto","tag-collegamenti","tag-ipertesto","tag-lin","tag-link"],"post_mailing_queue_ids":[],"_links":{"self":[{"href":"https:\/\/preverprova.it\/comprever\/wp-json\/wp\/v2\/posts\/14737","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/preverprova.it\/comprever\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/preverprova.it\/comprever\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/preverprova.it\/comprever\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/preverprova.it\/comprever\/wp-json\/wp\/v2\/comments?post=14737"}],"version-history":[{"count":0,"href":"https:\/\/preverprova.it\/comprever\/wp-json\/wp\/v2\/posts\/14737\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/preverprova.it\/comprever\/wp-json\/wp\/v2\/media\/14786"}],"wp:attachment":[{"href":"https:\/\/preverprova.it\/comprever\/wp-json\/wp\/v2\/media?parent=14737"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/preverprova.it\/comprever\/wp-json\/wp\/v2\/categories?post=14737"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/preverprova.it\/comprever\/wp-json\/wp\/v2\/tags?post=14737"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

<\/span><\/a>Etichetta di un link<\/span><\/h3>\n\n\n\nL’etichetta di un link \u00e8 la parte attiva del collegamento e sulla quale l’utente deve agire per raggiungere la risorsa d’interesse, pu\u00f2 essere:<\/p>\n\n\n\nun testo significativo<\/li>un’immagine<\/li>