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

ნაბიჯი 8 - ვქმნით ტექსტის სტილს საკუთარი ხელებით.

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

ამ ტეგებს ზედმეტი ახსნა-განმარტება არ სჭირდებათ, ამიტომ უბრალოდ ჩამოვწეროთ:

       ჩვეულებრივი ტექსტი
<b> გასქელებული ტექსტი </b>
<i> დახრილი ტექსტი </i>
<tt>ნაბეჭდი ტექსტი</tt>
<u> გახაზული ტექსტი </u>
<strike>გადახაზული ტექსტი</strike>
<s>გადახაზული ტექსტი</s>

ყველაფერი ძალიან მარტივია:


     
<html>
<head>
<title>პირველი ნაბიჯები</title>
</head>
<body text="#336699" bgcolor="#CFCFCF">
<div align="center">
<H3>მოგესალმებით!</H3><font color="#CC0000"> ეს ჩემი პირველი ვებ-გვერდია!</font>
</div>
<p align="justify">
ეს სტატია განკუთვნილია <strike>დამწყები<strike> მომხმარებლებისთვის, რომლებიც ვერ ერკვევიან პროცესორების დასახელებებში, მათ მწარმოებლებში და გამოყენების სფეროებში. პრაქტიკულად ასეთი სტატია დიდი ხნის წინ უნდა დაწერილიყო, მაგრამ გარკვეული მიზეზების გამო ინტერნეტში ქვეყნდება პირველად. <b>სამწუხაროდ არცერთი კომპიუტერული რესურსი საწყის ეტაპებს დიდ ყურადღებას არ უთმობს</b>, რის გამოც ბევრ მომხმარებელს საკუთარი ძალებით და მიხვედრილობით უწევს გზის გაკვლევა საკმაოდ რთულ და დაქსაქსულ კომპიუტერულ ცხოვრებაში. <i>რა თქმა უნდა 1-2 წლის თავზე სირთულეები ქრება<i>, გარკვეული ცოდნა გროვდება და ყველაფერი მარტივდება, მაგრამ ხშირად პირველი არასწორი ნაბიჯები ბევრისთვის დიდი ხნის სინანულის ბრალია.
</p>
</body>
</html> (ვნახოთ)


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

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

თუ ჩემს რჩევებს მიყვებოდით და ცოტა თვითონაც წაიექსპერიმენტეთ, მაშინ ისიც გეცოდინებათ, რომ სიტყვებს შუა თუნდაც 10 ჰარი დასვათ, ის ბრაუზერში მაინც ერთად გამოჩნდება, ხოლო თქვენს სასურველ ადგილას ხაზის გადასატანად კი <br>-ს გარეშე არაფერი გამოგივათ. <pre> ამ პრობლემას გადაგიჭრით, მაგრამ ერთი მინუსი გააჩნია(თუ ეს მინუსად შეიძლება ჩაითვალოს) - მასში მოქცეული ტექსტი ნაბეჭდად გამოჩნდება. ეს ტეგი განსაკუთრებით ლექსის გვერდზე განსათავსებლად გამოგადგებათ. ქვემოთ მოყვანილ ტექსტში <pre>-ს მეტი ტეგის გამოყენება არაა საჭირო, რაც ტექსტის წერის პროცესს ძალიან აადვილებს:

<pre> 
ტექსტი     (ბევრი ჰარი...)     ტექსტი 
             ტექსტი     (ბევრი ჰარი...)     ტექსტი
       ტექსტი     (ბევრი ჰარი...)     ტექსტი
</pre>
ერთი ტექსტის ერთდროულად ნებისმიერი რაოდენობის გაფორმების ტეგში ჩასმა შეიძლება:

<tt><b><i>ტექსტი </i></b></tt>

ზემოთ მოყვანილ მაგალითში სამი: ნაბეჭდი, გასქელებული და დახრილი ტექსტის ტეგია გამოყენებული. თქვენც შეგიძლიათ წაიექსპერიმენტოთ და ერთდროულად რამდენიმე ტეგში ჩასვათ თქვენი ტექსტი, შედეგად ცოტათი გაიწაფებით ამ საქმეში და მომხმარებელს თქვენი საიტის დანახვისას გული მაინც არ წაუვა :)

ტეგი <big> ტექსტის ზომას უფრო ადიდებს, ხოლო <small> პირიქით - აპატარავებს:

<small> მცირე ზომის ტექსტი </small>
ნორმალური ზომის ტექსტი
<big> დიდი ზომის ტექსტი </big>

და ბოლოს - მეცნიერი ხალხისთვის ძალიან გამოსადეგი ორი ტეგი - <sup>(ზედა ინდექსი) და <sub>(ქვედა ინდექსი). იკითხავთ - რაში შეიძლება გამოვიყენოთ ისინი? მაგალითად, წყლის ქიმიური ფორმულის - H2O-ს დასაწერად. მგონი გასაგებია, რომ მათ გამოყენების სფერო არ დაელევათ :) მათი სინტაქსი ძალიან მარტივია:

ზედა ინდექსი: <sup> ტექსტი </sup>
ქვედა ინდექსი: <sub> ტექსტი </sub>