HTML Attributes എന്താണ്?
HTML Attributes (ആട്രിബ്യൂട്ടുകൾ) HTML ടാഗുകൾക്ക് അധിക വിവരങ്ങൾ നൽകാൻ ഉപയോഗിക്കുന്നു. Attributes ഒരു ടാഗിന്റെ സ്വഭാവവും പ്രവർത്തനവും കൂടുതൽ വിശദീകരിക്കുന്നതിലൂടെയാണ് ടാഗ് പ്രവർത്തനക്ഷമമാകുന്നത്. Attributes സാധാരണയായി ഓപ്പൺ ടാഗിനുള്ളിൽ എഴുതി, പേരും മൂല്യവും (name=”value”) നൽകുന്നു.
HTML Attributes-ന്റെ ഘടന:
HTML Attributes ഒരു ടാഗിന്റെ ഓപ്പൺ ബ്രാക്കറ്റിനുള്ളിലാണ് എഴുതുന്നത്, ഈ ഘടനയിലുള്ളതായിരിക്കും:
htmlCopy code<tagname attribute="value">ഉള്ളടക്കം</tagname>
Example:
<a href="https://example.com">Example</a>
ഇവിടെ, href ആട്രിബ്യൂട്ട് ലിങ്കിന്റെ URL നിശ്ചയിക്കുന്നു.
സാധാരണ Attributes:
- href:
<a>ടാഗിനുള്ളിൽ ലിങ്കിന്റെ സ്ഥാനം നിർണ്ണയിക്കുന്നു.htmlCopy code<a href="https://example.com">Example Link</a> - src:
<img>ടാഗിനുള്ളിൽ ചിത്രത്തിന്റെ സ്രോതസ്സ് (source) നിശ്ചയിക്കുന്നു.htmlCopy code<img src="image.jpg" alt="Example Image"> - alt:
<img>ടാഗിന് ചിത്രത്തിൽ പകരം കാണിക്കേണ്ട വാചകം നിശ്ചയിക്കുന്നു.htmlCopy code<img src="image.jpg" alt="This is an example image"> - title: HTML ടാഗിന് ഉപയോക്താവ് ഹോവർ ചെയ്യുമ്പോൾ കാണിക്കുന്ന ഒരു എളിയ വിവരണം.htmlCopy code
<a href="https://example.com" title="Go to Example Site">Example</a> - id: ഓരോ HTML ടാഗിനും യാദൃശ്ചികമായ ഒരു ഐഡി നൽകുന്നു, ഇത് JavaScript അല്ലെങ്കിൽ CSS ഉപയോഗിച്ച് ശൃംഖലകൾ ചേർക്കാൻ സഹായിക്കുന്നു.htmlCopy code
<h1 id="title">This is a Title</h1> - class: CSS, JavaScript തുടങ്ങിയവയിൽ ഒരേ ടാഗിന്റെ ഒരു ഗ്രൂപ്പിന് ആപ്ലൈ ചെയ്യുന്നതിനായി
classഉപയോഗിക്കുന്നു.htmlCopy code<p class="highlight">This is highlighted text.</p> - style: Inline CSS നൽകാൻ ഉപയോഗിക്കുന്നു, ഓരോ ടാഗിനും പ്രത്യേകമായി സ്റ്റൈൽ ചെയ്യാം.htmlCopy code
<p style="color:blue;">This is a blue paragraph.</p> - target:
<a>ടാഗിലെ ലിങ്കുകൾക്ക് പുതിയ ടാബിൽ തുറക്കാനായിtarget="_blank"ഉപയോഗിക്കുന്നു.htmlCopy code<a href="https://example.com" target="_blank">Open in New Tab</a>
HTML Attributes-നെക്കുറിച്ചുള്ള പ്രധാന ഘടകങ്ങൾ:
- Name-Value Pair: Attributes-name എന്നതും value എന്നതും കൂടി ഉണ്ടാകും. ഉദാഹരണത്തിന്,
href="https://example.com". - Quotes: Attributes-നുള്ള value-കൾ സാധാരണ ഡബിൾ quotes (“) കൊണ്ട് ബന്ധിപ്പിക്കുന്നു.
- Attributes are Optional: Attributes ഒരു ടാഗിന്റെ പ്രവർത്തനത്തെ കൂടുതൽ നിശ്ചയിക്കുന്നതാണ്, എന്നാൽ അവ പ്രധാനമായും ഓപ്ഷണൽ ആണെന്ന് ശ്രദ്ധിക്കുക.
Multiple Attributes in One Tag:
ഒരു HTML ടാഗിന് ഒന്നിലധികം Attributes ഉപയോഗിക്കാം, ഓരോ attributes-നും quotes നും ഇടയിൽ സ്പെയ്സ് ഉപയോഗിക്കാം.
<a href="https://example.com" target="_blank" title="Example Link">Click Here</a>
Commonly Used HTML Attributes:
- disabled: ഒരു ഇൻപുട്ട് അല്ലെങ്കിൽ ബട്ടൺ പ്രവർത്തനക്ഷമമല്ലാതാക്കുന്നു.htmlCopy code
<button disabled>Disabled Button</button> - readonly: ഒരു ഇൻപുട്ട് ഫീൽഡ് എഡിറ്റ് ചെയ്യാനാവാതെ
readonlyആക്കുന്നു.htmlCopy code<input type="text" value="Read-only Text" readonly> - maxlength: ടെക്സ്റ്റ് ഇൻപുട്ട് ഫീൽഡിന് പരമാവധി അക്ഷരങ്ങളുടെ എണ്ണം നിശ്ചയിക്കുന്നു.htmlCopy code
<input type="text" maxlength="10"> - placeholder: ഇൻപുട്ട് ഫീൽഡിന് ഉള്ളടക്കം നൽകുന്നതിന് മുൻപ് കാണിക്കുന്ന ടെക്സ്റ്റ്.htmlCopy code
<input type="text" placeholder="Enter your name">
Data Attributes:
HTML5-ൽ, data- attributes നിഷ്പ്രയാസപരമായ കസ്റ്റം ഡാറ്റ HTML എലിമെന്റുകൾക്ക് നൽകാൻ ഉപയോഗിക്കുന്നു. ഇതിന്റെ മൂല്യം JavaScript ഉപയോഗിച്ച് എളുപ്പത്തിൽ access ചെയ്യാനാകും.
<p data-id="12345">This is a paragraph with data attribute.</p>
JavaScript-യിലും CSS-ഉം Attributes ഉപയോഗിക്കുക:
Attributes-നെ CSS അല്ലെങ്കിൽ JavaScript ഉപയോഗിച്ച് സ്റ്റൈലിംഗിനും ഫംഗ്ഷനാലിറ്റിക്കായി ഉപയോഗിക്കാം. ഉദാഹരണത്തിന്, ഒരു ഐഡി ഉപയോഗിച്ച് ഒരു ഇലിമെന്റിനെ CSS-യിൽ access ചെയ്യുക:
#title {
color: red;
}
സുരക്ഷാ പരിഗണനകൾ:
HTML Attributes സംശയാസ്പദമായ മൂല്യങ്ങൾ ഉൾപ്പെടെ റീഡൈറെക്റ്റ് ചെയ്യാനും സുരക്ഷാ പ്രശ്നങ്ങൾ ഉണ്ടാക്കാനും കഴിയും. അതിനാൽ, എപ്പോഴും വിശ്വസനീയമായ സൈറ്റുകൾ മാത്രമേ ഉപയോഗിക്കാവൂ.
സങ്കലനം:
HTML Attributes ഒരു ടാഗിന്റെ പ്രവർത്തനങ്ങൾക്കും ഡാറ്റാ പ്രക്രിയകൾക്കുമുള്ള അധിക വിശദീകരണങ്ങൾ നൽകുന്നു. ഇവയുടെ ശരിയായ ഉപയോഗം വെബ് പേജിന്റെ ഘടനയും പ്രവർത്തനവും മെച്ചപ്പെടുത്തുന്നു.
