نحوه درج علامت های خاص در 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
نمایش فیلد جستجوی گوگل در سایت یا وبلاگ

دیدگاه

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

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

مهسا

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

با تشکر
این هم سورس

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>عنوان صفحه</title>
<!--[if IE 7]>
<link href="css/ie7.css" rel="stylesheet" type="text/css"/>
<![endif]-->
<link href="css/style.css" rel="stylesheet" type="text/css" />
<link rel="Shortcut Icon" href="images/favicon.ico" type="image/x-icon" />
</head>
<body>
<div id="container">
<div id="head">
<div id="banner"></div>
<div id="top-menu">
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="#">Product</a>
<ul class="sub-menu">
<li><a href="Hair Dryer.html">Hair Dryer</a></li>
<li><a href="Hair styler.html">Hair Styler</a></li>
<li><a href="Hair Straightener.html">Hair Straightener</a></li>
<li><a href="Epilator.html">Epilator</a></li>
<li><a href="Shaver.html">Shaver</a></li>
</ul>
</li>
<li><a href="about us.html">About us</a></li>
<li><a href="contact us.html">Contact us</a></li>
</ul>
<div class="clear"></div>
</div>
</div>
<div id="main">
<div id="content">
<div id="o-product"><img src="images/b-product/214.jpg" alt="BE-214" /></div>
<div id="content-product">
<div id="product-text">
<table class="product-pic-tb" >
<tr>
<td class="topic-name-tb"><h1>SANCY BE - 214</h1></td></tr>
<tr>
<td width="574" class="product-propertie">
<ul> <li>Three different plates for straight , large wave and tight wave function</li>
<li>180&deg;C styling temperature for long lasting results</li>
<li> Black ceramic coated plates for ultra-smooth gliding</li>
<li> 360&deg; swivel cord for tangle-free use</li>
<li>Stylish design , easy to use</li>
<li>Handle lock system for easy storage</li>
</ul>
<p>&nbsp;</p>
</td>
<td width="210" valign="top" ><img src="images/b-product/214-plates.jpg" alt="214-plates" width="190" height="129" align="right" /></td>
</tr>
</table>
</div>
<div id="content-product-pic">
<img src="images/b-product/214-piece1.jpg" class="content-pic" alt="214-piece1" /><img src="images/b-product/214-piece2.jpg" class="content-pic" alt="214-piece2" /><img src="images/b-product/214-piece3.jpg" class="content-pic" alt="214-piece3" /><img src="images/b-product/214-piece4.jpg" class="content-pic" alt="214-piece4" /><img src="images/b-product/214-color.gif" class="content-pic" alt="214-color" /> </div>
<div id="tech-propertie"><img src="images/b-product/propertie214.jpg" alt="properties214" /></div>
<table class="link-prev">
<tr>
<td align="center"><a href="Hair styler.html">Hair Styler </a>><a href="BE-214.html"> BE-214</a> | <a href="BE-206.html">BE-206</a> | <a href="BE-300.html">BE-300</a></td>
</tr>
</table>
</div>
</div>
<div id="footer"></div>
</div>
</div>
</body>
</html>

سلام
غیر معتبر بودن کد شما ارتباطی به استفاده از علامت های خاص ندارد، اشتباهاتی در صفحه وجود داشت که تصحیح شد، به طور مثال عنوان صفحه یا تگ title در کد وجود نداشت، یک بلاک div برای بستن بلاک container باید به کد اضافه می شد، تگ های ul به درستی استفاده نشده بود.

مهسا

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

سلام
چرا در صورت استفاده از این علامتها بعد از آپلود سایت اگر سورس را ببینیم این علامتها به همراه تگ <body/> به نشانه خطا قرمز نشان داده می شود؟
با تشکر

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

نخست

قبلی

بعدی

آخر

صفحه 3 از 3

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