A/L ICT Competency 10 Web Development

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


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;: ,  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 KbTWj;jy; Fwp , Muk;gf; Fwp
KbTWj;jy; Fwp
 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 





 <br /> <br />

cjhuzk; 

cjhuzk;

tagapDs;NsNa vOjg;gLk; --> : Home : vdJ ,izaj;jsj;jpw;F cq;fis tuNtw;fpd;Nwd;

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

3 | ILM.Irfan


learnbyself.com

HTML Nfhg;G 1: Home Page Wel Come to My Web Site

,t; HTML tagfSf;fhd ,izag;gf;fk; gpd;tUkhW cyhtpapy; Njhd;Wk; f;fhd gFjp<br /> <br /> <body> tag Muk;gpj;J KbAk; tiu <body> Tag fSf;f ,ilNa vOjg;gLgit ,q;F Njhd;Wk;<br /> <br /> Lab Work 01: 3 tpj;jpahrkhd glk; kw;Wk; tu;zk; cila cs;slf;f gpd;ddpiaAila ,izag; gf;fj;ij tbtikf;Ff.<br /> <br />  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;.<br /> <br /> 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;.<br /> <br /> cjhuzk;1: <h1 align = ‚right‛><br /> <br /> 4 | ILM.Irfan<br /> <br /> A/L ICT||Competency 10<br /> <br /> learnbyself.com<br /> <br /> 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><br /> <br />  ge;jpaikg;Gf;fhd HTML Tagfs; - <p><br /> <br /> </p><br /> <br /> ,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;.<br /> <br /> gz;Gfs; (attribute): ,jw;fhf align gz;G gad;gLj;jg;gLk;. ,J gpd;tUk; ngWkjpfisf; nfhz;bUf;Fk; right, left, center, justify.<br /> <br /> 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<br /> <br />  tupfspid Kwpg;gjw;fhd HTML Tag - <br><br /> <br /> </br><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.<br /> <br /> cjhuzk;: This paragraph break by <br> after this tag this line will start in new line<br /> <br /> 5 | ILM.Irfan<br /> <br /> A/L ICT||Competency 10<br /> <br /> learnbyself.com<br /> <br /> 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><br /> <br /> </pre><br /> <br /> ,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<br /> <br /> code,<br /> <br /> ignores it. </pre><br /> <br /> Lab work 2: ,e;j ntspaPl;bid juj;jf;f ,izag;gf;fj;jpidj; tbtikf;Ff<br /> <br />  vOj;JU (Font) HTML Tags - <font><br /> <br /> </font><br /> <br /> 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;.<br /> <br /> 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)<br /> <br /> cjhuzk;: <font face= ‚Thaoma‛ size=12 color= ‚red‛><br /> <br /> 6 | ILM.Irfan<br /> <br /> A/L ICT||Competency 10<br /> <br /> learnbyself.com<br /> <br />  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;: <sub> Subscripts </sub>  Superscripts c-k;: <sup> Superscripts </sup><br /> <br /> glk;: 2<br /> <br /> Lab work 3: glk;: 1, glk;: 2 cs;sthW Njhd;wr; nra;f glk;: 1<br /> <br />  Comment HTML Tag - <br /> <br /> ,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;.<br /> <br /> cjhuzk; : <!—this just comment html doesn’t react to this tag><br /> <br /> 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;.<br /> <br /> </ol><br /> <br /> 1. One 2. Two 3. Three<br /> <br /> a. One b. Two c. Three<br /> <br /> i. One ii. Two iii. Three<br /> <br /> gz;Gfs;(attribute) : <ol> tag MdJ type vDk; gz;gpid nfhz;bUf;Fk;. ,J gl;bayhdJ<br /> <br /> 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><br /> <br /> 7 | ILM.Irfan<br /> <br /> A/L ICT||Competency 10<br /> <br /> learnbyself.com<br /> <br />  xOq;FgLj;jg;glhj gl;bay; (Unordered List) HTML Tag - <ul><br /> <br /> </ul><br /> <br /> ,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;<br /> <br /> 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><br /> <br /> Lab work 4: gpd;tUkhW Njhd;wf; $ba ,izag;gf;fj;jpid tbtikf;Ff<br /> <br />  tpsf;fkspf;fgl;l gl;bay; (Description List) HTML Tag - <dl><br /> <br /> </dl><br /> <br /> ,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;:<br /> <br /> <h2>A Description List</h2> <dl> <dt>Coffee</dt> <dd>- black hot drink</dd> <dt>Milk</dt> <dd>- white cold drink</dd> </dl><br /> <br /> 8 | ILM.Irfan<br /> <br /> A/L ICT||Competency 10<br /> <br /> learnbyself.com<br /> <br /> 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.<br /> <br /> 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;.<br /> <br /> 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;<br /> <br /> cjhuzk;: <img src= ‚D:\picture\lag.jpg‛> NkYk; glkhdJ ,izaj;jsq;fspy; ,Ue;jhYk; mJTk; gpd;tUkhW Fwpf;fg;gLk;.<br /> <br /> 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><br /> <br /> </embed><br /> <br /> ,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<br /> <br /> 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;.<br /> <br /> Mtzq;fs;<br /> <br /> (text,<br /> <br /> audio,<br /> <br /> video)<br /> <br /> Nghd;wtw;iw<br /> <br /> gz;Gfs;(attribute): href ,g;gz;Gld; kPapizg;gp;wf ; hd Mtzq;fs; ,izf;fg;gLk;. ,t;thtzq;fs;<br /> <br /> Mtzj;ijg; cjhuzk;:<a <a <a<br / rel="nofollow"> <br /> <br /> <br /> 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><br /> <br /> <a><br /> <br /> </a> w;F ,ilNa tUk; vOj;Jf;fspd; kPJ Rl;bapid nfhz;L nry;Yfpd;w NghJ mJ<br /> <br /> Mf khWk;. mjid fpspf nra;jhy; href apy; Fwpg;gplg;gl;Ls;s Mtzj;jpid ,izag;gf;fj;jpw;F nfhz;L tUk;.<br /> <br /> 9 | ILM.Irfan<br /> <br /> A/L ICT||Competency 10<br /> <br /> learnbyself.com<br /> <br /> Lab work 5: (2011 August)<br /> <br /> 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<br /> <br /> 10 | ILM.Irfan<br /> <br /> A/L ICT||Competency 10<br /> <br /> learnbyself.com<br /> <br />  ml;;ltizf;fhd HTML Tag - <table><br /> <br /> </table><br /> <br /> 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><br /> <br /> Cell</td> Cell</td><br /> <br /> Cell</td> Cell</td><br /> <br /> 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><br /> <br /> 11 | ILM.Irfan<br /> <br /> A/L ICT||Competency 10<br /> <br /> learnbyself.com<br /> <br /> 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><br /> <br /> Lab work 7: ghlrhiyapy; ckJ tFg;giwf;F toq;fg;gl;l ghlNeu Rrpapid nfhz;l ,izag;gf;fj;jpid tbtikf;Ff. Time<br /> <br /> Mon<br /> <br /> Tue<br /> <br /> Wed<br /> <br /> Thu<br /> <br /> Fri<br /> <br /> Interval<br /> <br /> School Over<br /> <br />  rl;lfq;fis cUthf;Ftjw;fhd HTML tags - <frameset><br /> <br /> </frameset><br /> <br /> 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.<br /> <br /> 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><br /> <br /> 12 | ILM.Irfan<br /> <br /> A/L ICT||Competency 10<br /> <br /> learnbyself.com<br /> <br /> 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><br /> <br />  <frame> tag MdJ gpd;tUk; gz;Gfisf; nfhz;bUf;Fk;.<br /> <br /> 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><br /> <br /> 13 | ILM.Irfan<br /> <br /> A/L ICT||Competency 10<br /> <br /> learnbyself.com<br /> <br /> 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<br /> <br /> 60% Red<br /> <br /> 20% Green<br /> <br /> 50% Yellow<br /> <br /> 50% Pink<br /> <br /> 50%<br /> <br /> 50% Black<br /> <br />  gbtq;fs; (Forms) f;fhd HTML tags - <form><br /> <br /> </form><br /> <br /> ,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;.<br /> <br /> gz;Gfs;(attribute): action ,g;gz;ghdJ gbtj;jpy; epug;gg;gLk; juthdJ gbtj;ij rku;g;gpf;Fk;<br /> <br /> 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;.<br /> <br /> 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;<br /> <br /> 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;<br /> <br /> 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;.<br /> <br /> 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<br /> <br /> 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;<br /> <br /> 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;<br /> <br /> cjhuzk;: First Name: <input type= ‚text‛ value= ‚Mohamed‛ name= ‚F_Name‛ size= 40><br /> <br /> 14 | ILM.Irfan<br /> <br /> A/L ICT||Competency 10<br /> <br /> learnbyself.com<br /> <br /> 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;.<br /> <br /> 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;<br /> <br /> 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;<br /> <br /> 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;.<br /> <br /> 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;.<br /> <br /> 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><br /> <br /> 15 | ILM.Irfan<br /> <br /> A/L ICT||Competency 10<br /> <br /> learnbyself.com<br /> <br />  <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;.<br /> <br /> 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;.<br /> <br /> 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;.<br /> <br />  <textarea>…………</textarea> tag – gy tupfisAila cs;sPlhf toq;Ftjw;fhf ,J gad;gLj;jg;gLk;.<br /> <br /> 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;;.<br /> <br /> cjhuzk;: <textarea name= ‚message‛ rows=10 cols=30> Type here </textarea>  <button>………</button> tag - ,J button fis cUthf;f gad;gLj;jg;gLk;.<br /> <br /> 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;<br /> <br /> 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><br /> <br /> 16 | ILM.Irfan<br /> <br /> A/L ICT||Competency 10<br /> <br /> learnbyself.com<br /> <br />  <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;.<br /> <br /> cjhuzk;: <legend> Personal Information<br /> <br /> </legend><br /> <br /> 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><br /> <br /> 17 | ILM.Irfan<br /> <br /> A/L ICT||Competency 10<br /> <br /> learnbyself.com<br /> <br /> 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;<br /> <br /> 18 | ILM.Irfan<br /> <br /> A/L ICT||Competency 10<br /> <br /> learnbyself.com<br /> <br /> Cascading Style Sheet – (CSS)    <br /> <br /> 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)<br /> <br /> 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;.<br /> <br /> cjhuzk;:<br /> <br /> <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;.<br /> <br /> cjhuzk;:<br /> <br /> <h1 style="color:blue; margin-left:30px;">This is a heading.</h1><br /> <br /> CSS mikg;G (CSS Syntax) CSS tpjp gpufldkhdJ xu; NjupT nra;gtiuAk; xU gpufld njhFjpiaAk; nfhz;bUf;Fk;. (Selector) njupT nra;gtu;<br /> <br /> gpufldk;<br /> <br /> gpufldk;(Declaration)<br /> <br /> h1 { color:blue; font-size:12px; ,ay;G(properties)<br /> <br /> ngWkjp(value)<br /> <br /> 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;.<br /> <br /> CSS Background color body { background-color: #b7876c; }<br /> <br /> 19 | ILM.Irfan<br /> <br /> A/L ICT||Competency 10<br /> <br /> learnbyself.com<br /> <br /> h1 { background-color: #0fffaa; } p<br /> <br /> { background-color: ‚red‛;<br /> <br /> }<br /> <br /> CSS Background image body { background-image: url("paper.gif"); }<br /> <br /> CSS text color body { color: blue; } h1 { color: #00ff00; } h2 { color: rgb(255,0,0);<br /> <br /> CSS text Alignment h1 { text-align: center; } p.date { text-align: right; } p.main { text-align: justify; }<br /> <br /> CSS font p { font-family: "Times New Roman"; font-style: italic; font-size: 30px; }<br /> <br /> CSS link a:link { color: #FF0000; } /* visited link */ a:visited { color: #00FF00; } /* mouse over link */ a:hover { color: #FF00FF; }<br /> <br /> 20 | ILM.Irfan<br /> <br /> A/L ICT||Competency 10<br /> <br /> learnbyself.com<br /> <br /> /* selected link */ a:active { color: #0000FF; }<br /> <br /> 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; }<br /> <br /> 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<br /> <br /> A/L ICT||Competency 10<br /> <br /> learnbyself.com<br /> <br /> 22 | ILM.Irfan<br /> <br /> A/L ICT||Competency 10<br /> <br /> learnbyself.com<br /> <br /> </div> </div> </div> </div> </div> </div> </div> </div> <div class="modal fade" id="report" tabindex="-1" role="dialog" aria-hidden="true"> <div class="modal-dialog"> <div class="modal-content"> <form role="form" method="post" action="https://idoc.tips/report/a-l-ict-competency-10-web-development-pdf-free" style="border: none;"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button> <h4 class="modal-title">Report "A/L ICT Competency 10 Web Development"</h4> </div> <div class="modal-body"> <div class="form-group"> <label>Your name</label> <input type="text" name="name" required="required" class="form-control" /> </div> <div class="form-group"> <label>Email</label> <input type="email" name="email" required="required" class="form-control" /> </div> <div class="form-group"> <label>Reason</label> <select name="reason" required="required" class="form-control"> <option value="">-Select Reason-</option> <option value="pornographic" selected="selected">Pornographic</option> <option value="defamatory">Defamatory</option> <option value="illegal">Illegal/Unlawful</option> <option value="spam">Spam</option> <option value="others">Other Terms Of Service Violation</option> <option value="copyright">File a copyright complaint</option> </select> </div> <div class="form-group"> <label>Description</label> <textarea name="description" required="required" rows="3" class="form-control" style="border: 1px solid #cccccc;"></textarea> </div> <div class="form-group"> <div style="display: inline-block;"> <div class="g-recaptcha" data-sitekey="6LcHT8sZAAAAAPKfs_PZGhwvz-OHbUMuekQzz5xK"></div> </div> </div> <script src='https://www.google.com/recaptcha/api.js'></script> </div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> <button type="submit" class="btn btn-success">Send</button> </div> </form> </div> </div> </div> <script> $(document).ready(function () { var inner_height = $(window).innerHeight() - 250; $('#pdfviewer').css({"height": inner_height + "px"}); }); </script> <footer class="footer" style="margin-top: 60px;"> <div class="container-fluid"> Copyright © 2024 IDOC.TIPS. All rights reserved. <div class="pull-right"> <span><a href="https://idoc.tips/about">About Us</a></span> | <span><a href="https://idoc.tips/privacy">Privacy Policy</a></span> | <span><a href="https://idoc.tips/term">Terms of Service</a></span> | <span><a href="https://idoc.tips/copyright">Copyright</a></span> | <span><a href="https://idoc.tips/contact">Contact Us</a></span> | <span><a href="https://idoc.tips/cookie_policy">Cookie Policy</a></span> </div> </div> </footer>  <div class="modal fade" id="login" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"> <div class="modal-dialog" role="document"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-label="Close" on="tap:login.close"><span aria-hidden="true">×</span></button> <h4 class="modal-title" id="add-note-label">Sign In</h4> </div> <div class="modal-body"> <form action="https://idoc.tips/login" method="post"> <div class="form-group"> <label class="sr-only" for="email">Email</label> <input class="form-input form-control" type="text" name="email" id="email" value="" placeholder="Email" /> </div> <div class="form-group"> <label class="sr-only" for="password">Password</label> <input class="form-input form-control" type="password" name="password" id="password" value="" placeholder="Password" /> </div> <div class="form-group"> <div class="checkbox"> <label class="form-checkbox"> <input type="checkbox" name="remember" value="1" /> <i class="form-icon"></i> Remember me </label> <label class="pull-right"><a href="https://idoc.tips/forgot">Forgot password?</a></label> </div> </div> <button class="btn btn-primary btn-block" type="submit">Sign In</button> </form> </div> </div> </div> </div>  <script async src="https://www.googletagmanager.com/gtag/js?id=UA-177830117-1"></script> <script> window.dataLayer = window.dataLayer || []; function gtag(){dataLayer.push(arguments);} gtag('js', new Date()); gtag('config', 'UA-177830117-1'); </script> <script src="https://idoc.tips/assets/js/jquery-ui.min.js"></script> <link rel="stylesheet" href="https://idoc.tips/assets/css/jquery-ui.css"> <script> $(function () { $("#document_search").autocomplete({ source: function (request, response) { $.ajax({ url: "https://idoc.tips/suggest", dataType: "json", data: { term: request.term }, success: function (data) { response(data); } }); }, autoFill: true, select: function (event, ui) { $(this).val(ui.item.value); $(this).parents("form").submit(); } }); }); </script>  <div id="IDOCTIPS_cookie_box" style="z-index:99999; background: #97c479; width: 100%; position: fixed; padding: 5px 15px; text-align: center; left:0; bottom: 0;"> Our partners will collect data and use cookies for ad personalization and measurement. <a href="https://idoc.tips/cookie_policy" target="_blank">Learn how we and our ad partner Google, collect and use data</a>. <a href="#" class="btn btn-success" onclick="accept_IDOCTIPS_cookie_box();return false;">Agree & close</a> </div> <script> function accept_IDOCTIPS_cookie_box() { document.cookie = "IDOCTIPS_cookie_box_viewed=1;max-age=15768000;path=/"; hide_IDOCTIPS_cookie_box(); } function hide_IDOCTIPS_cookie_box() { var cb = document.getElementById('IDOCTIPS_cookie_box'); if (cb) { cb.parentElement.removeChild(cb); } } (function () { var IDOCTIPS_cookie_box_viewed = (function (name) { var matches = document.cookie.match(new RegExp("(?:^|; )" + name.replace(/([\.$?*|{}\[\]\\\/\+^])/g, '\\$1') + "=([^;]*)")); return matches ? decodeURIComponent(matches[1]) : undefined; })('IDOCTIPS_cookie_box_viewed'); if (IDOCTIPS_cookie_box_viewed) { hide_IDOCTIPS_cookie_box(); } })(); </script>  </body> </html>

A/L ICT Competency 10 Web Development

Recommend Documents

KbTWj;jy; Fwp