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

მოგესალმებით! ბმული ვებგვერდის ყველაზე მნიშნელოვანი კომპონენტია. ის საშუალებას იძლევა მარტივად გადახვიდეთ ერთი საიტიდან მეორეზე. ყველაზე ხშირად თქვენ შემდეგი სახის ბმულები შეგხვდებიათ ბმული ერთი სატიდან მეორე საიტზე საიტის ერთი გვერდიდან ბმული ამავე საიტის სხვა გვერდზე ბმული გვერდის ერთი ნაწილიდან ამავე გვერდის სხვა ნაწილზე ბმულები, რომლებიც გარკვეულ მოქმედებას ახორციელებენ კიდევ არის ერთი განსაკუთრებული სახის ბმული, რომელიც საშუალებას იძლევა გაეშვას პროგრამა რომელიც ელექტრონულ წერილს გააგზავნის ამ ვიდეოგაკვეთილში თქვენ ნახავთ ბმულის ტეგს a და მის ატრიბუტებს: href, target, img, id, ასევე href=”#value” იმისთვის რომ გაიაზროთ რისი გაკეთება მინდა დააკვირდით საბოლოო პროდუქტს. თქვენ ხედავთ კოდს, რომლის შესრულების შედეგად ბრაუზერში გამოტანილი დააკვირდით ცხრილს: ვებ გვერდზე ბმულის მითითება ხდება a ტეგის საშუალებით. Href ატრიბუტის დახმარებით მიეთითება ვებ გვერდის მისამართი, რომელზეც უნდა გავიდეს მომხმარებელი ბმულზე დაჭერის შემთხვევაში. თუ საჭიროა სხვა საიტზე გადამისამართება, მაშინ Href ატრიბუტის მნიშვნელობა უნდა იყოს სრული URL მისამართი. თუ გინდათ თქვენი საიტის სხვა გვერდს მიმართოთ, მაშინ Href ატრიბუტის მნიშვნელობა შესაძლებელია იყოს მხოლოდ ფაილის სახელი (თუ რათქმაუნდა, ორივე ფაილი ერთ საქაღალდეშია მოთავსებული). საქაღალდეების სტრუქტურაზე ამ ვიდეოგაკვეთილში არ ვისაუბრებთ). ერთადერთი მნიშვნელოვანი შეთანხმება, რაც უნდა იყოს ფაილში, რომლის სახელი იქნება Index.html. ნაგულისხმევ კონფიგურაციაში ამ ფაილს ცნობს როგორც Apache, ასევე მაიკროსოფტის IIS. ბმულის ტექსტებს ნაგულისხმევ ვარიანტში ბრაუზერები ლურჯი ფერით და გახაზული ტექსტით გამოსახავენ. თუ a ელემენტში ჩასვამთ img ტეგს, სურათი გამოყენებული იქნება როგორც ბმული. id ატრიბუტის დახმარებით ხდება ბმულზე იდენტიფიკატორის მინიჭება. href=”#value” ატრიბუტით შესაძლებელია ამავე გვერდზე არსებულ ნაწილზე გადასვლა. ეკრანზე მითითებული მოკლე ბმულიდან goo.gl/ai6M1k გადმოიწერეთ ფაილ les6.zip. ამოიღეთ ეს ფაილები არქივიდან მე-6 გაკვეთილის საქაღალდეში გადაიტანეთ. ამ საქაღალდეში განთავსებულია 5 ფაილი. Index.html Spring.html Summer.html Autumn.html Winter.html საქაღალდეში images კი წერია 6 ფაილი 4season.png, autumn.png, logo.png, spring.png, summer.png და winter.png Notepad++ პროგრამის დახმარებით გახსენით index.html ფაილი. ამისთვის შეგიძლიათ ჯერ გახსნათ პროგრამა Notepad ++ და შემდეგ დააჭიროთ File-open, მიუთითოთ მე-6 გაკვეთილის საქაღალდის მდებარეობა, (ალბათ სამუშაო მაგიდა, html და les 6. ) ან მეორე ვარიანტი: გადადით საქაღალდეში სადაც წერია მე-6 გაკვეთილის ფაილები, თაგვის მარჯვენა კლავიშით დააჭირეთ index.html ფაილს. კონტექსტურ მენიუში თაგვის მარცხენა კლავიშით დააჭირეთ წარწერას Edit with notepad++. დააკვირდით კოდს. აქ ჩანს სათაურის ტექსტი: „საწყისი | გაზაფხული | ზაფხული | შემოდგომა | ზამთარი“. შემდეგ გამოტანილია სურათი 4seasons.png. სურათის შემდეგა გამოტანილია მისალმების ტექსტი. რაც შეეხება უშუალოდ მისალმების ტექსტს, ის აღებულია Lorem Ipsum ტექსტის გენერატორის გვერდიდან. ეს ტექსტი გამოიყენება დიზაინის შაბლონების დასამზადებლად 1500 წლებიდან. უფრო კონკრეტულად ეს ინფორმაცია შეგიძლიათ იხილოთ Lorem Ipsum-ის ქართულ ვებგვერდზე. მისამართი მოცემულია ეკრანზე. ცოტა ქვევით კი ხედავთ ტექსტს სადაც აღწერილია 4 მნიშნელოვანი ფაქტი წელიწადის დროების შესახებ. ასევე გახსენით დანარჩენი გვერდების კოდის ფაილებიც. ყველა კოდი ერთნაირი სტრუქტურითაა აწყობილი. ყველა გვერდს აქვს სათაურის ტექსტი „საწყისი | გაზაფხული | ზაფხული | შემოდგომა | ზამთარი“. შემდეგ გამოტანილია ფაილის შესაბამისი წელიწადის დროის სურათი. სურათის შემდეგ კი წელიწადის დროის შესაბამისი ტექსტია მოტანილი ოღონ Lorem Ipsum ფორმატში . შეამოწმეთ გადმოწერილი კოდები. ამისთვის დააჭირეთ Run-Lunch in Chrome. თქვენ ხედავთ, გვერდებს, რომლებიც შეიცავენ წარწერებს და სურათებს, ასევე დამატებით ტექსტებს... მაშ ასე. დავალება: დააკვირდით საბოლოო პროდუქტს: უნდა დაწეროთ ვებ გვერდის ისეთი კოდი, რომლის ბრაუზერში გახსნის შემდეგ წელიწადის დროების წარწერაზე დაჭერის შემდეგ გვერდი გადავა წელიწადის შესაბამისი დროის გვერდზე. ანუ წარწერებს „საწყისი | გაზაფხული | ზაფხული | შემოდგომა | ზამთარი“ უნდა გავუკეთოთ ბმულები. გახსენით Index.html გვერდის კოდი. p ტეგის შემდეგ ჩაწერეთ ბმულის გამხსნელი ტეგი a. ტეგის შიგნით აკრიფეთ ატრიბუტი href="index.html". კურსორი გადაიყვანეთ სიტყვა „საწყისი ბოლოში და დახურეთ ბმულის /a ტეგი. ამ ეტაპზე შეტანილი ცვლილების შემოწმებისგან თავი შეიკავეთ. თუმცა ძალიან თუ გაინტერესებთ, არც არავინ გიშლით. კურსორი გადაიყვანეთ გაზაფხული სიტყვის დასაწყისში და აკრიფეთ ბმულის გამხსნელი a ტეგი. ტეგის შიგნით აკრიფეთ ატრიბუტი href="spring.html". არ გამოგრჩეთ მეტობის ნიშანი. ასევე ფაილის სახელი ორმაგ ბრჭყალებშია ჩასმული. კურსორი გადაიყვანეთ სიტყვა გაზაფხულის ბოლოში და კოდს დაამატეთ დამხურავი ტეგი /a. ვფიქრობ ახლა სწორედაც დროა შეამოწმოთ თქვენი კოდი. ამისთვის დისკეტის ნახატზე დაჭერით დაიმახსოვრეთ კოდში შეტანილი ცვლილებები. დააჭირეთ Run-Lunch in Chrome. თქვენ ხედავთ გვერდს, სადაც სიტყვები საწყისი და გაზაფხული არის ბმულები. დააჭირეთ გაზაფხულის ბმულს და ბრაუზერში საწყისი გვერდი შეიცვლება გაზაფხულის გვერდით. ამჯერად თქვენ ხედავთ რომ spring.html-ში ბმულები არ მუშაობენ. ეს სიტუაცია ცოტა მოგვიანებით გავასწოროთ. ახლა დახურეთ ბრაუზერი და დაუბრუნდით index.html ფაილს და დანარჩენი თვეებისთვისაც გააკეთეთ ბმულები, ისე როგორც ეს ეკრანზეა ნაჩვენები. ზაფხულის ბმული უნდა იყოს summer.html შემოდგომის ბმული — autumn.html ხოლო ზამთრის ბმული უნდა გადადიოდეს Winter.html გვერდზე. ეცადეთ კოდი ადვილად აღქმადი იყოს. გადაამოწმეთ შეტანილი ცვლილებები. ყურადღება მიაქცეთ ტეგების გახსნას და დახურვას. ორმაგ ბრჭყალებს. გახსოვდეთ, თითოეული უმნიშვნელო სიმბოლო კოდში შეიძლება მნიშვნელოვანი შეცდომის საფუძველი გახდეს. დროა შეამოწმოთ თქვენი კოდი. ამისთვის დისკეტის ნახატზე დაჭერით დაიმახსოვრეთ კოდში შეტანილი ცვლილებები. დააჭირეთ Run-Lunch in Chrome. თქვენ ხედავთ გვერდს, სადაც სიტყვები საწყისი და გაზაფხული არის ბმულები. დააჭირეთ დანარჩენ ბმულებს. თუ ყველაფერი სწორად გააკეთეთ, ბმულებმაც სწორად უნდა იმუშაოს. ახლა სწორედაც დროა ამ გვერდებიდან უკან დასაბრუნებელ ბმულებზე იფიქროთ. თუმცა ეს ადვილი ამოცანაა. თქვენ უკვე გახსნილი გაქვთ დანარჩენი ფაილები Spring.html, Summer.html, Autumn.html და Winter.html. index.html-ში მონიშნეთ მთელი პირველი პარაგრაფის ელემენტის კოდი. გააკეთეთ ასლი. გადადით ფაილში spring.html 1. პირველი აბზაცის გამოტანის ელემენტი შეცვალეთ დამახსოვრებული კოდით 2. დაიმახსოვრეთ შეტანილი ცვლილებები. 1. და 2. მოქმედებები თანმიმდევრობით გაიმეორეთ Summer.html, Autumn.html და Winter.html ფაილებისთვის. შეამოწმოთ შეტანილი ცვლილებები. გადადით ფაილზე index.html. დააჭირეთ Run-Lunch in Chrome. დააკვირდით გვერდს. გვერდის დასახელება არის წელიწადის დროები. ფაილის სახელი არის index.html. დააჭირეთ ბმულს გაზაფხული. ვებგვერდის შიგთავსი შეიცვლება გაზაფხულის ინფორმაციით. გვერდის სათაური არის გაზაფხული. ხოლო ფაილის სახელია spring.html. ამ გვერდიდან შეგიძლიათ გადახვიდეთ წელიწადის დროის ნებისმიერ გვერდზე და ნებისმიერი გვერდიდან შესაძლებელია დასაწყისში დაბრუნება. შევაჯამოთ ნანახი ვიდეოგაკვეთილი ვებ გვერდში ბმულის მითითება ხდება a ტეგის საშუალებით. Href ატრიბუტის დახმარებით მიეთითება ვებ გვერდის მისამართი, რომელზეც უნდა გავიდეს მომხმარებელი ბმულზე დაჭერის შემთხვევაში. ვებსაიტის პირველ გვერდს ყოველთვის დაარქვით სახელი Index.html აუცილებლად ნახეთ ვიდეოგაკვეთილი ბმულის სხვა ატრიბუტების შესახებ, რომელიც განთავსებულია ამავე ვებგვერდზე. ამით დაგემშვიდობებით