كيف تصمم هيكلة موقع ويب؟

السلام عليكم ورحمة الله

ما هو تقييمك للخطوات التي مررنا بها في الدورة التدريبية لتعلم لغة HTML5 و CSS3 ؟ بمعنى آخر، « كيف كُنَّــا و أين وصلنا؟ »💡

مهما كان تقييمك فإنّني أجزم لك أننا وصلنا إلى مرحلة متقدمة في تعلم أدوات تصميم موقع الويب! وما زالَتْ أمامنا مراحل لمعانقة التميز و الاحتراف!

أرجو أن تُعِدَّ قَهْوَتَك ☕️ وتفتح مخك 🧠 ! إننا مُقْبِلْين على مرحلة هامة 👍

إعلم أن العلم إذا أعْطَيْتَهُ كُـلَّكَ أعْطاكَ بَعْضَه ، و إذا أعْطَيْتَهُ بَعْضَكَ لم يُعْطِكَ شيئاً

إننا الآن أصبَحَتْ لدينا قدرة على تصميم موقع ويب ! أو بالأحرى فكرة واضحة حول إنشاء موقع ويب 🎲

👀 إممم .. لكــن … كيف ؟

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

وهنا بيت القصيد ومربط الفرس🎯

معلومـة يجب ان تعرفها :

يجب أن تعرف أن الشكل العام لصفحة الويب، يتكون من رأس وهو ” الجزء العلوي header ” ، وقوائم التّنقل، وتتمركز ” في الجزء العلوي أو على الجانبين menus ” ، وأقسام مختلفة في الوسط . وتذييل ” في أسفل الصفحة footer “.

في هذه الحصـة ، سنتعلم رموز وعلامات جديدة في لغة HTML ، والتي تعمل على تنطيم صفحات الموقع.

💡 العلامات التي سنراها اليوم لم تكن موجودة في الاصدارات السابقة، بل تم تقديمها بواسطة HTML5 و التي سوف تسمح لنا أن نقول: “هذا هو رأس الصفجة” ، “هذه هي قائمة التنقل ” ، وهذا هو الفوتر أو التدييل وهكذا …

كما يُقَال: ” بالمثال يتضح المقال!” لذلك سننتقل إلى التطبيق خطــوةً .. خطــوة ! ولن نقوم بالتخطيط الآن لأن ما سنقوم به اللحظة يعتبر الأول في ترتيب الأولويات !

نبدأ على بركة الله بإنشاء ملف HTML لنتمكن من اكتشاف التصميم في الآتي من الحصص .

العلامات المخصصة لهيكلة الموقع في HTML

سنتعرف هنا على العلامات الجديدة التي جاء بها HTML5 لتنظيم صفحات موقعنا. من خلال استعمال هاته العلامات ، ستكتشف أن الموقع سيبدأ في اكتساب شكل مغاير لما عهدناه سابقاً ، لكنه غير كافٍ ، فأمامنا خطوات في حصص مقبلة لنلاحظ الفرق، لكن هاته العلامات ستعمل على بناءٍ جيِّدٍ للموقع وتجعله جاهزاً للتنسيق بعد ذلك!

<header> : الرأس
تحتوي مواقع الويب عادةً على رأس يسمى header باللغة الإنجليزية. وغالبًا ما يكون هناك شعار (logo)

، لافتة (bannière ) ، شعار موقعك ( slogan)…

ستحتاج إلى وضع هذه المعلومات داخل علامة <header> :

<header>
    <!-- ضع هنا محتوى رأس صفحتك -->
</header>

</header>

اخترت موقع ووردبريس كمثال للتعريف بموضع header على الصفحة :

رأس صفحة موقع ووردبريس

يمكن لرأس الصفحة (header) أن يحتوي على كل ما تراه مناسباً مثل : الصور ، الروابط ، النصوص .. لأن الهيدر هو أول ما يتم تحميله عند فتح الصفحة.

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

<footer> : تذييل الصفحة
بخلاف الرأس ، يكون التذييل عادةً في أسفل الصفحـة. و يحتوي على معلومات مثل روابط جهات الاتصال ، وإسم المؤلف ، والإشعارات القانونية ،سياسة الخصوصية، الحقوق المحفوظة وو…

<footer>
    <!-- ضع هنا محتوى تذييل الصفحة -->
</footer>

</footer>

وهنــا اخترت أيضاً موقع ووردبريس كمثال للتعريف بموضع footer على الصفحة :

كيف تصمم هيكلة موقع ويب؟

<nav>: روابط التنقل الرئيسية
العلامة <nav> يجب أن تجمع جل روابط التنقل الرئيسية المرتبطة بمحتوى الموقع. ويتم وضعها على شكل قائمة ليسهل التنقل بين روابط الموقع .

ولإنشاء قائمة التنقل أو قوائم حسب الأقسام ،فإنه يتم إعدادها داخل علامة <nav>

مثـــــال:

<nav>
    <ul>
        <li><a href="home.html">الرئيسية</a></li>
        <li><a href="qui-suis-je.html">من نحن؟</a></li>
        <li><a href="blog.html">المدونة</a></li>
        <li><a href="forum.html">المنتدى</a></li>
        <li><a href="contactez-nous.html">إتصل بنا</a></li>
    </ul>
</nav>

<nav>

<ul>

<li><a href="home.html">الرئيسية</a></li>

<li><a href="blog.html">المدونة</a></li>

<li><a href="forum.html">المنتدى</a></li>

</ul>

</nav>

هنا قدمت مثالاً لقائمة روابط التنقل nav من الموقع الشهير ويكيبيديا

قائمة روابط التنقل لموقع ويكيبيديا

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

ولكي يتحقق ذلك فإننا ندرج الشفيرة التالية:

<section>
    <h1>هذا قسم داخل صفحة</h1>
    <p>هنا يكون الجزء المختار من محتوى الموضوع</p>
</section>

<p>هنا يكون الجزء المختار من محتوى الموضوع</p>

</section>

مكان وضع section

لا يمكن حصر عنوان من المستوى 1 < h1 > في header (الرأس) فقط ، ولكن من الممكن أن يحتوي كل قسم على عنوان من المستوى 1 < h1 > لأن كل كتلة من هذه الأصناف المكونة لصفحة الويب تكون مستقلة عن غيرها ، وبالتالي فإن العثور على العديد من الألقاب < h1 > في شفرة صفحة الويب يبقى منطقياً. مثلاً : عنوان بمستوى < h1 > نجده في الهيدر،ونجده أيضاً في الأقسام إلخ..

<aside> : معلومات إضافية

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

<aside>
    <!-- هنا تضع المعلومات التكميلية -->
</aside>

<aside>

</aside>

وهنا المثال:

السهم الأحمر يشير إلى موضع المعلومات التكميلية على صفحة الويب

<article>: مقالة مستقلة

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

<article>
    <h1>المقالــة</h1>
    <p>كثير من الكلام حول موضوع المقالة يكتب هنا ..</p>
</article>

<h1>المقالــة</h1>

<p>كثير من الكلام حول موضوع المقالة يكتب هنا ..</p>

</article>

مثال لمقالة article

هذا مثال لمقالة منقولة من موقع psychotactics

ما يمكن استخلاصه:

كنا نظن أننا انتهينا من الرموز والعلامات التي تعرفنا عليها خلال الدورة التدريبية ل HTML5 . لكننا اليوم نجد أنفسنا مجبرين على الغوص في مجموعة أخرى من العلامات الجديدة! 😆
لا بأس كل إضافة لا تخلو من الإفادة ، ومع التطبيق سيصبح كل شيء مألوف!

لقد قمنا باختصار لكيفية هيكلة صفحة الويب في الوثيقة التالية التي قد تفيدكم كثيراً:

هذه هي أقسام الصفحة المحددة بواسطة العلامات

معلومـة على الهامش :

كما ترون لا شيئ صعب بالمرة، فالصفحة يمكن إنشاؤها كما يحلو لكم، لكن الرموز مهمة .الهيدر مثلاً header لا يمكن الاستغناء عنه ، كذلك الفوتر footer، و nav بالإضافة إلى aside و secrion و article ، كل هاته العلامات مُكَوِّنَة لصفحة الويب، ويبقى لعقلك أن يطلق العنان لحرية الإبداع، كي تكون الهيكلة مناسبة ومطابقة لقواعد صفحة الويب. ولن يمنعك أحد من الاستغناء عن بعض هاته العلامات خلال التصميم.

مثال لاستخدام العلامات والرموز في إنشاء صفحة الويب

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

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>Jabism, site de votre choix</title>
    </head>

    <body>
        <header>
            <h1>Jabism.com</h1> 
<p><img src="https://i1.wp.com/jabism.com/wp-content/uploads/2019/02/logo.png?fit=250%2C105"></p>
            <h2>أرحب بكل الزوار الكرام</h2>

       </header>
        
        <nav>
            <ul>
                <li><a href="https://jabism.com/?page_id=1079">من نحن</a></li>
                <li><a href="#">https://jabism.com</a></li>
                <li><a href="#">https://jabism.com/?page_id=3</a></li>
                <li><a href="#">المنتدى</a></li>
                <li><a href="https://jabism.com/?page_id=3">سياسة الخصوصية</a></li>
            </ul>
        </nav>
        
        <section>
            <aside>
                <h1>لماذا يجب أن يكون لك موقع؟</h1>
                <p>لا لشيئ سوى لأن الموقع يسمح لك بتثبيت مهاراتك وتدوينها حسب ما يعود عليك وعلى غيرك بالنفع .</p>
            </aside>
            <article>                
                <h1>القراءة بين اليوم والأمس</h1>
                <p>يمكنك كتابة ما يتعلق بالمقالة هنا </p>
            </article>
        </section>
        
        <footer>
            <p>الحقوق محفوظة لموقع جابيسم<br />
            <a href="#">راسلني !</a></p>
        </footer>
        
    </body>
</html>

<!DOCTYPE html>

<html>

<head>

<title>Jabism, site de votre choix</title>

</head>

<body>

<h1>Jabism.com</h1>

<h2>أرحب بكل الزوار الكرام</h2>

</header>

<nav>

<ul>

<li><a href="#">http://jabism.com</a></li>

<li><a href="#">http://jabism.com/?page_id=3</a></li>

<li><a href="#">المنتدى</a></li>

<li><a href="http://jabism.com/?page_id=3">سياسة الخصوصية</a></li>

</ul>

</nav>

<aside>

<h1>لماذا يجب أن يكون لك موقع؟</h1>

<p>لا لشيئ سوى لأن الموقع يسمح لك بتثبيت مهاراتك وتدوينها حسب ما يعود عليك وعلى غيرك بالنفع .</p>

</aside>

<h1>القراءة بين اليوم والأمس</h1>

<p>يمكنك كتابة ما يتعلق بالمقالة هنا </p>

</article>

</section>

<p>الحقوق محفوظة لموقع جابيسم<br />

<a href="#">راسلني !</a></p>

</footer>

</body>

</html>

كما ترى ، هاته الشفيرة ستساعدك على فهم الدرس بحيث ستفهم كيفية ترتيب العلامات.

header = الهيدر أو الراس يكون دائماً في أعلى الصفحة

footer = الفوتر أو التذييل يكون دائماً في أسفل الصفحة

nav = قائمة روابط التنقل، لك كامل الحرية أن تضعها في المكان الذي يحلو لك من الصفحة، فقط يجب أن تحتفظ على جمالية الصفحة، و أن تكون هاته القائمة مرئية بسهولة.

aside = المعلومات الاضافية، غالباً تكون على أحد الجانبين.

section = هاته الأقسام لك أن تعطي لعقلك حرية اختيار مكان وضعها، وغالياً ما تكون في الوسط.

article = المقالات تكون على الأرجح في الوسط.

لو تأملنا الشفيرة التي وضعتها للتّو في الأعلى والتي تحتوي على كل العلامات التي درسناها في الدرس، سنجد انها لم تأتي بجديد 😯

لكــن ماذا ينقصها؟

ينقصها عنصر مهم جداً و هو CSS ، لأن صفحتنا هاته مصممة فقط ب html .

صفحتنا فعلاً مصممة جيداً لكن ينقصها العنصر المنظم وهو CSS 🙂

كيف تصمم هيكلة موقع ويب؟

أرأيت كم هي جميلة؟ لكن ماذا لو أضفنا إليها بعض البهارات التي تملكها لغة CSS ؟ 🙂 😛

لا شك أنها ستكون رائعة!

ولكن ما فائدة هاته الأكواد التي وضعناها آنفاً؟

بسيطة! هاته العلامات هي لغة تخاطب الحاسوب وسمارتفون لتخبرهم أن هذا هو الرأسheader. وهذا هو التذييل footer وهكذا 💡

صراحة لا زال ينقصنا استعمال علامات أخرى ربما! لو أننا استعملنا <div> فإنه كان سيغنينا على تحديد الكتل . لا.. لا ! نحن نعيش حيث يتواجد HTML5 ، ولعل الحاسوب ستكون له القدرة مستقبلاً على فهم هاته العلامات بشكل أكثر ذكاءً، ليقوم هو بترتيب العلامات أوتوماتيكياً! مارأيكم؟ أليست فكرة جيدة للمدارسة؟

خـلاصة: يمكن لهاته العلامات أن تتداخل فيما بينها. وبالتالي ، يمكن أن يكون لكل قسم رأسه الخاص.

والأساسي في الأمر هو أن تعرف أن هذه العلامات لا تتعامل مع التصميم. فهي فقط تعطي الاشارة للحاسوب كي يفهم أي نوع من النص تحتويه الصفحة؟. يمكننا وضع الرأس في أسفل الصفحة في بعض الحالات إذا رغبنا في ذلك.

-:- إلى اللقاء في درس آخر

قناتي على اليوتوب

أرى أن هذه المواضيع قد تهمك:

شَـاركِ الْمَوْضُوع:
إذا أعجبك هذا المحتوى، فلا تَقْرَأْ وتَرْحَل … تَـعْلِيقَـاتُكَ تَـشْجِيعٌ لَـنَـا لِنَسْتَمِرَّ فِــي الْبَحْثِ وَالْعَطَـاء. وإِذَا كنت تعتقد أنه قد يكون مفيداً لأشخاص آخرين، فشَارِكْهَ على الشبكات الاجتماعية.