آموزش برنامه نویسی وب و مهارتهای مرتبط

شنبه ۲۲ شهریور ۱۴۰۴

Saturday, September 13, 2025 GMT +3:30

نحوه درج علامت های خاص در HTML

شاید تا به حال پیش آمده باشد که بخواهید حرف یا کاراکتر خاصی را در صفحات وب و کدهای HTML درج کنید ولی با وجود جستجو و دقت در صفحه کلید یا آزمون و خطای ترکیب کلید های مختلف، به نتیجه مورد نظر نرسیده باشید، به طور مثال علائمی مانند ©، ®، ♥، ♦، ← و... معمولا به صورت عادی در صفحه کلید دیده نمی شوند و برای درج آنها باید از ترفندهایی که در ادامه خواهیم دید استفاده نمائیم، البته این ترفندها نیز خود متکی بر ترکیب کلیدهای مختلف یا بر اساس کدهای عددی و حروفی استاندارد هستند که در ادامه با آنها بیشتر آشنا خواهیم شد.

استاندارد مرورگرهای وب

قبل از ادامه آموزش بد نیست اشاره ای داشته باشیم به استانداردهای پشتیبانی شده توسط مرورگر های وب، توضیح اینکه مرورگرها برای نمایش حروف، اعداد و علائم به شکل درست، از استانداردهای تعریف شده ای پیروی می کنند که توسط نهادهای پژوهشی و بین المللی (کنسرسیوم استاندارد کاراکترها یا Unicode Consortium) ایجاد شده اند، به طور مثال در ابتدای پیدایش وب، مرورگر ها تنها از استاندارد ISO-8859-1 که شامل حروف و اعداد انگلیسی و برخی علائم بود، استفاده می کردند (که به آن ASCII گفته می شود، ASCII استاندارد پیش فرض وب است)، اما به تدریج به جهت فراوانی و نیاز سایر زبان ها، استانداردهای تعریف شده دیگری نیز توسط مرورگرها پشتیبانی شد، از جمله ISO-8859-6 برای زبان عربی، ISO-8859-7 برای زبان یونانی و...، اما کثرت زبان های دنیا متخصصان را به فکر ایجاد استانداردی فراگیرتر به نام UTF-8 یا (Unicode Transformation Format) انداخت تا اینکه با ایجاد آن الگویی فراگیر در حوزه وب شکل گرفت، البته نسخه های دیگری نیز از استاندارد ISO و UTF وجود دارد (به طور مثال UTF-16)، ولی پایه و اساس وب دو نسخه ISO-8859-1 یا همان ASCII و استاندارد UTF-8 هستند، اکنون در چارچوب این استانداردها است که می توانیم با ترکیب حروف، علائم و اعداد، کاراکترهای ویژه ای فراتر از تگ های معمولی HTML خلق کنیم که به طور عادی در صفحه کلید کامپیوترمان دیده نمی شوند.

جدول علامت های خاص و نحوه درج آنها

در جدول زیر علامت های خاص و نحوه درج آنها قید شده است، البته به دلیل گستردگی این کاراکترها، در اینجا تنها به مواردی که جزء استاندارد ASCII هستند، اشاره می کنیم.

کاراکتر	معادل HTML - حروفی	معادل HTML - عددی	میانبر	توضیح
‘	‘	‘	Alt+0145	نقل قول
’	’	’	Alt+0146	-
‚	&sbquo;	‚	-	-
“	“	“	Alt+0147	-
”	”	”	Alt+0148	-
„	&bdquo;	„	-	-
†	&dagger;	†	Alt+0134	خنجر
‡	&Dagger;	‡	Alt+0135	خنجر مضاعف
…		…	-	چند نقطه
‰	&permil;	‰	Alt+0137	در هزار
‹	&lsaquo;	‹	Alt+0139	اشاره راست
›	&rsaquo;	›	Alt+0155	اشاره چپ
♠	&spades;	♠	-	بیلچه
♣	&clubs;	♣	-	کلوب
♥	&hearts;	♥	-	قلب
♦	&diams;	♦	-	الماس
‾	&oline;	‾	-	خط
←	←	←	-	فلش چپ
↑	↑	↑	-	فلش بالا
→	→	→	-	فلش راست
↓	↓	↓	-	فلش پائین
™	™	™	Alt+0153	نماد تجاری
"	"	"	-	نقل قول
&	&	&	-	امپرسند
<	<	<	-	کوچکتر از
>	>	>	-	بزرگتر از
[		[	-	قلاب
]		]	-	قلاب
–	–		Alt+0150	خط
—	—		Alt+0151	خط مضاعف
			Alt+0160	فضای خالی
¡	¡	¡	Alt+0161	تعجب برعکس
¢	¢	¢	Alt+0162	سنت
£	£	£	Alt+0163	لیره
¤	¤	¤	Alt+0164	پول رایج
¥	¥	¥	Alt+0165	ین
¦	¦ یا &brkbar;	¦	Alt+0166	خط شکسته
§	§	§	Alt+0167	علامت بخش
¨	¨ یا &die;	¨	Alt+0168	ادغام
©	©	©	Alt+0169	کپی رایت
ª	ª	ª	Alt+0170	اعداد ترتیبی
«	«	«	Alt+0171	گیومه چپ
¬	¬	¬	Alt+0172	نماد هیچ
			Alt+0173	فاصله
®	®	®	Alt+0174	ثبت تجاری
¯	¯ یا &hibar;	¯	Alt+0175	علامت صدای کشیده
°	°	°	Alt+0176	درجه
±	±	±	Alt+0177	جمع و تفریق
²	²	²	Alt+0178	بالانویس
³	³	³	Alt+0179	بالانویس
´	´	´	Alt+0180	صدای زیر
µ	µ	µ	Alt+0181	علامت میکرو
¶	¶	¶	Alt+0182	پاراگراف
·	·	·	Alt+0183	نقطه
¸	¸	¸	Alt+0184	صدای z برای حرف s
¹	¹	¹	Alt+0185	بالانویس
º	º	º	Alt+0186	اعداد ترتیبی
»	»	»	Alt+0187	گیومه راست
¼	¼	¼	Alt+0188	1 بر روی 4
½	½	½	Alt+0189	1 بر روی 2
¾	¾	¾	Alt+0190	3 بر روی 4
¿	¿	¿	Alt+0191	علامت سوال برعکس
À	À	À	Alt+0192	-
Á	Á	Á	Alt+0193	-
Â	Â	Â	Alt+0194	-
Ã	Ã	Ã	Alt+0195	-
Ä	Ä	Ä	Alt+0196	-
Å	Å	Å	Alt+0197	-
Æ	Æ	Æ	Alt+0198	-
Ç	Ç	Ç	Alt+0199	-
È	È	È	Alt+0200	-
É	É	É	Alt+0201	-
Ê	Ê	Ê	Alt+0202	-
Ë	Ë	Ë	Alt+0203	-
Ì	Ì	Ì	Alt+0204	-
Í	Í	Í	Alt+0205	-
Î	Î	Î	Alt+0206	-
Ï	Ï	Ï	Alt+0207	-
Ð	Ð	Ð	Alt+0208	-
Ñ	Ñ	Ñ	Alt+0209	-
Ò	Ò	Ò	Alt+0210	-
Ó	Ó	Ó	Alt+0211	-
Ô	Ô	Ô	Alt+0212	-
Õ	Õ	Õ	Alt+0213	-
Ö	Ö	Ö	Alt+0214	-
×	×	×	Alt+0215	علامت ضرب
Ø	Ø	Ø	Alt+0216	-
Ù	Ù	Ù	Alt+0217	-
Ú	Ú	Ú	Alt+0218	-
Û	Û	Û	Alt+0219	-
Ü	Ü	Ü	Alt+0220	-
Ý	Ý	Ý	Alt+0221	-
Þ	Þ	Þ	Alt+0222	-
ß	ß	ß	Alt+0223	-
à	à	à	Alt+0224	-
á	á	á	Alt+0225	-
â	â	â	Alt+0226	-
ã	ã	ã	Alt+0227	-
ä	ä	ä	Alt+0228	-
å	å	å	Alt+0229	-
æ	æ	æ	Alt+0230	-
ç	ç	ç	Alt+0231	-
è	è	è	Alt+0232	-
é	é	é	Alt+0233	-
ê	ê	ê	Alt+0234	-
ë	ë	ë	Alt+0235	-
ì	ì	ì	Alt+0236	-
í	í	í	Alt+0237	-
î	î	î	Alt+0238	-
ï	ï	ï	Alt+0239	-
ð	ð	ð	Alt+0240	-
ñ	ñ	ñ	Alt+0241	-
ò	ò	ò	Alt+0242	-
ó	ó	ó	Alt+0243	-
ô	ô	ô	Alt+0244	-
õ	õ	õ	Alt+0245	-
ö	ö	ö	Alt+0246	-
÷	÷	÷	Alt+0247	علامت تقسیم
ø	ø	ø	Alt+0248	-
ù	ù	ù	Alt+0249	-
ú	ú	ú	Alt+0250	-
û	û	û	Alt+0251	-
ü	ü	ü	Alt+0252	-
ý	ý	ý	Alt+0253	-
þ	þ	þ	Alt+0254	-
ÿ	ÿ	ÿ	Alt+0255	-

نکته 1: برخی از علائم با عبارات استاندارد متشکل از حروف و اعداد و برخی نیز به وسلیه میانبرهای صفحه کلید قابل درج هستند.
نکته 2: برای درج کاراکترها توسط میانبرهای صفحه کلید، کلید Alt را نگه داشته و سپس شماره متناظر را از قسمت شماره های سمت راست به ترتیب بزنید، دقت کنید که چراغ Num Lock روشن و فعال باشد.
نکته 3: همان طور که ملاحظه می کنید، معادل کاراکترهای خاص چه به صورت حروفی و چه به صورت عددی، با علامت & شروع شده و با علامت ; بسته می شوند.

دسته بندی: آموزش کاربردی » HTML

برچسب ها: HTML

قبلی »

« بعدی

مطالب بیشتر:
چرا و چگونه از DOCTYPE در HTML استفاده کنیم؟
چگونه در وبلاگ و سایت، لینک دانلود قرار دهیم؟
نحوه متحرک ساختن متن با تگ marquee در HTML
چگونه رنگ و تصویر پس زمینه سایت یا وبلاگ را تغییر دهیم؟
نحوه نمایش فیلم و کلیپ ویدئویی در سایت و وبلاگ

دیدگاه

۳۲ دیدگاه برای این مطلب ارسال شده است.

چینش دیدگاه ها به ترتیب از جدیدترین به قدیمی ترین است.

اکبر

۱۸:۰۳ ۱۳۹۷/۰۸/۱۹

سلام. ببخشید اینجا می پرسم سایتو گشتم پیدا نکردم.
برای ضخیم کردن تگ hr چه کدی رو باید بهش بدیم.

برای اعمال تغییرات سفارشی بر روی تگ hr می توانیم از استایل CSS استفاده کنیم، مثال:

<style>
.hr-1{
	border: 0;
	border-top: 5px solid #666;
}
.hr-2{
	height: 4px;
}
</style>
<hr class="hr-1">
<hr class="hr-2">

مهدی

۱۴:۱۶ ۱۳۹۷/۰۷/۱۲

سلام دوستان عزیز من میخوام آیکن تماس با قابلیت شماره گیری مستقیم و آیکن ایمیل و شبکه های اجتماعی رو تو یه خط‌ بیارم تو html و php چه کدی باید نوشته بشه؟

برای کنار هم قرار گرفتن افقی عناصر وب معمولا از خاصیت display با مقدار inline یا inline-block در استایل CSS استفاده می شود، باید در قسمت استایل CSS تگ های HTML خود این خاصیت را تعریف کنید.

آزاده

۱۴:۲۹ ۱۳۹۷/۰۲/۲۹

سلام
من از تگ u برای زیر خط کردن نوشته استفاده کردم اما خط زیر متن به متن میچسبه . چطور این مشکل رو رفع کنم ؟

تگ u به صورت پیش فرض در مرورگر استایل دهی و پردازش می شود، اگر نیاز به ایجاد زیر خط سفارشی دارید می توانید از CSS و تگ span استفاده کنید، مثال:

<style type="text/css">
.underline-text{
    display: inline;
	border-bottom: solid 1px #000000;
    padding-bottom: 1px;
}
</style>
<span class="underline-text">Text</span>

سیامک

۱۶:۲۷ ۱۳۹۶/۰۸/۲۲

سلام
علاوه بر اینها میتوان با کد script زیر تمام علائم html را به صورت آفلاین روی مرورگر مشاهده کرد

<script>
sta=1000
for (i=sta; i<=sta+1000; i++)
{
	document.write('&#'+i+';<div class="num">'+i+'</div><br>')
}
</script>

سپاس فراوان از به اشتراک گذاری.

مهدی

۲۲:۲۸ ۱۳۹۴/۰۴/۰۲

چگونه عددی را در اندیس (یا پایین نویس) قرار دهیم؟

برای این منظور باید از CSS استفاده کنید و برای تگ sub یا کلاس مربوطه، در خاصیت vertical-align مقدار sub را تنظیم کنید، مثال:

<style type="text/css">
sup{
    vertical-align:sub;
	color:#EF0003;
}
</style>
<p>HTML & CSS <sup>superscript text</sup></p>

amin

۱۱:۴۱ ۱۳۹۳/۱۲/۲۲

سلام
ببینید من میخوام تو وبلاگم کد های html بذارم که تفسیر نشه
یعنی به همون صورت تو خروجی نمایش داده بشه انگار که یه متنه
روش کارش چیه؟ چه باید کرد؟
اگر بخوام مثلا بجای علامت "<" از معادل html اون استفاده کنم خیلی خسته کننده و وقت گیر میشه
آیا روشی دیگه ای وجود نداره؟؟

سلام
اگر کدهایتان را از فایل متنی مانند Notepad کپی و مستقیما در محیط ارسال مطلب وبلاگ (در ویرایشگر) درج کنید، ویرایشگر به صورت خودکار این کار را برای شما انجام خواهد داد (اگر به سورس HTML توجه کنید، تگ ها به حالت معادل تغییر می یابند)، متاسفانه راه دیگری برای این موضوع نیست جزء اینکه از PHP استفاده یا نرم افزاری برای این مورد (اگر موجود باشد) پیدا کنید!

الهام

۱۰:۱۰ ۱۳۹۳/۰۳/۱۱

سلام
اگر کد ;para& جواب بده، خیلییییییییی ممنونم، چون خیلی گشتم تا اینجا پیداش کردم
سپاس

حدیث

۰۰:۴۳ ۱۳۹۳/۰۲/۲۰

سایت فوق العاد های است.
لطفا بقیه کلید هارو هم بزارید
مثل (²) ( پنج و شش و...) بزارید.
و بقیه کلیدها .
مرسی ممنون

برای بالانویس (SUPERSCRIPT) عدد 1 ، 2 و 3 معادل یونیکد وجود دارد:

&sup1;
&sup2;
&sup3;

برای سایر موارد باید از تگ HTML استفاده کنید:

<sub>6</sub>

reza

۱۵:۳۰ ۱۳۹۲/۱۱/۱۵

با سلام
برای تبدیل کد به کاراکتر باید چکار کرد؟
برای مثال می خواهیم کد

&#235

را به کاراکتر مورد نظرش تبدیل کنیم. باید چکار کرد؟
آیا کد php برای اینکار وجود دارد؟
با تشکر

سلام
تبدیل کد به کاراکتر در درجه اول به استاندارد کد مورد نظر بستگی دارد، نمونه:

<?php
$str = '&#235';
$convert = mb_convert_encoding($str, "ASCII", "UTF-8");
echo $convert;
?>

در این مثال کد از استاندارد ASCII به UTF-8 تبدیل شده.

ندا

۱۹:۴۱ ۱۳۹۲/۰۸/۱۵

سلام
خیلی از سایتتون استفاده کردم
دوس داشتین به وب منم بیاین

سارا

۲۰:۰۴ ۱۳۹۲/۰۴/۲۴

سلام
من این سایت رو دوست دارم ولی الان میخوام html 5 رو یاد بگیرم ولی نذاشتین میشه این قسمت رو هم بذارین لطفا اگه ممکنه

سلام
ممنون از نظر لطف شما، در مورد آموزش HTML 5، با توجه به اینکه هنوز آموزش های مقدماتی HTML به پایان نرسیده است، لذا این مورد در کوتاه مدت امکانپذیر نیست.

مهدی

۱۵:۰۱ ۱۳۹۲/۰۱/۰۳

سلام
این آموزش خیلی کاربردی بود و جدولی که تهیه کردین خیلی مفیده. نحوه آموزش مطالب به نظر من خیلی خوبه.
خسته نباشین

سلام
سپاس از نظر لطف شما.

ایرج بهزادی

۱۲:۰۲ ۱۳۹۱/۱۲/۲۱

عالی بود ممنون از اطلاعات کاملتون

میلاد

۱۱:۳۶ ۱۳۹۱/۱۲/۱۷

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

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

مهسا

۲۳:۰۹ ۱۳۹۱/۰۸/۲۵

ممنونم
لطف کردین. خیلی بی دقتی کرده بودم

صفحه 2 از 3

لطفا پیش از ارسال دیدگاه نکات زیر را مد نظر داشته باشید:
- به سوالات کلی، زمانبر، مبهم و مشکلاتی که تلاشی برای رفع آنها نکرده باشید پاسخ مختصر داده شده یا به بخش برنامه نویسی اختصاصی ارجاع داده می شوند.
- کدها و اسکریپت های طولانی را ترجیحا در یک صفحه وب آنلاین یا به صورت حساب موقت و آزمایشی قرار دهید تا امکان بررسی دقیق مشکل و خطایابی میسر باشد.
- تمام دیدگاه های ارسالی خوانده شده و برای هر کاربر مدت زمان لازم جهت پاسخگویی در نظر گرفته می شود، لطفا از طرح سوالات متعدد در بازه زمانی کوتاه خودداری کنید.