ملخص إنشاء صفحة ويب ثابتة بمساعدة الذكاء الاصطناعي التوليدي — أولى ثانوي

مقدمة

الوحدة الثالثة عشرة: الذكاء الاصطناعي التوليدي — الموضوع 13-4

البرمجة من أقوى استخدامات الذكاء الاصطناعي التوليدي: تكتب طلبك بلغة عادية فيعطيك كود صفحة كاملة خلال ثوانٍ. لكن المبرمج الجيد لا ينسخ ويلصق فقط؛ بل يفهم الكود، ويعدّله، ويكتشف أخطاءه. في هذا الدرس نصنع صفحة ويب ثابتة (Static)، أي صفحة تعرض المحتوى نفسه دون تفاعل.

أهداف التعلم

أن تكتب أمرًا توجيهيًّا واضحًا لإنشاء صفحة ويب بلغتي HTML وCSS.
أن تشغّل الكود الناتج وتعدله لتخصيص الصفحة.
أن تطلب من الذكاء الاصطناعي شرح الكود وتفهم وسومه الشائعة.
أن تراجع الكود المولَّد وتنتبه لأخطائه المحتملة.

شرح الدرس

لماذا نراجع كود الذكاء الاصطناعي؟

كما في توليد النصوص، الكود الذي يولده الذكاء الاصطناعي قد يحتوي على أخطاء، أو على أوامر متقدمة لم تدرسها بعد. كما أنه يولد كودًا مختلفًا في كل مرة للأمر نفسه؛ فما تحصل عليه نموذج واحد من نماذج كثيرة ممكنة.

خطوات العمل

الأمر التوجيهي: افتح أداة الذكاء الاصطناعي التوليدي (مثل Copilot المستخدم في الكتاب) واكتب مثلًا: “أنشئ صفحة تعريف بالنفس بسيطة باستخدام HTML وCSS”.
التشغيل: انسخ كود HTML وكود CSS والصقهما في محرر أكواد عبر الإنترنت، ثم اضغط زر التشغيل (Run).
التعديل: غيّر الكود بنفسك لتصبح الصفحة خاصة بك: الاسم، والنصوص، والألوان، وحجم الخط.
الفهم: اطلب من الذكاء الاصطناعي: “اشرح هذا الكود”، ثم اقرأ الشرح.
التنظيم: أعد تسمية المحادثة باسم واضح مثل “إنشاء صفحات ويب ثابتة” لتعود إليها في الدروس القادمة (من قائمة النقاط الثلاث ”…” بجوار المحادثة ثم Rename).

وسوم شائعة في الصفحات المولَّدة

الوسم	وظيفته
`<header>`	رأس الصفحة (الشعار والعنوان الرئيسي)
`<nav>`	قائمة التنقل (الروابط)
`<main>`	المحتوى الرئيسي
`<article>`	موضوع أو مقال مستقل (مثل خبر)
`<footer>`	تذييل الصفحة (حقوق النشر وبيانات التواصل)
`<a href="...">`	رابط إلى صفحة أخرى
`<img src="..." alt="...">`	صورة، و`alt` وصف نصي لها يفيد المكفوفين ومحركات البحث

أمثلة وتطبيقات

مثال: صفحة أخبار بسيطة — أمر توجيهي: “اكتب صفحة أخبار مدرسية بسيطة باستخدام HTML وCSS”. قد يولد الذكاء الاصطناعي كودًا يشبه هذا:

<header>
  <h1>أخبار مدرستنا</h1>
</header>
<main>
  <article>
    <h2>فوز فريق الكرة بالبطولة</h2>
    <p>فاز فريق المدرسة ببطولة الإدارة التعليمية هذا العام.</p>
  </article>
  <article>
    <h2>افتتاح معمل الحاسب الجديد</h2>
    <p>افتُتح معمل حاسب مجهز بأجهزة حديثة لطلاب الصف الأول.</p>
  </article>
</main>
<footer>
  <p>جميع الحقوق محفوظة</p>
</footer>

body {
  font-family: Arial;
  background-color: #f5f5f5;
}

header {
  background-color: darkblue;
  color: white;
  padding: 10px;
}

article {
  background-color: white;
  margin: 10px;
  padding: 10px;
}

قراءة الكود:

كل خبر داخل <article> له عنوان <h2> وفقرة <p>.
padding مسافة داخلية بين حدود العنصر ومحتواه، وmargin مسافة خارجية بين العنصر وما حوله.
#f5f5f5 لون مكتوب بالنظام السادس عشر (رمادي فاتح جدًّا)؛ وقد درست النظام السادس عشر في الوحدة السادسة.

التخصيص: جرّب تغيير لون خلفية الرأس، وحجم خط العناوين، وأضف خبرًا ثالثًا بنفسك.

أفكار لصفحات أخرى: الرياضات الأكثر شعبية، أشهر المعالم السياحية في مصر، تعريف بمدرستك.

ملاحظات مهمة

افهم قبل أن تستخدم: لا تقبل كودًا لا تفهمه؛ اسأل عن كل جزء غامض.
تحقق من النتيجة في المتصفح: هل تظهر كل العناصر؟ هل العربية سليمة؟ (تأكد من وجود <meta charset="UTF-8">).
لا تُدخل بيانات شخصية حقيقية (عنوانك أو رقم هاتفك) في صفحة تعريف ستنشرها.
إذا ظهر خطأ، صف المشكلة للذكاء الاصطناعي بدقة، أو ارجع إلى آخر نسخة كانت تعمل.

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

صفحة الويب الثابتة: تعرض محتوى ثابتًا دون تفاعل، وتُبنى بـ HTML وCSS.
خطوات العمل: أمر توجيهي ← تشغيل ← تعديل ← طلب الشرح ← تنظيم المحادثة.
الكود المولَّد قد يحتوي على أخطاء ويختلف في كل مرة؛ فيجب مراجعته وفهمه.
وسوم شائعة: header وnav وmain وarticle وfooter وa وimg.

ملخص الدرس

يستطيع الذكاء الاصطناعي التوليدي كتابة كود صفحة ويب ثابتة بلغتي HTML وCSS من أمر توجيهي بسيط. ونشغّل الكود في محرر عبر الإنترنت، ثم نعدّله لنخصص الصفحة، ونطلب شرحه لنفهمه، مع الانتباه إلى أن الكود المولَّد قد يحتوي على أخطاء ويختلف في كل مرة. والهدف أن نتعلم من الكود لا أن ننسخه فقط.

أسئلة للتدريب

اكتب أمرًا توجيهيًّا واضحًا لإنشاء صفحة ويب عن المعالم السياحية في مصر.
رتب خطوات إنشاء صفحة ويب بالذكاء الاصطناعي التوليدي.
لماذا يجب مراجعة الكود الذي يولده الذكاء الاصطناعي؟
ما الفرق بين padding وmargin في CSS؟
ما فائدة الخاصية alt في وسم الصورة؟