Chapter 2: HTML ടാഗുകൾ അറിയുക (Understanding HTML Tags)

Share

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 ടാഗുകൾ ആണ് വെബ് പേജുകളുടെ പ്രധാന ഘടകങ്ങൾ. ഇവയുടെ ശരിയായ ഉപയോഗം വെബ്ബ് പേജിന്റെ സൃഷ്ടിയും പ്രദർശനവും സുതാര്യവും സുഗമവുമാക്കുന്നു.