The HTML Značka IMG řídí vkládání obrázků a dalších statických grafických objektů na webovou stránku. Tato společná značka podporuje několik povinných a volitelných atributů, které obohacují vaši schopnost navrhnout poutavý web zaměřený na obrázek.
Příklad plně vytvořené značky HTML IMG vypadá takto:
Požadované atributy značky IMG
src = "/ cesta / k / image.jpg"
Jediným atributem, který potřebujete k zobrazení obrázku na webové stránce, je src atribut. Tento atribut určuje název a umístění obrazového souboru, který se má zobrazit.
alt = "Popis obrázku"
Chcete-li psát platné XHTML a HTML4, alt atribut je také povinný. Tento atribut se používá k poskytnutí nevizuálních prohlížečů s textem, který popisuje obrázek. Prohlížeče zobrazují alternativní text různými způsoby. Některé zobrazují jako vyskakovací okno, když umístíte myš na obrázek, jiné jej zobrazují ve vlastnostech, když na obrázek kliknete pravým tlačítkem, a některé ho nezobrazí vůbec.
Použijte alternativní text poskytnout další podrobnosti o obrázku, které nejsou relevantní nebo důležité pro text webové stránky. Nezapomeňte však, že v čtečkách obrazovky a jiných prohlížečích pouze pro text bude text čten inline se zbytkem textu na stránce. Abyste předešli nejasnostem, použijte místo „loga“ popisný alternativní text, který říká (například) „O webdesignu a HTML“.
The alt text je také nezbytný pro SEO (optimalizace pro vyhledávače). Roboti, které vyhledávače, jako je Google, používají k prozkoumání obsahu na webech, nemohou „vidět“ obrázky. Spoléhají na alt text k určení toho, co je na stránce.
v HTML5„ alt atribut není vždy vyžadován, protože můžete použít a titulek přidat k tomu další popis. Tento atribut můžete také použít k označení ID, které obsahuje úplný popis:
aria-describedby = "Popis obrázku"
Alternativní text také není vyžadován, pokud je obrázek čistě dekorativní, například obrázek v horní části webové stránky nebo ikony. Pokud si však nejste jisti, uveďte alternativní text pro každý případ.
Atributy velikosti
width = "500"a.
výška = "500"V závislosti na vašem designu použijte. výška a. šířka
Obecně budete chtít nastavit velikost obrázku v CSS. Častěji to bude výsledkem rozměrů nadřazeného kontejneru obrázku. Tento přístup umožňuje maximální flexibilitu při přizpůsobování různým velikostem obrazovky. Stále však existují případy, kdy budete chtít určit rozměry obrázku jako atributy HTML.
Další užitečné atributy IMG
title = "Popisný název obrázku"Atribut je globální atribut, který lze použít na jakýkoli. Prvek HTML. Navíc. titul
Většina prohlížečů podporuje titul atribut, ale dělají to různými způsoby. Některé zobrazují text jako vyskakovací okno, zatímco jiné jej zobrazují na informačních obrazovkách, když uživatel klikne pravým tlačítkem na obrázek. Můžete použít titul atribut k napsání dalších informací o obrázku, ale nepočítejte s tím, že budou tyto informace buď skryté nebo viditelné. Určitě byste to neměli používat ke skrytí klíčových slov pro vyhledávače. Tato praxe je nyní většinou vyhledávačů penalizována.
usemap = ""a.
ismap = ""Tyto dva atributy nastavují na straně klienta () a na straně serveru (ISMAP) obrazové mapy
longdesc = "Podrobnější popis vašeho obrázku"The. longdesc
Zastaralé a zastaralé atributy IMG
Některé atributy jsou nyní v HTML5 zastaralé nebo jsou v HTML4 zastaralé. Pro nejlepší HTML byste měli místo použití těchto atributů najít jiná řešení.
border = "3"
align = "left"Tento atribut umožňuje umístit obrázek do textu a nechat text kolem něj proudit. Obrázek můžete zarovnat doprava nebo doleva. Byla ukončena podpora ve prospěch. float vlastnost CSS
hspcace = "10"a.
vspace = "10"The. hspace a. vspace atributy přidat prázdné místo vodorovně ( hspace) a svisle ( vspace
lowsrc = "/ cesta / k / lowres.jpg"The. lowsrc Atribut poskytuje alternativní obrázek, když je zdroj obrázku tak velký, že se stahuje extrémně pomalu. Můžete mít například obrázek o velikosti 500 kB, který chcete zobrazit na své webové stránce, ale stažení 500 kB by trvalo dlouho. Takže vytvoříte mnohem menší kopii obrázku, možná černobíle nebo jen extrémně optimalizovanou, a vložíte to do. lowsrc
The lowsrc byl do značky přidán atribut Netscape Navigator 2.0. Byla součástí DOM úrovně 1, ale poté byla odstraněna z DOM úrovně 2. Podpora prohlížeče byla pro tento atribut povrchní, ačkoli mnoho webů tvrdí, že je podporováno všemi moderními prohlížeči. Není zastaralý v HTML4 ani zastaralý v HTML5, protože nikdy nebyl oficiální součástí ani jedné specifikace.
Nepoužívejte tento atribut a místo toho optimalizujte obrázky tak, aby se rychle načítaly. Rychlost načítání stránek je důležitou součástí dobrého webového designu a velké obrázky stránky enormně zpomalují - i když používáte lowsrc atribut.