تعرف على كيفية إنشاء موقع الويب الخاص بك باستخدام HTML5 و CSS3


الدرس: هيكل صفحتك


الصفحة السابقة

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

بشكل عام ، تتكون صفحة الويب من رأس (في الأعلى) ، وقوائم التنقل (في الأعلى أو على الجانبين) ، وأقسام مختلفة في الوسط ... وتذييل (في أسفل الصفحة)

في هذا الفصل ، سنركز على علامات HTML الجديدة لتنظيم الموقع. تم تقديم هذه العلامات بواسطة HTML5 (لم تكن موجودة من قبل) وسوف تسمح لنا أن نقول: "هذا هو رأسي" ، "هذه هي قائمة التنقل الخاصة بي" ، إلخ.

في الوقت الحالي ، لن نقوم بالتخطيط بعد. سنقوم بالفعل بإعداد مستند HTML الخاص بنا لنتمكن من اكتشاف التصميم في الفصول التالية.

هيكلة علامات HTML5


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

<HEADER>: الرأس

تحتوي معظم مواقع الويب عادةً على رأس يسمى HEADER باللغة الإنجليزية. غالبًا ما يكون هناك شعار ، لافتة ، شعار موقعك ...

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

:


<header>
</header>

يمثل الشكل التالي ، على سبيل المثال ، موقع W3C (الذي يعالج الإصدارات الجديدة من HTML و CSS بشكل خاص). الجزء المصور باللون الأحمر يتوافق مع الرأس:

css html header

يمكن أن يحتوي الرأس على كل ما تريده: الصور ، الروابط ، النصوص ...

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

.

<FOOTER>: تذييل الصفحة

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


<footer>
</footer>

يوضح الشكل التالي كيف يبدو تذييل W3C.

css html header
يجب أن تجمع العلامة <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>
وفيما يلي القائمة<nav> على موقع . W3c
css html header
<SECTION>: قسم من الصفحة
يتم استخدام العلامة <section> لتجميع المحتوى وفقًا لموضوعها. وعادة ما يتضمن جزء من المحتوى في وسط الصفحة.

<section>
    <h1>القسم الاول</h1>
    <p>كل ما يهم القسم الاول</p>
</section>

في الصفحة الرئيسية لموقع Free.fr ، هناك عدة كتل يمكن اعتبارها أقسام صفحات (الشكل التالي).

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

<aside>
</aside>
قد يكون هناك عدة كتل <aside>في الصفحة.

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

css html header
: مقال مستقل
تعمل العلامة <article> لتشمل جزءًا مستقلًا بشكل عام من الصفحة. هذا جزء من الصفحة التي يمكن استئنافها في موقع آخر. هذا هو الحال على سبيل المثال في الأخبار (مقالات الصحف أو المدونات).

<article>
    <h1>مقالي</h1>
    <p>Bla bla bla bla</p>
</article>

على سبيل المثال ، إليك مقالة حول العالم:

css html header

ملخص


يا للعجب ، هذا الكثير من العلامات الجديدة التي يجب تذكرها. لحسن الحظ ، لقد صنعت لك مخططًا صغيرًا (الشكل التالي) لمساعدتك في حفظ دورها

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

دعنا نحاول استخدام العلامات التي اكتشفناها للتو لتنظيم صفحة الويب الخاصة بنا. يتضمن الكود أدناه جميع العلامات التي رأيناها في صفحة ويب كاملة:


<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>موقع الويب</title>
    </head>

    <body dir="rtl">
        <header>
            <h1>المؤلف</h1>
            <h2>مجلات السفر</h2>
        </header>
        
        <nav>
            <ul>
                <li><a href="#">الرئيسية</a></li>
                <li><a href="#">Blog</a></li>
                <li><a href="#">السيرة الذاتية</a></li>
            </ul>
        </nav>
        
        <section>
            <aside>
                <h1>عن المؤلف</h1>
                <p>أنا ، يا زوزور! لقد ولدت في 23 نوفمبر 2019.</p>
            </aside>
            <article>                
                <h1>أنا مسافر عظيم
                </h1>
                <p> (نص المقال)</p>
            </article>
        </section>
        
        <footer>
            <p>حقوق الطبع والنشر Zozor - جميع الحقوق محفوظة<br />
            <a href="#">الاتصال بي !</a></p>
        </footer>
        
    </body>
</html>
يمكن أن يساعدك هذا الكود في فهم كيفية ترتيب العلامات. تتعرف على رأس ، وقائمة تنقل ، وتذييل ... وفي الوسط ، قسم مع مقال وكتلة <aside>يقدمان معلومات حول مؤلف المقال.

كيف تبدو الصفحة التي أنشأناها للتو؟

للا شيء!

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

css html header

الروابط وهمية عن قصد وهذا ما يفسر وجود #) )، فهذا يعني ان الرابط لا يؤدي الى أي مكان (أي ، إنها مجرد صفحة تجريبية)

أنا لا أفهم مصلحة هذه العلامات. يمكننا الحصول على نفس النتيجة جيدًا دون استخدامها!

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

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

الخلاصة


  • تم تقديم العديد من العلامات باستخدام HTML5 لتحديد المناطق المختلفة التي تشكل صفحة الويب:
    • <header>: في الراس ؛
    • <footer>: أسفل الصفحة ؛
    • <nav>: الروابط الرئيسية ؛
    • <section>: قسم من الصفحة
    • <aside>: معلومات إضافية ؛
    • <article>: مقالة مستقلة.
  • يمكن أن تتداخل هذه العلامات داخل بعضها البعض. وبالتالي ، يمكن أن يكون للقسم رأسه الخاص.
  • هذه العلامات لا تتعامل مع التصميم. تعمل فقط للإشارة إلى الكمبيوتر معنى النص الذي تحتويه. يمكننا وضع الرأس في أسفل الصفحة إذا رغبنا في ذلك.