+- Yarl Forum (https://www.yarl.com/forum2)
+-- Forum: அறிவியற் களம் (https://www.yarl.com/forum2/forumdisplay.php?fid=5)
+--- Forum: இணையம் (https://www.yarl.com/forum2/forumdisplay.php?fid=27)
+--- Thread: HTML கற்போம் (/showthread.php?tid=4771)
- kavithan - 03-22-2005
shobana Wrote:இதை உதாரணத்தின் உதவியுடனேயே விளக்கிவிடுகிறேன் புரிந்துகொள்ளாவிடின் என்னை மன்னித்துக்கொள்ளுங்கள் உதாரணமாக: ஒட்சிஐனை இரசாயனக்குறியீடாக எழுத விரும்பின் இப்படி எழுதலாம் CO<SUB>2</SUB>
இது காபனீரொக்சைட் அக்கா <!--emo&
--><img src='http://www.yarl.com/forum/style_emoticons/default/smile.gif' border='0' valign='absmiddle' alt='smile.gif'><!--endemo-->
- thamilvanan - 03-22-2005
சோபனா அக்கா உங்கள் உதவிக்கு நன்றி. இப்பகுதியை தனியான தொடர் ஒன்றில் குறிப்பிட இருந்தேன். எனவே உங்களுக்கு நேரம் இருந்தால் பின்வரும் குறித்த மூலகங்களின் விளக்கத்தை <b>ஒரு தொகுப்பாக</b> தயாரித்து தரவேற்ற முடிந்தால் மிகவும் நல்லது.
<b>
<i>
<big>
<small>
<sub>
<sup>
<tt>
<u>
<em>
<strong>
<strike>
மேலதிகமானது
<abbr>
<acronym>
<cite>
<code>
<dfn>
<kbd>
<samp>
<var>
என்றுடன் அன்புடன்
தமிழ்வாணன்.
- shobana - 03-22-2005
ஆமாம் கவிதன் நன்றி பிழையை சுட்டிக்காட்டியதற்கு
தமிழ்வாணன் அண்ணா இன்று நேரம் கிடைக்கும் என நினைக்கிறேன் விளக்கம் கூறமுயற்சிக்கிறேன்...
நன்றி
- shobana - 03-22-2005
கவிதன் அண்ணா பிழையை திருத்திவிட்டேன் <!--emo&
--><img src='http://www.yarl.com/forum/style_emoticons/default/smile.gif' border='0' valign='absmiddle' alt='smile.gif'><!--endemo--> நன்றி நான் நேற்று கூறியது போன்று விளக்கங்கள் கூறினால் விளங்கிக்கொள்ளுகிறீர்களா?? என எனக்குத்தெரியவில்லை ... விளங்கவில்லை எனின் கூறிவிடுங்கள் விளக்கமாக கூற அது உதவியாக இருக்கும்
நன்றி :roll:
தொடர் - 6 - thamilvanan - 03-22-2005
இன்றும் இணையப்பக்கத்தில் கட்டுரை ஒன்றை வடிவமைக்கும்போது செய்யப்படக்கூடிய மேலதிக விடயங்களை பார்ப்போம்.
<b>1. பந்தியில் indent விடுதல்</b>
பந்திகளில் முதலாவது வாக்கியத்தை வலதுபுறமாக குறிப்பிட்ட தூரத்திற்கு நகர்த்துவதே indent ஆகும். இதனை செய்வதற்கு style எனும் பண்பை (attribute) பயன்படுத்தலாம்.
<p style="text-indent: 25 px">
என எழுதுவதன் மூலம் அப்பந்தியின் முதலாவது வாக்கியத்தை 25 பிக்ஸல் (pixel) தூரத்திற்கு நகர்த்தலாம்.
style பண்பை பயன்படுத்துவதன் மூலம் பல அழகுபடுத்தல்களை இணையப்பக்கத்தில் செய்யலாம். இது பற்றி பின்னர் தனியாகவும் விளக்கப்படும்.
<b>2. முதல் எழுத்து:</b> கட்டுரை ஒன்றின் முதல் எழுத்தை பெரிய எழுத்தாக எழுதப்படுவதை கண்டிருப்பீர்கள். அதற்கும் குறித்த மீயுரை பயன்படுத்தவேண்டும். தெரிந்தவர்கள் சொல்லுங்கள். அல்லது பின்னர் நான் சொல்கிறேன்.
<b>3. <pre> மூலகம்</b><body> பகுதிக்குள் கீழே குறிப்பிட்ட மீயுரையை இட்டு பரிசோதித்து பாருங்கள்.
<pre>
1234
789 +
---------
2023
---------
</pre>
இவ்வாறு நாங்கள் தட்டெழுதுவது போலவே இணையப்பக்கத்திலும் தோன்ற செய்வதற்கு இம்மூலகம் பயன்படுகிறது.
<b>
4. ஒரு பந்தியின் நான்கு பக்கங்களிலும்</b> எவ்வளவு இடைவெளி விடப்படவேண்டும் என்பதும் அழகுபடுத்தலில் முக்கியமாகும். அதற்கு பின்வரும் மீயுரையை பயன்படுத்தவும்.
<p style="margin-bottom: 50 px; margin-top: 50 px; margin-right:50 px; margin-left: 50 px;">
இங்கு குறிப்பிட்ட அளவுகளை உதாரணமாக 50 இலிருந்து 100 ஆக தனித்தனியே மாற்றி விளைவுகளை அவதானியுங்கள்.
<b>
5.
மூலகம்</b>
பந்திகளுக்கு இடையே கிடைக்கோடுகளை ஏற்படுத்த பயன்படுத்தலாம். இதனை பயன்படுத்தும்போதும் முடிவு மூலகம் தேவையில்லை.
<hr width="75%" color="green" >
இங்கு கிடைக்கோட்டின் அகலமானது 75% வீதம் என குறிக்கப்படுவதன் மூலம் எந்த அகலமுள்ள கணனித்திரையிலும் 75% அகலத்துக்கு கிடைக்கோடு வரையப்படும்.
<b>6. <div> மூலகம்</b>
முன்னர் கட்டுரை ஒன்றையோ பந்தி ஒன்றையோ வடிவமைக்கும் போது ஒவ்வொரு பந்திக்கும் தனித்தனியே அழகுபடுத்தலை செய்திருந்தோம். தற்போது குறிப்பிட்ட ஒரு பக்கத்தின் பகுதி ஒன்றை எவ்வாறு அழகுபடுத்துவது என்று பார்ப்போம். அதற்கு <div> எனும் மூலகம் பயன்படுத்தப்படுகிறது.
இவ் மூலகத்தில் மூலகத்தில் பயன்படுத்திய அனைத்து பண்புமாற்றங்களையும் செய்துபாருங்கள்.
மீண்டும் அடுத்ததொடரில் சந்திப்போம். உங்கள் கருத்துக்களை உடனுக்குடன் அறியதாருங்கள்.
என்றும் அன்புடன்
தமிழ்வாணன்
- kavithan - 03-23-2005
நன்றி இதுவும் பரீட்சித்து பார்த்தாச்சு
- thamilvanan - 03-26-2005
எதிர்பாராதவிதமாக ஏற்பட்ட தாமதத்திற்கு வருந்துகிறேன். இன்றைய தொடரில் சட்டங்களை கொண்டு இணையப்பக்கம் வடிவமைத்தல் (Layout with Tables) பற்றி குறிப்பிடுகிறேன். நாங்கள் விரும்பிய இடங்களில் படங்களையோ எழுத்துக்களையோ தோன்றச்செய்வதற்கு இச்சட்டங்கள்(Tables) முக்கியமானதாகும். அத்துடன் கற்றுக்கொள்வதற்கு மிகவும் இலகுவானதாகும். இலகுவானதொரு சட்டத்தை பார்ப்போம்.
<html>
<head>
<title>தமிழ்வாணனின் பக்கம்</title>
</head>
<body style="font-family: Arial Unicode Ms, Latha">
வணக்கம் இது HTML தொடர் - 07.
<table border="1">
<caption>தமிழ்நெடுங்கணக்கு</caption>
<tr>
<th>வகை</th>
<th>தொகை</th>
</tr>
<tr>
<td>உயிர்எழுத்துகள்</td>
<td>12</td>
</tr>
<tr>
<td>மெய்எழுத்துகள்</td>
<td>18</td>
</tr>
<tr>
<td>உயிர்மெய்எழுத்துகள்</td>
<td>216</td>
</tr>
<tr>
<td>ஆய்தஎழுத்து</td>
<td>01</td>
</tr>
</body>
</html>
<img src='http://www.geocities.com/thamilsangamam/webpotoes/page7.JPG' border='0' alt='user posted image'>
மேற்குறிப்பிட்ட மீயுரையை பரிசோதித்து பாருங்கள் .ஒரு சட்டம் (Table) ஆனது ஒன்று அல்லது ஒன்றுக்கு மேற்பட்ட நிரைகளையும் (Row) நிரல்களையும் (Column) களையும் கொண்டிருக்கும். நிரையை உருவாக்க <tr> மூலகமும் நிரலை உருவாக்க </td> மூலகமுமே பயன்படுகிறது. இங்கு பயன்படுத்தப்பட்டுள்ள <th> மூலகம் சட்டத்தின் தலைப்பை உருவாக்கவே பயன்படுத்தப்பட்டுள்ளது. சட்டத்தின் தடிப்பு (border) எனும் பண்பால் 1 என குறிப்பிடப்பட்டுள்ளது.அதனை தேவைக்கேற்ப 0 இலிருந்து பெறுமானங்களை தெரிவுசெய்யலாம்.
அடுத்து சட்டத்தில் முக்கியமான விடயமான colspan, rowspan எனும் இருவிடயங்கள் பற்றி பார்ப்போம்.
<html>
<head>
<title>தமிழ்வாணனின் பக்கம்</title>
</head>
<body style="font-family: Arial Unicode Ms, Latha">
வணக்கம் இது HTML தொடர் - 07.
<table border="1">
<caption>எனது தொடர்புக்கு </caption>
<tr>
<td rowspan=2>தொலைபேசி இல</td>
<td>0346782345</td>
</tr>
<tr>
<td>0994984321</td>
</tr>
</body>
</html>
இங்கு எனக்குறிப்பதன் மூலம் இரண்டு row கள் ஒரு column இல் ஒன்றாக்கப்பட்டுள்ளதை காணலாம்.
இதனை போலவே இரண்டு column கள் ஒரு row இல் ஒன்றாக்கப்பட்டுள்ளதை கீழுள்ள மீயுரையில் காணலாம் காணலாம்.
<html>
<head>
<title>தமிழ்வாணனின் பக்கம்</title>
</head>
<body style="font-family: Arial Unicode Ms, Latha">
வணக்கம் இது HTML தொடர் - 07.
<table border="1">
<caption>எனது தொடர்புக்கு </caption>
<tr>
<td colspan=3 align="center">தொலைபேசி இல</td>
</tr>
<tr>
<td>0346782345</td>
<td>035683456</td>
<td>0994984321</td>
</tr>
</body>
</html>
இவை தொடர்பான மேலதிக விடயங்களை அடுத்ததொடரில் பார்ப்போம். கருத்துக்கள் வரவேற்கப்படுகின்றன.
என்றும் அன்புடன்
தமிழ்வாணன்.
- shobana - 03-28-2005
மிக்க தாமதத்துடன் தான் மீண்டும் வருகிறேன் தாமதத்திற்கு அனைவரும் என்னை மன்னிக்கவேன்டும்... மிகவும் ஆவலுடன் காத்து இருப்பீர்க்ள் அல்லவா?? (ஆவலுடன் இருப்பீர்கள் என தான் நினைத்தேன் அப்படி ஆவலுடன் இருப்பீர்கள் எனின் உங்கள் கருத்துக்களை முன் வைத்து இருப்பீர்கள் என நினைக்கிறேன். அப்படி எதுவும் தெரியவில்லை <!--emo&
--><img src='http://www.yarl.com/forum/style_emoticons/default/sad.gif' border='0' valign='absmiddle' alt='sad.gif'><!--endemo--> வாழ்த்துக்கள் <!--emo&--><img src='http://www.yarl.com/forum/style_emoticons/default/smile.gif' border='0' valign='absmiddle' alt='smile.gif'><!--endemo-->
- shobana - 03-28-2005
இன்று இங்கு சில மூலகங்களின் தொழிற்பாடுகளும் அவை ஏன் எங்கு எப்படி உபயோகிப்பது என பார்ப்போம்
HTML சில தொழிற்பாடுகளுக்கு பல மூலகங்களை பயன்படுத்தலாம்.. உதாரணமாக நாம் எழுதும் சொற்கள் தடித்தவடிவததி;ல் எழுதவிரும்பின் அச்சொற்களுக்கு முன் <b> எழுதி அச்சொல்லின் இறுதியில் </b> எழுதுவதன் மூலம் நீங்கள் விரும்பும் சொற்களை தடித்த வடிவில் (Bold) எழுதலாம். இதனையே இப்படியும் எழுதலாம் .......
Ex: <b> Yarl.com </b> OR Yarl.com
நன்றி
<img src='http://www.geocities.com/keetham_fr/HTML/Bold.jpg' border='0' alt='user posted image'>
- hari - 03-30-2005
எனக்கு தெரியாமலே இங்கு இரண்டு தொடர் முடிந்துவிட்டது, ஏன் மோகன் அண்ணா எனக்கு மின்னஞ்சல் மூலம் அறிவிப்பு வரவில்லை?
- shobana - 03-31-2005
என்ன ஹரி அடிக்கடி இணையத்தல் நிக்கிறீர்கள் HTML பகுதியை பார்ப்பதுஇல்லையா?
Thanks - sunthar - 03-31-2005
தொடர்ந்து எழுதுங்கள் .... வாழ்த்துக்கள்
- hari - 03-31-2005
<!--QuoteBegin-shobana+-->QUOTE(shobana)<!--QuoteEBegin-->என்ன ஹரி அடிக்கடி இணையத்தல் நிக்கிறீர்கள் HTML பகுதியை பார்ப்பதுஇல்லையா?<!--QuoteEnd--><!--QuoteEEnd--> இணையத்தில் தான் முழு நேரமும் ஆனால் மின்னஞ்சல் மூலம் அறிவிப்பு வரும் போதுதான் அப்பகுதியை பார்ப்பது வழக்கம், தேடிச்சென்றுபார்ப்பதில்லை, என்ன கன நாட்களைச்சு அடுத்த தொடரை காணவில்லை என்று வந்துபார்த்தால் கனக்க விசயம் போய்யிட்டு!
- poonai_kuddy - 03-31-2005
ஷோபனா அக்கா ஒரு வசனத்த சிவப்பு நிறத்தால மார்க் பண்ண என்னெண்டு கோட் எழுதுறது ஒருக்கா சொல்லித் தாங்கோவன்
தொடர் - 8 - thamilvanan - 04-03-2005
இன்றைய தொடரில் ஒரு சட்டத்தில் எவ்வாறு colspan, rowspan பண்புகளை பயன்படுத்தி வடிவமைப்பது என்று பார்ப்போம்.கீழ்வரும் மீயுரையை பரிசோதித்து கொள்ளுங்கள்.
<html>
<head>
<title>தமிழ்வாணனின் பக்கம்</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
</head>
<body style="font-family: Arial Unicode Ms, Latha">
வணக்கம் இது HTML தொடர் - 08.
<table border="1" width="200" cellpadding="50" cellspacing="10">
<tr>
<td colspan="2">இங்கு இரண்டு cols ஒன்றாக்கப்பட்டுள்ளது.</td>
<td rowspan="2">இங்கு இரண்டு rows ஒன்றாக்கப்பட்டுள்ளது.</td>
</tr>
<tr>
<td>4</td>
<td>5</td>
</tr>
</table>
</body>
</html>
<img src='http://www.geocities.com/thamilsangamam/webpotoes/page8.JPG' border='0' alt='user posted image'>
இங்கு பயன்படுத்தப்பட்டுள்ள பண்புகளுக்கான மாற்றங்களை செய்து பாருங்கள்.
- hari - 04-03-2005
நன்றி தமிழ்வாணன்!
இத்தொடர் நிறுத்தப்படுகிறது. - thamilvanan - 04-10-2005
இதுவரை நடந்த 08 சுற்றுகளிலும் எதிர்பார்த்தவாறு வாசகர்களின் தேவையை பூர்த்திசெய்யகூடியவாறு பதிவுகள் இருக்காததன் காரணமாக தற்காலிகமாக இத்தொடர் நிறுத்தப்படுகிறது.