فیلم آموزشی آشنایی با تگ های قالب بندی متن pre و code

تگ های فرمت بندی در html

گاهی اوقات می خواهید در کدنویسی صفحات وب، بین متن های نوشته شده با کلید space و یا enter فاصله ایجاد کنید. حتماً می دانید که مرورگر این مسئله را نادیده گرفته و تمام فاصله ها را از بین می برد و حداکثر به اندازه یک کاراکتر در متن، فاصله ایجاد می کند. همچنین گاهی نیاز دارید که برای آموزش کدنویسی به کاربران سایتتان، کدهای برنامه نویسی را در صفحات وبتان نمایش دهید. برای این کار نیاز به استفاده از یک تگ خاص دارید تا مرورگر آن ها را به عنوان کد اصلی شناسایی نکند.

در این فیلم آموزشی html شما را با این تگ ها که جزء تگ های قالب بندی متن هستند، آشنا می کنیم. لازم به یادآوری است که در دو فیلم آموزشی معرفی مفاهیم مقدماتی تگ های html و آشنایی با تگ های abbr, hr,cite, acronym در html، دیگر تگ های قالب بندی متن در html را به شما معرفی کردیم.

[hdplay id=35]

برای دانلود فیلم آموزشی و اسنیپت های آموزش مربوطه از لینک های زیر استفاده کنید :

[free_vip]
[video_download cat=’html’ url=’http://dl.onliner.ir/html-videos/pre-code.mp4′]دانلود فیلم آموزشی آشنایی با تگ های قالب بندی متن pre و code[/video_download]
[/free_vip]

دسترسی سریع :

متن فیلم آموزشی آشنایی با تگ های قالب بندی متن pre و code

معرفی تگ code

برای نمایش کدهای کامپیوتری در صفحات وب در مرورگر، از تگ code استفاده می کنیم .

[html]

<code></code>

[/html]

 

مثال :

[html]

<code><?php echo "hi";?></code><br />

<code>P {color=”red”}</code>

[/html]

 

code

معرفی تگ pre

در html با زدن کلید enter به خط بعدی نمی رود یا با space زدن فقط می توانیم یک فاصله بین متن خود ایجاد کنیم. با تگ pre می توانیم این محدودیت را برداریم.

به عنوان مثال ما این متن را داریم و می خواهیم مثل همین در صفحه وب خود قرار دهیم :

Hi dear onliner.ir users.

Welcome to our video tutorials.

Here is extra space                             for you!

کد :

[html]

<pre>

Hi dear onliner.ir users.

Welcome to our video tutorials.

Here is extra

space            

             

   for you!

</pre>

[/html]

pre

در واقع ما یک قسمت preformatted text ایجاد می کنیم تا عین محتوایی که داریم در خروجی نمایش داده شود.

دسترسی سریع :

به این صفحه رتبه دهید

2 دیدگاه دربارهٔ «فیلم آموزشی آشنایی با تگ های قالب بندی متن pre و code»

  1. سلام میشه از تگ pre به عنوان نمایش کدهای html و جاوا و غیره .. استفاده کرد

    1. سلام
      کد pre باعث می شود که بتوانیم از دکمه های Enter و Space و Tab استفاده کنیم و برای این همان کدی که نوشته اید را ببینید می توانید از تگ Code استفاده کنید

دیدگاه‌ خود را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

مشاوره رایگان
Scroll to Top