Professional Documents
Culture Documents
Tamil Computer Book Web Design
Tamil Computer Book Web Design
- P
(Introduction To Web Design)
5.1 P (Introduction)
(Web Design)
Hyper Text Markup Language)
A
(HTML
Q, L EP,
A (Intracts) K .
O .
A. H (nodes)
G. F
F . H
EP G. MK J (World
Wide Web-WWW)
GF .
MK O .
MK (Web)
A. F (Net) (Connection) E
P J (Cables) PA. ,
MK J e (Hyper Iinks)
. F EP K
G (Web) FA.
IP A.
A. , F
.
e (Hypertext Document) H 1991, 12. F A e
(Web Pages) A.
, (Web Servers)
EPO I .
OL A
EP M (Web Clients) A.
M, M (Web Browser) GL M,
JA. , e
304
, MK (WWW Consortium) A.
, F J,
MA.
F J I
M (Browsers) v
v M A .
5.2 e PJ NJ
(Elements of Hyper Text Markup Language)
e , FJ
M
(Tags)
A e PJ N.
N F A.
O H
(Text Editor)
Hx H
F .
F A.
:
F F M
:
305
<html>
.............
.............
</html>
P
A.
.
<html>
. </html> .
P .
.
. , CP
F, K F, . L
CP .
, A ,
H .
.
FK :
<body>
This is my first HTML document
</body>
< b o d y > F
A,
</body> F A.
M AMA.
J F F :
F,
<head>, </head>
A. F,
<body>, </body>
A.
H F
M . <!--comment> M
306
. M, M
EM. K O
<head>
M A.
F.
5.3 F
5.3.1 (Title Tag )
F H
. <title> ,
A.
<html>
<head>
<title> First Web Document </title>
</head>
</html>
title
P (Search Engines) F
F A.
:
<meta name = Author content = Albert>
<meta name = Keywords content =books, definitions>
name , P
A. content , PO
F PH A.
<meta>
A.
:
<meta http-equiv = refresh content = 30>
MJ K ,
30 M H. PH
H FF .
<meta>
Q N.
:
<meta http-equiv = refresh content = 5; url = www.yahoo.com>
<meta> ,
5 M H, FFH
M. content , F
; H
M M F KM
. F J
O .
308
, . F
E . <h2> Q
H P. <h2>
H F M
F GF . , PH E
, M- h2, - color,
A
, <h2> F - blue PH. ,
F FJ <h2>
M c GF .
Q G . PH M
. O
HK .
<h2>
<style>
h2 { color : red;
font - size : 12pt:
font - family : arial;
}
</style>
, <h2> E I
P.
309
5.4 F
(Body Section)
F F <body>,
body A.
F F
. C , F ,
C , , ,
C, e (Hyper Links)
A. A P
MA.
</body>
5.4.1
body
PH, F F
body
A.
, O
. body
. F H G P
bgcolor A.
< body bgcolor = #FFFFFF>
</body>
P
(code) F H G
J . F bgcolor #FFFFFF
F . , G P
F . C, , c AP
( RGB ) G .
F 0 255 , F 00 FF
J F G PA. GF
TH :
FF
FF
FF
G P :
00
00
00
# 99BDFF,
Oc G,
310
#7FFFD4,
c P. MJ TH
G KF .
C G P, TH
F GF F .
, C, c, c, A
TH F F .
<body bgcolor = blue>
...................................
</body>
J F H G
P. M F, H
background-color . TH
( GF ) <style> PH .
:
<html>
<head>
<style>
body
{
background - color: #99BDFF
}
</style>
</head>
<body>
............
............
</body>
</html>
PH <body>
M P
. F H G Oc
.
311
F H (image)
, background F .
<body background = tnlogo.gif>
.jpg M
. text P F, F
J FJ G P .
.gif
Q G .
H C G P .
5.4.2 (Heading tags)
FJ F head
L .
Q
.
(Font) H <h1>, <h2>, <h3>,
<h4>, <h5>, <h6>... .
<h1> J FJ -G H
PA. .
H Q G
FHM.
:
<html>
<head>
<title>Heading Tags</title>
</head>
<body bgcolor=#99BDFF>
<h1>Computer</h1><p>
<h2>Computer</h2><p>
<h3>Computer</h3><p>
<h4>Computer</h4><p>
<h5>Computer</h5><p>
<h6>Computer</h6><p>
</body>
</html>
312
, <p> F
. P F 5.4.3- M.
O H K W
F C .
h1 h2 h3 h4 h5 h6
<h1>- I K. h6 -
I CP. h2 G , h3
G. H. F H
align A.
<h1 align = center> Computer </h1>
C style P
F, O Q H P
. style ,
Q PHA
F.
:
<h2 style = color : pink> This text will be rendered in pink </h2>
, <h2> O F
G c O.
313
5.4.3. H
J
:
<tagname attribute = value> Element Content </tagname>
C W M
:
F (Paragraph tag)
F <p> F A. F
KJ F F A. F Q
F YA. F
, , MH
Y align A.
<p align = center> Computer </p>
P (Break Tag)
P <br> K A.
P . M
A. <br>
P.
, , : (Bold, Underline &ItalicsTags)
<b> O .
<u> J . <i>
O . K
. MQ
M F F .
A M
(Center & Horizontal Ruler tags)
, H F
<center> A. </center>
F . A
M <hr> A .
314
:
<font face = arial size = 4pt color = #000000> 4pt font size
rendered in arial type in black color </font>
Of,
4pt font size rendered in arial type in black color
.
, PH
F M J.
M bQ size A.
color , GF
KMA.
face
(Image tag)
F <img>
A. src P P
. src source- PA. F
M F (H K) src
P F PH.
<img src = tnlogo.gif>
F width
height A.
<img src = tnlogo.gif width = 100 height = 120>
Q, width height O F
P K, CP
F .
<img>
F .
Q, F W F .
<img src=tnlogo.gif>Government of Tamil Nadu Emblem
<img> :
315
H Q FJ
. FJ F FJ
W P F
Of :
<img src = tnlogo.gif align = middle> Government of Tamil Nadu Emblem
<P>
<img src = tnlogo.gif align = top>Government of Tamil Nadu Emblem
316
align left H
. right H
. W P MJ
. .
<img>
<html>
<body>
<p>
<img src =tnlogo.gif align =left width=100"
height=50">
The align attribute of the image is set to left. The image will
go to the left of this text. </p>
<br>
<p>
<img src =tnlogo.gif align =right width=100"
height=50">
The align attribute of the image is set to right. The image
will go to the right of this text.
</p>
</body>
</html>
(Anchor Tag)
e (hyperlink)
<a> A. <a>, </a> A
A AO , href
P
M F. href eK
A. <a> , F
F
. W P
e A.
<a href = http://www.yahoo.com> Yahoo Home Page</a>
PH,
F F, .
-blank, -top, -self, -parent PH .
<a>
e ,
. W P, tnlogo.gif F
e AO , I F
.
317
<body>
To view Government of Tamil Nadu Home Page, click the
Governments logo.
<p>
<a href = http://www.tn.gov.in > <img src=tnlogo.gif></a>
</p>
</body>
MJ P .
P I C F e ,
. AO
I C MJ O.
KF EP F
.
F F
. L, F
F (Pointer) F
. <a> name A.
:
<a name = Department>
Q,
<a href = #Department>
F, F
.
, F University
FJL F Department F
MAl. Department
<a name = Department> . University FJ, <a href = #Department>
. # Pf, H ,
F Department
M .
HE L (Background Sound Tag)
HE L , L H M
318
. src F
L
PH. L H
PH .
, .au, .wav, .mid A.
F HE ,
<bgsound src = music.au loop = infinite>
, L
PA. infinite F,
M .
loop
MJ F , dynsrc
.
<img>
5.4.5 G
(Lists)
L
A.
K <ul>.......</ul>
K <ol>.......</ol>
<dl> ......</dl>
K (Unordered Lists)
<ul>
A. </ul> A. <li>
H O. <li>
L A.
<li> , QQ .
</li> . :
319
<ul>
<li> Name
<li> Phone
<li> ID
</ul>
MJ
K:
l Name
l Phone
l ID
K (Ordered Lists)
. <ul>
F <ol> .
<ol>
<li> Primary School
<li> Elementary school
<li> High School
</ol>
Of :
1. Primary School
2. Elementary School
3. High School
(Definition Lists)
<dl> A </dl>
A. , (Bullets) K P
A. <dt>
(definition term) <dd>
- (definition - definition) .
H W K O (indented)
.
:
320
<dl>
<dt> Protocol : </dt>
<dd> A system of rules and procedures governing communications between two devices.
</dd> <p>
<dt> Pretty Good Privacy: </dt>
<dd> It is a program that encrypts files </dd>
</dl>
P M W
:
Protocol:
A System of rules and procedures governing communications between two devices.
Pretty Good Privacy:
It is a program that encrypts files
(Table Tag)
<table> F, F
. J F A
A (Table Row) <tr>
A. A P, J
P F
(Table Header) <th> A. A P
, F O F ,
(Table Data) <td> A. J
P
border A.
G bgcolor A. c M
F J A
.
, MJ
Q,
<td colspan = x> </td>
321
. x
PA. ,
<td rowspan = x> </td>
, x A MJ .
cellspacing , O
bQA. padding , F
O (
O) bQA. OO (pixels) E
.
:
<table border=2 cellspacing=10 cellpadding=10>
<tr>
<td width=50 align=center>Rama</td>
<td width=50 align=center>Sita</td>
</tr>
</table>
FJ Of :
O K,
F
:
<html>
<body>
<table border=2>
<tr><th>Roll No</th><th>Name</th></tr>
<tr><td>1001</td><td>Rama</td></tr>
<tr><td>1002</td><td>Sita</td></tr>
</table>
</body>
</html>
322
,
<th>, </th>A F
. Of .
(Form Tag)
KI
, (Forms)
A. F F ,
F , (product) M
, H, A.
PO, F KI
A.
<form> A. ,
. (text boxes),
(radio buttons), K , , WMK
C.
, submit C H
. M ,
H E
A. F name
O . O F
OA. , K ,
WMK AP
A. O F
O ,
HA.
<form> method, action A
A. method , O
, F A
N PHA. get N, O
, F L HA. post
N , F
HA.
323
, M F
G G A. M
(Common Gateway Interface -CGI) GL A.
G , (), vd (Active Server
Pages- ASP) NO A.
action
<form>
<input>
F
. name , input
OA. type input
bQA. text, password, hidden. checkbox, submit, reset, file, image
type- O C. type P F text
H, . hidden
, MJ
. submit , Submit .
AO O
F <form>
action P PH G H
. value input Q
FH . F, MJ
.
FK P :
<form method=post action=server side program name>
<input type=text name=empname value=rama>
<input type=text name=age value=23>
<input type=submit>
</form>
Q F
. submit
F, Q F G
. G, F F
M M FH . F
F F I.
324
(Frame Tag)
F HKA.
F
QQ . FJ F
J M G , H FO
M . F
F F
. , P K
(links) F H. PH
K F
. F M, F
.
.
<frameset>....... </frameset> A
A. <frameset> , P
(modifiers) . , F A, O
P rows, cols .
F .
<body> <frameset> .
<html>
<frameset rows=64,*>
<frame src=top.html name=banner scrolling=no
noresize>
<frameset cols=150,*>
<frame src=menu.html name=contents>
<frame src=home.html name=main>
</frameset>
</frameset>
</html>
, F 64
A . eF
PA. eI
A F P
rows = 64, *
325
A. 64 AO ,
64 O (pixel) PA. ,
M M PH.
<frameset rows = 30%, 60%>
, F A
A. A ( ) top.html
H G.
F name P F
. ,
H I M .
src ,
A. scrolling , F
. yes|no|auto A F .
yes F, F
M. auto F, ,
M bQ FA. Q
F auto . noresize , F P
, F. G
M.
A
Q,
K,
.
326
HK, A
HK. O
A , CO .
QQ O -O
. C M J
C P
. , F
C FA.
5.5 Hx M
Hx , M
v E (web authoring)
. , A I
.
327
5.5.1 C
C (PageView), , FF
MCM (WYSIWYG- What You See Is What You Get)
A. C (Folders View),
F
L. I O
C . P C (Reports View) F
O, O C
. N C (Navigation View)
KJ J L.
J K P N.
e C (Hyperlinks View), F
e A. E C (Tasks
View), F, G E
k F F A.
328
5.5.2 N
1. Hx F. J
File > New > Web... . M
J (Standard toolbar) New CP W
A P AO , Web .
2.
c M
. , O (One Page Web)
. H F
. http:// J
M O. c
EPJ
F I
J Al.
H, MK J (WWW)
J J F .
3. OK AO , H
x A F. Folder View AO
, (default.htm)
. images J,
(graphics) O
329
(photos)
I .
AO , PO
J.
F, I . A
, P, K .
Reports View -
Navigation View- AO F N;
(navigation layout) J.
() L. G
,
A
J .
HyperLink View, O
A.
I . Task
View- G (Completed) PJ. ,
P F Folders View F .
Hx, QQ (Page templates) A. F
. c A
F, J File > Open > Web...
. L PH
, Open AO . Hx A
I
. K
P Hx F
.
5.5.3 F
HT F
, LJ (Word Processor) F
k . C
.
1. O (indented) F .
330
2. O LL MH
. ,
EPJ
c MH
FJ .
P M.
F ,
F .
WMK . O
MK.
. c
EPJ K A M
F .
K A- AO , M
K. CP A- AO M
CP.
B-
; I- ; U-
F G
A. AO , GO
A. Define colors AO G
.
F F , ,
FJ Y M A.
KJ , KJ
M . F
, M .
5.5.4
O J A.
CP M C N,
MJ Table AO
. AO H, O
P F,
J O.
, e
AO .
331
F ,
2 A 2 W
F O.
P
a J P J
Table > Properties > Table .
a O P
J Table > Properties > Cell .
AO N J Cell Properties .
P L O
.
a
.
Table > Merge Cells
a F e QQ HK MH,
H, J Table > Split Cell
.
Hx, OA. I J
N A.
, F A,
O.
M F ,
F .
P F. Hx
JC
. G J.
332
JC M
I. OJ G
1.
HTTP
HTML
2.
_________ Q
_________ Q .
3.
F F_________F,
_________ F .
4.
e F _________ F
A.
F H G P <body>
Q _________ P
.
F H C <body>
_________ A. F
FJ G P
_________ A.
H _________
.
_________ O
A.
<td> Q _________
YA. <th>
Q _________ YA.
5.
6.
7.
8.
9.
_________ PA.
_________ PA.
A,
style _________
F, H F.
13. F
P _________
_________ A <img>
.
14. _________ (target),
F M F . _________
, F F.
15. F <frameset>
_________ .
16. _________
A.
17. O
A. :_________,
_________, _________
18. O _________
A. , _________
A.
19. M A
: _________ _________
2 0 . _________C, _________ C,_________ C
A J Hx
C.
II
K PH
1.
N v x .
2.
F <body> <frameset>
A .
3.
F F H
.
4.
F <head>
.
5.
FJ <style> A.
<img>
334
6.
M
K www P
A.
7.
H P
.
8.
L
.
9.
O
I.
10. P F
<meta> .
III. M
1.
M E (global
?
10 M
H ? H
?
<meta> MK.
P M.
styles)
2.
3.
4.
e ?
5.
<style> ,
style P F
6.
<font>
7.
Y ?
8.
HE
?
9.
MJ F
?
10.
335
11.
3 A, 3
P .
. F
.
12.
F
. M , M F,
M , ,
A A K e
.
13.
<frame>
14.
Hx H F
?
15.
Hx H F, , ,
A ?
M?
336