გადასვლა გვერდის შიგნით

რას ისწავლი

• როგორ მისცე ელემენტს უნიკალური სახელი id ატრიბუტით
• როგორ დაწერო ბმული, რომელიც გვერდის კონკრეტულ ნაწილზე მიდის
• როგორ ააწყო სარჩევი და ბმული სხვა გვერდის კონკრეტულ ნაწილზე

id: ელემენტის სახელი

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

<h2 id="prices">ფასები</h2>

id (identifier, იდენტიფიკატორი) ელემენტის უნიკალური სახელია. უნიკალური ნიშნავს, რომ გვერდზე ერთი id მხოლოდ ერთ ელემენტს შეიძლება ჰქონდეს. სახელის წესები ცვლადების მსგავსია: ინგლისური ასოები, ციფრები და ტირე, ინტერვალების გარეშე. მაგალითად prices, contact-us, step-2.

ბმული #-ით

ბმული, რომლის href #-ით იწყება, იმავე გვერდზე ეძებს ელემენტს ამ id-ით და იქამდე გადაახვევს:

<a href="#prices">გადადი ფასებზე</a>

ასეთ ბმულს ღუზას (anchor) უწოდებენ: ის გვერდის კონკრეტულ ადგილს „ებღაუჭება“. ბრაუზერის მისამართის ზოლში ბოლოს #prices გაჩნდება, ასე რომ, ეს მისამართი სხვასაც შეგიძლია გაუგზავნო და ის პირდაპირ იმავე ადგილზე გადავა.

სარჩევი

ღუზების ყველაზე ხშირი გამოყენება სარჩევია გვერდის თავში:

<nav>
  <a href="#rules">წესები</a> ·
  <a href="#prizes">პრიზები</a> ·
  <a href="#contact">კონტაქტი</a>
</nav>

<h2 id="rules">წესები</h2>
<p>...</p>
<h2 id="prizes">პრიზები</h2>
<p>...</p>
<h2 id="contact">კონტაქტი</h2>
<p>...</p>

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

ღილაკი „ზემოთ“

href="#top" ბევრ ბრაუზერში გვერდის თავში აბრუნებს მაშინაც კი, თუ ასეთი id არ არსებობს, მაგრამ საიმედოდ ჯობს, თვითონ მისცე id გვერდის პირველ ელემენტს: <h1 id="top">.

სხვა გვერდის ნაწილზე

# სხვა გვერდის მისამართსაც შეიძლება მიუერთო, როგორც ფარდობითს, ისე აბსოლუტურს: rules.html#prizes გახსნის rules.html-ს და პირდაპირ პრიზების ნაწილზე გადაახვევს. იგივე მუშაობს გარე საიტებზეც, თუ მათ ელემენტებს id აქვთ.

სცადე თავად

ეს ბმულები ამ რედაქტორშიც მუშაობს, რადგან გვერდს არ ტოვებს. დააჭირე სარჩევს და მერე „ზემოთ“-ს. თუ შედეგის ფანჯარა მთლიანად ეტევა და გადახვევა არ ჩანს, დაამატე მეტი აბზაცი.

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

• # დავიწყებულია. href="prices" ეძებს ფაილს სახელად prices და არა ელემენტს. გვერდის შიგნით ბმულს # სჭირდება.
• ინტერვალი id-ში. id="our prices" არ იმუშავებს. გამოიყენე ტირე: our-prices.
• ერთი id ორჯერ. ბმული პირველ მათგანზე გადავა, მეორე დაიკარგება. id უნიკალური უნდა იყოს.

<h1 id="top">ჩემი მენიუ</h1>
<p><a href="#breakfast">საუზმე</a> · <a href="#lunch">სადილი</a> · <a href="#dinner">ვახშამი</a></p>
<h2 id="breakfast">საუზმე</h2>
<p>ფაფა და ხილი.</p>
<h2 id="lunch">სადილი</h2>
<p>ლობიო და მჭადი.</p>
<h2 id="dinner">ვახშამი</h2>
<p>სალათი და ყველი.</p>
<p><a href="#top">↑ ზემოთ</a></p>

მინი-ქვიზი

შეჯამება

• id ელემენტის უნიკალური სახელია: ინტერვალების გარეშე, გვერდზე ერთხელ.
• href="#id" იმავე გვერდზე ამ ელემენტამდე გადაახვევს.
• სარჩევი და „ზემოთ“ ღუზებით კეთდება.
• page.html#id სხვა გვერდის კონკრეტულ ნაწილზე მიდის.