Questa pagina è parte della guida Come creare un sito da zero

La home page

La prima pagina del sito che dovete creare è la home page.
La home page, di solito, corrisponde alla pagina index che si trova nella "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 root indica il punto iniziale del file system, vale a dire la directory più alta del server Web da cui vengono serviti i file.

La pagina index è 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.

Ogni sito deve, obbligatoriamente, avere la sua pagina index.
Se volete che la home page abbia questa caratteristica, dovete chiamarla, quindi, index.html e posizionarla nella root del vostro sito.

Le altre pagine

Fatta la home page, nella stessa cartella, potete creare tutte le successive pagine che desiderate, rinominandole come credete con estensione .html.

Ricordatevi di nominare i file usando, sempre, lettere minuscole e senza lasciare spazi tra le parole.

Le sottopagine

Le sottopagine sono pagine secondarie ad una pagina principale. Le sottopagine si mettono, di solito, in una cartella con un titolo che richiami quello della pagina principale, per un discorso di chiarezza e per dare una corretta indicazione ai motori di ricerca e favorire l'indicizzazione. Per esempio, se la pagina principale si chiama "pippo.html", la cartella corrispondente potrebbe chiamarsi "pippo-folder", o come preferite. In questo modo,il percorso di una sottopagina sarà del tipo:

pippo-folder/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 menù 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 e le pagine da collegare, sono pagine principali e si trovano tutte nella root, basterà scrivere il nome di ogni file, o del relativo percorso, come indicato in rosso nell'esempio sotto:
Nota: in questo caso, il menù è in forma di elenco ul li (per gli elenchi leggi Scrivere in HTML), ma non è obbligatorio utilizzare questo tipo di disposizione.


Ricordate che nel percorso dei file non vanno utilizzate lettere maiuscole e non vanno lasciati spazi vuoti, mentre nella parte testuale, che corrisponderà al titolo visibile, potete scrivere il testo che credete, rispettando la sintassi html.

Per aggiungere nuove pagine, vi basterà ripetere la stringa:

Ricordate:

• Se le pagine non sono pagine principali e non si trovano nella root (livello superiore), nel loro percorso deve essere indicata anche la cartella in cui si trovano. Es: nomecartella/nomepagina.html
• Se le pagine si trovano in un altro dominio, il percorso deve essere riportato indicando l'indirizzo per esteso. Es: http://www.nomesito.com/nomepagina
• Nel menù di navigazione della pagina index, è consigliato scrivere il percorso della home page per esteso (percorso assoluto), come nell'esempio sotto:

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

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 è ancora online.

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 (Hypertext Access) è un file di configurazione tramite il quale è possibile modificare le impostazioni di una directory specifica e delle sue subdirectory. Viene utilizzato per comunicare con server NCSA compatibili che supportano moduli mod_write (come Apache). Per questo tipo di operazioni, se non avete esperienza, il consiglio è di affidarsi ai tecnici del servizio di hosting.

Leggi anche la sezione dedicata ai link nella guida I contenuti del sito

Nella sezione "Risorse per i webmaster" -> Layout HTML5 di base, puoi trovare un esempio di file .htacces da scaricare.

Nella sezione "Risorse per i webmaster", puoi trovare moltissime soluzioni e risorse da scaricare.

Torna alla pagina principale:Creare un sito da zero ->>