Погледајте било коју веб страницу данас онлине и приметићете да деле неке заједничке ствари. Једна од тих заједничких особина су слике. Права слика толико доприноси презентацији веб странице. Неке од тих слика, као логотип компаније, помажу брендирању сајта и повезивањем тог дигиталног субјекта са вашом физичком компанијом.
Да бисте на своју веб страницу додали слику, икону или графику, морате да користите ознаку у ХТМЛ-коду странице. ИМГ ознаку поставите у ХТМЛ својој тачки где желите да се графика приказује. Веб претраживач који приказује страницу странице замениће ову ознаку одговарајућом графиком када се страница прегледа. Вратите се на пример нашег логотипа компаније, ево како можете додати ту слику на своју веб локацију:
Атрибути атрибута
Гледајући горе наведени ХТМЛ код, видећете да елемент садржи два атрибута. Сваки од њих је потребан за слику.
Први атрибут је "срц". Ово је сасвим буквално слика слика коју желите да се прикаже на страници. У нашем примеру користимо датотеку под називом "лого.пнг". Ово је графика коју би веб прегледач приказао када је приказао страницу.
Такође ћете приметити да смо пре овог имена датотеке додали неке додатне информације, "/ имагес /". Ово је путања датотеке. Почетна коса слајдова говори серверу да погледа корен директоријума. Потом ће потражити фасциклу под називом "слике" и на крају фајл под називом "лого.пнг". Употреба фасцикле под именом "слике" за чување графике сајта је прилично уобичајена пракса, али путање датотеке би се промијенило на све што је релевантно за вашу веб локацију.
Други захтевани атрибут је "алт" текст. Ово је "алтернативни текст" који се приказује ако слика не учита из неког разлога. Овај текст, који у нашем примеру чита "Логотип компаније" биће приказан ако слика не учита. Зашто би се то десило? Разни разлози:
- Неправилан пут датотеке
- Погрешно име датотеке или погрешно писање
- Грешка при преносу
- Датотека је избрисана са сервера
Ово су само неколико могућности зашто наша наведена слика можда недостаје. У овим случајевима би нам се приказао алт алт текст.
Алт текст такође користи софтвер читача екрана да "прочита" слику посетиоцу који је оштећен вид. Пошто они не могу видети слику као ми, овај текст дозвољава им да знају која је слика сама. Због тога је потребан алт текст и зашто би требало јасно да каже шта је слика!
Често погрешно разумевање алт текстова је да је намењен за потребе претраживача. Ово није истина. Док Гоогле и остали претраживачи читају овај текст како би утврдили каква је слика (запамтите, не могу "видјети" вашу слику), не бисте требали писати алт текст да бисте се жалили само претраживачима. Аутор је јасан алт текст који је намењен људима. Ако можете додати и неке кључне речи у ознаку која апелује на претраживаче, то је у реду, али увек се уверите да алт текст служи својој примарној сврху тако што ћете навести шта је слика за све који не могу да виде графичку датотеку.
Остали атрибути
Ознака ИМГ такође садржи још два атрибута који можете видети када користите графику на својој веб страници - ширину и висину. На пример, ако користите ВИСИВИГ уређивач као Дреамвеавер, он аутоматски додаје ове информације за вас. Ево примера:
Атрибут ВИДТХ и ХЕИГХТ говори прегледачу величине слике. Претраживач тада зна тачно колико простора у распореду треба додијелити, а може се пребацити на сљедећи елемент на страници док се слика преузима. Проблем са коришћењем ове информације у ХТМЛ-у јесте да можда не желите да се ваша слика приказује на тачној величини. На пример, ако имате одзивну веб локацију чија промјена величине заснована на екрану посјетитеља и величини уређаја, такођер ћете желети да слике буду флексибилне. Ако наведете у свом ХТМЛ-у шта је фиксна величина, врло је тешко надјачати са одговарајућим ЦСС медијским упитима . Из тог разлога, и да бисте одржали одвајање стила (ЦСС) и структуре (ХТМЛ), препоручујемо вам да НЕ додате атрибуте ширине и висине вашег ХТМЛ кода.
Једна напомена: Ако оставите ове инструкције за величину и не одређују величину у ЦСС-у, претраживач ће у сваком случају приказати слику подразумевано, уобичајену величину.
Уредио Јереми Гирард