📚 Template e Esercitazioni Pratiche

Tutto il materiale per esercitarsi – Versione Completa

📄 Template Base HTML Completo

Struttura HTML Corretta con CSS per Immagini

Usa questo template come base per tutti i tuoi esercizi. Include CSS per gestire immagini e layout:

<!DOCTYPE html>
<html lang="it">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Titolo della Pagina</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <header>
        <div class="logo-container">
            <img src="immagini/logo.png" alt="Logo del sito" class="logo">
        </div>
        <h1>Il Mio Sito</h1>
        <nav>
            <ul>
                <li><a href="index.html">Home</a></li>
                <li><a href="pagine/chi-sono.html">Chi Sono</a></li>
                <li><a href="pagine/contatti.html">Contatti</a></li>
            </ul>
        </nav>
    </header>
    
    <main>
        <section class="hero">
            <h2>Benvenuto nel mio sito!</h2>
            <p>Questo è il contenuto principale.</p>
        </section>
        
        <section class="content-section">
            <img src="immagini/foto-profilo.jpg" alt="La mia foto" class="profile-img">
            <div class="text-content">
                <h3>Chi sono</h3>
                <p>Presentazione personale...</p>
            </div>
        </section>
    </main>
    
    <footer>
        <p>© 2024 - Il Mio Sito</p>
    </footer>
</body>
</html>

🎨 Template CSS Base Completo

CSS Completo con Gestione Immagini e Layout

Usa questo CSS come base per i tuoi stili, include tutto per gestire immagini, layout e responsive:

/* ===== RESET E IMPOSTAZIONI BASE ===== */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: Arial, sans-serif;
    line-height: 1.6;
    background-color: #f4f4f4;
    color: #333;
}

/* ===== GESTIONE IMMAGINI ===== */

/* Logo del sito */
.logo {
    max-width: 150px;          /* Dimensione massima */
    height: auto;              /* Mantiene proporzioni */
    display: block;            /* Elimina spazio sotto */
}

.logo-container {
    text-align: center;        /* Centra il logo */
    padding: 1rem 0;
}

/* Immagini profilo e contenuto */
.profile-img {
    max-width: 200px;          /* Dimensione massima */
    height: auto;              /* Mantiene proporzioni */
    border-radius: 50%;        /* Immagine circolare */
    border: 3px solid #2c3e50; /* Bordo */
    display: block;
    margin: 0 auto 1rem;       /* Centra e aggiunge spazio sotto */
}

/* Immagini generiche nel contenuto */
.content-section img {
    max-width: 100%;           /* Non supera il contenitore */
    height: auto;              /* Mantiene proporzioni */
    border-radius: 8px;        /* Angoli arrotondati */
    box-shadow: 0 2px 5px rgba(0,0,0,0.1); /* Ombra leggera */
}

/* Layout per immagini con testo */
.content-section {
    display: flex;             /* Layout flessibile */
    align-items: center;       /* Allinea verticalmente */
    gap: 2rem;                 /* Spazio tra immagine e testo */
    margin: 2rem 0;
    padding: 1rem;
    background: white;
    border-radius: 8px;
}

.text-content {
    flex: 1;                   /* Occupa spazio rimanente */
}

/* ===== HEADER E NAVIGATION ===== */
header {
    background: #2c3e50;
    color: white;
    padding: 1rem 0;
    text-align: center;
}

nav ul {
    list-style: none;
    display: flex;
    justify-content: center;
    gap: 2rem;
    margin-top: 1rem;
}

nav a {
    color: white;
    text-decoration: none;
    padding: 0.5rem 1rem;
    border-radius: 4px;
    transition: background 0.3s;
}

nav a:hover {
    background: #34495e;
}

/* ===== CONTENUTO PRINCIPALE ===== */
main {
    max-width: 1200px;
    margin: 2rem auto;
    padding: 0 2rem;
}

.hero {
    background: white;
    padding: 3rem 2rem;
    text-align: center;
    border-radius: 8px;
    margin-bottom: 2rem;
}

/* ===== FOOTER ===== */
footer {
    background: #34495e;
    color: white;
    text-align: center;
    padding: 1rem 0;
    margin-top: 2rem;
}

/* ===== TABELLE ===== */
table {
    width: 100%;
    border-collapse: collapse;
    margin: 1rem 0;
}

th, td {
    border: 1px solid #ddd;
    padding: 0.75rem;
    text-align: left;
}

th {
    background-color: #f2f2f2;
}

/* ===== LISTE ===== */
ul, ol {
    margin: 1rem 0;
    padding-left: 2rem;
}

li {
    margin: 0.5rem 0;
}

/* ===== RESPONSIVE DESIGN ===== */
@media (max-width: 768px) {
    .content-section {
        flex-direction: column; /* Stack verticale su mobile */
        text-align: center;
    }
    
    nav ul {
        flex-direction: column;
        gap: 0.5rem;
    }
    
    .logo {
        max-width: 120px;      /* Logo più piccolo su mobile */
    }
}

📁 Esercitazione 1: Struttura File e Cartelle Completa

Template da Completare con CSS per Immagini

Crea questa struttura e completa i file. Attenzione ai percorsi!

sito_personale/
├── index.html
├── style/
│   └── main.css
├── immagini/
│   ├── logo.png
│   └── foto-profilo.jpg
└── pagine/
    ├── hobby.html
    ├── scuola.html
    └── contatti.html

index.html – DA COMPLETARE:

<!DOCTYPE html>
<html lang="it">
<head>
    <!-- INSERISCI I META TAG MANCANTI -->
    <title>Il Mio Sito Personale</title>
    <!-- COLLEGA IL CSS CORRETTAMENTE -->
</head>
<body>
    <header>
        <div class="logo-container">
            <!-- INSERISCI L'IMMAGINE LOGO -->
        </div>
        <h1>Benvenuto nel mio sito</h1>
        <nav>
            <ul>
                <li><a href="index.html">Home</a></li>
                <li><a href="pagine/hobby.html">I Miei Hobby</a></li>
                <li><a href="pagine/scuola.html">La Mia Scuola</a></li>
                <li><a href="pagine/contatti.html">Contatti</a></li>
            </ul>
        </nav>
    </header>
    
    <main>
        <section class="content-section">
            <!-- INSERISCI L'IMMAGINE FOTO-PROFILO -->
            <div class="text-content">
                <h2>Chi Sono</h2>
                <p>Ciao! Mi chiamo [Nome] e questo è il mio sito personale.</p>
                <p>Ho [età] anni e frequento la scuola [nome scuola].</p>
            </div>
        </section>
    </main>
    
    <footer>
        <p>© 2024 - Il Mio Sito Personale</p>
    </footer>
</body>
</html>

style/main.css – DA COMPLETARE:

/* RESET BASE */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: Arial, sans-serif;
    line-height: 1.6;
    background-color: #f4f4f4;
    color: #333;
}

/* STILE PER IL LOGO */
.logo {
    /* AGGIUNGI: max-width, height, display */
}

.logo-container {
    /* AGGIUNGI: text-align, padding */
}

/* STILE PER IMMAGINE PROFILO */
.profile-img {
    /* AGGIUNGI: max-width, height, border-radius, border */
    /* AGGIUNGI: display, margin */
}

/* LAYOUT SEZIONE CONTENUTO */
.content-section {
    /* AGGIUNGI: display, align-items, gap, margin, padding */
    /* AGGIUNGI: background, border-radius */
}

.text-content {
    /* AGGIUNGI: flex */
}

/* HEADER */
header {
    /* AGGIUNGI: background, color, padding, text-align */
}

nav ul {
    /* AGGIUNGI: list-style, display, justify-content, gap, margin-top */
}

nav a {
    /* AGGIUNGI: color, text-decoration, padding, border-radius, transition */
}

nav a:hover {
    /* AGGIUNGI: background */
}

/* MAIN CONTENT */
main {
    /* AGGIUNGI: max-width, margin, padding */
}

/* FOOTER */
footer {
    /* AGGIUNGI: background, color, text-align, padding, margin-top */
}

Consiglio: Ricorda che i percorsi sono relativi alla posizione del file HTML.
Se il CSS è nella cartella “style”, il percorso sarà href="style/main.css".

🔍 Esercitazione 2: Correzione Errori Dettagliata

File con Errori da Correggere

Questo file HTML contiene diversi errori nei percorsi. Correggili tutti!

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Il mio sito</title>
    <!-- ERRORE 1: Percorso CSS sbagliato -->
    <link rel="stylesheet" href="css/stile.css">
</head>
<body>
    <header>
        <h1>Il Mio Sito con Errori</h1>
        <!-- ERRORE 2: Manca il logo -->
    </header>
    
    <main>
        <!-- ERRORE 3: Percorso immagine sbagliato -->
        <img src="immagini/mia-foto.png" alt="La mia foto">
        
        <!-- ERRORE 4: Percorso link sbagliato -->
        <a href="pagina/contatti.html">Contatti</a>
        
        <!-- ERRORE 5: Manca la classe per lo stile -->
        <div>
            <h2>Chi sono</h2>
            <p>Questa pagina ha diversi errori da correggere!</p>
        </div>
        
        <!-- ERRORE 6: Immagine senza stile responsive -->
        <img src="assets/foto-gruppo.jpg" alt="Foto di gruppo">
    </main>
</body>
</html>

Struttura Cartelle Corretta:

sito/
├── assets/
│   └── stile.css
├── img/
│   ├── mia-foto.png
│   └── foto-gruppo.jpg
├── immagini/
│   └── logo.png
└── contatti.html

CSS da Aggiungere per Gestire le Immagini:

/* AGGIUNGI QUESTE REGOLE AL TUO CSS */

/* Logo del sito */
.logo {
    max-width: 150px;
    height: auto;
}

/* Immagini responsive */
img {
    max-width: 100%;
    height: auto;
    border-radius: 8px;
}

/* Container per immagini */
.image-container {
    text-align: center;
    margin: 1rem 0;
}

/* Immagini profilo */
.profile-image {
    max-width: 200px;
    border-radius: 50%;
    border: 3px solid #2c3e50;
}

Compito: Correggi tutti gli errori nei percorsi e aggiungi le classi CSS necessarie per gestire le immagini correttamente.

🎨 Esercitazione 3: Sistema di Bottoni Avanzato

HTML da Usare con Icone:

<div class="button-group">
    <button class="btn">
        <img src="icons/normal.svg" alt="" class="btn-icon">
        Normale
    </button>
    <button class="btn btn-primary">
        <img src="icons/primary.svg" alt="" class="btn-icon">
        Primario
    </button>
    <button class="btn btn-secondary">
        <img src="icons/secondary.svg" alt="" class="btn-icon">
        Secondario
    </button>
    <button class="btn btn-danger">
        <img src="icons/danger.svg" alt="" class="btn-icon">
        Pericolo
    </button>
    <button class="btn btn-large">
        <img src="icons/large.svg" alt="" class="btn-icon">
        Grande
    </button>
</div>

CSS da Completare (Gestione Icone incluse):

/* GRUPPO DI BOTTONI */
.button-group {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
    margin: 2rem 0;
}

/* CLASSE BASE: Stile comune a tutti i bottoni */
.btn {
    /* AGGIUNGI: padding, border, border-radius, cursor */
    /* AGGIUNGI: font-size, background-color, color */
    /* AGGIUNGI: transition, display, align-items, gap */
    /* AGGIUNGI: text-decoration, font-weight */
}

/* ICONE NEI BOTTONI */
.btn-icon {
    /* AGGIUNGI: width, height, vertical-align */
}

/* MODIFICATORE: Bottone primario (blu) */
.btn-primary {
    /* AGGIUNGI: background-color, border-color, color */
}

/* MODIFICATORE: Bottone secondario (grigio) */
.btn-secondary {
    /* AGGIUNGI: background-color grigio, border-color */
}

/* MODIFICATORE: Bottone pericolo (rosso) */
.btn-danger {
    /* AGGIUNGI: background-color rosso, border-color */
}

/* MODIFICATORE: Bottone grande */
.btn-large {
    /* AGGIUNGI: padding più ampio, font-size più grande */
}

/* STATO DISABILITATO */
.btn:disabled {
    /* AGGIUNGI: opacity, cursor, background-color */
}

/* Effetto hover per tutti i bottoni */
.btn:hover:not(:disabled) {
    /* AGGIUNGI: cambio colore di background */
    /* AGGIUNGI: transform per effetto sollevamento */
    /* AGGIUNGI: box-shadow */
}

/* Effetto focus per accessibilità */
.btn:focus {
    /* AGGIUNGI: outline, box-shadow */
}

/* RESPONSIVE */
@media (max-width: 768px) {
    .button-group {
        /* AGGIUNGI: flex-direction, align-items */
    }
    
    .btn {
        /* AGGIUNGI: width per occupare tutto lo spazio */
    }
}

📄 Esercitazione 4: Sistema di Card Avanzato con Immagini

HTML da Usare con Immagini:

<div class="cards-container">
    <div class="card">
        <div class="card-image">
            <img src="images/card1.jpg" alt="Descrizione immagine 1">
        </div>
        <div class="card-header">
            <h3>Card Normale</h3>
        </div>
        <div class="card-body">
            <p>Contenuto della card con informazioni utili.</p>
            <ul>
                <li>Elemento lista 1</li>
                <li>Elemento lista 2</li>
            </ul>
        </div>
        <div class="card-footer">
            <button class="btn">Azione</button>
        </div>
    </div>

    <div class="card card-featured">
        <div class="card-image">
            <img src="images/card2.jpg" alt="Descrizione immagine 2">
        </div>
        <div class="card-header">
            <h3>⭐ Card Speciale</h3>
        </div>
        <div class="card-body">
            <p>Questa card è in evidenza!</p>
        </div>
        <div class="card-footer">
            <button class="btn">Azione</button>
        </div>
    </div>
</div>

CSS da Completare (Gestione Immagini incluse):

/* CONTAINER CARDS */
.cards-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 2rem;
    margin: 2rem 0;
}

/* CARD BASE */
.card {
    /* AGGIUNGI: background, border, border-radius, padding */
    /* AGGIUNGI: margin, box-shadow, transition, overflow */
}

/* IMMAGINE CARD */
.card-image {
    /* AGGIUNGI: width, height, overflow */
}

.card-image img {
    /* AGGIUNGI: width, height, object-fit, display */
}

/* HEADER della card */
.card-header {
    /* AGGIUNGI: padding, background, border-bottom */
    /* AGGIUNGI: margin-bottom */
}

/* BODY della card */
.card-body {
    /* AGGIUNGI: padding, line-height, color, flex-grow */
}

.card-body ul {
    /* AGGIUNGI: margin, padding-left */
}

.card-body li {
    /* AGGIUNGI: margin-bottom */
}

/* FOOTER della card */
.card-footer {
    /* AGGIUNGI: padding, background, border-top, text-align */
    /* AGGIUNGI: margin-top */
}

/* CARD in evidenza */
.card-featured {
    /* AGGIUNGI: bordo più spesso, background speciale */
    /* AGGIUNGI: ombra più marcata, transform scale */
}

/* Effetto hover */
.card:hover {
    /* AGGIUNGI: transform per sollevamento */
    /* AGGIUNGI: box-shadow più marcata */
}

/* RESPONSIVE */
@media (max-width: 768px) {
    .cards-container {
        /* AGGIUNGI: grid-template-columns */
    }
    
    .card {
        /* AGGIUNGI: margin, max-width */
    }
}

🏗️ Esercitazione 5: Layout Completo con Gestione Immagini

Template HTML da Completare con Immagini:

<!DOCTYPE html>
<html lang="it">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>La Mia Azienda</title>
    <link rel="stylesheet" href="css/stile.css">
</head>
<body>
    <!-- HEADER -->
    <header id="main-header">
        <div class="container">
            <div class="logo-container">
                <!-- INSERISCI LOGO -->
                <h1 class="logo-text">MiaAzienda</h1>
            </div>
            <nav class="main-nav">
                <!-- CREA menu con 4 link -->
            </nav>
        </div>
    </header>

    <!-- HERO SECTION -->
    <section id="hero">
        <div class="container">
            <div class="hero-content">
                <div class="hero-text">
                    <!-- CREA titolo e sottotitolo -->
                    <!-- AGGIUNGI bottone call-to-action -->
                </div>
                <div class="hero-image">
                    <!-- INSERISCI IMMAGINE HERO -->
                </div>
            </div>
        </div>
    </section>

    <!-- SERVIZI -->
    <section id="servizi">
        <div class="container">
            <h2 class="section-title">I Nostri Servizi</h2>
            <div class="card-grid">
                <!-- CREA 3 card per i servizi con immagini -->
            </div>
        </div>
    </section>

    <!-- FOOTER -->
    <footer id="main-footer">
        <div class="container">
            <div class="footer-content">
                <div class="footer-logo">
                    <!-- INSERISCI LOGO FOOTER -->
                </div>
                <!-- CREA contenuto footer -->
            </div>
        </div>
    </footer>
</body>
</html>

CSS da Completare (Layout Completo):

/* ===== STRUTTURA PRINCIPALE (ID) ===== */

/* Header principale */
#main-header {
    /* AGGIUNGI: background, position, padding, box-shadow */
}

/* Sezione hero */
#hero {
    /* AGGIUNGI: background, min-height, padding */
}

.hero-content {
    /* AGGIUNGI: display, align-items, gap, min-height */
}

.hero-text {
    /* AGGIUNGI: flex, flex-direction, justify-content */
}

.hero-image {
    /* AGGIUNGI: flex, justify-content, align-items */
}

.hero-image img {
    /* AGGIUNGI: max-width, height, border-radius */
}

/* Sezione servizi */
#servizi {
    /* AGGIUNGI: padding, background */
}

/* Footer */
#main-footer {
    /* AGGIUNGI: background, color, padding, margin-top */
}

/* ===== COMPONENTI RIUTILIZZABILI (CLASSI) ===== */

/* Container */
.container {
    /* AGGIUNGI: max-width, margin, padding */
}

/* Logo */
.logo-container {
    /* AGGIUNGI: display, align-items, gap */
}

.logo {
    /* AGGIUNGI: max-width, height */
}

.logo-text {
    /* AGGIUNGI: font-size, font-weight, color */
}

/* Menu principale */
.main-nav {
    /* AGGIUNGI: display, gap, list-style */
}

/* Grid per card */
.card-grid {
    /* AGGIUNGI: display: grid, grid-template-columns, gap */
}

/* Titoli sezione */
.section-title {
    /* AGGIUNGI: text-align, font-size, margin */
}

/* Footer */
.footer-content {
    /* AGGIUNGI: display, justify-content, align-items, gap */
}

.footer-logo img {
    /* AGGIUNGI: max-width, filter (per logo bianco) */
}

/* ===== RESPONSIVE ===== */

/* Tablet */
@media (max-width: 768px) {
    .hero-content {
        /* AGGIUNGI: flex-direction */
    }
    
    .card-grid {
        /* AGGIUNGI: grid-template-columns per 2 colonne */
    }
    
    .main-nav {
        /* AGGIUNGI: flex-direction, text-align */
    }
}

/* Mobile */
@media (max-width: 480px) {
    .card-grid {
        /* AGGIUNGI: grid-template-columns per 1 colonna */
    }
    
    .hero-content {
        /* AGGIUNGI: text-align, padding */
    }
    
    .logo-container {
        /* AGGIUNGI: flex-direction, text-align */
    }
}

🗺️ Guida ai Percorsi delle Immagini

Come Referenziare Correttamente le Immagini

Posizione File HTML	Posizione Immagine	Percorso Corretto	Esempio
index.html (root)	immagini/logo.png	immagini/logo.png	`<img src="immagini/logo.png">`
pagine/hobby.html	immagini/logo.png	../immagini/logo.png	`<img src="../immagini/logo.png">`
index.html (root)	style/icons/icon.png	style/icons/icon.png	`<img src="style/icons/icon.png">`
pagine/profilo.html	assets/foto.jpg	../assets/foto.jpg	`<img src="../assets/foto.jpg">`

Regole Importanti:

./ – Cartella corrente
../ – Cartella superiore
/ – Root del sito (da evitare in sviluppo locale)
Sempre usare alt per accessibilità
Usare formati moderni (WebP) quando possibile