|
HTML სახელმძღვანელო ახალბედებისათვის
|
|
| SEAMAN | თარიღი: ხუთშაბათი, 12.08.2010, 16:30 | შეტყობინება # 16 |
 ყველაზე მაგარი ფორუმელი
ჯგუფი: ადმინისტრატორები
შეტყობინებები: 1423
სტატუსი: Offline
| წინა ნაბიჯში ტექსტის ფერის შეცვლა ვისწავლეთ, ახლა ფონის ფერებს და მათი გამოყენების ეთიკას შევეხოთ. გვერდის ფონის ფერი, ისევე, როგორც ტექსტის ძირითადი ფერი, ტეგ <body>-ს ატრიბუტია და იწერება როგორც bgcolor="#...". აქ ერთადერთი ახალი სიტყვა bgcolor-ია, რომელიც იშიფრება როგორც BackGround Color(ფონის ფერი), დანარჩენი კი("#...") უკვე ნაცნობია - ის ფერის კოდს აღნიშნავს. საბოლოო ჩანაწერი ასეთი იქნება: <body ... bgcolor="#..."> სადაც პირველ მრავალწერტილში სხვადასხვა ატრიბუტები იგულისხმება(მათი არსებობა აუცილებელი არაა), ხოლო მეორეში ფერის კოდი. მაგალითად: <body bgcolor="#000000"> ... </body> თუ ჩვენს გვერდზე ასეთ ტეგს დავწერთ, ფონის ფერი შავი იქნება, თუმცა თქვენ კოდის ცვლით სასურველი ფერების მიღება შეგიძლიათ. გვერდის კეთებისას აუცილებლად მიუთითეთ ტექსტის, ფონის და ბმულის(ამას ცოტა მოგვიანებით გავეცნობით) ფერი, თუნდაც ფონის ფერად თეთრ, ტექსტის ფერად შავ და ბმულის ფერად ლურჯ ფერებს იყენებდეთ, წინააღმდეგ შემთხვევაში მომხმარებელი დაინახავს იმ ფერებს, რომლებიც მასთან Default-ადაა დაყენებული.
http://seaman.ge
|
| |
| |
| SEAMAN | თარიღი: ხუთშაბათი, 12.08.2010, 16:31 | შეტყობინება # 17 |
|
ყველაზე მაგარი ფორუმელი
ჯგუფი: ადმინისტრატორები
შეტყობინებები: 1423
სტატუსი: Offline
| Code <html>
<head>
<title>პირველი ნაბიჯები</title>
<META HTTP-EQUIV="Content-Type" Content="text/html; Charset=utf-8">
</head>
<body text="#336699" bgcolor="#CFCFCF">
მოგესალმებით! ეს ჩემი პირველი ვებ-გვერდია!
</body>
</html>
http://seaman.ge
|
| |
| |
| SEAMAN | თარიღი: ხუთშაბათი, 12.08.2010, 16:31 | შეტყობინება # 18 |
|
ყველაზე მაგარი ფორუმელი
ჯგუფი: ადმინისტრატორები
შეტყობინებები: 1423
სტატუსი: Offline
| ტექნიკურ ნაწილს მოვრჩით, გადავიდეთ ესთეტიურ მხარეზე. დაიმახსოვრეთ, რომ საიტზე არ შეიძლება მყვირალა ფერების გამოყენება. ეს დიზაინსაც აფუჭებს და ნაწერის ამოკითხვასაც უფრო აძნელებს. ასე რომ, მოუფრთხილდით თქვენი საიტის სტუმრების თვალებსა და ნერვებს თუნდაც მხოლოდ კომერციული მოსაზრებით - არავის მოუნდება მეორედ შეიხედოს ასეთ გადაჭრელებულ საიტზე, თუნდაც იქ რაიმე მართლაც ღირებული იყოს. სამაგიეროდ, გამოიყენეთ უფრო ნაზი და რბილი ფერები, ოღონდ ამასაც დაკვირვება უნდა - შეიძლება ცალ-ცალკე აღებული თქვენი ფერები ძალიან სასიამოვნოდ გამოიყურებოდნენ, მაგრამ ერთად საშინელ არეულობას ქმნიდნენ. რა ვქნა? იკითხავს გამოუცდელი მომხმარებელი. ჩემი ერთადერთი რჩევაა - მაქსიმალურად დააკვირდით ფერებს შერჩევისას და "დიდ ინტერნეტში" თქვენი საიტის წარდგენამდე აუცილებლად ჰკითხეთ რაც შეიძლება ბევრ ადამიანს აზრი მის შესახებ. ფერებზე ლაპარაკი ჯერჯერობით ამით დამთავრდა. გადადით შემდეგ ნაბიჯზე, ახალი ერა იწყება! :-)
http://seaman.ge
|
| |
| |
| SEAMAN | თარიღი: ხუთშაბათი, 12.08.2010, 16:32 | შეტყობინება # 19 |
|
ყველაზე მაგარი ფორუმელი
ჯგუფი: ადმინისტრატორები
შეტყობინებები: 1423
სტატუსი: Offline
| პარაგრაფის ტეგი მასში მოქცეული ტექსტის განლაგებაზე აგებს პასუხს. ის იწერება, როგორც <p>, ხოლო მისი ატრიბუტი align გვიჩვენებს, თუ როგორი განლაგება ექნება ამ ტეგში მოქცეულ ტექსტს. საბოლოო ჯამში კი გვაქვს ასეთი ჩანაწერი: <p align="..."> ...<br /> </p><br /> მრავალწერტილების ადგილას შესაბამისად ატრიბუტის მნიშვნელობა და ტექსტი უნდა ჩაიწეროს. ატრიბუტს კი სულ 4 მნიშვნელობა აქვს :
Code 1. left ტექსტს მარცხენა კიდეზე ასწორებს
2. right ტექსტს მარჯვენა კიდეზე ასწორებს
3. center ტექსტს გვერდის ვერტიკალური შუახაზის სიმეტრიულად ასწორებს(გამოიყენება სათაურების კეთებისას)
4. justify იგივეა, რაც left+right, ანუ ტექსტს ორივე კიდეზე ასწორებს
http://seaman.ge
|
| |
| |
| SEAMAN | თარიღი: ხუთშაბათი, 12.08.2010, 16:33 | შეტყობინება # 20 |
|
ყველაზე მაგარი ფორუმელი
ჯგუფი: ადმინისტრატორები
შეტყობინებები: 1423
სტატუსი: Offline
| ქვემოთ განხილულ მაგალითს ჩამატებული აქვს პარაგრაფის ტეგი, რომელიც ტექსტს სათაურის ფუნქციას აძლევს, ანუ გამოიყენება align ატრიბუტის center მნიშვნელობა. თქვენ სცადეთ გააკეთოთ გვერდი, რომელზეც ყველა მნიშვნელობა იქნება გამოყენებული.
http://seaman.ge
|
| |
| |
| SEAMAN | თარიღი: ხუთშაბათი, 12.08.2010, 16:34 | შეტყობინება # 21 |
|
ყველაზე მაგარი ფორუმელი
ჯგუფი: ადმინისტრატორები
შეტყობინებები: 1423
სტატუსი: Offline
| ტექსტი, რომელიც მაგალითშია გამოყენებული, ერთ-ერთი სტატიიდანაა აღებული. თქვენ, რა თქმა უნდა, იქ თქვენთვის სასურველ ტექსტს ჩასვამთ. დაიმახსოვრეთ! პარაგრაფის შიგნით არ შეიძლება სხვა პარაგრაფის და
ტეგის გამოყენება, ასეთი კონსტრუქცია არც იმუშავებს და თქვენც დაგაბნევთ: <p align="right"> <p>...</p> <p>...</p> <p>...</p> </p> და <p align="right"> <div>...</div> <p>...</p> <div>...</div> </p> თუმცა <div>-ს ასეთი კონსტრუქციის ”ატანა” და შესრულება შეუძლია: <div align="right"> <p>...</p> <p>...</p> <p>...</p> </div> თუმცა ჩვენი საუბარი <p> და <div>-თან დაკავშირებით აქ მთავრდება, ნუ გეგონებათ, რომ მათ მეტი არაფერი შეუძლიათ. უბრალოდ თქვენ ჯერ მზად არ ხართ მათ გასაცნობად.
http://seaman.ge
|
| |
| |
| SEAMAN | თარიღი: ხუთშაბათი, 12.08.2010, 16:36 | შეტყობინება # 22 |
|
ყველაზე მაგარი ფორუმელი
ჯგუფი: ადმინისტრატორები
შეტყობინებები: 1423
სტატუსი: Offline
| ამ ნაბიჯზე ჩვენ სათაურებს და ტეგ -ის კიდევ ერთ ატრიბუტს გავეცნობით, რაც ტექსტის ზომის რეგულირების საშუალებას მოგვცემს. სათაური(Heading) საშუალებას გვაძლევს ტექსტი ექვს ზომაზე დავარეგულიროთ:
 ტეგში ჩასმული ტექსტი არათუ გაიზარდა, არამედ გასქელდა კიდეც, თან ტეგივით ხაზი გამოტოვა. სამართლიანიცაა - როდის გინახავთ, სათაურსა და ტექსტს შორის ხაზი არ იყოს გამოტოვებული? მოკლედ, გასაგებია, რომ ეს ტეგი სათაურებისთვის იდეალურია, მაგრამ რა ვქნათ, თუ თვითონ ტექსტში გვინდა ზომის შეცვლა, თან ყველანაირი ავტომატური გასქელებისა და ხაზის გამოტოვების გარეშე? აქ ტეგის დაპირებულ ახალ ატრიბუტს უნდა გავეცნოთ. მას size ჰქვია და ტექსტის ზომის მეყსეულად შესაცვლელად გამოიყენება. მისი სინტაქსი ასე გამოიყურება:
http://seaman.ge
|
| |
| |
| SEAMAN | თარიღი: ხუთშაბათი, 12.08.2010, 16:36 | შეტყობინება # 23 |
|
ყველაზე მაგარი ფორუმელი
ჯგუფი: ადმინისტრატორები
შეტყობინებები: 1423
სტატუსი: Offline
| როგორც ხედავთ, ტექსტი გადიდდა და პირველივე შეხედვიდანვე იქცევს ყურადღებას. ეს კი თქვენს ნაგულისხმევ აზრის გაგებას უფრო გააადვილებს მაგრამ ფრთხილად იყავით! ამან თქვენი საიტს დიაზაინი არ უნდა დააზიანოს!
http://seaman.ge
|
| |
| |
| SEAMAN | თარიღი: ხუთშაბათი, 12.08.2010, 16:37 | შეტყობინება # 24 |
|
ყველაზე მაგარი ფორუმელი
ჯგუფი: ადმინისტრატორები
შეტყობინებები: 1423
სტატუსი: Offline
| ტექსტის ზომის და ფერის შეცვლა უკვე ვისწავლეთ. ახლა კი დროა, ცოტაოდენ გაფორმებაზეც ვიზრუნოთ. ჩვენ ჯერ სიტყვა არ დაგვიძრავს დახრილ, გახაზულ, გადახაზულ თუ ნაბეჭდ ტექსტზე(თუმცა გასქელებულზე უკვე ვილაპარაკეთ), არც ზედა და ქვედა ინდექსების გაკეთება გვისწავლია. ამ ნაბიჯში თქვენ ამ ყველაფერს და ცოტა მეტსაც შეისწავლით. მთავარია, ხაზს თვალი გააყოლოთ  ამ ტეგებს ზედმეტი ახსნა-განმარტება არ სჭირდებათ, ამიტომ უბრალოდ ჩამოვწეროთ:
http://seaman.ge
|
| |
| |
| SEAMAN | თარიღი: ხუთშაბათი, 12.08.2010, 16:39 | შეტყობინება # 25 |
|
ყველაზე მაგარი ფორუმელი
ჯგუფი: ადმინისტრატორები
შეტყობინებები: 1423
სტატუსი: Offline
| მართალია, ტექსტი ძალიან ლამაზი არ გამოვიდა, მაგრამ ის მხოლოდ საჩვენებლად იყო. იმედია, თქვენ უკეთესის გაკეთებას შეძლებთ. ახლა კი დროა, რომ დაპირებულ ”ცოტა მეტს”, ანუ ტეგ pre-ს გავეცნოთ. მას ერთი მშვენიერი ფუნქცია გააჩნია - მასში მოქცეული ტექსტი ყველანაირი დამატებითი ტეგების გარეშე ჩანს ისეთივე, როგორსაც თქვენ კოდში წერთ. გავშიფროთ განსაზღვრება: თუ ჩემს რჩევებს მიყვებოდით და ცოტა თვითონაც წაიექსპერიმენტეთ, მაშინ ისიც გეცოდინებათ, რომ სიტყვებს შუა თუნდაც 10 ჰარი დასვათ, ის ბრაუზერში მაინც ერთად გამოჩნდება, ხოლო თქვენს სასურველ ადგილას ხაზის გადასატანად კი
-ს გარეშე არაფერი გამოგივათ. pre ამ პრობლემას გადაგიჭრით, მაგრამ ერთი მინუსი გააჩნია(თუ ეს მინუსად შეიძლება ჩაითვალოს) - მასში მოქცეული ტექსტი ნაბეჭდად გამოჩნდება. ეს ტეგი განსაკუთრებით ლექსის გვერდზე განსათავსებლად გამოგადგებათ. ქვემოთ მოყვანილ ტექსტში pre-ს მეტი ტეგის გამოყენება არაა საჭირო, რაც ტექსტის წერის პროცესს ძალიან აადვილებს. ერთი ტექსტის ერთდროულად ნებისმიერი რაოდენობის გაფორმების ტეგში ჩასმა შეიძლება:
http://seaman.ge
|
| |
| |
| SEAMAN | თარიღი: ხუთშაბათი, 12.08.2010, 16:40 | შეტყობინება # 26 |
|
ყველაზე მაგარი ფორუმელი
ჯგუფი: ადმინისტრატორები
შეტყობინებები: 1423
სტატუსი: Offline
| ზემოთ მოყვანილ მაგალითში სამი: ნაბეჭდი, გასქელებული და დახრილი ტექსტის ტეგია გამოყენებული. თქვენც შეგიძლიათ წაიექსპერიმენტოთ და ერთდროულად რამდენიმე ტეგში ჩასვათ თქვენი ტექსტი, შედეგად ცოტათი გაიწაფებით ამ საქმეში და მომხმარებელს თქვენი საიტის დანახვისას გული მაინც არ წაუვა ტეგი <big> ტექსტის ზომას უფრო ადიდებს, ხოლო <small> პირიქით - აპატარავებს:
http://seaman.ge
|
| |
| |
| SEAMAN | თარიღი: ხუთშაბათი, 12.08.2010, 16:41 | შეტყობინება # 27 |
|
ყველაზე მაგარი ფორუმელი
ჯგუფი: ადმინისტრატორები
შეტყობინებები: 1423
სტატუსი: Offline
| ვარეგულირებთ შრიფტებს. ჩვენ უკვე გავეცანით ტეგ -ს და მის ზოგიერთ ატრიბუტს. ამ თავში კი კიდევ ერთი საკმაოდ მნიშვნელოვანი ატრიბუტით დროებით დავხურავთ ამ თემას. ეს ატრიბუტი კი face გახლავთ და უშუალოდ ფონტის შესახებ შეუძლია ინფორმაციის ტარება, ანუ ტექსტი ვებ-გვერდზე მის მიერ მითითებული ფონტით გამოისახება. მაგალითისთვის შეეცადეთ გამოიყენოთ ქვემოთ მოყვანილი კოდი იმისთვის, რომ ტექსტი Arial ფონტით გამოისახოს:
http://seaman.ge
|
| |
| |
| SEAMAN | თარიღი: ხუთშაბათი, 12.08.2010, 16:41 | შეტყობინება # 28 |
|
ყველაზე მაგარი ფორუმელი
ჯგუფი: ადმინისტრატორები
შეტყობინებები: 1423
სტატუსი: Offline
| Code * Times;
* Times New Roman;
* Arial;
* Courier;
* Verdana;
* Tahoma;
* Comic Sans Ms;
* Garamond
http://seaman.ge
|
| |
| |
| SEAMAN | თარიღი: ხუთშაბათი, 12.08.2010, 16:42 | შეტყობინება # 29 |
|
ყველაზე მაგარი ფორუმელი
ჯგუფი: ადმინისტრატორები
შეტყობინებები: 1423
სტატუსი: Offline
| აქ ალბათ გაგიჩნდებათ კითხვა - მაგრამ რა ვქნათ, თუ მომხმარებელს მაინც არ აქვს ესა თუ ის ფონტი სისტემაში? ესეც გათვალიწინებულია - თქვენ შეგიძლიათ ერთდროულად რამდენიმე ფონტი მიუთითოთ. HTML მიმდევრობით მოძებნის მათ სისტემაში და პირველივე არსებულით გამოსახავს ტექსტს. მაგალითად, თქვენ დაწერეთ ასეთი კოდი :
თუ თქვენი საიტის სტუმარს არ აღმოაჩნდა Arial, მაშინ ბრაუზერი შეეცდება ტექსტი გამოსახოს verdana-თი, თუ ეს ფონტიც არ აღმოჩნდა სისტემაში, მაშინ ტექსტი გამოისახება courier-ით, მაგრამ თუ ისიც არ აღმოჩნდა სისტემაში? მაშინ თქვენს სტუმარს ვინდოუსი ჰქონია გამოსაცვლელი ძალიან ხშირად კითხულობენ - შეიძლება თუ არა საკუთარ საიტზე დააყენონ რაიმე ლამაზი და ეგზოტიკური ფონტი? პასუხი რა თქმა უნდა, დადებითია, მაგრამ მე მაინც არავის ვურჩევდი ამის გაკეთებას, რადგანაც თუ მომხმარებელს არ აღმოაჩნდა თქვენი მოწონებული ფონტი სისტემაში(99.9% ეს ასეა), მაშინ ის თქვენს საიტზე ტექსტს კი არა, გაუგებარი სიმბოლოების განლაგებას დაინახავს. რა თქმა უნდა, შეიძლება საიტის თავში დადოთ ამ ფონტის გადმოსაწერი ბმული და მომხმარებელს ინგლისური ასოებით შესთავაზოთ მისი გადმოწერა, მაგრამ იმ 99.9%-ის 99.9% ასეთ წინადადებას უარყოფს და მეორედ ნამდვილად აღარ გაუჩნდება სურვილი თქვენს საიტს ეწვიოს. მაშინ რა ვქნათ? იკითხავს მკითხველი. ერთადერთი სწორი გზა ამ შემთხვევაში უნიკოდის გამოყენებაა, თუმცა ქართული ინტერნეტი დღეს მას არც ისე კარგად იცნობს. თუ არც თქვენ იცნობთ მას, დროა გაიცნოთ, ნამდვილად მოგეწონებათ თუმცა ამ სახელმძღვანელოში უნიკოდზე ლაპარაკი არ იქნება, რადგანაც ეს ცალკე თემაა. მის შესახებ ინფორმაცია შეგიძლიათ აქიდან მიიღოთ. მოკლედ რომ ვთქვათ, გამოსავალი უნიკოდშია, ხოლო ეგზოტიკურ ფონტებზე გული ნუ დაგწყდებათ - საიტის სილამაზე ფონტს კი არა, დიზაინს ემყარება. თუმცა არსებობს მეორე გამოსავალი - თუ აუცილებელი გახდა რაღაც ტექსტის არასტანდარტული ფონტით გამოსახვა, მაშინ აკრიფეთ ის რომელიმე რედაქტორში და გადაუღეთ სურათი, ეს სურათი კი თქვენს გვერდზე განათავსეთ, მაგრამ ნუ მოათავსებთ მათში ბმულებს - ისინი მაინც არ იმუშავებენ, მომხმარებელი კი ძალიან გაწვალდება გილოცავთ! თქვენ დაამთავრეთ ტექსტზე მუშაობა და შემდეგი ნაბიჯიდან უკვე სურათების გამოყენებას გავეცნობით. ასე რომ წინ, წინ, წინ!
http://seaman.ge
|
| |
| |
| SEAMAN | თარიღი: ხუთშაბათი, 12.08.2010, 16:45 | შეტყობინება # 30 |
|
ყველაზე მაგარი ფორუმელი
ჯგუფი: ადმინისტრატორები
შეტყობინებები: 1423
სტატუსი: Offline
| ალბათ ინტერნეტის ხშირი მომხმარებელი ხარ და ისიც კარგად იცი, რომ კარგი გვერდი გრაფიკული გაფორმების გარეშე თითქმის წარმოუდგენელია. თუ ჩვენ სრულყოფილი გვერდის გაკეთება გვინდა, სურათის გამოსახვაც უნდა ვისწავლოთ. ამისათვის კიდევ ერთ ახალ ტეგს - <img>-ს და ამ ტეგის უმთავრეს ატრიბუტს - scr-ს უნდა გავეცნოთ. img ბროუზერს აცნობებს, რომ საქმე სურათთან გვაქვს, ხოლო scr - ამ სურათის მისამართს(სწორედ ამიტომაა იგი უმთავრესი). საბოლოო სინტაქსს შემდეგი სახე აქვს: 
http://seaman.ge
|
| |
| |
