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

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

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

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

شرح HTML Global Attributes

شرح ال attributes التي يُمكن اضافتها الى أي عنصر html وهذه ال attributes تُسمى HTML Global Attributes
يجب قراءة هذا الشرح السابق قبل البدء في هذا الشرح.

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 فإن قيمته تبدا ب شباك #
3

html lang attribute

lang="value"

هذا ال attribute يُمكن ان يُضاف الى أي عُنصر من عناصر ال html والمحتوى بداخله هو الذي يُحدد لغة المُحتوى داخل هذا العُنصر.

وهذه بعض القيم الخاصة ببعض اللُغات المشهورة:
اللغةقيمة ال lang
العربيةlang="ar"
الإنجليزيةlang="en"
الفرنسيةlang="fr"
الألمانيةlang="de"

مثال على ذلك:
 
<h1 lang="en" id="html" class="header-html">learn HTML</h1> 

4

html dir attribute

dir="value"

dir اختصار ل direction ومعناها اتجاه.
وهذا ال attribute هو المسؤول عن اتجاه النص سواء من اليمين الى اليسار او العكس.
وله 3 قيم:

  • ltr : هي اختصار ل left to right ومعناها من اليسار الى اليمين ودائما تُستخدم مع اللغات التي تُكتب من اليسار الى اليمين مثل اللغة الإنجليزية.
  • rtl : هي اختصار ل right to left ومعناها من اليمين الى اليسار مثال على ذلك هذه القيمة دائما تُستخدم مع المواقع التي باللغة العربية لان اللغة العربية تُكتب من اليمين الى اليسار.
  • auto : ونستخدمها عندما نريد من المُتصفح هو الذى يكتشف اتجاه النص على أساس المُحتوى داخل العنصر.

مثال على ذلك:
 
<h1 dir="ltr" lang="en" id="html" class="header-html">learn HTML</h1> 

5

html style attribute

style="css أكواد"

يوجد فرق كبير بين style ك attribute و style ك عنصر.
Style ك عنصر تم شرحة مسبقاً في هذا الشرح
Style ك attribute يُستخدم ك التالي:
مثال على ذلك:

 
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>style attribute</title>
  </head>
  <body>
 
    <h1 style="color: red; font-size: 50px;">learn HTML</h1>
 
  </body>
</html> 

وبالتالي تكون قيمته عبارة عن أكواد لغة CSS

6

html title attribute

title="value"

title معناها عنوان.
ونضيف هذا ال attribute للعنصر عندما نريد إضافة معلومات اضافيه للعنصر وتظهر قيمته عندما عندما يتحرك الماوس فوق هذا العنصر.


مثال على ذلك:
 
<h1 title="HTML Full Course">learn HTML</h1> 

7

html data-* attribute

data-*="value"

هذا ال attribute يُستخدم كثيرا عندما نستخدم لغة JavaScript لأن هذا ال attribute يُمكننا من تخزين بيانات خاصة للعنصر. وهذه البيانات نستخدمها في لغة JavaScript لعمل تعديلات على العنصر.

مثال على ذلك:

 
<ul>
  <li data-color="red">learn HTML</li>
  <li data- color ="blue">learn CSS</li>
  <li data- color =" yellow">learn JavaScript</li>
</ul>                      

- ونلاحظ ان اسم ال attribute بعد data- و لا يحتوي على حروف كبيرة (capital)

- قيمة ال attribute يُمكن ان تكون ارقام او حروف

المصادر

w3.org

  1. w3.org Global attributes

w3schools.com

  1. w3schools.com Global Attributes
😡
انت مشغل الـ AdBlock !!

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