أنشئ أول صفحة HTML بنفسك خلال دقائق للمبتدئين خطوة بخطوة

كيف نصمم الصفحه الأولى؟

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

🎥 شاهد الفيديو العملي

قبل أن نبدأ، يمكنك مشاهدة هذا الفيديو القصير لشرح عملي خطوة بخطوة:

شاهد الفيديو هنا

ما هي HTML ولماذا أتعلمها؟

HTML هي لغة بناء صفحات الويب، أي أنّها الأساس لكل موقع تراه على الإنترنت.

بتعلّمها ستعرف كيف تضيف نصوص، صور، روابط، وأقسام إلى موقعك.

الأدوات التي تحتاجها

محرّر نصوص: مثل Notepad أو VS Code.
متصفح: مثل Google Chrome أو Firefox.
لا تحتاج إنترنت لإنشاء صفحتك الأولى.

خطوات إنشاء أول صفحة HTML

1️⃣ أنشئ ملف جديد

افتح محرّر النصوص واحفظ ملفًا جديدًا باسم:

index.html

2️⃣ اكتب الكود التالي

انسخ هذا الكود داخل الملف:


<!doctype html>
<html lang="ar">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>صفحتي الأولى — تعلم HTML</title>
    <meta name="description" content="تعلم إنشاء صفحة HTML بسيطة خطوة بخطوة للمبتدئين. مثال عملي وشرح كل عنصر." />
    <style>
      body { font-family: Arial, sans-serif; line-height: 1.6; padding: 20px; max-width: 900px; margin: auto; }      header { background:#f8f8f8; padding:15px; border-radius:8px; margin-bottom:20px; }
      img { display:block; margin:10px 0; max-width:100%; height:auto; }
    </style>
  </head>
  <body>
    <header>
      <h1>مرحباً! هذه صفحتي الأولى</h1>
      <p>تعلمت كيف أنشئ صفحة HTML بنفسي 😊</p>
    </header>
    <section>
      <h2>صورة توضيحية</h2>
      <img src="placeholder.jpg" alt="صورة تجريبية" />
    </section>
    <section>
      <h2>مثال على رابط</h2>
      <p>زوروا الفيديو العملي: <a href="https://youtu.be/HxX1X424GGI" target="_blank" rel="noopener">شاهد الفيديو هنا</a></p>
    </section>
    <footer>
      <p>حقوق النشر &copy; 2025</p>
    </footer>
  </body>
</html>

3️⃣ احفظ الملف

اختر الحفظ باسم:

index.html

وتأكد أن الترميز (Encoding) هو UTF-8 لعرض اللغة العربية بشكل صحيح.

4️⃣ افتح الملف في المتصفح

اضغط مرتين على الملف.
سيُفتح في المتصفح وتظهر لك صفحتك الأولى.

شرح مبسّط للكود

<!doctype html> : يخبر المتصفح أنّها صفحة HTML5.
<title> : يظهر في شريط المتصفح ويُعتبر مهم لمحركات البحث.
<h1> : العنوان الرئيسي للصفحة (يجب أن يكون واحد فقط).
<p> : فقرة نصية.
<img> : لإضافة صورة (مع خاصية alt لوصف الصورة).
<a> : لإضافة رابط يمكن النقر عليه.

لقد أنشأت صفحتك الأولى باستخدام HTML. الآن يمكنك تعديل النصوص، إضافة صورك الخاصة، وتجربة أكواد أخرى.

ولا تنسَ، إذا أردت مشاهدة الشرح العملي:

شاهد الفيديو هنا

أنشئ أول صفحة HTML بنفسك خلال دقائق للمبتدئين خطوة بخطوة

أنشئ أول صفحة HTML بنفسك خلال دقائق للمبتدئين خطوة بخطوة

🎥 شاهد الفيديو العملي

ما هي HTML ولماذا أتعلمها؟

الأدوات التي تحتاجها

خطوات إنشاء أول صفحة HTML

1️⃣ أنشئ ملف جديد

2️⃣ اكتب الكود التالي

3️⃣ احفظ الملف

4️⃣ افتح الملف في المتصفح

شرح مبسّط للكود

إرسال تعليق

Contact form

أنشئ أول صفحة HTML بنفسك خلال دقائق للمبتدئين خطوة بخطوة

أنشئ أول صفحة HTML بنفسك خلال دقائق للمبتدئين خطوة بخطوة

🎥 شاهد الفيديو العملي

ما هي HTML ولماذا أتعلمها؟

الأدوات التي تحتاجها

خطوات إنشاء أول صفحة HTML

1️⃣ أنشئ ملف جديد

2️⃣ اكتب الكود التالي

3️⃣ احفظ الملف

4️⃣ افتح الملف في المتصفح

شرح مبسّط للكود

You Might Like

إرسال تعليق

Contact form