; p kl;lk; 7.

4: ,izag;gf;fq;fis tpUj;jp nra;tjw;F ,izag; gilg;ghf;ff; fUtpiag;

Nju;rr  tiyj; jsnkhd;wpw;Fg; gpuNtrpf;Fk; NghJ gadu; fhz;fpd;w KjyhtJ gf;fk;
ghtpg;ghu; ,JthFk;.
ghlNtisfs;: 2  ,q;F nghJthf tiyj;jsj;ijg; gw;wpa jfty;fisAk; njhlu;Gila
fw;ww; NgWfs;: ,izg;GfisAk; nfhz;bUf;Fk;.
 gilg;ghf;ff; fUtpfisg; ghtpj;J vspa ,izag;gf;fq;fis tbtikg;ghu; o ,izg;Gg; gf;fq;fs;:
cs;slf;fk;:  tiyg; gf;fj;jpy; rpy ,izg;Gfs; fhzg;gLk;. ,it ,Nj tiyj;jsj;jpy;; my;yJ
 tiyg;gilg;ghf;ff; fUtpfs; mwpKfk; NtW tiyj;jsq;fspypUf;Fk; gf;fq;fisj; jpwg;gjw;Fg; gad;gLfpd;wd.
vz;zf;fUf;fSk; Kjd;ikg; gjq;fSk; ,g;gf;fq;fis ,izg;Gg; gf;fq;fs; vdg;gLk;.
 tiyg;gilg;ghf;ff; fUtpfspd; Njitfs; o tiyj;jsk;:
 ,J Fwpj;j Ms;fsg; ngaupw;Ff; fPo; fhzg;gLfpd;w njhlu;Gila
 tiyg; gf;fq;fis cUthf;Ftjw;Fg; gad;gLj;jg;gLk; nkd;nghUl;fs;
tiyg;gf;fq;fspd; njhFg;;nghd;whFk;. cjhuzk;: Njrpa fy;tp epWtfk;: www.nie.lk>
 tiyg; gf;fq;fis cUthf;Ftjw;fhd nkd;nghUs; gad;ghL
fy;tp mikr;R: www.moe.gov.lk $Fy; tiyj;jsk;: www.google.com
ghlj;ijj; jpl;lkpLjy; njhlu;ghd mwpTWj;jy;fs; o tiyg; gf;fnkhd;wpd; fl;likg;Gj; njhFjpfs;
 tiyg;gilg;ghf;ff; fUtpfspd; gad;ghl;ilr; nra;J fhl;Lf  tiyg; gf;fq;fs; gy;NtW $Wfisf; nfhz;bUf;fpd;wd.
 ,f;$Wfs; xt;nthd;Wk; gy;NtW topfspy; jftiyg; gupkhWtjw;Fg;
 Mff; Fiwe;jJ 2 my;yJ 3 gf;fq;fisf; nfhz;l tiyj; jsq;fis tpUj;jpr;
gad;gLfpd;wd.
nra;tjw;F khztu;fis topg;gLj;jTk;
 nghJthd $Wfshtd:
ju tpUj;jp cs;sPLfs; - thrfk;: ,jpy; nrhw;fs;> vOj;Jf;fs;> ,yf;fq;fs;> Vida FwpaPLfs; vd;gd
mlq;fpapUf;Fk;.
 khztu;fshy; tpUj;jp nra;ag;gl;l tiyj; jsj;jpid Kd;itf;fr; nra;aTk;
- tiutpay; fs;: tiujy;fs;> ml;ltizfs;> tiuglq;fs;> Xtpaq;fs;>
fzpg;gL
P k; kjpg;gPLk; njhlu;ghd mwpTWj;jy;fs; xspg;glq;fs;> topr;nry;Yk; nghj;jhd;fs; Nghd;wit ,jpy; mlq;Fk.;
- xyp: ,J Neuiyahd my;yJ gjpT nra;j xypahf ,Uf;Fk;.
 tiyg;gilg;ghf;ff; fUtpiag; gad;gLj;jp vspanjhU ,izag; gf;fj;ij tpUj;jp
nra;tjw;F tiuaWf;fg;gl;l tpguf;Fwpg;gpid toq;fTk; - fhnzhsp: ,J Neuiyahd my;yJ gjpT nra;j fhnzhspahf ,Uf;Fk.
- mirT+l;lq;fs;: thrfq;fs; my;yJ tiutpay; fspd; mirTfisf;
Fwpf;fpd;wJ.
- kP,izg;Gfs;: ,it ,Nj tiyj;jsj;jpy;; NtnwhU gf;fj;jpid> mNj
thrpg;Gg; gj;jpuk; gf;fj;jpd; NtnwhU gFjp my;yJ NtW tiyj;jsq;fs; Nghd;wtw;iwj;
o mwpKfk; njhlu;G gLj;Jtjw;Fg; gad;gLfpd;wd.
 ,izak; vd;gJ cyfshtpa uPjpapYs;s ,ilj;njhlu;G gLj;jg;gl;l fzpdp o cs;slf;fq;fspd; xOq;ikg;G:
tiyaikg;Gfspd; Nrfupg;nghd;whFk;.  tiyg;gf;fnkhd;wpd; jstikg;G gy;NtW $Wfs; gFjpfs; vd;gtw;wpd;
 ,izakhdJ tpahghuq;fs;> epWtdq;fs;> murhq;fk; kw;Wk; jdpahs; Nghd;wtu;fs; xOq;fikg;ig jPu;khdpf;fpd;wJ.
njhlu;G nfhs;sf;$bag; gy;NtWtifapyhd trjpfis toq;FfpwJ.  tiyg;gf;fnkhd;wpd; xOq;fikg;gpw;fhd rpy cjhuzq;fs;
 tiyg; gf;fq;fis ntspapl;L mtw;wpDlhf ,iltpid GuptJ> ,izaj;jpy;; - rl;lfq;fs;: rl;lfq;fs; tiyg;gf;fnkhd;iwg; gFjpfshfg; gpupj;J gy;NtW
gadu;fs; njhlu;G nfhs;Sk; kpfTk; gpugykhd Kiwahff; fhzg;gLfpwJ. gf;fq;fisAk; jsq;fisAk; mZf mDkjpf;fpd;wJ.
o tiy NkNyhbfs; / ,iza cyhtpfs; - gl;bay;fs;: ,it njhFjp tbtpyike;j fl;likg;G tiuaiuf; $Wfs;.
 tiyg; gf;fq;fisg; ghu;g;gjw;Fk; ,iltpid Guptjw;Fk; trjpaspf;fpd;w xU - ml;ltizfs:; ngupa mstpyhd juTfis nraw;wpwDs;s tifapy; epuy;
nkd;nghUshFk;. cjhuzk;: Internet Explorer, Google Chrome, Mozilla Firefox, Apple kw;Wk; epiufspy; toq;Ftjw;F HTML ml;ltizfs; gadu;fSf;F
Safari Nghd;wit. mDkjpf;fpd;wd.
 tiy NkNyhbfspy; ,uz;L gpujhd nraw;ghLfs; fhzg;gLfpd;wd.
 tiyg; gf;fq;fis cUthf;Ftjw;Fg; gad;gLj;jg;gLk; kPthrfr; Rl;L tiyj;jsj; Njitg; gFg;gha;T
nkhopapid thrpj;J tpsq;fp> mjid tiyg; gf;fj;jpy; fhl;rpg;gLj;jf; $ba  tiyj;jsj; Njitg; gFg;gha;T vd;gJ tiyj;jsj;jpd; tzpf khjpupAld;
tbtj;jpw;F khw;wpaikf;fpd;wJ. njhlu;Gilar; rthy;fisAk; re;ju;g;gq;fisAk; gFg;gha;T nra;tjw;F cjTfpd;w
Kiwtopnahd;whFk;.
 tiyg; gf;fq;fSf;F nry;yf;$ba trjpiag; gadu;fSf;F toq;FfpwJ.
 Nkw;Fwpg;gpl;l xt;nthU nkd;nghUSk; gy gjpg;Gfspy; tpUj;jp nra;ag;gl;Ls;sd.  ,g;gzpapd; tUtpisthdJ gadu; Njitfisj; jpUg;jpg;gLj;jf;$ba tplaq;fisf;
Gjpa gjpg;Gfs;> kpfmz;kpj;j tiy trjpfisr; nraw;gLj;jf; $ba jd;ikfisf; nfhz;l MtzkhFk;.
nfhz;bUf;fpd;wd.  ,t;Mtzj;jpy; cs;slf;fg;gl Ntz;ba Kf;fpa $Wfshtd:
o tiyg; gf;fk;: o tiyj;jsj;jpd; Nehf;fk;
 ,J tiyj; jsj;jpy; ,Uf;Fk; jdp kPthrfr; Rl;L nkhopf; Nfhg;nghd;whFk;. o gadu; ,ilKf tbtikg;G
 tiyj; jsj;jpy; mjw;Fj; jdpj;Jtkhd nganuhd;W ,Uf;Fk;. o gq;fspg;G kw;Wk; gjpthf;fy; Kiwtop
 ,jpy; thrfk;> gbkq;;fs;> tiutpay;fs;> mirT+l;lq;fs;> xypfs;> fhnzhspfs; o gadu; tiuaiw fUtpfSk; gf;fq;fSk;
kw;Wk; kP,izg;Gfs; Nghd;w gy;Y}lfq;fis cs;slq;fpapUf;Fk;. o ghJfhg;Gj; Njitfs;
o Kfg;Gg; gf;fk; o vjpu;fhy Nkk;ghLiffs;
 ve;j xU tiyj; jsj;jpdJk; gpujhd gf;fk; Kfg;Gg; gf;fk; vdg;gLk;. o njhopDl;gj; njupTfs; fpilf;ff;$baik(c+k;: Java script, PHP, ASP etc)
88 89
 toq;Ffpd;w $Wfis
Xl;Lfs; nfhz;Ls;sd
kP thrf Rl;L nkhop(HTML) $Wfs; (Elements) HTML Mtzj;jpd; xU <HR> - ,e;j Xl;L
mbg;gil myF. $w;wpd; fpilahd
 mwpKfk;: ngau; Xl;bd; ngaUf;Fs; tiuNfhYf;fhd
o HTML gad;gLj;jp tiyj;jsj;ij cUthf;fyhk;. nfhLf;fg;gl;Ls;sJ $iwf; nfhz;Ls;sJ
o ikaj; njhopDl;gkhd HTML If; nfhz;Nl midj;J tiyj; jsq;fSk;
vOjg;gl;Ls;sd.
 HTML vd;gJ ahJ? gz;G (Attribute) HTML $W xd;wpd; tpNrl <IMG
,ay;nghd;iw SRC="image.jpg">
HTML vd;gJ tiyg; gf;fq;fis tpgupg;gjw;fhd xU nkhopahFk;. tiuaWf;fpwJ ‘IMG’vDk; $W
 HTML vd;gJ Hyper Text Markup Language vd;gjd; FWf;fkhFk;.
‘SRC’vDk; gz;igf;
 ,J xU Rl;L nkhopahFk;. epuyhf;fy; nkhopnahd;wy;y. nfhz;Ls;sJ. ,J
 Rl;L nkhop vd;gJ Rl;L xl;Lfspd; njhFg;nghd;whFk;. cUtg;glf; Nfhg;gpd;
 ,J Mq;fpy vOj;J tbTzu;tw;wJ. ngaiuf;
Fwpf;fpd;wJ. Nfhg;gpd;
 xl;Lfs; vd;gJ ahJ? ngau; “image.jpg”
 HTML xl;Lfshtd Nfhz milg;Gf; Fwpf;Fs; Fwpf;fg;gLfpd;w <html> MFk;
Nghd;w Kf;fpa gjq;fshFk;.
 xl;Lfs; ,Utifg;gLk; o HTML Xl;Lfs;
 nfhs;fyd; $Wfs;: ,it Muk;g xl;ilAk; KbT xl;ilAk;  tiy NkNyhbfs; ,t;nthl;Lfisr; re;jpf;Fk;NghJ> ,t;nthl;Lr;
nfhz;bUf;Fk;. ck;: <HTML>… </HTML> NrhbfSf;F ,ilapy; fhzg;gLtJ tiyg; gf;fk; vd
 ntw;Wf; $Wfs;: ,it Muk;g xl;il khj;jpuk; nfhz;bUf;Fk;. ck;: tiuaWj;Jf;nfhs;Sk;
<BR>  gioa tiy NkNyhbfSf;F HTML xl;Lfs; mtrpakhFk;. vdpDk;>
 HTML njhFg;gp Gjpa HTML gjpg;Gfs; kw;Wk; Gjpa tiy NkNyhbg; gjpg;GfSf;F
o HTML Mtzq;fs; vd;gJ vspa thrf Mtzq;fshFk;. MfNt> ve;j xU xl;Lfs; vy;yhr; re;ju;g;gq;fspYk; Njitg;gl khl;lhJ> vdpDk;
mtw;iwr; Nru;g;gJ rpwe;jjhFk;.
Mtzj; njhFg;gp nra;epuiyf; nfhz;Lk; HTML FwpKiwfis njhFj;J
o jiyg;Gg; gFjp (<head> and </head>):
tiyg;gf;fnkhd;iw cUthf;fyhk;. cjhuzk;: Notepad++, Notepad, PSPad
 ,t;nthl;L; tpguq;fisAk; mtrpakhd mZfy; jftiyAk; tiyg;
 mNjNghd;W> tiy tiuaiw FwpKiwr; #oy;fisAk; gad;gLj;jyhk;.
gf;fj;jpw;Fr; Nru;f;fpd;wJ.
cjhuzk;: Brackets, Microsoft FrontPage, Microsoft DreamViewer  jiyg;Gg; gFjpapy; fhzg;gLk; jfty; tiyNkNyhbr; rhsuj;jpy;
 %yf; FwpaPLfisr; Nrkpj;jy; njd;glhJ.
 HTML Nfhg;nghd;iwr; Nrkpf;Fk;NghJ mjd; “.htm” my;yJ “.html”  ,J jiyg;Gj; jfty; Nghd;wtw;iwf; nfhz;bUf;Fk;.
ePl;rpahfg; ghtpf;fyhk;. o cly;; gFjp (<body> and </body>):
 Muk;g fhy nkd;nghUl;fs; ePl;rpahf %d;W vOj;Jfis khj;jpuk;  ckJ tiyg;gf;fj;ij cUthf;Fk; ge;jpfs;> gl;bay;fs;>
mDkjpj;jjhy; me;j gof;fj;jpd; mbg;gilapy; ,d;Wk; “.htm” ,idg; ml;ltizfs;> cUtg;glq;fs; Nghd;w tiyg;gf;fj;jpy;
gad;gLj;Jfpd;Nwhk;. fhl;rpg;gLj;jg;gLk; cs;slf;fq;fis ,g;gFjpf; nfhz;bUf;Fk;.
 mNefkhd re;ju;g;gq;fspy; “.html” vd;gijg; gad;gLj;JtJ kpfTk; cjhuzk;: HTML Nfhg;G xd;wpd; mbg;gilf; fl;likg;G
ghJfhg;ghdjhf mikAk;.
 tiyg; gf;fq;fs; mtw;wpd; cs;slf;fq;fisAk; jsmikg;igAk; nfhz;L
gue;jstpy; tpj;jpahrg;glyhk;. midj;J gf;fq;fSk; mbg;gilf; <html>
fl;likg;Gf;Fj; Njitahd rpy HTML xl;Lfisf; nfhz;Ls;sd. <head>
 HTML fl;likg;G ……..
</head>
Name of HTML Meaning Example <body>
Component ……..
msTr;Rl;b (Delimiters) Xl;Lfisr; #oTs;s <,>,/
tuk;Gf;Fwpf;Fs; cs;s ……..
jftiy xU HTML </body>
$Whf thrpf;FkhW </html>
mwptpf;fpd;wJ o Fwpg;Gfis Nru;j;jy;:
HTML Mtznkhd;wpy; Fwpg;Gfis vOJtjw;Fg; gad;gLfpd;wJ. tiyNkNyhb
Xl;Lfs; (Tags) jfty; vt;thW <html> tiyg;gf;fj;ijf; fhl;rpg;gLj;Jk; NghJ mjpy; Fwpg;Gfs; njd;gLtjpy;iy.
Kiwtopg; gLj;jg;gl .
my;yJ fhl;rpg;gLj;jg;gl cjhuzk;: <! --Enter the comments -->
.
Ntz;Lk; vDk;
mwpTWj;jy;fis </html>

90 91
o gpd;dzp tz;zk;; ,t;nthl;Lk; mNefkhf thrf
 ‘bgcolor’ vd;w cly; xl;Lg; gz;G> Mtzj;jpd; gpd;dzp epwj;ijf; tbtikg;gpw;Nf
Fwpf;fpd;wJ. gad;gLj;jg;gLfpwJ.
mbf;NfhL xl;L thrfq;fisf; fPoN ; fhbl;Lf; <u> This is underline</u>
cjhuzk;: :-<body bgcolor=”Red”>, my;yJ epwj;jpw;Fupa Fwpiag; UnderlineTag fhl;lg;gad;gLj;Jk; <u>.. </u>
ngWkhdkhff; fhl;;lyhk;. vd;w xl;Lk; Nkw;Fwpg;gpl;lthNw
gad;gLj;jg;gLfpwJ
o HEAD $W: vOj;JU xl;L ,e;j xl;L thrfq;fspd; vOj;JU
Font Tag tbtk;> gUkd;> epwk; vd;gtw;iw
 <TITLE>...</TITLE> : ,tnthl;L Mtzj;jpd; jiyg;igf; Fwpg;gJld; ,J tbtikg;gjw;F
tiyNkNyhbapd; Gj;jff;Fwpg;Gf; Nfhg;gpYk; Njhd;Wk;. gad;gLj;jg;gLfpwJ.
cjhuzk;: <font face= ‘Times
o BODY $Wfs;: New Roman’ > vd;w xl;L
1. thrf tbtikg;G Muk;gj;jpYk; </font> xl;L
$Wfs; ,J vd;d? vg;gbg; gad;gLj;JtJ? KbtpYk; gad;gLj;jg;gly;
jiyg;G xl;L MW jiyg;G xl;Lfs; cs;sd <h1> This is a heading Ntz;Lk;.
1. thrfq;fspd; Njhw;wj;ij <font face= “Arial”>This
(<H1>,<H2>,<H3>,<H4>, </h1>
<font> xl;ilAk; ‘FACE’ text font is ARIAL</font>
<H5>,<H6>). ,e;j MW $WfSk;
nfhs;fyd; xl;Lfshifahy; gz;igAk; gad;gLj;jp
,tw;wpw;F %Lk; xl;Lfs; khw;wyhk;.
mtrpakhFk;.
<h1> jiyg;ig kpfg;ngupa 2. thrfq;fspd; gUkid ‘size’ <font size=5>This text
vOj;jpy; fhl;rpg;gLj;Jk;;. vDk; gz;igg; gad;gLj;jp font size is 5</font>
<h6> jiyg;ig kpfr;rpwpa khw;wyhk;. 1 Kjy; 7
vOj;jpy; fhl;rpg;gLj;Jk; tiuahd gUkd;fs; cs;sd.
ge;jp xl;L HTML Mtzq;fis ge;jpfshf <p> This is the tag for 1 vd;gJ kpfr;rpwpa msthFk;.
tbtikf;fyhk;;. ge;jpfs; <p> paragraph </p>
xl;L %yk; Fwpf;fg;gLfpd;wd. 3. thrfq;fspd; epwj;ij <font>
<font color= “red”>This
ge;jpfspd; fpil epiy kw;Wk; xl;bd; ‘color’ vDk; gz;igg;
gad;gLj;jp text font color is
Neu;gLj;jy;fis “align” gz;igf; <p align= “right”>National red</font>
nfhz;L fl;Lg;gLj;jyhk;. ,ay;GepiyapYs;s fUik
Institute of Education, epwj;ij NtW epwq;fSf;F <font color=“green"
ge;jpfis left, right, center, or Magaragama</p> khw;wyhk;. xl;nlhd;wpd; size="3" face="Times
justify Nghd;wthW Neu;g;gLj;j gz;Gfs; gytw;iw khw;wyhk;
KbAk;. New Roman">National
Institute of
Education</font>
tup KwpT kw;Wk; Gjpa ge;jpahf ,y;yhky; tup National Institute of
fpilf;NfhL xl;L KwpT my;yJ Gjpa tupapy; Education <hr> National
Muk;gpg;gjw;F <br> 2. gl;bay;fs;
<br> of Education.
Xl;ilg; gad;gLj;jyhk;. fpilf; Mtznkhd;wpd; cs;slf;fq;fisj; njhlu; mikg;gpy; fhl;Ltjw;F
NfhL xd;iw mikf;f gad;gLfpd;wJ.
<hr> Xl;il gad;gLj;jyhk; %d;W gpujhd gl;bay; tiffs; cs;sd:
<br>,<hr> Mfpa ,U Xl;LfSk;  tupirg; gl;bay;
ntw;W HTML $WfshFk;.  tupirahf;fg;glhjg; gl;bay;
vdNt> ,tw;wpw;F KbT xl;Lfs;
gad;gLj;jg;gLtjpy;iy.  tiuaiwg; gl;bay;
jbg;G xl;L jbg;G tbtpy; thrfq;fisf; <b> This is BOLD Area gl;bay; ngau; ,J vd;d? cjhuzk;
BoldTag fhl;l <b> xl;L </b> tupirg; gl;bay; tiyg;gf;fj;jpy; tupirg; <ol type=“a”>
gad;gLj;jg;gLfpd;wJ. $Wfs; gLj;jpf;fhl;l Ntz;ba <li>Apple</li>
thrfq;fspd; Muk;gj;jpy; <b> midj;ijAk; ,yf;f tupirg; <li>Orange</li>
xl;Lk; Kbtpy; </b> xl;Lk; gl;bay; %yk; fhl;rpg;gLj;jyhk;.
<li>Banana</li>
gad;gLj;jg;gly; Ntz;Lk;. <li>Mango</li>
,J mNefkhf thrf ,yf;f tupirg;gl;bayplypy;
tbtikg;gpw;Nf ,Utiff; $Wfisg; ghtpf;fyhk;. </ol>
gad;gLj;jg;gLfpwJ. 1. tupirg;gl;bay; <ol> ,J
rha;T xl;L thrfq;fisr; rha;thd tbtpy; <i> This is Italic Area </i> ,yf;f tupirg;gl;baiyf;
ItalicTag fhl;Ltjw;F <i> xl;L Fwpf;Fk;.
gad;gLj;jg;gLfpwJ. thrfq;fspd; 2. gl;bay; $Wfs; xt;nthU
Muk;gj;jpy; <i> xl;Lk; Kbtpy; cUg;gbiaAk; <li> %yk;
</i> xl;Lk; gad;gLj;jg;gly; fhl;ly; Ntz;Lk;
Ntz;Lk;. tupirg;gl;baypd; Njhw;wj;ij
92 93
 ,uz;L gz;Gfs; %yk; khj;jpuk; Fwpf;fyhk;.
fl;Lg;gLj;jyhk;.
1. Start: gl;baypd; Kjy; 2. Width: gbkj;jpd; mfyj;ij
,yf;fj;ij gl%yj;jpy; my;yJ <img src= “img1.jpg”
tiuaWf;fpd;wJ. rjtPjj;jpy; fhl;lyhk;. height=150 width=175>
2. Type: gl;baypd; ,yf;f
tbtj;ij 3. Height: gbkj;jpd;; ePsj;ij
tiuaWf;fpd;wJ. gl%yj;jpy; (pixels)
cjhuzk;: 1, A, a, i, I my;yJ rjtPjj;jpy;
Nghd;wit tbtpw;Fupa fhl;lyhk;.
gz;Gg; ngWkhdq;fshFk;
tupirahf;fg;glhj tiyg;gf;fj;jpy; Vida ge;jp;apd; <ul type= “square”> Nfl;nghyp xl;L <audio src="audio/test-
gl;bay; thrfq;fspypUe;J jdpahf <li>Apple</li>
tupirg;gLj;jpf;fhl;l HTML5 Clhf tiyg; gf;fq;fspy; audio.ogg" controls
<li>Orange</li> Nfl;nghypf; Nfhg;Gfis autoplay></audio>
Ntz;batw;iw Fz;Lf;Fwp %yk;;
gl;bayhff; fhl;rpg;gLj;jyhk;. <li>Banana</li> cs;slf;ff;$ba tifapy;
<li>Mango</li> <audio> xl;L mwpKfg;gLj;jg;;gl;lJ
Fz;Lf;Fwp gl;banyhd;W </ul>
fPot
; Uk; $Wfisf; nfhz;bUf;f Nfl;nghyp xl;Lf;Fupa gz;Gfs;:
Ntz;Lk;. 1. Src: Nfl;nghyp
1. tupirahf;fg;glhj gl;bay; Nfhg;Gf;Fwpa ngWtopiaf;
$W <ul> . ,J Fz;Lf;Fwp Fwpf;fpwJ.
gl;banyhd;W 2. Controls: Nfl;nghyp
cUthf;fg;gLfpwJ ,af;ffpf;
vd;gijf; Fwpf;fpd;wJ. fl;Lg;gLj;jpfisf;
2. gl;baypd; cUg;gb fhl;rpg;gLj;jy; Njitah
xt;nthd;Wk; <li> %yk; vd;gijf; Fwpf;fpd;wJ.
Fwpf;fg;gLfpd;wJ. fl;Lg;gLj;jpfs; ,y;iy
gz;ghdJ (attribute) vd;gJ epiy kjpg;ghff;
gl;baypd; Fz;Lf;Fwp fhl;lg;gLk;.
tbtj;ijf; Fwpf;fpd;wJ.
3. Autoplay: Nfl;nghyp
cjhuzk;:- disc, square, circle jhdpaq;fpahfr; nray;gl
Muk;gpf;Fk;; vd;gijf;;
Fwpf;fpwJ.
fhnzhsp xl;L fhnzhsp nray;epiyfisf; <video
3. gy;Y}lfg; nghUl;fs; fl;Lg;gLj;jf;$ba gy gz;Gfis src="video/puppy.mp4"
HTML ypy; fhzg;gLfpd;w gy;Y}lf trjpfs;> gadu;fs; jq;fsJ <video>$W nfhz;Ls;sJ: width="400" height="300"
tiyg;gf;fq;fspy; gbkq;;fs;> fhnzhspj; Jz;lq;fs;> Nfl;nghypfs; kw;Wk; 1. Src: fhnzhsp Nfhg;Gf; controls></video>
Vida HTML Mtzq;fs; vd;gtw;iw cs;slf;Ftjw;F trjpaspf;fpd;wJ. Fwpa ngWtopiaf;
Xl;L ,J vd;d? vt;thW gad; gLj;JtJ? Fwpf;fpwJ.
gbk xl;L HTML ypy; <img> xl;bd; %yk; 2. Width, Height: fhnzhsp;
gbkq;;fs; tiuaWf;fg;gLfpd;wd. ,af;fpapd; mstpid
gbk xl;L %L xl;L ,y;yhj gl%yj;jpy; tiuaWf;fpwJ.
xl;lhFk;.
gbk xl;Lg; gz;Gfs;: 3. Controls: tiyNkNyhb
1. Src: tiyg; gf;fj;jpy; jdJ fhnzhsp
gbknkhd;iw ,aq;Fepiyf;
fhl;rpg;gLj;Jtjw;F fl;Lg;gLj;jpfis toq;f
gad;gLfpwJ. ‘src’ vd;gJ Ntz;Lk; vd;gijf;
Fwpf;fpd;wJ.
“source” vd;gjd;
FWf;fkhFk;.
4. Autoplay: fhnzhsp
jhdpaq;fpahf nray;gl
src gz;Gf;Fwpa Muk;gpf;Fk; vd;gijf;;
ngWkhdkhdJ> Fwpj;j Fwpf;fpwJ.
gbkj;jpw;;fhd <img src=
ngWtopahFk;. “C:\New_folder\img1.jpg”>
Fwpj;j gbk Nfhg;G
Nrkpf;fg;gl;Ls;s mNj
Nfhg;Giwf;Fs; Nrkpf;fg;
gl;bUf;Fkhapd; <img src= “img1.jpg”>
Nfhg;gpw;fhd ngaiu

94 95
tiyg; gf;fq;fis cUthf;Ftjw;fhd gilg;ghw;wy; fUtpfs;  Gjpa tiyg; gf;fnkhd;iw cUthf;fy;
 mwpKfk; o Mtz rhsu Nkw;gFjpapy; ,Uf;Fk; vDk; fUtpg;ngl;bapy; jiyg;G xd;iw
o “tiyg; gf;fg; gilg;ghw;wy; fUtpfs;” njhopw;wpwDs;s tiyg; gf;fq;fs;> tiyj; cs;sPL nra;aTk;. ,J kf;fs; ckJ gf;fj;ij ghu;itapLk; NghJ tiyNkNyhb
jsq;fs; kw;Wk; tiyg; gpuNahf nkd;nghUl;fs; Nghd;wtw;iw tbtikj;jy;> rhsuj;jpd; jiyg;Gg; gl;bapy;
FwpKiwaply;> cUthf;fy; vd;gtw;wpw;Fg; gad;gLj;jg; gLfpwJ. njd;gLk; jiyg;ghFk;. ckJ
o gilg;ghw;wy; fUtpfspd; fl;Gyj; njhFj;jy; mk;rkhdJ> xU tupNaDk; gf;fj;jpw;F ahuhapDk; xUtu;
Fwpaply; nra;ahky; tiyg; gf;fq;fis cUthf;f mDkjpf;fpwJ. Gj;jff;Fwpg;ig
o HTML njhFg;gpfshd Notepad, Notepad++ Nghd;wtw;iw tplTk; ,tw;wpy; ,yFthf cUthf;Fk;;NghJ mjw;fhfg;
tiyg; gf;fq;fis cUthf;fyhk;. gad;gLk; thrfkhfTk; ,J
o HTML njhFg;gpfisg; gad;gLj;jp tiyg; gf;fq;fis vOJtJ tYkpf;fjhf gad;gLfpwJ.
,Ug;gpDk;> gilg;ghw;wy; fUtpfis tplTk; Ntfk; Fiwe;jjhff; fhzg;LfpwJ. o Mtzj;ij Nrkpj;jy;:
jiyg;Gg; gf;fj;ij
o tiyg; gf;fg; gilg;ghw;wy; fUtpfspd; xUq;fpize;j tpUj;jpr; #oy; (IDE)
Nrkpf;Fk;NghJ ( gpujhd
toolbars, windows, objects, panels, inspectors, tools Nghd;wtw;iwf; nfhz;Ls;sJ. Nfhg;Giwapy; my;yJ cg
,it tiyg; gf;fq;fisf; ftu;r;rpfukhf cUthf;Ftjw;Fk;; tiyj; jsj;ij Nfhg;Giwnahd;wpy;) mjid
nraw;wpwDs;s tifapy; nray;gLj;Jtjw;Fk; gad;gLfpd;wd. ‘index.htm’ my;yJ ‘index.html’
o xUq;fpize;j tpUj;jp #oypy; (IDE) Mtz rhsuKk; gyfq;fSk; ngupa vd Nfhg;igg; ngaupLtij cWjp nra;J nfhs;sTk;.
rhsuj;jpy; ,izf;fg;gl;Ls;sd.
 gf;fj;jpd; gz;Gfs;
o Kog; gf;fj;jpw;Fk; nry;YgbahFk; gz;Gfis khw;wpaikg;gjw;F Modify vDk;
gl;bay;gl;ilapy; Page Properties vd;gijj; njupT nra;aTk;.

 Title: tiyg;gf;fj;jpd; ngau;

 Background Image: Xt;nthU gf;fj;jpd; gpd;dzpapYk; njd;glf;$ba
gbkj;jpw;fhd rhu;G my;yJ rhu;gpyh ngWtop Fwpf;fg;gly; Ntz;Lk;.
mNjNghd;W> gbknkhd;iw NkNyhb njupT nra;aTk; KbAk;.
 Background: gf;fj;jpw;fhd gpd;dzp epwj;ijj; njupT nra;ayhk;
 Text: thrfq;fspd; epwj;ij mikf;fyhk;
 Links, Visited Links, Active Links: ,izg;G> ghu;itapl;l ,izg;G> nraY}f;f
,izg;G vd;gtw;wpd; tz;zq;fisAk; khw;wyhk;
 Ntisapilntsp (workspace) apd; rpy Mf;ff;$Wfs;  Left Margin, Top Margin, Margin Width and Margin Height: tpspk;Gfis
Mf;ff;$W tpguk; nrg;gdpLtjpD}lhf gbkq;fs; kw;Wk; tiutpay;f;s vd;gtw;iwr; rupahf
Document Tab tiyg; gf;fj;jpd; ngaiuf; fhl;rpg;gLj;Jk;. epiyg; ngau; ,lg;gLj;jyhk;.
Untitled-1 Mf ,Uf;Fk;
jw;Nghija Mtzj;ij my;yJ tiyg; gf;fj;ij  Tracing Image and Image Transparency: ,r;nrg;gdply; gpd;dzp gbknkhd;iwj;
Document Window
thrfq;fs;> ml;ltizfs;> tiutpay; fs; Nghd;wtw;Wld; njupT nra;tjw;Fk; mjd; Kf;fpaj;Jtj;jpw;Nfw;f xspGF jd;ikia
fhl;rpg;gLj;Jk; rupnra;tjw;Fk; gad;gLj;jg;gLfpd;wJ.
Design view tiyg; gf;fj;ij tbtikg;gjw;fhd $Wfis xd;Wjpul;l  thrfk;
gad;gLfpwJ. o thrfkhdJ jl;lr;Rr; nra;a my;yJ NtnwhU %yj;jpypUe;J gpujpnaLf;f
Code view FwpKiwfis vOJtjw;Fk; gjpg;gp;;g;gjw;Fkhd ifKiw
Fwpaply; #oy; KbAk;.
Split view xNujpiuapy; FwpKiw Nehf;fpiaAk; tbtikg;G o jl;lr;R nra;ag;gl;l thrfj;ij tbtikg;gjw;F ,ay;Gg; gyfk; (Properties
Nehf;fpiaAk; ghu;itapLtjw;F trjaspf;fpd;wJ. panel) trjpaspf;fpd;wJ. thrfg; gl;baypy; (Text menu) thrfj; njupTfSk;
Panel groups ,it gue;jstpyhd rhu;GfisAk; fl;lisfisAk; fhzg;gLfpd;wd.
fl;Lg;gLj;Jk; xNu jiyg;gpd; fPo; xd;whf mLf;fg;gl;l
gyfq;fspd;; njhFjpahFk;
Insert Bar gbkq;fs;> ml;ltizfs;> ,izg;Gfs; kw;Wk; jpfjpfs;
Nghd;w gy;NtW nghUl;fis cs;sPL nra;jiyAk;
cUthf;FjiyAk; Nkw;nfhs;tjw;F> mbf;fb gad;gLj;Jk;
fl;lisfis tpiuthf mZFtjw;F trjpaspf;fpd;wJ.  Format: jiyg;G tiffisAk; Vida tbtikg;G ghq;FfisAk; njupT
Status Bar cUthf;fg;gLfpd;w Mtzk; njhlu;ghd Nkyjpf jftiy nra;tjw;fhFk;.
toq;FfpwJ.
 Size: vOj;JUg; gUkd;fisj; njupTr; nra;tjw;fhFk;. (1, 2, 3, Nghd;wit.)
my;yJ (+) kw;Wk; (-) gUkd;fs; (+1, +2, +3, Nghd;wit.), epiy kjpg;Gg; gUkd;
3 MFk;.
 Color: njupTr; nra;ag;gl;l thrfj;jpw;fhd tz;zj;ijj; njupT
nra;tjw;fhFk;.

96 97
  Ordered and Unordered Lists: nghUj;jkhd nghj;jhidg; gad;gLj;jp
xOq;Fg;gLj;jg;gl;l gl;bay;fisAk; (,yf;fkplg;gl;l) xOq;Fg;gLj;jg;glhj
gl;bay;fisAk; (Fz;Lf;Fwpaplg;gl;l) cUthf;Ftjw;fhFk;.
 Increase or Decrease Indent Buttons: njupT nra;ag;gl;l ge;jpapd; cl;jy;yiy
mjpfupg;gjw;Fk; Fiwg;gjw;FkhFk;.
 nghJthd nghUl;fis cl;GFj;jy;
o gbkk;
 gbkj;ij tpsf;Ftjw;fhd khw;W thrfj;ijr; Nru;g;gjw;F Alt vd;w $wpidg;
gad;gLj;j KbAk;.
 gbkj;jpd; Neu;gLj;jiy khw;wKbtJld; gbkj;ij ,izg;nghd;whfTk;
gad;gLj;j KbAk;. mj;Jld; gbkj;jpw;fhd epiyf;Fj;J kw;Wk; fpil
,ilntspiar; rPur ; n
; ra;a KbtJld; gbkj;ijr; Rw;;wp Xuf; Nfhl;bidAk;
Nru;f;f KbAk;.

98