සුභ දවසක් හැමෝටම.

අද අපි එකතු වෙලා ඉන්නේ HTML 05 වෙනි පාඩම් මාලාවත් එක්කයි. HTML පාඩම් මාලාව මගහැරුණු කෙනෙක් ඉන්නවනම් පසු ගිය පාඩම් බලන්න පුළුවන්.

HTML හැදින්වීම හා ඉතිහාසය #පාඩම් මාලාව 01

‌Basic HTML Tags හදුනගනිමු #පාඩම් මාලාව 02

Simple Web Page එකක් හදමු. #HTML පාඩම් මාලාව 03

වෙබ් පිටු නිර්මාණය #HTML Text Formatting Explained #Lesson04

 

හරි අපි අද කථා කරමු HTML Styles ගැන.

Lesson Content:

  1. HTML Background Color
  2. HTML Text Color
  3. HTML Fonts
  4. HTML Text Size
  5. HTML Text Alignment

 

The HTML Style Attribute :  <tagname style=”property:value;”>

 

1.HTML Background Color

html සහිත web පිටුවක Background එක Color කරන්නේ කොහොමද කියලා අපි දැන් බලමු. පහල උදාහරණය බලන්න.

[html]</pre>
<html>
<body style="background-color:powderblue;">

<h1>This is a heading</h1>
<p>This is a paragraph.</p>

</body>
</html>
<pre>
[/html]

tag name එක විදිහට body එකද, Property එක Background-color ලෙසද, value එක Powderblue ලෙසද සදහන් කරන්න පුළුවන්. එවිට පහත පරිදි OutPut එකක් ලැබෙනවා. මෙහිදී ඔයාට කැමති color එකක් value එකට add කරන්න පුළුවන්. මේ Color Codes භාවිතා කරන්නත් පුළුවන්

 


 

2.HTML Text Color

HTML සහිත Text එකකට color එකක් දාගන්න විදිහ බලමු, පහල උදාහරණය බලන්න.

[html]</pre>
<html>
<body>

<h1 style="color:blue;">This is a heading</h1>
<p style="color:red;">This is a paragraph.</p>

</body>
</html>
<pre>[/html]

tag name එක විදිහට h1 එකද, Property එක color ලෙසද, value එක blue ලෙසද සදහන් කරන්න පුළුවන්. එවිට පහත පරිදි OutPut එකක් ලැබෙනවා. ඔයාලට පුළුවන් කැමති color එකක් value එකට දාගන්න. මේ Color Codes භාවිතා කරන්නත් පුළුවන්


 

 

3.HTML Fonts

දැන් බලමු Font style එකක් දාගන්නේ කොහොමද කියලා. පහල උදාහරණය බලන්නකො.

[html]</pre>
<html>
<body>

<h1 style="font-family:verdana;">This is a heading</h1>
<p style="font-family:courier;">This is a paragraph.</p>

</body>
</html>
<pre>[/html]

tag name එක විදිහට h1 එකද, Property එක font-family ලෙසද, value එක verdana ලෙසද සදහන් කරන්න පුළුවන්. එවිට පහත පරිදි OutPut එකක් ලැබෙනවා. ඔයාලට පුළුවන් කැමති font එකක් value එකට දාගන්න. මෙතනින් බලන්න පුළුවන් ඔයාලට මේ HTML Standard Fonts මොනවද කියලා.


 

 

4.HTML Text Size

Heading වලට අමතරව Text එකේ Size එක හදාගන්න පුළුවන් අපිට අවශ්‍යය ප්‍රමාණයෙන්, පහත උදාහරණය බලන්න.

[html]</pre>
<html>
<body>

<h1 style="font-size:80px;">This is a heading</h1>
<p style="font-size:160%;">This is a paragraph.</p>

</body>
</html>
<pre>
[/html]

tag name එක විදිහට h1 එකද, Property එක font-size ලෙසද, value එක 80px ලෙසද සදහන් කරන්න පුළුවන්. එවිට පහත පරිදි OutPut එකක් ලැබෙනවා. ඔයාලට පුළුවන් කැමති size එකක් value එකට දාගන්න. මෙහිදී value (text size) එක px හෝ % ලෙස සටහන් කල හැකිය.

 


 

 

5.HTML Text Alignment

මෙහිදී Text එක Left,Center,Right ලෙස සටහන් කිරීමට හැක. පහත උදාහරණය බලන්න.

[html]</pre>
<html>
<body>

<h1 style="text-align:center;">Centered Heading</h1>
<p style="text-align:left;">left paragraph.</p>
<p style="text-align:right;">right paragraph.</p>

</body>
</html>
<pre>
[/html]

මෙහිදී මම පිටුවේ මැදට heading එකක්ද,වම් පස හා දකුනු පසට paragraph දෙකක්ද යොදා ඇත. tag name එක විදිහට h1 එකද, Property එක text-align ලෙසද, value එක center ලෙසද සදහන් කරන්න පුළුවන්. එවිට පහත පරිදි OutPut එකක් ලැබෙනවා.

හරි. අපි අද ඉගෙන ගත්තේ HTML Style ගැන. මේවා දිගින් දිගටම web pages හද හදා practice  කරන්න. අපි තවත් ලිපියකින් හමුවෙමු.

සුභ දවසක්!

 

අදහස් දක්වන්න

අදහස්

‌රැදී සිටින්න...

ඔබත් ගීක් කෙනෙක්ද?

අලුත්ම Geek ලිපි එසැනින් ලබාගන්න අපිව Subscribe කරන්න. දැනුම සොයා යන තරුණ ඔබත් එන්න,ගීක් කෙනෙකු වන්න,

ඔබත් දැන්ම ගීක් කෙනෙක් වෙන්න!

You have successfully subscribed to the Geek

There was an error while trying to send your request. Please try again.

SL Geek LK will use the information you provide on this form to be in touch with you and to provide updates and marketing.

ස්මාර්ට් ගීක් කෙනෙක් වෙන්න! ගීක් මොබයිල් ඇප් එක දාගන්න.

Download Geek App now