HTML list
Hello Coders! Pro Dev Code में आपका स्वागत है। एक Professional Web Page बनाने के लिए सिर्फ कोड लिखना काफी नहीं है, बल्कि आपको अपने Content को सही तरीके से Organize करना भी आना चाहिए। HTML Lists न केवल आपकी वेबसाइट के Layout को सुंदर बनाती हैं, बल्कि यह Search Engines को भी आपका कंटेंट आसानी से समझने में मदद करती हैं। इस Step-by-Step Guide में हम List बनाने की हर बारीकी को समझेंगे।
लिखना शुरू करें, कोडिंग खुद-ब-खुद आ जाएगी।
चलिए, अपनी Coding Journey को एक लेवल ऊपर ले चलते हैं!
Type of HTML Lists
HTML में मुख्य रूप से तीन प्रकार की List होती हैं:
1. Unordered List (<ul>)
An Unordered List उन Items की List होती है जहाँ उनका क्रम (Order) या Sequence मायने नहीं रखता। इन List Items को आमतौर पर Bullets (छोटे Symbols) के साथ Display किया जाता है।
[i] Bullet points: इसमें Default रूप से छोटे काले Dots (Bullets) दिखाई देते हैं।
[ii] Use Case: Navigation Menu या Features List बनाने के लिए।
एक Unordered List बनाने के लिए हम <ul> Tag का उपयोग करते हैं, और हर एक List Item को <li> (List Item) Tag के अंदर रखा जाता है।
Example:
<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
HTML में आप अपनी पसंद के अनुसार Bullets का Style बदल सकते हैं। इसके लिए CSS की list-style-type Property का उपयोग किया जाता है।
Syntax:
list-style-type: value;
नीचे दी गई Table में आप देख सकते हैं कि कौन सी Value क्या काम करती है:
Example:
<ul style="list-style-type:square;">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
2. Ordered List (<ol>)
An Ordered List वह List होती है जहाँ Items एक Specific Order या Sequence का पालन करते हैं। इसमें Items को Numbers, Letters या Roman Numerals के साथ डिस्प्ले किया जाता है।
Numbering: इसमें 1, 2, 3 या A, B, C जैसे Numbers और Alphabets का उपयोग होता है। एक Ordered List बनाने के लिए हम <ol> Tag का उपयोग करते हैं, और हर एक List Item को <li> के अंदर रखा जाता है।
Example:
<ol>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
Types of Ordered Lists
HTML में आप type Attribute का उपयोग करके Numbering के Style को बदल सकते हैं। नीचे दी गई Table में अलग-अलग Styles को समझाया गया है:
Example:
<ol type="A">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
3. Description List (<dl>)
HTML Definition List का उपयोग Terms और उनकी Definitions को प्रदर्शित करने के लिए किया जाता है। यह List तब सबसे अधिक उपयोगी होती है जब आप किसी Concept, शब्द या Data को उसके Description के साथ समझाना चाहते हैं। इसे Description List भी कहा जाता है क्योंकि यह केवल List नहीं, बल्कि एक तरह की Key-Value Pair की जानकारी होती है।
Tags Used :
<dl> (Definition List): यह मुख्य container है जो पूरी List को परिभाषित करता है।
<dt> (Definition Term): यह उस शब्द या Term को Define करता है जिसे आप समझाना चाहते हैं।
<dd> (Definition Description): यह उस Term का विस्तृत विवरण या परिभाषा देने के लिए उपयोग किया जाता है।
<dl>
<dt>HTML</dt>
<dd>HTML is the standard markup language.</dd>
<dt>JavaScript</dt>
<dd>JavaScript is the programming language of the web.</dd>
<dt>SQL</dt>
<dd>SQL is a standard language for accessing databases.</dd>
<dt>PHP</dt>
<dd>PHP is an acronym for "PHP: Hypertext Preprocessor"</dd>
</dl>
Code Example
नीचे दिए गए Code को आप अपने Editor में Copy करके Practice कर सकते हैं। हमने इसमें सभी महत्वपूर्ण Tags को शामिल किया है:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Pro Dev Code - HTML Lists Tutorial</title>
<style>
body { font-family: Arial, sans-serif; line-height: 1.6; padding: 20px; }
h2 { color: #2c3e50; }
code { background: #f4f4f4; padding: 2px 5px; border-radius: 4px; }
</style>
</head>
<body>
<h2>1. Roadmap to become a Developer (Ordered List)</h2>
<ol>
<li>Learn HTML5 structure</li>
<li>Style with CSS3</li>
<li>Add logic with JavaScript</li>
<li>Master a Backend language (PHP/Node.js)</li>
</ol>
<hr>
<h2>2. Key Features of our Course (Unordered List)</h2>
<ul>
<li>Hands-on Real Projects</li>
<li>Clean and Professional Source Code</li>
<li>Mobile Responsive Design Tips</li>
<li>Interview Preparation</li>
</ul>
<hr>
<h2>3. Web Terminology (Description List)</h2>
<dl>
<dt><strong>HTML</strong></dt>
<dd>HyperText Markup Language - Used to create the skeleton of a website.</dd>
<dt><strong>CSS</strong></dt>
<dd>Cascading Style Sheets - Used to make the website look beautiful and colorful.</dd>
<dt><strong>JavaScript</strong></dt>
<dd>A powerful scripting language used to add interactivity to web pages.</dd>
</dl>
</body>
</html>
Pro Dev Code का लक्ष्य आपको सरल भाषा में एक Professional Developer बनाना है, जहाँ हम Theory से ज़्यादा Hands-on Experience पर भरोसा करते हैं। "लिखना शुरू करें, कोडिंग खुद-ब-खुद आ जाएगी" — इसी सोच के साथ हम आपको Best Content और Source Code प्रदान करते हैं। अपनी Coding Journey को बेहतर बनाने के लिए आप हमसे Facebook, Twitter, Instagram और YouTube पर @ProDevCode के माध्यम से जुड़ सकते हैं।
अगर आपको कोडिंग के दौरान कोई भी Error आए, तो आप हमारे YouTube Channel Pro Dev Code पर Comment कर सकते हैं या यहाँ blog पर अपनी Query लिख सकते हैं।
Happy Coding!
—————— ✦✦✦ ——————
.png)
Comments
Post a Comment