إذا نظرت في أي وقت إلى قائمة عناصر HTML ، فقد تجد نفسك تسأل "ما هو مقترح؟" عنصر اقتباس البيانات هو زوج من علامات HTML يتم استخدامه لتحديد عروض الأسعار الطويلة. في ما يلي تعريف هذا العنصر وفقًا لمواصفات W3C HTML5:
يمثل عنصر مربع الحوار فقرة مقتبسة من مصدر آخر.
كيفية استخدام Blockquote على صفحات الويب الخاصة بك
عندما تقوم بكتابة نص في صفحة ويب وإنشاء تخطيط تلك الصفحة ، فأنت تريد أحيانًا استدعاء كتلة نصية كاقتباس.
قد يكون هذا اقتباسًا من مكان آخر ، مثل شهادة العميل التي ترافق دراسة حالة أو قصة نجاح المشروع. قد يكون هذا أيضًا علاجًا تصميميًا يكرر بعض النصوص المهمة من المقالة أو المحتوى نفسه. في عملية النشر ، يطلق على هذا أحيانًا اقتباسًا للسحب ، في تصميم الويب ، يُطلق على إحدى الطرق لتحقيق ذلك (والطريقة التي نغطي بها في هذه المقالة) اسم علامة اقتباس.
لنلقِ نظرة على كيفية استخدام علامة الاقتباس لتحديد عروض الأسعار الطويلة ، مثل هذا المقتطف من "The Jabberwocky" للمخرج لويس كارول:
"تواس بريليج و slithey toves
هل تلاعبت وراجعت في wabe:
جميع البسيمات كانت البوغوجوف ،
وتتفوق على مساحات الأم.
(بقلم لويس كارول)
مثال على استخدام علامة Blockquote
علامة blockquote هي علامة دلالية تخبر المتصفح أو وكيل المستخدم بأن المحتويات عبارة عن عرض أسعار طويل. على هذا النحو ، يجب ألا ترفق نصًا ليس عرضًا داخل علامة اقتباس. تذكر أن "الاقتباس" هو في الغالب كلمات فعلية قالها شخص ما أو نص من مصدر خارجي (مثل نص لويس كارول في هذه المقالة) ، ولكن يمكن أيضا أن يكون مفهوم الانسحاب الذي قمنا بتغطيته في السابق.
عندما تفكر في ذلك ، فإن هذا المستطيل عبارة عن اقتباس من النص ، ويصادف أنه من نفس المقال الذي يظهر فيه الاقتباس نفسه.
تضيف معظم متصفحات الويب بعض المسافات البادئة (حوالي 5 مسافات) إلى جانبي فدرة زمنية لتجعلها تبرز من النص المحيط. قد تعرض بعض المتصفحات القديمة جدًا النص المقتبس بحروف مائلة.
تذكر أن هذا هو ببساطة التصميم الافتراضي لعنصر blockquote. باستخدام CSS ، يكون لديك تحكم كامل في كيفية عرض فهرستك. يمكنك زيادة المسافة البادئة أو حتى إزالتها أو إضافة ألوان الخلفية أو زيادة حجم النص لاستدعاء عرض الأسعار. يمكنك تعويم هذا الاقتباس إلى جانب واحد من الصفحة وجعل النص الآخر يلتف حوله ، وهو نمط مرئي شائع يُستخدم للقطعات في المجلات المطبوعة. يمكنك التحكم في مظهر blockquote مع CSS ، وهو أمر سنتطرق إليه بعد قليل بقليل. في الوقت الحالي ، دعنا نستمر في البحث عن كيفية إضافة السعر نفسه إلى ترميز HTML الخاص بك.
لإضافة علامة فقرة منقوطة إلى النص الخاص بك ، قم ببساطة بإحاطة النص بعلامة مع زوج الوسم التالي -
فمثلا:
"تواس بريليج و slithey toves
هل تلاعبت وراجعت في wabe:
جميع البسيمات كانت البوغوجوف ،
وتتفوق على مساحات الأم.
كما ترى ، ما عليك سوى إضافة زوج من علامات الاقتباس حول محتوى الاقتباس نفسه. في هذا المثال ، استخدمنا أيضًا بعض علامات التوقف (
) لإضافة فواصل أسطر مفردة حيثما كان ذلك مناسبًا داخل النص. هذا لأننا نعيد إنشاء نص من قصيدة ، حيث تكون تلك الفواصل المحددة مهمة. إذا كنت تقوم بإنشاء عرض أسعار شهادة عميل ، ولم تكن الخطوط بحاجة إلى تقسيم أجزاء معينة ، فلن ترغب في إضافة علامات القطع هذه والسماح للمتصفح نفسه بالالتفاف والكسر حسب الحاجة بناءً على حجم الشاشة.
لا تستخدم Blockquote إلى مسافة بادئة
على مدار سنوات عديدة ، استخدم الأشخاص علامة blockquote إذا أرادوا وضع مسافة بادئة على النص على صفحاتهم على الويب ، حتى لو لم يكن هذا النص عبارة عن علامة سحب. هذه ممارسة سيئة! لا ترغب في استخدام دلالات مقاربة الباب فقط لأسباب مرئية. إذا كنت بحاجة إلى مسافة بادئة لنصك ، فيجب عليك استخدام أوراق الأنماط وليس علامات التنقيط (إلا إذا كان ما تحاول فعله هو إقتباس). حاول وضع هذا الرمز في صفحة الويب الخاصة بك إذا كنت تحاول ببساطة إضافة مسافة بادئة:
سيكون هذا نصًا مزاحًا.
بعد ذلك ، يمكنك استهداف هذه الفئة بنمط CSS
.indented {
الحشو: 0 10px؛
}
هذا يضيف 10 بكسل من الحشو إلى جانبي الفقرة.
المقالة الأصلية لجنيفر كرينين. حرره جيرمي جيرار في 5/8/17.