آشنایی با charset ها در HTML

کار با کارکتر ست ها و انواع انکود ها

آشنایی با Charset ها
آشنایی با Charset ها

منظور از charset ها در html چیست ؟‌ چگونه صفحاتمان در HTML را با انکود عمومی تعریف کنیم؟ تفاوت انکود با کارکتر ست چیست ؟  برای نمایش صفحات HTML، مرورگر باید بداند از چه نوع کاراکتر هایی (انکود) باید استفاده کند، در این مقاله با charset ها در HTML آشنا خواهیم شد.

پادکست مقالات HTML

[box type=”note” class=”question-from-users” width=””]

توجه: این مقاله، یک مقاله تخصصی هست و برای افرادی تهیه شده است که می‌خواهند به صورت کامل در رابطه با کارکترست‌ها و انکودینگ ها بدانند و با آنها آشنا شوند.

در صورتی که تنها قصد یادگیری HTML را دارید، فقط کافیست متا تگ زیر را در صفحه HTML خود اضافه کنید.

<meta charset="UTF-8">

در این مقاله سعی شده است که به صورت خیلی ساده توضیحات داده شود، در صورتی که قسمتی برایتان گنگ بود،‌ لطفا دقیقا بخش گنگ را در نظرات بیان کنید تا بیشتر برایتان توضیح دهیم.

با احترام فراوان،‌ علی اسماعیلی

[/box]

کارکتر ست یا Charset چیست؟

در هر زبانی حروف و کارکتر های خاصی وجود دارد که برای نوشتن مورد استفاده قرار می‌گیرد. در دنیای کامپیوتری برای استفاده از حروف زبان های مختلف می‌بایست از مجموعه ای از کارکتر ها استفاده کنیم که به آن‌ها Charset هم می‌گویند.

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

انکود یا Encoding چیست؟

انکودینگ نوعی مکانسیم برای ذخیره سازی و بارگذاری کاراکتر از طریق حافظه هست. بنابر این یک کارکتر با استفاده از انکودینگ می‌تواند در هر سیستمی با طرح انکود یکسان بدون تغییر و مشکل خوانده شود.

حالا جالب اینه که بدونید، کاراکتر ست ها به صورت متفاوت انکود یا کد گذاری می‌شوند. به عنوان مثال کارکتر ست های Unicode با طرح انکود UTF-8 – UTF-16 – UTF-32 انکود می‌شوند.

ما در زبان فارسی از UTF-8 استفاده می‌کنیم، این انکود ها تفاوتشان در محدودیت حافظه هست و برای داده های بزرگ پیشنهاد می‌شود از UTF-16 به بالا استفاده شود که فضای حافظه برای داده های کوچکتر مشغول نشود.

با استفاده از UTF-8 شما می‌توانید از داده های ۸ بیت تا ۳۲ بیت استفاده کنید، ولی در UTF-16 از داده های ۱۶ بیت و ۳۲ بیت می‌توانید استفاده کنید و داده های کوچکتر صرف نظر می‌شوند.

البته که این مسائل بیشتر مربوط به آینده شما در برنامه نویسی وب می‌شود و بیشتر در علم داده مورد استفاده قرار می‌گیرد، با اینحال اطلاع داشتن خالی از لطف نیست.

تفاوت Encode با Charset

تفاوت Charset با Encode
تفاوت Charset با Encode

به طور خیلی خلاصه با توجه به تعریف کاراکتر ست ها ، مجموعه ای از کاراکتر ها هستند که می‌توانید استفاده کنید ، اما انکود ها راهی برای ذخیره شدن این کاراکتر ها در حافظه هستند.

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

انواع انکود ها

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

انکود ISO-8859-1 به صورت پیشفرض در نسخه HTML4 مورد استفاده قرار می گیرد این انکود 256 کاراکتر متفاوت را پشتیبانی می کند.

ANSI ، انکودی است که در ویندوز مورد استفاده قرار می گیرد این انکود با ISO-8859-1 یکسان است با این تفاوت که ANSI 32 کاراکتر بیشتر دارد.

به دلیل محدودیت انکود های نامبرده شده، HTML4 از انکود UTF-8 نیز پشتیبانی می کند. در نسخه HTML5 انکود پیشفرض UTF-8 است.

[box type=”note” align=”aligncenter” class=”” width=””]ناگفته نماند که انکود UTF-8 تقریبا تمام کاراکتر ها و علامت های موجود را پشتیبانی می کند.[/box]

خاصیت charset در متاتگ HTML

همانطور که در ابتدا اشاره کردیم، برای نمایش یک صفحه HTML، مرورگر باید نوع انکود صفحه را بداند.

برای شناساندن انکود به مرورگر باید از طریق تگ Meta آن را تعریف کنیم که درون تگ head قرار میگیرد.

خاصیت charset در نسخه HTML4

در نسخه چهارم HTML برای مشخص کردن charset ها از خاصیت Content استفاده می‌کردیم و به صورت پیش‌فرض از نوع ISO-8859-1 تعریف می‌شد.

<meta http-equiv="Content-Type" content="text/html;charset=ISO-8859-1">

نوع های دیگری از Charset ها نیز امکان فعال‌سازی داشتیم برای مثال در نمونه زیر به جای ISO-8859-1 از charset نوع ISO-8859-9 که علاوه بر کارکتر های لاتین ، کارکتر های Turkish هم به صفحه اضافه می‌کند، استفاده کردیم.

<meta http-equiv="Content-Type" content="text/html;charset=ISO-8859-9">

همچنین در نظر داشته باشید که HTML4 به صورت کامل از charset های نوع UTF-8 پشتیبانی می‌کند.

<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">

خاصیت charset در نسخه HTML5

در نسخه پنجم HTML دیگر برای مشخص کردن نوع کارکتر ها ما یک خاصیت جداگانه داریم که charset است.

همچنین در HTML5 به صورت پیش‌فرض نوع UTF-8 مشخص می‌شود.

<meta charset="UTF-8">

کاراکتر های ASCII

اگر رشته دانشگاهیتون مهندسی کامپیوتر بوده یا هست ، صد در صد با این انکود در درس مدار های منطقی آشنا شدید، این انکود از مقدار های 0 تا 31 و 127 برای کنترل کاراکتر ها استفاده می کند که در آن مقدار های 32 تا 126 شامل حروف، اعداد و علامت ها هستند. همچنین این انکود از مقدار بین 128 تا 255 استفاده نمی کند.

کاراکتر های ANSI

این انکود با ASCII از مقدار 0 تا 127 یکسان است. مقدار های 128 تا 159 برای این انکود اختصاصی هستند. همچنین از مقدار 160 تا 255 با انکود UTF-8 یکسان است.

کاراکتر های ISO-8859-1

مقدار های 0 تا 127 با انکود ASCII یکسان هستند و برعکس ANSI از مقدار 128 تا 159 استفاده نمی کند. مقدار های 160 تا 255 با انکود UTF-8 یکسان هستند.

برای مشاهده اطلاعات بیشتر در رابطه با نوع ISO-8859-1 می‌توانید به صفحه اختصاصی رفرنس ISO-8859-1 آن در W3schools مراجعه کنید.

کاراکتر های UTF-8

مقدار های 0 تا 127 با انکود ASCII یکسان هستند. این انکود از مقدار های 128 تا 159 استفاده نمی کند. همچنین مقدار های 160 تا 255 این انکود با ANSI و 8859-1 یکسان هستند.

کاراکتر های اختصاصی این انکود از 256 شروع می شوند و تا 10000 ادامه دارند.

[box type=”success” align=”aligncenter” class=”” width=””]توجه داشته باشید که برای استفاده از زبان فارسی می‌بایست از این انکود یعنی UTF-8 استفاده کنید.[/box]

برای مشاهده اطلاعات بیشتر در رابطه با نوع UTF-8 می‌توانید به صفحه اختصاصی رفرنس UTF-8 آن در W3schools مراجعه کنید.

پایان ترم

[box type=”info” class=”question-from-users” width=””]

تفاوت UTF-8 با ASCII در چیست؟ بهتره از کدوم استفاده کنیم؟

به ایمیل کسانی که پاسخ درست و کامل رو در نظرات بگن ۱۰ هزارتومان در پنل کاربری آکادمی میزفا حسابشون شارژ میشه. (البته باید در آکادمی میزفا ثبت‌نام کنید تا بتونید از این امتیاز استفاده کنید.)

[/box]

نتیجه گیری

در این مقاله به صورت کامل با charset ها آشنا شدیم. اگر می‌خواهید لیست کلی کاراکتر ست ها ( Character Sets ) را مشاهده کنید، می‌توانید بخش HTML Character Sets را در وب سایت W3Schools دنبال کنید.

این مقاله هم به پایان رسید، متوجه شدیم که انکود کاراکتر هامون رو با charset ها مشخص می‌کنیم. امیدوارم از این مقاله استفاده لازم را برده باشید. در صورتی که سوال ، پیشنهاد یا انتقادی داشتید حتما برامون بنویسید. مطمئنا در اولین فرصت پاسخگوتون خواهم بود.

تا مقاله بعد…

فیلم آموزشی asp.net core 2

علی اسماعیلی
درباره خودم گفتن یا نوشتن کار آسونی نیست. باید تو کم‌ترین حجم مهم‌ترین اطلاعات رو بنویسی. وقتی که اولین بار دستم به کیبورد خورد، ۶ سالم بود. حس جالبی بود؛ زندگیم شده بود ۴ تا کلید WASD روی کیبورد کامپیوتر برای کنترل ماشین. از ۱۰ سالگی که مادرم با فوتوشاپ کار می‌کرد کنارش نشستم و یاد گرفتم. ۱۳ سالم بود که اولین وب‌سایتم رو با پی اچ پی نیوک ایجاد کردم. تا الان وب سایت‌های زیادی رو شروع کردم و شاید به خاطر اینکه هدف تجربه کردن رو داشتم شکست خوردند. موفق‌ترین پروژه شکست خوردم رو می‌تونم اوکسو معرفی کنم که شاید اسمش رو شنیده باشید. الانم دارم کار‌هایی رو شروع می‌کنم چون با خودم عهد کرده بودم که تا بیست سالگی جاهای مختلفی کار کنم و تجربه کنم و بعد از تجربیاتم استفاده کنم. بعد از رسیدن به بیست سالگی خوشحالم که یکی از تجربیات خوبم همکاری با میزفاست و دارم ادامش میدم…
سرفصل های آموزش HTML
پایین سرفصل های HTML هست، روی منم کلیک کنی میتونی ببینی.
فصل ۸ – کار با جدول در HTML

روی فصل بالا کلیک کنید.

ازمون HTML شرکت کن

روی لینک بالا کلیک کن

فیلم آموزشی asp.net core 2

13 نظر

13 پاسخ

  1. جواب سوال:
    ASCII اولین انکود استاندارد بوده و شامل 128 حرف مختلف شامل اعداد و حروف انگلیسی و برخی کارکترهای خاص است
    UTF-8 تقریبا تمام کاراکتر ها و علامت های موجود را پشتیبانی می کند و برای استفاده از زبان فارسی باید از این انکود استفاده کرد
    و به همین جهت بهتره از utf-8 استفاده کنیم

  2. اون 10 هزارتومان آخری که گفتین شارژ کنین
    کل آموزش و کارتونو زیر سئوال بود
    کاش یه متخصص ui و UX تو شرکت شما بود

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

  3. انکود ASCII اولین انکود استاندارد کاراکتر بود فقط اعداد حروف انگلیسی وبعضی از کارکتر های خاص است
    انکود UTF-8 تقریبا تمام کاراکتر ها و علامت های موجود را پشتیبانی می کندوبرای زبان فارسی هم مناسبه

  4. با سلام مقاله کاملی بود اما یزره گنگ بود و بهتره ،بهتر توضیح دهید تا شخص مبتدی کامل متوجه بشود نه این مقاله تمامی مقاله با تشکر از سایت خوبتون.

    1. سلام محمد عزیز.
      سعی شده نهایت سادگی در این مقاله درج بشه و بارها توسط همکارم علی عزیز ویرایش شده و به زودی صوت هم میذاریم.
      با این حال وقتی مبحثی برای خود من تازگی داره و گنگ هست شاید ۱۰ بار میخونم تا از گنگی در بیاد و این روش رو هم به شما پیشنهاد میکنم.
      ممنونم از حضورت.

  5. سلاام بله آقا وحید کاملا درست گفتند
    مقاله اصلا اصلا واضح نبود برای ی نفر مبدتی
    ها ی جوری اولش نوشتید انکد چیست و اینا من به شخصه فکر‌ کردم همه چی‌رو توضیح میدید‌مقاله از لحاظ معنایی برای خیلی کوتاه بود و از لحاظ حرفه ای ها خیلی دراز بود آخه طرف بیاد یاد بگیرخ خب خودشم گفتخ یاد گیری
    طرف اینارو از کجا بدونه؟!

    همش گفتید کاراکتر کاراکتر
    من هیچی نفهمیدم

    1. سلام کیوان جان، مقاله بروزرسانی شد. ممنون از پیگیری های شما.

  6. به نظر من اصلا مقاله ی مفیدی نبود و اینطور نیست که در انتهای مقاله کاملا با charset ها آشنا شده باشیم. توضیحات اصلا واضح و از پایه نبود. شاید برای کسی مفید باشد که خودش با این مفهوم آشنایی دارد ولی برای من که میخواستم تازه یاد بگیرم اصلا جالب نبود و هیچ بهره ای نبردم.

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

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

نشانی ایمیل شما منتشر نخواهد شد.

حداکثر حجم فایل برای آپلود: 1 مگابایت. فایل‌های مجاز برای آپلود: عکس, ویس, ویدیو, ورد یا پی دی اف, فایل متنی, زیپ. شما می‌تونید برای بهتر پرسیدن سوالتون، عکس یا ویس یا حتی فیلم در بخش نظرات میزفا آپلود کنید. برای ضبط ویس می‌تونید از خود واتس آپ استفاده کنید و بعد اینجا آپلود کنید و برای ارسال عکس هم کافی هست اسکرین شات بگیرید. Drop file here

با موفقیت ثبت شد، میزفا از شما برای عضویت در خبرنامه هفتگی تشکر میکند.

عضویت در خبرنامه هفتگی برای دریافت:

  • فیلم و مقاله رایگان سئو
  • آموزش‌های UX ، GA و GTM
  • مقاله های تخصصی ASP.NET Core
  • اطلاع رسانی از محصولات
فیلم آموزشی asp.net core 2
ترک میزفا خوب نیست!
معرفی جامع‌ترین ابزار سئو در ایران
بالای ۱۰ هزار عضو
PHZpZGVvIHdpZHRoPSI2MDAiIGhlaWdodD0iMzUwIiBwb3N0ZXI9Imh0dHBzOi8vbWl6ZmEuY29tL2Jsb2cvd3AtY29udGVudC91cGxvYWRzLzIwMjMvMDUvcG9zdGVyLW1pemZhLXRvb2xzLXZpZGVvLW1pbi5wbmciIGNvbnRyb2xzIHByZWxvYWQ9Im5vbmUiPiANCiAgIDxzb3VyY2Ugc3JjPSJodHRwczovL21pemZhLmNvbS9ibG9nL3dwLWNvbnRlbnQvdXBsb2Fkcy8yMDIzLzA1L21pemZhX3Rvb2xzXzcyMHAubXA0IiB0eXBlPSJ2aWRlby9tcDQiPg0KPC92aWRlbz4=