تعلم HTML (الجزء الثالث) أهم الوسوم المتقدمة في HTML للمحترفين

 أهم الوسوم المتقدمة في HTML للمحترفين

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

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

---

1️⃣ وسم الفيديو المتقدم

يمكنك إضافة فيديو داخل الصفحة بشكل متقدم باستخدام <video> مع خيارات أكثر مثل التشغيل التلقائي أو التحكم في الصوت.

مثال:

<video width="640" height="360" controls autoplay muted>

  <source src="video.mp4" type="video/mp4">

  المتصفح لا يدعم الفيديو

</video>

 

شرح:

autoplay لتشغيل الفيديو تلقائيًا

muted لتشغيل الفيديو بدون صوت

controls لإظهار أزرار التحكم

---

2️⃣ وسم الصوت المتقدم

يمكنك استخدام <audio> مع عدة تنسيقات صوتية لضمان تشغيلها على جميع المتصفحات.

مثال:

<audio controls>

  <source src="audio.mp3" type="audio/mpeg">

  <source src="audio.ogg" type="audio/ogg">

  المتصفح لا يدعم الصوت

</audio>

 

---

3️⃣ إنشاء الجداول المتقدمة

الجداول في HTML يمكن أن تحتوي على رؤوس وعناوين فرعية ودمج خلايا.

مثال:

<table border="1">

  <tr>

    <th>المنتج</th>

    <th>السعر</th>

    <th>الكمية</th>

  </tr>

  <tr>

    <td>كتاب HTML</td>

    <td>100 جنيه</td>

    <td>1</td>

  </tr>

  <tr>

    <td colspan="2">الإجمالي</td>

    <td>100 جنيه</td>

  </tr>

</table>

 

---

4️⃣ نماذج HTML (Forms)

النماذج مهمة جدًا لتسجيل البيانات من المستخدمين مثل تسجيل الدخول أو الاشتراك في النشرات الإخبارية.

مثال:

<form>

  <input type="text" placeholder="اكتب اسمك"><br><br>

  <input type="email"placeholder="[email protected]"><br><br>

  <input type="submit" value="إرسال">

</form>

 

---

5️⃣ القوائم المتقدمة

يمكنك دمج القوائم داخل بعضها لإنشاء قوائم متعددة المستويات.

مثال:

<ul>

  <li>HTML

    <ul>

      <li>العناوين</li>

      <li>الفقرات</li>

    </ul>

  </li>

  <li>CSS</li>

  <li>JavaScript</li>

</ul>

 

---

6️⃣ الروابط المتقدمة

يمكنك جعل الرابط يفتح في نافذة جديدة باستخدام target="_blank".

مثال:

<a href="https://example.com" target="_blank">زيارة الموقع</a>

ما هو target في HTML؟

الخاصية target تُستخدم مع وسم <a> (الرابط) لتحدد أين سيُفتح الرابط عند الضغط عليه.

الخيارات الأكثر شيوعًا:

_self → يفتح الرابط في نفس الصفحة (وهو الافتراضي).

_blank → يفتح الرابط في نافذة أو تبويب جديد.

_parent → يفتح الرابط في إطار الوالد إذا كانت الصفحة داخل إطارات (frames).

_top → يفتح الرابط في أعلى إطار/نافذة ويزيل أي إطارات.

---

 معنى "target="_blank

عندما تكتب:

 

<a href="https://example.com" target="_blank">زيارة الموقع</a>

 

هذا يعني:

عند ضغط المستخدم على الرابط، سيتم فتح الموقع في تبويب جديد بدلًا من استبدال الصفحة الحالية.

مفيد إذا كنت تريد أن يظل المستخدم على موقعك ويستمر في قراءة المحتوى بعد الضغط على الرابط الخارجي.

---

نصائح مهمة عند استخدام _blank

أضف rel="noopener noreferrer" للأمان
لمنع المواقع المفتوحة في تبويب جديد من الوصول إلى نافذتك الأصلية، اكتب:

 

<a href="https://example.com" target="_blank" rel="noopener noreferrer">زيارة الموقع</a>

 

لا تفرط في استخدامه
فتح روابط كثيرة في تبويبات جديدة يمكن أن يزعج المستخدم.

مفيد للروابط الخارجية
يفضل استخدام _blank عند الإشارة لمواقع خارجية، بينما الروابط الداخلية غالبًا تفتح في نفس الصفحة _self.

---

7️⃣ إدراج الوسائط التفاعلية

يمكنك أيضًا استخدام الوسوم الجديدة مثل:

<iframe> لإدراج صفحات أو فيديوهات من مواقع أخرى

<embed> لإدراج ملفات PDF أو وسائط أخرى

مثال لإدراج فيديو يوتيوب:

<iframe width="560" height="315" src="https://www.youtube.com/embed/xyz" frameborder="0" allowfullscreen>

</iframe>

<iframe> هو وسم في HTML يسمح لك بإدراج صفحة ويب داخل صفحة ويب أخرى، زي “نافذة داخل الصفحة”.

src → رابط الصفحة اللي هتظهر داخل الـ iframe

width و height → حجم الإطار

 

---

8️⃣ نصائح مهمة عند استخدام الوسوم المتقدمة

استخدم alt للصور لتسهيل الوصول للمستخدمين وSEO

ضع وسوم <video> و <audio> مع نص بديل للمستخدمين الذين لا يدعم متصفحاتهم الوسائط

احرص على ترتيب الأكواد بشكل منظم لسهولة التعديل لاحقًا

اجمع بين HTML وCSS وJavaScript لتحصل على صفحة ويب تفاعلية وجميلة

---

🔥 خلاصة

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

لو حابب تتعلم HTML خطوة بخطوة من البداية حتى إنشاء أول صفحة ويب بنفسك، أنا جهزت لك كتاب PDF شامل للمبتدئين.
للحصول على الكتاب والتواصل معي مباشرة، ممكن تتواصل معي على الرقم: 01015221391

ملاحظة: الكتاب فيه كل أجزاء السلسلة مع أمثلة عملية جاهزة للتطبيق، هيسهلك تعلم HTML ويخليك تبدأ موقعك الأول بنفسك  بسرعة.