Come creare una pagina HTML

di Salvatore Aranzulla

Recentemente, hai effettuato alcune ricerche per fini lavorativi e, anziché utilizzare il “classico” PowerPoint, vorresti riportarne i risultati in una pagina Web ricca di contenuti, con la quale “impressionare” il tuo capo e ambire, perché no, a un avanzamento di carriera. Il problema, adesso, è che brancoli completamente nel buio, poiché non hai mai provato a capire come creare una pagina HTML prima d’ora, pertanto sei alla ricerca di un corso “intensivo” che possa farti acquisire quantomeno le conoscenze di base per realizzare un lavoro di questo tipo.

Ebbene, sono molto felice di comunicarti che ti trovi nel posto giusto, al momento giusto: di seguito, infatti, sarà mia cura spiegarti i fondamenti della “programmazione” in linguaggio HTML, avendo inoltre cura di fornirti tutti gli strumenti necessari per agire autonomamente in futuro. Lo so, all’inizio potrebbe sembrare piuttosto difficile, ma posso garantirti che bastano un po’ di pazienza e qualche giorno di pratica per raggiungere risultati degni di nota!

Dunque, senza esitare oltre, ritaglia qualche minuto del tuo tempo libero e leggi con attenzione tutto quanto ho da spiegarti sul tema: sono sicuro che, al termine di questa lettura, avrai le idee ben chiare sul da farsi e riuscirai a organizzare al meglio la pagina HTML che avevi pensato per il tuo capo. Detto ciò, non mi resta altro da fare che augurarti buona lettura e buon lavoro!

Indice

Informazioni preliminari: fondamenti di HTML
- Cosa è HTML
- Parti principali di una pagina HTML
Programmi per creare una pagina HTML
Esempi di pagine HTML
Risorse utili

Informazioni preliminari: fondamenti di HTML

Prima ancora di passare nel concreto e iniziare a scrivere la tua prima pagina HTML, lascia che ti dia qualche informazione utile sul linguaggio e sulle tecnologie con le quali dovrai prendere confidenza per riuscire nel tuo intento.

Cosa è HTML

Come creare una pagina HTML

Acronimo di HyperText Markup Language, HTML non è un linguaggio di programmazione, bensì un linguaggio dichiarativo di markup: sostanzialmente, esso contrassegna una serie di elementi e ne specifica l’ordine di apparizione, e non si basa su algoritmi né su flussi operativi collegati.

HTML è un linguaggio interpretato e non programmato, e ha il preciso compito di indicare al suo interprete – in questo caso, il browser – la tipologia di elementi da visualizzare e la modalità con la quale vanno disposti nella pagina.

Ciascun elemento è racchiuso tra due tag, cioè tra due marcatori identificati da termini derivanti dall’inglese, inclusi in una coppia di parentesi angolari; lo stile grafico e il comportamento degli elementi inclusi tra i tag possono essere alterati grazie agli attributi, che vanno indicati all’interno del tag di apertura.

Nel momento in cui scrivo, lo standard più recente di HTML è HTML 5: diversamente a quanto succedeva in passato, questa edizione del linguaggio è in grado di gestire il comportamento degli elementi multimediali e l’aspetto responsive delle pagine (ad es. la possibilità di adattarsi a dimensioni, condizioni di luminosità e impostazioni globali diverse) senza la necessità di implementarvi componenti esterni, come elementi Flash o applet Java (ad oggi non più supportati).

Una pagina creata con solo codice HTML viene definita pagina statica, ossia progettata per mostrare sempre lo stesso contenuto, prevalentemente non modificabile dalle condizioni attuali dell’ambiente da cui viene visualizzata, né dal comportamento dell’utente in fase di navigazione.

Tuttavia, è possibile far collaborare HTML con numerosi altri linguaggi, al fine di costruire pagine più complesse, ricche di contenuti e, soprattutto, dinamiche: tra i linguaggi più conosciuti di questo tipo vale la pena menzionare il CSS, usato per definire lo stile degli elementi che compongono una pagina; il JavaScript, un linguaggio di programmazione che permette di manipolare dinamicamente la pagina rendendola, se necessario, adattiva (o responsive); e il PHP, altro potente linguaggio di scripting che consente di generare al bisogno codice HTML interattivo.

Parti principali di una pagina HTML

Giacché HTML è un linguaggio interpretato, che non necessita di alcuna compilazione, è possibile scrivere il codice delle pagine in un file di testo semplice, da salvare con estensione .html o .htm.

Come scoprirai tra non molto, per la creazione di siti e pagine complesse, ci si può altresì affidare ai cosiddetti ambienti di sviluppo integrati (o IDE): questi ultimi non gestiscono soltanto il codice delle singole pagine, ma sono in grado di organizzare tutti i componenti del progetto in maniera ottimale, semplificando aspetti fondamentali come il caricamento e la suddivisione dei contenuti, oltre che le varie versioni del sito.

Le pagine HTML vengono interpretate dal browser, il quale è in grado di “tradurre” il codice della pagina in parole, immagini, tabelle e altri elementi visualizzati su schermo, basandosi sulla tipologia di tag, sul contenuto degli stessi, sugli attributi e su eventuale codice esterno importato.

In particolare, i tag che delimitano ciascun elemento sono due: quello di apertura, composto dal termine specificante racchiuso tra due parentesi angolari (ad es. <table>) e quello di chiusura, quasi identico al primo, che antepone però al termine specificante il carattere slash “/” (ad es. </table>).

Gli attributi, se presenti, vengono indicati nel marcatore iniziale, utilizzando una sintassi simile a parametro="valore"; per esempio, se si vuole definire il percorso e la larghezza di un’immagine, vengono usati i parametri src="indirizzo"e width="dimensione".

In particolare, esistono alcuni tag che devono obbligatoriamente comparire in un file .html e che ti elenco nel dettaglio di seguito.

<!DOCTYPE html>: obbligatorio, è il tag che indica il contenuto del documento, in questo caso una pagina HTML.
<html>:è il tag di apertura che racchiude l’intero documento. Accetta come parametri diversi aspetti della pagina stessa, come la lingua e lo schema usato dal markup, e va chiuso esclusivamente alla fine del file.
<head>: è un tag che fornisce all’interprete informazioni utili circa la gestione della pagina, come il set di caratteri usato, il titolo della pagina, l’immagine distintiva, gli eventuali file esterni importati e così via.
<body>: specificato subito dopo la chiusura del tag <head>, il tag <body> contiene tutti gli elementi che devono essere visualizzati sullo schermo, come paragrafi (<p>), immagini (<img>), titoli e sottotitoli (<h1>, <h2> e così via), tabelle (<table>), collegamenti ipertestuali (<a>), moduli (<form>) e via discorrendo.

Ora, lascia che ti elenchi alcuni dei tag più usati per definire gli elementi di una pagina Web, da includere nel tag <body>.

Titoli: i più noti sono <h1>, <h2> e <h3>, vengono solitamente utilizzati per specificare i titoli/sottotitoli della pagina, sono indicizzati dai motori di ricerca e contraddistinti da un testo formattato in maniera differente, rispetto a quello predefinito per gli altri elementi.
Paragrafi: il contenuto di un paragrafo viene racchiuso tra i tag <p> e </p>.
Immagini – il tag che permette di includere le immagini in una pagina HTML è <img>, il quale ammette parametri come src (che specifica l’indirizzo dell’immagine), width (larghezza), height (altezza) e align (disposizione rispetto al testo).
Ancore: le ancore permettono di definire collegamenti ipertestuali in una pagina Web, andando a rendere “cliccabile” il testo racchiuso all’interno. Il parametro principale è href, che specifica la destinazione del collegamento.
Tag contenitore: talvolta, si rende necessario organizzare una pagina HTML in sezioni logiche, senza però alterarla graficamente. In casi del genere, si utilizza il tag contenitore <div>, in grado di suddividere la pagina in aree non visibili, accomunate da caratteristiche specifiche definite dall’utente.
Elenchi: in HTML, esistono dei precisi tag che servono a definire l’inizio e la fine di una lista puntata (<ul> e </ul>), di una lista ordinata/numerata (<ol> e </ol>) e di ciascun elemento dell’elenco (<li> e </li>). È possibile utilizzare parametri che definiscono la grafica e/o il tipo di ordinamento della lista (puntini, quadrati, spunte, cifre arabe, numeri romani e così via).
Moduli: alcuni tag HTML sono specificamente orientati alla creazione di moduli compilabili. L’inizio e la fine di un modulo vengono specificati dai tag <form> e </form>, i vari elementi di input (caselle di testo, caselle di spunta e così via) vengono identificati dal tag <input> e specificati dal parametro type. Per creare dei riquadri all’interno di un modulo, invece, viene utilizzato il tag <fieldset>.

Quelli appena elencati sono di certo i tag immancabili in una pagina HTML, ma non sono gli unici: vi sono infatti centinaia e centinaia di marcatori, utili a specificare elementi differenti e di varia natura.

Programmi per creare una pagina HTML

Prima ancora di farti qualche esempio pratico circa la realizzazione di una pagina HTML, lascia che ti spieghi quali sono i programmi che puoi utilizzare, al fine di scrivere il tuo codice.

Come creare una pagina HTML con Blocco note: Windows

Esattamente come tutti gli altri linguaggi interpretati o compilati esistenti sulla scena, anche le pagine HTML partono da un file di testo. Per questo motivo, il software più semplice utilizzabile per strutturare una pagina HTML su Windows è sicuramente il Blocco note, accessibile mediante l’icona disponibile nel menu Start.

Il Blocco note di Windows è un programma basilare, che non supporta alcun tipo di identificazione, formattazione o indentazione automatica del testo; tutto ciò che devi fare è digitare il codice HTML della tua pagina all’interno della finestra, prestando molta attenzione a chiudere tutti i tag aperti e a specificare in maniera corretta i vari parametri.

A lavoro completato, per salvare il file in maniera appropriata, clicca sul menu File > Salva con nome del Blocco Note, scegli la cartella in cui archiviare il file e imposta il menu a tendina Salva come sull’opzione Tutti i file. Infine, digita il nome da assegnare al file, avendo cura di specificare l’estensione .html (ad es. pagina.html) e clicca sul pulsante Salva.

Per visualizzare il tuo lavoro, fai semplicemente doppio clic sul file appena salvato: se tutto è filato liscio, la tua pagina Web dovrebbe aprirsi all’interno del browser. Qualora volessi applicarvi modifiche future, fai clic destro sul file .html e seleziona le voci Apri con > Blocco note dal menu contestuale che va ad aprirsi.

Come creare una pagina HTML su Mac

Come creare una pagina HTML

Se, invece, il tuo è un Mac, puoi ottenere risultati del tutto simili affidandoti all’applicazione “di serie” TextEdit, che puoi richiamare mediante l’icona disponibile nella cartella Altro del LaunchPad, oppure nel menu Vai > Applicazioni del Finder. Esattamente come il Blocco note, TextEdit non supporta alcuna funzionalità di formattazione, evidenziazione e indentazione automatica, pertanto dovrai prestare bene attenzione a non commettere errori durante la creazione della pagina.

Ad ogni modo, una volta aperto il programma, clicca sul pulsante Nuovo documento situato in basso a sinistra e digita il codice della tua pagina HTML, all’interno del campo di inserimento; quando hai finito, apri il menu Formato > Converti in formato solo testo e clicca sul pulsante OK, per eliminare la formattazione del testo (che renderebbe non fruibile la pagina HTML).

A questo punto, clicca sul menu File > Salva… di TextEdit (oppure premi la combinazione di tasti cmd+f), specifica la posizione in cui salvare il file, rimuovi il segno di spunta dalla casella posta accanto alla voce Se non è indicata nessuna estensione, usa “.txt” e digita il nome da assegnare al file, seguito dall’estensione .html.

Ora, non ti resta che cliccare sul pulsante Salva e fare doppio clic sul file appena archiviato, così da vedere il risultato del tuo lavoro in Safari, o qualsiasi altro browser tu possa usare sul Mac.

Altre soluzioni utili

Come creare una pagina HTML

Come puoi facilmente immaginare, le soluzioni che ti ho illustrato poco fa possono essere impiegate per la realizzazione di pagine HTML semplici; tuttavia, per semplificare la realizzazione di pagine più complesse o interi siti Web, potrebbe essere necessario utilizzare un vero e proprio ambiente di sviluppo integrato.

Esiste poi una seconda categoria di editor, denominata WYSIWYG, che permette di creare siti Web HTML anche con l’ausilio di una parte grafica, in grado di inserire elementi con l’ausilio di tastiera e mouse, senza agire nel codice. Chiarito ciò, lascia che ti presenti alcuni dei migliori IDE ed editor HTML utili per lo scopo.

Adobe Dreamweaver (Windows/macOS): è uno strumento semi-professionale estremamente potente che, grazie ai vari strumenti presenti al suo interno, permette di progettare siti Internet semplici e complessi. Oltre che essere un editor HTML, Dreamweaver può gestire fogli di stile CSS, JavaScript, file di grafica e molto altro. Il programma è coperto da licenza commerciale, ma si può provare gratuitamente per un periodo di tempo limitato.
Microsoft Visual Studio Code (Windows/macOS): è un ambiente di sviluppo sviluppato da Microsoft, che consente di organizzare e creare codice in diversi linguaggi di programmazione, HTML incluso. È gratuito.
Notepad++ (Windows): è un editor di testo avanzato, che supporta numerosi linguaggi di programmazione e include alcuni strumenti per semplificare la scrittura del codice. È gratuito.

Quelli che ti ho menzionato sono alcuni degli editor HTML più conosciuti, ma non sono gli unici: se sei interessato ad approfondire l’argomento, consulta le mie guide specifiche sui programmi per sviluppare siti Web e su quelli per sviluppare codice HTML, nei quali potrai trovare tanti altri software di questo tipo che possano aiutarti a portare a termine il tuo lavoro.

Esempi di pagine HTML

Dopo aver analizzato il funzionamento dei marcatori più importanti, sei finalmente pronto a mettere nero su bianco il tuo lavoro e a realizzare alcune semplici pagine HTML, che possano aiutarti a comprendere i costrutti base del linguaggio.

Come creare una pagina Web HTML di base

Iniziamo da una pagina HTML di base, composta da un titolo, un paragrafo e un collegamento ipertestuale. Nel corpo della pagina, potresti imbatterti nel tag : esso serve a definire un commento, utile allo sviluppatore per specificare informazioni utili riguardanti il codice, ma che non verrà interpretato dal browser.

<!DOCTYPE HTML> <html lang="it">  <head> <title>La mia prima pagina</title>  </head> <body> <h2>Benvenuti nel mio sito Web</h2> <p>Ciao! Io sono Salvatore Aranzulla e ti mostro una pagina HTML semplice.</p> <p class="colore">Vieni sul mio sito <a href="https://www.aranzulla.it">cliccando qui</a>.</body> </html>

Come creare una pagina HTML con CSS

Come creare una pagina HTML

Sebbene HTML sia in grado di gestire la formattazione basilare degli elementi, è possibile utilizzare un linguaggio specifico che permetta di modificarne l’estetica, la disposizione e le decorazioni a proprio piacimento: il CSS. Tale linguaggio ha una sintassi estremamente diversa da quella di HTML, principalmente incentrata sulla definizione grafica dei vari elementi.

Questa tipologia di codice può essere inclusa in una pagina HTML in due modi: il primo, utile quando gli elementi sono pochi e limitati a una singola pagina, consiste nel racchiuderlo all’interno del tag <style>, dichiarato nella sezione <head>; il secondo, invece, prevede la scrittura del codice all’interno di un file di testo dotato di estensione .css, che può essere importato in una o più pagine HTML utilizzando il tag <link>(ad es. <link href="fogliostile.css" rel="stylesheet" type="text/css">), anch’esso destinato a risiedere nella sezione <head> della pagina.

Per esempio, di seguito ti illustro il codice di un foglio di stile CSS che possa colorare tutti gli elementi appartenenti alla classe colore: in particolare, il testo verrà colorato di blu, con sfondo rosso e sarà in grassetto. Inoltre, la spaziatura tra i caratteri verrà aumentata a 5 pixel.

.colore {color:blue; background-color:red; font-weight:bold; letter-spacing: 5px;}

Per verificare il funzionamento del foglio di stile, incolla il codice qui sopra in un file di testo semplice e salvalo con il nome stile.css, all’interno della stessa pagina in cui hai precedentemente salvato la pagina HTML di base. Successivamente, apri in modifica la pagina HTML, aggiungi la riga qui sotto al tag <head> della pagina.

<link href="stile.css" rel="stylesheet" type="text/css">

Per concludere, salva il file, fai doppio clic sul rispettivo html e… goditi il risultato!

Come creare una seconda pagina HTML

Come creare una seconda pagina html

Usando gli editor di testo, gli ambienti di sviluppo e la tua fantasia, puoi creare tutte le pagine HTML che desideri. Di qui, però, la domanda: come fare affinché una pagina HTML ne richiami una seconda, semplicemente facendo clic su una parola, un pulsante un’immagine?

Ebbene, il già analizzato tag <a>, se utilizzato in maniera opportuna, consente di collegare tra loro più pagine Web: la pagina di destinazione viene indicata all’interno del parametro href, mentre il tipo di apertura rispetto alla pagina principale (ad es. in nuova scheda) viene specificato nel parametro target.

Per esempio, se ti appresti a creare un sito personale, la pagina potrebbe comporsi di una breve descrizione di te stesso, una foto e alcuni link che conducono ad altre pagine tematiche, come per esempio una biografia (bio.html), un portfolio (portfolio.html) e una pagina contatti (contatti.html), che devi avere cura di creare separatamente. Tanto per farti un’idea, questo potrebbe essere il codice di una siffatta pagina.

<!DOCTYPE html> <html lang="it"> <head> <title>La mia home page</title> </head> <body bgcolor="#E6E6FA"> <h2>Mi presento</h2> <img src="https://tinyurl.com/53epdjjz" width="250" height="187" /> <p>Ciao! Io sono Salvatore Aranzulla. Ecco le mie info.</p> <ul> <li><a href="bio.html">Biografia di Salvatore </a></li> <li><a href="portfolio.html">Lavori di Salvatore </a></li> <li><a href="contatti.html">Contatti di Salvatore </a></li> </ul> <p>Per accedere alla sezione guide <a href="https://www.aranzulla.it" target="_blank" />clicca qui.</a></p> </body> </html>

Come puoi facilmente intuire, i collegamenti ipertestuali alle altre pagine del sito sono stati inseriti all’interno di una lista puntata non ordinata. Oltretutto, alla pagina è stato assegnato uno sfondo colorato tramite il parametro bgcolor.

Come creare una pagina HTML online

Come creare una pagina HTML

Come dici? Hai intenzione di creare la tua pagina HTML direttamente su Internet, senza installare alcun programma sul tuo computer? Allora un CMS potrebbe fare al caso tuo: di fatto, un Content Management System è un sistema, anch’esso scritto in linguaggio Web, che permette di gestire tutte le fasi della creazione di una pagina HTML (o di un intero sito Internet) attraverso un portale di gestione dotato di interfaccia grafica.

Su Internet, esistono diversi CMS che permettono di creare e pubblicare agevolmente pagine Web o interi siti, anche molto strutturati: tra i più conosciuti e apprezzati vi sono sicuramente Shopify, WIX, Hostinger (con supporto all’intelligenza artificiale) e Aruba Sites, per la realizzazione di pagine Web e siti semi-professionali, ma non mancano soluzioni ulteriormente semplificate, come WordPress.com, Google Sites e Blogger.

Ad ogni modo, laddove fossi interessato ad approfondire il tema, consulta senza esitare le mie guide su come creare una pagina Web online, come creare un sito Internet, come creare un sito Web professionale e come creare un sito Internet aziendale: sono certo che ti torneranno estremamente utili.

Nota: se hai intenzione di creare i tuoi siti Web direttamente sul computer, puoi altresì evitare l’uso di un CMS online, optando invece per l’acquisto di un dominio e il caricamento manuale delle pagine del sito. Maggiori info qui.

Risorse utili

Ora che hai appreso tutte, ma proprio tutte, le tecniche di base per la creazione di svariate tipologie di pagine HTML, hai iniziato a prenderci gusto e vorresti approfondire la conoscenza dell’argomento, poiché hai intuito che la potenza di HTML va ben al di là di quanto ti ho spiegato nelle battute precedenti di questa guida? Non preoccuparti, non ho intenzione di lasciarti solo, neanche in questa fase: nelle righe a venire, ho infatti tutta l’intenzione di fornirti ulteriori risorse da consultare per accrescere le tue conoscenze sul tema.

Guida HTML di HTML.it: con molta probabilità, si tratta di una delle guide più complete, articolate e ricche di approfondimenti disponibili in Rete: è suddivisa in sezioni tematiche e include autentiche lezioni, esempi pratici ed esercitazioni di vario tipo. Oltretutto, la guida di HTML.it viene costantemente aggiornata.
W3Schools.com: questo portale, promosso e pubblicato dal W3C, è interamente dedicato al linguaggio HTML e alle altre tecnologie che vi girano intorno. La sua particolarità è quella di poter eseguire numerosi esercizi di auto-verifica, al termine di ciascuna lezione, per verificare e valutare le nuove competenze acquisite.

Infine, se preferisci la carta stampata al digitale, sappi che esistono centinaia e centinaia di guide, libri e approfondimenti dedicati allo sviluppo in HTML, e in tutti i linguaggi che vi ruotano intorno: puoi facilmente procurarti il materiale direttamente online, o nella sezione Informatica/Tecnologia delle più fornite librerie.

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

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.