این آموزش در تاریخ ۱۴۰۲/۰۶/۲۳ آپدیت شده است.
آموزش تگ code در HTML
سلام خدمت تمامی دوستان و همراهان محترم سایت آموزشی فری لرن ، امیدوارم که حال همگیتون خوب باشه. لطفا در ادامه با آموزش تگ code در HTML با من همراه باشید.
Free-Learn
آنچه در این جلسه میخوانید :
تگ Code در HTML
تگ code خب اسمش روشه دیگه، تگی است که ما با استفاده از اون میتونیم یک تکه کد ( مثلا کد زبان HTML یا CSS و.. ) را درون یک صفحه ی وب تعریف نماییم.
برای مثال این کلمه Salam Khobi را درون تگ Code قرار داده ام، در حالت عادی این تگ شکل شمایل خاصی ندارد ولی ما با استفاده از CSS میتونیم به دلخواه به این تگ استایل بدهیم.
سوال از طرف کاربر محترم سایت، آقای صمد صفرپور :
فرق بین تگ code و تگ kbd و تگ samp در چیست ھر سه در خروجی به یک شکل دیده می شود از لحاظ معنایی چه فرقی با ھم دارند؟
پاسخ : بله خب از نظر ظاھری شبیه به ھمدیگه می باشند ولی در معنا برای مرورگرھا و موتورھای جستجوگر ( مثله گوگل ) کاملا فرق میکنند، و اتفاقا تنها هدف این تگ ها هم فقط برای درک بهتر مرورگرها و موتورهای جستجوگر می باشد.
ما به کاری ظاهر نداریم، خوده مرورگر و موتورهای جستجوگر هستن که میتونن درک کنن و بفهمن که مثلا اینجا تگ فلان استفاده شده و در فلان جا تگ بهمان.
همیشه هم گفتم بازم میگم، هر یک از تگ های HTML برای هدف و کاری ساخته شدن، مثلا برای عکس گذاشتن تو صفحه خب باید از تگ img استفاده کرد برای جدول باید از تگ table و… پس هرتگی برای کاری.
تگ code اسمش روشه دیگه، یعنی اگه من بخوام تکه کدی چیزی بزارم تو صفحه وب میتونم از این تگ استفاده کنم مهم اینه که مرورگرھا میتونن درک کنن که مثلا شما محتواتون رو درون چه تگی گذاشتید.
تگ kbd هم یعنی گذاشتن دکمه های صفحه کلید در صفحه می باشد، مثلا من میخوام به کاربر سایتم بگم دکمه F2 رو فشار بده خب اون کلمه F2 رو داخل تگ kbd قرار می دھم همین تموم شد رفت.
تگ samp هم با استفاده از آن میتونم خروجی یک برنامه کامپیوتری رو در یک صفحه وب به نمایش درآورم، مثلا میگیم این متن خروجی فلان نرم افزار هستش به همین سادگی.
Free-Learn
مثال از تگ code در HTML
در ادامه میتوانید یک مثال از این تگ را مشاهده نمایید.
مثال شماره ۱ : استفاده از تگ Code در حالت عادی ( بدون استایل )
|
1 2 3 4 5 6 |
<body> <p>Salam Khboi? Man <code>Sadegh</code> Hastam.</p> <p>Amoozesh Tag <code>code</code> Dar HTML</p> </body> |
مثال شماره ۲ : استایل دادن به تگ code با استفاده از CSS
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
<style> code{ background-color:#f2f2f2; color:#fff; font-family:Consolas; padding:3px 5px; font-weight:bold; font-size:15px; -webkit-background: linear-gradient(90deg, #e81563 0%, #ff3807 100%); background: linear-gradient(90deg, #e81563 0%, #ff3807 100%); } </style> |
Free-Learn
پشتیبانی مرورگرها
در جدول زیر میتوانید مشاهده نمایید که آیا مرورگرهای اینترنتی از تگ code در HTML پشتیبانی میکنند یا خیر.
| نام مرورگر | Chrome | Firefox | Opera | Safari | Edge |
| پشتیبانی | بله | بله | بله | بله | بله |
Free-Learn
پشتیبانی از صفات و رویدادهای عمومی
تگ code از صفات عمومی و رویدادهای عمومی در HTML پشتیبانی می کند.
Free-Learn
نکات و توضیحات
- تگ
codeدر حالت پیش فرض هیچ استایل و ظاهری ندارد، به همین خاطر بهتر است با استفاده از CSS به این تگ استایل بدهید. ( همانند مثال شماره ۲ ) - در HTML تعدادی تگ عبارتی یا ( Phrase ) داریم که این تگ ها موارد زیر می باشند : ( تگ
codeکه در این بخش باهاش آشنا شدید نیز جز همین تگ های عبارتی می باشد )
| <code> | <strong> | <em> |
| <var> | <kbd> | <samp> |
Free-Learn
دستورات CSS پیش فرض
معمولا مرورگرها تگ code را بصورت پیش فرض با دستورات CSS زیر نمایش میدهند.
|
1 2 3 |
code { font-family: monospace; } |
