Formattazione del testo HTML
Transcript
Formattazione del testo HTML
Formattazione del testo. Argomenti trattati: - Creare paragrafi e posizionare con <P>: Come gestire i paragrafi ed il posizionamento nella riga di un testo. - Andare a capo con <BR>: Come utilizzare questo tag per tornare ad una nuova linea. - Linee orizzontali con <HR>: Come inserire linee per separare porzioni di testo. - Formattazione del testo con <FONT>: Come gestire completamente la forma del testo. - I tag di testo fisici - <B><I><U>: Evidenziare il testo, a seconda delle esigenze, in grassetto, corsivo o sottolineato. - I tag di testo fisici - apice e pedice: Gestire la forma del testo per inserire caratteri rispettivamente al di sopra o al di sotto della linea del testo. Come analizzato in precedenza, è possibile scrivere del semplice testo subito dopo il tag BODY per essere visualizzato. L'unico inconveniente è che la stessa visualizzazione sarà effettuata a discrezione del browser, a seconda del carattere di default. Per questo motivo adesso affronteremo il problema della formattazione del testo, cioè sistemare, dividere, posizionare lo stesso e gli altri oggetti in una pagina HTML. Vediamo quali sono i tag principali, ed i loro attributi, che ci permettono una buona formattazione all'interno di un ipertesto. Creare paragrafi e posizionare con <P> Il tag <P> definisce un nuovo paragrafo del testo. Esso indica al browser che il cursore si deve posizionare su una nuova riga, a sinistra, e lasciare una riga di spazio. Per altri tipi di posizionamento esistono attributi specifici: <P ALIGN="left"> o <P> Definisce un paragrafo e allinea il cursore a sinistra (left). <P ALIGN="right"> Definisce un paragrafo e allinea il cursore a destra (right). <P ALIGN="center"> o <CENTER> Definisce un paragrafo ed allinea il cursore al centro (center). Il linguaggio HTML - prof. Maurizio Gambino | 03. Formattazione del testo Il tag <P>, se seguito dall'attributo ALIGN sopra descritto, per terminare la sua funzionalità, necessita della chiusura </P>. Il tag <P ALIGN=center> è stato "deprecato" dallo standard 4 di HTML. Si utilizza ormai la sola notazione <CENTER>. Introdotto da Netscape, ha avuto enorme diffusione iniziale, dovuto al successo di questo browser, per questa ragione ancora viene usato e riconosciuto dai browser (adesso anche da Internet Explorer). L'uso di <CENTER> è molto semplice: <CENTER>Testo da centrare</CENTER> Andare a capo con <BR> Questo tag è l'abbreviazione di BREAK e rappresenta una interruzione di riga. Funziona come un semplice ritorno a capo, senza lasciare righe di spazio, diversamente dal tag <P> precedentemente visto. In altri termini la sua funzione è simile alla pressione del tasto "invio" della tastiera durante la digitazione di un testo con un editor. Non prevede tag di chiusura. Linee orizzontali con <HR> Le linee orizzontali sono un ottimo strumento per dividere parti del documento e rendere il testo più leggibile. La sintassi fondamentale consiste nell'inserimento del semplice tag <HR> all'interno del documento HTML, comunque esistono diversi attributi a cui l'utente può ricorrere nel caso abbia bisogno di una migliore formattazione della linea: <HR align="CENTER" size="2" width="400" color="red" noshade> Spieghiamo adesso la funzione di tutti gli attributi usati: align="CENTER" definisce la posizione della riga (center, right, left); size="2" definisce l'altezza, in pixel, della riga; width="400" definisce lunghezza orizzontale, in pixel, della linea. Può anche esprimersi in percentuale di spazio disponibile, ad es.: width=80%; color="red" definisce il colore della linea e noshade, se presente, elimina l'effetto 3D della linea. Se omesso, naturalmente, produce tale effetto. Il linguaggio HTML - prof. Maurizio Gambino | 03. Formattazione del testo Formattazione del testo con <FONT> Il tag FONT, con i suoi attributi, permette di definire le caratteristiche principali che vogliamo dare al nostro testo. Esso si divide in tre attributi: <font FACE= "Arial"> l'attributo FACE, naturalmente, dall'esempio appena mostrato, determina il tipo di carattere che noi vogliamo dare al nostro testo. <font face="Arial" SIZE=n> (con n che va da 1 a 7) L'attributo SIZE definisce l'altezza del carattere. Il numero n da 1 a 7 definisce, nell'ordine, dal più piccolo (8 pixel circa) al più grande (36 pixel circa). <font face="Arial" size=4 COLOR="red"> (oppure COLOR="#FF0000") L'attributo COLOR, come potete immaginare, serve per dare un colore ai caratteri che stiamo utilizzando e rispetta le stesse regole viste per l'attributo BGCOLOR del tag BODY della lezione precedente. Quindi, in pratica, il tag FONT si può riassumere con questo esempio: <font face="Arial" size=3 color="red"> oppure, come spiegato prima, cambiando il tipo di valore all'attributo COLOR, possiamo scrivere: <font face="Arial" size=3 color="#FF0000"> ottenendo così lo stesso effetto per il tipo di font. Naturalmente la pratica nell'utilizzo di questo tag aiuta a prendere dimestichezza con i suoi attributi. Nel corso delle prossime lezioni, infatti, andremo a trattare diversi altri attributi per altri tag, per cui si suggerisce una buona pratica con l'utilizzo di editor di testo nella creazione di ipertesti. I tag di testo fisici - Evidenziare con <B>, <I> e <U> <B>, <I> e <U> sono tre dei più usati tag di formattazione fisica dell'HTML. Tutti necessitano della chiusura per stabilirne l'azione: <B> Testo grassetto </B> Il testo compreso tra questi tag è trasformato in grassetto (la B sta per BOLD, grassetto). Il linguaggio HTML - prof. Maurizio Gambino | 03. Formattazione del testo <I> Testo corsivo </I> Il testo compreso tra questi tag è formattato in corsivo (la I sta per ITALIC, dato che la calligrafia in corsivo è universalmente riconosciuta come l'italica). <U> Testo sottolineato </U> Il testo compreso tra questi tag è sottolineato pur non essendo un link (la U sta per UNDERLINED, sottolineato). Apice e pedice: <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 per entrambi: X<SUP>2</SUP> verrà visualizzato come: X2. H<SUB>2</SUB>O verrà visualizzato come: H2O. Questi ultimi chiudono il discorso relativo ai tag di testo fisici e di formattazione maggiormente utilizzati. Il linguaggio HTML - prof. Maurizio Gambino | 03. Formattazione del testo