HTML के पहले कदम – पाठ 3 – सूची टैग्स ul, ol. HTML टैग्स के गुण (Attributes)।
वेबसाइटों पर बहुत बार सूचियाँ (lists) उपयोग की जाती हैं: मेन्यू में, या किसी सूचीबद्ध जानकारी के लिए टेक्स्ट में। चलिए सबसे लोकप्रिय सूची प्रकार से शुरू करते हैं — असंख्या सूची <UL></UL> (unordered list — असंख्या सूची)।
UL सूची
UL सूची का उपयोग मेन्यू के लिए या बुलेट-पॉइंट वाली सूचियों के लिए किया जाता है, और HTML के माध्यम से आप बुलेट का प्रकार भी निर्धारित कर सकते हैं।
चलिए अपने HTML कोड में बदलाव करते हैं:
<html>
<head>
<title>मेरा पहला HTML-दस्तावेज़</title>
</head>
<body>
<h1>मेरा पहला HTML-दस्तावेज़</h1>
<ul>
</ul>
</body>
</html>दस्तावेज़ में केवल शीर्षक दिखाई देगा, क्योंकि हमारी सूची अभी खाली है। अब इसमें आइटम जोड़ते हैं। सूची के आइटम <LI></LI> (list item — सूची तत्व) टैग से बनाए जाते हैं।
<html>
<head>
<title>मेरा पहला HTML-दस्तावेज़</title>
</head>
<body>
<h1>मेरा पहला HTML-दस्तावेज़</h1>
<ul>
<li>पहला बिंदु</li>
<li>दूसरा बिंदु</li>
<li>तीसरा बिंदु</li>
</ul>
</body>
</html>अब हमारे पास एक बुलेट-पॉइंट सूची प्रदर्शित होगी। बुलेट का प्रकार टैग <UL> के एट्रिब्यूट्स के माध्यम से बदला जा सकता है।
HTML टैग के एट्रिब्यूट्स
UL टैग के, जैसा कि ऊपर बताया गया है, कुछ एट्रिब्यूट्स होते हैं। वास्तव में सभी HTML टैग्स के एट्रिब्यूट्स होते हैं। आगे हम सभी एट्रिब्यूट्स को विस्तार से समझेंगे, लेकिन फिलहाल यह जान लेते हैं कि “एट्रिब्यूट” क्या होता है। एट्रिब्यूट किसी टैग के प्रदर्शन (रंग, आकार, आकृति आदि) को नियंत्रित करने की अनुमति देता है। उदाहरण के लिए, UL टैग में हम बुलेट का प्रकार निर्धारित कर सकते हैं: गोला, वृत्त, या वर्ग।
एट्रिब्यूट्स का स्वरूप इस प्रकार होता है:
<टैग एट्रिब्यूट="एट्रिब्यूट का मान">इस प्रकार हम टैग के भीतर ही उसका प्रदर्शन निर्धारित कर सकते हैं। UL टैग के लिए एट्रिब्यूट का नाम होगा type:
<html>
<head>
<title>मेरा पहला HTML-दस्तावेज़</title>
</head>
<body>
<h1>मेरा पहला HTML-दस्तावेज़</h1>
<ul type="square">
<li>पहला बिंदु</li>
<li>दूसरा बिंदु</li>
<li>तीसरा बिंदु</li>
</ul>
</body>
</html>यदि आप पृष्ठ को ब्राउज़र में रीफ्रेश करेंगे, तो सूची वर्गाकार बुलेट्स (square - वर्ग) के साथ दिखाई देगी। हम वृत्ताकार बुलेट्स भी उपयोग कर सकते हैं:
<html>
<head>
<title>मेरा पहला HTML-दस्तावेज़</title>
</head>
<body>
<h1>मेरा पहला HTML-दस्तावेज़</h1>
<ul type="circle">
<li>पहला बिंदु</li>
<li>दूसरा बिंदु</li>
<li>तीसरा बिंदु</li>
</ul>
</body>
</html>आप सूची में विभिन्न प्रकार के बुलेट्स भी उपयोग कर सकते हैं, लेकिन तब आपको <li> टैग के लिए भी type एट्रिब्यूट जोड़ना होगा:
<html>
<head>
<title>मेरा पहला HTML-दस्तावेज़</title>
</head>
<body>
<h1>मेरा पहला HTML-दस्तावेज़</h1>
<ul type="circle">
<li>पहला बिंदु</li>
<li type="square">दूसरा बिंदु</li>
<li>तीसरा बिंदु</li>
</ul>
</body>
</html>डिफ़ॉल्ट रूप से UL और LI टैग्स में बुलेट का प्रकार “disc” (भरा हुआ गोला) होता है:
<html>
<head>
<title>मेरा पहला HTML-दस्तावेज़</title>
</head>
<body>
<h1>मेरा पहला HTML-दस्तावेज़</h1>
<ul type="disc">
<li>पहला बिंदु</li>
<li type="square">दूसरा बिंदु</li>
<li>तीसरा बिंदु</li>
</ul>
</body>
</html>अब चलिए UL टैग से type एट्रिब्यूट हटा देते हैं और देखते हैं क्या होता है:
<html>
<head>
<title>मेरा पहला HTML-दस्तावेज़</title>
</head>
<body>
<h1>मेरा पहला HTML-दस्तावेज़</h1>
<ul>
<li>पहला बिंदु</li>
<li type="square">दूसरा बिंदु</li>
<li>तीसरा बिंदु</li>
</ul>
</body>
</html>अब चलिए तीनों बिंदुओं के लिए अलग-अलग बुलेट प्रकार सेट करें:
<html>
<head>
<title>मेरा पहला HTML-दस्तावेज़</title>
</head>
<body>
<h1>मेरा पहला HTML-दस्तावेज़</h1>
<ul>
<li type="disc">पहला बिंदु</li>
<li type="square">दूसरा बिंदु</li>
<li type="circle">तीसरा बिंदु</li>
</ul>
</body>
</html>अब आप समझ गए होंगे कि एट्रिब्यूट्स कहां और कैसे लिखे जाते हैं। आगे हम और भी कई प्रकार के एट्रिब्यूट्स सीखेंगे।
OL सूचियाँ
OL टैग (ordered list — क्रमांकित सूची) उतना आम नहीं है जितना UL, लेकिन इसका उपयोग भी अक्सर होता है — जब हमें क्रियाओं की क्रमवार सूची, घटनाओं की समय-रेखा, या वस्तुओं की संख्या दिखानी हो। जहां भी क्रम संख्या की आवश्यकता होती है, वहां OL टैग उपयुक्त होता है।
<html>
<head>
<title>मेरा पहला HTML-दस्तावेज़</title>
</head>
<body>
<h1>मेरा पहला HTML-दस्तावेज़</h1>
<ol>
<li>पहला बिंदु</li>
<li>दूसरा बिंदु</li>
<li>तीसरा बिंदु</li>
</ol>
</body>
</html>UL टैग की तरह OL में भी type एट्रिब्यूट होता है, लेकिन इसके मान अलग होते हैं:
- type="A" — बड़े लैटिन अक्षर (बड़ी अंग्रेज़ी A “ए”);
- type="a" — छोटे लैटिन अक्षर (छोटी अंग्रेज़ी a “ए”);
- type="I" — बड़े रोमन अंक (बड़ी अंग्रेज़ी I “आइ”);
- type="i" — छोटे रोमन अंक (छोटी अंग्रेज़ी i “आइ”);
- type="1" — अरबी अंक, जो डिफ़ॉल्ट रूप से उपयोग होते हैं।
आप UL टैग के लिए विभिन्न type एट्रिब्यूट्स आज़मा सकते हैं। उदाहरण के लिए:
<html>
<head>
<title>मेरा पहला HTML-दस्तावेज़</title>
</head>
<body>
<h1>मेरा पहला HTML-दस्तावेज़</h1>
<ol type="i">
<li>पहला बिंदु</li>
<li>दूसरा बिंदु</li>
<li>तीसरा बिंदु</li>
<li>चौथा बिंदु</li>
</ol>
</body>
</html>