لقد رأينا عددًا قليلاً من علامات 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 والسمات ذات الصلة.