Podívejte se na všechny webová stránka online dnes a všimnete si, že sdílejí určité společné věci. Jednou z těchto sdílených vlastností jsou obrázky. Správné obrázky přidávají na prezentaci webu tolik. Některé z těchto obrázků, například logo společnosti, pomáhají značkovat stránky a propojovat tuto digitální entitu s vaší fyzickou společností.
Jak přidat obrázek na webovou stránku pomocí HTML
Chcete-li na webovou stránku přidat obrázek, ikonu nebo grafiku, musíte použít značku v kódu HTML stránky. Umístíte.
IMGštítek ve vašem. HTML přesně tam, kde chcete grafiku zobrazit. Webový prohlížeč, který vykresluje kód stránky, po zobrazení stránky nahradí tuto značku příslušnou grafikou. Vraťme se zpět k příkladu našeho firemního loga, zde je příklad, jak můžete tento obrázek přidat na svůj web:
Atribut SRC
Při pohledu na výše uvedený kód HTML uvidíte, že prvek obsahuje dva atributy. Každý z nich je pro obrázek vyžadován.
Prvním atributem je „src“. Toto je doslova obrazový soubor, který chcete na stránce zobrazit. V našem příkladu používáme soubor s názvem „logo.png“. Toto je grafika, kterou by webový prohlížeč zobrazil, když vykreslil web.
Také si všimnete, že před tento název souboru jsme přidali několik dalších informací „/ images /“. Toto je cesta k souboru. Počáteční lomítko říká serveru, aby se podíval do kořenového adresáře. Poté vyhledá složku s názvem „images“ a nakonec soubor s názvem „logo.png“. Používání složky s názvem „obrázky“ k ukládání veškeré grafiky webu je docela běžná praxe, ale cesta k souboru by se změnila na cokoli, co je pro váš web relevantní.
Atribut Alt
Druhým požadovaným atributem je text „alt“. Toto je „alternativní text“, který se zobrazí, pokud se obrázek z nějakého důvodu nepodaří načíst. Tento text, který v našem příkladu čte „Logo společnosti“, by se zobrazil, pokud se obrázek nepodaří načíst. Proč by se to stalo? Různé důvody:
- Nesprávná cesta k souboru
- Nesprávný název souboru nebo překlep
- Chyba přenosu
- Soubor byl odstraněn ze serveru
Existuje jen několik možností, proč může náš zadaný obrázek chybět. V těchto případech by se místo toho zobrazil náš alternativní text.
Na co se používá alternativní text?
Alternativní text používá software pro čtení obrazovky také k „přečtení“ obrázku návštěvníkovi, který je zrakově postižený. Vzhledem k tomu, že nemohou vidět obrázek jako my, tento text jim dává vědět, jaký je samotný obrázek. To je důvod, proč je vyžadován alternativní text a proč by měl jasně uvádět, jaký je obrázek!
Častým nedorozuměním alternativního textu je, že je určen pro účely vyhledávače. To není pravda. Zatímco Google a další vyhledávače tento text čtou, aby určily, jaký je obrázek (nezapomeňte, nemohou také "vidět" váš obrázek), neměli byste psát alternativní text, který by přitahoval pouze vyhledávání motory. Vytvořte jasný alternativní text určený pro člověka. Pokud můžete do značky přidat také některá klíčová slova, která přitahují vyhledávače, je to v pořádku, ale vždy se ujistěte alternativní text slouží svému primárnímu účelu tím, že uvádí, jaký je obrázek pro každého, kdo nevidí grafiku soubor.
Další atributy obrázku
The.
IMG.
Značka má také dva další atributy, které se mohou používat při umístění grafiky na webovou stránku - šířku a výšku. Například pokud používáte editor WYSIWYG, jako je Dreamweaver, automaticky vám tyto informace přidá. Zde je příklad:
The.
ŠÍŘKA.
a.
VÝŠKA.
atributy sdělují prohlížeči velikost obrázku. Prohlížeč pak přesně ví, kolik místa v rozvržení má alokovat, a může se během stahování obrázku přesunout na další prvek na stránce. Problém s použitím těchto informací ve vašem HTML je, že možná nebudete vždy chtít, aby se váš obrázek zobrazoval v přesné velikosti. Například pokud máte a.
responzivní web
jejichž velikost se mění na základě obrazovky návštěvníka a velikosti zařízení, budete také chtít, aby vaše obrázky byly flexibilní. Pokud ve svém HTML uvedete, co je pevná velikost, zjistíte, že je velmi těžké ji přepsat pomocí responzivní.
CSS dotazy médií
. Z tohoto důvodu a pro zachování oddělení stylu (CSS) a struktury (HTML) se doporučuje, abyste do kódu HTML nepřidávali atributy šířky a výšky.
Jedna poznámka: Pokud tyto pokyny pro změnu velikosti necháte vypnuté a neurčíte velikost v CSS, prohlížeč stejně zobrazí obrázek v jeho výchozí velikosti.
Upravil Jeremy Girard