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

ნაბიჯი 6 - პარაგრაფები და <div>. ვსწავლობთ ტექსტის გამოსახვას

პარაგრაფის ტეგი მასში მოქცეული ტექსტის განლაგებაზე აგებს პასუხს. ის იწერება, როგორც <p>, ხოლო მისი ატრიბუტი align გვიჩვენებს, თუ როგორი განლაგება ექნება ამ ტეგში მოქცეულ ტექსტს.

საბოლოო ჯამში კი გვაქვს ასეთი ჩანაწერი:

<p align="...">

...

</p>

მრავალწერტილების ადგილას შესაბამისად ატრიბუტის მნიშვნელობა და ტექსტი უნდა ჩაიწეროს. ატრიბუტს კი სულ 4 მნიშვნელობა აქვს :
  1. left ტექსტს მარცხენა კიდეზე ასწორებს
  2. right ტექსტს მარჯვენა კიდეზე ასწორებს
  3. center ტექსტს გვერდის ვერტიკალური შუახაზის სიმეტრიულად ასწორებს(გამოიყენება სათაურების კეთებისას)
  4. justify იგივეა, რაც left+right, ანუ ტექსტს ორივე კიდეზე ასწორებს
ქვემოთ განხილულ მაგალითს ჩამატებული აქვს პარაგრაფის ტეგი, რომელიც ტექსტს სათაურის ფუნქციას აძლევს, ანუ გამოიყენება align ატრიბუტის center მნიშვნელობა. თქვენ სცადეთ გააკეთოთ გვერდი, რომელზეც ყველა მნიშვნელობა იქნება გამოყენებული.


     
<html>
<head>
<title>პირველი ნაბიჯები</title>
<META HTTP-EQUIV="Content-Type" Content="text/html; Charset=utf-8">
</head>
<body text="#336699" bgcolor="#CFCFCF">
<p align="center">
მოგესალმებით! <font color="#CC0000">ეს ჩემი პირველი ვებ-გვერდია!</font>
</p>
</body>
</html> (ვნახოთ)


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

<p></p>

ეს იგივეა, რაც <br><br>. ასე რომ, მის გამოყენებას აზრი არ აქვს.

შეიძლება შეამჩნიეთ კიდეც, რომ ტექსტის განლაგება default-ად left-ზეა დაყენებული. ასევე საგულისხმოა, რომ დამხურავი ტეგი </p>-ს შემდეგ ავტომატურად გადადის ხაზზე, ანუ <br>-ს აკეთებს, მაგრამ რა ვქნათ, თუ ეს ფუნქცია ხელს გვიშლის?

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

პასუხი მარტივია - <div>...</div> გამოიყენეთ. ის იგივეს გააკეთებს, რასაც <p>, მაგრამ კურსორი ერთი ხაზით დაბლა აღარ ჩამოიწევს. ყველაფერი ზუსტად ისევე ჩაიწერება, რომგორც <p>-ს შემთხვევაში, მხოლოდ <div>-ით:

<div align="center">...</div>
<div align="left">...</div>
<div align="right">...</div>
<div align="justify">...</div>


     

<html>
<head>
<title>პირველი ნაბიჯები</title>
<META HTTP-EQUIV="Content-Type" Content="text/html; Charset=utf-8">
</head>
<body text="#336699" bgcolor="#CFCFCF">
<div align="center">
მოგესალმებით! <font color="#CC0000">ეს ჩემი პირველი ვებ-გვერდია!</font>
</div>
<p align="justyfy">
ეს სტატია განკუთვნილია დამწყები მომხმარებლებისთვის, რომლებიც ვერ ერკვევიან პროცესორების დასახელებებში, მათ მწარმოებლებში და გამოყენების სფეროებში. პრაქტიკულად ასეთი სტატია დიდი ხნის წინ უნდა დაწერილიყო, მაგრამ გარკვეული მიზეზების გამო ინტერნეტში ქვეყნდება პირველად. სამწუხაროდ არცერთი კომპიუტერული რესურსი საწყის ეტაპებს დიდ ყურადღებას არ უთმობს, რის გამოც ბევრ მომხმარებელს საკუთარი ძალებით და მიხვედრილობით უწევს გზის გაკვლევა საკმაოდ რთულ და დაქსაქსულ კომპიუტერულ ცხოვრებაში. რა თქმა უნდა 1-2 წლის თავზე სირთულეები ქრება, გარკვეული ცოდნა გროვდება და ყველაფერი მარტივდება, მაგრამ ხშირად პირველი არასწორი ნაბიჯები ბევრისთვის დიდი ხნის სინანულის ბრალია.
</p>

</body>
</html> (ვნახოთ)



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

დაიმახსოვრეთ! პარაგრაფის შიგნით არ შეიძლება სხვა პარაგრაფის და <div> ტეგის გამოყენება, ასეთი კონსტრუქცია არც იმუშავებს და თქვენც დაგაბნევთ:

<p align="right">
<p>...</p>
<p>...</p>
<p>...</p>
</p>

და

<p align="right">
<div>...</div>
<p>...</p>
<div>...</div>
</p>

თუმცა <div>-ს ასეთი კონსტრუქციის ”ატანა” და შესრულება შეუძლია:

<div align="right">
<p>...</p>
<p>...</p>
<p>...</p>
</div>

თუმცა ჩვენი საუბარი <p> და <div>-თან დაკავშირებით აქ მთავრდება, ნუ გეგონებათ, რომ მათ მეტი არაფერი შეუძლიათ. უბრალოდ თქვენ ჯერ მზად არ ხართ მათ გასაცნობად.