მთავარი / HTML / პირველი ნაბიჯები - უმარტივესი ცნებები  

ნაბიჯი 11 - ვსწავლობთ სურათებთან მუშაობას.

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

როგორ შეიძლება ტექსტი სურათის გვერდით მოვათავსოთ? ძალიან მარტივად - სურათის ტეგში ატრიბუტი align უნდა ჩავამატოთ.

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

კოდი ასეთი სახისაა:

<img src="pr1.png" align="...">

მრავალწერტილის ნაცვლად სასურველი მნიშვნელობა ჩავსვათ და პრობლემაც მოგვარდება, ოღონდ ერთი ნიუანსი უნდა გაითვალისწინოთ - img ტეგის align-ს მნიშვნელობა justyfy არ გააჩნია.

<img src="pr1.png" align="left">

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

კიდევ რამდენიმე საჭირო ატრიბუტი:
  1. <img src="pr1.png" vspace="10">
  2. <img src="pr1.png" hspace="30">
  3. <img src="pr1.png" alt="intel">
  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 - აკეთებს იგივეს, რასაც vspace, ოღონდ ჰორიზონტალისთვის.

  3. alt - ალბათ შეგიმჩნევიათ, რომ კურსორის სურათთან გაჩერებისას ჩნდება მინიშნება, რომელიც სურათის შესახებ ინფორმაციას იძლევა. ეს ატრიბუტი იგივეს გაკეთების საშუალებას იძლევა. მისი მნიშვნელობა მინიშნების ტექსტს შეიცავს.

  4. width - სურათის სიგანე პიქსელებში. მისი არარსებობის შემთხვევაში სურათი გამოისახება საკუთარი სიგანით.

  5. height - სურათის სიმაღლე პიქსელებში. მისი არარსებობის შემთხვევაში სურათი გამოისახება საკუთარი სიმაღლით.

  6. border - განსაზღვრავს სურათის გარშემო არსებული ჩარჩოს სიგანეს პიქსელებში.


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

<img src="pr1.png" align="left" hspace="30" vspace="5" alt="intel">

ეს ნიშნავს, რომ სურათი მარცხენა გვერდთან იქნება მიწეული, ჰორიზონტალური დაშორება 30 პიქსელი, ვერტიკალური კი 5 პიქსელი იქნება, ხოლო კურსორის სურათთან გაჩერების შემთხვევაში გამოჩნდება მინიშნება "intel".


     
<html>
<html>
<head>
<title>პირველი ნაბიჯები</title>
<META HTTP-EQUIV="Content-Type" Content="text/html; Charset=utf-8">
</head>
<body text="#336699" bgcolor="#CFCFCF">
<div align="center">
<h3>მოგესალმებით!</h3><font color="#CC0000">ეს ჩემი პირველი ვებ-გვერდია!</font></div>
<p align="justify">
<font size="1"><img src="primtocodephoto.jpg" align="left" hspace="30" vspace="5" alt="intel">ეს სტატია განკუთვნილია დამწყები მომხმარებლებისთვის, რომლებიც ვერ ერკვევიან პროცესორების დასახელებებში, მათ მწარმოებლებში და გამოყენების სფეროებში. პრაქტიკულად ასეთი სტატია დიდი ხნის წინ უნდა დაწერილიყო, მაგრამ გარკვეული მიზეზების გამო ინტერნეტში ქვეყნდება პირველად. <b>სამწუხაროდ არცერთი კომპიუტერული რესურსი საწყის ეტაპებს დიდ ყურადღებას არ უთმობს</b>, რის გამოც ბევრ მომხმარებელს საკუთარი ძალებით და მიხვედრილობით უწევს გზის გაკვლევა საკმაოდ რთულ და დაქსაქსულ კომპიუტერულ ცხოვრებაში. რა თქმა უნდა 1-2 წლის თავზე სირთულეები ქრება, გარკვეული ცოდნა გროვდება და ყველაფერი მარტივდება, მაგრამ ხშირად პირველი არასწორი ნაბიჯები ბევრისთვის დიდი ხნის სინანულის ბრალია.</font>
</p>
</body></html> (ვნახოთ)


სურათის გამოყენება გვერდის ფონადაც შეიძლება. ამისთვის ტეგ body-ში ატრიბუტ background-ს ვამატებთ, რომელიც სურათის მისამართს შეიცავს:

<body text="#336699" bgcolor="#CFCFCF" background="ფონი.jpg">

დაკვირვებულ მკითხველს სამართლიანი კითხვა გაუჩნდება - თუ ფონად სურათს ვიყენებთ, მაშინ რაღა საჭიროა ფონის ფერი?

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