Unordered lists (<ul>) tag in html hindi
एचटीएमएल वेब पेज में अनऑर्डर्ड लिस्ट्स टैग का उपयोग किसी पर्टिकुलर लिस्ट आइटम के कलेक्शन को एक स्पेशल आर्डर में ग्रुप कर डिस्प्ले करता है। यहाँ एचटीएमएल वेब पेज में <ul> टैग अनऑर्डर्ड लिस्ट आइटम यानि लिस्ट आइटम डिस्प्ले को कोई क्रम न होना आर्डर में लिस्ट आइटम को प्रीव्यू करता है, जहा हर ul लिस्ट आइटम को <li> टैग के अंदर मल्टीप्ल टाइम लिस्ट आइटम क्रिएट कर डिस्प्ले किया जाता है। यहाँ याद रहे की, एचटीएमएल वेब पेज में अनऑर्डर्ड हर लिस्ट आइटम लिस्ट आइटम के फ्रंट में बुलेट पॉइंट को डिस्प्ले करता हैं, यदि आप इसे मैन्युअल एडवांस कस्टमाइज करना चाहते है, तो आप एचटीएमएल वेब पेज में सीएसएस स्टाइलशीट प्रॉपर्टीज को अप्लाई कर एडवांस अनऑर्डर्ड लिस्ट आइटम प्रीव्यू को कस्टमाइज कर सकते हैं।
Basic structure of unordered list in HTML web page.
Example of unordered list in HTML web page.
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
<title>Html Unordered List Tag</title>
</head>
<body>
<p><b>Unordered List Element</b></p>
<ul>
<li>Americ</li>
<li>India</li>
<li>United Kingdom</li>
<li>Japan</li>
<li>Rusia</li>
</ul>
</body>
</html>
Customizing unordered lists in HTML web page.
एचटीएमएल वेब पेज में अनऑर्डर्ड लिस्ट्स आइटम को मल्टीप्ल विकल्प के साथ मैन्युअल कस्टमाइज किया जा सकता है. जहा डिफ़ॉल्ट डिस्प्ले अनऑर्डर्ड लिस्ट की डिफ़ॉल्ट बुलेट स्टाइल को मॉडिफाई करना, बुलेट डिफ़ॉल्ट इंडेंटेशन को एडजस्ट करना और डिफ़ॉल्ट लिस्ट आइटम स्टाइल्स को जरूरत के अनुसार मैन्युअल कॉन्फ़िगर करना आदि है।
Bullet Styles in HTML Web Pages.
वेब डेवलपर एचटीएमएल वेब पेज में डिफ़ॉल्ट अनऑर्डर्ड लिस्ट स्टाइल्स को सीएसएस के माध्यम से बुलेट लिस्ट स्टाइल टाइप प्रॉपर्टीज का यूज़ करके डिफ़ॉल्ट बुलेट स्टाइल्स मैन्युअल कस्टमाइज कर सकते हैं।
Unordered List Item Bullet Item List Option Choice.
- None bullet style – यह सभी बुलेट्स इफ़ेक्ट पॉइंट को रिमूव करता है।
- Disc bullet style – यह अनऑर्डर्ड लिस्ट आइटम में डिस्क बुलेट स्टाइल को प्रीव्यू करता है।
- Circle bullet style – यह अनऑर्डर्ड लिस्ट आइटम में सर्किल बुलेट स्टाइल को प्रीव्यू करता है।
- Square bullet style – यह अनऑर्डर्ड लिस्ट आइटम में स्क्वायर बुलेट स्टाइल को प्रीव्यू करता है।
Changing bullet style in HTML web page example.
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
<title>Html Unordered List Css Bullet Style Format</title>
<style>
p{
color:red;
font-family:bookman old style;
}
.disc-style {
list-style-type: disc;
}
.circle-style {
list-style-type: circle;
}
.square-style {
list-style-type: square;
}
.no-style {
list-style-type: none;
}
</style>
</head>
<body>
<p><b>Disc Style Bullet</b></p>
<ul class=”disc-style”>
<li>Disc Bullet Style</li>
<li>Disc Bullet Style</li>
<li>Disc Bullet Style</li>
<li>Disc Bullet Style</li>
</ul>
<p><b>Circle Style Bullet</b></p>
<ul class=”circle-style”>
<li>Circle Bullet Style</li>
<li>Circle Bullet Style</li>
<li>Circle Bullet Style</li>
<li>Circle Bullet Style</li>
</ul>
<p><b>Square Style Bullet</b></p>
<ul class=”square-style”>
<li>Square Bullet Style</li>
<li>Square Bullet Style</li>
<li>Square Bullet Style</li>
<li>Square Bullet Style</li>
</ul>
<p><b>No Bullet Style</b></p>
<ul class=”no-style”>
<li>No Bullet Style</li>
<li>No Bullet Style</li>
<li>No Bullet Style</li>
<li>No Bullet Style</li>
</ul>
</body>
</html>
Nested lists in HTML web page.
वेब डेवलपर एचटीएमएल वेब पेज में किसी अनऑर्डर्ड लिस्ट आइटम में लिस्ट आइटम के अंदर किसी अन्य एक से अधिक लिस्ट आइटम एलिमेंट को क्रिएट कर एक नेस्टेड लिस्ट आइटम बना सकते हैं। कई बार एचटीएमएल वेब पेज में हमें पदानुक्रमित आर्डर में लिस्ट आइटम को बनाने की जरूरत हो सकती है।
Nested Lists Example in HTML Web Page.
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
<title>Html Nested List Tag</title>
</head>
<body>
<p><b>Html Topic</b></p>
<ul>
<li>Overview of HTML
<ul>
<li>What is HTML?</li>
<li>History and evolution of HTML</li>
</ul>
</li>
<li>Basic HTML Document Structure
<ul>
<li>The HTML document skeleton: <!DOCTYPE html>, <html>, <head>, <body></li>
<li>Basic HTML tags and their functions
<ul>
<li>H1 Tag</li>
<li>P Tag</li>
<li>Ahref Tag</li>
<li>Table Tag</li>
</ul>
</li>
</ul>
</li>
</ul>
<ul>
<li>Creating a Simple Web Page
<ul>
<li>Writing and saving your first HTML file</li>
<li>Viewing HTML in a browser</li>
</ul>
</body>
</html>
Unordered List Items in HTML Web Page.
- <ul> tag – एचटीएमएल वेब पेज में अनऑर्डर्ड लिस्ट आइटम को क्रिएट करते है।
- <li> tag – एचटीएमएल वेब पेज में <ul> टैग के अंदर एक से अधिक प्रत्येक लिस्ट आइटम को क्रिएट करता है।
- Nested Lists – एचटीएमएल वेब पेज में जरूरत के अनुसार नेस्टेडलिस्ट आइटम क्रिएट करने के <li> टैग के अंदर <ul> टैग का उपयोग कर मल्टीप्ल नेस्टेड लिस्ट आइटम या एलिमेंट डेवेलप कर सकते है।
