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

მოგესალმებით! ამ ვიდეოში დაუნომრავის სიის ატრიბუტების შესახებ მინდა გესაუბროთ, რაც შეეხება ასეთი სიის შექმნას, თქვენ შეგიძლიათ ნახოთ ვიდეოგაკვეთილი დანომრილი და დაუნომრავი სიების შესახებ, რომელიც ამავე ვებგვერდზეა განთავსებული. ვებ გვერდზე დაუნომრავი სიის ატრიბუტად გამოიყენება CSS style. მისი ერთერთი პარამეტრი შეიძლება იყოს list-style-type. დააკვირდით ცხრილს. ამ უკანასკნელისთვის განსაზღვრულია შემდეგი მნიშვნელობები: დაუნომრავი სიის CSS list-style-type მნიშვნელობები იმისთვის, რომ გაიზაროთ რისი გაკეთება მინდა, გთხოვთ დააკვირდეთ საბოლოო პროდუქტს. თქვენ უნდა შექმნათ HTML კოდი, რომლის ბრაუზერში გახსნის შედეგად წელიწადის დროები ჩამოთვლილი უნდა იყოს შევსებული, შავი წრეებით, ზაფხულის თვეები — თეთრი, შეუვსებელი წრეებით, შემოდგომის თვეები — კვადრატით, ხოლო ზამთრის თვეებს არანაირი ნიშანი არ უნდა ჰქონდეს. მე უკვე გახსნილი მაქვს Notepad++, სადაც თქვენ ხედავთ ბოლო ნამუშევარ დოკუმენტს. File-Save as ბრძანებით ეს ფაილი შეინახეთ მესამე გაკვეთილის საქაღალდეში. ფაილის სახელად unordered list დაარქვით........... თქვენ წინა გაკვეთილში უკვე ნახეთ სიის დანომვრა შევსებული წრეების გამოყენებით. ამ კოდს ახლა თქვენ ეკრანზე უყურებთ და ამჩნევთ, რომ შევსებული წრეებით დანომრისთვის რაიმე განსაკუთრებული მითითება არ გაგიკეთებიათ. ეს მოხდა იმიტომ რომ ბრაუზერი ნაგულისხმევ ვარიანტში დაუნომრავ სიებს შევსებული წრეებით ნომრავს. თუმცა თქვენ შეგიძლიათ არ ენდოთ ნაგულისხმევ კონფიგურაციას და კოდის დახმარებით აშკარად მიუთითოთ დანომვრის ტიპი მუშაობის გასაგრძელებლად მოვაწესრიგოთ კოდი. head და title ტეგში არსებული ტექსტები შეცვალეთ ტექსტით „დაუნომრავი სიების ატრიბუტები“. კომენტარების წყვილები ასევე შეცვალეთ ისე, როგორც ეკრანზეა მითითებული. (იწყება/დამთავრდა სია შევსებული წრეებით) h3 ტეგის ტექსტი კი შეცვალეთ „დაუნომრავი სია შევსებული წრეებით“ თქვენ უკვე წინა გაკვეთილზე გაქვთ აკრეფილი კოდი, რომელსაც წელიწადის დროები შევსებული წრეებით გამოჰქონდა, დატოვეთ ეს კოდი, ხოლო თვეების სიის კოდი სათაურის და კომენტარების ჩათვლით წაშალეთ. ამ კოდში ul ტეგის შიგნით დაამატეთ ატრიბუტი style და მისი მნიშვნელობა ტოლია ="list-style-type:disc". სწორედ ეს კოდი გამოიტანს დაუნომრავი სიის თითოეული ელემენტის წინ შევსებულ წრეს. გააკეთეთ გამხსნელ body ტეგის და დამხურავი /body ტეგის შიგნით არსებული მთელი კოდის ასლი, კურსორი გადაიყვანეთ ახალ აბზაცზე და დამახსოვრებული კოდი ჩასვით ახალ ახალ აბზაცზე 3 -ჯერ. h3 ტეგის ტექსტი გადაკეთეთ „სია წრეების სიმბოლოებით“ ასევ შეასწორეთ კომენტარების ტექსტი „აქ იწყება სია წრეების სიმბოლოებით“ და „აქ მთავრდება სია წრეების სიმბოლოებით“ ასევე შეცვალეთ სათაური და კომენტარების წყვილი სიის კვადრატით დასანომრად. ხოლო ბოლო h3 ტეგის და კომენტარების წყვილის ტექსტი შეცვალეთ „სია ნიშნების გარეშე“ დაიწყეთ კოდის შეცვლა. იქ სადაც წერია „სია წრეების სიმბოლოებით“ style ატრიბუტის მნიშვნელობა ტოლი უნდა იყოს ="list-style-type:circle". შესაბამისად ამ კოდით მონიშნული სიის ელემენტების წინ წრეები გამოისახება. შემდეგ სტრიქონზე style ატრიბუტის მნიშვნელობა შეცვალეთ ="list-style-type:square". ამ კოდის შედეგად წელიწადის დროების წინ შავი კვადრატები დაისმევა. და ბოლოს საჭიროა ისეთი სიის გაკეთება, რომლის ელემენტების წინ, არანაირი სიმბოლოები არ იქნება გამოსახული. ამისთვის disc შეცვალეთ none კოდით ამით დასრულდა კოდის მოდიფიკაცია. დააჭირეთ დისკეტის ნახატს და დაიმახსოვრეთ კოდში შეტანილი ცვლილებები. შეამოწმეთ მიღებული კოდი. დააჭირეთ Run- Launch in Chrome მართლაც თქვენ ხედავთ წელიწადის დროების სიებს, რომლებიც ერთ შემთხვევაში დანომრილია შევსებული წრეებით, შემდეგი სია დანომრილია ცარიელი წრეებით, მესამე სია კვადრატებითაა გამოტანილი. ხოლო ბოლოს მოცემულ სიას არანაირი ნიშანი არ აქვს. დახურეთ ბრაუზერი. მე შევაჯამებ ნანახ ვიდეოგაკვეთილს დაუნომრავ სიაში შევსებული წრეების გამოსაყენებლად ul ტეგის style ატრიბუტის მნიშვნელობა უნდა იყოს ="list-style-type:disc". სიის ცარიელი წრეებით გამოსახატავად გამოიყენეთ კოდი ="list-style-type:circle". ნიშნის გარეშე სიის შესაქმენლად გამოიყენეთ ="list-style-type:none" მნიშვნელობა. რეფლექსიისთვის ტესტები, ნიმუშები და სავარჯიშოები შეგიძლიათ ნახოთ ვებგვერდზე devcom.ge. აქედანვე შეგიძლიათ ჩამოტვირთოთ ვიდეოგაკვეთილის რესურსები ასევე თქვენთვის შეიძლება საინტერესო იყოს ვიდეოგაკვეთილი დანომრილი და დაუნომრავი სიების შესახებ, რომელიც განთავსებულია ამავე ვებგვერდზე. ამით დაგემშვიდობებით