Questo sito contribuisce alla audience di Il Messaggero
Canale Offerte e Sconti su Telegram
Scopri le migliori offerte sul canale Telegram ufficiale. Guarda su Telegram
  1. Home
  2. Internet
  3. Servizi online
  4. Creare siti Internet
  5. Come creare un sito Web HTML

Come creare un sito Web HTML

di

Sei affascinato dall’idea di avere uno spazio tutto tuo su Internet in cui esprimerti al meglio, dunque stai seriamente pensando di imparare a creare un sito Web HTML che ti permetta di dare sfogo alla tua creatività, condividendo le tue idee o, perché no, il tuo progetto, con tutti coloro che ti stanno a cuore. Il problema è che tu non hai la più pallida idea di come ciò possa essere fatto, dunque sei alla ricerca di una guida che ti aiuti a muovere i primi passi nel mondo dei linguaggi Web.

Ebbene, sono molto felice di comunicarti che l’hai trovata! Di seguito, infatti, intendo fornirti tutte le istruzioni necessarie sul linguaggio HTML e sulle modalità di creazione di un sito Internet. Non preoccuparti se non hai molta dimestichezza con l’argomento: i concetti che andrò a esporti sono di semplice comprensione e ti garantisco che anche chi, come te, non ha mai fatto nulla del genere prima, sarà in grado di creare una piccola pagina Web dalla quale far partire, magari, un grande progetto.

Dunque cosa aspetti a iniziare? Ritaglia qualche minuto di tempo libero per te, mettiti bello comodo e leggi con molta attenzione tutto quanto ho da dirti: sono sicuro che, una volta completata la lettura di questa guida, rimarrai sorpreso dal risultato che riuscirai a raggiungere. Detto ciò, non mi resta che augurarti buona lettura e buon divertimento!

Informazioni preliminari

Come creare un sito Web HTML

Prima ancora di mettere mano al codice e capire nel concreto come creare siti Web HTML, lascia che ti fornisca qualche informazione in più sul linguaggio e sulle tecnologie con cui dovrai approcciare per raggiungere il tuo scopo.

Tanto per iniziare, la parola HTML è l’acronimo dell’espressione HyperText Markup Language, o linguaggio di marcatura per ipertesti. Erroneamente rispetto a quanto si pensa di solito, HTML non è affatto un linguaggio di programmazione, poiché non è basato su flussi di azioni concatenate né su algoritmi: al contrario, HTML fa parte dei cosiddetti linguaggi dichiarativi di markup, cioè quella categoria di linguaggi che contrassegnano gli elementi e ne specificano l’ordine di apparizione.

In particolare, il compito di HTML è quello di indicare al programma che va ad interpretarne il codice (ad es. il browser) la tipologia degli elementi e le modalità di disposizione di questi ultimi all’interno di una pagina: ciò viene fatto racchiudendo l’elemento in questione tra due tag, cioè tra due speciali marcatori identificati da termini simil-anglofoni compresi tra parentesi angolari (per esempio, <img> è il tag HTML che identifica un’immagine).

Nel momento in cui ti sto scrivendo questa guida, la versione più recente del linguaggio HTML è HTML 5: contrariamente a quanto succedeva fino a qualche anno fa, HTML 5 è in grado, oltre che di definire la struttura della pagina, anche di gestire in modo assolutamente autonomo numerose tipologie di contenuti multimediali (ad es. flussi audio, flussi video ed elementi interattivi) e di monitorare alcuni aspetti del dispositivo da cui la si visualizza (ad es. la percentuale di luminosità dello schermo), eliminando dunque la necessità di integrare all’interno della pagina stessa componenti come elementi Flash o applet Java.

Per questo motivo, HTML 5 viene largamente utilizzato anche nello sviluppo di applicazioni dedicate a smartphone, tablet e altri dispositivi connessi, solitamente sprovvisti del supporto a tali tecnologie “aggiuntive”.

In generale, una pagina creata con solo codice HTML viene definita pagina statica, cioè in grado di mostrare sempre lo stesso contenuto e, nella maggior parte dei casi, non modificabile dalle condizioni attuali dell’ambiente in cui viene visualizzata né dalle azioni che l’utente esegue al suo interno.

Tuttavia, come scoprirai andando avanti nella lettura di questa guida, sono numerosi i linguaggi che si intersecano con HTML al fine di costruire siti Web più o meno complessi, dinamici e ricchi di contenuti: due tra i linguaggi che meritano menzione sono il CSS, che definisce lo stile degli elementi che compongono le pagine del sito Web, e il JavaScript, un vero e proprio linguaggio di programmazione che permette di manipolare dinamicamente la pagina e renderla interattiva, se necessario.

Quando si crea un sito “manualmente” è importante verificare che questo sia in regola con tutte le norme legate a cookie e trattamento dei dati. Se non sai bene di cosa si parla e vuoi evitare problemi in tal senso, puoi affidarti a iubenda, che con il suo team di avvocati permette di adeguare siti Web e app alle normative di più Paesi e legislazioni con facilità.

Parti di una pagina Web HTML

Ora che hai compreso la natura di HTML, è il momento di studiare la composizione di una pagina scritta utilizzando tale linguaggio. Prima di procedere oltre, però, è d’obbligo fare una distinzione più che doverosa: il codice di una pagina HTML viene scritto dal programmatore all’interno di un file di testo semplice, che è possibile modificare sia con semplici programmi di manipolazione dei testi (come il Blocco Note e WordPad di Windows oppure TextEdit di macOS) che attraverso editor ben più complessi (come Dreamweaver di Adobe), mentre il contenuto di una pagina HTML è quello mostrato dal browser (immagini, testi, moduli e così via) quando si “naviga” sul sito Internet.

Per questo, è possibile affermare che il browser sia un vero e proprio interprete HTML, cioè un programma in grado di seguire le istruzioni del codice HTML per mostrare a schermo il contenuto della pagina che esso va a strutturare. In condizioni normali, il codice HTML non è visibile in fase di navigazione, poiché, come già detto, il browser interpreta le informazioni e dispone gli elementi nella pagina visualizzata in base ad esse.

Fatta questa doverosa premessa, è il momento di capire più da vicino come è fatta una pagina di codice HTML. Come già accennato in precedenza, gli elementi della pagina sono racchiusi tra due tag o marcatori, uno di inizio e uno di fine, in grado di accettare o meno parametri in base al tipo di elemento che essi definiscono: il tag d’inizio è composto da una parola inserita tra due parentesi angolari (ad es. <img>), mentre il marcatore di fine pospone alla parentesi angolare sinistra il simbolo slash o “/” (ad es. </p>).

I parametri vengono specificati all’interno del tag di inizio, con una formula simile a parametro=”valore”: per esempio, per definire il percorso di un’immagine da inserire, è possibile utilizzare il parametro src=”indirizzo” (ad es. <img src=”https://www.aranzulla.it/prova.png” width=”600px” />)

In genere, una pagina HTML altro non è che un file di testo con estensione .html, ad esempio CiaoMondo.html: al suo interno, vengono specificati i tag che vanno a definire gli elementi che la compongono. In particolare, esistono alcuni tag che debbono obbligatoriamente essere presenti in un file .html e che mi appresto a elencarti di seguito.

  • <!DOCTYPE html> – è in assoluto il primo tag che compare in un file di codice: esso serve a specificare che il file contiene una pagina HTML. All’interno dei suoi parametri viene specificato, in genere, la versione di HTML utilizzata.
  • <html> – questo tag racchiude l’intera pagina e, in genere, viene utilizzato anche per definirne aspetti strutturali come la lingua e lo schema utilizzato dal markup.
  • <head> – si tratta del tag che racchiude le informazioni con cui la pagina viene gestita dai software con cui viene elaborata (il browser, lo spider dei motori di ricerca e così via): ad esempio, all’interno del tag <head> viene definito il titolo della pagina, l’icona caratteristica, l’insieme di caratteri utilizzato e altre informazioni specifiche sulla struttura.
  • <body> – questo è il tag che contiene tutti i tag relativi agli elementi della pagina che verranno mostrati a video: all’interno del tag body si specificano, ad esempio, i titoli e sottotitoli (<h1>, <h2>, <h3> e così via), i paragrafi e il loro contenuto (<p>), le immagini (<img>), le tabelle (<table>), i moduli (<form>) con i relativi componenti (<input type=””>) e così via.

Creare un sito Web HTML di base

Tutto chiaro fin qui? Ottima notizia, perché con queste nozioni puoi già creare il tuo primo sito Web HTML! Prima di andare avanti, però, lascia che ti dia qualche informazione in più sui tag “immancabili” da inserire all’interno della sezione <body>.

  • <h1>, <h2>, <h3> – si tratta dei tag che definiscono titoli e sottotitoli della pagina (ad es. <h1>Benvenuti! </h1>). Per impostazione predefinita, la formattazione del testo racchiuso al loro interno è diversa, per dimensioni e stile, rispetto agli altri elementi della pagina.
  • <p></p> – è il tag che racchiude il contenuto di un paragrafo.
  • <br> – si tratta del tag che denota un’interruzione di linea: il testo successivo a questo tag viene stampato a capo rigo.
  • <img src=”…”> – è il tag che permette di includere un’immagine all’interno della pagina. Il percorso dell’immagine viene specificato, come già detto, all’interno del parametro src.
  • <a href=””></a> – questo tag permette di inserire un collegamento ipertestuale all’interno di una pagina: l’indirizzo di destinazione viene specificato all’interno del parametro href, mentre il testo del link viene racchiuso tra i tag di inizio e fine (ad es. <a href=”https://www.aranzulla.it”>Il sito di Salvatore Aranzulla</a>.
  • <strong></strong>, <em></em>,<u></u> – questi tag permettono di definire, in parte, lo stile del testo racchiuso tra essi. Rispettivamente, essi permettono di specificare testo in grassetto, corsivo e sottolineato.
  • <div></div> – si tratta di un tag abbastanza generico, utilizzato per dividere la pagina in sezioni fisicamente invisibili, ma accomunate da specifiche caratteristiche. Ad esempio, definire la classe di un elemento di tipo div (<div class=”nomeClasse”) permette di impostare, attraverso un foglio di stile CSS o una definizione in-pagina, degli specifici parametri di formattazione da applicare agli elementi al suo interno. Ti parlerò del CSS nella sezione successiva.

A questo punto, direi che è arrivato il momento di mettere in pratica tutte le conoscenze acquisite! Dunque, senza esitare oltre, apri l’editor di testi incluso nel tuo sistema operativo (il Blocco Note di Windows o TextEdit per macOS, ad esempio) e digita al suo interno il seguente codice.

<!doctype html>
<html lang="it">
<head>
<title>Ciao a tutti!</title>
</head>
<body>
<h1>Sto imparando a creare un sito HTML</h1>
<h2>E credo di aver capito proprio tutto!</h2>
<p>Ciao! Io sono Salvatore Aranzulla e ho redatto <strong>questa guida</strong> per insegnarti a programmare utilizzando questo approccio. </p>
<div class="colore">Non preoccuparti di questo div, presto capirai il motivo per cui l'ho inserito.</div>
<p>Riconosci questo monumento? Scommetto di si!</p>
<img src="https://images.pexels.com/photos/722014/pexels-photo-722014.jpeg" width="640" height="480" />
<p>Per accedere al mio sito Web <a href="https://www.aranzulla.it" target="_blank" />clicca qui.</a></p>
</body>
</html>

Una volta completato l’inserimento, salva con nome il file avendo cura di utilizzare l’estensione .html (ad es. PrimoSito.html). A questo punto, non ti resta che fare doppio clic sul file appena salvato per visualizzarlo all’interno del browser: complimenti, hai appena creato la tua prima pagina Web HTML! Ricorda che puoi visualizzare il codice della pagina in qualsiasi momento cliccando su un punto a caso di essa e selezionando Visualizza sorgente pagina dal menu contestuale proposto dal browser.

Utilizzando questa tecnica, sarai in grado di creare una serie di pagine HTML visualizzabili soltanto all’interno del computer che stai utilizzando: per rendere raggiungibile il tuo sito da Internet, avrai invece bisogno di acquistare uno spazio di hosting che possa ospitare le sue pagine ed, eventualmente, un dominio associato. Ti ho spiegato nel dettaglio la questione nella mia guida al miglior hosting.

Il foglio di stile

Scommetto che ti stai chiedendo come sia possibile raffinare ulteriormente i contenuti delle pagine del tuo sito Web, impostando ad esempio un colore di sfondo, un effetto sui link al passaggio del mouse, una formattazione specifica per ogni tipo di “contenitore” e così via.

Come ti ho già spiegato all’inizio, sebbene HTML sia in grado di gestire la formattazione di base degli elementi, in questo caso viene in aiuto un secondo linguaggio Web atto proprio a specificare le regole di disposizione, formattazione e decorazione degli elementi: il CSS. Nella fattispecie, si tratta di un linguaggio con una sintassi profondamente diversa da quella di HTML, che permette di definire nello specifico lo stile degli elementi della pagina.

Il codice CSS può essere dichiarato in due modi diversi: il primo, utile quando gli elementi da definire sono limitati a una singola pagina del sito, è quello di racchiuderlo all’interno del tag <style></style>, specificato all’interno della sezione <head>. Il secondo metodo di dichiarazione del codice CSS, estremamente comodo quando deve essere condiviso da più pagine dello stesso sito, è quello di specificarlo in un file di testo con estensione .css, che puoi importare nel codice HTML utilizzando il tag <link> (ad es. <link href=”NomeFoglioStile.css” rel=”stylesheet” type=”text/css”>) all’interno della sezione <head> della pagina.

Giusto per farti un breve esempio, ecco il contenuto di un foglio di stile CSS in grado di colorare e formattare tutti gli elementi appartenenti alla classe colore: in particolare, il testo verrà colorato di rosso e sovrastato da una linea, la spaziatura dei caratteri verrà aumentata a 5 pixel e lo sfondo sarà di colore grigio.

.colore { color:red; background-color:black; text-decoration:overline; letter-spacing: 5px;}

Per verificare immediatamente il funzionamento del foglio di stile, incolla il codice qui sopra in un file di testo semplice e salvalo con il nome stile.css nella stessa cartella in cui hai salvato la pagina HTML creata in precedenza. A questo punto, per incorporare il foglio, non devi far altro che aprire in modifica la summenzionata pagina (facendo clic destro con il mouse sul file .html, selezionando la voce Apri con dal menu contestuale proposto e scegliendo il programma Blocco note/TextEdit dalla lista visualizzata a schermo), inserire la stringa di testo <link href=”stile.css” rel=”stylesheet” type=”text/css”> subito sotto il tag <head> e salvare il file come di consueto.

Completata questa operazione, fai doppio clic sul file html appena modificato e… goditi il risultato! Per ulteriori informazioni sulle direttive CSS, ti invito a leggere con attenzione la guida di base al CSS di HTML.it.

Framework e CMS

HTML è un linguaggio estremamente potente e in grado di dare forma, insieme a CSS e JavaScript, anche a progetti molto complessi. Al giorno d’oggi, le pagine Web devono essere progettate con in mente la visualizzazione da differenti dispositivi, con differenti caratteristiche (ad es. la risoluzione dello schermo) e in differenti modalità di lettura: è questo il motivo per cui, sempre più spesso, i programmatori Web ricorrono ad una serie di strumenti “preconfezionati” per la progettazione dello “scheletro” del proprio sito Web: questi strumenti prendono il nome di framework.

Nella fattispecie, un framework altro non è che un insieme di pagine HTML, JavaScript e fogli di stile “preconfezionati”, che aiutano il programmatore a strutturare nei dettagli la struttura di base del sito Web che si apprestano a creare: ad esempio, un framework può contenere file in grado di “differenziare” la visualizzazione delle pagine in base al browser, di comprimerne il contenuto per migliorare la velocità di download, di offrire un certo tipo di grafica e molto altro ancora.

Uno dei framework più utilizzati, al giorno d’oggi, è Bootstrap: si tratta di un framework estremamente flessibile pensato per offrire degli schemi di partenza per progetti di complessità medio-alta, ottimizzati per la visualizzazione attraverso differenti tipi di dispositivi, schermi e risoluzioni.

A questo punto, mi sembra doveroso introdurti anche il concetto di CMS: un content management system altro non è che un sistema, scritto esso stesso in linguaggio Web, che gestisce la creazione di un sito Web attraverso un gestionale dotato di interfaccia grafica. I CMS, solitamente, sono basati completamente su uno o più specifici framework.

In altre parole, il CMS è un software che permette di creare la struttura di un sito Web e di modificarne i contenuti, senza intervenire manualmente sulle pagine e sugli eventuali database, nel giro di un paio di clic: di solito, i CMS vengono messi a disposizione da numerosi siti di hosting per permettere la creazione rapida di siti Internet anche a chi non ha competenza con i linguaggi Web. Tra i CMS più conosciuti, meritano menzione WordPress, Drupal, Magento, Joomla e Prestashop.

Risorse utili

Se sei arrivato fin qui, vuol dire che hai compreso appieno come creare un sito Web HTML e possiedi tutte le nozioni di base per creare un piccolo sito Internet con le tue mani. Ben presto, però, ti renderai conto che la potenza di HTML va ben al di là degli argomenti trattati in questa guida: ecco perché, nelle righe a venire, intendo fornirti ulteriori risorse utili da consultare per raffinare ulteriormente le tue conoscenze.

  • Guida HTML di HTML.it – si tratta, con molta probabilità, di una delle guide più complete ed esaustive disponibili in Rete: è suddivisa in pratiche sezioni tematiche, è ricca di esempi e, soprattutto, costantemente aggiornata.
  • W3Schools.com – promosso e pubblicato dal W3C, è un intero portale Web dedicato al linguaggio HTML e a tutte le tecnologie che vi ruotano intorno. La particolarità di W3Schools è la possibilità di eseguire, dopo aver letto ciascuna lezione, numerosi esercizi di auto-verifica per valutare le competenze acquisite.
  • Amaya – è un ottimo programma per l’editing HTML, open source, creato e distribuito dal W3C. Si tratta di un editor di tipo wysiwyg (what you see is what you get, “ciò che vedi è ciò che ottieni), in grado di realizzare interi siti HTML, oltre che fogli di stile, piccoli script e quant’altro, disegnandoli con il mouse.
  • Adobe Dreamweaver – se ben ti ricordi, ti ho già parlato di questo software all’interno della mia guida ai programmi per HTML. Si tratta di una soluzione potente e completa per la progettazione e la struttura di siti Internet sia semplici che complessi, dotata di strumenti per la gestione di HTML, JavaScript, CSS, progettazione grafica e quant’altro.
  • HTML 5 con CSS e JavaScript – se sei amante dei riferimenti “cartacei” e intendi avvalertene per imparare a fondo le tecnologie Web, puoi dare un’opportunità a questo testo: più che un manuale, si tratta di un riferimento completo per la creazione di siti Web completi, ma anche di applicazioni mobile Web-based, basati sull’interazione tra HTML5, fogli di stile e JavaScript.

Se sei arrivato fin qui, vuol dire che hai appreso perfettamente tutto ciò che c’è da sapere sulla programmazione di base in HTML. Aspetta, mi stai dicendo che ritieni la cosa ancora un po’ troppo difficile e che vorresti un sistema che possa guidarti almeno nei tuoi primi passi? Allora ti consiglio di creare il tuo primo sito Web avvalendoti di uno dei CMS gratuiti, con relativo spazio di hosting associato, disponibili su Internet: due dei più utilizzati al giorno d’oggi sono sicuramente WordPress.com e Blogger, di cui ti ho parlato nello specifico nei miei approfondimenti su come creare un sito con WordPress e come creare un blog gratis su Google.

In qualità di affiliati Amazon, riceviamo un guadagno dagli acquisti idonei effettuati tramite i link presenti sul nostro sito.

Salvatore Aranzulla

Autore

Salvatore Aranzulla

Salvatore Aranzulla è il blogger e divulgatore informatico più letto in Italia. Noto per aver scoperto delle vulnerabilità nei siti di Google e Microsoft. Collabora con riviste di informatica e cura la rubrica tecnologica del quotidiano Il Messaggero. È il fondatore di Aranzulla.it, uno dei trenta siti più visitati d'Italia, nel quale risponde con semplicità a migliaia di dubbi di tipo informatico. Ha pubblicato per Mondadori e Mondadori Informatica.