" شرح عمل القوائم في لغة HTML "
اولا يجب ان تعلم ان هناك 3 انواع من القوائم يمكن ادراجها في صفحة HTML
وهي قوائم تكتب بوسم UL واخري تكتب بوسم OL واخري تكتب بوسم DL
بالنسبة للنوع الاول والثاني من القوائم وهم UL و OL
هما تقريبا نفس الشكل واخلاتفهم بسيط جدا
نبدا معا بشرح القوائم UL و OL
UL - هي اختصار لكلمة Unordered List
OL - اختصار لكلمة Ordered List
وكما هو واضح من معناها فالنوع الاول يعني ان القوائم التي سيتم انشائها باستخدام وسم ul ستكون غير مرقمه
والنوع الثاني يعني ان القوائم التي سيتم انشائها باستخدام وسم ol ستكون مرقمه ترقيم تصاعدي
نبدا بشرح القوائم المرقمه OL
وسم OL هو وسم زوجي بطبعه لان هناك بيانات سوف تكتب بداخله
ونقوم بكتابة العناصر المراد ادراجها بالقائمه داخل الوسم عن طريقة وسم LI لكل عنصر يضاف داخل القائمه
للتوضيح اكثر دعونا نقوم بعمل مثال عملي
الشكل العام للكود
<ol>
<li>Mona</li>
<li>Mayar</li>
<li>Bilal</li>
<li>Rody</li>
</ol>
كما نلاحظ من الشكل السابق ان وسم ol هو وسم للتعريف بالقائمه بشكل عام
لاكن وسم li هو وسم للتعريف بكل عنصر يتم كتابته داخل القائمه وهو وسم زوجي كما هو موضح وليس فردي
عند تطبيق المثال السابق وعرضه علي المتصفح سنجد النتيجه كما بالشكل التالي
النتجية:
Mona.1
2.Mayar
3.Bilal
4.Rody
كما لاحظتم تم عمل قائمه مرقمه بشكل تلقائي وذلك لاننا كتبنا وسم القوائم OL
تعالوا نكتب قائمه اخري ولاكن هذه المره باستخدام وسم UL
الشكل العام للكود
<ul>
<li>Mona</li>
<li>Mayar</li>
<li>Bilal</li>
<li>Rody</li>
</ul>
وعند تطبيق المثال السابق وعرضه علي المتصفح سنجد النتيجه كما يلي
النتجية:
Mona.1
2.Mayar
3.Bilal
4.Rody
ملاحظه هامه
يمكننا وضع قائمه داخل قائمه بمعني ان نجعل عنصر من عناصر القائمه هو بداية قائمه جديده تنبثق منه
شاهدوا المثال التالي لتتضح لكم الصورة
الكود عند كتابته في النوت باد
<ol>
<li>Mona</li>
<li>Mayar</li>
<ul>
<li> like </li>
<li> comment </li>
</ul>
<li>Bilal</li>
<li>Rody</li>
</ol>
النتيجة عند عرضها علي المتصفح
النتجية:
Mona.1
2.Mayar
.like
.comment
3.Bilal
4.Rody
وهكذا يمكنك عمل قوائم فرعيه كما تشاء
دعونا ننتقل الي النوع الاخير من القوائم وهي القوائم التشعبية
وهي القائمه التي تعد من خلال الوسم dl
dl - اختصار لكلمة definition list اي القائمه التعريفية
وكما هو واضح من معناها فهي عباره عن قائمه بها عناصر رئيسيه ( المصطلح ) وعناصر فرعيه ( التعريف )
الكود العام لهذا النوع من القوائم
<dl>
<dt>HTML</dt>
<dd>Hyper Text Markup Language</dd>
<dt>LOL</dt>
<dd>Laughing Out Loud</dd>
</dl>
اولا يجب ان تعلم ان هناك 3 انواع من القوائم يمكن ادراجها في صفحة HTML
وهي قوائم تكتب بوسم UL واخري تكتب بوسم OL واخري تكتب بوسم DL
بالنسبة للنوع الاول والثاني من القوائم وهم UL و OL
هما تقريبا نفس الشكل واخلاتفهم بسيط جدا
نبدا معا بشرح القوائم UL و OL
UL - هي اختصار لكلمة Unordered List
OL - اختصار لكلمة Ordered List
وكما هو واضح من معناها فالنوع الاول يعني ان القوائم التي سيتم انشائها باستخدام وسم ul ستكون غير مرقمه
والنوع الثاني يعني ان القوائم التي سيتم انشائها باستخدام وسم ol ستكون مرقمه ترقيم تصاعدي
نبدا بشرح القوائم المرقمه OL
وسم OL هو وسم زوجي بطبعه لان هناك بيانات سوف تكتب بداخله
ونقوم بكتابة العناصر المراد ادراجها بالقائمه داخل الوسم عن طريقة وسم LI لكل عنصر يضاف داخل القائمه
للتوضيح اكثر دعونا نقوم بعمل مثال عملي
الشكل العام للكود
<ol>
<li>Mona</li>
<li>Mayar</li>
<li>Bilal</li>
<li>Rody</li>
</ol>
كما نلاحظ من الشكل السابق ان وسم ol هو وسم للتعريف بالقائمه بشكل عام
لاكن وسم li هو وسم للتعريف بكل عنصر يتم كتابته داخل القائمه وهو وسم زوجي كما هو موضح وليس فردي
عند تطبيق المثال السابق وعرضه علي المتصفح سنجد النتيجه كما بالشكل التالي
النتجية:
Mona.1
2.Mayar
3.Bilal
4.Rody
كما لاحظتم تم عمل قائمه مرقمه بشكل تلقائي وذلك لاننا كتبنا وسم القوائم OL
تعالوا نكتب قائمه اخري ولاكن هذه المره باستخدام وسم UL
الشكل العام للكود
<ul>
<li>Mona</li>
<li>Mayar</li>
<li>Bilal</li>
<li>Rody</li>
</ul>
وعند تطبيق المثال السابق وعرضه علي المتصفح سنجد النتيجه كما يلي
النتجية:
Mona.1
2.Mayar
3.Bilal
4.Rody
ملاحظه هامه
يمكننا وضع قائمه داخل قائمه بمعني ان نجعل عنصر من عناصر القائمه هو بداية قائمه جديده تنبثق منه
شاهدوا المثال التالي لتتضح لكم الصورة
الكود عند كتابته في النوت باد
<ol>
<li>Mona</li>
<li>Mayar</li>
<ul>
<li> like </li>
<li> comment </li>
</ul>
<li>Bilal</li>
<li>Rody</li>
</ol>
النتيجة عند عرضها علي المتصفح
النتجية:
Mona.1
2.Mayar
.like
.comment
3.Bilal
4.Rody
وهكذا يمكنك عمل قوائم فرعيه كما تشاء
دعونا ننتقل الي النوع الاخير من القوائم وهي القوائم التشعبية
وهي القائمه التي تعد من خلال الوسم dl
dl - اختصار لكلمة definition list اي القائمه التعريفية
وكما هو واضح من معناها فهي عباره عن قائمه بها عناصر رئيسيه ( المصطلح ) وعناصر فرعيه ( التعريف )
الكود العام لهذا النوع من القوائم
<dl>
<dt>HTML</dt>
<dd>Hyper Text Markup Language</dd>
<dt>LOL</dt>
<dd>Laughing Out Loud</dd>
</dl>