Použitie značky HTML IMG pre obrázky a objekty
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, vyžaduje sa aj atribút ALT. 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 jazyku HTML5 nie je vždy požadovaný atribút ALT, 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 sa zvyknúť vždy používať atribúty WIDTH a HEIGHT. 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
TITLE . Atribút je globálny atribút, ktorý môže byť použitý pre akýkoľvek element HTML . Navyše atribút TITLE vám umožňuje pridať ďalšie informácie o obrázku.
Väčšina prehliadačov podporuje atribút TITLE, 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ť atribút TITLE na zápis ďalších informácií 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.
FRANCÚZSKO . 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 atribúty VSPACE 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 . Atribút LOWSRC 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, čiernobiely alebo len extrémne optimalizovanú, a vložte ju do atribútu LOWSRC. Menší obrázok sa najskôr prevezme a zobrazí, a potom, keď sa objaví väčší obrázok, nahradí sa obrázok s nízkym zdrojom.
Atribút LOWSRC bol pridaný do programu Netscape Navigator 2.0 do značky IMG. 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 dôležitou súčasťou dobrého dizajnu webu a veľké obrázky pomaly skracujú stránky, aj keď používate atribút LOWSRC.