نمط الجدول - كتاب التقنية الرقمية - الصف 11 - الفصل 1 - المملكة العربية السعودية

📚 نمط الجدول

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

نمط الجدول باستخدام CSS: استخدام ملف CSS خارجي لتطبيق خلفية ملونة وفراغ (Padding) على الجدول، مما يعطي شكلاً منسقاً.

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

```markmap

الفصل الخامس: لغة جافا سكريبت

طرق استدعاء الدالة sayHello

الطرق الصحيحة

• sayHello();

طرق خاطئة

• call sayHello();
• call function sayHello();
• function sayHello();

أخطاء التنفيذ

خطأ في التحويل البرمجي (Compile Error)

خطأ في وقت التشغيل (Runtime Error)

تغيير محتوى HTML

الدالة الصحيحة

• document.getElementById("id").innerHTML = "نص جديد";

ناتج تنفيذ مقاطع برمجية

مثال 1: نطاق المتغير var

• var a = 5; داخل if
• document.write(a); خارج if
• الناتج: 5

مثال 2: التعليقات في الكود

• //document.write("مرحباً");
• الناتج: لا تتم طباعة أي شيء

تدريب 3: إضافة JavaScript إلى HTML

المطلوب

• إضافة مقطع برمجي JavaScript إلى ملف HTML

الهدف

• عرض مربع تنبيه لزائري الصفحة

محتوى التنبيه

• "انتبه! معلومات الصفحة قديمة"

ملف HTML الأساسي

• يحتوي على هيكل صفحة عادية
• عنوان: "تبدأ بطولة كرة القدم المدرسية في الأول من نوفمبر"

تدريب 4: إضافة JavaScript لعرض التاريخ والوقت

المطلوب

• إضافة مقطع برمجي JavaScript إلى ملف HTML

الهدف

• عرض التاريخ والوقت

ملف HTML الأساسي

• يحتوي على عنوان: "احصل على معلومات حول التاريخ والوقت."

تدريب 5: إضافة JavaScript لعرض التاريخ والوقت (استكمال)

المطلوب

• إضافة مقطع برمجي جافا سكريبت إلى ملف HTML التالي

الهدف

• عرض التاريخ والوقت بالضغط على زر

ملف HTML الأساسي

• يحتوي على meta tags و title
• يحتوي على عنوان: "احصل على معلومات حول التاريخ والوقت"

تدريب 6: جعل شريط التنقل متجاوباً مع الهواتف

المطلوب

• فتح مجلد Adventure_Site
• إكمال المخطط

الهدف

• إضافة أيقونة القائمة لتناسب متصفح الهاتف الذكي

طريقة التنفيذ

• إضافة برنامج نصي (script) في HTML
• إجراء التغييرات المناسبة على استعلام الوسائط (media query) في ملف CSS

الدرس السادس: الرسائل الإخبارية الرقمية

الهدف

• إعلام الجمهور عبر بريد إلكتروني

القيود

• قيود على الحجم والتنسيق والتخطيط والتصميم

الأجزاء الرئيسية

• رأس الصفحة (Header)
• محتوى الرسالة الإخبارية (Newsletter Content)
• التذييل (Footer)

طريقة الإنشاء

• استخدام جدول HTML لإنشاء البنية

الدرس السابع: جدول HTML

هيكل الجدول

• يتكون من صفوف وأعمدة
• الأعمدة تُنشأ من خلال الخلايا

الوسوم الأساسية

• ``: يحدد بداية ونهاية الجدول
• ``: يحدد صفاً (Table Row)
• ``: يحدد خلية بيانات (Table Data)

مثال تطبيقي

• جدول عرض درجات الطلاب
• رؤوس الأعمدة: اسم الطالب، درجة الرياضيات، درجة التاريخ

إنشاء جدول درجات الطلبة في HTML

استخدام CSS للتصميم

• يمكن استخدام CSS لتنسيق الجدول (حدود، حشوة، محاذاة نص)

مثال كود HTML

• جدول بثلاثة طلاب ودرجاتهم في الرياضيات والتاريخ

الوسوم المستخدمة

• ``: لإضافة رأس العمود
• ``: لإنشاء صف

خطوات إنشاء الرسالة الإخبارية

1. تحديد المحتوى

• ربط المحتوى بالغرض.
• إنشاء العنوان والنص الرئيسان.
• تحديد وجود الصور والروابط.

2. ضبط الهيكل

• تقسيم الرسالة إلى أقسام.
• كل قسم له أسلوب مختلف.

3. إنشاء الملف وضبط النمط

• إنشاء ملف HTML ووضع المحتوى الرئيس.
• استكمال المحتوى وضبط النمط (Style).

4. اختبار الاستجابة

• اختبار مدى استجابة الرسالة على الهواتف الذكية.

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

• الرأس (Header)
• العنوان الرئيسي (Headline)
• النص (Text)
• الصورة (Image)
• التذييل (Footer)

إنشاء ملف HTML ووضع المحتوى فيه، وضبط نمط الرسالة

خطوات العمل

• إنشاء ملف HTML.
• إضافة المحتوى الرئيسي أولاً (رأس الصفحة، العنوان، النص، التذييل).
• إضافة المحتوى التكميلي (مثل الصورة).
• ضبط نمط كل قسم باستخدام CSS.

مثال تطبيقي

• إنشاء رسالة إخبارية عن فريق كرة القدم السعودي باستخدام جدول HTML.
• ربط ملف CSS خارجي لتنسيق الأقسام (مثل `class="headline1"` و `class="text1"`).

إضافة الصور إلى الرسائل الإخبارية

أهمية الصور

• تزيد من رغبة الشخص في قراءة الرسالة الإخبارية.

طرق إضافة الصور

• إضافة الصورة في خلايا الجدول.
• استخدام النمط المضمن لتحديد الأبعاد.
• تعيين الصورة لتشغل نسبة مئوية من عرض الخلية.

تطبيق الأنماط

• إضافة نمط إلى الصور وخلايا الجدول عبر ملف CSS خارجي.
• يتم تنسيق نمط الوسم `` وفقاً لفئة `.photos` في ملف CSS.

مثال تطبيقي

• في النمط المضمن، يمكن جعل الصورة تشغل 95% من عرض الخلية.

ملف CSS الخارجي للرسالة الإخبارية

نمط الجدول الرئيسي

• تطبيق خلفية بيضاء وفراغ (Padding) من الأعلى واليسار واليمين.

أمثلة على أنماط الخلايا

#### نمط العنوان الرئيسي (headline1)

• محاذاة النص لليمين.
• حجم خط 25px.
• خط عريض (Bold).
• فراغ أيمن 10px.

• محاذاة النص لليمين.
• حجم خط 18px.
• خط عادي (Normal).
• فراغ أيمن 10px وفراغ سفلي 30px.

نقاط مهمة

• يتم استخدام ملف CSS خارجي لتنسيق جدول الرسالة الإخبارية.
• يتم تطبيق أنماط CSS على الوسم `` نفسه وعلى خلاياه (مثل `

  `). الهدف من التنسيق هو إعطاء الجدول شكلاً منسقاً ومتناسقاً. 📋 المحتوى المنظم 📖 محتوى تعليمي مفصّل نمط الجدول نوع: محتوى تعليمي نمط الجدول نوع: محتوى تعليمي ستستخدم ملف CSS الخارجي لتصميم الرسالة الإخبارية. وبشكل أكثر تحديدًا، سيكون للجدول خلفية ملونة (Background) ملونة وفراغ (Padding) من أعلى ومن اليسار ومن اليمين، ثم يتم تطبيق لون الخلفية على الفراغ مما يعطي شكلاً منسقاً للجدول. ملف CSS الخارجي للرسالة الإخبارية نوع: محتوى تعليمي ملف CSS الخارجي للرسالة الإخبارية نوع: محتوى تعليمي .css نوع: محتوى تعليمي /*The CSS file of the newsletter*/ body { font-family: 'tahoma', 'Open Sans', sans-serif; } /* Add some padding and background color to the table.*/ table { background-color: white; padding-top: 25px; padding-left: 25px; padding-right: 25px; } نوع: محتوى تعليمي يؤثر على نمط خلية الجدول نوع: محتوى تعليمي <td class = "headline1"> نوع: محتوى تعليمي /*Style texts*/ .headline1 { padding-right: 10px; text-align: right; font-size: 25px; font-weight: bold; } نوع: محتوى تعليمي يؤثر على نمط خلية الجدول نوع: محتوى تعليمي <td class = "text1"> نوع: محتوى تعليمي .text1 { padding-right: 10px; padding-bottom: 30px; text-align: right; font-size: 18px; font-weight: normal; } نوع: METADATA وزارة التعليم Ministry of Education 2025 - 1447 📄 النص الكامل للصفحة --- SECTION: نمط الجدول --- نمط الجدول ستستخدم ملف CSS الخارجي لتصميم الرسالة الإخبارية. وبشكل أكثر تحديدًا، سيكون للجدول خلفية ملونة (Background) ملونة وفراغ (Padding) من أعلى ومن اليسار ومن اليمين، ثم يتم تطبيق لون الخلفية على الفراغ مما يعطي شكلاً منسقاً للجدول. --- SECTION: ملف CSS الخارجي للرسالة الإخبارية --- ملف CSS الخارجي للرسالة الإخبارية .css /*The CSS file of the newsletter*/ body { font-family: 'tahoma', 'Open Sans', sans-serif; } /* Add some padding and background color to the table.*/ table { background-color: white; padding-top: 25px; padding-left: 25px; padding-right: 25px; } يؤثر على نمط خلية الجدول <td class = "headline1"> /*Style texts*/ .headline1 { padding-right: 10px; text-align: right; font-size: 25px; font-weight: bold; } يؤثر على نمط خلية الجدول <td class = "text1"> .text1 { padding-right: 10px; padding-bottom: 30px; text-align: right; font-size: 18px; font-weight: normal; } وزارة التعليم Ministry of Education 2025 - 1447 🎴 بطاقات تعليمية للمراجعة عدد البطاقات: 4 بطاقة لهذه الصفحة ما الغرض الرئيسي من استخدام خاصية `padding` في CSS عند تصميم جدول؟ أ) لتغيير لون خلفية الجدول فقط. ب) لإضافة فراغ داخلي حول محتويات العنصر لتحسين الشكل والتنسيق. ج) لتحديد حجم الخط المستخدم داخل الجدول. د) لإنشاء حدود مرئية بين خلايا الجدول. الإجابة الصحيحة: b الإجابة: لإضافة فراغ داخلي حول محتويات العنصر لتحسين الشكل والتنسيق. الشرح: 1. خاصية `padding` في CSS تتحكم في المساحة الداخلية حول محتوى العنصر. 2. عند تطبيقها على جدول، تضيف فراغاً داخلياً بين محتوى الخلايا وحوافها. 3. هذا يحسن من شكل الجدول ويجعله أكثر تناسقاً وقراءة. تلميح: فكر في خاصية CSS التي تتحكم في المسافة بين محتوى العنصر وحافته. التصنيف: مفهوم جوهري | المستوى: سهل في CSS، ما الذي يفعله الكود `padding-top: 25px;` عند تطبيقه على عنصر `table`؟ أ) يضيف فراغاً خارجياً مقداره 25 بكسل من أعلى الجدول. ب) يغير ارتفاع الجدول إلى 25 بكسل. ج) يضيف فراغاً داخلياً مقداره 25 بكسل من أعلى الجدول. د) يحدد المسافة بين الجدول والعنصر الذي يعلوه بـ 25 بكسل. الإجابة الصحيحة: c الإجابة: يضيف فراغاً داخلياً مقداره 25 بكسل من أعلى الجدول. الشرح: 1. `padding-top` هي خاصية CSS تتحكم في الفراغ الداخلي من الجانب العلوي للعنصر. 2. القيمة `25px` تعني 25 بكسل. 3. بالتالي، يضيف هذا الكود مسافة داخلية (فراغ) مقدارها 25 بكسل بين محتوى الجدول وحافته العلوية. تلميح: ركز على معنى `padding-top` ووحدة القياس `px`. التصنيف: تعريف | المستوى: سهل ما الفرق بين خاصية `padding` وخاصية `margin` في CSS؟ أ) كلاهما يتحكمان في لون خلفية العنصر. ب) `padding` تتحكم في الفراغ الداخلي بين محتوى العنصر وحافته، بينما `margin` تتحكم في الفراغ الخارجي حول العنصر. ج) `margin` تتحكم في الفراغ الداخلي، بينما `padding` تتحكم في الفراغ الخارجي. د) كلاهما يتحكمان في حجم الخط داخل العنصر. الإجابة الصحيحة: b الإجابة: `padding` تتحكم في الفراغ الداخلي بين محتوى العنصر وحافته، بينما `margin` تتحكم في الفراغ الخارجي حول العنصر. الشرح: 1. `padding`: مساحة داخلية، تضيف فراغاً داخل حدود العنصر، بين المحتوى والحد. 2. `margin`: مساحة خارجية، تضيف فراغاً خارج حدود العنصر، بين الحد والعناصر المجاورة. 3. في سياق الجدول، `padding` تؤثر على المساحة داخل الخلايا، بينما `margin` تؤثر على المساحة حول الجدول ككل. تلميح: فكر في المسافة من الداخل (بين المحتوى والحد) مقابل المسافة من الخارج (بين الحد والعناصر الأخرى). التصنيف: فرق بين مفهومين | المستوى: متوسط ما تأثير تطبيق الكود `.headline1 { text-align: right; }` على خلية جدول؟ أ) يُحاذي النص داخل الخلية إلى الوسط. ب) يُحاذي النص داخل الخلية إلى اليسار. ج) يُحاذي النص داخل الخلية إلى اليمين. د) يغير اتجاه الكتابة من اليمين لليسار. الإجابة الصحيحة: c الإجابة: يُحاذي النص داخل الخلية إلى اليمين. الشرح: 1. خاصية `text-align` في CSS تتحكم في المحاذاة الأفقية للنص. 2. القيمة `right` تعني محاذاة النص إلى الجانب الأيمن من العنصر الحاوي له (الخلية). 3. بالتالي، سيظهر أي نص داخل خلية تطبق عليها هذه الفئة (`class='headline1'`) محاذياً لليمين. تلميح: ركز على معنى خاصية `text-align` وقيمة `right`. التصنيف: مفهوم جوهري | المستوى: سهل