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

Post popolari in questo blog

Simulazioni di reti (con Cisco Packet Tracer)

Esercizi in Excel e fogli di Google