aprile 2003
HOME  |  INDICE  |  CORSI  |  DIZIONARIO  |  ABBONAMENTI  |  SITO  |  HELP
 
   
  CORSI OPENMASTER
  MUSICA DIGITALE  
  WEBMASTER  
 
Lezione 1  
Lezione 2  
Lezione 3  
Lezione 4  
Lezione 5  
Lezione 6  
Editor HTML  
Esercizi  
Risorse  
 
  WINDOWS EXPERT  
 
 

Stile e struttura

 

3. Gestire gli spazi nel testo

Tutti i browser hanno una caratteristica in comune: generare una presentazione del contenuto che sia adatta al tipo di computer su cui stanno funzionando, interpretando a proprio modo le informazioni della pagina ed eliminando il superfluo o ciò che credono tale. In effetti il Web è nato in un contesto accademico dove crediamo che gli autori fossero più concentrati sull'informazione che volevano trasferire che non sulla sua forma e c'era l'esigenza di garantire che un testo composto su un tipo di computer rimanesse comprensibile anche quando trasferito altrove. Mancando di qualsiasi funzioni tipografica nella versione 1.0 e 2.0 di HTML, l'unico modo disponibile per impaginare le informazioni consisteva nell'allineare i vari elementi all'interno della colonna di testo usando spazi multipli, spazi che possono essere usati come rientro per le righe di un paragrafo oppure come distanziatori tra le voci di un indice e i numeri di pagina all'altro estremo della riga.

Il problema è che tali spazi possono cambiare dimensione quando mostrati su computer diversi con font differenti e tutti gli allineamenti costruiti in origine dall'autore finiscono per scombinarsi creando confusione anziché aiutare la comprensione del contenuto, inoltre molti "scrittori" non professionali inseriscono distrattamente due o tre spazi tra le parole mentre le digitano, presentando un documento che ha un aspetto trasandato.

Al fine di prevenire tali inconvenienti e filtrare gli errori, tutti browser eliminano automaticamente qualsiasi spazio aggiuntivo e richiedono all'autore di specificare un particolare tipo di entità nel caso voglia avere una serie di spazi consecutivi, rendendolo in tal modo consapevole che si tratta di una soluzione particolare di cui si assume piena responsabilità. Tale entità prende il nome di spazio unificatore (non breaking space) e si scrive   all'interno della pagina HTML (ripetendolo per ogni singolo spazio). Lo spazio unificatore svolge tre funzioni: impedisce la separazione di due parole in fine di riga per effetto del ritorno a capo automatico eseguito dal browser, blocca una cella di tabella oppure un paragrafo mostrando al browser che non sono vuoti e perciò non possono essere eliminati in automatico, inserire spazi consecutivi multipli all'interno del testo per creare rientri e spaziature impossibili con gli spazi convenzionali. È chiaro che anche lo spazio unificatore non risolve il problema delle diverse dimensioni che possono essere attribuite ai caratteri, e perciò agli spazi, al variare del tipo di computer.

Per tale motivo HTML prevede una serie di altri marcatori che indicano al browser di utilizzare un carattere monospaziato alias testo a spaziatura fissa. Si tratta di un termine preso a prestito dal mondo della tipografia e indica un particolare font dove tutti i caratteri, indipendentemente dalla loro forma e dal fatto che siano maiuscoli o minuscoli occupano tutti lo stesso spazio, corrispondente di solito a quello necessario per il carattere più largo dell'alfabeto usato (la M maiuscola). Lo stesso spazio viene naturalmente occupato anche dai singoli segni d'interpunzione e dagli spazi eventualmente presenti perciò gli allineamenti verticali tra righe diverse vengono garantiti perfettamente indipendentemente dal contenuto di ciascuna di esse.

Il prezzo che si paga è di avere un testo goffo e sgradevole a vedersi e perciò anche difficile da leggere. In effetti, la scelta di attribuire una spaziatura diversa ai vari caratteri tipografici serve proprio a facilitarne la lettura, su carta e a video, e a fornire una certa armonia estetica. Se osservate una pagina di giornale noterete che la i minuscola occupa meno spazio in orizzontale rispetto alla j e rispetto alla M o T maiuscole. Questo genere d'impostazione prende il nome di spaziatura proporzionale. I caratteri monospaziati vengono di solito utilizzati solo per rappresentare listati di programma, brevi elenchi o altri brani di testo brevi dove gli allineamenti siano più importanti dell'omogeneità visiva e dove, semmai, sia opportuna una netta distinzione rispetto alla parte principale del testo.

Il marcatore storico usato per questo genere di funzione è <pre> che definisce un testo "preformattato", tipicamente usando il font courier a spaziatura fissa e inserendo una riga vuota prima e dopo il brano compreso tra i due tag. È stato deprecato dalle specifiche HTML 4.01 perché si tratta di un markup fisico (stilistico) e non logico (strutturale), inoltre non funziona in maniera omogenea in tutti i browser.

Ha il pregio di mantenere qualsiasi indicazione di formattazione contenuta nel testo originale, compresi spazi multipli, ritorni a capo nel testo e lunghezza delle righe. Dispone di un singolo attributo facoltativo, witdh, che determina il numero massimo di caratteri, spazi inclusi, che possono comparire su una riga e forza il ritorno a capo al superamento di tale valore (l'attributo width non è supportato da Internet Explorer 6.0 mentre funziona ancora in Netscape 7.0). Il marcatore <pre> riconosce e riproduce anche eventuali grassetti e corsivi presenti nel testo.

È sicuramente il più flessibile tra i marcatori per la generazione di testo monospaziato ed è molto utile quando si devono riconvertire per il Web documenti che sono già stati impaginati con un wordprocessor e non vale la pena rimaneggiarli daccapo. È l'unico che conservi integralmente il contenuto originale e non è possibile riprodurne la totalità delle funzioni nemmeno con i fogli di stile (che non conservano gli spazi multipli e i ritorni a capo).

Esistono diversi altri markup fisici e logici che producono testo monospaziato, elencati per comodità nella tabella "Marcatori per formattare il testo" all'interno dell'articolo "Markup fisici e logici" e di cui riportiamo le caratteristiche dettagliate sul CD all'interno del documento "Prontuario dei tag di testo". Tra i marcatori riportati in tabella, segnaliamo comunque <blockquote> che consente di produrre blocchi di testo evidenziati all'interno del documento principale mediante un rientro su entrambi i lati.

Tra l'altro, <blockquote> è l'unico marcatore HTML a consentire la nidificazione di se stesso, vale a dire che potete inserire diversi <blockquote> uno dentro l'altro al fine di produrre rientri sempre più profondi, usando una sintassi del tipo <blockquote>Primo rientro <blockquote>Secondo rientro </blockquote></blockquote>. Il problema di questo approccio è che richiede l'impiego di un marcatore strutturale, nato per evidenziare delle citazioni, per uno scopo stilistico che in origine non era previsto. Quando un motore di ricerca passa in esame le pagine dove <blockquote> è stato utilizzato unicamente per produrre un rientro, codificherà come citazione qualcosa che non lo è affatto. Lo stesso effetto può essere prodotto più efficacemente e con maggiore accuratezza usando i fogli di stile in cascata.

Mantenere la formattazione originale di un documento
Qui vediamo il marcatore <pre>all'opera. Nel primo riquadro in alto compare il testo originale scritto con Word dove mettiamo in evidenza gli spazi e i ritorni a capo generati con il wordprocessor. Subito sotto notiamo come lo stesso brano di testo si trasformi quando copiato direttamente in una pagina HTML: gli spazi multipli e i ritorni a capo scompaiono, producendo una singola riga ininterrotta e illeggibile (grassetto e corsivo nella pagina Web devono naturalmente essere aggiunti con marcatori ad hoc). Proviamo ora a copiare lo stesso brano, inserendolo nella coppia di tag <pre> e </pre>. Otteniamo nuovo il formato originale, visualizzato con un carattere courier a spaziatura fissa invece del Times a spaziatura proporzionale scelto di default dal browser.


Clicca per ingrandire
Il documento completo che contiene il codice HTML per produrre questo esempio è disponibile col nome Testo preformattato >

  < Precedente   Prossimo >

 

Corso - Webmaster
 
  Prima lezione:
  Competenze e strumenti
  Seconda lezione:
  Siti statici e linguaggio HTML
  Terza lezione:
  Modelli di pagina e tabelle
  Quarta lezione:
  HTML 4.01 e CSS
1. Stile e struttura
  1. Markup fisici e logici
  2. Il deprecato tag font
  3. Gestire gli spazi nel testo
2. Gli standard dell'editoria sul Web
3. CSS e HTML 4.01
  1. Cosa si può fare coi fogli di stile
  2. Ereditarietà e innesco a cascata
  3. Proprietà di trasferimento dei parametri
  4. Regole di ereditarietà
  5. Quattro tipi di CSS
  6. Selettori di classe
4. I colori del Web
  1. Websafe palette
5. Gestire le immagini
6. Esercizi
  Quinta lezione:
  Design e multimedialità
  Sesta lezione:
  Siti interattivi

 Copyright© PC Open - 2002 - 2003

Credits