Appunti
HTML
EDIT OR DELETE THIS STATEMENT
Breve ripasso
In questa presentazione rivedremo i fondamenti dell'HTML (Hyper Text Markup Language), il linguaggio che dà struttura alle pagine web.
Componenti di base
Informazioni aggiuntive all'interno di un tag (ad esempio, HREF in <a>).
Linguaggio di marcatura per strutturare pagine web.
Elemento che indica il tipo di contenuto (ad esempio, <p> per un paragrafo).
HTML
Tag
Attributi
Editor di codice
Applicazione per scrivere HTML (ad esempio VS Code, Sublime Text, documento di testo, etc. ).
Programma che interpreta l'HTML e visualizza il web.
Browser
Ogni tag HTML è un piccolo pezzo che si inserisce nel puzzle di una pagina web.
Struttura della pagina HTML
Ogni pagina HTML ha una struttura di base simile a questa:
<!DOCTYPE html> <html> <head> <title> My First Web</title> </head> <body> <h1> Hello world! </h1> <p> This is my first website.</p> </body> </html>
12345678910
Funzione dei tag
- <h1> ... </h1>Titolo principale
- <p>...<p> Il tag paragrafo viene utilizzato per definire un paragrafo di testo.
- <h1> ... </h1> to <h6>...</h6> Titoli gerarchici
- <p>...</p> Paragrafi
- <strong> ...</strong>Testo in grassetto
- <em>...</em> Testo in corsivo o enfatizzato
Formattazione del testo
Sezione <head> (metadati e risorse)
Questa sezione contiene informazioni non visibili direttamente nella pagina ma importanti per browser, SEO e dispositivi mobili. <meta charset="utf-8" /> Specifica la codifica dei caratteri (UTF-8). Deve essere tra i primi tag nel <head> per evitare problemi con caratteri accentati. <meta name="viewport" content="width=device-width, initial-scale=1" /> Consente il layout responsive sui dispositivi mobili: dice al browser di adattare la larghezza della pagina alla larghezza del dispositivo e di non zoomare inizialmente.
Sezione <head> (metadati e risorse)
<title>Agcom, multe per tariffe a 28 giorni</title> Titolo della pagina che appare nella scheda del browser e viene usato dai motori di ricerca come titolo del risultato. <meta name="description" content="..." /> Breve descrizione del contenuto della pagina. I motori di ricerca spesso la mostrano come snippet nei risultati: importante per la SEO e per attirare click. <meta name="keywords" content="..." /> Lista di parole chiave separate da virgole. Storicamente utile, oggi la maggior parte dei motori di ricerca (es. Google) non la usa più per il ranking, ma l’hai richiesta come metadato. <meta name="author" content="Mirko Zago" /> Indica l’autore della pagina/articolo.
Inserimento di link o immagini
Di seguito i tag che ci consentono di creare collegamenti e visualizzare immagini. <a href="URL"> Crea link ad altre pagine <a href="https://genially.com"> Visita il sito di Genially</a> <img src = "archivo" alt="texto"> Visualizza l'immagine <img src="logo.png" alt= "Il logo del mio sito">
Verifica ciò che hai imparato finora
Informazioni aggiuntive all'interno di un tag che ne modificano il comportamento. Esempio: href in un link definisce l'URL di destinazione.
Parte di una pagina HTML in cui sono inseriti tutti i contenuti visibili all'utente, come testi, immagini, link o elenchi.
Elemento di codice HTML che indica come deve essere visualizzato il contenuto. È sempre racchiuso tra i tag < >.Esempio: <p> per il paragrafo.
Tag
Body
Attributi
Inserimento di tabelle
<table> → definisce l’inizio e la fine della tabella. <tr> (table row) → rappresenta una riga della tabella. <td> (table data) → rappresenta una cella di dati (contenuto della tabella). <th> (table header) → rappresenta una cella di intestazione (di solito appare in grassetto e centrata). <caption> → titolo della tabella (opzionale). <thead> → raggruppa le righe di intestazione. <tbody> → raggruppa le righe dei dati. <tfoot> → raggruppa le righe di chiusura (ad esempio totali). Attributi utili colspan="n" → una cella occupa più colonne. rowspan="n" → una cella occupa più righe. Con CSS puoi aggiungere bordi, spaziature, colori, ecc.
Cos’è un modulo (form) in HTML?
Un elemento <form> in HTML serve da contenitore per vari campi interattivi (come caselle di testo, pulsanti, selezioni, ecc.) che l'utente compila e invia al server. Il comportamento principale del form è definito da attributi come: action: URL a cui inviare i dati. method: metodo HTTP utilizzato (tipicamente GET o POST) .
L’elemento <input> e i suoi attributi più utili
L'elemento <input> è fondamentale per raccogliere dati. Il comportamento cambia in base all'attributo type, ad esempio: type="text": campo di testo semplice, a linea singola. È il valore predefinito. type="email": campo per indirizzi email con validazione automatica. type="password": campo testuale mascherato, utile per password. type="submit": invia il form. type="reset": ripristina i valori iniziali del form. type="radio": pulsanti esclusivi (seleziona solo uno tra più opzioni). type="checkbox": caselle di spunta (selezionabili indipendentemente).
Esempi
<form>
<label for="nome">Nome:</label>
<input type="text" id="nome" name="nome" placeholder="Inserisci il tuo nome">
</form>
<form> <label for="email">Email:</label> <input type="email" id="email" name="email" placeholder="esempio@dominio.com">
text Campo di testo singolo
email Campo per email con validazione
<form> <label for="pwd">Password:</label> <input type="password" id="pwd" name="pwd" placeholder="********"> </form>
password Campo nascosto per password
<form> <label for="eta">Età (1–120):</label> <input type="number" id="eta" name="eta" min="1" max="120"> </form>
number Campo numerico con limiti
<form> <label for="data">Data di nascita:</label> <input type="date" id="data" name="data"> </form>
<form> <input type="checkbox" id="newsletter" name="newsletter" value="si"> <label for="newsletter">Iscriviti alla newsletter</label> </form></form>
date Selettore data
checkbox Casella di spunta
Esempi - pulsanti
<form>
<p>Genere:</p>
<input type="radio" id="m" name="genere" value="m">
<label for="m">Maschile</label><br>
<input type="radio" id="f" name="genere" value="f">
<label for="f">Femminile</label>
</form>
<label for="favcolor">Colore preferito:</label>
<input type="color" id="favcolor" name="favcolor" value="#ff0000">
radio Pulsante di scelta singola
favcolor Inserimento di un colore
<form action="/invio" method="post"> <!-- altri input --> <input type="submit" value="Invia"> </form>
submit Pulsante di invio
<form> <!-- campi --> <input type="reset" value="Reset"> </form>
reset Ripristina i valori iniziali
Cos’è il metodo method nei form?
Quando crei un form in HTML, puoi specificare come i dati inseriti devono essere inviati al server tramite l’attributo method: <form action="pagina.php" method="get">
<!-- campi input -->
</form>
POST
GET
Metodo GET
I dati del form vengono aggiunti all’URL come stringa di query (?chiave=valore&chiave2=valore2). L’utente può vedere i dati direttamente nella barra degli indirizzi. I dati possono essere condivisi o salvati (basta copiare l’URL). È adatto per ricerche, filtri, o richieste dove i dati non sono sensibili. Limite di lunghezza: circa 2000 caratteri (dipende dal browser).
Prima riga
<!DOCTYPE html> Dichiara che il documento è HTML5. Serve ai browser per usare la modalità di rendering moderna. <html lang="it"> Radice del documento. L’attributo lang="it" indica che la lingua principale è l’italiano (utile per motori di ricerca, lettori di schermo e corretta sillabazione).
<!DOCTYPE html> definisce il tipo di documento<html> contiene tutti i contenuti<head> include dati invisibili come il titolo<body> contiene i contenuti visibili nella pagina web
Tag singoli
I tag singoli (detti anche void elements) sono elementi che non possono avere contenuto né richiedono un tag di chiusura Esempi comuni: <br>, <hr>, <img>, <input>, <meta>, <link> sono quelli più utilizzati nei documenti HTML
<form action="ricerca.php" method="get">
<label for="q">Cerca:</label>
<input type="text" id="q" name="query">
<input type="submit" value="Cerca">
</form>
Se scrivi "pizza" e invii, l’URL diventa:
graphql
Copia codice
ricerca.php?query=pizza
Metodo GET
<form action="registrazione.php" method="post">
<label for="user">Username:</label>
<input type="text" id="user" name="username">
<label for="pwd">Password:</label>
<input type="password" id="pwd" name="password">
<input type="submit" value="Registrati">
</form>
Quando invii, i dati non appaiono nell’URL, ma vengono inviati al server in modo "nascosto".
Metodo POST
VS
L'<input> supporta anche attributi come:
- name: nome del campo, usato nel payload inviato.
- id: identificatore per legare il <label>.
- value: valore preimpostato.
- placeholder: testo guida mostrato all'interno.
- min, max, step: valori limite o intervallo (per number, range, date)
Metodo POST
I dati vengono inviati nel corpo della richiesta HTTP, non nell’URL. I dati non si vedono nella barra degli indirizzi (più sicuro). Non ha un limite pratico di lunghezza come GET. È il metodo usato per inviare dati sensibili (password, numeri di carta, ecc.) o grandi quantità di informazioni. Non può essere facilmente salvato o condiviso con un semplice URL.
Cosa sono i TAG
In HTML, il tag è un elemento che viene utilizzato per definire l'inizio e la fine di un'area di contenuto all'interno di una pagina web.
Il tag viene indicato utilizzando parentesi angolari "<>" e contiene una parola o un insieme di parole che rappresentano l'elemento HTML, come ad esempio "p" per un paragrafo, "img" per un'immagine, "a" per un link, "div" per un'area di contenuto generica, e così via.
Esempio di codice: <!DOCTYPE html>
<html lang="it">
<head>
<meta charset="UTF-8">
<title>Tabella semplice</title>
</head>
<body>
<table border="1">
<tr>
<th>Nome</th>
<th>Cognome</th>
<th>Voto</th>
</tr>
<tr>
<td>Mario</td>
<td>Rossi</td>
<td>28</td>
</tr>
<tr>
<td>Anna</td>
<td>Bianchi</td>
<td>30</td>
</tr>
</table>
</body>
</html>
Introduzione all'HTML
mariagrazia molteni
Created on September 3, 2025
Start designing with a free template
Discover more than 1500 professional designs like these:
View
Word Search: Corporate Culture
View
Microcourse: Key Skills for University
View
Microcourse: Learn Spanish
View
How to Create the Perfect Final Project
View
Create your interactive CV
View
Microcourse: Team Cybersecurity
View
Microcourse: Key Skills for the Professional Environment
Explore all templates
Transcript
Appunti
HTML
EDIT OR DELETE THIS STATEMENT
Breve ripasso
In questa presentazione rivedremo i fondamenti dell'HTML (Hyper Text Markup Language), il linguaggio che dà struttura alle pagine web.
Componenti di base
Informazioni aggiuntive all'interno di un tag (ad esempio, HREF in <a>).
Linguaggio di marcatura per strutturare pagine web.
Elemento che indica il tipo di contenuto (ad esempio, <p> per un paragrafo).
HTML
Tag
Attributi
Editor di codice
Applicazione per scrivere HTML (ad esempio VS Code, Sublime Text, documento di testo, etc. ).
Programma che interpreta l'HTML e visualizza il web.
Browser
Ogni tag HTML è un piccolo pezzo che si inserisce nel puzzle di una pagina web.
Struttura della pagina HTML
Ogni pagina HTML ha una struttura di base simile a questa:
<!DOCTYPE html> <html> <head> <title> My First Web</title> </head> <body> <h1> Hello world! </h1> <p> This is my first website.</p> </body> </html>
12345678910
Funzione dei tag
Formattazione del testo
Sezione <head> (metadati e risorse)
Questa sezione contiene informazioni non visibili direttamente nella pagina ma importanti per browser, SEO e dispositivi mobili. <meta charset="utf-8" /> Specifica la codifica dei caratteri (UTF-8). Deve essere tra i primi tag nel <head> per evitare problemi con caratteri accentati. <meta name="viewport" content="width=device-width, initial-scale=1" /> Consente il layout responsive sui dispositivi mobili: dice al browser di adattare la larghezza della pagina alla larghezza del dispositivo e di non zoomare inizialmente.
Sezione <head> (metadati e risorse)
<title>Agcom, multe per tariffe a 28 giorni</title> Titolo della pagina che appare nella scheda del browser e viene usato dai motori di ricerca come titolo del risultato. <meta name="description" content="..." /> Breve descrizione del contenuto della pagina. I motori di ricerca spesso la mostrano come snippet nei risultati: importante per la SEO e per attirare click. <meta name="keywords" content="..." /> Lista di parole chiave separate da virgole. Storicamente utile, oggi la maggior parte dei motori di ricerca (es. Google) non la usa più per il ranking, ma l’hai richiesta come metadato. <meta name="author" content="Mirko Zago" /> Indica l’autore della pagina/articolo.
Inserimento di link o immagini
Di seguito i tag che ci consentono di creare collegamenti e visualizzare immagini. <a href="URL"> Crea link ad altre pagine <a href="https://genially.com"> Visita il sito di Genially</a> <img src = "archivo" alt="texto"> Visualizza l'immagine <img src="logo.png" alt= "Il logo del mio sito">
Verifica ciò che hai imparato finora
Informazioni aggiuntive all'interno di un tag che ne modificano il comportamento. Esempio: href in un link definisce l'URL di destinazione.
Parte di una pagina HTML in cui sono inseriti tutti i contenuti visibili all'utente, come testi, immagini, link o elenchi.
Elemento di codice HTML che indica come deve essere visualizzato il contenuto. È sempre racchiuso tra i tag < >.Esempio: <p> per il paragrafo.
Tag
Body
Attributi
Inserimento di tabelle
<table> → definisce l’inizio e la fine della tabella. <tr> (table row) → rappresenta una riga della tabella. <td> (table data) → rappresenta una cella di dati (contenuto della tabella). <th> (table header) → rappresenta una cella di intestazione (di solito appare in grassetto e centrata). <caption> → titolo della tabella (opzionale). <thead> → raggruppa le righe di intestazione. <tbody> → raggruppa le righe dei dati. <tfoot> → raggruppa le righe di chiusura (ad esempio totali). Attributi utili colspan="n" → una cella occupa più colonne. rowspan="n" → una cella occupa più righe. Con CSS puoi aggiungere bordi, spaziature, colori, ecc.
Cos’è un modulo (form) in HTML?
Un elemento <form> in HTML serve da contenitore per vari campi interattivi (come caselle di testo, pulsanti, selezioni, ecc.) che l'utente compila e invia al server. Il comportamento principale del form è definito da attributi come: action: URL a cui inviare i dati. method: metodo HTTP utilizzato (tipicamente GET o POST) .
L’elemento <input> e i suoi attributi più utili
L'elemento <input> è fondamentale per raccogliere dati. Il comportamento cambia in base all'attributo type, ad esempio: type="text": campo di testo semplice, a linea singola. È il valore predefinito. type="email": campo per indirizzi email con validazione automatica. type="password": campo testuale mascherato, utile per password. type="submit": invia il form. type="reset": ripristina i valori iniziali del form. type="radio": pulsanti esclusivi (seleziona solo uno tra più opzioni). type="checkbox": caselle di spunta (selezionabili indipendentemente).
Esempi
<form> <label for="nome">Nome:</label> <input type="text" id="nome" name="nome" placeholder="Inserisci il tuo nome"> </form>
<form> <label for="email">Email:</label> <input type="email" id="email" name="email" placeholder="esempio@dominio.com">
text Campo di testo singolo
email Campo per email con validazione
<form> <label for="pwd">Password:</label> <input type="password" id="pwd" name="pwd" placeholder="********"> </form>
password Campo nascosto per password
<form> <label for="eta">Età (1–120):</label> <input type="number" id="eta" name="eta" min="1" max="120"> </form>
number Campo numerico con limiti
<form> <label for="data">Data di nascita:</label> <input type="date" id="data" name="data"> </form>
<form> <input type="checkbox" id="newsletter" name="newsletter" value="si"> <label for="newsletter">Iscriviti alla newsletter</label> </form></form>
date Selettore data
checkbox Casella di spunta
Esempi - pulsanti
<form> <p>Genere:</p> <input type="radio" id="m" name="genere" value="m"> <label for="m">Maschile</label><br> <input type="radio" id="f" name="genere" value="f"> <label for="f">Femminile</label> </form>
<label for="favcolor">Colore preferito:</label> <input type="color" id="favcolor" name="favcolor" value="#ff0000">
radio Pulsante di scelta singola
favcolor Inserimento di un colore
<form action="/invio" method="post"> <!-- altri input --> <input type="submit" value="Invia"> </form>
submit Pulsante di invio
<form> <!-- campi --> <input type="reset" value="Reset"> </form>
reset Ripristina i valori iniziali
Cos’è il metodo method nei form?
Quando crei un form in HTML, puoi specificare come i dati inseriti devono essere inviati al server tramite l’attributo method: <form action="pagina.php" method="get"> <!-- campi input --> </form>
POST
GET
Metodo GET
I dati del form vengono aggiunti all’URL come stringa di query (?chiave=valore&chiave2=valore2). L’utente può vedere i dati direttamente nella barra degli indirizzi. I dati possono essere condivisi o salvati (basta copiare l’URL). È adatto per ricerche, filtri, o richieste dove i dati non sono sensibili. Limite di lunghezza: circa 2000 caratteri (dipende dal browser).
Prima riga
<!DOCTYPE html> Dichiara che il documento è HTML5. Serve ai browser per usare la modalità di rendering moderna. <html lang="it"> Radice del documento. L’attributo lang="it" indica che la lingua principale è l’italiano (utile per motori di ricerca, lettori di schermo e corretta sillabazione).
<!DOCTYPE html> definisce il tipo di documento<html> contiene tutti i contenuti<head> include dati invisibili come il titolo<body> contiene i contenuti visibili nella pagina web
Tag singoli
I tag singoli (detti anche void elements) sono elementi che non possono avere contenuto né richiedono un tag di chiusura Esempi comuni: <br>, <hr>, <img>, <input>, <meta>, <link> sono quelli più utilizzati nei documenti HTML
<form action="ricerca.php" method="get"> <label for="q">Cerca:</label> <input type="text" id="q" name="query"> <input type="submit" value="Cerca"> </form> Se scrivi "pizza" e invii, l’URL diventa: graphql Copia codice ricerca.php?query=pizza
Metodo GET
<form action="registrazione.php" method="post"> <label for="user">Username:</label> <input type="text" id="user" name="username"> <label for="pwd">Password:</label> <input type="password" id="pwd" name="password"> <input type="submit" value="Registrati"> </form> Quando invii, i dati non appaiono nell’URL, ma vengono inviati al server in modo "nascosto".
Metodo POST
VS
L'<input> supporta anche attributi come:
Metodo POST
I dati vengono inviati nel corpo della richiesta HTTP, non nell’URL. I dati non si vedono nella barra degli indirizzi (più sicuro). Non ha un limite pratico di lunghezza come GET. È il metodo usato per inviare dati sensibili (password, numeri di carta, ecc.) o grandi quantità di informazioni. Non può essere facilmente salvato o condiviso con un semplice URL.
Cosa sono i TAG
In HTML, il tag è un elemento che viene utilizzato per definire l'inizio e la fine di un'area di contenuto all'interno di una pagina web. Il tag viene indicato utilizzando parentesi angolari "<>" e contiene una parola o un insieme di parole che rappresentano l'elemento HTML, come ad esempio "p" per un paragrafo, "img" per un'immagine, "a" per un link, "div" per un'area di contenuto generica, e così via.
Esempio di codice: <!DOCTYPE html> <html lang="it"> <head> <meta charset="UTF-8"> <title>Tabella semplice</title> </head> <body> <table border="1"> <tr> <th>Nome</th> <th>Cognome</th> <th>Voto</th> </tr>
<tr> <td>Mario</td> <td>Rossi</td> <td>28</td> </tr> <tr> <td>Anna</td> <td>Bianchi</td> <td>30</td> </tr> </table> </body> </html>