Il sito per imparare gratuitamente a fare pagine Web

Guida HTML

Questa guida Ŕ stampabile in modo agevole dalla versione off-line scaricabile dal men¨ laterale: Download.zip
 


Elementi di formattazione


Elementi o Tags:
Attributi:

© www.web-link.it  Guida HTML 4.01 - Ver. 7.0.1  
 

Il Testo Cosa sarebbe una pagina web senza testo?
Impossibile anche solo pensarlo. Questo elemento è senza alcun dubbio di primaria importanza. Oltre al colore e al tipo di font (carattere) ci sono molti altri elementi che servono per formattarlo ed impaginarlo.

<basefont>

L'elemento <basefont> specifica le dimensioni del font (carattere) di base su cui si basano poi tutte le relative modifiche di <font size="..."> Il valore di default è 3 e può essere compreso tra 1 e 7. Questo Tag è in via di estinzione visto che con i fogli di style Ŕ possibile avere maggior controllo e maggiore versatilitÓ su molti parametri del testo. Questo tag non necessita del relativo tag di chiusura.

<basefont size="4">

Oltre a size si possono inserire anche altri due attributi: face che specifica il tipo di font e color che specifica il suo colore che potrebbe essere espresso oltre che col nome in inglese anche con il codice numerico esadecimale. A questo proposito su questa pagina Ŕ possibile vedere 140 colori di base con relativo nome e codice esadecimale.

<basefont size="4" face="arial" color="green">

Deprecato, meglio usare una dichiarazione di style, in linea o su foglio esterno:

<style type="text/css">

body {
font-size: 14pt;
font-family: arial, verdana, sans-serif;
color: green;
}


</style>

Il mio consiglio è di non adoperarlo, guardate quello che Ŕ possibile fare con i CSS fogli di style e capirete il perchè.



Torna su
 

<br>

L'elemento <br> specifica che in quel punto si deve tornare a capo dando vita ad una nuova riga, un ritorno a capo forzato, più <br> consecutivi equivalgono a più righe nuove saltate consecutivamente. Questo tag non necessita del relativo tag di chiusura.

<br><br><br>

 Con l'uso di immagini flottanti allineate a destra o sinistra con il testo che le contorna, è possibile aggiungere a <br> l'attributo clear con i seguenti risultati:

clear="left": spezza la riga e si sposta verticalmente verso il basso fino ad avere un margine sinistro libero.

clear="right": spezza la riga e si sposta verticalmente verso il basso fino ad avere un margine destro libero.

clear="all": Si sposta verso il basso fino a quando entrambi i margini non siano liberi da immagini.

<br clear="all">


Torna su
 

<center>...</center>

L'elemento <center> serve per centrare tutto ciò che si trova al suo interno rispetto ai margini destro e sinistro della finestra del browser. Questo Tag è in disuso a favore dell'elemento <div> che offre maggiore flessibilità. Si possono ottenere analoghi risultati anche assegnando l'attributo align="center" ai vari tags di formattazione. Questo tag necessita del relativo tag di chiusura </center>

<center>
Questo testo è centrato sulla sua riga di visualizzazione
</center>

Deprecato, meglio usare un contenitore come <div> al quale assegnare un attributo di allineamento centrato:

<div align="center">...</div>

Oppure una dichiarazione di style associata a quel paragrafo:

<style type="text/css">

p { text-align: center; }

</style>


Torna su
 

<!--    -->

Questo strano elemento formato dai caratteri <!-- consente di lasciare del testo di commento all'interno del listato html senza che questo possa influire col restante codice o essere visualizzato dal browser.
Questo tag necessita di un tag di chiusura leggermente diverso da quello di apertura: -->



<!--
Questo testo non serve a niente ai fini della formattazione della pagina web, è semplicemente un commento, un qualcosa da ricordare dovendo visionare e modificare il listato.
-->

I simboli di commento sono molto utili anche per gli script ed i fogli di style e servono a nascondere il listato a quei browser che non supportano nÚ script nÚ fogli di style, anche se mi chiedo quanti e quali siano i browser che ancora oggi non supportano queste due cose divenute ormai parte integrante del web.



Torna su
 

<div>...</div>

L'elemento <div> non ha una sua vera e propria funzione se non quella di fare da scatola vuota, praticamente Ŕ un contenitore di codice ed Ŕ molto usato con l'associazione dei fogli di style che lo trasformano in un modulo spesso usato per assemblare l'impaginazione. Tutti gli attributi e le associazioni applicate all'elemento <div> iniziale saranno estese a tutto il blocco di codice in esso contenuto fino alla sua relativa chiusura. Questo tag infatti necessita del relativo tag di chiusura </div>

<div align="center">

Questa riga di testo ed anche eventuali altri elementi,
se presenti,
subiranno l'allineamento centrato.

</div>

L'uso del contenitore <div> provoca un ritorno a capo con la sua chiusura </div>



Torna su
 

<span>...</span>

L'elemento <span> non ha una sua vera e propria funzione se non quella di fare da scatola vuota, praticamente Ŕ un contenitore di attributi ed Ŕ molto usato con l'associazione dei fogli di style che lo trasformano in una specie di etichetta, a differenza di <div> infatti non genera un ritorno a capo ed Ŕ perfetto per gli styli al testo in linea. Questo tag necessita del relativo tag di chiusura </span>

<span style="color: green"> Questa riga di testo Ŕ di colore verde,</span><span style="color: #ff9900"> da qui invece Ŕ di colore arancio.</span>
Questa riga di testo Ŕ di colore verde, da qui invece Ŕ di colore arancio.

L'uso del contenitore span non provoca alcun ritorno a capo con la sua chiusura /SPAN, a differenza di /DIV ed Ŕ quindi indicato per assegnare attributi con i CSS a parti di un testo senza scombinarne l'impaginazione.



Torna su
 

<font>...</font>

L'elemento <font> definisce il tipo, le dimensioni ed il colore del carattere adoperato per la scrittura del testo. Questo tag non viene quasi pi¨ adoperato a favore dei pi¨ versatili fogli di style che riescono a gestire il tutto in modo più semplice e potente. Il Tag <font> ha dimensione di base (default) del carattere uguale a 3, si veda a questo proposito anche <basefont>. Font da solo non ha ragione di esistere, al suo interno si deve sempre inserire almeno uno dei suoi attributi: face, color, size. Questo tag necessita del relativo tag di chiusura </font>

<font attributo="specifica">
Testo che avrÓ tutti gli attributi specificati nel tag font
</font>

E' possibile specificare quale carattere adoperare dando anche delle eventuali alternative separandole da virgole. Se il font scelto non fosse presente sulla macchina del visitatore si tenterà di visualizzare il secondo font, poi il terzo, e se nessuno dei tre fosse presente il browser adopererà quello di default. Evitate dunque fonts particolari e poco comuni o quasi sicuramente nessuno riuscirà poi a vedere il testo allo stesso modo di come avreste voluto voi.

 

face

L'attributo face imposta il tipo di carattere utilizzato e questo deve trovarsi già installato nel computer dell'utente, le alternative sono separate da uno spazio e da una virgola. face="nome" [,nome] [,nome]

<font face="verdana ,arial ,algerian>Testo con font arial</font>
 

color

L'attributo color imposta il colore del testo usando il nome del colore in lingua inglese o il suo codice esadecimale color="nome" oppure color="#rrggbb". A questo proposito su questa pagina Ŕ possibile vedere 140 colori di base con relativo codice esadecimale.

<font color="green">Testo con font di colore verde</font>
 

size

L'attributo size imposta le dimensioni del font. size="n" oppure size="+n" o anche size="-n" dove n è un numero compreso fra 1 e 7, mentre i vari + o - si riferiscono al numero base che per default è 3, salvo variazioni specificate con basefont

<font size="-2">Testo con font di dimensioni -2 rispetto a quelle di default.

Tutti gli attributi di font possono essere adoperati anche contemporaneamente

<font face="Comic Sans MS" color="green" size="+2">
Testo con font Comic di colore verde e dimensioni +2
</font>

Deprecato! ho voluto illustrarlo ugualmente soltanto perchŔ lo si potrebbe trovare in qualche vecchia pagina web che fa uso di vecchio codice html ma va evitato davvero, a favore dei fogli di style: in linea, nella pagina o su foglio esterno:

<style type="text/css">

body {
font-size: 14pt;
font-family: "Comic Sans MS", arial, sans-serif;
color: green;
}

</style>


Torna su
 

<hr>

L'elemento <hr> Horizontal Rules, altro non è che una linea orizzontale divisoria, come quella che potete vedere in questa pagina a divisione dei vari elementi (tags), per default questa linea è ombreggiata e in rilievo. Si possono modificare vari attributi. Questo tag non necessita del relativo tag di chiusura.

<hr>
Questi gli attributi di formattazione associabili a questo tag: align, noshade, size, width.

Evidenziati in giallo gli attributi proprietari di singoli browser dei quali se ne sconsiglia l'utilizzo: color.
 

align

L'attributo align serve per impostare il suo allineamento, i valori ammessi sono: left, right e center rispettivamente per: a sinistra, a destra e centrato

Adopero una linea ridotta del 50% per meglio rendere l'idea

<hr align="left">
<hr align="right">
<hr align="center">

Adopero una linea ridotta del 50% per meglio rendere l'idea all'interno del box di esempio.










 

color

L'attributo color serve per assegnare un colore nella formula: color="nome in inglese" o codice in # esadecimale. L'attributo color non è supportato da tutti i browser e per questo se ne sconsiglia l'uso.

<hr color="red">

Se dichiarato in un foglio di style il risultato Ŕ invece lo stesso per tutti i browser:

<hr style="color: #ff0000;">

 

noshade

L'attributo noshade serve per rimuovere l'ombreggiatura, in pratica una barra solida.

<hr noshade>

 

size

L'attributo size serve per assegnare uno spessore nella formula: <hr size=numero> Dove numero è espresso in pixel.

<hr size="15">

una riga di spessore 15 pixel


 

width

L'attributo width serve per impostare la larghezza nella formula: <hr width="numero" | percentuale> Senza alcuna specifica la linea orizzontale occupa tutta la larghezza della pagina. Con questo attributo si possono specificare numeri o percentuale dove numero sono i pixel e percentuale invece fa riferimento alla percentuale della finestra del browser.

<hr width="150">

una riga di lunhezza 150 pixel


Si possono anche combinare i vari attributi, quello sotto è un esempio per ottenere una riga che sia di colore blu, spessore 3 pixel, larghezza 300 pixel:

<hr width="400" size="3" noshade color="#0000ff">

Non tutti i browser vedranno tutti i risultati dei vari attributi.


Consiglio: meglio usare una dichiarazione di style, in linea o su foglio esterno ridefinendo il tag o creando una classe o un identificatore da associare. Questa si che sarÓ vista da tutti i browser.

<style type="text/css">

hr {
height: 3px;
width: 400px;
color: #0000ff;
}

</style>



Torna su
 

<h1>...</h1>......<h6>...</h6>

L'elemento hx serve per impostare un titolo pi¨ o meno importante a seconda del valore x che varia da 1 a 6, Questi 6 livelli di titolo dimensionano i caratteri e generano un ritorno a capo essendo elementi di blocco. Il più alto livello è <h1> scalano a salire tutti gli altri. Questo tag necessita del relativo tag di chiusura </hx>


<h1>...</h1>

Grassetto, carattere molto grande e centrato, una o due righe vuote sopra e sotto.


<h2>...</h2>

<h3>...</h3>

Corsivo, carattere grande leggermente rientrato sul margine sinistro, una o due righe vuote sopra e sotto.


<h4>...</h4>

Grassetto, carattere normale, rientro maggiore rispetto a h3, una riga vuota sopra e sotto.


<h5>...</h5>
Corsivo, carattere normale, rientro normale come h4, una riga vuota sopra.

<h6>...</h6>
Grassetto, rientro come testo normale ma più di h5, una riga vuota sopra.



Consiglio, Ŕ possibile ridefinire in un foglio di stile CSS i vari tags <h1>, <h2>, <h3>, <h4>, <h5>, <h6> inserendo tutte le personalizzazioni che si desiderano, basterÓ poi richiamarlo alla solita maniera per avere un risultato decisamente diverso che definirei molto pi¨ versatile e comodo.

<style type="text/css">

h1{
font-family: Verdana,Arial,Helvetica,sans-serif;
font-size: 12pt;
color: #006400;
font-style: italic;
text-indent: 12pt;
}

</style>


Torna su
  

<p>...</p>

L'elemento <p> specifica un paragrafo di testo, ha come attributo align che permette di allineare il testo in quattro possibili modi: center, left, right, justify, rispettivamente per: Centrato, a sinistra, a destra e giustificato. Viene adoperato prevalentemente con l'attributo class che richiama una classe di style in modo da avere paragrafi con: font, colori, dimensioni e formattazioni personalizzate. Si veda a questo proposito le spiegazioni relative ai fogli di stile. Questo tag necessita del relativo tag di chiusura </p>

<p align="left">Questo paragrafo è allineato a sinistra.</p>
<p align="right">Questo paragrafo invece è allineato a destra.</p>
<p align="center">Questo paragrafo è allineato al centro.</p>
<p align="justify">Questo paragrafo è allineato con giustificazione a destra e sinistra.</p>

questo sotto il risultato:

Questo paragrafo è allineato a sinistra.

Questo paragrafo invece è allineato a destra.

Questo paragrafo è allineato al centro.

Questo paragrafo invece è allineato al centro con giustificazione, che cosa è la giustificazione ? Guardate attentamente i due margini, destro e sinistro, come potete notare il testo è allineato sia a destra che a sinistra; per fare questo il comando aggiunge in automatico degli spazi fra le parole.



Consiglio, Ŕ preferibile ridefinire il tag <p> all'interno di un foglio di stile (CSS) o creare una apposita classe ed inserire tutte le varie personalizzazioni, basterÓ poi richiamare questa classe ogni volta che serve per avere lo stesso risultato uguale su tutti i paragrafi della pagina web.

<style type="text/css">
p{
font-family: Verdana,Arial,Helvetica,sans-serif;
font-size: 16pt;
color: #006400;
text-indent: 12pt;
}

</style>



Torna su
 

<b>...</b> <strong>...</strong>

Gli elementi <b> e <strong> fanno la stessa funzione, specificano una parte di testo da mostrare in grassetto (bold). Si consiglia di adoperare strong in quanto b potrebbe venire dichiarato obsoleto nelle prossime specifiche. Questi tags necessitano del relativo tag di chiusura </b> e </strong>

Questa guida è offerta da <b> Web-Link </b> tutto per la tua pagina web.

Le guide offerte da <strong> Web-Link </strong> sono sempre aggiornate.
Questa guida è offerta da Web-Link tutto per la tua pagina web.

Le guide offerte da Web-Link sono sempre aggiornate.


Torna su
 

<u>...</u>

L'elemento <u> specifica una parte di testo da mostrare sottolineato (underline). Questo tag necessita del relativo tag di chiusura </u>

Questa guida è offerta da <u> Web-Link </u> tutto per la tua pagina web.
Questa guida è offerta da Web-Link tutto per la tua pagina web.


Torna su
 

<i>...</i> <em>...</em>

Gli elementi <i> e <em> fanno la stessa funzione, specificano una parte di testo da mostrare in corsivo (italic). Si consiglia di adoperare em in quanto i potrebbe venire dichiarato obsoleto nelle prossime specifiche. Questi tags necessitano del relativo tag di chiusura </i> e </em>

Questa guida è offerta da <i> Web-Link </i> tutto per la tua pagina web.
Questa guida è offerta da <em> Web-Link </em> tutto per la tua pagina web.


Questa guida è offerta da Web-Link tutto per la tua pagina web.
Questa guida è offerta da Web-Link tutto per la tua pagina web.

Gli elementi possono essere fra loro nidificati, combinando i vari attributi, per esempio posso scrivere weblink in modo marcato, inclinato e sottolineato:

Questa guida è offerta da <u><i><b> Web-Link </b></i></u> tutto per la tua pagina web.
Questa guida è offerta da Web-Link tutto per la tua pagina web.



Torna su
 

<pre>...</pre>

L'elemento <pre> specifica un blocco di testo preformattato, cioè a larghezza e spaziatura fissa. Attenzione: talmente fissa che non torna neppure a capo se non con il comando <br>. Questo tag necessita del relativo tag di chiusura </pre>

<pre>Questo Ŕ un testo preformattato che manterrÓ una certa spaziatura indipendentemente <br> dai vari parametri di pagina </pre>


Questo è un testo preformattato che manterrà una certa spaziatura indipendentemente 
dai vari parametri di pagina


Torna su



Consiglio, Ŕ preferibile usare questi attributi all'interno dei fogli di style.

tt: Riproduce come testo di telescrivente o a spaziatura fissa.
i: Riproduce come stile corsivo del testo.
em: Riproduce come stile corsivo del testo.
b: Riproduce come stile grassetto del testo.
strong: Riproduce come stile grassetto del testo.
big: Riproduce il testo con un carattere "grande".
small: Riproduce il testo con un carattere "piccolo".
strike e s:Disapprovato. Riproduce il testo come se fosse cancellato con un frego.
u:Disapprovato. Riproduce del testo sottolineato.



Torna su

Se avete domande potete scrivere sul forum di supporto, gratuito e aperto a tutti.

forum


Andrea Bianchi