تصميم المواقع للأطفال: كيف يبني طفلك أول موقع له بـHTML

HTML ليست لغة برمجة بل

لغة ترميز

تُبنى بها صفحات الويب — وهي من أسهل ما يبدأ به الطفل، لأن نتيجتها تظهر فوراً في المتصفّح بلا تثبيت أي برنامج. تناسب من عمر ٩ سنوات، ويستطيع الطفل نشر موقعه الأول خلال ثلاث جلسات.

وميزتها التي لا تعوَّض:

الطفل يرى عمله على الإنترنت برابط يرسله لجدّته

. لا شيء يحفّز مثل ذلك.

لماذا HTML مدخل ممتاز — ولماذا هي ليست برمجة

لنكن دقيقين حتى لا تبني توقّعاً خاطئاً:

• HTML تصف ماذا في الصفحة: عنوان، فقرة، صورة، رابط.
• CSS تصف كيف تبدو: الألوان، الأحجام، الترتيب.
• JavaScript هي البرمجة الحقيقية: ماذا يحدث عند الضغط.

الثلاثة تُتعلَّم بهذا الترتيب. وHTML وCSS ليستا برمجة بالمعنى الدقيق — لا شروط ولا حلقات. لكنهما

أفضل تمهيد ممكن

، لأنهما تعلّمان الطفل شيئين يحتاجهما في أي لغة لاحقاً: أن الترتيب يهمّ، وأن الحاسوب حرفيّ لا يخمّن.

من أي عمر؟

من

٩ سنوات

إن كان يقرأ ويكتب الإنجليزية البسيطة — لأن الوسوم إنجليزية (`

` و``). ومن ١١ إن كانت إنجليزيته ضعيفة.

قارنها بسكراتش:

سكراتش تناسب الأصغر لأنها بلا كتابة. وHTML تناسب من ملّ السحب والإفلات وأراد «كوداً حقيقياً» — وهذا شعور يظهر عند كثير من الأطفال حول التاسعة والعاشرة.

ماذا يحتاج للبدء؟ لا شيء تقريباً

هذه أجمل ما في الأمر:

• متصفّح — موجود.
• محرّر نصوص — المفكّرة تكفي حرفياً، وإن أردت الأفضل فـVS Code مجاني.
• لا تثبيت، لا حساب، لا اشتراك.

يكتب ملفاً باسم `index.html`، ويفتحه بالمتصفّح، فيرى نتيجته. هذه الحلقة القصيرة بين الكتابة والنتيجة هي سرّ نجاح HTML مع الأطفال.

أول صفحة في عشرين دقيقة

جرّبها معه الآن:

1. افتح المفكّرة واكتب `

   ` ثم اسمه ثم `

   `.
2. احفظ الملف باسم `me.html`.
3. افتحه بالمتصفّح — اسمه ظهر كبيراً. هذه اللحظة تكفي لتشعله.
4. أضِف `

   ` وجملة عن نفسه.

5. أضِف صورته بـ``.
6. أضِف رابطاً لموقع يحبّه.

نصيحة عملية:

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

المشروع الأول الحقيقي: صفحة «عنّي»

بعد أول تجربة، هذا المشروع يبني كل الأساسيات:

وبعد الخامسة يصير عنده

رابط حقيقي

يفتحه أي أحد. جرّب أن ترسله للعائلة وراقب أثره عليه.

كيف ينشر موقعه مجاناً؟

خيارات مجانية بلا بطاقة بنكية، ومناسبة للأطفال:

• GitHub Pages — الأشهر، يحتاج حساباً ويعلّمه شيئاً عن إدارة الملفات.
• Netlify Drop — الأبسط: يسحب مجلّده ويفلته فيحصل على رابط فوراً.

نقطة أمان مهمّة:

الموقع علنيّ. اتّفق معه مسبقاً: لا اسم كامل، لا عنوان، لا مدرسة، لا رقم هاتف. اجعلها قاعدة من أول يوم لا تحذيراً لاحقاً.

ماذا بعد HTML وCSS؟

• JavaScript — البرمجة الحقيقية على نفس الصفحة. الخطوة الطبيعية.
• بايثون إن مال إلى المنطق والبيانات أكثر من الشكل.
• التصميم بـCanva إن اتّضح أن ما يحبّه هو الجمال البصري لا الكود.

النقطة الأخيرة تستحقّ الانتباه:

HTML تكشف ميل الطفل

. بعضهم يعشق ضبط الألوان والمسافات ولا يطيق المنطق — وهذا مصمّم لا مبرمج، وكلاهما مسار محترم.

هل يتعلّمها وحده؟

HTML من أكثر المهارات قابليةً للتعلّم الذاتي — الموارد هائلة ومجانية. والعقبة ليست في البداية بل بعدها:

• CSS تربك سريعاً. لماذا لم يتوسّط العنصر؟ سؤال يستهلك ساعات من مبتدئ ودقيقتين من مدرّب.
• لا أحد يقول له إن كوده فوضوي. فتترسّخ عادات يصعب كسرها لاحقاً.
• ينسخ ويلصق بلا فهم — وهي أخطر عادة يمكن أن يكوّنها.

في

مختبر قطوف

ندرّب فردياً ١:١ عبر زوم، ونخرج بموقع منشور باسم طفلك لا بتمارين متفرّقة. وتصميم المواقع مسار نفتحه بالطلب — أخبرنا بعمر طفلك ومستواه ونرتّب له مدرّباً وخطّة.

ابدأ بـ

حصّة تجريبية بـ٧٥ ريال

نقيس فيها جاهزيته، ونصارحك إن كان الأنسب أن يبدأ بـ

سكراتش

أولاً.

أسئلة شائعة

هل HTML لغة برمجة؟

لا، HTML لغة ترميز تصف محتوى الصفحة لا سلوكها — لا شروط فيها ولا حلقات. البرمجة الحقيقية على صفحات الويب تبدأ مع JavaScript، لكن HTML أفضل تمهيد لها.

من أي عمر يتعلّم الطفل HTML؟

من ٩ سنوات إن كان يقرأ ويكتب الإنجليزية البسيطة، لأن الوسوم إنجليزية. ومن ١١ سنة إن كانت إنجليزيته ضعيفة. وهي مناسبة تحديداً لمن ملّ البرمجة المرئية وأراد كوداً حقيقياً.

ماذا يحتاج الطفل ليبدأ بـHTML؟

متصفّحاً ومحرّر نصوص فقط — المفكّرة تكفي، وVS Code مجاني وأفضل. لا تثبيت برامج ولا حساب ولا اشتراك، ويرى نتيجته فوراً بفتح الملف في المتصفّح.

كم يحتاج ليبني أول موقع؟

أول صفحة تظهر خلال عشرين دقيقة. وموقع «عنّي» كامل من صفحتين بألوان وروابط منشور على الإنترنت يحتاج نحو خمس جلسات.

كيف ينشر الطفل موقعه مجاناً؟

عبر GitHub Pages أو Netlify Drop، وكلاهما مجاني بلا بطاقة بنكية. ويجب الاتفاق معه مسبقاً على عدم نشر اسمه الكامل أو عنوانه أو اسم مدرسته، لأن الموقع علنيّ.

ما الفرق بين HTML وCSS وJavaScript؟

HTML تحدّد ماذا في الصفحة، وCSS تحدّد كيف تبدو، وJavaScript تحدّد ماذا يحدث عند التفاعل. تُتعلَّم بهذا الترتيب، والأوليان تمهيد للثالثة.

هل تعلّم HTML مفيد للطفل مستقبلاً؟

نعم، لأنها تكشف ميله مبكراً: من يعشق ضبط الألوان والمسافات مصمّم، ومن يحبّ المنطق مبرمج. وهي أساس أي عمل على الويب مهما تقدّم فيه لاحقاً.