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

آشنایی با 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>
آشنایی با تگ kbd
آشنایی با تگ kbd

تگ <samp>

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

<p>If you input wrong value, the program will return <samp>Error!</samp></p>
آشنایی با تگ Samp
آشنایی با تگ Samp

تگ <code>

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

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

<code>
x = 5;
y = 6;
z = x + y;
</code>
نمونه تگ با تگ Code
نمونه تگ با تگ Code

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

تگ <pre>

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

<pre>
<code>Mizfa Teach Math in HTML :))
x = 5;
y = 6;
z = x + y;
</code>
</pre>
نمونه تگ با تگ Pre
نمونه تگ با تگ 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 در html
تگ var در html

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

نتیجه گیری

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

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

برچسب ها

علی اسمعیلی

درباره خودم گفتن یا نوشتن کار آسونی نیست. باید تو کم‌ترین حجم مهم‌ترین اطلاعات رو بنویسی. وقتی که اولین بار دستم به کیبورد خورد، ۶ سالم بود. حس جالبی بود؛ زندگیم شده بود ۴ تا کلید WASD روی کیبورد کامپیوتر برای کنترل ماشین. از ۱۰ سالگی که مادرم با فوتوشاپ کار می‌کرد کنارش نشستم و یاد گرفتم. ۱۳ سالم بود که اولین وب‌سایتم رو با پی اچ پی نیوک ایجاد کردم. تا الان وب سایت‌های زیادی رو شروع کردم و شاید به خاطر اینکه هدف تجربه کردن رو داشتم شکست خوردند. موفق‌ترین پروژه شکست خوردم رو می‌تونم اوکسو معرفی کنم که شاید اسمش رو شنیده باشید. الانم دارم کار‌هایی رو شروع می‌کنم چون با خودم عهد کرده بودم که تا بیست سالگی جاهای مختلفی کار کنم و تجربه کنم و بعد از تجربیاتم استفاده کنم. بعد از رسیدن به بیست سالگی خوشحالم که یکی از تجربیات خوبم همکاری با میزفاست و دارم ادامش میدم...

نوشته های مشابه

پاسخی بگذارید

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


حداکثر حجم فایل برای آپلود: 1 MB.
فایل‌های مجاز برای آپلود: عکس, ویس, ویدیو, ورد یا پی دی اف, فایل متنی, زیپ.
شما می‌تونید برای بهتر پرسیدن سوالتون، عکس یا ویس یا حتی فیلم در بخش نظرات میزفا آپلود کنید. برای ضبط ویس می‌تونید از خود واتس آپ استفاده کنید و بعد اینجا آپلود کنید و برای ارسال عکس هم کافی هست اسکرین شات بگیرید.

دکمه بازگشت به بالا
Share via
سایت خود را در گوگل مدیریت کنید + ۱۵ ساعت فیلم آموزشیجزئیات بیشتر اینجا کلیک کنید
بستن
با موفقیت ثبت شد، میزفا از شما برای عضویت در خبرنامه هفتگی تشکر میکند.

عضویت در خبرنامه هفتگی برای دریافت:

  • فیلم و مقاله رایگان سئو
  • آموزش‌های UX ، GA و GTM
  • مقاله های تخصصی ASP.NET Core
  • اطلاع رسانی از محصولات
ترک میزفا خوب نیست!
دوره سئو، رایگان شد.
فرصتی رایگان برای یادگیری
کاراکتر اشاره گر
دوره سئو، رایگان شد.
فرصتی رایگان برای یادگیری
کاراکتر اشاره گر