Creare una pagina web da zero

Prepariamo la base di un file HTML

creativecode avatar Giulio Tiseo

27 Giu, 2019

~8 min.

Imparerai a creare una pagina web da zero e quali sono gli strumenti di cui hai bisogno per iniziare il tuo progetto HTML. Lo scopo dell'articolo è quello fornirti una panoramica completa sugli elementi di base del template di una pagina così che tu possa conoscere le loro funzioni.

Requisiti

Questo articolo è particolarmente ricco di informazioni e ti mostrerà in modo completo e dettagliato tutto ciò che riguarda il template base di una pagina web. Per comprendere gli argomenti descritti in questo articolo ti suggerisco di approfondire prima gli argomenti trattati negli articoli Primi passi con il linguaggio HTML e Gli attributi di un tag

# L’editor di testo

Per creare una pagina web da zero, non è necessario avere strumenti particolarmente complessi e dispendiosi, anzi. Partiamo da questa premessa: una pagina web non è altro che un file di testo con estensione .html.

Senza perdere troppo tempo, prova a creare una pagina web da zero in questo modo:

  1. Apri l’editor di testo del tuo Sistema Operativo (blocco note per chi è su Windows);
  2. Crea un titolo con il tag h1;
  3. Crea un paragrafo con il tag p;
  4. Salva con nome il file e rinominalo in questo modo: index.html, accertandoti di aver eliminato l’estensione che l’editor imposta di default (es. txt);
  5. Apri il file html appena salvato con un Browser.

# Visual Studio Code

In pochi attimi hai realizzato una semplicissima pagina web. In teoria è possibile creare da zero interi siti con editor di testo come il blocco note. Tuttavia, esistono software specifici molto più comodi che faciliteranno estremamente il tuo lavoro. Uno fra questi è Visual Studio Code (VS Code), uno degli editor più utilizzati fra sviluppatori e designer per via della sua incredibile efficienza e versatilità. VS Code è un editor totalmente open source che puoi scaricare direttamente dal sito ufficiale.

Una volta scaricato VS Code, utilizzalo per aprire il file index.html. In pochi attimi si aprirà una schermata che mostra il codice. Puoi constatare fin da subito che la differenza di visualizzazione rispetto al blocco note è notevole già dal primo impatto.

Puoi osservare che i tag vengono contrassegnati con una colorazione diversa, similmente a quanto visto nella developer tools del browser. Inoltre, se provi a scrivere un nuovo elemento, l’editor ti aiuterà con una serie di suggerimenti, caratteristica utile soprattutto alle prime esperienze quando non sempre è facile ricordarsi il nome di ogni tag. Grazie a VS Code potrai sfruttare anche la funzionalità di chiusura automatica dell’elemento, in modo da prevenire (non sempre!) i classici errori di mancata chiusura.

# Fase preliminare per creare una pagina web da zero

Creare una pagina web da zero significa predisporre i file e le cartelle di cui abbiamo bisogno con criterio e ordine. Vai sul desktop e crea una nuova cartella rinominandola: Guida base all’HTML. Questa sarà la cartella che riempirai con il materiale presentato in questa guida. Ora vai su VS Code e seleziona dalla barra delle opzioni: File, Apri Cartella… A questo punto apri la cartella appena creata.

Come puoi notare, l’editor ti mostra una finestra con una sidebar che ti permette di esplorare la cartella che hai selezionato. Vai nella sidebar e seleziona l’icona per creare una nuova cartella, rinominandola _boilerplate. A questo punto, fai click sulla cartella appena creata e questa volta seleziona l’icona per creare un Nuovo File rinominandolo: index.html.

Index è un nome standard che gli sviluppatori attribuiscono alla Homepage di un sito. Ti suggerisco di utilizzare sempre questa nomenclatura anche in futuro, nelle lezioni più avanzate scoprirete il perché…

Una volta creata la index, noterai che VS Code aprirà automaticamente il file al centro della finestra. A questo punto sei pronto per creare il tuo progetto!

# Cos’è un Boilerplate HTML?

Il codice boilerplate è un testo o template standard di configurazione base che ammette delle modifiche minime. Per creare una pagina web da zero, abbiamo bisogno di scrivere una serie di dichiarazioni di base che specificano la tipologia di file e altri elementi fondamentali. Il boilerplate può essere definito come un template iniziale, ovvero un codice che possiamo riutilizzare quando creiamo una nuova pagina. In Vs Code esiste uno shortcut che permette con estrema facilità di scrivere il boilerplate in un attimo, ma lo scopo di questa lezione è capire esattamente il significato di ciascun elemento di base, quindi procederemo per gradi scrivendo le dichiarazioni una dopo l’altra.

# Cos’è DOCTYPE?

Il Boilerplate HTML iniziano sempre con un’intestazione:

<!DOCTYPE html>

Con questa riga dichiariamo il tipo di documento in modo tale che il browser possa essere in grado di interpretare la pagina secondo lo standard corretto. Nel caso specifico, la riga di codice <!DOCTYPE html> definisce una pagina scritta secondo lo standard HTML5.

Se vuoi, puoi provare a scrivere una pagina in una versione precedente, come ad esempio XHTML, dovrai scrivere l’intestazione della pagina in questo modo:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

Come puoi notare, in passato l’intestazione era prolissa e contorta rispetto alla versione attuale. Ad ogni modo, anche se fa molto vintage, ti sconsiglio di scrivere qualsiasi tipo di codice in versioni deprecate. Anche se te ne ho parlato e ho faticato molto a scriverti l’intestazione dei documenti XHTML (non è vero l’ho copiata e incollata), è preferibile non adottare mai questo genere di soluzione. Te l’ho mostrata solo per farti sapere che quella che c’è oggi è migliore. 😛

# A che serve il tag HTML?

La riga successiva è contrassegnata dal tag <html>. Con questo tag comunichiamo al browser che tutto ciò che è contenuto all’interno di questo elemento, deve essere interpretato come codice HTML. L’elemento <html> viene definito nel gergo tecnico come root element.

Dopo aver definito il tag <html> possiamo realizzare subito la struttura elementare di una pagina HTML attraverso i due macro-elementi: <head> e <body>.

<html>
  <head></head>
  <body></body>
</html>

# Cosa dichiaro nel tag HEAD?

Il tag <head> è la parte del codice HTML in cui vengono dichiarate le informazioni relative alla pagina web. Attraverso il tag head, il browser sarà in grado di gestire la pagina grazie a tag come il <title> o il <meta charset="">, attraverso il quale sarà possibile definire la corretta codifica dei caratteri.

<head>
  <meta charset="">
  <title></title>
</head>

# A cosa corrisponde il tag TITLE?

Il tag title comunica al browser il titolo della pagina. Ciò che viene dichiarato nel tag title viene mostrato dal browser come titolo della pagina web e ha un valore fondamentale nel rapporto che le singole pagine hanno con i motori di ricerca. Il tag title è visualizzabile nella tab del tuo browser, prova a lasciare il cursore per qualche secondo sulla scheda relativa a questa pagina e noterai comparire un etichetta: “Creare una pagina web da zero – Guida base all’HTML – Creativecode.it“. Questo non è altro che quello che ho scritto io stesso nel tag title di questa pagina.

<title>HTML Boilerplate</title>

# A cosa serve il tag html META?

Nell’head di una pagina web è possibile dichiarare diversi meta tag. I meta permettono di specificare delle informazioni aggiuntive che possiamo associare alle pagine web. Il primo di cui intendo parlarti è il meta character set, uno dei meta fondamentali. Attraverso di esso comunichiamo al browser di impostare la codifica dei caratteri secondo lo standard unicode UTF-8.

Utente qualunque: “Ok basta, stai parlando un’altra lingua. Me ne vado. 

Calma, niente panico… non è cosi importante approfondire il discorso sulla codifica dei caratteri in questo momento. Sappi solo che Unicode è il sistema di codifica più diffuso che assegna ad ogni carattere un numero univoco. Generalmente la codifica UTF-8 ti permetterà di utilizzare tutti i caratteri internazionali più diffusi e quindi rappresenta la scelta ottimale se non necessiti di simboli particolari. In poche parole, limitati ad utilizzare sempre l’UTF-8 se non devi scrivere caratteri particolari.

Se vi doveste trovare mai nel caso in cui i testi della vostra pagina web dovessero presentare delle inesattezze – specialmente per i caratteri accentati – probabilmente il problema sta proprio nel fatto che non avete dichiarato la codifica UTF-8 nel character set.

<meta charset="utf-8">

In questo contesto, charset viene definito come attributo dell’elemento meta. Come abbiamo già detto, esistono diversi meta e ciascuno di essi può essere dichiarato con attributi diversi. Vediamone qualcun altro:

# Meta description

<meta name="description" content="Vediamo come creare una pagina web da zero e quali sono gli strumenti necessari per iniziare nuovo progetto HTML: Visual Studio Code e il boilerplate HTML">

Il meta description comunica al browser una sintesi di ciò che viene trattato nella pagina. Così come il title, la description assume un valore rilevante soprattutto nel rapporto che c’è fra pagina e motore di ricerca. Se proviamo ad effettuare una qualsiasi ricerca su google,  il contenuto del meta description corrisponde a quella piccola parte di testo che troviamo sotto i titoli dei risultati di ricerca. Nel caso dello snippet scritto in alto, troveremmo la description: “Vediamo come creare una pagina web da zero e quali sono gli strumenti necessari per iniziare nuovo progetto HTML: Visual Studio Code e il boilerplate HTML“.

# Meta Viewport

<meta name="viewport" content="width=device-width, initial-scale=1.0">

Il meta viewport è fondamentale per permettere al browser di tenere conto della grandezza del display prima di renderizzare la pagina. Ogni pagina web applica delle regole di stile variabili in base alla grandezza del display, così da permettere l’accessibilità del sito su tutti i dispositivi. Per far sì che queste variazioni abbiano effetto, dichiariamo attraverso questo meta che la grandezza della finestra del browser deve essere grande quanto la larghezza del display e che la scala di visualizzazione iniziale deve avere il rapporto 1:1 – quindi né zoomato, né ridotto.

# Qual è la funzione del tag BODY?

Il tag body è l’elemento all’interno del quale lavorerai maggiormente. Tutto ciò che vediamo nella nostre pagine web, è parte del contenuto presente in <body>. Nessuno dei tag che hai visto fino ad ora in questo articolo, infatti, ha un impatto visivo sul contenuto della pagina. Se ti venisse in mente di aprire una pagina con un body vuoto, non vedresti nulla. Nel body dichiariamo gli elementi, i testi, le immagini e tutto ciò che rappresenta il contenuto reale della pagina web.

Ecco a te il boilerplate completo di una pagina HTML:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="Boilerplate HTML per creare una pagina web da zero">
    <title>HTML Boilerplate</title>
  </head>
  <body></body>
</html>

Hai creato da zero la tua prima pagina web, ottimo! Questo template ti permetterà di impostare correttamente le tue pagine web.

Sentiti libero di scrivere il tuo boilerplate creando un commento prima o dopo ogni elemento per descrivere le funzioni di ciascun tag.

Nei prossimi articoli entrerai nel vivo dello sviluppo e riempirai il tag body con testi e nuovi elementi, non mancare!