الصفحة الرئيسية
الصفحة الرئيسيه المرجع الكامل كتب وبرامج مجانية المنتدي  مواقع هامه

القوائم

القوائم وأنواعها

تحتوي لغة HTML على مجموعة من الوسوم الخاصة بتنظيم البيانات في قوائم وباستخدام عدة خيارات. وهناك نوعين من القوائم:

  1. أولهما المتسلسلة Ordered Lists.

  • وثانيهما القوائم غير المتسلسلة Unordered Lists

عند التعامل مع القوائم بنوعيهما نحتاج إلى وسوم خاصة بتحديد بداية ونهاية القائمة ووسوم تحدد بنود هذه القائمة.
بالنسبة للقوائم المتسلسلة نستخدم الوسوم

<OL> ... <‎/OL>

أما بالنسبة للقوائم غير المتسلسلة فنستخدم

<UL> ... <‎/UL>

ولتعيين كل بند من بنود القائمة نستخدم الوسم <LI> وهو وسم مفرد يكتب في بداية السطر الخاص بكل بند List Item.

 واليك المثال التالي علي القوائم المتسلسله

<OL>
 <LI>القاهرة
 <LI>الإسكندريه
 <LI>أسوان
 <LI>الأقصر
 <LI>الإسماعيليه
 <LI>السويس
 <‎/OL>

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

  1. القاهرة

  2. الإسكندريه

  3. أسوان

  4. الأقصر

  5. الإسماعيليه

  6. السويس

 وهذا مثال  علي القوائم غير المتسلسله

<UL>
 <LI>جامعة القاهرة
 <LI>جامعة الإسكندريه
 <LI>جامعة عين شمس
 <LI>جامعة الزقازيق
 <‎/UL>

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

  • جامعة القاهرة

  • جامعة الإسكندريه

  • جامعة عين شمس

  • جامعة الزقازيق

والخاصية الوحيدة التي تستخدم مع هذه الوسوم هي TYPE ووظيفتها تحديد شكل الرمز الظاهر مع بنود القائمة، وعادة تستخدم مع وسوم بداية القوائم <UL> أو <OL> وبذلك نحدد رمزاً واحداً لكل القائمة. ولكن نستطيع استخدامها أيضاً مع وسم البنود <LI> لإعطاء تحكم أكبر في مظهر القائمة من خلال تحديد رمز مختلف لكل بند.

فعند وضعها ضمن تعريف القوائم المتسلسلة تأخذ القيم: A, a, I, i التي تغير رموز الترقيم من الأرقام العادية الإفتراضية (والتي رمزها 1) إلى ترقيم باستخدام الأحرف اللاتينية الكبيرة أو الصغيرة، أو باستخدام الأرقام الرومانية كما ترى في الجدول التالي:

‎<OL TYPE="A">‎ ‎<OL TYPE="a">‎ ‎<OL TYPE="I">‎ ‎<OL TYPE="i">‎ <UL TYPE="circle">

<UL TYPE="square">

  1.  
  2.  
  3.  
  4.  
  5.  
  1.  
  2.  
  3.  
  4.  
  5.  
  1.  
  2.  
  3.  
  4.  
  5.  
  1.  
  2.  
  3.  
  4.  
  5.  
  • تكون
  • علي
  • شكل
  • دائره
  • تكون
  • علي
  • شكل
  • مربع

أنت ترى أن الرمز الموجود عند كل بند في القائمة هو عبارة عن نقطة سوداء يطلق عليها اسم Disc وهي المعرفة ضمناً في خاصية TYPE. لكن هناك رموز أخرى يمكن إظهارها وهي المربع square, والدائرة المفرغة circle

تغيير نقطة البدأ

بفرض أنك تريد أن تبدأ الترقيم برقم غير الواحد كل ما عليك هو أن تضع هذه الخاصيه كما بالصيغة التاليه وتحدد رقم البدأ الذي تريده

<OL START="5">

 ولإتمام الحديث عن القوائم، أذكر لك أن هناك وسوماً أخرى تستخدم لإنشاء القوائم غير المتسلسلة، وبنفس الطريقة المستخدمة مع <UL>...<‎/UL> وهذه الوسوم هي:

<DIR> ... <‎/DIR>
<MENU> ... <‎/MENU>

قوائم الشرح Definition Lists

هناك نوع خاص من القوائم يدعى قوائم الشرح أو التعريفات  وكما يدل الإسم تستخدم عندما نريد إدراج قائمة من المصطلحات يتبع كل واحد منها شرح أو تعليق. ونحتاج لإنشاء هذه القوائم إلى ثلاثة وسوم:
الأول <DL> ... <‎/DL> لتعريف بداية ونهاية القائمة.
والثاني <DT> ويوضع قبل كل مصطلح لتحديده، وهو وسم مفرد.
أما الثالث فهو <DD> وهو وسم الشرح أو التعليق وهو أيضا مفرد. ولنقم الآن بكتابة شيفرة القائمة السابقة

<DL>‎
‎<DT>HTML <DD>Hyper Text Markup Language‎
‎<DT>WWW <DD>World Wide Web‎
‎<DT>FTP <DD>File Transport Protocol‎
‎<DT>GIF <DD>Graphical Interchange Format‎
‎<DT>JPG, JPEG <DD>Joint Photographic Experts Group‎
‎<‎/DL>‎

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

‎ ‎

HTML
Hyper Text Markup Language‎ ‎
WWW
World Wide Web‎ ‎
FTP
File Transport Protocol‎ ‎
GIF
Graphical Interchange Format‎ ‎
JPG, JPEG
Joint Photographic Experts Group‎

 

الدرس التالي»»»

< الصفحة الرئيسيه | المرجع الكامل | النص >

 

المصدر العربي التعليمي للـHTML

¤  المحتويات 

البدايه هنا
أبدأ هنا ·
دروس سريعة للمبتدئين ·

الدروس المتخصصه
النص ·
الصور ·
الجداول ·
الأطر ·
النماذج ·

 
فهرس النص  ¤

> العناوين وحجم الخطوط
> أشكال وألوان الخطوط

> الرموز الخاصه

> الوصلات

> قائمة بجميع وسوم النص

> النص المتحرك

 

¤  Html4Arab صندوق الأدوات 

> إبحث في الموقع  Search


Html4Arab بحث المصدر العربي التعليمي لل HTML يأتيكم من [Atomz.com] بحث متقدم


أشترك في القائمة البريدية
لتحصل علي آخر آخبار
الموقع و التحديثات

أشترك إلغاء الإشتراك

> أخبر صديقك عن الموقع

هل أعجبت بموقعنا


أذن أضفنا إلي المفضله <


مستخدمين ال Netscape أضغط CTRL+D

 
" إعلانات "


برعاية شبكة هايل

^ أعلي^ للإعلان بالموقع اربط بموقعنا أتصل بنا

© 2002 Ahmed Salah