Lezione 2 - Introduzione all'HTML

Mostra: fai vedere l'immagine all'interno del Sito web - testo di esempio

Se questo sito è bloccato per gli studenti, il tuo dipartimento IT potrebbe dover inserire codeprojects.org nella whitelist. Questo è lo stesso sito che gli studenti useranno per pubblicare le proprie pagine web, quindi è importante che vi abbiano accesso.

Discussione: immagina di voler spiegare a una persona al telefono come disegnare questa pagina web. Scrivi istruzioni chiare in modo che quanto disegnato corrisponda perfettamente a questa immagine.

Discussione: una volta che gli studenti hanno scritto le istruzioni, chiedi loro di condividerle brevemente con un compagno.

Obiettivo: attività come questa vengono spesso utilizzate nei corsi di informatica per aiutare a evidenziare la precisione necessaria per comunicare le istruzioni a un computer. In questo caso l'obiettivo è simile. Vuoi evidenziare la difficoltà di differenziare il contenuto effettivo della pagina e le istruzioni che indicano come dovrebbe essere strutturato. Questa dimostrazione aiuta a giustificare la creazione di codice HTML per etichettare parti di contenuto per aiutare il computer a capire cosa sono e quindi come dovrebbero apparire.

Demo: esegui una rapida demo seguendo le istruzioni riportate di seguito.

• Scegli uno studente per condividere oralmente con te una delle sue istruzioni.
• L'insegnante dovrebbe agire come la persona al telefono che cerca di disegnare la pagina web
• «Disegnare» pubblicamente il sito web esattamente come dicono le istruzioni dello studente. Ad esempio, se ti viene detto «scrivi più grande», scrivi la parola «più grande» sulla pagina. Se non indicano dove va il testo, posiziona il testo in posizioni casuali.
• Quando lo studente ti dà le istruzioni, chiedi loro di dirti se le hai disegnate correttamente. Se non l'hai disegnato correttamente, chiedi loro di rendere le loro direzioni più specifiche finché non riesci a disegnarlo correttamente.
• Cambia studente dopo un paio di istruzioni per coinvolgere più studenti.
• Tieni traccia, in una qualche parte visibile, di tutte le istruzioni fornite dagli studenti e dei miglioramenti che apportano alle istruzioni.
• Ripetere questa procedura fino a ricreare la maggior parte della pagina web.

Discussione: una volta che hai finito di disegnare il sito, crea rapidamente un elenco di tutti i dati di diversa natura di cui dovevano tenere conto nelle loro istruzioni. Ad esempio, posizione, dimensione, carattere, ecc.

Ci sono molte informazioni che dobbiamo comunicare se vogliamo creare pagine web. Non è sufficiente sapere solo quali contenuti vuoi inserire nella tua pagina, ad esempio le parole o le immagini effettive. Devi sapere dove dovrebbero essere le cose e come dovrebbero apparire. Oggi inizieremo a imparare i linguaggi impiegati sul web per rappresentare queste informazioni aggiuntive.

Domanda del giorno: come possiamo dire al computer sia cosa mettere nella pagina web, sia come organizzarla?

Vocabolario chiave:

• contenuto del sito web - testo e immagini su un sito web
• struttura del sito web - come è organizzato il contenuto di un sito web

Oggi inizieremo a lavorare con diverse risorse. Man mano che scopriamo ogni tipo di risorsa, la aggiungeremo all'elenco qui davanti alla stanza e alla fine della lezione esamineremo come ciascuna viene utilizzata.

Mostra: alla lavagna o su un cartellone bianco, scrivi il titolo «Risorse», lasciando spazio per elencare le varie risorse così come appaiono nella lezione.

Utilizzo delle risorse: di seguito puoi trovare consigli per l'utilizzo delle numerose risorse a cui gli studenti vengono introdotti nella lezione. Attendi che gli studenti abbiano visto tutte queste risorse da rivedere alla fine della lezione, ma aggiungile all'elenco e modella l'uso corretto man mano che appaiono.

• Video: visti in classe, ma gli studenti possono sempre riprenderli.
• Scheda aiuto e suggerimenti questa scheda contiene tutti i video e le guide di riferimento pertinenti per un determinato esercizio.
• Guide di riferimento: contengono testo e diagrammi che spiegano il contenuto. Queste sono intese come utili risorse per gli studenti, non come letture in classe. Sono un buon posto dove andare per il ripasso dopo aver appreso i contenuti o quando gli studenti rimangono bloccati negli esercizi. Puoi decidere di stamparli e renderli disponibili per gli studenti man mano che superano gli esercizi.
• Documentazione un collegamento alla documentazione di Sviluppo Web è disponibile nell'angolo superiore destro del pannello delle istruzioni. Gli studenti possono usarlo per rinfrescare la memoria su importanti tag introdotti nell'unità.
• Istruzioni per l'esercizio: le istruzioni possono introdurre piccoli pezzi di nuovi contenuti. Ogni esercizio presenta una sezione «Fai questo» che spiega cosa dovrebbero fare gli studenti in quell'esercizio. Ponetevi subito l'aspettativa che sia importante leggere queste istruzioni, non solo la sezione «Fai questo».
• Suggerimenti a discesa per gli esercizi: gli studenti possono fare clic su questi suggerimenti nelle aree di istruzione delle lezioni.
• Strumento di ispezione: evidenzia il codice corrispondente a un elemento della pagina Web quando si passa con il mouse sull'area di anteprima.

Dopo aver dato agli studenti del tempo per esplorare lo strumento, chiedi loro di condividere tutto ciò che hanno scoperto. Il video all'esercizio successivo offrirà loro una breve panoramica e perciò non è un problema se non si accorgono di tutto.

Domanda da considerare con il video:

• Quali sono le diverse parti di "Sviluppo Web" e a cosa servono?

Obiettivi della discussione: Sebbene non ci siano obiettivi formativi generali per questo video, gli studenti devono capire che le istruzioni per gli esercizi di "Sviluppo Web" appaiono nell'ampio pannello in alto e i tre pannelli inferiori, da sinistra a destra, includono l'elenco dei file su cui stanno lavorando, l'area in cui digitano il codice e l'area in cui vedono i risultati del loro codice. Per ora, non devono preoccuparsi di ogni pulsante, come verrà spiegato più avanti, ma devono capire che lo "Strumento Ispettore" li aiuta a collegare parti della pagina web al codice che le ha create e il pulsante Aggiorna e salva consente loro di aggiornare la loro pagina web se non si aggiorna automaticamente quando modificano il codice.

Sebbene non faccia parte del video, il riquadro delle istruzioni spesso include anche domande e risposte a discesa che gli studenti possono utilizzare quando completano un'attività e, in alcuni esercizi, le schede nella parte superiore del riquadro delle istruzioni indirizzano gli studenti a un'area «Guida e suggerimenti» che include informazioni di riferimento relative alle attività.

Uso dello strumento Mentre gli studenti esplorano il sito, assicurati che capiscano come usare lo strumento di ispezione, i suggerimenti a discesa sul lato destro del pannello delle istruzioni e la scheda «Aiuto e suggerimenti», che consentirà loro di accedere al video precedente.

Opzioni di sintesi vocale: il pannello delle istruzioni include due opzioni che possono supportare la comprensione per gli studenti.

• Sintesi vocale che legge ad alta voce le istruzioni per gli studenti
• Microsoft Immersive Reader che apre un nuovo pannello per le istruzioni e fornisce i controlli per modificare la dimensione del testo, il contrasto o la traduzione in un'altra lingua.

Clicca qui per saperne di più su queste opzioni

Discussione HTML Dovresti riunire gli studenti dopo aver passato un paio di minuti a esaminare questo esercizio. Le istruzioni di discussione elencate nell'esercizio devono essere utilizzate in una struttura "Rifletti-Lavora in coppia-Condividi" standard.

• Quale testo appare sia nel codice che nella pagina web?
• In che modo questo linguaggio comunica informazioni aggiuntive sul modo di rappresentare il testo?

L'obiettivo della discussione è quello di evidenziare le caratteristiche dell'HTML che gli studenti stanno notando. Le due conclusioni principali (rafforzate anche nel video successivo) sono che l'HTML utilizza un sistema di etichette (tag) per racchiudere i contenuti e indicare cos'è e come deve essere visualizzato.

Video: mostra agli studenti il seguente video

Domande da prendere in considerazione con il video:

• Perché i tag HTML sono utili?
• A cosa serve il tag di paragrafo?

Obiettivi di discussione

Glossario delle parole chiave:

• HTML - Hypertext Markup Language, un linguaggio utilizzato per creare pagine web
• Elemento HTML - una parte di un sito web, contrassegnata da un tag iniziale e spesso chiusa con un tag finale
• Tag HTML - il set speciale di caratteri che indica l'inizio e la fine di un elemento HTML e il tipo di quell'elemento

Mentre gli studenti discutono dei tag HTML, assicurati che comprendano quell'HTML i tag vengono utilizzati per strutturare o organizzare i contenuti sullo schermo. Parlare dell'organizzazione, della struttura o del ruolo del contenuto della pagina (titolo, paragrafo, elenco, ecc.) è più accurato che parlare di aspetti specifici del suo aspetto (come dimensione o spaziatura).

Sebbene alcuni ruoli strutturali possano essere associati all'aspetto (i titoli sono più grandi), l'HTML non specifica nulla in particolare sull'aspetto. Ciò consente agli utenti con esigenze diverse, come i non vedenti, di interagire con i contenuti strutturati nel modo più sensato per loro. Più avanti nell'unità, gli studenti impareranno a conoscere gli stili e i CSS, che consentono loro di specificare le dimensioni, il colore e la spaziatura esatti dei loro elementi HTML.

Il tag del paragrafo separa il testo in paragrafi. Potresti voler dare seguito a questa domanda chiedendo agli studenti come pensano che un browser web per non vedenti possa gestire i paragrafi. Ad esempio, mentre le persone vedenti possono usare spaziature e nuove righe per separare i paragrafi, cosa dovrebbe fare un'applicazione per leggere lo schermo?

Uso dello strumento: Man mano che gli studenti lavorano a questo esercizio, assicurati che sia disponibile un nuovo esercizio della mappa nella scheda «Guida e suggerimenti». Questo è il luogo migliore per cercare risorse extra che li aiuteranno a completare un esercizio.

Uso dello strumento: questo esercizio contiene una nuova scheda, «Criteri di valutazione», che fornisce indicazioni su come valutare il lavoro degli studenti e consente di lasciare un riscontro. Questo rende l'esercizio particolarmente utile come valutazione. Gli studenti possono vedere come viene valutato il loro lavoro facendo clic sulla scheda «Criteri di valutazione». Successivamente, qualsiasi riscontro degli insegnanti verrà visualizzato nella stessa area. Clicca qui per saperne di più su come fornire riscontro agli studenti

Puoi usare questo esercizio come valutazione formativa per gli studenti. Fai clic all'interno dell'esercizio per visualizzare i Criteri di valutazione e lasciare un riscontro ai tuoi studenti

**Correzione degli errori (debugging): ** Quando gli studenti iniziano a eseguire il processo di individuazione e correzione degli errori, questo è un ottimo momento per enfatizzare una cultura positiva in merito al debugging. Questa è un'abilità centrale che gli studenti svilupperanno durante il corso. Sottolinea che il debugging è una parte normale del processo di programmazione e che i bug capitano a tutti i programmatori, anche quelli esperti. Ulteriori informazioni sono disponibili nella «Guida alla correzione di errori» collegata alla pagina del programma di "Alla scoperta dell'informatica" all'indirizzo https://studio.code.org/courses/csd.

Domanda del giorno: come possiamo dire al computer sia cosa mettere nella pagina web, sia come organizzarla?

Diario di bordo: per dirla con parole tue, in che modo l'HTML aiuta a risolvere il problema di dire a un computer l'aspetto di una pagina web, non solo il contenuto?

Obiettivo: le risposte degli studenti varieranno ma probabilmente si concentreranno sul fatto che l'uso dei tag aiuta il computer a sapere cosa «sono» i diversi contenuti. L'uso di questi tag aiuta il computer a sapere che aspetto dovrebbero avere i tag. Se è necessario riprendere questa discussione dopo che gli studenti hanno visto più tag, va bene lo stesso. In entrambi i casi, usa questa discussione per motivare il punto di conclusione del contenuto rispetto alla struttura.

Quando gli studenti discutono dell'HTML come soluzione, assicurati che stiano usando il vocabolario chiave della lezione:

• contenuto del sito web - testo e immagini su un sito web
• struttura del sito web - come è organizzato il contenuto di un sito web
• HTML - Hypertext Markup Language, un linguaggio usato per creare pagine web
• elemento HTML - una parte di sito web, contrassegnata da un'etichetta (tag) iniziale e spesso chiuso con un tag finale
• Tag HTML - il set speciale di caratteri che indica l'inizio e la fine di un elemento HTML e il tipo di quell'elemento

Il contenuto sono le parole letterali che vengono digitate nella pagina. Usando l'HTML, gli studenti forniscono una struttura alla pagina, spiegando come devono essere interpretati quei contenuti. Più avanti nell'unità gli studenti impareranno il CSS, un linguaggio che consente loro di modellare individualmente gli elementi. Per ora, tuttavia, gli stili applicati in base ai tag HTML sono solo gli stili predefiniti del loro browser web. Gli studenti non hanno bisogno di comprendere appieno questa differenza a questo punto, poiché sarà molto più chiara una volta che impareranno i CSS più avanti nell'unità.

Discussione: dopo che gli studenti hanno avuto il tempo di riflettere individualmente sul diario, consenti loro di discutere con un compagno, quindi condividi il tutto con la classe.

L'HTML utilizza i tag per aiutare il computer a sapere quali sono effettivamente i diversi contenuti della pagina Web. In questo momento abbiamo solo imparato a dire al computer che un testo è un paragrafo o che una parte del tuo sito web è il corpo. Abbiamo già visto come ciò influenzi l'aspetto e la struttura delle nostre pagine web. Man mano che andiamo avanti, impareremo altri tag e vedremo altri esempi di come questo linguaggio ci aiuta ad aggiungere struttura alle nostre pagine web.

Ripasso: torna all'elenco delle risorse didattiche che hai scritto alla lavagna e rivedi con tutta la classe come dovrebbero essere utilizzate. Fai riferimento al suggerimento didattico di cui sopra per gli usi consigliati.