Struttura pagina HTML
La struttura base di un documento HTML è molto semplice e può essere riassunta così:
<!DOCTYPE HTML> |
<html> |
<head> |
.... |
</head> |
<body> |
.... |
</body> |
</html> |
I puntini di sospensione indicano la presenza di codice HTML (questo è un esempio di pagina vuota, che non produce nessuna visualizzazione).
La pagina si compone di alcune "parti" predefinite, indicate sopra con colori diversi. Esaminiamole ora brevemente una per una. Per comodità, facciamo anche riferimento alla pagina di esempio già vista nella lezione sugli Strumenti, che riportiamo qui sotto:
<!DOCTYPE html> |
<html> |
<head> <meta charset="utf-8"> |
<title> La mia prima pagina in HTML </title> |
</head> |
<body> |
<p>Ecco la mia <strong> prima pagina!!!! </strong> in HTML </p> |
<p> Visita <a href = " http://www.programmiamo.altervista.org/index.html"> Programmiamo</a>:<br /> potrai imparare tutti i segreti dell'HTML! </p> |
</body> |
</html> |
Ci occuperemo nella prossima lezione della dichiarazione DOCTYPE che sta all'inizio della pagina. Per adesso diciamo solo che non si tratta di un tag, ma di un tipo diverso di dichiarazione.
Nel resto della pagina possiamo individuare una serie di "istruzioni" in linguaggio HTML, dette più precisamente tag. Questi sono facilmente riconoscibili perché sono tutti racchiusi fra i simboli di "<" e di ">" (per esempio <body>, </head>, <p>...).
Fra i tag ve ne sono alcuni detti "di apertura" e altri detti "di chiusura". I tag di chiusura si distinguono per la presenza del simbolo di divisione (in inglese slash, /) a inizio tag. Così per esempio <body> è un tag di apertura e il suo corrispondente tag di chiusura è </body>.
I tag di apertura sono "accoppiati" con i corrispondenti tag di chiusura un po' come le parentesi aperte e chiuse in una espressione matematica. Una coppia di tag di apertura e di chiusura delimita quello che si chiama elemento (alcuni elementi sono costituiti da un unico tag di apertura/chiusura e si dicono elementi vuoti).
In una qualsiasi pagina HTML è generalmente sempre possibile individuare gli elementi mostrati in figura:
In HTML la maggior parte degli elementi possiede anche un certo numero di attributi, mediante i quali è possibile specificare più dettagliatamente il comportamento dell'elemento stesso.
Per esempio si consideri
<a href = " http://www.programmiamo.altervista.org/index.html"> Programmiamo </a>
Il tag in questo caso è <a> e serve per creare un link su una parola (Programmiamo, nel nostro esempio). href è un attributo del tag <a> e serve per specificare l'indirizzo della pagina internet che dovrà essere aperta cliccando sul link. L'indirizzo della pagina http://www.programmiamo.altervista.org/index.html si chiama valore dell'attributo.
In generale un tag può avere più di un attributo e la sintassi per l'uso degli attributi e dei relativi valori è la seguente:
<tag attributo1 = "valore1" attributo2 = "valore2" .... >
Possiamo suddividere tutti gli elementi che compongono una pagina HTML in tre categorie:
Si osservi che:
Sito realizzato in base al template offerto da
http://www.graphixmania.it