Značka HTML IMG upravuje vloženie obrázkov a iných statických grafických objektov do webovej stránky. Táto spoločná značka podporuje niekoľko povinných a voliteľných atribútov, ktoré pridávajú bohatosť k vašej schopnosti vytvárať pútavé webové stránky zamerané na obrázky.
Príklad plne vytvorenej značky HTML IMG vyzerá takto:
Požadované atribúty značky IMG
SRC.Jediný atribút, ktorý potrebujete na získanie obrázka na webovej stránke, je atribút SRC. Tento atribút identifikuje názov a umiestnenie súboru obrázka, ktorý sa má zobraziť.
ALT.Ak chcete písať platné XHTML a HTML4, ALT atribút je tiež požadovaný. Tento atribút sa používa na poskytovanie neviditeľných prehliadačov s textom, ktorý popisuje obrázok. Prehliadače zobrazujú alternatívny text rôznymi spôsobmi. Niektoré z nich sa zobrazia ako kontextové okienko, keď vložíte myš nad obrázok, iné ho zobrazia vo vlastnostiach, keď kliknete pravým tlačidlom na obrázok a niektoré ho nezobrazia vôbec.
Použite alterný text na získanie ďalších podrobností o obrázku, ktoré nie sú relevantné alebo relevantné pre text webovej stránky. Pamätajte však, že v čítačkách obrazoviek a iných textových prehliadačoch sa text bude čítať v súlade so zvyškom textu na stránke. Ak chcete zabrániť nejasnostiam, použite popisný alt text, ktorý hovorí (napríklad) "O webe Design a HTML" namiesto len "loga".
V HTML5, ALT atribút nie je vždy potrebný, pretože môžete použiť nadpis na pridanie ďalšieho popisu. Môžete tiež použiť atribút ARIA-DESCRIBEDBY na označenie ID, ktorý obsahuje úplný popis.
Alt text sa tiež nevyžaduje, ak je obrázok čisto dekoratívny, napríklad grafický v hornej časti webovej stránky alebo ikon. Ak si však nie ste istí, pridajte iný text len pre prípad.
Odporúčané atribúty IMG
šírka a výška. Mali by ste dostať do zvyku vždy používať šírka a výška atribúty. A vždy by ste mali používať skutočnú veľkosť a nemali by ste veľkosť obrázkov v prehliadači.
Tieto atribúty urýchľujú vykresľovanie stránky, pretože prehliadač môže priradiť priestor v dizajne obrázka a potom pokračovať v sťahovaní zvyšku obsahu, namiesto čakania na stiahnutie celého obrázka.
Ďalšie užitočné atribúty IMG
HLAVA. Atribút je globálny atribút, ktorý môže byť použitý pre akýkoľvek element HTML. Okrem toho HLAVA atribút vám umožňuje pridať ďalšie informácie o obrázku.
Väčšina prehliadačov podporuje HLAVA atribút, ale robia to rôznymi spôsobmi. Niektoré zobrazujú text ako vyskakovací okienok, zatiaľ čo iní sa zobrazujú na obrazovkách s informáciami, keď používateľ klikne pravým tlačidlom na obrázok. Môžete použiť HLAVA atribút napísať ďalšie informácie o obrázku, ale nepočítajte sa s týmito informáciami, ktoré sú skryté alebo viditeľné. Mali by ste to určite nepoužívať na skrytie kľúčových slov pre vyhľadávače. Táto prax je teraz penalizovaná väčšinou vyhľadávačov.
USEMAP a ismap. Tieto dva atribúty nastavujú obrázky obrázkov na strane klienta () a servera (ISMAP).
longdesc. Atribút podporuje adresy URL na dlhší popis obrázka. Táto funkcia sprístupňuje obrázky.
Zastarané a zastarané atribúty IMG
Niektoré atribúty sú teraz zastarané v jazyku HTML5 alebo sú zastarané v jazyku HTML4. Najlepšie HTML by ste mali namiesto použitia týchto atribútov nájsť iné riešenia.
HRANICE. Atribút definuje šírku v obraze akéhokoľvek okraja okolo obrázka. Bolo zastarané v prospech CSS v HTML4 av HTML5 je zastarané.
ALIGN. Tento atribút vám umožňuje vložiť obrázok do textu a mať text okolo tela. Obrázok môžete zarovnať doprava alebo doľava. Bolo zastarané v prospech vlastníctva float CSS v HTML4 av HTML5 je zastarané.
hspace a vspace. hspace a vspace atribúty pridávajú biely priestor vodorovne (hspace) a vertikálne (vspace). Na obidve strany grafiky sa pridá biely priestor (hore a dole, alebo doľava a doprava), takže ak potrebujete len priestor na jednej strane, mali by ste používať CSS. Tieto atribúty boli zastarané v jazyku HTML4 v prospech vlastností okrajov CSS a v HTML5 sú zastaralé.
LOWSRC. LOWSRC atribút poskytuje alternatívny obrázok, keď je zdroj obrazu taký veľký, že sa sťahuje extrémne pomaly. Napríklad, môžete mať obrázok, ktorý je 500 kB, ktorý chcete zobraziť na vašej webovej stránke, ale 500 kB bude trvať dlhší čas na stiahnutie. Takže vytvoríte oveľa menšiu kópiu obrazu, či už čiernej a bielej alebo len veľmi optimalizovanú, a vložte ju do súboru LOWSRC atribútov. Menšia snímka sa najprv prevezme a zobrazí, a potom, keď sa zobrazí väčší obrázok, nahradí sa zdroj s nízkym zdrojom.
LOWSRC atribút bol pridaný do programu Netscape Navigator 2.0 na IMG tag. Bola súčasťou úrovne DOM 1, ale bola odstránená z úrovne DOM 2. Podpora prehliadača bola pre tento atribút skrytá, aj keď mnohé stránky tvrdia, že je podporované všetkými modernými prehliadačmi. Nie je zastaraný v HTML4 alebo zastaraný v HTML5, pretože to nikdy nebolo oficiálne súčasťou jednej špecifikácie.
Nepoužívajte tento atribút a namiesto toho optimalizujte obrázky tak, aby sa rýchlo načítavali. Rýchlosť načítania stránok je rozhodujúcou súčasťou dobrého dizajnu webu a veľké obrázky pomaly skracujú stránky - aj keď používate LOWSRC atribútov.
