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

მაშ ასე მე უკვე გახსნილი მაქვს Notepad++, სადაც თქვენ ხედავთ ბოლო ნამუშევარ დოკუმენტს. ეს ფაილი შეინახეთ მე-5 გაკვეთილის საქაღალდეში. ფაილის სახელად image attribute დაარქვით. შეცვალეთ კომენტარის, title და h3 ტეგის შიგთავსი ტექსტით „სურათის ატრიბუტები“. ამ გაკვეთილშიც იგივე სურათს გამოვიყენებთ, რასაც წინა გაკვეთილზე ვიყენებდით. ოღონდ მინდა ვიმუშაოთ .png ფორმატის ფაილზე. გახსოვთ ალბათ ეს სურათი image საქაღალდეშია განთავსებული. თუ ეს სურათი არ გაქვთ, შეგიძლიათ ჩამოტვირთოთ ეკრანზე მითითებული მისამართიდან https://goo.gl/Qx4Ra8 ან გამოიყენოთ ნებისმიერი სურათი. მნიშვნელოვანია და აუცილებელია, რომ საქაღალდის სახელი და ფაილის სახელი სრულად ემთხვეოდეს ერთმანეთს. არ გამოგრჩეთ სურათი მოთავსებულია კოდის საქაღალდეში კოდში წაშალეთ .jpg და .gif სურათების გამოტანის კოდი პირველ და მეორე აბზაცზე. ასევ მეოთხე აბზაციც. შეადარეთ, თქვენი კოდი გაკვეთილის დასაწყებად ასე უნდა გამოიყურებოდეს, როგორც ეკრანზეა მითითებული. კურსორი გადაიყვანეთ img ტეგის შიგნით და ბრჭყალების დახურვის შემდეგ დაამატეთ ატრიბუტი alt="ზაფხულის სურათი", ეს ატრიბუტი საშულებას იძლევა სურათის მაგივრად გამოტანილი იყოს ალტერნატიული ტექსტი იმ შემთხვევაში როცა რაიმე მიზეზით შეუძლებელია სურათის გამოსახვა. სურათი შეიძლება ეკრანზე რამდენიმე შემთხვევაში არ გამოდიოდეს. მაგალითად ბრაუზერს აქვს საშუალება არ გამოიტანოს სურათები. ეს პარამეტრი გამოიყენება იმ შემთხვევაში, როცა ნელი ინტერნეტკავშირია. ასევე სურათი შეიძლება არ გამოდიოდეს იმ შემთხვევაში, თუ სურათის URL შეცდომითაა მითითებული, ან როცა მომხმარებელი იყენებს აპარატურას, რომელსაც არ შეუძლია სურათის გამოტანა (მაგალითად ეკრანის წამკითხველი — ეს არის პროგრამა რომელიც ეკრანზე არსებულ ტექსტს კითხულობს და ახმოვანებს. ტექსტის გარდა სხვა სახის ინფორმაციას აიგნორებს). მსგავსი პროგრამა სურათის ადგილას ამ ტეგში მოცემულ ტექსტს წაიკითხავს. სწორედაც ეს უკანასკნელი მითითება არის მნიშვნელოვანი იმის გადასაწყვეტად, თუ რა უნდა ჩაიწეროს alt ატრიბუტის მნიშვნელობაში. თუ თქვენს მიერ ვებ გვერდზე გამოტანილი სურათი, მხოლოდ დეკორაციაა, შეგიძლიათ ეს ატრიბუტი ცარიელი დატოვოთ, მაგრამ თუ სურათი ტექსტური მასალის შემავსებელ თვალსაჩინოებას წარმოდგენს, მაშინ სცადეთ ამ ატრიბუტის დახმარებით სრულად აღწეროთ ის. alt ატრიბუტი არის img ტეგის აუცილებელი ატრიბუტი. ამ ატრიბუტის გარეშე გვერდი იმუშავებს მაგრამ ვალიდაციას ვერ გაივლის. (ვალიდაციზე ცალკე ვისაუბრებთ მოგვიანებით) ასევე ჰაერის გამოტოვებით შეგიძლიათ კოდში ჩაწეროთ title="ეს სურათი .png ფორმატშია ჩაწერილი" ატრიბუტი. ის უზრუნველყოფს მიმანიშნებელი ტექსტის გამოტანას სურათის არეში თაგვის კურსორის გადაადგილების შემთხვევაში. სხვათაშორის, title ატრიბუტი ასეთივე წარმატებით შეგიძლიათ გამოიყენოთ პარაგრაფის ტეგზეც. მოდით საცდეთ: p ტეგის შიგნით დაამატეთ title="ეს სურათი .png ფორმატშია ჩაწერილი" ატრიბუტი. შედეგად უნდა ვივარაუდოთ, რომ პარაგრაფის ველში კურსორის გადაადგილების შემთხვევაში ეკრანზე უნდა გამოვიდეს მოტივტივე დაფა წარწერით ეს სურათი .png ფორმატშია ჩაწერილი. მართლაც შეამოწმოთ მიღებული კოდი. ამისთვის დისკეტის ნახატზე დაჭერით დაიმახსოვრეთ კოდში შეტანილი ცვლილებები. დააჭირეთ Run-Lunch in Chrome. თქვენ ხედავთ ზაფხულის სურათს, რომელის არეში თაგვის კურსორის გადაადგილების შემთხვევაში გამოდის წარწერა ეს სურათი .png ფორმატშია ჩაწერილი. იგივე რეაქციას ხედავთ პარაგრაფის არეში თაგვის კურსორის გადაადგილების შემთხვევაშიც..... . როგორც ცნობილია, სურათი გაცილებით დიდხანს იტვირთება ამიტომ სასურველია კოდში მიუთითოთ სურათის ზომები. წინააღმდეგ შემთხვევაში გვერდი სურათის სრულ ჩატვირთვამდე იციმციმებს. ხოლო როცა ზომები მითითებულია, ბრაუზერი სურათისთვის გვერდზე დატოვებს საჭირო ადგილს და გადავა შემდეგი ინსტრუქციის შესრულებაზე (თუმცა ეს ბრაუზერზეც არის დამოკიდებული)“. სურათის ზომების გასაგებად გადადით საქაღალდეში (win OS) (mac show item info) სადაც წერია სურათი. კურსორი ახლოს მიიყვანეთ სურათის პიქტოგრამასთან, ამოტივდივდება დაფა სადაც შეგიძლიათ წაიკითხოთ სურათის სიგანე და სიმაღლე. იგივე პარამეტრების გაგება შეგიძლიათ, თუ სურათის პიქტოგრამაზე თაგვის მარჯვენა კლავიშით დააჭერთ. შემდეგ თვისებები- დამატებითი ინფორმაცია. გაითვალისწინეთ, სურათის ზომები წინასწარ ისე უნდა იყოს მორგებული გვერდის დიზაინს, რომ მისი ზომების შეცვლა საჭირო არ იყოს. HTML ზომების ატრიბუტების დახმარებით შესაძლებელია სურათის ორიგინალი ზომების შეცვლა მაგრამ რეკომენდებული არ არის. ახლა კი მინდა განახოთ თუ როგორ შეიძლება სურათის ზომის მითითება შესაძლებელია ორი ვარიანტის გამოყენება პირველი როგორც img ტეგის ატრიბუტი, ან როგორც CSS სტილის ატრიბუტები სცადეთ პირველი ვარიანტის გამოყენება ამისთვის პირველი პარაგრაფის გამოტანის კოდის ასლი ჩასვით შემდეგ სტრიქონზე. img ტეგის შიგნით დაამატეთ შემდეგი კოდი width="800px height="500px". პარაგრაფის შიგნით არსებული ტექსტი შეცვალეთ შემდეგით „ამ სურათის სიგანე 800 პიქსელია, სიმაღლე კი 500. ეკრანზე გამოსახულების სიმაღლისა და სიგანის მისათითებლად გამოიყენება px (ფი ექს) — პიქსელი. ამიტომ px მითითება აუცილებელი არ არის. ის ნაგულისხმევი ზომის ერთეულია.“ მიღებული კოდი ასე უნდა გამოიყურებოდეს როგორც ახლა ეკრანზე ხედავთ. შეამოწმეთ კოდში შეტანილი ცვლილებები. დააჭირეთ დისკეტის ნახატზე. შემდეგ Run-Lunch in Chrome. ამ ორ სურათს შორის განხვავება მათი ჩატვირთვის ტექნოლოგიაშია რომელიც რამდენიმე ხნით ადრე აღვწერე. ახლა ნახეთ სურათის ზომის მითითება img ტეგის style ატრიბუტის გამოყენებით. ამის საილუსტრაციოდ მეორე აბზაცის კოდის ასლი ჩასვით შემდეგ სტრიქონზე და შეიტანეთ შემდეგი ცვლილებები style="width:800px; height:500px;" . ჩაანაცვლეთ პარაგრაფის ტეგში ჩაწერილი ტექსტი შემდეგით „ამ სურათის ზომები Style ატრიბუტის გამოყენებით არის მითითებული.“ შეამოწმეთ კოდში შეტანილი ცვლილებები. დააჭირეთ დისკეტის ნახატზე. შემდეგ Run-Lunch in Chrome. თქვენ მესამე აბზაცზეც ხედავთ ზაფხულის სურათს. სურათის ზომის მისათითებლად HTML 5ში ორივე ვარიანტი ვალიდურია, მაგრამ გირჩევთ გამოიყენოთ style ვარიანტი, რათა დაზღვეული იყოთ კასკადური სტილების გამოყენებით სურათის ზომის ცვლილებიგან. ნათქვამის საილუსტრაციოდ ნახეთ მაგალითი ამ კოდში გამოყენებულია სტილი, რომელიც ითხოვს ყველა img ტეგში მოთავსებულმა ობიექტმა ეკრანის 100% დაიკავოს. ხოლო შემდეგ კოდში პირველ ვარიანტში მოცემულია სურათის ზომის მითითება style ატრიბუტის გამოყენებით, ხოლო შემდეგ პარაგრაფში სურათის ზომების მითითებას width და height ატრიბუტებით ვცდილობ. შედეგში ჩანს რომ პირველი პარაგრაფის კოდი სწორად მუშაობს. ხოლო მეორე არასწორად რადგან style მითითებულ ატრიბუტს უფრო მეტი პრიორიტეტი გააჩნია ვიდრე img ტეგის width და height ატრიბუტებს როგორც ნახეთ: HTML რიდერისთვის გამოიყენეთ ატრიბუტი alt, ვებ გვერდზე სურათის ზომების მისათითებლად გამოიყენთ ატრიბუტი style ან width და height. გირჩევთ გამოიყენოთ style ვარიანტი Title ატრიბუტი გამოიყენება სურათის არეში კურსორის გადაადგილების დროს ტექსტის გამოსატანად კოდში აუცილებლად მიუთითეთ სურათის სიგანე და სიმაღლე. ეს მნიშვნელოვნად შეამცირებს გვერდის ჩატვირთვის დროს. სურათის ერთ-ერთი ატრიბუტი ასევე შეიძლება იყოს map ტეგი, რომლის დამხმარებით სურათზე შეიძლება მოინიშნოს გარკვეული ადგილები ბმულის სახით სურათი შეიძლება ჩასვათ პარაგრაფში ნებისმიერ ადგილას. პარაგრაფში ჩასმული სურათი შეგიძლიათ გაასწოროთ პარაგრაფიდან მარჯვნივ ან მარცხნივ style="float:left;width:42px;height:42px;" ატრიბუტის დახმარებით ასევე თქვენთვის შეიძლება საინტერესო იყოს ვიდეოგაკვეთილი სურათის ჩასმის შესახებ, რომელიც განთავსებულია ამავე ვებგვრდზე. ამით დაგემშვიდობებით