Creazione di siti web
Durata: 10 ore
Target: Secondaria di Primo e Secondo grado
Materiali da richiedere alla scuola: 1 PC con connessione internet per studente, editor di testo (es. Visual Studio Code) e browser aggiornato
Abstract: Percorso pensato per fornire agli studenti le basi per comprendere il funzionamento del web e realizzare un semplice sito internet. Durante il percorso gli studenti imparano a usare l’HTML per strutturare le pagine, i fogli di stile CSS per personalizzarne l’aspetto grafico e alcuni elementi di Javascript per renderle interattive. Il corso alterna spiegazioni teoriche a laboratori pratici, permettendo ai partecipanti di costruire passo dopo passo un proprio sito personale.
Attività per lezione:
1. Introduzione al web e basi di HTML: Gli studenti scoprono cos’è un browser e come funziona la comunicazione tra client e server. Attraverso esercitazioni guidate imparano a creare la loro prima pagina HTML, sperimentando la formattazione del testo e i principali tag. Al termine del blocco hanno già costruito una semplice pagina con titolo, paragrafi ed elenchi.
2. Elementi multimediali e strumenti di ispezione: Si approfondisce l’uso dell’HTML inserendo immagini, video e mappe all’interno della pagina web. Gli studenti imparano a usare gli strumenti di ispezione del browser per comprendere meglio la struttura di una pagina già pubblicata e trarre ispirazione da siti reali. In questa fase la pagina creata diventa più ricca e vicina a un vero sito web.
3. Collegamenti e strutture complesse: Gli studenti aggiungono collegamenti ipertestuali, liste puntate e numerate e imparano a costruire tabelle. La loro pagina inizia così a contenere più sezioni e collegamenti tra diverse parti, assumendo la forma di un mini-sito navigabile.
4. Personalizzare la grafica con i CSS: Viene introdotto l’uso dei fogli di stile CSS per modificare l’aspetto della pagina. Gli studenti imparano a cambiare colori, font e layout, scoprendo come separare la struttura dei contenuti (HTML) dalla presentazione grafica (CSS). Ogni partecipante inizia a dare al proprio sito un aspetto unico e personalizzato.
5. Introduzione a Javascript e interattività: L’ultimo blocco è dedicato a introdurre la programmazione in Javascript. Attraverso esempi semplici, come la visualizzazione di un messaggio al click su un bottone, gli studenti comprendono come aggiungere comportamenti dinamici al sito. Al termine, ogni studente ha realizzato un piccolo sito personale con contenuti, grafica personalizzata e un tocco di interattività.