Obrázky jsou velmi důležitou součástí webové stránky, protože zlepšují vzhled webové stránky a zvyšují interakci se zákazníky. USP více webů je způsob, jakým organizují různé obrázky na svých webových stránkách a přidávají k nim příchutě. V tomhle Článek o obrázcích pochopíme, jak vložit obrázky na webovou stránku pomocí HTML v následujícím pořadí:
Jak přidat obrázek v HTML
Vložit obrázek na webovou stránku vám dává HTML štítek. Dalším důležitým bodem k zapamatování je,
nemá uzavírací značku. scr Atribut se používá k určení cesty k obrázku, což může být adresa URL nebo cesta k obrázku ze systému / serveru. Začněme nejprve základní syntaxí vkládání obrázků na webovou stránku pomocí HTML.
Syntax
img src = 'img / front-end-web-development / 50 / what-are-html-images.png'>Ukázkový kód
Vkládání obrázků ve formátu HTML na webovou stránku
Podobně jako u jiných značek je s nimi spojeno několik atributů štítek. Podívejme se na každého z nich jeden po druhém, pochopme jeho potřebu a jak je používat.
Značky obrázků HTML
- alt Atribut
Atribut alt je alternativní text pro obrázek. Důvod, proč byl atribut alt zaveden, je ten, že z jakéhokoli důvodu se obrázek nemohl načíst, měl by se objevit alternativní text poskytující představu o obrázku. Důvodem pro nenačtení obrázku může být pomalé připojení k internetu nebo se obrázek nenachází v poskytnutém zdroji atd.
Pokud se obrázek nachází ve stejné složce, kde je soubor HTML, můžete přímo zadat název souboru. Jinak máte absolutní cestu k souboru obrázku.
Hodnota atributu alt by měla popisovat obrázek.
Příklad
Vkládání obrázků ve formátu HTML na webovou stránku
jak vytvořit relaci v Javě
- Šířka a výška obrázku
Atribut stylu se používá k nastavení výšky a šířky obrázku. V atributu styl určíte styl CSS.
Vkládání obrázků ve formátu HTML na webovou stránku
Některé z důležitých bodů při vkládání obrázku na web pomocí HTML jsou:
- Atributy width a height jsou definovány v pixelech.
- Můžete také definovat šířku a výšku obrázku v procentech. Zohlední procento podle celé webové stránky.
- Pokud zadáte pouze jednu z nich, upraví se odpovídajícím způsobem druhá.
- Vkládání obrázků pomocí adresy URL
HTML vám také dává flexibilitu, kde můžete vybrat obrázek z jiného serveru pouhým zadáním adresy URL. K hostování obrázků můžete použít samostatný server a poté je vložit pomocí adresy URL.
Vkládání obrázků ve formátu HTML na webovou stránku
- Obrázek jako odkaz
Můžete také použít obrázek jako odkaz, kde může uživatel kliknout na obrázek a přistát na nové webové stránce. Chcete-li tak učinit, stačí dát den štítek.
Vkládání obrázků ve formátu HTML na webovou stránku
- Plovoucí obrázek
Můžete také upravit zarovnání obrázku pomocí vlastnosti float CSS. V atributu style je třeba zadat všechny vlastnosti CSS.
Obrázek HTML
- Obrázkové mapy
Toto je jedna z důležitých funkcí poskytovaných HTML. značka pomáhá při definování obrazové mapy. Určitě vás zajímá, co je to obrazová mapa. Obrazová mapa je obraz s klikatelnými oblastmi
Obrázek HTML
- Obrázek na pozadí
Můžete také přidat obrázek na pozadí na webovou stránku. Musíte pouze použít vlastnost CSS, tj. Obrázek pozadí ve značce stylu a přidat ji do prvku HTML.
Obrázek HTMLObrázek na pozadí
Prvek BODY
S tímto se dostáváme na konec tohoto blogu HTML Images.Nyní po provedení výše uvedených úryvků byste pochopili, jak vložit obrázek do HTML. Doufám, že tento blog bude informativní a bude pro vás přidanou hodnotou.
Podívejte se na naše který přichází s živým tréninkem vedeným instruktorem a zkušenostmi z reálného projektu. Toto školení vám umožní ovládat dovednosti práce s webovými technologiemi typu back-end a front-end. Zahrnuje školení na Web Development, jQuery, Angular, NodeJS, ExpressJS a MongoDB.
Máte na nás dotaz? Uveďte to prosím v sekci komentářů v blogu „HTML Images“ a my se vám ozveme.
jak nyní používat službu