اضافه کردن فاصله در متن یا محتوای اچ تی ام ال (HTML) کدینگ وب به همان راحتی که در نرم افزارهایی همچون مجموعه آفیس انجام می دهیم نیست. برای روشن شدن این مطلب کدی به شکل زیر را در ویرایشگر متن وارد می کنیم:
<!DOCTYPE html> <html> <head> <title>Netshahr</title> </head> <body> <p>This is a paragraph</p> </body> </html>
همانطور که در کد فوق می بینیم محتوای داخل پاراگراف دارای یک فاصله نسبتاً زیادی است. اکنون پس از ذخیره کردن فایل خروجی آن را در مرورگر می بینیم:
می بینیم که مرورگر به فاصله ای که در کد خود قرار داده بودیم اهمیتی نمی دهد. در حقیقت مرورگرها به گونه ای برنامه ریزی شده اند که پس از فاصله یا Space اول کلیه فاصله های دیگر را نادیده می گیرند. برای رفع این مشکل می بایست کد فوق را به صورت زیر بازنویسی کنیم:
<body> <p>This is a paragraph</p> </body>
می بینیم که از کدی تحت عنوان ;nbsp& استفاده کرده ایم (این کد مخفف واژگان None-breaking Space است). حال مجدد مرورگر را به روز رسانی می کنیم:
همانطور که در تصویر فوق می بینیم مابین حرف a و کلمه paragraph دو فاصله قرار گرفته است. برای روشن تر شدن این مطلب با ویرایش کد فوق و نوشتن ده مرتبه کد ;nbsp& مابین حرف a و کلمه پاراگراف ده فاصله قرار می دهیم:
<body> <p>This is a paragraph</p> </body>
اکنون مجدد مرورگر را به روز رسانی می کنیم:
به این شکل می توان بیش از یک فاصله را وارد کدهای اچ تی ام ال (HTML) کرد.
علاوه بر این روش دیگری هم برای نمایش دادن فاصله های داخل کد وجود دارد و آن هم استفاده از تگ های <pre></pre> است. برای روش شدن این مطلب کد فوق را به صورت زیر بازنویسی می کنیم:
<body> <pre>This is a paragraph</pre> </body>
حال پس از به روز رسانی فایرفاکس خروجی زیر را مشاهده خواهیم کرد:
می بینیم که فاصله مد نظر در مرورگر نمایش داده می شود. در حقیقت کاری که در کد فوق انجام داده ایم این است که کد مد نظر را داخل تگ های <pre></pre> قرار داده ایم. عبارت pre مخفف اصطلاح Preformatted Text به معنی "متن پیش از فرمت شدن" می باشد. به عبارت دیگر هر آنچه داخل این تگ قرار گیرد تحت تاثیر فرایند Parse شدن در مرورگر قرار نخواهد گرفت (برای آشنایی بیشتر با مفهوم Parse به آموزش های پیشین مراجعه نمایید).
از سوی دیگر اگر به نوع فونت در تصویر فوق توجه نمایید می بینید که نوع فونت آن هم فونت خاصی است که تحت عنوان Fixed-space font شناخته می شود. در واقع در این نوع فونت کلیه کاراکترها با یک فاصله ثابتی از یکدیگر قرار می گیرند.
یکی دیگر از کاربردهای تگ pre برای نمایش کد داخل صفحات اچ تی ام ال (HTML) است. ابتدا بدون استفاده از این تگ قصد داریم تا بخشی از کدهای اچ تی ام ال (HTML) را در یک صفحه وب به نمایش در آوریم. برای این منظور کد زیر را وارد ویرایشگر متن خود می کنیم:
<!DOCTYPE html> <html> <head> <title>Netshahr</title> </head> <body> <html> <head> <title>This is th title</title> </head> <body> </body> </html> </body> </html>
همانطور که در کد فوق می بینیم، داخل تگ اصلی body مجدد شروع به نوشتن حداقل کدهای مورد نیاز برای یک صفحه اچ تی ام (HTML) کرده ایم. فرض کنیم که همانند سایت نت شهر، می خواهیم در سایت خود به آموزش زبان اچ تی ام ال (HTML) بپردازیم. از این رو می خواهیم حداقل کدهای مورد نیاز برای ساخت یک صفحه اچ تی ام ال (HTML) را به کاربران سایتمان آموزش دهیم. اکنون مرورگر خود را به روز رسانی می کنیم:
می بینیم که مرورگر کدها را به جای آنکه نمایش دهد، آن ها را همانند دیگر کدهای اصلی صفحه Parse کرده و چیزی روی صفحه نمایش داده نمی شود. برای رفع این مشکل می بایست کدهایی که می خواهیم روی صفحه نمایش داده شوند را داخل تگ pre قرار دهیم. برای رفع این مشکل کد فوق را به صورت زیر بازنویسی می کنیم:
<body> <pre> <html> <head> <title>This is the title</title> </head> <body> </body> </html> </pre> </body>
مرورگر را به روز رسانی می کنیم تا نتیجه را مشاهده کنیم:
همانطور که می بینیم کدهای اچ تی ام ال (HTML) داخل صفحه بدون آنکه Parse شوند به نمایش در آمده اند. حال به تفسیر کد فوق می پردازیم. در حقیقت هر کدی که می خواهیم به کاربر نمایش داده شود را داخل تگ های <pre></pre> قرار می دهیم. پس به جای علامت < از کد ;lt& و به جای علامت > از کد ;gt& استفاده می کنیم.
منبع » 
