Docstoc

Learn HTML - Tamil

Document Sample
Learn HTML - Tamil Powered By Docstoc
					    Professional Web Development

                               HTML



1        Copyrights © 2002 – 2008 www.valaimanai.com, All rights reserved.   << Back :: Home :: Next >>
HTML

இது இண஠஦ப்தக்கங்கணப ஬டி஬ண஥ப்த஡ற்காக ஬ண஧஦றுக்கப்தட்ட ஑ரு ஡஧ா஡஧஥ாகும்.
இ஡ற்காண ஡஧ப்தடுத்஡ணன World Wide Web Consortium (W3C) ஢ிறு஬ணம் ஬஫ங்கி
஬ருகின்நது. இண஠஦த்஡பம் http://www.w3.org

HTML இன் ஬ிரி஬ாக்கம் தின்஬ரு஥ாறு அண஥ம௃ம்,

Hypertext Markup Language




2                           Copyrights © 2002 – 2008 www.valaimanai.com, All rights reserved.   << Back :: Home :: Next >>
HTML ஢ி஧னின் இன் கட்டண஥ப்பு

HTML இன் கட்டு஥ாணம் ஥ிகவும் இனகு஬ாணது. எந்஡வ஬ாரு HTML Document ம் <html>
என்ந கட்டுப்தாட்டுக் குநி஦ீட்டுடன் (tag) ஆ஧ம்தித்து </html> என்ந tag உடன்
முடி஬ணடம௃ம். இ஡னுள் <head> ------ </head> , <body> -------------- </body> எண இரு தி஧஡ாண
திரிவுகள் கா஠ப்தடும். <head> எனும் tag இனுள் இண஠஦ப்தக்கத்஡ின் ஡ணனப்பு (Title)
஥ற்றும் Meta tags எணப்தடும் ஬ிபக்கக் குநிப்புக்கள் மு஡னி஦ண கா஠ப்தடும். <body> tag
இனுள் தக்கத்஡ின் உள்ப ீடுகள் அணணத்தும் அண஥ம௃ம்.

இவ்஬ாறந ஑வ்வ஬ாரு ற஡ண஬க்கும் தி஧த்஡ிற஦ாக஥ாண கட்டுப்தாட்டுக் குநி஦ீட்டுகள்
த஦ன்தடுத்஡ப்தடும். உ஡ா஧஠஥ாக - <p> --------- </p>, <h1> ---------- </h1>




3                      Copyrights © 2002 – 2008 www.valaimanai.com, All rights reserved.   << Back :: Home :: Next >>
சா஡஧ா஠ html தக்கவ஥ான்நின் கட்டண஥ப்பு.

 <Html>
<Head>
--------------------
----------------------------
</head>

<Body>
---------------------------------
---------------------------
</body>
</html>



HTML ஢ி஧ல்கணப Note pad றதான்ந சா஡ா஧஠ Text Editor கணப உதற஦ாகித்து
எழு஡முடிம௃ம்.




4                                   Copyrights © 2002 – 2008 www.valaimanai.com, All rights reserved.   << Back :: Home :: Next >>
தடிமுணந

1.     இப்வதாழுது Note pad இணணத் ஡ிநந்து (Start >> All Programs >> Accessories >> Notepad) தின்஬ரும் ஢ி஧ல்கணப
       எழுதுங்கள்.

<Html>

<Head>

<Title>Sample HTML Document</title>

</head>

<Body>

<p>

This is my first html page...

<u>simple </u>
Way, The basic structure of an HTML document.

</p>

</body>

</html>




5                                  Copyrights © 2002 – 2008 www.valaimanai.com, All rights reserved.   << Back :: Home :: Next >>
2. தின்ணர் Note pad இன் file menu ஬ில் Save As… என்தண஡த் வ஡ாவு வசய்து ஬ரும் Dialog
    Box இல் உங்கள் இண஠஦ப்தக்கத்ண஡ ஬ன்஡ட்டில் எங்கு றச஥ிக்க
    ஬ிரும்புகின்நீர்கறபா அந்஡ இடத்ண஡த் வ஡ரிவுவசய்஦வும். (உ஡ா஧஠஥ாக My
    Documents இல் Folder ஑ன்ணந உரு஬ாக்கி அ஡னுள் றச஥ிக்க முடிம௃ம்.)

3. தின்ணர் Save as type எனும் இடத்஡ில் All Files என்தண஡த் வ஡ரிவுவசய்஦வும்.

4. File Name எனும் இடத்஡ில் உங்களுக்கு ஬ிரும்தி஦ வத஦ண஧க் வகாடுத்து வ஡ாடர்ந்து
    .html அல்னது .htm எண type வசய்து Save Button ஐ அழுத்஡வும்.




6                     Copyrights © 2002 – 2008 www.valaimanai.com, All rights reserved.   << Back :: Home :: Next >>
இப்வதாழுது உங்கள் இண஠஦ப் தக்கம் றச஥ிக்கப்தட்டு஬ிட்டது. ஢ீங்கள் றச஥ித்஡ றகாப்திணண Double Click
வசய்஬஡ன் மூனம் உங்கள் இண஠஦ உனா஬ி஦ில் ஡ிநந்து வகாள்பனாம்.
உங்கள் தக்கத்஡ின் வ஬பி஦ீடு இப்தடி இருக்கும்




7                        Copyrights © 2002 – 2008 www.valaimanai.com, All rights reserved.   << Back :: Home :: Next >>
<title> Tag

 இங்கு <head> tag இனுள் இருக்கும் <title> tag இணண ற஢ாக்கிணால்

 <title> </title> tag குகளுக்கு இணடற஦ ஢ாம் ஬஫ங்கி஦ "Sample HTML Document" என்ந
 ஬சணற஥ தக்கத்஡ின் Title ஆக அண஥ந்துள்பண஡க் கா஠னாம்.

 குநிப்பு - ஑வ்வ஬ாரு தக்கத்துக்கும் ஢ாம் Title ஆக வகாடுக்கும் வசாற்கள் ஥ிகவும்
 அ஬சி஦஥ாணண஬. வதாது஬ாக இந்஡ச் வசாற்கணப அடிப்தணட஦ாக் வகாண்றட
 ற஡டுவதாநிகள் (Search engines) தக்கத்ண஡ இணங்காணுகின்நண. ஑வ்வ஬ாருதக்கத்஡ிற்கும்
 ஡ணித்து஬஥ாண Title கணப ஬஫ங்கு஬ற஡ சிநந்஡஡ாகும்.

 அடுத்து ற஥லும்சின tag குகணபப் தற்நிப் தார்ப்றதாம்.




8                      Copyrights © 2002 – 2008 www.valaimanai.com, All rights reserved.   << Back :: Home :: Next >>
<p> tag

 <p> </p> tag குகளுக்கிணட஦ில் அண஥ம௃ம் ஬சணங்கள் ஑ரு தந்஡ி஦ாக அண஥ம௃ம்.
 ஑வ்வ஬ாரு தந்஡ிம௃ம் வ஡ாடங்கும் வதாழுது <p> உடன் வ஡ாடங்கி முடிம௃ம்வதாழுது </p>
 உடன் முடி஬ணடம௃ம்.



 <p> paragraph… </p>




9                      Copyrights © 2002 – 2008 www.valaimanai.com, All rights reserved.   << Back :: Home :: Next >>
<h1>, <h2>, <h3>,.. Tags

 இண஬ ஡ணன஦ங்கங்கபின் (Heading) ஬ணககபாகும். <h1> என்தது மு஡ற்஡஧
 ஡ணன஦ங்கத்ண஡க் குநிக்கும்.



 <h1> Heading 1 </h1>
 <h2> Heading 2 </h2>
 <h3> Heading 3 </h3>
 <h4> Heading 4 </h4>
 <h5> Heading 5 </h5>




10                      Copyrights © 2002 – 2008 www.valaimanai.com, All rights reserved.   << Back :: Home :: Next >>
<hr /> Tag

 <hr> என்ந tag இணணப் த஦ன்தடுத்஡ி கிணட஦ாண ஑ரு திரிக்கும் றகாட்ணடப்
 வதற்றுக்வகாள்பனாம்.



 <h1> Heading 1 </h1>
 <hr />
 <h2> Heading 2 </h2>

 தின்஬ரும் தண்புகணபம௃ம் த஦ன்தடுத்஡ முடிம௃ம்.

 <hr width = "200px" align = "right" color = "red" size=4>




11                            Copyrights © 2002 – 2008 www.valaimanai.com, All rights reserved.   << Back :: Home :: Next >>
<Br /> Tag

 இ஡ன்மூனம் பு஡ி஦ Line உரு஬ாக்கப்தடும். இது ஥ிகவும் த஦னுள்ப குநி஦ீடு. End Tag
 ற஡ண஬஦ில்ணன.

 First line <br />
 Next line <br />
 --------------- <br>
 -------------




12                      Copyrights © 2002 – 2008 www.valaimanai.com, All rights reserved.   << Back :: Home :: Next >>
<b> ஥ற்றும் <strong>

 இ஬ற்நின் மூனம் எழுத்துக்கணபத் ஡டிப்தாக ஥ாற்ந முடிம௃ம்.

 <b>First line </b><br>
 <strong> Next line </strong> <br>
 Next line <br>
 -------------




13                           Copyrights © 2002 – 2008 www.valaimanai.com, All rights reserved.   << Back :: Home :: Next >>
Italic <em>

 எழுத்துக்கணபச் சரிக்க உ஡வும்

 <em>First line </em><br>
 <strong> <em> Next line </em> </strong> <br>
 Next line <br>




14                         Copyrights © 2002 – 2008 www.valaimanai.com, All rights reserved.   << Back :: Home :: Next >>
Underline <u>

 அடிக்றகாடிட உ஡வும்

 <u>First line </u><br>
 <b> <em><u> Next line </u></em> </b> <br>
 Next line <br>




15                        Copyrights © 2002 – 2008 www.valaimanai.com, All rights reserved.   << Back :: Home :: Next >>
Order list <ol>

 இது இனக்க஥ிடு஬஡ற்காகப் த஦ன்தடுத்஡ப் தடும் Tag ஆகும்.

 இ஡ன் கட்டண஥ப்பு தின்஬ரு஥ாறு அண஥ம௃ம்.

 <ol>
          <li>first line </li>
          <li>Second line </li>
          <li>something </li>
          <li>xxxxxxxxx </li>
 </ol>




16                       Copyrights © 2002 – 2008 www.valaimanai.com, All rights reserved.   << Back :: Home :: Next >>
இ஡ற்கு type=1, type=a மு஡னி஦ தண்புகணப ஬பங்கு஬஡ன் மூனம் இனக்கத்஡ின் ஬ணகண஦த்
வ஡ரிவுவசய்஦னாம்.



<ol>
          <li type="1">xxxxxxxxxx</li>
          <li type="a">xxxxxxxxxxxxxx</li>
          <li type="A">xxxxxxxxxxxxxx</li>
          <li type="i">xxxxxxxxxxxxxx</li>
          <li type="I">xxxxxxxxxxxxxx</li>
          <li >xxxxxxxxxxxxxx
          <ol>
                           <li>xxxxxxxx</li>
                           <li>xxxxxxxxxxxxx
                           <ol>
                                            <li type="a">xxxxxxxxxxxx</li>
                                            <li type="a">xxxxxxxxxxxxx</li>
                           </ol>
                           </li>

                          <li>xxxxxxx</li>
          </ol>
          </li>
          <li>xxxxxxxxxxx</li>
</ol>



17                          Copyrights © 2002 – 2008 www.valaimanai.com, All rights reserved.   << Back :: Home :: Next >>
Unordered list <ul>

 <ul> மூனம் இனக்கத்஡ிற்குப் த஡ினாக ஬டி஬ங்கணபப் த஦ன்தடுத்஡னாம்.
 இ஡ில் circle, disc, square என்ந தண்புகள் கா஠ப்தடும்.

 <ul>
          <li>first line </li>
          <li>Second line </li>
          <li>something </li>
          <li>xxxxxxxxx </li>
 </ul>




18                       Copyrights © 2002 – 2008 www.valaimanai.com, All rights reserved.   << Back :: Home :: Next >>
<ul>
        <li>xxxxxxxx</li>
        <li type="circle">xxxxxxxxxxxxxxxx</li>
        <li type="disc">xxxxxxxxxxxxxxxxxxx</li>
        <li type="square">xxxxxxxxxxxx </li>
        <li>xxxxxxxxxxxx
        <ul>
                       <li>xxxxxxx</li>
                       <li>xxxxxxxxxx</li>
                       <li>xxxxxxxxxxx

        <ul>
                     <li>xxxxxxxxxx</li>
                     <li>xxxxxxxxxxxx</li>
        </ul>
                     </li>
                     <li>xxxxxxxxx</li>
        </ul>
        </li>
        <li>xxxxxx</li>
</ul>


19                        Copyrights © 2002 – 2008 www.valaimanai.com, All rights reserved.   << Back :: Home :: Next >>
இப்வதாழுது இந்஡ உ஡ா஧஠த்ண஡ பு஡ி஦ HTML File ஆகச் றச஥ித்து வச஦ற்தடுத்஡ிப் தாருங்கள்.


<Html>

<Head>

                    <Title>Sample HTML Document 2</title>

</head>

<Body>

<p>

This is my first html page... <br><br>

<u>simple </u><br><br>
The basic structure of an HTML document.

</p>

<h1><u> Heading 1 </u></h1>
<h2> Heading 2 </h2>
<h3> Heading 3 </h3>
<h4> Heading 4 </h4>
<h5> Heading 5 </h5>

<hr>


<h1>Br </h1>                                                                                                             த ொடர்கின்றது...


20                                         Copyrights © 2002 – 2008 www.valaimanai.com, All rights reserved.   << Back :: Home :: Next >>
First line <br>
Next line <br>
--------------- <br>
------------- <br>
<br>

<h1>Order list </h1>
<ol>
                       <li>first line </li>
                       <li>Second line </li>
                       <li>something </li>
                       <li>xxxxxxxxx </li>
</ol>
<ol>
                       <li type="1">xxxxxxxxxx</li>
                       <li type="a">xxxxxxxxxxxxxx</li>
                       <li type="A">xxxxxxxxxxxxxx</li>
                       <li type="i">xxxxxxxxxxxxxx</li>
                       <li type="I">xxxxxxxxxxxxxx</li>
                       <li >xxxxxxxxxxxxxx
                       <ol>
                                              <li>xxxxxxxx</li>
                                              <li>xxxxxxxxxxxxx
                                              <ol>
                                                                  <li type="a">xxxxxxxxxxxx</li>
                                                                  <li type="a">xxxxxxxxxxxxx</li>
                                               </ol>
                       </li>
                       <li>xxxxxxx</li>
</ol>
</li>
                       <li>xxxxxxxxxxx</li>
</ol>

<hr width=80% align=left>




                                                                                                                               த ொடர்கின்றது...


21                                               Copyrights © 2002 – 2008 www.valaimanai.com, All rights reserved.   << Back :: Home :: Next >>
<h1>Unordered list </h1>

<ul>
                     <li>first line </li>
                     <li>Second line </li>
                     <li>something </li>
                     <li>xxxxxxxxx </li>
</ul>


<ul>
                     <li>xxxxxxxx</li>
                     <li type="circle">xxxxxxxxxxxxxxxx</li>
                     <li type="disc">xxxxxxxxxxxxxxxxxxx</li>
                     <li type="square">xxxxxxxxxxxx </li>
                     <li>xxxxxxxxxxxx
                     <ul>
                                             <li>xxxxxxx</li>
                                             <li>xxxxxxxxxx</li>
                                             <li>xxxxxxxxxxx

                                             <ul>
                                                                   <li>xxxxxxxxxx</li>
                                                                   <li>xxxxxxxxxxxx</li>
                                             </ul>
                     </li>
                     <li>xxxxxxxxx</li>
                     </ul>
                     </li>
                     <li>xxxxxx</li>
</ul>

</body>

</html>




22                                             Copyrights © 2002 – 2008 www.valaimanai.com, All rights reserved.   << Back :: Home :: Next >>
வ஬பி஦ீட்ணடம௃ம் ஢ி஧ணனம௃ம் உன்ணிப்தாக அ஬஡ாணிம௃ங்கள். ஢ி஧னில் ஥ாற்நங்கணப
ஏற்தடுத்஡ி முடிண஬ அ஬஡ாணிம௃ங்கள்.




23                 Copyrights © 2002 – 2008 www.valaimanai.com, All rights reserved.   << Back :: Home :: Next >>
<Pre> Tag

 <pre> tag ஐப் த஦ன்தடுத்து஬஡ன் மூனம் ஢ாம் எப்தடி type வசய்கிறநாற஥ா
 அற஡஬டி஬ிறனற஦ HTML தக்கத்஡ிலும் வகாண்டு஬஧னாம்.

 <pre>
           All Annual Champions
           ---------------------------------------------------------
           Year              Winner                              Loser
           ----              ------                              -------
           2000              Ravi                                Ragu
           1999              Karan                               Robert
           1998              Nila                                Thana
           1997              Mathy                               Mayo
           1996              Siva                                Mayo
           ----------------------------------------------------------
 </pre>




24                            Copyrights © 2002 – 2008 www.valaimanai.com, All rights reserved.   << Back :: Home :: Next >>
வ஬பி஦ீடு




25         Copyrights © 2002 – 2008 www.valaimanai.com, All rights reserved.   << Back :: Home :: Next >>
<blockquote>

 <blockguote> ஐப் த஦ன்தடுத்஡ி குநித்஡ ஑ரு வ஡ாகு஡ி வசாற்கணப சா஡ா஧஠ ஢ிணன஦ினிருந்து ற஬றுதடுத்஡ி
 அ஫காக ஑ழுங்கு தடுத்஡ முடிம௃ம். இந்஡ உ஡ா஧஠த்ண஡ப் தரீட்சித்துப் தாருங்கள்.



 <p>
 Here begins the quote
 </p>
                 <blockquote>
                 <p>
                 The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick
                 brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox
                 jumps over the lazy dog.
                The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick
                brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox
                jumps over the lazy dog.
                The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick
                brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox
                jumps over the lazy dog.
                </p>
                <p>Professional Web designing 2002 - 2008.</p>
                </blockquote>
 <p>
 And there ends the quote
 </p>



26                                Copyrights © 2002 – 2008 www.valaimanai.com, All rights reserved.        << Back :: Home :: Next >>
வ஬பி஦ீடு




27         Copyrights © 2002 – 2008 www.valaimanai.com, All rights reserved.   << Back :: Home :: Next >>
எழுத்துக்கணப அ஫குதடுத்஡ல் (Character Formatting )

 இ஬ற்ணநப் தரீட்சித்துப் தாருங்கள்.

 <b>        Boldface type                                    ஡டிப்தாக்கு஬஡ற்கு
 <u>        Underlined text                                  அடிக்றகாடிடல்
 <i>        Italics                                          சரிப்த஡ற்கு
 <strike>   Text that has a line through it                  குறுக்குக் றகாடு
 <sub>      Subscript                                        அடி
 <sup>      Superscript                                      அடுக்கு




28                          Copyrights © 2002 – 2008 www.valaimanai.com, All rights reserved.   << Back :: Home :: Next >>
எழுத்துரு <Font > ஥ற்றும் ஢ிநங்கள் (Colors)

 உங்கள் எழுத்துக்களுக்கு ஬ிரும்தி஦ ஬டி஬ம், ஢ிநம் மு஡னி஦஬ற்ணந ஬஫ங்கு஬஡ற்கு
 இந்஡ Tag த஦ன்தடும்.

 அபவு ஥ாற்நங்களுக்காக size என்ந தண்பு த஦ன்தடுத்஡ப்தடும்.

 <font size=2>
              This is small
 </font>
 <font size=5>
              This is large
 </font>
 <p>
              <font size=-3>
                             This is very small
              </font>
              <font size=+3>
              This is very large
              </font>
 </p>


29                            Copyrights © 2002 – 2008 www.valaimanai.com, All rights reserved.   << Back :: Home :: Next >>
஬ிரும்தி஦ எழுத்துருண஬ ஥ாற்று஬஡ற்கு face என்ந தண்பு த஦ன்தடும்.

<font face="Arial"> xxxxxxxxxxxxxxx </font>
<font face="Arial, Helvetica, sans-serif"> xxxxxxxxxxxxxxxx </font>




30                          Copyrights © 2002 – 2008 www.valaimanai.com, All rights reserved.   << Back :: Home :: Next >>
஢ிந ஥ாற்நங்களுக்காக color என்ந தண்பு த஦ன்தடுத்஡ப்தடும்.

இது வதாது஬ாக இ஧ண்டு ஬஫ிகபில் த஦ன்தடுத்஡ப் தடுகின்நது.

<font color = red > இது உரு஬ணக.

<font color = #660011 > இது ஥ற்ந஦ ஬ணக. இம்முணந RGB ஐ அடிப்தணட஦ாக் வகாண்றட
அண஥ந்஡ாகும். இ஡ன்மூனம் ஬ிரும்தி஦ எந்஡ ஑ரு ஢ிநத்ண஡ம௃ம் உரு஬ாக்க முடிம௃ம்.
அ஡ா஬து RGB ஢ிநமுணநண஥஦ில் Red, Green, Blue எனும் மூன்று தி஧஡ாண ஢ிநங்களும்.
256 தகு஡ிகபாகப் திரிக்கப்தட்டுப் த஦ன்தடுத்஡ப்தடும். ஢ிநக்கனண஬஦ின் றதாது ஢ிநத்஡ின்
஬ிகித்஡ிற்றகற்த ஑வ்வ஬ாரு ஢ிநத்஡ிற்கும் 0 வ஡ாடக்கம் 255 ஬ண஧஦ாண இனக்கங்கள்
஬஫ங்கப்தடும். இவ்஬ாறு ஬஫ங்கப்தடும் இனக்கங்கபின் hexadecimal (அடி த஡ிணாறு)
஬டி஬ற஥ ற஥றன த஦ன்தடுத்஡ப் தட்டுள்பது.

உ஡ா஧஠஥ாக -



இந்஡ ஢ிநத்ண஡ப் வதறு஬஡ற்காண RGB வதறு஥஡ி R = 60, G = 182, B = 85 ஆகும். இ஡ணண
hexadecimal ஬டி஬த்஡ிற்கு ஥ாற்நிணால் 60 இன் hexadecimal 3C ஆகும். அவ்஬ாறந 182
இற்கு B6, 85 இற்கு 55 ஆகும். எணற஬ இந்஡ ஢ிநத்ண஡ப் த஦ன்தடுத்தும் வதாழுது color =
#3CB655 எணப் த஦ன்தடுத்஡ ற஬ண்டும்.


31                     Copyrights © 2002 – 2008 www.valaimanai.com, All rights reserved.   << Back :: Home :: Next >>
<font color= #ff0000>xxxxxxxxxxxxxxx</font>
<font color=red>xxxxxxxxxxxxxxx</font>

<font color=#00ff00>xxxxxxxxxxxx</font>
<font color=green>xxxxxxxxxxx</font>

<font color=#0000ff>xxxxxxxxxxxxxxxx</font>
<font color=blue>xxxxxxxxxxxxx</font>

தின்஬ரு஥ாறு <body> tag இனுள் text என்ந தண்திற்கு ஢ிநத்஡ிணண ஬஫ங்கிணால் உங்கள்
இண஠஦ப்தக்கத்஡ில் இருக்கும் அணணத்து எழுத்துக்களும் (ற஬றுதண்புகள்
஬஫ங்கப்தடா஡) குநிப்திட்ட ஢ிநத்஡ிற்கு ஥ாற்ந஥ணடம௃ம்.

<body text=green>

<body text=#00ff00>

தக்கத்஡ின் தின்ண஠ி ஬ர்஠த்ண஡ ஥ாற்று஬஡ற்கு,

<body bgcolor=#00ffff>




32                         Copyrights © 2002 – 2008 www.valaimanai.com, All rights reserved.   << Back :: Home :: Next >>
குநிப்பு :–

தக்கத்஡ின் ஆ஧ம்தப்தகு஡ில் (<body> </body> இனுள் )
<basefont size=5 color=#006699> எண எழுது஬஡ன் மூனம் எழுத்துக்கபின் தி஧஡ாண ஢ிநம்
அபவு மு஡னி஦஬ற்ணந ஢ிர்஠஦ிக்கனாம்.




33                   Copyrights © 2002 – 2008 www.valaimanai.com, All rights reserved.   << Back :: Home :: Next >>
தடங்கள் (Images) <img>

 இண஠஦த்஡ப ஬டி஬ண஥ப்தில் தடங்கபின் ற஡ண஬ இன்நி஦ண஥஦ா஡து. தடங்கணப
 இண஠஦ப்தக்கத்஡ில் வகாண்டு஬ரு஬஡ற்காக HTML இல் <img> என்ந Tag த஦ன்தடுத்஡ப்
 தடுகின்நது. வதாது஬ாக JPEG, GIF, PNG ஆகி஦ ஬டி஬ங்கள் த஦ன்தடுத்஡ப் தடுகின்நண.
 ஆ஦ினும் ‘plug-in’ கணபப் த஦ன்தடுத்து஬஡ன் மூனம் ற஬று ஬டி஬ங்கணபம௃ம்
 த஦ன்தடுத்஡ முடிம௃ம். GIF மூனம் அணசம௃ம் தடங்கணபம௃ம் உரு஬ாக்கமுடிம௃ம்.

 முக்கி஦ குநிப்புக்கள் - இண஠஦த்஡ப ஬டி஬ண஥ப்தில் தடங்கணபப் த஦ன்தடுத்தும்
 வதாழுது ஥ிகவும் முக்கி஦஥ாகக் க஬ணிக்க ற஬ண்டி஦து றகாப்தின் அபவு (File Size)
 ஆகும். File Size இணண எவ்஬ப஬ிற்கு குணநக்கமுடிம௃ற஥ா அவ்஬ப஬ிற்கு குணநக்க
 ற஬ண்டும். வதரி஦ அபவுள்ப தடங்கணபப் த஦ன்தடுத்஡ிணால் அண஬ குணநந்஡
 ற஬கமுள்ப இண஠஦ இண஠ப்புக்கபில் த஡ி஬ிநக்க஥ா஬஡ற்கு ஢ீண்ட ற஢஧வ஥டுக்கும்.
 அது தார்ப்த஬ர்கணப எரிச்சனணட஦ச் வசய்஬துடன் உங்கள் இண஠஦ப்தக்கத்஡ின்
 அ஫ணகம௃ம் வகடுக்கும். அத்துடன் தடத்஡ின் ஢ீப அகனங்கணப 800 x 600 புள்பித்
 வ஡பி஬ினுள் (pixels) றதணு஬து சிநந்஡து. ஏவணணில் அணண஬ரும் அ஡ிக Screen Resolution
 உள்ப ஡ிண஧ (Monitor) கணபப் த஦ன்தடுத்து஬ர் எண எ஡ிதார்க்க முடி஦ாது.




34                   Copyrights © 2002 – 2008 www.valaimanai.com, All rights reserved.   << Back :: Home :: Next >>
தடத்஡ின் Resolution 72 ஆக இருக்கற஬ண்டும். ஢ீங்கள் Adobe® PhotoShop வ஥ன்வதாருள்
த஦ன்தடுத்துத஬ர் எணின் தடி஡ின் அபவுத்஡ிட்டம் உ஡ா஧஠஥ாக இவ்஬ாநிருக்கும்.




35                    Copyrights © 2002 – 2008 www.valaimanai.com, All rights reserved.   << Back :: Home :: Next >>
அத்துடன் றச஥ிக்கும் வதாழுது Save for Web… என்ந வ஡ரிண஬ப் த஦ன்தடுத்஡ ற஬ண்டும்.
JPEG ஆகச் றச஥ிக்கும் வதாழுது அ஡ன் ஡஧த்஡ிணண (JPEG Quality) 60 ஆக றதணு஬து
சிநந்஡து.




36                  Copyrights © 2002 – 2008 www.valaimanai.com, All rights reserved.   << Back :: Home :: Next >>
அ஬஡ாணிம௃ங்கள் :-

஢ீபம் 468 அகனம் 350 ஆகவுள்ப இந்஡ப்தடத்஡ின் உண்ண஥஦ாண அபவு (File Size) 480 kb
ஆகும். ஆணால், Save For Web… இல் JPEG Quality 60 ஆகச் றச஥ிக்கும் வதாழுது இ஡ன்
அபவு (File Size) 23kb ஆகக் குணநகின்நது. ஆணால் வ஡பி஬ில் ஥ாற்ந஥ில்ணன.




37                  Copyrights © 2002 – 2008 www.valaimanai.com, All rights reserved.   << Back :: Home :: Next >>
குணநந்஡ ஢ிநங்களுள்ப சிநி஦ தடங்கவபணின் (Buttons) GIF ஬டி஬த்ண஡ம௃ம் அ஡ிக
஢ிநங்களுள்ப (Color full) வதரி஦ தடங்களுக்கு JPEG ஬டி஬த்ண஡ம௃ம் த஦ன்தடுத்து஬ற஡
சிநந்஡து.
இந்஡ உ஡ா஧஠ங்கணபப் தாருங்கள்.




                               300 x 450 JPEG 57 kb




                                                                                             300 x4 50 GIF 103 kb
38                   Copyrights © 2002 – 2008 www.valaimanai.com, All rights reserved.   << Back :: Home :: Next >>
300 x 100 JPEG 8.28 kb




300 x 100 GIF 2.31 kb




39                      Copyrights © 2002 – 2008 www.valaimanai.com, All rights reserved.   << Back :: Home :: Next >>
இ஡ினிருந்து தின்஬ரும் முடி஬ிற்கு ஬஧முடிம௃ம்.



தடத்஡ின் ஡ன்ண஥ (Graphic Type )               றகாப்தின் ஬ணக (File Format )

வதரி஦ தடங்கள் (Photographs)        JPG
எழுத்துக்கள் (Text with few colors)                          GIF
சிநி஦ குநி஦ீடுகள் (Small icons) GIF
Anything with 256+ colors                                    JPG




40                          Copyrights © 2002 – 2008 www.valaimanai.com, All rights reserved.   << Back :: Home :: Next >>
தடங்கணப இண஠த்஡ல்

஑ரு இண஠஦ப் தக்கத்஡ில் தடங்கணப இண஠ப்த஡ற்கு <img> என்ந tag இனுள் src என்ந
தண்பு த஦ன்தடுத்஡ப் தடுகின்நது.

<img src=MyPicture.gif>

஢ீங்கள் றச஥ித்஡ இண஠஦ப்தக்கமும் தடமும் ஑ற஧ folder இனுள் இருந்஡ால் ஥ட்டுற஥
ற஥ற்குநித்஡ ஢ி஧ல்மூனம் தடம் வ஡ரிம௃ம்.
உங்கள் இண஠஦ப்தக்கம் ஑ரு Folder இனுள்ளும் தடம் அ஡னுள்றப images என்ந Folder
இனுள்ளும் இருந்஡ால் ஢ி஧ல் தின்஬ரு஥ாறு அண஥ம௃ம்.


<img src=images/MyPicture.gif>

இண஠஦த்஡பத்஡ிணணப் த஡ிற஬ற்நம் வசய்ம௃ம்வதாழுது இண஠஦ப் தக்கங்கணபம௃ம்
இண஠ப்பு ஬஫ங்கப்தட்ட தடங்கணபம௃ம் றசர்த்து த஡ிற஬ற்நம் வசய்஦ற஬ண்டி஦து
அ஬சி஦஥ாகும்.




41                        Copyrights © 2002 – 2008 www.valaimanai.com, All rights reserved.   << Back :: Home :: Next >>
                                            இண஠஦ப்தக்கம்




42   Copyrights © 2002 – 2008 www.valaimanai.com, All rights reserved.   << Back :: Home :: Next >>
                                     தடம்




43   Copyrights © 2002 – 2008 www.valaimanai.com, All rights reserved.   << Back :: Home :: Next >>
அ஡ா஬து தடத்துக்காண சரி஦ாண அண஥஬ிடத்ண஡ ஬஫ங்கற஬ண்டி஦து அ஬சி஦஥ாகும்.

ற஬று இண஠஦த்஡஠ங்கபில் இருந்து தடங்களுக்காண இண஠ப்புக்கணபம௃ம் ஬஫ங்க
முடிம௃ம்.
உ஡ா஧஠஥ாக www.google.com எனும் இண஠஦த்஡பத்஡ில் உள்ப Logo_25wht.gif என்ந
தடத்஡ிணண எ஥து இண஠஦ப்தக்கத்஡ில் வகாண்டு஬஧ற஬ண்டுவ஥ணில் ஢ி஧ல் தின்஬ரு஥ாறு
அண஥ம௃ம்.

<img src="http://www.google.com/logos/Logo_25wht.gif" >

இண஠ப்பு ஬஫ங்கும் வதாழுது தடத்஡ின் சரி஦ாண முக஬ரி (URL) வ஡ரிந்஡ிருக்க ற஬ண்டும்.




44                       Copyrights © 2002 – 2008 www.valaimanai.com, All rights reserved.   << Back :: Home :: Next >>
<img> tag உடன் width, height, align, border, alt மு஡னி஦ தண்புகணபப் த஦ன்தடுத்஡
முடிம௃ம்.


<img src=images/MyPicture.gif width=127 height=115>




<img src=images/MyPicture.gif width=127 height=115 border=4>




45                       Copyrights © 2002 – 2008 www.valaimanai.com, All rights reserved.   << Back :: Home :: Next >>
alt தண்பு மூனம் தடத்஡ிற்கு ஬ிபக்கக் குநிப்புக்கணப ஬஫ங்க முடிம௃ம்.

<img src=“images/MyPicture.gif” width=127 height=115 border=4 alt=“This is my picture”>

தடத்஡ின் ஥ீ து Mouse இணணக் வகாண்டுவசல்லும்வதாழுது ஬ிபக்கக் குநிப்பு காட்சி஡ரும்.




46                      Copyrights © 2002 – 2008 www.valaimanai.com, All rights reserved.   << Back :: Home :: Next >>
align தண்பு மூனம் தடத்஡ிணண ஬ிரும்தி஦ இடத்஡ிற்கு ஑ழுங்குதடுத்஡னாம்.

<img src=images/MyPicture.gif width=127 height=115 border=2 align=left>




47                       Copyrights © 2002 – 2008 www.valaimanai.com, All rights reserved.   << Back :: Home :: Next >>
<img src=images/MyPicture.gif width=127 height=115 border=2 align=right>




48                       Copyrights © 2002 – 2008 www.valaimanai.com, All rights reserved.   << Back :: Home :: Next >>
தின்ண஠ிப் தடம்

<body> tag இனுள் background என்ந தண்திணணப் த஦ன்தடுத்஡ி இண஠஦ப் தக்கத்஡ிற்குப்
தின்ண஠ி஦ாக தடத்஡ிணணக் வகாண்டு஬஧முடிம௃ம்.


<body background=“back.gif">




49                      Copyrights © 2002 – 2008 www.valaimanai.com, All rights reserved.   << Back :: Home :: Next >>
இண஠ப்புக்கள் (Links)

 ஒர் இண஠஦ப் தக்கத்஡ினிருந்து ற஬வநாரு இண஠஦ப் தக்கத்஡ிற்றகா அல்னது
 தக்கத்஡ின் ற஬வநாரு தகு஡ிக்றகா அல்னது ற஬வநாரு றகாப்திற்றகா (File) அல்னது
 ற஬வநாரு இண஠஦த் ஡பத்஡ிற்றகா அல்னது ஥ின்ணஞ்சலுக்றகா இண஠ப்புக்கணப
 ஬஫ங்க முடிம௃ம்.

 இ஡ற்காக <a> என்ந tag த஦ன்தடும்.

 <a > tag இனுள் href என்ந தண்பு த஦ன்தடுத்஡ப்தடும்.

 கட்டண஥ப்பு இவ்஬ாறு அண஥ம௃ம்.

 <a href = “file Name” > இண஠ப்பு ஬஫ங்கற஬ண்டி஦ வசால் </a>

 அ஡ா஬து ஢ீங்கள் இண஠ப்பு ஬஫ங்க ற஬ண்டி஦ தக்கத்஡ின் வத஦ர் mypage.html ஆகவும்
 இண஠ப்பு ஬஫ங்க ற஬ண்டி஦ வசால் show my page எணவும் இருந்஡ால் ஢ி஧ல் இவ்஬ாறு
 அண஥ம௃ம்.


 <a href = “mypage.html” > show my page </a>




50                       Copyrights © 2002 – 2008 www.valaimanai.com, All rights reserved.   << Back :: Home :: Next >>
தடிமுணந :-

1) மு஡னில் ஑ரு இண஠஦ப்தக்கம் ஑ன்ணந உரு஬ாக்கி அ஡ற்கு page1.html எண
   வத஦ண஧க் வகாடுத்து றச஥ிம௃ங்கள்.
2) இப்வதாழுது இன்னுவ஥ாரு இண஠஦ப்தக்கத்ண஡ உரு஬ாக்குங்கள்.
3) அ஡ில் தின்஬ரும் ஢ி஧ணன றசருங்கள்
   <a href = “page1.html” > click here </a> to show page 1.

4) இந்஡ப்தக்கத்஡ிற்கு mainpage.html எண வத஦ண஧ ஬஫ங்கி றச஥ிம௃ங்கள்.

5) இப்வதாழுது mainpage.html இணண உங்கள் இண஠஦ உனா஬ி஦ில்
   ஡ிநந்துவகாள்ளுங்கள்.

     வ஬பி஦ீடு இவ்஬ாநிருக்கும்,




51                     Copyrights © 2002 – 2008 www.valaimanai.com, All rights reserved.   << Back :: Home :: Next >>
                                                   click here என்த஡ன் ற஥ல் சுட்டிண஦ (mouse)
                                                   ஢கர்த்஡ிணால் சுட்டி ணக றதான்று ஥ாறும்.
                                                    அ஡ன்ற஥ல் அழுத்து஬஡ன் மூனம்
                                                   ஢ீங்கள் இண஠ப்பு ஬஫ங்கி஦ page1.html
                                                   ஡ிநக்கப்தடும்.


                                                   இவ்஬ாறந page1.html இல் இருந்து
                                                   mainpage.html இற்கும் இண஠ப்திணண
                                                   ஬஫ங்க முடிம௃ம்.




52   Copyrights © 2002 – 2008 www.valaimanai.com, All rights reserved.     << Back :: Home :: Next >>
தக்கம் ஑ன்நிற்கு இண஠ப்பு ஬஫ங்கி஦ண஡ப் றதான குநிப்திட்ட ஑ரு றகாப்திற்கும்
இண஠ப்திணண ஬஫ங்க முடிம௃ம்.

஢ாம் இண஠ப்பு ஬஫ங்கற஬ண்டி஦ றகாப்தின் வத஦ர் myfile.exe ஆ஦ின்,
This is our software <a href = “myfile.exe” >Download here </a>
எண ஢ி஧ல் அண஥ம௃ம்.

இண஠ப்தின் ஥ீ து அழுத்தும்வதாழுது த஡ி஬ிநக்கம் வசய்஬஡ற்காண dialog box ற஡ான்றும்.




53                      Copyrights © 2002 – 2008 www.valaimanai.com, All rights reserved.   << Back :: Home :: Next >>
இவ்஬ாறந ற஬று இண஠஦த்஡பத்஡ிற்கு இண஠ப்பு ஬஫ங்கு஬஡ா஦ின், ஡பத்஡ின் சரி஦ாண
முக஬ரி஦ிணண href தண்திற்குப் வதறு஥஡ி஦ாக ஬஫ங்கற஬ண்டும்.

<a href = “http://www.google.com/” > World’s #1 search engine </a> Google.
 இந்஡ இண஠ப்திணண அழுத்஡ிணால் உங்கணப google.com இற்கு அண஫த்துச் வசல்லும்.



இ஬ற்ணநம௃ம் தரீட்சித்துப் தாருங்கள்.


<a href = “http://www.opensourceshare.com/” > Open Source Downloads </a>

<a href = “http://www.opensourceshare.com/GoogleDesktopBar-Setup.exe” > Google Desktop Bar
</a>




54                      Copyrights © 2002 – 2008 www.valaimanai.com, All rights reserved.   << Back :: Home :: Next >>
<a > tag இனுள் href தண்புடன் target என்ந தண்திணணம௃ம் றசர்த்துப் த஦ன்தடுத்து஬஡ன்
மூனம், இண஠ப்ணத பு஡ி஦ ஑ரு தக்கத்஡ில் ஡ிநத்஡ல் மு஡னி஦ ஏற்தாடுகணபச் வசய்஦
முடிம௃ம்.

target இற்குப் வதறு஥஡ிகபாக _blank, _parent, _self ஥ற்றும் _top மு஡னி஦ண தன்தடும்.

_blank மூனம் உங்கள் இண஠ப்பு பு஡ி஦ ஑ரு தக்கத்஡ில் ஡ிநக்கப்தடும். ற஬று இண஠஦த்
஡பங்கபிற்காண இண஠ப்புகணப ஬஫ங்கும் வதாழுது இ஡ணணப் த஦ன்தடுத்து஬து
சிநந்஡து.

<a href = “http://www.opensourceshare.com/” target = “_blank” > Open Source Downloads </a>

_parent மூனம் இண஠ப்பு அற஡தக்கத்஡ிறனற஦ ஡ிநக்கப்தடும்.
<a href = “http://www.opensourceshare.com/” target = “_parent” > Open Source Downloads </a>

_self எண ஬஫ங்கின் ஢ிணனண஥க்கு ஏற்ந஬ாறு இண஠஦ உனா஬ி ஡ீர்஥ாணிக்கும்.

_top எண ஬஫ங்கின் ஢ீங்கள் இண஠஦ப்தக்கத்஡ில் Frame கணபப் த஦ன்தடுத்஡ி இருந்஡ால்
எல்னா஬ற்நிற்கும் ற஥னாக இண஠ப்பு ஬ிரிம௃ம். (Frame கள் தற்நி தின்ணர் தார்க்கனாம்.)




55                      Copyrights © 2002 – 2008 www.valaimanai.com, All rights reserved.   << Back :: Home :: Next >>
Named Anchor

 ஑ரு தக்கத்஡ின் வ஬வ்ற஬று தகு஡ிகளுக்கு இண஠ப்பு ஬஫ங்கு஬஡ற்கு மு஡னில் <a > tag
 இனுள் name என்ந தண்திற்கு ஬ிரும்தி஦ வத஦ண஧ப் வதறு஥஡ி஦ாகக் வகாடுக்க ற஬ண்டும்.
 இது Named Anchor எண அண஫க்கப்தடும்.
 உ஡ா஧஠஥ாக தக்கத்஡ின் ஆ஧ம்தப் தகு஡ி஦ில் தின்஬ரு஥ாறு ஢ி஧ணன அண஥ம௃ங்கள்.


 <a name=top ></a>

 தின்ணர் தக்கத்஡ின் அடிப்தகு஡ி஦ில் இருந்து top எணப் வத஦ரிடப்தட்ட இந்஡ anchor இற்கு
 இண஠ப்திணண ஬஫ங்கு஡ல் ற஬ண்டும். அது இவ்஬ாறு அண஥ம௃ம்


 <a href="#top">Go to top</a>
 இந்஡ இண஠ப்ணத அழுத்஡ி஦வுடன் வத஦ரிடப்தட்ட தகு஡ி஦ினிருந்து ஡ிண஧஦ில்
 காண்திக்கப்தடும்.




56                    Copyrights © 2002 – 2008 www.valaimanai.com, All rights reserved.   << Back :: Home :: Next >>
index.html என்ந இண஠஦ப் தக்கத்஡ில் <a name=topic2></a> எண Anchor ஑ன்று
வத஦ரிடப்தட்டுள்பது. இந்஡ இடத்஡ிற்கு ற஬வநாரு இண஠஦ப் தக்கத்஡ினிருந்து
இண஠ப்பு ஬஫ங்க ற஬ண்டுவ஥ணில்

<a href = “path/index.html#topic2” >go to topic2 </a>
எண ஢ி஧ல் அண஥ம௃ம்.

உ஡ா஧஠த்஡ிற்கு இவ்஬ாறும் இண஠ப்புக்கணப ஬஫ங்கமுடிம௃ம்.

<a href = “http://www.mypage.com/index.html#topic2” >My page topic2 </a>




57                       Copyrights © 2002 – 2008 www.valaimanai.com, All rights reserved.   << Back :: Home :: Next >>
஥ின் அஞ்சல் இண஠ப்பு E-Mail Links

஑ரு குநித்஡ இண஠஦ப் தக்கத்஡ினிருந்து ஥ின்ணஞ்சல் ஑ன்நிற்கு இண஠ப்ணத
஬஫ங்கு஬஡ா஦ின் ஢ி஧ணன இவ்஬ாறு அண஥க்க ற஬ண்டும்.


<a href="mailto:info@mysite.com">Mail Me</a>

இந்஡ இண஠ப்ணத அழுத்஡ி஦வுடன் ஥ின்ணஞ்சல் வசலுத்தும் வ஥ன்வதாருள்
(உ஡ா஧஠஥ாக Outlook Express) ஡ிநக்கப்தட்டு to தகு஡ி஦ில் ஢ீங்கள் இண஠ப்பு ஬஫ங்கி஦
஥ின்ணஞ்சல் முக஬ரி கா஠ப்தடும்.
இது த஡ில் அனுப்பு஬ண஡ இனகு஬ாக்கும்.




58                       Copyrights © 2002 – 2008 www.valaimanai.com, All rights reserved.   << Back :: Home :: Next >>
தடவ஥ான்ணந அழுத்தும்வதாழுது குநித்஡ இண஠ப்வதான்ணந வச஦ற்தடுத்஡
ற஬ண்டுவ஥ணில் ஢ி஧ணன இவ்஬ாறு எழுதுங்கள்.
(<img> tag தகு஡ிண஦ ஑ரு஡டண஬ ஞாதகப்தடுத்஡ிப் தாருங்கள்.)


<a href="http://www.w3.org"><img src="valid-html401.gif" width="88" height="31" border="0"
/></a>
                                                                          தடத்஡ின் ற஥ல் சுட்டிண஦ (mouse)
                                                                          ஢கர்த்஡ிணால் சுட்டி ணக றதான்று
                                                                          ஥ாறும்.
                                                                           அ஡ன்ற஥ல் அழுத்து஬஡ன் மூனம்
                                                                          ஢ீங்கள் இண஠ப்பு ஬஫ங்கி஦ www.w3.org
                                                                          இண஠஦த்஡பம் ஡ிநக்கப்தடும்.




59                       Copyrights © 2002 – 2008 www.valaimanai.com, All rights reserved.     << Back :: Home :: Next >>
Tables <table>

 இண஠஦த்஡ப ஬டி஬ண஥ப்தில் table கள் முக்கி஦ தங்கு ஬கிக்கின்நண. தக்கங்கணபப்
 தகு஡ி தகு஡ி஦ாகப் திரிக்கவும், ஬ிணட஦ங்கணப ற஢ர்த்஡ி஦ாக அண஥க்கவும் இண஬
 த஦ன்தடுகின்நண.

 ஑ரு சா஡ா஧஠ table இன் கட்டண஥ப்பு இவ்஬ாநிருக்கும்


 <table width="100%" border="1" >
 <tr>
             <td> </td>
             <td> </td>
 </tr>
 <tr>
             <td> </td>
             <td> </td>
 </tr>
 </table>




60                        Copyrights © 2002 – 2008 www.valaimanai.com, All rights reserved.   << Back :: Home :: Next >>
இங்கு <tr> என்தது row ஆ஧ம்திப்தண஡ம௃ம் <td> என்தது cell இணணம௃ம் குநிக்கிநது.
<td> </td> tag குகபிற்கு இணட஦ில் ஢ாம் ஬஫ங்கும் ஬ிணட஦ங்கள் குநித்஡ cell இனுள்
கா஠ப்தடும்.


<table width="100%" border="1" >
<tr>
            <td>cell1</td>
            <td>cell2</td>
</tr>
<tr>
            <td>cell3</td>
            <td>cell4</td>
</tr>
</table>




61                       Copyrights © 2002 – 2008 www.valaimanai.com, All rights reserved.   << Back :: Home :: Next >>
colspan, rowspan என்ந தண்புகள் cell கணப இண஠க்கப் த஦ன்தடும்.
இந்஡ உ஡ா஧஠த்ண஡ அ஬஡ாணிம௃ங்கள்.

<table width="400" border="1" cellspacing="0" cellpadding="0">
  <tr>
            <td colspan="2">&nbsp;</td>
     </tr>
      <tr>
             <td rowspan="3">&nbsp;</td>
             <td>&nbsp;</td>
     </tr>
      <tr>
             <td>&nbsp;</td>
     </tr>
     <tr>
             <td>&nbsp;</td>
  </tr>
</table>




62                        Copyrights © 2002 – 2008 www.valaimanai.com, All rights reserved.   << Back :: Home :: Next >>
cellspacing என்ந தண்பு மூனம் cell களுக்கு இணட஦ினாண இணடவ஬பி஦ிணணத் ஡ீர்஥ாணிக்கனாம்.
cellpadding மூனம் cell இனுள் ஬ிணட஦ங்கள் அண஥஦ற஬ண்டி஦ இணடவ஬பி஦ிணண ஥ாற்நனாம்.
அத்துடன் width, height, bgcolor, background, border, bordercolor, align, valign மு஡னி஦ தண்புகளும்
த஦ன்தடுத்஡ப்தடும்.
இந்஡ உ஡ா஧஠த்ண஡ வச஦ற்தடுத்஡ிப் தாருங்கள்.

<table width="400" border="1" cellpadding="0" cellspacing="4" bgcolor="#FFFFFF" bordercolor="#000000">
  <tr>
    <td colspan="2" bgcolor="#CCCCCC" align="center"><strong>Sample Text</strong></td>
  </tr>
   <tr>
    <td rowspan="3" bgcolor="#0099FF" align="left" valign="top">
              Sample Text<br />
              Sample Text<br />
   </td>
    <td align="right">Sample Text</td>
  </tr>
   <tr>
    <td align="right">Sample Text</td>
  </tr>
  <tr>
    <td align="right">Sample Text</td>
  </tr>
</table>

63                           Copyrights © 2002 – 2008 www.valaimanai.com, All rights reserved.   << Back :: Home :: Next >>
64   Copyrights © 2002 – 2008 www.valaimanai.com, All rights reserved.   << Back :: Home :: Next >>
Frames

 Frame கபின் உ஡஬ிம௃டன் ஑ரு தி஧஡ாண இண஠஦ப் தக்கத்஡ினுள் வ஬வ்ற஬று இண஠஦ப்
 தக்கங்கணபத் வ஡ரி஦ச் வசய்஦ முடிம௃ம்.
 அ஡ா஬து எம்஥ிடம் mypage2.html, mypage3.html எண ஏற்கணற஬ இ஧ண்டு
 ஬டி஬ண஥க்கப்தட்ட இ஧ண்டு இண஠஦ப்தக்கங்கள் உள்பண. அ஬ற்ணந எவ்஬ாறு
 ற஬வநாரு தி஧஡ாண இண஠஦ப் தக்கத்஡ினுள் ற஡ான்நச் வசய்஬து என்று தார்ப்றதாம்.

 தின்஬ரும் ஢ி஧ணனப் தா஬ித்து ஑ரு இண஠஦ப்தக்கத்ண஡ உரு஬ாக்குங்கள்.

 <html>
 <head>
 <title>Main Page</title>
 </head>

 <frameset rows="*" cols="251,*" framespacing="0" frameborder="no" border="1">

   <frame src="mypage2.html" name="leftFrame" scrolling=“no" noresize="noresize" id="leftFrame" title="leftFrame"
 />
   <frame src="mypage3.html" name="mainFrame" id="mainFrame" title="mainFrame" />

 </frameset>

 <noframes><body>
 </body>
 </noframes></html>



65                             Copyrights © 2002 – 2008 www.valaimanai.com, All rights reserved.   << Back :: Home :: Next >>
66   Copyrights © 2002 – 2008 www.valaimanai.com, All rights reserved.   << Back :: Home :: Next >>
இவ்஬ாறந தல்ற஬று தக்கங்கணப ஑ரு தி஧஡ாண தாக்கத்஡ினுள் காட்ட முடிம௃ம்.
ற஬வநாரு இண஠஦த் ஡பத்஡ிணணம௃ம் உங்கள் தக்கத்஡ினுள் வகாண்டு஬஧ முடிம௃ம்.
இந்஡ உ஡ா஧஠த்ண஡ப் தரீட்சித்துப் தாருங்கள்.

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>mainpage</title>
</head>

<frameset rows="*" cols="*,215" framespacing="0" frameborder="no" border="0">
  <frameset rows="105,*" cols="*" framespacing="0" frameborder="no" border="0">
    <frame src="mypage.html" name="topFrame" scrolling="No" noresize="noresize" id="topFrame" title="topFrame" />
    <frame src="http://www.opensourceshare.com/" name="mainFrame" id="mainFrame" title="mainFrame" />
  </frameset>
  <frame src="mypage2.html" name="rightFrame" scrolling="yes" noresize="noresize" id="rightFrame"
title="rightFrame" />
</frameset>
<noframes><body>
</body>
</noframes>
</html>



67                            Copyrights © 2002 – 2008 www.valaimanai.com, All rights reserved.   << Back :: Home :: Next >>
68   Copyrights © 2002 – 2008 www.valaimanai.com, All rights reserved.   << Back :: Home :: Next >>
Meta Tags

 <head> </head> tag குகபிற்கு இணட஦ில் த஦ன்தடுத்஡ப் தடும் Meta எணப்தடும் இந்஡
 ஬ிபக்கக் குநிப்புக்கள் தல்ற஬று ற஡ண஬களுக்காகப் த஦ன்தடுகின்நண. அ஬ற்நில்
 முக்கி஦஥ாண஬ ஬ரு஥ாறு,

 <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
 இது ஢ீங்கள் த஦ன்தடுத்தும் எழுத்துக்கபின் ஡ன்ண஥க்றகற்த ஥ாறுதடும், உ஡ா஧஠஥ாக
 ஡஥ிழ் Unicode எழுத்துக்கணபப் த஦ன்தடுத்஡ ற஬ண்டுவ஥ணில் charset=utf-8 எணப்
 த஦ணடதடுத்஡ ற஬ண்டும்.


 <META content=“web designing, learning, Tamil" name=keywords>
 இது உங்கள் தக்கத்஡ில் உள்ப Keyword கணப குநிப்திட உ஡வும். Search Engine களுக்கு
 அ஬சி஦஥ாணது.


 <META content=“This is Tamil learning system for web developing." name=description>
 இது உங்கள் தக்கம்தற்நி஦ ஬ிபக்கங்கணப குநிப்திட உ஡வும். Search Engine களுக்கு
 அ஬சி஦஥ாணது.


 <META name="Author" content=" My Company " >
 <META name="Creator" content=" My Company " >
 <META name="Copyright" content="Copyright ©2002 – 2008 My Company, All rights reserved." >
 <META name="Publisher" content=" My Company " >
 <META name="Owner" content=“My Name" >
69                        Copyrights © 2002 – 2008 www.valaimanai.com, All rights reserved.   << Back :: Home :: Next >>
     Style Sheets - CSS




70     Copyrights © 2002 – 2008 www.valaimanai.com, All rights reserved.   << Back :: Home :: Next >>
Style Sheets - CSS

 இண஠஦ப் தக்கங்கணப ஬டி஬ண஥க்கும் வதாழுது அ஬ற்நின் கட்டண஥ப்தில்
 ஑ருங்கிண஠ந்஡ ஡ன்ண஥ண஦ப் றதணு஬஡ற்கும். ஬டி஬ண஥ப்பு ஥ாற்நங்கணப
 இனகு஬ாக்கு஬஡ற்காகவும் Style Sheet கள் த஦ன்தடுகின்நண.
 உ஡ா஧஠஥ாக ஢ாம் HTML இல் <h1> என்ந tag ஐப் த஦ன்தடுத்தும் வதாழுது அ஡னுள்
 அண஥ம௃ம் எழுத்துக்கள் எந்஡ எழுத்துருண஬ப் த஦ன்தடுத்஡ ற஬ண்டும், அ஬ற்நின் அபவு
 என்ண, அ஬ற்நின் ஢ிநம் என்ண றதான்ந ஬ிட஦ங்கணப ஢ாம் Style Sheet இல்
 ஬ண஧஦றுத்஡ிருந்஡ால் அந்஡ Style Sheet இண஠க்கப்தட்டுள்ப அணணத்துப் தக்கங்கபிலும்
 <h1> tag த஦ன்தடுத்஡ி஦ அணணத்துத் ஡ணனப்புக்களும் ஑ற஧஥ா஡ிரிக் காட்சி஦பிக்கும்.
 அத்துடன் இன்று ஢ாம் ஡ணனப்புக்கபின் ஢ிநத்ண஡ ஥ாற்ந ஬ிரும்திணால் இனகு஬ாக
 Style Sheet இல் ஥ாற்நிக் வகாள்பனாம்.

 இண஬ வதாது஬ாக இ஧ண்டு ஬ணககபில் த஦ன்தடத்஡ப் தடுகின்நண.
 1. குநித்஡ தக்கத்஡ினுள்றபற஦ த஦ன்தடுத்து஬து.
     இ ில் <head> </head> tag குகளிற்கு இடடயில் <style> tag ஐப் பயன்படுத் ி வடையறுப்பது ஒருவடக.
     பக்கத் ின் Body யினுள் <span>, <div> மு லிய விசேட tag குகடளப் பயன்படுத் ி வடையறுப்பது இன்தெரு வடக.
 2. ஡ணி஦ாண றகாப்தாக உரு஬ாக்கி஬ிட்டு அந்஡க் றகாப்ணத ஬ிரும்தி஦ தக்கங்களுடன்
 இண஠ப்தது. இந்஡க் றகாப்புக்களுக்காண extension ஆணது .css ஆகும்

 சந்஡ர்ப்தத்஡ிற்கு ஏற்ந஬ாறு ஬ிரும்தி஦ முணநண஦ப் த஦ன்தடுத்஡னாம்.




71                             Copyrights © 2002 – 2008 www.valaimanai.com, All rights reserved.   << Back :: Home :: Next >>
உ஡ா஧஠த்஡ிற்கு

<html>
<head>
<title>Embedded Style Sheet Example</title>
<style     type=”text/css” >
<!--
H1 {font-size:20pt;color:red}
H2 {font-size:15pt;color:green}
H3 {font: 12pt "arial"}
p {font-size: 10pt; color: "#10e0ff"}
body { background-color: white }
-->
</style>
</head>
<body>
<h1> Embedded Style Sheet Example</h1>
<p>This is a paragraph - note that the size and colour is specified in the heading.</p>
</body>
</html>




72                             Copyrights © 2002 – 2008 www.valaimanai.com, All rights reserved.   << Back :: Home :: Next >>
஡ணிப்தட்ட file ஆகப் றதணு஬வ஡ணில்,


H1 {font-size:20pt;color:red}
H2 {font-size:15pt;color:green}
H3 {font: 12pt "arial"}
p
            {
            font-size: 10pt; color: "#10e0ff“
}
body { background-color: white }

இந்஡ ஢ி஧ணன notepad இல் எழு஡ி .css ஆகச் றச஥ிக்க ற஬ண்டும். தின்ணர் அந்஡ file
இற்கு இண஠ப்பு ஬஫ங்க ற஬ண்டும்.




73                      Copyrights © 2002 – 2008 www.valaimanai.com, All rights reserved.   << Back :: Home :: Next >>
74   Copyrights © 2002 – 2008 www.valaimanai.com, All rights reserved.   << Back :: Home :: Next >>
75   Copyrights © 2002 – 2008 www.valaimanai.com, All rights reserved.   << Back :: Home :: Next >>

				
DOCUMENT INFO
Shared By:
Categories:
Stats:
views:485
posted:2/13/2011
language:English
pages:75
Description: Webdevelopment. learn HTML in Tamil.