შეხედეთ ნებისმიერ ვებ გვერდზე დღეს ონლაინ და შეამჩნევთ, რომ ისინი იზიარებენ გარკვეულ რამ საერთო. ერთ-ერთი საერთო მახასიათებელია გამოსახულებები. სურათების პრეზენტაციის უფლება სურათების დამატება. ზოგიერთი ისეთი გამოსახულება, როგორიც კომპანიის ლოგოს მსგავსად, ხელს უწყობს ბრენდის საიტზე და დააკავშირებს ციფრულ ერთეულს თქვენს ფიზიკურ კომპანიასთან.
სურათის, ხატის ან გრაფიკის დამატება თქვენს ვებ გვერდზე, თქვენ უნდა გამოიყენოთ ტეგი გვერდის HTML კოდი. თქვენს HTML- ში IMG- ის ჩანართის განთავსება ზუსტად სადაც გსურთ გრაფიკული ჩვენება. ვებ-ბრაუზერი, რომელიც გადის გვერდის კოდს, შეცვლის ამ ტეგით შესაბამისი გრაფიკით, მას შემდეგ, რაც იხილავთ გვერდს. უკან დაბრუნდით ჩვენი კომპანიის ლოგოს მაგალითზე, აქ არის თუ როგორ შეგიძლიათ დაამატოთ ეს სურათი თქვენს საიტზე:
სურათის ატრიბუტები
ვეძებთ HTML კოდი ზემოთ, ნახავთ, რომ ელემენტს ორი ატრიბუტი აქვს. თითოეული მათგანი საჭიროა გამოსახულებისათვის.
პირველი ატრიბუტია "src". ეს არის საკმაოდ ფაქტიურად სურათის ფაილი, რომელიც გსურთ გამოჩნდება გვერდზე. ჩვენს მაგალითში ჩვენ ვიყენებთ ფაილის სახელწოდებით "logo.png". ეს არის გრაფიკული, რომ ვებ ბრაუზერი რომ გამოჩნდეს, როდესაც იგი გაწეული საიტი.
თქვენ ასევე შეამჩნევთ, რომ ამ ფაილის სახელის წინ დამატებითი ინფორმაცია მივაწოდეთ "/ images /". ეს არის ფაილის ბილიკი. თავდაპირველი ნაბიჯი slash ეუბნება სერვერს შესასწავლად ფესვი დირექტორია. ეს მაშინ გამოიყურება საქაღალდეში მოუწოდა "სურათები" და საბოლოოდ ფაილი მოუწოდა "logo.png". გამოყენებით ფოლდერი მოუწოდა "სურათები" შესანახად ყველა საიტის გრაფიკა არის საკმაოდ გავრცელებული პრაქტიკა, მაგრამ თქვენი ფაილის გზა შეიცვლება რაც არ არის შესაბამისი თქვენი საიტი.
მეორე საჭირო ატრიბუტია "alt" ტექსტი. ეს არის "ალტერნატიული ტექსტი", რომელიც ნაჩვენებია, თუ გამოსახულება ვერ იტვირთება რაიმე მიზეზით. ეს ტექსტი, რომელიც ჩვენს მაგალითში ნათქვამია, "კომპანიის ლოგო" იქნება ნაჩვენები, თუ გამოსახულება ვერ იტვირთება. რატომ მოხდება ეს? სხვადასხვა მიზეზების გამო:
- არასწორი ფაილის ბილიკი
- არასწორი ფაილის სახელი ან შეცდომა
- გადამცემი შეცდომა
- სერვერიდან ფაილი წაიშალა
ეს არის მხოლოდ რამდენიმე შესაძლებლობა იმისა, თუ რატომ არის მითითებული ჩვენი გამოსახულება. ამ შემთხვევებში, ჩვენი ალტერნატივა გამოჩნდება ნაცვლად.
Alt ტექსტი ასევე გამოიყენება ეკრანის მკითხველს პროგრამული უზრუნველყოფისთვის, რათა ნახოს სურათი, რომელიც ხედვის გაუარესდა. იმიტომ, რომ მათ ვერ ვხედავ სურათს, როგორც ამას ვაკეთებთ, ეს ტექსტი საშუალებას აძლევს მათ იცოდნენ რა გამოსახულებაა. ამიტომ ალტერნატივა საჭიროა და რატომ უნდა მკაფიოდ აღინიშნოს ის, რაც გამოსახულია!
საერთო ტექსტის საერთო გაუგებრობა ისაა, რომ ის საძიებო სისტემებისთვის მიზნად ისახავს. ეს არ არის სიმართლე. მიუხედავად იმისა, რომ Google- მა და სხვა საძიებო სისტემებმა წაიკითხეთ ეს ტექსტი, რათა დადგინდეს, თუ რა გამოსახულებაა (გახსოვდეს, ისინი ვერ ნახულობენ თქვენს სურათს), თქვენ არ უნდა დაწერონ ალტერნატივა მხოლოდ საძიებო სისტემებში გასაჩივრებლად. ავტორი აშკარა ალტერნატივა, რომელიც ადამიანისთვის არის განკუთვნილი. თუ თქვენ შეგიძლიათ დაამატოთ ზოგიერთი სიტყვა შევიდა tag რომ მიმართოს საძიებო სისტემებში, რომ არის ჯარიმა, მაგრამ ყოველთვის დარწმუნდით, რომ ალტერნატივა ემსახურება მის ძირითად მიზანს, იმის მიხედვით, თუ რა იმიჯი არის ის, ვისაც ვერ ხედავს გრაფიკული ფაილი.
სხვა ატრიბუტები
IMG ტეგი ასევე გააჩნია ორი სხვა ატრიბუტი, რომლითაც შეგიძლიათ იხილოთ გამოყენება, როდესაც თქვენს ვებ გვერდზე - გრაფიკი და სიგანე. მაგალითად, თუ თქვენ იყენებთ WYSIWYG რედაქტორს, როგორიცაა Dreamweaver, ის ავტომატურად ამატებს ამ ინფორმაციას თქვენთვის. აი მაგალითი:
WIDTH და HEIGHT ატრიბუტები ბრაუზერით გამოსახულებას ასახავს. ბრაუზერი მაშინ იცის ზუსტად რამდენი სივრცე განლაგება განლაგებას და მას შეუძლია გადაადგილება, რათა მომდევნო ელემენტის გვერდზე ხოლო სურათი ჩამოტვირთვების. პრობლემა ამ ინფორმაციის გამოყენებით თქვენს HTML- ში არის ის, რომ ყოველთვის არ გსურთ სასურველი ზომის გამოსახულების ჩვენება. მაგალითად, თუ თქვენ გაქვთ საპასუხო ვებსაიტი, რომლისგანაც მნახველ ცვლილებებზე დაყრდნობით გამოჩნდება სია ეკრანზე და მოწყობილობის ზომა, თქვენ ასევე გსურთ თქვენი სურათები მოქნილი. თუ თქვენს HTML- ში ვთქვათ, თუ რა ფიქსირებული ზომაა, თქვენ ნახავთ, რომ ძალიან ძნელია გადალახოს პასუხი CSS- ის პასუხებით . ამ მიზეზით და სტილი (CSS) და სტრუქტურა (HTML) გამოყოფა, რეკომენდირებულია, რომ არ დაამატოთ სიგანე და სიმაღლე ატრიბუტები HTML კოდით.
ერთი შენიშვნა: თუ დატოვებთ ამ ზომის ინსტრუქციებს და არ დააკონკრეტებთ ზომას CSS- ში, ბრაუზერი აჩვენებს სურათს მის ნაგულისხმევზე, მშობლიურ ზომას მაინც.
რედაქტირებულია Jeremy Girard