Html Tutorials Part – 10 List – freetoolpt
PRACTICAL No :- 10
Html के साथ list के साथ कार्य करना
कई बार हमने वेब पेज में list के साथ कार्य करने की आवश्यकता होती है ऐसे अवस्था में हम लिस्ट को वेब पेज में डालते हैं list का विभाजन html में मुख्य रूप से तीन प्रकार से होता है।
Unordered :- list को बुलेट के माध्यम से बनाने हेतु।
Orderd :- list को क्रमवार अंको के माध्यम से निरूपण हेतु।
Definition :- किसी term को परिभाषित करने हेतु।
Unordered list हेतु <ul> element का इस्तेमाल :- Unordered list बनाने हेतु हम <ul> element का इस्तेमाल करते हैं इसकेेे साथ हम बुलेट प्वाइंट अथवा लाइन को खींचने के लिए li element का इस्तेमाल करतेे हैं।
<html>
<body>
<ul>
<li>Bullet point one</li>
<li>Bullet point two</li>
<li>Bullet point three</li>
<li>Bullet point four</li>
</ul>
</body>
</html>
Ordered Lists :- कई बार हम list को ordered रूप में प्रदर्शित करना चाहते हैं इसके लिए हम <ol> element का प्रयोग करते हैं। ordered list बनाने हेतु हम list के प्रत्येक बिंदु को अंको (1,2….), शब्दों (a,b,c,…..) अथवा रोमन में निरूपित कर सकतेे हैं प्रत्येक बिंदु को <li> </li> element के अंदर डाला जाता है।
<html>
<body>
<ol>
<li>Point Number one</li>
<li>Point Number two</li>
<li>Point Number Three</li>
<li>Point Number four</li>
</ol>
</body>
</html>
Ordered list में start attribute का प्रयोग :-
Ordered list में हम list के बिंदुओं को start नंबर के द्वारा निरूपित कर सकते हैं। जैसे निम्नलिखित list में start नंबर 4 है।
Ordered list के बिंदुओं को व्युत्क्रमानुपाती क्रम में लिखना:-
<ol> element में reversed attribute के माध्यम से हम orderd list के बिंदुओं को व्युत्क्रमानुपाती क्रम में लिख सकते हैं।
<html>
<body>
<ol start=“4”>
<li>Point Number one</li>
<li>Point Number two</li>
<li>Point Number Three</li>
</ol>
</body>
</html>
<dl> Element:-
Html 5 में description हेतु <dl> element प्रदान किया गया है। <dl> element एक डिस्क्रिप्शन लिस्ट निरूपित करता है जो कि zero अथवा ज्यादा name तथा value का समूह है। प्रत्येक समूह में एक से ज्यादा <dt> element के साथ turms/name होते हैं तथा उनका संयोजन एक या ज्यादा डिस्क्रिप्शन वैल्यूज के माध्यम से होता है जिसे <dd> द्वारा निरूपित किया जाता है ।
Example :-
<html>
<body>
<dl>
<dt>Unordered List</dt>
<dd>A list of bullet point</dd>
<dt>Ordered List</dt>
<dd>An ordered list of point, as a numbered set of steps</dd>
<dt>Definition list</dt>
<dd>A list of terms and definition</dd>
</dl>
</body>
</html>
Nesting list :-
हम वर्तमान में प्रचलित लैंग्वेज इज की भांति एक लिस्ट को दूसरे लिस्ट के अंदर नेस्टिंग कर सकते हैं उदाहरण के लिए हम ऐसी लिस्ट की आवश्यकता हो जिसके अंदर अनेक लिस्ट मौजूद हो ऐसी दशा में हम लिस्टों को क्रमागत करते हुए उसमें क्रम डाल दिया जाता है प्रत्येक लिस्ट को <li> element में डालना पड़ता है।
Example :-
<html>
<body>
<ol type=“I”>
<li>Item one </li>
<li> Item two</li>
<li>Item three</li>
<li>Item four
<ol type=“i”>
<li>Item 4.1</li>
<li>Item 4.2</li>
<li>Item 4.3</li>
<li>Item 4.4</li>
<li>Item 4.5</li>
</ol>
</body>
</html>
<span> element :-
यह <div> की तरह ही होता है।अगर हमें किसी पैराग्राफ अथवा वाक्य के कुछ अंशों को सामूहिक करण करना है तो हमें span element का उपयोग कर सकते हैं।
Example :-
<html>
<body>
<div class=“footnotes”>
<h2>Footnotes</h2>
<p><span class=“invetor”><strong>1</strong> The world wide web was inveted by tim berners lee</span></p>
</div>
</body>
</html>
<em> element :-
इसका उपयोग document के किसी हिस्से पर अगर हमें जोर देना है अर्थात emphasis देना है तो हम इसका प्रयोग कर सकते हैं इसके प्रयोग से वेब पेज में टेक्स्ट italicized रूप में प्रदर्शित होता है उदाहरण के लिए:-
<p>You<em>must</em>rememberto close element in html.</p>
<strong> element :-
strong जैसा कि नाम से परिलक्षित होता है इसके मध्य में आने वाले टेक्स्ट को मजबूत रुप से प्रदर्शित करता है जिससे उक्त टेक्स्ट पर मजबूती से कहीं गई टिप्पणी प्रस्तुत हो सके ज्यादा तर ब्राउज़र स्ट्रांग के अंतर्गत आने वाले Text को bold font प्रदर्शित करते हैं। उदाहरण के लिए:-
<p><em>Always</em>Use Reverse Osmosis based purification otherwise<strong>can cause liver problems</strong></p>
<html>
<body>
<time datetime=“2020-23-01”>tues day</time>
<time datetime=”1974-08-08T 05:25″>On a pleasing August morning</time>,I was born in Secundrabad.utter pradesh
</time>
</body>
</html>
