2- FAQ, TABELLE E COLORI
E rieccoci nuovamente qui a parlare di tag e ipertesti, ma
stavolta iniziamo a fare sul serio. Tanto per cominciare, può
essere utile rispondere ad alcune FAQ, sigla che nel mondo di
internet sta a significare "frequently asked
questions", o per i meno anglofili "domande più
ricorrenti". Perché in un articolo concepito e pubblicato
in Italia, facciamo i barbari e citiamo queste sigle inglesi? Per
due motivi: il primo è che Internet vi obbligherà a conoscere
un minimo di lingua inglese, il secondo è perché l'acronimo di
"domande più ricorrenti" è DPR, termine alquanto
impronunciabile e sicuramente meno comprensibile a chi già da
tempo scorrazza libero e bello per la grande Rete.
1) Che computer mi serve per impaginare su Internet?
Tenete presente una cosa: il processore non è di fondamentale
importanza, visto lo sforzo richiesto al computer un buon vecchio
486dx2/66 dovrebbe già essere più che sufficiente per tutti.
Ciò che conta veramente è la RAM a disposizione: per impaginare
su Internet dovrete tenere aperti, contemporaneamente, diversi
programmi. Il primo è certamente il browser (almeno uno dei due
che dovrete avere installato), il secondo è l'editor di testo
HTML, sia esso Hot Dog o Frontpage, il terzo è un applicativo
per fotoritocco, molto utile per abbattere la palette alle
immagini e salvarle in formato GIF, oppure anche per modificarne
le dimensioni, aggiungere la trasparenza o editare delle piccole
animazioni. Paint Shop Pro sarà molto probabilmente il compagno
di avventura che molto presto andrà ad aggiungersi alla vostra
allegra comitiva di applicazioni. Infine avrete bisogno di aprire
una o più sessioni del blocco note per fare le ultime modifiche
a una pagina precedentemente editata, che so, per aggiungere un
link "al volo" verso la pagina che state editando
adesso. Totale: 32 mega di RAM, un sistema operativo serio come
Windows 95 o NT, un hard disk da almeno 850 mega, e una bella
connessione a Internet.
2) Quando impagino, cosa devo guardare come prima cosa?
Le dimensioni "globali" della pagina che stiamo
editando, eseguibili linkati esclusi. Ricordiamoci sempre che la
visualizzazione da Internet sarà paurosamente lenta, se
confrontata a quella che possiamo goderci nell'intimità del
nostro hard disk: di conseguenza è inutile farcire i nostri
lavori con immagini da 125 kb l'una... Armatevi di Paint Shop Pro
e cercate un modo per limitare al massimo l'occupazione in byte
delle fotografie, salvandole in JPG con un indice di compressione
più elevato, oppure in GIF abbattendo la palette a soli 64
colori, o anche meno se la vostra immagine non ne necessita di
più. In giro ci sono anche dei filtri appositamente studiati
come il Photoimpact GIF/JPG Saver, che potrete trovare sul sito
Xenia ed utilizzare con programmi come Photoshop, tuttavia il mio
consiglio personale è quello d'imparare a memoria tutti i
trucchi di Paint Shop Pro: otterrete risultati a volta eclatanti.
Studiate poi la pagina in modo che le foto possano essere di
piccole dimensioni, e anche se esiste un attributo che permette
di visualizzarle cambiando dinamicamente altezza e lunghezza,
premunitevi di pazienza e "costruite" una versione
"preview" dell'immagine in questione. Usate poi la
coppia di tag <A HREF> per passare dall'una all'altra, non
è infatti detto che un tag del tipo <IMG
SRC="fotobella.jpg" LOW="fotobrutta.gif" ecc
ecc> possa funzionare sempre e con tutti i browser. Infine,
piuttosto che mettere un testo lunghissimo in un'unica pagina,
suddividetelo in più pagine HTML: sono comunque più veloci da
caricare.
3) Perché tutta questa attenzione alla
"grandezza" della pagina?
Semplicemente perché la pazienza dei visitatori è
inversamente proporzionale alla lentezza con cui la vostra pagina
verrà caricata. Quest'ultima, ahinoi, è direttamente
proporzionale alla lunghezza della pagina stessa. Per capirci, se
il mio browser deve visualizzare una pappardella da un megabyte,
e la pagina sta arrivando a 128 byte al secondo, dopo tre minuti
che il browser non visualizza niente, passo subito a cercare
qualcos'altro sulla rete.
4) Per ottenere una bella pagina, devo per forza
ricorrere alla ricchezza delle immagini?
Non è necessario. Ci sono riviste che, con pochissime
foto, riescono a confezionare veri e propri capolavori
d'impaginazione: se ci riescono loro, non si vede perché non
dovremmo riuscirci anche noi. I trucchi sono tanti: da un uso
sapiente dei font standard a quello dei colori, passando
ovviamente per le tabelle. Proprio questi sono gli argomenti di
questa puntata.
I COLORI DI INTERNET
Voi sapete cos'è la notazione esadecimale, vero? No, eh? Bhe,
temo proprio che dovrete impararla al più presto, altrimenti
potreste avere qualche piccolo problema a usare il computer:
tantissime applicazioni, infatti, usano questo tipo di notazione
in luogo di quella decimale, poiché per il computer ragionare in
base 16 può essere più facile che in base 10. Se non avete
neppure la più pallida idea di ciò che sto dicendo, mettiamola
così: immaginate di avere 8 dita per ogni mano, e per contarle,
partendo dal pollice della prima per arrivare al mignolo della
seconda (il mignolo ovviamente rimane l'ultimo dito, in questo
caso l'ottavo), le contaste così: 1, 2, 3, 4, 5, 6, 7, 8, 9, A,
B, C, D, E, F e 0 (zero). Le ultime 6 cifre, quelle dal 10 al 15,
sono scritte come le prime lettere dell'alfabeto. Lo zero lo
abbiamo messo alla fine solo per comodità: in esadecimale, il
numero 16, si rappresenta proprio come come il 10 decimale, con
un 1 a rappresentare la decina, e lo 0 a rappresentare l'unità.
In esadecimale, 10-1=F, dove F sta appunto per 15, così come nel
sistema metrico decimale, 10-1=9, dove 9 è l'ultima unità
"semplice". Quindi, per convertire le cifre da
esadecimale a decimale, basta seguire il solito ordine da destra
verso sinistra: 2F3 significa 3 x 16^0 + 15 x 16^1 + 3 x 16^2,
ovvero 755. Lo stesso 755, infatti, in decimale potremmo
suddividerlo in 5 x 10^0 + 5 x 10^1 + 7 x 10^2. So di non essere
stato chiarissimo, ma non è colpa mia se alle elementare
insegnano solo a contare in base 10, e poi l'informatica ci
costringe a ragionare in base 16. Fate un piccolo sforzo, e
vedrete che non è difficile capirlo.
Tornando comunque a bomba sul discorso "colori", questi
sono scritti in HTML come combinazione dei tre componenti
fonamentali Rosso, Verde e Blu (RGB). Più alto è il valore che
li contraddistingue, maggiore importanza avrà l'ingrediente nel
colore risultante. Internet Explorer facilita il compito di
assegnare i colori riconoscendone alcunoi per nome, tipo
"red", "yellow", "grey", ecc,
peccato che la controparte Netscape non lo sappia fare, ragion
per cui conviene sempre utilizzare la notazione che studieremo
adesso. L'HTML riconosce una palette di 24 bit, ovverosia
256x256x256 colori, all'incirca 16 milioni. Ogni colore è
suddiviso in una "triade" di 8 bit per ogni componente
fondamentale, per cui avremo tantissime combinazioni del tipo
RRGGBB, dove RR GG e BB possono assumere un velore tra 00 (zero)
e FF (255). Il bianco, che si ottiene assegnando la massima
luminosità a tutte e tre le componenti fondamentali, sarà
FFFFFF, mentre il nero, al contrario, 000000. Il rosso puro sarà
FF0000, il verde 00FF00 e il blu 0000FF. I colori più semplici
da ottenere sono dunque il giallo (massima luminosità di rosso a
verde, FFFF00), il propora (rosso e blu, FF00FF) e il ciano
(verde e blu, 00FFFF). Il grigio sarà ottenibile con tutti i
valori intermedi (888888), e così via... Due colori sono detti
"predefiniti", e vengono assegnati direttamente nel tag
corpo della pagina, gli altri sono modificabili attraverso una
serie di attributi. vediamo come.
<BODY bgcolor="#FFFFFF"
text="#000044">
Modificherà la nostra pagina in modo che sia bianca di fondo, e
il suo testo sia blu scuro. Provate a modificare i due valori a
piacimento, e vedrete che capire la logica dei colori sarà molto
più facile che lo stesso esadecimale, che pure dovrete
utilizzare. Inserendo il parametro BACKGROUND, è possibile
inserire un'immagine come sfondo. Esiste l'attributo COLOR, che
servirà a cambiare il colore del testo dinamicamente, se
accoppiato al tag FONT.
...vi garantiamo che <FONT COLOR="#FF0000">
questa </FONT> è la soluzione migliore...
ad esempio, visualizzarà la parola "questa" con un bel
rosso fuoco. Notate anche che la modifica del colore rimarrà
attiva solo finché sarà valido il tag FONT. Quest'ultimo, può
accettare anche l'attributo SIZE, che permette un cambio rapido
delle dimensioni del carattere da 1 (minime) a 5 (massime).
Provate per esempio a inserire:
...vi garantiamo che <FONT COLOR="#FF0000"
SIZE=5> questa </FONT> è la soluzione
migliore...
otterrete un "questa" ancora più evidente. Internet
Explorer accetta poi anche l'attributo "face", che
permette di usare gli altri font truetype eventualmente
installati nel sistema. Potete però dimenticarvi della corretta
visualizzazione della vostra pagina, nel momento in cui un
visitatore 1) non avesse installati i font in questione o 2)
usasse un altro browser. Meglio dunque usare solo i font
cosiddetti "standard" usando i tag inizialmente
concepiti per questo scopo (li abbiamo visti il mese scorso). Il
tag FONT ha poi l'indiscutibile vantaggio di non andare a capo
nel momento in cui cambiassimo le dimensioni al carattere,
pessima abitudine che ha da sempre accompagnato i tag del tipo
<Hx> e </Hx> (con x compreso tra 1 e 5) fin dalla
prima versione di Mosaic.
BOX E TABELLE
Vaniamo così a un altro elemento di fondamentale importanza per
il mondo delle pagine web, ovvero l'uso del tag <TABLE> e
di tutti quelli annessi. Vogliamo capire esattamente come
funziona questo misterioso comando, da sempre spina nel fianco di
generazioni di htmllisti? (esagera!) Disegnamo allora un bel
quadrato, e scriviamoci in mezzo "table". Di cosa è
composto il quadrato? Di due lati orizzontali e due verticali. Su
quello orizzontale in alto, scriviamoci <TR>, su quello in
basso, </TR>. Ora, sul lato verticale a sinistra
scriviamoci <TD> e su quello a destra <TD>. Solo
questo, dovrebbe farvi capire il funzionamento di una tabella a
cella singola.
La prima cosa che dovremo dichiarare è, appunto, l'apertura di
un tabella, e lo faremo col tag TABLE. Questo tag accetta alcuni
parametri quali BORDER (dimensione in pixel della cornice),
BORDERCOLOR (colore di base della cornice, utile solo con
Internet Explorer), BGCOLOR (colore di fondo della tabella, utile
per creare veri e propri box come quelli comunemente pubblicati
nelle riviste cartacee) e WIDTH (larghezza in pixel o in
percentuale rispetto alla pagina). Poi dovremo dichiarare le
righe con <TR> e <TR> e, infine, quelle verticali con
<TD> e </TD>. A esempio, se volessimo disegnare una
cosa del tipo
A B
C D
con tanto di bordino, dovremmo fare così:
<CENTER>
<TABLE BORDER="1" ALIGN="center">
<TR>
<TD> A </TD>
<TD> B </TD>
</TR>
<TR>
<TD> C </TD>
<TD> D </TD>
</TR>
</TABLE>
</CENTER>
L'esempio dovrebbe essere autoesplicativo, io l'ho scritto in
questa forma in modo fa renderlo più intelliggibile, tuttavia
potevo anche scriverlo così:
<CENTER><TABLE
BORDER="1" ALIGN="center">
<TR>
<TD> A </TD><TD> B </TD>
</TR><TR>
<TD> C </TD><TD> D </TD>
</TR>
</TABLE></CENTER>
tanto sarebbe stata la stessa cosa. La tabella che ho qui sopra
costruito ha dimensioni del tutto dinamiche, cambiano, cioè, col
variare delle dimensioni dei caratteri e con quelle della
finestra del browser. Tuttavia posso fissare il tutto aggiungendo
un attributo WIDTH al tag <TD>. Esistono poi alcuni
parametri interessanti per il tag <TR> tra cui il più
utilizzato è certamente VALIGN: dovete infatti sapere che i
browser, di default, centreranno verticalmente il contenuto di
due celle che si trovano sulla stessa riga, ma in determinate
occasioni potrebbe servirci che il medesimo fosse visualizzato
alla stessa altezza. Come fare dunque? Semplicemente modificando
i <TR> in <TR VALIGN="top">. Il parametro
VALIGN accetta anche i valori "center" e
"bottom". Anche le celle possono assumere colori di
fondo propri.
Per distanziare le celle o il contenuto delle medesime dal bordo,
si usano poi i parametri CELLSPACING e CELLPADDING, i cui valori
vanno dichiarati all'apertura della tabella, nel tag
<TABLE>. E' buona norma, quando si desidera affiancare due
box, ricorrere all'annidiamento delle tabelle piuttosto che
all'eccessiva personalizzazione delle celle. Benché non esistano
ancora delle procedure "standard", infatti, è il
sistema che più browser riconoscono e visualizzano
correttamente. Come fare? Semplicemente, sostituiamo ad A, B, C e
D degli esempi sopra, delle altre strutture di tipo TABLE. Per
vedere come si fa, collegatevi a Zzap! sul nostro sito Xenia
e leggete il codice di una recensione: è infatti il miglior
sistema per capire come più tabelle vadano annidiate l'una
nell'altra. E' proprio in queste occasioni che si comprende
l'importanza dell'ordine e della pulizia, quando si sta scrivendo
una pagina in codice HTML, visto che confondere la riga di una
tabella annidiata con quella di un tabella "ospitante"
può essere dannatamente facile!
TABELLE E COLORI
Attenzione quando cambiate i colori di fondo e del testo di una
tabella, perché un browser ancora diffuso come Netscape 2.0,
più molti altri per sistemi operativi diversi da Windows,
possono avere qualche difficoltà a riconoscere il colore di
fondo. Un trucco per ovviare al problema, consiste nell'usare un
colore per il testo che sia leggibile anche con lo sfondo
principale. Internet Explorer permette inoltre di specificare
un'immagine di fondo per la tabella, esattamente come avviene per
il resto della pagina (tramite il parametro background, da
specificare nel tag <TABLE>), ma questo non verrà letto da
Netcape Navigator che, purtroppo, non prevede ancora oggi questa
possibilità. Anche qui, esiste una scappatoia che consiste nel
specificare comunque un colore di fondo, possibilmente molto
simile a quello "principale" dell'immagine che avremmo
altrimenti scelto. E' poi anche possibile, con Internet Explorer,
specificare un colore diverso per i lati chiari e scuri del bordo
di una TABLE, ma vi assicuro che, a meno che utilizziate un
editor wysiwyg come FrontPage, questa pratica si tramuterebbe
solo in un inutile spreco di parametri e di conversioni in
esadecimale.
CONCLUSIONI
In una tabella potete dunque inserire ciò che vorrete, a vostro
piacimento: fate solo la massima attenzione a non annidiare male
i <TR> e i <TD>, poiché il risultato potrebbe essere
bizzaro e diverso ogni volta, anche a seconda del browser che
utilizzerete per osservere il "prodotto finale". Anche
qui, si tratta di fare molta pratica. Come "compito a
casa" (credevate me ne fossi dimenticato, eh? e invece no!!)
vi lascio quello di cercare sulla rete altre informazioni sulle
table (tranquilli, ce ne sono!) e di farle vostre, provando e
riprovando tutte le combinazioni possibili. Noi ci rileggiamo
puntuali il mese prossimo.