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:

Utilizzare l'editor integrato nel repository sul sito (che tuttavia è poco flessibile).
Realizzare i file sul clone del repository del proprio computer, e poi copiarli sul server remoto utilizzando la catena git add, git commit, git push

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:

Il tag head, che contiene i metadati del documento (titolo, autore, ecc.); vedremo poi che include anche definizione degli stili grafici da usare, eventuali script.
Il tag body, che contiene il vero e proprio corpo del testo, ovvero quello che appare sulla pagina.

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?).