Linguaggio HTML

Html - Formattazione, Paragrafi, Elenchi puntati

User Rating:  / 0
PoorBest 

A cura di: www.tutorialpc.it 

Nota: E' permessa la pubblicazione di questa guida su altri siti lasciando intatto il contenuto, questa nota e il link al nostro sito.


 
Titoli  <H1>  <H6>

Il tag <Hn>  n  è il numero da 1 a 6 che è possibile dare all'elemento ha la funzione di fornire stili ai titoli di pagina,quindi i numeri vanno da 1 a 6, con maggior importanza dei numeri più bassi rispetto a quelli alti, il risultato è che con <H1> si ottiene il titolo più grande mentre con <H6> il più piccolo.

 

<FONT>

Il tag FONT è molto importante  ed è simile al tag  TEXT(cioè quello che da un colore univoco a tutto il testo del documento), ma con funzioni molto più ampie. Il tag FONT  può definire il tipo di font utilizzato, grandezza e colore. Ecco la sintassi:


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

L'attributo FACE="arial" indica il tipo di carattere da richiamare per la visualizzazione. SIZE=3 la grandezza del carattere che può andare da 1 a 7 (i numeri vicini al 7 sono i più grandi); COLOR=red indica il colore del testo (come sempre 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>
Mettendo del testo in questi tag viene trasformato in grassetto (la B sta per BOLD).

<I> Testo corsivo </I> 
Mettendo del testo in questi tag  viene trasformato in corsivo (la I sta per ITALIC)

<U> Testo sottolineato </U>
Mettendo del testo in questi tag esce sottolineato  (la U sta per UNDERLINE).

Esiste anche il tag STRIKE per il testo barrato:
<STRIKE> Testo barrato </STRIKE>

 

Creare paragrafi con <P>

Il tag <P> definisce un nuovo paragrafo del testo indicando al browser che lo stesso deve rimanere su una nuova riga ed essere posizionato a destra, a sinistra o al centro. Se non specificato oltre, il tag <P> allinea il testo di default sulla sinistra. Per indicare altri tipi di posizionamento esistono attributi specifici:

<P ALIGN=left>
Definisce un paragrafo e allinea sulla sinistra (left).

<P ALIGN=right>
Definisce un paragrafo e allinea sulla destra (right).

<P ALIGN=center>
Definisce un paragrafo ed allinea al centro (center).


Andare a capo con <BR>

<BR> è un tag di interruzione di riga cioè torna a capo lasciando uno spazio vuoto e va usato singolarmente senza tag di chiusura.

 

 

Posizionamento del testo con <DIV ALIGN> e <CENTER>

L'elemento <DIV> viene utilizzato per allineare il testo in posizione orizzontale a sinistra, destra e centro della pagina. 

<DIV ALIGN=left>Testo e immagini a sinistra</DIV>
Sposta tutti gli elementi contenuti tra i suoi tag sulla sinistra.

<DIV ALIGN=right>Testo e immagini a destra</DIV>
Sposta tutti gli elementi sulla destra.

<DIV ALIGN=center>Testo e immagini centrate</DIV>
Sposta tutti gli elementi in posizione centrale.

<CENTER>Testo da centrare</CENTER>
Il tag <CENTER> ha un funzionamento simile a <DIV ALIGN=center>


 

Linee orizzontali con <HR>

Le linee orizzontali sono ottime  per dividere parti del documento e rendere il testo più leggibile. La sintassi è questa:

<HR align="CENTER" size="3" width="200" color="Red" noshade>

 

Il tag HR (acronimo che sta per Horizontal Rule) non ha bisogno di chiusure successive. Si compone di diversi attributi:

 

aling="CENTER": stabilisce la posizione della riga (center, right, left).

size="32": stabilisce l'altezza, in pixel, della riga.

width="200": stabilisce la lunghezza orizzontale, in pixel, della linea. Si può anche indicare in percentuale  width=80%.

color="RED": stabilisce il colore della linea.

noshade: se presente questo attributo elimina l'effetto 3D della linea. Se viene omesso produce questo effetto.

 

 

Elenchi numerati 

 

Gli elenchi numerati servono per organizzare le informazioni che si trovano all'interno di un sito e un ottimo sistema per rendedere chiaro e ben leggibbile il documento.

Gli elenchi numerati si aprono con il tag <OL></OL><> poi per ogni  voce nel menu si mettono altrettanti tag <LI>

Ecco la corretta sintassi:


<OL>
<LI>
Prima 

<LI> Seconda 
<LI> 
Terza
</OL>

Le ultime versione di HTML danno la possibilità di fare elenchi ordinati diverso dai numeri come abbiamo visto sopra.

 

Questo esempio creare un indice alfabetico in lettere maiuscole:


<OL TYPE=A>
<LI> Prima 
<LI> Seconda 
<LI> Terza 
</OL>/b>


Mentre quest'altro in lettere minuscole:


<OL TYPE=a>
<LI>
Prima 
 

 
 

<LI>Seconda 
<LI> 
Terza  
</OL>


Questo esempio crea un indice con numeri romani maiuscoli:


<OL TYPE=I>
<LI> 
Prima voce di menù
<LI> Seconda voce di menù
<LI> 
Terza voce di menù 
</OL>


Mentre quest'altro minuscoli:


<OL TYPE=i>
<LI> 
Prima voce di menù
<LI> 
Seconda voce di menù
<LI> 
Terza voce di menù

</OL>


 

Elenchi puntati

Gli elenchi puntati sono simile a gli altri elenchi di indicizzazione solo che non seguono una struttura gerarchica.
Gli elenchi puntati si aprono con il tag <UL></UL>  poi per ogni voce nel menù si mettono altrettanti tag <LI>.

Ecco la corretta sintassi:

<UL>
<LI> 
Prima 
<LI> 
Seconda  
<LI> 
Terza  
</UL>


Se non stabilito diversamente l'elenco crea una serie di pallini.
Come per gli elenchi numerati anche in questo caso è possibile indicare diversi tipi di elenco:

I pallini pieni si ottengono con disc:


<UL TYPE=disc>
><LI> 
Prima voce di menù 
<LI> 
Seconda voce di menù
<LI>
Terza voce di menù
</UL>


Mentre l'attributo circle imposta pallini vuoti all'interno:


<UL TYPE=circle>
<LI> 
Prima 
<LI> 
Seconda 
<LI> 
Terza 
</UL>


Mentre l'attributo square imposta quadratini pieni:
<UL TYPE=square>
<LI> 
Prima 
<LI> 
Seconda
<LI>
Terza 

</UL>

 

 

{loadposition adsense}

 

Statistiche

Articles View Hits
1176534

Area riservata

Chi è online

We have 16 guests and no members online