აბზაცები და ხაზის გადატანა

რას ისწავლი

• როგორ ექცევა ბრაუზერი ინტერვალებს და ახალ ხაზებს
• როდის გჭირდება <br> და როდის ახალი აბზაცი
• რისთვისაა <hr> და <pre>

ბრაუზერი ინტერვალებს „ყლაპავს“

ეს ალბათ პირველი სიურპრიზია HTML-ში. ჩაწერე ტექსტი რამდენიმე ხაზზე და მრავალი ინტერვალით:

<p>ეს     ტექსტი
   სამ ხაზზე
წერია.</p>

ბრაუზერი დაბეჭდავს: „ეს ტექსტი სამ ხაზზე წერია.“, ერთ ხაზზე და ჩვეულებრივი ინტერვალებით. წესი ასეთია: რამდენიმე ინტერვალი, ტაბი და ახალი ხაზი ზედიზედ ერთ ინტერვალად იქცევა. ამას ინტერვალების შეკუმშვა (whitespace collapsing) ჰქვია.

რატომ ასე? რომ HTML კოდი ლამაზად, შეწევებით დაწერო და ეს შეწევები გვერდზე არ გამოჩნდეს. ტექსტის ხაზებად დაყოფას ბრაუზერი თვითონ აკეთებს, ფანჯრის სიგანის მიხედვით: ვიწრო ტელეფონზე ხაზი ადრე წყდება, ფართო ეკრანზე გვიან.

აბზაცი: p

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

ხაზის გადატანა: br

ზოგჯერ ახალი ხაზი ტექსტის ნაწილია: ლექსში, მისამართში, რეცეპტის ინგრედიენტებში. ასეთ დროს <br> გამოიყენე: ის აბზაცის შიგნით ხაზს წყვეტს.

<p>
  თბილისი, 0108<br>
  რუსთაველის გამზირი 1<br>
  საქართველო
</p>

<br> ცარიელი ელემენტია, ამიტომ დამხურავი ტეგი არ აქვს.

ნუ გამოიყენებ <br>-ს დაშორებისთვის. სამი <br> ზედიზედ, რომ ტექსტი ქვემოთ ჩამოიწიოს, ცუდი ჩვევაა: დაშორება გარეგნობაა და CSS-ით კეთდება. <br> მხოლოდ იქ, სადაც ხაზის გაწყვეტა თვითონ ტექსტის ნაწილია.

თემის ცვლილება: hr

<hr> ჰორიზონტალურ ხაზს ხატავს. მისი მნიშვნელობა: თემის ცვლილება, როგორც ვარსკვლავები მოთხრობის თავებს შორის. ესეც ცარიელი ელემენტია.

ტექსტი ისე, როგორც დაწერე: pre

თუ გინდა, რომ ინტერვალები და ახალი ხაზები ზუსტად ისე დარჩეს, როგორც დაწერე, გამოიყენე <pre> (preformatted, წინასწარ ფორმატირებული). ბრაუზერი მის შიგნით არაფერს „ყლაპავს“ და ტექსტს თანაბარი სიგანის შრიფტით აჩვენებს, სადაც ყველა სიმბოლო ერთნაირი სიგანისაა. ის კარგია ASCII ნახატებისთვის და, როგორც შემდეგ თავებში ნახავ, კოდისთვის.

სცადე თავად

გაუშვი და შეადარე სამი ბლოკი: ჩვეულებრივი აბზაცი, აბზაცი <br>-ით და <pre>. ლექსი ყველაზე სწორად რომელში გამოიყურება?

ხშირი შეცდომები

• ენთერით ახალი ხაზის მოლოდინი. კოდში ახალი ხაზი გვერდზე ინტერვალად იქცევა. ხაზის გასაწყვეტად <br> ან ახალი <p> გჭირდება.
• <br> დაშორებისთვის. ცარიელი ადგილი CSS-ის საქმეა.
• ცარიელი აბზაცები. <p></p> დაშორებისთვის იგივე შეცდომაა, რაც ზედმეტი <br>.

<h1>ლუკა ბერიძე</h1>
<p>
  საჯარო სკოლა №51<br>
  მე-6 კლასი<br>
  ქუთაისი
</p>
<hr>
<p>ჰობი: ჭადრაკი და პროგრამირება.</p>

მინი-ქვიზი

შეჯამება

• ზედიზედ ინტერვალები და ახალი ხაზები ერთ ინტერვალად იკუმშება.
• <p> აბზაცია, <br> ხაზის გაწყვეტა აბზაცის შიგნით, <hr> თემის ცვლილება.
• <pre> ტექსტს ზუსტად ისე აჩვენებს, როგორც დაწერე.
• დაშორებისთვის <br> და ცარიელი აბზაცები არ გამოიყენო: ეს CSS-ის საქმეა.