Веб локације се разликују од било којег комуникационог медија који је дошао пре њих. Једна од главних ствари које су поставиле веб странице изван претходних медијских формата попут штампања, радија и чак телевизије представља концепт " хиперлинк ".
Хиперлинкови, такође познати под називом "линкови", чине Веб тако динамичан. За разлику од штампане публикације која може да се односи на други чланак или други ресурс, веб локације могу користити ове везе да заправо посаљу посетиоце на те друге странице и ресурсе. Ниједан други емитовани медиј не може то да уради. Можете чути оглас на радију или гледати на ТВ-у, али нема никаквих хиперлинкова које могу да вас одведу до компанија у тим огласима онако како то сајт може лако да уради. Линкови су заиста невероватна комуникација и алат за интеракцију!
Често, линкови који се налазе на веб локацији су текстуални садржаји који усмеравају посјетитеље на друге странице истог сајта. Навигација сајта је један пример текстуалних веза у пракси, али линкови не морају бити засновани на тексту. Такође можете лако повезати слике на вашој веб страници. Погледајмо како је то учињено, након чега следи неколико случајева где бисте желели да користите хиперлинке засноване на сликама.
Како повезати слику
Прва ствар коју ћете морати да урадите је да поставите саму слику у свој ХТМЛ документ. Честа употреба везе засноване на слици је графичка карта сајта, која је затим повезана са почетном страницом сајта. У нашем примеру кода испод, фајл који користимо је СВГ за наш логотип. Ово је добар избор јер ће омогућити да наша слика скали за различите резолуције, све док одржава квалитет слике и малу укупну величину датотеке.
Ево како бисте поставили слику у ХТМЛ документ:
<имг срц = "лого.свг" алт = "Логотип компаније">Око ознаке слике, сада бисте додали сидрени линк, отварајући сидрени елемент прије слике и затварање сидра након слике. Ово је слично оном како бисте повезали текст, само умјесто обраћања речи које желите да буду веза с сидреним ознакама, пребаците слику. У нашем примеру доље, повезујемо се на почетну страницу нашег сајта, што је "индек.хтмл".
<а хреф="индек.хтмл"> <имг срц = "лого.свг" алт = "Логотип компаније">Када додате овај ХТМЛ на своју страницу, немојте стављати никакве размаке између ознаке сидра и ознаке слике. Ако то учините, неки прегледачи ће додати мало клика поред слике, што ће изгледати чудно.
Ознака логотипа сада би такође деловала као дугме за почетну страницу, што је данас доста веб стандард. Обратите пажњу да у нашем ХТМЛ ознаку не укључујемо визуелне стилове, као што су ширина и висина слике. Ови визуелни стилови ћемо оставити ЦСС-у и одржати чисту сепарацију ХТМЛ структуре и ЦСС стилова.
Једном када дођете до ЦСС-а, стилови које пишете да бисте циљали на ову графичку графику могу укључивати величину слике, укључујући одговарајуће стилове за пријатељске слике са више уређаја, као и све визуелне приказе које желите додати на слику / линк, као што су границе или ЦСС падне сенке. Такође можете дати слику или повезати атрибу класе ако су вам потребне додатне "куке" које треба користити са вашим ЦСС стиловима.
Користите случајеве за линкове слика
Дакле, додавање везе са сликама је прилично лако. Као што смо управо видели, све што треба учинити је да обмотате слику одговарајућим ознакама сидара. Ваше следеће питање може бити "када бисте заправо то учинили у пракси осим горе наведеног примера линка / почетне странице?"
Ево неких мисли:
- Тхумбнаил слике у галерији која повезују на веће верзије тих слика.
- Слике које се користе само за представљање садржаја, као што су фотографије производа за веб локацију е-трговине.
- Теасер слике које су део другог садржаја, као чланак о блогу или саопштење за штампу, које подстичу људе да примете да тај садржај даје циљном подручју да додирне или кликне за читање читавог чланка.
- Иконе слике које се користе као дугмад за повезивање са одређеним функционалностима или страницама унутар сајта.
- Линкови друштвених мрежа који користе препознатљиве логотипе различитих друштвених медија који су важни за ту локацију или компанију.
- Слике које се користе као дугмад за одређене функционалности, као што су поднесци образаца (примјер добре праксе - из перспективе перформанси веб странице, тастери створени искључиво ЦСС су бољи избор од дугмади за слике).
Подсетник приликом коришћења слика
Слике могу играти важну улогу у успјеху веб странице. Један од примјера датих горе је поменуто кориштењем слика уз други садржај како би привукли пажњу на тај садржај и довео људи да га прочитају.
Када користите слике, морате бити свесни избора праве слике за своје потребе , то укључује тачну тему предмета, формат, а такође и осигурати да све слике које користите на вашој веб локацији исправно оптимизујете за испоруку веб страница . Ово може изгледати као пуно посла само за додавање слика, али исплату је вредно тога! Слике стварно могу много додати успеху сајта.
Не оклевајте да користите одговарајуће слике на вашој веб локацији и повежите те слике када је потребно да бисте интерактивно додали свој садржај, али и обратите пажњу на ове најбоље праксе и правилно и одговорно користите ове графике / линкове у свом веб дизајнерском раду.