I link

Corso online Responsive Design
Realizzare siti responsivi con HTML5 e CSS3.

Scritto da Luca Ruggiero nella sezione Html

La principale caratteristica dell'Html è quella di permettere al navigatore di muoversi agevolmente tra pagina e pagina mediante l'utilizzo di collegamenti ipertestuali, tecnicamente più noti come link.

I link sono generati da un Tag detto ancora o area identificato sintatticamente come <a>, il cui unico attributo obbligatori è href (riferimento ipertestuale) che, come il source per le immagini, identifica il file che deve raggiungere, ovvero la URL di destinazione del link.

Come già detto nell'introduzione al manuale, esistono URL relative ed assolute in cui è possibile specificare rispettivamente solo il nome del file o una parte del percorso, oppure l'intero percorso di un file, a partire dalla root fino alla sua identificazione nella cartella in cui risiede.

Utilizziamo questo concetto per fornire due esempi pratici di codice:

<a href="index.htm">Esempio di URL relativo</a>

<a href="http://www.server.it/index.htm">Esempio di URL assoluto</a>
Possiamo quindi stabilire che per creare un link dobbiamo inserire il testo che ci interessa che diventi un link tra i Tag ancora.

Il Tag <a> è dotato di alcuni importanti attributi, analizziamoli singolarmente:

target

Serve a specificare se il file di destinazione del link si deve aprire nella stessa finestra, in una nuova istanza del browser (una nuova finestra a se stante) o in un frameset (di questo parleremo più avanti nel corso del manuale).

Esistono alcuni valori predefiniti, _blank apre il file in una nuova finestra, _self è stabilito per default ed apre il link nella stessa finestra, _parent è _top servono a lavorare con i frame, ne parleremo quindi più avanti.

Vediamo un esempio:
<a href="index.htm" target="_blank">Clicca qui</a>
title

Serve a definire un testo di etichetta per il link, ovvero passandoci sopra apparirà una descrizione in un'etichetta, nello stesso modo in cui accade per alt nelle immagini:
<a href="index.htm" title="Descrizione del link ... ... ...">Clicca qui</a>
name

Serve a creare link ad uno specifico punto di una pagina, sia che si tratti della pagina corrente sia di un'altra pagina, è sufficiente assegnare una nome ad un'ancora ed utilizzare il carattere cancelletto (#) nel link che dovrà raggiungere quel punto della pagina seguito dal nome assegnato al primo link (che non si comporterà in questo caso da tale).

Un esempio servirà a chiarire le idee, creiamo una pagina con un testo qualsiasi contrassegnato da un marcatore <a> con un nome, forziamo la discesa della pagina con una serie di a capo (aggiungetene anche di più di quelli in esempio) ed alla fine della pagina creiamo un link che punti al punto che desideriamo, includendo nell'href #nome_del_primo_link
<a name="esempio">Cliccando sul link arriverai qui</a>

<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>

<a href="#esempio">Clicca qui</a>
Possiamo assegnare un link solo ad un testo o ad un'immagine, racchiudendola tra i Tag area, a questo punto ci torna utile impostare il bordo dell'immagine a zero:
<a href="index.htm"><img src="immagine.gif" border="0"></a>

I più cliccati della sezione Html

:: Impedire ad un testo di andare a capo in Html (34.443)

:: Le tabelle Html (31.276)

:: Formattazione del testo in Html (25.434)

:: Referenze dei Tag Html (19.109)

:: Creare tabelle con i bordi curvi (18.007)

:: Guida XHTML (16.408)

:: Struttura di un file Html (15.042)

:: Inserire un'icona nella barra degli indirizzi di MSIE (13.688)

:: Inserire le immagini in una pagina Html (11.123)

:: Sovrapporre un'immagine ad un layer senza posizionamento assoluto (10.961)

IN EVIDENZA
DOWNLOAD