یکشنبه ۲۷ خرداد ۱۴۰۳

Sunday, June 16, 2024 GMT +3:30

نحوه درج علامت های خاص در 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: همان طور که ملاحظه می کنید، معادل کاراکترهای خاص چه به صورت حروفی و چه به صورت عددی، با علامت & شروع شده و با علامت ; بسته می شوند.
دسته بندی: آموزش کاربردی » HTML
related مطالب بیشتر:
چگونه رنگ و تصویر پس زمینه سایت یا وبلاگ را تغییر دهیم؟
نحوه نمایش فیلم و کلیپ ویدئویی در سایت و وبلاگ
چگونه در وبلاگ و سایت، لینک دانلود قرار دهیم؟
پخش فایل صوتی (آهنگ، موسیقی پس زمینه) در سایت و وبلاگ
نمایش فیلد جستجوی گوگل در سایت یا وبلاگ
دیدگاه
more ۲۶ دیدگاه برای این مطلب ارسال شده است.
more دیدگاه جدید بر اساس تاریخ ارسال در انتهای دیدگاه های موجود نمایش داده می شود.
۱۴:۱۶ ۱۳۹۷/۰۷/۱۲
سلام دوستان عزیز من میخوام آیکن تماس با قابلیت شماره گیری مستقیم و آیکن ایمیل و شبکه های اجتماعی رو تو یه خط‌ بیارم تو html و php چه کدی باید نوشته بشه؟
برای کنار هم قرار گرفتن افقی عناصر وب معمولا از خاصیت display با مقدار inline یا inline-block در استایل CSS استفاده می شود، باید در قسمت استایل CSS تگ های 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 همچین طرحی رو بندازم میشه راهنماییم کنید (به صورت جداگانه یعنی هر کدوم توی یه صفحه)
***** *
**** **
*** ***
** ****
* *****
در صورتی که فایل تصویر گرافیکی (با فرمت jpg، png و...) این اشکال را در اختیار داشته باشید می توانید با نرم افزارهای تبدیل تصویر به اشکال متنی (در وب جستجو کنید) این کار را انجام دهید در غیر اینصورت باید به صورت دستی کاراکترها را در سورس HTML مطالب یا صفحات سایت درج کنید.
سعید سلیمانی
۲۳:۳۳ ۱۳۹۸/۰۷/۲۹
سلام ممنون از آموزش جالبتون ولی بنده هم یه ترفند خیلی ساده دارم که میشه بدون یاد گرفتن این علائم هر سیمبولی را که دوست داشته باشیم در Html مشاهده کنیم فقط کافیه اون سیمبول مورد نظر را در برنامه آفیس ورد با استفاده از تب insert>symbol درج کرده و سپس کپی کنیم داخل کدهای اچ تی ام ال و با استفاده از تگ <pre> اون رو ثبت و در مرورگرها استفاده کنیم مثلا <pre>®</pre> به همین سادگی برای کلیه سیمبولها قابل استفاده است تست کردم. لطفا منتشر کنید شاید دوستان بخوان استفاده کنن
سپاس فراوان از به اشتراک گذاری.
فرید
۱۲:۱۹ ۱۳۹۸/۱۱/۰۷
درود بشما، میخواستم بدونم مثل کلمه @، کلمه ایی ساین هم داریم؟ با تشکر
برای نماد @ (At Sign) در HTML می توانید از معادل های زیر استفاده کنید:
&#64;

&commat;
مریم
۱۷:۴۵ ۱۴۰۰/۰۲/۱۲
سلام.
من با php یه API رو فراخوانی می کنم. و اطلاعات فارسی هستن. اما به صورت
\u0627\u0633\u062a\u0627\u062f\u064a
نمایش داده میشه. چیکار کنم بشه UTF8 ؟
خیلی توی اینترنت گشتم مواردی که گفتن به کارم نیومد.
این کد کامل هست.
$curl = curl_init();
curl_setopt_array($curl, array(
CURLOPT_URL => "https:/e",
CURLOPT_RETURNTRANSFER => true,
CURLOPT_ENCODING => "",
CURLOPT_MAXREDIRS => 10,
CURLOPT_TIMEOUT => 30,
CURLOPT_HTTP_VERSION => CURL_HTTP_VERSION_1_1,
CURLOPT_CUSTOMREQUEST => "POST",
CURLOPT_SSL_VERIFYHOST => false,
CURLOPT_SSL_VERIFYPEER => false,
CURLOPT_HTTPHEADER => array(
"cache-control: no-cache",
),
));

$response = curl_exec($curl);
$err = curl_error($curl);
curl_close($curl);
echo ($response);
این شیوه کد شدن کاراکترها معمولا در نقل و انتقال داده های JSON مشاهده می شود، برای بازگردان به حالت عادی می توانیم از تابع json_decode به شکل نمونه زیر استفاده کنیم که کلمه "استادي" را در خروجی چاپ می کند:
<?php
header('Content-Type: text/html; charset="UTF-8"');
$str = '["\u0627\u0633\u062a\u0627\u062f\u064a"]';
$convert = json_decode($str, true);
//var_dump($convert);
echo $convert[0];
?>
دقت کنیم در این نمونه کد برای اینکه رشته ما به صورت فرمت JSON باشد کاراکترهای [] را اضافه کرده ایم، خروجی API احتمالا به صورت پیش فرض JSON است و نیازی نیست فرایند بالا انجام شود.
مریم
۲۲:۴۱ ۱۴۰۰/۰۲/۱۲
ممنونم خیلی عالی راهنمایی کردین.
این کد خیلی خوب بود
$convert = json_decode($str, true);
echo $convert['x'];
ابوالفضل
۰۰:۵۰ ۱۴۰۱/۰۱/۰۷
سلام استاد
یک فایل داریم که مدام اطلاعات جدیدی درونش به صورت زیر ذخیره میشود
16:24:10:516;Wr_5 => @03WD3001000052*[0D]
16:24:10:562;Rd_5 <= @03WD0050*[0D]
البته 16:24:10 رو مطمئنم زمان هستش به نظرتون این اطلاعات کد شده اسکی هست؟ مثلا
@03WD0050*[0D]
یعنی چی؟
به نظر نمی رسد رمزنگاری خاصی صورت گرفته باشد، شبیه خروجی هیچ الگوریتم آشنایی نیست، بیشتر شبیه ذخیره سازی مقادیر عددی و تاریخ به صورت خطی و خلاصه است که برای استفاده های بعدی به پارامترهای کوچکتر تجزیه می شود، اگر رمزنگاری باشد احتمالا الگوریتم آن شخصی است و به نظر بدون داشتن رمز به راحتی قابل دیکد شدن نباشد.
Atefeh Hazratzad
۰۷:۳۰ ۱۴۰۱/۰۲/۰۲
سلام وقتتون بخير
وقتي كد هاي اسكي رو تايپ مي كنم، به جاي اون علامت خاص، يه علامت سوال كه داخل لوزي هست، بهم نشون ميده، شما مي دونيد مشكل كجاست؟!
در کل این موارد به بحث تنظیم صحیح یونیکد مربوط می شود اما ریشه مشکل می تواند دلایل مختلف و راه حل های متفاوتی داشته باشد، لطفا کد را داخل یک صفحه وب درج کنید تا امکان بررسی و ارائه راه حل وجود داشته باشد.
پارسا
۲۱:۵۴ ۱۴۰۱/۰۹/۲۱
ببخشید چطور سایز هاشون و اندازه هاشون رو بزرگ تر کنیم ؟
در ساده ترین حالت می توانیم علامت را در تگ span یا p قرار دهیم و با اختصاص صفت style و خاصیت font-size اندازه نمایشی کاراکتر را کم و زیاد کنیم:
<span style="font-size: 56px;"></span>
مرتضی حسین پور
۰۶:۴۵ ۱۴۰۲/۰۳/۰۴
سلام مثلا من میخوام عبارت زندگی در کوهستان را تگ بزنم چگونه باید این کار را بکنم
ظاهرا سوالتان مرتبط با موضوع این مطلب نیست، در چه برنامه یا سرویسی قصد تگ کردن عبارت را دارید؟ با درج کاراکتر # در ابتدای عبارت معمولا امکان تگ ایجاد می شود.
more لطفا پیش از ارسال دیدگاه نکات زیر را مد نظر داشته باشید:
- به سوالات کلی، زمانبر، مبهم و مشکلاتی که تلاشی برای رفع آنها نکرده باشید پاسخ مختصر داده شده یا به بخش برنامه نویسی اختصاصی ارجاع داده می شوند.
- کدها و اسکریپت های طولانی را ترجیحا در یک صفحه وب آنلاین یا به صورت حساب موقت و آزمایشی قرار دهید تا امکان بررسی دقیق مشکل و خطایابی میسر باشد.
- تمام دیدگاه های ارسالی خوانده شده و برای هر کاربر مدت زمان لازم جهت پاسخگویی در نظر گرفته می شود، لطفا از طرح سوالات متعدد در بازه زمانی کوتاه خودداری کنید.



 refresh
10 × 10
9 × 2
20 × 20
=
آخرین دیدگاه ها
more برای دسترسی سریع به یادداشت مربوطه می توانید از لینک مطلب در کادر زیر استفاده کنید.
پرتو
سلام خوبید؟ خسته نباشید ببخشید مزاحم میشم ممنون از جوابتون راستش بعضی وقتا از بس سوالاتم زیاده روم نمیشه ازتون بپرسم مثل امشب که چیکار...
۱۴۰۳/۰۳/۱۳

پرتو
سلام خوبین؟ خسته نباشید یه سوال من منوی سمت راست قالبم نوشته هاش چسبیده به بردر باید چیکار کنم که درست شه؟ یعنی منظورم اینکه...
۱۴۰۳/۰۳/۰۹

پرتو
سلام خوبید؟ بلاکفا باز دچار مشکل شده یا فقط برای من دچار مشکل شده؟ منظورم اینکه خیلی دیر باز میشه و فقط برای فایرفاکس هم...
۱۴۰۳/۰۳/۰۱

سعیدی
سلام می تونید اینو اصلاح کنید؟ چون من با توضیحات شما یاد نگرفتم خیلی ممنون اگه یکبار اصلاح کنید واسه بعد یاد...
۱۴۰۳/۰۲/۲۲

سعیدی
دست شما درد نکنه وقتی اینطوری تغییر میدم و به class می نویسم کار نمی کنه و ارور میده
۱۴۰۳/۰۲/۲۱

سعیدی
دست شما درد نکنه خیلی خوب بود این یکی رو چطوری فراخوانی کنم؟ این واسه مناسبت هاست خیلی ممنون
۱۴۰۳/۰۲/۱۹

سعیدی
با سلام آیا می شه این تابع رو بصورت class نوشت؟ میخوام وقتی کد ملی میدم با این تابع فراخوانی بشه و شهر...
۱۴۰۳/۰۲/۱۹

پرتو
مگه شما دارین اموزشش رو؟ آدرسش رو میزارید؟ یا اگر سایتی رو میشناسید که آموزش داده باشه معرفی کنید ممنون میشم من خیلی گشتم توی...
۱۴۰۳/۰۲/۱۸

پــرتو
سلام خوبید ؟ خسته نباشید گوشی پدرم شیاومی هست ایمیلمو ثبت کردم داخلش بعد می خواستم حذفش کنم نمیشد می گفت همه داده های توی...
۱۴۰۳/۰۲/۱۶

vip
خیلی ممنونم از شما خیلی عالی شد میشه مثل تبلیغ بلاگفا باشه یعنی زیر صفحه نمایش داده بشه و صفحه رو سیاه نکنه که تا...
۱۴۰۳/۰۲/۰۵

vip
با سلام و خسته نباشید استاد چند وقت پیش این کد رو از شما گرفتم این کد خیلی خوبه و کاربر رو هم...
۱۴۰۳/۰۲/۰۴

پـــرتو
سلام خسته نباشید شرمنده مزاحم میشم یه سوال داشتم می خواستم بپرسم که چرا بلاگفا باز نمیشه برام؟ کلا هر وبلاگی که مربوط به بلاگفا...
۱۴۰۳/۰۲/۰۲
  در انتظار بررسی: ۰
 پاسخگویی به سوالات ممکن است تا ۲۴ ساعت زمان ببرد.