La caratteristica forse più importante del web è senza ombra di dubbio data dalla possibilità di "navigare" da una pagina all'altra semplicemente facendo click su una porzione di testo, su una immagine o su quant'altro la fantasia del webmaster abbia avuto modo di frivoleggiare. In una parola l'ipertestualità cioè la capacità di rendere un testo collegato direttamente ad una pagina web o ad una porzione di essa, ha fatto la fortuna di internet.
Nell'HTML questa importante strumento si traduce in due fasi importanti: il contenuto e la risorsa.
Il contenuto è la parte cliccabile del link che deve essere il più esplicativo possibile, sia esso una immagine, un testo o un pulsante.
La risorsa è il documento verso cui il link indirizza l'utente.
Un esempio chiaraficatore di codice HTML potrebbe essere questo.
<a href="http:gianninativo.blogspot.com">Blog di Gianni</a> che ci restituirà:
Come al solito abbiamo il tag di apertura e chiusura in questo caso <a></a> .
La risorsa è il sito web verso cui punta il link (in questo caso http:gianninativo.blogspot.com) e il contenuto che spiega verso cosa si sta indirizzando l'utente è la parte che sta tra i tag <a>Contenuto</a>.
E' importante sapere che a seconda del tipo di file verso cui punta il link il browser si comporterà in manierqa diversa.
Per esempio mentre i file .gif, .jpg, .png verranno visualizzati nel browser, così come gli .html , .pdf, .doc; per i file .zip, .exe verrà chiesto all'utente di scaricarli sul proprio PC.
La sintassi per indirizzare gli utenti verso un indirizzo di posta elettronica sarà:
<a href="mailto:tuaMail@TuoSito.it">
Mandami una e-mail
</a>.
Le Ancore
Mentre il link punta verso altre risorse sul web l'ancora punta verso la stessa pagina web, anzi per meglio dire verso un preciso punto di essa.
Ecco il codice:
<a name="puntopreciso1">BlaBlaBla…. …</a>
Così ho inizializzato l'indice verso cui punterà il collegamento, ora ecco il collegamento vero e proprio:
<a href="#puntopreciso1">vai a inizio pagina </a> .
Gli Attributi del Link
target .
Tramite questo attributo è possibile far si che il link punti verso una nuova pagina web, facendo si che il contatto con la pagina principale non venga mai perso.
Es.: <a target="_blank" href="http://gianninativo.blogspot.com">visita il mio blog </a>
cioè :visita il mio blog
title
Questo è l'attributo che ci da la possibiltà di inserire un testo esplicativo al nostro link.
Es.<a title="Visita il blog di Gianni Nativo " href="http://gianninativo.blogspot.com">visita il mio blog </a>.
Cioè :visita il mio blog
hreflang
con hreflang si indica la lingua del documento verso cui punta il link. Es. <a hreflang="eng" href="www.blogspot.com" >
accesskey
con accesskey si può impostare se si vuole una scorciatoia da tastiera per il proprio link.
Es. <a href="http://gianninativo.blogspot.com" accesskey="g" target="_blank" >Alt+g+invio e visiti il mio blog </a>
cioè : Alt+g+invio e visiti il mio blog
base
Ad ogni link abbiamo sempre inserito tutto il percorso completo, esistono però due motivi per i quali questa tecnica può essere omessa.
Il primo è che siete assolutamente certi che il documento verso cui state linkando si trova nella stessa cartella della pagina da cui parte il link.
Es. se mi trovo nella cartella WWW.miosito.it/miacartella/mioFile1.html e devo linkare su WWW.miosito.it/miacartella/mioFile2.html mi basterà usare il percorso relativo <a href="mioFile2.html".
Il secondo motivo che ci permette di omettere tutto il percorso (o percorso assoluto) è perchè abbiamo indicato al browser la parte omessa tramite il tag 'base' .
Difatti inserendo tra i tag HEAD questo codice: <base href="http://www.mioSitoWeb.com/miaCartella">
specifico che d’ora in poi tutti i percorsi relativi faranno riferimento al percorso indicato.
Quindi scrivendo nel documento:
<a href="mioFile.html">collegamento al mio file</a>
Sarò sicuro che farà riferimento a:
http://www.mioSito.it/miaCartella/mioFile.html
Nessun commento:
Posta un commento