Mattia.sala: Crea Lezione 3: Le immagini (da PDF Sushi Card)

2026-08-03T20:53:58Z

Crea Lezione 3: Le immagini (da PDF Sushi Card)

Nuova pagina

{{Corso/Pagina|corso=webdesign|1=Lezione 3 · 45-60 minuti|2=🖼️ Le immagini|obiettivo=Obiettivo: '''aggiungere immagini alla pagina e imparare i tag "vuoti" e gli attributi.'''}}
== 🎒 Ci serve ==

{{Corso/Materiali}}
*Una o più immagini tue (una foto, un disegno, uno screenshot) in formato <code>.jpg</code> o <code>.png</code>
*Le pagine create nelle lezioni precedenti
{{Corso/FineMateriali}}

== 🧠 Un po' di teoria ==

In origine il web era fatto solo di testo, ma il bello è che oggi è pieno di immagini, colori, video e altri effetti. Iniziamo dalle immagini: in HTML servono un tag nuovo, <code>img</code>, e un concetto nuovo, gli '''attributi'''.

== 🔨 Costruisci: aggiungi le immagini ==

{{Corso/Passi}}
{{Corso/Passo|1=
Nella cartella <code>mio-primo-sito</code>, crea una sottocartella chiamata <code>immagini</code> e mettici dentro una foto o un disegno che ti rappresenta, per esempio <code>sport.jpg</code>.
}}
{{Corso/Passo|1=
In <code>hobby.html</code>, prima della lista, inserisci un tag <code>img</code>, che rappresenta l'immagine che vuoi mostrare:
<pre>
<img src="immagini/sport.jpg" />
</pre>
Salva e aggiorna: è comparsa l'immagine?
}}
{{Corso/Passo|1=
Osserva bene questo tag: noti qualcosa di diverso rispetto a <code>p</code>, <code>strong</code> o <code>li</code>? Ti aiuto, ci sono almeno due differenze:
*il tag <code>img</code> è "vuoto": non racchiude altro contenuto ed è "auto-chiuso" — un unico tag <code><img ... /></code> invece di <code><img>...</img></code>
*può contenere informazioni aggiuntive, chiamate '''attributi'''. In questo caso l'attributo <code>src</code> (source, sorgente) indica dove si trova il file dell'immagine rispetto al file principale.
{{Corso/Tip|1=Nota anche l'uso della barra "/" come separatore del percorso: ogni "/" rappresenta l'ingresso in una sottocartella. Per questo <code>immagini/sport.jpg</code> significa "vai nella cartella immagini, poi prendi il file sport.jpg".}}
}}
{{Corso/Passo|1=
Aggiungi anche gli attributi <code>alt</code> (una descrizione, mostrata se l'immagine non si carica) e <code>title</code> (un testo che appare quando ci passi sopra col mouse):
<pre>
<img src="immagini/sport.jpg" alt="Foto mentre gioco a calcio" title="Il mio sport preferito" />
</pre>
}}
{{Corso/Passo|1=
Prova ad aggiungere anche <code>width</code> e <code>height</code> (larghezza e altezza, in pixel), per esempio <code>width="300"</code>. Cosa cambia se metti un numero molto piccolo o molto grande?
{{Corso/Tip|1=Hai imparato come rappresentare le immagini in HTML: <code>img</code> indica un'immagine, <code>src</code> dice dove si trova, <code>alt</code>/<code>title</code>/<code>width</code>/<code>height</code> sono altri attributi comuni.}}
}}
{{Corso/FinePassi}}

== 🚀 Sfide ==

{{Corso/Sfida|1=stella|2=
Aggiungi una seconda immagine alla pagina <code>hobby.html</code>.
}}

{{Corso/Sfida|1=cometa|2=
Aggiungi un'immagine anche a <code>chi-sono.html</code>, con <code>alt</code> e <code>title</code> compilati per bene.
}}

{{Corso/Sfida|1=razzo|2=
Prova a usare solo <code>width</code> (senza <code>height</code>), poi solo <code>height</code> (senza <code>width</code>): cosa succede alle proporzioni dell'immagine nei due casi?
}}

== 📝 Quiz: mettiti alla prova ==

{{Corso/Quiz|domanda=Qual è la differenza principale tra img e gli altri tag come p?|A=img è un tag "vuoto", auto-chiuso.|B=img non può stare dentro body.|C=Non c'è nessuna differenza.|risposta=A|ok=Esatto: si scrive come un unico tag, senza chiusura separata.|riprova=Riprova!}}

{{Corso/Quiz|domanda=Quale attributo indica dove si trova il file dell'immagine?|A=alt|B=title|C=src|risposta=C|ok=Sì! src sta per "source".|riprova=Riprova!}}

{{Corso/Quiz|domanda=A cosa serve l'attributo alt?|A=Ingrandisce l'immagine.|B=È una descrizione, mostrata se l'immagine non si carica.|C=Cambia il colore dell'immagine.|risposta=B|ok=Esatto, ed è utile anche per l'accessibilità.|riprova=Riprova!}}

== 📚 Da guardare o leggere ==

{{Corso/Fonte|1=
[https://developer.mozilla.org/it/docs/Web/HTML/Element/img Il tag img su MDN] — tutti gli attributi disponibili, con esempi.
}}

{{Corso/FinePagina|prev=[[Corsi/Web design/Lezione 2|Lezione 2: Liste e nuove pagine]]|next=[[Corsi/Web design/Lezione 4|Lezione 4: La homepage e i link]]}}

Corsi/Web design/Lezione 3 - Cronologia

Mattia.sala: Crea Lezione 3: Le immagini (da PDF Sushi Card)