Computer Codes در HTML

Computer Codes در HTML

آشنایی با Computer Code ها در HTML

منظور از computer code ها چیست؟

چگونه می‌توانیم کد‌هایی را در صفحات بدون خروجی گرفتن و در حالت متن منتشر کنیم تا بقیه از آنها استفاده کنند؟

چگونه می‌توانیم از کامپیوتر کد‌ها استفاده کنیم؟ منظور از تگ code چیست؟

منظور از تگ kbd چیست؟ منظور از تگ samp چیست؟

در این مقاله به تمامی این سوالات پاسخ میدیم. پس تا انتهای مقاله با ما همراه باشید.

• 1 عناصر computer code
• 2 تگ <kbd>
• 3 تگ <samp>
• 4 تگ <code>
• 5 تگ <pre>
• 6 تگ <var>

عناصر computer code

کامپیوتر کد در واقع یک فرمت یکتا و همچنین یک استایل نمایش متن برای متن های مرتبط با کد است.

عموما تگ code برای نمایش کامپیوتر کد بر روی وبسایت مورد استفاده قرار می گیرد

که در اینجا سایر کد های مرتبط با کامپیوتر کد ها شرح داده می شود.

تگ <kbd>

این تگ نمایانگر ورودی کاربر اعم از کیبورد و یا فرمان های صوتی است.

متن داخل این تگ با فونت پیشفرض mono-space نمایش داده می شود.

برای نمایش بهتر متون داخل این تگ می توان از کد های css استفاده کرد.

<p>Save the document by pressing <kbd>Ctrl + S</kbd></p>

تگ <samp>

این تگ بیانگر خروجی یک برنامه یا سیستم محاسباتی است.

مانند تگ قبل، متن داخل این تگ با فونت mono-space نمایش داده می شود.

<p>If you input wrong value, the program will return <samp>Error!</samp></p>

تگ <code>

یک تگ html که برای تعریف یک قاب برای نمایش کد های کامپیوتر استفاده می شود.

به عنوان مثال اگر وبسایت برنامه نویسی دارید، با استفاده از این تگ می توانید کد های کامپیوتری را نمایش دهید.

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

استفاده تنها از این تگ برای نمایش کد ها توصیه نمی شود چرا که فاصله های اضافه و خطوط جدید در کد ها پشتیبانی نمی شود.

برای حل این مشکل باید از تگ pre که در ادامه شرح داده شده است استفاده شود.

<code>
x = 5;
y = 6;
z = x + y;
</code>

همانطور که در نمونه مشاهده می‌کنید با تمام اینکه ما خطوط جدید در کدهایمان ایجاد کرده‌ایم،

تگ Code آن‌ها را کنار هم نمایش می‌دهد و از خطوط جدید پشتیبانی نمی‌کند.

Computer Codes در HTML

تگ <pre>

این تگ برای فرمت دهی متون جهت حفظ فاصله متون، شکستن خطوط، تب ها و سایر فرمت دهی کاراکتر هایی که توسط مرورگر ها نادیده گرفته می شوند مورد استفاده قرار می گیرد.

<pre>
<code>faraznetwork Teach Math in html :))
x = 5;
y = 6;
z = x + y;
</code>
</pre>

حالا در این مثال مشاهده می‌کنید که از فاصله ها و خطوط جدید با استفاده از تگ pre پشتیبانی شد.

Computer Codes در HTML

تگ <var>

همان طور که از نام آن پیداست، این تگ یک متغیر تعریف می کند.

معمولا این تگ برای عبارات ریاضی و یا یک متغیر در عبارات کد نویسی استفاده می شود.

Einstein wrote: <var>E</var> = <var>mc</var><sup>2</sup>.
in faraznetwork Post We learn you html with physics :))

در این نمونه نیز مشاهده می‌کنید که با استفاده از تگ var و استفاده از تگ sup تونستیم

یک عبارت ریاضی را که نمایانگر فرمول فیزیکی انرژی هستش را در صفحه منتشر کنیم.

در این مقاله با استفاده از computer code ها یا کد های کامپیوتری در  html آشنا شدیم.

به عنوان یک طراح وب گاهی پیش می‌آید که بخواهید کد‌هایتان را به صورت زنده در صفحاتتان استفاده کنید،

برای اینکار می‌توانید از تگ های معرفی شده در این مقاله استفاده کنید.

تگ pre در HTML

تگ pre چیست ؟ کاربرد تگ pre در html چیست ؟ از تگ pre در html به چه صورت استفاده می شود؟

اگر به دنبال یافتن جواب این سوال ها هستید این مقاله آموزشی را به هیچ عنوان از دست ندهید.

آموزش طراحی سایت با HTML

در بالابه معرفی تگ hr پرداختیم در این قسمت قصد داریم شما را با نحوه استفاده از تگ pre در  HTML  آشنا نماییم.

 تگ pre چیست ؟

زمانی که می‌خواهیم متن یا محتوای سایت‌مان به همان شکلی که نوشته شده است

یعنی با نظر گرفتن فاصله‌های Tab ، فاصله‌های خالی و شکست‌های خط به کاربر نمایش داده شود از تگ pre استفاده می‌نماییم .

محتوای خود را در بین تگ آغازی <pre> و تگ پایانی <pre/> قرار دهید اگر که می‌خواهید

به همان شکلی که نوشته شده است روی صفحه وب نشان داده شود .
برای درک بهتر کاربرد تگ pre در  HTML  به مثال زیر توجه کنید :

<pre>
      Text in a pre element
      is displayed in a fixed-width
      font, and it preserves
      both spaces       and
      line breaks
</pre>

کاربرد تگ pre در html

از تگ pre بیشتر برای نمایش کدهای برنامه نویسی و کامپیوتری استفاده می‌شود .

خب به پایان این جلسه آموزش اچ تی ام ال رسیدیم در جلسه آینده به معرفی مابقی تگ های قالب بندی متن در  HTML می‌پردازیم.

جهت مشاهده دوره های آموزشی بر روی این لینک کلیک نمایید.

جدیدترین اخبار مجموعه فراز نتورک را در این صفحه اجتماعی دنبال کنید.

نویسنده:راحله تبریزی