Použití značky HTML IMG pro obrázky a objekty
Značka HTML IMG upravuje vkládání obrázků a dalších statických grafických objektů do webové stránky. Tento společný štítek podporuje několik povinných a volitelných atributů, které přidávají bohatost k vaší schopnosti navrhnout poutící webové stránky zaměřené na obrázky.
Příklad plně tvarované značky HTML IMG vypadá takto:
Požadované atributy značky IMG
SRC. Jediný atribut, který potřebujete pro zobrazení obrázku na webové stránce, je atribut SRC. Tento atribut identifikuje jméno a umístění souboru obrázku, který se má zobrazit.
ALT. Pro psaní platných XHTML a HTML4 je vyžadován atribut ALT. Tento atribut se používá k poskytování neviditelných prohlížečů s textem popisujícím obrázek. Prohlížeče zobrazují alternativní text různými způsoby. Některé z nich se zobrazují jako vyskakovací okno, když umístíte myš nad obrázek, ostatní zobrazíte ve vlastnostech při klepnutí pravým tlačítkem myši na obrázek a některé se vůbec nezobrazí.
Chcete-li získat další podrobnosti o snímku, který není relevantní nebo relevantní pro text webové stránky, použijte alt text . Nezapomeňte však, že v čtecích zařízeních na obrazovce a v jiných prohlížečích pouze pro text bude text přečten v souladu se zbytkem textu na stránce. Chcete-li se vyhnout záměně, použijte popisný alt text, který říká (například) "O webu a HTML" namísto jen "logo".
V atributu HTML5 není vždy požadován atribut ALT, protože můžete použít popis, abyste k němu přidali další popis. Můžete také použít atribut ARIA-DESCRIBEDBY pro označení ID, který obsahuje úplný popis.
Alt text není také vyžadován, pokud je obraz čistě dekorativní, například grafika v horní části webové stránky nebo ikony. Pokud si však nejste jisti, vložte jiný text jen pro případ.
Doporučené atributy IMG
ŠÍŘKA A VÝŠKA . Měli byste se zvyknout používat vždy atributy WIDTH a HEIGHT. A vždy byste měli používat reálnou velikost a neměli byste změnit velikost obrázků v prohlížeči.
Tyto atributy urychlují vykreslování stránky, protože prohlížeč může přidělit místo v návrhu obrázku a poté pokračovat ve stahování zbytku obsahu, než aby čekal na stažení celého obrázku.
Další užitečné atributy IMG
TITLE . Atribut je globální atribut, který lze použít na libovolný element HTML . Atribut TITLE navíc umožňuje přidat další informace o obrázku.
Většina prohlížečů podporuje atribut TITLE, ale dělají to různými způsoby. Někteří uživatelé zobrazují text jako vyskakovací okno, zatímco jiní jej zobrazují na obrazovkách s informacemi, když uživatel klepne pravým tlačítkem myši na obrázek. Atribut TITLE můžete použít k zápisu dalších informací o obrázku, ale nepočítajte s tím, že tyto informace jsou skryté nebo viditelné. Nejlépe byste to neměli používat pro skrytí klíčových slov pro vyhledávače. Tato praxe je nyní penalizována většinou vyhledávačů.
USEMAP a ISMAP . Tyto dva atributy nastavují obrazy na straně klienta () a na straně serveru (ISMAP).
LONGDESC . Atribut podporuje adresy URL k delšímu popisu obrázku. Díky této funkci jsou vaše snímky přístupnější.
Zastaralé a zastaralé atributy IMG
Několik atributů je v HTML5 zastaralé nebo v HTML4 zastaralé. Pro nejlepší HTML byste měli namísto těchto atributů najít jiné řešení.
BORDER . Atribut definuje šířku všech pixelů v obraze v pixelech. To bylo zastaralé ve prospěch CSS v HTML4 a je zastaralý v HTML5.
ALIGN . Tento atribut umožňuje umístit obrázek do textu a mít tok textu kolem něj. Obrázek můžete zarovnat vpravo nebo vlevo. To bylo zastaralé ve prospěch vlastnictví float CSS v HTML4 a je zastaralý v HTML5.
HSPACE a VSPACE . HSPACE a atributy VSPACE přidávají bílý prostor vodorovně (HSPACE) a vertikálně (VSPACE). Bílý prostor bude přidán k oběma stranám grafiky (horní a spodní, nebo doleva a doprava), takže pokud potřebujete pouze prostor na jedné straně, měli byste použít CSS. Tyto atributy byly v HTML4 zastaralé ve prospěch vlastností oken CSS a v HTML5 jsou zastaralé.
LOWSRC . Atribut LOWSRC poskytuje alternativní obraz, pokud je zdroj obrázku tak velký, že se stáhne extrémně pomalu. Například můžete mít obrázek, který je 500KB, který chcete zobrazit na vaší webové stránce, ale 500KB by trvalo dlouho stahování. Takže vytvoříte mnohem menší kopii obrazu, možná černobíle nebo jen extrémně optimalizovanou, a vložte ji do atributu LOWSRC. Menší snímek se nejprve stáhne a zobrazí a poté, co se objeví větší obrázek, nahradí snímek s nízkým zdrojem.
Atribut LOWSRC byl přidán do aplikace Netscape Navigator 2.0 do značky IMG. Byla součástí DOM úrovně 1, ale byla odebrána z úrovně DOM 2. Podpora prohlížeče byla pro tento atribut nápadná, i když mnoho stránek tvrdí, že je podporováno všemi moderními prohlížeči. V HTML5 není zastaralý nebo zastaralý ve formátu HTML4, protože nikdy nebyl oficiální součástí žádné specifikace.
Vyhněte se použití tohoto atributu a místo toho optimalizujte své obrázky tak, aby se rychle načítaly. Rychlost načítání stránky je důležitou součástí dobrého webového designu a velké obrázky pomalu zhoršují stránky - i když používáte atribut LOWSRC.