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

🟢 الجزء الأول: فهم HTML

✅ إيه هو HTML؟

HTML = HyperText Markup Language هي لغة هيكل صفحات الويب (مش لغة برمجة).

المصدر: MDN

✅ ليه لازم أتعلم HTML؟

المصدر: W3Schools

✅ إزاي HTML بيشتغل؟

بيتكتب بعناصر (Elements)، كل عنصر بيبقى وسم فتح <> ووسم غلق </>. المتصفح بيقرا الكود ويعرض الصفحة.

المصدر: MDN

🟢 الجزء الثاني: الإعداد لبدء تعلم HTML

✅ إيه اللي هتحتاجه؟

✅ إزاي تبدأ تكتب HTML؟

تفتح VS Code، تنشئ ملف index.html وتفتحه في المتصفح.

المصدر: MDN Getting started

🟢 الجزء الثالث: أساسيات HTML

✅ هيكل صفحة HTML الأساسي

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

المصدر: MDN

✅ الوسوم الأساسية

✅ عناوين (Headings)

<h1>عنوان رئيسي</h1>
<h2>عنوان فرعي</h2>

MDN - Headings

✅ فقرات (Paragraphs)

<p>هذا نص طويل يشرح شيئًا ما.</p>

MDN - Paragraphs

✅ روابط (Links)

<a href="https://www.google.com">اضغط هنا لزيارة جوجل</a>

MDN - Links

✅ صور (Images)

<img src="image.jpg" alt="وصف الصورة">

MDN - Images

✅ قوائم (Lists)

<ul>
    <li>تفاح</li>
    <li>موز</li>
</ul>

<ol>
    <li>عنصر 1</li>
    <li>عنصر 2</li>
</ol>

MDN - Lists

✅ تنسيق النصوص

<p>هذا نص <strong>مهم</strong> وهذا <em>مائل</em>.</p>

MDN - Text formatting

✅ السمات (Attributes)

<a href="https://example.com" target="_blank">رابط</a>
<p class="intro" id="first">نص تمهيدي</p>

MDN - Attributes

🟢 الجزء الرابع: مفاهيم متوسطة في HTML

✅ الهيكلية (Semantic HTML)

<header>
    <h1>موقعي</h1>
    <nav>
        <ul>
            <li><a href="#home">الرئيسية</a></li>
            <li><a href="#about">من نحن</a></li>
        </ul>
    </nav>
</header>

MDN - Semantic HTML

✅ الجداول (Tables)

<table border="1">
    <thead>
        <tr>
            <th>الاسم</th>
            <th>العمر</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>علي</td>
            <td>25</td>
        </tr>
        <tr>
            <td>سارة</td>
            <td>30</td>
        </tr>
    </tbody>
</table>

MDN - Tables

✅ النماذج (Forms)

النماذج بتُستخدم لجمع البيانات من المستخدمين (زي تسجيل الدخول، تسجيل عضوية، إرسال تعليقات،... إلخ).

العناصر الأساسية في النموذج:

مثال على نموذج بسيط:

<form action="/submit" method="POST">
    <label for="name">الاسم:</label>
    <input type="text" id="name" name="name" required>

    <br>

    <label for="email">الإيميل:</label>
    <input type="email" id="email" name="email" required>

    <br>

    <label for="password">كلمة المرور:</label>
    <input type="password" id="password" name="password" required>

    <br>

    <button type="submit">إرسال</button>
</form>

شرح العناصر:

👉 MDN - Forms

🟢 الجزء الخامس: التقدم للاحتراف

✅ ربط HTML بـ CSS و JavaScript

✅ CSS

<style> داخل الصفحة
<link rel="stylesheet" href="styles.css">
👉 MDN - CSS

✅ JavaScript

<script> داخل الصفحة
<script src="script.js"></script>
👉 MDN - JavaScript

✅ تحسين الوصولية (Accessibility)

👉 MDN - Accessibility

✅ SEO (تحسين محركات البحث)

<meta name="description" content="...">
👉 MDN - SEO basics

✅ إدارة المشاريع

Git / GitHub
👉 GitHub Docs

✅ تعلم أطر عمل (Frameworks)

Bootstrap
👉 Bootstrap

🟢 الجزء السادس: مصادر للتعلم المستمر

✅ مواقع مجانية

✅ قنوات يوتيوب

✅ كتب

HTML and CSS: Design and Build Websites by Jon Duckett
👉 رابط الكتاب في أمازون

✅ نصائح أخيرة

شكراً لك علي القراءة
انتظر كل جديد علي القناة