183

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

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

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

📝 ملخص الصفحة

ملخص المحتوى التعليمي للصفحة:

يشرح هذا الجزء كيفية إضافة الصور إلى موقع إلكتروني بطريقة احترافية. من الممارسات الجيدة تنظيم ملفات الموقع عن طريق إنشاء مجلد فرعي منفصل باسم "Images" لحفظ جميع الصور المستخدمة.

عند استخدام محرر فيجوال ستوديو كود (Visual Studio Code)، يمكن معاينة جميع ملفات الصور المتاحة للاستخدام من خلال قسم "المستكشف" (Explorer) حيث يظهر مجلد "Images".

لإضافة صورة إلى صفحة الويب، يُستخدم وسم HTML ``. من المهم ملاحظة أن هذا الوسم لا يحتوي على وسم إغلاق منفصل.

يحتوي وسم `` على عدة خصائص (سمات) أساسية:

* `src`: تُستخدم لتحديد مسار ملف الصورة، مما يخبر المتصفح أين يمكنه العثور عليها.

* `alt`: توفر وصفًا نصيًا للصورة، يظهر في حالة عدم قدرة المتصفح على عرض الصورة.

* `width`: تحدد عرض الصورة بوحدة البكسل.

* `height`: تحدد ارتفاع الصورة بوحدة البكسل.

يظهر نموذج للوسم الكامل كما يلي:

` description `

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

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

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

إضافة الصور ومقاطع الفيديو

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

من المهم إضافة الصور في الموقع الإلكتروني الخاص بك وإظهارها بطريقة جذابة واحترافية. من الممارسات الجيدة الاحتفاظ بالصور في
مجلد منفصل عن باقي ملفات الموقع، لذلك تم إنشاء مجلد فرعي باسم "Images" يتم فيه إضافة الصور التي ستسخدمها في موقعك.

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

عند استخدام فيجوال ستوديو كود
Explorer وفي قسم ،)Visual Studio Code(
المستكشف)، يوجد مجلد فرعي باسم Images
(الصور) يمكنك من معاينة جميع ملفات الصور
المتاحة للاستخدام في الموقع.

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

يُستخدم وسم <img> لإضافة صور إلى
الصفحة الإلكترونية. يجب الانتباه إلى أن
هذا الوسم لا يحتوي على وسم إغلاق.

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

يتم إخبار المتصفح بموقع
العثور على ملف الصورة.

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

<img src="file's path" alt="description" width="600" height="400"/>

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

يتم تحديد عرض الصورة
بوحدة البكسل.

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

يتم تحديد ارتفاع
الصورة بوحدة البكسل.

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

يوفر وصفا نصيا للصورة إن لم
تستطع أن تراها.

نوع: METADATA

وزارة التعليم
Ministry of Education
2025 - 1447

🔍 عناصر مرئية

File explorer window showing images in a folder.

Visual Studio Code explorer window showing the project structure.

Diagram explaining the attributes of the <img> tag.

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

إضافة الصور ومقاطع الفيديو

من المهم إضافة الصور في الموقع الإلكتروني الخاص بك وإظهارها بطريقة جذابة واحترافية. من الممارسات الجيدة الاحتفاظ بالصور في
مجلد منفصل عن باقي ملفات الموقع، لذلك تم إنشاء مجلد فرعي باسم "Images" يتم فيه إضافة الصور التي ستسخدمها في موقعك.

عند استخدام فيجوال ستوديو كود
Explorer وفي قسم ،)Visual Studio Code(
المستكشف)، يوجد مجلد فرعي باسم Images
(الصور) يمكنك من معاينة جميع ملفات الصور
المتاحة للاستخدام في الموقع.

يُستخدم وسم <img> لإضافة صور إلى
الصفحة الإلكترونية. يجب الانتباه إلى أن
هذا الوسم لا يحتوي على وسم إغلاق.

يتم إخبار المتصفح بموقع
العثور على ملف الصورة.

<img src="file's path" alt="description" width="600" height="400"/>

يتم تحديد عرض الصورة
بوحدة البكسل.

يتم تحديد ارتفاع
الصورة بوحدة البكسل.

يوفر وصفا نصيا للصورة إن لم
تستطع أن تراها.

--- SECTION: 183 ---
وزارة التعليم
Ministry of Education
2025 - 1447

--- VISUAL CONTEXT ---
**IMAGE**: Untitled
Description: File explorer window showing images in a folder.
Table Structure:
Headers: N/A
Context: Illustrates how to organize images in a website project.

**IMAGE**: Untitled
Description: Visual Studio Code explorer window showing the project structure.
Table Structure:
Headers: N/A
Context: Demonstrates how to view project files in Visual Studio Code.

**IMAGE**: Untitled
Description: Diagram explaining the attributes of the <img> tag.
Table Structure:
Headers: N/A
Context: Explains how to use the <img> tag to embed images in HTML.

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

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

ما هو الوسم المستخدم في HTML لإضافة صور إلى الصفحة الإلكترونية؟

أ) وسم <picture>
ب) وسم <image>
ج) وسم <img>
د) وسم <src>

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

الإجابة: وسم <img>

الشرح: يستخدم وسم <img> لإدراج الصور في صفحات HTML. وهو من الوسوم الفارغة (لا يحتاج وسم إغلاق). يتم تحديد مصدر الصورة وخصائصها باستخدام السمات (Attributes) مثل src و alt.

تلميح: هذا الوسم لا يحتوي على وسم إغلاق.

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

ما هي الممارسة الجيدة لتنظيم الصور في مشروع موقع إلكتروني؟

أ) تخزين جميع الصور في المجلد الرئيسي للمشروع.
ب) تضمين الصور مباشرة داخل ملفات HTML.
ج) الاحتفاظ بالصور في مجلد فرعي منفصل باسم 'Images'.
د) استخدام روابط خارجية للصور فقط.

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

الإجابة: الاحتفاظ بالصور في مجلد فرعي منفصل باسم 'Images'.

الشرح: من الممارسات الجيدة فصل ملفات الوسائط (مثل الصور) عن ملفات الكود لتنظيم المشروع وسهولة الصيانة. إنشاء مجلد فرعي باسم 'Images' هو طريقة شائعة لتحقيق ذلك.

تلميح: تتعلق بتنظيم ملفات المشروع.

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

ما هي وظيفة السمة 'alt' في وسم <img> في HTML؟

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

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

الإجابة: توفر وصفاً نصياً للصورة إن لم تستطع رؤيتها.

الشرح: السمة 'alt' (النص البديل) توفر وصفاً نصياً للصورة. هذا الوصف مهم لـ: 1. تحسين إمكانية الوصول للمستخدمين ضعاف البصر. 2. ظهور نص بديل إذا فشل تحميل الصورة. 3. تحسين محركات البحث (SEO).

تلميح: تساعد في إمكانية الوصول (Accessibility).

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

أي من الأكواد التالية يمثل التركيب الصحيح لوسم <img> لإضافة صورة بعرض 600 بكسل وارتفاع 400 بكسل؟

أ) <img src="مسار/الصورة.jpg" width="600" height="400">وصف الصورة</img>
ب) <image src="مسار/الصورة.jpg" alt="وصف الصورة" width="600" height="400"/>
ج) <img src="مسار/الصورة.jpg" alt="وصف الصورة" width="600" height="400"/>
د) <img href="مسار/الصورة.jpg" alt="وصف الصورة" size="600x400"/>

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

الإجابة: <img src="مسار/الصورة.jpg" alt="وصف الصورة" width="600" height="400"/>

الشرح: التركيب الصحيح لوسم الصورة يتضمن: 1. اسم الوسم <img>. 2. السمة src لمصدر الصورة. 3. السمة alt للوصف النصي. 4. السمات width و height للأبعاد (اختيارية ولكن موصى بها). الوسم يغلق بــ '/' قبل '>' لأنه وسم فارغ.

تلميح: تأكد من ترتيب السمات وعدم وجود وسم إغلاق.

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