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