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
,izaj;jsq;fshFk;.
,t;tpizaj;js Nritfis gadu; gzk; nrYj;jpAk; NkYk; ,ytrkhfTk; gad;gLj;j KbAk;.

cs;s

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 | ILM.Irfan

O/L ICT||Unit -05

learnbyself.com

 ,izagf;fj;jpd;
cs;slf;fkhdJ
rl;lfq;fs;
(frames),
gbtq;fs;
ml;ltizfs;(tables) Nghd;witfspdhy; xOq;fikf;fg;gl;bUf;Fk;.

(forms),

gl;bay;fs;(lists),

,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>

cjhuzk;
<body>

</body>

cjhuzk;

2 | ILM.Irfan

<!HTML Mtzj;jpw;fhd jiyg;G ,t;Tags fSf;fpilNa vOjg;gLk; mNj

Neuk; ,e;j Tag MdJ <head> tagapDs;NsNa vOjg;gLk; -->
: <head> <title> Home </title> </head>
<!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; -->
: <body> vdJ ,izaj;jsj;jpw;F cq;fis tuNtw;fpd;Nwd; </body>

O/L ICT||Unit -05

learnbyself.com

<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 | ILM.Irfan

O/L ICT||Unit -05

learnbyself.com

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 | ILM.Irfan

O/L ICT||Unit -05

learnbyself.com

 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>
,e;j <pre> tag MdJ vOj;Jf;fspid jl;lr;R nra;fpd;wNghJ gpd;gw;wg;gLk; ,ilntspfs;
tbtikg;Gf;fis mt;thNw fhl;rpg;gLj;Jk;.

</pre>
kw;Wk;

HTML Nfhg;G 5:
<pre>
This paragraph contains a lot of lines
in the source
but the browser

code,

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

<font> tag gad;gLj;jg;gLk;.

nra;tjw;fhf ,e;j

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 | ILM.Irfan

O/L ICT||Unit -05

learnbyself.com

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;.
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

glk;: 2

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 doesnt 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>
,e;j tag MdJ tplaq;fis ,q;F fhl;lg;gl;lthW
xd;wd; gpd; xOq;fhf gl;bay; gLj;j gad;gLj;jg;gLk;.
,e;j tag MdJ <ol> ,y; Muk;gpf;Fk; mNjNtis
tplaq;fshdJ <li> </li> vDk; tag ,Ds; vOjg;gLk;.

</ol>

1. One
2. Two
3. Three

a. One
b. Two
c. Three

i. One
ii. Two
iii. Three

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 | ILM.Irfan

O/L ICT||Unit -05

learnbyself.com

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>
<dd>- white cold drink</dd>
7 </dl>
| ILM.Irfan

O/L ICT||Unit -05

learnbyself.com

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 | ILM.Irfan

O/L ICT||Unit -05

learnbyself.com

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=1>
<tr>
9 | ILM.Irfan
<td>1st row 1st Cell</td>

O/L ICT||Unit -05

learnbyself.com

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> O/L ICT||Unit -05
10 | ILM.Irfan
</tr>

learnbyself.com

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 | ILM.Irfan

O/L ICT||Unit -05

learnbyself.com

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>

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

12 | ILM.Irfan

O/L ICT||Unit -05

learnbyself.com

20%
Blue

60%
Red
50%
Yellow

20%
Green
50%
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 | ILM.Irfan

O/L ICT||Unit -05

learnbyself.com

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 | ILM.Irfan

O/L ICT||Unit -05

learnbyself.com

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 | ILM.Irfan

O/L ICT||Unit -05

learnbyself.com