INTERNET EXPLORER? Ti consiglio di navigare questo sito con Mozilla Firefox oppure con Google Chrome.

Formattazione del testo in Html

Autore: Luca Ruggiero | Tell a Friend
Corso HTML
Impara il linguaggio di marcatura per il Web.

Corso CSS
Web Design ed Accessibilità secondo il W3C!

Corso Web Design
Disegno di siti Web con HTML, CSS e Dynamic HTML.

Nella lezione scorsa abbiamo visto come inserire elementi di testo Html in una pagina Web e ci siamo potuti accorgerci di alcune cose: il colore del testo è impostato per default in nero, il font (carattere) è il Times New Roman, l'allineamento è a sinistra ed ha una certa dimensione.

Colore, dimensione e tipi di carattere per il testo

Vediamo ora come formattare il testo e modificare queste impostazioni di default del browser; per agire sul colore, dimensione e carattere utilizziamo il Tag e ed utilizziamo tre attributi, color (colore), size (dimensione) e face (carattere).

Proviamo a formattare un testo qualsiasi, impostando il colore rosso, una dimensione inferiore a quella di default ed il Verdana come carattere:

<p>
   <font color="Red" size="3" face="Verdana">
      Testo formattato!
   </font>
</p>

Nota: nessuno dei tre attributi è obbligatorio, è possibile decidere ad esempio di cambiare solo il colore, solo il carattere e cosi via.

Impostiamo il font in apertura all'inizio del testo che vogliamo formattare il quella maniera e lo chiudiamo alla fine.

I caratteri, o font, sono dei file con estensione .ttf (True Type Font) che si trovano sul sistema operativo, su Windows '98 nel percorso C:WINDOWSFonts, su Windows 2000 e Windows NT nel percorso C:WINNTFonts, che è una directory di sistema; tengo a puntualizzare questo perchè, se decidessimo di utilizzare un font particolare per una nostra pagina, si corre il rischio che un utente che non ha quel font installato sul proprio PC, non potrà leggerlo e di conseguenza perderebbe parte del senso del sito.

I font più usati e di sicuro presenti su tutti i sistemi, che sono poi quelli che normalmente troviamo sulle pagine Web, sono:

Arial
Arial Narrow
Arial Black
Tahoma
Verdana
Sans Serif
Times New Roman

La categoria Sans Serif indica tutti i caratteri senza grazie, ovvero senza particolari sfumature di stile, di quelli elencati fanno tutti parte di questa categoria, meno il Times New Roman.

All'interno di un Tag possiamo inserire più font (intesi come caratteri), separandoli da una virgola e da uno spazio (lo spazio è opzionale), in modo che, in mancanza di uno, troviamo immediatamente il successivo, e cosi via; si consiglia di non inserirne più di tre o quattro:

<font face="Verdana, Tahoma, Sans Serif">

ovvero, "cerca il Verdana, se non lo trovi cerca il Tahoma, se non lo trovi cerca il primo carattere senza grazie ed usa quello".

La dimensione del testo è impostata per default a 3 e possiamo modificarla impostando il size da 1 a 7; un testo con dimensione del carattere impostata a 7 è più grande di un titolo di primo livello <h1>.

Nota: per quanto riguarda il colore, abbiamo ter diversi modi di definirlo, con nomi di colori (in inglese), con Codici Esadecimali e con Codici RGB
Per visualizzare la tabella dei colori, che verrà aggiornata periodicamente, clicca qui

Allineamento del testo sulla pagina

Per allineare un testo sulla pagina utilizziamo l'attributo align per tutti gli elementi di testo, i cui valori possono essere left (di default), center e right: quindi allineerà un testo al centro della pagina.

Si implementi questo esempio in un file già creato per gli esempi scorsi.

Esiste poi il Tag <center> e </center> per l'allineamento al centro di un elemento, a cui però viene preferito l'utilizzo di align.

Grassetto, corsivo e caratteri sottolineati

Possiamo definire lo stile del testo utilizzando il grassetto, il corsivo ed il sottolineato, rispettivamente con i Tag (bold), (italic) e (underline).

Vediamo un esempio:

<p><b>Testo in grassetto</b></p>

<p><i>Testo in corsivo</i></p>

<p><u>Testo sottolineato</u></p>

Interruzione di riga e caratteri speciali

Possiamo creare un'interruzione di riga con l'utilizzo del Tag (break), a tanti break corrispondono tanti ritorni a capo:

<p>
   Questo testo andrà<br>
   a capo!
</p>

Parliamo ora dei caratteri speciali: si tratta di un tipo di simbologia che ci permette di scrivere caratteri che normalmente non saremmo in grado scrivere col proprio simbolo, ad esempio immaginiamo di voler scrivere su di una pagina un Tag Html... normalmente il browser lo interpreta come Tag e lo esegue, ma con l'utilizzo di caratteri speciali questo diventa possibile.

Riporto alcuni esempi:

  spazio vuoto ed unificatore
© ©
® ®
< <
> >
» »
« «

Nota: naturalmente questo elenco è incompleto, i caratteri speciali sono moltissimi, potete scaricare un elenco più o meno completo cliccando qui

Mi vorrei soffermare per un momento sullo spazio unificatore; il simbolo   provoca uno spazio bianco, che normalmente otteniamo digitandolo con la barra spaziatrice della tastiera, ma se ne volessimo ottenere due o più? con la tastiera non è possibile, quindi, inserendo tra due lettere o parole più spazi unificatori, si otterrà una spaziatura maggiore:

<p>C&nbsp;&nbsp;I&nbsp;&nbsp;A&nbsp;&nbsp;O</p>

In più, due lettere o parole con in mezzo uno spazio unificatore, non finiranno mai per andare a capo se si trovano a fine pagina, ad esempio, le parole Hello World cosi scritte non andranno mai a capo.

IN EVIDENZA

Una slidegallery con jQuery Pagamenti online con PayPal e PHP Breve guida a jQuery Effetto ombra su testo con Photoshop Guadagna col tuo sito grazie a TradeD... Guida XHTML Riscrivere le URL con Asp Riavviare IIS HTTP 500 internal server error Generare password casuali in Javascri... Errore 80004005: Cannot update. Datab... Introduzione ad Ajax ed Asp con Jscri... Referenze dei Tag Html Stringhe di connessione via ODBC e Ol... Referenze dei fogli di stile Css Le espressioni regolari in Javascript

HOT LINKS

Servizi per Webmaster E-Commerce News Manager Newsletter Corsi online eBooks PC Guadagna col sito Hosting 20 euro Reg. domini Email gratis FAX via email Tlefonare col PC ADSL Alice ADSL FastWeb