Approfondimenti:lo sfondo con i CSS

ww.html.it/

Ringraziamento particolare a HTML.IT che mi ha fornito online queste pagine.

Tutti gli attributi del body che abbiamo visto finora (da eccezione dell’attributo "lang") sono caratteristiche che riguardano il layout della nostra pagina HTML. Come si può vedere, con una sintassi di questo genere:

<body
leftmargin="0"
topmargin="0"
background="imgs/sfondo00006.gif"
bgcolor="#66CCFF"
lang="it"
>
Il nostro testo.
</body>

il layout e il contenuto sono mischiati tra loro. Gli attributi "background" e "bgcolor" sono addirittura deprecati nelle specifiche del W3C: significa che andranno perduti.

In un approccio di impaginazione che utilizzi i fogli di stile, l’aspetto che riguarda la visualizzazione deve essere separato dal contenuto.

Il nostro body si ridurrà quindi a qualcosa di minimale, come:

<body lang="it">

mentre le regole che indicano come visualizzare lo sfondo saranno visualizzate in una locazione separata del documento.

Le regole su come impostare lo sfondo con i CSS vengono spiegate dettagliatamente nella relativa lezione della guida ai CSS.

I fogli di Stile sono estremamente potenti, e dando un’occhiata al link che ho segnalato poco sopra si può leggere che è anche possibile fissare lo sfondo in modo che non si ripeta:

si tratta di una sintassi che funziona bene persino con Netscape 4.x, come si può vedere nella pagina di esempio.

Oppure è possibile "fissare lo sfondo" in modo da potervi fare scorrere sopra il contenuto della pagina. La sintassi è la seguente:

come si può vedere anche nell’esempio.

Impostare il colore del testo e dei link

Il testo

Se non impostate nessun colore per il testo, di default il testo di una pagina è nero.

Tuttavia il nero non sempre è leggibile con tutti i colori di sfondo. Immaginate ad esempio di volere utilizzare come sfondo il colore nero: con una pagina nera e testo nero non leggeremmo nulla!

Abbiamo allora la possibilità di assegnare un colore per il testo di tutta la pagina, semplicemente utilizzando questo attributo del tag body:

<body text="red">

Quindi potremo avere, ad esempio:

<body bgcolor="#0000ff" text="#ffffff">

come nell’esempio consultabile in questa pagina.

I link

Non c’è bisogno di spiegare che cosa siano i link: l’esperienza della navigazione nel web ci ha infatti insegnato che il link è un collegamento, un ponte tra una pagina è l’altra.

Non tutti però sanno che i link testuali hanno diversi stati:

Status	Codifica in HTML 4.01	Descrizione
Collegamento normale	link	Normalmente il link quando si trova "a riposo" viene evidenziato in qualche maniera all’interno della pagina HTML, in modo che sia facile per l’utente individuarlo. Nell’HTML tradizionale il link è sempre sottolineato (è possibile eliminare la sottolineatura soltanto usando i CSS). Di default i link sono blu (#0000FF).
Collegamento visitato	visited	Un link è visitato, quando l’URL della pagina compare nella cronologia dell’utente. Di default i link visitati sono di color violetto (più esattamente: #800080).
Collegamento attivo	active	Il collegamento è attivo nel momento in cui il link è stato cliccato e sta avvenendo il passaggio da una pagina all’altra. Non si tratta di una caratteristica particolarmente utile oggi, ma quando i modem avevano una velocità molto inferiore a quella odierna, vedere un link "attivo" era comunque un’indicazione sul fatto che qualcosa stava avvenendo. Con Internet Explorer è possibile vedere anche una linea tratteggiata attorno al collegamento attivo. Un ulteriore condizione in cui un link si rileva "attivo" è quando si utilizza il tasto destro del mouse su di lui. Insomma un link è attivo quando "ha il focus".
Collegamento al passaggio del mouse	non presente ("hover" nei CSS)	Con l’HTML 4.01 al passaggio del mouse sul link si può fare ben poco, coi fogli di stile invece è possibile creare qualche effetto di visualizzazione.

Abbiamo dunque tre stati canonici dei link (link a riposo, link attivo e link visitato) e una condizione aggiuntiva introdotta dai fogli di stile (status del link al passaggio del mouse):

Anche il colore dei link di tutta la pagina può essere tramite gli attributi del body:

I link secondo le impostazioni predefinite sono blu, per cambiare colore:

<body link="red">

Per cambiare colore ai link visitati (di default viola):

<body vlink="green">

i link visitati vengono memorizzate nella cronologia del browser, quindi se volete ripristinare il colore originario dei link, è sufficiente cancellare la cronologia.

Per cambiare colore ai link attivi:

<body alink="yellow">

La sintassi completa per impostare i link è quindi:

<body link="red" alink="yellow" vlink="green">

I percorsi assoluti e relativi

Percorsi assoluti

Fino a quando ci troviamo nella condizione di creare un sito web di dimensioni ridotte (poche pagine) non avremo problemi di complessità, e possiamo anche ipotizzare di lasciare tutti i nostri file in una medesima cartella. È evidente però che – man mano che il nostro sito web cresce – avremo bisogno di un maggior ordine.

Si presenterà allora l’esigenza di inserire le immagini del sito in una cartelle diverse (in modo da averle tutte nella medesima locazione), e magari sarà opportuno dividere il sito in varie sezioni, in modo da avere tutti i documenti dello stesso tipo all’interno di un contesto omogeneo.

I siti web sono dunque organizzati in strutture ordinate: non a caso si parla di albero di un sito, per indicare la visualizzazione della struttura alla base del sito.

Poiché l’organizzazione di un sito in directory e sottodirectory è una cosa normalissima, dobbiamo imparare a muoverci tra i vari file che costituiscono il sito stesso, in modo da essere in grado di creare collegamenti verso i documenti più reconditi, destreggiandoci tra le strutture più ramificate.

Per farlo esistono due tecniche:

indicare un percorso assoluto
indicare un percorso relativo

Nel caso in cui il documento a cui vogliamo puntare si trovi in una particolare directory del sito di destinazione, con i percorsi assoluti non abbiamo che da indicare il percorso per esteso.

Se esaminiamo:

Leggi le risorse sui <a href="http://www.html.it/css/index.html">fogli di stile</a>

Possiamo vedere chiaramente che il link indica un percorso assoluto e fa riferimento ad una particolare directory. Nella fattispecie:

http://	Indica al browser di utilizzare il protocollo per navigare nel web (l’http)
www.html.it/	Indica di fare riferimento al sito www.html.it
css/	Indica che la risorsa indicata si trova all’interno della cartella "css"
index.html	Indica che il file da collegare è quello chiamato "index.html"

Insomma, per creare un collegamento assoluto è sufficiente fare riferimento all’url che normalmente vedete scritto nella barra degli indirizzi. I percorsi assoluti si usano per lo più, quando si ha la necessità di fare riferimento a risorse situate nei siti di terze persone.

Percorsi relativi

Spesso vi troverete tuttavia a fare riferimento a documenti situati nel vostro stesso sito, e – se state sviluppando il sito sul vostro computer di casa (cioè "in locale") – magari non avete ancora un indirizzo web, e non sapete di conseguenza come impostare i percorsi. È utile allora capire come funzionano i percorsi relativi.

I percorsi relativi fanno riferimento alla posizione degli altri file rispetto al documento in cui ci si trova in quel momento.
Per linkare due pagine che si trovano all’interno della stessa directory è sufficiente scrivere:

<a href="paginaDaLinkare.html">collegamento alla pagina da linkare nella stessa directory della pagina presente</a>

Poniamo ora di trovarci in una situazione di questo genere:

Figura 1. Riferimento a pagina di una sottodirectory

Dalla pagina "index.html" vogliamo cioè far riferimento al file "interna.html", che si trova all’interno della directory "interna", che a sua volta si trova all’interno della directory "prima".

La sintassi è la seguente:

<a href="prima/interna/interna.html">Visita la pagina interna</a>

Vediamo adesso l’esempio opposto: dalla pagina interna vogliamo far riferimento a una pagina ("index.html") che si trova più in alto di due livelli:

Figura 2. Riferimento a pagina in una directory di livello superiore

La sintassi è la seguente:

<a href="../../index.html">Visita la pagina interna</a>

Come si vede, con i percorsi relativi valgono le seguenti regole generali:

Per far riferimento a un file che si trovi all’interno della stessa directory basta linkare il nome del file	<a href="paginaDaLinkare.html">collegamento alla pagina</a>
Per far riferimento a un file contenuto in una cartella di livello inferiore alla posizione corrente, basta nominare la cartella seguita dallo "slash", e poi il nome del file. Secondo la formula: cartella/nomeFile.html	<a href="prima/interna/interna.html">Visita la pagina interna</a>
Per tornare su di un livello, è sufficiente utilizzare la notazione: ../nomeFile.html	<a href="../../index.html">Visita la pagina interna</a>

Grazie a questi accorgimenti potete agevolmente navigare all’interno delle directory del vostro sito: se ce ne fosse bisogno potrete per esempio tornare su di un livello rispetto alla posizione del file, scegliere un’altra cartella, e poi scegliere un altro file:

../altraCartella/nuovoFile.html

Per approfondimenti potete consultare la pagina d’esempio.

Approfondimenti

A volte potrete incontrare la notazione:

Leggi le risorse sui <a href="/css/index.html">fogli di stile</a>

Se il vostro sito è all’interno di un server Unix (ma la sintassi funziona anche in sistemi Windows, basta che non siano in locale), questa notazione non deve stupirvi: il carattere '/' indica la directory principale del sito, altrimenti detta "root". Dunque <a href="/css/index.html"> è un altro modo di esprimere i percorsi assoluti all’interno del proprio sito.

Un'altra cosa importante da sapere è che quando metterete il vostro sito all'interno dello spazio web, l'indicazione della index all'interno di una directory è facoltativa. Al posto di questo:

http://www.html.it/css/index.html

è sufficiente indicare la directory:

http://www.html.it/css/

Verificate solo con il vostro gestore dello spazio web (cioè "hosting"), se le pagine index della directory devono avere forma index.html, index.htm, index.asp, index.php, home.asp, o altro.

Consigli per i nomi dei file

Quando mettere nel web il vostro sito internet, vi accorgerete che esistono due famiglie di sistemi operativi: Windows e Unix. Questi due sistemi operativi utilizzano differenti modi per gestire i file, dunque alcuni accorgimenti sono necessari:

è consigliabile non lasciare spazi vuoti nei nomi dei file (gli spazi vuoti non sempre vengono interpretati correttamente), meglio ovviare a questa necessità con un "trattino basso" (cioè "_"). Ad esempio: mio_file.html
maiuscole e minuscole possono fare la differenza (in ambiente Unix spesso la fanno), quindi controllate il modo in cui avete scritto i file

Inoltre quando create un collegamento state attenti a non avere una notazione simile a questa:

<a href="file:///C|percorsonomeFile.html">testo</A>

significa che state facendo un riferimento (assoluto) al vostro stesso computer: chiaro che quando metterete i file nel vostro spazio web, le cose non funzioneranno più.