Tamil Computer Book - Web Design

ð£ì 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) â¡Á Ü¬öèðÁ¡øù. õ¬ô
ðèè â¡ð¬õ, õ¬ô «ê¬õòèè (Web Servers) âùð´
èEªð£PèO «êI¶ ¬õèð´ «è£¹è÷£°. õ¬ô
«ê¬õòèèOL¼¶ õ¬ô ðèè¬÷ «õ® ªðÁA¡ø
èEªð£Pè õ¬ô ¸èMè (Web Clients) âùðÁ¡øù. õ¬ô
¸èMè, õ¬ô àô£M (Web Browser) â¡Â GóL¡ àîM»ì¡,
õ¬ô ðèè¬÷ ð£¬õJÁ¡øù. õ¬ôðèè, e¾¬ó
304
°PJ´ ªñ£N (Hyper Text Markup Language-HTML) â¡Â ªñ£N¬ò
ðò¡ð´F à¼õ£èðÁ¡øù. 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ò
ðÁø¶. õ¬ôðè â¡ð¶ ªð¼ð£½ à¬ó, õ¬óè¬ô,
ðÖìè, 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 õ¬ôðèè à¼õ£èðÁ¡øù.
«ï£«ð´ «ð£¡ø æ âO¬ñò£ù à¬ó ªî£°H (Text Editor)
Üô¶ Hó¡«ðx «ð£¡ø å¼ õ¬ôðè ªî£°H¬ò ðò¡
ð´F õ¬ôðèè¬÷ à¼õ£è º®». ªý¯ââ å´
è¬÷ ðò¡ð´F ªý¯ââ àÁ¹è õ¬óòÁèðÁ¡øù.
â´¶è£´:
å¼ õ¬ôðèF¡ ªî£ìèF½ º®M½ Þìªðø

«õ®ò å´è:
305
<html>
.............
.............
</html>
ªý¯ââ å´è â«ð£¶ «è£í Ü¬ì¹ °PèÀ

° Ü¬ñèðÁ¡øù. åªõ£¼ ªî£ìè å´ å¼ º®¹
å¬ì ªè£®¼°. «ñèì â´¶è£® <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Á¡ø¶.
à¬ñJ å¼ õ¬ô ÝõíF Þó´ ð°Fè à÷ù:
® î¬ô¹ ð°F
® àìð°F
î¬ô¹ ð°F, <head>, </head> â¡Â æ Þ¬í î¬ô
å´è÷£ Ü¬ìò£÷ è£íðÁø¶. àìð°F, <body>, </body>
â¡Â æ Þ¬í àì å´è÷£ Ü¬ìò£÷ è£íðÁø¶.
å¼ ªý¯ââ «è£H âî ÞìF «õ´ñ£ù£½
M÷è¾¬ó Þìªðøô£. <!--comment> â¡ø å´ Íô M÷è
306
¾¬ó¬ò «ê¶ ªè£÷ô£. àô£M, M÷è¾¬óè¬÷ ¹ø
èE¶M´. Ýõí¬î ð®¶ ¹K¶ªè£÷ âO¬ñò£
Þ¼° ªð£¼«ì M÷è¾¬óè «êèðÁ¡øù. <head>
å´ èì£òñ£è Þìªðø «õ´ â¡ðF¬ô.
5.3 î¬ô¹ ð°F
5.3.1 î¬ô¹ å´ (Title Tag )
î¬ô¹ ð°F H¡ù ªý¯ââ å´è¬÷ ªè£®
¼èô£. <title> å´, õ¬ô Ýõí¶° å¼ ªðò¬ó õöè
ðò¡ðÁø¶.
<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 å´ ðò¡ðÁø¶. Ýù£ e å® °PHìð´ Mõóè¬÷
àô£MJ è£í º®ò£¶. e å´è â«ð£¶«ñ õ¬ôðèF¡
î¬ô¹ ð°F°«÷«ò ÞìªðÁA¡øù. õ¬ô Ýõí¬î
à¼õ£Aò ÝCKòK¡ ªðò¬ó ÜP¶ ªè£÷¾, õ¬ô
î÷¬î MõK° Fø¾ ªê£è¬÷ ÜP¶ ªè£÷¾ Þî
å´ ðò¡ðÁø¶. ÝõíF Ü®è® ðò¡ð´îðì ªê£
èO¡ ªî£°F«ò Fø¾ ªê£è âùðÁ¡øù. Ü¬õ, Ýõí
F¡ Åö¬ô ªîOõ£è àí¶ð® Þ¼è«õ´. «î´
307
ªð£Pè (Search Engines) õ¬ô î÷è¬÷ õ¬èð´î Þî Fø¾
ªê£è¬÷ ðò¡ð´F ªè£A¡øù.
â´¶è£´:
<meta name = Author content = Albert>
<meta name = Keywords content =books, definitions>
å®¡ name ð¹ÃÁ, ðòù õ¬óòÁ° ñ£Pè¬÷

<meta>
Ü¬ìò£÷ è£í ðò¡ðÁø¶. content ð¹ÃÁ, Üî ñ£PèO¡
ñF¹è¬÷ °PHì ðò¡ðÁø¶.
ªð¼ð£ô£ù àô£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 â¡Â
ð¹ÃÁ Þî° ðò¡ðÁø¶.
â´¶è£´:
<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 å´ ðò¡ðÁø¶. ð£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, å´ ðò¡ð´î ðÁø«î£
Üªèô£, <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 æ´è ðò¡ð´îðÁ¡øù.
å¼ õ¬ô ÝõíF¡ àìð°F ðô ªý¯ââ å´è¬÷
ªè£®¼èô£. Cô å´è, à¬óð°F¬ò õ®õ¬ñè¾,
Cô å´è ðìè, Üìõ¬íè, ð®õè¬÷ àªê¼è¾,
«õÁ Cô, eªî£´¹è¬÷ (Hyper Links) à¼õ£è¾ ðò¡ð´î
ðÁ¡øù. Ü®è® ðò¡ð´îðÁ¡ø å´èÀ ÜõP¡
ð¹ÃÁèÀ Þ«è M÷èðÁ¡øù.
5.4.1 body å´
ãªèù«õ °PHìð®, õ¬ôðèF¡ àìð°F¬ò
Ü¬ìò£÷ è£ì body å´è ðò¡ðÁ¡øù. ªý¯ââ
å´è ðôõÁ° ðí¹ÃÁè¬÷ õ¬óòÁ¶, Üî å´èO¡
ðò¡ð£¬ì «ñð´î º®». body å´ ððô ð¹ ÃÁè¬÷
ªè£´÷¶. å¼ õ¬ôðèF¡ H¡¹ô Gø¬î ñ£Pò¬ñè
bgcolor ð¹ÃÁ ðò¡ðÁø¶.
< 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>
</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 ð¹ÃÁ ðò¡ ðÁø¶.
<h1 align = center> Computer </h1>
C ô ª ý ¯ â â å ´ è À ì ¡ style ð ¹ Ã P ¬ ù
ðò¡ð´F, Üî å´èO¡ º¡Qòð£ù ðHò¹è¬÷ ñ£P
ò¬ñè º®». style å®¬ù ð¹Ãø£è ðò¡ð´¶«ð£¶,
âî å®Q Ü¶ °PHìðÁø«î£ Üî å®¬ù ñ´«ñ
ð£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ó¬ñèðÁ¡øù. ðF¬ò õô
ðèñ£è, ¬ñòñ£è, Þìðèñ£è Üô¶ Þ¼ðèñ£è M¼Hòõ£Á
Yó¬ñè align ð¹ÃÁ ðò¡ðÁø¶.
<p align = center> Computer </p>
ºP¹ å´ (Break Tag)

ºP¹ å´ <br> å¼ ªõÁ õK¬ò ªê¼è ðò¡ðÁø¶.
º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> ðò¡ðÁø¶. </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> å´
ðò¡ðÁø¶. Þî å´ src ð¹ÃP¬ù èì£ò ªðP¼è
«õ´ñ. src â¡ð¶ source- ä °PAø¶. àè õ¬ôðèF
è£ì M¼¹ ðìF¡ ÎÝâ¬ô (Þ¼Hì ºèõK¬ò) src
ð¹ÃP¡ ñFð£è °PHì«õ´.
<img src = tnlogo.gif>
ðìF¡ õ®õ Ü÷¬õ «õ®òõ£Á Ü¬ñè width ñÁ

height ð¹ ÃÁè ðò¡ðÁ¡øù.
<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¬ì«ò à÷ à÷ìè àÁ¬ð ðòù AO ªêî£, href
ð¹ÃP¡ Íô Ü¬ìò£÷ è£ìðð´ õ¬ôðè¬î
àô£M Fø°. href ð¹ÃÁ eªî£´¹°Kò ÎÝâ¬ô
²Áø¶. <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 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 Í¡Á õ¬èò£ù ð®òè ðò¡ð´î
ðÁ¡øù.
l õK¬êð´îðì£î ð®òè <ul>.......</ul>
l õK¬êð´îðì ð®òè <ol>.......</ol>
l õ¬óò¬ø ð®òè <dl> ......</dl>
õK¬êð´îðì£î ð®òè (Unordered Lists)

<ul> â¡Â ªî£ìè å´ì¡ Þî ð®ò ªî£ì°
Aø¶. </ul> â¡Â º®¹ å´ì¡ ð®ò º®Aø¶. <li> â¡Â
å®¬ù ªî£ì¶ ð®ò àÁH¬ù àOì«õ´. <li>
å´ ð®òL¡ æ àÁ¬ð Ü¬ìò£÷ è£Áø¶. å«õ£
àÁ¹° å¼ <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ì¬è å¡P
Â, ñF¬ð àO´õîè£ù å¼ ¹Fò èô¬î ªê¼è, Üì
õ¬í îó¾ (Table Data) å´ <td> ðò¡ðÁø¶. Üìõ¬íJ½÷
Ü¬ù¶ èôè¬÷» ²P å¼ è¬ó¬ò à¼õ£è Üìõ¬í
å®¡ border ð¹ ðò¡ðÁø¶. º¿ Üìõ¬í° å¼
Gø¬îÎì bgcolor ð¹ ðò¡ðÁø¶. 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¬õè, ð®õè ðò¡ðÁ¡øù. «î´
ªð£PèO, «îì«õ®ò Fø¾ ªê£è¬÷ ðòùKìI¼¶
ªðÁõî° ð®õè ðò¡ð´îðÁ¡øù. ð®õ¬î à¼õ£è
<form> å´ ðò¡ðÁø¶. ð®õè, ð«õÁ ð®õ àÁ¹è¬÷
ªè£´÷ù. à¬óªð®è (text boxes), «ó®«ò£ ªð£î£¡è
(radio buttons), êKð£¹ ªð®è, ªð£î£¡è, WMK ð®òè
«ð£¡ø¬õ ÜõÁ Cô.
ð®õ, submit ªð£î£¡ â¡Â å¼ Cø¹ àÁH¬ù
ªè£´÷¶. Þ¶ ðòù î¼ Mõóè¬÷ ªêòð´î,
Üõ¬ø å¼ «ê¬õòè ðò¡ð£®ì «êH° ðE¬ò
ªêAø¶. ð®õF¡ å«õ£ àÁ¹° name ð¹ ÃÁÍô
å¼ ªðò¬ó ÜOè º®». ðòùè à¬ó ªð®èO ñF¹
è¬÷ àOÁ¡øù. «ó®«ò£ ªð£î£¡è, êKð£¹ ªð®è,
WMK ð®òè ÝAòõP «î¬õò£ùõ¬ø «îªî´
A¡øù. ðòùè àO´ Üô¶ «îªî´° ñF¹è
Üõ«ø£´ ªî£ì¹¬ìò ð®õ àÁ¹èO¡ ªðòè«÷£´ «ê¶,
õ¬ô «ê¬õòè¶° ÜÂH¬õèðÁ¡øù.
<form> å´ì¡ method, action â¡Â ºAòñ£ù ð¹ÃÁè
ðò¡ð´îðÁ¡øù. method ð¹ÃÁ, ð®õ àÁ¹èO¡ ªðò
èÀ, ñF¹èÀ «ê¬õòè¶° âõ£Á ÜÂðð´ â¡Aø
õNº¬ø¬ò °PHÁ¡øù. 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 â¿îðÁ¡øù.
<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
êìè å´ (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ò
å´è ðò¡ðÁ¡øù. <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 ð¹ÃÁ, êìè¶ è£ìðì«õ®ò õ¬ôðè¬î
²Áø¶. 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òðÁø¶.
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ªî£´¹è¬÷ å¿è¬ñè ðò¡ðÁø¶. ð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ò£è è£ìðÁøî£ â¡ð¬î àô£M Íô
àÁFªê¶ ªè£Àè.
ªðKò A- ä AO ªêî£, â¿¶¼M¡ à¼õ Ü÷¬õ
ªðKî£°. CPò A-ä AO ªêî£ â¿¶¼M¡ à¼õ
Ü÷¬õ CPî£°.
B- î®ñ¡; I- ê£ªõ¿¶; U- Ü®«è£´ â¿¶
«îªî´î à¬óð°F° GøÍì Þªð£î£¡ ðò¡
ðÁø¶. Þªð£î£¬ù AO ªêî£, ãó£÷ñ£ù GøèO¡
ªî£°¹ A¬ì°. Define colors AO ªê¶ Þ¡Â ðô Gø
è¬÷ ªðøº®».
à¬óð°F¬ò ðèF¡ Þì¶ æóñ£è, õô¶ æóñ£è,
¬ñòð°FJ Yó¬ñè Þî è¼Mè ðò¡ðÁ¡øù.
â õK¬êJì ð®ò, ªð£´ õK¬êJì
ð®ò à¼õ£è Þè¼Mè àî¾. à¬óð°F
¬ò Þìðè î÷¾, õôðè î÷¾ è¼Mè à÷ù.
5.5.4 Üìõ¬í à¼õ£°î
õ¬ôðèèO Üìõ¬íè ðôõ¬èJ ðò¡ðÁ¡øù.
å¼ 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>
å®¡ _________ð¹ÃÁ ðò¡ðÁø¶. õ¬ôðèF¡
àìð°FJ à÷ à¬ó º¿õî¡ Gø¬î ñ£Pò¬ñè
_________ â¡Â ð¹ÃÁ ðò¡ðÁø¶.
7. ªõ«õÁ â¿¶¼ ðHò¹èÀì¡ ªñ£î _________
î¬ô¹ å´è à÷ù.
8. ªý¯ââ Üìõ¬íè îó¾è¬÷ _________ è O
å¿è¬ñA¡øù.
9. Üìõ¬í îó¾ <td> èôè º¡Qòð£è _________
Yó¬ñèðÁ¡øù. Üìõ¬í î¬ô¹ <th> èôè
º¡Qòð£è _________ Yó¬ñèðÁ¡øù.
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. Þ¬íò£ù º®¹ å´è Þô£î å´è _________
å´è â¡Á Ü¬öèðÁ¡øù.
17. õ¬ôðèèO îèõè¬÷ å¿è¬ñè Í¡Á õ¬è
ò£ù ð®òè ðò¡ð´îðÁ¡øù. Ü¬õ:_________,
_________, _________
18. õ¬ô ÝõíèO ªî£´¹è¬÷ à¼õ£è _________
å´ ðò¡ðÁø¶. ªî£´¹è, _________â¡Á Ü¬ö
èðÁ¡øù.
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> å´ ðò¡ð´îðÁø¶.
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

Tamil Computer Book - Web Design

Uploaded by

Document Information

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Tamil Computer Book - Web Design

Uploaded by

Copyright:

Available Formats

ð£ì 5

õ¬ô õ®õ£è - æ ÜPºè

å¼ õ¬ôðèF¡ ªî£ìèF½ º®M½ Þìªðø

ªý¯ââ å´è â«ð£¶ «è£í Ü¬ì¹ °PèÀ

ªý¯ââ àÁð£ù ªî£ìè å´ < b o d y > â¡ðF

àô£M ê£÷óF¡ î¬ô¹ ð¬ìJ  First Web Document

5.3.2 e å´ (meta tag)

å®¡ name ð¹ÃÁ, ðòù õ¬óòÁ° ñ£Pè¬÷

î«ð£¶ àô£MJ ªîK¶ ªè£®¼° õ¬ôðè,

Þî <meta> å´, î«ð£¶ è£® ªè£®¼° ðè¬î

<h2> å´, î¬ô¹ åì£°. õ¬ôðèFÂ î¬ô¹

Þ«ð£¶, <h2> å®¡ õ®õ¬ñ¹ ð£E Iè¾

Þî °Pº¬ø (code) õ¬ôðèF¡ H¡¹ô Gø¬î

Ü¶«ð£ô è¼¹ Gø¬î °P° «ê¬è:

Gø «ê¬è # 99BDFF, ªõOcô Gø¬î», #7FFFD4,

«õªø£¼ º¬øJ½ õ¬ôðèF¡ H¡¹ô Gø¬î

«ñ«ô °PHìð® <body> å®¬ù õ¬ô àô£M ñ£P

º¡Qòð£ù à¬ó Gø è¼¹. Ýù£ «ñèì õ¬óòÁ

<h1>-¡ â¿¶¼ Ü÷¾ Iè¾ ªðKò¶. h6 -¡ â¿¶¼

Þ«ð£¶, <h2> å´èO¬ì«ò îóð´÷ à÷ìèF¡

Ü®è® ðò¡ð´îð´ å´è Cô W«ö M÷èð

ºP¹ å´ (Break Tag)

à¬ó, ð®õ ñÁ Hø à÷ìèè¬÷ ¬ñòð´Fè£ì

ðìF¡ õ®õ Ü÷¬õ «õ®òõ£Á Ü¬ñè width ñÁ

<img src = tnlogo.gif width = 100 height = 120>

<img>å®Q, width ñÁ height ð¹ ÃÁèO¡ ñF¹è¬÷

â¡Á Ü¬ñ» <img> å´ õ¬ôðè¬î Þõ£Á õ®õ¬ñ°:

ïÃó å´ (Anchor Tag)

àè àô£MJ «ñèì °Pº¬ø¬ò ºò¡Á ð£¼è.

â¡Â å®¬ù ðò¡ð´F, Üð°F° ªî£´¬ð à¼õ£è

ð¹ÃÁ, «èªð£L «è£¹ âî¬ù º¬ø Þòè

music.dat â¡ð¶ å¼ Gèðì «è£¹ Ý°. áìè ÞòAJ¡

õK¬êð´îðì£î ð®òè (Unordered Lists)

õ¬ô àô£MJ Í¡Á ð®ò àÁ¹èÀ Þõ£Á ªîK»:

õK¬êð´îðì ð®òè (Ordered Lists)

Þî¡ ªõOf´ Þð® Ü¬ñ»:

õ¬óò¬ø ð®òè (Definition Lists)

Üìõ¬í å´ (Table Tag)

«ñèì èì¬÷ ªî£°FJ¡ ªõOf´ Þõ£Á Ü¬ñ»:

ñ£íõèO¡ õK¬êâè¬÷», ªðòè¬÷» ªè£ì

ð®õ å´ (Form Tag)

<form> å®¡ ªð£¶õ£ù ªî£ìó¬ñ¹:

ð®õ«î£´ ªî£ì¹¬ìò <input> å®¬ù ðò¡ð´F å¼

«ñ«ô»÷ ªý¯ââ ð®õ º¡Qò¹ ñF¹è

â¡Â ð¹ÃÁ, ºî êìè ê£÷óF¡ 64

Þ¶, õ¬ôðèF Þó´ Aì¬èè Þ¼ð¬î àí¶

<h2>HOME </h2> <!- -home.html- ->

â¡Â èì¬÷ õKè, êìèè¬÷ Ü®ð¬ìò£è ªè£ì

2. cè à¼õ£è M¼¹ õ¬ôî÷ õ¬è¬ò «î

3. OK ªð£î£¬ù AO ªê¶, õ¬ôî÷¬î çHó¡

Üìõ¬í ð¹è¬÷ ñ£Pò¬ñî

a Üìõ¬í èôèO¡ ð¹è¬÷ ñ£Pò¬ñè ð®

6. <font> å´ì¡ ðò¡ð´îð´ ð¹ÃÁè â¬õ?

You might also like

ð£ì 5

õ¬ô õ®õ£è - æ ÜPºè

å¼ õ¬ôðèF¡ ªî£ìèF½ º®M½ Þìªðø

ªý¯ââ å´è â«ð£¶ «è£í Ü¬ì¹ °PèÀ

ªý¯ââ àÁð£ù ªî£ìè å´ < b o d y > â¡ðF

àô£M ê£÷óF¡ î¬ô¹ ð¬ìJ First Web Document

5.3.2 e å´ (meta tag)

å®¡ name ð¹ÃÁ, ðòù õ¬óòÁ° ñ£Pè¬÷

î«ð£¶ àô£MJ ªîK¶ ªè£®¼° õ¬ôðè,

Þî <meta> å´, î«ð£¶ è£® ªè£®¼° ðè¬î

<h2> å´, î¬ô¹ åì£°. õ¬ôðèFÂ î¬ô¹

Þ«ð£¶, <h2> å®¡ õ®õ¬ñ¹ ð£E Iè¾

Þî °Pº¬ø (code) õ¬ôðèF¡ H¡¹ô Gø¬î

Ü¶«ð£ô è¼¹ Gø¬î °P° «ê¬è:

Gø «ê¬è # 99BDFF, ªõOcô Gø¬î», #7FFFD4,

«õªø£¼ º¬øJ½ õ¬ôðèF¡ H¡¹ô Gø¬î

«ñ«ô °PHìð® <body> å®¬ù õ¬ô àô£M ñ£P

º¡Qòð£ù à¬ó Gø è¼¹. Ýù£ «ñèì õ¬óòÁ

<h1>-¡ â¿¶¼ Ü÷¾ Iè¾ ªðKò¶. h6 -¡ â¿¶¼

Þ«ð£¶, <h2> å´èO¬ì«ò îóð´÷ à÷ìèF¡

Ü®è® ðò¡ð´îð´ å´è Cô W«ö M÷èð

ºP¹ å´ (Break Tag)

à¬ó, ð®õ ñÁ Hø à÷ìèè¬÷ ¬ñòð´Fè£ì

ðìF¡ õ®õ Ü÷¬õ «õ®òõ£Á Ü¬ñè width ñÁ

<img>å®Q, width ñÁ height ð¹ ÃÁèO¡ ñF¹è¬÷

â¡Á Ü¬ñ» <img> å´ õ¬ôðè¬î Þõ£Á õ®õ¬ñ°:

ïÃó å´ (Anchor Tag)

àè àô£MJ «ñèì °Pº¬ø¬ò ºò¡Á ð£¼è.

â¡Â å®¬ù ðò¡ð´F, Üð°F° ªî£´¬ð à¼õ£è

ð¹ÃÁ, «èªð£L «è£¹ âî¬ù º¬ø Þòè

music.dat â¡ð¶ å¼ Gèðì «è£¹ Ý°. áìè ÞòAJ¡

õK¬êð´îðì£î ð®òè (Unordered Lists)

õ¬ô àô£MJ Í¡Á ð®ò àÁ¹èÀ Þõ£Á ªîK»:

õK¬êð´îðì ð®òè (Ordered Lists)

Þî¡ ªõOf´ Þð® Ü¬ñ»:

õ¬óò¬ø ð®òè (Definition Lists)

Üìõ¬í å´ (Table Tag)

«ñèì èì¬÷ ªî£°FJ¡ ªõOf´ Þõ£Á Ü¬ñ»:

ñ£íõèO¡ õK¬êâè¬÷», ªðòè¬÷» ªè£ì

ð®õ å´ (Form Tag)

<form> å®¡ ªð£¶õ£ù ªî£ìó¬ñ¹:

ð®õ«î£´ ªî£ì¹¬ìò <input> å®¬ù ðò¡ð´F å¼

«ñ«ô»÷ ªý¯ââ ð®õ º¡Qò¹ ñF¹è

â¡Â ð¹ÃÁ, ºî êìè ê£÷óF¡ 64

Þ¶, õ¬ôðèF Þó´ Aì¬èè Þ¼ð¬î àí¶

â¡Â èì¬÷ õKè, êìèè¬÷ Ü®ð¬ìò£è ªè£ì

2. cè à¼õ£è M¼¹ õ¬ôî÷ õ¬è¬ò «î

3. OK ªð£î£¬ù AO ªê¶, õ¬ôî÷¬î çHó¡

Üìõ¬í ð¹è¬÷ ñ£Pò¬ñî

a Üìõ¬í èôèO¡ ð¹è¬÷ ñ£Pò¬ñè ð®

6. <font> å´ì¡ ðò¡ð´îð´ ð¹ÃÁè â¬õ?