Com'è strutturata una pagina HTML
Nel 1990 Tim Berners-Lee e Robert Cailliau gettarono le basi del protocollo HTTP e con esso la prima versione dell’Hypertext Markup Language, meglio conosciuto con l’acronimo HTML.
L’HTML è un linguaggio di “markup”, ovvero di marcatura che permette di indicare come disporre gli elementi grafici e testuali all’interno di una pagina web. A partire dalla sua nascita è diventato in breve tempo uno degli strumenti più semplici, potenti e versatili per la creazione di contenuti.
I tag e la struttura ad albero
La struttura base dell’HTML è formata da una serie di marcatori che prendono il nome di “tag”. Questi definiscono gli elementi strutturali contenuti nel documento e sono racchiusi tra parentesi angolari. La maggior parte dei marcatori ha tag di apertura (ad esempio: <body>) e di chiusura (contrassegnati da uno slash “/”, ovvero </body>). L’insieme dei tag conferisce la tipica struttura “ad albero” al documento HTML, in cui ogni tag è figlio di altri fino ad arrivare al tag genitore, ovvero quello principale. Un elemento si dice genitore (parent) quando contiene altri elementi, mentre si dice figlio (child) quando è contenuto in un altro elemento. Nel seguente esempio vediamo com’è strutturato un documento HTML:
<html> <head> <title> XODUS blog/Com’è strutturata una pagina HTML </title> <meta name=”description” content=”descrizione del sito”> <link href= “fogliodistileesterno.css” rel=”stylesheet” type=”text/css”> <script language=”javascript” src=”script.js”></script> </head> <body> <h1> Benvenuti nel blog di XODUS New Media</h1> <p> In questo blog troverete informazioni di tecnologia, web marketing, web design e molto altro ancora. Veniteci a trovare!</p> </body> </html>
Come si può notare i tag principali di un documento HTML sono tre: il tag <html>, <head> e <body>. Vediamoli nel dettaglio.
Il tag html (<html>...</html>)
Il tag <html> rappresenta la radice di un documento HTML, è pertanto il tag cardine ovvero quello che indica al browser come deve interpretare il documento. Questo tag è quindi il contenitore di tutti gli altri tag, come <head> e <body>.
Il tag head (<head>...</head>)
Il tag <head> racchiude le informazioni a livello di documento, non necessariamente visibili agli utenti. Infatti, in questa sezione trovano posto tutti quei tag che impartiscono direttive al browser e ai motori di ricerca. Di seguito i principali elementi contenuti in <head>:
- Il <title> indica il titolo della pagina, ovvero quello che solitamente viene visualizzato in cima alla finestra browser o all’interno del tab.
- I <meta> vengono usati per istruire i browser e i motori di ricerca tramite metadati. Nello specifico possiamo indicare le parole chiave, l’autore della pagina web, l’ultima data di modifica dei contenuti e molto altro.
- <script>, viene utilizzato per definire gli script client-side, come ad esempio JavaScript che viene utilizzato per dare dinamicità ai contenuti. Gli script possono essere incorporati nella pagina oppure collegati tramite file esterni.
- Nel tag <head> troviamo anche i CSS (fogli di stile a cascata) che definiscono gli stili grafici di ogni elemento HTML presente nella pagina web. I CSS possono essere incorporati direttamente nel codice HTML con il tag <style type="text/css"></style>. La soluzione migliore però è quella di inserire un link ad un foglio di stile esterno utilizzando l’attributo href come nel seguente esempio: <link href="stile.css" rel="stylesheet" type="text/css">.
Il tag body (<body>...</body>)
Racchiude il corpo del documento, ovvero ciò che il browser effettivamente visualizzerà. Al suo interno possono essere inseriti i titoli, i paragrafi, le immagini, i suoni, i filmati, le tabelle, i link e quant’altro.
Siamo giunti al termine di questa prima lezione di HTML, nei prossimi articoli vedremo in dettaglio come lavorare nel tag <head> e <body>. Vi invitiamo a lasciarci i vostri commenti, suggerimenti e quant’altro attraverso il modulo di contatto oppure seguiteci sulla nostra pagina Facebook!
Valentina Lagorio