Lezione HTML: Link e Immagini

Guida completa per creare collegamenti e inserire immagini nel tuo sito di cucina “Starry Food”

Introduzione

In questa lezione impareremo come collegare pagine web e inserire immagini nel nostro sito di cucina “Starry Food”. I link e le immagini sono elementi fondamentali per creare un sito web navigabile e accattivante.

Concetti base dei link HTML:

Tag <a>: Crea collegamenti ipertestuali

href: Specifica la destinazione del link

target=”_blank”: Apre il link in nuova finestra

Link interni: Collegamenti tra pagine dello stesso sito

Link esterni: Collegamenti ad altri siti web

Ancore: Collegamenti a sezioni specifiche della pagina

I LINK HTML

Cos’è un link?

Un link (collegamento) è un elemento che permette di navigare da una pagina all’altra o da una sezione all’altra della stessa pagina. In HTML si crea con il tag <a> (anchor).

Sintassi base:

HTML

<a href="destinazione">Testo del link</a>

TIPI DI LINK

1. Link Esterni (verso altri siti web)

I link esterni puntano a siti web diversi dal nostro. È importante includere http:// o https://.

Esempi per Starry Food:

HTML

<!-- Link a siti di ricette famosi -->
<a href="https://www.giallozafferano.it">Visita GialloZafferano</a>
<a href="https://www.cookaround.com">Scopri CookAround</a>
<a href="https://www.wikipedia.org">Consulta Wikipedia</a>

<!-- Link con apertura in nuova finestra -->
<a href="https://www.foodnetwork.com" target="_blank">Food Network</a>

Attributi utili per link esterni:

target="_blank": apre il link in una nuova finestra/tab
rel="noopener": migliora la sicurezza quando si usa target=”_blank”

HTML

<a href="https://www.example.com" target="_blank" rel="noopener">Link sicuro</a>

2. Link Interni (tra pagine del nostro sito)

I link interni collegano le pagine del nostro sito “Starry Food”.

Struttura tipica del sito:

Struttura Cartelle

starry-food/
├── index.html (homepage)
├── ricette.html
├── ingredienti.html
├── contatti.html
└── chi-siamo.html

Esempi di link interni:

HTML

<!-- Dalla homepage alle altre pagine -->
<a href="ricette.html">Le nostre Ricette</a>
<a href="ingredienti.html">Guida agli Ingredienti</a>
<a href="contatti.html">Contattaci</a>
<a href="chi-siamo.html">Chi Siamo</a>

<!-- Menu di navigazione tipico -->
<nav>
  <ul>
    <li><a href="index.html">Home</a></li>
    <li><a href="ricette.html">Ricette</a></li>
    <li><a href="ingredienti.html">Ingredienti</a></li>
    <li><a href="contatti.html">Contatti</a></li>
  </ul>
</nav>

Con percorsi relativi (cartelle):

HTML

<!-- Se le pagine sono in cartelle separate -->
<a href="pages/ricette.html">Ricette</a>
<a href="images/gallery.html">Galleria Foto</a>
<a href="../index.html">Torna alla Home</a> <!-- ../ = cartella superiore -->

3. Link ad Ancore (nella stessa pagina)

Gli ancore permettono di saltare a sezioni specifiche della stessa pagina.

Step 1: Creare l’ancora (destinazione)

HTML

<!-- Metodo moderno con id -->
<h2 id="antipasti">Antipasti Stellati</h2>
<h2 id="primi-piatti">Primi Piatti</h2>
<h2 id="dolci">Dolci della Casa</h2>
<h2 id="contatti">Contattaci</h2>

Step 2: Creare i link alle ancore

HTML

<!-- Menu di navigazione interno alla pagina -->
<nav>
  <h3>Vai alla sezione:</h3>
  <ul>
    <li><a href="#antipasti">Antipasti</a></li>
    <li><a href="#primi-piatti">Primi Piatti</a></li>
    <li><a href="#dolci">Dolci</a></li>
    <li><a href="#contatti">Contatti</a></li>
  </ul>
</nav>

<!-- Link per tornare in cima -->
<a href="#top">Torna su</a>

Esempio completo per una pagina ricette:

HTML

<!DOCTYPE html>
<html lang="it">
<head>
  <title>Ricette - Starry Food</title>
</head>
<body id="top">
  <h1>Ricette Starry Food</h1>
  
  <!-- Indice della pagina -->
  <nav>
    <h2>Indice Ricette</h2>
    <ul>
      <li><a href="#antipasti">Antipasti Stellati</a></li>
      <li><a href="#primi">Primi Piatti</a></li>
      <li><a href="#secondi">Secondi Piatti</a></li>
      <li><a href="#dolci">Dolci della Casa</a></li>
    </ul>
  </nav>
  
  <!-- Sezioni con ancore -->
  <section>
    <h2 id="antipasti">Antipasti Stellati</h2>
    <p>Bruschette al pomodoro, antipasto della casa...</p>
    <a href="#top">Torna su</a>
  </section>
  
  <section>
    <h2 id="primi">Primi Piatti</h2>
    <p>Spaghetti alle vongole, risotto ai funghi...</p>
    <a href="#top">Torna su</a>
  </section>
  
  <section>
    <h2 id="dolci">Dolci della Casa</h2>
    <p>Tiramisù, panna cotta ai frutti di bosco...</p>
    <a href="#top">Torna su</a>
  </section>
</body>
</html>

Concetti base delle immagini HTML:

Tag <img>: Tag vuoto per inserire immagini

src: Percorso del file immagine

alt: Testo alternativo (obbligatorio)

width/height: Dimensioni dell’immagine

title: Tooltip che appare al passaggio del mouse

Formati: JPG, PNG, GIF, WEBP

LE IMMAGINI HTML

Tag `<img>`

Le immagini si inseriscono con il tag <img>, che è un tag vuoto (non ha chiusura).

Sintassi base:

HTML

<img src="percorso-immagine" alt="descrizione">

Attributi fondamentali:

src: percorso del file immagine
alt: testo alternativo (importante per accessibilità)
width e height: dimensioni in pixel
title: tooltip che appare al passaggio del mouse

Esempi per Starry Food

1. Immagini nella stessa cartella:

HTML

<img src="logo-starry-food.jpg" alt="Logo Starry Food">
<img src="pasta-carbonara.jpg" alt="Pasta alla Carbonara">
<img src="tiramisu.jpg" alt="Tiramisù fatto in casa">

2. Immagini in cartelle specifiche:

HTML

<!-- Struttura consigliata -->
<!-- 
starry-food/
├── index.html
├── images/
│   ├── ricette/
│   ├── ingredienti/
│   └── logo/
-->

<img src="images/logo/starry-food-logo.png" alt="Starry Food - Cucina sotto le stelle">
<img src="images/ricette/spaghetti-vongole.jpg" alt="Spaghetti alle vongole">
<img src="images/ingredienti/basilico-fresco.jpg" alt="Basilico fresco">

3. Immagini con dimensioni specificate:

HTML

<img src="images/ricette/pizza-margherita.jpg" 
     alt="Pizza Margherita appena sfornata" 
     width="400" 
     height="300">

<!-- Ridimensionamento proporzionale -->
<img src="images/chef-stellato.jpg" 
     alt="Il nostro chef stellato" 
     width="200">

4. Immagini responsive (si adattano al dispositivo):

HTML

<img src="images/ristorante-esterno.jpg" 
     alt="Esterno del ristorante Starry Food" 
     style="max-width: 100%; height: auto;">

Formati di immagine supportati

JPEG (.jpg, .jpeg): per foto e immagini complesse
PNG (.png): per immagini con trasparenza
GIF (.gif): per immagini animate
WEBP (.webp): formato moderno, più leggero

Esempi pratici per il sito

Gallery di piatti:

HTML

<section>
  <h2>I nostri piatti stellati</h2>
  
  <div>
    <h3>Antipasti</h3>
    <img src="images/ricette/bruschette.jpg" 
         alt="Bruschette al pomodoro e basilico" 
         width="300">
    <img src="images/ricette/antipasto-mare.jpg" 
         alt="Antipasto di mare misto" 
         width="300">
  </div>
  
  <div>
    <h3>Primi Piatti</h3>
    <img src="images/ricette/carbonara.jpg" 
         alt="Spaghetti alla carbonara" 
         width="300" 
         title="La ricetta originale romana">
    <img src="images/ricette/risotto-funghi.jpg" 
         alt="Risotto ai funghi porcini" 
         width="300">
  </div>
</section>

COMBINARE LINK E IMMAGINI

Immagini cliccabili

Puoi rendere un’immagine cliccabile inserendola dentro un tag <a>:

Esempi pratici:

HTML

<!-- Immagine che porta a una pagina di ricetta -->
<a href="ricetta-carbonara.html">
  <img src="images/carbonara-thumb.jpg" 
       alt="Clicca per vedere la ricetta della Carbonara">
</a>

<!-- Immagine che porta a un sito esterno -->
<a href="https://www.giallozafferano.it" target="_blank">
  <img src="images/partner-gz.jpg" 
       alt="Partner GialloZafferano">
</a>

<!-- Galleria di immagini ingrandibili -->
<a href="images/gallery/pizza-grande.jpg">
  <img src="images/gallery/pizza-piccola.jpg" 
       alt="Clicca per ingrandire la pizza" 
       width="200">
</a>

ESEMPI COMPLETI PER STARRY FOOD

Homepage con menu di navigazione

Codice completo homepage:

HTML

<!DOCTYPE html>
<html lang="it">
<head>
  <title>Starry Food - Cucina sotto le stelle</title>
</head>
<body>
  <header>
    <img src="images/logo/starry-food.png" 
         alt="Starry Food Logo" 
         width="200">
    
    <nav>
      <ul>
        <li><a href="index.html">Home</a></li>
        <li><a href="menu.html">Menu</a></li>
        <li><a href="ricette.html">Ricette</a></li>
        <li><a href="prenotazioni.html">Prenotazioni</a></li>
        <li><a href="contatti.html">Contatti</a></li>
      </ul>
    </nav>
  </header>
  
  <main>
    <h1>Benvenuti in Starry Food</h1>
    <img src="images/ristorante-stellato.jpg" 
         alt="Il nostro ristorante sotto le stelle" 
         style="max-width: 100%;">
    
    <p>Scopri la nostra cucina stellata...</p>
    
    <a href="#specialita">Vai alle nostre specialità</a>
  </main>
  
  <section id="specialita">
    <h2>Le nostre specialità</h2>
    
    <article>
      <h3>Pasta alla Carbonara</h3>
      <a href="ricette/carbonara.html">
        <img src="images/ricette/carbonara.jpg" 
             alt="Pasta alla Carbonara" 
             width="250">
      </a>
      <p>La ricetta originale romana...</p>
    </article>
  </section>
  
  <footer>
    <p>Seguici sui social:</p>
    <a href="https://www.facebook.com/starryfood" target="_blank">
      <img src="images/social/facebook.png" alt="Facebook" width="30">
    </a>
    <a href="https://www.instagram.com/starryfood" target="_blank">
      <img src="images/social/instagram.png" alt="Instagram" width="30">
    </a>
  </footer>
</body>
</html>

CONSIGLI E BUONE PRATICHE

Per i Link:

Usa testi descrittivi: invece di “clicca qui” scrivi “Vedi la ricetta della Carbonara”
Link esterni in nuova finestra: usa target="_blank" per non far perdere i visitatori
Testa sempre i link: verifica che funzionino correttamente
Link di ritorno: nelle pagine lunghe, aggiungi link “Torna su”

Per le Immagini:

Sempre l’attributo alt: essenziale per accessibilità
Ottimizza le dimensioni: non usare immagini troppo grandi
Nomi file descrittivi: “pizza-margherita.jpg” invece di “img001.jpg”
Organizza in cartelle: tieni le immagini ordinate

Per Altervista:

Carica le immagini nel tuo spazio web tramite FileManager
Controlla i percorsi: su Altervista l’URL base è tuosito.altervista.org
Rispetta i limiti di spazio e traffico del piano gratuito

ESERCIZIO PRATICO

Crea una pagina “ricette.html” per Starry Food

La pagina deve contenere:

Requisiti:

Un menu di navigazione con link interni alle sezioni
Sezioni per antipasti, primi, secondi e dolci (con ancore)
Almeno 2 immagini per sezione
Link alla homepage e ad altre pagine del sito
Immagini cliccabili che portano alle singole ricette

Buona fortuna con il tuo sito Starry Food!

Ricorda di testare tutti i link e verificare che le immagini si carichino correttamente.