📚 إنشاء زر باستخدام جافا سكريبت

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

وظيفة جافا سكريبت (Function): كتلة من التعليمات البرمجية تُنفذ عند استدعائها. تُعلن داخل الأقواس المتعرجة `{}`.

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

```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"`)

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