Creare una pagina web da zero

In questa lezione vi mostrerò come creare una pagina web da zero e quali sono gli strumenti di cui avete bisogno per iniziare il vostro progetto HTML.

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, proviamo subito a creare una pagina web da zero:

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

Visual Studio Code

In pochi attimi avete 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 vostro lavoro. Uno fra questi è Visual Studio Code (VS Code), uno degli editor più utilizzati fra sviluppatori e artisti per via della sua incredibile efficienza e versatilità. VS Code è un editor totalmente open source che potete scaricare gratuitamente dal sito ufficiale.

Una volta scaricato VS Code, utilizzatelo per aprire il file index.html. In pochi attimi VS Code mostrerà la schermata del codice e noterete fin da subito la differenza che c’è rispetto al blocco note.

I tag vengono contrassegnati con una colorazione diversa, così come più o meno ci apparivano nella developer tools del browser. Se proviamo a scrivere un nuovo elemento, l’editor ci aiuta con una serie di suggerimenti. Inoltre, è in grado di chiudere automaticamente l’elemento con l’apposito tag, prevenendo in questo modo i classici errori di mancata chiusura.

In questa lezione non ci dilungheremo nelle grandi potenzialità che ci offre questo editor di testo. Se siete interessati ad approfondire, vi consiglio caldamente di leggere la Guida rapida a Visual Studio Code, un piccolo tutorial che vi guiderà passo passo fra le tecniche e le estensioni più interessanti di questo editor.

È bene sapere che esistono tantissimi altri editor alternativi a VS Code, non siete vincolati all’utilizzo di questo specifico strumento. A tal proposito, vi elenco quelle che sono per me delle buone alternative:

  • Atom
  • Sublime Text
  • Brackets
  • Codepen++

Fase preliminare per creare una pagina web da zero

Creare una pagina web da zero significa predisporre i files e le cartelle di cui abbiamo bisogno con criterio ed ordine. Andiamo sul desktop e creiamo una nuova cartella rinominandola: HTML Per principianti. Questa sarà la cartella del corso che riempiremo dal nostro text editor. Andiamo su VS Code e selezioniamo dalla barra delle opzioni: File, Apri Cartella… A questo punto selezioniamo la cartella appena creata dall’Esplora risorse.

Come potete notare, il vostro editor vi mostra una finestra con una sidebar che vi permette di esplorare la cartella che avete selezionato. Andate nella sidebar e selezionate l’icona per creare una nuova cartella, rinominandola _Boilerplate. A questo punto, fate click sulla cartella appena creata e questa volta selezionate l’icona per creare un Nuovo File rinominandolo: index.html.

Index è un nome standard che gli sviluppatori attribuiscono alla Homepage di un sito. Vi suggerisco di utilizzare sempre questa nomenclatura anche in futuro.

Una volta creata la index, noterete che VS Code aprirà automaticamente il file nella parte più ampia della finestra. A questo punto siete pronti per creare il vostro progetto.

Cos’è il Boilerplate HTML?

Il codice boilerplate è un testo standard di configurazione che ammette delle modifiche minime. Per creare una pagina web da zero dunque, abbiamo bisogno di scrivere una serie di dichiarazioni standard 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.

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 nella versione 5 di HTML.

Se volessimo provare a scrivere una pagina in una versione precedente, come ad esempio XHTML, avremmo dovuto scrivere il codice in questo modo:

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

Come potete notare, in passato l’intestazione era prolissa e contorta rispetto alla versione attuale!

TAG HTML

La riga successiva nel nostro boilerplate è contraddistinta 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.

È possibile realizzare la struttura di una pagina HTML attraverso due macro-elementi: <head> e <body>

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

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>

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.

<title>HTML Boilerplate</title>

TAG META

Nella head di una pagina web è possibile dichiarare diversi meta tag. Questi elementi permettono di specificare delle informazioni aggiuntive che possiamo associare alle pagine web. Nel nostro caso, 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 .

Unicode è il sistema di codifica più diffuso che assegna ad ogni carattere un numero univoco. Generalmente la codifica UTF-8 ci permette di utilizzare tutti i caratteri internazionali più diffusi e quindi rappresenta la scelta ottimale se non necessitiamo di simboli 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!

Qui trovare una lista con tutti i caratteri disponibili nello standard UTF-8.

<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="Boilerplate HTML per creare una pagina web da zero">

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 delle pagine, nei risultati della ricerca. Nel caso dello snippet scritto in alto, troveremmo la frase: “Boilerplate HTML per creare una pagina web da zero“.

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. Non affronteremo il tema del responsive design in questa guida, tuttavia è bene tenere conto che una pagina web applica delle regole di stile variabili in base alla grandezza del display. 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.

TAG BODY

È l’elemento all’interno del quale lavoreremo maggiormente. Tutto ciò che vediamo nella nostra pagina web, è parte del contenuto presente in <body>. Nessuno dei tag che abbiamo visto fino ad ora nel nostro boilerplate, infatti, ha impatto sul contenuto della pagina. Se provassimo ad aprire la pagina con un body vuoto, non vedremmo nulla. Nel body dichiariamo gli elementi, i testi, le immagini e tutto ciò che rappresenta il contenuto reale della pagina web.

Ecco a voi il boilerplate completo della nostra 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>

Questo template vi permetterà di configurare correttamente le vostre pagine web. Copiate e incollatelo nel vostro editor di testo ogni volta che avete bisogno di creare una nuova pagina.

Dalla prossima lezione entreremo nel vivo della creazione e riempiremo il tag body con testi e nuovi elementi.

Lascia un commento

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