4- LA GIUSTIFICAZIONE DEL TESTO
Osservate attentamente la pagina che potete ragiungere
cliccando QUI: si tratta di un mio
recente articolo di opinione convertito in HTML e impaginato in
modo tale da essere perfettamente incolonnato, con un cappello e
un piede. Lo scopo di questa lezione, manco a dirlo, sarα
spiegare come vanno giustificati i testi in modo che possano
essere leggibili e nel contempo belli da vedere. Come potete
notare, nel testo non ci sono nΘ hyperlink nΘ immagini di
sorta, mi sono giusto permesso il vezzo d’inserire una mia
fotografia accanto al titolo, e solo allo scopo d’inserire
una qualche immagine. Quando impaginate, infatti, tenete sempre
presente che l’HTML non Φ nato originariamente per
incolonnare i testi, e che le soluzioni adottate da Netscape per
ovviare al problema, purtroppo, non sembrano aver ottenuto molto
successo presso la concorrenza. Difficilmente, infatti, vedrete
il tag <MULTICOLS> funzionare anche su Internet Explorer e,
dato che la diffusione di questo browser sembra inarrestabile, mi
sembra scontato da parte vostra il non-utilizzo di questa
istruzione. Al contrario, il metodo pi∙ efficace per incolonnare
i testi Φ l’uso (che ormai dovreste conoscere a menadito)
delle <TABLE>, solo che anche qui dovrete fare attenzione a
"dosare bene" il quantitativo di testo da immettere su
ogni colonna. L’idea, fondamentalmente, Φ che si debba
cercare una risoluzione "standard" alla quale la pagina
debba essere consultata. Inutile aggiungere che in questo caso la
800x600 sia quella che attualmente va per la maggiore, vista
l’ormai dichiarata obsolescenza della 640x480 presso la
maggior parte degli utenti di Windows. Teniamo poi presente che
molti internauti viaggiano sulla Rete tramite delle costosissime
workstation universitarie, e di solito l∞ le risoluzioni
abbondano. Come sempre, dobbiamo ricordarci cosa intendiamo
esattamente fare, a chi Φ rivolto il nostro messaggio, e su
quale tipo di pubblico preferiamo fare buona impressione.
Mettiamo una casistica generale: il distinto professionista che
capisce poco di Internet, e che lavora col 486 che ha in ufficio.
Il monitor Φ ovviamente un vetusto 14 pollici, ma per fortuna il
nostro lettore Φ stato abbastanza sveglio da cambiare la
risoluzione. In questo caso, vogliamo ottenere una pagina molto
simile a quella che vedete nella strisciata a fianco, col testo
che collimi perfettamente e con un paio di righe orizzontali che
dividano tra di loro corpo dell’articolo, cappello e
conclusione. Vediamo un po’ di studiare quali operazioni
sono necessarie per ottenere questo tipo di risultato.
<html>
<head>
<meta http-equiv="Content-Type"
content="text/html; charset=iso-8859-1">
<meta name="GENERATOR" content="Paolone's
brain">
<title>PROPOSTA PER I BENCHMARK DEL 2000</title>
</head>
Fino qui, non dovrebbe esserci nulla di nuovo: si tratta della
solita intestazione HTML che dovreste ben conoscere. Tuttavia da
oggi inseriamo un nuovo elemento, ovvero la dichiarazione del
tipo di documento HTML (text) e il set di caratteri da esso
utilizzato. A dire il vero questo non influirα notevolmente
sulla visualizzazione della pagina, anzi, in ambito nazionale non
vedremo la benchΘ minima differenza tra questa e una normale
intestazione formata dalla sola coppia di tag <HEAD> e
<TITLE>. Tuttavia, la dichiarazione di questi elementi
potrα rivelarsi di vitale importanza dall’altra parte del
pianeta e, perchΘ no, man mano che l’evoluzione dei browser
ci obbligherα ad essere sempre pi∙ precisi nella redazione
delle nostre pagine.
<body bgcolor="#FDD3A6" topmargin="10"
leftmargin="10">
La prima parte del tag corpo dovreste conoscerla molto bene,
visto che i colori sono stati al centro di un’intera puntata
di questo corso. Impariamo quindi cosa significhino i due
parametri topmargin e leftmargin: servono a stabilire quanti
pixel di margine superiore e laterale debba avere il contenuto
della nostra pagina rispetto alla finestra reale del browser.
Settare a zero questi due parametri, equivale a far apparire
tabelle, scritte e bottoni direttamente a contatto dei pulsanti o
delle barre di scorrimento del nostro visualizzatore. Questi
parametri appartengono alla cateogira degli
"style-sheet", ovvero una convezione a cui in un
prossimo futuro tutti i browser dovranno attenersi.
<table border="1"
cellpadding="0" cellspacing="0"
bordercolor="#FFFF00">
<tr>
<td bordercolor="#FFFF00"><font
color="#0000FF" size="6"
face="Garrison Sans"><strong><u><img
src="paolone.gif"
align="left" hspace="0" width="86"
height="87"></u></strong></font></td>
<td bordercolor="#FFFF00"
bgcolor="#FFFF00"><p
align="right"><font
color="#0000FF" size="6" face="Garrison
Sans"><strong><u>PROPOSTA
PER I BENCHMARK DEL
2000</u></strong></font></p>
</td>
</tr>
</table>
Questa tabella serve a creare la fascetta gialla in cui ho
inserito il titolo e la mia fotografia. Inserire un bordo largo
un pixel, e azzerare lo spazio interno e tra le celle,
permetterα agli utenti di Internet Explorer di vedere una sorta
di "fascia unica" con un semplice bordino attorno alla
mia fotografia, mentre invece gli utenti di Navigator
continueranno ad apprezzare il solito bordo tridimensionale
imposto loro dalla Netscape, anche se ovviamente sarα pi∙
sottile del solito. Si noti che solo la seconda cella (delimitata
dai tag <TD>) ha impostato un colore di sfondo (bgcolor):
se lo avessi messo anche alla prima, la mia foto sarebbe apparsa
con uno sfondo giallo, visto che "paolone.gif" Φ una
GIF trasparente. Evitare il bgcolor, al contrario, mi Φ servito
per lasciare invariato in quella cella il colore di fondo
preimpostato per tutta la pagina, all’interno del tag
<BODY> poche righe pi∙ sopra.
<p><font
size="7"><strong>H</strong></font><font
size="2"><em>ardware,
questo sconosciuto. Vi Φ mai capitato di osservare la vetrina di
...................................
d'ideogrammi riassuntivi e di comparazioni tecniche fra pi∙
prodotti. Semplice, direte voi. Col cavolo, rispondo
io!</em></font></p>
<hr>
Questo era il cappello introduttivo, che per questioni
stilistiche ho preferito enfatizzare (<em>) o, per usare
una terminologia a cui fin qui siamo stati abituati, ho messo in
corsivo (avrei potuto usare anche il tag <I>, forse a voi
pi∙ noto). Fa eccezione la sola H iniziale, che ho inserito come
capolettera. Purtroppo non c’Φ modo di far apparire il
testo immediatamente successivo allineato al di sopra della linea
di base, ma anche qui Φ possibile ricorrere a un trucchetto:
basterebbe disporre di un’ipotetica immagine
"H.gif" da usare come capolettera, e modificare la
prima riga in <p><img src= "H.gif"
align=top><font size= "2"> ecc ecc.
<table border="0"
width="100%">
<tr>
<td align="center" valign="top"
bgcolor="#008080"><font
color="#FFFF00" size="7" face="Courier
New"><strong>C</strong></font></td>
Questa table sarα divisa in tre celle di cui la prima sarα
praticamente una sorta di "capolettera permanente",
ovvero quella fascetta verticale verdina che vedete alla sinistra
del testo. Il parametro valign ci assicura che il testo presente
nella cella partirα immediatamente sotto il lato orizzontale in
alto della tabella. Per il resto, capeggia una C in font courier
new di massima dimensione (size="7").
<td valign="top"
width="48%">apiamoci, io sono sempre
stato del parere che l'informatica debba semplificarsi e
...............................
ecc. DopodichΘ, l'hardware che giunge in redazione per
le Prove (obbligatoria la P maiuscola), andrebbe
sottoposto ai seguenti test:</td>
Questa Φ in sostanza la prima colonna, non credo vi sia molto da
aggiungere. Quella che segue, invece, Φ la seconda (geniale eh?
Davvero non l’avreste mai detto...). Come potete notare,
entrambe hanno impostata come larghezza "relativa" il
48% della finestra del browser. Questo permette alle due colonne
di conservare la medesima dimensione anche qualora
massimizzassimo il browser a 1600x1200 pixel! 48+48 fa per≥ 96.
E’ lampante che, senza dire nulla, il browser assegni il
restante 4% alla prima cella, quella con la C gialla su sfondo
verde. Volendo, tra le due colonne potremmo anche inserire uno
spazio aggiungendo una "quarta" cella, semplicemente
inserendo qui i tag <TD></TD>.
<td valign="top"
width="48%"><ul>
<li><font color="#FF0000"
size="4"><strong>VELOCITA'
DI ELABORZIONE</strong></font></li>
</ul>
<p><font size="2">Ne abbiamo le palle piene
di sentire
parlare di bus messi a confronto, di megabyte che
..............
tra l'esecuzione dello stesso gioco Microforum (quelli
metterebbero alla prova anche un P8 a 3.500Mhz...), di
Quake, di Pod, di quel che si vuole.</font></p>
<p><font
size="2"></font> </p>
<ul>
<li><font color="#FF0000"
size="4"><strong>AFFIDABILITA'</strong></font></li>
</ul>
<p><font size="2">Qui non bisogna essere
dei geni: cos∞
come arriva il computer, vi s'installi sopra Windows 95.
...............
soprattutto alla cioccolata, senza obbligarci a comprare
una tastiera nuova, Φ davvero una gran bella
macchina.</font></p>
<p><font color="#FF0000"
size="4"><strong></strong></font> </p>
<ul>
<li><font color="#FF0000"
size="4"><strong>SOLIDITA'</strong></font></li>
</ul>
<p><font size="2">I computer portatili
dovrebbero essere
RIGOROSAMENTE sottoposti a questa pratica a prima vista
barbarica: una bella caduta dal tavolo. Ovviamente senza
...............
non si spezza nessun piedino, se il computer continua a
funzionare, si proceda pure all'acquisto.</font></p>
</td>
</tr>
</table>
Si noti come nella seconda colonna si sia utilizzato un font pi∙
piccolo come dimensioni, e come i vari paragrafi siano stati
separati fra di loro utilizzando il tag <p><font
color="#FF0000"
size="4"><strong></strong></font> </p>
che altro non fa che inserire un carattere ‘nullo’
( ) di dimensioni pari a 4. Volendo, avremmo potuto
benissimo utilizzare anche i line break (<BR>) che
conoscevamo benissimo. Ma imparare qualcosa di nuovo non fa mai
male. E’ consigliabile utilizzare questa sorta di separatore
anche quando si crea una cella verticale vuota come spazio tra
una colonna e l’altra. Insomma, una cella di questo tipo
(che io vi ho consigliato d’inserire prima), andrebbe cos∞
codificata: <td><p><font color="#FF0000"
size="4"><strong></strong></font> </p></td>.
<hr>
<p><font size="2"><em>E allora, che
ne dite dei miei
personalissimi "paulmark"? "Quake ci
gira pi∙
veloce del 15%", "la scheda video Φ del 5%
pi∙ veloce
..................................
vicina all'istante". E poi potrete entrare felici dal
negoziante, sicuri di aver fatto un buon
acquisto...</em></font></p>
<p align="right"><font
size="3"><em><strong><u>Paolo
Besser</u></strong></em></font><br>
</p>
</body>
</html>
Direi proprio che queste ultime righe non hanno bisogno di
ulteriori commenti, visto che si tratta semplicemente del
"piede" finale (enfatizzato per motivi di simmetria
come il cappello) e della mia firma finale, posta a destra, in
grassetto, sottolineata ed egualmente enfatizzata...
LASCIARE SPAZI VERTICALI
Abbiamo detto, fin dalla prima puntata di questo corso, che
inserire pi∙ spazi orizzontali tra una parola e l’altra ci
Φ intimamente impedito dalla natura stessa dell’HTML, che
sarebbe altrimenti fin troppo sensibile alle soluzioni adottate
dai programmatori per rendere pi∙ facile la localizzazione di
ogni singolo elemento della pagina. Si pensi infatti alle tabelle
annidiate tra di loro: una codifica del tipo:
<table>
<tr><td>
<table>
<tr><td>
<table>
..........
</table>
</td></tr>
</table>
</td></tr>
</table>
Φ certamente pi∙ comoda da leggere che non se tutti i tag in
questione fossero stati dati uno di seguito all’altro, come
segue:
<table><tr><td><table><tr><td><table>..........</table></td></tr></table></td></tr></table>
ragion per cui, se solo i browser si permettessero di leggere
pi∙ spazi come siamo solitamente abituati negli editor di testo,
andrebbe a finire che combineremmo solo macelli indecifrabili e
il nostro codice, per quanto pi∙ compatto e veloce da scaricare,
sarebbe assolutamente inintelligibile. Va anche detto, tuttavia,
che il browser ignora anche i ritorni a capo che non siano
espressamente dichiarati tali con il tag <br> o con
l’uso di paragrafi "nulli" (il tag che avevamo
visto prima). Per cui, se volete andare giα di cinque righe,
dovrete per forza inserire cinque <br> uno di seguito
all’altro.
E se invece volessimo priprio inserire cinque spazi tra le
lettere per distanziarle come vorremmo? Il sistema pi∙ facile,
Φ "nascondere" dei caratteri impostando loro un colore
esattamente identico a quello di fondo. Per esempio, se in una
pagina interamente nera volessimo inserire la seguente stringa
M A G I C A J U V E
Dovremmo innanzitutto trasformare gli spazi in barrette (- o _),
e poi colorarli di nero: <font color=
"#ffffff>M</font><font color=
"#000000">---</font><font color=
"#ffffff">A ecc ecc ecc... come sistema mi rendo
perfettamente conto che sia terribile, ma purtroppo sembra essere
l’unica soluzione. A meno che non volessimo inserire dei
caratteri nulli tra uno spazio e l’altro. Occhio, in ogni
caso, a non generare confusione con eventuali fondini
multicolore. Altra soluzione intelligente, potrebbe essere quella
di creare una tabella orizzontale con 20 caselle a spaziatura
fissa (5% ciascuna) in cui poi inserire le lettere. E’ a
questo punto, purtroppo, che possiamo dichiarare MORTO questo
corso di HTML: per fare queste cose, anche se tutto Φ in teoria
possibile con la dovuta pazienza, risulta essere molto pi∙
pratico l’utilizzo di un editor wysiwyg come Frontpage 97 o
Netscape Composer. Lavorare con le tabelle o con i continui
cambiamenti di colore, infatti, renderebbe nevrotico qualsiasi
programmatore HTML.
CONCLUSIONI
A questo punto dovreste essere in grado di giustificare
correttamente tutti i vostri testi: il mese prossimo vedremo di
aggiungere qualche ‘chicca’ in pi∙ ad uso e consumo di
chi, invece di Internet, preferisce diffondere le proprie pagine
HTML su CD-ROM dimostrativi e/o promozionali...
[indice]