- HTML Text Formatting
- HTML Links
- HTML List
- HTML styles
- HTML Table
HTML Text Formatting
முதலில் எழுத்தை வடிவமைக்க கூடிய tag க்குகள் என்னென்னவென்று பார்க்கலாம், பிறகு அவைகளின் பயன்பாட்டை பார்ப்போம்.
Text Formatting Tags
| <b> | எழுத்தை போல்டு செய்வதற்கு பயன்படுகிறது |
| <big> | எழுத்தை பெரிதாக்க பயன்படுகிறது |
| <em> | Defines emphasized text |
| <i> | எழுத்தை சற்று சாய்வாக அமைக்க உதவும் |
| <small> | எழுத்தை சிறிதாக்க உதவும் |
| <strong> | எழுத்தை strong ஆக்க உதவும். |
| <sub> | கீழஎழுத்து(subscript) அமைப்பதற்கு பயன்படும் |
| <sup> | மேல்எழுத்து(superscript) அமைப்பதற்கு பயன்படுகிறது |
| <ins> | எழுத்தை சொருகுவதர்காக பயன்படுகிறது |
| <del> | எழுத்தை அழித்ததை போன்று எழுதுவதற்காக பயன்படுகிறது |
| <strike> | எழுத்தின் நடுவே கோடிட்டு காட்ட உதவும் |
| <u> | எழுத்தின் அடியில் கோடிட்டு காட்ட உதவும் |
மேல் சொன்ன குறியீடுகள் அனைத்தையும் இங்கே உதாரணத்தோடு பார்க்கலாம.
<html>
<body>
<p><b>This text is bold</b></p>
<p><strong>This text is strong</strong></p>
<p><big>This text is big</big></p>
<p><em>This text is emphasized</em></p>
<p><i>This text is italic</i></p>
<p><small>This text is small</small></p>
<p>This is<sub> subscript</sub> and <sup>superscript</sup></p>
</body>
</html>
வெளியீடு
-----------
This text is bold
This text is strong
This text is big
This text is emphasized
This text is italic
This text is small
This is subscript and superscript
This text is small
-----------------------------------------------------------
HTML லின்குகள்(Links)
<html>
<body>
<p>
<a href="lastpage.htm">லிங்க் </a> இன்னொரு இணையபக்கத்திற்கு கொடுக்கப்பட்டுள்ளது .</p>
<p>
<a href="lastpage.htm">
<img src="logo.gif" align="middle" width="48" height="48" /> </a>
</p>
மேலே படத்தை <img/>கை உபயோகித்து <a href> க்குள் இணைத்து லிங்காக மாற்ற வேண்டும்.
<p>
<p>
<a href="http://www.mansoorkmc.com/" target="_blank">Visit mansoor's website</a>
</p> //இங்கே target="_blank" என்பது, நாம் லிங்கை கிளிக் செய்யும்போது, தனியாக பக்கத்தை திறப்பதற்காக பயன்படுகிறது.
</p>
</body>
</html>
நீங்கள் பார்த்திருக்கலாம் ஒரே பக்கத்தில் பல பாராக்கள்(Paragraph) இருக்கும், அவைகளை ஒன்றோடொன்று லிங்க் செய்திருப்பார்கள், உதாரணமாக சொல்ல வேண்டுமானால், நீங்கள் பார்த்திருப்பீர்கள் ஏதேனும் பக்கத்தில் top என்ற பட்டன் கீழே இருக்கும் அதை கிளிக் செய்தவுடன் குறிப்பிட்ட இடத்துக்கு செல்லுமல்லவா அதை தான் இங்கு பார்க்க போகிறோம்.
Named anchor (<a name="label"></a>)கொண்டு குறிப்பிட்ட இடத்திற்கு பெயரை அமைக்க உதவும், பொதுவாக இணையபக்கத்தில் வெளிபடையாக இவை தெரியாது,
Named anchor syntax:
| <a name="label">Any content</a> //இங்கே name="label" என்பது தான் அந்த இடத்தின் பெயர், பின்னர் அவைகளை கீழே சொல்லியுள்ளது போல் லிங்கை அமைத்து தேவையான பாகத்திற்கு செல்ல முடியும். |
| <a href="#label">Any content</a>// கவனிக்க : மேலே சொன்ன name="label" லை இங்கே href="#label" என்ற attribute உபயோகித்து லிங்க் செய்ய வேண்டும், ஒரே பக்கத்திற்குள் குறிப்பிட்ட பாகத்தை லிங்க் கொடுக்கும்போது # எழுத்தை அழைக்க போகும் பெயருக்கு முன் கண்டிப்பாக போடா வேண்டும். |
Example:
ஒரு named anchor இணைய பக்கத்திற்குள் கீழுள்ளவாறு அமையவேண்டும்:| <a name="tips">Useful Tips Section</a> |
| <a href="#tips">Jump to the Useful Tips Section</a> ------------------------------------------------------------------ HTML Lists கீழ காணும் HTML வெளியீட்டை(Output) பார்த்தாலே தெரியும், இவை பட்டியலிட்டு காட்டுவதற்கு உதவும், இவைகளை இரண்டாக பிரிக்கலாம் ஒன்று ordered List மற்றும் unorderlist . unordered List என்பது பட்டியல்(List ), இவை பொதுவாக (starts with bullet and black circle ) கருப்பு நிற புள்ளியுடன் ஆரம்பிக்கும். இங்கு பட்டியலை ஆரம்பம் செய்யும்போது <ul > என ஆரம்பிக்க வேண்டும். <html> <body> <h4>An Unordered List:</h4> <ul> <li>Coffee</li> <li>Tea</li> <li>Milk</li> </ul> ordered list என்பதும் ஒரு பட்டியல்தான், ஆனால் இவை எண்களில் ஆரம்பமாகும். <h4>An Ordered List:</h4> <ol> <li>Coffee</li> <li>Tea</li> <li>Milk</li> </ol> </body> </html> வெளியீடு An Unordered List:
An Ordered List:
|
பாக்கி இரு தலைப்புகளும் கட்டுரையின் நீளத்தை மனதிற்கொண்டு அடுத்த கட்டுரையில் ஆரம்பிக்கலாமென இருக்கிறேன், அடுத்த கட்டுரையுடன் HTML முடிகிறது, இணையப்பக்கத்தை வடிவமைக்க முன் HTML கண்டிப்பாக தெரிந்திருக்க வேண்டுமல்லவா ஆகையால் தான், என்னால் முடிந்த வரை விளக்கியிருக்கிறேன்.
7 comments: on "தெரிஞ்சிக்கலாமா? - 8"
ஆஹா கலக்கல்
தெளிவான விளக்கம்
தொடருங்க, பகிர்வுக்கு நன்றி
நன்றி அபுஅஃப்ஸர்,
கொஞ்சம் நீளம்மாத்தான் ஆகிடுச்சு இந்தப் பதிவு; ஆனாலும் புரியுது.
நல்லா இருக்கு மன்சூர், எளிமையான விளக்கம்.
//கொஞ்சம் நீளம்மாத்தான் ஆகிடுச்சு இந்தப் பதிவு;//
ஆம, ஹுசைனம்மா, சில நேரத்தில் கவனிக்க தவறிவிட்டு, பிறகு சுருக்கி விடுவேன், அது போல் தான் இந்த கட்டுரையில் ஆகி போச்சு. கருத்திற்கு நன்றியம்ம.
வாங்க சகோதரர் ஷஃபி அவர்களே, உங்களின் நீண்ட நாளைக்கு பின் வருகையும்,கருத்தும் எனக்கு மகிழ்ச்சி அளிக்கிறது, நன்றி
அருமையாக எழுதிக்கொண்டு இருக்கின்றீர்கள், இனி நானும் ஒரு வெப்டிசைனர்தான் போங்கோ...
Post a Comment
வந்தாச்சு கருத்து சொல்லாம போனா எப்புடி?