ودالة class
محددات CSS
محدد Class (.)
#### استخدام النقطة (.) قبل اسم class
#### مثال: تنسيق قسم menu class
خصائص نموذج الصندوق (Box-Model)
الإطار (Border)
#### حدود تفصل بين حافة كل صندوق عن الآخر
الهامش (Margin)
#### المساحة خارج حدود الإطار
الفراغ (Padding)
#### المسافة ما بين الإطار والمحتوى
الموقع الإلكتروني المستجيب
تعريف
#### أسلوب تصميم يستجيب لخصائص الجهاز والمستخدم
مزايا
#### تحسين تجربة المستخدم
##### يتكيف مع حجم الشاشة المختلفة
##### يوفر تجربة تصفح سهلة وممتعة
#### سهولة التحديث
##### تحديث موقع واحد فقط بدلاً من مواقع متعددة
#### توفير المال
##### إنشاء موقع واحد يناسب جميع المستخدمين بدلاً من مواقع منفصلة
التصميم المستجيب
#### الأدوات
##### شبكة تخطيطية (Schematic Grid)
##### النسب المئوية للصورة
##### إطار العرض ميتا (Meta Viewport)
##### استعلامات الوسائط (Media Queries)
#### إطار العرض (Viewport)
##### التنفيذ القياسي
###### ``
###### العرض يضبط وفقًا لعرض الجهاز
###### مستوى التكبير الأولي هو 100%
###### النتيجة: صفحة مستجيبة سهلة القراءة على الهاتف (كما في الشكل 1)
##### بدون وسم إطار العرض
###### تعرض الصفحات بعرض قياسي لشاشة الحاسب
###### يتم تصغيرها لتلائم شاشة الهاتف
###### يحتاج المستخدم إلى تكبير الصفحة للتصفح
###### النتيجة: صفحة غير مستجيبة، نص وصور صغيرة جدًا (كما في الشكل 2)
```
نقاط مهمة
- يمكن تطبيق عنصر إطار العرض على صفحة ويب موجودة (مثل صفحة مشجعي كرة القدم).
- يضاف وسم إطار العرض داخل قسم `` في مستند HTML.
- الهدف منه جعل الموقع مستجيبًا، أي يتكيف مع أحجام الشاشات المختلفة.
- الفرق بين استخدام الوسم وعدم استخدامه واضح في تجربة المستخدم على الهاتف المحمول.
📋 المحتوى المنظم
📖 محتوى تعليمي مفصّل
نوع: محتوى تعليمي
يمكنك الآن استخدام عنصر إطار العرض في صفحة مشجعي كرة القدم التي أنشأتها سابقًا.
نوع: FIGURE_REFERENCE
.html
نوع: FIGURE_REFERENCE
عنصر إطار العرض.
نوع: محتوى تعليمي
باستخدام وسم إطار العرض ميتا.
نوع: محتوى تعليمي
بدون استخدام وسم إطار العرض ميتا.
نوع: METADATA
وزارة التعليم
Ministry of Education
2025 - 1447
نوع: METADATA
256
🔍 عناصر مرئية
A block of HTML code showing the `<head>` section of a web page. It includes `<title>`, `<meta charset>`, `<meta name="viewport">`, and `<link rel="stylesheet">` tags. An arrow points from the `content="width=device-width, initial-scale=1.0"` attribute of the `<meta name="viewport">` tag to a label 'عنصر إطار العرض.'. This code snippet illustrates the structure of an HTML document's head.
A diagram of a mobile phone screen displaying a web page. The page is well-formatted and responsive, showing content clearly. The navigation bar at the top has options: 'المعرض', 'التاريخ', 'نبذة', 'اتصل بنا', 'الصفحة الرئيسية'. The main content includes a title 'نعمل كرة القدم على جمع الناس معًا' and a subtitle 'الهدف من جمع الجمهور في هذه اللعبة هو تشجيع اللاعبين في أثناء المباراة.'. Below that is a section titled 'التاريخ' with a paragraph of text, and then a 'المعرض' section with images of the FIFA World Cup trophy and a football stadium with players. The text is readable, and images are appropriately scaled.
A diagram of a mobile phone screen displaying the same web page as Visual Element 1, but without the viewport meta tag. The page appears zoomed out, with very small text and images, making it difficult to read and interact with. The navigation bar and content are visible but scaled down significantly, showing the entire desktop version of the page on a small screen. The content is identical to Visual Element 1, but its presentation is poor.
📄 النص الكامل للصفحة
يمكنك الآن استخدام عنصر إطار العرض في صفحة مشجعي كرة القدم التي أنشأتها سابقًا.
.html
عنصر إطار العرض.
باستخدام وسم إطار العرض ميتا.
بدون استخدام وسم إطار العرض ميتا.
وزارة التعليم
Ministry of Education
2025 - 1447
256
--- VISUAL CONTEXT ---
**DIAGRAM**: Untitled
Description: A block of HTML code showing the `<head>` section of a web page. It includes `<title>`, `<meta charset>`, `<meta name="viewport">`, and `<link rel="stylesheet">` tags. An arrow points from the `content="width=device-width, initial-scale=1.0"` attribute of the `<meta name="viewport">` tag to a label 'عنصر إطار العرض.'. This code snippet illustrates the structure of an HTML document's head.
Context: Illustrates the HTML code for defining the viewport meta tag, crucial for responsive web design.
**FIGURE**: Untitled
Description: A diagram of a mobile phone screen displaying a web page. The page is well-formatted and responsive, showing content clearly. The navigation bar at the top has options: 'المعرض', 'التاريخ', 'نبذة', 'اتصل بنا', 'الصفحة الرئيسية'. The main content includes a title 'نعمل كرة القدم على جمع الناس معًا' and a subtitle 'الهدف من جمع الجمهور في هذه اللعبة هو تشجيع اللاعبين في أثناء المباراة.'. Below that is a section titled 'التاريخ' with a paragraph of text, and then a 'المعرض' section with images of the FIFA World Cup trophy and a football stadium with players. The text is readable, and images are appropriately scaled.
Context: This screen demonstrates the correct rendering of a web page on a mobile device when the viewport meta tag is used, resulting in a user-friendly and readable layout.
**FIGURE**: Untitled
Description: A diagram of a mobile phone screen displaying the same web page as Visual Element 1, but without the viewport meta tag. The page appears zoomed out, with very small text and images, making it difficult to read and interact with. The navigation bar and content are visible but scaled down significantly, showing the entire desktop version of the page on a small screen. The content is identical to Visual Element 1, but its presentation is poor.
Context: This screen demonstrates the incorrect rendering of a web page on a mobile device when the viewport meta tag is omitted, leading to a poor user experience due to non-responsive scaling.
🎴 بطاقات تعليمية للمراجعة
عدد البطاقات: 3 بطاقة لهذه الصفحة
ما هو الغرض الأساسي من استخدام وسم `<meta name="viewport">` في تصميم صفحات الويب؟
- أ) تسريع تحميل الصفحة عن طريق تخزين الملفات مؤقتاً.
- ب) إضافة تأثيرات مرئية متحركة إلى عناصر الصفحة.
- ج) جعل صفحة الويب تستجيب وتتكيف مع أحجام شاشات الأجهزة المختلفة، مما يوفر تجربة مستخدم أفضل.
- د) تشفير محتوى الصفحة لحمايته من القرصنة.
الإجابة الصحيحة: c
الإجابة: جعل صفحة الويب تستجيب وتتكيف مع أحجام شاشات الأجهزة المختلفة، مما يوفر تجربة مستخدم أفضل.
الشرح: 1. وسم viewport meta هو جزء من رأس HTML. 2. يتحكم في عرض ومقياس الصفحة على الأجهزة المحمولة. 3. بدون هذا الوسم، قد تظهر الصفحة مكبّرة بشكل غير مناسب على الشاشات الصغيرة. 4. مع الوسم، يتم ضبط عرض الصفحة ليتناسب مع عرض الجهاز (width=device-width) ويتم تعيين مستوى التكبير الابتدائي (initial-scale=1.0).
تلميح: فكر في كيفية ظهور نفس الصفحة على الهاتف المحمول مقارنة بالحاسوب المكتبي.
التصنيف: مفهوم جوهري | المستوى: متوسط
ما الذي يحدث عادةً لعرض صفحة ويب على جهاز محمول إذا تم حذف وسم `<meta name="viewport">` من رأس HTML؟
- أ) ستظهر الصفحة بنفس الشكل المثالي كما على الحاسوب المكتبي دون أي تغيير.
- ب) ستظهر الصفحة مكبّرة بشكل غير مناسب، مع نص وعناصر صغيرة جداً يصعب قراءتها والتعامل معها.
- ج) لن يتم تحميل أي محتوى مرئي للصفحة على الإطلاق.
- د) سيتم تحويل المستخدم تلقائياً إلى نسخة الهاتف المحمول من الموقع.
الإجابة الصحيحة: b
الإجابة: ستظهر الصفحة مكبّرة بشكل غير مناسب، مع نص وعناصر صغيرة جداً يصعب قراءتها والتعامل معها.
الشرح: 1. في غياب وسم viewport، يفترض المتصفح أن عرض الصفحة مصمم لشاشة حاسوب مكتبي واسعة. 2. يحاول عرض هذه الصفحة 'العريضة' على شاشة الهاتف الصغيرة. 3. يؤدي هذا إلى تصغير كامل محتوى الصفحة ليتناسب مع الشاشة. 4. النتيجة النهائية: نص وعناصر وروابط صغيرة جداً، مما يجعل التجربة سيئة ويصعب التفاعل مع الصفحة.
تلميح: تذكر أن المتصفحات تتعامل مع الصفحات التي ليس لها viewport كما لو كانت مصممة لشاشة مكتبية كبيرة.
التصنيف: مفهوم جوهري | المستوى: سهل
أي من الأكواد التالية يمثل الاستخدام الصحيح لوسم `<meta name="viewport">` لجعل صفحة الويب متجاوبة مع الأجهزة المحمولة؟
- أ) <meta viewport="width=device-width, scale=1.0">
- ب) <meta name="viewport" content="width=device-width, initial-scale=1.0">
- ج) <viewport meta="responsive" content="mobile-friendly">
- د) <link rel="viewport" href="responsive.css">
الإجابة الصحيحة: b
الإجابة: <meta name="viewport" content="width=device-width, initial-scale=1.0">
الشرح: 1. الوسم الصحيح يبدأ بـ `<meta name="viewport"`. 2. السمة `content` تحتوي على التعليمات الأساسية. 3. `width=device-width` تخبر المتصفح بجعل عرض الصفحة مساوياً لعرض شاشة الجهاز. 4. `initial-scale=1.0` تضبط مستوى التكبير الابتدائي إلى 100% (بدون تكبير أو تصغير).
تلميح: ابحث عن السمة التي تحدد العرض ليكون مساوياً لعرض الجهاز، وتضبط مستوى التكبير الابتدائي.
التصنيف: صيغة/خطوات | المستوى: متوسط