HTML (The Skeleton)

HTML: The Human Skeleton (நம்ம உடம்பின் எலும்புக்கூடு)

நம்ம எல்லாரும் மனுஷங்களை தினமும் பார்க்கிறோம். ஒரு மனுஷன் உருவாகுறதுக்கும், ஒரு Website உருவாகுறதுக்கும் நிறைய ஒற்றுமை இருக்கு.

Structure is Everything (அமைப்புதான் எல்லாம்):
நம்ம உடம்புல தசை (Muscles), தோல் (Skin), ரத்தம் இதெல்லாம் வர்றதுக்கு முன்னாடி எலும்புக்கூடு (Skeleton) தான் முதல்ல இருக்கும்.
உங்க மண்டை ஓடு (Skull) இருக்கிற இடத்துலதான் மூளை இருக்கும்.
கை எலும்பு இருக்கிற இடத்துலதான் கை இருக்கும்.
இதே மாதிரி ஒரு Website-ல:

• Header எங்க இருக்கணும்?
• Footer எங்க இருக்கணும்?
• Main Content எங்க இருக்கணும்? இதை முடிவு பண்ற எலும்புக்கூடுதான் HTML.

HTML Tags as Body Parts (உறுப்புகளும் டேக்-களும்):
நம்ம உடம்புல ஒவ்வொரு பார்ட்டுக்கும் ஒரு பேர் இருக்குல்ல? அதே மாதிரி HTML-ல Tags இருக்கு:

• (The Brain): இது மனுஷனோட தலை மாதிரி. இது வெளிய தெரியாது, ஆனா Website-க்கு தேவையான முக்கியமான தகவல்கள் (Settings) எல்லாம் இதுக்குள்ள தான் இருக்கும்.
• (The Torso): இது மனுஷனோட உடல் பகுதி மாதிரி. ஒரு Website-ல கண்ணுக்கு தெரியுற எல்லா விஷயங்களும் (Buttons, Images, Text) இதுக்குள்ள தான் இருக்கும்.

• (The Face):

  இது உங்க முகம் மாதிரி. மத்தவங்களுக்கு உங்களை அடையாளம் காட்டுற முக்கியமான "Heading".
• (The Feet): இது மனுஷனோட பாதம் மாதிரி. Website-ஓட கடைசிப் பகுதியில இது இருக்கும்.

HTML மட்டும் இருந்தா எப்படி இருக்கும்?:
கொஞ்சம் யோசிச்சு பாருங்க, ஒரு மனுஷன் வெறும் எலும்போட மட்டும் ரோட்ல நடந்தா எப்படி இருக்கும்? பயமா இருக்கும்ல!

• அது பாக்க அழகா இருக்காது (No CSS).
• அதனால பேசவோ, யோசிக்கவோ முடியாது (No JavaScript).

ஆனா, அந்த எலும்புக்கூடு (HTML) இல்லாம ஒரு மனுஷன் நிக்கவே முடியாது. அதே மாதிரிதான், HTML இல்லாம ஒரு Website-ஆல நிக்கவே முடியாது!

Example:

<!-- HTML: This is the "Skeleton" of our person -->

<article class="human">

  <header>
    <!-- The Head / Face -->
    <h1>I am the Face (Heading)</h1>
  </header>

  <section class="torso">
    <!-- The Body / Stomach area -->
    <h2>This is my Chest</h2>
    <p>I am the skin and muscles (Content)</p>
  </section>

  <aside class="arms">
    <!-- The Arms / Side parts -->
    <button>Left Hand</button>
    <button>Right Hand</button>
  </aside>

  <footer>
    <!-- The Feet / Foundation -->
    <p>Standing on my Feet (Footer)</p>
  </footer>

</article>

Explanation:
"இந்த Code-ஐ நல்லா கவனிங்க! ஒரு மனுஷனோட உடம்புல இருக்குற உறுப்புகளுக்கு எப்படி ஒரு Structure இருக்கோ, அதே மாதிரிதான் HTML-ம் வேலை செய்யுது."

• (The Whole Person): இது மொத்த மனுஷனையும் குறிக்கும் ஒரு பெரிய கூடு மாதிரி.
• (The Head): ஒரு மனுஷனுக்கு தலை (Head) எவ்வளவு முக்கியமோ, அதே மாதிரி ஒரு Website-க்கு இதுதான் முகம். இதுலதான் முக்கியமான Title இருக்கும்.
• (The Body): நம்ம உடம்போட மத்தி பகுதி (Torso) மாதிரி. Website-ல இருக்குற முக்கியமான தகவல்கள் (Messages) இங்கதான் இருக்கும்.
• (The Arms): நம்ம உடம்புக்கு சைடுல இருக்குற கைகள் மாதிரி. Website-ல சைடுல இருக்குற லிங்க்ஸ் அல்லது பட்டன்களை இதுல வைக்கலாம்.
• (The Feet): நம்ம உடம்பை தாங்கி நிக்கிற பாதம் மாதிரி. Website-ஓட அடிபகுதியில காப்பிரைட் தகவல்கள் இங்கதான் இருக்கும்.

Output:

Conclusion:

"So, HTML-ங்கிறது Website-க்கு உயிர் குடுக்கிற விஷயம் இல்ல, அது Website-க்கு ஒரு வடிவத்தை (Shape) குடுக்கிற விஷயம். எலும்பு சரியா இருந்தாதான் அது மேல சதையைப் போட்டு (CSS) அழகாக்க முடியும்!"