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

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 /).

Registrati a WeTurtle per accedere ai vantaggi, è gratis!

La community di docenti e educatori ti offre:

Il corso gratuito "Collaborare a scuola con il digitale"

Un'area personalizzata con i tuoi contenuti preferiti

Una lezione di prova gratuita per ogni corso online

Dirette ed eventi dedicati agli utenti iscritti

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.

Scopri i servizi di Weturtle

per il PIANO SCUOLA 4.0 del PNRR


Ottieni uno spazio di apprendimento con contenuti didattici per docenti e studenti, dove facilitare lo scambio e favorire la comunità di pratica e dove tenere sotto controllo i progressi della classe e dei docenti.

Vuoi leggere il tutorial quando vuoi, anche offline?





POTREBBE INTERESSARTI ANCHE

TUTORIAL - COSTRUIRE UN GIOCO A QUIZ CON APP INVENTOR (pt. 2)

FREE

Tempo: 6 min

TUTORIAL
   Luca Balestra
TUTORIAL HTML – Lezione 3

FREE

Tempo: 4 min

TUTORIAL
   Weturtle Team
TUTORIAL - COSTRUIRE UN GIOCO A QUIZ CON APP INVENTOR (pt. 3)

FREE

Tempo: 4 min

TUTORIAL
   Luca Balestra
TUTORIAL - LA PALLA 8 MAGICA CON APP INVENTOR

FREE

Tempo: 4 min

TUTORIAL
   Luca Balestra
TUTORIAL HTML – Lezione 2

FREE

Tempo: 4 min

TUTORIAL
   Weturtle Team

Vuoi fare una domanda all'autore?

oppure


GLI ALTRI UTENTI HANNO CHIESTO

Chat Icon

Wetruvio

Ciao! Sono Wetruvio, il tuo assistente virtuale!