Introduzione all'HTML e ai fogli di stile per pagine Web statiche di Anna Franciscono



DESTINATARI E PREREQUISITI

L'unita' didattica e' rivolta a chiunque abbia interesse o necessita' di organizzare materiale su ipertesti e non abbia alcuna conoscenza di queste tematiche.
Sapere come si puo' organizzare concretamente materiale ipertestuale e' molto utile anche quando si utilizzano strumenti di composizione automatica poiche' spesso e' opportuno agire direttamente sul codice HTML per apportare piccoli aggiustamenti. Il percorso qui proposto e' indicato per studenti della scuola secondaria inferiore o del biennio della scuola secondaria superiore, ma potrebbe risultare interessante anche ad insegnanti non specializzati in campo informatico.

Non si richiedono a priori conoscenze specifiche nel campo della programmazione, ma solo di possedere conoscenze e abilita' di base nell'utilizzo di un computer:
  • Saper utilizzare il file manager
  • Saper utilizzare un editor di testo
  • Saper utilizzare un browser
OBIETTIVI

Al termine dell'unita' didattica lo studente dovrebbe essere in grado di analizzare e comprendere e modificare il codice di una pagina web statica, nonche' di costruire un proprio lavoro originale.
In particolare:

Conoscenze:
  • Principi per la progettazione di un sito in modalita' bottom up
  • Il linguaggio HTML: la struttura di una pagina, le regole sintattiche di base, le istruzioni fondamentali per la definizione di testo (titoli, paragrafo), immagini e collegamenti ipertestuali.
  • Il linguaggio CSS: conoscere la struttura di una pagina CSS, le regole sintattiche fondamentali, sapere come collegare la pagina di stile al foglio HTML, saper definire le caratteristiche grafiche essenziali degli elementi: colore, sfondo, caratteristiche delÚ carattere, dimensioni degli oggetti, margini, bordi.
  • Il layout: che cosa e' il layout, quali tipi di layout si possono realizzare con i fogli stile, come si modificano le pagine HTML e il foglio di stile per realizzare la disposizione grafica desiderata
Abilita':
  • Saper ricostruire autonomamente un esempio di ipertesto costituito da pagina HTML e foglio di stile, dato il materiale
  • Modificare il contenuto di una pagina HTML, cambiando il tipo di definizione dei suoi elementi (testo,immagini, collegamenti) oppure aggiungendone di nuovi.
  • Modificare l'aspetto di una pagina HTML cambiando le regole contenute nel foglio di stile associato o aggiungendo regole nuove.
  • Modificare la disposizione degli elementi di una pagina HTML cambiando le regole contenute nel foglio di stile.
  • Costruire un semplice ipertesto originale partendo dai contenuti, organizzandoli in una pagina HTMl e definendole la disposizione e le caratteristiche grafiche essenziali attraverso un foglio di stile.
Competenze:
  • Saper individuare su un manuale HTML gli elementi noti, comprendere autonomamente le caratteristiche non trattate esplicitamente nel percorso ed utilizzarle.
  • Saper individuare su un manuale CSS gli elementi noti, comprendere elementi o caratteristiche di elementi non trattate esplicitamente nel percorso ed utilizzarle.
  • Progettare una disposizione grafica della pagina originale
TEMPI E SUGGERIMENTI PER ATTIVITA' IN AULA E IN LABORATORIO:

Il percorso didattico qui proposto richiede la possibilita' da parte degli allievi di poter lavorare su un calcolatore. L'accesso a internet non e' indispensabile, ma auspicabile in quanto consente di accedere alla manualistica.
L'intervento didattico puo' essere seguito in modo completamente autonomo da parte degli allievi, anche se e' indispensabile la supervisione da parte dell'insegnante. La sua caratteristica di alternanza tra momenti di spiegazione e momenti di lavoro concreto sul calcolatore sono stati pensati con lo scopo di rendere piu' piacevole l'utilizzo ed efficace l'apprendimento.
Questa struttura alternata di teoria e pratica puo' essere sfruttata per suddividere il percorso in momenti di lezione frontale, eventualmente in aula, e momenti di esercizio autonomo in laboratorio.

La durata del percorso potrebbe essere di 7 lezioni:
- la prima introduttiva e di raccolta del materiale [1 ora]
- la seconda e la terza finalizzata ad organizzare il materiale con il linguaggio HTML. Si puo' decidere se affrontare la teoria prima di iniziare il lavoro, oppure di usare la spiegazione teorica per risolvere i problemi che si presentano [3 o 4 ore]
- la quarta e la quinta dedicate a implementazione e spiegazione teorica del linguaggio CSS [3 o 4 ore]
- la sesta e la settima dedicate a implementazione e spiegazione teorica del layout [3 o 4 ore]

Si consiglia di non affrontare una parte nuova se non si e' raggiunto un risultato pratico soddisfacente su quella in corso.

Al termine del percorso sarebbe opportuno dedicare spazio ad analizzare il processo di costruzione dell'ipertesto, in modo da consolidare il metodo di progettazione seguito.

POSSIBILI ESERCIZI APPLICATIVI

Il primo esercizio e' costituito dall'esempio che viene portato avanti insieme alla trattazione teorica.
A termine del percorso didattico si puo' chiedere agli allievi di svolgere un lavoro analogo con contenuti diversi, forniti dal docente oppure proposti dagli allievi.
Anche la definizione delle caratteristiche in termini di grafica e layout puo' essere stabilita dal docente o lasciata alla creativita' dell'allievo.

MODALITA' DI VALUTAZIONE

La valutazione delle abilita' e competenze acquisite puo' essere effettuata sulla o sulle esercitazioni svolte in modo autonomo dagli allievi al termine del percorso.
Si consiglia di pretendere la stesura di una documentazione che tenga traccia delle scelte progettuali (e della loro motivazione) seguite durante lo svolgimento del lavoro.
Questo aiuta l'allievo a riflettere e prendere coscienza dei processi.

Per quanto riguarda invece la valutazione delle conoscenze eseguirei una verifica scritta. Al suo interno proporrei:
- domande aperte su problematiche di progettazione per verificare che l'allievo abbia acquisito una visione solida globale di come si procede per realizzare un ipertesto
- domande piu' strutturate in cui si chiede di risolvere uno specifico problema utilizzando codice HTML o CSS, per valutare il livello di dettaglio delle conoscenze acquisite.
 
  1. Introduzione
  2. Un approccio informale
  3. FASE 1- Raccogliamo il contenuto della pagina: testo e immagini
  4. FASE 2- Individuiamo i diversi elementi del testo e organizziamoli come elementi html
  5. HTML - Formalizziamo
  6. FASE 3- Descriviamo ciascun elemento html con un impostazione grafica nel foglio di stile
  7. CSS - Formalizziamo
  8. FASE 4- Organizziamo il contenuto della pagina con un layout
Elenco percorsi                                                                                  Edita
Edurete.org Roberto Trinchero