Corso di HTML

Formattazione logica della pagina

 

L’ultima volta abbiamo lasciato in sospeso la specifica di BR che è la seguente:

<BR [clear=left | right | all]> ... Testo che va a capo.

Si può notare che BR non ha un tag di chiusura (d’altronde a cosa potrebbe servire?), mentre l’attributo clear indica il modo in cui il testo si dispone sotto un’immagine che è allineata a destra o a sinistra dello schermo.

Ad esempio se l’immagine è allineata al bordo sinistro, l’attributo clear=left fa si che il testo venga disposto sotto l’immagine sul margine sinistro, mentre senza viene disposto alla destra dell’immagine; per clear=right vale lo stesso discorso per le immagini allineate a destra, mentre clear=all vale come entrambe le combinazioni.

Altro tag utile in varie circostanze è quello del testo preformattato <PRE> ed ha la seguente sintassi:

<PRE [width=caratteri]> ... Testo da visualizzare ... </PRE>

Con questo tag c’è’ la possibilità di visualizzare il testo con la stessa formattazione utilizzata durante la scrittura del codice HTML, compresi spazi, tabulazioni e ritorni a capo.

L’attributo width specifica il numero di caratteri che si deve cercare di visualizzare per il testo, ma è incompatibile con molti browser. Aspetto importante da tenere in considerazione è il fatto che il carattere utilizzato è a spaziatura singola e ciò agevola l’implementazione di tabelle con righe e colonne nonché la tabulazione tramite spazi.

Due tag che utilizzerete spesso sono quelli per enfatizzare in corsivo o in grassetto delle frasi:

Il tag per il corsivo è <EM> ed ha la seguente specifica:

<EM> ... Testo da enfatizzare ... </EM>

Il tag per il grassetto è <STRONG> ed ha la seguente specifica:

<STRONG> ... Testo da enfatizzare ... </STRONG>

Il fatto che EM enfatizzi col corsivo e STRONG con il grassetto, può variare da Browser a Browser, ma ciò che rimarrà costante è il fatto che STRONG enfatizza maggiormente di EM.

Per specificare un indirizzo in una pagina è consigliabile il tag ADDRESS che mette il testo in rilevo separandolo dal resto della pagina; ciò viene fatto sia con un’interlinea diversa dal testo standard che con un’enfatizzazione (solitamente in corsivo).

La sintassi è quella standard:

<ADDRESS> ... Informazioni Indirizzo ... </ADDRESS>

Qui Informazioni Indirizzo indica il testo da formattare come sopra descritto e può anche includere altri tag di formattazione.

É possibile specificare anche delle citazioni con BLOCKQUOTE e CITE, la differenza è per lo più semantica, visto che CITE serve a specificare citazioni che non sono interne al documento.

La sintassi di questi due tag è la seguente:

< BLOCKQUOTE > ... Testo interno al documento da citare ... </ BLOCKQUOTE >

< CITE > ... Testo esterno al documento da citare... </ CITE >

Il modo in cui questi tag vengono implementati varia tra i vari browser, ma la maggioranza utilizza un rientro a sinistra e inserisce il testo in un nuovo paragrafo, alcuni enfatizzano anche il testo con il corsivo.

Per definire dei termini si può usare <DFN>, questo tag normalmente pone in corsivo il testo che viene definito in una determinata frase; la struttura è la seguente:

<DFN> Termine da Definire </DFN>

Tag utile per stampare al video del browser esempi di codice è CODE, questo utilizza un carattere a spaziatura fissa e si comporta all’incirca come PRE, tranne per il fatto che richiede l’utilizzo di BR per andare a capo.

Altri due tag per visualizzare a video delle informazioni particolari sono SAMP, KBD e VAR

SAMP visualizza del testo per esprimere che è l’output di un computer, KBD visualizza del testo che si vuole che l’utente inserisca tramite tastiera e VAR, un po’ come CODE, è utilizzato per spiegare frammenti di codice.

La loro sintassi è la seguente:

<SAMP> ... Testo ... </SAMP>

<KBD> ... Testo ... </KBD>

<VAR> ... Testo da spiegare ... </ VAR>

Questi sono più o meno tutti i tag fisici che vi capiterà di vedere, tenete comunque presente che la loro implementazione può variare tra i vari Browser, ma il significato che si voleva loro dare rimarrà inalterato; è questa la principale differenza tra tag logici e quelli fisici che presenteremo a partire dalla prossima puntata.

 

Torna all'indice Generale del corso di Corso di HTML di Software Planet