ONLINE- კურსები - HTML
გაკვეთილი 5. მივიწევთ წინ
ამ გაკვეთილში გავივლი კიდევ რამდენიმე ძირითად ტეგს, ასევე გავიგებთ, რომ ერთ ტექსტს (სიტყვას, ფრაზას) შესაძლებელია ერთდროულად მოვარგოთ რამდენიმე ტეგი.
მაგალითად როცა გამოვყავით ტექსტი მსხვილი შრიფტით <b> ტეგის დახმარებით, ხოლო იგივე ტექსტის დახრა, შესაძლებელია გაკეთდეს ტეგით <i>. "i" - ეს "italic" - ის შემოკლებული ვარიანტია.
მაგალითი № 1:
მაგალითი № 1:
<i>დახრილი ტექსტი.</i>
ინტერნეტ ბრაუზერში ასე გამოიყურება:
დახრილი ტექსტი
ასევე შესაძლებელია შრიფტის შეცვლა ტეგით small:
მაგალითი № 2:
მაგალითი № 2:
<small>ეს ტექსტი დაპატარავებულია.</small>
ბრაუზერში:
ეს ტექსტი დაპატარავებულია
რამდენიმე ტეგის ერთდროულად გამოყენება.
თუ გსურთ რომ ტექსტი ერთდროულად იყოს დახრილი და გამოყოფილი მსხვილი შრიფტით, ამისათვის ტექსტი უნდა ჩასვათ შესაბამის ორ ტეგში.
მაგალითი № 3:
მაგალითი № 3:
<b><i>ტექსტი bold და italic</i></b>
ბრაუზერში:
ტექსტი bold და italic
მიაქციეთ ყურადღება: ტეგი რომელიც პირველ ადგილზეა, იხურება ბოლოს! თუ მას დახურვისას დასვამთ ისევე როგორც პირველს, კონსტრუქცია არ იმუშავებს.
ტეგები რომლებიც არ შეიცავენ ტექსტს.
როგორც ადრე ვთქვით, არის ტეგები რომლების ერთდროულად არიან გამხსნელებიც და დამკეტებიც. ეს ტეგები შეიცავენ ბრძანებებს, რომლების კონკრეტულ ტექსტებს არ უკავშირდებიან, ისინი ითვლებიან დამოუკიდებელ ბრძანებებად. მაგალითად ტეგი <br>, რომელიც ახდენს ფრაზის გადატანას:
მაგალითი № 4:
მაგალითი № 4:
ტექსტის ნიმუში,<br>რომელსაც ახალ სტრიქონზე გადავიტანთ.
აი როგორ გამოჩნდება ბრაუზერში:
ტექსტის ნიმუში,
რომელსაც ახალ სტრიქონზე გადავიტანთ.
რომელსაც ახალ სტრიქონზე გადავიტანთ.
აის კიდევ ტეგი - <hr> - რომელის ჰორიზონტალურ ხაზს ავლებს ("hr" - ინგლისურიდან. "horizontal rule"):
მაგალითი № 5:
მაგალითი № 5:
<hr width="650">
(სადაც ატრიბუტი «width» - მიუთითებს ზოლის სიგრძეს პიქსელებში (საიტების კონსტრუირებისას ჩვეულებრივ ზომის ერთეულად,სიგრძის, სიგანის და სიმაღლის გამოიყენება – პიქსელები და არა სანტიმეტრები, მაგრამ ამასს ადვილად მიეჩვევით)*.
ბრაუზერში აღნიშნული ზოლი ასე გამოიყურება:
სხვა ტეგები.
არსებობს ტეგები რომლებიც აუცილებლად მოითხოვენ შესატყვის დამკეტ ტეგებს: <ul>, <ol> и <li>. ეს ტეგები სიის ჩამოსაწერად გამოიყენება.
<ul> - შემოკლებული ვარიანტია "unordered list - მოუწესრიგებელი სია" - სვამს რაიმე ნიშანს (წრე, ღილაკი ან პატარა სურათიც კი) სიის ყველა ელემენტისათვის. <ol> - შემოკლებული ვარიანტი "ordered list - მოწესრიგებული სია" - ნომრავს ციფრებით სიის ყველა ელემენტს. სიის ელემენტის შესაქმნელად გამოიყენება ტეგი <li> ("list item - სიის ელემენტი"). ვნახოთ შესაბამისი მაგალითები:
მაგალითი № 6:
<ul> - შემოკლებული ვარიანტია "unordered list - მოუწესრიგებელი სია" - სვამს რაიმე ნიშანს (წრე, ღილაკი ან პატარა სურათიც კი) სიის ყველა ელემენტისათვის. <ol> - შემოკლებული ვარიანტი "ordered list - მოწესრიგებული სია" - ნომრავს ციფრებით სიის ყველა ელემენტს. სიის ელემენტის შესაქმნელად გამოიყენება ტეგი <li> ("list item - სიის ელემენტი"). ვნახოთ შესაბამისი მაგალითები:
მაგალითი № 6:
<ul>
<li>მზე</li>
<li>მთვარე</li>
<li>ვარსკვლავები</li>
<li>პლანეტები</li>
</ul>
<li>მზე</li>
<li>მთვარე</li>
<li>ვარსკვლავები</li>
<li>პლანეტები</li>
</ul>
ბრაუზერში ეს ყველაფერი ასე გამოიყურება:
- მზე
- მთვარე
- ვარსკვლავები
- პლანეტები
მაგალითი № 7:
<ol>
<li>მზე</li>
<li>მთვარე</li>
<li>ვარსკვლავები</li>
<li>პლანეტები</li>
</ol>
<li>მზე</li>
<li>მთვარე</li>
<li>ვარსკვლავები</li>
<li>პლანეტები</li>
</ol>
ბრაუზერში:
- მზე
- მთვარე
- ვარსკვლავები
- პლანეტები
მაშ ასე, გავიმეოროთ ამ და წინა გაკვეთილში შესწავლილი ტეგები:
<html>დოკუმენტის შიგთავსი</html>
<body>საიტის შიგთავსი</body>
<p>აბზაცი</p>
<a>ლინკი</a>
<h1>ყველაზე დიდი სათაური</h1>
<h2>დიდი სათაური</h2>
<h3>საშუალო სათაური</h3>
<h4>საშუალოზე პატარა სათაური</h4>
<h5>პატარა სათაური</h5>
<h6>ყველაზე პატარა სათაური</h6>
<b>მსხვილი შრიფტი</b>
<i>დახრილი შრიფტი ანუ კურსივი</i>
<small>დაპატარავებული შრიფტი</small>
<br>სტრიქონის გადატანა
<hr>ჰორიზონტალური ხაზი
<ul>სია</ul>
<ol>სიის აღრიცხვა</ol>
<li>სიის ელემენტი</li>
<body>საიტის შიგთავსი</body>
<p>აბზაცი</p>
<a>ლინკი</a>
<h1>ყველაზე დიდი სათაური</h1>
<h2>დიდი სათაური</h2>
<h3>საშუალო სათაური</h3>
<h4>საშუალოზე პატარა სათაური</h4>
<h5>პატარა სათაური</h5>
<h6>ყველაზე პატარა სათაური</h6>
<b>მსხვილი შრიფტი</b>
<i>დახრილი შრიფტი ანუ კურსივი</i>
<small>დაპატარავებული შრიფტი</small>
<br>სტრიქონის გადატანა
<hr>ჰორიზონტალური ხაზი
<ul>სია</ul>
<ol>სიის აღრიცხვა</ol>
<li>სიის ელემენტი</li>
მიაქციეთ ყურადღება რომ «დოკუმენტის შიგთავსი» და «საიტის შიგთავსი» – არ არის ერთი და იგივე. დოკუმენტის შიგთავსი – უფრო ფარტე მცნებაა და შესაძლებელია უამრავ დამატებით პარამეტრებს შეიცავდეს, რომლებიც გავლენას ახდენენ საიტის მუშაობაზე,თუმცა ეკრანზე შესაძლებელია არ აისახებოდეს.
დამატებითი ინფორმაცია გაკვეთილთან დაკავშირებით:
*პიქსელი - ეს არის ეკრანის ზომის ერთეული. სანტიმეტრისაგან განსხვავებით, პიქსელები შედარებითი ელემენტია, რომელს ზომაც დამოკიდებულია კონკრეტული ზომის ეკრანზე. იმ მომხმარებლისათვის, რომელსაც გააჩნია ეკრანის მაღალი გადაწყვეტილება, 25 პიქსელი შესაძლებელია გამოიყურებოდეს როგორც 1 სანტიმეტრი. იგივე 25 პიქსელი დაბალი გადაწყვეტილების ეკრანში შესაძლებელია 1.5 ან 2 სანტიმეტრსაც კი შეესაბამებოდეს.
