HTML › დამწყები › პირველი საიტი

საქაღალდეები და გზები

მარტივი⏱ 7 წთ+20 XP👑 Pro#HTML#საქაღალდეები#გზები#index.html#სახელები

რას ისწავლი

როგორ დაალაგო საიტის ფაილები საქაღალდეებად
ფაილებისა და საქაღალდეების სახელების წესები
როგორ გააკეთო ლამაზი მისამართი index.html-ით ქვესაქაღალდეში

როცა ფაილები ბევრია

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

ტექსტი

my-site/
  index.html
  css/
    style.css
  images/
    me.jpg
    chess.png
  hobby/
    index.html
    drawing.html
    chess.html

css/: სტილის ფაილები. შემდეგ თავში პირველს დაამატებ.
images/: ყველა სურათი.
hobby/: ერთ თემასთან დაკავშირებული გვერდები ერთად.

სახელების წესები

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

პატარა ლათინური ასოები. chess.html და არა Chess.HTML ან ჭადრაკი.html. ქართული ასოები მისამართში უცნაურ კოდებად იქცევა, მაგალითად %E1%83%AD....
ინტერვალების გარეშე. ინტერვალი მისამართში %20 ხდება. სიტყვების გამოსაყოფად ტირე გამოიყენე: my-drawings.html.
მოკლე და გასაგები. chess.html ჯობს page3.html-ს.
სერვერზე ასოების ზომა მნიშვნელოვანია. Windows-ში Me.JPG და me.jpg ერთი ფაილია, საიტის სერვერებზე კი ხშირად ორი სხვადასხვა. თუ ყველაფერი პატარა ასოებითაა, ეს პრობლემა არასოდეს შეგხვდება.

გზები საქაღალდეებს შორის

ბმულების მოდულში ნასწავლი წესები აქ ყოველდღიურად დაგჭირდება. ფაილიდან hobby/chess.html:

სად მინდა	href ან src
იმავე საქაღალდის drawing.html	`drawing.html`
მთავარი გვერდი	`../index.html`
სურათი chess.png	`../images/chess.png`
CSS ფაილი	`../css/style.css`

../ ერთი საქაღალდით ზემოთ ადის. ბევრი დამწყების სურათი იმიტომ „ქრება“, რომ გვერდი ქვესაქაღალდეში გადაიტანეს და ../ დაავიწყდათ.

index.html ქვესაქაღალდეში

როცა სერვერი საქაღალდის მისამართს იღებს, მაგალითად /hobby/, ის მასში index.html-ს ეძებს და აჩვენებს. ამიტომ ფაილი hobby/index.html ხელმისაწვდომია ლამაზი მისამართით: example.com/hobby/, .html-ის გარეშე. ბევრი საიტი ასე აწყობს ყველა გვერდს: ყოველი გვერდი თავის საქაღალდეშია, index.html-ის სახელით. ამ სკოლის მისამართებიც, მაგალითად /learn/html/links/anchor-tag/, ზუსტად ასეა აგებული.

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

სცადე თავად

ეს რედაქტორი შენს საქაღალდეებს ვერ ხედავს, ამიტომ აქ სურათი ../images/me.jpg არ გამოჩნდება: ეს მოსალოდნელია. ბიტის სურათი კი, რომელიც ამ საიტის ძირშია, ჩანს. ნახე კოდი და წარმოიდგინე, რომ ის ფაილია hobby/chess.html.

HTML · სცადე თავად

ხშირი შეცდომები

ინტერვალები და დიდი ასოები სახელებში. My Photo.JPG გამოქვეყნების შემდეგ ხშირად ქრება.
../-ის დავიწყება ქვესაქაღალდიდან. ქვესაქაღალდის გვერდიდან ზედა საქაღალდის ფაილებამდე ../ გჭირდება.
ყველა ფაილი ერთ საქაღალდეში. საიტის ზრდასთან ერთად ქაოსი ჩნდება. სურათები და სტილები ცალკე.

სავარჯიშო

საიტს აქვს სტრუქტურა: index.html, images/logo.png, games/index.html, games/chess.html. დაწერე games/chess.html-ისთვის: ბმული მთავარ გვერდზე, ბმული თამაშების გვერდზე (games/index.html) და ლოგოს სურათი.

HTML · სცადე თავად

💡 მინიშნება

games/index.html იმავე საქაღალდეშია, ამიტომ index.html. მთავარი და ლოგო ერთი საქაღალდით ზემოთაა: ../.

✅ ამოხსნის ნახვა

HTML

<nav>
  <a href="../index.html">მთავარი</a> ·
  <a href="index.html">ყველა თამაში</a>
</nav>
<img src="../images/logo.png" alt="საიტის ლოგო" width="80" height="80">
<h1>ჭადრაკი</h1>

მინი-ქვიზი

1რომელი ფაილის სახელია საუკეთესო?

2ფაილიდან blog/post.html როგორ მიუთითო სურათი images/cat.jpg?

3რას აჩვენებს სერვერი მისამართზე /hobby/?

შეჯამება

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

📝 ჩემი შენიშვნა