سمة HTML
سمات لغة ترميز النص التشعبي هي كلمات خاصة تُستخدم لتعديل سلوك أو عرض عنصر HTML . تُعدّل السمة إما الوظائف الافتراضية لنوع عنصر معين، أو تُضيف وظائف لأنواع عناصر معينة لا تعمل بشكل صحيح بدونها. في بنية HTML ، تُضاف السمة إلى وسم البداية (<head>) .
تم التعرف على العديد من أنواع السمات الأساسية، بما في ذلك: (1) السمات المطلوبة التي يحتاجها نوع عنصر معين لكي يعمل هذا النوع من العناصر بشكل صحيح؛ (2) السمات الاختيارية المستخدمة لتعديل الوظائف الافتراضية لنوع عنصر ما؛ (3) السمات القياسية التي تدعمها العديد من أنواع العناصر؛ و(4) سمات الأحداث المستخدمة لجعل أنواع العناصر تحدد البرامج النصية التي سيتم تشغيلها في ظل ظروف معينة.
يُعد Doctype HTML بمثابة إعلان يُخبر المتصفح بإصدار HTML الذي كُتب به المستند.
تختلف وظائف بعض أنواع السمات عند استخدامها لتعديل أنواع العناصر المختلفة. على سبيل المثال، تُستخدم السمة " الاسم" بواسطة عدة أنواع من العناصر، ولكن لها وظائف مختلفة قليلاً في كل نوع. [ 1 ]
وصف
تظهر سمات HTML عمومًا على شكل أزواج اسم-قيمة ، مفصولة بفاصلة =، وتُكتب داخل علامة البداية للعنصر، بعد اسم العنصر:
<element attribute= "value" > محتوى العنصر </element>حيث elementيُحدد نوع عنصر HTML، و attributeهو اسم السمة، ويُعيّن إلى القيمة المُقدمة value. يمكن وضع القيمة بين علامتي اقتباس مفردة أو مزدوجة، مع العلم أنه يُمكن ترك القيم التي تتكون من أحرف معينة بدون علامات اقتباس في HTML (ولكن ليس في XHTML ). [ 2 ] [ 3 ] يُعتبر ترك قيم السمات بدون علامات اقتباس غير آمن. [ 4 ]
على الرغم من أن معظم السمات يتم توفيرها كأسماء وقيم مزدوجة، إلا أن بعضها يؤثر على العنصر بمجرد وجودها في علامة البداية للعنصر [ 5 ] (مثل ismapالسمة الخاصة بالعنصر img[ 6 ] ) .
يمكن استخدام عنصر الاختصار، abbr، لتوضيح هذه السمات المختلفة:
< abbr id = "anId" class = "aClass" style = "color:blue;" title = "لغة ترميز النص التشعبي" > HTML </ abbr >يظهر هذا المثال كـ HTML باللون الأزرق دون أن يكون رابطًا، وفي معظم المتصفحات، يجب أن يؤدي توجيه المؤشر إلى الاختصار إلى عرض نص العنوان " لغة ترميز النص التشعبي " داخل خلفية صفراء عائمة ( تلميح ).
< div style = "text-align: center;" > نص مُوَسَّط </ div >في هذا المثال الآخر، سيبدو النص الخاص بك على النحو التالي:
تأخذ معظم العناصر أيضًا السمات المتعلقة باللغة langو dir.
السمات المشتركة
عادةً، يمكن لعناصر HTML أن تأخذ أيًا من السمات القياسية الأكثر شيوعًا ( انظر القائمة الكاملة ):
- تُوفّر هذه
idالخاصية مُعرّفًا فريدًا على مستوى المستند لعنصرٍ ما. [ 7 ] [ 8 ] [ 9 ] يُمكن استخدام هذا المُعرّف كمُحدِّد CSS لتوفير خصائص العرض، أو من قِبل المُتصفحات لتوجيه الانتباه إلى عنصرٍ مُحدد، أو من قِبل البرامج النصية لتغيير محتوى العنصر أو طريقة عرضه. يُضاف هذا المُعرّف إلى عنوان URL للصفحة، ويستهدف عنوان URL مباشرةً العنصر المُحدد داخل المستند، وعادةً ما يكون قسمًا فرعيًا من الصفحة. على سبيل المثال، يُمكن استخدام المُعرّف "Attributes" فيhttp://en.wikipedia.org/wiki/HTML#Attributes(للإشارة إلى قسم "Attributes" في صفحة "HTML"). - تُتيح هذه
classالخاصية تصنيف العناصر المتشابهة. يُمكن إضافة أسماء فئات متعددة بفصلها بمسافات. [ 10 ] [ 11 ] دلاليًا، تُستخدم الفئات في التنسيقات المصغرة ، على سبيل المثال . بالإضافة إلى ذلك، يُمكن لمُصممي أوراق الأنماط إنشاء مُحدِّدات تُطابق العناصر حسب الفئة لأغراض التنسيق. على سبيل المثال، قد يستخدم مستند HTML هذه الخاصيةclass="notation"للإشارة إلى أن جميع العناصر التي تحمل قيمة هذه الفئة تابعة للنص الرئيسي للمستند. يُمكن تجميع هذه العناصر معًا كحواشي سفلية في الصفحة، بدلًا من ظهورها في المكان المُقترح بناءً على موقعها في مصدر HTML. كما يُمكن لمُصمم ورقة الأنماط تعريف قاعدة باستخدام المُحدِّد.notationوتحديد الخاصيةfont-size: small;. - تُتيح هذه
styleالخاصية تطبيق قواعد تنسيق خاصة بكل عنصر. يُمكن إضافة عدة تعريفات للتنسيق بفصلها بفواصل منقوطة ومسافة اختيارية، حيث يتضمن كل تعريف اسم خاصية CSS وقيمتها مفصولة بنقطتين رأسيتين ومسافة اختيارية (مثال:style="color: red; text-align: center;"). [ 12 ] [ 13 ] [ 14 ] يُمكن استخدام هذهstyleالخاصية مع أي عنصر HTML (ستكون صالحة لأي عنصر HTML؛ ومع ذلك، فهي ليست بالضرورة مفيدة). يُعتبر من الممارسات الأفضل إضافة معلومات التنسيق إلى ورقة أنماط ، ويتم ذلك غالبًا باستخدام مُحدِّدات تُطابق فئة العنصر أو مُعرِّفه. مع ذلك، في بعض الأحيان، يُفضَّل استخدام التنسيقات المضمنة عندما تُعتبر أوراق الأنماط مُرهِقة للغاية بالنسبة لمواصفات تنسيق بسيطة ومُحدَّدة أو مُخصَّصة. - تُستخدم هذه
titleالخاصية لإضافة شرح ضمني لعنصر ما. في معظم المتصفحات، تُعرض هذه الخاصية على شكل ما يُعرف عادةً باسم تلميح الأدوات .
أنواع
تُصنف سمات HTML عمومًا إلى سمات مطلوبة ، وسمات اختيارية ، وسمات قياسية ، وسمات خاصة بالأحداث :
- عادةً ما تقوم السمات المطلوبة والاختيارية بتعديل عناصر HTML محددة
- بينما يمكن تطبيق السمات القياسية على معظم عناصر HTML. [ 15 ]
- تسمح سمات الأحداث، التي أضيفت في الإصدار الرابع من لغة HTML، للعنصر بتحديد البرامج النصية التي سيتم تشغيلها في ظروف معينة. [ 16 ]
مطلوب واختياري
يستخدم بواسطة عنصرين
- <a> و <area> :
- <a> و <link> :
- hreflang — رمز لغة المستند المرتبط. ( <a> , <link> )
- rel — طبيعة المستند المرتبط (بالنسبة للصفحة المعروضة حاليًا). نص حر لـ <a> ، لكن <link> يستخدم مجموعة من المصطلحات (بديل، ملحق، إشارة مرجعية، فصل، محتويات، حقوق النشر، مسرد المصطلحات، مساعدة، الصفحة الرئيسية، فهرس، التالي، السابق، قسم، بداية، ورقة الأنماط، قسم فرعي).
- rev — طبيعة الصفحة المعروضة حاليًا (بالنسبة للمستند المرتبط). يختلف ذلك بالنسبة لـ <a> و <link> كما هو الحال بالنسبة لـ rel.
- <applet> و <object> :
- <basefont> و <font> :
- اللون — لون النص (مهمل) ( <basefont> , <font> )
- نوع الخط (مهمل) ( <basefont> , <font> )
- <col> و <colgroup> :
- الامتداد — عدد الأعمدة الممتدة ( <col> , <colgroup> )
- <del> و <ins> :
- <form> و <input> :
- <frame> و <iframe> :
- frameborder — تحدد القيمة (0 أو 1) ما إذا كان سيتم عرض حد حول <frame> أو <iframe> .
- marginheight — الهوامش العلوية والسفلية بالبكسل حول <frame> أو <iframe> .
- التمرير — تحدد القيمة (نعم، لا، تلقائي) ما إذا كان سيتم عرض أشرطة التمرير حول <الإطار> أو <الإطار المضمن> .
- marginwidth — الهوامش اليسرى واليمنى بالبكسل حول <frame> أو <iframe> .
- <frameset> و <textarea> :
- cols — عدد الأعمدة المرئية في <frameset> أو <textarea> (بعض الاختلافات)
- الصفوف — عدد الصفوف المرئية في <frameset> أو <textarea> (بعض الاختلافات)
- <img> و <object> :
- <input> و <textarea> :
- readonly — يحدد نصًا للقراءة فقط لـ <input> و <textarea> .
- <link> و <style> :
- <optgroup> و <option> :
- label — نص وصف لـ <optgroup> أو <option> .
- <td> و <th> :
- abbr — نسخة مختصرة من خلية جدول أو رأس .
- المحور — اسم الفئة لخلية الجدول أو رأس الجدول .
- colspan — عدد الأعمدة التي تمتد عليها خلية الجدول أو رأس الجدول .
- nowrap — (مهجور) يمنع التفاف خلية الجدول أو رأس الجدول .
- rowspan — عدد الصفوف التي تمتد عليها خلية الجدول أو رأس الجدول .
- النطاق — لا يؤثر على عرض المتصفح العادي، ولكنه يُحدد خلية أو رأس جدول كرأس منطقي للخلايا الأخرى. القيم: col، colgroup، row، rowgroup.
يستخدم بواسطة عناصر متعددة
- alt — <applet> , <area> , <img> , <input>
- bgcolor — <body> , <table> , <td> , <th> , <bgcolor>
- الحدود — <صورة> ، <كائن> ، <جدول>
- char — <char> , <colgroup> , <tbody> , <td> , <tfoot> , <th> , <thead> , <tr>
- charoff — <col> , <colgroup> , <tbody> , <td> , <tfoot> , <th> , <thead> , <tr>
- مجموعة الأحرف — <a> ، <link> ، <script>
- استشهد بـ : <blockquote> ، <del> ، <ins> ، <q>
- مضغوط — <dir> ، <menu> ، <ol> ، <ul>
- معطل — <زر> ، <حقل إدخال> ، <مجموعة خيارات> ، <خيار> ، <قائمة منسدلة> ، <مربع نص>
- الارتفاع — <applet> ، <iframe> ، <img> ، <object> . تم إهماله أيضًا في <td> ، <th>
- href — <a> , <area> , <base> , <link>
- hspace — <applet> , <object> . تم إيقاف استخدامها أيضًا في <img>
- longdesc — <frame> , <iframe> , <img>
- الاسم — <a> ، <applet> ، <button> ، <form> ، <frame> ، <iframe> ، <input> ، <map> ، <meta> ، <object> ، <param> ، <select> ، <textarea>
- الحجم — <basefont> ، <font> ، <hr> ، <input> ، <select>
- src — <frame> , <iframe> , <img> , <input> , <script>
- الهدف — <a> ، <area> ، <base> ، <form> ، <link>
- النوع — <زر> ، <حقل إدخال> ، <قائمة> ، <رابط> ، <كائن> ، <قائمة> ، <معامل> ، <نص برمجي> ، <نمط> ، <قائمة غير مرتبة>
- valign — <col> , <colgroup> , <tbody> , <td> , <tfoot> , <th> , <thead> , <tr>
- القيمة — <زر> ، <حقل إدخال> ، <قائمة> ، <خيار> ، <معامل>
- vspace — <applet> , <img> , <object>
- العرض — <applet> ، <col> ، <colgroup> ، <hr> ، <iframe> ، <img> ، <object> ، <pre> ، <table> ، <td> ، <th>
السمات القياسية
تُعرف السمات القياسية أيضًا بالسمات العامة ، وتعمل مع عدد كبير من العناصر. [ 17 ] تشمل هذه السمات الأساسية: accesskey، وclass، وcontenteditable، وcontextmenu، وdata، وdir، وhidden، وid، وlang، وstyle، وtabindex، وtitle . كما توجد بعض السمات التجريبية. وقد تم إيقاف استخدام كل من xml:lang و xml:base . تُحسّن سمات aria-* المتعددة إمكانية الوصول. [ 17 ] سيتم سرد سمات معالج الأحداث لاحقًا .
من الناحية الفنية، يجب أن تقبل جميع العناصر جميع السمات القياسية، مع أنها لن تعمل مع بعض العناصر. [ 18 ] يسرد الجدول أدناه بعض السمات القياسية الشائعة، وبعض العناصر التي يمكن أن تعمل معها.
سمات الحدث
تتضمن السمات القياسية سمات معالج الأحداث . جميعها مسبوقة بـ on-: [ 17 ]
- إجهاض
- إكمال تلقائي
- خطأ في الإكمال التلقائي
- ضبابية
- إلغاء
- أونكانبلاي
- oncanplaythrough
- التغيير
- انقر
- إغلاق
- قائمة السياق
- تغيير العرض
- انقر نقرًا مزدوجًا
- أوندراغ
- أوندراغند
- ondragenter
- ondragexit
- أوندراغليف
- ondragover
- بدء تشغيل السحب
- أوندروب
- تغيير المدة
- غير مُفرغ
- غاضب
- على الخطأ
- التركيز
- إدخال
- غير صالح
- أونكي داون
- ضغطة مفتاح
- onkeyup
- تحميل
- البيانات المحملة
- البيانات الوصفية المحملة
- بدء التحميل
- عند الضغط على زر الماوس
- عند إدخال مؤشر الماوس
- onmouseleave
- عند تحريك الماوس
- onmouseout
- عند تمرير مؤشر الماوس
- onmouseup
- عجلة الماوس
- إيقاف مؤقت
- تشغيل
- تشغيل
- جارٍ العمل
- تغيير السعر
- إعادة الضبط
- تغيير الحجم
- التمرير
- مطلوب
- باحث
- onselect
- معروض
- أونسورت
- تم التثبيت
- onsubmit
- تعليق
- تحديث في الوقت المحدد
- تشغيل/إيقاف
- تغيير مستوى الصوت
- في انتظار
تتيح سمات الأحداث، التي أُضيفت في الإصدار الرابع من لغة HTML، للعنصر تحديد البرامج النصية التي سيتم تشغيلها في ظروف معينة. يسرد الجدول أدناه بعض سمات معالجات الأحداث الشائعة، وبعض العناصر التي يمكن استخدامها معها.
| عنصر | تحميل | عند التفريغ | إجهاض | انقر | انقر نقرًا مزدوجًا | عند الضغط على زر الماوس | عند تحريك الماوس | onmouseout | عند تمرير مؤشر الماوس | onmouseup | أونكي داون | ضغطة مفتاح | onkeyup | ضبابية | التركيز | التغيير | onselect |
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| <frameset> | |||||||||||||||||
| <body> | |||||||||||||||||
| <abbr> | |||||||||||||||||
| <اختصار> | |||||||||||||||||
| <العنوان> | |||||||||||||||||
| <b> | |||||||||||||||||
| <كبير> | |||||||||||||||||
| <blockquote> | |||||||||||||||||
| <caption> | |||||||||||||||||
| <center> | |||||||||||||||||
| <cite> | |||||||||||||||||
| <code> | |||||||||||||||||
| <col> | |||||||||||||||||
| <colgroup> | |||||||||||||||||
| <dd> | |||||||||||||||||
| <del> | |||||||||||||||||
| <dfn> | |||||||||||||||||
| <dir> | |||||||||||||||||
| <div> | |||||||||||||||||
| <dl> | |||||||||||||||||
| <dt> | |||||||||||||||||
| <em> | |||||||||||||||||
| <fieldset> | |||||||||||||||||
| <h1> ، <h2> ، <h3> ، <h4> ، <h5> ، <h6> | |||||||||||||||||
| <hr> | |||||||||||||||||
| <i> | |||||||||||||||||
| <ins> | |||||||||||||||||
| <kbd> | |||||||||||||||||
| <أسطورة> | |||||||||||||||||
| <li> | |||||||||||||||||
| <link> | |||||||||||||||||
| <map> | |||||||||||||||||
| <القائمة> | |||||||||||||||||
| <بدون إطارات> | |||||||||||||||||
| <noscript> | |||||||||||||||||
| <object> | |||||||||||||||||
| <ol> | |||||||||||||||||
| <optgroup> | |||||||||||||||||
| <خيار> | |||||||||||||||||
| <p> | |||||||||||||||||
| <pre> | |||||||||||||||||
| <q> | |||||||||||||||||
| <s> | |||||||||||||||||
| <samp> | |||||||||||||||||
| <small> | |||||||||||||||||
| <span> | |||||||||||||||||
| <مُشطوب> | |||||||||||||||||
| <strong> | |||||||||||||||||
| <sub> | |||||||||||||||||
| <sup> | |||||||||||||||||
| <جدول> | |||||||||||||||||
| <tbody> | |||||||||||||||||
| <td> | |||||||||||||||||
| <tfoot> | |||||||||||||||||
| <th> | |||||||||||||||||
| <thead> | |||||||||||||||||
| <tr> | |||||||||||||||||
| <tt> | |||||||||||||||||
| <u> | |||||||||||||||||
| <ul> | |||||||||||||||||
| <var> | |||||||||||||||||
| <img> | |||||||||||||||||
| <a> | |||||||||||||||||
| <المنطقة> | |||||||||||||||||
| <زر> | |||||||||||||||||
| <form> | |||||||||||||||||
| <label> | |||||||||||||||||
| <اختر> | |||||||||||||||||
| <إدخال> | |||||||||||||||||
| <textarea> |
انظر أيضاً
مراجع
- ↑ "فهرس سمات HTML 4" . W3C . تم الاطلاع عليه بتاريخ 13 فبراير 2015 .
- ↑ "حول SGML و HTML" . اتحاد شبكة الويب العالمية . تم الاطلاع عليه في 16 نوفمبر 2008 .
- ↑ "XHTML 1.0 – الاختلافات مع HTML 4" . اتحاد شبكة الويب العالمية . تم الاطلاع عليه بتاريخ 16 نوفمبر 2008 .
- ↑ كوربيلا، يوكا (6 يوليو 1998). "لماذا يجب دائمًا وضع قيم السمات بين علامتي اقتباس في لغة HTML" . Cs.tut.fi. تم الاطلاع عليه في 16 نوفمبر 2008 .
- ↑ "الكائنات والصور والتطبيقات المصغرة في مستندات HTML" . اتحاد شبكة الويب العالمية. 24 ديسمبر 1999. تم الاطلاع عليه في 16 نوفمبر 2008 .
- ↑ ومع ذلك، قد تنطبق معرفات متعددة على نفس العنصر؛ على وجه الخصوص، قد يكون العنصر داخل عنصر آخر، ولكل منهما معرف خاص به.
- ↑ "معرف HTML" . W3Schools . مؤرشف من الأصل في 27 أبريل 2020. تم الاسترجاع في 27-04-2020 .
- ↑ "سمة المعرّف العامة في HTML" . W3Schools . تم الاطلاع عليه بتاريخ 27-04-2020 .
- ↑ "فئات HTML" . W3Schools . تم الاسترجاع في 27-04-2020 .
- ↑ "سمة الفئة العامة في HTML" . W3Schools . تم الاطلاع عليه بتاريخ 27-04-2020 .
- ↑ "أنماط HTML" . W3Schools . تم الاسترجاع في 12-05-2023 .
- ↑ "سمة نمط HTML العامة" . W3Schools . تم الاسترجاع في 12-05-2023 .
- ↑ "بنية CSS" . W3Schools . تم الاطلاع عليه بتاريخ 12-05-2023 .
- ↑ "السمات العامة لـ HTML" . W3Schools.
- ↑ "سمات أحداث HTML" . W3Schools.
- 1 2 3 "السمات العامة - لغة ترميز النص التشعبي (HTML)" . وثائق MDN على الويب . تم الاطلاع عليه بتاريخ 12 فبراير 2015 .
- ↑ "مرجع HTML - لغة ترميز النص التشعبي (HTML)" . وثائق MDN على الويب . تم الاطلاع عليه بتاريخ 13 فبراير 2015 .
- HTML
