Creare una pagina web da zero

Prepariamo la base di un file HTML

creativecode avatar Giulio Tiseo

17 Ott, 2019

~8 min.

Imparerai a creare una pagina web da zero e toccherai con mano gli strumenti necessari per creare il tuo progetto HTML. Lo scopo dell'articolo è quello di fare una panoramica completa degli elementi di base, così che tu possa capire 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 semplicissimo file di testo con estensione .html.

Vuoi provare a creare un file html al volo? Perfetto, allora per creare una pagina web da zero segui questi passaggi:

  1. Apri l’editor di testo standard del tuo Sistema Operativo (Blocco Note per chi è su Windows, Text Edit per gli utenti iOS);
  2. Crea un titolo con il tag h1;
  3. Crea al rigo successivo un paragrafo con il tag p;
  4. Salva con nome il file e chiamalo index dopodiché devi salvare il file in formato html. Per farlo, se sei sul Blocco Note di Windows, cancella l’estensione .txt che precede il nome del file e sostituiscila con .html. Se lavori su iOS, ti basterà selezionare in fase di salvataggio, dal menu a tendina, l’opzione “Pagina web (.html)“);
  5. Apri il file html appena salvato con un Browser.

Come vedi il tuo browser è stato in grado di aprire il file html senza alcun problema e ha stampato correttamente a video il contenuto di <h1> e del tag <p>.

# Visual Studio Code

Bene, in pochi secondi hai realizzato una semplicissima pagina web e hai verificato che altro non è che un banale file di testo. In teoria è possibile creare da zero interi siti con programmi basic come il blocco note o text edit ma non pensare di avventurarti in qualcosa di così inutilmente complicato. Esistono software specifici molto più comodi che faciliteranno estremamente il tuo lavoro nella scrittura dei tag e nell’esecuzione del codice.

Uno fra questi è Visual Studio Code (VS Code), quello che considero l’editor più efficiente e versatile in circolazione (non a caso è utilizzato dalla stragrande maggioranza degli sviluppatori). VS Code è totalmente open source e puoi scaricarlo direttamente dal sito ufficiale.

Una volta installato VS Code, utilizzalo per aprire il file index.html che hai appena creato. In pochi secondi comparirà una schermata che mostra il codice digitato qualche minuto fa. Ovviamente già dal punto di vista della visualizzazione del codice, la differenza è enorme rispetto all’editor di testo nativo.

I tag sono contraddistinti da una colorazione diversa rispetto al resto del contenuto, similmente a quanto visto nella developer tools del browser. Inoltre, se provi a scrivere un nuovo elemento, puoi vedere come l’editor ti aiuterà con una serie di suggerimenti, caratteristica utile soprattutto per chi è alle prime esperienze e fatica a ricordare il nome di ciascun 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.

A questo punto torna su VS Code e seleziona dalla barra delle opzioni: File, Apri Cartella… e seleziona la cartella appena creata.

Come puoi notare, l’editor ti mostra una finestra con una sidebar a sinistra. Vai nella sidebar e seleziona l’icona per creare una nuova cartella chiamata _boilerplate (oppure fai tasto destro nell’area della sidebar -> Nuova cartella). A questo punto, fai click sulla cartella appena creata e questa volta seleziona l’icona icona nuovo file visual studio code per creare un Nuovo File 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 scoprirai 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.

# 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 dichiariamo 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 l’etichetta “Creare una pagina web da zero – Guida base all’HTML – Creative Code“.

<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.

Ok basta, stai parlando un’altra lingua. Me ne vado. 

– cit. Utente Random

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 e che comprende i caratteri internazionali più diffusi. Se non necessiti di simboli particolari, UTF-8 rappresenta la scelta ottimale per la codifica dei caratteri.

Se doveste trovare delle anomalie nei testi della vostra pagina web, magari nel caso dei 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="Crea una pagina web da zero e scopri quali sono gli elementi principali per iniziare un nuovo progetto HTML attraverso l'uso di Visual Studio Code.">

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: “Crea una pagina web da zero e scopri quali sono gli elementi principali per iniziare un nuovo progetto HTML attraverso l’uso di Visual Studio Code.“.

# 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 della pagina deve essere grande quanto la larghezza del display (o del browser) 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 ti ho presentato in questo articolo, infatti, ha un impatto visivo sul contenuto della pagina. 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!

Lascia un commento

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *