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. 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). 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, 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 Java Script, un vero e proprio linguaggio di programmazione che permette di manipolare dinamicamente la pagina e renderla interattiva, se necessario.
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: 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, ecc) 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 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://corsoinformatico.altervista.org/prova.jpeg” width=”640” height=”480” />). 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
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://corsoinformatico.altervista.org”>Il mio sito</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 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 (Word, il Blocco Note di Windows o TextEdit per macOS) e digita al suo interno il seguente codice.
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.
Il foglio di stile CSS
Serve per 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=”http://nomefogliostile.css” target=”_blank” rel=”nofollow” 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:gray; 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 Word o Blocco note/TextEdit dalla lista visualizzata a schermo), inserire la stringa di testo <link href=”http://nomefogliostile.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!