Il linguaggio HTML è la base per creare tutte le...
Informatica2,808 views·Updated Jun 29, 2026·24 pagesGuida Completa a HTML: Le Basi Essenziali
Gabry @gabry_kr
1 / 10
1
of 10
Il Linguaggio HTML - Introduzione
Tutto iniziò negli anni '90 quando Tim Berners-Lee al CERN di Ginevra ebbe un'idea geniale: creare il World Wide Web. Prima esisteva solo internet per scambiare testi, ma la comunità scientifica voleva condividere anche immagini.
La soluzione fu brillante: usare l'ipertesto come struttura (documenti con collegamenti ad altri documenti) e internet come mezzo di distribuzione. Così nacque il web che usi oggi, dove puoi saltare da una pagina all'altra seguendo i link.
Nel web moderno parliamo di documenti ipermediali perché non contengono solo testo, ma anche immagini, video e suoni. Ogni sito web è un insieme di pagine che partono da una home page iniziale, come le radici di un albero.
💡 Ricorda: L'HTML non è programmazione! È come usare evidenziatori colorati per formattare un testo.
2
of 10
Come Funziona HTML
HTML significa HyperText Markup Language, ed è un linguaggio di "markup" (marcatura). Pensa ai tag HTML come a delle etichette che dicono al browser: "questo testo deve essere grande", "questa parola deve essere in grassetto".
Per scrivere HTML puoi usare due tipi di editor:
- Editor testuali come Blocco Note (dove scrivi tutto il codice a mano)
- Editor WYSIWYG come Dreamweaver (dove vedi subito il risultato finale)
Creare una pagina è semplicissimo: apri Blocco Note, scrivi il tuo codice HTML e salva il file con estensione .html. Cliccandoci sopra si aprirà nel browser!
Per vedere il codice di qualsiasi pagina web, usa: Ctrl+U su Chrome, F12 su Firefox, o vai nel menu Visualizza → Sorgente.
3
of 10
La Struttura dei Tag
I tag HTML sono racchiusi tra parentesi acute < > e funzionano sempre in coppia: uno di apertura e uno di chiusura con il simbolo /.
<FONT face="arial">Questo testo sarà in Arial</FONT>
I tag possono avere attributi che ne specificano le caratteristiche, come il colore o la dimensione. Ogni attributo ha un valore tra virgolette.
Ogni documento HTML ha una struttura fissa con due parti principali:
- HEAD: contiene informazioni invisibili come il titolo della scheda
- BODY: contiene tutto ciò che vedi nella pagina
Puoi aggiungere commenti con <!-- testo del commento --> per ricordarti cosa fa una certa parte di codice.
💡 Suggerimento: Indenta sempre il codice per renderlo più leggibile, proprio come faresti con un tema!
4
of 10
Struttura Base di una Pagina
Ogni pagina HTML inizia sempre con la stessa struttura base:
<!DOCTYPE html>
<html>
<head>
<title>Titolo che appare nella scheda</title>
</head>
<body>
Contenuto della pagina
</body>
</html>
Il <!DOCTYPE html> dice al browser che tipo di linguaggio stai usando. L'elemento <html> contiene tutto il resto, come una scatola gigante.
Nella head metti le informazioni invisibili: titolo, descrizioni per Google, collegamento a fogli di stile. Nel body va tutto ciò che vuoi far vedere: testo, immagini, video.
Questa struttura è come lo scheletro di una casa: senza di essa, niente funziona correttamente!
💡 Importante: Anche se il browser spesso "perdona" gli errori, seguire sempre questa struttura ti eviterà problemi futuri.
5
of 10
Formattazione del Testo e della Pagina
Il tag BODY gestisce l'aspetto generale della pagina. Puoi cambiare colori di sfondo (bgcolor), del testo (text), aggiungere immagini di sfondo (background) e impostare i margini.
Per i colori hai due opzioni: nomi inglesi come "red" o "blue", oppure codici esadecimali come "#FF0000" per il rosso. I codici ti danno milioni di colori diversi!
Il tag FONT controlla l'aspetto del testo:
faceper il tipo di carattere (Arial, Times, ecc.)sizeda 1 a 7 (7 è il più grande)colorper il colore del testo
Per lo stile del testo usa: <B> per grassetto, <I> per corsivo, <U> per sottolineato.
6
of 10
Titoli, Paragrafi e Divisori
I titoli si creano con <H1> fino a <H6>, dove H1 è il più grande e H6 il più piccolo. Sono perfetti per organizzare i contenuti come in un libro.
Per i paragrafi usa <P> con l'attributo align per scegliere l'allineamento: left, center, right o justify. Il tag <CENTER> è un'alternativa rapida per centrare il testo.
I divisori sono utilissimi:
<BR>manda il testo a capo (come premere Invio)<HR>inserisce una linea orizzontale per separare le sezioni
La linea <HR> può essere personalizzata: cambia spessore (size), colore (color), larghezza (width) e posizione (align).
💡 Trucco: Usa i titoli H1-H6 per creare una gerarchia logica, come negli indici dei libri. Google lo apprezza!
7
of 10
8
of 10
9
of 10
10
of 10
We thought you’d never ask...
What is the Knowunity AI companion?
Our AI companion is specifically built for the needs of students. Based on the millions of content pieces we have on the platform we can provide truly meaningful and relevant answers to students. But its not only about answers, the companion is even more about guiding students through their daily learning challenges, with personalised study plans, quizzes or content pieces in the chat and 100% personalisation based on the students skills and developments.
Where can I download the Knowunity app?
You can download the app in the Google Play Store and in the Apple App Store.
Is Knowunity really free of charge?
That's right! Enjoy free access to study content, connect with fellow students, and get instant help – all at your fingertips.
Similar Content
Most popular content: HTML
2Most popular content in Informatica
9S
InformaticaStranger Things
Quanto Ne Sai Sulla Fantastica Serie Netflix Stranger Things??
1ªm6309
InformaticaSegnali integrativi
Appunti patente
3ªl2,51158
InformaticaDiagrammi di flusso
Appunti per ripasso dei diagrammi di flusso (flowchart); Introduzione ai blocchi, condizione e iterazioni (WHILE e DO WHILE);
1ªl2,27840
InformaticaProgrammazione in C
Appunti chiave per programmare in C
1ªl1,99570
Informaticail romanico
elementi del romantico
2ªm2,943100
InformaticaEXCEL
riferimenti, funzioni (SE, CONTA.SE, CONFRONTA, CERCA.VERT, SOMMA.SE, MAX e MIN, E), copia e incolla, riempimento automatico, subtotali
1ªl2,87384
InformaticaComposti chimici inorganici
Composti chimici inorganici + nomenclatura
1ªl1,27746
InformaticaInformatica 1
Primi argomenti di informatica della prima superiore, Architettura di VON NEUMANN, Hardware software, Il case e la scheda madre, Periferiche e schede e porte di comunicazione, l’unità centrale di elaborazione e la memoria centrale, la memoria RAM…..
1ªl69028
Informaticareti informatiche
le reti informatiche, cosa sono, come funzionano e le sue caratteristiche
5ªl3,07662
Most popular content
9
ItalianoRiassunto patente B
Riassunto patente B - appunti presi a lezione
5ªl29,242943
AltroTeoria patente b
Tutti gli argomenti per la patente
1ªl21,138685
Ed. civ.Teoria patente di guida B: Segnali stradali
Segnali stradali di pericolo, luminosi, di prescrizione, di indicazione, temporanei, complementari, pannelli integrativi, segnaletica orizzontale, segnalazioni agenti del traffico, distanza di visibilità per l‘arresto, minima di sicurezza.
5ªl40,0421,645
FilosofiaAristotele
Aristotele: vita, metafisica, fisica, etica e politica, retorica e poetica
3ªl7,623216
ItalianoI promessi sposi
Riassunti completi di tutti i 38 capitoli dei Promessi sposi.
2ªl14,090314
AltroPATENTE
schemi per esame teorico della patente
Università22,067756
S
ItalianoSintesi finale di Analisi logica
Esercitazione completa di analisi logica su frasi articolate per consolidare la conoscenza di tutti i complementi.
3ªm5,5290
P
InglesePresent Simple vs Present Continuous
Develop the ability to choose correctly between the Present Simple for habits and the Present Continuous for ongoing actions.
3ªm4,2120
G
ItalianoGabriele D'Annunzio e l'Estetismo
Domande sull'ideale del superuomo, il panismo e la concezione dell'arte come valore assoluto in D'Annunzio.
4ªl2,6740
Can't find what you're looking for? Explore other subjects.
Students love us — and so will you.
4.6/5App Store
4.7/5Google Play
The app is very easy to use and well designed. I have found everything I was looking for so far and have been able to learn a lot from the presentations! I will definitely use the app for a class assignment! And of course it also helps a lot as an inspiration.
Stefan SiOS user
This app is really great. There are so many study notes and help [...]. My problem subject is French, for example, and the app has so many options for help. Thanks to this app, I have improved my French. I would recommend it to anyone.
Samantha KlichAndroid user
Wow, I am really amazed. I just tried the app because I've seen it advertised many times and was absolutely stunned. This app is THE HELP you want for school and above all, it offers so many things, such as workouts and fact sheets, which have been VERY helpful to me personally.
AnnaiOS user
Informatica2,808 views·Updated Jun 29, 2026·24 pagesGuida Completa a HTML: Le Basi Essenziali
Gabry @gabry_kr
Il linguaggio HTML è la base per creare tutte le pagine web che vedi ogni giorno. È molto più semplice di quanto pensi: non è programmazione vera e propria, ma un sistema di "marcatori" che dice al browser come visualizzare...
1
of 10
Sign up to see the content. It's free!
- Access to all documents
- Improve your grades
- Join milions of students
Il Linguaggio HTML - Introduzione
Tutto iniziò negli anni '90 quando Tim Berners-Lee al CERN di Ginevra ebbe un'idea geniale: creare il World Wide Web. Prima esisteva solo internet per scambiare testi, ma la comunità scientifica voleva condividere anche immagini.
La soluzione fu brillante: usare l'ipertesto come struttura (documenti con collegamenti ad altri documenti) e internet come mezzo di distribuzione. Così nacque il web che usi oggi, dove puoi saltare da una pagina all'altra seguendo i link.
Nel web moderno parliamo di documenti ipermediali perché non contengono solo testo, ma anche immagini, video e suoni. Ogni sito web è un insieme di pagine che partono da una home page iniziale, come le radici di un albero.
💡 Ricorda: L'HTML non è programmazione! È come usare evidenziatori colorati per formattare un testo.
2
of 10Sign up to see the content. It's free!
- Access to all documents
- Improve your grades
- Join milions of students
Come Funziona HTML
HTML significa HyperText Markup Language, ed è un linguaggio di "markup" (marcatura). Pensa ai tag HTML come a delle etichette che dicono al browser: "questo testo deve essere grande", "questa parola deve essere in grassetto".
Per scrivere HTML puoi usare due tipi di editor:
- Editor testuali come Blocco Note (dove scrivi tutto il codice a mano)
- Editor WYSIWYG come Dreamweaver (dove vedi subito il risultato finale)
Creare una pagina è semplicissimo: apri Blocco Note, scrivi il tuo codice HTML e salva il file con estensione .html. Cliccandoci sopra si aprirà nel browser!
Per vedere il codice di qualsiasi pagina web, usa: Ctrl+U su Chrome, F12 su Firefox, o vai nel menu Visualizza → Sorgente.
3
of 10Sign up to see the content. It's free!
- Access to all documents
- Improve your grades
- Join milions of students
La Struttura dei Tag
I tag HTML sono racchiusi tra parentesi acute < > e funzionano sempre in coppia: uno di apertura e uno di chiusura con il simbolo /.
<FONT face="arial">Questo testo sarà in Arial</FONT>
I tag possono avere attributi che ne specificano le caratteristiche, come il colore o la dimensione. Ogni attributo ha un valore tra virgolette.
Ogni documento HTML ha una struttura fissa con due parti principali:
- HEAD: contiene informazioni invisibili come il titolo della scheda
- BODY: contiene tutto ciò che vedi nella pagina
Puoi aggiungere commenti con <!-- testo del commento --> per ricordarti cosa fa una certa parte di codice.
💡 Suggerimento: Indenta sempre il codice per renderlo più leggibile, proprio come faresti con un tema!
4
of 10Sign up to see the content. It's free!
- Access to all documents
- Improve your grades
- Join milions of students
Struttura Base di una Pagina
Ogni pagina HTML inizia sempre con la stessa struttura base:
<!DOCTYPE html>
<html>
<head>
<title>Titolo che appare nella scheda</title>
</head>
<body>
Contenuto della pagina
</body>
</html>
Il <!DOCTYPE html> dice al browser che tipo di linguaggio stai usando. L'elemento <html> contiene tutto il resto, come una scatola gigante.
Nella head metti le informazioni invisibili: titolo, descrizioni per Google, collegamento a fogli di stile. Nel body va tutto ciò che vuoi far vedere: testo, immagini, video.
Questa struttura è come lo scheletro di una casa: senza di essa, niente funziona correttamente!
💡 Importante: Anche se il browser spesso "perdona" gli errori, seguire sempre questa struttura ti eviterà problemi futuri.
5
of 10Sign up to see the content. It's free!
- Access to all documents
- Improve your grades
- Join milions of students
Formattazione del Testo e della Pagina
Il tag BODY gestisce l'aspetto generale della pagina. Puoi cambiare colori di sfondo (bgcolor), del testo (text), aggiungere immagini di sfondo (background) e impostare i margini.
Per i colori hai due opzioni: nomi inglesi come "red" o "blue", oppure codici esadecimali come "#FF0000" per il rosso. I codici ti danno milioni di colori diversi!
Il tag FONT controlla l'aspetto del testo:
faceper il tipo di carattere (Arial, Times, ecc.)sizeda 1 a 7 (7 è il più grande)colorper il colore del testo
Per lo stile del testo usa: <B> per grassetto, <I> per corsivo, <U> per sottolineato.
6
of 10Sign up to see the content. It's free!
- Access to all documents
- Improve your grades
- Join milions of students
Titoli, Paragrafi e Divisori
I titoli si creano con <H1> fino a <H6>, dove H1 è il più grande e H6 il più piccolo. Sono perfetti per organizzare i contenuti come in un libro.
Per i paragrafi usa <P> con l'attributo align per scegliere l'allineamento: left, center, right o justify. Il tag <CENTER> è un'alternativa rapida per centrare il testo.
I divisori sono utilissimi:
<BR>manda il testo a capo (come premere Invio)<HR>inserisce una linea orizzontale per separare le sezioni
La linea <HR> può essere personalizzata: cambia spessore (size), colore (color), larghezza (width) e posizione (align).
💡 Trucco: Usa i titoli H1-H6 per creare una gerarchia logica, come negli indici dei libri. Google lo apprezza!
7
of 10Sign up to see the content. It's free!
- Access to all documents
- Improve your grades
- Join milions of students
8
of 10Sign up to see the content. It's free!
- Access to all documents
- Improve your grades
- Join milions of students
9
of 10Sign up to see the content. It's free!
- Access to all documents
- Improve your grades
- Join milions of students
10
of 10Sign up to see the content. It's free!
- Access to all documents
- Improve your grades
- Join milions of students
We thought you’d never ask...
What is the Knowunity AI companion?
Our AI companion is specifically built for the needs of students. Based on the millions of content pieces we have on the platform we can provide truly meaningful and relevant answers to students. But its not only about answers, the companion is even more about guiding students through their daily learning challenges, with personalised study plans, quizzes or content pieces in the chat and 100% personalisation based on the students skills and developments.
Where can I download the Knowunity app?
You can download the app in the Google Play Store and in the Apple App Store.
Is Knowunity really free of charge?
That's right! Enjoy free access to study content, connect with fellow students, and get instant help – all at your fingertips.
Similar Content
Most popular content: HTML
2Most popular content in Informatica
9S
InformaticaStranger Things
Quanto Ne Sai Sulla Fantastica Serie Netflix Stranger Things??
1ªm6309
InformaticaSegnali integrativi
Appunti patente
3ªl2,51158
InformaticaDiagrammi di flusso
Appunti per ripasso dei diagrammi di flusso (flowchart); Introduzione ai blocchi, condizione e iterazioni (WHILE e DO WHILE);
1ªl2,27840
InformaticaProgrammazione in C
Appunti chiave per programmare in C
1ªl1,99570
Informaticail romanico
elementi del romantico
2ªm2,943100
InformaticaEXCEL
riferimenti, funzioni (SE, CONTA.SE, CONFRONTA, CERCA.VERT, SOMMA.SE, MAX e MIN, E), copia e incolla, riempimento automatico, subtotali
1ªl2,87384
InformaticaComposti chimici inorganici
Composti chimici inorganici + nomenclatura
1ªl1,27746
InformaticaInformatica 1
Primi argomenti di informatica della prima superiore, Architettura di VON NEUMANN, Hardware software, Il case e la scheda madre, Periferiche e schede e porte di comunicazione, l’unità centrale di elaborazione e la memoria centrale, la memoria RAM…..
1ªl69028
Informaticareti informatiche
le reti informatiche, cosa sono, come funzionano e le sue caratteristiche
5ªl3,07662
Most popular content
9ItalianoRiassunto patente B
Riassunto patente B - appunti presi a lezione
5ªl29,242943
AltroTeoria patente b
Tutti gli argomenti per la patente
1ªl21,138685
Ed. civ.Teoria patente di guida B: Segnali stradali
Segnali stradali di pericolo, luminosi, di prescrizione, di indicazione, temporanei, complementari, pannelli integrativi, segnaletica orizzontale, segnalazioni agenti del traffico, distanza di visibilità per l‘arresto, minima di sicurezza.
5ªl40,0421,645
FilosofiaAristotele
Aristotele: vita, metafisica, fisica, etica e politica, retorica e poetica
3ªl7,623216
ItalianoI promessi sposi
Riassunti completi di tutti i 38 capitoli dei Promessi sposi.
2ªl14,090314
AltroPATENTE
schemi per esame teorico della patente
Università22,067756
S
ItalianoSintesi finale di Analisi logica
Esercitazione completa di analisi logica su frasi articolate per consolidare la conoscenza di tutti i complementi.
3ªm5,5290
P
InglesePresent Simple vs Present Continuous
Develop the ability to choose correctly between the Present Simple for habits and the Present Continuous for ongoing actions.
3ªm4,2120
G
ItalianoGabriele D'Annunzio e l'Estetismo
Domande sull'ideale del superuomo, il panismo e la concezione dell'arte come valore assoluto in D'Annunzio.
4ªl2,6740
Can't find what you're looking for? Explore other subjects.
Students love us — and so will you.
4.6/5App Store
4.7/5Google Play
The app is very easy to use and well designed. I have found everything I was looking for so far and have been able to learn a lot from the presentations! I will definitely use the app for a class assignment! And of course it also helps a lot as an inspiration.
Stefan SiOS user
This app is really great. There are so many study notes and help [...]. My problem subject is French, for example, and the app has so many options for help. Thanks to this app, I have improved my French. I would recommend it to anyone.
Samantha KlichAndroid user
Wow, I am really amazed. I just tried the app because I've seen it advertised many times and was absolutely stunned. This app is THE HELP you want for school and above all, it offers so many things, such as workouts and fact sheets, which have been VERY helpful to me personally.
AnnaiOS user