Webové stránky sú na rozdiel od akéhokoľvek komunikačného média, ktoré im predchádzalo. Jednou z hlavných vecí, ktoré vytvárajú webové stránky okrem predchádzajúcich formátov médií, ako je tlač, rozhlas a dokonca aj televízia, je pojem " hypertextový odkaz ".
Hyperlinky, tiež bežne známe ako "odkazy", sú to, čo robí web tak dynamický. Na rozdiel od tlačenej publikácie, ktorá môže odkazovať na iný článok alebo iný zdroj, webové stránky môžu tieto odkazy použiť na skutočné odosielanie návštevníkov na iné stránky a zdroje. Žiadne iné vysielacie médium to nedokáže. Môžete počuť reklamu v rozhlase alebo prezerať v televízii, ale nie sú žiadne hypertextové odkazy, ktoré vás môžu priviesť k spoločnostiam v týchto reklamách tak, ako môžu webové stránky ľahko robiť. Odkazy naozaj predstavujú úžasný nástroj na komunikáciu a interakciu!
Odkazy, ktoré sa nachádzajú na webových stránkach, často obsahujú textový obsah, ktorý nasmeruje návštevníkov na iné stránky toho istého webu. Navigácia webových stránok je jedným príkladom textových odkazov v praxi, ale odkazy nemusia byť založené na texte. Môžete tiež ľahko prepojiť obrázky na vašich webových stránkach. Poďme sa pozrieť na to, ako sa to robí, za ktorými nasledujú niektoré prípady, kedy by ste chceli použiť hypertextové odkazy založené na obrázku.
Ako prepojiť obrázok
Prvá vec, ktorú budete musieť urobiť, je umiestniť obrázok do dokumentu HTML . Bežné používanie odkazu na základe obrázka je grafika loga stránky, ktorá je potom prepojená späť na domovskú stránku webu. V nižšie uvedenom príklade kódu je súbor, ktorý používame, SVG pre naše logo. Je to dobrá voľba, pretože umožní, aby sa náš obraz prispôsobil rôznym rozlíšeniam, pričom sa zachovala kvalita obrazu a malá celková veľkosť súboru.
Tu je návod, ako umiestniť svoj obrázok do dokumentu HTML:
Okolo značky obrázka teraz pridáte ukotvenie, otvoríte prvok kotvy pred záberom a zatvoríte kotvu za záberom. Toto je podobné tomu, ako by ste prepojili text, ale namiesto toho, aby ste obalili slová, ktoré chcete byť spojením s tagmi kotvy, obtočte obrázok. V našom príklade nižšie odkazujeme na domovskú stránku našej stránky, ktorá je "index.html".
Pri pridávaní tohto HTML do vašej stránky neumiestňujte žiadne medzery medzi značku kotvy a značku obrázka. Ak tak urobíte, niektoré prehliadače pridajú k obrázku malé klíčky, ktoré budú vyzerať zvláštne.
Obraz logo by teraz fungoval aj ako tlačidlo domovskej stránky, ktoré je v dnešnej dobe webovým štandardom. Všimnite si, že v našej značke HTML nezahŕňame žiadne vizuálne štýly, ako napríklad šírku a výšku obrázka. Ponecháme tieto vizuálne štýly na CSS a udržiavame čisté oddelenie štruktúry HTML a štýlov CSS.
Akonáhle sa dostanete do CSS, štýly, ktoré napíšete na zacielenie na túto grafiku loga, môžu zahŕňať veľkosť obrázku vrátane odpovedajúcich štýlov pre obrázky, ktoré sú priaznivé pre viaceré zariadenia, ako aj akékoľvek vizuály, ktoré chcete pridať k obrázku / odkazu, napríklad hranice alebo CSS stíny. Môžete tiež dať obrázok alebo prepojiť atribút triedy, ak potrebujete ďalšie "háčiky" na použitie s vašimi CSS štýlmi.
Používajte prípady pre obrazové prepojenia
Takže pridanie odkazu na obrázok je veľmi jednoduché. Ako sme práve videli, všetko, čo musíte urobiť, je zabaliť obrázok pomocou vhodných značiek kotvy. Vaša ďalšia otázka môže byť "kedy by ste to skutočne urobili v praxi okrem vyššie uvedeného loga / domovského odkazu príkladu?"
Tu je niekoľko myšlienok:
- Miniatúry v galérii, ktoré odkazujú na väčšie verzie týchto obrázkov.
- Obrázky, ktoré sa používajú samostatne na zobrazovanie obsahu, ako napríklad fotografie produktov pre webové stránky elektronického obchodovania.
- Ukážky obrázkov, ktoré sú súčasťou iného obsahu, ako napríklad blogový článok alebo tlačová správa, ktoré lákajú ľudí k tomu, aby si všimli, že obsah im dáva cieľovú oblasť, na ktorú sa dá kliknúť alebo kliknutím prečítať celý článok.
- Ikonové obrázky, ktoré sa používajú ako tlačidlá na pripojenie k špecifickým funkciám alebo stránkam v rámci lokality.
- Odkazy na sociálne médiá, ktoré používajú rozpoznateľné logá rôznych sociálnych médií, ktoré sú pre danú lokalitu alebo spoločnosť dôležité.
- Obrázky používané ako tlačidlá pre určité funkcie, ako napríklad odosielanie formulárov (poznámka o osvedčených postupoch - z hľadiska výkonnosti webových stránok, tlačidlá štylizované čisto pomocou CSS sú lepšou voľbou ako tlačidlá obrázkov).
Pripomienka pri používaní obrázkov
Obrázky môžu hrať dôležitú úlohu v úspechu webových stránok. Jeden z vyššie uvedených príkladov používa obrazy spolu s iným obsahom, aby upriamil pozornosť na tento obsah a prinútil ľudí, aby si ho prečítali.
Pri používaní obrázkov musíte mať na pamäti, aby ste si vybrali ten správny obraz podľa svojich potrieb , vrátane správneho predmetu, formátu obrázka a tiež aby ste sa uistili, že všetky obrázky, ktoré používate na svojich webových stránkach, sú správne optimalizované pre doručovanie webových stránok . To sa môže zdať ako veľa práce len pridať obrázky, ale výplata stojí za to! Obrázky naozaj môžu prispieť k úspechu stránky.
Neváhajte používať vhodné obrázky na svojich stránkach a prepojte tieto obrázky, ak je to potrebné, aby ste pridali interaktivitu k vášmu obsahu, ale zároveň si uvedomte najlepšie postupy a používajte tieto grafické / odkazy správne a zodpovedne vo svojej práci s webovým dizajnom.