Podívejte se na každou webovou stránku online dnes a zjistíte, že sdílí určité věci společné. Jednou z těchto sdílených vlastností jsou obrazy. Správné obrázky přidávají do prezentace webové stránky tolik. Některé z těchto obrázků, jako logo firmy, pomáhají značku webu a propojit digitální entitu s vaší fyzickou společností.
Chcete-li ke své webové stránce přidat obrázek, ikonu nebo grafiku, musíte použít značku v kódu HTML stránky. Umístíte značku IMG do kódu HTML přesně tam, kde chcete zobrazovat grafiku. Webový prohlížeč, který vykresluje kód stránky, nahradí tuto značku příslušnou grafikou po zobrazení stránky. Vraťme se zpět k příkladu našeho firemního loga, zde je návod, jak tento obrázek přidat k vašemu webu:
Atributy obrázku
Při pohledu na výše uvedený kód HTML uvidíte, že prvek obsahuje dva atributy. Každá z nich je požadována pro obrázek.
Prvním atributem je "src". To je doslova obrazový soubor, který chcete zobrazit na stránce. V našem příkladu používáme soubor s názvem "logo.png". Toto je grafika, kterou by webový prohlížeč zobrazoval při vykreslování webu.
Také si všimnete, že před tímto názvem souboru jsme přidali některé další informace, "/ images /". Toto je cesta k souboru. Počáteční lomítko označuje server, aby se podíval do kořenového adresáře. Poté vyhledá složku nazvanou "images" a nakonec soubor s názvem "logo.png". Použití složky s názvem "obrázky" pro ukládání všech grafiky webu je docela běžnou praxí, ale vaše cesta k souboru bude změněna na to, co je pro váš web relevantní.
Druhým požadovaným atributem je text "alt". Toto je "alternativní text", který se zobrazí, pokud se obraz z nějakého důvodu nezavede. Tento text, který v našem příkladu čte "Logo společnosti", se zobrazí, pokud se obraz nezobrazí. Proč se to stane? Různé důvody:
- Nesprávná cesta k souboru
- Nesprávný název souboru nebo nesprávné pravopisné slovo
- Chyba přenosu
- Soubor byl smazán ze serveru
To jsou jen málo možností, proč může být náš konkrétní obrázek chybějící. V těchto případech by se namísto toho zobrazil náš alt text.
Alt text také používá software čtečky obrazovky k "čtení" obrazu návštěvníkovi, který je zrakově postižený. Protože nemohou vidět obraz jako my, tento text jim dovoluje vědět, jaký je samotný obraz. To je důvod, proč je vyžadován alt text a proč by měl jasně uvést, jaký je obraz!
Společné nedorozumění alt textu je, že je určeno pro účely vyhledávače. To není pravda. Zatímco Google a další vyhledávače přečíst tento text, aby zjistili, jaký je obraz (nezapomeňte, že ani "nezobrazí"), neměl byste psát jiný text, který by se odvolal pouze na vyhledávače. Autor jasné alt text, který je určen pro lidi. Pokud do tagu, který oslovuje vyhledávače, můžete také přidat některé klíčová slova, ale vždy se ujistěte, že alt text slouží primárnímu účelu tím, že ukáže, co je obraz pro každého, kdo nevidí grafický soubor.
Další atributy
Značka IMG má také dva další atributy, které se mohou zobrazit při použití grafiky na webové stránce - šířku a výšku. Pokud například použijete editor WYSIWYG, jako je Dreamweaver, automaticky přidá tyto informace pro vás. Zde je příklad:
Atributy WIDTH a HEIGHT informují prohlížeč velikost obrázku. Prohlížeč pak přesně ví, kolik místa v rozvržení má být přiděleno, a během přehrávání snímku se může přesunout na další prvek na stránce. Problém s použitím těchto informací ve vašem kódu HTML je, že nemusí být vždy požadován zobrazování vašeho obrázku v této přesné velikosti. Například pokud máte citlivou webovou stránku, jejíž změna velikosti závisí na obrazovce návštěvníků a velikosti zařízení, budete také chtít, aby vaše obrázky byly flexibilní. Pokud ve svém kódu HTML uvedete, jaká je pevná velikost, zjistíte, že je velmi obtížné potlačit odpovědi na dotazy médií CSS . Z tohoto důvodu a zachování oddělení stylu (CSS) a struktury (HTML) doporučujeme, abyste do kódu HTML přidali atributy šířky a výšky.
Jedna poznámka: Pokud necháte tyto pokyny pro dimenzování vypnuty a nezadáte velikost v CSS, prohlížeč zobrazí obrázek ve výchozí, nativní velikosti.
Upravil Jeremy Girard