🌐 HTML (HyperText Markup Language)
Cos'è:
HTML è il linguaggio usato per strutturare le pagine web.
Struttura base:
<!DOCTYPE html>
<html>
<head>
<title>Titolo della pagina</title>
</head>
<body>
<h1>Ciao Mondo</h1>
<p>Questo è un paragrafo.</p>
</body>
</html>
📄 Tabella dei tag HTML principali
Tag Significato / Descrizione
<h1> – <h6> Titoli, da <h1> (più grande) a <h6> (più piccolo)
<p> Paragrafo
<a href=""> Link ipertestuale
<img src=""> Immagine
<ul> / <ol> Lista non ordinata (<ul>) / Lista ordinata (<ol>)
<li> Elemento di lista
<div> Contenitore generico a blocco
<span> Contenitore inline (per parti di testo)
<br> A capo (interruzione di riga)
<table> Definisce una tabella
<thead> Intestazione della tabella (opzionale)
<tbody> Corpo della tabella
<tr> Riga della tabella
<th> Cella di intestazione (testo centrato, grassetto)
<td> Cella normale della tabella
🎨 CSS (Cascading Style Sheets)
Cos'è:
CSS serve per stilizzare e formattare le pagine web (colore, dimensione, layout, ecc.).
Esempio base:
<style>
body {
background-color: lightblue;
}
h1 {
color: darkblue;
font-size: 36px;
}
p{
font-family: Arial;
color: black;
}
</style>
Modi per usare il CSS:
Inline (dentro al tag HTML):
<p style="color: red;">Testo rosso</p>
Interno (nel <style> dentro <head>):
<style>
p { color: green; }
</style>
Esterno (in un file .css separato):
<link rel="stylesheet" href="[Link]">
/* [Link] */
p{
color: blue;
}
Selettori principali:
Selettore Esempio Descrizione
Tag p {} Tutti i paragrafi
Classe (.) .rosso {} Elementi con classe
"rosso"
ID (#) #titolo {} Elemento con ID "titolo"
🎯 1. Class e ID in CSS
🔹 class
● Serve per raggruppare più elementi HTML con lo stesso stile.
● Si può usare più volte nella stessa pagina.
● In CSS si seleziona con un punto .
🔸 id
● Serve per identificare un solo elemento unico.
● Deve essere unico nella pagina.
● In CSS si seleziona con il cancelletto #
✅ Differenza tra class e id
Caratteristica class id
Si usa su più ✅ Sì ❌ No (solo una volta)
elementi?
Come si scrive in CSS .nomeClasse #nomeID
Quando usarlo? Per gruppi simili Per un elemento unico
🧱 2. Differenza tra <div> e <span>
🔹 <div>: blocco
● È un contenitore a blocco (block-level)
● Va a capo automaticamente
● Usato per dividere sezioni della pagina (layout)
🔸 <span>: inline
● È un contenitore in linea (inline-level)
● Non va a capo
● Serve per stilizzare solo una parte del testo
✅ Differenza tra <div> e <span>
Caratteristica <div> <span>
Tipo di elemento Blocco (block) In linea (inline)
Va a capo? ✅ Sì prende tutta la pagina ❌ No prende solo le cose tra i tag <span>
Uso principale Strutturare layout Stilizzare testo singolo
Esempio visivo Sezione intera Parola o frase
Proprietà CSS Significato / Descrizione Esempio di utilizzo
padding Spazio interno tra il contenuto e il bordo padding: 20px;
dell’elemento
margin Spazio esterno tra l’elemento e gli altri margin: 10px;
elementi
background-col Colore di sfondo dell’elemento background-color:
or lightblue;
font-size Dimensione del testo font-size: 18px;
font-family Tipo di carattere usato font-family: Arial,
sans-serif;
width Larghezza dell’elemento width: 300px;
height Altezza dell’elemento height: 150px;
color Colore del testo color: red;
text-align Allineamento del testo (sinistra, centro, text-align: center;
destra)
border Bordo intorno all’elemento border: 2px solid
black;
display Tipo di visualizzazione (es. block, inline, display: block;
flex)
overflow Gestione del contenuto che supera le overflow: hidden;
dimensioni dell’elemento
ESEMPIO HTML
<!DOCTYPE html>
<html lang="it">
<head>
<meta charset="UTF-8">
<title>Esempio Completo HTML e CSS</title>
<style>
/* Classi */
.rosso {
color: red;
}
.evidenziato {
background-color: yellow;
font-weight: bold;
}
.sezione {
background-color: lightgray;
padding: 20px;
margin-bottom: 20px;
}
/* ID */
#titolo-principale {
font-size: 32px;
color: navy;
text-align: center;
margin-bottom: 30px;
}
/* Tabella */
table {
width: 100%;
border-collapse: collapse;
}
th, td {
border: 1px solid #333;
padding: 8px;
text-align: left;
}
th {
background-color: #f2f2f2;
}
/* Box con div */
.box {
background-color: lightblue;
padding: 15px;
margin: 10px 0;
border: 2px solid blue;
}
</style>
</head>
<body>
<h1 id="titolo-principale">Esempio HTML + CSS</h1>
<div class="sezione">
<p class="rosso">Questo è un paragrafo con classe "rosso".</p>
<p>Puoi anche usare uno <span class="evidenziato">span evidenziato</span> dentro un
paragrafo.</p>
</div>
<div class="box">
Questo è un <code><div></code> con <strong>padding</strong>,
<strong>margin</strong> e <strong>background-color</strong>.
</div>
<table>
<thead>
<tr>
<th>Nome</th>
<th>Età</th>
</tr>
</thead>
<tbody>
<tr>
<td>Alice</td>
<td>17</td>
</tr>
<tr>
<td>Marco</td>
<td>18</td>
</tr>
</tbody>
</table>
</body>
</html>