السمات (Attributes) في HTML

Dec. 3, 2023 * تيتو 4 تك

لقد رأينا عددًا قليلاً من علامات HTML واستخدامها مثل علامات العنوان <h1> و <h2> وعلامة الفقرة <p> والعلامات الأخرى. استخدمناها حتى الآن في أبسط أشكالها ، ولكن يمكن أن تحتوي معظم علامات HTML أيضًا على سمات ، وهي أجزاء إضافية من المعلومات.

تُستخدم السمة لتحديد خصائص عنصر HTML ويتم وضعها داخل علامة فتح العنصر. تتكون جميع السمات من جزأين - اسم وقيمة. الاسم هو الخاصية التي تريد تعيينها. على سبيل المثال ، يحمل عنصر الفقرة <p> في المثال سمة تمت محاذاة اسمها ، والتي يمكنك استخدامها للإشارة إلى محاذاة الفقرة على الصفحة. والقيمة هي ما تريد تعيين قيمة الخاصية ووضعها دائمًا ضمن عروض الأسعار. يوضح المثال أدناه ثلاث قيم محتملة لسمة المحاذاة: اليسار والوسط واليمين.

أسماء السمات وقيم السمات غير حساسة لحالة الأحرف. ومع ذلك ، يوصي اتحاد شبكة الويب العالمية (W3C) بأحرف صغيرة سمات / قيم السمات في توصيات HTML 4 الخاصة بهم.

ومثال بسيط علي ذلك :

<!DOCTYPE html>
<html>
   <head>  
      <title>Align Attribute  Example</title>    
   <head/>  
   <body>  
      <p/> هذه الفقرة بمحاذاة اليسار <"p align = "left>    
      <p/> هذه الفقرة بمحاذاة المنتصف <"p align = "center>    
   <body/>  
<html/>

سيعرض هذا النتيجة التالية :

 

هذه الفقرة بمحاذاة اليسار

هذه الفقرة بمحاذاة المنتصف

 

السمات الأساسية لـ HTML

السمات الأساسية الأربعة التي يمكن استخدامها في غالبية عناصر HTML (وإن لم تكن كلها) هي :

⚫ Id

⚫ Title

⚫ Class

⚫ Style

 

1. سمة المعرف (Id)

يمكن استخدام سمة id كعلامة HTML لتعريف أي عنصر بشكل فريد داخل صفحة HTML. هناك سببان رئيسيان وراء رغبتك في استخدام سمة id على عنصر -

ـــ   إذا كان العنصر يحمل سمة معرف كمعرف فريد ، فمن الممكن تحديد هذا العنصر ومحتواه فقط.

ـــ   إذا كان لديك عنصران لهما نفس الاسم في صفحة ويب (أو ورقة أنماط) ، فيمكنك استخدام سمة id للتمييز بين العناصر التي لها نفس الاسم.

سنناقش ورقة الأنماط في مقال منفصل. في الوقت الحالي ، دعنا نستخدم سمة id للتمييز بين عنصري فقرة كما هو موضح أدناه.

<p/> تشرح هذه الفقرة ما هي لغة ترميز النضوض التشعبية <"p id = "html> 
<p/> تشرح هذه الفقرة ما هي صفحات التنسيق النمطية <"p id = "css> 

 

2. سمة العنوان (Title)

تعطي سمة title عنوانًا مقترحًا للعنصر. يتشابه بناء الجملة لسمة العنوان كما هو موضح لسمة المعرف.

سيعتمد سلوك هذه السمة على العنصر الذي يحملها ، على الرغم من عرضها غالبًا كتلميح أداة عندما يأتي المؤشر فوق العنصر أو أثناء تحميل العنصر.

<body>
 <h3/> مثال علي علامة العنوان المعنونة <"h3 title = "Hello HTML>     
 <body/>

 

3. سمة الفئة (Class)

تُستخدم سمة الفئة لربط عنصر بصفحة أنماط ، وتحدد فئة العنصر. سوف تتعلم المزيد حول استخدام خاصية class عندما تتعلم Cascading Style Sheet (CSS). حتى الآن يمكنك تجنب ذلك.

قد تكون قيمة السمة أيضًا قائمة بأسماء الفئات مفصولة بمسافات. على سبيل المثال :

"class = "className1 className2 className3 

 

4. سمة النمط (Style)

تتيح لك سمة النمط تحديد قواعد صفحات الأنماط المتتالية (CSS) داخل العنصر.

<body>  
     <p/> ضع نصا هنا .... <";p style = "font-family:arial; color:red>    
   <body/>  

سيؤدي هذا إلى النتيجة التالية :

ضع نصا هنا ....

 

في هذا الوقت ، نحن لا نتعلم CSS ، لذا دعونا نواصل العمل . هنا ، تحتاج إلى فهم سمات HTML وكيف يمكن استخدامها أثناء تنسيق المحتوى.

 

 سمات التدويل (Internationalization) لـ HTML

هناك ثلاث سمات تدويل متاحة لمعظم (وليس كل) عناصر XHTML.وهم كالأتي :

⚫ dir

⚫ lang

⚫ xml:lang

 

1. سمة الاتجاه (direction أو dir)

تتيح لك السمة dir أن تشير للمتصفح إلى الاتجاه الذي يجب أن يتدفق فيه النص. يمكن أن تأخذ السمة dir إحدى القيمتين ، كما ترى في الجدول التالي :

 

القيمة

 

المعنى

 

ltr

 

من اليسار إلى اليمين (القيمة الافتراضية)

 

rtl

 

من اليمين إلى اليسار (للغات مثل العربية  أو العبرية التي تُقرأ من اليمين إلى اليسار)

 

 

  <!DOCTYPE html>
<"html dir = "rtl>
   <head>  
      <title/> عرض الاتجاهات <title>    
   <head/>  
      <body>  
      هذه هي الطريقة التي يعرض بها IE 5 النص الموجه من اليمين إلى اليسار.       
   <body/>  
    <html/>

سيؤدي هذا إلى النتيجة التالية:

هذه هي الطريقة التي يعرض بها IE 5 النص الموجه من اليمين إلى اليسار.

 

عند استخدام سمة dir داخل علامة <html> ، فإنها تحدد كيفية عرض النص داخل المستند بأكمله. عند استخدامه داخل علامة أخرى ، فإنه يتحكم في اتجاه النص لمحتوى تلك العلامة فقط.

 

2. سمة اللغة (language أو lang)

تتيح لك السمة lang الإشارة إلى اللغة الرئيسية المستخدمة في المستند ، ولكن تم الاحتفاظ بهذه السمة في HTML فقط للتوافق مع الإصدارات السابقة من HTML. تم استبدال هذه السمة بسمة xml: lang في مستندات XHTML الجديدة. قيم السمة lang هي أكواد اللغات القياسية المكونة من حرفين ISO-639. تحقق من أكواد لغة HTML: ISO 639 للحصول على قائمة كاملة برموز اللغة.

 <!DOCTYPE html>
<"html lang = "en>
 <head>  
      <title/>English Language Page<title>    
   <head/>  
  <body>  
      This page is using English Language     
   <body/>  
<html/>


سيؤدي هذا إلى النتيجة التالية:

This page is using English Language

 

3. سمة xml:lang

السمة xml:lang هي استبدال XHTML للسمة lang. يجب أن تكون قيمة السمة xml:lang رمز البلد ISO-639 كما هو مذكور في القسم السابق.

 

 

السمات العامة لـ HTML

فيما يلي جدول ببعض السمات الأخرى التي يمكن استخدامها بسهولة مع العديد من علامات HTML.

 

السمة

الخيارات

 

الوظيفة

 

align

right, left, center

 

محاذاة العلامات أفقيًا

 

valign

top, middle, bottom

 

يحاذي العلامات عموديًا داخل عنصر HTML

 

bgcolor

numeric, hexidecimal, RGB values

 

يضع لون الخلفية خلف العنصر

 

background

URL

 

يضع صورة خلفية خلف العنصر

 

id

حسب اختيار المستخدم

 

يسمي عنصرًا للاستخدام مع صفحات الأنماط

المتتالية

class

حسب اختيار المستخدم

 

يصنف عنصرًا للاستخدام مع صفحات الأنماط

المتتالية

width

قيمة عددية

 

يحدد عرض الجداول أو الصور أو خلايا

الجدول

height

قيمة عددية

 

يحدد ارتفاع الجداول أو الصور أو خلايا

الجدول

title

حسب اختيار المستخدم

 

عنوان العناصر "المنبثقة"

 

 

سنرى أمثلة ذات صلة حيث سنشرع في دراسة علامات HTML الأخرى. للحصول على قائمة كاملة بعلامات HTML والسمات ذات الصلة.