Corso di HTML: 9 Strumenti per il Web Designer

9 – Strumenti per il Web Designer

In questo modulo ci concentreremo sugli strumenti essenziali che ogni web designer deve conoscere per creare, gestire e pubblicare siti web. L’obiettivo non è solo conoscere le tecnologie, ma diventare operativi, comprendendo come trasformare un progetto locale in un sito web accessibile a tutti, utilizzando piattaforme gratuite, strumenti di pubblicazione e CMS.

Pubblicazione Gratuita con GitHub Pages

Per chi desidera mettere online un sito statico senza costi, GitHub Pages è una soluzione eccellente. Questa piattaforma permette di trasformare un repository GitHub in un sito web accessibile a tutti, senza necessità di server complessi.

Passaggi pratici:

1. Creare un account GitHub
   Registrati su GitHub.com con email e password.

2. Creare un repository

   • Nome suggerito: nome-progetto.github.io

   • Carica i file principali: index.html, style.css, script.js.

3. Abilitare GitHub Pages

   • Vai su Settings → Pages.

   • Seleziona il branch principale (main) e la cartella (/root) come sorgente.

   • Salva le modifiche.

4. Ottenere l’URL del sito

   • GitHub fornirà un link del tipo https://username.github.io/nome-progetto/.

   • Verifica che la pagina sia visibile correttamente online.

Vantaggi:

• Completamente gratuito.

• Ideale per portfolio, siti statici o progetti personali.

• Aggiornamento semplice: basta pushare nuove modifiche al repository.

Uso di FTP e Hosting Condiviso

Per progetti più complessi o siti dinamici, è necessario un hosting condiviso con supporto FTP. Questa soluzione consente di gestire database, linguaggi server-side come PHP e piattaforme più articolate.

Procedura pratica:

1. Registrazione a un servizio di hosting
   Es.: Aruba, SiteGround, Hostinger.

2. Ottenere dati FTP

   • Host (es. ftp.miosito.com)

   • Username e Password

   • Porta (solitamente 21)

3. Usare un client FTP

   • Scarica FileZilla o software simili.

   • Inserisci host, username e password per connetterti al server.

   • Carica i file del sito nella cartella principale (public_html o equivalente).

4. Verifica del sito

   • Apri il dominio fornito dall’hosting per controllare la corretta pubblicazione.

Quando usare FTP e hosting condiviso:

• Progetti professionali.

• Ecommerce o siti con database.

• Necessità di linguaggi lato server.

Panoramica sui CMS (Content Management System)

I CMS sono strumenti che permettono di gestire contenuti web senza scrivere codice manualmente. I più diffusi sono WordPress e Joomla.

Vantaggi principali:

• Interfaccia grafica semplice per modificare contenuti, aggiungere pagine o post.

• Ampia disponibilità di temi grafici e plugin per funzionalità extra (SEO, moduli, slider).

• Supporto per blog, ecommerce e siti aziendali.

Quando conviene usare un CMS:

• Se il sito richiede aggiornamenti frequenti.

• Per progetti con più autori o collaboratori.

• Quando si desidera ridurre la gestione manuale di HTML, CSS e JavaScript.

Esempio pratico di utilizzo WordPress:

• Installare WordPress tramite hosting o local server.

• Scegliere un tema adatto (es. “Astra” per portfolio).

• Creare pagine principali: Home, Portfolio, Contatti.

• Installare plugin essenziali: SEO (Yoast), sicurezza, moduli di contatto.

Conclusione

Al termine di questo modulo, gli allievi saranno in grado di:

• Pubblicare siti statici gratuitamente con GitHub Pages.

• Caricare e gestire siti su hosting condiviso tramite FTP.

• Comprendere i vantaggi dei CMS e scegliere quando usarli.

• Diventare operativi nel passaggio dal progetto locale alla pubblicazione online, indipendentemente dalla complessità del sito.

Ecco uno sviluppo approfondito, narrativo e dettagliato dell’Esercizio Operativo del Modulo 9, strutturato per guidare gli studenti passo-passo:

Esercizio Operativo – Creazione e Pubblicazione di un Mini-Sito Personale

In questo esercizio metteremo in pratica quanto appreso sul modulo dedicato agli strumenti per il web designer. L’obiettivo è realizzare un mini-sito personale completo, comprenderne la struttura, collegarlo tra le pagine e pubblicarlo online in modo funzionante.

1. Creazione del mini-sito

Il primo passo è realizzare tre pagine principali:

• Home: pagina introduttiva con benvenuto, presentazione e link alle altre sezioni.

• Chi sono: pagina con informazioni personali, eventuali esperienze, competenze o interessi.

• Contatti: pagina con un form per permettere agli utenti di inviare messaggi.

Suggerimento pratico:

• Crea una cartella sul tuo computer, ad esempio mini-sito.

• All’interno crea tre file HTML: index.html, chi-sono.html, contatti.html.

• Organizza anche eventuali file CSS (style.css) e JS (script.js) nella stessa cartella o in sottocartelle css e js.

Esempio di struttura base della Home (index.html):

<!DOCTYPE html>
<html lang="it">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Home - Mio Mini-Sito</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <header>
    <h1>Benvenuto nel mio mini-sito</h1>
    <nav>
      <a href="index.html">Home</a> |
      <a href="chi-sono.html">Chi sono</a> |
      <a href="contatti.html">Contatti</a>
    </nav>
  </header>
  <main>
    <section>
      <p>Questa è la mia pagina principale. Qui puoi trovare informazioni su di me e sui miei progetti.</p>
    </section>
  </main>
  <footer>
    <p>© 2025 Nome Cognome</p>
  </footer>
</body>
</html>

Nota: I link interni tra le pagine (index.html, chi-sono.html, contatti.html) permettono una navigazione completa. Lo stesso schema può essere replicato nelle altre pagine modificando i contenuti principali.

2. Pubblicazione su GitHub Pages

Una volta realizzate le pagine, il passo successivo è portare il sito online gratuitamente usando GitHub Pages.

Passaggi consigliati:

1. Creare un account su GitHub, se non lo possiedi già.

2. Creare un repository nuovo, ad esempio mini-sito.

3. Caricare i file del sito nella cartella principale del repository.

4. Abilitare GitHub Pages dal menu Settings → Pages.

5. Verificare l’URL fornito da GitHub e controllare che tutte le pagine siano raggiungibili.

Questo metodo consente di rendere il sito visibile a chiunque tramite un semplice link, senza costi aggiuntivi.

3. Collegamenti interni tra le pagine

Per una navigazione coerente, ogni pagina deve collegarsi alle altre.

• Usa il tag <a href="nome-pagina.html">Testo Link</a> nei menu di navigazione.

• Assicurati che i percorsi siano corretti e relativi alla posizione dei file nella cartella.

Consiglio pratico:

Controlla sempre i collegamenti aprendo le pagine in locale prima di caricarle online. Un link rotto può compromettere l’esperienza utente e l’indicizzazione SEO.

4. Caricamento su Hosting Condiviso (opzionale)

Per chi vuole provare un ambiente più professionale, è possibile caricare il mini-sito su un hosting con FTP:

1. Registrati a un servizio di hosting condiviso.

2. Ottieni dati FTP: host, username, password.

3. Usa un client FTP (es. FileZilla) per trasferire tutti i file nella cartella principale del dominio.

4. Verifica online che il sito sia visibile correttamente.

Questa esperienza è utile per comprendere la gestione dei file su server remoti e per prepararsi a progetti più complessi.

5. Installazione di un CMS (facoltativo)

Per sperimentare con CMS gratuiti come WordPress, è possibile:

• Installare WordPress su hosting locale (es. con XAMPP) o su hosting condiviso.

• Creare una pagina iniziale e configurare menu e temi.

• Confrontare i vantaggi di un CMS rispetto al caricamento manuale di file HTML, CSS e JS.

L’uso del CMS permette di gestire contenuti dinamici e aggiornamenti frequenti in maniera più semplice rispetto alla gestione manuale.

Risultati Attesi

Al termine dell’esercizio, l’allievo sarà in grado di:

• Pubblicare un sito web statico su GitHub Pages in pochi minuti.

• Caricare file su server remoti usando FTP e hosting condiviso.

• Comprendere i principali CMS e sapere quando utilizzarli.

• Creare collegamenti interni tra le pagine e strutturare un mini-sito completo.

• Diventare operativo nella gestione di strumenti reali per il web design.

Queste competenze costituiscono la base per chi desidera diventare web designer operativo, capace di mettere online i propri progetti in modo rapido ed efficace.

Corso di HTML: 8 Ottimizzazione e SEO

8 – Ottimizzazione e SEO

In questo modulo ci concentreremo su due aspetti fondamentali di un sito web: l’ottimizzazione tecnica e la SEO (Search Engine Optimization). L’obiettivo è rendere le pagine web più veloci, facilmente navigabili, leggibili dai motori di ricerca e quindi più visibili agli utenti.

Un sito ben ottimizzato non solo migliora l’esperienza di chi lo visita, ma aumenta anche le probabilità di posizionarsi nei risultati dei motori di ricerca come Google.

Meta Tag e Struttura della Pagina

I meta tag sono elementi HTML inseriti nel <head> che forniscono informazioni ai browser e ai motori di ricerca. Una struttura corretta della pagina è essenziale per la SEO.

Esempio di struttura base:

<!DOCTYPE html>
<html lang="it">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>La mia prima pagina ottimizzata</title>
  <meta name="description" content="Pagina di esempio che mostra come ottimizzare il sito per SEO e velocità.">
  <meta name="keywords" content="HTML, CSS, SEO, Ottimizzazione, Web Design">
</head>
<body>
  
</body>
</html>

Spiegazione delle scelte:

• <title>: è il titolo della pagina e appare nei risultati dei motori di ricerca. Deve essere unico, chiaro e contenere le parole chiave principali.

• <meta name="description">: breve descrizione della pagina, sintetica e persuasiva. Influisce sul click-through rate dai motori di ricerca.

• <meta name="keywords">: elenco di parole chiave separato da virgole. Oggi Google non le considera più determinanti, ma altri motori potrebbero utilizzarle.

• <meta name="viewport">: essenziale per il responsive design; permette al sito di adattarsi a qualsiasi dispositivo.

Buone Pratiche SEO

Oltre ai meta tag, esistono diverse strategie per migliorare la SEO e la leggibilità del sito:

1. Titoli chiari e gerarchici

   • Utilizza <h1> per il titolo principale della pagina.

   • Usa <h2> e <h3> per sottotitoli e sezioni secondarie.

   • Questo aiuta motori di ricerca e utenti a comprendere rapidamente la struttura del contenuto.

2. Link interni

   • Collegare tra loro pagine correlate aiuta la navigazione e consente ai crawler dei motori di ricerca di indicizzare meglio i contenuti.

   • Esempio: <a href="portfolio.html">Vai al portfolio</a>

3. Immagini ottimizzate

   • Utilizza attributi alt descrittivi, ad esempio:
     <img src="foto-progetto.jpg" alt="Progetto Web Design 2025">

   • Riduci le dimensioni senza perdere qualità usando JPEG, PNG o WebP.

4. Contenuti chiari e leggibili

   • Organizza i testi in paragrafi brevi.

   • Usa liste puntate (<ul>) o numerate (<ol>) per facilitare la lettura.

5. Mobile-friendly

   • Assicurati che la pagina sia fruibile su smartphone e tablet.

   • Un layout responsive contribuisce a un migliore posizionamento SEO.

Performance e Velocità

La velocità di caricamento è fondamentale: pagine lente peggiorano l’esperienza utente e influiscono negativamente sul ranking SEO.

Strategie principali:

1. Riduzione del peso delle immagini

   • Comprimere le immagini senza perdita e utilizzare formati moderni (WebP).

   • Ridimensionare le immagini in base alle dimensioni massime necessarie sul sito.

2. Minificazione di CSS e JavaScript

   • Rimuovere spazi bianchi, commenti e righe vuote per ridurre le dimensioni dei file.

   • Strumenti consigliati: UglifyJS per JS, CSSNano per CSS.

3. Caching del browser

   • Impostare tempi di scadenza per i file statici in modo che il browser non li scarichi nuovamente ad ogni visita.

4. Riduzione delle richieste HTTP

   • Combinare file CSS e JS dove possibile.

   • Utilizzare immagini sprite o SVG per icone.

Esempio di Ottimizzazione CSS e HTML

Un semplice esempio pratico di ottimizzazione combinata di contenuto e immagini:

<section>
  <h2>Progetti Recenti</h2>
  <ul>
    <li>Progetto 1 – <a href="progetto1.html">Dettagli</a></li>
    <li>Progetto 2 – <a href="progetto2.html">Dettagli</a></li>
  </ul>
  <img src="progetto1.webp" alt="Screenshot del Progetto 1" class="img-fluid">
</section>

• L’uso di <ul> rende la lista più leggibile.

• class="img-fluid" (Bootstrap) permette all’immagine di adattarsi al contenitore.

• Formato WebP riduce il peso senza sacrificare la qualità.

Ecco uno sviluppo approfondito e narrativo dell’esercizio operativo proposto per il modulo SEO, con spiegazioni dettagliate, consigli pratici e indicazioni su come svolgere ogni punto:

Esercizio Operativo – Ottimizzazione e SEO

L’obiettivo di questo esercizio è mettere in pratica le conoscenze acquisite sul SEO e sull’ottimizzazione delle pagine web. Creeremo una pagina HTML strutturata correttamente, con contenuti chiari, immagini ottimizzate e meta tag appropriati, in modo che sia facilmente leggibile dai motori di ricerca e veloce da caricare.

1. Creare una pagina HTML con meta tag completi

La prima fase consiste nel creare la struttura base della pagina e inserire i meta tag principali. Questi elementi sono fondamentali per comunicare informazioni ai motori di ricerca.

Esempio:

<!DOCTYPE html>
<html lang="it">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Pagina SEO Esempio</title>
  <meta name="description" content="Esempio di pagina HTML ottimizzata per SEO con contenuti chiari e immagini ottimizzate.">
  <meta name="keywords" content="SEO, HTML, Ottimizzazione, Immagini, Performance">
  <link rel="stylesheet" href="stile.min.css">
</head>
<body>
  
</body>
</html>

Suggerimenti pratici:

• Il title deve essere sintetico, descrittivo e unico.

• La description aiuta l’utente a capire di cosa tratta la pagina direttamente dai risultati dei motori di ricerca.

• Le keywords sono opzionali, ma possono essere utili per motori di ricerca alternativi.

• Il file CSS collegato può essere già minificato per migliorare i tempi di caricamento (stile.min.css).

2. Inserire paragrafi con titoli strutturati

Organizzare i contenuti in modo chiaro migliora la leggibilità e la SEO. Usa titoli gerarchici (<h2>, <h3>) e paragrafi (<p>).

Esempio:

<section id="introduzione">
  <h2>Introduzione al SEO</h2>
  <p>Il SEO permette di rendere le pagine web più visibili sui motori di ricerca, aumentando il traffico organico e migliorando l’esperienza degli utenti.</p>
</section>
<section id="ottimizzazione">
  <h2>Ottimizzazione delle Immagini</h2>
  <h3>Formati e Peso</h3>
  <p>Le immagini devono essere leggere e in formati moderni (WebP o JPEG ottimizzati).</p>
</section>
<section id="performance">
  <h2>Velocità e Performance</h2>
  <p>Minificare CSS e JavaScript, utilizzare il caching e ridurre le richieste HTTP aiuta a migliorare la velocità di caricamento.</p>
</section>

Spiegazione:

• <h2> definisce le sezioni principali.

• <h3> è usato per sottosezioni.

• L’uso corretto dei titoli aiuta sia gli utenti che i crawler a comprendere la gerarchia dei contenuti.

3. Aggiungere immagini ottimizzate

Ogni immagine deve avere un attributo alt descrittivo e dimensioni adeguate per ridurre il peso della pagina.

Esempio:

<img src="esempio-progetto.webp" alt="Screenshot progetto SEO" class="img-fluid">

Spiegazioni:

• alt descrive l’immagine per i motori di ricerca e per gli utenti con disabilità visive.

• La classe img-fluid (se si usa Bootstrap o CSS personalizzato) garantisce che l’immagine sia flessibile e responsive.

• Formato WebP riduce il peso senza compromettere la qualità.

4. Creare link interni tra le sezioni

I link interni migliorano la navigazione e aiutano i motori di ricerca a indicizzare meglio la pagina.

Esempio:

<nav>
  <ul>
    <li><a href="#introduzione">Introduzione</a></li>
    <li><a href="#ottimizzazione">Ottimizzazione Immagini</a></li>
    <li><a href="#performance">Performance</a></li>
  </ul>
</nav>

Suggerimenti:

• I link interni rendono la pagina più user-friendly.

• Utilizza nomi chiari per gli anchor (href="#id_sezione") in modo che siano descrittivi e coerenti.

5. Applicare minificazione CSS e verificare i tempi di caricamento

• Minificazione: rimuove spazi, commenti e righe vuote dai file CSS e JS.

• Verifica performance: strumenti come Google PageSpeed Insights o Lighthouse permettono di valutare la velocità della pagina e ricevere suggerimenti pratici.

Esempio di file CSS minificato:

body{font-family:Arial,sans-serif;margin:0;padding:0}h2{color:#333}p{line-height:1.5;margin-bottom:15px}.img-fluid{max-width:100%;height:auto}

Risultati Attesi

Al termine di questo esercizio, sarai in grado di:

• Strutturare pagine HTML ottimizzate per SEO.

• Applicare meta tag corretti e contenuti SEO-friendly.

• Migliorare le prestazioni delle pagine riducendo il peso di immagini e codice.

• Garantire un’esperienza utente veloce e mobile-friendly su tutti i dispositivi.

Queste competenze sono fondamentali per chi vuole realizzare siti web professionali, visibili e performanti.

Corso di HTML: 7 Siti Responsive e Mobile

7 – Siti Responsive e Mobile

In questo modulo ci concentreremo sul responsive design, ovvero la capacità di un sito web di adattarsi automaticamente a qualsiasi dispositivo, dalle grandi schermate desktop ai piccoli smartphone. Comprendere il responsive design è fondamentale per garantire una buona esperienza utente e un corretto posizionamento sui motori di ricerca (SEO).

Impareremo a usare media queries, breakpoints, layout fluidi e immagini flessibili. Infine, introdurremo Bootstrap, un framework CSS che semplifica enormemente la creazione di siti responsive.

Concetto di Responsive Design

Il responsive design permette al sito di essere fruibile su qualsiasi dispositivo senza creare versioni separate per desktop, tablet o smartphone. Gli elementi della pagina, come colonne, immagini, testi e menu, si ridimensionano e si riposizionano automaticamente in base alla larghezza dello schermo.

Un sito responsive è importante perché:

• Migliora l’esperienza dell’utente, che può navigare facilmente anche da smartphone.

• Incrementa la SEO, in quanto Google favorisce siti mobile-friendly.

• Permette di gestire un unico codice, riducendo manutenzione e costi.

Per ottenere un sito veramente responsive occorre combinare:

1. Layout fluidi: le dimensioni degli elementi si adattano proporzionalmente alla larghezza dello schermo.

2. Media queries: applicano stili diversi in base alle dimensioni del dispositivo.

3. Immagini flessibili: che si ridimensionano automaticamente senza deformarsi.

Media Queries e Breakpoints

Le media queries sono regole CSS che applicano stili differenti a seconda delle caratteristiche del dispositivo, come la larghezza, l’altezza o l’orientamento dello schermo.

Esempio pratico:

body {
  background-color: lightblue;
}
@media only screen and (max-width: 768px) {
  body {
    background-color: lightgreen;
  }
}

Spiegazione:

• Il body ha uno sfondo azzurro di default.

• La regola @media only screen and (max-width: 768px) indica che se la larghezza dello schermo è ≤768px (tipico di tablet o smartphone), lo sfondo diventa verde chiaro.

• Questo è un esempio di breakpoint, il punto in cui il layout cambia per adattarsi a schermi più piccoli.

È possibile aggiungere più breakpoint per dispositivi diversi:

@media (max-width: 1024px) { /* Tablet */
  /* Stili specifici */
}
@media (max-width: 480px) { /* Smartphone */
  /* Stili specifici */
}

Layout Fluidi e Immagini Flessibili

Per rendere un sito veramente responsive, è fondamentale evitare unità fisse come pixel e usare unità relative (% o vw/vh). In questo modo, tutti gli elementi si adattano alla larghezza disponibile.

Esempio di layout fluido:

.container {
  width: 90%;   /* Larghezza relativa al viewport */
  margin: 0 auto; /* Centra il contenitore */
}

Per le immagini, si consiglia di usare max-width: 100% e height: auto:

img {
  max-width: 100%;
  height: auto;
}

Spiegazione:

• max-width: 100% impedisce all’immagine di superare la larghezza del contenitore.

• height: auto mantiene le proporzioni corrette.

• In combinazione con layout fluidi, le immagini diventano completamente adattive.

Introduzione a Bootstrap

Bootstrap è un framework CSS che rende semplice creare siti responsive senza scrivere tutto il CSS da zero. Fornisce:

• Sistema a griglie (grid) con righe e colonne.

• Componenti pronti come menu, bottoni, caroselli, form.

• Utility classes per margini, padding, colori e testi.

Esempio di griglia con Bootstrap:

<div class="container">
  <div class="row">
    <div class="col-md-6">Colonna 1</div>
    <div class="col-md-6">Colonna 2</div>
  </div>
</div>

Spiegazione:

• container è il contenitore principale, centrato e responsivo.

• row definisce una riga di colonne.

• col-md-6 indica che la colonna occupa 6 unità su 12 per dispositivi medi (tablet e desktop).

• Le colonne si ridimensionano automaticamente su schermi più piccoli, diventando una sopra l’altra se necessario.

Bootstrap semplifica la creazione di siti responsive perché evita di scrivere manualmente tutte le media queries e consente di creare layout complessi in pochi minuti.

Ecco uno sviluppo dettagliato e narrativo dell’esercizio pratico, completo di spiegazioni passo-passo e indicazioni operative, pensato per studenti che vogliono creare una pagina responsive funzionante su desktop, tablet e smartphone.

Esercizio – Pagina HTML Responsive

L’obiettivo di questo esercizio è realizzare una pagina web che si adatti automaticamente a diversi dispositivi: desktop, tablet e smartphone. Per raggiungere questo obiettivo, utilizzeremo layout fluidi, immagini flessibili, media queries e una prima griglia di Bootstrap.

1. Struttura Base della Pagina

Prima di tutto, creiamo la struttura HTML minima, con <!DOCTYPE html>, <html>, <head> e <body>. Nel <head> inseriremo i meta tag essenziali per il responsive design:

<!DOCTYPE html>
<html lang="it">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Pagina Responsive Esercizio</title>
  <link rel="stylesheet" href="stile.css"> <!-- CSS esterno -->
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>

Spiegazione:

• meta name="viewport": fondamentale per far sì che il layout risponda correttamente alla larghezza del dispositivo.

• Collegamento a Bootstrap: ci permetterà di utilizzare griglie e componenti responsive già pronti.

• CSS esterno: contiene le personalizzazioni aggiuntive oltre a Bootstrap.

2. Creare il Menu di Navigazione

Il menu deve essere orizzontale su desktop e verticale o a scomparsa su smartphone:

<header>
  <nav class="navbar navbar-expand-md navbar-dark bg-dark">
    <div class="container-fluid">
      <a class="navbar-brand" href="#">Logo</a>
      <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#menuNav">
        <span class="navbar-toggler-icon"></span>
      </button>
      <div class="collapse navbar-collapse" id="menuNav">
        <ul class="navbar-nav ms-auto">
          <li class="nav-item"><a class="nav-link" href="#">Home</a></li>
          <li class="nav-item"><a class="nav-link" href="#">Chi siamo</a></li>
          <li class="nav-item"><a class="nav-link" href="#">Servizi</a></li>
          <li class="nav-item"><a class="nav-link" href="#">Contatti</a></li>
        </ul>
      </div>
    </div>
  </nav>
</header>

Spiegazione:

• navbar-expand-md: il menu sarà orizzontale a partire dai dispositivi medi (tablet e desktop), mentre su smartphone diventa a scomparsa.

• navbar-toggler: bottone che permette di aprire il menu su schermi piccoli.

• ms-auto: spinge i link verso destra nel menu.

3. Layout a Colonne per il Contenuto

Creiamo tre colonne di testo affiancate su desktop usando Bootstrap:

<main class="container my-4">
  <div class="row">
    <div class="col-md-4 mb-3">
      <h2>Colonna 1</h2>
      <p>Testo della prima colonna. Qui puoi descrivere un argomento o un servizio.</p>
      <img src="https://via.placeholder.com/300x150" alt="Immagine 1" class="img-fluid">
    </div>
    <div class="col-md-4 mb-3">
      <h2>Colonna 2</h2>
      <p>Testo della seconda colonna. Adatta il contenuto al tema della pagina.</p>
      <img src="https://via.placeholder.com/300x150" alt="Immagine 2" class="img-fluid">
    </div>
    <div class="col-md-4 mb-3">
      <h2>Colonna 3</h2>
      <p>Testo della terza colonna. Puoi inserire link o altre informazioni.</p>
      <img src="https://via.placeholder.com/300x150" alt="Immagine 3" class="img-fluid">
    </div>
  </div>
</main>

Spiegazione:

• container: mantiene il contenuto centrato e con margini fluidi.

• row: crea una riga di colonne.

• col-md-4: ciascuna colonna occupa 4 unità su 12 su dispositivi medi e grandi, affiancandosi orizzontalmente.

• mb-3: aggiunge margine inferiore per separare le colonne su schermi piccoli.

• img-fluid: rende le immagini flessibili e responsive.

Su smartphone, le colonne si impilano automaticamente verticalmente grazie alla griglia di Bootstrap.

4. Media Queries Personalizzate (Opzionali)

Possiamo aggiungere media queries per personalizzare ulteriormente il layout, ad esempio modificando il font o la disposizione delle immagini:

@media (max-width: 768px) {
  main h2 {
    font-size: 1.2rem;
  }
  main p {
    font-size: 0.9rem;
  }
}

Spiegazione:

• Riduce le dimensioni dei titoli e paragrafi su tablet e smartphone.

• Le media queries permettono di adattare ogni aspetto del layout senza rompere la struttura fluida.

5. Footer Semplice

<footer class="bg-dark text-white text-center py-3">
  <p>© 2025 Nome Studente. Tutti i diritti riservati.</p>
</footer>

• Footer scuro con testo bianco, centrato.

• py-3: padding verticale per maggiore leggibilità.

6. Script Bootstrap

Per far funzionare il menu a scomparsa, aggiungiamo il JS di Bootstrap prima della chiusura del body:

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>

Competenze Acquisite con questo Esercizio

• Creare un layout fluido con colonne responsive.

• Inserire immagini flessibili che si ridimensionano in base alla larghezza del contenitore.

• Realizzare un menu di navigazione responsive con Bootstrap.

• Integrare media queries per modifiche personalizzate su diversi dispositivi.

• Comprendere il comportamento automatico della griglia Bootstrap su schermi di diverse dimensioni.

✅ Risultati Attesi

Al termine del modulo, sarai in grado di progettare e implementare siti web che si adattino automaticamente a qualsiasi dispositivo, dai grandi monitor desktop agli smartphone, combinando layout fluidi, media queries e, se desiderato, framework CSS come Bootstrap.

Corso di HTML: 6 Introduzione a JavaScript

6 – Introduzione a JavaScript

In questo modulo ci concentreremo su JavaScript, il linguaggio di programmazione che permette di rendere le pagine web interattive. Con JavaScript non ci limitiamo più a contenuti statici: possiamo rispondere alle azioni dell’utente, modificare testi, immagini e stili direttamente nel browser, e creare funzionalità dinamiche come menu interattivi, slideshow, calcoli automatici e molto altro.

Inserire Script in una Pagina HTML

Il primo passo per usare JavaScript è imparare a inserire il codice nella pagina HTML. Ci sono tre metodi principali:

1. Inline: il codice JavaScript è scritto direttamente negli attributi HTML. Ad esempio:

<button onclick="alert('Ciao!')">Clicca</button>

In questo caso, quando l’utente clicca sul bottone, viene mostrato un alert con il messaggio “Ciao!”. Questo metodo è utile per piccole azioni veloci, ma non è consigliato per progetti complessi perché mescola codice e contenuto.

2. Internal: il codice JavaScript viene inserito all’interno di un tag <script> nella pagina HTML, di solito prima della chiusura del <body>:

<!DOCTYPE html>
<html lang="it">
<head>
  <meta charset="UTF-8">
  <title>Esempio JavaScript</title>
</head>
<body>
  <h1 id="titolo">Benvenuti</h1>
  <button onclick="cambiaTesto()">Cambia Testo</button>
  <script>
  function cambiaTesto() {
    document.getElementById('titolo').innerText = 'Testo Modificato!';
  }
  </script>
</body>
</html>

Qui, il codice JavaScript è organizzato all’interno del documento e può gestire più elementi senza creare confusione.

3. Esterno: il codice viene messo in un file separato, ad esempio script.js, e collegato con:

<script src="script.js"></script>

Questo metodo è il più consigliato per siti complessi, perché permette di separare contenuto e comportamento, facilitando manutenzione e aggiornamenti.

Variabili e Funzioni

Variabili

Le variabili sono contenitori che memorizzano dati. In JavaScript possiamo dichiararle con:

let nome = 'Mario';   // variabile modificabile
const PI = 3.1416;    // costante, non modificabile
var eta = 25;         // vecchio metodo, sconsigliato

Le variabili permettono di memorizzare numeri, testi, valori booleani e molto altro, per poi usarli nei calcoli o nelle funzioni.

Funzioni

Le funzioni sono blocchi di codice riutilizzabili:

function saluta(nome) {
  alert('Ciao, ' + nome + '!');
}
saluta('Mario');

In questo esempio, la funzione saluta prende un parametro (nome) e mostra un alert personalizzato. Possiamo richiamarla tutte le volte che vogliamo.

Interazioni con l’Utente

JavaScript permette di interagire direttamente con l’utente tramite finestre di dialogo:

• alert(): mostra un messaggio

• prompt(): riceve un input dall’utente

• confirm(): chiede conferma (OK/Annulla)

Esempio pratico:

let nome = prompt('Inserisci il tuo nome:');
alert('Benvenuto, ' + nome + '!');

In questo modo possiamo raccogliere informazioni dall’utente e usarle immediatamente per personalizzare la pagina.

Manipolazione del DOM

Il DOM (Document Object Model) è una rappresentazione della struttura HTML della pagina. Con JavaScript possiamo modificare testi, immagini, stili e contenuti dinamicamente.

Esempio: Mostrare o nascondere contenuti

<!DOCTYPE html>
<html lang="it">
<head>
  <meta charset="UTF-8">
  <title>Interattività</title>
</head>
<body>
  <h2 id="titolo">Contenuto Segreto</h2>
  <p id="testo">Questo testo può essere nascosto o mostrato.</p>
  <button onclick="toggleTesto()">Mostra/Nascondi</button>
  <script>
  function toggleTesto() {
    let p = document.getElementById('testo');
    if(p.style.display === 'none') {
      p.style.display = 'block';
    } else {
      p.style.display = 'none';
    }
  }
  </script>
</body>
</html>

Spiegazione

• document.getElementById('testo') seleziona l’elemento HTML con id testo.

• p.style.display controlla se l’elemento è visibile o nascosto.

• La funzione toggleTesto() cambia lo stato ogni volta che l’utente clicca il bottone.

Perfetto! Possiamo sviluppare in maniera approfondita e narrativa gli esercizi operativi di JavaScript, con spiegazioni dettagliate, esempi di codice pronti da copiare e consigli pratici su cosa avviene in ogni passaggio. Suddividiamoli in paragrafi chiari.

Mini-Esercizi Operativi di JavaScript

1 – Modifica del Testo

In questo esercizio creeremo un pulsante che, quando cliccato, cambia il contenuto di un paragrafo. Questo permette di comprendere come manipolare il DOM e rispondere a eventi dell’utente.

<p id="paragrafo">Questo testo può cambiare.</p>
<button onclick="cambiaParagrafo()">Clicca qui</button>
<script>
function cambiaParagrafo() {
  document.getElementById('paragrafo').innerText = "Il testo è stato modificato!";
}
</script>

Spiegazione:

• document.getElementById('paragrafo') seleziona il paragrafo.

• innerText modifica il contenuto testuale.

• La funzione cambiaParagrafo() viene eseguita al click del bottone.

2 – Input dell’Utente

Chiederemo all’utente di inserire il suo colore preferito e cambieremo lo sfondo della pagina di conseguenza.

<button onclick="cambiaColore()">Scegli il tuo colore</button>
<script>
function cambiaColore() {
  let colore = prompt("Inserisci il tuo colore preferito (nome o codice esadecimale):");
  document.body.style.backgroundColor = colore;
}
</script>

Spiegazione:

• prompt() mostra una finestra per inserire dati.

• document.body.style.backgroundColor cambia il colore dello sfondo del body.

• Questo esercizio aiuta a collegare input dell’utente e modifiche dinamiche della pagina.

3 – Funzione con Parametro: calcolaArea

Creiamo una funzione calcolaArea che riceve base e altezza come parametri e mostra l’area di un rettangolo.

<button onclick="mostraArea()">Calcola Area</button>
<script>
function calcolaArea(base, altezza) {
  return base * altezza;
}
function mostraArea() {
  let base = parseFloat(prompt("Inserisci la base del rettangolo:"));
  let altezza = parseFloat(prompt("Inserisci l'altezza del rettangolo:"));
  alert("L'area del rettangolo è: " + calcolaArea(base, altezza));
}
</script>

Spiegazione:

• parseFloat() converte il testo inserito in numero.

• calcolaArea() prende due parametri e restituisce il risultato.

• mostraArea() gestisce l’interazione con l’utente.

4 – Mostra/Nascondi Multiplo

Creiamo due paragrafi con due bottoni indipendenti per mostrarli o nasconderli.

<p id="par1">Primo paragrafo</p>
<button onclick="toggle('par1')">Mostra/Nascondi 1</button>
<p id="par2">Secondo paragrafo</p>
<button onclick="toggle('par2')">Mostra/Nascondi 2</button>
<script>
function toggle(id) {
  let elemento = document.getElementById(id);
  if(elemento.style.display === "none") {
    elemento.style.display = "block";
  } else {
    elemento.style.display = "none";
  }
}
</script>

Spiegazione:

• La funzione toggle(id) è riutilizzabile per qualsiasi elemento passando il suo id.

• style.display controlla la visibilità dell’elemento.

5 – Alert Personalizzati

Combiniamo prompt() e alert() per salutare l’utente con un messaggio personalizzato.

<button onclick="salutaUtente()">Saluta</button>
<script>
function salutaUtente() {
  let nome = prompt("Come ti chiami?");
  alert("Ciao " + nome + ", benvenuto nel sito!");
}
</script>

Spiegazione:

• L’input dell’utente viene memorizzato in nome.

• L’alert mostra un messaggio concatenando il testo con il valore inserito.

6 – Modifica del Testo e dei Colori di Contenuti Nascosti

Possiamo estendere gli esercizi combinando toggle del testo e cambio colore:

<p id="testoSegreto">Contenuto segreto</p>
<button onclick="mostraNascondiColore()">Mostra/Nascondi e Colora</button>
<script>
function mostraNascondiColore() {
  let elemento = document.getElementById('testoSegreto');
  if(elemento.style.display === 'none') {
    elemento.style.display = 'block';
    elemento.style.color = 'blue';
  } else {
    elemento.style.display = 'none';
  }
}
</script>

Spiegazione:

• Qui si modifica sia la visibilità che il colore del testo al click.

7 – Cambiare Immagine della Pagina

<img id="foto" src="immagine1.jpg" alt="Immagine iniziale" width="200">
<button onclick="cambiaImmagine()">Cambia Immagine</button>
<script>
function cambiaImmagine() {
  document.getElementById('foto').src = "immagine2.jpg";
}
</script>

Spiegazione:

• Modifica dinamica dell’attributo src dell’immagine.

• Utile per slider o gallerie interattive.

8 – Calcolo Somma di Due Numeri

<button onclick="sommaNumeri()">Calcola Somma</button>
<script>
function sommaNumeri() {
  let num1 = parseFloat(prompt("Inserisci il primo numero:"));
  let num2 = parseFloat(prompt("Inserisci il secondo numero:"));
  alert("La somma è: " + (num1 + num2));
}
</script>

Spiegazione:

• Gestione numeri tramite prompt() e parseFloat().

• Calcolo semplice con + e risultato mostrato tramite alert.

9 – Piccolo Quiz

<button onclick="quiz()">Quiz</button>
<script>
function quiz() {
  let risposta = prompt("Qual è la capitale d'Italia?");
  if(risposta.toLowerCase() === "roma") {
    alert("Corretto!");
  } else {
    alert("Sbagliato, la risposta corretta è Roma.");
  }
}
</script>

Spiegazione:

• Confronto case-insensitive tramite toLowerCase().

• Possibilità di creare quiz interattivi con più domande.

10 – Eventi Multipli: onclick, onmouseover, onmouseout

<p id="par">Passa il mouse qui!</p>
<script>
let p = document.getElementById('par');
p.onclick = function() { alert("Hai cliccato sul paragrafo!"); };
p.onmouseover = function() { p.style.color = "red"; };
p.onmouseout = function() { p.style.color = "black"; };
</script>

Spiegazione:

• onclick reagisce al click.

• onmouseover cambia colore al passaggio del mouse.

• onmouseout ripristina lo stile.

• Mostra come combinare diversi eventi per rendere la pagina più interattiva.

✅ Risultati Attesi

Al termine di questo modulo, sarai in grado di inserire script JavaScript nelle pagine HTML, creare variabili e funzioni, interagire con l’utente e manipolare dinamicamente il DOM, rendendo le pagine web veramente interattive e operative.

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.

Corso di HTML: 4 Introduzione al CSS

4 – Introduzione al CSS

In questo modulo ci concentreremo sullo styling delle pagine web utilizzando i CSS (Cascading Style Sheets). Il CSS permette di separare il contenuto dalla presentazione, rendendo i siti più ordinati e facili da aggiornare. Mentre HTML definisce cosa viene mostrato, CSS definisce come viene mostrato.

Durante la lezione, gli studenti impareranno a gestire colori, font, dimensioni, spaziature, allineamenti e layout base. Verranno inoltre esplorati i tre metodi principali di applicazione del CSS: inline, internal ed external, con esempi pratici per comprendere vantaggi e limiti di ciascun approccio.

📌 Concetti Base: Selettori, Proprietà e Valori

Il CSS si basa su tre elementi fondamentali:

1. Selettori – identificano quali elementi HTML devono essere stilizzati.

2. Proprietà – definiscono l’aspetto da modificare (colore, font, margini, ecc.).

3. Valori – specificano il comportamento della proprietà scelta.

La sintassi di base del CSS è:

selettore {
  proprietà: valore;
}

Esempio pratico: vogliamo modificare i paragrafi (<p>) della pagina, impostando il colore del testo su blu e un font specifico:

p {
  color: blue;
  font-family: "Times New Roman", serif;
}

Spiegazione dettagliata:

• p è il selettore che prende tutti i paragrafi della pagina.

• color: blue; definisce il colore del testo.

• font-family: "Times New Roman", serif; imposta il tipo di carattere, con fallback serif nel caso in cui il font principale non sia disponibile.

Questo esempio mostra come CSS renda uniforme e coerente l’aspetto di più elementi senza dover ripetere codice HTML inline.

📌 Colori, Font, Dimensioni e Spaziature

Il CSS permette di gestire molti aspetti visivi:

Colori

I colori possono essere definiti in diversi modi:

• Nome colore: red, blue, green.

• Esadecimale: #FF0000 per il rosso.

• RGB: rgb(255,0,0).

Esempio:

h1 {
  color: #1E90FF;
}

Font

Possiamo definire il tipo, la dimensione e lo stile del carattere:

body {
  font-family: Arial, sans-serif;
  font-size: 16px;
  font-style: italic;
}

Spiegazione:

• font-family sceglie il tipo di carattere principale e i fallback.

• font-size imposta la dimensione del testo in pixel o altre unità (em, rem).

• font-style può essere normale, italic o oblique.

Dimensioni e Spaziature

• Margini (margin): spazio esterno all’elemento.

• Padding (padding): spazio interno all’elemento.

• Larghezza e altezza (width, height): dimensioni dei blocchi o immagini.

Esempio pratico:

div.card {
  width: 300px;
  height: 200px;
  margin: 20px;
  padding: 10px;
  border: 1px solid #ccc;
}

Spiegazione:

• La classe .card definisce un blocco di contenuto con dimensioni e spaziature controllate.

• border aggiunge un bordo visibile.

Allineamenti

• text-align gestisce l’allineamento orizzontale del testo (left, center, right).

• vertical-align regola la posizione verticale di elementi inline.

• La proprietà display permette di trasformare elementi inline in blocchi o viceversa.

Esempio:

h2 {
  text-align: center;
}

📌 Differenza tra Inline, Internal ed External CSS

1. Inline CSS

Lo stile viene applicato direttamente a un singolo elemento HTML tramite l’attributo style:

<p style="color:red; font-weight:bold;">Testo rosso e in grassetto</p>

Vantaggi: veloce per modifiche puntuali.

Svantaggi: difficile da mantenere su siti complessi, poco riutilizzabile.

2. Internal CSS

Gli stili sono inseriti in un blocco <style> all’interno dell’<head> della pagina:

<head>
  <style>
    p { color: green; font-size: 16px; }
    h1 { text-align: center; }
  </style>
</head>

Vantaggi: utile per stilizzare una singola pagina senza file esterni.

Svantaggi: non riutilizzabile su altre pagine.

3. External CSS

Il CSS è contenuto in un file separato (ad esempio stile.css) e collegato tramite <link>:

<head>
  <link rel="stylesheet" href="stile.css">
</head>

Vantaggi: separazione completa tra struttura e stile, facilità di manutenzione e riutilizzo su più pagine.

Consiglio: è il metodo consigliato per progetti complessi o siti multipagina.

📝 Esercizi Operativi

Per consolidare le conoscenze:

1. Colori e Font
   Modifica tutti i paragrafi del tuo sito aggiungendo colore, font e dimensione.

   p {
     color: #333333;
     font-family: Verdana, sans-serif;
     font-size: 14px;
   }

2. Box Model e Spaziature
   Crea un <div> con margini e padding visibili.

   <div class="card">Contenuto del box</div>
   

   .card {
     width: 250px;
     height: 150px;
     margin: 20px;
     padding: 15px;
     border: 1px solid black;
   }

3. Allineamenti
   Centra il testo del titolo principale e i bottoni della pagina:

   h1, button {
     text-align: center;
   }

4. Applicazione di Stile Inline e Internal
   Prova ad aggiungere uno stile inline a un singolo paragrafo e confrontalo con quello definito internamente nel <style>.

5. Creazione di un File External CSS
   Salva un file stile.css con tutte le regole viste e collegalo alla tua pagina HTML. Modifica le proprietà e osserva l’impatto su tutta la pagina.

⚡ Esempio: Pagina Colorata con CSS Esterno

In questo esercizio mettiamo in pratica quanto appreso sui CSS. Creeremo una semplice pagina HTML e un file CSS esterno che definirà colori, font, spaziature e layout di base. L’obiettivo è comprendere come separare contenuto e presentazione e come applicare uno stile coerente su tutta la pagina.

1. Struttura della Pagina HTML

Iniziamo con la pagina HTML principale:

<!DOCTYPE html>
<html lang="it">
<head>
  <meta charset="UTF-8">
  <title>Pagina Colorata</title>
  <link rel="stylesheet" href="stile.css">
</head>
<body>
  <header>
    <h1>Benvenuto nella mia Pagina</h1>
  </header>
  <section>
    <p>Questo è un paragrafo stilizzato con CSS esterno.</p>
    <p>Possiamo usare colori, font personalizzati e margini.</p>
  </section>
  <footer>
    <p>© 2025 Mario Rossi</p>
  </footer>
</body>
</html>

Spiegazione delle scelte

1. Dichiarazione <!DOCTYPE html>: indica al browser che si tratta di HTML5, garantendo compatibilità con tutti i browser moderni.

2. <html lang="it">: specifica la lingua della pagina, utile per accessibilità e SEO.

3. <head>: contiene informazioni sulla pagina, inclusa la codifica dei caratteri (UTF-8) e il collegamento al file CSS esterno con <link rel="stylesheet" href="stile.css">.

4. <body>: racchiude i contenuti visibili, suddivisi in header, section e footer.

5. Header e Footer: separano visivamente e semanticamente le informazioni principali e di chiusura.

6. Section con paragrafi: permette di organizzare il contenuto in blocchi tematici chiari e leggibili.

2. Il File CSS Esterno

Creiamo un file separato chiamato stile.css con le seguenti regole:

body {
  background-color: #f9f9f9;
  font-family: Arial, sans-serif;
  color: #333333;
  margin: 20px;
}
header {
  background-color: #4CAF50;
  color: white;
  padding: 20px;
  text-align: center;
}
p {
  font-size: 16px;
  line-height: 1.5;
  margin-bottom: 15px;
}
footer {
  background-color: #ddd;
  color: #333;
  padding: 10px;
  text-align: center;
}

Spiegazione delle scelte CSS

• body: impostiamo uno sfondo chiaro, un font leggibile e un margine globale per separare il contenuto dai bordi del browser.

• header: colore di sfondo verde (#4CAF50) per evidenziare il titolo della pagina, testo bianco per contrasto e padding per creare spazio interno.

• p: dimensione del font adeguata (16px) e line-height per migliorare la leggibilità, margine inferiore per separare i paragrafi.

• footer: colore grigio chiaro, padding e centratura del testo, per distinguere chiaramente la chiusura della pagina.

Motivazione: separare gli stili in un file esterno consente di modificare rapidamente l’aspetto dell’intero sito senza intervenire su ogni pagina HTML. Inoltre, migliora la manutenzione e la leggibilità del codice.

3. Esercizi Operativi

Questi esercizi permettono di sperimentare direttamente il CSS:

1. Tema personale: modifica i colori di sfondo (background-color) e dei testi (color) per creare un tema grafico coerente con il tuo progetto personale.

   body {
     background-color: #e0f7fa;
     color: #1a237e;
   }

2. Font multipli: cambia il font dei titoli (h1) e dei paragrafi (p) usando almeno due font diversi per distinguere gerarchicamente il contenuto.

   h1 {
     font-family: "Georgia", serif;
   }
   p {
     font-family: "Verdana", sans-serif;
   }

3. Margini e Padding: modifica gli spazi tra sezioni e paragrafi per creare un layout più arioso e leggibile.

   section {
     margin: 30px 0;
     padding: 15px;
   }

4. Nuova Section: aggiungi un nuovo blocco di contenuto e stilizzalo con classi personalizzate.

   <section class="news">
     <h2>Novità</h2>
     <p>Benvenuto nella sezione Novità, dove condivido aggiornamenti e contenuti interessanti.</p>
   </section>

   .news {
     background-color: #fff3e0;
     padding: 20px;
     border: 1px solid #ffb74d;
   }

5. Esperimento con CSS Inline e Internal: prova a stilizzare un singolo paragrafo inline e confrontalo con il CSS interno in <style> e quello esterno, osservando come cambia la manutenzione e la consistenza dello stile.

4. Consigli per la pratica

• Salva sempre i file CSS nello stesso percorso del file HTML o usa un percorso relativo corretto.

• Usa nomi di classi descrittivi (.news, .card) per facilitare la lettura e la gestione degli stili.

• Testa le modifiche in diversi browser per assicurarti della compatibilità.

• Ricorda che il CSS è cumulativo e gerarchico: le regole più specifiche o più vicine all’elemento prevalgono su quelle generali.

✅ Risultati Attesi

Al termine di questo modulo, sarai in grado di applicare stili CSS ai tuoi contenuti HTML, gestire colori, font, dimensioni e spaziature, e utilizzare i tre metodi principali di integrazione del CSS. Sarai pronto per creare pagine web esteticamente curate, coerenti e facilmente manutenibili.