Суреттер мен нысандар үшін HTML IMG тегтерін пайдалану
HTML IMG тегі веб-беттегі суреттер мен басқа статикалық графикалық объектілерді кірістіруді басқарады. Бұл ортақ тег сізді қызықтыратын, сурет салатын веб-торапты жасауға мүмкіндік беретін бірнеше міндетті және міндетті емес атрибуттарды қолдайды.
Толық құрылған HTML IMG тегінің мысалы келесідей:
Талап етілетін IMG Tag атрибуттары
SRC. Веб-бетте көрсетілетін кескінді алудың жалғыз төлсипаты - бұл SRC атрибуты. Бұл атрибут көрсетілетін кескін файлының атауы мен орнын анықтайды.
ALT. Жарамды XHTML және HTML4 жазу үшін ALT төлсипаты қажет. Бұл атрибуция кескінді сипаттайтын мәтінмен кәдімгі емес браузерлерді қамтамасыз ету үшін пайдаланылады. Браузерлер альтернативті мәтінді түрлі жолдармен көрсетеді. Кейбіреулер оны тышқаныңызды кескін үстіне қойғанда қалқымалы терезе ретінде көрсетсе, басқалары суретті тінтуірдің оң жағымен басқанда, оны сипаттарға көрсетеді және кейбіреулері оны мүлдем көрсетпейді.
Веб-беттегі мәтінге сәйкес келмейтін маңызды суреттер туралы қосымша мәліметтер беру үшін alt мәтінін пайдаланыңыз. Бірақ экрандағы оқырмандар мен тек басқа мәтіндік шолғыштарда мәтін мәтіннің қалған бөлігімен парақта оқылады. Шатастырмауды болдырмау үшін, жай ғана «логотип» орнына «Веб дизайн және HTML туралы» (мысалы, мысалы), сипаттама мәтінін пайдаланыңыз.
HTML5-де ALT төлсипаты әрқашан қажет емес, себебі оған қосымша сипаттаманы қосу үшін тақырыпты қолдануға болады. Толық сипаттаманы қамтитын идентификаторды көрсету үшін ARIA-DESCRIBEDBY төлсипатын пайдалануға болады.
Егер сурет таза сәндік болса, мысалы, веб-беттің жоғарғы жағындағы графика немесе белгішелер сияқты Alt мәтін қажет етілмейді. Бірақ егер сенімді болмасаңыз, тек қана алтылық мәтінді қосыңыз.
Ұсынылған IMG атрибуттары
WIDTH және HEIGHT . WIDTH және HEIGHT атрибуттарын пайдалану әдеті әрқашан болуы керек. Сіз әрқашан нақты өлшемді пайдаланып, браузерде суреттерді өлшемін өзгертпеуіңіз керек.
Бұл атрибуттар беттің көрсетілуін жылдамдатады, себебі браузер кескіннің дизайнын кеңістікте бөліп, бүкіл кескінді жүктеуді күтудің орнына мазмұнның қалған бөлігін жүктеуді жалғастырады.
Басқа пайдалы IMG атрибуттары
TITLE . Атрибут - кез келген HTML элементіне қолданылатын жаһандық атрибут. Сонымен қатар, TITLE атрибуты кескін туралы қосымша ақпаратты қосуға мүмкіндік береді.
Көптеген браузерлер TITLE төлсипатын қолдайды, бірақ олар оны әр түрлі жолдармен жасайды. Кейбіреулер мәтінді қалқымалы терезе ретінде көрсетсе, басқалары оны суретке түсіргенде, оны ақпараттық экрандарда көрсетеді. Кескін туралы қосымша ақпарат жазу үшін TITLE атрибутын қолдануға болады, бірақ бұл ақпарат жасырын немесе көрінетін болып есептелмейді. Сіз бұл сөздерді іздестіру жүйелері үшін кілт сөздерді жасыру үшін қолдануға міндетті емессіз. Бұл тәжірибе енді көптеген іздеу жүйелерінде жазаланған.
USEMAP және ISMAP . Бұл екі төлсипаттар клиенттік () және серверлік (ISMAP) кескінді суреттерге орнатады.
LONGDESC . Атрибут суреттің ұзын сипаттамасына URL мекенжайларын қолдайды. Бұл мүмкіндік сіздің суреттеріңізді қол жетімді етеді.
Ескірген және ескірген IMG атрибуттары
Бірнеше атрибуттар енді HTML5-де ескірген немесе HTML4-те ескірген. Ең жақсы HTML үшін осы атрибуттарды пайдаланудың орнына басқа шешімдерді табу керек.
ШЕКАРА . Атрибут кескіннің кез-келген шекарасындағы пикселдердің енін анықтайды. HTML4-ге CSS-дің пайдасына ескірген және HTML5-те ескірген.
ALIGN . Бұл атрибут мәтін ішіндегі кескінді орналастыруға және оның айналасындағы мәтінді апаруға мүмкіндік береді. Суретті оңға немесе солға туралауға болады. HTML4 ішіндегі float CSS сипатының пайдасына ескірген және HTML5-те ескірген.
HSPACE және VSPACE . HSPACE және VSPACE атрибуттары көлденең (HSPACE) және тігінен (VSPACE) ақ кеңістік қосады. Ақ кеңістік графиктің екі жағына (үстіңгі және астыңғы немесе сол және оң жаққа) қосылады, сондықтан бір жағында бос орын қажет болса, CSS-ды пайдалану керек. Бұл атрибуттар CSS-нің CSS-нің сипатының пайдасына HTML4-де ескірген және олар HTML5-де ескірген.
LOWSRC . LOWSRC атрибуты сурет көзі өте баяу жүктелетін кезде соншалықты үлкен болса, балама сурет береді. Мысалы, сіздің веб-бетте көрсетілетін 500KB кескініңіз болуы мүмкін, бірақ 500KB жүктеуді ұзақ уақытқа алады. Осылайша, кескіннің кішірек көшірмесін жасай аласыз, бәлкім, қара-ақ немесе өте оңтайландырылған және LOWSRC төлсипатына қойыңыз. Кішірек сурет алдымен жүктеліп, көрсетіледі, содан кейін үлкенірек сурет пайда болғанда төменгі көзді ауыстырады.
LOWSRC төлсипаты Netscape Navigator 2.0 бағдарламасына IMG тегіне қосылды. Бұл DOM 1-ші деңгейдің бөлігі болды, бірақ содан кейін DOM 2-деңгейден жойылды. Көптеген сайттар қазіргі заманғы барлық браузерлердің қолдауына ие екендігіне қарамастан, браузерді қолдау бұл атрибутқа арналған. Бұл HTML5-де ескірілмеген немесе HTML5-де ескірген емес, себебі ол ешқашан техникалық сипаттаманың ресми бөлігі болмады.
Бұл атрибутты пайдаланудан аулақ болыңыз және орнына жылдам жүктелетін суреттерді оңтайландырыңыз. Беттің жүктелу жылдамдығы жақсы веб-дизайнның маңызды бөлігі болып табылады және үлкен кескіндер LOWSRC төлсипатын пайдалансаңыз да, беттері өте баяу төмендейді.