MDN wants to talk to developers like you: https://qsurvey.mozilla.com/s3/8d22564490d8

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?

HTML (HyperText Markup Language) non è un linguaggio di programmazione; è 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. HTML consiste in una serie di elementi elements usati per racchiudere o marcare parti di contenuto, per farle apparire in un certo modo.  I tags che racchiudono il contenuto, possono renderlo un collegamento a un altra pagina web, formattare in carattere italico e così via. Per esempio prendi 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 this case, p), racchiuso tra parentesi angolate (minore e maggiore - < >); indica dove comincia l'elemento, dove inizia ad avere 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>, 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 "Show solution" 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" tra in un elemento <strong>, che fa si che la parola sia fortemente enfatizzata.

<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 chiuso 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 ipotrebbe darti risultati inaspettati. Quindi facci attenzione.

Confronto tra elementi "blocco" e "in linea"

Ci sono due importanti categorie di elementi in HTML, delle quali bisogna essere consapevoli (ce n'é di più): block level elements (blocchi) e inline elements (in linea)

  • Gli elementi block level, i blocchi, 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 iperlink (<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 origina l'esempio sottostante di tre elementi sulla stessa linea senza spazi a dividerli.

<p> è invece un elemento blocco, che origina, nell'esempio sottostante, tre nuove linee 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: 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.

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: Empty elements are also sometimes called void elements.

Attributi

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

<p class="editor-note">My cat is very grumpy</p>

Gli attributi contengono informazioni extra, riguardanti l'elemento, che non appaiano nel contenuto visualizzato nella pagina. In questo caso, l'attributo di classe permette di dare all'elemento un nome che potrà essere usato per puntare all'elemento con regole di stile o altro.

Un attributo deve avere:

  1. uno spazio tra lui e il nome del tag o il precedente attributo
  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 iperlink. Questo elemento può avere diversi attributi, ma ne vediamo due:

  • href, questo attributo deve avere per valore l'indirizzo web a cui si vuole che il link punti. Ad esempio href="https://www.mozilla.org/" (chiudere con uno slash per evitare una doppia chiamata al server)
  • title:
    title, serve a dare una informazione sul link, come ad esempio il nome della pagina a cui si viene reindirizzati. Questo attributo viene visualizzato come tooltip nella pagina web.

Modifica la linea sottostante nel campo Input per farne un link al tuo sito preferito. Vedrai l'effetto dei cambiamenti nel campo Output.  Dovresti vedere un link che quando viene intercettato dal puntatore del mouse mostra il valore dell'attributo title e quando viene cliccato naviga alla pagina web definita dal valore dell'attributo href. Ricorda di lasciare uno spazio tra nome dell'elemento e attributi.

Se sei bloccato, puoi resettare.

Attributi booleani

A volte potrai trovare attributi senza il loro "valore". Questo è permesso per gli attributi booleani, che possono avere un unico valore uguale, generalmente, al nome dell'attributo. Un esempio è l'attributo disabled= che può essere dato 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).

<input type="text" disabled>

<input type="text">

L'output è il seguente.

Omettere le virgolette attorno al valore degli attributi

Quando navighi il world wild web, incontri i più strani stili di mark up, inclusi gli attributi senza virgolette: ciò è permesso in certe circostanze, ma corromperà il linguaggio in altre. 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, pensando che l'attributo siano 3 attributi: un attributo title con valore "The" e 2 attributi booleani (Mozilla e homepage). Non è ovviamente ciò che si intendeva e provocherà errori o comportamenti inaspettati, come nell'esempio live sottostante. Prova a passare col mouse 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 virglette 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 annidarvi l'altro tipo:

<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.

Tag del documento e collaboratori

 Hanno collaborato alla realizzazione di questa pagina: howilearn
 Ultima modifica di: howilearn,