السلام عليكم، سنرى في هذا الدرس كيفية إقحام أهم عناصر HTML في ملف HTML كالتي تضيف تأثيرات في النصوص مثل جعل جملة نصية من نص معين أكثر أهمية عن باقي جمل النص، أو التي تكوّن إضافات يمكن إدماجها في النصوص كإخفاء فقرة نصية في نص معين جاعلين مكانها زر في حالة النقر عليه من طرف الزائر سيظهر النص المختفي، بالإضافة إلى كيفية إضافة عداد نسبي و مستوى التقدم في النصوص، و كل هذا من أجل إعطاء بنية احترافية للنصوص برمجياً بـ HTML لفهمها أكثر من طرف محركات البحث لتعطيها أهمية أكثر بحيث النصوص المحتوية لهذه العناصر تأخذ نسب عالية من السيو SEO، و بالتالي ظهور صفحاتها أو تطبيقاتها في الصفحات الأولى من نتائج الظهور.
عنصر STRONG
تعريف عنصر 'STRONG'
'STRONG' هو عنصر Inline، مأخوذ من كلمة إنجليزية Strong أي قوي، و يتم إقحامه في الفقرة النصية لإعطاء النص الذي يحتويه أهمية أكثر عن باقي نص الفقرة النصية.
إقحام عنصر 'STRONG' في ملف HTML
يقحم عنصر 'STRONG' داخل عنصر 'BODY'، و لذيه وسم فتح و وسم إغلاق و بينهما يوضع النص المراد جعله مهماً، ليظهر هذا الأخير في متصفحات الإنترنت بالكتابة السميكة التي تمثل التنسيق التلقائي لـ HTML حيث توجد إمكانية تغيير مظهره بأكواد CSS.
عنصر EM
تعريف عنصر 'EM'
'EM' هو عنصر Inline، مأخوذ من كلمة إنجليزية Emphasized Text أي كتابة بارزة أو نص بارز، و يتم إقحامه في الفقرة النصية لجعل النص الذي يحتويه بارز عن باقي نص الفقرة النصية.
إقحام عنصر 'EM' في ملف HTML
يقحم عنصر 'EM' داخل عنصر 'BODY'، و لذيه وسم فتح و وسم إغلاق و بينهما يوضع النص المراد جعله بارزاً، ليظهر هذا الأخير في متصفحات الإنترنت بالكتابة المائلة التي تمثل التنسيق التلقائي لـ HTML حيث توجد إمكانية تغيير مظهره بأكواد CSS.
عنصر MARK
تعريف عنصر 'MARK'
'MARK' هو عنصر Inline، مأخوذ من كلمة إنجليزية Mark أي علامة، و يتم إقحامه في الفقرة النصية لإعطاء النص الذي يحتويه مميزاً بعلامة عن باقي نص الفقرة النصية، و هذه العلامة عبارة عن تظليل باللون الأصفر.
إقحام عنصر 'MARK' في ملف HTML
يقحم عنصر 'MARK' داخل عنصر 'BODY'، و لذيه وسم فتح و وسم إغلاق و بينهما يوضع النص المراد جعله معلَّماً، ليظهر هذا الأخير في متصفحات الإنترنت مظلَّلاً بالأصفر حيث هذا التنسيق يمثل التنسيق التلقائي لـ HTML حيث توجد إمكانية تغيير مظهره بأكواد CSS.
الفيديو التوضيحي للدرس
عنصر KBD
تعريف عنصر 'KBD'
'KBD' هو عنصر Inline، و كلمة Kbd هي اختصار لكلمة إنجليزية Keyboard أي لوحة المفاتيح، و يتم إقحامه في الفقرة النصية عند إرادة كتابة اختصار لوحة المفاتيح في نص معين.
إقحام عنصر 'KBD' في ملف HTML
يقحم عنصر 'KBD' داخل عنصر 'BODY'، و لذيه وسم فتح و وسم إغلاق و بينهما يوضع اختصار لوحة المفاتيح، ليظهر هذا الأخير في متصفحات الإنترنت بالنوع خط مغاير عن نوع خط النص، و هو نوع خط احترافي مخصص، حيث يمثل هذا التنسيق التنسيق التلقائي لـ HTML حيث توجد إمكانية تغيير مظهره بأكواد CSS.
عنصر DETAILS
تعريف عنصر 'DETAILS'
'DETAILS' هو عنصر Block، مأخوذ من كلمة إنجليزية Details أي تفاصيل، و يتم إقحامه في الفقرة النصية ليتم إخفاء النص الذي يحتويه، و ظهور مكانه زر في حالة النقر عليه من طرف الزائر سيظهر النص المختفي.
إقحام عنصر 'DETAILS' في ملف HTML
يقحم عنصر 'DETAILS' داخل عنصر 'BODY'، و لذيه وسم فتح و وسم إغلاق و بينهما يوضع النص المراد إخفاؤه، ليظهر مكان هذا الأخير في متصفحات الإنترنت زر بإسم 'Details / Détails' -حسب لغة المتصفح- حيث إذا نقِر عليه سينسدل النص المختفي.
التعديل على إسم زر عنصر 'DETAILS'
بالإمكان تبديل إسم زر عنصر 'DETAILS'، و ذلك بإقحام عنصر Inline إسمه 'SUMMARY' داخل عنصر 'DETAILS' في ملف HTML، ثم كتابة الكلمة أو الجملة المراد استبدال بها إسم الزر بين وسمي فتح و إغلاق عنصر 'SUMMARY'.
عنصر METER
تعريف عنصر 'METER'
'METER' هو عنصر Inline، مأخوذ من كلمة إنجليزية Meter أي عدّاد، و يتم إقحامه في الفقرة النصية عند التعبير عن نسبة مئوية أو ألفية.
إقحام عنصر 'METER' في ملف HTML
يقحم عنصر 'METER' داخل عنصر 'BODY'، و لا يكتب سوى وسم فتحه حيث يمكن تجاهل وسم إغلاقه، و لديه 3 Attributs :
- 'VALUE' : تحدد قيمة النسبة.
- 'MIN' : تحدد القيمة الدنيا للعداد.
- 'MAX' : تحدد سعة العداد، أي قيمته القصوى.
عنصر PROGRESS
تعريف عنصر 'PROGRESS'
'PROGRESS' هو عنصر Inline، مأخوذ من كلمة إنجليزية Progress أي تقدم، و يتم إقحامه في الفقرة النصية عند إظهار مستوى تقدم شيء ما.
إقحام عنصر 'PROGRESS' في ملف HTML
يقحم عنصر 'PROGRESS' داخل عنصر 'BODY'، و لا يكتب سوى وسم فتحه حيث يمكن تجاهل وسم إغلاقه، و لديه 2 Attributs :
- 'VALUE' : تحدد قيمة نسبة التقدم.
- 'MAX' : تحدد السعة، أي القيمة القصوى.
الأكواد المستعملة في هذا الدرس
أتمنى أن تستفيدوا من الدرس