parsgreen.com
article

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

html-special-characters

شاید تا به حال پیش آمده باشد که بخواهید حرف یا کاراکتر خاصی را در صفحات وب و کدهای 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-
‚‚--
““Alt+0147-
””Alt+0148-
„„--
††Alt+0134خنجر
‡‡Alt+0135خنجر مضاعف
 …-چند نقطه
‰‰Alt+0137در هزار
‹‹Alt+0139اشاره راست
››Alt+0155اشاره چپ
♠♠-بیلچه
♣♣-کلوب
♥♥-قلب
♦♦-الماس
‾‾-خط
←←-فلش چپ
↑↑-فلش بالا
→→-فلش راست
↓↓-فلش پائین
™™Alt+0153نماد تجاری
"""-نقل قول
&&&-امپرسند
<&lt;&#60;-کوچکتر از
>&gt;&#62;-بزرگتر از
[ &#91;-قلاب
] &#93;-قلاب
&ndash;&#150;Alt+0150خط
&mdash;&#151;Alt+0151خط مضاعف
 &nbsp;&#160;Alt+0160فضای خالی
¡&iexcl;&#161;Alt+0161تعجب برعکس
¢&cent;&#162;Alt+0162سنت
£&pound;&#163;Alt+0163لیره
¤&curren;&#164;Alt+0164پول رایج
¥&yen;&#165;Alt+0165ین
¦&brvbar; یا &brkbar;&#166;Alt+0166خط شکسته
§&sect;&#167;Alt+0167علامت بخش
¨&uml; یا &die;&#168;Alt+0168ادغام
©&copy;&#169;Alt+0169کپی رایت
ª&ordf;&#170;Alt+0170اعداد ترتیبی
«&laquo;&#171;Alt+0171گیومه چپ
¬&not;&#172;Alt+0172نماد هیچ
­&shy;&#173;Alt+0173فاصله
®&reg;&#174;Alt+0174ثبت تجاری
¯&macr; یا &hibar;&#175;Alt+0175علامت صدای کشیده
°&deg;&#176;Alt+0176درجه
±&plusmn;&#177;Alt+0177جمع و تفریق
²&sup2;&#178;Alt+0178بالانویس
³&sup3;&#179;Alt+0179بالانویس
´&acute;&#180;Alt+0180صدای زیر
µ&micro;&#181;Alt+0181علامت میکرو
&para;&#182;Alt+0182پاراگراف
·&middot;&#183;Alt+0183نقطه
¸&cedil;&#184;Alt+0184صدای z برای حرف s
¹&sup1;&#185;Alt+0185بالانویس
º&ordm;&#186;Alt+0186اعداد ترتیبی
»&raquo;&#187;Alt+0187گیومه راست
¼&frac14;&#188;Alt+01881 بر روی 4
½&frac12;&#189;Alt+01891 بر روی 2
¾&frac34;&#190;Alt+01903 بر روی 4
¿&iquest;&#191;Alt+0191علامت سوال برعکس
À&Agrave;&#192;Alt+0192-
Á&Aacute;&#193;Alt+0193-
Â&Acirc;&#194;Alt+0194-
Ã&Atilde;&#195;Alt+0195-
Ä&Auml;&#196;Alt+0196-
Å&Aring;&#197;Alt+0197-
Æ&AElig;&#198;Alt+0198-
Ç&Ccedil;&#199;Alt+0199-
È&Egrave;&#200;Alt+0200-
É&Eacute;&#201;Alt+0201-
Ê&Ecirc;&#202;Alt+0202-
Ë&Euml;&#203;Alt+0203-
Ì&Igrave;&#204;Alt+0204-
Í&Iacute;&#205;Alt+0205-
Î&Icirc;&#206;Alt+0206-
Ï&Iuml;&#207;Alt+0207-
Ð&ETH;&#208;Alt+0208-
Ñ&Ntilde;&#209;Alt+0209-
Ò&Ograve;&#210;Alt+0210-
Ó&Oacute;&#211;Alt+0211-
Ô&Ocirc;&#212;Alt+0212-
Õ&Otilde;&#213;Alt+0213-
Ö&Ouml;&#214;Alt+0214-
×&times;&#215;Alt+0215علامت ضرب
Ø&Oslash;&#216;Alt+0216-
Ù&Ugrave;&#217;Alt+0217-
Ú&Uacute;&#218;Alt+0218-
Û&Ucirc;&#219;Alt+0219-
Ü&Uuml;&#220;Alt+0220-
Ý&Yacute;&#221;Alt+0221-
Þ&THORN;&#222;Alt+0222-
ß&szlig;&#223;Alt+0223-
à&agrave;&#224;Alt+0224-
á&aacute;&#225;Alt+0225-
â&acirc;&#226;Alt+0226-
ã&atilde;&#227;Alt+0227-
ä&auml;&#228;Alt+0228-
å&aring;&#229;Alt+0229-
æ&aelig;&#230;Alt+0230-
ç&ccedil;&#231;Alt+0231-
è&egrave;&#232;Alt+0232-
é&eacute;&#233;Alt+0233-
ê&ecirc;&#234;Alt+0234-
ë&euml;&#235;Alt+0235-
ì&igrave;&#236;Alt+0236-
í&iacute;&#237;Alt+0237-
î&icirc;&#238;Alt+0238-
ï&iuml;&#239;Alt+0239-
ð&eth;&#240;Alt+0240-
ñ&ntilde;&#241;Alt+0241-
ò&ograve;&#242;Alt+0242-
ó&oacute;&#243;Alt+0243-
ô&ocirc;&#244;Alt+0244-
õ&otilde;&#245;Alt+0245-
ö&ouml;&#246;Alt+0246-
÷&divide;&#247;Alt+0247علامت تقسیم
ø&oslash;&#248;Alt+0248-
ù&ugrave;&#249;Alt+0249-
ú&uacute;&#250;Alt+0250-
û&ucirc;&#251;Alt+0251-
ü&uuml;&#252;Alt+0252-
ý&yacute;&#253;Alt+0253-
þ&thorn;&#254;Alt+0254-
ÿ&yuml;&#255;Alt+0255-
نکته 1: برخی از علائم با عبارات استاندارد متشکل از حروف و اعداد و برخی نیز به وسلیه میانبرهای صفحه کلید قابل درج هستند.
نکته 2: برای درج کاراکترها توسط میانبرهای صفحه کلید، کلید Alt را نگه داشته و سپس شماره متناظر را از قسمت شماره های سمت راست به ترتیب بزنید، دقت کنید که چراغ Num Lock روشن و فعال باشد.
نکته 3: همان طور که ملاحظه می کنید، معادل کاراکترهای خاص چه به صورت حروفی و چه به صورت عددی، با علامت & شروع شده و با علامت ; بسته می شوند.
sectionدسته بندی: آموزش کاربردی » HTML
related مطالب بیشتر:
» کاربرد متاتگ refresh در صفحات وب (HTML)
» نحوه متحرک ساختن متن با تگ marquee در HTML
» آموزش نحوه قرار دادن فیلم و ویدئوهای FLV در وبلاگ و سایت
» چرا و چگونه از DOCTYPE در HTML استفاده کنیم؟
» آموزش نحوه قرار دادن آهنگ و موسیقی پس زمینه در وبلاگ و سایت
commentنظرات (۱۳ یادداشت برای این مطلب ارسال شده است)
نویسنده: مهسا
زمان: ۱۲:۰۶:۴۶ - تاریخ: ۱۳۹۱/۰۸/۲۴
سلام
چرا در صورت استفاده از این علامتها بعد از آپلود سایت اگر سورس را ببینیم این علامتها به همراه تگ <body/> به نشانه خطا قرمز نشان داده می شود؟
با تشکر
پاسخ: 
سلام
استفاده از علامت های استاندارد 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 به درستی استفاده نشده بود.
نویسنده: مهسا
زمان: ۲۳:۰۹:۳۶ - تاریخ: ۱۳۹۱/۰۸/۲۵
ممنونم
لطف کردین. خیلی بی دقتی کرده بودم
نویسنده: میلاد
زمان: ۱۱:۳۶:۳۹ - تاریخ: ۱۳۹۱/۱۲/۱۷
سلام خسته نباشید خواستم بدونم چجور میتونم تعداد صفحات وبلاگم رو افزایش بدم اگه کمکم کنید ممنون میشم.
مرسی
باتشکر.
پاسخ: 
سلام
اگر سرویس دهنده شما امکان ایجاد صفحات جانبی را دارد، می توانید در کنترل پنل به دنبال این گزینه باشید و با دنبال کردن مراحل، هر تعداد صفحات که بخواهید به وبلاگتان اضافه کنید، در کل کار چندان پیچیده و سختی نیست.
نویسنده: ایرج بهزادی
زمان: ۱۲:۰۲:۲۹ - تاریخ: ۱۳۹۱/۱۲/۲۱
عالی بود ممنون از اطلاعات کاملتون
نویسنده: مهدی
زمان: ۱۵:۰۱:۵۵ - تاریخ: ۱۳۹۲/۰۱/۰۳
سلام
این آموزش خیلی کاربردی بود و جدولی که تهیه کردین خیلی مفیده. نحوه آموزش مطالب به نظر من خیلی خوبه.
خسته نباشین
پاسخ: 
سلام
سپاس از نظر لطف شما.
نویسنده: سارا
زمان: ۲۰:۰۴:۵۴ - تاریخ: ۱۳۹۲/۰۴/۲۴
سلام
من این سایت رو دوست دارم ولی الان میخوام html 5 رو یاد بگیرم ولی نذاشتین میشه این قسمت رو هم بذارین لطفا اگه ممکنه
پاسخ: 
سلام
ممنون از نظر لطف شما، در مورد آموزش HTML 5، با توجه به اینکه هنوز آموزش های مقدماتی HTML به پایان نرسیده است، لذا این مورد در کوتاه مدت امکانپذیر نیست.
نویسنده: ندا
زمان: ۱۹:۴۱:۲۲ - تاریخ: ۱۳۹۲/۰۸/۱۵
سلام
خیلی از سایتتون استفاده کردم
دوس داشتین به وب منم بیاین
نویسنده: reza
زمان: ۱۵:۳۰:۰۹ - تاریخ: ۱۳۹۲/۱۱/۱۵
با سلام
برای تبدیل کد به کاراکتر باید چکار کرد؟
برای مثال می خواهیم کد
&#235
را به کاراکتر مورد نظرش تبدیل کنیم. باید چکار کرد؟
آیا کد php برای اینکار وجود دارد؟
با تشکر
پاسخ: 
سلام
تبدیل کد به کاراکتر در درجه اول به استاندارد کد مورد نظر بستگی دارد، نمونه:
<?php
$str = '&#235';
$convert = mb_convert_encoding($str, "ASCII", "UTF-8");
echo $convert;
?>
در این مثال کد از استاندارد ASCII به UTF-8 تبدیل شده.
نویسنده: حدیث
زمان: ۰۰:۴۳:۳۶ - تاریخ: ۱۳۹۳/۰۲/۲۰
سایت فوق العاد های است.
لطفا بقیه کلید هارو هم بزارید
مثل (²) ( پنج و شش و...) بزارید.
و بقیه کلیدها .
مرسی ممنون
پاسخ: 
برای بالانویس (SUPERSCRIPT) عدد 1 ، 2 و 3 معادل یونیکد وجود دارد:
&sup1;
&sup2;
&sup3;
برای سایر موارد باید از تگ HTML استفاده کنید:
<sub>6</sub>
نویسنده: الهام
زمان: ۱۰:۱۰:۵۴ - تاریخ: ۱۳۹۳/۰۳/۱۱
سلام
اگر کد ;para& جواب بده، خیلییییییییی ممنونم، چون خیلی گشتم تا اینجا پیداش کردم
سپاس
نویسنده: amin
زمان: ۱۱:۴۱:۴۷ - تاریخ: ۱۳۹۳/۱۲/۲۲
سلام
ببینید من میخوام تو وبلاگم کد های html بذارم که تفسیر نشه
یعنی به همون صورت تو خروجی نمایش داده بشه انگار که یه متنه
روش کارش چیه؟ چه باید کرد؟
اگر بخوام مثلا بجای علامت "<" از معادل html اون استفاده کنم خیلی خسته کننده و وقت گیر میشه
آیا روشی دیگه ای وجود نداره؟؟
پاسخ: 
سلام
اگر کدهایتان را از فایل متنی مانند Notepad کپی و مستقیما در محیط ارسال مطلب وبلاگ (در ویرایشگر) درج کنید، ویرایشگر به صورت خودکار این کار را برای شما انجام خواهد داد (اگر به سورس HTML توجه کنید، تگ ها به حالت معادل تغییر می یابند)، متاسفانه راه دیگری برای این موضوع نیست جزء اینکه از PHP استفاده یا نرم افزاری برای این مورد (اگر موجود باشد) پیدا کنید!
نویسنده: مهدی
زمان: ۲۲:۲۸:۲۹ - تاریخ: ۱۳۹۴/۰۴/۰۲
چگونه عددی را در اندیس (یا پایین نویس) قرار دهیم؟
پاسخ: 
برای این منظور باید از CSS استفاده کنید و برای تگ sub یا کلاس مربوطه، در خاصیت vertical-align مقدار sub را تنظیم کنید، مثال:
<style type="text/css">
sup{
vertical-align:sub;
color:#EF0003;
}
</style>
<p>HTML & CSS <sup>superscript text</sup></p>




more لطفا دقت کنید که یادداشت های زیر منتشر نشده و حذف خواهند شد:
- یادداشت های خارج از موضوع این مطلب.
- سوالات کلی، غیر ضروری و مشکلاتی که هیچ تلاشی برای رفع آن نکرده باشید.
- نظرات حاوی کدها و اسکریپت های خیلی طولانی (به طور مثال کد کامل قالب وبلاگ).

4 × 9
 refresh
آگهی
seonab.com
طراحی نرم افزار اندروید
رنگین کمان عکس
Ranginkamaan.com

آرشیو عکس های باکیفیت با موضوعات متنوع...