HTML-ல் ஒருசில விவரங்களை நாம் பட்டியலிட விரும்பினால் 3 விதமான பட்டியல்களைப் பயன்படுத்தலாம். அவை பின்வருமாறு.

Ordered list – தொடர்ச்சியான எண்களால் தகவல்களைப் பட்டியலிடுவது. <ol> எனும் இணை tags இந்த வேலையை செய்யும்.

Unordered list – புள்ளிகளை வைத்து தகவல்களைப் பட்டியலிடுவது. <ul> எனும் இணை tags இதற்குப் பயன்படுகிறது.

Definition list – ஒரு சிறு தலைப்பும், அதன்கீழ் அந்த தலைப்புக்கான விளக்கமுமாக தகவல்களைப் பட்டியலிடுவது. <dl> எனும் இணை tags இந்த வேலையைச் செய்யும்.

அடுத்தபடியாக பட்டியலில் வெளியாகும் ஒவ்வொரு தகவலும் <li> எனும் இணை tags மூலம் கொடுக்கப்படுகிறது. (li for list index). அதாவது நித்யா, வித்யா, சத்யா எனும் மூன்று பெயர்களைப் பட்டியலிட விரும்பினால், ஒவ்வொரு பெயரின் முன்னும் பின்னும் <li></li> tags-ஐ இணைக்க வேண்டும். பின்னர் இந்தப் பெயர்களை தொடர்ச்சியான எண்களால் பட்டியலிட வேண்டுமா அல்லது புள்ளிகளை வைத்து பட்டியலிட வேண்டுமா எனக் குறிப்பிடும் வகையில் அந்த மூன்று பெயர்களையும் கொடுப்பதற்கு முன்னர் <ol> அல்லது <ul> எனும் tags-ஐயும், மூன்று பெயர்களையும் கொடுத்து முடித்த பின்னர் கடைசியாக அதற்கான இணை tags-ஐயும் கொடுக்க வேண்டும்.

ஆனால் இந்த <li></li> tag-ஆனது definition list-க்குப் பொருந்தாது. இந்த முறையில் தலைப்பும், அதன் விளக்கமுமாக விவரங்கள் பட்டியலிடப்படுவதால், தலைப்பின் முன்னும் பின்னும் <dt></dt> tags-ம், (dt for definition title) தலைப்புக்கான விளக்கத்தின் முன்னும் பின்னும் <dd></dd> tag-ஐயும் (dd for definition data)பயன்படுத்த வேண்டும்.

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

File: list1.html

<html>

<head><title></title></head>

<body>

Types of Testing

<ol>

<li>Functional Testing</li>

<li>Non-functional testing</li>

</ol>

Types of non-functional testing

<ul>

<li>Performance testing</li>

<li>Automation testing</li>

</ul>

<dl>

<dt>Functional Testing</dt>

<dd>The functionality of an application will be tested.<dd>

<dt>Performance Testing</dt>

<dd>The performance of an application will be tested.<dd>

</dl>

</body>

<html>

Combined Lists

ஒரு் main list-ல் விவரங்களை பட்டியலிடும்போது, அதற்குள் sublist-ஐ உருவாக்குவதே combined listsஎனப்படும். பின்வரும் உதாரண்த்தில் ordered list-ன் கீழ் பட்டியலிடப்பட்டுள்ள Functional Testing எனும் விவரத்தின் கீழ் ஒருசில தகவல்கள் Unordered list முறையில் பட்டியலிடப்பட்டுள்ளதைக் காணலாம். அவ்வாறே Non-functional testing எனும் விவரத்தின் கீழும் தகவல்கள் unordered list முறையில் பட்டியலிடப்பட்டுள்ளன.

File: list2.html

<html>

<head><title></title></head>

<body>

Types of Testing

<ol>

<li>Functional Testing</li>

<ul><li>Integration testing</li><li>System testing</li></ul>

<li>Non-functional testing</li>

<ul><li>Automation testing</li><li>Regression testing</li></ul>

</ol>

</body>

<html>

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

License

Icon for the Creative Commons Attribution-ShareAlike 4.0 International License

எளிய தமிழில் HTML Copyright © 2015 by து. நித்யா is licensed under a Creative Commons Attribution-ShareAlike 4.0 International License, except where otherwise noted.

Share This Book