HTML – obrázky

1. Autorem materiálu a všech jeho částí, není-li uvedeno jinak, je Ing. Jana Milková. Dostupné z Metodického portálu www.rvp.cz, ISSN: 1802-4785. Provozuje Národní ústav pro vzdělávání, školské poradenské zařízení a zařízení pro další vzdělávání pedagogických pracovníků (NÚV).

2. HTML – obrázky

3. Prohlížeče internetových stránek podporují bitmapové formáty obrázků JPG (JPEG), GIF a PNG. • Zobrazení obrázku v dokumentu se provádí nepárovým příkazem IMG který má další parametry: • SRC - povinný - určuje umístění obrázku • <IMG SRC="obrazek.gif"> vloží obrázek, který se jmenuje obrazek.gif a je ve stejném adresáři jako ona stránka. Pokud bude v jiném adresáři (složce), přidá se adresářová cesta. Například: • <IMG SRC="adresar/jiny_obrazek.gif"> HTML - obrázky

4. width – šířka v pixelech • height – výška v pixelech • Pokud se u obrázku uvedou rozměry, prohlížeč pro obrázek vyhradí místo, přestože obrázek zatím není stažený. • Pokud se rozměry neuvedou, místo se nevyhradí a po natažení obrázku text jakoby "poskočí", což může způsobit zmatek ve čtenářově orientaci, ale hlavně to vypadá divně. HTML – obrázky - rozměry

5. Pokud se uvedou rozměry jiné, obrázek změní zobrazení. Takto se dají obrázky zmenšovat, zvětšovat a deformovat (dělá to až prohlížeč). Jestliže chceme obrázek zvětšit či zmenšit je lepší zadat jen jeden jeho rozměr, druhý pak bude automaticky dopočítán, aby nedošlo ke zkreslení obrázku. <IMG SRC=„obrazek.gif“ width=„50“> Šířka obrázku bude 50, výška se přepočítá ve stejném poměru. HTML – obrázky - rozměry

6. HTML umožňuje každému obrázku jeden popisek: • Zobrazí se nad obrázkem ve formě bubliny po najetím myši na obrázek • Ukáže se v rámečku vyhrazeném pro načítání během stahování obrázku • Zobrazí se na místě obrázků, pokud vypneme zobrazování obrázků pro rychlé zobrazování ALT=„popisek“ <IMG SRC=„obrazek.gif“ ALT=„toto je obrázek“> Obrázek dostane popisek „toto je obrázek“ HTML – obrázky - popisky

7. Lzenastavit parametrem ALIGN • LEFT - obrázek bude umístěn vlevo a obtékán textem zprava • RIGHT - obrázek bude umístěn vpravo a obtékán textem zleva <IMG SRC=„obrázek.gif“ ALIGN=„LEFT“> Obrázek bude umístěný vlevo, textem obtékán zprava. HTML – obrázky – obtékání a umístění

8. Další možnosti zarovnání: TOP – horní okraj obrázku zarovná s textem MIDLE – zarovná střed obrázku se základnou textu, zbývající text pokračuje pod obrázkem BOTTOM – zarovná dolní okraj obrázku s textem ABSMIDDLE – zarovná střed obrázku na střed daného řádku ABSBOTTOM – spodní okraj obrázku s nejspodnějším písmenem v textu HTML – obrázky – obtékání a umístění

9. Příklady zápisu tagu pro vložení obrázku s požadovaným obtékáním: <IMG SRC=„obrazek.gif“ ALIGN=„TOP“ > <IMG SRC=„obrazek.gif“ ALIGN=„BOTTOM“ > …. HTML – obrázky – obtékání a umístění

10. šířka rámečku se zadává v pixelech <IMG SRC=„obrazek.gif“ BORDER=„3“> Volné okraje okolo rámečku – aby text nebyl nalepen přímo na obrázek, používají se dva parametry pro IMG: • HSPACE – volný prostor v bodech zleva i zprava • VSPACE - volný prostor v bodech nad a pod obrázkem <IMG SRC=„obrazek.gif“ ALIGN=„left“ BORDER=„3“ HSPACE=„10“> Obrázek bude mít okolo sebe rámeček a text od rámečku bude vlevo i vpravo odsazen 10 bodů. HTML – obrázky – rámeček

11. Použité zdroje: • AUTOR NEUVEDEN. Kurz HTML [online]. [cit. 21.9.2013]. Dostupný na WWW: http://jary.borec.cz/html/ • AUTOR NEUVEDEN. HTML příručka [online]. [cit. 21.4.2014]. Dostupný na WWW: http://www.jakpsatweb.cz/html/ HTML – obrázky