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 2

TUTORIAL HTML – Lezione 2

In questo tutorial vedremo come continuare l’attività di scrittura di una pagina web in HTML, trasformando i testi scritti nella lezione precedente in veri...

  by Weturtle Team
HTML

Tempo di lettura/visione: 4 min

Introduzione

In questo tutorial vedremo come continuare l’attività di scrittura di una pagina web in HTML, trasformando i testi scritti nella lezione precedente in veri ipertesti e ipermedia.
Abbiamo sperimentato quest’attività con ragazzi dai 9 ai 13 anni.

In particolare, ci concentreremo su:
  • Cosa sono ipertesti e ipermedia;
  • Come inserire link ad altre pagine web;
  • Come aggiungere elementi multimediali: immagini, audio e video;
Tecnologia utilizzata:
  • Linguaggio HTML;
  • Computer;
  • Notepad++ (scaricabile gratuitamente da questo link)

Ipertesti e link

Gli ipertesti sono testi che includono collegamenti ad altri contenuti (pagine web, siti esterni, documenti, etc), che diventano così immediatamente accessibili. L’elemento chiave dell’ipertesto è quindi il link. Esso è formato da due parti:
  • Il contenuto (la parte visibile, su cui clicchiamo);
  • La risorsa (il contenuto collegato).
Per inserire un link possiamo usare la sintassi seguente:

La risorsa può essere un’immagine, una pagina web, un documento (.doc o .pdf), un file (.zip o .exe). Può trovarsi nella memoria del pc che stiamo utilizzando, o su internet.
Nel primo caso, la soluzione più conveniente è inserire la risorsa nella stessa cartella dove abbiamo salvato il file html. Così facendo possiamo scrivere come percorso semplicemente il nome del file seguito dalla sua estensione (ad esempio immagine.png, pagina2.html, etc). L’unico inconveniente è che, così facendo, se vogliamo effettivamente rendere disponibile via internet il nostro sito in costruzione, dobbiamo ricordarci non solo di caricare il documento .html, ma anche tutte le risorse a esso collegate.
Se, invece, la risorsa che ci interessa è già stata pubblicata sul web, il suo percorso è l’indirizzo che compare nel browser quando ne visitiamo la pagina (vedi figura seguente).
Un esempio di codice è fornito nella figura sottostante:

Infine, è anche possibile associare ad un link un indirizzo e-mail, così che cliccando sul contenuto si apra un nuovo messaggio di posta elettronica verso il destinatario specificato da noi. La sintassi è la seguente:

Un esempio concreto è quello riportato qui sotto:

Ipermedia: immagini, video, musica

L’ipermedia è un ipertesto che integra la presenza di contenuti multimediali di varia natura (immagini, video, audio).
Per inserire un’immagine nella pagina possiamo usare il tag "img". La sua sintassi minima è la seguente:

Innanzitutto notiamo che questo tag non prevede una chiusura, perché è privo di contenuto.
In secondo luogo, il percorso dell’immagine è definito analogamente a quanto abbiamo visto per il link:
  • se presente nella memoria del computer, corrisponde al nome del file compreso di estensione;
  • se è disponibile online, è l’indirizzo al quale possiamo reperire l’immagine.

Un trucchetto piuttosto utile per accedere all’indirizzo di un’immagine che si trova all’interno di una pagina web, è quella di cliccarci con il tasto destro del mouse e selezionare il comando “Copia l’indirizzo dell’immagine”, come mostrato in figura 4. Poi sarà sufficiente incollarlo nella posizione desiderata.
Va tenuto presente che l’immagine, se non specificato diversamente usando altri tag (come "br" o "p"), verrà inserita in linea con il testo. Di seguito si può vedere un esempio concreto:
 

Se, invece, vogliamo inserire un file audio in una pagina html il nostro tag di riferimento è "audio". Se desideriamo una musica di sottofondo per il sito la sintassi minima è la seguente:

Il percorso del file audio, analogamente a quanto visto in precedenza, può essere locale o un indirizzo internet. Possiamo anche integrare al tag alcuni attributi, ovvero parole chiave che specificano funzioni aggiuntive. Per esempio, se aggiungiamo la parola “controls” come mostrato sotto, verrà visualizzato un piccolo player audio che permetterà agli utenti di modificare il volume o di mettere in pausa l’audio che abbiamo scelto.

Altri attributi utili sono “autoplay”, che fa partire la musica automaticamente non appena la pagina web viene caricata, e “loop”, che fa ripartire l’audio automaticamente non appena la riproduzione viene completata.

Infine, per inserire un file video, il tag da usare è "video", che è definito analogamente ad "audio". Infatti la sua sintassi minima è:

Cui si possono aggiungere i medesimi attributi visti in precedenza.
Di particolare utilità è racchiudere controls, così da permettere ai visitatori del nostro sito di gestire la riproduzione del video come meglio credono. Inoltre è piuttosto comune voler modificare le dimensioni del player video, perché potrebbe non adattarsi bene al layout della pagina che avevamo in mente.
In tal caso è sufficiente inserire o l’attributo width (che definisce la larghezza) o l’attributo height (che ne definisce l’altezza): una volta stabilita una delle due dimensioni, l’altra verrà calcolata dal computer in modo da evitare distorsioni. Un esempio di sintassi di questo tipo è riportato di seguito:

Le dimensioni vengono sempre definite in pixel. Per esempio, se volessimo un lettore video largo 200 pixel, dovremmo usare un codice come quello riportato di seguito:

Infine, se vogliamo aggiungere alla nostra pagina web un video pubblicato su Youtube, il codice da usare per l’incorporazione è differente. Innanzitutto, una volta individuato il video che ci interessa, dobbiamo cliccare su condividi (vedi l'immagine sotto).
Si aprirà un menu da cui possiamo scegliere il comando “Incorpora”. Da qui si aprirà un nuovo menu (vedi l'immagine sottostante), che ci permetterà di decidere anche da dove far partire il video e altre opzioni di incorporamento. Una volta impostato nella maniera più opportuna, dovremo copiare e incollare le linee di codice che si trovano all’inizio.

Vuoi leggere il tutorial quando vuoi, anche offline?





Vuoi fare una domanda all'autore?

oppure


GLI ALTRI UTENTI HANNO CHIESTO