Otevřete soubor HTML pro webovou stránku, na kterou chcete přidat obrázek, v textovém editoru, jako je Poznámkový blok nebo software pro vývoj webu.
Přidejte do souboru značku. Umístěte značku za prvek, pod kterým chcete zobrazit obrázek, když je soubor HTML otevřen v prohlížeči. Štítek nemá samostatný uzavírací štítek. V rámci značky musíte určit zdroj obrázku, který chcete zobrazit, zadáním umístění obrázku na internetu pomocí src atribut. Pokud je obrázek uložen ve stejné složce jako soubor HTML, zadejte název a příponu obrázku. Pokud je obrázek uložen jinde, zadejte úplnou adresu URL obrázku.
Přidat alt atribut k vaší značce. V HTML5 je atribut alt povinný. Tento atribut použijte k popisu obrázku v případě, že se nemůže načíst. Pokud se obrázek nemůže načíst, prohlížeč zobrazí text, který zadáte za atribut alt. Atribut alt je navíc důležitý pro software pro čtení z obrazovky, který používají lidé se zrakovým postižením. Software přečte text v atributu alt, takže osoba se zrakovým postižením, která si prohlíží váš web, může slyšet, co je na obrázku, i když to nevidí.
Zadejte rozměry obrázku v pixelech pomocí výška a šířka atributy. Pokud neurčíte rozměry, prohlížeč při načítání stránky neví, kolik místa má pro obrázek ponechat. To má za následek, že se stránka načítá trhaně, protože text se načítá jako první, přičemž ponechává malý prostor pro obrázek, poté se při načítání obrázku rozskočí a způsobí rozšíření prostoru. Se zadanými rozměry ponechává prohlížeč mezi ostatními prvky na stránce přesně tu správnou mezeru, kterou má obrázek po dokončení načítání vyplnit.
Otestujte svůj kód, abyste se ujistili, že se obrázek zobrazuje na správném místě otevřením souboru HTML v prohlížeči.
Použijte CSS k přesunutí obrázku na levou nebo pravou stranu obrazovky nebo k obtékání textu. Můžete například použít style="float: left;" nebo style="float: right;" v rámci značky.
Pokud neznáte výšku i šířku obrázku, je dobré použít pouze atribut height nebo width. K určení výšky a šířky můžete také použít CSS; například pro obrázek o rozměrech 100 x 100 pixelů použijte atribut style: style="height: 100px; šířka: 100px."
Umístěním značky do páru značek „a href“ vytvořte z obrázku odkaz, na který lze kliknout. Pokud například chcete, aby obrázek odkazoval na Facebook, zadejte následující.
Nepoužívejte atribut alt ke zvýšení SEO vaší stránky. Vyhledávače si již dlouho uvědomují, že někteří weboví návrháři se snaží nacpat atribut alt dalšími klíčovými slovy, a proto ignorují text v atributu alt.
