Monday, November 28, 2016

HTML Lesson Part 11 චලනය වන අක්ෂර නිර්මාණය

සජීවීකරණ භාවිතය මගින් වෙබ් පිටුවක ආකර්ශණීය බව වැඩි කරගත හැකිය.


පාඨ කොටස් හෝ පින්තූරයන් දිශාවක් ඔස්සේ චලනය කිරීම මෙමගින් අදහස් කෙරේ. මේ සඳහා <MARQUEE> </MARQUEE> ටැග් එක භාවිතා කරයි.

මේ සමඟ භාවිතා වන අනු උපදේශ කේත.

කේතය හා කාර්යය

යෙදෙන ආකාර

විස්තරය
DIRECTION
(චලනය වන දිශාව)
<MARQUEE DIRECTION="RIGHT"> අන්තර්ගතය දකුණට චලනය වේ.
<MARQUEE DIRECTION="LEFT"> අන්තර්ගතය වමට චලනය වේ.
<MARQUEE DIRECTION="UP"> අන්තර්ගතය ඉහළට චලනය වේ.
<MARQUEE DIRECTION="DOWN"> අන්තර්ගතය පහළට චලනය වේ.
BEHAVIOR
(චලනයේ ස්වභාවය)
<MARQUEE BEHAVIOR="SLIDE"> චලනය එක් වරක් ක්‍රියාත්මක වී නවතී.
<MARQUEE BEHAVIOR="SCROLL"> චලනය නොනැවතී ක්‍රියාත්මක වේ
<MARQUEE BEHAVIOR="ALTERNATE"> දෙපසට චලනය වේ.
SCROLLAMOUNT
(චලනයේ වේගය)
<MARQUEE SCROLLAMOUNT="10"> අගය වැඩි වන විට වේගය වැඩි වේ.

මවුස් පොයන්ටරය තැබූ විට චලනය නැවතීමට හා ඉවත් කළ විට නැවත ආරම්භ වීමට පහත පරිදි යෙදිය හැකිය

<MARQUEE onMouseOver="this.stop();" onMouseOut="this.start();">TEXT OR IMAGE</MARQUEE>

ක්ලික් කරන විට නැවතීමට හා අතහැරය විට නැවත ආරම්භ වීමට පහත පරිදි යෙදිය හැකිය

<MARQUEE onMouseDown="this.stop();" onMouseUp="this.start();">TEXT OR IMAGE</MARQUEE>

චලන නිර්මාණය දාහරණය බාගත කරගන්න

Friday, November 25, 2016

HTML Lesson Part - 10 පෝරම නිර්මාණය

දත්ත එක්රැස් කරගැනීම සඳහා මෙන්ම කවත් බොහෝ කටයුුතු සඳහා අත්‍යවශ්‍ය වන පෝරම අංගයන් නිර්මාණය කිරීම පිළිබඳව මෙහිදී විස්තර කෙරේ.


පෝරම නිර්මාණයේදී යොදන කේත සවිස්තරව පහත දැක්වේ.

කාර්යය

කේතය(මූලික කේතය සමග අදාල කේතය ඇතුලත් කර ඇත)

විස්තරය
මූලික කේතය <FORM> </FORM> පෝරමයක් බව හඳුන්වයි
ටෙක්ස්ට් බොක්ස් <input type="text"
name="txt_name"
id="txt_name"
value=""
size="25"
maxlength="30"/>
  • 'name' මගින් යෙදෙන නම php සමග වැඩකරීමට අවශ්‍ය වේ.
  • 'id' භාවිතා වන්නේ Java Script, JQuerys සහ CSS සමඟ කටයුතු කිරීමේදී ය
  • 'value; මගින් ටෙක්ස්බොක්ස් එකට ටෙක්ස්ට් එකක් ඇතුලත් කර තැබීමට හැකිය.
  • 'size' මගින් ටෙක්ස්ට් බොක්ස් එකේ දිග ඇතුලත් කළ හැකිය
  • 'maxlength' මගින් ඇතුලත් කළ හැකි උපරිම අනුලක්ෂණ ප්‍රමාණය දක්වයි
ඩ්‍රොප් ඩවුන් ලිස්ට් <select name="ddl_city">
<option>select one....</option>
<option>KALUTHARA</option>
<option selected>
GALLE</option> <option>KANDY</option>
</select>
  • 'option' මගින් ඩ්‍රොප් ඩවුන් ලිස්ට් එක සඳහා ඔප්ෂන්ස් නිර්මාණය කළ හැකිය.
  • 'selected' යන්න <option selected > ලෙස ඔප්ෂන් ටැග් එක තුල යෙදුනු විට, පිටුව ලෝඩ් වන අවස්ථාවේදී ලිස්ට් එකෙහි පෙර නිමි තේරීම වන්නේ එම ඔප්ෂන් එකයි
ටෙක්ස්ට් ඒරියා <textarea
name="emp_eq"
id="emp_eq" cols="40"
rows="20">
VALUE
</textarea>
  • 'cols' මගින් ටෙක්ස්ට් ඒරියා එකේ පළළ නිරූපණය වේ.
  • 'rows' මගින් ටෙක්ස්ට් ඒරියා එකේ උස නිරූපණය වේ.
ඔප්ෂන් බට්න්ස් <input type="radio" name="emp_gen" id="emp_M" value="M" checked >Male</input>
  • 'value' මගින් දක්වන්නේ එම බට්න් එක සිලෙක්ට් කර ඇති අවස්ථාවේදී පෝස්ට් කරන අගය යි.
  • 'checked' මගින් පිටුව ලෝඩ් වන අවස්ථාවේදී බට්න් ගෘප් එකෙහි පෙර නිමි තේරීම වන්නේ එම බට්න් එකයි
  • 'name' බට්න්ස් එකම ගෘප් එකක් ලෙස ක්‍රියා කරවීම සඳහ name එකට එකම අගය දිය යුතුය.
  • 'id' මගින් බට්න් එකක් අනන්‍යව හඳුනාගනි යි.
චෙක් බොක්ස් <input type="checkbox" name="employee_it" id="employee_it" value="I">IT</input>
  • 'value' මගින් දක්වන්නේ එම බට්න් එක සිලෙක්ට් කර ඇති අවස්ථාවේදී පෝස්ට් කරන අගය යි.
  • 'checked' මගින් පිටුව ලෝඩ් වන අවස්ථාවේදී බට්න් ගෘප් එකෙහි පෙර නිමි තේරීම වන්නේ එම බට්න් එකයි

නමුත් පෝරම සමඟ වැඩ කිරීමේදී HTML පමණක් ප්‍රමාණවත් නොවන අතර Java Script, php වැනි වෙබ් පාදක පරිගණක භාෂාවන් පිළිබඳවද යම් දැනුමක් තිබිය යුතුය.

උදාහරණය බාගත කරගන්න

Wednesday, November 23, 2016

HTML Lesson Part - 9 තවත් සුවිශේෂී ටැග් කීපයක්..

නම/කාර්යය

කේතය

විස්තරය
විචාර(Comments) ඇතුලත් කිරීම <!-- Your Comment --> මේ ආකාරයෙන් ඇතුලත් කරන විචාරයන් වෙබ් පිටුව කියවන්නාට නොපෙන්වන අතර, ඒවා පිටුව නිර්මාණය කරන්නාගේ හෝ සංස්කරනය කරන්නාගේ පහසුව සඳහා භාවිතා කරයි.
ඉස්මතු කර දැක්වීම් <BLOCKQOUTE> </BLOCLQOUTE> විශේෂිත ප්‍රකාශ වෙනමම ඡේදයක ඉස්මතු කර දක්වයි.
Pre-formated Text <PRE> </PRE> පිටුවක් නරඹන අවස්ථාවේදී එය නිර්මාණයේදී යොදා හැති හිස් පේලි හා අනවශ්‍ය ඉඩ ඉවත් කරයි. එසේ නොකර පවත්නා ආකරයෙන්ම පිටුව දැක්වීමට මෙම ටැග් භාවිතා වේ.
ලිපිනයන් දැක්වීම <ADDRESS> </ADDRESS> වෙබ් පිටුවේ නිර්මාණකරුවන් ආදීන් පිළිබඳ සටහන් කිරීමේදී භාවිතා වන පිළිගත් ක්‍රමයකි. මෙවැනි සටහන් බොහෝවිට වෙබ් පිටුවල අග දැකිය හැකිය.

මෙම ටැග් භාවිතා කර ඇති උදාහරණය බාගත කරගන්න

Monday, November 21, 2016

HTML Lesson Part-8 ලැයිස්තු නිර්මාණය

සංකීර්ණ මෙන්ම සරල වෙබ් පිටු නිර්මාණයේදී ද අවශ්‍ය වන ලැයිස්තු නිර්මාණය කරන ආකාරය විමසා බලමු.


<OL> </OL>කේතය මගින් ලැයිස්තු නිර්මාණය

<OL> </OL> මගින් Ordered List කේතය මගින් ලැයිස්තුව නිර්මාණය කරනු ලබන අතර ලැයිස්තුවේ එක් එක් අයිතමයන් දැක්වීමට <L1> උපදේශ කේතය භාවිතා කරයි.

මෙවන් ලැයිස්තු සකස් කිරීමේදී උපදේශ කේතය සමග TYPE අනු උපදේශ කේතය භාවිතා වේ. මෙමගින් ලැයිස්තු සදහා භාවිතා කරනු ලබන අංකය හො අක්ෂර වෙනස් කළ හැකිය.අනු උපදේශ කේතයේ ඔප්ෂන් වන්නේ ,

A - කැපිටල් අකුරෙන් අයිතම අංකනය කේරේ
a - සිම්පල් අකුරෙන් අයිතම අංකනය කේරේ
I - රෝම ඉලක්කම් මගින් අයිතම අංකනය කෙරේ ( I , II ,III ආදි වශයෙන්)
i - රෝම ඉලක්කම් මගින් අයිතම අංකනය කෙරේ ( i , ii ,iii ආදි වශයෙන්)
1 - ඉන්දු අරාබි ඉලක්කම් මගින් අයිතම අංකනය කෙරේ

ලැයිස්තුව අංකනය කිරීම ආරම්භ කළ යුතු අනුලක්ෂණය හදුන්වාදීමට START අනු උපදේශ කේතය භාවිතා කරයි.

උදාහරණයක් ලෙස අපි <OL TYPE = a START = 5>ලෙස කේතය ලබාදුනහොත් ඉංග්‍රීසි හෝඩියේ සිම්පල් අකුරු වලින් අයිතම අංකනය කිරීමට පටන්ගන්නා අතර පළමු අයිතමය e අකුරෙන් අංකනය කර එතැන් සිට f, g, h...ආදී වශයෙන් පවත්වාගනී.

<UL> </UL>කේතය මගින් ලැයිස්තු නිර්මාණය

<UL> </UL> මගින් Unordered List කේතය මගින් ලැයිස්තුව නිර්මාණය කරනු ලබන අතර ලැයිස්තුවේ එක් එක් අයිතමයන් දැක්වීමට <L1> උපදේශ කේතයම භාවිතා කරයි.

මෙවන් ලැයිස්තු සකස් කිරීමේදී ද උපදේශ කේතය සමග TYPE අනු උපදේශ කේතය භාවිතා වේ. මෙමගින් ලැයිස්තු සදහා භාවිතා කරනු ලබන අංකය හො අක්ෂර වෙනස් කළ හැකිය.අනු උපදේශ කේතයේ ඔප්ෂන් වන්නේ ,

DISK - එක් එක් අයිතමය තිතකින් දක්වයි
CIRCLE - එක් එක් අයිතමය කුඩා රවුමකින් දක්වයි
SQUARE - එක් එක් අයිතමය කොටු සලකුණකින් දක්වයි

<DL> </DL>කේතය මගින් ලැයිස්තු නිර්මාණය

<DL> </DL> මගින් Definition List කේතය මගින් ලැයිස්තුව නිර්මාණය කරනු ලබන අතර ලැයිස්තුවේ විග්‍රහ කෙරෙන එක් එක් මාතෘකාව දැක්වීමට <DT> කේතය ද ඒ ය‍ටතේ විස්තර කෙරෙන කරුණු දැක්වීමට <DD> කේතය ද භාවිතා වේ.

ලැයිස්තු නිර්මාණය සඳහා උදාහරණ පිටුව බාගන්න

Sunday, November 20, 2016

HTML Lesson Part-7 HTML තුල වර්ණ භාවිතය

HTML භාෂාව තුල අකුරු ,රේඛා, පසුබිම් වර්ණ ආදිය සදහා වර්ණ ආදේශ කිරීමේදී අදාල වර්ණයන් ලබාදිය යුත්තේ එම වර්ණයට අදාල ෂඩ් දශමය සංඛ්‍යා භාවිතයෙනි. පරිඝනක තිරයේ වර්ණ නිර්මාණය වන්නේ රතු, කොළ, හා නිල් වර්ණයන්ගේ එකතුවෙනි (Red, Green, Blue - RGB) . සෑම වර්ණයකම 0 - 255 දක්වා වෙනස්වන වර්ණ ප්‍රභේදයන් ඇති බැවින් වර්ණයන්ගේ අගයන්ගේ සම්මිශ්‍රණයෙන් වර්ණ මිලියන ගණනක් නිර්මාණය කරගත හැකිය. 0 සිට 255 දක්වා වන මෙම අගයන් ශඩ් දශමය සංඛ්‍යා පාදයෙන් දක්වීමේදී 00 සිට FF දක්වා වේ.


මෙහිදී වර්ණයක් #RRGGBB යන ක්‍රමයට දැක්විය හැකිය.


මෙහිදී RR වෙනුවට රතු වර්ණයේ ප්‍රභේදය සදහා වන ශඩ් දශමය අගය ද, GG සදහා කොළ වර්ණයේ ප්‍රභේදය සදහා වන ශඩ් දශමය අගය ද, BB සදහා නිල් වර්ණයේ ප්‍රභේදය සදහා වන ශඩ් දශමය අගය ද ආදේශ කර වර්ණය සකසා ගත යුතුය.
උදාහ්ණයක් ලෙස ඔබට අකුරු පෙලක් සදහා වර්ණ යෙදීමට අවශ්‍ය වූයේ යැයි සිතමු. එහිදී ඔබට අවශ්‍ය වන්නේ නිල් රතු වර්ණය යැයි සිතමු.

<FONT COLOR = "#RRGGBB"> යන්නට අගයන් ආදේශයෙන් <FONT COLOR = "#FF0000"> රතු වර්ණය නිර්මාණය කරගත හැකිය. මෙහිදී නිල් හා කොළ වර්ණයන් සදහා 00 යෙදීමෙන් අදහස් කරන්නේ එම වර්ණයන් නොයොදන බව යි.

වර්ණ සදහා ශඩ් දශමය අගයන් ලබා ගැනීමට කුඩා මෙවලමක්....


මෙය ඔබේ පරිගණකයට DOWNLOAD කරගන්න.

Saturday, November 19, 2016

HTML Lesson Part-6 අනුලක්ෂණ මෝස්තර

අලංකාරය හා විශේෂ හේතූන් මත සාමාන්‍ය රටාවෙන් බැහැරව අක්ෂරවල අකුරු වචන ආදියේ සිදුකරන වෙනස්කම් මේ යටතේ වෙි. ඇල අකුරු , බෝල්ඩ් අකුරු, යටින් ඉරි ඇදීම, වර්ණය වෙනස් කිරිීම ආදී කාර්යයන් රාශියක් මෙම කේත මගින් සිදු කරයි.

මෙම කේත යෙදිය යුත්තේ අදාල වෙනස්කම සිදුවියයුතු අකුර හො අකුරු මැදි වන ලෙස ආරම්භක හා අවසන් කිරීමේ කේත යෙදීමෙනි. ජේදයක, පේලියක ආදියේ ඕනෑම තැනක මෙම කේත භාවිතා කළ හැකිය.


උදා - <P>පැමිණෙන සැමට <BIG>නොමිලේ</BIG> පොත් කට්ටලයක්....</P>
මෙහිදී 'නොමිලයේ' යන වචනය පමණක් ලොකු අකුරෙන් පෙන්වයි.
කේතය විස්තරය
<B> </B> බෝල්ඩ්(Bold) ආකාරයේ අකුරු පෙන්වයි.
<BIG> </BIG> මෙම කේතය මගින් අක්ෂරවල ප්‍රමාණය විශාල කරයි. විශාලනය රදාපවතිනුයේ භාවිතාවන බ්‍රවුසරය හා සම්මත අක්ෂර ප්‍රමාණය අනුවය.
<BLINK> </BLINK> මෙම කේකය මගින් අදාල කොටස බ්ලින්ක් කර පෙන්වයි.
<CITE> </CITE> උපුටා දක්වන කොටස් මෙම කේතය තුල ඇතුලත් කරයි. එවිට එම අනුලක්ෂණයන් ඇල අකුරු වලින් පෙන්වයි.
<CODE> </CODE> පරිගණක වැඩසටහන් කේතයක් දැක්වීමේදී මෙම කේතය භාවිතා වේ. මෙම කේතය යොදා ඇති අක්ෂර දිස්වන්නේ ස්ථාවර පළළක් සහිත රේඛා වලින් නිර්මිත අකුරු වලිනි.
<EM> </EM> අවධාරණය කොට කිවයුතු ප්‍රකාශයන් මෙම කේත අතර දක්වයි. මේවා කියවන්නාට දැකිය හැකි වන්නේ ඇල අකුරු වලිනි.
<I> </I> මෙම කේතය යෙදූ අකුරු ඇල අකුරෙන් (Italic) දිස් වේ.
<KBD> </KBD> ස්ථාවර රේඛා අක්ෂර වලින් පෙන්වීමට භාවිතා වේ.
<SAMP> </SAMP> ස්ථාවර රේඛා අක්ෂර වලින් පෙන්වීමට භාවිතා වේ
<SMALL> </SMALL> මෙම කේතය මගින් අක්ෂරවල ප්‍රමාණය කුඩා කරයි. කුඩා වන ප්‍රමාණය රදාපවතිනුයේ භාවිතාවන බ්‍රවුසරය හා සම්මත අක්ෂර ප්‍රමාණය අනුවය.
<STYLE> </STYLE>  
<SUB> </SUB>  
<SUP> </SUP>  
<TT> </TT>  
<U> </U>  
<VAR> </VAR>  
<STRONG> </STRONG>  
<FONT> </FONT> font උපදේශ කේතය සමඟ එහි අනු උපදේශ කේත භාවිතා කරමින් විවිධ අක්ෂර ස්වරූප නිර්මාණය කරගත හැකිය.

ඉහත අනුලක්ෂණ මෝස්තර සඳහා උදාහරණ පිටුව බාගන්න

FONT උපදේශ කේතය තුල භාවිතාවන අනු උපදේශ කෙත මෙසේය,

වගුවෙහි දැක්වෙනුයේ අනු උපදේශ කේත FONT උපදේශ කේතය තුල යොදා තිබෙන ආකාරයයි.

කේතය විස්තරය
<FONT SIZE=n> අක්ෂර ප්‍රමාණය වෙනස් කිරීමට භාවිතා වේ. n සඳහා 1 සිට 7 දක්වා අගයන් ආදේශ කළ හැකි අතර ආසන්න අක්ෂර ප්‍රමාණයන්ට සාපේක්ෂව අක්ෂර ප්‍රමාණය වෙනස් කරගැනීම සඳහා n+, n-, n+2, n-3 ආදී වශයෙන් ද භාවිතා කළ හැකිය.
<FONT COLOR= colour> මෙමගින් අක්ෂරවල වර්ණය වෙනස් කරගැනීමට හැකිය. වර්ණය සඳහා වන ශඩ්දශමය අගය හෝ වර්ණයයේ නම භාවිතා කළ හැකිය.
<FONT FACE="font" > මෙමගින් විවිධ ෆොන්ට් භාවිතා කළ හැකිය
උදා:<font face="Comic Sans MS">

Friday, November 18, 2016

HTML Lesson Part-5 තිරස් රේඛා නිර්මාණය

වෙබ් පිටුවකට ආකර්ශනීය පෙනුමක් ලබා දීම සදහා හා පිටුවේ කොටස් වෙන් කර දැක්වීම සදහා තිරස් රේඛා භාවිතා වේ.මේ සදහා භාවිතා වන උපදේශ කේතය <HR> වන අතර එය අවසන් කිරීමට යොදන </HR> යෙදීම අත්‍යවශ්‍ය නොවේ.


තිරස් රේඛාවක දිග, ප්‍රමාණය හෙවත් ඝනකම, පෙලගැස්වීම හා සෙවනැලි යෙදීම සදහා වන අනුඋපදේශ කේත හතරක් ඇත. ඒවා නම්, WIDTH(දිග), SIZE(ප්‍රමාණය), ALIGN(පෙලගැස්වීම), NOSHADE(සෙවනැලි)

තිරස් රේඛා නිර්මාණයේදි යොදන කේත සවිස්තරව පහත දැක්වේ.

කාර්යය

කේතය(මූලික කේතය සමග අදාල කේතය ඇතුලත් කර ඇත)

විස්තරය
මූලික කේතය <HR> </HR> තිරස් රේඛාවක් නිර්මාණය වේ
රේඛාවකට දිග ඇතුලත් කිරීම <HR WIDTH = 30> රේඛාවේ දිග පික්සෙල් වලින් දැක්වේ.
<HR WIDTH = 50%> රේඛාාව් දිග ප්‍රතිශතයක් ලෙසින් දැක්වේ.
රේඛාවකට ප්‍රමාණය ඇතුලත් කිරීම <HR SIZE = 5> පික්සෙල් 5ක් ඝනකම රේඛාවක් නිර්මාණය කරයි.
රේඛාවක් පෙලගැස්වීම <HR ALIGN = "CENTER"> රේඛාව මධ්‍යස්ථව නිර්මාණය වේ.
<HR ALIGN = "LEFT"> රේඛාව වම් පැත්තෙන් නිර්මාණය වේ.
<HR ALIGN = "RIGHT"> රේඛාව දකුණු පැත්තෙන් නිර්මාණය වේ.
රේඛාවකට සෙවනැලි ඇතුලත් කිරීම <HR NOSHADE> පිටුව විවෘත්ත වන බ්‍රවුසරය අනුව පිටුව තද කළු පැහැයෙන් හෝ සෙවනැලි සහිතව දන්වනු ලැබේ.
රේඛාවක් වර්ණවත් කිරීම <HR COLOR = #RRGGBB> RRGGBB සදහා රතු නිල් සහ කොළ වර්ණ ප්‍රෙභ්දයන්ට අදාල ශඩ් දශමය අගයන් ආදේශ කර අදාල වර්ණයෙන් යුතු රේඛාවක් ලබාගත හැකිය.

රේඛාවකට ඉහත ලක්ෂණ සියල්ල ඇතුලත් කිරීම(මෙහිදී හිස්තැනක් මගින් එක් එක් ලක්ෂණය වෙන් කරයි. සියලුම අනු උපදේශ කේත ප්‍රධාන කේතය තුල පිහිටයි)

<HR SIZE = 2 WIDTH = 25% ALIGN = "LEFT" NOSHADE COLOR = RRGGBB>

උදාහරණය බාගත කරගන්න

Thursday, November 17, 2016

HTML Lesson Part-4 මූලික HTML කේත

කේතය

කාර්යය
<HTML>වෙබ් පිටුවේ සියලුම තොරතුරු හා කේත</HTML>

වෙබ් පිටුවක ආරම්භය හගවයි. වෙබ් පිටුව නිර්මාණය කල යුත්තේ මෙම කේත අතරය.

<BODY> වෙබ් පිටුවේ බද </BODY>

වෙබ් පිටුවේ බද කොටස මෙමගින් සංකේතවත් වේ. වෙබ් පිටුවේ සියලු කාරණා අනෙකුක් කේත භාවිතා කරමින් මෙම කේත අතර දැක්විය හැකිය. ඒවා නරඹන්නාට දැකිය හැක

<HEAD>මාතෘකාව</HEAD>

වෙබ් පිටුවේ මාතෘකාව දැක්වීම කළ යුත්තේ මේවා අතරය. මෙය දිස්වන්නේ වෙබ් පිටුව තුල නොවේ වෙබ් බ්‍රවුසරයේ ශීර්ෂය මතය.

<H1> H1 වර්ගයේ මාතෘකාව </H1>

<H2> H2 වර්ගයේ මාතෘකාව </H2>

<H3> H3 වර්ගයේ මාතෘකාව </H3>

<H4> H4 වර්ගයේ මාතෘකාව </H4>

<H5> H5 වර්ගයේ මාතෘකාව </H5>

<H6> H6වර්ගයේ මාතෘකාව </H6>

H1, H2, H3 ආදී ලෙස H6 දක්වා ඇති මෙම කේත අතර වෙබ් පිටුවේ මාතෘකා ආදිය දක්වයි. මේවා Bold ආකාරයෙන් දිස් වේ.H1 සිට H6 දක්වා වන විට පිළිවෙලින් අකුරු කුඩා වේ.

<P> ඡේදය </P>

ඡේදයක් දැක්වීමට යොදාගනී

<BR>පළමු පේලිය </BR>

<BR>දෙවන පේලිය</BR>

පේලි වෙන් කිරීම. ඡේද වෙන්කිරීමේදී මෙන් පේලි අතර ඉඩක් නොතබා පේලි වෙන්කරයි. මෙම කේතය භාවිතයේදී යෙදීම අතෘවශ්‍ය නොවේ උදාහරණයක් ලෙස ඔබට,

<BR>පළමු පේලිය


ලෙස ද දැක්විය හැකිය.

 

උදා - H1 වර්ගයේ මාතෘකාවක් එකෙල්ල කිරීම,

<H1 ALIGN = LEFT>මාතෘකාව </H1>

<H1 ALIGN = RIGHT> මාතෘකාව </H1>

<H3 ALIGN = CENTER> මාතෘකාව</H1>


උදා- ඡේදයක් එකෙල්ල කිරීම

<P ALIGN = LEFT> ඡේදය </P>

<P ALIGN = RIGHT> ඡේදය </P>

<P ALIGN = CENTER> ඡේදය </P>
මාතෘකා, පේලි සහ ඡේද එකෙල්ල කිරීම. Left, Right, Center ලෙස පේලි හා ඡේද එකෙල්ල කළ හැකිය.

ඉහත කේත භාවිතා කර ඇති උදාහරණ පිටුව බාගත කරගන්න.(1KB)


Wednesday, November 16, 2016

HTML Lesson Part-3 HTML කේතයක මූලික සැකැස්ම

HTML පරිගනක ක්‍රමලේඛන භාෂාවක් තරම් සංකීර්ණ හා රළු නොවේ. යම් වරදක් සහිත කේතයන් නොසලකාහරිමින් වෙබ් බ්‍රවුසර මගින් ඒවා විවෘත්ත කරන බැවින් ක්‍රමලේඛන භෂාවගට වඩා සරලය. යම් ටැග් එකක් විවෘත්ත කරන කේතයම ඉදිරයෙන් ඇල ඉරක් යෙදීමෙන් අවසන් කරන කේතය බවට පත්වේ. උදාහරණයක් ලෙස <p> හා </p> යන කේත දෙකෙන් ඡේදයත් විවෘත්ත කිරීම හා වැසීම සිදු කරයි. කැපිටල් හෝ සිම්පල් අකුරු හෝ දෙවර්ගයම භාවිතා කළ හැකි අතර පේලි අතර හෝ ටැග් අතර තබන ඉඩ ප්‍රමාණයන් නොසලකා හරිනු ලබයි.
HTML කේතයක් සරල පාඨ සංස්කරණ මෙවලමක ලියා .html එන එක්ටෙන්ෂන් සහිතව තැන්පත් කිරීමෙන් පමණක්ම HTML පිටුවක් නිර්මාණය කරගත හැකිය. මීට අමතරව තවත් ක්‍රම තිබෙන අතර මීලඟ මාතෘකාව යටතේ එවා පිළිබඳව විස්තර කෙරේ.
Code
Preview
<html>
<head>
<title>Title Of  Page</title>
</head>
<body>
<p>Contain Of the Page</p>
</body>
</html>
This is the contain of the web page
කේතය බාගත කරගන්න(0.005MB)
ඉහත කේතය සලකාබැලූ විට
  • <html> හා </html> මගින් html පිටුව ඇරඹීමත්
  • <head> හා </head> පිටුවේ ශීර්ෂය හෙවත් ආරමභක කොටස දැක්වීමත්(වෙබ් බ්‍රවුසරයේ ඉහළ දිස්වේ)
  • <title> හා <title> මගින් පිටුවේ මාතෘකාව දැක්වීමත් සිදුවේ.
  • <body> </body> මගින් පිටුවේ අන්තර්ගතය සංකේතවත් කරන අතර පිටුව තුල ඇති සෑම දෙයක්ම මේවා අතර ලියනු ලබයි.
ඉහත ටැග් පිළිබඳව ඉදිරියේදී තවදුරටත් විස්තර කෙරෙන අතර සම්මත HTML පිටුවක් ඉහත ආකාරය ගනී. එනමුත් ඇතැම් කොටස් අඩු වැඩි වීම සිදුවිය හැකි අතර බ්‍රවුසර මගින් ඊට අනුරූප ලෙස පිටුව දර්ශනය කරයි

Tuesday, November 15, 2016

HTML Lesson Part-2 වෙබ් අඩවි සංවර්ධන මෙවලම්

වෙබ් අඩවි නිර්මාණය සදහා යොදාගන්නා මෙවලම් ප්‍රධාන වර්ග 3 කි,
  1. සරල පාඨක සංස්කරණ යෙදුම්
  2. විෂයානුබද්ධ කේත භාවිතාකරන යෙදුම්
  3. වෙබ් අඩවි නිර්මාණ යෙදුම්

සරල පාඨක සංස්කරණ යෙදුම්

HTML මගින් වෙබ් අඩවි නිර්මාණය කිරීමේදී Notepad හෝ වැඩිදියුණුකරන ලද Notepad++ වැනි යෙදුම් භාවිතාකල හැකිය. ඊට අමතරව GEdit, TextEditor, TED Notpat වැනි සරල පාඨක සංස්කරණ යෙදුම් ද මේ සදහා භාවිතා කළ හැකි ය.

විෂයානුබද්ධ කේත භාවිතාකරන යෙදුම්

HTML කේත හෝ අනු උපදේශ කේත පහසුවෙන් හැසිරවිය හැ කි ආකාරයට නිර්මාණය කර ඇත. විෂයානුබද්ධ සංස්කරණ මෙවලම් තුල උපදේශ කේත හා අනු උපදේශ කේත වෙනස් වර්ණ වලින් පෙන්නුම් කරයි. මේවායේ ඇති තවත් විශේෂ ලක්ෂණයක් වනුයේ පරිශීලකයා සංස්කරණය කරන භාෂාව අනුව ඊට සුදුසු අතුරුමුහුනතක් ඉදිරිපත් කිරීමයි. HTML කේතකරණයේ යෙදී සිටින්නේ නම් ඒ සදහා ගැලපෙන පහසුකම් සපයන අතර, ඔබ Java කේතකරණයේ යෙදී සිටින්නේ නම් ඊට සුදුසු අතුරුමුහුණතක් සපයයි.
මෙම වර්ගයේ පාඨක සංස්කරණ යෙදුම් සදහා EditPlus, Homesite, Notepad++ උදාහරණ ලෙස දැක්විය හැකිය.

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

වෙබ් අඩවි නිර්මාණයේ වැඩි දැනුමක් නොමැති අධුනිකයන් සදහා පහසුවෙන් වෙබ් අඩවි නිර්මාණයට මෙවැනි යෙදුම් භාවිතා කළ හැකිය.
ඇඩෝබි සමාගමේ Dream Weawer හා CloudFusion ද, මයික්‍රොසොෆට් සමාගමේ Eression Web හා Visual Studio ද මෙම වර්ගයේ මෘදුකාගවලට නිදසුන් වේ.
.

HTML Lesson Part-1 අන්තර්ජාලය සහ HTML


එච් ටී එම් එල් ගැන ලිපි පෙලක් දාන්න හිතුනා. මුලින්ම කියන්න ඔනේ මේ පළවෙන පෝස්ට් එකේ තියන විස්තර ටික මම විකිපීඩියා එකටත් දාලා තියනවා කියලා. මම ඒකෙන් කොපිකරගත්තා නෙවෙයි. ඊලඟ ලිපියෙන් මම පළවෙනි පාඩම පටන්ගන්නවා. මේ තියන්නේ මූලික විස්තරයක් වැඩ පටාන් ගන්න කලින් දැනගන්න.

ටිම් බර්න්ස් ලී විසින් 1989 ලොවට හදුන්වාදුන් විශ්ව විසිරි වියමන (WWW - World Wide Web) වර්තමානය වන විට බහුමාධ්‍ය තොරතුරු බෙදාහරින ජාලයක් බවට පත්වී ඇත. ටිම් බර්නර්ස් ලී සහ රොබට් කැලියු යන දෙදෙනා විසින් ස්වාධීනව පර්යේෂණ සිදු කිරීමෙන් අනතුරුව ඒවනවිට URL ක්‍රමය සහ HTTP ප්‍රොටෝකෝලය ද නිර්මාණය කර සිටි ටිම් බර්නර්ස් ලී විසින් HTML භාෂාව ද හඳුන්වාදුනේ ය.
Image: Sir Tim Berners Lee
HTML කේත හෙවත් Tags නිර්මාණය කරනු ලබන්නේ ටිම් බර්නර්ස ලී ප්‍රධානත්වය දරන වර්ල්ඩ් වයිඩ් වෙබ් කොන්සෝටියම් (World wide web consortium) හොවත් W3C ආයතනය විසිනි. HTMLභාෂාවේ නවතම කේත සමූහය හෙවත් ප්‍රමිතය HTML 5.0 වේ.
වෙබ් පිටු සකස්කිරීමේදී අන්තර්ජාලය තුල ලිපිගොණු සකස් කරන ආකාරය පිලිබද කලින් සකස් කරන ලද නීති මාලාවකට අනුව සකස්කර "Hyper Text Markup Language - HTML" මගින් ඉදිරිපත් කර ඇත.
WWW Server නමින් හදුන්වන යන්ත්‍රයක් තුල වෙබ් අඩවි හා වෙබ් පිටු තැන්පත්කරන අතර, ප්‍රධාන වෙබ් පිටුවකින් හා ඒ හා සම්බ්න්ධ තවත් පිටු වලින් සමන්විත වේ.
වෙබ් පිටු අතර සබදතා ඇතිකිරීමේදී එය කීප ආකාරයකට සිදුකරනු ලබයි,
  • එම වෙබ් පිටුවේම වෙනත් කොටසකට සම්බන්ධතාවය ඇති කිරී
  • වෙබ් අඩවිය තුල ඇති වෙනත් පටුවකට සම්බන්ද කිරීම
  • වෙනත් වෙබ් අඩවියකට සම්බන්ධ කිරීම
  • වෙනත් වෙබ් අඩවියක පිටුවකට සම්බන්ධතාව ඇති කිරීම
වෙබ් බ්‍රව්‍රසරය මගින් මෙම උපදේශ කේත නිසි පරිදි ගලපා වෙබ් පිටුව පරිගණක තිරය මතට ලබා දෙයි.

වෙබ් බ්‍රවුසරයක් ක්‍රියාත්මක වන්නේ මෙසේය,

  1. තොරතුරු ගබඩා වී ඇති පරිගණකය(Server Computer) වෙත ඉල්ලීමක් කෙරෙන අතර තොරතුරු ලබාගත හැකිදැයි සොයාබලයි.
  2. තොරතුරු ලබාගැනීමට හැකිනම් HTML ගොනුව HTTP තාන්ෂණය මගින් තොරතුරු ලබාගන්නා පරිගණකය වෙත ලබා දේ.
  3. ලබාදුන් තොරතුරු, HTML උපදේශ කේත අනුව(Tags අනුව) සකස් කර තිරය මත දර්ශනය කරයි.
  4. ඕනෑම වර්ගයක රූප හො බහුමාධ්‍ය මූල අවශ්‍ය වූ විට පරිගණකයන්හි ක්‍රියාත්මක කරයවයි.

HTML උපකාරක යෙදුම් (Plug-in)

HTML භාෂාව තුල දී එම භාෂාවේ සම්මත උපදේශ කේත වලට අමතරව විවිධ සමාගම් මගින් වැඩිදියුණු කරනලද වෙනත් උපකාරක යෙදුම්(Plug-in) ද ඇතුලත් කරයි.
මේවා මගින් අන්තරජාලයේ තොරතුරු ලබාගැනීමට වැඩි වටිනාකමක් ලබා දෙයි. මෙම උපකාරක යෙදුම් භාවිතා කරන වෙබ් බ්‍රවුසර ප්‍රබලත්වයෙන් වැඩි ය. එම වෙබ් බ්‍රවුසරයන් මගින් ඒවාට ධාවනය කළ නොහැකි ගොනු ආදිය, එම හැකියා ඇති උපකාරක යෙදුම් භාවිතා කරමින් ධාවනය කරයි. මෙම උපකාරක යෙදුම් නොමිලේ ම ලබාගැනීමට ද හැකිය.

වෙබ් බ්‍රවුසර(Web Browsers)

අවම පහසුකම් වලින් යුතු වෙබ් බ්‍රවුසරයක වුව ද පහත පහසුකම් වලින් යුතු විය යුතුය.
  • HTML මගින් නිර්මාණය කළ හෝ Plain text සහිත වෙබ් පිටු තිරය මත පතිත කිරිම.
  • JPEG, BMP, GIF ගොනු ලෙස පවතින චිත්‍ර ද, GIF, SWF ආකාරයයෙන් පවතින චලනමය චිත්‍ර ද HTML පිටු මත දැක්වීම.
  • බහුමාධ්‍ය මූලයන් හා බහුමාධ්‍ය සම්බන්ධතාවයන්(Hyper Media) සහිත වෙබ් පිටු තිරය මත පෙන්වීම හො ක්‍රියාත්මක කිරීම.
  • FTP, Gopher, Usenet නියමයන් සහිත වෙබ් පිටු තුලට ඇතුල් වීම.
  • වෙබ් පිටුවල ඇති පෝරම සැපයීම හා එම පෝරම වලට ඇතුලත් කරන තොරතුරු ලබා ගැනීමට හැකි වීම.
  • පරිශීලකයා බලාපොරොත්තු වන සෙවුම් යන්ත්‍ර භාවිතා කිරීමේ හැකියාව
මීට අමතරව සජීවීව රෑපවාහිනී නැරඹීම, සජීවී කතා කිරීම(Live Chat), අන්තර්ජාල දුරකථන(Internet Phone) ආදිය සදහා සහාය දැක්වීම ද වෙබ් බ්‍රවුසර මගින් සිදු කරයි.
වර්තමානයේ භාවිතාවන ජනප්‍රිය වෙබ් බ්‍රවුසර ලෙස,
  1. Firefox
  2. Google Crome
දැක්විය හැක.