TPDC ICT Videos

HTML 5

HTML (Hyper Text Markup Language – ჰიპერტექსტური ინფორმაციის განლაგების ენა) არის ვებ გვერდების შესაქმნელი ენა. უშეცდომოდ ფორმატირებულ HTML დოკუმენტს ასევე ვებ გვერდს უწოდებენ. HTML შექმნა ბრიტანელმა მეცნიერმა ტიმ ბერნს-ლი-მ დაახლოებით 1986-1991 წლებში. ამ ენის მართვას ახორციელებს W3C მსოფლიო ქსელის კონსორციუმი (w3c.org ხელმძღვანელია სერ ტიმოთი ჯონ ბერნს-ლი) და WHATWG (Web Hypertext Application Technology Working Group). ამ ვიდეოგაკვეთილებში ვეცდები განახოთ HTML ენის სემანატიკა და განვმარტო ტეგების გამოყენება რაც საკმარისი იქნება მარტივი ვებ გვერდის შესაქმნელად

პირველ სტრიქონზე კოდი იწყება დოკუმენტის ტიპის გამოცხადებით. HTML-ის მე-5 ვერსიაში DOCTYPE დეკლარაცია ყველაზე გამარტივებულია და ასე გამოიყურება: აქვე აღვნიშნავ, რომ დეკლარაცია არ არის HTML ტეგი, არამედ ის ბრაუზერს აცნობებს იმის შესახებ, თუ HTML რომელი ვერსიის გამოყენებით არის დაწერილი ვებ გვერდის კოდი. შემდეგ, მე-2 სტრიქონზე თქვენ ხედავთ გამხსნელი ტეგის , რომელიც სრულდება მე-11 სტრიქონზე დამხურავი ტეგით . როგორც ზევით აღვნიშნე. ყველა ვებგვერდი იწყება ტეგით და სრულდება დამხურავი ტეგით . მიაქციეთ ყურადღება Notepad++ რედაქტორის თავისებურებას: როგორც კი კურსორს ჩასვამთ ამოცნობილ ტეგში, რედაქტორი ცდილობს იპოვოს ტეგის შესაბამისი გამხსნელი და დამხურავი ტეგები. ამოცნობილი ტეგები იისფერი მარკერით მოინიშნება, ხოლო გამხნელი ტეგის წინ ნაკლებობის ნიშანი და დამხურავი ტეგის შემდეგ მეტობის ნიშანი გაწითლდება. ამ ფუნქციის გამოყენებით ადვილად შეძლებთ გააკონტროლოთ ტეგების არეალი. გთხოვთ დააკვირდეთ, ადვილი გასარკვევია სად იწყება ვთქვათ head ან ვთქვათ body ტეგი და სად მთავრდება. Html ელემენტი შეიცავს head (თავი) ელემენტს, რომელიც იწყება მე-3 ხაზზე გამხსნელი ტეგით და იხურება ტეგით მე-5 ხაზზე. ამ ტეგებს შორის არსებული ინფორმაცია ეკრანზე არ გამოისახება. აქ განთავსებულია ინფორმაცია გვერდის სათაურის შესახებ. ტეგის შიგნით არსებული ტეგი განსაზღვრავს ვებ გვერდის ზედა ნაწილს, მათ შორის სხვადასხვა მეტა მონაცემებს (დოკუმენტის თანმხლებ მონაცემებს). კოდის ამ ნაწილში შეძლება განთავსდეს CSS კასკადური სტილის კოდები ან მათზე ბმულის ელემენტი. ასევე ჯავასკრიპტის კოდები და ა.შ. ელემენტის შიგნით არსებული ტექსტი ვებ გვერდზე არ გამოისახება. ( ელემენტზე უკვე ვისაუბრეთ). ამ ნაწილში ხდება აგრეთვე დამხმარე გარე ფაილების მიბმა დოკუმენტზე. ასევე ბრაუზერს მიეწოდება სხვა ტექნიკური ინფორმაცია. მათ შორის მე-4 ხაზზე მოთავსებულია ელემენტი title. ეს ელემენტი უზრუნველყოფს დოკუმენტის სათაურის გამოტანას ბრაუზერის საინფორმაციო ზოლში. რათქმაუნდა ისიც იწყება გამხსნელი ტეგით <title> და იხურება ტეგით. ამის შემდეგ მე-6 ხაზზე არაფერია დაწერილი. ეს მეთოდი გამოიყენება იმისთვის რომ კოდის მკითხველმა (ადამიანმა) ადვილად შეძლოს კოდის სხვადასხვა ბლოკების ერთმანეთისგან გამიჯვნა. ბევრი ცნობილი ვებ დეველოპერი ამ მეთოდს იყენებს და თქვენც გირჩევთ გაითვალისწინოთ. მე-7 სტრიქონზე იწყება ელემენტი body (ტანი), გამხსნელი კოდი ამ შემთხვევაშიც < და > სიმბოლოებშია მოთავსებული, ხოლო მე-10 ხაზზე განთავსებული დამხურავი კოდი წესისამებრ სიმბოლოთი მთავრდება. შედეგად ჩანაწერს ასეთი სახე აქვს – . კოდის ამ ნაწილში იწერება ყველაფერი ის, რაც უნდა ნახოს ვებ გვერდზე შემოსულმა სტუმარმა. ეს შეიძლება იყოს ტექსტი, სურათი, აუდიო ან ვიდეო ინფორმაცია, ანიმაცია და ა.შ. Body ელემენტის შემდეგ მე-8 ხაზზე განთავსებულია h1 (heder – სათაური) ტეგი რომელიც გამხსნელ და დამხურავ ტეგებს შორის არსებულ ტექსტს დიდი ზომის შრიფტით გამოიტანს ეკრანზე. მიაქციეთ ყურადღება, რომ გამხსნელი და დამხურავი ტეგები ერთ ხაზზეა განლაგებული. სინტაქსის მოთხოვნებით, აუცილებელი არ არის ტეგები ცალცალკე ხაზებზე ჩამოვწეროთ, ჩაწერის ეს ფორმა მხოლოდამხოლოდ იმისთვის გამოიყენება, რომ კოდის ავტორისთვის ადვილი იყოს სორს კოდის ტექსტის აღქმა და გამართვა. მთელი კოდი ერთ სტრიქონზე თუნდაც ტეგებსშორის ჰაერის გამოუყენებლად ჩაგვეწერა, ბრაუზერი მას მაინც სწორად აღიქვამდა. ასევე ერთ ხაზზეა განლაგებული მე-9 ხაზზე განლაგებული კოდი. ამ სტრიქონზე განლაგებულია ელემენტი P, ეს ელემენტი უზრუნველყოფს შესაბამის ტეგებში განთავსებული ტექსტის ახალ სტრიქონზე გამოტანას. დიახ, მე-9 ხაზზე დაწერილი სტრიქონი

ტეგში განთავსებულ ტექსტს გამოიტანს ხოლო მე-10 სტრიქონზე კი მე-7 სტრიქონზე გახსნილი ტეგი იხურება ტეგით . ამის შემდეგ კი ისღა დაგვრჩენია დავხუროთ პირველ სტრიქონზე გახსნილი ტეგი . მინდა ავღნიშნო ერთი მნიშვნელოვანი ფაქტი: მთელი კოდი მოთავსებულია HTML ტეგის შიგნით, ასევე ტეგი ჩალაგებულია სხვა ტეგებში. მაგალითად head, body. ასევე აღსანიშნავია, რომ ეს ელემენტები, თვითონ შეიცავენ სხვა ელემენტებს. მაგალითად body შეიცავს h1 და p ელემენტებს. ანუ აშკარაა, რომ HTML ენაში ელემენტები შეიძლება ერთმანეთში ჩალაგდეს როგორც კონტეინერები. მნიშვნელოვანია არ გამოგრჩეთ რომელიმე ტეგის დახურვა. ანუ გახსნილი ელემენტი აუცილებლად უნდა დაიხუროს. მაგრამ ასევე მნიშვნელოვანია აღინიშნოს რომ თუ ერთ ტეგში ჩასვამთ ახალი ტეგს (რომელსაც ასევე აქვს დამხურავი ტეგი) ის უნდა დაიხუროს პირველი ტეგის დახურვამდე. აქვე მინდა ჩამოვწერო ტეგები, რომლებსაც არ აქვთ ცალკე დამხურავი ტეგები, ანუ ცარიელი ტეგები tegi მნიშვნელობა
ახალ სტრიქონზე გადასვლა გარე აპლიკაციის გამოყენება

ჰორიზონალური გამყოფი სურათის ჩასმა ინფორმაციის შესატანი ველი კასკადურის სტილის ფაილის მითითება მეტა მონაცემები მედიაფაილის მითითება აქ გვინდა სწორია და არაა სწორი (ცოტა მოგვიანებით გავეცნობით თვითდახურვად ელემენტებს). დასკვნის სახით გთხოვთ დააკვირდეთ შემდეგ ნახატს: ყველა HTML დოკუმენტი აუცილებლად შეიცავს მინიმუმ შემდეგ დეკლარაციას და ელემენტებს: , , და შეჯამება: ამ ვიდეოგაკვეთილით თქვენ ისწავლეთ რომ ნებისმიერი ვებგვერდი ეკრანზე გამოისახება (ან გენერირდება) HTML (და CSS) ენის ინსტრუმენტების დახმარებით. HTML არის Hiper Text Markup Language – ჰიპერტექსტური ინფორმაციის განლაგების ენა. კოდის აკრეფა შესაძლებელია ნებისმიერ ტექსტურ რედაქტორში HTML დოკუმენტი შედგება ტეგებისგან. ტეგის წარმოადგენს კონტეინერს ტეგს შეიძლება ჰქონდეს ატრიბუტი ყველა ვებგვერდი იწყება დოკტაიპით, შემდეგ მოდის , შემდეგ . ამ ტეგებს შორის არსებული კოდი ბრაუზერს ტექნიკურ ინფორმაციას აწვდის. შემდეგ განთავსებულია body ტეგი, ამ ტეგის გახსნიდან დახურვამდე არსებული ინფორმაცია გამოისახება ეკრანზე. დოკუმენტი უნდა დაიხუროს ტეგით მაშ ასე: სულაც ეს არის პირველი გაკვეთილი