Vložit obrázky s HTML - jak to funguje
Pokud chcete na svůj web vložit obrázek pomocí HTML, použijte značku img. Přečtěte si, jak přesně to funguje a na co musíte dávat pozor.
Jak vkládat obrázky pomocí HTML - základy
- S tímto dnem
můžete vkládat obrázky. - Zdroj obrázku je uveden ve značce:
vloží soubor „testbild.webp“ z podsložky „pictures“ na webu. - Možné jsou také externí zdroje prostřednictvím adresy URL:
integruje logo CHIP z našich serverů.
Atributy HTML pro vložené obrázky
Do značky img lze přidat řadu atributů:
- Pomocí „šířky“ a „výšky“ určete velikost obrázku na webu: Obrázek
se zobrazí čtverec o délce strany 100 pixelů. - Pomocí "alt" definujete alternativní text, který se zobrazí, pokud příslušný obrázek nelze načíst. Tento atribut byste měli vždy nastavit při vkládání obrázků pomocí HTML.
- Atribut "ohraničení" určuje tloušťku rámečku v pixelech. Obrázek s
má rám, který je relativně tlustý s pěti pixely. - Pomocí "zarovnání" zarovnejte grafiku. Hodnoty pro tento atribut jsou „dole“, „nahoru“, „uprostřed“, „vlevo“, „vpravo“ a „uprostřed“.
- Pomocí „hspace“ a „vspace“ můžete (vodorovně a svisle) nastavit vzdálenost k obrázku.
Jaký formát mám použít?
Existují různé obrazové formáty, které můžete zahrnout do kódu HTML.
- JPG: Obrázky JPG se nejčastěji používají pro webové stránky. Tento formát představuje 16, 7 milionu barev a JPG lze navíc velmi dobře komprimovat. Obrazový soubor proto může být velmi malý, což umožňuje rychlé načítání.
- PNG: Formát PNG může také zobrazovat 16, 7 milionů barev a může být komprimován. Výhodou oproti formátu JPG je, že komprese je možná bez ztrát.
- Oblasti definované ve formátu PNG lze také zobrazit průhledně. Velmi staré prohlížeče však mají problémy se zobrazováním fólií.
- GIF: Pokud chcete vkládat pohyblivé obrázky pomocí HTML, je vhodný formát GIF. V tomto formátu je zobrazeno pouze 256 barev a komprese probíhá automaticky bez možnosti nastavení.
- Formát GIF je nejvhodnější pro malou animovanou grafiku nebo loga. Aby bylo zajištěno, že loga se na stránku harmonicky hodí, lze fólie použít ve formátu GIF jako PNG.
příkladem HTML
- Toto integruje logo CHIP z naší webové stránky.
- Je zobrazen s výškou 100 pixelů a šířkou 200 pixelů.
- Pokud jej nelze načíst, zobrazí se „CHIP-Logo“ jako prázdný text.
- Obrázek je orámován dvoubarevným rámečkem.
- Je zarovnán doprava a je od ostatních postranních prvků vzdálený 50 pixelů.