ð£ì 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) °PA¡ø¶. Ýù£,
¬õò 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 å® °PHìð´ 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¹è¬÷ °PHì ðò¡ð´Aø¶.
ªð¼ð£ô£ù àô£MèO, ðòù Refresh Üô¶ Reload âù
Þ¼° ªð£î£¡è¬÷ AO ªêõî¡ Íô õ¬ô ðè¬î
¹¶H¶ªè£÷ º®». Cô õ¬ô ÝõíèO à÷ìè
Üõ«ð£¶ ñ£Pªè£«ì Þ¼°. âù«õ, ÜðèF¡ ¹Fò
à÷ìè¬î ð£¬õJì M¼Hù£ Üðè¬î «ñªê£¡ù
º¬øJ (Refresh / Reload) ¹¶Hè «õ´. Ýù£ <meta>
宬ù ðò¡ð´F °PHì «ïó Þ¬ìªõOèO ðèè¬÷
î£ñ£è«õ ¹¶H¶ªè£÷ ªêò º®». http-equiv â¡Â
ð¹ÃÁ Þî° ðò¡ð´Aø¶.
ⴶ裴:
<meta http-equiv = refresh content = 30>
î«ð£¶ àô£MJ ªîK¶ ªè£®¼° õ¬ôðè,
30 Mù£®èÀ° å¼ º¬ø î£ù£è«õ ¹¶Hèð´. °PHì
«ïó¶° 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 å¼ °PHì å´ âªèô£ Þì
ªðÁ÷«î£ ܪèô£ 审 º¡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½ 裴. Ýù£, ï£ °PH´÷ ð£E
å®, «îM- h2, ð¹ - color, å´ ðò¡ð´î ð´Aø«î£
ܪèô£, <h2> ñF¹ - blue âù °PH´«÷£. âù«õ,
õ¬ô ÝõíF¡ àìð°FJ âªèô£ <h2> å®Â
ܬñ» à÷ìè¬î àô£Mò£ù¶ cô GøF 裴. Ýù£
º¡Qòð£ù Gø èÁ¹ ݰ. å¼ °PHì «î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 å´
ãªèù«õ °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ô ÝAòõP¡ «ê¬è
ò£ ( RGB «ê¬è) ð«õÁ Gøèô¬õè¬÷ ªðøº®».
ðF¡ñ â 0 ºî 255 õ¬ó, ðFùÁñ â 00 ºî FF õ¬ó
Jô£ù â ñF¹è Gøè¬÷ °PA¡øù. ªõ¬ñ GøF¡
ÝTH «ê¬è:
FF FF FF
R G B
ܶ«ð£ô è¼¹ Gø¬î °P° «ê¬è:
00 00 00
R G B
Gø «ê¬è # 99BDFF, ªõOcô 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> å® °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>
.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¬ù
°PAø¶. î¬ô¹ å´èÀ° º®¹ å´ èì£òñ£è «î¬õ.
º®¹ å´° 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 ܶ °PHìð´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 ð¹ ÃÁ, à¬ó¬ò °PHì â¿¶¼ õ¬è Üô¶
â¿¶¼ °´ðF ܬñ¶ è£ì àô£M° ݬíJ´.
â¿¶¼M¡ à¼õ Ü÷¬õ bñ£Qè size ð¹ÃÁ àî¾Aø¶.
color ð¹ÃÁ, à¬ó¬ò âî GøF è£ì«õ´ â¡ð¬î
ªîKMAø¶.
ðì å´ (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>
<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> å® Þô° ê£÷ó¬î °PH´, õ¬ôðè¬î
å¼ ¹Fò ê£÷óF, è£ì ªêò º®». Þô° ê£÷ó¬î
-blank, -top, -self, -parent ÞõÁ 塸£è °PHì º®».
å¼ 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°. Þ¬î
ð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 «è£¹ â¶
ªõù °PHì«õ´. «èªð£L «è£H¬ù âî¬ù º¬ø
Þòè«õ´ â¡ð¬î» °PHì º®». ãèî° «è£¹
õ¬èè, .au, .wav, .mid ÝAòù.
àè õ¬ô ÝõíF H¡ùE Þ¬ê¬ò ¹°¶õî°,
<bgsound src = music.au loop = infinite>
ð¹ÃÁ, «èªð£L «è£¹ âî¬ù º¬ø Þòè
loop
ðì«õ´ â¡ð¬î °PAø¶. infinite â¡Â ñF¹, Þ¬ê¬ò
ªî£ì¶ Þò°ñ£Á àô£M° àí¶.
àô£MJ å¼ F¬óðì¬î Þòè, dynsrc ð¹ÃÁì¡
<img> 宬ù ðò¡ð´î«õ´.
<img dynsrc = music.dat width = 150 height = 150>
music.dat â¡ð¶ å¼ Gèðì «è£¹ ݰ. áìè ÞòAJ¡
Üèô, àòóè¬÷ <img> 审 width ñÁ height ð¹ ÃÁè
bñ£QA¡øù.
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 â¡ð¶ âî¬ù ªï´¬è
èÀ° ðóõ «õ´ â¡ð¬î °PAø¶. ܶ«ð£ô,
<td rowspan = x> </td>
â¡Â èì¬÷, å¼ èô x Aì¬èèÀ° ðóMJ¼è ªê».
cellspacing ð¹ÃÁ, èôèÀ° Þ¬ì«òò£ù ÞìªõO¬ò
bñ£QAø¶. padding ð¹ÃÁ, èôF ޼è«õ®ò
ÞìªõO¬ò (èô ²õèÀ° à÷ìè¶° Þ¬ì«ò à÷
ÞìªõO) bñ£QAø¶. Ü÷¾è ðì¹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𣹠ªð®è, ªð£î£¡è, WMK ð®òè
«ð£¡ø¬õ ÜõÁ Cô.
ð®õ, submit ªð£î£¡ â¡Â å¼ Cø¹ àÁH¬ù
ªè£´÷¶. Þ¶ ðòù î¼ Mõóè¬÷ ªêòð´î,
Üõ¬ø å¼ «ê¬õòè ðò¡ð£®ì «êH° ðE¬ò
ªêAø¶. ð®õF¡ å«õ£ àÁ¹° name ð¹ ÃÁÍô
å¼ ªðò¬ó ÜOè º®». ðòùè à¬ó ªð®èO ñF¹
è¬÷ àO´A¡øù. «ó®«ò£ ªð£î£¡è, êK𣹠ªð®è,
WMK ð®òè ÝAòõP «î¬õò£ùõ¬ø «îªî´
A¡øù. ðòùè àO´ Üô¶ «îªî´° ñF¹è
Üõ«ø£´ ªî£ì¹¬ìò ð®õ àÁ¹èO¡ ªðòè«÷£´ «ê¶,
õ¬ô «ê¬õòè¶° ÜÂH¬õèð´A¡øù.
<form> å´ì¡ method, action â¡Â ºAòñ£ù ð¹ÃÁè
ðò¡ð´îð´A¡øù. method ð¹ÃÁ, ð®õ àÁ¹èO¡ ªðò
èÀ, ñF¹èÀ «ê¬õòè¶° âõ£Á ÜÂðð´ â¡Aø
õNº¬ø¬ò °PH´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 àÁ¹°
å¼ ªðò¬ó ÜOAø¶. type ð¹ÃÁ input 审 õ®õ¬ñ¬ð
bñ£QAø¶. 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° F¼H ܹ. Üô¶ ÜñF¹è¬÷
«ê¬õòèF½÷ îó¾î÷F «êI°.
324
Free Tamil Ebooks at : www.TechFahim.com
êìè å´ (Frame Tag)
êìè å¼ õ¬ôðè¬î ðô ð°Fè÷£è HKAø¶. å
ªõ£¼ ð°F» ªõ«õÁ ªý¯ââ Íô ðèè¬÷»
îQîQ à¼ð¬ìè¬÷» ªè£®¼°. F¬óJ¡ å¼ ð°F
J½÷ Mõóè¬÷ G¬ôò£è ¬õ¶ªè£´, Hø ð°FèO
à÷ 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
rows = 64, *
Aì¬èè¬÷ â´¶ªè£À. Þóì£õ¶ êìè eF Þì¬î
â´¶ªè£À â¡ð¬î °PAø¶. eîI¼° Þì º¿
õ¬î» Aì¬èè â´¶ ªè£À â¡ð¬î ïêFó °P
325
àí¶Aø¶. «ñ«ô»÷ ⴶ裮 64 Aì¬èèO¡ àòó,
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«ò bñ£Q¶ ªè£÷ ÜÂñFAø¶. º¡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 °PHì õ¬ô «è£¹¬ø¬ò
«îªî´¶, 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¬ò «îªî´¶ªè£÷ «õ´.
Þ¶ å¼ WMK ð®ò. â¿¶¼è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 Íô
àè õ¬ôî÷¬î õ®õ¬ñðî° ªêº¬ø ðJC Þ¼
î£ ñ´«ñ «ð£¶. Góô£è ¹ô¬ñ «î¬õJ¬ô.
332
ðJC Mù£è
I. ¹OJì Þìè¬÷ Gó¹è
1. HTTP â¡Â ªðò²¼è _________ â¡ð¬î°PAø¶.
HTML â¡Â ªðò²¼è _________ â¡ð¬î °PAø¶.
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 Üô¶ îõÁ âù °PH´è
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