البرمجة خطوة بخطوة: أنشئ صفحة ويب بسيطة
اتبع التعليمات خطوة بخطوة لإنشاء صفحة ممتعة
البرمجة خطوة بخطوة: أنشئ صفحة ويب بسيطة درس مجاني في HTML for Kids على CoddyKit. هذا هو الدرس 1 من أصل 2. يمكنك قراءة الدرس كاملاً أدناه مجاناً — ثم تمرن عليه مباشرة في المتصفح باستخدام محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7. هذا الدرس جزء من مسار التعلم في HTML for Kids، وتقدمك يتزامن عبر الويب وتطبيق CoddyKit. تتضمن دورة HTML for Kids 2 دروس في المجموع.
إنشاء صفحة الويب الأولى
البرمجة معًا: إنشاء صفحة ويب بسيطة
مرحبًا بكم في أول مشروع برمجي لكم! في هذا الدرس، سننشئ صفحة ويب بسيطة خطوة بخطوة. تابعوا معنا لتروا كيفية اجتماع مكونات HTML وCSS وأساسيات التصميم معًا.
الهدف: إنشاء صفحة ملف شخصي.
إعداد الملف
الخطوة 1: إعداد الملف
لنبدأ أولًا بإنشاء مجلد لمشروعكم وإضافة ملف HTML:
- أنشئوا مجلدًا جديدًا على جهاز الكمبيوتر باسم MyWebPage.
- أنشئوا داخل المجلد ملفًا باسم
index.html. - افتحوا الملف في محرر الشفرة البرمجية (مثل Visual Studio Code).
نصيحة: يُستخدم اسم الملف index.html عادةً للصفحة الرئيسية لموقع إلكتروني.
إضافة البنية الأساسية
الخطوة 2: إضافة البنية الأساسية
أضيفوا الآن بنية HTML الأساسية إلى ملفكم. وتتضمن هذه البنية وسوم <!DOCTYPE html> و<html> و<head> و<body>.
مثال:
<!DOCTYPE html>
<html>
<head>
<title>My Profile Page</title>
</head>
<body>
<h1>Welcome to My Page</h1>
<p>This is my personal profile page.</p>
</body>
</html>
إضافة قسم الملف الشخصي
الخطوة 3: إضافة قسم الملف الشخصي
لنضف قسمًا لعرض اسمكم ووصف موجز عنكم.
مثال:
<body>
<h1>Welcome to My Page</h1>
<p>This is my personal profile page.</p>
<!-- Profile Section -->
<h2>About Me</h2>
<p>Hi, I’m [Your Name]. I’m learning web development, and this is my first project!</p>
</body>
إضافة صورة
الخطوة 4: إضافة صورة
لنضف بعد ذلك صورة للملف الشخصي باستخدام وسم <img>. احفظوا صورة في مجلد المشروع واربطوها بملف HTML الخاص بكم.
مثال:
<!-- Profile Picture -->
<img src="profile.jpg" alt="My Profile Picture" width="200" />
إضافة قائمة بالهوايات
الخطوة 5: إضافة قائمة بالهوايات
أنشئوا قائمة غير مرتبة بهواياتكم باستخدام وسمَي <ul> و<li>.
مثال:
<!-- Hobbies Section -->
<h2>My Hobbies</h2>
<ul>
<li>Reading books</li>
<li>Playing video games</li>
<li>Coding projects</li>
</ul>
إضافة رابط
الخطوة 6: إضافة رابط
أضيفوا رابطًا إلى موقعكم الإلكتروني المفضل باستخدام وسم <a>.
مثال:
<!-- Favorite Website -->
<h2>My Favorite Website</h2>
<p>Check out my favorite website: <a href="https://example.com" target="_blank">Example</a>.</p>
إضافة تنسيقات مضمنة
الخطوة 7: إضافة تنسيقات مضمنة
لنضف بعض التنسيقات الأساسية مباشرةً إلى HTML باستخدام السمة style.
مثال:
<h1 style="color: blue; text-align: center;">Welcome to My Page</h1>
<p style="font-size: 16px; color: gray;">This is my personal profile page.</p>
مراجعة مشروع صفحة الويب
عمل رائع!
تهانينا! لقد أنشأتم أول صفحة ويب لكم خطوة بخطوة. تعلمتم في هذا المشروع كيفية هيكلة HTML وإضافة المحتوى وتنسيقه باستخدام التنسيقات المضمنة. واصلوا التجربة وإضافة أقسام جديدة إلى صفحتكم!
نصيحة: جرّبوا استضافة صفحتكم على GitHub Pages لمشاركتها مع أصدقائكم!
الأسئلة الشائعة
هل درس «البرمجة خطوة بخطوة: أنشئ صفحة ويب بسيطة» مجاني؟
نعم — نص درس «البرمجة خطوة بخطوة: أنشئ صفحة ويب بسيطة» كامل متاح مجاناً هنا على الويب. لتمرينه بشكل تفاعلي (محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7) وفتح باقي دورة HTML for Kids، انتقل إلى CoddyKit PRO. تتضمن دورة HTML for Kids 2 دروس في المجموع.
ماذا ستتعلم في «البرمجة خطوة بخطوة: أنشئ صفحة ويب بسيطة»؟
اتبع التعليمات خطوة بخطوة لإنشاء صفحة ممتعة تتمرن على HTML for Kids مع أكواد عملية تشغلها مباشرة في المتصفح، ومدرس ذكاء اصطناعي متاح 24/7 يجيب على أسئلتك أثناء عملك.
هل أحتاج إلى خبرة سابقة لأبدأ HTML for Kids؟
لا تُشترط خبرة سابقة. HTML for Kids على CoddyKit منظم للمبتدئين حتى المتقدمين، لذا يمكنك البدء من هنا أو من البداية والتقدم بسرعتك الخاصة. هذا هو الدرس 1 من أصل 2.
كم من الوقت يستغرق درس «البرمجة خطوة بخطوة: أنشئ صفحة ويب بسيطة»؟
معظم دروس CoddyKit تستغرق حوالي 5–10 دقائق. كل منها موجز وتفاعلي، لذا تحرز تقدماً مستمراً وتستأنف من حيث توقفت عبر الويب والتطبيق.
هل يمكنني كتابة وتشغيل أكواد في درس HTML for Kids هذا؟
نعم. كل درس في HTML for Kids يتضمن محرر أكواد مدمج، لذا تكتب وتشغل أكواداً حقيقية مباشرة في متصفحك وتحصل على تعليقات فورية من الذكاء الاصطناعي — بدون إعداد محلي.
جميع الدروس في هذه الدورة
- البرمجة خطوة بخطوة: أنشئ صفحة ويب بسيطة
- البحث عن كنز HTML