الاثنين، 11 مايو 2015

سمات/الصفات HTML Attributes

سمات/الصفات HTML Attributes

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

تستخدم السمات لتحديد مواصفات عنصر HTML ويتم وضعها داخل تاج  فتح العنصر كلها هذه السمات تتكون من اسم Name  و قيمة Value .

 : Nameالاسم هو الخاصية التي نريد تعينها. على سبيل المثال الفقرة <p> عنصر في المثال يحمل سمة اسمه محاذاة 
align، والتي يمكنك استخدامها للإشارة إلى محاذاة الفقرة في الصفحة.

 : Valueالقيمة هي الخاصية التي تريد وضعها والتي دائما يتم وضعها بين العلامتين "" quotations يوضح المثال التالي ثلاث قيم ممكنة من السمة محاذاة align: اليسار والوسط واليمين left, center and right.

السمة Name وقيمة السمات Value حساسة لحالة الأحرف. ومع ذلك، فإن اتحاد شبكة ويب العالمية (W3C) يوصي بسمات بحروف صغيرة lowercase .

<!DOCTYPE html>
<html>
<head>
    <title>Align Attribute  Example</title>
</head>
<body>
    <p align="left">This is left aligned</p>
    <p align="center">This is center aligned</p>
    <p align="right">This is right aligned</p>
</body>
</html>

النتيجة


 


الصفات الأساسية Core Attributes

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

id
title
class
style

السمة id Attribute

يمكن استخدام خاصية id لتاج HTML لجعل عنصر داخل صفحة HTML فريد  uniquely. هناك نوعان من الأسباب الرئيسية التي قد ترغب في استخدام سمة معرف على عنصر:

هناك نوعان من الأسباب الرئيسية التي قد ترغب في استخدام سمة id على عنصر element :

الأول: إذا كان العنصر يحمل سمة id كمعرف فريد unique من الممكن تحديد العنصر ومضمونه من خلال هذا الـ id.

ثانيا: إذا كان لديك اثنين من العناصر elements التي تحمل الاسم نفسه داخل صفحة الويب (أو style sheet)، يمكنك استخدام خاصية id للتمييز بين العناصر التي لها نفس الاسم.

سوف نتكلم  عن style sheet في البرنامج التعليمي منفصل. والآن دعونا نستخدام خاصية الـ id للتمييز بين عنصرين الفقرة paragraph.

<p id="html">This paragraph HTML</p>

<p id="css">This paragraph Cascading Style Sheet</p>

السمة title Attribute

سمة العنوان title يعطي عنوان للعنصر.
فإن سلوك هذه السمة تعتمد على العنصر الذي يحمل عليه على الرغم كثيرا ما يتم عرضه كتلميح عندما يأتي المؤشر فوق العنصر أو أثناء وجود عنصر يتم تحميل tooltip.

مثال

<!DOCTYPE html>
<html>
<head>
    <title>The title Attribute Example</title>
</head>
<body>
    <h3 title="Hello HTML">Titled Heading Tag Example</h3>
</body>
</html>

النتيجة


الآن حاول جعل مؤشر الموس فوق " Titled Heading Tag Example" وسترى العنوان الذي استخدمته في الكود ظهر كتلميح.


الفئة class Attribute

يتم استخدام سمة فئة  classلربط عنصر مع ورقة أنماط style sheet. وذلك بتحديد اسم الكلاس للعنصر الذي تريد.
سوف نتعلم المزيد عن استخدام سمة الكلاس عند تعلم (CSS). حتى الآن يمكنك تجنب ذلك.
قد تكون قيمة السمة أيضا قائمة مفصولة بمسافات من أسماء الكلاس class. على سبيل المثال:

<div class="className1 className2 className3"></div>

 

الشكل style Attribute


الـ Style يسمح بتحديد Cascading نمط أو شكل (CSS) داخل عنصر.

مثال

<!DOCTYPE html>
<html>
<head>
    <title>The style Attribute</title>
</head>
<body>
    <p style="font-family:arial; color:#FF0000;">Blog...http://naderkhaled.blogspot.com/</p>
</body>
</html>

النتيجة

في هذه المرحلة نحن لا نتعلم CSS هنا فقط نحتاج إلى فهم ما هي سمات HTML وكيف يمكن استخدامها في تنسيق المحتوى.


عامة Internationalization Attributes

هناك ثلاث سمات عامة، وهي متاحة لمعظم العناصر XHTML (وإن لم يكن كلها).
dir
lang
xml:lang

dir Attribute

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


القيمة Value
المعنى Meaning
ltr
Left to right وتعني من اليسار إلى اليمين وهي القيمة الأفتراضية
rtl
Right to left وتعنى من اليمين إلى اليسار للغات مثل العربية طبعا

مثال

<!DOCTYPE html>
<html dir="rtl">
<head>
    <title>Display Directions</title>
</head>
<body>
    This is how browser renders right-to-left directed text.
    <p dir="ltr">Hello</p>
    <p dir="ltr">الحمد لله رب العالمين</p>
</body>
</html>

النتيجة

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

 

اللغة lang Attribute

السمةlang  تسمح لك للإشارة إلى اللغة الرئيسية المستخدمة في وثيقة.
تم استبدال هذه السمة من خاصية xml:lang في وثائق XHTML جديدة.
قيم السمة lang هي ISO-639 رموز الغة القياسية و الــ ISO هي تسمية موحدة تستخدم لتصنيف جميع اللغات standardized nomenclature used to classify all known languages.
 HTML Language Codes: ISO 639

مثال

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

 

xml:lang Attribute

وخاصية xml:lang هو استبدال XHTML للسمة  langوينبغي أن تكون سمةlang  لرمز البلدISO-639 country code كما ورد في الفقرة السابق )اللغة (lang Attribute.


الصفات العامة Generic Attributes

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

الصفة
Attribute
اختيارات
Options
الوظيفة
Function
align
right, left, center
تاج محاذاة أفقيا
valign
top, middle, bottom
تاج محاذاة عموديا/رأسي من ضمن عناصر HTML
bgcolor
numeric, hexadecimal, RGB values
لوضع لون خلفية للعنصر المحدد
background
URL
لوضع صورة كخلفية وراء العنصر
id
User Definedيعرف بواسطة المستخدم
اسم مُعرف للعنصر
class
User Definedيعرف بواسطة المستخدم
لتحديد عنصر كلاس CSS
width
Numeric Value قيمة رقمية
يحدد عرض الجداول والصور، أو خلايا الجدول.
height
Numeric Value قيمة رقمية
يحدد ارتفاع الجداول والصور، أو خلايا الجدول.
title
User Definedيعرف بواسطة المستخدم
انبثاق عنوان العنصر Pop-up


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



ليست هناك تعليقات:

إرسال تعليق

يسعدني إرسال تعليقاتكم وأسئلتكم واقتراحاتكم