Creazione di un semplice sito HTML
1. Perché abbiamo bisogno di un sito in HTML?
Benvenuto nel fantastico mondo dello sviluppo web! Oggi creeremo un semplice sito statico HTML e lo metteremo su un web server che hai configurato nelle lezioni precedenti. Anche se non hai mai scritto codice HTML prima d'ora, non preoccuparti – sarà tutto chiarissimo. Il nostro obiettivo non sarà solo capire le basi dell'HTML, ma anche imparare come rendere il tuo sito accessibile al mondo grazie a un web server.
E ora faremo il passo successivo – creeremo il nostro sito in HTML e configureremo la sua visualizzazione utilizzando il tuo web server. Pronto a conquistare lo spazio web? Allora iniziamo!
HTML (HyperText Markup Language) – è la base di tutte le pagine web. Si occupa della struttura e del contenuto del sito. Con HTML standard puoi descrivere titoli, testi, immagini, link e persino tabelle. È facile da imparare, ma abbastanza potente da essere la base di qualsiasi sito.
Nella vita reale, le abilità con le pagine HTML statiche sono utili in molte situazioni diverse:
- Creazione rapida di prototipi di applicazioni web.
- Scrittura e test di pagine statiche per documentazione.
- Preparazione di un'interfaccia di base per applicazioni server-side.
E poi HTML – è un ottimo modo per creare un CV in formato pagina web (sì sì, ai recruiter a volte piace). Per noi, come programmatori, conoscere le basi dell'HTML è semplicemente un must-have.
2. Passo 1. Basi di HTML: creiamo la nostra prima pagina
Programmare è come LEGO: un’attività preferita di tutte le età. Iniziamo con un piccolo "mattoncino" — la nostra prima pagina web.
Un esempio minimale di un documento HTML
Crea un file chiamato index.html con qualsiasi editor di testo (ad esempio, nano, vim o anche gedit se preferisci un'interfaccia grafica) e scrivi il seguente codice:
<!DOCTYPE html>
<html>
<head>
<title>Il mio primo sito</title>
</head>
<body>
<h1>Ciao, mondo!</h1>
<p>Questa è la mia prima pagina web in HTML.</p>
</body>
</html>Spiegazione del codice
<!DOCTYPE html>– informa il browser che stiamo usando HTML5.<html>– apre l'intero documento. Tutto il contenuto della pagina è dentro questo tag.<head>– sezione per i metadati del sito (ad esempio, titolo della pagina, collegamenti a stili o script).<title>– il titolo della pagina che appare sulla scheda del browser.<body>– la sezione principale dove si trova tutto il contenuto visibile.<h1>– il titolo principale del primo livello (più piccolo è il numero, più grande è il titolo).<p>– un paragrafo di testo.
Sì, sono solo sette righe, ma queste saranno la base per il tuo sito!
3. Passo 2. Pubblicare il sito HTML sul server
Ora che la nostra pagina è pronta, è il momento di mostrarla al mondo. Per farlo utilizzeremo il nostro web server.
Preparazione della cartella del sito
Crea una directory per conservare i file del tuo sito. Ad esempio, se vuoi pubblicare il sito su un host virtuale con il dominio example.com, esegui:
sudo mkdir -p /var/www/example.com
Poi sposta il tuo file index.html in questa cartella:
sudo cp index.html /var/www/example.com/
Qui inizia la vera magia – il file è pronto per funzionare.
4. Passo 3. Configurazione del server web per ospitare il sito
Configurazione per Nginx
Apri il file di configurazione del Virtual Host:
sudo nano /etc/nginx/sites-available/example.comInserisci la seguente configurazione:
server { listen 80; server_name example.com; root /var/www/example.com; index index.html; location / { try_files $uri $uri/ =404; } }Attiva il Virtual Host e riavvia il server:
sudo ln -s /etc/nginx/sites-available/example.com /etc/nginx/sites-enabled/ sudo nginx -t sudo systemctl reload nginx
Configurazione per Apache
Apri il file di configurazione del Virtual Host:
sudo nano /etc/apache2/sites-available/example.com.confInserisci la seguente configurazione:
<VirtualHost *:80> ServerName example.com DocumentRoot /var/www/example.com <Directory /var/www/example.com> Options Indexes FollowSymLinks AllowOverride All Require all granted </Directory> </VirtualHost>Attiva il Virtual Host e riavvia il server:
sudo a2ensite example.com.conf sudo systemctl restart apache2
Verifica del sito
Ora apri il tuo browser, inserisci http://example.com (o l'indirizzo IP del tuo server) e goditi il risultato. Se vedi il tuo meraviglioso "Ciao, mondo!" – congratulazioni, tutto funziona!
5. Passo 4. Abbelliamo il nostro sito
La staticità va bene, certo, ma un po' di CSS non fa mai male. Aggiungiamo un tocco di stile.
Aggiungi un nuovo file style.css nella stessa cartella /var/www/example.com/:
body {
font-family: Arial, sans-serif;
background-color: #f5f5f5;
color: #333;
}
h1 {
color: #ff5722;
}Ora aggiorna il tuo index.html, aggiungendo un link al CSS:
<!DOCTYPE html>
<html>
<head>
<title>Il mio primo sito</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>Ciao, mondo!</h1>
<p>Questa è la mia prima pagina web in HTML.</p>
</body>
</html>Dopo aver ricaricato la pagina, noterai alcune piccole modifiche nello stile. Ora il tuo sito è diventato un po' più carino!
6. Problemi tipici e loro soluzioni
Quando lavori con siti web, potresti incontrare alcuni problemi, ma non preoccuparti, ci abbiamo pensato noi:
Errore "403 Forbidden". Controlla i permessi sulla cartella del sito. Usa:
sudo chmod -R 755 /var/www/example.comErrore "404 Not Found". Assicurati che i file del sito siano nella cartella corretta e che i loro nomi siano corretti.
Il sito non viene visualizzato. Verifica che il servizio del tuo web server sia attivo:
sudo systemctl status nginx sudo systemctl status apache2
Ora il tuo sito è accessibile a chiunque conosca il suo indirizzo. Non è fantastico? Nelle prossime lezioni imparerai ancora di più: ad esempio, come aggiungere HTTPS per la sicurezza e gestire le impostazioni del server.
GO TO FULL VERSION