شرح الوسوم الخاصة بتنسيق العنصر والوسوم التي تُعطى معنى للمُتصفح HTML Styles and Semantics tags
<div> </div>div اختصار ل division ومعناها قطاع او قسم.
وهي لا تُعطى أي معنى للمُتصفح ولكن نستخدمها عندما نريد وضع بداخلها عناصر سوف نقوم بتنسيقهم بواسطة لغة CSS
جميع عناصر ال html يُمكن وضعهم داخل وسم ال <div>
<span> </span>هذا العنصر مثل عنصر ال div في كل شيء ولكن
وسم ال div : يكون block بمعنى انه يكون مُستقل بذاته بمعنى اخر يكون قبله وبعد عنصر <br>
وسم ال span : يكون inline بمعنى انه لا يحدث له تغيير الا إذا قمنا بتنسيقه بواسطة لغة CSS
مثال على ذلك:
<!DOCTYPE html>
<html>
<head>
<title>Courses 4 Arab</title>
</head>
<body>
<div>
<h1> <span lang="en">HTML</span> تعلم لغة </h1>
<p>.......................مُحتوى المقال</p>
</div>
</body>
</html>
<header> </header><footer> </footer><main> </main><section> </section><article> </article><aside> </aside>تم شرح هذه الوسوم في هذا الشرح
<section>و <article><details> </details><summary> </summary>عنصر ال <summary> يكون دائماً داخل عنصر ال <details>
يُستخدم لإظهار او إخفاء المُحتوى.
والمُحتوى داخل عنصر ال summary يكون هو العنوان وبجواره سهم لأسفل، لإظهار المُحتوى.
وبشكل افتراضي يكون المُحتوى مخفى ولكن اذا اردنا اظهار المحتوى بشكل افتراضي نستخدم attribute يُسمى open ولا تكون له قيمة.
مثال على ذلك:
<!DOCTYPE html>
<html>
<head>
<title>Courses 4 Arab</title>
</head>
<body>
<details> <!-- OR <details open> -->
<summary>Why learn with us</summary>
<ol>
<li>Job-focused content</li>
<li>Learn by building real-world projects</li>
<li>Start every course from scratch</li>
</ol>
</details>
</body>
</html>
<dialog> </dialog>يُستخدم هذا العنصر لعمل dialog box وترجمتها نافذة فرعية او نافذه منبثقة. ودائما ما نستخدم لغة JavaScript مع هذا العنصر.
ويجب إضافة attribute يُسمى open ولا تكون له قيمة حتى تظهر هذه النافذة بشكل افتراضي.
مثال على ذلك:
<dialog open>This is an open dialog window</dialog>
<data> </data>يُستخدم هذا العنصر لإضافة بيانات غير مرئية للمُستخدم العادي.
مثال على ذلك لتوضيح الفكرة: يُستخدم هذا العنصر إذا كان الموقع يتعامل مع بيانات كثيرة وتريد ان تُرتب هذه البيانات تصاعديا او تنازليا إذا كانت هذه ال data عبارة عن ارقام.
وبالتالي هذا العنصر يحتوي على attribute أساسي يُسمى value وتكون قيمته عبارة عن ارقام ليتم ترتيبهم.
مثال على ذلك:
<ul>
<li> <data value="100"> item 1 </data> </li>
<li> <data value="101"> item 2 </data> </li>
<li> <data value="102"> item 3 </data> </li>
</ul>
ياريت تقفله لوسمحت 😊 😊
تنبيه هام ✋
إذا كانت الإعلانات مزعجة بالنسبة لك، فيُمكنك التبرع ب50$ وسيتم إيقاف الإعلانات لمدة شهر لجميع زوار الموقع 🧡 ويُمكنك التواصل معنا عن طريق صفحة الفيس بوك