مقدمة إلى HTML

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

<!-- مثال بسيط لصفحة HTML -->
<!DOCTYPE html>
<html>
<head>
    <title>عنوان الصفحة</title>
</head>
<body>
    <h1>أهلاً بالعالم!</h1>
    <p>هذه هي أول صفحة ويب لي.</p>
</body>
</html>

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

كل صفحة HTML تحتوي على العناصر الأساسية التالية:

<!DOCTYPE html> <!-- تعريف نوع المستند -->
<html> <!-- العنصر الجذر للصفحة -->
<head> <!-- يحتوي على معلومات عن الصفحة -->
    <meta charset="UTF-8">
    <title>عنوان الصفحة</title>
</head>
<body> <!-- يحتوي على محتوى الصفحة المرئي -->
    <!-- المحتوى هنا -->
</body>
</html>

كتابة كود وسوم النصوص والعناوين

كود العناوين

تستخدم وسوم العناوين من h1 إلى h6 لعناوين المحتوى، حيث h1 هو الأهم وh6 هو الأقل أهمية.

<h1>عنوان رئيسي</h1>
<h2>عنوان فرعي</h2>
<h3>عنوان أصغر</h3>
<h4>عنوان</h4>
<h5>عنوان</h5>
<h6>عنوان</h6>

كتابة كود العنوان الرئيسي (h1)

عنوان فرعي (h2)

عنوان أصغر (h3)

كتابة كود الفقرات والنصوص

<p>هذه فقرة نصية عادية.</p>
<p>هذه فقرة أخرى تحتوي على <strong>نص عريض</strong> 
و <em>نص مائل</em> و <u>نص تحته خط</u>.</p>

<blockquote>هذا نص مقتبس من مصدر آخر.</blockquote>

<pre>هذا نص     يحافظ     على     المسافات
و
السطور كما هي.</pre>

كتابة كود القوائم

قائمة غير مرقمة

<ul>
    <li>عنصر القائمة الأول</li>
    <li>عنصر القائمة الثاني</li>
    <li>عنصر القائمة الثالث</li>
</ul>

قائمة مرقمة

<ol>
    <li>عنصر القائمة الأول</li>
    <li>عنصر القائمة الثاني</li>
    <li>عنصر القائمة الثالث</li>
</ol>

قائمة تعريف

<dl>
    <dt>HTML</dt>
    <dd>لغة ترميز النص الفائق</dd>
    
    <dt>CSS</dt>
    <dd>لغة تنسيق صفحات الويب</dd>
</dl>

كتابة كود الجداول

<table>
    <caption>عنوان الجدول</caption>
    <thead>
        <tr>
            <th>اسم المنتج</th>
            <th>السعر</th>
            <th>الكمية</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>كتاب HTML</td>
            <td>50 ريال</td>
            <td>10</td>
        </tr>
        <tr>
            <td>كتاب CSS</td>
            <td>45 ريال</td>
            <td>15</td>
        </tr>
    </tbody>
    <tfoot>
        <tr>
            <td colspan="2">المجموع</td>
            <td>25</td>
        </tr>
    </tfoot>
</table>

كتابة كود النماذج

<form action="/submit" method="post">
    <label for="name">الاسم:</label>
    <input type="text" id="name" name="name" required>
    
    <label for="email">البريد الإلكتروني:</label>
    <input type="email" id="email" name="email" required>
    
    <label for="password">كلمة المرور:</label>
    <input type="password" id="password" name="password" required>
    
    <label for="message">الرسالة:</label>
    <textarea id="message" name="message" rows="4"></textarea>
    
    <label>
        <input type="checkbox" name="subscribe">
        الاشتراك في النشرة البريدية
    </label>
    
    <button type="submit">إرسال</button>
    <button type="reset">مسح</button>
</form>

HTML العناصر الدلالية 

HTML5 قدم عناصر دلالية تساعد في وصف محتوى الصفحة بشكل أفضل لمحركات البحث ولوصول أسهل.

<header>
    <nav>
        <!-- روابط التنقل -->
    </nav>
</header>

<main>
    <article>
        <section>
            <!-- محتوى القسم -->
        </section>
    </article>
    
    <aside>
        <!-- محتوى جانبي -->
    </aside>
</main>

<footer>
    <!-- معلومات التذييل -->
</footer>

تغطية اساسيات لغة HTML

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

ملاحظة: هذه الدورة تغطي أساسيات HTML. للوصول إلى مستوى متقدم، تحتاج إلى ممارسة وإنشاء مشاريع حقيقية.