LEZIONI E FORMAZIONE DAI DOCENTI PER I DOCENTI

Scopri WeTurtle, la community di educatori dove trovare e condividere risorse innovative

home - tutorial - TUTORIAL HTML – Lezione 1

TUTORIAL HTML – Lezione 1

In questo tutorial vedremo come introdurre ai ragazzi l’utilizzo del linguaggio HTML per creare una pagina web. Abbiamo sperimentato quest’attività con ragazzi dai 9 ai 13 anni.

In particolare, ci concentreremo su:
  • Come sono strutturati i tag HTML;
  • Come...

Weturtle Team   by Weturtle Team
HTML

Tempo di lettura tutorialTempo di lettura/visione: 3 min

lezione free corso Creare app con App Inventor 2 - ID SOFIA: 48653

Abbiamo un regalo per te!

Ti interessa l'argomento Coding?


Fai il login e guarda GRATUITAMENTE la prima lezione del corso Creare app con App Inventor 2 - ID SOFIA: 48653

Introduzione

In questo tutorial vedremo come introdurre ai ragazzi l’utilizzo del linguaggio HTML per creare una pagina web. Abbiamo sperimentato quest’attività con ragazzi dai 9 ai 13 anni.

In particolare, ci concentreremo su:
  • Come sono strutturati i tag HTML;
  • Come scrivere un documento HTML e visualizzare la pagina web su un browser;
  • Come formattare il testo (titoli, corsivo, grassetto, etc.).
Tecnologia utilizzata:
  • Linguaggio HTML;
  • Computer;
  • Notepad++ (scaricabile gratuitamente a questo link)

Introduzione all’HTML

L’HTML (HyperText Markup Language) è un linguaggio di contrassegno che descrive come disporre gli elementi di una pagina e in che modo farli apparire. Le indicazioni vengono date attraverso delle etichette (o tag). Il modo in cui si usano le etichette è riportato in figura 1: un elemento HTML è formato da tag di apertura, il contenuto su cui si vuole agire, e tag di chiusura (che differisce dal primo per la presenza del simbolo /).
L’HTML non è un vero e proprio linguaggio di programmazione perché non include condizioni (se… allora…) né cicli (ripeti). Per approfondire l’argomento, si consiglia di consultare l'approfondimento al seguente link.

Come scrivere un documento HTML con Notepad++

Per iniziare a lavorare in HTML sono necessari:
  • Un browser (Google Chrome, Firefox, Microsoft Edge, etc);
  • Un editor di testo: si consiglia Notepad++ piuttosto che Blocco Note.
La prima cosa da fare una volta avviato il programma è impostarlo per lavorare in HTML selezionando dal menu in alto la voce “Linguaggio”, poi “H”, e infine “HTML” (vedi figura 2).
Così facendo, il programma ci aiuterà a scrivere correttamente il codice evidenziando i nostri errori. Di seguito possiamo vedere la differenza tra tag ben scritti (righe 1 e 6); tag scritti male (riga 2); e tag chiusi male (righe 3 e 4).



Inoltre, durante la scrittura, Notepad++ ci aiuta a evitare errori di battitura suggerendo i tag tramite un menu a tendina (figura 3).
Infine, visualizzare la pagina web che stiamo scrivendo è particolarmente semplice: basta cliccare “Esegui” dal menu in alto, per poi selezionare il browser che vogliamo utilizzare (figura 4).

Scrivere un contenuto e formattare il testo in HTML

Questa attività è volta principalmente a far familiarizzare i ragazzi con il linguaggio HTML. Si parte osservando insieme una struttura minimale di una pagina HTML:
  • Il tag "html" racchiude l’intera pagina;
  • Il tag "head" contiene informazioni per la gestione della pagina;
  • Il tag "title" definisce il titolo della pagina, che comparirà anche nei motori di ricerca;
  • Il tag "body" include il contenuto vero e proprio della pagina web.
La maggior parte dell’attività riguarda la sperimentazione libera dei ragazzi nell’introduzione di contenuti testuali, compresi di formattazione. Poiché i tag utilizzabili sarebbero troppo numerosi da spiegare e/o da ricordare a memoria, può essere utile fornire ai ragazzi un breve glossario che contenga quelli più comuni (ve ne proponiamo uno a questo link).
Inoltre, per permettere loro di cambiare colore al testo scritto, è necessario che abbiano accesso a una tabella che converta i colori che desiderano nel nome corretto (in inglese) oppure in codice esadecimale. In rete si possono trovare diversi strumenti, come:
Se i ragazzi, spinti dalla curiosità, volessero utilizzare tag non riportati nel glossario, possono chiedere all’insegnante o possono tentare di interpretare il codice sorgente di pagine web che conoscono. Ricavare il codice sorgente è piuttosto semplice: in Google Chrome è sufficiente cliccare con il tasto destro su un’area libera della pagina web e selezionare la voce “Visualizza sorgente pagina” dal menu a tendina, come mostrato in figura 5.
Alla fine della lezione è importante che i ragazzi controllino di aver salvato il loro lavoro, così che nella successiva possano continuare la loro pagina web.

Vuoi leggere il tutorial quando vuoi, anche offline?





ALTRI CONTENUTI DI WETURTLE

SCRIVERE FUMETTI CON APP E MATTONCINI COLORATI

FREE

Tempo: 3 min

PROGETTO
   Paola Mattioli
DIDATTICA A DISTANZA: creare quiz con Kahoot

FREE

Tempo: 19 min

TUTORIAL
   Mariano Pierantozzi
Classificazione ed esempi di Robotica Educativa nelle...

FREE

Tempo: 9 min

PUBBLICAZIONE
   Lorenzo Cesaretti
Analisi di attività di Robotica Educativa usando un...

FREE

Tempo: 1 min

BLOG
   Lorenzo Cesaretti
Rethink Loreto: we build our Smart City!

FREE

Tempo: 20 min

PROGETTO
   Lorenzo Cesaretti

Vuoi fare una domanda all'autore?

oppure


GLI ALTRI UTENTI HANNO CHIESTO