إتصل بنا

الاسم

بريد إلكتروني *

رسالة *

بناء صفحات الوب باستخدام لغة الـHTML .

12 تعليق

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

عموما ، يتم بناء صفحات الوب من الأعلى إلى الأسفل ، حيث ننطلق من الهيدر ، ثم قائمة التصفح ( Menu de navigation )  ، بعدها نضع مختلف المقاطع و المساحات الخاصة بالمقالات لنصل في الأخير إلى الفوتر ، و نكون قد أنهينا البنية .

سنتعرف في هذا الفصل على عناصر جديدة خاصة ببناء صفحات الوب . لقد ظهرت هذه العناصر حذيثا مع الـHTML 5 ، أي أنها لم تكن موجودة من قبل ، و إن هذه العناصر تسهل حقا بناء الصفحات حيث نقول من خلالها للمتصفح " هذا هيدر " ، " هذا مقطع " ، " هذا فوتر " و هكذا  .

يحتاج بناء صفحات وب جيدة إستخدام لغتين على الأقل ، الـHTML و الـCSS بالإضافة إلى بعض لغات البرمجة كالجافاسكربت و الجي كويري ، لن نعير إهتماما في هذه الدروس بالجافاسكربت و الجي كويري أبدا ، و في هذا الفصل سنقصي الـCSS أيضا حيث سنركز على عناصر الـHTML الجديدة فقط ، و للـCSS سنراها في الفصل القادم إن شاء الله .

الفهرس



عناصر البناء في الـHTML 5 .

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

<header> : الهيدر .

معضم مواقع الوب تعتمد في بنيتها على ما نسميه الهيدر ، أو رأس الصفحة ، يحتوي في العادة على عدة مقاطع أو لِنَقُل تقسيمات ، بحيث نضع الـلوغو الذي يمثل شعار و إسم الموقع في الجانب ، و بعض الإضافات كالإعلانات في الجانب الاخر .

أما الوسم الخاص بعنصر الهيدر فهو <header> بكل بساطة .

<header>
     <!--هنا كل المعلومات و العناصر التي تنتمي إلى هيدر الصفحة--> 
</header>

للمزيد من التوضيح ، فيما يلي صورة توضح مكان الهيدر في مدونة عاشق النت :

هيدر مدونة عاشق النت ( المساحة الزرقاء )

<footer> : الفوتر .

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

و الوسم الخاص بعنصر الفوتر هو <footer> . ( واضحة من العنوان  )

<footer> 
    <!--محتوى فوتر الصفحة--> 
</footer>


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

فإن عاينا الكود المصدري لبعض صفحات مواقع الوب ، سنجد أنها لا تحتوي على هذين العنصرين أو على باقي العناصر التي سنراها ، ليس لأن هذه العناصر تافهة ، و إنما تلك المواقع لم تقم بتحذيث بنيتها مع ما أضافته لغة الـHTML 5 من عناصر و إمكانيات .

<nav> : عنصر قائمة التصفح .

يجمع العنصر <nav> كل روابط الصفحات الأساسية التي تكون الموقع ، و ذلك على شكل قائمة أفقية بحيث يسهل على الزائر تصفح الموقع و الوصول إلى مبتغاه ، و عادةً ما نضع عنصر القائمة داخل الـ<nav> :

<nav>
    <ul>
        <li><a href="index.html">الصفحة الرئيسية</a></li>
        <li><a href="forum.html">المنتدى</a></li>
        <li><a href="contact.html">إتصل بنا</a></li>
    </ul>
</nav>

يمكن لقوائم التصفح أن تكون عمودية أو أفقية و ذلك حسب تصميم الموقع ، فإنطلاقا من التحكم في خصائص الـCSS يمكن جعل القوائم أكثر جمالا و أناقة من ناحية الألوان و شكل الأزرار ، و يمكن أيضا إضافة بعض التفاعلية بإستخدام لغات البرمجة .

إليكم القائمة الأفقية الخاصة بمدونة عاشق النت :
قائمة التصفح الخاصة بمدونة عاشق النت ، قائمة أفقية .

<section> : عنصر المقطع .

العنصر <section> يصلح للإحاطة بالمحتويات حسب موضوعها ( الصورة ستوضح الفكرة ) ، فالمواقع تحتوي على عدة مقاطع <section> تتوزع بشكل منظم في صفحة الموقع بحيث تنظم المحتوى و تفصل بين مواضيعه .

<section>
    <h1>عنوان المقطع</h1>
    <p>بلا بلا بلا بلا بلا</p>
</section>


<aside> : عنصر لإدراج معلومات إضافية .

يكون العنصر <aside> في جانب المقالات الكبيرة ، حيث يحتوي على معلومات إضافية مرتبطة بالمقال ، أو يمكن أن يحتوي على روابط موجهة لمقالات ذات صلة بالموضوع المعاين من طرف القارء ، و ما يجعل العنصر <aside> يحوم إلى الجانب هو خاصية مميزة سنراها في الفصول القادمة هي float و التي تنتمي إلى لغة الـCSS طبعا .

<aside>
    <!--معلومات إضافية-->
</aside>

كمثال لهذا العنصر ، يمكن أن نشاهد مقال من مقالات الموقع الشهير ويكيبيديا ، حيث نرى صندوق الـ<aside> يتمركز في الجانب .

<article> : المقال .

كآخر عنصر سنراه في هذه الفقرة هو عنصر <article> ، و كما يدل إسمه فهو عنصر يصلح لوضع المقالات في الموقع ، كمواضيع المناقشة ، أو مواضيع إخبارية أو أي شيء آخر .

<article>
    <h1>عنوان المقال</h1>
    <p>بلا بلا بلا بلا بلا</p>
</article>

المقالات تبدوا واضحة في المواقع و لا نحتاج إلى صورة توضيحية ، أليس كذلك  !! . فما تشاهده الان عبارة عن مقال و ما تقره في الموقع ويكيبيديا عبارة عن مقال و هكذا .

يجب علينا الإعتماد على هذه العناصر الجديدة التي رأيناها ، لأنها ستسهل علينا عملية التخصيص بالـCSS ، و تحتاج المقالات أيضا إلى نوع من التنظيم و التنسيق ، و هذا ما سنراه في الفصول القادمة إن شاء الله .


مثال لإستخدام عناصر البناء .

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

<!DOCTYPE html>
<html dir='rtl'>
    <head>
        <meta charset='UTF-8' />
        <title>موقعي الأول - الصفحة الرئيسية</title>
        <style>
            <!--CSSخصائص الـ-->
        </style>
    </head>
    <body>
        <header>
            <h1>موقعي الأول</h1>
            <p>هذا موقعي الأول ، أجرب فيه العناصر الجديدة</p>
        </header>

        <nav>
            <ul>
                <li><a href='#'>الصفحة الرئيسية</a></li>
                <li><a href='http://3asq.blogspot.com'>المدونة</a></li>
                <li><a href='#'>إتصل بي</a></li>
            </ul>
        </nav>

        <section>
            <aside>
                <h2>حول كاتب المقال</h2>
                <p>إنه أنا ، عاشق النت و من لا يعرفه </p>
            </aside>
            <article>
                <h1>قصتي مع تصميم المواقع</h1>
                <p>بدأت قصتي هاته ............... و عاشا سعيدين إلى الأبد</p>
            </article>
        </section>

        <footer>
            <p>الحقوق محفوظة - عاشق النت</p>
            <a href='#'>إتصل بي</a>
        </footer>
    </body>
</html>

المثال أعلاه يوضح كيف يمكن ترتيب العناصر ، نبدأ بالهيدر و نمر بقائمة التصفح و بالمقطع الذي يحتوي على المقال و صندوق المعلومات الإضافية <aside> ثم نصل إلى الفوتر الذي يكون في أسفل الصفحة ، فهذا مثال بسيط جدا لما يمكن أن تحتوي عليه صفحة وب من HTML ، أما صفحات الوب التي نشاهدها في المواقع الحقيقية فهي أكثر تعقيدا و تشمل خزينة كبيرة من العناصر ، و هنا سيظهر لنا جليا أن ذلك الكم الهائل من الأكواد ليس من عمل بشر ، و إنما هي عمل برامج متقدمة تسهل تصميم المواقع ، خذ برنامج Dreamweaver مثلا .

هذا البرنامج متقدم جدا و هو غير مجاني ، يمكن أن يرتبط مع الخوادم مباشرة و إنشاء ملفات الـHTML أتماتيكيا بحيث نكتفي نحن بصياغة المقالات و ضبطها فقط ، و ذلك من خلال المنصة المتقدمة التي يمنحها هذا البرنامج ، لا نرى عناصر ولا أكواد و إنما نصوغ مقالاتنا كما لو أننا نكتبها في برنامج Microsoft Word  .

و بالعودة إلى المثال السابق ، فهكذا سيظهر في المتصفح : النتيجة .

هذه العناصر الجديدة التي تعلمناها تنتمي إلى لغة الـHTML 5 ، و حيث أن هذا الإصدار الجديد لا زال غير منتشر في جميع المواقع ، فإننا سنجد العديد من المواقع لا تستخدم هذه العناصر بعد ، و إنما تستخدم عنصرا متميزا آخر يلعب كل أدوار العناصر السابقة و نرمز له بالوسم <div> ، أما الإشكال الذي يخص فرز عناصر صفحة الوب عن بعضها ، أي فرز الهيدر عن قائمة التصفح ، و فرز المقال عن صندوق المعلومات الإضافية علما أنها كلها عناصر <div> ، فيتم حله باستخدام معرفات الـid و الـclass .


تمكين التوافقية مع متصفح إنترنت إكسبلورر .

هذه العناصر الجديدة التي تعرفنا عليها معروفة عند المتصفحات الحذيثة كلها ، إلا المتصفح إنترنت إكسبلورر إلى نسخته 9 ( IE9 ) ، أي أن الإصدارات ( 6 و 7 و 8 و 9 ) من إنترنت إكسبلورر لا تدعم هذه العناصر ، بل و لا تدعم العديد من العناصر الأخرى ، و هذا يطرح مشكلا لأن فئة كبيرة من متصفحي الوب لا يزالون يستخدمون هذه الإصدارات القديمة من إنترنت إكسبلورر ، و بالتالي لا تظهر المواقع عندهم كما ينبغي .

و قد تم حل هذا المشكل بذكاء ، حيث تم إستخدام القليل من لغة البرمجة الجافاسكربت ، و ذلك عن طريق جلب ملف جافاسكربت ذو إمتداد js.* إلى صفحات الموقع ، يحتوي على أكواد تجعل المتصفحات القديمة من إنترنت إكسبلورر تدعم كل العناصر الجديدة التي تنتمي إلى الـHTML 5 .

ففي كود الـHTML ، نضع داخل العنصر <head> العنصر الصغير التالي :


إن أردنا رؤية ما يوجد داخل ملف الجافاسكربت إنطلاقا من الرابط في الكود أعلاه ، فإننا سنجد أكوادا مضغوطة لا يفهمها إلى من قام بصياغتها  .

أما بالنسبة لباقي المتصفحات فهي تدعم كل جديد في لغة الـHTML 5 ، فالمتصفح موزيلا فايرفوكس  يتجدد باستمرار و تصدر منه إصدارات جديدة دائما و ذلك لمواكبة كل جديد في لغات الوب ، و هو دائما يحث مستخدميه على الإرتقاء باصداراته خاصة و أن كل من يستخدم هذا المتصفح يكون واعيا بالأمور التي تخص الوب و تطوراته .

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

مساحة إعلانية

تعليقات بلوجر

  1. بارك الله فيك أخي محمد على هذا الموضوع الرئع والمنسق في إنتظار باقي الدروس

    ردحذف
  2. بارك الله فيك أخي على هذه الدروس القيمة و الرائعة مشكور على جهودك,
    انا حبيت كثير القالب بتاعكم "قالب عاشق النت" و نفسي اسأل كيف حطيتو زر RRS أو زر google + جنب محرك البحث الخاص بالمدونة,
    مشكورين أخي

    ردحذف
  3. شكرا لك أخي عاشق النت على هذه الدرس المميز والكجهودات الجبارة
    ننتظر منك المزيد أخي الفاضل
    مشكور مرة أخرى

    ردحذف
  4. كنت أظن انني درست html في الجامعة لكن هذه تبدو مختلفة جدااا

    ردحذف
  5. معلومات رائعة من شخص اكثر من رائع
    تقديري لعطاءك

    ردحذف
    الردود
    1. شكرا على الإطراء أخي ، أهلا و سهلا بك

      حذف
  6. بارك الله فيك ياغالي

    ردحذف
  7. خير الكلام ماقل ودل
    وكلامك كله في صلب الموضوع
    جزاك الله خيرا

    ردحذف
  8. شكرا لك على هدا الشرح الرائع

    ردحذف
  9. سبق وان تابعت المدونة من فترة طويلة .. وها انا قد عدت .. بارك الله فيك وزادك علماً وعطاء

    ردحذف

  10. جزاك الله خيرا اخى على الموضوع الجميل
    نفعنا الله واياك بكل خير ونفع بنا العباد

    تحياتى لجهدك الطيب

    http://shomane.blogspot.com/
    http://12abjdhoaz.blogspot.com

    ردحذف

لإدخال الأكواد بالتعليقات عليك تحويلها بـأداة ترميز أحرف HTML الخاصة