الدرس (18) تعلم html : القوائم

بسم الله الرحمن الرحيم

القوائم من الأشياء المهمة و المستخدمة كثيراً في أغلب المواقع فما هي و كيف نصنعها ؟

بدايةً القوائم من خلالها يمكن وضع عدة فقرات في ترتيب معين و من خلالها يمكن ان ننظم الموقع و نعطيه جمالية

مثال على حديثي انظر لهذه الصورة

كما كان مكتوب وضعت جملة desktop computer components في أول سطر و عند كتابتها ب html حددتها بالوسم <h3> و تحته مباشرة كتبت القائمة و التي هي موضوع درسنا , الجملة السابقة للتوضيح معناها ( مكونات الحاسب المكتبي ) و تحتها وضعت قائمة بالمكونات

الآن سأريك ما كتبت من وسوم لفعل هذه القائمة

<!DOCTYPE html> <html> <head> </head> <body> <h3> Desktop computer components</h3> <ul> <li>screen</li> <li>Mouse</li> <li>box</li> <li>keyboard</li> <li>speaker</li> </ul> </body> </html>

عملنا هو في الجزء ال body
في أول سطر فيه كتبت العبارة التوضيحية موضوعة بين وسم <h3> و السطر الثاني و ما بعده إلى نهاية ال body هي القائمة
الوسمين الأساسيين في القائمة السابقة هما

<ul></ul>

داخلهما تكون سطور القائمة او مكونات القائمة , كل سطر في القائمة يوضع بين الوسمين

<li></li>

في السطر الأول كتبت screen و الثاني mouse و هكذا لتكون النتيجة كما في الصورة في بداية الدرس
يوجد أيضاً شيء مشابه للقائمة السابقة لكن تحتوي على ترتيب أكثر فالذي سوف نفعله ان نغير الوسمين الأساسيين من

<ul></ul>

إلى

<ol></ol>

و ستكون النتيجة هكذا

كما تشاهدون أن القائمة أصبحت مرتبة على ترتيب معين وهو الأرقام , إذا أردنا أن تكون بدل الارقام أحرف مثلاً a b c d يعني الترتيب الأبجدي للأحرف الانجليزية هكذا

يمكن عمل كما في الصورة السابقة عن طريق أضافة الكود

type="a"

داخل الوسم <ol> بعد ol مباشرة بعد ترك مسافة بينهما لتكون النتيجة على النحو التالي

<ol type="a">

يمكنك أيضاً ترتيب القائمة بحسب العد الروماني مثل هذا الشكل

يمكن عمل المثال السابق بتغيير الحرف a في

<ol type="a">

إلى الحرف i
أيضاً يوجد ترتيب آخر مثل هذا

كما كان واضح لنا أن الأرقام بدأت من الخمسة إلى الواحد أي أنه وضع ترتيب بحيث تكون الارقم موضوعة في العكس ففي الحالة الطبيعية كان الترتيب يبداً من الواحد إلى الخمسة فالآن حصل أنه من خمسة إلى واحد هذا الشيء يمكن عمله عند أضافة كلمة reversed داخل الوسم <ol> بعد ol بعد ترك مسافة مثل الشيء هذا

<ol reversed>

كما قلنا أن الترتيب بأستخدام الوسم <ol> تكون نتيجته مثل هذا الشكل

لكن إذا أردنا الترتيب من رقم معي مثلاً من الرقم 25 وبعده 26 و و و ... فيمكن عن طريق أضافة الكود

start="25"

بعد ol في الوسم <ol> بعد ترك مسافة و يمكن تغيير الرقم 25 إلى الذي نريده , الوسم <ol> سيكون هكذا

<ol start="25">

والنتيجة ستكون بعد تطبيقه على مثال درسنا

نأتي الآن إلى جزء قد يفيد كثيراً والذي هو هل يمكن وضع قائمة داخل قائمة ؟

نعم يمكنك

كيف ذلك ؟

كما قلت يمكن وضع قائمة داخل قائمة أيضاً يمكن وضع قائمة داخل قائمة داخل قائمة و هكذا
يوجد لدينا نوعين من القوائم التي درسناها والتي هي القوائم المرتبة و القوائم الغير المرتبة أو التي لا تحتوي على ترتيب معين , القوائم المرتبة هي بين الوسمين
<ol></ol>
أما النوع الثاني هو
<ul></ul>
وكما قلنا ونزيد يمكن وضع قائمة مرتبة داخل قائمة غير مرتبة أو قائمة غير مرتبة داخل قائمة مرتبة مثلاً أنظرإلى هذا الشكل

كما موضح في الصورة التي سبقت أني قلت ال screen وضعت نوعين hd و full hd (الأشياء التي أكتبها على سبيل المثال ) و mouse نوعين wire و wireless , هكذا أعني بقائمة داخل قائمة ويمكن عمل قائمة داخل القائمة الفرعية كما تحدثت
الآن ناتي إلى كيف فعلت ذلك القائمة السابقة الأساسية هي تبدأ ب الوسم <ol> وتنتهي ب الوسم </ol> لأنها قائمة مرتبة فالقائمة الأولى داخل السطر الأول و القائمة الثانية وضعت داخل السطر الثاني , وللتوضيح الوسوم التي أستعملتها هي

<h3>Desktop computer components</h3>

<ol>

<li>screen

<ul>

<li>hd</li>

<li>full hd</li>

</ul>

</li>

<li>Mouse

<ol>

<li>Wire</li>

<li>Wireless</li>

</ol>

</li>

<li>box</li>

<li>keyboard</li>

<li>speaker</li>

</ol>

كما سبق السطر الأول في القائمة الرئيسية و الذي وسومه لونها أزرق أعني وسم البداية و وسم النهاية وبعد كلمة screen وضعت القائمة الفرعية (التي هي قائمة غير مرتبة ) للسطر الأول في القائمة الرئيسية الممتدة من الوسم <ol> التي باللون الاحمر إلى الوسم </ol> التي أيضاً باللون الاحمر , أنظر أن القائمة الفرعية معلمة باللون الزهري أقصد وسم البداية و وسم النهاية في القائمة الفرعية
ملاحظة : لم يتم حذف وسم النهاية في السطر الأول من القائمة الرئيسة في المثال السابق بل حافظنا عليه و قد لونته لك باللون الأزرق
كما لأحظنا و كما شرحنا كيفية وضع قائمة داخل قائمة فتحدثت كيف فعلت ذلك بالسطر الأول بالقائمة الرئيسية أيضاً وضعت قائمة في السطر الثاني من القائمة الرئيسية والذي علمته باللون الأخضر ولكن الأختلاف بين القائمة الفرعية الاولى و القائمة الفرعية الثانية أن القائمة الفرعية الأولى كانت قائمة فرعية غير مرتبة وكانت القائمة الرئيسية مرتبة أم القائمة الفرعية الثانية كانت مرتبة و هذا الذي اقصده أنه يمكن وضع قائمة مرتبة داخل قائمة غير مرتبة و العكس صحيح
وقلت أيضاً ان يمكن وضع قائمة داخل قائمة داخل قائمة مثل هذا الشكل

كما فعلت , انني وضعت قائمة للسطر الذي يحتوي على full hd و الوسوم المستعملة لعمل المثال السابق هي

<h3>Desktop computer components</h3>

<ol>

<li>screen

<ul>

<li>hd</li>

<li>full hd

<ul>

<li>30fps</li>

<li>60fps</li>

</ul>

</li>

</ul>

</li>

<li>Mouse

<ol>

<li>Wire</li>

<li>Wireless</li>

</ol>

</li>

<li>box</li>

<li>keyboard</li>

<li>speaker</li>

</ol>

الآن نأتي إلى آخر شي في هذا الدرس و الذي يعتبر من القوائم و يشبهه و يستعمل لوصف شيء معين أو لعرض خواص معينة و هكذا

الوسمين الرئيسين في هذا الأخير هم
<dl></dl>
داخلهما نضع القائمة التي لها وسوم معينة و يمكن وضع أكثر من قائمة
مثلاً ننشأ قائمة بهذا الشكل

الوسوم التي عملت هذا الشكل هي
<dl>
<dt>Computer Advantages</dt>
<dd>Way to communicate</dd>
<dd>Way to learn</dd>

</dl>
كما قلنا الوسمين الرئيسيين الذين سيحتويين على القوائم هم
<dl></dl>
داخلهما وضعت قائمة واحدة والتي عنوانها Computer Advantages (مزايا الحاسوب) , العنوان موضوع موضوع بين الوسمين
<dt></dt>
الوسمين السابقين يضع داخلهما عنوان القائمة أما كل من الجملتين Way to communicate و Way to learn هما عناصر القائمة و التين يوضعان بين الوسمين
<dd></dd>
القائمة السابقة يمكن أن نضيف قائمة بعدها لها عنوان و عناصر مثل هذه الصورة

الوسوم المستعمل هي

<dl>

<dt>Computer Advantages</dt>

<dd>Way to communicate</dd>

<dd>Way to learn</dd>

<dt>Advantages of the Internet</dt>

<dd>People gathered in one village</dd>

<dd>To learn</dd>

</dl>

و إلى الآن نكون قد أنتهينا من درس اليوم أن شاء الله تكون قد أستفدتو
أن شاء الله درس الجاي لح أشرحلكن النماذج و السلام عليكم و رحمة الله و بركاته