Unit -05 Grade -11

gy;Y}lf njhopy;El;gq;fisg; gad;gLj;jp ,izaj;jsq;fis cUthf;fy;

,iza cyhtpapd; %yk; ,izag; gf;fq;fis mDf KbAk;. ,t;tpizag;gf;fq;fshdJ vOj;Jf;fs; (Text),
glq;fs;(Pictures), fpugpf];, tPbNah kw;Wk; xyp Nghd;w gy;Y}lf juTfis nfhz;bUf;Fk; nra;Ak;.

,izaj;jsj;jpd; fl;likg;igAk; cs;slf;fj;ijAk; nghWj;J gpd;tUkhW tifg;gLj;jg;gLk;.

1. jfty;fis toq;Ftjw;fhd ,izaj;jsq;fs; (Informational Website)
,t;tpizaj;jsq;fs; Fwpg;gpl;l Jiw rhu; jfty;fis my;yJ gy;NtW Jiwfs; kw;Wk; tplaq;fs; njhlu;ghd
juTfis toq;Ftjw;fhd ,izajjsq;fshFk;.
cjhuzk;: Wikipedia.com, www.cnn.com, moe.gov.lk

2. ,iza nfhLf;fy; thq;fSf;fhd (,iza tu;j;jf) ,izaj;jsk; (e-commerce)

,izaj;jpD}lhf nghUl;fs; kw;Wk; Nritfspid tpw;gid nra;tjw;fhd ,izaj;jsq;fshFk;.
,t;tpizaj;jsq;fs; nghUl;fis ,izag;gf;fq;spy; fhl;rpg;gLj;JtNjhL ,yj;jpudpay; gzml;ilfis
gad;gLj;jp gupkhw;wq;fis Nkw;nfhs;tjw;fhfTs;s ,izaj;jsq;fshFk;.
cjhuzq;s;: amazon.com, ebay.com, alibaba.com
3. gadu;fSf;fpilNa ,ilj;njhlu;Gfis Nkw;nfhs;tjw;fhd ,izaj;jsq;fs; (r%f tiyj;jsq;fs;) –
(Social Networking)
ngsjPf njhlu;gpidg; NgzhJ vOj;Jf;fs;, glq;fs;, xyp kw;Wk; xspf;fis kha r%fq;fSf;fpilNa kw;Wk;
cyfshtpa uPjpapy; ,Uf;ff; $ba ez;gu;fSf;fpilNa glq;fs;, xyp kw;Wk; xspf;fisg; gupkhWtjw;fhf
Vw;gLj;jg;gl;l ,izaj;jsq;fshFk;.
cjhuzq;fs;: www.facebook.com, www.twitter.com, yahoomessenger.com, etc
4. fspahl;lq;fSf;fhd (nghOJ Nghf;fpw;fhd) ,izaj;jsq;fs;.
nghOJ Nghf;fpw;fhd tpisahl;Lf;fs; kw;Wk; jpiug;glq;fis gadu;fSf;F toq;Ftjw;fhf cs;s
,izaj;jsq;fshFk;.
,t;tpizaj;js Nritfis gadu; gzk; nrYj;jpAk; NkYk; ,ytrkhfTk; gad;gLj;j KbAk;.
cjhuzq;fs;: http://disney.com, www.playkidsgames.com

5. NjLjs ,izaj;jsq;fs; (Search engine)

,izaj;jpy; gutpf; fzg;glf; $ba vz;zw;w ,izaj;jsq;fSf;F kj;jpapy; Fwpj;j ,izaj;jsj;ij
Njbj;jUtjw;fhf cs;s xU ,izaj;jskhFk;. My;yJ www tpy; xU Fwpj;j jftypid Njbg; ngw;Wf;
nfhs;tjw;fhf cs;s ,izaj;jskhFk;.
cjhuzq;fs;: www.google.com, www.yahoo.com, www.aol.com, etc

6. Nfhg;Gf;fis gfpu;tjw;fhd ,izaj;jsq;fs; (File Sharing)

nkd;nghUl;fs; kw;Wk; Mtzq;fis gfpu;tjw;fhd ,izaj;jsq;fshFk;. ,t;tpizaj;jsj;jpy;; mjpy; gjpT
nra;Js;s gadu;fs; Mtzq;fs; kw;Wk; nkd;nghUl;fspid gpwu; gjptpwf;fk; nra;tjw;fhf gjpNtw;wk;
nra;jpUg;gu;. ,t;thwhd nkd;nghUl;fNs ,JthFk;.
cjhuzq;fs;: megaupload.com, filehippo.com

7. tiyg;gjpTfs; (Blogs)
jdpegu;fs; ,ytrkhf jkJ ngaupy; my;yJ jkf;Fr; nrhe;jkhf tiyj;jsq;fis cUthf;fpf; nfhs;tjw;fhf
,Uf;ff; $ba ,izaj;jsq;fNs ,JthFk;.
cjhuzk;: blogger.com, weebly.com
8. fk;gdpfspd; ,izaj;jsq;fs; (Company website)
Tpahghu epWtdq;fs; kw;Wk; epWtdq;fs; jkJ nghUl;fs; Nritfis fhl;rpg;gLj;jTk; tpw;gidf;F gpe;jpa
Nritfis toq;fTk; vd ,izaj;jsq;fis itj;jpUf;Fk; ,t;thwhd ,izaj;jsq;fNs ,itahFk;.
cjhuzk;: www.dell.com, www.intel.com

,izaj;jsk;
 xU ,izaj;jskhdJ ,izag;gf;fj;ij my;yJ ,izag;gf;fq;fis nfhz;bUf;Fk;.
 ,izag;gf;fj;jpd; Muk;g gf;fkhdJ Kfg;G gf;fk; (Home Page) Vida gf;fq;fs; rhjhuz gf;fq;fshf
mwpag;gLk;.
 xU ,izag; gf;fkhdJ vOj;Jf;fs;(Text), glq;fs;, fpuhgpf;, xyp kw;Wk; xspf;fisf; nfhz;L
mikf;fg;gl;bUf;Fk; mNjNtis kw;w gf;fq;fs; my;yJ Mtzq;fSld; ,izg;gpid ngWtjw;fhf kP
,izg;Gf;fisAk; (Hiper link) nfhz;bUf;Fk;.
1
 ,izagf;fj;jpd; cs;slf;fkhdJ rl;lfq;fs; (frames), gbtq;fs; (forms), gl;bay;fs;(lists),
ml;ltizfs;(tables) Nghd;witfspdhy; xOq;fikf;fg;gl;bUf;Fk;.

,izag; gf;fq;fis tbtikf;Fk; gpd;tUk; tplaq;fs; njhlu;gpy; ftdk; nrYj;j Ntz;Lk;.

 Njitahd jfy;fis khj;jpuk; cs;slf;fy;.

 Fiwe;j Neuj;jpy; tpsq;fpf; nfhs;sg; NghJkhd jfty;fis xOq;FgLj;jy;. ,q;F ml;ltizfs;>
gl;bay;fs; vd;gd cgNahfg;gLj;jg;gLk;.
 gy;NtWgl;l egu;fshYk; tpsq;fpf; nfhs;sf; $ba tifapy; gy;NtW khjpupfspd; Clhf jfty;fis vspa
nkhop eilapy; ntspaply;.
 njspthd tpsf;fKs;s> gpioaw;w FWfpa jiyg;Gfs;> FWfpa trdq;fs; kw;Wk; rpwpa ge;jpfs; MFkhW
mikj;jy;.
 gadUf;F nraw;wpwDld; jfty;fisj; NjLtjw;F NjLk; jlitfs; kw;Wk; gf;f vz;zpf;iffs; vd;gtw;iw
,aYkhdtiu Fiwj;jy;.
 tplaq;fis xOq;FgLj;Jifapy; gadupdhy; ,yFthf tpsq;fpf; nfhs;sf; $ba tifapy; njhlu;G
gLj;jg;gl;bUf;Fk; jfty;fis Xuplj;jpy; mikj;jy;.
 jfty;fspd; fhyj;jpw;Nfw;wjhfTk; gf;frhu;gpd;wpAk; ,Uj;jy;.
 ,izag;gf;fnkhd;wpd; ,ilKfk; ftu;r;rpfukhdjhf ,Uj;jy; kw;Wk; mjw;fhf vOj;Jf;fspd; msT> tbtk;
kw;Wk; tu;zk; vd;gtw;wpd; kPJ ftdQ; nrYj;jy;
 nghUj;jkhd ryd kw;Wk; rydkw;w glq;fis gpuNahfg;gLj;jy;.
 ,izag;gf;fq;fs; jahupf;Fk; NghJ rl;lfq;fs; ghtpf;fg;gLfpd;wd.
 tplaq;fis epfo; epiyg;gLj;jy; (Update)

Hyper Text Markup Language - HTML

 kP ciu Rl;L nkhop (Hyper Text Markup Language) vd;gjd; RUf;fpa tbtNk HTML MFk;.
 ,r;Rl;Lk; nkhopahdJ(Markup Language) MdJ Rl;Lk; FwpaPLfis(Markup Tags) nfhz;L
tbtikf;fg;gl;bUf;Fk;.
 xt;nthU HTML FwpaPLk; tpj;jpahrkhd Mtz cs;slf;fq;fis tpgupf;fpd;wJ.
 ,t; HTML Rl;Lk; FwpaPLfisf; nfhz;L ,izag;gf;fq;fs; cUthf;fg;gLfpd;wJ.
 HTML FwpfshdJ mk;GKid milg;gpDs; tuf;$ba Kf;fpakhd nrhy;yhFk;
cjhuzk;: <HTML> , <font>
 NkYk; ,t; FwpfshdJ NrhbfshfNt tUk; KjyhtJ Fwp Muk;g FwpahfTk; ,uz;lhtJ Fwp KbTWj;jy;
FwpahfTk; ,k;KbTWj;jy; FwpahdJ mjd; ngaUf;F Kd;dhy; slashI itj;jpUf;Fk;.;
cjhuzk;: Muk;gf; Fwp <html> KbTWj;jy; Fwp </html>, Muk;gf; Fwp <h1> KbTWj;jy; Fwp </h2>
 HTML gf;fq;fis Adobe Dreamweaver, Microsoft Expression Web, CoffeeCup HTML Editor Nghd;w
njhopy;Kiw nkd;nghUl;fs; %yKk; cUthf;f KbAk; mNj Neuk; Notepad Nghd;w Text Editor %yKk;
cUthf;f KbAk;.
 HTML Mtzq;fshdJ cyhtp nkd;nghUl;fisg; gad;gLj;jpNa jpwf;fg;gLk;.

NotePad I gad;gLj;jp HTML gf;fq;fis cUthf;fy;

 HTML Tag fis nfhz;L HTML Mtzq;fs; cUthf;fg;gLk;
 Mdhy HTML Mtzj;ij Nrkpf;fpd;wNghJ (Save) Mtzj;jp ngaUld; mjd; ePl;bg;ghf(extension) “.html”,
“.htm” vd toq;f Ntz;Lk;.
cjhuzk; : home.html, profile.htm

HTML Tags
 <!DOCTYPE html> <!-- HTML MtzkhdJ vd;d Mtz tif vd;gij Fwpj;Jf;fhl;lf; $ba
,e;j Tag cld; fl;lhak; Muk;gpf;f Ntz;Lk -->
 <HTML> </HTML> <!-- HTML Mtzk; ,e;j TagTld; Muk;gpj;J Mtzj;jpd; ,Wjpapy; mjd;
KbTWj;jy; TagTld; Kw;Wg; ngWk; -->
 <head> </head> <!-- HTML Mtzj;ijg; gw;wpa jfty;fis ,e;j Tag fSf;fpilNa
vOjg;gLk;-->
 <title> </title> <!—HTML Mtzj;jpw;fhd jiyg;G ,t;Tags fSf;fpilNa vOjg;gLk; mNj
Neuk; ,e;j Tag MdJ <head> tagapDs;NsNa vOjg;gLk; -->
cjhuzk; : <head> <title> Home </title> </head>
 <body> </body> <!—HTML cyhtpapy; njupaf; $ba ,izag;gf;fj;jpd; cs;slf;fk; ,e;j
Tag,Ds; tpgupf;fg;gLk.; ,e;j TagapDs;NsNa ,izagf;f
cs;slf;fj;jpid tpgupf;ff; $ba vy;yh TagfSk; Fwpf;fg;gLk; -->
cjhuzk; : <body> vdJ ,izaj;jsj;jpw;F cq;fis tuNtw;fpd;Nwd; </body>
2
 <body> tag,d; gz;Gfs; (Attribute): gz;Gfs; vdg;gLtJ Fwpj;j Tag njhlu;ghd
Nkyjpf jfty;fis juty;yJ ,J Fwpj;j TagI tpgupf;f gad;gLj;jg;gLk; mk;GKid
milg;gpDs; Fwpj;j Tagw;F gpd; vOjg;gLk;. ,jd;NghJ gz;gpd; ngau; kw;Wk; mg;ngau;
nfhz;bUf;ff; $ba ngWjpfs; vd;gtw;iw ,J nfhz;bUf;Fk;.
,e;j mbg;gilapy; <body> tag nfhz;bUf;ff; $ba gz;Gfshf gpd;tUtdtw;iwf;
Fwpg;gplyhk;
bgcolor = “red” (or ABC345) ,izag;gf;fj;jpd; cs;slf;fg;gFjpapd; gpd;dzp vd;d
tu;zj;ij nfhz;bUf;f Ntz;Lk; vd;gij ,J jPuk ; hdpf;Fk;. ,t; epwj;jpid gjpdWk
vz;ngWkjpapYk; Fwpg;gplyhk;
cjhuzk;: <body bgcolor= “ABC345”>
background = “slflag.jpg” ,e;j gz;ghdJ cs;slf;fg;gFjpapd; gpd;dzp vd;d glj;jpid
nfhz;L fhzg;glNtz;Lk; vd;gjpid ,J jPukkhdpf;Fk;. ,jd;NghJ gpd;dzpapy; cs;slf;f
Ntz;ba glk; ,izag;gf;fj;ij Nrkpj;jpUf;ff; $ba miltpDs; (folder) ,Uf;Fkhapd;
glj;jpid ngaupid mjd; ePl;bg;Gld; Fwpg;gpl Ntz;Lk;. ,y;yhtpl;lhy; mg;glj;jpid milaf;
$ba KO KftupapidAk; Fwpg;gplNtz;Lk;. mjhtJ xU glk; D:/picture vDk; miltpDs;
,Uf;Fkhapd; mjid KOikahf Fwpg;gplNtz;Lk;
cjhuzk;: <body background= “D:\picture\slflag.jpg”>
HTML Nfhg;G 1:

<!DOCTYPE html>

<html>
<head> <title>Home Page</title> </head>

<body background="C:\Users\RCC\Pictures\luxury-car-6.jpg">

Wel Come to My Web Site

</body>

</html>
,t; HTML tagfSf;fhd ,izag;gf;fk; gpd;tUkhW cyhtpapy; Njhd;Wk;

<title>f;fhd gFjp

<body> tag
Muk;gpj;J KbAk;
tiu <body> Tag
fSf;f ,ilNa
vOjg;gLgit
,q;F Njhd;Wk;

3
Lab Work 01: 3 tpj;jpahrkhd glk; kw;Wk; tu;zk; cila cs;slf;f gpd;ddpiaAila ,izag;
gf;fj;ij tbtikf;Ff.

 jiyg;GfSf;fhd HTML Tagfs; <h1>……….<h6>

,izag;gf;fq;fSf;F jiyg;gpid ,Ltjw;fhf gpd;tUk; HTML tagfs; gad;gLj;jg;gLk;. ,jw;fhf
<h1> njhlf;fk; <h6> tagfs; gad;gLj;jg;gLk;.
gz;Gfs;(attribute) : jiyg;GfSf;fhd Tag fspDs; gad;gLj;j align gz;G gad;gLj;jg;gLk;. ,e;j Tag
MdJ Fwpj;j jiyg;gpd; miktplj;ij jPuk ; hdpf;Fk; ngWkjpfis mjhtJ tyJ, ,lk;, kj;jp, rkkdhd
(right, left, center, justify) vd;gjpidahFk;.
cjhuzk;1: <h1 align = “right”>

HTML Nfhg;G 2:
<h1 align= “right”> This is heading 1 </h1>
<h2 align= “left”> This is heading 2 </h2>
<h3 align= “center”> This is heading 3 </h3>
<h4 align= “justify”> This is heading 4 </h4>
<h5>This is heading 5 </h5>
<h6>This is heading 6 </h6>

 ge;jpaikg;Gf;fhd HTML Tagfs; - <p> </p>

,jw;fhf <p> tagfs; gad;gLj;jg;gLk;. Gjpa ge;jpapid Muk;gpf;fpd;wNghhJ ,e;j Tag gad;gLj;jg;gLk;.
,jd;NghJ ge;jpapd; NkNy xU tup ,ilntsp ,lg;gLk; mNjNghy; ge;jpapd; KbtpYk; ,ilntsp ,lg;gLk;.
NkYk; <p> </p> apDs; vj;jid ,ilntsp tpl;lhYk; mjid xU ,ilntspahfNt nfhs;Sk;.
gz;Gfs; (attribute): ,jw;fhf align gz;G gad;gLj;jg;gLk;. ,J gpd;tUk; ngWkjpfisf;
nfhz;bUf;Fk; right, left, center, justify.
cjhuzk;: <p align= “justify”>
HTML Nfhg;G 3:
<p align= “justify”>
This paragraph
contains a lot of lines
in the source code,
but the browser
ignores it.
</p> This is after the paragraph

4
 tupfspid Kwpg;gjw;fhd HTML Tag - <br> </br>
,jw;fhf <br> tag gad;gLj;jg;gLk;. ge;jpapid Muk;gp;f;fhJ xU tupapid mLj;j tupapy; Muk;gpf;f
Ntz;Lkhf ,Ue;jhy; ,e;j Tag gad;gLj;jg;gLk;. ,e;j tag MdJ KbTWj;jy; tag ,id nfhz;bUf;fhJ
mjhtJ </br> tag ,id nfhz;bUf;fhJ.
cjhuzk;: This paragraph break by <br> after this tag this line will start in new line

HTML Nfhg;G 4:
<p align="justify">
This paragraph contains a lot of lines <br>
in the source code,<br> but the browser
ignores it.
</p>

 vOj;Jf;fspid mjd; KO tbtikg;Gld; fhl;rpg;gLj;Jtjw;fhd HTML Tag - <pre> </pre>

,e;j <pre> tag MdJ vOj;Jf;fspid jl;lr;R nra;fpd;wNghJ gpd;gw;wg;gLk; ,ilntspfs; kw;Wk;
tbtikg;Gf;fis mt;thNw fhl;rpg;gLj;Jk;.
HTML Nfhg;G 5:
<pre>
This paragraph contains a lot of lines

in the source code,

but the browser

ignores it.
</pre>

Lab work 2: ,e;j ntspaPl;bid juj;jf;f ,izag;gf;fj;jpidj; tbtikf;Ff

 vOj;JU (Font) HTML Tags - <font> </font>

vOj;JUf;fis tpj;jpahrkhd tbtq;fspy;, mstpy; kw;Wk; epwj;jpy; vd tbtikg;G nra;tjw;fhf ,e;j
<font> tag gad;gLj;jg;gLk;.
gz;Gfs; (Attribute): ,J gpd;tUk; gz;Gfisf; nfhz;L fhzg;gLk;
face: ,J vOj;JUtpd; ngaiuf; nfhz;bUf;Fk; c-k;: Thaoma, Bamini
5
 size: vOj;JUtpd; msitf; nfhz;bUf;Fk;. c-k;: 10, 12
color: vOj;JUtpd; epwj;ijf; nfz;bUf;Fk; c-k;: red, acd250(Hexa no)

cjhuzk;: <font face= “Thaoma” size=12 color= “red”>

 vOj;JU tbtikg;Gfs; (font formatting)

vOj;JUf;fis gpd;tUkhU tbtikg;Gr; nra;ayhk;. glk;: 2
 Bold c-k;: <b> bold </b>
 Strong c-k;: <strong> strong </strong>
 Italic c-k;: <i> Italic </i>
 Emphasized c-k;: <em> Emphasized </em>
 Marked c-k;: <mark> Marked </mark>
 Small c-k;: <small> Small </small>
 Deleted c-k;: <del> Deleted </del>
 Inserted c-k;: <ins> Inserted </ins>
 Subscripts c-k;: _Subscripts
 Superscripts c-k;: ^Superscripts

Lab work 3: glk;: 1, glk;: 2 cs;sthW Njhd;wr; nra;f

glk;: 1

 Comment HTML Tag - <!-- -->

,e;j tag ,Ds; vOjg;gLg; vjidAk; cyhtpahdJ ntspg;gLj;jhJ khwhf HTML Mtzj;jpy; gadu;
Nkyjpf tpsf;fq;fSf;fhf vd ,e;j tag ,idg; gad;gLj;jp vOJtu;.
cjhuzk; : <!—this just comment html doesn’t react to this tag>

gl;bay;fs; (List)
,izag; gf;fq;fspy; tplaq;fis xOq;FgLj;Jtjw;fhf gad;gLj;jg;gLk; xU KiwNa tplaq;fis gl;bay;
gLj;jyhFk;. ,g;gl;bay; gLj;jyhdJ gpd;tUk; Kiwfspy; ,lk;ngUk;.
1. xOq;FgLj;jg;gl;l gl;bay; (Ordered List)
2. xOq;FgLj;jg;glhj gl;bay; (Unordered List)
3. tpsf;fkspf;fg;gl;l gl;bay; (Description List)

 xOq;FgLj;jg;gl;l gl;bay; (ordered List) HTML Tag - <ol> </ol>

,e;j tag MdJ tplaq;fis ,q;F fhl;lg;gl;lthW 1. One a. One i. One

xd;wd; gpd; xOq;fhf gl;bay; gLj;j gad;gLj;jg;gLk;. 2. Two b. Two ii. Two
,e;j tag MdJ <ol> ,y; Muk;gpf;Fk; mNjNtis 3. Three c. Three iii. Three
tplaq;fshdJ <li> </li> vDk; tag ,Ds; vOjg;gLk;.

gz;Gfs;(attribute) : <ol> tag MdJ type vDk; gz;gpid nfhz;bUf;Fk;. ,J gl;bayhdJ vt;thW
gl;bay;gLj;jg;gl Ntz;Lk; vd;gjpid tiuaiw nra;Ak;. ,J gpd;tUk; ngWkjpfisf; nfhz;bUf;Fk;.
type = 1 gl;bayhdJ 1. 2. 3. 4. vd gl;bay;gLj;jg;gLk;
type = A gl;bayhdJ A. B. C. D. vd gl;bay;gLj;jg;gLk;
type = a gl;bayhdJ a. b. c. d. vd gl;bay;gLj;jg;gLk;
type = I gl;bayhdJ I. II. II. IV. vd gl;bay;gLj;jg;gLk;
type = i gl;bayhdJ i. ii. iii. iv. vd gl;bay;gLj;jg;gLk;
,d;DnkhU gz;G start MFk; gl;bay; ngWkjpahdJ vj;jidapypUe;J Muk;gpf;f Ntz;Lk;
vd;gjpid ,J tiuaiw nra;Ak; c-k;: start = 3
6
 HTML Nfhg;G 6: <ol type=I start=3>
<li> One</li>
<li> Two</li>
<li> Three</li>
</ol>

 xOq;FgLj;jg;glhj gl;bay; (Unordered List) HTML Tag - <ul> </ul>

,e;j tag MdJ tplaq;fis ,q;F fhl;lg;gl;lthW xd;wd; gpd; xd;whf xU xOq;ifg;
gpd;gw;whJ gl;bay; gLj;j gad;gLj;jg;gLk;.
,e;j tag MdJ <ul> ,y; Muk;gpf;Fk; mNjNtis tplaq;fshdJ <li> </li> vDk;
tag ,Ds; vOjg;gLk;

gz;Gfs;(attribute) : <ul> tag MdJ type vDk; gz;gpid nfhz;bUf;Fk;. ,J

gl;bayhdJ vd;d FwpaPLfis gad;gLj;jp gl;bay;gLj;jg;gl Ntz;Lk; vd;gjpid tiuaiw nra;Ak;.
,J gpd;tUk; ngWkjpfisf; nfhz;bUf;Fk;.
type = “disc” gl;bayhdJ  FwpaPl;Lld; gl;bay;gLj;jg;gLk;
type = “circle” gl;bayhdJ  FwpaPl;Lld; gl;bay;gLj;jg;gLk;
type = “square” gl;bayhdJ  FwpaPl;Lld; gl;bay;gLj;jg;gLk;

HTML Nfhg;G 7:
<ul type= “circle” >
<li> One</li>
<li> Two</li>
<li> Three</li>
</ul>

Lab work 4: gpd;tUkhW Njhd;wf; $ba ,izag;gf;fj;jpid tbtikf;Ff

 tpsf;fkspf;fgl;l gl;bay; (Description List) HTML Tag - <dl> </dl>

,e;j Tag MdJ gpd;tUk; Tagfis jd;dfj;Nj nfhz;bUf;Fk;. <dt> ve;j thu;j;ijia tpgupf;f
Ntz;Lk; vd;gjpid nfhz;bUf;Fk;. <dd> ,e;j tag MdJ <dt> tag ,dhy; Fwpj;Jf; fhl;lg;gl;l thu;j;ijf;fhd
tpguq;fis nfhz;L fhzg;gLk;. ,t; %d;W tagfSk; KbTWj;jg;gL.

HTML Nfhg;G 8;:

<h2>A Description List</h2>

<dl>
<dt>Coffee</dt>
<dd>- black hot drink</dd>
<dt>Milk</dt> 7
<dd>- white cold drink</dd>
7 </dl>
gy;Y}lfq;fis ,izag;gf;fJld; Nru;j;jy;
glk;, xyp, xspf;fis ,izag;gf;fj;Jld; ,izf;fyhk; ,jw;fhf gy;NtW tags fs; gad;gLj;jg;gLfpd;wd.

 glq;fis ,izag;gf;fj;Jld; Nru;g;gjw;fhd HTML Tag - <img>

,jw;fhf <img> tag gad;gLj;jg;gLk;. ,jw;fhf gpd;tUk; gz;Gfs; gad;gLj;jg;gLk;. ,J KbTWj;jy; Tag
I nfhz;bUf;fhJ.
gz;Gfs;(attribute): src ,J ,izag;gf;fj;Jld; Nru;f;fg;glNtz;ba glk; vJ vd;gij Fwpf;f ,J
gad;gLj;jg;gLk;. ,jd;NghJ ,izag;gf;fk; ,Uf;ff; $ba miltpapDs; Fwpj;j glKk; ,Ue;jhy;
glj;jpd; ePl;Lg;Gld; mJ gpd;tUkhW Fwpf;fg;gLk;.
cjhuzk; : <img src = “myimage.jpeg”>. glk; NtnwhU miltpapDs; ,Uf;Fkhapd;
mg;glj;jpw;fhd KO ghijapidAk; Fwpg;gpl Ntz;Lk; mjhtJ xU glk; D:/picture vDk;
miltpDs; ,Uf;Fkhapd; mJ gpd;tUkhW Fwpg;gplg;gLk;
cjhuzk;: <img src= “D:\picture\lag.jpg”> NkYk; glkhdJ ,izaj;jsq;fspy;
,Ue;jhYk; mJTk; gpd;tUkhW Fwpf;fg;gLk;.
alt gz;ghdJ Fwpj;j glj;jpd; kPJ Rl;bapd; Kidapid Nkw;nfhz;L tUk;NghJ Njhd;wf; $ba
ngau; my;yJ vOj;Jf;fshFk;.
cjhuzk; : <img src = myimage.jpeg alt= “click Here to zoom image”>
width, height ,g;gz;Gfs; ,izag; gf;fj;jpy; Njhd;wf; $ba glj;jpd; ePs
mfyj;ij Fwpg;gjw;fhf gad;gLj;jg;LtjhFk;.
cjhuzk; : <img src = myimage.jpeg alt= “Roja” height=300 width=450>

 xyp, xsp kw;Wk; mirT+l;ly;fis Nru;g;gjw;fhd HTML Tag - <embed> </embed>

,jw;fhf <embed> gad;gLj;jg;gLk;. mNjNeuk; mJ gpd;tUk; gz;Gfisf; nfhz;bUf;Fk;.
,jd; NghJ xsp kw;Wk; xypf;fhd Nfhg;G gpd;tUk; ePl;bg;Gf;fis nfhz;bUf;Fk;: .mid, .mp3, .wav,
.mpeg, .wmv kw;Wk; mirT+l;ly;fSf;fhd ePl;bg;Gf;shf .swf, .gif
gz;Gfs; (attribute): src ,J Fwpj;j Nfhg;gp;d; miktplj;ij Fwpg;gjhFk;.
cjhuzk; : <embed src= “myvoice.mpeg”>
height, width ,J Fwpj;j Nfhg;gpd; ePs mfyj;ij Fwpf;f gad;gLj;jg;gLk;.
cjhuzk; :<embed src= “myvoice.mpeg” height=300 width=450>

 ,izag;gf;fj;Jld; ntsp ,izag;gf;fq;fs; kw;Wk; Mtzq;fs;Sf;F ,izg;Gf;s;fs; toq;Ftjw;fhd

HTML Tag - <a> </a> (anchor Tag)
,izag;gf;fj;Jld; gpw ,izag;gf;fq;fs;, Mtzq;fs; (text, audio, video) Nghd;wtw;iw ,izg;gjw;fhf
<a> gad;gLj;jg;Lk;.
gz;Gfs;(attribute): href ,g;gz;Gld; kPapizg;gp;w;fhd Mtzq;fs; ,izf;fg;gLk;. ,t;thtzq;fs;
Mtzj;ijg; ngUj;J gy;NtW ePl;bg;Gf;fSld; tUk;
cjhuzk;:<a href= “Timetable.html” > New Time Table </a>
<a href= “D:\picture\Flag.jpg”> Flag </a>
<a href= “http://www.gmail.com/pict/weding/pic01.gif”> Wedding Animation </a>
<a> </a> w;F ,ilNa tUk; vOj;Jf;fspd; kPJ Rl;bapid nfhz;L nry;Yfpd;w NghJ mJ
 Mf khWk;. mjid fpspf nra;jhy; href apy; Fwpg;gplg;gl;Ls;s Mtzj;jpid ,izag;gf;fj;jpw;F
nfhz;L tUk;.

8
Lab work 5:
Jav agro Technologies vd;gjpid fpspf; nra;jhy; http://www.javagrotec.com ,izaj; jsKk; Lanka agri systems
pvt Ltd vd;gjpid fpspf; nra;jhy; ;. http://www.lkagrisys.com ,izaj;jsKk; Njhd;wNtz;Lk

 ml;;ltizf;fhd HTML Tag - <table> </table>

ml;ltizapid cUthf;Ftjw;f <table> tag gad;gLj;jg;gLk;. mNjNeuk; ,J rpy gz;
Gfisf; nfhz;bUf;Fk;.
gz;Gfs;(attribute): border ,J ml;ltizapd; border ,d; jbg;gj;ij Fwpf;fg;gad;gLj;jg;gLk
;. cjhuzk; : <table border=1>
,d;DnkhU gz;G align MFk;
Bgcolor ,J MdJ ml;ltizapd; gpz;ddp vd;d epwj;jpy; Njhd;w Ntz;Lk; vd;gjhFk;

width gz;ghdJ ml;ltizahdJ vd;d mfyj;jpy; fhzg;glNtz;Lk; vd;gjpid

tiuaiw
nra;Ak;
cjhuzk;: <table border=1 align=center bgcolor= “red” width= 100%>
ml;ltizapd; epiuapid cUthf;f <tr> tag gad;gLj;jg;gLk; mNjNtis xt;nthU cell IAk; me;
epiuapy; cUthf;f <td> tag k; gad;gLj;jg;gLk;
HTML Nfhg;G 9;:
<table border=>
<tr>
<td>1st row 1st Cell</td>
<td>1st row 2nd Cell</td>

9
 gz;Gfs; (attribute): <tr> tag MdJ bgcolor, align Mfpa gz;Gfisf; nfz;bUf;Fk;.
<th> tag MdJ jiyg;Gf;fisf; nfhz;l epiufis cUthf;f gad;gLk;.
<td> tag MdJ bgcolor, align,
rowspan MdJ xU epiuahdJ vj;jid epiufspd; ,lj;ij nfhz;bUf;f Ntz;Lk; vd;gij
tiuaiw nra;a gad;gLk;

HTML Nfhg;G 10:

<table border=1>
<tr>
<td rowspan=2>1st row 1st Cell</td>
<td>1st row 2nd Cell</td>
</tr>
<tr>
<td>2nd row 1st Cell</td>
</tr>
</table>
colspan MdJ xU epiu vj;jid cellfspd; ,lj;jijf; nfhz;bUf;f Ntz;Lk; vd;gij ,J
tiuaiw nra;Ak;

HTML Nfhg;G 11:

<table border=1>
<tr>
<td colspan=2 align=center>1st row 1st Cell</td>

</tr>
<tr>
<td>2nd row 1st Cell</td>
<td>2nd row 1nd Cell</td>
</tr>
</table>
HTML Nfhg;G 12:
<table border=1>
<tr>
<th colspan=2 align=center> 1st row 1st Cell </th>
<th> 1st row 2nd Cell </th>
</tr>

<tr>
<td rowspan=2> 2nd row 1st Cell </td>
<td> 2nd row 1nd Cell </td>
<td> 2nd row 1nd Cell </td>
</tr>

<tr>
<td> 2nd row 1nd Cell </td>
<td> 2nd row 1nd Cell </td>
</tr>
</table>

10
Lab work 7:
ghlrhiyapy; ckJ tFg;giwf;F toq;fg;gl;l ghlNeu Rrpapid nfhz;l ,izag;gf;fj;jpid tbtikf;Ff.

Time Mon Tue Wed Thu Fri

Interval

School
Over

 rl;lfq;fis cUthf;Ftjw;fhd HTML tags - <frameset> </frameset>

gy Mtzq;fis xU ,izag;gf;fj;jpy; fhl;rpg;gLj;Jtjw;fhd rl;lfq;fis <frame> cUthf;Ftjw;fhd
TagNf ,JthFk;. ,J gpd;tUk; gz;Gfis nfhz;bUf;Fk;. ,w; tagI vOJk; NghJ mt;tpizag; gf;fkhdJ
<body> tagI nfhz;bUf;fhJ.
gz;Gfs;(attribute): cols xU ,izag;gf;fj;ij epuy; thupahf vt;thW rl;lfq;fSf;F xJf;fyhk;
vd;gJ ,jd; %yk; tiuaiw nra;ag;gLk;.

cjhuzk;: <frameset cols= “25%, *, 25%”> ,q;F frameset %d;W gFjpfshf

gpupf;fg;gl;Ls;sJ. ,k;%d;W gFjpfSf;Fkhd rl;lfq;fs; <frame> tag ,dhy; cUthf;fg;gLk;

HTML Nfhg;G 13;:

<frameset cols= "25%, *, 25%">

<frame>
<frame>
<frame>
</frameset>

rows ,g;gz;ghdJ epiuthupahf ,izag;gf;fj;ij vt;thW rl;lfq;fSf;F xJf;fyhk; vd;gjpid

tiuaiw nra;fpd;wJ
cjhuzk;: <frameset rows= “30%, 40%, 25%”> ,q;F frameset %d;W gFjpfshf
gpupf;fg;gl;Ls;sJ. ,k;%d;W gFjpfSf;Fkhd rl;lfq;fs; <frame> tag ,dhy; cUthf;fg;gLk;

11
HTML Nfhg;G 14;:
<frameset cols= "25%, *, 25%">
<frame>
<frame>
<frame>
</frameset>

 <frame> tag MdJ gpd;tUk; gz;Gfisf; nfhz;bUf;Fk;.

gz;Gfs;(Attribute): src, scrolling ,g;gz;ghdJ yes, no, auto Mfpa gz;Gfisf; nfhz;bUf;Fk;.

HTML Nfhg;G 14;:

<frameset cols= "30%, 70%">
<frame src="page1.html">
<frameset rows="50%, 50%">
<frame src="page2.html">
<frameset cols="50%, 50%">
<frame src="page3.html" scrolling="yes">
<frame src="page4.html" scrolling="yes">
</frameset>
</frameset>
</frameset>

12
 Lab work 8:
gpd;tUkhU rpj;jupf;fg;gl;lthW Njhd;wf; $ba ,izag;gf;fj;jpid rl;lfq;fspd; cjtpAld; tbtikf;Ff.

20% 60% 20%

Blue Red Green

50% 50%
Yellow Pink 50%

50% Black

,izj;jsj;jq;fspd; tiffs;
,izaj;js cs;slf;fj;jpd; jd;ikapidf; nfhz;L ,izaj;jsq;fis gpd;tUkhW tifg;gLj;jyhk;.
1. epiyj;j ,izaj;jsk;(Static Web sites)
2. ,aq;F epiy ,izaj;jsk;(Dynamic Web Sites)

epiyj;j ,izaj;jsk;
,t;tpizaj;jsq;fspd; cs;slf;fq;fshdJ Fwpj;j fhyj;jpw;F khw;wg;glhJ gad;gLj;jg;gLk;.

,t;tpizaj;jsq;fs; HTML nkhopapid mbg;gilahff; nfhz;L cUthf;fg;gl;bUf;Fk;.

,tw;iw cUthf;f HTML editors> ,izag; gilg;ghf;f fUtpfs; Nghd;w nkd;nghUl;fs; gad;gLj;jg;gLk;
,aq;Fepiy ,izaj;jsk;.
,t;tpizaj;jsq;fspd; cs;slf;fq;fshdJ mbf;fb khw;wKwf; $baJ.

,t;tpizaj;jsq;fs; (PHP Hypertext Preprocessor), ASP.Net(Active Server Page), JSP(Java Server Page) Nghd;w
fzpdp nkhopfspd; cjtpAld; cUthf;fg;gLk;.
,t;tpizaj;jsq;fspid Nritafq;fspd; cjtpAlNdNa mZf KbAk;.
,t;tpizaj;js nraw;ghLfSf;F cjhuzkhf:

,izaj;jsnkhd;wpy; jw;Nghija Neuj;ij(Current Time) fhl;Ljy;

guPl;ir Rl;nlz;Zf;F mikthf guPlr
; hu;j;jpapd; ngWNgw;wpid fhl;Ljy;
,izaj;js epUkhz nkd;nghUs;
gpd;tUk; tifahd ,izaj;jsq;fis cUthf;Ftjw;fhd nkd;nghUl;fs; fhzg;gLfpd;wd.

1. ,iza gilg;ghf;ff; fUtp(Web Authoring tools)

2. cs;slf;f Kfhikj;Jt Kiwik(Content Management System/CMS)
,iza gilg;ghf;ff; fUtpfs;.

Tiutpay; gaeu; ,ilKfj;jpidAila nkd;nghUl;fspd; cjtpAld; ,izag; gf;fq;fspid

cUthf;Ftjw;fhd trjpfspidAila nkd;nghUs; ,JthFk;.

,t;tpizaj;jsq;fs; gaeu; tiugpay; fUtpfisg; gad;gLj;Jtjw;Nfw;g HTML Fwpfis ntspg;gLj;Jk;.

,t;tpizaj;js gilg;ghf;f fUtpfSf;F cjhuzk;:
13
Kompzer, ckeditor, bluegriffon Nghd;w jpwe;j %y nkd;nghUSk;>
Adobe dreamveiwer, Microsoft Front page, Visual studio Nghd;w gjpg;GupikAs;s nkd;nghUl;fSk;
fhzg;gLfpd;wd.

cs;slf;f Kfhikj;Jt Kiwik(Content Management System/CMS)

,aq;Fepiy ,izaj;jsq;fis cUthf;fTk; mtw;wpd; cs;slf;fq;fis cUthf;fTk; kw;Wk; Kfhik
nra;tjw;fhfTk; cs;s nkd;nghUl;fNs ,itahFk;.
,tw;iwg; gad;gLj;jp NtfkhfTk; ,yFthfTk; ,izaj;jsq;fis tbtikf;fTk; Kfhik nra;aTk;
KbAk;.
,tw;iwg; gad;gLj;jp ,izaj;jsq;fis cUthf;f fzdp nkhop;g;guPl;rpak; mtrpakpy;iy.
,t;tpizaj;jsq;fis cUthf;fg; gad;gLj;jg;gLk; fzdp nkhopfshtd.
HTML, PHP, Java Script, CSS, SQL Nghd;wdthFk;

CMS nkd;nghUl;fSf;F cjhuzq;fshf

1. Joomla
2. Wordpress
3. Drupal

,izaj;js cUthf;fj;Jld; njhlu;Gilatu;fs;

1. ,izaj;js gilg;ghsp(Authors) :
,izaj;js gadu; ,ilKfj;ij tbtikg;gtu;

2. gjpg;gpg;gtu;(Editor):
,izaj;js Fwpfis vOJjy;> mtw;wpy; gpiofis fz;lwpjy; kw;Wk; mg;gpiofisj; jpUj;Jjy;.

3. ntspaPl;lhsu;(Publisher):
,izaj;jsj;jpid ntspaPL nra;tjw;fhd eltbf;iffis Nkw;nfhs;gtu;.

4. ,izaj;js epu;thfp(Administrator):
,iza Nritafk; kw;Wk; juTj;jsj;ij epu;tfpj;jy; kw;Wk; guhkupj;jy;.

5. gaeu;fs;(User):
,izaj;jsj;ij gad;gLj;Jk; egu;fs;.

,izaj;jsnkhd;iw ntspaPL nra;tjw;fhd Njitg;ghLfs;.

1. ,izaj;jsj;ij cUthf;Ftjw;fhd nkd;nghUl;fs;:

2. ,izaj;Jldhd ,izg;G:
vkJ ,izaj;js Nfhg;Gf;fis Nritafq;fSf;F gupkhwTk;> gjpNtw;wk; nra;aTk; ,izj;njhlu;G
mtrpakhFk;.

3. tiy tpUe;Njhk;gp(web Host)

cUthf;fg;gl;l ,izaj;jsq;fis ,izaj;jpd; %yk; ahUk; ghu;;f;ff; $bathW Nrkpj;J
itg;gjw;fhd Nritapid toq;ff; $ba fzdpNa tiyr; Nritafk; vdg;gLk;.
,r;Nritapid fl;lzk; nrYj;jpAk; ngw;Wf; nfhs;s KbAk;.
c-k;: bluehost.com, godaddy.com

mNj Ntis ,yrkhfTk; toq;fg;gLk;

c-k;: blogger.com, weebly.com

4. Ms;fsg; ngau; (Domain Name)

,izaj;jskhdJ cyfyhtpa tiyapy; jdpj;Jtkhf milahsg;gLj;Jtjw;fhf jdpj;Jtkhd
ngau; toq;fg;gLk;. ,g;ngaNu Ms;fsg; ngau; vdg;gLk;.
,t;Ms;fsg; ngau;fshdJ ICANN(Internet corporation for assigned names and numbers) vDk;
epWtdj;jpdhy; Kfhkpf;fg;gLk;.
,t; Ms;fsg; ngau;fspid gjpT nra;J toq;Ftjw;fhf gpd;tUk; epWtdq;fs; njhopw;gLfpd;wd.
14
 www.godaddy.com
www.bluehost.com
www.nic.lk

5. Nfhg;Gg; gupkhw;W nkd;nghUs;(File Transfer Protocol/FTP)

cUthf;fg;gl;l ,izaj;jsj;jpid tiy tpUe;Njhk;gpapw;F khw;Wtjw;fhf cs;s nkd;nghUshFk;.
,k;nkd;nghUl;fis jdpahf gjptpwf;fk; nra;aTk; KbAk;
c-k;: filezilla (filezilla-project.org)
SmartFTP(smartftp.com)

mNjNeuk; ,t;trjpfs; ,izaj;js tbtikg;G nkd;nghUl;fspYk; fhzg;gLfpdwd.

6. ,izaj;js guhkupg;G

,izaj;jskhdJ ntw;wpfukhf nraw;gl Ntz;Lkhf ,Ue;jhy; mJ rupahd Kiwapy;

guhkupf;fg;gl Ntz;Lk;.
guhkupg;G nraw;ghlhdJ gpd;tUk; tplaq;fSf;fhf Nkw;nfhs;sg;gLk;.
1. ,izaj;jsj;jpid mbf;fb ,w;iwg;gLj;j Ntz;Lk;
2. er;R epuy; kw;Wk; mDkjpaw;w mDfypdhy; Vw;glf;$ba ghjpg;gpypUe;J ghJfhg;gjw;fhf.

15