Fjí Wvú Ks Udkh I - Yd: M Wfhaia PDKQL

fjí wvú ks¾udKh i|yd
M wfhaIa pdkql
fjí wvú ks¾udKh i|yd HTML
M wfhaIa pdkql
2
fjí wvú ks¾udKh i|yd HTML
© M . wfhaIa pdkql
ksl=;l
a sÍu - 2018 foieïn¾
ish¿u ysñlï weúßKs
l¾;Df.a ó<`.g ksl=;a ùug kshñ; lD;s

fjí wvú ks¾udKh i|yd CSS
fjí wvú ks¾udKh i|yd PHP
mhs;ka l%uf,aL NdIdj
https://www.e-ketha.home.blog
https://www.facebook.com/eketha
3
msÿu
f;dr;=re ;dlaIK úIh Tiafia
Ôú;h ch .kakg
ux fm;a újrlr ÿka
iquqÿ wfíiQßh .=re mshdKkag

f.!rjfhka ms<s.kajñ
4
l;Df.ka
wka;¾cd,h w;sYh ÈhqKq hq.hl isák Tng wka;¾cd,h hkq l=ulao hkak meyeÈ,s
lsÍug wjYH fkdjk nj ud oksñ. fmrlS ÈhqKqj ksidu rcfha wdh;k ,úYd,
fm!oa.,sl jHdmdr fukaau k.rfha we;s l=vd lvidmamq ysñhkao ;u jHdmdrfha ÈhqKqjg
fm!oa.,sl fjí wvú Ndú;d lrñka ck;dj fj; ióm ù we;. wo jk úg lsisÿ jhia
fNaohlska f;drj wka;¾cd,h Ndú;d jk ksid úYd, mqoa.,hska ixLHdjla fuu fjí
wvú Ndú;d lrhs. ta ;=<ska jHdmdrj,g fukau mdßfNda.l s hdg;a úYd, myiqjla ie,fia.
tfukau wka;¾cd,h u.ska b.kSu, wka;¾cd,h u.ska b.ekaùu, wka;¾cd, /lshd iy
úfkdaodYajdo jeks lafIa;% Tiafia wka;¾cd,h fõ.j;aj ÈhqKqù we;.
by; iòyka lafIa;% fukau ;j;a úYd, lafIa;% .Kkdjla mokï lrf.k fjí wvú
ks¾udKh fjñka mj;S. tuksid fjí wvú ks¾udKh wo jk úg úYd, wdodhula ,eìh
yels wdodhï ud¾.hla njg m;aù we;. tfukau fjí wvú ks¾udKh wo ish¨ fokd
oek .; hq;= úIh lafIa;h
% laù we;.tu ksidu fjí wvú ks¾udKh ms<snò mdi,a úIh
ks¾foaYhgo we;=<;aj mj;S .
fuu .%ka:h ;=<ska Tng tA ms<sno ukd oekqula ,efí hehs uf.a ye`.Suhs. fmr lS
mßÈ ;dlaIKh iy wka;¾cd,h fl;rï ÈhqKq jqjo fujeks jákd úIh lafIa;% ms<sno
isxy, udOHfhka ,shù we;s fmd;a b;d w,amh. tu ysvei iq¿jYfhka fyda msrùug
fuu .%ka:fhka yels fõhe hs uu is;ñ.
wjidk jYfhka f;dr;=re ;dlaIK úIfhys udf.a oekqu j¾Okh lsÍug lemù
l%shdlrk iquÿq wfíiQßh .=re mshdKkag udf.a f.!rjKSh ia;=;h
s mqolr isáñ. uf.a uj
mshd we;=¨ mjqf,a ish¿ fokdg;a ,fuu .%kA:h lshjñka ;j ;j;a woyia ,nd foñka ud
Èßu;a lrk ud yd b.kqu ,enQ fidhqr fidhqßhkag;a Wojq Wmldr l< ish,a,kag;a
úfYaI ia;=;sh mqolr isáñ.
fuu .%ka:h ms<snòj mdGl Tnf.a woyia udfj; bÈßm;a lsÍug yelskï th b;d
w.hfldg i,lñ th fuu .%ka:fha wvqmdvq yÿkd .ekSug;a tajd ksjrÈ lrñka
bÈß .%ka: iïmdokh lsÍug;a buy;a rel=,la jkq we;
M . wfhaIa pdkql.
e-mail : [email protected]
[email protected]
5
mdGl Tng
fuu .%ka:h Wiia fm< úIh ks¾foaYh b,lal fldg ks¾udKh lrk ,oaols. tneúka
úIh ks¾foaYhg wod, fkdjk fldgia fuu .%ka:fhka §¾> jYfhka meyeÈ,s lsÍug
n,dfmdfrd;a;= fkdfõ. tjeks úIh ks¾foaYhg wod, fkdjk fldgia meyeÈ,s lsÍfu§ ta
ms<snòj iòyka lr we;.
tfukau fuu .%ka:h m%dfhda.sl úYh tallhla ms<snòj iïmdokh jQ .%ka:hls. tu ksid
fuu .%ka:fhka meyeÈ,s lr we;s ish`Mu fldgia m%dfhda.slj w;ayodn,d tajdfha l=vd
fjkialï isÿlrñka kej; kej; w;ayod n,ñka fuu .%ka:h mßYS,kh lsÍu u`.ska
fuu .%ka:fhka Wmßu m%fhdack ,nd .ekSug yelsjkq we;ehs uf.a úYajdihhs. tf,i
m%dfhda.l
s w;ayod ne,Sï lsÍfu§ we;súh yels .eg`M yels;dla yÿkd.ksñka tajdg
úiÿï iemhSugo fuu .%ka:h ;=,ska W;aiy ord we;. ta iòyd úfYaIfhkau wjidk
mßfþoh jk w;sf¾l lshùï ;=, bvla fjkalr we;.
tfukau m%dfhda.sl l%shdldrlï isÿlsÍug rel=,la jYfhka fuu .%ka:fha meyeÈ,s lr
we;s ish`M WodyrK j,g wod, fjí msgq tl;=jla iys; f.dkqjla Tn fj; bÈßm;a lr
we;.my; fjí msgqj fj; msúiSfuka tu f.dkqj ,nd.; yel.
fuu .%ka:h ;=, olakg ,efnk ish`M WodyrKj,g wod, fjí msgq tu f.dkqj ;=,
olakg ,efnk w;r tu.ska hï WodyrKhla ms<snòj .eg`Mjla we;sjQ úg th
ksrdlrKh lr.ekSug myiqjkq we;.
tu f.dkqfõ m%Odk fjí msgqj index f,i kï lr we;s w;r th yryd wfkl=;a ish`M
fjí msgqj,g .uka l< yel. tneúka index fjí msgqj yryd iïmQ¾K f.dkqju
mßYS,kh l< yel.
tfukau fuu .%ka:h idïm%odhl .%ka:hla fuka fkdj B-fmd;la f,iska tng
ms<s.ekafjk ksid idudkH .%ka:hlg jvd fjkia w;aoelSula Tng ióm jkq we;.
.%ka:h ;=, úúO ia:dk j, flá ud¾. ks¾udKh lr we;. tu.ska b;d myiqfjka tla
tla msgq iòyd msúiSfï yelshdj Tnfj; ,nd § we;.
6
mgqk
01 HTML wrUuq 08
02 m<uq fjí msgqj 12
03 fjí msgqjg fPao we;=,;a lsrSu 19
04 fma<s fjka lsÍu 23
05 wlaIr yev.ekaùu 26
06 újrK fh§u 35
07 ;sria f¾Ld fh§u 37
08 nyq udOH fh§u 44
09 miq;,h ieliSu 55
10 Marquee Wiq,kh 58
11 HTML ,ehsia;= 63
12 HTML j.= 76
13 HTML rduq 89
14 HTML wêiïnkaOl 94
15 HTML f*daru(form) 102
16 fjí msgqj fldgia lsÍu yd tajdg iïnkaO;d we;s lsÍu 122
17 w;sf¾l lshùï 127

7
01
HTML wrUuq
 HTML ye`Èkaùu
 HTML b;sydih
 Text editor uDÿldx.
 HTML Tags ye`Èkaùu
8
fjí wvú ks¾udKh i|yd HTML M . wfhaIa pdkql
HTML ye`Èkaùu
Hyper Text Markup Language hkafkys wlaku HTML f,i y÷kajkq ,efí' fuh l%uf,aL
NdIdjla fkdjk w;r i,l=Kq lsÍfï fla;hla fõ' Standard General Markup Language -
SGML j, Wml=,lhla jk fuh i,l=Kq lsÍfï Wiq,khka (markup tags) iuQyhlska
iukaú; fõ‘.
HTML b;sydih
HTML 1991 oS áï n¾kia,S uy;d úiska ksmojk ,oaols .
kuq;a fuh fndfyda ckm%sh jkqfha 1995 § ksl=;a jQ HTML 2.0 keue;s
ixialrKh (version) iu. fõ.
bka miq m%Odk ixialrKhla f,i 1999 § ksl=;a jQ HTML 4.01 yÿkajdÈh yel.
tfukau fïjkúg HTML-5 ixialrKh ksl=;ù

a we;s w;r th t<solajk ,oafoa 2012
j¾Ifha§h.
Text editor uDÿldx.

Html fjí msgqjla ir,j ieliSug ´kEu Text editor uDÿldx.hla Ndú; l< yel. my;
olajd we;af;a nyq,j Ndú;d jk uDÿldx. folls.
Note pad Note pad++
e fl;
9
HTML Tags (Wiq,k)ye`Èkaùu

 HTML tags ^Wiq,k& fldaK jryklska < > olajkq ,efí.
 HTML Wiq,khla idudkHfhka hq., jYfhka mj;sk w;r ;ks ;ks Wiq,khka o
olakg ,efí'
 hq.,hl m<uq Wiq,kh mgka .kakd Wiq,kh fyj;a újD; lsÍfï Wiq,kh jk w;r
fojk Wiq,kh wjika lrk fyj;a jeiSfï Wiq,kh fõ'jeiSfï Wiq,khg /
ixfla;h fhdokq ,efí'
 we;eï Wiq,k j, Wm,laIK o mj;S tajd m%Odk Wiq,kfhka miqj fhosh yel.
wkqms<sfj<la wjYH fkdfõ.
jHqyh
jeiSfï Wiq,kh
újD; lsÍfï Wiq,kh
<P> </P>
fldaK jryk
jeiSu iòyd Ndú;d l< we, br
<P align=center>
Wiq,kh Wm,laIKh w.h
e fl;
10
 fuu WmfoaY fla; i|yd lemsg,a (CAPITAL) wl=re fyda isïm,a (simple) wl=re Ndú;
l< yels jk w;r tA fya;=j ksid lsis fjkila fjí msgqj, isÿfkdfõ'
WodyrK
<HTML> <Html> <HTml>
<htML> <HtMl>
 HTML Wiq,k weußldkq bx.%Sis NdIdfjka ks¾udK ù we;.
WodyrK
 = .
Centre f,i fkdj center f,i ioyka l< hq;h
 colour f,i fkdj color f,i ioyka l< hq;=h.
fuu Wiq,k ms<snò ukd wjfndaOhla óS<`. mßfþo wOHkh lsÍfu§ ,efnkq we;.
Wm,laIK j,g w.hka fh§fï§ we;eñ wjia:dj, Wvq fldudhq.,h ^ z Z& fh§u l<
hq;=h. tfia fh§fu§ ie,ls,su;a úh hq;= lreKq lSmhla we;s w;r tjd ksis f,i Ndú;d
fkdl,fyd;a fjí msgqfõ l%shdj,shg n,mEï t,a, úh yel tu lreKq iïNkaoj §¾>
meyeÈ,s lsÍula w;sf¾l lshùï ;=, wvx.= fõ'
w;sf¾l lshùï fj; .uka lsÍug my; fnd;a;u Click lrkak'
w;sf¾l lshùï fj; .uka lrkak >>
e fl;
11
02
m<uq fjí msgqj
 fjí msgqjl uQ,sl fldgia yÿkd .ekSu

 uQ,sl HTML Wiq,k ye`Èkaùu
 m<uq fjí msgqj ks¾udKh lsÍu
 fjí msgqj iq/lSu (save)
 fjí msgqfõ úHqyh Wiq<k iu`. iei§u
12
fjí msgqjl uQ,sl fldgia yÿkd .ekSu
YS¾Ih - head
YS¾Ifha ud;Dldj - titel
lò - body
e fl;
13
uQ,sl HTML Wiq,k ye`Èkaùu

fjí msgqjla ks¾udKh lsÍfï§ wjYHjk uQ,l
s Wiq,khka iy tajd ms<snòj flá
yeÈkaùula my; oelafõ'
<html> u.ska fjí msgqj wdrïN lrhs.
<head> u.ska fjí msgqfõ YS¾Ih wdrïN lrhs.
u.ska fjí msgqfõ YS¾Ihg kula fhoSu isÿ lrhs.

<title>
^fï;=< ioyka lrk ish¨ foa YS¾Ifha ioyka fõ.&
</title> u.ska fjí msgqfõ YS¾Ihg kula fhoSu wjika lrhs
</head> u.ska fjí msgqfõ YS¾Ih wjika lrhs.
u.ska fjí msgqfõ lò fldgi wdrïN lrhs.

<body>
^fï ;=< ioyka lrk ish¨ foa lò fldgfia ioyka fõ.&
</body> u.ska fjí msgqfõ lò fldgi wjika lrhs.
</html> u.ska fjí msgqj wjika lrhs.
e fl;
14
m<uq fjí msgqj ks¾udK lsÍu

´kEu Text editor uDÿldx.hla Ndú;d lr my; mrsos Wiq,khka fhdokak'
WodyrK chapter_02 / first_web_page.html

<html>
<head>
<title> First web page </title>
</head>
<body>
ආයුබ ෝවන්
HELLO !
</body>
</html>
fuh Note pad++ uDÿldx.fha my; mrsos fhosh yel'
fuf,i Wiq,k fhdod ilia l< fldgi fjí msgqfõ m%Nj fla;h (source code) f,i
yÿkajhs'
e fl;
15
fjí msgqj iq/lSu (save)

oeka fuu f.dkqj html f.dkqjla f,i iq/lsh hq;=h.ta iòyd idudkH mrsos File >> save
fj; .uka lr save l, yel. ^flá h;=r - ctrl + s &
jeo.;au lreK jkafka save lrk úg ,ndfok ku wjidkfha .html f,i ,nd osh
hq;=ùuhs. fuh f.dkqfõ f.dkq È.=j f,io yeÈkafõ. WodyrKhla f,i f.dkqfõ ku
first web page kï th first web page.html f,i fhdod iqrlsh hq;=h.
by; fjí msgqfõ iòyka mßÈ isxy, wl=re Unicode wlaIr l%uh Ndú;d lrkafka kï
Encoding hkak unicode f,i f;dard.; hq;=h. th Notepad uDÿldx.h ;=, kï f.dkqj
iqrlSu§ ,ndÈh yel.
Notepad++ uDldx.h ;=, kï Encoding fj; f.dia f;dard .; yel.
e fl;
16
fjí msgqfõ úHqyh Wiq<k iu`. iei§u

oeka fuu f.dkqj .nvd jQ ia:dkfha iqrlSfu§ ,nd ÿka ku iys; f.dkqjla mej;sh hq;=
w;r th fjí w;ßlaiqfjka (Web browser) újD; ùug ieliS we;.
fuu f.dkqj újD; l< miqj my; mßÈ m%;sM,hla ,efnkq we;.
we;eï úg tf,i fjí w;ßlaif q jka (web browser) újD; ùug iQodkï ù fkdue;s
wjia:djkao ;sìh yel. tjeks wjia:djkays§ we;súh yels .eg`M iòyd úi`ÿï w;sf¾l
lshùï ;=, wvx.=fõ.
tfukau fjí msgqj f.dvke.Sfuka wk;=rej kej; kej; fjkialï lsÍu ms<snòj
meyeÈ,s lsÍula w;sf¾l lshùï ;=, wvx.=fõ.
,eî we;s m%;sM,h iy th ks¾udKh lsÍug fhdod.;a Wiq,khka my; mßÈ iei§ula
isÿl< yel.
fuys <titel> yd </title> w;r we;s ish¨ oE fjí msgqfõ YS¾Ifha(head) ud;Dldj f,i
fh§ we;s w;r <body> yd </body> ;=, we;s ish¨ oE fjí msgqfõ lò(body) ;=, fh§
we;.
e fl;
17
e fl;
18
03
fjí msgqjg fPao
we;=,;a lsrSu
 <P> Wiq,kh yÿkd.ekSu

 fPao ia:dk.; lsrSu
19
<P> Wiq,kh yÿkd.ekSu

fþo fjkalÍ
s ug html ;=< <p> Wiq,kh Ndú;d flf¾.fuu Wiq,khg </p> jeiSfï
Wiq,khlao Ndú;d fõ. fuysoS fPaohla f,i wdrïN úhhq;= ia:dkfha uq,g <p> wdrïNl
Wiq,kh;a w.g </p> wjika Wiq,kh;a fhÈh hq;=h. fuys p hkq Paragraph hkak flá
lr oelaùula fõ.
WodyrK chapter_03 /paragraph.html

<html>
<head>
<title> paragraph-Example </title>
</head>
<body>
<p>
HTML stands for Hypertext Markup Language, and it is
the most widely used language to write Web Pages.
</p>
<P>
Hypertext refers to the way in which Web pages (HTML
documents) are linked together. Thus, the link
available on a webpage is called Hypertext.
</p>
</body>
</html>
m%;sM,h iys; fjí msgqfõ lò (body) fldgi mukla my; oelafõ.
e fl;
20
m%;sM,h chapter_03 / paragraph.html
HTML stands for Hypertext Markup Language, and it is the most

widely used language to write Web Pages.
Hypertext refers to the way in which Web pages (HTML documents)

are linked together. Thus, the link available on a webpage is
called Hypertext.
fPao ia:dk.; lsrSu

fï iòyd align kï Wm,laIKh fhdod.; yel. tys w.hka f,i center , right ,
left ,nd Èh yel. tu w.hka yS l%shdldÍ;ajh my; mßÈ fõ.
center fþoh ueog ia:dk.; lrhs
right fþoh ol=Kg ia:dk.; lrhs
left fþoh jug ia:dk.; lrhs
e fl;
21
WodyrK chapter_03 /paragraph_align.html

<html>
<head>
<title> paragraph align-Example </title>
</head>
<body>
<p align = “center”> This is center aligned. </p>
<p align = “left”> This is left aligned. </p>
<p align = “right”> This is right aligned. </p>

</body>
</html>
m%;sM,h chapter_03 /paragraph_align.html

This is center aligned.
This is left aligned.
This is right aligned.
e fl;
22
04
fma<s fjka lsÍu
 Html ;=, fma<s yeisfrk wdldrh

 <br> Wiq,kh yÿkd.ekSu
23
Html ;=, fma<s yeisfrk wdldrh

WodyrK chapter_03 /Line_Break(problem).html
<html>
<head>
<title> Line Break-Example</title>
</head>
<body>
H
T
M
L
</body>
</html>
m%;sM,h chapter_03 /Line_Break(problem).html

H T M L
by; WodyrKfhka fmkS hkafka fjí msgqj ilik wjia:dfõ fm<ska fm<g wlaIr
fh§u isÿl<o m%;sM,fha tu wlaIr Èiajkafka tl fm<g njhs. tu ksid kj
= .
fm<lg .uka lsÍugo Wiq<k Ndú;d l< hq;h
e fl;
24
<br> Wiq,kh yÿkd.ekSu
by; .eg¿jg úi`ÿula f,i <br> Wiq,kh yÿkajdÈh yel. fuys br hkq Break hkak
flá lr oelaùula fõ. tu.ska isÿjkafka tu Wiq,kh fh§fuka miqj fhdok ish¿ foa
kj fma<shl igyka ùuhs. tfukau fuys úfYaI;ajh jkafka wjika lsÍfï Wiq,khla
fyj;a </br> wjYH fkdùuhs.
WodyrK chapter_04 /Line_Break(solution).html

<html>
<head>
<title> Line Break-Example</title>
</head>
<body>
H <br> T <br> M <br> L
</body>
</html>
m%;sM,h chapter_04 /Line_Break(solution).html

H
T
M
L
e fl;
25
wlaIr yev.ekaùu
05
 uQ,sl yev.ekaùfï Wiq,k
 ud;Dld Wiq,k
 <font> Wiq,kh iu`. wlaIr yev.ekaùu
26
uQ,sl yev.ekaùfï Wiq,k
<b> ;o meye;s (bold) wlaIr.
<i> weo yev;s (italic) wlaIr.
<u> há brla iys; (underline) wlaIr.
<s> wl=re yryd brla iys; (strike out) wlaIr
<sup> Wäka ,l=Kq lrk ,o wlaIr.(Superscript)
<sub> háka ,l=Kq lrk ,o wlaIr.(Subscript)
WodyrK chapter_05 /Text_formatting.html

<html>
<head>
<title> Text formatting-Example</title>
</head>
<body>
This is a <b> Bold </b> text. <br>
This is a <i> Italic </i> text. <br>
This is a <u> Underlined </u> text. <br>
This is a <s> Strike</s> text. <br>
<br>
2<sup>3</sup> = 8 <br>
H<sub>2</sub>O
</body>
</html>
e fl;
27
m%;sM,h chapter_05 /Text_formatting.html

This is a Bold text.<br>
This is a Italic <br>text.<br>
This is a Underlined text. <br>
This is a Strike text.
23= 8
H2O
fuys§ <b> iy </b> w;r we;s wlaIr ;o meye .ekaù we;. fuf,iu wfkla Wiq,k j,
l%shdldÍ;ajho jgyd .ekSug wmyiq fkdjkq we;ehs uf.a ye.Suhs.
ud;Dld Wiq,k
<h1> isg <h6> olajd Wiq,k ud;Dld ioyd fhdod .kS. fuys úfYaI;ajh jkafka fuu
Wiq,kh fh¥ wlaIr ;o meye ùu iy Wiq,kh wjidkfhaoS kj fma<lg .uka lsÍuhs.
ir,j .;aúg fuu ud;Dld Wiq,k ;=, <b> Wiq,khla iy <br> Wiq,khl
l%shdldÍ;ajho wka;¾.;j mj;S.
<h1> m<uq uÜgfï ud;Dld.
<h2> fojk uÜgfï ud;Dld.
f;jk uÜgfï ud;Dld.

<h3>
<h4> isõjk uÜgfï ud;Dld.
<h5> miajk uÜgfï ud;Dld.
<h6> ihjk uÜgfï ud;Dld.
e fl;
28
WodyrK chapter_05 /heading.html

<html>
<head>
<title> heading-Example</title>
</head>
<body>
<h1> This is heading 1 </h1>
</body>
</html>
m%;sM,h chapter_05 /heading.html
This is heading 1
This is heading 2
This is heading 3
This is heading 4
This is heading 5
This is heading 6
fuys§ wlaIr ;o meye .ekaùula isÿù we; tfukau br Wiq,kla fkdfhÿjo kj

fm<lg .uka lsÍula isÿù we; fujks wjia:d iys; Wiq,k lsysmhlau bÈßfha§ yuqfõ
tjdfha fujeks ie`.jqk l%shdldÍ;ajhka yÿkd.ekSu b;d m%fhdackj;a jkq we;
e fl;
29
<font> Wiq,kh iu`. wlaIr yev.ekaùu

fuu Wiq,kh u.ska wlaIr ioyd úúO fjkialï l< yel. ta iòyd úúO Wm,laIK
Ndú;d l< yels w;r tu Wm,laIK my; j.=fõ úia;r lr we;.
wlaIr j, m%udKh fjkial< yels w;r 1 isg 7olajd w.hka ,ndosh

size
yel.
color wlaIrfha j¾Kh ,ndÈh yel.
wlaIr j, fmkqu fjkial< yels w.hka iòyd font j¾.fha

face
ku ,ndosh hq;=h.
font Wiq,kh iu`. Size Wm,laIKfha ls%hdldÍ;ajh wjfndaO lr.ekSug my;

WodyrKh i,lkak.
WodyrK chapter_05 /Font_size.html

<html>
<head>
<title> Font size-Example</title>
</head>
<body>
<font size = “7”> Font 7 </font> <br>
<font size = “4”> Font 4 </font> <br>
<font size = “1”> Font 1 </font>
</body>
</html>
e fl;
30
m%;sM,h chapter_05 /Font_size.html
Font 7
Font 4
Font 4
font Wiq,kh iu`. color Wm,laIKfha ls%hdldÍ;ajh wjfndaO lr.ekSug my;

WodyrKh i,lkak.
WodyrK chapter_05 /Font_color.html

<html>
<head>
<title> Font color-Example</title>
</head>
<body>
<font color = “red”> Red color </font> <br>
<font color = “green”> Green color </font> <br>
<font color = “blue”> Blue color </font>
</body>
</html>
m%;sM,h chapter_05 /Font_color.html

Red color
Green color
Blue color
e fl;
31
fuysoS j¾K Ndú;d l< yels wdldr wdldr 2 la mj;sk w;r ta ms<snòj wjidk
mßÉfþoh jk zw;sf¾l lshùïZ ;=, §¾> úia;rhla wvx.= fõ.
font Wiq,kh iu`. face Wm,laIKfha ls%hdldÍ;ajh wjfndaO lr.ekSug my;

WodyrKh i,lkak.
WodyrK chapter_05 /Font_face.html

<html>
<head>
<title> Font face-Example</title>
</head>
<body>
<font face = “Calibri”> Hello </font> <br>
<font face = “Consolas”> Hello </font> <br>
</body>
</html>
m%;sM,h chapter_05 /Font_face.html

Hello
Hello
fuys§ ksjrÈ f,i m%;sodkh ,ndfokafka mß.klfha mj;sk wl=re j¾. fh§fï§ muks
e fl;
32
fmr wOHkh l, ish¿ Wm,laIK tlu Wiq,kh hgf;a tljr fhÈh yels w;r ta
iòyd wkqms<sfj<la wjYH fkdfõ.
my; WodyrKfha wlaIrj, m%udKh 5 f,i;a j¾Kh r;= f,i;a wl=re j¾.h Chiller
f,i;a ilid we;s w;r tA iòyd tlu Font Wiq,kh hgf;a Wm,laIK fhdod we;.
WodyrK chapter_05 /Font_attributes.html

<html>
<head>
<title> Font attributes-Example</title>
</head>
<body>
<font color=“red” size=“5” face=“Consolas”> Hello </font>
</body>
</html>
m%;sM,h chapter_05 /Font_attributes.html
Hello
fuys§ wm Ndú;d lrk wlaIr j¾. fï jkúg mß.Klfha ia:dmkh lr ;sìh hq;=h.
tfukau Wiq,k lsysmhlao tljr fhdod .; yel. ta ms<snòj wjfndaO lr .ekSug

my; WodyrKh i,lkak.
e fl;
33
WodyrK chapter_05 /All_In_One(Font tags).html

<html>
<head>
<title> All In One (Font tags) </title>
</head>
<body>
<font color=“red” size=“5”>
<b><i>H T </i> M L</b>
</font>
</body>
</html>
m%;sM,h chapter_05 /All_In_One(Font tags).html
HTML
e fl;
34
06
újrK fh§u
 újrK yÿkd.ekSu
 újrK fhoSfï jeo.;alu
 újrK fh§u
35
újrK yÿkd.ekSu
fjí wvúh krUkakdg fkdj fjí wvúh ks¾udKlreg muKla ;u wjYH;djka wkqj
html Wiq,k w;r fhÈh yels fldgia újrK fõ.fïjd lsiÿ
s whqrlska m%;sodkh fkdfõ.
újrK fhoSfï jeo.;alu

úYd, fjí wvú ks¾udKfha § miql,l wu;l fõ hehs yef.k lreKq Wiq,k w;r
wjYH igykla f,i ;eîug fuh Ndú;d l< yel.tu.ska miql,l fjí wvúh kej;
ÈhqKq lsÍug myiq jkq we;s w;r fjí wvúfha ixlS¾K;ajh o wvqù fldgia myiqfjka
fjka lr n,d .; yels fõ.
újrK fh§u
fï ioyd újrKh lsÍug wjYH fldgi  w;r fhÈh hq;=h.
WodyrK chapter_06 /comments.html

<html>
<head>
<title> comments-Example</title>
</head>
<body>
HTML stands for

Hypertext Markup Language
</body>
</html>
m%;sM,h chapter_06 /comments.html

HTML stands for Hypertext Markup Language
e fl;
36
07
;sria f¾Ld fh§u
 <hr> Wiq,kh yeÈkaùu

 ;sria f¾Ld fh§fu§ Ndú;d jk Wm,laIK
 f¾Ldfõ m%udKh
 f¾Ldfõ j¾Kh
 f¾Ldfõ È.
 f¾Ldfõ msysàu
37
<hr> Wiq,kh yeÈkaùu

;sria f¾Ld fh§u iòyd <hr> Wiq,kh Ndú;d lrhs. fuys hr hkq Horizontal Rules hkak
flá lr oelaùula fõ.tfukau fuys tla úfYaI;ajhla jkafka wjika lsÍfï Wiq,khla
fyj;a </hr> wjYH fkdùuhs.
WodyrK chapter_07 /Horizontal Rules .html

<html>
<head>
<title> Horizontal Rules-Example</title>
</head>
<body>
Horizontal Rules
<hr>
</body>
</html>
m%;sM,h chapter_07 /Horizontal Rules .html

Horizontal Rules
e fl;
38
;sria f¾Ld fh§fu§ Ndú;d jk Wm,laIK
Size f¾Ldfõ m%udKh.
Color f¾Ldfõ j¾Kh
Width f¾Ldfõ È. ^m%;sY; f,i fyda pixel m%udKh f,i.&
align f¾Ldfõ msysàu
f¾Ldfõ m%udKh
WodyrK chapter_07 /Horizontal_Rules_size.html

<html>
<head>
<title> Horizontal Rules size-Example</title>
</head>
<body>
<hr size = 5>
<hr size = 10>
<hr size = 15>
</body>
</html>
m%;sM,h chapter_07 /Horizontal_Rules_size.html
e fl;
39
f¾Ldfõ j¾Kh
WodyrK chapter_07 /Horizontal_Rules_color.html

<html>
<head>
<title> Horizontal Rules color-Example</title>
</head>
<body>
<hr color = “red”>
<hr color = “green”>
<hr color = “blue”>
</body>
</html>
m%;sM,h chapter_07 /Horizontal_Rules_color.html
e fl;
40
f¾Ldfõ È.
fuh m%ldY l< yels m%Odk wdldr 2 ls. m<uq l%uh È. m%udKh mslai,a
w.hkaf.ka ,nd§uhs. fojk l%uh jkafka È. m%udkh msgqfõ iïmQ¾K Èf.ka m%;sY;hla
f,i ,nd §uhs.
WodyrK chapter_07 /Horizontal_Rules_width.html

<html>
<head>
<title> Horizontal Rules width-Example</title>
</head>
<body>
<hr width = “50”>
<hr width = “30”>
<hr width = “50%”>
<hr width = “30%”>
</body>
</html>
m%;sM,h chapter_07 /Horizontal_Rules_width.html
e fl;
41
f¾Ldfõ msysàu
fuysoS f¾Ldfõ msyà
s u jug ueog ol=kg f,i fjkia l< yel. fuh fydÈka wjfndaO
lr .ekSug È. 500 jQ f¾Ldjla (width = 500) WodyrKhg f.k we;.
WodyrK chapter_07 /Horizontal_Rules_align.html

<html>
<head>
<title> Horizontal Rules align-Example</title>
</head>
<body>
<hr width = 500 align = left>
<hr width = 500 align = center>
<hr width = 500 align = right>
</body>
</html>
m%;sM,h chapter_07 /Horizontal_Rules_align.html
e fl;
42
by; b.k.;a Wm,laIK ish,a, Ndú;d lrñka my; WodyrKh ks¾udKh lr we;.
WodyrK chapter_07 /All_In_One(Horizontal Rules).html

<html>
<head>
<title> All In One (Horizontal Rules) </title>
</head>
<body>
<hr width=“50%” align=“left” color=“#ff0000” size=“20”>
<hr width=“50%” align=“left” color=“#ee0000” size=“20”>
<hr width=“50%” align=“left” color=“#dd0000” size=“20”>
<hr width=“50%” align=“left” color=“#cc0000” size=“20”>
<hr width=“50%” align=“left” color=“#bb0000” size=“20”>
<hr width=“50%” align=“left” color=“#aa0000” size=“20”>
</body>
</html>
m%;sM,h chapter_07 /All In One (Horizontal Rules).html
fuysoS j¾K Ndú;d l< yels wdldr wdldr 2 la mj;sk w;r ta ms<snòj wjidk
mßÉfþoh jk zw;sf¾l lshùïZ ;=, §¾> úia;rhla wvx.= fõ.
e fl;
43
08
nyq udOH fh§u
 mska;+r f.dkqjla fh§u

 Embed Wiq,kh
 ùäfhda f.dkqjla fh§u
 Y%jH f.dkqjla fh§u
44
mska;+r f.dkqjla fh§u

mska;+r fh§u iòyd m%Odk jYfhka img Wiq,kh fhdod .kS ta iu`. Ndú;d l, yels
Wm,laIK my; olajd we;.
src mska;+r f.dkq ud¾.h f.dkq kduh iy f.dkq È.=j ,nd Èh hq;=h
hï fodYhla ksid mska;+r Èiafkdfõ kï PdhdrEmh fjkqjg fmkaúh

alt
hq;= jdlH lKavh fï hgf;a iòyka l, yel
Align mska;+rh ia:dk .; lsÍu
Border jfÜ odrh ieliSu
Width È. fjkia lsÍu
Height Wi fjkia lsÍu
Vspace rEmfhys jï me;af;a iy ol=Kq me;af;a bv ilia lsÍu.
hspace rEmfhys Wv iy hg bv m%udKh ilia l< yels h'
Img Wiq,kh hgf;a src Wm,laIKhg mska;+rfha f.dkq ud¾.h f.dkq kduh iy f.dkq
È.=j ,ndoSfïoS b;d ie,ls,su;a úh hq;=h. thg fya;=j jkafka l=vd fyda w;ajer§ula
ksid mska;+rh m%;sodkh fkdúh yels ùuhs.
tu ksid f.dkq ud¾.h f.dkq kduh iy f.dkq È.=j ms,snòj ksjrÈj oek isàu jeo.;a
jk w;r tA ms<snòj úia;r lsÍula w;sf¾l lshùï ;=< wvx.= fõ.
e fl;
45
fuys§ wm fhdod .kakd mska;+r f.dkqj wm ks¾udKh l< fjí wvúh jk

adding_image.html iu`. mj;sk data kï folder ;=, mj;sk w;r f.dkqfõ ku jkafka
fruits hkakhs. tu f.dkqfõ f.dkq È.=j png fõ.
WodyrK chapter_08 /adding_image.html

<html>
<head>
<title> adding image-Example</title>
</head>
<body>
<img src = “data/fruits.png”>
</body>
</html>
m%;sM,h chapter_08 /adding_image.html
e fl;
46
ó<`. WodyrKfh§ mska;+rfha i;H ku jQ fruits fjkqjg fruit f,i l=vd fjkia lula
lr kej; fjí msgqjla ks¾udKh lruq. tfukau alt fldgig image of fruits f,i
fh§fuka alt fldgi ksjerÈj l%h
s d;aul fõ oehs mßlaId l, yel.
WodyrK chapter_08 /alt.html

<html>
<head>
<title> alt-Example</title>
</head>
<body>
<img src=“data/fruit.png” alt=“image of fruits”>
</body>
</html>
m%;sM,h chapter_08 /alt.html

image of fruits
fuys§ wm we;=,;a l< ia:dkfha fruit kï f.dkqjla fkdue;s neúka id¾:l f,i
mska;+rhla m%;sodkh fkdùh. tu fodaYh ksid alt hgf;a ,ndÿka fldgi o¾Ykh ùula
isÿù we;.
wm alt fldgila fkdÿkafka kï Èiajkafka jeks fldgils.
tu ksid fjí msgq ks¾udKfh§ isÿjk fodaY fyda cd,fha isÿjk fodaY jeks ´kEu
isÿùula ksid mska;r
+ ksismßÈ o¾Ykh fkdúh yel. tjeks wjia:djl§ fjí wvú
mßYS,lf.a myiqj fjkqfjka mska;r+ fha wvx.= foa ms<snòj flá yeÈkaùula fuf,i
o¾Ykh l, yel.
e fl;
47
ó<`. WodyrKfh§ width iy Height Wm,laIK ms<snòj i,ld n,uq.
WodyrK chapter_08 /Height & width.html

<html>
<head>
<title> Height & width-Example</title>
</head>
<body>
<img src = “data/fruits.png” height = 500 width = 500>
</body>
</html>
m%;sM,h chapter_08 /Height & width.html
e fl;
48
fuu WodyrKfh§ border Wm,laIK ms<snòj i,ld n,uq.
WodyrK chapter_08 /image_border.html

<html>
<head>
<title> image border-Example</title>
</head>
<body>
<img src = “data/fruits.png” border = 5>
</body>
</html>
m%;sM,h chapter_08 /image_border.html
e fl;
49
Embed Wiq,kh
ish`M nyq udOH fhoSug yels fmdÿ Wiq,khla f,i embed Wiq,kh Ndú;d l< yel.
fuys§ src hgf;a ,ndfok ´kEu j¾.fha f.dkqjla fuys m%;sodkh fõ. kuq;a tu f.dkqj
fuu Wiq,khg iyh olajk f.dkqjla úh hq;=h.
src f.dkq ud¾.h f.dkq kduh iy f.dkq È.=j ,nd Èh hq;=h
loop Y%jH/oDYH mgh ksuùfuka miqj kej; bfíu l%shd;aul ùug
hidden Y%jH/oDYH mgh i`.jd l%shd;aul ùug
WodyrK chapter_08 /embed_Example.html

<html>
<head>
<title> embed tag-Example</title>
</head>
<body>
<embed src=“data/video.mp4” loop=“true”>
</body>
</html>
e fl;
50
m%;sM,h chapter_08 /embed_Example.html
wu;r plugin tlla wjYHùu iy úúO browser fuu Wiq,khg m%;spdr olajk
wdldrh úúO ùu ksid j¾;udkfha fuu Wiq,kh t;rï m%dfhda.slj Ndú;d fkdfõ.
fuu fya;=j ksidu kj úYh ks¾foaYh ;=, fuu Wiq,kh ms<snòj meyeÈ,s lsÍug
n,dfmdfrd;a;= fkdfõ.
e fl;
51
ùäfhda f.dkqjla fh§u

Embed Wiq,kfha ish`M fodaY j,g ms<shula f,i HTML 5 ixialrKh u`.ska Wiq,k
lsysmhla yÿkajd oS we;.
ta w;r ùäfhda f.dkqjla wdfoaY lsÍug video Wiq,kh fhdod .; hq;=h.
loop oDYH mgh ksuùfuka miqj kej; bfíu l%shd;aul ùug
Controls play , pause , volume iys; toolbar tl;= o¾Ykh lr .ekSug
Poster Odjkh lsÍug fmr fmkajk mska;+rh (cover photo) fh§u.
Autoplay wdrïNfha oDYH mgh bfí l%h

s d;aul ùu.
fuu Wiq,kh HTML 5 j¾.hg wh;a jk ksid we;eï Wm,laIK fh§fu§ w.hla wdfoaY
lsÍu wksjd¾h fkdfõ. Controls iy loop hkq tjeks Wm,laIK folls tu Wm,laIK
fol my; WodyrKfha§ w.hka wdfoaYhlska f;drj fhdod we;.
WodyrK chapter_08 /video.html
<html>
<head>
<title> video-Example</title>
</head>
<body>
<video src = “data/video.mp4” controls loop>
</body>
</html>
e fl;
52
m%;sM,h chapter_08 /video.html
fuys Controls fldgi fkdfhdod l%shd;aul lf,a kï my; oelafjk Toolbar fldgi
fkd,efí.
fuys Poster hk Wm,laIKh g mska;r + h mj;sk ia:dkh mska;r

+ fha ku iy f.dkq
È.=j ,nd ÿka úg tu mska;+rh ùäfhda f.dkqj Odjkh lsÍug fmr ^cover photo f,i&
fh§ mj;S.
WodyrK chapter_08 /video_poster.html
<html>
<head>
<title> video poster-Example</title>
</head>
<body>
<video src = “data/video.mp4” poster = “data/cover.jpg”
controls>
</body>
</html>
m%;sM,h chapter_08 /video_poster.html
e fl;
53
Y%jH f.dkqjla fh§u

Y%jH f.dkqjla wdfoaY lsÍug audio Wiq,kh fhdod .; hq;=h.v
loop Y%jH mgh ksuùfuka miqj kej; bfíu l%shd;aul ùug
Controls play , pause , volume iys; toolbar tl;= o¾Ykh lr .ekSug
Autoplay wdrïNfha oDYH mgh bfí l%h

s d;aul ùu.
WodyrK chapter_08 / audio.html

<html>
<head>
<title> audio-Example</title>
</head>
<body>
<audio src = “data/Sound.mp3” controls autoplay loop>
</body>
</html>
m%;sM,h chapter_08 / audio.html
e fl;
54
09
miq;,h ieliSu
 miq;,hg j¾Khla fhoSu

 miq;,hg mska;+rhla fh§u
55
miq;,hg j¾Khla fhoSu

fuh fjí msgqfõ miqìug isÿlrk fjkia lsÍula ksid fuys§ body Wiq,kh ;=,
Wm,laIK fh§u isÿlrhs.
fï ioyd body Wiq,kh ;=< bgcolor kï Wm,laIK Ndú;d lrhs.
WodyrK chapter_09 /bg_color.html

<html>
<head>
<title> bg color-Example</title>
</head>
<body bgcolor = “#6666FF”>
<h1> This background is sky blue </h1>
</body>
</html>
m%;sM,h chapter_09 /bg_color.html
e fl;
56
miq;,hg mska;+rhla fh§u

fï ioyd body Wiq,kh ;=< background kï Wm,laIK Ndú;d lrhs.
background = mska;+rfha ud¾.h f.dkq kduh yd f.dkq È.=j ,nd Èh hq;=h.
WodyrK chapter_09 /bg_image.html
<html>
<head>
<title> bg image-Example</title>
</head>
<body background = “data/bgpic.jpg”>
<font color = “yellow”>
<h1> This background is filled up with image.</h1>
</font>
</body>
</html>
m%;sM,h chapter_09 /bg_image.html
e fl;
57
Marquee Wiq,kh
10
 Marquee Wiq,kfha Wm,laIK
 p,kh jk osYdj
 yeisÍu fjkia lsÍu
 p,kh jk fõ.h
58
fuu Wiq,kfha l%h s dldÍ;ajh .%ka:hla u.ska oelaùu wmyiq fõ. kuq;a fuu .%ka:h
iu`. we;s m%dfhda.sl WodyrK tl;=fõ 10 mßÉfþoh hgf;a we;s HTML f.dkq Odjkh
lr ne,Sfuka fï ms<snòj ksjrÈ wjfndaOhla ,nd .ekSug yelshdj ,efnkq we;.
m%dfhda.l
s WodyrK f.dkqj ms<snò f;dr;=re .%ka:h wdrïNfha 06 jk msgqfõ iòykaj
we;.
<< 06 jk msgqj fj; .uka lrkak
Marquee Wiq,kfha Wm,laIK

fjí msgqfõ mj;sk foa p,kh lsÍu ioyd marquee Wiq,kh Ndú;d l< yel. fï iu`.
my; Wm,laIK Ndú;d l< yel.
Direction p,kh úh hq;= ÈYdj
Behavior yeisßh hq;= wdldrh
Scrolldelay p,kh úh hq;= fõ.h ^jeä w.hla ÿka úg fyñka l%Shd;aul fõ.&
Scrollamount p,kh úh hq;= fõ.h ^jeä w.hla ÿka úg fõ.fhka l%Shd;aul fõ.&
Width p,kh úh hq;= m<, m%;sY;hla f,i
Heigth p,kh úh hq;= Wi m%;sY;hla f,i
Loop p,kh úh hq;= jdr .kk
Bgcolor p,kh jk fldgfia miqìï j¾Kh
Hspace p,kh úh hq;= Wi fomiska m%;sY;hla f,i
Vspace p,kh úh hq;= m<, fomiska m%;sY;hla f,i
p,kh jk osYdj
p,kh jk ÈYdj fjkia lsÍu ioyd marquee Wiq,kh hgf;a Ndú;d l< yel Direction
Wm,laIKh Ndõ;d l< yel. fuhg right , up , down , left f,i w.hka fjkia l,
yel. tu`.ska ms<sfj,ska ol=Kg by<g my<g jug jk mßÈ p,kh ùu isÿfõ. fï
iòyd w.hla ,nd fkdÿka úg left wjia:dfõ mj;S.
e fl;
59
WodyrK chapter_10 /marquee_direction.html

<html>
<head>
<title> marquee direction-Example</title>
</head>
<body>
<marquee> This is example of marquee </marquee>
<marquee derection = “right”> This is example of marquee
</marquee>
</body>
</html>
m%;sM,h chapter_10 /marquee_direction.html

This is example of marquee
yeisÍu fjkia lsÍu

yeisÍu fjkia lsÍu ioyd marquee Wiq,kh hgf;a Behavior Wm,laIKh Ndõ;d l<
yel. fuhg fhÈh yels w.hka my; mßÈ fõ. fï iòyd w.hla ,nd fkdÿka úg scroll
wjia:dfõ mj;S.
scroll È.ska È.g tlu w;g p,kh fõ
slide tlajrla p,kh ù uq,a msysgqfï k;r fõ
alternate È.ska È.g fomig p,kh fõ
e fl;
60
WodyrK chapter_10 /marquee_Behavior.html

<html>
<head>
<title> marquee Behavior-Example</title>
</head>
<body>
<marquee Behavior = alternate> This is example of marquee
</marquee>
</body>
</html>
m%;sM,h chapter_10 /marquee_Behavior.html

p,kh jk fõ.h
p,kh jk fõ.h fjkia lsÍu ioyd marquee Wiq,kh hgf;a Scrollamount iy
Scrolldelay Wm,laIK Ndõ;d l< yel. Scrollamount u`.ska p,kh úh hq;= fõ.h
fjkia l< yel. Scrolldelay u`.ska p,kfha m%udoh fjkia l< yel. ta wkqj
Scrollamount w.h jeä lsÍu u`.ska p,kh jk fõ.h jeä l< yel. Scrolldelay w.h
jeä lsÍu u`.ska p,kh jk fõ.h wvq l< yel.
e fl;
61
WodyrK chapter_10 /marquee_Scrollamount&Scrolldelay.html

<html>
<head>
<title> marquee Scrollamount&Scrolldelay-Example</title>
</head>
<body>
<marquee Scrollamount = 100> This is example of marquee
Scrollamount </marquee>
<marquee Scrolldelay = 10> This is example of marquee
Scrolldelay </marquee>
</body>
</html>
m%;sM,h chapter_10 /marquee_Scrollamount&Scrolldelay.html

This is example of marquee Scrollamount
This is example of marquee Scrolldelay
fuu marquee Wiq,kh u`.ska jpk muKla fkdj fjí msgqj ;=, mj;sk fþo mska;+r
jeks wx.o p,kh l< yel.
e fl;
62
11
HTML ,ehsia;=
 mßmdá.; ,ehsia;=.
 mßmdá.; fkdjk ,ehsia;=.
 ks¾jpk ,hsia;=.
63
mßmdá.; ,ehsia;.=
fï ioyd ol Wiq,kh Ndú;d fõ. ol hkq Ordered List hkak flálr oelaùuls ta hgf;a
o;a; fhoSug li Wiq,kh Ndú;d l< hq;h= .
jHqyh
<ol> ,ehsia;=j wdrïNh

<li> m<uq whs;uh </li>
<li> fojk whs;uh </li>
<li> f;jk whs;uh </li>
</ol> ,ehsia;=j wjidkh
WodyrK chapter_11 /ordered_list.html

<html>
<head>
<title> Ordered List-Example </title>
</head>
<body>
<ol>
<li> RAM </li>
<li> ROM </li>
<li> ALU </li>
<li> CU </li>
</ol>
</body>
</html>
e fl;
64
m%;sM,h chapter_11 /ordered_list.html

1. RAM
2. ROM
3. ALU
4. CU
fuys§ ,ehsia;=j 1 2 3 jYfhka wxl fh§ ilia ùu isÿfõ. fuh wdldr lSmhlg fjkia
lsÍu l< yel. tu wdldr my; olajd we;s WodyrK lSmhlska meyeÈ,s lr we;.
fï iòyd ol Wiq,kh hgf;a type Wm,laIKh fhdod .; hq;=h. type Wm,laIKhg úúO
w.hka fh§fï§ isÿjk fjkialu ms<snòj my; WodyrK ie<lSfuka wjfndaO lr .;
yel.
WodyrK chapter_11 /ordered_list_type_A.html

<html>
<head>
<title> Ordered List type A-Example </title>
</head>
<body>
<ol type = “A”>
<li> RAM </li>
<li> ROM </li>
<li> ALU </li>
<li> CU </li>
</ol>
</body>
</html>
e fl;
65
m%;sM,h chapter_11 /ordered_list_type_A.html

A. RAM
B. ROM
C. ALU
D. CU
WodyrK chapter_11 /ordered_list_type_a.html

<html>
<head>
<title> Ordered List type a-Example </title>
</head>
<body>
<ol type = “a”>
<li> RAM </li>
<li> ROM </li>
<li> ALU </li>
<li> CU </li>
</ol>
</body>
</html>
m%;sM,h chapter_11 /ordered_list_type_a.html

a. RAM
b. ROM
c. ALU
d. CU
e fl;
66
WodyrK chapter_11 /ordered_list_type_I.html

<html>
<head>
<title> Ordered List type I-Example </title>
</head>
<body>
<ol type = “I”>
<li> RAM </li>
<li> ROM </li>
<li> ALU </li>
<li> CU </li>
</ol>
</body>
</html>
m%;sM,h chapter_11 /ordered_list_type_I.html

I. RAM
II. ROM
III. ALU
IV. CU
e fl;
67
WodyrK chapter_11 /ordered_list_type_i.html

<html>
<head>
<title> Ordered List type i-Example </title>
</head>
<body>
<ol type = “i”>
<li> RAM </li>
<li> ROM </li>
<li> ALU </li>
<li> CU </li>
</ol>
</body>
</html>
m%;sM,h chapter_11 /ordered_list_type_i.html

i. RAM
ii. ROM
iii. ALU
iv. CU
Type hkakg Ndú;d fkdfldg tkï thg w.hla wdfoaY fkdl< úg tys w.h bfíu 1
wjia:dfõ mj;S.
e fl;
68
fuys§ o;a; 1 isg ms<sfj<g wxl .ekafõ. fuh wmg wjYH b,lalfï isg wdrïN ùug
start Wm,laIKg wjYH w.h wdfoaY l< hq;=h.
tla whs;uhl mukla w.h fjkia lsrSu iòyd value Wm,laIK iòyd w.h wdfoaY l<
hq;=h.
WodyrK chapter_11 /ordered_list_start&value.html

<html>
<head>
<title> Ordered List start & value-Example </title>
</head>
<body>
<ol start = 5>
<li> RAM </li>
<li> ROM </li>
<li value = 20> ALU </li>
<li> CU </li>
</ol>
</body>
</html>
m%;sM,h chapter_11 /ordered_list_start&value.html

5. RAM
6. ROM
20. ALU
21. CU
ta wkqj fuu ,ehsia;=j 5 isg wdrïN ù we;s w;r ALU ys w.ho 20 f,i fjkia ù we;.
kuq;a fuys§ tla úfYaI;ajhla isÿfõ tkï value Wm,laIK fhdod w.h fjkia l< miq
t;eka isg mj;sk ish`Mu whs;uj, w.hkao fjkia fõ. tkï fuu ,ehsia;=fõ
w.g ;j;a whs;ula tla lf,a kï tys w.h 22 jkq we;.
e fl;
69
mßmdá.; fkdjk ,ehsia;.=

fï ioyd ul Wiq,kh Ndú;d fõ.fuys ul hkq unordered list hkak flálr oelaùuls ta
hgf;a o;a; fhoSug fmr mßosu li Wiq,kh Ndú;d l< hq;h = .
WodyrK chapter_11 /unordered_list.html

<html>
<head>
<title> Unordered List-Example </title>
</head>
<body>
<ul>
<li> RAM </li>
<li> ROM </li>
<li> ALU </li>
<li> CU </li>
</ul>
</body>
</html>
m%;sM,h chapter_11 /unordered_list.html

 RAM
 ROM
 ALU
 CU
fuys§ ,ehsia;=j bullets fh§ ilia ùu isÿfõ. fuu bullets j, iajrEmho wdldr
lSmhlg fjkia lsÍu l< yel. tu wdldr my; olajd we;s WodyrK lSmhlska olajd
we;.
e fl;
70
= . type
fï iòyd fmr mßÈu ul Wiq,kh hgf;a type Wm,laIKh fhdod .; hq;h
Wm,laIKhg úúO w.hka fh§fï§ isÿjk fjkialu ms<snòj my; WodyrK
ie,lSfuka wjfndaO lr .; yel.
WodyrK chapter_11 /unordered_list_type_circle.html

<html>
<head>
<title> unordered List type-circle-Example </title>
</head>
<body>
<ul type = “circle”>
<li> RAM </li>
<li> ROM </li>
<li> ALU </li>
<li> CU </li>
</ul>
</body>
</html>
m%;sM,h chapter_11 /unordered_list_type_circle.html

 RAM
 ROM
 ALU
 CU
e fl;
71
WodyrK chapter_11 /unordered_list_type_square.html

<html>
<head>
<title> unordered List type-square-Example </title>
</head>
<body>
<ul type = “square”>
<li> RAM </li>
<li> ROM </li>
<li> ALU </li>
<li> CU </li>
</ul>
</body>
</html>
m%;sM,h chapter_11 /unordered_list_type_square.html

▪ RAM
▪ ROM
▪ ALU
▪ CU
Type hkakg Ndú;d fkdfldg tkï thg w.hla wdfoaY fkdl< úg tys w.h bfíu
disk wjia:dfõ mj;S.
e fl;
72
ks¾jpk ,hsia;=.
fuys§ o;a; j¾.SlrKh lrñka oelaúh yel. tkï uq,k s a m%Odk o;a;hla ,nd oS bkamiq
ta hgf;a th úia;r lsÍug Wmo;a; ,nd Èh yel.
fï ioyd dl Wiq,kh Ndú;d fõ. ta hgf;a m%Odk o;a; fhoSug dt Wiq,kho Wmo;a;
fhoSug dd Wiq,kho Ndú;d l< hq;h = . fuys§ wxl fyda i,l=Kq fkdfhfoa.
fï ms<snòj wjfndaOhla ,nd .ekSug my; úHqyh i,lkak.
jHqyh
<dl> ,ehsia;=j wdrïNh

<dt> m<uq ud;Dldj </dt>
<dd> m<uq ud;Dldj hgf;a m<uq whs;uh </dd>
<dd> m<uq ud;Dldj hgf;a fojk whs;uh </dd>
<dt> fojk ud;Dldj </dt>
<dd> fojk ud;Dldj hgf;a m<uq whs;uh </dd>
<dd> fojk ud;Dldj hgf;a fojk whs;uh </dd>
</dl> ,ehsia;=j wjidkh
my; WodyrKfha RAM hk m%Odk o;a;h hgf;a th úia;r lsÍug

S-RAM , D-RAM ,nd§ we;.ROM hk m%Odk o;a;h hgf;a th úia;r lsÍug
PROM , EPROM , EEPROM ,nd§ we;.
e fl;
73
WodyrK chapter_11 /Definition_List.html

<html>
<head>
<title> Definition List-Example </title>
</head>
<body>
<dl>
<dt>RAM</dt>
<dd>S-RAM</dd>
<dd>D-RAM</dd>
<dt>ROM</dt>
<dd>PROM</dd>
<dd>EPROM</dd>
<dd>EEPROM</dd>
</dl>
</body>
</html>
m%;sM,h chapter_11 /Definition_List.html

RAM
S-RAM
D-RAM
ROM
PROM
EPROM
EEPROM
e fl;
74
fuu j.= l%u lsysmhla ñY%j Ndú;d l< yel. my; WodyrKfha mßmdá.; ,ehsia;=fõ
m<uq whs;ufhka miqj kej;;a mßmdá.; ,ehsia;j= la fhdod we;. bka miq fojk
whs;ufhka miqj mßmdá.; fkdjk ,ehsia;=jla fhdodwe;.
WodyrK chapter_11 /All_In_One(list).html
<html>
<head>
<title> All In One (list)-Example </title>
</head>
<body>
<ol>
<li> RAM </li>
<ol type=“a”>
<li> S-RAM </li>
<li> D-RAM </li>
</ol>
<li> ROM </li>
<ul>
<li> PROM </li>
<li> EPROM </li>
<li> EEPROM </li>
</ul>
</ol>
</body>
</html>
m%;sM,h chapter_11 /All_In_One(list).html

1. RAM
a. S-RAM
b. D-RAM
2. ROM
 PROM
 EPROM
 EEPROM
e fl;
75
12
HTML j.=
 j.= iE§fu§ wjYH jk Wiq,k

 j.=jl jHqyh
 j.= ks¾udKh iòyd jk Wiq,k fm<.eiSfï jHqyh
 ir, j.=jla ks¾udKh
 j.=jl ud;Dldj
 j.= ;Srejl ud;Dldj
 ñY% j.= ks¾udK
76
j.= iE§fu§ wjYH jk Wiq,k

fjí msgqjlg j.=jla we;=,;a lr .ekSu iòyd wjYH jk Wiq,k lSmhla we;s w;r tajd
my; j.=fjka olajd we;
Table j.=fõ wdrïNh
tr j.=jg fma<shla tl;= lsÍu
td j.=fõ fma<shg ;Sre tla lsÍu
caption j.=jg ud;Dldjla fh§u
th j.=fõ ;Srejg ud;Dldjla tla lsÍu
Colspan j.=fõ ;Sre lsysmhla tla lsÍug
rowspan j.=fõ fma<s lsysmhla tla lsÍug
j.=jl úHqyh
jHqyh
m<uq ;Srej fojk ;Srej
m<uq ;sria m<uq ;sria fma<sh hgf;a m<uq ;sria fma<sh hgf;a
fma<sh m<uq ;Srej fojk ;Srej
fojk ;sria fma<sh hgf;a fojk ;sria fma<sh hgf;a

fojk ;sria
fma<sh
e fl;
77
j.= ks¾udKh iòyd jk Wiq,k fm<.eiSfï úHqyh

jHqyh
<table>
<tr> j.=fõ m<uq ;sria fma<sh
<td> m<uq ;sria fma<sh hgf;a m<uq ;Srej </td>
<td> m<uq ;sria fma<sh hgf;a fojk ;Srej </td>
</tr> j.=fõ m<uq ;sria fma<sfha wjidkh
<tr> j.=fõ fojk ;sria fma<sh
<td> fojk ;sria fma<sh hgf;a m<uq ;Srej </td>
<td> fojk ;sria fma<sh hgf;a fojk ;Srej </td>
</tr> j.=fõ fojk ;sria fma<sfha wjidkh
</table>
e fl;
78
ir, j.=jla ks¾udKh

WodyrK chapter_12 /table.html
<html>
<head>
<title> table-Example </title>
</head>
<body>
<table border = 1>
<tr>
<td> Name </td>
<td> ID </td>
</tr>
<tr>
<td> Kavindu </td>
<td> 0012456 </td>
</tr>
<tr>
<td> Ravindu </td>
<td> 0023456 </td>
</tr>
</table>
</body>
</html>
fuys table ys Wm,laIKhla jk border = 1 fhdod we;af;a border Wm,laIKhg w.hla

wdfoaY fkdlr tkï <table> f,i mukla fhdod fjí msgqj ks¾udKh l<úg we;eï
wjia:djka yS§ j.=j ks¾udKh ù we;s f¾Ld o¾YKh fkdùug bv we;s neúks.
e fl;
79
m%;sM,h chapter_12 /table.html
Name ID
Kavindu 0012456
Ravindu 0023456
j.=jl ud;Dldj
WodyrK chapter_12 /table_caption.html
<html>
<head>
<title> table caption-Example </title>
</head>
<body>
<table border = 1>
<caption> Student Data </caption>
<tr>
<td> Name </td>
<td> ID </td>
</tr>
<tr>
<td> Kavindu </td>
<td> 0012456 </td>
</tr>
</table>
</body>
</html>
e fl;
80
fuys§ table Wiq,kfhka miqj caption Wiq,kh hgf;a j.=jg wjYH ud;Dldj ,nd Èh
hq;=h.
m%;sM,h chapter_12 /table_caption.html
Student Data
Name ID
Kavindu 0012456
j.= ;Srejl ud;Dldj

= . túg tu
fuys§ ud;Dldjla f,i fhosh hq;= fldgfia td fjkqjg th f,i fhosh hq;h
wlaIr ;o meye.ekaù j.=fõ ueog ia:dk.;ù o¾YKh ùu isÿfõ.
WodyrK chapter_12 /table_head.html

<html>
<head>
<title> table head-Example </title>
</head>
<body>
<table border = 1>
<caption> Student Data </caption>
<tr>
<th> Name </th>
<th> ID </th>
</tr>
e fl;
81
<tr>
<td> Kavindu </td>
<td> 0012456 </td>
</tr>
<tr>
<td> Ravindu </td>
<td> 0023456 </td>
</tr>
</table>
</body>
</html>
m%;sM,h chapter_12 /table_head.html
Student Data
Name ID
Kavindu 0012456
Ravindu 0023456
e fl;
82
ñY% j.= ks¾udK

fuf;la wm Ndú;d l< ir, j.= ks¾udK lsÍfï l%ufõo j, isg ixlS¾K l%ufõo fj;
hdug oeka W;aiy lruq. fuu l%u ;rula ixlS¾K ksid b;d fydÈka wOHkh lr tajdfha
l%shdldÍ;ajh ksjrÈj jgyd .ekSug W;aiy lrkak.
my; j.=fõ jHqyh fydÈka wOHkh lrkak.
jHqyh
m<uq ;sria fma<sh hgf;a m<uq ;Srej yd fojk ;Srej

m<uq fma<sh
tlaù we;.
fojk ;sria fma<sh hgf;a fojk ;sria fma<sh hgf;a

fojk fma<sh m<uq ;Srej fojk ;Srej
fuys m<uq fma<sfha m<uq;Srej yd fojk ;Srej tlaù we;.tkï fuys m<uq ;sria fma<sfha
fldgq 1lao fojk ;sria fma<sfha fldgq 2la o we;.m<uq fma<sfha m<uq ;Srefõ fldgqj
ol=Kq mig fldgq folla wh;a lr f.k ñY% fldgqjla idodf.k we;. fuh HTML ;=<
ks¾udK lr .ekSug colspan kï Wm,laIKh Ndú;d fõ.fuu`.ska isÿù we;af;a ;Sre
fyj;a column folla tla ùuhs tu ksid fuh colspan f,i yÿkajhs
jHqyh
<td colspan = ol=Kq mig wh;alr .; hq;= fldgq ixLHdj >
ó<`. WodyrKfha§ tjeks j.=jla ks¾udKh lrk wdldrh i,ld n,uq.
e fl;
83
WodyrK chapter_12 /table_colspan.html

<html>
<head>
<title> table colspan-Example </title>
</head>
<body>
<table border = 1>
<tr>
<td colspan = 2> A </td>
</tr>
<tr>
<td> B </td>
<td> C </td>
</tr>
</table>
</body>
</html>
m%;sM,h chapter_12 /table_colspan.html
A
B C
e fl;
84
ó<`.g wms ;j;a ñY% j.= jHQyhla ms<snòj wjodkh fhduq lruq.
my; j.=fõ jHqyh fydÈka wOHkh lrkak.
jHqyh
m<uq ;sria m<uq fma<sfha m<uq ;Srej m<uq ;sria fma<sh hgf;a
fma<sh iy fojk ;Srej
fojk fma<sfha m<uq ;Srej
tlaù we;.
fojk ;sria fojk ;sria fma<sh hgf;a

fma<sh fojk ;Srej
fuys m<uq fma<sfha m<uq ;Srej fojk fma<sfha m<uq ;Srej iu`. tlaù we;.tkï m<uq
fma<sfha m<uq fldgqj fojk fma<sfha m<uq fldgqj iu. tlaù my<g fldgq folla ñY%
jQ ;ks fldgqjla iodf.k we;. túg tu ñY% fldgqj wh;a jkqfha m<uq fm<shg fõ.
tkï m<uq ;sria fma<sfha fldgq 2 o fojk ;sria fma<sfha fldgq 1 o we;. fuh HTML ;=<
ks¾udK lr .ekSug rowspan kï Wm,laIKh Ndú;d fõ. fuu`.ska isÿù we;af;a fma<s
fyj;a row folla tla ùuhs tu ksid fuh rowspan f,i yÿkajhs
jHqyh
<td rowspan = my<g wh;alr .; hq;= fldgq ixLHdj >
ó<`. WodyrKfha§ tjeks j.=jla ks¾udKh lrk wdldrh i,ld n,uq.
e fl;
85
WodyrK chapter_12 /table_rowspan.html

<html>
<head>
<title> table rowspan-Example </title>
</head>
<body>
<table border = 1>
<tr>
<td rowspan = 2> A </td>
<td> B </td>
</tr>
<tr>
<td> C </td>
</tr>
</table>
</body>
</html>
m%;sM,h chapter_12 /table_rowspan.html
A B
C
e fl;
86
fuf;la wm Ndú;d l< ir, j.= ks¾udK lsÍfï l%ufõo ish,a, tl;= lr .ksñka
m%dfhda.l
s jYfhka jeo.;a jk ks¾udKhla isÿlrk wdldrh my; WodyrKfhka olajd
we;.
WodyrK chapter_12 /All_In_One(table).html

<html>
<head>
<title> All In One(table)-Example </title>
</head>
<body>
<table border = 1>
<tr>
<th rowspan = 2> Name </th>
<th colspan = 3> Date Of Birth </td>
</tr>
<tr>
<th> DD </th>
<th> MM </th>
<th> YYYY </th>
</tr>
<tr>
<td> Akila </td>
<td> 02 </td>
<td> 10 </td>
<td> 1997 </td>
</tr>
e fl;
87
<tr>
<td> Vikum </td>
<td> 19 </td>
<td> 04 </td>
<td> 1999 </td>
</tr>
<tr>
<td> Pathum </td>
<td> 22 </td>
<td> 12 </td>
<td> 1998 </td>
</tr>
</table>
</body>
</html>
m%;sM,h chapter_12 /All_In_One(table).html
Name Date Of Birth

DD MM YYYY
Akila 02 10 1997
Vikum 19 04 1999
Pathum 22 12 1998
e fl;
88
13
HTML rduq
 rduq yeoskaùu
 ;sria rduq
 isria rduq
89
rduq yeoskaùu
tlu fjí msgqjl fjí msgq lsysmhla o¾Ykh lr .ekSug rduq Ndú;d l< yel. fuys§
ienúkau isÿjkafka fjí msgqj fldgia lSmhlg fjka lr tu tla tla fldgig wm óg
fmr ks¾udKh l< fjí msgq we;=<;a lsÍuhs.
flfia kuq;a fuu l%ufõofha hï ÿ¾j,;djhkao mj;S tu ksid fuu l%ufõoh kj úIh
ks¾foaYfhka bj;a fldg we;
rduq fh§u iòyd frameset Wiq,kh Ndú;d fõ. tfukau fuu Wiq,kh fhÈh hq;af;a
head fldgiska miqjh. ieneúkau frameset Wiq,kh fhdod .;a úg body fh§u wjYH
fkdfõ thg fya;=j jkafka frameset u`.ska msgqj fldgia lSmhlg fjka lr tu
fldgia ;=, óg fmr wm ks¾udKh lr .;a fjí msgq o¾Ykh ùug ie,eiaùuhs. we;a;
jYfhkau .;a úg fuys§ wm ks¾udKh lrk fjí msgqjg body fldgila ke;. body
fldgi f,i mj;skafka óg fmr ks¾udKh lr rduq ;=,g wdfoaY lr.;a fjí msgqh.
kuq;a hï fya;=jla ksid frameset ksis mßÈ l%shd fkdlr rduq o¾Ykh fkdjqkfyd;a fjí
msgqj ysiaj o¾Ykh fõ tjeks ;;ajhl§ mßYS,lg o¾Ykh úh hq;= foa wjYH kï body
fldgila ;=, fhdod ;eìh yel. túg noframes Wiq,kh hgf;a body fldgi fhÈh
hq;=h. fï ish,a, ms<snò ksjrÈ wjfndaOhla bÈß jHQyhka iy WodyrK ;=,ska ,efnkq
we;.
;sria rduq
fuys§ fjí msgqj ;sria w;g fldgia lsysmhlg fjka lsÍu isÿfõ. fuh fydÈka
wjfndaOlr .ekSu iòyd my; jHQyhg wjOdkh fhduqlrkak.
jHqyh
<frameset rows="m<uq rduqfõ m%udKh,fojk rduqfõ m%udKh

;=kajk rduqfõ m%udKh" >
<frame src="m<uq rduqfõ o¾Ykh úh hq;= fjí msgqj">
<frame src="fojk rduqfõ o¾Ykh úh hq;= fjí msgqj">
<frame src=";=kajk rduqfõ o¾Ykh úh hq;= fjí msgqj">
<noframes>
<body>
rduq ksis mßÈ l%shd;aul fkdjqkfyd;a idudkH mßÈ msgqfõ o¾Ykh
úh hq;= foa
</body>
</noframes>
</frameset>
e fl;
90
WodyrK chapter_13 /frames_row.html

<html>
<head>
<title> Frames row-Example </title>
</head>
<frameset rows=“20% , 80%”>
<frame src=“Others/1st_frame.html”>
<frame src=“Others/2nd_frame.html”>
<noframes>
<body>
Your browser does not support frames
</body>
</noframes>
</frameset>
</html>
m%;sM,h chapter_13 /frames_row.html
e fl;
91
isria rduq
fuys§ fjí msgqj isria w;g fldgia lsysmhlg fjka lsÍu isÿfõ. fuh fydÈka
wjfndaOlr .ekSu iòyd my; jHQyhg wjOdkh fhduqlrkak.
jHqyh
<frameset cols="m<uq rduqfõ m%udKh,fojk rduqfõ m%udKh

;=kajk rduqfõ m%udKh" >
<frame src="m<uq rduqfõ o¾Ykh úh hq;= fjí msgqj">
<frame src="fojk rduqfõ o¾Ykh úh hq;= fjí msgqj">
<frame src=";=kajk rduqfõ o¾Ykh úh hq;= fjí msgqj">
<noframes>
<body>
rduq ksis mßÈ l%shd;aul fkdjqkfyd;a idudkH mßÈ msgqfõ o¾Ykh
úh hq;= foa
</body>
</noframes>
</frameset>
WodyrK chapter_13 /frames_cols.html

<html>
<head>
<title> Frames cols-Example </title>
</head>
<frameset cols=“30% , 70%”>
<frame src=“Others/1st_frame.html”>
<frame src=“Others/2nd_frame.html”>
e fl;
92
<noframes>
<body>
Your browser does not support frames
</body>
</noframes>
</frameset>
</html>
m%;sM,h chapter_13 /frames_cols.html
fuys§ rduqfõ m%udKh m%;sY;hla f,i ,nd § we;. tfukau tu w.h mslai,a
u`.skao ,nd Èh yel. kuq;a túg msgqfõ m%udKh ms<snòj ksjrÈ wjfndaOhla ;sìh
hq;=h.
wjidk jYfhka rduq ms<snò iòyka lsÍfu§ oelaúh hq;= jeo.;a lreKla we;. ta
j¾:udkfha fuu l%uh t;rï Ndú;d fkdjk njhs. fuhg fya;= f,i iEu web browser
^fjí w;ßlaiqjla& ;=,u fuu l%uh ksjrÈj ls%hd fkdlsÍu rduqfõ m%udKh iu`. fjí
msgqfõ m%udKh fkd.e,mSu ksid ksjrÈj fjí msgqfõ wka;¾.;h o¾YKh fkdùu
msgqmig hdfï fnd;a;u (back button) ksjrÈj l%h
s d;aul fkdùu jeks lreKq fmkajd Èh
yel.
e fl;
93
HTML wêiïnkaOl
14
 wêiïnkaOhl jeo.;alu
 wêiïnkaOhl jHQyh
 wêiïnkaOhla ks¾udKh
 mska;+r iòyd iïnkaO;dj ,nd §u
 target Wm,laIKh
94
wêiïnkaOhl jeo.;alu
tÈfkod fjí wvú Ndú;d lsÍfu§ wm fï fudfydf;a mßYS,kh lrñka isák fjí
wvúfha isg ;j;a fjí wvúhlg .uka lsÍug isÿjk wjia:d ´kE;rï oelsh yel.
fjí wvúh mßYS,k lrñka isák wmf.a myiqj iòyd fjí wvú ks¾udKlrejka wm
fï fudfydf;a mßYS,kh lrñka isák fjí wvúfha isg wmg .uka lsÍug wjYH wfkla
fjí wvúhg myiqfjka .uka l< yels flá ud¾. ks¾udKh lr we;. fïjd
wêiïnkaOl f,i yÿkajhs. fuu iïNkaO;dj fndfyda úg jpkhlg fyda jdlH
Lkavhlg fyda mska;+rhlg fhdod ;sìh yels w;r túg tu jpkhu; fyda jdlH
Lkavhu; fyda mska;+rhu; click lsÍfuka th iïnkaO lr ;snQ fjí msgqjg .uka l<
yel.
WodyrKhla f,i .;a úg wm ks;r Ndú;d lrk Google fjí wvúh ;=, hula fiùu
(Search) l< úg m%;sM,h f,i ,efnkafka wêiïnkaOl rdYshlska hq;a fjí msgqjls.
e fl;
95
wêiïnkaOhl jHQyh
jHqyh
< a href = .uka l< hq;= fjí msgqfõ ud¾.h iy ku > iïnkaO;dj ,nd ÿka ia:dkhg
msúiSug click l< hq;= jpkh </a>
wêiïnkaO ks¾udKh iòyd a Wiq,kh Ndú;d fõ. .uka l< hq;= fjí msgqfõ ud¾.h
iy ku ,nd §ug href Wm,laIKh fhdod .; yel.
wêiïnkaOhla ks¾udKh
WodyrK chapter_14 /hyperlink.html
<html>
<head>
<title> Hyperlink-Example </title>
</head>
<body>
<a href = “Others/nextpage.html”> Next page </a> <br>
<a href = “http://www.google.com”> Google </a>
</body>
</html>
by; WodyrKh l%h s d;aul lsÍug fmr Others kï folder ;=, nextpage.html kï fjí
msgqjla ks¾udKh l< hq;h= .
fuys Others kï folder tl wm ks¾udKh lrk fjí msgqj tkï hyperlink.html iu`.u
mej;sh hq;= w;r thg fya;=j iy f.dkq ud¾.h f;dard .ekSu ms<snòj ksjrÈ
wjfndaOhla fkdue;s kï wjidk mßÉfþoh wOHkh lsÍfuka ta ms<snòj
wjfndaOhla ,nd .; yel.
e fl;
96
m%;sM,h chapter_14 /hyperlink.html

Next page
Google
fuys Next Page u; click l< úg Others kï folder ;=, nextpage.html kï fjí msgqj
o¾Ykh fõ.
fuys Google u; click l< úg Google fjí wvúfha ksjiak msgqj (home page) o¾Ykh
fõ. ta iòyd Tnf.a mß.Klhg wka;¾cd, iïnkaO;djla imhd ;sîu wksjd¾Hh fõ.
e fl;
97
mska;+r iòyd iïnkaO;dj ,nd §u

óg fmr WodyrK j,§ wm iïnkaO;dj ,nd ÿkafka jpk iòyd h. kuq;a j¾;udkfha
fndfyda fjí wvú j, mska;r+ iòydo iïnkaO;dj ,nd § we;. tu`.ska fjí wvúh
w,xldrùula fukau mßYS,lf.a wdl¾IKh Èkd.ekSulao isÿfõ.
mska;+r iòyd iïnkaO;dj ,nd §fu§ wm óg fmr Ndõ;d l< jHQyhu Ndú;d l<
hq;=h. fuys§ wjOdkh fhduql< hq;= lreK jkafka by; WodyrK j,§
iïnkaO;dj ,nd ÿka ia:dkhg msúiSug click l< hq;= jpkh fjkqjg mska;+rh fh§uhs.
óg fmr mßÉfþohl§ mska;+r fhdok wdldrh wm wOHkh lr we;.
<< 8 jk mßÉfþoh fj; .uka lrkak
WodyrK chapter_14 /image_hyperlink.html

<html>
<head>
<title> Image Hyperlink-Example </title>
</head>
<body>
<a href = “http://www.google.com”>
<img src = “data/pic.png” border = 10>
</a>
</body>
</html>
e fl;
98
m%;sM,h chapter_14 /image_hyperlink.html
fuys mska;+rh u; click l< úg fmr fukau Google fjí wvúfha ksjiak msgqj (home
page) o¾Ykh fõ. ta iòyd Tnf.a mß.klhg wka;¾cd, iïnkaO;djla imhd ;sîu
wksjd¾Hh fõ.
e fl;
99
target Wm,laIKh
fuys§ iñnkaO;djh ,ndÿka f.dkqj fyda fjí msgqj újD; jkafka wm Ndú;d lrñka
isá má;a; (tab) ;=,u fõ. tuksid wm Ndú;d lrñka isá fõímsgqj u.yeÍhhs. fuh
fndfyda úg wjOdkh fhduq fkdjk lreKla jqjo we;eï wjia:djka j, fuh mßYS,lg
wmyiq;djla we;slrkq we;.
fuhg úiÿula f,i target Wm,laIKh yÿkajdÈh yel. ta iu`. fhÈh yels w`.hka
lsysmhla my; oelafõ.
_blank iïnkaO l< fjí msgqj kj tab tllska újD; fõ
_self iïnkaO l< fjí msgqj tu rduqfõu újD; fõ
rduq iys; fjí msgqjl ish`M rduq bj;aù iïnkaO l< fjí msgqj
_top
iïmQ¾K msgqjla f,i újD; fõ
fuys _self iy _top hk w.hka fhÈh yelafla rduq fhdod we;akï muks.
WodyrK chapter_14 /hyperlink_target.html

<html>
<head>
<title> Hyperlink Target-Example </title>
</head>
<body>
<a href =“Others/nextpage.html” target =“_blank”>
Next page
</a>
</body>
</html>
e fl;
100
m%;sM,h chapter_14 /hyperlink_target.html
fuys Next Page u; click l< úg fjí msgqj kj tab tllska újD; fõ.
e fl;
101
HTML f*daru(form)
15
 f*druhl Ndú;h iy jeo.;alu
 joka we;=<;a lsÍu
 uqrmo we;=<;a lsÍu
 fma<s lsysmhl jdlH we;=<;a lsÍu
 f;dard.ekSï lsysmhla tljr isÿlsÍu
 f;dard.ekSï lsysmhlska tlla f;dard.ekSu
 o;a; weoye,Sfï ,ehsia;=
 fnd;a;ï we;=<;a lsÍu
 o;a; ldKav lsÍu
 wu;r we;=<;a lsÍï
 o;a; fjk;a ia:dkhlg f.khdu
102
f*druhl Ndú;h iy jeo.;alu

wka;¾cd,fha fndfyda wjia:dj, fjí msgqj Ndú;d lrkakkaf.a f;dr;=re we;=<;a
lsÍug fjí f*daru Ndú;d lrhs. WodyrKhla f,i my; fjí msgqj i,lkak.
fujeks fjí f*daru j, uQ,l s wruqK jkafka mßYS,lf.ka o;a; tla/ia lr fjí
fiajdodhla ;=, ;ekam;a lsÍu fyda fjk;a fjí msgqjlg f.k hdu jeks lreKq fõ.
fujeks f*daru ks¾udKh lsÍfu§ nyq,j Ndú;djk Wiq,k f,i form iy input
yÿkajdÈh yel.
from f*daruh wdrïN lsÍu
tla tla j¾.fha o;a; we;=,;a lsÍfï § fuu Wiq,kh Ndú;d l<
input hq;=h fuys§ fuu Wiq,kh hgf;a ,nd fok type Wm,laIKh u`.ska
we;=,;a l< hq;= o;a; j¾.h f;dard .; yel
tfukau fuys§ Ndú;d jk Wm,laIK folla jk name iy value ms<snòj ieu fldgila
wjidkfhA meyeÈ,s lr we;. kuq;a ta ms<snòj mQ¾K wjfndaOhla ,nd .ekSug PHP jeks
l%ufõo ms<snòj oekqula ;sìh hq;=h. kuq;a fuu .%ka:fhka PHP ms<snòj wOHkh lsÍug
nd,dfmdfrd;a;= fkdjk neúka HTML úIh tallh ;=,§ wjYH jk m%udKhg fuys§
meyeÈ,s lsÍula ,nd § we;.
flfia fj;;a Wiia fm< úYh ks¾foaYh ;=, name iy value ys lsh % dldÍ;ajh ms<snòj
wjfndaOhla ,nd.ekSug PHP tallh ;=,§ n,dfmdfrd;a;= jk neúka fuu tallh ;=, ta
ms<snòj .eUqßka meyeÈ<s lsÍug n,dfmdfrd;a;= fkdfõ.
e fl;
103
joka we;=<;a lsÍu

tla fma<shl joka we;=<;a lsÍu iòyd fuu l%uh Ndú;d l< yel. fuys§ input
Wiq,kh hgf;a type Wm,laIKfha w.h text f,i ,nd Èh hq;=h. fuu.ska textbox tlla
m%;sodkh fõ.
WodyrK chapter_15 /input_text.html

<html>
<head>
<title> input text-Example </title>
</head>
<body>
<form>
Usename :
<input type=“text” name=“uname”>
</form>
</body>
</html>
m%;sM,h chapter_15 /input_text.html
fuys Username: hkak Wiq,khg wod< fkdfõ. th idudkH f,i fjí msgqfõ fh¥
jpkhla muKs. th fhdod we;af;a o;a; we;=<;a lrkakdg ;uka we;=<;a l< hq;f
a ;a
l=uk o;a;hlao hkak oek .ekSu iòyd muKs.
e fl;
104
by; WodyrKh Ndú;fhka name iy value Wm,laIK ms<snòj wOHkh lruq.

fuys§ name Wm,laIK hgf;a w.h uname f,i ,nd § we;s w;r value Wm,laIK
hgf;a w.hla ,nd § ke;. ieneúkau fuys§ isÿjkafka wm we;=,;a l< ku value
Wm,laIKhg wdfoaY ùuhs tkï by; WodyrKfha value ys w.h jkafka Ayesh hkakhs.
oeka wms fuu w.hka fjk;a ia:dkhlg f.k hdfï§ yeisfrk wdldrh i,ld n,uq.
fuys§ isÿjkafka name ys w.hg value ys w.h iudk ùuls. tkï name = value ùuls.
th by; WodyrKh Tiafia i,ld neÆúg uname = Ayesh f,i wdfoaY fõ. tkï o;a;h
fjk;a ia:dkhlg /f.k ieliSfï§ uname hkak fhdod.ksñka ta iu`. meñKs o;a;h
yeisrúh yel. meyeÈ,sju u;l ;nd .; hq;= lreK jkafka mßYS,l we;=,;a lrk
o;a;h l=ula jqj;a th uname g tkï name f,i ,nd ÿka w.hg wdfoaY jk njhs. tu
ksid name f,i ,nd ÿka w.h fhdod f.k tu o;a;h yeisrúh yel. ieneúkau fuys
name Wm,laIK hgf;a ,ndÿka w.h yeisfrkafka úp,Hla f,ih. úp,Hla hkq hïlsis
w.hla ;djld,slj .nvdl< yels fohls. tu úp,Hg wdfoaYù we;s w.h yeisrùu
iòyd ´kEu wjia:djl§ tu úp,Hfha ku Ndú;d l< yel.fï iïNkao ir,
WodyrKhla bÈßfha meyeÈ,s lr we;.
fuys tk jeo.;a Wm,laIKhla f,i maxlength yeÈkaúh yel. tu.ska ,nd Èh yels
Wmßu wlaIr m%udKh ;SrKh lrkq ,nhs.tkï fuys maxlength = 5 f,i ,nd ÿka úg
wlaIr 5 g jvd we;=<;a l< fkdyel.
uqrmo we;=<;a lsÍu

uqrmo we;=<;a lsÍu iòyd fuu l%uh Ndú;d l< yel. fuys§ input Wiq,kh hgf;a
type Wm,laIKfha w.h password f,i ,nd Èh hq;=h. túg fuys§ idudkH mßÈ wlaIr
o¾YKh fkdù ;s;a fm,la o¾YKh fõ.
WodyrK chapter_15 /input_password.html
<html>
<head>
<title> input password-Example </title>
</head>
<body>
<form>
password :
<input type=“password” name=“pw”>
</form>
</body>
</html>
e fl;
105
m%;sM,h chapter_15 /input_password.html
fuys§o maxlength Wm,laIKh fhdod.e; yel. tfukau fuys§o name iy value by;
meyeÈ,s l< mßÈu ls%hd;aul fõ.
fma<s lsysmhl jdlH we;=<;a lsÍu

input type=text u.ska we;=<;a l< yelafla tla fma<shl joka muKs. fma<s lSmhla we;=<;a
lsÍu iòyd textarea Wiq,kh fhdod .kS.
WodyrK chapter_15 /textarea.html

<html>
<head>
<title> text area-Example </title>
</head>
<body>
<form>
Description : <br>
<textarea cols=10 rows=5 name=descrip></textarea>
</form>
</body>
</html>
e fl;
106
m%;sM,h chapter_15 /textarea.html
fuys§o maxlength Wm,laIKh fhdod.e; yel. fuys rows u.ska Wi o cols u.ska È.o
fjkia l< yel. tfukau fuys§o name iy value by; meyeÈ,s l< mßÈu ls%hd;aul
fõ. ;j;a jeo.;a lreKla jkafka <textarea> iy </textarea> w;r fhdok wlaIr ta ;=<
iòyka ùuhs tkï by; WodyrKfha .
<textarea cols=10 rows=5 name=“descript”> Enter your Description

</textarea>
f,i iòyka lf,a kï m%;sM,h my; mßÈ ,efí.
e fl;
107
f;dard.ekSï lsysmhla tljr isÿlsÍu

fuu l%uh hgf;a§ f;dard .ekSï lSmhla ,nd fok w;r bka tlla fyda lsysmhla
f;dard .ekSu l< yel. fuys§ input Wiq,kh hgf;a type Wm,laIKfha w.h checkbox
f,i ,nd Èh hq;h= .
WodyrK chapter_15 /input_checkbox.html
<html>
<head>
<title> input checkbox-Example </title>

</head>
<body>
<form>
Please select your favorite subject(s) <br>
<input type=“checkbox” name=“maths” value=“yes”>
Maths <br>
<input type=“checkbox” name=“ict” value=“yes”>
ICT <br>
<input type=“checkbox” name=“pyhsics” value=“yes”>
Physics
</form>
</body>
</html>
m%;sM,h chapter_15 /input_checkbox.html
e fl;
108
fuu l%uh hgf;a§ name iy value ys yeisÍu ;rula ÿrg ixlS¾K jk w;r tams<snòj
ir, yeÈkaùula my; oelafõ.
fuys name iòyd wmg leu;s w.hla ,nd Èh yels w;r value iòyd ,nd Èh hq;af;a
tu Checkbox Control tl il%Sh l<úg name g ,nd ÿka úp,Hg wdfoaY úh hq;=
jákdluhs. Checkbox il%h
S l< úg tajdfha kug(name) ,nd§ we;s w.h(value) wdfoaYfõ.
tkï fuys maths=yes f,i;a ict=yes f,i;a w.hka wdfoaY lr.kS. ta ksid ieliSu fyda
fjk;a ia:dkhlg /f.khdu jeks wjia:dj,§ maths iy ict w.hka yes f,i yÿkd.kS.
Checkbox wlS%h l< úg tajdfha kug ,nd§ we;s w.h wdfoaY fkdù th fkdi,ld yßhs.
f;dard.ekSï lsysmhlska tlla f;dard.ekSu

fuu l%uh hgf;a§ f;dard .ekSï lSmhla ,nd fok w;r bka tlla mukla f;drd .ekSu
l< yel. fuys§ input Wiq,kh hgf;a type Wm,laIKfha w.h radio f,i ,nd Èh
hq;=h.
WodyrK chapter_15 /input_radio.html

<html>
<head>
<title> input radio-Example </title>

</head>
<body>
<form>
<input type=“radio” name=“gender” value=“male”>
Male <br>
<input type=“radio” name=“gender” value=“female”>
Female <br>
</form>
</body>
</html>
e fl;
109
m%;sM,h chapter_15 /input_radio.html
fuu l%uh hgf;a§ name iy value ys yeisÍu ;rula fmr mßÈ jk w;r name g
w.hla fh§fu§ ie,ls<su;a úh hq;=h.
fuys name iòyd wmg leu;s w.hla ,nd Èh yels jqjo ish`M wjia:djkayS § we;=<;a
l< hq;af;a tlu w.hls. value iòyd ,nd Èh hq;f a ;a tu Radio Control tl il%Sh
l<úg name g ,nd ÿka úp,Hg wdfoaY úh hq;= jákdluhs. by; WodyrKh ie,l+úg
wjia:d foflysu name iòyd ,nd § we;af;a gender hkakhs. tfukau tla wjia:djl
value iòyd male hkako wfkla wjia:djl value iòyd female hkako ,nd § we;.
fuys§ wfhla male wjia:dj f;dard .;fyd;a gender=male f,i gender iòyd w.h
wdfoaY fõ. wfhla female wjia:dj f;dard .;fyd;a gender=female f,i gender iòyd
w.h wdfoaYfõ. ta wkqj name iòyd tlu úp,Hhla ,nd § we;s fya;=j Tng jegfykq
we;. ieneúkau ,eî we;s f;dard .ekSï wjia:d lsysmh w;ßka tlla mukla f;dard .;
yelafla tu f;dard .ekSï wjia:d ish,af,au name iòyd ,nd § we;af;a tlu úp,Hhla
kï muKs. ir,ju .;aúg name iòyd tlu úp,Hhla ,nd§ we;s ish`M Radio
Control ;ks moaO;shla f,i l%shd lrhs. tu Radio Control w;ßka f;dard .; yelafla
tlla muKs. tkï Tng ;j;a f;drd.ekSula lsÍug fjk;a Radio Control moaO;shla
wjYH jkafka kï tys name iòyd fjku úp,Hhla wdfoaY l< hq;h = .
fuu lreKq ;rula ixlS¾K jk w;r ta ms<snòj iòyka l< we;af;a Tnf.a oekqu
iïmQ¾Kùu iòyd muks. fmr iòyka l< mßÈ Wiia fm< úYh ks¾foaYh ;=, name iy
value ys ls%hdldÍ;ajh ms<snòj m%dfhda.sl wjfndaOhla ,nd§ug PHP tallh ;=,§
n,dfmdfrd;a;= jk neúka fuu tallh ;=, ta ms<snòj .eUqßka meyeÈ<slsÍu
n,dfmdfrd;a;= fkdfõ.
o;a; weoye,Sfï ,ehsia;=

fuu.ska o;a; my<g weoyef,k ,ehsia;=jla f,i bÈßm;a lr tla o;a;hla
f;dard .ekSug wjia:dj ,ndfoa.
fï iòyd select hgf;a name iòyd w.hlao bka miqj option hgf;a value iòyd
w.hlao ,ndÈh yel.
select ,ehsia;=j ks¾udKh
option ,ehsia;=j hgf;a tla tla f;dard.ekSï fh§u
e fl;
110
WodyrK chapter_15 /dropdown_list.html

<html>
<head>
<title> Dropdown List-Example </title>
</head>
<body>
<form>
Please select your favorite subject <br>
<select name=“subject”>
<option value=“Maths”> Maths </option>
<option value=“ict”> ICT </option>
<option value=“Physics”> Physics </option>
</select>
</form>
</body>
</html>
m%;sM,h chapter_15 /dropdown_list.html
<option> iy </option> w;r fhdok wlaIr ,hsia;=fõ o¾YKh fõ fuys name iy

value ys ls%hdldÍ;ajh ir,h. fuys name ,nd § we;af;a select ys Wm,laIKhla f,i
jk w;r value ,nd oS we;af;a option ys Wm,laIKhla f,ih. fuys§ mßYS,lhd
f;dard.kakd fldgig wod, option ys value f,i ,nd§ we;s w.h name g wdfoaY fõ.
tkï by; WodyrKfha § ICT f;dard .ekSu isÿl<úg subject=ict f,i wdfoaY fõ.
e fl;
111
fnd;a;ï we;=<;a lsÍu

fuu l%uh hgf;a§ yÿkd .kakd fnd;a;ï j¾. 3 la mj;S. fmr WodyrK mßÈu input
Wiq,kfha type Wm,laIK hgf;a fuu w.hka ,ndÈh hq;=h.
submit o;a; fjk;a ia:dkhlg heùug Ndú;d fõ.
reset f*darfï we;=<;a l< o;a; uld oeóug Ndú;d fõ
button fuu.ska idudkH fnd;a;ula ,nd fohs
fuho idudkH fnd;a;ula f,i l%shdlrk kuq;a fuys§ fnd;a;u f,i

image
o¾YKh jkafka wm ,ndfok mska;+rhhs
m<uqfjkau wjodkh fhduql< hq;= lreK jkafka Wiia fm< úYh ks¾foaYh ;=, submit
iy reset fnd;a;ï ms<snòj mukla meyeÈ,s lsÍug n,dfmdfrd;a;= jk njhs
fuys submit iy reset úfYaI ld¾Hhka iòyd ks¾udKh lrk ,o tajd fõ. tams<snò by;
j.=fõ úia;r lr we;. kuq;a button u.ska idudkH fnd;a;ula ,ndfok w;r ta iòyd
úfYaI ld¾Hhla fkdmj;S. tu fnd;a;u tîfuka isÿúhhq;= ld¾Hh wm úiska ,nd Èh
hq;=h. tfukau mska;+r fnd;a;fï l%shdldÍ;ajh tfiau jqjo tys tla úfYaI;ajhla mj;S
tkï mska;+r fnd;a;u iòyd isÿúhhq;= ld¾Hh wm úiska ,nd fkdÿka úg th submit
fnd;a;ula f,i l%shdlsÍuhs. flfia fj;;a fnd;a;ula iòyd ld¾Hhka ,nd§u ms<snòj
fuu .%ka:h ;=,ska yeoEÍug n,dfmdfrd;a;= fkdjk w;r bÈß .%ka:hla ;=,ska
tams<snò .eUqßka meyeÈ,s lsÍug n,dfmdfrd;a;= fõ.
WodyrK chapter_15/submit_buttons.html
<html>
<head>
<title> Submit Buttons-Example </title>
</head>
<body>
<form>
<input type=“submit” name=“b1” value=“send”>
</form>
</body>
</html>
e fl;
112
m%;sM,h chapter_15/submit_buttons.html
fuys value hgf;a ,ndÿka w.h fnd;a;fï igyka fõ. value hgf;a lsis`ÿ w.hla ,nd
fkdÿkak fyd;a fnd;a;fï submit f,i iòykafõ. fuu submit fnd;a;fï l%shdldÍ;ajh
yÿkd.; yels WodyrKhla o;a; fjk;a ia:dkhlg /f.k hdu hgf;a meyeÈ,s lr
we;.
WodyrK chapter_15/reset_button.html
<html>
<head>
<title> Reset Buttons-Example </title>
</head>
<body>
<form>
Enter Your First Name :
<input type=“text”> <br> <br>
Enter Your Last Name :
<input type=“reset” name=“b2” value=“clear”>
</form>
</body>
</html>
e fl;
113
m%;sM,h chapter_15/reset_button.html
fuys text box ;=,g leu;s fohla we;=,;a lr bkamiq reset fnd;a;u tîfuka text
box ;=, we;=,;a l< ish`M foa uelShhs. text box mukla fkdj ´kEu j¾.fha o;a;
we;=,;a lsÍfï l%ufõohlska we;=,;a l< o;a; fuu`.ska uld oeñh yel. tu ksid reset
fnd;a;ula u`.ska tu fnd;a;u msysgd we;s f*daruh ;=, we;s ish`M olal uld oeñh
yel.
ó<`.g meyeÈ<s lrk fnd;a;ï l%ufõofha fmr iòyka l< mßÈ wmg wjYHmßÈ
l%shdlrùug ks¾udKh l< yel úYh ks¾foaYh ;=, fï ms<snòj wOHkh lsÍu isÿ
fkdlrk neúka fuu .%ka:fhka fï ms<snò meyeÈ,s lsÍug n,dfmdfrd;a;= fkdfõ. kuq;a
bÈßfha§ t<soelaùug n,dfmdfr;a;= jk .%ka:hla ;=,ska fujeks .eUqre lreKq rdYshla
meyeÈ,s lsÍug kshñ;h.
WodyrK chapter_15/normal_button.html
<html>
<head>
<title> Normal Buttons-Example </title>
</head>
<body>
<form>
<input type=“button” name=“b3” value=“Click Me”>
</form>
</body>
</html>
e fl;
114
m%;sM,h chapter_15/normal_button.html
ó<`.g WodyrKfhka meyeÈ,s lrk fnd;a;ï l%ufõofha§ fnd;a;ula f,i

fhdod.kq ,nkafka mska;+rhls. fï iòyd óg fmr mßþfÉohloS meyeÈ,s l< mßÈu
f.dkq ud¾.h iy f.dkq È.=j fhÈh hq;h = .
WodyrK chapter_15/image_button.html
<html>
<head>
<title> image Buttons-Example </title>
</head>
<body>
<form>
<input type=“image” name=“b4”
src=“data/picbutton.jpg”>
</form>
</body>
</html>
e fl;
115
m%;sM,h chapter_15/image_button.html
o;a; ldKav lsÍu

f*daruhl mj;sk o;a; ldKav lsÍu iòyd fieldset Wiq,kh fhdod .; yel tu o;a;
ldKavfha ku legend Wiq,kh hgf;a ,nd Èh hq;h=
WodyrK chapter_15/grouping.html
<html>
<head>
<title> required-Example </title>
</head>
<body>
<form>
<feildset>
<legend> Contact deatails </legend>
Name : <br>
Address :
<textarea> <textarea> <br> <br>
Telephone : <br>
<input type=“text”>
<feildset>
</form>
</body>
</html>
e fl;
116
m%;sM,h chapter_15/grouping.html
o;a; ldKav lsÍu u`.ska tu o;a; ldKavhu tljr yeisrùug wjia:dj ie,fia
wu;r we;=<;a lsÍï

fuu fldgiska Tn fj; f.k tkafka úYh ks¾foaYhg wu;rj we;s kuq;a m%dfhda.ls
fjí wvú ks¾udKfha§ jeo.;a jk fldgia lsysmhls. úYh ks¾foaYfha fï ms<snòj
meyeÈ,s lsÍug n,dfmdfrd;a;= fkdjk ksid fïjd fjk fjku WodyrK Ndú;d lr
meyeÈ,s lsÍug n,dfmdfrd;a;= fkdfõ.
<input type=“email”>
fuu.ska ,efnk m%;sodkho idudkH text box tll iajrEmh .kS. kuq;a fuys
l%shdldÍ;ajh text box tllg jvd úfYaI fõ. tkï fuysoS wksjd¾fhkau email ,smskhla
we;=<;al< hq;=h. ieneúkau fuys§ isÿjkafka wm we;=,;a lrk o;a;fha
email ,smskhl ,laIK mj;S oehs mßlaId lsÍuhs . hï wdldrhlska
email ,smskhl ,laIK fkdue;s o;a;hla fhdod submit fnd;a;u click l<fyd;a
email ,smskhla we;=,;a lrk fuka mKsúvhla Èiafõ.
<input type=“date”>
fuu l%ufõoh u`.ska oskhka we;=,;a lsÍu iòyd Ndú;d l<
yel.
<input type=“number”>
fuu l%ufõoh u`.ska ixLHd;aul o;a; mukla we;=,;a lsÍu iòyd wjia:dj i,id foa.
e fl;
117
<input type=“url”>
fuu.ska ,efnk m%;sodkho idudkH text box tll iajrEmh .kS kuq;a fuys
l%shdldÍ;ajh text box tllg jvd úfYaI fõ. tkï fuysoS wksjd¾fhkau url ,smskhla
we;=<;al< hq;=h. fuys§ isÿjkafka wm we;=,;a lrk o;a;fha url ,smskhl ,laIK mj;S
oehs mßlaId lsÍuhs. hï wdldrhlska url ,smskhl ,laIK fkdue;s o;a;hla fhdod
submit fnd;a;u click l<fyd;a url ,smskhla we;=,;a lrk fuka mKsúvhla Èiafõ.
<select name=“subject” multiple>

fuu.skao ,nd fokafka o;a; ,hsia;=jls kuq;a fuh o;a; weoye,Sfï ,hsia;=jg jvd
iajrEmfhka fjkia fõ fuh ks¾udKh lsÍu iEu w;lskau .;a úg o;a;
weoye,Sfï ,hsia;j
= lg iudk fõ fuys tlu fjkialu jkafka Wiq,kh hgf;a
Wm,laIKh ,nd Èh hq;= ùuhs bka miq o;a; weoye,Sfï ,hsia;=jgla ks¾udKh l<
wdldrhgu Wiq,kh u`.ska o;a; ,nd Èh hq;=h
<input type=“range”>
w;HjYH o;a; we;=,;a lsÍu

fjí wvúh Ndú;d lrk mqoa.,hska form tlla ;=<g ;u o;a; we;=<;a lsÍul§ jer§ï
iy w;miqùï isÿùfï m%jK;djla mj;S. hï fyhlska wm tjks o;a;hla f.k ieliSug
Ndú;d lsÍfuka thska ,efnk m%;sM, fodaY iy.; úh yel. tfukau wmo fjí wvú
mßYS,lhdo bka uy;a wmyiq;djhlg m;a fõ. fujeks wjia:djkag ms<shïo HTML ;=<
mj;S.
fï iòyd input Wiq,kh hgf;a required Wm,laIKh fhÈh hq;=h.
fuys l%h
s dldÍ;ajh isÿjkqfha submit fnd;a;u tîfï§h. tkï fuys hï input Wiq,khla
hgf;a required ,nd § ;snqfka kï submit fnd;a;u tîug fmr tu input Wiq,khg
wod, fldgfia o;a;h ,nd§ ;sìh hq;=h. hï fyhlska required Wm,laIKh fhdod;snQ
fldgilg wod, o;a; ,nd fkd§ submit fnd;a;u tîu l<fyd;a tu o;a; fldgi
ysiaj ;eìh fkdyels nj olajñka mKsúvhla Èiafõ.
e fl;
118
ó<`. WodyrKfha m%dfhda.l s wjia:djla fmkajd we;. hï wjia:djl§ mßYS,lf.ka

hï .sKqulg we;=,aùug username iy password b,a,d isák wjia:djla i,luq. fuys§
fuu o;a; folu we;=<;a lsÍu w;HdjY fõ. ulaksido h;a fuu o;a; foflka tlla
fyda fkdue;sj .sKqug we;=,aúh fkdyels ksidfjks. fujeks wjia:dj,§ fuu l%uh
fhdod .ekSu m%dfhda.l
s fõ.
Usename : <input type=“text” required> <br>

Password : <input type=“password” required> <br>
<input type=“submit”>
fuu WodyrKfha input wjia:d folgu required f,i ,nd § we;. fuys§ password
fldgig w.hla ,nd fkdoS submit fnd;a;u click l< úg tu ysia;eka iys; fldgi
iïmQ¾K lrk fuka mKsúvhla Èia ùu isÿfõ.
o;a; fjk;a ia:dkhlg f.khdu

wms fuf;la wOHkh l< fjí f*daruhl m%Odk jeo.;alu jkafka fjí msgq
mßYS,lf.ka o;a; tlareia lr tajd ieliSug Ndckh lsÍu fyda fjk;a ia:dkhl .nvd
lsÍug wjYHjk uQ,l s myiqlï iemhSuhs.
fuys§ o;a; tlareia lr fjk;a ia:dkhlg /f.k hdu isÿl< hq;=h. fï ish`M lghq;=
iòyd j¾;udkh jk úg Nyq,j Ndú;d lrkafka PHP ys l%ufõo fõ. flfia kuq;a PHP
iòyd úIh ks¾foaYfha fjku tallhla fjka lr we;s neúka fuu .%ka:fhka ta ms<snòj
meyeÈ,s lsÍu n,dfmdfrd;a;= fkdfõ.
PHP tallh fjkqfjkao bÈßfha fujeksu .%ka:hla iïmdokh lsÍug n,dfmdfrd;a;= jk
w;r tu .%ka:h ;=,ska PHP úYh lreKq uq,isg bÈßm;a lsÍug n,dfmdfrd;a;= fjñ.
flfia fj;;a ta iòyd wjYH uQ,sl lreKq fuu .%ka:fhka meyeÈ,s lr we;. tafukau
tu lreKq kej; §¾> f,i bÈß PHP .%ka:h ;=<ska meyeÈ,s lsÍug n,dfmdfrd;a;= fõ.
kuq;a fmr iòyka l< mßÈ by;§ W.;a lreKq iïNkaofhka ir, WodyrKhla
ms<snòj ó,`.g meyeÈ,s lr we;.
e fl;
119
by; WodyrK j,§ name iy value Wm,laIK ms<snòj ;rul flá meyeÈ,s
lsÍula ,nd fok ,È. tys§ o;a; fjk;a ia:dkhlg f.k hdfïoS name = value
f,i .uka lrk nj meyeos,s lrk ,È. th my; WodyrKh u.ska ;j ÿrg;a meyeÈ,s
lr we;.
WodyrK chapter_15 /sending_data.html
<html>
<head>
<title> sending data-Example </title>
</head>
<body>
<form>
Usename :
<input type=“text” name=“uname”> <br>
password :
<input type=“password” name=“pw”> <br>
<input type=“submit” name=“b1” value=“send”>
</form>
</body>
</html>
m%;sM,h chapter_15 /sending_data.html
by; WodyrKfhka fuu m%;sM,h ,efnk w;r fuys§ wmg leu;s mßos o;a; we;=,;a
l< yel.
fuys § ó<`. mshjr jYfhka Username iòyd Ayesh f,i;a Password iòyd 1234
f,i;a ,nd§ we;.
e fl;
120
bka miq submit fnd;a;u tîu isÿl< hq;=h. túg lsisÿ fjkia lula is`ÿfkdjqfka hehs
fmkqko ó,`.g Tn wjodkh fhduql, hq;=f;a fjí msgqfõ URL fldgi fj;hs.
ieneúkau Tn fuys wjodkh fhduq l< hq;af;a URL ,smskfha wjidk fldgighs.
fuys ? ,l=Kska miqj we;s fldgi fj; wjodkh fhduq lrkak. tys uname=Ayesh f,i;a
pw=1234 f,i;a iòyka ù we;. ta wkqj name iòyd wm we;=,;a l< w.hg value
iòyd wm we;=,;a l< w.h iudk ù we;. ta wkqj wm óg fmr wOHkh l< lreKq
fuu WodyrKh u`.ska m%dfhda.l s j meyeÈ,sù we;.tfukau URL f;aÍug ,la fkdlr ta
u;g Bysi f.k hdu u`.ska fuu fldgi o¾YKh fõ.
f*daru ms<snòj mq`M,aj wOHkh l< hq;= action , method jeks lreKq HTML oekqu
mukla Ndú;fhka wjfndaOlr .; fkdyel. tuksid tjeks lreKq fmr iòyka l<
mßÈ bÈßfha§ ksl=;a jk PHP .%ka:hlska meyeÈ,s lsÍug n,dfmdfrd;a;= fjñ.
e fl;
121
fjí msgqj fldgia lsÍu
16
yd tajdg iïnkaO;d
we;s lsÍu
 msgqj fldgia lsÍu

 fldgia iòyd iïnkaO;dj ,ndoSu
122
msgqj fldgia lsÍu

fuh j¾:udkfha fndfyda fjí wvú nyq,j Ndú;d lrk b;du;au m%dfhda.sl
l%ufõohls. fuu l%uh Ndú;fhka b;d úYd, iy È. fjí msgqj, tla tla fldgia u;g
iïnkaO;d we;s l< yel. WodyrKhla f,i .;a úg b;d È. fjí msgqjl my,u
fldgig .uka lsÍug fjí msgqj wdrïNfha§u iïnkao;djla ks¾udKh l< yel.
tu`.ska fjí wvúh mßYS,kh lrk mqoa.,hdg fjí msgqj mqrd .uka lsÍfuka isÿjk
wmyiq;djh we;s fkdfõ.
fï iòyd óg fmr wm fhdod.;a <a> Wiq,khu fhdod .kS. fuys§ wmg wjYH
wdldrfhka fjí msgqj fldgia l< yels w;r tu fldgfia ku name Wm,aIKh
hgf;a ,nd Èh hq;=h.
WodyrK chapter_16/Page_Section.html
<html>
<head>
<title> Page Section-Example </title>
</head>
<body>
<a name=“part1”>
<font color=“red”>
<h1> First part of the document </h1>
</font>
</a>
<font color=“blue”>
<h1> Second part of the document </h1>
</font>
</a>
</body>
</html>
e fl;
123
m%;sM,h chapter_16/Page_Section.html
<a name=part1> fldgiska tu m%foaYh part1 f,i kï lr we;s w;r tu m%foaYh </a>
hk fldgiska wjika fõ. ta wkqj part1 m%foaYh ;=< <h1> m%udKfha first part of the
document fldgi mj;S.
tfukau <a name=part2> fldgiska tu m%foaYh part2 f,i kï lr we;s w;r tu
m%foaYh </a> hk fldgiska wjika fõ. ta wkqj part2 m%foaYh ;=< <h1> m%udKfha
second part of the document fldgi mj;S.
fldgia iòyd iïnkaO;dj ,ndoSu

m<uq mshjr fï jk úg id¾:lj ksud lr we;. tkï fjí msgqj fldgia lsÍu by;
WodyrKfhka isÿlrk ,È. tys§ wm fjí msgqj fldgia follg fldgia l< w;r tajd
part1 iy part2 f,i kï lrk ,È.
ó<`. WodyrKfhka wm tu fldgia iòyd tu fjí msgqj ;=,u iïnkao;d we;s lrk
wdldrh i,ld n,uq. tho óg fmr Ndú;d l< <a> Wiq,khu fhdod .kS. ta hgf;a href
= .
Wm,laIKh u.ska iïNkao;djh ,nd osh hq;= ia:dkh f;drd .; hq;h
my; WodyrKfha wdrïNfha§u First part iy Second part f,i Èiajk w;r ta iòyd
ms<sfj,ska part1 iy part2 hk fldgia iïnkao lr we;.
tfukau b;d jeo.;a lreKla jkafka fuys iïnkao;dj we;s lrk úg kug fmr
# ,l=K fh§u wksjd¾H ùuhs.
e fl;
124
WodyrK chapter_16/Linking_to_a_Page_Section.html
<html>
<head>
<title> Linking to a Page Section-Example </title>
</head>
<body>
<a href=“#part1”> First part </a>
<a href=“#part2”> second part </a>
<font color=“red”>
<h1> First part of the document </h1>
</font>
</a>
<font color=“blue”>
<h1> Second part of the document </h1>
</font>
</a>
</body>
</html>
e fl;
125
m%;sM,h chapter_16/Linking_to_a_Page_Section.html
fuu WodyrKh ksjrÈj l%shd;aul ùu iòyd m%udKfhka úYd, fjí wvúhlg fuu
l%uh fhdod w;ayod ne,sh hq;h= .
fuu WodyrKh wkqj First part u; click l< úg part1 f,i kï l< fldgig .uka
lsÍu;a Second part u; click l< úg part1 f,i kï l< fldgig .uka lsÍu;a isÿfõ.
tu .uka lsÍu ksjrÈj o¾YKh ùug fjí msgqj m%udKfhka úYd, tlla úh hq;=h.
e fl;
126
w;sf¾l lshùï
17
 Wvq fldud fh§fï wjYH;dj
 j¾K Ndú;d lsÍfï l%u
 f.dkq ud¾.h iy f.dkq È.=j
 fjí msgqj save lsÍu iy ixj¾Ok lsÍfu§ we;sjk .eg`M
ksrdlrKh
 fjí msgqj újD; ùug fjí w;ßlaiqjla (web browser)
f;dard .ekSu
127
Wvq fldud fh§fï wjYH;dj

.%ka:fha meyeÈ,s lr we;s WodyrK j, Wm,laIK iòyd w.hka fh§fï§ fndfyda
wjia:dj, hq., Wvq fldud Ndú;d l< yel. we;a; jYfhkau fuu Wvqfldud fh§fï
jeo.;alu fndfyda fofkl=f.a wjodkh fhduq fkdjk ldrKdjls. fndfyda fokd fuh
mqreoaola jYfhka fh§u isÿlrk lghq;a;ls.
flfia fj;;a fuu fldgi ;=,ska Wvq fldud fh§ug fya;=j fláfhka meyeÈ,s lr we;.
WodyrKhla f,i <font color=“red”> hkak i,lkak.

fuh <font color=red> f,io tkï Wvq fldud fkdfhdod ks¾udKh l<o m%;M
s ,fha
lsis`ÿ fjkila isÿ fkdfõ.
ó<`.g <font color=“sky blue”> hkak i,lkak tho idudkH mßos l%h s d;aul jk
w;r túg wl=re ,dks,a meyehlska olakg ,efí. bka miq fmr mßÈu tkï Wvq fldud
fkdue;sj ks¾udKh lrkak.
<font color=sky blue> túg wm n,d fmdfrd;a;= jk m%;sM,h fkd,eî lsisÿ
j¾Khla fkdfhÿjd fuka l`M j¾Kfhka Èiafõ.
ieneúkau fuu wjia:dfõ§ color hk Wm,laIKh yÿkd.kafka sky hk fldgi mukls.

bka miq ysia;ekla mj;sk ksid b;sß fldgi yÿkd .kafka color ys w.hla f,i fkdj
font ys Wm,laIKhla f,ih. tkï blue hk fldgi font ys Wm,laIKhla f,i
l%shd;aul ùug W;aiyorhs. kuq;a font iòyd blue f,i Wm,laIKhla fkdmj;sk neúka
thska lsisÿ m%;sodkhla fkd,eîu isÿfõ. ta ksid sky blue hkak tla w.hla f,i wdfoaY
ùug Wvq fldud fh§u wksjd¾fhka l< hq;=h.
tfukau fuys§ Wvq fldud ( ‘ ‘ )fyda oaú;aj Wvq fldud ( “ “ ) hk leu;s wdldrhla Ndú;d
l< yel.
j¾K Ndú;d lsÍfï l%u
HTML ;=< úúO wjia:d j,§ j¾K Ndú;d fõ. fuu j¾K wdldr follg Ndú;d l<
yel.
j¾Kfha ku Ndú;d lsÍu
fuys§ j¾KhkayS wm okakd ku Rcqju Ndú;d l< yel. tkï red , green , blue ,
yellow , pink f,i ku fhÈh yel.
<font color=pink>
e fl;
128
j¾Kfha Iâ oYuh wxlkh Ndú;d lsÍu

by; mßÈ iEu j¾Khlu ku u;l ;nd .ekSu wmiq lghq;a;ls fï iòyd ms<shula
f,i my; l%uh yÿkajd Èh yel
fuysoS # ,l=Kska wdrïN jk w;r bkamiq fhfok ixLHdxl foflka folg r;= (R) fld<
(G) ks,a (B) j¾K j, ixLHdxl fol ne.ska ksrEmKh fõ. kug uq<ska # fhoSu wksjd¾h
fõ.fuys§ wjodkh fhduql< hq;= m%Odk lreK jkafka fuh Iâ oYuh ixLHd mdofhka
ksrEmkh jk njhs tkï tla ixLHdxlhl ;sìh yels wju w.h 0 jk w;r Wmßu
w.h f fõ.
ta wkqj fuys fmÿ ksrEmKh jkafka
#RRGGBB fõ.
fuys tla tla ia:dk iòyd wjYH mßÈ ixLHd fh§fuka j¾K ixl,kh l< yel. ta
wkqj fuu`.ska r;= j¾Kh ,nd .ekSug wjYH kï r;= j¾Khg wh;ajk ixLHdxl
foflys tkï uq,au ixLHdxl foflys w.h Wmßu l< hq;=h. tfukau wfkla ia:dk j,
w.h wju l< hq;h = . tkï uq,a ixLHdxl foflys w.h f f,i;a bka miqj mj;sk ish`M
ixLHdxl 0 f,i;a ,nd Èh hq;h = .
tkï r;= j¾Kfha Iâ oYuh ksrEmKh jkafka #ff0000 fõ. tjeks j¾K lSmhla my;
j.=fõ fmkajd we;.
ku RR GG BB
iqÿ= 00 00 00
l¿ ff ff ff
r;= ff 00 00
fld< 00 ff 00
ks,a 00 00 ff
ly ff ff 00
wyia ks,a 66 66 ff
tfukau 0 iy f w;r we;s ´kEu ixLHdjla Ndú;fhka b;d ks¾udKd;aulj j¾K
ixl,kh l< yel.
;jo fuu Yâ oYuh j¾K ixl,kh ioyd l%u folla mj;S.

m<uq l%uh jkafka tla j¾Khla iòyd ìgq tla ixLHdjla Ndú;d lsÍuhs tys§ r;=
j¾Kh ksrEmKh jkafka #f00 f,ih.
fojk l%uh jkafka tla j¾Khla iòyd ìgq tla ixLHdjla Ndú;d lsÍuhs tys§ r;=
j¾Kh ksrEmKh jkafka #fff000000 f,ih.
e fl;
129
f.dkq ud¾.h iy f.dkq È.=j

HTML ;=< § úúO f.dkq iu`. jev lghq;= isÿl< hq;=h. ta iòyd f.dkq ud¾.h iy
f.dkq È.=j ms<sno fydò wjfndaOhla ,nd .; hq;=h.
f.dkqjla ie,l+úg tys ieleiau my; mßÈ fõ.
jHqyh
_____________________ . _______
f.dkq ud¾.h yd kduh f.dkq È.=j
HTML ;=< f.dkqjla wdfoaY lr .ekSfï § f.dkq j¾.h yÿkd .ekSug w;HdjYH fõ.
ta iòyd f.dkq È.=j b;du;a ksjrÈj fhÈh hq;=h.
f.dkq È.=j by; jHqyfha iòyka l< mßÈ f.dkq kduh wjidkfha. i<l=Klska miqj
oel .; yel. tfia oel.; fkdyels kï f.dkqÈ.=j fkdokafka kï wod< f.dkqj u;
right click lr properties fj; f.dia file type u.ska f.dkqÈ.=j oek.; yel.
f.dkq È.=j fkdfh¥ fyda jerÈ f,i fh¥ lsisÿ wdfoaYhla lsif
s ia;a id¾:l fkdfõ.
my; j.=fjka oelafjkafka újO f.dkq j¾. lsysmhla iy tajdfha mej;sh yels f.dkq
È.= lsysmhls.
fjí msgq .html , .htm
PdhdrEm .jpg , .png , .tif
ùäfhda f.dkq .mp4 , .avi , .mkv , .wmv , .mov , .3gp
Y%jH f.dkq .mp3 , .wma , .m4a
e fl;
130
wdfoaY lrk f.dkq HTML f.dkqj;a iu`.u tlu folder ;=< mj;S kï f.dkq ud¾.h
iòyka l< hq;= fkdfõ. f.dkq kduh fhoSu m%udKj;a fõ.
WodyrKhla f,i my; wjia:dfõ§ wm ks¾udKh lrñka mj;skafka index kï fjí
msgqjhehs i,lkak. tys§ wm ks¾udKh lrñka mj;sk fjí msgqj iu`.u wmg wjYH
mska;+rh mj;S tkï wmg th index kï fjí msgqj ;=,g ,nd wdfoaY lr .ekSug f.dkq
kduh mukla m%udKj;afõ.
<img src = “fruits.png”>

kuq;a fuf,i m%dfhda.sl uÜgfï fjí msgqjla ks¾udKh lsÍfï§ fjí msgqj ;=,g wdfoaY
lr .ekSug n,dfmdfrd;a;= jk f.dkq fjk fjku f*da,avr ;=, fhdod Ndú;d l< hq;=h.
tu`.ska fjí wvúh ks¾udKh iòyd myiq jk w;r f.dkq ksjrÈ f,i l<uKdlrKh
lr .; yel.
my; wjia:dj ms<snò wjodkh fhduq lrkak. fuys§ mska;r
+ h pics kï f*da,avrhla ;=,
;nd we;. túg f.dkq kduh yd f.dkq È.=j mukla m%udKj;a fkdjk w;r f.dkq
ud¾.ho w;HdjYH fõ.
<img src = “pics/fruits.png”>

fuu mska;+rh data kï f*da,avrh ;=, we;s pics f*da,avrfha msysgd we;akï
<img src = “data/pics/fruits.png”>
f.dkq wdfoaYfha§ fuf,i f.dkq udj; yd f.dkq kduh yd f.dkq È.=j f;aÍug tu
f.kqj wm ks¾udKh lrk fjí msgqj iu`. fyda fjí msgqj iu`. mj;sk
f*da,avrhla ;=, msysgd ;sìh hq;=h. by; meyeÈ,s l< WodyrK fol tjeks wjia:d
folls. kuq;a fjku ia:dkhl mj;sk f.dkqjla wdfoaY l< hq;= jkafka kï tys§
iïmQ¾K f.dkq ud¾.hu iy idudkH mßÈ f.dkq È.=j fhÈh hq;=h.
e fl;
131
<img src = “C:\Users\ACS\Pictures\fruits.png”>

kuq;a fuh m%dfhda.slj fjí msgq ks¾udKfh§ lsiú s gl;a fkdl, hq;h = . thg fya;=j
jkafka fjí wvúh Wvq.; (upload) lrk úg tu fjí wvúhg wdfoaY l< ish`M f.dkq
fjí wvúh iu`.u Wvq.; l< hq;= ùuhs. tuksid fydou l%uh jkafka fjí wvúhg
f.dkq wdfoaY lsÍug fmr tu ish`M f.dkq fjí msgqj iu`. we;s f*da,avr j, ;ekam;a
lsÍuhs.tf,i ;ekam;a lsÍfu§ ;j;a lreKla u;l ;nd .; hq;h = tkï m%Odk fjí
msgqj lsiÿ
s f*da,avrhla ;=, fkdoeñh hq;=h wfkla ish`M fjí msgq mska;+r Y%jH f.dkq
oDYH f.dkq wdÈh f*d,avr j, ;ekam;a l< hq;h = fuh fjí wvúh Wvq.; (upload)
lrk úg w;HjYH lreKla fõ. tfukau tf,i isÿ lsÍu u`.ska fjí wvúh l%udkql+,j
iy meyeÈ,sj ks¾udKh l< yel. my; olajd we;af;a tjeks f.dkq ieliquls.
e fl;
132
fjí msgqj save lsÍu iy ixj¾Ok lsÍfu§

we;sjk .eg`M ksrdlrKh
HTML fjí msgqj m%:u j;djg save lsÍu is`ÿlrk wdldrh .%ka:fha uq,a fldgil§
meyeÈ,s lr we;.
ks¾udKh l< fjí msgqfõ m%Nj fla;h kej; kej; l=vd fjkialï lrñka ixj¾Okh
lsÍu wksjd¾fhka isÿlsÍug jk l%shdj,shls. túg fjí msgqj kej; kej; save lsÍu
l< hq;=h. Tn meyeÈ,sju u;l ;nd .; hq;= lreK jkafka fjí msgqjg l=uk
wdldrfha iq`M fjkialula jqjo isÿl< úg tys m%;sM,h ksÍlaIKh lsÍug
m<uqj fjí msgqj save l< hq;=h.

fojkqj fjí w;ßlaiqfõ (web browser) fï jk úg o¾Ykh jk fjí msgqj fjkqjg
= .
w`M;ska save l< fjí msgqj o¾Ykh lr .; hq;h
oeka wm fuu mshjr úia;rd;aul meyeÈ,s lr.ksuq.
fjí msgqj m<uq j;djg save lrk wdldrh Tn fïjkúg wOHkh lr we;ehs úYajdi
lrñ fjí msgqj iq`M fjkialï isÿlsÍu ksid kej; kej; save lrkúgo tu mshjru
wkq.ukh lrñka save l< yel. fuys§ isÿjkafka wm wdrïNfhau kula ,nd §
ks¾udKh l< fjí msgqju w`M;a ùuls fuys§ fjí msgqj save lsÍug file >> save fj;
.uka lsÍu l< hq;= nj ñka fmr meyeÈ,s lr we;. tfukau fï iòyd fhdod .; yels
flá l%uhlao mj;S. tkï ctrl h;=r iu`. S h;=r tljr ,nd §uhs. ( ctrl + s )
m<uqjr fjí msgqj ks¾udKhlr bka miqj tu fjí msgqj fjí w;ßlaiq uDÿldx.fhka
újD; l< miq wm fjí msgqj by; iòyka l< mßÈ kej; kej; save l<o Bg iß,k
mßÈ fjí msgqj fjkia fkdfõ. tfia fjkia ùug kï save lrk iEu jdrhlau mdid
fjí w;ßlaiq uDÿldx.fhka th kej; kej; újD; l< hq;=h. fuh wmyiq lghq;a;ls
fï iòyd iEu fjí w;ßlaiq uDÿldx.hlu refresh kï wx.hla msysgd we;.
e fl;
133
by; rEmigyfka tu fnd;a;u olajd we; th tîu u`.ska isÿjkafka fï jk úg fjí

w;ßlaiqj ;=, fmkajñka mj;sk fjí msgqj kej; w¨;skau m%fõY lr.ekSuls (reload).
fï jk úg fmr mej;s fjí msgqjg kj fjkialula lr we;s ksid tu fjkialu iys;
fjí msgqj m%;sodkhfõ.
ir,ju .;a úg fjí msgqfõ m%Nj fla;fha l=vd fyda fjkia lula l< miq tys m%;sodkh
= .
n,d .ekSu iòyd th save lr bka miq fjí msgqj refresh l< hq;h
wm fïjkúg ks¾udKh lrñka mj;sk fjí msgqj kej; fjk;a kulska save l< hq;=
kï túg file >> Save As u`.ska save l< hq;=h. túg kej; kula ,ndÈh hq;=jk w;r
= .
tys§o .%ka:fha uq,skau iòyka l< Wmfoia ms<smeÈh hq;h
.%ka:fha iEu WodyrKhlu mdfya Wiq,k l%udkql+,j fm< .eiSug tab h;=r Ndú;d lr
we;.
<head> <title> First web page </title> </head>
<head>
</head>
<head>
</head>
by;§ tlu Wiq,khka wdldr ;=klg fm<.ekaùula isÿlr we;. ieneúkau fuu
wdldr ;=fkkau ,efnk m%;sodkh tl iudkh kuq;a fuu wdldr ;=fkka jvd fhda.H
jkafka ;=kajk wdldrhhs. tu wdldrfha§ b;d l%udkql+,j Wiq,k fm<.ekaùu isÿlr
we;s w;r tu`.ska fjí wvú ks¾udKlreg úYd, myiqjla ie,fia. tu ksid l=vd fjí
msgq ks¾udKh lrk wjÈfha isgu Tn fuf,i l%udkql+,j Wiq,k fm<.ekaùug yqreúh
hq;=h.
fuu ;=kajk wjia:dfõ§ fojk fma<sfha uq,skau tab h;=r ,nd§ Wiq,khka l%udkql+,j
fm<.kajd we;.
e fl;
134
fjí msgqj újD; ùug fjí w;ßlaiqjla (web browser)

f;dard .ekSu
fmr 17 jk msgqfõ iòyka l< mßÈ we;eï wjia:djkayS§ fjí msgqj ksjrÈju iqrelSu
(save) isÿl<;a th fjí w;ßlaiqjla (web browser) u`.ska újD; ùug iqodkï fkdúh
yel. fujeks wjia:dj,§ my; l%shdud¾.h wkq.ukh lsÍu isÿlrkak.
fjí msgqj ksjrÈj iqrlSu uq,skau l< hq;=h bka miqj fjí msgqj save jQ ia:dkhg f.dia
th u; right click lrkak.
bka miqj Open with u; click lrkak ta;=,ska Tn leu;s fjí w;ßlaiqj (web browser)
f;darkak.
túg Tn ksjrÈj fjí msgqj save lr we;akï id¾:lj fjí w;ßlaiqj ;=, fjí msgqj
m%;sodkh jkq we;.
e fl;
135
kuq;a fuu ls%hdj,sh fjí msgqj újD; lrk ish`M wjia:djka ys§ isÿlsÍug Tng isÿfõ.
fuh ;rula wmyiq ls%hdjls tA ksid ó,`.g my,skau we;s Choose another app hkak
f;darkak.
tu.ska Tng leu;s fjí w;ßlaiq uDÿldx.h f;darkak. bka miq iEu wjia:djl§u tu
uDÿldx.fhka fjí msgq újD; ùug my,ska we;s fldgqj ;=, yß ,l=K fhdod OK
fnd;a;u Tnkak.
oeka idudkH mßos fjí w;ßlaiq uDÿldx.fhka fjí msgqj újD; jkq we;.
fuu l%shdj,sh meyeÈ,s lr we;af;a windows 10 fufyhqï moaO;sh ;=,h. Tn Ndú;d

lrkafka windows fufyhqï moaO;sfha fjk;a ixialrKhla kï fuu ls%hdj,shg fndfyda
fihska iudk l%shdj,shla u`.ska fuu ld¾Hh isÿl< yel
e fl;
136
fuf;la Tn lshjQ .%ka:fha ksudj fuf,i iksgqyka fõ .
fuu .%ka:h lshjQ mdGl Tng udf.a yomsß ia;=;sh msßkuk w;r ;j;a
fujeksu .%ka:hlska kej; yuqjk n,dfmdfrd;a;=fjka iuq.ksñ.
Tng ch!
e fl;
137
e fl;
https://www.facebook.com/eketha
138

Fjí Wvú Ks Udkh I - Yd: M Wfhaia PDKQL

Uploaded by

Copyright:

Available Formats

Fjí Wvú Ks Udkh I - Yd: M Wfhaia PDKQL

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Fjí Wvú Ks Udkh I - Yd: M Wfhaia PDKQL

Uploaded by

Copyright:

Available Formats

fjí wvú ks¾udKh i|yd

ish¿u ysñlï weúßKs

l¾;Df.a ó<`.g ksl=;a ùug kshñ; lD;s

iquqÿ wfíiQßh .=re mshdKkag

02 m<uq fjí msgqj 12

03 fjí msgqjg fPao we;=,;a lsrSu 19

04 fma<s fjka lsÍu 23

07 ;sria f¾Ld fh§u 37

08 nyq udOH fh§u 44

15 HTML f*daru(form) 102

16 fjí msgqj fldgia lsÍu yd tajdg iïnkaO;d we;s lsÍu 122

17 w;sf¾l lshùï 127

tfukau fïjkúg HTML-5 ixialrKh ksl=;ù

Text editor uDÿldx.

HTML Tags (Wiq,k)ye`Èkaùu

 HTML Wiq,k weußldkq bx.%Sis NdIdfjka ks¾udK ù we;.

w;sf¾l lshùï fj; .uka lsÍug my; fnd;a;u Click lrkak'

w;sf¾l lshùï fj; .uka lrkak >>

 fjí msgqjl uQ,sl fldgia yÿkd .ekSu

fjí msgqjl uQ,sl fldgia yÿkd .ekSu

YS¾Ifha ud;Dldj - titel

uQ,sl HTML Wiq,k ye`Èkaùu

<html> u.ska fjí msgqj wdrïN lrhs.

<head> u.ska fjí msgqfõ YS¾Ih wdrïN lrhs.

u.ska fjí msgqfõ YS¾Ihg kula fhoSu isÿ lrhs.

</title> u.ska fjí msgqfõ YS¾Ihg kula fhoSu wjika lrhs

</head> u.ska fjí msgqfõ YS¾Ih wjika lrhs.

u.ska fjí msgqfõ l`o fldgi wdrïN lrhs.

</body> u.ska fjí msgqfõ l`o fldgi wjika lrhs.

</html> u.ska fjí msgqj wjika lrhs.

m<uq fjí msgqj ks¾udK lsÍu

WodyrK chapter_02 / first_web_page.html

fuh Note pad++ uDÿldx.fha my; mrsos fhosh yel'

fjí msgqj iq/lSu (save)

Notepad++ uDldx.h ;=, kï Encoding fj; f.dia f;dard .; yel.

fjí msgqfõ úHqyh Wiq<k iu`. iei§u

 <P> Wiq,kh yÿkd.ekSu

<P> Wiq,kh yÿkd.ekSu

WodyrK chapter_03 /paragraph.html

m%;sM,h chapter_03 / paragraph.html

HTML stands for Hypertext Markup Language, and it is the most

Hypertext refers to the way in which Web pages (HTML documents)

fPao ia:dk.; lsrSu

center fþoh ueog ia:dk.; lrhs

right fþoh ol=Kg ia:dk.; lrhs

left fþoh jug ia:dk.; lrhs

WodyrK chapter_03 /paragraph_align.html

<p align = “left”> This is left aligned. </p>

<p align = “right”> This is right aligned. </p>

m%;sM,h chapter_03 /paragraph_align.html

This is left aligned.

This is right aligned.

 Html ;=, fma<s yeisfrk wdldrh

Html ;=, fma<s yeisfrk wdldrh

m%;sM,h chapter_03 /Line_Break(problem).html

<br> Wiq,kh yÿkd.ekSu

WodyrK chapter_04 /Line_Break(solution).html

m%;sM,h chapter_04 /Line_Break(solution).html

uQ,sl yev.ekaùfï Wiq,k