Introduzione
Hai mai desiderato creare un sito web ma non sai da dove iniziare? Sei nel posto giusto! In questa guida imparerai come costruire un sito web da zero, utilizzando due strumenti fondamentali: HTML e CSS. Non serve essere degli esperti, ti spiegherò ogni passaggio in modo chiaro e con esempi pratici. Alla fine, sarai in grado di creare un sito funzionale e anche bello da vedere!
1. Cos'è un Sito Web?
Un sito web è come un insieme di pagine organizzate in modo da fornire informazioni agli utenti. Ad esempio, pensa a un blog, a un negozio online o alla pagina ufficiale di un'azienda. Tutto inizia da una struttura di base che si costruisce con l'HTML e si abbellisce con il CSS.
Immagina che l'HTML sia lo scheletro di un edificio e il CSS sia la pittura e gli arredi che rendono l'edificio piacevole alla vista. Con HTML definisci la struttura del sito (titoli, testi, immagini), e con CSS decidi colori, grandezze e posizionamento degli elementi.
2. La Struttura di Base di una Pagina HTML
Ogni sito web parte da una semplice pagina HTML. Ecco come potrebbe essere la struttura di base del tuo sito:
<!DOCTYPE html>
<html lang="it">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Il Mio Primo Sito Web</title>
</head>
<body>
<h1>Benvenuti nel mio sito!</h1>
<p>Questa è una semplice pagina web creata utilizzando HTML e CSS.</p>
</body>
</html>
Questa è la struttura base che troverai in ogni pagina web:
- <!DOCTYPE html>: Questo dice al browser che stai utilizzando l'HTML5, la versione più recente.
- <html>: Racchiude tutto il contenuto del sito.
- <head>: Qui inserisci informazioni importanti per i motori di ricerca e il browser, come il titolo del sito.
- <body>: Questa è la parte visibile della tua pagina, dove andrai a inserire il contenuto.
Come Salvare i File HTML
Quando crei un documento HTML, devi assicurarti di salvarlo con l’estensione corretta: .html. Questo indica al computer che il file è un documento HTML, e il browser saprà come visualizzarlo.
Per esempio, se stai lavorando sul tuo primo sito, puoi creare un nuovo file di testo utilizzando un editor come Notepad++ o VS Code e salvarlo con il nome index.html. Il nome “index” è comune per la pagina principale di un sito, ma puoi usare qualsiasi nome che ti aiuti a organizzare il progetto.
3. Gli Elementi HTML: I Mattoni del Tuo Sito
Ora che hai una struttura di base, è tempo di aggiungere contenuto. Vediamo i principali elementi HTML che userai:
Titoli
In HTML puoi creare titoli di diverse dimensioni, dal più importante (<h1>) al meno importante (<h6>). Ecco un esempio:
<h1>Questo è il titolo principale</h1> <h2>Questo è un sottotitolo</h2> <h3>Questo è un titolo più piccolo</h3>
Il titolo principale (<h1>) dovrebbe essere usato una sola volta per pagina, mentre puoi usare i sottotitoli (<h2> e oltre) per organizzare il contenuto in sezioni.
Paragrafi
Il testo normale della pagina è inserito all'interno di un tag <p>, che indica un paragrafo:
<p>Questo è un paragrafo di esempio. Qui puoi scrivere quello che vuoi!</p>
Immagini
Per inserire un'immagine, usa il tag <img>. Devi indicare il file dell'immagine con l'attributo src e aggiungere una descrizione testuale con l'attributo alt:
<img src="immagine.jpg" alt="Descrizione dell'immagine">
Assicurati di usare immagini ottimizzate per il web (formati come .jpg o .png) e di salvare le immagini nella stessa cartella del tuo file HTML per un facile accesso.
Link
I link ti permettono di collegarti ad altre pagine o siti web. Ecco come creare un link:
<a href="https://www.google.com">Vai su Google</a>
L'attributo href contiene l'URL (l'indirizzo web) a cui il link porterà. Puoi anche creare collegamenti interni a sezioni specifiche del tuo sito.
4. Introduzione al CSS
Una volta inseriti i contenuti nel tuo sito, è ora di renderlo visivamente attraente. CSS ti permette di controllare l'aspetto della tua pagina, modificando colori, dimensioni, font, e molto altro.
Collegare un Foglio di Stile CSS
Per collegare il CSS alla tua pagina HTML, inserisci questo tag all'interno della sezione <head>:
<link rel="stylesheet" href="styles.css">
Questo dice al browser di caricare un file esterno chiamato styles.css che conterrà tutte le regole di stile per il tuo sito.
Regole di Stile di Base
Ecco un esempio di CSS che cambia il colore e l'allineamento del titolo <h1> e il colore del testo dei paragrafi:
h1 {
color: blue;
text-align: center;
}
p {
color: gray;
}
Qui abbiamo detto che il titolo <h1> deve essere blu e centrato, mentre il testo dei paragrafi sarà grigio.
Come Salvare il Foglio di Stile CSS
Il file CSS deve essere salvato con l’estensione .css. Ad esempio, puoi chiamarlo styles.css e assicurarti che si trovi nella stessa cartella del tuo file HTML. Quando aprirai il tuo file HTML nel browser, il CSS verrà caricato automaticamente e il tuo sito apparirà con gli stili che hai definito.
5. Come Funziona il Box Model
Quando aggiungi un elemento alla tua pagina, come un paragrafo o un'immagine, HTML e CSS lo trattano come una "scatola". Questa scatola ha quattro componenti principali:
- Content (contenuto): Il contenuto vero e proprio, ad esempio il testo o l'immagine.
- Padding: Lo spazio tra il contenuto e il bordo della scatola.
- Border: Il bordo della scatola.
- Margin: Lo spazio tra la scatola e gli altri elementi intorno.
Ecco un esempio di come puoi usare il Box Model in CSS:
div {
width: 300px;
padding: 20px;
border: 5px solid black;
margin: 10px;
}
Questo codice dice al browser di creare una scatola larga 300px, con un padding di 20px, un bordo nero di 5px e uno spazio esterno (margine) di 10px.
6. Creare Layout con Flexbox
Se vuoi organizzare meglio gli elementi sulla tua pagina, Flexbox è una soluzione potente e flessibile. Flexbox ti permette di allineare e distribuire gli elementi in modo efficiente, sia su una riga che su una colonna.
Ecco un esempio di come centrare gli elementi sia orizzontalmente che verticalmente con Flexbox:
.container {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
In questo esempio, la proprietà justify-content centra gli elementi orizzontalmente, mentre align-items li centra verticalmente.
7. Adattare il Tuo Sito a Tutti i Dispositivi con Media Queries
Oggi è importante che il tuo sito funzioni bene su dispositivi di diverse dimensioni, come smartphone, tablet e computer. Le media queries ti permettono di cambiare lo stile del sito a seconda della larghezza dello schermo dell'utente.
Ecco un esempio di una media query che cambia la dimensione del testo quando lo schermo è più piccolo di 600px:
@media (max-width: 600px) {
h1 {
font-size: 20px;
}
}
In questo caso, se l'utente visualizza il sito su un telefono o tablet con uno schermo stretto, il titolo <h1> diventerà più piccolo.
8. Creare una Barra di Navigazione
Un sito web ha spesso bisogno di un menu di navigazione per aiutare gli utenti a muoversi tra le diverse pagine. Ecco un esempio di un semplice menu di navigazione orizzontale:
<nav>
<ul>
<li><a href="#home">Home</a></li>
<li><a href="#about">Chi Siamo</a></li>
<li><a href="#services">Servizi</a></li>
<li><a href="#contact">Contatti</a></li>
</ul>
</nav>
Ecco un semplice CSS per stilizzare il menu:
nav ul {
list-style: none;
padding: 0;
text-align: center;
}
nav ul li {
display: inline;
margin-right: 20px;
}
nav ul li a {
text-decoration: none;
color: #333;
}
9. Caricamento del Tuo Sito su un Hosting
Dopo aver creato il tuo sito web, è il momento di renderlo visibile a tutti caricandolo su un servizio di hosting. Un hosting è un servizio che ti permette di "parcheggiare" il tuo sito su internet, così che chiunque possa visitarlo digitando il tuo indirizzo web (URL).
Per caricare il tuo sito su un hosting, segui questi semplici passaggi:
- Scegli un servizio di hosting: Ci sono molti servizi di hosting tra cui scegliere, come SiteGround, Bluehost o Netlify (gratuito per siti statici). Scegli quello che meglio si adatta alle tue esigenze.
- Accedi al pannello di controllo: Dopo aver acquistato o registrato il tuo hosting, accedi al pannello di controllo fornito dal servizio. La maggior parte degli hosting ti dà accesso a un File Manager o ti consente di caricare file tramite un protocollo chiamato FTP (File Transfer Protocol).
- Carica i file: Usa il File Manager o un programma FTP (come FileZilla) per caricare i tuoi file HTML, CSS e immagini sul server. Se il tuo file principale si chiama
index.html, questo verrà automaticamente caricato come la pagina principale del tuo sito. - Testa il sito: Una volta caricati i file, vai sul tuo dominio (ad esempio
www.iltuodominio.com) per verificare che il sito funzioni correttamente. Se tutto è andato bene, il tuo sito sarà online e pronto per essere visitato!
Esempio Pratico di Caricamento con Netlify
Se scegli di utilizzare un servizio come Netlify, il caricamento è ancora più semplice. Puoi creare un account su Netlify e caricare direttamente i tuoi file tramite drag and drop (trascinare e rilasciare) nel loro sistema. Netlify gestirà tutto il resto e il tuo sito sarà online in pochi minuti.
10. Conclusione
Complimenti! Hai imparato a costruire un sito web utilizzando HTML e CSS. Ora hai le basi per creare un sito funzionale e ben progettato. Dopo aver caricato il tuo sito su un servizio di hosting, il mondo potrà vedere la tua creazione. Continua a sperimentare, aggiungi nuove funzionalità e miglioramenti. Ogni sito che crei ti farà imparare qualcosa di nuovo!
