ويب ڊولپمينٽ ڪورس ڪلاس 5
لسٽ ٽيگس ڇا آھن ويب ڊولپمينٽ ڪورس ڪلاس 5
HTML ۾ لسٽ ٽيگس مختلف قسم جي لسٽن لاءِ استعمال ٿيندا آهن. لسٽ ٽيگس جو مقصد معلومات کي ترتيب سان يا غير ترتيب وار رکڻ آهي. هيٺيان HTML لسٽ ٽيگس ۽ انهن جا قسم آهن:
1. *Ordered List (ترتيب وار لسٽ)*
– *HTML ٽيگ*: `<ol>`
– *وضاحت*:
ترتيب وار لسٽ ۾ عناصر جو هڪ خاص ترتيب هوندو آهي. جڏهن توهان ان لسٽ ۾ هر هڪ آئٽم کي نمبرنگ يا ترتيب ۾ ڏيکارڻ چاهيو ٿا، ته توهان `<ol>` ٽيگ استعمال ڪندا آهيو.
– *مثال*:
“`html
<ol>
<li>پهرين</li>
<li>ٻيو</li>
<li>ٽيون</li>
</ol>
“`
– *نتيجو*:
1. پهرين
2. ٻيو
3. ٽيون
2. *Unordered List (غير ترتيب وار لسٽ)* ويب ڊولپمينٽ ڪورس ڪلاس 5
– *HTML ٽيگ*: `<ul>`
– *وضاحت*:
غير ترتيب وار لسٽ ۾ نمبرنگ جي بجاءِ هر هڪ عنصر هڪ نقطي (bullet) سان ظاهر ٿيندو آهي.
– *مثال*:
“`html
<ul>
<li>آئون</li>
<li>تون</li>
<li>هن</li>
</ul>
“`
– *نتيجو*:
– آئون
– تون
– هن
3. *Description List (وضاحت واري لسٽ)* ويب ڊولپمينٽ ڪورس ڪلاس 5
– *HTML ٽيگ*: `<dl>`
– *وضاحت*:
وضاحت واري لسٽ ۾ هر هڪ عنصر جو عنوان (term) ۽ ان جو وضاحت (description) ڏنل هوندي آهي. ان ۾ `<dt>` ٽيگ عنوان لاءِ ۽ `<dd>` ٽيگ وضاحت لاءِ استعمال ٿيندا آهن.
– *مثال*:
“`html
<dl>
<dt>HTML</dt>
<dd>ويب پيج ٺاهڻ لاءِ استعمال ٿيندڙ زبان آهي.</dd>
<dt>CSS</dt>
<dd>ويب پيجن کي ڊيزائن ڪرڻ لاءِ استعمال ٿيندڙ زبان آهي.</dd>
</dl>
“`
– *نتيجو*:
– HTML: ويب پيج ٺاهڻ لاءِ استعمال ٿيندڙ زبان آهي.
– CSS: ويب پيجن کي ڊيزائن ڪرڻ لاءِ استعمال ٿيندڙ زبان آهي.
لسٽ ٽيگس ۽ انهن جي وضاحت:
– *`<ol>`*: ترتيب وار لسٽ. (نمبرنگ سان)
– *`<ul>`*: غير ترتيب وار لسٽ. (نقطا/بلٽ پوائنٽ سان)
– *`<dl>`*: وضاحت واري لسٽ. (عنوان ۽ وضاحت سان)
– *`<li>`*: لسٽ آئٽم. اهو هر لسٽ ۾ هڪ آئٽم ڏيکارڻ لاءِ استعمال ٿيندو آهي، اهو ڪنهن به قسم جي لسٽ (ordered, unordered, description) ۾ استعمال ٿي سگهي ٿو.
اضافي وضاحت:
– *`<ol>`* (Ordered List) ۾ هر آئٽم خود بخود نمبرنگ سان اچي ٿو.
– *`<ul>`* (Unordered List) ۾ هر آئٽم هڪ بلٽ پوائنٽ سان اچي ٿو.
– *`<dl>`* (Description List) ۾ هر آئٽم هڪ عنوان ۽ ان جي وضاحت سان ڏيکاريو ويندو آهي.
نتيجو:
هن قسم جي لسٽ ٽيگس کي استعمال ڪندي، توهان ويب پيج تي معلومات ترتيب ڏيڻ، ايجاد ڪرڻ ۽ ٻين ڊيزائنن ۾ ڪم آڻي سگهو ٿا. اهي لسٽون اڪثر تعليمي، تجارتي ۽ معلوماتي مواد ۾ استعمال ٿينديون آهن.
*Nested Lists* (نيسٽڊ لسٽس) هڪ قسم جي لسٽون آهن جتي هڪ لسٽ (ordered يا unordered) ٻئي لسٽ اندر رکيل هوندي آهي. ان جو مطلب آهي ته هڪ لسٽ ٻئي لسٽ جي اندر موجود آهي.
*نيسٽڊ لسٽ ڇا آهي؟* ويب ڊولپمينٽ ڪورس ڪلاس 5
نيسٽڊ لسٽ ۾، هڪ لسٽ جو آئٽم هڪ ٻي لسٽ ۾ موجود ٿي سگهي ٿو. اهو عموماً تبديلي يا ضمني معلومات ڏيکارڻ لاءِ استعمال ٿيندو آهي. انهن لسٽن جو مقصد مواد کي وڌيڪ منظم ۽ ترتيب ڏيڻ ۾ مدد ڏيڻ آهي.
*نيسٽڊ لسٽ جو استعمال*
– جڏهن توهان ڪنهن موضوع جو تفصيل ٻڌائڻ چاهيو ٿا.
– جڏهن هڪ لسٽ جو آئٽم ٻئي لسٽ ۾ موجود ٿي سگهي ٿو، جهڙوڪ ترتيب ڏيڻ يا بغير ترتيب جي آئٽم.
*HTML ۾ نيسٽڊ لسٽ ڪيئن ٺاهيندا آهن؟*
نيسٽڊ لسٽ ٺاھڻ لاءِ هڪ لسٽ ٽيگ (مثال: `<ul>` يا `<ol>`) جو آئٽم (`<li>`) ۾ ٻي لسٽ رکڻ لاءِ هڪ ٻئي `<ul>` يا `<ol>` ٽيگ استعمال ڪندا آهيون.
*مثال:*
1. *نيسٽڊ ان آرڊر لسٽ (Ordered List):* ويب ڊولپمينٽ ڪورس ڪلاس 5
“`html
<ol>
<li>پهرين قدم</li>
<li>ٻيو قدم
<ol>
<li>فرسٽ سب اسٽپ</li>
<li>سکنڊ سب اسٽپ</li>
</ol>
</li>
<li>ٽيون قدم</li>
</ol>
“`
*نتيجو:*
1. پهرين قدم
2. ٻيو قدم
1. فرسٽ سب اسٽپ
2. سکنڊ سب اسٽپ
3. ٽيون قدم
2. *نيسٽڊ ان ان آرڊر لسٽ (Unordered List):* ويب ڊولپمينٽ ڪورس ڪلاس 5
“`html
<ul>
<li>آئون
<ul>
<li>بندوبست</li>
<li>انعام</li>
</ul>
</li>
<li>تون</li>
<li>هن</li>
</ul>
“`
*نتيجو:*
– آئون
– بندوبست
– انعام
– تون
– هن
*نيسٽڊ لسٽن جو استعمال ڪٿي ٿيندو آهي؟*
– ويب سائيٽن ۾ استعمال ڪندڙ مواد کي ترتيب ڏيڻ لاءِ.
– معلومات يا هدايتن کي وڌيڪ واضح ۽ منظم انداز ۾ پيش ڪرڻ لاءِ.
– هدايتن، چيڪ لسٽن، ۽ مختلف قدم ٻڌائڻ لاءِ استعمال ٿيندو آهي.
*خلاصو:* ويب ڊولپمينٽ ڪورس ڪلاس 5
نيسٽڊ لسٽ هڪ طاقتور اوزار آهي جنهن سان معلومات کي ترتيب ڏيڻ ۽ وڌيڪ جامع بنائڻ ۾ مدد ملندي آهي. HTML ۾ ان کي استعمال ڪندي، توهان هڪ لسٽ ۾ ٻئي لسٽ رکڻ جو ڪم ڪري سگهو ٿا.
HTML ۾ *`<ol>`* (Ordered List) ٽيگ ۾ *`type`* ايٽربيٽ مختلف ترتيب جي طريقي لاءِ استعمال ڪيو ويندو آهي. هتي سڀني *`type`* جا امڪاني قدر آهن، جيڪي لسٽ آئٽمز کي مختلف انداز ۾ ترتيب ڏيڻ لاءِ استعمال ٿين ٿا.
`type` ايٽربيٽ جا امڪاني قدر:
1. *`type=”1″`*:
– نمبرنگ جي لاءِ، جتي آئٽمز کي *1، 2، 3* سان ترتيب ڏنو ويندو آهي.
– *مثال*:
“`html
<ol type=”1″>
<li>پهرين ڪم</li>
<li>ٻيو ڪم</li>
<li>ٽيون ڪم</li>
</ol>
“`
2. *`type=”A”`*: ويب ڊولپمينٽ ڪورس ڪلاس 5
– انگريزي اکرن ۾ (اوپر case)، جتي آئٽمز کي *A، B، C* سان ترتيب ڏنو ويندو آهي.
– *مثال*:
“`html
<ol type=”A”>
<li>پهرين ڪم</li>
<li>ٻيو ڪم</li>
<li>ٽيون ڪم</li>
</ol>
“`
3. *`type=”a”`*:
– انگريزي اکرن ۾ (ننڍا case)، جتي آئٽمز کي *a، b، c* سان ترتيب ڏنو ويندو آهي.
– *مثال*:
“`html
<ol type=”a”>
<li>پهرين ڪم</li>
<li>ٻيو ڪم</li>
<li>ٽيون ڪم</li>
</ol>
“`
4. *`type=”I”`*:
– رومن انگن ۾ (اوپر case)، جتي آئٽمز کي *I، II، III* سان ترتيب ڏنو ويندو آهي.
– *مثال*:
“`html
<ol type=”I”>
<li>پهرين ڪم</li>
<li>ٻيو ڪم</li>
<li>ٽيون ڪم</li>
</ol>
“`
5. *`type=”i”`*:
– رومن انگن ۾ (ننڍا case)، جتي آئٽمز کي *i، ii، iii* سان ترتيب ڏنو ويندو آهي.
– *مثال*:
“`html
<ol type=”i”>
<li>پهرين ڪم</li>
<li>ٻيو ڪم</li>
<li>ٽيون ڪم</li>
</ol>
“`
نتيجو:
*`type`* ايٽربيٽ سان، توهان مختلف قسم جي لسٽ ترتيب ٺاهي سگهو ٿا:
– *`type=”1″`*: نمبرنگ (123)
– *`type=”A”`*: وڏا انگريزي اکر (A, B, C)
– *`type=”a”`*: ننڍا انگريزي اکر (a, b, c)
– *`type=”I”`*: وڏا رومن انگ (I, II, III)
– *`type=”i”`*: ننڍا رومن انگ (i, ii, iii)
توهان پنهنجي لسٽ کي مناسب ترتيب ڏيڻ لاءِ ڪنهن به ٽائپ کي منتخب ڪري سگهو ٿا.
1. *سرڪل لسٽ*:
“`html
<ul style=”list-style-type: circle;”>
<li>پهريون ڪم</li>
<li>ٻيو ڪم</li>
<li>ٽيون ڪم</li>
</ul>
“`
2. *چورس لسٽ*:
“`html
<ul style=”list-style-type: square;”>
<li>پهريون ڪم</li>
<li>ٻيو ڪم</li>
<li>ٽيون ڪم</li>
</ul>
“`
3. *ڊسڪ لسٽ (ڊفالٽ)*:
“`html
<ul style=”list-style-type: disc;”>
<li>پهريون ڪم</li>
<li>ٻيو ڪم</li>
<li>ٽيون ڪم</li>
</ul>
“`
*خلاصو*:
– HTML5 ۾، *`<ul>`* ٽيگ جي *`type`* ايٽريبيوٽ کي استعمال ڪرڻ ختم ڪيو ويو آهي.
– ان جي جڳهه تي، *CSS* سان *list-style-type* جي مدد سان مختلف *بلٽ لسٽ* نقطن جا اسٽائل (`circle`, `square`, `disc`) ترتيب ڏئي سگهجن ٿا.
