وفكرة هذه الدروس جاءت نتيجة لما لمسته خلال استخدامي لشبكة الإنترنت بشكل
عام، والبحث عن المواقع العربية فيها بشكل خاص. فعندما بدأت بتعلم تصميم
صفحات الإنترنت، لم يكن هناك مشكلة في الحصول على المصادر أو المواقع
التعليمية التي أحتاجها ومن خلال الإنترنت نفسها. لكن المشكلة هي دائماً في
الحصول على تلك المصادر بالصورة التي تتناسب واحتياجاتنا كمستخدمين عرب ....



<‎/BLOCKQUOTE>
<‎/BLOCKQUOTE>



وتكون النتيجة:


وفكرة هذه
الدروس جاءت نتيجة لما لمسته خلال استخدامي لشبكة الإنترنت بشكل عام، والبحث
عن المواقع العربية فيها بشكل خاص. فعندما بدأت بتعلم تصميم صفحات الإنترنت،
لم يكن هناك مشكلة في الحصول على المصادر أو المواقع التعليمية التي أحتاجها
ومن خلال الإنترنت نفسها. لكن المشكلة هي دائماً في الحصول على تلك المصادر
بالصورة التي تتناسب واحتياجاتنا كمستخدمين عرب ....



وبالطبع ليس شرطاً أن تستخدم هذا الوسوم مع الفقرات المقتبسة فقط. فأنا مثلاً
أضعها في بداية ونهاية كل صفحة من صفحات هذا الموقع. وبالتالي يظهر النص
بعيداً قليلاً عن حاشية الصفحة فهذا أفضل من أن يكون ملاصقاً لها وأجمل.
(مجرد وجهة نظر)

---

والآن تأمل هذا الشكل وحاول أن تستنتج كيف قمت بإعداده...!؟



A


B


C


D



E


F


G


H



I


J


K


L



M


N


O


P



Q


R


S


T



ربما توصلت إلى أني استخدمت عدداً كبيراً من وسوم الفراغات

‎&nbsp;‎
ونهاية السطر <BR>.
حسناً، إستنتاجك لا بأس به ولكنه ليس دقيقاً فأنا لم أستخدم أياً من هذه
الوسوم هنا. بل كل ما فعلته بعد إعداد هذا الشكل هو وضعه ضمن:

 
      ... 

وهما اختصار لكلمة

Preformated
أي المنسق مسبقاً. وبالفعل فقد احتفظ هذا الشكل بالتنسيق المسبق الذي تم
إعداده به. لكن تم تحويل الخط إلى خط موحد المسافات (راجع

الدرس السابق) ولو لم أقم بوضعه ضمن هذه الوسوم لكانت النتيجة كالتالي:



A B C


D E F G H I J K L M N O P Q R S T




لاحظ أن هذا الوسم يستخدم مع الفقرات التي لا نحتاج فيها إلى تنسيقات متعددة
للخطوط أو الألوان. بل فقط مع الفقرات العادية موحدة الخط والتنسيقات.

---

القوائم



تحتوي لغة

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

Ordered Lists.
واليك المثال التالي عليها




أسماء بعض المدن السورية :


1.


دمشق


2.


حلب


3.


حمص


4.


طرطوس


5.


اللاذقية


6.


دير الزور



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

Unordered Lists
وهذا مثال عليها




أسماء بعض الجامعات السورية

• 
  جامعة
  دمشق
  
• 
  جامعة
  حلب
  
• 
  جامعة
  تشرين
  
• 
  جامعة
  البعث
  

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



<OL>
... <‎/OL>








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



<UL>
... <‎/UL>








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

List Item.




إذن عندما قمت بإنشاء القوائم السابقة استخدمت الشيفرة التالية:

1. دمشق
   
2. حلب
   
3. حمص
   
4. طرطوس
   
5. اللاذقية
   
6. دير الزور
   <‎/OL>
   
   
   
   
   
   
   
   
   
   • جامعةدمشق
     
   • جامعة حلب
     
   • جامعة تشرين
     
   • جامعة البعث
     <‎/UL>
     
     
     
     والخاصية الوحيدة التي تستخدم مع هذه الوسوم هي
     
     TYPE
     ووظيفتها تحديد شكل الرمز الظاهر مع بنود القائمة، وعادة تستخدم مع وسوم
     بداية القوائم <UL>
     أو <OL>
     وبذلك نحدد رمزاً واحداً لكل القائمة. ولكن نستطيع استخدامها أيضاً مع وسم
     البنود <LI>
     لإعطاء تحكم أكبر في مظهر القائمة من خلال تحديد رمز مختلف لكل بند.
     
     
     
     
     فعند وضعها ضمن تعريف القوائم المتسلسلة تأخذ القيم:
     
     A, a, I, i
     التي تغير رموز الترقيم من الأرقام العادية الإفتراضية (والتي رمزها 1) إلى
     ترقيم باستخدام الأحرف اللاتينية الكبيرة أو الصغيرة، أو باستخدام الأرقام
     الرومانية كما ترى في الجدول التالي:
     
     
     

     ‎ TYPE="A">‎	‎ TYPE="a">‎	‎ TYPE="I">‎	‎ TYPE="i">‎

     
     
     
     
     والحديث عن هذه الخاصية يقودني إلى الحديث عن مسألة مهمة في لغة
     
     HTML
     وهي مسألة الوسوم والخصائص المحددة بمتصفح معين دون غيره أي التي تعمل مع أحد
     المتصفحات ولا تعمل مع غيره. والسبب في ذلك أن هذه الخاصية تستخدم أيضاً مع
     القوائم غير المتسلسلة، لكن ليس بصورة مطلقة...كيف؟ أنت ترى أن الرمز الموجود
     عند كل بند في القائمة هو عبارة عن نقطة سوداء يطلق عليها اسم
     
     Disc
     وهي المعرفة ضمناً في خاصية
     
     TYPE.
     لكن هناك رموز أخرى يمكن إظهارها وهي المربع
     
     square,
     والدائرة المفرغة
     
     circle
     وتعرف بالشكل التالي:
     
     
     
     ‎
     TYPE="square">‎
     ‎
     ‎
     
     
     
     
     ولكن للأسف هذه الخاصية لا تعمل ولا يظهر تأثيرها إلا مع متصفح نيتسكيب وليس
     مع مايكروسوفت إكسبلورر الذي يتعامل فقط مع القيمة الإفتراضية للخاصية.
     (رجاءً لا يغضب مستخدمو إكسبلورر فهناك الكثير من الوسوم والخصائص التي لا
     يستطيع نيتسكيب عرضها أيضاً).
     ولإتمام الحديث عن القوائم، أذكر لك أن هناك وسوماً أخرى تستخدم لإنشاء
     القوائم غير المتسلسلة، وبنفس الطريقة المستخدمة مع <UL>...<‎/UL>
     وهذه الوسوم هي:
     
     
     
     ... <‎/DIR>
     ... <‎/MENU>
     
     
     
     
     ---
     
     
     
     
     
     
     
     
     
     
     هناك نوع خاص من القوائم يدعى قوائم الشرح أو التعريفات
     
     Definition Lists
     وكما يدل الإسم تستخدم عندما نريد إدراج قائمة من المصطلحات يتبع كل واحد
     منها شرح أو تعليق.
     
     
     
     HTML
     
     
     
     
     Hyper Text Markup Language
     
     
     
     
     WWW
     
     
     
     
     World Wide Web
     
     
     
     
     FTP
     
     
     
     
     File Transfer Protocol
     
     
     
     
     GIF
     
     
     
     
     Graphical Interchange Format
     
     
     
     
     JPG, JPEG
     
     
     
     
     Joint Photographic Experts Group
     
     
     
     
     ونحتاج لإنشاء هذه القوائم إلى ثلاثة وسوم:
     الأول <DL>
     ... <‎/DL>
     لتعريف بداية ونهاية القائمة.
     والثاني <DT>
     ويوضع قبل كل مصطلح لتحديده، وهو وسم مفرد.
     أما الثالث فهو <DD>
     وهو وسم الشرح أو التعليق وهو أيضا مفرد. ولنقم الآن بكتابة شيفرة القائمة
     السابقة
     
     
     
     ‎

     ‎
     ‎

     HTML

     Hyper Text Markup Language‎
     ‎

     WWW

     World Wide Web‎
     ‎

     FTP

     File Transport Protocol‎
     ‎

     GIF

     Graphical Interchange Format‎
     ‎

     JPG, JPEG

     Joint Photographic Experts
     Group‎
     ‎<‎/DL>‎
     
     
     
     وصلنا الآن إلى نهاية هذا الدرس، والذي ناقشنا فيه ترتيب الصفحات والفقرات
     والقوائم. أتمنى لك صفحات مرتبة دائماً.