Link o collegamenti in HTML

Link nel HTML vengono creati utilizzando elementi <a>, <area> e <link>. I link sono dei  collegamenti tra le due risorse, uno dei quali è il documento corrente.

I collegamenti possono essere suddivisi in due categorie:
link a risorse esterne - vengono creati utilizzando il tag <link> e sono utilizzati per espandere le capacità del documento corrente con utilizzo di web browser;
collegamenti ipertestuali - collegamenti ad altre risorse che l'utente può visitare o scaricare.

1. La struttura di link

I collegamenti ipertestuali vengono creati utilizzando la coppia di tag <a> </a>. All'interno del tag viene inserito testo da visualizzare su la pagina web. Testo del link vene visualizzato nel browser con una sottolineatura, colore di font da default  - blu, quando si passa sul link il cursore del mouse cambia la vista.

Parametro obbligatorio del tag  <a>  è attributo href, che imposta l'indirizzo URL di una pagina web.

<a href="/sito.it>testo che indica collegamento </a>

Collegamento composto di due parti – descrizione o indicazione e percorso.
Descrizione o indicazione di riferimento è un pezzo di testo o un'immagine visibile all'utente, l'indirizzo del link o percorso non è visibile al l'utente, è un l'indirizzo della risorsa esterna dove si desidera di indirizzare utente.

L'indirizzo del collegamento è costituito da URL. URL - Uniform Resource Locator, che individua una risorsa. Quando si crea un indirizzo url per la separazione di parole tra loro si raccomanda di utilizzare un trattino di mezzo  invece di un trattino sotto. In generale, l'URL ha il seguente formato:

metodo di accesso://nome del server: porta/direzione 

video prevui
Metodo di accesso, o protocollo, esegue lo scambio di dati tra le stazioni di lavoro in diverse reti. I protocolli di trasferimento di dati più diffusi:
file permette di leggere un file da un disco locale:

file:/gallery/pictures/summer.html

 

http fornire l'accesso alla pagina web tramite protocollo http:

http://www.sito.it/

HTTPS - specifica implementazione del protocollo HTTP utilizzando la crittografia (di solito, SSL o TLS)

https://www.sito.it/

ftp fa una richiesta al server FTP per ottenere il file:

ftp://pgu/directory/library

mailto lancia sessione di comunicazione postale con l'indirizzo specificato e l'host:

mailto:Questo indirizzo email è protetto dagli spambots. È necessario abilitare JavaScript per vederlo.

Il nome del server descrive il nome completo della macchina sulla rete, ad esempio, www.sito.it. Se il nome di server non è specificato, il collegamento è considerato  locale, cioè, appartiene alla stessa macchina su cui si trova il documento HTML che contiene il link.

Il numero della porta TCP, su cui funziona il web-server. Si tratta di un numero che è necessario specificare se il metodo richiede un numero di porta (certe server possono avere il proprio numero di porta diverso del comune). Se la porta non è specificata, il valore predefinito è la porta 80. Le porte predefinite sono le seguenti:

21 — FTP
23 — Telnet
70 — Gopher
80 — HTTP

 

Il percorso contiene il nome della cartella in cui si trova il file.

2. Collegamenti assoluti e relativi

Link assoluti contengono tutte le informazioni necessarie per browser per individuare il file. Un percorso assoluto contiene i seguenti componenti:
1) il protocollo (ad esempio, http)
2) dominio (nome di dominio o l'indirizzo IP)
3)  cartella (nome di una cartella che indica il percorso del file)
4)file (il nome del file)

video prevui

http://www.sito.it/cartella /file.html

Se il file si trova nella cartella principale, nel percorso del  file il nome della cartella non va indicato

http://www.sito.it/file.html

In assenza di un nome di file sara caricare la pagina web, che è impostata di default nella configurazione del webserver. La presenza della barra finale / significa che si rivolge  alla cartella, se non è specificato direttamente al file.

http://www.sito.it/
http://www.sito.it/cartella

Collegamento relativo descrive il percorso del documento di destinazione rispetto alla pagina  corrente. Il percorso viene formato considerando la posizione della pagina Web in cui si trova il nostro  collegamento. Collegamenti relativi vengono utilizzati per creare collegamenti ad altri documenti sullo stesso sito. Quando un browser non  trova nel  il link riferimento al  protocollo http: //, si esegue una ricerca del documento sullo stesso server.

Un percorso relativo contiene i seguenti componenti:
1) cartella (nome di una cartella che indica il percorso del file)
2)  file (il nome del file)

Il percorso per i collegamenti relativi ha tre simboli speciali:
semplice sbarra(slash) Indica la directory root o cartella principale del vostro sito, e dice che è necessario spostarsi verso il basso(al interno ) alla cartella successiva
./ Si riferisce alla cartella corrente
../ salire su di un livello rispetto la  cartella (directory) attuale

La differenza principale tra un percorso relativo e assoluto è che il percorso relativo non contiene il nome della cartella principale del sito, il che rende l'indirizzo più breve, e nel caso di spostamento da un dominio ad un altro non è necessario riscrivere un nuovo indirizzo assoluto. Ma se una risorsa esterna farà riferimento ad esempio alle immagini del vostro sito con collegamenti relativi  allora loro  non saranno raggiungibili e come risultato visualizzati sul sito esterno.

3. Ancore

Ancore, o collegamenti interni, creano transizioni alle diverse sezioni della pagina Web corrente, che consente di navigare rapidamente tra le sezioni. Questo è molto comodo quando sulla  pagina cè troppo testo. I collegamenti interni sono creati utilizzando  tag <a>con una differenza che l'attributo href contiene il nome dell'indice - la cosiddetta ancora, e non-URL indirizzo. Prima il nome della destinazione si  mettere il segno di cancelletto  #.

Il seguente markup crea un tabella  di contenuti con un rapido passaggio alle rispettive sezioni:

<h1>Stagioni</h1>
<h2>Sommario</h2>
<a href="#p1">Estate/a> <!--creiamo ancora indicando #id dell elemento-->
<a href="#p2">Autuno</a>
<a href="#p3">Inverno</a>
<a href="#p4">Primavera</a>
<p id="p1">...</p> <!--giungiamo rispettivo  id al elemento-->
<p id="p2">...</p>
<p id="p3">...</p>
<p id="p4">...</p>

Se si vuole fare un link da una pagina del sito a una sezione specifica di un'altra pagina, è necessario impostare id per questa sezione della pagina, e poi aggiungerlo a ud un ridrizzo assoluto :

<th id="about-color">color</th>
<a href="http://ioeweb.it/css/#about-color" class="site" target="_blank">color</a>

4. Come creare link di un'immagine.

Per fare un immagine cliccabile, è necessario inserire l'elemento <img> all'interno del tag <a>. Per aprire il link in una nuova finestra, per il collegamento è necessario aggiungere l'attributo target = "_ blank" .

<a href="http://ioeweb.it/corso12/" target="_blank"><img src="http://ioeweb.it/corsi /box_css.jpg" alt="Corso CSS"></a>

minisite

5. Come creare un collegamento ad un numero di telefono, Skype o indirizzo e-mail

 Link hanno ricevuto le  nuove possibilità - cliccando si può non  solo semplicemente passare ad un'altra pagina, e scaricare file, ma anche effettuare chiamate sul telefono, inviare un messaggio o chiamare su Skype.

link al numero di telefono
<a href="tel:+390200111000">+390200111000</a>

collegamento all'indirizzo di posta elettronica
<a href="mailto:Questo indirizzo email è protetto dagli spambots. È necessario abilitare JavaScript per vederlo.">Questo indirizzo email è protetto dagli spambots. È necessario abilitare JavaScript per vederlo.<;/a>

link a Skype(chiamare )
<a href="skype:nome-user?call">Skype</a>

collegamento a Skype (aprire un Chat)
<a href="skype:nome-user?chat">Skype</a>

collegamento a Skype (per aggiungere alla tua lista dei contatti)
<a href="skype:nome-user?add">Skype</a>

collegamento a Skype ( inviare un fail)
<a href="skype:nome-user?sendfile">Skype</a>

6. Attributi link

Elemento <a> supporta gli attributi globali e quelli proprie.

Attributi del tag
Attributo Descrizione
download Complementa l'attributo href e dice al browser che la risorsa deve essere caricata quando l'utente clicca sul link, invece di, ad esempio, pre-apertura di esso (come nel caso del fail PDF). Specificando il nome dell'attributo, diamo anche un nome all'oggetto che viene caricato. È possibile utilizzare l'attributo senza il suo valore:

 

<a href="/images/logo.png" download><img src="/images/logo.png" alt="logo"></a>

<a href="/images/logo.png" download="logo"><img src="/images/logo.png" alt="logo"></a>

<a href="/files/20022014.pdf" download=" Rapporto del mese di febbraio 2014.pdf">Caricare Rapporto del mese di febbraio 2014</a>

href Il valore è un URL-indirizzo del documento a cui punta il collegamento.
hreflang Indica la lingua del documento. Può essere usato solo insieme con l'attributo href. I valori accettati – una abreviazione composta da una coppia di lettere che indicano il codice della lingua, ad esempio:

<a href="http://www.anysite.it" hreflang="en">Anysite</a>

media Determina per i quali tipi di dispositivi saranno ottimizzati file. Il valore può essere qualsiasi media richiesta (query).
ping Controlla l'URL-indirizzi di varie risorse che sono state visitate dal utenete.
rel Completa attributohref con delle informazioni sul rapporto tra il documento corrente e associato. I valori accettati sono:
alternate — Link alla versione alternativa del documento (ad esempio, un modulo pagina stampata, tradotta o una copia).
author — un riferimento all'autore del documento.
bookmark — URL-indirizzo permanent utilizzato per i segnalibri.
help — link alla guida.
license — un riferimento per le informazioni sul copyright al documento corrente.
next/prev — indica il rapporto tra varie URL. Attraverso questo partizionamento Google può capire che le relative pagine collegati in una sequenza logica.
nofollow — vieta ai motori di ricerca seguire i link in questa pagina o un determinato link.
noreferrer — Indica che seguendo il link browser non deve inviare titolo di HTTP-richiesta (Referrer), dove vengono registrati informazioni da quale pagina è venuto visitatore del sito.
prefetch — indica che il documento di destinazione deve essere memorizzato nella cache, vale a dire che browser carica il contenuto della pagina in sottofondo e lo memorizza nel fail di cache
search — Esso indica che il documento di destinazione contiene uno strumento di ricerca.
tag — Specifica la parola chiave per il documento corrente.
target Esso indica in quale finestra deve aprirsi il documento a cui rimanda il. Si possono usare i seguenti valori:
_self — la pagina viene caricata nella finestra corrente;
_blank — pagina si apre in una nuova finestra del browser;
_parent — la pagina viene caricata in un frame-genitore;
_top — la pagina viene caricata in una finestra del browser.
type Indica MIME-tipo dei file del link, vale a dire estensione del file. Al momento, e un elemento semplicemente informativo.
Letto 1033 volte