Cos'è HTML?
HTML (HyperText Markup Language) è il linguaggio standard per creare pagine web. Ogni pagina è composta da elementi (tag) che strutturano il contenuto.
Struttura Base di una Pagina HTML
<!DOCTYPE html>
<html>
<head>
<title>La mia prima pagina</title>
</head>
<body>
<h1>Ciao, mondo!</h1>
<p>Questa è la mia prima pagina web.</p>
</body>
</html>
<!DOCTYPE html> e contiene i tag <html>, <head> e <body>.Cos'è CSS?
CSS (Cascading Style Sheets) serve a definire lo stile degli elementi HTML (colori, font, layout, spaziature).
Esempio di CSS Base
body {
font-family: Arial, sans-serif;
background-color: #f4f4f4;
color: #333;
}
h1 {
color: #2196f3;
}
Collegare CSS a una Pagina HTML
<head>
<link rel="stylesheet" href="stile.css">
</head>
Così puoi separare struttura (HTML) e stile (CSS) per una manutenzione più semplice.
Box Model e Layout
Ogni elemento HTML è un box rettangolare. Capire il box model è fondamentale:
- content: il contenuto vero e proprio
- padding: spazio interno
- border: bordo
- margin: spazio esterno
.esempio {
margin: 20px;
padding: 10px;
border: 2px solid #2196f3;
}Esempio Completo: Pagina Web con Stile
<!DOCTYPE html>
<html>
<head>
<title>Esempio HTML+CSS</title>
<link rel="stylesheet" href="stile.css">
</head>
<body>
<h1>Benvenuto!</h1>
<p>Questa pagina è stilizzata con CSS.</p>
</body>
</html>
Conclusione
HTML e CSS sono la base di ogni sito web moderno. Padroneggiare questi due linguaggi ti permetterà di creare pagine web ben strutturate, esteticamente gradevoli e responsive. Ricorda di seguire le best practice, mantenere il codice pulito e ordinato, e di testare sempre le tue pagine su diversi dispositivi e browser. Con la pratica e l'esperienza, potrai creare design sempre più complessi e raffinati, aggiungendo funzionalità avanzate come animazioni, transizioni e layout responsive.