4shared

html გაკვეთილი მეთერთმეტე

რუქა.  საიტის შექმნა

ლინკი შეიძლება იყოს არა მხოლოდ დოკუმენტი Html გაფართოებით, არამედ ასევე შეიძლება იყოს (*.doc, *.mp3, *.jpg, *.gif, *.txt, *.zip, *.exe და სხვებზე:) როგორ კეთდება ესთი ლინკი (ბმული)? იგივე პრინციპით:

<a href=”http://www.melody.ru/music.mp3″> სიმღერის გადმოწერა</a> 

ლინკზე დაწკაპუნებისას მომხმარებელთან გაიხსნება ფანჯარა, სადაც მას შემოსთავაზებენ ფაილის შენახვას. ესეიგი თუ ფაილი არ არის ტექსტური დოკუმენტი (*.doc, *.txt)  ან html  მაშინ ბრაუზერი აუცილებლად შემოსთავაზებს მომხმარებელს ფაილის გადმოქაჩვას.

ბევრს გინახავთ ალბათ როდესაც ვლინკავთ პატარა სურათს და შემდეგ იხსნება დიდი სურათი ომავე ან ახალ ფანჯარაში. კეთდება ეს შემდეგნაირად, ვაკეთბთ ლინკად (დავუშვათ small.jpg) რომელიც მიუთითებს სხვა სურათზე (მაგალითდ big.jpg): 

<a href=”big.jpg”> <img src=”small.jpg”> </a>

ამ შემთხვევაში დიდი სურათი გაიხსნება იმავე ფანჯარაში, იმისათვის რომ სურათი ან ნებისმიერი სხვა ფაილი გაიხსნას ახალ ფანჯარაში,საჭიროა ატრიბუტ target -ი :

<a href=”big.jpg” target=”_blank”> <img src=”small.jpg”> </a>

 target=”_blank” მიუთითებს რომ რომ დოკუმენტი (ჩვენ შემთხვევაში სურათი გაიხსნება ახალ ფანჯარაში)

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

სანავიგაციო რუქა კეთდება ტექით <map></map>. ტეგი <map> შეიცავს ტეგ <area> -ს, რომლიც განსაზღვრავს გეომეტრიულ ნაკვეთს (ნაწილს) რუქის შიგნით. ჩვენ შემთხვევაში ესენი იქნებიან  მართკუთხედები :

<map>
<area …>
<area …>

<area …>
</map>

კომპიუტერის გაკვეთილებიგანვიხილოთ ეს პრაქტიკაზე, ჩვენ გვჭირდება სურათი. მაგალითად აი ესეთი (სურათი უბრალოა, 240х140 პიქსელზე), წარმოდგინეთ რომ დახატულები მასზე მართკუთხედები №1 и №2, სურათებია რაიმე ღილაკებისა. ხოლო ცისფერი ფერი ფონია.და თქვენ გადაწყვიტეთ სანავიგაციო რუქის გაკეთება სადაც  №1 и №2 (მართკუთხედები) იქნება ლინკები.

ტეგ <area> -ს, ააქვს ატრიბუტები shape და coords.

ატრიბუტი shape – განსაზღვრას ობიექტის ფორმას, იქნება თუა არა იგი მართკუთხედი (shape=”rect”), იქნება თუ არა იგი მრგვალი (shape=”circle”) ან მრავალკუთხედი  (shape=”poly”).

დღეს ჩვენ ვიმუშავებთ მართკუთხედთან:

<map>
<area shape=”rect”>
</map>

htm გაკვეთილებიატრიბუტი coords – განსაზღვრავს კორდინატებს(კოორდინატების რაოდენობა დამოკიდებულია ჩვენს მიერ არჩეულ ფორმაზე).
ათვლა იწყება სურათის მარცხენა ზევითა კუთხედან, ჩათვალეთ იგი კოორდინატის საწყისად (0;0). თუ ჩვენ ვმუშაობთ მართკუთხედთან, მაშინ ჩვენ გვჭირდება მარცხენა ზევითა და მარჯვენა ქვევითა კუთხეები. თანმიმდევრობა კოორდინატები ჩაწერისა ატრიბუტ coords -თვის შემდეგნაირია:

<area shape=”rect” coords=”x1,y1,x2,y2“> 

ჩვენ მაგალითში მართკუთხედ №1-ს კოორდინატები აქვს შემდეგნაირი x1=25, y1=36, x2=114, y2=98 . ესეიგი კოდი იქნება შემდეგნაირი:

<map>
<area shape=”rect” coords=”25,36,114,98“>
</map>

ეხლა დავწეროთ თუ სად მიუთითებს იგი, ამისათვის ჩვენ გაგვჭირდება უკვე ცნობილი ატრიბუტი href :

<map>
<area href=”drugoy_document.html” shape=”rect” coords=”25,36,114,98″>
</map>

მაგრამ ეს ჯერ არ არის საკმარისი იმისათვის რომ სურათი გახდეს ლინკი, ჩვენ კიდევ უნდა მივუთითოთ რუქის სახელი და დაუკავშიროთ იგი სურათს. ტეგ <map> -ს ააქვს ატრიბუტი name -რუქის სახელი მოდით დავარქვათ რუქას -ruqa1.

<map name=”ruqa1″>
<area href=”drugoy_document.html” shape=”rect” coords=”25,36,114,98″>
</map>

რუქის,სურათზე მისაბმელად სჭიროა ატრიბუტი usemap=”#რუქის_სახელი” სურათისათვის:

<img src=”bluerects.gif” usemap=”#ruqa1″>

… ტექსტი, ან არაფერი..

<map name=”ruqa1“>
<area href=”drugoy_document.html” shape=”rect” coords=”25,36,114,98″>
</map>

ეხლა სცადეთ თქვენ თვითონ გაკეთოთ იგივე მართკუთხედ №2 – თვის. სავარჯიშოდ (x1=153, y1=11, x2=219, y2=127).

გაგრძელება შემდეგ გაკვეთილში

დატოვეთ თქვენი კომენტარი

*