Html a tag – i link in html

 In Web Design

Con quest’articlo si presume che il lettore abbia una minima conoscenza degli elementi TAG e del loro utilizzo.

Un tag A in html definisce un ancoraggio e viene utilizzato per stabilire collegamenti ad altre pagine, documenti o ad un segnalibro nella pagina.

Quando viene utilizzato come segnalibro è necessario impostare un id o name ad esso. L’id deve essere ovviamente unico, così come il name. In XHTML 1.0 l’attributo name per questo elemento è stato deprecato in favore dell’attributo id.

<a id=”bookmark1″ name=”bookmark1″> Questo testo fa parte di un segnalibro denominato “bookmark1”</a>

Quando il tag a viene utilizzato per creare un collegamento ad un’altra pagina l’attributo href definisce il percorso di destinazione. I link vengono di base “decorati” dai browser che inseriscono colore e sottolineatura.

Codice:
<a href=”http://www.w3.org/”>World Wide Web Consortium</a>
Visualizzazione:
World Wide Web Consortium

Il tag a può essere utilizzato per entrambi gli scopi. Facendo riferimento ad un altro documento, questo ancoraggio setterà un segnalibro in questa pagina.

<a id=”doctypelink” name=”doctypelink” href=”http://www.htmlquick.com/reference/tags/doctype.html”>The HTML !DOCTYPE tag</a>

Per collegarsi ai segnalibri presenti nella stessa pagina del tag a è sufficiente definire solo l’ancora, anziché la url completa della pagina.

Per andare a quel segnalibro nel primo esempio di questo pagina, segui questo link: <a href=”#bookmark1″> HTML un tag di esempio < / a>

Attributi

id

L’attributo “id” assegna un nome identificativo per l’elemento associato. Questo identificatore deve essere univoco nel documento e può essere usato per riferirsi a tale elemento in altri casi (ad esempio da altri script).

<p id=”paragraph1″> Questo è il primo paragrafo , denominato ” paragraph1″ . Per modificare dinamicamente le proprietà utilizza questo identificativo.</p>

class

L’attributo “class” assegna un nome di classe (o un elenco di classi separate da spazi) per l’elemento contenitore. Viene usato insieme ai fogli di stile per definire le proprietà grafiche dell’elemento.

<p class=”references”>Questo articolo ha la classe references</p>

style

Questo attributo viene utilizzato per definire attributi grafici per l’elemento contenitore, e il suo valore dovrebbe essere composta dalle proprietà dei fogli di stile. Si consiglia sempre di evitare di inserire le informazioni di stile in questo attributo preferendo invece di assegnare una classe e inserire le proprietà nei fogli di stile.

<p style=”color: #0000FF; font-size: 12pt”> Questo è un paragrafo con uno stile definito . </p>
<p> E questo è un altro testo senza stile . </p>

title

Lo scopo di questo attributo è di fornire un titolo all’elemento. Il suo valore dovrebbe essere una descrizione breve e precisa dell’elemento. I browser di solito visualizzano una nuvoletta con il titolo quando si mantiene il puntatore del mouse sopra l’elemento. È inoltre un fattore di cui tengono conto i motori di ricerca per determinare il contenuto del link a cui il tag a fa riferimento.

<a title=”MN Web Solutions – Web Agency” href=”http://www.web.mnweb.it/”>MN Web Solutions</a>

lang

Specifica la lingua del contenuto di un elemento. Il valore predefinito è “unknown”. In XHTML 1.1 l’attributo “lang” è stato completamente sostituito da “xml:lang” e il suo uso non è più valido.

<p lang=”en” xml:lang=”en”>This is a paragraph in English.</p>

dir

Questo attributo indica la direzione in cui i testi dell’elemento devono essere letti . Questo include i contenuti, i valori degli attributi e tabelle. Viene utilizzato, ad esempio, per gli alfabeti in cui si legge da destra a sinistra. Ha due valori possibili che sono case-insensitive:

RTL : da destra a sinistra;

LTR : da sinistra a destra.

<a lang=”he” dir=”rtl”>…un preventivo ebraico…</a>

charset

Specifica la codifica dei caratteri del documento di destinazione.

<a charset=”utf-8″ href=”http://www.web.mnweb.it/”>Codice html</a>

href

L’attributo “href”, il più importante per il tag a, specifica la risorsa di destinazione a cui l’elemento è collegato. Si può specificare una risorsa all’interno dello stesso sito o in uno esterno.

<a href=”http://www.web.mnweb.it/portfolio.php”>Link ad una pagina all’interno di questo sito</a> <a href=”http://sphotos-g.ak.fbcdn.net/hphotos-ak-prn1/1016521_620284201318036_1507983034_n.jpg”>Link ad un file immagine esterno al sito</a>

hreflang

Specifica la lingua del documento di destinazione. Questo attributo può essere utilizzato solo quando l’attributo href è presente nell’elemento.

<a hreflang=”en” href=”english-version.html”>English version</a>

type

Questo attributo fornisce informazioni sul tipo di contenuto della risorsa di destinazione, indicando se si tratta di un documento HTML, un’immagine JPG, un documento Excel, ecc. Il suo valore deve essere uno dei MIME types.

<a href=”logo.gif” type=”image/gif”>Visualizza il logo</a>
<a href=”articolo.html” type=”text/html”>Leggi l’articolo</a>

rel

Descrive la relazione che mantiene il documento corrente con la risorsa di destinazione; cioè si definisce il significato della risorsa per l’attuale documento.

<a rel=”copyright” href=”copyright.html”>Copyright dell’articolo</a>
<a rel=”alternate” href=”english-version.html” hreflang=”en”>English version</a>

rev

Stabilisce la relazione tra la risorsa di destinazione e il documento corrente; cioè si afferma che cosa il documento rappresenta per la risorsa.

<a rev=”index” href=”articolo1.html”>Articolo 1</a>

shape

Definisce la forma di una regione utilizzata per definire un’area di una mappa di immagine. I valori sono case-sensitive e devono corrispondere ad uno dei seguenti:

  • default: consente di selezionare l’intera regione;
  • rect: definisce una regione rettangolare;
  • circle: definisce una regione circolare;
  • poly: definisce una regione poligonale.

coords

Specifica le coordinate e la posizione della forma definita nell’attributo “shape”. Le coordinate sono relative all’angolo in alto a sinistra dell’oggetto associato e dipendono dalla forma utilizzata:

  • x1,y1,x2,y2: se l’attributo shape è impostato su rect specifica le coordinate dell’angolo in alto a sinistra e poi dell’angolo in basso a destra del rettangolo;
  • x,y,raggio: se l’attributo shape è impostato su circle specifica le coordinate del cerchio e la lunghezza in pixel del raggio;
  • x1,y1,x2,y2,..,xn,yn: se l’attributo shape è impostato su poly specifica le coordinate dei punti del poligono. Se le prime e le ultime coordinate non sono le stesse, il browser chiuderà automaticamente il poligono aggiungendo le ultime coordinate uguali alle prime.

L’attributo coords non è supportato in HTML5.

<map name=”red-button” id=”red-button”>
<area href=”document.html” shape=”circle” coords=”25, 25, 20″ alt=”Accedi al document cliccando il pulsante rosso!” />
</map>
<img src=”redbtn.png” usemap=”#red-button” width=”50″ height=”50″ alt=”Red button”>

target

Specifica il nome del frame in cui il documento di destinazione deve essere caricato.

<a href=”http://www.w3c.org” target=”_blank”>Apre il documento in una nuova finestra</a>
<a href=”http://www.w3c.org” target=”content”>Apre il documento in un frame chiamato “content”. Il frame deve essere presente nell’attuale frameset</a>

tabindex

Specifica la posizione di questo elemento in ordine di tabulazione. L’ordine di tabulazione definisce una sequenza con tutti gli elementi che possono ricevere il focus. Gli utenti possono navigare questa sequenza da tastiera (di solito con il tasto “tab”).

<a href=”doc1.html” tabindex=”1″>Primo documento nella lista</a>
<a href=”doc2.html” tabindex=”2″> Secondo documento nella lista </a>
<a href=”doc3.html” tabindex=”3″> Terzo documento nella lista </a>

accesskey

Relaziona un elemento ad un tasto della tastiera. La maggior parte dei browser consentono agli utenti di accedere all’elemento premendo quel tasto mentre si tiene premuto il tasto “alt”. Il risultato dell’attivazione dipende dalla natura dell’elemento. Per i collegamenti, questa azione segue automaticamente il collegamento, mentre per altri elementi semplicemente ottiene il focus sull’oggetto.

<a href=”http://www.web.mnweb.it/” accesskey=”H”>Homepage (H)</a>

name

Definisce un nome univoco per l’elemento per impostare i segnalibri (o ancore) nella pagina.

In XHTML 1.0 l’attributo “name” per questo elemento è stato deprecato in favore dell’attributo “id” e in XHTML 1.1 semplicemente non è valido. Eppure i segnalibri senza l’attributo “name” non possono funzionare, quindi a meno che non si stia scrivendo in XHTML 1.1, la pratica migliore è quella di utilizzare entrambi gli attributi con lo stesso valore.

<a name=”first-bookmark” id=”first-bookmark”> Qui abbiamo messo il primo segnalibro nella pagina </a>

Recommended Posts
0