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

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

قبل ما نقول اى حاجة لازم تعرف ان ال

span & div : عبارة عن عناصر = elements
id & class : عبارة عن صفات = attributes

الفرق بين div & span

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>




الفرق بين id & class

1

html class attribute

Class="value"

هذا ال attribute يُمكن إضافته الى أي عنصر html وتكون قيمته عبارة عن اسم خاص للعُنصر ونستخدم هذا الاسم لتنسيق العُنصر بواسطة اكواد لغة CSS او نستخدم هذا الاسم لعمل بعض التغيرات على العنصر بواسطة لغة JavaScript


مثال على ذلك:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>class attribute</title>
    <style>
      .header-html {color: red;}
    </style>
  </head>
  <body>

    <h1 class="header-html">learn html</h1>

  </body>
</html>
2

html id attribute

id="value"

هذا ال attribute أيضا مثل ال class فهو يُمكن إضافته الى أي عنصر html وتكون قيمته عبارة عن اسم خاص للعُنصر ونستخدم هذا الاسم لتنسيق العُنصر بواسطة اكواد لغة CSS او نستخدم هذا الاسم لعمل بعض التغيرات على العنصر بواسطة لغة JavaScript ولكنما الفرق بين id و class ؟.


مثال على ذلك:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>id attribute</title>
    <style>
      .header-html {color: red;}
      #html{font-size: 50px;}
      #css{font-size: 40px;}
    </style>
  </head>
  <body>

    <h1 id="html" class="header-html">learn HTML</h1>
    <h2 id="css" class="header-html">learn CSS</h2>

  </body>
</html>


ما الفرق بين id و class ؟



الفرق بين id و class
class="value"id="value"
يُمكننا إضافة أكثر من قيمة الى ال class لنفس العنصر.ال id زي رقم البطاقة الشخصية بتاعتك كده وبالتالي كل عنصر له قيمة id واحده مميزه عن الأخرى.
يُمكننا إضافة نفس قيمة ال class الى أكثر من عنصر. لا يُمكن إضافة نفس قيمة ال id الى أكثر من عنصر.
قيمته تبدأ ب أحرف فقط ولا تبدأ بأرقام او رموز.قيمته تبدأ ب أحرف فقط ولا تبدأ بأرقام او رموز.
عند تنسيق العنصر في لغة CSS فإن قيمته تبدا ب . عند تنسيق العنصر في لغة CSS فإن قيمته تبدا ب شباك #


Do not waste your time and start with us, now 😍