വെബ്സൈറ്റുകൾ അവർക്ക് മുന്നിൽ വരുന്ന ആശയവിനിമയ മാധ്യമത്തിൽ നിന്നും വ്യത്യസ്തമാണ്. പ്രിന്റ്, റേഡിയോ, ടെലിവിഷൻ തുടങ്ങിയ മുമ്പത്തെ മീഡിയ ഫോർമാറ്റുകളിൽ നിന്നും വ്യത്യസ്തമായി വെബ് സൈറ്റുകൾ നിർമ്മിക്കുന്ന പ്രധാന കാര്യങ്ങളിൽ ഒന്നാണ് " ഹൈപ്പർലിങ്ക് " എന്ന ആശയം.
ഹൈപ്പർലിങ്കുകൾ സാധാരണയായി "ലിങ്കുകൾ" എന്ന് അറിയപ്പെടുന്നു, വെബ് വളരെ ചലനാത്മകമാക്കുന്നതിന് എന്താണ്. മറ്റൊരു ലേഖനം അല്ലെങ്കിൽ മറ്റ് വിഭവത്തെ പരാമർശിക്കാൻ കഴിയുന്ന ഒരു അച്ചടിച്ച പ്രസിദ്ധീകരണത്തിൽ നിന്നും വിഭിന്നമായി, ആ പേജുകൾ സന്ദർശകരെ മറ്റു പേജുകളിലേക്കും വിഭവങ്ങളിലേക്കും അയയ്ക്കുന്നതിനായി ഈ ലിങ്കുകൾ ഉപയോഗിക്കാൻ കഴിയും. മറ്റ് പ്രക്ഷേപണ മാധ്യമം ഇത് ചെയ്യാൻ കഴിയില്ല. നിങ്ങൾക്ക് റേഡിയോയിൽ ഒരു പരസ്യം കേൾക്കാനോ ടി.വിയിൽ കാണാനോ കഴിയും, എന്നാൽ ആ വെബ്സൈറ്റുകളിൽ എളുപ്പത്തിൽ ചെയ്യാൻ കഴിയുന്ന വിധത്തിൽ നിങ്ങളെ കമ്പനികളിലേക്ക് കൊണ്ടുപോകാൻ കഴിയുന്ന ഹൈപ്പർലിങ്കുകൾ ഒന്നുമില്ല. അതിശയകരമായ ആശയവിനിമയങ്ങളും പരസ്പര വിരുദ്ധമായ ഉപകരണങ്ങളുമാണ് ലിങ്കുകൾ!
മിക്കപ്പോഴും, ഒരു വെബ്സൈറ്റിൽ കാണുന്ന ലിങ്കുകൾ അതേ സൈറ്റിന്റെ മറ്റ് പേജുകളിലേക്ക് സന്ദർശകരെ നയിക്കുന്ന പാഠ ഉള്ളടക്കമാണ്. ഒരു വെബ്സൈറ്റിന്റെ നാവിഗേഷൻ പ്രാവശ്യം ടെക്സ്റ്റ് ലിങ്കുകളുടെ ഒരു ഉദാഹരണം, എന്നാൽ ലിങ്കുകൾ ടെക്സ്റ്റ് അടിസ്ഥാനമാക്കിയുള്ളതായിരിക്കണമെന്നില്ല. നിങ്ങൾക്ക് എളുപ്പത്തിൽ നിങ്ങളുടെ വെബ്സൈറ്റിൽ ഇമേജുകൾ ലിങ്കുചെയ്യാൻ കഴിയും. ഇത് എങ്ങനെയാണ് ചെയ്യുന്നത് എന്ന് നോക്കാം, അവിടെ ഇമേജിൽ അധിഷ്ഠിത ഹൈപ്പർലിങ്കുകൾ ഉപയോഗിക്കാനാഗ്രഹിക്കുന്ന ചില സന്ദർഭങ്ങൾ കാണാം.
ഒരു ചിത്രം എങ്ങനെ ബന്ധിപ്പിക്കാം
നിങ്ങൾ ആദ്യം ചെയ്യേണ്ടത് നിങ്ങളുടെ HTML പ്രമാണത്തിലെ ഇമേജ് സ്ഥാപിക്കുന്നതിനാണ്. ഒരു ഇമേജ് അടിസ്ഥാനമാക്കിയുള്ള ലിങ്കിന്റെ പൊതുവായ ഉപയോഗം സൈറ്റിന്റെ ലോഗോ ഗ്രാഫിക് ആണ്, അത് സൈറ്റിന്റെ ഹോംപേജിലേക്ക് തിരികെ ലിങ്കുചെയ്തിരിക്കുന്നു. ചുവടെയുള്ള ഞങ്ങളുടെ ഉദാഹരണത്തിൽ, ഞങ്ങളുടെ ലോഗോയ്ക്ക് ഒരു SVG ആണ് ഉപയോഗിക്കുന്ന ഫയൽ . ചിത്രത്തിന്റെ ഗുണനിലവാരം ചെറുതും വലുതുമായ മൊത്തത്തിലുള്ള ഫയൽ വലുപ്പം നിലനിർത്താൻ, ഞങ്ങളുടെ ചിത്രം വ്യത്യസ്ത മിഴിവുകൾക്കായി സ്കെയിൽ ചെയ്യുന്നത് അനുവദിക്കുന്നതിനാൽ ഇത് ഒരു നല്ല ചോയ്സാണ്.
HTML പ്രമാണം നിങ്ങളുടെ ഇമേജ് എങ്ങനെ സ്ഥാപിക്കുമെന്നത് ഇതാ:
ഇമേജ് ടാഗിന് ചുറ്റുമുള്ള, നിങ്ങൾ ഇപ്പോൾ ആങ്കർ ലിങ്ക് കൂട്ടിച്ചേർക്കുകയും, ചിത്രത്തിന് മുമ്പിലെ ആങ്കർ ഘടകം തുറക്കുകയും ചിത്രത്തിന് ശേഷം ആങ്കർ അടയ്ക്കുകയും ചെയ്യും. നിങ്ങൾ വാചകം എങ്ങനെ ലിങ്ക് ചെയ്യണം എന്നതിന് സമാനമാണ്, നിങ്ങൾ വായന ടാഗുകളുമായുള്ള ഒരു ലിങ്ക് ആയിരിക്കാൻ ആഗ്രഹിക്കുന്ന വാക്കുകൾ പകരം വയ്ക്കുന്നത്, നിങ്ങൾ ചിത്രം പൊതിയുക. താഴെ ഞങ്ങളുടെ ഉദാഹരണത്തിൽ, ഞങ്ങൾ "index.html" ആയ ഞങ്ങളുടെ സൈറ്റിന്റെ ഹോംപേജിലേക്ക് തിരികെ ലിങ്കുചെയ്യുകയാണ്.
നിങ്ങളുടെ പേജിൽ ഈ HTML ചേർക്കുമ്പോൾ, ആങ്കർ ടാഗിനും ഇമേജ് ടാഗിനും ഇടയിലുള്ള സ്പെയ്സുകൾ ഇടരുത്. നിങ്ങൾ ചെയ്യുന്നതെങ്കിൽ, ചില ബ്രൌസറുകൾ ചിത്രത്തിന് പുറകിൽ ചെറിയ രൂപവും ചേർക്കും, അത് ഒറ്റനോട്ടത്തിൽ കാണപ്പെടും.
ലോഗോ ചിത്രം ഇപ്പോൾ ഒരു ഹോംപേജ് ബട്ടണായി പ്രവർത്തിക്കും, ഇത് വളരെ നല്ല ഒരു വെബ് സ്റ്റാൻഡേർഡാണ്. ഞങ്ങളുടെ HTML മാർക്കപ്പിൽ ഇമേജിന്റെ വീതിയും ഉയരവും പോലുള്ള ഏതെങ്കിലും ദൃശ്യ ശൈലികൾ ഞങ്ങൾ ഉൾപ്പെടുത്തിയിട്ടില്ല എന്ന് ശ്രദ്ധിക്കുക. ഈ വിഷ്വൽ സ്റ്റൈലുകൾ ഞങ്ങൾ CSS- ൽ ഇടും, HTML ഘടനയും CSS ശൈലികളും ശുദ്ധമായി വേർതിരിക്കേണ്ടതുണ്ട്.
നിങ്ങൾ CSS എത്തിയ ശേഷം, ഈ ലോഗോ ഗ്രാഫിക്ക് ടാർഗെറ്റുചെയ്യാൻ നിങ്ങൾ എഴുതുന്ന ശൈലികൾ ഒന്നിലധികം ഉപകരണ ഉപകരണങ്ങളായ പ്രതിബിംബമായ ശൈലികൾ , ഇമേജുകൾ / ലിങ്കുകൾ, ഇഷ്ടമുള്ള ബോർഡുകൾ അല്ലെങ്കിൽ CSS ഡ്രോപ്പ് ഡ്രോഡുകൾ. നിങ്ങൾക്ക് നിങ്ങളുടെ CSS ശൈലികൾക്കൊപ്പം കൂടുതൽ "കൊളുത്തുകൾ" വേണമെങ്കിൽ നിങ്ങൾക്ക് നിങ്ങളുടെ ഇമേജും കൊടുക്കാം അല്ലെങ്കിൽ ഒരു ക്ലാസ് ആട്രിബ്യൂട്ട് ലിങ്കുചെയ്യാം.
ഇമേജ് ലിങ്കുകൾക്കായി കേസുകൾ ഉപയോഗിക്കുക
ഒരു ഇമേജ് ലിങ്ക് ചേർക്കുന്നത് വളരെ എളുപ്പമാണ്. ഞങ്ങൾ ഇപ്പോൾ കണ്ടുകഴിഞ്ഞതുപോലെ, നിങ്ങൾ ചെയ്യേണ്ടതെല്ലാം ഉചിതമായ ആങ്കർ ടാഗുകളുമായി ചിത്രം പൊതിയുന്നതാണ്. നിങ്ങളുടെ അടുത്ത ചോദ്യം, "മുകളിൽ പറഞ്ഞ ലോഗോ / ഹോംപേജ് ലിങ്ക് ഉദാഹരണമില്ലാതെ നിങ്ങൾ എപ്പോഴാണ് പ്രാക്ടീസ് ചെയ്യുന്നത്?"
ചില ചിന്തകൾ ഇതാ:
- ആ ചിത്രങ്ങളുടെ വലിയ പതിപ്പുകളിലേക്ക് ലിങ്ക് ചെയ്യുന്ന ഒരു ഗാലറിയിൽ ലഘുചിത്ര ഇമേജുകൾ.
- ഒരു ഇ-കൊമേഴ്സ് വെബ്സൈറ്റിനായുള്ള ഉൽപ്പന്ന ഫോട്ടോകൾ പോലുള്ള ഉള്ളടക്കത്തെ പ്രതിനിധാനം ചെയ്യാൻ മാത്രം ഉപയോഗിക്കാവുന്ന ചിത്രങ്ങൾ.
- ഒരു ബ്ലോഗ് ലേഖനം അല്ലെങ്കിൽ പ്രസ് റിലീസ് പോലുള്ള മറ്റ് ഉള്ളടക്കങ്ങളുടെ ഭാഗമായ ടീസർ ഇമേജുകൾ, മുഴുവൻ ലേഖനവും വായിക്കാൻ ടാപ്പുചെയ്യാൻ അല്ലെങ്കിൽ ക്ലിക്കുചെയ്ത് ഒരു ടാർഗെറ്റ് ഏരിയ അവർക്ക് നൽകുന്നത് ശ്രദ്ധയിൽപെടും.
- സൈറ്റിലെ നിർദ്ദിഷ്ട പ്രവർത്തനം അല്ലെങ്കിൽ പേജുകളിലേക്ക് കണക്റ്റുചെയ്യുന്നതിന് ബട്ടണുകളായി ഉപയോഗിക്കുന്ന ഐക്കൺ ഇമേജുകൾ.
- ആ സൈറ്റ് അല്ലെങ്കിൽ കമ്പനിയ്ക്ക് പ്രാധാന്യം നൽകുന്ന വിവിധ സോഷ്യൽ മീഡിയ സൈറ്റുകളുടെ തിരിച്ചറിയാവുന്ന ലോഗോകൾ ഉപയോഗിക്കുന്ന സോഷ്യൽ മീഡിയ ലിങ്കുകൾ.
- ഫോം സമർപ്പിക്കലുകൾ (മികച്ച പരിശീലന കുറിപ്പുകൾ - ഒരു വെബ്സൈറ്റ് പ്രകടന കാഴ്ചപ്പാടിൽ നിന്ന്, CSS- ൽ മാത്രം എഴുതപ്പെട്ട ശൈലിയിലുള്ള ബട്ടണുകൾ ഇമേജ് ബട്ടണുകളെക്കാൾ മികച്ച തിരഞ്ഞെടുക്കാനുള്ളത്) പോലുള്ള ചില പ്രവർത്തനങ്ങൾക്ക് ബട്ടണുകൾ ഉപയോഗിക്കുന്ന ചിത്രങ്ങൾ.
ചിത്രങ്ങൾ ഉപയോഗിക്കുമ്പോൾ ഒരു ഓർമ്മപ്പെടുത്തൽ
വെബ്സൈറ്റിന്റെ വിജയത്തിൽ ചിത്രങ്ങൾക്ക് പ്രധാന പങ്കുണ്ട്. മുകളിൽ കൊടുത്തിട്ടുള്ള ഉദാഹരണങ്ങളിൽ ഒന്ന്, മറ്റ് ഉള്ളടക്കത്തിനൊപ്പം ചിത്രങ്ങൾ ഉപയോഗിക്കുന്നതിലൂടെ ആ ഉള്ളടക്കം ശ്രദ്ധയിൽപ്പെടുകയും അത് വായനക്കാരെ അറിയിക്കുകയും ചെയ്യുക.
ചിത്രങ്ങൾ ഉപയോഗിക്കുമ്പോൾ, നിങ്ങളുടെ ആവശ്യങ്ങൾക്ക് ശരിയായ ചിത്രം തിരഞ്ഞെടുക്കുന്നതിൽ ശ്രദ്ധാലുക്കളായിരിക്കണം , ഇതിൽ ശരിയായ ഇമേജ് വിഷയം, ഫോർമാറ്റ്, കൂടാതെ നിങ്ങളുടെ വെബ്സൈറ്റിൽ ഉപയോഗിക്കുന്ന ഏതെങ്കിലും ചിത്രങ്ങൾ വെബ്സൈറ്റ് ഡെലിവറിക്ക് വേണ്ടി ഒപ്റ്റിമൈസ് ചെയ്യപ്പെടുന്നുവെന്ന് ഉറപ്പുവരുത്തുക. ഇമേജുകൾ ചേർക്കുന്നതിനേക്കാൾ വളരെയധികം ജോലിയായി തോന്നാമെങ്കിലും, ഇത് പ്രാബല്യത്തിൽ വരുന്നതാണ്! ഒരു സൈറ്റിന്റെ വിജയത്തിന് ഇമേജുകൾ വളരെ ചേർക്കാം.
നിങ്ങളുടെ സൈറ്റിൽ ഉചിതമായ ചിത്രങ്ങൾ ഉപയോഗിക്കുന്നതിന് മടിക്കേണ്ടതില്ല, കൂടാതെ നിങ്ങളുടെ ഇമേജിലേക്ക് ചിലതൊക്കെ കൂട്ടിച്ചേർക്കാൻ ആവശ്യമുള്ളപ്പോൾ ആ ഇമേജുകൾ ലിങ്കുചെയ്യരുത്, മാത്രമല്ല ഈ ചിത്രത്തെ മികച്ച രീതിയിലുള്ള പരിചയവും ഒപ്പം നിങ്ങളുടെ ഗ്രാഫിക് / ലിങ്കുകളും ശരിയായി ഉത്തരവാദിത്തത്തോടെ നിങ്ങളുടെ വെബ് ഡിസൈൻ വർക്കിൽ ഉപയോഗിക്കുകയും ചെയ്യുക.