Lezione 3: Aggiungere Immagini e Link – Perché Una Pagina Web Noiosa Non Piace a Nessuno!

Lesson3

Lezione 3: Aggiungere Immagini e Link – Perché Una Pagina Web Noiosa Non Piace a Nessuno!

Benvenuto nella Lezione 3! Se finora la tua pagina web sembra un tema scolastico, è arrivato il momento di darle un po’ di vita. Oggi aggiungiamo immagini e link per trasformare quel muro di testo in qualcosa di molto più interessante. Chi lo sa, magari qualcuno visiterà il tuo sito solo per vedere tutte le foto di gatti che hai inserito!

Aggiungere Immagini: Perché Una Pagina Senza Immagini è Come la Pizza Senza Formaggio

Le immagini sono come il peperoncino sulla pizza della tua pagina web—essenziali per dare un po’ di brio. Per aggiungere un’immagine in HTML, usiamo il tag <img>. È un tag che si chiude da solo, perché, diciamocelo, è troppo cool per avere bisogno di una chiusura.

Ecco come fare:

Variante 1: Usare un’Immagine Ospitata Online

Hai trovato una bella immagine su internet? Ottimo! Fai clic con il tasto destro sull’immagine, aprila in una nuova scheda, copia l’URL e incollalo nell’attributo src come questo:

<img src="https://esempio.com/la-tua-immagine.jpg" alt="Descrizione dell'immagine">
  • src: È il link all’immagine (pensalo come il GPS che dice al browser dove trovare l’immagine).
  • alt: Una breve descrizione per quando l’immagine non si carica o per i tuoi amici con la connessione più lenta della storia.

Variante 2: Usare un’Immagine Locale dal Tuo Computer

Hai una bella immagine salvata sul tuo computer? Perfetto! Salvala nella tua cartella di progetto (ad esempio, in una cartella images), e punta a essa con l’attributo src così:

<img src="images/mia-immagine-locale.jpg" alt="Descrizione della tua immagine locale">

Esempio:

<!-- Usando un'immagine online -->
<img src="https://esempio.com/gatto-fantastico.jpg" alt="Un gatto fantastico che prende il sole su una sdraio">

<!-- Usando un'immagine locale -->
<img src="images/gatto-locale.jpg" alt="Un gatto locale che ti guarda in modo giudicante dalla scrivania">

Compito: Aggiungi un’Immagine alla Tua Pagina

Trova un’immagine—divertente, ispirazionale, o semplicemente strana—e aggiungila alla tua pagina. Puoi usare un URL dal web o un’immagine locale. Non dimenticare il testo alternativo, perché nulla dice “professionista” come un’immagine ben descritta!

Cosa sarebbe una pagina web senza qualche link cliccabile? Con il tag <a>, puoi trasformare del testo in un link che porterà i visitatori verso nuove meraviglie (o verso altre pagine piene di gatti).

Ecco la formula magica:

<a href="https://www.esempio.com">Clicca qui per visitare qualcosa di straordinario!</a>
  • href: È l’indirizzo a cui il link porterà (niente GPS richiesto, ma è comunque l’indirizzo digitale).
  • Il testo tra <a> e </a> è quello che i tuoi visitatori vedranno e su cui cliccheranno—quindi rendilo accattivante!

Esempio:

<a href="https://www.gatti.com">Scopri la collezione definitiva di foto di gatti!</a>

Aggiungi un link al tuo sito preferito—che sia un blog, un canale YouTube, o l’ultimo video virale su TikTok. Basta che sia qualcosa di divertente (o, almeno, utile).

Vuoi evitare che i tuoi visitatori lascino del tutto la tua pagina? Puoi far sì che i link si aprano in una nuova scheda con target="_blank". In questo modo, potranno visitare il sito linkato e tornare al tuo con facilità.

Ecco come fare:

<a href="https://www.gatti.com" target="_blank">Guarda questi adorabili gattini in una nuova scheda!</a>

Ora i visitatori potranno godersi le immagini di gatti senza abbandonare del tutto il tuo sito. Vittoria!

Ospitare la Tua Pagina Aggiornata con Caddy

A questo punto, la tua pagina dovrebbe sembrare molto più interessante. Ospitiamola di nuovo usando Caddy, così potrai mostrarla a tutto il mondo (o almeno ai tuoi coinquilini).

Passo 1: Apri il Terminale

Naviga nella cartella in cui è salvato il tuo file HTML. Probabilmente si trova nella tua fidata cartella di progetto:

cd ~/my-website

Passo 2: Avvia Caddy

Usa questo comando per ospitare il sito localmente sulla porta 8080:

caddy file-server --listen :8080

Passo 3: Visualizza la Tua Pagina

Apri il browser e visita http://localhost:8080 per vedere la tua pagina appena aggiornata. Ora ha immagini, link, e tutto lo stile che merita!

Riassunto:

In questa lezione, hai imparato a:

  • Aggiungere immagini alla tua pagina web usando il tag <img> (sia online che da file locali).
  • Creare link cliccabili usando il tag <a>.
  • Aprire i link in una nuova scheda con target="_blank" (per non perdere i tuoi visitatori).

La tua pagina web è ufficialmente passata dall’essere solo testo a un capolavoro multimediale! Nella prossima lezione, ci occuperemo dei moduli, così potrai iniziare a interagire con i tuoi visitatori. Preparati per altre magie dell’HTML!

HTML  Principianti  Web Design  Caddy 

Vedi anche