Коришћење ХТМЛ ИМГ ознаке за слике и објекте
ХТМЛ ИМГ ознака уређује уметање слика и других статичких графичких објеката унутар веб странице. Ова заједничка ознака подржава неколико обавезних и опционалних атрибута који додају богатство вашој способности да дизајнирају занимљиву веб страницу усмерену на слику.
Пример потпуно обликоване ХТМЛ ИМГ таг-а изгледа овако:
<имг срц = "урл">Обавезни атрибути тага ИМГ
СРЦ. Једини атрибут који требате добити слику за приказ на веб страници је атрибут СРЦ-а. Овај атрибут идентификује име и локацију датотеке слике која ће бити приказана.
АЛТ. За писање важећих КСХТМЛ и ХТМЛ4, такође је потребан АЛТ атрибут. Овај атрибут се користи да обезбеди невисуалне прегледаче са текстом који описује слику. Претраживачи приказују алтернативни текст на различите начине. Неки га приказују као искачуће када ставите миша преко слике, други приказују у својствима када кликнете десним тастером миша на слику, а неки га уопште не приказују.
Користите алт текст да бисте добили додатне детаље о слици која није релевантна или важна за текст Веб странице. Али запамтите то у читачима екрана и осталим претраживачима само за текст, текст ће се читати у линији са остатком текста на страници. Да бисте избегли конфузију, користите дескриптивни алт текст који каже (на примјер), "О веб дизајну и ХТМЛ-у" умјесто само "логотипа".
У ХТМЛ5, атрибут АЛТ није увек потребан, јер можете користити наслов да бисте му додали још описа. Можете користити и атрибут АРИА-ДЕСЦРИБЕДБИ за означавање ИД-а који садржи потпуни опис.
Алт текст такође није потребан ако је слика чисто декоративна, као што је графика на врху веб странице или икона. Али ако нисте сигурни, укључите алт текст за сваки случај.
Препоручена ИМГ атрибута
ШИРИНА И ВИСИНА . Требало би ући у навику да увек користите ВИДТХ и ХЕИГХТ атрибуте. И увек користите праву величину и не мењајте своје слике са претраживачем.
Ови атрибути убрзавају приказивање странице, јер претраживач може додијелити простор у дизајну за слику, а затим наставити са преузимањем остатка садржаја, умјесто чекајући читаву слику да преузме.
Други корисни ИМГ атрибути
ТИТЛЕ . Атрибут је глобални атрибут који се може применити на било који ХТМЛ елемент . Осим тога, атрибут ТИТЛЕ вам омогућава да додате додатне информације о слици.
Већина претраживача подржава атрибут ТИТЛЕ, али то раде на различите начине. Неки приказују текст као искачуће, док други приказују на информацијским екранима када корисник кликне десним кликом на слику. Можете користити атрибут ТИТЛЕ да бисте написали додатне информације о слици, али не рачунајте на то да су ове информације сакривене или видљиве. Не би требало да дефинитивно користите ово да бисте сакрили кључне речи за претраживаче. Већина претраживача сада кажњава ову праксу.
УСЕМАП и ИСМАП . Ови два атрибута постављају слике на страни клијента () и сервер-сиде (ИСМАП) на своје слике.
ЛОНГДЕСЦ . Атрибут подржава УРЛ-ове за даљи опис слике. Ова функција чини Ваше слике приступачнијим.
Застарели и застарјели ИМГ атрибути
Неколико атрибута је застарело у ХТМЛ5 или застарело у ХТМЛ4. За најбољи ХТМЛ, требали би пронаћи друга рјешења умјесто кориштења ових атрибута.
БОРДЕР . Атрибут дефинише ширину у пикселима било које границе око слике. У ХТМЛ-у је застарио у корист ЦСС-а и застарио је ХТМЛ5.
АЛИГН . Овај атрибут вам омогућава да поставите слику унутар текста и да текст прође око њега. Можете поравнати слику са десне или леве стране. Он је застарио у корист флоат ЦСС својине у ХТМЛ4 и застарио је ХТМЛ5.
ХСПАЦЕ и ВСПАЦЕ . ХСПАЦЕ и ВСПАЦЕ атрибута додају бели простор хоризонтално (ХСПАЦЕ) и вертикално (ВСПАЦЕ). Бели простор ће бити додан на обе стране графике (горњи и доњи или леви и десни), тако да ако вам је само потребан простор са једне стране, требало би да користите ЦСС. Ови атрибути су застарјели у ХТМЛ4 у корист маргине ЦСС својства, а они су застарјели у ХТМЛ5.
ЛОВСРЦ . Атрибут ЛОВСРЦ пружа алтернативну слику када је ваш извор слике толико велик да га преузима изузетно споро. На пример, можда ћете имати слику која је 500КБ коју желите да прикажете на вашој веб страници, али 500КБ ће трајати дуго времена за преузимање. Стога креирате много мању копију слике, можда у црно-белој или екстремно оптимизованој, и ставите је у атрибут ЛОВСРЦ. Мање слике ће се прво преузети и приказати, а затим када се појави већа слика она ће замијенити мали извор.
Атрибут ЛОВСРЦ је додан Нетсцапе Навигатор 2.0 у ИМГ ознаку. Била је део нивоа 1 ДОМ-а, али је затим уклоњена са нивоа ДОМ 2. Подршка претраживача је била скицирана за овај атрибут, мада многе странице тврде да га подржавају сви савремени претраживачи. Није застарјела у ХТМЛ4 или је застарјела у ХТМЛ5 зато што никада није био званични део било које спецификације.
Избегавајте да користите овај атрибут и уместо тога оптимизујете своје слике тако да брзо учитавају. Брзина учитавања странице је критичан део доброг Веб дизајна, а велике слике спорих страница сувишно падају - чак и ако користите атрибут ЛОВСРЦ.