شرح HTML Global Attributes
شرح ال attributes التي يُمكن اضافتها الى أي عنصر html وهذه ال attributes تُسمى HTML Global Attributes
⚠ يجب قراءة هذا الشرح السابق قبل البدء في هذا الشرح.
1html 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>
2html 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 فإن قيمته تبدا ب شباك # |
3html 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>
4html 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>
5html 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
6html title attribute
title="value"
title معناها عنوان.
ونضيف هذا ال attribute للعنصر عندما نريد إضافة معلومات اضافيه للعنصر وتظهر قيمته عندما عندما يتحرك الماوس فوق هذا العنصر.
مثال على ذلك:
<h1 title="HTML Full Course">learn HTML</h1>
7html 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 يُمكن ان تكون ارقام او حروف