X
ساهم فريق عمل ويكي هاو في إعداد المقال. يعمل فريقنا المُدرب من المحررين والباحثين على التحقق من دقة المعلومات وقابليتها للتطبيق بالنسبة للقراء.
يعمل فريق ويكي هاو على مراقبة كتابات فريق التحرير لضمان أن كل المقالات تُلبي معايير الجودة الخاصة بالموقع.
يحتوي هذا المقال على 8 مصدرًا تم الاستشهاد بهم. يمكنك الإطلاع عليهم في أدنى الصفحة.
تم عرض هذا المقال ٤٧٬٤٠٥ مرة/مرات.
غالبًا ما يتم تجاهل المسافات المتعددة باستخدام مفتاح المسافة ومفتاحي tab والإدخال عند كتابة رمز اتش تي ام ال حيث تترجم لغة اتش تي ام ال كل هذه المسافات بأنها مسافة بيضاء بين الكلمات وتعرضها كمسافة واحدة فقط. تسمح رموز سي اس اس من ناحية أخرى بحرية أكبر في تنسيق المسافات البيضاء والمسافات بين السطور، كما تمتلك لغة اتش تي ام ال العديد من أدوات تخصيص المسافات.
الخطوات
طريقة 1
طريقة 1 من 2:
إدراج مسافات فردية ومسافات كبيرة
-
1أدرِج مسافة غير منقطعة. تعرض لغة اتش تي ام ال عادةً مسافة واحدة بين الكلمات بغض النظر عن عدد مرات الضغط على مفتاح المسافة ويمكنك إظهار مسافة إضافية عن طريق كتابة أو  .[١] يؤدي ذلك إلى عرض مسافة تسمى المسافة غير المنقطعة وتظهر هذه المسافة دائمًا.
- تسمى هذه المسافة بالمسافة غير المنقطعة لأنها تمنع انقطاع الخط في موضعها وسيواجه المتصفّح صعوبة في إدراج فواصل السطور بطريقة منمقة إن أفرطت باستخدام هذه المسافة.[٢]
-
2أدرِج مسافة بيضاء بأعراض مختلفة. هناك العديد من وحدات الرموز الأخرى التي تخبر المتصفح بأن يُظهر مسافة بيضاء وقد تعرض المتصفحات المختلفة هذه المسافة بشكل مختلف، إلا أن هذا النوع من المسافة لا يؤثر على انقطاع الخط على عكس الرمز :[٣] [٤]
-   - يؤدي هذا الرمز إلى إدراج مسافة بعرض مسافتين عاديتين تقريبًا.
-   - تعادل هذه المسافة المسافة العادية تقريبًا.
-
3أدرِج مسافة تشبه المسافة العريضة باستخدام المسافات غير المنقطعة. إدراج عدة مسافات غير منقطعة بشكل متتال أحد طرق ترك مسافة بيضاء قبل بداية الفقرة: يمكن فعل ذلك في لغة اتش تي ام ال فقط ولكن لا يُنصح بفعل ذلك إن كان بإمكانك استخدام رموز سي اس اس عوضًا عن ذلك (ستجد شرحًا لذلك في خطوة منفصلة).
- إن كنت تمتلك فقرة نصية تحتوي على ترتيب نصي معقّد، استخدم وسم الاستباق عوضًا عن ذلك.
-
4ترك مسافة كبيرة قبل فقرة نصية باستخدام رموز سي اس اس. تعطي مسافات وحدود رموز سي اس اس إرشادات عرض مباشرة للمتصفح مما يؤدي إلى الحصول على نتيجة أكثر اتساقًا ومن السهل فعل ذلك حتى عند عدم امتلاك خبرة في رموز سي اس اس وعدم امتلاك ملف منفصل لهذا الغرض. إليك مثال نقوم فيه بنقل الفقرة بأكملها نحو الجهة اليمنى:[٥]
- أدرِج الرمز التالي في قسم <head></head> من مستند اتش تي ام ال:
<style>p.indent{ padding-left: 1.8em }</style>
حيث تعرّف "p.indent" نوع فقرة (الوسم p) تسمى "indent" (يمكنك استخدام أي اسم) بينما يضيف بقية الرمز مسافة بيضاء إلى يسار هذه الفقرات. - عُد الآن إلى جسم مستند اتش تي م ال. عندما ترغب بقطع فقرة نصية، ضعها بداخل الوسوم التالية:
<p class="indent"></p> - لتعديل قدر المسافة البادئة، غيّر القيمة "1.8" في رمز سي اس اس واحتفظ بالقيمة "em" بعدها لأنها تقيس الطول وفق حجم الخط.[٦]
- أدرِج الرمز التالي في قسم <head></head> من مستند اتش تي ام ال:
طريقة 2
طريقة 2 من 2:
تنسيق النصوص الأطول
-
1استخدم نصًا مسبق التنسيق. تُعرض أي ضغطة على أزرار المسافة أو الإدخال بداخل وسوم <pre></pre> كما هي تمامًا ويمكنك استخدام ذلك لعرض أمثلة الرموز أو كتابة الشعر أو أي نص آخر من المهم فيه عرض المسافة أو فواصل الخطوط.[٧]
- أكبر سلبيات النصوص مسبقة التنسيق هي العرض، حيث أنها لا تغيّر حجمها لتناسب نافذة المستخدم على عكس رموز اتش تي ام ال العادية.[٨]
-
2أدرِج فواصل السطور. يقوم الوسم <br> بإنهاء السطر الحالي في النص، ويمكنك إدراج عدة سطور فارغة عن طريق استخدام عدة وسوم br. يمكن استخدام هذه الطريقة بواسطة متعلمي لغة اتش تي ام ال غير المتمرسين، إلا أنه لا يُنصح بفعل ذلك بعد تعلم كتابة رموز سي اس اس.
-
3حدد الفقرات النصية من خلال الوسم p. يعمل الوسم <p></p> حول النص على تحديد فقرة نصية وتقوم معظم المتصفحات بفصل الفقرات باستخدام سطر فارغ واحد، لكنك لا تستطيع ضمان الحصول على تنسيق دقيق.[٩]
أفكار مفيدة
- إن وجدت رموزًا إضافية في شفرتك عند تفقُّد مظهره النهائي، تفقّد الرموز غير الكاملة، مثل كتابة <br عوضًا عن <br>.
- تُعد رموز سي اس اس طريقة أكثر قوة تؤدي إلى نتائج أكثر توقعًا لتنسيق الصفحة، بما في ذلك إدراج مسافات في النص.
- تجنّب إدراج المسافات البيضاء بعد وسم ابتدائي أو قبل وسم ختامي مباشرة. اكتب مثلًا مقال <a>المسافات</a> وليس مثال<a> المسافات </a>.[١٠]
- المسافة غير المنقطعة ( ) من أمثلة وحدات الرموز: رموز تشير إلى رموز لا يمكنك كتابتها من خلال لوحة المفاتيح.
تحذيرات
- لن يعمل رمز اتش تي ام ال الخاص بزر Tab ↹ (	) كما تعتقد حيث أن الرمز لن يؤدي لأي شيء لأن مستند اتش تي ام ال لا يدعم المسافات العريضة.
- اكتب رموز اتش تي ام ال في محرر رموز برمجية أو ملف نصي فارغ دائمًا ولا تكتبها في برنامج معالجة نصوص. إن تحولت المسافات إلى رموز غريبة في متصفح الإنترنت، يعني ذلك على الأرجح أن السبب هو أن البيانات المخزنة في برنامج معالجة النصوص غير معدة للاستخدام على شبكة الإنترنت.
المصادر
- ↑ http://www.amp-what.com/unicode/search/space
- ↑ http://hea-www.harvard.edu/~fine/Tech/html-sentences.html
- ↑ http://hea-www.harvard.edu/~fine/Tech/html-sentences.html
- ↑ http://www.amp-what.com/unicode/search/space
- ↑ http://stackoverflow.com/questions/1571648/html-tab-space-instead-of-multiple-non-breaking-spaces-nbsp
- ↑ https://www.w3.org/WAI/GL/css2em.htm
- ↑ https://www.w3.org/TR/html401/struct/text.html#edef-PRE
- ↑ https://www.sitepoint.com/everything-need-know-html-pre-element/
- ↑ https://www.w3.org/TR/html5/grouping-content.html#the-p-element
المزيد حول هذا المقال
بلغات أخرى
English:Insert Spaces in HTML
Español:insertar espacios en HTML
Português:Inserir Espaços no HTML
Русский:вставить пробелы в HTML
Italiano:Inserire gli Spazi in HTML
Deutsch:Leerzeichen in HTML einfügen
中文:在HTML中插入空格
Bahasa Indonesia:Menyisipkan Spasi Dalam HTML
Nederlands:Spaties in HTML toevoegen
한국어:HTML에 공백 넣는 방법
Tiếng Việt:Chèn khoảng trống trong HTML
Türkçe:HTML'de Boşluk Nasıl Eklenir
تم عرض هذه الصفحة ٤٧٬٤٠٥ مرات.