HTML සම්පූර්ණ පාඩම සිංහලෙන්

වෙබ් නිර්මාණ ලෝකයට පිවිසෙන ඔබට, එහි අත්තිවාරම වන HTML මුල සිට සරලව සහ සම්පූර්ණයෙන් ඉගෙන ගැනීමට මඟ පෙන්වීමක්.

1. HTML යනු කුමක්ද? (Introduction to HTML)

ආයුබෝවන්! නවීන ලෝකයේ නැතුවම බැරි අංගයක් වන වෙබ් අඩවි නිර්මාණයේ මූලිකම සහ වැදගත්ම පදනම වන HTML ලෝකයට ඔබව සාදරයෙන් පිළිගනිමු. ඔබ දකින ඕනෑම වෙබ් පිටුවක සැකිල්ල සකසා ඇත්තේ HTML වලිනි.

HTML යනු HyperText Markup Language යන්නෙහි කෙටි නමයි. මෙය programming භාෂාවක් ලෙස බොහෝ දෙනා වරදවා වටහා ගත්තද, එය වෙබ් පිටුවක අන්තර්ගතය (Content) සහ එහි සැකැස්ම (Structure) තීරණය කරන "Markup" භාෂාවකි. සරලවම කිවහොත්, වෙබ් පිටුවක ඇති මාතෘකා, ඡේද, පින්තූර, සහ ලින්ක්ස් තිබිය යුත්තේ කොතැනද සහ කෙසේද යන්න වෙබ් බ්‍රව්සරයට (Google Chrome, Firefox වැනි) පවසන්නේ HTML මගිනි.

HTML ඉගෙනගත යුත්තේ ඇයි?

වර්තමානයේ වෙබ් තාක්ෂණය ඉතා දියුණු වුවද, HTML හි වැදගත්කම තවමත් එලෙසම පවතී. Front-end developer, back-end developer, full-stack developer, UI/UX designer, SEO specialist, හෝ digital marketer වැනි ඕනෑම ක්ෂේත්‍රයකට පිවිසීමට HTML දැනුම අත්‍යවශ්‍ය වේ. එය වෙබ් ලෝකයේ "අක්ෂර මාලාව" බඳුය.

2. මූලික HTML පිටුවක ව්‍යුහය

සෑම HTML ලේඛනයක්ම නිශ්චිත ව්‍යුහයකට අනුව සකස් වී ඇත. මෙම මූලික කොටස් සෑම විටම අනිවාර්යයෙන්ම අඩංගු වේ. ඕනෑම text editor එකක් (Notepad, VS Code, Sublime Text වැනි) විවෘත කර පහත කේතය टाइप කර බලන්න.

මූලික HTML සැකිල්ල
<!DOCTYPE html>
<html lang="si">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>පිටුවේ මාතෘකාව</title>
</head>
<body>

    <!-- වෙබ් පිටුවේ පරිශීලකයාට පෙනෙන සියලුම අන්තර්ගතය මෙතැනට යොදනු ලැබේ -->
    
</body>
</html>

මෙම Tags වලින් අදහස් වන්නේ කුමක්ද?

  • <!DOCTYPE html>: මෙය ටැග් එකක් නොවේ. මෙය මෙම ලේඛනය නවීන HTML5 ප්‍රමිතියට අනුව සකස් කර ඇති බව වෙබ් බ්‍රව්සරයට ලබාදෙන උපදෙසකි.
  • <html>: සම්පූර්ණ HTML පිටුවේම මූලිකම (root) ටැග් එකයි. අනෙකුත් සියලුම ටැග්ස් මේ තුළ ලියැවේ. lang="si" මගින් මෙම පිටුවේ භාෂාව සිංහල බව හඳුන්වයි.
  • <head>: වෙබ් පිටුව ගැන තොරතුරු (metadata) මෙහි ඇතුළත් වේ. මෙම කොටස පරිශීලකයාට සෘජුවම නොපෙනේ. පිටුවේ මාතෘකාව (title), CSS style sheets, meta tags වැනි දේ මෙහි අඩංගු වේ.
  • <meta charset="UTF-8">: සිංහල වැනි ඕනෑම භාෂාවක අක්ෂර නිවැරදිව පෙන්වීමට උපකාරී වන character encoding එක නියම කරයි.
  • <title>: වෙබ් බ්‍රව්සරයේ ටැබ් එකේ සහ search engine ප්‍රතිඵලවල පෙන්වන මාතෘකාව මෙයයි.
  • <body>: වෙබ් පිටුවේ පරිශීලකයාට දර්ශනය වන සියලුම දේ (ශීර්ෂක, ඡේද, පින්තූර, ලින්ක්ස්) මෙම ටැග් දෙක අතර ලියනු ලැබේ.

3. බහුලව භාවිත වන මූලික HTML Tags

දැන් අපි වෙබ් පිටුවක අන්තර්ගතය සැකසීමට යොදාගන්නා මූලික සහ අත්‍යවශ්‍ය tags කිහිපයක් ගැන ඉගෙන ගනිමු.

ශීර්ෂක (Headings) - <h1> to <h6>

වෙබ් පිටුවක මාතෘකා සහ උප මාතෘකා දැක්වීමට ශීර්ෂක ටැග් භාවිතා කරයි. <h1> යනු වැදගත්ම සහ විශාලම ශීර්ෂකය වන අතර, SEO (Search Engine Optimization) සඳහා ඉතා වැදගත් වේ. සාමාන්‍යයෙන් එක් පිටුවකට ඇත්තේ එක් <h1> ටැගයක් පමණි. <h6> යනු කුඩාම සහ අඩුම වැදගත්කමක් ඇති ශීර්ෂකයයි.

මෙය H1 ශීර්ෂකයකි

මෙය H2 ශීර්ෂකයකි

මෙය H3 ශීර්ෂකයකි

මෙය H4 ශීර්ෂකයකි

මෙය H5 ශීර්ෂකයකි
මෙය H6 ශීර්ෂකයකි

ඡේද (Paragraphs) - <p>

ලිපි, විස්තර හෝ ඕනෑම ඡේදයක් දැක්වීමට <p> (paragraph) ටැගය භාවිතා කරයි. බ්‍රව්සරය ස්වයංක්‍රීයව එක් එක් ඡේදය අතර ඉඩක් (margin) තබයි.

<p>මෙය HTML වලින් ලියන ලද පළමු ඡේදයයි. ඔබට අවශ්‍ය ඕනෑම කරුණක් මෙහි සඳහන් කළ හැකිය.</p>
<p>මෙය දෙවන ඡේදයයි. සෑම <p> ටැගයක්ම නව පේළියකින් ආරම්භ වේ.</p>

සබැඳි (Links / Anchors) - <a>

වෙබ් පිටු එකිනෙක සම්බන්ධ කිරීමට (link) සහ වෙනත් වෙබ් අඩවි වෙත පිවිසීමට <a> (anchor) ටැගය භාවිතා කරයි. යා යුතු වෙබ් ලිපිනය href (hypertext reference) නම් attribute (ගුණාංගය) මගින් ලබා දේ.

<a href="https://www.google.lk">Google වෙබ් අඩවියට පිවිසෙන්න</a>

ප්‍රතිඵලය: Google වෙබ් අඩවියට පිවිසෙන්න

Pro Tip: target="_blank" attribute එක යෙදීමෙන් link එක මත click කළ විට එය නව ටැබ් එකකින් විවෘත වේ. මෙය පරිශීලකයා ඔබේ වෙබ් අඩවියෙන් ඉවත් වීම වළක්වයි.

පින්තූර (Images) - <img>

වෙබ් පිටුවට පින්තූර එක් කිරීමට <img> ටැගය භාවිතා කරයි. මෙය closing tag එකක් නොමැති "empty tag" එකකි. පින්තූරය ඇති ස්ථානය src (source) මගින් ද, කිසියම් හේතුවකින් පින්තූරය load නොවුවහොත් ඒ වෙනුවට පෙන්වන විස්තරය alt (alternative text) මගින් ද ලබාදේ. alt text එක SEO සඳහා සහ দৃষ্টিহীন පරිශීලකයින් සඳහා ඉතා වැදගත් වේ.

<img src="https://via.placeholder.com/600x200.png?text=HTML+Image+Example" alt="HTML පින්තූරයක් සඳහා උදාහරණයක්" class="img-fluid">
HTML පින්තූරයක් සඳහා උදාහරණයක්

class="img-fluid" යනු Bootstrap class එකක් වන අතර, එය පින්තූරය responsive කිරීමට (ඕනෑම තිරයකට ගැලපීමට) උපකාරී වේ.

ලැයිස්තු (Lists)

දත්ත ලැයිස්තුගත කිරීමට HTML වල ප්‍රධාන ක්‍රම දෙකක් ඇත. සෑම ලැයිස්තු අයිතමයක්ම (list item) <li> ටැගයක් තුල යොදනු ලැබේ.

Unordered List (<ul>)

අනුපිළිවෙලක් නැති, බුලට් පොයින්ට්ස් (bullet points) සහිත ලැයිස්තු සඳහා මෙය භාවිතා කරයි.

<h4>මිලදී ගතයුතු දේ:</h4>
<ul>
  <li>කෙසෙල්</li>
  <li>කිරි</li>
  <li>පාන්</li>
</ul>

මිලදී ගතයුතු දේ:

  • කෙසෙල්
  • කිරි
  • පාන්

Ordered List (<ol>)

අංක යෙදූ, නිශ්චිත අනුපිළිවෙලක් සහිත ලැයිස්තු සඳහා මෙය භාවිතා කරයි.

<h4>කළ යුතු දේ:</h4>
<ol>
  <li>HTML ඉගෙනගැනීම</li>
  <li>වෙබ් පිටුවක් සෑදීම</li>
  <li>එය අන්තර්ජාලයට එක් කිරීම</li>
</ol>

කළ යුතු දේ:

  1. HTML ඉගෙනගැනීම
  2. වෙබ් පිටුවක් සෑදීම
  3. එය අන්තර්ජාලයට එක් කිරීම

4. HTML හි තවත් ගැඹුරු මාතෘකා

මූලික කරුණු අවබෝධ කරගත් පසු, වඩාත් වෘත්තීය මට්ටමේ වෙබ් පිටු සෑදීමට අවශ්‍ය වන තවත් වැදගත් සංකල්ප කිහිපයක් මෙහි දැක්වේ.

HTML Attributes (ගුණාංග)

HTML elements වලට අමතර තොරතුරු ලබාදීමට Attributes භාවිතා කරයි. Attributes හැමවිටම ආරම්භක ටැගය (Opening Tag) තුළ ලියනු ලබන අතර, ඒවා name="value" ආකාරයෙන් යුගල වශයෙන් පැමිණේ.

උදාහරණයක් ලෙස <a href="https://google.com"> ටැගයේ,

  • a යනු element එකයි.
  • href යනු attribute name එකයි.
  • "https://google.com" යනු attribute value එකයි.

පොදුවේ භාවිතා වන Attributes:

  • id - Element එකකට අනන්‍ය හඳුනාගැනීමක් ලබාදෙයි.
  • class - Elements කාණ්ඩයක් හඳුනාගැනීමට යොදාගනී (CSS styling සඳහා බහුලවම භාවිතා වේ).
  • style - Element එකකට සෘජුවම CSS style එක් කිරීමට (Inline CSS).
  • src, href, alt - අප ඉහත සාකච්ඡා කළ පරිදි.
  • disabled - Form element එකක් අක්‍රීය කිරීමට.

Block-level vs. Inline Elements

HTML elements ප්‍රධාන වශයෙන් වර්ග දෙකකට බෙදේ. මෙය වෙබ් පිටුවේ සැකැස්ම (layout) සඳහා ඉතා වැදගත් සංකල්පයකි.

Block-level Elements

මේවා හැමවිටම නව පේළියකින් ආරම්භ වන අතර, තිරයේ සම්පූර්ණ පළල (full width) ලබාගනී.

උදාහරණ:

  • <h1> - <h6>
  • <p>
  • <div> (වෙනත් elements කාණ්ඩ කිරීමට යොදාගන්නා ප්‍රධාන block-level container එක)
  • <ul>, <ol>, <li>
  • <form>
Inline Elements

මේවා නව පේළියකින් ආරම්භ නොවන අතර, අවශ්‍ය වන ඉඩ ප්‍රමාණය පමණක් ලබාගනී.

උදාහරණ:

  • <a>
  • <strong>, <em>
  • <img>
  • <span> (වචනයක් වැනි කුඩා කොටසක් style කිරීමට යොදාගන්නා ප්‍රධාන inline container එක)
  • <input>

HTML වගු (Tables)

දත්ත පේළි (rows) සහ තීරු (columns) ලෙස ව්‍යුහගතව පෙන්වීමට වගු භාවිතා කරයි. දත්ත සංසන්දනය කිරීමට හෝ සංඛ්‍යාලේඛන පෙන්වීමට මෙය ඉතා ප්‍රයෝජනවත් වේ.

<table class="table table-striped table-bordered">
    <thead class="table-dark">
        <tr>
            <th>නම</th>
            <th>වයස</th>
            <th>නගරය</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>කමල් පෙරේරා</td>
            <td>28</td>
            <td>කොළඹ</td>
        </tr>
        <tr>
            <td>නිමාලි සිල්වා</td>
            <td>32</td>
            <td>මහනුවර</td>
        </tr>
    </tbody>
</table>

මෙහි <table> මගින් වගුව ද, <tr> මගින් පේළියක් (table row) ද, <th> මගින් මාතෘකා කොටුවක් (table header) ද, <td> මගින් දත්ත කොටුවක් (table data) ද නිරූපණය කරයි. <thead> සහ <tbody> මගින් වගුවේ මාතෘකා කොටස සහ දත්ත කොටස වෙන් කරයි.

නම වයස නගරය
කමල් පෙරේරා 28 කොළඹ
නිමාලි සිල්වා 32 මහනුවර

HTML ෆෝරම (Forms)

පරිශීලකයාගෙන් දත්ත (නම, email, password වැනි) ලබාගැනීමට ෆෝරම අත්‍යවශ්‍ය වේ. <form> ටැගය තුළ විවිධ input elements යොදාගනී.

අපි ඔබේ ඊමේල් ලිපිනය අන් අය සමග බෙදා නොගනිමු.

ඉහත ෆෝරමය සෑදීමට භාවිතා කළ කේතය:

<form>
    <div class="mb-3">
        <label for="exampleInputName" class="form-label">ඔබේ නම</label>
        <input type="text" class="form-control" id="exampleInputName">
    </div>
    <div class="mb-3">
        <label for="exampleInputEmail1" class="form-label">ඊමේල් ලිපිනය</label>
        <input type="email" class="form-control" id="exampleInputEmail1">
    </div>
    <div class="mb-3">
        <label for="exampleMessage" class="form-label">ඔබේ පණිවිඩය</label>
        <textarea class="form-control" id="exampleMessage" rows="3"></textarea>
    </div>
    <button type="submit" class="btn btn-primary">Submit කරන්න</button>
</form>

මෙහි <input> ටැගයේ type attribute එක මගින් විවිධ වර්ගයේ (text, email, password, checkbox, radio, date) දත්ත ලබාගත හැක. <label> මගින් input field එකට නමක් ලබාදෙන අතර, <textarea> මගින් දිගු පණිවිඩ ලබාගත හැක.

Semantic HTML5 Elements

HTML5 සමඟ හඳුන්වා දුන් Semantic Elements මගින් වෙබ් පිටුවේ විවිධ කොටස්වල අර්ථය (meaning) බ්‍රව්සරයට සහ search engines වලට වඩාත් පැහැදිලිව හඳුන්වා දේ. මෙය SEO සඳහා ඉතා වැදගත් වේ.

සාමාන්‍යයෙන් <div> ටැගය පමණක් භාවිතා කරනවා වෙනුවට, අර්ථයට ගැලපෙන ටැගය භාවිතා කිරීම වඩාත් සුදුසුය.

Semantic HTML5 Layout Diagram
  • <header> - පිටුවේ ඉහළම කොටස (logo, navigation bar).
  • <nav> - ප්‍රධාන මෙනුව (navigation links).
  • <main> - පිටුවේ ප්‍රධාන සහ වැදගත්ම අන්තර්ගතය.
  • <section> - අන්තර්ගතයේ තාර්කික කොටස් වෙන් කිරීමට.
  • <article> - ස්වාධීන අන්තර්ගතයක් (blog post, news article).
  • <aside> - ප්‍රධාන අන්තර්ගතයට අමතර තොරතුරු (sidebar).
  • <footer> - පිටුවේ පහළම කොටස (copyright, contact info).

5. සම්පූර්ණ උදාහරණය සහ ක්‍රියාත්මක කිරීම

ඉහත ඉගෙනගත් සියල්ල ඇතුළත් කර, Semantic HTML5 ද භාවිතා කර, ඔබේ පළමු සම්පූර්ණ වෙබ් පිටුව සදා ගනිමු. මෙම කේතය mypage.html යන නමින් save කර වෙබ් බ්‍රව්සරයකින් open කර බලන්න.

  1. පහත ඇති සම්පූර්ණ කේතය copy කරගන්න.
  2. ඔබේ පරිගණකයේ Text Editor එකක් (Notepad, VS Code) open කරගන්න.
  3. Copy කරගත් කේතය එහි paste කරන්න.
  4. මෙම ෆයිල් එක mypage.html යන නමින් save කරගන්න.
  5. දැන් save කරගත් ෆයිල් එක වෙබ් බ්‍රව්සරයකින් (Chrome, Firefox) open කර බලන්න.
<!DOCTYPE html>
<html lang="si">
<head>
    <meta charset="UTF-8">
    <title>මගේ පළමු වෙබ් පිටුව</title>
    <style>
        body { font-family: Arial, sans-serif; line-height: 1.6; margin: 20px; }
        header, footer { background-color: #f2f2f2; padding: 10px; text-align: center; }
        nav a { margin: 0 15px; }
        section { margin-bottom: 20px; }
    </style>
</head>
<body>

    <header>
        <h1>ආයුබෝවන් ලෝකය!</h1>
        <nav>
            <a href="#">මුල් පිටුව</a>
            <a href="#">මා ගැන</a>
            <a href="#">සම්බන්ධ වන්න</a>
        </nav>
    </header>
    
    <main>
        <article>
            <h2>මගේ වෙබ් නිර්මාණ ගමන</h2>
            <p>මම <strong>HTML</strong> ඉගෙන ගනිමින් සිටිමි. මෙය ඉතා පහසු සහ විනෝදජනකයි! වෙබ් අඩවි ක්‍රියා කරන ආකාරය තේරුම් ගැනීමට මෙය හොඳම ආරම්භයයි.</p>
        </article>
        
        <section>
            <h3>මා ඉගෙනගත් දේවල්</h3>
            <ul>
                <li>ශීර්ෂක සහ ඡේද යෙදීමට</li>
                <li>ලැයිස්තු සැකසීමට</li>
                <li>වෙනත් පිටු වලට සබැඳි (links) යෙදීමට</li>
            </ul>
        </section>
        
        <section>
             <p>වැඩිදුර තොරතුරු සඳහා, ඔබට <a href="https://developer.mozilla.org/en-US/docs/Web/HTML" target="_blank">MDN Web Docs</a> වෙත පිවිසිය හැක.</p>
             <img src="https://via.placeholder.com/300" alt="සතුටු මුහුණක ලාංඡනය">
        </section>
    </main>
    
    <footer>
        <p>© 2025 - මගේ වෙබ් අඩවිය</p>
    </footer>

</body>
</html>

6. නිතර අසන ප්‍රශ්න (FAQ)

HTML හි මූලික කරුණු (tags, attributes) සතියක් වැනි කෙටි කාලයක් තුළ ඉතා පහසුවෙන් ඉගෙනගත හැක. නමුත්, HTML හි සියලුම tags සහ හොඳම භාවිතයන් (best practices) පිළිබඳව ප්‍රවීණයෙකු වීමට නම්, தொடர்ச்சியாக පුහුණුවීම සහ නව දේ ඉගෙනගැනීම වැදගත් වේ.

ආරම්භකයෙකුට Windows වල Notepad හෝ Mac වල TextEdit වුවද ප්‍රමාණවත්ය. නමුත් වෘත්තීය මට්ටමේදී, Visual Studio Code (VS Code), Sublime Text, හෝ Atom වැනි editors ඉතා ප්‍රයෝජනවත් වේ. ඒවායේ syntax highlighting, code completion වැනි පහසුකම් නිසා කේත ලිවීම වඩාත් පහසු සහ වේගවත් වේ.

සුභ පැතුම්! HTML යනු පළමු පියවරයි. ඔබේ වෙබ් නිර්මාණ ගමනේ ඊළඟ පියවර විය යුත්තේ:
  1. CSS (Cascading Style Sheets): ඔබේ HTML පිටු වලට වර්ණ, layouts, සහ fonts එක් කර අලංකාර කිරීමට.
  2. JavaScript: ඔබේ වෙබ් පිටු වලට ක්‍රියාකාරීත්වය (interactivity), animations, සහ ගතික (dynamic) අංග එක් කිරීමට.
මෙම තාක්ෂණයන් තුන (HTML, CSS, JavaScript) Front-End Web Development හි පදනම වේ.

පාඩම් අන්තර්ගතය

1. හැඳින්වීම 2. මූලික ව්‍යුහය 3. මූලික Tags 4. ගැඹුරු මාතෘකා 5. සම්පූර්ණ උදාහරණය 6. නිතර අසන ප්‍රශ්න

ඊළඟට කුමක්ද?

ඔබ දැන් සාර්ථකව HTML හි මූලික සහ අතරමැදි කරුණු ඉගෙනගෙන අවසන්. මෙය ඔබගේ වෙබ් නිර්මාණ ගමනේ විශිෂ්ට ජයග්‍රහණයකි. මීළඟට, වෙබ් පිටු අලංකාර කිරීමට යොදාගන්නා CSS (Cascading Style Sheets) ඉගෙනගැනීමට උත්සාහ කරන්න.

CSS පාඩම වෙත යන්න