sabato 14 marzo 2026

Corso di CSS & Web Design: 4 – Layout con Flexbox

4 – Layout con Flexbox

1. Concetti chiave: container e items

Flexbox è un modello di layout CSS pensato per disporre elementi in modo flessibile e responsivo, sia in orizzontale che in verticale.

1.1 Container

  • L’elemento genitore diventa contenitore flessibile con:

display: flex;

  • Proprietà principali del container:

    • flex-direction: direzione principale degli elementi (row, row-reverse, column, column-reverse).

    • justify-content: allineamento lungo l’asse principale (flex-start, center, space-between, space-around).

    • align-items: allineamento lungo l’asse trasversale (flex-start, center, stretch, baseline).

    • flex-wrap: gestione del ritorno a capo (nowrap, wrap, wrap-reverse).

1.2 Items

  • Elementi figli (items) del container:

    • flex-grow: capacità di espandersi rispetto agli altri elementi.

    • flex-shrink: capacità di ridursi.

    • flex-basis: dimensione iniziale preferita.

    • align-self: sovrascrive l’allineamento lungo l’asse trasversale per un singolo item.

2. Proprietà principali del container Flexbox

Proprietà Valori comuni Funzione
flex-direction row, row-reverse, column, column-reverse Direzione principale degli elementi
justify-content flex-start, flex-end, center, space-between, space-around Allineamento lungo l’asse principale
align-items flex-start, flex-end, center, stretch Allineamento lungo l’asse trasversale
flex-wrap nowrap, wrap, wrap-reverse Consente il ritorno a capo degli elementi

Esempio Container

.container {
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  align-items: center;
  flex-wrap: wrap;
}

3. Proprietà principali degli items

Proprietà Funzione
flex-grow Espansione proporzionale
flex-shrink Riduzione proporzionale
flex-basis Dimensione base dell’item
flex shorthand per flex-grow flex-shrink flex-basis
align-self Allineamento individuale lungo l’asse trasversale

Esempio Item

.item {
  flex: 1 1 200px; /* grow=1, shrink=1, base=200px */
  margin: 10px;
  padding: 20px;
  background-color: lightblue;
  text-align: center;
}

4. Creare Navbar e griglie flessibili

4.1 Navbar orizzontale

<nav class="navbar">
  <a href="#">Home</a>
  <a href="#">Servizi</a>
  <a href="#">Contatti</a>
</nav>

.navbar {
  display: flex;
  justify-content: space-around;
  background-color: #333;
  padding: 10px;
}
.navbar a {
  color: white;
  text-decoration: none;
  padding: 8px 15px;
}
.navbar a:hover {
  background-color: #555;
  border-radius: 5px;
}

4.2 Griglia flessibile

  • Container flessibile con items che si adattano allo spazio:

.grid {
  display: flex;
  flex-wrap: wrap;
  gap: 15px; /* distanza tra items */
}
.grid-item {
  flex: 1 1 200px; /* dimensione minima 200px, cresce se possibile */
  padding: 20px;
  background-color: #a2d5f2;
  text-align: center;
  border-radius: 8px;
}

5. Esercizio svolto: layout a 3 colonne responsive

Obiettivo

Creare un layout con 3 colonne che si ridimensionano in base alla larghezza dello schermo.

HTML

<!DOCTYPE html>
<html lang="it">
<head>
  <meta charset="UTF-8">
  <title>Layout Flexbox 3 colonne</title>
  <link rel="stylesheet" href="stile.css">
</head>
<body>
  <div class="container">
    <div class="item">Colonna 1</div>
    <div class="item">Colonna 2</div>
    <div class="item">Colonna 3</div>
  </div>
</body>
</html>

CSS (stile.css)

body {
  font-family: Arial, sans-serif;
  margin: 0;
  padding: 20px;
  background-color: #f2f2f2;
}

.container {
  display: flex;
  flex-wrap: wrap; /* ritorno a capo su schermi piccoli */
  justify-content: space-between;
  gap: 20px; /* distanza tra colonne */
}

.item {
  flex: 1 1 30%; /* cresce, si riduce, base 30% del container */
  padding: 20px;
  background-color: #4fa3f2;
  color: white;
  text-align: center;
  border-radius: 10px;
}

/* Responsive: su schermi piccoli le colonne diventano a tutta larghezza */
@media (max-width: 768px) {
  .item {
    flex: 1 1 100%;
  }
}

Risultato

  • Tre colonne affiancate su desktop.

  • Si ridimensionano automaticamente su tablet o mobile.

  • Spaziatura uniforme tra le colonne grazie a gap.

  • Bordi arrotondati e sfondo colorato per estetica.


alle Nessun commento:
Etichette: ,

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: ,
Iscriviti a: Commenti (Atom)

Corso di CSS & Web Design: 4 – Layout con Flexbox

4 – Layout con Flexbox 1. Concetti chiave: container e items Flexbox è un modello di layout CSS pensato per disporre elementi in modo fl...