Come funziona il web, in breve
Quando digiti un indirizzo nel browser, succede questo:
- Il browser (il client) invia una richiesta a un server, il computer che ospita il sito.
- Il server risponde inviando i file della pagina: HTML, CSS, immagini.
- Il browser li interpreta e mostra la pagina sullo schermo.
Alcuni termini che userai spesso:
- URL: l’indirizzo di una risorsa online, es.
https://www.example.com/pagina - Dominio: il nome che identifica un sito, es.
example.com - Hosting: lo spazio su un server dove “vive” il sito
- HTTPS: la versione sicura e cifrata del protocollo HTTP — oggi è lo standard
Gli strumenti che userai in questo corso
- Editor di codice: scriveremo HTML e CSS con Visual Studio Code, gratuito e il più diffuso al mondo.
- Browser: useremo Chrome o Firefox, entrambi con ottimi strumenti per sviluppatori integrati.
- DevTools (tasto
F12): permettono di ispezionare il codice di qualsiasi pagina e modificarlo in tempo reale, solo nel browser — utilissimo per capire come sono fatte le pagine che visiti.
Che cos’è HTML
HTML (HyperText Markup Language) è il linguaggio standard per costruire pagine web. Non è un linguaggio di programmazione: è un linguaggio a tag che descrive la struttura e il contenuto di una pagina — titoli, paragrafi, immagini, link — così che il browser sappia come visualizzarli.
Un tag è racchiuso tra parentesi angolari. Nella maggior parte dei casi i tag vanno in coppia:
<p>Questo è un paragrafo.</p><p>è il tag di apertura</p>è il tag di chiusura (identico all’apertura, con una/davanti)- Il testo in mezzo è il contenuto dell’elemento
Alcuni elementi non hanno contenuto e quindi non hanno un tag di chiusura — si dicono void: <img>, <br>, <meta>, <input>.
La struttura minima di un documento HTML
<!DOCTYPE html>
<html lang="it">
<head>
<meta charset="UTF-8">
<title>Titolo della pagina</title>
</head>
<body>
<h1>Ciao, mondo!</h1>
<p>Questa è la mia prima pagina web.</p>
</body>
</html>
<!DOCTYPE html>deve essere la primissima riga: dice al browser che il documento è HTML5.<html>è l’elemento radice, racchiude tutto il resto.<head>contiene informazioni non visibili nella pagina (titolo della scheda del browser, codifica dei caratteri, collegamento a CSS).<body>contiene tutto ciò che l’utente vede.
Buone pratiche fin da subito: tag sempre in minuscolo, codice indentato (2 o 4 spazi) per restare leggibile man mano che la pagina cresce.
Esercitazione pratica
Installa Visual Studio Code, crea un file index.html con la struttura minima qui sopra, aprilo nel browser e verifica che compaia il titolo della pagina nella scheda.