Veebilehed erinevad kõigist suhtlusvahenditest, mis olid nende ees. Üks peamistest teemadest, mis seavad veebisaidid peale varasemate meediumivormingute, nagu prindi, raadio ja isegi televisioon, on " hüperlinki " mõiste.
Hüperlingid, mida tavaliselt nimetatakse lihtsalt linkideks, teevad veebis nii dünaamilise. Erinevalt trükiväljaandest, mis võib viidata mõnele teisele artiklile või muule ressursile, võivad veebisaidid kasutada neid linke, et tegelikult saata külastajaid nendele teistele lehtedele ja ressurssidele. Ükski teine saatekeskkond ei saa seda teha. Te saate kuulda reklaami raadios või televiisorist vaadates, kuid hüperlinke pole võimalik nende reklaamide ettevõtetele tuua, nii et veebisait saab hõlpsalt teha. Lingid on tõesti hämmastav side- ja suhtlusvahend!
Veebisaidil leiduvaid linke on tihti tekstisisene sisu, mis juhib külastajaid sama saidi teistele lehtedele. Veebisaidi navigeerimine on üks näide tekstilinkidest praktikas, kuid lingid ei pea olema tekstipõhised. Saate hõlpsalt ka pilte oma veebisaidil linkida. Vaatame, kuidas seda teha, ja seejärel mõned juhud, kus soovite kasutada pildipõhiseid hüperlinke.
Kuidas pilti ühendada
Esimene asi, mida peate tegema, on asetada pilt end HTML- dokumendini. Kujutisel põhineva lingi levinum kasutamine on saidi logo graafika, mis seejärel linkitakse tagasi saidi avalehele. Allpool toodud näidete koodi puhul kasutatav fail on meie logo jaoks SVG . See on hea valik, sest see võimaldab meie pildil erinevat resolutsiooni skaalat, säilitades samal ajal pildikvaliteedi ja väikese üldise faili suuruse.
Siin on, kuidas paned oma pildi HTML-dokumendisse:
Pildi sildi ümbruses lisage nüüd ankurühendus, ankur elementi avatakse enne pilti ja ankur kinni pärast pildi sulgemist. See on sarnane sellele, kuidas te linkiksite teksti, vaid selle asemel, et ümbritseda sõnu, mida soovite ankurmärgistega linkida, mähitakse pilt. Allpool toodud näites linkime tagasi meie saidi avalehele, mis on "index.html".
Kui lisate oma lehele selle HTML-i, ärge asetage ankrumärgendi ja pildi märgendi vahel tühikuid. Kui teete, lisab mõni brauser pildi kõrval veidi puugid, mis näeb välja paaritu.
Logo pilt toimiks nüüd ka kodulehe nupuna, mis on tänapäeval üsna veebistandard. Pange tähele, et me ei sisalda HTML-i märgistuses ühtki visuaalset stiili, näiteks pildi laiust ja kõrgust. Me jätame need visuaalsed stiilid CSS-i ja säilitame HTML-struktuuri ja CSS-i stiili puhta eraldamise.
Kui jõuate CSS-i juurde, võivad selle logo graafika sihiks kirjutatavad stiilid sisaldada pildi suurust, sh multimeedia sõbralike piltide reageerimisstiilid , samuti pilte / lingile lisatavaid visuaale, nagu näiteks piirid või CSS lange varjud. Samuti võite oma pildi anda või klassi atribuuti linkida, kui sooviksite oma CSS-i stiiliga kasutamiseks kasutada täiendavaid konksusi.
Kasutage piltide lingid
Nii et pildi linki lisamine on üsna lihtne. Nagu just nägime, on kõik, mida peate tegema, pakkima pilti asjakohaste ankurmärgistega. Järgmine küsimus võib olla "millal teeksite seda praktikas lisaks eelpoolnimetatud logo / avalehe linkide näidetele?"
Siin on mõned mõtted:
- Galeriis olevad pisipildid, mis viitavad piltide suurematele versioonidele.
- Pildid, mida kasutatakse ainuüksi sisu esindamiseks, näiteks e-kaubanduse veebisaidi toodete fotod.
- Teaserpildid, mis on osa muudest sisust, nagu blogiartikkel või pressiteade, mis ahvatavad inimesi märkama, et sisu annab neile eesmärgipiirkonna, et koputada või klõpsata lugeda kogu artiklit.
- Ikooni kujutised, mida kasutatakse teatud funktsioonide või saidi lehtede kasutamiseks nuppudega.
- Sotsiaalse meedia lingid, mis kasutavad selle saidi või ettevõtte jaoks oluliste erinevate sotsiaalse meedia saitide äratuntavaid logosid.
- Teatud funktsionaalsete nuppude jaoks kasutatavad pildid, nagu vormi esitlused (parimate tavade märkus - veebisaidi toimivuse seisukohalt on CSS-i abil disainitud nupud parem valik kui pildi nupud).
Meeldetuletus piltide kasutamisel
Pildid võivad veebisaidi edukusel olla olulised. Üks ülaltoodud näidetest kasutab pilte koos muu sisuga, et juhtida tähelepanu sellele sisule ja lasta inimestel seda lugeda.
Piltide kasutamisel peate silmas pidama oma vajaduste jaoks sobiva pildi valimist , see hõlmab ka õiget kujutise eset, formaati ja tagama, et kõik teie veebisaidil kasutatavad pildid oleks veebisaidi edastamiseks korralikult optimeeritud . See võib tunduda palju tööd lihtsalt piltide lisamiseks, kuid maksmine on seda väärt! Kujutised tõesti võivad saidi edukusele lisada nii palju.
Ärge kartke oma veebisaidil sobivaid pilte kasutada ja nende pilte siduda, kui soovite, et sisu interaktiivselt lisada, kuid pidage meeles ka neid parimaid tavasid ja kasutage neid graafikat / linke õigesti ja vastutustundlikult oma veebidisaini töös.