Immagini e Media

Bentornato.

Nella lezione precedente hai imparato a collegare pagine con link e navigazione.

Ora aggiungiamo immagini.

Perché il testo è potente.

Ma a volte un’immagine spiega qualcosa più velocemente di cinque paragrafi e una piccola crisi emotiva.

Le immagini rendono le pagine più visive, più personali e più facili da capire.

Ma devono essere aggiunte correttamente.

Altrimenti il browser mostra una piccola icona di immagine rotta.

E quella piccola icona è il modo del browser per dire:

“Ci ho provato, ma tu mi hai dato caos.”

Cosa Imparerai

In questa lezione imparerai:

• come aggiungere immagini con il tag img;
• cosa significa src;
• cosa significa alt;
• perché il testo alternativo è importante;
• come funzionano i percorsi delle immagini;
• come usare immagini dentro cartelle;
• come aggiungere larghezza e altezza;
• errori comuni con le immagini;
• idee base sui media in HTML.

L’Elemento img

Le immagini si aggiungono con l’elemento img.

Esempio:

<img src="cat.jpg" alt="Un gatto carino seduto su una sedia">

Il tag img non ha bisogno di un tag di chiusura.

Questo non serve:

</img>

L’elemento immagine di solito ha due attributi molto importanti:

• src;
• alt.

Attributi piccoli.

Conseguenze grandi.

Come dimenticare una vite mentre monti una sedia.

L’Attributo src

L’attributo src dice al browser dove si trova il file immagine.

Esempio:

<img src="photo.jpg" alt="Un paesaggio di montagna">

Questo significa:

Trova il file photo.jpg e mostralo qui.

Se l’immagine è nella stessa cartella del file HTML, questo funziona:

project/
  index.html
  photo.jpg

HTML:

<img src="photo.jpg" alt="Un paesaggio di montagna">

Semplice.

Pulito.

Senza dramma.

Un momento raro nello sviluppo web.

Immagini Dentro Cartelle

Di solito le immagini vengono salvate in una cartella.

Esempio:

project/
  index.html
  images/
    profile.jpg

Per mostrare profile.jpg, scrivi:

<img src="images/profile.jpg" alt="Ritratto di una persona">

Il percorso deve corrispondere alla posizione reale dell’immagine.

Se la cartella si chiama images, non scrivere image.

Se il file si chiama profile.jpg, non scrivere Profile.jpg.

I computer sono severi.

Possono fare milioni di operazioni al secondo ma si offendono ancora per una lettera maiuscola.

L’Attributo alt

L’attributo alt fornisce un testo alternativo per l’immagine.

Esempio:

<img src="dog.jpg" alt="Un cane marrone che gioca nel parco">

Il testo alt viene usato quando:

• l’immagine non si carica;
• uno screen reader legge la pagina;
• i motori di ricerca provano a capire l’immagine;
• l’utente non riesce a vedere bene l’immagine.

Un buon testo alt descrive il significato dell’immagine.

Non solo il nome del file.

Male:

<img src="dog.jpg" alt="cane">

Meglio:

<img src="dog.jpg" alt="Un cane marrone che gioca nel parco">

Un buon alt non è decorazione.

È accessibilità.

E l’accessibilità non è opzionale se vuoi costruire siti decenti.

Immagini Decorative

A volte un’immagine è solo decorativa.

Per esempio un pattern di sfondo o un piccolo ornamento visivo.

In quel caso puoi usare un alt vuoto:

<img src="decoration.png" alt="">

Questo dice agli screen reader:

Questa immagine è decorativa. Puoi saltarla.

Ma attenzione.

Non usare alt vuoto per immagini significative.

Se l’immagine dà informazioni, descrivila.

Se è solo decorazione, alt vuoto è accettabile.

HTML è semplice.

Ma si aspetta onestà.

Larghezza e Altezza

Puoi impostare larghezza e altezza dell’immagine:

<img src="profile.jpg" alt="Ritratto di una persona" width="300" height="300">

Questo dice al browser la dimensione dell’immagine.

Può aiutare il layout della pagina a caricarsi in modo più stabile.

Ma non stirare immagini a caso.

Potresti far sembrare le persone come se fossero state attaccate da una stampante.

Se l’immagine originale è quadrata, usa dimensioni quadrate.

Se l’immagine originale è larga, usa dimensioni larghe.

Rispetta l’immagine.

L’immagine ha sentimenti.

Probabilmente no.

Ma comunque.

Crea una Pagina di Pratica

Crea un nuovo file:

touch images.html

Crea una cartella images:

mkdir images

Metti un’immagine dentro la cartella e chiamala:

profile.jpg

Ora scrivi questo in images.html:

<!DOCTYPE html>
<html lang="it">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Pratica Immagini</title>
</head>
<body>
  <h1>Pratica Immagini</h1>

  <p>Questa pagina mostra come aggiungere un’immagine in HTML.</p>

  <img src="images/profile.jpg" alt="Foto profilo per la pagina di pratica" width="300">

  <p>L’immagine sopra viene caricata dalla cartella images.</p>
</body>
</html>

Apri il file nel browser.

Se l’immagine appare, ottimo.

Se non appare, controlla il percorso.

Il browser non è arrabbiato.

È solo perso.

Formati di Immagine Comuni

I formati di immagine più comuni sono:

• .jpg o .jpeg;
• .png;
• .webp;
• .svg;
• .gif.

Usa .jpg per le foto.

Usa .png quando ti serve trasparenza o grafica nitida.

Usa .webp per immagini moderne e ottimizzate.

Usa .svg per loghi e icone quando possibile.

Usa .gif con attenzione.

Una gif animata può essere divertente.

Venti gif animate possono trasformare il sito in un circo digitale.

Nomi dei File Immagine

Usa nomi semplici.

Bene:

profile.jpg
hero-image.webp
course-cover.png

Male:

My Final Image NEW VERSION 222!!!.jpg
photo from phone (copy).jpeg
IMG_20240318_174433.jpg

I nomi semplici sono più facili da usare.

Usa lettere minuscole.

Usa trattini invece degli spazi.

Esempio:

my-profile-photo.jpg

Non:

my profile photo.jpg

Gli spazi nei nomi dei file possono creare problemi fastidiosi.

E abbiamo già abbastanza problemi fastidiosi.

Internet ce li fornisce ogni giorno.

Immagini Esterne

Puoi anche usare un’immagine da un altro sito:

<img src="https://example.com/photo.jpg" alt="Immagine di esempio">

Ma fai attenzione.

Le immagini esterne possono sparire.

L’altro sito può bloccarle.

Possono caricarsi lentamente.

Per il tuo sito, di solito è meglio salvare le immagini nel progetto.

I tuoi file.

Il tuo controllo.

Il tuo piccolo regno.

Immagini e Link

Un’immagine può anche stare dentro un link.

Esempio:

<a href="about.html">
  <img src="images/profile.jpg" alt="Vai alla pagina chi sono" width="200">
</a>

Ora l’immagine è cliccabile.

È utile per loghi, card, gallerie e navigazione visuale.

Ma il testo alt dovrebbe descrivere lo scopo del link.

Non solo l’immagine.

Se cliccando l’immagine si va alla pagina chi sono, il testo alt deve aiutare a capirlo.

Figure e Figcaption

HTML ha figure e figcaption per immagini con didascalia.

Esempio:

<figure>
  <img src="images/mountain.jpg" alt="Un paesaggio di montagna all’alba" width="500">
  <figcaption>Un paesaggio di montagna all’alba.</figcaption>
</figure>

Usa questo quando l’immagine ha bisogno di una didascalia visibile.

Il testo alt aiuta l’accessibilità.

figcaption dà una spiegazione visibile a tutti.

Sono collegati.

Ma non sono la stessa cosa.

Media Base: Audio e Video

HTML può anche mostrare audio e video.

Esempio audio:

<audio controls>
  <source src="audio/song.mp3" type="audio/mpeg">
  Il tuo browser non supporta l’elemento audio.
</audio>

Esempio video:

<video controls width="500">
  <source src="videos/demo.mp4" type="video/mp4">
  Il tuo browser non supporta l’elemento video.
</video>

L’attributo controls mostra play, pausa e volume.

Senza controls, gli utenti potrebbero non riuscire a controllare il media.

E nessuno ama un sito che si comporta come una radio posseduta da un fantasma.

Errori Comuni

Percorso Immagine Sbagliato

Se il file è qui:

images/profile.jpg

Non scrivere:

<img src="profile.jpg" alt="Foto profilo">

Usa:

<img src="images/profile.jpg" alt="Foto profilo">

Il percorso deve corrispondere alla posizione del file.

alt Mancante

Questo è male:

<img src="profile.jpg">

Meglio:

<img src="profile.jpg" alt="Foto profilo del proprietario del sito">

Pensa sempre a alt.

Anche se il testo è vuoto per immagini decorative.

Immagini Enormi

Non caricare immagini giganti senza pensarci.

Una foto da 10 MB può rendere la pagina lenta.

I siti lenti fanno soffrire.

Gli utenti non aspettano.

Se ne vanno.

Come i gatti quando provi a spiegare JavaScript.

Pratica

Crea una pagina chiamata:

gallery.html

Deve includere:

• un h1;
• un paragrafo introduttivo;
• tre immagini;
• testo alt utile per ogni immagine;
• un’immagine dentro un link;
• un’immagine con figure e figcaption.

Usa una cartella images.

Mantieni i nomi dei file semplici.

Niente CSS.

Niente JavaScript.

Solo HTML pulito.

Mini Sfida

Crea una semplice pagina personale con:

• un’immagine profilo;
• una breve introduzione;
• una lista di hobby;
• un’immagine collegata a un hobby;
• un link di contatto;
• una didascalia sotto un’immagine.

Usa testo alt significativo.

Non scrivere alt="image".

Non è utile.

È la versione HTML di alzare le spalle.

Riassunto

Oggi hai imparato che:

• le immagini si aggiungono con l’elemento img;
• src dice al browser dove si trova il file immagine;
• alt descrive l’immagine per accessibilità e testo alternativo;
• i percorsi delle immagini devono corrispondere alla struttura delle cartelle;
• i nomi dei file dovrebbero essere semplici e minuscoli;
• width e height possono aiutare a controllare la visualizzazione;
• figure e figcaption aggiungono didascalie;
• audio e video possono essere aggiunti con audio e video;
• una buona struttura media rende le pagine più utili e accessibili.

Le immagini rendono i siti più vivi.

Ma solo quando sono usate correttamente.

Una buona immagine supporta il contenuto.

Una cattiva immagine resta lì come una patata confusa.

Prossima Lezione

Nella prossima lezione impareremo le tabelle.

Le tabelle non sono per il layout.

Le tabelle sono per i dati.

Molto importante.

Molto spesso abusato.

Saremo severi.