ჰიპერბმულები

რა არის ჰიპერბმული?

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

HTML-ში ბმულების (ჰიპერბმულების) შექმნა საშუალებას გვაძლევს, შევასრულოთ შიდა ან გარე ნავიგაცია. შიდა ნავიგაცია ნიშნავს იმავე ვებსაიტზე (დომენზე) მდებარე სხვადასხვა გვერდებს ან ერთ გვერდზე არსებულ სექციებს შორის გადასვლას. გარე ნავიგაცია გულისხმობს ბმულების გამოყენებით სხვა ვებსაიტებზე (გარე დომენებზე) გადასვლას.

ბმულის სტრუქტურა

HTML-ში ბმულის შესაქმნელად გამოიყენება <a> (anchor) თეგი. ნავიგაციისთვის საჭიროა href ატრიბუტის გამოყენება, რომელიც მიუთითებს, თუ რომელ მისამართზე უნდა მოხდეს ნავიგაცია.

მაგალითად:

<p>ვქმნი ჰიპერბმულს <a href="https://iswavle.com">iswavle-ს მთავარი გვერდისთვის</a></p>

target ატრიბუტით შეგვიძლია აღვწეროთ, სად გაიხსნას მოცემული ბმული. მაგალითად, _blank მნიშვნელობით ბმული გაიხსნება ბრაუზერის ახალ ტაბში:

<p>ვქმნი ჰიპერბმულს <a href="https://iswavle.com" target="_blank">iswavle-ს მთავარი გვერდისთვის</a></p>

აქვე შეგახსენებთ ბმულის მისამართის სტრუქტურას:

ბლოკური დონის ლინკები

ნებისმიერი კონტენტის აღწერა შეიძლება <a> თეგში, მათშორის ბლოკური ელემენტებისაც.

მაგალითად სათაურის ელემენტი მოვათავსოთ <a> თეგში:

<a href="https://iswavle.com">
  <h1>Iswavle</h1>
</a>
<p>ისწავლე ვებ დეველოპმენტი დამოუკიდებლად!</p>

დამატებითი ინფორმაციის აღწერა title ატრიბუტით

სხვა ატრიბუტი, რომელიც დაგჭრდებათ ლინკების გამოყენების დროს არის title. ეს ატრიბუტი მოიცავს დამატებით კონტექტს, რომელიც უნდა გამოჩნდეს ლინკზე მაუსის გადატარებისას (hover).

<p>
  ვქმნი ჰიპერბმულს
  <a href="https://iswavle.com" title="ისწავლე ვებ დეველოპმენტი დამოუკიდებლად!"> iswavle-ს მთავარი გვერდისთვის </a>
</p>

URL და ფაილები

შიდა ნავიგაციის დროსაც გამოიყენება <a> თეგი, თუმცა მასში ჩაწერილი ბმული ცოტათი განსხვავდება გარე ნავიგაციისგან. რადგან კონტენტი არის ისევ იმავე დომეინზე მოთავსებული, შეგვიძლია ბმულში მისამართი გავწეროთ პროტოკოლის (https) და დომეინის გარეშე. რათა უკეთ გავიაზროთ ბმულის სამიზნეები, საჭიროა გვესმოდეს URL-ები და ფაილის მისამართები.

URL, ანუ Uniform Resource Locator, არის სტრინგი, რომელიც აღწერს სად არის განთავსებული რაიმე ფაილი ვებზე, მაგალითად, ეს სტატია არის განთავსებული ამ მისამართზე https://iswavle.com/doc/guides/html-css/hyperlinks.

URL-ები იყენებენ ე.წ path-ებს (ბილიკებს, მისამართებს) ფაილების საპოვნელად. Path აღწერს ფაილების სისტემაში კონკრეტული ფაილის ადგილმდებარეობას. სანიმუშოდ განვიხილოთ html-css-navigation ფოლდერის ფაილების სტრუქტურა:

ამ ფოლდერის ძირი (root) არის თვითონ ფოლდერი html-css-naviation. როცა ვებსაიტზე ლოკალურად ვმუშაობთ, ჩვენ გვაქვს ერთი ფოლდერი, რომელიც შეიცავს მთლიან საიტს. ფოლდერის ძირში გვვაქვს ფაილები:

• index.html
• about.html
• contact.html
• products.html
• main.js
• style.css

ამახთანავე გვაქვს ფოლდერი nested, რომელიც შეიცავს ერთ ფაილს - index.html. ვებსაიტზე შეიძლება ერთზე მეტი index.html იყოს, თუმცა თითოეულ ფოლდერში - მხოლოდ ერთი. როცა URL მხოლოდ ფოლდერის მისამართს შეიცავს, ბრაუზერი ავტომატურად index.html-ს მოძებნის.

არსებობს მისამართის ორნაირი ნოტაცია: აბსოლუტური (absolute) და რელატიური (relative).

მისამართს, რომელიც იწყება /-ით, ეწოდება აბსოლუტური მისამართი, სადაც ბმული დაიწყება ძირეული დონიდან. მაგალითად, href="/" ატრიბუტი ყოველთვის ვებგვერდის ძირეულ დონეზე (მთავარ გვერდზე) გადაგიყვანთ. აბსოლუტური მისამართი გულისხმობს მისამართის ისეთ ნოტაციას, რომელიც ყოველთვის ერთსა და იმავეს ნიშნავს და არ ეცვლება მნიშვნელობები სხვადასხვა გვერდებზე.

აბსოლუტურის საპირისპიროდ, არსებობს ფარდობითი, იგივე რელატიური ნოტაცია. იგი იწყება / სიმბოლოს გარეშე, რაც მიმდინარე მისამართს ან ფაილს ნიშნავს, შესაბამისად მისი მნიშვნელობა დამოკიდებულია იმ ფაილზე, რომელზეც ამ ბმულის მისამართი გვაქვს მოცემული. ზემოთ მაგალითში თუ contact.html-ში გვაქვს <a href="index.html"></a>, ეს ნიშნავს იმავე ფოლდერში არსებულ index.html-ს და არა, მაგალითად, nested ფოლდერში არსებულს.

განვიხილოთ შიდა ნავიგაციის სხვადასხვა ვარიანტები:

• იმავე ფოლდერში: თუ ჩვენ გვინდა რომ საიტის მთავარ იგვერდიდან index.html გადავიდეთ იმავე ფოლდერში არსებულ სხვა გვერდზე, მაგალითად about.html-ზე, მაშინ ჩვენ პირდაპირ ვწერთ ამ index.html-ში ფაილის მისამართს, რაც იგივე ფაილის სახელია:

<p>გაიგე მეტი <a href="about.html">ჩვენ შესახებ</a>.</p>
<!-- ალტერნატიული, უფრო ექსპლიციტური ნოტაცია -->
<p>გაიგე მეტი <a href="./about.html">ჩვენ შესახებ</a>.</p>

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

• ქვემოთ ფოლდერებში (subdirectory): თუ გვინდა მთავარი გვერდიდან nested დოლდერში არსებულ ფაილზე გადასვლა.

<p>ნახეთ <a href="nested/index.html">ეს გვერდი</a>.</p>
<!-- მხოლოდ ფოლდერის სახელიც საკმარისია თუ მასში `index.html`-ის გახსნა გვინდა -->
<p>ნახეთ <a href="nested">ეს გვერდი</a>.</p>

• ზემოთ ფოლდერში გადასვლა: ვთქვათ, ვართ nested/index.html-ზე და გვინდა ზემოთ არსებულ contact.html-ზე გადასვლა:

<p><a href="../contact.html">დაგვიკავშირდით</a>, რათა გაიგოთ მეტი.</p>

• აბსოლუტური მისამართით ნავიგაცია: შეგვიძლია გამოვიყენოთ ისეთი მისამართიც, რომელიც ყველა ფაილში ერთნაირად დაიწერება, თუკი სერვერი გაშვებულია საიტის ფოლდერის ძირში.

nested/index.html-დან გადასვლა ზემოთ არსებულ about.html-ზე:

<p>გაიგე მეტი <a href="/about.html">ჩვენ შესახებ</a>.</p>

contact.html-იდან გადასვლა იმავე ფოლდერში არსებულ about.html-ზე:

<p>გაიგე მეტი <a href="/about.html">ჩვენ შესახებ</a>.</p>

URL-ში არსებული სიმბოლოების მნიშვნელობები:

სანიმუშოდ გაეცანით ინტერაქციულ მაგალითს:

დოკუმენტის ფრაგმენტები

შესაძლებელია ვებგვერდზე ასევე კონკრეტული HTML-ის ელემენტზე ფოკუსის გადატანა. ამისათვის საჭიროა შევქმნათ ელემენტი კონკრეტული id ატრიბუტით და შესაბამისი ბმული, რომელიც შეიცავს id-ს მნიშვნელობას, როგორც ფრაგმენტს.

<h2 id="საკონტაქტო_ინფორმაცია">საკონტაქტო ინფორმაცია</h2>

ბმულის შექმნისას უნდა გამოვიყენოთ # სიმბოლო.

<p>გაეცანით ჩვენს <a href="#საკონტაქტო_ინფორმაცია">საკონტაქტო ინფორმაციას</a></p>

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

<p>გაეცანით ჩვენს <a href="/contact.html#საკონტაქტო_ინფორმაცია">საკონტაქტო ინფორმაციას</a></p>

სპეციალური პროტოკოლები

HTML-ში გვაქვს სხვა ჩაშენებული პროტოკოლები, რომლებიც იყენებს მოწყობილობის აპლიკაციებს.

მეილის გაგზავნა

mailto: პროტოკოლი გამოიყენება მეილის გასაგზავნად.

<a href="mailto:info@educata.dev">მოგვწერეთ მეილზე</a>

ასევე შეიძლება დამატებითი პარამეტრების აღწერაც:

• ?subject - თემის დამატება.
• &body - წერილის ტექსტის წინასწარ შევსება.

<a href="mailto:info@educata.dev?subject=სატესტო&body=გამარჯობა!">მოგვწერეთ მეილზე</a>

ზარის გაშვება

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

<a href="tel:+95551234567">დაგვიკავშირდით</a>

SMS-ის გაგზავნა

ზოგიერთი მოწყობილობა (განსაკუთრებით iOS/Android) მხარს უჭერს sms: პროტოკოლს, რაც SMS-ის პროგრამას გახსნის.

<a href="sms:+95551234567">მოგვწერეთ</a>

ასევე შეგვიძლია ტექსტის ავტომატურად ჩასმაც:

<a href="sms:+95551234567?body=გამარჯობა!">მოგვწერეთ</a>

შეჯამება

ამ სტატიაში განვიხილეთ HTML-ის უმთავრესი მდგენელი - ბმულები, რომლითაც შეგვიძლია დოკუმენტის შიგნით, ან დოკუმენტებს შორის გადაადგილება და სხვადასხვა პროტოკოლების საშუალებით საკომუნიკაციო აპლიკაციების გახსნა.