|
🧾 HTML පාඩම 3 – ලැයිස්තු 📝 සහ වගු 📊

🧾 HTML පාඩම 3 – ලැයිස්තු 📝 සහ වගු 📊

technology web development
By Rasanjana • 2025-04-11 13:00:50

හෙලෝ යාලුවනේ! 👋


ඔයාලා දැන් HTML structure එකත්, text formatting, images, links ගැනත් දැනගෙන ඉන්නවා නේද? දැන් අපි බලමු කොහොමද ලැයිස්තු (lists) 📝 සහ වගු (tables) 📊 HTML වලින් හදන්නේ කියලා!

📝 HTML Lists – ලැයිස්තු

HTML වලින් ලැයිස්තු හදන විදිහ තියෙන්නේ පහසුයි. මූලිකවම lists දෙකක් තියෙනවා:

  1. ✅ Unordered List – බුලට් ලැයිස්තුවක් (bullets 🟢)
  2. 🔢 Ordered List – අංක වලින් හෝ අකුරු වලින් යුතු list එකක්


✅ Unordered List – <ul> + <li>

<h3>මගේ කැමති කෑමන් 🍛</h3>
<ul>
  <li>Rice 🍚</li>
  <li>Fried Chicken 🍗</li>
  <li>Ice Cream 🍨</li>
</ul>

🟢 මෙකේ output එක:

  • Rice 🍚
  • Fried Chicken 🍗
  • Ice Cream 🍨


🔢 Ordered List – <ol> + <li>

<h3>දවසේ වැඩ 🕒</h3>
<ol>
  <li>උදේ නැගීම ⏰</li>
  <li>Brush කිරීම 🪥</li>
  <li>Code ලියන එක 💻</li>
</ol>

🔢 මෙකේ output එක:

  1. උදේ නැගීම ⏰
  2. Brush කිරීම 🪥
  3. Code ලියන එක 💻


🔁 Nested Lists – list එකක් ඇතුළේ තවත් list එකක්

<ul>
  <li>ආහාර 🍴
    <ul>
      <li>Rice 🍚</li>
      <li>Noodles 🍜</li>
    </ul>
  </li>
  <li>පානීය 🍹</li>
</ul>


📊 HTML Tables – වගු

HTML Table එකක් කියන්නේ කණ්ණාඩි මෙන් වැදගත් data display කරන්න ගොඩක් වැදගත් උපාංගයක්.

📌 වැදගත් tag ටික:

Tag අදහස <table> වගුව start කරන්න <tr> row එකක් <th> heading cell එකක් (bold + center) <td> data cell එකක් 📋 උදාහරණය:

<h3>LK Tech පන්ති වාරය 📅</h3>
<table border="1">
  <tr>
    <th>දිනය</th>
    <th>විෂයය</th>
    <th>වේලාව</th>
  </tr>
  <tr>
    <td>සඳුදා</td>
    <td>HTML</td>
    <td>6PM</td>
  </tr>
  <tr>
    <td>බදාදා</td>
    <td>CSS</td>
    <td>6PM</td>
  </tr>
</table>


📌 border="1" කියන්නෙ line එකක් draw කරන්න කියන එක.

🛠️ Try කරන්න පුළුවන් full example එකක් 💻

<!DOCTYPE html>
<html>
  <head>
    <title>HTML Lesson 3</title>
  </head>
  <body>

    <h2>🍱 මගේ කැමති කෑම ලැයිස්තුව</h2>
    <ul>
      <li>Rice 🍚</li>
      <li>Fried Fish 🐟</li>
      <li>Ice Cream 🍨</li>
    </ul>

    <h2>📋 අද වැඩ ලැයිස්තුව</h2>
    <ol>
      <li>Brush 🪥</li>
      <li>Code 💻</li>
      <li>Read 📖</li>
    </ol>

    <h2>📊 LK Tech පන්ති වගුව</h2>
    <table border="1">
      <tr>
        <th>දිනය</th>
        <th>විෂයය</th>
        <th>වේලාව</th>
      </tr>
      <tr>
        <td>සඳුදා</td>
        <td>HTML</td>
        <td>6PM</td>
      </tr>
      <tr>
        <td>අඟහ</td>
        <td>CSS</td>
        <td>6PM</td>
      </tr>
    </table>

  </body>
</html>


🧠 Recap එක:

  • ✅ <ul>, <ol>, <li> – Lists
  • ✅ <table>, <tr>, <th>, <td> – Tables

⏭️ ඊළඟ පාඩම – HTML Form එකක් හදන හැටි! 📝

අපි බලමු කොහොමද user input එකක් collect කරන්න HTML form එකක් හරහා — text fields, buttons, radio buttons, checkboxes, සහ submit button එක ❤️

👀 බලලා හොඳයිද කියලා කියන්න! ඊළඟ එක form එක ද? 😁📨

Rasanjana

Rasanjana

Member since 2025-04-09 13:55:06

Comments

Please login to post a comment.

No comments yet. Be the first to comment!