Vuoi creare le tue prime pagine web ma non sai... Mostra di più
Introduzione ad HTML: Guida Completa con Esempi











Le basi dell'HTML
Ogni pagina web che visiti è scritta in HTML (HyperText Markup Language). Non farti spaventare dal nome tecnico: è semplicemente un modo per dire al browser "mostra questo testo in grassetto" o "crea un collegamento qui".
L'HTML funziona con dei tag racchiusi tra parentesi angolari. Ogni tag ha un inizio e una fine, tipo <p>Questo è un paragrafo</p>. Il testo tra i tag viene modificato secondo le istruzioni che dai.
Per creare una pagina HTML ti basta un editor di testo come il Blocco Note! Scrivi il codice, salva il file con estensione .html e aprilo con qualsiasi browser. È davvero così semplice.
Ricorda: Ogni documento HTML deve iniziare con
<!DOCTYPE html>e avere la struttura base con i tag<html>,<head>e<body>.

Struttura e annidamento degli elementi
Un documento HTML ha una struttura precisa che devi rispettare. La sezione <head> contiene informazioni nascoste come il titolo della pagina, mentre <body> contiene tutto quello che gli utenti vedranno.
Gli elementi HTML possono essere annidati, cioè un tag può contenerne altri. È come le scatole cinesi: puoi mettere un paragrafo dentro una sezione, e del testo in grassetto dentro il paragrafo.
Gli attributi forniscono informazioni extra agli elementi. Si scrivono sempre nel tag di apertura con la sintassi nomeAttributo="valore". Le intestazioni vanno da <h1> (più importante) a <h6> (meno importante).
Trucco: L'HTML ignora spazi e a capo che fai con la tastiera. Per andare a capo usa
<br/>, per aggiungere spazi usa .

I tag HTML essenziali
Ecco i tag HTML che userai più spesso e che devi assolutamente conoscere. <p> crea paragrafi, <b> rende il testo grassetto, <i> lo mette in corsivo.
Per le liste usa <ul> per elenchi puntati e <ol> per quelli numerati, sempre con <li> per ogni elemento. Le immagini si inseriscono con <img src="nome.jpg">.
I collegamenti si creano con <a href="pagina.html">testo del link</a>. Per le tabelle hai bisogno di <table>, <tr> per le righe e <td> per le celle.
Consiglio: Non cercare di memorizzare tutti i tag subito. Inizia con paragrafi, intestazioni e link, poi aggiungi il resto man mano che ti servono.

Creare e stilizzare la tua prima pagina
Aprire il Blocco Note, digitare il codice HTML base e salvare con estensione .html - ecco fatto, hai creato la tua prima pagina web! Un doppio click sull'icona e si aprirà nel browser.
L'attributo style ti permette di cambiare l'aspetto degli elementi. Puoi modificare colori, font, dimensioni e allineamento direttamente nel tag HTML usando la sintassi style="proprietà:valore".
Le proprietà di stile più utili sono color per il colore del testo, background-color per lo sfondo, font-family per il tipo di carattere e text-align per l'allineamento.
Esempio pratico:
<body style="background-color:yellow; color:blue">ti darà uno sfondo giallo con testo blu.

Immagini e link dinamici
Le immagini HTML si inseriscono con il tag <img> che non ha tag di chiusura. L'attributo src indica dove si trova l'immagine, mentre width e height ne controllano le dimensioni.
Puoi usare immagini dalla tua cartella, da sottocartelle o anche da altri siti web. Se il browser non trova l'immagine, mostrerà un'icona rotta.
I link ipertestuali sono il cuore del web! Il tag <a href="destinazione">testo cliccabile</a> può portare a pagine locali, siti esterni o punti specifici della stessa pagina.
Trucco avanzato: Puoi usare un'immagine come link mettendo il tag
<img>dentro il tag<a>. Perfetto per creare pulsanti grafici!

Link avanzati e liste strutturate
I colori dei link cambiano automaticamente: blu per quelli non visitati, viola per quelli già cliccati, rosso quando sono attivi. Puoi personalizzare questi colori con gli stili CSS per adattarli al design della tua pagina.
Le liste HTML sono perfette per organizzare informazioni. <ul> crea elenchi puntati, <ol> elenchi numerati. Puoi anche annidare le liste mettendo una lista dentro un elemento <li> di un'altra lista.
Combinare liste ordinate e non ordinate ti permette di creare strutture complesse e ben organizzate, ideali per menu di navigazione o indici dei contenuti.
Suggerimento: Le liste annidate sono ottime per creare menu a cascata o strutture gerarchiche di informazioni.

Tabelle HTML per organizzare i dati
Le tabelle HTML sono essenziali quando devi presentare dati in righe e colonne. La struttura base prevede <table> per la tabella, <tr> per le righe, <th> per le intestazioni e <td> per le celle normali.
L'attributo border="1" aggiunge i bordi visibili alla tabella. Senza questo attributo, la tabella sarà invisibile ma manterrà la sua struttura di organizzazione dei contenuti.
Puoi formattare le tabelle con diversi attributi per controllare larghezza, spaziatura e allineamento. Ogni riga e ogni cella può avere i propri stili personalizzati.
Nota importante: Le tabelle moderne si usano principalmente per dati tabulari, non per il layout delle pagine (per quello si usa CSS).

Form HTML per raccogliere dati
I form HTML sono moduli che permettono agli utenti di inserire e inviare informazioni. Il tag <form> racchiude tutti gli elementi di input come caselle di testo, pulsanti e menu di selezione.
Gli elementi principali sono <input> (che cambia comportamento secondo l'attributo type), <label> per le etichette, <select> per i menu a tendina e <textarea> per testi lunghi.
Un form base include campi di testo per nome, cognome ed email, più un pulsante di invio creato con <input type="submit">. Le etichette <label> rendono il form più accessibile e professionale.
Consiglio pratico: Usa sempre le etichette
<label>associate ai tuoi campi di input per migliorare l'usabilità del form.

Introduzione ai CSS - Stili interni
CSS (Cascading Style Sheets) trasforma le tue pagine HTML da semplici documenti di testo in siti web attraenti. Ci sono tre modi per applicare gli stili: inline, interni ed esterni.
Lo stile interno si definisce nella sezione <head> con il tag <style>. Qui scrivi regole che si applicano a tutti gli elementi di quel tipo nella pagina, usando la sintassi elemento {proprietà:valore}.
Gli stili interni sono perfetti quando vuoi uno stile specifico per una singola pagina. Puoi definire colori, font e dimensioni per intestazioni, paragrafi e qualsiasi altro elemento HTML.
Vantaggio: Con un solo stile interno puoi modificare l'aspetto di tutti i paragrafi o tutte le intestazioni della pagina contemporaneamente.

CSS esterni per progetti professionali
I fogli di stile esterni sono la soluzione professionale per progetti con più pagine. Crei un file .css separato e lo colleghi alle tue pagine HTML con il tag <link> nella sezione <head>.
Questo approccio separa completamente il contenuto dalla presentazione. Cambiando il file CSS puoi modificare l'aspetto di tutte le pagine del sito istantaneamente, senza toccare il codice HTML.
Gli stili esterni rendono il codice più pulito, facilitano la manutenzione e permettono di riutilizzare gli stessi stili su più pagine. È il metodo che usano tutti i siti web professionali.
Best practice: Usa sempre fogli di stile esterni per progetti con più di una pagina - ti farà risparmiare ore di lavoro!
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
9Stranger Things
Quanto Ne Sai Sulla Fantastica Serie Netflix Stranger Things??
Diagrammi di flusso
Appunti per ripasso dei diagrammi di flusso (flowchart); Introduzione ai blocchi, condizione e iterazioni (WHILE e DO WHILE);
Programmazione in C
Appunti chiave per programmare in C
il romanico
elementi del romantico
I prodotti notevoli
Qui verranno illustrate le principali regole dei prodotti notevoli, con relativi esempi.
Composti chimici inorganici
Composti chimici inorganici + nomenclatura
EXCEL
riferimenti, funzioni (SE, CONTA.SE, CONFRONTA, CERCA.VERT, SOMMA.SE, MAX e MIN, E), copia e incolla, riempimento automatico, subtotali
Informatica 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…..
Html e CSS
Informazioni e codici html e CSS
Contenuti più popolari
9Riassunto patente B
Riassunto patente B - appunti presi a lezione
Teoria patente b
Tutti gli argomenti per la patente
I promessi sposi
Riassunti completi di tutti i 38 capitoli dei Promessi sposi.
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.
PATENTE
schemi per esame teorico della patente
promessi sposi (capitoli 1-18)
riassunto promessi sposi (capitoli da 1 a 18)
Sintesi finale di Analisi logica
Esercitazione completa di analisi logica su frasi articolate per consolidare la conoscenza di tutti i complementi.
I promessi sposi
Riassunti capitolo 1 - capitolo 26
Programma 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)
Non c'è niente di adatto? Esplorare altre aree tematiche.
Recensioni dei nostri utenti. Ci adorano - e anche tu, vedrai .
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.
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.
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.
Introduzione ad HTML: Guida Completa con Esempi
Vuoi creare le tue prime pagine web ma non sai da dove iniziare? L'HTML è il linguaggio base che rende possibile ogni sito che vedi online. È più semplice di quanto pensi: non è un linguaggio di programmazione complesso, ma... Mostra di più

Iscriviti per mostrare il contenuto. È gratis!
- Accesso a tutti i documenti
- Migliora i tuoi voti
- Unisciti a milioni di studenti
Le basi dell'HTML
Ogni pagina web che visiti è scritta in HTML (HyperText Markup Language). Non farti spaventare dal nome tecnico: è semplicemente un modo per dire al browser "mostra questo testo in grassetto" o "crea un collegamento qui".
L'HTML funziona con dei tag racchiusi tra parentesi angolari. Ogni tag ha un inizio e una fine, tipo <p>Questo è un paragrafo</p>. Il testo tra i tag viene modificato secondo le istruzioni che dai.
Per creare una pagina HTML ti basta un editor di testo come il Blocco Note! Scrivi il codice, salva il file con estensione .html e aprilo con qualsiasi browser. È davvero così semplice.
Ricorda: Ogni documento HTML deve iniziare con
<!DOCTYPE html>e avere la struttura base con i tag<html>,<head>e<body>.

Iscriviti per mostrare il contenuto. È gratis!
- Accesso a tutti i documenti
- Migliora i tuoi voti
- Unisciti a milioni di studenti
Struttura e annidamento degli elementi
Un documento HTML ha una struttura precisa che devi rispettare. La sezione <head> contiene informazioni nascoste come il titolo della pagina, mentre <body> contiene tutto quello che gli utenti vedranno.
Gli elementi HTML possono essere annidati, cioè un tag può contenerne altri. È come le scatole cinesi: puoi mettere un paragrafo dentro una sezione, e del testo in grassetto dentro il paragrafo.
Gli attributi forniscono informazioni extra agli elementi. Si scrivono sempre nel tag di apertura con la sintassi nomeAttributo="valore". Le intestazioni vanno da <h1> (più importante) a <h6> (meno importante).
Trucco: L'HTML ignora spazi e a capo che fai con la tastiera. Per andare a capo usa
<br/>, per aggiungere spazi usa .

Iscriviti per mostrare il contenuto. È gratis!
- Accesso a tutti i documenti
- Migliora i tuoi voti
- Unisciti a milioni di studenti
I tag HTML essenziali
Ecco i tag HTML che userai più spesso e che devi assolutamente conoscere. <p> crea paragrafi, <b> rende il testo grassetto, <i> lo mette in corsivo.
Per le liste usa <ul> per elenchi puntati e <ol> per quelli numerati, sempre con <li> per ogni elemento. Le immagini si inseriscono con <img src="nome.jpg">.
I collegamenti si creano con <a href="pagina.html">testo del link</a>. Per le tabelle hai bisogno di <table>, <tr> per le righe e <td> per le celle.
Consiglio: Non cercare di memorizzare tutti i tag subito. Inizia con paragrafi, intestazioni e link, poi aggiungi il resto man mano che ti servono.

Iscriviti per mostrare il contenuto. È gratis!
- Accesso a tutti i documenti
- Migliora i tuoi voti
- Unisciti a milioni di studenti
Creare e stilizzare la tua prima pagina
Aprire il Blocco Note, digitare il codice HTML base e salvare con estensione .html - ecco fatto, hai creato la tua prima pagina web! Un doppio click sull'icona e si aprirà nel browser.
L'attributo style ti permette di cambiare l'aspetto degli elementi. Puoi modificare colori, font, dimensioni e allineamento direttamente nel tag HTML usando la sintassi style="proprietà:valore".
Le proprietà di stile più utili sono color per il colore del testo, background-color per lo sfondo, font-family per il tipo di carattere e text-align per l'allineamento.
Esempio pratico:
<body style="background-color:yellow; color:blue">ti darà uno sfondo giallo con testo blu.

Iscriviti per mostrare il contenuto. È gratis!
- Accesso a tutti i documenti
- Migliora i tuoi voti
- Unisciti a milioni di studenti
Immagini e link dinamici
Le immagini HTML si inseriscono con il tag <img> che non ha tag di chiusura. L'attributo src indica dove si trova l'immagine, mentre width e height ne controllano le dimensioni.
Puoi usare immagini dalla tua cartella, da sottocartelle o anche da altri siti web. Se il browser non trova l'immagine, mostrerà un'icona rotta.
I link ipertestuali sono il cuore del web! Il tag <a href="destinazione">testo cliccabile</a> può portare a pagine locali, siti esterni o punti specifici della stessa pagina.
Trucco avanzato: Puoi usare un'immagine come link mettendo il tag
<img>dentro il tag<a>. Perfetto per creare pulsanti grafici!

Iscriviti per mostrare il contenuto. È gratis!
- Accesso a tutti i documenti
- Migliora i tuoi voti
- Unisciti a milioni di studenti
Link avanzati e liste strutturate
I colori dei link cambiano automaticamente: blu per quelli non visitati, viola per quelli già cliccati, rosso quando sono attivi. Puoi personalizzare questi colori con gli stili CSS per adattarli al design della tua pagina.
Le liste HTML sono perfette per organizzare informazioni. <ul> crea elenchi puntati, <ol> elenchi numerati. Puoi anche annidare le liste mettendo una lista dentro un elemento <li> di un'altra lista.
Combinare liste ordinate e non ordinate ti permette di creare strutture complesse e ben organizzate, ideali per menu di navigazione o indici dei contenuti.
Suggerimento: Le liste annidate sono ottime per creare menu a cascata o strutture gerarchiche di informazioni.

Iscriviti per mostrare il contenuto. È gratis!
- Accesso a tutti i documenti
- Migliora i tuoi voti
- Unisciti a milioni di studenti
Tabelle HTML per organizzare i dati
Le tabelle HTML sono essenziali quando devi presentare dati in righe e colonne. La struttura base prevede <table> per la tabella, <tr> per le righe, <th> per le intestazioni e <td> per le celle normali.
L'attributo border="1" aggiunge i bordi visibili alla tabella. Senza questo attributo, la tabella sarà invisibile ma manterrà la sua struttura di organizzazione dei contenuti.
Puoi formattare le tabelle con diversi attributi per controllare larghezza, spaziatura e allineamento. Ogni riga e ogni cella può avere i propri stili personalizzati.
Nota importante: Le tabelle moderne si usano principalmente per dati tabulari, non per il layout delle pagine (per quello si usa CSS).

Iscriviti per mostrare il contenuto. È gratis!
- Accesso a tutti i documenti
- Migliora i tuoi voti
- Unisciti a milioni di studenti
Form HTML per raccogliere dati
I form HTML sono moduli che permettono agli utenti di inserire e inviare informazioni. Il tag <form> racchiude tutti gli elementi di input come caselle di testo, pulsanti e menu di selezione.
Gli elementi principali sono <input> (che cambia comportamento secondo l'attributo type), <label> per le etichette, <select> per i menu a tendina e <textarea> per testi lunghi.
Un form base include campi di testo per nome, cognome ed email, più un pulsante di invio creato con <input type="submit">. Le etichette <label> rendono il form più accessibile e professionale.
Consiglio pratico: Usa sempre le etichette
<label>associate ai tuoi campi di input per migliorare l'usabilità del form.

Iscriviti per mostrare il contenuto. È gratis!
- Accesso a tutti i documenti
- Migliora i tuoi voti
- Unisciti a milioni di studenti
Introduzione ai CSS - Stili interni
CSS (Cascading Style Sheets) trasforma le tue pagine HTML da semplici documenti di testo in siti web attraenti. Ci sono tre modi per applicare gli stili: inline, interni ed esterni.
Lo stile interno si definisce nella sezione <head> con il tag <style>. Qui scrivi regole che si applicano a tutti gli elementi di quel tipo nella pagina, usando la sintassi elemento {proprietà:valore}.
Gli stili interni sono perfetti quando vuoi uno stile specifico per una singola pagina. Puoi definire colori, font e dimensioni per intestazioni, paragrafi e qualsiasi altro elemento HTML.
Vantaggio: Con un solo stile interno puoi modificare l'aspetto di tutti i paragrafi o tutte le intestazioni della pagina contemporaneamente.

Iscriviti per mostrare il contenuto. È gratis!
- Accesso a tutti i documenti
- Migliora i tuoi voti
- Unisciti a milioni di studenti
CSS esterni per progetti professionali
I fogli di stile esterni sono la soluzione professionale per progetti con più pagine. Crei un file .css separato e lo colleghi alle tue pagine HTML con il tag <link> nella sezione <head>.
Questo approccio separa completamente il contenuto dalla presentazione. Cambiando il file CSS puoi modificare l'aspetto di tutte le pagine del sito istantaneamente, senza toccare il codice HTML.
Gli stili esterni rendono il codice più pulito, facilitano la manutenzione e permettono di riutilizzare gli stessi stili su più pagine. È il metodo che usano tutti i siti web professionali.
Best practice: Usa sempre fogli di stile esterni per progetti con più di una pagina - ti farà risparmiare ore di lavoro!
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
9Stranger Things
Quanto Ne Sai Sulla Fantastica Serie Netflix Stranger Things??
Diagrammi di flusso
Appunti per ripasso dei diagrammi di flusso (flowchart); Introduzione ai blocchi, condizione e iterazioni (WHILE e DO WHILE);
Programmazione in C
Appunti chiave per programmare in C
il romanico
elementi del romantico
I prodotti notevoli
Qui verranno illustrate le principali regole dei prodotti notevoli, con relativi esempi.
Composti chimici inorganici
Composti chimici inorganici + nomenclatura
EXCEL
riferimenti, funzioni (SE, CONTA.SE, CONFRONTA, CERCA.VERT, SOMMA.SE, MAX e MIN, E), copia e incolla, riempimento automatico, subtotali
Informatica 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…..
Html e CSS
Informazioni e codici html e CSS
Contenuti più popolari
9Riassunto patente B
Riassunto patente B - appunti presi a lezione
Teoria patente b
Tutti gli argomenti per la patente
I promessi sposi
Riassunti completi di tutti i 38 capitoli dei Promessi sposi.
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.
PATENTE
schemi per esame teorico della patente
promessi sposi (capitoli 1-18)
riassunto promessi sposi (capitoli da 1 a 18)
Sintesi finale di Analisi logica
Esercitazione completa di analisi logica su frasi articolate per consolidare la conoscenza di tutti i complementi.
I promessi sposi
Riassunti capitolo 1 - capitolo 26
Programma 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)
Non c'è niente di adatto? Esplorare altre aree tematiche.
Recensioni dei nostri utenti. Ci adorano - e anche tu, vedrai .
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.
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.
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.