HTML/Web Development (Grade 11-ICT)

nyqudOH ;dlaIKh fhdod .ksñka
ir, fjí wvú ks¾udKh
ufyaIa fldä;=jlal=
BTec(ICT) , MCTS,MIEEE
Professional Development Course in ICT (AIT-Thailand)
National Dip in Teaching (Merit)

wka;¾cd,fhys Ndú; jk úúO fjí
wvú Ndú; jkafka ljr wjYH;d
iemsÍu i|yd y÷kd .ksuq
• f;dr;=re ikaksfõokh
• úoHq;a fj<|du
• úfkdaodiajdoh
• m%pdrKh
• m%jD;a;s fnod yeÍu
• iudc iïnkaO;d f.dvkxjd .ekSu
• fijqï wjYH;d
• fm!oa.,sl wjYH;d

fjí wjählg msúi th mßYS,kh lrk
lKavdhï fjí wvúfha .%dylhka f,i
ye¢kafõ' tu .%dyl úúO;ajh we;s ùug fya;=
.Kkdjla n,mdhs
• NdIdj yd ixialD;sh
• jhia uÜgu
• ia;%S mqreI nj
• wOHdmk uÜgu
• reÑl;ajh

rcfha ks, ìysfodr jk www.gov.lk fjí wvúhg
msúfikak' tys ff;%NdIdfjka f;dr;=re ksrEmKh lr
we;' fuhg n,md we;s fya;= fudkjdo@

fjí wvúhl wvx.= Y%jH yd
oDYH f;dr;=re tys
wka;¾.;h kï fõ'

ikaOdr ixúOdkh
fjí wvúhla i|yd f;dard.;a wka;¾.;h
l%uj;a ms<sfj<lg fm<.iaùu ikaOdr ixúOdkh
kï fõ‘
ukdj ikaOdr l<ukdlrKh lsÍu ksid ,efnk
jdis rdYshls'

• mßYS,kh lsÍug myiqhs'
• b;d blaukska .%dylhdg wjYH
f;dr;=re fidhd .; yel'
• .%dylhka wdl¾IKh lr.kS'
• hdj;ald,Sk lsÍu myiqhs'
• miqld,Sk j kj wx. tl;= lsÍfï bv
m%ia;d iys;hs

ixlS¾K fjí wvúhla ikaOdr ixúOdkh lsÍu
i|yd Ndú; jk l%u lsysmhls‘
rEmuh ieliqulg wkqj j¾.SlrKh- Site Map
tlla ;kd .ekSu
'

uq,a msgqfjka ^ ksfjiak msgqfjka & fjí wvúfha
iuia: wka;¾.;h fláfhka ksrEmKh lsÍu‘
f;dr;=re fláfhka bÈßm;a lsÍu
wxl ,ehsia;= " wxlfkdjk ,ehsia;= fyda
wkqfþok Ndú;h
myiqfjka fjí wvúfhys ießieÍfï fyj;a
ixp,kh ùfï myiqlu ,eîu

fjí msgqj, jHqyh yd msßie,iqu (Structure and
layout)
fjí wvúhl we;=<;a lrkq ,nk msgqj,
ieliqu" wlaIr " miq;, yd .%dmsl fhdod
.kakd wdldrh we;=`tj ish¨u ieliqï j,
wkkH;djhla yd iudk;ajhla ;sìh
hq;=h'

udOH iïm;a f;dard .ekSu
fjí msgqjlg we;=<;a lrk udOH iïm;aj,
Odß;dj iy tu fjí msgqj
újD; ùug .;jk ld,h w;r oeä
iïnkaOhla we;'

tajdfha Odß;dj jeä kï
fjí fiajdodhlfha isg .%dyl mß.Klh
fj; jeä o;a; m%udKhla nd.; úh hq;=
ksid fjí msgqj újD; ùug idfmalaI j
jeä ld,hla .; fõ'

ysñlï kS;shg wkql+, j udOH iïm;a
we;=<;a lsÍu
fjk;a whl= úiska ks¾udKh lrk ,o
udOH iïm;a fhdod .kafka kï
ksis wjir ,nd .; hq;= h' tfia
fkdjqK fyd;a th iodpdr úfrdaë
l%shdjla jk
w;r kS;suh .eg¨j,g uqyqK mEug o
isÿ úh yel'

fjí ixialdrl
^Web authoring tools)

මූලික HTML සම්බන්ධක හඳුනා
ගනිමු

වෙබ් පිටුෙක සැකැස්ම සඳහා භාවිත
HTML ෙන සම්බන්ධක
<HTML>
වෙබ් පිටුෙක ආරම්භය හා අෙසානය දැක්වීම
</HTML>
<HEAD>
වෙබ් පිටුෙක ශීර්ෂය වකොටස දැක්වීම
</HEAD>
<TITLE>
වෙබ් අතිරුක්සුෙක title හි දර්ශනය ෙන පාඨය සඳහා
</TITLE>

සරල වෙබ් පිටුෙක HTML සම්බන්ධක
<HTML>
<HEAD>
<TITLE> My Web Site</TITLE>
</HEAD>
<BODY>
This is My Webpage!
</BODY>
</HTML>

ශීර්ෂ පාඨ එක් කිරීවම්
සම්බන්ධක(Header Tags)
ප්‍රමාණ 6 ක ශීර්ෂ පාඨ භාවිත වේ
<H1>Header 1 -- Giant-sized and bold </H1>
<H2>Header 2 -- Large and bold </H2>
<H3>Header 3 -- Normal-sized and bold </H3>
<H4>Header 4 -- Small and bold </H4>
<H5>Header 5 -- Very Small and bold </H5>
<H6>Header 6 -- Tiny and bold </H6>

පහත පරිදි වෙබ් පිටුෙ වෙබ් අතිරික්සුවෙහි
දර්ශනය වේ.
H1 = Giant-sized and bold
H2 = Large and bold
H3 = Normal-sized and bold
H4 = Small and bold
H5 = Very Small and bold
H6 = Tiny and bold

<br> සහ වේද භාවිතය
• <P> text </P>
– වේද එක් කිරීමට භාවිත වේ
• <BR>
– Line break එකක් දැක්වීවම් දී වයොදා ගැවන්
උදාහරණ text a
<p>text a</p>
<p>text b</p> text b
<br>text c
<br>text d text c
text d

Horizontal Rule නැතවහොත් තිරස්
වර්ඛාෙක් ඇඳීම
<HR> සම්බන්ධකය භාවිත වේ.
Ex:

අක්ෂර හැඩසේ ගැන්වීම
හැඩසේ ගැන්වීවම් සම්බන්ධක කිහිපයක්
Tag Result
<I> Italics </I> Italics
<B> Bold </B> Bold
<u> Underline</u> Underline
<STRONG> Strong </STRONG> Strong
<s> Strike</s> Strike

අක්ෂර භාවිතය
වම් සදහා <FONT> සම්බන්ධකය භාවිත වේ
අක්ෂර ෙල ප්‍රමාණය ,ෙර්ණය හා ෙර්ගය දැක්වීම.
<font SIZE=“12" color=‘red’ face=‘calibri’>
COLOR="color-name" - changes text color
<FONT COLOR="red">This is red</FONT> ෙර්ණය
This is red
<FONT FACE="verdana">This is the verdana font;</FONT> ෙර්ගය
This is the verdana font

අක්ෂර ෙල ප්‍රමාණය දැක්වීම
<FONT SIZE="7" >Praja Girls </FONT>
Praja Girls
අක්ෂර භාවිතය ….

ලැයිස්තු සැකසීමLists –
අංක වනොෙන ලැයිස්තු Unordered Lists
Unordered lists:
<UL>
<LI>Item One </LI>
<LI>Item Two </LI>
<LI>Item Three </LI>
<LI>Item Four
</UL>
• Item One
• Item Two
• Item Three
• Item Four
Unordered List Attributes:
type="disc/circle/square"
• Disc (default)  Circle  Square

<OL>
<LI> Item One </LI>
<LI> Item Two </LI>
<LI> Item Three </LI>
<LI> Item Four </LI>
</OL>
1. Item One
2. Item Two
3. Item Three
4. Item Four
type="i/I/a/A/1" (default)
i = i. Item One I = I. Item One a = a. Item One A = A. Item One 1 = 1.Item One
ii. Item Two II. Item Two b. Item Two B. Item Two 2. Item Two
iii. Item Three III. Item Three c. Item Three C. Item Three 3. Item Three
iv. Item Four IV. Item Four d. Item Four D. Item Four 4. Item Four
start="xx"
• This attribute lets you specify which number/letter will start the list
Ordered (Numbered) Lists:
Ordered List Attributes:
ලැයිස්තු සැකසීමLists –
අංක ලැයිස්තු ordered Lists

විස්තරාත්මක ලැයිස්තු -Definition Lists
Definition Lists:
<DL>
<DT>List Name One</DT>
<DD>This is where information about List Name One would go</DD>
<DT>List Name Two</DT>
<DD>This is where information about List Name Two would go</DD>
</DL>
List Name One
This is where information about List Name One would go
List Name Two
This is where information about List Name Two would go

අධිසන්ධි භාවිතය -Links
අධි සන්ධි වපන්වීම සඳහා ( anchor tag) <A>සම්බන්ධකය
භාවිත වේ
මූලික අධි සන්ධි:
<A HREF="http://www.stanford.edu/">Stanford
University</A>
එකම වේඛනය තුළ අධි සන්ධි වයදීම:
<A HREF="#spot">Point to 'spot' in this document</A>
විදුත් තැපැේ සඳහා අධිසම්බන්ධතා:
<A HREF="mailto:maheshkodit@outlook.com">Email
maheshkodit@outlook.com</A>

ප්‍රතිරූප එක් කිරීම-Graphics
ප්‍රතිරූප එක් කිරීම සඳහා <IMG> සම්බන්ධකය
භාවිත වේ.
<IMG SRC="fish.gif">
එවමන්ම වමම සම්බන්ධකය සඳහා ප්‍රතිරූපවයහි
ප්‍රමාණය , රාමුවේ පළල ආදිය පහත attributes
මගින් වෙනස් කළ හැක
<IMG SRC="fish.gif“ width=‘400’ height=‘300’
Border=‘1’/>

ෙගු භාවිතය
<TABLE>
<TR>
<TD>Name</TD>
<TD>Age</TD>
</TR>
<TR>
<TD>Hansaka</TD>
<TD>16</TD>
</TR>
</TABLE>
Name Age
Hansaka 16

HTML/Web Development (Grade 11-ICT)

HTML/Web Development (Grade 11-ICT)

Recommandé

Recommandé

Contenu connexe

Tendances

Tendances (20)

En vedette

En vedette (6)

Plus de Mahesh Kodituwakku

Plus de Mahesh Kodituwakku (20)

HTML/Web Development (Grade 11-ICT)