რამდენიმე გვერდის დაკავშირება

რას ისწავლი

• როგორ ააწყო საიტი რამდენიმე HTML ფაილისგან
• რატომ უნდა იყოს მენიუ ყველა გვერდზე ერთნაირი
• როგორ შეამოწმო, რომ ყველა ბმული მუშაობს

გვერდიდან საიტამდე

აქამდე ერთ გვერდზე ვმუშაობდით. საიტი (website) კი რამდენიმე გვერდია, რომლებიც ერთმანეთს ბმულებით უკავშირდება. პატარა პირადი საიტისთვის სამი გვერდიც საკმარისია:

my-site/
  index.html      ← მთავარი: ჩემ შესახებ
  hobby.html      ← ჩემი ჰობი
  contact.html    ← კონტაქტი

სამივე ფაილი ერთ საქაღალდეშია, ამიტომ მათ შორის ბმულები უმარტივესი ფარდობითი მისამართებია: index.html, hobby.html, contact.html.

ერთი მენიუ ყველა გვერდზე

მომხმარებელი ნებისმიერ გვერდზე შეიძლება მოხვდეს, მაგალითად ძებნიდან პირდაპირ „ჰობიზე“. ამიტომ ყოველ გვერდზე ერთი და იგივე მენიუ უნდა იყოს, ერთსა და იმავე ადგილას. ასე ადამიანი ყოველთვის იცის, სად არის და როგორ წავიდეს სხვაგან.

<header>
  <strong>ნინოს საიტი</strong>
  <nav aria-label="მთავარი მენიუ">
    <ul>
      <li><a href="index.html">ჩემ შესახებ</a></li>
      <li><a href="hobby.html" aria-current="page">ჰობი</a></li>
      <li><a href="contact.html">კონტაქტი</a></li>
    </ul>
  </nav>
</header>

ეს <header> სამივე ფაილში ერთნაირია, ერთი განსხვავებით: aria-current="page" ყოველ ფაილში იმ ბმულზე დგას, რომელიც ამ გვერდისაა. hobby.html-ში ის „ჰობის“ ბმულზეა, contact.html-ში „კონტაქტზე“.

იგივე ეხება <footer>-ს: ის ყველა გვერდზე ერთნაირი უნდა იყოს.

ერთი და იგივე კოდი რამდენიმე ფაილში

სუფთა HTML-ში მენიუს ერთხელ დაწერა და ყველა გვერდზე „ჩასმა“ შეუძლებელია: ის ყოველ ფაილში უნდა დააკოპირო. სამი გვერდისთვის ეს პრობლემა არ არის. მაგრამ თუ საიტი იზრდება და მენიუში ახალი პუნქტი ემატება, მისი შეცვლა ყველა ფაილში მოგიწევს, და ერთის დავიწყება ადვილია.

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

ყოველ გვერდს თავისი title და h1

ყოველ გვერდს უნიკალური <title> სჭირდება, რომ ჩანართები და ძებნის შედეგები ერთმანეთისგან განსხვავდებოდეს: „ჰობი — ნინოს საიტი“, „კონტაქტი — ნინოს საიტი“. და ყოველ გვერდს თავისი <h1>, რომელიც ამ გვერდის თემას ამბობს.

ყველა ბმულის შემოწმება

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

სცადე თავად

ეს რედაქტორი ერთი ფაილით მუშაობს, ამიტომ აქ სამ გვერდს შორის ვერ გადახვალ. ქვემოთ „ჰობის“ გვერდის კოდია. შექმენი შენს კომპიუტერში საქაღალდე, მასში სამი ფაილი, და ამ კოდიდან ააწყე დანარჩენი ორი გვერდი: შეცვალე <title>, <h1>, ტექსტი და aria-current-ის ადგილი.

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

• სხვადასხვა მენიუ სხვადასხვა გვერდზე. მომხმარებელი იბნევა. მენიუ ყველგან ერთნაირი უნდა იყოს.
• aria-current ერთსა და იმავე ბმულზე ყველა გვერდზე. ის ყოველ ფაილში თავის გვერდზე უნდა იდგეს.
• ერთი <title> ყველა გვერდზე. ჩანართებს ვეღარ გაარჩევ.

<header>
  <strong>ნინოს საიტი</strong>
  <nav aria-label="მთავარი მენიუ">
    <a href="index.html">ჩემ შესახებ</a> ·
    <a href="hobby.html">ჰობი</a> ·
    <a href="contact.html" aria-current="page">კონტაქტი</a>
  </nav>
</header>
<main>
  <h1>დამიკავშირდი</h1>
  <p>მომწერე სკოლის ელფოსტაზე: nino@example.com</p>
</main>
<footer>
  <p>© 2026 ნინო</p>
</footer>

მინი-ქვიზი

შეჯამება

• საიტი რამდენიმე გვერდია, ბმულებით დაკავშირებული.
• მენიუ და ძირი ყველა გვერდზე ერთნაირია. aria-current ყოველ გვერდზე თავის ბმულზე დგას.
• ყოველ გვერდს უნიკალური <title> და <h1> აქვს.
• დასრულების შემდეგ ყველა ბმული შეამოწმე.