سمات العناصر Attributes

ما هي السمات (Attributes)؟

تحدد السمات (Attributes) خصائص إضافية مثل عرض الصورة وارتفاعها. توضع السمات دائمًا في وسم البدء (أو وسم الفتح) < > وعادة ما تكون على شكل أزواج اسم و قيمة وتكتب بالشكل التالي : name = "value". يجب دائمًا إحاطة قيم السمات بعلامات اقتباس.
أيضا ، بعض السمات َضرورية لعمل عناصر معينة. على سبيل المثال ، يجب أن يحتوي الوسم<img> على سمات src و alt
دعنا نلقي نظرة على بعض الأمثلة على استخدامات السمات:

مثال
تشغيل
  1. <img src="images/smiley.png" alt="Smiley" width="100" height="100">
  2. <a href="https://www.google.com/" title="Search Engine">Google</a>
  3. <abbr title="Hyper Text Markup Language">HTML</abbr>
  4. <input type="text" name="username">

في المثال أعلاه src داخل الوسم <img> هو سمة (Attributes)ومسار الصورة المقدمة هو قيمة السمة (value).
ايضا href داخل الوسم <a> هي سمة (Attributes) والرابط المقدم هو قيمته (value)، وهكذا.

نصيحة:

يمكن استخدام كل من علامات الاقتباس الفردية ' ' والزوجية " " في قيم السمات (Attribute values) . ومع ذلك ، علامات الاقتباس الزوجية هي الأكثر شيوعًا. في الحالات التي تحتوي فيها قيمة السمة نفسها على علامات اقتباس زوجية ، يجب استخدام علامات اقتباس فردية ، على سبيل المثال : value = 'John "Williams" Jr.'

هناك العديد من السمات في HTML5 لا تتألف من أزواج (اسم وقيمة) ولكن تتكون من الاسم فقط. وتسمى هذه السمات سمات منطقية (Boolean attributes).
أمثلة على على بعض السمات المنطقية الشائعة والأكثر استخداما : checked , disabled , readonly, required , وغير ذلك الكثير

مثال
تشغيل
  1. <input type="email" required>
  2. <input type="submit" value="Submit" disabled>
  3. <input type="checkbox" checked>
  4. <input type="text" value="Read only text" readonly>

سوف تتعلم كل هذه العناصر بالتفصيل لاحقا ان شاء الله.

ملاحظة:

تكون قيم السمات (Attribute values) غير حساسة لحالة الأحرف (case-insensitive) ، باستثناء قيم سمات معينة ، مثل id و class .
ومع ذلك ، توصي World Wide Web Consortium (W3C) بالأحرف الصغيرة لقيم السمات (Attribute values) في مواصفاتها.

السمات العامة General Attributes

هناك بعض السمات ، مثل id, title, class, style وما إلى ذلك . يمكنك استخدامها على غالبية عناصر HTML.
دعونا نتعرف على هذه السمات سوياً.

id

يتم استخدام سمة id لإعطاء اسم أو معرف فريد لعنصر في صفحة الويب. هذا يجعل من السهل تحديد العنصر باستخدام CSS أو JavaScript.
وسوف نتعلم ذلك بالتفصيل لاحقا ان شاء الله.

مثال
تشغيل
  1. <input type="text" id="firstName">
  2. <div id="container">Some content</div>
  3. <p id="infoText">This is a paragraph.</p>
ملاحظة:

يجب أن يكون ال id للعنصر فريدًا داخل صفحة الويب الواحدة. لا يمكن اعطاء عنصرين في نفس صفحة الويب نفس ال id ، ويمكن أن يكون لكل عنصر id واحد فقط.

class

مثل سمة id ، يتم استخدام سمة class أيضًا لتحديد العناصر. ولكن على عكس ال id، لا يجب أن تكون السمة class فريدة في صفحة الويب. هذا يعني أنه يمكنك تطبيق نفس class على عناصر متعددة في صفحة الويب ، كما هو موضح في المثال التالي:

مثال
تشغيل
  1. <input type="text" class="highlight">
  2. <div class="box highlight">Some content</div>
  3. <p class="highlight">This is a paragraph.</p>
نصيحة:

نظرًا لأنه يمكن تطبيق class على عناصر متعددة ، فسيتم تطبيق أي style مكتوبة على هذه ال classعلى جميع العناصر التي تحتوي على هذه ال class وسيتم توضيح ذلك في درس الانماط styles

title

يتم استخدام السمة title لتوفير نص توضيحي حول عنصر أو محتواه. لفهم كيفية عمل هذه السمة دعونا نجرب المثال التالي.

مثال
تشغيل
  1. <abbr title="World Wide Web Consortium">W3C</abbr>
  2. <a href="images/kites.jpg" target="_blank" title="Click to view a larger image">
  3. <img src="images/kites-thumb.jpg" alt="kites">
  4. </a>
نصيحة:

يتم عرض قيمة السمة title على أنها أداة للتلميح بواسطة متصفحات الويب عندما يضع المستخدم مؤشر الماوس فوق العنصر.

style

تتيح لك السمة style تحديد قواعد تصميم CSS مثل اللون والخط والحدود وما إلى ذلك مباشرةً داخل العنصر. لفهم كيفية عمل هذه السمة دعونا نجرب المثال التالي :

مثال
تشغيل
  1. <p style="color: blue;">This is a paragraph.</p>
  2. <img src="images/sky.jpg" style="width: 300px;" alt="Cloudy Sky">
  3. <div style="border: 1px solid red;">Some content</div>
ملاحظة:

سيتم شرح السمة Style بشكل مفصل لاحقا إن شاء الله .

« التالي السابق »