Guida all'HTML
a cura di Riccardo Guido e Gregorio Teti

Costruire la pagina

Per creare una pagina Web innanzitutto bisogna usare un "editor" per poter scrivere il codice. Lo strumento più semplice e facilmente rintracciabile è "Il Blocco Note" presente in ogni versione di Windows. Apri il Blocco note ad una pagina vuota e salvala con il comando "Salva con nome ...", scegli dove salvare il file ed imposta il comando "Salva come .." cliccando sulla ComboBox alla voce "Tutti i file". Infine immetti un nome ricordando di mettere anche l'estensione al file(Es.: nomefile.htm). Ora possiamo cominciare a creare la prima pagina:
Il primo comando da utilizzare è il tag che permette al Browser di interpretare la pagina come una pagina "Web":<HTML> seguito poi da un altro tag importante <HEAD>, serve per creare la "Testata" della pagina (come se fosse un giornale). In esso vengono inserite tutte quelle informazioni che servono ai motori di ricerca per trovare l'indirizzo della pagina ed il titolo della pagina. Sia il tag <HTML> che il tag <HEAD> sono a chiusura obbligatoria, quindi corrisponderà un tag </HEAD> e poi </HTML>.
Esempio:
OperazioneCodiceEsempio:
Inizializza la pagina
Apri Testata
Apri/chiudi Titolo
Comando "meta"
Comando "meta"
Chiude la Testata
Chiude la pagina
 <HTML>
<HEAD>
<TITLE>Esempio Web</TITLE>
<META NAME="Description"CONTENT="Esempio">
<META NAME="Keywords" CONTENT="vb5, html, javascript">
</HEAD>
</HTML>

Impostare la pagina

Ora passiamo ad impostare il "corpo" della nostra pagina Web. Il tag da usare è <BODY>. Anche questo tag è a chiusura obbligatoria e verrà chiuso con </BODY>.
Gli attributi principali del tag "BODY" sono: BGCOLOR="" TOPMARGIN="" BOTTONMARGIN= "" LEFTMARGIN="" RIGHTMARGIN="" TEXT="" BACKGROUND="" LINK="" VLINK="" ALINK="". Il primo imposta il colore di sfondo della pagina Web, il secondo la distanza tra il testo e il margine superiore della pagina, il terzo, il quarto ed il quinto per i margini della pagina, il sesto per il colore del testo (di base), il settimo serve per caricare immagini e/o suoni nella pagina ed infine gli ultimi tre attributi impostano i colori dei collegamenti (links).
Esempio:
OperazioneCodiceEsempio:
Inizializza la pagina
Informazioni
Apri Testata
Apri/chiudi Titolo
Comando "meta"
Comando "meta"
Chiude la Testata
Imposta il corpo


Chiude il corpo
Chiude la pagina		 <HTML>
<!DOCTYPE HTML PUBLIC"-//W3C/DTD HTML 3.2 Final //IT>
<HEAD>
<TITLE>Esempio Web</TITLE>
<META NAME="Description"CONTENT="Esempio">
<META NAME="Keywords" CONTENT="vb5, html, javascript">
</HEAD>
<BODY BGCOLOR="#080080" TOPMARGIN="4" BOTTONMARGIN= "0"
LEFTMARGIN="10%" RIGHTMARGIN="10%" TEXT="#000000"
BACKGROUND="" LINK="" VLINK="" ALINK="">
</BODY>
</HTML>

Nonostante tutto ancora dal nostro esempio non riusciamo a notare nulla nella nostra pagina; infatti ancora non abbiamo inserito nulla.

Il paragrafo

Il testo che inseriamo nella nostra pagina può essere diviso in paragrafi e titoli (proprio come un libro). Per inserire un paragrafo utilizziamo il tag <P>.Questo non è a chiusura obbligatoria anche se per una migliore visualizzazione e chiarezza conviene sempre usare il tag </P>. Un attributo importante è "ALIGN" che permette di allineare il testo a sinistra("Left"), centrato("Center"), a destra("Right") o giustificato("justify").
Esempio:
OperazioneCodiceEsempio:
Inizializza la pagina
Informazioni
Apri Testata
Apri/chiudi Titolo
Comando "meta"
Comando "meta"
Chiude la Testata
Imposta il corpo


Testo
Chiude il corpo
Chiude la pagina		 <HTML>
<!DOCTYPE HTML PUBLIC"-//W3C/DTD HTML 3.2 Final //IT>
<HEAD>
<TITLE>Esempio Web</TITLE>
<META NAME="Description"CONTENT="Esempio">
<META NAME="Keywords" CONTENT="vb5, html, javascript">
</HEAD>
<BODY BGCOLOR="#FFFFFF" TOPMARGIN="4" BOTTONMARGIN= "0"
LEFTMARGIN="10%" RIGHTMARGIN="10%" TEXT="#000000"
BACKGROUND="" LINK="" VLINK="" ALINK="">
<P ALIGN="justify">Questo č un esempio</P>
</BODY>
</HTML>

Per il titolo possiamo usare un paragrafo personalizzato(grandezza carattere, colore, centrato, etc.) oppure usare dei comandi standard, quali: <Hn> dove "n" è uguale a "1, 2, 3, 4, 5 o 6".

Le Tabelle

La tabella utilizza due tag principali <TABLE> che inizializza la tabella e </TABLE> che chiude la tabella. All'interno dei due tag inseriamo il tag <TR> che serve per creare la prima riga della tabella ed il tag </TR> che chiude la prima riga. Creata la prima riga possiamo impostare le colonne (per la prima riga); il tag da usare è <TD> per aprire la prima colonna ed il tag </TD> per chiudere la prima colonna.
È importante usare questo ordine per non creare confusione nel codice, quindi prima impostare la tabella, poi creare la prima riga ed infine creare la prima colonna; poi si chiude la prima colonna, dopo la prima riga ed infine la tabella. I tag sono a chiusura obbligatoria, se omettiamo un tag di chiusura il browser non riconoscerà la tabella ed associerà il codice seguente scritto all'ultimo tag aperto.
Esempio:
OperazioneCodiceEsempio:
Crea la tabella
Inizio Riga 1
Inizio e fine Colonna1
Inizio e fine Colonna2
Chiude Riga 1
Inizio Riga 2
Inizio e fine Colonna1
Inizio e fine Colonna2
Chiude Riga 2
Chiude la tabella
 <TABLE border=1>
<TR>
<TD>R1.C1</TD>
<TD>R1.C2</TD>
</TR>
<TR>
<TD>R2.C1</TD>
<TD>R2.C2</TD>
</TR>
</TABLE>

Naturalmente ho inserito solo 2 righe e due colonne in questo esempio, ma la procedura per aggiungere altre righe e/o colonne è la stessa. La tabella puņ avere il bordo più o meno grande(oppure anche essere invisibile). Nel nostro esempio abbiamo l'attributo "border=1" , se omettiamo il numero(Es.: "") il bordo risulterà invisibile; questo può essere utilizzato per esempio per allineare del testo (messo nella R1.C1) con una immagine (messa nella R1.C2). Possono essere usati altri attributi per migliorare la visualizzazione della tabella, che però tratterò, nella sezione "avanzata".

< Indietro

< Menu Principale >

Avanti >