تم إنشاء c4a.dev لمساعدتك على التركيز أثناء مُشاهدة الكورسات والإبتعاد عن إزعاج اليوتيوب (تعلم بروقااان👌)
كيفية الشراء من الموقع

منطقة إعلانية

يُمكننا وضع إعلانك هنا 🧡 ويُمكنك التواصل معنا عن طريق صفحة الفيس بوك

سعر الإعلان 3$ فى اليوم الواحد

شرح HTML Styles and Semantics tags

شرح الوسوم الخاصة بتنسيق العنصر والوسوم التي تُعطى معنى للمُتصفح HTML Styles and Semantics tags

1

html div tag

<div> </div>

div اختصار ل division ومعناها قطاع او قسم.
وهي لا تُعطى أي معنى للمُتصفح ولكن نستخدمها عندما نريد وضع بداخلها عناصر سوف نقوم بتنسيقهم بواسطة لغة CSS
جميع عناصر ال html يُمكن وضعهم داخل وسم ال <div>

2

html span tag

<span> </span>

هذا العنصر مثل عنصر ال div في كل شيء ولكن

ما الفرق بين وسم <div> ووسم <span>

وسم ال 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> 
3

html Semantics tags

<header> </header>
<footer> </footer>
<main> </main>
<section> </section>
<article> </article>
<aside> </aside>

تم شرح هذه الوسوم في هذا الشرح

4

html details , summary tag

<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> 
5

html dialog tag

<dialog> </dialog>

يُستخدم هذا العنصر لعمل dialog box وترجمتها نافذة فرعية او نافذه منبثقة. ودائما ما نستخدم لغة JavaScript مع هذا العنصر.
ويجب إضافة attribute يُسمى open ولا تكون له قيمة حتى تظهر هذه النافذة بشكل افتراضي.
مثال على ذلك:

 
<dialog open>This is an open dialog window</dialog> 
6

html data tag

<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> 

المصادر

w3.org

  1. w3.org div tag
  2. w3.org span tag
  3. w3.org details tag
  4. w3.org summary tag
  5. w3.org dialog tag
  6. w3.org data tag

w3schools.com

  1. w3schools.com div tag
  2. w3schools.com span tag
  3. w3schools.com details tag
  4. w3schools.com summary tag
  5. w3schools.com dialog tag
  6. w3schools.com data tag
😡
انت مشغل الـ AdBlock !!

يعنى انت مش مُنتسب فى القناة ولا مُشترك فى كورس يوديمى وكمان مشغل الأدبلوك فى الموقع !! 😢