📓 Sviluppo Web

Guida Completa alla Creazione di un Sito Web Statico (HTML, CSS, JavaScript + GitHub Pages)

Introduzione

Un sito web statico è composto da file HTML, CSS e JavaScript che vengono caricati così come sono dal server al browser dell’utente. Non richiede database o backend complessi, ed è perfetto per portfolio, blog, pagine di presentazione e documentazione.

Questa guida ti accompagnerà passo passo nella creazione di un sito statico moderno, spiegando i concetti fondamentali, le tecniche di sviluppo, l’organizzazione dei file e la pubblicazione gratuita su GitHub Pages.

1. Cos’è un sito web statico?

Un sito statico è composto da contenuti fissi: ogni pagina è un file HTML che il browser mostra così com’è. Puoi aggiungere interattività con JavaScript e curare la grafica con CSS.

Quando scegliere un sito statico?

Vantaggi:

2. Strumenti necessari

Installare questi strumenti ti permetterà di scrivere, testare e pubblicare il tuo sito.

3. Struttura dei file di un sito statico

Organizza il sito in una cartella principale, ad esempio miosito/, con questa struttura:

miosito/
│
├── index.html
├── about.html
├── contact.html
├── style/
│     └── main.css
├── script/
│     └── main.js
├── images/
│     └── logo.png
└── README.md

4. HTML: la struttura del sito

HTML (HyperText Markup Language) è il linguaggio che struttura il contenuto delle pagine. Ogni file HTML contiene una “scheletro” di base:

<!DOCTYPE html>
<html lang="it">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Nome Sito</title>
  <link rel="stylesheet" href="style/main.css">
</head>
<body>
  <header>
    <h1>Benvenuto nel mio sito!</h1>
    <nav>
      <a href="index.html">Home</a>
      <a href="about.html">Chi sono</a>
      <a href="contact.html">Contatti</a>
    </nav>
  </header>

  <main>
    <section>
      <h2>Presentazione</h2>
      <p>Questo è il mio sito web personale.</p>
    </section>
  </main>

  <footer>
    <p>&copy; 2025 Nome Cognome</p>
  </footer>

  <script src="script/main.js"></script>
</body>
</html>

Spiegazione delle principali sezioni:

5. CSS: stile e layout

CSS (Cascading Style Sheets) serve per colorare, posizionare e rendere gradevole il sito. Esempio di file style/main.css:

body {
  font-family: 'Segoe UI', Arial, sans-serif;
  background: #f5f7fa;
  margin: 0;
  color: #333;
}

header {
  background: #004080;
  color: #fff;
  padding: 20px 0;
}

nav a {
  color: #fff;
  margin: 0 10px;
  text-decoration: none;
  font-weight: bold;
}

main {
  padding: 30px 5vw;
}

footer {
  background: #eee;
  color: #555;
  text-align: center;
  padding: 15px 0;
  font-size: 0.9em;
  border-top: 1px solid #ccc;
}

Buone pratiche:

6. JavaScript: interattività di base

JavaScript permette di aggiungere interattività e funzionalità al sito. Esempio di file script/main.js:

// Esempio: mostra un messaggio di benvenuto quando si carica la pagina
window.onload = function() {
  console.log("Benvenuto nel sito!");
};

// Esempio: cambia il testo di un elemento al click
document.addEventListener('DOMContentLoaded', () => {
  const titolo = document.querySelector('h1');
  titolo.addEventListener('click', () => {
    titolo.textContent = "Hai cliccato sul titolo!";
  });
});

Suggerimenti utili:

7. Ottimizzazione delle immagini e delle risorse

8. Responsive Design: rendi il sito adatto a tutti i dispositivi

Il “responsive design” permette al sito di adattarsi a schermi di ogni dimensione (PC, tablet, smartphone). Usa le media query nel CSS:

@media (max-width: 600px) {
  nav {
    display: block;
    text-align: center;
  }
  main {
    padding: 10px 2vw;
  }
  header {
    padding: 10px 0;
  }
}

Suggerimenti:

9. Accessibilità e buone pratiche

10. Versionamento e pubblicazione con GitHub Pages

1. Versiona il sito con Git

  1. Crea una repository su GitHub (es. miosito).
  2. Inizializza la cartella locale:
    3.    git init
   git add .
   git commit -m "Prima versione del sito"
   git remote add origin https://github.com/TUOUSERNAME/miosito.git
   git push -u origin main
  3. Aggiorna il sito facendo nuovi commit e push.

2. Pubblica il sito con GitHub Pages

  1. Vai su Settings del repository GitHub.
  2. Scorri fino alla sezione Pages.
  3. Seleziona il branch principale (main) e la cartella root (/), poi salva.
  4. Dopo pochi minuti, il sito sarà visibile all’indirizzo:
    5.    https://TUOUSERNAME.github.io/miosito/

Suggerimenti:

11. Esempio completo di homepage

<!DOCTYPE html>
<html lang="it">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Portfolio di Mario Rossi</title>
  <link rel="stylesheet" href="style/main.css">
</head>
<body>
  <header>
    <h1>Mario Rossi</h1>
    <nav>
      <a href="index.html">Home</a>
      <a href="about.html">Chi sono</a>
      <a href="contact.html">Contatti</a>
    </nav>
  </header>
  <main>
    <section>
      <h2>Benvenuto!</h2>
      <p>Scopri i miei progetti e le mie competenze.</p>
      <img src="images/portfolio.png" alt="Immagine portfolio">
    </section>
  </main>
  <footer>
    <p>&copy; 2025 Mario Rossi - <a href="mailto:[email protected]">Contattami</a></p>
  </footer>
  <script src="script/main.js"></script>
</body>
</html>

12. Risorse utili

13. Consigli pratici e buone abitudini

14. Conclusione

Creare un sito web statico è il modo migliore per imparare come funziona il web, mettere in mostra le tue competenze o presentare progetti personali. Con HTML, CSS e JavaScript puoi realizzare pagine moderne, belle e funzionali. Grazie a GitHub Pages, puoi pubblicare il tuo lavoro online in pochi minuti, gratuitamente.

Sperimenta, migliora e condividi il tuo sito con il mondo! 🚀