Accedi come Scuola



Guida HTML: Titoli, Liste, Commenti e Validazione

Nel precedente tutorial hai imparato abbastanza HTML per consentirti di scrivere dei contenuti testuali e linkare risorse esterne (altre pagine web). Ora, per arricchire le tue possibilità di espressione, ti insegnerò l’utilizzo di titoli, commenti, liste e validazione del codice. Entro la fine di questo capitolo sarai in grado di scrivere una pagina HTML ricca di nuovi elementi e di verificarne la correttezza utilizzando un apposito strumento disponibile online.

I Titoli: i tag della famiglia “h”

Nell’ultimo esempio visto ho inserito un titolo al di sopra del testo in cui racconti di aver finalmente trovato una guida HTML talmente valida da meritare di essere linkata e condivisa senza ritegno.

Per farlo ho utilizzato il tag “h1” che sta per header (intestazione, titolo) 1.
Come vedremo fra poco, oltre al tag h1 esistono anche i tag h2, h3, h4, h5 e h6 che servono a definire dei titoli meno importanti (nota bene: il tag h7 e superiori non esistono).
Ma in questo caso la situazione richiede sicuramente il titolo più grande e importante che si possa definire, quindi proviamo a utilizzare subito il tag h1.
Per prima cosa crea una cartella “lezione-2” e copia al suo interno il file “3-link.html”, rinominandolo “0-h1-primo-esempio.html”. La tua struttura dei file deve quindi apparire identica a questa:

Nota anche che il file 0-h1-primo-esempio.html è identico nel contenuto al file 3-link.html della precedente lezione-tutorial.
Per inserire il titolo puoi ora utilizzare il tag h1 che, ovviamente, è un tag con un’apertura e una chiusura. Così:

A questo punto puoi salvare il file e aprirlo in anteprima per verificare il risultato.

Nota bene: I tag h1, h2, h3, h4, h5 e h6 non possono essere inclusi all’interno dei paragrafi. Ogni tag HTML, come vedremo, ha un ruolo all’interno della pagina e può essere inserito solo in alcune posizioni, altrimenti il codice non è valido. Per esempio, il seguente sarebbe stato codice non valido:

<p><h1>La Guida HTML che stavo cercando</h1>
Ciao Mamma, finalmente…
</p>

Ma allora, come fare a sapere se il codice HTML che stai scrivendo rispetta tutte le regole ed è quindi valido? Non avere fretta, lo scopriremo alla fine di questo capitolo ;-)

Ora, invece, è proprio il caso di fare la conoscenza con tutti i titoli che possono essere definiti dai tag della “famiglia h”.

Esercizio n.1.2.1

Crea un nuovo file “1-h1-h2-h3-etc.html” all’interno della “lezione-2”.
Definisci la struttura HTML completa di doctype, tag html, head, title, meta charset e body. A questo punto dovresti essere in grado di farlo a memoria!
All’interno del body definisci tutti i tag da h1 ad h6, scrivendo all’interno di ciascuno un testo a piacere.
Salva il file e aprilo col browser per osservare l’aspetto di ciascun titolo.

 


SOLUZIONE


 


 
Browser preview:


I Commenti HTML

Immaginiamo che tu voglia aggiungere un appunto al file precedente per ricordarti che il tag h7 non esiste, oppure che tu voglia scrivere quello che pensi veramente di questa guida senza farmelo sapere… I commenti HTML servono proprio ad aggiungere appunti (o commenti) all’interno di un file HTML che saranno ignorati dal Browser e visualizzati solo da un editor HTML.

La sintassi dei commenti è la seguente:

<!-- testo del commento -->

Proviamo subito ad aggiungere un commento al file precedente (1-h1-h2-h3-etc.html) per ricordarci che il tag h7 non esiste, ecco come fare:

La riga 14 del file contiene un tuo appunto visibile solo aprendo il file con l’editor testuale, infatti, se provi a visualizzare nuovamente il file col browser, puoi constatare che nulla è cambiato nel risultato finale:

Il commento contenuto nella riga 14 non è visibile al visitatore della tua pagina web.

E ora puoi finalmente scrivere cosa pensi veramente di questa guida nel file “0-h1-primo-esempio.html” inserendo un tuo commento. Per esempio così:

Prova quindi ad aprire il file in anteprima per verificare che il testo del commento sia visibile solo a te.

Nota bene: 

  • Online in realtà i commenti HTML possono essere letti anche dai visitatori utilizzando degli strumenti appositi installati nel browser, strumenti che vedremo in seguito, ma sono in pochi a saperlo ;-)
  • Puoi andare a capo quante volte vuoi nel testo compreso fra “<!--” e “-->”.
  • Non ti ho ancora insegnato a realizzare una lista puntata come questa, è tempo di rimediare!

Dopo tutta questa violenza psicologica scommetto che non me lo metterai mai il +1, e figuriamoci se twitti... tanto vale chiedertelo adesso:

Grazie mille! ;-)

Le Liste

Le liste servono a rappresentare un elenco di informazioni e possono essere di due tipi: puntate e numerate.

Le liste puntate sono definite dal tag ul, da "unordered list" (lista non ordinata) mentre le liste numerate sono definite dal tag ol, da "ordered list" (lista ordinata).

Le liste puntate o “non ordinate”: il tag ul

La sintassi delle liste puntate è la seguente:

<ul>
    <li>primo elemento</li>
    <li>secondo elemento</li>
    <li>terzo elemento</li>
    <!-- ...continua... -->
    <li>ultimo elemento</li>
</ul>

All’interno dei tag <ul> e </ul> si utilizzano i tag li, da "list item" (elemento della lista), i quali, a loro volta, definiscono gli elementi che compongono la lista.

Esercizio n.1.2.2: proviamo la sintassi delle liste puntate

  1. Per prima cosa, come di consueto, devi creare un file dedicato a questo esercizio, chiamandolo: “2-ul-liste-puntate.html”. Questo file deve contenere solo la struttura html di base e un title appropriato, così:


     
  2. All’interno del body Inserisci il titolo h1 “argomenti imparati finora”
  3. Sotto al titolo h1 elenca gli argomenti che hai imparato, usando i tag “ul” e “li”, secondo la sintassi appena spiegata.

 


SOLUZIONE DI ESEMPIO


 


Browser Preview:


Esercitati creando una seconda lista a piacere. Per esempio puoi creare la lista degli ingredienti del tuo piatto preferito

Ricordati che ora puoi anche inserire degli appunti nei tuoi file utilizzando i commenti HTML, per esempio:


Quando ti sentirai sicuro di quanto finora imparato, sarà tempo di imparare come realizzare le liste numerate.

Le liste numerate o “ordinate”: il tag ol

Le liste numerate sono l’ideale per rappresentare un elenco di elementi con un ordine ben preciso o gerarchico. Se per esempio ti chiedessi di elencare i tuoi cibi preferiti mi risponderesti dicendo, per esempio “al primo posto la cioccolata, al secondo posto la marmellata, al terzo posto il miele” e così via. In sostanza stai facendo, a voce, una lista numerata. Vediamo come fare la stessa cosa in HTML.

Il tag che definisce una lista numerata è il tag ol, da "ordered list" (lista numerata) e funziona in modo del tutto simile al tag ul appena incontrato.

Prova a usarlo subito, facendo una lista delle tue bevande preferite.

Esercizio n.1.2.3: proviamo la sintassi delle liste numerate

  1. Crea il file “3-ol-liste-numerate.html” sempre nella cartella “lezione-2” e imposta la solita struttura di un file html che ormai dovresti conoscere a memoria: doctype, head, title, charset e body. D’ora in poi quando ti dirò “crea un file” sarà sottinteso che devi impostare anche la struttura completa e corretta di un file HTML. Di seguito riporto un esempio per l’ultima volta:

  2. Inserisci il titolo h1 “Le mie bevande preferite” 
  3. Elenca le tue 4 o 5 bevande preferite

 


ESEMPIO DI SOLUZIONE


 


Browser preview

 


Non so se anche tu sei un chiacchierone come me, ma io non ho potuto fare a meno di inserire delle spiegazioni tra parentesi. Però avrei preferito che tali spiegazioni fossero scritte più in piccolo e magari a capo. Insomma, così:

Vuoi provarci?


Esercizio n. 1.2.4: andare a capo all’interno di un li, il tag small e ripasso

Sapendo che:

  1. Ho utilizzato un h2 al posto di h1 per il titolo in alto (altrimenti era troppo grande e per il momento non sappiamo ancora utilizzare il linguaggio CSS per definire la dimensione dei testi),
  2. Ho utilizzato il tag b per rendere in grassetto i nomi delle bevande,
  3. Ho utilizzato il tag br per andare a capo all’interno dello stesso li,
  4. Ho utilizzato un nuovo tag small (piccolo) per rimpicciolire il testo di spiegazione,
  5. Il tag small, pur essendo la prima volta che lo incontriamo, funziona esattamente come tutti gli altri tag con apertura e chiusura,

prova a scrivere il codice HTML che corrisponde all’anteprima qui sopra. Puoi utilizzare dei testi a piacere ma il risultato finale dev’essere il più possibile simile all’esempio proposto qui sopra.


Ah, dal momento che il codice diventerà leggermente più complesso, ricordati di indentarlo!

 


SOLUZIONE DI ESEMPIO


P.S.: In tanti mi avete chiesto cosa sia "Il Milanese Imbruttito", ebbene si tratta di un cocktail inventato dall'omonimo blog di facebook. Sono restìo a darti la ricetta perché non vorrei che ora tu andassi a ubriacarti e a cazzeggiare sui social proprio adesso che siamo a buon punto con la lezione... Mi raccomando! -_-

Un’ultima cosa da sapere sulle liste è il fatto che esse possono anche essere annidate, cioè inserite l’una dentro l’altra.

Le liste annidate

Supponiamo che per ciascuna bevanda tu voglia indicare anche in quali occasioni ti piace berla, inserendo una lista puntata sotto a ciascun punto della lista numerata. 
In altre parole, supponiamo di voler ottenere una struttura di questo tipo:


Come puoi notare la struttura presenta una lista numerata di 5 elementi (le bevande) e include, per ciascun elemento, una sotto-lista puntata con un numero di elementi variabile.

La sintassi per creare le sotto-liste o liste annidate è la seguente:

<ol>            <!-- tag di apertura della lista principale --> 
  <li>          <!-- tag di apertura del primo elemento della lista principale --> 
    <ul>        <!-- tag di apertura della sotto-lista -->
      <li></li> <!--elementi della sotto-lista -->
    </ul>       <!-- tag di chiusura della sotto-lista -->
  </li>         <!--tag di chiusura del primo elemento della lista principale
  <!--- altri elementi della lista principale -->
</ol>           <!-- tag di chiusura della lista principale -->

Il codice sorgente dell’ultimo esempio è infatti il seguente:

<!DOCTYPE html>
<html>
  <head>
    <title>Le liste annidate</title>
    <!-- file '/webmaster-tutorial/lezione-2/4-liste-annidate.html' -->
    <meta charset="utf-8"/>
  </head>
  <body>
    <h2>Le mie bevande preferite e quando le bevo</h2>
    <ol><!-- lista principale -->
      <li> <!-- primo elemento della lista principale -->
        <b>Caffé</b>
        <ul> <!-- tag di apertura della prima sotto-lista -->
          <li>per iniziare la giornata;</li>
          <li>per ripartire dopo pranzo;</li>
          <li>per verificare il <i>charset</i> ;-)</li>
        </ul> <!-- fine della prima sotto-lista -->
      </li> <!-- fine del primo elemento della lista principale -->
      <li> <!-- secondo elemento della lista principale -->
        <b>Birra</b>
        <ul> <!-- tag di apertura della seconda sotto-lista -->
          <li>per accompagnare una pizza;</li> <!-- e così via! -->
          <li>per far 4 chiacchiere in amicizia;</li>
          <li>per festeggiare l'Oktoberfest come merita.</li>
        </ul>
      </li>
      <li>
        <b>Il Milanese Imbruttito</b>
        <ul>
          <li>per ricordarmi chi sono...</li>
          <li>...e dimenticare il resto della giornata.</li>
        </ul>
      </li>
      <li>
        <b>Acqua frizzante con limone</b>
        <ul>
          <li>per dissetarmi davvero;</li>
          <li>
            per accompagnare una buona insalata verde: la vitamina C <br/>
            aumenta l'assorbimento del ferro vegetale.
          </li>
        </ul>
      </li>
      <li>
        <b>Benzina</b>
        <ul>
          <li>
            Negli Autogrill, per prendere in giro il commesso che cerca di<br/>
            rifilarmi una bottiglietta da mezzo litro d'acqua a 2 euro...
          </li>
        </ul>
      </li>
    </ol> <!-- fine della lista principale -->
  </body>
</html>


Ti consiglio vivamente di copiare il codice qui sopra, incollarlo in un nuovo file “4-liste-annidate.html” e aprirlo in anteprima per verificarne il funzionamento.

P.S.: Se te lo stai chiedendo, il tag HTML per sottolineare del testo (come quello appena scritto) è il tag u, da "underlined" (sottolineato), sentiti libero di provare a utilizzarlo!

Le liste possono anche essere annidate in 3 e più livelli, ovvero possono esistere sottoliste di sottoliste e così via. Provare a realizzare una lista di 3 o più livelli te lo lascio come esercizio consigliato.

Con tutto questo parlare di bevande mi è  venuta voglia di bere qualcosa. Penso sia il momento ideale per una pausa caffé. Poi però torna qui che stiamo andando alla grande e manca solo un argomento per terminare questa lezione: la validazione.

La Validazione

Come ti ho spiegato, l’HTML ha una sintassi precisa che occorre rispettare al fine di scrivere pagine HTML corrette. La sintassi include, a titolo esemplificativo:

  • La struttura della pagina HTML comprensiva di:
    • dichiarazione doctype nella prima riga,
    • tag html che, a loro volta contengono le sezioni head e body,
    • il title della pagina nella sezione head,
    • la dichiarazione del charset utilizzato, sempre nella sezione head;
  • La sintassi dei singoli tag html, coi tag di chiusura ove necessari;
  • Gli attributi dei tag, come nel caso dell’attributo href per il tag a (il link);
  • etc...

Probabilmente ti sarai già accorto del fatto che, se commetti un errore, non è facile accorgertene aprendo il tuo file HTML col Browser o in preview.

Questo perché lo scopo del Browser non è quello di aiutarti a scrivere codice HTML corretto ma bensì aiutarti a fruire dei contenuti di qualsiasi pagina HTML tu possa visitare nel World Wide Web, nonostante gli eventuali errori in essa contenuti.

Facciamo un rapido esperimento: proviamo a inserire volontariamente un errore in un file altrimenti corretto e vediamo cosa succede quando lo apriamo con il browser.

  • Per prima cosa crea un nuovo file per la lezione-2 e chiamalo “5-validazione-w3c.html”.
  • All’interno del file copia-incolla questo codice:
<!DOCTYPE html>
<html>
  <head>
    <title>La Validazione W3C</title>
    <meta charset="utf-8"/>
  </head>
  <body>
    <!-- 
      Il servizio di Validazione HTML del W3C è disponibile gratuitamente 
      all'indirizzo https://validator.w3.org/
    -->
    <ol>
      <li>
        Primo elemento della lista principale
        <ul>
          <li>primo elemento della prima sotto-lista</li>
          <li>secondo elemento della prima sotto-lista</li>
          <li>terzo elemento della prima sotto-lista</li>
        </ul>
      </li>
      <li>
        Secondo elemento della lista principale
        <ul>
          <li>primo elemento della seconda sotto-lista</li>
          <li>secondo elemento della seconda sotto-lista</li>
          <li>terzo elemento della seconda sotto-lista</li>
        </ul>
      </li>
    </ol> <!-- commetti un errore volontario sostituendo questo tag con </ul> -->
    <!-- quindi prova a validare il file HTML col W3C Validator: https://validator.w3.org/ -->
  </body>
</html>

Ottenendo questa situazione nel tuo editor Atom:

Prova ad aprire in anteprima il file appena creato ed ecco cosa dovresti vedere:

Infatti il file rappresenta semplicemente una lista con due livelli: una lista principale numerata e due sotto-liste non numerate, in modo del tutto simile all’esempio precedente.

Ora proviamo a introdurre volutamente un errore, per esempio sostituendo il corretto tag di chiusura della lista principale ordinata nella riga 29 (</ol>) con un erroneo tag di chiusura per una lista non ordinata (</ul>):

Salva il file, visualizza in anteprima e…

Molto probabilmente, nulla è cambiato!

Come volevasi dimostrare: nonostante il file HTML contenga un errore, il Browser non lo rileva e cerca di fare del suo meglio per visualizzare comunque la pagina correttamente. Questo perché, come ti ho anticipato, lo scopo del Browser non è quello di rilevare gli errori, ma bensì quello di permettere al suo utilizzatore di visualizzare al meglio qualsiasi pagina web richiesta, a prescindere dai piccoli errori che può aver commesso chi ha scritto quella pagina.

“Ma allora posso fare tutti gli errori che voglio?”

E’ lecito porsi questa domanda: perché impegnarsi a scrivere codice HTML corretto se tanto il browser è in grado di porre rimedio ai piccoli errori da solo?

Le risposte sono molteplici. A titolo non esaustivo è importante scrivere codice HTML corretto perchè:

  1. Un piccolo errore potrebbe non essere rilevato dal tuo browser, ma da un altro browser invece sì, compromettendo l’aspetto della pagina.
  2. Le pagine web le legge anche Google, ed esso considera la correttezza tra i fattori importanti per il posizionamento nei risultati di ricerca.
  3. Il codice corretto e ben indentato è più facile da modificare: quando avrai l’esigenza di apportare una modifica a un tuo file HTML ringrazierai te stesso per averlo scritto a regola d’arte.

Senza contare l’etica professionale: sia che tu venga pagato per scrivere del codice HTML o che tu lo stia facendo per te stesso… perché non farlo a regola d’arte?

Si pone dunque il problema di individuare uno strumento in grado di segnalare gli eventuali errori in una pagina HTML per permetterti di correggerli. 
Tale strumento si chiama “Validator HTML”.Ne esistono di diversi, tuttavia, il validator più importante è quello realizzato e reso disponibile gratuitamente dal Consorzio W3C, lo stesso che si occupa di definire lo Standard HTML ufficiale (l’insieme di regole che una pagina HTML deve rispettare per poter essere dichiarata valida).

Il "W3C Validator" è disponibile all’indirizzo https://validator.w3.org/  oppure cercando “w3c validator” su Google, ovviamente.

La pagina si presenta così:


Nota che, per validare un file HTML, hai tre possibilità:

  1. Validate URI: inserire un Uniform Resource Identifier (nel nostro caso l’URL della pagina HTML: gli URL o “Uniform Resource Locator” sono un sottoinsieme degli URI);
  2. Validate by File Upload: caricare il file HTML sul sito del validator;
  3. Validate by Direct Input: scrivere direttamente (o copiare-incollare) del codice HTML per scoprire se esso è corretto.

Ti consiglio di utilizzare la prima o la terza opzione.
La prima è l’ideale quando il file che si vuole validare è già disponibile online, la terza per effettuare dei rapidi controlli in itinere.

Nel nostro caso procediamo con la terza (Direct Imput) copiando il codice del file che contiene l’errore.


Il riusultato dovrebbe essere simile al seguente:

 

 

I tre errori rilevati dal W3C Validator in realtà dipendono tutti dall’unico errore commesso, volutamente, nella riga 29 e rilevati, nel mio caso, dall’errore n.1: “Stray end tag ul” (tag di chiusura ul vacante).
A questo punto puoi correggere l’errore, salvare il file e cliccare nuovamente sul pulsante Check per verificare che il file non contiene più nessun errore:

 

Congratulazioni: il tuo file è ufficialmente corretto! :-)

Prima di passare al prossimo Tutorial, assicurati di aver scritto sempre codice HTML corretto validando tutti i file creati in questa lezione.

Concetti Fondamentali

Nel corso di questo tutorial hai imparato:

  • come definire titoli e sottotitoli coi tag da h1 a h6
  • come deifinire liste e sottoliste, puntate e numerate, coi tag ol e ul
  • come definire gli elementi delle liste, col tag li
  • la sintassi dei commenti HTML “<!-- commento -->”
  • l’utilizzo del W3C Validator per controllare la correttezza del tuo codice HTML

Inoltre hai fatto la conoscenza del Consorzio W3C, il “Wold Wide Web Consortium”, l’Organizzazione non governativa internazionale che si occupa di definire gli Standard del Web, fra cui l’HTML.

Nel prossimo tutorial imparerai l’utilizzo degli ultimi tag fondamentali che ti consentiranno di inserire immagini e tabelle nelle tue pagine. Inoltre imparerai a collegare tra loro le pagine da te realizzate per creare il tuo primo sito web vero e proprio. A proposito, comincia a selezionare una decina fra le tue foto preferite perché stai per realizzare un album fotografico in HTML.

Quando sei pronto, procedi al prossimo Tutorial!

Che ne dici?

Scritto da

Duccio Armenise

Founder Corsidia & co-Founder WorldBridge

Aiuto solo i migliori Maestri a trovare i loro prossimi Studenti. Come? Così! :)

Per

Corsidia

I tuoi prossimi Studenti ti stanno già cercando, tu ci sei?