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

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

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

النمط المضمن (Inline Style): تحديد أبعاد الصورة مباشرة داخل الوسم (مثل: `style="width:95%;"`).

فئة CSS (CSS Class): نمط محدد في ملف CSS خارجي يمكن تطبيقه على عناصر HTML (مثل: `class="photos"`).

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

```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% من عرض الخلية.

```

نقاط مهمة

• تزيد الوسائل المرئية (مثل الصور) من رغبة القارئ في قراءة الرسالة الإخبارية.
• يمكن إضافة الصور داخل خلايا الجدول في HTML.
• هناك طريقتان رئيسيتان للتحكم في حجم الصورة: النمط المضمن (مثل `style="width:95%;"`) أو فئة CSS محددة مسبقاً في ملف خارجي.
• يتم تطبيق أنماط فئة CSS (مثل `.photos`) على خلية الجدول (``) لتنسيق الصورة داخلها.

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

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

ولإضافة نمط إلى الصور وخليّة الجدول التي تحتوي على الصور المحددة في ملف CSS الخارجي.

يتم تنسيق نمط الوسم <td class="photos"> وفقًا لنمط فئة الصور (class.photos) المعرفة في ملف CSS الخارجي.

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

وزارة التعليم

Ministry of Education 2025 - 1447

--- SECTION: الصور في الرسائل الإخبارية --- تزيد الوسائل المرئية من رغبة الشخص في قراءة الرسائل الإخبارية. بعد تحديد الصورة التي تريد استخدامها، يمكنك إضافتها في خلايا الجدول، كما يمكنك استخدام النمط المضمن وتحديد أبعاد الصورة، أو تعيين الصورة لتشغل نسبة مئوية من عرض خلية الجدول. ولإضافة نمط إلى الصور وخليّة الجدول التي تحتوي على الصور المحددة في ملف CSS الخارجي. يتم تنسيق نمط الوسم <td class="photos"> وفقًا لنمط فئة الصور (class.photos) المعرفة في ملف CSS الخارجي. تشغل الصورة 95% من عرض الخلية في النمط المضمن. وزارة التعليم Ministry of Education 2025 - 1447 --- VISUAL CONTEXT --- **DIAGRAM**: Untitled Description: Diagram showing HTML code structure for an email newsletter, including table, tr, td, ul, li, a, img, and p tags. It illustrates how images and links are embedded within the HTML. Context: Demonstrates the underlying HTML structure used to create email newsletters, including image embedding and link creation. **FIGURE**: football_stadium_r.jpg Description: An image tag <img src="football_stadium_r.jpg" alt="stadium" style="width:95%;"> embedded within an HTML table row. Context: Illustrates how an image is inserted into an HTML document using the img tag and how its display size can be controlled with CSS. **DIAGRAM**: Untitled Description: A diagram explaining that the CSS class "photos" applied to a table data cell (<td class="photos">) controls the styling of the content within that cell, specifically setting the image width to 95%. Context: Explains the concept of applying CSS classes to HTML elements for styling, demonstrating how a class can control the appearance of an image within a table cell. **DIAGRAM**: Untitled Description: An unordered list (<ul>) containing list items (<li>) with anchor tags (<a>) for email links (mailto:info@example.com), website links (https://www.fifa.com/, https://www.uefa.com/), and an unsubscribe link (https://unsubscribe). Context: Shows how to create clickable links within an HTML email, including email addresses, external websites, and unsubscribe options. **TEXT_ELEMENT**: Untitled Description: The number 306, indicating the page number.