Otvorte súbor HTML pre webovú stránku, na ktorú chcete pridať obrázok, v textovom editore, ako je napríklad Poznámkový blok alebo softvér na vývoj webu.
Pridajte značku do súboru. Umiestnite značku za prvok, pod ktorým sa má zobraziť obrázok, keď sa súbor HTML otvorí v prehliadači. Štítok nemá samostatný uzatvárací štítok. V rámci značky musíte zadať zdroj obrázka, ktorý chcete zobraziť, zadaním umiestnenia obrázka na internete pomocou src atribút. Ak je obrázok uložený v rovnakom priečinku ako súbor HTML, zadajte názov a príponu obrázka. Ak je obrázok uložený inde, zadajte úplnú adresu URL obrázka.
Pridajte alt atribút vašej značky. V HTML5 je atribút alt povinný. Tento atribút použite na popis obrázka v prípade, že sa nedá načítať. Ak sa obrázok nedá načítať, prehliadač zobrazí za atribútom alt text, ktorý zadáte. Okrem toho je atribút alt dôležitý pre softvér na čítanie obrazovky, ktorý používajú ľudia so zrakovým postihnutím. Softvér prečíta text v atribúte alt, takže osoba so zrakovým postihnutím, ktorá si prezerá vašu webovú stránku, môže počuť, čo je na obrázku, aj keď to nevidí.
Zadajte rozmery obrázka v pixeloch pomocou výška a šírka atribúty. Ak neurčíte rozmery, prehliadač nevie, koľko miesta má ponechať pre obrázok pri načítaní stránky. To má za následok, že sa stránka načítava trhane, pretože text sa načítava ako prvý, pričom ponecháva malý priestor pre obrázok, potom sa pri načítavaní obrázka rozskočí a spôsobí rozšírenie priestoru. So zadanými rozmermi prehliadač ponecháva presne správny priestor medzi ostatnými prvkami na stránke, ktorý má obrázok po dokončení načítania vyplniť.
Otestujte svoj kód, aby ste sa uistili, že sa obrázok zobrazuje na správnom mieste, otvorením súboru HTML v prehliadači.
Použite CSS na presunutie obrázka na ľavú alebo pravú stranu obrazovky alebo na obtekanie textu. Môžete napríklad použiť style="float: left;" alebo style="float: right;" v rámci značky.
Ak nepoznáte výšku aj šírku obrázka, je dobré použiť iba samotný atribút výška alebo šírka. Na určenie výšky a šírky môžete použiť aj CSS; napríklad pre obrázok s rozmermi 100 x 100 pixelov použite atribút štýlu: style="height: 100px; šírka: 100px."
Urobte z obrázka odkaz, na ktorý sa dá kliknúť, umiestnením značky do páru značiek „a href“. Napríklad, ak chcete, aby sa obrázok prepojil s Facebookom, zadajte nasledovné.
Nepoužívajte atribút alt na zvýšenie SEO vašej stránky. Vyhľadávače už dávno vedia, že niektorí weboví dizajnéri sa snažia prepchať atribút alt extra kľúčovými slovami, a preto ignorujú text v atribúte alt.
