Struttura del sito

Sommario:
Questa pagina e` una continuazione della guida Come creare un sito da zero..

La home page

La prima pagina del sito che dovete creare è la pagina principale "root" del sito. Il termine root significa "radice" e deriva dal fatto che la gerarchia delle pagine di un sito web viene rappresentata ad albero.
La home page è la pagina che si apre per prima quando un visitatore accede al sito digitandone l'indirizzo nel proprio browser, o cliccandolo nei risultati di ricerca.

La home page è una pagina come le altre, con una caratteristica: deve chiamarsi, obbligatoriamente, index.html.

Per creare la home page, dovete, quindi, creare un file html, come descritto in precedenza e rinominarlo index.html

Le altre pagine:

Fatta la home page, potete creare tutte le successive pagine che desiderate, rinominarle come credete (ma la index deve essere una sola), dargli estensione .html e metterle nella stessa cartella.

Ricordatevi di usare, sempre, lettere minuscole e di non lasciare spazi tra le parole.

Adesso che avete capito com'è la struttura di una pagina html, per apportare modifiche alle pagine e inserire contenuti, potete avvalervi, anche, di un editor visuale. Se avete un po' di pratica, potete preparare il vostro editor professionale personalizzato utilizzando programmi come Froala editor.
In alternativa, potete servirvi di programmi già strutturati come BlueGriffon.

Le sottopagine

Le sottopagine sono pagine secondarie ad una pagina principale. Le sottopagine si trovano in una cartella con lo stesso nome della pagina principale. Quindi, se avete nominato la pagina principale "pippo.html", la cartella che contiene le pagine secondarie si chiamerà "pippo". In questo modo,il percorso di una sottopagina sarà del tipo:

pippo/sottopagina.html

Vedi più sotto l'argomento "Il percorso dei file".

Il menù di navigazione..

Le pagine che avete creato, per poter essere raggiungibili, devono essere collegate tra di loro tramite il menu` di navigazione del sito.
Per collegare le pagine del sito al menù di navigazione, dovete indicare il percorso di ogni pagina in ogni voce corrispondente del menù stesso.
I percorsi delle pagine e di tutti i file del sito, possono essere assoluti, o relativi.

I percorsi assoluti sono quelli indicati con l'indirizzo web completo (URL - Uniform Resource Locator). Esempio:
https://www.lachiavenelpozzo.com/pagina.html

I percorsi relativi sono quelli indicati seguendo il percorso del file all'interno del sito. Esempio:
cartella/pagina.html

Parlerò più sotto e più approfonditamente riguardo ai percorsi relativi dei file.

Se la pagina in cui dobbiamo mettere i collegamenti è la pagina index, o una pagina allo stesso livello della pagina index (cioè nella stessa carella sul desktop, o nella root del sito online), basterà scrivere il nome di ogni file, o del relativo percorso, come indicato in rosso nell'esempio sotto, ....

<div id="navigation">
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="pagina1.html">Pagina 1</a></li>
<li><a href="pagina2.html">Pagina 2</a></li>
<li><a href="pagina3.html">Pagina 3</a></li>
<li><a href="pagina4.html">Pagina 4</a></li>
</ul>
</div>

Ricordate che nel percorso dei file non vanno utilizzate lettere maiuscole e non vanno lasciati spazi vuoti, mentre nella parte testuale questo è permesso.

Per aggiungere nuove pagine, vi bastera` ripetere la stringa:
<li><a href="paginax.html">Pagina x</a></li>

Ricordate:
  • Se le pagine non fossero allo stesso livello della pagina index (che è il livello superiore), nel loro percorso dovrebbe essere indicata anche la cartella in cui si trovano. Es: nomecartella/nomepagina.html
  • Se le pagine fossero in un altro spazio web, il percorso dovrebbe essere riportato indicando l'indirizzo per esteso. Es: http://www.nomesito.com/nomepagina
  • Quando pubblicherete il sito, sempre e solo nel menù di navigazione della pagina index, il percorso della home page dovrà essere scritto per esteso (percorso assoluto), come nell'esempio sotto:
<ul>

<li><a href="https://www.nomesito.com">Home</a></li>
            <li><a href="pagina1.html">Pagina 1</a></li>
            <li><a href="pagina2.html">Pagina 2</a></li>
            <li><a href="pagina3.html">Pagina 3</a></li>

</ul>

Al posto di https://www.nomesito.com,metterete l'indirizzo del vostro sito.

Non sarebbe sbagliato mettere sempre l'indirizzo assoluto. Il motivo per cui vengono utilizzati i percorsi relativi è che restano sempre validi anche quando il sito viene trasferito su un altro dominio. Inoltre, indicando i percorsi relativi, i collegamenti interni funzionano anche se il sito si trova in una cartella sul desktop e non è stato ancora pubblicato.

Bene, quando avrete la vostra cartella con tutti i file che compongono il sito, vi basterà cliccare sul file index per aprirlo nel browser e visualizzare il sito in anteprima, spostandovi poi in ogni pagina tramite il menù di navigazione.


Il percorso dei file:

Dal menù di navigazione ci agganciamo a parlare dettagliatamente del percorso dei file o "path" in inglese.
Il percorso dei file, come già accennato, può essere assoluto, o relativo.
Si parla di percorso assoluto quando si scrive l'indirizzo per esteso del file. Es: https://www.nomesito.com/file.html
Si parla di percorso relativo, quando si scrive solo il percorso del file all'interno del sito. Può essere costituito dal semplice nome del file seguito dalla sua estensione, se entrambi i file si trovano nella root (es: file.html), o può comprendere cartella e sottocartella se il file da collegare si trova nel sito, ma non nella root (es: cartella/file.html oppure cartella/cartella/file.html ecc).

Come abbiamo detto, quindi, se il file da collegare si trova ad un livello differente da quello della pagina index (che è, per definizione, il livello superiore "root"), bisogna indicare anche cartelle e sottocartelle nel percorso, ma che succede se, al contrario, il file da collegare è nella root e il file che deve ricevere il collegamento è in un'altra posizione? O se entrambi in file non sono nella root, ma in cartelle diverse?

Per intenderci: abbiamo il file2 che si trova nella cartella2. All'interno di questo file2 dobbiamo indicare il percorso di collegamento al file1 che si trova nella root, come facciamo?

Dobbiamo indicare al browser che per raggiungere il file1 deve uscire dalla cartella in cui si trova il file2 e lo facciamo usando questo simbolo ../

Il percorso, quindi, sarà il seguente:

../file1

Se, invece, abbiamo il file3 che si trova all'interno della cartella3 che, a sua volta, si trova all'interno della cartella2 e al file3 dobbiamo sempre collegare il file1 che si trova nella root, il percorso diventa questo:

../../file1

che dice al browser che per trovare il file 1 deve uscire dalla cartella 3 e poi uscire anche dalla cartella 2.

Immaginatevi, insomma, una scatola dentro l'altra.

Se, poi, il file1 non fosse nella root, ma si trovasse, esso stesso, all'interno della cartella1, allora il percorso diventerebbe questo:

../../cartella1/file1

che dice al browser che per trovare il file1 deve uscire dalla cartella3, uscire dalla cartella2 ed entrare nella cartella1.

E così di seguito, navigando tra le cartelle e indicando, di volta in volta, il corretto percorso per ottenere i collegamenti necessari.

Ogni file verrà indicato, naturalmente, con la sua estensione (file1.html, o file1.css, o file1.js)

Il percorso relativo può essere utilizzato solo all'interno dello stesso dominio. Se il file da collegare si trova in un altro dominio, bisogna usare sempre il percorso assoluto.

NOTA: un discorso a parte va fatto nel caso in cui entrambi i file, sia quello che ospita il collegamento e sia quello da collegare, si trovino nella stessa cartella o sottocartella. In questo caso, il percorso si indica con il segno ./, vale a dire con un solo puntino prima dello slash. Questo segno, infatti, sta ad indicare che gli elementi da collegare si trovano entrambi nella stessa "directory".

Regole valide solo dopo la pubblicazione:

Dopo la pubblicazione del sito, vale a dire solo quando il sito sarà stato caricato sullo spazio hosting e sarà online, si potranno indicare i percorsi in modo differente (ma non è obbligatorio).

I percorsi assoluti potranno essere scritti anche senza protocollo, con il doppio slash iniziale, cioè in questo modo:

//www.nomesito.com

Il browser, quando il protocollo è assente, utilizza il protocollo attivo in quel momento.
L'omissione del protocollo ha una sua utilità quando, per esempio, si attiva la certificazione del sito da http a https. Non avendo il protocollo, i collegamenti saranno sempre validi prima e dopo la certificazione.

Sempre nel sito pubblicato, lo slash prima del percorso di un file indica che quel file si trova nella root del sito, vale a dire nella cartella principale. Questo semplifica le cose dovendo indicare il percorso nelle sottocartelle. Un percorso di questo tipo:

../../cartella/file.html

Diventa semplicemente:

/cartella/file.html

Il percorso scritto in questo modo funziona in qualunque cartella, o sottocartella, o sotto-sottocartella.

Dopo la pubblicazione del sito, sarà anche possibile omettere l'estensione dei file nei collegamenti interni.
Per esempio, sarà possibile scrivere: /cartella/file
invece di: /cartella/file.html
Questo rende l'indirizzo visualizzato nel browser più pulito. Per ottenere che le pagine si aprano anche omettendo l'estensione, sarà necessario aggiungere una regola particolare nel file ".htaccess".
Il file .htaccess è un file di testo (txt) che serve a comunicare con un server (come Apache) NCSA compatibile che supporta moduli mod_write. Per questo tipo di operazioni, se non avete esperienza, il consiglio è di affidarsi ai tecnici del servizio di hosting.





Fammi sapere se questo argomento ti è stato utile.
Se non ti è stato utile, potrai inviare le tue osservazioni. Grazie
Ti è stato utile questo argomento?
Si
No



Continua con....Il foglio di stile ->>

Elenco argomenti della guida:
Torna alla pagina principale:Creare un sito da zero ->>


E molto altro ancora se leggi:
Tutti gli argomenti