Guida Completa al Linguaggio HTML

Sviluppo di contenuti per il web - HTML

Benvenuto nel mondo della creazione di siti web! L'HTML (HyperText Markup Language) è il primo linguaggio che devi imparare se vuoi costruire pagine web.

In questa unità scoprirai tutto quello che ti serve: dalla struttura base di una pagina fino a come creare link, inserire immagini e organizzare contenuti con tabelle ed elenchi. Non preoccuparti, è molto più facile di quanto pensi!

💡 Ricorda: HTML non è un linguaggio di programmazione - è semplicemente un modo per "marcare" il contenuto!

Contenuti del corso

Ecco cosa imparerai in questo percorso: struttura base e formattazione del testo, collegamenti e immagini, i tag principali, elenchi puntati e numerati, tabelle e menù.

Ogni argomento ti servirà per costruire siti web sempre più interessanti. Inizierai con le basi e poi aggiungerai elementi più complessi passo dopo passo.

💡 Consiglio: Non cercare di imparare tutto in una volta - procedi con calma e pratica ogni concetto!

Cosa sono le pagine web

Le pagine web sono documenti multimediali scritti in HTML che formano i siti internet. Questi siti vivono sui web-server e li raggiungi tramite motori di ricerca o digitando l'indirizzo diretto.

I siti sono collezioni di pagine collegate tra loro attraverso una struttura ipertestuale. Questo significa che puoi saltare da una pagina all'altra seguendo i link, proprio come fai quando navighi su Instagram o TikTok!

La differenza principale è che le pagine possono essere statiche (sempre uguali) o dinamiche (che cambiano in base a quello che fai).

💡 Curiosità: Ogni volta che clicchi su un link stai navigando attraverso una struttura ipertestuale!

Cos'è davvero l'HTML?

L'HTML è un linguaggio di marcatura che usa tag (parole chiave speciali) per descrivere come deve apparire una pagina web. Pensa ai tag come a delle etichette che dicono al browser: "questo testo deve essere grassetto", "questa è un'immagine", ecc.

La cosa importante da capire è che non è un linguaggio di programmazione - non ci sono calcoli complicati o logiche complesse. È semplicemente un modo per organizzare e formattare il contenuto.

Il browser (Chrome, Firefox, Safari...) legge questi tag e li trasforma in quello che vedi sullo schermo.

💡 Ricorda: I tag sono come istruzioni semplici che dici al browser per mostrare il contenuto nel modo giusto!

Terminologia essenziale del web

Il Web è l'insieme di tutti i siti collegati tra loro tramite hyperlink. Un ipertesto è un documento con collegamenti che ti permettono di saltare da una parte all'altra senza seguire un ordine fisso.

I link sono proprio questi collegamenti: ti permettono di navigare liberamente tra i contenuti, scegliendo tu il percorso da seguire. È come avere un libro dove puoi saltare da una pagina all'altra seguendo i tuoi interessi.

Un collegamento può portarti a testi, immagini, video, suoni - qualsiasi tipo di contenuto multimediale. Questa flessibilità rende il web così potente e interessante!

💡 Pensa così: Il web è come una gigantesca rete dove ogni punto è collegato agli altri attraverso i link!

Caratteristiche fondamentali dell'HTML

Ogni documento HTML deve essere salvato come file con estensione .html - è così che il browser capisce che si tratta di una pagina web. All'interno del file, ogni elemento (immagine, tabella, link) viene contrassegnato da un tag specifico.

Il browser è il programma che interpreta questi tag e li trasforma nell'effetto visivo che vuoi ottenere. È come un traduttore che converte il codice HTML in una pagina web bella da vedere.

Questa separazione tra codice e visualizzazione ti dà un controllo totale su come appare la tua pagina.

💡 Importante: Il browser è il tuo alleato - trasforma il tuo codice HTML in una pagina web funzionante!

Come funzionano i tag

I tag sono racchiusi tra parentesi angolari: <tag> per aprire e </tag> per chiudere. La maggior parte degli elementi ha sia apertura che chiusura, ma alcuni tag non hanno bisogno della chiusura.

Ecco due esempi pratici: <b>grassetto</b> rende il testo grassetto, mentre <i>italico</i> lo rende italico. Vedi come è semplice?

Il meccanismo è sempre lo stesso: apri il tag, inserisci il contenuto, chiudi il tag. Il browser fa il resto del lavoro per te.

💡 Trucco: Ricordati sempre di chiudere i tag che hai aperto - è come chiudere le parentesi in matematica!

Struttura base di ogni documento HTML

Ogni documento HTML inizia con <html> e finisce con </html>. Tutto il contenuto della tua pagina deve stare tra questi due tag fondamentali.

Pensa a questi tag come ai confini della tua pagina web - definiscono dove inizia e dove finisce il documento. Senza di loro, il browser non saprebbe come interpretare il contenuto.

È una regola fissa che vale per qualsiasi pagina web, dal sito più semplice a quello più complesso.

💡 Regola d'oro: Ogni pagina HTML inizia e finisce sempre con i tag <html> e </html>!

Le due sezioni principali: HEAD e BODY

Dentro ai tag <html> ci sono sempre due sezioni: HEAD e BODY. La sezione <head> contiene informazioni generali sulla pagina che di solito non vedi (come il titolo che appare nella scheda del browser).

La sezione <body> contiene tutto quello che effettivamente appare sulla pagina: testi, immagini, link, video. È la parte "visibile" del tuo sito web.

Questa divisione ti aiuta a organizzare meglio il codice: le impostazioni vanno nell'head, il contenuto nel body.

💡 Pensa così: HEAD = dietro le quinte, BODY = quello che vede il visitatore!

Il tuo primo documento HTML

Ecco un esempio completo: la pagina ha un titolo (<title>), testo in grassetto (<b>), testo in corsivo (<i>) e un'interruzione di riga (<br/>).

<html>
<head>
<title>Primo documento in HTML</title>
</head>
<body>
<b>Presentazione HTML</b><br/>
Io sono <i>Marco Panfili</i>, il vostro insegnante di Informatica :-)
</body>
</html>

Vedi come ogni elemento ha il suo tag specifico? Il <title> appare nella scheda del browser, mentre tutto nel <body> appare nella pagina vera e propria.

💡 Prova subito: Copia questo codice in un file .html e aprilo con il browser - vedrai la tua prima pagina web!