ბლოგი

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

წინა გაკვეთილში ჩვენ განვიხილეთ მართკუთხედები. დღეს განვიხილოთ მრგვალი ობიექტები.

მიუთითოთ ნაწილის ტიპი :

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

მრგვალი მიდამოს შესაქმნელად ჩვენ დაგვჭირდება მისი ცენტრის  (x და y)კოორდინატები და რადიუსის სიგრძე  (R) პიქსელებში.

<area shape=”circle” coords=”x,y,R”> 

მოდით ისევ ვიმუშაოთ ობიექტ ნომერ 1 – თან. ჩვენ შემთხვევაში კოორდინატები პატარა წრესათვის იქნება შემდეგნაირი : x=46, y=48; ხოლო რადიუსის სიგრძე  – R=35. დავწეროთ ყველაფერი ეს:

<map> <area shape=”circle” coords=”46,48,35″> </map> ეხლა როდესაც ყველაზე მთავარი დაწერილია, დავწეროთ რუქის დასახელება საითკენაც იგი მიუთითებს და დავაკავშიროთ რუქა და სურათი :
<img src=”mapcircle.gif” usemap=”#karta2″>

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

<map name=”karta2″>
<area href=”drugoy_document2.html” shape=”circle” coords=”46,48,35″>
</map>

რუქის ყველა ნაწილისათვის ჩვენ შეგვიძლია დავწეროთ ატრიბუტი alt , ჩვენ ეხლა მხოლოდ ერთი ნაწილი გვაგვს და მისთვის დავწეროთ alt -ი:
<img src=”mapcircle.gif” usemap=”#karta2″>

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

<map name=”karta2″>
<area href=”drugoy_document2.html” shape=”circle” coords=”46,48,35″alt=”პატარა წრე”>
</map>

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

ეხლა თქვენ თვითონ გააკეთეთ მეორე წრე ლინკად (x=158, y=75, R=53), ცოდნის დასაფიქსირებლად.

ეხლა განვიხილოთ მრავალკუთხედები

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

ეხლა ჩვენ ვიმუშავებთ ფიგურა ნომერ 2 -თან. ჯერ მიუთითოთ ნაწილის ტიპი:

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

კოორდინატები იწერება შემდეგი პრინციპით :
<area shape=”poly” coords=”x1,y1,x2,y2,…,xN,yN”>

იშიფრება ეს შემდეგნაირად : პირველი კუთხის კოორდინატები (x1,y1), მეორე კუთხის კოორდინატები (x2,y2),  კიდევ კოორდინატები (…) და ბოლო კუთხის კოორდინატები (xN,yN). ესეიგი ჩვენ შემთხვევაში ჩანაწერი იქნება შემდეგნაირი :

<area shape=”poly” coords=”x1,y1,x2,y2,x3,y3,x4,y4,x5,y5″> 

ეხლა მიუთითოთ რეალური კოორდინატები ჩვენ კოდში :

<map>
<area shape=”poly” coords=”168,9,232,29,200,97,223,129,153,119″>
</map>

შემდეგ დავწეროთ ლინკი, რუქის დასახელება, და დავაკავშიროთ რუქა და სურათი ერთმანეთთან (ეს ყველგან კეთდება ერთი და იგივე პრინციპით) :

<img src=”mappoly.gif” usemap=”#karta3″>

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

<map name=”karta3″>
<area href=”drugoy_document3.html” shape=”poly” coords=”168,9,232,29,200,97,223,129,153,119″>
</map>

არ დაგავიწყდეთ ყველაფერი ეს გააკეთოთ პირველი ფიგურასათვის სავარჯიშოდ – x1=54, y1=20, x2=109, y2=20, x3=147, y3=58, x4=109, y4=96, x5=54, y5=96, x6=16, y6=58. 

ეხლა განვიხილოთ რამოდენიმე ნიუანსი და ამით დავამთავროთ საუბარი რუქებზე:

1- ჩვენ შეგვიძლია ერთდროულად გამოვიყენოთ სხვადასხვა ნაწილები , მაგალითად წრე და მრავალკუთხედი :

<img src=”mappoly.gif” usemap=”#karta3″>

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

<map name=”karta3″>
<area href=”drugoy_document3.html” shape=”circle” coords=”46,48,35,”>
<area href=”drugoy_document3.html” shape=”poly” coords=”168,9,232,29,200,97,223,129,153,119″>
</map>

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

3- იყავით ყურადღებით თუ თქვენ წერთ რუქისათვის usemap=#KARTA, ხოლო სახელი (name) თქვენი რუქისა იქნება karta. შესაძლოა შეცდომები უნდა გაითვალისცინოთ ასოები რეგისტრი.

შემდეგ გაკვეთილში ჩვენ კვლავ განვაგრძობთ საუბარს ლინკებზე (ბმულებზე)

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

ლინკი შეიძლება იყოს არა მხოლოდ დოკუმენტი 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>

ატრიბუტი 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).

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

დღევანდელ გაკვეთილში ჩვენ ვისაუბრებთ იმაზე თუ როგორ შევქმნათ ლინკი (ბმული) საფოსტო ყუთზე (e-mail).

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

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

<a href=”mailto:pochta@mail.ru”> pochta@mail.ru </a>

mailto – ს გააჩნია კიდევ რამოდენიმე თვისება :

– ?subject= წერილის თემა
– &Body= თქვენი წერილის ტექსტი
– &cc=copy@mail.ru,copy2@mail.ru (წერილების კოპია მძიმის შემდეგ)
– &bcc=hidden_copy@mail.ru,hidden_copy2@mail.ru (ფარული კოპიები წერილებისა მძიმის შემდეგ) 

ყველაფერი ეს ერთად გამოიყურება შემდეგმაირად :

<a href=”mailto:pochta@mail.ru?subject=Hello&Body=text&cc=copy@mail.ru&bcc=hidden_copy@mail.ru”> pochta@mail.ru </a> 

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

გავაგრძელოთ საუბარი ლინკებზე. როგორც ადრე იყო ნათქვამი ლინკი შეიძლება იყოს სურათი. პრინციპი იგივეა როგორც ტექსტის დროს. ოღონდ ტეგებში <a></a> თავსდება არა ტექსტი არამედ სურათი:

<a href=”prf.html”><img src=”dephoto.gif”></a> 

მაგალითად გვსურს გავაკეთოთ ლინკი სურათით საფოსტო ყუთზე, პრინციპი იგივეა:

<a href=”mailto:pochta@mail.ru“><img src=”dephoto.gif”></a> 

მაშ ასე გავაკეთოთ სურათი dephoto.gif ლინკად დოკუმენტზე ფოტოებით (prf.html) :

<html>
<head>
<title>პირველი საიტი</title>
</head>
<body text=”#336699″ bgcolor=”#000000″ link=”#339999″ alink=”#339999″ vlink=”#339999″>
<div align=”center”>
<H3>ეს ჩემი ვებ გვერდია.</H3>
<br>
<font color=”#CC0000″> კეთილი იყოს თქვენი მობრძანება</font> 🙂 </div>
<p align=”justify”>
<a href=”prf.html”><img src=”dephoto.gif” align=”left” HSPACE=30 VSPACE=5 alt=”ჩემი სურათები”></a>ადამიანი ჩვეულებრივად უყურებ იმას რაც მოსწონს, და იძახის: « ხო, მე ეს მინდა » როდესაც ხედავენ იმას რაც არ უნდათ, მაშიმ მასზე ხარჯავენ დიდ ენერგიას მისი ცხოვრებიდან ამოსაშლელად, გასანადგურებლად. საზოგადოება მიჩვეულია ბრძოლას არასასურველი მოვლენების მიმართ. ბრძოლა სიღარიბესთან. <a href=”prf.html”>დაათვალიერეთ საინტერესო სურათები</a>, ომთან,ნარკოტიკებთან,ტერორიზმთან,ძალადობასთან.ეს კი ქმნის კიდევ უფრო მეტ ბრძოლას (ლიზა ნიკოლსი)
</p>
</body>
</html>

შევამოწმოთ ყველაფერი ეს ბრაუზერში და ვხედავთ რომ სურათი dephoto.gif გახდა ლინკი. მიაქციეთ ყურადღება რიმ ფოტოს გარშემო გაჩნდა რამკა. თუ გსურთ მისი გაუქმება საჭიროა ატრიბუთ ბორდერის გამოყენება border=”0″ პარამეტრით 0. ამ პარამეტრზე ვისაუბრეთ წინა გაკვეთილებში.

<img src=”dephoto.gif” align=”left” hspace=”30″ vspace=”5″ alt=”ჩემი სურათები” border=”0″> 

როგორ გავაკეთოთ ჩარჩოს ფერი სურათის გარშემო? იგი კეთდება ატრიბუტით bordercolor მაგალითად:

<img src=”picture.gif” border=”3″ bordercolor=”#CC0000″> 

ჩვენ შემთხვევაში რამკის ფერი წითელია, ხოლო ატრიბუტი border (რამკის სისქე) არ უნდა იყოს 0, თუ გსურთ რამკის ნახვა ფოტოს გარშემო.

ლინკებზე საუბარს განვაგრძობთ გაკვეთილი მეთერთმეტე.