HTML / جميع وسوم وخصائص اللغة
مفهوم دعم المتصفحات
توجد العديد من المتصفحات التي يمكنك استخدامها لتصفح الإنترنت، مثل Chrome وFirefox وEdge وSafari وOpera. تم تطوير هذه المتصفحات على مدى السنوات، مما أدى إلى ظهور العديد من الإصدارات لكل منها، ولا تزال تتلقى تحديثات مستمرة.
جميع وسوم HTML
تعتبر HTML لغة أساسية لتطوير الويب. في هذه المقالة، سنستعرض جميع الوسوم وخصائصها، بالإضافة إلى كيفية استخدامها.
حل مشكلة الاختلاف بين المتصفحات
كمصمم مواقع، يُفضل دائمًا استخدام الوسوم والخصائص الشائعة بين معظم المتصفحات لضمان أن تصاميمك تظهر بشكل متسق لدى جميع المستخدمين.
يمكنك الاعتماد على مكتبات مثل Bootstrap وUIkit، التي تساعد في بناء تصاميم جميلة ومتوافقة مع جميع المتصفحات.
أمثلة على وسوم HTML
إليك بعض الأمثلة التوضيحية للوسوم الشائعة في HTML:
1. التعليقات: <!-- -->
خد الكواد نسخ واضغط هنا جرب الكود
<!-- هذا تعليق في الكود -->
يُستخدم هذا الوسم لوضع تعليق داخل الكود. التعليقات ليس لها تأثير على عرض الصفحة.
2. إعلان نوع HTML: <!DOCTYPE>
<!DOCTYPE html>
يُستخدم لإعلام المتصفح بنوع الوثيقة. يجب أن يكون هذا الوسم في بداية الوثيقة.
3. إنشاء رابط: <a>
<!DOCTYPE html>
<html>
<body>
<!-- https://codafox.blogspot.com/ سيتم فتح صفحة الرابط "Go to codafox.blogspot.com" عند النقر على النص -->
<p><a href="https://codafox.blogspot.com/">Go to codafox.blogspot.com</a></p>
</body>
</html>
يُستخدم لإنشاء رابط. الخاصية href تحدد عنوان URL الذي يؤدي إليه الرابط.
4. تعريف مختصر: <abbr>
<!DOCTYPE html> <html> <head> <!-- abbr هنا قمنا بتحديد خصائص ظهور الوسم --> <style> abbr { text-decoration: underline dotted; font-variant: none; } </style> </head> <body> <!-- HTML سيتم عرضه كتلميح عند تمرير الماوس فوق الكلمة title الكلام الموضوع كقيمة للخاصية --> <p><abbr title="Hyper Text Markup Language">HTML</abbr> is used to create web pages.</p> </body> </html>
يُستخدم لوضع تعريف مختصر لكلمة أو جملة، يتم إظهاره عند تمرير الماوس فوقه.
5. معلومات التواصل: <address>
<address> <p>مؤلف: أحمد</p> <p>البريد الإلكتروني: <a href="mailto:ahmed@example.com">ahmed@example.com</a></p> </address>
يُستخدم لعرض معلومات التواصل مع الكاتب أو المؤلف في الصفحة.
6. محتوى المقالات: <article>
<article> <h2>عنوان المقال</h2> <p>هذا هو محتوى المقال.</p> </article>
يُستخدم لاحتواء محتوى يتم عرضه بشكل منفرد، مثل المقالات أو التعليقات.
7. محتوى جانبي: <aside>
<aside> <p>محتوى جانبي غير مرتبط مباشرة بالمحتوى الرئيسي.</p> </aside>
يُستخدم لعرض محتوى غير مرتبط بشكل مباشر بمحتوى الصفحة، مثل قائمة جانبية أو معلومات إضافية.
8. مشغل الصوت: <audio>
<audio controls> <source src="https://alnajm1.github.io/CodaFox/codafox.mp3" type="audio/mpeg"> </audio>
يُستخدم لعرض مشغل صوتي في الصفحة. خاصية controls تضيف أزرار التحكم مثل التشغيل والإيقاف.
9. نص بخط عريض: <b>
<b>هذا نص بخط عريض</b>
يُستخدم لعرض النص بخط عريض، مما يساعد في التأكيد على أهمية النص.
10. زر تفاعلي: <button>
<button type="button">اضغط هنا</button>
يُستخدم لعرض زر تفاعلي يمكن للمستخدم النقر عليه. خاصية type تحدد نوع الزر (مثل button أو submit).
11. الرسومات: <canvas>
<canvas id="myCanvas" width="200" height="100"></canvas>
يُستخدم لعرض رسومات بداخل مساحة محددة. يمكن رسم الرسومات باستخدام JavaScript.
12. عرض فيديو: <video>
<video width="320" height="240" controls>
<source src="https://alnajm1.github.io/CodaFox/codafox.mp4" type="video/mp4">
<p>متصفحك لا يدعم تشغيل الفيديو.</p>
</video>
يُستخدم لعرض فيديو في الصفحة. خاصية controls تضيف أزرار التحكم.
13. رسومات SVG: <svg>
<svg width="100" height="100"> <circle cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="red" /> </svg>
يُستخدم لعرض رسومات متجهة، مثل الدوائر أو الأشكال الأخرى باستخدام وسوم SVG.
14. تذييل الصفحة: <footer>
<footer> <p>حقوق الطبع والنشر © 2023</p> </footer>
يُستخدم لتحديد قسم تذييل في الصفحة، والذي غالبًا ما يحتوي على معلومات حقوق النشر.
15. رأس الصفحة: <header>
<header> <h1>عنوان الموقع</h1> </header>
يُستخدم لتحديد رأس الصفحة، وعادةً ما يحتوي على عنوان الموقع أو الشعار.
16. قائمة التنقل: <nav>
<nav> <ul> <li><a href="#home">الرئيسية</a></li> <li><a href="#about">حول</a></li> </ul> </nav>
يُستخدم لتحديد قسم التنقل في الصفحة. عادةً ما يحتوي على قائمة من الروابط.
17. نموذج: <form>
<form action="submit.php" 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>
يُستخدم لإنشاء نموذج لجمع البيانات من المستخدمين. يتم تضمين عناصر إدخال مثل النصوص والبريد الإلكتروني وزر الإرسال.
18. قائمة مرتبة: <ol>
<ol> <li>البند الأول</li> <li>البند الثاني</li> </ol>
يُستخدم لإنشاء قائمة مرتبة، حيث يتم ترقيم العناصر تلقائيًا.
19. قائمة غير مرتبة: <ul>
<ul> <li>البند الأول</li> <li>البند الثاني</li> </ul>
يُستخدم لإنشاء قائمة غير مرتبة، حيث يتم استخدام رموز النقاط بدلاً من الأرقام.
20. فقرة: <p>
<p>هذه فقرة نصية.</p>
يُستخدم لتحديد فقرة نصية. يتم إضافة مسافة بين الفقرات تلقائيًا.
21. نص بخط مائل: <i>
<i>هذا نص بخط مائل</i>
يُستخدم لعرض النص بخط مائل، مما يساعد في تمييزه عن النص العادي.
22. نص بخط تحت: <u>
<u>هذا نص بخط تحت</u>
يُستخدم لعرض النص بخط تحت، مما يضيف تأثيرًا بصريًا مميزًا.
23. نص مشطوب: <s>
<s>هذا نص مشطوب</s>
يُستخدم لعرض النص بشكل مشطوب، مما يدل على أنه لم يعد صالحًا أو قيد الاستخدام.
24. نص مميز: <mark>
<mark>هذا نص مميز</mark>
يُستخدم لتسليط الضوء على نص معين، مما يساعد في جذب انتباه القارئ.
25. نص منسق: <blockquote>
<blockquote> <p>هذا نص منسق.</p> </blockquote>
يُستخدم لتحديد نص منسق، عادةً ما يكون اقتباسًا من شخص أو مصدر آخر.
26. صورة: <img>
<img src="https://alnajm1.github.io/CodaFox/HTML%20CODAFOX.png" alt="وصف الصورة">
يُستخدم لإدراج صورة في الصفحة. خاصية alt توفر وصفًا للصورة في حالة عدم تحميلها.
27. جدول: <table>
<table> <tr> <th>الرأس 1</th> <th>الرأس 2</th> </tr> <tr> <td>البيان 1</td> <td>البيان 2</td> </tr> </table>
يُستخدم لإنشاء جدول، يتكون من صفوف وأعمدة لعرض البيانات بشكل منظم.
28. إدخال نص: <input>
<input type="text" placeholder="أدخل نصًا هنا">
يُستخدم لإنشاء حقل إدخال نص، حيث يمكن للمستخدم إدخال بياناته.
29. زر إرسال: <input type="submit">
<input type="submit" value="إرسال">
يُستخدم لإنشاء زر إرسال في النماذج، مما يسمح للمستخدم بإرسال البيانات المدخلة.
30. نص مميز: <strong>
<strong>هذا نص مميز</strong>
يُستخدم للإشارة إلى النص المهم، مما يجعله يظهر بشكل أكثر بروزًا.