تقديم
كتب هذا المقال أشرف عبدالدايم مطور واجهة المستخدم في TieLabs سابقاً، 95% من كود CSS الموجود في قالب جنة من كتابة أشرف :)
تحتوي HTML على عناصر تستخدم في هيكلة الصفحة، هذة العناصر تحمل معنى لما تقوم به مثل <header> و <footer> و <main> و <nav> و <aside>، فمن إسم الوسم تستطيع أن تخمن ما الذي سيقوم به وما الذي يحتويه. هذا بالإضافة إلى العناصر العامة الأخرى مثل الوسم <div>.
وبشكل عام تنقسم صفحة الويب (من حيث الهيكلة العامة) إلى أربعة أجزاء رئيسية:
- رأس الصفحة (header): يكون موجود بنفس الشكل في جميع صفحات الموقع، ويحتوى على شعار الموقع (logo) وقائمة الروابط الرئيسية للموقع.
- الجزء الرئيسي في الصفحة (main): محتوى الصفحة، ويكون متغير من صفحة لأخرى، فقد يكون مجموعة من المقالات، أو محتوى المقال والتعليقات عليه، أو معلومات عن الموقع، أو نموذج الإتصال، وهكذا..
- القائمة الجانبية (sidebar): تحتوي على بعض العناصر الهامة المتعقلة بالموقع بشكل عام، مثل تصنيفات الموقع، روابط الأرشيف الشهري، نموذج الإشتراك في القائمة البريدية، وهكذا..
- أسفل الموقع (footer) يحتوى على بعض المعلومات الثانوية عن الموقع، مثل نص حقوق الملكية، قائمة ببعض الروابط الثانوية. أيضاً يتم تكراره في جميع صفحات الموقع مثل العنصر header
أيضاً أشرنا إلى الجزء العلوي من صفحة الويب، الذي يحتوي على لوجو الموقع والقائمة الرئيسية بإسم header هذا الإسم يختلف عن الوسم <header> فالوسم <header> يمكن تكراره في نفس الصفحة في الأقسام المختلفة في الصفحة، لكن الجزء header لا يتكرر في الصفحة. لاحظ أيضاً أن تشابه أسماء أجزاء الصفحة مع أسماء الوسوم يعني أنهم يشتركون في العديدن من الصفحات، لذلك أطلق عليهم نفس الإسم.
أجزاء الصفحة لا تتكر في نفس الصفحة، أما الوسوم الخاصة بهيكلة الصفحة مثل <header> و <footer> و <aside> وهكذا، فمن الممكن أن تتكر مع الأقسام المختلفة في الصفحة، فالقائمة الجانبية ممكن أن تحتوي على الوسم <header> والمحتوى الرئيسي للصفحة أيضاً ممكن أن يحتوي على الوسم <header>.
رأس الصفحة Header
يستخدم الوسم <header> لتمثيل رأس الصفحة، ويكون عاداةً أول عنصر في الكود ويعتبر مقدمة عن الموقع، يحتوى على شعار الموقع (logo) وقائمة الروابط الرئيسية للموقع..
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 | <header> <div id="logo"> <a title="Jannah" href="./"> <img src="images/logo.png" alt="TieLabs"> <h1>TieLabs</h1> </a> </div> <nav> <ul> <li><a href="#">Home</a></li> <li><a href="services.html">Our Services</a></li> <li><a href="products.html">Products</a></li> <li><a href="about.html">About</a></li> <li><a href="contactus.html">Contact Us</a></li> </ul> </nav> </header> |
تزيلة الصفحة Footer
يستخدم العنصر <footer> لتمثيل تزيلة الصفحة، على عكس رأس الصفحة، فإن تزيلة الصفحة (Footer) يكون عادةً أخر عنصر في الصفحة، ويحتوى على بعض المعلومات الثانوية (الغير هامة) عن الموقع، مثل نص حقوق الملكية، قائمة ببعض الروابط، وربما نقوم بتكرار القائمة الرئيسية الموجودة في رأس الصفحة هنا أيضاً.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | <footer> <p>© Copyright 2017, All Rights Reserved</p> <ul> <li><a href="#">Home</a></li> <li><a href="services.html">Our Services</a></li> <li><a href="products.html">Products</a></li> <li><a href="about.html">About</a></li> <li><a href="contactus.html">Contact Us</a></li> </ul> <ul> <li><a href="#">Privacy Policy</a></li> <li><a href="services.html">Terms of use</a></li> </ul> </footer> |
الجزء الرئيسي في الصفحة Main
يستخدم العنصر <main> لتمثيل الجزء الرئيسي من الصفحة، وكما هو ظاهر من اسم الوسم، فهو أهم جزء من محتوى الصفحة.
العناصر السابقة (header , footer) يتم تكرارهم في جميع صفحات الموقع، أما محتوى الصفحة <main> يضم محتوى مميز للصفحة لا يتكرر في باقي الصفحات. هذا المحتوى قد يكون مجموعة من المقالات، أو محتوى المقال نفسه والتعليقات عليه، أو معلومات عن الموقع، أو نموذج الإتصال، وهكذا.
العنصر Aside
في معظم الأحيان توجد قائمة عمودية بجانب المحتوى الرئيسية <main> نستخدم العنصر <aside> لإنشاء هذة القائمة، وتضم معلومات إضافية متعلقة بمحتوى الصفحة.
العنصر Section
العنصر <section> لا يمثل معنى دلالي في حد ذاته مثل العناصر السابقة (header, footer, main, aside)، والهدف من استخدامه هو عمل مجموعات من العناصر المتعلقة ببعضها البعض.
