HTML - Brevi cenni

L'HTML è un linguaggio per descrivere l'aspetto grafico di un documento. Questo documentop può provenire da internet oppure essere registrato sul proprio disco locale. Tramite delle parole chiave dette TAG il contenuto viene formattato in maniera grafica dal Browser che rappresenta l'interprete del linguaggio HTML

I caratteri speciali

Alcuni caratteri per il linguaggio HTML sono speciali: ad esempi lo spazio, il simbolo di maggiore, di minore etc...
Nella tabellina qui sotto sono riportate le codifiche di quelli utilizzati in questo documento di esempio

	Spazio
&	&
<	<
>	>

I FORMATI CARATTERE

Il testo può essere visualizzato in diversi modi: ad esempio in grassetto, corsivo, colorato etc...
Nella tabella qui sotto sono presentati i TAG html che ci permettono di agire sulle caratteristiche del carattere

TAG	Codice HTML	Risultato visivo
<B>	<B>Questo TAG è usato per il grassetto</B>	Questo TAG è usato per il grassetto
<I>	<I>Questo TAG è usato per il corsivo</I>	Questo TAG è usato per il corsivo
<U>	<U>Questo TAG è usato per sottolineare</U>	Questo TAG è usato per per sottolineare
<CODE>	<CODE>Questo TAG è usato per trasformare il testo in COURIER</CODE>	`Questo TAG è usato per trasformare il testo in COURIER`
<SUP>	Questo TAG è usato per il testo in <SUP>APICE</SUP>	Questo TAG è usato per trasformare il testo in ^APICE
<SUB>	Questo TAG è usato per il testo in <SUB>PEDICE</SUB>	Questo TAG è usato per trasformare il testo in _PEDICE
<FONT COLOR="Colore">	<FONT COLOR="RED">Questo TAG è usato per colorare il testo ad esempio di rosso</FONT> <FONT COLOR="BLUE">Questo TAG è usato per colorare il testo ad esempio di blu</FONT>	Questo TAG è usato per colorare il testo ad esempio di rosso Questo TAG è usato per colorare il testo ad esempio di blu
<FONT SIZE="numero">	<FONT SIZE="1">Questo TAG è usato per cambiare la dimensione del carattere a 1</FONT>	Questo TAG è usato per cambiare la dimensione del carattere a 1
	<FONT SIZE="2">Questo TAG è usato per cambiare la dimensione del carattere a 2</FONT>	Questo TAG è usato per cambiare la dimensione del carattere a 2
	<FONT SIZE="3">Questo TAG è usato per cambiare la dimensione del carattere a 3</FONT>	Questo TAG è usato per cambiare la dimensione del carattere a 3
	<FONT SIZE="4">Questo TAG è usato per cambiare la dimensione del carattere a 4</FONT>	Questo TAG è usato per cambiare la dimensione del carattere a 4
	<FONT SIZE="5">Questo TAG è usato per cambiare la dimensione del carattere a 5</FONT>	Questo TAG è usato per cambiare la dimensione del carattere a 5
<FONT FACE="Font">	<FONT FACE="Tahoma">Questo TAG è usato per cambiare il font in Tahoma</FONT> <FONT FONT="Arial Black">Questo TAG è usato per cambiare il font in Arial Black</FONT>	Questo TAG è usato per cambiare il font in Tahoma Questo TAG è usato per cambiare il font in Arial Black

come si può notare dagli esempi se apro un certo codice (es. <B> grassetto) per chiuderlo devo usare il TAG di chiusura </B> corrispondente. I tag di chiusura sono identici ai tag di apertura solo che prima del TAG devo mettere uno slash /

I FORMATI PARAGRAFO

Anche le caratteristiche di paragrafo (ad esempio gli allineamenti) possono essere modificati utilizzando dei TAG html. Ecco degli esempi.

TAG	Codice HTML	Risultato
<CENTER>	<CENTER>Questo TAG è usato per l'allineamento centrale</CENTER>	Questo TAG è usato per l'allineamento centrale
<p align="RIGHT">	<p align="RIGHT">Questo TAG è usato per l'allineamento a destra</P>	Questo TAG è usato per l'allineamento a destra
<p align="LEFT">	<p align="LEFT">Questo TAG è usato per l'allineamento a sinistra</P>	Questo TAG è usato per l'allineamento a sinistra
<p align="JUSTIFY">	<p align="JUSTIFY">Questo TAG è usato per l'allineamento giustificato</P>	Questo TAG è usato per l'allineamento giustificato ovvero il testo risulta allineato sia a destra che a sinistra
<BR>	Questo TAG è usato per andare a capo<BR>nuova linea<BR>nuova linea	Questo TAG è usato per andare a capo nuova linea nuova linea

LE TABELLE

I tag di base per gestire le tabelle sono riassunti nella tabella qui in basso:

<TABLE>	</TABLE>	Indica l'inizio e la fine di una tabella
<TR>	</TR>	Inizio e fine riga
<TD>	</TD>	Inizio e fine cella
<TH>	</TH>	Inizio e fine cella di intestazione

Utilizzando i TAG appena esposti potremo costruire questi esempi:

Esempio 1

<TABLE BORDER=1>
<TR>
<TH>colonna 1</TH>
<TH>colonna 2</TH>
<TH>colonna 3</TH>
<TH>colonna 4</TH>
</TR>
<TR>
<TD>cella 1,1</TD>
<TD>cella 1,2</TD>
<TD>cella 1,3</TD>
<TD>cella 1,4</TD>
</TR>
<TR>
<TD>cella 2,1</TD>
<TD>cella 2,2</TD>
<TD>cella 2,3</TD>
<TD>cella 2,4</TD>
</TR>
</TABLE>

colonna 1	colonna 2	colonna 3	colonna 4
cella 1,1	cella 1,2	cella 1,3	cella 1,4
cella 2,1	cella 2,2	cella 2,3	cella 2,4

Esempio 2 - La Scacchiera

Utilizzando l'attributo BGCOLOR possiamo colorare le celle a nostro piacimento L'attributo WIDTH ci permette di defnire la larghezza delle celle

Esempio 3

Utilizzando gli attributi VALIGN possiamo allineare verticalmente il testo all'interno di una cella
L'Attributo HEIGHT ci permete di definire l'altezza delle celle

<TABLE border=1 WIDTH=80%>
<TR>
<TD VALIGN=TOP HEIGHT=100>Allinemento in Alto</TD>
<TD VALIGN=CENTER HEIGHT=100>Allinemento in Centro</TD>
<TD VALIGN=BOTTOM HEIGHT=100>Allinemento in Basso</TD>
</TR>
</TABLE>

Allinemento in Alto

Allinemento in Centro

Allinemento in Basso

Esempio 4

Utilizzando gli attributi BORDER possiamo rendere invisibile il bordo della tabella (0 è invisibile, 1 visibile)
Inoltre l'attributo COLSPAN=<n> ci permette di unire <n> celle