venerdì 13 marzo 2026

Corso di CSS & Web Design: 3 – Box Model e spaziature

3 – Box Model e spaziature

1. Concetto di Box Model

In CSS ogni elemento HTML viene rappresentato come un rettangolo chiamato “box”, costituito da 4 aree principali:

  1. Content (contenuto) – dove si trova testo, immagine o contenuto dell’elemento.

  2. Padding (riempimento interno) – spazio tra contenuto e bordo.

  3. Border (bordo) – contorno dell’elemento.

  4. Margin (margine esterno) – spazio tra l’elemento e gli altri elementi.

Schema Box Model

+-------------------------+
|        Margin           |
|  +-------------------+  |
|  |      Border       |  |
|  |  +-------------+  |  |
|  |  |  Padding    |  |  |
|  |  | +---------+ |  |  |
|  |  | | Content | |  |  |
|  |  | +---------+ |  |  |
|  |  +-------------+  |  |
|  +-------------------+  |
+-------------------------+

Proprietà principali

  • margin: distanza dall’esterno del box

    margin: 20px; /* tutte le direzioni */
margin-top: 10px;
margin-left: auto; margin-right: auto; /* centratura orizzontale */

  • padding: distanza tra contenuto e bordo

    padding: 15px;
padding-left: 10px;

  • border: spessore, stile e colore del bordo

    border: 2px solid black;
border-radius: 8px; /* bordi arrotondati */

  • width e height: dimensioni del contenuto (il padding e il bordo si aggiungono fuori)

    width: 300px;
height: 200px;
max-width: 100%; /* responsive */

2. Differenza tra display: inline, block, inline-block

Tipo Comportamento principale
block Occupa tutta la larghezza disponibile, va a capo. Esempi: <div>, <p>
inline Occupa solo lo spazio del contenuto, non va a capo. Esempi: <span>, <a>
inline-block Combinazione: come inline ma permette width, height, padding e margin.

Esempio pratico

span {
  display: inline-block;
  width: 100px;
  height: 50px;
  background-color: lightblue;
}

3. Gestione dimensioni

3.1 width e height

  • Definiscono dimensione del contenuto del box.

div {
  width: 300px;
  height: 150px;
}

3.2 max-width e min-width

  • Rendono i box responsive evitando che diventino troppo grandi o piccoli.

div {
  max-width: 90%;  /* non supera il 90% della larghezza del contenitore */
  min-width: 200px; /* non scende sotto i 200px */
}

3.3 box-sizing

  • Determina se il padding e il bordo rientrano nelle dimensioni dichiarate:

/* default: width e height misurano solo il contenuto */
box-sizing: content-box;

/* include padding e border nella larghezza totale */
box-sizing: border-box;

4. Esercizio svolto: costruire una card con titolo, testo e immagine

Obiettivo

Creare una card visivamente elegante con titolo, testo descrittivo e immagine, usando box model e spaziature.

HTML

<!DOCTYPE html>
<html lang="it">
<head>
  <meta charset="UTF-8">
  <title>Card CSS</title>
  <link rel="stylesheet" href="stile.css">
</head>
<body>
  <div class="card">
    <img src="https://via.placeholder.com/300x150" alt="Immagine" class="card-img">
    <h2 class="card-title">Titolo della Card</h2>
    <p class="card-text">Questa è una descrizione della card. Mostra come usare margini, padding e bordi.</p>
  </div>
</body>
</html>

CSS (stile.css)

/* Stile generale */
body {
  font-family: Arial, sans-serif;
  display: flex;
  justify-content: center;
  padding: 50px;
  background-color: #f2f2f2;
}

/* Box Card */
.card {
  width: 320px;
  padding: 20px;
  margin: 20px;
  background-color: #ffffff;
  border: 2px solid #ccc;
  border-radius: 10px;
  box-shadow: 2px 2px 10px rgba(0,0,0,0.1);
  box-sizing: border-box; /* include padding e border nella width */
}

/* Immagine */
.card-img {
  width: 100%;
  height: auto;
  border-radius: 8px;
  margin-bottom: 15px;
}

/* Titolo */
.card-title {
  font-size: 24px;
  margin: 0 0 10px 0;
  color: #333;
}

/* Testo */
.card-text {
  font-size: 16px;
  line-height: 1.5;
  color: #666;
}

Risultato

  • Card centrata, con padding interno.

  • Immagine con bordi arrotondati.

  • Titolo e testo con spaziature corrette grazie a margin e line-height.

  • Uso del box-shadow per effetto elegante.


alle Nessun commento:
Etichette: ,

giovedì 12 marzo 2026

Corso di CSS & Web Design: 2 – Colori, font e testo

2 – Colori, font e testo

1. Gestione dei colori in CSS

In CSS possiamo definire i colori in diversi formati:

1.1 RGB

Rappresenta il colore tramite rosso, verde e blu (Red, Green, Blue) con valori da 0 a 255:

p {
  color: rgb(255, 0, 0); /* rosso */
}

1.2 HEX

Codice esadecimale, formato #RRGGBB:

p {
  color: #00ff00; /* verde */
}

1.3 HSL

Hue-Saturation-Lightness (tonalità, saturazione, luminosità):

p {
  color: hsl(240, 100%, 50%); /* blu puro */
}

1.4 Trasparenze (RGBA / HSLA)

Aggiunge un canale alpha (0 = trasparente, 1 = opaco):

p {
  color: rgba(255, 0, 0, 0.5); /* rosso semi-trasparente */
}

2. Proprietà tipografiche

2.1 font-family

Definisce il tipo di carattere:

p {
  font-family: Arial, sans-serif;
}

  • Consiglio: sempre prevedere un “fallback” (sans-serif, serif, monospace).

2.2 font-size

Dimensione del testo. Valori comuni:

p {
  font-size: 16px;   /* pixel */
  font-size: 1.2em;  /* em relativi al font del genitore */
  font-size: 120%;   /* percentuale relativa al genitore */
}

2.3 line-height

Altezza della riga, utile per leggibilità:

p {
  line-height: 1.5; /* 1.5 volte l'altezza del font */
}

2.4 font-weight

Spessore del carattere:

p {
  font-weight: bold; /* normal, bold, 100-900 */
}

2.5 font-style

Stile del testo:

p {
  font-style: italic; /* normal, italic, oblique */
}

3. Allineamento e decorazioni del testo

3.1 text-align

Allinea il testo orizzontalmente:

p {
  text-align: left;   /* left, right, center, justify */
}

3.2 text-decoration

Decorazioni del testo:

p {
  text-decoration: underline; /* none, underline, line-through, overline */
}

3.3 text-transform

Trasformazioni di maiuscole/minuscole:

p {
  text-transform: uppercase; /* lowercase, capitalize */
}

4. Uso di Google Fonts

Per importare font personalizzati:

  1. Andare su Google Fonts, scegliere un font.

  2. Copiare il link nel <head> dell’HTML:

<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap" rel="stylesheet">

  1. Usare il font nel CSS:

body {
  font-family: 'Roboto', sans-serif;
}

5. Esercizio svolto: creare una landing page con tipografia personalizzata

Obiettivo

Creare una pagina con titolo e paragrafi usando colori, font e allineamenti personalizzati.

HTML

<!DOCTYPE html>
<html lang="it">
<head>
  <meta charset="UTF-8">
  <title>Landing Page CSS</title>
  <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap" rel="stylesheet">
  <link rel="stylesheet" href="stile.css">
</head>
<body>
  <h1 id="titolo">Benvenuti nella Landing Page!</h1>
  <p class="sottotitolo">Scopri i nostri servizi e soluzioni innovative.</p>
  <p class="contenuto">Questa sezione contiene testo descrittivo della landing page, personalizzato con font e colori.</p>
</body>
</html>

CSS (stile.css)

/* Titolo principale */
#titolo {
  font-family: 'Roboto', sans-serif;
  font-weight: 700;
  font-size: 36px;
  color: hsl(210, 100%, 40%);
  text-align: center;
  margin-bottom: 20px;
}

/* Sottotitolo */
.sottotitolo {
  font-family: 'Roboto', sans-serif;
  font-weight: 400;
  font-size: 20px;
  color: rgb(50, 50, 50);
  text-align: center;
  text-transform: uppercase;
}

/* Contenuto */
.contenuto {
  font-family: 'Roboto', sans-serif;
  font-size: 16px;
  line-height: 1.6;
  color: #333333;
  text-align: justify;
  background-color: rgba(173, 216, 230, 0.2); /* azzurro leggermente trasparente */
  padding: 15px;
  border-radius: 8px;
}

Risultato

  • Titolo grande, blu scuro, centrato.

  • Sottotitolo maiuscolo, centrato e leggero.

  • Paragrafo giustificato, colore neutro, sfondo azzurro trasparente con padding.

  • Tutti i testi utilizzano il font Roboto importato da Google Fonts.


alle Nessun commento:
Etichette: , ,

mercoledì 11 marzo 2026

Corso di CSS & Web Design: 1 – Introduzione a CSS

1 – Introduzione a CSS

1. Cos’è il CSS e come si collega all’HTML

CSS (Cascading Style Sheets) è il linguaggio utilizzato per definire lo stile e la presentazione di una pagina web. Grazie al CSS possiamo separare contenuto (HTML) e stile (CSS), rendendo il codice più leggibile e modulare.

Funzioni principali del CSS

  • Definire colori, font, dimensioni, margini, padding e layout.

  • Gestire il posizionamento degli elementi sulla pagina.

  • Creare effetti visivi e interattivi (hover, animazioni, transizioni).

Collegamento tra CSS e HTML

Il CSS può essere applicato in tre modi:

  1. Inline CSS – direttamente nell’elemento HTML:

<p style="color: blue; font-size: 16px;">Testo blu</p>

  • Pro: semplice e veloce.

  • Contro: difficile da mantenere su siti complessi.

  1. Internal CSS – all’interno della pagina HTML, nel tag <style>:

<head>
  <style>
    p {
      color: green;
      font-size: 18px;
    }
  </style>
</head>
<body>
  <p>Testo verde</p>
</body>

  • Buono per pagine singole o esperimenti.

  1. External CSS – file separato .css collegato tramite <link>:

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

/* stile.css */
p {
  color: red;
  font-size: 20px;
}

  • Pro: stile centralizzato per più pagine.

  • Consigliato in produzione.

2. Sintassi di base: selettori, proprietà, valori

Il CSS ha una sintassi molto semplice:

Selettore{proprietaˋ:valore;}\text{Selettore} \{ \text{proprietà}: \text{valore}; \}

Componenti principali

  1. Selettore – indica l’elemento HTML da stilizzare:

    • Elemento: p { } → tutti i paragrafi.

    • Classe: .classe { } → tutti gli elementi con class="classe".

    • ID: #id { } → elemento con id="id".

    • Universale: * { } → tutti gli elementi.

  2. Proprietà – ciò che vogliamo modificare:

    • color → colore del testo

    • background-color → colore di sfondo

    • font-size → dimensione del testo

    • margin → margini esterni

    • padding → spaziatura interna

  3. Valore – specifica della proprietà:

    • Colori: red, #ff0000, rgb(255,0,0)

    • Dimensioni: 16px, 1.2em, 100%

    • Allineamento: center, left, right

Esempio di blocco CSS

h1 {
  color: darkblue;
  font-size: 32px;
  text-align: center;
}

3. Esempi pratici di selettori

Selettore di elemento

p {
  color: green;
  font-family: Arial, sans-serif;
}

Selettore di classe

.highlight {
  background-color: yellow;
  font-weight: bold;
}

HTML:

<p class="highlight">Questo testo è evidenziato</p>

Selettore ID

#titolo-principale {
  font-size: 40px;
  color: darkred;
}

HTML:

<h1 id="titolo-principale">Benvenuti!</h1>

4. Esercizio svolto: applicare i primi stili a una pagina

Obiettivo

Creare una pagina HTML semplice con paragrafi e un titolo, applicando colori, font e allineamento.

HTML

<!DOCTYPE html>
<html lang="it">
<head>
  <meta charset="UTF-8">
  <title>Prima pagina CSS</title>
  <link rel="stylesheet" href="stile.css">
</head>
<body>
  <h1 id="titolo-principale">Benvenuti nella mia pagina!</h1>
  <p class="intro">Questo è il primo paragrafo con stile CSS.</p>
  <p class="intro">E questo è il secondo paragrafo, colorato e centrato.</p>
</body>
</html>

CSS (stile.css)

/* Stile per il titolo */
#titolo-principale {
  color: darkblue;
  text-align: center;
  font-family: 'Verdana', sans-serif;
}

/* Stile per i paragrafi introduttivi */
.intro {
  color: darkgreen;
  font-size: 18px;
  text-align: center;
  background-color: #f0f0f0;
  padding: 10px;
  border-radius: 5px;
}

Risultato

  • Titolo centrato e blu.

  • Paragrafi centrati, verdi su sfondo grigio chiaro con padding.

  • Stile applicato tramite CSS esterno.

5. Suggerimenti pratici

  • Usare external CSS per progetti più grandi.

  • Dare nomi chiari a classi e ID (.menu, #footer).

  • Ricordare la cascata: se un elemento ha più regole, prevale quella più specifica.


alle Nessun commento:
Etichette: ,

martedì 10 marzo 2026

Corso di HTML: 11 Sviluppo completo di un sito

Home Page di Marco Rossi – Scrittore

Benvenuto nel corso pratico per creare il sito di uno scrittore. In questa pagina imparerai come strutturare la Home Page, quali sezioni includere e come fornire agli studenti il codice pronto da copiare.

Struttura della Home Page

La Home Page deve contenere:

  1. Header con titolo e menu di navigazione

    • Il titolo del sito deve essere ben visibile.

    • Il menu deve contenere link a tutte le sezioni principali: Home, Contatti, Galleria, Blog.

  2. Sezione introduttiva

    • Breve presentazione dello scrittore.

    • Invito a esplorare le opere o altre sezioni.

  3. Sezione Blog / Notizie

    • Mostrare gli ultimi articoli o aggiornamenti.

    • Include un titolo, un breve testo introduttivo e un link “Leggi di più”.

  4. Footer

    • Informazioni di contatto.

    • Copyright.

Scelte progettuali

  • CSS interno semplice: permette di stilizzare il sito senza dover creare file esterni.

  • Colori sobri e leggibili: sfondo chiaro, testo scuro, header e footer contrastanti.

  • Bottoni chiari per le call-to-action: inviti a visitare galleria o leggere articoli.

  • Sezioni distinte: maggiore chiarezza visiva e facilità di lettura.

Codice da copiare sull’editor

Gli studenti possono copiare questo codice direttamente nella modalità HTML di Blogger oppure sul proprio editor. È già pronto per essere visualizzato come pagina web funzionante.

<!-- Header -->
<header>
  <h1>Marco Rossi - Scrittore</h1>
  <nav>
    <a href="/p/home.html">Home</a>
    <a href="/p/contatti.html">Contatti</a>
    <a href="/p/galleria.html">Galleria</a>
    <a href="/p/blog.html">Blog</a>
  </nav>
</header>

<!-- Sezione introduttiva -->
<section>
  <h2>Benvenuti nel sito ufficiale</h2>
  <p>Mi chiamo <strong>Marco Rossi</strong> e qui puoi scoprire le mie opere, leggere articoli e contattarmi.</p>
  <a href="/p/galleria.html" class="btn">Scopri i miei libri</a>
</section>

<!-- Sezione Blog / Notizie -->
<section>
  <h2>Ultimi Articoli</h2>
  <article>
    <h3>Titolo articolo 1</h3>
    <p>Breve introduzione all'articolo. Puoi aggiungere contenuti, immagini e link.</p>
    <a href="/p/blog.html" class="btn">Leggi di più</a>
  </article>
  <article>
    <h3>Titolo articolo 2</h3>
    <p>Breve introduzione all'articolo. Testo di esempio per mostrare la struttura.</p>
    <a href="/p/blog.html" class="btn">Leggi di più</a>
  </article>
</section>

<!-- Footer -->
<footer>
  <p>Contatti: marco.rossi@email.com | Tel: 123-4567890</p>
  <p>&copy; 2025 Marco Rossi. Tutti i diritti riservati.</p>
</footer>

Note

  • Il codice HTML va incollato come testo HTML nella pagina di Blogger.

  • Gli stili CSS possono essere inseriti internamente all’interno di <style> oppure aggiunti tramite CSS esterno.

  • I link devono essere aggiornati se si cambiano i nomi delle pagine.

  • Questo approccio permette di vedere subito il risultato, capire la struttura e modificare i testi senza problemi.

Pagina Contatti di Marco Rossi – Scrittore

La pagina Contatti consente ai visitatori di mettersi in comunicazione con lo scrittore. È fondamentale per un sito professionale e deve essere chiara e semplice da usare.

Struttura della Pagina Contatti

  1. Header e navigazione coerenti con la Home Page

    • Manteniamo il logo/titolo e il menu per garantire continuità.

  2. Modulo di contatto

    • Include campi per: Nome, Email, Oggetto e Messaggio.

    • Pulsante di invio con chiara call-to-action.

  3. Sezione informazioni aggiuntive

    • Email diretta e numero di telefono.

    • Eventuali link ai social o altre modalità di contatto.

  4. Footer

    • Stesso stile della Home Page per uniformità.

Scelte progettuali

  • Modulo semplice HTML: compatibile con Blogger e facilmente personalizzabile.

  • Label visibili e campi chiari: per garantire accessibilità.

  • Pulsante di invio chiaro: invita l’utente a completare il modulo.

  • Sezione di informazioni alternative: utile per chi non usa il modulo o vuole contatti immediati.

Codice da copiare sull’editor di Blogger

<!-- Header -->
<header>
  <h1>Marco Rossi - Scrittore</h1>
  <nav>
    <a href="/p/home.html">Home</a>
    <a href="/p/contatti.html">Contatti</a>
    <a href="/p/galleria.html">Galleria</a>
    <a href="/p/blog.html">Blog</a>
  </nav>
</header>

<!-- Sezione Contatti -->
<section>
  <h2>Contattami</h2>
  <p>Compila il modulo sottostante per inviare un messaggio direttamente a me:</p>
  
  <form action="mailto:marco.rossi@email.com" method="post" enctype="text/plain">
    <label for="nome">Nome:</label><br>
    <input type="text" id="nome" name="nome" placeholder="Inserisci il tuo nome" required><br><br>
    
    <label for="email">Email:</label><br>
    <input type="email" id="email" name="email" placeholder="Inserisci la tua email" required><br><br>
    
    <label for="oggetto">Oggetto:</label><br>
    <input type="text" id="oggetto" name="oggetto" placeholder="Oggetto del messaggio"><br><br>
    
    <label for="messaggio">Messaggio:</label><br>
    <textarea id="messaggio" name="messaggio" rows="6" placeholder="Scrivi qui il tuo messaggio" required></textarea><br><br>
    
    <input type="submit" value="Invia messaggio">
    <input type="reset" value="Cancella">
  </form>
  
  <h3>Oppure contattami direttamente:</h3>
  <p>Email: marco.rossi@email.com</p>
  <p>Telefono: 123-4567890</p>
</section>

<!-- Footer -->
<footer>
  <p>&copy; 2025 Marco Rossi. Tutti i diritti riservati.</p>
</footer>

Note 

  • Il form usa mailto: per inviare il messaggio via email direttamente.

  • Se si desidera un modulo più avanzato (con invio automatico senza client di posta), si può integrare un servizio esterno come Formspree o Google Forms.

  • Tutti gli stili (colori, font, margini) possono essere personalizzati aggiungendo <style> nella pagina o un CSS esterno.

  • I link del menu devono essere aggiornati se si cambiano i nomi delle pagine.


Pagina Galleria Immagini di Marco Rossi – Scrittore

La Galleria serve a mostrare fotografie, copertine dei libri, eventi o momenti significativi legati alla carriera dello scrittore. Deve essere chiara, ben organizzata e facilmente navigabile.

Struttura della Pagina Galleria

  1. Header e navigazione coerenti con la Home e la Pagina Contatti

    • Logo/titolo e menu per continuità.

  2. Sezione Galleria

    • Griglia di immagini con titoli o descrizioni brevi.

    • Possibilità di ingrandire le immagini cliccandoci sopra (funzionalità opzionale con lightbox).

  3. Footer

    • Stesso stile delle altre pagine per uniformità.

Scelte progettuali

  • Griglia semplice con <div> o <figure>: compatibile con Blogger.

  • Didascalie chiare sotto le immagini: per contestualizzare ogni foto.

  • Layout flessibile: permette di aggiungere altre immagini senza modificare la struttura principale.

  • Accessibilità: testo alternativo (alt) per ogni immagine.

Codice da copiare sull’editor

<!-- Header -->
<header>
  <h1>Marco Rossi - Scrittore</h1>
  <nav>
    <a href="/p/home.html">Home</a>
    <a href="/p/contatti.html">Contatti</a>
    <a href="/p/galleria.html">Galleria</a>
    <a href="/p/blog.html">Blog</a>
  </nav>
</header>

<!-- Sezione Galleria -->
<section>
  <h2>Galleria Immagini</h2>
  <p>Scopri momenti e opere della mia carriera:</p>
  
  <div class="galleria">
    <figure>
      <img src="https://via.placeholder.com/200x200.png?text=Copertina+Libro+1" alt="Copertina del libro 1">
      <figcaption>Copertina del libro: Il primo romanzo</figcaption>
    </figure>
    
    <figure>
      <img src="https://via.placeholder.com/200x200.png?text=Evento+Letterario" alt="Evento letterario">
      <figcaption>Evento letterario 2024</figcaption>
    </figure>
    
    <figure>
      <img src="https://via.placeholder.com/200x200.png?text=Copertina+Libro+2" alt="Copertina del libro 2">
      <figcaption>Copertina del libro: Il secondo romanzo</figcaption>
    </figure>
    
    <figure>
      <img src="https://via.placeholder.com/200x200.png?text=Foto+Autore" alt="Foto autore">
      <figcaption>Io durante la presentazione del libro</figcaption>
    </figure>
  </div>
</section>

<!-- Footer -->
<footer>
  <p>&copy; 2025 Marco Rossi. Tutti i diritti riservati.</p>
</footer>

Note

  • Le immagini sono inserite con link placeholder (via.placeholder.com) che vanno sostituiti con le immagini reali dello scrittore.

  • Ogni <figure> contiene <img> e <figcaption> per didascalia; ciò migliora accessibilità e SEO.

  • La classe galleria può essere stilizzata con CSS esterno o interno per creare layout a griglia o responsive.

  • Il menu e il footer devono rimanere coerenti con le altre pagine.


Pagina Blog/Portfolio di Marco Rossi – Scrittore

La sezione Blog o Portfolio serve a condividere articoli, riflessioni, recensioni e aggiornamenti sulle attività dell’autore. Deve essere chiara, leggibile e facilmente navigabile.

Struttura della Pagina Blog/Portfolio

  1. Header e navigazione coerenti con le altre pagine

    • Logo/titolo e menu per continuità.

  2. Sezione articoli/portfolio

    • Ogni articolo o progetto è presentato in un blocco (<article>) con titolo, data, immagine e testo introduttivo.

    • Possibilità di link “Leggi tutto” per articoli completi (può aprire una nuova pagina o una sezione interna).

  3. Sidebar opzionale

    • Per link rapidi, categorie o social media.

  4. Footer

    • Stesso stile delle altre pagine per uniformità.

Scelte progettuali

  • Uso di <article> per ogni post: migliora semantica e SEO.

  • Immagini e didascalie: rendono la pagina più visiva e attrattiva.

  • Testo introduttivo: permette al lettore di capire rapidamente il contenuto.

  • Layout flessibile: permette di aggiungere nuovi articoli senza modificare la struttura principale.

Codice da copiare sull’editor

<!-- Header -->
<header>
  <h1>Marco Rossi - Scrittore</h1>
  <nav>
    <a href="/p/home.html">Home</a>
    <a href="/p/contatti.html">Contatti</a>
    <a href="/p/galleria.html">Galleria</a>
    <a href="/p/blog.html">Blog</a>
  </nav>
</header>

<!-- Sezione Blog/Portfolio -->
<section>
  <h2>Blog e Portfolio</h2>
  <p>Scopri gli articoli, le riflessioni e i progetti più recenti:</p>

  <!-- Primo articolo -->
  <article>
    <h3>Il mio primo romanzo</h3>
    <p><em>Data: 10 gennaio 2025</em></p>
    <img src="https://via.placeholder.com/300x150.png?text=Copertina+Romanzo" alt="Copertina del primo romanzo">
    <p>In questo articolo racconto la genesi del mio primo romanzo, le sfide affrontate e le emozioni vissute durante la scrittura...</p>
    <a href="/p/articolo1.html">Leggi tutto</a>
  </article>

  <!-- Secondo articolo -->
  <article>
    <h3>Recensione del Festival Letterario</h3>
    <p><em>Data: 5 febbraio 2025</em></p>
    <img src="https://via.placeholder.com/300x150.png?text=Festival+Letterario" alt="Foto del festival letterario">
    <p>Racconto la mia esperienza al Festival Letterario 2025, tra incontri con lettori, autori e momenti indimenticabili...</p>
    <a href="/p/articolo2.html">Leggi tutto</a>
  </article>

  <!-- Terzo articolo -->
  <article>
    <h3>Nuovo progetto in corso</h3>
    <p><em>Data: 20 marzo 2025</em></p>
    <img src="https://via.placeholder.com/300x150.png?text=Progetto+Scrittura" alt="Immagine progetto in corso">
    <p>Presento il mio nuovo progetto letterario, i temi che affronterò e le modalità di coinvolgimento dei lettori...</p>
    <a href="/p/articolo3.html">Leggi tutto</a>
  </article>
</section>

<!-- Footer -->
<footer>
  <p>&copy; 2025 Marco Rossi. Tutti i diritti riservati.</p>
</footer>

Note

  • Le immagini sono placeholder (via.placeholder.com) da sostituire con immagini reali del portfolio o degli articoli.

  • Ogni <article> contiene titolo, data, immagine, testo introduttivo e link per leggere tutto: struttura ottimale per un blog semplice e funzionale.

  • È possibile aggiungere altri <article> senza modificare il layout generale.

  • Coerenza con header e footer garantisce una navigazione uniforme su tutte le pagine.


Footer del Sito dello Scrittore

Il footer è la parte inferiore di ogni pagina del sito. Serve a fornire informazioni di contatto, copyright, link secondari e collegamenti ai social media. Deve essere chiaro, coerente con il resto del sito e facilmente aggiornabile.

Struttura del Footer

  1. Informazioni legali e copyright

    • Indicazione dell’anno e del nome dell’autore.

  2. Link di navigazione secondari

    • Collegamenti rapidi a Home, Contatti, Galleria, Blog.

  3. Social media (opzionale)

    • Link a profili Facebook, Twitter, Instagram, LinkedIn.

  4. Coerenza grafica

    • Stesso colore di sfondo, font e stile delle altre pagine per uniformità.

Scelte progettuali

  • Chiarezza: informazioni essenziali, leggibili e brevi.

  • Accessibilità: testo contrastante e leggibile.

  • Semplicità: non sovraccaricare con troppe informazioni, il footer deve completare la pagina senza distrarre.

  • Link interni ed esterni: consentono una navigazione rapida e condivisione del sito.

Codice Footer da copiare sull’editor

<!-- Footer -->
<footer style="background-color:#222; color:#fff; padding:20px; text-align:center; font-family:times;">
  <p>&copy; 2025 Marco Rossi. Tutti i diritti riservati.</p>
  
  <!-- Link di navigazione secondari -->
  <nav>
    <a href="/p/home.html" style="color:#fff; margin:0 10px;">Home</a>|
    <a href="/p/contatti.html" style="color:#fff; margin:0 10px;">Contatti</a>|
    <a href="/p/galleria.html" style="color:#fff; margin:0 10px;">Galleria</a>|
    <a href="/p/blog.html" style="color:#fff; margin:0 10px;">Blog</a>
  </nav>
  
  <!-- Social media -->
  <p>
    <a href="https://facebook.com/marcorossi" style="color:#fff; margin:0 5px;">Facebook</a>|
    <a href="https://twitter.com/marcorossi" style="color:#fff; margin:0 5px;">Twitter</a>|
    <a href="https://instagram.com/marcorossi" style="color:#fff; margin:0 5px;">Instagram</a>|
    <a href="https://linkedin.com/in/marcorossi" style="color:#fff; margin:0 5px;">LinkedIn</a>
  </p>
</footer>

Note

  • I link interni (/p/home.html, /p/contatti.html ecc.) devono corrispondere ai nomi dei file delle pagine create su Blogger.

  • I link ai social sono di esempio e vanno sostituiti con quelli reali dell’autore.

  • Il colore di sfondo e il colore del testo possono essere modificati per adattarsi al design generale del sito.

  • L’uso del tag <nav> aiuta sia l’accessibilità che la SEO, indicando i link principali della pagina.


alle Nessun commento:
Etichette: ,

lunedì 9 marzo 2026

Corso di HTML: 10 Progetto di un sito completo

10 – Project Work Finale: Sito Internet di uno Scrittore

Il Project Work Finale rappresenta il culmine del percorso didattico. L’obiettivo è realizzare un sito web completo dedicato a uno scrittore, mettendo in pratica tutte le competenze acquisite: HTML, CSS, JavaScript, layout responsive, ottimizzazione SEO e pubblicazione online.

Il progetto è pensato per essere altamente pratico, operativo e modulare, consentendo di ottenere un risultato reale e pubblicabile.

📌 Obiettivi del Project Work

Il sito dovrà includere sezioni e funzionalità specifiche, ciascuna con scopi chiari:

  1. Home: presentazione dello scrittore con navigazione chiara verso tutte le altre sezioni.

  2. Pagina Contatti: modulo funzionante con campi per nome, email e messaggio, pronto per test locale o integrazione con backend/servizi esterni.

  3. Galleria Immagini: copertine libri, eventi o foto significative, con effetti interattivi al passaggio del mouse.

  4. Blog/Portfolio: elenco dei libri o articoli, con titolo, descrizione e link per approfondire.

  5. Footer: informazioni legali, copyright e link social.

  6. Responsive Design: il sito deve adattarsi a dispositivi desktop, tablet e smartphone.

  7. Ottimizzazione SEO: meta tag corretti, titoli chiari, URL leggibili e performance ottimizzate.

L’obiettivo finale è avere un sito completo, bello da vedere, funzionale e pronto per essere pubblicato online.

📌 Strumenti e Prerequisiti

Prima di iniziare il progetto è necessario avere a disposizione:

  • Editor di testo aggiornato: Visual Studio Code o simili.

  • Browser moderno: Chrome, Firefox o Edge per testare in tempo reale le modifiche.

  • Conoscenze di base: HTML, CSS e JavaScript.

  • Accesso a piattaforme di pubblicazione: GitHub Pages per siti statici o hosting remoto per soluzioni più complesse.

  • Immagini ottimizzate: copertine libri o foto con dimensioni ridotte per migliorare performance.

📌 Struttura e Contenuti del Sito

1. Home

La pagina principale introduce lo scrittore e deve essere accattivante:

  • Header con il nome dello scrittore e menu di navigazione con link a tutte le sezioni.

  • Breve presentazione dell’autore con un paragrafo introduttivo.

  • Sezione con link rapidi ai libri, blog e contatti, per facilitare la navigazione.

Esempio HTML:

<header>
  <h1>Nome Cognome</h1>
  <nav>
    <a href="index.html">Home</a>
    <a href="galleria.html">Galleria</a>
    <a href="blog.html">Blog</a>
    <a href="contatti.html">Contatti</a>
  </nav>
</header>
<section>
  <p>Benvenuti nel sito ufficiale dello scrittore Nome Cognome. Qui troverete tutte le informazioni sui libri, eventi e articoli.</p>
</section>

2. Pagina Contatti

Il modulo di contatto permette agli utenti di interagire con lo scrittore:

  • Campi obbligatori: Nome, Email, Messaggio.

  • Pulsante “Invia” che può generare un alert di conferma per test locale.

  • Possibilità di integrazione con PHP o servizi esterni come Formspree per invio reale.

Esempio HTML:

<form>
  <label for="nome">Nome:</label>
  <input type="text" id="nome" name="nome" required><br>
  <label for="email">Email:</label>
  <input type="email" id="email" name="email" required><br>
  <label for="messaggio">Messaggio:</label><br>
  <textarea id="messaggio" name="messaggio" required></textarea><br>
  <input type="submit" value="Invia" onclick="alert('Messaggio inviato!')">
</form>

3. Galleria Immagini

La galleria consente di mostrare copertine e fotografie con un layout flessibile:

  • Utilizzo di griglie CSS per allineare immagini.

  • Hover effect per evidenziare immagini al passaggio del mouse.

  • Possibilità di integrare lightbox JS per ingrandire le immagini.

Esempio CSS:

.galleria img {
  max-width: 100%;
  height: auto;
  transition: transform 0.3s;
}
.galleria img:hover {
  transform: scale(1.1);
}

4. Blog / Portfolio

Sezione dedicata ai libri o articoli:

  • Ogni voce include titolo, breve descrizione, link "Leggi di più".

  • Possibilità di filtro per categoria o anno tramite JavaScript avanzato.

Esempio HTML:

<article>
  <h3>Titolo Libro 1</h3>
  <p>Breve descrizione del libro.</p>
  <a href="#">Leggi di più</a>
</article>

5. Footer

Il footer contiene informazioni legali e link utili:

  • Copyright e anno corrente.

  • Link social o recapiti.

  • Eventuale menu secondario per altre sezioni.

Esempio HTML:

<footer>
  <p>© 2025 Nome Cognome | <a href="#">Privacy</a> | <a href="#">Termini</a></p>
  <div class="social">
    <a href="#">Facebook</a> | <a href="#">Instagram</a>
  </div>
</footer>

📌 Responsive Design e Ottimizzazione SEO

  • Applicare media queries per adattare il layout a desktop, tablet e smartphone.

  • Usare immagini flessibili e layout fluidi per migliorare l’esperienza utente.

  • Includere meta tag SEO (title, description, keywords) in ogni pagina.

  • Ottimizzare le performance riducendo il peso delle immagini e minificando CSS/JS.

📝 Esercizio: Creazione del Sito di uno Scrittore

In questo esercizio praticheremo passo passo tutte le competenze acquisite durante il corso, dalla struttura HTML alla grafica CSS, fino all’interattività con JavaScript e alla pubblicazione online. L’obiettivo è costruire un sito web completo e funzionante, pronto da mostrare a chiunque.

1. Preparazione dell’Ambiente di Lavoro

Il primo passo consiste nel creare l’ambiente organizzato:

  • Crea una cartella principale sul tuo PC, ad esempio “SitoScrittore”.

  • All’interno della cartella crea:

    • index.html → la Home.

    • contatti.html, galleria.html, blog.html → le altre pagine del sito.

    • Una sottocartella css per i fogli di stile (es. style.css).

    • Una sottocartella js per i file JavaScript (es. script.js).

Strutturare bene i file e le cartelle facilita la manutenzione, la pubblicazione e la gestione dei collegamenti tra pagine.

2. Strutturare la Home

La Home è la porta d’ingresso del sito e deve essere chiara e accattivante:

  • Inserisci un header con il nome dello scrittore.

  • Aggiungi un menu di navigazione con link alle altre pagine.

  • Crea una sezione di presentazione con breve introduzione all’autore.

  • Inserisci link rapidi a libri, galleria e contatti per facilitare la navigazione.

Esempio HTML:

<header>
  <h1>Nome Cognome</h1>
  <nav>
    <a href="index.html">Home</a>
    <a href="galleria.html">Galleria</a>
    <a href="blog.html">Blog</a>
    <a href="contatti.html">Contatti</a>
  </nav>
</header>
<section>
  <p>Benvenuti nel sito ufficiale di Nome Cognome. Scopri i suoi libri, eventi e articoli.</p>
</section>

3. Costruire la Pagina Contatti

La pagina contatti consente agli utenti di interagire:

  • Crea un form con campi obbligatori: Nome, Email, Messaggio.

  • Aggiungi un pulsante Invia con alert di conferma per test locale.

  • In futuro puoi collegare il modulo a un backend o a servizi esterni come Formspree.

Esempio HTML:

<form>
  <label for="nome">Nome:</label>
  <input type="text" id="nome" name="nome" required><br>
  <label for="email">Email:</label>
  <input type="email" id="email" name="email" required><br>
  <label for="messaggio">Messaggio:</label><br>
  <textarea id="messaggio" name="messaggio" required></textarea><br>
  <input type="submit" value="Invia" onclick="alert('Messaggio inviato!')">
</form>

4. Creare la Galleria

La galleria deve mostrare immagini di libri o eventi:

  • Organizza le immagini in griglia flessibile usando CSS Grid o Flexbox.

  • Aggiungi hover effect per rendere le immagini interattive.

  • Opzionalmente, integra un lightbox JavaScript per ingrandire le immagini.

Esempio CSS:

.galleria {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 15px;
}
.galleria img {
  max-width: 100%;
  height: auto;
  transition: transform 0.3s;
}
.galleria img:hover {
  transform: scale(1.1);
}

5. Creare la Sezione Blog

La sezione blog/portfolio raccoglie libri o articoli:

  • Ogni articolo contiene titolo, descrizione breve e link “Leggi di più”.

  • Puoi aggiungere un filtro JS per categorie o anni di pubblicazione.

Esempio HTML:

<article>
  <h3>Libro 1</h3>
  <p>Breve descrizione del libro.</p>
  <a href="#">Leggi di più</a>
</article>

6. Collegamento e Navigazione tra le Pagine

  • Assicurati che il menu sia coerente su tutte le pagine.

  • Tutti i link interni devono puntare correttamente a index.html, contatti.html, galleria.html e blog.html.

7. Stilizzare con CSS Esterno

  • Collega style.css a tutte le pagine con <link rel="stylesheet" href="css/style.css">.

  • Applica stili a header, menu, sezioni e footer.

  • Utilizza media queries per rendere il sito responsive:

@media (max-width: 768px) {
  nav {
    flex-direction: column;
  }
  .galleria {
    grid-template-columns: 1fr;
  }
}

8. Aggiungere Interattività con JavaScript

  • Toggle menu mobile o contenuti nascosti.

  • Alert per conferma invio modulo contatti.

  • Eventi mouseover/mouseout per evidenziare elementi.

Esempio JS:

function toggleMenu() {
  let nav = document.querySelector('nav');
  nav.classList.toggle('aperto');
}

9. Pubblicazione Online

  • GitHub Pages: carica l’intera cartella e abilita Pages nelle impostazioni del repository.

  • Hosting FTP: usa FileZilla per caricare i file su un server remoto.

  • Controlla che tutte le pagine siano raggiungibili e responsive.

✅ Risultati Attesi

Al termine del Project Work, sarai in grado di:

  1. Creare un sito web completo e funzionale dedicato a uno scrittore.

  2. Strutturare contenuti multisezione usando HTML semantico.

  3. Applicare CSS per layout, grafica, responsive design e interazioni.

  4. Implementare JavaScript per migliorare l’usabilità della pagina.

  5. Pubblicare il sito online e renderlo accessibile al pubblico.

  6. Ottimizzare il sito per SEO e performance di base.

Questo esercizio rappresenta la sintesi operativa di tutto il corso, trasformando le conoscenze teoriche in un progetto reale e professionale, pronto per essere mostrato in un portfolio.


alle Nessun commento:
Etichette: ,

domenica 8 marzo 2026

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.


alle Nessun commento:
Etichette: ,

sabato 7 marzo 2026

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.


alle Nessun commento:
Etichette: ,
Iscriviti a: Commenti (Atom)

Corso di CSS & Web Design: 3 – Box Model e spaziature

3 – Box Model e spaziature 1. Concetto di Box Model In CSS ogni elemento HTML viene rappresentato come un rettangolo chiamato “box” , cos...