Веб-страниците се за разлика од кој било медиум за комуникација што се појави пред нив. Една од главните работи што ги поставуваат веб-сајтовите за разлика од претходните медиумски формати како печатење, радио, па дури и телевизија е концептот на " хиперврска ".
Хиперлинкови, исто така познати како "линкови", се она што го прават Веб толку динамичен. За разлика од печатените публикации кои можат да се повикуваат на друг напис или друг ресурс, веб-сајтовите можат да ги користат овие линкови за да испратат посетители на тие други страници и ресурси. Ниту еден друг радиодифузен медиум не може да го стори тоа. Можете да слушнете реклама на радио или на гледање на телевизија, но нема хиперлинкови што може да ве однесе до компаниите во тие реклами на начинот на кој веб-сајтот може лесно да го стори. Линкови навистина се неверојатна комуникација и интеракција алатка!
Честопати, врските што се наоѓаат на веб-страница се содржина на текст што ги насочува посетителите кон други страници од истата страница. Навигацијата на веб-страница е еден пример за текстуални линкови во пракса, но врските не треба да бидат базирани на текст. Можете исто така лесно да ги поврзете сликите на вашата веб-страница. Ајде да погледнеме како се прави ова, по што следат некои случаи каде што би сакале да користите хиперврски базирани на слики.
Како да поврзам слика
Првото нешто што ќе треба да направите е да ја поставите самата слика во вашиот HTML документ. Вообичаена употреба на врската врз основа на сликата е логото на логото на страницата, кое потоа се поврзува со почетната страница на страницата. Во нашиот пример код подолу, датотеката што ја користиме е SVG за нашето лого. Ова е добар избор, бидејќи тоа ќе овозможи нашиот имиџ да скала за различни резолуции, сето тоа додека се одржува квалитетот на сликата и малата целокупната големина на датотеката.
Еве како ќе ја поставите вашата слика во HTML-документот:
Околу сликата ознака, сега ќе додадете сидро врската, отворање на сидро елемент пред сликата и затворање на сидро по сликата. Ова е слично на тоа како ќе го поврзете текстот, само наместо да ги преклопувате зборовите што сакате да ги поврзете со ознаките за сидро, ја заокружувате сликата. Во нашиот пример подолу, ние се поврзуваме со почетната страна на нашата страница, која е "index.html".
Кога го додавате овој HTML на вашата страница, не ставајте никакви празни места помеѓу ознаката за прицврстување и сликата. Ако го направите, некои прелистувачи ќе додадат малку крлежи покрај сликата, што ќе изгледа чудно.
Сликата на логото сега исто така ќе дејствува како копче за почетна страна, што е доста стандарден веб-сајт денес. Забележете дека ние не вклучуваме визуелни стилови, како што се ширината и висината на сликата, во нашата HTML-ознака. Ние ќе ги оставиме овие визуелни стилови во CSS и ќе одржиме чиста поделба на HTML структурата и стилови на CSS.
Откако ќе стигнете до CSS, стиловите што ги пишувате за да го напишете ова лого графичко би можеле да вклучат големината на сликата, вклучувајќи и одзив стилови за мулти-уред пријателски слики, како и било визуелни ви се допаѓа да додадете на сликата / линкот, како граници или CSS капка сенки. Вие исто така може да му дадете слика или да поврзете атрибут на класа ако ви се потребни дополнителни "куки" за да ги користите со вашите стилови на CSS.
Користете случаи за линкови за слики
Значи, додавањето слика за линкот е прилично лесно. Како што видовме, сè што треба да направите е да ја превртите сликата со соодветните ознаки за прицврстување. Вашето следно прашање може да биде "кога всушност би го правеле тоа во пракса, покрај погоре споменатиот пример за врската логото / почетна страница?"
Еве неколку мисли:
- Слики со слики во галеријата што се поврзуваат со поголеми верзии на тие слики.
- Слики кои се користат само за да претставуваат содржина, како слики на производи за веб-страница за е-трговија.
- Тајмер слики кои се дел од други содржини, како што е напис на блог или соопштение за печатот, кои ги примаат луѓето да забележат дека содржината им дава цел област за да допрете или да кликнете за да го прочитате целиот напис.
- Икона слики кои се користат како копчиња за да се поврзете со специфични функционалности или страници во рамките на страницата.
- Линкови на социјалните медиуми кои ги користат препознатливите логоа на разни веб-сајтови на социјалните медиуми кои се важни за тоа место или компанија.
- Сликите кои се користат како копчиња за одредени функционалности, како што се поднесоци од формуларот (забелешка за најдобрите практики - од перспектива за перформанси на веб-страници, копчињата чисто со CSS се подобар избор од копчињата за слика).
Потсетник при користење на слики
Сликите можат да играат важна улога во успехот на веб-страницата. Еден од примерите дадени погоре споменати користејќи слики заедно со други содржини за да привлече внимание кон таа содржина и да ги натера луѓето да ја прочитаат.
Кога користите слики, мора да бидете свесни за изборот на вистинската слика за вашите потреби , ова вклучува правилна слика за содржината на сликата, формат и исто така да бидете сигурни дека сите слики што ги користите на вашиот веб-сајт се правилно оптимизирани за испорака на веб-страници . Ова може да изгледа како многу работа само за да додадете слики, но успехот е достоен за тоа! Сликите навистина можат да додадат толку многу за успехот на сајтот.
Немојте да се колебате да користите соодветни слики на вашата страница и да ги поврзете тие слики кога е потребно за да додадете некои интерактивно кон вашата содржина, но исто така бидете свесни за најдобрите практики на сликата и правилно и одговорно да ги користите овие графики / линкови во вашата веб-дизајн работа.