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"><img src="paolone.gif"
align="left" hspace="0" width="86" height="87"></td>

<td bordercolor="#FFFF00" bgcolor="#FFFF00">PROPOSTA
PER I BENCHMARK DEL 2000
</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.

Hardware,
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!
<hr>

Questo era il cappello introduttivo, che per questioni stilistiche ho preferito enfatizzare () o, per usare una terminologia a cui fin qui siamo stati abituati, ho messo in corsivo (avrei potuto usare anche il tag , 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 <img src= "H.gif" align=top> ecc ecc.

<table border="0" width="100%">
<tr>

<td align="center" valign="top" bgcolor="#008080">C</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>VELOCITA'
DI ELABORZIONE</li>
</ul>
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.
 
<ul>
<li>AFFIDABILITA'</li>
</ul>
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.
 
<ul>
<li>SOLIDITA'</li>
</ul>
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.
</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   che altro non fa che inserire un carattere ‘nullo’ (&nbsp) di dimensioni pari a 4. Volendo, avremmo potuto benissimo utilizzare anche i line break ( ) 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> </td>.

<hr>
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...

Paolo Besser 

</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 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 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: M---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]