إحدى العلامات التي ستتعلمها مبكرًا في تصميم الويب التعليم هو زوج من العلامات المعروفة باسم "علامات التركيز". دعنا نلقي نظرة على ماهية هذه العلامات وكيف يتم استخدامها في تصميم الويب اليوم.
العودة إلى XHTML
إذا تعلمت HTML منذ سنوات ، فقبل ظهور HTML5، من المحتمل أنك استخدمت كلاً من العلامات الغامقة والمائلة. كما تتوقع ، حولت هذه العلامات العناصر إلى نص غامق أو نص مائل على التوالي. المشكلة مع هذه العلامات ، ولماذا تم دفعها جانبًا لصالح العناصر الجديدة (التي سننظر إليها قريبًا) ، هي أنها ليست عناصر دلالية. هذا لأنهم يحددون كيف يجب أن يبدو النص بدلاً من المعلومات حول النص. تذكر أن HTML (حيث سيتم كتابة هذه العلامات) هو كل شيء عن البنية وليس النمط المرئي! يتم التعامل مع المرئيات بواسطة CSS لطالما اعتبرت أفضل ممارسات تصميم الويب أنه يجب أن يكون لديك فصل واضح بين الأسلوب والهيكل في صفحات الويب الخاصة بك. هذا يعني عدم استخدام العناصر غير الدلالية والتي تبدو التفاصيل بدلاً من البنية. هذا هو السبب في جريئة و مائل تم استبدال العلامات بشكل عام بعلامة قوية (للخط الغامق) وتأكيد (للخط المائل).
و
تضيف العناصر القوية والتأكيدية معلومات إلى النص الخاص بك ، وتفصل المحتوى الذي يجب التعامل معه بشكل مختلف والتأكيد عليه عند نطق هذا المحتوى. يمكنك استخدام هذه العناصر إلى حد كبير بنفس الطريقة التي كنت ستستخدم بها الخط الغامق والمائل في الماضي. ما عليك سوى إحاطة النص بعلامات الفتح والختام (
و للتأكيد و و لتأكيد قوي) وسيتم التأكيد على النص المرفق.يمكنك دمج هذه العلامات ولا يهم العلامة الخارجية. وهنا بعض الأمثلة.
هذا النص مؤكد وستعرضه معظم المتصفحات بخط مائل.
تم التأكيد بشدة على هذا النص وستعرضه معظم المتصفحات بخط عريض.
في كلا هذين المثالين ، نحن لا نملي المظهر المرئي باستخدام لغة البرمجة. نعم ، المظهر الافتراضي لملف ستكون العلامة مائلة و سيكون جريئًا ، ولكن يمكن تغيير هذه الأشكال بسهولة في CSS. وهذا هو أفضل ما في العالمين. يمكنك الاستفادة من أنماط المستعرض الافتراضية للحصول على نص مائل أو غامق في المستند الخاص بك دون تجاوز الخط وخلط الهيكل والنمط. قل أنك أردت ذلك النص ليس فقط غامقًا ولكن أيضًا باللون الأحمر ، يمكنك إضافة هذا إلى SCS.
قوي {
لون احمر؛
}
في هذا المثال ، لا تحتاج إلى إضافة خاصية لسمك الخط الغامق لأن هذا هو الإعداد الافتراضي. إذا كنت لا تريد ترك ذلك للصدفة ، فيمكنك دائمًا إضافته في:
قوي {
وزن الخط: عريض ؛
لون احمر؛
}
الآن ستكون مضمونًا تمامًا أن يكون لديك صفحة بها نص غامق (وأحمر) أينما كان ملف العلامة المستخدمة.
مضاعفة التركيز
هناك شيء واحد لاحظناه على مدار العام وهو ما يحدث إذا حاولت مضاعفة التركيز. على سبيل المثال:
يجب أن يحتوي هذا النص على كليهما بخط غامق ومائل نص بداخله.
قد تعتقد أن هذا السطر سينتج منطقة بها نص غامق ومائل. يحدث هذا في بعض الأحيان بالفعل ، لكننا رأينا بعض المتصفحات تحترم فقط النمط الثاني من نمطي التركيز ، وهو الأقرب إلى النص الفعلي المعني ، ولا تعرضه إلا بالخط المائل. هذا هو أحد الأسباب التي تجعلنا لا نضاعف علامات التركيز.
سبب آخر لتجنب هذا "المضاعفة" هو لأغراض الأسلوب. عادة ما يكون أحد أشكال التركيز كافيًا للتعبير عن النغمة التي ترغب في ضبطها. لا تحتاج إلى كتابة نص بالخط العريض أو المائل أو التلوين أو التكبير أو التسطير حتى يبرز النص. هذا النص ، وكل هذه الأنواع المختلفة من التأكيد ، سيصبح مبهرجًا. لذا كن حذرًا عند استخدام علامات التركيز أو أنماط CSS للتأكيد ولا تبالغ في ذلك.
ملاحظة على الخط العريض والمائل
فكرة أخيرة - بينما الجريء () ومائل () لم يعد يُنصح باستخدام العلامات كعناصر تأكيد ، فهناك بعض مصممي الويب الذين يستخدمون هذه العلامات لتصميم مناطق مضمنة من النص. في الأساس ، يستخدمونه مثل ملف جزء. هذا جيد لأن العلامات قصيرة جدًا ، ولكن لا يوصى عمومًا باستخدام هذه العناصر بهذه الطريقة. نذكرها في حالة رؤيتها هناك على بعض المواقع لا يتم استخدامها لإنشاء نص غامق أو مائل ، ولكن لإنشاء خطاف CSS لنوع آخر من التصميم المرئي.