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.