HTML Lessons

Дата: კვირა, 2007-08-19,

HTML გაკვეთილები ქართულ ენაზე!

Дата: კვირა, 2007-10-14,

აქვე დავიწყებ ამ სახელმძღვანელოს გამოქვეყნებას

ნაწილი 1; შესავალი

პირველი ნაბიჯები - HTML სახელმძღვანელო ახალბედებისათვის
სანამ უშუალოდ ენის განხილვას შევუდგებოდეთ, ჯერ გავიგოთ, თუ რას წარმოადგენს ის.

იმაზე, რომ თქვენ ტექსტი, სურათები და კიდევ მრავალი სხვა რამ ბრაუზერში გარკვეული თანმიმდევრობით დაინახოთ, პასუხს HTML აგებს. ის იშიფრება როგორც HyperText Markup Language. ის სტატიური და შესაბამისად მოუქნელია. იმისთვის, რომ გვერდზე, რომელსაც მომხმარებელი ნახულობს, რამე შეიცვალის, მთელი კოდის მოდიფიცირებაა საჭირო. აქ ისმის სრულიად სამართლიანი კითხვა: თუ HTML ასეთი საშინელებაა, რატომ უნდა ვისწავლოთ ის? ნუთუ არ არსებობს უფრო განვითარებული ენები?

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

რა შეუძლია HTML-ს?

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

ვებ-პროგრამირებაში გამოყენებული სხვა ენები

მაგრამ რა ვქნათ, თუ მაგალითად გვინდა ვიცოდეთ, რამდენი პუნქტი მონიშნა მომხმარებელმა მენიუდან ან გამოვიტანოთ შეცდომა, თუ მას არაფერი მოუნიშნია და ისე ცდილობს მონაცემების გაგზავნას ან "ავანთოთ" ღილაკი, როცა მას თაგვის ისარი გადაუვლის?
აქ ახალი ცნების - javascript-ის შემოტანაა საჭირო. ის მინი პროგრამირების ენა გახლავთ, თუმცა ასეთ მოთხოვნებს სრულიად აკმაყოფილებს და user-side-ცაა!

მაგრამ აქ ახალი პრობლემები გაჩნდა. რა ვქნათ იმ შემთხვევაში თუ ინფორმაციის დამახსოვრება და საჭიროების შემთხვევაში გახსენებაც გვსურს? ამის საშუალება ზემოთ ნახსენებ ენებს არ აქვთ, მაგრამ თუ ეს ვერ გავაკეთეთ, უამრავ შესაძლებლობას დავკარგავთ. არ შეგვეძლება მომხმარებლის დარეგისტრირება, საიტზე მრიცხველის დაყენება, ფორუმის და ჩატის გახსნა და რაც მთავარია, დინამიური საიტის შექმნა! ისტერიკაში ნუ ჩავარდებით, ამ ყველაფრის გამკეთებელი ენაც არსებობს და მას PHP ჰქვია.

PHP სრულყოფილი პროგრამირების ენაა, რომელიც დროთა განმავლობაში იცვლებოდა მხოლოდ იმისთვის, რომ მაქსიმალურად მორგებოდა ვებ-პროგრამირებას. სხვა ჩვეულებრივი პროგრამირების ენებისგან განსხვავებით მას მოცილებული აქვს დამატებითი მოდულების ჩამატების აუცილებლობა, რაც მუშაობას საკმაოდ აადვილებს. javascript-ისგან განსხვავებით ის server-side-ა და სამუშაოდ შესაბამისი პროგრამული უზრუნველყოფა სჭირდება.

რა თქმა უნდა, არსებობს სხვა ასეთივე დანიშნულების ენები. მაგ. ASP და ASP.NET, მაგრამ მათ მსგავსება-განსხვავებებზე აქ საუბარი არ გვექნება.

ვებ-პროგრამირებაში ასევე გამოიყენებოდა ჩვეულებრივი პროგრამირების ენები(მაგ. CGI Perl), მაგრამ ისინი PHP-სთან შედარებით არაპრაქტიკული აღმოჩნდნენ, ასე რომ, დღეს ისინი თითქმის აღარ გამოიყენებიან.

Дата: კვირა, 2007-10-14,

ნაბიჯი 1 - ვიწყებთ მუშაობას

სანამ მუშაობას შევუდგებოდეთ, ბუნებრივია, სამუშაო სივრცე გვჭირდება. ამისათვის გავხსნათ საქაღალდე

D:\პირველი ნაბიჯები\

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

ახლა რაც შეეხება პროგრამულ უზრუნველყოფას. სამუშაოდ გირჩევთ "Macromedia Dreamweaver 8.0"-ს. ის ამ საქმეში საუკეთესოა, თუმცა ჩვეულებრივი ტექსტური რედაქტორებიც გამოდგება. მაგალითად ბლოკნოტი(Notepad).

მე გვერდების შევსებისას ქართულ ასოებს გამოვიყენებ. თქვენ თუ ეს გაგიჭირდებათ, შეგიძლიათ ინგლისური ასოები გამოიყენოთ, არც ეს ცვლის რაიმე არსებითს.

ახლა, როცა ეს პრობლემა უკვე მოაგვარეთ, მუშაობის დაწყებაც შეიძლება.

შექმენით თქვენს ძირეულ საქაღალდეში ფაილი სახელად index.html და დააკოპირეთ ან გადაწერეთ მასში ქვემოთ მოცემული კოდი("ვნახოთ" ბმულის გარეშე):

<html>
<head>
<title>პირველი ნაბიჯები</title>
<META HTTP-EQUIV="Content-Type" Content="text/html; Charset=utf-8">
</head>
<body>
მოგესალმებით! ეს ჩემი პირველი ვებ-გვერდია!
</body>
</html> (ვნახოთ)

შეინახეთ ფაილი *.html გაფართოებით და გახსენით ის ბრაუზერში. დაინახავთ ზუსტად იმას, რასაც "ვნახოთ" ღილაკზე დაჭერით

ძალიან ბევრი წერს, რომ კოდი გადაწერა ბლოკნოტში, შეინახა და ტექსტური ფაილი მიიღო. ეს რომ არ მოგივიდეთ, File>Save ფანჯარაში მიუთითეთ All Files და შეინახეთ როგორც index.html(ან "ნებისმიერი სახელი".html. მთავარია, რომ წერტილის მერე html ეწეროს). დაინახავთ, რომ თქვენს მიერ შენახულ ფაილს ბრაუზერის ხატულა გაუჩნდა. ეს ნიშნავს, რომ პროცედურა წარმატებით დასრულდა.

თუ თქვენ რაიმეს შეცვლით რედაქტორიდან და მისი ბრაუზერში ნახვა დაგჭირდებათ, ჯერ შეინახეთ ფაილი რედაქტორში, შემდეგ ბრაუზერში დააჭირეთ ღილაკს Refresh(ან F5) ან დახურეთ ბრაუზრი და გახსენით თავიდან. ისე მე პირველ გზას გირჩევდით smile

Дата: კვირა, 2007-10-14,

ნაბიჯი 2 - რა არის ტეგები?

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

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

როგორ იწერება ტეგები?

ყველაფერს, რასაც <> ჩარჩოს შიგნით მოაქცევთ, HTML ტეგად გაიგებს და შეეცდება მოძებნოს მისი შესატყვისი თავისი ტეგების "საწყობში", თუ ასეთი იპოვა, შეასრულებს, თუ ვერა - გააგრძელებს წერას უწინდებურ რეჟიმში, მაგრამ თქვენს არასწორ ტეგს არ ამოწერს. როგორც <b> ტეგის შემთხვევაში დავინახეთ, დამხურავი ტეგი იგივე იქნება, რაც გამხსნელი, მხოლოდ პირველ ჩარჩოსა და დანარჩენ ნაწილს შორის "/" დაემატება. მაგალითად, თუ მე მინდა დავწერო: " კომპინფო", ამისთვის კოდში ვწერ შემდეგს: " <b>კომპ</b>ინფო". ეს HTML-ს მიუთითებს, რომ "<b>...</b>" კოდში მოქცეული სიმბოლოების ნაკრები (ამ შემთხვევაში სიტყვის ნაწილი "კომპ") უნდა გაასქელოს.

რა და რა სახის ტეგები არსებობს?

ტეგები ორნაირია: ისინი, რომელთაც ტეგის ორი - გამხსნელი და დამხურავი ნაწილი გააჩნიათ და ისინი, რომელთაც დამხურავი ნაწილი არ სჭირდებათ.

რა განსხვავებაა ამ ორი სახეობის ტეგს შორის?

მაგალითად მე დამჭირდა სიტყვის გასქელება. ვიყენებ ტეგ <b>-ს(bold), მაგრამ იმისთვის, რომ HTML-მა გაარკვიოს, თუ სადამდე უნდა ასქელოს სიტყები, საჭიროა დამხურავი ნაწილი </b>, რომელიც მიუთითებს, რომ ტექსტის გამოტანა <b> ტეგის გახსნამდე არსებულ რეჟიმში გაგრძელდეს.

მაგრამ იქნებ დამჭირდა მომდევნო ხაზზე გადასვლა? მაშინ ვიყენებ ტეგ <br>-ს, რომელსაც დამხურავი ტეგი არ სჭირდება.

დავუბრუნდეთ ჩვენი მაგალითის განხილვას.

Дата: კვირა, 2007-10-14,

ნაბიჯი 3 - აუცილებელი ტეგები

<html>
<head>
<title>პირველი ნაბიჯები</title>
<META HTTP-EQUIV="Content-Type" Content="text/html; Charset=utf-8">
</head>
<body>
მოგესალმებით! ეს ჩემი პირველი ვებ-გვერდია!
</body>
</html> (ვნახოთ)

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

სურათზე HTML-ისა და ადამიანის მსგავსებაა გამოსახული. ჩვენ გაგვაჩნია სხეული, თავი და ტანი. HTML-საც იგივე აგებულება აქვს, მაგრამ მის აგებულებას ტეგები შემოსაზღვრავს.

მსგავსება რომ ჩამოვაყალიბოთ, მივიღებთ:

1. <html>...</html> - დოკუმენტის სხეული
2. <head>...</head> - დოკუმენტის თავი
3. <body>...</body> - დოკუმენტის ტანი

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

<ტეგი> </ტეგი> - ასეთ ტეგებს ტეგ-კონტეინერებსაც ეძახიან. იმიტომ, რომ მათ შიგნით კიდევ შეიძლება ტეგის ჩასმა.

მიაქციეთ ყურადღება:

<ტეგი1><ტეგი2><ტეგი3> ... </ტეგი3></ტეგი2></ტეგი1>

ასეთი მიმდევრობა სწორად ითვლება: ტეგი, რომელიც პირველი იხსნება, ბოლო იხურება(ისევე, როგორც დანარჩენები).

შემდეგი მიმდევრობა კი უმეტეს შემთხვევაში შეცდომაა

<ტეგი><ტეგი2><ტეგი3> ... </ტეგი3></ტეგი1></ტეგი2>

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

გილოცავ! შენ დაამთავრე თეორიული ნაწილი და შემდეგ ნაბიჯზე უკვე პრაქტიკულ სამუშაოსაც გაეცნობი. გისურვებ წარმატებას! :)

Дата: კვირა, 2007-10-14,

ნაბიჯი 3.1 - ვიწყებთ მუშაობას. უმარტივესი პრაქტიკა

<html>
<head>
<title>პირველი ნაბიჯები</title>
<META HTTP-EQUIV="Content-Type" Content="text/html; Charset=utf-8">
</head>
<body>
მოგესალმებით! ეს ჩემი პირველი ვებ-გვერდია!
</body>
</html> (ვნახოთ)

წინა ნაბიჯზე შენ გაიგე, თუ რას ნიშნავს კოდის გვერდით მოთავსებული სურათი, ახლა ალბათ თვითონ კოდმაც დაგაინტერესა smile მოკლედ, შევუდგეთ განხილვას:

<html> და <head> ჩვენთვის უკვე ნაცნობი ტეგებია, მაგრამ რა დანიშნულება აქვთ <title> ან <META> ტეგებს?

როგორც კოდიდანაც ჩანს, ორივე <head> ტეგის ქვეტეგია და გვერდის შესახებ ზოგად ინფორმაციას შეიცავენ. ბევრი ალბათ უკვე მიხვდა, რომ <title> გვერდის სათაურია, მაგრამ რაში გვჭირდება ის? დააჭირეთ ”ვნახოთ” ღილაკს და გახსნილ ფანჯარაში დააკვირდით ზედა ლურჯ ზოლს, ხომ არ ემთხვევა მისი წარწერა <title> ტეგში მოქცეულ წარწერას? smile

<title> ტეგის მნიშვნელობა გასაგებია, გადავიდეთ <META> ტეგის განხილვაზე.

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

თუ ამ ტეგს დააკვირდებით, ბოლოში დაინახავთ შემდეგ კოდს: "charset=utf8". ეს ის ნაწილია, რისთვისაც ეს ტეგი გამოვიყენეთ და ნიშნავს, რომ გვერდის default კოდირებად utf-8-ა დასმული, ეს კი თავის მხრივ შესაძლებელს ხდის, რომ უნიკოდით ჩაწერილი ქართული სიმბოლოები ბრაუზერმა კითხვის ნიშნების მაგივრად ქართულად გამოაჩინოს.

ტეგ <body>-ს გახსნის შემდეგ ყველანაირი ტეგის გარეშე მოდის ტექსტი "მოგესალმებით! ეს ჩემი პირველი ვებ-გვერდია!", რომელსაც ბრაუზერი უბრალოდ ამოწერს.

ვხურავთ აუცილებელ ტეგებს და ვტკბებით ნამუშევრით. თქვენი პირველი ვებ-გვერდი მზადაა.

Дата: ხუთშაბათი, 2008-03-27,

ნაბიჯი 6 - პარაგრაფები და <div>. ვსწავლობთ ტექსტის გამოსახვას

პარაგრაფის ტეგი მასში მოქცეული ტექსტის განლაგებაზე აგებს პასუხს. ის იწერება, როგორც <p>, ხოლო მისი ატრიბუტი align გვიჩვენებს, თუ როგორი განლაგება ექნება ამ ტეგში მოქცეულ ტექსტს.

საბოლოო ჯამში კი გვაქვს ასეთი ჩანაწერი:

...

</p>

მრავალწერტილების ადგილას შესაბამისად ატრიბუტის მნიშვნელობა და ტექსტი უნდა ჩაიწეროს. ატრიბუტს კი სულ 4 მნიშვნელობა აქვს :

1. left ტექსტს მარცხენა კიდეზე ასწორებს
2. right ტექსტს მარჯვენა კიდეზე ასწორებს
3. center ტექსტს გვერდის ვერტიკალური შუახაზის სიმეტრიულად ასწორებს(გამოიყენება სათაურების კეთებისას)
4. justify იგივეა, რაც left+right, ანუ ტექსტს ორივე კიდეზე ასწორებს

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

<html>
<head>
<title>პირველი ნაბიჯები</title>
<META HTTP-EQUIV="Content-Type" Content="text/html; Charset=utf-8">
</head>
<body text="#336699" bgcolor="#CFCFCF">
<p align="center">
მოგესალმებით! <font color="#CC0000">ეს ჩემი პირველი ვებ-გვერდია!</font>
</p>
</body>
</html> (ვნახოთ)

ნურასდროს გამოიყენებთ ცარიელ კონსტრუქციას:

<p></p>

ეს იგივეა, რაც <br><br>. ასე რომ, მის გამოყენებას აზრი არ აქვს.

შეიძლება შეამჩნიეთ კიდეც, რომ ტექსტის განლაგება default-ად left-ზეა დაყენებული. ასევე საგულისხმოა, რომ დამხურავი ტეგი </p>-ს შემდეგ ავტომატურად გადადის ხაზზე, ანუ <br>-ს აკეთებს, მაგრამ რა ვქნათ, თუ ეს ფუნქცია ხელს გვიშლის?

შეგვიძლია ალტერნატიული <center>...</center> ტეგი გამოვიყენოთ, მაგრამ შენიშნავდით, რომ ის ტექსტს მარჯვენა, მარცხენა ან ორივე მხარეზე ვერ გაგისწორებთ smile თან საკმაოდ მოძველებულია და შეიძლება როდესმე ბრაუზერმა ტეგად აღარც კი ჩათვალოს. ხელახლა ისმის კითხვა - რა ვქნათ?

პასუხი მარტივია - <div>...</div> გამოიყენეთ. ის იგივეს გააკეთებს, რასაც <p>, მაგრამ კურსორი ერთი ხაზით დაბლა აღარ ჩამოიწევს. ყველაფერი ზუსტად ისევე ჩაიწერება, რომგორც <p>-ს შემთხვევაში, მხოლოდ <div>-ით:

<html>
<head>
<title>პირველი ნაბიჯები</title>
<META HTTP-EQUIV="Content-Type" Content="text/html; Charset=utf-8">
</head>
<body text="#336699" bgcolor="#CFCFCF">
<div align="center">
მოგესალმებით! <font color="#CC0000">ეს ჩემი პირველი ვებ-გვერდია!</font>
</div>
<p align="justyfy">
ეს სტატია განკუთვნილია დამწყები მომხმარებლებისთვის, რომლებიც ვერ ერკვევიან პროცესორების დასახელებებში, მათ მწარმოებლებში და გამოყენების სფეროებში. პრაქტიკულად ასეთი სტატია დიდი ხნის წინ უნდა დაწერილიყო, მაგრამ გარკვეული მიზეზების გამო ინტერნეტში ქვეყნდება პირველად. სამწუხაროდ არცერთი კომპიუტერული რესურსი საწყის ეტაპებს დიდ ყურადღებას არ უთმობს, რის გამოც ბევრ მომხმარებელს საკუთარი ძალებით და მიხვედრილობით უწევს გზის გაკვლევა საკმაოდ რთულ და დაქსაქსულ კომპიუტერულ ცხოვრებაში. რა თქმა უნდა 1-2 წლის თავზე სირთულეები ქრება, გარკვეული ცოდნა გროვდება და ყველაფერი მარტივდება, მაგრამ ხშირად პირველი არასწორი ნაბიჯები ბევრისთვის დიდი ხნის სინანულის ბრალია.
</p>

</body>
</html> (ვნახოთ)

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

დაიმახსოვრეთ! პარაგრაფის შიგნით არ შეიძლება სხვა პარაგრაფის და <div> ტეგის გამოყენება, ასეთი კონსტრუქცია არც იმუშავებს და თქვენც დაგაბნევთ:

და

თუმცა <div>-ს ასეთი კონსტრუქციის ”ატანა” და შესრულება შეუძლია:

თუმცა ჩვენი საუბარი <p> და <div>-თან დაკავშირებით აქ მთავრდება, ნუ გეგონებათ, რომ მათ მეტი არაფერი შეუძლიათ. უბრალოდ თქვენ ჯერ მზად არ ხართ მათ გასაცნობად.

Дата: ხუთშაბათი, 2008-03-27,

ნაბიჯი 7 - თურმე ტექსტის ზომის რეგულირებაც შეიძლება.

ამ ნაბიჯზე ჩვენ სათაურებს და ტეგ <font>-ის კიდევ ერთ ატრიბუტს გავეცნობით, რაც ტექსტის ზომის რეგულირების საშუალებას მოგვცემს.

სათაური(Heading) საშუალებას გვაძლევს ტექსტი ექვს ზომაზე დავარეგულიროთ:

<H1>ტექსტი</H1>
<H2>ტექსტი</H2>
<H3>ტექსტი</H3>
<H4>ტექსტი</H4>
<H5>ტექსტი</H5>
<H6>ტექსტი</H6>

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

<html>
<head>
<title>პირველი ნაბიჯები</title>
<META HTTP-EQUIV="Content-Type" Content="text/html; Charset=utf-8">
</head>
<body text="#336699" bgcolor="#CFCFCF">
<div align="center">
<H3>მოგესალმებით!</H3><font color="#CC0000">ეს ჩემი პირველი ვებ-გვერდია!</font></div>
<p align="justify">
ეს სტატია განკუთვნილია დამწყები მომხმარებლებისთვის, რომლებიც ვერ ერკვევიან პროცესორების დასახელებებში, მათ მწარმოებლებში და გამოყენების სფეროებში. პრაქტიკულად ასეთი სტატია დიდი ხნის წინ უნდა დაწერილიყო, მაგრამ გარკვეული მიზეზების გამო ინტერნეტში ქვეყნდება პირველად. სამწუხაროდ არცერთი კომპიუტერული რესურსი საწყის ეტაპებს დიდ ყურადღებას არ უთმობს, რის გამოც ბევრ მომხმარებელს საკუთარი ძალებით და მიხვედრილობით უწევს გზის გაკვლევა საკმაოდ რთულ და დაქსაქსულ კომპიუტერულ ცხოვრებაში. რა თქმა უნდა 1-2 წლის თავზე სირთულეები ქრება, გარკვეული ცოდნა გროვდება და ყველაფერი მარტივდება, მაგრამ ხშირად პირველი არასწორი ნაბიჯები ბევრისთვის დიდი ხნის სინანულის ბრალია.
</p>
</body>
</html> (ვნახოთ)

როგორც ხედავთ, მაგალითში <h3></h3> ზომაა გამოყენებული. თქვენც იგივეს გირჩევდით smile ვნახოთ, რა გამოვიდა:

ტეგში ჩასმული ტექსტი არათუ გაიზარდა, არამედ გასქელდა კიდეც, თან <p> ტეგივით ხაზი გამოტოვა. სამართლიანიცაა - როდის გინახავთ, სათაურსა და ტექსტს შორის ხაზი არ იყოს გამოტოვებული?

მოკლედ, გასაგებია, რომ ეს ტეგი სათაურებისთვის იდეალურია, მაგრამ რა ვქნათ, თუ თვითონ ტექსტში გვინდა ზომის შეცვლა, თან ყველანაირი ავტომატური გასქელებისა და ხაზის გამოტოვების გარეშე?

აქ <font> ტეგის დაპირებულ ახალ ატრიბუტს უნდა გავეცნოთ. მას size ჰქვია და ტექსტის ზომის მეყსეულად შესაცვლელად გამოიყენება. მისი სინტაქსი ასე გამოიყურება:

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

<font size="+3"> ტექსტი </font>

<font size="+2"> ტექსტი </font>

<font size="+1"> ტექსტი </font>

<font size="0"> ტექსტი </font>

<font size="-1"> ტექსტი </font>

<font size="-2"> ტექსტი </font>

<font size="-3"> ტექსტი </font>

size-ს ნებისმიერი მნიშვნელობის მიღება შეუძლია, მაგრამ მე ამ მონაკვეთს გირჩევდით, ისევ და ისევ ესთეტიური მოსაზრებით.
საჭიროა ვიცოდეთ, რომ default-ად size-ს მნიშვნელობა ”+0”-ს უდრის. მოკლედ, იხ. მაგალითი.

<html>
<head>
<title>პირველი ნაბიჯები</title>
<META HTTP-EQUIV="Content-Type" Content="text/html; Charset=utf-8"> </head>
<body text="#336699" bgcolor="#CFCFCF"> <div align="center">
<H3>მოგესალმებით!</H3>
<font color="#CC0000">ეს ჩემი პირველი ვებ-გვერდია!</font> smile </div>
<p align="justify">
ეს სტატია განკუთვნილია დამწყები მომხმარებლებისთვის, რომლებიც ვერ ერკვევიან პროცესორების დასახელებებში, მათ მწარმოებლებში და გამოყენების სფეროებში. პრაქტიკულად ასეთი სტატია დიდი ხნის წინ უნდა დაწერილიყო, მაგრამ გარკვეული მიზეზების გამო ინტერნეტში ქვეყნდება პირველად. <font size="2">სამწუხაროდ არცერთი კომპიუტერული რესურსი საწყის ეტაპებს დიდ ყურადღებას არ უთმობს<font>, რის გამოც ბევრ მომხმარებელს საკუთარი ძალებით და მიხვედრილობით უწევს გზის გაკვლევა საკმაოდ რთულ და დაქსაქსულ კომპიუტერულ ცხოვრებაში. რა თქმა უნდა 1-2 წლის თავზე სირთულეები ქრება, გარკვეული ცოდნა გროვდება და ყველაფერი მარტივდება, მაგრამ ხშირად პირველი არასწორი ნაბიჯები ბევრისთვის დიდი ხნის სინანულის ბრალია.</font>
</p>
</body>
</html> (ვნახოთ)

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

Дата: ხუთშაბათი, 2008-03-27,

ნაბიჯი 8 - ვქმნით ტექსტის სტილს საკუთარი ხელებით.

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

ამ ტეგებს ზედმეტი ახსნა-განმარტება არ სჭირდებათ, ამიტომ უბრალოდ ჩამოვწეროთ:

ჩვეულებრივი ტექსტი
<b> გასქელებული ტექსტი </b>
<i> დახრილი ტექსტი </i>
<tt>ნაბეჭდი ტექსტი</tt>
<u> გახაზული ტექსტი </u>
<strike>~~გადახაზული ტექსტი~~</strike>
<s>~~გადახაზული ტექსტი~~</s>

ყველაფერი ძალიან მარტივია:

<html>
<head>
<title>პირველი ნაბიჯები</title>
</head>
<body text="#336699" bgcolor="#CFCFCF">
<div align="center">
<H3>მოგესალმებით!</H3><font color="#CC0000"> ეს ჩემი პირველი ვებ-გვერდია!</font>
</div>
<p align="justify">
ეს სტატია განკუთვნილია <strike>~~დამწყები~~<strike> მომხმარებლებისთვის, რომლებიც ვერ ერკვევიან პროცესორების დასახელებებში, მათ მწარმოებლებში და გამოყენების სფეროებში. პრაქტიკულად ასეთი სტატია დიდი ხნის წინ უნდა დაწერილიყო, მაგრამ გარკვეული მიზეზების გამო ინტერნეტში ქვეყნდება პირველად. <b>სამწუხაროდ არცერთი კომპიუტერული რესურსი საწყის ეტაპებს დიდ ყურადღებას არ უთმობს</b>, რის გამოც ბევრ მომხმარებელს საკუთარი ძალებით და მიხვედრილობით უწევს გზის გაკვლევა საკმაოდ რთულ და დაქსაქსულ კომპიუტერულ ცხოვრებაში. <i>რა თქმა უნდა 1-2 წლის თავზე სირთულეები ქრება</i>, გარკვეული ცოდნა გროვდება და ყველაფერი მარტივდება, მაგრამ ხშირად პირველი არასწორი ნაბიჯები ბევრისთვის დიდი ხნის სინანულის ბრალია.
</p>
</body>
</html>

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

ახლა კი დროა, რომ დაპირებულ ”ცოტა მეტს”, ანუ ტეგ <pre>-ს გავეცნოთ. მას ერთი მშვენიერი ფუნქცია გააჩნია - მასში მოქცეული ტექსტი ყველანაირი დამატებითი ტეგების გარეშე ჩანს ისეთივე, როგორსაც თქვენ კოდში წერთ. გავშიფროთ განსაზღვრება:

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

<pre>
ტექსტი____(ბევრი ჰარი...)____ტექსტი
___________ტექსტი____(ბევრი ჰარი...)____ტექსტი
_____ტექსტი____(ბევრი ჰარი...)___ტექსტი
</pre>

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

<tt><b><i>ტექსტი </i></b></tt>

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

ტეგი <big> ტექსტის ზომას უფრო ადიდებს, ხოლო <small> პირიქით - აპატარავებს:

<small> მცირე ზომის ტექსტი </small>
ნორმალური ზომის ტექსტი
<big> დიდი ზომის ტექსტი </big>

და ბოლოს - მეცნიერი ხალხისთვის ძალიან გამოსადეგი ორი ტეგი - <sup>(ზედა ინდექსი) და <sub>(ქვედა ინდექსი). იკითხავთ - რაში შეიძლება გამოვიყენოთ ისინი? მაგალითად, წყლის ქიმიური ფორმულის - H2O-ს დასაწერად. მგონი გასაგებია, რომ მათ გამოყენების სფერო არ დაელევათ smile მათი სინტაქსი ძალიან მარტივია:

Дата: ხუთშაბათი, 2008-03-27,

ნაბიჯი 9 - ვარეგულირებთ შრიფტებს.

ჩვენ უკვე გავეცანით ტეგ <font>-ს და მის ზოგიერთ ატრიბუტს. ამ თავში კი კიდევ ერთი საკმაოდ მნიშვნელოვანი ატრიბუტით დროებით დავხურავთ ამ თემას. ეს ატრიბუტი კი face გახლავთ და უშუალოდ ფონტის შესახებ შეუძლია ინფორმაციის ტარება, ანუ ტექსტი ვებ-გვერდზე მის მიერ მითითებული ფონტით გამოისახება.

მაგალითისთვის შეეცადეთ გამოიყენოთ ქვემოთ მოყვანილი კოდი იმისთვის, რომ ტექსტი Arial ფონტით გამოისახოს:

<font face="arial"> თქვენი ტექსტი</font>

ამ მოყვანილია იმ ფონტების სია, რომლებიც ნებისმიერ მომხმარებელს მოეძევება სისტემაში(მათ თვითონ ვინდოუსი აყენებს):

* Times;
* Times New Roman;
* Arial;
* Courier;
* Verdana;
* Tahoma;
* Comic Sans Ms;
* Garamond

ასე რომ, მათი გამოყენება ყველანაირი შიშის და ეჭვის გარეშე შეგიძლიათ.

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

<font face="arial, verdana, courier"> ტექსტი </font>

თუ თქვენი საიტის სტუმარს არ აღმოაჩნდა Arial, მაშინ ბრაუზერი შეეცდება ტექსტი გამოსახოს verdana-თი, თუ ეს ფონტიც არ აღმოჩნდა სისტემაში, მაშინ ტექსტი გამოისახება courier-ით, მაგრამ თუ ისიც არ აღმოჩნდა სისტემაში? მაშინ თქვენს სტუმარს ვინდოუსი ჰქონია გამოსაცვლელი smile

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

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

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

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