პოსტების ამ სერიით დათოს ბლოგი გთავაზობთ ვებ დიზაინის გაკვეთილებს, რომლის სრული ვერსია განთავსებულია მასწავლებელთა პროფესიული განვითარების ეროვნული ცენტრის საგანმანათლებლო ტექნოლოგიების ციფრული რესურსების პორტალზე . ვინაიდან ამ პორტალზე შეუძლებელია პროგრამული კოდების ან სხვადასხვა საჭირო რესურსების განთავსება, გადავწყვიტე ყველა პროდუქტი ერთად განმეთავსებინა, თანაც ისეთნაირად რომ საავტორო უფლებებიც არ დამერღვია. ანუ მე კი ვარ ამ ვიდეობის ავტორი, მაგრამ ეს ვიდეობი მასწავლებელთა სახლმა იყიდა და საავოტო უფლებები გააჩნია მასწავლებელთა სახლს. შესაბამისად, ამ ეტაპზე მე მხოლოდ მათთან შეთანხმების გარეშე ბმულების განთავსება შემიძლია. მომავალში შეიძლება ან ახალი ვიდეოები გავაკეთო, ან მასწავლებელთა სახლს შევუთანხმდე მათ განთავსებაზე. ეს ყველაფერი დამოკიდებულია იმაზე, თუ რამდენად დაინტერესდებით თქვენ ამ თემით, ან საჭირო არის თუ არა ამ მასალის განთავსება დათოს ბლოგზე. კონკრეტულად ეს პოსტი ეძღვნება html კოდის აკრეფის თავსებურებას ვინაიდან HTML (და პროგრამული) კოდი თავისებურად იკრიფება. დააკვი...

ნახეთ ვიდეოგაკვეთილი შესავალი. პირველი დავალება Hello world! წაიკითხეთ ტექსტი   (.pdf) ნახეთ კოდი:

ნახეთ ვიდეოგაკვეთილი  html  რედაქტორი და კოდის აკრეფის თავისებურებები წაიკითხეთ ტექსტი   (.pdf)

ნახეთ ვიდეოგაკვეთილი რა არის html.  წაიკითხეთ ტექსტი   (.pdf) ასევე თქვენთვის შეიძლება, საინტერესო იყოს სხვა ვიდეოგაკვეთილები დატოვე კომენტარი     << წინა შემდეგი >>  

ამ პოსტში მინდა გაგაცნოთ HTML ენაში გამოყენებული ისეთ ტერმინები, როგორიცაა ელემენტი, ტეგი (გახსბა, დახურა), ატრიბუტი, მნიშვნელობა და ტეგის სახელი...  ტერმინების უკეთ გასაგებად ნახეთ სურათი: ნახეთ ვიდეოგაკვეთილი  ტერმინები (04:34 ვიდ). წაიკითხეთ ტექსტი  (.pdf) ასევე თქვენთვის შეიძლება, საინტერესო იყოს  სხვა ვიდეოგაკვეთილები დატოვეთ კომენტარი   << რა არის HTML კოდის სტრუქტურა >>  

ამ ვიდეოგაკვეთილში ნახავთ HTML კოდის სრუქტურას. სტრუქტურის უკეთ არსაქმელად დააკვირდით შემდეგ ნახატს:: ნახეთ ვიდეოგაკვეთილი  კოდის სტრუქტურა (09:04 ვიდ). წაიკითხეთ ტექსტი   (.pdf) ასევე თქვენთვის შეიძლება, საინტერესო იყოს  სხვა ვიდეოგაკვეთილები დატოვეთ კომენტარი   << ტერმინები ქართულენოვანი ტექსტი >>  

ნახეთ ვიდეოგაკვეთილი  ქართულენოვანი ტექსტი (05:34 ვიდ). წაიკითხეთ ტექსტი  (.pdf) ნახეთ კოდი: (შედეგისთვის დააჭირეთ წარწერას Result, რედაქტირებისთვის Edit in JSFiddle) ასევე თქვენთვის შეიძლება, საინტერესო იყოს  სხვა ვიდეოგაკვეთილები დატოვეთ კომენტარი   << კოდის სტუქტურა კომენტარები >>  

ნახეთ ვიდეოგაკვეთილი კომენტარები (02:32 ვიდ). წაიკითხეთ ტექსტი   (.pdf) ნახეთ კოდი: (შედეგისთვის დააჭირეთ წარწერას Result, რედაქტირებისთვის Edit in JSFiddle) ასევე თქვენთვის შეიძლება, საინტერესო იყოს  სხვა ვიდეოგაკვეთილები დატოვეთ კომენტარი   << ქართულენოვანი ტექსტი მუქი, დახრილი ტექსტი >>  

ნახეთ ვიდეოგაკვეთილი მუქი, დახრილი და გახაზული ტექსტი   (05:30 ვიდ). წაიკითხეთ ტექსტი   (.pdf) ნახეთ კოდი: (შედეგისთვის დააჭირეთ წარწერას Result, რედაქტირებისთვის Edit in JSFiddle) ასევე თქვენთვის შეიძლება, საინტერესო იყოს  სხვა ვიდეოგაკვეთილები დატოვეთ კომენტარი   << ქართულენოვანი  ტექსტი >>  

ნახეთ ვიდეოგაკვეთილი  სათაურები და აბზაცი  (05:23 ვიდ). წაიკითხეთ ტექსტი  (.pdf) ნახეთ კოდი:  (შედეგისთვის დააჭირეთ წარწერას Result, რედაქტირებისთვის Edit in JSFiddle) ასევე თქვენთვის შეიძლება, საინტერესო იყოს  სხვა ვიდეოგაკვეთილები დატოვეთ კომენტარი   << მუქი დახრილი ტექსტი სიის შექმნა   >>  

ნახეთ ვიდეოგაკვეთილი სიის შექმნა (08:23 ვიდ). წაიკითხეთ ტექსტი   (.pdf) ნახეთ კოდი: (შედეგისთვის დააჭირეთ წარწერას Result, რედაქტირებისთვის Edit in JSFiddle) ასევე თქვენთვის შეიძლება, საინტერესო იყოს  სხვა ვიდეოგაკვეთილები დატოვეთ კომენტარი   <<  სათაურები და აბზაცი  დანომრილი სია  >>  

ნახეთ ვიდეოგაკვეთილი დანომრილი სიის ატრიბუტები  (07:53 ვიდ). წაიკითხეთ ტექსტი   (.pdf) ნახეთ კოდი: (შედეგისთვის დააჭირეთ წარწერას Result, რედაქტირებისთვის Edit in JSFiddle) ასევე თქვენთვის შეიძლება, საინტერესო იყოს  სხვა ვიდეოგაკვეთილები დატოვეთ კომენტარი   << ქართულენოვანი  ტექსტი >>  

ნახეთ ვიდეოგაკვეთილი დაუნომრავი სიების ატრიბუტები (06:19 ვიდ). წაიკითხეთ ტექსტი   (.pdf) ნახეთ კოდი: (შედეგისთვის დააჭირეთ წარწერას Result, რედაქტირებისთვის Edit in JSFiddle) ასევე თქვენთვის შეიძლება, საინტერესო იყოს  სხვა ვიდეოგაკვეთილები დატოვეთ კომენტარი   << ქართულენოვანი  ტექსტი >>  

ნახეთ ვიდეოგაკვეთილი ჩაშენებული სიები  (04:35 ვიდ). წაიკითხეთ ტექსტი   (.pdf) ნახეთ კოდი: (შედეგისთვის დააჭირეთ წარწერას Result, რედაქტირებისთვის Edit in JSFiddle) ასევე თქვენთვის შეიძლება, საინტერესო იყოს  სხვა ვიდეოგაკვეთილები დატოვეთ კომენტარი   << ქართულენოვანი  ტექსტი >>  

ნახეთ ვიდეოგაკვეთილი ცხრილის ჩასმა (10:09 ვიდ). წაიკითხეთ ტექსტი   (.pdf) ნახეთ კოდი: (შედეგისთვის დააჭირეთ წარწერას Result, რედაქტირებისთვის Edit in JSFiddle) ასევე თქვენთვის შეიძლება, საინტერესო იყოს  სხვა ვიდეოგაკვეთილები დატოვეთ კომენტარი   << ქართულენოვანი  ტექსტი >>  

ნახეთ ვიდეოგაკვეთილი ცხრილის ატრიბუტები (08:53 ვიდ). წაიკითხეთ ტექსტი   (.pdf) ნახეთ კოდი: (შედეგისთვის დააჭირეთ წარწერას Result, რედაქტირებისთვის Edit in JSFiddle) ასევე თქვენთვის შეიძლება, საინტერესო იყოს  სხვა ვიდეოგაკვეთილები დატოვეთ კომენტარი   << ქართულენოვანი  ტექსტი >>  

ნახეთ ვიდეოგაკვეთილი სურათის ჩასმა  (12:41 ვიდ). წაიკითხეთ ტექსტი  (.pdf) შენიშვნა: კ ოდმა სწორად რომ იმუშაოს ჩამოტვირთეთ სურათი summer.jpg და განათავსეთ იმ საქაღალდეში, სადაც განთავსებულია თქვენს მიერ შექმნილი კოდი. დანარჩენი სურათები კი ჩამოტვირთეთ აქედან.  (ჩამოსატვირთად თაგვის მარცხენა კლავიშით დააჭირეთ ქვევით მიმართულ ისარს  . ეს არის image საქაღალდის .zip არქივი, სადაც მოთავსებულია დანარჩენი სურათები. ეს საქაღალდე მთლიანად გადაიტანეთ იმ საქაღალდეში, სადაც განთავსებულია თქვენს მიერ შექმნილი კოდი. ნახეთ კოდი: (შედეგისთვის დააჭირეთ წარწერას Result, რედაქტირებისთვის Edit in JSFiddle)   (კითხვა: რატომ არ ჩანს Result ვარიანტში სურათები? როგორ ფიქრობთ კოდში შეცდომაა? პასუხი:  ჩემს ბლოგზე Result ღილკზე დაჭერის შეთხვევაში სურათები არ გამოჩნდება, ვინაიდან კოდი ლოკალურ მანქანაზე სამუშაოდ არის გათვისწიენებული. მე რა თქმა უნდა შემეძლო სურათი ვებ სერვერიდან ჩამესვა, მაგრამ ამ შემთხვაში კოდის მუშაობა დამოკიდებული არ იქნებოდა თქვენს კომპიუტერ...

ნახეთ ვიდეოგაკვეთილი სურათის ატრიბუტები  (08:53 ვიდ). წაიკითხეთ ტექსტი   (.pdf) შენიშვნა:  კ ოდმა სწორად რომ იმუშაოს ჩამოტვირთეთ სურათი  summer.jpg  და განათავსეთ იმ საქაღალდეში, სადაც განთავსებულია თქვენს მიერ შექმნილი კოდი. დანარჩენი სურათები კი  ჩამოტვირთეთ აქედან.  (ჩამოსატვირთად თაგვის მარცხენა კლავიშით დააჭირეთ ქვევით მიმართულ ისარს  . ეს არის image საქაღალდის .zip არქივი, სადაც მოთავსებულია დანარჩენი სურათები. ეს საქაღალდე მთლიანად გადაიტანეთ იმ საქაღალდეში, სადაც განთავსებულია თქვენს მიერ შექმნილი კოდი. ნახეთ კოდი: (შედეგისთვის დააჭირეთ წარწერას Result, რედაქტირებისთვის Edit in JSFiddle)   (კითხვა: რატომ არ ჩანს Result ვარიანტში სურათები? როგორ ფიქრობთ კოდში შეცდომაა? პასუხი:  ჩემს ბლოგზე Result ღილკზე დაჭერის შეთხვევაში სურათები არ გამოჩნდება, ვინაიდან კოდი ლოკალურ მანქანაზე სამუშაოდ არის გათვისწიენებული. მე რა თქმა უნდა შემეძლო სურათი ვებ სერვერიდან ჩამესვა, მაგრამ ამ შემთხვაში კოდის მუშაობა დამოკიდებულ...

ნახეთ ვიდეოგაკვეთილი ბმულის ჩასმა (11:27 ვიდ). წაიკითხეთ ტექსტი   (.pdf) შენიშვნა: კოდმა სწორად რომ იმუშაოს,  სურათები  ჩამოტვირთეთ აქედან.  (ჩამოსატვირთად თაგვის მარცხენა კლავიშით დააჭირეთ ქვევით მიმართულ ისარს  . ეს არის image საქაღალდის .zip არქივი, სადაც მოთავსებულია გამოყენებული სურათები. ეს საქაღალდე მთლიანად გადაიტანეთ იმ საქაღალდეში, სადაც განთავსებულია თქვენს მიერ შექმნილი კოდი. ნახეთ კოდი:  index.html (შედეგისთვის დააჭირეთ წარწერას Result, რედაქტირებისთვის Edit in JSFiddle) autumn.html spring.html summer.html winter.html ასევე თქვენთვის შეიძლება, საინტერესო იყოს  სხვა ვიდეოგაკვეთილები დატოვეთ კომენტარი   << ქართულენოვანი  ტექსტი >>  

ნახეთ ვიდეოგაკვეთილი ბმულის ატრიბუტები  (11:07 ვიდ). წაიკითხეთ ტექსტი   (.pdf) შენიშვნა:  კოდმა სწორად რომ იმუშაოს,  სურათები  ჩამოტვირთეთ აქედან.  (ჩამოსატვირთად თაგვის მარცხენა კლავიშით დააჭირეთ ქვევით მიმართულ ისარს  . ეს არის image საქაღალდის .zip არქივი, სადაც მოთავსებულია გამოყენებული სურათები. ეს საქაღალდე მთლიანად გადაიტანეთ იმ საქაღალდეში, სადაც განთავსებულია თქვენს მიერ შექმნილი კოდი. ნახეთ კოდი: (შედეგისთვის დააჭირეთ წარწერას Result, რედაქტირებისთვის Edit in JSFiddle) index.html autumn.html spring.html summer.html winter.html ასევე თქვენთვის შეიძლება, საინტერესო იყოს  სხვა ვიდეოგაკვეთილები დატოვეთ კომენტარი   << ქართულენოვანი  ტექსტი >>