إنشاء شريط التنقل - كتاب المهارات الرقمية - الصف 10 - الفصل 1 - المملكة العربية السعودية

الكتاب: كتاب المهارات الرقمية - الصف 10 - الفصل 1 | المادة: المهارات الرقمية | المرحلة: الصف 10 | الفصل الدراسي: 1

الدولة: المملكة العربية السعودية | المنهج: المنهج السعودي - وزارة التعليم

الدرس: إنشاء شريط التنقل

📚 معلومات الصفحة

الكتاب: كتاب المهارات الرقمية - الصف 10 - الفصل 1 | المادة: المهارات الرقمية | المرحلة: الصف 10 | الفصل الدراسي: 1

الدولة: المملكة العربية السعودية | المنهج: المنهج السعودي - وزارة التعليم

📝 ملخص الصفحة

ملخص الصفحة:

تتناول هذه الصفحة مفهوم إنشاء روابط تشعبية داخلية (Internal Hyperlinks) في لغة HTML، حيث يتم الربط إلى أقسام محددة داخل نفس الصفحة الإلكترونية.

الخطوات الأساسية لإنشاء رابط داخلي:

  • تمييز الهدف (القسم المراد الربط إليه): قبل إنشاء الرابط، يجب تحديد القسم داخل الصفحة الذي سيتم الانتقال إليه. يتم ذلك باستخدام خاصية `id` (المعرف) مع العنصر HTML الذي يمثل بداية ذلك القسم (مثل عنوان `

    `). يجب أن يبدأ اسم المعرف بحرف أو شرطة سفلية (`_`)، ولا يمكن تكرار نفس اسم المعرف لعنصرين مختلفين في نفس الصفحة.

  • إنشاء الرابط: يتم إنشاء الرابط التشعبي باستخدام الوسم `` مع السمة `href`. لربط الرابط بالمعرف المحدد مسبقاً، تكتب قيمة السمة `href` بإشارة المربع (`#`) متبوعة باسم المعرف (مثال: `href="#history"`).
  • مثال تطبيقي من الصفحة:

    يظهر في المحتوى أمثلة على عناوين أقسام الصفحة التي تم تمييزها بمعرفات:

    * `

    التاريخ

    `

    * `

    `

    * `

    نبذة

    `

    لإنشاء قائمة تنقل تربط بهذه الأقسام، يمكن كتابة روابط مثل:

    * `التاريخ`

    * `المعرض`

    * `نبذة عنا`

    السياق العام:

    يتم تطبيق هذه التقنية عند إنشاء قائمة تنقل (Navigation Bar) تحتوي على روابط، حيث يرتبط بعضها بأقسام داخل نفس الصفحة (مثل "التاريخ"، "المعرض")، بينما قد يرتبط البعض الآخر بصفحات منفصلة داخل الموقع (مثل "اتصل بنا").

    📋 المحتوى المنظم

    📖 محتوى تعليمي مفصّل

    إنشاء شريط التنقل

    نوع: محتوى تعليمي

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

    الارتباط بجزء معين في نفس الصفحة

    نوع: محتوى تعليمي

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

    نوع: محتوى تعليمي

    يمكن تعيين المعرف id بكلمة تبدأ بحرف أو بشرطة سفلية (_)، ولا يمكن تعيين نفس اسم المعرف لعنصرين مختلفين في نفس الصفحة.

    نوع: محتوى تعليمي

    يتم استخدام خاصية "id" مع جميع عناصر HTML لتمييز العنصر عن باقي الصفحة الإلكترونية.

    نوع: محتوى تعليمي

    <h2 id="history">التاريخ</h2> <p>تعد كرة القدم رياضة ذات تاريخ طويل، نشأت بشكلها الحالي في منتصف القرن التاسع عشر.<br> <br> وجدت أندية كرة القدم منذ القرن الخامس عشر لكنها كانت غير منظمة ودون صفة رسمية، ثم تم إنشاء الكثير من هذه الأندية في أواخر القرن التاسع عشر، ولكن القليل منها فقط فقط استمر بعد ذلك.<br> <br> يعتقد معظم المؤرخين أن الأندية التي استمرت بنشاطها كانت تقع في مناطق أكثر ثراء قليلاً اليوم السبت وكانوا قادرين على تحمل حضور نققات حضور المباريات.</p> <h2 id="gallery">المعرض</h2> <h2 id="about">نبذة</h2> <p>من خلال هذه الصفحة يمكننا تبادل الأفكار والآراء.<br> حول فريق كرة القدم بشكل عام في وقتنا الحالي.<br> يمكننا أيضاً التواصل من خلال النموذج بإضافة المزيد من الصور أو المقالات إلى المعرض.</p> </body> </html>

    نوع: METADATA

    وزارة التعليم Ministry of Education 2025 - 1447 179

    📄 النص الكامل للصفحة

    --- SECTION: إنشاء شريط التنقل --- لقد أضيفت في مشروعك قائمة مرتبة على شكل شريط للتنقل، وتتكون هذه القائمة من مجموعة من الروابط. بشكل عام، يجب أن ترتبط بعض عناصر هذه القائمة بجزء معين من الصفحة، بينما سيرتبط عنصر "اتصل بنا" (Contact Us) بصفحة أخرى في نفس الموقع. --- SECTION: الارتباط بجزء معين في نفس الصفحة --- قبل أن تبدأ بإنشاء ارتباط بجزء معين في نفس الصفحة، يجب أن تميز الجزء من الصفحة الذي سيتم الرجوع إليه عبر هذا الرابط، ولهذا الغرض سوف تستخدم خاصية "id" كمعرف. يمكن تعيين المعرف id بكلمة تبدأ بحرف أو بشرطة سفلية (_)، ولا يمكن تعيين نفس اسم المعرف لعنصرين مختلفين في نفس الصفحة. يتم استخدام خاصية "id" مع جميع عناصر HTML لتمييز العنصر عن باقي الصفحة الإلكترونية. <h2 id="history">التاريخ</h2> <p>تعد كرة القدم رياضة ذات تاريخ طويل، نشأت بشكلها الحالي في منتصف القرن التاسع عشر.<br> <br> وجدت أندية كرة القدم منذ القرن الخامس عشر لكنها كانت غير منظمة ودون صفة رسمية، ثم تم إنشاء الكثير من هذه الأندية في أواخر القرن التاسع عشر، ولكن القليل منها فقط فقط استمر بعد ذلك.<br> <br> يعتقد معظم المؤرخين أن الأندية التي استمرت بنشاطها كانت تقع في مناطق أكثر ثراء قليلاً اليوم السبت وكانوا قادرين على تحمل حضور نققات حضور المباريات.</p> <h2 id="gallery">المعرض</h2> <h2 id="about">نبذة</h2> <p>من خلال هذه الصفحة يمكننا تبادل الأفكار والآراء.<br> حول فريق كرة القدم بشكل عام في وقتنا الحالي.<br> يمكننا أيضاً التواصل من خلال النموذج بإضافة المزيد من الصور أو المقالات إلى المعرض.</p> </body> </html> وزارة التعليم Ministry of Education 2025 - 1447 179

    🎴 بطاقات تعليمية للمراجعة

    عدد البطاقات: 3 بطاقة لهذه الصفحة

    ما الغرض الأساسي من استخدام خاصية المعرف (id) في عناصر HTML عند إنشاء شريط تنقل؟

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

    الإجابة الصحيحة: b

    الإجابة: تمييز جزء معين في الصفحة لإنشاء ارتباط إليه من رابط في شريط التنقل.

    الشرح: 1. خاصية id تُستخدم لتعريف عنصر فريد في الصفحة. 2. عند وضع id لعنصر (مثل عنوان)، يمكن لرابط في شريط التنقل أن يشير إليه مباشرة. 3. هذا يسمح للمستخدم بالانتقال إلى ذلك الجزء المحدد من الصفحة بنقرة واحدة.

    تلميح: فكر في كيفية الانتقال إلى قسم محدد داخل نفس الصفحة.

    التصنيف: مفهوم جوهري | المستوى: سهل

    ما القاعدة الأساسية التي يجب اتباعها عند تعيين قيمة لخاصية المعرف (id) في HTML؟

    • أ) يجب أن تكون قيمة المعرف رقماً فقط، ويمكن تكرارها في عناصر مختلفة.
    • ب) يجب أن تبدأ بحرف أو بشرطة سفلية (_)، ولا يمكن تعيين نفس المعرف لعنصرين مختلفين في نفس الصفحة.
    • ج) يجب أن تكون قيمة المعرف باللغة الإنجليزية فقط، ويمكن أن تبدأ برقم.
    • د) يجب أن تكون قيمة المعرف طويلة ومعقدة لضمان الأمان، ويمكن تكرارها.

    الإجابة الصحيحة: b

    الإجابة: يجب أن تبدأ بحرف أو بشرطة سفلية (_)، ولا يمكن تعيين نفس المعرف لعنصرين مختلفين في نفس الصفحة.

    الشرح: 1. المعرف (id) يجب أن يكون فريداً في الصفحة. 2. لا يمكن أن يكون له نفس القيمة في أكثر من عنصر. 3. يجب أن تبدأ قيمته بحرف (a-z, A-Z) أو بشرطة سفلية (_).

    تلميح: تذكر قواعد التسمية والتفرد.

    التصنيف: صيغة/خطوات | المستوى: متوسط

    أي من الأمثلة التالية يوضح الاستخدام الصحيح لخاصية id لتمييز عنوان في HTML؟

    • أ) <h2>id="history"التاريخ</h2>
    • ب) <h2 id=history>التاريخ</h2>
    • ج) <h2 id="history">التاريخ</h2>
    • د) <h2>التاريخ</h2 id="history">

    الإجابة الصحيحة: c

    الإجابة: <h2 id="history">التاريخ</h2>

    الشرح: 1. خاصية id تُكتب داخل علامة الفتح للعنصر HTML. 2. تأخذ الصيغة: id="قيمة_المعرف". 3. في المثال الصحيح، تم تعيين id بقيمة "history" لعنصر h2.

    تلميح: ابحث عن الصيغة التي تضع المعرف داخل علامة الفتح للعنصر.

    التصنيف: سؤال اختبار | المستوى: سهل