مقدمة

مرحبًا بك في الدرس الثاني من دورة تعلم HTML! في هذا الدرس، سنتعمق أكثر في وسوم HTML المتقدمة التي تساعد في تحسين صفحات الويب الخاصة بك وإضافة المزيد من التفاعل والمحتوى المتنوع. سنتعلم كيفية استخدام الوسوم لتحسين النصوص، إضافة الجداول، القوائم، والنماذج، بالإضافة إلى تضمين الوسائط المتعددة.

1. تحسين النصوص باستخدام الوسوم

1.1 النصوص الغامقة والمائلة

يمكنك تحسين مظهر النصوص في HTML باستخدام الوسوم <strong> و <em>.

  • الوسم <strong>: يُستخدم لجعل النص غامقًا (bold).
<p>هذا نص <strong>غامق</strong>.</p>
  • الوسم <em>: يُستخدم لجعل النص مائلًا (italic).
<p>هذا نص <em>مائل</em>.</p>
1.2 النصوص المرمزة

يمكنك استخدام الوسم <code> لإضافة نص مرمز، وهو مفيد عند عرض شفرات برمجية.

<p>يمكنك كتابة كود HTML مثل هذا: <code>&lt;p&gt;Hello, World!&lt;/p&gt;</code></p>

2. القوائم في HTML

2.1 القوائم المرتبة (Ordered Lists)

تُستخدم القوائم المرتبة لإنشاء قائمة مرقمة.

<ol>
    <li>البند الأول</li>
    <li>البند الثاني</li>
    <li>البند الثالث</li>
</ol>
2.2 القوائم غير المرتبة (Unordered Lists)

تُستخدم القوائم غير المرتبة لإنشاء قائمة نقطية.

<ul>
    <li>البند الأول</li>
    <li>البند الثاني</li>
    <li>البند الثالث</li>
</ul>
2.3 القوائم التعريفية (Definition Lists)

تُستخدم القوائم التعريفية لتعريف المصطلحات أو العناصر.

<dl>
    <dt>HTML</dt>
    <dd>لغة توصيف النص التشعبي.</dd>
    <dt>CSS</dt>
    <dd>أوراق الأنماط المتتالية.</dd>
</dl>

3. الجداول في HTML

3.1 إنشاء جداول

تُستخدم الجداول لعرض البيانات بشكل منظم. يمكن إنشاء الجداول باستخدام الوسوم <table>, <tr>, <td>, و <th>.

<table border="1">
    <tr>
        <th>الاسم</th>
        <th>العمر</th>
    </tr>
    <tr>
        <td>أحمد</td>
        <td>25</td>
    </tr>
    <tr>
        <td>سارة</td>
        <td>30</td>
    </tr>
</table>
شرح الكود
  • <table>: وسم الجداول.
  • <tr>: وسم الصف.
  • <td>: وسم الخلية.
  • <th>: وسم رأس الجدول.

4. النماذج في HTML

4.1 إنشاء نموذج

تُستخدم النماذج لجمع البيانات من المستخدمين. يمكن إنشاء نموذج باستخدام الوسم <form>.

<form action="/submit" method="post">
    <label for="name">الاسم:</label>
    <input type="text" id="name" name="name">
    <br>
    <label for="email">البريد الإلكتروني:</label>
    <input type="email" id="email" name="email">
    <br>
    <input type="submit" value="إرسال">
</form>
شرح الكود
  • <form>: وسم النموذج.
  • action: تحدد الوجهة التي يتم إرسال البيانات إليها.
  • method: تحدد طريقة إرسال البيانات (GET أو POST).
  • <label>: وسم لتسمية حقول النموذج.
  • <input>: وسم لإدخال البيانات.
  • type: تحدد نوع الإدخال (نص، بريد إلكتروني، زر إرسال، إلخ).

5. تضمين الوسائط المتعددة

5.1 تضمين الصور

يمكنك تضمين الصور في صفحة الويب باستخدام الوسم <img>.

<img src="image.jpg" alt="وصف الصورة">
5.2 تضمين الفيديو

يمكنك تضمين الفيديوهات في صفحة الويب باستخدام الوسم <video>.

<video width="320" height="240" controls>
    <source src="movie.mp4" type="video/mp4">
    متصفحك لا يدعم تشغيل الفيديو.
</video>
5.3 تضمين الصوت

يمكنك تضمين الصوتيات في صفحة الويب باستخدام الوسم <audio>.

<audio controls>
    <source src="audio.mp3" type="audio/mpeg">
    متصفحك لا يدعم تشغيل الصوت.
</audio>

6. أمثلة وتطبيقات عملية

مثال 1: إنشاء صفحة تحتوي على جدول ونموذج

لنقم بإنشاء صفحة تحتوي على جدول بيانات ونموذج لجمع المعلومات. جرب كتابة الكود التالي في محرر النصوص الخاص بك:

<!DOCTYPE html>
<html>
<head>
    <title>صفحة تحتوي على جدول ونموذج</title>
</head>
<body>
    <h1>بيانات المستخدمين</h1>
    <table border="1">
        <tr>
            <th>الاسم</th>
            <th>العمر</th>
        </tr>
        <tr>
            <td>أحمد</td>
            <td>25</td>
        </tr>
        <tr>
            <td>سارة</td>
            <td>30</td>
        </tr>
    </table>

    <h2>نموذج جمع المعلومات</h2>
    <form action="/submit" method="post">
        <label for="name">الاسم:</label>
        <input type="text" id="name" name="name">
        <br>
        <label for="email">البريد الإلكتروني:</label>
        <input type="email" id="email" name="email">
        <br>
        <input type="submit" value="إرسال">
    </form>
</body>
</html>
مثال 2: صفحة تحتوي على وسائط متعددة

لإضافة وسائط متعددة إلى صفحتك، استخدم الوسوم المناسبة كما هو موضح في الكود التالي:

<!DOCTYPE html>
<html>
<head>
    <title>صفحة تحتوي على وسائط متعددة</title>
</head>
<body>
    <h1>صورة وفيديو وصوت</h1>
    <img src="image.jpg" alt="وصف الصورة">
    <br>
    <video width="320" height="240" controls>
        <source src="movie.mp4" type="video/mp4">
        متصفحك لا يدعم تشغيل الفيديو.
    </video>
    <br>
    <audio controls>
        <source src="audio.mp3" type="audio/mpeg">
        متصفحك لا يدعم تشغيل الصوت.
    </audio>
</body>
</html>

7. تمرين عملي

حان الوقت لتطبيق ما تعلمته. حاول إنشاء صفحة HTML تحتوي على:

  1. عنوان رئيسي (H1) يحمل اسمك.
  2. جدول يعرض بيانات وهمية لثلاثة أشخاص (اسم وعمر).
  3. نموذج لجمع المعلومات (اسم، بريد إلكتروني، رسالة).
  4. صورة تمثل شيئًا تحبه.
  5. فيديو تعليمي.
  6. مقطع صوتي.
الحل المقترح:
<!DOCTYPE html>
<html>
<head>
    <title>صفحتي المتقدمة</title>
</head>
<body>
    <h1>أحمد</h1>
    <h2>بيانات الأصدقاء</h2>
    <table border="1">
        <tr>
            <th>الاسم</th>
            <th>العمر</th>
        </tr>
        <tr>
            <td>علي</td>
            <td>28</td>
        </tr>
        <tr>
            <td>منى</td>
            <td>22</td>
        </tr>
        <tr>
            <td>سالم</td>
            <td>35</td>
        </tr>
    </table>

    <h2>نموذج التواصل</h2>
    <form action="/submit" method="post">
        <label for="name">الاسم:</label>
        <input type="text" id="name" name="name">
        <br>
        <label for="email">البريد الإلكتروني:</label>
        <input type="email" id="email" name="email">
        <br>
        <label for="message">رسالة:</label>
        <textarea id="message" name="message"></textarea>
        <br>
        <input type="submit" value="إرسال">
    </form>

    <h2>وسائط متعددة</h2>
    <img src="image.jpg"

 alt="صورة تمثل البرمجة">
    <br>
    <video width="320" height="240" controls>
        <source src="tutorial.mp4" type="video/mp4">
        متصفحك لا يدعم تشغيل الفيديو.
    </video>
    <br>
    <audio controls>
        <source src="audio.mp3" type="audio/mpeg">
        متصفحك لا يدعم تشغيل الصوت.
    </audio>
</body>
</html>

8. مراجعة شاملة

قبل أن ننهي هذا الدرس، دعنا نراجع ما تعلمناه:

  • تحسين النصوص باستخدام الوسوم <strong> و <em>.
  • إنشاء القوائم بأنواعها المختلفة: المرتبة، غير المرتبة، والتعريفية.
  • إنشاء الجداول لعرض البيانات بشكل منظم.
  • بناء النماذج لجمع البيانات من المستخدمين.
  • تضمين الوسائط المتعددة مثل الصور، الفيديوهات، والصوتيات.

9. خاتمة

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

كُتب بواسطة

Akhmad Abdulrahman

مدون ومصمم مواقع الانترنت لتقديم افضل الخدمات مجانا ولإثراء المحتوى العربي