პირველი დავალება

1) გადმოწერეთ Notepad++  და დააინსტალირეთ. 
2) შექმენით ფოლდერი test_html და მასში განათავსეთ ფაილები index.html და style.css.
3) გადაიწერეთ მთავარი გვერდის კოდის ნიმუში და მასში განათავსეთ თქვენთვის სასურველი ტექსტი.


მეორე დავალება

შეადგინეთ 5-6 ელემენტიანი სიის მაგალითები. ელემენტები შეავსეთ თქვენთვის სასურველი ტექსტით.
ძირითადი მოთხოვნა: ერთერთი ელემენტი უნდა შეიცავდეს პატარა ზომის სურათს. 
ოდნავ გართულებული დავალება: სიის ერთი ელემენტი უნდა შეიცავდეს სხვა სიას.
მითითება: ვთქვათ სია შედგება ხილის ჩამონათვალისაგან (მსხალი, ვაშლი, ატამი, ბალი) და ვაშლი შეიცავს სხვადასხვა ჯიშს (სინაპი, კეხურა, ანტონოვკა).


მესამე დავალება

  თქვენს ძირითად ფოლდერში შექმენით ორი დამატებითი .html დოკუმენტი. მაგალითად,  page1.html  და page2.html. ბმულების საშუალებით დაამყარეთ ურთიერთკავშირი  ძირითად გვერდსა და ამ დამატებით გვერდებს შორის. 


მეოთხე დავალება

 მეოთხე დავალებაში შექმენით მარტივი საიტის კარკასი: პირველ სტრიქონში სურათი და სათაური, მეორე და მესამე სტრიქონში სურათი და ტექსტი, მეოთხე სტრიქონში "საკუჭნაო".  დაახლოებით ასეთი კარკასი ფერების გარეშე
 
მეოთხე დავალება
 

 



მეექვსე დავალება (განმეორება)

გრძელდება ვებ პროგრამირების გაკვეთილები. შემდეგი შაბათისთვის გთხოვთ გადაიმეოროთ ყველა ნასწავლი ტეგის მართლწერა.
ასევე გთხოვთ დარეგისტრირდეთ უფასო ჰოსტინგზე http://0fees.us (იგივეა რაც  http://0fees.net), სადაც შემდგომში შეძლებთ თქვენი საიტის ატვირთვას.
გაითვალისწინეთ, რომ თქვენი ნიკი იგივე საიტის სახელი იქნება, ამიტომ ნორმალური ნიკი მოიფიქრეთ. აუცილებლად ცალკე ფაილში შეინახეთ ჰოსტინგიდან მოსული წერილი, სადაც ნაჩვენებია მართვის პარამეტრები.
 


დავალება (7) სტილების მინიჭებაზე

დაწვრილებითში მოცემულია საიტის და სტილის კოდები. სხვადასხვა მეთოდით შეცვალეთ ტექსტის შრიფტის ზომები და ფერი. ფერების კოდები ამ საიტზეა: ფერები 


დავალება: CSS ბლოკები (DIV)

შექმენით ერთი დიდი ბლოკი, მასში განათავსეთ სამი პატარა ბლოკი და და ამ სამიდან პირველში განათავსეთ ორი პატარა ბლოკი. გამოიყენეთ იდენტიფიკატორები და კლასები. მიანიჭეთ სხვადასხვა ფერი და ჩარჩოს სხვადასხვა სტილი. 


დავალება გაკვეთილისთვის სტილის თვისებები: სურათი ფონად, ფსევდო სელექტორი :HOVER და FLOAT

თითოეულ საკითხზე გააკეთეთ მაგალითები: 1) ბლოკის ფონად განათავსედ რაიმე სურათი. 2) ფსევდო-სელექტორის საშუალებით მაუსის მიტანისას შეცვალეთ შრიფტის ფერი რაიმე ბლოკში. 3) მოცემული კოდის გადაკეთებით განათავსეთ სამი ბლოკი ერთმანეთის გვერდით.


დავალება ( საიტი უფასო ჰოსტინგზე!)

ყველა მოსწავლე დარეგისტრირდეს უფასო სერვერზე, შექმნას თავისი საიტი, ატვირთოს წინა გაკვეთილის დავალება და საიტის ლინკი გამომიგზავნოს ფოსტაში.





დავალება 7-ე კლასისთვის

გადმოიწერეთ წითელი საიტის კოდები და გაარჩიეთ, ისე რომ მენიუს გაკეთება შეძლოთ.
 
 განახლებული გადმოსაწერი ვერსია. დამატებულია ტექსტის ბლოკი.

  ავტვირთე წითელი საიტის განახლებული ვერსია. ჩავამატე "გაგრძელების" ღილაკი და სრული ტექსტის ფაილი. ამ უკანასკნელში ჩავსვი სურათები.
გადმოწერეთ ფაილი და გაარჩიეთ კოდები.
თქვენი დავალებაა: მთავარი გვერდის მეორე შემოკლებული სტატია დაუკავშირდეს მის გაგრძელებას. ამისათვის შექმენით ფაილი fulltext2.html  უკან დაბრუნების ღილაკით.
P.S. ახალი css-კლასების შექმნა აღარ დაგჭირდებათ, გამოიყენეთ fulltext.html -ის კლასები.


წითელი საიტი სლაიდერით

 მე-8-ე კლასელთა საყურადღებოდ!
სავარჯიშო წითელ საიტზე დავამატე სლაიდშოუ. გადმოწერეთ საიტის კოდები, იპოვეთ სლაიდშოუს კოდი და  შეცვალეთ სურათები. შესაბამისი სურათები აიღეთ იმავე ზომის, რაც სანიმუშო სლაიდშოუზეა. სურათები განათავსეთ შესაბამის ფოლდერში.


ბუტსტრაპის ნიმუში

8-ე კლასელთა საყურადღებოდ: ავტვირთე ბუტსტრაპზე საიტის გასაკეთებელი შაბლონი. გამზადებულია ყველა საჭირო ფაილი. გადმოწერეთ აქედან და სავარჯიშოდ მიყევით https://www.w3schools.com/bootstrap/default.asp ტუტორიალს. გაარჩიეთ ყველაფერი ჩამოსაშლელ მენიუმდე.


ნაწილობრივ ადაპტირებული "წითელი" საიტი

   მე-7-ე და მე-8-ე კლასელთა საყურადღებოდ!
სულ რამოდენიმე წლის წინ მობილურებისათვის ცალკე დამოუკიდებელი საიტი იქმნებოდა, ე.წ. "ვაპ" საიტები. ამჟამად კი მობილურების, სმარტფონების და დესკტოპებისათვის იქმნება ერთი საიტი, რომელიც მორგებულია სხვადასხვა ზომის ეკრანებისათვის. ასეთ საიტებს ადაპტირებული ეწოდება. 
   ჩვენი სავარჯიშო "წითელი" საიტი არ იყო გათვალისწინებული სხვადასხვა ზომის ეკრანისთის, ის ფიქსირებული სიგანის იყო. გადავწყვიტე თქვენთვის ადაპტირებული საიტების გაკეთების შესახებ წარმოდგენის შესაქმნელად გადამეკეთებინა ადაპტირებულ საიტად. ამისათვის ყველა ძირითადი ბლოკის სიგანე გამოვსახე პროცენტებით, თან მივუთითე მაქსინალური სიგანე. შემდეგ ე.წ. მედია მიმართვის (media query) საშუალებით ეკრანის სხვადასხვა ზომებზე შევცვალე სტილები. და ბოლოს .html ფაილში გავუწერე სპეციალური მეტა ტეგი.
  მიღებული საიტის კოდები შეგიძლიათ გადმოწეროთ შემდეგი ლინკიდან: "ადაპტირებული წითელი საიტი"
  


დავალება მე-7-ე და მე-8-ე კლასელთათვის

სრულყოფილი საიტის შესაქმნელად საჭიროა ჯერ ის შეიქმნას ლოკალურ სერვერზე და შემდეგ გადავიტანოთ რეალურ ჰოსტინგზე. არსებობს ლოკალური სერვერების სხვადასხვა ვარიანტები. ერთ-ერთია დენვერი. გადმისაწერი ბმულია DENWER რომლის ინსტალაცია რუსულ ენაზეა (საიტზეა მოხმარების  ინსტრუქცია)
ლოკალური სერვერებიდან ყველაზე მარტივი გამოსაყენებელია Open Server, რომლის გადმოსაწერი ლინკი აქ არის:  გადმოწერა აირჩიეთ ბაზისური ვერსია.
ამ სერვერზე შეგვიძლია დავაინსტალიროდ რომელიმე ვებ-ძრავა. ჩვენ ავირჩიოთ DLE-11.3 ვერსია, განულებული (ჩემს მიერ) და დამატებული ქართული და ინგლისური ენების პაკეტით. გადმოვიწეროთ აქედან: გადმოწერა 
იმედია გაკვეთილი გახსოვთ და შეძლებთ ძრავის დაინსტალირებას (არ დაგავიწყდეთ ბაზის შექმნა).


ვალიდაცია და წერილის გაგზავნა

1) საიტიდან https://www.w3schools.com/ ამოიწერეთ სრული ფორმის კოდი    https://tryphp.w3schools.com/showphp.php?filename=demo_form_validation_complete და გადააკეთედ ისე, რომ მონაცემები $name; $email; $website(ჩაწერეთ სკოლის საიტი);  $comment; $gender; გადაეცეს შემსრულებელ სკრიპტს, მაგ; script.php, რომელიც ამ მონაცემებს გამოიტანს საიტზე.
2) შექმენით ფორმა შემდეგი შესატანი ველებით: სახელი, ფოსტა, თემა, გზავნილი  და გადაეცით ფოსტის გამგზავნ სკრიპტს. სკრიპტის ნიმუშად შეგიძლიათ გამოიყენოთ ან აქედან https://www.w3schools.com/php/func_mail_mail.asp აღებული გამგზავნი ნაწილი, ან ეს კოდი

	 <?php
	
	
	// Replace this with your own email address
	$siteOwnersEmail = 'user@website.com';
	
	
	
	
	if($_POST) {
	
	
	    $name = trim(stripslashes($_POST['contactName']));
	    $email = trim(stripslashes($_POST['contactEmail']));
	    $subject = trim(stripslashes($_POST['contactSubject']));
	    $contact_message = trim(stripslashes($_POST['contactMessage']));
	
	
	    // Check Name
	    if (strlen($name) < 2) {
	        $error['name'] = "Please enter your name.";
	    }
	    // Check Email
	    if (!preg_match('/^[a-z0-9&\'\.\-_\+]+@[a-z0-9\-]+\.([a-z0-9\-]+\.)*+[a-z]{2}/is', $email)) {
	        $error['email'] = "Please enter a valid email address.";
	    }
	    // Check Message
	    if (strlen($contact_message) < 15) {
	        $error['message'] = "Please enter your message. It should have at least 15 characters.";
	    }
	    // Subject
	    if ($subject == '') { $subject = "Contact Form Submission"; }
	
	
	
	
	    // Set Message
	    $message .= "<br />Email from: " . $name . "<br />";
	    $message .= "Email address: " . $email . "<br />";
	    $message .= "Subject: <br />";
	    $message .= $subject;
	    $message .= "<br />Message: <br />";
	    $message .= $contact_message;
	    $message .= "<br /> ----- <br /> This email was sent from your site's contact form. <br />";
	
	
	    // Set From: header
	    $from =  $name . " <" . $email . ">";
	
	
	    // Email Headers
	    $headers = "From: " . $from . "\r\n";
	    $headers .= "Reply-To: ". $email . "\r\n";
	    $headers .= "MIME-Version: 1.0\r\n";
	    $headers .= "Content-Type: text/html; charset=ISO-8859-1\r\n";
	
	
	
	
	    if (!$error) {
	
	
	        ini_set("sendmail_from", $siteOwnersEmail); // for windows server
	        $mail = mail($siteOwnersEmail, $subject, $message, $headers);
	
	
	        if ($mail) { echo "<html>  <a href='http://localhost/hotel'>OK</a></html>";}
	        else { echo "Something went wrong. Please try again."; }
	        
	    } # end if - no validation error
	
	
	    else {
	
	
	        $response = (isset($error['name'])) ? $error['name'] . "<br /> \n" : null;
	        $response .= (isset($error['email'])) ? $error['email'] . "<br /> \n" : null;
	        $response .= (isset($error['message'])) ? $error['message'] . "<br />" : null;
	        
	        echo $response;
	
	
	    } # end if - there was a validation error
	
	
	}
	
	
	?>
	
 
 
გაგზავნილ ფოსტას შეამოწმებთ დენვერის ტემპ-ფოლდერში.  tmp>!sendMail
უფრო რთული დავალება ნახეთ "დაწვრილებით..." -ში.


უფასო ჰოსტინგ http://0fees.us -ზე რეგისტრაცია (განახლებული ვარიანტი).

4 წლის წინ მოსწავლეებისათვის ჩავწერე ინსტრუქცია უფასო ჰოსტინგზე რეგისტრაციისათვის http://gess.dsl.ge/davaleba/108--.html ინსტრუქცია საკმაოდ მოკლე იყო და ზოგიერთი მნიშვნელოვანი მომენტი არ ჩანდა. გადავწყვიტე ამ ინსტრუქციის განახლება და იუტუბზე ატვირთვა. აქ ვდებ ამ ინსტრუქციის ბმულს:

აქ არის ვიდეო ინსტრუქცია



ფაილების ჰოსტინგზე ატვირთვა

 ჰოსტინგზე ფაილების ასატვირთად უმეტესად  გამოიყენება არა მისი ფაილ-მენეჯერი, არამედ გარე პროგრამები. ყველაზე ცნობილი პროგრამაა ფაილზილა, მაგრამ მე მინდა გაგაცნოთ არანაკლებ მოსახერხებელი უფასო პროგრამა WinSCP.  პროგრამა ჩამოტვირთედ აქედან . 
აქვე გეტყვით, რომ თუ ჩვენ გვაქვს მარტივი საიტი, სადაც ინფორმაციას ხშირად არ ვაახლებთ, მაშინ შეგვიძლია გამოვიყენოთ  მარტივი ადმინ-პანელი, რომელიც ჩამოტვირთედ აქედან. მისი საშუალებით ჰოსტინგზე შეგვიძლია შევცვალოთ ფაილების შიგთავსი.
ამ პროგრამების ინსტალაციის და გამოყენების ინსტრუქცია ჩავწერე ვიდეო გაკვეთილის სახით:
 




ვორდპრესში კატეგორიების, პოსტების და მენიუს შექმნა

ამ გაკვეთილში გასწავლით ვორდპრესის საიტისთვის კატეგორიების შექმნას, მასში პოსტების განთავსებას და ამ კატეგორიების მენიუს საშუალებით საიტზე გამოტანას. გადადით ბმულზე