Il tag <a> e il collegamento con i fogli di stile
Per inserire un link in una pagina HTML si utilizza il tag <a>.
Il tag <a> ha due attributi obbligatori, e almeno un importante attributo facoltativo .
| attributo | valore | significato |
|---|---|---|
| href="" | link | Specifica il percorso assoluto o relativo della pagina che si vuole collegare |
| title="" | descrizione | Specifica la descrizione del contenuto della pagina collegata |
| target="" | finestra | FACOLTATIVO: specifica in quale finestra dovrà aprirsi la pagina collegata |
Di seguito è riportato un esempio di link, con il relativo codice html usato per generarla.
| vai a Repubblica |
| <a href="http://www.repubblica.it" title="Visualizza la home page di Repubblica on line" target="_blank">vai a Repubblica</a> |
Precisato che l'ordine degli attributi è indifferente, vediamo nel dettaglio i singoli attributi del link:
- L'attributo href può contenere il collegamento assoluto o relativo alla pagina html. In questo caso il collegamento è assoluto. Per la differenza tra collegamenti assoluti e relativi si consulti questo tutorial.
- L'attributo title contiene una descrizione della pagina collegata. In base alle specifiche di (X)HTML è un attributo obbligatorio.
- L'attributo target è facoltativo: se non si usa, la pagina collegata si apre di default nella stessa finestra. Se si usa, con il valore _blank, il collegamento si apre in una nuova finestra del browser (provare per credere. Di seguito due collegamenti alla stessa pagina, il primo senza target, il secondo con target="_blank": Il sito dell'Herald Tribune (stessa finestra) - Il sito dell'Herald Tribune (nuova finestra)
Collegare un foglio di stile (il tag <link />)
Per collegare un foglio di stile ad una pagina HTML si usa - dentro il tag <head> - il tag <link />, che, come il tag <img /> ha - in (X)HTML - la chiusura implicita.
Il tag <link /> ha tre attributi obbligatori, come evidenziato nella seguente tabella:
| attributo | valore | significato |
|---|---|---|
| href="" | link | Specifica il percorso assoluto o relativo del foglio di stile .css che si vuole collegare |
| type="" | valore predefinito | text/css |
| rel="" | valore predefinito | stylesheet |
Un comune collegamento a un foglio di stile assumerà pertanto la forma che segue:
| ... <head> <title>Pagina Web</title> ... <link href="../foglidistile/stili.css" type="text/css" rel="stylesheet" /> ... </head> ... |
Nel caso che precede è stato utilizzato un collegamento relativo.
Un altro modo per collegare i fogli di stile
Il tag <link /> non è l'unico modo per collegare i fogli di stile: esiste un modo alternativo, di seguito spiegato, e che di norma è preferito dalla maggior parte dei designer (compreso chi scrive):
<style type="text/css">
@import url(../foglidistile/stili.css);
</style>
Il codice HTML che precede sostituisce interamente il tag <link /> con il tag <style> (che quindi, oltre ad essere un attributo, può essere anche un tag). Anche il tag <style> va inserito dentro <head> e vuole, come attributo obbligatorio, type="text/css". Il contenuto del tag <style> deve essere scritto come segnato nell'esempio precedente:
@import[spazio]url(collegamento_assoluto_o_relativo);
E' fondamentale ricordarsi di inserire il punto e virgola dopo la chiusura della parentesi tonda.