You are on page 1of 33

ð£ì‹ 5

õ¬ô õ®õ£‚è‹ - æ˜ ÜPºè‹
(Introduction To Web Design)
5.1 ÜPºè‹ (Introduction)
õ¬ô õ®õ£‚è‹ (Web Design) ñŸÁ‹
Hyper Text Markup Language)
ÝAòõŸ¬ø‚

ªý„¯â‹â™ (HTMLèŸÁ‚ªè£œ÷ «õ‡´
ªñQ™, ºîL™ àƒèœ èEŠªð£P, Þ¬íòˆ¶ì¡ âšõ£Á á죴
Aø¶ (Intracts) â¡ð¬îŠ ¹K‰¶ªè£œ÷ «õ‡´‹. Þ¬íò‹ â¡ð¶
õ¬ôò¬ñŠ¹èO¡ õ¬ôò¬ñŠð£°‹. ¬ñò‚ 膴Šð£´ ⶾ‹
A¬ìò£¶. õ¬ôò¬ñŠH™ àœ÷ ܬùˆ¶‚ 赂èÀ‹ (nodes)
å¡Á‚ªè£¡Á Gèó£ù¬õ. 嚪õ£¼ èµ¾‹ ªêŒFè¬÷ à¼õ£‚è
¾‹ ÜŠ𾋠ªðø¾‹ ÜFè£ó‹ ªðŸø¬õ. õ¬ôò¬ñŠH™
⃰‹ èEŠªð£Pèœ G¬ø‰¶œ÷ù. ¬õò MK õ¬ôJ™ (World
Wide Web-WWW)
⃰‹ Ýõíƒèœ G¬ø‰F¼Šð¬î‚ è£íô£‹.
¬õò MK õ¬ô â¡ð«î ÝõíƒèO¡ ªî£°Š¹ Ý°‹. ¬õò
MK õ¬ô ªð¼‹ð£½‹ õ¬ô (Web) â¡«ø ²¼‚èñ£è ܬö‚èŠð´
Aø¶. Þ¬íòˆF™ (Net) Þ¬íŠ¹èœ (Connection) â¡ð¶ èEŠ
ªð£PèÀ‚° Þ¬ìJô£ù õìƒè¬÷‚ (Cables) °P‚A¡ø¶. Ýù£™,
¬õò MK õ¬ôJ™ e¾¬óˆ ªî£´Š¹è«÷ (Hyper Iinks) ެ특
è÷£°‹. Þ¬íòˆF™ èEŠªð£PèÀ‚° Þ¬ì«ò îèõ™ ðKñ£Ÿø‹
ªêŒ»‹ Gó™è«÷ Þ¡¬øò õ¬ô¬ò (Web) ꣈Fòñ£‚A»œ÷ù.
Þ¬íòI¡P Þ¡¬øò õ¬ô A¬ìò£¶. õ¬ôò£ù¶ Þ¬íòˆ¬îŠ
ðòœ÷A»œ÷¶. è£óí‹, ñ‚èœ îèõ™è¬÷Š ªðÁõF™
裆´‹ ݘõ«ñ Ý°‹.
‘e¾¬ó Ýõ틒 (Hypertext Document) Hø‰î¶ 1991, ü¨¡ 12ޙ. Þ¬íòˆF™ ðA˜‰¶ ªè£œ÷Šð´‹ e¾¬ó Ýõíƒèœ
‘õ¬ôŠ ð‚èƒèœ’ (Web Pages) â¡Á ܬö‚èŠð´A¡øù. õ¬ôŠ
ð‚èƒèœ â¡ð¬õ, õ¬ô„ «ê¬õòèƒèœ (Web Servers) âùŠð´‹
èEŠªð£PèO™ «êIˆ¶ ¬õ‚èŠð´‹ «è£Š¹è÷£°‹.
õ¬ô„
«ê¬õòèƒèOL¼‰¶ õ¬ôŠ ð‚èƒè¬÷ «õ‡®Š ªðÁA¡ø
èEŠªð£Pèœ õ¬ô ¸è˜Mèœ (Web Clients) âùŠð´A¡øù. õ¬ô
¸è˜Mèœ, ‘õ¬ô àô£M’ (Web Browser) â¡Â‹ GóL¡ àîM»ì¡,
õ¬ôŠ ð‚èƒè¬÷Š 𣘬õJ´A¡øù. õ¬ôŠð‚èƒèœ, ‘e¾¬ó‚
304

°PJ´ ªñ£N’ (Hyper Text Markup Language-HTML) â¡Â‹ ªñ£N¬òŠ
ðò¡ð´ˆF à¼õ£‚èŠð´A¡øù. e¾¬ó Ýõíƒè¬÷ ðKñ£P‚
ªè£œ÷, Þ¬íò£ñ£ù¶, e¾¬óŠ ðKñ£Ÿø ªïPº¬ø (Hyper Text
Transfer Protocol-HTTP) â¡Â‹ îèõ™ ªî£ì˜¹ ªïPº¬ø¬òŠ ðò¡
ð´ˆF‚ ªè£œAø¶. å¼ ªêò™ð£´ âšõ£Á G¬ø«õŸøŠð´‹
â¡ð õN裆´‹ MFº¬ø«ò ‘ªïPº¬ø’ (Protocol) âùŠð´
Aø¶. ޡ‹ ¶™Lòñ£è„ ªê£™õªîQ™, ªêŒFèO¡ õ®õ¬ñŠ¹
èœ (Message Formats), ܄ªêŒFè¬÷ Þó‡´ èEŠªð£Pèœ îñ‚
A¬ì«ò ðKñ£P‚ ªè£œ÷Š H¡ðŸø «õ‡®ò MFº¬øèœ ÝAò
õŸP¡ º¬øò£ù MõKŠ«ð ‘ªïPº¬ø’ (Protocol) Ý°‹.
e¾¬ó ÝõíƒèO¡ (õ¬ôŠ ð‚èƒèœ) ܬñMì ºèõK,
‘å¼Yó£ù õ÷ Þìƒè£†®’ (Uniform Resource Locator - URL) â¡Á ÜPòŠ
ð´Aø¶. õ¬ôŠð‚è‹ â¡ð¶ ªð¼‹ð£½‹ à¬ó, õ¬óè¬ô,
ð™Öìè‹, Hø ð‚èƒèÀ‚è£ù ªî£´Š¹èœ ÝAòõŸ¬ø àœ÷ì‚
Aò‹. ªý„¯â‹â™ ñŸÁ‹ ªý„¯¯d ÝAòõŸP¡
îóŠð£´
è¬÷, ¬õò MK õ¬ôŠ «ðó¬ñŠ¹ (WWW Consortium) õ¬óòÁ‚Aø¶.
îèõ¬ô à¼õ£‚辋, Üî¬ù Þ¬íòˆF™ 𣘬õJ쾋, ðóõ
ô£è ãŸÁ‚ ªè£œ÷Šð†ì õ®õ¬ñŠð£è ªý„¯â‹â™ M÷ƒ°Aø¶.
Þ¬íòˆF¡ îèõ¬ôŠ 𣘬õJì IèŠ ªð£¶õ£èŠ ðò¡ð´ˆîŠ
𴋠àô£Mèœ (Browsers) ¬ñ‚«ó£ê£çŠ®¡ Þ¡ì˜ªï† â‚v
¹«÷£ó˜ ñŸÁ‹ ªï†v«èŠ «ïM‚«è†ì˜ ÝAò Þó‡´ñ£°‹.

5.2 e¾¬ó‚ °PJ´ ªñ£NJ¡ àÁŠ¹èœ
(Elements of Hyper Text Markup Language)
å¼ e¾¬ó Ýõ투î, âšõ£Á õ®õ¬ñˆ¶ˆ F¬óJ™ 裆ì
«õ‡´‹ â¡ð¬î õ¬ô àô£M‚° à혈¶‹ 冴è¬÷
(Tags)
àœ÷ì‚Aò«î e¾¬ó‚ °PJ´ ªñ£Nò£°‹. ªý„¯â‹â™
ªñ£N¬òŠ ðò¡ð´ˆF õ¬ôŠð‚èƒèœ à¼õ£‚èŠð´A¡øù.
‘«ï£†«ð´’ «ð£¡ø æ˜ âO¬ñò£ù à¬óˆ ªî£°ŠH
(Text Editor)
ܙô¶ H󡆫ðx «ð£¡ø å¼ õ¬ôŠð‚èˆ ªî£°Š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¼ 冴èÀ‚°œ ÜìƒAM´A¡ø¶.
à‡¬ñJ™ å¼ õ¬ô ÝõíˆF™ Þó‡´ ð°Fèœ àœ÷ù:
®

î¬ôŠ¹Š ð°F

®

àìŸð°F

î¬ôŠ¹Š ð°F,
<head>, </head> â¡Â‹ æ˜ Þ¬í î¬ô
冴è÷£™ ܬìò£÷‹ è£íŠð´Aø¶. àìŸð°F,
<body>, </body>
â¡Â‹ æ˜ Þ¬í àì™ å†´è÷£™ ܬìò£÷‹ è£íŠð´Aø¶.
å¼ ªý„¯â‹â™ «è£ŠH™ â‰î ÞìˆF™ «õ‡´ñ£ù£½‹
M÷‚辬ó Þ싪ðøô£‹. <!--comment> â¡ø 冴 Íô‹ M÷‚è
306

¾¬ó¬ò„ «ê˜ˆ¶‚ ªè£œ÷ô£‹. àô£M, M÷‚辬óè¬÷Š ¹ø‚
èEˆ¶M´‹. Ýõíˆ¬îŠ ð®ˆ¶Š ¹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 冮™ °PŠHìŠð´‹ Mõóƒè¬÷
àô£MJ™ è£í º®ò£¶. e å†´èœ âŠ«ð£¶«ñ õ¬ôŠð‚èˆF¡
î¬ôŠ¹Š ð°F‚°œ«÷«ò Þ싪ðÁA¡øù. õ¬ô Ýõ투î
à¼õ£‚Aò ÝCKòK¡ ªðò¬ó ÜP‰¶ ªè£œ÷¾‹, õ¬ôˆ
î÷ˆ¬î MõK‚°‹ 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 ð‡¹‚ÃÁ, ܉î ñ£PèO¡
ñFŠ¹è¬÷‚ °PŠHìŠ ðò¡ð´Aø¶.
<meta>

ªð¼‹ð£ô£ù àô£MèO™, ðòù˜ Refresh ܙô¶ Reload âù
Þ¼‚°‹ ªð£ˆî£¡è¬÷‚ AO‚ ªêŒõî¡ Íô‹ õ¬ôŠ ð‚般îŠ
¹¶ŠHˆ¶‚ªè£œ÷ º®»‹. Cô õ¬ô ÝõíƒèO™ àœ÷ì‚è‹
ܚõŠ«ð£¶ ñ£P‚ªè£‡«ì Þ¼‚°‹. âù«õ, ܊ð‚èˆF¡ ¹Fò
àœ÷ì‚èˆ¬îŠ 𣘬õJì M¼‹Hù£™ ܊ð‚èˆ¬î «ñŸªê£¡ù
º¬øJ™
(Refresh / Reload) ¹¶ŠH‚è «õ‡´‹. Ýù£™
<meta>
冮¬ùŠ ðò¡ð´ˆF‚ °PŠH†ì «ïó Þ¬ìªõOèO™ ð‚èƒè¬÷
î£ñ£è«õ ¹¶ŠHˆ¶‚ªè£œ÷„ ªêŒò º®»‹.
http-equiv
â¡Â‹
ð‡¹‚ÃÁ ÞŠ ðò¡ð´Aø¶.
ⴈ¶‚裆´:
<meta http-equiv = “ refresh” content = ”30”>

𣶠àô£MJ™ ªîK‰¶ ªè£‡®¼‚°‹ õ¬ôŠð‚è‹,
30 Mù£®èÀ‚° å¼ º¬ø î£ù£è«õ ¹¶ŠH‚èŠð´‹. °PŠH†ì
«ï󈶂°Š H¡ «õªø£¼ õ¬ôŠ ð‚舶‚°ˆ F¬êF¼Šð º®»‹.
<meta>
冮Q™ Þ õN»‡´.
ⴈ¶‚裆´:
<meta http-equiv = “refresh” content = “5; url = www.yahoo.com”>

މî <meta> 冴, 𣶠裆®‚ ªè£‡®¼‚°‹ ð‚般î
5 Mù£®èœ 裆®ò Hø°, ò£Ã õ¬ôˆî÷ˆ¶‚°ˆ F¬êF¼ŠH
M´‹. content ð‡¹‚ÃÁ, ܉î õ¬ôŠð‚èˆF¡ Îݘ♬ô
ܬìò£÷‹ 裆´‹; õ¬ôŠ ð‚èˆ¬îŠ ¹¶ŠHŠð º¡ð£è
àô£M âˆî¬ù Mù£®èœ 裈F¼‚è «õ‡´‹ â¡ð¬îˆ ªîKM‚
°‹. 裈F¼‚°‹ «ï󈶂°‹ Îݘ♽‚°‹ Þ¬ìJ™ ܬóŠ
¹œO Þ싪ðÁ‹.
308

5.3.3 ð£E å†´èœ (Style Tags)
î¬ôŠ¹Š ð°FJ™ ð£E (Style) 憴è¬÷Š ðò¡ð´ˆî º®
»‹. õ¬ô ÝõíˆF™ å¼ °PŠH†ì 冴 ⃪è™ô£‹ Þì‹
ªðŸÁœ÷«î£ ܃ªè™ô£‹ 冮¡ º¡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½‹ èÁŠ¹ GøˆF½‹ 裆´‹. Ýù£™,  °PŠH†´œ÷ ð£E
冮™, «î˜M- h2, ð‡¹ - color,
冴 ðò¡ð´ˆîŠ ð´Aø«î£
܃ªè™ô£‹, <h2> ñFŠ¹ - blue âù‚ °PŠH†´œ«÷£‹. âù«õ,
õ¬ô ÝõíˆF¡ àìŸð°FJ™ ⃪è™ô£‹ <h2>
冮œ
ܬñ»‹ àœ÷ì‚般î àô£Mò£ù¶ cô GøˆF™ 裆´‹. Ýù£™
º¡Qò™ð£ù Gø‹ èÁŠ¹ Ý°‹. å¼ °PŠH†ì «î˜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¡
ð‡¹‚ÃÁèÀ‹ ރ«è M÷‚èŠð´A¡øù.
</body>

5.4.1

body 冴

㟪èù«õ °PŠH†ìð®, õ¬ôŠð‚èˆ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ô‹ ÝAòõŸP¡ «ê˜‚¬è
ò£™
( RGB «ê˜‚¬è) ð™«õÁ Gø‚èô¬õè¬÷Š ªðøº®»‹.
ðF¡ñ ⇠0 ºî™ 255 õ¬ó, ðFùÁñ ⇠00 ºî™ FF õ¬ó
Jô£ù ⇠ñFŠ¹èœ Gøƒè¬÷‚ °P‚A¡øù. ªõ‡¬ñ GøˆF¡
ݘTH «ê˜‚¬è:
FF

FF

FF

R

G

B

ܶ«ð£ô‚ 輊¹ Gøˆ¬î‚ °P‚°‹ «ê˜‚¬è:
00

00

00

R

G

B

Gø„ «ê˜‚¬è

# 99BDFF,

ªõO˜cô Gøˆ¬î»‹,
310

#7FFFD4,

èì™ côˆ¬î»‹ °P‚°‹. àƒèÀ¬ìò àô£MJ™ ð™«õÁ ݘTH
Gø„ «ê˜‚¬èè¬÷Š ðK«êFˆ¶Š 𣼃èœ.
Cô Ü®Šð¬ìò£ù Gøƒè¬÷‚ °P‚è, ݘTH «ê˜‚¬è‚°Š
ðFô£è GøˆF¡ ªðò¬ó«ò ððò¡ð´ˆF‚ªè£œ÷ º®»‹. ⴈ¶‚
裆ì£è‚ 輊¹, CõŠ¹, ªê‰cô‹, cô‹, ð„¬ê ÝAò ªðò˜è¬÷
ݘTH ñFŠ¹èÀ‚°Š ðFô£èŠ ðò¡ð´ˆîô£‹.
<body bgcolor = blue>
...................................
</body>

«õªø£¼ º¬øJ½‹ õ¬ôŠð‚èˆF¡ H¡¹ô Gøˆ¬î
ñ£ŸPò¬ñ‚èô£‹. «î˜M¬ò àìŸð°Fò£è¾‹, Üî¡ ð‡H¬ù
background-color Ý辋 ܬñˆ¶‚ ªè£œ÷ô£‹. ݘTH «ê˜‚¬è¬ò
(ܙô¶ GøˆF¡ ªðò¬ó) <style> 冮™ °PŠHì «õ‡´‹.
ⴈ¶‚裆´:
<html>
<head>
<style>
body
{
background - color: #99BDFF
}
</style>
</head>
<body>
............
............
</body>
</html>

«ñ«ô °PŠH†ìð® <body>
冮¬ù õ¬ô àô£M ñ£ŸP
ò¬ñˆ¶‚ ªè£œÀ‹. õ¬ôŠð‚èˆF¡ H¡¹ô Gøˆ¬î ªõO˜cô
ñ£è‚ 裆´‹.
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¬ù‚
°P‚Aø¶. î¬ôŠ¹ 冴èÀ‚° º®Š¹ 冴 è†ì£òñ£èˆ «î¬õ.
º®Š¹ 冴‚°Š Hø° õ®õ¬ñŠð£ù¶ º¡Qò™ð£ù G¬ô‚°ˆ
F¼‹HM´‹.
ⴈ¶‚裆´:
<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™ ܶ °PŠHìŠð´Aø«î£ ܉î 冮¬ù ñ†´«ñ
ð£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¡ ÞìŠð‚èñ£è Yó¬ñ‚èŠð´A¡øù. ðˆF¬ò õôŠ
ð‚èñ£è, ¬ñòñ£è, ÞìŠð‚èñ£è ܙô¶ Þ¼ð‚èñ£è M¼‹Hòõ£Á
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ò º®Š¹
å†´èœ è†ì£ò‹ «î¬õ. º®Š¹ 冴 îóŠðìM™¬ôªòQ™
Üî¡ 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

â¡Á ܬñ»‹.
ð‡¹‚ ÃÁ, à¬ó¬ò‚ °PŠH†ì ⿈¶¼ õ¬è ܙô¶
⿈¶¼‚ °´‹ðˆF™ ܬñˆ¶‚ 裆ì àô£M‚° ݬíJ´‹.
⿈¶¼M¡ à¼õ Ü÷¬õˆ b˜ñ£Q‚è size ð‡¹‚ÃÁ àî¾Aø¶.
color ð‡¹‚ÃÁ, à¬ó¬ò â‰î GøˆF™ 裆ì«õ‡´‹ â¡ð¬îˆ
ªîKM‚Aø¶.
face

ðì 冴 (Image tag)

õ¬ôŠð‚èˆF™ å¼ õ¬óè¬ôŠ ðìˆ¬î„ ªê¼è <img> 冴
ðò¡ð´Aø¶. މî 冴 src ð‡¹‚ÃP¬ù è†ì£ò‹ ªðŸP¼‚è
«õ‡´ñ. src â¡ð¶ source- ä‚ °P‚Aø¶. àƒèœ õ¬ôŠð‚èˆF™
裆ì M¼‹¹‹ ðìˆF¡ Îݘ♬ô (Þ¼ŠHì ºèõK¬ò) src
ð‡¹‚ÃP¡ ñFŠð£è‚ °PŠHì«õ‡´‹.
<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 ð‡¹‚ÃÁ eˆªî£´Š¹‚°Kò Îݘ♬ô„
²†´Aø¶. <a> 冴, ðòù¬ó Ü«î ªý„¯â‹â™ ÝõíˆF™
«õªø£¼ ð°F‚° ܬöˆ¶„ ªê™½‹ ܙô¶ «õªø£¼ Îݘâ™
½‚° ܬöˆ¶„ªê™½‹. W«ö»œ÷ °Pº¬ø «õ«ø£˜ Ýõíˆ
¶‚è£ù eˆªî£´Š¬ð à¼õ£‚°Aø¶.
<a href = “http://www.yahoo.com”> Yahoo Home Page</a>

冮™ Þô‚°„ ê£÷óˆ¬î‚ °PŠH†´,
õ¬ôŠð‚般î
å¼ ¹Fò ê£÷óˆF™, è£†ì„ ªêŒò º®»‹. Þô‚°„ ê£÷óˆ¬î
-blank, -top, -self, -parent ÞõŸÁœ å¡ø£è‚ °PŠHì º®»‹.
<a>

å¼ eˆªî£´Š¹ â¡ð¶ à¬ó, ðì‹ Ü™ô¶ Þó‡´ñ «ê˜‰î
î£è Þ¼‚èô£‹. W«ö»œ÷ °Pº¬ø, tnlogo.gif â¡Â‹ ðìˆF¡
e¶ AO‚ ªêŒò ¬õˆ¶, îI›ï£´ Üó² õ¬ôˆî÷ˆF¡ ºèŠ¹Š
ð‚舶‚° ކ´„ ªê™½‹.
317

<body>
To view Government of Tamil Nadu Home Page, click the
Government’s 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‚°‹. Þ¬îŠ
ðK«ê£F‚°‹«ð£¶ àƒèœ èEŠªð£P Þ¬íòˆ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‚°ˆ
ªî£´Š¹ ãŸð´ˆî M¼ñ¹Al˜èœ. Department â¡ø î¬ôŠ¹‚°
º¡ð£è <a name = “Department”> â¡ø 冮¬ù„ ªê¼è¾‹. University â¡ø ð°FJ™, <a href = “#Department”> â¡Â‹ 冮¬ù ܬñ‚è
¾‹. # °Pfì£ù¶, «õªø£¼ «è£ŠH¬ùˆ «î®ˆîó ºòô£ñ™,
Ü«î ÝõíˆF½œ÷ Department â¡Â‹ ªî£´Š¬ð «î´ñ£Á
àô£M‚° à혈¶‹.
H¡ùE åL 冴 (Background Sound Tag)

H¡ùE åL 冴, æ˜ åL‚ «è£ŠH¬ù àô£M Þò‚°ñ£Á
318

ªêŒ»‹. src ð‡¹‚Ã¬øŠ ðò¡ð´ˆF
«è†ªð£L‚ «è£Š¹ â¶
ªõù‚ °PŠHì«õ‡´‹. «è†ªð£L‚ «è£ŠH¬ù âˆî¬ù º¬ø
Þò‚è«õ‡´‹ â¡ð¬î»‹ °PŠHì º®»‹. ãŸèˆî° «è£Š¹
õ¬èèœ, .au, .wav, .mid ÝAòù.
àƒèœ õ¬ô ÝõíˆF™ H¡ùE Þ¬ê¬òŠ ¹°ˆ¶õ,
<bgsound src = music.au loop = “infinite”>

ð‡¹‚ÃÁ, «è†ªð£L‚ «è£Š¹ âˆî¬ù º¬ø Þò‚èŠ
ðì«õ‡´‹ â¡ð¬î‚ °P‚Aø¶. infinite â¡Â‹ ñFŠ¹, Þ¬ê¬òˆ
ªî£ì˜‰¶ Þò‚°ñ£Á àô£M‚° à혈¶‹.
loop

àô£MJ™ å¼ F¬óŠð숬î Þò‚è, dynsrc
冮¬ùŠ ðò¡ð´ˆî«õ‡´‹.

ð‡¹‚ÃÁì¡

<img>

<img dynsrc = music.dat width = 150 height = 150>
music.dat â¡ð¶ å¼ Gè›ðì‚ «è£Š¹ Ý°‹. áìè Þò‚AJ¡
Üèô, àòóƒè¬÷ <img> 冮¡ width ñŸÁ‹ height ð‡¹‚ ÃÁèœ
b˜ñ£Q‚A¡øù.

5.4.5 àò˜G¬ô ªý„¯â‹â™ 冴èœ
ð†®ò™èœ (Lists)

ªý„¯â‹â™L™
ð´A¡øù.

Í¡Á õ¬èò£ù ð†®ò™èœ ðò¡ð´ˆîŠ

l

õK¬êŠð´ˆîŠðì£î ð†®ò™èœ <ul>.......</ul>

l

õK¬êŠð´ˆîŠð†ì ð†®ò™èœ <ol>.......</ol>

l

õ¬óò¬øŠ ð†®ò™èœ

<dl> ......</dl>

õK¬êŠð´ˆîŠðì£î ð†®ò™èœ (Unordered Lists)
<ul> â¡Â‹ ªî£ì‚è å†´ì¡ Þ‰îŠ ð†®ò™ ªî£ìƒ°
Aø¶. </ul> â¡Â‹ º®Š¹ å†´ì¡ ð†®ò™ º®Aø¶. <li> â¡Â‹
冮¬ùˆ ªî£ì˜‰¶ ð†®ò™ àÁŠH¬ù àœOì«õ‡´‹. <li>
冴 ð†®òL¡ æ˜ àÁŠ¬ð ܬìò£÷‹ 裆´Aø¶. 嚫õ£˜
àÁŠ¹‚°‹ å¼ <li> 冴, îQˆîQ«ò Þ싪ðø«õ‡´‹. º®Š¹
冴 </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 â¡ð¶ âˆî¬ù ªï´‚¬è
èÀ‚°Š ðóõ «õ‡´‹ â¡ð¬î‚ °P‚Aø¶. ܶ«ð£ô,
<td rowspan = x> </td>

â¡Â‹ è†ì¬÷, å¼ èô‹ x A사èèÀ‚°Š ðóMJ¼‚è„ ªêŒ»‹.
cellspacing ð‡¹‚ÃÁ, èôƒèÀ‚° Þ¬ì«òò£ù ÞìªõO¬òˆ
b˜ñ£Q‚Aø¶. padding ð‡¹‚ÃÁ, èôˆFœ Þ¼‚è«õ‡®ò
ÞìªõO¬òˆ (èô„ ²õ˜èÀ‚°‹ àœ÷ì‚舶‚°‹ Þ¬ì«ò àœ÷
ÞìªõO) b˜ñ£Q‚Aø¶. Ü÷¾èœ ð승œOèO¡ (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)

ðòùKìI¼‰¶ îèõ¬ôŠ
ªðø, ð®õƒèœ (Forms) ðò¡ð´
A¡øù. ðòù˜èœ å¼ õ¬ôˆî÷ˆF™ ðF¾ ªêŒ¶ªè£œ÷, å¼
õ¬ôˆ î÷ˆF™ àœ¸¬öò, å¼ ªêŒªð£¼¬÷ (product) M¬ô‚°
õ£ƒè, 輈¶¬ó ÜŠH¬õ‚è, ð®õƒèœ ðò¡ð´A¡øù. «î´
ªð£PèO™, «îì«õ‡®ò Fø¾„ ªê£Ÿè¬÷Š ðòùKìI¼‰¶
ªðÁõŠ ð®õƒèœ ðò¡ð´ˆîŠð´A¡øù. ð®õˆ¬î à¼õ£‚è
<form> 冴 ðò¡ð´Aø¶. ð®õƒèœ, ð™«õÁ ð®õ àÁŠ¹è¬÷‚
ªè£‡´œ÷ù. à¬óŠªð†®èœ (text boxes), «ó®«ò£ ªð£ˆî£¡èœ
(radio buttons), êK𣘊¹Š ªð†®èœ, ªð£ˆî£¡èœ, W›MK ð†®ò™èœ
«ð£¡ø¬õ ÜõŸÁœ Cô.
ð®õ‹, submit ªð£ˆî£¡ â¡Â‹ å¼ CøŠ¹ àÁŠH¬ù‚
ªè£‡´œ÷¶. Þ¶ ðòù˜  Mõóƒè¬÷„ ªêò™ð´ˆî,
ÜõŸ¬ø å¼ «ê¬õòèŠ ðò¡ð£†®ì‹ «ê˜ŠH‚°‹ ðE¬ò„
ªêŒAø¶. ð®õˆF¡ 嚫õ£˜ àÁŠ¹‚°‹ name ð‡¹‚ ÃÁÍô‹
å¼ ªðò¬ó ÜO‚è º®»‹. ðòù˜èœ à¬óŠ ªð†®èO™ ñFŠ¹
è¬÷ àœO´A¡øù˜. «ó®«ò£ ªð£ˆî£¡èœ, êK𣘊¹Š ªð†®èœ,
W›MK ð†®ò™èœ ÝAòõŸP™ «î¬õò£ùõŸ¬øˆ «î˜‰ªî´‚
A¡øù˜. ðòù˜èœ àœO´‹ ܙô¶ «î˜‰ªî´‚°‹ ñFŠ¹èœ
ÜõŸ«ø£´ ªî£ì˜¹¬ìò ð®õ àÁŠ¹èO¡ ªðò˜è«÷£´ «ê˜ˆ¶,
õ¬ô„ «ê¬õò舶‚° ÜŠH¬õ‚èŠð´A¡øù.
<form> å†´ì¡ method, action â¡Â‹ º‚Aòñ£ù ð‡¹‚ÃÁèœ
ðò¡ð´ˆîŠð´A¡øù. method ð‡¹‚ÃÁ, ð®õ àÁŠ¹èO¡ ªðò˜
èÀ‹, ñFŠ¹èÀ‹ «ê¬õò舶‚° âšõ£Á ÜŠðŠð´‹ â¡Aø
õNº¬ø¬ò‚ °PŠH´A¡øù. get õNº¬ø, ð®õ àÁŠ¹èO¡
ªðò˜è¬÷»‹, ñFŠ¹è¬÷»‹ Îݘâ™L¡ H¡«ê˜‚A¡øù. post
õNº¬ø ªðò˜è¬÷»‹, ñFŠ¹è¬÷»‹ îèõ™ ªð£†ìôƒè÷£è
ÜŠH¬õ‚A¡øù.
323

ð‡¹‚ÃÁ, ð®õ Mõóƒè¬÷„ ªêòô£‚°‹ «ê¬õòèˆF
½œ÷ Gó™ ܙô¶ à¬óGó¬ô à혈¶Aø¶. ªð£¶ ¸¬öM
Þ¬ìºè (Common Gateway Interface -CGI) GóL¡ ªðò¬ó à혈¶Aø¶.
ވî¬èò Gó™èœ «ð˜™, ü£õ£ (ªê˜šªô†), ãâvd (Active Server
Pages- ASP) «ð£¡ø ªñ£NèO™ â¿îŠð´A¡øù.
action

<form>

冮¡ ªð£¶õ£ù ªî£ìó¬ñŠ¹:

<form method = get action = “Serverscript” >

ð®õˆ«î£´ ªî£ì˜¹¬ìò <input> 冮¬ùŠ
ðò¡ð´ˆF å¼
ð®õ àÁŠ¬ð à¼õ£‚è º®»‹. name ð‡¹‚ÃÁ, input àÁŠ¹‚°
å¼ ªðò¬ó ÜO‚Aø¶. type ð‡¹‚ÃÁ input 冮¡ õ®õ¬ñŠ¬ðˆ
b˜ñ£Q‚Aø¶. 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™ °PŠHìŠð†´œ÷ «ê¬õòè G󽂰 ÜŠH
¬õ‚èŠð´‹. value â¡Â‹ ð‡¹‚ÃÁ input 冴‚° å¼ º¡Q
ò™¹ ñFŠH¬ù õöƒ°‹. މî ñ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‚°ˆ F¼ŠH ÜŠ¹‹. ܙô¶ ܋ñFŠ¹è¬÷„
«ê¬õòèˆF½œ÷ îó¾ˆî÷ˆF™ «êI‚°‹.
324

ê†ìè 冴 (Frame Tag)

ê†ìè‹ å¼ õ¬ôŠð‚èˆ¬îŠ ðô ð°Fè÷£èŠ HK‚Aø¶. åš
ªõ£¼ ð°F»‹ ªõš«õÁ ªý„¯â‹â™
ÍôŠ ð‚èƒè¬÷»‹
îQˆîQ ༜ð†¬ìè¬÷»‹ ªè£‡®¼‚°‹. F¬óJ¡ å¼ ð°F
J½œ÷ Mõóƒè¬÷ G¬ôò£è ¬õˆ¶‚ªè£‡´, Hø ð°FèO™
àœ÷ Mõóƒè¬÷ ༆®Š ð£˜‚è º®»‹. Þ¶«ð£¡ø õêF
«î¬õŠð´‹ õ¬ôˆî÷ƒèœ ê†ìè õêF¬òŠ ðò¡ð´ˆF‚ ªè£œ÷
ô£‹. ⴈ¶‚裆ì£è, î÷ˆ¬î„ ²ŸPŠ 𣘊ðKò ªî£´Š¹è¬÷
(links) å¼ ê†ìèˆF™ 裇H‚èô£‹. °PŠH†ì ªî£´Š¬ðˆ «î˜‰
ªî´ˆî¶‹ Ü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 Þ숬î
ⴈ¶‚ªè£œÀ‹ â¡ð¬î‚ °P‚Aø¶. eîI¼‚°‹ Þì‹ º¿
õ¬î»‹ A사èèœ â´ˆ¶‚ ªè£œÀ‹ â¡ð¬î ï†êˆFó‚ °P
rows = “64, *”

325

à혈¶Aø¶. «ñ«ô»œ÷ ⴈ¶‚裆®™ 64 A사èèO¡ àòó‹,
64 ð승œO (pixel) àòóˆ¬î‚ °P‚Aø¶. Üèô, àòóƒè¬÷
M¿‚裆´ Ü÷M½‹ °PŠHìô£‹. ⴈ¶‚裆´
<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«ò b˜ñ£Qˆ¶‚ ªè£œ÷ ÜÂñF‚Aø¶. º¡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ò ðò¡ð£´, Ýõíƒè¬÷Š ð¡ºè‚ 裆CèO™ 裆´õ‹.
ܬõ îQˆîQ ê£÷óƒèO™ ܬñòô£‹ ܙô¶ àœ-ê£÷óƒèO™
ܬñòô£‹. Cô Mõóƒè¬÷ ⊫𣶋 𣘬õJ™ ð´‹ð®
¬õˆ¶‚ªè£‡´ «õÁCôõŸ¬ø à¼÷„ ªêŒ¶ ܙô¶ ñ£ŸPò
¬ñˆ¶‚ è£†ì º®»‹. õ¬ôŠð‚è õ®õ¬ñŠð£÷˜èÀ‚°, ޚõêF
‘ð¡ºè‚ 裆C’ Íô‹ ꣈FòŠð´Aø¶.

5.5 ¬ñ‚«ó£ê£çŠ† çH󡆫ðx àîMªè£‡´
õ¬ôŠð‚èƒè¬÷ à¼õ£‚°î™
¬ñ‚«ó£ê£çŠ† çH󡆫ðx â¡ð¶, ¬ñ‚«ó£ê£çŠ† M‡
«ì£v ðEˆî÷ˆ¶‚è£ù õ¬ôŠ ð¬ìŠð£‚è (web authoring) ªñ¡
ªð£¼œ Ý°‹. Þ¶, àôA™ I辋 ðóõô£èŠ ðò¡ð´ˆîŠð´‹
õ¬ôŠ ð¬ìŠð£‚è ðò¡ð£´ Ý°‹.

327

5.5.1 裆Cèœ
ð‚è‚ 裆C (PageView), õ¬ôŠð‚èƒè¬÷ à¼õ£‚辋, F¼ˆF
ò¬ñ‚辋 å¼ ‘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) õ¬ôˆî÷ˆ¬î â‰î
õK¬êJ™ 𣘬õ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. çH󡆫ðx ªñ¡ªð£¼¬÷ˆ 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ƒèœ à¼õ£‚°‹
õ¬ôˆî÷ˆ¬î àƒèœ èEŠªð£PJ™
މî Þìˆ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‚ ªêŒ¶, î÷ˆ¶‚è£ù ÜP‚¬èèO¡ ð†®
ò¬ôŠ 𣘬õ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‚ ªè£œÀƒèœ.
çH󡆫ðx, îQˆîQò£ù õ£˜Š¹¼Š ð‚èƒèœ (Page templates) ðôõŸ¬ø õöƒ°Aø¶. àƒèœ õ¬ôˆî÷ˆFô ÜõŸ¬ø„
«ê˜ˆ¶‚ ªè£œ÷ º®»‹. cƒèœ 㟪èù«õ à¼õ£‚A¬õˆ¶œ÷
î÷‹ 塬øˆ Fø‚è, ð†®Š ð†¬ìJ™ File > Open > Web... «î˜‰
ªî´‚è«õ‡´‹. ð†®òL™ °PŠH†ì õ¬ô‚ «è£Š¹¬ø¬òˆ
«î˜‰ªî´ˆ¶, Open AO‚ ªêŒò¾‹. çH󡆫ðx à¼õ£‚Aò õ¬ôˆ
î÷‚ «è£Š¹¬ø‚°œ«÷«ò àƒèœ ð‚èƒèœ ܬùˆ¬î»‹ «êIˆ¶
¬õ‚è º®»‹. à¼õ£‚èŠð†ì ܬùˆ¶Š ð‚èƒèÀ‚°‹ àKò
ªý„¯â‹â™ °Pº¬øè¬÷ çH󡆫ðx î£ù£è«õ â¿F‚
ªè£œÀ‹.
5.5.3 õ¬ôŠð‚èˆF™ à¬ó¬ò„ «ê˜ˆî™
çH󡆫ðT™ à¼õ£‚èŠð´‹ å¼ õ¬ôŠð‚èˆF™ à¬ó¬ò
ܬñŠð¶, å¼ ªê£™ªêòLJ™ (Word Processor) æ˜ ÝõíˆF™
à¬ó¬ò àœk´ ªêŒõ¶ «ð£¡ø¶î£¡. â¡ø£½‹ Cô «õÁð£´èœ
àœ÷ù.
1. àœîœOò (indented) ðˆFè¬÷ à¼õ£‚è º®ò£¶.
330

2. ⿈¶¼‚èO¡ ð†®òLL¼‰î M¼‹Hò ⿈¶¼¬õˆ
«î˜‰ªî´ˆ¶‚ªè£œ÷ º®»‹. Ýù£™, ܉î ⿈¶¼ ޙô£î
èEŠªð£PJ™ àƒèœ õ¬ôŠð‚般î
cƒèœ M¼‹Hòõ£Á
F¬óJì º®ò£ñ™ «ð£èô£‹.
à¬ó¬ò õ®õ¬ñ‚èŠ ðò¡ð´‹ ð™«õÁ à¬óˆªî£°Š¹Š
ªð£ˆî£¡èœ ðŸP ރ«è M÷‚èŠð†´œ÷ù. Þ‰îŠ ªð£ˆî£¡
è¬÷Š ðò¡ð´ˆF à¬ó¬ò õ®õ¬ñ‚°‹ º¡ð£è, ܚ¾¬óŠ
ð°F¬òˆ «î˜‰ªî´ˆ¶‚ªè£œ÷ «õ‡´‹.
Þ¶ å¼ W›MK ð†®ò™. ⿈¶¼‚èO¡
ð†®ò™ MK»‹. ªõš«õÁ ⿈¶¼‚è¬÷ˆ
«î˜‰ªî´ˆ¶‚ªè£œ÷ º®»‹. cƒèœ «î˜‰ªî´ˆî ⿈¶¼ àƒèœ
èEŠªð£PJ™ êKò£è‚ 裆ìŠð´Aøî£ â¡ð¬î àô£M Íô‹
àÁFªêŒ¶ ªè£œÀƒèœ.
ªðKò A- ä‚ AO‚ ªêŒî£™, ⿈¶¼M¡ à¼õ Ü÷¬õŠ
ªðK°‹. CPò A-ä‚ AO‚ ªêŒî£™ ⿈¶¼M¡ à¼õ
Ü÷¬õ„ CP°‹.
B-

î®ñ¡; I- ꣌ªõ¿ˆ¶; U- Ü®‚«è£´ ⿈¶

«î˜‰ªî´ˆî à¬óŠð°F‚° Gø͆ì ފªð£ˆî£¡ ðò¡
ð´Aø¶. ފªð£ˆî£¬ù‚ AO‚ ªêŒî£™, ãó£÷ñ£ù GøƒèO¡
ªî£°Š¹ A¬ì‚°‹. Define colors AO‚ ªêŒ¶ ޡ‹ ðô Gøƒ
è¬÷Š ªðøº®»‹.
à¬óŠð°F¬òŠ ð‚èˆF¡ Þì¶ æóñ£è, õô¶ æóñ£è,
¬ñòŠð°FJ™ Yó¬ñ‚è Þ‰î‚ è¼Mèœ ðò¡ð´A¡øù.
⇠õK¬êJ†ì ð†®ò™, ªð£†´ õK¬êJ†ì
ð†®ò™ à¼õ£‚è ނè¼Mèœ à. à¬óŠð°F
¬ò ÞìŠð‚è‹ îœ÷¾‹, õôŠð‚è‹ îœ÷¾‹ è¼Mèœ àœ÷ù.
5.5.4 ܆ìõ¬í à¼õ£‚°î™
õ¬ôŠð‚èƒèO™ ܆ìõ¬íèœ ðôõ¬èJ™ ðò¡ð´A¡øù.
å¼ CPò ܆ìõ¬í¬ò M¬óõ£è à¼õ£‚è„ Cø‰î õN, Ü®Š
ð¬ì‚ è¼MŠð†¬ìJ™ àœ÷ 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‡´‹ îQˆîQ«ò HK‚è M¼‹Hù£™,
èôˆ¬îˆ «î˜‰ªî´ˆîH¡, ð†®Š ð†¬ìJ™ Table > Split Cell «î˜‰
ªî´‚辋.
çH󡆫ðx, «õ¬ô¬ò âO°Aø¶. ðò¡I‚è º¬øJ™
õ¬ôˆî÷ˆ¬î õ®õ¬ñ‚°‹ å¼ õNº¬ø¬ò õöƒ°Aø¶. ܶ
«ð£ô«õ, àƒèœ õ¬ô ÝõíˆF™ å¼ ðìˆ¬î„ ªê¼A, º¬ø
ò£è 心è¬ñŠð¶‹ âO‹. ð†®Š ð†¬ì‚ è†ì¬÷èœ ñŸÁ‹
è¼MŠð†¬ìŠ ªð£ˆî£¡è¬÷Š ðò¡ð´ˆF«ò ê†ìèƒè¬÷»‹,
ð®õƒè¬÷»‹ õ¬ôŠð‚èˆF™ «ê˜ˆ¶‚ªè£œ÷ º®»‹. ªý„¯
â‹â™ °Pº¬ø ⶾ‹ â¿î«õ‡®òF™¬ô. çH󡆫ðx Íô‹
àƒèœ õ¬ôˆî÷ˆ¬î õ®õ¬ñŠð„ ªêŒº¬øŠ ðJŸC Þ¼‰
 ñ†´«ñ «ð£¶‹. Góô£‚èŠ ¹ô¬ñ «î¬õJ™¬ô.

332

ðJŸC 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ò™ð£è _________
Yó¬ñ‚èŠð´A¡øù. ܆ìõ¬íˆ î¬ôŠ¹‚ <th> èôƒèœ
º¡Qò™ð£è _________ Yó¬ñ‚èŠð´A¡øù.

5.

6.

7.
8.
9.

â¡Â‹ ªðò˜„²¼‚è‹ _________ â¡ð¬î‚°P‚Aø¶.
â¡Â‹ ªðò˜„²¼‚è‹ _________ â¡ð¬î‚ °P‚Aø¶.
ªî£ìƒ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ì çH󡆫ðx
õöƒ°‹ Í¡Á õ¬èò£ù 裆Cè÷£°‹.
II

êK ܙô¶ îõÁ âù‚ °PŠH´è

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> å†´ì¡ ªî£ì˜¹¬ìò ð‡¹‚ÃÁè¬÷ MõK‚è.
ÜõŸP¡ ðò¡è¬÷ M÷‚°è.
styles)

2.

3.
4.

å¼ ð숬î eˆªî£´Šð£è ܬñŠð¶ âŠð®?

5.

<style> 冮¬ù»‹, «õÁ 冴èÀì¡ ðò¡ð´ˆîŠð´‹
style ð‡¹‚ÃP¬ù»‹ «õÁð´ˆF‚ 裆´è

6.

<font>

7.

à¬ó»ì¡ ðìƒè¬÷„ Yó¬ñŠð¶ âšõ£Á?

8.

å¼ õ¬ô Ýõ툶‚°Š H¡ùE Þ¬ê¬ò Þò‚°õ¶
âŠð®?

9.

õ¬ô àô£MJ™ å¼ F¬óŠð숬î 憮‚裆´õ¶
âšõ£Á?

10.

ªý„¯â‹â™ õöƒ°‹ ð™«õÁ õ¬èò£ù ð†®ò™èœ
â¬õ?

å†´ì¡ ðò¡ð´ˆîŠð´‹ ð‡¹‚ÃÁèœ â¬õ?

335

11.

3 A사èèœ, 3 ªï´‚¬èèœ ªè£‡ì ܆ìõ¬í¬ò
à¼õ£‚è ªý„¯â‹â™ °Pº¬ø ⿶è. ܆ìõ¬í‚°‚
è¬ó Þ¼‚è«õ‡´‹. 嚪õ£¼ èôˆF½‹ å¼ ðì‹ Þ¼‚è
«õ‡´‹.

12.

ê†ìèƒèœ ðò¡ð´ˆF àƒèÀ‚ªèù å¼ õ¬ôˆî÷‹
à¼õ£‚辋. ªê£‰î Mõóƒèœ ð‚è‹, è™Mˆ î°F,
Mõóƒèœ ð‚è‹, ªð£¿¶«ð£‚°èœ ð‚è‹, ê£î¬ùèœ ð‚è‹
ÝAò ð‚èƒè¬÷ à¼õ£‚A àKò eˆªî£´Š¹è¬÷
ܬñ‚辋.

13.

<frame>

14.

çH󡆫ðx ªî£°ŠH¬òŠ ðò¡ð´ˆF å¼ õ¬ôˆî÷ˆ¬î
à¼õ£‚°õ¶ âšõ£Á?

15.

çH󡆫ðx ªî£°ŠH¬òŠ ðò¡ð´ˆF, à¬ó, ðì‹, ܆ì
õ¬í ÝAòõŸ¬ø„ «ê˜ˆ¶‚ªè£œõ¶ âŠð®?

å†´ì¡ «ê˜ˆ¶Š ðò¡ð´ˆîŠð´‹ ð‡¹‚ÃÁè¬÷
M÷‚°è?

336