المعرض - كتاب المهارات الرقمية - الصف 10 - الفصل 1 - المملكة العربية السعودية

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

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

الدرس: المعرض

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

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

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

📝 ملخص الصفحة

ملخص الصفحة:

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

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

  • إضافة صور إلى الموقع: يتم إضافة الصور إلى صفحة الويب باستخدام وسم `` داخل قسم "المعرض" الذي تم تحديده مسبقًا بالمعرف `id="gallery"`. الصور المضافة هي:

    • * `World_Cup.jpg`

    * `Soccer_field.jpg`

    * `football_stadium.jpg`

    * `soccer-saudi-arabia-logo.jpg`

    جميع الصور موجودة في المجلد الرئيسي `/Images`، ويتم تحديد عرض وارتفاع كل صورة بـ 600 بكسل و 400 بكسل على التوالي.

  • استخدام التعليقات في HTML: تظهر في الكود تعليقات (مثل ``) والتي تُستخدم لتنظيم الكود وشرحه للمطور، ولا تظهر هذه التعليقات للمستخدم عند عرض الصفحة في المتصفح.

  • مهمة إنشاء وإضافة فيديو: تحتوي الصفحة على تعليمات لإنشاء فيديو باستخدام برنامج "صور Microsoft" (Microsoft Photos) من مجموعة صور شخصية خاصة بكرة القدم، ثم إضافة هذا الفيديو إلى صفحة مشجعي كرة القدم.

    • عنصر بصري:

    تُظهر لقطة الشاشة المعنونة "Football Fan Page" نافذة متصفح تعرض صفحة مشجعي كرة القدم بعد إضافة الصور، حيث تظهر صور لكأس العالم، وملعب كرة قدم، واستاد كرة قدم، وشعار كرة القدم السعودية.

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

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

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

    هذا تعليق، لاحظ أنه لا يتم عرض التعليقات في المتصفح.

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

    Let's add the images to our site--

    المعرض

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

    h2 id="gallery">المعرض</h2>

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

    img src="/Images/World_Cup.jpg" width="600" height="400" >

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

    img src="/Images/Soccer_field.jpg" width="600" height="400" >

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

    img src="/Images/football_stadium.jpg" width="600" height="400" >

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

    img src="/Images/soccer-saudi-arabia-logo.jpg" width="600" height="400" >

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

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

    جرب بنفسك

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

    جرب بنفسك

    نوع: METADATA

    وزارة التعليم

    نوع: METADATA

    Ministry of Education

    نوع: METADATA

    2025 - 1447

    نوع: METADATA

    185

    🔍 عناصر مرئية

    Football Fan Page

    A web browser window displaying a webpage titled 'Football Fan Page'. It shows a header with the title 'المعرض' and several images related to football: a team posing, a trophy, a stadium, and a team logo. The browser also shows navigation controls and a URL 'localhost:52330/pages/footballFanPage.html'.

    A line drawing of a laptop with hands interacting with the keyboard. Green dots are shown emanating from the keyboard area, suggesting digital interaction or data flow. A speech bubble with the text 'جرب بنفسك' (Try it yourself) is connected to the laptop.

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

    هذا تعليق، لاحظ أنه لا يتم عرض التعليقات في المتصفح. Let's add the images to our site-- --- SECTION: المعرض --- h2 id="gallery">المعرض</h2> img src="/Images/World_Cup.jpg" width="600" height="400" > img src="/Images/Soccer_field.jpg" width="600" height="400" > img src="/Images/football_stadium.jpg" width="600" height="400" > img src="/Images/soccer-saudi-arabia-logo.jpg" width="600" height="400" > أنشئ فيديو باستخدام صور مايكروسوفت (Microsoft Photos) من صور مختلفة خاصة بكرة القدم، ثم أضف الفيديو إلى صفحة مشجعي كرة القدم. --- SECTION: جرب بنفسك --- جرب بنفسك وزارة التعليم Ministry of Education 2025 - 1447 185 --- VISUAL CONTEXT --- **FIGURE**: Football Fan Page Description: A web browser window displaying a webpage titled 'Football Fan Page'. It shows a header with the title 'المعرض' and several images related to football: a team posing, a trophy, a stadium, and a team logo. The browser also shows navigation controls and a URL 'localhost:52330/pages/footballFanPage.html'. Context: Illustrates how images are embedded in a webpage using HTML img tags and how they appear in a browser. **DIAGRAM**: Untitled Description: A line drawing of a laptop with hands interacting with the keyboard. Green dots are shown emanating from the keyboard area, suggesting digital interaction or data flow. A speech bubble with the text 'جرب بنفسك' (Try it yourself) is connected to the laptop. Context: Represents an interactive activity or exercise for the user to try out the concepts learned on the page.

    ✅ حلول أسئلة الكتاب الرسمية

    عدد الأسئلة: 1

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

    الإجابة: س: أنشئ فيديو باستخدام صور مايكروسوفت أنشئ في Microsoft Photos مشروع فيديو جديد، اختر عدة صور لكرة القدم، رتبها وأضف انتقالات/نص/موسيقى إذا رغبت، ثم صدّر الفيديو بصيغة MP4 واحفظه داخل مجلد موقعك (مثلاً داخل مجلد Videos). بعد ذلك افتح ملف صفحة مشجعي كرة القدم وأضف وسم/عنصر الفيديو مع تفعيل controls، واجعل مصدر الفيديو يشير إلى مسار الملف الصحيح (مثل: Videos/football.mp4) ليظهر الفيديو ويعمل داخل الصفحة.

    خطوات الحل:

    1. **الشرح:** هذا السؤال يتطلب منك تنفيذ مهمة عملية تتكون من مرحلتين رئيسيتين: الأولى هي إنشاء فيديو، والثانية هي إدراج هذا الفيديو في صفحة ويب. لنبدأ بالمرحلة الأولى: إنشاء الفيديو. الفكرة هنا هي استخدام تطبيق "صور Microsoft" (Microsoft Photos) الموجود عادةً على أجهزة Windows. داخل هذا التطبيق، يمكنك إنشاء مشروع فيديو جديد. ستقوم باختيار عدة صور من جهازك تتعلق بموضوع كرة القدم (مثل صور لاعبي كرة القدم، أو الملاعب، أو الكرة نفسها). بعد اختيار الصور، يمكنك ترتيبها بالتسلسل الذي تريده، وإضافة مؤثرات انتقالية بينها، وإضافة نصوص توضيحية أو موسيقى خلفية إذا أردت جعل الفيديو أكثر جاذبية. بعد الانتهاء من التعديلات، ستقوم بتصدير الفيديو وحفظه على جهازك. من المهم أن تحفظه بصيغة شائعة مثل MP4، وأن تحفظه داخل مجلد معين في موقعك على الويب، مثل مجلد باسم "Videos"، حتى يسهل الوصول إليه لاحقاً. المرحلة الثانية هي إضافة الفيديو إلى صفحة الويب الخاصة بمشجعي كرة القدم. هنا، ستحتاج إلى فتح ملف HTML الخاص بهذه الصفحة باستخدام محرر نصوص. داخل هذا الملف، ستضيف وسم الفيديو (مثل <video>) مع السمات المناسبة. من الضروري تفعيل عناصر التحكم (controls) حتى يتمكن الزوار من تشغيل الفيديو وإيقافه. الأهم هو جعل سمة المصدر (src) تشير إلى المسار الصحيح للملف الذي حفظته في المرحلة الأولى. على سبيل المثال، إذا كان الفيديو يحمل اسم football.mp4 وحفظته داخل مجلد Videos، فسيكون المسار شيئاً مثل Videos/football.mp4. بهذه الطريقة، عندما تفتح الصفحة في المتصفح، سيتم تحميل الفيديو وعرضه بشكل صحيح. إذن، الإجابة هي: **أنشئ فيديو في Microsoft Photos باستخدام صور كرة القدم، ثم أضف وسم الفيديو مع المسار الصحيح في صفحة HTML.**

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

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

    ما الغرض الأساسي من وسم <img> في لغة HTML عند إنشاء صفحة ويب؟

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

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

    الإجابة: إدراج صورة في صفحة الويب.

    الشرح: 1. وسم <img> هو وسوم HTML مخصص لإضافة الصور. 2. يستخدم السمة `src` لتحديد مسار ملف الصورة. 3. يمكن استخدام السمات `width` و `height` للتحكم في أبعاد العرض. 4. النتيجة: ظهور الصورة في المتصفح عند تحميل الصفحة.

    تلميح: فكر في الوسم الذي يسمح لك بعرض المحتوى المرئي من ملف خارجي.

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

    أي من السمات التالية في وسم <img> تُستخدم لتحديد مسار ملف الصورة الذي سيتم عرضه؟

    • أ) السمة alt.
    • ب) السمة href.
    • ج) السمة src.
    • د) السمة link.

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

    الإجابة: السمة src.

    الشرح: 1. وسم الصورة الأساسي هو <img>. 2. السمة `src` (مصدر) تحدد عنوان URL أو المسار المحلي لملف الصورة. 3. بدون السمة `src`، لن يعرف المتصفح أي صورة يعرض. 4. مثال: src="/Images/logo.jpg".

    تلميح: هذه السمة تشبه السمة المستخدمة في وسم <a> للروابط، لكنها للصور.

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

    ما الخطوة العملية الأولى لإنشاء فيديو من مجموعة صور باستخدام تطبيق Microsoft Photos تمهيداً لإضافته إلى موقع ويب؟

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

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

    الإجابة: إنشاء مشروع فيديو جديد داخل التطبيق.

    الشرح: 1. افتح تطبيق Microsoft Photos على جهازك. 2. ابحث عن خيار أو زر لإنشاء فيديو جديد أو مشروع فيديو. 3. اختر هذا الخيار لبدء مساحة عمل فارغة. 4. بعدها يمكنك استيراد الصور وترتيبها.

    تلميح: فكر في الإجراء الأولي داخل البرنامج قبل البدء بترتيب الصور أو الإضافة.

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

    بعد إنشاء فيديو في Microsoft Photos وتصديره، ما الإجراء الصحيح لإضافته إلى صفحة HTML بحيث يمكن للمستخدم التحكم فيه (تشغيل/إيقاف)؟

    • أ) إضافة وسم <img> والإشارة إلى ملف الفيديو في السمة src.
    • ب) إضافة وسم <video> مع تفعيل سمة controls وتحديد المسار الصحيح في src.
    • ج) نسخ ملف الفيديو إلى مجلد الصور فقط.
    • د) كتابة نص يصف الفيديو داخل وسم <p>.

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

    الإجابة: إضافة وسم <video> مع تفعيل سمة controls وتحديد المسار الصحيح في src.

    الشرح: 1. افتح ملف HTML لصفحتك بمحرر نصوص. 2. في المكان المناسب، أضف وسم <video>. 3. داخل الوسم، أضف السمة `controls` لتفعيل أزرار التشغيل. 4. أضف السمة `src` واجعل قيمتها مسار ملف الفيديو المحفوظ (مثل: Videos/myvideo.mp4). 5. النتيجة: ظهور مشغل فيديو يعمل في الصفحة.

    تلميح: تذكر أن هناك وسماً مخصصاً للفيديو مشابهاً لوسم الصورة، لكن مع سمة للتحكم.

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