HTML ടാഗുകൾ വെബ്ബ് പേജിന്റെ ഘടന നിർമ്മിക്കുന്ന നിർണായക ഘടകങ്ങളാണ്. ഓരോ HTML ടാഗും കൺറോൾ ചെയ്തിരിക്കുന്ന ഉള്ളടക്കത്തിന്റെ ആരംഭവും അവസാനവും സൂചിപ്പിക്കുന്നു.
HTML ടാഗുകൾ താഴെ കാണിക്കുന്ന രീതിയിൽ എഴുതുന്നു:
<tagname>ഉള്ളടക്കം</tagname>
• ഓപ്പൺ ടാഗ്: <tagname>
• ക്ലോസ് ടാഗ്: </tagname>
• ഉള്ളടക്കം: ടാഗുകൾക്കിടയിലെ ഉള്ളടക്കം
HTML ടാഗുകളുടെ പ്രത്യേകതകൾ:
HTML ടാഗുകൾ നാമസാധാരണമായ അടിവയ്പ്പാണ്. ഒരു ടാഗ് ആരംഭിക്കുന്നിടത്ത് അത് ക്ലോസിംഗ് ടാഗ് ഉപയോഗിച്ച് അവസാനിപ്പിക്കണം. ഉദാഹരണത്തിന്:
<p>ഇത് ഒരു പാരഗ്രാഫ് ആണ്.</p>
മുൻനിര ടാഗുകൾ:
1. തലക്കെട്ട് ടാഗുകൾ (Headings): <h1> മുതൽ <h6> വരെ തലക്കെട്ടുകൾ നിർമ്മിക്കാൻ ഉപയോഗിക്കുന്നു.
• <h1> : പ്രധാന തലക്കെട്ട്
• <h6> : ഏറ്റവും ചെറിയ തലക്കെട്ട്
<h1>ഇത് തലക്കെട്ട് 1 ആണ്</h1>
<h2>ഇത് തലക്കെട്ട് 2 ആണ്</h2>
2. പാരഗ്രാഫ് ടാഗ് (Paragraph Tag): <p> – പാരഗ്രാഫുകൾ എഴുതുന്നതിനായി.
<p>ഇത് ഒരു പാരഗ്രാഫ് ആണ്.</p>
3. ലിങ്ക് ടാഗ് (Anchor Tag): <a> – ലിങ്കുകൾ സൃഷ്ടിക്കാൻ.
<a href="https://example.com">എക്സാംപിൾ ലിങ്ക്</a>
4. ചിത്രം ടാഗ് (Image Tag): <img> – വെബ്പേജിൽ ചിത്രങ്ങൾ ചേർക്കാൻ ഉപയോഗിക്കുന്നു.
<img src="image.jpg" alt="ഒരു ചിത്രം">
സാധാരണ ഉപയോഗിക്കുന്ന HTML ടാഗുകൾ:
1. തലക്കെട്ട് (Headings): <h1> – <h6> വരെ തലക്കെട്ടുകൾ.
2. പാരഗ്രാഫ് (Paragraph): <p> ടാഗ്.
3. ലിങ്ക് (Anchor): <a href=””> – വെബ് ലിങ്കുകൾ.
4. ചിത്രം (Image): <img src=”URL”> – ചിത്രങ്ങൾ ചേർക്കുക.
5. ബട്ടൺ (Button): <button> – ബട്ടണുകൾ സൃഷ്ടിക്കാൻ.
6. വലിച്ചിടലുകൾ (Lists):
• ഓർഡർ ചെയ്ത ലിസ്റ്റ് (Ordered List): <ol> – ക്രമത്തിലായ ലിസ്റ്റുകൾ.
• ഓർഡർ ചെയ്യാത്ത ലിസ്റ്റ് (Unordered List): <ul> – ക്രമമില്ലാത്ത ലിസ്റ്റുകൾ.
Self-Closing Tags (സ്വയം ക്ലോസ് ചെയ്യുന്ന ടാഗുകൾ):
ചില HTML ടാഗുകൾക്ക് ക്ലോസിംഗ് ടാഗ് ആവശ്യമില്ല. അവ സ്വയം ക്ലോസ് ചെയ്യുന്നു. ഉദാഹരണങ്ങൾ:
• <img>
• <br> (Break Line)
• <hr> (Horizontal Line)
<img src="image.jpg" alt="ഒരു ചിത്രം">
<br>
<hr>
HTML ആട്രിബ്യൂട്ട്സ് (Attributes):
ടാഗുകൾക്ക് അധികം വിവരങ്ങൾ നൽകുന്നതിന് HTML ആട്രിബ്യൂട്ട്സുകൾ ഉപയോഗിക്കുന്നു. ഇവ ടാഗുകളുടെ ഓപ്പൺ ബ്രാക്കറ്റിനുള്ളിൽ എഴുതുന്നു. ഉദാഹരണത്തിന്:
<a href="https://example.com" target="_blank">Example</a>
ഇവിടെ, href ആട്രിബ്യൂട്ട് ലിങ്കിന്റെ യുആർഎല്ലും target=”_blank” പുതിയ ടാബിൽ തുറക്കാനുള്ള നിർദ്ദേശവുമാണ്.
അവലോകനം:
HTML ടാഗുകൾ ആണ് വെബ് പേജുകളുടെ പ്രധാന ഘടകങ്ങൾ. ഇവയുടെ ശരിയായ ഉപയോഗം വെബ്ബ് പേജിന്റെ സൃഷ്ടിയും പ്രദർശനവും സുതാര്യവും സുഗമവുമാക്കുന്നു.