  |
|
|
|
Lo sfondo di un documento HTML Impostare il colore di sfondo Incominciamo col vedere come ottenere la nostra prima pagina HTML nel modo in cui desideriamo visualizzarla. Se vogliamo impostare un colore di sfondo è necessario impostare il relativo attributo del tag body. Così: <body bgcolor="blue"> bgcolor sta per "background color", cioè "colore di sfondo". Molti colori sono disponibili utilizzando le corrispondenti parole chiave in inglese. Qui potete trovare un esempio della pagina con lo sfondo blu Tuttavia non è consigliabile inserire la notazione del colore facendo riferimento a questo tipo di sintassi, dal momento che non possiamo sapere esattamente a quale tonalità di colore corrisponda il blu del computer dell’utente. È preferibile in molti casi utilizzare la corrispondente codifica esadecimale del colore, che ci permette – tra le altre cose – di scegliere anche tonalità di colore non standard. Con la notazione esadecimale il nostro esempio diventa: <body bgcolor="#0000FF"> Ecco una tabella con la notazione di alcuni colori (molti di essi sono disponibili anche nelle varianti "dark" e "light", ad esempio: "darkblue", "lightblue"):
Il numero di colori che l’utente ha a disposizione dipende dalla scheda video. Oggi si va da una risoluzione minima di 256 colori a una risoluzione che prevede svariati milioni di colori. Per capire di cosa stiamo parlando, provate a visualizzare questa pagina: cambiando il numero di colori visualizzati sul monitor. Per fare ciò, in Windows, andate in: Pannello di controllo > Schermo > Impostazioni e cambiate il numero dei colori, applicate i cambiameni e tornate a visualizzare la pagina. Come si vede la visualizzazione della tonalità di colore è sensibilmente diversa passando da 256 a 65.536 colori (16 bit). Poiché non c’è modo di sapere quale scheda video abbia l’utente (o come l’abbia impostata), i webdesigner per molto tempo hanno fatto riferimento alla "palette sicura" dei 256 colori che sicuramente l’utente è in grado di visualizzare. Si tratta della cosiddetta palette web safe (cfr. articoli su "palette WEB SAFE" nella sezione PRO). C’è però da dire che oramai la stragrande maggioranza dei computer è impostata per visualizzare almeno migliaia di colori, dunque l’utilizzo della palette "web safe" non è più così strettamente necessaria (lo era nei primi anni del web). Inserire un’immagine di sfondo Per inserire un’immagine come sfondo è sufficiente utilizzare la seguente sintassi: <body background="imgSfondo.gif"> Per ora presupponiamo che l’immagine di sfondo si trovi nella stessa cartella della nostra pagina HTML, vedremo in seguito (quando parleremo delle immagini) come inserire immagini che si trovano in altre cartelle. L’immagine di sfondo verrà ripetuta in orizzontale e in verticale. È anche possibile combinare i due attributi, in modo che mentre l’immagine di sfondo viene caricata, venga comunque visualizzata una colorazione della pagina: <body bgcolor="#0000ff" background="imgSfondo.gif"> Ecco subito un esempio di pagina impostata con lo sfondo. È importante assegnare sempre un colore alla pagina anche quando lo sfondo della pagina è bianco (al massimo assegnare bgcolor="#FFFFFF"). Infatti, come impostazione predefinita, il browser assegna alla pagina il colore di sfondo che l’utente ha impostato nella finestra del sistema operativo: quindi se l’utente ha impostato uno sfondo nero e voi non avete assegnato nessun colore di sfondo alla pagina, la vostra pagina sarà nera. Se usate Windows, per fare una prova provate a impostare diversamente il tema delle finestre. Dal pannello di controllo: Schermo > Aspetto > Combinazione e poi scegliere: "nero a contrasto elevato", oppure "prugna". Infine visualizzate questa pagina - che è senza sfondo – e vedrete che la pagina HTML prenderà la colorazione che avete impostato nel tema delle finestre. Eliminare i margini delle pagine Abbiamo detto all’inizio che il lavoro del webmaster consiste non soltanto nel conoscere alla perfezione il linguaggio HTML, ma soprattutto nell’essere un esperto del modo in cui i browser visualizzano le pagine. Negli esempi precedenti avrete notate che il browser – secondo l’impostazione predefinita - lascia un po’ di margine tra la pagina e il bordo della finestra. Questo in alcune situazioni (ad esempio se volete disporre un logo in alto a sinistra) può dare fastidio. Per eliminare il bordo è sufficiente inserire i seguenti attributi del body: <body leftmargin="0" topmargin="0"> Questa sintassi funziona correttamente con ogni browser moderno (Internet Explorer, Netscape 6 o superiore, Mozilla, Opera), come è possibile vedere nell’esempio. Tuttavia è bene sapere che i browser nel corso degli anni hanno introdotto dei tag e degli attributi "proprietari", con lo scopo di ottenere determinati effetti di visualizzazione, o indicare in qualche modo particolare il contenuto. Questa situazione capitava soprattutto nei primi anni del web, quando Microsoft e Netscape lottavano per il predominio del mercato: in qualche misura la guerra dei browser è stata anche guerra di tag proprietari, con gravi difficoltà per gli sviluppatori che si trovavano continuamente di fronte a pagine che non venivano visualizzate allo stesso modo. Per questo motivo fino a qualche anno fa per togliere il margine con Netscape 4.x dovevate inserire: <body marginleft="0" margintop="0"> Mentre per togliere il margine con Internet Explorer: <body leftmargin="0" topmargin="0"> Se avrete a che fare con pagine web di altri webmaster vi capiterà spesso di incontrare questo genere di sintassi: <body leftmargin="0" topmargin="0" marginleft="0" margintop="0"> Questa sintassi serviva per eliminare il margine sia con Netscape 4.x, sia con Internet Explorer, specificando tutti e quattro gli attributi. Al giorno d’oggi potete invece limitarvi a scrivere: <body leftmargin="0" topmargin="0"> Fortunatamente negli ultimi anni l’ottica della guerra dei browser è cambiata, e i produttori di software sono passati dalla competizione per chi implementa nuove e fantastiche funzionalità proprietarie, al tentativo di rilasciare browser che aderiscano al meglio agli standard del W3C (non è un caso che sia la Netscape, sia la Microsoft facciano parte del consorzio), senza perdere di vista la velocità nell’effettuare il rendering della pagina. L’adesione agli standard non può che essere un bene, dal momento che potenzialmente significa per noi sviluppatori la stesura di codice "universale", che funzioni correttamente a prescindere dal browser e dalla piattaforma (speriamo). Impostare la lingua del documento Tramite l’attributo "lang" è possibile specificare ai motori di ricerca e al browser dell’utente quale lingua stiamo utilizzando. La sintassi per la lingua italiana è: <body lang="it"> Questo attributo non è solo una proprietà del tag body, ma può essere riferito alla maggior parte dei tag HTML che vedremo (come paragrafi, blocchi, tabelle, eccetera). È importante sottolineare che questo attributo non carica automaticamente il set di caratteri necessari alla visualizzazione della lingua, ma si limita a specificare che il documento (o parte del documento) è nella lingua indicata. Si tratta di un attributo che vi sarà utile soprattutto se vi capiterà di sviluppare dei siti multilingua (e poi di doverli inserire nei motori di ricerca). Ecco il codice che esemplifica gli argomenti appresi finora in questa lezione, visualizzabile anche in questa pagina: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//IT"> Approfondimenti: lo sfondo con i CSS 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 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: <body style=" 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: <body style=" come si può vedere anche nell’esempio. |
