Il linguaggio HTML è la base per creare tutte le... Mostra di più
Informatica2,806 visualizzazioni·Aggiornato May 27, 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ªm5849
InformaticaDiagrammi di flusso
Appunti per ripasso dei diagrammi di flusso (flowchart); Introduzione ai blocchi, condizione e iterazioni (WHILE e DO WHILE);
1ªl2,26940
InformaticaProgrammazione in C
Appunti chiave per programmare in C
1ªl1,98270
Informaticail romanico
elementi del romantico
2ªm2,940100
MatematicaI prodotti notevoli
Qui verranno illustrate le principali regole dei prodotti notevoli, con relativi esempi.
1ªl2,02127
InformaticaComposti chimici inorganici
Composti chimici inorganici + nomenclatura
1ªl1,27546
InformaticaEXCEL
riferimenti, funzioni (SE, CONTA.SE, CONFRONTA, CERCA.VERT, SOMMA.SE, MAX e MIN, E), copia e incolla, riempimento automatico, subtotali
1ªl2,86684
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ªl67027
InformaticaHtml e CSS
Informazioni e codici html e CSS
3ªl3,684140
Contenuti più popolari
9
ItalianoRiassunto patente B
Riassunto patente B - appunti presi a lezione
5ªl28,296923
AltroTeoria patente b
Tutti gli argomenti per la patente
1ªl19,315637
ItalianoI promessi sposi
Riassunti completi di tutti i 38 capitoli dei Promessi sposi.
2ªl14,015314
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ªl38,3611,597
AltroPATENTE
schemi per esame teorico della patente
Università20,608726
Italianopromessi sposi (capitoli 1-18)
riassunto promessi sposi (capitoli da 1 a 18)
2ªl18,091413
S
ItalianoSintesi finale di Analisi logica
Esercitazione completa di analisi logica su frasi articolate per consolidare la conoscenza di tutti i complementi.
3ªm5,3530
ItalianoI promessi sposi
Riassunti capitolo 1 - capitolo 26
2ªl205,08210,189
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ªl4,601116
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,806 visualizzazioni·Aggiornato May 27, 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... Mostra di più
1
of 10Iscriviti 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ªm5849
InformaticaDiagrammi di flusso
Appunti per ripasso dei diagrammi di flusso (flowchart); Introduzione ai blocchi, condizione e iterazioni (WHILE e DO WHILE);
1ªl2,26940
InformaticaProgrammazione in C
Appunti chiave per programmare in C
1ªl1,98270
Informaticail romanico
elementi del romantico
2ªm2,940100
MatematicaI prodotti notevoli
Qui verranno illustrate le principali regole dei prodotti notevoli, con relativi esempi.
1ªl2,02127
InformaticaComposti chimici inorganici
Composti chimici inorganici + nomenclatura
1ªl1,27546
InformaticaEXCEL
riferimenti, funzioni (SE, CONTA.SE, CONFRONTA, CERCA.VERT, SOMMA.SE, MAX e MIN, E), copia e incolla, riempimento automatico, subtotali
1ªl2,86684
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ªl67027
InformaticaHtml e CSS
Informazioni e codici html e CSS
3ªl3,684140
Contenuti più popolari
9ItalianoRiassunto patente B
Riassunto patente B - appunti presi a lezione
5ªl28,296923
AltroTeoria patente b
Tutti gli argomenti per la patente
1ªl19,315637
ItalianoI promessi sposi
Riassunti completi di tutti i 38 capitoli dei Promessi sposi.
2ªl14,015314
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ªl38,3611,597
AltroPATENTE
schemi per esame teorico della patente
Università20,608726
Italianopromessi sposi (capitoli 1-18)
riassunto promessi sposi (capitoli da 1 a 18)
2ªl18,091413
S
ItalianoSintesi finale di Analisi logica
Esercitazione completa di analisi logica su frasi articolate per consolidare la conoscenza di tutti i complementi.
3ªm5,3530
ItalianoI promessi sposi
Riassunti capitolo 1 - capitolo 26
2ªl205,08210,189
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ªl4,601116
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