Imparare a programmare un sito web a tema - Antica Roma

Struttura del sito

Salve,
benvenuto al corso su come programmare un sito web sull’antica Roma.

Per prima cosa creiamo un nuovo file chiamato “AveMunde.html”, che sarà la nostra pagina iniziale. Il codice di ogni pagina web, che andremo a creare, sarà formato in sezioni, come i paragrafi del De Bello Gallico, scritto da Giulio Cesare tra il 58 e il 50 a.c..

La pagina dovrà contenere questo codice:

<html>
<head>
</head>
<body>
<p> Ave munde </p>
</body>
</html>
Codice hello world

Il codice si divide in tags.

Ogni tag definisce una tipologia di informazioni. Ad esempio, il tag p (dove è presente il testo Ave Mundi) ci insegna che questo tag è un paragrafo.

Ad esempio, quando Cicerone ha scritto Cato Maior de senectute (trattato filosofico sulla vecchiaia di Catone), il testo era diviso in paragrafi e quindi si può inserire ogni testo di ciascun paragrafo dell'opera in un tag di tipologia p. L'inizio di ogni paragrafo di Cicerone potrebbe iniziare con il tag iniziale <p> , mentre la fine avrà associato un tag finale </p>. Da notare che l'inizio di un tag è formato dall'espressione <tag>, mentre la fine ha anche uno slash o barra, (ad esempio (</tag>)) che ci fa capire che quello è il tag di chiusura.

La prima sezione è chiama head o come viene chiamata in latino: caput. In questa sezione possiamo inserire le regole della grafica e degli script definiti per il nostro sito.

Ad esempio Vespasiano nel 72 d.c. ha iniziato la costruzione del Colosseo e avrà gestito anche l'estetica del luogo. Quindi, per definire queste regole, possiamo creare un file chiamato vesapasiano.css, con le regole grafiche che saranno simili all’estetica del Colosseo.

Il file con la grafica del nostro sito conterrà ad esempio le regole base come i colori della pagina (che nel caso del Colosseo possono essere interpretati come i colori del travertino, pietra usata per la costruzione), oppure delle regole più avanzate, che possono essere state introdotte in un periodo più nuovo(come ad esempio i bordi smussati di un rettangolo di una sezione, che sono curvi come le tre fornici dell’arco di Costantino).

Nei file degli scripts avvengono le funzionalità interattive del sito. La funzionalità più semplice che si può fare è scrivere o loggare nella console (programma di un browser che interpreta i comandi che sono passati negli script, un po' come veniva fatto dal senato dell’antica Roma, che interpretava gli scritti dei senatori oppure come avveniva nell'antichità quando gli scribi tenevano traccia delle informazioni).

Quindi la struttura è formata da un caput (chiamato head) e da un corporis (o nel britannico moderno: body). Nel caput (head) saranno inseriti tutti gli script e le regole grafiche per fare funzionare il sito, mentre nel corporis (o body) saranno inseriti gli elementi concreti che vogliamo visualizzare.

Andiamo con ordine. Dobbiamo ora, come detto precedentemente, collegare il nostro file sull'estetica del sito alla pagina. Così, ogni volta che viene caricata la pagina, sarà standardizzata con una grafica decisa da noi.

Dobbiamo quindi inserire questo codice

<link href="css/vespasiano.css" type="stylesheet">
Collegamento del file grafico vespasiano.css

Abbiamo detto, che il file con la grafica si chiama vespasiano.css, in onore delle regole grafiche definite durante il regno di Vespasiano.

La proprietà href all'interno del tag script ci indica dove trovare questo file all'interno della struttura delle nostre cartelle. Come sappiamo, Roma aveva una grande rete di strade, che portavano fino ai punti più remoti dell'Impero

Per spostarci da un punto di Roma ad un altro, ad esempio, dovevamo spostarci con dei carri e seguire un percorso. Allo stesso modo, la nostra proprietà href ci indica il percorso esatto da seguire per reperire un documento, che includiamo.

Vorresti leggere anche il secondo capitolo su come creare siti a tema storico?
Si
No
Created with Survey Maker
Loading...