Visual Studio Code

Il sito adotta un metodo pratico e diretto: prima si scrive il codice, poi si spiega cosa si è fatto. In questo modo, riduciamo al minimo la teoria. Inoltre, ci concentriamo sulla realizzazione concreta di pagine web, così da imparare in modo più intuitivo.

Esempio pratico:

<!DOCTYPE html>
<html>
  <head>
    <title>Ciao mondo!</title>
  </head>
  <body>
    <h1>Ciao Mondo</h1>
    <p>Benvenuto nel tuo primo sito HTML.</p>
  </body>
</html>

Se ti sembra complicato, non preoccuparti: è normalissimo all’inizio. Segui questi semplici passaggi:
• Copia il codice che vedi qui sopra.
• Vai sul desktop del tuo PC.
• Fai clic con il tasto destro del mouse e seleziona “Nuovo” → “Documento di testo”.
• Apri il nuovo file e incolla il codice al suo interno.
• Adesso salva il file, devi scegliere il nome e l’estensione, chiamalo ad esempio: Il mio primo codice.html
🔸Attenzione: L’estensione .html (dopo il punto) è fondamentale perché indica al browser che si tratta di una pagina web.
• Dopo aver salvato il file, fai doppio clic per aprirlo: il tuo browser lo caricherà come una vera e propria pagina web!
👇 Questo è quello che vedrai nel tuo Browser:

Primo codice HTML

🧠 Spiegazione:

Complimenti hai appena creato la tua pagina HTML, ma adesso capiamo meglio cosa abbiamo scritto e perché è importante.
L’HTML è un linguaggio che utilizza i tag per strutturare le pagine web. Ogni tag ha, quasi sempre, una versione di apertura e una di chiusura.
• <!DOCTYPE html> Indica al browser che stiamo usando l’ultima versione dell’HTML (HTML5).
• <html> Dice al browser: “Qui inizia una pagina HTML”.
• <head> ... </head> Contiene informazioni utili ma non visibili sulla pagina (come il titolo del sito o collegamenti ai fogli di stile). Per ora non ci serve approfondire.
• <body> ... </body> È il corpo della pagina, ovvero tutto quello che sarà visibile sullo schermo.
• <h1> Serve per il titolo principale della pagina.
• <p> Indica un paragrafo di testo.
Adesso hai le basi per leggere e scrivere HTML.
Nella prossima lezione, ti guiderò nell’installazione di un editor di codice, per scrivere le tue pagine in modo più comodo e professionale.

Configura L’ambiente di lavoro

How it all works

Donec sagittis sagittis vestibulum. Morbi vestibulum neque.

1

Find the perfect tutor

Elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo. Nam varius consectetur.

2

Schedule your lesson

Elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo. Nam varius elementum.​

3

Start the journey

Elit tellus, luctus nec mattis, pulvinar dapibus leo. Nam varius consectetur elementum.