HTML Attributes

-

يوفر HTML مجموعة من Attributes مع كل HTML elements بحيث توفر هذه Attributes  معلومات إضافية لهذا tag، وتأخذ 2 parameters ( الاسم والقيمة Name &Value) والتي تعمل على تعريف خصائص element وتوضع داخل element tag . 

تركيب  Attributes

<element attribute_name="attribute_value">

طيب نوخذ مثال حتي نفهم الموضوع: 

مثال 1 href Attribute  

نشوف مثال التالي: 

<a href="https://www.devkum.com"> devkum </a>

لاحظ ان 

<a> tag

تحتوي على Attribute هنا باسم href الي بتحتوي على رابط للموقع المطلوب زيارته. ومثل ما شفنا هذا Attribute يحتوي على الاسم href والقيمة وهي الموقع المطلوب زيارته 


مثال 2 src Attribute

ال src Attribute يستخدم مع الصورة بحيث يتم تحديد الصورة المطلوب عرضها على المتصفح وفي هذا Attribute بنتم تحديد مكان الصورة المطلوب عرضها 

<img src="bellAlert.gif">

وفي هذ المثال استخدمنا مسار صورة داخل نفس المجلد، مكان الصورة مختلف ممكن يكون داخل موقعك او مشروعك او ممكن يكون من خارج الموقع

مثال 3 width and height Attributes

ال width and height Attributes تستخدم في كثير من HTML Elements، خلونا نطبقها على <img> ونشوف كيف تكتب 

<img src="bellAlert.gif" width="150" height="150" >

شوف المثال التالي 

<input type="button" width="200" height="50">

استخدمنا هذه Attribute مع input من نوع button 


مثال 4 The ID Attribute

يستخدم Attribute المسمى ID مع معظم HTML element بحيث يستخدم لإعطاء تعريف وحيد unique identification ل element ، وبنحتاح هاذ ID عند الحاجة الى الوصول الى هاذ element يعني مثلا ممكن تحتاج تخفي او تظهر الصورة بناء على موقف معين وحتي توصل لهاي الصورة لازم يكون الها ID 

شوف المثال التالي :

<img src="bellAlert.gif" width="150" height="150" id="MyImg" >
<h1 id="H1Head">Welcome</h1>

مثال 5 title Attribute 

في title يتم إضافة شرح بسيط ل HTML Element عند تحريك Mouse فوقه. نشوف المثال التالي:

<img src="bellAlert.gif" width="50" height="50" id="MyImg" title="Welcome to my Image" >

ونتيجة التنفيذ يتكون 

مثال 6 The alt Attribute
تستخدم alt مع الصورة كنص بديل للصورة، بحيث اذا صار مشكلة وتعذر عرض الصورة على المتصفح بتم عرض النص الموجود في alt كبديل للصورة
شوف المثال التالي :

<!DOCTYPE html>
<html>
<head>
<title>My First HTML Page</title>
</head>
<body>
<img src="" width="50" height="50" id="MyImg" title="Welcome to my Image" alt="Welcome to my Image" >
</body>
</html>
لاحظ ان حذفنا مسار الصورة من src الهدف نفهم كيف يتم عرض alt 
شغل الصفحة وشوف النتيجة :
لاحظ ان الصورة ما نعرضت على المتصفح وتم عرض بديل لها النص الموجود داخل alt 

مثال 7 style Attribute
يستخدم هذا attribute لإضافة style الى element مثل اللون، حجم الخط، الإطار .... الخ 
شوف المثال:
<h1 id="H1Head" style="font-family:Chaparral Pro Light; color: red;font-size: large;">Welcome</h1>

شوف في المثال السابق استخدمنا inline CSS وطبقنا مجموعة من الخصائص مثل نوع الخط، الحجم اللون على 
<h1> element 

مثال 8 lang Attribute
يستخدم لتحديد اللغة المستخدمة في صفحات HTML ، الهدف من ذلك هو مساعدة محركات البحث والمتصفحات للوصول الى الصفحات.

<!DOCTYPE html>
<html lang="en">
<body>
...
</body>
</html>
هل Attributes  هي case sensitive 
هل يوجد فرق في حال كتابة attribute بأحرف كبيرة او صغيرة.
حسب HTML Standard لا يتطلب ذلك بحيث يمكن الكتابة بأحرف صغيرة او كبيرة ، ولكن توصي W3C بان يتم كتابة attributes بأحرف صغيرة 

هل يجب كتابة قيم Attribute داخل Quote 
حسب HTML Standard لا يتطلب كتابة قيم Attribute داخل quotes  وهي ""  ولكن توصي W3C بكتابة quotes حول القيم 
في حال وجود مسافات بين النص فيجب كتابة النص داخل quotes 
 لاحظ المثال التالي:
<img src="bellAlert.gif" width="50" height="50" id="MyImg" title=Welcome to my Image alt="Welome To My Image" >

في title اضفنا النص Welcome to my Image لكن بدون quotes  في هذه الحالة سيتم عرض فقط اول كلمة الي هي Welcome  فا لحل هذه المشكلة تكتب داخل quotes .

كتابة Single or Double Quotes
بشكل عام تكتب القيم داخل attribute داخل double Quotes ولكن يمكن ان تكتب أيضا ادخل Single
<img src="" width="50" height="50" id="MyImg" title='Welcome to my Image' alt="Welome To My Image" >
لاحظ title بهذه الطريقة شغال تمام التمام وما في أي مشاكل.

في حال وجود قيمة ل attribute تحتوي على double Quotes  بالإضافة الى قيمة ثانية في هذه الحالة تكتب داخل Single
شوف المثال : 
<img src="" width="50" height="50" id="MyImg" title='Welcome to my "Image"' alt="Welome To My Image" >
شوف title يحتوي على “Images” بالإضافة الى قيمة ثانية