7 :XHTML (القوائم) .

بسم الله الرحمن الرحيم و الحمد لله و الصلاة و السلام على أشرف المرسلين محمد صلى الله عليه و سلم.
أما بعد
رأينا في القسم السابق من هذا الدرس كيفية تنسيق النص و كيفية إنشاء روابط بالإضافة إلى وضع الصور، و كلها من أساسيات إنشاء صفحات الويب، و في هذا القسم سنغوص قليلا في بحر ال XHTML (إن لم تكن تعرف السباحة فلا تغص معنا)، سنرى كيفية إنشاء القوائم و الجداول و الإستمارات.
في هذا الجزء سنبدأ بالقوائم و هي من أهم الأشياء في لغة ال XHTML (في الحقيقة كل شيء مهم، ما رأيناه و ما سنراه).
و لها أدوار كثيرة و من أهمها، إنشاء قائمة لتصفح الموقع بسهولة.
كيف؟.
هذا ما سنراه قريبا

القوائم الغير مرقمة
هي قوائم لا تهتم بترتيب الأشياء و مثال لهذه القوائم :
• Google
• Altavista
• Bing
• Dogpile
• …
إنشاء مثل هذه القوائم يتطلب استعمال وسمين الأول هو <ul> و الثاني هو <li> و هما زوجيان بحيث نضع الوسم <li> داخل الوسم <ul>.
و لكن أين سنضع عناصر القائمة؟.
بالنسة للعناصر فهي تكتب بين الوسمين <li> و </li> بهذا الشكل.
كود:XHTML
<li>Google</li>
و ها هو مثال لكيفية إنشاء قائمة كاملة :
كود:XHTML

<ul>
<li>Google</li>
<li>Altavista</li>
<li>Bing</li>
<li>Dogpile</li>
<li>…</li>
</ul>

شاهد المثال
نضع أولا الوسم <ul> ثم نكتب العناصر بين الوسمين <li> و </li> ثم نغلق القائمة.
ملاحظة : كل عنصر يبدء بالوسم <li> و ينتهي بالوسم </li>.
إذا لم يعجبك شكل الدائرة السوداء التي توجد قبل كل عنصر يمكنك تغييرها بإستعمال الخاصية type و التي تكتب داخل الوسم <ul> و هي تأخد القيم التالية :
disc و هي عبارة عن دوائر سوداء.
circle و هي عبارة عن دوائر فارغة.
square عبارة عن مربعات سوداء.
صحيح أنها ليست كثيرة و لكن عندما سنصل إلى درس ال CSS سنرى أنه يمكننا وضع أي شكل نريده.
مثال بإستعمال الخاصية type :
كود:XHTML

<ul type="circle">
<li>Google</li>
<li>Altavista</li>
</ul>

<ul type="square">
<li>Bing</li>
<li>Dogpile</li>
<li>…</li>
</ul>

شاهد المثال
بعد رؤية القوائم الغير مرقمة نمر الآن إلى القوائم المرقمة.

القوائم المرقمة.
و هي قوائم عل هذا الشكل :
1. Google
2. Altavista
3. Bing
4. Dogpile
5. …
هي قوائم مثل سابقتها بإستثناء ترقيم العناصر بحيث تعطيها طابع التراتبية.
من أجل إنشاء قوائم مرقمة نستعمل بدل الوسم <ul> الوسم <ol> بحيث يصبح الكود السابق على الشكل التالي :
كود:XHTML

<ol>
<li>Google</li>
<li>Altavista</li>
<li>Bing</li>
<li>Dogpile</li>
<li>…</li>
</ol>

شاهد المثال
و كذلك باستعمال الخاصية type يمكن أن نغير نوع الأرقام المستعملة للترتيب فيمكننا إستعمال الأرقام الرومانية و ذلك بإعطاء الحرف I كقيمة للخاصية type أو i.
و يمكننا إستعمال الحروف اللاثينية أيضا في الترتيب مثل (a – b - c – d …).
نلخص القيم التي يمكن للخاصية type أن تأخدها هي : I – i – A – a.
كود:XHTML

<ol type="I">
<li>Google</li>
<li>Altavista</li>
<li>Bing</li>
<li>Dogpile</li>
<li>…</li>
</ol>

<ol type="a">
<li>Google</li>
<li>Altavista</li>
<li>Bing</li>
<li>Dogpile</li>
<li>…</li>
</ol>

شاهد المثال
يمكن أيضا تحديد الرقم الذي تريد أن تبدء ترتيب القائمة به، و ذلك باستخدام الخاصية start.
مثال نريد أن نبدء القائمة السابقة ب الرقم 5.
كود:XHTML

<ol start="5">
<li>Google</li>
<li>Altavista</li>
<li>Bing</li>
<li>Dogpile</li>
<li>…</li>
</ol>

شاهد المثال
ملاحظة : باستخدام الخاصية value و التي تكتب داخل الوسم <li> يمكنك أن تحدد الرقم الجديد الذي تريد البدء منه.
مثال نريد أن نضع قائمة تبدء من 2 إلى 4 ثم تنتقل إلى 7 لتنتهي في 9.
كود:XHTML

<ol start="2">
<li>Google</li>
<li>Altavista</li>
<li>Bing</li>
<li value="7">Dogpile</li>
<li>Ask</li>
<li>…</li>
</ol>

شاهد المثال
بعد رؤية كيفية إنشاء القوائم المرقمة سنرى كيفية إنشاء قوائم متداخلة بمعنى قائمة وسط قائمة.

قوائم متداخلة
القوائم المتداخبة هي عبارة عن قائمة تتضمن قائمة أو أكثر.
و إذا كنت قد قرأت ما سبق من هذا الجزء بشكل جيد فلن تجد صعوبة في إنشائها إن شاء الله.
نريد أن ننشأ قائمة بهذا الشكل :
1. Search Engine
• Google
• Yahoo
• Msn
2. Video Online
• Youtube
• DailyMotion
• Google Video
أولا يجب أن ننشأ القائمة الرئيسية و هي تتكون من Search Engine و Video Online
كود:XHTML
<ol>
<li>Search Engine</li>
<li>Video Online</li>
</ol>
شاهد المثال
بعد ذلك نقوم بإضافة القوائم الفرعية بين وسمي كل عنصر من عناصر القائمة الرئيسية بهذا الشكل.
كود:XHTML

<ol>
<li>Search Engine
<ul>
<li>Google</li>
<li>Yahoo</li>
<li>Msn</li>
</ul>
</li>
<li>Video Online
<ul>
<li>Youtube</li>
<li>DailyMotion</li>
<li>Video Google</li>
</ul>
</li>
</ol>

شاهد المثال
الأمر بسيط جدا و يحتاج فقط إلى القليل من التركيز.
ملاحظة : يمكنك الدمج بين القوائم المرقمة و الغير مرقمة، و هناك قوائم أكثر تعقيدا لكنها محكومة بنفس المبدأ، لذا فالتركيز هو سيد الموقف .

قوائم التعريفات (نادرة الإستعمال).
تعتبر هذه القوائم من النوادر و هي تستعمل لتحديد تعريفات و لم تعد مستعملة بشكل كبير بل أكاد أجزم أنه لم تعد مستعملة بالمرة (هذا إن كانت معروفة أصلا).
و لكن أحببت أن أخبركم عنها من باب العلم بالشيء.
و لإنشاء قائمة للتعريفات نحتاج إلى ثلاث وسوم و هي : <dl> و هو الذي يضم جميع عناصر القائمة، ثم <dt> و يحمل إسم الكلمة التي نريد تعريفها، و الأخير هو <dd> الذي نضع فيه التعريف.
طبعا المثال سيكون أوضح.
كود:XHTML

<dl>
<dt>Search Engine</dt>
<dd>websites that help us on searching some topics in the web</dd>
<dt>Video Online</dt>
<dd>websites that help up on watching some video on the web</dd>
</dl>

شاهد المثال
ملاحظة : هذه القوائم لم تعد مستعملة و لا يهم إن تذكرتموها أم لا.
القائمة الرئيسية للموقع
كما قلت في مقدمة الجزء القوائم تساعدنا على إنشاء قائمة رئيسية للموقع و ربما الغالبية الساحقة من المواقع تعتمد عليها، و هناك طرق أخرى لإنشاء القائمة الرئيسة للموقع سنتعرف عليها لاحقا في الدرس.
من إجل إنشاء قائمة رئيسية للموقع نحتاج إلى معرفة كيفية إنشاء روابط (و من لا يعرف أنصحة بقراءة الجزء المتعلق بالروابط). بالإضافة إلى كيفية إنشاء قائمة غير مرقمة و هذا ما رأيناه في بداية هذا الجزء.
كيف ذلك؟ و ما علاقة الروايط بالقوائم؟.
ربما لم أخبركم أنه يمكن أن نجعل من عناصر القوائم روابط، و بلمسة خاطفة نزيل الدوائر السوداء التي توجد قبل كل عنصر من القائمة، و بهذا نحصل على قائمتنا المنشودة.
كود:XHTML

<ul style="list-style:none">
<li><a href="index.html">Home</a></li>
<li><a href="forum.html">Forum</a></li>
<li><a href="support.html">Support</a></li>
<li><a href="contact.html">Contact</a></li>
<li><a href="about_us.html">About us</a></li>
</ul>

شاهد المثال
كما هو مبين في المثال قمنا بإنشاء قائمة رئيسية للموقع تتكون من الصفحات index.html و forum.html و support.html و contact.html و about_us.html.
ملاحظة : يمكنك جعل القائمة تبدو أجمل بإستعمال الوسم <font> الذي رأيناه في الجزء الخاص بتنسيق النصوص.
ملاحظة : الخاصية style من أهم الخاصيات في ال XHTML و هي مرتبطة بال CSS و سنتعرف عليها لاحقا في درس ال CSS.
و إلى أن نصل إلى الدرس الخاص بال CSS و الذي سيجعل من صفحاتكم تحفا (و أنا لا أبالغ هنا) نبقى مع ال XHTML و سنرى في الجزء القادم الجزء الأول من كيفية إنشاء الجداول.
إلى ذلك الحين أستودعكم الله الذي لا تضيع ودائعه، و السلام عليكم و رحمة الله و بركاته.