Un sito web è composto da molti file: contenuti testuali, codice, fogli di stile, contenuti multimediali e molto altro. Quando crei un sito web, devi assemblare questi files nel tuo computer in maniera strutturata, facendo si che essi possano dialogare tra di loro e facendo in modo che tutto il contenuto appaia correttamente, prima di (eventualmente) caricarli su un server. Questa pagina esamina alcune problematiche che dovresti conoscere, così da saper impostare una struttura corretta dei files necessari al tuo sito web.
Dove andrebbe collocato il tuo sito web all'interno del tuo computer?
Quando stai lavorando a un sito web localmente sul tuo computer, dovresti tenere tutti i file in una singola cartella che rispecchi la struttura di file all'interno del tuo server. Questa cartella può essere creata ovunque tu voglia, ma dovresti posizionarla in una directory dove tu possa facilmente trovarla, magari sul tuo Desktop, nella tua cartella di Home, o nella root del tuo hard drive.
- Seleziona un posto dove archiviare i tuoi progetti web. Qui, crea una nuova cartella chiamata
progetti-web(o qualcosa di simile). Ecco dove vivrà il tuo intero sito web. - Dentro questa prima cartella, crea un'altra cartella per archiviare al suo interno il tuo primo sito web. Chiamala
sito-test(o qualcosa di più fantasioso).
Un chiarimento riguardo gli spazi e la distinzione tra maiuscole e minuscole
Forse hai notato che, nel corso di questo articolo, i nomi delle cartelle e dei file sono sempre in minuscolo e senza spazi. Questo perchè:
- Tanti computer, particolarmente i server web, fanno una distinzione tra lettere maiuscole e minuscole. Ad esempio: se crei un'immagine nella cartella
test-sitee le assegni il nomeMyImage.jpg, ma successivamente provi ad aprirla usandomyimage.jpg, potrebbe non funzionare. - Browsers, server web e linguaggi di programmazione non gestiscono gli spazi tutti allo stesso modo. Per esempio, se usi gli spazi nella denominazione di un file, alcuni sistemi li tratteranno come se fossero più nomi. Alcuni server sostituiscono lo spazio con "%20" (il codice carattere che viene usato al posto degli spazi nei URL), rendendo impossibile aprire tutti i tuoi link. È meglio quindi separare con dei trattini o con delle sottolineature, ad esempio:
my-file.htmlomy_file.html.
In ogni caso dovresti usare il trattino per separare le parole. Google considera i trattini come separatori delle parole, ma non tratta le sottilineature allo stesso modo. Per queste ragioni è buona abitudine scrivere il nome dei file e delle cartelle in minuscolo senza spazi e separando le parole con trattini, almeno fino a quando sai cosa stai facendo. In questo modo non cadrai in errori comuni nel futuro.
Quale struttura dovrebbe avere il tuo sito?
La struttura più utilizzata in qualsiasi progetto è un file HTML, che funge da homepage, e delle cartelle per contenere immagini, fogli di stile e file di script. Vediamola insieme:
index.html: Questo file racchiude generalmente il contenuto della tua homepage, cioè il testo e le immagini che le persone vedono quando accedono per la prima volta al tuo sito. Usando il tuo text editor, crea un nuovo file chiamatoindex.htmle salvalo nella cartellatest-site.- cartella
images: Questa cartella racchiude tutte le immagini che usi nel tuo sito. Crea una sottocartella chiamataimages, nella cartellatest-site. - cartella
styles: Questa cartella racchiude il codice CSS usato per creare il contenuto grafico (per esempio, quale font usare, quali colori usare come sfondo). Crea una sottocartella chiamatastyles, nella cartellatest-site. - cartella
scripts: Questa cartella racchiude tutto il codice JavaScript usato per aggiungere funzioni interattive al tuo sito (per. es. tasti che caricano dei dati quando vengono cliccati ). Crea una sottocartella chiamatascripts, nella cartellatest-site.
Nota: Su Windows, potresti avere problemi a vedere l'estensione dei file, perchè Windows ha un opzione chiamata Nascondi estensioni per tipi di file conosciuti attivata per default. Normalmente puoi disattivarla in Windows Explorer, selezionando Opzioni cartella... , deselezionare Nascondi estensioni per tipi di file conosciuti, poi cliccando OK. Per avere più informazioni sulla tua versione di Windows, fai una ricerca su internet!
Percorsi dei file
Per permettere ad un file di trovarne un altro, dovremo indicare un percorso tra di loro - in pratica creare un itinerario, così che un file possa sapere dov'è l'altro. Per dimostrare ciò, inseriremo un po' di codice HTML nel nostro file index.html, rendendo così possibile mostrare l'immagine scelta nell'articolo "Come dovrebbe apparire il tuo sito web?"
- Copia l'immagine scelta in precedenza nella cartella
images. - Apri il file
index.html, e inserisci il codice che segue, così come lo vedi scritto. Non preoccuparti del suo significato per ora - approfondiremo i dettagli più avanti.<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>La mia pagina di prova</title> </head> <body> <img src="" alt="La mia immagine di prova"> </body> </html> - La riga
<img src="" alt="My test image">è il codice HTML che si occupa di mostrare l'immagine nella pagina. Dobbiamo indicare nell'HTML dove trovare l'immagine: essa si trova all'interno della directory images, che a sua volta è nella directory comune aindex.html. Scorrendo lo schema strutturale daindex.htmlalla nostra immagine, il percorso che dovremmo avere è:images/your-image-filename. Se ad esempio, la mia immagine si chiamafirefox-icon.png, allora il percorso corretto saràimages/firefox-icon.png. - Scrivi l'indirizzo del file nel codice HTML, tra le virgolette di
src="". - Salva il tuo file HTML, ed aprilo con il browser web (puoi farlo velocemente con un doppio click). Dovresti vedere l'immagine nella tua pagina web appena creata.
Alcune regole generali per i percorsi dei file:
- Per indicare che il file è nella stessa cartella / directory del file HTML richiesto, puoi semplicemente usare il nome del file, ad esempio:
my-image.jpg. - Per riferirti ad un file in una sotto cartella / directory, scrivi il nome della directory prima del nome del file e separali con un forward slash (/), ad esempio
subdirectory/my-image.jpg. - Per usare un file che si trova in una cartella / directory al di fuori di quella dove risiede il file HTML richiesto, si possono usare due punti (
..). Ad esempio seindex.htmlsi trova in una sotto cartella / directory ditest-siteemy-image.jpgè all'interno ditest-site,my-image.jpgpuò essere richiamato daindex.htmlusando../my-image.jpg. - Queste notazioni, possono essere combinate come si preferisce, ad esempio
../subdirectory/another-subdirectory/my-image.jpg.
For now, this is about all you need to know.
Nota: Il file system di Windows, usa i backslash, non i forward slash, esempio: C:\windows. Questo nel codice HTML non conta — anche se stai sviluppando il tuo sito web su Windows, è obbligatorio usare i forward slash nel codice.
Cos'altro dovrei fare?
Per ora è tutto. L'albero della tua cartella / directory, dovrebbe essere simile a questo:
