වෙබ් ඩිසයින් පාඩම 1

ළමායි....කව්ද කැමති වෙබ් සයිට් එකක් හදන්න.... හැමොම කැමති ඇති නේද තමන්ගෙන වෙබ් සයිට් එකක් හදා ගන්න..කො ඉතින් ඕවා කරන්න ඕන දැනුම??? හයියෝ වෙබ් ඩිසයිනින් ක්ලාස් එකකට ගියානම් ඉවරයිනේ..ඒත් ඉතින් 30000ක් විතර ගෙවන්න වෙයි..හරි කෝ ඉතින් සල්ලි...මාර ප්‍රශ්න නේ..



ඔන්න අද ඉදන් ඒ ප්‍රශ්නත් ඉවරයි..මම අද ඉදන් අලුත් වෙබ් ඩිසයින් ක්ලාස් එකක් පටන් ගන්නවා..හැබැයි නොමිලේ..මගේ ඔය සල්ලි වලට වැඩ නැනේ..නොමිලේ කිව්වට නොමිලේත් නෙමේයි..like එකක් හරි comment එකක් හරි අය කරනවා :ඩී  සතියට එක ගානේ තමයි මේ පිලිබද පොස්ට් වැටෙන්නේ..කැමතිනම් follow පාරක් දාන්න..හරි දැන් අපි පාඩමට ලෑස්ති වෙමු..

මම මුල ඉදන්ම කියලා දෙන්නම්..වෙබ් සයිට් හදන්න අරවා මෙවා පාවිච්චි කරනවනේ..ඒ කියන්නේ Java,CSS,HTML වගේ ඒවා..ඔය HTML(Hyper Text Markup Language)කියන එක තමා හැමෝගෙම මුල් පාඩම..ඕකෙන් තමා basic හැදෙන්නේ..

හරි ප්‍රාථමිකයි නේ..එහෙම තමා..හොද වෙබ් සයිට් එකක් හදන්නනම් HTML විතරක් දැනගෙන මදි. අනිත් ඒවත් දැන ගන්න ඕනා..

HTML වලින් සරල වෙබ් පිටුවක් හදමු අපි දැන්..ඉස්සල්ලම ඔයගොල්ලන්ගේ නෝට් පෑඩ් එක open කරගන්න..ඊට පස්සේ පල්ලෙහා පින්තූරේ තියන විදියට ඒක save කරගන්න ඕනා..

පින්තූර පේන්නේ නැත්නම් ඒක උඩ click කරන්න..


මේක මේ විදියට save කරගන්න එක තමයි ඉස්සලම කරන්න ඕනා හරිද..ඊට පස්සේ ඔයගොල්ලො save කරපු තැන තියන file එක open කරලා බලන්න..ඒක ඔයගොල්ලන්ගේ browser එකෙන් open වෙන්නේ..නැත්නම් හරියට save කරලා නෑ..එහෙමත් නැත්නම් open with ගිහිල්ලා browser එකෙන් open කරලා බලන්න..දැන් හරි නේ..

HTML වල අපිට ඕනෙනම් CAPITAL අකුරු වලින් උනත් ටයිප් කරන්න පුලුවන්.ඒත් simple අකුරුවලින් කරන්න පුරුදු වෙන එක තමා හොඳ..මොකද xhtml වල අනිවාර්යෙන්ම ටයිප් කරන්න ඕන simple අකුරුවලින් නිසා..අනික space එහෙම තිබ්බට html වල ගනන් ගන්නේ නෑ..ඒක නිසා පුලුවන් තරම් space තියාගෙන පැහැදිලිව ටයිප් කරන්න.පස්සේ වෙනස් කරන්න උනත් ලේසියි ඔතකොට..

ඊළගට ඕනම HTML වලින් හදන පිටුවක ඇතුලත් වෙන මූලික tag වගයක් තියනවා..ඒ tag වලින් තමා අපේ browser එක හදුනා ගන්නේ මොකක්ද වෙන්න ඕනා කියලා..ඒ tag ටික පහල පින්තූරේ තියනවා..


<html>

<title>
browser එකේ උඩ වැටෙන නම..
</title>

<head>
මාතෘකාව එන්නේ මෙතනට
</head>

<body>
එකේ එක මෙතන..හරියට රචනාවක වගේ..පේජ් එකේ ශරීරය කිව්වොත් හරි
</body>

</html>

ඔයගොල්ලොත් ඒ විදියට ඔයගොල්ලො අර save කර ගත්තු නෝට් පෑඩ් එකේ ටයිප් කරන්න..ඒ හැම ටැග් එකක්ම ඉවර වෙන්නේ </     > සිම්බල් එක දාලා..

දැන් මං සරල ටැග් ටිකක් කියලා දෙන්නම්..

මේකේ එක එක font sizes තියනවා..h1 ඉදන් h6 වෙනකන් තමා තියෙන්නේ..h6 කියන්නේ පොඩිම එක..h1 කියන්නේ ලොකුම එක..

 <h1> topic </h1>
 <h2> topic </h2>
 <h3> topic </h3>
 <h4> topic </h4>
 <h5> topic </h5>
 <h6> topic </h6>


අපි හිතමු අපි ලියන පේලිය අත ඇරලා අපිට වෙන ලයින් එකක ඉදන් පටන් ගන්න ඔනා කියලා..අහෙනම් මේ ටැග් එක use කරන්න..
<br/>

ඉරකින් වෙන් කරන්න කැමතිනම් මේ ටැග් එක..
<hr/>

background ඒකේ පාට වෙනස් කරන්නේ මෙහෙම..
<body bgcolor="red">

කලර් කොඩ් නම් තියනවා 00000 ඉදන් ffffff වෙනකන්...උදා: 000000, acd352, 0da3e4, 234510, c32da2 වගේ එවා..

නැත්නම් ඔයගොල්ලන්ට කැමති පාටක් ටයිප් කරන්න පුලුවන්..උදා:yellow,green,red,blue..

පිංතූරයක් දා ගන්නේ මේ tag එකෙන්..
<img src="C:\Users\Ravindu\Desktop\blog\images\a.jpg">

හැබයි ඔයගොල්ලන්ගේ නෝට් පෑඩ් එක සේව් කරපු තැනට මේකත් කොපි කරලා ඒ ඇඩ්‍රස් එක දැම්මොත් ලේස්යි..ඔතකොට මුලු address එකම නොදා ෆයිල් එකේ නම දැම්මත් ඇති..
<img src="a.jpg">

ඉමේජ් සයිස් වෙනස් කරන ටැග් එක..

<img src="a.jpg" width="100%" height="20%">
මේකේ අපි  % වලින් දැම්මොත් මුලු page එකෙන් ප්‍රතිශතයක් විදියට පෙන්නනේ.. % නැතුව නිකම් දැම්මොත් pixel size එක හැටියට තමා browser එක ගන්නේ.


වෙන link එකක් add කරගන්නේ මේහෙමයි..
<a href="https://www.facebook.com/"> මෙතන display වෙන්න ඕන text එක type කරන්න</a>

ෆොන්ට් වලට දාන වැඩ කෑලි..

bold කරන්න..
<b> what you want to type </b>

italic කරන්න..
<i> what you want type</i>

underline කරන්න..
<u> what you want to type </u>

පාට වෙනස් කරන්න..
 <font color="green">what you want to type</font color>

හරි..අදට පාඩම ඉවරයි..


                                                                     නෝට් පෑඩ් එක:: 

අදාල ඩිසයින් එක..(මම මේ කරලා තියෙන්නේ නිකං නිදසුනක් විතරයි):: 


දැනට මේ ටික දාලා creative විදියට පොඩි page එකක් හදාගන්න පුලුවන්..


ඊලග පොස්ට් එකෙන් මම කියලා දෙන්නම් කොහොමද ටේබ්ල් පාවිච්චි කරන්නේ කියලා..ලී මේස නෙමේයි හරිද??වගුවක් පාවිච්චි කරලා මීට වඩා පොඩ්ඩක් ඇඩ්වාන්ස් පේජ් එකක් හදා ගන්න විදිය..

එහෙනම් ගුරුතුමා කැපුනා..ඊළග පන්තියේදී හම්බවෙමු..

ලියුවේ : Unknown ~ Ravindu Ariyawansa

කමෙන්ට් එකක් දාලා යන්න අමතක කරන්න එපා..

 

9 comments:

  1. ඔන්න මමයි උඹේ පළවෙනි ෆලෝවර්... සුභ පැතුම්...

    ReplyDelete
  2. හැම බ්ලොග් නවකයෙක්ටම දෙන පළවෙනි ඇඩ්වයිස් එක.... වර්ඩ් වෙරිෆිකේශන් අයින් කරපන්... :ඩී

    ReplyDelete
  3. බොහොම ස්තූතියි සහෝදරයා..මගේ බ්ලොග් එකේ පළවෙනි ෆලොවර් ආනන්දියෙක් වීම මට කියාගන්න බැරි තරම් සතුටක් සහ දහිරියක්...

    වෙරිෆිකේශන් අයින් කරන හැටි පොඩ්ක් කියන්න පුලුවන්ද??

    ReplyDelete
  4. අප්පට හුඩු උඹ මාව හොයාගත්තද?? නෑනෙ?? හොයාගත්තනම් පෞද්ගලිකව කියපන්....

    settings>>> comments>>> Show word verification for comments>>> tick NO and save

    ජයවේවා...දිගටම ලියපන්....

    ReplyDelete
  5. ඔයාට ගොඩක් පින්..
    බංඩාර

    ReplyDelete
  6. ජය වේවා සහො😊😊😊

    ReplyDelete