ОНЛАЙН- კურსები - HTML
გაკვეთილი 13. ვქმნით საიტს მიღებული ცოდნის გამოყენებით
მაშ ასე, ახლა დადგა სწორედ ის მომენტი, როდესაც უნდა დავიწყოთ ნამდვილი საიტის შექმნა, ინტერნეტში გამოსაქვეყნებლად! ამას გავაკეთებთ უკვე ნასწავლი მასალის საფუძველზე, თქვენ ამ საიტზე გამოაქვეყნებთ საკუთარ მასალას და ინფორმაციას და ასევე მიანიჭებთ საიტს თქვენს პარამეტრებს, საკუთარი შეხედულებისა და გემოვნების მიხედვით. პირველ ჯერზე შესაძლებელია ყველაფერი კარგად არ გამოგივიდეთ, მაგრამ ცდებისა და დაშვებული შეცდომების ხარჯზე თქვენ შეიძენთ მნიშვნელოვან გამოცდილებას და სწორედ ეს იქნება პირველი მნიშვნელოვანი ნაბიჯი, საიტების შექმნის საინტერესო გზაზე. მომდევნო საიტს გაცილებით ადვილად შექმნით და ეს სულაც აღარ იქნება თქვენთვის პრობლემას! ჯერ თუ არ გაქვთ იდეა და მასალა მომავალი საიტისთვის, მაშინ გააკეთეთ ის რაც გაკვეთილშია მოცემული. შემდეგ კიდევ ერთხელ გაიმეორეთ ყველაფერი დამოუკიდებლად. მაშ ასე, დავიწყოთ.
1. გახსენით «ბლოკნოტი», ვქმნით ახალ ფაილს და ვინახავთ სახელით index.html (ამ მიზნისთვის გირჩევთ გახსნათ ცალკე საქაღალდე, მაგალითად «ჩემი პირველი საიტი». ფაილი შეინახეთ ამ საქაღალდეში. მომავალში, მასშივე შევინახავთ, ყველა საიტისთვის მომზადებულ სურათებსა და გამოსახულებებს.
2. დავაკოპიროთ ფაილში, ჩვენთვის უკვე ცნობილი, ყველა მომსახურე ტეგი და <body>-ის ტეგიც:
1. გახსენით «ბლოკნოტი», ვქმნით ახალ ფაილს და ვინახავთ სახელით index.html (ამ მიზნისთვის გირჩევთ გახსნათ ცალკე საქაღალდე, მაგალითად «ჩემი პირველი საიტი». ფაილი შეინახეთ ამ საქაღალდეში. მომავალში, მასშივე შევინახავთ, ყველა საიტისთვის მომზადებულ სურათებსა და გამოსახულებებს.
2. დავაკოპიროთ ფაილში, ჩვენთვის უკვე ცნობილი, ყველა მომსახურე ტეგი და <body>-ის ტეგიც:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>თქვენი პირველი საიტი</title>
</head>
<body>
</body>
</html>
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>თქვენი პირველი საიტი</title>
</head>
<body>
</body>
</html>
3. მივანიჭოთ ტექსტს და ლინკებს სტილი, ასევე საიტის ფონის სურათი, ჩავსვათ სტილის ატრიბუტები, ტეგებს შორის <head>:
<head>
<style type="text/css">
body {background-image:url(img/body.jpg);}
p {font-size: 14px; font-family: verdana}
a {font-color: #0099FF; font-size: 15px; font-family: verdana}
</style>
</head>
<style type="text/css">
body {background-image:url(img/body.jpg);}
p {font-size: 14px; font-family: verdana}
a {font-color: #0099FF; font-size: 15px; font-family: verdana}
</style>
</head>
ყველა დანარჩენი მოქმედება შესრულდება, გამხსნელ და დამკეტ ტეგებს შორის <body>:
4. ჩავსვათ საიტის სათაური:
<p align="center" style="font-size:60px;font-famaly:verdana;font-width:bold;color:#99CCFF;">ბრედ პიტის ცხოვრება</p>
5. დავსვათ უმარტივესი სხვა გვერდებზე (ჯერ არ შექმნილი) გადასასვლელი ლინკებისაგან შემდგარი საიტის მენიუ:
<p align="center" style="font-size:30px;font-family:verdana;font-weight:bold;">
<a href="page1">ჩემს შესახებ</a>
<a href="page2">ჩემი კოლექცია</a>
<a href="page3">სხვა ინფორმაციები</a>
<a href="page4">ყიდვა</a>
<a href="page5">კონტაქტები</a>
</p>
<a href="page1">ჩემს შესახებ</a>
<a href="page2">ჩემი კოლექცია</a>
<a href="page3">სხვა ინფორმაციები</a>
<a href="page4">ყიდვა</a>
<a href="page5">კონტაქტები</a>
</p>
6. ჩავსვათ ტექსტი. იმისათვის რომ იყოს სვეტში თანაბრად განლაგებული, ვქმნით ცხრილს, რომელიც ერთი სვეტისა და ერთი რიგისგან შედგება, საზღვრების გარეშე, რომელშიც ტექსტი იქნება განთავსებული. მაშ ასე, ჯერ ცხრილის ტეგი და მისი ატრიბუტები:
<table width="800px" border="0" padding="10px" align="center">
შემდეგ სვეტი და რიგი:
<td><tr>
7.ამის მერე არ იქნებოდა ურიგო რაიმე სურათის ჩასმა :
<br><img src="img/brad_pitt.jpg" hspace="10" alt="ბრედ პიტი" style= "float:left;">
აქ დავამატეთ სტრიქონის გადატანის ტეგი, იმისათვის რომ, გავზარდოთ სურათსა და ზევითა მენიუს ლინკებს შორის ინტერვალი. გაჩნდა თქვენთვის ახალი ატრიბუტი "hspace", რომელიც სვავს ჰორიზონტალურ ინტერვალს სურათიდან. (ატრიბუტი "vspace" – ვერტიკალურ ინტერვალებს). ეს საჭიროა იმისთვის რომ, ტექსტი და სურათი არ «ეწებებოდნენ» ერთმანეთს. და რა თქმა უნდა ცნობილი თვისება "float" განსაზღვრავს სურათის ადგილმდებარეობას ცხრილის მარცხენა მხარეს.
8. შემდეგ ჩავსვათ თავად ტექსტი. ეს წინასწარ მოფიქრებილი ტექსტია ბრედ პიტზე, რომელიც აბზაცებად დავყავით და ჩავსვი ტექსტში ლინკები. ტექსტი შეგიძლიათ «ბლოკნოტშიც» ჩაწეროთ ან რომელიმე სხვა, თქვენთვის მოსახერხებელ, ტექსტურ რედაქტორში და იქიდან დააკოპიროთ თქვენს html- ფაილში და დასვათ მასში შესაბამისი ტეგები – აბზაცები, სტრიქონის გადატანა, ლინკები.
მაშ ასე, ჩავსვათ შემდეგი ტექსტი:
8. შემდეგ ჩავსვათ თავად ტექსტი. ეს წინასწარ მოფიქრებილი ტექსტია ბრედ პიტზე, რომელიც აბზაცებად დავყავით და ჩავსვი ტექსტში ლინკები. ტექსტი შეგიძლიათ «ბლოკნოტშიც» ჩაწეროთ ან რომელიმე სხვა, თქვენთვის მოსახერხებელ, ტექსტურ რედაქტორში და იქიდან დააკოპიროთ თქვენს html- ფაილში და დასვათ მასში შესაბამისი ტეგები – აბზაცები, სტრიქონის გადატანა, ლინკები.
მაშ ასე, ჩავსვათ შემდეგი ტექსტი:
<p align="Justify">გამარჯობათ! გთავაზობთ ბრედ პიტის ცხოვრების შესახებ! </p>
<p align="Justify">იგი დაიბადა ამერიკის შეერთებული შტატების ერთერთ პროვინციაში. სადაც გაატარა თავისი ბავშვობის და სიყმაწვილის წლები.</p>
<p align="Justify">Я продаю воду - აქვე დაამთავრა საშუალო სკოლა.</p>
<p>სკოლის დამთავრების შემდეგ ახალგაზრდა ბრედი, ბედის საძებნელად ჩამოვიდა ამერიკის ერთ-ერთ უდიდეს ქალაქშიკალიფორნიაში და მუშაობა დაიწყო ანიმატორად სწრაფი კვების ობიექტში. იგი წიწილას ფორმაშიგამოწყობილი ეპატიჟებოდა ქუჩაში გამვლელებს, რომ შესულიყვნენ კაფეში!</p>
<p align="Justify">ასე გრძელდებოდა რამდენიმე ხანი <a href="page3">ბრედი კაპიკებზე მუშაობდა</a> მაგრამ ერთ მშვენიერ დღეს, შემთხვევით კაფეში შევიდნენნ ჰოლივუდის გავლენიანი მესვეურები. მათ არ გამოჰპარვიათ ულამაზესი ახოვანი და მომხიბლველი ყმაწვილი, მათგამოჰკითეს ბრედს ვინაობა და მეორე დღისთვის დაპატიჯეს კინოსტუდიაში.</p>
<p align="Justify">შემდეგ <a href="გვერდი 2">ბრედის წარმატება</a> ...........................................(-------------------------), ---------------------------------------!</p>
<p align="Justify">--------------------------------- <a href="page4">-------------------<a href="page5">კონტაქტები</a>.
<p align="Justify">გისურვებთ წარმატებებს<br>მომავლის იმედით <b>ბრედ პიტი</b></p>
<p align="Justify">იგი დაიბადა ამერიკის შეერთებული შტატების ერთერთ პროვინციაში. სადაც გაატარა თავისი ბავშვობის და სიყმაწვილის წლები.</p>
<p align="Justify">Я продаю воду - აქვე დაამთავრა საშუალო სკოლა.</p>
<p>სკოლის დამთავრების შემდეგ ახალგაზრდა ბრედი, ბედის საძებნელად ჩამოვიდა ამერიკის ერთ-ერთ უდიდეს ქალაქშიკალიფორნიაში და მუშაობა დაიწყო ანიმატორად სწრაფი კვების ობიექტში. იგი წიწილას ფორმაშიგამოწყობილი ეპატიჟებოდა ქუჩაში გამვლელებს, რომ შესულიყვნენ კაფეში!</p>
<p align="Justify">ასე გრძელდებოდა რამდენიმე ხანი <a href="page3">ბრედი კაპიკებზე მუშაობდა</a> მაგრამ ერთ მშვენიერ დღეს, შემთხვევით კაფეში შევიდნენნ ჰოლივუდის გავლენიანი მესვეურები. მათ არ გამოჰპარვიათ ულამაზესი ახოვანი და მომხიბლველი ყმაწვილი, მათგამოჰკითეს ბრედს ვინაობა და მეორე დღისთვის დაპატიჯეს კინოსტუდიაში.</p>
<p align="Justify">შემდეგ <a href="გვერდი 2">ბრედის წარმატება</a> ...........................................(-------------------------), ---------------------------------------!</p>
<p align="Justify">--------------------------------- <a href="page4">-------------------<a href="page5">კონტაქტები</a>.
<p align="Justify">გისურვებთ წარმატებებს<br>მომავლის იმედით <b>ბრედ პიტი</b></p>
ბოლოს რა თქმა უნდა არ უნდა დაგავიწყდეთ, დაკეტოთ <body> и <html> ტეგები.
საიტის მთავარი გვერდი მზად არის. შესაქმნელი დარჩა სხა გვერდები, რომლებზე გადასასვლელადაც დავსვით ლინკები ზემოთა მენიუში. ისინი, როგორც წესი მარტივი კოპირებით იქმნებიან: ხსნით ფაილს index.html პროგრამა «ბლოკნოტის» დახმარებით (დააწკაპეთ ფაილზე მაუსის მარჯვენა ღილაკით და გამოხატულ მენიუში აირჩიეთ პუნქტი «Открыть с помощью…», და შემდეგ ვირჩევთ პროგრამას «ბლოკნოტი»), მენიუში დააწკაპეთ «Файл» -ზე, - «Сохранить как» და ახალ ფანჯარაში ვარქმევთ ფაილს ახალ სახელს, მაგალითად page2.html. ამავდროულად ფაილი index.html რჩება უვნებელი და მთელი, მის გვერდზე გაჩნდება ფაილი ტყუპისცალი - page2.html. ახალ ფაილში ვტოვებთ საიტის ქუდს და მენიუს, დანარჩენ კონტენტს კი ვცვლით ახალი მასალით რომელიც კონკრეტულ გვერდს შეეხება. მაგალითად, ფაილს 2.html, შეესატყვისება საიტის განყოფილებას «ჩემი კოლექცია» ჩავსვათ კოლექციის სურათები და მისი აღწერილობები, ფაილში page5.html, კი რომელიც საიტის განყოფილება «კონტაქტებს» შეესატყვისება, განვათავსებთ იმ ინფორმაციას, თუ როგორ უნდა დაგიკავშირდნენ: e-mail- მისამართი, ტელეფონები, ასევე ონდა შევქმნათ უკუ კავშირის ფორმა (თუ, როგორ უნდა შევქმნათ ეს ფორმა, ანის შესახებ ზღვა მასალაა ინტერნეტში და შეგიძლიათ მოიძიოთ).
ამ საიტის შექმნას დაახლოებით 20-30 წუთი სჭირდება (ტექსტის ჩაწერის და სურათების მომზადების ჩათვლით) . თქვენ ამას რათქმა უნდა მეტ დროს მოანდომებთ, რამდენიმე საათს მაინც (შეიძლება დღეც), მაგრამ მთავარია, რომ თქვენ მიიღებთ შედეგს! შესაძლო პირველმა მარცხმა არ უნდა დაგაყრევინოთ ფარ ხმალი. დარწმუნებული იყავით რომ მეორე და მესამე ცდაზე ყველაფერი გამოგივათ და იმაზე მალეც კი ვიდრე თქვენ გგონიათ.
დამატებითი ინფორმაცია გაკვეთილის შესახებ.
საიტის შექმნის მუშაობის პროცესში შესაძლებელია ყველაფერი ერთბაშად არ გამოგივიდეთ. მაგალითად არ იმუშაონ ცალკეულმა ატრიბუტებმა, გააკეთოთ ერთი და ბრაუზერმა სულ სხვა შედეგი აჩვენოს, ცვლით პარამეტრებს ის კი არ მუშაობს. ეს ყველაფერი გარდაუვალია, ყველა გავდივართ ამ პროცესს. არ გამოდის ერთი გზით, სცადეთ მეორეთი. ნუ ჩაიციკლებით რაიმეზე – იარეთ წინ, ჩაათარეთ ექსპერიმენტები, შექმენით! თავდაპირველად ბევრი რამ ძალიან რთული გვეჩვენება და ხშირად ჩნდება ყველაფრის მიტოვების სურვილი – არა უშავს, თუ ეხლა არ გამოგდით! გადადეთ პრობლემა და სხვა რამით დაკავდით, დროთა განმავლობაში მოვა სწორი გადაწყვეტილებაც და თქვენთვის ნათელი გახდება სად უშვებდით შეცდომ. ყველაფრის საიდუმლო გამოსდილებაა, რასაც დროთა განმავლობაში დააგროვებთ:) გახსოვდეთ მეტი პრაქტიკული მუშაობა თქვენ საუკეთესო სპეციალისტად გაქცევთ.
გისურვებთ წარმატებებს!!!
