ONLINE - კურსები - HTML
გაკვეთილი 8. სურათები, ფოტოსურათები
გსურთ საკუთარი სურათის განთავსება თქვენს საიტზე? ეს ძალიან ადვილია. რაც ამისთვის გესაჭიროებათ არის ტეგი <img>:
<Img src = "horse.jpg" alt = "horse">
და თქვენ ბრაუზერში უკვე ხედავთ:
ტეგი <img> -ის დახმარებით თქვენ ატყობინებთ ბრაუზერს, რომ გსურთ სურათის ჩასმა, ხოლო ატრიბუტი "src" (შემოკლებით სიტყვისგან "source" - წყარო) მიუთითებს მის ადგილსამყოფელს. მიაქციეთ ყურადღება რომ, ტეგი <img> არ საჭიროებს დამკეტ ტეგს. როგორც ტეგი <br> - ეს ბრძანება არ უკავშირდება ტექსტს.
"Horse.jpg" - ეს სურათის ფაილის სახელია, ".jpg" - ფაილის გაფართოებაა, გამოსახულების ტიპი. როგორც გაფართოება ".html" მიუთითებს, რომ ფაილი წარმოადგენს HTML- დოკუმენტს, ისევე როგორც ".jpg" აუწყებს ბრაუზერს რომ, ფაილი წარმოადგენს გამოსახულებას. ასებობს გამისახულების ფაილების სამი ტიპი, რომლის ჩასმაც შეგიძლიათ ვებ გვერდზე:
"Horse.jpg" - ეს სურათის ფაილის სახელია, ".jpg" - ფაილის გაფართოებაა, გამოსახულების ტიპი. როგორც გაფართოება ".html" მიუთითებს, რომ ფაილი წარმოადგენს HTML- დოკუმენტს, ისევე როგორც ".jpg" აუწყებს ბრაუზერს რომ, ფაილი წარმოადგენს გამოსახულებას. ასებობს გამისახულების ფაილების სამი ტიპი, რომლის ჩასმაც შეგიძლიათ ვებ გვერდზე:
- GIF (Graphics Interchange Format)
- JPG / JPEG (Joint Photographic Experts Group)
- PNG (Portable Network Graphics)
რამდენიმე სიტყვა ამ ტიპის ფაილების შესახებ:
GIF -გამოსახულება საუკეთესოა გრაფიკისათვის და ნახატებისათვის, JPEG -ი კი ფოტოსურათებისათვის. ამისათვის არსებობს ორი მიზეზი: პირველი - GIF- გამოსახულება შეიცავს მხოლოდ 256 ფერამდე, JPEG - კი მილიონ ფერამდე, და მეორე - ფორმატი GIF უკეთესად კვეცავს უბრალო გამოსახულებებს, ვიდრე JPEG, რომლებიც ოპტიმიზირებულნი არიანუფრო რთული გამოსახულებების ქვეშ. რაც მეტად იკვეცება, მით ნაკლებია გამოსახულების ფაილი, მით სწრაფად იტვირთება თქვენი გვერდი. ალბათ თქვენი გამოცდილებიდან იცით რომ, მომხმარებელს არ უყვარს ისეთ გვერდებზე შესვლა რომელიც ძალიან გვიან იტვირთება და სასწრაფოდ გადადიან სხვა გვერდებზე, რათა არ დახარჯონ ლოდინში ზედმეტი დრო, რადგან ინტერნეტში სხვა მილიონობით საინტერესო საიტია.
ტრადიციული ფორმატები GIF JPEG და არიან უპირატესი ტიპები, თუმცა ბოლო ხანებში ძალზედ პოპულაული ხდება PNG ფორმატი (უპირველეს ყოვლისა ფორმატი GIF ის დიდი ზომის გამო). ფორმატი PNG ბევრი პარამეტრებით არის უკეთესი JPEG და GIF ფორმატებზე: მილიონობით ფერი და ეფექტური კუმშვა.
იმისათვის რომ გამოსახულება დავდოთ საიტზე, ამისათვის ისინი წინასწარ უნდა დავამუშავოთ - დავაპატარავოთ და გავხადოთ იმ ზომის რომელიც ჰარმონიულად და ლამაზად გამოჩნდება თქვენს გვერდზე.
ჩვეულებრივ, სურათის ზომის დადგენა ხდება ინტუიტიურად, თვალის ზომით, ან გამოიყენება უფრო რთული საიტის შესაქმნელი პროგრამები - Adobe Dreamweaver, მაგალითად - გამოითვლება სპეციალური სახაზავით, რომელიც განთავსებულია პროგრამის ფანჯარაში. გირჩევთ ჩაატაროთ ექსპერიმენტი სურათებზე, აირჩიეთ შემთხვევითი ზომები და ჩასვით საიტში - მალე მიხვდებით, თუ რომელი ოპტიმალური ზომის გამოსახულება გჭირდებათ, იმისათვის რომ იგი ჰარმონიულად და ლამაზად გამოიყურებოდეს თქვენს გვერდზე.
იმისათვის რომ ნათელი იყოს თქვენთვის თუ რომელი ზომის გამოსახულება როგორ გამოიყურება, გთავაზობთ გამოსახულებების ოთხ მაგალითს პიქსელებში:
ტრადიციული ფორმატები GIF JPEG და არიან უპირატესი ტიპები, თუმცა ბოლო ხანებში ძალზედ პოპულაული ხდება PNG ფორმატი (უპირველეს ყოვლისა ფორმატი GIF ის დიდი ზომის გამო). ფორმატი PNG ბევრი პარამეტრებით არის უკეთესი JPEG და GIF ფორმატებზე: მილიონობით ფერი და ეფექტური კუმშვა.
იმისათვის რომ გამოსახულება დავდოთ საიტზე, ამისათვის ისინი წინასწარ უნდა დავამუშავოთ - დავაპატარავოთ და გავხადოთ იმ ზომის რომელიც ჰარმონიულად და ლამაზად გამოჩნდება თქვენს გვერდზე.
ჩვეულებრივ, სურათის ზომის დადგენა ხდება ინტუიტიურად, თვალის ზომით, ან გამოიყენება უფრო რთული საიტის შესაქმნელი პროგრამები - Adobe Dreamweaver, მაგალითად - გამოითვლება სპეციალური სახაზავით, რომელიც განთავსებულია პროგრამის ფანჯარაში. გირჩევთ ჩაატაროთ ექსპერიმენტი სურათებზე, აირჩიეთ შემთხვევითი ზომები და ჩასვით საიტში - მალე მიხვდებით, თუ რომელი ოპტიმალური ზომის გამოსახულება გჭირდებათ, იმისათვის რომ იგი ჰარმონიულად და ლამაზად გამოიყურებოდეს თქვენს გვერდზე.
იმისათვის რომ ნათელი იყოს თქვენთვის თუ რომელი ზომის გამოსახულება როგორ გამოიყურება, გთავაზობთ გამოსახულებების ოთხ მაგალითს პიქსელებში:
მაგალითი №1. ზომა 42h42 პიქსელი
მაგალითი number 2. ზომა 200x200 პიქსელი
მაგალითი number 3. ზომა 500h100 პიქსელი
მაგალითი number 4. ზომა 500x500 პიქსელი
საუკეთესო პროგრამა სურათების დასამუშავებლად, რომელსაც იყენებენ როგორც პროფესიონალები, ასევე დამწყებები გახლავთ - Adobe Photoshop -ი. ის ძვირადღირებულია (თუ გადაწყვეტთ მის ყიდვას) და რთულია ასათვისებლად. ამიტომ, იქონიეთ იგი მხედველობაში სამომავლოდ. დასაწყისისთვის კი მიმართეთ შედარებით ადვილ, დამწყებებისტვის უფრო გასაგებ და უფასო პროგრამებს. მაგალითად პროგრამა Picasa, რომლის გადმოქაჩვა შეგიძლიათ "აქ" .
სად მოვიძიოთ სურათები, თუ თქვენ არ ხართ ფოტოგრაფი დიდი სტაჟით და არ გაქვთ საკუთარი სურათების დიდი კოლექცია? ამ მიზნებისათვის არსებობს კლიპარტ კოლექციები, მათ შორის - უფასოც. თუ აკრეფთ საძიებო ველში მოთხოვნას «კლიპარტი უფასოდ გადმოქაჩვა» იპოვით უამრავ საიტს, რომელიც ამ შესანიშნავ სერვისს გთავაზობთ. გადმოქაჩეთ რამდენიმე ასეთი კოლექცია, შეარჩიეთ სურათები თქვენი გემოვნებით და იქნებით სურათებითა და გამოსახულებებით უზრუნველყოფილი, რამდენიმე წლით! იგივე ეხება სხვადასხვა იარლიყებსა და ემბლემებს, რომლებიც თქვენს საიტს გაალამაზებენ.
დამატებითი ინფორმაცია გაკვეთილთან დაკავშირებით.
კიდევ ორი რამ უნდა იცოდეთ.
პირველი, შეგიძლიათ ადვილად განათავსოთ ის სურათებიც, რომლებიც განთავსებულნი არიან სხვა საქაღალდეებსა თუ სხვა Web საიტებზეც კი:
პირველი, შეგიძლიათ ადვილად განათავსოთ ის სურათებიც, რომლებიც განთავსებულნი არიან სხვა საქაღალდეებსა თუ სხვა Web საიტებზეც კი:
<Img src = "images / companies / ford / logo.png">
ეს მაგალითი ამბობს, რომ მოთხოვნილი სურათი დევს იმ საქაღალდეში რომლებიც იმყოფებიან თავის მხრივ სხვა საქაღალდეებში. მაგრამ ეს არ წარმოადგენს პრობლემას ინტერნეტ-ბრაყზერისთვის - ის მას ადვილად იპოვის.
<Img src = "http://www.ford.com/logo.png">
ეს მაგალითი კი გვეუბნება, რომ გამოსახულება სხვა საიტზე დევს. მაგრამ არც ეს არის პრობლემა: ინტერნეტ-ბრაუზერი მას იქაც იპოვის (თუკი ის იქ ნამდვილად დევს!) და ჩასვავს თქვენს გვერდზე და ამას ის წამებში გააკეთებს, ისე რომ ვერც შეამჩნევთ.
მეორე, გამოსახულებას შეიძლება გააჩნდეს გადასასვლელი ლინკი:
<a href="http://html-kodi.blogspot.com/"> <img src = "logo.jpg"> </a>
ეს ბრაუზერში ასე გამოიყურება, დააწკაპეთ სურათზე და გადახვალთ პროექტის მთავარ გვერდზე:
