2014 | பல்சுவை தகவல்கள் - Thagavalgal in Tamil 2014 ~ பல்சுவை தகவல்கள் - Thagavalgal in Tamil

பல்சுவை தகவல்கள் - Thagavalgal in Tamil- Interesting Information in Tamil Useful Information you should know - Computer Tips, Health Tips, online offers, and more helpful Tips and Tricks நீங்கள் தெரிந்து கொள்ள வேண்டிய பயனுள்ள தகவல்கள்

புதன், 31 டிசம்பர், 2014

HTML எழுதிப் பழக Real-Time HTML Editor

இணையதளம் வடிவமைக்க அடிப்படை மொழி HTML. பொதுவாக HTML நிரலை நோட்பேடில் எழுதி அதை இணைய உலவியின் மூலம் திறந்து அதனுடைய வெளிப்பாட்டை பார்ப்போம்.

அவ்வாறில்லாமல், ஆன்லைன் HTML Edtior -ஐப் பயன்படுத்தி உடனுக்குடன்
அந்த வரிகளுக்குரிய ouput-ஐ பார்க்கலாம். இதன் மூலம் எழுதும் HTML வரிகள் சரியானதுதானா உடனே அறிந்துகொள்ள முடிகிறது.

நமது தங்கம்பழனி வலைத்தளத்தில் இடம்பெற்றிருக்கும் HTML அடிப்படைப் பாடங்கள் படிப்பதன் மூலமும் எளிய தமிழில் HTML கற்றுக்கொள்ள முடியும்.

தற்காலத்தில் இணையத்தைப் பயன்படுத்தும் ஒவ்வொருவரும் website, blog, webblog, web page இப்படி ஏதேனும் தமக்கென ஒரு வலைப்பக்கத்தை உருவாக்கி வைத்திருக்கின்றனர். அவர்கள் தாங்கள் விரும்பும்படி அப்பக்கத்தை வடிவமைக்கவே விரும்புகின்றனர். அவ்வாறானவர்களுக்கும், புதிதாக HTML பயிலும் மாணவர்களுக்கும் இத்தளம் மிகவும் பயனுள்ளதாக இருக்கும்.

இந்த வசதியை கொடுக்கும் தளம் ஹெச்.டி.எம்.எல்.இன்ஸ்டன்ட்.காம் 
இத்தளத்திற்கு சென்றவுடன் படத்தில் உள்ளபடி இடது பக்கம் HTML மொழியை தட்டச்சு செய்தால் உடனடியாக வலது பக்கத்தில் அவற்றிக்கான வெளிப்பாடு (Output) தோன்றுகிறது.

online html instant editor


HTML -ல் ஏற்படக்கூடிய அனைத்து சந்தேகங்களுக்கும் தீர்வு தரப்படுகிறது. புதியதாக கற்பவர்களுக்கு நிச்சயம் இத்தளம் பயனுள்ளதாக இருக்கும். ஏனென்றால் ஒவ்வொரு HTML கட்டளைகளும் எவ்வாறு இயங்குகிறது.. எதற்குப் பயன்படுகிறது என்பதை உடனடியாக தெரிந்துகொள்ள முடிவதுதான்.

மாணவர்கள் முதல் அனைத்து தரப்பினருக்கும் இத்தளம் ஒரு வரப்பிரசாதம் என்றால் அது மிகையாது.

நன்றி நண்பர்களே..!

-ம.அருண்பிரசாத்- .



இந்த பதிவு உங்களுக்குப் பயனுள்ளதாக இருக்கிறதா? உங்கள் கருத்துகளை பதிவு செய்யுங்கள். நண்பர்களுக்கும் தளத்தை அறிமுகம் செய்து வையுங்கள்.ஏதேனும் சந்தேகம் எனில் மின்னஞ்சல் செய்யுங்கள்.நன்றி நண்பர்களே.. மற்றுமொரு புதிய பயனுள்ள பதிவின் வழி சந்திப்போம்.

FREE Online Basic HTML Tutorials in Tamil

  1.  HTML Tutorial 1-தமிழில் HTML கற்றுக்கொள்ள

  2. HTML Tutorial 2-HTML ஓர் அறிமுகம்

  3. HTML Tutorial 3-HTML என்பது என்ன?

  4. HTML Tutorial 4-குறிஒட்டுகள் (Tags)

  5. HTML Tutorial 5-HTML உறுப்புகள்(Elements)

  6. HTML Tutorial 6-HTML பண்புகள் (Attributes)

  7. HTML Tutorial 7-HTML கட்டமைப்பு (HTML Structure)

  8. HTML Tutorial 8-ஒரு HTML கோப்பு

  9. HTML Tutorial 9-HTML ஆவணத்தை வடிவூட்ட(formation)

  10. HTML Tutorial -10-பத்திக் குறி ஒட்டு( Paragraph Tag)

  11. HTML Tutorials 11-Paragraph Tag-ல் அலைன்மெண்ட்

  12. HTML Tutorials 12-CENTER tag

  13. HTML Tutorials 13-BR (Break) tag

  14. HTML Tutorials 14-Body tag-ல் சிறப்புப் பண்பு bgcolor

  15. HTML Tutorials 15-Body tag- ல் TEXT பண்பு..

  16. HTML Tutorials 16-HTML ஆவணத்தில் தமிழை வெளிப்படுத்த

  17. HTML Tutorials 17- Body tag- ல் BACKGROUND பண்பு..

  18. HTML Tutorials 18- LINK Attributions in BODY TAG

  19. HTML Tutorials 19-BIG TAG மற்றும் SMALL TAG

  20. HTML Tutorials 20-FONT குறிஒட்டும் அதில் பயன்படுத்தும் பண்புகளும்

  21. HTML Tutorials 21-DESCRIPTION TAG - விளக்கக் குறிஒட்டு

  22. HTML Tutorials 22-HTML ஆவணத்தில் படங்களைச் சேர்க்க

  23. HTML Tutorials 23-Image குறி ஒட்டில் align, border மற்றும்HIGHT AND WIDTH பண்புகள்

  24. HTML Tutorials 24- பட்டியல்கள் (Lists)

  25. HTML Tutorials 25-MARQUEE குறிஒட்டு(TAG)

  26. HTML Tutorials 26-அட்டவணைகள்(Tables)

HTML Tutorials 26-அட்டவணைகள்(Tables)


கடந்த எளிய தமிழில் HTML கற்றுக்கொள்ள தொடரில் HTML -லில் 
 
பட்டியல்கள் அமைப்பது எப்படி என்பதைப் பார்த்தோம்.
 
 இன்றையப் பதிவில் HTML-ல் அட்டவணைகள்(Tables) அமைப்பது எப்படி 
 
என்பதைப் பார்ப்போம். இதற்கு <TABLE></TABLE> என்ற குறிஒட்டுகள் 
 
பயன்படுகின்றன. எந்த ஒரு HTML ஆவணத்திலும் அட்டவணைகள் அமைக்க 
 
இந்த குறிஒட்டுகளைத்தான் பயன்படுத்த முடியும். இதற்கிடையேதான் 
 
தகவல்களை கொடுத்து அட்டவணைப்படுத்த முடியும். அட்டவணைக்கு 
 
தலைப்பு கொடுக்க வேண்டுமெனில் <CAPTION> என்னும் குறிஒட்டைப் 
 
பயனபடுத்த வேண்டும்.
 
அட்டவணையில் வரிசைகளை உருவாக்க <TR> மற்றும் </TR> குறி 
 
ஒட்டுகளைப் பயன்படுத்த வேண்டும். ஒரு சிற்றறையில் தலைப்பு 
 
இருந்தால் அதனை <TH>..</TH> என்ற குறி ஒட்டுகளுக்கு இடையே 
 
கொடுக்க வேண்டும். தகவல்களை <TD>..</TD> என்னும் குறி ஒட்டுகளுக்கு 
 
இடையே கொடுக்க வேண்டும்.


HTML-ல் அட்டவணை எழுதப்படும் குறிஒட்டுகளும், அதனுடைய 
 
வேலையை விளக்கி ஒரு அட்டவணைப்படுத்தப்பட்டுள்ளது.

Tag
Definition
<TABLE>
Start of table definition
<CAPTION>Caption Contents</CAPTION>
Caption definition
<TR>
Start of first row definition
<TH>cell contents</TH>
First cell in row 1(a head)
<TH>cell contents</TH>
Last  cell in row 1(a head)
<TR>cell contents</TR>
End of first row definition
</TR>
End of first row definition
<TR>
Start of second row definition
<TD>cell contents</TD>
First cell in row 2
<TD>cell contents</TD>
Last cell in row 2
</TR>
End of second row definition
<TR>
Start of last row definition
<TH>cell contents</TH>
First cell in row 1(a head)
<TH>cell contents</TH>
Last cell in row 1(a head)
</TR>
End of last row definition
</TABLE>
End of table definition

<TABLE> குறி ஒட்டுடன் வழக்கமாக WIDTH, CELLSPACING, CELLPADDING 
 
மற்றும் BORDER போன்ற பண்புகள் பயன்படுத்தப்படுகின்றன.


WIDTH பண்பு


WIDTH என்னும் பண்பு அட்டவணையின் அகலத்தைக் கொடுக்கப் 
 
பயன்படுகிறது. அட்டவணையின் அகலத்தைத் திரையின் ஒரு குறிப்பிட்ட 
 
விழுக்காடாகக் கொடுப்பது நல்லது. அப்போதுதான் உலவித் திரையின் 
 
அகலம் மாறுவதற்கேற்ப அட்டவணையின் அகலமும் தானாக மாறும்.  உம். 
 
Width="80%" எனக்கொடுக்கலாம். இவ்வாறு குறிப்பிட்ட சதவீத்தில் 
 
கொடுக்கும்போது திரையின் அகலத்திற்கு ஏற்றவாறு அட்டவணையும் 
 
அகலத்தை மாற்றிக்கொள்ளும்.


CELLSPACING பண்பு

 
 சிற்ற்றையின் ஓரத்திற்கும், உரைக்கும் இடையே உள்ள இடைவெளியைக் 
 
 குறிப்பிட CELLPADING என்னும் பண்பு பயன்படுகிறது. இதன் மதிப்பையும் 
 
புள்ளிகளில் (Pixels) கொடுக்க வேண்டும்.

BORDER பண்பு

அட்டவணை ஓரத்தின் தடிமனைக் குறிப்பட BORDER என்னும் பண்பு 
 
பயன்படுகிறது. இதன் மதிப்பையும் புள்ளிகளில் கொடுக்க வேண்டும். 
 
BORDER="0" என்று கொடுத்தால் அட்டவணையின் ஓரம் தனியாகத் 
 
தெரியாது.

அட்டவணையில் வரிசைகளை ஒவ்வொன்றாக உருவாக்க வேண்டும். 
 
ஒவ்வொரு வரிசையையம் தொடங்கி, அதில் உள்ள தகவல்களைக் 
 
கொடுத்துவிட்டு, அந்த வரிசையை மூட வேண்டும். <TR> மற்றும் </TR> 
 
குறி ஒட்டுகள், முறையே வரிசையைத் தொடங்கவும், மூடவும் 
 
பயன்படுகின்றன.  வரிசைகளுக்குள் <TD> மற்றும் </TD> குறிஒட்டுகளைப் 
 
பயன்படுத்தி சிற்ற்றைகளை உருவாக்கலாம். <TH> மற்றும் </TH> குறி 
 
ஒட்டுகளைப் பயன்படுத்தி உருவாக்கப்படும் தலைப்புகள் சிற்றறையின் 
 
மையத்தில் தடிமனாகக் காட்டப்படும்.


கீழ்க்கண்ட அட்டவணையை உருவாக்குவது எப்படி என்பதைக் காண்போம்.

Name
Tamil
English
Computer
Latha
85
76
92
Revathi
97
85
63
Bavya
99
98
100
Ravi
68
77
90


இதுபோல வலைப்பக்கத்தில் அட்டவணையை உருவாக்க கீழ்க்கண்டவாறு 
 
HTML நிரல்வரிகளை எழுத வேண்டும்.


<html>
<head>
<title>Creating a Table</title>
</head>
<body>
<!--Starting a table-->
<table width="100%" cellspacing="5" cellpadding="5" border="5">
<!--Row1-->
<tr>
<th>Name</th>
<th>Tamil</th>
<th>English</th>
<th>Computer Science</th>
</tr>
<!--Row2-->
<tr>
<td>Latha</td>
<td>85</td>
<td>76</td>
<td>92</td>
</tr>
<!--Row3-->
<tr>
<td>Revathi</td>
<td>97</td>
<td>85</td> 
<td>63</td> 
</tr>
<!--Row4-->
<tr>
<td> Bavya </td>
<td>99</td>
<td>98</td>
<td>100</td> 
</tr>
<!--Row5-->
<tr>

<td> Ravi</td>
 
<td>68</td>
<td>77</td>
<td>90</td>
</tr>
</table>
</body>
</html>

மேற்கண்ட நிரல்வரிகளை நோட்பேடில் எழுதி, அதை .html என்ற விரிவுடன் 
 
சேமித்து, உலவியில் சேமித்த கோப்பைத் திறந்து பாருங்கள். இப்போது 
 
நீங்கள் உருவாக்கிய அட்டவணையானது அட்டகாசமாக உலவியில் 
 
வெளிப்பட்டிருக்கும்.


எளிய தமிழில் HTML கற்றுக்கொள்ள தொடரின் அனைத்துப் பதிவுகளையும் 
 
காண இந்த இணைப்பைச் சொடுக்கிப் படிக்கவும்.

HTML Tutorials 25-MARQUEE குறிஒட்டு(TAG)

தொலைக்காட்சியிலும், விளம்பர மின்பலகைகளிலும் உரைகள் நகர்ந்து 

செல்வதை நீங்கள் பார்த்திருப்பீர்கள். அதே போல கணிப்பொறியின் 

திரையிலும் உரைகளை நகர வைக்கலாம். இதற்குத் தேவையான உரையை 

 <marquee> மற்றும் </marquee> என்ற இரு குறி ஒட்டுகளுக்கு இடையே 

கொடுக்க வேண்டும். எடுத்துக்காட்டாக, 

<marquee> Sample Text </marquee>

Sample Textஎன்பது "Sample Text" என்னும் உரையை திரையின் 
வலப்பக்கத்திலிருந்து இடப்பக்கத்திற்கு நகர்த்திக் கொண்டே இருக்கும்.


இந்தக் குறி ஒட்டுடன், நகரும் வரியின் பின்னணி வண்ணத்தையும், அது 
 
நகரும் திசையையும் குறிப்பிடலாம். இதற்கு BGCOLOR, DIRECTION என்னும் 
 
 
இரு பண்புகளைப் பயன்படுத்த வேண்டும். 

உதாரணமாக, 

<marquee bgcolor="Red" direction=""> Sample Text </marquee> 

Sample Textஎன்பது, ஒரு சிவப்புப் பட்டையில் "Sample Text" என்னும் உரையை 
 
இடமிருந்து வலமாக நகர்த்திக் கொண்டே இருக்கும். 


இந்த மார்க்யூ குறிஒட்டில் சிறப்புப் பண்புகளைப் பயன்படுத்த முடியும். இதில் 
 
வலமிருந்து இடம், இடமிருந்து வலம், மேலிருந்து கீழ், கீழிருந்து மேல், 
 
இப்படி நான்கு திசைகளிலும் உரையை நகர்த்தக்கூடிய பண்புகள் இருக்கிறது. 
 
இதைப்பற்றி விரிவாகக் காண நம் தங்கம்பழனி வலைதளத்தில் 
 
இடம்பெற்ற பிளாக்கரில் நகரும் எழுத்துக்களை உருவாக்க என்னும் பதிவில் 
 
காணவும்.



நன்றி நண்பர்களே.. அடுத்த தொடர் பதிவில் அனைவருக்கும் முக்கியமாகத் 
 
பட்டியல்கள் உருவாக்கப்படும் <TABLE> என்னும் குறிஒட்டைப் பற்றி 
 
காண்போம்

HTML Tutorials 24- பட்டியல்கள் (Lists)


List Tag in Html 
கடந்த சில தினங்களாக எளிய தமிழில் HTML கற்றுக்கொள்ள தொடர் பதிவு 
 
எழுத இயலவில்லை என்பதை வருத்தத்துடன் தெரிவித்துக்கொள்கிறேன். 
 
இடைவிடாது பணி இருந்ததால், என்னால் இந்தத் தொடரை முழுவதுமாக 
 
எழுதி முடிக்க முடியுமா? என்ற சந்தேகம் தோன்று மறைந்தபோதும், எடுத்த 
 
முடிவில் உறுதியாய் இருந்து தொடரை முடிப்பதில் மீண்டும் 
 
ஆர்வம்கொண்டு எழுதியுள்ளேன். கடந்த எளிய தமிழில் HTML 
 
 கற்றுக்கொள்ள தொடர்பதிவில் BGSOUND (backgroun sound) என்பதைப் 
 
பார்த்தோம்.


இந்த குறிஒட்டைப் பயன்படுத்தி உங்கள் வலைப்பக்கத்தில் பின்னணி 
 
இசையை ஒலிக்கச் செய்யலாம். பதிவைப் படிக்க நினைப்பவர்கள் இந்த 
 
இணைப்பைச் சொடுக்கவும்.


இன்றைய பதிவில் பட்டியல்களைப்((LISTS)) பற்றிப் பார்ப்பும்.


நாம் பல சமயங்களில், பல தகவல்களை ஒன்றன்பின் ஒன்றாக 
 
பட்டியலிட்டுக் காட்ட வேண்டியிருக்கும். நீங்கள் MS Word போன்ற 
 
சொற்செயலிகளால்(Word processor) எண்வரிசை மற்றும் புல்லட் குறி 
 
வரிசைகளை உருவாக்குவது பற்றி தெரிந்து வைத்திருப்பீர்கள்.


இதில் மூன்று வகையான பட்டியல்களை உருவாக்கலாம். அவையாவன:


 1. வரிசைப் பட்டியல் (Ordered list)
 
 2. வரிசைப்படுத்தாப் பட்டியல் (Unordered list)
 
 3. வரையறைப் பட்டியல் (Definition List)


வரிசைப் பட்டியல் (Ordered list) 


இந்தப் பட்டியல் MS Word சொற்செயலியில் உருவாக்கப்படும் எண்வரிசைப் 
 
பட்டியலைப் போன்றதாகும். இந்தப் பட்டியலில் 1,2,3.. போன்ற எண்கள், 
 
(I,II,II... i,ii,iii,... போன்ற ரோமன் எண்கள் அல்லது A,B,C... a,b,c... போன்ற 
 
ஆங்கில எழுத்துக்கள் இருக்கலாம். வரிசைப் பட்டியலை <OL> என்னும் குறி 
 
ஒட்டில் தொடங்கி, </OL> என்னும் குறிஒட்டில் முடிக்க வேண்டும். இந்தக் 
 
 குறிஒட்டுகளுக்கு இடையே கொடுக்கப்படும் ஒவ்வொரு தகவலும் <LI> 
 
என்னும் குறிஒட்டுடன் (TAG)என்னும் குறிஒட்டுடன் தொடங்க வேண்டும்.


உதாரணத்திற்கு ஒரு HTML ஆவசத்தில் வழக்கும்போல <BODY></BODY> 
 
குறிஒட்டுகளுக்கிடையே கீழிருப்பதைப் போல எழுதி அதன் வெளிப்பாட்டை 
 
உலவியில் திறந்து பாருங்கள்.


<OL>
<li>Tamil</li>
<li>English</li> 
<li>Science</li> 
<li>Maths</li> 
</OL>


இதனுடைய வெளிப்பாடு

  1. Tamil
  2. English
  3. Science
  4. Maths

இவ்வாறு இருக்கும். அதேபோல HTML ஆவணத்தில் நாம் விரும்பிய எண் 
 
வரிசையிடலாம். நாம் விரும்பிய வரிசையை <OL> குறிஒட்டில் TYPE 
 
என்னும் பண்பைப் பயன்படுத்தி கொடுக்கலாம். கீழிருக்கும் உதாரணத்தைப் 
 
பாருங்கள்.

HTML ஆவணத்தில் <OL> குறிஒட்டில் பயன்படுத்தும் பண்புகள்
TYPE=”1”
1,2,3,….
TYPE=”A”
A,B,C,..
TYPE=”I”
I,II,III,…
TYPE=”I”
i,ii,iii,….
START என்னும் பண்பின் மூலம் பட்டியல் எந்த எண்ணிலிருந்து தொடங்க 
 
வேண்டும் என்பதைக் குறிப்பிடலாம். உதாரணமாக, <OL TYPE="1" 
 
START="4"  என்னும் குறிமுறை, பட்டியலை 4,5,6.. என நான்கு(4) 
 
எனத்தொடங்கும் எண்ணிலிருந்து தொடங்கும்படி அமைக்கலாம். START 
 
என்னும் பண்பு இதுபோல எந்த எண்ணிலிருந்து தொடங்க வேண்டும் 
 
என்பதைக் குறிக்கப் பயன்படுகிறது.

வரிசைப்படுத்தா பட்டியல்கள் (Unordered Lists)

இந்தப் பட்டியல் MS Word சொற்செயலியில் உருவாக்கப்படும் புல்லட் குறி 
 
பட்டியலை போன்றதாகும். இந்தப் பட்டியலில் வட்டமான அல்லது 
 
சதுரமான புல்லட் குறிகளைப் பயன்படுத்தி பட்டியல்களை உருவாக்கலாம். 
 
இந்த பட்டியலை <UL> என்னும் குறி ஒட்டுடன் தொடங்கி, </UL> என்னும் 
 
குறி ஒட்டுடன் முடிக்க வேண்டும். இந்தக் குறி ஒட்டுகளுக்கு இடையே 
 
கொடுக்கப்படும் ஒவ்வொரு தகவலும் கீழ்க்கண்ட உதாரணத்தில் 
 
உள்ளவாறு 
 
<LI> என்னும் குறி ஒட்டுடன் தொடங்க வேண்டும்.

HTML Code
Browser Display
<UL>
<li>Red
<li>Green
<li>Blue
</UL>
·         Red
·         Green
·         Blue


 
<UL> குறி ஒட்டுடன் பயன்படுத்தப்படும் TYPE பண்பு புல்லட் குறிகளின் 
 
ஸ்டைல்களைக் கொடுக்கப் பயன்படுகிறது. TYPE="Disc" என்பது நிரப்பிய 
 
வட்டத்தையும்,TYPE="Square"என்பது நிரப்பிய சதுரத்தையும், 
 
TYPE="Circle" என்பது வட்டக் கோட்டையும் புல்லட் குறிகளாகக் கொடுக்கப் 
 
பயன்படுகிறது.

வரையறைப் பட்டியல்கள் (Definition Lists)

இந்தப் பட்டியல், ஒவ்வொரு தகவலையும் அது என்ன என்று வரையறுத்துக் 
 
கூற உதவுகிறது. இதில் தகவல்கள் <DL> மற்றும் </DL> என்னும் குறி 
 
ஒட்டுகளுக்கு இடையே வர வேண்டும். ஒவ்வொரு தகவலும் <DT> என்ற 
 
குறி ஒட்டை அடுத்தும், ஒவ்வொரு வரையறையும் <DD> என்ற குறி 
 
ஒட்டை அடுத்தும் வர வேண்டும்.

 
<DT> மற்றும் <DD> குறி ஒட்டுகளுக்கு, முடிவுக் குறி ஒட்டுகள் இல்லை.

DL, DD, DT என்பதன் விரிவாக்கங்கள் முறையே Definition List, Definition 
 
Data, Definition term என்பதின் முதல் எழுத்துக்களைக்கொண்ட சுருக்கம் 
 
ஆகும்.

 
இந்த வரையறைப் பட்டியல்கள் (Definition Lists) பயன்படுத்தி ஒரு HTML 
 
Document எழுதுவோம் வாருங்கள்.

<HTML>
<HEAD>
<TITLE>Definition Lists</TITLE>
</HEAD>
<BODY>
<DL>
<DT>Tea
<DD>A type of hot drink
<DT>Coffee
<DD>Another type of the hot drink
</DL>
</BODY>
</HTML>

இதனுடைய வெளிப்பாடு உலவியில் இவ்வாறு இருக்கும்.

Definition list in html

 
பதிவு பயனுள்ளதாக இருந்தால் சமூக தளங்களில் பகிர்ந்து உங்கள் 
 
நண்பர்களுக்குத் தெரியப்படுத்துங்கள்.

Popular Posts

Facebook

Blog Archive