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