Obrázok nie je len vložený priamo do textu. Prehliadač dostane svoj názov a pokyny, kde a ako ho umiestniť na obrazovke. Na tento účel použite jednu značku HTML img. Špecifikuje umiestnenie grafického objektu na webovej stránke.
Ak je veľa atribútov pre značky voliteľných, potom značka img musí mať aspoň jeden parameter – adresu obrázka. Tento atribút sa nazýva src:
- - toto zobrazí súbor goat-j.webp" />
- - s týmto parametrom značky img prehliadač načíta obrázok uverejnený na internete na stránke megasellmag.ru.
Atribúty zarovnania
Na umiestnenie obrázkov na stránke pomocou HTML sa používa značka img, ktorej atribúty sú zodpovedné za umiestnenie obrázka na stránku a povahu jeho zalamovania.
Prehliadač v predvolenom nastavení umiestňuje obrázok do stredu obrazovky a text ho nezalamuje. Značka img vám umožní vyjadriť svoj nesúhlas s prehliadačom pomocou atribútu align (alignment).
– obrázok bude umiestnený na ľavom okraji stránky a text bude okolo neho vpravo.
Správanie textu bude podobné, ak bude obrázok umiestnený vpravo (zarovnať=vpravo), v strede (zarovnať=uprostred), hore (zarovnať=navrchu), dole(zarovnať=dole) a vycentrovať (na stred).
Nastavenia a veľkosti
Aby sa zabránilo vnikaniu textu do obrázkov, značka img získala špeciálne atribúty -hspace (horizontálne/horizontálne okraje) a vspace (vertikálne/vertikálne okraje), ktoré určujú mieru odsadenia textu od okrajov obrázkov v pixelov.
Obrázok sa nielenže poslušne vzdiali od textu o zadanú hodnotu, ale aj od okraja stránky, takže je najlepšie vyhnúť sa veľkým zarážkam.
Veľmi dôležité sú geometrické rozmery obrázkov, ktoré sú nielen žiaduce, ale niekedy jednoducho potrebné špecifikovať pre správne zobrazenie obrázka. Na to slúžia atribúty width (width) a height (height), ktorých hodnota je nastavená v pixeloch alebo percentách.
Ak zadáte iba šírku, výška sa vyberie automaticky s pôvodnými proporciami. Percentuálne veľkosti vám umožňujú umiestniť obrázok do pravej časti stránky bez ohľadu na veľkosť okna prehliadača a táto potreba často vzniká.
Ďalšie možnosti
Atribút border ohraničuje obrázok v rámci určenej hrúbky, čo prehliadač predvolene nerobí.
Okraj môže mať aj zdanlivo nezmyselnú nulovú šírku (okraj='0'), ale to je dovtedy, kým sa obrázok nestane odkazom, keď ho prehliadač automaticky zakrúžkuje modrým okrajom bez čakania na pokyny.
Niektorí netrpezliví používatelia, nahnevaní na nízke rýchlosti internetu, jednoducho zakážu zobrazovanie obrázkov. Pre takéto prípady je k dispozícii parameter alt, ktorý vám umožňuje zadať alternatívny text, ktorý používateľ uvidí v poli, kde sa obrázok ponáhľa načítať.
Ak sa vám nepáčia možnosti parametra alt, tag img môže ponúknuť atribút longdesc, ktorého hodnotou je URL dokumentu s podrobnejším popisom.
Atribúty usemap a ismap hovoria prehliadaču, že obrázok bude obrázkom, na ktorom sú hypertextové odkazy oddelené oblasti (mapa odkazov), iba parameter usemap určuje navigačnú mapu na serveri a ismap - mapa na na strane klienta.
Popis odkazu 1 na obrázku nižšie:
Exotické predmety
Atribút lowsrc dáva pokyn prehliadaču, aby si najprv stiahol kópiu (alebo inú alternatívu) pôvodného obrázka s nižšou kvalitou, a teda „svetlejším“. Tento trik sa poskytuje v prípade nízkej rýchlosti internetu pre používateľa. Pôvodný obrázok po nahraní nahradí „falošný“.
Menej bežne používaný atribút galleryimg značky img vyvolá ovládací panel obrázka (keď naň umiestnite kurzor myši), čo vám umožní otvoriť predvolený priečinok Moje obrázky a vytlačiť, uložiť alebo poslať obrázok e-mailom. Panel môžete deaktivovať nastavením parametra galleryimg na no/false a povoliť ho nastavením yes/true.
V novej špecifikácii HTML5 má viacero značiek zastarané niektoré parametre. Napríklad atribúty lowsrc, border, longdesc a name v img boli zrušené.
