ბმულის ტეგი a

რას ისწავლი

• როგორ შექმნა ბმული <a> ელემენტით და href ატრიბუტით
• როგორ დაწერო ბმულის ტექსტი, რომელიც ყველასთვის გასაგებია
• რა შეიძლება იყოს ბმული: ტექსტი, სურათი, მთელი ბლოკი

ჰიპერტექსტის „ჰიპერი“

გახსოვს, HTML-ის სახელში „ჰიპერტექსტი“ ბმულებს ნიშნავს. სწორედ ბმულებმა აქცია მილიარდობით ცალკეული გვერდი ერთ ქსელად. ბმული <a> ელემენტით იქმნება (anchor, „ღუზა“):

<a href="https://codequest.space">CodeQuest-ის საიტი</a>

• href (hypertext reference) ატრიბუტში წერია, სად მიდის ბმული.
• <a> და </a>-ს შორის წერია, რას ხედავს და რაზე აჭერს მომხმარებელი.

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

ბმული ტექსტის შიგნით

<a> სტრიქონული ელემენტია, ამიტომ აბზაცის შიგნით, წინადადების ნაწილად დგება:

<p>HTML-ის დეტალურ აღწერას იპოვი <a href="https://developer.mozilla.org">MDN-ის საიტზე</a>, ხოლო სავარჯიშოებს ჩვენს სკოლაში.</p>

კარგი ბმულის ტექსტი

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

კარგი ბმულის ტექსტი თავისთავად ამბობს, სად წახვალ:

<!-- ცუდი -->
<p>რეგისტრაციის წესები <a href="/rules.html">აქ არის</a>.</p>

<!-- კარგი -->
<p>გაეცანი <a href="/rules.html">რეგისტრაციის წესებს</a>.</p>

title ატრიბუტი

title ატრიბუტი მაუსის მიტანისას დამატებით მინიშნებას აჩენს: <a href="..." title="გაიხსნება PDF ფაილი">. ის სასარგებლოა, მაგრამ მთავარი ინფორმაცია მაინც ბმულის ტექსტში უნდა იყოს: ტელეფონზე მაუსი არ არის და მინიშნება არ ჩანს.

რა შეიძლება იყოს ბმული

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

<a href="https://codequest.space"><img src="/icons/icon-192.png" alt="CodeQuest-ის მთავარი გვერდი" width="64"></a>

ასეთ შემთხვევაში სურათის alt ტექსტი ბმულის ტექსტის როლს ასრულებს, ამიტომ ის უნდა ამბობდეს, სად მიდის ბმული, და არა რა არის სურათზე.

სცადე თავად

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

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

• დავიწყებული href. <a>ბმული</a> ბმულად არ იმუშავებს: ბრაუზერმა არ იცის, სად წაგიყვანოს.
• „დააჭირე აქ“. ბმულის ტექსტი უნდა ამბობდეს, სად მიდის.
• https://-ის გარეშე გარე მისამართი. href="codequest.space" ბრაუზერისთვის შენი საიტის შიგნით არსებული ფაილის სახელია და არა სხვა საიტი. ამაზე შემდეგ თავში.

<p><a href="https://ka.wikipedia.org">ქართული ვიკიპედია</a></p>
<p><a href="https://codequest.space">CodeQuest: ისწავლე კოდინგი</a></p>
<p><a href="https://developer.mozilla.org">MDN: ვების დოკუმენტაცია</a></p>

მინი-ქვიზი

შეჯამება

• ბმული: <a href="მისამართი">ტექსტი</a>.
• ბმული სტრიქონული ელემენტია და წინადადების შიგნით დგება.
• ბმულის ტექსტი უნდა ამბობდეს, სად მიდის: „დააჭირე აქ“ არ გამოდგება.
• სურათიც შეიძლება ბმული იყოს. მაშინ alt ბმულის დანიშნულებას აღწერს.