La struttura

Una pagina HTML

Una pagina HTML5 ha sempre la stessa ossatura: head (informazioni, titolo, collegamenti) e body (cio' che si vede). I tag aprono e chiudono il contenuto.

index.html

<!DOCTYPE html>
<html lang="it">
<head>
  <meta charset="UTF-8">
  <title>La mia pagina</title>
  <link rel="stylesheet" href="style.css">   <!-- CSS esterno -->
</head>
<body>
  <h1>Titolo</h1>
  <p>Un paragrafo di testo.</p>
  <ul><li>uno</li><li>due</li></ul>
</body>
</html>

02

L'aspetto

Il foglio di stile CSS

Il CSS separa il contenuto dall'aspetto. Si scrive in un file .css a parte e si collega con il tag link. Ogni regola ha un selettore e delle proprieta'.

style.css

body { background: #f4f6fb; font-family: Arial, sans-serif; }
h1   { color: #19D478; text-align: center; }
.box { border: 1px solid #2B386D; padding: 16px; border-radius: 8px; }

Selettori principali: per tag (h1), per classe (.box, si applica a class="box"), per id (#menu, unico nella pagina).

03

Il comportamento

Le basi di JavaScript

JavaScript rende la pagina interattiva: seleziona un elemento e reagisce a un evento (un clic, un testo digitato...). Si seleziona con document.getElementById.

script.js

<p id="msg">Ciao</p>
<button onclick="cambia()">Premi</button>

<script>
  function cambia() {
    document.getElementById("msg").textContent = "Hai cliccato!";
  }
</script>

Nella verifica web ti verra' chiesto di creare una pagina e il relativo CSS. Punta a un HTML pulito (tag corretti e chiusi) e a un CSS separato e coerente. Il JavaScript di solito e' un tocco in piu'.