دورة تعلم لغة HTML
في متابعة لسلسلة دروس دورة تعلم لغة HTML
شرحنا في الدرس السابق "الدرس الخامس"
بعض الوسوم الهامه وطريقة استخدامها ووظائفها وتاثيرها علي الصفحة
وكان من هذه الوسوم وسم CENTER ووسم PRE ووسم TT ووسوم H1:H6
وسنتطرق في هذا الدرس علي شرح طريقة عمل القوائم في لغة HTML بجميع حالاتها وبالطريقة الصحيحه
الدرس السادس
" شرح عمل القوائم في لغة 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>
<li>Mona</li>
<li>Mayar</li>
<li>Bilal</li>
<li>Rody</li>
</ol>
كما نلاحظ من الشكل السابق ان وسم ol هو وسم للتعريف بالقائمه بشكل عام
لاكن وسم li هو وسم للتعريف بكل عنصر يتم كتابته داخل القائمه وهو وسم زوجي كما هو موضح وليس فردي
عند تطبيق المثال السابق وعرضه علي المتصفح سنجد النتيجه كما بالشكل التالي
كما لاحظتم تم عمل قائمه مرقمه بشكل تلقائي وذلك لاننا كتبنا وسم القوائم OL
تعالوا نكتب قائمه اخري ولاكن هذه المره باستخدام وسم UL
الشكل العام للكود
<ul>
<li>Mona</li>
<li>Mayar</li>
<li>Bilal</li>
<li>Rody</li>
</ul>
<li>Mona</li>
<li>Mayar</li>
<li>Bilal</li>
<li>Rody</li>
</ul>
وعند تطبيق المثال السابق وعرضه علي المتصفح سنجد النتيجه كما يلي
كما لاحظتم من خلال استخدام الوسم UL
تم عمل قائمه ولاكنها غير مرقمه "بل قائمه منقوطه"
لاكننا من خلال هذا الوسم يمكننا ان نتحكم في الشكل الذي سيظهر عليه بدلا من الدائرة الموجوده في المثال السابق
تابع معي
ان اردنا تغيير النقط مثلا الي اشكال اخري
هناك عده اشكال اخري يمكن ترقيم القائمه بها واليكم ملخص بهذه الاشكال
لاحظ في المثال السابق
الوسم li هو وسم زوجي وليس فردي
ملاحظه هامه
يمكننا وضع قائمه داخل قائمه بمعني ان نجعل عنصر من عناصر القائمه هو بداية قائمه جديده تنبثق منه
يمكننا وضع قائمه داخل قائمه بمعني ان نجعل عنصر من عناصر القائمه هو بداية قائمه جديده تنبثق منه
شاهدوا المثال التالي لتتضح لكم الصورة
الكود عند كتابته في النوت باد
<ol>
<li>Mona</li>
<li>Mayar</li>
<ul>
<li> like </li>
<li> comment </li>
</ul>
<li>Bilal</li>
<li>Rody</li>
</ol>
<li>Mona</li>
<li>Mayar</li>
<ul>
<li> like </li>
<li> comment </li>
</ul>
<li>Bilal</li>
<li>Rody</li>
</ol>
النتيجة عند عرضها علي المتصفح
وهكذا يمكنك عمل قوائم فرعيه كما تشاء
دعونا ننتقل الي النوع الاخير من القوائم وهي القوائم التشعبية
وهي القائمه التي تعد من خلال الوسم dl
dl - اختصار لكلمة definition list اي القائمه التعريفية
وكما هو واضح من معناها فهي عباره عن قائمه بها عناصر رئيسيه ( المصطلح ) وعناصر فرعيه ( التعريف )
الكود العام لهذا النوع من القوائم
<dl>
<dt>HTML</dt>
<dd>Hyper Text Markup Language</dd>
<dt>LOL</dt>
<dd>Laughing Out Loud</dd>
</dl>
<dt>HTML</dt>
<dd>Hyper Text Markup Language</dd>
<dt>LOL</dt>
<dd>Laughing Out Loud</dd>
</dl>
بهذا نكون قد انتهينا من درس القوائم في لغة HTML
وفي الدرس القادم باذن الله تعالي "الدرس السابع" سنقوم بشرح كيفية ادراج صور وصلات تشعبيه في صفحة HTML
