تتضمن لغة HTML عددًا من العناصر. تتضمن هذه العناصر مكونات موقع شائعة الاستخدام مثل الفقرات والعناوين والروابط والصور. هناك أيضًا عدد من العناصر الأحدث التي تم تقديمها باستخدام HTML5 ، بما في ذلك الرأس ، والتنقل ، والتذييل ، والمزيد. يتم استخدام كل عناصر HTML هذه لإنشاء بنية مستند وإعطائه معنى. لإضافة المزيد من المعنى إلى العناصر ، يمكنك منحهم سمات.
تبدأ علامة فتح HTML الأساسية بـ
لإضافة سمة إلى علامة HTML الخاصة بك ، عليك أولاً وضع مسافة بعد اسم العلامة (في هذه الحالة هو "p"). بعد ذلك ، يمكنك إضافة اسم السمة الذي تريد استخدامه متبوعًا بعلامة يساوي. وأخيرًا ، سيتم وضع قيمة السمة بين علامتي اقتباس. فمثلا:
العلامات يمكن أن يكون لها سمات متعددة. يمكنك فصل كل سمة عن الآخرين بمسافة.
العناصر ذات السمات المطلوبة
تتطلب بعض عناصر HTML سمات في الواقع إذا كنت تريد منهم العمل على النحو المنشود. عنصر الصورة وعنصر الرابط هما مثالان على ذلك.
يتطلب عنصر الصورة السمة "src". تخبر هذه السمة المتصفح بالصورة التي تريد استخدامها في ذلك الموقع. ستكون قيمة السمة عبارة عن مسار ملف للصورة. فمثلا:
ستلاحظ أنني أضفت سمة أخرى إلى هذا العنصر ، وهي السمة "alt" أو النص البديل. هذه ليست سمة مطلوبة من الناحية الفنية للصور ، ولكن من الأفضل تضمين هذا المحتوى دائمًا لإمكانية الوصول. النص الذي يتم سرده في قيمة سمة alt هو ما سيتم عرضه في حالة فشل تحميل الصورة لسبب ما.
عنصر آخر يتطلب سمات محددة هو علامة الربط أو الارتباط. يجب أن يتضمن هذا العنصر السمة "href" ، التي تشير إلى "مرجع النص التشعبي". هذه طريقة خيالية لقول "أين يجب أن يذهب هذا الرابط". مثلما يحتاج عنصر الصورة إلى معرفة الصورة التي سيتم تحميلها ، يجب أن تكون علامة الرابط تعرف على المكان الذي يجب أن ترغب في ذلك. في ما يلي كيفية ظهور علامة الرابط:
سيقوم هذا الارتباط الآن بإحضار شخص إلى موقع الويب المحدد في قيمة السمة. في هذه الحالة ، إنها الصفحة الرئيسية لـ.
سمات كمخططات CSS
استخدام آخر للسمات هو عندما يتم استخدامها كـ "خطاطيف" لأنماط CSS. نظرًا لأن معايير الويب تملي عليك الحفاظ على بنية صفحتك (HTML) منفصلة عن أنماطها (CSS) ، فإنك تستخدم خطافات السمة هذه في CSS لإملاء كيفية عرض الصفحة المهيكلة في متصفح الويب. على سبيل المثال ، يمكنك الحصول على هذا الترميز في مستند HTML.
إذا كنت تريد أن يكون لدى هذا القسم لون خلفية أسود (# 000) وحجم خط يبلغ 1.5 سم ، فستضيفه إلى CSS الخاص بك:
.featured {background-color: # 000؛ حجم الخط: 1.5em ؛}تعمل السمة class "مميزة" كخطاف نستخدمه في CSS لتطبيق الأنماط على هذه المنطقة. يمكننا أيضًا أن نحدد خاصية المعرف هنا إذا أردنا ذلك. كل من الطبقات والمعرفات هي سمات عالمية ، مما يعني أنه يمكن إضافتها إلى أي عنصر. ويمكن أيضًا استهدافهما بأنماط CSS محددة لتحديد المظهر المرئي لهذا العنصر.
فيما يتعلق بجافا سكريبت
وأخيرًا ، فإن استخدام السمات على عناصر HTML معينة يعد أيضًا أمرًا قد تستخدمه في جافا سكريبت. إذا كان لديك برنامج نصي يبحث عن عنصر له سمة معرف محددة ، فهذا يعني أيضًا استخدام آخر لهذه القطعة الشائعة من لغة HTML.