Jak přidat obrázky na webové stránky HTML

Přidávání obrázků na stránky vašeho webu je často může učinit příjemnějším pro oko a lépe předávat informace než samotný text. Tento proces se provádí pomocí HTML kódu a obrazového souboru. Soubor může být z jiné webové stránky nebo uložen na webovém serveru.

Za použití štítek

V kódu HTML webové stránky můžete přidat obrázek pomocí štítek. V musíte zadat čtyři atributy:

  • Src - Atribut zdroje označuje umístění obrazu. Pokud je obrázek na stejném serveru jako web, můžete použít relativní cestu, ale obrázky z jiného webu vyžadují absolutní cesty.
  • Alt - Alternativní textový atribut je psaný popis obrázku.
  • Šířka - Šířka obrazu.
  • Výška - Výška obrázku.

Volitelný atribut je Border, který umožňuje určit orámování kolem obrazu. Atribut border je definován ve velikosti pixelů. Například pomocí ohraničení = 1 v znamená, že hranice kolem obrázku by byla široká 1 pixel.

Poznámka: Atribut Border je v HTML5 zastaralý a není podporován.

Příklady

Následující příklady ukazují skutečný kód HTML použitý k přidání obrázku v horní části této stránky. Mohou být vloženy kdekoli v těle stránky. První má kratší URL, protože obraz je uložen na našem serveru; druhá je, jak byste odkazovali na náš obraz.

Příklad 1

Příklad dva

Jaké formáty obrázků mohu použít na webové stránce?

Nejběžnější formáty obrázků pro obrázky, fotografie, loga a další obrázky jsou JPEG, GIF a PNG. Jiné formáty obrázků, které nejsou široce podporovány, například BMP, nemusí fungovat ve všech prohlížečích.

Potřebuji citace kolem atributů ve značce img?

Ano. Ačkoli dnešní prohlížeče mohou obvykle opravit chyby s chybějícími uvozovkami kolem hodnoty atributu, měli byste vždy mít uvozovky kolem hodnoty atributu, aby se zabránilo chybám.