AL ICT Seminar Series – 2021 Organized by
J’pura FOSS And FOSS.LK
tiy jstpUj;jpahf;fk;
(Web Development)
Adavnced Level ICT – Tamil Medium
Saranka Srikanthan(Undergrauate)
University of Sri Jayawardenepura
Email:-saranka29@gmail.com
T.P:-0769616897
cyfshtpa tiy(WWW)
• ,izaj;jpy; fhzg;gLk; Nrit toq;Fk; fzdpfspy;
Nrkpj;J itf;fg;gl;Ls;s xd;Wld; xd;W
,izf;fg;gl;Ls;s Hypertext Mtzq;fspd; njhFg;Ng
World Wide Web MFk;.
• ,J ,izaj;jhy; toq;fg;gLk; gpujhd Nritfspy;
xd;whFk;.
tiyj;jsk;(Web site)
• cyfshtpa tiyapy; fhzg;gLk; xt;nthU Hypertext
MtzKk; ,izaj;jsk; vdg;gLk;.
• xU ,izaj;jskhdJ gy ,izagf;fq;fis nfhz;bUf;Fk;.
• ,t; ,izagf;fq;fs;
» vOj;Jf;fs;
» glq;fs;
» Xypj;njhFg;Gf;fs;
» fhnzhspfs;
» mirt+l;lq;fs;
Nghd;wtw;iwf; nfhz;bUf;Fk;.
• ,izaj;jsj;jpy; Vida gf;fq;fSf;fhd
,izg;Gf;fis nfhz;l KjyhtJ gf;fk;
Kfg;Ggf;fk; (home page) vdg;gLk;.
• Kfg;Ggf;fj;Jld; ,izf;fg;gl;l Vida gf;fq;fs;
,izf;fg;gl;l gf;fq;fs; (linked page) vdg;gLk;.
,izajs tiffs;
• ,izajskhdJ nfhz;Ls;s cs;slf;fj;jpd; mbg;gilapy;
gpd;tUkhW tifg;gLj;jyhk;.
News Sites
BBC Tamil
News.lk
virakesari
Commercial Sites
Ikman.lk
Amazon.in
Patpat.lk
Educational Sites
Nie.lk
Doenets.lk
Social Networks
Facebook
Instragram
Linkedin
Entertainment Sites
Youtube.com
Netflix.com
Informational Sites
tiy thry;fs;(Web portals)
• NjLnghwpahdJ NjLjy; gzpf;F Nkyjpfkhf
nra;jpfs;>kpd;dQ;ry;fs;>fhyepiy vjpu;T$wy;fs;>gq;Fre;ij
epytuq;fs;>nghOJNghf;F mk;rq;fs; Nghd;w Nritfis
xd;whf toq;Fk; nghOJ mJ web portal vdg;gLk;.
» Yahoo.com
» msn.com
» Igoogle.com
URL(Uniform Resource Locator)
• xt;nthU ,izaj;jsj;ijAk; jdpj;Jtkhf
,zq;fhz;gjw;F jdpj;Jtkhf gad;gLj;jg;gLk;
Kftupfs; URL vdg;gLk;.
• Nrit toq;Fk; fzdpfspy; ,Uj;J tpUe;Njhk;Gk; fzdpfSf;F
,izajsq;fs; gupkhw;wg;gLtJ HTTP(Hyper Text Transfer
Proctocol) vdg;gLk;.
• Https –secure
• Domain name is String of text that maps to a numeric ip address, used to
access a website from client software
HTML-Hyper Text Markup Language
HTML
• ,J ,izajsq;fis tbtikg;gjw;Fupa xU
Markup language MFk;.
• ,J xU nra;epuyhf;fy; nkhopay;y.
• HTML Mtzq;fis Nrkpf;Fk; nghOJ mjd; Nfhg;G
ePl;rpahf .htm , .html gad;gLk;.
• ,iza cyhtpapy; cs;slf;fq;fis vt;thW
Njhw;wkspf;f Ntz;Lk; vd;gjid tbtikf;fNt html
gad;gLj;jgLfpd;wJ.
• ,jw;fhf milahs xl;Lf;fis gad;gLj;jg;gLk;.
milahs xl;Lf;fs; vdg;gLit Nfhz
milg;Gf;Fwpapdhy; R+og;gl;l rhtpr;nrhw;fs; MFk;.
mbg;gil HTML FwpKiw
<html>
<head>
<title>
</title>
</head>
<body>
</body>
</html>
HTML fl;likg;G tpsf;fk;
<Html>
HTML Mtzj;ij tifFwpf;fpwJ
</Html>
<Head>
jiyg;G tplaq;fs;
</Head>
<Title> jiyg;G gl;il jfty;fs;
</Title>
<Body>
gf;f cs;slf;fk;
</Body>
mbg;gil HTML fl;likg;G
<Html>
<Head>
<Title>
First Html Page
</Title>
</Head>
<Body>
Welcome
</Body>
</Html>
Title tagapDs; tof;fg;gLk; cs;sf;fg;gLk; ,iza cyhtpapd;
title bary; fhl;rpaspf;Fk;
Body tagapDs; cs;slf;fg;gLk; tplaq;fNs ,iza cyhtpapy;
fhl;rpaspf;Fk;.
Heading Tags
• tiygf;fj;jpy; jiyg;Gf;fis ,Ltjw;F
gad;gLj;jg;gLk;.
• H1-H6 tiuahd Heading tags gad;gLj;jg;gLfpd;wd.
• ,iza cyhtp jd;dpr;irahf headings f;F
Kd;Df;Fk; gpd;Df;Fk; ntw;W ,ilntspia
tof;Fk;.
Fwpg;Giufs;(Comments)
• FwpKiwapy; fhzg;gLk; nra;epuy; tupfs; njhlu;ghd
tpsf;fj;ij mjid thrpg;gtUf;F tof;Ftjw;fhf
Fwpg;Giufs; gad;gLj;jg;gLfpd;wd.
• ,iza cyhtpapy; Fwpg;Giufs;
fhl;rpgLj;jglkhl;lhJ.
• Htmly; gpd;tUkhW Fwpg;Giu ,lg;gLk;.
<!-- Write your comments here -->
ge;jp xl;L (Paragraph Tag)
• <p> xl;L ge;jpia tpgupf;fpd;wJ.
• ,J Muk;g kw;Wk; ,Wjp xl;Lf;fis nfhz;bUf;Fk;
<p>…</p>
• ge;jp xd;wpid tiuaWg;gJld; ge;jpapd; Kd;Dk;
gpd;Dk; ntw;W ,ilntspfis (White space / line
space) cUthf;Fk;.
Example :-
<p>
This paragraph
contains a lot of lines
in the source code,
but the browser
ignores it.
</p>
jdpf;Nfhl;LKwpg;G xl;L - Break Tag
• <br> - ,J xUtupapy; ,Ue;J mLj;jtupf;F
nry;tjw;F gad;gLj;jg;gLk;.
• ,J ntw;Wtupapid cs;sL
P nra;tjpy;iy.
• <br> tag MdJ closing tagid nfhz;bUg;gjpy;iy.
Horizontal Rules
• tiygf;fj;jpy; fpilj;jskhf gphpg;gpid Nkw;nfhs;s
gad;gLk;.
• tiyg;gf;fj;jpd; kPJ cs;s cs;slf;fq;fis
NtWgLj;Jfpd;wJ. my;yJ tiygf;fj;jpd; kPJ cs;s
cs;slfq;fspd; khw;wq;fis fhl;Lfpd;wJ.
• <hr> tag MdJ closing tagid nfhz;bUg;gjpy;iy.
HTML Text Formatting
• Bold Tag and Strong Tag
– xU vOj;J cs;slf;fj;jpy; rpytw;iw
Kd;Dupikg;gLj;jp fhl;l Bold xl;L
gad;gLj;jg;gLk;.
– <b>….</b> and <strong>….</strong>
• ; Italic and Empahasize Tag
– xU vOj;J cs;slf;fj;jpy; rha;thd vOj;;Jf;fis
mikf;f Italic xl;L gad;gLk;
– <i>….</i> and <em>….</em>
• Center Tag
– <center>….</center> - cs;slf;fj;ij kj;jpapy;
mikf;f ,e;j xl;L gad;gLk;.
• Underline Tag
– <u> …</u> - vOj;J cs;slf;fj;jpw;F mbf;Nfhbl
,t; xl;L gad;gLk.;
• Small Tag
– <small>….</small> - vOj;J cs;slf;fj;ij rpwpajhf
fhl;rpg;gLj;j gad;gLk.;
• Preformatted tag
– <pre>….</pre>
• Mark Tag
– xU Fwpgpl;l nrhy;iyNah my;yJ tupiaNah
Kd;Dupikg;gLj;jp(Hightlighted) fhl;l Mark tag
gad;gLk;
– <mark> ….</mark>
• Insert tag
– cs;Eiof;fg;gl;l nrhy;iyNah my;yJ tupiaNah
Kd;Dupikg;gLj;jp fhl;l <ins> tag gad;gLk;.
– Browser mdJ inserted text I underline Kyk;
fhl;rpgLj;Jk;.
• Devision tag
– <div> tag - gpupg;G (division) my;yJ gFjpapid
(section) tiuaWf;fpwJ.
• Delete tag
– mopf;fg;gl;l nrhy;iyNah my;yJ tupiaNah
Kd;Dupikg;gLj;jp fhl;l <del> tag gad;gLk;.
– browser mdJ deleted text I strike a line through
Kyk; fhl;rpgLj;Jk;.
• Strike Tag - <Strike>
• Superscript tag -<SUP>
• Subscript tag-<sub>
Attributes
• milahs xl;L njhlu;ghd Nkyjpf tpsf;fj;ij
tof;FtNj attribute MFk;.
<Body bgcolor=“Red” align=“center”>
Attributes Values
Alignment
• ge;jpiaNah > ml;ltiziaNah>glj;ijNah my;yJ
NtW khjpupiaNah Neu;gLj;j align attribute gad;gLk;.
• Neu;gLj;jy; tiffs; :-
» Right align
» Left align
» Center align
» Justify align
Left Align
Center Align Right Align
Moving Text
• <marquee> tag MdJ vOj;Jf;fSf;F mirt+l;lj;ij
toq;f gad;gLk;.
• Right to left MdJ marquee tagd; default movement Mf
fhzg;gLk;.
• Attributes Mtd :-
– Direction
» Left ,right,up ,down
– Scroll amount
» vOj;jpd; Ntfj;ij tiuaiw nra;fpwJ.
– Background color
– Loop
– Width and height
– Behavior – scrolling ,sliding, alternate
List
• List tiffs;:-
• Ordered list
• Unordered list
• Definition list
• Ordered list
– tupirgLj;jg;gl;l gl;bay;fis jahupf;f ordered list
gad;gLk;
– Ordered listMdJ <Ol> vd;w tag cld; start MFk;
– List items MdJ <li> vd;w tag cld; start MFk;.
– Default MdJ Numbers
– Attributes Mtd :-
» Type (letters,numbers)
» start
• Unordered list
– Bullets nfhz;l gl;bay;fis jahupf;f unordered list
gad;gLk;
– Unordered listMdJ <ul> vd;w tag cld; start MFk;
– List items MdJ <li> vd;w tag cld; start MFk;.
– Default MdJ disc
– Attributes Mtd :-
» Type (square,disc,circle)
• Definition list
– VNjDk; xd;iw gw;wpa tiuaiwia toq;Ftjw;F
,J gad;gLj;jg;gLk;.
» dl- Description List
» dt- Descrition term
» dd- Description data
kPapizg;Gf;fs;(Hyperlinks)
• xU ,izagf;fj;ij ,d;ndhU ,izagf;fj;Jld;
my;yJ xU ,izajsj;Jld; ,izg;gjw;F
gad;gLj;jg;gLk;.
• <a> ….</a>
• kPapizg;Gf;fis Nkw;nfhs;s Anchor tag
gad;gLj;jg;gLk;.
Attributes
• Target attribute MdJ vq;F Njhd;w Ntz;Lk; vd;gij
tiuaiw nra;fpwJ.
• Target attributef;Fupa ngWkjpfs;(values) :-
» _self - mNj rhsuj;jpy; opendhFk;
» _blank -Gjpa rhsunkhd;wpy; opendhFk;
» _parent
» _top
• Href attribute MdJ ,izf;fg;gLk; tiygf;fj;jpd;
Kftupia tiuaiw nra;fpwJ
Image
• tiygf;fnkhd;wpy; glq;fis cs;sPL nra;tjw;F
<img> tag gad;gLk;
• <img> tagdJ closing tagI nfhz;bUf;fhJ.
• <img> tagdJ ,uz;L Kf;fpa gz;Gfis nfhz;lJ.
• mitahtd:-
– Src –glj;jpw;fhd ghijia tiuaiw nra;fpwJ.
– Alt – tiygf;fnkhd;wpy; glj;ij fhl;rpgLj;j Kbahj
re;ju;gj;jpy; mg;glk; gw;wpa tpguj;ij fhl;rpgLj;j gad;gLk;
• Width and height atrributes
<img src="img_chania.jpg" alt="Flowers in Chania">
Table
• TableI tifFwpf;f <table> tag gad;gLk;.
• <tr> tagdJ tabled; epiuia tifFwpf;Fk;.
• <th> tagdJ tabled; epiufSf;Fupa jiyg;Gf;fis
toq;f gad;gLk;.
• mt; jiyg;Gf;fs; bold MfTk; center MfTk; Njhd;Wk;
• <td> tagdJ tabled; epiufspy; cs;s xt;nthU
fyq;fSf;Fupa juTfis tifFwpf;Fk.;
• Table border vDk; gz;ig toq;Fk; NghJ
• Table Caption
– ml;ltizfSf;F jiyg;gpid toq;f caption tag
gad;gLk;.
<caption> Student Details</caption>
• Height and width
– Height attribute %yk; ml;ltizapd; cauj;ij
mjpfupj;Njh Fiwj;Njh fhl;lKbAk;.
– Width attribute %yk; ml;ltizapd; mfyj;ij
mjpfupj;Njh Fiwj;Njh fhl;lKbAk;.
– px,pt,percentage Nghd;w myFfspdhy; tiuaiw
nra;aKbAk;
• Background color
– Bgcolor vd;Dk; attributeI gad;gLj;jp
ml;ltizfSf;F gpd;dzp epwj;ij toq;f KbAk;
• Colspan
– ml;ltizapy; xU fykhdJ vj;jid epuy;fSf;F
nghJthf ePl;rp milj;jpUf;f Ntz;Lk; vd;gjid
Fwpg;gjw;F ,t; attribute gad;gLk;.
• Rowspan
– xU fykhdJ vj;jid epiufSf;F nghJthf ePl;rp
milj;jpUf;f Ntz;Lk; vd;gjid Fwpg;gjw;F ,t;
attribute gad;gLk;.
Colspan
Rowspan
Form(gbtk;)
• gaduplkpUe;J juTfis ngWtjw;F gbtq;fs;
gad;gLfpd;wd.
• gbtq;fis cUthf;Ftjw;F <form> tag
gad;gLj;jgLfpd;wd.
• ,jDs; name,action,method,targetNghd;w attributes
gad;gLj;jglyhk.;
• xU formy; gpd;tUtd objectfs; fhzg;glKbAk;.
» Text box
» Password box
» Check box
» Radio button/option button
» List box
» Text area
» Submit button
» Reset button
• gbtq;fis cUthf;Ftjpy; input tagk; mjpfstpy;
gad;gLk;.
• Form tagd; attributes:-
– Action
• gbtk; rku;g;gpf;fg;gLk; NghJ nra;a Ntz;ba nraiy
action attribute tiuaWf;fpwJ.
gbtj;jpd; %yk; ngwg;gLk; juTfs; “/action_page.php”f;F
mDg;gg;gLk;
– Target attribute
• gbtj;ij rku;gpj;j gpwF ngwg;gl;l gjpiy vq;F
fhz;gpg;gJ vd;gij target attribute Fwpg;gpLfpwJ.
• target attributed; ngWkjpfshtd:
» _blank - gjpyhdJ Gjpa rhsuj;jpy;
Njhw;Wtpf;fg;gLk;.
» _self - gjpyhdJ gbtk; rku;g;gpf;fg;gLk;
rhsuj;jpNyNa Njhw;Wtpf;fg;gLk;.
» _parent - gjpyhdJ parent rl;lfj;jpy;
Njhw;Wtpf;fg;gLk;.
» _top –
» Frame name
– Method
GET and POST
– Name
• Input Type Text
– <input type="text"> - xw;iwtup juT cs;sPl;il toq;f
gad;gLk;.
– Size attribute MdJ textboxy; fhl;rpg;gLj;jf;$ba mjp$ba
tupAUf;fspd; vz;zpf;if tiuaiw nra;a gad;gLk;.
– Maxlength attribute MdJ textboxy; cs;sPL nra;af;$ba
cau;ej ; gl;r tupAUf;fspd; vz;zpf;if.
– Name attribute
• Input Type Password
– <input type="password"> - flTr;nrhy; cs;sPl;il toq;f
gad;gLk;
– Password MdJ kiwf;fg;gl;l epiyapy; Njhw;Wtpf;fg;gLk;
– asterisks or circle gad;gLj;jg;gLk;
– Name attribute
• Input Type Submit
– <input type="submit"> -gbtj;juTfis rku;g;gpg;gjw;F submit
button gad;gLk;
– Name and value attributes
• Input Type Reset
– <input type="reset"> - gbtj;juTfis mtw;wpd; default
ngWkjpfSf;F khw;wpaikf;f reset button gad;gLk;.
– Name and value attributes
• Input Type Radio
– <input type="radio"> - xd;wpw;F Nkw;gl;l optionfspy;
VNjDk; xd;iw kl;Lk; njupT nra;a radio button
gad;gLk;.
– Name and value attributes
• Input Type Checkbox
– <input type="checkbox"> - xd;wpw;F Nkw;gl;l
optionI njupT nra;a check box gad;gLk;.
Text area
• mjpfsthd vOj;Jtif juTfis cs;sPlhf ngWtjw;F text
area gad;gLk;.
• ,jw;fhf text area vd;w tag gad;gLj;jgLfpd;wJ.
<textarea name="message" rows="10" cols="30">
The cat was playing in the garden.
</textarea>
Rows – tupfspd; vz;zpf;if tiuaiw nra;fpwJ
Cols – text area tpd; mfyj;ij tiuaiw nra;fpwJ
Dropdown List
• gy ngWkhdq;fs; cs;s gl;baypy; ,Ue;J Fwpj;j xU
ngWkhdj;ij njupT nra;tjw;F dropdown list gad;gLk;.
• ,jw;fhf select vd;w tag gad;gLj;jg;gLk;.
<select name="cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="fiat">Fiat</option>
<option value="audi">Audi</option>
</select>
Field set and legend
• < fieldset >
– < fieldset > vd;w xl;ilg; gad;gLj;jpg; gbtj;juTfisf;
FOthf;Fjy;
– Form elementsI R+o boxid cUthf;Fk;.
– Disabled,form and name attributes
• <legend> vd;w xl;ilg; gad;gLj;jp FOthf;fg;gl;l
gbtj;juTfisf;F jiyg;gpl gad;gLk;.
Embed tag
• <embed> tag MdJ audioitAk; videoitAk;
tiygf;fj;jpy; cs;Eiof;f gad;gLk;.
• Attributes – src , width , height
Video Tag
• <video> tag MdJ videoit tiygf;fj;jpy; cs;Eiof;f
gad;gLk;.
<video width="320" height="240" autoplay muted>
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
Your browser does not support the video tag.
</video>
Audio tag
<audio controls>
<source src="horse.ogg" type="audio/ogg">
<source src="horse.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>
Frames –(rl;lfq;fs;)
• <frameset tag> fzdpjpiuia ntt;NtW gFjpfshf gpupf;f
• <frame> tag mt; xt;nthU gFjpapDs;Sk; vt; vt;
,izagf;fq;fs; Njhd;w Ntz;Lk; vd;gij tiuaiw nra;Ak;.
• Body tagf;F gjpyhf frameset tag gad;gLj;jg;gLk;.
• Frameset tagd; attributes
– Cols
• horizontal Mf frameI divide gz;z
– Rows
• vertical Mf frameI divide gz;z
– border
• Frame tagd; attributes
– Name
– src
Iframe tag
• The HTML <iframe> tag specifies an inline frame.
• An inline frame is used to embed another document within
the current HTML document.
<iframe src="demo_iframe.htm" height="200" width="300" title="Iframe
Example"></iframe>
HTML Entity Characters
• Less than - <
• Greater than - >
• Ampersand - &
• Copyright - ©
• Registered trade mark - ®
Cascading Style Sheets - CSS
Cascading Style Sheets(CSS)
• Cascading Style Sheets vd;gjidNa CSS vd;W
miof;fg;gLfpd;wJ.
• CSS MdJ HTML elements; vt;thW Njhd;w Ntz;Lk;
vd;gjid tiuaiw nra;fpd;wJ.
• CSS rpy Ntis kPs kPs nra;tjpid ,yFgLj;Jk;.
• CSS MdJ gpd;tUk; %d;W topfspy; HTML Mtzj;Jld;
,izf;fg;gLk;
ntspthhp CSS Mtzkhf (External Style Sheet)
cs;thHp CSS Mtzkhf (Internal Style Sheet)
cs;sfthp CSS Mf (Inline Style Sheet)
• CSS tpjp selector, properties kw;Wk; mjw;fhd ngWkhdq;fs;
(values) Mfpa %d;W $Wfisf; nfhz;Ls;sJ.
External Style Sheet
HTML Mtzj;jpw;F Gwg;ghf CSS Nfhg;gpid.css vd;w ePl;rpAld;
Nrkpj;J itj;J tpl;L html Mtzj;jpy; mjw;fhd ,izg;gpid
html Mtzj;jpy; head tagapDs; cs;s link tagapDs; toq;Fjy;.
mystyle.css
H1{color:blue;}
#hello{color:red}
Sample.html
<head>
<Link rel=“stylesheet” type=“text/css” href=“mystyle.css”>
</head>
• <link> tag
– external style sheetI html tiyj;jsj;Jld; ,izf;f
gad;gLk;
– Attributes fshtd :-
• Href - ,izf;fg;gl;l gf;fj;jpd; URL / locationI toq;f
gad;gLk;
• Rel - ,izf;fg;gl;l Mtzj;jpw;Fk; jw;Nghija
Mtzj;jpw;Fk; ,ilapyhd njhlu;ig $Wk;.
• Type- ,izf;fg;gl;l Mtzj;jpd; cs;slf;fj;jpd; tifia
$Wk;.
– Link tag MdJ xU self-closing tag
Internal Style Sheet
,q;F css MdJ html Mtzj;jpDs; vOjg;gLk;. cssia
tagapw;Nfh or class apw;Nfh or id ahfNth vOjyhk;. css ia
vOJtjw;F style vd;w tag gad;gLj;jg;gLk;.
,e;j tagapDs; type vd;w attributew;F “text/css” vd;w
ngWkhdk; toq;Fjy; Ntz;Lk;
<head>
<Style type="text/css">
H1{color:green;}
.p{font-family:arial;}
#div{color:blue;}
</style>
</head>
Inline Style Sheet
HTML Mtzj;jpy; cupa tagfspDs;Ns css tbtikg;ghdJ
,k;Kiwapd; fPo; Nkw;nfhs;sg;gLk;.
,jd; NghJ cupa tagapDs; style gz;gpid gad;gLj;jpNa css
tbtikg;Gf;fs; vOjg;gLk;.
<body style=“text-align:left;color:red;”>
CSS Nju;tpfs;(CSS Selectors)
• Element Selectors($W Nju;tpfs;)
Element selector
• ID selectors
css ,y; IDia tiuaiw nra;tjw;F “#” gad;gLj;jg;gLk;.gpd;du;
,t;thW tof;fg;gl;l idapw;fhd ngaiu html tag ,Ds; id vDk;
gz;gpd; ngWkjpahf mioj;J gad;gLj;jpnfhs;sKbAk;.
ID ia ID ia mioj;jy;
cUthf;fy;
• Class Selectors
,q;F class selectorI cUthf;Ftjw;F (.) symbol ck;
mjid njhlu;j;J class name ck; gad;gLj;jg;gLk;.
gpd;du; ,t;thW tof;fg;gl;l class apw;fhd ngaiu html tag
,Ds; class vDk; gz;gpd; ngWkjpahf mioj;J gad;gLj;jpnfhs;s
KbAk;
ClassI
cUthf;fy; ClassI mioj;jy;
• CSS Grouping Selector
.
Grouping selectors
CSS Comments (Fwpg;Giufs;)
• CSS ,y; comments mdJ vOjg;gl;l css FwpKiw gw;wpa
tpsf;fkspf;f gad;gLk;.
• Comments mdJ Browser ,y; fhl;rpg;gLj;jkhl;lhJ.
• CSS comments mdJ <style> tag,Ds; vOjg;gLk;.
CSS Color
• Css color-
– Names
– RGB values
– HEX values
– HSL values
Background color
Html elemnts cupa gpz;zdp tu;zj;ij toq;f gad;gLk;.
<p style=“background-color:blue;”>
Text color
tiygf;fj;jpy; cs;s vOj;Jf;fSf;F epwj;ij toq;f
gad;gLk;;
<h1 style=“color:Green;”>
Border color
<p style=“border-color: red;”>
CSS Backgrounds
• CSS background color
– Before slide
• CSS background image
– <body style=“background-image:url(img1.jpg);”>
• CSS background repeat
– body {
background-image: url("gradient_bg.png");
background-repeat: repeat-x;
}
values:
• repeat-x :- Vertically image MdJ repaet MFk;
• repeat-y :-horizontally image MdJ repeat MFk;
• No-repeat: image MdJ repeat MfhJ
• repeat
• CSS background position
body {
background-image: url("img_tree.png");
background-repeat: no-repeat;
background-position: right top;
}
Values:-
top (left , right, center)
middle-(eft,right,center)
bottom (left,right,center)
• CSS background attachment
body {
background-image: url("img_tree.png");
background-repeat: no-repeat;
background-position: right top;
background-attachment: scroll;
}
Values:-
Scorll
fixed
CSS Border
• CSS Border properties
– Border-style
– Border-color
– Border-radius
– Border-width
Border-Style
Border-style mdJ ve;j tifahd border fhl;rpahf Ntz;Lk;
vd;gij tiuaiw nra;fpwJ.
Values:none,hidden,dotted,dashed,solid,dashed,double,groove,etc
Border-color
Border-radius
xU html $w;wpd; vy;iyfspd; Kiyfspd; tbtj;jpd; tl;lj;jpd;
msit tiuaWf;f ,J gad;gLk;.
Values : 3px vd fhl;lg;gLk;
Border-width
Border-width vd;w property MdJ ehd;F gf;f borderfspd;
mfyj;ijAk; tiuaiw nra;fpwJ.
borderfspd; mfyj;ij
– Specific size-(cm,px,pt,in)
border-width: 5px;
border-width: 5in;
– Pre-defined values-( thin, medium,thick)
border-width: medium;
border-width: thick;
border-width: 5px 20px;
/* 5px top and bottom, 20px on the sides */
Border
vy;yh vy;iyg;gz;GfisAk; xU gpufldkhf fhl;lg;gad;gLk;.
,jd; NghJ border-width, border-style,border-color xUq;F Nru fhl;lg;gLk;.
p{border: 5px solid red;}
Short hand formaty; border-radius use gz;z KbahJ
• Border-bottom
– fPo; vy;iyapd; vy;yh gz;GfisAk; fhl;lg;gad;gLk;.
– ,jd; NghJ border-bottom-width,border-bottom-style,border-
bottom-color vd;git xUq;F Nru gad;gLk;.
– Example:-
P{ border-bottom:3px dotted blue}
CSS Font
• Font-family
– ghlj;jpw;fhd font ,id njupT nra;a gad;gLk;
– Example
– <p style=“font-family:Arial;”>
• Font-size
– Fontfspd; mstpid Fwpf;Fk;
– 100%,px , mm
– Example
– <p style=“font-size:12px;”>
• Font-weight
– Normal , bold Mfpa gz;Gfis nfhz;bUf;Fk;
• Font-style
– Normal,oblique,italic Mfpa gz;Gfis nfhz;bUf;Fk;
• Font-variant
– Normal,small caps gz;Gfis nfhz;bUf;Fk;
Example :-
<style>
p{font-family:Arial; font-size:43px;font-style:italic;font-weight:bold;
font-variant:small-caps;}
</style>
CSS text
• Color
– P{color:red}
• Direction
– ghlq;fspd; jpirapid my;yJ vOjg;gLk; jpirapid Fwpf;Fk;.
– values ltr(left to right) rtl(right to left) vd;gtw;iwf; nfhz;bUf;Fk; .
– Example :-
H1{dirction:rtl;}
• Letter-spacing
– ghlq;fspd; cs;s vOj;Jf;fSf;fpilahd ,ilntspapid Fwpf;Fk;.
– Values :- normal kw;Wk; 12px, -4px vdTk; fhl;lg;gLk;
• Line-height
– tupapDila cauj;ij tiuaiw nra;Ak;.
– Values :- normal kw;Wk; 1,4,100%,20% vdTk; fhl;lg;gLk;
• Text-align:-
– Values :- left,right,center, justify
• Text-decoration
– ghlj;jpd; kPJ Nrhlidfis Nkw;nfhs;sg; gad;gLk;.
– Values:- none, underline , over line , line-through Nghd;w gz;Gfis nfhz;bUf;Fk;
• Text-indent
– ghlj;njhFjpapd; KjyhtJ tup vt;tplj;jpy; Njhd;Wk; vd;gij tiuaiw
nra;Ak;.
– Values:- 2px,23%,1cm vd fhl;lg;gLk;.
• Text-shadow
– ghlj;jpw;F epoypid toq;f gad;gLk;.
– Values :- 1px 1px 3px #ff000 vd fhl;lg;gLk;. ,q;F 1px(nrq;Fe;J epoy; msT)
1px(fpil epoy; msT) 3px(blur msT) kw;Wk; epwj;jpidf; nfhz;L
fhzg;gLk;.
fpil epoy; msT fl;lhak; nfhLf;f Ntz;Lk;.
• Text-transform
– ghlj;ij ngupa rpwpa Mq;fpy vOj;jhf khw;w gad;gLk;.
– Values:- none , capitalize , uppercase , lowercase,initial
• Vertical-align
– epiyf;Fj;jhf html $Wfspd; align fis tiuaiw nra;tjw;F gad;gLk;.
– Values: baseline , sub , super , top , text-top , bottom , text-bottom , initial kw;Wk; 1 , 3
vdTk; 50% vdTk; fhl;lg;gLk;.
• White-space
– HTML $WfSf;fpilapy; nts;is ,ilntspfs; ifahsg;gLk; vd;gJ
,jd; %yk; tpgupf;fg;gLk;.
– Values :normal, nowrap ,pre,pre-line,pre-wrap,initial
• Word-spacing
– nrhw;fSf;fpilahd ,ilntspfis tiuaWf;fg; gad;gLk;.
– Values: normal,intial, kw;Wk; 1cm,10px,3.4em vdTk; fhl;lg;gLk;
CSS Links
• toikahd ,izg;G gpd;tUkhW fhl;lg;gLk;
– a:link{color:#ff0000;} //red
• Visited link
– a:Visited{color:#00ff00;}//green
• Rl;bapid ,izg;gpd; kPJ nfhz;L nry;Yk; NghJ (mouse over
the link)
– a:hover{color:#ff00ff;} //hotpink
• ,izg;gpid click nra;Ak; NghJ (selected link)
– a:active{color:#0000ff;} //blue
CSS Lists
• List-style-image
– Values: none,url,initial
• List-style-position
– Inside,outside,initial
• List-style-type
– Disc,circle,none,square
Example :
ul{
list-style-image:none;
list-style-position:inside;
list-style-type:circle;
}
• List-style
– vy;yh gz;Gfis xUq;F Nru gad;gLj;jy;
Example:-
ul{
list-style:none inside circle;
}
CSS Table Style
• th, td {
padding: 15px;/*padding property to add space inside the
text field.*/
text-align: left;
}
CSS Forms
• Styling Input Fields
– The example above applies to all <input> elements. If you only want to style a specific
input type, you can use attribute selectors:
• input[type=text] - will only select text fields
• input[type=password] - will only select password fields
• input[type=number] - will only select number fields
• input[type=text] {
border: 2px solid red;
border-radius: 4px;
}
• input[type=text] {
background-color: green;
color: white;
}
