Cominciare conl'HTML

In questo articolo trattiamo le basi dell'HTML, per farti cominciare. Definiamo gli elementi, gli attributi e tutti gli altri termini che puoi aver sentito e vediamo come si integrano nel linguaggio. Vediamo inoltre come sono strutturati un elemento HTML e una tipica pagina e spieghiamo altre importanti caratteristiche del linguaggio. Lungo il percorso, giocheremo con un po' di HTML per mantenere viva l'attenzione.

Prerequisiti: Alfabetizzazione sull'uso del computer, basic software installed, e conoscenze di base di working with files.
Obbiettivo: Acquisire familiarità col linguaggio HTML e fare un po' di pratica nella scrittura di elementi HTML.

Cos'é l'HTML?

L'HTML (HyperText Markup Language) non è un linguaggio di programmazione ma un linguaggio di markup, usato per dire al browser come strutturare le pagine web. Può essere complicato o semplice, a seconda di come lo sviluppatore desidera che sia. Un file HTML è composto da una serie di elementi usati per racchiudere o marcare parti di contenuto, così che venga mostrato in un certo modo.  I tag che racchiudono il contenuto, possono renderlo un collegamento a un altra pagina web, formattarlo in carattere italico e così via. Per esempio prendiamo la seguente linea di codice:

My cat is very grumpy

Se vogliamo che la linea sia isolata, possiamo specificare che è un paragrafo, racchiudendola con due tag  (<p>)

<p>My cat is very grumpy</p>

Anatomia di un elemento HTML

Esploriamo ulteriormente il nostro elemento.

Le parti sono:

  1. Il tag di apertura: consiste nel nome dell'elemento (in questo caso, p), racchiuso tra parentesi angolari (minore e maggiore - < >); indica sia il punto dove inizia l'elemento e quando ha effetto — nel caso in esame indica l'inizio del paragrafo.
  2. Il tag di chiusura: uguale al tag di apertura eccetto che per la presenza di uno slash prima del nome dell'elemento; indica dove finisce l'elemento. Dimenticarsi di mettere il tag di chiusura è un tipico errore e può portare a strani risultati.
  3. Il contenuto: Ciò che sta fra i due tag; in questo caso è solo testo.
  4. L'elemento: l'insieme del tag di apertura, tag di chiusura e contenuto è detto "elemento".

Active learning: creare il primo elemento HTML

Modifica la linea sottostante nel campo Input racchiudendola fra i tag <em> e </em> (inserisci il tag <em> all'inizio della riga per aprire l'elemento, e </em> al termine della riga per chiudere l'elemento), questo evidenzierà il contenuto con il carattere italico. Vedrai l'effetto dei cambiamenti nel campo Output.

Se fai un errore, puoi sempre usare il pulsante reset per ripristinare la situazione iniziale. Se sei bloccato, premi il pulsante Mostra soluzione per vedere la risposta.

Elementi annidati

Puoi inserire elementi dentro altri elementi: si dice annidare (nesting). Se vogliamo sottolineare che il nostro gatto è MOLTO scontroso (VERY grumpy) possiamo racchiudere la parola "very" in un elemento <strong>, per enfatizzarla fortemente.

<p>My cat is <strong>very</strong> grumpy.</p>

Dovete assicurarvi che gli elementi siano annidati in modo appropriato: nell'esempio viene aperto prima l'elemento p e poi l'elemento strong, dobbiamo perciò chiudere prima l'elemento strong e poi l'elemento p. L'esempio seguente è sbagliato:

<p>My cat is <strong>very grumpy.</p></strong>

Gli elementi devono essere aperti e chiusi correttamente perché sia chiaro se sono all'interno o all'esterno uno dell'altro. Se si mescolano, come nell'esempio qui sopra, il browser cercherà di indovinare quali erano le tue intenzioni e potrebbe darti risultati inaspettati. Quindi presta attenzione.

Confronto tra elementi "blocco" e "in linea"

Ci sono due importanti categorie di elementi in HTML. Questi sono gli elementi di tipo blocco (block level) e elementi in linea (inline).

  • Gli elementi di tipo block level, occupano un'area (blocco) sulla pagina — appariranno sempre su una nuova linea e qualunque contenuto successivo apparirà anch'esso su una nuova linea. I blocchi, tendenzialmente, sono elementi strutturali della pagina che rappresentano: ad esempio paragrafi, liste, menù di navigazione, piè di pagina, ecc. Un blocco non dovrebbe venir inserito all'interno di un elemento inline, ma può essere annidato in un altro blocco.
  • Gli elementi inline sono quelli contenuti all'interno degli elementi blocco e delimitano solo piccole parti di contenuto del documento: non interi paragrafi o raggruppamenti di contenuti. Un elemento inline non determina la comparsa di una nuova linea nel documento; normalmente appariranno all'interno di un paragrafo e sono elementi tipo un collegamento ad un'altra pagina o sezione di quella in cui ci si trova (<a>) o elementi di enfatizzazione come <em> o <strong>.

Prendete l'esempio seguente:

<em>first</em><em>second</em><em>third</em>

<p>fourth</p><p>fifth</p><p>sixth</p>

<em> è un elemento in linea, che viene mostrato nell'esempio sottostante, i tre elementi saranno mostrati sulla stessa linea senza nessuno spazio a separarli.

<p> è un elemento blocco, quindi ogni elemento dichiarato con questo tag, apparirà su una nuova linea con spazi sopra e sotto (la spaziatura è dovuta alla formattazione di default (CSS styling) che il browser applica ai paragrafi).

Nota: l'HTML5 ha ridefinito le categorie degli elementi: approfondisci in Categorie degli elementi di contenuto (en) queste nuove definizioni sono più accurate e meno ambigue di quelle definite precedentemente, ma più complicate da capire rispetto a "blocchi" e "in linea", perciò continueremo a usarle in questa spiegazione.

Nota: I termini "block" e "inline", come usati in questo argomento , non dovrebbero essere confusi con i tipi dei box CSS con lo stesso nome. Anche se correlati per default, cambiare la proprietà display nei CSS non cambia la categoria dell'elemento e non modifica quali elementi potrebberso essere contenuti e quali saranno contenuti. Uno dei motivi per cui HTLM5 a deprecato l'uso di questi termini, riguarda la possibilità che questi vengano confusi.

Nota: Nelle pagine di riferimento, troverai delle liste che includono gli elementi di Blocco e quelli In linea — controlla Elementi di tipo blocco  e Elementi in linea.

Elementi vuoti

Non tutti gli elementi seguono il modello: tag di apertura, contenuto, tag di chiusura. Alcuni elementi hanno un unico tag, che è abitualmente usato per includere qualcosa nel documento in quel punto. Per esempio l'elemento <img> inserisce un'immagine nella posizione in cui viene scritto.

<img src="https://raw.githubusercontent.com/mdn/beginner-html-site/gh-pages/images/firefox-icon.png">

Questo fa apparire ciò che segue:

Note: Gli elementi vuoti sono a volte chiamati elementi void.

Attributi

Gli elementi possono avere "attributi" che appaiono così:

&amp;amp;amp;lt;p class="editor-note">My cat is very grumpy&amp;amp;amp;lt;/p>

Gli attributi contengono informazioni extra, riguardanti l'elemento, che non appaiano nel contenuto visualizzato nella pagina. In questo caso, l'attributo class permette di assegnare uno o più nomi che potrà/anno poi  essere usato/i per puntare alle regole di stile per quell elemento o altro.

Un attributo deve avere:

  1. uno spazio tra lui e il nome dell'elemento (o il precedente attributo, se l'elemento ha già uno o più attributi.)
  2. il nome dell'attributo seguito dal segno di uguale
  3. un valore racchiuso tra virgolette

Active learning: aggiunta di attributi ad un elemento

Un altro esempio di elemento é <a> — che sta per "anchor" e rende il contenuto dell'elemento un collegamento ipertestuale (hyperlink). Questo elemento può avere diversi attributi, come vediamo qui sotto:

  • href: Il valore di questo attributo è l'indirizzo web a cui si vuole che il link punti, ed a cui verra indirizzato il browser quando verrà cliccato. Ad esempio href="https://www.mozilla.org/".
  • title: Questo attributo, fornirà informazioni aggiuntive sul link, come ad esempio il nome della pagina a cui si verrà indirizzati. Ad esempio, title="The Mozilla homepage". Questo attributo verrà mostrato come tooltip quando ci si posizionerà con il mouse sopra il link.
  • target: L'attributo target indica il modo in cui si aprirà il link. Ad esempio, target="_blank" mostrerà il link in un nuovo tab / finestra. Se si vuol aprire il link nel/la tab/finestra corrente, basterà ometterlo.

Modifica la linea sottostante nel campo Input per farne un link al tuo sito preferito. Per prima cosa, aggiungi l'elemento <a>. Poi specifica gli attributi href e title. Ed infine, specifica l'attributo target affinche il collegamento si aprà in un nuovo/a tab/finestra.Vedrai l'effetto dei cambiamenti nel campo Output mentre digiti.  Dovresti vedere un link che mostrerà il valore dell'attributo title quando il puntatore del mouse verrà posizionato sopra e aprirà la pagina definita dal valore dell'attributo href. Ricorda di lasciare uno spazio tra nome dell'elemento e attributi.

Se hai commesso un errore, puoi sempre tornare allo stato iniziale con il pulsante Reset. Se non riesci proprio a trovare la soluzione, premi il pulsante Mostra soluzione e vedrai la risposta.

Attributi booleani

A volte potrai trovare degli attributi senza alcun valore — questo è consentito. Questo tipo di attributi, sono chiamati attributi booleani, e possono avere un unico valore, che solitamente è  uguale al nome dell'attributo stesso. Ad esempio, analizziamo l'attributo disabled che può essere assegnato agli elementi input dei moduli (form) per disabilitarli (renderli grigi) e fare in modo che non possa essere introdotto alcun dato.

<input type="text" disabled="disabled">

Per brevità, è permesso scriverli come nell'esempio qui sotto (abbiamo incluso anche un campo non disabilitato per confronto, per darti un assaggio di cosa verrà).

<input type="text" disabled>

<input type="text">

Entrambi ti mostreranno il seguente output:

Omettere le virgolette attorno al valore degli attributi

Quando navighi il world wild web, potrai trovare i più strani stili di mark up, inclusi i valori degli attributi senza virgolette: ciò è permesso in alcune circostanze, ma negli altri casi creerà problemi al tuo markup. Per esempio, se riprendiamo il precedente esempio del link, possiamo scriverne una versione base con solo l'attributo href, come qui:

<a href=https://www.mozilla.org/>favourite website</a>

Tuttavia, appena aggiungeremo l'attributo title, le cose smetteranno di funzionare

<a href=https://www.mozilla.org/ title=The Mozilla homepage>favourite website</a>

A questo punto il browser, fraintenderà il tuo markup, interpretando l'attributo title come tre attributi distinti — un attributo title con valore "The" e due attributi booleani Mozilla e homepage. Non è ovviamente ciò che si intendeva e provocherà errori o comportamenti inaspettati, come nell'esempio live sottostante. Prova a posizionare il mouse sopra il link per vedere qual é il title.

Il nostro consiglio è di mettere sempre le virgolette — Si evitano questi problemi e si ottiene anche un codice più leggibile.

Virgolette singole o doppie?

In questo articolo noterai che sono state usate le doppie virgolette. Potrai tuttavia trovare le virgolette singole in qualche documento HTML. Si tratta esclusivamente di una questione di stile e sei libero di scegliere quelle che preferisci. Le due linee seguenti sono equivalenti.

<a href="http://www.example.com">A link to my example.</a>

<a href='http://www.example.com'>A link to my example.</a>

Devi però assicurarti di non mescolarle. L'esempio seguente non funzionerà.

<a href="http://www.example.com'>A link to my example.</a>

Se hai usato un tipo di virgolette nel tuo HTML, puoi usare l'altro tipo nel valore dell'attributo senza nessun problema:

<a href="http://www.example.com" title="Isn't this fun?">A link to my example.</a>

Se vuoi annidare lo stesso tipo di virgolette, dovrai usare Entity references: including special characters in HTML.

Anatomia di un documento HTML

That wraps up the basics of individual HTML elements, but they aren't very useful on their own. Adesso vedremo come gli elementi sono combinati per formare una intera pagina HTML.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>My test page</title>
  </head>
  <body>
    <p>This is my page</p>
  </body>
</html>

Qui abbiamo:

  1. <!DOCTYPE html>: La doctype. Nella notte dei tempi, quando l'HTML era appena nato (about 1991/2), doctypeserano utilizzate per collegare set of rules che la pagina HTML doveva rispettare per essere considerata un buon documento HTML, il che significava determinare automaticamente gli errori e altre cose utili. In genere erano qualcosa tipo questo:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    Tuttavia oggi, a nessuno interessa di loro e sono solo un residuo storico che deve essere incluso per far si che tutto  funzioni. <!DOCTYPE html> è la più corta stringa di caratteri che rappresenta una doctype valida; è tutto ciò che serve sapere.
  2. <html></html>: The <html> element. Questo elemento racchiude tutta la pagina e vi si può riferire come "root", elemento radice.
  3. <head></head>: The <head> element. Questo elemento serve da contenitore per tutta una serie di cose da includere nel documento HTML che non sono "contenuto" da far visualizzare ai visitatori della tua pagina. Sono incluse cose come le parole chiave e la descrizione della pagina, che vuoi appaia nei risultati dei motori di ricerca, dichiarazioni CSS per formattare il contenuto, dichiarazioni dei set di caratteri e altro. Imparerai di più riguardo a questo nel prossimo articolo della serie.
  4. <meta charset="utf-8">: Questo elemento imposta il set di caratteri che il tuo documento dovrebbe usare a utf-8, che include la maggior parte dei caratteri di tutti gli alfabeti umani conosciuti. Sostanzialmente può trattare qualsiasi tipo di testo tu voglia introdurre. non c'è ragione per non usare questo set di caratteri e può evitare problemi in seguito.
  5. <title></title>: Questo imposta il titolo della tua pagina, cioè il titolo che appare nella scheda del browser quando la pagina viene caricata e che viene usato per descrivere la pagina quando la salvi tra i preferiti (bookmark).
  6. <body></body>: The <body> element. Questo elemento contiene tutto ciò che vuoi mostrare agli utenti del web che visitano la pagina, sia che si tratti di testo, sia di immagini o video, giochi, tracce audio o qualsiasi altra cosa.

Active learning: Aggiungere alcune caratteristiche ad un documento HTML

If you want to experiment with writing some HTML on your local computer, you can: Se vuoi esercitarti a scrivere un po' di HTML sul tuo computer, puoi:

  1. Copiare il codice HTML della pagina di eempio qui sopra
  2. creare un nuovo file nel tuo editor di testo
  3. incollare il codice nel tuo nuovo file
  4. salvare il file col nome index.html

Note: Trovi questo modello di base anche nel MDN Learning Area Github repo.

Adesso puoi aprire il file nel tuo browser e vedere come appare il codice, poi puoi modificare il codice e ricaricare la pagina per vedere i risultati. Inizialmente dovrebbe apparire più o meno così:

A simple HTML page that says This is my pageCosì, in questo esercizio, puoi modificare il codice localmente sul tuo computer come mostrato sopra, o puoi modificare l'esempio sotto (l'esempio modificabile rappresenta solo l'elemento <body>). Ci piacerebbe che tentassi di realizzare questi passi:

  • appena sotto l'apertura dell'elemento <body>, aggiungi un titolo principale per il documento; dovrebbe essere racchiuso tra il tag <h1> e il corrispondente tag di chiusura </h1>.
  • Modifica il paragrafo del contenuto per aggiungere del testo che parla di qualcosa a cui sei interessato.
  • Metti in risalto tutte le parole importanti racchiudendole tra i tag <strong> e </strong> per chiudere l'elemento.
  • Aggiungi un link nel paragrafo, come spiegato precedentemente.
  • Aggiungi un'immagine al tuo documento, sotto il paragrafo, come spiegato precedentemente nell'articolo. Avrai dei punti bonus se riesci a lincare un'immagine diversa (una nel tuo computer o una altrove nel web).

If you make a mistake, you can always reset it using the Reset button. If you get really stuck, press the Show solution button to see the answer.

Spazio bianco nell'HTML

Nei precedenti esempi potresti aver notato che molto spazio bianco (vuoto) è incluso nel listato del codice - ciò non è affatto necessario; i due seguenti estratti sono equivalenti:

<p>Dogs are silly.</p>

<p>Dogs        are
         silly.</p>

Non importa quanti spazi usi (includendo sia il carattere spaziatura che le interruzioni di linea), il decodificatore (parser) HTML li riduce tutti ad un unico spazio quando restituisce la pagina. Quindi perché usare così tanti spazi? La risposta é per ottenere leggibilità; è molto più semplice capire cosa fa il tuo codice se lo hai formattato ordinatamente e non solo raggruppato insieme in un grande caos. Nel nostro HTML abbiamo fatto rientrare di due spazi, rispetto all'elemento contenitore, tutti gli elementi annidati. Dipende da te quale stile di formattazione usare (per esempio quanti spazi utilizzare per ogni livello di indentazione), ma devi usare qualche tipo di formattazione.

Elenco di riferimento delle entità: includere caratteri speciali nell'HTML

In HTML, i caratteri <, >,",' e & sono caratteri speciali. Sono anche parti della sintassi dell'HTML, quindi si pone il problema di come poterli includere nel proprio testo, per indicare ad esempio un "minore di", senza che venga interpretato dal parser come codice, cosa che alcuni browser potrebbero fare.

Dobbiamo usare speciali codici che rappresentano quei caratteri e che possono quindi essere usati in quelle circostanze. Ognuno di questi codici (character reference) inizia con un ampersand (&) e finisce con un punto e virgola (;).

Literal character Character reference equivalent
< &lt;
> &gt;
" &quot;
' &apos;
& &amp;

Nell'esempio sotto, puoi vedere 2 paragrafi che parlano di tecnologie web:

<p>In HTML, you define a paragraph using the <p> element.</p>

<p>In HTML, you define a paragraph using the &lt;p&gt; element.</p>

Nel campo di output istantaneo sotto, puoi vedere che il primo paragrafo è sbagliato, perché il browser pensa che il secondo tag p (<p>) sia l'inizio di un nuovo paragrafo. Il secondo paragrafo funziona perché abbiamo sostituito le parentesi angolate con le entità (character references).

Note: Una tabella di riferimento di tutte le entità disponibili nel linguaggio HTML si trova su Wikipedia: List of XML and HTML character entity references.

Commenti HTML

In HTML, come in molti linguaggi di programmazione, c'è la possibilità di aggiungere dei "commenti" al codice, che sono ignorati dal browser e sono pertanto invisibili per gli utenti; il loro scopo è di includere nel documento spiegazioni sul funzionamento del codice, su cosa fanno le differenti parti di codice, ecc. Tutto ciò può essere molto utile se ritorni sul codice sei mesi dopo che ci avevi lavorato e non puoi ricordare cosa avevi fatto, o se passi a qualcun'altro il tuo codice perché ci lavori.

Per far si che una parte del contenuto del documento HTML sia un commento, devi includerlo tra speciali segni, che sono  <!-- and -->. Avrai per esempio:

<p>I'm not inside a comment</p>

<!-- <p>I am!</p> -->

Come puoi vedere qui sotto, il primo paragrafo appare nell'output , mentre il secondo no.

Hai raggiunto la fine dell'articolo; spero tu abbia gradito questo tour fra le più elementari regole dell'HTML. A questo punto dovresti capire come appare il linguaggio, come funziona ad un livello base e dovresti essere in grado di scrivere alcuni elementi ed attributi. Questo è il punto perfetto a cui essere adesso, perché nei seguenti articoli della serie rivedremo nei dettagli alcune delle cose già viste e introdurremo alcune nuove caratteristiche del linguaggio. Stay tuned! (Resta sintonizzato!)

Note: A questo punto, poiché inizi a saperne di più di  HTML, potresti anche voler iniziare ad esplorare i Cascading Style Sheets, o CSS, che é il linguaggio usato per dare stile e abbellire le pagine web (per esempio cambiare il colore dei font o alterare il layout della pagina). HTML e CSS sono fatti per operare insieme, come presto scoprirai.