L’HTML (HyperText Markup Language) è il linguaggio di formattazione utilizzato per creare e strutturare le pagine web. Contiene l’insieme di regole che indicano al browser come i vari elementi di una pagina devono essere visualizzati nello schermo. Gli elementi più usati nelle pagine web sono il titolo e i sottotitoli, i paragrafi, i caratteri, le immagini, i video, le tabelle e le liste. Questo articolo è un’introduzione a questo linguaggio per chi non l’ha ancora studiato o un ripasso per chi conosce le basi.
Il linguaggio HTML è stato sviluppato da Tim Berners-Lee verso la fine degli anni ‘80 per facilitare lo scambio di documenti tra ricercatori e venne rilasciato nel 1993. E’ diventato così importante che il Word Wide Consortium stabilì delle regole standard che i siti devono seguire e nel corso dei decenni ha avuti delle nuove versioni. La versione più recente è quella del 2014: viene chiamata HTML5 e supporta gli elementi audio e video senza bisogno di strumenti esterni.
Per scrivere una pagina web manualmente basta aprire un blocco note o un qualsiasi editor di testo molto semplice e salvare il file scrivendo la sua estensione .html. Ad esempio, possiamo creare un file e dargli il nome prova.html.
Il testo va inserito all’interno di appositi tag di apertura e chiusura, parole chiavi dentro i segni minore e maggiore che indicato che tipo di elemento contiene il testo. Ad esempio il titolo principale viene contenuto nei tag <h1>….</h1> e i paragrafi nei tag <p>….</p>.
Per creare un collegamento tra la pagina che si sta leggendo e un’altra si usa il tag <a> indicando al suo intero l’url del nuovo file. All’interno del file si possono anche scrivere codici CSS e JavaScript.
La struttura base dell’HTML
Questo è un esempio di struttura base che introduce un sito HTML: ciascuna informazione è racchiusa o raggruppata in tag:
<!DOCTYPE html>
<html lang="it">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Sito web dedicato ai viaggi">
<title>Viaggiando insieme</title>
</head>
<body>
<h1>Viaggiando insieme</h1>
<p>Benvenuti nel mio blog sui viaggi intorno al mondo</p>
<a href="./blog.html">Leggi gli ultimi articoli</a>
</body>
</html>Ecco una spiegazione degli elementi principali:
- <!DOCTYPE html>: indica al browser che il file è un documento HTML5, l’ultima versione di questo linguaggio.
- <html></html>: racchiude tutta la pagina e ci permette anche di definire alcune informazioni come la lingua del documento.
- <head></head>: Tutto ciò che scriveremo al suo interno non verrà mostrato nella pagina. Sono informazioni per gestire la pagina. E’ qui che sceglieremo il titolo, il logo, e altre informazioni importanti.
- <body></body>: Contiene gli elementi della pagina quali sottotitoli, paragrafi, immagini, tabelle, ecc.
All’interno del tag head abbiamo inserito diversi tag <meta>. Questi metadati vengono letti dal browser o dai motori di ricerca e servono a capire il contenuto del sito e a come deve essere visualizzato. Questi elementi non hanno bisogno di tag di chiusura. Ricordiamo anche gli elementi all’interno di body:
- h1: è il titolo principale; puoi usare anche il tag h2 per i sottotitoli principali
- p: è un paragrafo
- a: è il collegamento per andare in un altra pagina web.
Ad un file HTML vengono aggiunti file CSS per gestire la grafica del sito e file JavaScript per aggiungere le funzionalità utili all’utente.