الثانوية العامة 2026الاستعلام عن النتيجةاعرف الكليات المناسبة لمجموعكتنسيق 2026

الحاسب الآلي · الصف الثاني الثانوي

أسئلة: تصميم صفحات الموقع

19 سؤال اختيار من متعدد و4 سؤال مقالي بنموذج إجابة، لمراجعة درس «تصميم صفحات الموقع» من الحاسب الآلي (الصف الثاني الثانوي). راجع الأسئلة أدناه، أو اختبر نفسك فورًا.

اختبار سريع من 10 أسئلة عشوائية من بنك الأسئلة أعلاه — تُخلط الأسئلة والاختيارات في كل مرة، فلن يتكرر الاختبار بنفس الترتيب.

اختيار من متعدد

  1. الجزء المشترك في كل صفحات الموقع الذي يضم روابط الصفحات الرئيسية:

    • شريط التنقل (Nav)
    • التذييل (Footer)
    • المحتوى الرئيسي (Main)
    • الصورة
    عرض الإجابة والتعليل

    الإجابة الصحيحة: شريط التنقل (Nav)

    من البنية المشتركة للصفحة.

  2. الخاصيتان اللتان تضبطان اللغة العربية والاتجاه من اليمين إلى اليسار:

    • charset="UTF-8"\texttt{charset="UTF-8"}
    • lang="ar" dir="rtl"\texttt{lang="ar" dir="rtl"}
    • rel="stylesheet"\texttt{rel="stylesheet"}
    • class="term-card"\texttt{class="term-card"}
    عرض الإجابة والتعليل

    الإجابة الصحيحة: lang="ar" dir="rtl"\texttt{lang="ar" dir="rtl"}

    توضع في وسم html.

  3. الوسم الذي يربط الصفحة بملف التنسيق الخارجي:

    • <meta charset="UTF-8">\texttt{<meta charset="UTF-8">}
    • <link\texttt{<link} rel="stylesheet">\texttt{rel="stylesheet">}
    • <title>\texttt{<title>}
    • <nav>\texttt{<nav>}
    عرض الإجابة والتعليل

    الإجابة الصحيحة: <link\texttt{<link} rel="stylesheet">\texttt{rel="stylesheet">}

    مع الخاصية href باسم الملف.

  4. يُفضل وضع التنسيق في ملف CSS خارجي مشترك لسهولة تعديل كل الصفحات مرة واحدة.

    • صواب
    • خطأ
    عرض الإجابة والتعليل

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

    من ملاحظات الدرس.

  5. الترميز الذي يضمن عرض الحروف العربية صحيحة:

    • ASCII
    • UTF-8
    • JPEG
    • PHP
    عرض الإجابة والتعليل

    الإجابة الصحيحة: UTF-8

    يُضبط بوسم meta charset.

  6. الخاصية alt\texttt{alt} في وسم الصورة:

    • نص بديل يفيد قارئات الشاشة ويظهر إذا لم تُحمّل الصورة
    • تحدد عرض الصورة
    • تغير لون الصورة
    • تجعل الصورة رابطًا
    عرض الإجابة والتعليل

    الإجابة الصحيحة: نص بديل يفيد قارئات الشاشة ويظهر إذا لم تُحمّل الصورة

    من وسوم HTML.

  7. وسم meta الذي يضبط عرض الصفحة على الهواتف:

    • charset\texttt{charset}
    • viewport\texttt{viewport}
    • title\texttt{title}
    • stylesheet\texttt{stylesheet}
    عرض الإجابة والتعليل

    الإجابة الصحيحة: viewport\texttt{viewport}

    من هيكل HTML.

  8. الوسم الذي يضم اسم الموقع وشعاره في أعلى الصفحة:

    • <footer>\texttt{<footer>}
    • <header>\texttt{<header>}
    • <main>\texttt{<main>}
    • <article>\texttt{<article>}
    عرض الإجابة والتعليل

    الإجابة الصحيحة: <header>\texttt{<header>}

    الرأس.

  9. مبدأ «الألوان والخطوط نفسها في كل الصفحات» يسمى:

    • الاتساق
    • التباين
    • البساطة
    • التجاوب
    عرض الإجابة والتعليل

    الإجابة الصحيحة: الاتساق

    من مبادئ التصميم الجيد.

  10. مبدأ «لون نص واضح على خلفية فاتحة» يسمى:

    • الاتساق
    • التباين
    • سهولة التنقل
    • البساطة
    عرض الإجابة والتعليل

    الإجابة الصحيحة: التباين

    من مبادئ التصميم الجيد.

  11. التنسيق max-width: 100%\texttt{max-width: 100\%} للصور يجعلها:

    • بعرض ثابت كبير
    • مخفية
    • بلا ارتفاع
    • لا تتجاوز عرض الحاوية فتتكيف مع الشاشات الصغيرة
    عرض الإجابة والتعليل

    الإجابة الصحيحة: لا تتجاوز عرض الحاوية فتتكيف مع الشاشات الصغيرة

    من أدوات التصميم المتجاوب.

  12. استعلام الوسائط @media (max-width:\texttt{@media (max-width:} 600px)\texttt{600px)} يطبق التنسيق داخله عندما:

    • يكون عرض الشاشة أكبر من 600 بكسل
    • يكون عرض الشاشة 600 بكسل أو أقل
    • تُطبع الصفحة فقط
    • يُفتح الموقع دون إنترنت
    عرض الإجابة والتعليل

    الإجابة الصحيحة: يكون عرض الشاشة 600 بكسل أو أقل

    تغيير التنسيق على الشاشات الصغيرة.

  13. في استعلام الوسائط بالدرس، ماذا يحدث لروابط شريط التنقل على شاشة الهاتف؟

    • تُعرض كل منها في سطر مستقل بسبب display: block\texttt{display: block}
    • تختفي تمامًا
    • تتحول إلى صور
    • يتغير لونها فقط
    عرض الإجابة والتعليل

    الإجابة الصحيحة: تُعرض كل منها في سطر مستقل بسبب display: block\texttt{display: block}

    التصميم المتجاوب.

  14. في ملف CSS بالدرس، المحدد .term-card img\texttt{.term-card img} يطبق التنسيق على:

    • كل الفقرات في الصفحة
    • الرأس والتذييل فقط
    • الصور الموجودة داخل عناصر الفئة term-card
    • الروابط في شريط التنقل
    عرض الإجابة والتعليل

    الإجابة الصحيحة: الصور الموجودة داخل عناصر الفئة term-card

    المحدد المركب.

  15. تريد إنشاء صفحة Help.php جديدة. ما الأسلوب الصحيح حسب الدرس؟

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

    الإجابة الصحيحة: استخدام الهيكل المشترك نفسه وربطها بشريط التنقل وملف CSS الخارجي

    الاتساق وسهولة التعديل.

  16. الصفحة التي تظهر للمستخدم عند تحميل الموقع وينتقل منها إلى باقي الصفحات:

    • Index.php
    • Help.php
    • Connection.php
    • Del_term.php
    عرض الإجابة والتعليل

    الإجابة الصحيحة: Index.php

    الصفحة الرئيسة تفعّل الارتباطات بين صفحات الموقع.

  17. الصفحة التي تشبه صفحة About Us وتعرض معلومات عن الموقع وكيفية التعامل معه:

    • Help.php
    • Search_term.php
    • Edit_term.php
    • Add_term.php
    عرض الإجابة والتعليل

    الإجابة الصحيحة: Help.php

    صفحة المساعدة.

  18. صفحة تعديل مصطلح في المشروع هي:

    • Edit_term.php
    • Del_term.php
    • Add_term.php
    • Index.php
    عرض الإجابة والتعليل

    الإجابة الصحيحة: Edit_term.php

    نختار المصطلح المراد تعديله ثم نعدّل بياناته ونحفظها.

  19. تصميم صفحات الموقع يمثل في المشروع المرحلة:

    • الأولى
    • الثانية
    • الثالثة
    • الأخيرة
    عرض الإجابة والتعليل

    الإجابة الصحيحة: الأولى

    ثم تأتي مرحلة إنشاء جداول قاعدة البيانات، ثم مرحلة إنشاء صفحات الموقع.

أسئلة مقالية

  1. اذكر مكونات البنية المشتركة لصفحات الموقع ووظيفة كل منها.

    عرض نموذج الإجابة

    الرأس (Header): اسم الموقع وشعاره. شريط التنقل (Nav): روابط الصفحات الرئيسية. المحتوى الرئيسي (Main): يختلف من صفحة لأخرى. التذييل (Footer): الحقوق وبيانات التواصل.

  2. وضح وظيفة كل مما يلي في هيكل HTML لصفحة عربية: lang و dir، وmeta charset، وmeta viewport، وalt.

    عرض نموذج الإجابة

    lang="ar" dir="rtl": تحديد اللغة العربية والاتجاه من اليمين إلى اليسار. meta charset="UTF-8": لعرض الحروف العربية صحيحة. meta viewport: لضبط العرض على الهواتف. alt: نص بديل للصورة يفيد قارئات الشاشة ويظهر إذا لم تُحمّل الصورة.

  3. اذكر مبادئ التصميم الجيد، ووضح مفهوم التصميم المتجاوب وأدواته.

    عرض نموذج الإجابة

    مبادئ التصميم: التباين (نص واضح على خلفية فاتحة)، والاتساق (الألوان والخطوط نفسها في كل الصفحات)، والبساطة (مساحات فارغة ومحتوى غير مزدحم)، وسهولة التنقل (روابط واضحة في مكان ثابت). التصميم المتجاوب: موقع يتكيف مع حجم الشاشة، ومن أدواته max-width: 100% للصور، واستعلامات الوسائط @media لتغيير التنسيق على الشاشات الصغيرة، وmeta viewport.

  4. صف كيف تنشئ صفحة Help.php متسقة مع باقي صفحات القاموس، وكيف تختبرها.

    عرض نموذج الإجابة

    أنسخ الهيكل المشترك: doctype وhtml بخاصيتي lang="ar" dir="rtl"، وhead يضم meta charset UTF-8 وmeta viewport وtitle ورابط ملف style.css الخارجي، ثم header باسم الموقع، وnav بروابط الصفحات مع إضافة رابط Help.php إلى شريط التنقل في كل الصفحات، ثم main يضم تعليمات استخدام الموقع، ثم footer. لا أضع تنسيقًا داخليًا بل أعتمد على ملف CSS المشترك. الاختبار: أفتح الصفحة عبر localhost على شاشة الحاسب وشاشة الهاتف (أو بتصغير نافذة المتصفح) وأتأكد من عمل الروابط والاتجاه والحروف العربية.

الرجوع إلى الدرس

السؤال 1 من 10