عناصر صفحة الويب Body Tags
جزء 3
عناصر تقسيم صفحة الويب
لماذا يتم تقسيم صفحة الويب...؟؟!! وما هي أوسمة الـ HTML المستخدمة في تقسيم صفحة الويب ..!! تعرف على الخطوة الأولى في تصميم صفحة الويب وهي تقسيم صفحة الويب...!!
يعتبر تنظيم وترتيب المحتوى الظاهر على صفحة الويب أمر مهم ويؤثر تأثير مباشر على تفاعل المستخدم مع الصفحة . فكلما كان المحتوى منظم سهل على المستخدم التصفح في هذا المقال سنتعرف على أوسمة الـ HTML المستخدمة في تقسيم صفحات الويب لنبدأ…
في هذا المقال نتعرف على:
أوسمة تقسيم محتوى صفحة الويب
هنالك عدة أوسمة تستخدم في تقسيم صفحة الويب أشهر أوسمة تقسيم المحتوى هو الوسم <div> وهو الوسم المستخدم في HTML حيث استحدثت HTML 5 أوسمة لم تكن موجودة في HTML وهذا لتسهيل عملية التقسيم وترتيب المحتوى لصفحة الويب حيث يعطى تنسيق لها بواسطة CSS بشكل اسهل واسرع.
و تدعم HTML 5 استخدام <div> في تقسيم صفحة الويب مع إضافة العديد من الاوسمة Tags التي تقسم الصفحة الى قطاعات مما يجعل من السهل تنسيقها بواسطة اكواد الـ CSS حيث يتم التعامل مباشرة مع اسم الوسم دون الحاجة الى استخدام الفئات Classes أو المعرفات id كما في الوسم <div>.يمكن القول أن هذه العناصر هي المسؤولة عن تنظيم المحتوى وتعريف أقسام مختلفة في صفحة الويب. فيما يلي شرح موجز لكل عنصرمن عناصر تقسيم صفحة الويب في HTML 5:
- <header > يمثل رأس الصفحة أو رأس احد الأقسام،فهو يُعرف المقطع العلوي (Header) لصفحة الويب أو لقسم معين في الصفحة. يمكن استخدامه لعنونة الصفحة أو جزء منها، وإضافة شعارات أو قوائم التنقل العلوية.
- <nav> يمثل شريط القوائم navigation القائمة العلوية لتصفح أقسام الموقع. فهو يُعرف قسم التنقل في صفحة الويب. يستخدم <nav> لتجميع روابط التنقل الرئيسية للصفحة، مثل القوائم والروابط التي تتيح للمستخدم التنقل بين صفحات الموقع.
- <main> يمثل المحتوى الرئيسي للصفحة، فهو يُعرف المحتوى الرئيسي في صفحة الويب. يجب أن يحتوي <main> على المحتوى الأساسي للصفحة، مثل النصوص الرئيسية والصور والفيديوهات والجداول وما إلى ذلك. يتم استخدامه لتحديد الجزء الأكثر أهمية من المحتوى..
- <aside> يمثل الشريط الجانبي، فهو يُعرف جزء جانبي لمحتوى الصفحة الرئيسي. يمكن استخدام <aside> لعرض محتوى ذو صلة جانبية، مثل الإعلانات أو الروابط الجانبية أو المراجع الإضافية.
- <article> و يُستخدم لتعريف مقالة مستقلة ومتكاملة في صفحة الويب. يمثل <article> محتوى قابل للتوزيع أو الاستقلالية، مثل مقالة في جريدة أو منشور في مدونة. يمكن أن يحتوي على عناصر أخرى مثل العناوين والفقرات والصور والروابط..
- <section> يمثل قطاع جديد في الصفحة، فهو يُعرف قسم مستقل أو جزء من صفحة الويب. يهدف <section> إلى تنظيم المحتوى الذي يشترك في سياق مشترك أو يعتبر وحدة مستقلة في الصفحة. يمكن أن يحتوي على عناصر أخرى مثل عناصر العنوان (Heading) والفقرات والصور والجداول والنماذج وغيرها.
- <footer> ويمثل القطاع السفلي من الصفحة ذيل الصفحة، فهو يُعرف الجزء السفلي (Footer) لصفحة الويب أو لقسم معين في الصفحة. يمكن استخدامه لوضع معلومات الاتصال، حقوق النشر، وروابط التنقل العلوية أو السفلية..
وتعمل جميع الأوسمة السابقة كإطار مجمع يحتوي مجموعة من العناصر قد تكون نصوص روابط صور أو حتى فيديوهات تمثل هذه العناصر مكونات هذا القسم. ويوضح الشكل التالي الفرق بين استخدام الوسم <div> في تقسيم الصفحة و طريقة التقسيم المستخدمة في HTML 5 :
نلاحظ عند إستخدام وسم <div> يجب العمل مع الفئات Classes أو المعرفات id حيث يُعطى الوسم <div> اسم الجزء الذي يمثله من الصفحة من خلال اسم الـ Class أو id وهذا للوصول الى هذا القسم بواسطة الـ CSS و JavaScript .وللتوضيح فكرة الفئات Classes و المعرفات id هي سمات HTM Attributes تستخدم للوصول لعنصر معين في مستند HTML بواسطة اكواد CSS أو JavaScript ، ويمكن أن تعرف كتالي:
الفئات Classes في HTML تُستخدم لتصنيف عناصر الـ HTML فهي تحديد الى أي فئة ينتمي عنصر الـ HTML. بحيث تتألف الفئة من عناصر متعددة في HTML أي تشترك هذه العناصر في الكود المطبق على هذه الفئة الـ class.
المعرفات id هي سمة فريدة Unique Attribute في HTML بمعنى انه لا يمكن أن يكون لديك أكثر من عنصر واحد بنفس اسم المعرف في مستند الـ HTML الواحد.
الوسم <div>
يعد الوسم <div> هو واحد من العناصر الأكثر استخدامًا في HTML ويستخدم لتجميع وتنظيم العناصر الأخرى في صفحة الويب. وظيفته الرئيسية هي إنشاء عنصر تجميعي لعناصر HTML الأخرى داخله، بدون أن يؤثر على معنى أو تنسيق تلك العناصر. وهنا بعض الاستخدامات الشائعة لعنصر <div> في HTML:
- تنظيم المحتوى: يمكن استخدام <div> لتجميع مجموعة من العناصر ذات الصلة معًا، مثل عناصر النص والصور والروابط. فهو يساعد في تنظيم وتجميع محتوى الصفحة بطريقة منطقية ومفهومة. على سبيل المثال، يمكن وضع عناصر النموذج (form elements) مثل الحقول والأزرار والمربعات داخل <div> واحد لتسهيل التعامل مع النماذج وتنظيمها.
- إنشاء أقسام: يمكن استخدام <div> لإنشاء أقسام مختلفة في صفحة الويب، مثل رأس الصفحة (Header) التذييل (Footer) والشريط الجانبي (Sidebar) ومنطقة المحتوى الرئيسية (Main Content Area). يمكن تنسيق وتنظيم عناصر كل قسم باستخدام <div> وتحديد الأنماط والتنسيقات المطلوبة لكل قسم.مما يساعد في تحسين هيكل الصفحة وجعلها أكثر قابلية للقراءة والتصفح.
- تجاوبية وقابلية الاستخدام: يمكن استخدام <div> لتحقيق تجاوبية الصفحة وقابلية الاستخدام. بفضل التنسيقات والأنماط المتعددة التي يمكن تطبيقها على <div>، يمكن تعديل ترتيب العناصر ومظهرها بناءً على حجم الشاشة أو الجهاز المستخدم. هذا يساعد في توفير تجربة مستخدم متميزة عبر مختلف الأجهزة.
- تطبيق أنماط CSS: يمكن استخدام <div> لتطبيق أنماط CSS على مجموعة من العناصر. يمكنك تطبيق تصميمات وتنسيقات مختلفة على <div> وتعديل تنسيقاتها وتحديد مواضعها وأحجامها بحرية باستخدام CSS..
- الاستدعاء السكريبت (Script): يمكن استخدام <div> كحاوية للسكريبتات والأكواد البرمجية الديناميكية. يمكن وضع أكواد JavaScript داخل عنصر <div> لتحقيق وظائف تفاعلية داخل الصفحة.
- تعزيز الوصول: يمكن استخدام عناصر <div> بإضافة السمات المناسبة والعناوين المناسبة لتحسين الوصول للصفحة. يمكن تطبيق تقنيات مثل ARIA (Accessible Rich Internet Applications) على <div> لتوفير معلومات إضافية لأجهزة المساعدة وتحسين تجربة المستخدمين ذوي الإعاقة..
<div> بشكل عام هو عنصر قوي ومرن في عملية تقسيم صفحة الويب و يمكن استخدامه لتنظيم وتجميع العناصر في صفحة HTML بطريقة ملائمة للتصميم. إضافة إلى ذلك، يمكنك دمج عناصر <div> مع عناصر أخرى في HTML مثل <span> و <section> و <article> لتحقيق تنظيم أكثر تعقيدًا وتفصيلًا للمحتوى.
تقسيم صفحة الويب في HTML
عند تصميم صفحات الويب يتم تقسيم الصفحة إلى عدة أقسام تتخلف هذه الأقسام بحسب محتوى وتصميم الصفحة. وهذا لترتيب وتنسيق ظهور العناصر على صفحة الويب. بحيث تُقسم الصفحة إلى أقسام و يمكن أن تصنف هذه الأقسام الى فئات Classes او تعطى معرفات id وهذا لتكون معرفة في ملفات CSS و JavaScript .
وتتم عملية تقسيم صفحة الويب باستخدام عناصر HTML التي ذكرناها أعلاه التي تعرف أقسامًا مختلفة في الصفحة. يمكن استخدام عدة عناصر HTML لتنظيم وتقسيم الصفحة، وستعتمد العناصر المحددة على هيكل ومحتوى الصفحة. هنا بعض الأمثلة على كيفية تقسيم صفحة الويب باستخدام عناصر HTML:
1. تقسيم الصفحة إلى مقاطع رئيسية:
يمكن استخدام عنصر <header> لتعريف العنوان وشريط العنوان العلوي للصفحة. يمكن استخدام <nav> لتعريف قائمة التنقل الرئيسية. يمكن استخدام عنصر <main> لتعريف المحتوى الرئيسي للصفحة. وأخيرًا، يمكن استخدام عنصر <footer> لتعريف العناصر السفلية مثل حقوق النشر وروابط الاتصال.كما يتضح معنا في المثال التالي:
...........
<header>
<!-- تعريف العنوان وشريط العنوان العلوي -->
</header>
<nav>
<!-- قائمة التنقل الرئيسية -->
</nav>
<main>
<!-- المحتوى الرئيسي للصفحة -->
</main>
<footer>
<!-- العناصر السفلية مثل حقوق النشر وروابط الاتصال -->
</footer>
...........
2. تقسيم الصفحة إلى أجزاء فرعية:
يمكن استخدام عناصر <section> لتقسيم صفحة الويب إلى أجزاء فرعية تحتوي على محتوى ذو صلة. فيمكن استخدام العنصر <article> داخل <section> لتعريف مقالات مستقلة في كل جزء فرعي. ويمكن استخدام عنصر <aside> لتعريف جزء جانبي يحتوي على معلومات إضافية أو محتوى ذو صلة بالأجزاء الفرعية. كما هو موضح في المثال التالي:
...........
<section>
<h2>قسم 1</h2>
<article>
<!-- مقال المقطع الأول -->
</article>
</section>
<section>
<h2>قسم 2</h2>
<article>
<!-- مقال المقطع الثاني -->
</article>
</section>
<aside>
<!-- محتوى جانبي -->
</aside>
...........
هذه أمثلة بسيطة لتقسيم صفحة الويب باستخدام عناصر HTML. يمكننا تعديلها وتوسيعها حسب احتياجات التصميم وتنظيم المحتوى. كما يجب استخدام العناصر بحكمة وفقًا للغرض والمعنى الصحيح لكل عنصر، وذلك لتعزيز هيكلية صفحة الويب وقابلية التصفح والوصولية.
إن ترتيب العناصر في صفحة الويب وطريقة عرضها للمستخدم يكون في أكواد CSS فهي مسؤوله عن تنسيق العناصر من الوان وخلفيات وأماكن ظهور ...الخ بالاضافة الى اكواد JavaScript التي تجعل صفحة الويب أكثر تفعلاً مع المستخدم. .و الى هنا ينتهي هذا المقال من عناصر صفحة الويب الجزء الخاص بتقسيم المحتوى على صفحة الويب وتعرفنا على أوسمة الـ HTML المستخدمة في تقسيم محتوى صفحات الويب.