Obrázek není jen vložen přímo do textu. Prohlížeči je sdělen jeho název a pokyny, kam a jak jej umístit na obrazovce. Chcete-li to provést, použijte jednu značku HTML img. Určuje umístění grafického objektu na webové stránce.
Pokud je pro tagy mnoho atributů volitelných, pak tag img musí mít alespoň jeden parametr – adresu obrázku. Tento atribut se nazývá src:
- - toto zobrazí soubor goat-j.webp" />
- - s tímto parametrem značky img prohlížeč načte obrázek zveřejněný na internetu na stránce megasellmag.ru.
Atributy zarovnání
K umístění obrázků na stránku pomocí HTML se používá značka img, jejíž atributy jsou zodpovědné za umístění obrázku na stránku a povahu jeho obtékání textu.
Prohlížeč ve výchozím nastavení umístí obrázek do středu obrazovky a text se kolem něj neobtéká. Značka img vám umožní vyjádřit svůj nesouhlas s prohlížečem pomocí atributu align (alignment).
- obrázek bude umístěn na levém okraji stránky a text bude kolem něj zprava.
Chování textu bude podobné, pokud je obrázek umístěn vpravo (zarovnat=vpravo), uprostřed (zarovnat=uprostřed), nahoře (zarovnat=nahoře), dole(zarovnat=dole) a na střed (na střed).
Nastavení a velikosti
Aby se zabránilo vkrádání textu do obrázků, značka img získala speciální atributy -hspace (horizontální/horizontální okraje) a vspace (vertikální/vertikální okraje), které určují míru odsazení textu od okrajů obrázků v pixelů.
Obrázek se nejen poslušně vzdálí od textu o zadanou hodnotu, ale také se vzdálí od okraje stránky, takže je nejlepší vyhnout se velkým odsazením.
Velmi důležité jsou geometrické rozměry obrázků, které jsou nejen žádoucí, ale někdy prostě nutné pro správné zobrazení obrázku specifikovat. K tomu slouží atributy width (width) a height (height), jejichž hodnota se nastavuje v pixelech nebo procentech.
Pokud zadáte pouze šířku, bude výška vybrána automaticky s původními proporcemi. Procentuální velikosti umožňují umístit obrázek do pravé části stránky, bez ohledu na velikost okna prohlížeče, a tato potřeba často vzniká.
Další možnosti
Atribut border ohraničuje obrázek v rámci zadané tloušťky, což prohlížeč ve výchozím nastavení nedělá.
Ohraničení může mít také zdánlivě nesmyslnou nulovou šířku (ohraničení='0'), ale to je do té doby, než se obrázek stane odkazem, kdy jej prohlížeč automaticky zakroužkuje modrým okrajem, aniž by čekal na pokyny.
Někteří netrpěliví uživatelé, zuřiví nízkou rychlostí internetu, jednoduše zakážou zobrazování obrázků. Pro takové případy je k dispozici parametr alt, který umožňuje zadat alternativní text, který uživatel uvidí v poli, kde obrázek spěchá načíst.
Pokud se vám nelíbí možnosti parametru alt, tag img může nabídnout atribut longdesc, jehož hodnotou je URL dokumentu s podrobnějším popisem.
Atributy usemap a ismap sdělují prohlížeči, že obrázek bude obrázek, na kterém jsou hypertextové odkazy oddělené oblasti (mapa odkazů), pouze parametr usemap určuje navigační mapu na serveru a ismap - mapa na na straně klienta.
Popis odkazu 1 na obrázku níže:
Exotické předměty
Atribut lowsrc dává prohlížeči pokyn, aby si nejprve stáhl kopii (nebo jinou alternativu) původního obrázku s nižší kvalitou, a tedy „světlejší“. Tento trik je poskytován v případě nízké rychlosti internetu pro uživatele. Původní obrázek po nahrání nahradí „falešný“.
Méně používaný atribut galleryimg značky img vyvolá ovládací panel obrázku (když na něj umístíte kurzor), což vám umožní otevřít výchozí složku Moje obrázky a obrázek vytisknout, uložit nebo poslat e-mailem. Panel můžete deaktivovat nastavením parametru galleryimg na no/false a povolit jej nastavením yes/true.
V nové specifikaci HTML5 má řada značek zastaralé některé parametry. Například atributy lowsrc, border, longdesc a name u img byly vyřazeny.
