HTML-ൽ ചിത്രങ്ങൾ എങ്ങനെ സ്ഥാപിക്കാം
എച്ച്ടിഎംഎൽ ഇത് ഒരു മാർക്ക്അപ്പ് ഭാഷയാണ് അത് ഉപയോഗിക്കുന്നു ഒരു വെബ് പേജിൻ്റെ ഉള്ളടക്കം സൃഷ്ടിക്കുന്നതിനും രൂപപ്പെടുത്തുന്നതിനും. ഒരു വെബ് പേജിലെ ഏറ്റവും സാധാരണമായ ഘടകങ്ങളിലൊന്നാണ് ഇമേജുകൾ, അത് ഉപയോക്താവിൻ്റെ ശ്രദ്ധ ആകർഷിക്കുന്നതിനും ദൃശ്യ വിവരങ്ങൾ കൈമാറുന്നതിനും ഉപയോഗിക്കാം. ഫലപ്രദമായിഈ ലേഖനത്തിൽ നമ്മൾ പഠിക്കുന്നത് ഘട്ടം ഘട്ടമായി പോലെ HTML-ൽ ചിത്രങ്ങൾ സ്ഥാപിക്കുക ശരിയായി ഒപ്റ്റിമൈസ് ചെയ്യുകയും ചെയ്തു.
ഘട്ടം 1: ചിത്രം തയ്യാറാക്കുക
ആദ്യപടി സ്ഥലം HTML-ലെ ഒരു ചിത്രം ചിത്രം ഉണ്ടെന്ന് ഉറപ്പാക്കുക എന്നതാണ് തയ്യാറാക്കി ഒപ്റ്റിമൈസ് ചെയ്തു നിങ്ങളുടെ ഉപയോഗത്തിനായി വെബിൽഇത് സൂചിപ്പിക്കുന്നത് വലുപ്പം മാറ്റുക ആവശ്യമുള്ള വലുപ്പത്തിലുള്ള ചിത്രം, കംപ്രസ് ചെയ്യുക JPEG അല്ലെങ്കിൽ PNG പോലുള്ള അനുയോജ്യമായ ഫോർമാറ്റിൽ വേഗത്തിൽ ലോഡുചെയ്യുന്നതിനും സംരക്ഷിക്കുന്നതിനും അതിൻ്റെ ഭാരം. കൂടാതെ, സെർച്ച് എഞ്ചിനുകളിൽ അതിൻ്റെ റാങ്കിംഗ് മെച്ചപ്പെടുത്തുന്നതിന് ചിത്രത്തിന് ഒരു വിവരണാത്മക നാമം നൽകേണ്ടത് പ്രധാനമാണ്.
ഘട്ടം 2: ലേബൽ തിരുകുക
വേണ്ടി HTML-ൽ ഒരു ചിത്രം സ്ഥാപിക്കുക, ഞങ്ങൾ ടാഗ് ഉപയോഗിക്കുന്നു . ഈ ടാഗ് ഒരു ശൂന്യമായ ടാഗ് ആണ്, അതിനർത്ഥം ഇതിന് ഒരു ക്ലോസിംഗ് ടാഗ് ഇല്ല എന്നാണ്. ലേബലിനുള്ളിൽ, നമ്മൾ വ്യക്തമാക്കണം URL-ൽ "src" ആട്രിബ്യൂട്ടിൽ നാം ചേർക്കാൻ ആഗ്രഹിക്കുന്ന ചിത്രത്തിൻ്റെ. ചിത്രം ശരിയായി ലോഡുചെയ്യുന്നില്ലെങ്കിൽ ഇതര വാചകം നൽകുന്നതിന് "alt", കൂടാതെ ഉപയോക്താവ് ചിത്രത്തിന് മുകളിൽ ഹോവർ ചെയ്യുമ്പോൾ ഒരു പോപ്പ്അപ്പ് സന്ദേശം കാണിക്കുന്നതിന് "ശീർഷകം" എന്നിവ പോലുള്ള അധിക ആട്രിബ്യൂട്ടുകളും നമുക്ക് ചേർക്കാം.
ഘട്ടം 3: ചിത്രത്തിൻ്റെ വലുപ്പവും സ്ഥാനവും വ്യക്തമാക്കുക
ഒരിക്കൽ ഞങ്ങൾ ടാഗ് ചേർത്തു ഇമേജ് URL ഉപയോഗിച്ച്, നമുക്ക് കഴിയും വലിപ്പവും സ്ഥലവും വ്യക്തമാക്കുക "വീതി", "ഉയരം" എന്നീ ആട്രിബ്യൂട്ടുകൾ ഉപയോഗിക്കുന്ന ചിത്രത്തിൻ്റെ. ഈ ആട്രിബ്യൂട്ടുകൾ പിക്സലുകളിലോ ശതമാനത്തിലോ മൂല്യങ്ങൾ സ്വീകരിക്കുന്നു, കൂടാതെ ഞങ്ങളുടെ ആവശ്യങ്ങൾക്കനുസരിച്ച് ചിത്രത്തിൻ്റെ വലുപ്പം ക്രമീകരിക്കാൻ ഞങ്ങളെ അനുവദിക്കുന്നു. കൂടാതെ, ടെക്സ്റ്റുമായി ബന്ധപ്പെട്ട് ചിത്രം വിന്യസിക്കാൻ "അലൈൻ" അല്ലെങ്കിൽ ഇമേജിലേക്ക് ഒരു ബോർഡർ ചേർക്കാൻ "ബോർഡർ" പോലുള്ള ആട്രിബ്യൂട്ടുകൾ നമുക്ക് ഉപയോഗിക്കാം.
ഈ ലളിതമായ ഘട്ടങ്ങളിലൂടെ, നിങ്ങൾക്ക് ഇപ്പോൾ ആവശ്യമായ അറിവുണ്ട് HTML-ൽ ചിത്രങ്ങൾ സ്ഥാപിക്കുക കൂടാതെ നിങ്ങളുടെ വെബ് പേജുകളുടെ ദൃശ്യരൂപം മെച്ചപ്പെടുത്തുക. മികച്ച ലോഡിംഗ് പ്രകടനം നിലനിർത്തുന്നതിന് ചിത്രങ്ങളുടെ വലുപ്പവും ഒപ്റ്റിമൈസേഷനും ക്രമീകരിക്കാൻ ഓർമ്മിക്കുക, നിങ്ങളുടെ വെബ്സൈറ്റിൻ്റെ പ്രവേശനക്ഷമതയും ഉപയോഗക്ഷമതയും മെച്ചപ്പെടുത്തുന്നതിന് അധിക ആട്രിബ്യൂട്ടുകൾ ഉപയോഗിക്കാൻ മറക്കരുത്. അതിശയകരമായ ചിത്രങ്ങൾ ഉപയോഗിച്ച് നിങ്ങളുടെ ഉള്ളടക്കം പരീക്ഷിച്ച് ജീവസുറ്റതാക്കുക!
HTML-ൽ ചിത്രങ്ങൾ എങ്ങനെ ചേർക്കാം
ഈ ട്യൂട്ടോറിയലിൽ, ഒരു HTML പ്രമാണത്തിൽ ചിത്രങ്ങൾ എങ്ങനെ സ്ഥാപിക്കാമെന്ന് നമ്മൾ പഠിക്കും. ചിത്രങ്ങൾ ചേർക്കുന്നത് എ ഫലപ്രദമായി നിങ്ങളുടെ വെബ്സൈറ്റിൻ്റെ ദൃശ്യരൂപം മെച്ചപ്പെടുത്തുന്നതിനും സന്ദർശകർക്ക് അത് കൂടുതൽ ആകർഷകമാക്കുന്നതിനും. ഭാഗ്യവശാൽ, നിങ്ങളുടെ പേജിലേക്ക് ചിത്രങ്ങൾ ചേർക്കുന്നതിന് HTML പ്രത്യേക ടാഗുകൾ നൽകുന്നു.
1. img ടാഗ് ഉപയോഗിക്കുന്നു
HTML-ൽ ഇമേജുകൾ ചേർക്കുന്നതിനുള്ള ഏറ്റവും സാധാരണമായ മാർഗ്ഗം ടാഗ് ഉപയോഗിക്കുന്നു . ഇത് ചെയ്യുന്നതിന്, നിങ്ങൾ പ്രദർശിപ്പിക്കാൻ ആഗ്രഹിക്കുന്ന ചിത്രത്തിൻ്റെ URL വ്യക്തമാക്കുന്ന src ആട്രിബ്യൂട്ട് നിങ്ങൾ സജ്ജമാക്കണം. ഉദാഹരണത്തിന്,
. ഇത് ഉപയോഗിക്കുന്നത് ഉചിതമാണെന്ന് ഓർമ്മിക്കുക ഇമേജ് ഫയലുകൾ JPEG അല്ലെങ്കിൽ PNG പോലുള്ള ബ്രൗസറിന് അനുയോജ്യമായ ഫോർമാറ്റുകളിൽ.
കൂടാതെ, ചിത്രത്തിൻ്റെ വലുപ്പം ക്രമീകരിക്കുന്നതിന് ഉയരവും വീതിയും, ചിത്രം ലോഡ് ചെയ്യുന്നതിൽ പരാജയപ്പെട്ടാൽ ഇതര വാചകം നൽകുന്നതിന് alt, പ്രദർശിപ്പിച്ചിരിക്കുന്ന വാചകം ചേർക്കുന്നതിനുള്ള ശീർഷകം എന്നിങ്ങനെയുള്ള മറ്റ് ആട്രിബ്യൂട്ടുകൾ ഉപയോഗിച്ച് നിങ്ങൾക്ക് ചിത്രത്തിൻ്റെ രൂപം കൂടുതൽ ഇഷ്ടാനുസൃതമാക്കാനാകും. നിങ്ങൾ ചിത്രത്തിന് മുകളിൽ ഹോവർ ചെയ്യുമ്പോൾ.
2. ഫയൽ പാതകളും URL പാതകളും
ഇമേജ് പാത്ത് വ്യക്തമാക്കുമ്പോൾ, നിങ്ങൾ രണ്ട് ഓപ്ഷനുകൾ പരിഗണിക്കണം: ലോക്കൽ ഫയൽ പാത്ത് അല്ലെങ്കിൽ URL പാത്ത്. ചിത്രം നിങ്ങളുടെ കമ്പ്യൂട്ടറിൽ സ്ഥിതിചെയ്യുകയും അവിടെ നിന്ന് അത് അപ്ലോഡ് ചെയ്യണമെങ്കിൽ, "C:imagefolder.jpg" പോലെയുള്ള മുഴുവൻ ഫയൽ പാതയും നിങ്ങൾ നൽകണം. മറുവശത്ത്, ചിത്രം ഒരു വെബ് സെർവറിൽ ഹോസ്റ്റ് ചെയ്തിട്ടുണ്ടെങ്കിൽ, "http://www.example.com/image.jpg" പോലെയുള്ള ചിത്രത്തിൻ്റെ മുഴുവൻ URL നിങ്ങൾ വ്യക്തമാക്കണം.
ഒരു ബാഹ്യ സെർവറിൽ നിന്ന് ഇമേജുകൾ ലോഡ് ചെയ്യാൻ നിങ്ങളുടെ വെബ്സൈറ്റിനെ അനുവദിക്കുന്നതിനാലും സന്ദർശകരുടെ മെഷീനിൽ സംഭരിച്ചിരിക്കുന്ന ഫയലുകളെ ആശ്രയിക്കാത്തതിനാലും URL പാതകൾ കൂടുതൽ സാധാരണമാണെന്ന് ഓർമ്മിക്കുക.
3. ഇമേജ് ഒപ്റ്റിമൈസേഷൻ
നിങ്ങളുടെ ചിത്രങ്ങൾ ഒപ്റ്റിമൈസ് ചെയ്യേണ്ടത് പ്രധാനമാണ് വെബിനായി അവ നിങ്ങളുടെ HTML പേജിലേക്ക് ചേർക്കുന്നതിന് മുമ്പ്. ചിത്രങ്ങളുടെ വിഷ്വൽ നിലവാരത്തിൽ വിട്ടുവീഴ്ച ചെയ്യാതെ അവയുടെ ഫയൽ വലുപ്പം കുറയ്ക്കുക എന്നാണ് ഇതിനർത്ഥം. ഇത് നേടുന്നതിന് നിങ്ങൾക്ക് ഇമേജ് എഡിറ്റിംഗ് ടൂളുകളോ ഓൺലൈൻ കംപ്രസ്സറുകളോ ഉപയോഗിക്കാം. ഇമേജുകൾ ഒപ്റ്റിമൈസ് ചെയ്യുന്നതിലൂടെ, നിങ്ങളുടെ പേജ് വേഗത്തിൽ ലോഡുചെയ്യുകയും സന്ദർശകർ ദീർഘനേരം ലോഡുചെയ്യുന്നതിൽ നിന്ന് നിരാശരാകുന്നത് തടയുകയും ചെയ്യും.
ഉപസംഹാരമായി, HTML-ൽ ഇമേജുകൾ ചേർക്കുന്നത് ഒരു ലളിതമായ ജോലിയാണ്, എന്നാൽ ഒരു നല്ല ഉപയോക്തൃ അനുഭവം ഉറപ്പാക്കുന്നതിന് ശരിയായ ടാഗ്, ഫയൽ പാത്ത് അല്ലെങ്കിൽ URL, ഇമേജുകളുടെ ഒപ്റ്റിമൈസേഷൻ എന്നിവ പോലുള്ള ചില പ്രധാന വശങ്ങൾ കണക്കിലെടുക്കേണ്ടതുണ്ട്. ഈ നിർദ്ദേശങ്ങൾ പാലിക്കുക, ദൃശ്യപരമായി ആകർഷകമായ വെബ് പേജുകൾ സൃഷ്ടിക്കുന്നതിനുള്ള നിങ്ങളുടെ വഴിയിലായിരിക്കും നിങ്ങൾ.
ലേബലുകളുടെ പ്രാധാന്യം ![]()
HTML-ൽ
1. ദൃശ്യ പ്രവേശനക്ഷമത വർദ്ധിപ്പിക്കുക: ലേബലുകൾ ഒരു വെബ്സൈറ്റിലെ ചിത്രങ്ങളുടെ അവതരണത്തിൽ HTML ഒരു അടിസ്ഥാന പങ്ക് വഹിക്കുന്നു. ഒരു പേജിലേക്ക് ഒരു ചിത്രം ചേർക്കുമ്പോൾ, അത് ശരിയായി പ്രദർശിപ്പിക്കുന്നതിന് ഈ ടാഗ് ഉപയോഗിക്കുന്നു. എന്നിരുന്നാലും, അതിൻ്റെ പ്രാധാന്യം ലളിതമായ ദൃശ്യ അവതരണത്തിനപ്പുറം പോകുന്നു. ടാഗുകൾ
അവ സെർച്ച് എഞ്ചിനുകളേയും സ്ക്രീൻ റീഡറുകളേയും ചിത്രത്തിൻ്റെ ഉള്ളടക്കം വ്യാഖ്യാനിക്കാൻ അനുവദിക്കുന്നു, കാഴ്ച വൈകല്യമുള്ള ആളുകൾക്ക് അല്ലെങ്കിൽ സഹായ സാങ്കേതികവിദ്യകൾ ഉപയോഗിക്കുന്ന ആളുകൾക്ക് പ്രവേശനക്ഷമത സുഗമമാക്കുന്നു.
2. പ്രകടന ഒപ്റ്റിമൈസേഷൻ: ലേബലുകൾ ഉപയോഗിച്ച് HTML ശരിയായി, നിങ്ങൾക്ക് പ്രകടനം ഗണ്യമായി മെച്ചപ്പെടുത്താൻ കഴിയും ഒരു സൈറ്റിൽ നിന്ന് വെബ്. ഈ ടാഗുകൾ ചിത്രത്തിൻ്റെ വലുപ്പം വ്യക്തമാക്കാനും അതിൻ്റെ റെസല്യൂഷൻ കുറയ്ക്കാനും കംപ്രസ്സുചെയ്യാനും നിങ്ങളെ അനുവദിക്കുന്നു, ഇത് വേഗത്തിൽ പേജ് ലോഡുചെയ്യുന്നതിന് കാരണമാകുന്നു. കൂടാതെ, അലസമായ ലോഡിംഗ് പോലുള്ള സാങ്കേതിക വിദ്യകൾ നടപ്പിലാക്കാൻ കഴിയും, അത് ഉപയോക്താവിന് ആവശ്യമുള്ളതുപോലെ ഇമേജുകൾ ലോഡ് ചെയ്യുന്നു, പേജിൻ്റെ പ്രാരംഭ ലോഡിംഗ് സമയം കുറയ്ക്കുന്നു.
3. മെച്ചപ്പെട്ട ഉപയോക്തൃ അനുഭവം: ഒരു വെബ്സൈറ്റിലെ ഉപയോക്തൃ അനുഭവത്തിൽ ചിത്രങ്ങൾ ഒരു പ്രധാന പങ്ക് വഹിക്കുന്നു. ലേബലുകൾ ശരിയായി ഉപയോഗിക്കുന്നതിലൂടെ HTML-ൽ, നിങ്ങൾക്ക് ദൃശ്യപരമായി ഇടപഴകുന്നതും യോജിച്ചതുമായ അനുഭവം നൽകാൻ കഴിയും. കൂടാതെ, ആൾട്ട് ടെക്സ്റ്റ് പോലുള്ള ആട്രിബ്യൂട്ടുകൾ നിങ്ങൾക്ക് ചേർക്കാൻ കഴിയും, അത് കാണാൻ കഴിയാത്തവർക്കായി ചിത്രത്തിൻ്റെ വാചക വിവരണം നൽകുന്നു. ഇത് ഉള്ളടക്കത്തെക്കുറിച്ചുള്ള ധാരണ മെച്ചപ്പെടുത്തുകയും എല്ലാ ഉപയോക്താക്കൾക്കും ആശയക്കുഴപ്പം ഒഴിവാക്കുകയും ചെയ്യുന്നു.
HTML-ൽ ഇമേജുകൾ ചേർക്കുന്നതിനുള്ള വാക്യഘടന ശരിയാക്കുക
1. ലേബൽ ഉപയോഗിക്കുന്നത്
HTML-ൽ ഇമേജുകൾ ചേർക്കുന്നതിനുള്ള അടിസ്ഥാനപരവും പൊതുവായതുമായ മാർഗ്ഗം ടാഗ് ഉപയോഗിക്കുന്നു . ചിത്രത്തിൻ്റെ സ്ഥാനം, വലുപ്പം, മറ്റ് സവിശേഷതകൾ എന്നിവ വ്യക്തമാക്കാൻ ഈ ടാഗ് ഞങ്ങളെ അനുവദിക്കുന്നു. ദി
ടാഗിന് ഇനിപ്പറയുന്ന ആവശ്യമായതും ഓപ്ഷണൽ ആട്രിബ്യൂട്ടുകളും ഉണ്ട്:
– എസ്ആർസി: ഈ ആട്രിബ്യൂട്ട് ചിത്രത്തിൻ്റെ പാത വ്യക്തമാക്കുന്നു. ഇതൊരു URL അല്ലെങ്കിൽ ഇമേജ് ഫയലിൻ്റെ ആപേക്ഷിക പാത ആകാം.
– ഇതര: ചിത്രം ശരിയായി ലോഡുചെയ്യാൻ കഴിയുന്നില്ലെങ്കിൽ, ഈ ആട്രിബ്യൂട്ട് പ്രദർശിപ്പിക്കുന്നതിന് ഇതര വാചകം നൽകുന്നു.
– വീതി: ഈ ആട്രിബ്യൂട്ട് ചിത്രത്തിൻ്റെ വീതി പിക്സലുകളിൽ വ്യക്തമാക്കുന്നു.
– ഉയരം: ഈ ആട്രിബ്യൂട്ട് ചിത്രത്തിൻ്റെ ഉയരം പിക്സലുകളിൽ വ്യക്തമാക്കുന്നു.
ടാഗ് ഉപയോഗിച്ച് ഒരു ചിത്രം ചേർക്കുന്നതിന് വാക്യഘടന എങ്ങനെയിരിക്കും എന്നതിൻ്റെ ഒരു ഉദാഹരണം ഇതാ :
«``
«``
2. ലേബൽ ഉപയോഗിക്കുന്നത്
HTML-ൽ ഇമേജുകൾ ചേർക്കുന്നതിനുള്ള മറ്റൊരു മാർഗ്ഗം ടാഗ് ഉപയോഗിക്കുന്നു
ലേബൽ ഉപയോഗിക്കുന്നതിന്
"`എച്ച്ടിഎംഎൽ
«``
3. ചിത്രങ്ങൾ സ്റ്റൈലൈസ് ചെയ്യാൻ CSS ഉപയോഗിക്കുന്നു
മുകളിൽ സൂചിപ്പിച്ച HTML ടാഗുകൾക്ക് പുറമേ, ഞങ്ങളുടെ ചിത്രങ്ങൾ സ്റ്റൈലൈസ് ചെയ്യാൻ CSS ഉപയോഗിക്കാനും കഴിയും. ബോർഡറുകൾ, ഷാഡോകൾ, അതാര്യത തുടങ്ങിയ ശൈലികൾ നമുക്ക് പ്രയോഗിക്കാം.
നമുക്ക് സ്വത്ത് ഉപയോഗിക്കാം അതിർത്തി ചിത്രത്തിന് ഒരു ബോർഡർ ചേർക്കാൻ, പ്രോപ്പർട്ടി പെട്ടി-നിഴൽ ഒരു നിഴലും സ്വത്തും ചേർക്കാൻ അതാര്യത ചിത്രത്തിൻ്റെ അതാര്യത ക്രമീകരിക്കുന്നതിന്. ഒരു ഇമേജ് സ്റ്റൈലിംഗ് ചെയ്യുന്നതിനുള്ള CSS വാക്യഘടന എങ്ങനെയിരിക്കും എന്നതിൻ്റെ ഒരു ഉദാഹരണം ഇതാ:
"സി.എസ്.എസ്
ഇമേജ് {
ബോർഡർ: 1px കട്ടിയുള്ള കറുപ്പ്;
ബോക്സ്-ഷാഡോ: 2px 2px 4px rgba(0, 0, 0, 0.8);
അതാര്യത: 0.8;
}
«``
ഈ ടെക്നിക്കുകൾ ഉപയോഗിച്ച്, നിങ്ങളുടെ HTML പേജുകളിൽ കൃത്യമായും കാര്യക്ഷമമായും ചിത്രങ്ങൾ തിരുകാനും ഇഷ്ടാനുസൃതമാക്കാനും നിങ്ങൾക്ക് കഴിയും. ബദൽ ടെക്സ്റ്റ് നൽകാൻ എല്ലായ്പ്പോഴും ആൾട്ട് ആട്രിബ്യൂട്ട് ഉപയോഗിക്കാൻ ഓർമ്മിക്കുക, ഇത് കാഴ്ച വൈകല്യമുള്ളവർക്ക് പ്രവേശനക്ഷമതയ്ക്ക് അത്യാവശ്യമാണ്.
ഇമേജ് പാതകൾ കൈകാര്യം ചെയ്യുന്നതിനുള്ള ശുപാർശകൾ
HTML-ൽ ഇമേജുകൾ സ്ഥാപിക്കുമ്പോൾ, ഫയൽ പാത്ത് മനസ്സിൽ സൂക്ഷിക്കേണ്ടത് അത്യാവശ്യമാണ്. തെറ്റായ പാത്ത് വെബ് പേജിൽ ചിത്രങ്ങൾ ശരിയായി പ്രദർശിപ്പിക്കാതിരിക്കാൻ കാരണമായേക്കാം. ഈ പ്രശ്നം ഒഴിവാക്കാൻ, ആപേക്ഷിക പാതകൾ ഉപയോഗിക്കുന്നതാണ് ഉചിതം കേവല പാതകൾക്ക് പകരം.
ഒരു ആപേക്ഷിക പാത ഇമേജ് സ്ഥിതി ചെയ്യുന്ന HTML ഫയലുമായി ബന്ധപ്പെട്ട സ്ഥാനത്തെ സൂചിപ്പിക്കുന്നു. HTML ഉം ചിത്രവും ഒരേ ഫോൾഡറിലാണെങ്കിൽ, ഇമേജ് ടാഗിൽ ചിത്രത്തിൻ്റെ പേര് നൽകുക. ചിത്രം മറ്റൊരു ഫോൾഡറിലാണെങ്കിൽ, ചിത്രത്തിലെത്താൻ ഉചിതമായ ഡയറക്ടറികൾ ഉപയോഗിക്കേണ്ടതാണ്.
ഫോൾഡറുകളിലോ ഡയറക്ടറികളിലോ പ്രവർത്തിക്കുമ്പോൾ, സ്ഥിരതയുള്ള ആപേക്ഷിക പാതകൾ ഉപയോഗിക്കണം. ഉദാഹരണത്തിന്, ഒരു ഫോൾഡറിലെ ഒരു HTML ഫയലിൽ നിന്ന് ഒരു ഇമേജ് ആക്സസ് ചെയ്യാൻ നിങ്ങൾ "../../../images/image1.jpg" എന്ന ആപേക്ഷിക പാത്ത് ഉപയോഗിക്കുകയാണെങ്കിൽ, മറ്റെല്ലാ HTML-ലും ഒരേ ആപേക്ഷിക പാത്ത് ഉപയോഗിക്കുന്നത് തുടരണം. ആ ഫോൾഡറിനുള്ളിലെ ഫയലുകൾ. ആ ഡയറക്ടറിയിലെ എല്ലാ വെബ്പേജുകളിലും ചിത്രം ശരിയായി പ്രദർശിപ്പിക്കുന്നുവെന്ന് ഇത് ഉറപ്പാക്കും. വെബ്സൈറ്റ് പ്രസിദ്ധീകരിക്കുന്നതിന് മുമ്പ് പാതകൾ പരിശോധിക്കാനും ചിത്രങ്ങൾ ശരിയായി ലോഡുചെയ്യുന്നുണ്ടോയെന്ന് പരിശോധിക്കാനും എപ്പോഴും ഓർമ്മിക്കുക.
HTML-ൽ ചിത്രങ്ങളുടെ വലുപ്പം മാറ്റുക
HTML-ൽ, ചിത്രത്തിൻ്റെ വലുപ്പം ക്രമീകരിക്കുക ഒപ്റ്റിമൽ ഉപയോക്തൃ അനുഭവം ഉറപ്പാക്കേണ്ടത് അത്യാവശ്യമായ ഒരു കടമയാണ്. ഭാഗ്യവശാൽ, ഈ ലക്ഷ്യം നേടുന്നതിന് ലളിതവും ഫലപ്രദവുമായ നിരവധി മാർഗങ്ങളുണ്ട്. ഇമേജ് ടാഗിനുള്ളിലെ "വീതി" ആട്രിബ്യൂട്ട് ഉപയോഗിച്ചാണ് HTML-ലെ ചിത്രങ്ങളുടെ വലുപ്പം നിയന്ത്രിക്കുന്നതിനുള്ള ഒരു പൊതു മാർഗ്ഗം. ഉദാഹരണത്തിന്, നിങ്ങൾക്ക് വീതി ക്രമീകരിക്കണമെങ്കിൽ ഒരു ചിത്രത്തിൽ നിന്ന് 300 പിക്സലിൽ, നിങ്ങളുടെ ഇമേജ് ടാഗിലേക്ക് ഇനിപ്പറയുന്ന കോഡിൻ്റെ വരി ചേർക്കാം: വീതി="300".
ചിത്രങ്ങളുടെ വലുപ്പം ക്രമീകരിക്കാനുള്ള മറ്റൊരു മാർഗ്ഗം "വീതി" എന്നതിന് പകരം "ഉയരം" എന്ന ആട്രിബ്യൂട്ട് ഉപയോഗിക്കുക എന്നതാണ്. മുമ്പത്തെ ഉദാഹരണത്തിന് സമാനമായി, ഇമേജ് ടാഗിലേക്ക് ഇനിപ്പറയുന്ന കോഡ് കോഡ് ചേർത്ത് നിങ്ങൾക്ക് ഒരു ചിത്രത്തിൻ്റെ ഉയരം 200 പിക്സലുകളായി സജ്ജമാക്കാൻ കഴിയും: ഉയരം="200". ഈ ആട്രിബ്യൂട്ടുകളിൽ ഒന്ന് മാത്രം വ്യക്തമാക്കുന്നത് ഇമേജ് വികലമാക്കുന്നതിന് കാരണമാകുമെന്നത് ശ്രദ്ധിക്കുക, അതിനാൽ ശരിയായ വീക്ഷണ അനുപാതം നിലനിർത്താൻ രണ്ട് ആട്രിബ്യൂട്ടുകളും ഉപയോഗിക്കുന്നത് നല്ലതാണ്.
ചിത്രങ്ങളുടെ വലുപ്പത്തിലും ക്രമീകരണത്തിലും നിങ്ങൾക്ക് കൂടുതൽ നിയന്ത്രണം വേണമെങ്കിൽ, നിങ്ങൾക്ക് HTML-മായി സംയോജിപ്പിച്ച് CSS ഉപയോഗിക്കാം. ഉദാഹരണത്തിന്, ചിത്രങ്ങൾക്ക് ആവശ്യമുള്ള അളവുകൾ നിർവചിക്കുന്ന ഒരു പ്രത്യേക CSS ശൈലി നിങ്ങൾക്ക് സൃഷ്ടിക്കാൻ കഴിയും, തുടർന്ന് അത് അനുബന്ധ ഇമേജ് ടാഗുകളിൽ പ്രയോഗിക്കുക. ഓരോ ഇമേജ് ടാഗിലും വ്യക്തിഗതമായി "വീതി" അല്ലെങ്കിൽ "ഉയരം" ആട്രിബ്യൂട്ട് വ്യക്തമാക്കാതെ തന്നെ നിങ്ങളുടെ വെബ് പേജിലുടനീളം ചിത്രങ്ങളുടെ വലുപ്പം എളുപ്പത്തിൽ ക്രമീകരിക്കാൻ ഇത് നിങ്ങളെ അനുവദിക്കും. നിങ്ങളുടെ വിഭാഗത്തിൽ കോഡിൻ്റെ ഇനിപ്പറയുന്ന വരി ചേർക്കുക