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

  by Weturtle Team
HTML

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?





Hai letto la lezione? Che cosa ne pensi? Lascia un commento qui sotto!