حل مشکلات در انجمن آل ارورز
اضافه کردن فاصله در محتوای اچ تی ام ال (HTML)

اضافه کردن فاصله در محتوای اچ تی ام ال (HTML)

اضافه کردن فاصله در محتوای اچ تی ام ال (HTML) به همان راحتی که در نرم افزارهایی همچون مجموعه آفیس انجام می دهیم نیست. برای روشن شدن این مطلب کدی به شکل زیر را در ویرایشگر متن وارد می کنیم:

اضافه کردن فاصله در محتوای اچ تی ام ال (HTML)

همانطور که در کد فوق می بینیم محتوای داخل پاراگراف دارای یک فاصله نسبتاً زیادی است. اکنون پس از ذخیره کردن فایل خروجی آن را در مرورگر می بینیم:

اضافه کردن فاصله در محتوای اچ تی ام ال (HTML)

می بینیم که مرورگر به فاصله ای که در کد خود قرار داده بودیم اهمیتی نمی دهد. در حقیقت مرورگرها به گونه ای برنامه ریزی شده اند که پس از فاصله یا Space اول کلیه فاصله های دیگر را نادیده می گیرند. برای رفع این مشکل می بایست کد فوق را به صورت زیر بازنویسی کنیم:

اضافه کردن فاصله در محتوای اچ تی ام ال (HTML)

می بینیم که از کدی تحت عنوان ;nbsp& استفاده کرده ایم (این کد مخفف واژگان None-breaking Space است). حال مجدد مرورگر را به روز رسانی می کنیم:

اضافه کردن فاصله در محتوای اچ تی ام ال (HTML)

همانطور که در تصویر فوق می بینیم مابین حرف a و کلمه paragraph دو فاصله قرار گرفته است. برای روشن تر شدن این مطلب با ویرایش کد فوق و نوشتن ده مرتبه کد ;nbsp& مابین حرف a و کلمه پاراگراف ده فاصله قرار می دهیم:

اضافه کردن فاصله در محتوای اچ تی ام ال (HTML)

اکنون مجدد مرورگر را به روز رسانی می کنیم:

اضافه کردن فاصله در محتوای اچ تی ام ال (HTML)

به این شکل می توان بیش از یک فاصله را وارد کدهای اچ تی ام ال (HTML) کرد.
علاوه بر این روش دیگری هم برای نمایش دادن فاصله های داخل کد وجود دارد و آن هم استفاده از تگ های <pre></pre> است. برای روش شدن این مطلب کد فوق را به صورت زیر بازنویسی می کنیم:

اضافه کردن فاصله در محتوای اچ تی ام ال (HTML)

حال پس از به روز رسانی فایرفاکس خروجی زیر را مشاهده خواهیم کرد:

اضافه کردن فاصله در محتوای اچ تی ام ال (HTML)

می بینیم که فاصله مد نظر در مرورگر نمایش داده می شود. در حقیقت کاری که در کد فوق انجام داده ایم این است که کد مد نظر را داخل تگ های <pre></pre> قرار داده ایم. عبارت pre مخفف اصطلاح Preformatted Text به معنی “متن پیش از فرمت شدن” می باشد. به عبارت دیگر هر آنچه داخل این تگ قرار گیرد تحت تاثیر فرایند Parse شدن در مرورگر قرار نخواهد گرفت (برای آشنایی بیشتر با مفهوم Parse به آموزش های پیشین مراجعه نمایید).
از سوی دیگر اگر به نوع فونت در تصویر فوق توجه نمایید می بینید که نوع فونت آن هم فونت خاصی است که تحت عنوان Fixed-space font شناخته می شود. در واقع در این نوع فونت کلیه کاراکترها با یک فاصله ثابتی از یکدیگر قرار می گیرند.
یکی دیگر از کاربردهای تگ pre برای نمایش کد داخل صفحات اچ تی ام ال (HTML) است. ابتدا بدون استفاده از این تگ قصد داریم تا بخشی از کدهای اچ تی ام ال (HTML) را در یک صفحه وب به نمایش در آوریم. برای این منظور کد زیر را وارد ویرایشگر متن خود می کنیم:

اضافه کردن فاصله در محتوای اچ تی ام ال (HTML)

همانطور که در کد فوق می بینیم، داخل تگ اصلی body مجدد شروع به نوشتن حداقل کدهای مورد نیاز برای یک صفحه اچ تی ام (HTML) کرده ایم. فرض کنیم که همانند سایت نت شهر، می خواهیم در سایت خود به آموزش زبان اچ تی ام ال (HTML) بپردازیم. از این رو می خواهیم حداقل کدهای مورد نیاز برای ساخت یک صفحه اچ تی ام ال (HTML) را به کاربران سایتمان آموزش دهیم. اکنون مرورگر خود را به روز رسانی می کنیم:

اضافه کردن فاصله در محتوای اچ تی ام ال (HTML)

می بینیم که مرورگر کدها را به جای آنکه نمایش دهد، آن ها را همانند دیگر کدهای اصلی صفحه Parse کرده و چیزی روی صفحه نمایش داده نمی شود. برای رفع این مشکل می بایست کدهایی که می خواهیم روی صفحه نمایش داده شوند را داخل تگ pre قرار دهیم. برای رفع این مشکل کد فوق را به صورت زیر بازنویسی می کنیم:

اضافه کردن فاصله در محتوای اچ تی ام ال (HTML)

مرورگر را به روز رسانی می کنیم تا نتیجه را مشاهده کنیم:

اضافه کردن فاصله در محتوای اچ تی ام ال (HTML)

همانطور که می بینیم کدهای اچ تی ام ال (HTML) داخل صفحه بدون آنکه Parse شوند به نمایش در آمده اند. حال به تفسیر کد فوق می پردازیم. در حقیقت هر کدی که می خواهیم به کاربر نمایش داده شود را داخل تگ های <pre></pre> قرار می دهیم. پس به جای علامت < از کد ;lt& و به جای علامت > از کد ;gt& استفاده می کنیم.

www.allerrors.ir

پاسخی بنویسید

ایمیل شما منتشر نمی شود.