Imparare l’HTML: i primi passi da compiere con il linguaggio standard del web
Alla fine degli anni 80 l’informatico britannico Tim Berners-Lee sviluppò i componenti di base del World Wide Web. In quanto allora impiegato presso l’Organizzazione Europea per la Ricerca Nucleare (CERN) egli si stava dedicando principalmente ad un progetto interno che aveva lo scopo di rendere possibile lo scambio transnazionale di informazioni in rete tra i vari laboratori del CERN, che si trovavano in parte su territorio francese e in parte su territorio svizzero. Come base per l’infrastruttura di rete pianificata, Berners-Lee, utilizzò l’ipertesto, ovvero un formato testuale che trasmette informazioni tramite rimandi (link ipertestuali) e che viene scritto con il linguaggio di markup. Il risultato fu il Hypertext Markup Language, o HTML in breve.
Circa tre decenni dopo, assieme ad altri componenti come il protocollo di trasferimento HTTP, l’URL, i browser e i server web, l’HTML rappresenta le fondamenta del networking mondiale e digitale; il che rende l’apprendimento di questo linguaggio web un must per ogni sviluppatore. Per facilitarvi la comprensione del principio del linguaggio di markup e dunque iniziare ad utilizzarlo, abbiamo riassunto in questo tutorial HTML i fondamentali e i consigli più importanti per chi vuole cominciare.
Che cose l’HTML?
L’HTML si annovera tra i linguaggi leggibili dalle macchine, definiti anche linguaggi computistici, che permettono l’interazione tra i computer e gli uomini. Questo linguaggio rende possibile la definizione e la strutturazione di elementi tipici di un documento focalizzato sul testo, come intestazioni, capoversi, liste, tabelle o grafici, i quali vengono contraddistinti al suo interno. La rappresentazione visiva avviene tramite un browser a scelta, il quale interpreta le righe di codice sorgente, in modo da sapere in che modo devono essere riprodotti i singoli elementi. In aggiunta il codice HTML può contenere indicazioni sotto forma di meta informazioni, come ad esempio riguardo all’autore.
Come linguaggio di markup l’HTML viene usato oggigiorno perlopiù solamente nella sua funzione descrittiva, mentre il design viene definito con l’utilizzo di linguaggi di fogli di stile, come il CSS (Cascading Style Sheets). Agli albori del web era comunque cosa comune che gli adattamenti visivi avvenissero tramite HTML.
L’HTML si è sviluppato dal metalinguaggio SGML (Standard Generalized Markup Language), oggi sempre meno utilizzato, che è uno standard ISO riconosciuto (8879:1986). La dicitura degli elementi SGML si trova anche nell’HTML. Solitamente tali diciture vengono marcate tramite coppie di tag, che consistono di start tag <> e di end tag </>, anche se per alcuni elementi l’end tag non è necessario; inoltre esistono alcuni elementi vuoti come l’interruzione di riga <br>. Oltre ai tag ci sono altre caratteristiche dell’HTML che agiscono sulla stessa falsariga:
- Document Type Declaration: informazioni della versione HTML utilizzata, come ad esempio <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
- Utilizzo di componenti sotto forma di caratteri: alcune componenti vengono utilizzate per delle unità che si ripetono, come ad esempio < per “<” o & per “&”.
- Marcatura dei commenti: i commenti vengono aggiunti nell’HTML secondo questo modello <!—commento>.
- Attributi: le caratteristiche complementari dei tag vengono aggiunte secondo modello <attributo tag=”valore”>.
Quale software è necessario per scrivere in codice HTML?
La prima domanda che è lecito porsi in questa breve panoramica sull’HTML è: con quale software conviene scrivere? Ma a questa domanda è praticamente impossibile dare una risposta onnicomprensiva. Da un lato i requisiti di programma sono praticamente inesistenti, perciò un semplice text editor, presente in ogni sistema operativo, basta e avanza. D’altro canto l’utilizzo di programmi specifici per HTML offre chiare semplificazioni durante la scrittura. Ma quanto sono adatte le diverse opzioni durante la fase di apprendimento dell’HTML?
Semplici text editor
Per scrivere un codice HTML non necessitate di alcun software particolarmente esigente. Un semplice editor come l’editor di Windows, conosciuto anche come Notepad, o il TextEdit dei computer Mac (nella modalità di testo in chiaro), basta come base su cui lavorare. E nonostante con tali programmi manchi la possibilità di modificare il layout del testo, si tratta comunque di una mansione che non fa direttamente parte delle formattazioni HTML. Da un punto di vista teorico anche i programmi per l’elaborazione testuale come Microsoft Word o OpenOffice Writer possono essere ugualmente utilizzati, ma, se siete nella fase di studio dell’HTML, sarà difficile approfittare delle funzioni aggiuntive che essi mettono a disposizione. In alcuni casi le funzioni superflue possono anzi avere l’effetto contrario e frenare il processo di apprendimento.
Per muovere i primi passi durante l’apprendimento dei fondamentali dell’HTML vi basterà utilizzare un semplice text editor, che troverete già installato in qualunque sistema operativo stiate utilizzando.
HTML Editor
Al fianco dei semplici editor e di programmi di elaborazione testuale più complicati, esistono anche degli editor specifici dotati di appositi aiuti: questi programmi, ad esempio, mettono in risalto le distinzioni sintattiche con l’aiuto di diversi colori, fornendovi così un’eccezionale panoramica su tutto il codice che avete messo per iscritto. Inoltre vi evidenziano eventuali errori sintattici che avete commesso. Un altro standard di questi programmi è la funzione di completamento automatico, la quale sottoporrà alla vostra attenzione delle proposte di estensione ovvero di completamento del codice durante la scrittura dei tag HTML e ad esempio completerà automaticamente il vostro end tag. In aggiunta, spesso gli editor HTML dispongono di una funzione di anteprima, con la quale, ogniqualvolta lo desideriate, premendo semplicemente un pulsante, potrete esaminare il risultato provvisorio delle vostre righe di codice. Un editor per gli utenti Windows che valga la pena di provare è Notepad++, gratuito e con licenza GPL; mentre un’alternativa gratuita per chi utilizza sistemi compatibili con UNIX è Vim.
Editor HTML con rappresentazione in tempo reale
Un’altra tipologia di editor che disponga di tutte le amenità e che sia integrato in praticamente tutti i siti web pronti all’uso e nei sistemi di content management, sono gli editor HTML con rappresentazione in tempo reale, meglio conosciuti come editor WYSIWYG. L’acronimo rimanda al concetto che sta alla base di questi programmi, ovvero “What You See Is What You Get”, traducibile in italiano come “ciò che vedi, è ciò che avrai”. Questi editor sono stati sviluppati specificamente per la produzione di codici HTML e richiedono tra l’altro solo poche conoscenze sul linguaggio di markup. Come in un programma di elaborazione di testi, anche con un editor strutturerete il vostro testo con il supporto di tasti preimpostati nel menu, senza dover quindi immettere manualmente neanche un singolo tag HTML. I tag corrispondenti alle vostre esigenze vengono difatti generati direttamente dall’editor WYSIWYG in secondo piano. Ma per l’apprendimento del linguaggio di codifica HTML alcuni editor sono davvero del tutto inadatti, come ad esempio è il caso di BlueGriffon, indipendentemente dal fatto che vi rendano possibile di guardare in tempo reale il codice prodotto o meno.
Impostare la prima pagina HTML
Il primo passo del tutorial HTML è quello di realizzare una pagina iniziale molto facile, che sarà poi visualizzabile direttamente sul browser. Tuttavia, questa non sarà ancora una pagina HTML valida, costruita secondo gli standard definiti, piuttosto una pagina di prova pura. Per la realizzazione di questa prima pagina, così come per tutti i successivi esempi HTML di questo tutorial è stato utilizzato il già accennato Notepad++ come editor. Doveste utilizzare un altro programma, il procedimento potrebbe allora discostarsi leggermente dai passaggi indicati in seguito.
Come prima cosa aprite l’editor e salvate il nuovo file con il nome test. Come formato file scegliete “Hypertext Markup Language file”, cosicché in seguito anche il browser sappia che si tratta di una pagina HTML. Se avete invece scelto di servirvi di un editor più semplice, allora in questo caso dovreste scegliere “Tutti i file” (Codifica: UTF-8) e utilizzare l’estensione HTML direttamente nel campo nome del file, in modo da salvare il file con il nome di test.html.
Il file appena creato dovrebbe apparire con l’icona del browser da voi utilizzato. Cliccandoci due volte sarete già in grado di aprire la pagine, ma poiché manca qualunque tipo di contenuto, tutto ciò che vedrete è una pagina completamente bianca. Come prossimo passaggio aggiungete dunque un breve testo esemplificativo come “Questa è la mia prima pagina HTML”, salvate il documento e aprite nuovamente il file test.html. Il risultato dovrebbe essere lo stesso di quello mostrato qui a seguito, anche se chiaramente in italiano:
HTML: le basi della strutturazione del testo
In questo modo avete già impostato con successo la vostra prima pagina web; e tutto ciò senza aver dovuto far ricorso ad alcun tipo di markup HTML. Ma se in un secondo momento provate ad inserire, nella stessa maniera, un testo strutturato con titoli e capoversi, vi renderete conto che senza i tag non si va da nessuna parte. Le formattazioni apportate, ad esempio tramite un programma di elaborazione testi, scompariranno nella visualizzazione tramite browser: le impaginazioni verranno cancellate automaticamente, più spazi bianchi accorpati, e così via. La soluzione è quella di contrassegnare i diversi elementi di testo come tali grazie all’utilizzo degli elementi strutturali; ovvero fare il passaggio verso il mondo HTML.
Stabilire i capoversi con il tag <p>
Per formare i paragrafi avrete bisogno del tag <p>, che rimanda alla parola inglese “paragraph”. Lo start tag segna l’inizio, mentre l’end tag terminerà il paragrafo in questione. Nel mezzo delle due marcature si troverà il testo da separare. In tutte le versioni HTML, salvo l’XHTML, il tag di chiusura è opzionale, ciononostante l’utilizzo di tale indicazione è sinonimo di buon stile ed è particolarmente raccomandabile durante la fase di apprendimento dell’HTML. Potete provare a separare i capoversi direttamente nella pagina di prova realizzata, inserendo un ulteriore paragrafo e separandoli come appena spiegato:
<p>This is my first webpage!</p>
<p>This is the second paragraph of my first webpage.</p>Consiglio: il capoverso introdotto manualmente serve solamente ad una migliore chiarezza. Potete benissimo scrivere i due elementi <p> in una singola riga uno dopo l’altro.
Inserire i titoli: il tag <h>
Altrettanto importanti per una struttura ordinata dei vostri testi per pagine web, sono le intestazioni. Con HTML non solo avete la possibilità di contraddistinguerli tutti in una volta, ma inoltre può essere impostata una gerarchia chiara per tutti i titoli utilizzati. A questo scopo avete a disposizione i tag da <h11> fino a <h6>, dove <h1> rappresenta il titolo principale della pagina web in questione. Questo tag andrebbe utilizzato non più di una volta a pagine, differentemente da <h2> e dai seguenti.
È importante che manteniate la sequenza gerarchica corretta e che non saltiate indiscriminatamente dall’una all’altra; in questo modo sia i motori di ricerca che i lettori saranno in grado di comprendere la struttura del testo in base alle intestazioni. Per la nostra pagina di prova aggiungiamo a mo’ di esempio un titolo principale come anche un primo sottotitolo:
<h1>Main heading: my first webpage</h1>
<p>This is my first webpage!</p>
<h2>Second heading</h2>
<p>This is the second paragraph of my first webpage.</p>Consiglio: Poiché il documento HTML ottenuto fino ad ora è una variante semplificata senza meta informazioni, alcuni browser come Firefox potrebbero non mostrare le lettere accentate o altri caratteri correttamente. Per fare la prova dovreste come prima cosa tentare su Google Chrome o, in alternativa, utilizzare la dicitura HTML corrispettiva. Nell’esempio qui utilizzato dovrete sostituire “è” con è.
Mettere in evidenza parole o passaggi con il corsivo o il grassetto: <i>, <em>, <b> e <strong>
Tra i fondamentali più importanti dell’HTML c’è anche la possibilità di evidenziare singoli ritagli di testo o parole. In questo modo potete indirizzare il focus del lettore in maniera mirata a degli elementi testuali importanti da un punto di vista contenutistico o funzionale e aiutare così il lettore a coglierli con maggiore facilità.
Con i tag <i> e <em> rendete il testo selezionato in corsivo al fine di distinguere le frasi come pensieri o di espressioni tecniche. Tuttavia l’utilizzo del corsivo tende a frenare il flusso di lettura, per questo motivo è buona cosa utilizzare entrambi i tag con moderazione. Ancora più importanti sono gli elementi <b> e <strong>, che mettono in grassetto parole o porzioni di testo. Con il tag <b> favorite alcuni contenuti sui quali l’utente farà consapevolmente particolare attenzione. Al contrario la marcatura <strong> è prevista per elementi testuali particolarmente importanti da un punto di vista contenutistico.
Per una spiegazione più concreta dei tag di marcatura, ampliamo un po’ il nostro codice HTML:
<h1>Main heading: <i>my first webpage</i></h1>
<p>This is my<strong>first</strong>first webpage!</p>
<h2>Second heading</h2>
<p>This is the second paragraph of my <em>first webpage</em>.</p>
<p><b>Note</b>:Typical example for the<b>-tag.</p>Consiglio: per far sì che l’esempio del codice HTML nel passaggio testuale aggiunto non compaia nel testo in chiaro, abbiamo sostituito le parentesi angolari “<” e “>” con la dicitura HTML corrispondente < e >. Anche qui va ricordato l’utilizzo delle diciture HTML per gli accenti.
Fare degli elenchi: liste punto per punto con i tag <ul>, <ol> e <li>
Le liste della spesa non sono le uniche liste che possono rendervi la vita più semplice, esse risultano un mezzo di grande utilità anche per rendere alcuni paragrafi più distesi e ottimizzare in questo modo la leggibilità. Con HTML potete realizzare degli elenchi per il vostro progetto web sia con numerazione ordinata sia senza. Per un elenco non ordinato va utilizzato il tag <ul> (derivante dall’inglese “unordered list”), mentre la variante più ordinata la si può ottenere con il tag <ol> (“ordered list”). I singoli punti di un elenco vengono invece definiti con il tag <li>; il quale funziona solo in combinazione con uno dei due tipi di liste. Potete provare il funzionamento delle liste HTML con il seguente codice:
<ul>
<li>first unordered-list item</li>
<li>second unordered-list item</li>
<li>third unordered-list item</li>
</ul>Il risultato dovrebbe assomigliare a questo:
Se invece desiderate trasformare l’elenco disordinato in una lista numericamente ordinata, vi basterà scambiare il tag:
<ol>
<li>first ordered-list item</li>
<li>second ordered-list item </li>
<li>third ordered-list item </li>
</ol>Una volta fatto, sul browser compariranno i numeri al posto dei cosiddetti “bullet points”, ovvero i cerchi neri pieni di cui sopra:
Riportare i dati in maniera strutturata con l’aiuto di tabelle: <table>, <tr> e <td>
Per molti anni la prassi è stata quella di utilizzare tabelle HTML non solo per la presentazione pratica di dati complessi, ma anche per la strutturazione dell’intero layout di una pagina web o di testi divisi in più colonne. Con l’ascesa del CSS questo ruolo aggiuntivo è passato sempre più in secondo piano, così che le tabelle oggigiorno vengono utilizzate esclusivamente nella loro funzione standard per la quale erano state pensate, ovvero l’analisi di dati. Perciò ogni tabella si forma di almeno questi tre componenti:
- <table>: lo start e l’end tag <table> definiscono l’inizio e la fine di una tabella HTML. Questo comando di per sé non porta a nulla, poiché il browser non è in grado di procedere se non gli vengono indicate il numero di righe e di colonne.
- <tr>: con l’elemento <tr>, che deriva dal termine inglese “table row”, aggiungerete una riga alla tabella. Per quanto riguarda il numero di righe, non c’è alcun limite massimo.
- <td>: una volta che avrete inserito anche le colonne avrete la struttura di base della vostra tabella. Il tag necessario per fare ciò è <td> (dall’inglese “table data”), che logicamente è sempre sottomesso al tag <tr>, poiché vi devono essere una o più righe di dati per far sì che questa/e possa/no essere divisa/e in più celle dati. Il contenuto dei campi dati va posizionato tra l’elemento d’apertura <td> e quello di chiusura </td>.
Trattandosi di una struttura un po’ complicata da capire, vi mostriamo come si crea una prima, facile tabella HTML, composta di una singola riga e due colonne:
<table>
<tr>
<td>first data field</td>
<td>second data field</td>
</tr>
</table>L’anteprima derivante dal codice HTML appena riportato fa sembrare che si sia verificato un errore e che la tabella non abbia funzionato come desiderato. Bisogna sì riconoscere che si sono definite due colonne e che si tratta di una tabella, ma la spiegazione sta nel fatto che di norma le celle delle tabelle HTML non hanno alcuna bordatura visiva. Per inserire un bordo all’estremità delle caselle si deve ampliare il tag <table> con l’attributo border e con il valore 1:
<table border="1">
<tr>
<td>first data field</td>
<td>second data field</td>
</tr>
</table>Riaprendo ora il documento HTML nel vostro browser di utilizzo, vedrete il layout della tabella, esattamente come siete soliti vederlo navigando.
Consiglio: HTML5 non supporta più l’attributo border, rendendo quindi la bordatura delle celle un compito spettante al CSS.
