HTML මුල සිට සරලව!!! ( 6 කොටස) - SL_Tech_Zone

Latest

SL_Tech_Zone

අපගේ නමවතම තාක්ශනික Blog අඩවියට ඔබව සාදරයෙන් පිලිගන්නව...Linux,Windows,Android පිලිබදවත්...අනෙකුත් තාක්ෂණික තොරතුරු අපගේ Blog අඩවියෙන් ඔබට ලබාගත හැක... *Education Purpose Only..! SL_TECH_ZONE Admins : Thilina & Amila

Thursday, February 21, 2019

HTML මුල සිට සරලව!!! ( 6 කොටස)


කොහොමද යාලුවනේ…ගොඩ කාලෙකට පස්සෙ බ්ලොග් එක පැත්තෙ ආවෙ…මතක ඇති අපි html tut ටිකක් දැම්ම ඒ සෙට් එකේ හයවෙනි කොටස තමා අද දෙන්න යන්නෙ…


HTML පරණ post 5 කියෙව්වෙ නැත්නම් මේ Link වලට ගිහින් කියවන්න!




මේකෙදි කතාකරන්න යන්නෙ colors පිලිබදව…web page එකක් ලස්සනට තියාගන්න නතුවම බැරි දෙයක්නෙ ඉතින් colors කියන්නෙ…මුලින්ම අපි බලමු Headline එකක හරි Paragraph එකක හරි Background එකට color දාන හැටි…මේඋදාහරනෙ බැලුවොත් ඔයාලට තේරෙයි…

<html>
<head>
<title>Colors</title>
</head>
<body>
<h1 style="background-color:Blue;">Blue Background Heading</h1>
<p style="background-color:Red;">This paragraph with red background.</p>
</body>
</html>




Code එක සරලව කිවුවොත්
<h1(or p) style=”background-color:පාට;>heading or paragraph</h1>
ඔය විදිහට තමා code වෙන්නෙ…දැන් බලමු text වල color වෙනස්කරන හැටි….
ඒකත් මුලින්ම උදාහරණයක් දෙන්නම්!

<html>
<head>
<title>Colors</title>
</head>
<body>
<h1 style="color:Blue;">Blue Color Heading</h1>
<p style="color:Red;">This paragraph with red text.</p>
</body>
</html>


ඒකෙත් code එක එන පිලිවෙල මේකයි ….
<h1(or p)  style="color:පාට;">Heading or paragraph</h1>
තේරෙන්න ඇති කියල හිතෙනව…දැන් බලමු heading එකට හරි paragraph එකට හරි border එකක් දාන හැටි…
<html>
<head>
<title>Color</title>
</head>
<body>
<h1 style="border:3px solid Red;">Headline with 3px Red Border</h1>
<p style="border:2px solid Blue;">Paragraph with 2px Blue Border</p>
</body>
</html>


උදාහරනෙ දැක්කහම තේරෙනව ඇති මේකෙන් border එකේ colore එක වගේම size එකත් වෙනස්  කරන්න පුලුවන් කියල…මේකෙ code වෙන විදිහ මෙහෙමයි …
<h1(or p) style=”border:(Border එකේ pixel ගාන) solid (පාට);”>Heading එක හරි Paragraph එක </h1>

හරි එහෙනම් අපිට color දාන්න පුලුවන් විදි කිහිපයකුත්  තියනව ….අපි උඩ උදාහරණ වලදි පාවිච්චිකලේ නිකම්ම color එකේ නම …මේ විදිහට අපිට ඕනෙ පාට දාන්න අමාරුයි…ඉතිeන් එකට විදි ඔඩක් html වලදි පාවිච්චි කරනව …මන් එකින් එක කියන්නම් උදාහරණත් එක්ක!

RGB values

rgb(රතු,කොල,නිල්)
මේ color වල එක පාටකින් එන්න ඕනෙ ප්‍රමානය 0 ත් 255 වෙනකම් දාන්න ඕනෙ …
Rgb(255,0,0) මේකෙන් රතු පාට ගන්න පුලුවන්…මේ code එක Photoshop වලින් ලේසියෙන්ම color picker එකෙන් ගන්න පුලුවන්..

Hexa

#RRGGBB
උඩකිවුව විදිහටම අංක වලින් දාපු අගය hexa(16 පාදයෙන්)දාන්න තියෙන්නෙ…
#00FF00 මෙකෙන් කොල පාට පෙන්නනව …
ඒවගේම hsl කරමේට පාට යොදන්න පුලුවන්…ඒකෙදිත් rgb වල වගේම hsl වරහනක් දාල (hue,saturation,lightness) දානව..
ඒ වගේම rgb hsl අගට තවත් a අකුරක් දාල විනිවිද පේන පරමානය අඩු වැඩි කරන්න පුලුවන්…
rgba(255,0,0,0.5)
hsla(0,100%,50%,0.3)
ඉතින් මේව code කරලම බලන්න …එතකොට තේරෙයි එන විදිහ…

එහෙනම් ඉතින් මේ post එකත් ඉවරයි..ගැටලු තියෙයිනම් comment කරන්න!වැදගත් කියල හිතෙනවනම් යාලුවන්ට බලන්න share කරන්න!එහෙනම් මම කැපුන…
බුදු සරණයි!

No comments:

Post a Comment