Tag Delimitatori
Abbiamo visto che i tags sono comandi racchiusi all'interno dei segni matematici di minore < e maggiore >. I comandi, come tutti gli altri linguaggi, sono parole in lingua inglese che mnemonicamente associano l'azione relativa. Così ad esempio, <table> è il comando per inizializzare la costruzione di una tabella, <th> indica l'intestazione della tabella (table header) e <tr> riga della tabella stessa (table row). Un'altra considerazione da fare prima di addentrarci nella descrizione dei tag, è che questi viaggiano sempre in coppia, nel senso che ad ogni tag di apertura deve seguire il corrispettivo tag di chiusura. Nell'esempio precedente il tag di apertura <table> deve necessariamente corrispondere un tag di chiusura della tabella </table>. Questo è già un esempio di delimitazione, nel senso che i due tags delimitano la tabella e quindi il suo contenuto deve essere compreso all'interno dei due tags.
Delimitazione delle sezioni
Una pagina HTML si può considerare composta da due sezioni, una di intestazione (header), e una che costituisce il corpo (body) del documento. La prima coppia di tag delimitatrice è <html> e </html>, essa delimita , come è facilmente intuibile, l'intero documento html. Quindi se esaminassimo il codice di una pagina web, constateremmo che l'intero documento è racchiuso tra questi due tags.
Sezione Intestazione (head)
Questa sezione è delimitata dai tags <head> e </head>. All'interno di questa sezione vengono inserite delle informazioni sul tipo di insieme di caratteri utilizzato, sulle generalità dell'autore, una descrizione del contenuto della pagina etc. Queste informazioni e altre funzioni che vedremo in seguito sono inserite all'interno del TAG META che per inciso è uno dei comandi che non necessitano del corrispondente TAG di chiusura. Un'altro elemento, che non dovrebbe mai mancare, contenuto in questa sezione, è il titolo della pagina. Il titolo della pagina viene inserito tra i tag <title> e </title> e viene visualizzato in alto a sinistra della finestra del nostro browser. In questa sezione, poi, vengono inseriti gli script di altri linguaggi come Javascript, Php (vedi il tutorials relativi), nonchè quelli del Cascade Style Sheet (CSS).
Sezione corpo del documento (body)
Questa sezione è delimitata dai tags <body> e </body>. In questa sezione è racchiuso tutto il contenuto della pagina e il resto dei comandi del linguaggio che ne permettono il suo posizionamento e aspetto. A questo punto è utile introdurre il concetto di attributi cominciando con quelli relativi al TAG <body>. Per mezzo di questi attributi è possibile stabilire il colore di sfondo del documento, dei caratteri e dei links, nonchè i margini.
Ad esempio:
<body bgcolor="blue" text="cyan" topmargin="10" leftmargin="5" rightmargin="5" link="purple" >
farà apparire un documento con sfondo di colore blu e il testo di colore ciano, i link saranno di colore viola mentre il margine superiore sarà di 10 pixel e quelli destro e sinistro di 5 pixel. Il colore può essere specificato sia con il suo nome che con il suo numero esadecimale preceduto dal carattere hash (#), es. "#000000" corrisponde al nero. Se invece di un semplice colore si volesse inserire come sfondo una immagine, questa operazione è resa posssibile grazie all'attributo "background" seguito dall'indicazione della posizione in cui si trova l'immagine, es. background="immagine.jpg".
Prima pagina
Con le conoscenze fin quì acquisite possiamo costruire la prima pagina web con i comandi essenziali e gli attributi del tag "body" che abbiamo visto.
<html>
<head>
<title>Prima pagina</title>
</head>
<body>
BENVENUTO NEL MONDO DELLE PAGINE WEB!!!
</body>
</html>
il listato precedente produrrà una pagina bianca con visualizzato il messaggio
BENVENUTO NEL MONDO DELLE PAGINE WEB!!!
in alto a sinistra del vostro browser.
Se volessimo visualizzare il messaggio al centro (orizzontalmente), lo faremmo precedere dal tag
<center> e seguire dal tag di chiusura </center>.
A voi il divertimento di visualizzare la pagina con la combinazione dei colori e con il messaggio che preferite, non prima di avervi introdotto un altro tag, e precisamente quello che permette il posizionamento (grossolano) verticale <br>, dalla parola inglese break.