Ogni sorgente HTML5 è delimitato dalla coppia di marcatori
<!DOCTYPE html >
ed è suddiviso in due sezioni fondamentali:
l'intestazione, delimitata da
<head>...</head>
il corpo, delimitato da
<body>...</body>
Quindi la struttura fondamentale di un documento HTML è la seguente
<!doctype html>
<head>
...............
</head>
<body>
...............
</body>
</html>
Ognuna di queste due sezioni si può poi articolare in blocchi delimitati da appositi marcatori.
Il testo all'interno dell'intestazione non è visualizzato dal browser ma è da esso utilizzato per avere indicazioni generali sulle caratteristiche del documento.
Ad esempio nell'intestazione possono essere presenti dei marcatori <meta> confezionati nel seguente modo:
Una sezione dell'intestazione non obbligatoria ma da non dimenticare è costituita dal titolo:
<title>...</title>
Il titolo viene riprodotto nell'intestazione della finestra del browser, cioè nella prima riga in alto, di solito su fondo scuro.
Un'altra utilissima sezione è quella di stile che specifica a priori le caratteristiche tipografiche dei marcatori quando queste sono diverse da quelle di default.
Ad esempio per specificare modalità non standard di riproduzione tipografica di tutta la sezione <body>...</body>
<style type="text/css">
body
{
margin-left: 16px;
margin-right: 16px;
margin-top: 16px;
margin-bottom: 16px;
background-color: azure;
color: #000000;
font-family: helvetica,arial,sans-serif;
font-size: 90%;
}
</style>
Notare che il tag <style> è seguito dall'attributo type il cui valore è text/css.
Nell'esempio si stabilisce che il documento deve essere visualizzato con 16 pixel di margine a sinistra, a destra, sopra e sotto, con sfondo azzurro, con testo nero, con uno dei caratteri disponibili indicati in font-family, nell'ordine dato; i caratteri hanno dimensioni al 90% di quelle standard.
Nella sezione style le specificazioni possono susseguirsi senza limiti.
Inoltre da un marcatore standard si possono derivare altre versioni dello stesso tipo definite dall'utente facendo seguire il nome dell'marcatore standard da un punto e da un identificatore di classe.
Ad esempio dal marcatore <p> può essere derivata la classe <p.speciale>.
Per ottenere che il testo di un paragrafo in <body> sia stampato con caratteri fixedsys si scriverà nel seguente modo:
<p.speciale>Questo è un paragrafo speciale</p>
Ad esempio:
<style type="text/css">
body
{
margin-left: 16px;
margin-right: 16px;
margin-top: 16px;
margin-bottom: 16px;
background-color: azure;
color: #000000;
font-family: helvetica,arial,sans-serif;
font-size: 90%;
font-size: 90%;
}
p.speciale
{
font-family: fixedsys
}
h1
{
font-family: "Brush Script MT","Arial Black";
font-size: 200%;
color: red;
}
</style>
Nel'esempio di sezione <style> proposto ci sono diverse specificazioni che si riferiscono a colori, specificati talora da identificatori numerici talora da identificatori alfabetici.
In HTML un colore può essere specificato in tre modi:
In base a quanto detto finora il sorgente HTML avrebbe questo aspetto:
<html>
<head>
<title>Documento HTML</title>
<style type="text/css">
body
{
margin-left: 16px;
margin-right: 16px;
margin-top: 16px;
margin-bottom: 16px;
background-color: azure;
color: #000000;
font-family: helvetica,arial,sans-serif;
font-size: 90%;
}
p.speciale
{
font-family: fixedsys;
color:rgb(0,200,0);
}
h1
{
font-family: "Brush Script MT","Arial Black";
font-size: 200%;
color: red;
}
</style>
</head>
<body>
</body>
</html>
Dato che la sezione <style> può essere molto corposa ma soprattutto può servire per molti documenti è utile scriverla a parte e salvarla in un file di testo apposito con estensione *.css: ad esempio "IlMioStile.css" .
Nella sezione <head>, invece di dichiarare una sezione <style>, si richiama tale file nel seguente modo:
<link href="IlMioStile.css" type="text/css" rel="stylesheet" />
Notare che il tag <link /> è un tag 'vuoto' e va chiuso con la barra,
Notare inoltre che questo tag è modulato dagli attributi href, type, rel di ognuno dei quali è specificato il valore.
Con questo miglioramento il sorgente HTML appare ora così:
<!DOCTYPE html>
<head>
<title>Documento HTML</title>
<link href="IlMioStile.css" type="text/css" rel="stylesheet" />
</head>
<body>
........................
</body>
</html>