In questa lezione vi mostro come inserire un CSS esterno e quali sono i suoi vantaggi.
CSS Esterni
Un foglio di stile esterno è un insieme di regole che risiedono su un documento separato dalla pagina web, un file esterno appunto.
Per prima cosa, create un documento di testo a cui darete l’estensione .CSS
Quindi, inserite al suo interno le regole CSS come di consueto ma senza includere il tag <style>.
Infine, dovete collegare il file esterno alle pagine del vostro sito.
Per farlo, vi basta inserire all’interno di <head> il tag <link>, come nell’esempio sottostante:
CSS esterno
L’attributo href indica il percorso ed il nome del documento su cui risiede il CSS esterno.
Quando si usa un CSS esterno e quando un CSS interno?
Se volete formattare una sola pagina web, inserite un CSS incorporato:
il CSS è relativo solo a quella pagina;
se volete personalizzare un elemento HTML nello specifico, vi basterà aggiungere un eventuale CSS in linea direttamente nel suo tag.
Se volete formattare un sito composto da più pagine, tutte con caratteristiche simili, allora la soluzione migliore è il CSS esterno:
vi basta creare una sola volta il CSS e collegarlo con <link> a tutte le pagine;
una modifica al CSS si ripercuote su tutte le pagine del sito;
se volete poi andare a modificare lo stile di una determinata pagina (senza modificare le altre) vi basterà inserire un CSS incorporato in quella o eventuali CSS in linea.
Ricordatevi che, siccome il CSS funziona in cascata, l’ordine di priorità è il seguente:
In questa lezione vi mostro come rendere cliccabile una immagine per trasformarla in un collegamento.
Non sempre un link deve essere basato sul testo: ad esempio può essere necessario usare una immagine e renderla cliccabile (come un pulsante) per raggiungere la nostra destinazione.
Link grafici
Possiamo trasformare una immagine in un pulsante, racchiudendo il tag <img> all’interno del tag dei collegamenti <a>:
<a href="destinazione"> <img src="foto.jpg"> </a>
In questo modo, l’immagine diventa cliccabile e vi porterà alla destinazione del collegamento.
In questa lezione vi mostro come creare un collegamento verso destinazioni diverse da una pagina web.
Tipi di destinazione
Ad un link potete assegnare una destinazione diversa da una pagina, ad esempio:
un documento (es: di Word o un PDF)
una immagine (es: GIF, JPEG)
un archivio (es: ZIP)
Quando la destinazione del vostro link è diversa da una pagina, basta indicare nell’attributo href il nome del file destinazione, compresa l’estensione:
In questa lezione vi illustro come funzionano i collegamenti interni ad una pagina web.
I link interni
Non tutti i collegamenti del tag <a> puntano necessariamente ad un’altra pagina: esistono dei casi in cui avete bisogno di rimanere nella stessa pagina in cui siete ma spostandovi verso l’alto o verso il basso, in un punto preciso.
Per fare questo, si inserisce nel codice in corrispondenza della destinazione, ovvero nel punto in cui volete fissare la visualizzazione della pagina, un punto di ancoraggio.
Il punto di ancoraggio si inserisce sempre usando il tag <a>, ma in modo diverso:
<a name="nome">
L’attributo name indica il nome della vostra ancora: inizio, fine, articolo1, ecc.
Il passo successivo è quello di dire al collegamento che non vogliamo uscire verso un’altra pagina, ma vogliamo raggiungere l’ancora posizionata dentro questa.
In questa lezione vi spiego quali percorsi potete usare per i vostri collegamenti.
Tipi di percorso
Un collegamento deve portare ad una sola destinazione: per poterlo fare, dobbiamo indicare al link dove si trova tale destinazione.
Si trova sul sito stesso della pagina di origine? Si trova nella stessa cartella? O si trova in un’altro sito?
Se si trova su un sito web esterno, si utilizza un percorso assoluto.
Se si trova sullo stesso sito web, possiamo usare un percorso relativo.
Percorsi assoluti
In un percorso assoluto si comunica al browser di andare a prendere la destinazione partendo direttamente dal dominio (es: www.miosito.it), muovendosi poi verso la posizione del file che si vuole raggiungere.
Per fare un’esempio pratico, basato sulla vita reale, è come se io volessi incontrare una persona basandomi sul suo indirizzo:
per prima cosa mi reco nella città dove si trova
poi cerco la via
quindi il numero civico
infine cerco il cognome sul citofono
Questo metodo funziona per qualsiasi indirizzo voglio usare, basta cercare la città dove abita la persona ed è fatta.
Esempio:
http://www.miosito.it/pippo/pluto.html
Dove:
http: indica il tipo di protocollo usato (in questo caso il protocollo di trasferimento di ipertesti)
www.miosito.it indica il dominio che identifica un server web sulla rete
pippo indica la cartella del sito in cui è contenuta la pagina di destinazione
pluto.html è il nome della pagina che rappresenta la destinazione
Il link finale sarà così composto:
<a href="http://www.miosito.it/pippo/pluto.html">Testo del collegamento</a>
Percorsi relativi
In un percorso relativo dobbiamo spiegare al browser quale strada dovrà seguire per poter andare a raggiungere la pagina web destinazione, partendo dal punto in cui si trova quella di partenza.
Per riferirmi all’esempio descritto sopra, cosa potrebbe succedere se volessi incontrare una persona che abita nella mia stessa via, usando il metodo descritto per il percorso assoluto?
Dovrei di nuovo uscire dalla città per poi rientrarci: inutile, no?
Se la persona abita nella mia stessa via, mi segno soltanto il numero civico e:
esco di casa
vado al palazzo di destinazione
cerco il cognome sul citofono.
Ovviamente questo procedimento non va bene se la persona si trova in un’altro paese.
Facciamo ora un esempio.
Il nostro sito contiene la seguente struttura:
www.sito.it:
homepage.html
cartella1/
partenza.html
topolino.html
sottocartella/
pluto.html
cartella2/
pippo.html
Immaginiamo di essere sulla pagina partenza.html e di voler raggiungere una delle altre pagine con questo collegamento:
<a href="">Vai alla destinazione</a>
Caso 1 – Destinazione = topolino.html
La pagina di destinazione del collegamento è nella stessa cartella che ospita la pagina di origine (cartella1).
Non mi muovo da lì, perché la pagina partenza vede perfettamente la pagina topolino (sono nella stessa cartella), quindi mi basta chiamare la pagina di destinazione col suo nome:
<a href="topolino.html">Vai alla destinazione</a>
Caso 2 – Destinazione = pluto.html
La pagina di destinazione del collegamento non è nella stessa cartella ma è immediatamente raggiungibile entrando in una cartella che riusciamo a vedere e scrivendo il nome della pagina:
<a href="sottocartella/pluto.html">Vai alla destinazione</a>
Caso 3 – Destinazione = homepage.html
La pagina di destinazione del collegamento è immediatamente fuori dalla cartella che ospita la pagina di origine (cartella1).
Se la pagina non è nella stessa cartella, devo “uscire” da dove mi trovo ora usando:
../
e poi digito il nome del file:
<a href="../homepage.html">Vai alla destinazione</a>
Caso 4 – Destinazione = pippo.html
La pagina di destinazione del collegamento non è nella stessa cartella (quindi usciamo con ../), ma non riusciamo ancora a vederla, perché si trova in un’altra cartella.
Scriviamo quindi il nome della cartella e, quindi, il nome del file:
<a href="../cartella2/pippo.html">Vai alla destinazione</a>
In questa lezione vi presento il tag <a>, che costituisce la base dei collegamenti web.
Per spostarvi da una pagina all’altra del vostro sito avete bisogno di creare un collegamento tra i due documenti: una porzione di testo (una o più parole) può essere trasformata in un link verso l’altra destinazione.
Passando col mouse sopra tale testo, apparirà la tipica manina che indica la presenza di un link: cliccando sul collegamento la navigazione si sposta verso quella destinazione.
<a>
Il tag <a> racchiude il testo del collegamento:
<a>testo che deve portare alla destinazione</a>
href
Il collegamento, tuttavia, ha bisogno di un attributo per poter funzionare bene: sto parlando dell’attributo href, che indica il percorso da seguire per arrivare alla destinazione.
<a href="percorso">testo che deve portare alla destinazione</a>
Nella prossima lezione vi parlo dei percorsi che può avere l’attributo href.
Un ipertesto è un insieme di documenti messi in relazione tra loro per mezzo di parole chiave. Può essere visto come una rete; i documenti ne costituiscono i nodi. La caratteristica principale di un ipertesto è che la lettura può svolgersi in maniera non lineare: qualsiasi documento della rete può essere “il successivo”, in base alla scelta del lettore di quale parola chiave usare come collegamento.
Quindi, un sito web, dato che è costituito da un insieme di documenti legati tra di loro da dei collegamenti, è un esempio di ipertestualità.
In un sito web, infatti, non esiste un ordine preciso da seguire per la sua lettura/consultazione: avendo a disposizione dei collegamenti (link) potete scegliere la strada che preferite nel passare da una sezione all’altra dello stesso documento o spostarvi tra le varie pagine del sito.
