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

سؤال تدريب 2: أنشئ صفحة إلكترونية تتكون من قائمة غير مرتبة بعنوان "البريد الإلكتروني للأصدقاء". تتضمن هذه الصفحة عناوين البريد الإلكتروني لأصدقائك، ويتم فتح تطبيق البريد الإلكتروني في علامة تبويب مختلفة وذلك عند الضغط على أحد هذه العناوين.

الإجابة: س2: عنوان: البريد الإلكتروني للأصدقاء قائمة بريد (mailto, target = _blank)

خطوات الحل:

1. **الشرح:** لنفهم هذا السؤال. المطلوب هو إنشاء صفحة إلكترونية تحتوي على قائمة غير مرتبة (unordered list) بعنوان "البريد الإلكتروني للأصدقاء". هذه القائمة ستتضمن عناوين البريد الإلكتروني لأصدقائك. الفكرة هنا هي أن كل عنصر في هذه القائمة يجب أن يكون رابطًا (link) لعنوان بريد إلكتروني. لإنشاء رابط لبريد إلكتروني، نستخدم السمة `href` مع البادئة `mailto:` متبوعة بعنوان البريد الإلكتروني، مثل `mailto:friend@example.com`. بالإضافة إلى ذلك، المطلوب أن يفتح هذا الرابط (أي تطبيق البريد الإلكتروني) في علامة تبويب (نافذة) جديدة. لتحقيق هذا، نستخدم السمة `target` مع القيمة `_blank` داخل وسم الرابط `<a>`. إذن، هيكل الكود سيكون: قائمة غير مرتبة `<ul>`، داخلها عناصر قائمة `<li>`، وكل `<li>` يحتوي على رابط `<a>` له السمة `href="mailto:عنوان_البريد"` والسمة `target="_blank"`. لذلك الإجابة هي: **عنوان: البريد الإلكتروني للأصدقاء، قائمة بريد (mailto, target = _blank)**

سؤال تدريب 3: أنشئ قائمة عناصر مرتبة تتكون من 3 روابط لمواقع مختلفة يفتح كل منها في نافذة جديدة. < أنشئ قائمة بأطعمتك المفضلة. < اعرض صورة بحيث يتم فتح صفحة إلكترونية لمحرك بحث من اختيارك (مع مراعاة أن يفتح في نافذة جديدة) وذلك عند الضغط على تلك الصورة.

الإجابة: س3: 1) قائمة مواقع (target = _blank) 2) قائمة أطعمة 3) صورة برابط (target = _blank)

خطوات الحل:

1. **الشرح:** هذا السؤال يتكون من ثلاثة أجزاء. **الجزء الأول:** أنشئ قائمة عناصر مرتبة (ordered list) تتكون من 3 روابط لمواقع مختلفة. المطلوب أن يفتح كل رابط في نافذة جديدة. لذلك، نستخدم وسم القائمة المرتبة `<ol>` مع ثلاثة عناصر `<li>`، وكل `<li>` يحتوي على رابط `<a>` له السمة `href="رابط_الموقع"` والسمة `target="_blank"`. **الجزء الثاني:** أنشئ قائمة بأطعمتك المفضلة. هذه قائمة عادية، يمكن أن تكون مرتبة أو غير مرتبة حسب التفضيل، مثل استخدام `<ul>` أو `<ol>` مع عناصر `<li>` للنصوص مثل "بيتزا"، "شوكولاتة"، إلخ. **الجزء الثالث:** اعرض صورة بحيث يتم فتح صفحة إلكترونية لمحرك بحث من اختيارك (مثل Google) في نافذة جديدة عند الضغط على الصورة. لتحقيق هذا، نضع الصورة داخل رابط. نستخدم وسم الرابط `<a>` مع السمة `href="رابط_محرك_البحث"` والسمة `target="_blank"`، وداخل الرابط نضع وسم الصورة `<img>` مع السمة `src="مسار_الصورة"`. إذن الإجابة تلخص هذه الأجزاء: **1) قائمة مواقع (target = _blank) 2) قائمة أطعمة 3) صورة برابط (target = _blank)**

سؤال تدريب 4: استمر بإنشاء الموقع الإلكتروني الذي أنشأته في الدرس السابق الخاص بالمعلومات السياحية للمسافرين. افتح مجلد "Adventure_website" في فيجوال ستوديو كود ونفذ ما يلي: < أنشئ قائمة غير مرتبة من العناصر التالية: الصفحة الرئيسة، حول، ألبوم الصور، الاتصال. ستكون هذه القائمة شريط تنقل حيث يتم ربط كل عنصر بقسم خاص به من الصفحة. < أضف الصور التي تريدها. < أضف مقطع فيديو. < أنشئ قائمة غير مرتبة أسفل الصفحة تحتوي على روابط مفيدة للمستخدم، كما يمكنك إضافة بريدك الإلكتروني لكي يتمكن المستخدم من الاتصال بك.

الإجابة: س4: شريط تنقل (#id) صور (alt) وفيديو (controls) قائمة روابط (mailto)

خطوات الحل:

1. **الشرح:** لنفهم هذا السؤال. المطلوب هو الاستمرار في إنشاء موقع إلكتروني للمعلومات السياحية، وتنفيذ عدة مهام. **المهمة الأولى:** إنشاء قائمة غير مرتبة (unordered list) من العناصر: الصفحة الرئيسة، حول، ألبوم الصور، الاتصال. هذه القائمة ستكون شريط تنقل (navigation bar)، حيث يتم ربط كل عنصر بقسم خاص به من الصفحة. لربط عنصر بقسم في نفس الصفحة، نستخدم الروابط الداخلية (internal links). نعطي كل قسم في الصفحة معرّفًا (id) مثل `id="home"`، ثم في رابط القائمة نستخدم `href="#home"`. لذلك، ننشئ قائمة `<ul>` مع عناصر `<li>`، وكل `<li>` يحتوي على رابط `<a>` مثل `<a href="#home">الصفحة الرئيسة</a>`. **المهمة الثانية:** إضافة الصور التي تريدها. نستخدم وسم الصورة `<img>` مع السمة `src` لمسار الصورة والسمة `alt` للنص البديل لوصف الصورة. **المهمة الثالثة:** إضافة مقطع فيديو. نستخدم وسم الفيديو `<video>` مع السمة `src` لمسار الفيديو والسمة `controls` لعرض عناصر التحكم مثل التشغيل والإيقاف. **المهمة الرابعة:** إنشاء قائمة غير مرتبة أسفل الصفحة تحتوي على روابط مفيدة للمستخدم، وإضافة بريدك الإلكتروني للاتصال. ننشئ قائمة `<ul>` أخرى مع روابط خارجية (external links) باستخدام `<a href="رابط_مفيد">`، وللبريد الإلكتروني نستخدم `mailto:` كما في السؤال السابق. إذن الإجابة تلخص هذه المهام: **شريط تنقل (#id)، صور (alt) وفيديو (controls)، قائمة روابط (mailto)**

لإنشاء رابط بريد إلكتروني في صفحة ويب يفتح تطبيق البريد في علامة تبويب جديدة، ما الصيغة الصحيحة لوسم الرابط <a>؟

• أ) <a href="http://example@email.com" target="_new">
• ب) <a href="mailto:example@email.com" target="_blank">
• ج) <a src="mailto:example@email.com" newtab="yes">
• د) <a link="example@email.com" open="new">

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

الإجابة: <a href="mailto:example@email.com" target="_blank">

الشرح: 1. لإنشاء رابط لبريد إلكتروني، نستخدم السمة `href` مع البادئة `mailto:` متبوعة بالعنوان. 2. لجعل الرابط يفتح في علامة تبويب أو نافذة جديدة، نضيف السمة `target="_blank"`. 3. الصيغة النهائية هي: <a href="mailto:example@email.com" target="_blank">النص</a>.

تلميح: تذكر البادئة المستخدمة للبريد الإلكتروني والسمة التي تتحكم في مكان فتح الرابط.

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

أي مما يلي يصف بشكل صحيح كيفية إنشاء شريط تنقل باستخدام قائمة غير مرتبة بحيث يربط كل عنصر بقسم داخل نفس الصفحة؟

• أ) استخدام السمة `src` مع مسار ملف HTML منفصل لكل قسم.
• ب) إعطاء كل قسم معرّف (id) واستخدامه مع رمز # في سمة href للرابط.
• ج) كتابة عنوان URL كامل للصفحة ثم إضافة اسم القسم بعده.
• د) استخدام JavaScript لكتابة محتوى كل قسم ديناميكياً عند النقر.

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

الإجابة: إعطاء كل قسم معرّف (id) واستخدامه مع رمز # في سمة href للرابط.

الشرح: 1. نعطي القسم المستهدف في الصفحة معرّفاً باستخدام السمة `id`، مثل: <div id="home">. 2. في رابط القائمة (شريط التنقل)، نستخدم السمة `href` مع قيمة تبدأ برمز # متبوعة باسم المعرّف، مثل: <a href="#home">الصفحة الرئيسة</a>. 3. عند النقر على الرابط، سينتقل المتصفح تلقائياً إلى ذلك القسم.

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

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

عند إضافة صورة إلى صفحة ويب، ما السمة الإلزامية التي يجب تضمينها لضمان إمكانية الوصول وفهم المحتوى إذا لم تظهر الصورة؟

• أ) السمة `title` لعنوان الصورة.
• ب) السمة `alt` للنص البديل.
• ج) السمة `description` للوصف التفصيلي.
• د) السمة `caption` للتعليق أسفل الصورة.

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

الإجابة: السمة `alt` للنص البديل.

الشرح: 1. السمة `alt` (اختصار لـ alternative text) توفر وصفاً نصياً للصورة. 2. وظائفها: تحسين إمكانية الوصول (لضعاف البصر)، عرض نص بديل إذا فشل تحميل الصورة، وتحسين محركات البحث (SEO). 3. مثال: <img src="logo.png" alt="شعار الشركة">.

تلميح: هذه السمة مهمة لوصف الصورة للمستخدمين الذين يستخدمون قارئات الشاشة أو عندما لا يتم تحميل الصورة.

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

لجعل مقطع فيديو مضاف إلى صفحة ويب قابلاً للتحكم فيه من قبل المستخدم (تشغيل، إيقاف، تحكم في الصوت)، ما السمة التي يجب إضافتها إلى وسم <video>؟

• أ) السمة `autoplay` للتشغيل التلقائي.
• ب) السمة `player` لعرض مشغل الفيديو.
• ج) السمة `controls`.
• د) السمة `toolbar` لشريط الأدوات.

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

الإجابة: السمة `controls`.

الشرح: 1. وسم `<video>` يستخدم لتضمين مقاطع الفيديو. 2. إضافة السمة `controls` (بدون قيمة أو بقيمة `controls="controls"`) تعرض عناصر التحكم الافتراضية للمتصفح. 3. تشمل عناصر التحكم عادةً أزرار التشغيل/الإيقاف، شريط التقدم، والتحكم في مستوى الصوت. 4. مثال: <video src="movie.mp4" controls></video>.

تلميح: هذه السمة تضيف شريط أدوات قياسي أسفل الفيديو.

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