Webové stránky jsou na rozdíl od jakéhokoli komunikačního média, které jim předcházelo. Jedna z hlavních věcí, které nastavují webové stránky na rozdíl od předchozích formátů médií, jako je tisk, rozhlas a dokonce i televize, je koncept " hypertextového odkazu ".
Hypertextové odkazy, také obyčejně známé jako "odkazy", jsou to, co dělá web tak dynamický. Na rozdíl od tištěné publikace, která může odkazovat na jiný článek nebo jiný zdroj, mohou webové stránky tyto odkazy použít k tomu, aby skutečně odeslaly návštěvníky na jiné stránky a zdroje. Žádné jiné vysílací médium to nemůže udělat. Můžete slyšet reklamu v rozhlase nebo v televizi, ale žádné hypertextové odkazy, které vás mohou přenést do firem v těchto reklamách, tak, jak to může snadno udělat webová stránka. Odkazy jsou opravdu úžasný nástroj pro komunikaci a interakci!
Linky, které se nacházejí na webové stránce, často obsahují textový obsah, který přesměruje návštěvníky na jiné stránky stejného webu. Navigace webových stránek je jedním z příkladů textových odkazů v praxi, ale odkazy nemusí být založeny na textu. Můžete také snadno propojit obrázky na vašem webu. Podívejme se na to, jak se to dělá, a pak následují některé případy, kdy byste chtěli použít hypertextové odkazy založené na obrázku.
Jak propojit obrázek
První věc, kterou musíte udělat, je umístit obrázek do dokumentu HTML . Obvyklé použití odkazu založeného na obrázku je grafická karta webu, která je poté propojena zpět na domovskou stránku webu. V níže uvedeném příkladovém kódu je soubor, který používáme, SVG pro naše logo. To je dobrá volba, protože umožní, aby náš obraz měnil různé rozlišení, a to při zachování kvality obrazu a malé celkové velikosti souboru.
Zde je návod, jak byste svůj obrázek vložili do dokumentu HTML:
Okolo obrazového štítku nyní přidáte ukotvení, otevřete kotevní prvek před obrazem a zavřete kotvu po obraze. Toto je podobné, jako byste propojili text, ale namísto toho, abyste zabalili slova, která chcete být spojena s kotevními značkami, zabalíte obrázek. V níže uvedeném příkladu odkazujeme zpět na domovskou stránku našeho webu, která je "index.html".
Při přidávání tohoto kódu HTML do vaší stránky neumisťujte žádné mezery mezi značku kotvy a značku obrázku. Pokud tak učiníte, některé prohlížeče přidávají vedle obrázku malé klíště, které budou vypadat divné.
Logo loga by nyní fungovalo také jako tlačítko na domovské stránce, které je v dnešní době skoro webovým standardem. Všimněte si, že v naší značce HTML nezahrnují žádné vizuální styly, jako je šířka a výška obrázku. Zanecháme tyto vizuální styly CSS a udržujeme čisté oddělení struktury HTML a stylů CSS.
Jakmile se dostanete do CSS, styly, které napíšete na cílové grafické logo, by mohly zahrnovat velikost obrázku, včetně citlivých stylů pro obrázky přátelské pro více zařízení, stejně jako jakékoliv vizuály, které chcete přidat k obrázku / odkazu, jako jsou hranice nebo CSS pokles stíny. Můžete také dát svůj obrázek nebo propojit atribut třídy, pokud potřebujete další "háčky" pro použití s vašimi styly CSS.
Použijte případy pro vazby obrázků
Takže přidání odkazu na obrázek je docela snadné. Jak jsme právě viděli, vše, co musíte udělat, je zabalit obrázek pomocí příslušných kotevních značek. Vaše další otázka by mohla být "kdy byste to skutečně učinili v praxi vedle výše uvedeného příkladu odkazu logo / domovské stránky?"
Zde jsou některé myšlenky:
- Miniaturní obrázky v galerii, která odkazují na větší verze těchto obrázků.
- Obrázky, které se používají samostatně k zobrazení obsahu, jako jsou fotografie produktu pro webové stránky elektronického obchodování.
- Teaserové obrázky, které jsou součástí jiného obsahu, jako blogový článek nebo tisková zpráva, které lákají lidi k tomu, aby si všimli, že obsah jim dává cílovou oblast klepnutím nebo kliknutím si přečte celý článek.
- Obrázky ikon, které se používají jako tlačítka pro připojení ke specifickým funkcím nebo stránkám v rámci webu.
- Odkazy na sociální média, které používají rozpoznatelná loga různých sociálních médií, které jsou pro daný web nebo společnost důležité.
- Obrázky používané jako tlačítka pro určitou funkcionalitu, jako je odeslání formulářů (poznámka o osvědčených postupech - z hlediska výkonu webových stránek, tlačítka s čistě CSS jsou lepší volbou než obrazová tlačítka).
Připomenutí při použití obrázků
Obrázky mohou hrát důležitou roli v úspěchu webových stránek. Jeden z výše uvedených příkladů používá obrázky spolu s jiným obsahem, aby upoutal pozornost na tento obsah a přiměl lidi, aby si ho přečetli.
Při použití snímků musíte mít na paměti, že vyberete správný obrázek podle svých potřeb , včetně správného předmětu, formátu a také aby se ujistil, že všechny obrázky, které používáte na svých webových stránkách, jsou správně optimalizovány pro poskytování webových stránek . To se může zdát jako spousta práce jen přidat obrázky, ale výplata stojí za to! Obrázky opravdu mohou přidat k úspěchu webu tolik.
Neváhejte použít vhodné obrázky na vašem webu a propojte tyto obrázky, pokud je to nutné, abyste přidali nějaký obsah interaktivně k vašemu obsahu, ale zároveň si také pamatujte na tyto nejlepší postupy a používejte tyto grafiky / odkazy správně a zodpovědně při tvorbě webových stránek.