Come creare un sito Web HTML
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!
Indice
- Informazioni preliminari
- Come creare un sito Web HTML: fondamenti
- Strumenti per creare siti Web
- Risorse utili
Informazioni preliminari
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. Sostanzialmente, HTML non è affatto un linguaggio di programmazione, poiché non è basato su flussi di azioni concatenate né su algoritmi, bensì un linguaggio dichiarativo di markup, cioè un linguaggio atto a contrassegnare gli elementi e specificarne l’ordine di apparizione.
In parole povere, il compito di HTML è quello di indicare al programma che va ad interpretarne il codice sia il tipo di elementi che compongono la pagina, sia le modalità di disposizione di questi ultimi al suo interno: 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).
Il codice di una pagina HTML viene scritto dal programmatore all’interno di un file di testo semplice con estensione .html o .htm, che è possibile modificare sia con programmi/app per la manipolazione dei testi che attraverso editor ben più complessi; il contenuto di una pagina HTML è, invece, quello mostrato dal browser, che funge di fatto da interprete.
Nel momento in cui ti sto scrivendo questa guida, la versione più recente del linguaggio HTML è HTML 5, la quale consente di gestire non soltanto la parte dichiarativa di markup, ma anche l’interazione tra la pagina ed elementi interattivi e multimediali di varia natura, senza la necessità di usare componenti esterni; pertanto, HTML 5 viene largamente utilizzato anche nello sviluppo di applicazioni dedicate a smartphone, tablet e altri dispositivi connessi, nativamente sprovvisti del supporto a tali tecnologie “aggiuntive”.
Come creare un sito Web HTML: fondamenti
Fatte tutte le doverose precisazioni del caso, è arrivato il momento di passare all’opera e di esporti, nel concreto, quali sono i concetti base da conoscere per poter realizzare un piccolo sito HTML personale. In sostanza, un sito Web è un insieme di pagine HTML unite tra loro mediante un meccanismo di collegamenti ipertestuali, implementato mediante oggetti “cliccabili” che possano condurre l’utente da una pagina all’altra.
Una pagina realizzata 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, salvo per la parte grafica: il programmatore, infatti, può scegliere di adattare l’estetica della pagina in base alle dimensioni della finestra, del pannello o dello schermo su cui essa è visualizzata, sfruttando il cosiddetto approccio Responsive.
Tuttavia, 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, il PHP e il JavaScript, questi ultimi veri e propri e linguaggi di programmazione, in grado di manipolare la pagina e renderla interattiva.
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à.
Come creare un sito Web HTML semplice
Ora, è giunto il momento di passare all’atto pratico della questione. 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. </img>).
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 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). Per esempio, all’interno del marcatore in quesitone viene definito il titolo della pagina, l’icona caratteristica, l’insieme di caratteri utilizzato e altre informazioni specifiche sulla struttura.<body>: è il tag che contiene tutti i marcatori 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>), i collegamenti ipertestuali e le ancore (<a>), le immagini (<img>) e così via.
In particolare, il tag che ti consente di collegare una pagina HTML a un’altra e creare, di fatto, la struttura di navigazione per il tuo sito Web, è il tag <a>, il quale permette di inserire un collegamento ipertestuale – o ancora – all’interno di una pagina. Nello specifico, l’indirizzo di destinazione viene specificato all’interno del parametro href, mentre il testo o l’elemento cliccabile viene racchiuso tra i tag di inizio e fine.
Il parametro href può gestire almeno tre tipologie di destinazioni differenti, in base a come vuoi strutturare il tuo sito: l’indirizzo Web completo della pagina di destinazione (ad es. <a href="https://www.ilmiosito.it/pagina1.html">); l’indirizzo relativo del file .html di destinazione, che deve trovarsi nella stessa cartella in cui risiede la pagina chiamante oppure in una sotto-cartella (ad es. <a href="pagina1.html">); o un’ancora, cioè un collegamento che indirizza l’utente a una sezione diversa della stessa pagina.
Per definire un’ancora, si antepone il tag <a name="nomeAncora" /> all’elemento da associarvi; per richiamare quest’ultimo, si utilizza invece il tag <a href="#nomeAncora"> elementoCliccabile</a>.
Come creare un sito Web HTML e CSS
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 tre 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, invece, prevede la definizione dello stile all’interno del tag di appartenenza dell’elemento da formattare, previo impiego dell’attributo style.
Il terzo e ultimo metodo di dichiarazione del codice CSS, estremamente comodo quando deve essere condiviso da più pagine dello stesso sito, è quello di specificarlo in un foglio di stile esterno con estensione .css, che puoi importare nel codice HTML utilizzando il tag <link>e il parametro href (ad es. <link href="NomeFoglioStile.css" rel="stylesheet" type="text/css">) all’interno della sezione <head> della pagina.
Ma come si definisce, in particolare, lo stile di un elemento? Laddove avessi scelto di includere il codice CSS direttamente nel tag caratterizzante dell’elemento stesso, devi specificare la proprietà da modificare (ad es. il colore) e il valore da assegnarvi, nel formato proprietà: valore;. Per esempio, se vuoi che il testo di un paragrafo venga colorato di bianco su sfondo blu, dovrai scrivere <p style="color: white; background-color: blue;">Testo del paragrafo</p>.
Qualora avessi invece intenzione di impostare delle regole CSS nel tag <style> della pagina, oppure in un file esterno con estensione .css, devi specificare l’elemento o la classe alla quale applicare le regole e definire queste ultime tra parentesi graffe, sempre nel formato proprietà: valore;. Per esempio, se vuoi che tutti i paragrafi della pagina Web abbiano testi colorati di nero, con font di dimensione pari a 20 pixel e con allineamento giustificato, dovrai inserire nel file o nel tag style il codice seguente.
p {
color: black;
font-size: 20px;
text-align: justify;
}
Creare un sito Web funzionante: un piccolo esempio
Finora, abbiamo abbracciato l’aspetto teorico della questione e, adesso, è finalmente giunto il momento di passare alla pratica. Di seguito, ti mostro il codice di due pagine Web, denominate index.html e info.html, contenenti rispettivamente un messaggio di benvenuto e una pagina informativa; le pagine sono collegate tra loro mediante link ipertestuale.
Pagina index.html
<!DOCTYPE HTML>
<html lang="it">
<head>
<title>Benvenuto sul mio sito</title>
</head>
<body>
<h2>Benvenuto nel mio sito Web</h2>
<p>Ciao! Io sono Salvatore Aranzulla e ti mostro una pagina HTML semplice.</p>
<p>Per saperne di più, <a href="info.html">clicca qui</a>.
</body>
</html>
Pagina info.html
<!DOCTYPE HTML>
<html lang="it">
<head>
<title>Info sul mio sito</title>
</head>
<body>
<h2>Informazioni</h2>
<p>Questo sito è stato realizzato a titolo di esempio, per mostrare il funzionamento dei collegamenti ipertestuali</p>
<p>Se hai finito, <a href="index.html">torna alla home</a>.
</body>
</html>
Ad ogni modo, se vuoi approfondire l’argomento, ti invito a prendere visione della mia guida su come creare una pagina HTML, nella quale ho avuto modo di fornirti ulteriori indicazioni circa l’approccio di base con il linguaggio HTML.
Strumenti per creare siti Web
A questo punto, mi sembra più che doveroso fornirti qualche nozione in più circa gli strumenti ai quali puoi affidarti per costruire i tuoi siti Web HTML. La scelta è piuttosto ampia e affidarti a un sistema anziché l’altro dipende esclusivamente da te, dal risultato che vuoi ottenere e dalle competenze delle quali disponi.
Come creare un sito Web HTML con Blocco Note e TextEdit
Come ho già avuto modo di spiegarti all’inizio, una pagina HTML altro non è che un file di testo con estensione .html o .htm. Di conseguenza, puoi strutturarle senza problemi usando gli editor di testo di base inclusi in Windows e macOS: Blocco Note e TextEdit. Dunque, per prima cosa, richiama il programma di tuo interesse dal menu Start di Windows oppure dal menu Vai > Applicazioni di macOS e digita il codice HTML della tua pagina all’interno della finestra che va ad aprirsi.
A questo punto, non devi fare altro che salvare il file in maniera appropriata, avendo cura di indicare al programma la tua intenzione di realizzare un file HTML, e non un documento di testo.
- Blocco Note: clicca sul menu File > Salva con nome, imposta il menu a tendina Salva come sull’opzione Tutti i file e digita il nome da assegnare al file, specificando l’estensione .html (ad es. index.html). Infine, scegli la cartella nella quale archiviare la pagina e clicca sul pulsante Salva.
- TextEdit: apri il menu Formato > Converti in formato solo testo, clicca sul pulsante OK e, fatto ciò, apri il menu File > Salva… del programma. Ora, rimuovi il segno di spunta dalla casella posta accanto alla voce Se non è indicata nessuna estensione, usa “.txt”, digita il nome da assegnare al file, seguito dall’estensione .html, e specifica la posizione in cui archiviarlo. Quando hai finito, premi sul pulsante Salva e il gioco è fatto.
A salvataggio completato, puoi vedere il risultato del tuo lavoro nel browser, facendo doppio clic sul file appena creato; se vuoi apportare delle modifiche, fai invece clic destro sul medesimo file e seleziona le voci Apri con > Blocco Note/TextEdit dal menu che va ad aprirsi. Ti segnalo che puoi usare lo stesso metodo anche per la creazione di fogli di stile con estensione .css, avendo cura di specificare quest’ultima in fase di salvataggio.
Come creare un sito Web HTML: strumenti online
Se hai intenzione di creare un sito Web tutto tuo di media complessità, ma sei perfettamente consapevole di non avere le competenze necessarie per riuscirci in completa autonomia, puoi ricorrere all’uso di un CMS, o content management system: si tratta di un sistema, scritto esso stesso in linguaggio Web, 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 consentire la creazione rapida di siti Internet anche a chi non ha alcuna competenza con i linguaggi Web, anche con il supporto dell’intelligenza artificiale. Tra le più apprezzate e conosciute soluzioni della categoria, figurano sicuramente Shopify, WIX, Hostinger e Aruba Sites, mirate principalmente allo sviluppo semplificato di siti Web strutturati, anche con funzioni per ecommerce.
Tuttavia, esistono CMS ulteriormente semplificati come WordPress.com, Google Sites e Blogger, che consentono di realizzare siti Web di natura generica in pochi clic, anche a costo zero; inoltre, i CMS appena menzionati possono altresì essere installati sul computer, per la realizzazione di siti locali, oppure caricati su un dominio personalizzato online.
Ad ogni modo, se sei interessato ad approfondire il tema, ti invito a leggere con attenzione le mie guide su come creare un sito Internet online, come creare un sito Web professionale, come creare un sito Internet aziendale e come pubblicare un sito: sono sicuro che sapranno tornarti utili.
Come creare un sito Web HTML: programmi
Se, invece, hai intenzione di abbracciare a 360 gradi il mondo della programmazione e vuoi intervenire manualmente su tutti gli aspetti del tuo sito Web, ti torneranno certamente utili gli ambienti di sviluppo integrati, o IDE: si tratta di particolari programmi tutto-in-uno, che includono sia funzionalità specifiche per lo sviluppo di codice (ad es. l’auto-completamento, la segnalazione degli errori sintattici e così via), che per la pubblicazione dei propri lavori.
Alcuni di essi, facenti parte della categoria WYSIWYG (acronimo di what you see is what you get), consentono addirittura di sviluppare pagine Web con l’ausilio di una parte grafica e di inserire gli elementi usando il mouse e la tastiera, senza agire nel codice; altri, invece, possono includere il supporto alle intelligenze artificiali allenate per l’implementazione di codice.
Tra le più apprezzate soluzioni della categoria figurano sicuramente Adobe Dreamweaver (Windows/macOS), Microsoft Visual Studio Code (Windows/macOS) e Notepad++ (Windows/macOS), delle quali ti ho parlato nella mia guida ai programmi per realizzare siti Web e nel mio approfondimento dedicato ai software per scrivere codice HTML.
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 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.
Se poi preferisci la carta stampata al digitale, sarai ben felice di sapere che esistono tantissimi libri dedicati allo sviluppo Web e a tutti i linguaggi che vi ruotano intorno: puoi procurarti con facilità guide e manuali direttamente online, oppure visitando la sezione Informatica/Tecnologia delle più fornite librerie fisiche.
Imparare a programmare con HTML e CSS
HTML5: Scopri la Guida Completa alla Formattazione di Siti Web e Appre...
HTML5. Guida tascabile al linguaggio e agli elementi di una pagina web
In qualità di affiliati Amazon, riceviamo un guadagno dagli acquisti idonei effettuati tramite i link presenti sul nostro sito.
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.
