HTML මුල සිට(වෙබ් අඩවි නිර්මාණය) lesson 01 - උසස්පෙළ තොරතුරු හා සන්නිවේදන තාක්ෂණය

HTML මුල සිට(වෙබ් අඩවි නිර්මාණය) lesson 01

වෙබ් අඩවි නිර්මාණය

HTML

අප වේබ් අඩවි නිර්මාණයේ දී භාෂාවන් කිහිපයක් බහුලව භාවිතා කරනු ලබයි.ඒවා නම්,

  • HTML
  • CSS
  • PHP

HTML- (Hypertext Markup Language)

HTML භාවිතයෙන් නිර්මාණකරන විට අපට <Tag>භාවිතා කිරිමට සිදුවේ.එවිට සෑමtag එකක්ම <> යන සලකුනු 2 ඇතුලත සඳහන් කරනු ලැබේ.

  • උදා - <i>,<p>,<u>

මෙහිදි භාවිතා වන්නේ ඇමරිකානු English භාෂාවයි.(u.s english).

මෙහිදි Capital ,Simpal බෙදයක් නොපවති.

HTMLආරම්බක පියවර

<HTML>

<head

<title> වෙබ් පිටුවේ නම(title bar name)</title>

</head>

<body>

වෙබ් පිටුව තුල සිිදුකරනු ලබන සෑම වෙනස් කිරිමක්ම සිදු කිරිම

</body>

</html>

 

 මොකක්ද මේ <title> වෙබ් පිටුවේ නම(title bar name)</title> කියන්නේ.

අප විසින් අප සදනු ලබන පිටුව සඳහා නමක් ලබාදේ.එය ඉහල තීරුවෙහි tab ප්‍රදර්ශණය කිරිම සඳහා මෙම tag භාවිතා කරනු ලබයි.

 

 

දැන් ඔබට පැහැදිලි ඇති මෙකක්ද මේ <title> tag එකෙන් වෙන්නේ කියලා

දැන් අපි බලමු <body> tag පසුව සිදුවන සැම සිදුවිමක්ම♥

අප පළමුමෙන්ම දැනගතයුතු වන්නේ අප විසින් යෙදනු ලබනtag එක අවසානයක් සහිතtag එකක්ද? යන්නයි.tag ආකාර 02 කට පැවතිය හැකිය.

  1. අවසානයක් සහිතtag භාවිතය 
  2. අවසානයක් නැති tag භාවිතය 

මෙවනවද? මේ අවසානයක් සහිත හා නැති tag භාවිතය කියන්නේ????????

අවසානයක් සහිතtag භාවිතය

අප භාවිතා කරනු ලබන බොහොමයක් tag සඳහා අවසානයක් පෙන්නුම් කරයි.උදාහරණයක් ලෙස ගත්තොත් අපට යම් සිමාවක් දක්වා වචන කිහිපයක් ඇද ආකාරයට හැඩ ගැන්විය යුතුව ඇත්නම් , එය යම් සිමාවක් දක්වා හෙයින් ආරම්භක අවස්ථාවෙදි මෙන්ම අවසාන අවස්ථාව දක්වා එම tag එක තබා අවසන් කළ යුතුය.

  •   ආරම්බක ආකාරය - <.........>
  •   අවසාන ආකාරය -</...........>

උදා - <i>.............................................................</i>

       <b>.............................................................</b>

 

අවසානයක් සහිතtag භාවිතය

වෙනස් කම් සිදු කරන විට අපට එම වෙනස්කම යම් සිමාවක් දක්වා අවශ්‍ය නොවේනම් එය සඳහා අවසානය සහිත tag භාවිතා නොකරයි.

උදා - පිංතූරයක්, විඩියෝවක්,පෙළි කඩන විට 

 

tags

බහුලව භාවිතා වන tags  

  1. <b>...</b> Bold අකුරු තද පැහැ ගැන්වීම           HTML
  2. <u>..</u>  Underline යටින් ඉරි ඇඳිම             HTML
  3. <i>..</i>    Italic  අකුරු ඇද කිරිම                  HTML
  4. <p>..</p>  paragraph ඡේද භාවිතය               HTML
  5. <s>..</s>   strikethrough  මැදි ඉර ඇඳිම        HTML
  6. <h1>-<h6>.....</h1></h6>  Head  මාතෘකා භාවිතයට    HTML
  7. <table>.....</table>  table නිර්මාණය
  8. <a href="">.....</a> තවත් web පිටුවක් link කිරිම
  9. <img src=""> පිංතුරයක් දැමීම.
  10. <ol>...</ol> අංකික list භාවිතය
  11. <ul>...</ul> සංඛේතාත්මක list භාවිතය
  12. <dl>...</dl> අනු කෙටස් සඳහා list භාවිතය
  13. <br> පේළි කැඩිමට

 ඉහත අපි සඳහන් කළා <h1>-<h6>.....</h1></h6>

<h> tag එකෙන් ඇත්තටම වෙන්නේ <b> හා font size එක තරමක් විශාල වී තිබිමයි.

මෙහි <h1>සිට <h6> දක්වා ඇත.

<h1> font size=72

<h2> font size=48

<h3> font size=36

<h4> font size=22

<h5> font size=18

<h6> font size=12 වගේ....

දැන් අපි බලමු කුඩා වෙබ් පිටුවක් නිර්මාණය කරන්නේ කොහොමද කියලා......................

 

 

<HTML>
<HEAD>
<TITLE> 1ST LESSON</TITLE>
</HEAD>
<BODY>

<B>MY FIRST WEB PAGE</B>
<BR>
<U>MY FIRST WEB PAGE</U>
<BR>
<I>MY FIRST WEB PAGE</I>
<BR>
<P>MY FIRST WEB PAGE</P>
<BR>
<S>MY FIRST WEB PAGE</S>
<br>
<h1>MY FIRST WEB PAGE</h1>
<br>
<h2>MY FIRST WEB PAGE</h2>
<br>
<h3>MY FIRST WEB PAGE</h3>
<br>
<h4>MY FIRST WEB PAGE</h4>
<br>
<h5>MY FIRST WEB PAGE</h5>
<br>
<h6>MY FIRST WEB PAGE</h6>
</body>
</html>

 

 

 දැන් අපි බලමු වෙබ් පිටුවක් හැඩ කරන්නේ කෙහොමද කියලා

  •  align කිරිම

ආකාර 04 කි.

  1. left වමට එල්ල කිරිම
  2. center මැදට එල්ල කිරිම
  3. right දකුණට එල්ල කිරිම
  4. justify එක එල්ල කිරිම

***සාමාන්‍යන් අප අකුරු එල්ල කිරිමේදි එය <p> tag එක තුල සිදු කරයි තවද,(align,font size,font face,font color)සියල්ල එකවර භාවිතයේදිද මෙම ක්‍රමයටම සිදු කරනු ලබයි.***

අප center කරනවානම් ක්‍රම 02 ඇත.

  1. <center>.........................</center>
  2. <p align="center">...............</P>

left,right,justify කිරිම

  • <p align="left">...............</P>
  • <p align="right">...............</P>
  • <p align="justfy">...............</P>

font අකුරු හැඩ ගැන්විම(face,color,size)

♠face- 

<font face="අකුරු වර්ගයේ නම">...........................</font>

උදා - 

<font face="Arial">...........................</font>

♠color - 

<font color="අකුරු වර්ගයේ වර්ණය">...........................</font>

උදා - 

<font color="red">...........................</font>

♠size - 

<font size="අකුරු වර්ගයේ ප්‍රමාණය">...........................</font>

උදා - 

<font size="36">...........................</font>

♠size-color-align-face -

<p align="...."><font face="...."font color="..."font size="...">...........................</font></p>   </font> 03 ක් දැමිමට අවශ්‍ය නත.

 දැන් අපි බලමු වෙබ් පිටුවක් හැඩ කරලා හදන්නේ කොහොමද කියලා

 

<HTML>
<HEAD>
<TITLE> 1ST LESSON modify</TITLE>
</HEAD>
<BODY>
<center>MY FIRST WEB PAGE</center>
<br>
<p align="center">MY FIRST WEB PAGE</p>
<br>
<p align="left">MY FIRST WEB PAGE</p>
<br>
<p align="justify">this is<br>MY FIRST WEB PAGE</p>
<br>
<p align="right">MY FIRST WEB PAGE</p>
<br>
<font face="Bodoni MT Black">MY FIRST WEB PAGE</font>
<br>
<font color="orange">MY FIRST WEB PAGE</font>
<br>
<font size="36">MY FIRST WEB PAGE</font>
<br>
<p align="center"><font face="Bodoni MT Black"font color="green"font size="36">
MY FIRST WEB PAGE
</font>
</body>
</html>

කතෘ : Roshan Thiranjaya
ශ්‍රේණිය : උසස්පෙළ
විෂය : තොරතුරු හා සන්නිවේදන තාක්ෂණය
කියවූ ගණන : 5,150
කැමති ගණන : 2