امتیاز دهید:

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

<!DOCTYPE html>
<html>
  
   <head>
       <title>Netshahr</title>
   </head>
  
   <body>
       <p>This is a                               paragraph</p>
   </body>
</html>

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

عدم-نمایش-فاصله-در-اسناد-اچ-تی-ام-ال

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

   <body>
       <p>This is a &nbsp;paragraph</p>
   </body>

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

اضافه-کردن-یک-فاصله-در-اسناد-اچ-تی-ام-ال

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

   <body>
       <p>This is a &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;paragraph</p>
   </body>

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

اضافه-کردن-چندین-فاصله-در-یک-سند-اچ-تی-ام-ال

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

   <body>
       <pre>This is a             paragraph</pre>
   </body>

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

تگ preدر اسناد اچ تی ام المی بینیم که فاصله مد نظر در مرورگر نمایش داده می شود. در حقیقت کاری که در کد فوق انجام داده ایم این است که کد مد نظر را داخل تگ های <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>
&lt;html&gt;              
   &lt;head&gt;
       &lt;title>This is the title&lt;/title&gt;
   &lt;/head>	              
   &lt;body&gt;
   &lt;/body&gt;
          
&lt;/html&gt;
       </pre>
   </body>

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

نمایش کدهای اچ تی ام ال داخل یک سند دیگر اچ تی ام ال

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


نظرات
نظرات
  • www.sharjik.ir :

    ممنون/ کمک بزرگی کردین


    1396/06/04 15:30:59
  • halimeh :

    اگه بخوایم تعداد زیادی فاصله بذاریم چیکار کنیم به همون تعداد  بنویسیم؟


    1396/05/24 08:25:51
  • ساناز :

    مرسی خیلی کمکم کرد

    [...]


    1396/05/07 15:10:19
  • sara :

    سلام من میخوام یه کتنی رو به صورت شعر بنویسم و وسطش عکس بذارم میشه کمکم کنید تا بتونم از چه تگی استفاده کنم؟


    1395/10/19 06:58:06
  • reza :

    واقعا ممنونم عالی بود


    1395/09/22 12:34:54
  • ایمان :

    سلام چطوری می تونم از یه فونت استفاده کنم
    این کار رو می تونم بکنم اما وقی فونت می دم مشکل همیشه گی مطرح می شه این که فوت رو فقط کسایی می تونن درست ببینن که فونت در ویندوز نصب شده باشه پس کاربرانی که فونت نصب نباشه یه فونت دیگه مثل آریال جایگزین می شه من اینو نمی خوام
    من می خوام اگه امکانش هست روش لود فونت رو مثل ghalam_1.ttf رو بگید چطوریه ممنون می شم البته اگه فونت ها رو بشه از هاست بار گزاری کرد منظورم هاست خودمه که خیلی عالی می شه شنیدم از یه هاست مرجع می شه این کارو کرد ولی نمی دونم چطوری و اینکه چه نوع فونت هایی داره
    همین دیگه فک کنم رمان شد مطلبم
    تشکر فراوان از سایت خوب و آموزندتون و اینکه دوستان اگه دوست داشتن می تونن وارد سایت ما بشن یه سایت آموزشی آموزش انیمیشنه
    اینم لینکش http://frim1.ir/


    1394/10/14 02:33:13
  • باسلام وتشکر فراوان :

    عالیییییییییییییییییییی بود.


    1394/05/28 05:37:56
  • Mehran Sanea :

    ببخشید ولی ما میتونیم که علامتهایی همچون ;lt& داخل تگ هم استفاده کنیم،پس چه نیازی به تگ داریم؟


    1393/11/09 12:58:29
  • عالییی مرسیییی


    1393/09/26 21:30:37
  • بهزاد مرادی :

    در پاسخ به اکبر

    سلام

    سوال:چرا در قسمت نوشتن کدهای اچ تی ام ال به جای "/" از ;frasl& استفاده نکردید؟

    با سپاس از آموزش های شما


    سلام
    فرق خاصی نمی کند.


    1393/08/20 05:36:54
  • اکبر :

    سلام

    سوال:چرا در قسمت نوشتن کدهای اچ تی ام ال به جای "/" از ;frasl& استفاده نکردید؟

    با سپاس از آموزش های شما


    1393/08/12 10:20:32
  • farzad_ck :

    GOOD


    1393/07/19 07:52:16