📘 HTML පාඩම 2 – Text Formatting 🖋️, Images 🖼️ සහ Links 🔗
👋 හෙලෝ යාලුවනේ! ඔයාලා දැන් HTML structure එක ගැන දැනගෙන ඉන්නවනේ. දැන් අපි බලන්න යන්නේ text format කරන්න, image එකක් දාන්න, සහ link එකක් add කරන්න HTML වලින් කොහොමද කියලා. අරගෙන එන්න VS Code එක! 💻🔥
🖍️ Text Formatting – අකුරු හැඩ කරන විදිහ
Text එක highlight කරන්න, emphasize කරන්න හෝ bold/italic වගේ styles HTML වලින් apply කරන්න පුළුවන්. 😎
📌 මෙන්න වැදගත් tag ටික:
🏷️ Tag ✨ Description <b> Bold අකුරු 🅱️ <strong> Bold + importance 🧠 <i> Italic 🔤 <em> Italic + emphasis 🗣️ <u> Underline ✏️ <mark> Highlight 💡 <small> Small letters 🐜 <del> Strikethrough ❌ <ins> Inserted text ➕ 🧪 උදාහරණයක්:
<p>මේක <strong>වැදගත්</strong> කියමනක් 🧐</p> <p>ඔයා <em>සැලකිලිමත්</em> විය යුතුයි 😌</p> <p><u>යටින් ඉරි ඇඳූ වාක්‍යයකි</u> ✍️</p>
🖼️ Images – පින්තූර එක් කරන විදිහ
HTML එකෙන් image එකක් add කරන්න <img> tag එක use කරනවා. මේක self-closing tag එකක් (උපාංගයක් නැතුව අවසන්).
🧩 Syntax එක මෙන්න:
<img src="image-url" alt="description" width="200">
📌 වැදගත් Attributes:
src– image එක locate වෙලා තියෙන link එක 🌐alt– image එක load නොවුණොත් පෙන්වෙන text 🧾width,height– image එකේ size 📐
🧪 උදාහරණයක්:
<img src="https://via.placeholder.com/150" alt="Sample Image" width="150">
🔗 Links – සබැඳි (hyperlinks) දැමීම
Link එකක් click කරලා වෙන site එකකට jump වෙන්න HTML වලින් <a> tag එක භාවිතා කරනවා.
🧩 Syntax එක මෙන්න:
<a href="https://example.com" target="_blank">මෙතැන ක්ලික් කරන්න</a>
📌 වැදගත් Attributes:
href– යන්න ඕන URL එක 🌍target="_blank"– new tab එකකින් open වෙනවා 🆕
🧪 උදාහරණයක්:
<p>අපේ වෙබ් අඩවියට යන්න <a href="https://www.lk-tech.lk" target="_blank">මෙතැනින් යන්න</a> 🔗</p>
🧪 Challenge එකක් ඔයාට! 🎯
👇 පහත දේවල් තියෙන .html file එකක් හදලා try කරන්න:
✅ Paragraph එකක් – bold සහ italic text එක්ක
✅ Image එකක්
✅ Link එකක් YouTube හෝ LK Tech වෙත
🛠️ Example එක:
<!DOCTYPE html>
<html>
<head>
<title>HTML Lesson 2</title>
</head>
<body>
<h1>Text Formatting, Images සහ Links</h1>
<p><strong>මේක bold</strong> සහ <em>මේක italic</em> 🖋️</p>
<img src="https://via.placeholder.com/100" alt="Sample Image" width="100">
<p>Visit our <a href="https://youtube.com/@LKTech" target="_blank">YouTube Channel</a> 📺</p>
</body>
</html>
⏭️ ඊළඟ පාඩමේදී...
අපි බලන්න යන්නේ Lists (Ordered / Unordered) 📝 සහ Tables 🧮 කොහොමද හදන්නේ කියලා. ඒකත් අනිවාර්යයෙන්ම බලන්න!
🧠 Recap එක
- ✅ Text formatting tags:
<strong>,<em>,<u>,<mark> - ✅ Image එකක්:
<img src="" alt=""> - ✅ Link එකක්:
<a href="">Link</a>
👍 හොඳටම හැදුවානම් ඔයා දැන් HTML වලින් content එක සැරසිය හැකි level එකට ආවා. ඒක ලොකු achievement එකක්! 🎉
එහෙනම් දැන් Lesson 3 එකට සෙට් වෙන්න! 😁📚
Lesson 3 එක ඕනෙද? List සහ Table දෙකම cover කරලා දෙන්නම් 😄
Rasanjana
Member since 2025-04-09 13:55:06
Comments
Please login to post a comment.
Super