HTML 5

თავი 1. შესავალი
თავი 2. ტექსტთან მუშაობა
თავი 3. სიები
თავი 4. ცხრილთან მუშაობა
თავი 5. სურათთან მუშაობა
თავი 6. ბმულები
თავი 1. შესავალი
თავი 2. ტექსტთან მუშაობა
თავი 3. სიები
თავი 4. ცხრილთან მუშაობა
თავი 5. სურათთან მუშაობა
თავი 6. ბმულები
HTML (Hyper Text Markup Language – ჰიპერტექსტური ინფორმაციის განლაგების ენა) არის ვებ გვერდების შესაქმნელი ენა. უშეცდომოდ ფორმატირებულ HTML დოკუმენტს ასევე ვებ გვერდს უწოდებენ. HTML შექმნა ბრიტანელმა მეცნიერმა ტიმ ბერნს-ლი-მ დაახლოებით 1986-1991 წლებში. ამ ენის მართვას ახორციელებს W3C მსოფლიო ქსელის კონსორციუმი (w3c.org ხელმძღვანელია სერ ტიმოთი ჯონ ბერნს-ლი) და WHATWG (Web Hypertext Application Technology Working Group). ამ ვიდეოგაკვეთილებში ვეცდები განახოთ HTML ენის სემანატიკა და განვმარტო ტეგების გამოყენება რაც საკმარისი იქნება მარტივი ვებ გვერდის შესაქმნელად
მოგესალმებით ამ ვიდეოგაკვეთილში უნდა ვნახოთ სათაურების და აბზაცის ტეგები. თქვენ ამ ტეგებს უკვე იყენებდით მაგარამ ახლა უფრო დაზუსტებით ვნახოთ არსებულ ფაილს შევინახავ ახალი სახელით File-> Save as ღილაკის დამხარებით ფაილს დავარქმევ სახელი paragraf. მოქმედება დაასრულეტ ღილაკით შენახვა. დავაკოპირებ სათაურის ტეგს, და ჩავსვამ კიდევ 5 კერ, ვინაიდან არსებობს სათაურის 6 დონე. ადვილი მისახვედრია, რომ სიდიდი ცვლა ხდება ციფრების დახმარებით. დაიმახსოვრეთ შეტანილი ცვლილებები და დავაკვირდეთ ბრაუზერში რა მოხდება. როგორც ხედავთ, ყველაზე უფრო დიდი ზომის შრიფტი არის h1 ტეგში მოთავსებული ტექსტი, ხოლო h6 არის ყველაზე პატარა ზომის შრიფტით გაფორმებული ახლა ცვლილება შევიტანოთ პარაგრაფის ტექსტში ეს არის პირველი აბზაცი. აბზაცის მონიშვნა ხდება ნაკლებობა/მეტობის ნიშნებში ჩასმული p ტეგის გამოყენებით. ტექსტის ახალ აბზაცზე გადასატანად ტექსტი უნდა დაასრულოთ დამხურავი ტეგით ნაკლებობის ნიშანი მარჯვნივ დახრილი ხაზი p და მეტობის ნიშანი ეს არის მეორე აბზაცი. მიაქციეთ ყურადღება, რომ კოდში მე-15 სტრიქონზე გამოტოვებული ცარიელი სტრიქონი ვებ გვერდზე არ იქნება გამოტოვებული. კურსორის ახალ სტრიქონზე გადატანას მხოლოდ პარაგრაფის დამხურავი ტეგი უზრუნველყოფს. ეს კი მესამე აბზაცია. მე-19 სტრიქონზე გამოტოვებული ცარიელი სტრიქონი მხოლოდ კოდის ადვილად აღსაქმელად არის დატოვებული. ასევე კურსორი დაააიგნორებს კურსორის გადაყვანის უხილავ სიმბოლოებს, რომელტა დახმარებითაც კოდში ტექსტი განთავსებულია ახალ სტრიქონზე. არ გამოგრჩეთ პარაგრაფის დახურვის ტეგის აკრეფა. თუ ტეგს აქვს დამხურავი ტეგი, სასურველი გამხსნელი და დამხურავი ტეგი ერტდროულად აიკრიფოს, როგორც ამ პარაგრაფის აკრეფის დროს გავაკეტე. წყვილი ტეგის აკრეფის დროს არ დატოვოთ სიცარიელე ტეგებს შორის. ის არ დაგჭირდებათ და მაინც წასაშლელი გექნებათ. დავაკვირდეთ მიღებულ გამოსახულებას, ამისათვის დააჭირეთ ღილაკს Run-> Launch in Chrome და ჰოპს. სრულიად სხვა ტექსტი გვაქვს აკრეფილი და სოურს კოდში, ხოლო ბრაუზერში სხვა ინფორმაცია ჩანს. კიდევ ერთხელ შეგახსენებთ, რომ ეს მოხდა იმიტომ რომ დაგვავიწყდა დამახოვრების ღილაკზე დაჭერა. მე ეს მოქმედება მიზანმიმართულად გავაკეთე და აწი ასე არ გავაკეთებ. როგორც ხედავთ მე უკვე დავიმახსოვრე სოურს კოდში შეტანილი ცვლილებები და ისრა დამრჩენია, რომ განვაახლო გვერდი. მართლაც ბრაუზერში გამოჩნდა რამდენიმე პარაფრაფი. თუ გამოვიყენებთ ეკრანის გადიდების ფუნქციას, თქვენ ადვილად შემაჩნევთ თითოეული პარაგრაფის დაწყება დამთავრებას. ყურადრება მიაქციეთ იმ ფაქტს რომ, მე შეგპირდით, მე-15, მე-19 და 24-ე სტრიქონზებზე კოდში გამოყენებული ცარიელი სტრიქონები ბრაუზერში არ გამოჩნდებოდა. ის რასაც ახალ თქვენ ბრაუზერში სიცარიელედ ხედავთ, ეს არ არის მე-15, მე-19 და 24-ე სტრიქონზე დატოვებული სიცარიელე. არამედ, ეს არის პარაგრაფის პარამეტრი, პარაგრაფის შემდეგ ცარილი ადგილის დატოვება. ნათქვამის საილუსტრაციოდ მე წავშლი მესამე და მეოთხე პარაგრაფებს და მე15 სტრიქონიდან დავამატებ რამდენიმე ცარიელ სტრიქონს. რა თქმა უნდა დავიმახსოვრებ შეტანილ ცვლილებას, და განვაახლებ ბრაუზერს. ტქვენ აღმოაჩენთ, რომ ბრაუზერში ერტი ცარიელი სტრიქონია დატოვებული. სიმართლე გითხრათ ეს სტრიქონიც არ არის. ეს არის დაცილება პარაგრაფებს შორის. ნათქვამის საილუსტრაციოდ მე ამ ტეგს მოვნიშნავ, გავაკეთებ ასლს, და შემოვიტან პროგრამა ვორდში. დავაკვირდეთ პარაგრაფის პარამეტრებს. ხედავთ რომ Spacing Before და After ავტომატურად დაცილების რეჟიმზე. ზუსტად ამ პარამეტრის გამო არის დატოვებული სიცარიელე ამ ორ პარაგრაფს შორის. თუ თქენ ამ პარამეტრებს მოხსნით, მაშინ პარაფრაფებიც შეერთდება. პარაგრაფის ხვა პარამეტრები როგორციაა, მარცხნივ ჩასწორება, მარჯვნივ ან ცენტრში უნდა მიეთითოს CSS სტილების გამოყენებით. ამიტომ ამ თემას მე აქ არ შევეხები. მაშ ასე. თქვენ ამ ვიდეოგაკვეთილში ნახეთ სათაურის ტეგები h რომელიც უზრუნველყოფს ყველაზე დიდი ზომით სათაურის ტექსტის გამოტანას ბრაუზერში, აგრეთვე პარაფრაფის ტეგი p რომელიც უზრუნველყოფს ტექსტის გამოტანას ახალ სტრიქონზე გმადლობთ ყურადრებისთვის!

ახალი დამატებული