Siti web in HTML + CSS

Impariamo ora l’HTML e il CSS, i due principali linguaggi per scrivere pagine web. Non sono linguaggi di programmazione veri e propri, non è possibile implementare algoritmi con essi, ma vengono usati per descrivere la struttura della pagina (HTML) e lo stile (CSS) di questa, cioè colori e impaginazione.

Materiale didattico

Il web è pieno di materiale … sul web 😊.

Un sito didattico molto utile è W3Schools. Contiene esempi e tutorial non solo su HTML e CSS, ma anche molte altre tecnologie legate al web come JavaScript o tecnologie e linguaggi informatici come Python e SQL, per i database.

Materiale didattico
HTML
CSS
Esempi di stile CSS

HTML

Come funziona l’HTML

HTML sta per HyperText Markup Language, cioè linguaggio di marcatura per ipertesti. Fu inventato da Tim Berners-Lee nel 1991 per permettere la condivisione di documenti tra ricercatori in rete: è così che è nato il World Wide Web. Non è un linguaggio di programmazione: non si scrivono algoritmi in HTML, ma si descrive la struttura di una pagina web.

La struttura viene descritta tramite tag, cioè etichette speciali scritte fra parentesi angolari < e >. Quasi tutti i tag esistono in coppia: un tag di apertura e un tag di chiusura.

<nometag>contenuto</nometag>

Il tag di chiusura è identico al tag di apertura, ma ha una barra / prima del nome. Il contenuto è il testo (o altri tag) che si trova tra i due.

Alcuni tag non hanno contenuto e quindi non hanno un tag di chiusura. Si chiamano tag vuoti (void elements). Esempi: <hr>, <br>, <img>.

I tag possono essere annidati, cioè un tag può contenere altri tag al suo interno. In questo caso i tag devono essere chiusi nell’ordine inverso rispetto a quello in cui sono stati aperti: non è possibile chiudere un tag esterno senza prima chiudere quelli interni. L’ordine corretto è: si apre il più esterno, poi si apre l’interno, poi si chiude l’interno, e solo alla fine si chiude l’esterno.

<!-- CORRETTO: prima si chiude <b>, poi <p> -->
<p>Il testo è <b>in grassetto</b> qui.</p>

<!-- SBAGLIATO: non si può chiudere <p> mentre <b> è ancora aperto -->
<p>Il testo è <b>in grassetto</p></b>

I tag possono anche avere degli attributi, cioè informazioni aggiuntive scritte dentro il tag di apertura con un segno = e chiusi fra virgolette:

<nometag attributo="valore">contenuto</nometag>

Ad esempio, un’immagine ha l’attributo src che indica il file da mostrare, e l’attributo alt che ne descrive il contenuto a parole:

<img src="foto.jpg" alt="Una foto di esempio">

Gli spazi e gli a capo nel codice HTML non influenzano il risultato visivo. A differenza di Python, dove l’indentazione fa parte della sintassi del linguaggio, in HTML si può indentare e spaziare il codice liberamente: il browser li ignorerà. L’indentazione serve solo a rendere il codice più leggibile per chi lo scrive.

I nomi dei tag si possono scrivere sia in minuscolo sia in MAIUSCOLO (<p> e <P> sono equivalenti per il browser), ma la convenzione moderna vuole sempre il minuscolo. In questo corso scriveremo sempre i tag in minuscolo.

Struttura di una pagina HTML

Una pagina HTML ha sempre questa struttura di base:

<!DOCTYPE html>
<html>
  <head>
    <title>Il titolo della pagina</title>
  </head>
  <body>
    <h1>Benvenuti!</h1>
    <p>Questa è la mia prima pagina web.</p>
  </body>
</html>

Analizziamo ogni parte:

<!DOCTYPE html> - non è un vero tag ma una dichiarazione che dice al browser che il file è scritto in HTML5, la versione moderna di HTML. Va sempre messa come prima riga.
<html> - è il tag che racchiude tutta la pagina. Tutto il contenuto HTML si trova tra <html> e </html>.
<head> - contiene informazioni sulla pagina che il browser utilizza ma che non vengono mostrati direttamente all’utente. Qui si trovano ad esempio il titolo della finestra o tab (<title>), collegamenti ai file CSS (<link>) e blocchi di stile (<style>).
<body> - contiene tutto il contenuto visibile della pagina: testi, immagini, link, tabelle e tutto quello che l’utente vede nel browser.

Titoli: da `h1` a `h6`

I tag <h1>, <h2>, …, <h6> servono per inserire titoli (headings) di diversa importanza. <h1> è il titolo principale, il più grande; <h6> è il titolo di livello più basso, il più piccolo.

<h1>Titolo di livello 1 - il più importante</h1>
<h2>Titolo di livello 2</h2>
<h3>Titolo di livello 3</h3>
<h4>Titolo di livello 4</h4>
<h5>Titolo di livello 5</h5>
<h6>Titolo di livello 6 - il meno importante</h6>

In una pagina dovrebbe esserci un solo <h1>, quello principale. I titoli si usano in ordine gerarchico: un <h3> è una sezione dentro un <h2>, che a sua volta è una sezione dentro un <h1>.

Il paragrafo: `p`

Il tag <p> definisce un paragrafo di testo. Il browser aggiunge automaticamente dello spazio prima e dopo ogni paragrafo.

<p>Questo è il primo paragrafo. Contiene del testo.</p>
<p>Questo è il secondo paragrafo. Anche lui contiene del testo.</p>

Andare a capo nel file HTML non crea un a capo nella pagina. Per separare i testi in paragrafi distinti si usano i tag <p>. Per un semplice a capo senza separazione si usa il tag vuoto <br> (break).

La riga orizzontale: `hr`

Il tag <hr> (horizontal rule) inserisce una linea orizzontale di separazione. È un tag vuoto, non ha un tag di chiusura.

<p>Primo paragrafo prima della linea.</p>
<hr>
<p>Secondo paragrafo dopo la linea.</p>

Lista non ordinata: `ul`

Una lista non ordinata (unordered list) mostra gli elementi con dei puntini, senza numerazione. Si usa il tag <ul> per la lista e il tag <li> (list item) per ogni elemento.

<ul>
  <li>Mele</li>
  <li>Pere</li>
  <li>Banane</li>
</ul>

Il risultato è una lista con pallini:

Mele
Pere
Banane

Lista ordinata: `ol`

Una lista ordinata (ordered list) numera automaticamente gli elementi. Si usa il tag <ol> per la lista e, come prima, il tag <li> per ogni elemento.

<ol>
  <li>Accendere il computer</li>
  <li>Aprire il browser</li>
  <li>Andare su un sito web</li>
</ol>

Il risultato è una lista numerata:

Accendere il computer
Aprire il browser
Andare su un sito web

Le liste si possono annidare: è possibile inserire una lista dentro un elemento <li> di un’altra lista, creando così liste a più livelli.

Tabelle: `table`, `tr`, `th`, `td`

Le tabelle in HTML si creano con più tag che lavorano insieme:

<table> - racchiude l’intera tabella
<tr> (table row) - definisce una riga della tabella
<th> (table header) - definisce una cella di intestazione (in grassetto e centrata)
<td> (table data) - definisce una cella normale con i dati

<table>
  <tr>
    <th>Nome</th>
    <th>Cognome</th>
    <th>Voto</th>
  </tr>
  <tr>
    <td>Mario</td>
    <td>Rossi</td>
    <td>8</td>
  </tr>
  <tr>
    <td>Anna</td>
    <td>Bianchi</td>
    <td>9</td>
  </tr>
</table>

La struttura è:

La prima riga <tr> contiene le intestazioni con <th>.
Le righe successive <tr> contengono i dati con <td>.

Di default le tabelle HTML non hanno bordi visibili. Per aggiungere i bordi si usa il CSS, ad esempio la proprietà border.

Tag inline, es: `b`, `i`

In HTML ogni elemento appartiene a una di due categorie principali:

Block (o a blocco) - l’elemento occupa tutta la larghezza disponibile e va a capo prima e dopo di sé. Esempi: <p>, <h1>, …, <h6>, <ul>, <ol>, <table>.
Inline - l’elemento si inserisce dentro il testo senza interromperne il flusso. Esempi: <b>, <i>, <a>, <img>.

Questa distinzione ha anche regole precise su dove i tag possono comparire:

Un elemento inline non può contenere un elemento block. Ad esempio, non si può mettere un <p> dentro un <i>.
I titoli non si annidano: non ha senso scrivere un <h2> dentro un <h1>. I titoli definiscono la gerarchia della pagina e non vanno usati per cambiare la dimensione del testo (per quello c’è il CSS).
I tag block vanno generalmente dentro <body> o dentro altri elementi block, mai direttamente dentro un elemento inline.

Grassetto: `b`

Il tag <b> rende il testo in grassetto (bold).

<p>Questo testo è normale, ma <b>questo è in grassetto</b>.</p>

Corsivo: `i`

Il tag <i> rende il testo in corsivo (italic).

<p>Il titolo del libro è <i>Il nome della rosa</i>.</p>

Esistono anche <strong> (equivalente a <b>) e <em> (equivalente a <i>) che hanno lo stesso effetto visivo ma con un significato semantico più preciso: importante e enfatizzato. Sono preferibili secondo le linee guida moderne.

Link: `a`

Il tag <a> (anchor) crea un collegamento ipertestuale (link). L’attributo fondamentale è href (hypertext reference), che indica l’indirizzo della pagina di destinazione.

<p>Visita <a href="https://www.google.com">Google</a> cliccando qui.</p>

Il testo tra <a> e </a> è la parte cliccabile del link. Si può anche creare un link intorno a una immagine per renderla cliccabile, non per forza deve essere testuale.

Il valore di href cambia a seconda della destinazione:

Link esterni (ad altri siti) - devono sempre iniziare con il protocollo, di solito https:// oppure http://. Senza protocollo il browser non sa che si tratta di un indirizzo web e il link non funzionerà.
```
<a href="https://www.wikipedia.org">Wikipedia</a>
```

Link interni (ad altre pagine dello stesso sito) - si usa un percorso relativo, cioè il percorso del file rispetto alla pagina corrente, senza protocollo né dominio.

<!-- pagina nella stessa cartella -->
<a href="contatti.html">Contatti</a>

<!-- pagina in una sottocartella -->
<a href="progetti/mio-progetto.html">Il mio progetto</a>

<!-- pagina nella cartella superiore -->
<a href="../index.html">Torna alla home</a>

Per aprire il link in una nuova scheda del browser si aggiunge l’attributo target="_blank":

<a href="https://www.wikipedia.org" target="_blank">Wikipedia</a>

Immagine: `img`

Il tag <img> inserisce un’immagine nella pagina. È un tag vuoto. I suoi attributi principali sono:

src (source) - il percorso o l’indirizzo del file immagine
alt (alternative text) - una descrizione testuale dell’immagine, mostrata se l’immagine non si carica e letta dai lettori per non vedenti

<img src="foto.jpg" alt="Una foto di un paesaggio montano">

È possibile specificare anche le dimensioni con gli attributi width e height, il cui valore è espresso in pixel:

<img src="logo.png" alt="Logo della scuola" width="200" height="100">

Contenitori generici: `div` e `span`

Spesso serve raggruppare più elementi per applicare loro uno stile o organizzare meglio la pagina, senza che il contenitore stesso abbia un significato visivo proprio.

<div> - contenitore block generico. Raggruppa uno o più elementi block o inline creando un “blocco” invisibile attorno a loro. È il mattone fondamentale per costruire il layout di una pagina web.
<span> - contenitore inline generico. Raggruppa una porzione di testo o alcuni elementi inline senza interrompere il flusso del testo.

<div>
  <h2>Una sezione</h2>
  <p>Un paragrafo dentro la sezione.</p>
  <p>Un altro paragrafo.</p>
</div>

<p>Un testo con <span>una parte speciale</span> nel mezzo.</p>

Da soli <div> e <span> non cambiano nulla nell’aspetto della pagina. Diventano utili quando si aggiunge il CSS: si può applicare un colore di sfondo, un bordo, una larghezza o qualsiasi altro stile all’intero gruppo di elementi.

CSS

Come funziona il CSS

CSS sta per Cascading Style Sheets, cioè fogli di stile a cascata. Mentre l’HTML descrive la struttura della pagina, il CSS ne descrive l’aspetto visivo: colori, dimensioni, spaziature, tipi di carattere e molto altro.

Una regola CSS è formata da tre parti:

selettore {
  proprietà: valore;
}

Il selettore indica a quali elementi si applica lo stile. Ad esempio p seleziona tutti i paragrafi, h1 tutti i titoli di primo livello.
La proprietà indica quale aspetto si vuole modificare (es. color, font-size).
Il valore indica come si vuole modificarlo (es. red, 16px).

Esempio: tutti i paragrafi (<p>) con testo rosso di dimensione 16 pixel:

p {
  color: red;
  font-size: 16px;
}

Una regola può contenere più coppie proprietà: valore, separate da ;.

Includere il CSS: `style` e `link`

Ci sono due modi principali per includere il CSS in una pagina HTML.

Con il tag `<style>`

Il CSS può essere scritto direttamente dentro la pagina HTML, nel blocco <head>, all’interno del tag <style>:

<!DOCTYPE html>
<html>
  <head>
    <title>La mia pagina</title>
    <style>
      body {
        background-color: #f0f0f0;
        font-family: Arial, sans-serif;
      }
      h1 {
        color: #0055aa;
      }
      p {
        font-size: 16px;
      }
    </style>
  </head>
  <body>
    <h1>Titolo della pagina</h1>
    <p>Un paragrafo di testo.</p>
  </body>
</html>

Questo metodo è comodo per piccole pagine, ma ha uno svantaggio: se il sito ha molte pagine, bisogna copiare il CSS in ognuna.

Con il tag `<link>` e un file esterno

Il metodo migliore è scrivere il CSS in un file separato, tipicamente con estensione .css, e poi collegarlo alla pagina HTML tramite il tag <link> nel blocco <head>:

<!DOCTYPE html>
<html>
  <head>
    <title>La mia pagina</title>
    <link rel="stylesheet" href="stile.css">
  </head>
  <body>
    <h1>Titolo della pagina</h1>
    <p>Un paragrafo di testo.</p>
  </body>
</html>

Il file stile.css nella stessa cartella conterrà direttamente le regole CSS, senza alcun tag <style> in quanto non siamo più nel file HTML e i tag in CSS non esistono:

body {
  background-color: #f0f0f0;
  font-family: Arial, sans-serif;
}

h1 {
  color: #0055aa;
}

p {
  font-size: 16px;
}

Il vantaggio del file esterno è che un solo file CSS può essere collegato a tutte le pagine del sito. Se si vuole cambiare il colore dei titoli, basta modificare il file .css una volta sola e il cambiamento si applica automaticamente a tutte le pagine.

I selettori CSS

Il selettore è la parte della regola CSS che indica a quali elementi applicare lo stile. Esistono tre tipi fondamentali di selettore.

Selettore per tag

Seleziona tutti gli elementi di quel tipo nella pagina. Si scrive semplicemente con il nome del tag, senza altri simboli.

p {
  color: #333333;    /* tutti i paragrafi diventano grigio scuro */
}

h1 {
  font-size: 36px;   /* tutti i titoli h1 diventano grandi */
}

È il selettore più generico: si usa quando si vuole dare uno stile uniforme a tutti gli elementi di un certo tipo.

Selettore per classe (`.`)

Seleziona solo gli elementi che hanno un certo attributo class. Nel CSS si scrive con un punto . davanti al nome della classe.

<!-- HTML: si assegna la classe con l'attributo class -->
<p class="evidenziato">Questo paragrafo è evidenziato.</p>
<p>Questo paragrafo è normale.</p>
<p class="evidenziato">Anche questo è evidenziato.</p>

/* CSS: il punto indica che è un selettore per classe */
.evidenziato {
  background-color: yellow;
  font-weight: bold;
}

Solo i paragrafi con class="evidenziato" avranno sfondo giallo e testo grassetto. Lo stesso nome di classe può essere applicato a elementi di tipo diverso: un <p>, un <h2> e un <div> possono avere tutti class="evidenziato".

Un elemento può avere più classi contemporaneamente, separate da uno spazio:

<p class="evidenziato grande">Questo paragrafo ha due classi.</p>

Selettore per ID (`#`)

Seleziona un unico elemento identificato da un id specifico. Nel CSS si scrive con un cancelletto # davanti al nome dell’id.

<!-- HTML: si assegna l'id con l'attributo id -->
<h1 id="titolo-principale">Il mio sito</h1>
<p id="intro">Questo è il paragrafo introduttivo.</p>

/* CSS: il cancelletto indica che è un selettore per id */
#titolo-principale {
  color: #003399;
  text-align: center;
}

#intro {
  font-style: italic;
  font-size: 18px;
}

La regola fondamentale è che ogni id deve essere unico nella pagina: non possono esserci due elementi con lo stesso valore di id. Questo lo distingue dalla classe, che invece può essere ripetuta su più elementi.

Riepilogo

Tipo	Sintassi CSS	Attributo HTML	Quanti elementi seleziona
Tag	`p { }`	(nessuno)	Tutti i `<p>` della pagina
Classe	`.nome { }`	`class="nome"`	Tutti gli elementi con quella classe
ID	`#nome { }`	`id="nome"`	Un solo elemento (univoco)

Esempi di stile CSS

Sfondo: `background-color`

La proprietà background-color imposta il colore di sfondo di un elemento. I colori si possono indicare con i codici esadecimali RGB oppure con i nomi dei colori in inglese.

body {
  background-color: #ffffff;  /* sfondo bianco */
}

h1 {
  background-color: #ffff00;  /* sfondo giallo per i titoli principali */
}

p {
  background-color: lightblue;  /* sfondo azzurro per i paragrafi */
}

Colore del testo: `color`

La proprietà color imposta il colore del testo di un elemento. Si usa la stessa notazione di background-color.

h1 {
  color: #cc0000;       /* titoli in rosso scuro */
}

p {
  color: #333333;       /* paragrafi in grigio scuro */
}

a {
  color: #0066ff;       /* link in blu */
}

Tipo di carattere: `font-family`

La proprietà font-family imposta il tipo di carattere (font) del testo. È buona pratica indicare più font in ordine di preferenza, separati da virgola: il browser usa il primo disponibile sul sistema dell’utente.

body {
  font-family: Arial, Helvetica, sans-serif;
}

h1 {
  font-family: "Times New Roman", Georgia, serif;
}

code {
  font-family: "Courier New", Courier, monospace;
}

I font si dividono in tre grandi famiglie:

serif - caratteri con le grazie (piccoli ornamenti alle estremità delle lettere), es. Times New Roman, Georgia. Usati spesso nei testi stampati.
sans-serif - caratteri senza grazie, es. Arial, Helvetica, Verdana. Più leggibili su schermo.
monospace - ogni lettera occupa la stessa larghezza, es. Courier New. Usati per codice sorgente.

Dimensione del carattere: `font-size`

La proprietà font-size imposta la dimensione del testo. L’unità più comune è il pixel (px).

body {
  font-size: 16px;      /* dimensione base del testo */
}

h1 {
  font-size: 36px;      /* titoli grandi */
}

h2 {
  font-size: 28px;
}

p {
  font-size: 14px;      /* testo dei paragrafi un po' più piccolo */
}

Le dimensioni in pixel sono fisse. Esiste anche l’unità em, che è relativa: 1em è uguale alla dimensione corrente del testo, 2em è il doppio, 0.5em è la metà. Usare em permette di scalare tutto il testo in modo proporzionale.

Esempio completo

Ecco una pagina HTML completa con stile CSS incorporato nel tag <style>:

<!DOCTYPE html>
<html>
  <head>
    <title>Pagina di esempio</title>
    <style>
      body {
        background-color: #f5f5f5;
        color: #222222;
        font-family: Arial, sans-serif;
        font-size: 16px;
      }

      h1 {
        color: #003399;
        font-size: 32px;
      }

      h2 {
        color: #006633;
        font-size: 22px;
      }

      p {
        font-size: 15px;
      }

      a {
        color: #cc3300;
      }
    </style>
  </head>
  <body>
    <h1>Il mio sito</h1>
    <h2>Sezione uno</h2>
    <p>
      Questo è un paragrafo con testo normale.
      Qui c'è un link a <a href="https://www.wikipedia.org">Wikipedia</a>.
    </p>
    <h2>Sezione due</h2>
    <p>
      Un altro paragrafo. Il testo è <b>in grassetto</b>
      oppure <i>in corsivo</i>.
    </p>
  </body>
</html>

Siti web in HTML + CSS

Materiale didattico

HTML

Come funziona l’HTML

Struttura di una pagina HTML

Titoli: da h1 a h6

Il paragrafo: p

La riga orizzontale: hr

Lista non ordinata: ul

Lista ordinata: ol

Tabelle: table, tr, th, td

Tag inline, es: b, i

Grassetto: b

Corsivo: i

Link: a

Immagine: img

Contenitori generici: div e span

CSS