الخصائص ( Attributes ) في الـ HTML

نبذة عامة 

المقصود  بالخصائص ( 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 إسم الخاصية وقيمة هذه الخاصية ، الان كل ما يتبقي معرفة ما هى الخصائص التي يجب كتابتها .

هذه صورة توضيحة أكثر لذلك .

Element Html Attribute

  • العنصر المستخدم هو <h1>
  • الخاصية هنا هي style=”color: red’
  • إسم الخاصة style
  • قيمة هذه الخاصة color: red

هنا قما بإضافة خاصية جديدة للعنصر <h1> وتعمل على تغير لون هذا العنصر

يوجد العديد من الخصائص الموجودة ، سنتعرف عليها تباعاََ مع كل عنصر وبشكل مفصل .

HTML Attributes List
AttributeElementDescription
classGlobal Attributeused to group elements for css
idGlobal AttributeAssign a unique id for the element
styleGlobal AttributeCSS attribute for tags (Specifies an inline style for an element)
titleGlobal AttributeSpecifies extra information about an element (displayed as a tooltip)
langGlobal AttributeLanguage of text
dirGlobal Attributedirection of text, ltr or rtl only
type<img>, <input>, <audio>, <video>,

<embed>, <iframe>, <source>, <script>,

<track>, <ol>

Defines type of element.
src<img>, <script>, <input>,

<audio>, <video>, <embed>,

<iframe>, <source>, <track>

source of media element
href<a>, <link>hypertext refrence, path of hyperlink and link tag
tabindex<a>, <input>, <select>, <button>,

<select>, <textarea>

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
bgcolorBackground Color of the document

(Removed in HTML5)

<body bgcolor="aqua">
backgroundBackground Image of the document

(Removed in HTML5)

<body background="img/bg.png">
borderTo set border of table element.

(Removed in HTML5)

<table border="1"> </table>
alignAlign left, right, center

(Removed in HTML5)

<p align="center">
valignAlign top, middle, bottom

(Removed in HTML5)

<p valign="middle">
cellspacingchange space (margin) between table cells

(Removed in HTML5)

<table cellspacing="10px">
cellpaddinginner space ( padding) between table cells

(Removed in HTML5)

<table cellspacing="10px">
bottommarginMargin from bottom

(Removed in HTML5)

<body bottommargin="20">
topmarginMargin from top

(Removed in HTML5)

<body topmargin="10">