تم إنشاء هيكل كل موقع تقريبًا نجده ونستخدمه على الويب باستخدام HTML، وهو نظام موحد لتصنيف الملفات النصية. تتم إضافة فواصل الصفحات والفقرات والأحرف القوية والخط المائل والميزات الأخرى باستخدام HTML. ومن خلال استخدام العلامات، التي ترشد المتصفحات إلى كيفية التعامل مع المحتوى، يساعد HTML في إنشاء هذه البنية.

على سبيل المثال، سنضع كلمة بين الوسوم strong>bold/strong> لجعلها تبدو جريئة. تشير العلامة الافتتاحية (/) إلى المكان الذي نريد أن ينتهي فيه الخط الغامق، بينما تشير العلامة الأولى (/) إلى المكان الذي نريد أن يبدأ فيه الخط الغامق. إنه بمثابة الأساس لغالبية صفحات الويب. لذا، هذا هو المكان المناسب للبدء إذا كنت تتعلم البرمجة.

كيفية إضافة مسافة في HTML

باستثناء مسافة واحدة بين الكلمات، يتم تجاهل جميع المسافات الفارغة التي ندخلها في نص HTML لعرضها في المتصفح. ونتيجة لذلك، يجب علينا برمجة المساحات الفارغة التي نريدها في وثيقتنا. يمكن إضافة مساحة إلى أي سطر من النص بتنسيق HTML. على سبيل المثال، قد نقوم بإدراج مسافات فارغة في محتوى الجدول والفقرة باستخدام كائن HTML. نظرًا لأن HTML يفتقر إلى حرف لوحة المفاتيح للمساحة الفارغة، فيجب علينا إدخال الكيان لإضافة كل مسافة.

قد يبدو الأمر بسيطًا، ولكن إضافة مساحة إلى HTML الخاص بنا قد يكون أمرًا صعبًا. هناك على الأقل خمس طرق مختلفة للعناية بهذا الأمر.

خلال هذا التدريب، سنرى العديد من الحالات. وسيوضح أيضًا كيفية استخدام أشكال أكثر تفصيلاً للمساحة.

كيفية التحقق من حجم الشاشة

كل هذا ممكن في HTML عادي دون استخدام CSS. لكن عليك أن تدرك أن إضافة مساحة إلى HTML الخاص بك هو الأفضل عبر CSS.

كيف تبدو مساحة ASCII؟

يتم تمثيل الفضاء برمز ASCII رقم 20. لكن هذه مجرد ممارسة مقبولة.

هناك خمسة أنواع مختلفة من المساحات التي يمكنك توظيفها في HTML. تبدو متطابقة للعين غير المدربة، على الرغم من أن لها وظائف مميزة إلى حد ما.

يعد حرف علامة التبويب، الذي يحاكي الضغط على مفتاح tab على لوحة المفاتيح، خيارًا آخر. وحرف العودة إلى السطر، الذي يحاكي الضغط على مفتاح الإدخال على لوحة المفاتيح، هو مثال آخر.

مسافة غير منقسمة:

في الفضاء:  

مساحة إم:  

مساحة رقيقة:

المساحة القياسية:

الخط الجديد (العودة):

حرف علامة التبويب:

الجانب الأيسر يمثل شخصية ، والجانب الأيمن يمثل كود HTML.

ما مدى اتساع الشخصية في الفضاء؟

بالنسبة لأحرف المسافة، هناك أربعة عروض قياسية:

مساحة العرض القياسي:نظرًا لأنه لن يؤدي إلى فاصل أسطر (يُعرف أيضًا باسم إرجاع السطر)، يُعرف هذا أيضًا باسم 'مسافة غير قابلة لفصل الأسطر'.مساحة إم:يُسمى هذا 'Em' لأنه مهما كان الخط الذي تستخدمه، فهو بنفس عرض الحرف M. (إذا سمعنا عن عبارة 'em-dash'، فإننا نعرف ما نتحدث عنه.)في الفضاء:يُعرف هذا باسم 'En' لأنه له نفس عرض الحرف n في محرفك.مساحة رقيقة:أضيق المساحات هي 'المساحة الرقيقة'، وهو الخيار الأخير.

ماذا تعني مساحة تسجيل الدخول بتنسيق HTML؟

هو كيان HTML الأكثر استخدامًا.

الذي أنشأ المدرسة

لجعل هذا النص يملأ مساحة، حاول رميه.

لنتخيل، على سبيل المثال، أننا نرغب في إضافة مسافتين بعد العبارة، لكن محرك عرض موقع الويب يقوم بإزالة إحدى المسافات من تلقاء نفسه. لإضافة مسافتين، قد نتمكن من الدخول

المسافة البيضاء: ما هذا؟

تسمى الأحرف غير المرئية مسافة بيضاء. وهي تتكون من:

1. المساحات,
2. علامات التبويب، و
3. فواصل الأسطر (إرجاع السطر، أو تغذية الأسطر، أو كليهما)،

لماذا هذا أمر بالغ الأهمية؟

هذه الحروف، على سبيل المثال، غير مرئية في معالج النصوص، لكنها تؤثر على مساحة النص وتنسيقه. يقوم المتصفح بتكثيف العديد من أحرف المسافات البيضاء في مسافة واحدة بتنسيق HTML، والتي تختلف عن اللغات الترميزية الأخرى.

هناك عدة مسافات بين الكلمات في HTML، وينتهي كل سطر بأحرف CRLF (سطر الإرجاع، تغذية الأسطر). سيتم طي جميع أحرف المسافات البيضاء بواسطة المتصفح.

مثال

الأشياء الجيدة تستغرق المزيد من الوقت.

انتاج:

إدراج المسافات

1. استخدم علامة المسافة غير المنفصلة في النص ( ) لتوفير مزيد من التباعد.
2. يمكن استخدام خاصية الحشو CSS لزيادة المساحة داخل العنصر في ظروف مختلفة.
3. تسمح سمة هامش CSS بإضافة مساحة إضافية حول العنصر.

على الرغم من أن المسافات غير المنفصلة مفيدة، إلا أنه لا ينبغي استخدامها بشكل مفرط، لأن القيام بذلك قد يتداخل مع كيفية عرض المادة في المتصفحات. بالإضافة إلى ذلك، امتنع عن استخدام مسافات غير منقسمة لأغراض التصميم مثل وضع مسافة بادئة أو توسيط عنصر على صفحة ويب؛ يجب بدلاً من ذلك التعامل مع المتطلبات الأسلوبية عبر CSS.

بالإضافة إلى الكيان، يدعم HTML أيضًا الكيانات الإضافية التالية للعديد من المساحات الفارغة المتجاورة:

يتم استخدام كيان الحرف   لتمثيل مسافة. En هي وحدة قياس تعادل 8 بكسل، أو نصف عرض em (16 بكسل).

بناء الجملة لمسافة en بين المحتوى هو   فيما يلي مثال لكيفية استخدام كيان HTML &ensp:

وهذا مثال للكيان الفضائي.

انتاج:

يتم استخدام الكيان   في المثال أعلاه لإضافة مسافات إلى HTML، ويبلغ عرضه 8 بكسل. ويمكن استخدامها أيضًا في العديد من المواقع المجاورة.

الحفاظ على التنسيق والتباعد

إذا كنت ترغب في الاحتفاظ بالتنسيق والتباعد الذي تم تحديده، فهناك خياران:

1. إضافة تنسيق HTML والمساحة
2. باستخدام أ

    tag.

استخدام علامة 'ما قبل'.

تحدث هذه النتائج من مبادلة

طريقة جافا

علامة ل

 tag:

مثال

 pre> Good things take more time 

انتاج:

نعم

 tag keeps the formatting as it was originally, but it also switches to a monospaced typeface. All of these can be fixed; however, using the <pre> tag isn&apos;t always the best option. HTML spacing is a more popular method.</pre>

إضافة تنسيق HTML والمسافة

وكبديل، قد نقوم بتضمين عناصر ورموز HTML مثل ما يلي:

الأشياء الجيدة سوف

خد مزيدا من الوقت .

انتاج:

فاصل الأسطر مطلوب من قبل
عنصر.

مسافة غير منقسمة:

لا يقوم المستعرض بطي المسافات المضافة بحرف المسافة غير المنفصلة ().

بالإضافة إلى ذلك، كما يوحي الاسم، فإنه يمنع المتصفح من تقسيم كلمتين هناك.

الأشياء الجيدة تستغرق المزيد من الوقت.

انتاج:

في هذا النموذج يتم إضافة 10 مسافات في بداية النص. ويوضع آخر بين ' يأخذ والتي لن يتم عزلها عند انتهاء الجملة بسبب قيود المساحة.

روديارد كيبلينج إذا كان التفسير

سمة الحشو

تتم زيادة المساحة الداخلية للعنصر باستخدام سمة الحشو CSS.

يستغرق الأمر قيمًا تتراوح من واحد إلى أربعة، بدءًا من الجوانب العلوية والأيمن والأسفل والأيمن.

ال 'شعبة' يحتوي العنصر على حشوة تبلغ 20 بكسل من جميع الجوانب.

 Inner spacing is 20px with a div attribute 

انتاج:

سمة الهامش

1. باستخدام سمة هامش CSS، تتم إضافة مساحة إضافية حول العنصر.
2. يستغرق الأمر قيمًا تتراوح من واحد إلى أربعة، بدءًا من الجوانب العلوية والأيمن والأسفل والأيمن.

ال 'شعبة' العنصر به هامش 40 بكسل من جميع الجوانب.

 Outer spacing is 20px using the div and margin attribute 

انتاج:

الحشو مقابل الهامش

1. تعمل الحشوة والهامش على زيادة مساحة العنصر.
2. الحشو يترك فراغا يعتبر أحد مكونات العنصر.
3. تعتبر المساحة التي تم إنشاؤها بالهامش موجودة خارج حدود العنصر.
4. تتأثر منطقة النقر وألوان الخلفية والسمات الأخرى لموقع الويب بهذا الاختلاف.

يمكن للمرء أن يعتقد أن إضافة مسافات في HTML أمر بسيط مثل الضغط باستمرار على شريط المسافة. لكن هذه ليست الطريقة التي تسير بها الأمور. لن يؤدي الضغط على مفتاح المسافة أكثر من مرة إلى إضافة المزيد من المساحات الفارغة القريبة كما يحدث في مستند نصي. سيقوم المتصفح بدمج جميع المساحات الفارغة القريبة في مكان واحد إذا قمنا بذلك بتنسيق HTML. لتوضيح ما يحدث عندما نستخدم عدة مسافات في HTML، دعونا نلقي نظرة على مثال:

لذلك، بعد استخدام شريط المسافة عدة مرات، لا يمكننا إضافة المزيد من المسافات الفارغة

انتاج:

من خلال الضغط بشكل متكرر على شريط المسافة في HTML، كما هو موضح في المثال أعلاه، فإننا نحاول إدراج العديد من المسافات الفارغة المتتالية في صفحة الويب. ومع ذلك، تعرض المتصفحات عدة مسافات فارغة متجاورة كمسافة واحدة وتتجاهل المسافات قبل المكونات وبعدها وخارجها. تُعرف هذه الظاهرة باسم انهيار المسافة البيضاء. على الرغم من أن طي المسافات البيضاء قد يكون مزعجًا في بعض الأحيان، إلا أن هناك العديد من التقنيات لإضافة المزيد من المسافات في كل من HTML وCSS (أوراق الأنماط المتتالية).

&

يتم استخدام كيان الحرف   لتمثيل مسافة em. عرض em، وهو 16 بكسل، يعادل emsp.

بناء جملة المسافات em في النص هو   فيما يلي مثال لكيفية استخدام كيان HTML &emsp:

وهذا مثال للكيان الفضائي.

انتاج |

يتم استخدام الكيان   في المثال أعلاه لإضافة مسافات إلى HTML، ويبلغ عرضه 16 بكسل. ويمكن استخدامها أيضًا في العديد من المساحات المجاورة.

&thinsp

يتم استخدام كيان الشخصية لتمثيل المساحة الرفيعة، والتي تُعرف غالبًا بالمساحة الضيقة. سدس em هو عرض &

تتم كتابة المساحة الرفيعة على أنها محتوى بيني في بناء الجملة. فيما يلي مثال لكيفية استخدام كيان HTML ''

هذا مثال على كيان الفضاء الرقيق.

انتاج |

يتم استخدام الكيان في المثال أعلاه لإضافة مسافات رفيعة إلى HTML، ويبلغ عرضه سدس em. كما أنها تستخدم في العديد من المساحات المجاورة.

يوجد أدناه فن ASCII لـ 'Hi'. # # ##### # # # ##### # # # # # # # # ######

انتاج:

صور تخفيض السعر

إيجابيات استخدام المسافة البيضاء

وضوح المحتوى الموسع:عندما يكون العملاء على موقعنا، يجب أن تكون لديهم القدرة على معرفة المكان الذي يتجهون إليه حتى يتم إعطاؤهم الدافع لمواصلة القراءة. بكل صدق، تساعد المسافات البيضاء بين المقاطع وحول كتل النصوص والصور الأفراد على فهم ما يتصفحونه وتساهم في تحسين تجربة العميل بشكل عام.المزيد من التعاون:هل يمكننا أن نكون واقعيين، فالضيوف دائمًا في عجلة من أمرهم أثناء ملاحقتهم للمواقع المحلية، وسيؤدي وجود الكثير من المسافات البيضاء إلى زيادة الاتصال عن طريق منع الانقطاعات التي تؤدي إلى إبطاء سرعة الضيف. في الواقع، حتى وجود توسيد طفيف حول العناصر سيجعلنا نلاحظ منطقة معينة على موقعنا. وفقًا للبحث الذي أجرته Human Elements Worldwide، تزيد المساحة البيضاء من المعرفة بنسبة 20٪ تقريبًا.القدرة على عرض العبارات التي تحث المستخدم على اتخاذ إجراء (CTAs):في بعض الأحيان، أوضح طريقة لجعل شيء ما متميزًا هو جعل الأشياء أعظم. يمكننا أن نجعل الصور أكبر أو الأزرار أكبر. ومع ذلك، فإن تضمين الشيء بمسافة بيضاء يمكن أن يكون قابلاً للتطبيق بالمثل.الموقع النظيف يعادل الموقع الجدير بالملاحظة:إن الشعور الأولي لموقعنا له أهمية كبيرة. الكثير من التصميمات القوية غير العادية، ومجموعة كبيرة ومتنوعة من الخطط - يضيف هذا العدد الكبير من المكونات إلى الانطباع الذي يتركه الموقع؛ ومع ذلك، فإن المسافات البيضاء لها أهمية خاصة لأنها تظهر البراعة وسعة الحيلة. المسافة البيضاء لا تجعل موقعك مكشوفًا أو معتدلًا. مهما كانت المسافة البيضاء الطويلة يتم استغلالها بالطريقة الصحيحة، فإنها ستضيف إحساسًا بالصقل والانتشار إلى موقعك.تحقيق التوازن:يؤدي وجود مسافة بيضاء قليلة جدًا إلى حدوث حالة من الفوضى والاضطراب والاهتزاز، وهي خصائص لا تحتاج إليها فيما يتعلق بصورة موقعك. ومرة أخرى، يمكن أن تتميز الكثير من المسافات البيضاء بغياب المحتوى وغياب توجيه العميل. المفتاح هو تعديل خططك والسماح للمسافات البيضاء بالعمل كأداة رائعة لعزل كتل المحتوى من أجل الانفتاح البسيط وتجربة عميل أكثر تطورًا.يعمل كفاصل:تعمل المسافة البيضاء على عزل المكونات غير ذات الصلة في الخطة. يتم استخدامه لعزل الصور أو التصميمات عن بعضها البعض ويعمل على التنسيق المرئي العام الخاص بك. إن استخدام المسافات البيضاء المشروعة يجعل المراسلات أكثر وضوحًا بين الأفكار والخطط المقنعة.

لماذا تعتبر المسافة البيضاء مهمة؟

المساحة البيضاء هي لبنة البناء الأساسية للتصميم الجيد، في رأيي كمصمم. يشير المصممون إلى المساحة السلبية، أو المسافة بين القطع في التركيبة، عندما يستخدمون مصطلح 'المسافة البيضاء'. إنها المساحة الفارغة بين الرسومات والهوامش والمزاريب على الصفحة التي لم يتم وضع علامة عليها بأي شيء. يتم منح العين مساحة للتنفس البصري من خلال المسافة بين الأعمدة وأسطر النص والأشكال.

هناك سبب مقنع لكون المسافة البيضاء عنصرًا حاسمًا في التصميم. قد يحدث ثورة في تصميم موقعنا ويزوده بمزايا عديدة إذا تم تطبيقه بشكل صحيح. يجب علينا إنتاج وإنشاء تخطيطات ترضي العين وتشجع القراء على الاستمرار. من المهم أن نضع في اعتبارنا باستمرار أن تقديم منتج رائع لعملائنا هو أولويتنا عندما نصمم للويب.

يمكن استخدام المسافة البيضاء لتوجيه القارئ من عنصر إلى آخر، وخلق الانسجام، والتوازن، والمساعدة في تصميم العلامة التجارية. تتمثل أهدافنا الرئيسية في جعل موقع الويب يبدو واضحًا ومباشرًا وتوفير المحتوى الذي سيحبه المستخدمون ويقدرونه. المسافة البيضاء ليست مجرد مساحة 'فارغة'؛ إنها ميزة تصميمية تتيح وجود العناصر الموجودة في الصفحة. تحقق المنطقة توازنًا وتعمل بمثابة تذكير دائم بوجود تصميمات جميلة. لتوصيل رسالة واضحة، لا نحتاج إلى إنشاء تخطيط مثقل بالنصوص والرسومات.