lunedì 2 marzo 2026

Corso di HTML: 3 Strutturare i contenuti

3 – Strutturare i Contenuti di una Pagina Web

In questo modulo ci concentreremo su come organizzare in maniera chiara, coerente e semantica i contenuti di una pagina web. La struttura di una pagina HTML non riguarda solo l’aspetto visivo, ma anche la logica con cui i contenuti vengono organizzati. Una struttura coerente e semantica migliora la fruizione da parte degli utenti e rende la pagina più facilmente interpretabile dai motori di ricerca, aumentando l’accessibilità e l’usabilità del sito.

Impareremo ad utilizzare elementi semantici come <header>, <footer>, <section>, <article>, <aside> e <nav>, oltre a costruire tabelle e form di input per rendere la pagina interattiva e funzionale.

📌 Elementi Semantici

Gli elementi semantici forniscono significato al contenuto, aiutando sia i browser sia gli utenti a comprendere la struttura della pagina.

<header> contiene solitamente il titolo del sito o della pagina e i menu principali. È la sezione introduttiva che compare nella parte superiore della pagina.
<footer> racchiude informazioni di chiusura, come copyright, contatti o link utili. Si trova alla fine della pagina.
<section> definisce una sezione tematica del contenuto, ad esempio “Chi siamo” o “Servizi offerti”.
<article> è dedicato a contenuti indipendenti, come articoli di blog, news o post. Può essere condiviso autonomamente.
<aside> è utilizzato per contenuti laterali o correlati, come box informativi, link utili o citazioni.
<nav> raccoglie i link di navigazione principali, ad esempio il menu di un sito.

Esempio pratico di struttura semantica di pagina:

<body>
  <header>
    <h1>Il mio sito personale</h1>
    <nav>
      <a href="#home">Home</a>
      <a href="#portfolio">Portfolio</a>
      <a href="#contatti">Contatti</a>
    </nav>
  </header>
  <section id="home">
    <article>
      <h2>Benvenuto nel mio sito</h2>
      <p>Qui puoi trovare informazioni sul mio lavoro e i miei progetti.</p>
    </article>
    <aside>
      <p>Notizie recenti: nuove pubblicazioni e aggiornamenti!</p>
    </aside>
  </section>
  <footer>
    <p>&copy; 2025 Nome Cognome - Tutti i diritti riservati</p>
  </footer>
</body>

Spiegazione delle scelte:

La struttura separa chiaramente intestazione, contenuto principale e footer.
<article> contiene contenuti autonomi, mentre <aside> aggiunge informazioni correlate senza interrompere il flusso principale.
<nav> permette agli utenti di spostarsi facilmente tra le sezioni della pagina.

📌 Tabelle HTML

Le tabelle servono per organizzare dati tabulari in righe e colonne. Una tabella HTML è composta da:

<table> → elemento principale della tabella.
<tr> → definisce una riga.
<th> → definisce l’intestazione della colonna (grassetto e centrato di default).
<td> → definisce una cella con il contenuto dei dati.

Esempio di tabella:

<table border="1">
  <tr>
    <th>Nome</th>
    <th>Email</th>
    <th>Ruolo</th>
  </tr>
  <tr>
    <td>Mario Rossi</td>
    <td>mario.rossi@email.com</td>
    <td>Web Designer</td>
  </tr>
  <tr>
    <td>Luisa Bianchi</td>
    <td>luisa.bianchi@email.com</td>
    <td>Content Creator</td>
  </tr>
</table>

Spiegazione:

<th> è utilizzato per intestazioni di colonne, migliorando la leggibilità.
<tr> separa logicamente ogni riga, mentre <td> contiene i dati effettivi.
L’attributo border="1" aggiunge un bordo visibile, utile per esercitazioni e prototipi.

📌 Form di Input

I form permettono di raccogliere dati dagli utenti e sono essenziali per newsletter, contatti o registrazioni. Un form HTML si costruisce con <form> e contiene elementi di input come <input> e <textarea>.

Esempio pratico di form di contatto:

<form action="/invia-dati" method="post">
  <label for="nome">Nome:</label>
  <input type="text" id="nome" name="nome" placeholder="Inserisci il tuo nome" required>
  <label for="email">Email:</label>
  <input type="email" id="email" name="email" placeholder="Inserisci la tua email" required>
  <label for="messaggio">Messaggio:</label>
  <textarea id="messaggio" name="messaggio" rows="4" placeholder="Scrivi qui il tuo messaggio" required></textarea>
  <button type="submit">Invia</button>
</form>

Spiegazione dettagliata:

<form action="/invia-dati" method="post"> specifica dove inviare i dati e con quale metodo.
Gli attributi id e name permettono di collegare label e input e di identificare i dati lato server.
placeholder fornisce un suggerimento visivo per l’utente.
required obbliga l’utente a compilare il campo prima di inviare il form.
<textarea> serve per messaggi più lunghi.
<button type="submit"> invia i dati al server.

📌 Consigli Operativi per la Lezione

Durante le tre ore di lezione, gli studenti dovranno:

Creare una pagina con header, footer e almeno due section, inserendo un article e un aside in ciascuna sezione.
Costruire una tabella con dati inventati (ad esempio elenco di contatti o prodotti).
Creare un form di contatto completo di input per nome, email e messaggio.
Verificare la coerenza semantica: ogni elemento deve avere senso nel contesto e migliorare la leggibilità.

📌 Obiettivi di Apprendimento

Al termine del modulo, gli studenti saranno in grado di:

Comprendere l’importanza della struttura semantica di una pagina web.
Utilizzare correttamente header, footer, section, article, aside e nav.
Costruire tabelle ben strutturate e accessibili.
Creare form di input con attributi utili all’usabilità e all’accessibilità.
Applicare le regole apprese per costruire pagine coerenti, leggibili e pronte per essere stilizzate con CSS o rese interattive con JavaScript.

Ecco una versione narrativa, approfondita e completa del Modulo 3 con l’esempio pratico del CV personale, comprensiva di spiegazioni dettagliate, motivazioni delle scelte, e guida passo passo agli esercizi. Il testo è pensato per essere didattico, narrativo e pronto per la lettura in aula o online.

🔹 Esempio: Creare un CV Personale Online

In questo esercizio praticheremo tutte le conoscenze acquisite sul Modulo 3, combinando elementi semantici, tabelle e form per creare un curriculum vitae online. L’obiettivo è realizzare una pagina chiara, leggibile e funzionale, che contenga informazioni personali, esperienze lavorative, istruzione, competenze e contatti.

📌 Struttura della Pagina

Ogni pagina HTML deve iniziare con la dichiarazione <!DOCTYPE html>, seguita dall’elemento <html> che racchiude tutto il contenuto. All’interno di <html>, <head> contiene informazioni come charset e titolo, mentre <body> ospita tutti gli elementi visibili.

<!DOCTYPE html>
<html lang="it">
<head>
  <meta charset="UTF-8">
  <title>CV Personale</title>
</head>
<body>
  <!-- Contenuti visibili andranno qui -->
</body>
</html>

Spiegazione:

<meta charset="UTF-8"> assicura che il testo venga interpretato correttamente con caratteri speciali.
<title> appare nella scheda del browser.
Il corpo della pagina <body> conterrà header, sezioni, articoli, aside, form e footer.

📌 Header e Navigazione

L’header contiene il nome del candidato e il menu di navigazione interno, facilitando lo spostamento tra le sezioni.

<header>
  <h1>Mario Rossi</h1>
  <nav>
    <a href="#esperienza">Esperienza</a> |
    <a href="#istruzione">Istruzione</a> |
    <a href="#contatti">Contatti</a>
  </nav>
</header>

Spiegazione:

<h1> è il titolo principale del CV.
<nav> raccoglie i link interni tramite attributi href="#id" per una navigazione fluida.
Il simbolo | serve solo da separatore visivo tra i link.

📌 Sezioni e Articoli

Le sezioni principali sono create con <section>, mentre <article> racchiude contenuti autonomi come esperienze o progetti.

<section id="esperienza">
  <h2>Esperienza Lavorativa</h2>
  <article>
    <h3>Web Developer - Azienda XYZ</h3>
    <p>Dal 2020 ad oggi, sviluppo siti web e applicazioni online.</p>
  </article>
</section>

Spiegazione:

<section> delimita una sezione tematica.
<article> indica un contenuto indipendente, utile se vogliamo condividere questa sezione singolarmente.
Gli ID permettono ai link del nav di scorrere direttamente alla sezione corrispondente.

📌 Tabelle per l’Istruzione

Le tabelle organizzano dati in modo chiaro e leggibile.

<section id="istruzione">
  <h2>Istruzione</h2>
  <table border="1">
    <tr><th>Anno</th><th>Corso</th></tr>
    <tr><td>2018</td><td>Laurea in Informatica</td></tr>
    <tr><td>2016</td><td>Diploma Liceo Scientifico</td></tr>
  </table>
</section>

Spiegazione:

<th> definisce le intestazioni delle colonne.
<td> contiene i dati.
L’attributo border="1" è utile per esercitazioni e prototipi, facilitando la leggibilità.

📌 Contenuti Laterali con Aside

L’elemento <aside> serve per informazioni aggiuntive correlate.

<aside>
  <h3>Competenze Tecniche</h3>
  <p>HTML, CSS, JavaScript, Python, SQL</p>
</aside>

Spiegazione:

<aside> non interrompe il flusso principale.
Utile per competenze, link a portfolio o informazioni laterali.

📌 Form di Contatto

Il form permette agli utenti di contattare il candidato.

<section id="contatti">
  <h2>Contatti</h2>
  <form>
    <label for="email">Email:</label>
    <input type="email" id="email" name="email" placeholder="Inserisci la tua email" required><br>
    <label for="messaggio">Messaggio:</label><br>
    <textarea id="messaggio" name="messaggio" placeholder="Scrivi qui il tuo messaggio" required></textarea><br>
    <input type="submit" value="Invia">
  </form>
</section>

Spiegazione:

<form> contiene tutti i campi di input.
Gli attributi id e name collegano le label ai campi.
required obbliga l’utente a compilare i campi.
<textarea> permette di scrivere messaggi più lunghi.

📌 Footer

Il footer chiude la pagina con informazioni generali.

<footer>
  <p>© 2025 Mario Rossi</p>
</footer>

Spiegazione:

<footer> contiene informazioni di chiusura e copyright.
Può includere anche link a privacy, termini o contatti.

📝 Esercizi Operativi

Sezione Progetti:

Aggiungi una sezione “Progetti” con almeno 2 articoli descrittivi.

<section id="progetti">
  <h2>Progetti</h2>
  <article>
    <h3>Sito Portfolio</h3>
    <p>Progettazione e sviluppo di un portfolio personale online.</p>
  </article>
  <article>
    <h3>App Gestione Task</h3>
    <p>Applicazione web per gestire attività quotidiane con JavaScript.</p>
  </article>
</section>

Link nel Aside:

Inserisci collegamenti a siti esterni che mostrano il portfolio.

<aside>
  <h3>Portfolio Online</h3>
  <a href="https://portfolio1.example.com" target="_blank">Portfolio 1</a><br>
  <a href="https://portfolio2.example.com" target="_blank">Portfolio 2</a>
</aside>

Tabella dell’Istruzione:
Aggiungi righe per corsi extra o certificazioni.
```
<tr><td>2019</td><td>Corso avanzato di JavaScript</td></tr>
```

Form Personalizzato:

Aggiungi campo telefono o checkbox per newsletter.

<label for="telefono">Telefono:</label>
<input type="tel" id="telefono" name="telefono" placeholder="Inserisci il tuo numero"><br>
<label><input type="checkbox" name="newsletter"> Iscriviti alla newsletter</label>

Riorganizzazione Nav:

Aggiungi link interni logici e prova il menu.

<nav>
  <a href="#esperienza">Esperienza</a> |
  <a href="#istruzione">Istruzione</a> |
  <a href="#progetti">Progetti</a> |
  <a href="#contatti">Contatti</a>
</nav>

✅ Risultati Attesi

Al termine di questo modulo, sarai in grado di strutturare contenuti complessi in pagine HTML usando correttamente elementi semantici, tabelle e form. Saprai creare un curriculum vitae online completamente funzionale e accessibile, pronto per essere arricchito con CSS e interattività tramite JavaScript nei moduli successivi.

domenica 1 marzo 2026

Corso di HTML: 2 Fondamenti di HTM

2 – Fondamenti di HTML

In questo modulo ci concentreremo sulla costruzione di pagine web utilizzando HTML, il linguaggio di markup che fornisce la struttura ai contenuti del Web. HTML permette di definire titoli, paragrafi, liste, link e immagini, nonché di aggiungere attributi che ne modificano il comportamento o l’aspetto. Lo scopo principale è comprendere come creare una pagina funzionante da zero e prepararsi per l’integrazione di CSS e JavaScript nei moduli successivi.

📌 Struttura base di una pagina HTML

Ogni pagina HTML ha una struttura fondamentale che deve essere rispettata affinché il browser interpreti correttamente il contenuto e lo mostri all’utente in modo coerente. La struttura di base si compone di quattro elementi principali:

<!DOCTYPE html>
<html>
<head>
<body>

1. Questa dichiarazione va sempre all’inizio del documento HTML e indica al browser che il documento è scritto in HTML5, la versione più recente e standardizzata di HTML.

Senza <!DOCTYPE html>, i browser potrebbero interpretare la pagina in “modalità quirks”, cioè comportarsi come se fosse HTML vecchio, causando problemi di visualizzazione o compatibilità.
Pensalo come un istruzione di compatibilità: “Browser, interpreta questo documento come HTML5”.

2. Il tag `<html>` racchiude tutti gli elementi della pagina, sia quelli visibili all’utente che quelli non visibili ma utili per i browser e i motori di ricerca.

Spesso si specifica l’attributo lang per indicare la lingua del documento, ad esempio lang="it" per l’italiano.
Questo aiuta i motori di ricerca e gli screen reader a interpretare correttamente i contenuti, migliorando accessibilità e SEO.

Esempio concettuale:

<html lang="it">
  <!-- contenuti della pagina -->
</html>

3. La sezione `<head>` contiene tutte le informazioni non visibili direttamente all’utente ma fondamentali per il funzionamento della pagina.

Alcuni dei principali elementi contenuti in <head>:
- <title> → definisce il titolo della pagina, visibile nella scheda del browser e nei risultati dei motori di ricerca.
- <meta> → definisce metadati, come la codifica dei caratteri (charset="UTF-8") e le informazioni per SEO.
- <link> → permette di collegare fogli di stile esterni (CSS) o icone.
- <script> → eventuali script JavaScript da caricare nella pagina.

Perché è importante il head:

Senza un head correttamente strutturato, i browser potrebbero mostrare caratteri strani, non applicare correttamente i CSS o penalizzare la pagina nei risultati di ricerca.

4. Il tag `<body>` contiene tutti i contenuti visibili all’utente, come testi, immagini, link, video e moduli.

Ogni elemento che l’utente vede deve essere all’interno del body: se metti contenuti fuori dal body, il browser potrebbe ignorarli o mostrarli in modo irregolare.
Possiamo pensare al body come il “palco” della nostra pagina: tutto ciò che l’utente può vedere e interagire deve trovarsi qui.

📌 Elementi di testo

Per strutturare correttamente i contenuti testuali, HTML mette a disposizione tag semantici che aiutano sia l’utente che i motori di ricerca a comprendere il significato delle informazioni.

Titoli

<h1> → titolo principale della pagina (unico per pagina).
<h2> → sottotitolo, di secondo livello.
<h3> … <h6> → titoli di importanza decrescente.
Consiglio: Utilizzare i titoli in ordine logico, senza saltare livelli, per migliorare leggibilità e SEO.

Paragrafi

<p> serve a creare paragrafi di testo separati.
Consente di organizzare il contenuto in blocchi leggibili e stilizzabili tramite CSS.

Elenchi

Elenchi puntati → <ul> + <li>
Elenchi numerati → <ol> + <li>
Gli elenchi permettono di presentare informazioni in modo chiaro e ordinato, facilitando la lettura.

Link

<a href="URL">Testo del link</a>
L’attributo href indica la destinazione del collegamento.
Altri attributi utili:
- title → testo informativo che appare al passaggio del mouse.
- target="_blank" → apre il link in una nuova scheda.

📌 Attributi più comuni

Gli attributi sono proprietà che modificano il comportamento di un elemento HTML.

Ecco i più frequenti:

src → definisce la sorgente di immagini o media.

<img src="foto.jpg" alt="Descrizione della foto">

alt → testo alternativo per immagini; utile per accessibilità e SEO.
title → informazioni aggiuntive visibili al passaggio del mouse.
href → URL di destinazione dei link.

Nota importante: L’uso corretto degli attributi aumenta:

L’accessibilità per utenti con disabilità.
La comprensibilità dei contenuti da parte dei motori di ricerca.
La professionalità e chiarezza della pagina.

✅ Consigli pratici per principianti

Sempre chiudere i tag: <p>Testo</p>.
Organizzare il contenuto: titolo → sottotitoli → paragrafi → elenchi.
Usare attributi significativi: nomi di immagini chiari, link descrittivi.
Validare il codice: strumenti come W3C Validator aiutano a verificare errori HTML.
Testare su più browser: Chrome, Firefox, Edge, Safari.

⚡ Esempio: Creare la propria prima pagina “Hello World”

Per mettere in pratica quanto appreso, creeremo una pagina HTML minimale. Apri il tuo editor di testo (come VS Code) e crea un file chiamato index.html. Inserisci il seguente codice:

<!DOCTYPE html>
<html lang="it">
<head>
  <meta charset="UTF-8">
  <title>Hello World</title>
</head>
<body>
  <h1>Hello World!</h1>
  <p>Questa è la mia prima pagina web in HTML.</p>
  <a href="https://www.google.com" title="Vai a Google" target="_blank">Visita Google</a>
</body>
</html>

In questo esempio, il titolo della pagina viene visualizzato nella scheda del browser grazie a <title>, mentre il contenuto visibile include un titolo principale, un paragrafo descrittivo e un link cliccabile. L’attributo target="_blank" fa sì che il link si apra in una nuova scheda del browser.

📝 Esercizi Operativi

1. Modifica il titolo della pagina in “La mia prima pagina HTML”.

2. Cambia il testo del paragrafo con una breve descrizione di te stesso o del tuo progetto.

3. Aggiungi un secondo paragrafo e inserisci un elenco numerato dei tuoi hobby utilizzando <ol>.

4. Aggiungi un link a un sito a tua scelta, impostando il titolo con l’attributo title.

5. Inserisci una seconda intestazione <h2> e prova a scrivere un testo di sottotitolo.

⚡ Esercizi Svolti: La mia prima pagina HTML

Abbiamo gli esercizi operativi:

Modifica il titolo della pagina in “La mia prima pagina HTML”.
Cambia il testo del paragrafo con una breve descrizione di te stesso o del tuo progetto.
Aggiungi un secondo paragrafo e inserisci un elenco numerato dei tuoi hobby utilizzando <ol>.
Aggiungi un link a un sito a tua scelta, impostando il titolo con l’attributo title.
Inserisci una seconda intestazione <h2> e scrivi un testo.

Soluzione completa

Apri il tuo editor di testo (ad esempio VS Code) e crea un file chiamato index.html. Inserisci il seguente contenuto:

<!DOCTYPE html>
<html lang="it">
<head>
  <meta charset="UTF-8">
  <title>La mia prima pagina HTML</title>
</head>
<body>
  <!-- Intestazione principale -->
  <h1>Ciao! Benvenuto nel mio sito</h1>
  <!-- Paragrafo con descrizione personale -->
  <p>Mi chiamo Alessandra Bianchi e sono appassionata di scrittura, lettura e tecnologia. In questo sito condivido alcune informazioni su di me e sui miei interessi.</p>

  <!-- Secondo paragrafo con elenco numerato dei miei hobby -->
  <p>I miei hobby principali sono:</p>
  <ol>
    <li>Scrivere racconti e poesie</li>
    <li>Leggere libri di fantascienza</li>
    <li>Programmare piccole pagine web</li>
    <li>Suonare la chitarra</li>
  </ol>

  <!-- Link a un sito a scelta -->
  <p>Un sito che consiglio per aggiornamenti tecnologici è:
    <a href="https://www.techcrunch.com" title="Vai a TechCrunch" target="_blank">TechCrunch</a>
  </p>

  <!-- Seconda intestazione con testo -->
  <h2>Il mio percorso di apprendimento</h2>
  <p>Sto imparando a costruire pagine web passo dopo passo, iniziando dalle basi dell'HTML e proseguendo con CSS e JavaScript. L’obiettivo è creare siti completi e funzionali.</p>
</body>
</html>

Spiegazione dettagliata di ogni esercizio e soluzione

1. Modifica del titolo

<title>La mia prima pagina HTML</title>

Il titolo appare nella scheda del browser.
Abbiamo sostituito “Hello World” con un titolo più personale e descrittivo.

2. Paragrafo con descrizione personale

<p>Mi chiamo Alessandra Bianchi e sono appassionata di scrittura, lettura e tecnologia...</p>

Abbiamo inserito una breve presentazione personale.
<p> serve a delimitare un paragrafo di testo.

3. Secondo paragrafo con elenco numerato

<p>I miei hobby principali sono:</p>
<ol>
  <li>Scrivere racconti e poesie</li>
  <li>Leggere libri di fantascienza</li>
  <li>Programmare piccole pagine web</li>
  <li>Suonare la chitarra</li>
</ol>

<ol> crea un elenco numerato.
<li> definisce ciascun elemento della lista.
Abbiamo aggiunto un secondo paragrafo introduttivo prima dell’elenco per chiarezza.

4. Aggiunta di un link

<a href="https://www.techcrunch.com" title="Vai a TechCrunch" target="_blank">TechCrunch</a>

href indica l’URL del sito.
title è il testo che appare al passaggio del mouse.
target="_blank" apre il link in una nuova scheda.
L’utente può sostituire l’URL e il testo a suo piacimento.

5. Seconda intestazione con testo

<h2>Il mio percorso di apprendimento</h2>
<p>Sto imparando a costruire pagine web passo dopo passo...</p>

<h2> serve come sottotitolo, crea una gerarchia logica nella pagina.
Il testo spiega il proprio percorso di apprendimento, ma può essere personalizzato.

Risultato visivo nel browser

Titolo della pagina: “La mia prima pagina HTML”.
Intestazione principale <h1>: “Ciao! Benvenuto nel mio sito”.
Paragrafo descrittivo con informazioni personali.
Secondo paragrafo con elenco numerato dei hobby.
Link a un sito esterno cliccabile che si apre in una nuova scheda.
Sottotitolo <h2> con testo descrittivo del proprio percorso.

Questo esempio mostra come strutturare una prima pagina HTML completa rispettando le richieste degli esercizi. Gli studenti possono copiare il codice e vedere subito i risultati nel browser, imparando il significato di ogni tag e attributo.

✅ Risultati Attesi

Al termine di questo modulo, sarai in grado di creare pagine HTML strutturate, utilizzare correttamente titoli, paragrafi, elenchi e link, applicare gli attributi principali e comprendere come la struttura base di HTML costituisca la spina dorsale di ogni sito web. Queste competenze ti renderanno pronto a procedere con CSS e JavaScript nei moduli successivi, aggiungendo stile e interattività alle tue pagine.

sabato 28 febbraio 2026

Corso di HTML: 1 - Introduzione al Web

1 – Introduzione al Web

Cos’è Internet e il World Wide Web

In questo primo modulo ci addentreremo nel mondo del web partendo dalle basi. È fondamentale comprendere la differenza tra Internet e il World Wide Web. Internet è la rete globale di computer collegati tra loro, mentre il World Wide Web è l’insieme di pagine web accessibili tramite browser. Quando digitiamo l’indirizzo di un sito, ad esempio www.wikipedia.org, il nostro computer (il cosiddetto “client”) invia una richiesta al server remoto che ospita la pagina. Il server risponde inviando il codice della pagina, composto da HTML, CSS e JavaScript, e il browser lo interpreta per visualizzare la pagina sullo schermo.

Differenza tra HTML, CSS e JavaScript

Per costruire pagine web funzionali e gradevoli è indispensabile conoscere le tre tecnologie principali. HTML (HyperText Markup Language) definisce la struttura della pagina: titoli, paragrafi, link, immagini ed elenchi. CSS (Cascading Style Sheets) si occupa dello stile grafico, gestendo colori, font, spaziature e layout. JavaScript, infine, permette di aggiungere dinamismo e interattività, reagendo agli input dell’utente, modificando contenuti in tempo reale e creando animazioni. Una metafora utile è: HTML = scheletro, CSS = vestiti e design, JavaScript = impianti elettrici e automatismi.

Strumenti necessari per lavorare

Prima di scrivere codice, è fondamentale predisporre l’ambiente di lavoro. È necessario avere un computer aggiornato e un browser moderno, come Google Chrome o Firefox. Successivamente, è consigliabile installare Visual Studio Code, un editor di testo professionale che facilita la scrittura del codice grazie alle estensioni. Tra le più utili troviamo Live Server, per vedere in tempo reale le modifiche effettuate, Prettier, per mantenere il codice ordinato e leggibile, e HTML CSS Support, per suggerimenti e completamento automatico durante la scrittura.

Creare la prima pagina web

Dopo aver configurato l’ambiente, possiamo passare alla pratica. Creeremo un file chiamato index.html contenente HTML, CSS e JavaScript di base. Questo ci permetterà di comprendere come le tre tecnologie interagiscono tra loro. Ecco un esempio:

<!DOCTYPE html>
<html lang="it">
<head>
  <meta charset="UTF-8">
  <title>Prima Pagina Web</title>
  <style>
    body {
      font-family: Arial, sans-serif;
      background-color: #f5f5f5;
      margin: 20px;
    }
    h1 {
      color: #2c3e50;
    }
    p {
      color: #34495e;
    }
    button {
      padding: 10px 15px;
      background-color: #2980b9;
      color: white;
      border: none;
      cursor: pointer;
      margin-top: 10px;
    }
  </style>
</head>
<body>
  <h1>Ciao, mondo!</h1>
  <p>Questa è la mia prima pagina web in HTML, CSS e JavaScript.</p>
  <button onclick="alert('Hai cliccato il pulsante!')">Cliccami!</button>
</body>
</html>

Spiegazione del codice

Il tag <style> contiene regole CSS che definiscono il font, i colori e l’aspetto del pulsante. L’elemento <button> utilizza JavaScript per generare un messaggio di alert al click, aggiungendo interattività alla pagina. Ogni elemento HTML ha una funzione chiara: <h1> per il titolo principale, <p> per il paragrafo descrittivo e <button> per creare un pulsante cliccabile.

Questa esperienza permette di comprendere come HTML, CSS e JavaScript lavorino insieme per creare una pagina completa e interattiva. Inoltre, impostare correttamente l’ambiente di sviluppo consente di testare subito le modifiche, rendendo l’apprendimento più efficace e immediato.

Ecco una versione dettagliata e narrativa del mini-esercizio operativo, con spiegazioni passo passo e le motivazioni dietro le modifiche, in modo che sia immediatamente fruibile dagli studenti. Ho mantenuto il tono educativo e ho spiegato le scelte fatte nel codice:

📝 Mini-Esercizio Operativo – Personalizzare la prima pagina

In questo esercizio metteremo in pratica quanto appreso nel modulo precedente modificando alcuni elementi della nostra pagina web. L’obiettivo è comprendere come HTML, CSS e JavaScript lavorino insieme per creare contenuti interattivi e personalizzabili.

Passo 1 – Modificare il titolo della pagina

Il titolo della pagina appare nella scheda del browser e aiuta l’utente a riconoscere il sito. Per cambiarlo, individua il tag <title> all’interno della sezione <head> del file index.html e sostituisci il testo con:

<title>Benvenuto nel mio sito personale</title>

Spiegazione:

<title> definisce il titolo della pagina, visibile nella scheda del browser e nei risultati dei motori di ricerca.
Cambiare questo testo non influisce sul contenuto visibile della pagina, ma migliora l’esperienza dell’utente e l’indicizzazione SEO.

Passo 2 – Modificare il colore dello sfondo

Per rendere la pagina più accogliente, possiamo modificare lo sfondo usando CSS. Individua lo stile del body nella sezione <style> e sostituisci il colore di sfondo con lightblue:

body {
  font-family: Arial, sans-serif;
  background-color: lightblue;
  margin: 20px;
}

Spiegazione:

background-color imposta il colore di sfondo della pagina.
L’utilizzo di lightblue rende la pagina più luminosa e gradevole.
Modificare lo stile tramite CSS consente di separare la struttura (HTML) dall’aspetto grafico, facilitando future personalizzazioni.

Passo 3 – Cambiare il messaggio dell’alert

Il pulsante presente nella pagina attiva un messaggio tramite JavaScript. Per rendere l’interazione più significativa, modifica il testo del messaggio così:

<button onclick="alert('Ottimo lavoro, sei pronto per il prossimo modulo!')">Cliccami!</button>

Spiegazione:

onclick è un attributo HTML che associa un’azione JavaScript al click del pulsante.
La funzione alert() mostra una finestra pop-up con il messaggio desiderato.
Cambiando il testo, rendiamo l’interazione più motivante e contestualizzata all’apprendimento.

Risultato finale del codice completo della pagina

Dopo le modifiche, il file index.html sarà così:

<!DOCTYPE html>
<html lang="it">
<head>
  <meta charset="UTF-8">
  <title>Benvenuto nel mio sito personale</title>
  <style>
    body {
      font-family: Arial, sans-serif;
      background-color: lightblue;
      margin: 20px;
    }
    h1 {
      color: #2c3e50;
    }
    p {
      color: #34495e;
    }
    button {
      padding: 10px 15px;
      background-color: #2980b9;
      color: white;
      border: none;
      cursor: pointer;
      margin-top: 10px;
    }
  </style>
</head>
<body>
  <h1>Ciao, mondo!</h1>
  <p>Questa è la mia prima pagina web in HTML, CSS e JavaScript.</p>
  <button onclick="alert('Ottimo lavoro, sei pronto per il prossimo modulo!')">Cliccami!</button>
</body>
</html>

✅ Competenze acquisite

Dopo aver completato questo mini-esercizio, avrai sviluppato le seguenti competenze:

Comprensione del funzionamento di Internet e del Web: sai come il browser comunica con i server e interpreta i contenuti HTML, CSS e JavaScript.
Conoscenza dei ruoli di HTML, CSS e JavaScript: HTML struttura la pagina, CSS ne definisce l’aspetto e JS la rende interattiva.
Installazione e configurazione degli strumenti di lavoro: sai usare Visual Studio Code, Live Server e altre estensioni utili.
Creazione e modifica di una pagina web interattiva: sei in grado di personalizzare titoli, colori e

venerdì 27 febbraio 2026

Corso di Programmazione Strutturata e OOP: 8 Test di un programma

🧪 8 Test di un programma

🎯 Obiettivi

Comprendere l’importanza dei test nel ciclo di vita del software
Distinguere tra test manuali e test automatici
Saper scrivere unit test per funzioni e classi in Python
Validare applicazioni con input previsti e imprevisti

📘 Contenuti del Modulo

🔹 1. Cos’è un test

Un test è una verifica del comportamento del programma rispetto agli output attesi.
Serve per garantire che funzioni, classi e moduli facciano ciò che devono.
I test aiutano a:
- Scoprire bug
- Verificare modifiche (regressioni)
- Garantire la manutenibilità

🔹 2. Test manuale vs test automatico

Tipo di test	Come si fa	Quando usarlo	Esempio
Test manuale	Inserimento diretto di input e osservazione dell’output	In fase iniziale o esplorativa	Avviare una funzione e vedere se stampa ciò che ci si aspetta
Test automatico	Codice che verifica altre funzioni	In sviluppo e debugging professionale	Uso del modulo `unittest`

🔹 3. Scrivere test per funzioni e classi

Esempio – Funzione da testare:

def somma(a, b):
    return a + b

✅ Test manuale:

print(somma(2, 3))  # Output atteso: 5

✅ Test automatico:

import unittest

class TestSomma(unittest.TestCase):
    def test_somma_interi(self):
        self.assertEqual(somma(2, 3), 5)

    def test_somma_zero(self):
        self.assertEqual(somma(0, 0), 0)

    def test_somma_negativi(self):
        self.assertEqual(somma(-1, -2), -3)

if __name__ == '__main__':
    unittest.main()

🔹 4. Validazione del software

Cosa succede se l’input non è previsto?

💥 Codice con errore:

print(somma("a", 2))  # Errore: TypeError

🎯 Possiamo gestire l’errore oppure testarlo:

def somma(a, b):
    if not isinstance(a, (int, float)) or not isinstance(b, (int, float)):
        raise TypeError("Devono essere numeri")
    return a + b

✅ E relativo test:

def test_tipo_errato(self):
    with self.assertRaises(TypeError):
        somma("a", 2)

🛠️ Attività Pratiche

✍️ 1. Scrivi casi di test per funzioni esistenti

Funzione di esempio:

def dividi(a, b):
    return a / b

Scrivi 3 test:

Divisione normale
Divisione con b = 1
Divisione per 0 (gestire con try/except o testare con assertRaises)

🧰 2. Introdurre il modulo `unittest`

Crea un file test_calcoli.py e importa:

import unittest
from calcoli import somma, dividi

Usa setUp() per inizializzare valori, tearDown() per pulire.

🚀 3. Progetto finale – Mini App e test

👩‍💻 App: un calcolatore che fa somma, sottrazione, moltiplicazione, divisione.

📦 Struttura:

progetto_calcolatrice/
│
├── calcolatrice.py         # Funzioni
├── app.py                  # Interfaccia utente
└── test_calcolatrice.py    # Test con unittest

👨‍🔬 Esempi di test da includere:

test_somma_positivi
test_divisione_zero
test_input_stringa (che solleva errore)

🧠 Test di valutazione – 6 domande

1. Perché servono i test nei programmi?
A) Per scrivere meno codice
B) Per controllare che il programma funzioni
C) Per evitare i commenti

2. Cosa fa assertEqual() in unittest?
A) Confronta due numeri
B) Controlla che due valori siano uguali
C) Aggiunge due numeri

3. Come si scrive un test per un errore previsto?
A) assertErrore()
B) assertRaises()
C) tryAssert()

4. Qual è la differenza tra test manuale e test automatico?
A) Il manuale si scrive da soli, l’automatico no
B) Il manuale si osserva, l’automatico è codice
C) Nessuna

5. Dove si scrivono i test automatici?
A) In fogli di calcolo
B) In file .txt
C) In file .py con unittest

6. Il test self.assertEqual(somma(2, 2), 5) è…
A) Corretto
B) Fallito
C) Sintattico

Risposte

B B B B C B

giovedì 26 febbraio 2026

Corso di Programmazione Strutturata e OOP: 7 Design dell’interfaccia utente

🎨 7 Design dell’Interfaccia Utente

🎯 Obiettivi Formativi

Comprendere i concetti fondamentali di UI (User Interface) e UX (User Experience)
Imparare a distinguere e progettare interfacce testuali, grafiche e web
Utilizzare librerie Python per la realizzazione di interfacce interattive
Applicare principi di semplicità, coerenza e usabilità nel design

📚 Contenuti Teorici

🔹 1. Concetti Base di UI/UX

Differenza tra UI (aspetto) e UX (esperienza utente)
Principi fondamentali: chiarezza, consistenza, feedback, tolleranza agli errori
Errori comuni nel design dell’interfaccia

🔹 2. Tipologie di Interfacce

Testuali (CLI): linee di comando, menu numerici, prompt
Grafiche (GUI): pulsanti, finestre, etichette, slider
Web-based: moduli HTML, CSS, JavaScript, responsive design

🔹 3. Librerie grafiche per Python

Tkinter – semplice, integrata, perfetta per GUI di base
PyGame – ideale per giochi e interfacce grafiche dinamiche
PyQt – per progetti più complessi e professionali (multifinestra)

🔹 4. Progettare un’interfaccia usabile

Workflow di progettazione: mockup → wireframe → codice
Concetti di accessibilità, gerarchia visiva, e affordance
Coerenza tra elementi: layout, colori, comportamento

🛠️ Attività Pratiche

🧮 1. Creare una calcolatrice GUI con Tkinter

Obiettivo: progettare una semplice calcolatrice (somma, sottrazione, moltiplicazione, divisione)
Funzioni: display numerico, bottoni numerici e operatori, gestione errori
Estensione facoltativa: modalità scientifica

🖥️ 2. Sviluppare un menù interattivo da console

Progettare un'interfaccia a scelta multipla da terminale (es. menu di un'app)
Navigazione tramite input numerico
Esempi: diario digitale, agenda, gestione liste

🔍 3. Analizzare e migliorare un’interfaccia esistente

Scegliere un’interfaccia reale (app mobile, software desktop, sito web)
Valutare in base ai principi UX/UI: intuitività, estetica, efficacia
Proporre modifiche migliorative tramite wireframe o descrizione tecnica

🧪 Test e Verifica

Quiz teorico a scelta multipla su concetti UI/UX, librerie e principi di design
Check-list di valutazione per analizzare una GUI esistente (rubrica)
Revisione peer-to-peer dei progetti degli studenti (valutazione tra pari)

🧰 Materiali Extra

Template GUI Tkinter di base da personalizzare
Strumenti online per mockup: Figma, Draw.io, Balsamiq
Mini-guida illustrata: “10 regole d’oro della UX”

💬 Discussione finale

“La buona interfaccia si dimentica, la cattiva si fa notare.”
Riflessione collettiva: quali sono le app o i siti con le interfacce migliori secondo te?
Qual è il confine tra funzionalità e bellezza nel design?

mercoledì 25 febbraio 2026

Corso di Programmazione Strutturata e OOP: 6 IDE e ambienti di sviluppo

🔧 6 IDE e Ambienti di Sviluppo

🎯 Obiettivi:

Comprendere cos’è un IDE e il suo ruolo nella produttività del programmatore
Acquisire dimestichezza con ambienti professionali e strumenti integrati
Configurare, esplorare e usare ambienti come Thonny, VS Code, PyCharm e Replit
Avviare un piccolo progetto software, con controllo versioni base

🔍 Cos’è un IDE?

Un IDE (Integrated Development Environment) è un ambiente integrato che semplifica la scrittura, l’esecuzione, il debug e la gestione del codice. Include:

Editor di codice (con evidenziazione della sintassi)
Terminale integrato
Strumenti di debug (punti di interruzione, variabili in tempo reale)
Autocompletamento e linting
Gestione dei file di progetto
Integrazione con sistemi di versionamento (Git)

⚖️ Confronto tra IDE

IDE	Adatto per…	Pro	Contro
Thonny	Principianti in Python	Interfaccia semplice, installazione veloce	Limitato per progetti grandi
VS Code	Tutti i linguaggi	Estensioni infinite, leggero, Git integrato	Richiede configurazione iniziale
PyCharm	Python avanzato	Potente, supporto completo per Django, Flask	Pesante e richiede licenza Pro per alcune funzioni
Replit	Lavoro in cloud	Nessuna installazione, condivisione facile	Prestazioni limitate, meno controllo su ambienti

🏗️ Struttura di un progetto software (esempio base)

Un progetto professionale è composto da:

/mia-app/
├── main.py                # Codice principale
├── /modules/             # File modulari
│   └── util.py
├── requirements.txt      # Librerie da installare
├── README.md             # Documentazione del progetto
├── .gitignore            # File da escludere dal controllo di versione
└── /venv/                # Ambiente virtuale (opzionale)

🧰 Uso integrato degli strumenti

Strumento	Funzione
Editor	Scrittura del codice con evidenziazione e suggerimenti
Terminale	Esecuzione di comandi, script, installazione pacchetti
Debugger	Trovare errori tramite breakpoints e ispezione
Controllo versione (Git)	Salvare versioni del progetto, collaborare in team

🧪 Attività pratiche

⚙️ 1. Configurare un ambiente di sviluppo completo

Installare VS Code o Thonny
Installare Python, Git
Aggiungere estensioni: Python, GitLens (su VS Code)
Configurare l’ambiente virtuale (python -m venv venv)

💡 2. Progetto guida: una mini-app in Python

Obiettivo: creare una calcolatrice base da terminale con struttura modulare

Passaggi:

Creare una cartella calcolatrice
Scrivere main.py e una funzione in modules/operazioni.py
Avviare da terminale: python main.py
Eseguire debug passo passo

Ecco la conclusione del modulo, con l'ultima attività completata, un test di verifica e uno spunto per il dialogo in classe o nel blog.

🌐 3. Introduzione al controllo versione con Git (concetti base)

Comando Git	Cosa fa
`git init`	Inizializza un repository
`git add .`	Aggiunge file al tracking
`git commit -m "messaggio"`	Salva una versione del progetto
`git status`	Mostra lo stato attuale dei file
`git log`	Elenco dei commit effettuati

👉 Puoi usare Git anche da VS Code, grazie al pannello "Source Control", per una gestione visiva più intuitiva.

🧪 Test di verifica (4 domande)

Cos’è un IDE e quale delle seguenti NON è una sua funzione?
A) Evidenziazione della sintassi
B) Esecuzione del codice
C) Installazione automatica del sistema operativo
D) Debug interattivo
Quale IDE è consigliato per principianti in Python?
A) Visual Studio
B) PyCharm
C) Thonny
D) Replit
Cosa fa il comando git commit?
A) Elimina il progetto
B) Invia il progetto via email
C) Crea un salvataggio dello stato attuale
D) Installa nuove librerie
Quale file contiene l’elenco delle librerie usate in un progetto Python?
A) .gitignore
B) README.md
C) main.py
D) requirements.txt

💬 Riflessione finale

💡 Domanda per la discussione:
Secondo te, è meglio iniziare con un IDE semplice e poi passare a strumenti professionali, o è utile affrontare subito ambienti più completi come VS Code o PyCharm?

📌 Conclusione

Gli IDE non sono solo "editor": sono ambienti completi di lavoro, fondamentali per scrivere codice in modo efficiente e professionale.
Imparare a usarli significa diventare sviluppatori consapevoli, capaci non solo di scrivere codice, ma di gestire, testare e documentare progetti reali.
E con Git, si inizia anche a ragionare in ottica di lavoro di squadra e versionamento, competenze chiave in ogni ambito software moderno.

martedì 24 febbraio 2026

Corso di Programmazione Strutturata e OOP: 5 Gestione della memoria

💾 5 Gestione della Memoria

Quando programmiamo, ogni dato che utilizziamo – numeri, stringhe, immagini, strutture complesse – deve essere memorizzato in uno spazio fisico: la memoria RAM. Comprendere come questa viene organizzata e gestita significa entrare nel livello strutturale dell’informatica, dove efficienza, velocità e stabilità del software dipendono da scelte progettuali consapevoli.

La gestione della memoria non è solo un dettaglio tecnico: è uno degli elementi che distingue un codice “che funziona” da un codice robusto, scalabile e performante.

📌 Cos'è la memoria in un programma

La memoria è uno spazio indirizzabile composto da celle numerate (indirizzi). Ogni cella può contenere una quantità limitata di dati. Quando scriviamo:

x = 5

accadono diverse operazioni invisibili:

Viene creato un oggetto intero con valore 5.
Questo oggetto viene allocato in memoria.
Il nome x diventa un riferimento a quell’oggetto.

È importante comprendere che in Python le variabili non contengono direttamente il valore, ma un riferimento a un oggetto memorizzato altrove.

Stack e Heap (concetto generale)

In molti linguaggi la memoria si divide concettualmente in:

Stack → memoria veloce, organizzata in modo strutturato (variabili locali, chiamate di funzione).
Heap → memoria dinamica, usata per oggetti creati durante l’esecuzione.

Python gestisce automaticamente queste aree, ma internamente utilizza meccanismi simili.

📦 Variabili, strutture dati e spazio occupato

🔹 Variabili semplici

Un intero (int) o un booleano occupano meno memoria rispetto a strutture complesse, ma in Python anche gli interi sono oggetti, quindi hanno un overhead interno (metadati, gestione del tipo, contatore di riferimenti).

Esempio:

a = 10
b = 10

In Python, piccoli interi possono essere condivisi (ottimizzazione interna), quindi a e b possono riferirsi allo stesso oggetto in memoria.

🔹 Liste

Una lista non contiene direttamente i valori, ma riferimenti agli oggetti.

lista = [1, 2, 3]

In memoria abbiamo:

L’oggetto lista
Tre oggetti intero
Tre riferimenti nella lista

Questo significa che una lista cresce in modo dinamico e può richiedere riallocazioni di memoria quando aumenta di dimensione.

🔹 Dizionari

I dizionari utilizzano tabelle hash. Ogni elemento richiede:

Chiave
Valore
Calcolo hash
Struttura di gestione collisioni

Sono estremamente veloci nelle ricerche, ma consumano più memoria rispetto a una lista equivalente.

🔹 Array vs Liste

Strutture come gli array (ad esempio tramite librerie scientifiche) sono più efficienti perché memorizzano dati omogenei in modo contiguo, riducendo overhead e migliorando la località di memoria.

📏 Cosa significa “occupare spazio”?

Ogni oggetto occupa:

Spazio per il valore
Spazio per il tipo
Spazio per il contatore di riferimenti
Eventuale spazio per strutture interne

Un programma è “pesante” quando:

Crea troppi oggetti inutili
Duplica dati invece di riutilizzarli
Mantiene riferimenti non necessari
Usa strutture complesse quando non servono

Esempio inefficiente:

numeri = []
for i in range(1000000):
    numeri.append(i)

Se i dati non servono tutti contemporaneamente, una soluzione più efficiente potrebbe essere usare un generatore, che non carica tutto in memoria.

🧹 Garbage Collection in Python

Python utilizza due meccanismi principali:

1️⃣ Reference Counting

Ogni oggetto ha un contatore di riferimenti. Quando il contatore scende a zero, l’oggetto viene eliminato.

a = [1, 2, 3]
b = a
del a

L’oggetto non viene eliminato finché b esiste.

2️⃣ Garbage Collector Ciclico

Gestisce i riferimenti circolari, cioè oggetti che si riferiscono tra loro impedendo al contatore di scendere a zero.

Esempio concettuale:

a = []
b = []
a.append(b)
b.append(a)

Qui i due oggetti si referenziano reciprocamente.

Python interviene periodicamente per liberare memoria in questi casi.

⚠ Tuttavia, il Garbage Collector non è una soluzione magica: mantenere oggetti inutilizzati rallenta comunque il sistema.

⚠️ Errori comuni

❌ Variabili non inizializzate

Provocano errori di runtime e indicano cattiva gestione dello stato del programma.

❌ Sovrascrittura involontaria

lista = [1,2,3]
lista = 5

Il nome cambia significato, generando potenziali bug logici.

❌ Copie inutili

nuova_lista = lista[:]

Se non necessario, questa operazione raddoppia l’uso di memoria.

❌ Memory leak logici

In Python non sono comuni come in C/C++, ma possono verificarsi quando oggetti restano referenziati senza necessità.

🚀 Strategie per scrivere codice più efficiente

Usare generatori (yield) per grandi sequenze
Eliminare variabili inutilizzate (del)
Riutilizzare strutture dati quando possibile
Scegliere la struttura dati più adatta
Evitare copie profonde non necessarie
Profilare la memoria con strumenti dedicati

🔬 Attività pratiche approfondite

🔎 1. Visualizzazione della memoria

Utilizzare strumenti didattici come:

pythontutor.com

Osservare:

Creazione oggetti
Riferimenti
Eliminazione variabili

Obiettivo: sviluppare consapevolezza visiva dei meccanismi interni.

📊 2. Analisi comparata

Confrontare:

Versione inefficiente

lista = [i for i in range(1000000)]
somma = sum(lista)

Versione ottimizzata

somma = sum(i for i in range(1000000))

Misurare:

Tempo di esecuzione
Consumo di memoria

🧪 3. Laboratorio guidato

Progetto: analizzatore di dati numerici

Obiettivo:

Leggere numeri
Calcolare media
Non conservare dati inutili

Soluzione efficiente:

Elaborazione progressiva
Uso minimo di memoria
Nessuna lista intermedia

🎯 Conclusione

La gestione della memoria è il punto di incontro tra teoria dell’informazione, architettura dei calcolatori e qualità del software.

Comprendere:

Come vengono allocati gli oggetti
Come funzionano i riferimenti
Quando la memoria viene liberata
Come scegliere le strutture dati

significa scrivere programmi più veloci, più puliti e più professionali.

Un buon programmatore non pensa solo a “far funzionare” il codice: pensa a come occupa lo spazio, quanto consuma e quanto può scalare nel tempo.

🧪 Verifica le tue conoscenze

1. Cosa fa la garbage collection in Python?

2. Cosa succede se usi una variabile non inizializzata?

3. Quale delle seguenti strutture occupa in genere più memoria?

Punteggio: 0/3

lunedì 2 marzo 2026

3 – Strutturare i Contenuti di una Pagina Web

📌 Elementi Semantici

📌 Tabelle HTML

📌 Form di Input

📌 Consigli Operativi per la Lezione

📌 Obiettivi di Apprendimento

🔹 Esempio: Creare un CV Personale Online

📌 Struttura della Pagina

📌 Header e Navigazione

📌 Sezioni e Articoli

📌 Tabelle per l’Istruzione

📌 Contenuti Laterali con Aside

📌 Form di Contatto

📌 Footer

📝 Esercizi Operativi

✅ Risultati Attesi

domenica 1 marzo 2026

📌 Struttura base di una pagina HTML

1. Questa dichiarazione va sempre all’inizio del documento HTML e indica al browser che il documento è scritto in HTML5, la versione più recente e standardizzata di HTML.

2. Il tag <html> racchiude tutti gli elementi della pagina, sia quelli visibili all’utente che quelli non visibili ma utili per i browser e i motori di ricerca.

3. La sezione <head> contiene tutte le informazioni non visibili direttamente all’utente ma fondamentali per il funzionamento della pagina.

4. Il tag <body> contiene tutti i contenuti visibili all’utente, come testi, immagini, link, video e moduli.

📌 Elementi di testo

Titoli

Paragrafi

Elenchi

Link

📌 Attributi più comuni

✅ Consigli pratici per principianti

⚡ Esempio: Creare la propria prima pagina “Hello World”

📝 Esercizi Operativi

⚡ Esercizi Svolti: La mia prima pagina HTML

Soluzione completa

Spiegazione dettagliata di ogni esercizio e soluzione

1. Modifica del titolo

2. Paragrafo con descrizione personale

3. Secondo paragrafo con elenco numerato

4. Aggiunta di un link

5. Seconda intestazione con testo

Risultato visivo nel browser

sabato 28 febbraio 2026

1 – Introduzione al Web

Cos’è Internet e il World Wide Web

Differenza tra HTML, CSS e JavaScript

Strumenti necessari per lavorare

Creare la prima pagina web

Spiegazione del codice

📝 Mini-Esercizio Operativo – Personalizzare la prima pagina

Passo 1 – Modificare il titolo della pagina

Passo 2 – Modificare il colore dello sfondo

Passo 3 – Cambiare il messaggio dell’alert

Risultato finale del codice completo della pagina

✅ Competenze acquisite

venerdì 27 febbraio 2026

🧪 8 Test di un programma

🎯 Obiettivi

📘 Contenuti del Modulo

🔹 1. Cos’è un test

🔹 2. Test manuale vs test automatico

🔹 3. Scrivere test per funzioni e classi

🔹 4. Validazione del software

🛠️ Attività Pratiche

✍️ 1. Scrivi casi di test per funzioni esistenti

🧰 2. Introdurre il modulo unittest

🚀 3. Progetto finale – Mini App e test

🧠 Test di valutazione – 6 domande

giovedì 26 febbraio 2026

🎨 7 Design dell’Interfaccia Utente

🎯 Obiettivi Formativi

📚 Contenuti Teorici

🔹 1. Concetti Base di UI/UX

🔹 2. Tipologie di Interfacce

🔹 3. Librerie grafiche per Python

🔹 4. Progettare un’interfaccia usabile

🛠️ Attività Pratiche

🧮 1. Creare una calcolatrice GUI con Tkinter

🖥️ 2. Sviluppare un menù interattivo da console

🔍 3. Analizzare e migliorare un’interfaccia esistente

🧪 Test e Verifica

2. Il tag `<html>` racchiude tutti gli elementi della pagina, sia quelli visibili all’utente che quelli non visibili ma utili per i browser e i motori di ricerca.

3. La sezione `<head>` contiene tutte le informazioni non visibili direttamente all’utente ma fondamentali per il funzionamento della pagina.

4. Il tag `<body>` contiene tutti i contenuti visibili all’utente, come testi, immagini, link, video e moduli.

🧰 2. Introdurre il modulo `unittest`