Tamil Computer Book Web Design

5
- 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
PJ N (Hyper Text Markup Language-HTML) N

F A. e KP
, , e K P (Hyper Text
Transfer Protocol-HTTP) P
F A. G
N MF P (Protocol)
A. L Q, FO
(Message Formats), F EP
A KP H MF A
P MK P (Protocol) .
e O ( ) M K,
Y (Uniform Resource Locator - URL) P
A. , ,
, H A
A. d AP
, 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>
M F J First Web Document

W :

title
5.3.2 e (meta tag)

P KM
e A. e PH M
MJ . e F
F A.
A CKK P ,
MK F P
A. F
O F F A. ,
F O .
307
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>
MO, Refresh Reload

AO
H . C O
P . , F F
J MH
J
(Refresh / Reload) H .
<meta>
F PH OO
H .
http-equiv
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
5.3.3 E (Style Tags)

FJ E (Style)
. F PH
Q H
P E A. E F
: M (Selector) (Property).
:
<head>
<style>
h2 (color : blue)
</sttyle>
</head>
, . 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
<body text = red>
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>
</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>
J Y (Aligning Images within Text)
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>
<img dynsrc = music.dat width = 150 height = 150>

music.dat G . AJ
, <img> width height
bQA.
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>
<form method = get action = Serverscript >
<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
top.html, menu.html, home.html
Q,
<h2>TOP </h2> <!- -top.html- ->

<h2>MENU </h2> <!- - menu.html- ->
<h2>HOME </h2> <!- -home.html- ->
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,
10. _________ - <style> F ,

F A
Q H
.
11.
style _________
F, H F.
12 . _________, _________, _________ C

A.
333
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

Tamil Computer Book Web Design

Uploaded by

Document Information

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Tamil Computer Book Web Design

Uploaded by

Copyright:

Available Formats

5

PJ N (Hyper Text Markup Language-HTML) N

M F J First Web Document

5.3.2 e (meta tag)

MO, Refresh Reload

5.3.3 E (Style Tags)

<body text = red>

J Y (Aligning Images within Text)

<img dynsrc = music.dat width = 150 height = 150>

<form method = get action = Serverscript >

top.html, menu.html, home.html

<h2>TOP </h2> <!- -top.html- ->

10. _________ - <style> F ,

12 . _____, _, _____ C

You might also like