Un site web este alcătuit din mai multe fișiere: conținut sub formă de text, cod, foi de stil, conținut media, etc. Atunci când construiești un site web, trebuie să asamblezi aceste fișiere într-o structură rațională, pe calculatorul tău local, să te asiguri că acestea pot comunica între ele și conținutul tău arată bine, înainte de a încărca pe un server. În Gestionarea fișierelor se discută anumite probleme pe care ar trebui să le cunoști astfel încât să poți crea o structură de fișiere pentru siteul tău.

Unde ar trebui să fie siteul tău pe calculatorul tău?

Când lucrezi la un site local pe calculatorul tău, ar trebui să păstrezi toate fișierele asociate într-un singur director care reflectă structura de fișiere a siteului publicat pe server. Acest director poate exista oriunde dorești, dar ar trebui să-l pui undeva unde îl poți găsi cu ușurință, poate pe Desktop, în directorul Home, sau în rădăcina unității hard discului.

  1. Alege un loc pentru a stoca proiectele siteului tău. Aici, creează un director nou numit proiecte-web (sau similar). Aici vei găsi toate proiectele tale web. 
  2. În interiorul acestui prim director, creează un alt director pentru a stoca primul tău site web. Numește-l site-test (sau ceva mai inventiv).

O paranteză despre casing și spațierea

Vei observa că pe parcursul acestui articol, te rugăm să numești directoarele și fișierele folosind litere mici, fără spații. Asta pentru că:

  1. Multe calculatoare, în special serverele web, sunt case-sensitive. De exemplu, dacă pui o imagine pe siteul tău la site-test/ImagineaMea.jpg, și apoi într-un alt fișier încerci să invoci imaginea ca site-test/imagineamea.jpg, este posibil să nu funcționeze.
  2. Browserele, serverele web și limbajele de programare nu manipulează în mod consistent spațiile. De exemplu, dacă folosești spații în numele fișierului, unele sisteme pot trata numele fișierului ca două nume de fișiere. Unele servere vor înlocui spațiile din numele fișierelor cu „%20” (codul de caractere pentru spațiile din URI), rupând toate linkurile tale. Este mai bine să separi cuvinele cu cratime, decât cu underscore: fișierul-meu.html vs. fișierul_meu.html.

Răspunsul scurt este că ar trebui să utilizezi o cratimă pentru numele fișierelor tale. Google tratează cratima ca un separator de cuvinte, dar nu tratează caracterul underscore în acest fel. Din acest motiv este bine să te obișnuiești să numești directoarele și fișierele folosind litere mici, fără spații și cuvintele să fie separate prin cratimă, cel puțin până când știi ceea ce faci. În felul acesta vei avea mai puține probleme.

Ce structură ar trebui să aibă siteul tău?

În continuare, să ne uităm la ce structură trebuie să aibă siteul nostru de test. Cele mai comune lucruri pe care le vom avea la orice proiect web pe care îl creăm sunt un fișier index HTML și directoare care conțin imagini, fișiere de stil și fișiere script. Să le creăm acum:

  1. index.html: Acest fișier va conține, în general, conținutul paginii tale de pornire, adică textul și imaginile pe care le văd utilizatorii atunci când accesează pentru prima dată siteul tău. Utilizând editorul tău de text, creează un nou fișier numit index.html și salvează-l în interiorul directorului tău site-test.
  2. directorul images: Acest director va conține toate imaginile pe care le vei utiliza pe siteul tău. Creează un director images, în interiorul directorului site-test.
  3. directorul styles: Acest director va conține codul CSS utilizat pentru a stiliza conținutul tău (de exemplu, setarea textului și culorilor de fundal). Creează un director styles, în interiorul directorului site-test.
  4. directorul scripts: Acest director va conține codul JavaScript utilizat pentru a adăuga funcționalități interactive siteului tău (de ex. butoane care atunci când sunt apăsate încarcă date). Creează un director scripts, în interiorul directorului site-test.

Notă: Pe calculatoarele cu Windows este posibil să întâmpini dificultăți în a vedea numele fișierelor, deoarece Windows are o opțiune numită  Se ascund extensiile pentru tipurile de fișiere cunoscute care este activată în mod implicit. În general, poți dezactiva această opțiune accesând Windows Explorer, selectează Opțiuni folder și căutare, clic pe fila Vizualizare și debifează caseta de selectare Se ascund extensiile pentru tipurile de fișiere cunoscute, apoi clic pe OK. Pentru informații mai specifice care acoperă versiunea ta de Windows, efectuează o căutare pe web!

Căile fișierelor

Pentru ca fișierele să comunice între ele, trebuie să furnizezi o cale de fișier între ele — practic o cale astfel încât un fișier să știe unde este alt fișier. Pentru a demonstra acest lucru, vom adăuga puțin cod HTML în fișierul nostru index.html, și să-l facem să afișeze imaginea pe care am ales-o în articolul „Cum va arăta siteul tău?

  1. Copiază imaginea pe care ai ales-o mai devreme în directorul images.
  2. Deschide fișierul index.html și adaugă codul de mai jos în fișier, exact așa cum este prezentat. Nu-ți face griji de tot ceea ce înseamnă pentru moment — vom analiza structurile în detaliu mai târziu în cadrul acestor serii.
    <!DOCTYPE html>
    <html>
      <head>
        <meta charset="utf-8">
        <title>Pagina mea test</title>
      </head>
      <body>
        <img src="" alt="Imaginea mea test">
      </body>
    </html>
  3. Linia <img src="" alt="Imaginea mea test"> este codul HTML care introduce o imagine în pagină. Avem nevoie să spunem unde se află imaginea. Imaginea se află în interiorul directorului images, care se află în același director ca și index.html. Pentru a parcurge structura de fișiere de la index.html la imaginea noastră, calea fișierului de care avem nevoie este images/fișierul-tău-de-imagine. De exemplu, imaginea noastră este numită  firefox-icon.png, și calea fișierul este images/firefox-icon.png.
  4. Adaugă calea fișierului în codul tău HTML, între ghilimelele duble ale atributului src="".
  5. Salvează fișierul tău HTML, apoi încarcă-l în browserul tău web (dublu-clic pe fișier). Ar trebui să vezi noua pagină web care afisează imaginea!

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

Câteva reguli generale pentru căile fișierelor:

  • Pentru crearea unei legături la un fișier țintă din același director ca fișierul HTML invocat, folosește doar numele fișierului, de ex.  imaginea-mea.jpg.
  • Pentru a face referire la un fișier dintr-un subdirector, scrie numele directorului în fața căii, plus un slash înainte, de ex. subdirectoriu/imaginea-mea.jpg.
  • Pentru crearea unei legături la un fișier țintă din directorul de deasupra fișierului HTML invocat, scrie două puncte. De exemplu, dacă index.html se află în interiorul unui subdirectoriu al lui site-test și imaginea-mea.jpg se află în interiorul site-test, ai putea face referire la imaginea-mea.jpg din index.html folosind ../imaginea-mea.jpg.
  • Poți să le combini cât de mult dorești, de exemplu../subdirectoriu/alt-subdirectoriu/imaginea-mea.jpg.

Deocamdată, doar atât este nevoie să cunoști.

Notă: Sistemul de fișiere Windows tinde să utilizeze backslash, și nu forward slash, de ex. C:\windows. Acest lucru nu contează în HTML — chiar dacă îți dezvolți siteul pe Windows, ar trebui să utilizezi forward slashes în codul tău.

Ce altceva ar mai trebui făcut?

Momentan doar atât. Structura directorului tău ar trebui să arate astfel:

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

Document Tags and Contributors

 Contributors to this page: alexandracaulea
 Last updated by: alexandracaulea,