Отворете HTML файла за уеб страницата, към която искате да добавите изображение, в текстов редактор като Notepad или софтуер за уеб разработка.
Добавете маркер към файла. Поставете маркера след елемента, под който искате да се показва изображение, когато HTML файлът се отвори в браузър. Тагът няма отделен затварящ етикет. В рамките на етикета трябва да посочите източника на изображението, което искате да покажете, като напишете местоположението на изображението в интернет с src атрибут. Ако изображението се съхранява в същата папка като HTML файла, въведете името и разширението на изображението. Ако изображението се съхранява на друго място, въведете пълния URL адрес на изображението.
Добавете алт атрибут към вашия маркер. В HTML5 атрибутът alt е задължителен. Използвайте този атрибут, за да опишете изображението, в случай че не може да се зареди. Ако изображението не може да се зареди, браузърът показва текста, който въвеждате след атрибута alt. Освен това атрибутът alt е важен за софтуера за екранен четец, използван от хора със зрителни увреждания. Софтуерът чете текста в атрибута alt, така че човекът със зрителни увреждания, който разглежда вашия уебсайт, може да чуе какво е на снимката, въпреки че не може да го види.
Задайте размерите на изображението в пиксели с височина и ширина атрибути. Ако не посочите размерите, браузърът не знае колко място да остави за изображението при зареждане на страницата. Това води до зареждане на страница накъсано, тъй като текстът се зарежда първо, оставяйки малко място за изображението, след което се разделя при зареждането на изображението и причинява разширяване на пространството. С посочените размери браузърът оставя точното пространство между другите елементи на страницата, което изображението да запълни, когато приключи зареждането.
Тествайте кода си, за да сте сигурни, че изображението се показва на правилното място, като отворите своя HTML файл в браузър.
Използвайте CSS, за да преместите изображение от лявата или дясната страна на екрана или да го обвиете с текст. Например, можете да използвате style="float: left;" или style="float: right;" в етикета.
Ако не знаете както височината, така и ширината на изображението, добре е да използвате само атрибута височина или ширина. Можете също да използвате CSS, за да посочите височината и ширината; например, с изображение с размери 100 на 100 пиксела, използвайте атрибута style: style="height: 100px; ширина: 100px."
Направете изображението във връзка с възможност за кликване, като поставите маркера в двойка тагове „a href“. Например, ако искате изображение да се свързва с Facebook, въведете следното.
Не използвайте атрибута alt, за да се опитате да подобрите SEO на страницата си. Търсачките отдавна са наясно, че някои уеб дизайнери се опитват да напълнят атрибута alt с допълнителни ключови думи и затова игнорират текста в атрибута alt.
