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://poisson.phc.dm.unipi.it/~utente/pagina.html viene fornito il contenuto del file (se esiste) /home/utente/public_html/pagina.html.

Se il nome del file non è specificato, viene scelto il file index.html. Ad esempio, visitare la vostra pagina https://poisson.phc.dm.unipi.it/~utente/ in realtà è equivalente a caricare https://poisson.phc.dm.unipi.it/~utente/index.html.

Si provi a visitare la propria home-page, con URL https://poisson.phc.dm.unipi.it/~utente/. Ovviamente, si sostituisca ad ~utente il proprio nome utente su poisson. Dato che il file index.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 nella home. Ci sono due modi principali di procedere, potete scegliere quello a voi più congeniale:

Collegarsi via SSH al server, ed editare i file con un editor di testo da terminale (ad esempio nano).
Realizzare i file sul proprio computer, e poi copiarli sul server remoto utilizzando scp o rsync.

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.

Ci si colleghi via SSH a poisson.phc.dm.unipi.it. Si crei un file vuoto di nome index.html all'interno della cartella public_html (nel caso questa non esistesse, la si può creare). Si provi ora a visitare nuovamente la propria home-page; si dovrebbe trovare una pagina bianca, senza alcun titolo né contenuto.

La pagina che abbiamo creato "funziona", ma non è un valido documento HTML. Vogliamo ora modificarla in modo che possa fare da base per la nostra pagina personale.

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