الأساسيات المتقدمة في HTML الدرس الثاني

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

1. التعامل مع النصوص المتقدمة

وسم <span>

يُستخدم وسم <span> لتحديد جزء معين من النص داخل عنصر آخر. يعتبر وسمًا داخليًا (inline) يمكن استخدامه لتطبيق تنسيقات خاصة أو إضافة سمات معينة لجزء محدد من النص.

<p>هذه جملة تحتوي على <span style="color: red;">نص ملون باللون الأحمر</span>.</p>

وسم <strong> و <em>

يُستخدم وسم <strong> لتحديد النصوص ذات الأهمية القصوى (عادةً ما يتم عرضها بخط عريض)، بينما يُستخدم وسم <em> لتحديد النصوص التي تحتاج إلى تأكيد أو إبرازة (عادةً ما يتم عرضها بخط مائل).

<p>هذا نص <strong>مهم</strong> وهذا نص <em>مؤكد</em>.</p>

2. إضافة الوسائط المتعددة

وسم <video>

يسمح وسم <video> بتضمين مقاطع الفيديو داخل صفحات الويب. يمكنك تحديد مصدر الفيديو باستخدام السمة <source>. يمكن أيضًا إضافة سمات مثل controls لعرض أدوات التحكم في الفيديو.

<video controls>
  <source src="movie.mp4" type="video/mp4">
  المتصفح لا يدعم عرض الفيديو.
</video>

وسم <audio>

على غرار وسم الفيديو، يُستخدم وسم <audio> لتضمين المقاطع الصوتية. يمكن تحديد مصدر الصوت باستخدام السمة <source> وإضافة سمات مثل controls.

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

3. الأساسيات المتقدمة في HTML الجداول

وسم <table>

يُستخدم وسم <table> لإنشاء جداول في صفحة الويب. يجب أن يحتوي الجدول على صفوف <tr> وأعمدة <td>. يمكن أيضًا إضافة رأس الجدول باستخدام وسم <th>.

<table>
  <tr>
    <th>الاسم</th>
    <th>العمر</th>
  </tr>
  <tr>
    <td>أحمد</td>
    <td>25</td>
  </tr>
  <tr>
    <td>سارة</td>
    <td>30</td>
  </tr>
</table>

4. الأساسيات المتقدمة في HTML النماذج (Forms)

وسم <form>

تُستخدم النماذج لجمع البيانات من المستخدمين وإرسالها إلى الخادم. يتضمن وسم <form> عناصر إدخال متعددة مثل النصوص، الأزرار، وقوائم التحديد.

<form action="/submit" method="post">
  <label for="name">الاسم:</label>
  <input type="text" id="name" name="name">
  <br>
  <label for="age">العمر:</label>
  <input type="number" id="age" name="age">
  <br>
  <input type="submit" value="إرسال">
</form>

5. الأساسيات المتقدمة في HTML الروابط البريدية وروابط الهاتف

وسم mailto: و tel:

يتيح وسم mailto: إنشاء روابط بريد إلكتروني، بينما يتيح وسم tel: إنشاء روابط للهاتف. هذه الروابط تتيح للمستخدمين فتح برنامج البريد الإلكتروني أو تطبيق الهاتف مباشرة عند النقر عليها.

<a href="mailto:example@example.com">أرسل بريد إلكتروني</a>
<br>
<a href="tel:+123456789">اتصل بنا</a>

6. تضمين الإطارات

وسم <iframe>

يُستخدم وسم <iframe> لتضمين صفحة ويب داخل صفحة ويب أخرى. يمكن استخدامه لتضمين خرائط، فيديوهات، أو أي محتوى آخر من مصادر خارجية.

<iframe src="https://www.example.com" width="600" height="400"></iframe>

في هذا الدرس، تعرّفنا على بعض الأوسمة المتقدمة في HTML التي تساعد في تحسين وتوسيع وظائف صفحات الويب. باستخدام هذه الأوسمة، يمكنك إنشاء صفحات ويب أكثر تفاعلية وشمولية. تأكد من ممارسة كتابة الأكواد وتجربتها بشكل مستمر لتصبح أكثر احترافية في استخدام HTML.