3E e 3I SIA: Unità didattica: creare una semplice pagina Htm5 e Css
Unità Didattica: Creare una Pagina HTML5 con CSS Esterno
Obiettivi dell’Unità
- Comprendere la struttura di base di un documento HTML5.
- Imparare a collegare un file CSS esterno a un documento HTML.
- Creare una semplice pagina web stilizzata utilizzando HTML e CSS.
Durata
2-3 ore
Materiali Necessari
- Computer con accesso a un editor di testo (come Visual Studio Code, Sublime Text, o Notepad++).
- Browser web (come Chrome, Firefox, o Safari).
Introduzione (15 minuti)
1. Discussione: Introduzione ai concetti di HTML e CSS.
- Spiegare cosa sono HTML e CSS e la loro importanza nel web design.
- Presentare le differenze tra HTML (struttura) e CSS (stile).
Parte 1: Creare un Documento HTML5 (30 minuti)
1. Struttura di Base:
- Spiegare la struttura di base di un documento HTML5, inclusi i tag `<html>`, `<head>`, e `<body>`.
- Esempio di codice:
html
<!DOCTYPE html>
<html lang="it">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>La Mia Pagina Web</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1>Benvenuti nella mia pagina web</h1>
<p>Questa è una semplice pagina HTML5 con un file CSS esterno.</p>
</body>
</html>
```
2. Attività Pratica:
- Chiedere agli studenti di creare il proprio file HTML e di salvare il documento come `index.html`.
Parte 2: Creare un File CSS Esterno (30 minuti)
1. Introduzione al CSS:
- Spiegare come il CSS viene utilizzato per stilizzare il contenuto HTML.
- Presentare la sintassi CSS e i selettori di base.
2. Creazione del File CSS:
- Guidare gli studenti nella creazione di un file CSS esterno e nel collegarlo al file HTML.
- Esempio di codice CSS:
Css
body {
font-family: Arial, sans-serif;
background-color: #f0f0f0;
color: #333;
margin: 0;
padding: 20px;
}
h1 {
color: #007BFF;
}
p {
font-size: 18px;
}
```
3. Attività Pratica:
- Chiedere agli studenti di creare un file chiamato `styles.css` e di inserire il codice CSS fornito.
Parte 3: Collegare HTML e CSS (15 minuti)
1. Collegamento:
- Assicurarsi che gli studenti abbiano inserito il tag `<link>` nel `<head>` del file HTML per collegare il loro file CSS.
- Spiegare l'importanza del corretto collegamento.
2. Visualizzazione:
- Chiedere agli studenti di aprire il file `index.html` nel loro browser per vedere il risultato.
Conclusione (20 minuti)
1. Riflessione:
- Chiedere agli studenti di riflettere su ciò che hanno imparato.
- In che modo HTML e CSS lavorano insieme per creare una pagina web?
2. Compiti:
- Assegnare un progetto dove gli studenti devono creare una pagina web personale utilizzando HTML5 e CSS. Includere almeno un’immagine, una lista e un link.
- Incoraggiare la creatività e l'uso di diverse proprietà CSS.
Valutazione
- Valutare il lavoro pratico degli studenti basandosi sulla corretta implementazione della struttura HTML e dello stile CSS.
- Considerare la creatività e l’originalità nel progetto finale.
Note Aggiuntive
- Assicurarsi di fornire supporto individuale durante le attività pratiche, per aiutare gli studenti con eventuali dubbi o problemi tecnici.
- Incoraggiare gli studenti a esplorare tutorial online e risorse aggiuntive per approfondire le loro conoscenze su HTML e CSS.
Con questa unità didattica, gli studenti avranno le basi necessarie per creare e stilizzare semplici pagine web utilizzando HTML5 e CSS!
Commenti
Posta un commento