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

منظور از computer code ها چیست؟ چگونه می‌توانیم کد‌هایی را در صفحات بدون خروجی گرفتن و در حالت متن منتشر کنیم تا بقیه از آنها استفاده کنند؟ چگونه می‌توانیم از کامپیوتر کد‌ها استفاده کنیم؟ منظور از تگ code چیست؟ منظور از تگ kbd چیست؟ منظور از تگ samp چیست؟ در این مقاله به تمامی این سوالات پاسخ میدیم. پس تا انتهای مقاله با ما همراه باشید.

عناصر 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 آن‌ها را کنار هم نمایش می‌دهد و از خطوط جدید پشتیبانی نمی‌کند.

تگ <pre>

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

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

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

در رابطه با این تگ در مقاله آشنایی با تگ Pre در HTML بیشتر بخوانید.

تگ <var>

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

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

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

پایانترم

سوال:

چند تگ مخصوص Computer Code ها نام ببرید و یک مثال از هرکدام که خودتان دوست دارید برایمان ارسال کنید.

به ایمیل کسانی که پاسخ درست و کامل رو در نظرات بگن ۱۰ هزارتومان در پنل کاربری آکادمی میزفا حسابشون شارژ میشه. (البته باید در آکادمی میزفا ثبت‌نام کنید تا بتونید از این امتیاز استفاده کنید.)

نتیجه گیری

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

اگر سوال، پیشنهاد یا انتقادی داشتین حتما بپرسید و من حتما به آن‌ها پاسخ میدم. تا مقاله بعدی…