Modulo 1 — Introduzione all’HTML -

Table of Contents

Obiettivi formativi

Comprendere il ruolo dell’HTML nel Web e distinguere struttura, stile e comportamento.
Riconoscere la differenza fra linguaggio di markup e linguaggio di programmazione.
Analizzare la struttura gerarchica di una pagina HTML5 e i tag fondamentali.
Utilizzare correttamente tag, attributi, valori.
Produrre una pagina valida, leggibile e accessibile.

1️⃣ Origini e significato dell’HTML

L’HTML nasce nel 1991 al CERN di Ginevra grazie a Tim Berners-Lee.
Il suo obiettivo era collegare documenti scientifici mediante collegamenti ipertestuali (hyper-links), da cui il termine HyperText Markup Language.

Anno	Versione	Innovazioni
1991 – 93	HTML 1.0	Primi browser testuali (Mosaic)
1999	HTML 4	Supporto a script e CSS
2014	HTML 5	Audio, video, tag semantici, responsive design

2️⃣ Cos’è un linguaggio di markup

Un linguaggio di markup serve a descrivere la struttura logica di un contenuto, non la sua forma grafica.
In HTML ogni elemento è racchiuso da tag di apertura e chiusura:

<p>Questo è un paragrafo.</p>

$\textbf{Elemento HTML} = \langle \texttt{tag}\rangle \; contenuto \; \langle/\texttt{tag}\rangle$

Gli attributi aggiungono informazioni:

3️⃣ Architettura del Web

Quando navighiamo, il browser invia una richiesta HTTP a un server web, che restituisce un file HTML.
Il browser costruisce il DOM e visualizza la pagina.

$\text{Browser} \xrightarrow{HTTP/HTTPS} \text{Server} \Rightarrow \text{HTML + CSS + JS}$

4️⃣ Struttura base di una pagina HTML5

<!DOCTYPE html>
<html lang=”it”>
<head>
<meta charset=”utf-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1″>
<title>Titolo della pagina</title>
</head>
<body>
Contenuto visibile all’utente.
</body>
</html>

<!DOCTYPE html> → indica che si usa HTML5.
<html lang="it"> → radice del documento, lingua italiana.
<head> → metadati invisibili (titolo, codifica, CSS, script).
<body> → contenuto mostrato al visitatore.

5️⃣ Elementi, attributi e valori

<a href=”https://liceomasci.edu.it” target=”_blank”>Sito del Liceo Masci</a>

href → destinazione link
target="_blank" → apre in nuova scheda
title → tooltip descrittivo

$\texttt{nome="valore"}$

6️⃣ Semantica e accessibilità

L’HTML5 introduce tag che descrivono il significato del contenuto:

<header> → intestazione; <nav> → menu;
<main> → contenuto centrale; <section>, <article> → sezioni logiche;
<footer> → piè di pagina.

$\forall \texttt{<img />} \Rightarrow \texttt{alt="descrizione"}$

7️⃣ Template minimo

<!DOCTYPE html>
<html lang=”it”>
<head><meta charset=”utf-8″><title>La mia prima pagina</title></head>
<body>
<header><h1>Benvenuti</h1></header>
<main><p>Questa è la mia prima pagina HTML.</p></main>
<footer><small>© 2025 Liceo Masci</small></footer>
</body>
</html>

8️⃣ Strumenti di lavoro

Editor: VS Code, Thonny, Notepad++ (UTF-8 senza BOM).
Anteprima: estensione “Live Server”.
Validazione: validator.w3.org.
Analisi: strumenti sviluppatore (F12).

9️⃣ Esercizi guidati

🔹 Esercizio 1 — La mia prima pagina

Crea index.html con titolo e due paragrafi.

🔹 Esercizio 2 — Struttura semantica

Aggiungi <header>, <main>, <footer> con contenuti adeguati.

🔹 Esercizio 3 — Accessibilità

Inserisci un’immagine con alt e un link descrittivo.

🔹 Esercizio 4 — Validazione

Usa il validator W3C e correggi gli errori.

🔹 Esercizio 5 — Mini-progetto

Crea una home page personale con titolo, foto, descrizione e link ai tuoi social o lezioni successive.

🔟 Verifica lampo

L’HTML è un linguaggio di programmazione? → Falso.
<title> va in <head>? → Vero.
lang="it" si dichiara in <html>? → Vero.

Rubrica di valutazione

Criterio	Eccellente	Buono	Base	Da rivedere
Struttura HTML	completa e semantica corretta	quasi completa	minima	errori strutturali
Accessibilità	alt, lang e titoli perfetti	piccole mancanze	alt assente	ignorata
Leggibilità	indentazione e commenti ottimi	buoni	irregolari	caotici
Originalità	contenuto personale e curato	adeguato	standard	assente

Compito di realtà:Realizza la home page del sito di classe con <header>, <nav>, <main>, <footer>.
Inserisci il logo, un menu di navigazione, una presentazione e il copyright.

Collegamenti interdisciplinari

Storia della tecnologia → nascita di Internet e ARPANET.
Informatica → architettura client-server e protocolli TCP/IP.
Educazione civica digitale → accessibilità e diritto all’informazione.
Matematica → strutture ad albero (DOM come grafo radicato).

Preview Modulo 2 — Testo e ParagrafiTitoli (<h1>–<h6>), paragrafi, evidenziazioni (<strong>, <em>, <mark>), linee orizzontali e formattazione tipografica.

Modulo 1 — Introduzione all’HTML