...Personalizza la tua HomePage...

Questa Sezione è Dedicata a Tutti i Webmaster Nofiti e Non

Versione Stampabile Versione PDF Versione .DOC Versione .ZIP Scrivimi i tuoi Commenti

Formattare il Testo
Autore :  Eagleyes Linguaggio :  HTML - Hypertext Markup Language
Data :  20/05/2004 10:00:50 Accessi :  4
Prima di approfondire le tematiche legate alla formattazione del testo è bene precisare alcuni concetti che reggono l'uso di questi strumenti.


Tag di testo logici e fisici

HTML è un sistema di contrassegno con il compito di definire la struttura e l'aspetto di un documento.
Questa definizione che senza altri commenti passerebbe inosservata, va invece approfondita per capire meglio i concetti di tag fisici e logici.
Un tag fisico ha il compito di formattare visivamente un documento , cioè di renderlo grassetto, corsivo, sottolineato ecc.
La funzione di questi tag non è quella di dare un aspetto al documento, ma di marcare determinati punti per definirne una struttura.


Un tag logico, al contrario ha la funzione di definire una struttura indipendentemente dal suo aspetto .
Ovvero, indipendentemente dal modo in cui il browser interpreterà visivamente il contrassegno.


Per comprendere meglio questa differenza prendiamo in esame due elementi volti a formattare testo:

<ADDRESS></ADDRESS>

Si tratta di un tag logico che contrassegna l'informazione di indirizzo nel documento.
In altre parole quando si è in presenza di un indirizzo e-mail, di un numero di telefono o di un indirizzo secondo le regole di HTML va inserito questo tag logico.


<I></I>

Si tratta di un tag fisico che rende corsivo (italic) il testo compreso nell'elemento.
E' quindi, un tag volto a dare un aspetto al documento e non a marcare un elemento di struttura.


Vediamo insieme qual è il risultato visivo di un loro utilizzo all'interno di un documento Web:


webmaster@html.it
webmaster@html.it

Senza guardare il source del documento ti sfidiamo a capire quale testo sia stato formattato con ADDRESS e quale con I.
Visivamente entrambi i tag (il primo è ADDRESS e il secondo I) danno un medesimo risultato (il testo corsivo), ma da un punto di vista di struttura del documento, solo il primo (ADDRESS) indica che al proprio interno è presente un indirizzo, mentre il secondo non da' alcuna informazione di questo tipo.


Tag FONT e nuovo standard HTML 4


HTML 4 è lo standard che da quasi due anni regge le sorti del linguaggio di markup più famoso al mondo.
Senza entrare nel merito delle novità del nuovo standard vogliamo sottolineare come il W3C abbia "deprecato" l'uso del tag FONT nella formattazione del testo in HTML.
Il termine "deprecare" (letteralmente tradotto dall'inglese) indica che i browser leggono ancora questo tag, ma il suo uso è decisamente vietato dal nuovo standard.
Secondo HTML 4 la formattazione del testo è lasciata unicamente ai fogli di stile <http://www.html.it/css>.


In questa lezione non terremo conto delle indicazioni del W3C e spiegheremo comunque l'uso dei tag classici di HTML 4.
Rimandiamo comunque alla sezione sui Fogli di stile <http://www.html.it/css> di questo sito per un approfondimento dell'argomento CSS.


Formattare titoli da <H1> ad <H6>


Il tag <Hn (dove n è il numero da 1 a 6 che è possibile assegnare all'elemento) ha la funzione di fornire stili ai titoli di pagina, dando maggiore o minore enfasi a seconda del numero inserito.
Come accennato i numeri vanno da 1 a 6, con maggior importanza dei numeri più bassi rispetto agli alti.
Visivamente tale diversa importanza si traduce in differente grandezza del testo, come nell'esempio che segue:


Oltre a definire gli stile dei titoli, il tag <Hn> inserisce spaziature di paragrafo rispetto agli elementi che seguono.


<FONT>

Il tag fisico FONT è uno dei più usati e frequenti nell'attuale Web publishing.
Nella sezione: Impostare lo sfondo del documento (elemento BODY) abbiamo visto come l'attributo TEXT dia un colore univoco a tutto il testo del documento.
Il tag FONT ha in parte una funzione simile, ma molto più ampia e concettualmente differente.


Il tag FONT ha la funzione di formattare tipo e grandezza del testo limitatamente ad alcuni punti del documento.
In realtà se il tag font aprisse e chiudesse il documento, la totalità del testo compreso al suo interno sarebbe formattato di conseguenza.
Ma concettualmente il tag FONT è stato pensato per definire parti limitate di testo.
Mentre, poi, TEXT determina solo il colore del testo, il tag FONT può definire: tipo di font utilizzato, grandezza e colore.
Segue la sintassi corretta del tag:


<FONT FACE="arial" SIZE=5 COLOR=red>Carattere da formattare</FONT>


L'attributo FACE="arial" indica il tipo di carattere da richiamare per la visualizzazione.
SIZE=5 la grandezza del carattere che può andare da 1 a 7 (con maggiore grandezza dei numeri vicini al 7);
COLOR=red indica il colore del testo (esprimibile anche in valori esadecimali).


<B>, <I>, <U>


<B>, <I>, <U> sono tre dei più usati tag di formattazione fisica dell'HTML.

Tutti vanno aperti e successivamente richiusi:


<B> Testo grassetto </B>


Il testo compreso tra questi tag è trasformato in grassetto (la B sta per BOLD).


<I> Testo corsivo </I>


Il testo compreso tra questi tag è formattato in corsivo (la I sta per ITALIC).


<U> Testo sottolineato </U>


Il testo compreso tra questi tag è sottolineato pur non essendo un link (la U sta per UNDERLINE).


Esiste anche il tag STRIKE per il testo barrato:


<STRIKE> Testo sottolineato </STRIKE>


<SUP> e <SUB>


Questi due tag di formattazione fisica creano rispettivamente:
apici posti leggermente più in alto del normale testo (SUP) e pendici posti leggermente più in basso (SUB).
E' possibile annidare diversi tag per ottenere effetti di sovrapposizione successiva.
Questi elementi vengono usati soprattutto per indicare note o formule matematiche.
Questa la corretta sintassi:

HTML.it <SUP>©</SUP> è un marchio registrato


HTML.it <SUB>©</SUB> è un marchio registrato


Testo preformattato
HTML legge il testo ovviamente da sinistra verso destra e, senza alcun tipo di formattazione, manda a capo alla fine di ogni riga senza soluzione di continuità.
La formattazione successiva esaminata in questa lezione ha il compito di indicare al browser dove andare a capo, quale font utilizzare, quali parole enfatizzare e così via.
Spesso, però, un documento creato con un normale editor di testo deve essere importato senza formattazione, così come è stato creato.
A questo scopo HTML prevede i tag di testo preformattato (i quali non leggono ne' interpretano alcun tag di HTML, neanche i caratteri speciali):


<XMP> Testo da formattare </XMP>


<PRE> Testo da formattare </PRE>


Entrambi i tag hanno lo stessa funzione, anche se lo standard di HTML 4 prevede l'uso di XMP e non di PRE.


Breve descrizione degli stili logici
Abbiamo descritto in apertura di lezione la differenza tra tag fisici e logici.
Ora elenchiamo i tag logici più interessanti e il corrispondente utilizzo in HTML:


<ADDRESS>


Contrassegna informazioni di indirizzo (mail, telefono ecc.).


<BLOCKQUOTE>


Usato per citazioni più lunghe di due o tre righe.


<CITE>


Usato per indicare la fonte della citazione.


<CODE>


Viene utilizzato per formattare righe di codice di programmazione.


<DFN>


Indica che il testo compreso è una definizione.


<EM>


Enfatizza il testo compreso all'interno del tag.


<KBD> e <SAMP>


Poco utilizzati.
Indicano cose che il computer dovrebbe dire all'utente e viceversa, secondo un tipico concetto di Unix.


<STRONG>


Enfatizza il testo.


<VAR>


Legato a CODE, indica le variabili di programmazione.

Ritorna


 NEWS 
12/09/2007 13:08:14
PAURA
Marco Travaglio con Gomez e Crozza ed Elio

11/09/2007 14:44:48
IL V-DAY: un evento NUOVO !!!!!
Aria fresca in Parlamento articolo del Sole24ore: http://www.ilsole24ore.com/art/SoleOnLine4/At...


28/06/2007 14:20:55
LEOPARDI SALUTI i 500
Certo ragazzi, anche noi nel nostro piccolo cresciamo, e Leopardi è il cinquecentesimo saggio nella ...


12/04/2007 11:31:15
ATTENZIONE A CheckMessenger.NET! , è una TRUFFA
Ennesito sito truffaldino: si chiama CheckMessenger e vi promette di mostrarvi se i vostri contatti ...


26/01/2007 11:58:34
AGGIORNATE TUTTE LE SEZIONI
AGGIORNATE TUTTE LE SEZIONI Sì, cari amici. Ho provveduto ad aggiornare le principali sazioni de...


:: ELENCO NEWS ::

  
Valid XHTML 1.0! Valid CSS!