📋 المحتوى المنظم
📖 محتوى تعليمي مفصّل
نوع: محتوى تعليمي
لِتَرَ كيف يمكنك تجزئة المقطع التالي:
نوع: محتوى تعليمي
الاسم
نوع: محتوى تعليمي
القيمة
نوع: محتوى تعليمي
<div class="header">......</div>
نوع: محتوى تعليمي
ستنظم صفحتك باستخدام وسم التقسيم <div> وخاصية class.
ستقسم الصفحة إلى الأجزاء الرئيسية أولاً، وأثناء الإنشاء يمكن أن تفصل كل قسم إلى أجزاء.
نوع: محتوى تعليمي
صفحة مشجعي كرة القدم
نوع: محتوى تعليمي
.html
نوع: محتوى تعليمي
<body>
<div class="menu">
<ul>
<li><a href="#top">الصفحة الرئيسية</a></li>
<li><a href="#history">التاريخ</a></li>
<li><a href="#gallery">المعرض</a></li>
<li><a href="#about">نبذة</a></li>
<li><a href="contact-form.html" target="_blank">اتصل بنا</a></li>
</ul>
</div>
نوع: محتوى تعليمي
</div>
نوع: محتوى تعليمي
<div class="main">
<h1>تعمل كرة القدم على جمع الناس معاً</h1>
<p>الهدف من حضور الجمهور في هذه اللعبة هو تشجيع اللاعبين أثناء المباراة</p>
<h2><a id="history">التاريخ</a></h2>
<p><br/>تعد كرة القدم رياضة ذات تاريخ طويل، نشأت بشكلها الحالي في إنجلترا في منتصف القرن التاسع عشر.<br/>وجدت أندية كرة القدم منذ القرن الخامس عشر عشر لكنها كانت غير منظمة ودون صفة رسمية، ثم تم إنشاء<br/>الكثير من الأندية التي استمرت بنشاطها كانت تقع في مناطق أكثر ثراء قليلاً.<br/><br/>حيث كان الناس لا يعملون بعد ظهير يوم السبت وكانوا قادرين على تحمل نفقات حضور المباريات.</p>
</div>
نوع: محتوى تعليمي
Main
نوع: محتوى تعليمي
وزارة التعليم
نوع: محتوى تعليمي
Ministry of Education
2025 - 1447
نوع: محتوى تعليمي
234
🎴 بطاقات تعليمية للمراجعة
عدد البطاقات: 3 بطاقة لهذه الصفحة
ما هو الغرض الأساسي من استخدام وسم <div> مع خاصية class في تنظيم صفحات الويب؟
- أ) تغيير لون خلفية الصفحة فقط.
- ب) إضافة صور متحركة إلى الصفحة.
- ج) تقسيم الصفحة إلى أجزاء رئيسية وتنظيمها، وفصل كل قسم إلى أجزاء فرعية أثناء الإنشاء.
- د) ربط الصفحة بقاعدة بيانات خارجية.
الإجابة الصحيحة: c
الإجابة: تقسيم الصفحة إلى أجزاء رئيسية وتنظيمها، وفصل كل قسم إلى أجزاء فرعية أثناء الإنشاء.
الشرح: 1. وسم <div> هو حاوية عامة لتجميع العناصر. 2. خاصية class تُستخدم لإعطاء اسم أو تصنيف لهذه الحاوية. 3. الهدف هو تنظيم هيكل الصفحة (HTML) وتقسيمها إلى أقسام منطقية (مثل رأس، قائمة، محتوى رئيسي). 4. هذا التنظيم يسهل التحكم في التنسيق (CSS) والسلوك (JavaScript) لكل قسم على حدة.
تلميح: فكر في كيفية هيكلة المحتوى المرئي والمنطقي للصفحة.
التصنيف: مفهوم جوهري | المستوى: سهل
في مثال صفحة مشجعي كرة القدم، ما هو العنصر المستخدم لإنشاء قائمة التنقل (القائمة الرئيسية)؟
- أ) جدول <table> مع صفوف <tr>.
- ب) وسم <nav> مع فقرات <p> بداخله.
- ج) وسم <ul> مع وسوم <li> بداخله، حيث يحتوي كل <li> على رابط <a>.
- د) وسم <ol> مع وسوم <span> بداخله.
الإجابة الصحيحة: c
الإجابة: وسم <ul> مع وسوم <li> بداخله، حيث يحتوي كل <li> على رابط <a>.
الشرح: 1. القائمة الرئيسية موجودة داخل <div class="menu">. 2. يتم إنشاء القائمة غير المرتبة باستخدام وسم <ul>. 3. كل عنصر في القائمة يتم تمثيله بوسم <li>. 4. داخل كل <li> يوجد رابط تشعبي باستخدام وسم <a> مع خاصية href لتحديد الوجهة.
تلميح: انظر إلى الكود الموجود داخل القسم class="menu".
التصنيف: مفهوم جوهري | المستوى: متوسط
ما الفرق بين استخدام خاصية href بقيمة مثل "#history" واستخدامها بقيمة مثل "contact-form.html" في روابط التنقل؟
- أ) كلاهما يفتح صفحة جديدة في نافذة منبثقة.
- ب) "#history" تشير إلى قسم داخل نفس الصفحة (رابط داخلي)، بينما "contact-form.html" تشير إلى صفحة ويب خارجية.
- ج) "contact-form.html" تشير إلى بريد إلكتروني، بينما "#history" تشير إلى موقع ويب.
- د) لا يوجد فرق، كلاهما يؤدي نفس الوظيفة.
الإجابة الصحيحة: b
الإجابة: "#history" تشير إلى قسم داخل نفس الصفحة (رابط داخلي)، بينما "contact-form.html" تشير إلى صفحة ويب خارجية.
الشرح: 1. الرابط بـ "#history": يبدأ بعلامة # مما يعني أنه رابط داخلي (Anchor). 2. عند النقر عليه، ينتقل المتصفح إلى العنصر الذي يحمل id="history" داخل نفس الصفحة. 3. الرابط بـ "contact-form.html": يشير إلى اسم ملف HTML آخر. 4. عند النقر عليه، يقوم المتصفح بتحميل تلك الصفحة المنفصلة (يفتحها في نافذة/تبويب جديد بسبب وجود target="_blank").
تلميح: تأمل في الهدف من كل رابط: الانتقال داخل الصفحة أم فتح صفحة جديدة.
التصنيف: فرق بين مفهومين | المستوى: متوسط