Link o collegamenti in HTML

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 

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)

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>

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.