Esercizio - Aggiungere codice HTML di base all'app Web

  • 10 minuti

Al momento, il sito Web include un file HTML vuoto. a cui è possibile aggiungere codice. L'obiettivo è usare HTML (Hypertext Markup Language) per descrivere la pagina Web che verrà visualizzata nel browser dei clienti. Sarebbe molto utile avere un modello da cui partire. Gli editor sono in grado di compilare automaticamente parte del tipico codice boilerplate o della struttura HTML.

In questa unità si aggiungerà contenuto HTML di base, si aprirà la pagina HTML in un browser e si darà una prima occhiata agli strumenti di sviluppo.

Aggiungere codice HTML

Visual Studio Code offre supporto di base predefinito per la programmazione HTML. Sono disponibili l'evidenziazione della sintassi, il completamento intelligente con IntelliSense e la formattazione personalizzabile.

  1. Aprire il sito Web in Visual Studio Code, quindi aprire il file index.html selezionando index.html nella finestra Explorer.

  2. Nella pagina index.html digitare html:5 e quindi premere INVIO. Il codice del modello HTML5 viene aggiunto al file.

    Nota

    Se il codice del modello HTML5 non viene aggiunto al file index.html, provare a chiudere e riaprire il file.

  3. Modificare il codice del modello in modo che risulti simile al seguente. Salvare quindi il file premendo CTRL+S in Windows o CMD+S in macOS.

    <!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>

</body>
</html>

Sono state realizzate diverse versioni del codice HTML. Il valore doctype<!DOCTYPE html> indicate che questo documento HTML contiene codice HTML5.

Non si intende esaminare a fondo il significato di tutti gli elementi HTML, ma si vogliono evidenziare alcuni elementi importanti. Il tag meta indica informazioni sui metadati che in genere non sono visibili all'utente a meno che non visualizzi il codice sorgente nel browser. Gli elementi meta o i tag offrono informazioni descrittive sulla pagina Web. Consentono ad esempio ai motori di ricerca di elaborare le informazioni contenute nelle pagine Web da restituire nei risultati della ricerca.

Il set di caratteri (charset) per UTF-8 può sembrare irrilevante, ma è fondamentale per definire come vengono interpretati i caratteri dai computer. Se i metadati per il set di caratteri non sono presenti, la sicurezza può essere compromessa. Ci sarebbe molto da dire sull'attributo charset, sia a livello tecnico che storico, ma il punto importante di questo esercizio è che il boilerplate Visual Studio Code fornisce alcune impostazioni predefinite significative.

Modificare l'intestazione

L'elemento <head> nel codice HTML contiene informazioni sul sito Web non visibili all'interno della scheda del browser.

I metadati definiscono i dati relativi al documento HTML, come il set di caratteri, gli script e il browser in cui viene aperta la pagina Web.

Il titolo di una pagina Web viene visualizzato nella parte superiore della finestra del browser ed è significativo per diversi motivi. Ad esempio viene usato dai motori di ricerca e visualizzato nelle ricerche. Provare ad aggiungere un titolo.

Importante

Da questo momento in poi, i puntini di sospensione (...) indicano che il codice dichiarato prima precede o segue. Il codice fornito come contesto dovrebbe essere sufficiente per apportare le modifiche necessarie o aggiornare il proprio lavoro, ma evitare di copiare e incollare i puntini di sospensione nel codice.

  1. Nell'editor modificare l'elemento <title> in modo che sia simile all'esempio seguente.

    ...
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Simple website</title>
...

Per applicare gli stili agli elementi HTML nella pagina Web, si potrebbe scrivere il codice CSS direttamente nell'intestazione della pagina Web. La scrittura di codice CSS nella pagina HTML viene definita CSS interno. Tuttavia, è consigliabile separare la struttura HTML e lo stile CSS. L'uso di una pagina CSS separata viene detto CSS esterno. Il codice tende a essere più leggibile quando è conciso e compartimentalizzato. È possibile usare uno o più fogli di stile esterni per più pagine Web. Invece di aggiornare ogni pagina HTML con codice CSS replicato, è possibile apportare le modifiche a un singolo file CSS e applicare gli aggiornamenti a tutte le pagine Web dipendenti. Creare ora un collegamento a un file CSS esterno.

  1. Nell'editor di Visual Studio Code aggiungere una riga vuota dopo l'elemento <title>, digitare link e quindi premere INVIO. Visual Studio Code dovrebbe aggiungere la riga seguente al file index.html.

    <link rel="stylesheet" href="">

  2. Aggiornare href= in href="main.css" e salvare il file premendo CTRL+S in Windows o CMD+S in macOS.

    ...
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Task List</title>
  <link rel="stylesheet" href="main.css">
</head>
...

Modificare il corpo

Iniziare quindi a compilare l'elemento <body>.

L'elemento <body> contiene il contenuto del sito Web visibile ai clienti nei rispettivi browser.

  1. All'interno dell'elemento <body> aggiungere un elemento <h1> di intestazione seguito da un elemento <p>paragrafo, quindi creare un elenco non ordinato<ul> contenente diversi elementi <li>voce di elenco.

  2. Modificare il codice, oppure copiarlo e incollarlo, in modo che sia simile all'esempio seguente.

    <!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Simple website</title>
    <link rel="stylesheet" href="main.css">
  </head>
  <body>
    <h1>Task List</h1>
    <p id="msg">Current tasks:</p>
    <ul>
      <li class="list">Add visual styles</li>
      <li class="list">Add light and dark themes</li>
      <li>Enable switching the theme</li>
    </ul>
  </body>
</html>

Un attributo ID (usato nell'elemento <p>) può essere usato per applicare lo stile a un unico elemento, mentre l'attributo class (usato nell'elemento <li>) consente di applicare lo stile a tutti gli elementi della stessa classe.

Prima del passaggio successivo, assicurarsi di salvare il file premendo CTRL+S o CMD+S.

Aprire il file nel browser

È possibile visualizzare in anteprima la pagina Web in locale aprendo il file HTML in un browser. Anziché un indirizzo di sito Web che inizia con https://, il browser punta al percorso del file locale, che dovrebbe essere analogo a C:/dev/simple-website/index.html.

  • Per visualizzare un'anteprima usando Visual Studio Code, fare clic con il pulsante destro del mouse su index.html e quindi scegliere Apri nel browser predefinito oppure selezionare il file index.html e usare la scelta rapida da tastiera ALT+B.

    Screenshot of the Open in Browser context menu item in Visual Studio Code.

    Importante

    In caso di problemi, assicurarsi di fare clic con il pulsante destro del mouse direttamente sull'icona o sul nome del file. Se viene visualizzata la finestra di dialogo Visual Studio Code, selezionare Sì, mi fido degli autori. Si tratta della funzionalità Attendibilità dell'area di lavoro che consente di decidere se le cartelle di progetto devono consentire o limitare l'esecuzione automatica del codice. Il file è stato appena creato, pertanto è sicuro.

    La pagina Web viene aperta nel browser predefinito.

Visualizzare la pagina usando gli strumenti di sviluppo

È possibile esaminare una pagina Web usando gli strumenti di sviluppo del browser. Proviamo a fare quanto segue.

  1. Aprire Strumenti di sviluppo facendo clic con il pulsante destro del mouse nella pagina Web e scegliendo Ispeziona oppure provare a usare i tasti di scelta rapida descritti di seguito:

    • Premere la scelta rapida da tastiera per Strumenti di sviluppo, ovvero F12.

    • Premere CTRL+MAIUSC+I in Windows e Linux o Opzione+COMANDO+I in Mac.

    Questi tasti di scelta rapida funzionano in Microsoft Edge, Chrome e Firefox. Se si usa Safari, vedere Web Development Tools (Strumenti di sviluppo Web). Dopo l'installazione, selezionare Safari > Preferenze e quindi Avanzate. Nella parte inferiore del riquadro selezionare la casella di controllo Show Develop menu in menu bar (Mostra il menu di sviluppo nella barra dei menu). Selezionare Sviluppo > Mostra Web Inspector. Per altre informazioni, vedere la documentazione di Safari Web Inspector.

    Per altre informazioni sull'apertura di Strumenti di sviluppo e sulle funzionalità principali disponibili, vedere l'articolo Panoramica di DevTools.

  2. Selezionare la scheda Elementi.

    Screenshot showing a browser window with the website, and the Developer Tools next to it with the Elements tab selected.

  3. Spostare il mouse sugli elementi HTML visualizzati nella scheda Elementi ed espandere il contenuto dei vari elementi.

La scheda Elementi negli strumenti di sviluppo mostra il modello DOM (Document Object Model) così come viene reso nel browser. Quando si esegue il debug, è spesso importante vedere in che modo il browser interpreta il codice sorgente.

Esaminare la pagina in un browser offre moltissime informazioni utili e può agevolare la risoluzione dei problemi. È anche possibile visualizzare i dettagli CSS con lo strumento di controllo, come si vedrà nella sezione successiva.