کد کامپیوتر در HTML
آموزشها و مستندها اغلب فرمان، نام ویژگی و اسنیپت HTML نشان میدهند. اگر همان متن را در پاراگراف عادی بچسبانید، مرورگر ممکن است فاصلهها را جمع کند و < را شروع تگ واقعی بداند. HTML عنصرهایی برای متن کامپیوتری دارد تا مثالها خوانا و امن بمانند.
عنصرهای کد کامپیوتر چیستند؟
این عنصرها متنی را علامت میزنند که نمایندهٔ کد، ورودی صفحه کلید یا خروجی برنامه است — نه نثر عادی. به مرورگر کمک میکنند فونت مناسب پیشفرض بگزیند (اغلب monospace برای code و pre) و به ابزار کمکی میگویند این بازه مرتبط با کامپیوتر است. نویسهها را خودتان مینویسید؛ تگها معنا میگذارند و با pre چیدمان را حفظ میکنند.
پاسخ مستقیم
برای اسنیپت کوتاه داخل جمله از code استفاده کنید. وقتی فاصله و شکست خط باید بماند از pre استفاده کنید. الگوی رایج بلوک <pre><code>...</code></pre> است. ورودی کلید را با kbd و خروجی نمونهٔ برنامه را با samp علامت بزنید وقتی آن نقشها واقعیاند. وقتی خود مثال HTML است، بهجای < و > خام بنویسید < و > تا مرورگر تصادفی عنصر زنده نسازد.
عنصرها در یک نگاه
📊 عنصرهای متن کامپیوتری
| عنصر | نقش | کاربرد رایج |
|---|---|---|
| code | متن کوتاه کامپیوتری | نام ویژگی، فرمان درونخطی |
| pre | بلوک پیشقالببندیشده | حفظ تورفتگی و شکست خط |
| kbd | ورودی صفحه کلید | نام کلید مثل Ctrl یا Enter |
| samp | خروجی نمونه | خروجی ترمینال یا برنامه |
کد درونخطی
وقتی توکن کوتاهی را داخل جمله میآورید، در code بپیچید. واژه از نظر دید متمایز میماند بدون اینکه کل بلوک اجباری شود.
کد درونخطی
html<p>Use the <code>color</code> property to style text.</p>خواندن نمونه
- جمله متن عادی پاراگراف است
- فقط نام ویژگی داخل
codeاست - خواننده سریع توکن فنی را پیدا میکند
- این فهرست چندخطی نیست — برای آن از
preاستفاده کنید
بلوک با pre و code
pre یعنی پیشقالببندیشده: فاصله و شکست خط تقریباً همانطور که تایپ کردهاید میماند. تودرتو کردن code داخل pre الگوی روشن برای بلوک کد است. در مثالهای HTML، براکتهای زاویهای را encode کنید.
pre با code
html<pre><code><p>Hello</p>
<p>World</p>چرا encoding مهم است
اگر داخل صفحهٔ آموزش یک <p> خام بنویسید، مرورگر ممکن است پاراگراف واقعی بسازد بهجای اینکه نویسههای <p> را نشان دهد. encode بهصورت <p> مثال را امن نمایش میدهد. جلسهٔ Entities روی ارجاع نویسه عمیقتر میرود؛ اینجا فقط عادت براکت در دموی HTML را لازم دارید.
ورودی صفحه کلید و خروجی نمونه
وقتی کلیدهایی را که کاربر میفشارد توصیف میکنید از kbd استفاده کنید. وقتی خروجی نمونهٔ برنامه یا فرمان را نشان میدهید از samp استفاده کنید. صادق بمانید — واژههای عادی را فقط برای ظاهر monospace با kbd علامت نزنید.
kbd و samp
html<p>Press <kbd>Ctrl</kbd> + <kbd>S</kbd> to save.</p>
<p>Output: <samp>Saved successfully.</samp></p>تمرین در ویرایشگر
- جملهای بنویسید که ویژگی
font-sizeرا داخلcodeبیاورد. - یک بلوک
pre+codeبا دو خط کوتاه HTML با<و>اضافه کنید. - یک خط راهنما با
kbdبرای میانبر ذخیره بگذارید. - اختیاری: یک خط
sampبرای خروجی فرمان ساختگی. - ذخیره کنید و باز کنید — فاصله داخل
preو نمایش تگهای encodeشده را تأیید کنید. - موقتاً یک
<div>خام بدون encode در بلوک بچسبانید، تازه کنید، مشکل را ببینید، بعد encode کنید.
اشتباهاتی که مثال را خراب میکنند
- گذاشتن کد چندخطی فقط در
codeبدونpre— شکست خط و تورفتگی ممکن است جمع شود - چسباندن
<div>یا<p>خام بدون encode — عنصر زنده میشود - استفاده از
preبرای مقالههای بلند نثر عادی (برای متن کامپیوتری پیشقالببندیشده است، نه انشا) - علامتزدن هر واژهٔ فنی با
kbdوقتی ورودی صفحه کلید نیست - فراموش کردن بستن
preیاcodeتا متن بعدی در استایل پیشقالببندیشده بماند
خلاصه
codeمتن کوتاه کامپیوتری درونخطی را علامت میزندpreفاصله و شکست خط را برای بلوک نگه میدارد- ترکیب
preوcodeالگوی رایج چندخطی است - در مثال HTML نویسههای
<و>را بهصورت<و>encode کنید kbdوsampورودی کلید و خروجی نمونه را وقتی نقششان جور است پوشش میدهند- عنصر را از معنای متن انتخاب کنید، نه فقط از ظاهر فونت پیشفرض
🧠 دانش خود را بیازمایید
دانش خود را بیازمایید
خود را با این آزمون تعاملی به چالش بکشید و ببینید موضوع را چقدر خوب درک کردهاید
📝 دستورالعملها
- هر سوال را با دقت بخوانید
- بهترین پاسخ را برای هر سوال انتخاب کنید
- میتوانید آزمون را هر چند بار که میخواهید تکرار کنید
- پیشرفت شما در بالا نمایش داده میشود