032.1 Lezione 1

Certificazione:

Web Development Essentials

Versione:

1.0

Argomento:

032 Marcatura di un Documento HTML

Obiettivo:

032.1 Anatomia di un Documento HTML

Lezione:

1 di 1

Introduzione

HTML (HyperText Markup Language) è un linguaggio di marcatura (markup) che indica ai browser web come strutturare e visualizzare le pagine web. La versione corrente è la 5.0, che è stata rilasciata nel 2012. La sintassi HTML è definita dal World Wide Web Consortium (W3C).

L’HTML è un’abilità fondamentale nello sviluppo web, poiché definisce la struttura e buona parte dell’aspetto di un sito web. Se vuoi una carriera nello sviluppo web, l’HTML è sicuramente un buon punto di partenza.

Anatomia di un Documento HTML

Una pagina HTML di base ha la seguente struttura:

<!DOCTYPE html>
<html>
  <head>
    <title>My HTML Page</title>
    <!-- This is the Document Header -->
  </head>

  <body>
    <!-- This is the Document Body -->
  </body>
</html>

Ora, analizziamola in dettaglio.

Tag HTML

L’HTML usa elementi e tag per descrivere e formattare il contenuto. I tag consistono in parentesi angolari intorno al nome di un tag, per esempio <title>. Il nome del tag non è sensibile alle maiuscole, sebbene il World Wide Web Consortium (W3C) raccomandi di usare lettere minuscole nelle versioni correnti dell’HTML. Questi tag HTML sono usati per costruire elementi. Il tag <title> è un esempio per un tag di apertura di un elemento HTML che definisce il titolo di un documento. Tuttavia, un elemento ha due ulteriori componenti. Un elemento completo <title> che assomiglia a questo:

<title>My HTML Page</title>

Nel caso precedente, My HTML Page serve come elemento contenuto, mentre </title> serve come tag di chiusura che dichiara che questo elemento è completo.

Note	Non tutti gli elementi HTML hanno bisogno di essere chiusi; in questi casi, si parla di elementi vuoti, elementi auto-chiudenti, o elementi nulli.

Ecco gli altri elementi HTML dell’esempio precedente:

<html>: Racchiude l’intero documento HTML. Contiene tutti i tag che compongono la pagina. Indica anche che il contenuto di questo file è in linguaggio HTML. Il suo tag di chiusura corrispondente è </html>.
<head>: Un contenitore per tutte le informazioni meta riguardanti la pagina. Il tag di chiusura corrispondente di questo elemento è </head>.
<body>: Un contenitore per il contenuto della pagina e la sua rappresentazione strutturale. Il suo tag di chiusura corrispondente è </body>.

I tag <html>, <head>, <body> e <tittle> sono i cosiddetti tag scheletro, che forniscono la struttura di base di un documento HTML. In particolare, dicono al browser web che sta leggendo una pagina HTML.

Note	Di questi elementi, l’unico che è richiesto per la validazione di un documento HTML è il tag `<title>`.

Come puoi vedere, ogni pagina HTML è un documento ben strutturato e potrebbe anche essere definito come un albero, dove l’elemento <html> rappresenta la radice del documento e gli elementi <head> e <body> sono i primi rami. L’esempio mostra che è possibile annidare elementi: Per esempio, l’elemento <title> è annidato dentro l’elemento <head>, che a sua volta è annidato dentro l’elemento <html>.

Per essere sicuri che il codice HTML sia leggibile e mantenibile, assicurati che tutti gli elementi HTML siano chiusi correttamente e in ordine. I browser possono ancora visualizzare il tuo sito web come previsto, ma l’annidamento non corretto degli elementi e dei loro tag è una pratica soggetta a errori.

Infine, una menzione speciale va alla dichiarazione doctype all’inizio della struttura del documento di esempio. <!DOCTYPE> non è un tag HTML, ma un’istruzione per il browser web che specifica la versione HTML usata nel documento. Nella struttura base del documento HTML mostrato prima, è stato usato <!DOCTYPE html>, specificando che HTML5 è usato in questo documento.

Commenti nell’HTML

Quando si crea una pagina HTML, è buona pratica inserire dei commenti nel codice per migliorarne la leggibilità e descrivere lo scopo dei blocchi di codice più grandi. Un commento viene inserito tra i tag , come mostrato nel seguente esempio:

<!-- This is a comment. -->

<!--
    This is a
    multiline
    comment.
-->

L’esempio dimostra che i commenti HTML possono essere inseriti in una singola riga, ma possono anche estendersi su più righe. In ogni caso, il risultato è che il testo tra  viene ignorato dal browser web e quindi non viene visualizzato nella pagina HTML. Sulla base di queste considerazioni, puoi dedurre che la pagina HTML di base mostrata nella sezione precedente non mostra alcun testo, perché le linee  e  sono solo due commenti.

Warning

I commenti non possono essere annidati.

Attributi HTML

I tag HTML possono includere uno o più attributi per specificare i dettagli dell’elemento HTML. Un semplice tag con due attributi ha la seguente forma:

<tag attribute-a="value-a" attribute-b="value-b">

Gli attributi devono sempre essere impostati sul tag di apertura.

Un attributo consiste in un nome, che indica la proprietà che dovrebbe essere impostata, un segno di uguale e il valore desiderato tra virgolette. Sia le virgolette singole sia quelle doppie sono accettabili, ma si raccomanda di usare le virgolette singole o doppie in modo coerente in tutto il progetto. È importante non mischiare apici singoli e doppi per un singolo valore di attributo, poiché il browser web non riconoscerà gli apici misti come un’unità.

Note

Puoi includere un tipo di virgolette all’interno dell’altro tipo senza problemi. Per esempio, se hai bisogno di usare ' in un valore di attributo, puoi includere quel valore dentro ". Tuttavia, se vuoi usare lo stesso tipo di virgolette all’interno del valore che stai usando per includere il valore, devi usare " per " e ' per '.

Gli attributi possono essere categorizzati in attributi fondamentali e attributi specifici come spiegato nelle sezioni seguenti.

Attributi Fondamentali

Gli attributi fondamentali sono quelli che possono essere usati su qualsiasi elemento HTML. Essi includono:

title: Descrive il contenuto dell’elemento. Il suo valore è spesso visualizzato come un tooltip che viene mostrato quando l’utente sposta il suo cursore sull’elemento.
id: Associa un identificatore unico a un elemento. Questo identificatore deve essere unico all’interno del documento, e il documento non verrà validato quando più elementi condividono lo stesso id.
style: Assegna proprietà grafiche (stili CSS) all’elemento.
class: Specifica una o più classi per l’elemento in una lista separata da spazi di nomi di classi. Queste classi possono essere referenziate nei fogli di stile CSS.
lang: Specifica la lingua del contenuto dell’elemento usando i codici di lingua a due caratteri dello standard ISO-639.

Note

Lo sviluppatore può memorizzare informazioni personalizzate su un elemento definendo un cosiddetto attributo data-, che viene indicato facendo precedere il nome desiderato da data- come in data-additionalinfo. È possibile assegnare a questo attributo un valore proprio come qualsiasi altro attributo.

Attributi Specifici

Altri attributi sono specifici per ogni elemento HTML. Per esempio, l’attributo src di un elemento HTML <img> specifica l’URL di un’immagine. Ci sono molti altri attributi specifici, che saranno trattati nelle prossime lezioni.

Intestazione del Documento

L’intestazione del documento definisce le meta informazioni riguardanti la pagina ed è descritta dall’elemento <head>. Per impostazione predefinita, le informazioni all’interno dell’intestazione del documento non vengono visualizzate dal browser web. Mentre è possibile usare l’elemento <head> per contenere elementi HTML che potrebbero essere visualizzati nella pagina, farlo non è raccomandato.

Il Titolo

Il titolo del documento è specificato usando l’elemento <title>. Il titolo definito tra i tag appare nella barra del titolo del web bowser ed è il nome suggerito per il segnalibro. Viene anche visualizzato nei risultati dei motori di ricerca come titolo della pagina.

Un esempio di questo elemento è il seguente:

<title>My test page</title>

Il tag <title> è richiesto in tutti i documenti HTML e dovrebbe apparire solo una volta in ogni documento.

Note	Non confondete il titolo del documento con l’intestazione della pagina, che si trova nel corpo.

Metadati

L’elemento <meta> è usato per specificare meta informazioni per descrivere ulteriormente il contenuto di un documento HTML. È un cosiddetto elemento auto-chiudente, il che significa che non ha un tag di chiusura. A parte gli attributi fondamentali che sono validi per ogni elemento HTML, l’elemento <meta> usa anche i seguenti attributi:

name: Definisce quali metadati saranno descritti in questo elemento. Può essere impostato su qualsiasi valore definito dall’utente, ma i valori comunemente usati sono author, description e keywords.
http-equiv: Fornisce un’intestazione HTTP per il valore dell’attributo content. Un valore comune è refresh, che sarà spiegato più avanti. Se questo attributo è impostato, l’attributo name non dovrebbe esserlo.
content: Fornisce il valore associato all’attributo name o http-equiv.
charset: Specifica la codifica dei caratteri per il documento HTML, per esempio utf-8 per impostarlo su Unicode Transformation Format — 8-bit.

Aggiungere un Autore, una Descrizione e Parole Chiave

Usando il tag <meta>, puoi specificare informazioni aggiuntive sull’autore della pagina HTML e descrivere il contenuto della pagina in questo modo:

<meta name="author" content="Name Surname">
<meta name="description" content="A short summary of the page content.">

Cerca di includere nella descrizione una serie di parole chiave legate al contenuto della pagina. Questa descrizione è spesso la prima cosa che un utente vede quando naviga utilizzando un motore di ricerca.

Se vuoi quindi fornire ulteriori parole chiave ai motori di ricerca relative alla pagina web, potete aggiungere questo elemento:

<meta name="keywords" content="keyword1, keyword2, keyword3, keyword4, keyword5">

Note

In passato, gli spammer inserivano centinaia di parole chiave e descrizioni estranee al contenuto effettivo della pagina, in modo che questa apparisse anche nelle ricerche non correlate ai termini ricercati dalle persone. Oggi i tag <meta> sono relegati in una posizione di secondaria importanza e vengono utilizzati solo per consolidare gli argomenti trattati nella pagina web, in modo che non sia più possibile ingannare i nuovi e più sofisticati algoritmi dei motori di ricerca.

Reindirizzare una Pagina HTML e Definire un Intervallo di Tempo in cui il Documento si Aggiornerà da Solo

Usando il tag <meta>, puoi aggiornare automaticamente una pagina HTML dopo un certo periodo (per esempio dopo 30 secondi) in questo modo:

<meta http-equiv="refresh" content="30">

In alternativa, puoi reindirizzare una pagina web a un’altra pagina dopo lo stesso tempo con il seguente codice:

<meta http-equiv="refresh" content="30; url=http://www.lpi.org">

Nel precedente esempio, l’utente viene reindirizzato dalla pagina corrente a http://www.lpi.org dopo 30 secondi. I valori possono essere variati a piacere. Per esempio, se si specifica content="0; url=http://www.lpi.org", la pagina viene reindirizzata immediatamente.

Specificare la Codifica dei Caratteri

L’attributo charset specifica la codifica dei caratteri per il documento HTML. Un esempio comune è:

<meta charset="utf-8">

Questo elemento specifica che la codifica dei caratteri del documento è utf-8, che è un set di caratteri universale che include praticamente qualsiasi carattere di qualsiasi lingua umana. Pertanto, usandolo, si eviteranno problemi nella visualizzazione di alcuni caratteri che si possono avere usando altri set di caratteri come ISO-8859-1 (l’alfabeto latino).

Altri Esempi Utili

Altre due utili applicazioni del tag <meta> sono:

Impostare i cookie per tenere traccia del visitatore di un sito.
Prendere il controllo del viewport (l’area visibile di una pagina web all’interno della finestra di un browser web), che dipende dalle dimensioni dello schermo del dispositivo dell’utente (per esempio, un telefono cellulare o un computer).

Tuttavia, questi due esempi sono al di là dello scopo dell’esame e il loro studio è lasciato al lettore curioso di esplorare ulteriori funzionalità.

Esercizi Guidati

Per ognuno dei seguenti tag, indica il tag di chiusura corrispondente:

<body>

<head>

<html>

<meta>

<title>
Qual è la differenza tra un tag e un elemento? Usa questa voce come riferimento:

<title>HTML Page Title</title>
Quali sono i tag tra cui inserire un commento?
Spiega cos’è un attributo e fornisci alcuni esempi per il tag <meta>.

Esercizi Esplorativi

Crea un semplice documento HTML versione 5 con il titolo My first HTML document e un solo paragrafo nel corpo, contenente il testo Hello World. Usa il tag paragrafo <p> nel corpo.
Aggiungi l’autore (Kevin Author) e la descrizione (This is my first HTML page.) del documento HTML.
Aggiungi le seguenti parole chiave relative al documento HTML: HTML, Example, Test, e Metadata.
Aggiungi l’elemento <meta charset="ISO-8859-1"> all’intestazione del documento e cambia il testo Hello World con quello in giapponese (こんにちは世界). Che cosa succede? Come puoi risolvere il problema?
Dopo aver cambiato il testo del paragrafo in Hello World, reindirizza la pagina HTML a https://www.google.com dopo 30 secondi e aggiungi un commento che spieghi questo nell’intestazione del documento.

Sommario

In questa lezione hai imparato:

Il ruolo dell’HTML
Lo struttura dell’HTML
La sintassi dell’HTML (tag, attributi, commenti)
L’intestazione dell’HTML
I meta tag
Come creare un semplice documento HTML

I seguenti termini sono stati discussi in questa lezione:

<!DOCTYPE html>: Il tag di dichiarazione.
<html>: Il contenitore di tutti i tag che compongono la pagina HTML.
<head>: Il contenitore di tutti gli elementi di intestazione.
<body>: Il contenitore di tutti gli elementi del corpo.
<meta>: Il tag per i metadati, usato per specificare informazioni aggiuntive per la pagina HTML (come autore, descrizione e codifica dei caratteri).

Risposte agli Esercizi Guidati

Per ognuno dei seguenti tag, indica il tag di chiusura corrispondente:

<body>

</body>

<head>

</head>

<html>

</html>

<meta>

None

<title>

</title>
Qual è la differenza tra un tag e un elemento? Usa questa voce come riferimento:

<title>HTML Page Title</title>

Un elemento HTML consiste in un tag iniziale, un tag di chiusura e tutto ciò che sta nel mezzo. Un tag HTML è usato per marcare l’inizio o la fine di un elemento. Perciò, <title>HTML Page Title</title> è un elemento HTML, mentre <title> e </title> sono rispettivamente il tag iniziale e quello di chiusura.
Quali sono i tag tra cui inserire un commento?

Un commento è inserito tra i tag  e può essere messo su una singola linea o può abbracciare più linee.
Spiega cos’è un attributo e fornisci alcuni esempi per il tag <meta>.

Un attributo è usato per specificare più precisamente un elemento HTML. Per esempio, il tag <meta> usa la coppia di attributi name e content per aggiungere l’autore e la descrizione di una pagina HTML. Invece, usando l’attributo charset puoi specificare la codifica dei caratteri per il documento HTML.

Risposte agli Esercizi Esplorativi

Crea un semplice documento HTML versione 5 con il titolo My first HTML document e un solo paragrafo nel corpo, contenente il testo Hello World. Usa il tag paragrafo <p> nel corpo.
```
<!DOCTYPE html>
<html>
  <head>
    <title>My first HTML document</title>
  </head>

  <body>
    <p>Hello World</p>
  </body>
</html>
```

Aggiungi l’autore (Kevin Author) e la descrizione (This is my first HTML page.) del documento HTML.

<!DOCTYPE html>
<html>
  <head>
    <title>My first HTML document</title>
    <meta name="author" content="Kevin Author">
    <meta name="description" content="This is my first HTML page.">
  </head>

  <body>
    <p>Hello World</p>
  </body>
</html>

Aggiungi le seguenti parole chiave relative al documento HTML: HTML, Example, Test, e Metadata.

<!DOCTYPE html>
<html>
  <head>
    <title>My first HTML document</title>
    <meta name="author" content="Kevin Author">
    <meta name="description" content="This is my first HTML page.">
    <meta name="keywords" content="HTML, Example, Test, Metadata">
  </head>

  <body>
    <p>Hello World</p>
  </body>
</html>

Aggiungi l’elemento <meta charset="ISO-8859-1"> all’intestazione del documento e cambia il testo Hello World con quello in giapponese (こんにちは世界). Che cosa succede? Come puoi risolvere il problema?

Se l’esempio viene eseguito come descritto, il testo giapponese non viene visualizzato correttamente. Questo perché ISO-8859-1 rappresenta la codifica dei caratteri per l’alfabeto latino. Per visualizzare il testo, è necessario cambiare la codifica dei caratteri, usando per esempio UTF-8 (<meta charset="utf-8">).

Dopo aver cambiato il testo del paragrafo in Hello World, reindirizza la pagina HTML a https://www.google.com dopo 30 secondi e aggiungi un commento che spieghi questo nell’intestazione del documento.

<!DOCTYPE html>
<html>
  <head>
    <title>My first HTML document</title>
    <meta name="author" content="Kevin Author">
    <meta name="description" content="This is my first HTML page.">
    <meta name="keywords" content="HTML, Example, Test, Metadata">
    <meta charset="utf-8">
    <!-- The page is redirected to Google after 30 seconds -->
    <meta http-equiv="refresh" content="30; url=https://www.google.com">
  </head>

  <body>
    <p>Hello World</p>
  </body>
</html>