Бүгінгі күні кез-келген веб-бетке қарап, олардың белгілі бір нәрселерді ортақ пайдаланатындығын байқайсыз. Осы ортақ ерекшеліктердің бірі - бейнелер. Оңтайлы суреттер веб-сайттың презентациясына көп қосылады. Компанияның логотипі сияқты суреттердің кейбіреулері сайтты брендке айналдырып, сол сандық тұлғаны сіздің жеке компанияңызға қосады.
Веб-бетке кескінді, белгішені немесе графиканы қосу үшін, тегті беттің HTML кодынан пайдалану керек. Сіз IMG-тегіңізді графиктің қай жерде көрсетілетінін нақты HTML- ге орналастырасыз. Бет кодын көрсететін веб-браузер осы тегті бет көргеннен кейін сәйкес графикамен ауыстырады. Біздің компания логотипінің үлгісіне оралсақ, мына суретті сіздің сайтыңызға қалай қосуға болады:
Сурет атрибуттары
Жоғарыдағы HTML-кодқа қарап, элементтің екі атрибуты бар екенін көресіз. Олардың әрқайсысы сурет үшін қажет.
Бірінші төлсипат - «src». Бұл бетте көрсетілетін суреттің файлы жеткілікті. Біздің мысалда біз «logo.png» деген файлды қолданамыз. Бұл веб-браузер сайтты көрсеткенде көрсетілетін графика.
Сондай-ақ, бұл файл атауы алдында «/ images /» қосымша ақпарат қосылды. Бұл файлдың жолы. Алғашқы алға кесу серверге каталогтың түбірін қарауды ұсынады. Содан кейін ол «суреттер» деп аталатын қалтаны және соңында «logo.png» деп аталатын файлды іздейді. Сайттың барлық графиктерін сақтау үшін «суреттер» деп аталатын қалтаны қолдану өте қарапайым әдіс болып табылады, бірақ сіздің файлыңыздың жолы сіздің сайтыңызға қатысты барлық нәрселерге өзгереді.
Екінші талап етілетін төлсипат - «alt» мәтіні. Бұл қандай да бір себептермен сурет жүктелмегенде көрсетілетін «баламалы мәтін». Біздің мысалда «Компанияның логотипі» деп жазылған бұл мәтін сурет жүктелмеген жағдайда көрсетіледі. Неге бұлай болды? Түрлі себептер:
- Файлдың дұрыс емес жолы
- Қате файл атауы немесе қате жазу
- Трансмиссиясы қатесі
- Файл серверден жойылды
Бұл біздің көрсетілген кескіннің болмауына байланысты бірнеше мүмкіндіктер. Мұндай жағдайларда біздің подставка мәтіні көрсетіледі.
Alt мәтіні экраннан оқу бағдарламалары арқылы көріністі бұзылған келушінің суретін «оқуға» арналған. Біз сияқты бейнені көре алмағандықтан, бұл мәтін оларға кескіннің өзі не екенін білуге мүмкіндік береді. Міне, сондықтан алғы мәтін талап етіледі және неге бұл кескіннің нені білдіретінін нақты анықтау керек!
Алдыңғы мәтінді жалпы түсінбеушілік - бұл іздеу механизмінің мақсаттарына арналған. Бұл дұрыс емес. Google және басқа іздеу машиналары бұл кескінді қалай анықтау керектігін анықтау үшін (есте сақтаңыз, сіздің суретіңізді «көре алмайсыз»), алайда тек қана іздестіру жүйелеріне шағымдану үшін төменгі мәтінді жазуға болмайды. Адамдарға арналған айқын анықтамалық мәтін. Егер сіз сондай-ақ іздеу жүйесіне әсер ететін тегке кейбір кілт сөздерді қоссаңыз болады, бірақ ол әрқашан графикалық файлды көре алмайтын кез келген адамға арналған кескінді көрсете отырып, алғы мәтіннің негізгі мақсатына қызмет ететініне көз жеткізіңіз.
Басқа атрибуттар
IMG тегінде веб-беттегі графиканы ендіру кезінде ені мен биіктігін қолданғанда көруге болатын басқа екі атрибуты бар. Мысалы, Dreamweaver сияқты WYSIWYG редакторын пайдалансаңыз, ол сізге бұл ақпаратты автоматты түрде қосады. Міне мысал:
WIDTH және HEIGHT атрибуттары браузерге суреттің өлшемін айқындайды. Браузер кейін орналасудағы бөлудің қаншалықты кең екенін біледі және сурет жүктеліп тұрғанда келесі элементке өтуге болады. HTML-да осы ақпаратты пайдалану мәселесі әрқашан сіздің кескінің нақты мөлшерде көрсетілуін қаламауы мүмкін. Мысалы, сіз келушілердің экраны мен құрылғының өлшеміне негізделген өзгерістері бар жауапты веб-сайтымыз болса , сіз сондай-ақ суреттеріңіздің икемді болуын қалайтыз. Егер сіздің HTML-де тіркелген өлшемді анықтасаңыз, жауапты CSS-медиа сұрауларымен бас тарту өте қиын болады. Осы себепті және стилі (CSS) және құрылымды (HTML) бөлуді қолдау үшін HTML кодының ені мен биіктік атрибуттарын ЕМЕС деп ұсынбаңыз.
Бір ескерту: Егер сіз осы өлшемдер нұсқауларын қалдырсаңыз және CSS өлшемін көрсетпесеңіз, браузер кескінді өзінің әдепкі, түпнұсқа өлшемінде көрсетеді.
Jeremy Girard өңдейді