[go: up one dir, main page]

0% found this document useful (0 votes)
116 views33 pages

Web Design - or Arimugam

i75retytyiuyt
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
0% found this document useful (0 votes)
116 views33 pages

Web Design - or Arimugam

i75retytyiuyt
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 33

ð£ì‹ 5

õ¬ô õ®õ£‚è‹ - æ˜ ÜPºè‹


(Introduction To Web Design)
5.1 ÜPºè‹ (Introduction)
õ¬ô õ®õ£‚è‹ (Web Design) ñŸÁ‹ ªý„¯â‹â™ (HTML-
Hyper Text Markup Language) ÝAòõŸ¬ø‚
èŸÁ‚ªè£œ÷ «õ‡´
ªñ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

Free Tamil Ebooks at : www.TechFahim.com


°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¬ñò£Œ
Þ¼‚°‹ ªð£¼†«ì M÷‚辬óèœ «ê˜‚èŠð´A¡øù. <head>
冴 è†ì£òñ£è Þì‹ªðø «õ‡´‹ â¡ð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è¬÷


<meta>
ܬìò£÷‹ è£íŠ ðò¡ð´Aø¶. content ð‡¹‚ÃÁ, ܉î ñ£PèO¡
ñFйè¬÷‚ °PŠHìŠ ðò¡ð´Aø¶.
ªð¼‹ð£ô£ù àô£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>

<h2> 冴, î¬ôй å†ì£°‹. õ¬ôŠð‚èˆ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‚èŠðì «õ‡´‹.
<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>â¡Â‹ æ˜ Þ¬í body æ†´èœ ðò¡ð´ˆîŠð´A¡øù.
å¼ õ¬ô ÝõíˆF¡ àìŸð°F ðô ªý„¯â‹â™ 冴è¬÷‚
ªè£‡®¼‚èô£‹. Cô 冴èœ, à¬óŠð°F¬ò õ®õ¬ñ‚辋,
Cô å†´èœ ðìƒèœ, ܆ìõ¬íèœ, ð®õƒè¬÷ à†ªê¼è¾‹,
«õÁ Cô, eˆªî£´Š¹è¬÷ (Hyper Links) à¼õ£‚辋 ðò¡ð´ˆîŠ
ð´A¡øù. Ü®‚è® ðò¡ð´ˆîŠð´A¡ø 冴èÀ‹ ÜõŸP¡
ð‡¹‚ÃÁèÀ‹ ރ«è M÷‚èŠð´A¡øù.
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øˆ¬î»‹, #7FFFD4,


310
èì™ 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>
.gifܙô¶ .jpg õ¬èŠ ðìƒè¬÷Š ªð£¶õ£è àô£Mèœ
ãŸÁ‚ªè£œÀ‹. text ð‡¹‚ÃP¬ùŠ ðò¡ð´ˆF, àìŸð°F º¿
¬ñJ½ºœ÷ à¬óŠð°FJ¡ Gøˆ¬î ñ£ŸPò¬ñ‚è º®»‹.
<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
â¡Á ܬñ»‹.
face ð‡¹‚ ÃÁ, à¬ó¬ò‚ °PŠH†ì ⿈¶¼ õ¬è ܙô¶
⿈¶¼‚ °´‹ðˆF™ ܬñˆ¶‚ 裆ì àô£M‚° ݬíJ´‹.
⿈¶¼M¡ à¼õ Ü÷¬õˆ b˜ñ£Q‚è size ð‡¹‚ÃÁ àî¾Aø¶.
color ð‡¹‚ÃÁ, à¬ó¬ò â‰î GøˆF™ 裆ì«õ‡´‹ â¡ð¬îˆ
ªîKM‚Aø¶.
ðì 冴 (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>

<img>冮Q™, width ñŸÁ‹ height ð‡¹‚ ÃÁèO¡ ñFйè¬÷


ñ£ŸPò¬ñŠðî¡ Íô‹ ðìˆ¬îŠ ªðKî£è«õ£, CPî£è«õ£ õ¬ôŠ
ð‚èˆFœ è£†ì„ ªêŒò º®»‹.
à¬ó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¡ ðìñ£ù¶
<img>
à¬ó‚° ÞìŠð‚è‹ ܬñ»‹. right âù Þ¼ŠH¡ õôŠð‚è‹
ܬñ»‹. W›‚裵‹ °Pº¬ø¬ò àƒèœ àô£MJ™ ºò¡Á
𣼃èœ. ã«î‹ å¼ ð숬î ⴈ¶‚ ªè£œÀƒèœ.
<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>
<a> 冮™ Þô‚°„ ê£÷óˆ¬î‚ °PŠH†´, õ¬ôŠð‚般î
å¼ ¹Fò ê£÷óˆF™, è£†ì„ ªêŒò º®»‹. Þô‚°„ ê£÷óˆ¬î
-blank, -top, -self, -parent ÞõŸÁœ 塸£è‚ °PŠHì º®»‹.
å¼ 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”> â¡ø 冮¬ù„ ªê¼è¾‹. Univer-
sity â¡ø ð°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‚ «è£Š¹ âˆî¬ù º¬ø Þò‚èŠ


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

<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

Free Tamil Ebooks at : www.TechFahim.com


ê†ìè 冴 (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


rows = “64, *”
A사èè¬÷ ⴈ¶‚ªè£œÀ‹. Þó‡ì£õ¶ ê†ìè‹ eF Þ숬î
ⴈ¶‚ªè£œÀ‹ â¡ð¬î‚ °P‚Aø¶. eîI¼‚°‹ Þì‹ º¿
õ¬î»‹ A사èèœ â´ˆ¶‚ ªè£œÀ‹ â¡ð¬î ï†êˆFó‚ °P
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´‹.
top.html, menu.html, home.html ÝAò¬õ ªý„¯â‹â™ «è£Š¹èœ
â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¡ ð†®
Reports View -
ò¬ôŠ 𣘬õJ´ƒèœ. àƒèœ õ¬ôˆî÷ˆ¬î õ®õ¬ñ‚°‹ «ïóˆ
F™, Þ‰îŠ ð‚è‹ I辋 ðòœ÷î£è Þ¼‚°‹. ރA¼‰¶
ªè£‡«ì, ªî£ì˜ðÁ‰î ªî£´Š¹è¬÷‚ è‡ìP‰¶, êKªêŒò º®»‹.
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 tem-
plates) ðôõŸ¬ø õöƒ°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 â¡Â‹ ªðò˜„²¼‚è‹ _________ â¡ð¬î‚°P‚Aø¶.
HTML â¡Â‹ ªðò˜„²¼‚è‹ _________ â¡ð¬î‚ °P‚Aø¶.
2. å¼ õ¬ô Ýõí‹ _________ â¡Â‹ 冮Q™ ªî£ìƒA,
_________ â¡Â‹ 冮Q™ º®»‹.
3. å¼ õ¬ô ÝõíˆF¡ Þ¼ ð°Fèœ_________ð°F»‹,
_________ ð°F»‹ ݰ‹.
4. eå†´èœ âŠ«ð£¶‹ õ¬ôŠð‚èˆF¡ _________ ð°F‚
°œ«÷«ò Þ싪ðÁA¡øù.
5. õ¬ô ÝõíˆF¡ H¡¹ô Gøˆ¬î ñ£ŸPò¬ñ‚è <body>
冮Q™ _________ â¡Â‹ ð‡¹‚ ÃP¬ùŠ ðò¡ð´ˆî
«õ‡´‹.
6. õ¬ôŠð‚èˆF™ H¡¹ôŠ ðì‚裆C¬ò ܬñ‚è <body>
冮¡ _________ð‡¹‚ÃÁ ðò¡ð´Aø¶. õ¬ôŠð‚èˆF¡
àìŸð°FJ™ àœ÷ à¬ó º¿õî¡ Gøˆ¬î ñ£ŸPò¬ñ‚è
_________ â¡Â‹ ð‡¹‚ÃÁ ðò¡ð´Aø¶.
7. ªõš«õÁ ⿈¶¼Š ð‡Hò™¹èÀì¡ ªñ£ˆî‹ _________
î¬ôй å†´èœ àœ÷ù.
8. ªý„¯â‹â™ ܆ìõ¬íèœ îó¾è¬÷ _________ è O ™
心è¬ñ‚A¡øù.
9. ܆ìõ¬íˆ îó¾‚ <td> èôƒèœ º¡Qò™ð£è _________
Yó¬ñ‚èŠð´A¡øù. ܆ìõ¬íˆ î¬ôй‚ <th> èôƒèœ
º¡Qò™ð£è _________ Yó¬ñ‚èŠð´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. <img> 冮¬ùŠ ðò¡ð´ˆF õ¬ô ÝõíˆF™ H¡¹ôŠ
ð숬î ܬñ‚è º®»‹.
4. 嚪õ£¼ õ¬ô ÝõíˆF½‹ <head> 冴 è†ì£òñ£è
Þ싪ðø«õ‡´‹.
5. î¬ôйРð°FJ™ ñ†´«ñ <style> 冴 ðò¡ð´ˆîŠð´Aø¶.

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
õ¬óòÁŠð¶ âšõ£Á?
styles)
2. 10 Mù£®èÀ‚° å¼ º¬ø å¼ õ¬ôŠð‚般îˆ
î£ù£è«õ ¹¶ŠH‚è„ ªêŒõ¶ âšõ£Á? ܚõ£Á ¹¶ŠH‚è
«õ‡®ò «î¬õ â¡ù?
3. <meta> å†´ì¡ ªî£ì˜¹¬ìò ð‡¹‚ÃÁè¬÷ MõK‚è.
ÜõŸP¡ ðò¡è¬÷ M÷‚°è.
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>
M÷‚°è?
14. çH󡆫ðx ªî£°ŠH¬òŠ ðò¡ð´ˆF å¼ õ¬ôˆî÷ˆ¬î
à¼õ£‚°õ¶ âšõ£Á?
15. çH󡆫ðx ªî£°ŠH¬òŠ ðò¡ð´ˆF, à¬ó, ðì‹, ܆ì
õ¬í ÝAòõŸ¬ø„ «ê˜ˆ¶‚ªè£œõ¶ âŠð®?

336

Free Tamil Ebooks at : www.TechFahim.com

You might also like