انقر هنا للعودة إلى العمود التعليمي HTML HTML.
أعلاه: لغة الترميز - النماذج
المصدر الأصلي الفصل 6 <strong> و <em> وعناصر العبارات الأخرى
في المقدمة والفصول السابقة ، تم ذكر مفهوم العلامات الدلالية قليلاً ، باستخدام علامات لتحديد معنى الملفات بدلاً من مجرد تعيين تأثير العرض مع العلامات. يعد تصميم صفحة ويب تستخدم العلامات الدلالية تمامًا فكرة جيدة. ومع ذلك ، أعتقد أن هذا الهدف مثالي للغاية. بالطبع ، عدم تحقيق الهدف تمامًا لا يعني أن عملية الجهد لا قيمة لها. على الأقل من المفيد العمل من أجل هذا الهدف.
في الواقع ، من الضروري في كثير من الأحيان إضافة علامات غير ديمودية لتحقيق أهداف تصميم محددة ، وذلك أساسًا لأن المتصفحات الشهيرة اليوم لا يمكنها دعم المعايير بنسبة 100 ٪. لا يمكن لبعض قواعد CSS عرض التأثير الصحيح في بعض المتصفحات ، وللأسف ، يجب علينا استخدام علامات إضافية في عملية تحقيق أهداف تصميم معينة.
هناك مفهوم مهم يجب أن يؤخذ على محمل الجد: أي أن محاولة كتابة الهياكل الدلالية قدر الإمكان ستجلب فوائد عملية. في الوقت نفسه ، على الرغم من أن دعم المعايير لم يصل إلى 100 ٪ ، فقد عبر النقطة الحرجة حتى نتمكن من كتابة صفحات الويب الآن باستخدام أساليب تلبي معايير الشبكة. في بعض الأحيان ، يتعين علينا تقديم بعض التضحيات ، ولكن كلما زادت الملصقات التي تمتثل للمعايير ، كلما كان الأمر أسهل في المستقبل. تأثير العرض مقابل تسميات الهيكل
سيناقش هذا الفصل الفرق بين تأثيرات العرض والعلامات الهيكلية ، أو بالأحرى الاختلافات بين استخدام <strong> استبدال <B> واستخدام <em> استبدال <i>. في وقت لاحق من هذا الفصل ، سنناقش أيضًا العديد من عناصر العبارات الأخرى وأهميتها ضمن قواعد الملصقات المتوافقة مع القياسية.
ربما تكون قد سمعت أن بعض الأشخاص يقترحون استخدام <strong> استبدال <b> عندما يحتاجون إلى نص جريء ، لكنهم لا يخبرونك بالمزيد من الحاجة إلى هذا الاستبدال. دون معرفة السبب ، من الصعب حقًا توقع تغيير مصممي الويب الآخرين لعادات استخدامهم لمجرد أنهم سمعوا بها. لماذا <strong> أفضل من <b> <i>؟
ما هي فوائد إزالة العلامات <b> و <i> واستبدالها بـ <strong> و <em>؟ في الواقع ، كل هذا هو التعبير عن الدلالات والهيكل ، وليس فقط لإظهار التأثير . جميع الأمثلة في هذا الكتاب تسعى أيضًا إلى اتباع هذا المفهوم. انظر ماذا يقول الخبراء
أولاً ، دعنا نلقي نظرة على كيفية وصف W3C <strong> و <em> في مواصفات عنصر HTML4.01 (http://www.w3.org/tr/html4/struct/text.html#h-9.2
يمكن أن تضيف عناصر العبارة المعلومات الهيكلية إلى شظايا النص. عناصر العبارات الشائعة لها المعاني التالية:
<em> شدد ممثل <strong> يمثل تركيزًا أقوىلذلك نحن هنا نناقش درجتين مختلفتين من التركيز. على سبيل المثال ، إنها كلمة أو عبارة واحدة. عند وضوح ، يجب أن يكون أعلى ، مع نغمة أعلى ، أو وضوح أسرع ، أو ... حسنًا ، يتم التأكيد عليه أكثر من محتوى النص العام.
ثم يصف W3C الفقرة التالية:
يختلف تأثير عرض عناصر العبارة مع المتصفح. بشكل عام ، يجب أن يعرض المتصفح المرئي محتوى النص بخط مائل ومحتوى النص بالخط العريض. يمكن لبرنامج تخليق الصوت تغيير معلمات التوليف مع المحتوى ، مثل الصوت والنبرة والسرعة ، إلخ.
آه! الجملة الأخيرة مثيرة للاهتمام بشكل خاص. سوف يتعامل برنامج توليف الكلام (اعتدنا أن نسميه قارئ الشاشة) مع التعامل مع النص الذي يجب التأكيد عليه بشكل صحيح ، وهو أمر جيد بالفعل.
على النقيض من ذلك ، <b> أو <i> مجرد علامات تأثير عرض بسيطة. إذا كان هدفنا هو فصل الهيكل عن تأثير العرض ، فإن استخدام <strong> و <em> هو الخيار الصحيح. فقط أريد عرض نص جريء ومائل مع CSS. سيتم مناقشة المزيد من الأمثلة لاحقًا في هذا الفصل.
بعد ذلك ، انظر إلى مثالين على تحديد الهوية لمساعدتنا على فهم خلافاتهم. الطريقة أ
رقم طلبك للمرجع المستقبلي هو: <b> 6474-82071 </b> .method b
رقم طلبك للرجوع إليه في المستقبل هو: <strong> 6474-82071 </strong> .Rough and Beautiful
هذا الموقف هو مثال مثالي لاستخدام <strong> أكثر من <b>. نعتزم جعل النص المحدد في الجملة أكثر أهمية. بالإضافة إلى عرض أرقام الطلبات بالخط العريض ، نأمل أيضًا أن يغير قراء الشاشة أيضًا الطريقة التي يعبرون بها عن هذا المحتوى: زيادة مستوى الصوت أو تغيير النغمة أو السرعة. يمكن أن تحقق الطريقة B كلا الهدفين في نفس الوقت. وماذا في ذلك؟
وبالمثل ، يمكن أن يعبر استبدال <em> بـ <i> عن أهمية في نفس الوقت ، بدلاً من مجرد عرض محتوى النص بخط مائل. دعونا نلقي نظرة على هذين المثالين: الطريقة أ
لقد استغرق الأمر مني أن لا أكون عليه ، لكن <i> ثلاث ساعات </i> لمجرف دربتي هذا الصباح. method b
استغرق الأمر مني أن لا شيء ، لكن <em> ثلاث ساعات </em> لمجرف دربتي هذا الصباح.
في المثال السابق (الموقف الحقيقي عند كتابة هذا الكتاب) ، كان هدفي هو جعل الكلمة Three Express في نغمة التركيز ، تمامًا مثل قراءة هذه الكلمة بصوت عالٍ ، بصريًا ، سيتم عرض الطريقة B بشكل مائل في معظم المتصفحات ، وسيقوم قارئ الشاشة بضبط النغمة أو السرعة أو الصوت بشكل مناسب. طالما أنها جريئة أو مائلة ، فلا بأس
تجدر الإشارة إلى أنه في كثير من الحالات ، هناك حاجة فقط لتأثير النص للجريء والخطية للعرض بصريًا. بمعنى آخر ، لنفترض أن لديك قائمة بالروابط في الشريط الجانبي ، وترغب في السماح لجميع الروابط بعرض نفس التأثير: أي جريئة (الشكل 6-1)
الشكل 6-1. مثال على الروابط الجريئة الموضوعة في الشريط الجانبي
بالإضافة إلى الميزات المرئية ، لا نعتزم التأكيد على محتوى الارتباط. هذا مكان جيد لتغيير مظهر الروابط مع CSS ، بحيث لن يتم التأكيد عليها بشكل خاص من قبل قراء الشاشة والمتصفحات الأخرى غير المرئية.
على سبيل المثال ، هل تريد حقًا قراءة الرابط الغامق بشكل أسرع وأعلى صوتًا وأعلى؟ ربما لا ، الجريئة هنا هي مجرد تأثير العرض. وزن الخط يعادل جريئة
من أجل تحقيق تأثير عرض الشكل 6-1 ، دعنا نفترض أن شريط الارتباط يتم وضعه في <div> مع تعيين المعرف على الشريط الجانبي ، حتى نتمكن من استخدام CSS لتحديد الروابط داخل #sidebar بالجريمة:
#sidebar a {
خط الرصيف: جريئة ؛
}
بسيط للغاية ، أعتقد أنه أمر مثير للسخرية بعض الشيء عندما أذكر ذلك ، لكن هذه طريقة جيدة للمساعدة في فصل البنية وعرض التأثيرات. إنه جريء!
وبالمثل ، يمكنك تطبيق أفكار مماثلة عند التفكير في النص المائل. عندما لا ترغب في التأكيد على المحتوى وترغب فقط في عرض النص بخط مائل ، يمكنك استخدام السمة على غرار الخط للتعامل مع هذه المواقف من خلال CSS مرة أخرى.
دعنا نستخدم نفس #sidebar كمثال. على سبيل المثال ، إذا كنت تريد عرض جميع الروابط في #Sidebar بشكل مائل ، فيمكنك كتابة هذا:
#sidebar a {
على غرار الخط: مائل ؛
}
إنه مفهوم بسيط آخر ، ولكن في مجال القواعد النحوية المنظمة ، أعتقد أنه من المهم للغاية مناقشة هذه المواقف - باستخدام CSS لمعالجة CCTV بدلاً من عرض ملصقات التأثير. في بعض الأحيان يكون أبسط الحلول هو الأسهل في التجاهل. مشاركة جريئة وخطوط مائلة
عندما أخطط لعرض محتوى النص بالخط العريض والخطية في نفس الوقت ، أعتقد أنني يجب أن أفكر أولاً في سؤال ، ما هي درجة التركيز التي تخطط لنقلها؟ استنادًا إلى إجابة هذا السؤال ، سأختار التسمية المناسبة: <em> (التأكيد) أو <تأكيد أقوى) ، ثم حدد النص بالتسمية المحددة.
على سبيل المثال ، بالنسبة إلى المثال التالي ، خططت في الأصل للسماح بعرض المرح بالخط الغامق والخطية في نفس الوقت ، لكن في النهاية اخترت استخدام <em> للتأكيد على هذه الكلمة.
يمكن أن يكون بناء المواقع مع معايير الويب <em> متعة </em>!
ستعرض معظم المتصفحات هذه الكلمة فقط بخط مائل. لاستخدام كل من Bold و Italics ، لدينا العديد من الخيارات. أوه ، آمل حقًا أن تتفق مع الجملة أعلاه. عادية <span>
تتمثل إحدى الطرق في استخدام حزمة <span> العادية خارج المرح ، وتحديد قاعدة CSS لعرض جميع <span> في Bold. يبدو أن بناء جملة العلامة هكذا:
يمكن أن يكون بناء مواقع مع معايير الويب <em> <span> متعة </span> </em>!
و CSS يشبه هذا:
إم سبعة {
خط الرصيف: جريئة ؛
}
الجزء الدلالي الواضح ليس جيدًا لأننا أضفنا علامات إضافية ، لكن هذه الطريقة لا تزال مفيدة للجميع. التأكيد مع الفصل
طريقة أخرى هي تحديد فئة لعلامة <em> وإضافة تأثير جريء في CSS. يبدو أن بناء جملة العلامة هكذا:
يمكن أن يكون بناء مواقع مع معايير الويب <em class = Bold> متعة </em>!
و CSS يشبه هذا:
em.bold {
خط الرصيف: جريئة ؛
}
يمكن أن يؤدي استخدام <em> إلى تحقيق التأثير المائل (على الرغم من أنه يؤكد بشكل دلالي على محتوى النص) ، وإضافة فئة غامقة إلى ذلك سيجعل النص داخل <em> يظهر بالخط العريض.
يمكن أيضًا استخدام طرق مماثلة لتعديل <strong>. في هذا الوقت ، عندما نؤكد على فقرة معينة ، يمكننا تصميم الفئة المائلة ذات التأثير المائل ، ثم مطابقة التأثير الجريء الأصلي.
تبدو لغة الترميز هكذا:
يمكن أن يكون بناء مواقع مع معايير الويب <Strong Class = ITALIC> متعة </strong>!
و CSS مثل هذا:
قوي. {
على غرار الخط: مائل ؛
}
الصفحة السابقة 1 2 3 4 5 الصفحة التالية اقرأ النص الكامل