تحديد محتوى الرسالة الإخبارية - كتاب التقنية الرقمية - الصف 11 - الفصل 1 - المملكة العربية السعودية

📚 إنشاء الرسائل الإخبارية الرقمية

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

الرسالة الإخبارية الرقمية: صفحة إلكترونية تُستخدم لإعلام الجمهور عبر البريد الإلكتروني، ويتم إنشاؤها باستخدام جداول 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، ويُمكنك استخدامها لإنشاء الرسالة الإخبارية الرقمية.

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

1 تحديد محتوى الرسالة الإخبارية.

2 ضبط هيكل الرسالة الإخبارية.

3 إنشاء ملف HTML ووضع المحتوى الرئيس فيه، ثم استكماله، وضبط نمط (Style) الرسالة الإخبارية.

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

عليك أن تربط محتوى الرسالة الإخبارية بالغرض الذي تخدمه. يجب عليك إنشاء العنوان والنص الرئيسان، وتحديد ما إذا كانت الرسالة الإخبارية ستحتوي على صور، وتحديد الروابط التي يجب تضمينها.

نظرًا لأن الرسالة الإخبارية هي صفحة إلكترونية، فأنت بحاجة إلى تقسيمها إلى أقسام لسهولة التعامل معها، حيث يحتوي كل قسم على أنواع مختلفة من المعلومات. وكل قسم من هذه الأقسام له أسلوب مختلف. هيكل الرسالة التي ستنشئها الآن كما يلي:

وزارة التعليم Ministry of Education 2025 - 1447

إنشاء الرسائل الإخبارية الرقمية لقد تعلمت كيفية إنشاء الجداول في HTML، ويُمكنك استخدامها لإنشاء الرسالة الإخبارية الرقمية. خطوات إنشاء الرسالة الإخبارية: 1 تحديد محتوى الرسالة الإخبارية. 2 ضبط هيكل الرسالة الإخبارية. 3 إنشاء ملف HTML ووضع المحتوى الرئيس فيه، ثم استكماله، وضبط نمط (Style) الرسالة الإخبارية. 4 اختبار مدى استجابة الرسالة الإخبارية على الهواتف الذكية. --- SECTION: تحديد محتوى الرسالة الإخبارية --- عليك أن تربط محتوى الرسالة الإخبارية بالغرض الذي تخدمه. يجب عليك إنشاء العنوان والنص الرئيسان، وتحديد ما إذا كانت الرسالة الإخبارية ستحتوي على صور، وتحديد الروابط التي يجب تضمينها. --- SECTION: هيكل الرسالة الإخبارية --- نظرًا لأن الرسالة الإخبارية هي صفحة إلكترونية، فأنت بحاجة إلى تقسيمها إلى أقسام لسهولة التعامل معها، حيث يحتوي كل قسم على أنواع مختلفة من المعلومات. وكل قسم من هذه الأقسام له أسلوب مختلف. هيكل الرسالة التي ستنشئها الآن كما يلي: وزارة التعليم Ministry of Education 2025 - 1447 --- VISUAL CONTEXT --- **FIGURE**: تتبع أخبار المسار الناجح لفريق الصقور الخضر Description: An example of a digital newsletter, structured vertically with different content blocks. It features a header with the Saudi Arabia national team logo, a headline, a main text body, an image, and a footer with links. Data: The newsletter content includes: - Top section: Saudi Arabia national team logo and 'SAUDI ARABIA NATIONAL TEAM' text. - Headline: 'تتبع أخبار المسار الناجح لفريق الصقور الخضر' (Follow the news of the successful path of the Green Falcons team). - Main text body: A paragraph starting with 'عزيزي مشجع كرة القدم، المملكة العربية السعودية لديها أحد أفضل الفرق في آسيا...' (Dear football fan, Saudi Arabia has one of the best teams in Asia...). The text discusses staying updated on match dates, results, international tournaments, team news, and direct match viewing, offering a free ticket for the favorite team each month. - Image section: A photograph of a football stadium filled with spectators under floodlights. - Footer section: Contains three links 'UEFA.com', 'Fifa.com', 'info@example.com' and text 'لإلغاء الاشتراك في الرسائل الإخبارية اضغط هنا' (To unsubscribe from newsletters click here). Context: This figure serves as a visual example of a digital newsletter, demonstrating the practical application of the structural components described in the accompanying diagram. **DIAGRAM**: Untitled Description: A diagram illustrating the typical structural components of a digital newsletter. It consists of five vertically stacked rectangular blocks, each labeled with a common email section. Green lines with arrows connect these labeled blocks to corresponding sections in the example digital newsletter (Figure 0) on the left, indicating their relationship. Data: The diagram shows the following structural components from top to bottom: - Top block: Labeled 'HEADER', connected to the Saudi Arabia national team logo section in the example newsletter. - Second block: Labeled 'HEADLINE', connected to the 'تتبع أخبار المسار الناجح لفريق الصقور الخضر' text in the example newsletter. - Third block: Labeled 'TEXT', connected to the main paragraph text in the example newsletter. - Fourth block: Labeled 'IMAGE', connected to the football stadium photograph in the example newsletter. - Bottom block: Labeled 'FOOTER', connected to the links and unsubscribe text at the bottom of the example newsletter. Context: This diagram visually explains the standard layout and components of a digital newsletter, providing a conceptual framework for understanding how such a message is structured. It directly references the example newsletter to clarify each component's placement and content.