HTML-ൽ ചിത്രങ്ങൾ ചേർക്കൽ:
HTML-ൽ ചിത്രങ്ങൾ ചേർക്കാൻ <img> ടാഗ് ഉപയോഗിക്കുന്നു. ചിത്രങ്ങൾ വെബ്ബ് പേജുകളിൽ മൾട്ടിമീഡിയ പ്രദർശിപ്പിക്കാൻ ഒരു പ്രധാന ഭാഗമാണ്. <img> ടാഗ് ഒരു സ്വയം ക്ലോസിംഗ് ടാഗാണ്, അതിന് ക്ലോസിംഗ് ടാഗ് ആവശ്യമില്ല.
HTML <img> ടാഗിന്റെ ഘടന:
<img src="imageURL" alt="ചിത്ര വിവരണം">
- src: ചിത്രത്തിന്റെ സ്രോതസ്സ് (Source) അല്ലെങ്കിൽ സ്ഥാനം (URL).
- alt: ചിത്രത്തിന് നൽകുന്ന വിവരണം. (ചിത്രം ലോഡ് ചെയ്യാത്തപ്പോൾ കാണിക്കുന്ന ടെക്സ്റ്റ്).
Example:
<img src="path/to/image.jpg" alt="ഒരു മനോഹരമായ ചിത്രം">
ഈ ഉദാഹരണത്തിൽ, "path/to/image.jpg" ചിത്രത്തിന്റെ ഫയൽ പാത്ത് അല്ലെങ്കിൽ URL ആണ്. "ഒരു മനോഹരമായ ചിത്രം" എന്നത് ചിത്രം ലോഡ് ചെയ്യാത്തപ്പോൾ കാണിക്കപ്പെടുന്ന
ടെക്സ്റ്റാണ്.
ചിത്രത്തിന്റെ വീതിയും ഉയരവും ക്രമീകരിക്കുക:
ചിത്രത്തിന്റെ വലുപ്പം നിയന്ത്രിക്കാൻ width (വീതി) മാറ്റം കഴിയും, height (ഉയരം) ആവശ്യത്തിനനുസരിച്ച് ഏത് മൂല്യവും നൽകാം:
<img src="path/to/image.jpg" alt="ഒരു ചിത്രം" width="500" height="300">
ചിത്രങ്ങൾ സെന്ററിൽ കാണിക്കുക:
ചിത്രങ്ങൾ വെബ് പേജിന്റെ കേന്ദ്രഭാഗത്ത് (center) കാണിക്കാനായി CSS (Cascading Style Sheets) ഉപയോഗിച്ചാണ് സാധാരണ ചെയ്യുന്നത്:
<img src="path/to/image.jpg" alt="ഒരു ചിത്രം" style="display:block; margin-left:auto; margin-right:auto;">
ബോർഡർ ചേർക്കുക (Adding Borders to Images):
ചിത്രത്തിന് ബോർഡർ ചേർക്കാൻ CSS ഉപയോഗിക്കുന്നു.
<img src="path/to/image.jpg" alt="ഒരു ചിത്രം" style="border: 2px solid black;">
ചിത്രങ്ങൾക്കുള്ള സ്റ്റൈലുകൾ:
CSS ഉപയോഗിച്ച് ചിത്രങ്ങൾക്ക് നിരവധി രൂപത്തിലുള്ള സ്റ്റൈലിംഗ് നൽകാം. ഉദാഹരണത്തിന്, ഒരു റോunded കോർണറുള്ള ചിത്രം:
<img src="path/to/image.jpg" alt="ഒരു ചിത്രം" style="border-radius:10px;">
Alt ടെക്സ്റ്റിന്റെ പ്രാധാന്യം:
Alt ടെക്സ്റ്റ് ഒരു ചിത്രം ലോഡ് ചെയ്യാത്തപക്ഷം കാണിക്കുന്ന വാക്കുകൾ മാത്രമല്ല. ഇത് SEO-യും (Search Engine Optimization) ചിത്രം വ്യക്തമായി തിരിച്ചറിയാനും, എക്സ്സെസിബിലിറ്റിയും മെച്ചപ്പെടുത്താനും സഹായിക്കുന്നു.
ചിത്രങ്ങൾ <a> ടാഗിനകത്ത്:
ചിത്രങ്ങൾ ലിങ്ക് ആയി പ്രവർത്തിപ്പിക്കാനാകും <a> ടാഗിനകത്ത് ചിത്രങ്ങൾ ചേർത്ത്.
<a href="https://example.com">
<img src="path/to/image.jpg" alt="ചിത്രം ലിങ്ക്">
</a>
ചിത്ര ഫോർമാറ്റുകൾ:
HTML-ൽ സാധാരണയായി ഉപയോഗിക്കുന്ന ചിത്ര ഫോർമാറ്റുകൾ:
- JPEG: ഫോട്ടോകൾക്കും കൂടുതൽ വർണ്ണ വൈവിധ്യമുള്ള ചിത്രങ്ങൾക്കായി.
- PNG: പരിക്ഷീണിപ്പിക്കാത്ത ചിത്രങ്ങൾക്കായി.
- GIF: അനിമേറ്റഡ് ചിത്രങ്ങൾക്കായി.
- SVG: സ്കേബിൾ വെക്ടർ ഗ്രാഫിക്സ് (scalable vector graphics).
ചിത്രങ്ങൾക്കായുള്ള ഉദാഹരണം:
<img src="image.jpg" alt="ഒരു ചിത്രത്തിന്റേ ഉദാഹരണം" width="300" height="200" style="border: 1px solid #000;">
സങ്കലനം:
HTML-ൽ ചിത്രങ്ങൾ ചേർക്കാൻ <img> ടാഗ് ഉപയോഗിക്കുന്നത് വളരെ ലളിതമാണ്. എങ്കിലും ചിത്രങ്ങളുടെ വലുപ്പം, ബോർഡർ, ആകൃതി, സെന്റർ എന്നിവ CSS ഉപയോഗിച്ച് വളരെ എളുപ്പത്തിൽ ഫോർമാറ്റ് ചെയ്യാൻ കഴിയും. Alt ടെക്സ്റ്റ് SEO-യും ആക്‌സസിബിലിറ്റിയും മെച്ചപ്പെടുത്തുന്നതിൽ ഏറെ പ്രാധാന്യമർഹിക്കുന്നു.
