Ang mga website ay hindi katulad ng anumang daluyan ng komunikasyon na dumating sa harap nila. Isa sa mga pangunahing bagay na nagtatakda ng mga website bukod sa nakaraang mga format ng media tulad ng print, radyo, at kahit telebisyon ay ang konsepto ng " hyperlink ".
Ang mga hyperlink, karaniwan din na kilala bilang "mga link", ay kung ano ang nakapagpapalakas sa Web. Hindi tulad ng isang naka-print na publication na maaaring mag-reference ng isa pang artikulo o iba pang mapagkukunan, maaaring gamitin ng mga website ang mga link na ito upang magpadala ng mga bisita sa mga iba pang mga pahina at mga mapagkukunan. Walang ibang medium ng broadcast ang magagawa ito. Maaari mong marinig ang isang ad sa radyo o pagtingin sa TV, ngunit walang mga hyperlink na maaaring magdadala sa iyo sa mga kumpanya sa mga ad na iyon sa paraan na madaling gawin ng website. Ang mga link ay talagang isang kamangha-manghang mga tool sa komunikasyon at pakikipag-ugnayan!
Kadalasan, ang mga link na matatagpuan sa isang website ay nilalaman ng teksto na nagtuturo sa mga bisita sa iba pang mga pahina ng parehong site na iyon. Ang nabigasyon ng isang website ay isang halimbawa ng mga link ng teksto sa pagsasanay ngunit ang mga link ay hindi kailangang maging text-based. Maaari mo ring madaling i-link ang mga larawan sa iyong website. Tingnan natin kung paano ito ginagawa, na sinusundan ng ilang mga pagkakataon kung saan nais mong gamitin ang mga hyperlink na batay sa imahe.
Paano Mag-link ng isang Imahe
Ang unang bagay na kailangan mong gawin ay ilagay ang imahen mismo sa iyong HTML na dokumento. Ang karaniwang paggamit ng isang link na nakabatay sa imahe ay graphic ng logo ng site na pagkatapos ay naka-link pabalik sa homepage ng site. Sa aming code ng halimbawa sa ibaba, ang file na ginagamit namin ay isang SVG para sa aming logo. Ito ay isang mahusay na pagpipilian dahil ito ay magpapahintulot sa aming mga imahe upang masukat para sa iba't ibang mga resolution, habang ang pagpapanatili ng kalidad ng imahe at isang maliit na pangkalahatang sukat ng file.
Narito kung paano mo ilalagay ang iyong imahe sa HTML na dokumento:
Sa paligid ng tag ng imahe, idaragdag mo na ngayon ang link ng anchor, binubuksan ang elementong anchor bago ang imahe at isinasara ang anchor pagkatapos ng imahe. Ito ay katulad ng kung paano mo i-link ang teksto, sa halip lamang sa pagbabalot ng mga salitang nais mong maging isang link sa mga tag na anchor, balutin mo ang imahe. Sa aming halimbawa sa ibaba, nagli-link kami pabalik sa homepage ng aming site, na kung saan ay "index.html".
Kapag idinadagdag ang HTML na ito sa iyong pahina, huwag maglagay ng anumang mga puwang sa pagitan ng tag ng anchor at tag ng imahe. Kung gagawin mo, ang ilang mga browser ay magdagdag ng mga maliit na marka sa tabi ng larawan, na magiging kakaiba.
Ang imahe ng logo ay ngayon din kumilos bilang isang pindutan ng homepage, na kung saan ay halos isang web standard na mga araw na ito. Pansinin na hindi namin kasama ang anumang mga visual na estilo, tulad ng lapad at taas ng imahe, sa aming HTML markup. Iiwanan namin ang mga visual na estilo sa CSS at mapanatili ang isang malinis na paghihiwalay ng HTML na istraktura at mga estilo ng CSS.
Sa sandaling nakakuha ka ng CSS, ang mga estilo na isusulat mo upang ma-target ang graphic na logo na ito ay maaaring magsama ng pagpapalaki ng imahe, kabilang ang mga tumutugon na mga estilo para sa mga mahuhusay na larawan ng multi-device pati na rin ang anumang mga visual na gusto mong idagdag sa larawan / link, tulad ng mga hangganan o CSS i-drop ang mga anino. Maaari mo ring ibigay ang iyong larawan o i-link ang isang katangian ng klase kung kailangan mo ng karagdagang mga "kawit" upang gamitin sa iyong mga estilo ng CSS.
Gumamit ng Mga Kaso para sa Mga Link ng Imahe
Kaya ang pagdaragdag ng link ng imahe ay medyo madali. Tulad ng nakita na lang namin, ang dapat mong gawin ay i-wrap ang larawan gamit ang mga angkop na tag ng anchor. Ang iyong susunod na tanong ay maaaring "kailan mo talaga gawin ito sa pagsasagawa bukod sa nabanggit na halimbawa ng link sa logo / homepage?"
Narito ang ilang mga saloobin:
- Mga larawan ng thumbnail sa isang gallery na naka-link sa mas malaking bersyon ng mga imaheng iyon.
- Mga imahe na ginagamit nang mag-isa upang kumatawan sa nilalaman, tulad ng mga larawan ng produkto para sa isang website ng e-commerce.
- Ang mga larawan ng teaser na bahagi ng iba pang nilalaman, tulad ng isang blog na artikulo o pindutin ang release, na hinihikayat ang mga tao na mapansin na ang nilalaman ay nagbibigay sa kanila ng isang target na lugar upang i-tap o i-click upang basahin ang buong artikulo.
- Mga imaheng icon na ginamit bilang mga pindutan upang kumonekta sa partikular na pag-andar o mga pahina sa loob ng site.
- Mga link ng social media na gumagamit ng mga nakikilalang mga logo ng iba't ibang mga site ng social media na mahalaga sa site o kumpanya na iyon.
- Ang mga imahe na ginamit bilang mga pindutan para sa ilang mga pag-andar, tulad ng mga pagsusumite ng form (pinakamahusay na tala ng kasanayan - mula sa isang perspektibo sa pagganap ng website, ang mga pindutan na pansamantalang may CSS ay isang mas mahusay na pagpipilian kaysa sa mga pindutan ng imahe).
Isang Paalala Kapag Paggamit ng Mga Larawan
Ang mga imahe ay maaaring maglaro ng mahalagang papel sa tagumpay ng isang website. Isa sa mga halimbawang ibinigay sa itaas ay binanggit gamit ang mga larawan na kasabay ng iba pang nilalaman upang maakit ang atensiyon sa nilalaman na iyon at makakakuha ng mga tao na basahin ito.
Kapag gumagamit ng mga larawan, dapat mong isiping piliin ang tamang imahe para sa iyong mga pangangailangan , kabilang dito ang tamang paksa ng larawan, format, at tinitiyak din na ang anumang mga larawan na iyong ginagamit sa iyong website ay maayos na na-optimize para sa paghahatid ng website . Ito ay maaaring mukhang tulad ng isang pulutong ng trabaho lamang upang magdagdag ng mga imahe, ngunit ang kabayaran ay nagkakahalaga ito! Ang mga imahe ay talagang maaaring magdagdag ng kaya magkano sa tagumpay ng isang site.
Huwag mag-atubiling gumamit ng angkop na mga imahe sa iyong site, at i-link ang mga larawang iyon kapag kinakailangan upang magdagdag ng ilang interactively sa iyong nilalaman, ngunit maging maingat sa mga larawang ito sa pinakamahusay na kasanayan at gamitin ang mga graphic / link na ito nang tama at responsable sa iyong disenyo ng web disenyo.