HTML e CSS: le basi del web — scheda (tecnico-informatica-telecomunicazioni) — scheda didattica (Istituto tecnico informatica telecomunicazioni)

Ogni pagina web è fatta di due linguaggi fondamentali: HTML (struttura) e CSS (aspetto). Insieme, formano la base di qualsiasi sito.

HTML (HyperText Markup Language)

HTML descrive la struttura di una pagina. Usa tag (etichette) tra parentesi angolari <>.

Struttura base

<!DOCTYPE html>
<html lang='it'>
<head>
  <title>Il mio sito</title>
</head>
<body>
  <h1>Benvenuto!</h1>
  <p>Questo è un paragrafo.</p>
</body>
</html>

Tag essenziali

<h1>, <h2>, <h3>: titoli (dal più importante al meno).
<p>: paragrafo.
<a href='url'>testo</a>: link.
<img src='foto.jpg' alt='descrizione'>: immagine.
<ul><li>: elenco puntato. <ol><li>: elenco numerato.
<table><tr><td>: tabella.
<form>, <input>, <button>: moduli.
<div> e <span>: contenitori generici.

CSS (Cascading Style Sheets)

CSS descrive l'aspetto della pagina: colori, font, dimensioni, posizioni.

Esempio

h1 {
  color: blue;
  font-size: 32px;
  text-align: center;
}

p {
  color: gray;
  line-height: 1.5;
}

Proprietà principali

color: colore del testo.
background-color: colore di sfondo.
font-family, font-size, font-weight: tipografia.
margin, padding: spaziature esterne/interne.
border: bordi.
display, flexbox, grid: layout moderni.

Selettori CSS

Come dire 'a chi applicare lo stile':

p → tutti i paragrafi.
.classe → elementi con classe='classe'.
#id → elemento con id='id' (unico).
div > p → paragrafi figli di div.

Esempio completo

<!DOCTYPE html>
<html>
<head>
  <style>
    body { font-family: sans-serif; }
    .card { background: #f0f0f0; padding: 20px; border-radius: 8px; }
    .titolo { color: #2d6a4f; }
  </style>
</head>
<body>
  <div class='card'>
    <h2 class='titolo'>Ciao!</h2>
    <p>Questo è un esempio di HTML+CSS.</p>
  </div>
</body>
</html>

Responsive design

Un sito moderno deve funzionare su mobile, tablet e desktop. Si usano:

Media queries: stili diversi per schermi diversi.
Flexbox/Grid: layout flessibili.
Unità relative (rem, %, vw) invece di pixel fissi.

A che serve

Conoscere HTML/CSS permette di:

Creare un sito web personale.
Capire e modificare siti esistenti (WordPress, Shopify).
Lavorare come web developer.
Comunicare meglio con designer e marketer.
Personalizzare email HTML (newsletter).

Strumenti utili

VSCode: editor di codice gratuito.
Chrome DevTools: ispezione e debug (F12).
CodePen, JSFiddle: ambienti online per provare.
W3C Validator: verifica che il codice sia corretto.

HTML e CSS: le basi del web — scheda (tecnico-informatica-telecomunicazioni)