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