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

მოგესალმებით! ალბათ უამრავი ვებ გვერდი გაქვთ ნანახი, სადაც გამოყენებულია სიები. HTML 5-ში გამოყენებულია 3 სახის სიები დაუნომრავი სიები ისეთი სიებია, სადაც სიის ელემენტების წინ რაიმე მარკერია დასმული. მაგალითად, წელიწადის დროების შავი წრეეებით მონიშნული ჩამონათვალი. დანომრილი სიების შემთხვევაში სიის თითოეული ელემენტი დანომრილია ციფრებით ან ანბანის ასოებით. ასეთი სიის მაგალითად შეგვიძლია განვიხილოთ მოსწავლეთა სახელობითი სია ჟურნალში, ან წლის თვეების თანმიმდევრობა. და მესამე, განმარტებების სია შედგება გარკვეული ტერმინების ჩამონათვალისგან, რომლეთაც ახლავს აღწერა ან განმარტება ვრცელი ტექსტის სახით. აქვე მინდა ავღნიშნო, რომ სიის თვისებების გამოყენებით შესაძლებელია ე.წ. DropDown მენიუების შექმნა. ასეთი მენიუები ხშირად გამოიყენება თანამედროვე ვებ გვერდებზე. მაგალითად აქ. იმისთვის, რომ გაიზაროთ რისი გაკეთება მინდა, გთხოვთ დააკვირდეთ საბოლოო პროდუქტს. თქვენ უნდა შექმნათ HTML კოდი, რომლის ბრაუზერში გახსნის შედეგად წელიწადის დროები ჩამოთვლილი იქნება შევსებული წრეების გამოყენებით , ხოლო წლის თვეები გადანომრილი იქნება მათი რიგითობის მიხედვით. მე უკვე გახსნილი მაქვს Notepad++, სადაც თქვენ ხედავთ ბოლო ნამუშევარ დოკუმენტს. File-Save as ბრძანებით ეს ფაილი შეინახეთ მესამე გაკვეთილის საქაღალდეში. ფაილის სახელად list დაარქვით........... კომენტარის ტექსტი შეცვალეთ ტექსტით „სიის ტეგები“ ხოლო ვებ გვერდის სათაურში აკრიფეთ წელიწადის დროები. ასევე h3. ტეგის გამოყენებით გაკეთეთ სათაური წელიწადის დროები. წაშალეთ პარაგრაფის ტეგები და შიგთავსი დაუნომრავი სიის აღსანიშნავად გამოიყენება ნაკლებობა მეტობის ნიშანში ჩასმული ტეგი ul და ის ასე გამოიყურება როგორც ეკრანზე ხედავთ. სიის თითოეული ელემენტი უნდა ჩასვათ გამხსნელ და დამხურავ ტეგში li. ნაგულისხმევ რეჟიმში ბრაუზერები თვითონ გააკეთებენ საჭირო დაცილებებს. body ტეგის შემდეგ აკრიფეთ კომენტარის გამხსნელი და დამხურავი ტეგი. გააკეთეთ ასლი და ჩასვით შემდეგ აბზაცზე. პირველი კომენტარის შიგნით აკრიფეთ ტექსტი „შემდეგი სტრიქონიდან იწყება დაუნომრავი სია“, ხოლო მეორე კომენტარის ტეგის შიგნით აკრიფეთ ტექსტი „ზედა სტრიქონზე დამთავრდა დაუნომრავი სია“. h3 ტეგის შემდეგ აკრიფეთ გამხსნელი და დამხურავი ტეგი ul. კურსორი გადაიყვანეთ ტეგის შიგნით, დააჭირეთ enter კლავიშას, ეს ტეგი მიუთითებს დაუნომრავი სიის დასაწყისს და დასასრულს. ტეგის შიგნით აკრიფეთ გამხსნელი და დამხურავი ტეგი li. ამ ტეგით ხდება სიის ელემენტის დასაწყისის და დასასრულის მითითება. თქვენთვის ცნობილია რომ წელიწადში ოთხი დროა. ამიტომ გააკეთეთ პირველი ელემენტის ასლი და ჩასვით 3 ჯერ შემდეგ სტრიქონებზე. კურსორი გადაიყვანეთ პირველი ელემენტის შიგნით და ჩაწერეთ სიტყვა გაზაფხული, მეორე სტრიქონში ზაფხული, მესამეში შემოდგომა, ხოლო მეოთხეში ზამთარი. ვფიქრობ პირველ ამოცანას თავი გაართვით. თქვენი კოდი შეადარეთ ჩემს მიერ აკრეფილ ლისტინგს. განსხვავების შემთხვევაში შეიტანეთ საჭირო ცვლილებები. დააჭირეთ დისკეტის ნახატს და შეინახეთ კოდში შეტანილი ცვლილებები. დააჭირეთ Run-Lanch in chrome. ვებ გვერდზე ჩამოთვლილი უნდა იყოს წელიწადის დროების სია შავი ბურთულების გამოყენებით. დახურეთ ბრაუზერი და დაუბრუნდით კოდს. კურსორი ჩასვით კომენტარის დამხურავი -- ტეგის შემდეგ. დააჭირეთ Enter კურსორი გააკეთეთ body ტეგის შემდეგ არსებული h3 ტეგის და კომენტარის ტეგის ასლი. გადადით ახალ აბზაცზე და ჩასვით დამახსოვრებული კოდის ასლი. ჩაასწორეთ ტექსტი. h3 ტეგში უნდა ეწეროს „წელიწადში 12 თვეა“. პირველ კომენტარში კი —„შემდეგი სტრიქონიდან იწყება დანომრილი სია“, ახალ სტრიქონზე გააკეთეთ კომენტარის კიდევ ერთი ასლი სადაც ეწერება „წინა სტრიქონზე დამთავრდა დანომრილი სია“ ხვდებით ალბათ რომ ამ სათაურის შემდეგ ერთიდან თორმეტამდე ჩამოთვლილი უნდა იყოს თვეების სახელები. დანომრილი სიის აღსანიშნავად გამოიყენება ნაკლებობა მეტობის ნიშანში ჩასმული ტეგი ol და ის ასე გამოიყურება როგორც ეკრანზე ხედავთ. სიის თითოეული ელემენტი უნდა ჩასვათ გამხსნელ და დამხურავ ტეგში li. კურსორი გადაიყვანეთ პირველი კომენტარის ბლოში დააჭირეთ Enter კლავიშას. კოდს დაემატება ახალი აბზაცი. აკრიფეთ გამხსნელი და დამხურავი ტეგი ol. კურსორი გადაიყვანეთ ტეგის შიგნით, დააჭირეთ enter კლავიშას, ეს ტეგი მიუთითებს დანომრილი სიის დასაწყისს და დასასრულს. ტეგის შიგნით აკრიფეთ გამხსნელი და დამხურავი ტეგი li. ამ ტეგით ხდება სიის ელემენტის დასაწყისის და დასასრულის მითითება. თქვენთვის ცნობილია რომ წელიწადში 12 თვეა. ამიტომ გააკეთეთ პირველი ელემენტის ასლი და ჩასვით 12 ჯერ ახალ ახალ სტრიქონებზე. კურსორი გადაიყვანეთ პირველი ელემენტის შიგნით და ჩაწერეთ სიტყვა იანვარი, მეორე სტრიქონში თებერვალი, და ა.შ. თქვენი კოდი ისე უნდა გამოიყურებოდეს როგორც ეკრაზე ხედავთ. თქვენი კოდი შეადარეთ ჩემს მიერ აკრეფილ ლისტინგს. განსხვავების შემთხვევაში შეიტანეთ საჭირო ცვლილებები. დააჭირეთ დისკეტის ნახატს და შეინახეთ კოდში შეტანილი ცვლილებები. დააჭირეთ Run-Lanch in chrome. ვებ გვერდზე წელიწადის დროების სიას უნდა დაემატოს თვეების ჩამონათვალი. თითოეული თვის წინ უნდა იყოს დაწერილი რიგითი ნომერი. დახურეთ ბრაუზერი და დაუბრუნდით კოდს. კურსორი გადაიყვანეთ ახალ აბზაცზე. ახლა ეკრანზე თქვენ ხედავთ განმარტებების სიის კოდს. ასეთი სიის შექმნას მე დეტალურად არ აღვწერ. ვფიქრობ კომენტარების დახმარებით ადვილი იქნება მისი აღქმა. გეტყვით რომ განმარტებების სია უნდა დაიწყოთ გამხსნელი და დამხურავი ტეგით dl. ტერემინი უნდა მონიშნოთ ტეგით dt. ხოლო ტერმინის განმარტება ტეგით dd. ასეთი ტეგებით მონიშნული ელემენტებისთვის ბრაუზერები თვითონ მოახდენენ ფორმატირებას. საბოლოოდ მე ასეთი ლისტინგი მივიღე. შეადარეთ თქვენს ნამუშევარს. დაიმახსოვრეთ და შეამოწმეთ. ისღა დამრჩენია შევაჯამო ვიდეოგაკვეთილი დაუნომრავი სიის გასაკეთებლად გამოიყენეთ ტეგი ul დანომრილი სიის გასაკეთებლად გამოიყენეთ ol ტეგი სიის სელემენტების დასამატებლად გამოიყენეთ li ტეგი განმარტებების სიის მონიშვნა ხდება dl ტეგით ტერმინის მითითება შესაძლებელია dt ტეგით ხოლო ტერმინის აღწერა ჩასმული უნდა იყოს ტეგში dd. რეფლექსიისთვის ტესტები, ნიმუშები და სავარჯიშოები შეგიძლიათ ნახოთ ვებგვერდზე devcom.ge. აქედანვე შეგიძლიათ ჩამოტვირთოთ ვიდეოგაკვეთილის რესურსები