H1 - Prova testo grande

H2 - Testo più piccolo del precedente

H3 - Testo più piccolo del precedente

H4 - Testo più piccolo del precedente

H5 - Testo più piccolo del precedente

H6 - Testo più piccolo del precedente

Font di tipo Arial con dimensione (size) 1 e colore rosso

Font di tipo Arial con dimensione (size) 1 e colore blu

Font di tipo System con dimensione (size) 7 e colore definito dal codice esadecimale #AABB36

Qui sopra si è regolato vari attributi di un testo tramite il tag <FONT... e la definizione dei suoi principali attributi, ossia COLOR=...., SIZE=.... e il più importante FACE=..... Quest'ultimo definisce il tipo di font usato.

Testo con vari tipi di formattazione: questa è una parte di testo sottolineata, quest'altra è una parte formattata in corsivo (italico), questo è un testo in grassetto, questo testo combina le tre formattazioni contemporanemente.

Qui sopra invece si sono applicati ad uno stesso tipo di font, dei tag per effettuare formattazioni. In particolare il tag <U>....</U> sottolineato, il tag <B>....</B> per realizzazare il grassetto e il tag <I>....</I> per produrre il corsivo.
Da notare che l'effetto di tali tag può essere combinato a piacere, come effettivamente fatto qui sopra.

Allineamenti

Testo allineato sulla destra

Testo allineato sulla sinistra

Testo centrato

Qui sopra sono stati effettuati allineamenti di brevi testi; testi più lunghi tendono ad occupare tutto lo spazio sulla linea, mantenebo però la regola data, di allinearsi secondo l'aalineamento indicato. L'allineamento si ottiene tramite l'attributo ALIGN=... del tag <P> (il tag che definisce i paragrafi), ossia <P ALIGN=...>...</P>. I valori possibili di ALIGN sono come al solito LEFT, RIGHT, CENTER.

Testo allineato sulla destra Testo allineato sulla destra Testo allineato sulla destra Testo allineato sulla destra Testo allineato sulla destra Testo allineato sulla destra Testo allineato sulla destra Testo allineato sulla destra Testo allineato sulla destra

Testo allineato al centro Testo allineato al centro Testo allineato al centro Testo allineato al centro Testo allineato al centro Testo allineato al centro Testo allineato al centro

Testo allineato sulla sinistra Testo allineato sulla sinistra Testo allineato sulla sinistra Testo allineato sulla sinistra Testo allineato sulla sinistra Testo allineato sulla sinistra Testo allineato sulla sinistra Testo allineato sulla sinistra Testo allineato sulla sinistra

Prova di un testo identato
di un certo spazio

Prova di un testo identato
di maggior spazio (2 rientri)

Il tag <BLOCKQUOTE>...</BLOCKQUOTE> è molto utile per imporre al testo rientri rispetto all'usuale margine sinistro. Ciò permette di evidenziare facilmente blocchi di testo che si vogliono far risaltare rispetto al resto del testo. Per rientri più accentuati si cumulano (in gergo tecnico nidificano) più tag <BLOCKQUOTE> assieme.
Attenzione !!!   Il rientro è attivo anche sul lato destro non solo sul sisnistro ! (vd. testo sottostante)

Testo giustificato

Questo è un testo ripetuto che normale e non risulta giustificato Questo è un testo ripetuto che normale e non risulta giustificato Questo è un testo ripetuto che normale e non risulta giustificato Questo è un testo ripetuto che normale e non risulta giustificato Questo è un testo ripetuto che normale e non risulta giustificato

Questo è un testo ripetuto che risulterà sempre perfettamente giustificato Questo è un testo ripetuto che risulterà sempre perfettamente giustificato Questo è un testo ripetuto che risulterà sempre perfettamente giustificato Questo è un testo ripetuto che risulterà sempre perfettamente giustificato Questo è un testo ripetuto che risulterà sempre perfettamente giustificato Questo è un testo ripetuto che risulterà sempre perfettamente giustificato Questo è un testo ripetuto che risulterà sempre perfettamente giustificato

Qui sopra risulta evidente (se non lo fosse provare a stringere o allargare la finestra del browser), la differenza tra un testo con allineamento standard a sinistra e uno con allinemento giustificato. Ossia in termini di codice <P ALIGN="JUSTIFY">...</P>. Il testo giustificato risulta sempre non avere scalettature e spazi rispetto ai margini impostati (qui rientrati, è stato applicato un <BLOCKQUOTE>).

Regolazione della grandezza del font per punti (utilizza gli stylesheet - avanzato):

grandezza 10 punti
grandezza 14 punti
grandezza 18 punti
grandezza 22 punti

La regolazione della grandezza del font con metodi tradizionali <FONT SIZE=... o tag <Hx> non sempre portano ai risultati voluti, soprattutto per accuratezza e possibilità di regolazioni ancora più amplie. In questo caso si può ricorrere ad una regolazione della grandezza dei caratteri tramite uno stylesheet.
Gli stylesheet sono generabili a mano:

<head>
<style type="text/css">
<!--
.dimensione1 { font-size: 10pt}
.dimensione2 { font-size: 14pt}
.dimensione3 { font-size: 18pt}
.dimensione4 { font-size: 22pt}
....
</style>
</head>
....
<span class="dimensione1">grandezza 10 punti</span><br>

o con appositi comandi su Dreamweaver MX. Ci si porta sulla finestra Proprietà, poi si seleziona stile / gestisci stili... / nuovo... / (si definisce lo stile voluto con un nome e con apposite regolazioni su una interfaccia grafica). Infine selezionato il testo voluto gli si impone uno degli stili precedentemente creati tramite il selettore proprietà / stile. Dreamweaver genera automaticamente i tag opportuni come quelli indicati sopra.
Un modo più semplice di definire direttamente la grandezza dei caratteri con uno style sheet è quella di applicare la definizione dello style sheet direttamente sul tag:

<font style=""> </font>

Ad esempio: <font style="font-size:8pt">questa riga ha altezza 8 punti</font> ottenendo:

questa riga ha altezza 8 punti

Testo preformattato

In alcune situazioni si desidera che una parte del testo o comunque della formattazione della pagine non sia soggetta al ritorno a capo. In alcuni casi il ritorno a capo forzato può scompaginare la disposizione logica degli elementi sulla pagina.
Per evitare tutto questo esiste un tag antico è assai utile; si tratta di <PRE>...</PRE>, che stà a delimitare un testo o una zona preformattata, e quindi da non sottoporre ad alterazioni dovute al ritorno a capo.
Vediamo un effetto:

Questi sono i loghi di tre famosi linguaggi di programmazione:

               
PHP (open source)          Java™ (Sun Microsystem)               e Delphi™ (Borland)

prova a la finestra del browser in larghezza!!   I sottotitoli vanno a pallino e le figure si sovrappongono le une con le altre... che disastro !
Invece racchiudendo la serie di tag con il tag <PRE> tutto resta come prima :-) :

         
PHP (open source)       Java™ (Sun Microsystem)               e Delphi™ (Borland)

Caratteri speciali e loro codifiche

Da notare:   i caratteri <, >, è, ", lo stesso carattere di spazio ed altri sono creati in HTML con speciali codifiche. Per alcuni di questi ciò è del tutto comprensibile; infatti < e > sono i caratteri utilizzati nella chiusura e apertura dei tag. Come farebbero i browsers a capire se i nostri caratteri sono legati all'HTML o alla descrizione di un contenuto (ossia non sono caratteri di formattazione) ?
Solo distinguendo con una opportuna codifica nel sorgente HTML ciò è possibile. La scrittura <, nel sorgente HTML indica un carattere del codice HTML, non visibile sul navigatore, il codice &lt; nell' HTML, invece, stà ad indicare che dovrà essere stampato un caarattere del tipo <. E analogamente " viene mostrato tramite &quot; lo spazio tramite &nbsp; e così via.
Un modo alternativo di scrivere tali codici è indicare il codice simbolico con codifica numerica ASCII (e/o Unicode) , ossia nella forma    &#<codice ASCII / Unicode del carattere>

Riporto qui sotto i caratteri codificati più comuni:

<<< back