სურათების ჩასმა ვებ გვერდში
სურათი დოკუმენტში ისმება შემდეგნაირად <img src=”my.jpg”>
my.jpg – ის ნაცვლად,შეიძლება ნებისმიერი სურათის დასახელების გამოყენება (me.gif, main.png). მთავარია აქ გაგება იმისა რომ ყველაფერი რაც მოთავსებულია <> შიგნით სურათის მისამართია. ჩვენ მაგალითში მითითებულია რომ სურათი დევს იგივე კატალოგში (დირექტორიაში, პაპკაში) რომელშიც მდებარეობს ჩვენი დოკუმენტი. თუ სურათი მდებარეობს ქვე კატეგორიაში (პაპკაში) რომელიც მდებარეობს თქვენ ძირითად პაპკაში, მაშინ მისამართი იქნება შემდეგნაირი:
<img src=”my/my.jpg”>
თუ შურათი მდებარეობს ერთი საფეხურით მაღლა, ხოლო დოკუმენტი იმყოფება ქვე კატეგორიაში, მაშინ მისამართი იქნება შემდეგნაირი:
<img src=”../my.jpg”>
თუ სურათი დევს სხვა საიტზე მაშინ იწერება სრული მისამართი:
<img src=”http://www.homepage.ru/my/my.jpg”>
თქვენთვის რომ უფრო ხელსაყრელი იყოს, განათავსეთ თქვენი სურათები იმავე პაპკაში სადაც მდებარეობს თქვენი დოკუმენტი. აქ გასათვალისწინებელია ის რომ MY.jpg, my.JPG, my.jpg და MY.JPG – ეს ფაილების სხვადასხვა დასახელებაა. არ უნდა დაგვავიწყდეს რომ რეგისტრს ააქვს მნიშვნელობა.
<html>
<head>
<title>პირველი საიტი</title>
</head>
<body text=”#336699″ bgcolor=”#000000″>
<div align=”center”>
<H3> ეს ჩემი ვებ გვერდია.</H3>
<br>
<font color=”#CC0000″> კეთილი იყოს თქვენი მობრძანება! </font> </div>
<p align=”justify”>
<img src=”dephoto.gif”> ადამიანი ჩვეულებრივად უყურებ იმას რაც მოსწონს, და იძახის: « ხო, მე ეს მინდა » როდესაც ხედავენ იმას რაც არ უნდათ, მაშიმ მასზე ხარჯავენ დიდ ენერგიას მისი ცხოვრებიდან ამოსაშლელად, გასანადგურებლად. საზოგადოება მიჩვეულია ბრძოლას არასასურველი მოვლენების მიმართ. <b>ბრძოლა სიღარიბესთან. ომთან, ნარკოტიკებთან,ტერორიზმთან,ძალადობასთან.</b> ეს კი ქმნის კიდევ უფრო მეტ ბრძოლას (ლიზა ნიკოლსი)
</p>
</body>
</html>
შევხედოთ აბა რა გამოგვივიდა ბრაუზერში. არც თი ისე სიმპატიურია, უფრო კარგი იქნებოდა თუ ტექსტი განთავსდებოდა, მაგალითად სურათის გვერდით. მოდით განვიხილოთ თუ როგორ გავაკეთოთ ეს.
გავიხსენოთ ატრიბუტი align ეს ატრიბუტი გააჩნია სურათებსაც.
img src=”pr1.png” align=”left”>
ეს ნიშნავს იმას რომ სურათი იქნება განთავსებული ეკრანის მარცხენა მხარეს, ხოლო ტექსტი განთავსდება მარჯვენა მხრიდან. თუ გვსურს პირიქით რომ იყოს მაშინ უნდა დავწეროთ right :
<img src=”pr1.png” align=”right”>
ტექსტი შეიძლება იყოს განთავსებული სურათის 1) ქვევით (ეს სტანდარტულად) 2) შუაში 3) ზევით.
(1) – <img src=”pr1.png” align=”bottom”>
(2) – <img src=”pr1.png” align=”middle”>
(3) – <img src=”pr1.png” align=”top”>
ატრიბუტ align გარდა ტეგ <img> – სათვის შეიძლება გამოვიყენოთ კიდევ რამოდენიმე ატრიბუტი:
(1) – <img src=”pr1.png” vspace=”10″>
(2) – <img src=”pr1.png” hspace=”30″>
(3) – <img src=”pr1.png” alt=”ჩემი სურათი”>
(4) – <img src=”pr1.png” width=”100″>
(5) – <img src=”pr1.png” height=”200″>
(6) – <img src=”pr1.png” border=”5″>
განხილვა:
(1) – ატრიბუტი vspace – მანძილი ტექსტსა და სურათს შორის (ვერტიკალურად) .
(2) – ატრიბუტი hspace – მანძილი ტექსტსა და სურათს შორის (გორიზონტალური) მანძილი თითდება პიქსელებში.ჩვენ შემთხვევაში 30 პიქსელია (წერტილი).
(3) – ატრიბუტი alt – სურათის მოკლე აღწერა.
(4) ატრიბუტი width – თვითონ სურათის სიგანე პიქსელებში. თუ არ მიუთითებთ სიგანეს მაშინ შურათი იქნება ორიგინალური ზომის.
(5) – ატრიბუტი height – სურათის სიმაღლე.
(6) – ატრიბუტი border – ჩარჩო (რამკა) . რამკა სურათის გარშემო. თუ ჩარჩოს მოშორება გსურთ მაშინ border მიუთითეთ 0 ნოლი.
როგორც გვახსოვს რამოდენიმე ატრიბუტის გამოყენება შეიძლება ერთი ტეგისათვის. ვნახოთ ეს კიდევ ერთხელ მაგალითზე:
<img src=”pr1.png” align=”left” hspace=”30″ vspace=”5″ alt=”ჩემი სურათი”>
ჩვენი სურათი იქნება ჰგანთავსებული მარცხნივ, ტექსტი იქნება მარჯვნივ, მანძილი ტექსტამდე გორიზონტალური- 30პიქსელი, ვერტიკალური მანძილი – 5 პიქსელი. და თუ შეააჩერებთ კურსორს სურათზე დაინახავთ წარწერას – “ჩემი სურათი”.
<html>
<head>
<title>პირველი საიტი</title>
</head>
<body text=”#336699″ bgcolor=”#000000″>
<div align=”center”>
<H3> ეს ჩემი ვებ გვერდია.</H3>
<br>
<font color=”#CC0000″> კეთილი იყოს თქვენი მობრძანება! </font> </div>
<p align=”justify”>
<img src=”primtocodephoto.gif” align=”left” HSPACE=30 VSPACE=5 alt=”ჩემი სურათი”> ადამიანი ჩვეულებრივად უყურებ იმას რაც მოსწონს, და იძახის: « ხო, მე ეს მინდა » როდესაც ხედავენ იმას რაც არ უნდათ, მაშიმ მასზე ხარჯავენ დიდ ენერგიას მისი ცხოვრებიდან ამოსაშლელად, გასანადგურებლად. საზოგადოება მიჩვეულია ბრძოლას არასასურველი მოვლენების მიმართ. <b>ბრძოლა სიღარიბესთან. ომთან, ნარკოტიკებთან,ტერორიზმთან,ძალადობასთან.</b> ეს კი ქმნის კიდევ უფრო მეტ ბრძოლას (ლიზა ნიკოლსი)
</p>
</body>
</html>
სურათის გაკეთება შეიძლება გვერდის ფონადაც, ეს კეთდება ესე:
<body text=”#336699″ bgcolor=”#000000″ background=”თქვენი_ფონი.jpg”>
ატრიბუტი background მიუთითებს სად მდებარეობს თქვენი სურათი. მაშინ რისთვისაა საჭირო ატრიბუტი bgcolor -ი, როდესაც არის background. ეს იმ შემთხვევისათვის თუ დავიუშვათ თქვენი სურათი ვერ გამოაჩინა ბრაუზერმა.
გაგრძელება გაკვეთილი მერვე