საგანმანათლებლო ტექნოლოგიები - ციფრული რესურსების პორტალი

ტერმინები ვებგვერდის შექმნის პროცესში ბევრ სპეციფიკურ ტერმინს შეხვდებით, მაგრამ ახლა მნიშვნელოვანია განვმარტოთ 3 ძირითადი ტერმინი. ესენია ელემენტი, ტეგი და ატრიბუტი. ელემენტები ელემენტები იძლევიან მითითებებს გვერდზე განლაგებული ობიექტების სტრუქტურის და შემადგენლობის შესახებ. ყველაზე ხშირად გამოყენებულია სათაურების სხვადასხვა დონეები (h1-დან h6-მდე) და აბზაცები (p). სიას შეიძლება დაემატოს a, div, span, strong, em. თითოეული ამ ელემენტების იდენტიფიკაცია (ამოცნობა) შესაძლებელია ნიშნებით (ნეტა რა ჰქვია მათ). შედეგად მივიღებთ a, div, span, strong, em. ტეგი და ნიშნებში ჩასმულ ელემენტებს ტეგები ეწოდება. ტეგების უმეტესობა წყვილებში გვხვდება. ანუ თითოეული ელემენტი შედგება გამხსნელი მაგ.: a და დამხურავი / ტეგებისაგან. გამხნელი ტეგი მიუთითებს ელემენტის დასაწყისს, ის იწყება სიმბოლოთი, შემდეგ ელემენტი და ნიშნით მთავრდება. მაგალითად, a ტეგები ბრაუზერში არ გამოისახება, არამედ ტეგის დახმარებით ბრაუზერს მიეწოდება მითითება, თუ რა სახის ინფორმაცია უნდა გამოიტანოს ეკრანზე, დამხურავი ტეგი აღნიშნავს ელემენტის დასასრულს. ის შედგება სიმბოლოს შემდეგ მარჯვნივ დახრილი ხაზის, ელემენტისა და სიმბოლოსაგან. მაგ: /a გამხსნელ და დამხურავ ტეგებს შორის არსებული კოდი არის ამ ელემენტის შემადგენლობა. მაგალითად, ბმულს აქვს გამხსნელი ტეგი a დამხურავი ტეგი /a. ის კოდი, რაც ამ ტეგებს შორის არის განთავსებული, არის ბმულის შემადგენლობა. ამრიგად, ბმულების ტეგი დაახლოებით ასე გამოიყურება a . . . . /a ატრიბუტი ატრიბუტი წარმოადგენს თვისებას, რომელიც გამოიყენება ელემენტის შესახებ დამატებითი ინფორმაციის მისათითებლად. ყველაზე მნიშვნელოვან ელემენტებს გააჩნიათ • id ატრიბუტი რომელიც ელემენტის იდენტიფიკაციას ახდენს; • ატრიბუტი class, რომელიც ელემენტის კლასიფიკაციას (?) ახდენს, • ატრიბუტი scr, რომელიც გვერდზე გამოტანილი ინფორმაციის წყაროს მიუთითებს, და • href ატრიბუტი, რომელიც დაკავშირებული რესურსის ბმულზე უთითებს. ატრიბუტების მითითება ხდება გამხსნელ ტეგში ელემენტის სახელის შემდეგ. ატრიბუტი შეიცავს სახელს და მნიშვნელობას. ატრიბუტის ფორმატი იწერება შემდეგ თანმიმდევრობით, ჯერ ატრიბუტის სახელი, შემდეგ ტოლობის ნიშანი და შემდეგ კი, ორმაგ ბრჭყალებში ჩაისმევა ატრიბუტის მნიშვნელობა. მაგალითად ელემენტი a ატრიბუტით href, შემდეგნაირად გამოიყურება: a href=”http://www.google.com”გუგლის საძიებო სისტემა/a ეს კოდი ვებ გვერდის შესაბამის ადგილას გამოიტანს ბმულის წარწერას „გუგლის საძიებო სისტემა“, რომელზე დაჭერითაც ვებგვერდი შეიცვლება www.google.ge საიტით. ზედა აბზაცზე არსებულ კოდში ბმულის ელემენტი ჩაწერილია გამხსნელი a და დამხურავი /a ტეგებით. რომლებშიც განთავსებულია გარკვეული კოდი. ამ ჩანაწერში href არის ატრიბუტის სახელი, ხოლო ტოლობის ნიშნის შემდეგ დაწერილი ტექსტი http://www.google.ge არის ატრიბუტის მნიშვნელობა. –სურათი უნდა იყოს ახლა კი გავარჩიოთ უშუალოდ კოდი და გავარკვიოთ HTML დოკუმენტის სტრუქტურა: ამისთვის შედით საქაღალდეში სადაც დავიმახსოვრეთ ფაილი hello.html. თავგვის მარჯვენა კლავიშით დააჭირეთ ფაილის პიქტოგრამას hello.html. კონტექსტურ მენიუში თაგვის მარცხენა კლავიშით დააჭირეთ Edit with Notepad++ (თუ თქვენ ეს პროგრამა არ გიწერიათ, ამავე ვებგვერდზე შეგიძლიათ ნახოთ ვიდეოგაკვეთილი რედაქტორის შესახებ. ან HTML კოდის რედაქტირება შესაძლებელია ნებისმიერი ტექტსტური რედაქტორის დახმარებით, მაგალითა ბლოკნოტი) პირველ სტრიქონზე კოდი იწყება დოკუმენტის ტიპის გამოცხადებით. HTML-ის მე-5 ვერსიაში DOCTYPE დეკლარაცია ყველაზე გამარტივებულია და ასე გამოიყურება: აქვე აღვნიშნავ, რომ !DOCTYPE დეკლარაცია არ არის HTML ტეგი, არამედ ის ბრაუზერს აცნობებს იმის შესახებ, თუ HTML რომელი ვერსიის გამოყენებით არის დაწერილი ვებ გვერდის კოდი. შემდეგ, მე-2 სტრიქონზე თქვენ ხედავთ გამხსნელი ტეგის html, რომელიც სრულდება მე-11 სტრიქონზე დამხურავი ტეგით /html. როგორც ზევით აღვნიშნე. ყველა ვებგვერდი იწყება ტეგით html და სრულდება დამხურავი ტეგით /html. მიაქციეთ ყურადღება Notepad++ რედაქტორის თავისებურებას: როგორც კი კურსორს ჩასვამთ ამოცნობილ ტეგში, რედაქტორი ცდილობს იპოვოს ტეგის შესაბამისი გამხსნელი და დამხურავი ტეგები. ამოცნობილი ტეგები იისფერი მარკერით მოინიშნება, ხოლო გამხნელი ტეგის წინ ნაკლებობის ნიშანი და დამხურავი ტეგის შემდეგ მეტობის ნიშანი გაწითლდება. ამ ფუნქციის გამოყენებით ადვილად შეძლებთ გააკონტროლოთ ტეგების არეალი. გთხოვთ დააკვირდეთ, ადვილი გასარკვევია სად იწყება ვთქვათ head ან ვთქვათ body ტეგი და სად მთავრდება. Html ელემენტი შეიცავს head (თავი) ელემენტს, რომელიც იწყება მე-3 ხაზზე გამხსნელი head ტეგით და იხურება /head ტეგით მე-5 ხაზზე. ამ ტეგებს შორის არსებული ინფორმაცია ეკრანზე არ გამოისახება. აქ განთავსებულია ინფორმაცია გვერდის სათაურის შესახებ. html ტეგის შიგნით არსებული head ტეგი განსაზღვრავს ვებ გვერდის ზედა ნაწილს, მათ შორის სხვადასხვა მეტა მონაცემებს (დოკუმენტის თანმხლებ მონაცემებს). კოდის ამ ნაწილში შეძლება განთავსდეს CSS კასკადური სტილის კოდები ან მათზე ბმულის ელემენტი. ასევე ჯავასკრიპტის კოდები და ა.შ. head ელემენტის შიგნით არსებული ტექსტი ვებ გვერდზე არ გამოისახება. (title ელემენტზე უკვე ვისაუბრეთ). ამ ნაწილში ხდება აგრეთვე დამხმარე გარე ფაილების მიბმა დოკუმენტზე. ასევე ბრაუზერს მიეწოდება სხვა ტექნიკური ინფორმაცია. მათ შორის მე-4 ხაზზე მოთავსებულია ელემენტი title. ეს ელემენტი უზრუნველყოფს დოკუმენტის სათაურის გამოტანას ბრაუზერის საინფორმაციო ზოლში. რათქმაუნდა ისიც იწყება გამხსნელი ტეგით title და იხურება /title ტეგით. ამის შემდეგ მე-6 ხაზზე არაფერია დაწერილი. ეს მეთოდი გამოიყენება იმისთვის რომ კოდის მკითხველმა (ადამიანმა) ადვილად შეძლოს კოდის სხვადასხვა ბლოკების ერთმანეთისგან გამიჯვნა. ბევრი ცნობილი ვებ დეველოპერი ამ მეთოდს იყენებს და თქვენც გირჩევთ გაითვალისწინოთ. მე-7 სტრიქონზე იწყება ელემენტი body (ტანი), გამხსნელი კოდი ამ შემთხვევაშიც და სიმბოლოებშია მოთავსებული, ხოლო მე-10 ხაზზე განთავსებული დამხურავი კოდი წესისამებრ / სიმბოლოებით იწყება და სიმბოლოთი მთავრდება. შედეგად ჩანაწერს ასეთი სახე აქვს – /body. კოდის ამ ნაწილში იწერება ყველაფერი ის, რაც უნდა ნახოს ვებ გვერდზე შემოსულმა სტუმარმა. ეს შეიძლება იყოს ტექსტი, სურათი, აუდიო ან ვიდეო ინფორმაცია, ანიმაცია და ა.შ. Body ელემენტის შემდეგ მე-8 ხაზზე განთავსებულია h1 (heder – სათაური) ტეგი რომელიც გამხსნელ და დამხურავ ტეგებს შორის არსებულ ტექსტს დიდი ზომის შრიფტით გამოიტანს ეკრანზე. მიაქციეთ ყურადღება, რომ გამხსნელი და დამხურავი ტეგები ერთ ხაზზეა განლაგებული. სინტაქსის მოთხოვნებით, აუცილებელი არ არის ტეგები ცალცალკე ხაზებზე ჩამოვწეროთ, ჩაწერის ეს ფორმა მხოლოდამხოლოდ იმისთვის გამოიყენება, რომ კოდის ავტორისთვის ადვილი იყოს სორს კოდის ტექსტის აღქმა და გამართვა. მთელი კოდი ერთ სტრიქონზე თუნდაც ტეგებსშორის ჰაერის გამოუყენებლად ჩაგვეწერა, ბრაუზერი მას მაინც სწორად აღიქვამდა. ასევე ერთ ხაზზეა განლაგებული მე-9 ხაზზე განლაგებული კოდი. ამ სტრიქონზე განლაგებულია ელემენტი P, ეს ელემენტი უზრუნველყოფს შესაბამის ტეგებში განთავსებული ტექსტის ახალ სტრიქონზე გამოტანას. დიახ, მე-9 ხაზზე დაწერილი სტრიქონი P ტეგში განთავსებულ ტექსტს გამოიტანს ხოლო მე-10 სტრიქონზე კი მე-7 სტრიქონზე გახსნილი body ტეგი იხურება ტეგით /body. ამის შემდეგ კი ისღა დაგვრჩენია დავხუროთ პირველ სტრიქონზე გახსნილი ტეგი html. მინდა ავღნიშნო ერთი მნიშვნელოვანი ფაქტი: მთელი კოდი მოთავსებულია HTML ტეგის შიგნით, ასევე ტეგი ჩალაგებულია სხვა ტეგებში. მაგალითად head, body. ასევე აღსანიშნავია, რომ ეს ელემენტები, თვითონ შეიცავენ სხვა ელემენტებს. მაგალითად body შეიცავს h1 და p ელემენტებს. ანუ აშკარაა, რომ HTML ენაში ელემენტები შეიძლება ერთმანეთში ჩალაგდეს როგორც კონტეინერები. მნიშვნელოვანია არ გამოგრჩეთ რომელიმე ტეგის დახურვა. ანუ გახსნილი ელემენტი აუცილებლად უნდა დაიხუროს. მაგრამ ასევე მნიშვნელოვანია აღინიშნოს რომ თუ ერთ ტეგში ჩასვამთ ახალი ტეგს (რომელსაც ასევე აქვს დამხურავი ტეგი) ის უნდა დაიხუროს პირველი ტეგის დახურვამდე. აქვე მინდა ჩამოვწერო ტეგები, რომლებსაც არ აქვთ ცალკე დამხურავი ტეგები, ანუ ცარიელი ტეგები დასკვნის სახით გთხოვთ დააკვირდეთ შემდეგ ნახატს: ყველა HTML დოკუმენტი აუცილებლად შეიცავს მინიმუმ შემდეგ დეკლარაციას და ელემენტებს: !DOCTYPE html, html, head და body შეჯამება: ამ ვიდეოგაკვეთილით თქვენ ისწავლეთ რომ ნებისმიერი ვებგვერდი ეკრანზე გამოისახება (ან გენერირდება) HTML (და CSS) ენის ინსტრუმენტების დახმარებით. HTML არის Hiper Text Markup Language – ჰიპერტექსტური ინფორმაციის განლაგების ენა. კოდის აკრეფა შესაძლებელია ნებისმიერ ტექსტურ რედაქტორში HTML დოკუმენტი შედგება ტეგებისგან. ტეგის წარმოადგენს კონტეინერს ტეგს შეიძლება ჰქონდეს ატრიბუტი ყველა ვებგვერდი იწყება დოკტაიპით, შემდეგ მოდის html, შემდეგ head . ამ ტეგებს შორის არსებული კოდი ბრაუზერს ტექნიკურ ინფორმაციას აწვდის. შემდეგ განთავსებულია body ტეგი, ამ ტეგის გახსნიდან დახურვამდე არსებული ინფორმაცია გამოისახება ეკრანზე. დოკუმენტი უნდა დაიხუროს /html ტეგით მაშ ასე: სულაც ეს არის პირველი გაკვეთილი