📚 الموقع الإلكتروني التفاعلي

المفاهيم الأساسية

الموقع الإلكتروني التفاعلي: موقع يقبل مدخلات المستخدم ويغير محتواه وفقًا لذلك.

جافا سكريبت (JavaScript - JS): لغة برمجة عالية المستوى تُستخدم لجعل صفحات HTML أكثر ديناميكية وتفاعلية.

المقطع البرمجي في جافا سكريبت: يُكتب بين الوسمين ``، ويمكن أن يكون داخل صفحة HTML أو في ملف خارجي.

خريطة المفاهيم

```markmap

تصميم الموقع الإلكتروني

الموقع الإلكتروني المستجيب

التصميم المستجيب

#### الأدوات

##### استعلامات الوسائط (Media Queries)

###### أماكن الاستخدام

####### داخل ملف HTML (CSS الداخلي)

######### مثال تطبيقي

########## تدريب 2

########### المطلوب: إضافة استعلام وسائط إلى مقطع HTML معطى

########### الشرط: `@media screen and (max-width: 600px)`

########### الإجراء: (يجب على الطالب تحديده)

########### المقطع البرمجي الأساسي

############ يحتوي على:

############- إعدادات الصفحة (``، `dir="rtl"`)

############- تنسيق CSS داخلي (لون خلفية `grey`)

############- محتوى HTML (`

`، `

`)

########## تدريب 3

########### المطلوب: تنسيق جزء `div` معين

########### التنسيقات المطلوبة:

############- ضبط الهامش (Margin): 20 بكسل

############- تلوين النص: أخضر

############- ضبط الحدود (Border): 3 بكسل، لون أسود، ثابت (Solid)

############- إضافة استعلام وسائط: لتغيير لون الخلفية إذا كانت الشاشة أصغر من 600 بكسل

########### المقطع البرمجي الأساسي

############ يحتوي على:

############- إعدادات الصفحة (``، `dir="rtl" lang="ar"`)

############- تنسيق CSS داخلي (لون خلفية `lightgrey` للعنوان `h1`)

############- محتوى HTML (`

`، `

`، `

`)

########## تدريب 4

########### المطلوب: تنسيق صورة في موقع إلكتروني

########### التنسيقات المطلوبة:

############- ضبط عرض الصورة: 150 بكسل

############- ضبط ارتفاع الصورة: 100 بكسل

############- ضبط خاصية نصف قطر الإطار (border-radius): 5 بكسل

############- استخدام استعلامات الوسائط: لتغيير حجم الصورة إذا كانت الشاشة أصغر من 500 بكسل

########### المقطع البرمجي الأساسي

############ يحتوي على:

############- إعدادات الصفحة (``، `dir="rtl" lang="ar"`)

############- قسم `