Corso di HTML / Che cos’è HTML e quale ruolo ha in una pagina web?

HTML (HyperText Markup Language, un linguaggio di marcatura per l'ipertesto) dà struttura e significato ai contenuti di una pagina web. Contrassegna titoli, paragrafi, elenchi, link e altri componenti di un documento. CSS determina principalmente l'aspetto e la disposizione; JavaScript può aggiungere comportamenti in risposta agli input degli utenti.

Che cos'è HTML?

HTML è un linguaggio di marcatura: gli elementi utilizzati descrivono quale funzione svolge un contenuto nel documento. Le stesse parole possono essere un'intestazione, un normale paragrafo o un collegamento. Gli elementi HTML rendono evidente questa differenza. I collegamenti inoltre collegano fra loro i documenti sul web.

I calcoli e la logica di programma condizionale non sono il compito principale di HTML. Il punto centrale è struttura e significato. L'introduzione allo standard HTML del WHATWG spiega il linguaggio e le funzioni dei suoi elementi.

Quali compiti svolge HTML su un sito web?

Un sito web può contenere intestazioni, testo continuo, navigazione, immagini e moduli. L'HTML assegna elementi appropriati a questi contenuti e descrive le loro relazioni. Il seguente esempio completo mostra anche come questi elementi vengono incorporati nella struttura di base di un documento.

• Contrassegnare i contenuti: h1 fino a h6 contrassegnano le intestazioni, p i paragrafi e ul o ol le liste.
• Strutturare il documento: Gli elementi possono distinguere un'intestazione, un'area di navigazione e il contenuto principale.
• Collegare le pagine e consentire l'inserimento: a crea collegamenti. Con form e gli elementi di input, gli utenti possono trasmettere informazioni.

Questa struttura aiuta i browser e le tecnologie assistive, come i lettori di schermo, a interpretare la pagina. Pertanto, scegliete un elemento in base allo scopo del contenuto. Il suo aspetto predefinito da solo non è un criterio di scelta sufficiente.

In cosa differiscono HTML, CSS e JavaScript?

HTML stabilisce i contenuti e il loro significato. CSS (Cascading Style Sheets, in italiano fogli di stile a cascata) controlla la presentazione, ad esempio colori, tipi di carattere, spaziature e layout. JavaScript può reagire a clic e inserimenti o modificare i contenuti sulla pagina.

Questa suddivisione è un utile punto di partenza, ma non un confine rigido. Alcuni elementi HTML portano già con sé interazioni, e CSS può modificare la presentazione o eseguire animazioni a seconda degli stati. All'inizio concentratevi principalmente sul contrassegnare i contenuti con gli elementi appropriati.

Come visualizza un browser il codice HTML?

In questo estratto h1 indica un'intestazione, p un paragrafo e ul con li un elenco.

<h1>Note del giorno</h1>
<p>Contenuti strutturati in HTML.</p>
<ul>
  <li>Intestazione</li>
  <li>Paragrafo</li>
</ul>

Il browser interpreta gli elementi e mostra un'intestazione, un paragrafo e sotto di essi due voci di elenco con punti elenco. Le parentesi angolari dei tag non appaiono come testo normale della pagina. Confrontate gli elementi con i contenuti visualizzati. I font effettivi e gli spazi dipendono dal browser e dal CSS della pagina.

Creare un file HTML semplice

Integrate il frammento con la struttura di base di un documento. Copiate il seguente esempio completo in un editor di testo, salvatelo come index.html con la codifica dei caratteri UTF-8 e aprite il file in un browser. Utilizzate testo semplice invece di un documento di testo formattato.

<!doctype html>
<html lang="it-IT">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Note del giorno</title>
  </head>
  <body>
    <h1>Note del giorno</h1>
    <p>Contenuti strutturati in HTML.</p>
    <ul>
      <li>Intestazione</li>
      <li>Paragrafo</li>
    </ul>
  </body>
</html>

head contiene informazioni come il titolo del documento e la codifica dei caratteri. body contiene il contenuto principale della pagina. Anche senza CSS aggiuntivo, il browser visualizza i contenuti con i suoi stili predefiniti.

Modificate nell’editor uno alla volta il testo in title, l'intestazione in h1 e il paragrafo. Salvate dopo ogni modifica e ricaricate la pagina. Confrontate in questo modo il titolo nella scheda del browser con il contenuto visibile: una modifica a title non cambia automaticamente l'intestazione nel documento. Successivamente ripristinate il codice di esempio originale.