الثاني الثانوي : تقنية رقمية 2 : الوحدة الثالثة : الدرس الثالث : الرسائل الإخبارية الرقمية (HTML)

إبداع التقنية

16 Nov 202408:10

Summary

TLDRفي هذا الدرس، يتناول المعلم كيفية إنشاء نشرة إخبارية رقمية باستخدام HTML وCSS. يبدأ بشرح كيفية إنشاء جدول باستخدام وسوم HTML مثل <table> و<tr> و<th> و<td>، مع تطبيق تنسيق بسيط باستخدام CSS. بعد ذلك، يتم توضيح كيفية تقسيم الصفحة إلى أقسام مثل الرأس، النص، والصورة، مع تنسيق كل جزء باستخدام CSS. يركز الدرس على جعل الصفحة متجاوبة مع مختلف أحجام الشاشات، باستخدام أدوات المتصفح لاختبار كيفية عرض النشرة على الأجهزة المختلفة. في النهاية، يتم التأكد من توافق النشرة مع الأجهزة المحمولة مثل آيفون 14 برو ماكس.

Takeaways

😀 تعلم كيفية إنشاء جدول باستخدام لغة HTML داخل وسم <body> باستخدام <table> و <tr> و <td>.
😀 شرح كيفية تنسيق الجدول باستخدام CSS، مثل إضافة الحدود للمربعات وتحديد محاذاة النص.
😀 تأكيد على أهمية حفظ التغييرات باستخدام <Ctrl + S> وتجربة النتيجة عبر متصفح مايكروسوفت إيدج.
😀 تسليط الضوء على الفرق بين تقسيم الصفحات باستخدام <div> وتقسيمها باستخدام <table> للحصول على عرض مناسب على الشاشات المختلفة.
😀 التطرق إلى كيفية تقسيم الصفحة إلى أقسام متعددة مع تضمين صور ونصوص في الأعمدة المختلفة.
😀 شرح عملية إضافة روابط مفيدة في التذييل (footer) وكيفية تخصيصها لتكون تفاعلية.
😀 التنسيق الداخلي باستخدام CSS لتحديد الهوامش والمحاذاة وأحجام الخطوط في الجدول والمحتوى.
😀 أهمية تضمين <meta name='viewport'> في <head> لتحديد عرض الصفحة بما يتناسب مع مختلف أنواع الشاشات.
😀 عرض كيفية محاكاة الصفحة عبر أداة أدوات المطورين (Developer Tools) لاختبار كيفية عرضها على مختلف الأجهزة المحمولة.
😀 التأكيد على أهمية تفعيل التنسيقات المناسبة للصور والنصوص عبر استخدام CSS داخل الصفحة لتحقيق تجربة مرئية متناسقة.

Q & A

ما هو الهدف من الدرس في هذا الفيديو؟
-الهدف من الدرس هو شرح كيفية تصميم رسالة إخبارية رقمية باستخدام HTML وCSS، مع التركيز على إنشاء جدول لتنسيق البيانات وتقسيم الصفحة إلى أقسام مختلفة باستخدام الجداول بدلاً من div.
ما هي الخطوات الأولية لإنشاء جدول في HTML؟
-أولاً، يتم استخدام وسم <table> لإنشاء الجدول. ثم يتم إضافة صفوف باستخدام <tr> داخل الجدول، وبعد ذلك يتم إضافة رؤوس الأعمدة باستخدام <th> لكتابة العناوين، وأخيراً يتم إضافة الخلايا باستخدام <td> لتمثيل البيانات.
كيف يمكن تنسيق الجدول باستخدام CSS؟
-يتم تنسيق الجدول باستخدام وسم <style> داخل صفحة HTML. يتم تحديد خصائص مثل الحواف (border)، والمحاذاة (text-align)، وتنسيق الخلايا مثل <th> و <td> لجعل الجدول يظهر بشكل مناسب.
ما الفائدة من استخدام الجداول في تقسيم الصفحة بدلاً من div؟
-الفائدة هي أن الجداول توفر عرضاً مناسباً للصفحة على أحجام مختلفة من الشاشات، مما يساعد في جعل الصفحة أكثر استجابة ومتوافقة مع الأجهزة المختلفة مثل الهواتف المحمولة.
كيف يمكن إضافة محتوى مثل الصور والنصوص داخل الجدول؟
-يمكن إضافة محتوى داخل الجدول باستخدام الخلايا <td>، حيث يمكن إدراج الصور باستخدام <img> داخل الخلايا، والنصوص يمكن إضافتها باستخدام <p> أو مباشرة داخل الخلايا.
ماذا يعني استخدام وسم <meta> في صفحة HTML؟
-وسم <meta> يُستخدم لتحديد إعدادات مثل تعريف نوع العرض الخاص بالصفحة، بحيث يتناسب مع حجم الشاشات المختلفة مثل الهواتف المحمولة، مما يساعد على تحسين تجربة المستخدم.
كيف يتم ربط صفحة CSS مع صفحة HTML؟
-يتم ربط صفحة CSS مع صفحة HTML باستخدام وسم <link> داخل وسم <head>، حيث يتم تحديد مسار ملف CSS لربطه مع HTML.
كيف يتم محاكاة الصفحة على أجهزة مختلفة باستخدام أدوات المطورين؟
-يمكن محاكاة الصفحة على أجهزة مختلفة باستخدام أدوات المطورين في متصفح مثل مايكروسوفت إيدج، من خلال تفعيل خاصية المحاكاة (Responsive Design Mode) واختيار نوع الجهاز المناسب، مثل iPhone 14 Pro Max.
ما هو الفرق بين تنسيق النصوص في الخلايا <td> في الجدول؟
-يمكن تنسيق النصوص داخل الخلايا <td> باستخدام خصائص CSS مثل المحاذاة (text-align) لتحديد كيفية عرض النص داخل الخلايا، وحجم الخط (font-size) لتحديد حجم النص، ويمكن أيضاً تغيير نمط الخط باستخدام الخصائص مثل font-style.
ما الذي يميز استخدام CSS داخلياً في الصفحة؟
-استخدام CSS داخلياً داخل صفحة HTML يسهل التحكم في تنسيق العناصر على نفس الصفحة دون الحاجة لملفات CSS خارجية، مما يسمح بتخصيص التنسيق بشكل مباشر داخل الصفحة نفسها.