آموزش HTML5 – جلسه یازدهم

با عرض سلام خدمت شما کاربران گرامی آی وحید،

در این ساعت از ولاگ آی وحید با شما هستیم با جلسه یازدهم آموزش HTML5 که در این جلسه بیشتر به مباحثی از قبیل نمایش کدهای زبان های برنامه نویسی اشاره خواهیم داشت.

در حالت عادی HTML برای متغیر ها یعنی متن ها و… اندازه و فضای کوچکی نمایش می دهد. اما اگر بخواهیم کدهای زبان های برنامه نویسی رو نمایش بدیم کمی با استایل حالت عادی متفاوت خواهد بود.

تگ های <kbd> و <samp> و هم چنین تگ <code> برای نمایش کدهای زبان های برنامه نویسی تدارک دیده شده اند. در واقع این تگ ها برای تمامی حروف فاصله ی یکسان و هم چنین اندازه یکسان قائل می شوند.

تگ کیبورد

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

<p>To open a file, select:</p>

<p><kbd>File | Open...</kbd></p>

 تگ نمونه

در زبان برنامه نویسی HTML برای نمایش کدهای خروجی کامپیوتری از تگی با نام <samp> استفاده می شود. برای مثال:

<samp>
demo.example.com login: Apr 12 09:10:17
Linux 2.6.10-grsec+gg3+e+fhs6b+nfs+gr0501+++p3+c4a+gr2b-reslog-v6.189
</samp>

 تگ کد

در زبان برنامه نویسی HTML برای نمایش کدهای زبان های برنامه نویسی به کاربران از تگی با نام <code> استفاده می شود. برای مثال:

<code>
var person = { firstName:"John", lastName:"Doe", age:50, eyeColor:"blue" }
</code>

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

برای حل این مشکل باید کدها رو در داخل این تگ در داخل تگ دیگه با نام <pre> کدنویسی کنیم. برای روشن تر شدن موضوع به مثال زیر توجه کنید:

<p>Coding Example:</p>

<code>
<pre>
var person = {
    firstName:"John",
    lastName:"Doe",
    age:50,
    eyeColor:"blue"
}
</pre>
</code>

 تگ متغیر

در زبان برنامه نویسی HTML برای نمایش متغیر ها مثل متغیر های ریاضی از تگی با نام <var> استفاده می کنیم. اینم یه مثال:

<p>Einstein wrote:</p>

<p><var>E = m c<sup>2</sup></var></p>

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

با تشکر – آی وحید