Lezione 6 - Definire lo stile del testo con i CSS

Mostra: conduci gli studenti alla pagina web di esempio in Code Studio o visualizzala alla lavagna.

Discussione: dai un'occhiata alla pagina web su Code Studio. Se volevi creare una pagina come questa, cosa sai già fare? Cosa devi ancora imparare a fare?

Discussione: chiedi agli studenti di condividere quali parti conoscono e quali non conoscono

Obiettivo: gli studenti dovrebbero notare che possono ottenere la struttura e le dimensioni corrette del testo usando i titoli (ad esempio <h1>) e i paragrafi <p>. Potrebbero notare che non possono cambiare il colore del testo. Alcuni altri stili da notare sono che tutti i paragrafi sono in corsivo, i nomi dei discorsi sono sottolineati e le citazioni sono molto più piccole dei paragrafi.

Finora abbiamo creato solo pagine web in cui controlliamo il contenuto e la struttura, ad esempio quali parti delle pagine sono titoli o paragrafi. Abbiamo utilizzato l'HTML come linguaggio per specificare il contenuto e la struttura delle pagine. Sebbene l'HTML ci consenta un certo controllo sull'aspetto della pagina, non offre agli sviluppatori molto controllo sull'aspetto e sullo stile specifici di ogni elemento. Per farlo, abbiamo bisogno di un linguaggio che esprima uno stile.

Domanda del giorno: come possiamo cambiare lo stile del testo su una pagina web?

Forma i gruppi: disponi a coppie gli studenti.

Transizione: fai andare gli studenti su Code Studio.

Consenti agli studenti di esplorare la pagina web di esempio in Code Studio.

Guida agli esercizi di programmazione: ulteriori indicazioni per gli esercizi di programmazione sono fornite nella Guida CSD agli esercizi di programmazione. Questo documento include strategie e buone pratiche per agevolare lo svolgimento degli esercizi di programmazione con gli studenti.

Chiedi agli studenti di esplorare questo esercizio con un compagno. Successivamente, conduci una breve condivisione in modo che i partner possano condividere con la classe le loro risposte alle tre domande nelle istruzioni. Il video successivo dovrebbe aiutare a rafforzare ciò che gli studenti hanno scoperto, quindi non è necessario condurre una lunga conversazione di confronto.

Mostra: guarda e discuti il video CSS in classe.

Domande da prendere in considerazione con il video:

• In che modo lo stile di una pagina web è diverso dalla struttura?
• Perché potresti volere che la tua pagina web abbia un certo stile?

Glossario delle parole chiave

• CSS - Cascading Style Sheets; un linguaggio usato per descrivere come dovrebbero essere definiti gli elementi HTML
• CSS Selector - la parte di un set di regole CSS che definisce a quali elementi HTML lo stile deve essere applicato

Gli studenti dovrebbero capire che la struttura della pagina è lì per organizzare i dati in modo logico, ma non dice al computer come visualizzarle. Quindi, ad esempio, la struttura potrebbe includere titoli e paragrafi diversi, ma non direbbe nulla sul colore del testo o sulla sua dimensione visualizzata. Lo stile della pagina è la specificità del suo aspetto. Senza uno stile particolare, ogni browser web deciderebbe come visualizzare i diversi elementi della pagina web da solo.

Gli stili sono importanti per consentire agli sviluppatori web di decidere esattamente come appare una pagina web sullo schermo. Poiché gli stili sono separati dalla struttura e dal contenuto, gli sviluppatori web possono modificare lo stile di un'intera pagina molto facilmente, senza dover apportare modifiche alla struttura e al contenuto della pagina web. Ciò significa che è molto facile per le pagine web avere un aspetto individuale e unificato su tutta la pagina.

Immagini nel video: intorno al secondo 40, il video menziona brevemente che gli studenti hanno imparato ad aggiungere immagini al loro sito web. In una versione precedente del corso, quando questo video è stato originariamente registrato, gli studenti imparavano le immagini prima di imparare i CSS. Nella versione attuale del corso, gli studenti non hanno ancora visto i video. È un piccolo momento del video, ma se gli studenti lo chiedono, sfruttalo per suscitare entusiasmo poiché gli studenti impareranno a conoscere le immagini in poche lezioni!

Girando tra i banchi: sostieni gli studenti mentre affrontano la progressione della lezione.

Normalizzazione degli errori e supporto al debugging: man mano che gli esercizi di programmazione diventano più complessi, gli studenti potrebbero ritrovarsi nel codice dei bug che devono risolvere. Se ciò accade frequentemente, questa può essere un'esperienza demoralizzante per gli studenti e può influire sulla loro percezione di sé delle loro capacità in classe.

Per ovviare a ciò, consigliamo di normalizzare i bug e gli errori in quanto si tratta di una circostanza che accade a tutti: è solo una parte del processo. Puoi mostrare agli studenti il nostro Video sul debugging, che include diversi studenti che normalizzano gli errori e discutono delle strategie di debugging che gli studenti possono utilizzare. Inoltre, prendi in considerazione la possibilità di esporre la Guida per gli studenti al debugging a cui gli studenti possano fare riferimento in tutta l'unità e di avere Quaderni di reportistica per i bug a disposizione degli studenti.

Domanda da prendere in considerazione con il video:

• Come fa la pagina web a sapere quale foglio di stile dovrebbe usare?

Assicurati che tutti gli studenti capiscano come collegarsi al proprio foglio di stile da ogni pagina web.

Valutazione formativa: questo esercizio può essere utilizzato come valutazione formativa. Nell'esercizio viene fornita una tabella con i criteri di valutazione e agli studenti può essere fornito un riscontro scritto. Clicca qui per saperne di più su come fornire riscontri agli studenti.

Nota sui font e sulle famiglie di font

Affinché un browser web visualizzi un font, il font deve essere disponibile sul dispositivo su cui sta funzionando il browser web. Non c'è garanzia che ogni dispositivo abbia un particolare font, quindi è molto più sicuro usare le famiglie di font, che permettono molti font diversi che hanno lo stesso aspetto generale.

Se gli studenti vogliono specificare un font specifico, avranno bisogno di usare un font dal web, in modo che il browser possa scaricare quel font specifico da usare durante il rendering della pagina. Maggiori informazioni su questi font possono essere trovate su Google Fonts e W3Schools.

Ripasso: esamina brevemente il paradigma «Contenuto-Struttura-Stile» che si trova nell'area «Guida e suggerimenti» degli esercizi di Code Studio. Disegna un grafico a T sulla lavagna ed etichetta un lato HTML e un lato CSS. Chiedi agli studenti di lavorare in piccoli gruppi per pensare a quante più differenze possibili tra i due linguaggi e poi di riunirsi in gruppo per condividere il tutto.

Assicurati che gli studenti sappiano distinguere tra il modo in cui l'HTML indica la struttura di un documento e il modo in cui il CSS consente agli studenti di impostare gli stili, nonché le differenze nell'aspetto delle lingue sullo schermo e nel luogo in cui vengono utilizzate.

Domanda del giorno: come possiamo cambiare lo stile del testo su una pagina web?

Configurazione: chiedi agli studenti di creare una nuova pagina nei loro diari chiamata Proprietà CSS.

Diario o cartellone? proprio come per la pagina «Tag HTML» nei loro diari, puoi scegliere che la tua classe tenga traccia delle proprietà CSS in un cartellone di classe condiviso.

Forma i gruppi: crea gruppi formati da due a cinque studenti ciascuno: avrai bisogno di almeno un gruppo per ciascuna delle proprietà introdotte in questa lezione.

Jigsaw: assegna a ciascun gruppo una delle proprietà introdotte oggi. Ogni gruppo deve fornire una descrizione e un esempio per la propria proprietà.

Glossario delle parole chiave:

• CSS - Cascading Style Sheets; un linguaggio usato per descrivere come devono essere definiti gli elementi HTML
• CSS Selector - la parte di un set di regole CSS che definisce a quali elementi HTML lo stile deve essere applicato

Condivisione: chiedi ai gruppi di aggiungere le loro proprietà ai loro diari o al cartellone della classe «Proprietà CSS».