Отворите ХТМЛ датотеку за веб страницу којој желите да додате слику у уређивачу текста као што је Нотепад или софтвер за веб развој.
Додајте ознаку у датотеку. Поставите ознаку иза елемента испод којег желите да се појави слика када се ХТМЛ датотека отвори у прегледачу. Ознака нема посебну завршну ознаку. У оквиру ознаке морате навести извор слике коју желите да прикажете тако што ћете укуцати локацију слике на интернету помоћу срц атрибут. Ако је слика ускладиштена у истој фасцикли као и ХТМЛ датотека, унесите назив и екстензију слике. Ако је слика сачувана негде другде, унесите пуну УРЛ адресу слике.
Додајте алт приписати вашој ознаци. У ХТМЛ5, атрибут алт је обавезан. Користите овај атрибут да опишете слику у случају да се не може учитати. Ако слика не може да се учита, претраживач приказује текст који унесете после атрибута алт. Поред тога, атрибут алт је важан за софтвер за читање екрана који користе особе са инвалидитетом. Софтвер чита текст у атрибуту алт тако да особа са оштећењем вида која гледа вашу веб локацију може чути шта је на слици иако то не може да види.
Одредите димензије слике у пикселима помоћу висина и ширина атрибути. Ако не наведете димензије, претраживач не зна колико простора треба да остави за слику док се страница учитава. Ово доводи до тога да се страница учитава испрекидано, док се текст прво учитава, остављајући мали простор за слику, а затим скаче док се слика учитава и узрокује да се простор прошири. Са наведеним димензијама, претраживач оставља тачно праву количину простора између осталих елемената на страници да би слика попунила када заврши учитавање.
Тестирајте свој код да бисте били сигурни да се слика приказује на правој локацији тако што ћете отворити своју ХТМЛ датотеку у прегледачу.
Користите ЦСС да бисте померили слику на леву или десну страну екрана или да бисте је премотали текстом. На пример, можете користити стиле="флоат: лефт;" или стиле="флоат: десно;" унутар ознаке.
Ако не знате и висину и ширину слике, добро је користити само атрибут висине или ширине. Такође можете користити ЦСС да одредите висину и ширину; на пример, са сликом од 100 пута 100 пиксела, користите атрибут стиле: стиле="хеигхт: 100пк; ширина: 100 пиксела."
Претворите слику у везу на коју се може кликнути тако што ћете ознаку поставити у пар ознака „а хреф“. На пример, ако желите да се слика повеже са Фацебоок-ом, откуцајте следеће.
Не користите атрибут алт да бисте покушали да побољшате СЕО своје странице. Претраживачи су дуго били свесни да неки веб дизајнери покушавају да додају алт атрибут додатним кључним речима, па стога игноришу текст у атрибуту алт.
