HTML - ბმულები - თავი 4
HTML - ის შესწავლას ვაგრძელებთ ვების ყველაზე მნიშვნელოვანი ელემენტის, ბმულის განხილვით. იცი რომ ბმულები იყო მთავარი ინოვაცია მაშინ როცა HTML დოკუმენტები გამოიგონეს? ერთი დოკუმენტიდან მეორეზე ბმის გაკეთების საშუალებამ გააჩინა უამრავი ახალი შესაძლებლობა და რაც მთავარია ადამიანებს გაგვიადვილდა ტექსტურ დოკუმენტებს შორის ნავიგაცია. თუმცა დღეს ვები გაცილებით მეტია ვიდრე უბრალოდ ბმულები და სანამ სხვა უფრო კომპლექსურ თემებს შევეხებით, მოდი ვისწავლოთ ბმულების შესახებ!
ბმულების სინტაქსი
HTML ბმული ჩაიწერება <a> ტეგის გამოყენებით და მასში არსებული href ატრიბუტი მიუთითებს იმ მისამართზე რომელიც უნდა გაიხსნას ამ ბმულზე დაკლიკებისას.
მაგალითი:
<a href="https://www.example.com">Visit Example.com</a>ბმულის გახსნა ახალ ფანჯარაში - target ატრიბუტი.
ზოგჯერ შეიძლება დაგჭირდეს რომ ბმულზე დაკლიკებისას ახალი ფანჯარა ან ტაბი გაიხსნას. ამისათვის ვიყენებთ target ატრიბუტს და მასში ვწერთ "_blank" მნიშვნელობას. ამით ვეუბნებით ბროუზერ რომ არ გვსურს ბმულის იმავე ფანჯარაში გახსნა.
მაგალითი:
<a href="https://www.example.com" target="_blank">Visit Example.com</a>შიდა (internal) ბმულები
სხვა ვებ-გვერდებზე ბმულების მიბმის გარდა HTML საშუალებას გვაძლევს ბმულები მივაბათ იმავე გვერდზე არსებულ სექციებზე. იმისთვის რომ მაგალითად მენიუდან გვერდის ბოლოში ან შუაში არსებულ სექციაზე თუ გსურს გადახტე ან ჩასქროლო.
ამისათვის <a> ტეგში შეგვიძლია გამოვიყენოთ ორი ელემენტის href - ისა და id - ს კომბინაცია. id - ის შესახებ ატრიბუტების თავში ვისაუბრეთ და ვთქვით რომ რომელმე ელემენტისთვის უნიკალურობის მისანიჭებლად გამოიყენება მაგრამ არ გვითქვამს თუ რაში შეიძლება დაგვჭირდეს უნიკალურობა. შიდა ბმულები კი ძალიან კარგი მაგალითია რადგან თუ რომელიმე ელემენტს id - ის მივანიჭებთ, შემდე href - ში შევძლებთ მის გამოყენებას და შიდა ბმულის აწყობას.
<a href="#section2">Jump to Section 2</a>
<h2 id="section2">Section 2</h2>
ზემოთ მოყვანილ მაგალითში section2 არის h2 ელემენტის id და მას სძენს უნიკალურობას. ეს თვისება შეგვიძლია გამოვიყენოთ იმისთვის რომ <a> ტეგის href ატრიბუტში მივიუთითოთ section2 როგორც შიდა მისამართი. ამისათვის კი წინ უბრალოდ ეს ნიშანი უნდა დავუმატოთ # და ვიღებთ შედეგს <a href="#section2"> რომელიც სინამდვილეში შიდა ბმულია და მასზე დაკლიების შემთხვევაში ბროუზერის ფანჯარა შესაბამის ელემენტამდე ჩაისქროლება.
ამ თავში ბმულებს გავეცანით და სამომავლოდ მათ ძალიან ბევრგან გამოიყენებ. იქამდე კი დავალებები არ გამოტოვო! მზად ხარ გამოწვევებისთვის? 💪
დავალებები
- შექმენი ახალი HTML გვერდი და გამოიყენე როგორც ჩვეულებრივი ისე შიდა ბმულები.
- შექმენი ბმული რომელიც ხსნის ახალ ფანჯარას/ტაბს.
- შექმენი 3 სექცია და 3 შიდა ბმული რომლებითაც ამ სექციებზე შეძლებ გადახტომას. მინიშნება: იმისთვი რომ გრძელი გვერდი გამოგივიდეს და გადახტომის ეფექტი დაინახო, საკმარისი რაოდენობის ტექსტი უნდა დაამატო შენს ვებ-გვერდზე. როცა რაიმე უაზრო ტექსტი გჭირდება ადგილის შესავსებად აქედან შეგიძლია დააკოპირო Lorem Ipsum