تعلم مجانًا

تعلم HTML من الصفر للاحتراف

دورة شاملة لتعلم لغة HTML لبناء مواقع الويب من البداية حتى الاحتراف مع أمثلة عملية وتطبيقات حقيقية.

ابدأ التعلم الآن تعرف على الدورة

عن دورة HTML

كل ما تحتاج لمعرفته لتصبح محترفًا في بناء هيكل مواقع الويب

ما هي HTML؟

HTML (لغة ترميز النص الفائق) هي اللغة الأساسية لبناء المواقع الإلكترونية. تستخدم لوصف هيكل المحتوى على الويب من خلال نظام من العلامات (Tags).

لماذا يجب أن تتعلم HTML؟

ما الذي ستتعلمه في هذه الدورة؟

هذه الدورة ستأخذك من الصفر حتى الاحتراف في HTML5 (أحدث إصدار من HTML)، وتشمل:

  1. أساسيات HTML والعناصر الأساسية
  2. إنشاء هيكل صفحة ويب صحيحة
  3. العناصر الدلالية (Semantic Elements) في HTML5
  4. النماذج (Forms) وعناصر الإدخال
  5. الوسائط المتعددة (صور، فيديو، صوت)
  6. الجداول والقوائم
  7. أفضل الممارسات والوصولية
  8. التكامل مع CSS وJavaScript

نصيحة للمبتدئين

لا تحاول حفظ كل العلامات دفعة واحدة. ركز على فهم كيفية عمل HTML وكيف تترابط العناصر مع بعضها. مع الممارسة، ستتعلم العلامات تلقائيًا.

أدوات ستحتاجها

لبدء تعلم HTML، كل ما تحتاجه هو:

دروس HTML

تعلم خطوة بخطوة مع أمثلة عملية

أساسيات HTML

الدرس 1: أساسيات HTML

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

اقرأ الدرس
عرض جميع الدروس

الدرس 1: أساسيات HTML

بداية رحلتك في تعلم بناء مواقع الويب

ما هي HTML؟

HTML هي لغة ترميز تستخدم لإنشاء وتنظيم محتوى صفحات الويب. تتكون من سلسلة من العناصر (Elements) التي تحدد كيفية ظهور المحتوى في المتصفح.

بنية مستند HTML الأساسية

كل مستند HTML يتبع هيكل أساسي يتكون من:

<!DOCTYPE html>
<html lang="ar" dir="rtl">
<head>
    <meta charset="UTF-8">
    <title>عنوان الصفحة</title>
</head>
<body>
    <h1>هذا عنوان رئيسي</h1>
    <p>هذه فقرة نصية.</p>
</body>
</html>

شرح البنية الأساسية

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

لإنشاء أول صفحة HTML لك:

  1. افتح محرر النصوص المفضل لديك (مثل Notepad أو VS Code)
  2. انسخ الكود أعلاه
  3. احفظ الملف بامتداد .html (مثل first-page.html)
  4. افتح الملف باستخدام متصفح الويب

مثال عملي

جرب هذا المثال بنفسك وشاهد النتيجة في المتصفح:

<!DOCTYPE html>
<html lang="ar" dir="rtl">
<head>
    <meta charset="UTF-8">
    <title>صفحتي الأولى</title>
</head>
<body>
    <h1>مرحباً بالعالم!</h1>
    <p>هذه أول صفحة ويب أقوم بإنشائها.</p>
</body>
</html>

العلامات (Tags) والسمات (Attributes)

تتكون HTML من علامات (Tags) تحيط بالمحتوى وتحدد كيفية معالجته. بعض العلامات تحتوي على سمات (Attributes) التي توفر معلومات إضافية.

مثال على العلامة مع السمة:

<a href="https://example.com">رابط مثال</a>

حيث:

أنواع العلامات

هناك نوعان رئيسيان من العلامات:

  1. علامات ذات زوج (Paired Tags): تحتوي على علامة فتح وعلامة إغلاق مثل <p>...</p>
  2. علامات ذاتية الإغلاق (Self-closing Tags): لا تحتوي على محتوى ولا تحتاج لعلامة إغلاق مثل <img> أو <br>

أخطاء شائعة يجب تجنبها

نصيحة تقنية

استخدم محرر أكواد مثل VS Code الذي يوفر تمييزًا للنصوص (Syntax Highlighting) ويساعدك في اكتشاف الأخطاء. كما يوفر إكمالًا تلقائيًا للعلامات مما يسهل كتابة الأكواد.

أمثلة عملية

طبق ما تعلمته مع هذه الأمثلة التفاعلية

مثال صفحة شخصية

صفحة شخصية بسيطة

أنشئ صفحة شخصية تحتوي على سيرة ذاتية قصيرة، صورة، ومعلومات الاتصال.

جرب المثال
مثال قائمة طعام

قائمة مطعم

صمم قائمة طعام لمطعم باستخدام القوائم والجداول في HTML.

جرب المثال

مثال عملي: صفحة شخصية

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

الهدف من المثال

في هذا المثال، سنقوم بإنشاء صفحة شخصية بسيطة تحتوي على:

الكود الكامل

<!DOCTYPE html>
<html lang="ar" dir="rtl">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>صفحتي الشخصية</title>
</head>
<body>
    <header>
        <h1>مرحباً، أنا أحمد</h1>
        <img src="profile.jpg" alt="صورتي الشخصية" width="200">
    </header>
    
    <section>
        <h2>عني</h2>
        <p>أنا مطور ويب مبتدئ أتعلم HTML و CSS. أحب البرمجة وأطمح لأن أصبح محترفاً في تطوير المواقع.</p>
    </section>
    
    <section>
        <h2>مهاراتي</h2>
        <ul>
            <li>HTML</li>
            <li>CSS</li>
            <li>JavaScript (أساسيات)</li>
        </ul>
    </section>
    
    <section>
        <h2>اتصل بي</h2>
        <p>البريد الإلكتروني: <a href="mailto:ahmed@example.com">ahmed@example.com</a></p>
        <p>تويتر: <a href="https://twitter.com/ahmed" target="_blank">@ahmed</a></p>
    </section>
</body>
</html>

شرح الكود

  1. الرأس (Header): يحتوي على العنوان الرئيسي والصورة الشخصية
  2. قسم "عني": يحتوي على فقرة نصية قصيرة تقدم معلومات عنك
  3. قسم "المهارات": يستخدم قائمة غير مرتبة (<ul>) لعرض مهاراتك
  4. قسم "اتصل بي": يحتوي على معلومات الاتصال باستخدام روابط للبريد الإلكتروني وتويتر

تمرين عملي

جرب تعديل الكود ليتناسب مع معلوماتك الشخصية:

  1. استبدل الاسم "أحمد" باسمك
  2. أضف صورة شخصية لك (احفظها في نفس مجلد الملف باسم profile.jpg)
  3. عدل قسم "عني" ليعكس معلومات عنك
  4. أضف مهاراتك الحقيقية في قسم المهارات
  5. عدل معلومات الاتصال لتعكس طرق التواصل الخاصة بك

نصائح للتطوير

فيديو شرح

شاهد هذا الفيديو الذي يشرح كيفية إنشاء صفحة شخصية باستخدام HTML:

مثال عملي: قائمة مطعم

تصميم قائمة طعام باستخدام الجداول والقوائم في HTML

الهدف من المثال

في هذا المثال، سنقوم بإنشاء قائمة طعام لمطعم باستخدام:

الكود الكامل

<!DOCTYPE html>
<html lang="ar" dir="rtl">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>قائمة مطعم الشيف</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 0;
            padding: 20px;
            background-color: #f9f9f9;
        }
        .menu-container {
            max-width: 800px;
            margin: 0 auto;
            background: white;
            padding: 30px;
            box-shadow: 0 0 10px rgba(0,0,0,0.1);
        }
        h1 {
            text-align: center;
            color: #c62828;
        }
        h2 {
            color: #d32f2f;
            border-bottom: 2px solid #ffcdd2;
            padding-bottom: 5px;
        }
        table {
            width: 100%;
            border-collapse: collapse;
            margin: 20px 0;
        }
        th, td {
            padding: 12px;
            text-align: right;
            border-bottom: 1px solid #ddd;
        }
        th {
            background-color: #ffebee;
        }
        .item-name {
            font-weight: bold;
        }
        .item-price {
            color: #c62828;
            font-weight: bold;
        }
        .ingredients {
            color: #666;
            font-size: 0.9em;
        }
        .dish-image {
            width: 100px;
            height: 100px;
            object-fit: cover;
            border-radius: 5px;
        }
    </style>
</head>
<body>
    <div class="menu-container">
        <h1>قائمة مطعم الشيف</h1>
        
        <h2>المقبلات</h2>
        <table>
            <tr>
                <th>الصنف</th>
                <th>السعر</th>
                <th>الصورة</th>
            </tr>
            <tr>
                <td>
                    <div class="item-name">سلطة يونانية</div>
                    <div class="ingredients">خس، طماطم، خيار، زيتون، جبنة فيتا</div>
                </td>
                <td class="item-price">25 ر.س</td>
                <td><img src="greek-salad.jpg" alt="سلطة يونانية" class="dish-image"></td>
            </tr>
            <tr>
                <td>
                    <div class="item-name">مقبلات مشوية</div>
                    <div class="ingredients">باذنجان، كوسا، فلفل رومي، زيت زيتون</div>
                </td>
                <td class="item-price">30 ر.س</td>
                <td><img src="grilled-appetizers.jpg" alt="مقبلات مشوية" class="dish-image"></td>
            </tr>
        </table>
        
        <h2>الأطباق الرئيسية</h2>
        <table>
            <tr>
                <th>الصنف</th>
                <th>السعر</th>
                <th>الصورة</th>
            </tr>
            <tr>
                <td>
                    <div class="item-name">ستيك لحم</div>
                    <div class="ingredients">لحم بقري مشوي، صلصة الفطر، بطاطس مهروسة</div>
                </td>
                <td class="item-price">85 ر.س</td>
                <td><img src="steak.jpg" alt="ستيك لحم" class="dish-image"></td>
            </tr>
            <tr>
                <td>
                    <div class="item-name">سمك مشوي</div>
                    <div class="ingredients">سمك قاروص، ليمون، زعتر، أرز بالخضار</div>
                </td>
                <td class="item-price">75 ر.س</td>
                <td><img src="grilled-fish.jpg" alt="سمك مشوي" class="dish-image"></td>
            </tr>
        </table>
        
        <h2>المشروبات</h2>
        <ul style="list-style-type: none; padding: 0;">
            <li style="margin-bottom: 15px;">
                <div style="display: flex; justify-content: space-between;">
                    <span>عصير برتقال طازج</span>
                    <span style="color: #c62828; font-weight: bold;">15 ر.س</span>
                </div>
            </li>
            <li style="margin-bottom: 15px;">
                <div style="display: flex; justify-content: space-between;">
                    <span>ليمون بالنعناع</span>
                    <span style="color: #c62828; font-weight: bold;">12 ر.س</span>
                </div>
            </li>
            <li style="margin-bottom: 15px;">
                <div style="display: flex; justify-content: space-between;">
                    <span>قهوة عربية</span>
                    <span style="color: #c62828; font-weight: bold;">10 ر.س</span>
                </div>
            </li>
        </ul>
    </div>
</body>
</html>

شرح الكود

  1. الهيكل الأساسي: بدأنا بإنشاء هيكل HTML الأساسي مع تعيين اللغة العربية واتجاه النص من اليمين لليسار.
  2. تنسيق CSS: أضفنا بعض التنسيقات الأساسية لجعل القائمة جذابة وسهلة القراءة.
  3. العناوين: استخدمنا <h1> لعنوان القائمة الرئيسي و<h2> لعناوين الأقسام (المقبلات، الأطباق الرئيسية، المشروبات).
  4. الجداول: استخدمنا الجداول لعرض الأصناف والأسعار في قسمي المقبلات والأطباق الرئيسية.
  5. القوائم: استخدمنا قائمة غير مرتبة لعرض المشروبات.
  6. الصور: أضفنا صورًا للأطباق لجعل القائمة أكثر جاذبية.
  7. التفاصيل: أدرجنا مكونات كل طبق كوصف إضافي تحت اسم الصنف.

تمرين عملي

جرب تعديل الكود لإنشاء قائمة لمطعمك المفضل:

  1. استبدل أسماء الأطباق بأطباق من مطعمك المفضل
  2. عدل الأسعار لتناسب الأسعار الحقيقية
  3. أضف قسمًا للحلويات إذا كان المطعم يقدمها
  4. استبدل الصور بصور حقيقية للأطباق (احفظها في نفس مجلد الملف)
  5. جرب تغيير الألوان في التنسيقات CSS لتناسب هوية المطعم

نصائح للتطوير

فيديو شرح

شاهد هذا الفيديو الذي يشرح كيفية إنشاء قائمة مطعم باستخدام HTML وجداول CSS:

موارد إضافية

أدوات ومراجع لمساعدتك في تعلم HTML

MDN Web Docs

MDN Web Docs

أفضل مرجع لتعلم HTML مع شرح مفصل لكل العلامات والسمات.

زيارة الموقع
W3Schools

W3Schools HTML

دروس تفاعلية وأمثلة عملية لتعلم HTML.

زيارة الموقع
CodePen

CodePen

منصة لكتابة وتجربة أكواد HTML, CSS, JavaScript مباشرة في المتصفح.

زيارة الموقع
freeCodeCamp

freeCodeCamp

دورة مجانية لتعلم HTML مع مشاريع عملية.

زيارة الموقع
تواصل معنا عبر واتساب