Costruire una pagina vuota

Un documento HTML è un file di testo che viene fornito dal server web quano si visita una determinata pagina. Ad esempio, quando si visita l'URL https://people.cs.dm.unipi.it/limco/2023-24/html-pagina-base.html viene fornito il contenuto del file (se esiste) /home/limco2021/public_html/html-pagina-base.html.

Se il nome del file non è specificato, viene scelto il file index.html. Ad esempio, visitare la pagina iniziale del laboratorio https://people.cs.dm.unipi.it/limco/2023-24/ in realtà è equivalente a caricare https://people.cs.dm.unipi.it/limco/2023-24/index.html.

Si provi a visitare la pagina con, con URL https://people.cs.dm.unipi.it/limco/2023-24/prova.html. Dato che il file prova.html non esiste, ci si aspetta che quest'operazione ritorni un errore. Che codice di errore viene ritornato?

Suggerimento: D'ora in poi avremo spesso la necessità di modificare i file HTML. Se state utilizzando GitHub Pages ci sono due modi principali di procedere:

Se invece avete deciso di lavorare in maniera puramente locale, non avrete altro da fare che aprire le pagine che risiedono sulla macchina che state usando con il web-browser di vostra scelta.

Una pagina vuota

Vogliamo ora procedere a creare una pagina, in modo che il task precedente non fornisca più un errore. Come primo step, creeremo semplicemente un file vuoto index.html.

Ogni documento HTML è composto da alcuni tag, che si indicano con le parentesi angolate, e vanno aperti e chiusi. Questi indicano particolari sezioni del testo, o caratteristiche del documento. Ad esempio, tutta la pagina deve essere contenuta all'interno di un tag html, come segue:

<!DOCTYPE html>
<html>
  [ ... contenuto delle pagina qui ... ]
</html>
La stringa <!DOCTYPE html> sta ad indicare il linguaggio di markup in cui è scritto il documento, nel nostro caso HTML. Va sempre inserita all'inizio del file. Il tag html deve a sua volta contenere due tag particolari:

Si modifichi file file index.html creato in precedenza per contenere il seguente testo, che useremo come modello di partenza per la nostra pagina.
<!DOCTYPE html>
<html lang="en">

<head>
   <meta charset="utf-8">
   <title>La mia pagina</title>
</head>

<body>

</body>

</html>
Si provi a ricaricare la pagina, come è cambiata? Dove appare il testo "La mia pagina" che è stato inserito nel blocco head?

Corpo del testo

Si provi ora modificare la pagina inserendo del testo nel corpo principale, ovvero all'interno del blocco body. Una volta salvato, si ricarichi la pagina. Si osservi come viene riportato il testo (ad esempio, vengono riportati "correttamente" gli spazi?).