Come creare un sito web con HTML e CSS (progetto completo) | We.Inc
Crea un sito completo di una pagina con HTML e CSS: struttura di base, header, hero, sezioni, modulo di contatto, footer, layout responsive e pubblicazione, con anteprima live.
Come creare un sito web con HTML e CSS
Crea una cartella con due file di testo semplice, index.html per il contenuto e styles.css per l'aspetto. Inizia index.html con la struttura standard (doctype, html, head, body), collega il foglio di stile nella head, aggiungi un header, le sezioni principali e un footer, poi apri il file in un browser. Carica la cartella su qualsiasi hosting statico per pubblicarla.
Il progetto completo in sei passaggi
Passaggio
File
Cosa aggiungi
1. Struttura di base
doctype, html lang, head con charset, viewport e title
2. Struttura
header, nav, main con sezioni, footer
3. Contenuto
Titoli, paragrafi, un'immagine con testo alternativo, un modulo
4. Stile
Font, colori, spaziature, una larghezza del contenuto centrata
5. Layout
Flexbox per l'header, grid per le card, una media query
6. Pubblicazione
Entrambi
Carica la cartella su un hosting statico
Questo è il progetto completo, non solo il primo file. Scriverai la pagina di una piccola attività partendo da una cartella vuota fino a un layout responsive, e il builder qui sotto ti permette di inserire il tuo nome e i tuoi dati e vedere la pagina finita aggiornarsi. Ogni snippet è completo, quindi puoi copiare i due file finali e aprirli subito.
Crea una nuova cartella sul tuo computer e al suo interno crea index.html e styles.css con un qualsiasi editor di testo semplice.
Compila i campi del builder qui sotto per dare forma alla pagina, poi copia i due file generati nella tua cartella.
Fai doppio clic su index.html per aprirlo nel browser. Modifica, salva e aggiorna per vedere ogni cambiamento.
Leggi le sezioni dei passaggi per capire cosa fa ogni parte del codice, così potrai modificarla con sicurezza.
Quando sei soddisfatto, pubblica la cartella con una delle opzioni di hosting alla fine.
Usa un editor di codice come VS Code invece di un programma di videoscrittura, che aggiunge formattazione che i browser non sanno leggere.
Chiama la home page index.html. La maggior parte degli hosting serve quel file automaticamente quando qualcuno visita l'indirizzo della cartella.
Usa nomi di file in minuscolo e senza spazi, per esempio about-us.html, perché molti server distinguono tra maiuscole e minuscole.
Prima di pubblicare, controlla il lavoro con la barra degli strumenti dei dispositivi negli strumenti per sviluppatori del browser, a una larghezza stretta da telefono.
Passa la pagina in un validatore HTML. Trova i tag non chiusi che i browser aggirano in silenzio.
Domande frequenti
Devo pagare qualcosa per creare un sito in HTML?
No. Per scrivere i file servono solo un editor di testo e un browser, entrambi gratuiti. Diversi hosting statici hanno piani gratuiti per siti piccoli; un dominio personalizzato è di solito l'unico costo, se ne vuoi uno.
Perché mi serve il meta tag viewport?
Senza, i browser dei telefoni impaginano la pagina a una larghezza ampia da desktop e la rimpiccioliscono, così il testo diventa minuscolo. width=device-width dice loro di usare la larghezza reale dello schermo, ed è questo che fa funzionare le media query.
Un sito solo HTML può avere un modulo di contatto?
L'HTML disegna il modulo, ma qualcosa deve ricevere l'invio. Su un hosting statico, punta l'action del modulo a un servizio di gestione moduli o alla funzione moduli integrata del tuo hosting. Un link mailto: è la soluzione di riserva più semplice.
Come aggiungo altre pagine?
Crea un altro file come about.html con lo stesso header e footer, collegalo con <a href="about.html">About</a> e condividi lo stesso styles.css tra le pagine. Ogni pagina deve avere il proprio title e il proprio h1.
Dovrei usare un framework?
Non per un primo sito. HTML e CSS semplici si caricano velocemente, non richiedono build e ti insegnano cosa produce ogni framework dietro le quinte. Passa a un framework quando ti servono componenti condivisi su molte pagine o un comportamento da applicazione.
I tag semantici fanno un lavoro reale
header, nav, main, section e footer non sono solo nomi più ordinati per div. Gli screen reader li espongono come landmark tra cui le persone possono saltare, e i motori di ricerca li usano per distinguere il contenuto principale dai menu ripetuti.
Usa un solo h1 per l'argomento della pagina e un h2 per ogni sezione. Lo schema dei titoli, elencato da solo, dovrebbe leggersi come un indice.
Un layout che funziona prima sui telefoni
Scrivi come predefinito il layout a una colonna per telefono, dato che i blocchi si impilano già in verticale. Poi aggiungi una media query con min-width per attivare le colonne quando c'è spazio.
Limita la larghezza di lettura con max-width su un contenitore e centralo con margin-inline: auto. Le righe restano comode sugli schermi larghi senza regole aggiuntive.
Pubblicare la tua cartella
Un hosting statico serve i tuoi file così come sono, ed è tutto ciò che serve a un sito HTML e CSS. Le opzioni tipiche ti permettono di trascinare la cartella in una dashboard o di collegare un repository Git così ogni push aggiorna il sito live.
Dopo il caricamento, apri l'indirizzo live sul telefono, clicca ogni link e invia il modulo una volta per verificare che ti arrivi.
Passaggio 1: la struttura di base della pagina
Ogni pagina HTML inizia con le stesse poche righe. Il doctype tiene i browser in modalità standard, lang dice agli screen reader in quale lingua parlare e il tag viewport fa usare ai telefoni la loro larghezza reale.
Punto di partenza di index.html
Salvalo, aprilo in un browser e hai già una pagina valida con un titolo nella scheda.
Passaggi 2 e 3: struttura e contenuto
Dentro body, un header contiene il nome e il menu, main contiene le sezioni e un footer chiude la pagina. Il risultato live qui sotto non ha ancora stili, e mostra quanto sia leggibile da solo un buon HTML.
Header, hero, card, modulo di contatto e footer
Modifica il testo e il risultato si aggiorna. Nota le etichette del modulo: cliccando un'etichetta si porta il focus sul suo campo.
Mettilo in styles.css accanto a index.html. Imposta un testo leggibile, una colonna centrata, un header flex e una griglia di card che diventa di tre colonne sugli schermi più larghi.
Il foglio di stile completo
Avvolgi l'interno di header, main e footer in <div class="wrap"> per centrare il contenuto, come fa l'output del builder.
Passaggio 6: pubblicare
Modi per mettere online una cartella statica
Percorso
Adatto per
Cosa fai
Hosting statico con trascinamento
Il tuo primo sito
Carica la cartella nella dashboard dell'hosting
Hosting statico collegato a Git
Siti che continuerai a modificare
Fai push su un repository; l'hosting ripubblica
Hosting web condiviso
Siti che richiedono anche email o PHP
Carica con il file manager o via SFTP nella cartella pubblica
Un website builder
Evitare del tutto il codice
Descrivi il sito e modificalo visivamente
Forno del Porto
Pane a lievitazione naturale, sfornato prima dell'alba.
Pagnotta a lievitazione naturale
Pane di segale ai semi
Dolci del fine settimana
Costruisci la tua pagina
Scrivi il nome della tua attività, uno slogan e tre offerte. L'anteprima ed entrambi i file si aggiornano mentre scrivi, pronti da copiare.