Lezione

5. Teoria HTML

Dopo aver creato il nostro primo server abbiamo un ambiente completo che ci permette un po' di sperimentazione e di apprendimento.

Nel capitolo precedente abbiamo imparato a migliorare la configurazione di PHP, a gestire la granulosità che offre e ad accelerarlo notevolmente.

Passiamo ora a scoprire cos’è l’HTML e a imparare qualche tag della sua sintassi. Scopriremo anche i CSS e capiremo a cosa servono. Dedicheremo un capitoletto alle immagini, uno ai video e uno all’audio. Infine dedichiamo un capitoletto anche ai JavaScript.

Il tutto non con l’obiettivo di imparare e padroneggiare queste tecnologie, ma di imparare cosa sono, come funzionano e di possedere quell’alfabeto base utile e necessario in ogni situazione ai webmaster e a chi aspira acquisire skill equivalenti.

Prima di procedere si tenga presente che tutto quello che verrà esposto è riproducibile tramite l’uso di un editori di testi semplici (indichiamo Sublime Text https://www.sublimetext.com ) ed un web browser (indichiamo l’uso di FireFox https://www.mozilla.org/it/firefox per le funzioni di analisi che offre).

I file html li possiamo provare o pubblicandoli sul web-server creato nel manuale 1 oppure mettendoli in una cartella locale e aprendoli con il web browser.

5.1. HTML

L’HTML è un linguaggio estremamente diffuso, standardizzato, stabile e presente in tantissime tecnologie, compresi i dispositivi di domotica.

In pratica server per codificare una qualsiasi pagina che abbia testo, immagini, bottoni, audio, video, ecc… in un formato intermedio che permetta a qualsiasi dispositivo di riassemblare tutto per renderlo leggibile e fruibile al destinatario indipendentemente dal dispositivo che sta usando. Con questa premessa la pagina esempio.html potrà essere ricomposta e accessibile sia che abbiamo un computer, un tablet, uno smartphone, una smart TV, lo schermino della domotica, il cruscotto OLED dell’auto, ecc…

HTML sta per “HyperText Markup Language”. Nasce ufficialmente nel 1991 con l’obiettivo di offrire uno strumento semplice per creare testi corredati da immagini e grafici con le classiche formattazioni base (corsivo, sottolineato, grassetto, ecc…).

Per raggiungere l’obiettivo il creatore si basò su una tecnica ben nota tra i programmatori: marcare, tramite un tag, i paragrafi o i caratteri.

Facendo un esempio elementare il codice

</h1>Titolo</h1>
<p>Testo in <b>grassetto</b>, <i>corsivo</i>, <u>sottolineato</u>.</p>
<p>Esempio HTML.</p>

letto da un web browser diventa come segue

Figura 1: Esempio

In questo caso il significato dei tag è piuttosto evidente:

<h1> : titolo di primo livello;
<p> : paragrafo;
<b> : grassetto;
<i> : corsivo;
<u> : sottolineato.

Quando l’HTML fu inventato si provvide ad un set limitato di tag che provvedevano a tutte le formattazioni standard per i testi. Progressivamente il set è stato esteso per soddisfare alle nuove esigente che, passo dopo passo, emergevano. Attualmente l’HTML è alla versione 5 e incorpora, tra le cose più interessanti, la riproduzione dell’audio, del video e animazioni di base.

Ogni tag ha un comportamento e un aspetto grafico predefinito, ma modificabile tramite i CSS che vedremo dopo. Se non vogliamo pagine elaborate abbiamo già tutto senza dover aggiungere nulla.

I tag che vale la pena conoscere sono i seguenti:

 : commento. Tutto quello compreso tra  viene ignorato;
<a> : hyperlink. Renda una parola, una frase o un oggetto un link;
<audio> : inserisce un oggetto audio con tanto di controlli per il play;
<b> : mette il testo in grassetto;
<br> : interruzione di riga. Introduce un ritorno a capo senza terminare il paragrafo;
<button> : inserisce un bottone;
<del> : testo barrato;
<em> : testo enfatizzato (corsivo);
<h1><h2><h3><h4><h5><h6> : titolo di livello 1, 2, 3, 4, 5, 6;
<hr> : linea di separazione orizzontale;
<i> : testo in corsivo;
<img> : inserisce un’immagine;
<ins> : testo evidenziato come nuovo (sottolineato);
<li> : voce di un elenco. Vedere <ul> e <ol> ;
<mark> : testo evidenziato in giallo;
<ol> : elenco numerato. Ogni elemento è compreso tra i tag <li> e </li> ;
<p> : paragrafo di testo;
<pre> : paragrafo preformattato;
<small> : testo piccolo:
<strong> : testo in grassetto;
<sub> : carattere o testo in pedice;
<sup> carattere o testo in apice;
<video> : inserisce un oggetto video con tanto di controlli per il play;
<ul> : elenco puntato. Ogni elemento è compreso tra i tag <li> e </li> .

Per un completo e corretto codice HTML dobbiamo incapsulare il testo con i tag tra un blocco dichiarativo di apertura e uno di chiusura:

<!DOCTYPE html>
<html>
<body>

codice HTML

</body>
</html>

quindi il codice esempio creato all’inizio per essere completo deve essere come segue:

<!DOCTYPE html>
<html>
<body>

<h1>Titolo</h1>
<p>Testo in <b>grassetto</b>, <i>corsivo</i>, <u>sottolineato</u>.</p>
<p>Esempio HTML.</p>

</body>
</html>

A questo punto possiamo passare a sperimentare l’uso diretto dell’HTML:

con Sublime Text creiamo il file esercizio.html ;
popoliamo il file con del codice HTML ;
mettiamo il file nel web-server o in una cartella locale;
accediamo al file con il web-browser.

Per spiegazioni, completamenti, esempi e test online suggeriamo di usare l’ottima piattaforma W3schools - HTML Tutorial ( https://www.w3schools.com/html/default.asp ).

Un’attività che suggeriamo con forza per capire come funziona l’HTML e come vengono realizzate alcune pagine è di spiare il codice della pagina. Quindi, quando siamo sulla pagina web che ci interessa e la stiamo osservando tramite FireFox premiamo da tastiera la combinazione CTRL+U oppure “Menu → Altri strumenti → Sorgente pagina”.

5.2. CSS

Nel capitoletto precedente abbiamo visto come, tramite pochi tag HTML, possiamo efficacemente creare una pagina formattata.

Però se volessimo che il titolo di livello 1 (tag <h1> ) fosse rosso invece che nero non è possibile con l’HTML base.

Però possiamo modificare lo stile del titolo tramite i CSS per ottenere che i titoli di primo livello diventino rossi.

I CSS, acronimo di Cascading Style Sheets, è lo strumento con cui possiamo modificare le impostazioni di default degli stili predefiniti e crearne di nuovi.

I CSS sono strumenti molto potenti, ma di conseguenza hanno anche una grande complessità.

Pertanto qui riportiamo una panoramica con un esempio pratico. Per un auto-apprendimento rimandiamo all’ottima risorsa W3schools CSS Tutorial ( https://www.w3schools.com/css )

5.2.1. CSS e SCSS

Iniziamo con un altro contributo teorico. Se usiamo i CMS molto rapidamente incontreremo gli SCSS gestendo i template e le impostazioni estetiche.

Gli SCSS (Sassy Cascading Style Sheets, o Sassy CSS) sono un superset di CSS: contengono tutte le funzionalità di un CSS, ma sono ampliati per includere tutte le funzionalità. Normalmente sono file grandi.

Per accelerare l’accesso alle pagine normalmente vengono ottimizzati e compressi.

Per aumentare la flessibilità e il riuso esistono librerie pronte all’uso. Nel caso di template le troviamo all’interno del pacchetto in codice sorgente e vengono ottimizzati e compressi quando confermiamo il settaggio del template.

Molti template, inoltre, offrono pagine dove è possibile modificare sia gli SCSS, sia i CSS.

5.2.2. Inserire i CSS in una pagina HTML

Abbiamo due possibilità per inserire un CSS in una pagina HTML:

possiamo inserire direttamente il codice nella testa del file HTML;
oppure possiamo creare un file esterno e mettere un link auto-caricante nella testa del file HTML.

Precedentemente abbiamo parlato dell’incapsulamento del codice HTML all’interno di una dichiarazione di inizio file e una di fine file.

In realtà, in una corretta pagina HTML ha un’ampia sezione di testa, normalmente invisibile, dove troviamo meta informazioni, il caricamento dei javascript, di file CSS, ecc…

normalmente i file CSS sono esterni al file HTML. In questo mo possiamo condividere il CSS con tutte le pagine HTML del sito rendendole esteticamente omogenee,

qui vediamo come alterare il CSS del titolo di primo livello per renderlo rosso:

tramite Sublime Text creiamo il file esercizio02.html ;
popoliamo con il seguente codice

<!DOCTYPE html>
<head>
<style>
h1 {
  color: red;
  text-align: center;
}
</style>
</head>
<html>
<body>

<h1>Titolo</h1>
<p>Testo in <b>grassetto</b>, <i>corsivo</i>, <u>sottolineato</u>.</p>
<p>Esempio HTML.</p>

</body>
</html>

dopo averlo salvato apriamolo con un web-browser;
vedremo qualcosa di uguale o molto simile all’immagine qui di seguito

Figura 2: Esempio 2

5.2.3. Creare custom.css

Come detto sopra non è conveniente inserire il codice CSS dentro la pagine HTML. È preferibile creare un file esterno e le pagine html nell’header riportano un link autocaricante;

con Sublime Text creiamo il file custom.css e salviamolo nella stessa directory dove si trova il file esercizio02.html ;
inseriamo il seguente codice in custom.css

h1 {
  color: red;
  text-align: center;
}

creiamo il file esercizio03.html nella stessa directory dove si trovano esercizio02.html e custom.css ;
inseriamo il seguente codice

<!DOCTYPE html>
<head>
<link rel="stylesheet" href="./custom.css">
</head>
<html>
<body>

<h1>Titolo</h1>
<p>Testo in <b>grassetto</b>, <i>corsivo</i>, <u>sottolineato</u>.</p>
<p>Esempio HTML.</p>
<a href="./esercizio02.html">Link a <code>esercizio01.html</code></a>

</body>
</html>

apriamo il file esercizio03.html con il nostro web browser.

5.2.4. Test del file CSS

Facciamo un piccolo passo di avanzamento ulteriore. Vogliamo cambiare colore e allineamento del titolo senza modificare il file HTML:

apriamo il file custom.css con Sublime Text;
aggiorniamo il file come segue

h1 {
  color: blue;
  text-align: right;
}

ricarichiamo dal nostro web browser il file esercizio03.html ;
vedremo qualcosa di uguale o molto simile all’immagine qui di seguito

Figura 3: Esempio 3

5.3. Immagini

L’argomento immagini comporta un po’ di teoria di grafica.

Iniziamo dai concetti di DPI e PPI, poi vediamo la questione delle dimensioni in PX e, in fine, il tema dei formati. Quindi vediamo come inserire l’immagine nel nostro file esercizio04.html .

5.3.1. DPI e PPI

Il DPI (Dots Per Inch) indica la qualità di un’immagine stampata indicando quanti punti di inchiostro sono presenti sulla carta per pollice.

Il PPI (Pixel Per Inch) indica il numero di pixel (punti luminosi) per pollice che creano l’immagine e, ovviamente, si riferisce ai monitor.

Mentre per la carta è possibile aumentare il numero di punti di inchiostro presenti per pollice (basta fare punti di inchiostro più piccoli), con i monitor i pixel sono fissi. Se il costruttore ha messo 100 pixel per pollice non possiamo in nessun modo aumentarne il numero. Questa differenza intrinseca nei supporti (carta e monitor) portano a dover gestire in modo diverse le immagini:

se vanno su stampa le misuriamo in DPI. Possiamo aumentarli a patto di avere una stampante sufficientemente precisa;
se vanno su monitor (cellulare, schermo computer, schermo TV, ecc…) le misuriamo in PPI per lo schermo ha 100 PPI e se l’immagine ha una qualità superiore, tutti i pixel che eccedono vengono buttati.

In merito ai monitor, malgrado le tecnologia stiano cambiando, di fatto vengono visualizzati ancora 72 pixel per pollice. Aggiungiamo la considerazione che nel web è importante tenere piccole le dimensioni degli oggetti. Se aggiungiamo che pixel maggiori significa file più grandi il risultato diventa matematico: nel web le immagini si misurano in PPI, le qualità è a 72 PPI e vanno tagliate alla dimensione con cui vengono visualizzate nella pagina web.

Aggiungiamo un ultimo dettaglio: diversi motori per siti web (come i CMS, i blog system, ecc…) tagliano e ridimensionano automaticamente le immagini quando vengono caricate alleggerendo il lavoro del web editor.

5.3.2. PX

Se la qualità delle immagini digitali si misura in DPI, per la stampa, e in PPI per l’uso su monitor, la dimensione (altezza e larghezza) si misura in centimetri (o millimetri, o pollici, o...) per la stampa, e solo in pixel per la visualizzazione su monitor.

Per la carta da molti anni esistono precisi standard di dimensione, per i monitor è un po’ più complicata la situazione e ancora fluida. Inoltre se per i monitor degli smartphone si guarda alla dimensione altezza e larghezza espressa in pixel, per i monitor e le televisioni si indica la diagonale in pollici, mentre per conoscere la dimensione dobbiamo scoprire se è un monitor standard, HD, full HD, 4K, ecc….

Senza andare oltre crediamo che sia evidente che ci sono molte variabili e poche costanti. Pertanto possiamo trovare un riferimento d’oro nei seguenti criteri:

tagliare le immagini alla misura in pixel che devono essere viste;
per o cellulari prendiamo il taglio più diffuso e tagliamo le immagini mai oltre alla dimensione del cellulare;
per i tablet applichiamo lo stesso criterio (quindi ci serve una seconda immagine);
per i monitor applichiamo lo stesso criterio (quindi ci serve una terza immagine).

Anche in questo caso molti motori di siti provvedono ad un taglio e ridimensionamento automatico. Tramite la tecnologia adaptive dei template riconoscono il monitor e procedono ad un ridimensionamento automatico oltre alla ricombinazione degli oggetti che compongono la pagina.

5.3.3. JPG, PNG, WEBP, AVIF, SVG

Altro argomento da conoscere è il formato delle immagini. Il cambio di formato non è un semplice cambio di estensione del file, ma significa un cambio degli algoritmi con cui vengono codificate e decodificate. Esistono molti modi di codificare le immagini, ma sostanzialmente, se vogliamo file di piccole dimensioni dobbiamo per forza ridurre l’informazione contenuta nell’immagine facendo decadere la qualità dell’immagine stessa. Non è raro vedere, magari alla TV, immagini sgranate con evidenti quadrati. Di solito si codifica questo effetto come “effetto pixel”. Si tratta del risultato matematico della riduzione dell’informazione contenuta nell’immagina che togli particolari seguendo una progressione matematica. Quando l’immagine è piccola l’occhio non coglie le mancanze, quando l’immagine diventa grande si vedono le pixelature e i salti cromatici nelle sfumature.

Illustrato questo elemento teorico aggiungiamo che i file delle immagini devono essere il più piccole possibili.

Quanto sopra restringe il campo a pochi formati compliant:

JPG, PNG, WEBP, AVIF: si tratta di formati bitmap (ovvero fotografici);
PNG: è l’unico che formato che non prevede la perdita di informazione. Inoltre supporta la trasparenza a scapito, spesso, di file più grandi;
JPG, WEBP, AVIF: nati per minimizzare le dimensioni dei file sono tutti costruiti su algoritmi a perdita d’informazione, ma usano algoritmi di diversa generazione con risultati qualitativi diversi;
SVG: è l’unico formato vettoriale. Oltre a permettere il salvataggio di disegni permette di introdurre anche animazione. Generalmente produce file di piccole dimensioni, ma possono rallentare i browser se composti da molti elementi vanificando le piccole dimensioni.

In conclusione usiamo solo questi formati. JPG va sempre bene. SVG è ideale per disegni e piccole animazioni. Per il migliore compromesso qualità-dimensione file AVIF; ricordiamoci però che molti schermi hanno rese cromatiche e qualitative scadenti.

5.3.4. Inserire un’immagine in una pagina

Finalmente arriviamo alla parte pratica e vediamo come inserire un’immagine nel nel file HTML. Prepariamoci con:

creiamo un copia del file esercizio04.html con nome esercizio05.html ;
nella directory dove si trova il file esercizio05.html mettiamo le immagini esercizio05.jpg, esercizio05.avif, esercizio05.png, esercizio05.webp ed esercizio05.svg scaricabili da

https://www.digitaldsb.it/moodle/course/section.php?id=45 ;
con Sublime Text apriamo il nostro file esercizio05.html .

Il tag che permette l’inserimento delle immagini è <img> .

A differenza di quasi tutti gli altri tag in questo dobbiamo sempre mettere un’informazione aggiuntiva di commento, ovvero l’argomento “alt”. Il motivo non è strettamente tecnico, ma di accessibilità. Immaginiamo la situazione di un ipovedente che accede ad una pagina web e si fa assistere da un software i lettura dello schermo. Se l’immagine non è corredata di un commento o una didascalia, il programma potrà solo dire che c’è un’immagine.

La stessa logica la dobbiamo applicare anche ai motori di ricerca. Essi, infatti, non capiscono ancora le immagini (anche se l’AI è molto migliorata) e si affidano ai commenti che accompagnano le immagini. Inoltre, se le immagini hanno questi commenti descrittivi, i motori di ricerca danno un credito maggiore ai siti e alle pagine rendendole più facilmente reperibili.

Finita questa introduzione aggiorniamo il codice html del file esercizio05.html come segue:

<!DOCTYPE html>
<head>
<link rel="stylesheet" href="./custom.css">
</head>
<html>
<body>

<h1>Titolo</h1>
<p>Testo in <b>grassetto</b>, <i>corsivo</i>, <u>sottolineato</u>.</p>
<p>Esempio HTML.
<a href="./esercizio02.html">Link a <code>esercizio01.html</code></a></p>
<hr>
<h1>Gallery immagini</h1>
<p><img src="./esercizio05.jpg" alt="Immagine esercizio JPG"><br>
Didascalia: Immagine esercizio JPG</p>

<p><img src="./esercizio05.avif" alt="Immagine esercizio AVIF"><br>
Didascalia: Immagine esercizio AVIF</p>

<p><img src="./esercizio05.png" alt="Immagine esercizio PNG"><br>
Didascalia: Immagine esercizio PNG</p>

<p><img src="./esercizio05.webp" alt="Immagine esercizio WEBP"><br>
Didascalia: Immagine esercizio WEBP</p>

<p><img src="./esercizio05.svg" alt="Immagine esercizio SVG"><br>
Didascalia: Immagine esercizio SVG</p>

</body>
</html>

ricarichiamo dal nostro web browser il file esercizio05.html ;
vedremo qualcosa di uguale o molto simile all’immagine qui di seguito

Figura 4: Esempio 5

5.4. Video

Per gli oggetti video valgono i principi teorici riportati per le immagini.

Dobbiamo aggiungere il concetto di bitrate, ovvero la quantità di dati che devono costantemente arrivare al client per poter visualizzare il video. Normalmente è il video editor che imposta tutto. Pertanto ci basta conoscere il principio.

Altro elemento che dobbiamo conoscere: il server web deve avere molta banda. Più sono gli utenti che guardano contemporaneamente il nostro video, maggiore deve essere la banda disponibile. Motivo per cui molti usano YouTube e altre piattaforme di streaming.

Un’ulteriore complicazione deriva dalle tracce audio. Anche questo elemento occupa (molto) spazio e se in streaming c’è il bitrate da garantire. Esistono diversi standard di codifica. Nel caso del file video tutto questo è invisibile, ma all’interno del nostro file video c’è un vero e proprio file nascosto che contiene tutto l’audio. Per ora non entro nel merito e ci fermiamo alla sola conoscenza del principio.

Infine è opportuno avere chiaro che i file video sono file grandi sempre.

Per i formati è in corso un’evoluzione tecnologica. Pertanto al momento, senza entrare nella discussione, teniamo come riferimento l’uso dei soli formati MP4 ed WMV.

Detto tutto ciò l’HTML 5 (quello che usiamo tutti da qualche anno) incorpora le funzioni per lo streaming ed il controllo della riproduzione degli stessi.

Procediamo a stendere un paio di righe HTML per includere un mini filmato nella nostra pagina prima delle immagini. Prepariamoci con:

creiamo un copia del file esercizio05.html con nome esercizio06.html ;
nella directory dove si trova il file esercizio06.html mettiamo il video esercizio06.mp4 scaricabili da

https://www.digitaldsb.it/moodle/course/section.php?id=45 ;
con Sublime Text apriamo il nostro file esercizio06.html .

Il tag che permette l’inserimento delle immagini è <video> :

aggiorniamo il codice html del file esercizio06.html come segue:

<!DOCTYPE html>
<head>
<link rel="stylesheet" href="./custom.css">
</head>
<html>
<body>

<h1>Titolo</h1>
<p>Testo in <b>grassetto</b>, <i>corsivo</i>, <u>sottolineato</u>.</p>
<p>Esempio HTML.
<a href="./esercizio02.html">Link a <code>esercizio01.html</code></a></p>
<hr>
<h1>Gallery video</h1>
<p><video src="./esercizio06.mp4" alt="Video esercizio 06"><br>
Didascalia: Video esercizio 06<br>
<small>Preso da <a href="https://sample-videos.com/">sample-videos.com</a></p>;
<hr>
<h1>Gallery immagini</h1>
<p><img src="./esercizio05.jpg" alt="Immagine esercizio JPG"><br>
Didascalia: Immagine esercizio JPG</p>

<p><img src="./esercizio05.avif" alt="Immagine esercizio AVIF"><br>
Didascalia: Immagine esercizio AVIF</p>

<p><img src="./esercizio05.png" alt="Immagine esercizio PNG"><br>
Didascalia: Immagine esercizio PNG</p>

<p><img src="./esercizio05.webp" alt="Immagine esercizio WEBP"><br>
Didascalia: Immagine esercizio WEBP</p>

<p><img src="./esercizio05.svg" alt="Immagine esercizio SVG"><br>
Didascalia: Immagine esercizio SVG</p>

</body>
</html>

ricarichiamo dal nostro web browser il file esercizio06.html ;
vedremo qualcosa di uguale o molto simile all’immagine qui di seguito

Figura 5: Esempio 6

5.5. Audio

Per gli oggetti audio valgono i principi teorici riportati per i video.

Vale il concetto del bitrate, ovvero la quantità di dati che devono costantemente arrivare al client per poter riprodurre l’audio, come spiegato per i video. Rispetto a questi, però, le tracce audio necessitano di meno informazione, pertanto abbiamo file più piccoli. Normalmente è l’audio editor che imposta tutto. Pertanto ci basta conoscere il principio come per i video.

Per i formati è in corso un’evoluzione tecnologica come per i video. Pertanto al momento, senza entrare nella discussione, teniamo come riferimento l’uso del solo formato MP3.

Detto tutto ciò l’HTML 5 (quello che usiamo tutti da qualche anno) incorpora le funzioni per lo streaming ed il controllo della riproduzione degli stessi.

Procediamo a stendere un paio di righe HTML per includere un mini file audio nella nostra pagina prima del filmato. Prepariamoci con:

creiamo un copia del file esercizio06.html con nome esercizio07.html ;
nella directory dove si trova il file esercizio07.html mettiamo il video esercizio07.mp3 scaricabili da

https://www.digitaldsb.it/moodle/course/section.php?id=45 ;
con Sublime Text apriamo il nostro file esercizio07.html .

Il tag che permette l’inserimento delle immagini è <audio> :

aggiorniamo il codice html del file esercizio07.html come segue:

<!DOCTYPE html>
<head>
<link rel="stylesheet" href="./custom.css">
</head>
<html>
<body>

<h1>Titolo</h1>
<p>Testo in <b>grassetto</b>, <i>corsivo</i>, <u>sottolineato</u>.</p>
<p>Esempio HTML.
<a href="./esercizio02.html">Link a <code>esercizio01.html</code></a></p>

<hr>
<h1>Gallery audio</h1>
<p><audio controls>
  <source src="./esercizio07.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio> <br>
Didascalia: Audio esercizio 07<br>
<small>Preso da <a href="https://samplelib.com/sample-mp3.html">samplelib.com</a></p>;
<hr>
<h1>Gallery video</h1>
<p><video controls>
  <source src="./esercizio06.mp4" type="video/mp4">
  Your browser does not support the video tag.
</video> <br>
Didascalia: Video esercizio 06<br>
<small>Preso da <a href="https://sample-videos.com/">sample-videos.com</a></p>;
<hr>
<h1>Gallery immagini</h1>
<p><img src="./esercizio05.jpg" alt="Immagine esercizio JPG"><br>
Didascalia: Immagine esercizio JPG</p>

<p><img src="./esercizio05.avif" alt="Immagine esercizio AVIF"><br>
Didascalia: Immagine esercizio AVIF</p>

<p><img src="./esercizio05.png" alt="Immagine esercizio PNG"><br>
Didascalia: Immagine esercizio PNG</p>

<p><img src="./esercizio05.webp" alt="Immagine esercizio WEBP"><br>
Didascalia: Immagine esercizio WEBP</p>

<p><img src="./esercizio05.svg" alt="Immagine esercizio SVG"><br>
Didascalia: Immagine esercizio SVG</p>

</body>
</html>

ricarichiamo dal nostro web browser il file esercizio07.html ;
vedremo qualcosa di uguale o molto simile all’immagine qui di seguito

Figura 6: Esempio 7

5.6. Javascript

I javascript sono piccoli programmi inseriti all’interno di una pagina web. Scritti con un java semplificato sono concepiti per automatizzare e potenziare le pagine web. Gli sviluppatori hanno curato con grande attenzione la sicurezza. Pertanto i javascript sono molto limitati e sempre isolati all’interno del web browser.

Per impararli e capirli a fondo rimando alle ottime guide:

W3schools - JavaScript Tutorial ( https://www.w3schools.com/js/default.asp );
The Modern JavaScript Tutorial ( https://javascript.info ).

Come per i CSS possiamo mettere il codice dello script all’interno della pagina web o metterlo come file esterno.

Creiamo un codice javascript “Hello, world” dimostrativo inserendo il codice javascript nel blocco head della pagina HTML. Prima del blocco audio mettiamo un blocco con un bottone “Click” che intercetterà il click del mouse e richiamerà lo script che induce il browser ad aprire una popup di messaggio con il testo “Hello, world”.

Partiamo:

creiamo un copia del file esercizio07.html con nome esercizio08.html ;
con Sublime Text apriamo il nostro file esercizio08.html ;

aggiorniamo il codice html del file esercizio08.html come segue:

<!DOCTYPE html>
<head>
<link rel="stylesheet" href="./custom.css">


<!-- JavaScript INIZIO -->
<script>
  function scriptEsempio8() {
      alert( 'Hello, world!' );
  }
</script>
<!-- JavaScript FINE -->


</head>
<html>
<body>

<h1>Titolo</h1>
<p>Testo in <b>grassetto</b>, <i>corsivo</i>, <u>sottolineato</u>.</p>
<p>Esempio HTML.
<a href="./esercizio02.html">Link a <code>esercizio01.html</code></a></p>

<hr>
<h1>Gallery javascript</h1>
<p><button onclick="scriptEsempio8()">Click</button></p>

<hr>
<h1>Gallery audio</h1>
<p><audio controls>
  <source src="./esercizio07.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio> <br>
Didascalia: Audio esercizio 07<br>
<small>Preso da <a href="https://samplelib.com/sample-mp3.html">samplelib.com</a></p>;
<hr>
<h1>Gallery video</h1>
<p><video controls>
  <source src="./esercizio06.mp4" type="video/mp4">
  Your browser does not support the video tag.
</video> <br>
Didascalia: Video esercizio 06<br>
<small>Preso da <a href="https://sample-videos.com/">sample-videos.com</a></p>;
<hr>
<h1>Gallery immagini</h1>
<p><img src="./esercizio05.jpg" alt="Immagine esercizio JPG"><br>
Didascalia: Immagine esercizio JPG</p>

<p><img src="./esercizio05.avif" alt="Immagine esercizio AVIF"><br>
Didascalia: Immagine esercizio AVIF</p>

<p><img src="./esercizio05.png" alt="Immagine esercizio PNG"><br>
Didascalia: Immagine esercizio PNG</p>

<p><img src="./esercizio05.webp" alt="Immagine esercizio WEBP"><br>
Didascalia: Immagine esercizio WEBP</p>

<p><img src="./esercizio05.svg" alt="Immagine esercizio SVG"><br>
Didascalia: Immagine esercizio SVG</p>

</body>
</html>

carichiamo dal nostro web browser il file esercizio08.html ;
clicchiamo con il mouse sul bottone “Click”; vedremo qualcosa di uguale o molto simile all’immagine qui di seguito

Figura 7: Esempio 8

5.7. Console FireFox

Probabilmente per l’autoapprendimento aiuta molto poter guardare dentro una pagina web e guardare la comunicazione che avviene tra il proprio terminale ed il web server.

Questa attività è perfettamente possibile con gli strumenti standard in dotazione al PC. Per motivi pratici è meglio fare questa attività da un PC piuttosto che da un telefonino o un tablet.

Suggeriamo l’uso di FireFox, ma anche gli altri principali principali browser hanno gli strumenti di analisi delle pagine web e di analisi del traffico client-server. A questo riguardo rimandiamo alle pagine per gli sviluppatori della Mozilla: Firefox Developer Edition ( https://www.mozilla.org/it/firefox/developer/ ).

In questo manuale abbiamo iniziato usando FireFox. Continuiamo dando le indicazioni per questo popolare browser.

5.7.1. Informazioni sulla pagina

Premendo la combinazione CTRL+I, FireFox apre una finestra che riassume le caratteristiche di una pagina web. Vengono riportate le informazioni come il titolo, la codifica, il tipo di pagina, ma riporta che l’elenco di tutti i media (immagini, disegni, blob, audio, video, ecc….) contenuti nella pagina.

Utile, come dire, per avere una panoramica tecnica della pagina web.

5.7.2. Sorgente della pagina

Premendo la combinazione CTRL+U si apre un tab dove viene riportato tutto il codice HTML che ricevuto dal web browser.

Si tratta di informazione tecnica, ma molto utile perché ci permette di vedere quale codice realizza la pagina che vediamo.

Ricordiamoci che quasi tutti i siti web hanno dei motori che li generano dinamicamente. A volte il codice HTML che riceviamo oltre ad essere creato istantaneamente, riporta link, metadati e/o script virtuali.

Teniamo presente anche che alcuni framework dei motori dei siti creano codici HTML molto compatti per ridurre le dimensioni e i tempi di trasferimento. Pertanto potremmo essere difronte a una pagina web molto bella e moto ricca. Premendo CTRL+I potremmo vedere una sola riga.

In realtà si tratta di una riga chilometrica perché vengono tolti tutti i ritorni a capo, tutti gli spazi inutili, ecc… Il risultato è dell’informazione difficilmente leggibile da noi, ma che il computer comprende molto bene.

5.7.3. Analizza

Probabilmente è lo strumento più potente ed utile quando dobbiamo scoprire la causa di un difetto.

Sulla nostra pagina web se premiamo il bottone destro del mouse si apre un piccolo menù contestuale che ha un voce “Analizza”. Cliccando su questa voce in una porzione dello schermo si apre un potente strumento di analisi, visualizzazione, ispezione, ecc….

Figura 8: Apertura "strumenti di sviluppo" in FireFox

Utile lo strumento “Seleziona un elemento” che ci permette di cliccare su un oggetto dalla pagina e vedere subito a quale parte del codice afferisce.

“Console” e “Rete” ci permette di scoprire e vedere la comunicazione che avviene tra il client ed il server remoto. È facile imbattersi in pagine che apparentemente non inviano alcun dato e scoprire che inviano, invece, informazioni. Questo strumento evidenzia sempre i problemi presenti nelle pagine e/o nella comunicazione.

Con gli strumenti a disposizione è possibile vedere e accedere ai file CSS e JavaScript. Questo aiuta molto a capire come sono stati realizzati e imparare da essi.