درس ¦₪¦الدرس الخامس¦₪¦• ¦₪¦ سلسلة دروس لغة hmtl ¦₪¦الفقرات¦₪¦•

الموضوع في 'التصاميم و الجرافيكس' بواسطة aliain13, بتاريخ ‏ابريل 16, 2011.

  1. aliain13

    aliain13 معاً من أجل الرقي بالمستوى العربي

    إنضم إلينا في:
    ‏يناير 29, 2011
    المشاركات:
    1,957
    الإعجابات المتلقاة:
    124
    نقاط الجوائز:
    78
    الجنس:
    ذكر
    مكان الإقامة:
    المملكة العربية السعودية


    [​IMG]

    [​IMG]


    الحمدلله الواحدِ الأحدِ الفردِ الصمد الذي لم يلد ولم يولد ولم يكن لهكفواً أحد

    صاحبِ المننِ السابغة والآلاءِ الوازعة والرحمةِ الواسعة والقدرةِ الجامعة

    والنعمِ الجسيمة والعطايا الجزيلة الذي سما في العزِ ففاتَ نواظرَ الأبصارِ

    ودنا في اللطفِ فجازَ هواجزَ الأفكار الذي توحدَ بالملكِ فلا ندَ له في ملكوتِ

    سلطانه وتفرّد بالآلاءِ والكبرياء فلا ضدَ له في جبروتِ شأنه الذي حارت في

    كبرياءِ هيبتهِ دقائقُ لطائفِ الأنام الذي خضعتِ الرقابُ لعظمته ووجِلتِ القلوبُ

    من خيفته وعنتِ الوجوهُ لهيبته وصلِّ اللهم على حبيبك وخيرتك من خلقك

    سيدِ المرسلين محمد بن عبد الله صلى الله عليه وآله وسلم الدليلِ إليك في

    الليلِ الأليل والماسكِ من أسبابك بحبلِ الشرف الأطول والناصعِ الحَسب في

    ذَروةِ الكاهلِ الأعبل والثابت القَدَم على زحاليفها في الزمن الأول وعلى آله

    وصحبه الأخيار المصطفِين الأبرار


    [​IMG]
    أهلاً وسهلاً بك إلى الدرس الخامس من دروس HTML. في هذا الدرس سوف نناقش الوسوم الخاصة بالفقرات بشكل خاص وترتيب الصفحات وتنسيقها بشكل عام.
    صحيح أن استخدامك للألوان والرسومات في الصفحة يضفي عليها نوعاً من الحيوية، وأن الخطوط تعطي صفحتك رونقاً وجمالاً. لكنك إن لم تهتم بترتيب صفحتك أو تقضي بعض الوقت في تنسيق هيكلها العام وتنظيم فقراتها وقوائمها، فإنه من الصعب عليك الحصول على صفحة ويب ناجحة. فالترتيب هو الخطوة الأولى لجذب اهتمام الزائر أو القارئ لصفحتك وتسهل عليه فهم الخطوط العريضة للصفحة


    [​IMG]
    [​IMG]

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

    لقد قلت إن الوسم <P> هو وسم مفرد لكنه يستخدم أيضاً كوسم مزدوج <P> ... <‎/P> وفي هذه الحالة يمكّننا من تحديد إتجاه الفقرة وإتجاه النص فيها حيث يستخدم معه الخصائص ALIGN, DIR.
    فالخاصية ALIGN تحدد محاذاة الفقرة وهي تأخذ القيم Left, Center, Right وأوضحها بالأمثلة التالية:

    [​IMG]

    أما الخاصية DIR والتي نستخدمها أيضاً مع <P> فتقوم بتحديد إتجاه قراءة النص وتأخذ القيم

    [​IMG]
    تذكر هذه الخاصية جيداً فهي مهمة عند كتابة صفحات باللغة العربية

    [​IMG]
    تنسيق الفقرات أيضاً يوجد الوسوم
    <BLOCKQUOTE> ... <‎/BLOCKQUOTE> أي وسوم الفقرات المقتبسة. ووظيفتها تمييز الفقرة من خلال إدراج مسافة إضافية على الهامشين الأيمن والأيسر لها. أنظر إلى الفقرة التالية التي قمت (باقتباسها) من إحدى صفحات هذا الموقع. ومن ثم وضعتها ضمن <BLOCKQUOTE> ... <‎/BLOCKQUOTE>
    وفكرة هذه الدروس جاءت نتيجة لما لمسته خلال استخدامي لشبكة الإنترنت بشكل عام، والبحث عن المواقع العربية فيها بشكل خاص. فعندما بدأت بتعلم تصميم صفحات الإنترنت، لم يكن هناك مشكلة في الحصول على المصادر أو المواقع التعليمية التي أحتاجها ومن خلال الإنترنت نفسها. لكن المشكلة هي دائماً في الحصول على تلك المصادر بالصورة التي تتناسب واحتياجاتنا كمستخدمين عرب ....
    والحقيقة أنك تستطيع وضع عدة وسوم معاً إذا أردت إدراج هوامش أكبر. كما في المثال التالي:
    <BLOCKQUOTE>
    <BLOCKQUOTE>



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


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

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

    [​IMG]

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

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


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


    [​IMG]

    [​IMG]


    وها نحن نأتي وإياكم إلى ختام جولتنا المباركة

    بين أفياء حديقتنا وزهرات بساتيننا

    وشذا زهراتنا الفواحة

    بعد أن طـّوفنا فيها سوياَ

    فرأينا ما يعجب العين

    وسمعنا ما يشنف الآذان ويطرب الفؤاد

    وإنه ليعز علينا الفراق بعد اجتماع والبعد بعد لقاء

    يا من يعـز عـلـيـنـا أن نـفـارقـهـم وجـدانــنـا كل شيء بـعـدكـم عـــدم

    ولا يسعنا أحبتنا الكرام في هذا

    إلا أن ندعو الله لنا ولكم التوفيق الذي جمّع شملنا في معهدنا

    وهاهو وقت الوداع حان .. وزمان البين آن وإلى لقاء قريب وعلى الإبداع نجتمع

    وسلام على المرسلين والحمد لله رب العالمين


    [​IMG]

     
  2. DeleGnT

    DeleGnT Delegnt.net Moderator

    إنضم إلينا في:
    ‏أغسطس 25, 2010
    المشاركات:
    25,789
    الإعجابات المتلقاة:
    157
    نقاط الجوائز:
    78
    الجنس:
    ذكر
    الوظيفة:
    FREE
    مكان الإقامة:
    DeleGnT.NeT


    بوركت يمناك عزيزي ..

    منتظر جديدك المشوق ..

    \\
     
  3. max_net

    max_net Well-Known Member

    إنضم إلينا في:
    ‏يناير 3, 2011
    المشاركات:
    6,354
    الإعجابات المتلقاة:
    30
    نقاط الجوائز:
    63


    سلمت يمناك
    درس جميل وشرح مميز

    خالص شكري وتقديري:3:
     
  4. aliain13

    aliain13 معاً من أجل الرقي بالمستوى العربي

    إنضم إلينا في:
    ‏يناير 29, 2011
    المشاركات:
    1,957
    الإعجابات المتلقاة:
    124
    نقاط الجوائز:
    78
    الجنس:
    ذكر
    مكان الإقامة:
    المملكة العربية السعودية


    يسلموووووووو ع المرور الرائع
    والردود الاروع منك يالغلا
    :3:
    \\\
     
  5. ديزاين ستارز

    ديزاين ستارز New Member

    إنضم إلينا في:
    ‏فبراير 16, 2011
    المشاركات:
    25
    الإعجابات المتلقاة:
    0
    نقاط الجوائز:
    0


    تسلم ايديك يا استاذى
     
  6. anas1989

    anas1989 New Member

    إنضم إلينا في:
    ‏ابريل 20, 2011
    المشاركات:
    163
    الإعجابات المتلقاة:
    5
    نقاط الجوائز:
    0


    شكرا لك اخي
     
  7. |Dark*Stone|

    |Dark*Stone| New Member

    إنضم إلينا في:
    ‏ابريل 21, 2011
    المشاركات:
    116
    الإعجابات المتلقاة:
    1
    نقاط الجوائز:
    0


    [​IMG]
     
  8. داق الكيف

    داق الكيف عضو مميّز

    إنضم إلينا في:
    ‏مارس 30, 2012
    المشاركات:
    2,789
    الإعجابات المتلقاة:
    54
    نقاط الجوائز:
    63
    الجنس:
    ذكر
    الوظيفة:
    .~. طالَََبَ في جأَمِْعَة إِلاَمَأَمْ .~.
    مكان الإقامة:
    .~. مَدِيِنَّة الرِيّاض .~.


    .~. :314471::314471: لآلآلآلآهنت لببى قلبككككك :314471::314471: .~.
     
  9. ذيب 2001

    ذيب 2001 Active Member

    إنضم إلينا في:
    ‏فبراير 9, 2012
    المشاركات:
    833
    الإعجابات المتلقاة:
    11
    نقاط الجوائز:
    33
    الوظيفة:
    ماذا تتوقع .. ؟ *
    مكان الإقامة:
    ღ فيـ قلب مغلــيـة ღ


    ,

    بارك الله فيك ..
    والله يع ـطيك الف ع ــافية ..
    لاهنت ..
     

مشاركة هذه الصفحة