نبذة عامة
المقصود بالخصائص ( Attribute ) هو إضافة مواصفات ومزايا يتميز بها عناصر HTML , وهى الأشياء الموجودة معه ولا يستطيع أن ينفك عنها ،
تخيل معى أنك ذاهب لشراء سيارة ، فسوف تسأل ، ما هو لونها ، ما هو الموديل ، ما هو إسمها ، من هى الشركة المصنعه لها .. كل هذه أسئلة حول السيارة وهي نفس الوقت تكون خصائص السيارة ، ولكل سؤال من هذه الأسئلة إجابة ، فدائماََ تأتي الخصائص على هيئة
name = value
- name هو إسم الخاصية
- value وهو قيمة هذه الخاصية
الخصائص دائماََ تأتى في وسم البداية لعنصر الـ HTML ، وقلناََ ايضاََ ان الخاصية تأتى على صيغة name = value ، إذا كيف نقوم بكتابة الخصائص؟
لنفترض جدلاََ ان هناك عنصر بإسم <person> بمعني شخص ، نريد إضافة له بعض الخصائص ، طبعاََ نعلم ان لكل شخص موجود بعض الخصائص والمواصفات غير موجودة بأشخاص أخرين ، فهناك اشخاص بأوزان مختلفة ، واسماء مختلفة وحتى أعمارهم مختلفة ، فأذا اردنا توضيح ذلك
<person name=’ahmed’ age=’22’ length=’160′ weight=’75’ >
<person name=’heba’ age=’25’ length=’155′ weight=’60’ >
لاحظ قمنا بإضافة لكل عنصر خصائص مخصصة له .. ولاحظ ان جميع الخصائص كانت بصيغه name=’value’ ، كان هناك إسم للخاصية وقيمته هذه الخاصية .
الخصائص فى الـ HTML
بكل تأكيد الان يدور في بالك سؤال ، هذه الخصائص هل أنا اقوم بكتابتها ، أم هى متواجده مع العنصر اساساََ ، للإجابة على هذا السؤال ، دعونا نرجع لمثال <person> لاحظ هنا ان الشخص له خصائص لا يمكن ان تنفك عنه ، مثل الإسم ، فلكل شخص إسم خاص به ، ورقم هويه خاص به يختلف عن اي شخص اخر ، وايضاََ يمكن اضافة خصائص إضافة لبعض الاشخاص الأخرين ، مثلاََ لو كان الشخص طالب جامعى ، فهذه خاصية إضافية ممكن اضافتها ونفس الوقت ليس كل الاشخاص طلاب جامعيين .
إذاََ الإجابة على هذا السؤال تكون ، ان هناك خصائص افتراضية تأتي لبعض العناصر ولا يمكن ان تعمل من دونها ، ويمكنك فى نفس الوقت إضافة خصائص كما تريد لأي عنصر موجود حسب الحاجة .
كتابة الخصائص في الـ HTML
عرفناََ مسبقاََ ان الخصائص تأتى فى وسم البداية ، وايضاََ ان الخاصية تكون على هيئية name = value إسم الخاصية وقيمة هذه الخاصية ، الان كل ما يتبقي معرفة ما هى الخصائص التي يجب كتابتها .
هذه صورة توضيحة أكثر لذلك .
- العنصر المستخدم هو <h1>
- الخاصية هنا هي style=”color: red’
- إسم الخاصة style
- قيمة هذه الخاصة color: red
هنا قما بإضافة خاصية جديدة للعنصر <h1> وتعمل على تغير لون هذا العنصر
يوجد العديد من الخصائص الموجودة ، سنتعرف عليها تباعاََ مع كل عنصر وبشكل مفصل .
| Attribute | Element | Description |
|---|---|---|
| class | Global Attribute | used to group elements for css |
| id | Global Attribute | Assign a unique id for the element |
| style | Global Attribute | CSS attribute for tags (Specifies an inline style for an element) |
| title | Global Attribute | Specifies extra information about an element (displayed as a tooltip) |
| lang | Global Attribute | Language of text |
| dir | Global Attribute | direction of text, ltr or rtl only |
| type | <img>, <input>, <audio>, <video>,
| Defines type of element. |
| src | <img>, <script>, <input>,
| source of media element |
| href | <a>, <link> | hypertext refrence, path of hyperlink and link tag |
| tabindex | <a>, <input>, <select>, <button>,
| to override default tab order and follow the specific one. |
| width | <img>, <audio>, <video>, <iframe> | Set width of element |
| value | <input>, <option>, | Set default value of element visible at pageload |
| size | <input>, <select> | Width of element in px. For input type text, size means no of characters |
| bgcolor | Background Color of the document (Removed in HTML5) | <body bgcolor="aqua"> |
| background | Background Image of the document (Removed in HTML5) | <body background="img/bg.png"> |
| border | To set border of table element. (Removed in HTML5) | <table border="1"> </table> |
| align | Align left, right, center (Removed in HTML5) | <p align="center"> |
| valign | Align top, middle, bottom (Removed in HTML5) | <p valign="middle"> |
| cellspacing | change space (margin) between table cells (Removed in HTML5) | <table cellspacing="10px"> |
| cellpadding | inner space ( padding) between table cells (Removed in HTML5) | <table cellspacing="10px"> |
| bottommargin | Margin from bottom (Removed in HTML5) | <body bottommargin="20"> |
| topmargin | Margin from top (Removed in HTML5) | <body topmargin="10"> |