Corso di HTML

 

Formattazione, Paragrafi, Elenchi puntati  



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 rendere chiaro e ben leggibile 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>