A weboldalak nem hasonlítanak a hozzájuk érkező kommunikációs eszközökhöz. Az egyik legfontosabb dolog, hogy a weboldalakat a korábbi médiaformátumoktól, például a nyomtatás, a rádió és a televíziózás kivételével a " hiperhivatkozás " fogalma jelenti.
A hiperhivatkozások, amelyek általában "linkek" néven ismertek, olyan dinamikussá teszik az internetet. A nyomtatott kiadványtól eltérően, amely hivatkozhat egy másik cikkre vagy más erőforrásra, a weboldalak használhatják ezeket a linkeket, hogy ténylegesen elküldjék a látogatókat a többi oldalra és erőforrásra. Egyetlen más adathordozó sem teheti ezt meg. Hallgathatsz egy hirdetést a rádióban vagy a TV-nézetben, de nincsenek olyan hiperhivatkozások, amelyek az említett hirdetések cégeihez hasonló módon tehetik meg a webhelyet. A linkek valóban egy csodálatos kommunikációs és interakciós eszköz!
Gyakran előfordul, hogy a weboldalon található hivatkozások olyan szöveges tartalom, amely a látogatókat ugyanazon a webhely másik oldalára irányítja. A webhely navigációja a szöveges hivatkozások egyik példája a gyakorlatban, de a hivatkozásoknak nem kell szövegalapúnak lenniük. A weboldalon található képeket is könnyen összekapcsolhatja. Nézzük meg, hogyan történik ez, majd néhány esetben, amikor képalapú hiperlinkeket szeretne használni.
Hogyan csatolhatunk egy képet
Az első dolog, amit meg kell tennie, hogy helyezze el a képet a HTML dokumentumba. A képalapú hivatkozás gyakori használata a webhely logógrafikája, amelyet a webhely honlapjára visszavezetnek. Az alábbi példakódunkban az általunk használt fájl egy logó SVG . Ez egy jó választás, mivel lehetővé teszi, hogy képünk skálázódjon a különböző felbontásokhoz, miközben fenntartja a képminőséget és a kis átfogó fájlméretet.
Íme, hogyan helyezi el a képet a HTML dokumentumba:
A képcímke körül most hozzáadja a horgonyköteget, megnyitja a horgony elemet a kép előtt, és bezárja a horgonyt a kép után. Ez hasonlít arra, hogy hogyan kapcsolja be a szöveget, csak anélkül, hogy a szavakat szeretné összekapcsolni a horgonycímkekkel, elfedje a képet. Az alábbi példában visszavezetjük webhelyünk honlapjára, amely "index.html".
Ha ezt a HTML-kódot hozzá szeretné adni az oldalához, ne tegyen szóközt a horgonycímke és a képcímke között. Ha igen, néhány böngésző kis képeket ad hozzá a kép mellett, ami furcsának tűnik.
A logó képe ma is a kezdőlap gombjaként működne, ami napjainkban eléggé webes szabvány. Vegye figyelembe, hogy nem tartalmaz vizuális stílusokat, például a kép szélességét és magasságát a HTML-jelölésünkben. Ezeket a vizuális stílusokat hagyjuk CSS-re, és fenntartjuk a HTML struktúra és a CSS stílusok tiszta szétválasztását.
Miután eljutott a CSS-hez, a logikai grafikához célzott stílusok közé tartozhat a kép méretezése, beleértve a választható stílusokat a több eszközbarát képekhez, valamint a képhez / linkhez hozzáadni kívánt képeket, például a határokat vagy a CSS-t csepp árnyékokat. Adhatja meg a képét, vagy összekapcsolhatja az osztálytulajdonságot, ha további "horogokra" lenne szüksége a CSS stílusok használatához.
Használjon ügyeket Image Linkekhez
Tehát egy kép link hozzáadása elég könnyű. Amint azt láttuk, mindössze annyit kell tennie, hogy a megfelelő horgonycímkékkel befedje a képet. A következő kérdésed lehet, hogy "mikor valósulna meg a gyakorlatban a fent említett logó / honlap link példán túl?"
Íme néhány gondolat:
- A galéria miniatűrképei, amelyek a képek nagyobb verzióihoz kapcsolódnak.
- Olyan képek, amelyeket önmagában használnak a tartalom megjelenítéséhez, például a termékfotókhoz egy e-kereskedelmi weboldalon.
- A más tartalmú, például egy blog cikkhez vagy sajtóközleményhez hasonló, lenyűgöző képek, amelyek arra ösztönzik az embereket, hogy észleljék, hogy a tartalom olyan célterületet biztosít számukra, amely megérinti vagy rákattint a teljes cikk olvasására.
- Olyan ikonképek, amelyeket gombként használnak a webhely bizonyos funkcióinak vagy oldalainak összekapcsolására.
- Olyan közösségi médiakapcsolatok, amelyek az adott webhely vagy vállalat számára fontos különféle közösségi médiaoldalak felismerhető logóját használják.
- Az egyes funkciókhoz gombként használt képek, például a formanyomtatványok (legjobb gyakorlatok - a weboldal teljesítményének szempontja szerint - a CSS-t használó gombok jobb választás, mint a képgombok).
Emlékeztető a képek használata során
A képek fontos szerepet játszhatnak a webhely sikerében. Az előzőekben említett példák egyike a más tartalmak melletti képek használatával felhívja a figyelmet e tartalomra, és megkapja az embereket az olvasásra.
A képek használata során ügyelni kell arra, hogy a megfelelő képet választsa az Ön igényeinek , beleértve a helyes képtárgyat, a formátumot, és győződjön meg róla, hogy a webhelyén használt képek megfelelően vannak optimalizálva a weboldal kézbesítéséhez . Ez nagyon sok munkának tűnhet, csak képeket adhat hozzá, de a kifizetés megéri! A képek tényleg annyira hozzá tudnak adni egy webhely sikeréhez.
Ne habozzon használni a megfelelő képeket a webhelyén, és szükség esetén kapcsolja össze ezeket a képeket a tartalom tartalmának interaktív hozzáadásával, de vegye figyelembe ezeket a képminőségi gyakorlatokat, és használja ezeket a grafikákat / linkeket helyesen és felelősen a webes tervezési munkájában.