Learn web development

Gestire i file

Questa traduzione è incompleta. Collabora alla traduzione di questo articolo dall’originale in lingua inglese.

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 in una struttura nel tuo computer, facendo si che essi possano parlare tra di loro, e permettendo a tutti i contenuti di puntare al giusto file, prima di (eventualmente) caricarli su un server. Questa pagina discute di alcune problematiche alle quali dovresti essere al corrente cosicchè tu possa impostare una corretta struttura di file per il tuo sito web.

Dove dovresti creare il tuo sito web all'interno del tuo computer?

Quando stai lavorando ad 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.

  1. Seleziona un posto dove archiviare i tuoi progetti web. Qui, crea una nuova cartella chiamata progetti-web (o qualcosa di simile). Qui è dove il tuo intero sito web vivrà.
  2. 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).

An aside on casing and spacing

Forse hai notato, che chiamamo le cartella e i file completamente in minuscolo senza spazi. Questo perchè:

  1. Tanti computer, particolarmente i server web, tengono conto del minuscolo o maiuscolo. Infatti per esempio, se crei un immagine MyImage.jpg nella cartella test-site, e provi ad aprire l'immagine come myimage.jpg, potrebbe non funzionare.
  2. Browsers, server web, e linguaggi di programmazione non gesticano li spazi tutti allo stesso modo. Per esempio, se usi li spazi nel nome del file, alcuni sistemi lo trattano come se fossero due nomi. Alcuni servers rinpiazzono lo spazio con "%20" (il codice carattere che viene usato al posto degli  spazi nei URL), rendendo impossibile aprire  tutti i tuoi link. È  meglio separare con dei trattini che con delle sottolineature: my-file.html vs. my_file.html.

In ogni caso dovresti usare il trattino per separare le parole. Google tratta i trattini come separatore delle parole, ma non tratta le sottilineature allo stesso modo. Per questi motivi, è buono iniziare ad avere l'abitunidine di 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, foglie di stile e file di script. Vediamola insieme:

  1. 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 chiamato index.html e salvalo nella cartella test-site.
  2. cartella images: Questa cartella racchiude tutte le immagini che usi nel tuo sito. Crea una subcartella chiamata images, nella cartella test-site.
  3. 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 subcartella chiamata  styles, nella cartella test-site.
  4.  cartella scripts: Questa cartella racchiude tutto il codice JavaScript usato per aggiungere funzioni interattive al tuo sito (per. es. buttoni che caricano dei dati quando vengono cliccati ). Crea una subcartella chiamata scripts, nella cartella test-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!

File paths

To make files talk to one another, you have to provide a file path between them — basically a route so one file knows where another one is. To demonstrate this, we will insert a little bit of HTML into our index.html file, and make it display the image you chose in the article "What will your website look like?"

  1. Copy the image you chose earlier into your images folder.
  2. Open up your index.html file, and insert the following code into the file exactly as shown. Don't worry about what it all means for now — we'll look at the structures in more detail later in the series. 
    <!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>My test page</title>
  </head>
  <body>
    <img src="" alt="My test image">
  </body>
</html>
  3. The line <img src="" alt="My test image"> is the HTML code that inserts an image into the page. We need to tell the HTML where the image is. The image is inside the images directory, which is in the same directory as index.html. To walk down the file structure from index.html to our image, the file path we'd need is images/your-image-filename. For example, our image is called firefox-icon.png, so the file path is images/firefox-icon.png.
  4. Insert the file path into your HTML code between the double quote marks of the src="" code.
  5. Save your HTML file, then load it in your web browser (double-click the file). You should see your new webpage displaying your image!

A screenshot of our basic website showing just the firefox logo - a flaming fox wrapping the world

Some general rules for file paths:

  • To link to a target file in the same directory as the invoking HTML file, just use the filename, e.g. my-image.jpg.
  • To reference a file in a subdirectory, write the directory name in front of the path, plus a forward slash, e.g. subdirectory/my-image.jpg.
  • To link to a target file in the directory above the invoking HTML file, write two dots. So for example, if index.html was inside a subfolder of test-site and my-image.jpg was inside test-site, you could reference my-image.jpg from index.html using ../my-image.jpg.
  • You can combine these as much as you like, for example ../subdirectory/another-subdirectory/my-image.jpg.

For now, this is about all you need to know.

Note: The Windows file system tends to use backslashes, not forward slashes, e.g. C:\windows. This doesn't matter in HTML — even if you are developing your website on Windows, you should still use forward slashes in your code.

What else should be done?

That is about it for now. Your folder structure should look something like this:

A file structure in mac os x finder, showing an images folder with an image in, empty scripts and styles folders, and an index.html file

 

Tag del documento e collaboratori

 Hanno collaborato alla realizzazione di questa pagina: DaniPani, cubark
 Ultima modifica di: DaniPani,