HTML სახელმძღვანელო ახალბედებისათვის - მეზღვაურთა გაერთიანებული ფორუმი
შაბათი, 26.05.2018, 01:33
მეზღვაურთა გაერთიანებული ფორუმი » ☜♡☞ მეზღვაურთა ფორუმი ☜♡☞ » ☜♡☞ კომპიუტერი, ინტერნეტი და პროგრამირება ☜♡☞ » HTML სახელმძღვანელო ახალბედებისათვის
HTML სახელმძღვანელო ახალბედებისათვის
SEAMAN თარიღი: ხუთშაბათი, 12.08.2010, 16:23 | შეტყობინება # 1
ის იშიფრება როგორც HyperText Markup Language. ის სტატიური და შესაბამისად მოუქნელია. იმისთვის, რომ გვერდზე, რომელსაც მომხმარებელი ნახულობს, რამე შეიცვალის, მთელი კოდის მოდიფიცირებაა საჭირო. აქ ისმის სრულიად სამართლიანი კითხვა: თუ HTML ასეთი საშინელებაა, რატომ უნდა ვისწავლოთ ის? ნუთუ არ არსებობს უფრო განვითარებული ენები?
SEAMAN თარიღი: ხუთშაბათი, 12.08.2010, 16:24 | შეტყობინება # 2
SEAMAN თარიღი: ხუთშაბათი, 12.08.2010, 16:25 | შეტყობინება # 3
ვსწავლობთ მუშაობას
სანამ მუშაობას შევუდგებოდეთ, ბუნებრივია, სამუშაო სივრცე გვჭირდება. ამისათვის გავხსნათ საქაღალდე D:\პირველი ნაბიჯები\
თუკი უნიკოდთან მწყრალად ხართ ან FAT არ გიწყობთ ხელს, საქაღალდეს ინგლისური ასოებითაც შეგიძლიათ დაარქვათ ნებისმიერი სახელი, ეს არაფერს შეცვლის.
ახლა რაც შეეხება პროგრამულ უზრუნველყოფას. სამუშაოდ გირჩევთ "Macromedia Dreamweaver 8.0"-ს. ის ამ საქმეში საუკეთესოა, თუმცა ჩვეულებრივი ტექსტური რედაქტორებიც გამოდგება. მაგალითად ბლოკნოტი(Notepad).
მე გვერდების შევსებისას ქართულ ასოებს გამოვიყენებ. თქვენ თუ ეს გაგიჭირდებათ, შეგიძლიათ ინგლისური ასოები გამოიყენოთ, არც ეს ცვლის რაიმე არსებითს.
ახლა, როცა ეს პრობლემა უკვე მოაგვარეთ, მუშაობის დაწყებაც შეიძლება.
შექმენით თქვენს ძირეულ საქაღალდეში ფაილი სახელად index.html და დააკოპირეთ ან გადაწერეთ მასში ქვემოთ მოცემული კოდი("ვნახოთ" ბმულის გარეშე):
SEAMAN თარიღი: ხუთშაბათი, 12.08.2010, 16:25 | შეტყობინება # 4
SEAMAN თარიღი: ხუთშაბათი, 12.08.2010, 16:26 | შეტყობინება # 5
შეინახეთ ფაილი *.html გაფართოებით და გახსენით ის ბრაუზერში. დაინახავთ ზუსტად იმას, რასაც "ვნახოთ" ღილაკზე დაჭერით
ძალიან ბევრი წერს, რომ კოდი გადაწერა ბლოკნოტში, შეინახა და ტექსტური ფაილი მიიღო. ეს რომ არ მოგივიდეთ, File>Save ფანჯარაში მიუთითეთ All Files და შეინახეთ როგორც index.html(ან "ნებისმიერი სახელი".html. მთავარია, რომ წერტილის მერე html ეწეროს). დაინახავთ, რომ თქვენს მიერ შენახულ ფაილს ბრაუზერის ხატულა გაუჩნდა. ეს ნიშნავს, რომ პროცედურა წარმატებით დასრულდა.
თუ თქვენ რაიმეს შეცვლით რედაქტორიდან და მისი ბრაუზერში ნახვა დაგჭირდებათ, ჯერ შეინახეთ ფაილი რედაქტორში, შემდეგ ბრაუზერში დააჭირეთ ღილაკს Refresh(ან F5) ან დახურეთ ბრაუზრი და გახსენით თავიდან. ისე მე პირველ გზას გირჩევდით
SEAMAN თარიღი: ხუთშაბათი, 12.08.2010, 16:26 | შეტყობინება # 6
SEAMAN თარიღი: ხუთშაბათი, 12.08.2010, 16:27 | შეტყობინება # 7
HTML გამოსახავს ყველაფერს, რაც კი გზაზე(ანუ სინტაქსში) ხვდება, მაგრამ ამ გამოსახვის თავისებურებებს ტეგები განსაზღვრავენ. ვთქვათ თქვენ html გაფართოების ფაილში ჩაწერეთ რაიმე ტექსტი, მაგრამ როგორც არ უნდა დაიცვათ წერისას არეები, ბრაუზერში ის მაინც ერთ ხაზზე გამოისახება. ეს ხდება იმიტომ, რომ HTML მანამ წერს ტექსტს ერთ ხაზზე, სანამ კოდში სპეციალური ტეგი -
არ შეხვდება. ამის შემდეგ ის ხვდება, რომ მეორე ხაზზე უნდა გააგრძელოს წერა. შეგიძლიათ ეს თვითონ შეამოწმოთ.
ყველაფერს, რასაც <> ჩარჩოს შიგნით მოაქცევთ, HTML ტეგად გაიგებს და შეეცდება მოძებნოს მისი შესატყვისი თავისი ტეგების "საწყობში", თუ ასეთი იპოვა, შეასრულებს, თუ ვერა - გააგრძელებს წერას უწინდებურ რეჟიმში, მაგრამ თქვენს არასწორ ტეგს არ ამოწერს. როგორც ტეგის შემთხვევაში დავინახეთ, დამხურავი ტეგი იგივე იქნება, რაც გამხსნელი, მხოლოდ პირველ ჩარჩოსა და დანარჩენ ნაწილს შორის "/" დაემატება. მაგალითად, თუ მე მინდა დავწერო: " კომპინფო", ამისთვის კოდში ვწერ შემდეგს: " კომპინფო". ეს HTML-ს მიუთითებს, რომ "..." კოდში მოქცეული სიმბოლოების ნაკრები (ამ შემთხვევაში სიტყვის ნაწილი "კომპ") უნდა გაასქელოს. რა და რა სახის ტეგები არსებობს?
მაგალითად მე დამჭირდა სიტყვის გასქელება. ვიყენებ ტეგ b-ს (bold), მაგრამ იმისთვის, რომ HTML-მა გაარკვიოს, თუ სადამდე უნდა ასქელოს სიტყები, საჭიროა დამხურავი ნაწილი, რომელიც მიუთითებს, რომ ტექსტის გამოტანა ტეგის გახსნამდე არსებულ რეჟიმში გაგრძელდეს.
მაგრამ იქნებ დამჭირდა მომდევნო ხაზზე გადასვლა? მაშინ ვიყენებ ტეგ
-ს, რომელსაც დამხურავი ტეგი არ სჭირდება.
SEAMAN თარიღი: ხუთშაბათი, 12.08.2010, 16:27 | შეტყობინება # 8
SEAMAN თარიღი: ხუთშაბათი, 12.08.2010, 16:28 | შეტყობინება # 9
ალბათ გაინტერესებთ, რას ნიშნავს სურათი, რომელიც კოდის მარცხნივაა აწებებული უკვე მესამე თავია და რომელზეც სიტყვა არ დამიძრავს რახან უკვე ვიცით, რას ნიშნავს ტეგი და რა აგებულება აქვს მას, უკვე დროა ეს სურათიც გავარჩიოთ.
1. <html>...</html> - დოკუმენტის სხეული
2. <head>...</head> - დოკუმენტის თავი
3. <body>...</body> - დოკუმენტის ტანი
პირველი ტეგით იწყება და მთავრდება გვერდი. მასში მთელი ინფორმაციაა მოქცეული. მეორე ტეში მოქცეულია keyword-ები, გვერდის კოდირება, სათაური და დანარჩენი ზოგადი ინფორმაცია. მესამე ტეგში მოქცეულია დოკუმენტის ის ნაწილი, რომელიც ვებ-გვერდზე ჩანს.
გილოცავ! შენ დაამთავრე თეორიული ნაწილი და შემდეგ ნაბიჯზე უკვე პრაქტიკულ სამუშაოსაც გაეცნობი. გისურვებ წარმატებას!
SEAMAN თარიღი: ხუთშაბათი, 12.08.2010, 16:28 | შეტყობინება # 10
წინა ნაბიჯზე შენ გაიგე, თუ რას ნიშნავს კოდის გვერდით მოთავსებული სურათი, ახლა ალბათ თვითონ კოდმაც დაგაინტერესა მოკლედ, შევუდგეთ განხილვას:
<html> და <head> ჩვენთვის უკვე ნაცნობი ტეგებია, მაგრამ რა დანიშნულება აქვთ <title> ან <META> ტეგებს?
როგორც კოდიდანაც ჩანს, ორივე <head> ტეგის ქვეტეგია და გვერდის შესახებ ზოგად ინფორმაციას შეიცავენ. ბევრი ალბათ უკვე მიხვდა, რომ <title> გვერდის სათაურია, მაგრამ რაში გვჭირდება ის? დააჭირეთ ”ვნახოთ” ღილაკს და გახსნილ ფანჯარაში დააკვირდით ზედა ლურჯ ზოლს, ხომ არ ემთხვევა მისი წარწერა <title> ტეგში მოქცეულ წარწერას?
<title> ტეგის მნიშვნელობა გასაგებია, გადავიდეთ <META> ტეგის განხილვაზე.
ამ ტეგს გვერდის ავტორის, საავტორო უფლებების, keyword-ების და კოდირების შესახებ ინფორმაციის შენახვა შეუძლია. ასევე შეუძლია სერვერისთვის განახლების ინტერვალის, PICS რეიტინგის და სხვა ასეთი ინფორმაციის მიწოდება, თუმცა აქ მათზე დაწვრილებით არ ვილაპარაკებთ.
თუ ამ ტეგს დააკვირდებით, ბოლოში დაინახავთ შემდეგ კოდს: "charset=utf8". ეს ის ნაწილია, რისთვისაც ეს ტეგი გამოვიყენეთ და ნიშნავს, რომ გვერდის default კოდირებად utf-8-ა დასმული, ეს კი თავის მხრივ შესაძლებელს ხდის, რომ უნიკოდით ჩაწერილი ქართული სიმბოლოები ბრაუზერმა კითხვის ნიშნების მაგივრად ქართულად გამოაჩინოს.
ტეგ <body>-ს გახსნის შემდეგ ყველანაირი ტეგის გარეშე მოდის ტექსტი "მოგესალმებით! ეს ჩემი პირველი ვებ-გვერდია!", რომელსაც ბრაუზერი უბრალოდ ამოწერს.
ვხურავთ აუცილებელ ტეგებს და ვტკბებით ნამუშევრით. თქვენი პირველი ვებ-გვერდი მზადაა.
SEAMAN თარიღი: ხუთშაბათი, 12.08.2010, 16:29 | შეტყობინება # 11
დავიწყოთ უმარტივესიდან, რომელიც ძალიან ხშირად გვჭირდება. გავაფერადოთ ჩვენი ტექსტი. HTML-ში ყველა ფერს თავისი კოდი გააჩნია. აქ ყველა ფერის კოდის მოძებნა შეგიძლიათ. ძალიან კარგი იქნება, თუ ამ გვერდს შეინახავთ - შეიძლება როდესმე გამოგადგეთ.
იმისთვის, რომ ტექსტი გავაფერადოთ, ჩვენ ახალი ტეგის - font-ის შემოღება დაგვჭირდება. თუმცა მარტო ტეგი არ გვეყოფა, მისი ატრიბუტი color-იც დაგვჭირდება.
საბოლოო ჯამში ვიღებთ ჩანაწერს: <font color="#...">...</font> თუკი ამ ხაზს თქვენს გვერდზე ჩასვამთ და მრავალწერტილებს ჩაანაცვლებთ ფერის კოდით და ტექსტით, მაშინ ტეგი იმუშავებს და თქვენი ტექსტიც გაფერადდება.
სცადეთ და FF0000-ის მაგივრად ჩასვით სხვა მნიშვნელობა. ამ ტეგში მოქცეული ტექსტის ფერის მაშინვე შეიცვლება, ოღონდ ფერის კოდის მითითებისას და არ დაგავიწყდეთ წინ #(ძიეზის) დასმა.
SEAMAN თარიღი: ხუთშაბათი, 12.08.2010, 16:29 | შეტყობინება # 12
მოგესალმებით! (ტეგებში < > ვათავსებ ფერის კოდს --> font color="#FF0000" შემდგომ ვსვამთ ტექსტს და ბოლოში ისევ ტეგებში< >
ვსვამთ სიტყვას "/font"_ს)ეს ჩემი პირველი ვებ-გვერდია!
SEAMAN თარიღი: ხუთშაბათი, 12.08.2010, 16:30 | შეტყობინება # 13
ტეგი ... მრავალფუნქციურია. ის ასევე მშვენივრად ითავსებს შრიფტის ზომის, სახეობის, სტილის და კიდევ მრავალი ფუნქციის კონტროლს, მაგრამ ამაზე ოდნავ მოგვიანებით ვისაუბრებთ.
მაგრამ როგორ დავსვათ რომელიმე ფერი მთელი გვერდის ძირითად ფერად? ამისთვის ტეგ <body>-ს ვუმატებთ ატრიბუტ text="#..."-ს და ვიღებთ შემდეგს:
<body text="#...">
აქ კი ისღა გვრჩება მრავალწერტილები სასურველი ფერის კოდით და ტექსტით შევცვალოთ.
SEAMAN თარიღი: ხუთშაბათი, 12.08.2010, 16:30 | შეტყობინება # 14
მოგესალმებით!(ტეგებში < > ვათავსებ ფერის კოდს --> font color="#FF0000" შემდგომ ვსვამთ ტექსტს და ბოლოში ისევ ტეგებში< >
SEAMAN თარიღი: ხუთშაბათი, 12.08.2010, 16:30 | შეტყობინება # 15
ტექსტის ფერის შეცვლა ვისაწავლეთ, ახლა ფონის ფერს მივხედოთ.