Jump to content
IT-პროგრამირების ფორუმი
Sign in to follow this  
GHOST_FATHER

HTML I ნაწილი

Recommended Posts

სანამ დაიწყებთ ვარჯიშ მარტივად სკრიპტების სანახავად :link:
შეგიძლიათ გადმოიწეროთ დააყენოთ და ივარჯიშოთ აბ უბრალოდ Notepad წეროთ და გაფართოება HTML მისცემთ :smile:


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

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

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

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

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

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

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

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

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

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

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

რა არის ტეგები?
9031c5cb66fb.gif

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

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

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

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

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

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

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

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

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

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

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

აუცილებელი ტეგები
9031c5cb66fb.gif
<html>
<head>
<title>პირველი ნაბიჯები</title>
<META HTTP-EQUIV="Content-Type" Content="text/html; Charset=utf-8">
</head>
<body>
მოგესალმებით! ეს ჩემი პირველი ვებ-გვერდია!
</body>
</html>

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

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

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

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

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

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

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

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

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

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

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

Share this post


Link to post
Share on other sites

ესეც კიდევ ერთი წინ გადადგმული ნაბიჯი :)

Share this post


Link to post
Share on other sites
<META HTTP-EQUIV="Content-Type" Content="text/html; Charset=utf-8">

amas rom vwer qartul asoebs mainc kitxvisnishnebad mixsnis browser shi da ra vqna?

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

Sign in to follow this  

×