Se ti sei mai chiesto come funziona una pagina web dietro le quinte, la risposta è: HTML. Questo linguaggio – che non è un vero linguaggio di programmazione ma piuttosto un linguaggio di markup – è la spina dorsale di ogni sito internet. Con HTML possiamo strutturare contenuti, aggiungere immagini, creare link e persino integrare elementi multimediali come video e audio. Oggi ti guiderò attraverso gli elementi fondamentali dell’HTML con esempi pratici e consigli utili per creare da zero una pagina web funzionante.
Cos’è un Tag e come funziona?
Immagina i tag HTML come i mattoncini Lego che compongono una pagina web. Ogni tag ha uno scopo specifico: definire un titolo, un paragrafo, un’immagine, un link e così via.
Un tag HTML è racchiuso tra parentesi angolari (<>), solitamente con un tag di apertura (<tag>) e uno di chiusura (</tag>). Alcuni tag, come <img> e <br>, non necessitano di una chiusura esplicita.
Ecco un esempio semplice:
<!DOCTYPE html> <html> <head> <title>Il mio primo sito</title> </head> <body> <h1>Ciao, mondo!</h1> <p>Questa è la mia prima pagina web.</p> </body> </html>In questo codice abbiamo un documento HTML di base con un titolo (<title>), un’intestazione (<h1>) e un paragrafo (<p>).
La struttura di una pagina HTML
Ogni pagina HTML segue una struttura standard composta da vari elementi essenziali:
<!DOCTYPE html>: indica che stiamo utilizzando la versione HTML5.<html>: l’elemento principale che racchiude tutto il contenuto della pagina.<head>: la sezione con metadati, titolo della pagina e collegamenti a fogli di stile o script.<body>: il corpo della pagina, ovvero tutto ciò che viene visualizzato dall’utente nel browser.
Esempio dettagliato:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Pagina di esempio</title> </head> <body> <h1>Benvenuto sul mio sito</h1> <p>Questa è una semplice pagina HTML.</p> </body> </html>Testo in HTML
Il testo è una parte essenziale di una pagina web. HTML offre diversi tag per formattarlo:
<h1>,<h2>,<h3>…<h6>: intestazioni di diversi livelli.<p>: paragrafi.<strong>: testo in grassetto.<em>: testo in corsivo.<br>: interruzione di riga.<hr>: linea orizzontale per separare contenuti.
Esempio:
<h1>Intestazione principale</h1> <h2>Sottotitolo</h2> <p>Questo è un <strong>paragrafo</strong> con <em>testo evidenziato</em>.</p>Elenchi e Tabelle
Per organizzare informazioni, possiamo usare elenchi puntati e numerati:
<ul> <li>Elemento 1</li> <li>Elemento 2</li> </ul> <ol> <li>Primo passo</li> <li>Secondo passo</li> </ol>E per i dati tabulari, possiamo usare le tabelle:
<table border="1"> <tr> <th>Nome</th> <th>Età</th> </tr> <tr> <td>Mario</td> <td>25</td> </tr> </table>Aggiungere Link e Immagini
I link (<a>) permettono di collegare pagine web tra loro:
<a href="https://www.google.com" target="_blank">Visita Google</a>Le immagini si aggiungono con il tag <img> specificando il percorso del file:
<img src="immagine.jpg" alt="Descrizione dell'immagine">Audio e Video in HTML
Ora è possibile incorporare audio e video senza bisogno di plugin esterni:
<audio controls> <source src="audio.mp3" type="audio/mpeg"> </audio> <video width="320" height="240" controls> <source src="video.mp4" type="video/mp4"> </video>Canvas: Disegnare sul Web
L’elemento <canvas> permette di creare grafica dinamica con JavaScript:
<canvas id="mioCanvas" width="200" height="100" style="border:1px solid #000;"></canvas> <script> var c = document.getElementById("mioCanvas"); var ctx = c.getContext("2d"); ctx.fillStyle = "blue"; ctx.fillRect(20, 20, 150, 80); </script>Come salvare una pagina HTML?
Ora che hai imparato le basi dell’HTML, vediamo come salvare e visualizzare la tua prima pagina web:
- Apri un editor di testo: Puoi usare Notepad (su Windows), TextEdit (su Mac, in modalità testo semplice) o un editor avanzato come Visual Studio Code o Sublime Text.
- Scrivi il codice HTML: Copia e incolla uno degli esempi visti sopra o creane uno tuo.
- Salva il file con estensione
.html:- Su Windows: Vai su File > Salva con nome, scegli “Tutti i file” come tipo e scrivi
index.html. - Su Mac: Assicurati di salvare con estensione
.html, non.txt.
- Su Windows: Vai su File > Salva con nome, scegli “Tutti i file” come tipo e scrivi
- Apri il file con un browser: Fai doppio clic sul file salvato e si aprirà nel browser predefinito (Chrome, Firefox, Edge, Safari).
Ora hai la tua prima pagina HTML funzionante! 🎉 Da qui puoi iniziare ad aggiungere stili con CSS e interattività con JavaScript. Ti senti pronto per sperimentare?
