سمات/الصفات 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
ليست هناك تعليقات:
إرسال تعليق
يسعدني إرسال تعليقاتكم وأسئلتكم واقتراحاتكم