Corso HTML · Impariamo a creare pagine web

Lezione 2

Immagini ed elenchi
<img> <ul> <ol>
Inserire un'immagine

Il tag <img>

Sta da solo (niente chiusura). L'attributo chiave è src: dove si trova il file.

<img src="Immagini/foto.jpg">
// nessun </img> finale
come si vede
foto.jpg
Lezione 2 — Immagini ed elenchi02 / 09
Attenzione · l'errore più comune

Se sbagli il percorso, l'immagine sparisce

📁Immagini/
🖼️foto.jpg
→
<img src="Immagini/foto.jpg">

Il file deve trovarsi davvero nella cartella scritta in src.

Lezione 2 — Immagini ed elenchi03 / 09
Personalizzare l'immagine

Gli attributi di <img>

<img src="Immagini/foto.jpg"
alt="descrizione"
width="300" height="200"
border="2"
align="left">
alttesto se l'immagine non carica
widthlarghezza in pixel
heightaltezza in pixel
borderspessore del bordo
alignposizione: left, right, middle…
Lezione 2 — Immagini ed elenchi04 / 09
Lo chiede il prof

L'immagine-link

Avvolgi <img> dentro <a>: cliccando la foto si va al sito.

<a href="https://...">
<img src="Immagini/foto.jpg"
alt="vai al sito">
</a>
come si vede
foto.jpg
cursore a mano → cliccabile
Lezione 2 — Immagini ed elenchi05 / 09
I pallini

Elenco puntato <ul>

<ul type="square">
<li>Mela</li>
<li>Pera</li>
</ul>
// type: disc · circle · square
come si vede
  • Mela
  • Pera
Lezione 2 — Immagini ed elenchi06 / 09
I numeri

Elenco numerato <ol>

<ol type="1">
<li>Primo</li>
<li>Secondo</li>
</ol>
// type: 1 · A · a · I · i
come si vede
  1. Primo
  2. Secondo
Lezione 2 — Immagini ed elenchi07 / 09
Riepilogo

Cassetta degli attrezzi

Inserire un'immagine<img src="Immagini/foto.jpg">
Alt / dimensioni / bordoalt · width · height · border
Immagine come link<a href><img></a>
Elenco puntato<ul><li> · type disc/circle/square
Elenco numerato<ol><li> · type 1/A/a/I/i
Lezione 2 — Immagini ed elenchi08 / 09
<ul>
Pratica guidata

Ora tocca a te

La pagina «I miei tre miti»
1Prima immagine come link a un sito di frasi celebri
2<ol> dei tre miti: nome, anno, professione
3<ul> delle qualità che ammiri
Poi apri l'esercizio interattivo e scrivi il codice davvero. →