HTML სახელმძღვანელო ახალბედებისათვის - მეზღვაურთა გაერთიანებული ფორუმი

[ ახალი შეტყობინებები · მონაწილეები · ფორუმის წესები · ძებნა · RSS ]

გვერდი 1 დან
1
2
3
»

მეზღვაურთა გაერთიანებული ფორუმი » ☜♡☞ მეზღვაურთა ფორუმი ☜♡☞ » ☜♡☞ კომპიუტერი, ინტერნეტი და პროგრამირება ☜♡☞ » HTML სახელმძღვანელო ახალბედებისათვის

HTML სახელმძღვანელო ახალბედებისათვის

SEAMAN

თარიღი: ხუთშაბათი, 12.08.2010, 16:23 | შეტყობინება # 1

ყველაზე მაგარი ფორუმელი

ჯგუფი: ადმინისტრატორები

შეტყობინებები: 1423

რეპუტაცია: 1

სტატუსი: Offline

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

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

http://seaman.ge

SEAMAN

თარიღი: ხუთშაბათი, 12.08.2010, 16:24 | შეტყობინება # 2

ყველაზე მაგარი ფორუმელი

ჯგუფი: ადმინისტრატორები

შეტყობინებები: 1423

რეპუტაცია: 1

სტატუსი: Offline

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

http://seaman.ge

SEAMAN

თარიღი: ხუთშაბათი, 12.08.2010, 16:25 | შეტყობინება # 3

ყველაზე მაგარი ფორუმელი

ჯგუფი: ადმინისტრატორები

შეტყობინებები: 1423

რეპუტაცია: 1

სტატუსი: Offline

ვსწავლობთ მუშაობას

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

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

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

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

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

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

http://seaman.ge

SEAMAN

თარიღი: ხუთშაბათი, 12.08.2010, 16:25 | შეტყობინება # 4

ყველაზე მაგარი ფორუმელი

ჯგუფი: ადმინისტრატორები

შეტყობინებები: 1423

რეპუტაცია: 1

სტატუსი: Offline

Code

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

http://seaman.ge

SEAMAN

თარიღი: ხუთშაბათი, 12.08.2010, 16:26 | შეტყობინება # 5

ყველაზე მაგარი ფორუმელი

ჯგუფი: ადმინისტრატორები

შეტყობინებები: 1423

რეპუტაცია: 1

სტატუსი: Offline

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

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

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

http://seaman.ge

SEAMAN

თარიღი: ხუთშაბათი, 12.08.2010, 16:26 | შეტყობინება # 6

ყველაზე მაგარი ფორუმელი

ჯგუფი: ადმინისტრატორები

შეტყობინებები: 1423

რეპუტაცია: 1

სტატუსი: Offline

Code

http://seaman.ge

SEAMAN

თარიღი: ხუთშაბათი, 12.08.2010, 16:27 | შეტყობინება # 7

ყველაზე მაგარი ფორუმელი

ჯგუფი: ადმინისტრატორები

შეტყობინებები: 1423

რეპუტაცია: 1

სტატუსი: Offline

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

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

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

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

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

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

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

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

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

http://seaman.ge

SEAMAN

თარიღი: ხუთშაბათი, 12.08.2010, 16:27 | შეტყობინება # 8

ყველაზე მაგარი ფორუმელი

ჯგუფი: ადმინისტრატორები

შეტყობინებები: 1423

რეპუტაცია: 1

სტატუსი: Offline

Code

http://seaman.ge

SEAMAN

თარიღი: ხუთშაბათი, 12.08.2010, 16:28 | შეტყობინება # 9

ყველაზე მაგარი ფორუმელი

ჯგუფი: ადმინისტრატორები

შეტყობინებები: 1423

რეპუტაცია: 1

სტატუსი: Offline

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

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

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

მსგავსება რომ ჩამოვაყალიბოთ, მივიღებთ:
1. <html>...</html> - დოკუმენტის სხეული
2. <head>...</head> - დოკუმენტის თავი
3. <body>...</body> - დოკუმენტის ტანი

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

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

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

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

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

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

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

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

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

http://seaman.ge

SEAMAN

თარიღი: ხუთშაბათი, 12.08.2010, 16:28 | შეტყობინება # 10

ყველაზე მაგარი ფორუმელი

ჯგუფი: ადმინისტრატორები

შეტყობინებები: 1423

რეპუტაცია: 1

სტატუსი: Offline

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

მოკლედ, შევუდგეთ განხილვას:

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

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

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

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

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

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

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

http://seaman.ge

SEAMAN

თარიღი: ხუთშაბათი, 12.08.2010, 16:29 | შეტყობინება # 11

ყველაზე მაგარი ფორუმელი

ჯგუფი: ადმინისტრატორები

შეტყობინებები: 1423

რეპუტაცია: 1

სტატუსი: Offline

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

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

საბოლოო ჯამში ვიღებთ ჩანაწერს: <font color="#...">...</font> თუკი ამ ხაზს თქვენს გვერდზე ჩასვამთ და მრავალწერტილებს ჩაანაცვლებთ ფერის კოდით და ტექსტით, მაშინ ტეგი იმუშავებს და თქვენი ტექსტიც გაფერადდება.

მაგალითად:

მოგესალმებით!

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

http://seaman.ge

SEAMAN

თარიღი: ხუთშაბათი, 12.08.2010, 16:29 | შეტყობინება # 12

ყველაზე მაგარი ფორუმელი

ჯგუფი: ადმინისტრატორები

შეტყობინებები: 1423

რეპუტაცია: 1

სტატუსი: Offline

Code

<html>
<head>
<title>პირველი ნაბიჯები</title>
<META HTTP-EQUIV="Content-Type" Content="text/html; Charset=utf-8">
</head>
<body>
მოგესალმებით! (ტეგებში < > ვათავსებ ფერის კოდს --> font color="#FF0000" შემდგომ ვსვამთ ტექსტს და ბოლოში ისევ ტეგებში< >
ვსვამთ სიტყვას "/font"_ს)ეს ჩემი პირველი ვებ-გვერდია!
</body>
</html>

http://seaman.ge

SEAMAN

თარიღი: ხუთშაბათი, 12.08.2010, 16:30 | შეტყობინება # 13

ყველაზე მაგარი ფორუმელი

ჯგუფი: ადმინისტრატორები

შეტყობინებები: 1423

რეპუტაცია: 1

სტატუსი: Offline

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

მაგრამ როგორ დავსვათ რომელიმე ფერი მთელი გვერდის ძირითად ფერად? ამისთვის ტეგ <body>-ს ვუმატებთ ატრიბუტ text="#..."-ს და ვიღებთ შემდეგს:

...

</body>

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

http://seaman.ge

SEAMAN

თარიღი: ხუთშაბათი, 12.08.2010, 16:30 | შეტყობინება # 14

ყველაზე მაგარი ფორუმელი

ჯგუფი: ადმინისტრატორები

შეტყობინებები: 1423

რეპუტაცია: 1

სტატუსი: Offline

<html>
<head>
<title>პირველი ნაბიჯები</title>
<META HTTP-EQUIV="Content-Type" Content="text/html; Charset=utf-8">
</head>
<body text="#336699">
მოგესალმებით!(ტეგებში < > ვათავსებ ფერის კოდს --> font color="#FF0000" შემდგომ ვსვამთ ტექსტს და ბოლოში ისევ ტეგებში< >
ვსვამთ სიტყვას "/font"_ს)ეს ჩემი პირველი ვებ-გვერდია!
</body>
</html>

http://seaman.ge

SEAMAN

თარიღი: ხუთშაბათი, 12.08.2010, 16:30 | შეტყობინება # 15

ყველაზე მაგარი ფორუმელი

ჯგუფი: ადმინისტრატორები

შეტყობინებები: 1423

რეპუტაცია: 1

სტატუსი: Offline

ტექსტის ფერის შეცვლა ვისაწავლეთ, ახლა ფონის ფერს მივხედოთ.

http://seaman.ge

გვერდი 1 დან
1
2
3
»