البرمجة والذكاء الاصطناعي · الصف الأول الثانوي
أسئلة: HTML وCSS: بناء هيكل صفحة الويب وتنسيق شكلها
15 سؤال اختيار من متعدد و4 سؤال مقالي بنموذج إجابة، لمراجعة درس «HTML وCSS: بناء هيكل صفحة الويب وتنسيق شكلها» من البرمجة والذكاء الاصطناعي (الصف الأول الثانوي). راجع الأسئلة أدناه، أو اختبر نفسك فورًا.
اختبار سريع من 10 أسئلة عشوائية من بنك الأسئلة أعلاه — تُخلط الأسئلة والاختيارات في كل مرة، فلن يتكرر الاختبار بنفس الترتيب.
اختيار من متعدد
اللغة التي تبني هيكل صفحة الويب ومحتواها هي:
عرض الإجابة والتعليل
الإجابة الصحيحة: HTML
HTML للهيكل والمحتوى.
اللغة المسؤولة عن شكل صفحة الويب وتصميمها هي:
عرض الإجابة والتعليل
الإجابة الصحيحة: CSS
CSS للتصميم.
الاختصار HTML يعني:
عرض الإجابة والتعليل
الإجابة الصحيحة: Hypertext Markup Language
لغة ترميز النص التشعبي.
الاختصار CSS يعني:
عرض الإجابة والتعليل
الإجابة الصحيحة: Cascading Style Sheets
أوراق الأنماط المتتالية.
الوسم الذي يحتوي المحتوى الظاهر للزائر في صفحة HTML هو:
عرض الإجابة والتعليل
الإجابة الصحيحة: body
body للمحتوى الظاهر.
الوسم الذي يحدد عنوان الصفحة الظاهر في تبويب المتصفح هو:
عرض الإجابة والتعليل
الإجابة الصحيحة: title
title يظهر في التبويب.
الوسم المستخدم لكتابة فقرة نصية هو:
عرض الإجابة والتعليل
الإجابة الصحيحة: p
p للفقرة.
أكبر العناوين في HTML يُكتب بالوسم:
عرض الإجابة والتعليل
الإجابة الصحيحة: h1
من h1 (الأكبر) إلى h6 (الأصغر).
الخاصية التي تغيّر لون النص في CSS هي:
عرض الإجابة والتعليل
الإجابة الصحيحة: color
color للون النص.
الخاصية التي تغيّر حجم الخط في CSS هي:
عرض الإجابة والتعليل
الإجابة الصحيحة: font-size
font-size لحجم الخط.
لتنسيق عنصر له class="name" نكتب في CSS المحدد:
عرض الإجابة والتعليل
الإجابة الصحيحة: اسم الفئة مسبوقًا بنقطة: .name
الفئة يُشار إليها بنقطة قبل اسمها.
الوسم المستخدم لربط ملف CSS بصفحة HTML هو:
عرض الإجابة والتعليل
الإجابة الصحيحة: link
link rel="stylesheet" داخل head.
الفقرة p { color: red; } في CSS تجعل:
عرض الإجابة والتعليل
الإجابة الصحيحة: كل الفقرات في الصفحة حمراء
المحدد p يطبق على كل الفقرات.
ميزة استخدام CSS لتنسيق الفقرات هي:
عرض الإجابة والتعليل
الإجابة الصحيحة: تغيير شكل كل الفقرات من مكان واحد
لا حاجة لتعديل كل فقرة على حدة.
الوسم meta charset="UTF-8" مهم لأنه:
عرض الإجابة والتعليل
الإجابة الصحيحة: يحدد ترميز الحروف فتظهر العربية صحيحة
UTF-8 ترميز يدعم العربية.
أسئلة مقالية
قارن بين دور HTML ودور CSS في صفحة الويب مع مثال لكل منهما.
عرض نموذج الإجابة
HTML تبني هيكل الصفحة ومحتواها بالوسوم، مثل العنوان h1 والفقرة p والقائمة ul. CSS تحدد شكل الصفحة وتصميمها، مثل لون النص color وحجم الخط font-size ولون الخلفية background-color.
اكتب قاعدة CSS تجعل كل العناوين h1 خضراء بحجم 30 بكسل، ووضح أجزاء القاعدة.
عرض نموذج الإجابة
h1 { color: green; font-size: 30px; } — المحدد h1 يحدد العناصر، وcolor وfont-size خصائص، وgreen و30px قيمهما، وتنتهي كل خاصية بفاصلة منقوطة.
كيف تجعل فقرة واحدة فقط حمراء دون باقي الفقرات؟
عرض نموذج الإجابة
نعطي الفقرة فئة في HTML مثل: p class="alert"، ثم نكتب في CSS قاعدة للفئة مسبوقة بنقطة: .alert { color: red; } فتتأثر هذه الفقرة وحدها.
اذكر وظيفة الوسوم: head، body، title، ul وli.
عرض نموذج الإجابة
head: يحتوي معلومات عن الصفحة لا تظهر في محتواها. body: المحتوى الظاهر للزائر. title: عنوان الصفحة في تبويب المتصفح. ul وli: قائمة نقطية وعناصرها.