Il linguaggio HTML è la base per creare tutte le...
Informatica2,808 visualizzazioni·Aggiornato Jun 16, 2026·24 pagineGuida 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
Pensavamo che non l'avreste mai chiesto....
Che cos'è l'assistente AI di Knowunity?
Il nostro assistente AI è costruito specificamente per le esigenze degli studenti. Sulla base dei milioni di contenuti presenti sulla piattaforma, possiamo fornire agli studenti risposte davvero significative e pertinenti. Ma non si tratta solo di risposte, l'assistente è in grado di guidare gli studenti attraverso le loro sfide quotidiane di studio, con piani di studio personalizzati, quiz o contenuti nella chat e una personalizzazione al 100% basata sulle competenze e sugli sviluppi degli studenti.
Dove posso scaricare l'applicazione Knowunity?
È possibile scaricare l'applicazione dal Google Play Store e dall'Apple App Store.
Knowunity è davvero gratuita?
Sì, hai accesso completamente gratuito a tutti i contenuti nell'app e puoi chattare o seguire i Creatori in qualsiasi momento. Sbloccherai nuove funzioni crescendo il tuo numero di follower. Inoltre, offriamo Knowunity Premium, che consente di studiare senza alcun limite!!
Contenuti più popolari: HTML
2Contenuti più popolari di Informatica
9S
InformaticaStranger Things
Quanto Ne Sai Sulla Fantastica Serie Netflix Stranger Things??
1ªm6179
InformaticaDiagrammi di flusso
Appunti per ripasso dei diagrammi di flusso (flowchart); Introduzione ai blocchi, condizione e iterazioni (WHILE e DO WHILE);
1ªl2,27740
InformaticaProgrammazione in C
Appunti chiave per programmare in C
1ªl1,99270
Informaticail romanico
elementi del romantico
2ªm2,942100
InformaticaComposti chimici inorganici
Composti chimici inorganici + nomenclatura
1ªl1,27646
InformaticaEXCEL
riferimenti, funzioni (SE, CONTA.SE, CONFRONTA, CERCA.VERT, SOMMA.SE, MAX e MIN, E), copia e incolla, riempimento automatico, subtotali
1ªl2,87384
Informaticale reti informatiche
i vari tipi di reti (con disegni)
1ªl2,15347
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ªl68228
InformaticaHTML
come creare un sito web da 0
1ªl1,25429
Contenuti più popolari
9
ItalianoRiassunto patente B
Riassunto patente B - appunti presi a lezione
5ªl28,921936
AltroTeoria patente b
Tutti gli argomenti per la patente
1ªl20,600668
ItalianoI promessi sposi
Riassunti completi di tutti i 38 capitoli dei Promessi sposi.
2ªl14,075314
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ªl39,5291,630
AltroPATENTE
schemi per esame teorico della patente
Università21,634750
S
ItalianoSintesi finale di Analisi logica
Esercitazione completa di analisi logica su frasi articolate per consolidare la conoscenza di tutti i complementi.
3ªm5,5060
ItalianoProgramma di italiano per la maturità
Decadentismo, Pascoli, D'Annunzio, la poesia e il romanzo di primo 900, il romanzo della crisi, le avanguardie storiche, Svevo, Pirandello, Ungaretti, l'ermetismo, Calvino (nel mio profilo trovate anche montale)
5ªl5,061132
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,1730
ItalianoITALO SVEVO e LUIGI PIRANDELLO
schemi perfetti su Svevo (vita, poetica, stile, opere “Una vita”, “Senilità”, “Coscienza di Zeno”), Pirandello ( vita, poetica, stile, opere “Novelle per un anno”, “Fu Mattia Pascal”, “Uno nessuno centomila”, teatro “6 personaggi in cerca di autore”)
5ªl24,640696
Non c'è niente di adatto? Esplorare altre aree tematiche.
Recensioni dei nostri utenti. Ci adorano - e anche tu, vedrai .
4.6/5App Store
4.7/5Google Play
L'applicazione è molto facile da usare e ben progettata. Finora ho trovato tutto quello che cercavo e ho potuto imparare molto dalle presentazioni! Utilizzerò sicuramente l'app per i compiti in classe! È molto utile anche come fonte di ispirazione.
Stefano Sutente iOS
Questa applicazione è davvero grande! Ci sono tantissimi appunti e aiuti con lo studio [...]. La mia materia problematica, per esempio, è il francese e l'app ha così tante opzioni per aiutarmi. Grazie a questa app ho migliorato il mio francese. La consiglio a tutti.
Samantha Klichutente Android
Wow, sono davvero stupita. Ho appena provato l'app perché l'ho vista pubblicizzata molte volte e sono rimasta assolutamente sbalordita. Questa app è L'AIUTO che cercate per la scuola e soprattutto offre tantissime cose, come allenamenti e schede, che a me personalmente sono state MOLTO utili.
Annautente iOS
Informatica2,808 visualizzazioni·Aggiornato Jun 16, 2026·24 pagineGuida 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
Iscriviti per mostrare il contenuto. È gratis!
- Accesso a tutti i documenti
- Migliora i tuoi voti
- Unisciti a milioni di studenti
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 10Iscriviti per mostrare il contenuto. È gratis!
- Accesso a tutti i documenti
- Migliora i tuoi voti
- Unisciti a milioni di studenti
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 10Iscriviti per mostrare il contenuto. È gratis!
- Accesso a tutti i documenti
- Migliora i tuoi voti
- Unisciti a milioni di studenti
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 10Iscriviti per mostrare il contenuto. È gratis!
- Accesso a tutti i documenti
- Migliora i tuoi voti
- Unisciti a milioni di studenti
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 10Iscriviti per mostrare il contenuto. È gratis!
- Accesso a tutti i documenti
- Migliora i tuoi voti
- Unisciti a milioni di studenti
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 10Iscriviti per mostrare il contenuto. È gratis!
- Accesso a tutti i documenti
- Migliora i tuoi voti
- Unisciti a milioni di studenti
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 10Iscriviti per mostrare il contenuto. È gratis!
- Accesso a tutti i documenti
- Migliora i tuoi voti
- Unisciti a milioni di studenti
8
of 10Iscriviti per mostrare il contenuto. È gratis!
- Accesso a tutti i documenti
- Migliora i tuoi voti
- Unisciti a milioni di studenti
9
of 10Iscriviti per mostrare il contenuto. È gratis!
- Accesso a tutti i documenti
- Migliora i tuoi voti
- Unisciti a milioni di studenti
10
of 10Iscriviti per mostrare il contenuto. È gratis!
- Accesso a tutti i documenti
- Migliora i tuoi voti
- Unisciti a milioni di studenti
Pensavamo che non l'avreste mai chiesto....
Che cos'è l'assistente AI di Knowunity?
Il nostro assistente AI è costruito specificamente per le esigenze degli studenti. Sulla base dei milioni di contenuti presenti sulla piattaforma, possiamo fornire agli studenti risposte davvero significative e pertinenti. Ma non si tratta solo di risposte, l'assistente è in grado di guidare gli studenti attraverso le loro sfide quotidiane di studio, con piani di studio personalizzati, quiz o contenuti nella chat e una personalizzazione al 100% basata sulle competenze e sugli sviluppi degli studenti.
Dove posso scaricare l'applicazione Knowunity?
È possibile scaricare l'applicazione dal Google Play Store e dall'Apple App Store.
Knowunity è davvero gratuita?
Sì, hai accesso completamente gratuito a tutti i contenuti nell'app e puoi chattare o seguire i Creatori in qualsiasi momento. Sbloccherai nuove funzioni crescendo il tuo numero di follower. Inoltre, offriamo Knowunity Premium, che consente di studiare senza alcun limite!!
Contenuti più popolari: HTML
2Contenuti più popolari di Informatica
9S
InformaticaStranger Things
Quanto Ne Sai Sulla Fantastica Serie Netflix Stranger Things??
1ªm6179
InformaticaDiagrammi di flusso
Appunti per ripasso dei diagrammi di flusso (flowchart); Introduzione ai blocchi, condizione e iterazioni (WHILE e DO WHILE);
1ªl2,27740
InformaticaProgrammazione in C
Appunti chiave per programmare in C
1ªl1,99270
Informaticail romanico
elementi del romantico
2ªm2,942100
InformaticaComposti chimici inorganici
Composti chimici inorganici + nomenclatura
1ªl1,27646
InformaticaEXCEL
riferimenti, funzioni (SE, CONTA.SE, CONFRONTA, CERCA.VERT, SOMMA.SE, MAX e MIN, E), copia e incolla, riempimento automatico, subtotali
1ªl2,87384
Informaticale reti informatiche
i vari tipi di reti (con disegni)
1ªl2,15347
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ªl68228
InformaticaHTML
come creare un sito web da 0
1ªl1,25429
Contenuti più popolari
9ItalianoRiassunto patente B
Riassunto patente B - appunti presi a lezione
5ªl28,921936
AltroTeoria patente b
Tutti gli argomenti per la patente
1ªl20,600668
ItalianoI promessi sposi
Riassunti completi di tutti i 38 capitoli dei Promessi sposi.
2ªl14,075314
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ªl39,5291,630
AltroPATENTE
schemi per esame teorico della patente
Università21,634750
S
ItalianoSintesi finale di Analisi logica
Esercitazione completa di analisi logica su frasi articolate per consolidare la conoscenza di tutti i complementi.
3ªm5,5060
ItalianoProgramma di italiano per la maturità
Decadentismo, Pascoli, D'Annunzio, la poesia e il romanzo di primo 900, il romanzo della crisi, le avanguardie storiche, Svevo, Pirandello, Ungaretti, l'ermetismo, Calvino (nel mio profilo trovate anche montale)
5ªl5,061132
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,1730
ItalianoITALO SVEVO e LUIGI PIRANDELLO
schemi perfetti su Svevo (vita, poetica, stile, opere “Una vita”, “Senilità”, “Coscienza di Zeno”), Pirandello ( vita, poetica, stile, opere “Novelle per un anno”, “Fu Mattia Pascal”, “Uno nessuno centomila”, teatro “6 personaggi in cerca di autore”)
5ªl24,640696
Non c'è niente di adatto? Esplorare altre aree tematiche.
Recensioni dei nostri utenti. Ci adorano - e anche tu, vedrai .
4.6/5App Store
4.7/5Google Play
L'applicazione è molto facile da usare e ben progettata. Finora ho trovato tutto quello che cercavo e ho potuto imparare molto dalle presentazioni! Utilizzerò sicuramente l'app per i compiti in classe! È molto utile anche come fonte di ispirazione.
Stefano Sutente iOS
Questa applicazione è davvero grande! Ci sono tantissimi appunti e aiuti con lo studio [...]. La mia materia problematica, per esempio, è il francese e l'app ha così tante opzioni per aiutarmi. Grazie a questa app ho migliorato il mio francese. La consiglio a tutti.
Samantha Klichutente Android
Wow, sono davvero stupita. Ho appena provato l'app perché l'ho vista pubblicizzata molte volte e sono rimasta assolutamente sbalordita. Questa app è L'AIUTO che cercate per la scuola e soprattutto offre tantissime cose, come allenamenti e schede, che a me personalmente sono state MOLTO utili.
Annautente iOS