±Ø¾ô ÀÆ̧šõ ±î â ±õ ±ø À̾¢ 1

ÌÈ¢ôÒ 1
−ó¾ ¬ì¸õ ÓØì¸ ÓØì¸ ¦ÅÌ º¡¾¡Ã½ ¯À§Â¡¸¢ôÀ¡Ç÷¸¨Ç
Áɾ¢ø ¨ÅòÐ ±Ø¾ô Àð¼Ð. ¦¾¡Æ¢ø 㾢¡¸ ¯ûÇÅ÷¸Ù측¸
«øÄ. ¦¾¡Æ¢ø 㾢¢ø À¢üÚÅ¢ìÌõ Ó¨ÈÔõ À¢Öõ Ó¨ÈÔõ
§ÅȡɨÅ. º¡¾¡Ã½ ¯À§Â¡¸¢ôÀ¡ÇÕìÌ μ÷ ¬÷Åò¨¾ì
¦¸¡ÎôÀ§¾ ±ý ±ñ½õ.
ÌÈ¢ôÒ 2
HTML ÀÊÅí¸û ±ØОüÌ −ýÚ ²Ã¡ÇÁ¡É ¦Áý¦À¡Õû¸û
¸¢¨¼ì¸¢ýÈÉ. Composer, Frontpage ӾġɨÅ¢ĢÕóÐ, º¢Ú, º¢Ú
¦Áý¦À¡Õð¸ûŨà áüÚì ¸½ì¸¡É¨Å ¯ûÇÉ. ¿£í¸û
¯ñ¼¡ìÌõ −¨½Âô Àì¸í¸û ±ôÀÊ ¯ñ¼¡¸¢ýÈÉ ±ýÚ «È¢Â
«Åº¢Â§Á −øÄ¡Áø −¨Å¸Ç¢ø ¯ÕÅ¡ì¸ô Àθ¢ýÈÉ.
±øÄ¡Åü¨ÈÔõ ¦ºùÅ§É −¨Å ¦ºöÐ ¾Õõ§À¡Ð ²ý ‘¸üÚì
¦¸¡ûÇ’§ÅñÎõ ±ýÈ ±ñ½õ ±ÆÄ¡õ. Ӿġž¡¸, HTML −ø
ÀÊÅí¸û ±ØÐÅÐ ±ýÀÐ ÀÄ÷ ±ñ½¢ì ¦¸¡ñÊÕôÀЧÀ¡ø ´Õ
“¿¢Ãø” ±ØÐÅЧÀ¡ýÈ «ùÅÇ× ¸ÊÉÁ¡É ´ýÈøÄ ±ýÚ
¯½÷ò¾×Á (¸ÊÉÁ¡É À̾¢¸Ùõ −Õ츢ýÈÉ) −Ãñ¼¡Å¾¡¸, ¿õ
§¾¡ð¼òÐ ¸ò¾Ã¢ì¸¡ö ¸¡Ã¢ì ¸¢¼ó¾¡Öõ ¿ÁìÌ Í¨ÅôÀ¾¢ø¨Ä¡?
¿õ ¨¸Â¡§Ä ±Ø¾¢ô À¡÷ìÌõ§À¡Ð «¾ý −ýÀõ ¾É¢¾¡ý
±ýÀ¾ü¸¡¸×õ¾¡ý!

−ýÚ HTML(Hyper Text Markup Language) ±ÉôÀÎõ ÌȢ£ðÎ

¦Á¡Æ¢¨Âô ÀüÈ¢ §¸ûÅ¢Ôá¾Å§Ã −ø¨Ä ±ÉÄ¡õ. −¨½Âô
ÒÆì¸ò¾¢ü¦¸ýÚ −øÄ¡Áø, ¾í¸Ù¨¼Â ¬ì¸í¸¨Ç §ºÁ¢òÐ
¨ÅòÐì ¦¸¡ûÇ×õ, À¢ÈÕ¼ý À¸¢÷óÐ ¦¸¡ûÇ×õ −Ð Á¢¸×õ
ÀÂýÀÎò¾ô Àθ¢ÈÐ. ÌÈ¢ôÀ¡¸ help files ±ÉôÀÎõ ¯¾Å¢
§¸¡ôÒì¸û −õӨȢø¾¡ý −ô§À¡Ð ÅÕ¸¢ýÈÉ. ¬ì¸í¸¨Ç
À¸¢÷óЦ¸¡ûÇ “±õ.±Š §Å÷Δ §À¡ýÈÅü¨Èô ÀÂýÀÎòи¢§È¡õ.
±ý ¿ñÀâ¼õ “wordperfect” ¾¡ý ¯ñ¦¼ýÈ¡ø «Åáø ÀÊì¸
ÓÊ¡Р(Á¡üÈ¢ò ¾Õõ ź¾¢¸û −Õó¾¡Öõ º¢Ä ºÁÂí¸Ç¢ø
ÓبÁ¡¸ ¿¼ôÀ¾¢ø¨Ä). −õӨȢø ±Ø¾ôÀÎõ ¬ì¸í¸¨Çô
ÀÊì¸ μ÷ ¯ÄÅ¢ (Browser) −Õó¾¡ø §À¡Ðõ;
§ÅÚ ¦Áý¦À¡Õû §¾¨Å −ø¨Ä. HTML −ý −ýȢ¨Á¡¾
¾ý¨Á¸Ç¢ø ´ýÚ, ÀÊòÐì ¦¸¡ñÊÕìÌõ ¬ì¸ò¾¢Ä¢ÕóÐ §ÅÚ
¬ì¸ò¾¢ü§¸¡ «øÄÐ −¨½Âò¾¢ý §ÅÚ ´Õ Àì¸ò¾¢ü§¸¡ «øÄÐ
«§¾ ¬ì¸ò¾¢ý ÌÈ¢ôÀ¢ð¼ À̾¢ì§¸¡ ¦ºøÄ ÓÊž¡Ìõ.

−íÌ ¿¡õ ¸¡½ô§À¡ÅÐ ¦ÅÌ «ÊôÀ¨¼Â¡É Å¢¼Âí¸û ÀüÈ¢

ÁðΧÁ. −ó¾ ÌȢ£ðÎ ¦Á¡Æ¢, §ÅÚ, §ÅÚ ¯ÕÅí¸û ¦ÀüÚ
DHTML, XHTML ±ýÈ¡¸¢, ÀÄÅÆ¢¸Ç¢ø ÒÆì¸ò¾¢Ä¢Õ츢ýÈÉ. XML
±ÉôÀÎõ extensible markup language −ô§À¡Ð Ž¢¸Å¢ÂÄ¢ø
¾¸Åø¸¨Ç ÀâÁ¡È¢ì ¦¸¡ûž¢ø §Å¸Á¡¸ ÅÇ÷óÐ ÅÕ¸¢ÈÐ.

ӾĢø ±ó¾ ´Õ ÀÊÅÓõ (¯¾¡Ã½Á¡¸ −ó¾ ¬ì¸õ) ±ôÀÊ

«¨Áó¾¢Õ츢Ȧ¾ýÚ À¡÷§À¡õ:

“±Ø¾ô ÀÆ̧šõ ±î â ±õ ±ø.” ±ýÈ ´Õ ¾¨ÄôÒ −Õ츢ÈÐ.

«¾ý ¸£§Æ «Ê째¡Î −Õ츢ÈÐ. «¨¾ò ¦¾¡¼÷óÐ «§É¸
“Àó¾¢”(para)ì¸û −Õ츢ýÈÉ. −¨Å¸¨Ç ¿¡õ “±õ. ±Š
§Å÷ʧġ” «øÄÐ ²§¾Ûõ ´Õ “¦¼ìŠð ±Êð¼Ã¢§Ä¡”
±ØÐõ§À¡Ð μù¦Å¡Õ Åâ ÓÊÅ¢Öõ, ´ù¦Å¡Õ “Àó¾¢”ì¸ÙìÌ
−¨¼Â¢Öõ ¸ñÏìÌò ¦¾Ã¢Â¡¾ ÌȢ£θû, «¨Å Åâ ÓÊ×
±ýÚõ, “Àó¾¢” ¦¾¡¼ì¸õ ±ýÚõ ÌÈ¢ì¸ «¨Áó¾¢ÕìÌõ.
−õÁ¡¾¢Ã¢ò¾¡ý HTML ÀÊÅõ ÓØž¢Öõ ÌȢ£θ¨Çì ¦¸¡ñÎ Åâ
ÓʦÅýÚõ «Îò¾ “Àó¾¢” ±ýÚõ ÌÈ¢ì¸ §ÅñÎõ.

±¾¡ÅÐ ´Õ “text editor” −ø º¢ÄÅü¨È ±Ø¾¢, html “±ìŠ¦¼ý…ý”

¯¼ý §ºÁ¢òÐÅ¢ð¼¡ø «¨¾ ¯ÄÅ¢ ÒâóÐ ¦¸¡ñÎ HTML ÀÊÅÁ¡¸
¸¡ðÎõ.

´Õ §º¡¾¨É ¦ºöÐ À¡÷ô§À¡Á¡?

−ó¾ ¬ì¸õ ÓØŨ¾Ôõ À¢Ã¾¢ ¦ºöÐ note pad −ø ´ðÊ (±õ ±Š

§Å÷ÊÖõ ¦ºöÂÄ¡õ – §¸¡ôÒ Å¨¸¨Â plain text ±ýÚ ±ÎòÐì
¦¸¡ûÙí¸û) first_try.html ±ýÚ ¦ÀÂ÷ ¦¸¡ÎòÐ §ºÁ¢Ôí¸û.
§ºÁ¢ìÌõ§À¡Ð save as type ±ýÀ¨¾ All Files(*.*) §¾÷ó¦¾ÎòÐì
¦¸¡ûÙí¸û. −ô§À¡Ð §ºÁ¢ò¾ §¸¡ôÀ¢ý Á£Ð −Ãð¨¼Â¡¸
¦º¡Î츢 (doble click) ôÀ¡Õí¸û. ¯í¸û ¯ÄŢ¢ø −ó¾
¬ì¸ò¨¾ì ¸¡½Ä¡õ. «É¡ø… ÌÆôÀÁ¡¸ −Õ츢ȧ¾….. ±øÄ¡õ
´§Ã áÄ¢ø §¸¡÷ò¾Ð Á¡¾¢Ã¢….. ²ý −ôÀÊ?

−Ð ²ý ±ýÚ «È¢Ôõ Óý −ý¦É¡Õ §º¡¾¨É ¦ºöÐ À¡÷ô§À¡õ.

²ü¦¸É§Å §ºÁ¢òÐ ¨Åò¾¢ÕìÌõ first_try.html §¸¡ô¨À Á£ñÎõ text

editor (¯¨Ã ¦¾¡ÌôÀ¢?) −ø ¾¢È×í¸û.

§¸¡ô¨À ¾¢Èì¸ −ÃñÎ ÅÆ¢¸¨Çô ÀÂý ÀÎò¾Ä¡õ. (−Ãð¨¼î

¦º¡ÎìÌ ¦ºö §Åñ¼¡õ. ¯ÄÅ¢¾¡ý Á£ñÎõ ¾¢ÈìÌõ):

´ýÚ, text editor ³ −Â츢, «¾ý ãÄõ ¾¢ÈôÀÐ (File > Open).
−ÃñÎ, ¯ÄŢ¢ø ÀÊÅò¨¾ì ¸¡Ïõ§À¡Ð ÅÄî ¦º¡Îì¸ø ¦ºöÐ
“source code” ±ýÀ¨¾ò ¾ðÎÅÐ.

¸£úì ¸ñ¼Å¡Ú <BR> ±ýÀ¨¾Ôõ <P> ±ýÀ¨¾Ôõ ÌÈ¢ôÀ¢ð¼

−¼í¸Ç¢ø §ºÕí¸û:

±Ø¾ô ÀÆ̧šõ ±î â ±õ ±ø.<BR>

===============================<BR>
<P>
−ýÚ HTML(Hyper Text Markup Language) ±ÉôÀÎõ ¸¤È¢Â£ðÎ
¦Á¡Æ¢¨Âô ÀüÈ¢ §¸ûÅ¢Ôá¾Å§Ã −ø¨Ä ±ÉÄ¡õ. −¨½Âô
ÒÆì¸ò¾¢ü¦¸ýÚ −øÄ¡Áø, ¾í¸Ù¨¼Â ¬ì¸í¸¨Ç §ºÁ¢òÐ
¨ÅòÐì ¦¸¡ûÇ×õ, À¢ÈÕ¼ý À¸¢÷óÐ ¦¸¡ûÇ×õ −Ð Á¢¸×õ
ÀÂýÀÎò¾ô Àθ¢ÈÐ. ÌÈ¢ôÀ¡¸ help files ±ÉôÀÎõ ¯¾Å¢
§¸¡ôÒì¸û −õӨȢø¾¡ý −ô§À¡Ð ÅÕ¸¢ýÈÉ.

−ô§À¡Ð Á£ñÎõ §¸¡ô¨À §ºÁ¢òÐ ¯ÄŢ¢ø ¸¡Ïí¸û. Óý¨ÉÂ

§º¡¾¨ÉìÌõ −¾üÌõ Å¢ò¾¢Â¡ºõ ¦¾Ã¢¸¢È¾¡? ¾¨ÄôÀ¢Ä¢ÕóÐ ´§Ã
Å⨺¡¸ §¸¡÷ì¸ô ÀðÊÕó¾ Åâ¸û −ô§À¡Ð ¾¨ÄôÒò
¾É¢Â¡¸×õ, «Ê째¡Î ¾É¢Â¡¸×õ «¨¾ò ¦¾¡¼÷ó¾ Ó¾ø Àó¾¢
´Õ Åâ −¨¼¦ÅǢ¢ø «Ê째¡ðÊüÌ ¸£Øõ ¸¡ÏÅ£÷¸û. «¾¡ÅÐ
*¸¢ð¼ò¾ð¼* «ºÄ¢ø −ÕôÀÐ §À¡Ä§Å ¸¡ÏÅ£÷¸û.

±ýÉ ¿¢¸úó¾Ð −í§¸? ¿¡õ Óý§À À¡÷ò¾ÀÊ, ÀÊÅò¾¢ý

μù¦Å¡Õ À̾¢Ôõ ±ùÅ¡Ú «¨Á §ÅñÎõ ±ýÚ ÌÈ¢ì¸
§ÅñÎõ ±ýÚ ¸ñ§¼¡õ «øÄÅ¡? «¨¾ò¾¡ý ¿¡õ
¦ºö¾¢Õ츢§È¡õ.
Àðʸû (Tags):

±¾¡ÅÐ ´Õ −¨½ÂôÀì¸ò¾¢ý ¬¾¡Ãò¨¾ (souce)

À¡÷ò¾£÷¸Ç¡É¡ø −Õ §¸¡½ «¨¼ôÒì ÌÈ¢ìÌû (< >) º¢Ä
¦º¡ü¸û «¨ÁÂô ¦ÀüÈ¢ÕìÌõ. −ó¾ §¸¡½ «¨¼ôÒì ÌÈ¢ìÌû
−ÕìÌõ «¨Å¸¨Ç ÌȢ£θû (tags) ±ý¸¢§È¡õ. «¨Å¾¡ý,
ÌȢ£ðÊüÌ «ÎòÐ −ÕìÌõ À̾¢¨Â ±ùÅ¡Ú ¯ÄŢ¢ø ¸¡ð¼
§ÅñÎõ ±ýÚ «È¢ÅôÀ¾¡Ìõ.

¿¡õ −ýÚ ¸ñ¼ ¯¾¡Ã½ò¨¾ô À¡÷ô§À¡õ.

¾¨Äô¨À «ÎòÐ, <BR> ±ýÈ ÌȢ£𨼠−𧼡õ. «¾ý

¦À¡Õû, “−ó¾ Åâ¨Â −òмý ÓÈ¢òРŢΔ ±ýÀ¾¡Ìõ «¾¡ÅÐ
break ±ýÀ¾¢ý ÍÕì¸Á¡Ìõ. «§¾§À¡ø <P> ±ýÀÐ para (Àó¾¢)
±ýÀ¾¢ý ÍÕì¸Á¡Ìõ.
−ùÅ¡È¡¸ ´ù¦Å¡ýÈ¢üÌõ ÌȢ£θû −Õ츢ýÈÉ. ±Ç¢¾¡¸ò
§¾¡ýÈÅ¢ø¨Ä?

−ùÅÇ×¾¡É¡? −ýÛõ ¿¢¨È −Õ츢ýÈÉ.

ÌÈ¢ôÒ:

¿¡ý ¯¾¡Ã½í¸Ù측¸ ¾Á¢¨Æ ¯À§¡¸¢ì¸¢§Èý. º¢Ä÷ ¦ÅðÊ

´ðÎõ§À¡Ð ¾Á¢¦ÆØò¨¾ ¸¡½ÓÊž¢ø¨Ä ±ýÚ
¦¾Ã¢Å¢òÕ츢ýÈÉ÷. ¯í¸ÙìÌ «¾¢ø º¢ÃÁõ ¯ñ¦¼ýÈ¡ø
«Ð§À¡ø ¯ûÇ μ÷ ¬í¸¢Äô À̾¢¨Â ¨¸Â¡ÇÄ¡õ.
−ÐŨà ¿¡õ À¡÷ò¾¦¾øÄ¡õ §º¡¾¨É측¸ò¾¡ý. ´Õ ӨȡÉ
Á£Ô¨ÃÌÈ¢¦Á¡Æ¢ (HTML) À¼¢Åõ ±ýÀÐ −ýÛõ ºüÚ ¦¾Ç¢Å¡É
ÀÊÅ «¨ÁôÒì¸Ù¼ý −ÕìÌõ.

Á¢¸î º¢È¢Â, Ó¨ÈÂ¡É «¨ÁôÒì ¦¸¡ñ¼ ´Õ ÀÊÅõ −ôÀÊò¾¡ý

−ÕìÌõ:

<HTML>
<BODY>
±ý Ó¾ø ÀÊÅõ
</BODY>
</HTML>

−¾¢ø <HTML> ±ýÀÐ, −ó¾ô ÀÊÅõ ´Õ Á£Ô¨ÃÌÈ¢¦Á¡Æ¢ (HTML)

±ýÀ¨¾ ¯½÷òи¢ÈÐ. −Ú¾¢Â¡¸ −ÕìÌõ </HTML> ±ýÀÐ Á£ ¯
Ì ¦Á¡ -¢ý ÓÊ× ±ýÀ¨¾ì ¸¡ðθ¢ÈÐ. «§¾ §À¡ø <BODY>
±ýÀÐ ¯ÄŢ¢ø ÀÊÅõ ¸¡ð¼ §ÅñÊ À̾¢¸¨Çì ¦¸¡ñ¼Ð.
</BODY> ±ýÀÐ “¯¼ø” À̾¢Â¢ý ÓʨÅì ¸¡ðθ¢ÈÐ.

−ó¾ ÌȢ£ðÎô Àðʸ¨ÇÀ’ ÀüÈ¢ ¦¸¡ïºõ ¦¾Ã¢óÐ ¦¸¡ûÇ

§ÅñÎõ. −ó¾ô Àðʸû, ´Õ º¢ÄÅü¨Èò ¾Å¢Ã ¦ÀÕõÀ¡Öõ
§º¡Ê¡¸§Å «¨Áó¾¢ÕìÌõ. ´Õ ¦ºÂÄ¢ý ¦¾¡¼ì¸ò¨¾ì
ÌÈ¢ò¾¡ø, «¾ý ÓʨÅÔõ ÌÈ¢ì¸ ÓÊôÒÀðÊ (end tag) −¼
§ÅñÎõ. «¨¾ò¾¡ý §Á§Ä ¸¡ñ¸¢§È¡õ. −ó¾ Àðʸû¾¡ý «ó¾
¦Á¡Æ¢Â¢ý ¬¾¡Ãí¸û. −¨Å¸Ç¢ý Å¢§º¼õ ±ýɦÅýÈ¡ø, ±Ç¢¾¢ø
ÒâóÐ ¦¸¡ûÙõÀÊÂ¡É (¬í¸¢Ä) ÌȢ£¼¡¸ −ÕôÀо¡ý. −Åü¨È
¾ÃôÀÎòÐÅР¡÷? “¨Áì¦Ã¡º¡ô¼¡” «øÄÐ “¦¿ðŠ§¸ô” ¬?
−ÃñÎõ −ø¨Ä. World Wide Web Consortium (W3C) ±ÉôÀÎõ
¾ÃôÀ¼¤òÐõ μ÷ «¨ÁôÒò¾¡ý −¨¾î ¦ºö¸¢ÈÐ.

−ó¾ Á£Ô¨ÃÌÈ¢¦Á¡Æ¢ (HTML) ¬ÉÐ ¦ÅÌ º¡Ð. ¿£í¸û ±ýÉ ¾ÅÚ

¦ºö¾¡Öõ ¸ñΦ¸¡ûÇ¡¾ «ôÀ¢Ã¡½¢. ¾ÉìÌ ¯¼ýÀ¡¦¼ýÈ¡ø
¦ºÂøÀÎòÐõ −ø¨Ä¦ÂýÈ¡ø ¸ñΦ¸¡ûÇ¡Áø Å¢ðÎÅ¢Îõ. «Ð
¦º¡üÀ¢¨Æ¨Â ºÃ¢ ¸¡ñÀ¾¢ø¨Ä. §ÁÖÁ’ «Ð “a” ìÌõ “A”(not case
sensitive) Å¢ò¾¢Â¡ºõ À¡Ã¡ð¼¡Ð. ±ýÈ¡Öõ ÀðʸǢø (§Áø
±ØòÐ츧ǡ «øÄÐ ¸£ú ±ØòÐ츧ǡ) º£Ã¡¸ô À¡Å¢ôÀÐ ¿øÄÐ.

−ýÛõ ºüÚ §Á§Ä §À¡ö À¡÷ô§À¡õ: (¾Á¢ú «îº¢ø º¢ÃÁõ

¸¡ñÀÅ÷¸û ¬í¸¢Ä š츢Âí¸¨Ç ¯À§Â¡¸¢ì¸Ä¡õ). ÓýÒ
¸ñ¼Ð §À¡ø ´Õ ¯¨Ã ¦¾¡ÌôÀ¢(note pad, ms word, word pad)¢ø
¸£úì¸ñ¼Å¡Ú ±Ø¾¢, test1.html ±ýÈ ¦ÀÂâø §ºÁ¢òÐì
¦¸¡ûÙí¸û.

<HTML>
<BODY>
<H1>
Ó¾ø ¾¨ÄôÒ
</H1>
±ý Ó¾ø ÀÊÅõ.
</BODY>
</HTML>

Ò¾¢¾¡¸ ¿£í¸û −õÁ¡¾¢Ã¢ ±Ø¾¢ §º¡¾¢¾’Ðô À¡÷ì¸Ä¡õ.

§Á§Ä ¸ñ¼¨¾ ¯ÄŢ¢ø §º¡¾¢òÐô À¡÷ò¾£÷¸Ç¡? “Ó¾ø ¾¨ÄôÒ”
±ýÀÐ ¯í¸û ¬ì¸ò¾¢ý ¾¨ÄôÀ¡¸×õ, “¯¼ø” À̾¢ø ¯ûǨÅ
¯í¸û ¬ì¸ò¾¢ý ¯ûÇ£¼¡¸×õ ¸¡ÏÅ£÷¸û.

−íÌ H ±ýÀÐ ¾¨Äô¨Àì(Heading) ÌȢ츢ÈÐ. −¾Û¼ý “1′

§º÷ó¾Ð ²ý?

1 Ó¾ø 6 Ũà Óý§À ŨÃÂÚì¸ô Àð¼ «ÇÅ¢Ä ஢(¦ÀÕì¸ò¾¢ø 1

– ¬¸ô ¦ÀâÐ, 6- ¬¸î º¢È¢Ð) ±ØòÐÕ «¨Áó¾¢ÕìÌõ. 1 Ó¾ø
6 ŨÃÂ¡É ±ñ¸¨Ç(−Õ ÀðʸǢÖõ) Á¡üÈ¢, §¸¡ô¨À §ºÁ¢òÐ
¯ÄŢ¢ø À¡Õí¸û; Å¢ò¾¢Â¡ºò¨¾ ¯½÷Å£÷¸û.

¦ºýÈ ¯¾¡Ã½í¸Ç¢ø ãÄõ Á£Ô¨ÃÌÈ¢¦Á¡Æ¢ (HTML) ÀüÈ¢ ¦ÁûÇ

¦¾Ã¢Â Åó¾¢ÕìÌõ ±ýÚ ±ñϸ¢§Èý. §ÁÖõ º¢Ä ¯¾¡Ã½í¸¨Çô
À¡÷ô§À¡õ:

¿¡õ ÓýÒ ÌÈ¢ôÀ¢ð¼ÀÊ test1.html Á£ñÎõ ´Õ ¯¨Ã ¦¾¡ÌôÀ¢

(note pad, ms word, word pad)¢ø ¾¢È×í¸û. ¸£úì ¸ñ¼Ð§À¡ø
Ò¾¢Â Àðʸ¨Ç(’<CENTER> ÁüÚõ</CENTER>)
஢ §ºÕí¸û:

<HTML>
<BODY>
<H1>
<CENTER>Ó¾ø ¾¨ÄôÒ</CENTER>
</H1>
±ý Ó¾ø ÀÊÅõ.
</BODY>
</HTML>

§Á§Ä §º÷ì¸ôÀð¼ Àðʸû ±ýÉ Å¢¨Ç¨Åò ¾Õõ ±ýÚ

±ñϸ¢È£÷¸û? ¬Á¡õ; ¿£í¸û °¸¢ò¾Ð ºÃ¢¾¡ý. −о¡ý
‘Á£Ô¨ÃÌÈ¢¦Á¡Æ¢ (HTML) ¢ý ±Ç¢¨Á.

−íÌ ´ý¨È ¸ÅÉ¢ò¾¢Õì¸Ä¡õ. ÓýÒ −ð¼ Àðʸ¨Çò

¾É¢ò¾É¢Â¡¸ −𧼡 õ. Ò¾¢Â ÀðÊÂ¡É “<CENTER>” ³
¾¨Äô§À¡Î §º÷òÐ −¨½ò¾¢Õ츢§È¡õ. −¾É¡ø ±ýÉ Å¢¨Ç×?
´ýÚÁ¢ø¨Ä; −ÃñÎõ ´ýÚ¾¡ý! ¿¡õ¾¡ý ¸ñ§¼¡ §Á, −õÁ¡¾¢Ã¢
Å¢¼Âí¸Ç¨ ‘Á£Ô¨ÃÌÈ¢¦Á¡Æ¢ (HTML) ¸ñΦ¸¡ûÇ¡Ð ±ýÚ. ¿ÁìÌ
ÀÊôÀ¾üÌ ±Ç¢¾¡¸ −ÕìÌõ Ũ¸Â¢ø ±ôÀÊÔõ «¨ÁòÐì
¦¸¡ûÇÄ¡õ.

§ÁÖõ º¢Ä Àðʸû ¾Õ¸¢§Èý ¾Ìó¾ −¼ò¾¢ø −¨½òРިǨÅ

−É¢ ÅÕõ À̾¢Ô¼ý ´ôÀ¢ðÎì ¦¸¡ûÙí¸û:

<B> </B> – ¾ÊÁý (Bold)

<I> </I> – º¡ö× (Italic)
<U> </U> – «Êì §¸¡Î (Under line)

−ÐŨà ¸ñ¼ Àðʸ¨Ç즸¡ñÎ ±Ç¢¾¡É ´Õ ÀÊÅõ

¾Â¡Ã¢ì¸Ä¡õ. À¢üº¢ ¦ºöÐ À¡Õí¸û.

§Áü¦¸¡ñÎ º¢Ä Àðʸ¨Çô À¡÷ìÌõ Óý §ÁÖõ º¢Ä Å¢ÀÃí¸¨Çì

¸¡ñ§À¡õ.
−ó¾ Á£Ô¨ÃÌÈ¢¦Á¡Æ¢ ¬ÉÐ ¿¢Ãø ´Øì¸ò¨¾ô À¡÷ôÀ¾¢ø¨Ä ±ýÚ
Óý§À ¸ñ§¼¡ õ. ¯¾¡Ã½Á¡¸ ¸£ØûǨ¾ì ¸¡Ïí¸û:

<HTML>
<BODY>
<H1>
<CENTER><U>Ó¾ø ¾¨ÄôÒ</CENTER>
</H1></U>
±ý Ó¾ø ÀÊÅõ.
</BODY>
</HTML>

§Áü¸ñ¼¨¾ ¦ÅðÊ ´ðÊ, ¯ÄŢ¢ø §º¡¾¢òÐô À¡Õí¸û. À¢ýÉ÷

¸£úì ¸ñ¼¨¾ÔÁ’ §º¡¾¢òÐô À¡Õí¸û.

<HTML>
<BODY>
<H1>
<CENTER><U>Ó¾ø ¾¨ÄôÒ</U></CENTER>
</H1>
±ý Ó¾ø ÀÊÅõ.
</BODY>
</HTML>

§Áü¸ñ¼ −ÃñÎ ÀðÊÂø¸ÙìÌÁ ஢(list) ±ýÉ §ÅÚÀ¡Î

¸¡ñ¸¢È£÷¸û? </U> ±ýÈ ÓÊôÒô ÀðÊ −¼õ Á¡È¢Â¢Õì¸ì
¸¡ñ¸¢È£÷¸û «øÄÅ¡? ¬É¡ø ¯ÄŢ¢ø ¸¡Ïõ§À¡Ð ±ó¾
Å¢ò¾¢Â¡ºò¨¾Ôõ ¸¡ð¼¡Ð.

±ýÈ¡Öõ −ó¾ ¦Á¡Æ¢Â¢ý ÅÇ÷ Àø§ÅÚ ¸¢¨Ç¸Ç¡¸ Óý§ÉÈ¢

ÅÕž¡ø ´Õ ´Øí¨¸ì ¸¨¼ôÀ¢ÊôÀÐ «Åº¢ÂÁ¡¸¢ÈÐ. ÌÈ¢ôÀ¡¸
¿£û¾Ì ÌÈ¢ ¦Á¡Æ¢(XML) −ô¦À¡Ð ¬ð¦¸¡ûÇ ¬ÃõÀ¢òÐŢ𼾡ø
«¾ý ´Øí¨¸ À¢ýÀüÈ §ÅñÊÂÐ «Åº¢ÂÁ¡¸¢ÈÐ. ¿¡õ
ÀÆÌõ§À¡§¾ −ó¾ ´Øí¨¸ô À¢ý ÀüȢɡø ÅÕõ ¸¡Äí¸Ç¢ø
ÀÂÉÇ¢ìÌõ. −ó¾ì ¸ðΨâý §¿¡ì¸õ ¿£û¾Ì ÌÈ¢ ¦Á¡Æ¢(XML)
ÀüÈ¢ÂÐ «øÄ ±ýÈ¡Öõ, ´Øí¨¸ô À¢ýÀüÈ §ÅñÊ «Åº¢Âò¨¾
«È¢óЦ¸¡ûǧÅñÎõ.

ÀûǢ¢ø ¸½¢¾ô À¡¼ò¾¢ø “«øƒ£ôá” ¸üÈ¢ÕôÀ£÷¸û «øÄÅ¡?

«§¾ ´Øí¨¸ò¾¡ý −íÌ ¿¡õ À¢ýÀüÈ §ÅñÎõ. «¾¡ÅÐ
¯ûÇ¢ÕìÌõ «¨¼ôÒì ÌÈ¢ìÌûÇ¢ÕóÐ ¦ÅÇ¢§Â ÅçÅñÎõ
±ýÚ ¿¡õ «È¢§Å¡õ. ¦¾¡¼ì¸ô ÀðÊ, ÓÊôÒô ÀðÊ §º¡Ê¸Ùõ
«ùÅ¡§È «¨Áó¾¢Õì¸ §Åñ¼¤õ. «¾ýÀÊ À¡÷ò¾¡ø Ó¾ø
ÀðÊÂÄ¢ø </U> ±ýÈ ÓÊôÒô ÀðÊ −ÕìÌÁ¢¼õ ¾Åȡɾ¡Ìõ.
−Ãñ¼¡ÅÐ ÀðÊÂÄ¢ø ºÃ¢Â¡É −¼ò¾¢ø −Õ츢ÈÐ.

−É¢ §ÁÖõ ´Õ Ó츢ÂÁ¡É ÀðʨÂô À¡÷ô§À¡õ:

ÀÊÅí¸Ç¢ø Á¢¸ò §¾¨ÅÂ¡É ´ýÚ ±ØòÐըŠÁ¡üÚÅÐ.

−¾ý Àðʸû <FONT> </FONT> ¬Ìõ. −¨Å¸¨Ç ¦ÅÚÁ§É
ÀÂýÀÎòО¢ø ¿¡õ ²Ðõ ¦ÀÈô §À¡Å¾¢ø¨Ä. ±ØòÐÕ ±ôÀÊ
§ÅñÎõ ±ýÚõ ¦º¡øÄ §ÅñÎõ.
¯¾¡Ã½Á¡¸,
<FONT color=”red”>−ó¾ Åâ º¢ÅôÒ Åñ½ò¾¡ø ¬ÉÐ</FONT>

−ó¾ô ÀðÊ, §Áü¸ñ¼ Åâ¨Â º¢ÅôÒ Åñ½ò¾¢ø ¾Õõ. «¾¡ÅÐ

«ó¾ ÀðʸÙ츢¨¼Â¢ø −ÕìÌõ ±ØòÐì¸¨Ç º¢ÅôÀ¢ø ¾Ã
§ÅñÎõ ±ýÚ ¸ð¼¨Ç −θ¢§È¡õ. −§¾§À¡ø ±ØòÐÕÅ¢ý
¾ÊÁ¨ÉÔõ ±ØòÐÕÅ¢ý Ó¸í¸¨ÇÔÁ ஢(font face – Arial, Times,
InaimathiTSC, AParanarTSC etc.) Á¡üÈÄ¡õ.

<FONT face=”Comic Sans MS”>Something</FONT>

<FONT size=”+3″>Something</FONT>

−¨Å ãý¨ÃÔõ ´§Ã Åâ¢ø −ôÀÊÔõ ¦¸¡Îì¸Ä¡õ:

<FONT face=”Comic Sans MS” size=”+3″

color=”red”>Something</FONT>

¿õ ÀÊÅò¨¾ ¦ÁÕÜð¼ §Áü¦¸¡ñÎ º¢Ä Àðʸ¨Çô À¡÷ô§À¡õ.

º¢Ä §¿Ãí¸Ç¢ø º¢Ä Å¢¼Âí¸¨Çô ÀðÊÂÄ¢¼ §¿Ã¢¼Ä¡õ.

¯¾¡Ã½Á¡¸, ¸£úì ¸ñ¼ Òò¾¸í¸¨Ç ÀðÊÂÄ¢¼ Å¢ÕõÒ¸¢ýÈ£÷¸û

±ýÚ ¨ÅòÐì ¦¸¡û§Å¡õ:

´üÚ¨Á
¸½¢É¢ ¸üÚì ¦¸¡ûÙí¸û
§¿¡ÂüÈ Å¡ú×
Ò¨¸, ÁÉ¢¾ÛìÌô À¨¸
«Ð Ó¨Èô ÀÎò¾¢Â ÀðÊÂÄ¡¸§Å¡ «¾¡ÅÐ 1,2,3… ±É Å⨺ô
ÀÎò¾¢§Â¡ «øÄÐ Ó¨Èô ÀÎò¾¡ ÀðÊÂÄ¡¸§Å¡(±ó¾ Å⨺
Ó¨ÈÔõ −øÄ¡Á§Ä¡) −Õì¸Ä¡õ. −¨¾ ¿õ ÀÊÅò¾¢ø §º÷ôÀ¨¾ô
ÀüÈ¢ô À¡÷ô§À¡õ.

<OL> </OL> – O(rdered) L(ist) – Ó¨È ÀÎò¾¢Â ÀðÊÂø

<UL> </UL> – U(nordered) L(ist) – Ó¨Èô ÀÎò¾¡ ÀðÊÂø
−ò§¾¡Î, ÀðÊÂÄ¢ý ¯Úô¨Àì ÌÈ¢ì¸ <LI> – L(ist) I(tem) ±ýÈ
ÀðʨÂÔõ §º÷ì¸ §ÅñÎõ.

´Õ Ó¨È ÀÎò¾¢Â ÀðʨÄô À¡÷ô§À¡õ.

<HTML>
<BODY>
<H1>
<CENTER><U>Ó¾ø ¾¨ÄôÒ</U></CENTER>
</H1>
¿¡ý Å¡í¸¢ Åó¾ Òò¾¸í¸û:
<OL>
<LI>´üÚ¨Á
<LI>¸½¢É¢ ¸üÚì ¦¸¡ûÙí¸û
<LI>§¿¡ÂüÈ Å¡ú×
<LI>Ò¨¸, ÁÉ¢¾ÛìÌô À¨¸
</OL>
</BODY>
</HTML>
§ÁÖûǨ¾ ¯í¸û ¯ÄŢ¢ø ¸ñË÷¸Ç¡É¡ø, Òò¾¸í¸û 1 Ó¾ø
4 Ũà Å⨺ô ÀÎò¾ô ÀðÊÕìÌõ. §ÅÚ Å¢¾Á¡É Å⨺¸¨ÇÔõ
¦ÀÈ ÓÊÔÁ¡? ÓÊÔõ.

a,b,c,d…
A,B,C,D…
i,ii,iii,iv…
I,II,II,IV…

§Áü¸ñ¼ Å⨺ Ó¨ÈôÀÊÔõ ¨¸Â¡Ç ÓÊÔõ.

<OL> ±ýÈ ¦¾¡¼ì¸ô ÀðÊ¢Ûû ±ýÉ Á¡¾¢Ã¢ Å⨺ §ÅñÎõ

±ýÚ ÌÈ¢ôÀ¢¼ §ÅñÎõ. ¯¾¡Ã½Á¡¸, a,b,c,d ±ýÈ Å⨺¢ø
§ÅñÎÁ¡É¡ø «Ð −ôÀÊ −Õ츧ÅñÎÁ’:

<OL type=”a”>

Ó¨Èô ÀÎò¾¡ ÀðÊÂÄ¢ø Åð¼Á¡É, ºÐÃÁ¡É ÒûÇ¢¸¨Çô

¦ÀÈÄ¡õ.

<UL type=”disc”> – ÅðÎ

<UL type=”square”> – ºÐÃõ
<UL type=”circle”> – Åð¼õ

Ó¨Èô ÀÎò¾ô Àð¼ ÁüÚõ Ó¨Èô ÀÎò¾ô À¼¡¾ ÀðʨÄ

¯í¸û ÀÊÅò¾¢ø ÒÌò¾¢ À¢üº¢ ¦ºöÐ À¡Õí¸û.

±Ø¾ô ÀÆ̧šõ ±î â ±õ ±ø À̾¢ 2

−ÐŨà ¸ñ¼ Àðʸû «¨Éò¨¾Ôõ ¨¸Â¡ñÎ ´Õ ÓبÁ¡É
ÀÊÅò¨¾ì ¸¡Ïõ Óý §ÁÖõ ´Õ ¯À§Â¡¸Á¡É ÀðʨÂô
À¡÷ô§À¡õ.
º¢Ä §¿Ãí¸Ç¢ø ÀÊÅò¾¢ý ÌÚ째 ¸¢¨¼ì §¸¡Î −¼ §ÅñÊÂ
§¾¨Å ²üÀ¼Ä¡õ. «¾üÌ <HR> «¾¡ÅÐ (H)orizontal (R)ule ±ýÈ
Àðʨ ¯À§Â¡¸ô ÀÎò¾§ÅñÎõ. −ó¾ <HR> ÀðʨÂ
¯À§Â¡¸¢ò¾¡ø ¾¢¨Ã¢ý −Õ ÒÈò¾¢Öõ ¦¾¡ÎõÀÊ¡¸ ´Õ ¸¢¨¼ì
§¸¡Î «¨ÁÔõ. §¾¨Å¡ɡø −¾ý «¸Äò¨¾ −ôÀÊ Ì¨ÈòÐì
¦¸¡ûÇÄ¡õ:

ÅÆ¢ 1: ÓØ §¸¡ðÊý «¸Äò¾¢ø −ò¾¨É º¾Å£¾õ ±ýÚ ¦º¡øÖ¾ø

<HR width=”40%”>

ÅÆ¢ 2: ¿ÁìÌ §ÅñÊ §¸¡Î, ±ò¾¨É ÒûÇ¢¸Ç¡ø(pixel) ¬É¾¡¸

−Õì¸ §ÅñÎõ ±ýÚ ¦º¡øÖ¾ø. §Áø ¯ûǨ¾ô §À¡Ä§Å, %
ÌÈ¢ −øÄ¡Áø ±Ø¾ §ÅñÎõ

<HR width=”40″>

−ÐŨà ¿¡õ ¸üÚì ¦¸¡ñ¼ Àðʸû:

<HTML>
<BODY>
<H1>,<H2>….<H6>
<B>
<P>
<BR>
<CENTER>
<FONT>
<OL>
<UL>
<LI>
<HR>

−¨Å¨¸¨Çì ¦¸¡ñÎ ¯Õš츢 Á¡¾¢Ã¢ ÀÊÅò¨¾ì ¸£§Æ

¾ó¾¢Õ츢§Èý. ¦ÅðÊ, ´ðÊ ¯ÄŢ¢ø À¡Õí¸û −õÁ¡¾¢Ã¢ ´Õ
ÓبÁÂ¡É ÀÊÅò¨¾ ±Ø¾¢ô À¡Õí¸û.

−Ð Á¢¸, Á¢¸ «ÊôÀ¨¼Â¡É ´Õ ÀÊÅõ. −ýÛõ ¿¢ÃõÀ −Õ츢ÈÐ.

<HTML>
<BODY>
<H2><CENTER><U>¿¡ý ÀÊò¾ Òò¾¸í¸û</U></CENTER></H2>
<P>¦ºýÈ Å¡Ãõ º¢Ä Òò¾¸í¸û Å¡í¸¢ Åó§¾ý. μö× ¸¢ðÊÂ
§¿Ãí¸Ç¢ø ´ù¦Å¡ýÈ¡ö ÀÊò§¾ý ±øÄ¡õ ÀÂÛûÇ Òò¾¸í¸û.
¸£ú ¸¡ÏÀ¨Å¾¡ý ¿¡ý Å¡í¸¢Åó¾ Òò¾¸í¸û:</P>
<OL><B><I>
<LI><A HREF=”#´üÚ¨Á”>´üÚ¨Á</A>
<LI><A HREF=”#¸½¢É¢”>¸½¢É¢ ¸üÚì ¦¸¡ûÙí¸û</A>
<LI><A HREF=”#§¿¡ÂüÈ Å¡ú×”>§¿¡ÂüÈ Å¡ú×</A>
<LI><A HREF=”#À¨¸”>Ò¨¸, ÁÉ¢¾ÛìÌô À¨¸</A>
</I></B></OL>
«ó¾ô Òò¾¸í¸Ç¢Ä¢ÕóÐ ´Õ º¢Ä Åâ¸¨Ç −í§¸ ¸¡ñ§À¡õ.
<UL><B>
<LI><A NAME=”´üÚ¨Á”></A>´üÚ¨Á
</B></UL>
´üÚ¨Á ±ýÀÐ −ý¨È ¯Ä¸ò¾¢ø «Õ¸¢ ÅÕõ ´ýÈ¡¸¢Å¢ð¼Ð.
´§Ã §¿¡ì¸ò¾¢ü¸¡¸î ¦ºÂøÀÎõ −Âì¸í¸û «øÄÐ ¾É¢ ÁÉ¢¾÷¸û
ܼ ¾õÁ¢¨¼§Â ´üÚ¨Á ¸¡½ ÁÚ츢ýÈÉ÷. −¾ý À¢Ã¾¡É ¸¡Ã½õ
¾ý¨É ÓýÉ¢Úò¾ §ÅñÎõ ±ýÈ ±ñ½§Á.
<UL><B>
<LI><A NAME=”¸½¢É¢”></A>¸½¢É¢ ¸üÚì ¦¸¡ûÙí¸û
</B></UL>
−ý¨È ¸¡Ä ¸ð¼ò¾¢ø ¸½¢É¢ì ¸øÅ¢ ±ýÀÐ −ýȢ¨Á¡¾
´ýÈ¡¸¢Å¢ð¼Ð. «¾¢Öõ ¾¡ö ¦Á¡Æ¢Â¢ø ¸üÀ¢ôÀ¦¾ýÀÐ §¾¨Å
±ýÚ ¬¸¢Å¢ð¼Ð. ´Õ À¨¼ôÀ¡Çý ±ýÈ Ó¨È¢ø ¾¡ý º¢ÃÁô
ÀðÎ ÅÊò¾ ¾ý ¸ÕòÐì¸û º¢¨¾Â¡Áø «¨ÉÅÕìÌõ ÒâÔõ
Åñ½Óõ, «§¾ §¿Ãò¾¢ø ÒÐ ¾Á¢úî ¦º¡ü¸¨Ç ÀÊôÀÅ÷ Áɾ¢ø
À¾¢ÔÁ¡Ú ¦ºöÅÐõ «ÅÛ¨¼Â ¸¼¨Á¡¸¢ÈÐ.
<UL><B>
<LI><A NAME=”§¿¡ÂüÈ Å¡ú×”>§¿¡ÂüÈ Å¡ú×</A>
</B></UL>
‘§¿¡ÂüÈ Å¡ú§Å ̨ÈÅüÈ ¦ºøÅõ’ ±ýÀÐ ÀƦÁ¡Æ¢.<BR>
«ó¾ ¦ºøÅò¨¾ º¢Ä÷ −Âü¨¸Â¢§Ä§Â −Æó¾¢Õó¾¡Öõ −ý¨ÈÂ
ÁÕòÐÅ Óý§ÉüÈò¾¢ø «¨Å¸¨Ç ¾¢ÕõÀô ¦ÀÚŦ¾ýÀÐ
º¡ò¾¢ÂÁ¡É ´ýÈ¡¸¢ ÅÕ¸¢ÈÐ. −ýÚ ¿¢ÈÁ¢¸¨Çô ÀüȢ ¬ö×
«¾ý ¯îºò¨¾§Â ±ðÊ¢Õ츢ÈÐ.
<UL><B>
<LI><A NAME=”À¨¸”></A>Ò¨¸, ÁÉ¢¾ÛìÌô À¨¸
</B></UL>
Ò¨¸ôÀ¾¡ø ¯ñ¼¡Ìõ ¾£¨Á¸¨Ç Ò¨¸ôÀÅ÷¸§Ç «È¢ó¾¢ÕóÐõ
«Å÷¸û º¢ó¾¢ôÀ¾¢ø¨Ä. ‘±ý ¯¼ø ¦¸ð¼¡ø ¯É즸ý¦É?’
±ýÀÐ «Å÷¸û ±ñ½õ. «Å÷ ¯¼õÒ, «Å÷ ¿¢¨ÉòÐì
¦¸¡ûÇðÎõ. <I>¬É¡ø ¿¡ý ¿¡ý ÍÅ¡º¢ìÌõÀÊ¡¸ «Å÷ °¾¢ò
¾ûÙÅÐ ±ó¾ Å¢¾ò¾¢ø ¿¢Â¡Âõ?</I>
<HR>
<FONT face = “InaimathiTSC” color=”MidnightBlue” size=”-
2″>ÌÈ¢ôÒ:<BR>
§Áü¸ññ¼¨Å «¨ÉòÐõ ¸üÀ¨É§Â.<BR>
−ó¾ ¬ì¸ò¾¢ü¸¡É Á¡¾¢Ã¢Â¡¸ ±Ø¾ô Àð¼Ð.<BR>
-¯Á÷</FONT>
</BODY>
</HTML>

−ó¾ ¦Á¡Æ¢Â¢ý º¢ÈôÒ «õºõ ±ýÉ ±ýÈ¡ø μâ¼ò¾¢Ä¢ÕóÐ

ÀÊÅò¾¢ý §ÅÚ À̾¢ì§¸¡ «øÄÐ §ÅÚ Àì¸ò¾¢ü§¸¡ ¾¡Å Ũ¸
¦ºöÅÐ. −¨¾ hyper linlk ±ý¸¢§È¡õ. §À¡¸ §ÅñÊ −Ä쨸,
ÍðÊ ¿¢üÌõ ¦º¡ü¸Ù¼§É¡ «øÄÐ À¼òм§É¡
´ð¼ ¨ÅìÌõ Àðʾ¡ý <A> ±ýÀÐ. −ó¾ <A> ÀðÊ¢ý ¯û§Ç
±ó¾ Á¡¾¢Ã¢Â¡É ¦¾¡¼÷Ò, ±ó¾ −ÄìÌ ±ýÚ ÌÈ¢ì¸ §ÅñÎõ.
−íÌ, −ó¾ Àðʨ ¯À§Â¡¸¢òÐ ±ùÅ¡Ú ÀÊÅò¾¢ý §ÅÚÀð¼
À̾¢¸ÙìÌò ¾¡Å¡Ä¡õ ±ýÚ ¸¡ñ§À¡õ.

μâ¼ò¾¢Ä¢ÕóÐ ÁüÈ −¼ò¾¢üÌò ¾¡Å §ÅñÎÁ¡É¡ø −ÃñÎ

Å¢¼Âí¸¨Çò ¾£÷Á¡Éõ ¦ºö §ÅñÎõ. ´ýÚ ÍðÊ; −Ãñ¼¡ÅÐ
Íð¼ôÀÎõ −¼õ. ӾĢø Íð¼ôÀÎõ −¼ò¨¾ ÌȢ£Π¦ºöÂ
§ÅñÎõ. «¾¡ÅÐ «ó¾ −¼ò¾¢üÌ ´Õ ¦ÀÂ÷ ¾Ã §ÅñÎõ. ¿¡õ
ÓýÒ ¸ñ¼ ÀÊÅò¾¢ø ¿¡ýÌ Òò¾¸ò ¾¨ÄôÒ츨Çò ¾óÐ,
«ÅüȢĢÕóÐ º¢Ä Å⸨Ǥõ ¸ñ§¼¡ õ. ¿£í¸û §¿Ã¡¸ “¸½¢É¢
¸üÚì ¦¸¡ûÙí¸û” À̾¢ìÌò ¾¡Å §ÅñÎõ ±ýÚ ¨ÅòÐì
¦¸¡ûÙí¸û. ӾĢø «ó¾ô À̾¢ìÌ ´Õ ¦ÀÂ÷ ¾Ã §ÅñÎõ.
«ó¾ô ¦ÀÂ÷ ±ÐÅ¡¸×õ −Õì¸Ä¡õ. ¯¾¡Ã½Á¡¸, “¸½¢É¢” ±ýÚ
¦ÀÂâ¼ §ÅñÎÁ¡É¡ø «ó¾ô À̾¢Â¢ý ¦¾¡¼ì¸ò¾¢ø ¸£úì
¸ñ¼Å¡Ú Àðʨ −¨½ì¸ §ÅñÎõ.

<A NAME=”¸½¢É¢”></A>

À¢ýÉ÷, ÍðʨÂì ÌÈ¢ì¸ §ÅñÎõ. ¿¡õ ¿¡ýÌ Òò¾¸í¸¨ÇÔõ

Å⨺ô ÀÎò¾¢ ÀðÊÂĢ𧼡 ÁøÄÅ¡? «¨Å¸¨Ç ÍðÊ¡¸
Á¡üÈ¢ì ¦¸¡ûÇÄ¡õ. “¸½¢É¢ ¸üÚì ¦¸¡ûÙí¸û” ±ýÀ¾üÌ
ÓýÉ¡ø <A HREF=”#¸½¢É¢”> ±ýÚ ÌÈ¢ì¸ §ÅñÎõ
−ôÀÊî ¦ºöžý ãÄõ “¸½¢É¢” ±ýÈ ¦ÀÂâ¼ôÀð¼ −¼ò¾¢üÌò
¾¡Å §ÅñÎõ ÌȢ츢§È¡õ. «Ð −ôÀÊ −ÕìÌõ:

<A HREF=”#¸½¢É¢”>¸½¢É¢ ¸üÚì ¦¸¡ûÙí¸û</A>

(# ±ýÈ ÌÈ¢¨Â “¸½¢É¢” ìÌ ÓýÉ¡ø −ÎÅÐ «Åº¢Âõ)

−ó¾ô Àðʸû −¨½ì¸ôÀð¼ ÀÊÅõ ¸£§Æ ¾ó¾¢Õ츢§Èý. ´Õ

Ó¨È ºÚ §¿¡ð¼Á¢ðÎÅ¢ðÎ, ²¾¡ÅÐ ´Õ ¦ÀÂâø(¯¾¡: myhtml.html)
§ºÁ¢òÐ ¯ÄŢ¢ø §º¡¾¢òÐô À¡Õí¸û.

<HTML>
<BODY>
<H2><CENTER><U>¿¡ý ÀÊò¾ Òò¾¸í¸û</U></CENTER></H2>
<P>¦ºýÈ Å¡Ãõ º¢Ä Òò¾¸í¸û Å¡í¸¢ Åó§¾ý. μö× ¸¢ðÊÂ
§¿Ãí¸Ç¢ø ´ù¦Å¡ýÈ¡ö ÀÊò§¾ý ±øÄ¡õ ÀÂÛûÇ Òò¾¸í¸û.
¸£ú ¸¡ÏÀ¨Å¾¡ý ¿¡ý Å¡í¸¢Åó¾ Òò¾¸í¸û:</P>
<OL><B><I>
<LI><A HREF=”#´üÚ¨Á”>´üÚ¨Á</A>
<LI><A HREF=”#¸½¢É¢”>¸½¢É¢ ¸üÚì ¦¸¡ûÙí¸û</A>
<LI><A HREF=”#§¿¡ÂüÈ Å¡ú×”>§¿¡ÂüÈ Å¡ú×</A>
<LI><A HREF=”#À¨¸”>Ò¨¸, ÁÉ¢¾ÛìÌô À¨¸</A>
</I></B></OL>
«ó¾ô Òò¾¸í¸Ç¢Ä¢ÕóÐ ´Õ º¢Ä Åâ¸¨Ç −í§¸ ¸¡ñ§À¡õ.
<UL><B>
<LI><A NAME=”´üÚ¨Á”></A>´üÚ¨Á
</B></UL>
´üÚ¨Á ±ýÀÐ −ý¨È ¯Ä¸ò¾¢ø «Õ¸¢ ÅÕÁ’ ´ýÈ¡¸¢Å¢ð¼Ð.
´§Ã §¿¡ì¸ò¾¢ü¸¡¸î ¦ºÂøÀÎõ −Âì¸í¸û «øÄÐ ¾É¢ ÁÉ¢¾÷¸û
ܼ ¾õÁ¢¨¼§Â ´üÚ¨Á ¸¡½ ÁÚ츢ýÈÉ÷. −¾ý À¢Ã¾¡É ¸¡Ã½õ
¾ý¨É ÓýÉ¢Úò¾ §ÅñÎõ ±ýÈ ±ñ½§Á.
<UL><B>
<LI><A NAME=”¸½¢É¢”></A>¸½¢É¢ ¸üÚì ¦¸¡ûÙí¸û
</B></UL>
−ý¨È ¸¡Ä ¸ð¼ò¾¢ø ¸½¢É¢ì ¸øÅ¢ ±ýÀÐ −ýȢ¨Á¡¾
´ýÈ¡¸¢Å¢ð¼Ð. «¾¢Öõ ¾¡ö ¦Á¡Æ¢Â¢ø ¸üÀ¢ôÀ¦¾ýÀÐ §¾¨Å
±ýÚ ¬¸¢Å¢ð¼Ð. ´Õ À¨¼ôÀ¡Çý ±ýÈ Ó¨È¢ø ¾¡ý º¢ÃÁô
ÀðÎ ÅÊò¾ ¾ý ¸ÕòÐì¸û º¢¨¾Â¡Áø «¨ÉÅÕìÌõ ÒâÔõ
Åñ½Óõ, «§¾ §¿Ãò¾¢ø Ò¾¤ ¾Á¢úî ¦º¡ü¸¨Ç ÀÊôÀÅ÷ Áɾ¢ø
À¾¢ÔÁ¡Ú ¦ºöÅÐõ «ÅÛ¨¼Â ¸¼¨Á¡¸¢ÈÐ.
<UL><B>
<LI><A NAME=”§¿¡ÂüÈ Å¡ú×”>§¿¡ÂüÈ Å¡ú×</A>
</B></UL>
‘§¿¡ÂüÈ Å¡ú§Å ̨ÈÅüÈ ¦ºøÅõ’ ±ýÀÐ ÀƦÁ¡Æ¢.<BR>
«ó¾ ¦ºøÅò¨¾ º¢Ä÷ −Âü¨¸Â¢§Ä§Â −Æó¾¢Õó¾¡Öõ −ý¨ÈÂ
ÁÕò¾¤Å Óý§ÉüÈò¾¢ø «¨Å¸¨Ç ¾¢ÕõÀô ¦ÀÚŦ¾ýÀÐ
º¡ò¾¢ÂÁ¡É ´ýÈ¡¸¢ ÅÕ¸¢ÈÐ. −ýÚ ¿¢ÈÁ¢¸¨Çô ÀüȢ ¬ö×
«¾ý ¯îºò¨¾§Â ±ðÊ¢Õ츢ÈÐ.
<UL><B>
<LI><A NAME=”À¨¸”></A>Ò¨¸, ÁÉ¢¾ÛìÌô À¨¸
</B></UL>
Ò¨¸ôÀ¾¡ø ¯ñ¼¡Ìõ ¾£¨Á¸¨Ç Ò¨¸ôÀÅ÷¸§Ç «È¢ó¾¢ÕóÐõ
«Å÷¸û º¢ó¾¢ôÀ¾¢ø¨Ä. ‘±ý ¯¼ø ¦¸ð¼¡ø ¯É즸ý¦É?’
±ýÀÐ «Å÷¸û ±ñ½õ. «Å÷ ¯¼õÒ, «Å÷ ¿¢¨ÉòÐì
¦¸¡ûÇðÎõ. <I>¬É¡ø ¿¡ý ¿¡ý ÍÅ¡º¢ìÌõÀÊ¡¸ «Å÷ °¾¢ò
¾ûÙÅÐ ±ó¾ Å¢¾ò¾¢ø ¿¢Â¡Âõ?</I>
<HR>
<FONT face = “InaimathiTSC” color=”silver” size=”-2″>ÌÈ¢ôÒ:<BR>
§Áü¸ññ¼¨Å «¨ÉòÐõ ¸üÀ¨É§Â.<BR>
−ó¾ ¬ì¸ò¾¢ü¸¡É Á¡¾¢Ã¢Â¡¸ ±Ø¾ô Àð¼Ð.<BR>
-¯Á÷</FONT>
</BODY>
</HTML>

§Áü¦¸¡ñÎ, ÀÊÅò¨¾ «Äí¸¡Ãô ÀÎòÐŨ¾ô ÀüÈ¢ −É¢

À¡÷ô§À¡õ.
«¾üÌ Óý Åñ½í¸¨Çô ÀÂýÀÎòÐÅÐ ÀüÈ¢ «È¢óÐ
¦¸¡û§Å¡õ. ¿¡õ ¸ñ¼ Á¡¾¢Ã¢ô ÀÊÅò¾¢ø, Åñ½í¸¨Çô
¦ÀÚžü¸¡¸ “red”, “blue” ±ýÚ ¦º¡ü¸¨Çô ÀÂýÀÎò¾¢§É¡õ.
ÌÈ¢ôÀ¢ð¼ Åñ½í¸ÙìÌ ÁðΧÁ ¦º¡ü¸¨Çô ÀÂýÀÎò¾ÓÊÔõ.
ÀÊÅí¸Ç¢ø ÀÂýÀÎò¾ −¨Å §À¡Ðõ ±ýÈ¡Öõ, ¦¾¡Æ¢ø ӨȢø
−¨½Âô À¸’¸í¸¨Ç −ÂüÚõ§À¡Ð §ÅÚ Ó¨È¨Âì
¨¸Â¡Ù¸¢§È¡õ. −õÓ¨È ãÄõ Å¢ÕõÀ¢Â Åñ½ì ¸Ä¨Å¸¨Äô
¦ÀÈ ÓÊÔõ. º¢ÅôÒ, À, ¿£Äõ ¬¸¢ÂÅüÈ¢ý §ÅÚÀð¼
«Ç׸¨Ç ‘À¾¢É¡Ú ±ñ½¢Â’ ӨȢø(hexadecimal: hexa-¬Ú,
decimal-ÀòÐ) ÌÈ¢ì¸ §ÅñÎõ. −ó¾ ‘À¾¢É¡Ú ±ñ½¢Â’Ó¨È
±ýÈ¡ø ±ýÉ? ¿¡õ º¡¾¡Ã½Á¡¸ ±ñÏõ§À¡Ð 0 −ø ¦¾¡¼í¸¢ 9
Ũà ÀòÐ ¦¸¡ñ¼ ¦¾¡Ì¾¢Â¡¸ ±ñϧšõ. ‘À¾¢É¡Ú’ Ũ¸
±ñ½¢ì¨¸Â¢ø ÀòÐìÌ §Áø ±ôÀÊô ¦ÀÚÅÐ?

ÓÊó¾ Ũâø ±Ç¢Â ӨȢø ¾Õ¸¢§Èý. ÒâóЦ¸¡ûÇ

ÓÂÖí¸û. −ø¨Ä¦ÂýÈ¡Öõ À¡¾Á¢ø¨Ä; Å¢ðÎÅ¢Îí¸û.
−§¾¡ ÅÆ¢:

9 ìÌô À¢ý A, B, C, D, E, F ±ýÈ 6 ±ØòÐ츨ÇÔõ §º÷òÐì

¦¸¡ûÇ §ÅñÎõ.

«Ð −ôÀÊ «¨ÁÔõ:

0,1,2,3,4,5,6,7,8,9, A, B, C, D, E, F

º¡¾¡Ã½ ±ñ ӨȢø 9 ìÌô À¢ý −¼Ð ÒÈõ 1 −ðÎ «Îò¾

¦¾¡Ì¾¢Â¢ý ¦¾¡¼ì¸Á¡¸ ÅÄôÒÈõ 0 −θ¢§È¡§Á¡(10 ±ýÀ¾¡¸),
«§¾ Á¡¾¢Ã¢, ‘À¾¢É¡Ú Ũ¸’ ±ñ½¢ì¨¸Â¢ø 15 ÓÊó¾×¼ý
(«¾¡ÅÐ F Ó¨¼ó¾ À¢ýÉ÷) ´Õ ¦¾¡Ì¾¢ ÓÊó¾¾¢ý «¨¼Â¡ÇÁ¡¸
−¼ôÒÈõ 1 õ «Îò¾ ¦¾¡Ì¾¢Â¢ý ¦¾¡¼ì¸Á¡¸ ÅÄô ÒÈõ 0 ¯õ
−¼ §ÅñÎõ. «¾¡ÅÐ −ó¾ ӨȢø 16 ³ì ÌÈ¢ì¸
§Åñ¼¤Á¡É¡ø 10 ±ýÚ ±Ø¾ §ÅñÎõ. ºÃ¢ º¡¾¡Ã½ ±ñ
Å⨺¢Öõ 10 ¯ñÎ ‘À¾¢É¡Ú Ũ¸’¢Öõ 10 ¯ñÎ. −¨¾
±ùÅ¡Ú À¢Ã¢ò¾È¢ÅÐ? −¾üÌ ‘À¾¢É¡Ú Ũ¸’±ñ Å⨺ ±ýÀ¨¾
¯½÷ò¾ HEX (hexadecimal) ±ýÀ¨¾î §ºü¸ §ÅñÎõ. «¾¡ÅÐ
‘À¾¢É¡Ú Ũ¸’ ±ñ½¢ì¨¸Â¢ø 16 ³ì ÌÈ¢ì¸ 10HEX ±ýÚ ±Ø¾
§ÅñÎõ.

−É¢, −ó¾ ±ñ ӨȨÂì ¦¸¡ñÎ ±ùÅ¡Ú Åñ½í¸¨Çì

ÌÈ¢ì¸Ä¡õ ±ýÚ À¡÷ô§À¡õ. ¿¡ý ²ü¦¸É§Å ±Ø¾¢Â Ò¨¸ôÀ¼ì
¸¨Ä ÁüÚõ Åñ½ì ¸Ä¨Å ÀüȢ ¬ì¸í¸¨Ç ¿¢¨É× ÜÚí¸û.

«ÊôÀ¨¼ Åñ½í¸Ç¡É º¢ÅôÒ, À, ¿£Äõ ¬¸¢ÂÅüȢĢÕó§¾

À¢È Åñ½í¸¨Ç ¦ÀÚ¸¢§È¡õ ±ýÀ¨¾ ¿¡õ «È¢§Å¡õ. Áïºû
Åñ½ò¨¾ô ¦ÀÈ, º¢Åô¨ÀÔõ À¨ÂÔõ ¸Äì¸ §ÅñΦÁýÚõ;
¦ºó¿£Äò¨¾ô(megenta) ¦ÀÈ, º¢Åô¨ÀÔõ ¿£Äò¨¾Ôõ ¸Äì¸
§ÅñΦÁýÚõ; ¿£ÄôÀ¨Âô(cyan) ¦ÀÈ, ¿£Äò¨¾Ôõ
À¨ÂÔõ ¸Äì¸ §Å½’ΦÁýÚõ «È¢ó¾¢Õ츢§È¡õ. ÁüÈ
Åñ½í¸Ùõ «ÊôÀ¨¼ Åñ½í¸Ç¢ý §ÅÚÀð¼ Å¢¸¢¾ì
¸Ä¨Å¸§Ç ±ýÚõ «È¢§Å¡õ. ÀðÊ¢ø −ó¾ ±ñ¸¨Ç
¯À§Â¡¸¢ìÌõ§À¡Ð º¢ÅôÒ, À, ¿£Äõ(RGB) ±ýÈ Å⨺
ӨȨÂì ¨¸Â¡Ç §ÅñÎõ. ´ù¦Å¡Õ Åñ½Óõ 0 Ä¢ÕóÐ 256
«Ä׸ǡø «¾¡ÅÐ HEX −ø 00 −Ä¢ÕóÐ FF ŨáÉ
«Ç׸ǡ¸ −Õì¸ §ÅñÎõ.
μù¦Å¡ýÈ¢üÌõ −ÃñÊÃñ¼¡¸ 6 −Äì¸õ «øÄÐ ±ØòÐ츨Çì
¦¸¡ñ¼¾¡¸ −ÕìÌõ. ¯¾¡Ã½Á¡¸ ÁïºÙìÌ FFFF00 ¬¸
−ÕìÌõ. −¾¢ø Ó¾ø FF º¢Åô¨ÀÔõ, −Ãñ¼¡ÅÐ FF À¨ÂÔõ
00 ¿£Äò¨¾Ôõ ÌÈ¢ìÌõ. −íÌ ¿£Äõ 00 ±ýÈ¢ÕôÀ¾¡ø, ¿£Äò¾¢ý
ÀíÌ ²ÐÁ¢ø¨Ä ±ýÚ ¦¾Ã¢¸¢ÈÐ. −ùÅ¡Ú −Äì¸í¸¨Ç Á¡üÈ¢
±ñ½üÈ Åñ½í¸¨Ç ¦ÀÈÄ¡õ.

−É¢ ÀðÊ¢ø ±ùÅ¡Ú ¨¸Â¡ÇÄ¡õ ±ýÚ À¡÷ô§À¡õ. ¯¾¡Ã½Á¡¸

¿õ Á¡¾¢Ã¢ô ÀÊÅò¾¢ý À¢ýÉÃí¸¢ý(background) Åñ½ò¨¾
ÁïºÇ¡¸ Á¡üÈ ±ñϸ¢È£÷¸û ±ýÚ ¨ÅòÐì ¦¸¡û٧šõ. ¸£úì
¸ñ¼Å¡Ú <BODY> ÀðÊ¢ø ¾¢Õò¾õ ¦ºöÂ×õ:

<HTML>
<BODY bgcolor=”#FFFF00″>

−¾¢ø ¸ÅÉ¢ì¸ §ÅñÊÂÐ, FFFF00 ±ýÈ «Ä̸ÙìÌ Óý # −¼

§ÅñÊÂÐ. ÀÊÅò¾¢ø Á¡üÈõ ¦ºöÐ §º¡¾¢Ðô À¡Õí¸û. Ŧù§ÅÚ
«Ç׸û(±ØòÐ F ³ò ¾¡ñ¼ì ܼ¡Ð) −ðÎõ §º¡¾¢Ðô À¡Õí¸û.

ÌÈ¢ôÒ:

−òмý −¨½ì¸ô ÀðÊÕìÌõ º¢È¢Â jpg §¸¡ô¨À ¿¡õ §º¡¾¢Ðì

¦¸¡ñÊÕìÌõ ÀÊÅõ −ÕìÌõ «§¾ directory −ø §ºÁ¢òÐì
¦¸¡ûÇ×õ.

ÀÊÅò¾¢ý À¢ýÉÃí¸¢ý Åñ½ò¨¾ Á¡üÈ <BODY> ÀðÊ¢ø

bgcolor(BackGround color) ±ýÀ¨¾î §ºü¸ §ÅñÎõ ±ýÚ ¸ñ§¼¡
õ. −ùÅ¡§È Å¡÷ôÀ¢ý(±ØòÐÕ -font) Åñ½ò¨¾ Á¡üÈ HEX ±ñ
ӨȨÂô ÀÂý ÀÎò¾Ä¡õ. Åñ½ô ¦ÀÂ÷¸Ùõ «¨Å¸Ù측É
HEX Á¾¢ôÒì¸Ùõ −ó¾ ÀÊÅò¾¢ý −Ú¾¢Â¢ø ¾Ãô ÀðÊä츢ýÈÉ.
¦ÀÂ÷¸¨Ç§Â¡ «øÄÐ «¾ý Á¾¢ôÒ츨ǧ¡ ÀðʸǢø
À¡Å¢ì¸Ä¡õ.

ÀÊÅò¨¾ ¦ÁÕÜðÎõ º¢Ä Å¢¼Âí¸¨Çô À¡÷òÐì ¦¸¡ñÊÕ¸¢§È¡õ.

−É¢ À¢ýÉÃí¸¢ø ¿£í¸û Å¢ÕõÒõ ´Õ À¼ò¨¾ ±ùÅ¢¾õ
«¨Áì¸Ä¡õ ±ýÚ À¡÷ô§À¡õ. ¿¡õ Åñ½õ ¾ÕžüÌî ¦ºö¾Ð
À§¡Ä§Å <BODY> ÀðÊ¢ø ¸£úì ¸ñ¼Å¡Ú §º÷ì¸ §ÅñÎõ:

<BODY background=bg.jpg>

ÀÊÅò¨¾ §ºÁ¢òÐ ¯ÄŢ¢ø À¡Õí¸û. ¯í¸û ÀÊÅõ §ÁÖõ

¦ÁÕÜð¼ô À𼾡¸ −ÕìÌõ.

¿¡õ −íÌ À¡÷òÐ ÅÕÅÐ, ´ÕÀÊÅò¨¾(document)

Á£Ô¨ÃÌÈ¢¦Á¡Æ¢Â¢ø (HTML) ±ùÅ¡Ú ±Ø¾Ä¡õ ±ýÀ¨¾ô ÀüÈ¢Ôõ
«¨¾ ±ôÀÊ ¦ÁÕÜð¼Ä¡õ ±ýÀÐ ÀüÈ¢Ôõ¾¡ý.

−ô§À¡Ð ¿£í¸û ¯í¸û ÅÃ× ¦ºÄ× ¸½ìÌ(−¾üÌõ HTML-¬

±ýÚ §¸ð¸¡¾£÷¸û!) «øÄÐ ´Õ ¸Å¢¨¾ ±ØО¡¸ ¨ÅòÐì
¦¸¡ûÙí¸û. ¸Å¢¨¾Â¢ý Åâ¸û ºüÚ ÓýÛõ À¢ýÛÁ¡¸ «¨ÁÂ
§ÅñÊ ÅÃÄ¡õ. ¬É¡ø ¿õ Á£Ô¨ÃÌÈ¢¦Á¡Æ¢, ¦Åû¨Ç
−¨¼¦ÅÇ¢¸¨Ç ¦ÅðÊò ¾ûǢŢÎõ ±ýÚ «È¢§Å¡õ. ¯í¸ÙìÌ,
¿£í¸û ãÄò¾¢ø ±ùŨ¸Â¢ø ±Øи¢È£÷¸§Ç¡, «õÁ¾¢Ã¢§Â
¯ÄŢ¢Öõ ¸¡½§ÅñÎõ. ±ýÉ ¦ºöÂÄ¡õ? −¾üÌõ ÅÆ¢¾Õ¸¢ÈÐ
´Õ ÀðÊ. «Ð¾¡ý <PRE> ±ÉôÀÎõ (Predefined) ÀðÊ.
<PRE> </PRE> −¨Å¸ÙìÌ −¨¼Â¢ø ±õÁ¡¾¢Ã¢ ±Ø¾ô
Àθ¢ýÈɧš, ¯ÄŢ¢Öõ «õÁ¡¾Ã¢§Â §¾¡ýÚõ. ¸£§Æ ¸¡Ïõ
À̾¢¨Â ¦ÅðÊ ´Õ ¯¨Ã ¦¾¡ÌôÀ¢Â¢ø (text editor) pre.html ±ýÈ
¦ÀÂâø(«øÄÐ ²§¾Ûõ ´Õ ¦ÀÂâø) §ºÁ¢òÐ ¯ÄŢ¢ø §º¡¾¢Ðô
À¡Õí¸û:

<HTML>
<BODY>
<H2> <B><CENTER>−ó¾ À̾¢ ÀðÊ −¼ôÀ¼¡¾
À̾¢</CENTER><B></H2>

¸ñ½¢ÕóÐõ ¸øÄ¡¾¡÷ Å¡ú쨸 ±ýÚõ

¸¡Ã¢ÕÇ¢ø ¿¼ì¸¢ýÈ ¦º¦Â§Ä ¡Ìõ
ÁñÏìÌû Á¨Èó¾¢ÕìÌõ ¿£¨Ãô §À¡Ä
Á¡ó¾ÕìÌû ´Ç¢ó¾¢ÕìÌõ ¾¢È¨Éì ¸¡½
Ññ½È¢¨Å ¦ÅÇ¢ôÀÎòÐõ ¸øÅ¢ §¾¨Å
ѨÃìÌÁ¢Æ¢ §À¡ÄÐ×õ ¦À¡íÌ ¾üÌõ
±ñ½ò¨¾ ±Îò¾¢ÂõÒõ ¬üÈ ÖìÌõ
±Øò¾È¢§Å ´Ç¢Å¢Ç측ö Á¢Ç¢÷óÐ ¿¢üÌõ.

-¸Å¢ì ¦¸¡ñ¼ø Á¡. ¦ºíÌðÎÅý

<HR>

<H2> <B><CENTER>−ó¾ À̾¢ ÀðÊ −¼ôÀð¼

À̾¢</CENTER><B></H2>
<PRE>
¸ñ½¢ÕóÐõ ¸øÄ¡¾¡÷ Å¡ú쨸 ±ýÚõ
¸¡Ã¢ÕÇ¢ø ¿¼ì¸¢ýÈ ¦º¦Â§Ä ¡Ìõ
ÁñÏìÌû Á¨Èó¾¢ÕìÌõ ¿£¨Ãô §À¡Ä
Á¡ó¾ÕìÌû ´Ç¢ó¾¢ÕìÌõ ¾¢È¨Éì ¸¡½
Ññ½È¢¨Å ¦ÅÇ¢ôÀÎòÐõ ¸øÅ¢ §¾¨Å
ѨÃìÌÁ¢Æ¢ §À¡ÄÐ×õ ¦À¡íÌ ¾üÌõ
±ñ½ò¨¾ ±Î¾’¾¢ÂõÒõ ¬üÈ ÖìÌõ
±Øò¾È¢§Å ´Ç¢Å¢Ç측ö Á¢Ç¢÷óÐ ¿¢üÌõ.

-¸Å¢ì ¦¸¡ñ¼ø Á¡. ¦ºíÌðÎÅý

</PRE>
</BODY>
</HTML>

§Á§Ä ¦ºøÄ...

−ôÀ¾¢× ÀüȢ ¯í¸û «À¢ôÀ¢Ã¡Âí¸¨Ç “¯í¸û ¸ÕòÐì¸û”

À̾¢Â¢ø À¾¢× ¦ºöÔí¸û!

??? ?
Search for:

±Æ¢ø¿¢Ä¡ ÀüÈ¢..

• Ó¸ôÒôÀì¸õ
• «È¢Ó¸õ
• ±Æ¢ø¿¢Ä¡ 10 ¬ñθû!
• Ôò¾Á¢øÄ¡¾ âÁ¢ §ÅñÎõ!
• ¯í¸û ¸ÕòÐì¸û!
À¾¢ôÒì¸û

• ¸½¢É¢ì¸ðΨøû (44)
o ±Ø¾ôÀÆ̧šõ HTML (7)
• ÔÉ¢§¸¡ð ¸ðΨøû (24)
o ¸ÕòÐì¸ñ§½¡ð¼õ (7)
• ¦À¡ÐÅ¡É ¸ðΨøû (12)
• ÀÊòÐîͨÅò¾¨Å (11)
• §¸ðÎîͨÅò¾¨Å (2)
• ¨ºÅÓõ ¾Á¢Øõ (49)
• ¸Å¢î§º¡¨Ä (15)
o ¿¡ý ú¢ò¾ º¢Ä ¸Å¢¨¾¸û (12)
o ¿Ç¢É¢Â¢ý ¸Å¢¨¾¸û (1)
o ¯í¸û ¸Å¢¨¾¸û (1)
o −á.ºõÀó¾ý ¸Å¢¨¾¸û (1)
• ÌÈÙõ ¿¢¸ú×õ (8)
• º¢Ú¸¨¾¸û (20)
o ¯í¸û º¢Ú¸¨¾¸û (8)
o ¿Ç¢É¢Â¢ý º¢Ú¸¨¾¸û (12)
• ¦ºö¾¢îº¢¾Èø¸û (1)
• ¿¢¨ÉÅ¢ø ¿¢üÀ¨Å (3)

¯¾Å¢ôÀì¸í¸û

±Ø¾ô ÀÆ̧šõ, ±î â ±õ ±ø À̾¢ 3

−ó¾ ãýÈ¡ÅÐ À̾¢Â¢ø ¿¡õ ¸¡½ô §À¡ÅÐ, ´Õ ŨÄô
Àì¸ò¾¢ü¦¸É
¿£í¸û ÀÊÅõ ±Ø¾ô §À¡Å¾¡¸ −Õó¾¡ø ̨Èó¾ «Ç×
«È¢ó¾¢Õì¸
§ÅñÊ Ţ¼Âí¸¨Çô ÀüÈ¢Ð.´Õ ŨÄô Àì¸õ ±ýÀÐ, ¿¡õ
−ÐŨà ¸ñ¼ ÀÊÅò¾¢üÌ §ÁõÀð¼Ð.
±¾¡Å¦¾¡Õ ŨÄôÀì¸ò¾¢ý ãľ’¨¾ (source) À¡÷ò¾£÷¸Ç¡É¡ø
²Ã¡ÇÁ¡É Àðʸ¨Çô ¸¡½Ä¡õ. «ÅüÈ¢ø ÀÄ, ŨÄô Àì¸ò¾¢üÌ
§¿ÃÊÂ¡É ¦¾¡¼÷ÒûǨÅÔõ (¿¡õ ÓýÒ ¸ñ¼Ð§À¡ø) º¢Ä
§¿ÃÊ¡É
¦¾¡¼÷Ò −øÄ¡¾¨ÅÔÁ¡¸ −ÕìÌõ. «ôÀÊôÀð¼ Àðʸ¨Çô¨Âô
ÀüÈ¢
À¡÷ì¸ô §À¡¸¢§È¡õ.

±ó¾ ´Õ ŨÄô Àì¸ò¨¾ ±Îò¾¡Öõ <HTML> ÀðÊìÌõ <BODY>

ÀðÊìÌõ
−¨¼§Â <HEAD> ÀðʨÂì ¸¡½Ä¡õ. −ó¾ <HEAD> </HEAD>
ÀðʸÙ츢¨¼Â¢ø º¢Ä §¾¨ÅÂ¡É ¾¸Åø¸û º¢Ä Å¢§º¼ ÀðʸǢø
¾Ãô
Àθ¢ýÈÉ. −ÅüÚû ¦ÅÌ º¡¾¡Ã½Á¡¸ì ¸¡½ì ÜÊÂÐ <TITLE>
ÀðÊ¡Ìõ. −¾¢ø ¾ÃôÀÎõ Åâ¸û, ¾¨ÄôÀ¡¸ «ó¾ Àì¸ò¾¢ø (title
bar) ¦¾Ã¢Ôõ.

¯í¸û Àì¸ò¾¢üÌ ¾¨ÄôÒ My page ±ýÚ ¨Åò¾£÷¸Ç¡É¡ø «Ð

−ùÅ¡Ú
ÌÈ¢ì¸ô À¼§ÅñÎõ.
<HEAD>
<TITLE>My page</TITLE>
</HEAD>

«¨¾ «ýÈ¢, <META>, <LINK>, <SCRIPT>, <STYLE>, <LINK>

§À¡ýÈ §ÅÚ º¢Ä ¾¸Åø ÀðʸÙõ −ó¾ <HEAD> </HEAD>
ÀðʸÙ츢¨¼§Â ÌÈ¢ì¸ô Àθ¢ýÈÉ.

<META> ÀðÊ¡ÉÐ, ¯í¸û Àì¸ò¨¾ô ÀüȢ ¾¸Åø¸¨Çì

¦¸¡ñÊÕìÌõ. −ó¾ ÀðÊ¢ø ¾ÃôÀÎõ ¾¸Åø¸û º¢Ä, §¾Î
¦ºÂÄ¢¸Ç¡ø (search engines) ¨¸Â¡Çô Àθ¢ýÈÉ.

¸£Æ’ì ¸¡ñÀ¨Å ¦À¡ÐÅ¡¸ À¡Å¢ì¸ôÀÎõ º¢Ä <META> ÀðʸǡÌõ.

META HTTP-EQUIV=”Content-Type” ±ýÀÐ ¯í¸û Àì¸ò¾¢ø ±ó¾

±ØòÐÕ (charecter set) «¨ÁôÒ ¯À§Â¡¸ô ÀÎò¾ô ÀðÊÕ츢ÈÐ
±ýÀ¨¾ ÌȢ츢ÈÐ:

META NAME=”generator” ±ýÀÐ «ó¾ô Àì¸õ ±ó¾ ¦Áý¦À¡ÕÇ¡ø

¯ñ¼¡ì¸ô Àð¼Ð ±ýÚ ÌȢ츢ÈÐ.

META NAME=”author” ±ýÀР¡÷ ±Ø¾¢ÂÐ ±ýÀ¨¾Ôõ,

META NAME=”description” ±ýÀÐ «ó¾ Àì¸õ ÀüȢ º¢Ú

ÌÈ¢ô¨ÀÔõ,

META NAME=”keywords” ±ýÀÐ ±ó¦¾ó¾ ¦º¡ü¸û ãÄõ «ó¾ô

Àì¸ò¨¾ ¦ºÂÄ¢¸û ãÄõ §¾¼Ä¡õ ±ýÀ¨¾Ôõ ÌȢ츢ÈÐ.
¸£§Æ ¾ÃôÀðÊÕìÌõ ¯¾¡Ã½ò¾¢ø <META> Àðʸû ±ùÅ¡Ú
¯À§Â¡¸ô
ÀÎò¾ô ÀðÊÕ츢ýÈÉ ±ýÚ À¡Õí¸û:

<HTML>
<HEAD>
<TITLE>Head and Meta tags</TITLE>
<META HTTP-EQUIV=”Content-Type” CONTENT=”text/html;
charset=user-defined”>
<META NAME=”generator” CONTENT=”Note Pad”>
<META NAME=”author” CONTENT=”Umar”>
<META NAME=”description” CONTENT=”This page explains
about META tags”>
<META NAME=”keywords” CONTENT=”Tamil, HTML, Head,
Meta, “>
</HEAD>

<BODY>
………………………..
………………..
</BODY>
</HTML>

−íÌ META HTTP-EQUIV=”Content-Type” ±ýÀ¾¢ø user-defined

±ýÀ¾¡¸ ±ØòÐÕ×õ,
META NAME=”generator” ±ýÀ¾¢ø Note Pad −ó¾ô Àì¸õ
¯ÕÅ¡ìÌžüÌ ÀÂýÀÎò¾ô ÀðÊÕ츢ÈÐ ±ýÀ¨¾Ôõ,
META NAME=”author” ±ýÀÐ −Р¡áø ±Ø¾ôÀð¼Ð ±ýÀ¨¾Ôõ,
META NAME=”description” ±ýÀ¾¢ø −ó¾ Àì¸ò¨¾ô ÀüȢ º¢Ú
ÌÈ¢ôÒõ,
META NAME=”keywords” ±ýÀ¾¢ø −ó¾ Àì¸ò¨¾ ±ó¾ ¦º¡ü¸Ç¡ø
§¾¼Ä¡õ ±ýÀ¨¾Ôõ ÌÈ¢ôÀ¢Î¸¢ýÈÉ.

−¨ÅÂýÈ¢,
<META HTTP-EQUIV=”expires” ±ýÀ¾¢ø, −ó¾ô Àì¸õ ±ó¾ ¿¡Ç¢ø
¸¡Ä¡Å¾¢Â¡¸¢ÈÐ ±ýÀ¨¾Ôõ ÌÈ¢ìÌõ.

º¢Ä ºÁÂí¸Ç¢ø ¿£í¸û À¡÷òÐì ¦¸¡ñÊÕìÌõ º¢Ä Àì¸í¸û

¾¡É¡¸§Å
¾ý¨É ÒÐôÀ¢òÐì(refresh) ¦¸¡ûÙõ. “¸¢Ã¢¦¸ð Š§¸¡÷” À¡÷òÐì
¦¸¡ñÊÕìÌõ§À¡Ð ´Õ ÌÈ¢ôÀ¢ð¼ −¨¼¦ÅǢ¢ø ¾¡É¡¸§Å Ò¾¢Â
±ñ½¢ì¨¸¸û ¦¾Ã¢Å¨¾ «Å¾¡É¢ò¾¢Õì¸Ä¡õ. «¾ý ÝðÍÁò¨¾ì
¦¸¡ñÊÕôÀÐ −ó¾ <META> Àðʾ¡ý:

<META HTTP-EQUIV=”refresh” NAME=”robots” CONTENT=”10″>

−¾¢ø 10 ±ýÈ ±ñ ¦¿¡Ê¨Âì ÌȢ츢ÈÐ. §¾¨Å¡ý §¿Ãò¨¾

−íÌ
±ñ½¡ø ÌÈ¢ì¸Ä¡õ.

−¨¾ §º¡¾¨É ¦ºöÐ À¡÷ô§À¡õ. ¸£úì ¸ñ¼ HTML ³ ¦ÅðÊ ´Õ

¯¨Ã¦¾¡ÌôÀ¢Â¢ø(text editor) ´ðÊ, refresh.html ±ýÚ
¦ÀÂâðÎ §ºÁ¢òÐ ¯í¸û ¯ÄŢ¢ø À¡Õí¸û. ´ù¦Å¡Õ 10
¦¿¡ÊìÌõ
¾ý¨É ÒÐôÀ¢òÐ즸¡ñÎ Ò¾¢Â ¾¸Å¨Äò ¾Õõ. −ó¾ ÀðÊÂÄ¢ø
¯ûǨŸû ¯í¸ÙìÌ ÀâîºÂõ −øÄ¡¾¢Õì¸Ä¡õ. «¨¾ô ÀüÈ¢
¸Å¨Ä
§Åñ¼¡õ. ¯í¸ÙìÌ ´Õ “refresh” ¾Ã§Å −ó¾ §º¡¾¨É.

<HTML>
<HEAD>
<META HTTP-EQUIV=”refresh” NAME=”robots” CONTENT=”10″>
<TITLE>Refresh Test</TITLE>
</HEAD>
<BODY>
<H1>Test Auto refresh</H1>
<HR>
<script language=”javascript”>
<!–
for (var knum = 0; knum <=10; knum++)
{
var r= Math.random()
var s= Math.round(r*5)+1
document.write(s,” X “,knum, ” = “,s*knum,”<br>”);
}
–>
</script>
<HR>
When it is auto refreshed, a random number is
generated.
</BODY>
</HTML>

−É¢ −¨½Âô Àì¸í¸Ç¢ø º¡¾¡Ã½Á¡¸ì ¸¡½ôÀÎõ Àðʸû

º¢ÄÅü¨Èô
À¡÷ô§À¡õ.

Íðʸû, −¨½Âô Àì¸í¸Ç¢ø ¦ÅÌÅ¡¸ì ¸¡½ôÀÎõ ´ýÈ¡Ìõ.

¿¡õ −¨Å¸¨Çô ÀüÈ¢ Óó¾Â À̾¢¦Â¡ýÈ¢ø ¸ñÊÕ츢§È¡õ. −ó¾
Íðʸ¨Ç ²Ðš츢ò ¾ÕÅÐ <A> ±ýÈ (Anchor) ÀðÊ¡Ìõ. −ó¾
ÀðÊ¢ø ¸¡½ôÀÎõ ´Õ ÀñÒ(Attribute), −¾üÌ Ð¨½ ¦ºö¸¢ÈÐ.
HREF (Hyper link reference) ±ÉôÀÎõ −ó¾ô ÀñÀ¢üÌ ¿¡õ ±ó¾
−¨½Âò ¾Äò¾¢üÌî ¦ºøÄ §ÅñΧÁ¡ «¾ý −¨½ôÒ
Ó¸Åâ¨Âì
¦¸¡ÎòÐÅ¢ð¼¡ø §À¡Ðõ. §ÁÖõ «ó¾ Ó¸Åâ¨Âô ÀüÈ¢Â
−ÄÌÅ¡É
¦º¡ü¦È¡¼÷¸¨ÇÔõ «¨ÁòÐì ¦¸¡ûÇÄ¡õ.

¯¾¡Ã½Á¡¸,

<A HREF=”http://www.cnn.com”> ´Õ «¦ÁÃ¢ì¸ ¦ºö¾¢

¿¢ÚÅÉõ</A>

−¾¢ø A ±ýÀÐ ÀðÊ. «¨¾ «ÎòÐ ÅÕõ “http://www.cnn.com” ³,

−ó¾ ÀðÊ¢ý HREF ÀñÀ¡¸ì ¦¸¡Îò¾¢Õ츢§È¡õ. «ó¾ ÀðÊ¢ý
À¢ý, ´Õ ź¾¢Â¡É ´Õ ¦º¡ü¦È¡¼¨Ã ¦¸¡Îòи’ ¦¸¡ûÇ¡õ.
(−íÌ ‘
´Õ «¦ÁÃ¢ì¸ ¦ºö¾¢ ¿¢ÚÅÉõ’ ±ýÚ ¾ó¾¢Õ츢§È¡õ.)
Á¢ýÉïºø Ó¸Åâ¨Â ¯í¸û −¨½Âô Àì¸ò¾¢ø −¨½ôÒî
ÍðÊ¡¸ò
¾ÃÄ¡õ.

«Ð ¸£úì ¸ñ¼Å¡Ú «¨ÁÔõ.

<A HREF=”mailto:csd_one@yahoo.com”>¯Áâý Á¢ýÉïºø</A>

−íÌõ ¯í¸ÙìÌ Åº¾¢Â¡É¦¾¡Õ ¦º¡ü¦È¡¼¨Ã ¾ÃÄ¡õ.

¸½¢É¢Â¢ø ¯ûÇ ´Õ §¸¡ô¨À(file) Íð¼×õ ¸£úì¸ñ¼Å¡Ú

ÀÂýÀÎò¾Ä¡õ:

<A
HREF=”file:///c:/windows/desktop/XSL_umar.html”>test</A>

(¸ÅÉ¢ì¸: ” file: ” «ÎòÐ ãýÚ º¡ö§¸¡Î¸û(///) −Õ츢ýÈÉ)

−ó¾ HREF Àñ¨À «ýÈ¢ §ÅÚ º¢Ä ÀñÒ¸Ùõ −ó¾ <A> ÀðÊ¢ø
−Õ츢ýÈÉ. «¨Å¸¨Ç §¾¨ÅÂ¡É ¾Õ½ò¾¢ø À¡÷ì¸Ä¡õ.

−ýÚõ ¦ÅÌÅ¡¸ì ¸¡½ì ÜÊ Àðʦ¡ý¨Èô ÀüÈ¢

¸¡½ô§À¡¸¢§È¡õ.

Àì¸í¸ÙìÌ «ÆÜðÎÅÐ ÁüÚÁýÈ¢ Å¢Çì¸ô ¸ðΨøû,

Å¢ÇõÀÃí¸û
¬¸¢Â¨Å¸¨Çì ¦¸¡ñ¼ Àì¸í¸Ç¢ø À¼í¸¨Ç §º÷ôÀÐ
§¾¨Å¡É
´ýÈ¡Ìõ. −¾üÌ <IMG> ±ýÈ (Image) Àðʨ ¯À§Â¡¸¢ì¸¢§È¡õ.
−ó¾ <IMG> ±ýÈ ÀðÊ¡ÉÐ,
SRC, WIDTH, HEIGHT, BORDER, ALIGN, HSPACE, VSPACE, ALT
Ó¾¡Ä¡É ÀñÒ¸¨Çì(properties) ¦¸¡ñ¼Ð. −¾¢ø SRC ±ýÈ ÀñÒ
§¾¨Å¡É(mandatory) ´Õ ÀñÀ¡Ìõ. −ó¾ ÀñÒ¾¡ý À¼ò¾¢ý
−ÕôÀ¢¼ò¨¾ì(source) ÌÈ¢ôÀ¾¡Ìõ. ̨Èó¾ «Ç×, −ó¾ô
ÀñÀ¡ÅÐ
<IMG> ÀðÊ¢ø ÌÈ¢ôÀ¢¼ô ÀðÊÕì¸ §ÅñÎõ.

¿£í¸û ¯À§Â¡¸ô ÀÎò¾ô ÀÎõ À¼õ C:/winter.jpg Å¡¸ −Õó¾¡ø

−ôÀÊì ÌÈ¢ì¸ §ÅñÎõ:

<IMG src=”file:///f:/winter.jpg”>

À¼ò¾¢ý −ÕôÀ¢¼õ ¯í¸û ¸½¢É¢Â¡¸§Å¡ «øÄÐ ¨½Âò

¾ÄÁ¡¸§Å¡
−Õì¸Ä¡õ. −É¢¦Â¡Õ §º¡¾¨É ¦ºöÐ À¡÷ì¸Ä¡õ. ¯í¸û
¸½¢É¢Â¢ø
¯ûÇ ²¾¡ÅÐ ´Õ gif «øÄÐ jpg À¼ò¨¾ §¾÷ó¦¾ÎòÐ «¾ý
−ÕôÀ¢¼ò¨¾ ÌÈ¢òÐì ¦¸¡ûÙí¸Ç’. −ô§À¡Ð ¸£úì ¸¡ÏÅЧÀ¡ø
´Õ
¯¨Ã ¦¾¡ÌôÀ¢Â¢ø(text editor – eg: Note pad) ¾ð¼îÍ
¦ºöÔí¸û:

<HTML>
<HEAD>
<TITLE>My picture</TITLE>
</HEAD>
<BODY>
<P><CENTER><H3><B>I like this
Picture</B></H3></CENTER></P>
<IMG SRC=”file:///f:/tamil-asp/stage.gif”>
</BODY>
</HTML>

ÌÈ¢ôÒ: §Áü¸ñ¼¾¢ø “file:///f:/tamil-asp/stage.gif”

±ýÀ¨¾ ¯í¸û À¼ò¾¢ý −ÕôÀ¢¼ò¾¢üÌ ¾ì¸Å¡Ú Á¡üÈ¢ì
¦¸¡ûÙí¸û.

−¾¢ø §¸¡ôÀ¢ý −ÕôÀ¢¼Á¡É f:/tamil-asp/stage.gif ±ýÀ¾üÌ

Óý file:/// ±ýÀ¨¾î §º÷òÐì ¦¸¡ûÇ §ÅñÎõ(¸¡Ã½ò¨¾
¦ºýÈÓ¨È
Å¢Ç츢¢Õ츢§È¡õ). stage.gif ±ýÈ §¸¡ôÒ ¯í¸û ŨÄô
Àì¸ò¾¢ý «§¾ directory −ø −Õó¾¡ø IMG SRC=”stage.gif”
±ýÚ §¸¡ôÀ¢ý ¦À¨à ÁðÎõ ¾ó¾¡ø §À¡ÐÁ¡ÉÐ. −ùÅ¡§È
«ó¾ô À¼õ
§ÅÚ ´Õ ŨÄô Àì¸ò¾¢ø −Õó¾¡Öõ ÌÈ¢ì¸Ä¡õ.

¸£Æ§ ¸¡Ïõ ÀðÊ嬀 yahoomail.html ±ýÈ ¦ÀÂâø §ºÁ¢òÐ ¯í¸û

¯ÄŢ¢ø §º¡¾¢òÐô À¡Õí¸û. Yahoo Mail −ý À¼ò¨¾ «¾ý
ŨÄô
Àì¸ò¾¢Ä¢Õó§¾ ¯À§Â¡¸¢òÐì ¦¸¡û¸¢§È¡õ. −ùÅ¡Ú §¾¨Åô
Àð¼¡ø
¦Åù§ÅÚ −¨½Âò¾Äí¸Ç¢Ä¢ÕóÐ À¼í¸¨Ç ¯À§Â¡¸¢òÐì
¦¸¡ûÇÄ¡õ.
ÌÈ¢ôÒ: −¨¾ §º¡¾¢ìÌõ§À¡Ð −¨½Âò ¦¾¡¼÷Ò (internet
connection) −Õ츧ÅñÎõ

<HTML>
<HEAD>
<TITLE>My picture</TITLE>
</HEAD>
<BODY>
<P><CENTER><H3><B>Yahoo Mail
logo</B></H3></CENTER></P>
<IMG
SRC=”http://us.i1.yimg.com/us.yimg.com/i/us/pim/mail3.gif”>
</BODY>
</HTML>

WIDTH, HEIGHT ±ýÈ ÀñÒ¸¨Çì ¦¸¡ñÎ À¼ò¾¢ý «¸Ä

¯ÂÃí¸¨Ç
Á¡üÈ¢ì ¦¸¡ûÇøÄ¡õ. «Ç׸û À¼ò¾¢ý ¾É¢Áô ÒûÇ¢¸Ç¢ø (pixel).

¯õ: WIDTH=”100″ , HEIGHT=”75″

−É¢ BORDER ±ýÈ Àñ¨ÀÔõ §º÷òÐ «Ð ±ùÅ¡Ú ¯ÄŢ¢ø

§¾¡üÈÁǢ츢ÈÐ ±ýÚ À¡÷ì¸Ä¡õ. §Áü¸ñ¼ ¯¾¡Ã½ò¾¢ø Á¡Ú¾ø
¦ºöÔí¸û:

<IMG SRC=”IMG
SRC=”http://us.i1.yimg.com/us.yimg.com/i/us/pim/mail3.gif”>
±ýÈ Åâ¢ø BORDER=”2″ ±ýÀ¨¾î §ºÕí¸û. «Ð −ùÅ¡Ú
«¨ÁÔõ:

<IMG SRC=”C:/windows/desktop/button/tamil-thedu.gif”
BORDER=”2″>

¯í¸û À¼ò¨¾î ÍüÈ¢ §¸¡Î −¼ô ÀðÊÕìÌõ. −Ð ±ò¾¨É À¼ò

¾É¢Áí¸Ç¡ø (picture element – pixel) ¬ÉÐ ±ýÚ ÌÈ¢ì¸ §ÅñÎõ
−íÌ 2 ±ýÀÐ −ÃñÎ ÒûÇ¢¸û ¾ÊÁý ±ýÚ ¦À¡Õû.

ALT ±ý¸¢È ÀñÒ ãÄõ À¼ò¾¢üÌ ´Õ Á¡üÈ¡¸ (alternate) º¢Ú

ÌÈ¢ôÒò ¾ÃÄ¡õ. À¼ò¾¢ý§Áø ‘±Ä¢’ ¿¸Õõ§À¡Ðõ, ²§¾¡ ´Õ
¸¡Ã½ò¾¡ø ¾¢¨Ã¢ø À¼õ ¦¾Ã¢Â¡¾ §À¡Ðõ −ó¾ ÌÈ¢ôÒ §¾¡ýÚõ.

ALIGN ±ýÀÐ À¼ò¨¾ «¨¾î ÍüÈ¢ −ÕìÌõ ±ØòÐì¸Ù째¡

(«øÄÐ
À¼ò¾¢ü§¸¡) ±ôÀÊ «¨Á§ÅñÎõ ±ýÀ¨¾ì ÌÈ¢ìÌõ.
ALIGN=”bottom”
ALIGN=”middle”
ALIGN=”left”
ALIGN=”right”
ALIGN=”top”
¬¸¢Â¨Å¸¨Ç −¾¢ø ÌÈ¢ì¸Ä¡õ.

HSPACE, VSPACE ±ýÀ¨Å −ó¾ô À¼ò¾¢üÌ Àì¸Å¡ðʧġ

«øÄÐ
§ÁÖõ ¸£Ø§Á¡ ±ùÅÇ× −¨¼¦ÅÇ¢ −Õ츧ÅñÎõ ±ýÚ
ÌÈ¢ì¸Ä¡õ. «Ç×
À¼ ¾É¢Áò¾¢ø (pixel).

¿£í¸û ¾ð¼îÍ ¦ºö¾¨Å¸¨Ç mypic.html ±ýÈ ¦ÀÂâø §ºÁ¢òÐ

¯ÄŢ¢ø §º¡¾¢òÐô À¡Õí¸û.

ÀÄ §¿Ãí¸Ç¢ø ´Õ À¼ò¾¢ø ¦º¡ÎìÌžý ãÄõ §ÅÚ Àì¸ò¾¢ü§¸¡

«øÄÐ Àì¸ò¾¢ý §ÅÚ À̾¢ì§¸¡ ¦ºøÄ ÓÊŨ¾ô
À¡÷ò¾¢ÕôÀ£÷¸û.
−ýÚ, «Ð ±ôÀÊ ±ýÀ¨¾ô À¡÷ô§À¡õ.

À¼ò¨¾ô ¦ÀÚž¢ø −¾¤Å¨Ã¸ñ¼ ±øÄ¡ ÀñÒ¸¨ÇÔõ −¾¢ø

¯À§Â¡¸¢òÐõ,
«ó¾ô À¼ò¨¾ Í𼡸×õ (link) ¬¸×õ ÀÂýÀÎò¾¢ ´Õ
ÀÊÅò¨¾ô
À¡÷ô§À¡õ. ӾĢø −ó¾ À̾¢¨Â ÅÆì¸õ§À¡ø ´Õ ¯¨Ã
¦¾¡ÌôÀ¢Â¢ø
¦ÅðÊ, ´ðÊ mylink.html ±ýÈ ¦ÀÂâø §ºÁ¢òÐì ¦¸¡ñÎ, ¯ÄÅ¢ø
À¡Õí¸û. ¸£úì ¸¡Ïõ ÀñÒ¸û ¯À§Â¡¸ô ÀÎò¾ô ÀðÊÕ¸¢ýÈÉ.
«¨Å¸¨Ç ¿£í¸û ±ùÅ¡Ú ¸¡ñ¸¢È£÷¸û ±ýÀ¨¾ §º¡¾¢ì¸Ä¡õ.

WIDTH=”80″
HEIGHT=”80″
BORDER=”5″
ALIGN=”left”
HSPACE=”20″
VSPACE=”5″
ALT=”Science Tamil Search”>

ӾĢø −¨½Â −¨½ôÒ (internet connection) ²ÐÁ¢øÄ¡Áø

§º¡¾¢òÐô À¡Õí¸û. «ô§À¡Ð À¼õ ¸¢¨¼ì¸¡Ð. ¸¡Ã½õ «ó¾ô
À¼õ
´Õ −¨½Âô Àì¸ò¾¢ø −Õ츢ÈÐ. ¬É¡ø «Ð −Õì¸ §ÅñÊÂ
−¼ò¾¢ø
Science Tamil Search ±ýÈ Å¡º¸õ −ÕìÌõ. −о¡ý ALT
(alternate) ±ýÈ ÀñÀ¢ø ¿¡õ ÌÈ¢ôÀ¢ðÊÕôÀ¾¡Ìõ. À¢ýÉ÷ −¨½Â
−¨½ôÒ¼ý «ó¾ À¼ò¾¢ø ¦º¡Î츢ô À¡Õí¸û −ó¾ô À¼ò§¾¡Î
−¨½ì¸ôÀðÊÕìÌõ ŨÄô Àì¸ò¾¢üÌò ¾¡Å¢î ¦ºøÄÄ¡õ. −ó¾ô
À¼ò¾¢ý ¯ñ¨ÁÂ¡É «Ç× 36X36 pixel ¬Ìõ. −íÌ ¿¡õ 80X80
«Ç×ìÌÀ’ ¦À⾡츢 −Õ츢§È¡õ. −ùÅ¡§È ¦Àâ À¼í¸¨ÇÔõ
−¼ò¾¢üÌò ¾ì¸Å¡Ú ÌÚì¸¢ì ¦¸¡ûÄÄ¡õ.

<HTML>
<HEAD>
<TITLE>My picture</TITLE>
</HEAD>
<BODY>
<P><CENTER><H3><B>Testing hyper
link</B></H3></CENTER></P>
<A
href=”http://www24.brinkster.com/umarthambi/tamil/etamil_search.htm”><IM
G
SRC=”http://www.geocities.com/csd_one/HomeP23.jpg”
WIDTH=”80″ HEIGHT=”80″ BORDER=”5″ ALIGN=”left”
HSPACE=”20″ VSPACE=”5″ ALT=”Science Tamil
Search”></A>The HTML comments in this page contain the
configuration in formation that allows users to edit
pages in your web using the Microsoft Web Publishing
Wizard or programs which use the Microsoft Web
Publishing Wizard such as FrontPad using the same
username and password they would use if they were
authoring with Microsoft FrontPage. Please refer to
the Microsoft’s Internet SDK for more information on
the Web Publishing Wizard APIs.
</BODY>
</HTML>

ÀñÒ¸¨Ç Á¡üÈ¢ §º¡¾¨É ¦ºöÐ À¡Õí¸û.

±Ø¾ô ÀÆ̧šõ ±î â ±õ ±ø À̾¢ 4

−É¢ ´Õ Á¢¸ò §¾¨ÅÂ¡É ´Õ ÀðʨÂô À¡÷ô§À¡õ. ¦ÀÕõÀ¡Öõ

«ð¼Å¨½ (Table) −øÄ¡¾ −¨½Âô Àì¸í¸§Ç −ø¨Ä ±ÉÄ¡õ.
¦¾Ã¢ÔõÀʧ¡ «øÄÐ Á¨ÈÓ¸Á¡¸§Å¡ «Ð −Õì¸Ä¡õ. ±ôÀÊ
±ýÀ¨¾ −¾ý −Ú¾¢Â¢ø ¦¾Ã¢óÐ ¦¸¡ûÅ£÷¸û.«ð¼Å¨½
±ØÐõ§À¡Ð º¢Ä §¿Ãõ ÌÆôÀõ §¿ÕÅÐ §À¡Ä¢Õì¸Ä¡õ ºüÚ
¸ÅÉ¢ò¾£÷¸Ç¡É¡ø ±Ç¢¾¡¸î ¦ºöÐÅ¢¼Ä¡õ.
<TABLE> </TABLE> ±ýÀ¨Å −¾ý ¦¾¡¼ì¸, ÓÊ× Àðʸǡ¸
−ÕìÌõ.

´Õ «ð¼Å¨½ ±ýÈ¡ø ±ý¦ÉýÉ −ÕìÌõ? §ÁÄ¢ÕóÐ ¸£Æ¡¸

Å⨺ (row)
−ÕìÌõ. ´ù¦Å¡Õ Å⨺¢Öõ ÌÚ측¸ ÀÄ Àò¾¢¸û (column)
−ÕìÌõ. (´Õ excel worksheet ³ ¿¢¨É× ÜÚí¸û). Ó¾ø
Å⨺¢ø −¼Á¢ÕóÐ ÅÄÁ¡¸ ´ù¦Å¡Õ Àò¾¢ìÌÁ¡É ¾¨ÄôÒ
−ÕìÌõ. −о¡ý º¡¾¡Ã½Á¡¸ ±ó¾ «ð¼Å¨É¡¸ −Õó¾¡Öõ
¿¡õ ¸¡ñÀÐ. −¨¾±ôÀÊ −ó¾ ¦Á¡Æ¢Â¢ø ÌÈ¢ôÀÐ?

Å⨺ ±ýÀÐ TR (Table Row) ±ýÀ¾¡¸×õ (excel −ø 1, 2, 3 ±ýÚ

§ÁÄ¢ÕóÐ ¸£Æ¡¸ −ÕôÀЧÀ¡ø), Àò¾¢ ±ýÀÐ TD (Table Data)
±ýÀ¾¡¸×õ (excel −ø A B C D ±ýÚ −¼Á¢ÕóÐ ÅÄÁ¡¸
−ÕôÀЧÀ¡ø) «¨Áó¾¢ÕìÌõ.

ӾĢø ´Õ Åâ¨Â ±ÎòÐì ¦¸¡ñÎ, «¾¢ÖûÇ Àò¾¢¸¨Ç

−¼Á¢ÕóÐ ÅÄÁ¡¸ ±Ø¾ §ÅñÎõ. −ùÅ¡È¡¸ ´ù¦Å¡Õ
Åâ¢ÖûÇ Àò¾¢¸¨ÇÔõ ±Ø¾¢ ÓÊì¸ §ÅñÎõ.

´Õ Åâ ¦¸¡ñ¼ ´Õ «ð¼Å¨½¨Âô ±Ç¢¾¡É À¡÷§À¡õ.

<TABLE border=”2″>
<TR>
<TD>
Orange
</TD>
<TD>
Apple
</TD>
<TD>
Banana
</TD>
</TR>
</TABLE>

§Áü¸ñ¼ «ð¼¼Å¨½ TABLE ±ýÈ Àðʧ¡ΠÐÅí̸¢ÈÐ.

border=”2″
±ýÈ ÀñÒ 2 À¼ ¾É¢Áõ «ÇÅ¢üÌ «¾ý μÃõ «¨Áó¾¢Õì¸
§ÅñÎõ ±ýÚ
¸¡ðθ¢ÈÐ. «¾ý ¸£§Æ <TR> ±ýÀÐ ´Õ Åâ¢ý(row) ÐÅì¸õ
±ýÚ ¸¡ðθ¢ÈÐ.
«¾ý ¸£§Æ −ÕìÌõ <TD> ±ýÀÐ(Table Data ) Àò¾¢Â¢ý ¦¾¡¼ì¸ô
ÀðÊ¡¸ «¨ÁÔõ. Orange ±ýÀÐ «ó¾ Àò¾¢Â¢ø ±Ø¾ô ÀÎõ
¾Ã×(data) ¬Ìõ. ¦¾¡¼÷óÐ </TD> ±ýÀÐ «ó¾ ¾Ã× Óʸ¢ÈÐ
±ýÚ ¸¡ðθ¢ÃÐ. −ùÅñ½§Á, Apple, Banana ±ýÈ ¾Ã׸Ùõ
´ù¦Å¡Õ <TD> </TD> §º¡Ê¸ÙìÌ −¨¼Â¢ø «¨ÁÔõ.

§ÁÖûÇ ÀðÊ嬀 ¯ÄŢ¢ø À¡÷¾£÷¸Ç¡É¡ø ÒâÔõ.

−Ð «ð¼Å¨½Â¢ý ÐÅì¸õ¾¡ý. §ÁÖõ ÀÄÅü¨È ¦¾¡¼÷óÐ

¸¡½Ä¡õ.

ÌÈ¢ôÒ:
−ó¾ ¬ì¸ò¾¢ø ÅÕõ ±ÎòÐì ¸¡ðÎì¸¨Ç ¯¼ÉÊ¡¸ §º¡¾¢ì¸
¸£úì¸ñ¼
ŨÄò ¾Äò¾¢üÌî ¦ºøÖí¸û:
http://www24.brinkster.com/umarthambi/html_try/view_result.html
−¾¢ø ±ÎòÐì ¸¡ðÎì¸¨Ç ´ðÊ ¯¼É¼Ê¡¸ Å¢¨Ç¨Å (result)
¸¡½ ÓÊÔõ.
§ÁÖõ, ¿£í¸û Å¢ÕõÀ¢Â Á¡Ú¾ø¸¨Çî ¦ºöÐ §º¡¾¢ì¸Ä¡õ.
´ù¦Å¡Õ ¾¼¨ÅÔõ §¸¡ôÀ¡¸î §ºÁ¢ì¸ §ÅñÊ §¾¨Å¢ø¨Ä.

«ùÅô§À¡Ð ÅÕõ ±ÎòÐì ¸¡ðÎ츨Çî §º¡¾¢òÐì ¸¡½

§Åñθ¢§Èý.
−Ð §Áü¦¸¡ñÎ ÅÕõ À̾¢¸¨Ç ±Ç¢¾¡¸ ÒâóÐ ¦¸¡ûÇ ¯¾×õ

¿¡õ ´Õ Åâ¨Â (row) ±ÎòÐì ¦¸¡ñÎ (TR) «¾¢ø ±ò¾¨É

Àò¾¢¸û (column) §ÅñÎõ (TD) ÌÈ¢ôÀ¢¼ §ÅñÎõ.

<HTML>
<TABLE border=”1″>

<TR>
<TD>
One
</TD>
</TR>

</TABLE>
<HTML>
§Áü¸ñ¼ ±ÎòÐì ¸¡ðÊø ¦Á¡ò¾õ ±ò¨É ºÐÃí¸û ÅÕõ ±ýÚ
±ñϸ¢È£÷¸û? ¿£í¸û ±ñÏÅÐ ºÃ¢¾¡ý. ´ý§È ´ýÚ¾¡ý!
«¾¡ÅÐ ´Õ
«¨È (cell) ¦¸¡ñ¼ ‘«ð¼Å¨½’. ¸¡Ã½õ <TR> </TR> ÀðʸÙìÌ
−¨¼§Â ´Õ <TD> </TD> §º¡Ê¾¡ý ¯ûÇÐ. One ±ýÈ Åâ, <TD>
</TD> ÀðʸÙìÌ −¨¼Â¢ø −ÕôÀ¾¡ø «Ð «ó¾ «¨È¢ø(cell)
«¨Áó¾¢ÕìÌõ. §Áü¸ñ¼¨¾ ¦ÅðÊ, ´ðÊ Å¢¨Ç¨Åô À¡Õí¸û.
§ÁÖõ ´Õ
<TD> </TD> ÀðʨÂî §º÷òÐ, «ÅÈ’È¢ü¸¢¨¼Â¢ø ±¾¡ÅÐ ´Õ
¦º¡ø¨Ä
−ðÎ §º¡¾¢òÐô À¡Õí¸û. (ÌÈ¢ôÒ: <TD> </TD> ÀðʸÙìÌ
−¨¼Â¢ø ²¾¡ÅÐ ±Ø¾ §ÅñÎõ. −ø¨Ä¦ÂýÈ¡ø −Ãñ¼¡ÅÐ
«¨È −ÕôÀ§¾ ¦¾Ã¢Â¡Ð.)

−É¢ «ð¼Å¨½Â¢ÖûÇ ¾Ã׸ÙìÌ (data) ±ùÅ¡Ú ¾¨ÄôÀ¢ÎÅÐ

±ýÚ
À¡÷ô§À¡õ.

¦À¡ÐÅ¡¸ «ð¼Å¨½Â¢ý Ó¾ø Åâ§Â (Ó¾ø <TR> </TR>)

¾¨ÄôÀ¡¸
«¨ÁÔõ. −¾¢ø <TD> </TD> ÀðʸÙìÌ À¾¢Ä¡¸ <TH> </TH>
Àðʸ¨Ç −¼§ÅñÎõ. TH ¬ÉÐ Table Head ±ýÀ¨¾ì ÌÈ¢ìÌõ.
¸£§Æ
¯ûÇ ±ÎòÐì ¸¡ð¨¼ô À¡Õí¸û:

<HTML>
<TABLE border=”1″>
<TR>
<TH>
This is Heading
</TH>
</TR>

<TR>
<TD>
This cell contains Data
</TD>
</TR>

</TABLE>
<HTML>

¾¨ÄôÀ¡ÉÐ, ¾Êò¾ (bold) ±ØòÐÕì¸Ù¼ý «¨Èî ºÐÃò¾¢ø

¨ÁÂô
ÀÎò¾ô ÀðÊÕìÌõ. ¾É¢Â¡¸ <B>, <CENTER> Àðʸ¨Çì ¨¸Â¡Çò
§¾¨Å −ø¨Ä.

¸£úì ¸ñ¼¨¾ ¦ÅðÊ

http://www24.brinkster.com/umarthambi/html_try/view_result.html
±ýÈ ¾Äò¾¢üÌî ¦ºýÚ ´ðÊ Å¢¨Ç¨Åô À¡Õí¸û. §¾¨Å
−Õó¾¡ø
Á¡üÈõ ¦ºöÐ §º¡¾¢òÐô À¡Õí¸û.

<HTML>
<TABLE BORDER=”1″>
<TR>
<TH>
Date
</TH>
<TH>
Time
</TH>
<TH>
Language
</TH>
</TR>
<TR>
<TD>
24-12-2001
</TD>
<TD>
8:00
</TD>
<TD>
English
</TD>
</TR>
<TR>
<TD>
25-12-2001
<TD>
10:30
</TD>
<TD>
Tamil
</TD>
</TR>
</TABLE>
</HTML>

«ð¼Å¨½Â¢ø ±ý¦ÉýÉ ÀñÒ¸¨Çì ¨¸Â¡ÇÄ¡õ ±ýÚ

À¡÷ô§À¡õ.

«ð¼Å¨½ ÀñÒ¸û:

WIDTH
ALIGN
BGCOLOR
BORDER
CELLSPACING
CELLPADDING

WIDTH – «ð¼Å¨½ ±ùÅÇ× «¸Äò¾¢ø −Õì¸ §ÅñÎõ ±ýÚ

ÌÈ¢ôÀÐ.
−¨¾, º¾Å£¾ò¾¢§Ä¡ «øÄÐ À¼ò¾É¢Á «ÇÅ¢§Ä¡ ÌÈ¢ì¸Ä¡õ

ALIGN – (left, center, right) «ð¼Å¨½ ÀÊÅò¾¢ø ±ôÀÊ «¨ÁÂ

§ÅñÎõ ±ýÚ ÌÈ¢ôÀÐ.
BGCOLOR – «ð¼Å¨½Â¢ý À¢ýÉÃí¸ Åñ½ò¨¾ Á¡üÈ.

BORDER – «ð¼Å¨½¨Âî ÍüȢ¢ÕìÌõ §¸¡ðÊý ¾ÊÁý

±ùÅÇ× −Õì¸
§ÅñÎõ ±ýÚ ÌÈ¢ôÀÐ.

CELLSPACING – ´ù¦Å¡Õ «¨ÈìÌõ (cell) −¨¼¦ÅÇ¢ ±ùÅÇ×

−Õì¸
§ÅñÎõ ±ýÚ ÌÈ¢ôÀÐ.

CELLPADDING - «¨È¢ø (cell) ±Ø¾ô ÀÎõ ±ØòÐì¸û (data)

«¨Èî ÍÅüȢĢÕóÐ ±ùÅÇ× àÃò¾¢ø −Õì¸ §ÅñÎõ ±ýÚ
ÌÈ¢ôÀÐ.

−ó¾ô <TABLE> ÀðʨÂô ÀüÈ¢ ¦º¡øÄ ¬ÃõÀ¢ìÌõ§À¡Ð

«ð¼Å¨½¨Â
²Èò¾¡Æ ±øÄ¡ Àì¸í¸Ç¢Öõ, ¦¾Ã¢Ôõ Àʧ¡ «øÄÐ
¦¾Ã¢Â¡¾Å¡§È¡
ÀÂý ÀÎòи¢È¡÷¸û ±ýÚ ¦º¡ý§Éý. ´Õ Àì¸ò¾¢ø ¯ûÇ
À¼í¸¨Ç,
±ØòÐ츨Ç, Àò¾¢¸¨Ç ´Øí¸¢ø ¨Åì¸ «ð¼Å¨½ ÀðʨÂô
ÀÂý
ÀÎòи¢È¡÷¸û. BORDER ±ýÈ ÀñÀ¢ø “0″ ±ýÚ ¦¸¡ÎòÐÅ¢ð¼¡ø
«ð¼Å¨½¨Âî ÍüÈ¢ −ÕìÌõ §¸¡Î Á¨ÈóÐÅ¢Îõ. ±É§Å «Ð
´Õ «ð¼Å¨½
§À¡ø ¦¾Ã¢Â¡Ð. Yahoo, Hotmail §À¡ýÈ ²¾¡Å¾¤ ´Õ Àì¸ò¾¢ý
ãÄì ÌȢ£θ¨Ç (HTML source) °ýÈ¢ô À¡÷ò¾£÷¸Ç¡É¡ø ¦¾Ã¢Ôõ.
¸£ú ¯ûǨ¾ ¦ÅðÊ,
http://www24.brinkster.com/umarthambi/html_try/view_result.html
−¾¢ø ´ðÊ Å¢¨Ç¨Åô À¡Õí¸û.

<html>
<head>
<meta http-equiv=”Content-Type” content=”text/html”>
<title>Table without border</title>
</head>
<body>

<table border=”0″ cellpadding=”0″ cellspacing=”0″

width=”100%”>
<tr>
<td width=”33%”>To further enable you to locate
the problem, you may start
the Java console (under MSIE or NS). If you’re
using Netscape, you’ll find
it under the Communicator item in the Netscape
menu (Java Console). Using
MSIE, you’ll find it under View (Java Console) in
the MSIE menu. The Java
Console will give you more details than the status
bar, and may help you
find out why the applet will not run. Often, it
will show you that the
applet depends on more than one class file, and
you’ll need to upload that
class file to your server as well.
<p>The applet may be written for a newer JDK than
you have on your system.
Most applets will work with MSIE4, and Netscape4
as well, provided you have
applied the latest JDK 1.1 patch from </p>
</td>
<td width=”33%”>
<p align=”center”><font size=”7″>An Example of
using table to align contents
of a page </font></td>
<td width=”34%”>
<ol>
<li>First, select the Java applet you would like
to add to your site. Many
of the applets are free with some requiring only
a link back to the
author’s site. Others have a link to the
author’s site written in them
which can be removed by paying a registration
fee. Still others require a
fee before they can be used.
<p></li>
<li>Download the zip file to a directory on your
computer (make sure you
remember the directory where you downloaded it).
The zip file contains the
necessary files to run the Java applet.
<p>In a few cases, you must download the jar or
class files individually.
Note that in Netscape Communicator, you must
hold down the shift key and
then click the link to download the files. </li>
</ol>
</td>
</tr>
</table>
</body>
</html>

´ù¦Å¡Õ «¨È¢ÖÇ’Ç ¾Ã׸¨Ç ¾É¢ò¾É¢Â¡¸ −¼ô À츧Á¡,

ÅÄôÀ츧Á¡
«øÄÐ ¿ÎÅ¢§Ä¡ ´ØíÌ (ALIGN) ÀÎò¾Ä¡õ. left, right, center,
justify ӾġÉ
ÀñÒ¸¨Ç ÀÂýÀÎò¾Ä¡õ. §Áø ¸£Æ¡¸(VALIGN) baseline, bottom,
middle, top
Ó¾Ä¡É ÀñÒ¸¨Ç ÀÂýÀÎò¾Ä¡õ.
§ÁÖõ º¢Ä §¿Ãõ ´§Ã ¾¨ÄôÀ¢ý ¸£ú −ÃñÎ ãýÚ ¾Ã׸û
ÅÃÄ¡õ.
±ÎòÐì ¸¡ð¼¡¸, Time ±ýÈ ¾¨ÄÀ¢ý ¸£ú AM PM ±ýÈ −Õ
¾Ã׸¨Ç −¼
§¿Ã¢¼Ä¡õ. −¾ü¸¡¸ −ÃñÎ «¨È¸¨Ç ´ýÈ¡ì¸ §ÅñÎõ. (Excel
−ø cell merging ¦ºöÅÐ §À¡ø) −¼Á¢ÕóÐ ÅÄÁ¡¸§Å¡ «øÄÐ
§ÁÄ¢ÕóÐ ¸£§Æ¡ «¨È¸¨Ç −¨½ì¸Ä¡õ. −¨¾î ¦ºöžüÌ
COLSPAN, ROWSPAN ¬¸¢Â ÀñÒ¸¨Ç
ÀÂýÀÎò¾ §ÅñÎõ.

¸£ØûÇ ±ÎòÐì ¸¡ð¨¼

http://www24.brinkster.com/umarthambi/html_try/view_result.html
Àì¸ò¾¢ø ´ðÊ ±ôÀÊ §¾¡ýÕ¸¢ÈÐ ±ýÚ À¡Õí¸û.

<HTML>
<BODY>
<TABLE ALIGN=”center” BORDER=”1″ CELLSPACING=”1″
CELLPADDING=”0″ WIDTH=”40%”>
<TR>
<TH COLSPAN=”3″ BGCOLOR=”#F0F8FF”>
Time Table
</TH>
</TR>
<TR>
<TD ALIGN=”center” VALIGN=”middle” rowspan=”5″
BGCOLOR=”#F5F5DC”>
Tution Timings
<TD ALIGN=”center” VALIGN=”middle”>
AM
</TD>
<TD ALIGN=”center” VALIGN=”middle”>
PM
</TD>
</TR>
<TR>
<TD ALIGN=”center” VALIGN=”middle”>
8:00
</TD>
<TD ALIGN=”center” VALIGN=”middle”>
4:30
</TD>
</TR>
<TR>
<TD ALIGN=”center” VALIGN=”middle”>
11:00
</TD>
<TD ALIGN=”center” VALIGN=”middle”>
7:00
</TD>
<TR>
<TD ALIGN=”center” VALIGN=”middle”>
10:00
</TD>
<TD ALIGN=”center” VALIGN=”middle”>
5:30
</TD>
</TR>
<TR>
<TD ALIGN=”center” VALIGN=”middle”>
10:00
</TD>
<TD ALIGN=”center” VALIGN=”middle”>
8:30
</TD>
</TR>
</TABLE>
</BODY>
</HTML>

§Áü¸ñ¼ ±ÎòÐ측ðÊø “Time Table” ±ýÈ ¾¨ÄôÒ측¸ 3

«¨È¸¨Ç
−¼Á¢ÕóÐ ÅÄÁ¡¸ §º÷ò¾¢Õ츢§È¡õ. «¨¾ COLSPAN=”3″ ±ýÀ¾¡¸
ÌÈ¢ò¾¢Õ츢§È¡õ. “Tution Timings” ±ýÈ À̾¢ì¸¡¸ 5 «¨È¸¨Ç
§ÁÄ¢ÕóÐ ¸£Æ¡¸ §º÷ò¾¢Õ츢§È¡õ.

´ù¦Å¡Õ «¨È¢Öõ À¢ýÉÃíÌ Åñ½ò¨¾î §º÷À¾üÌ ¿¡õ

Óý§À À¡÷¾Ð
§À¡ø BGCOLOR ±ýÈ Àñ¨À ÀÂýÀÎò¾ §ÅñÎõ.

−¨ÅÂýÈ¢ «ð¼Å¨½Ìõ ¾¨ÄôÒò ¾ÃÄ¡õ. −¾üÌ <CAPTION>

±ýÈ ÀðʨÂô ÀÂýÀÎò¾ §ÅñÎõ. ALIGN ±ýÈ ÀñÀ¢ø left,
right, top, bottom ±É §¾¨ÅÂ¡É −¼ò¾¢ø ¾¨Äô¨Àô ¦ÀÈÄ¡õ.
−ó¾ô Àðʨ «ð¼Å¨½ ÀðÊ (<TABLE>) ¢Ûû
±ó¾ −¼ò¾¢Öõ ÀÂý ÀÎò¾Ä¡õ ±ýÈ¡Öõ <TABLE> ÀðÊÌ «ÎòÐ
ÀÂý ÀÎò¾¢É¡ø ÌÆôÀõ −Õ측Ð.

§ÁÖûÇ «ð¼Å¨½Â¢ø −ó¾ô ÀðÊ §º÷ì¸ô À¼Å¢ø¨Ä.

¿£í¸Ç¡¸§Å
¸£ØûÇ Åâ¨Âî §º÷òÐ
http://www24.brinkster.com/umarthambi/html_try/view_result.html
ŨÄô Àì¸ò¾¢ø ´ðÊ §º¡¾¢Ôí¸û.

<CAPTION ALIGN=”middle”>My Table</CAPTION>

−É¢ º¢Ä Å¢§º¼ ±ØòÐÕ츨Çô À¡÷ô§À¡õ.

¿¡õ −ó¾ò ¦¾¡¼Ã¢ý ¦¾¡¼ì¸ò¾¢ø Á£Ô¨ÃÌÈ¢¦Á¡Æ¢Â¢ý ÀñÒ¸û

˟颙
§ÀÍõ§À¡Ð º¢Ä Å¢¼Âí¸¨Çô ÀüÈ¢ô §Àº¢§É¡Á’. «¾¢ø ´ýÚ,
−¨¼¦ÅÇ¢
ÀüÈ¢ÂÐ. −Õ ¦º¡ü¸Ùì ¸¢¨¼Â¢ø ±ò¾¨É −¨¼¦ÅÇ¢(spaces)
¾ó¾¡Öõ «Ð ´ýÈ¡¸§Å ¸½ì¸¢ø ¦¸¡ûÇôÀÎõ.

¸£úì ¸ñ¼¨¾
http://www24.brinkster.com/umarthambi/html_try/view_result.html
Àì¸ò¾¢ø ´ðÊ ±ôÀÊò §¾¡ýÚ¸¢ÈÐ ±ýÚ À¡Õí¸Ç’.

<HTML>
<BODY>
I have enough ’spaces’ but no
room for them in the browser!
</BODY>
</HTML>

´ù¦Å¡Õ ¦º¡øÖìÌõ ´Õ −¨¼¦ÅÇ¢¨Âò ¾Å¢Ã ÁüȨŦÂøÄõ

Á¨ÈóÐ
§À¡Â¢ÕìÌõ. «ôÀÊ¡ɡø, Üξø −¨¼¦ÅÇ¢¨Â ±ôÀÊô
¦ÀÚÅÐ?
«¨¾Â¤õ ÌȢ£ΠãÄõ¾¡ý ¦ÀÈ §ÅñÎõ. «¨¾ì ÌÈ¢ì¸ &nbsp;
±ýÚ
−¼§ÅñÎõ. «¨Å¸¨Ç ‘non breaking space” ±ý¸¢§È¡õ. «¾¡ÅÐ
Åâ¨Â
ÓȢ측Áø −¨¼¦ÅÇ¢ ¦ÀÚÅÐ. −ó¾ ÌȢ£ðÊø ӾĢø ÅÕõ “&”
¯õ −Ú¾¢Â¢ø
ÅÕõ “;” («¨Ãô ÒûÇ¢) §¾¨ÅÂ¡É ´ýÈ¡Ìõ. ¸£ú¸’ ¸ñ¼¨¾
Á£ñÎõ §º¡¾¢òÐô À¡Õí¸û.

<HTML>
<BODY>
I&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;have&nbsp;&nbsp;&nbsp;enough
&nbsp;&nbsp;but
no&nbsp;&nbsp;&nbsp;room
for&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;them&nbsp;&nbsp;&nbsp;&nbsp
;in
the&nbsp;&nbsp;&nbsp;&nbsp;browser!
</BODY>
</HTML>

§Áü¸ñ¼¾¢ø &nbsp; ±ýÀ¨¾ §¾¨ÅÂ¡É −¨¼¦ÅÇ¢¸¨Çô

¦ÀÚžü¸¡¸
ÀÂý ÀÎò¾¢Â¢Õ츢§È¡õ.

«§¾§À¡ø < > ¸ÙìÌ −¨¼Â¢ø ±Ø¾ô ÀÎõ ±ØòÐì¸û

¯ÄŢ¢ø §¾¡ýÈ¡Ð. «ôÀÊ¦Â¡Õ ¿¢¨Ä ²üÀð¼¡ø &lt; (lt – lesser
than) &gt; (greater than) ±ýÀ¨Å¸¨Ç ÀÂýÀÎò¾ §ÅñÎõ. ¸£úì
¸ñ¼¨Å¸¨Ç §º¡¾¢òÐô À¡Õí¸û:

<HTML>
<BODY>
<This line is invisible>
&lt; This is visible &gt;
</HTML>
</BODY>

−ùÅ¡§È, “Copy Right” º¢ýÉò¨¾ô ¦ÀÚžüÌ &Copy; ±ýÀ¨¾Ôõ,

“Ampersand” ±ØòÐÕŨô ¦ÀÈ &amp; ±ýÀ¨¾Ôõ,
“Registration” º¢ýÉò¨¾ô ¦ÀÈ &reg; ±ýÀ¨¾Ôõ −¼§ÅñÎõ.

ÌÈ¢ôÒ: “Registration” º¢ýÉò¾¢ý ±ØòÐÕ ±ñ(174) ¾Á¢ú “®”

측¸ô À¡Å¢ì¸ô ÀðÊÕôÀ¾¡ø ¾Á¢Æ¢ø ±ØÐõ§À¡Ð “®” ¾¡ý
¸¢ðÎõ. «¨¾ô §À¡Ä§Å, &trade; (trade mark) ±ØòÐÕ×ìÌ(153)
“™” ¸¢ðÎõ.
±Ø¾ô ÀÆ̧šõ ±î â ±õ ±ø À̾¢ 5

¿¡õ −ÐŨà ¸üÚì ¦¸¡ñ¼Ð ´Õ «ÊôÀ¨¼Â¡É −¨½ÂôÀì¸õ

±ØÐõ
«Ç×ìÌ §À¡ÐÁ¡ÉÐ ±ýÈ¡Öõ −òШÈ¢ý ´Õ ŢǢõ¨Àò¾¡ý
¦¾¡ðÊÕ츢§È¡õ. −ó¾ Á£Ô¨ÃÌÈ¢¦Á¡Æ¢Â¢ý ÅÇ÷ §Á¦Ä¡í¸¢ô
§À¡ö ÀÄ ¸¢¨Ç¸Ç¡¸ ÅÇ÷ó¾¢Õ츢ÈÐ.−É¢ º¢Ä º¢È¢Â Å¢¼Âí¸¨Çô
À¡÷ô§À¡õ:

¿£í¸û Àì¸í¸¨Ç ±ØÐõ§À¡Ð º¢È¢ÂÌÈ¢ôÒ츨ÇÔõ(comments)

¯í¸û ź¾¢ì¸¡¸ ܼ§Å ±Ø¾ Å¢ÕõÀÄ¡õ.¬É¡ø «¨Å
¯ÄŢ¢ø ¦¾Ã¢Â¡Áø −Õì¸ §ÅñÎÁøÄÅ¡? «¾üÌ ¸£úì¸ñ¼Å¡Ú
ÌÈ¢ì¸ §ÅñÎõ:

<!– (¯í¸û ÌÈ¢ôÒì¸û – your comments) –> ±ýÚ

±Ø¾§Å½’Îõ.
<!–, –> −ÅüÈ¢ü¸¢¨¼§Â ±Ð ±Ø¾ô Àð¼¡Öõ ¯ÄÅ¢
ÒÈ츽¢òÐÅ¢Îõ.

±ØòÐì¸û −¼Á¢ÕóÐ ÅÄÁ¡¸§Å¡ «øÄÐ ÅÄÁ¢ÕóÐ −¼Á¡¸§Å¡

°÷óòÐ ¦ºøŨ¾ô À¡÷ò¾¢ÕôÀ£÷¸û. −¨¾ IE ÀÂÉ÷ ÁðÎõ
¸ñÊÕì¸
ÓÊÔõ, ¸¡Ã½õ Netscape −ó¾ ź¾¢¨Âò ¾Õž¢øĨ.

−¾ý ÀñÒ¸û:
ALIGN= (LEFT, MIDDLE, BOTTOM)
BEHAVIOUR=(SCROLL,SLIDE,ALTERNATE)
BGCOLOR=(#000000 TO #FFFFFF)
DIRECTION=(LEFT,RIGHT)
HEIGHT=(PIXEL VALUE, %)
VSAPACE=(NUMBER)
LOOP=(NUMBER,INFINITE)
SCROLLAMOUNT=(NUMBER)
SCROLLDELAY(NUMBER)

¸£úì ¸ñ¼¨¾
http://www24.brinkster.com/umarthambi/html_try/view_result.html
±ýÈ Àì¸ò¾¢ø ´ðÊ §º¡¾¢òÐô À¡Õí¸û(IE ÀÂÉ÷ «¾¢ð¼º¡Ä¢¸û!)

<HTML>
<BODY>
<Font size=”+2″>
<MARQUEE behavior=”slide” direction=”right”
bgcolor=”#FF88FF”></font>
This Text is sliding to right once
</MARQUEE><p>
<MARQUEE behavior=”scroll”>
This Text is scrolling
</MARQUEE><p>
<MARQUEE behavior=”alternate”bgcolor=”#c0c0c0″ >
This Text is Alternating
</MARQUEE><p>
<MARQUEE behavior=”scroll” scrolldelay=”300″
bgcolor=”#ffff00″>
This Text is scrolling slowly
</MARQUEE>
</HTML>
</BODY>

Netscape ÀÂÉ÷¸Ùõ ´Õ «¾¢ð¼ò¨¾ô ¦ÀüÈ¢Õó¾É÷

(Ver 4.7 −ø −Õó¾Ð. Ò¾¢Â Ver6 −ø «Ð −ø¨Ä). “º¢Á¢ð¼ø”¾¡ý
«Ð.
IE −ø «Ð ¸¢¨¼Â¡Ð.

−¨¾ §º¡¾¢òÐô À¡Õí¸û:

<HTML>
<BODY>
<BLINK>
<font color=”#FF0000″ size =”+3″>
I am Blinking!
</font>
</BLINK>
</BODY>
</HTML>

´Õ ¦¸¡ÍÕ: º¢Ä §¿Ãí¸Ç¢ø §ÅÚ Àì¸ò¾¢üÌâ −¨½ô¨À(link to

other page) ¾ðÎõ§À¡Ð Ò¾¢Â º¡ÇÃò¾¢ø(window) «¨¾ì ¸¡½
§ÅñÊ §¾¨Å ²üÀ¼Ä¡õ. «¾üÌ −ÃñÎ ÅÆ¢¸û −Õ츢ýÈÉ.
´ýÚ, «ó¾ −½¨ôÀ¢ý ÅÄî ¦º¡ÎìÌî ¦ºöÐ, ¸¢¨¼ìÌõ
ÀðÊÂÄ¢ø “open in new window” ±ýÀò
§¾÷ó¦¾Îì¸Ä¡õ. −Ãñ¼¡ÅÐ «¨¾Å¢¼ ±Ç¢¾¡ÉÐ. Shift ³
«Øò¾¢ì
¦¸¡ñÎ «ó¾ −¨½ôÀ¢ý §Áø ¦º¡Î츢ɡø Ò¾¢Â º¡ÇÃò¾¢ø
«ó¾
Àì¸õ ¾¢ÈìÌõ.

ÌÈ¢ôÒ:
−ó¾ ¬ì¸ò¾¢ø ¨¸Â¡Çô ÀÎõ «È¢Å¢Âø/¸½¢É¢ ¾Á¢úî
¦º¡ü¸ÙìÌ
¬í¸¢Äô À¾õ §ÅñΧš÷ ¸£úì ¸ñ¼ ¾Ã×ò ¾Çò¾¢ø ¦ÀüÚì
¦¸¡ûÄÄ¡õ:
http://www24.brinkster.com/umarthambi/tamil/etamil_search.asp

−ó¾ ãýÈ¡ÅÐ À̾¢Â¢ø §ÁÖõ §ÁõÀð¼ º¢Ä Àðʸ¨ÇÔõ

¸ð¼¨Ç¸¨ÇÔõ
À¡÷ô§À¡õ. −¨Å ¯í¸û Àì¸ò¨¾ §ÁÖõ ¦ÁÕÜð¼ ¯¾×õ.

ÀÄ Å¨Äò¾Çí¸¨Ç ¸¡Ïõ§À¡Ð À¼í¸Ç¢ý Á£Ð ¦º¡Î츢ɡø

§ÅÚ
Àì¸í¸ÙìÌ «¨Å ±ÎòÐî ¦ºøŨ¾ì ¸ñÊÕôÀ£÷¸û. −¨¾ ¿¡õ
ÓýÒ Åó¾
À̾¢Â¢ø À¡÷ò¾¢Õ츢§Ã¡õ. §ÁÖõ ´§Ã À¼ò¾¢ý ¦Åù§ÅÚ
À̾¢¸Ç¢ø ¦º¡Î츢ɡø ¦Åù§ÅÚ Àì¸í¸ÙìÌî ¦ºøŨ¾Ôõ º¢Ä
ŨÄò
¾Çí¸Ç¢ø «Å¾¡É¢ò¾¢ÕôÀ£÷¸û. «Ð ±ôÀÊ Óʸ¢ÈÐ? −ýÚ
«¨¾ô
À¡÷ô§À¡õ.

−ó¾ Å¢¨Ç¨Åô ¦ÀÚžüÌ ¿¡õ Óý§À ¸ñ¼ <IMG> ÀðÊÔ¼ý

§ÁÖõ º¢Ä
Ò¾¢Â Àðʸ¨Çì ¨¸Â¡Ç §ÅñÎõ. «¨Å¡ÅÉ:

<MAP>
<AREA>

ӾĢø ¿¡õ ¨¸Â¡Çô §À¡Ìõ À¼ò¾¢üÌ <MAP> ÀðÊ¢ø ´Õ

¦ÀÂ÷
¾Ã§ÅñÎõ. ¿£í¸û Å¢ÕõÀ¢Â ¦À¨Ãò ¾ÃÄ¡õ. ±ÎòÐì ¸¡ð¼¡¸
«Ð
−ùÅ¡Ú −Õì¸Ä¡õ: <MAP name= “camera”>.

−É¢, <IMG> ÀðÊ¢ø usemap ÀñÒ ãÄõ «¾ý Á£Ð −¨½ôÒ

−¼í¸¨Ç(area for hyper links) ŨÃÂÚì¸ô ÀÂýÀÎò¾ô §À¡¸¢§È¡õ
±ýÀ¨¾ì ÌÈ¢ì¸, usemap=”#camera” ±ýÀ¨¾ò ¾Ã§ÅñÎõ
(¸ÅÉ¢ì¸:# «¨¼Â¡Çõ §¾¨ÅÂ¡É ´ýÚ). À¢ýÉ÷ <AREA>
±ýÀ¾¢ø ¿£í¸û ŨÃÂÚì¸ô §À¡Ìõ ÅÊÅõ ±ò¾¨¸ÂÐ ±ýÚõ
«ÅüÈ¢ý
coordinates (¾Á¢Æ¡ì¸õ §¾Å¨) ±¨Å ±ýÀ¨¾Ôõ ÌÈ¢ì¸ §ÅñÎõ.

±ÎòÐì ¸¡ð¼¡¸ ´Õ À¼ò¾¢ý «Ç× 270X200 À¼ò¾É¢Áõ (pixel)

±ýÈ¢Õó¾¡ø, «ó¾ô ÀÃôÀ¢Ä¢ÕóÐ ±õÁ¡¾¢Ã¢Â¡É ÅÊÅò¾¢ø ±ó¾
−¼ò¾¢Ä¢ÕóРŨÃÂÚì¸ô §À¡¸¢È£÷¸û ±ýÚ ÌÈ¢ì¸ §ÅñÎõ.
ÅÊÅí¸û
ãýÚ Å¨¸Â¡¸ ÌÈ¢ì¸ô Àθ¢ýÈÉ. ¦ºùŸõ (rect), Åð¼õ(circle),
Àħ¸¡½õ(polygon) ¬¸¢ÂÉÅ¡Ìõ.

±ÎòÐì ¸¡ð¼¡¸, ´Õ ¦ºùŸõ ±ýÈ¡ø «¾ý À¼ò ¾É¢Á

−ÕôÀ¢¼í¸û
¿¡õ ÀÂýÀÎòÐõ À¼ò¾¢ø ±í¦¸íÌ «¨Áó¾¢Õ츢ýÈÉ ±ýÚ
−ôÀÊ
ÌÈ¢ì¸ §ÅñÎõ:

coords=”112, 37, 158, 60″

−¾¢ø 112 ±ýÀÐ «ó¾ ÅÊÅõ (±ÎòÐì ¸¡ðÎ: ¦ºùŸõ) À¼ò¾¢ý

−¼ô
ÒÈò¾¢Ä¢ÕóÐ (x-axis) 112 ÅÐ ¾É¢Áô ÒûǢ¢ø ¦¾¡¼í̸¢ÈÐ
±ýÀ¨¾Ôõ 37 ±ýÀÐ §ÁÄ¢ÕóÐ ¸£ú (y-axis) ÒûǢ¢ø
¦¾¡¼í̸¢ÈÐ ±ýÀ¨¾Ôõ, 158 ±ýÀÐ −¼ô ÒÈò¾¢Ä¢ÕóÐ (x-axis)
158 ÒûǢ¢ø Óʸ¢ÈÐ ±ýÀ¨¾Ôõ, 60 ±ýÀÐ ÁÄ¢ÕóÐ ¸£ú (y-axis)
60 ÒûǢ¢ø Óʸ¢ÈÐ ±ýÀ¨¾Ôõ. ÌȢ츢ÈÐ. «¾¡ÅÐ, 112, 37
±ýÀÐ, start x,y ¯õ 158, 60 ±ýÀÐ end x,y ¯õ ¬Ìõ.

§ÁÖõ, «ó¾ ÅÊÅò¾¢ø ¦º¡Î츢ɡø ±ó¾ −¨½Âô Àì¸ò¨¾ò

¾¢Èì¸
§ÅñÎõ ±ýÀ¨¾Ôõ ÌÈ¢ì¸ §ÅñÎõ. ¬¸, <AREA> ÀðÊ¢Ûû
shape,
coords, href ±ýÈ ãýÚ ÀñÒ¸¨ÇÔõ ¾Ã §ÅñÎõ. «Ð −ôÀÊ
«¨ÁÔõ:
<AREA shape=”rect” coords=”112, 37, 158, 60″
href=”flash.html”>

Åð¼ ÅÊÅÁ¡¸ −Õó¾¡ø «¾ý ¿Îô ÒûǢ¢ý À¼ò¾É¢Á

−¼ò¨¾Ôõ (x,y coordinates), ¬Ãò¾¢ý (radius) «Ç¨ÅÔõ
¾Ã§ÅñÎõ. «Ð −ôÀÊ «¨ÁÔõ:
<area shape=”circle” coords=”206, 109, 44
href=”lens.html”"> −¾¢ø 206, 109 ±ýÀÐ x, y ¬¸×õ 44
±ýÀÐ ¬ÃÁ¡¸×õ «¨ÁÔõ.

ÀÄ §¸¡½ ÅÊÅÁ¡¸ −Õó¾¡ø −Ð −ôÀÊ «¨ÁÔõ:

<area shape=”polygon” coords=”87, 25, 114, 106, 116,
171, 50, 177, 44, 106, 53, 45 href=”grip.html”">
−¾¢ø ´ù¦Å¡Õ §º¡Ê¸Ùõ(87,25 / 114,106 / ….) §¸¡½í¸Ç¢ý
Ó¨Éô ÒûÇ¢¸Ç¡¸ «¨ÁÔõ.

¸£§Æ ¸¡Ïõ ±ÎòÐì ¸¡ð¨¼ ´Õ HTML §¸¡ôÀ¡¸ §ºÁ¢ò§¾¡

«øÄÐ
http://www24.brinkster.com/umarthambi/html_try/view_result.html
±ýÈ ¾Çò¾¢ø ´ðʧ¡ «¾ý Å¢¨Ç¨Åô À¡Õí¸û. ³Âõ
−ÕôÀ¢ý «È¢Âò
¾¡Õí¸û.

<html>
<head>
<title>Maping image</title>
</head>
<body>
<h1>Camera Parts</h1>
Move your mouse on the picture. You will see “hand
pointer” where the corresponding pages are linked.
<p><MAP name=”camera”>
<img border=”0″
src=”http://www24.brinkster.com/umarthambi/html_try/camera.jpg”
usemap=”#camera” width=”270″ height=”200″>
<area shape=”rect” coords=”112, 37, 158, 60″
href=”http://www24.brinkster.com/umarthambi/html_try/flash.html”
alt=”Flash page”>
<area shape=”circle” coords=”206, 109, 44″
href=”http://www24.brinkster.com/umarthambi/html_try/lens.html”
alt=”Lense page”>
<area shape=”polygon” coords=”87, 25, 114, 106, 116,
171, 50, 177, 44, 106, 53, 45″
href=”http://www24.brinkster.com/umarthambi/html_try/grip.html”
alt=”Grip page”>
<area shape=”polygon” coords=”168, 32, 250, 42, 252,
62, 208, 51, 174, 58, 165, 57″
href=”http://www24.brinkster.com/umarthambi/html_try/vfinder.html”
alt=”View finder page”>
</body>
</html>

¯ûǢΠÀÊÅõ(Form)
−¿¨½Âô Àì¸í¸û ±ØО¢ø «È¢ó¾¢Õì¸ §ÅñʨŸǢø
´ýÚ
“ÀÊÅõ”(form) ±Øоø. −¨½Âò ¾Çí¸Ùî ¦ºøÖõ§À¡Ð ¯í¸û
Á¢ýÉﺨÄÔõ ¯í¸¨Çô ÀüȢ º¢Ú ÌÈ¢ôÒ츨ÇÔõ ¯ûÇ¢ÎÁ¡Ú
«¨Áó¾¢ÕìÌõ «§É¸ ¯ûǣΠÀÊÅí¸¨Çô À¡÷ò¾¢ÕôÀ£÷¸û.
−¾ý
ÀÂýÀ¡Î ¦¾¡Æ¢ø ӨȢø «¾¢¸õ ±ýÈ¡Öõ ´Õ ºÃ¡ºÃ¢ Á£Ô¨Ã
ÌÈ¢¦Á¡Æ¢ ±ØÐÀÅÕìÌ ´Õ º¢Ä §¿Ãí¸Ç¢ø ÁðÎõ ÀÂý ¾Õõ.
−ýÚ
«ôÀÊ¦Â¡Õ ÀÊÅò¨¾ò ¾Â¡Ã¢ôÀÐ ±ùÅ¡¦ÈýÚ ¸¡½Ä¡õ.

ÀÂÉ÷ ¦ÀÂ÷, ¸¼×î ¦º¡ø ¯ûÇ¢Îõ º¢Ú ÀÊÅõ Ó¾ø

ÀÂÉ÷¸Ç¢¼Á¢ÕóÐ
¯ûǣθ¨Çô ¦ÀüÚ «ÅüÈ¢ü§¸üÀ ¾¸Åø¸¨Çò ¾Ã ¯¾×õ
º¢ì¸Ä¡É Ũ¸
Ũà ÀÄ ¯ñÎ. ӾĢø ±Ç¢¨ÁÂ¡É ´ýȢĢÕóÐ ÐÅí̧šõ.

¯ûÇ¢Îõ ÀÊÅò ¦¾¡¼ì¸õ ±ýÀ¨¾ ÌȢ¢¼ <FORM> ±ýÈ

ÀðʨÂò
¾Ã§ÅñÎõ. −¾¢ø ACTION, METHOD, TARGET ±ýÈ ÀñÒ¸û
ÌÈ¢À¢¼ò¾ì¸¨Å. −ó¾ ÀÊÅò¾¢ø ¯ûǣΠ¦ºöžü¦¸É
¨¸Â¡ÇôÀÎõ
<INPUT> ÀðÊ¢ø ¸£úì¸ñ¼ ¦Åù§ÅÈ¡É ÀñÒ¸û ¦¸¡ñ¼
¯ÚôÒì¸û
«¨ÁóÐûÇÉ −¨Å¸Ç¢ø ÌÈ¢ôÀ¢¼ò¾ì¸¨Å:
TEXT
PASSWORD
CHECKBOX
RADIO
SUBMIT
RESET
BUTTON

−¨ÅÂýÈ¢, ÀðÊÂÄ¢¼ô Àð¼¨Å¢ĢÕóÐ §¾÷×

¦ºöÔõÀÊ¡É(drop
down list)«¨ÁôÒì ¦¸¡ñ¼ <SELECT> ÀðÊÔõ, ÀÄ Åâî
¦ºö¾¢¸¨Ç ¯ûÇ¢¼ <TEXTAREA> ±ýÈ ÀðÊÔõ ÀÂýÀÎò¾ô
Àθ¢ýÈÉ.
ӾĢø Á¢¸ ±Ç¢¨ÁÂ¡É ´Õ ¯ûÇ¢Îõ ÀÊÅò¨¾ì ¸¡ñ§À¡õ:

HTML>
<HEAD>
<TITLE>My form</TITLE>
</HEAD>
<BODY>

<FORM
ACTION=”http://www24.brinkster.com/umarthambi/html_try/my_form.asp”
METHOD=”post”>
Enter your name here:
<INPUT TYPE=”Text” NAME=”mytext” size=”20″>
<INPUT TYPE=”Submit” VALUE=”Send Form”>
</FORM>

</BODY>
</HTML>

§Áü¸ñ¼<FORM> ÀðÊ¢Ûû ¸¡½ô ÀÎõ ACTION ±ýÈ ÀñÒ,

−ó¾
ÀÊÅò¨¾ ÒÃÅÄÕìÌ(server) «ÛôÒõ§À¡Ð ±ýÉ ¦ºö §ÅñÎõ
±ýÚ
«È¢Å¢ôÀÐ. METHOD ±ýÀÐ ¯ûǣθ¨Ç ÒÃÅÄÕìÌ
«Ç¢ìÌõ§À¡Ð ±ó¾
Å¢¾ò¾¢ø «Ç¢ì¸¢ÈÐ ±ýÀ¨¾ì ÌÈ¢ôÀ¾¡Ìõ.

«ÎòÐ ¸¡½ôÀÎõ ¯ûÇ¢¼ ¯¾×õ <INPUT> ÀðÊ¢ø, ¿¡õ

ÀÂýÀÎò¾ô
§À¡ÅÐ ‘¯¨Ã’(text) Ũ¸¨Âî º¡÷ó¾Ð ±ýÀ¨¾Ôõ «¾üÌ “mytext”
±ýÈ ¦À¨ÃÔõ −ðÊÕ츢§È¡õ. «ÎòÐ ÅÕõ ¯ûÇ¢Îõ Ũ¸
“Submit”
±ÉôÀÎõ ¦À¡ò¾¡É¡Ìõ. «ó¾ ¦À¡ò¾¡ý Á£Ð ±ýÉ ±Ø¾ô À¼
§ÅñÎõ
±ýÀ¨¾ VALUE ÀñÒãÄõ ¦¸¡Î츢§È¡õ. −íÌ “Send Form”
±ýÚ
¦¸¡Îò¾¢Õ츢§È¡õ. ¯í¸ÙìÌ ¯¸ó¾¿¨¾ì ¦¸¡Îì¸Ä¡õ. §Áü¸ñ¼
À̾¢¨Â ¦ÅðÊ,
http://www24.brinkster.com/umarthambi/html_try/view_result.html
±ýÈ Àì¸ò¾¢ø ´ðÊ, ¯ûÇ¢Îõ −¼ò¾¢ø ¦À¨à −ðÎ ÀÊÅò¨¼
«ÛôÀ¢
Å¢¨Ç¨Åô À¡Õí¸û.

´ý¨È ¿£í¸û «Å¾¡É¢ò¾¢Õì¸Ä¡õ. ÀÊÅò¨¾ «ÛôÀô ÀÂýÀÎõ

¦À¡ò¾¡ý ŨÃÅÊÅÁ¡¸(graphical) ¯ÄŢ¢ø §¾¡ýȢɡÖõ
<INPUT> ÀðÊ¢ø «ôÀÊ¦Â¡Õ ¬¨½ −ø¨Ä. ¬É¡ø
TYPE=”Submit”
±ýÀ¨¾ ¯ÄÅ¢ ÒâóÐ ¦¸¡ñÎ ´Õ ¦À¡ò¾¡¨É ¾¢¨Ã¢ø ¾Õ¸¢ÈÐ.
«Ð
ÁðÎÁøÄ, «Ð ¦º¡Îì¸ô ÀÎõ§À¡Ð ¬¨½¨ÂÔõ ÒÃÅÄÕìÌ
«ÛôÒ¸¢ÈÐ.
−ùÅñɧÁ ÀÊÅò¾¢ý μù¦Å¡Õ ¯ÚôÒõ Ũà ÅÊÅÁ¡¸ò
§¾¡ýȢɡÖÁ’
«¨Å ±øÄ¡§Á ÀðʸǢý Ш½Â¡ø ¯ÕÅ¡ì¸ô Àθ¢ýÈÉ.
−ÅüÈ¢ø ¸¡Ïõ
Áü¦È¡Õ ¦À¡ò¾¡ý Ũ¸ “Reset” ±ÉôÀÎÅÐ. −Ð, ÀÊÅò¨¾ Á£û
¿¢¨ÄìÌ(¯ûǣθ¨Ç «¨Å «ÛôÀô ÀÎõ Óý «Æ¢òÐ)
¦¸¡ñÎÅÃ
¯¾×¸¢ÈÐ. “Submit” ¦À¡ò¾¡ý ÅâìÌì ¸£§Æ −ó¾ “Reset”
¦À¡ò¾¡ý Åâ¨Âî §º÷òÐ §º¡¾¢Ðô À¡Õí¸û:

<HTML>
<HEAD>
<TITLE>My form</TITLE>
</HEAD>
<BODY>
<FORM
ACTION=”http://www24.brinkster.com/umarthambi/html_try/my_form.asp”
METHOD=”post”>
Enter your name here:
<INPUT TYPE=”Text” NAME=”mytext” size=”20″>
<INPUT TYPE=”Submit” VALUE=”Send Form”>
<INPUT TYPE=”Reset” VALUE=”Reset Form”>

</FORM>

</BODY>
</HTML>

−É¢, §Å¦È¡Õ ¯ûǢΠŨ¸Â¡É Åð¼Á¡¸ ¿ÎÅ¢ø ´Õ ÒûÇ¢Ô¼ý

¸¡½ôÀÎõ “§Ãʧ¡” ¦À¡ò¾¡ý ÀüÈ¢ô À¡÷ô§À¡õ. (−¾üÌ
§Ãʧ¡
¦À¡ò¾¡ý ±ýÚ ¦ÀÂ÷ ÅÃì ¸¡Ã½õ, −¾É’ «¨ÁôÒ, ÀÆí¸¡Ä
Å¡¦É¡Ä¢¸Ç¢ø ¸¡½ôÀð¼ ´Ä¢ì ¸ðÎÀ¡ðÎ ÌÁ¢Æ¢ý ÅʨÅ
´ò¾¢ÕôÀ¾¡Ä¡Ìõ). −ó¾ ¯ûÇ¢ÎŨ¸Â¢ø ÀÄ ¯ÚôÀ¢É÷ −Õó¾¡ø
²¾¡ÅÐ ´ý¨Èò¾¡ý §¾÷× ¦ºö −ÂÖõ. ¸£úì ¸ñ¼ ±ÎòÐì
¸¡ð¨¼ô
À¡Õí¸û:

<HTML>
<HEAD>
<TITLE>My form</TITLE>
</HEAD><BODY>
<FORM
ACTION=”http://www24.brinkster.com/umarthambi/html_try/my_form.asp”
Enter your name here:
<INPUT TYPE=”Text” NAME=”mytext” size=”20″><p>
Select Colour to diplay:<br>
஠<INPUT TYPE=”Radio” NAME= “color” VALUE=”r”>Red<br>
<INPUT TYPE=”Radio” NAME=”color”
VALUE=”b”>Blue<br></p>

<INPUT TYPE=”Submit” VALUE=”Send Form”>

<INPUT TYPE=”Reset” VALUE=”Reset Form”>
<BR>
</FORM>

</BODY>
</HTML>

§Áü¸ñ¼ ±ÎòÐì ¸¡ðÊø ¯ûǢΠŨ¸ “Radio” ±ýÀ¾¡¸×õ,

«¾ý
¦ÀÂ÷ “color” ±ýô¾¡¸×õ ¦¸¡Îò¾¢Õ츢§È¡õ. «Å¾¡É¢ì¸: −íÌ
−ÃñÎ “§Ãʧ¡” ¦À¡ò¾¡ý¸Ùì¦¸É −ÃñÎ Åâ¸û −Õ¸¢ýÈÉ.
−ÃñÊÖõ
¦ÀÂ÷(NAME) “color” ±ý§È ¦¸¡Îò¾¢Õ츢§È¡õ. ¸¡Ã½õ −ÃñÎõ
Åñ½í¸¨Ç §¾÷× ¦ºö ÀÂýÀÎõ ´§Ã ÌبÅî(group)
§º÷ó¾¨Å¡Ìõ.
¬É¡ø −ÃñÊý Á¾¢ôÒì¸Ùõ r , b ±É ¦Åù§ÅÈ¡¸ì ¦¸¡Îì¸ô
ÀðÎûÇÉ. ±É§Å ²¾¡ÅÐ ´ý¨Èò¾¡ý §¾÷× ¦ºö −ÂÖõ.
§ÁÖõ
−ÅüÈ¢ø ²¾¡ÅÐ ´ýÚ ¦¾¡¼ì¸ò¾¢§Ä§Â §¾÷× ¦ºöÂô ÀðÊÕì¸
§ÅñÎÁ¡É¡ø checked ±ýÈ Àñ¨ÀÔõ «ó¾ ÀðÊ¢Ûû §º÷òÐ
Å¢ð¼¡ø
§À¡Ðõ.

§Áü¸ñ¼ À̾¢¨Â
http://www24.brinkster.com/umarthambi/html_try/view_result.html
±ýÈ ¾Äò¾¢ø ´ðÊ Å¢¨Ç¨Åô À¡Õí¸û. §¾¨Å¡ɡø Á¡üÈí¸û
¦ºöÐ
§º¡¾¢òÐô À¡Õí¸û.

¦ºýÈ Ó¨È ¿¢¸úó¾ ¾Å¨Èì ¸ñÎÀ¢ÊòÐÅ¢ðË÷¸Ç¡?

<FORM> ÀðÊ¢ý ÓÊ× «¨¼ôÒì ÌÈ¢ (>) Å¢ÎÀðÎô
§À¡öÅ¢ð¼Ð.
§ÁÖõ METHOD ÀñÒõ ÌÈ¢ì¸ô À¼Å¢ø¨Ä.

Ckeck Box ±ÉôÀÎõ º¢Ú ºÐÃô ¦ÀðÊ¢¨É º¢Ä ÀÊÅí¸Ç¢ø

¸ñÊÕôÀ£÷¸û. −Ð, ´ýÚ ¬õ «øÄÐ −ø¨Ä ±ýÀ¨¾ì ÌÈ¢ì¸ô
ÀÂý
Àθ¢ÈÐ. ±ÎòÐì ¸¡ð¼¡¸, §¾É£÷ §ÅñΦÁýÈ¡ø «Ð
−É¢ôҼɡ
±ýÀ¨¾ì ÌÈ¢ì¸ «îºÐÃô ¦ÀðÊ¢ø ÌȢ¢ðÎõ, −É¢ôÒ −øÄ¡Áø
±ýÈ¡ø ÌȢ¢¼¡ÁÖõ −Õì¸Ä¡õ. ¸£úì ¸ñ¼¨¾ô À¡Õí¸û:

<INPUT TYPE=”checkbox” name=”chkbox”>With sugar

−¾¢ø ¯ûǢΠŨ¸ “checkbox” ±ýÚ ÌÈ¢ôÀ¢ðÊÕ츢§È¡õ.
“chkbox” ±ýÚ ¦ÀÂäÁ¢ðÊÕ츢§È¡õ. With sugar ±ýÚ ±Ø¾ô
ÀðÊÕôÀÐ, ºÐÃô ¦ÀðÊ ÌȢ¢¼ô ÀðÊÕó¾¡ø “−É¢ôÒ §ÅñÎõ”
±ýÀ¨¾ì ÌÈ¢ôÀ¾ü¸¡¸. ÒÃÅÄ÷ −ó¾ì ÌȢ£𨼠«È¢óÐ ¦¸¡ñÎ
§¾¨ÅÂ¡É ¦ºÂ¨Ä ¬üÚõ.

ÀÄ §¿Ãí¸Ç¢ø ÀÂÉ÷ ¦À¨Ãõ ¸¼×î ¦º¡ø¨ÄÔõ ¯ûÇ¢ÎÁ¡Ú

§¸ðÌõ
ÀÊÅí¸¨Çì ¸ñÊÕôÀ£÷¸û. ¸¼×î ¦º¡ø ¯ûǢΠÒÄõ (Password
Input Field) ¯¨Ãô ÒÄõ(Text field) §À¡¦ÄýÈ¡Öõ, À¡Ð¸¡ôÒì
¸Õ¾¢ ¯ûÇ¢¼ôÀÎõ ¸¼×î ¦º¡ø¨Ä À¢È÷ ¸¡½¡ÁÄ¢Õì¸ ¾¢¨Ã¢ø
´ù¦Å¡Õ ±ØòÐõ ´Õ ÌȢ£¼¡¸ì ¸¡ð¼ô ÀÎõ. −Å’Å¢ÃñÎõ
±ùÅ¡Ú
¦ºÂøÀθ¢È¦¾ýÚ «È¢Â
¸£§Æ ¸¡Ïõ ÀðʨÄ
http://www24.brinkster.com/umarthambi/html_try/view_result.html

±ýÈ ¾Çò¾¢ø ´ðÊ §º¡¾¢Ðô À¡Õí¸û:

HTML>
<HEAD>
<TITLE>My form</TITLE>
</HEAD><BODY>

<FORM
ACTION=”http://www24.brinkster.com/umarthambi/html_try/my_form1.asp”
METHOD=”post”>
<pre>
Enter your name:<INPUT TYPE=”Text” NAME=”mytext”
size=”20″><br>
Enter your password:<INPUT TYPE=”password”
NAME=”pword” size=”20″>
</pre>
<p><INPUT TYPE=”checkbox” name=”chkbox”
Value=”Yes”>Display Password>
</p>

<INPUT TYPE=”Submit” VALUE=”Send Form”>

<INPUT TYPE=”Reset” VALUE=”Reset Form”>
<BR>
</FORM>

</BODY>
</HTML>

±Ø¾ô ÀÆ̧šõ ±î â ±õ ±ø À̾¢ 6

§¾÷× ¦ºö §ÅñÊÂÅüÈ¢ø ´ý¨È ÁðÎõ §¾÷× ¦ºö §Ãʧ¡

¦À¡ò¾¡ý ¯¾Å¢É¡Öõ ÀðÊÂø ¿£ÇÁ¡¸ −Õó¾¡ø «Ð ÀÂý ¾Ã¡Ð.
±É§Å
“drop down” ±ÉôÀÎõ ‘¦¾¡íÌ ÀðʨĒ ÀÂýÀÎò¾ §¿Ã¢Îõ.
−¾¢ø ´Õ Ó¾ý¨Á ÀðÊÔõ ´Õ ¯ÚôÒô À¼’ÊÔõ ¯ñÎ. −ó¾
¯ûǢΠŨ¸ ¦¸¡Îì¸ô Àð¼ ÀðÊÂĢĢÕóÐ §¾÷× ¦ºöÂô ÀÎõ
Ũ¸ ±ýÀ¨¾ì
ÌÈ¢ì¸ <SELECT> ±ýÈ ÀðʨÂô ôÂý ÀÎò¾ §ÅñÎõ. NAME
±ýÈ
ÀñÀ¢ø ¿£í¸û Å¢ÕõÀ¢Â ¦À¨Ãò ¾ÃÄ¡õ. <SELECT> </SELECT>
§º¡Ê¸Ù츢¨¼Â¢ø ÅÕÅÐ ÀðÊÂÄ¢ø ÅÕõ ¯÷ôÀʸǡÌõ.
´ù¦Å¡Õ
¯ÕôÀʸ¨ÇÔõ ÌÈ¢ì¸ <OPTION> ±ýÈ ÀðʨÂô ÀÂýÀÎò¾
§ÅñÎõ.
¿¡ý Apple, Orange, Banana ±ýÀ¨Å¸¨Çô ÀðÊÂÄ¢¼
§ÅñÎÁ¡É¡ø
«¨¾ −ùÅ¡Ú ¾ÃÄ¡õ:

<SELECT NAME=”Fruit”>
<OPTION>Apple</OPTION>
<OPTION>Orange</OPTION>
<OPTION>Banana</OPTION>
</SELECT>

ÀÊÅò¾¢ø ¨¸Â¡Çô ÀÎõ −ý¦É¡Õ ¯ûǢΠŨ¸, TEXTAREA

±ÉôÀÎõ
¯¨Ã ¯ûǢΠŨ¸. ¿¡õ ÓýÒ ¸ñ¼ Text Box ±ýÀ¾üÌõ
−¾üÌõ ¯ûÇ
§ÅÚÀ¡Î, Óó¾ÂÐ ¦ÀÂ÷, ¸¡×î ¦º¡ø §À¡ýÈ ´ü¨È Åâ
¯ûǣθ¨Ç
¾ÕžüÌ ¯¸ó¾¾¡Ìõ. −ó¾ −Ãñ¼¡õ Ũ¸, ¯¨Ã ¿¨¼
±ØÐÅЧÀ¡ø ÀÄ Åâ¸¨Ç ±Ø¾Ä¡õ. ÀÂÉ÷¸Ç¢¼Á¢ÕóÐ
¸ÕòШøû §À¡ýÈ ¿£ñ¼
¯ûǣθ¨Çô ¦ÀÈ −Ð ¯¾×õ.

−¾¢ø,

NAME
ROWS
COLS
WRAP – (off, virtual, physical)
READONLY

±ýÈ ÀñÒ¸û «¼ì¸õ. ±ÎòÐ측𼡸, 30 ±ØòÐì¸û «¸ÄÓõ

ãýÚÅâ¸Ùõ ¦¸¡ñ¼ ¯¨Ã Ũ¸ ¯ûǣΠ−ôÀÊ «¨ÁÂÄ¡õ:

<TEXTAREA NAME=”comment” ROWS=”3″ COLS=”30″

WRAP=”virtual”>
</TEXTAREA>

¦¾¡Æ¢ø Ó¨È Å¨Äò ¾Äí¸û ¦¸¡ñ§¼¡ ÕìÌò¾¡ý ÀÊÅí¸û

Á¢Ìó¾
ÀÂÉÇ¢ôÀ¨Å¡¸ −ÕìÌõ ±ýÚ ¸ñ§¼¡ õ ±ýÈ¡Öõ ¦º¡ó¾
ŨÄô À¸’¸õ ¦¸¡ñ§¼¡ ÕìÌ ´Õ º¢Ä §¿Ãí¸Ç¢ø ôÂÉÇ¢ì¸Ä¡õ.
«ÅüÈ¢ø ´ýÚ, À¢È¨Ã ÀÊÅò¨¾ ¿¢ÃôÀî ¦ºöÐ Á¢ýÉïºø
¦ÀÚÅÐ. ´Õ ±ÎòÐì
¸¡ð¨¼ô À¡÷ô§À¡õ. −ýÚ ¿¡õ ¸ñ¼ −Õ ¯ûǢΠŨ¸¸¨ÇÔõ
−¾¢ø
−¨½ò¾¢Õ츢§Èý. ¸£úì ¸ñ¼ À̾¢¨Â
http://www24.brinkster.com/umarthambi/html_try/view_result.html
±ýÈ Àì¸ò¾¢ø ´ðÊ ¿£í¸û Å¢ÕõÀ¢Â §¾÷Å¢¨Éî ¦ºöÐ, ¯í¸û
ÌÈ¢ôÒ츨ÇÔõ −ðÎ «ÛôÀ¢ô À¡Õí¸û. csd_one@yahoo.com
±ýÈ
Ó¸ÅâìÌ À¾¢Ä¡¸ ¯í¸û Ó¸Åâ¨Â −ðÎ ¯í¸ÙìÌ ÅÕ¸¢È¾¡
±ýÚ
§º¡¾¢Ðô À¡Õí¸û.

<HTML>
<HEAD>
<TITLE>My form</TITLE>
</HEAD><BODY>
<FORM ACTION=”mailto:csd_one@yahoo.com” METHOD=”post”
enctype=”text/plain”>
Enter your name:<INPUT TYPE=”Text” NAME=”Name”
size=”20″><p>
Favorite game:
<SELECT NAME=”Interest”>
<OPTION>Food ball</OPTION>
<OPTION>Cricket</OPTION>
<OPTION>Hocky</OPTION>
</SELECT>
<p>
Enter your notes here:<br>
<TEXTAREA NAME=”Message” ROWS=”5″ COLS=”40″
WRAP=”virtual”>
</TEXTAREA>
<p>
<INPUT TYPE=”Submit” VALUE=”Send Form”>
<INPUT TYPE=”Reset” VALUE=”Reset Form”>
</FORM>
</BODY>
</HTML>

−ó¾ô À¡¸ò¾¢ø −Ú¾¢Â¡¸ ¿¡õ ¸¡½ô §À¡ÅÐ ºð¼õ(frame)

ÀüȢ¾¡Ìõ. −ô§À¡¦¾øÄ¡õ ¦ÀÕõÀ¡ý¨ÁÂ¡É Å¨Äò ¾Çí¸Ç¢ø
−¼ôÒÈò¾¢ø §ÁÄ¢ÕóÐ ¸£Æ¡¸ Íðʸû ¦¸¡ñ¼ ´Õ ÀðÊÂÖõ
ÅÄôÒÈò¾¢ø «îÍðʸǢý Àì¸í¸Ùì¸¡É À¢Ã¾¡É À̾¢Ôõ
«¨Áó¾¢ÕôÀ¨¾ì ¸¡½Ä¡õ.

±ÎòÐì ¸¡ðÎ: ¡†¥ Á¢ýÉïºø Àì¸õ.

−õÁ¡¾¢Ã¢Â¡É «¨ÁôÒ −ÃñÎ ºð¼í¸¨Çì(frames) ¦¸¡ñ¼

Àì¸Á¡¸
«¨Áì¸ô ÀðÊÕ츢ýÈÉ. −ÃñÎ ºð¼í¸Ùõ ´§Ã Àì¸ò¾¢ø
«¨Áó¾¢Õó¾¡Öõ ¯ñ¨Á¢ø −ÃñÎ À̾¢¸Ùõ ¾É¢ò¾É¢Â¡É
Àì¸í¸§Ç!
−ó¾ Àì¸í¸¨Ç ´§Ã −¼ò¾¢ø §¾¡ýÈ ¨Åì¸ ¯¾×ÅÐ
<FRAMESET>,
<FRAME> ¬− ÀðʸǢý §Å¨Ä¡Ìõ.

<FRAMESET> ±ýÈ ÀðÊ, «ó¾î ºð¼í¸û ¾¢¨Ã¢ø ±ôÀÊò

§¾¡ýÈ
§ÅñÎõ ±ýÀ¨¾Ôõ, <FRAME> ±ýÈ Ð¨½ô ÀðÊ «îºð¼í¸Ç¢ø
±ýÉ
§¾¡ýÈ §ÅñÎõ ±ýÀ¾¨Ôõ ÌÈ¢ìÌõ.

<FRAMESET> ±ýÈ ÀðÊ¢ø ¸£úì ¸ñ¼ ÀñÒ¸û ÌÈ¢ì¸ÀÎõ:

ºð¼í¸û −¼, ÅÄÁ¡¸ −Õì¸ §ÅñÎÁ¡É¡ø COLS (column)
±ýÀ¾¡¸×õ, §Áø ¸£Æ¡¸ −Õì¸ §ÅñÎÁ¡É¡ø ROWS ±ýÀ¾¡¸×õ
ÌÈ¢ì¸
§ÅñÎõ. §ÁÖõ ´ù¦Å¡Õ ºð¼Óõ ±ùÅÇ× À¼ò ¾É¢Áõ(pixel)
«øÄÐ
¾¢¨Ã¢ý «ÇÅ¢ø ±ò¾¨É Å£¾õ (%) −Õì¸ §ÅñÎõ ±ýÀ¨¾Ôõ
ÌȢ츧ÅñÎõ. −ùÅ¢ÃñÊø ¾¢¨Ã¢ý Å£¾ò¾¢ø ÌÈ¢ôÀ§¾
À¡Ð¸¡ôÀ¡É
ÅƢ¡Ìõ. ¿£í¸û ±ñ½¢Â Å¢¨Ç¨Å ´§ÃÁ¡¾¢Ã¢Â¡¸ ±øÄì
¸½¢¸Ç¢Öõ
¯ÕÅ¡ìÌõ. ±ÎòÐ측𼡸, ¿£í¸û ¯ñ¼¡ì¸¤õ ºð¼ô Àì¸õ
¾¢¨Ã¢ø
ºÃ¢ À¡¾¢Â¡¸ò ¦¾Ã¢Â §ÅñÎõ ±ýÚ ±ñ½¢É¡ø −ôÀÊò ¾ÃÄ¡õ:

<FRAMESET COLS=”50%,50%”> (−¼, ÅÄõ)

<FRAMESET ROWS=”50%,50%”> (§Áø, ¸£ú)
−õÁ¡¾¢Ã¢ ±ò¾¨É À̾¢¸Ç¡¸×õ À¢Ã¢òÐì ¦¸¡ûÇÄ¡õ. §ÁÖõ, ´Õ
À̾¢¨Â ÌÈ¢òРŢðÎ Á£¾¢¨Â «Îò¾ ºð¼ò¾¢ü¸¡¸ ±Ûõ Ũ¸Â¢ø
‘
* ‘ ÌȢ¢ðΠŢ¼Ä¡õ.

«ÎòÐ «óò¾î ºð¼í¸¸Ç¢ø ±ýÉ §¾¡ýÈ §ÅñÎõ ±ýÀ¨¾ì

ÌÈ¢ì¸
§ÅñÎõ. <FRAME> ±ýÈ ÀðÊ¢ø ¸£ú¸¡ñ¼ ÀñÒ¸¨Çì
ÌÈ¢ì¸Ä¡õ:

NAME (ºð¼ò¾¢ý ¦ÀÂ÷)

FRAMEBORDER (0-−ø¨Ä, 1-¯ñÎ)
SCROLLING (yes, no auto)
NORESIZE(ºð¼ò¾¢ý «¨Áô¨À Á¡üÈ ÓÊ¡¨Á)

±ÎòÐì ¸¡ðÎ:
<FRAME NAME=”frame1″ FRAMEBORDER=”1″ SCROLLING=”auto”>
−¾¢ø NORESIZE ±ýÚ −ð¼¡ø ºð¼¾¢ý «¨Áô¨À Á¡üÈ −ÂÄ¡Ð.
NORESIZE −¼¡Å¢ð¼¡ø «ÊôÀ¨¼Â¢ø ÀÂÉ÷, ºð¼ò¾¢ý «¨Áô¨À
Á¡üÚõ Åñ½§Á −ÕìÌõ.

¸£úì ¸¡Ïõ ÀðÊÂø ´Õ ºð¼ô Àì¸ò¨¾ ¯ÕÅ¡ìÌõ Á£Ô¨Ã¦Á¡Æ¢

ÌȢ£θǡÌõ. −¾¢ø “mnulist” ±ýÈ º¢È¢Â ºð¼Óõ “instruct”
±ýÈ ¦Àâ ºð¼Óõ −Õ츢ýÈÉ. −ÅüÈ¢ø Өȧ “Menu.htm”,
“Instruct.htm” ¬¸¢Â Àì¸í¸û −¨½ì¸ô ÀðÊÕ츢ýÈÉ.

Framepage.htm

<html>
<head>
<meta http-equiv=”Content-Type” content=”text/html;
charset=windows-1252″>
<title>FrameDemo</title>
</head>
<frameset cols=”20%,*”>
<frame src=”Menu.htm” scrolling=”no” name=”mnulist”
noresize target=”_self”>
<frame src=”Instruct.htm” name=”instruct”
scrolling=”auto”>
</frameset>
</html>

¸£ú측Ïõ −ÃñÎ ÀðÊÂø¸Ùõ ºð¼ô Àì¸ò¾¢ø ӨȧÂ, −¼Ð,

ÅÄÐ
ÒÈí¸Ç¢ø ¸¡½ô ÀÎÀ¨Å¡Ìõ. −õãý¨ÈÔõ ¾É¢ò ¾É¢§Â
¦¸¡Îì¸ô
ÀðÊÕìÌõ ¦ÀÂâø §ºÁ¢òÐì ¦¸¡ûÇ×õ. −õãýÚõ ´§Ã −¼ò¾¢ø
(directory) §ºÁ¢ì¸ô ÀðÊÕì¸ §ÅñÎõ. ¯ÄŢ¢ø
framepage.htm ±ýÀ¨¾ò ¾¢ÈóÐ À¡Õí¸û. −¨½Â −¨½ôÒ(internet
connection) −ÕìÌõ§À¡Ð −¼Ð ÒÈõ −ÕìÌõ “Menu” ¨Åî
¦º¡Î츢ô À¡Õí¸û. ãÉ’¨ÈÔõ HTML §¸¡ôÒì¸Ç¡¸î §ºÁ¢ôÀ¾¢ø
º¢ÃÁõ ²üÀð¼¡ø, −í§¸ ¾ð¼×õ:
http://www24.brinkster.com/umarthambi/html_try/framepage.htm

menu.htm

<html>
<head>
<meta http-equiv=”Content-Type” content=”text/html;
charset=windows-1252″>
<title>Menu</title>
</head>
<body text=”#000000″ bgcolor=”#FFFF00″>
<p>
<a target=”instruct”
href=”http://www24.brinkster.com/umarthambi/tamil/ETamil_search.asp”>
1. Tamil Database</a></p>
<p><a target=”instruct”
href=”http://www.pathcom.com/~mahend”>2. Mahen’s Ezil
Nila</a></p>
<p><a target=”instruct”
href=”http://www.kalanjyam.5u.com/”>3. Manju’s
Kalanjyam</a></p>
</body>
</html>

instruct.htm

<html>
<head>
<meta http-equiv=”Content-Type” content=”text/html;
charset=windows-1252″>
<title>Click on the Menu Item</title>
</head>
<body>
<div align=”center”>
<center>
<table border=”50″ cellpadding=”0″ cellspacing=”0″
width=”365″ height=”289″ id=”AutoNumber1″
style=”border-collapse: collapse”>
<tr>
<td width=”365″ height=”289″ bgcolor=”#C8C8C8″>
<p align=”center”><font size=”6″
face=”Verdana”>Click on the Menu Item(left) to display
respective web pages</font></td>
</tr>
</table>
</center>
</div>
</body>
</html>

ÌÈ¢ôÒ:
§Å¨Äô ÀÖÅ¢ý ¸¡Ã½Á¡¸ ´Õ º¢Ú −¨¼¦ÅÇ¢ìÌô À¢ý −ò¦¾¡¼÷
¦¾¡¼÷¸¢ÈÐ.
−ó¾ô À̾¢Â¢ø −¼õ ¦ÀüÈ¢ÕìÌõ ±Îòи¡ðÎì¸û IE4 «øÄÐ
«¾üÌ
§ÁÖûÇ ¯ÄŢ¢ø ¦ºÂøÀÎõ. Netscape 4.7 −ø styles
¦¾¡Æ¢øÀΞ¢ø¨Ä. Ver6 ÀÂýÀÎòÐÀÅ÷¸û −¾ý ¦ºÂøÀ¡Î¸¨Çì
¸¡½
ÓÊÔõ.

−ÐŨÃ, ¿¡õ À¡÷òÐ Åó¾ À̾¢¸Ç¢ø ¯í¸ÇÐ “−øÄô Àì¸õ”

±ØОü§¸Ûõ ¯¾×õ «ÊôÀ¨¼Â¡É Á£Ô¨ÃÌÈ¢¦Á¡Æ¢
Àðʸ¨Çì
¸ñ§¼¡ õ. ±ýÈ¡Öõ «¾üÌ §ÁÖõ Àì¸í¸ÙìÌ “ÐÊôâð¼” ÀÄ
ÅÆ¢¸û
¨¸Â¡Çô Àθ¢ýÈÉ. −ÅüÈ¢üÌ “script” ±ÉôÀÎõ ¬¨½ò
¦¾¡ÌôÒì¸û ¦ÀâÐõ ¯¾×¸¢ýÈÉ. HTML −ø §ÁõÀ¡Î
¦ºöÂôÀ𼾡¸
Dynamic Hyper Text Markup Language ±ÉôÀÎõ DHTML
¯Õ¦ÅÎò¾Ð. ’script’ ¸Ç¢ø ¸¡½ôÀÎõ º¢Ä ¦ºÂøÀ¡Î¸¨Ç
¾ýɸò§¾
¦¸¡ñÎõ º¢Ä ¦ÁÕÜðÎõ Å¢¨Ç׸¨Çò ¾ÕõÀÊ¡¸×õ
¦ºöÂÀðÎûÇÐ.
−ó¾ −Ú¾¢ô À̾¢Â¢ý §¿¡ì¸õ, DHML ÀüÈ¢Ôõ Script ÓبÁ¡¸
¸üÚò òÕžøÄ ±ýÈ¡Öõ «ùÅ¡È¡É º¢ÄÅü¨Èì ¸¡ñÀÐõ
ÁüÚõ ¯í¸û Àì¸í¸û º¢Èì¸ ¯¾×õ §ÅÚ º¢Ä Å¢¼Âí¸¨Çò
¾ÕÅÐÁ¡Ìõ.

HTML ÀÊÅò¾¢ø ¯ûÇ Àø§ÅÚ «í¸í¸¨Ç ¾É¢ò¾É¢§Â «Ï¸¢,

«ÅüÈ¢ý
ÀñÒ¸¨Ç Á¡üÈ ¯¾×õ DOM (document object model) ±ÉôÀÎõ
μ÷
«¨ÁôÒõ CSS(cascade style sheet) ±ÉôÀÎõ μèÁôÒõ DHTML
−ý Ó츢ÂÁ¡É «í¸í¸Ç¡Ìõ.

DHTML −ý −Âì¸ò¨¾ «È¢Â ¸£§Æ ¸¡Ïõ μ÷ ±Ç¢Â ±ÎòÐì

¸¡ð¨¼
http://www24.brinkster.com/umarthambi/html_try/view_result.html
À츾¢ø ´ðÊ §º¡¾¢Ðô À¡Õí¸û:

<html>
<body>

<H2 onmouseover=”style.color=’magenta’”
onmouseout=”style.color=’blue’”>
Roll mouse over this text</H2>
This is an example for DHTML effect

</body>
</html>

−¾¢ø onmouseover, onmouseout ±ýÈ −Õ ¿¢¸ú׸û(events)

−Õ츢ýÈÉ. H2 ±ýÈ «í¸ò¾¢ý ±ØòÐì¸¨Ç Ó¨È§Â ¦ºó¿£Ä
Ž’½ò¾¢Öõ, ¿£Ä Åñ½ò¾¢Öõ «¨ÁÔÁ¡Ú −ùÅ¢Õ ¿¢¸ú׸Ùõ
¾Õõ.
‘±Ä¢’ ¨Â ¦º¡ü¦È¡¼÷ Á£Ð ¨ÅìÌõ§À¡Ð “style.color=’magenta’”
±ýÈ ¬¨½, «î¦º¡ü¦È¡¼¨Ã ¦ºó¿£Ä Åñ½ò¾¢üÌ Á¡üÈ×õ,
‘±Ä¢’ ¨Â ¦º¡ü¦È¡¼¨Ã Å¢ðΠŢÄìÌõ§À¡Ð “style.color=’blue” ±ýÈ
¬¨½ ¦º¡ü¦È¡¼¨Ã ¿£Ä Åñ½ò¾¢üÌ Á¡üÈ×õ ¯¾×¸¢ÈÐ.
¸ÅÉò¾¢ø ¦¸¡ûÙí¸û: §Áü¸ñ¼ ¬¨½¸û <H2> ±ýÈ
«í¸ò¾¢üÌ ÁðΧÁ ¦À¡ÕóÐÁ¡Ú «ó¾ ÀðÊ¢Ûû§Ç§Â
−¼õ¦ÀÈ¢Õ츢ÈÐ.

¸£úì¸ñ¼ ¦Åù§ÅÈ¡É ¿¢¸ú׸¨Ç ¾Ìó¾ −¼í¸Ç¢ø ¨¸Â¡ñÎ

§¾¨ÅÂ¡É Å¢¨Ç׸¨Çô ¦ÀÈÄ¡õ.
−¼ôÒÈò¾¢ø ¿¢¸úÅ¢ý ÌȢ£Îõ ÅÄô ÒÈò¾¢ø «¨Å ±ô§À¡Ð
¿¢¸Øõ
±ýÀ¨¾Ôõ ¸¡½Ä¡õ:
onabort – User aborted page loading
onblur – User left the object
onchange – User changed the value of an object
onclick – User clicked on an object
ondblclick – User double clicked an object
onfocus – User made an object active
onkeydown – When a keyboard key is on its way down
onkeypress – When a keyboard key is pressed
onkeyup – When a keyboard key is released
onload – Page finished loading
onmousedown – User pressed a mouse-button
onmousemove – Cursor moving on an object
onmouseover – Cursor moved over an object
onmouseout – Cursor moved off an object
onmouseup – User released a pressed mouse-button
onreset User resets a form
onselect – User selected content of a page
onsubmit – User submitted a form

STYLE ³ ÀÂýÀÎòОý ãÄõ ±ùÅ¡Ú ±Ç¢¾¡¸ ´Õ Àò¾¢Â¢ý

«øÄÐ
±ØòÐÕÅ¢ý º¢ÈôÒò ¾ý¨Á¨Â Á¡üÈÄ¡õ ±ýÚ ¸¡ñ§À¡õ.
´Õ ¿£ñ¼ Àì¸ò¾¢ø Å¢¾Å¢¾Á¡É ±ØòÐ «Äí¸¡Ãí¸¨Çì
¨¸Â¡Ùõ§À¡Ð ´ù¦Å¡Õ −¼ò¾¢Öõ ±ØòÐÕŢɒ ÀñÒ¸¨Çò ¾Ã
§Åñʾ¢ÕìÌõ. ±ÎòÐì ¸¡ð¼¡¸, ¾Êò¾ (bold) ±ØòÐÕì¸û
ÅÕõ −¼í¸Ç¢¨Ç ´Õ ÌÈ¢ôÀ¢ð¼ Åñ½ò¾¢ø ¸¡ð¼
§ÅñÎÁ¡É¡ø <B> ±ýÈ Àðʨ ´ù§Å¡÷ −¼ò¾¢Öõ ÀÂýÀÎò¾¢,
±ØòÐÕÅ¢ý Åñ½ò¨¾Ôõ ÌÈ¢ì¸ §ÅñÎõ ±ýÚ ¿¡õ
À¡÷ò¾¢Õ츢§È¡õ. style ³ À¡Å¢ò¾¡ø ´Õ Åâ¨Â Á¡üÚžý ãÄõ
±Ç¢¾¡¸î ¦ºöÐÅ¢¼Ä¡õ.

<HTML>
<HEAD>
<STYLE type=”text/css”>
B {color:red}
</STYLE>
</HEAD>
<BODY>
In this example, <b>bold</b> letters are seen in red.
<b>Style sheets</b> are very useful where you want do
<b>changes</b> in your pages frequently.
</BODY>
<HTML>

§Áü¸ñ¼ À̾¢¨Â
http://www24.brinkster.com/umarthambi/html_try/view_result.html
−ø ´ðÊ §º¡¾¨É ¦ºöÐ À¡Õí¸û. ±øÄ¡ ¾Êò¾(bold)
±ØòÐì¸Ùõ
º¢ÅôÒ Åñ½ò¾¢ø ¸¡½ô ÀÎõ. «Åü¨È ¿£Ä ¿¢Èò¾¢ø Á¡üÈ
§ÅñÎÁ¡É¡ø B {color:red} ±ýÀ¾¢ø red ìÌ Á¡üÈ¡¸ blue ³
§À¡ðÎÅ¢ð¼¡ø §À¡Ðõ ±øÄ¡ ±ØòÐì¸Ùõ ¿£Ä Åñ½ò¾¢ø
Á¡È¢Å¢Îõ.
−õÁ¡¾¢Ã¢§Â ±ØòÐÕ Å¨¸¨ÂÔõ(font family) Á¡üÈ¢ì ¦¸¡ûÇÄ¡õ.
Àò¾¢¸Ç¢ý À¢ýÉÃí¨¸ Á¡üÚÅÐ, ÍüÚ츧¡ÊÎÅÐ ±ýÀ¨ÅÔõ
º¡ò¾¢Âõ.

¸£úì ¸ñ¼ ±ÎòÐì ¸¡ðÊø ±ùÅ¡¦ÈøÄõ −ó¾ style ³ì

¨¸Â¡ÇÄ¡õ
±ýÚ À¡÷ì¸Ä¡õ. −¾¢ø §Åù§ÅÈ¡É style ÀñÒ¸¨Ç Á¡üÈ¢
§º¡¾¢òÐô À¡Õí¸û:

<HTML>
<HEAD>
<STYLE type=”text/css”>
H2{text-align:center;border: medium double purple;}
B {color:red}
P {background-color: lime}
HR {color:magenta}
</STYLE>
</HEAD>
<BODY>
<H2>Example</h2>
In this example, <b>bold</b> letters are seen in red.
<b>Style sheets</b> are very useful where you want do
<b>changes</b> in your pages frequently.
<hr>
<P> This paragraph has yellow<br>
Background.</P>
</BODY>
<HTML>

STYLE ¸¨Ç ãýÚ Å¢¾Á¡¸ ÀÂýÀÎò¾Ä¡õ. ´ýÚ, ±ó¾ −¼ò¾¢ø

§¾¨ÅÂ¡É Á¡üÈí¸û §ÅñΧÁ¡ «ùÅ¢¼ò¾¢§Ä§Â style Àñ¨Àô
À¡Å¢ôÀÐ. −ÃñÎ, ¬Å½ò¾¢ý ¾¨Äô À̾¢Â¢ø <STYLE>
ÀðʸÙ츢¨¼§Â ÌÈ¢ôÀÐ. ãýÚ, style ¸¨Ç ¾É¢ §¸¡ôÀ¢ø
¨¸Â¡ÙÅÐ.

ӾĢÃñΠŨ¸¸¨Çì ¸ñ§¼¡õ. −É¢, ¾É¢ §¸¡ôÀ¢ø ±ùÅ¡Ú

¨¸Â¡ÙÅÐ
±ýÀ¨¾Ôõ «¾ý ÀÂýÀ¡Î¸¨ÇÔõ «Îò¾ À̾¢Â¢ø ¸¡ñ§À¡õ.

±Ø¾ô ÀÆ̧šõ, ±î. â. ±õ. ±ø. À̾¢ 7

STYLE (À¡½¢?) ³ ãýÚ Å¢¾Á¡¸ ¨¸Â¡ÇÄ¡õ ±ýÚ À¡÷ò§¾¡õ.

−¾¢ø
ãýÈ¡ÅÐ, style sheet ³ ¾É¢ §¸¡ôÀ¢ø ±Ø¾¢, Á£Ô¨Ã ÀÊÅò¾¢ø
«¨¾ô ÀÂýÀÎò¾¢ì ¦¸¡ûÙÁ¡Ú ¦ºöž¡Ìõ. ¿¡õ ÓýɧÁ
¸ñ¼ «§¾
±ÎòÐì ¸¡ð¨¼ Á£ñÎõ ¸¡ñ§À¡õ. «¾¢ø <STYLE>
ÀðʸÙ츢¨¼Â¢ø
¸¡½ôÀÎõ ÌȢ£θû, ±ó¦¾ó¾ô À̾¢ ±õÁ¡¾¢Ã¢Â¡¸ ¯ÄŢ¢ø
¸¡ðº¢ ¾Ã §ÅñÎõ ±ýÚ ¸¤È¢ì¸ô ÀðÊÕì¸ô ÀðÊÕ¸¢ýÈÉ
«øÄ¡Å¡?
«¨Å¸¨Çò ¾É¢Â¡¸ ´Õ §¸¡ôÀ¢ø ±Ø¾¢ styles1.css ±ýÀ¾¡¸î
§ºÁ¢òÐì ¦¸¡ñÎ Á£Ô¨Ã ÀÊÅò¾¢ø ôÂýÀÎò¾¢ì ¦¸¡ûÇÄ¡õ.
Á£Ô¨Ã
ÀÊÅò¾¢ø ¸£úì ¸ñ¼Å¡Ú «¨¾ì ÌÈ¢ì¸ §ÅñÎõ:

<LINK REL=”stylesheet” TYPE=”text/css”

HREF=”styles1.css”>

Styles ²ÐÁ¢øÄ¡¾ ¸£úì ¸¡Ïõ Á£Ô¨Ã ÌȢ£𨼠ÁðÎõ ¦¸¡ñ¼

À̾¢¨Â
http://www24.brinkster.com/umarthambi/html_try/view_result.html
Àì¸ò¾¢ø ´ðÊ ±ôÀÊ −Õ츢Ȧ¾ýÚ À¡Õí¸û.

<HTML>
<HEAD>

</HEAD>
<BODY>
<H2>Example</h2>
In this example, <b>bold</b> letters are seen in red.
<b>Style sheets</b> are very useful where you want to
do <b>changes</b> in your pages frequently.
<hr>
<P> This paragraph has yellow<br>
Background.</P>
</BODY>
</HTML>

À¢ýÉ¡, <HEAD> </HEAD> −ÅüÈ¢ì ¸¢¨¼§Â ¸¡Ïõ −¨¼¦ÅǢ¢ø

¸£úì¸ñ¼ Åâ¨Âô ÒÌò¾¢ Á£ñÎõ §º¡¾¢òÐô À¡Õí¸û. −ó¾
Åâ¢ø¾¡ý style ¸¨Ç ±ó¾ Ó¸Åâ¢ø ¦ÀÈ §ÅñÎõ ±ýÈ
¸ð¼¨Ç
−Õ츢ÈÐ. −ô§À¡Ð «Æ¸¡ì¸ô Àð¼ Á£Ô¨Ã ÀÊÅò¨¾ì ¸¡½Ä¡õ.

<LINK REL=”stylesheet” TYPE=”text/css”

HREF=”http://www24.brinkster.com/umarthambi/html_try/styles1.css”>

−¾É¡ø ±ýÉ ¿ý¨Á?

Ӿġž¡¸, ¯í¸û Àì¸ò¾¢ý HTML §¸¡ôÀ¢ý «Ç× Ì¨ÈÔõ;

¯í¸û
Àì¸õ §Å¸Á¡¸ ¾¢¨Ã§ÂÚõ. ¿£í¸û ´ù¦Å¡Õ −¼ò¾¢Öõ ±ØòÐÕ,
Àò¾¢, «ð¼Å¨½ ӾĢÂÅü¨È §¾¨Å째üÀ ´Ø¹’Ì (format)
¦ºöÂ
§ÅñÊ §¾¨Å −ø¨Ä. ´ÕÓ¨È style sheet −ø ¦¸¡ÎòÐÅ¢ð¼¡ø
§À¡Ðõ. −Ãñ¼¡Å¾¡¸, ¯í¸û Àì¸ò¾¢ý §¾¡üÈò¨¾ ±Ç¢¾¡¸
Á¡üÈÄ¡õ. Ó¾ý¨Áô ÀÊÅÁ¡É HTML ÀÊÅò¾¢ø Á¡üÈõ
¦ºö¡Á§Ä
style sheet ³ Á¡üÚžý ãÄõ ±Ç¢¾¡¸ ¿¢¨È§ÅüÈÄ¡õ.

±ÎòÐì ¸¡ðÎì¸Ù측¸ ±Ç¢Â À̾¢¸¨Ç ±ÎòÐì ¦¸¡ñ§¼¡õ.

−ýÛõ
º¡¾¡Ã½ Á£Ô¨Ã¢ø ¦ºö −ÂÄ¡¾, À¼í¸¨ÇÔõ ±ØòÐì ¸¨ÇÔõ
´ýÈ¢ý
§Áø ´ýÚ ²üÚ¾ø, À¼í¸¨Ç «øÄÐ ±ØòÐô À̾¢¸¨Ç ¿¸Ãî
¦ºö¾ø
ӾĢ¨ÅÔõ −¾¢ø º¡ò¾¢Âõ.

ÌÈ¢ôÒ:
=======
−ó¾ô À̾¢Â¢ø javascript −¼õ ¦ÀüÈ¢Õ츢ÈÐ. javascript ³ì
¸üÚò ¾ÕÅÐ §¿¡ì¸ÁøÄ. ¯í¸û Àì¸í¸¨Ç º¢ÈôÒÈî ¦ºöÔõ ´Õ
º¢ÄÅü¨È «È¢Ó¸õ ¦ºöŧ¾ −¾ý §¿¡ì¸õ.

º¢Ä §¿Ãí¸Ç¢ø −¨½Âô Àì¸í¸Ç¢ø ¸¡Ïõ −¨½ôÒ츨Ç(links)î

¦º¡ÎìÌõ§À¡Ð ¿¡õ À¡÷ò¾¤ì ¦¸¡ñÊÕìÌõ «§¾ º¡ÇÃò¾¢§Ä§Â
(window) −¨½ôÀî ¦º¡Îì¸ôÀð¼ Àì¸Óõ ¾¢¨Ã§ÂÚŨ¾(loading)ì
¸ñÊÕ¸¢§È¡õ. Óó¾Â Àì¸ò¨¾ì ¸¡½ §ÅñÎÁ¡É¡ø “back”
¦À¡ò¾¡¨É§Â¡ «øÄÐ Alt+−¼Ð «õÒì ÌÈ¢¨Â§Â¡
−Â츧ÅñÊ¢ÕìÌõ. −õÁ¡¾¢Ã¢ §¿Ãí¸Ç¢ø ¾ü§À¡¨¾Â, Á¤ó¾Â
Àì¸í¸Ç¢ø ¯ûÇÅü¨È ´§Ã §¿Ãò¾¢ø ºÃ¢ À¡÷ì¸ §¾¨Å
²üÀð¼¡ø −ÂÄ¡Áø §À¡öÅ¢Îõ. −¾üÌ ´Õ ÅÆ¢ −Õ츢ÈÐ.
¦¸¡Îì¸ÀðÊÕìÌõ −¨½ôÒ −½Âò ¾Ç Ó¸Åâ¢ý Á£Ð ÅÄî
¦º¡ÎìÌî
¦º¡Î츢, “open in new window” ±ýÀ¨¾ò §¾÷ó¦¾Îò¾¡ø Ò¾¢Â
º¡ÇÃò¾¢ø Àì¸õ ¾¢¨Ã§ÂÚõ. −Ð ÀÂÉ¡ ¨¸Â¡Ùõ Ó¨È.

¬É¡ø ¿õ Àì¸ò¨¾ ÁüÈÅ÷ ÅÄõ ÅóÐ ¦¸¡ñÊÕìÌõ§À¡Ð μ÷

−¨½ô¨Àî ¦º¡Î츢ɡø ´Õ º¢Ú º¡ÇÃò¨¾ ±ùÅ¡Ú §¾¡ýÈî
¦ºöÅÐ? ±ÎòÐì ¸¡ð¼¡¸ ¯í¸û −¨½Âô À츾¢ø º¢Ä
¾¸Åø¸¨Çò ¾Õ¸¢È£¸û.
²¾¡Å¦¾¡Õ −¨½À’¨Àî ¦º¡ÎìÌõ§À¡Ð §Áü¦¸¡ñÎ º¢Ä
¾¸Åø¸¨Ç
¯¾Å¢Â¡¸(help) «øÄÐ «È¢Å¢ôÀ¡¸ ´Õ º¢È¢Â º¡ÇÃò¾¢ø ¾Ã
±ñ½Ä¡õ. −¨¾î ¦ºöŦ¾ôÀÊ ±ýÀ¨¾ −ýÚ ¸¡ñ§À¡õ.

Java script ãÄõ ´Õ º¡ÇÃò¨¾ ¸£úì ¸ñ¼ ӨȢø ¾¢Èì¸Ä¡õ:

window.open(”page URL”,”name”,”parameters”)

−¾¢ø page URL ±ýÀÐ Ò¾¢Â º¡ÇÃò¾¢ø ±ó¾ Á£Ô¨Ã Àì¸õ

¸¡ñÀ¢ì¸ô À¼§ÅñÎõ ±ýÀ¨¾Ôõ, name ±ýÀÐ «ó¾ º¡ÇÃò¾¢ý
¦À¨ÃÔõ, parameters ±ýÀÐ «ó¾î º¡ÇÃõ ±ó¦¾ó¾ô
ÀñÒ¸¨Çì
¦¸¡ñÊÕì¸ §ÅñÎõ ±ýÀ¨¾Ôõ ÌÈ¢ìÌõ.

´Õ “¯ó¾¢ ÅÕõ”(pop-up) º¢È¢Â º¡ÇÃò¾¢ø ¸£úì ¸¡Ïõ Å¢¼Âí¸û

§¾¨Åô À¼¡Ð:

Menu bar
Tool bar
Location (−¨½Â Ó¸Åâ ¾ÃôÀÎÁ¢¼õ)
Directory (−¨½Â Ó¸Åâô ÀðÊÂø)
Title bar
Status bar (º¡ÇÃò¾¢ý ¸£úô ÒÈò¾¢ø ¸¡½ôÀÎÅÐ)
Scroll bars
Resize (¿£Ç «¸Äò¨¾ −ØòÐ Á¡üÚÅÐ)
−¨ÅÂýÈ¢, º¡ÇÃò¾¢ý §¾¨ÅÂ¡É ¿£Ç «¸Äò¨¾, À¼ò¾É¢Á(pixel)
«ÇÅ¢ø ¾ÃÄ¡õ.

¬¸, 200 ¿£Ç 200 «¸Ä À¼ò¾É¢Á «Ç× ¦¸¡ñ¼ μ÷ ¯ó¾¢ ÅÕõ
º¢Ú
º¡ÇÃò¨¾ô ¦ÀÈ ¯¾×õ ÀñÒ¸û −ôÀÊ «¨ÁÔõ. −¨Å¸û control
±ýÈ
‘Á¡È¢’¢ø(variable) ŨÃÂÚì¸ô ÀðÎûÇÉ.

var control

control=”toolbar=no,location=no,directories=no,status=no,menubar=
no,scrollbars=no,resizable=no,copyhistory=no,titlebar=no,width=
200,height=200″

−É¢, −ó¾ javascript ³ì ¦¸¡ñ¼ ÓبÁÂ¡É HTML ÀÊÅò¨¾ì

¸¡ñ§À¡õ:

<HTML>
<HEAD>
<script type=”text/javascript”>
function openwindow()
{
var control
control=”toolbar=no,location=no,directories=no,status=no,
menubar=no,scrollbars=no,resizable=no,copyhistory=no,titlebar=no,width=
200,height=200″
window.open(”page URL”,”popup”,control)
}
</script>
</HEAD>
<BODY>
<H2> Opening a small pop-up window</H2>
<a href=”javascript:openwindow()”>Click here to open a
small window</a>

</BODY>
</HTML>

§Áü¸ñ¼¨¾ −íÌ ´ðÊ §º¡¾¨É ¦ºöÐ À¡÷ì¸Ä¡õ:

http://www24.brinkster.com/umarthambi/html_try/view_result.html

¦ºýÈ Ó¨È “¯ó¾¢ ÅÕõ”(pop up) º¢Ú º¡ÇÃò¨¾

¯ÕÅ¡ìÌŦ¾ôÀÊ
±ýÚ ¸ñ§¼¡ õ. μ÷ «ýÀ÷, «Ð ¾¡§É Á¨ÈÔÁ¡Ú ¦ºöÂ
−ÂÖÁ¡
±ýÚ §¸ðÊÕó¾¡÷. «Ð ±ùÅ¡¦ÈýÚ −ýÚ ¸¡ñ§À¡õ.

º¢Ä ŨÄò ¾Çí¸¨Ç À¡÷¨Å¢Îõ§À¡Ð «È¢Å¢ôÀ¡¸§Å¡ «øÄÐ

Å¢ÇõÀÃÁ¡¸§Å¡ º¢Ú º¡ÇÃõ §¾¡ýÚž¨ì ¸¡ñ¸¢§È¡õ. º¢ÄÅüÈ¢ý
Á£Ð ¦º¡Î츢ɡø «¨Å ¾¡õ Á¨ÈóÐ, §ÅÚ Å¨Äò ¾Çí¸ÙìÌ
±ÎòÐî
¦ºøÀ¨Å¡¸ −ÕìÌõ. ¸£§Æ ¿¡õ ¸¡½ô §À¡ÅÐ 5 ¦¿¡Ê¸Ç¢ø
¾¡§É
Á¨ÈóРŢÎõ ´Õ º¡ÇÃÁ¡Ìõ. ¦ºýÈ Ó¨È ¸ñ¼ «§¾ ÀðÊÂÄ¢ø
º¢Ú
Á¡üÈòмý μÃ¢Õ Åâ¸Ùõ §º÷ó¾¢Õ츢ýÈÉ.

<HTML>
<HEAD>
<script type=”text/javascript”>
function openwindow()
{
var control

control=”toolbar=no,location=no,directories=no,status=no,menubar

=no,scrollbars=no,resizable=no,copyhistory=no,titlebar=no,width=
200,height=200″

smallwind=window.open(”page URL”,”popup”,control)

setTimeout(’closeWin(smallwind)’, 5000);
}
function closeWin(smallwind)
{
smallwind.close()
}
</script>
</HEAD>
<BODY>
<H2> Opening a small pop-up window</H2>
<p>Closes automatically after 5 seconds</p>
<a href=”javascript:openwindow()”>Click here to open a
small window</a>
</BODY>
</HTML>

−¾¢ø “setTimeout” ±ýÀÐ §¿Ãò¨¾ ÌÈ¢ì¸ ¯¾×õ ¬¨½Â¡Ìõ.

5000
±ýÀÐ 5000 ‘Á¢øÄ¢ ¦¿¡Ê’ ±ýÀ¾¡Ìõ. «¾¡ÅÐ 5 ¦¿¡Ê.

−ÐŨà μ÷ «ÊôÀ¨¼Â¡É HTML ÀÊÅõ ±Ø¾ ¯¾×õ Á£Ô¨Ã

Àðʸ¨Ç
±ùÅ¡Ú ¨¸Â¡ûÅÐ ±ýÚ ¸ñ§¼¡õ. −ó¾ò ¦¾¡¼Ã¢ý −Ú¾¢ô
À̾¢Â¡¸¢Â
−ôÀ̾¢Â¢ø ´Õ ŨÄô Àì¸õ ±ØÐõ§À¡Ð «Å¾¡É¢ì¸ô
À¼§ÅñÊ º¢Ä
Å¢¼Âí¸¨Çô À¡÷ô§À¡õ.

−ýÚ HTML Àì¸í¸û ±Ø¾ ÀÄ Å¨¸Â¡É ¦Áý ¦À¡Õð¸û

¸¢¨¼ì¸¢ýÈÉ. Á£Ô¨Ã Àðʸû ÀüÈ¢ «È¢Â §ÅñÊÂ
§¾¨Å¢øÄ¡Á§Ä§Â ±Ç¢¾¡¸ ŨÄô
Àì¸í¸û ±Ø¾¢ Å¢¼Ä¡õ. §ÁÖõ “¸¡ñÀ¨¾ô ¦ÀÚ” ±ýÀ¾¡É
WYSIWYG
(What You See Is What You Get) ¾ý¨Á ¦¸¡ñ¼ Microsoft −ý
Front Page §À¡ýÈ ¦Áý¦À¡Õð¸û, ŨÄô Àì¸ò¨¾
¾Â¡Ã¢ìÌõ§À¡§¾
«Ð ±ôÀÊ «¨ÁÔõ ±ýÀ¨¾ ¯½Ã’òÐõ Ũ¸Â¡¸
«¨Áó¾¢Õ츢ýÈÉ.
−õÁ¡¾¢Ã¢Â¡É ¦Áý¦À¡Õð¸û ¦¾¡Æ¢ø 㾢¡É, º¢ì¸Ä¡É
Àì¸í¸¨Ç
−ÂüÈ ¯¾×¸¢ýÈÉ ±ýÈ¡Öõ ¦À¡ÐÅ¡¸ì ¸¨¼À¢Êì¸ §ÅñÊ º¢Ä
¿¢Â¾¢¸û ¯ûÇÉ. «¨Å ¯í¸û Àì¸í¸û Å¢¨ÃÅ¡¸ ¾¢¨Ã§ÂÈ
¯¾×õ.

ӾĢø ¿£í¸û ±ùÅÇ× Å¨Ã À¼í¸¨Ç(graphics) ¯À§Â¡¸¢ì¸ô

§À¡¸¢È£÷¸û ±ýÀ¨¾ ¾£஡ô஡É¢òÐì ¦¸¡ûÇ §ÅñÎõ. À¼í¸û
Á¢ÌóÐ
−Õó¾¡ø Àì¸í¸¨Ç −Èì¸ §¿Ãõ À¢ÊìÌõ. −Ð ¸ÅÉ¢ì¸ô
À¼§ÅñÊÂ
Á¢¸ò §¾¨ÅÂ¡É ´ýÈ¡Ìõ. ¯í¸ÇÐ Àì¸í¸û ±ùÅÇ× ¿øÄ
Å¢¼Âí¸¨Çì
¦¸¡ñÊÕó¾¡Öõ Å¢¨ÃÅ¡¸ ¾¢¨Ã§ÂáŢð¼¡ø ÀÂÉ¡÷ ºÄ¢òÐ,
¯í¸û
Àì¸ò¨¾ Å¢ðΠŢðÎî ¦ºýÚ Å¢ÎÅ¡÷. ±ÉìÌò ¦¾Ã¢ó¾ ¿¢ÚÅÉõ
´ýÈ¢ý Á¾¢ôÒ Á¢ì¸ ¾¸Åø¸¨Çì ¦¸¡ñ¼ ŨÄô Àì¸ò¾¢üÌ −ó¾
¸¾¢¾¡ý §¿÷ó¾Ð. À¢ýÉ÷ Á¡üÈ¢ «¨Áò¾¾¢ý À¢ý ¿øÄ ÀÄý
¸¢ðÊÂÐ. Á¢¸ô ¦ÀÂ÷ ¦ÀüÈ ¦Àâ Ž¢¸ ŨÄò ¾Äí¸û
±Ç¢¨Á¡¸§Å «¨Áó¾¢Õì¸ì ¸¡ñ¸¢§È¡õ (±ÎòÐì ¸¡ðÎ: Yahoo).

Á¢¸ò §¾¨ÅÂ¡É −¼í¸Ç¢ø ÁðΧÁ Ũà À¼í¸¨Ç

¯À§Â¡¸¢Ôí¸û.
À¼í¸¨Çò ¾Â¡Ã¢ìÌõ§À¡Ð º¢Ä Өȸ¨Ç ¨¸Â¡ñ¼¡ø À¼ò¾¢ý
«Ç¨Åì(kilo bytes) ̨Èì¸Ä¡õ. À¼í¸¨Ç ¦¾¡Ìì¸ «øÄÐ
Á¡üÈ¢ÂÁì¸ ¯¾×õ ¦Áý¦À¡Õð¸û (photoshop §À¡ýȨÅ)
−ÅüÈ¢üÌ
¯¾×¸¢ýÈÉ. À¼í¸¨Ç §ºÁ¢ìÌõ§À¡Ð “ŨÄò¾Ç¾¢ü¸¡¸” §ºÁ¢ìÌõ
Ũ¸¨Â §¾¡÷× ¦ºöÐ ¦¸¡ñ¼¡ø À¼ò¾¢ý ¯ñ¨Á¡É
«ÇÅ¢ø(size in
KB) −ÃñÎ «øÄÐ ãýÚ À̾¢Â¡¸ì ܼ ̨ÈòÐÅ¢¼Ä¡õ.
À¼ò¾¢ý
¿¤ñ¨Á(resolution) ±ùÅû×¾¡ý −Õó¾¡Öõ «Ð ¯ÄŢ¢ø
§¾¡üÚÅ¢ì¸ô ÀÎõ§À¡Ð ´Õ ÌÈ¢ôÀ¢ð¼ «ÇÅ¢üÌ §Áø
¸¢ðΞ¢ø¨Ä.
±É§Å ¯ÄŢ¢ø §¾¡ýÚÁÇÅ¢üÌ «¾ý Ññ¨Á −Õó¾¡ø
§À¡ÐÁ¡ÉÐ.
§ÁÖõ À¼ò¾¢ý Åñ½ì ¸Ä¨ÅÔõ «ùÅ¡§È. Åñ½ì ¸Ä¨Å
±ùÅÇÅ¡¸
−Õó¾¡Öõ ´Õ ÌÈ¢ôÀ¢ð¼ «ÇÅ¢üÌ §Áø ¦¾Ã¢Å¾¢ø¨Ä. ±É§Å
256
Åñ½í¸û ¦¸¡ñ¼¨Å¡¸§Å −ÕôÀÐ ¿øÄÐ. −¾É¡Öõ
À¼ò¾¢ý
«ÇצÅÌÅ¡¸ì ̨ÈÔõ. ¸ÕôÒ Å±û¨Çô À¼í¸Ç¡¸ −Õó¾¡ø
À¼ò¨¾î§ºÁ¢ìÌõ§À¡Ð ¸ÕôÒ ¦Åû¨Ç¡¸§Å §ºÁ¢ì¸Ä¡õ.
À¼ò¾¢ý «ÇÅ¢ø ¸¢ð¼ò¾¼’¼ Àò¾¢ø ´Õ Àí¸¡¸ì ̨ÈòÐÅ¢¼Ä¡õ.

ŨÄô Àì¸ò¾¢ø À¼õ ¦¾Ã¢Â §ÅñÊ À̾¢Â¢ø −¨¼¦ÅÇ¢ «¾¢¸õ

−Õó¾¡ø «¨¾ ¿¢ÃôÀ À¼ò¨¾ ¦À⾡¸ −¼ §Åñʾ¢ø¨Ä.
«¾üÌô
À¾¢Ä¡¸ <img> ÀðÊ¢ø ¾¢¨Ã¢ø À¼õ ¦¾¡ýÈ §ÅñÊ ¿£Ç
«¸Äò¨¾ò ¾ÃÄ¡õ(−ùÅ¡Ú ¦ºöÔõ §À¡Ð À¼ò¾¢ý ¾Ãõ ̨È¡
Åñ½õ
À¡÷òÐì ¦¸¡ûÇ §ÅñÎõ). −¾É¡ø À¼ò¾¢ý kb «Ç× Ü¼¡Ð.

¯í¸û Àì¸ò¾¢üÌ À¢ýÉÃí¸õ(background) ¾Ã ±ñ½¢É¡ø ¦ÀâÂ

«Ç× À¼ò¨¾ò ¾Ã¡¾£÷¸û. º¢È¢Â À¼ò¨¾ À¡Å¢òÐ “tile” ¦ºöÐ
¾¢¨Ã¨Â ¿¢ÃôÀ¢ì ¦¸¡ûÇÄ¡õ.

Åñ½í¸¨Çô À¡Å¢ìÌõ§À¡Ð ¸ÅÉÁ¡¸ò §¾÷ó¦¾Îí¸û. ¿¡õ

§Á§Ä
¦º¡ýÉÀÊ ±øÄ¡ Åñ½í¸Ùõ ¾¢¨Ã¢ø §¾¡ýÚž¢ø¨Ä.
Á£Ô¨Ã¢ø
Åñ½í¸Ç¢ý ¦ÀÂ÷¸¨Ç À¡Å¢ì¸Ä¡õ. −¨Å web safe Åñ½í¸û
±ýȨÆì¸ô Àθ¢ýÈÉ. −õÁ¡¾¢Ã¢Â¡É Åñ½í¸¨Çô À¡Å¢ôÀ¾¡ø
¿£í¸û
¯í¸û ¾¢¨Ã¢ø ±ôÀÊì ¸¡ñ¸¢È£÷¸§Ç¡ «ùÅ¡§È ¯í¸û ÀÂÉÕõ
¸¡ñÀ¡÷.

Àì¸í¸Ç¢ø −¼õ¦ÀÕõ À¼í¸û, ÁüÚõ ±ØòÐì¸û §À¡ýÈÅü¨È

´ØíÌ ÀÎò¾ «ð¼Å¨½¨Â(table) ¨¸Â¡Ùí¸û. «¨Å ±Ç¢¾¡¸
´ØíÌ
ÀÎò¾×õ Á¡üÈí¸û ¦ºöÂ×õ ¯¾×õ.

ŨÃÀ¼í¸û, Ò¨¸ôÀ¼í¸û ¬¸¢ÂÅü¨È ¯í¸û ŨÄò ¾Çò¾¢ø

¯À§Â¡¸¢ò¾¡ø «¨Å¸¨Ç ¾É¢Â¡É folder −ø ¾¡Õí¸û.
Àì¸í¸¨Ç
¾¢ÕòÐõ§À¡Ð ±Ç¢¾¡¸ −ÕìÌõ.
¾Á¢úô Àì¸í¸û ±ØÐõ§À¡Ð <HEAD> À̾¢Â¢ø
<META HTTP-EQUIV=”Content-Type” CONTENT=”text/html;
charset=x-user-defined”>
±ýÈ Åâ¨Âî §º÷ì¸ ÁÈ측¾£÷¸û. −Ð ¾¡É¡¸§Å ¯ÄŢ¢ø
charset ³ user-defined ìÌ Á¡üÈ¢Îõ. ÀÂÉ¡÷ ´ù¦Å¡Õ Ó¨ÈÔõ
«Å¡÷ ¯ÄŢ¢ø Á¡üÈõ ¦ºöÂò §¾¨Å¢Õ측Ð.

(ÓüÚõ)