L'HTML è un metalinguaggio di markup che permette di creare... Mostra di più
Informatica1,248 visualizzazioni·Aggiornato May 22, 2026·5 pagineGuida HTML: Crea il Tuo Sito Web da Zero
charanjot singh@charanjotsingh_cbng
1 / 5
1
of 5
Fondamenti di HTML
L'HTML è un metalinguaggio di markup che consente di descrivere come i contenuti devono essere visualizzati nei browser. I suoi elementi principali sono i tag, etichette racchiuse tra parentesi angolari (< >) che definiscono le caratteristiche degli elementi da mostrare.
Un tag è generalmente composto da una parte di apertura e una di chiusura (esempio: <h1>Titolo</h1>). I tag possono essere annidati uno dentro l'altro e possono contenere attributi che ne modificano il comportamento o l'aspetto.
I tag fondamentali della struttura HTML includono <!DOCTYPE> che definisce il tipo di documento, <html> che segna l'inizio del documento, <head> che contiene informazioni sull'intestazione non visibili all'utente, e <body> che definisce il corpo principale della pagina.
💡 Ricorda che l'HTML non è "case sensitive": puoi scrivere i tag sia in maiuscolo che in minuscolo e funzioneranno allo stesso modo!
Il tag <body> può contenere attributi importanti come bgcolor per definire il colore dello sfondo, background per impostare un'immagine di sfondo, text per il colore del testo e link per il colore dei collegamenti.
2
of 5
Tag di Formattazione del Testo
I tag da <h1> a <h6> definiscono le intestazioni HTML di diversi livelli, dove <h1> ha la dimensione massima e <h6> la minima. Sono perfetti per strutturare i contenuti della tua pagina in modo gerarchico.
Il tag <p> crea paragrafi e può usare l'attributo align per allineare il testo a destra, sinistra o al centro. Altri tag utili sono <br> che genera un ritorno a capo e <hr> che inserisce una linea orizzontale nella pagina.
Per modificare lo stile del testo, puoi usare <b> per il grassetto, <i> per il corsivo e <u> per il sottolineato. Puoi anche inserire commenti invisibili nel codice con <!-- commento -->.
🎨 I colori in HTML possono essere definiti in tre modi: con il nome ("red"), in formato RGB (255,0,0), o in esadecimale (#FF0000).
Il tag <img> permette di inserire immagini e accetta molti attributi come src (percorso dell'immagine), width e height (dimensioni), alt (descrizione alternativa) e border (bordo dell'immagine).
3
of 5
Immagini e Collegamenti
Le immagini possono essere posizionate rispetto al testo usando l'attributo align con valori come "left" o "right". Gli attributi hspace e vspace controllano la distanza orizzontale e verticale tra l'immagine e gli altri elementi.
Quando usi l'attributo src di un'immagine, puoi specificare il percorso in modo assoluto (partendo dalla radice con uno slash) o relativo (partendo dalla directory corrente). La scelta dipende da come organizzi i file del tuo sito.
I collegamenti ipertestuali si creano con il tag <a> e l'attributo href che specifica l'URL di destinazione. Puoi creare link verso altre pagine, immagini, PDF o qualsiasi tipo di file. L'attributo title mostra un'etichetta quando si passa sopra il link con il mouse.
🔍 Le ancore sono collegamenti speciali che permettono di saltare a punti specifici della stessa pagina. Si creano con
<a name="punto">e si utilizzano con<a href="#punto">.
Per trasformare un'immagine in un collegamento, devi semplicemente annidare il tag <img> all'interno di un tag <a>. Così gli utenti potranno cliccare sull'immagine per essere reindirizzati.
4
of 5
Elenchi e Tabelle
Gli elenchi non ordinati si creano con il tag <ul> e mostrano elementi preceduti da pallini o altri simboli. Puoi scegliere il tipo di simbolo con l'attributo type (disc, square, circle). Ogni elemento dell'elenco va inserito nel tag <li>.
Gli elenchi ordinati si creano con <ol> e mostrano elementi numerati in sequenza. Puoi personalizzare il tipo di numerazione con l'attributo type (numeri, lettere o numeri romani) e scegliere da dove iniziare con l'attributo start.
Il tag <font> ti permette di modificare l'aspetto del testo. Puoi cambiare il tipo di carattere con face, la dimensione con size (da 1 a 7) e il colore con color. È un modo semplice per dare stile ai tuoi testi.
📊 Le tabelle sono fondamentali per organizzare i dati in modo chiaro e ordinato. Ricorda che prima crei la tabella, poi le righe e infine le celle.
Le tabelle si creano con il tag <table> che può includere un bordo con l'attributo border. All'interno vanno definite le righe con <tr>, le celle normali con <td> e le celle di intestazione con <th>. Puoi controllare larghezza e allineamento della tabella con gli attributi width e align.
5
of 5
Tabelle Avanzate
Le tabelle possono essere personalizzate per creare layout più complessi unendo celle sia in orizzontale che in verticale. Questo ti permette di creare strutture adatte a presentare i tuoi dati in modo più efficace.
Per unire celle adiacenti sulla stessa riga, usa l'attributo colspan nelle celle <td>. Il valore numerico indica quante celle devono essere unite. Per esempio, <td colspan="2"> unisce due celle orizzontalmente.
Per unire celle in verticale (sulla stessa colonna), usa l'attributo rowspan. Ad esempio, <td rowspan="2"> estenderà quella cella per occupare due righe verso il basso.
🔧 Puoi personalizzare ulteriormente le celle della tabella con gli attributi
width(larghezza),height(altezza) ealign(allineamento) per controllare con precisione come appaiono i contenuti.
Combinando colspan e rowspan puoi creare layout di tabella complessi per presentare dati o strutturare le tue pagine. Ricorda che quando usi questi attributi, devi omettere le celle che vengono unite nella struttura della tabella.
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,07010,188
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
Informatica1,248 visualizzazioni·Aggiornato May 22, 2026·5 pagineGuida HTML: Crea il Tuo Sito Web da Zero
charanjot singh@charanjotsingh_cbng
L'HTML è un metalinguaggio di markup che permette di creare pagine web statiche attraverso l'uso di tag. A differenza dei linguaggi di programmazione, che creano pagine dinamiche, l'HTML si concentra sulla struttura e la presentazione dei contenuti sul web.
1
of 5Iscriviti per mostrare il contenuto. È gratis!
- Accesso a tutti i documenti
- Migliora i tuoi voti
- Unisciti a milioni di studenti
Fondamenti di HTML
L'HTML è un metalinguaggio di markup che consente di descrivere come i contenuti devono essere visualizzati nei browser. I suoi elementi principali sono i tag, etichette racchiuse tra parentesi angolari (< >) che definiscono le caratteristiche degli elementi da mostrare.
Un tag è generalmente composto da una parte di apertura e una di chiusura (esempio: <h1>Titolo</h1>). I tag possono essere annidati uno dentro l'altro e possono contenere attributi che ne modificano il comportamento o l'aspetto.
I tag fondamentali della struttura HTML includono <!DOCTYPE> che definisce il tipo di documento, <html> che segna l'inizio del documento, <head> che contiene informazioni sull'intestazione non visibili all'utente, e <body> che definisce il corpo principale della pagina.
💡 Ricorda che l'HTML non è "case sensitive": puoi scrivere i tag sia in maiuscolo che in minuscolo e funzioneranno allo stesso modo!
Il tag <body> può contenere attributi importanti come bgcolor per definire il colore dello sfondo, background per impostare un'immagine di sfondo, text per il colore del testo e link per il colore dei collegamenti.
2
of 5Iscriviti per mostrare il contenuto. È gratis!
- Accesso a tutti i documenti
- Migliora i tuoi voti
- Unisciti a milioni di studenti
Tag di Formattazione del Testo
I tag da <h1> a <h6> definiscono le intestazioni HTML di diversi livelli, dove <h1> ha la dimensione massima e <h6> la minima. Sono perfetti per strutturare i contenuti della tua pagina in modo gerarchico.
Il tag <p> crea paragrafi e può usare l'attributo align per allineare il testo a destra, sinistra o al centro. Altri tag utili sono <br> che genera un ritorno a capo e <hr> che inserisce una linea orizzontale nella pagina.
Per modificare lo stile del testo, puoi usare <b> per il grassetto, <i> per il corsivo e <u> per il sottolineato. Puoi anche inserire commenti invisibili nel codice con <!-- commento -->.
🎨 I colori in HTML possono essere definiti in tre modi: con il nome ("red"), in formato RGB (255,0,0), o in esadecimale (#FF0000).
Il tag <img> permette di inserire immagini e accetta molti attributi come src (percorso dell'immagine), width e height (dimensioni), alt (descrizione alternativa) e border (bordo dell'immagine).
3
of 5Iscriviti per mostrare il contenuto. È gratis!
- Accesso a tutti i documenti
- Migliora i tuoi voti
- Unisciti a milioni di studenti
Immagini e Collegamenti
Le immagini possono essere posizionate rispetto al testo usando l'attributo align con valori come "left" o "right". Gli attributi hspace e vspace controllano la distanza orizzontale e verticale tra l'immagine e gli altri elementi.
Quando usi l'attributo src di un'immagine, puoi specificare il percorso in modo assoluto (partendo dalla radice con uno slash) o relativo (partendo dalla directory corrente). La scelta dipende da come organizzi i file del tuo sito.
I collegamenti ipertestuali si creano con il tag <a> e l'attributo href che specifica l'URL di destinazione. Puoi creare link verso altre pagine, immagini, PDF o qualsiasi tipo di file. L'attributo title mostra un'etichetta quando si passa sopra il link con il mouse.
🔍 Le ancore sono collegamenti speciali che permettono di saltare a punti specifici della stessa pagina. Si creano con
<a name="punto">e si utilizzano con<a href="#punto">.
Per trasformare un'immagine in un collegamento, devi semplicemente annidare il tag <img> all'interno di un tag <a>. Così gli utenti potranno cliccare sull'immagine per essere reindirizzati.
4
of 5Iscriviti per mostrare il contenuto. È gratis!
- Accesso a tutti i documenti
- Migliora i tuoi voti
- Unisciti a milioni di studenti
Elenchi e Tabelle
Gli elenchi non ordinati si creano con il tag <ul> e mostrano elementi preceduti da pallini o altri simboli. Puoi scegliere il tipo di simbolo con l'attributo type (disc, square, circle). Ogni elemento dell'elenco va inserito nel tag <li>.
Gli elenchi ordinati si creano con <ol> e mostrano elementi numerati in sequenza. Puoi personalizzare il tipo di numerazione con l'attributo type (numeri, lettere o numeri romani) e scegliere da dove iniziare con l'attributo start.
Il tag <font> ti permette di modificare l'aspetto del testo. Puoi cambiare il tipo di carattere con face, la dimensione con size (da 1 a 7) e il colore con color. È un modo semplice per dare stile ai tuoi testi.
📊 Le tabelle sono fondamentali per organizzare i dati in modo chiaro e ordinato. Ricorda che prima crei la tabella, poi le righe e infine le celle.
Le tabelle si creano con il tag <table> che può includere un bordo con l'attributo border. All'interno vanno definite le righe con <tr>, le celle normali con <td> e le celle di intestazione con <th>. Puoi controllare larghezza e allineamento della tabella con gli attributi width e align.
5
of 5Iscriviti per mostrare il contenuto. È gratis!
- Accesso a tutti i documenti
- Migliora i tuoi voti
- Unisciti a milioni di studenti
Tabelle Avanzate
Le tabelle possono essere personalizzate per creare layout più complessi unendo celle sia in orizzontale che in verticale. Questo ti permette di creare strutture adatte a presentare i tuoi dati in modo più efficace.
Per unire celle adiacenti sulla stessa riga, usa l'attributo colspan nelle celle <td>. Il valore numerico indica quante celle devono essere unite. Per esempio, <td colspan="2"> unisce due celle orizzontalmente.
Per unire celle in verticale (sulla stessa colonna), usa l'attributo rowspan. Ad esempio, <td rowspan="2"> estenderà quella cella per occupare due righe verso il basso.
🔧 Puoi personalizzare ulteriormente le celle della tabella con gli attributi
width(larghezza),height(altezza) ealign(allineamento) per controllare con precisione come appaiono i contenuti.
Combinando colspan e rowspan puoi creare layout di tabella complessi per presentare dati o strutturare le tue pagine. Ricorda che quando usi questi attributi, devi omettere le celle che vengono unite nella struttura della tabella.
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,07010,188
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