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

მოგესალმებით! ამ ვიდეოგაკვეთილში თქვენ ნახავთ ბმულის ტეგს a და მის ატრიბუტებს: href=”#value”, img და id. იმისთვის რომ გაიაზროთ რისი გაკეთება მინდა დააკვირდით საბოლოო პროდუქტს. თქვენ ხედავთ კოდს, რომლის შესრულების შედეგად ბრაუზერში გამოტანილ ვებგვერდზე კონტაქტების ბმულით შესაძლებელია გადახვიდეთ ამავე გვერდის ბოლოში, აქვე მოხვედრა შესაძლებელია წელიწადის დროების სხვა გვერდებიდანაც. ხოლო გაზაფხულის, ზაფხულის, შემოდგომის გვერდებიდან ლოგოზე (ანუ სურათზე) დაჭერის შემდეგ თქვენ ხვდებით საიტის დასაწყისში ანუ პირველ გვერდზე. Notepad++ პროგრამის დახმარებით გახსენით index.html ფაილი. ამ ფაილის გახსნა ახსნილი ბმულის ჩასმის ვიდეოგაკვეთილში. დააკვირდით კოდს. p პარაგრაფის გამოტანის ტეგში თქვენ უკვე გაქვთ ბმულის ელემენტი, რომელიც მუშაობს სიტყვა „საწყისი“ დაჭერის შემთხვევაში. ის ასე გამოიყურება: a href="index.html"საწყისი |/a გააკეთეთ ამ ელემენტის ასლი და ჩასვით პარაგრაფის გამხსნელი ტეგის შემდეგ. ამ ელემენტში წაშალეთ სიტყვა „საწყისი“. ის უკვე აშკარად ზედმეტია. მის ადგილას ჩასვით ლოგოს სურათის ჩასმის კოდი. ამ კოდის ჩასასმელად კი შეგიძლიათ 4seasons.png სურათის გამოტანის კოდის ასლი ჩასვათ და შეიტანოთ შესაბამისი ცვლილებები, კერძოდ 4season.png მაგივრად გინდათ logo.png სურათის გამოტანა, შეცვალეთ alt და title ატრიბუტების ტექსტები. ასევე მნიშვნელოვანია არ გამოგრჩეთ ლოგოს სურათის ზომების სწორად მითითება ანუ width="77px" height="95px". საბოლოოდ კოდი შეადარეთ ეკრანზე ჩემს მიერ მიღებულ კოდს. a href="index.html" img src="images/logo.png" alt="4 სეზონის ლოგო" title="4 სეზონის ლოგო" width="77px" height="95px"/a გაიხსენეთ დავალება. ლოგოს გარდა ბმული უნდა გაუკეთოთ წარწერას „კონტაქტი“. ეს დავალება თქვენთვის სირთულეს არ უნდა წარმოდგენდეს. გააკეთეთ „ზამთარი“ ბმულის ელემენტის ასლი. ჩასვით ბმულის დამხურავი ტეგის შემდეგ დამახსოვრებული კოდი. მაგრამ ამჯერად href="winter.html"კოდი შეცვალეთ „#contact” კოდით ამ ბმულმა რომ იმუშაოს ამავე კოდში (ანუ ვებგვერდზე) უნდა მოინიშნოს ადგილი, რომელიც შეესაბამება აღნიშნულ ბმულს. ასეთი ადგილის მონიშვნა შესაძლებელია ნებისმიერ ტეგში id ატრიბუტის დახმარებით. თქვენ კი კურსორი გადაიყვანეთ h3 ტეგის შიგნით და დაამატეთ შემდეგი კოდი id="contact" დროა შეამოწმოთ თქვენი კოდი. ამისთვის დისკეტის ნახატზე დაჭერით დაიმახსოვრეთ კოდში შეტანილი ცვლილებები. დააჭირეთ Run-Lanch in Chrome. თქვენ ხედავთ გვერდს, სადაც ლოგოზე დაჭერით გვერდი თავიდან იტვირთება, ხოლო კონტაქტზე დაჭერის შემდეგ თქვენ გადადიხართ ვებ გვერდის იმ ნაწილში, სადაც მოცემულია საკონტაქტო ინფორმაცია. თუმცა ეს მხოლოდ index.html გვერდზე ხდება ასე. ადვილი მისახვედრია, რომ თუ index.html გვერდის პირველი პარაგრაფის ელემენტის ასლს სხვა გვერდებზეც ჩასვამთ და დაიმახსოვრებთ შეტანილ ცვლილებებს, ყველაფერმა უნდა იმუშაოს. თუმცა არ იჩქაროთ დასკვნების გაკეთება. ჯერჯერობით მხოლოდ spring.html ფაილით შემოიფარგლეთ. გააკეთეთ index.html გვერდის პირველი პარაგრაფის ელემენტის ასლი. ეს კოდი ჩასვით spring.html ფაილში body ტეგის შემდეგ, ისე როგორც ჩემთან არის. დაიმახსოვრეთ შეტანილი ცვლილებები დისკეტის ნახატზე დაჭერით. შეამოწმეთ მუშაობს თუ არა კოდში შეტანილი ცვლილებები. გადადით index.html ფაილზე. აქაც დაიმახსოვრეთ შეტანილი ცვლილებები. დააჭირეთ run-lanch in Chrome. დააჭირეთ გაზაფხულის ბმულს. გვერდი შეიცვლება. დააჭირეთ ლოგოს. თქვენ მოხვდებით index.html გვერდზე. ანუ ეს ბმული მუშაობს. ახლა ისევ გადადით გაზაფხულის გვერდზე და შეამოწმეთ კონტაქტების ბმული. აქ კი ეს ბმული არ მუშაობს. მართლაც გაზაფხულის გვერდზე არ არსებობს id რომლის სახელიც იქნება contact. თანაც თქვენ გჭირდება მიმართოთ index.html გვერდზე არსებულ contact იდენტიფიკატორს. ამიტომაც გახსენით spring.html კოდი და კონტაქტების ბმულში დაამატეთ იმ ვებგვერდის ფაილის სახელი, სადაც ასეთი ადგილი არის მონიშნული, ანუ index.html ყოველგვარი შესწორების გარეშე. საბოლოოდ გაზაფხულის ვებგვერდის კოდის ეს ნაწილი ასე უნდა გამოიყურებოდეს. a href="index.html#contact" გადავამოწმოთ შეტანილი ცვლილებები: დააჭირეთ Run- Lanch in Chrome დააჭირეთ გაზაფხულის ბმულს. შემდეგ — კონტაქტებს. ამ ბმულზე დაჭერის შემდეგ წესით თქვენ უნდა აღმოჩნდეთ index.html ვებ გვერდის იმ ნაწილში სადაც კონტაქტებზე საუბარი. ახლა კი spring.html გვერდის პირველი აბზაცის ასლი ჩასვით დანარჩენი 3 ფაილის კოდში. დაიმახსოვრეთ შეტანილი ცვლილებები და შეამოწმეთ ბრაუზერში. ამისთვის გადადით index.html ფაილში. დააჭირეთ Run-Lanch in Chrome. მართლაც კონტაქტების ბმული ყველგან გადადის index.html ის h3 id="#contact" ტეგით მონიშნულ ნაწილზე, სადაც წერია საკონტაქტო ინფორმაცია. ლოგოზე დაჭერით კი ნებისმიერი გვერდიდან გადადიხართ index.html გვერდზე. მეილით გაგზავნა.... . . .. . სწორედაც ესაა ყველაფერი, რისი ჩვენებაც ამ ვიდეოგაკვეთილში მინდოდა ისღა დამრჩენია შევაჯამოთ ნანახი ვიდეოგაკვეთილი ვებ გვერდზე სურათის საშუალებით ბმულის გასაკეთებლად a ტეგის ატრიბუტად უნდა გამოიყენოთ img href=”#value” ატრიბუტის დახმარებით შესაძებელია გვერდის კონკრეტულ, ამორჩეულ ნაწილზე გადასვლა. ასეთი ნაწილის ტეგი წინასწარ id ატრიბუტით უნდა მონიშნოთ. ასევე თქვენთვის შეიძლება საინტერესო იყოს ვიდეოგაკვეთილი ბმულის სხვა ატრიბუტების შესახებ, რომელიც განთავსებულია ამავე ვებგვერდზე. ამით დაგემშვიდობებით