Informatica

Fondamenti di Sviluppo Web

HTML

Informatica1,926 views·Updated Jun 28, 2026·10 pages

Introduzione ad HTML: Guida Completa con Esempi

Elisa@nxctis

Add to Google sources

Vuoi creare le tue prime pagine web ma non sai...

1 / 10

of 10

2- Introduzione HTML

1. Cos'è HTML
fonte: http://www.w3schools.com/html/default.asp

* HTML significa Hyper Text Markup Language
* I do

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>.

of 10

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  .

of 10

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.

of 10

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.

of 10

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!

of 10

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.

of 10

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).

of 10

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.

of 10

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.

of 10

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!

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.

Most popular content in Informatica

Informatica

Stranger Things

Quanto Ne Sai Sulla Fantastica Serie Netflix Stranger Things??

1ªm6309

Informatica

Segnali integrativi

Appunti patente

3ªl2,51158

Informatica

Diagrammi di flusso

Appunti per ripasso dei diagrammi di flusso (flowchart); Introduzione ai blocchi, condizione e iterazioni (WHILE e DO WHILE);

1ªl2,27840

Informatica

Programmazione in C

Appunti chiave per programmare in C

1ªl1,99570

Informatica

il romanico

elementi del romantico

2ªm2,943100

Informatica

EXCEL

riferimenti, funzioni (SE, CONTA.SE, CONFRONTA, CERCA.VERT, SOMMA.SE, MAX e MIN, E), copia e incolla, riempimento automatico, subtotali

1ªl2,87384

Informatica

Composti chimici inorganici

Composti chimici inorganici + nomenclatura

1ªl1,27746

Informatica

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…..

1ªl69028

Informatica

reti informatiche

le reti informatiche, cosa sono, come funzionano e le sue caratteristiche

5ªl3,07662

Most popular content

Italiano

Riassunto patente B

Riassunto patente B - appunti presi a lezione

5ªl29,242943

Altro

Teoria 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

Filosofia

Aristotele

Aristotele: vita, metafisica, fisica, etica e politica, retorica e poetica

3ªl7,623216

Italiano

I promessi sposi

Riassunti completi di tutti i 38 capitoli dei Promessi sposi.

2ªl14,090314

Altro

PATENTE

schemi per esame teorico della patente

Università22,067756

Italiano

Sintesi finale di Analisi logica

Esercitazione completa di analisi logica su frasi articolate per consolidare la conoscenza di tutti i complementi.

3ªm5,5290

Inglese

Present 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

Italiano

Gabriele 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

Informatica

Fondamenti di Sviluppo Web

HTML

Informatica1,926 views·Updated Jun 28, 2026·10 pages

Introduzione ad HTML: Guida Completa con Esempi

Elisa@nxctis

Add to Google sources

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...

of 10

Le basi dell'HTML

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>.

of 10

Struttura e annidamento degli elementi

Trucco: L'HTML ignora spazi e a capo che fai con la tastiera. Per andare a capo usa <br/>, per aggiungere spazi usa  .

of 10

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.

of 10

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.

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.

of 10

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!

of 10

Link avanzati e liste strutturate

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.

of 10

Tabelle HTML per organizzare i dati

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).

of 10

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.

of 10

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.

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.

of 10

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!