Corso di HTML: 5 Layout e grafica

5 – Layout e Grafica

In questo modulo ci concentreremo sulla gestione dei layout e sull’organizzazione grafica di una pagina web. Capiremo come gli elementi HTML occupano spazio, come disporli in modo armonico e come creare componenti visivamente coerenti. Impareremo a utilizzare il box model, a gestire i vari tipi di display (inline, block, flex, grid) e a realizzare un menu di navigazione funzionale. L’obiettivo finale sarà la creazione di una homepage responsive, capace di adattarsi automaticamente a diverse dimensioni di schermo.

---

📌 Il Box Model

Il box model è il concetto fondamentale per comprendere come gli elementi HTML occupano spazio nella pagina. Ogni elemento è rappresentato come una scatola rettangolare composta da quattro parti principali:

1. Content: il contenuto dell’elemento, come testo o immagini.

2. Padding: lo spazio interno che separa il contenuto dal bordo.

3. Border: il bordo che circonda il contenuto e il padding.

4. Margin: lo spazio esterno che separa l’elemento dagli altri elementi vicini.

Esempio Pratico

Immaginiamo di avere un <div> che contiene del testo e vogliamo definirne dimensioni, spazi interni ed esterni:

div {
  width: 300px;           /* Larghezza del contenuto */
  padding: 20px;          /* Spazio interno tra contenuto e bordo */
  border: 2px solid #333; /* Bordo nero */
  margin: 15px;           /* Spazio esterno */
  background-color: #e0e0e0; /* Colore di sfondo della scatola */
}

Spiegazione: questo esempio mostra chiaramente come padding, border e margin si sommano alla larghezza complessiva di un elemento. Comprendere il box model è essenziale per creare layout puliti e bilanciati.

---

📌 Display: Inline, Block, Flex e Grid

La proprietà CSS display determina come gli elementi vengono visualizzati nella pagina.

• Inline: l’elemento occupa solo lo spazio necessario al contenuto e non interrompe la riga. Tipici esempi: <span>, <a>.

• Block: l’elemento occupa tutta la larghezza disponibile e va a capo. Tipici esempi: <div>, <p>, <h1>-<h6>.

Flex

display: flex consente di organizzare gli elementi in righe o colonne, con allineamenti e distribuzione dello spazio automatici. È particolarmente utile per creare layout flessibili.

.container {
  display: flex;
  justify-content: space-around; /* Distribuisce uniformemente lo spazio tra gli elementi */
  align-items: center;           /* Allinea verticalmente gli elementi al centro */
}

Spiegazione: con Flexbox possiamo facilmente allineare pulsanti, colonne o box senza usare float o calcoli manuali.

Grid

display: grid permette di creare layout complessi su righe e colonne, definendo aree precise della pagina:

.grid-container {
  display: grid;
  grid-template-columns: 1fr 2fr 1fr; /* Tre colonne con larghezze proporzionali */
  grid-gap: 10px;                      /* Spazio tra le celle */
}

Spiegazione: Grid è ideale per layout complessi come home page, portfolio o dashboard, perché permette di posizionare ogni elemento con precisione e di adattare automaticamente la struttura a diversi schermi.

---

📌 Creazione di un Menu di Navigazione

Un menu di navigazione ben progettato è fondamentale per guidare l’utente nella pagina. Possiamo crearlo usando una lista non ordinata <ul> e stilizzarla con CSS.

HTML del Menu

<nav>
  <ul class="menu">
    <li><a href="#">Home</a></li>
    <li><a href="#">Chi siamo</a></li>
    <li><a href="#">Servizi</a></li>
    <li><a href="#">Contatti</a></li>
  </ul>
</nav>

CSS del Menu

.menu {
  list-style-type: none;           /* Rimuove i pallini della lista */
  margin: 0;
  padding: 0;
  display: flex;                   /* Dispone i link in orizzontale */
  justify-content: space-around;   /* Spazio uniforme tra i link */
  background-color: #333;          /* Sfondo scuro */
}
.menu li a {
  color: white;                    /* Testo bianco */
  text-decoration: none;           /* Rimuove la sottolineatura */
  padding: 10px 15px;              /* Spazio interno cliccabile */
}
.menu li a:hover {
  background-color: #4CAF50;       /* Colore di sfondo al passaggio del mouse */
}

Spiegazione: il menu è realizzato in modo che i link siano chiaramente visibili, cliccabili e reattivi al passaggio del mouse. La combinazione di Flexbox e pseudo-classi CSS rende la navigazione intuitiva e gradevole visivamente.

---

📝 Esercizio: Creare una Homepage Responsive

1. Crea una struttura HTML con header, nav, section principali e footer.

2. Applica il box model per impostare margini e padding coerenti tra i blocchi.

3. Organizza il layout della pagina con Flexbox per header e footer, e Grid per le sezioni principali.

4. Stilizza il menu di navigazione seguendo l’esempio, aggiungendo almeno un effetto hover personalizzato.

5. Testa la pagina su desktop e smartphone, modificando eventualmente le dimensioni e il layout per renderla responsive.

Ecco una versione narrativa e dettagliata dell’esempio pratico “Homepage Responsive”, completa di spiegazioni passo passo, motivazioni delle scelte e indicazioni per gli esercizi operativi. Il testo è sviluppato per essere didattico, leggibile e utilizzabile dagli studenti direttamente come guida.

---

⚡ Esempio Pratico: Homepage Responsive

In questo esempio realizzeremo una homepage responsive, ovvero una pagina web capace di adattarsi automaticamente a schermi di diverse dimensioni, dai telefoni cellulari ai desktop. Useremo Flexbox per gestire la disposizione degli elementi e le media queries per modificare il layout a seconda della larghezza dello schermo.

---

Struttura HTML

Per prima cosa creiamo la struttura HTML della pagina. La scelta degli elementi è guidata da buone pratiche semantiche: <header> per l’intestazione, <nav> per la navigazione, <main> per il contenuto principale e <section> per sezioni specifiche.

<!DOCTYPE html>
<html lang="it">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Homepage Responsive</title>
  <link rel="stylesheet" href="stile.css">
</head>
<body>
  <header>
    <h1>Benvenuti</h1>
    <nav>
      <ul class="menu">
        <li><a href="#">Home</a></li>
        <li><a href="#">Servizi</a></li>
        <li><a href="#">Contatti</a></li>
        <li><a href="#">Chi siamo</a></li>
      </ul>
    </nav>
  </header>
  <main class="container">
    <section>
      <p>Benvenuti nella nostra homepage responsive. Il layout si adatta a qualsiasi dispositivo.</p>
    </section>
  </main>
</body>
</html>

Spiegazione delle scelte:

• <meta name="viewport" content="width=device-width, initial-scale=1.0"> è fondamentale per il responsive design, perché permette al browser di scalare correttamente la pagina sui dispositivi mobili.

• La <ul> con classe menu rende più semplice gestire il menu con CSS, distribuendo i link orizzontalmente o verticalmente secondo le necessità.

• La classe container nel <main> ci permette di applicare Flexbox in modo coerente a tutti i contenuti principali.

---

CSS di Base

Per lo styling della pagina utilizziamo Flexbox e media queries per adattare il layout alle diverse dimensioni dello schermo.

body {
  font-family: Arial, sans-serif;
  margin: 0;
}

.container {
  display: flex;
  flex-direction: column;
  padding: 20px;
}

.menu {
  list-style: none;
  display: flex;
  justify-content: space-around;
  padding: 0;
  background-color: #333;
}

.menu li a {
  color: white;
  text-decoration: none;
  padding: 10px 15px;
}

.menu li a:hover {
  background-color: #4CAF50;
}

@media (min-width: 768px) {
  .container {
    flex-direction: row;
    justify-content: space-between;
  }
}

Spiegazione delle scelte:

• flex-direction: column è usato come default per gli schermi piccoli, così il contenuto viene disposto verticalmente e leggibile su smartphone.

• La media query @media (min-width: 768px) cambia il layout per tablet e desktop, disponendo gli elementi orizzontalmente (flex-direction: row) e distribuendo lo spazio tra loro (justify-content: space-between).

• La personalizzazione del menu con hover migliora l’esperienza dell’utente rendendo i link più interattivi.

• L’uso della classe .container consente di applicare Flexbox a qualsiasi blocco principale senza modificare l’HTML, rendendo il CSS modulare e riutilizzabile.

---

📝 Esercizi Operativi

1. Convertire il layout in Grid: Prova a sostituire Flexbox con Grid per gestire le colonne e osserva le differenze nel comportamento del layout.

2. Menu adattivo per schermi piccoli: Modifica le media queries in modo che il menu diventi verticale o a scomparsa su dispositivi mobili.

3. Nuove sezioni: Aggiungi ulteriori <section> nella homepage e prova a allinearle correttamente usando Flexbox.

4. Personalizzazione grafica: Cambia colori, margini, padding e font per creare un tema coerente e gradevole.

5. Layout ibrido: Combina Flexbox e Grid nello stesso progetto per creare un layout complesso e completamente responsive.

Perfetto! Possiamo sviluppare in maniera dettagliata tutti gli esercizi operativi del modulo “Homepage Responsive”, spiegando come eseguirli passo passo, quali codici inserire e perché le scelte fatte sono importanti. Ti fornisco una guida narrativa completa.

1. Convertire il layout in Grid

Il primo esercizio consiste nel sostituire Flexbox con CSS Grid, una tecnica di layout che consente di gestire righe e colonne in modo più preciso.

Procedura:

1. Modifica la classe .container nel CSS così:

.container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr; /* tre colonne di uguale larghezza */
  grid-gap: 20px; /* spazio tra le colonne e righe */
  padding: 20px;
}

2. Rimuovi flex-direction e justify-content perché Grid gestisce automaticamente la disposizione.

Spiegazione:

• display: grid attiva il sistema a griglia.

• grid-template-columns: 1fr 1fr 1fr crea tre colonne di uguale larghezza. “fr” indica una frazione dello spazio disponibile.

• grid-gap mantiene lo spazio tra le celle della griglia senza dover usare margini manuali.

Risultato: Gli elementi all’interno di .container ora si dispongono in una griglia a tre colonne su desktop, ma si adattano verticalmente su schermi più piccoli se aggiungiamo media queries.

---

2. Menu adattivo per schermi piccoli

Per rendere il menu navigabile su smartphone, possiamo modificare le media queries in modo che i link si dispongano verticalmente e occupino tutta la larghezza.

Procedura:

@media (max-width: 767px) {
  .menu {
    flex-direction: column; /* menu verticale */
    align-items: stretch; /* i link occupano tutta la larghezza */
  }
  .menu li a {
    text-align: center; /* testo centrato */
    padding: 15px;
  }
}

Spiegazione:

• Con flex-direction: column il menu passa da orizzontale a verticale.

• align-items: stretch fa sì che ogni link riempia tutta la larghezza disponibile.

• L’utente può navigare facilmente anche su dispositivi piccoli.

---

3. Aggiungere nuove sezioni

Per esercitarsi con la disposizione di contenuti, aggiungiamo altre <section> alla homepage e le allineiamo con Flexbox.

Esempio HTML:

<main class="container">
  <section>
    <p>Benvenuti nella nostra homepage responsive.</p>
  </section>
  <section>
    <h2>Servizi</h2>
    <p>Scopri cosa possiamo fare per te.</p>
  </section>
  <section>
    <h2>Portfolio</h2>
    <p>Ecco alcuni nostri progetti recenti.</p>
  </section>
</main>

Esempio CSS (Flexbox):

.container {
  display: flex;
  flex-direction: column; /* verticale su mobile */
  gap: 20px;
  padding: 20px;
}

@media (min-width: 768px) {
  .container {
    flex-direction: row; /* disposizione orizzontale su desktop */
  }
}

Spiegazione:

• gap: 20px sostituisce i margini tra le sezioni e mantiene uniformità.

• flex-direction verticale per mobile e orizzontale per desktop migliora la leggibilità e l’estetica.

---

4. Personalizzazione grafica

Per rendere il sito più gradevole, possiamo cambiare colori, margini, padding e font.

Esempio CSS:

body {
  font-family: "Verdana", sans-serif;
  background-color: #f0f8ff; /* colore di sfondo chiaro */
  color: #333;
}

header {
  background-color: #1e90ff;
  color: white;
  padding: 30px;
  text-align: center;
}

.menu li a:hover {
  background-color: #ff6347; /* colore hover */
  border-radius: 5px;
}

Spiegazione:

• Scegliere un font leggibile come Verdana aumenta la leggibilità.

• Il contrasto tra testo e sfondo migliora l’accessibilità.

• border-radius aggiunge morbidezza ai link del menu.

---

5. Layout ibrido (Flexbox + Grid)

In questo esercizio combiniamo Flexbox e Grid nello stesso progetto per creare un layout più complesso ma responsive.

Procedura:

• Il <header> e <nav> rimangono gestiti da Flexbox per la facilità di allineamento dei link.

• Le sezioni principali all’interno di <main> vengono disposte con Grid.

main.container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  grid-gap: 20px;
  padding: 20px;
}

Spiegazione:

• repeat(auto-fit, minmax(250px, 1fr)) crea un layout flessibile: le sezioni occupano almeno 250px ma si adattano allo spazio disponibile.

• Grid gestisce la griglia delle sezioni, Flexbox continua a gestire il menu e l’header.

• Risultato: layout responsive, estetico e modulare, facile da aggiornare.

✅ Risultati Attesi

Al termine di questo modulo, sarai in grado di gestire il layout di una pagina web con il box model, utilizzare proprietà di display, creare menu di navigazione e realizzare homepage responsive, pronte per qualsiasi dispositivo.