საიტის მთავარი გვერდი

<!DOCTYPE HTML>
<html>

<header>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>სასწავლო საიტი</title>
<link  href="style.css" type="text/css" rel="stylesheet" />
</header>

<body>
<h1 >ეს სასწავლო საიტია</h1>
<p>ეს საიტის ტექსტია...</p>
<p>ეს საიტის ტექსტია...</p>
<p>ეს საიტის ტექსტია...</p>
<br/>
<hr/>
<img src="sur3.jpg" alt="კლასი">
</body>

</html>



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

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


სია

 ვებ-პროგრამირებაში ძირითადად გამოიყენება ორი სახის სია: 1)არაგადანომრილი და 2)გადანომრილი. უფრო ხშირად დაგვჭირდება არაგადანომრილი სია.

კოდის მაგალითები:

არაგადანომრილი 


	 <ul>
	<li>პირველი ელემენტი</li>
	<li>მეორე ელემენტი</li>
	<li>მესამე ელემენტი</li>
	<li>მეოთხე ელემენტი</li>
	</ul>
	
 

გადანომრილი


	 <ol>
	<li>პირველი ელემენტი</li>
	<li>მეორე ელემენტი</li>
	<li>მესამე ელემენტი</li>
	<li>მეოთხე ელემენტი</li>
	</ol>
	
ამ სიების სტილიზაციას შემდეგ გაკვეთილებში განვიხილავთ.


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

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


ბმულები

საიტი წარმოუდგენელია სხვადასხვა გვერდებზე გადასასვლელი მენიუს და სხვა საიტებზე გადამისამართების გარეშე. სწორედ ამას ემსახურება ჰიპერ-ბმულები. კოდი შემდეგნაირად გამოიყურება
<a href="" title="" target="" >ტექსტი </a>, სადაც href="" -ში უნდა ჩავსვათ გვერდის მისამართი, title="" -ში სასურველი სახელი, target="" -ში კი იმის მიხედვით თუ სად გვინდა გაიხსნას ახალი გვერდი, იქვე თუ ახალ ფანჯარაში. თუ იქვე - არაფერს არ ვწერთ, თუ ახალ ფანჯარაში, მაშინ ვწერთ _blank. მაგალითი:
 <a href="http://gess.dsl.ge/" title="ჩვენი საიტი" target="_blank" >სასწავლო საიტი </a>  გადაგვამისამართებს ჩვენს საიტზე ახალ ფანჯარაში.
თუ ჩვენ ძირითად ფოლდერში შევქმნით სხვა .html გვერდს და მის მის სახელს ჩავწერთ href="" -ში, გადავალთ იმ ახალ გვერდზე. მაგალითი:
 <a href="page2.html" title="მეორე გვერდი" target="" >გადადი მეორე გვერდზე </a> 


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

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


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

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

 


ცხრილი

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

შენიშვნა: თქვენი დაწერილი კოდების სისწორე "ონლაინში" შეგიძლიათ შეამოწმოთ შემდეგ საიტებზე აქ და აქ
ვებ პროგრამირებაზე მასალები შეგიძლიათ იხილოთ აქ.



საიტზე ვიდეოს ჩამატება

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



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

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


საიტის ელემენტებისთვის სტილის მინიჭება

მხოლოდ HTML ტეგებში დაწერილი საიტი ძალიან უსახურად გამოიყურება. საიტს სილამაზეს აძლევს CSS სტილები. საიტისთვის სტილების მინიჭების სამი ხერხი არსებობს: 1) მიბმული სტილების ფაილით, 2) "ჰედერში" სტილის ჩასმით და 3) პირდაპირ  HTML ტეგში სტილის ჩასმით.
ყველაზე ხშირად გამოიყენება პირველი ვარიანტი. მეორე ვარიანტი გამოიყენება, როცა სტილის ფაილი მცირე სიდიდისაა, ხოლო მესამე ვარიანტი განსაკუთრებულ შემთხვევებში.


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

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


css ბლოკები (div)

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




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

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


სტილის თვისებები: სურათი ფონად, ფსევდო სელექტორი :hover და float

ამ გაკვეთილში ჩვენ განვიხილავთ ობიექტის რამდენიმე თვისებას, რომელიც სტილების საშუალებით განისაზღვრება. ესენია: 1)ობიექტისათვის უკანა ფონად სურათის დაყენება,  2)ე.წ. ფსევდო სელექტორი:hover , რომელიც ამოქმედდება მაუსის ობიექტთან მიტანისას და 3)თვისებას float, რომლითაც შეგვიძლია ბლოკები ერთმანეთის გვერდით ჰორიზონტალურად განვალაგოთ. 


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

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


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

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




პოზიცირება: აბსოლუტური და რელატიური

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



Z-INDEX

აბსოლუტური პოზიცირების დროს შესაძლებელია ბლოკების განლაგება სხვადასხვა შრეებზე, ამისათვის გამოიყენება ე.წ. z-index -ი. მას შეგვიძლია მივანიჭოთ ნებისმიერი რიცხვითი მნიშვნელობა, როგორც დადებითი, ასევე უარყობითი. ბლოკს რომელსაც უფრო მაღალი ინდექსი აქვს, უფრო ზედა შრეზე განთავსდება. 


დავალება 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 ვერსია, განულებული (ჩემს მიერ) და დამატებული ქართული და ინგლისური ენების პაკეტით. გადმოვიწეროთ აქედან: გადმოწერა 
იმედია გაკვეთილი გახსოვთ და შეძლებთ ძრავის დაინსტალირებას (არ დაგავიწყდეთ ბაზის შექმნა).


ბუტსტრაპ-4-ის მთავარი გვერდი

ბუტსტრაპ-4-ის მთავარი გვერდის კოდი
<!doctype html>
	<html lang="en">
	  <head>
	    <!-- Required meta tags -->
	    <meta charset="utf-8">
	    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
	
	
	    <!-- Bootstrap CSS -->
	    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous">
	    <link rel="stylesheet" href="css/main.css"  crossorigin="anonymous">
	
	
	    <title>ბუტსტრაპის გაკვეთილები</title>
	  </head>
	  <body>
	
	
	გამარჯობათ!
	  
	
	
	    <!-- Optional javascript -->
	    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
	    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
	    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
	    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js" integrity="sha384-smHYKdLADwkXOn1EmN1qk/HfnUcbVRZyYmZ4qpPea6sjB/pTJ0euyQp0Mk8ck+5T" crossorigin="anonymous"></script>
	  </body>
	</html>
 

ბუტსტრაპის მარტივი საიტი მენიუთი და სლაიდშოუთი შეგიძლიათ ჩამოტვირთოდ ქვემოთ მოცემული ბმულიდან:




HTML Form

ქვემოთ მოყვანილია HTML Form-ის მარტივი ნიმუში. ამ ნიმუშში მოყვანილია ყველა აუცილებელი ატრიბუტი:   action="/" ნიშნავს, რომ ფორმის დამმუშავებელი php კოდიც ამავე ფაილშია განთავსებული. method="post" ნიშნავს, რომ ფორმიდან მონაცემების გაგზავნა დამმუშავებელ სკრიპტში ხდება უხილავი მეთოდით. ფორმას აქვს მხოლოდ ერთი შესაყვანი ტექსტური ველი და მონაცემების გასაგზავნი ღილაკი. თავისთავად HTML Form-ა არაფერს არ აკეთებს დამმუშავებელი php  სკრიპტის გარეშე. ამ ნიმეშში სკრიპტი გამოითვლის შეყვანილი რიცხვი მარტივია თუ არა. სკრიპტში ამ კოდით $a = $_POST["a"]; გლობალური პარამეტრი გარდაიქმნება ლოკალურ $a პარამეტრად, რომლის დამუშავებაც ხდება. თუ ჩამოტვირთავთ ამ ფაილს, დაარქმევთ  index.php -ს და გაუშვებთ სერვერზე, ის შეასრულებს გამოთვლას.


	<!doctype html>
	<html lang="en">
	<head>
	    <!-- Required meta tags -->
	    <meta charset="utf-8">
	</head>
	<body>
	<center>
	<h2>HTML Forms</h2>
	
	
	 <form name="myform" action="/" method="post">
	  <p>    
	     <label for="example">შეიყვანეთ a</label>
	    <input type="text" name="a" >
	     </p>
	  <p><input type="submit" value="Submit"></p>
	</form> 
	 
	<?php 
	    $a = $_POST["a"];
	
	
	      for ($i=2; $i < $a ; $i++) { 
	        if ($a % $i == 0) {
	          echo " რიცხვი <b>$a</b> არ არის მარტივი";
	          break;
	        }
	        else  echo " რიცხვი <b>$a</b>  მარტივია";
	        break;
	      }  
	      echo "<br>";echo "<br>";
	?>     
	</center>
	</body>
	</html>
	




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

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.  პროგრამა ჩამოტვირთედ აქედან . 
აქვე გეტყვით, რომ თუ ჩვენ გვაქვს მარტივი საიტი, სადაც ინფორმაციას ხშირად არ ვაახლებთ, მაშინ შეგვიძლია გამოვიყენოთ  მარტივი ადმინ-პანელი, რომელიც ჩამოტვირთედ აქედან. მისი საშუალებით ჰოსტინგზე შეგვიძლია შევცვალოთ ფაილების შიგთავსი.
ამ პროგრამების ინსტალაციის და გამოყენების ინსტრუქცია ჩავწერე ვიდეო გაკვეთილის სახით:
 




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

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