تنزيل المقال
تنزيل المقال
غالبًا ما يتم تجاهل المسافات المتعددة باستخدام مفتاح المسافة ومفتاحي tab والإدخال عند كتابة رمز اتش تي ام ال حيث تترجم لغة اتش تي ام ال كل هذه المسافات بأنها مسافة بيضاء بين الكلمات وتعرضها كمسافة واحدة فقط. تسمح رموز سي اس اس من ناحية أخرى بحرية أكبر في تنسيق المسافات البيضاء والمسافات بين السطور، كما تمتلك لغة اتش تي ام ال العديد من أدوات تخصيص المسافات.
الخطوات
-
أدرِج مسافة غير منقطعة. تعرض لغة اتش تي ام ال عادةً مسافة واحدة بين الكلمات بغض النظر عن عدد مرات الضغط على مفتاح المسافة ويمكنك إظهار مسافة إضافية عن طريق كتابةأو   . [١] X مصدر بحثي يؤدي ذلك إلى عرض مسافة تسمى المسافة غير المنقطعة وتظهر هذه المسافة دائمًا.
- تسمى هذه المسافة بالمسافة غير المنقطعة لأنها تمنع انقطاع الخط في موضعها وسيواجه المتصفّح صعوبة في إدراج فواصل السطور بطريقة منمقة إن أفرطت باستخدام هذه المسافة. [٢] X مصدر بحثي
-
أدرِج مسافة بيضاء بأعراض مختلفة. هناك العديد من وحدات الرموز الأخرى التي تخبر المتصفح بأن يُظهر مسافة بيضاء وقد تعرض المتصفحات المختلفة هذه المسافة بشكل مختلف، إلا أن هذا النوع من المسافة لا يؤثر على انقطاع الخط على عكس الرمز: [٣] X مصدر بحثي [٤] X مصدر بحثي
-   - يؤدي هذا الرمز إلى إدراج مسافة بعرض مسافتين عاديتين تقريبًا.
-   - تعادل هذه المسافة المسافة العادية تقريبًا.
-
أدرِج مسافة تشبه المسافة العريضة باستخدام المسافات غير المنقطعة. إدراج عدة مسافات غير منقطعة بشكل متتال أحد طرق ترك مسافة بيضاء قبل بداية الفقرة: يمكن فعل ذلك في لغة اتش تي ام ال فقط ولكن لا يُنصح بفعل ذلك إن كان بإمكانك استخدام رموز سي اس اس عوضًا عن ذلك (ستجد شرحًا لذلك في خطوة منفصلة).
- إن كنت تمتلك فقرة نصية تحتوي على ترتيب نصي معقّد، استخدم وسم الاستباق عوضًا عن ذلك.
-
ترك مسافة كبيرة قبل فقرة نصية باستخدام رموز سي اس اس. تعطي مسافات وحدود رموز سي اس اس إرشادات عرض مباشرة للمتصفح مما يؤدي إلى الحصول على نتيجة أكثر اتساقًا ومن السهل فعل ذلك حتى عند عدم امتلاك خبرة في رموز سي اس اس وعدم امتلاك ملف منفصل لهذا الغرض. إليك مثال نقوم فيه بنقل الفقرة بأكملها نحو الجهة اليمنى: [٥] X مصدر بحثي
- أدرِج الرمز التالي في قسم <head></head>
من مستند اتش تي ام ال:
<style>p.indent{ padding-left: 1.8em }</style>
حيث تعرّف "p.indent" نوع فقرة (الوسم p) تسمى "indent" (يمكنك استخدام أي اسم) بينما يضيف بقية الرمز مسافة بيضاء إلى يسار هذه الفقرات. - عُد الآن إلى جسم مستند اتش تي م ال. عندما ترغب بقطع فقرة نصية، ضعها بداخل الوسوم التالية:
<p class="indent"></p> - لتعديل قدر المسافة البادئة، غيّر القيمة "1.8" في رمز سي اس اس واحتفظ بالقيمة "em" بعدها لأنها تقيس الطول وفق حجم الخط. [٦] X مصدر بحثي
- أدرِج الرمز التالي في قسم <head></head>
من مستند اتش تي ام ال:
-
استخدم نصًا مسبق التنسيق. تُعرض أي ضغطة على أزرار المسافة أو الإدخال بداخل وسوم <pre></pre> كما هي تمامًا ويمكنك استخدام ذلك لعرض أمثلة الرموز أو كتابة الشعر أو أي نص آخر من المهم فيه عرض المسافة أو فواصل الخطوط. [٧] X مصدر بحثي
- أكبر سلبيات النصوص مسبقة التنسيق هي العرض، حيث أنها لا تغيّر حجمها لتناسب نافذة المستخدم على عكس رموز اتش تي ام ال العادية. [٨] X مصدر بحثي
-
أدرِج فواصل السطور. يقوم الوسم <br> بإنهاء السطر الحالي في النص، ويمكنك إدراج عدة سطور فارغة عن طريق استخدام عدة وسوم br. يمكن استخدام هذه الطريقة بواسطة متعلمي لغة اتش تي ام ال غير المتمرسين، إلا أنه لا يُنصح بفعل ذلك بعد تعلم كتابة رموز سي اس اس.
-
حدد الفقرات النصية من خلال الوسم p. يعمل الوسم <p></p> حول النص على تحديد فقرة نصية وتقوم معظم المتصفحات بفصل الفقرات باستخدام سطر فارغ واحد، لكنك لا تستطيع ضمان الحصول على تنسيق دقيق. [٩] X مصدر بحثي
أفكار مفيدة
- إن وجدت رموزًا إضافية في شفرتك عند تفقُّد مظهره النهائي، تفقّد الرموز غير الكاملة، مثل كتابة <br عوضًا عن <br>.
- تُعد رموز سي اس اس طريقة أكثر قوة تؤدي إلى نتائج أكثر توقعًا لتنسيق الصفحة، بما في ذلك إدراج مسافات في النص.
- تجنّب إدراج المسافات البيضاء بعد وسم ابتدائي أو قبل وسم ختامي مباشرة. اكتب مثلًا مقال <a>المسافات</a> وليس مثال<a> المسافات </a>. [١٠] X مصدر بحثي
- المسافة غير المنقطعة ( ) من أمثلة وحدات الرموز: رموز تشير إلى رموز لا يمكنك كتابتها من خلال لوحة المفاتيح.
تحذيرات
- لن يعمل رمز اتش تي ام ال الخاص بزر 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
