| Guida HTML: La Struttura del Documento HTML | |||||||
| 3 Aprile 2008 | HTML |
|
|
|
|
||
Introduzione
Html è un linguaggio di marcatura (HyperText Markup Language) per la visualizzazione di ipertesti. Un ipertesto è un documento al cui interno oltre al normale testo sono presenti altri elementi come immagini, video, audio, collegamenti ad altri ipertesti.Html è costituito da diverse marche (markup o tag), ciascun tag indica come deve essere visualizzato il testo racchiuso tra quel tag, o come deve essere visualizzata l'immagine o a quale altro ipertesto effettuare il collegamento, eccetera.
Struttura del Documento
La tipica struttura di un documento html è la seguente<!DOCTYPE ... ><html><head>...</head><body>...</body></html>
-
Una linea contenente le informazioni sulla versione html utilizzata nel documento.
Un esempio è il seguente
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN""http://www.w3.org/TR/html4/strict.dtd">
in cui si specifica che il documento è un documento html (DOCTYPE html), e si indica il dtd, che in questo caso si trova all'indirizzo http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd.
Ci sono tre tipi di dtd in html 4.01: strict dtd, transitional dtd, frameset dtd. - La testa (head);
- Il corpo (body);
Head
Nella sezione testa del documento html vengono inserite informazioni sul documento attraverso i seguenti elementi- Il titolo del documento, che va inserito tra i tag <title> e </title>
- Si possono inserire delle definizioni css tra la coppia di tag <style> </style> o degli script javascript tra la coppia di tag <script> </script>. Oppure i link a file esterni contenenti le definizioni css o gli script javascript tra la coppia di tag <link> </link> (o con l'unico tag <script ... /> per gli script javascript o <link ... /> per le regole css);
- Si possono inserire i cosiddetti meta-tags tra la coppia di tag <meta> </meta> (oppure con l'unico tag <meta ... />)
Esempio
<html><head><title>Titolo della Pagina</title><meta name="description" content="descrizione del sito" /><meta name="keywords" content="keyword1, keyword2, ..." /><meta name="language" content="italian" />...<link rel="shortcut icon" href="favicon.ico" /><style type="text/css">body {background:#ebeadb;font-family:font-family:Arial, Helvetica, sans-serif;}...</style><link rel="stylesheet" href="style.css" />...<script type="text/javascript">...</script><script type="text/javascript" src="script.js"></script>...</head>...
Nella sezione testa di questo documento html è stato inserito il titolo della pagina, alcuni meta tags che forniscono la descrizione del sito, la lista delle keywords, e la lingua in cui è scritto il documento.
Viene indicata la favicon da utilizzare e vengono inserite delle regole css sia direttamente, tra la coppia di tag <style> </style>, sia importandole dal file style.css.
Quindi vengono inseriti due script javascript, uno direttamente nella sezione testa, l'altro viene importato dal file script.js.
Body
Il body è il corpo del documento, in questa sezione verranno inseriti il testo, le immagini, i link e tutti i componenti dell'ipertesto. All'interno del body sarà possibile inserire anche codice javascript inserendolo tra la coppia di tag <script> </script>. Inoltre per ogni tag all'interno del body, compreso il tag <body>, sarà possibile indicare lo stile di visualizzazione tramite le regole css inserendo le regole all'interno del tag nell'attributo style. Sarà possibile anche associare ad ogni tag un particolare evento in seguito al quale eseguire del particolare codice javascript.Esempio
<html><head>...</head><body style="background-color:#a3d4f0" onload="sc()">...<p style="font-family:arial;background:aqua;">Testo scritto in arial con colore di sfondo aqua</p>...</body></html>
Tramite l'attributo style del tag body si indica il colore di sfondo del documento html, con onload si indica che quando la pagina html sarà caricata dal browser verrà eseguita la funzione javascript sc().
Tramite l'attributo font-family e l'attributo background del tag p si indica che il testo compreso tra quella coppia di tag <p> </p> sarà scritto con font arial ed il colore di sfondo sarà aqua.