In breve: Una pagina web statica mostra contenuti fissi nel browser. Con HTML, CSS e un po' di JavaScript possiamo aggiungere semplici interazioni.
Cosa è una pagina web statica
Una pagina statica mostra sempre gli stessi contenuti a tutti gli utenti. Non cambia in base a un database o a un server.
Il browser riceve il file e lo legge subito. Tu vedi testo, immagini e link già pronti.
L'interazione locale avviene solo nel tuo dispositivo. Non serve inviare dati a un server remoto.
Come si costruisce una pagina
Per costruire una pagina web servono tre linguaggi principali. Ognuno ha un compito preciso e diverso.
L'HTML è la struttura. Definisce titoli, paragrafi, immagini e pulsanti, come lo scheletro di un corpo.
Il CSS è l'aspetto. Sceglie colori, font, dimensioni e posizione degli elementi sulla pagina.
Il JavaScript aggiunge il movimento. Permette di reagire ai click, mostrare messaggi o cambiare il testo senza ricaricare.
Pensa a un volantino di pizzeria. L'HTML è il foglio con le scritte. Il CSS è la grafica colorata. Il JavaScript è un pulsante che dice "ciao" quando lo tocchi.
Esempi pratici di interazione locale
Un primo esempio è un pulsante che cambia colore allo sfondo. Lo scriviamo con il tag <button> e l'evento onclick.
<!DOCTYPE html>
<html lang="it">
<head>
<meta charset="UTF-8">
<title>Saluto</title>
<style>
body { font-family: sans-serif; padding: 20px; }
button { padding: 10px; font-size: 16px; }
</style>
</head>
<body>
<h1>Ciao classe!</h1>
<p id="messaggio">Premi il pulsante.</p>
<button onclick="saluta()">Saluta</button>
<script>
function saluta() {
document.getElementById("messaggio").textContent = "Benvenuto!";
}
</script>
</body>
</html>
Un secondo esempio è un piccolo modulo. L'utente scrive il nome e la pagina lo mostra subito.
Possiamo anche calcolare l'area di un rettangolo con due caselle di testo. Tutto resta nel browser, senza inviare dati fuori.
Parole difficili
- HTML: linguaggio che definisce la struttura della pagina web.
- CSS: linguaggio che descrive lo stile grafico della pagina.
- JavaScript: linguaggio di programmazione che aggiunge interazione alla pagina.
- Browser: programma che apre e mostra le pagine web.
- Evento: azione dell'utente, come un click o un tasto premuto.
- Tag: etichetta HTML scritta tra parentesi angolari, come
<p>.
Riferimenti
- Norma: Riordino degli istituti tecnici
- Obiettivo formativo coperto: ob.tecnico-informatica-telecomunicazioni.informatica.cl3.pagine-web-statiche.01