Tamil Computer Book - Web Design
Tamil Computer Book - Web Design
R G B
312
«ñèì â´¶ 裮, <p> â¡Â ðF å´ ðò¡ð´î
ð´÷¶. ܬîðP ð°F 5.4.3- M÷èð´÷¶. î¬ô¹
å´èO¡ ð«õÁ â¿¶¼ ðH¹è¬÷ ¹K¶ªè£÷ W«ö
»÷ F¬ó è£C¬ò «ï£°è.
h1 h2 h3 h4 h5 h6
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>
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>
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>
ÞQ,
<a href = #Department>
319
<ul>
<li> Name
<li> Phone
<li> ID
</ul>
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ò
å´è ðò¡ð´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>
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 «îªî´è¾.
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°.
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 裴è
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