नमस्कार, प्रिय पाठकों! आज, शीर्षक के तहत लेखों की श्रृंखला की निरंतरता के रूप में HTML मूल बातें"मैं आपको निर्माण एल्गोरिदम से परिचित कराना चाहता हूं एचटीएमएल सूचीबद्ध करता हैमदद से टैग उल और ली (बुलेट सूची), ओएल और ली (क्रमांकित सूची), डीएल, डीटी, डीडी (परिभाषा सूची).
अब मैं आपको सबसे अधिक उपयोग किए जाने वाले से परिचित कराना जारी रखूंगा एचटीएमएल टैग के साथ, जिनका उपयोग साइट पृष्ठों पर सूचियाँ बनाने के लिए किया जाता है। यदि कोई नहीं जानता कि यह क्या है, तो निश्चित रूप से नीचे प्राप्त जानकारी के बाद वे तुरंत समझ जाएंगे कि हम किस बारे में बात कर रहे हैं, क्योंकि सामग्री प्रस्तुत करने का यह रूप बहुत आम है।
HTML बुलेटेड सूचियाँ - उल और ली टैग
बुलेटेड सूची को ul टैग द्वारा परिभाषित किया जाएगा। उद्घाटन और समापन यूएल टैग के बीच सूची तत्व होते हैं, जिनमें से प्रत्येक की सामग्री, बदले में, उद्घाटन और समापन ली टैग के बीच स्थित होनी चाहिए। मुझे तुरंत ध्यान दें कि उल टैग युग्मित है (एक उद्घाटन और समापन टैग की उपस्थिति), और ब्लॉक-स्तर भी, यानी, यह एक कंटेनर बनाता है जिसमें ली टैग द्वारा हर बार गठित तत्व (लाइनें) शामिल होते हैं। तदनुसार, ली टैग युग्मित और लोअरकेस है।
गलती करना उपस्थितिमार्कर को एक भरे हुए वृत्त द्वारा दर्शाया जाता है। हालाँकि, आप प्रकार विशेषता का उपयोग करके इसका स्वरूप बदल सकते हैं, जिसमें निम्नलिखित मान हैं: डिस्क, वृत्त, वर्ग। डिस्क मान (जो भरे हुए वृत्त के रूप में मार्कर की उपस्थिति निर्धारित करता है) डिफ़ॉल्ट है। अर्थात्, यदि प्रकार विशेषता निर्दिष्ट नहीं है, तो मार्कर का स्वरूप एक भरे हुए वृत्त जैसा दिखेगा। यदि हम इन विशेषताओं को ul टैग में जोड़ते हैं, तो हमें निम्नलिखित विकल्प मिलते हैं:
स्वाभाविक रूप से, प्रत्येक मार्कर एक अलग तत्व है बुलेटेड सूचीआप प्रकार विशेषता के लिए उपयुक्त मान निर्दिष्ट करके इसे अपना स्वरूप दे सकते हैं।
क्रमांकित HTML सूचियाँ - ol और li टैग
अब आइए देखें कि ओएल टैग (उल के समान एक ब्लॉक और जोड़ी टैग) का उपयोग करके एक क्रमांकित सूची कैसे बनाई जाती है। ली टैग का उपयोग यहां एक टैग के रूप में भी किया जाता है जो HTML में क्रमांकित सूची के तत्वों को परिभाषित करता है। क्रमांकित सूची क्रमांकित तत्वों का एक संग्रह है। क्रमांकन का प्रकार प्रकार विशेषता द्वारा निर्धारित किया जाता है, जो निम्नलिखित मान ले सकता है:
- ए - बड़े लैटिन अक्षर;
- ए - लोअरकेस लैटिन अक्षर;
- मैं - बड़े रोमन अंक;
- मैं - लोअरकेस रोमन अंक;
- 1 - अरबी अंक
|
|
|
|
|
|
|
|
|
|
आप एक क्रमांकित सूची भी प्रदान कर सकते हैं जहां तत्वों को उल्टे क्रम में क्रमांकित किया गया है, उदाहरण के लिए: 3, 2, 1. यह ओएल टैग की आरक्षित विशेषता का उपयोग करके किया जाता है।
1 के अलावा किसी अन्य नंबर से बुलेटेड सूची शुरू करने का विकल्प भी है। ऐसा करने के लिए, आप प्रारंभ विशेषता का उपयोग कर सकते हैं, और इससे कोई फर्क नहीं पड़ता कि प्रकार विशेषता किस मान पर सेट है। विभिन्न प्रकार के विशेषता मानों (1 और I) के संयोजन में नाम विशेषता का उपयोग करने का एक उदाहरण देखें:
HTML परिभाषा सूचियाँ - dl, dd, dt टैग
HTML सूची का एक अन्य प्रकार परिभाषा सूची है। यह इस प्रकार बनता है। इस सूची की सामग्री खुलने और बंद होने वाले डीएल टैग के बीच स्थित है, जो कंटेनर बनाते हैं। डीटी टैग एक शब्द को परिभाषित करता है, और डीडी टैग उस शब्द का वर्णन करता है।
जैसा कि आप देख सकते हैं, dt टैग की सामग्री, जो एक शब्द है, बाईं ओर स्थानांतरित हो गई है, और dd टैग की सामग्री, जो इस शब्द की परिभाषा है, इटैलिक में लिखी गई है। यह सब विभिन्न सीएसएस शैलियों के उपयोग के माध्यम से हासिल किया गया है, जिसके बारे में हम निश्चित रूप से आगामी प्रकाशनों में बात करेंगे।
वैसे, आधुनिक वास्तविकताएँ ऐसी ही हैं भाषा एचटीएमएलइसे अलग करके नहीं माना जा सकता, इसलिए, इन महत्वपूर्ण सामग्रियों को न चूकने के लिए, RSS फ़ीड या ई-मेल के माध्यम से ब्लॉग अपडेट की सदस्यता लें। यह आज के लेख का विषय समाप्त करता है; यदि आपको आवश्यक जानकारी प्राप्त हो गई है, तो सोशल नेटवर्क बटन का उपयोग करने से इनकार न करें।
हाइपरटेक्स्ट मार्कअप लैंग्वेज HTML में एक टैग होता है
- , बुलेटेड सूचियाँ बनाने के लिए उपयोग किया जाता है। यह सभी आधुनिक ब्राउज़रों द्वारा समर्थित है और आपको तत्वों को उस क्रम में प्रदर्शित करने की अनुमति देता है जिसमें नंबरिंग की आवश्यकता नहीं होती है। उदाहरण के लिए, इसका उपयोग अक्सर मेनू आइटम और पृष्ठ पर सूचियों से संबंधित हर चीज को प्रदर्शित करने के लिए किया जाता है: व्यंजन, उत्पाद, उपकरण, उपकरण और बहुत कुछ जिसे किसी विशेष आइटम की प्राथमिकता को इंगित किए बिना सूचीबद्ध करने की आवश्यकता होती है।
- तत्व #1
- तत्व #2
- तत्व #3
- ...
- तत्व #1
- तत्व #2
- तत्व #3
- तत्व #1
-
- आइटम #2-1
- तत्व #2-2
- तत्व #2-3
- तत्व #3
- ...
- तत्व #1
- तत्व #2
- तत्व #1
- तत्व #2
- तत्व #1
- तत्व #2
- तत्व #1
- तत्व #2
- ...
- डिस्क - एक वृत्त के रूप में मार्कर (उदाहरण ऊपर था)
- वृत्त - एक पारदर्शी वृत्त के रूप में मार्कर (उदाहरण ऊपर था)
- वर्ग - एक वर्ग के रूप में मार्कर (उदाहरण ऊपर था)
- दशमलव - अरबी अंकों में क्रमांकित सूची के रूप में मार्कर: 1, 2, 3, ...
- दशमलव-अग्रणी-शून्य - अग्रणी शून्य के साथ अरबी अंकों में क्रमांकित सूची के रूप में एक मार्कर: 01, 02, 03, ...
- निचला-रोमन - छोटे अक्षरों में रोमन वर्णमाला में क्रमांकित सूची के रूप में एक मार्कर: i, ii, iii, iv, v
- अपर-रोमन - बड़े अक्षरों में रोमन वर्णमाला में क्रमांकित सूची के रूप में मार्कर: I, II, III, IV, V
- लोअर-लैटिन - छोटे अक्षरों में लैटिन वर्णमाला में एक सूची के रूप में मार्कर: ए, बी, सी, डी, ...
- अपर-लैटिन - बड़े अक्षरों में लैटिन वर्णमाला में एक सूची के रूप में मार्कर: ए, बी, सी, डी, ...
- निचला-ग्रीक - छोटे अक्षरों में ग्रीक वर्णमाला में एक सूची के रूप में एक मार्कर
- अपर-ग्रीक - बड़े अक्षरों में ग्रीक वर्णमाला में एक सूची के रूप में एक मार्कर
- . किसी टैग में विशेषता सेट करते समय
- सभी सूची आइटम विशेषता द्वारा दर्शाए अनुसार प्रदर्शित किए जाएंगे। लेकिन हम इस या उस तत्व को उसका अपना प्रदर्शन दे सकते हैं। चित्र में उदाहरण:
- तत्व #1
- तत्व #2
- तत्व #3
- तत्व #1
- तत्व #2
- तत्व #3
- तत्व #1
- तत्व #2
- तत्व #3
- तत्व #1
- तत्व #2
- तत्व #3
- तत्व #1
- तत्व #2
- तत्व #3
- ...
- ए - बड़े लैटिन अक्षरों (ए, बी, सी..) के रूप में मार्कर सेट करता है;
- ए - लोअरकेस लैटिन अक्षरों (ए, बी, सी..) के रूप में मार्कर सेट करता है;
- I - बड़े रोमन अंकों (I, II, III, IV..) के रूप में मार्कर सेट करता है;
- i - छोटे रोमन अंकों (i, ii, iii, iv..) के रूप में मार्कर सेट करता है;
- 1 (डिफ़ॉल्ट) - अरबी अंकों (1, 2, 3..) के रूप में मार्कर सेट करता है;
- . उद्घाटन और समापन टैग के बीच अलग-अलग शब्द, वाक्यांश, पैराग्राफ, चित्र, कोड के टुकड़े और बहुत कुछ हैं जो बुलेटेड सूची की सामग्री हैं।
टिप्पणी
सूची के अंदर आप खाते को अपने खाते में बदल सकते हैं। इस प्रयोजन के लिए टैग पर एक विशेष विशेषता मान = "" है
- , जिसे कुछ संख्यात्मक मान निर्दिष्ट किया गया है। उदाहरण के लिए
- तत्व #1
- तत्व #2
- तत्व #3
- तत्व #1
- तत्व #2
- तत्व #3
- तत्व #1
- तत्व #2
- तत्व #3
- तत्व #10
- तत्व #11
- तत्व #12
- तत्व #1
- तत्व #2
- तत्व #3
- तत्व #1
- तत्व #2
- तत्व #3
- तत्व #1
- तत्व #2
- तत्व #3
- तत्व #1
- तत्व #2
- तत्व #3
- तत्व #1
- तत्व #2
- तत्व #3
- तत्व #1
- तत्व #2
- तत्व #3
- तत्व #1
- तत्व #2
- तत्व #3
- .
- तत्व #1
- तत्व #2
- तत्व #3
- तत्व #4
यह पृष्ठ पर ऐसा दिखता है:
- तत्व #1
- तत्व #2
- तत्व #3
- तत्व #4
उदाहरण 5. html में उलटी क्रमांकित सूची
नीचे उलटी क्रमांकित सूची (उल्टे क्रम में गिनती) का एक उदाहरण दिया गया है।
- तत्व #1
- तत्व #2
- तत्व #3
- तत्व #4
यह पृष्ठ पर ऐसा दिखता है:
- तत्व #1
- तत्व #2
- तत्व #3
- तत्व #4
बुनियादी बातों से हटकर, अब हम डिज़ाइन के विभिन्न हिस्सों को संरचना और अर्थ प्रदान करने के लिए उपयोग किए जाने वाले तत्वों पर करीब से नज़र डालेंगे। अगर किसी को नहीं पता तो उल और ली सिंपल से कहीं बेहतर विकल्प हैं पाठ पाठक्योंकि जब पाठ लपेटा जाता है, विशेषकर में चल दूरभाष, यह पूरी तरह से इंडेंट करता है और मार्कर के चारों ओर लपेटता नहीं है।
सूचियों को पृष्ठों पर जानकारी प्रस्तुत करने का एक शानदार तरीका माना जाता है क्योंकि वे पढ़ने में आसान होती हैं और अच्छी दिखती हैं। बहुत से लोग सोचते हैं कि बुलेट पॉइंट छोटी छवियां हैं, लेकिन वास्तव में वे सभी काफी सरल HTML कोड के माध्यम से बनाए गए हैं। आप एम्बेड कर सकते हैं अलग - अलग प्रकारयदि आप चाहें तो सूचियाँ एक-दूसरे में समा जाएँ, बस उन्हें सही ढंग से बंद करना याद रखें। आप इन सभी सूची आदेशों में अपने इच्छित टेक्स्ट के साथ खेल सकते हैं।
आपको यह भी जानना होगा कि सूचियों में प्रारंभ में कई तत्व होते हैं:
1 . अव्यवस्थित जानकारी.
2 . सुव्यवस्थित जानकारी.
3 . परिभाषाएँ।आइए स्थापना शुरू करें:
1. विकल्प:
- सामग्री सूचीबद्ध करें
- अनोखी सूची
- मूल सूचियाँ
- ZORNET.RU - वेबमास्टर
- एक और सूची
सीएसएसकेसांगेलोपन (
मार्जिन: 19px 0 0;
पैडिंग:0;
सूची-शैली: कोई नहीं;
काउंटर-रीसेट: ली;
}
.ksangelopan ली (
बॉर्डर: 2px ठोस #3575ad;
पृष्ठभूमि: #d7dee4;
स्थिति: सापेक्ष;
मार्जिन-बॉटम: 17px;
पैडिंग: 15px 9px;
}
.ksangelopan ली: होवर (
z-सूचकांक: 1;
}
.ksangelopan li:पहले (
बॉर्डर: 2px ठोस #2270b3;
स्थिति: निरपेक्ष;
शीर्ष: -14px;
पैडिंग: 3px 9px;
फ़ॉन्ट-आकार: 11px;
फोंट की मोटाई: बोल्ड;
रंग: #246ईएफ़;
पृष्ठभूमि: #f2f4f7;
प्रति-वृद्धि: ली;
सामग्री: काउंटर(ली);
-वेबकिट-संक्रमण-अवधि: 0.4s;
संक्रमण-अवधि: 0.4s;
}
.ksangelopan li:hover:before (
पृष्ठभूमि: #2672बी3;
रंग: #f7f9fb;
-वेबकिट-ट्रांसफ़ॉर्म: अनुवाद(-11पीएक्स, 0);
-एमएस-परिवर्तन: अनुवाद(-11पीएक्स, 0);
-o-परिवर्तन: अनुवाद(-11px, 0);
परिवर्तन: अनुवाद(-11px, 0);
}
.ksangelopan li:after (
सामग्री: "";
स्थिति: निरपेक्ष;
संक्रमण-अवधि: 0.3s;
-वेबकिट-संक्रमण-संपत्ति: चौड़ाई;
संक्रमण-संपत्ति: चौड़ाई;
z-सूचकांक: -1;
पृष्ठभूमि: #एफएफएफ;
ऊंचाई: 100%;
बाएँ: 0;
शीर्ष: 0;
चौड़ाई: 0;
}
.ksangelopan li:hover:after (
चौड़ाई: 100%;
}
स्थापना के लिए बस इतना ही।2 दूसरा विकल्प:
- सामग्री सूचीबद्ध करें
- अनोखी सूची
- मूल सूचियाँ
- ZORNET.RU - वेबमास्टर
- एक और सूची
सीएसएसबेलेडुज़लोपामगेस (
मार्जिन-बॉटम: 8px;
पैडिंग:0;
सूची-शैली: कोई नहीं;
काउंटर-रीसेट: ली;
}
.beleduzlopamges ली (
स्थिति: सापेक्ष;
बॉर्डर: 2px ठोस #195588;
पृष्ठभूमि: #eff3f7;
पैडिंग: 15px 19px 15px 27px;
मार्जिन: 12px 0 12px 40px;
-वेबकिट-संक्रमण-अवधि: 0.3s;
संक्रमण-अवधि: 0.3s;
}
.beleduzlopamges li:hover (
पृष्ठभूमि: #एफएफएफ;
}
.beleduzlopamges li:पहले (
लाइन-ऊंचाई: 32px;
स्थिति: निरपेक्ष;
शीर्ष: 4px;
बाएँ: -39px;
चौड़ाई: 39px;
पाठ-संरेखण: केंद्र;
फ़ॉन्ट-आकार: 16px;
फोंट की मोटाई: बोल्ड;
रंग: #f9f5f5;
पृष्ठभूमि: #275बी88;
प्रति-वृद्धि: ली;
सामग्री: काउंटर(ली);
संक्रमण-अवधि: 0.2s;
}
.beleduzlopamges li:hover:before (
चौड़ाई:46px;
}
.beleduzlopamges li:after (
स्थिति: निरपेक्ष;
बाएँ: 0;
शीर्ष: 4px;
सामग्री: "";
ऊंचाई: 0;
चौड़ाई: 0;
बॉर्डर: 16px ठोस पारदर्शी;
बॉर्डर-बाएं-रंग: #275बी88;
-वेबकिट-संक्रमण-अवधि: 0.2s;
संक्रमण-अवधि: 0.2s;
}
.beleduzlopamges li:hover:after (
मार्जिन-बाएँ: 6px;
}
आप साइट की मुख्य शैली से मेल खाने के लिए स्वतंत्र रूप से केंद्रीय गामा सेट कर सकते हैं।3 तीसरा विकल्प:
- यूकोज़ के लिए स्क्रिप्ट
- यूकोज़ के लिए टेम्पलेट
- वेबसाइट डिज़ाइन
- वेबसाइट शैलियाँ
- सीएसएस के साथ स्टाइलिंग
सीएसएसनिज़ुआलिसानेलाग (
पैडिंग:0;
सूची-शैली: कोई नहीं;
काउंटर-रीसेट: ली;
}
.निज़ुअलिसानेलाग ली (
स्थिति: सापेक्ष;
पैडिंग: 9px 17px 17px 25px;
मार्जिन-बाएं: 39px;
संक्रमण-अवधि: 0.2s;
कर्सर: सूचक;
फोंट की मोटाई: बोल्ड;
रंग: #343638;
}
.निज़ुअलिसानेलाग ली:पहले (
बॉर्डर: 3px ठोस पारदर्शी;
लाइन-ऊंचाई: 35px;
स्थिति: निरपेक्ष;
शीर्ष: 0;
बाएँ:-29px;
चौड़ाई:41px;
पाठ-संरेखण:केंद्र;
फ़ॉन्ट-आकार: 14px;
फोंट की मोटाई: बोल्ड;
रंग: #619dce;
प्रति-वृद्धि: ली;
सामग्री: काउंटर(ली);
संक्रमण-अवधि: 0.3s;
बॉक्स-आकार: बॉर्डर-बॉक्स;
}
.nijualisanelag li:hover:before (
रंग: #337एबी7;
}
.निज़ुअलिसानेलाग ली:बाद (
स्थिति: निरपेक्ष;
शीर्ष: 0;
बाएँ: -29px;
चौड़ाई: 41px;
ऊंचाई: 41px;
बॉर्डर: 5px ठोस #468bd0;
सीमा-त्रिज्या: 50%;
सामग्री: "";
अपारदर्शिता: 0.5;
-वेबकिट-बॉक्स-साइजिंग: बॉर्डर-बॉक्स;
-मोज़-बॉक्स-साइज़िंग: बॉर्डर-बॉक्स;
बॉक्स-आकार: बॉर्डर-बॉक्स;
}
.nijualisanelag li:hover:after (
एनीमेशन: 500ms आसानी से अंदर-बाहर 0s बाउंसइन;
अपारदर्शिता: 1;
}@कीफ्रेम्स बाउंसइन (
0% {
अपारदर्शिता: 0;
परिवर्तन: स्केल3डी(.3, .3, .3);
}
20% {
परिवर्तन: स्केल3डी(1.3, 1.3, 1.3);
}
40% {
परिवर्तन: स्केल3डी(.9, .9, .9);
}
60% {
अपारदर्शिता: 1;
परिवर्तन: स्केल3डी(1.03, 1.03, 1.03);
}
80% {
परिवर्तन: स्केल3डी(.97, .97, .97);
}
को (
अपारदर्शिता: 1;
परिवर्तन: स्केल3डी(1, 1, 1);
}
}
सुंदर एनीमेशन के साथ आता है.4 चौथा विकल्प:
- साइट के लिए पहला तत्व
- साइट के लिए दूसरा तत्व
- साइट के लिए तीसरा तत्व
- साइट के लिए चौथा तत्व
- साइट के लिए पांचवां तत्व
सीएसएसपैडिंग:0;
सूची-शैली: कोई नहीं;
}
.कुडेज़ामुडेन ली(
पैडिंग: 6px;
}
.kudezamuden li:पहले (
पैडिंग-राइट: 11px;
फोंट की मोटाई: बोल्ड;
रंग: #4979ए0;
सामग्री: "\2606";
संक्रमण-अवधि: 0.4s;
}
.kudezamuden li:hover:before (
रंग: #235e90;
सामग्री: "\2605";
}
समान पिछला संस्करण, केवल आइकन ही बदल दिया गया है।सामान्य तौर पर, यह सूचियों का एक छोटा सा चयन है जो वेब मास्टर को पोर्टल पर एक सुंदर सूची बनाने की अनुमति देगा, जहां वह इसे और अधिक डिज़ाइन कर सकता है, जैसा कि वह स्वयं इसे देखना चाहता है।
यदि आपको बुलेटेड सूची के बजाय क्रमांकित सूची में आइटम रखने की आवश्यकता है, तो क्रमबद्ध HTML का उपयोग किया जाएगा। यह सूची ol टैग का उपयोग करके बनाई गई है। क्रमांकन एक से शुरू होता है और ली टैग के साथ प्रत्येक बाद के आदेशित सूची तत्व के लिए एक से बढ़ता है।
HTML सूचियाँजानकारी के संबंधित टुकड़ों को समूहीकृत करने के लिए उपयोग किया जाता है। सूचियाँ तीन प्रकार की होती हैं:
बुलेटेड सूची —
- - सूची का प्रत्येक तत्व
- एक मार्कर से चिह्नित,
क्रमांकित सूची —- - सूची का प्रत्येक तत्व
- एक संख्या के साथ चिह्नित
परिभाषाओं की सूची- - पद युग्मों से मिलकर बना है- —
- परिभाषा।
प्रत्येक सूची एक कंटेनर है जिसके भीतर सूची तत्व या शब्द-परिभाषा जोड़े स्थित हैं। सूची तत्व ब्लॉक तत्वों की तरह व्यवहार करते हैं, जो एक दूसरे के नीचे स्थित होते हैं और कंटेनर ब्लॉक की पूरी चौड़ाई पर कब्जा कर लेते हैं। प्रत्येक सूची आइटम के किनारे पर एक अतिरिक्त ब्लॉक स्थित होता है, जो लेआउट में भाग नहीं लेता है।
HTML सूचियाँ बनाना
1. बुलेटेड सूची
बुलेटेड सूचीएक अव्यवस्थित सूची है (अंग्रेजी अव्यवस्थित सूची से). युग्मित टैग का उपयोग करके बनाया गया
. सूची तत्व का मार्कर एक लेबल है, उदाहरण के लिए, एक भरा हुआ वृत्त।ब्राउज़र डिफ़ॉल्ट रूप से सूची ब्लॉक में निम्नलिखित स्वरूपण जोड़ते हैं:
प्रत्येक सूची तत्व एक युग्मित टैग का उपयोग करके बनाया गया है
- (अंग्रेजी सूची आइटम से).
- उपलब्ध ।
- माइक्रोसॉफ्ट
- गूगल
- सेब
चावल। 1. बुलेटेड सूची 2. क्रमांकित सूची
क्रमांकित सूचीयुग्मित टैग का उपयोग करके बनाया गया है। प्रत्येक सूची आइटम भी तत्व का उपयोग करके बनाया गया है
- एक संख्या के साथ चिह्नित
- . ब्राउज़र स्वचालित रूप से तत्वों को क्रमांकित करता है, और यदि आप ऐसी सूची के एक या अधिक तत्वों को हटाते हैं, तो शेष संख्याएँ स्वचालित रूप से पुनर्गणना की जाएंगी।
सूची ब्लॉक में डिफ़ॉल्ट ब्राउज़र शैलियाँ भी हैं:
- मान विशेषता उपलब्ध है, जो आपको चयनित सूची आइटम के लिए डिफ़ॉल्ट संख्या बदलने की अनुमति देती है। उदाहरण के लिए, यदि आपके द्वारा सेट की गई सूची में पहले आइटम के लिए
- , तो शेष क्रमांकन की नए मान के सापेक्ष पुनर्गणना की जाएगी।
टैग के लिए
- निम्नलिखित विशेषताएँ उपलब्ध हैं:
- माइक्रोसॉफ्ट
- गूगल
- सेब
- और
- उपलब्ध ।
- निदेशक:
- पीटर टोचिलिन
- ढालना:
- एंड्री गैडुलियन
- एलेक्सी गैवरिलोव
- विटाली गोगुनस्की
- मारिया कोज़ेवनिकोवा
चावल। 3. परिभाषाओं की सूची4. नेस्टेड सूची
अक्सर, सरल सूचियों की क्षमताएं पर्याप्त नहीं होती हैं, उदाहरण के लिए, सामग्री तालिका बनाते समय, इसके बिना कोई काम नहीं होता है नेस्टेड आइटम. नेस्टेड सूची के लिए मार्कअप इस प्रकार होगा:
- परिच्छेद 1।
- बिन्दु 2.
- उपखंड 2.1.
- उपखंड 2.2.
- उपखंड 2.2.1.
- उपखंड 2.2.2.
- उपखंड 2.3.
- बिन्दु 3.
चावल। 4. नेस्टेड सूची5. बहुस्तरीय क्रमांकित सूची
एक बहु-स्तरीय सूची का उपयोग विभिन्न इंडेंटेशन के साथ विभिन्न स्तरों पर सूची आइटम प्रदर्शित करने के लिए किया जाता है। बहु-स्तरीय क्रमांकित सूची के लिए मार्कअप इस प्रकार होगा:
- अनुच्छेद
- अनुच्छेद
- अनुच्छेद
- अनुच्छेद
- अनुच्छेद
- अनुच्छेद
- अनुच्छेद
- अनुच्छेद
- अनुच्छेद
- अनुच्छेद
- अनुच्छेद
यह डिफ़ॉल्ट मार्कअप प्रत्येक नेस्टेड सूची के लिए एक नई नंबरिंग बनाएगा, जो एक से शुरू होगी। नेस्टेड नंबरिंग बनाने के लिए, आपको निम्नलिखित गुणों का उपयोग करना होगा:
काउंटर-रीसेट एक या अधिक काउंटरों को रीसेट करता है, रीसेट किए जाने वाले मान को निर्दिष्ट करता है;
काउंटर-इंक्रीमेंट काउंटर इंक्रीमेंट मान निर्दिष्ट करता है, यानी। प्रत्येक आगामी आइटम को किस वृद्धि में क्रमांकित किया जाएगा;
सामग्री - उत्पन्न सामग्री, इस मामले में यह प्रत्येक सूची आइटम से पहले संख्या प्रदर्शित करने के लिए जिम्मेदार है।ओएल (/* मानक क्रमांकन हटाएं */ सूची-शैली: कोई नहीं; /* काउंटर की पहचान करें और इसे ली नाम दें। काउंटर मान निर्दिष्ट नहीं है - डिफ़ॉल्ट रूप से यह 0 है */ काउंटर-रीसेट: ली; ) ली :before ( /* हम उस तत्व को परिभाषित करते हैं जिसे क्रमांकित किया जाएगा - li पहले का छद्म तत्व इंगित करता है कि सामग्री संपत्ति का उपयोग करके डाली गई सामग्री को सूची आइटम से पहले रखा जाएगा। काउंटर वृद्धि का मान यहां सेट किया गया है (डिफ़ॉल्ट 1 है) */ काउंटर-इंक्रीमेंट: ली /)। * सामग्री संपत्ति सूची आइटम की संख्या प्रदर्शित करती है। काउंटर() का अर्थ है कि उत्पन्न पाठ उस नाम के साथ सभी काउंटरों के मूल्यों का प्रतिनिधित्व करता है संख्याओं के बीच, और प्रत्येक सूची आइटम की सामग्री से पहले एक रिक्त स्थान जोड़ा जाता है */ सामग्री: काउंटर्स(ली,"") "।"
चावल। 5. बहुस्तरीय क्रमांकित सूची
तालिका 1. टैग विशेषताएँ
गुण विवरण, स्वीकृत मूल्य उलट उलटी विशेषता के कारण सूची उल्टे क्रम में प्रदर्शित होती है (उदाहरण के लिए, 9, 8, 7...)। शुरू प्रारंभ विशेषता प्रारंभिक मान निर्दिष्ट करती है जिससे नंबरिंग शुरू होगी, उदाहरण के लिए, एक निर्माण - पहले आइटम को क्रमांक "10" सौंपा जाएगा। आप उसी समय क्रमांकन प्रकार भी निर्दिष्ट कर सकते हैं, उदाहरण के लिए,
- .
प्रकार प्रकार विशेषता सूची (अक्षर या संख्या) में उपयोग करने के लिए मार्कर के प्रकार को निर्दिष्ट करती है। स्वीकृत मान:
1 - डिफ़ॉल्ट मान, दशमलव क्रमांकन।
ए - वर्णमाला क्रम में सूची क्रमांकन, बड़े अक्षर (ए, बी, सी, डी)।
ए - वर्णमाला क्रम में सूची क्रमांकन, छोटे अक्षर (ए, बी, सी, डी)।
I - रोमन बड़े अंकों में क्रमांकन (I, II, III, IV)।
i - रोमन लोअरकेस अंकों में क्रमांकन (i, ii, iii, iv)।3. परिभाषाओं की सूची
परिभाषाओं की सूचीएक टैग का उपयोग करके बनाए जाते हैं
परिभाषा सूची ब्लॉक में निम्नलिखित डिफ़ॉल्ट ब्राउज़र शैलियाँ हैं:
टैग के लिए
- ,
कोड इस तरह दिखता है:
टैग मार्कर बदलना
- सीएसएस का उपयोग करना
टैग द्वारा बनाई गई बुलेट सूची आइटम
- , मनमानी छवियों के साथ चिह्नित किया जा सकता है। CSS का उपयोग मार्कर प्रकार को बदलने के लिए किया जाता है। उदाहरण के लिए
और यह पृष्ठ पर ऐसा दिखता है:
सी सीएसएस का उपयोग करनाहम अन्य प्रकार के मार्कर डिस्प्ले सेट कर सकते हैं। लेकिन किसी टैग के लिए कोई शैली निर्दिष्ट करते समय आपको यह याद रखना होगा
- , यह सूची के सभी तत्वों पर लागू होता है।
अंतर केवल इतना है कि यह टैग सख्ती से क्रमांकन सूचियों के लिए बनाया गया है। टैग का नाम अंग्रेजी संक्षिप्त नाम "ऑर्डर्ड लिस्ट" से आया है - एक क्रमांकित सूची।
टैग सिंटैक्स
जहां type='value' विशेषता निम्नलिखित मान ले सकती है
प्रारंभ = "मूल्य" विशेषता रिपोर्ट का प्रारंभिक मूल्य (प्रारंभ मूल्य) निर्दिष्ट करती है।
उलटा विशेषता रिवर्स गिनती निर्दिष्ट करती है (यदि आवश्यक हो)।
टैग
- क्लोजिंग टैग के अनिवार्य उपयोग की आवश्यकता है
सूची तत्वों को बनाने के लिए युग्मित टैग का उपयोग किया जाता है
HTML में क्रमांकित सूचियों वाले उदाहरण (
- )
उदाहरण 1. लैटिन अक्षरों में HTML क्रमांकित सूची
बड़े अक्षरों के साथ उदाहरण
छोटे अक्षरों वाला उदाहरण
यह पृष्ठ पर ऐसा दिखता है:
उदाहरण 2. रोमन अक्षरों में HTML क्रमांकित सूची
बड़े अक्षरों के साथ उदाहरण
यह पृष्ठ पर ऐसा दिखता है:
छोटे अक्षरों वाला उदाहरण
यह पृष्ठ पर ऐसा दिखता है:
उदाहरण 3. क्रमांकित सूची एचटीएमएल भिन्न प्रारंभ स्थिति
एक उदाहरण जो स्टार्ट विशेषता की क्षमताओं को दिखाता है, जो आपको काउंटर का शुरुआती मूल्य निर्धारित करने की अनुमति देता है।
यह पृष्ठ पर ऐसा दिखता है:
उदाहरण 4. HTML क्रमांकित सूचियों में गिनती बदलना
टैग में नए तत्व प्रदर्शित करते समय वैल्यू विशेषता का उपयोग करके काउंटर वैल्यू को बदलने की क्षमता वाला एक उदाहरण नीचे दिया गया है
टैग सिंटैक्स
यह कोड साइट पर बुलेटेड सूची में तब्दील हो जाता है:
टैग
- क्लोजिंग टैग के अनिवार्य उपयोग की आवश्यकता है
सूची तत्वों को बनाने के लिए युग्मित टैग का उपयोग किया जाता है। उद्घाटन और समापन टैग के बीच अलग-अलग शब्द, वाक्यांश, पैराग्राफ, चित्र, कोड के टुकड़े और बहुत कुछ हैं जो बुलेटेड सूची की सामग्री हैं।
बुलेटेड सूची की सामग्री क्या हो सकती है?यह विभिन्न प्रकार का पाठ हो सकता है, जिसमें एकल शब्द, वाक्यांश और पैराग्राफ, छवियां, नेस्टेड सूचियां, PHP कोड के टुकड़े और बहुत कुछ शामिल है जिन्हें सरल अंकन की आवश्यकता होती है।
प्रत्येक बुलेटेड सूची आइटम डिफ़ॉल्ट रूप से दाईं ओर 40 पिक्सेल इंडेंट किया गया है। का उपयोग करते हुए सीएसएस शैलियाँ, हम डिस्प्ले बदल सकते हैं इस सूची काअपने विवेक पर. टैग
- ब्लॉक-आधारित है, इसलिए यह उसके लिए उपलब्ध पूरे क्षेत्र पर कब्जा कर लेता है, जो स्क्रीन के किनारे, टेबल फ्रेम या अन्य पेज तत्वों तक सीमित होता है।
सूची-भीतर-सूची अनुलग्नकों की अनुमति है।
उदाहरण के लिए
टैग विशेषताएँ और गुण
व्यापक रूप से प्रयुक्त टैग विशेषता
- एक प्रकार विशेषता है जो दर्शाती है कि सूची मार्कर कैसा दिखेगा। निम्नलिखित मान ले सकते हैं
1. टाइप = "डिस्क" - भरे हुए सर्कल के रूप में मार्कर (यह मान डिफ़ॉल्ट है)। डिस्क उदाहरण थोड़ा अधिक था.
2. टाइप = "सर्कल" - एक पारदर्शी सर्कल के रूप में मार्कर
उदाहरण के लिए:
3. type='वर्ग' - एक वर्ग के रूप में मार्कर
उदाहरण के लिए:
और यह पृष्ठ पर ऐसा दिखता है:
सीएसएस में, बुलेट प्रकार को सूची-शैली-प्रकार विशेषता का उपयोग करके निर्दिष्ट किया जाता है:
आइए देखें कि सूची-शैली-प्रकार कौन से मान ले सकता है:
विशेषता को टैग में ही निर्दिष्ट किया जा सकता है
- , और टैग
