النتائج 1 إلى 3 من 3

الموضوع: {[html]}الدرس السادس (القوائم)

  1. #1
    -{][ مدير التصاميم ][}- الصورة الرمزية احمد حسن
    تاريخ التسجيل
    Jun 2009
    العمر
    32
    المشاركات
    5,610
    معدل تقييم المستوى
    215245

    {[html]}الدرس السادس (القوائم)


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

    وهناك ثلاث سمات لإدراج القوائم :
    1- القوائم المرتبة
    2- القوائم الغير مرتبة
    3- قوائم المصطلحات والتعريفات

    ********************************
    أولا: القوائم المرتبة
    وتستخدم في عمل ترتيب أو ترقيم لعناصر القائمة

    ونستخدم معها الوسم <OL> وتغلق بالوسم </OL>
    وتستخدم السمة <li> لإدخال كل بند من بنود القائمة
    وهي سمة مفردة ليس لها وسم إغلاق
    وتكتب في بداية السطر لكل بند من بنود القائمة

    س/ما هي الطريقة الصحيحة لكتابة هذه القائمة ؟
    لتعرف ذلك قم بكتابة الكود الآتي

    كود HTML:
    <html>
    <title>html</title>
    <body>
    html lessons
    <ol>
    <li>مقدمة
    <li>الأنماط الأساسية
    <li>إنشاء أول صفحة
    <li>المزيد من العناصر
    <ol/>
    <body/>
    <html/>

    وستكون النتيجة كما في الصورة



    ********************************
    هيا لنتعرف عن الخصائص المستخدمة مع الوسم ol

    - الخاصية type:
    وتستخدم في تحديد شكل الرمز الذي يظهر في بنود القائمة
    وتستخدم مع ثلاثة أنواع مع الترتيب

    الترتيب الرقمي
    ويستخدم الأرقام الصحيحة لترتيب القوائم
    وهو الترتيب الإفتراضي لصفحة الإنترنت كما حدث في المثال السابق

    ------------------------------------------

    الترتيب الحرفي
    الذي يستخدم الحروف الأبجدية لترتيب العناصر
    تعالوا نطبق ذلك على المثال السابق

    قم بفتح الصفحة التي قمنا بحفظها من قبل
    واضغط في أي مكان من الصفحة بزر الماوس الأيمن
    تظهر لك قائمة اختار منها :عرض المصدر/ view source
    سيظهر لك ملف المفكرة وبه الكود الذي قمت بإنشاءه من قبل لعمل القائمة السابقة

    هكذا لن تحتاج إلى كتابة الكود كل مرة
    كل ما عليك هو التغيير فيه ثم تقوم بالحفظ

    وسنقوم بالتغيير الآتي به أمام <ol type=A>

    بعد أن تنتهي سيكون الكود لديك بهذه الصورة

    كود HTML:
    <html>
    <title>html</title>
    <body>
    html lessons
    <ol type=A>
    <li>مقدمة
    <li>الأنماط الأساسية
    <li>إنشاء أول صفحة
    <li>المزيد من العناصر
    <ol/>
    <body/>
    <html/>

    بعد ذلك قم بحفظ ما قمت به من قائمة File ثم Save ثم أغلق المفكرة
    واذهب إلى الصفحة واضغط على أيقونة refresh أو إضغط على F5

    ستلاحظ تغير الترتيب من الرقمي إلى الحرفي كما في هذه الصورة


    ------------------------------------------

    الترتيب الرمزي
    الذي يستخدم الرموز اللاتينية لترتيب العناصر
    ونقوم بكتابة الخاصية type بهذا الشكل

    <ol type=I>

    الآن بنفس الطريقة الماضية قم بفتح المفكرة عن طريق الصفحة
    بالضغط بزر الماوس الأيمن في أي مكان في الصفحة
    لتظهر لك قائمة اختار منها view source/عرض المصدر

    ثم قم بتغير حرف A الذي قمنا بكتابته لعمل قائمة بترتيب حرفي إلى حرف I

    وسيكون الكود النهائي بعد التغيير كالتالي

    كود HTML:
    <html>
    <title>html</title>
    <body>
    html lessons
    <ol type=I>
    <li>مقدمة
    <li>الأنماط الأساسية
    <li>إنشاء أول صفحة
    <li>المزيد من العناصر
    <ol/>
    <body/>
    <html/>

    ستلاحظ إنه تم تغيير الترتيب من الترتيب الحرفي إلى الترتيب الرمزي



    ********************************
    ثانيا: القوائم غير المرتبة
    وتستخدم في عمل ترتيب للعناصر باستخدام نقطة بدل من الترقيم

    ونستخدم مع هذا النوع من القوائم الوسم <ul> ووسم الإغلاق له <ul/>
    وسنستخدم أيضا الوسم <li> لإدخال كل بند من بنود هذه القائمة

    الآن لنقم بتطبيق ذلك

    إفتح برنامج المفكرة
    قم بكتابة نفس الكود لكن اكتبul بدلا من Ol
    سيكون الكود النهائي هكذا

    كود HTML:
    <html>
    <title>html</title>
    <body>
    html lessons
    <ul>
    <li>مقدمة
    <li>الأنماط الأساسية
    <li>إنشاء أول صفحة
    <li>المزيد من العناصر
    <ul/>
    <body/>
    <html/>

    الآن قم بحفظ التغيرات بالطريقة التي تعودنا عليها

    ثم قم بفتح الصفحة بعد ذلك ولاحظ الفرق


    ********************************
    لنتعرف الآن عن الخاصية type وكيفية استخدامها مع الوسم ul

    وستكون قيمة type هنا رموز غير الدائرة السوداء

    ستكون المربع الأسود square والدائرة المفرغة circle

    وتكتب بهذه الطريقة

    <ul type="square or circle">

    الآن هيا نطبق ذلك معا
    قم بفتح المفكرة بنفس الطريقة التي نقوم بها عن طريق الصفحة
    قم بعمل التغيير التالي في الكود

    كود HTML:
    <html>
    <title>html</title>
    <body>
    html lessons
    <ul type="square">
    <li>مقدمة
    <li>الأنماط الأساسية
    <li>إنشاء أول صفحة
    <li>المزيد من العناصر
    <ul/>
    <body/>
    <html/>

    ثم قم بحفظ التغيرات من file ثم save ثم أغلق المفكرة
    وقم بعمل تحديث للصفحة بالضغط على F5

    وستظهر الصفحة كما في الصورة



    لاحظ إنه تغيرت الدئرة السوداء إلى مربع أسود

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

    ********************************
    ثالثا: قوائم الشرح والتعريفات

    وتستخدم عند ادراج قائمة من المصطلحات وعمل شرح أو تعليق لها

    ونستخدم مع ذاالنوع من القوائم ثلاث سمات

    1- السمة <dl> في بداية القائمة وتغلق بـ <dl/> في نهاية القائمة
    2- السمة <dt> وتوضع قبل المصطلح الذي نريد أن نشرحه وهي سمة مفردة
    3- السمة <dd> وتوضع قبل الشرح وهي سمة مفردة أيضا

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

    ثم قم بعمل الآتي


    كود HTML:
    <html>
    <title>html</title>
    <body>
    html lessons
    <ul type="square">
    <li>مقدمة
    <li>الأنماط الأساسية
    <li>إنشاء أول صفحة
    <li>المزيد من العناصر
    <ul/>
    <dl>
    <dt>html
    <dd>hyper text markup language
    <dt>www
    <dd>world wide web
    <dt>cpu
    <dd>center processing unit
    <dl/>
    <body/>
    <html/>

    لاحظ النتيجة كما في الصورة


    هكذا نكون قد انتهينا من شرح القوائم

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

    التعديل الأخير تم بواسطة احمد حسن ; 26-08-2009 , الساعة 01:55 سبب آخر: اعادة تنسيق الموضوع والصور






    [ Everyday ...I hope to learn today ... More than yesterday ]
    [ كل يوم أتمنى أن أتعلم أكثر من الأمس ]



  2. #2
    نائب رئيس المشناعة الصورة الرمزية M!XmAn
    تاريخ التسجيل
    Mar 2008
    المشاركات
    5,979
    معدل تقييم المستوى
    863342

    تسلم و الله يا أستاذ

    جزاك الله خير مجهود و شرح جبار

    بارك الله فيك


  3. #3
    -{][ مدير التصاميم ][}- الصورة الرمزية احمد حسن
    تاريخ التسجيل
    Jun 2009
    العمر
    32
    المشاركات
    5,610
    معدل تقييم المستوى
    215245

    الله يسلمك أخوي
    ومشكور على تواجدك دائما







    [ Everyday ...I hope to learn today ... More than yesterday ]
    [ كل يوم أتمنى أن أتعلم أكثر من الأمس ]



ضوابط المشاركة

  • لا تستطيع إضافة مواضيع جديدة
  • لا تستطيع الرد على المواضيع
  • لا تستطيع إرفاق ملفات
  • لا تستطيع تعديل مشاركاتك
  •