کدهای کامپیوتری در HTML
[vc_row][vc_column][vc_column_text]
آموزش کد کامپیوتری در HTML به زبان ساده
با عرض سلام خدمت کاربران سایت آپ وب. در آموزشهایی که تا کنون در دوره html ارائه کردیم، با مباحث مهمی از جمله ویژگی Responsive در html ، آشنا شدید. در ادامه این آموزشها ، و در این بخش قصد داریم به بحث نمایش کدهای کامپیوتری در html ، بپردازیم.
برای نمایش کد در html و دستورات ، تگ هایی تعریف شده است که هر کدام در مواردی خاصی کاربرد دارد.
این تگ ها بیشتر برای وارد کردن محتوای دستوری ، علمی و آموزشی که شامل فرمول های ریاضی و … هستند بکار می رود.
در ادامه این بخش به موضوع نمایش کدهای کامپیوتر در html ، می پردازیم.
نمایش کدهای کامپیوتری در html
برای نمایش کدهای ساده مانند جمع و تفریق و… می توانید از تگ <code> استفاده کنید.
|
1 2 3 4 5 |
<code> x = 5; y = 6; z = x + y; </code> |
خروجی:
[/vc_column_text][vc_separator color=”white”][vc_column_text]
تگ <kbd>
برای نمایش ورودی های کاربر، ورودی صفحه کلید، فرمان صوتی و … استفاده می شود.
از این تگ برای نمایش کلید های ترکیبی صفحه کلید استفاده می شود.
مثال:
تعدادی متن را به عنوان ورودی صفحه کلید در یک سند تعریف کنید
|
1 |
<p>Save the document by pressing <kbd>Ctrl + S</kbd></p> |
خروجی:
[/vc_column_text][vc_separator color=”white”][vc_column_text]
تگ <samp> در HTML برای خروجی برنامه
تگ <samp> برای تعریف خروجی نمونه از یک برنامه کامپیوتری استفاده می شود.
|
1 2 |
<p>Message from my computer:</p> <p><samp>File not found.<br>Press F1 to continue</samp></p> |
خروجی:
[/vc_column_text][vc_separator color=”white”][vc_column_text]
استفاده از <code> در HTML
تگ <code> یک قطعه کد کامپیوتر را تعریف می کند.
متنی که توسط برچسب های <code> احاطه شده است معمولا در فونت یکپارچه پیش فرض مرورگر نمایش داده می شود:
|
1 2 3 4 5 |
<code> x = 5; y = 6; z = x + y; </code> |
خروجی:
[/vc_column_text][vc_separator color=”white”][vc_message color=”alert-warning” message_box_color=”alert-warning” icon_type=”pixelicons” icon_pixelicons=”vc_pixel_icon vc_pixel_icon-alert”]توجه داشته باشید که عنصر <code> فضای خالی فضای اضافی و خط فاصله را حفظ نمی کند.[/vc_message][vc_separator color=”white”][vc_column_text]برای رفع این، شما می توانید تگ <code> را داخل تگ <pre> قرار دهید:
|
1 2 3 4 5 6 7 |
<pre> <code> x = 5; y = 6; z = x + y; </code> </pre> |
خروجی:
[/vc_column_text][vc_separator color=”white”][vc_column_text]
توابع و فرمول ها
از تگ <var> نیز برای نمایش تابع و فرمول ها،برای تعریف یک متغیر در برنامه نویسی یا در یک عبارت ریاضی استفاده می شود.
|
1 |
Einstein wrote: <var>E</var> = <var>mc</var><sup>2</sup>.</p> |
خروجی:
| تگ | توضیحات |
|---|---|
| <code> | کدهای برنامه نویسی را مشخص می کند. |
| <kbd> | ورودی صفحه کلید را مشخص می کند. |
| <samp> | خروجی کامپیوتری را مشخص می کند. |
| <var> | برای تعریف متغیر کاربرد دارد. |
| <pre> | متن را به همان شکلی که تایپ شده نمایش می دهد. |
کلام آخر
در محتواهای علمی و خصوصا آموزشی در صفحات وب گاها از کدهای برنامه نویسی ، کامپیوتری و … استفاده می شود که برای درج کدهای کامپیوتری در html نیاز است که با استفاه از تگ های خاصی که در مباحث فوق به آن اشاره کردیم این کدها را تعریف کنید.
امیدواریم این آموزش برایتان مفید واقع شده باشد.
[/vc_column_text][/vc_column][/vc_row]
