Nju;r;rp 10.

0
gy;Y}lf njhopy;El;gq;fisg; gad;gLj;jp ,izaj;jsq;fis cUthf;fy;
Nju;rr
; p 10.1
,izag;gf;fq;fspd; nghUslf;fq;fisAk; fl;likg;igAk; mwpe;J nfhs;tjw;F ,izaj;jpYs;s
gy;NtW ,izag; gf;fq;fis Muha;thu;.
cyfshtpa tiy (world wide web - www)
,izaj;jpD}lhf njhlu;Gnfhs;sj;jf;f cyfshtpa uPjpapy;
njhlu;gLj;jg;gl;Ls;s Mtzq;fspd; njhFg;Ng www MFk;.

cs;s

kP,izg;Gf;fshy;

(Hyperlink);

www MdJ Tim Burners Lee vd;w Rtpw;rpyhe;ij Nru;e;j tpQ;Qhdpapdhy; mwpKfk; nra;ag
; l;lJ.
,t; Mtzq;fs; cyfshtpa uPjpapy; ,Uf;ff; $ba ,iza Nritafq;fspy;(Internet servers)
itf;fg;gl;bUf;Fk;.
,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)
2. ,iza nfhLf;fy; thq;fSf;fhd (,iza tu;j;jf) ,izaj;jsk; (e-commerce)
3. gadu;fSf;fpilNa ,ilj;njhlu;Gfis Nkw;nfhs;tjw;fhd ,izaj;jsq;fs; (r%f tiyj;jsq;fs;)
(Social Networking)
4. fspahl;lq;fSf;fhd (nghOJ Nghf;fpw;fhd) ,izaj;jsq;fs;.
5. NjLjs ,izaj;jsq;fs; (Search engine)
6. Nfhg;Gf;fis gfpu;tjw;fhd ,izaj;jsq;fs; (File Sharing)
7. tiyg;gjpTfs; kw;Wk; Md;iyd; jpdf;Fwpg;G (Blogs and Online Diaries)
8. fk;gdpfspd; ,izaj;jsq;fs; (Company website)

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

1 | ILM.Irfan

A/L ICT||Competency 10

learnbyself.com

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;
nfhs;tjw;fhf ,Uf;ff; $ba ,izaj;jsq;fNs ,JthFk;.

nrhe;jkhf

tiyj;jsq;fis

cUthf;fpf;

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

2 | ILM.Irfan

A/L ICT||Competency 10

learnbyself.com

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;

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

<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 jPu;khdpf;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>

3 | ILM.Irfan

A/L ICT||Competency 10

learnbyself.com

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;

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 jPu;khdpf;Fk; ngWkjpfis mjhtJ tyJ, ,lk;, kj;jp,
rkkdhd (right, left, center, justify) vd;gjpidahFk;.

cjhuzk;1: <h1 align = right>

4 | ILM.Irfan

A/L ICT||Competency 10

learnbyself.com

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

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

5 | ILM.Irfan

A/L ICT||Competency 10

learnbyself.com

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

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

6 | ILM.Irfan

A/L ICT||Competency 10

learnbyself.com

 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
HTML Nfhg;G 6: <ol type=I start=3>
<li> One</li>
<li> Two</li>
<li> Three</li>
</ol>

7 | ILM.Irfan

A/L ICT||Competency 10

learnbyself.com

 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>
</dl>

8 | ILM.Irfan

A/L ICT||Competency 10

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;,
,izg;gjw;fhf <a> gad;gLj;jg;Lk;.

Mtzq;fs;

(text,

audio,

video)

Nghd;wtw;iw

gz;Gfs;(attribute): href ,g;gz;Gld; kPapizg;gp;wf

; hd Mtzq;fs; ,izf;fg;gLk;. ,t;thtzq;fs;

Mtzj;ijg;
cjhuzk;:<a
<a
<a

ngUj;J gy;NtW ePl;bg;Gf;fSld; tUk;

href= Timetable.html > New Time Table </a>
href= D:\picture\Flag.jpg> Flag </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;.

9 | ILM.Irfan

A/L ICT||Competency 10

learnbyself.com

Lab work 5: (2011 August)

Lab work 6: (2012 August)

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

10 | ILM.Irfan

A/L ICT||Competency 10

learnbyself.com

 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>
<td>1st row 1st
<td>1st row 2nd
</tr>
<tr>
<td>2nd row 1st
<td>2nd row 1st
</tr>
</table>

Cell</td>
Cell</td>

Cell</td>
Cell</td>

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>

11 | ILM.Irfan

A/L ICT||Competency 10

learnbyself.com

HTML Nfhg;G 12:

<table border=1>
<tr>
<th colspan=2 align=center> 1st row 1st Cell </td>
<th> 1st row 2nd Cell </td>
</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>

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>

12 | ILM.Irfan

A/L ICT||Competency 10

learnbyself.com

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

13 | ILM.Irfan

A/L ICT||Competency 10

learnbyself.com

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

60%
Red

20%
Green

50%
Yellow

50%
Pink

50%

50% Black

gbtq;fs; (Forms) f;fhd HTML tags - <form>

</form>

,e;j tagfhdJ gbtq;fis cUthf;Ftjw;fhd rpy $Wfisf; nfhz;bUf;Fk;. mf;$WfshdJ

jkf;fhd rpy html tagfisf; nfhz;bUf;Fk;. mf;$Wfshf gpd;tUtdtw;iwf; Fwpg;gplyhk;.
<form> </form> tag xU gbtkhdJ ,e;j tag clNdNa Muk;gpf;Fk;. ,e;j tag MdJ
gpd;tUk; gz;Gfisf; nfhz;bUf;Fk;.

gz;Gfs;(attribute): action ,g;gz;ghdJ gbtj;jpy; epug;gg;gLk; juthdJ gbtj;ij rku;g;gpf;Fk;

NghJ vq;F rku;g;gpf;fgl Ntz;Lk; vd;gjpid tiuaiw nra;Ak;. gbtkhdJ

,izaNritfj;jpw;F my;yJ ,d;DnkhU ,izag;gf;fj;jpw;F rku;gpf;fg;gLk;. mt;thw ,lj;ij
action gz;ghdJ ngWkjpahf nfhz;bUf;Fk;.

cjhuzk;: <form action= action_page.php>

method ,g;gz;gdJ gbtj;ij rku;g;gpf;Fk; NghJ ve;j HTTP Kiwapd; fPo; rku;g;gpf;f Ntz;Lk;
vd;gjpid tiuaiw nra;Ak; ,g;gz;G GET, POST vDk; ,uz;L Kiwfisf; nfhz;bUf;Fk;.
GET MdJ rpwpasthd kw;Wk; rhjhuz juTfis rku;;g;gp;f;fg;gad;gL;j;jg;gLk; Mdhy; POST
ghJfhg;G kpf;f ngw;Wk; ngupasthd juTfis rku;g;gpf;fg; gad;gLj;jg;gLk;

cjhuzk;: <form action= action_page.php method= GET>

<form> </form> ,e;j tag fSf;fpilapy; gpd;tUk; tag fs; gad;gLj;jg;gLk;
<input> tag gbtj;jpDs; juTfis cs;Eiotpg;gjw;fhfntd cs;s tag fhFk;.
,f;$whdJ type vDk; gz;gpidf; nfhz;bUf;Fk;. ,g;gz;G gbtj;jpw;fhd rpy $Wfis
gpujpepjpj;Jtk; nra;Ak; tifapy; rpy ngWkjpfisf; nfhz;bUf;Fk; mjhtJ
<input type= text> ,J Text ngWkjpfis cs;sPL nra;a gad;gLj;;jg;gLk;

gz;G(attribute): input tag MdJ value vDk; gz;gpidAk; nfhz;bUf;Fk; ,e;j gz;G
Fwpj;j tag ,d; type vDk; gz;G cyhtpapy; Njhd;Wk; NghJ vd;d ngWkjpapid
mjd; Gyj;jpy; nfhz;bUf;f Ntz;Lk; vd;gjpid jPu;khdpf;Fk;
name ,g;gz;ghdJ xt;nthU GyKk; rupahf rku;g;gpf;fg;gLtjw;F VJthf
,g;gz;gpidf; nfhz;bUf;f Ntz;Lk;. ,J nghUj;jkhd ngWkjpfspidf; nfhz;L
fhzg;gl Ntz;Lk;.

cjhuzk;: First Name: <input type= text value= Mohamed name= F_Name>
readonly ,;g;gz;gpidf; nfhz;bUf;ff; $ba tag ,d; ngWkjpfis khw;w KbahJ

cjhuzk;: First Name: <input type= text value= Mohamed name= F_Name
readonly>
disabled input GykhdJ gad;gL;j;j KbahjthW Klf;fg;gl;bUf;Fk;

cjhuzk;: First Name: <input type= text value= Mohamed name= F_Name
disabled>
size ,g;gz;ghdJ input Gyj;jpy; cs;Eiof;fg;gLk; vOj;Jf;fspd; vz;zpf;ifia
Fwpf;Fk;

cjhuzk;: First Name: <input type= text value= Mohamed name= F_Name
size= 40>

14 | ILM.Irfan

A/L ICT||Competency 10

learnbyself.com

maxlegnth ,g;gz;ghdJ input Gyj;jpy; cs;Eiotpf;fg;gLk; vOj;Jf;fspd; Mff;

$ba vz;zpf;if vOj;Jf;fis tiuaiw nra;Ak;.

cjhuzk;: First Name: <input type= text value= Mohamed name= F_Name
maxlength= 40>
<input type= radio> gy njupTfis toq;fp xU njuptpid njupT nra;tjw;fhf
gad;gLj;jg;gLk;

gz;G (attribute): ,JTk; value, name, disabled Mfpa gz;Gfisf;

nfhz;bUg;gNjhL checked vDk; gz;gpidAk; nfhz;bUf;Fk;. ,g;gz;ghdJ cytpapy;
njupTfs; Njhd;Wk; NghJ ve;j njupT njupT nra;ag;gl;bUf;f Ntz;Lk; vd;gjpid
jPu;khdpf;Fk;
cjhuzk;: <input type= radio value= Male name= Sex> Male
<input type= submit> gbtj;ij rku;g;gpg;gjw;fhd gl;lid cUthf;Ftjw;fh
gad;gLj;jg;gLk;

gz;G (attribute): ,e;j tag MdJ value, disabled vDk; gz;gpidf; nfhz;bUf;Fk;
cjhuzk;: <input type= submit value = Submit>
HTML Nfhg;G 15:
<form>
First name:<br>
<input type="text" name="firstname" value= Mohamed> <br>
Last name:<br>
<input type="text" name="lastname">
<p>
<input type="radio" name="sex" value="male" checked> Male
<br>
<input type="radio" name="sex" value="female">Female
<br>
<br>
<input type="submit" value="Submit">
</form>
<input type= password> flTr; nrhy; jl;lr;R nra;ag;gLk; NghJ vOj;jpid
kiwj;J jl;lr;R nra;ag;gLk; mt;thW jl;lr;R nra;tjw;fhf ,J gad;gLj;jg;gLk;.

gz;G (attribute): ,e;j tag MdJ value, disabled vDk; gz;gpidf; nfhz;bUf;Fk;
cjhuzk;: <input type= password value = pass>
<input type= checkbox> gadu; G+r;rpak; my;yJ xd;W my;yJ xd;Wf;F Nkw;gl;l
njupTfis njupT nra;tjw;F ,J gad;gLj;jg;gLk;.

gz;G (attribute): value, name, disabled Mfpa gz;Gfisf; nfhz;bUf;Fk;.

cjhuzk;: <input type= checkbox name= fruits value = Apple> Apple
HTML Nfhg;G 16:
<form action="">
User name : <input type="text" name="userid"><br><br>
User password : <input type="password" name="psw"> <br> <br>
If You are a Guest then Mark the following <br><br>
<input type="checkbox" name= "user" value= "Guest"> Guest <br>
<input type="checkbox" name= "user" value= "sri lanka"> sri lanka
<br>
<input type="checkbox" name= "user" value= "Other Countr"> Other
Country <br>
<input type="checkbox" name= "user" value= "Agreement"> I've red
user agreement <br><br>
<input type="submit" value="Submit">
</form>

15 | ILM.Irfan

A/L ICT||Competency 10

learnbyself.com

 <select></select> tag - ,e;j tag MdJ drop down gl;baiy jahu;gLj;j cs;s tag
MFk;. ,e;j tag gpd;tUk; gz;gpidAk; nfhz;L fhzg;gLk;.

gz;G(attribute): name, disabled Nghd;w gz;Gfisf; nfhz;L fhzg;gLk;

cjhuzk;: <select name= cars>
<option></option> tag - drop down gl;baYf;fhd tplaq;fis njupT nra;a ,t; tag
gad;gLj;jg;gLk;. ,J <select></select> ,Ds;Ns gad;gLj;jg;gLk;.

gz;G(attribute): value, selected Mfpa gz;Gfs; gad;gLj;jg;gLk;

cjhuzk;: <option value= ICT selected> ICT </option> ,t;thW xt;nthU tplaKk;
Fwpf;fg;gLk;.

<textarea></textarea> tag gy tupfisAila cs;sPlhf toq;Ftjw;fhf ,J

gad;gLj;jg;gLk;.

gz;Gfs;(attribute): name, disabled kw;Wk; rows vj;jid epiufisf; nfhz;bUf;f Ntz;Lk;

vd;gjpidAk; cols vj;jid epuy;fisf; nfhz;bUf;f Ntz;Lk; vd;gjpidAk; Fwpf;Fk;;.

cjhuzk;: <textarea name= message rows=10 cols=30> Type here </textarea>

<button></button> tag - ,J button fis cUthf;f gad;gLj;jg;gLk;.

gz;Gfs;(attribute): type kw;Wk; onclick ,e;j gz;ghdJ button fpspf; nra;ag;gl;lJk; vd;d
nra;jpapid ntspg;gLj;j Ntz;Lk; vd;gjpidAk; Fwpf;Fk;

cjhuzk;: <button type= button onclick= alert(hello)> Click </button>

HTML Nfhg;G 17:
<form action="">
<p>select a Subject from following List and write Definition of it below </p>
<select name="subjects" >
<option value="ICT">ICT</option>
<option value="Accounting">Accounting</option>
<option value="Business Studies">Business Studies</option>
<option value="Logic">Logic</option>
<option value="Political Science">Political Science</option>
<option value="Geography">Geography</option>
</select>
<br><br>
Write the definition of selected subject above <br><br>
<textarea name= "message" rows=10 cols=30> Type Definition Here </textarea> <br>
<br>
<button type= "button" onclick= "alert('Wrong Definition Try Next Time')"> Evaluate
</form>

16 | ILM.Irfan

A/L ICT||Competency 10

learnbyself.com

 <fieldset></fieldset> tag : form tag ,Ds; Fwpf;fg;gLk; juTfis FOthf vy;iyapl;L

,izf;f ,e;j tag gad;gLj;jg;gLk;. ,e;j tag ,Ds; form f;fhd jiyg;gpid ,l gpd;tUk; tag
gad;gLj;jg;gLk;
<legend></legend> tag : ,e;j tag MdJ gbtj;jpw;fhd jiyg;gpid ,l
gad;gLj;jg;gLk;.

cjhuzk;: <legend> Personal Information

</legend>

HTML Nfhg;G 18:

<form>
<fieldset>
<legend> Personal Information </legend> First name:<br>
<input type="text" name="firstname"> <br> Last name:<br>
<input type="text" name="lastname">
<p>
<input type="radio" name="sex" value="male" checked> Male <br>
<input type="radio" name="sex" value="female">Female <br> <br>
<input type="submit" value="Submit">
<fieldset>
</form>

17 | ILM.Irfan

A/L ICT||Competency 10

learnbyself.com

Lab work 9:
,jpy; Njhd;wf; $bathwhd gbtj;ijj; jahu; nra;f. Submit button I fpspf; nra;jhy; You have
successfully submitted your form vd gjpy; Njhd;Wk;

18 | ILM.Irfan

A/L ICT||Competency 10

learnbyself.com

Cascading Style Sheet (CSS)

CSS MdJ HTMLyhy; Md $Wfs; vt;thW Njhd;w Ntz;Lk; vd;gjpid tiuaiw nra;Ak;.
CSS rpy Ntiyfis kPs kPs nra;tjpid tpl;Lk; Ntiyapid ,yFgLj;Jk;.
KO HTML gf;fq;fSf;fhd tbtkhdJ CSS Nfhg;Gf;fshf Nrkpf;fg;gl;bUf;Fk;
CSS MdJ gpd;tUk; %d;W topfspy; HTML Mtzj;Jld; ,izf;fg;gLk;.
i. ntspthup CSS Mtzkhf (External ESS)
ii. cs;sf CSS Mf (Internal CSS)
iii. cs;sf tup CSS Mf (Inline CSS)

i. ntspthup CSS Mtzkhf (External ESS)

CSS Nfhg;G cUthf;fg;gl;L mJ Fwpj;j HTML Mtzj;Jld; ,izf;fg;gLk; ,J Fwpj;j Mtzj;jpd;
<head></head> tag ,Ds; cs;s <link>tag Ds; mioj;J gad;gLj;jg;gLk;.

cjhuzk;:

<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
mystyle.css MdJ ntspapy; cs;s CSS Nfhg;ghFk;.
ii. cs;sf CSS Mf (Internal CSS)
HTML Mtzj;jpd; <head></head> gFjpapDs; <style></style> vDk; tag Ig; gad;gLj;jp mt;
Mtzj;jpw;fhd CSS tbtikg;G vOjg;gLk;.
cjhuzk;:
<head>
<style>
body {
background-color: linen;
}
h1 {
color: maroon;
margin-left: 40px;
}
</style>
</head>
iii. cs;sf tup CSS Mf (Inline CSS)
HTML Mtzj;jpy; cupa tag fspDs;Ns CSS tbtikg;ghdJ ,k;Kiwap;d; fPo; Nkw;nfhs;sg;gLk;. ,jd;
NghJ cupa tag,Ds; style gz;gpid gad;gLj;jpNa CSS tbtikg;Gfs; vOjg;gLk;.

cjhuzk;:

<h1 style="color:blue; margin-left:30px;">This is a heading.</h1>

CSS mikg;G (CSS Syntax)

CSS tpjp gpufldkhdJ xu; NjupT nra;gtiuAk; xU gpufld njhFjpiaAk; nfhz;bUf;Fk;.
(Selector)
njupT nra;gtu;

gpufldk;

gpufldk;(Declaration)

h1 { color:blue; font-size:12px;
,ay;G(properties)

ngWkjp(value)

xU gpuflg;gLj;jy; njhFjpahdJ miukhj;jpiuahy;; gpupf;fg;gl;l xd;Wf;F Nkw;gl;l gpufldq;fisf;

nfhz;bUf;Fk;.
xt;nthU gpufldKk; jkf;fhd ,ay;G ngau; kw;Wk; mjw;fhd ngaiuAk; nfhz;bUf;Fk;.

CSS Background color

body {
background-color: #b7876c;
}

19 | ILM.Irfan

A/L ICT||Competency 10

learnbyself.com

h1 {
background-color: #0fffaa;
}
p

{
background-color: red;

CSS Background image

body {
background-image: url("paper.gif");
}

CSS text color

body {
color: blue;
}
h1 {
color: #00ff00;
}
h2 {
color: rgb(255,0,0);

CSS text Alignment

h1 {
text-align: center;
}
p.date {
text-align: right;
}
p.main {
text-align: justify;
}

CSS font
p {
font-family: "Times New Roman"; font-style: italic; font-size: 30px;
}

CSS link
a:link {
color: #FF0000;
}
/* visited link */
a:visited {
color: #00FF00;
}
/* mouse over link */
a:hover {
color: #FF00FF;
}

20 | ILM.Irfan

A/L ICT||Competency 10

learnbyself.com

/* selected link */
a:active {
color: #0000FF;
}

CSS list
ul {
list-style-type: none;
padding: 0px;
margin: 0px;
}
ul li {
background-image: url(sqpurple.gif);
background-repeat: no-repeat;
background-position: 0px center;
padding-left: 15px;
}

CSS border
p.one {
border-style: solid;
border-width: 5px;
}
p.two {
border-style: solid;
border-width: medium;
}
<!DOCTYPE html>
<html>
<head>
<style>
h1 {
text-align: center;
}
p.date {
text-align: right;
}
p.main {
text-align: justify;
}
</style>
</head>
<body>
<h1>CSS text-align Example</h1>
<p class="date">May, 2009</p>
<p class="main">In my younger and more vulnerable years my father gave me some
advice that I've been turning over in my mind ever since. 'Whenever you feel like
criticizing anyone,' he told me,
'just remember that all the people in this world haven't had the advantages that
you've had.'</p>
<p><b>Note:</b> Resize the browser window to see how the value "justify"
works.</p>
</body>
21</html>
| ILM.Irfan

A/L ICT||Competency 10

learnbyself.com

22 | ILM.Irfan

A/L ICT||Competency 10

learnbyself.com