საიტი შედგება ბევრი ფაილისგან: ტექსტური შიგთავსი, კოდი, სტილის ცხრილები, ხმოვანი ან ვიდეოფაილები და ა.შ. როცა ქმნით ვებსაიტს, გესაჭიროებათ ამ ფაილების მოგროვება და გონივრულად დალაგება კომპიუტერში ისე, რომ შეიძლებოდეს მათი ურთიერთდაკავშირება და ყველაფერი იყოს სათანადოდ მომზადებული, სერვერზე ატვირთვამდე. ფაილების განთავსება განიხილავს რამდენიმე საყურადღებო საკითხს, რომელიც გამოგადგებათ საიტის ფაილების განლაგების მართებულად აგებაში.

სად უნდა იყოს განთავსებული საიტი კომპიუტერში?

როცა საიტზე მუშაობთ ადგილობრივად თქვენს კომპიუტერში, მასთან დაკავშირებული ყველა ფაილი უნდა განათავსოთ ერთ საქაღალდესა და მის ქვესაქაღალდეებში ზუსტად იმგვარად, როგორც სერვერზე გამოქვეყნებული საიტის ფაილებია განთავსებული. თავად ეს საქაღალდე ნებისმიერ ადგილას შეიძლება მოათავსოთ, თუმცა სასურველია რომ ადვილად შეგეძლოთ მისი პოვნა, მაგალითად სამუშაო ეკრანზე, მომხმარებლის მთავარ საქაღალდეში ან მეხსიერების ძირეულ საქაღალდეში.

  1. აირჩიეთ თქვენი საიტებისთვის ნებისმიერი ადგილი. შერჩეულ ადგილას, შექმენით საქაღალდე დასახელებით web-projects (ან რამე მსგავსი). ეს იქნება ადგილი, სადაც ყველა თქვენი საიტი იქნება განთავსებული.
  2. ამ საქაღალდის შიგნით, შექმენით სხვა საქაღალდე თქვენი პირველი საიტის მოსათავსებლად. დაარქვით test-site (ან რამე უკეთ მოფიქრებული).

დიდი ასონიშნები და ადგილების გამოტოვება

ალბათ შეამჩნევდით, რომ ყველგან ამ სტატიაში, სახელის დარქმევისას მიგითითებთ პატარა ასონიშნებს გამოტოვებული ადგილების გარეშე. ეს იმიტომ, რომ:

  1. ბევრი კომპიუტერი, განსაკუთრებით კი ვებსერვერები, განსხვავებულად აღიქვამს დიდ და პატარა ასონიშნებს. ასე რომ, მაგალითად თუ სურათს განათავსებთ საიტზე test-site/MyImage.jpg მდებარეობით და შემდეგ შეეცდებით გამოიძახოთ სურათი მისამართით test-site/myimage.jpg, შეიძლება არ იმუშაოს.
  2. ბრაუზერები, ვებსერვერები და დაპროგრამების ენები, გამოტოვებულ ადგილებს არ ამუშავებს ერთნაირად. მაგალითად, თუ გამოტოვებთ ადგილებს ფაილის სახელის წერისას, ზოგიერთმა სისტემამ შეიძლება მიიჩნიოს, რომ ორი ფაილის დასახელება დაწერეთ. ზოგი სერვერი კი მაგ სივრცეებს შეცვლის საგანგებო ნიშნებით „%20“ (კოდი, რომლითაც აღინიშნება გამოტოვებული ადგილები საიტების URI-მისამართებში), შედეგად კი აღარცერთი თქვენი ბმული არ იმუშავებს გამართულად. შესაბამისად, სასურველია, რომ სიტყვები გამოყოთ ერთმანეთისგან დეფისებით, ან ქვედა ტირეებით: my-file.html vs. my_file.html.

უფრო მოკლედ რომ ვთქვათ, უმჯობესია დეფისის გამოყენება ფაილის დასახელებაში. საძიებოები, მათ შორის Google, დეფისებს აღიქვამს სიტყვების მაცალკევებლად, თუმცა ამგვარად არ განიხილავს ქვედა ტირეებს. სწორედ ამ მიზეზების გამო, საჭიროა ჩვევად გამოიმუშავოთ საქაღალდეებსა და ფაილის დასახელებებში პატარა ასონიშნებისა და დეფისების გამოყენება, გამოტოვებული ადგილების გარეშე, ყოველშემთხვევაში იქამდე მაინც, სანამ ზუსტად გაარკვევთ, რა როგორ მუშაობს. ამ გზით, ბევრ დაბრკოლებასა და სიძნელეს აიცილებთ თავიდან, საქმის კეთებისას.

როგორ უნდა განლაგდეს საიტის ფაილები?

ახლა კი ვნახოთ როგორი განლაგება ესაჭიროება საიტს. ყველაზე გავრცელებული ფაილები, რომელთაგანაც საიტი შედგება არის index.HTML და ცალკე საქაღალდეები სურათებისთვის, სტილისა და სკრიპტის ფაილებისთვის. მოდი დავიწყოთ მათი შექმნა:

  1. index.html: ეს ფაილი ჩვეულებრივ, შეიცავს საწყისი გვერდის შიგთავსს, ანუ ტექსტს და სურათებს, რომელთაც თქვენს საიტზე შემოსული ხალხი პირველად იხილავს. თქვენი ტექსტური რედაქტორით, შექმენით ფაილი დასახელებით index.html და შეინახეთ თქვენს test-site-საქაღალდეში.
  2. images-საქაღალდე: აღნიშნული საქაღალდე შეიცავს სურათებს, რომელთაც იყენებს თქვენი საიტი. შექმენით და დაარქვით images, თქვენი test-site-საქაღალდის შიგნით.
  3. styles-საქაღალდე: იგი შეიცავს CSS-კოდს, რომელიც შიგთავსის გასაფორმებლად (მაგალითად ტექსტისა და ფონის ფერის შესაცვლელად) გამოიყენება. შექმენით საქაღალდე დასახელებით styles, აგრეთვე თქვენი test-site-საქაღალდის ქვეშ.
  4. scripts-საქაღალდე: აქ განთავსებულია JavaScript-კოდი, რომელიც საიტზე მომხმარებლის ჩართულობისა და სხვადასხვა შესაძლებლობის დამატებისთვისაა (მაგ. ღილაკების, რომელზე დაჭერის დროსაც რაღაც მონაცემები გამოჩნდება). შექმენით საქაღალდე scripts სახელით, და შეინახეთ თქვენს test-site-საქაღალდეში.

გაითვალისწინეთ: Windows-ის სისტემაზე, შესაძლოა სათანადოდ არ გამოჩნდეს ფაილის დასახელებები, ვინაიდან პარამეტრი სახელწოდებით Hide extensions for known file types (ფაილების ცნობილი გაფართოებების დამალვა) ჩართულია ხოლმე ნაგულისხმევად. მისი გამორთვა ჩვეულებრივ, შესაძლებელია Windows Explorer-ის გახსნით და Folder options... პარამეტრებზე გადასვლით, სადაც უნდა მოიხსნას მონიშვნა Hide extensions for known file types უჯრაზე, შემდეგ კი დასადასტურებლად OK. უფრო დაწვრილებით, Windows-ის ცალკეულ ვერსიასთან დაკავშირებით, შეგიძლიათ მოიძიოთ ვებსივრცეში. 

ფაილების მდებარეობა

იმისთვის, რომ ფაილებს შეეძლოს ერთმანეთთან წვდომა, უნდა მიუთითოთ მდებარეობა — ჩვეულებრივ, მისამართი, რომ ერთმა მეორის ადგილი იცოდეს. უკეთ საჩვენებლად, ჩასვით მცირე HTML-კოდი თქვენს index.html-ფაილში და გამოაჩინეთ სურათი, რომელიც შერჩეული გაქვთ სტატიიდან „როგორ უნდა გამოიყურებოდეს თქვენი ვებსაიტი?“

  1. არჩეული სურათის ასლი გადმოიტანეთ images-საქაღალდეში.
  2. გახსენით თქვენი index.html-ფაილი და ჩასვით შემდეგი კოდი, ზუსტად ისევე, როგორც მოცემულია. ნუ იღელვებთ, თუ ვერ იგებთ მის შინაარსს — ჩვენ უბრალოდ ვცდილობთ ფაილების განლაგების შესწავლას, კოდის შესახებ კი დაწვრილებით სხვა სტატიებში იხილავთ. .
    <!DOCTYPE html>
    <html>
      <head>
        <meta charset="utf-8">
        <title>My test page</title>
      </head>
      <body>
        <img src="" alt="My test image">
      </body>
    </html> 
  3. მოცემული ხაზი <img src="" alt="My test image"> წარმოადგენს HTML-კოდს, რომლითაც სურათი ჩაისმება გვერდზე. ჩვენ გვესაჭიროება გავაგებინოთ HTML-ს, სად მდებარეობს ეს სურათი. სურათი არის images-საქაღალდეში, რომელიც თავის მხრივ მდებარეობს იმავე საქაღალდეში, სადაც ჩვენი index.html. შესაბამისად, ფაილების განლაგებაში გადასასვლელად index.html-იდან სურათზე წვდომისთვის, ფაილის მდებარეობად უნდა მიეთითოს images/your-image-filename. მაგალითში, ჩვენი სურათის დასახელებაა firefox-icon.png, ასე რომ ფაილის მისამართი იქნება images/firefox-icon.png.
  4. ჩასვით ეს მდებაორება თქვენს HTML-ში, ორმაგ ბრჭყალებს შორის src=""-კოდში.
  5. შეინახეთ HTML-ფაილი და შემდეგ ჩატვირთეთ თქვენს ბრაუზერში (ფაილზე ორი დაწკაპებით). წესით უნდა გამოჩნდეს თქვენს ახალ ვებგვერდზე სასურველი სურათი! 

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

რამდენიმე ზოგადი წესი, ფაილის მდებარეობასთან დაკავშირებით:

  • თუ სასურველი ფაილი იმავე საქაღალდეშია სადაც HTML-ფაილი, წვდომისთვის უბრალოდ სახელის მითითებაა საჭირო, მაგ. my-image.jpg.
  • თუ ფაილი ქვესაქაღალდეშია განთავსებული, დასაკავშირებლად ჯერ უნდა დაიწეროს ქვესაქაღლდის სახელი, რომელსაც მოყვება წინ გადახრილი ხაზი და ფაილის სახელი, მაგ. subdirectory/my-image.jpg.
  • თუ სასურველი ფაილი არის ზედა დონის საქაღალდეში, HTML-ფაილთან მიმართებით, მაშინ წინ უნდა დაიწეროს ორი ცალი წერტილი. მაგალითად, თუ index.html არის test-site-ის ქვესაქაღალდეში, ხოლო my-image.jpg არის პირდაპირ test-site-საქაღალდეში, მაშინ my-image.jpg-სურათთან კავშირისთვის index.html-იდან, საჭიროა დაიწეროს ../my-image.jpg.
  • საჭიროების შემთხვევაში, შესაძლებელია ყველა ზემოთ აღნიშნულის ერთდროულად გამოყენება, მაგალითად ../subdirectory/another-subdirectory/my-image.jpg.

ჯერჯერობით სულ ესაა, რაც უნდა გცოდნოდათ.

შენიშვნა: Windows-ის საფაილო სისტემა, იყენებს უკან გადახრილ ხაზებს, წინ გადახრილის ნაცვლად, მაგ. C:\windows. ამას მნიშვნელობა არ აქვს HTML-ისთვის — თუ საიტს ქმნით Windows-ის მეშვეობით, მაინც უნდა გამოიყენოთ წინ გადახრილი ხაზები, თქვენს კოდში.

კიდევ რისი გაკეთებაა საჭირო?

ამ დროისთვის, მეტი არაფრის. თქვენი საქაღალდეების განლაგება შემდეგნაირად უნდა გამოიყურებოდეს:

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

 

მოცემულ მოდულში

 

დოკუმენტების ჭდეები და წვლილის შემტანები

ამ გვერდის შექმნაში, წვლილის შემტანები: G12r
ბოლო განახლების ავტორი: G12r,