نظرة على كيفية تعامل المتصفحات مع المساحة البيضاء في HTML
إذا كنت من أوائل مصممي الويب ، فإن أحد الأشياء الكثيرة التي يجب أن تفهمها مبكرًا هو الطريقة التي تتم بها معالجة المساحة البيضاء في شفرة الموقع بواسطة متصفحات الويب.
لسوء الحظ ، فإن الطريقة التي تتعامل بها المتصفحات مع المساحة البيضاء ليست بديهية للغاية في البداية ، خاصة إذا أتيت إلى HTML وقارنها بكيفية معالجة المساحة البيضاء في برامج معالجة النصوص ، والتي قد تكون أكثر دراية بها.
في برنامج معالجة النصوص ، يمكنك إضافة الكثير من التباعد أو علامات التبويب في المستند ، وسوف تنعكس هذه التباعد في عرض محتوى المستند. هذا ليس هو الحال مع HTML أو مع صفحات الويب. وعلى هذا النحو ، فإن تعلم كيفية تعامل المساحة البيضاء ، بالفعل ، مع متصفحات الويب أمر مهم للغاية.
تباعد في الطباعة
في برنامج معالجة النصوص ، تكون ثلاثة أحرف أساسية بيضاء للمساحة هي المساحة ، وعلامة التبويب ، والعودة. كل من هذه التصرفات بطريقة مميزة ، ولكن في HTML ، تجعل المتصفحات جميعها متشابهة في الأساس. سواء أكنت تضع مسافة واحدة أو 100 مساحة في ترميز HTML الخاص بك ، أو تقوم بخلط التباعد مع علامات التبويب وإرجاع الحروف ، فسيتم تكثيف كل هذه المساحة إلى مسافة واحدة عندما يتم عرض الصفحة بواسطة المتصفح. في مصطلحات تصميم الويب ، يُعرف هذا باسم انهيار الفضاء الأبيض. لا يمكنك استخدام مفاتيح المسافات التقليدية هذه لإضافة مسافات بيضاء في صفحة ويب لأن المتصفح يقوم بتقليص مساحات متعددة لأسفل إلى مساحة واحدة فقط عند عرضه في المستعرض ،
لماذا يستخدم شخص ما علامات التبويب؟
عادةً ، عندما يستخدم الأشخاص علامات التبويب في مستند نصي ، فإنهم يستخدمونها لأسباب تتعلق بالتخطيط أو للحصول على النص للانتقال إلى مكان معين أو أن يكونوا مسافة معينة من عنصر آخر. في تصميم الويب ، لا يمكنك استخدام رموز المسافات المذكورة أعلاه لتحقيق تلك الأنماط أو احتياجات التصميم المرئية.
في تصميم الويب ، سيكون استخدام الأحرف الزائدة في الشفرة فقط لسهولة قراءة هذا الرمز. يستخدم مصممو ومطوِّرو الويب غالبًا علامات تبويب لرمز المسافة البادئة بحيث يمكنهم رؤية العناصر التي هي عناصر عناصر أخرى - ولكن تلك المسافات البادئة لا تؤثر على التنسيق المرئي للصفحة نفسها. بالنسبة إلى التغييرات المطلوبة في التخطيط المرئي ، ستحتاج إلى تشغيل CSS (أوراق الأنماط المتتالية).
استخدام CSS لإنشاء علامات تبويب HTML والمسافات
تم بناء مواقع الويب اليوم بفصل بين البنية والأسلوب. تتم معالجة بنية الصفحة بواسطة HTML بينما يتم إملاء النمط بواسطة CSS. هذا يعني أنه لإنشاء مسافات أو تحقيق تخطيط معين ، يجب أن تتحول إلى CSS ولا تحاول ببساطة إضافة أحرف مبسطة إلى شفرة HTML.
إذا كنت تحاول استخدام علامات التبويب لإنشاء أعمدة نص ، فيمكنك بدلاً من ذلك استخدام عناصر
إذا كانت البيانات التي تقوم بوضعها هي بيانات جدولة ، فيمكنك استخدام الجداول لمحاذاة البيانات كما تريد. غالبًا ما تحصل الجداول على موسيقى سيئة في تصميم الويب بسبب إساءة استخدامها كأدوات تخطيط خالصة لسنوات عديدة ، لكن الجداول لا تزال صالحة تمامًا إذا احتوى محتواك على تلك البيانات المجدولة المذكورة سابقًا.
الهوامش والحشو و المسافة البادئة للنص
تعد الطرق الأكثر شيوعًا لإنشاء مسافات باستخدام CSS هي استخدام أحد أنماط CSS التالية:
- حافة
- حشوة
- المسافة البادئة النص
على سبيل المثال ، يمكنك وضع مسافة بادئة للسطر الأول من فقرة مثل علامة تبويب مع CSS التالي (لاحظ أن هذا يفترض أن فقرتك بها سمة صنف من فئة "أولاً" مرفقة بها):
p.first {
مسافة بادئة للنص: 5em؛
}
سيتم الآن وضع مسافة بادئة لهذه الفقرة حول 5 أحرف.
يمكنك أيضًا استخدام خصائص الهامش أو الحشو في CSS لإضافة المسافات إلى الأعلى أو الأسفل أو اليسار أو اليمين (أو مجموعات من هذه الجوانب) لعنصر. في النهاية ، يمكنك تحقيق أي نوع من التباعد المطلوب من خلال الانتقال إلى CSS.
نقل النص أكثر من الفضاء دون CSS
إذا كان كل ما تريده هو نقل النص الخاص بك على مسافة تزيد عن مسافة واحدة من العنصر السابق ، فيمكنك استخدام المساحة غير القابلة للكسر.
لاستخدام المساحة غير القابلة للكسر ، ما عليك سوى إضافة & nbsp؛ عدد المرات التي تحتاجها في ترميز HTML الخاص بك.
على سبيل المثال ، إذا أردت نقل كلامك بخمس مسافات ، يمكنك إضافة ما يلي قبل الكلمة.
على & nbsp؛ على & nbsp؛ على & nbsp؛ على & nbsp؛ على & nbsp؛يحترم HTML هذه الأشياء ولن يقلبها إلى مسافة واحدة. ومع ذلك ، يعتبر هذا ممارسة سيئة للغاية لأنه يضيف ترميز HTML إضافي إلى مستند فقط لتحقيق احتياجات التخطيط. بالإشارة إلى ذلك الفصل بين البنية والأسلوب ، يجب تجنب إضافة مسافات غير قابلة للكسر ببساطة لتحقيق تأثير تخطيط مطلوب ويجب استخدام هوامش CSS والحشو بدلاً من ذلك.