HTML-ში სივრცეების აღწერა და მათი გამოყენება.

HTML-ში ფარნები, რომლებიც ასევე სახელწოდებით "whitespace", არის სიმბოლები, რომლებიც ბრაუზერმა არ აჩვენებს (ფარნები, ტაბულაციები, ახალი ხაზის სიმბოლოები). ბრაუზერები ჩვეულებრივ აერთიანებენ მათ ერთ ფარნად რენდერინგის დროს, გამონაკლისიCertain ელემენტებისა და CSS თვისებების გარდა.

გამოყენება:

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

2. სტრიქონული ელემენტების განყოფილება: ბრაუზერები ავტომატურად სვამენ ფარნს გვერდით განლაგებულ სტრიქონულ ელემენტებს შორის. ეს ქცევა შეიძლება შეიცვალოს CSS-ის გამოყენებით.

3. ელემენტები, რომლებიც ინახავენ ფარნებს:

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

4. CSS თვისება white-space: საშუალებას აძლევს მართოთ, როგორ უვლის ბრაუზერი ფარნებს:

   • normal (ნაგულისხმევი): აერთიანებს ფარნებს, გადატანები იგნორირებულია (გარდა <br>-ის).
   • nowrap: აერთიანებს ფარნებს, მაგრამ აცილებს გადატანებს.
   • pre: ექვივალენტია <pre>-ის გამოყენებას.
   • pre-wrap: ინახავს ფარნებს და გადატანებს, ასევე აძლევს საშუალებას ავტომატურად გადატანოს ხაზები კონტეინერის სიგანის მიხედვით.
   • pre-line: აერთიანებს ფარნებს, მაგრამ ინახავს გადატანებს.

ფარნების გაერთიანების მაგალითი:

HTML:

<p>
    ბევრი        ფარნი

    და
    გადატანები
    ხაზები
</p>

ნათელი შედეგი ბრაუზერში:

ბევრი ფარნი და გადატანები ხაზები

<pre>-ის გამოყენების მაგალითი:

HTML:

<pre>
    ინახება
        ყველა
            ფარნი
    და
    გადატანები
</pre>

ნათელი შედეგი ბრაუზერში:

    ინახება
        ყველა
            ფარნი
    და
    გადატანები

CSS white-space თვისების მაგალითი:

HTML:

<div class="pre-wrap">
    ეს ტექსტი ინახავს
        თავის ფარნებს
            და გადატანებს

    ხაზებს,
    ასევე იჭრება სიგანის მიხედვით.
</div>

CSS:

.pre-wrap {
    white-space: pre-wrap;
    border: 1px solid black;
    width: 150px;
}