HTML Base: Primi Passi nel Web con Esercizi Pratici Guidati

La Grande Invenzione: Perché è nato l'HTML al CERN di Ginevra?

Oggi diamo per scontato che basti un tocco sullo smartphone per aprire qualsiasi notizia, video o sito web. Ma negli anni '80 il World Wide Web non esisteva ancora!

Cos'è davvero una Pagina Web?

Spesso si pensa che creare un sito internet sia qualcosa di misterioso o complicatissimo. In realtà, la verità è molto più semplice: una pagina web è solo un normalissimo file di testo a cui diamo l'estensione .html anziché .txt!

Puoi scrivere codice HTML usando qualsiasi programma semplice, come il Blocco Note di Windows, TextEdit su Mac o un editor moderno come Visual Studio Code.

Figura 1: Dal codice sorgente alla pagina: il browser interpreta i tag HTML e mostra la pagina finita, nascondendo completamente i commenti.

Figura 2: Come è fatto un singolo tag HTML: apertura <p>, testo contenuto e chiusura </p>.

Passo 1: I Titoli e i Paragrafi

Quando scrivi una pagina, la prima cosa che ti serve è dare un titolo principale e scrivere delle frasi di testo.

• I Titoli (da <h1> a <h6>): <h1> è il titolo più grande e importante. Poi ci sono <h2> per i sottotitoli, <h3> per le sezioni minori, fino a <h6> che è il più piccolo.
• I Paragrafi (<p>): racchiudono un capoverso di testo normale.

<h1>Il mio primo titolo!</h1>
<p>Ciao a tutti, questo è il mio primo paragrafo scritto in HTML.</p>

<h1>Mario Rossi</h1>
<h2>Studente delle Scuole Superiori</h2>
<p>Frequento l'Istituto Tecnico e voglio imparare a creare siti web da zero.</p>

Passo 2: Evidenziare parole e andare a capo

Nel browser, se premi il tasto Invio mentre scrivi il codice, il browser non va a capo nella pagina web visibile! Per formattare il testo si usano questi semplici tag:

• <strong>: rende il testo in grassetto (segnala che la parola è molto importante).
• <em>: rende il testo in corsivo (aggiunge enfasi).
• <mark>: evidenzia il testo in giallo come un pennarello.
• <br>: forza un'interruzione di riga e fa andare il testo a capo (è un tag vuoto, non serve chiuderlo!).
• <hr>: traccia una bella linea orizzontale divisoria tra un argomento e l'altro.

<p>
  Oggi è una giornata <strong>fondamentale</strong> per imparare il codice.<br>
  Sto studiando con <em>Professor Byte</em>.
</p>
<hr>
<p>Questo paragrafo si trova dopo la linea divisoria.</p>

<h2>AIUTO: Cane Smarrito a Ivrea!</h2>
<p>
  Abbiamo smarrito ieri sera un <strong>Labrador color miele</strong>.<br>
  Risponde al nome di <em>"Luna"</em> e indossa un collare rosso con medaglietta.
</p>
<hr>
<p>
  In caso di avvistamento chiamare subito il: <strong>333-1234567</strong> (Offresi ricompensa!)
</p>

Passo 3: I Commenti nel Codice: Le Note Invisibili del Programmatore

Quando scrivi una pagina web, a volte hai bisogno di prendere appunti, spiegare cosa fa una sezione complessa o ricordarti qualcosa per la lezione successiva. In HTML puoi farlo usando i commenti!

I 3 Superpoteri dei Commenti

• 1. Documentare il codice: spiegare a un compagno di classe o a te stesso cosa fa una parte di pagina (es. <!-- Inizio sezione contatti -->).
• 2. Promemoria personali: appuntare cose ancora da completare (es. <!-- TODO: inserire la foto del cane -->).
• 3. "Spegnere" codice senza cancellarlo (Comment Out): se vuoi provare la pagina nascondendo un paragrafo o un'immagine per vedere come sta senza, basta racchiuderlo tra <!-- e -->. Non dovrai cancellarlo e potrai riattivarlo quando vuoi!

<!-- Questo è un commento invisibile nel browser -->
<h1>Il mio bellissimo blog</h1>

<!-- Paragrafo temporaneamente disattivato per fare una prova:
<p>Questo testo non si vedrà nel browser finché è commentato!</p>
-->

<p>Questo paragrafo invece è perfettamente visibile a tutti.</p>

<!-- Promemoria personale: Ricordati di chiedere a Matteo se l'ha visto! -->
<h1>Spider-Man: Across the Spider-Verse</h1>

<p>Miles Morales viene catapultato nel multiverso dove incontra una squadra di Spider-Eroi incaricati di proteggere l'esistenza stessa.</p>

<!-- ATTENZIONE SPOILER: Ho commentato questo paragrafo così non si vede a video!
<p>Alla fine del film Miles scopre di essere finito nella dimensione sbagliata, Terra-42!</p>
-->

Passo 4: Creare Liste ed Elenchi

Nel web usiamo continuamente gli elenchi: per la lista della spesa, per gli ingredienti di una ricetta o per le classifiche. In HTML esistono due tipi di liste:

<!-- Lista con pallini (spesa) -->
<h3>Cosa comprare:</h3>
<ul>
  <li>Pane fresco</li>
  <li>Latte parzialmente scremato</li>
  <li>Biscotti al cioccolato</li>
</ul>

<!-- Lista con numeri (passaggi in ordine) -->
<h3>Come preparare la cartella:</h3>
<ol>
  <li>Controlla l'orario scolastico sul diario</li>
  <li>Inserisci i quaderni delle materie del giorno</li>
  <li>Non dimenticare l'astuccio e la merenda</li>
</ol>

<h3>La mia Top 3 dei Videogiochi preferiti</h3>
<ol>
  <li>Minecraft</li>
  <li>The Legend of Zelda</li>
  <li>Rocket League</li>
</ol>

<h3>Le cose che amo fare nel weekend</h3>
<ul>
  <li>Fare lunghe passeggiate in bicicletta</li>
  <li>Ascoltare musica indie con le cuffie</li>
  <li>Guardare serie TV insieme agli amici</li>
</ul>

Passo 5: I Link Ipertestuali (Come viaggiare nel Web)

Il motivo per cui il Web è diventato famoso in tutto il mondo è l'ipertesto: la possibilità di cliccare su una parola sottolineata e finire istantaneamente su un'altra pagina o sito!

Per creare un link si usa la lettera <a> (che sta per Anchor, àncora). Ma un link da solo non sa dove andare: ha bisogno dell'attributo href (l'indirizzo di destinazione).

<!-- Cliccando sulla parola "Wikipedia", il browser apre quel sito -->
<p>
  Per fare le ricerche scolastiche uso spesso 
  <a href="https://it.wikipedia.org" target="_blank">Wikipedia Italia</a>.
</p>

<h3>I miei siti preferiti per studiare</h3>
<ul>
  <li><a href="https://www.google.it" target="_blank">Motore di Ricerca Google</a></li>
  <li><a href="https://it.wikipedia.org" target="_blank">Enciclopedia Libera Wikipedia</a></li>
  <li><a href="https://professorbyte.it" target="_blank">Portale Didattico Professor Byte</a></li>
</ul>

Passo 6: Inserire le Immagini nel Web

Una pagina web composta da sole scritte può risultare noiosa. Per inserire una fotografia si usa il tag <img> (da Image).

Il tag <img> è speciale: non racchiude testo e quindi NON ha un tag di chiusura! Ha però due attributi fondamentali senza i quali non può funzionare:

• src (Source): indica il percorso del file dell'immagine (es. src="gatto.jpg") oppure un indirizzo internet web.
• alt (Alternative Text): descrive a parole cosa c'è nella foto. È indispensabile se la connessione è lenta e, soprattutto, permette agli studenti non vedenti di ascoltare la descrizione tramite il sintetizzatore vocale.
• width: larghezza in pixel (es. width="300" per non farla apparire gigantesca).

<img src="https://images.unsplash.com/photo-1546527868-ccb7ee7dfa6a?w=400" 
     alt="Un tenero cagnolino cucciolo che gioca nell'erba" 
     width="300">

<h2>Il mio animale preferito: La Volpe Rossa</h2>
<img src="https://images.unsplash.com/photo-1516934024742-b461fba47600?w=400" 
     alt="Primo piano di una volpe rossa nella neve" 
     width="280">
<p>
  Adoro le volpi per la loro intelligenza e agilità. Il loro ambiente naturale è il <strong>bosco di montagna</strong>.
</p>

Passo 7: La Scatola Completa (Lo Scheletro HTML5)

Finora abbiamo provato i singoli mattoncini (titoli, paragrafi, liste, link, foto). Ora dobbiamo imparare come si confeziona un documento HTML completo ufficiale pronto per essere salvato come index.html.

Figura 3: La struttura a due grandi stanze: <head> (dietro le quinte) e <body> (sul palcoscenico).

Una pagina completa è divisa esattamente in due parti:

1. La <head> (La "testa" o retroscena): contiene informazioni invisibili per il browser (come il titolo della linguetta in alto <title> e la codifica per le lettere accentate charset="utf-8").
2. Il <body> (Il "corpo" o palcoscenico): tutto ciò che vuoi mostrare a chi visita la tua pagina (tutto quello che abbiamo visto negli Step 1, 2, 3, 4, 5 e 6) deve stare dentro al body!

<!DOCTYPE html>
<html lang="it">
  <head>
    <meta charset="utf-8">
    <title>Il Mio Primo Sito Web</title>
  </head>
  <body>
    <h1>Benvenuti nella mia pagina!</h1>
    <p>Tutto ciò che si trova dentro il body viene mostrato a schermo.</p>
  </body>
</html>

<!DOCTYPE html>
<html lang="it">
  <head>
    <meta charset="utf-8">
    <title>La Pagina di Mario Rossi</title>
  </head>
  <body>
    <h1>Ciao, sono Mario Rossi!</h1>
    <p>
      Studio all'Istituto Tecnico e adoro la <strong>tecnologia</strong>.<br>
      Questa pagina è scritta con <em>puro codice HTML</em>.
    </p>
    
    <hr>

    <h2>Le mie materie preferite:</h2>
    <ul>
      <li>Informatica e Laboratorio</li>
      <li>Scienze e Fisica</li>
      <li>Inglese</li>
    </ul>

    <h2>La mia foto preferita:</h2>
    <img src="https://images.unsplash.com/photo-1517694712202-14dd9538aa97?w=400" 
         alt="Computer portatile con codice sullo schermo" 
         width="260">

    <p>
      Visita il mio sito preferito: 
      <a href="https://professorbyte.it" target="_blank">ProfessorByte.it</a>
    </p>
  </body>
</html>

La Palestra del Codice: Sperimenta subito solo con HTML!

Questo è il tuo banco di prova: scrivi o modifica il codice nel riquadro a sinistra e premi "▶ Aggiorna Anteprima" per vedere all'istante il risultato a destra. Qui usiamo solo HTML puro al 100%!

Tabella Riassuntiva dei Tag Imparati