Nella prima lezione abbiamo visto come è strutturato un tag, in questa vedremo come scrivere lo scheletro di una pagina HTML.
Partiamo creando una cartella nella quale salvare tutti i file. Apriamo l’editor (VS Code), cambiamo il linguaggio di scrittura in HTML e salviamo il file con il nome di index.html nella cartella creata.
In questo modo abbiamo creato un file apribile dal browser. Apriamo il file creato nel browser (vi consiglio di usare Chrome ed evitare assolutamente Internet Explorer), e vedremo una pagina completamente vuota.
Iniziamo a scrivere la pagina
Per creare la struttura base dovremo procedere in questo modo.
<!DOCTYPE html>
<html>
<head>
<title>Titolo</title>
</head>
<body>
<h1>Intestazione</h1>
<p>Paragrafo</p>
</body>
</html>
Nella prima riga abbiamo dichiarato al browser che leggerà la pagina che la versione 5 del HTML.
Nella seconda riga abbiamo aperto il tag html chiudendolo nell’ultima riga. Questo tag serve a far capire al browser in modo esplicito che stiamo scrivendo in HTML.
E ora vediamo due parti cruciali in una pagina HTML: il tag head e il tag body.
Head
Il tag head, che in italiano significa testa, contiene tutte le informazioni utili al browser e i motori di ricerca, per la maggior parte non visibili, per interpretare correttamente la visualizzazione della pagina.
Possiamo notare il tag title all’interno della sezione (tag) head, che indica il titolo della pagina, rappresentato graficamente nel titolo della scheda. Tag fondamentale per il SEO (Search Engine Optimization) che indica il titolo mostrato nei risultati di ricerca.
Body
Il tag body, che in italiano significa corpo, contiene la maggior parte degli elementi visibili di una pagina.
Nella sezione body troviamo anche il tag h1. Avrete notato che questo tag ha un numero ed è l’unico tag HTML con questa particolarità. Ma questo non è un caso perché esistono anche i tag h2, h3, h4, h5 e h6.
Il tag h(1-6) sta ad indicare le intestazioni (headings), dove h1 è quella con il font più grande (e con maggiore importanza per il SEO) e a scalare h6 (quasi mai utilizzato, ci si ferma al massimo ad h5) con il font di default più piccolo.
Vediamo poi il tag p già visto nella lezione precedente che sta ad indicare un paragrafo.
Approfondimento
– non presente in video –
Una cosa che noterete quasi immediatamente è che nel HTML se si va a capo in un testo, visualmente è come se aveste dato uno spazio, questo perché il linguaggio HTML non permette di farlo se non con dei tag come <pre> che mantengono la formattazione data nel codice. Oppure più normalmente mettendo il testo in più paragrafi, o utilizzando il tag <br> (tag autochiudente), che è un “a capo” forzato.
Se avete domande o suggerimenti potete scriverle qui sotto o su YouTube.
