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



3 نوفمبر، 2021 | تيتو 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>    
          <p/> هذه الفقرة بمحاذاة اليمين <"p align = "right>    
       <body/>  
    	<html/>

     

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

     

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

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

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

     

     

    enlightened  السمات الأساسية

     

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

     

    1  -  Id

    2  -  Title

    3  -  Class

    4  -  Style

     

    yes  سمة المعرف (Id)

     

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

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

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

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

     

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

     

    yes  سمة العنوان (title)

     

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

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

     

    <!DOCTYPE html>
    <html>
      <head>  
          <title/> مثال علي سمة العنوان <title>    
       <head/>  
         <body>  
          <h3/> مثال علي علامة العنوان المعنونة <"h3 title = "Hello HTML>    
       <body/>  
        <html/>
    

     

    yes  سمة الفئة (class)

     

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

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

     

    "class = "className1 className2 className3

     

    yes  سمة النمط (style)

     

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

     

    <!DOCTYPE html>
    <html>
     <head>  
          <title>The style Attribute</title>    
       <head/>  
    	  <body>  
         <p/> ضع نصا هنا .... <";p style = "font-family:arial; color:red>    
       <body/>  
    	<html/>

     

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

     

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

     

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

     

     

    enlightened  سمات التدويل (Internationalization)

     

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

    ـــ   dir

    ـــ   lang

    ـــ   xml:lang

     

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

     

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

     

    القيمة

     

    المعنى

     

    ltr

     

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

     

    rtl

     

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

     

     

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

     

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

     

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

     

     

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

     

    yes  سمة اللغة (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
    

     

     

    yes  سمة xml:lang

     

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

     

     

    enlightened  السمات العامة

     

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

     

    السمة

    الخيارات

     

    الوظيفة

     

    align

    right, left, center

     

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

     

    valign

    top, middle, bottom

     

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

     

    bgcolor

    numeric, hexidecimal, RGB values

     

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

     

    background

    URL

     

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

     

    id

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

     

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

    المتتالية

    class

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

     

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

    المتتالية

    width

    قيمة عددية

     

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

    الجدول

    height

    قيمة عددية

     

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

    الجدول

    title

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

     

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

     

     

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