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

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

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

ملف HTML: ملف يحتوي على هيكل ومحتوى صفحة الويب.

نمط CSS: ملف أو كود يتحكم في التنسيق والمظهر المرئي لعناصر HTML.

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

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

نقاط مهمة

• يتم إنشاء هيكل الرسالة الإخبارية باستخدام جدول HTML (``، ``، `

  `). يجب إضافة المحتوى الرئيسي (الهيكل الأساسي) قبل المحتوى التكميلي (مثل الصور). يتم ضبط الأنماط المرئية للأقسام (مثل الألوان، الخطوط) عن طريق ربط ملف CSS خارجي وتطبيق الفئات (Classes) على الوسوم. 📋 المحتوى المنظم 📖 محتوى تعليمي مفصّل 3 نوع: محتوى تعليمي إنشاء ملف HTML ووضع المحتوى فيه، وضبط نمط الرسالة نوع: محتوى تعليمي أنشئ ملف HTML. أضف أولاً المحتوى الرئيس (رأس الصفحة، العنوان والنص، التذييل)، ثم أضف المحتوى التكميلي إلى الملف الذي يمكن أن يكون صورة، وأخيراً اضبط نمط كل قسم. نوع: محتوى تعليمي <!DOCTYPE html> <html dir="rtl" lang="ar"> <head> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" type="text/css" href="style_newsletter.css"> </head> <body> <!--Create the table.--> <table> <tr style="background-color:#0b5525;"> <td> <img src="soccer-saudi-arabia-logo.jpg" width="200" height="125" alt="National team logo"> </td> </tr> <tr style="background-color:#d6d599;"> <td><p>تتبع أخبار المسار الناجح لفريق الصقور الخضر</p></td> </tr> <tr style="background-color:#eeeeee;"> <td><p>عزيزي مشجع كرة القدم، المملكة العربية السعودية لديها أحد أفضل الفرق في آسيا، لذلك إذا كنت مشجعاً لهذا الفريق، فستبقيك هذه النشرة الإخبارية على اطلاع بمواعيد المباريات وأوقات البدء، كما أنها ستبقىك على اطلاع دائم بالقنوات التلفزيونية التي تعرض جدول المباريات الدولية. إضافة إلى ذلك، سيتم إخبارك بترتيب الفرق وتفاصيل أخرى حول المباريات. سيحصل مشتركو النشرة الإخبارية على جميع المعلومات التي يحتاجونها لمشاهدة مباراة واحدة لمجاراة واحدة واحدة لفريقهم المفضل.</p></td> </tr> </table> </body> </html> نمط CSS المضمن لصف الجدول نوع: محتوى تعليمي يتم تنسيق نمط الوسم <td> وفقاً لنمط فئة العنوان الأول (class="headline1") المعرفة في ملف CSS الخارجي. نمط النص الأول وفقاً لنمط فئة النص (class="text1") المعرفة في ملف CSS الخارجي. نوع: محتوى تعليمي يتم تنسيق نمط الوسم <td> وفقاً لنمط فئة النص الأول (class="text1") المعرفة في ملف CSS الخارجي. نوع: METADATA وزارة التعليم 2025 - 1447 📄 النص الكامل للصفحة --- SECTION: 3 --- إنشاء ملف HTML ووضع المحتوى فيه، وضبط نمط الرسالة أنشئ ملف HTML. أضف أولاً المحتوى الرئيس (رأس الصفحة، العنوان والنص، التذييل)، ثم أضف المحتوى التكميلي إلى الملف الذي يمكن أن يكون صورة، وأخيراً اضبط نمط كل قسم. <!DOCTYPE html> <html dir="rtl" lang="ar"> <head> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" type="text/css" href="style_newsletter.css"> </head> <body> <!--Create the table.--> <table> <tr style="background-color:#0b5525;"> <td> <img src="soccer-saudi-arabia-logo.jpg" width="200" height="125" alt="National team logo"> </td> </tr> <tr style="background-color:#d6d599;"> <td><p>تتبع أخبار المسار الناجح لفريق الصقور الخضر</p></td> </tr> <tr style="background-color:#eeeeee;"> <td><p>عزيزي مشجع كرة القدم، المملكة العربية السعودية لديها أحد أفضل الفرق في آسيا، لذلك إذا كنت مشجعاً لهذا الفريق، فستبقيك هذه النشرة الإخبارية على اطلاع بمواعيد المباريات وأوقات البدء، كما أنها ستبقىك على اطلاع دائم بالقنوات التلفزيونية التي تعرض جدول المباريات الدولية. إضافة إلى ذلك، سيتم إخبارك بترتيب الفرق وتفاصيل أخرى حول المباريات. سيحصل مشتركو النشرة الإخبارية على جميع المعلومات التي يحتاجونها لمشاهدة مباراة واحدة لمجاراة واحدة واحدة لفريقهم المفضل.</p></td> </tr> </table> </body> </html> --- SECTION: نمط CSS المضمن لصف الجدول --- يتم تنسيق نمط الوسم <td> وفقاً لنمط فئة العنوان الأول (class="headline1") المعرفة في ملف CSS الخارجي. --- SECTION: نمط النص الأول وفقاً لنمط فئة النص (class="text1") المعرفة في ملف CSS الخارجي. --- يتم تنسيق نمط الوسم <td> وفقاً لنمط فئة النص الأول (class="text1") المعرفة في ملف CSS الخارجي. وزارة التعليم 2025 - 1447 🎴 بطاقات تعليمية للمراجعة عدد البطاقات: 4 بطاقة لهذه الصفحة ما الغرض من السمة `dir="rtl"` في وسم `<html>` عند إنشاء صفحة ويب باللغة العربية؟ أ) تحديد لغة الترميز المستخدمة في الصفحة. ب) تحديد اتجاه النص من اليمين إلى اليسار للغات مثل العربية. ج) ربط ملف التنسيق الخارجي CSS بالصفحة. د) ضبط عرض الصفحة ليتناسب مع أجهزة الجوال. الإجابة الصحيحة: b الإجابة: تحديد اتجاه النص من اليمين إلى اليسار للغات مثل العربية. الشرح: 1. السمة `dir` تتحكم في اتجاه النص. 2. القيمة `"rtl"` تعني Right-To-Left. 3. تُستخدم للغات التي تكتب من اليمين إلى اليسار مثل العربية والعبرية. 4. تضمن عرض النصوص والمحتوى بالاتجاه الصحيح. تلميح: تتعلق هذه السمة بكيفية عرض النص على الصفحة. التصنيف: تعريف | المستوى: سهل ما الغرض من الوسم `<link>` الموجود داخل قسم `<head>` في مثال كود HTML؟ أ) إدراج صورة شعار في رأس الصفحة. ب) تحديد عنوان الصفحة الذي يظهر في المتصفح. ج) ربط ملف تنسيق CSS خارجي (style_newsletter.css) بالصفحة. د) إنشاء جدول لتنظيم محتوى النشرة الإخبارية. الإجابة الصحيحة: c الإجابة: ربط ملف تنسيق CSS خارجي (style_newsletter.css) بالصفحة. الشرح: 1. الوسم `<link>` يستخدم لربط موارد خارجية. 2. السمة `rel="stylesheet"` تحدد أن المورد المرتبط هو ملف تنسيق. 3. السمة `href` تحدد مسار ملف CSS. 4. يسمح هذا بتطبيق الأنماط المحددة في ملف CSS الخارجي على عناصر HTML في الصفحة. تلميح: هذا الوسم يربط موردًا خارجيًا يؤثر على مظهر الصفحة. التصنيف: مفهوم جوهري | المستوى: سهل في مثال كود HTML، كيف يتم تطبيق نمط فئة CSS خارجية على خلية جدول معينة؟ أ) بكتابة أنماط CSS مباشرة داخل وسم `<td>` باستخدام السمة `style`. ب) باستخدام السمة `id` داخل وسم `<td>` للإشارة إلى اسم الفئة. ج) باستخدام السمة `class` داخل وسم `<td>` للإشارة إلى اسم الفئة المحددة في ملف CSS. د) بتعديل ملف CSS الخارجي ليتطابق تلقائيًا مع جميع وسوم `<td>`. الإجابة الصحيحة: c الإجابة: باستخدام السمة `class` داخل وسم `<td>` للإشارة إلى اسم الفئة المحددة في ملف CSS. الشرح: 1. يتم تعريف الأنماط (مثل .headline1 أو .text1) في ملف CSS خارجي. 2. داخل وسم HTML (مثل `<td>`)، نستخدم السمة `class`. 3. نعين للسمة `class` قيمة اسم الفئة المطلوبة (مثل class="headline1"). 4. يقوم المتصفح بمطابقة الفئة وتطبيق الأنماط المحددة لها من ملف CSS على العنصر. تلميح: الفكرة هي فصل المحتوى (HTML) عن التصميم (CSS) باستخدام نظام الفئات. التصنيف: مفهوم جوهري | المستوى: متوسط ما الفرق الرئيسي بين استخدام نمط CSS مضمن (Inline) باستخدام السمة `style` وبين ربط ملف CSS خارجي باستخدام الوسم `<link>`؟ أ) النمط المضمن أسرع في التحميل، بينما النمط الخارجي أبطأ. ب) النمط المضمن يطبق على عنصر HTML واحد فقط، بينما النمط الخارجي يمكن تطبيقه على عدة صفحات وعناصر عبر الفئات. ج) النمط الخارجي يستخدم للأنماط المعقدة فقط، بينما المضمن للأنماط البسيطة. د) لا يوجد فرق، كلاهما يؤدي نفس الغرض بنفس الكفاءة. الإجابة الصحيحة: b الإجابة: النمط المضمن يطبق على عنصر HTML واحد فقط، بينما النمط الخارجي يمكن تطبيقه على عدة صفحات وعناصر عبر الفئات. الشرح: 1. **النمط المضمن (Inline)**: يُكتب داخل وسم HTML (مثل `<td style="...">`). - الميزة: أولوية عالية، يطبق على العنصر مباشرة. - العيب: يصعب صيانته ولا يمكن إعادة استخدامه. 2. **النمط الخارجي (External)**: يُكتب في ملف منفصل (.css) ويربط بالصفحة. - الميزة: يمكن استخدامه في عدة صفحات، فصل كامل بين المحتوى والتصميم، صيانة أسهل. - العيب: أولوية أقل من النمط المضمن. تلميح: فكر في نطاق التطبيق وإمكانية إعادة الاستخدام. التصنيف: فرق بين مفهومين | المستوى: متوسط