تقديم
كتب هذا المقال أشرف عبدالدايم مطور واجهة المستخدم في TieLabs سابقاً، 95% من كود CSS الموجود في قالب جنة من كتابة أشرف :)
يمكنك إنشاء أجزاء مربعات النصوص بإستخدام الفقرات النصية <p> والقوائم <ul> و <ol> و <dl> لكن ماذا لو أردنا تميير بعض الكلمات الموجودة ضمن هذه النصوص وإعطائها مدلول آخر أو أهمية أكثر مما حولها من الكلمات؟
لذلك تحتاج إلى عناصر أخرى، وهذا ما توفره HTML
الكلمات الهامة Strong
لتمييز الكلمات الهامة، استخدم الوسم <strong>
| 1 2 3 4 5 | <p> The Internet is a giant <strong>network</strong> of computers. </p> |
الوسم <strong> يجعل الكلمات التي بداخله تظهر بخط سميك (bold)، لكن تذكر أن هذا هو الوضع الإفتراضي لمتصفح الويب، لا تستخدم الوسم <strong> فقط لجعل بعض الكلمات تظهر بالخط السميك، بل للدلالة على أن هذة الكلمات ذو إهتمام أكثر.
الكلمات المشددة Emphasis
لتمييز الكلمات المؤكدة/المشددة، استخدم الوسم <em>
| 1 2 3 4 5 | <p> Don’t use it <em>only</em> to put some text in italic, but rather to give it <em>stress emphasis</em>. </p> |
أيضاً الوسم <em> يجعل الكلمات التي بداخله تظهر بخط مائل (italic)، لكن تذكر أن هذا هو الوضع الإفتراضي لمتصفح الويب، لا تستخدم الوسم <em> فقط لجعل بعض الكلمات تظهر بالخط المائل، بل للدلالة على أن هذة الكلمات كلمات مؤكدة.
الإختصارات Abbreviations
تستخدم لتمييز اختصارات المصطلحات الكبيرة، مثل WWW و IEEE و W3C
| 1 2 3 4 5 | <p> <abbr>W3C</abbr> is an international community that work together to develop Web standards. </p> |
أيضاً يمكنك وضع وصف الإختصار كقيمة للخاصية title يظهر عندما تقوم بتمرير مؤشر الفأرة على الإختصار. كالتالي:
| 1 2 3 4 5 | <p> <abbr title="The World Wide Web Consortium">W3C</abbr> is an international community that work together to develop Web standards. </p> |
الإقتباسات الضمنية Inline Quotes
ذكرنا من قبل العنصر <blockquote> وهو ضمن النوع block-level وهناك نوع أخر من الإقتباسات من النوع inline-level أي ضمني، يمكنك استخدمه ضمن الكلمات الموجودة في نفس السطر وهو العنصر <q>
| 1 2 3 4 5 | <p> He said <q>Hello World”</q> and just left. </p> |
الأكواد Code
مثل العنصر <code> مجموعة من أكواد الكمبيوتر، تظهر بالخط الإفتراضي لأكواد الكمبيوتر.
| 1 2 3 4 5 | <p>This is how we declare a Javascript variable:<br/> <code>var i = 0;</code> </p> |
الكلمات الصغيرة <small>
يستخدم الوسم <small> للدلالة على الكلمات ذات الأهمية الأقل، مثل التعليقات الجانبية، نص حقوق الملكية أسفل الموقع، وبشكل إفتراضي يجعلها المتصفح تظهر بحجم خط أصغر من الخط الطبيعي.
| 1 2 3 4 | <p>This is the first sentence. <small>This whole sentence is in small letters.</small></p> |
