martedì 11 febbraio 2025

Corso di HTML: 11 l sito sviluppato interamente

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 per lo studente

  • 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 per lo studente

  • 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 per lo studente

  • 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 per lo studente

  • 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 per lo studente

  • 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
Etichette: ,

Nessun commento:

Posta un commento

Iscriviti a: Commenti sul post (Atom)

Corso Fondamenti di Informatica e Reti: 6 Reti di computer e Internet

Reti di computer e Internet Introduzione Prova a pensare alla vita quotidiana senza reti informatiche: niente messaggi WhatsApp, niente m...