0Pricing
HTML Academy · درس

charset ومعالجة Unicode للأحرف الخاصة

استخدام UTF-8 وكيانات HTML لعرض أي حرف بصورة صحيحة

charset ومعالجة Unicode للأحرف الخاصة درس مجاني في HTML Academy على CoddyKit. هذا هو الدرس 4 من أصل 4. يمكنك قراءة الدرس كاملاً أدناه مجاناً — ثم تمرن عليه مباشرة في المتصفح باستخدام محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7. هذا الدرس جزء من مسار التعلم في HTML Academy، وتقدمك يتزامن عبر الويب وتطبيق CoddyKit. تتضمن دورة HTML Academy 4 دروس في المجموع.

تصريح charset

يجب أن يصرّح كل مستند HTML بترميز أحرفه. المعيار هو UTF-8: <meta charset="utf-8"> بوصفه أول عنصر على الإطلاق داخل <head>. ومن دونه يخمّن المتصفح الترميز، وغالبًا ما يخطئ ذلك مع النصوص غير ASCII.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Page</title>

لماذا UTF-8؟

يشفّر UTF-8 كل حرف من أحرف Unicode: كل أنظمة الكتابة وكل رمز تعبيري وكل رمز. وهو متوافق عكسيًا مع ASCII (تبقى الأحرف a-z والأرقام 0-9 ذات بايت واحد)، كما أنه الترميز المهيمن على الويب الحديث — إذ إن أكثر من 98% من الصفحات تستخدم UTF-8 بحلول عام 2024.

أهمية الموضع

يجب أن تظهر علامة charset الوصفية ضمن أول 1024 بايت من المستند — وعادةً ما تكون في السطر الأول من <head>. يستدل المتصفح على الترميز من تلك البايتات؛ وقد لا يؤثر التصريح عن charset في وقت لاحق في نتيجة الاستدلال.

احفظ الملفات بترميز UTF-8

تصرّح العلامة الوصفية بالترميز، لكن يجب أن يحفظ المحرر الملف فعليًا بهذا الترميز. تستخدم VS Code وIntelliJ وSublime ترميز UTF-8 افتراضيًا في الإصدارات الحديثة. تؤدي الملفات المحفوظة بترميز Windows-1252 أو ISO-8859-1 إلى ظهور mojibake (أحرف مشوهة) حتى مع وجود العلامة الوصفية الصحيحة.

كيانات HTML

يجب تخطي أحرف HTML الخاصة (< و> و& و") لمنع إرباك المحلل: &lt; للرمز <، و&gt; للرمز >، و&amp; للرمز &، و&quot; للرمز ". داخل قيم السمات، تكون &quot; إلزامية عند إحاطة القيمة بعلامات اقتباس مزدوجة.

مراجع الأحرف الرقمية

يمكن الإشارة إلى أي حرف من أحرف Unicode باستخدام نقطة ترميزه: &#9731; أو &#x2603; لرمز رجل الثلج (☃). استخدم ذلك عندما تكون كتابة الحرف مباشرة غير عملية (كالرموز النادرة وأحرف التحكم)، لكن فضّل حرف Unicode الحرفي عندما يدعم المحرر ذلك.

الرموز التعبيرية وأزواج الوكيل

الرموز التعبيرية أحرف Unicode تقع بعد U+FFFF، وتمثَّل بأزواج وكيلة في UTF-16 (الترميز المستخدم داخل سلاسل JavaScript). ويشفّرها UTF-8 في تسلسلات من 4 بايتات. عند ضبط charset="utf-8"، تُعرض الرموز التعبيرية بشكل أصلي من دون كيانات.

أخطاء الترميز الشائعة

يعني ظهور "Don't" بالشكل "Don’t" أن الملف يُفسَّر بترميز Latin-1 مع أنه حُفظ بترميز UTF-8. أصلح ذلك بحفظ الملف بترميز UTF-8 والتأكد من وجود <meta charset="utf-8">. لا تستخدم المتصفحات الحديثة UTF-8 افتراضيًا إلا عندما تكون العلامة الوصفية مفقودة ويبدو الملف في الوقت نفسه متوافقًا مع UTF-8.

رأس HTTP Content-Type

يمكن للخادم أيضًا التصريح عن الترميز من خلال رأس الاستجابة: Content-Type: text/html; charset=utf-8. تكون الأولوية للرأس على العلامة الوصفية، لذلك قد تتسبب الخوادم التي أُعدت بشكل غير صحيح في أخطاء ترميز حتى مع كتابة HTML بطريقة سليمة تمامًا.

التعامل مع النماذج

تُرسل النماذج باستخدام ترميز الصفحة افتراضيًا. وترسل صفحات UTF-8 بيانات النموذج بترميز UTF-8، وينبغي للخادم فك ترميزها باستخدام UTF-8. ويُعد عدم تطابق ترميز الصفحة مع فك الترميز في الخادم مصدرًا شائعًا لتشوّه مدخلات المستخدم في المواقع متعددة اللغات.

تجنب BOM

قد تبدأ ملفات UTF-8 بعلامة ترتيب البايتات (BOM، ‏0xEF 0xBB 0xBF). تتعامل معظم المتصفحات معها، لكن بعض الأدوات وشبكات CDN لا تفعل ذلك — كما قد تظهر BOM كحرف مرئي في بعض محررات النصوص. احفظ الملفات بصيغة "UTF-8 بدون BOM" لتجنب المفاجآت.

اختبار المعرفة

لماذا يجب أن تظهر ضمن أول 1024 بايت من مستند HTML؟

الملخص

صرّح عن <meta charset="utf-8"> بوصفها أول عنصر فرعي في <head>، واحفظ الملفات بترميز UTF-8. يشفّر UTF-8 كل حرف من أحرف Unicode، بما في ذلك الرموز التعبيرية وجميع أنظمة الكتابة. اهرب من الرموز < و> و& و" باستخدام الكيانات، واستخدم المراجع الرقمية للأحرف النادرة. انتبه إلى أن رأس HTTP Content-Type قد يتجاوز العلامة الوصفية، وإلى احتمال ظهور BOM كحرف مرئي في بعض الأدوات.

الأسئلة الشائعة

هل درس «charset ومعالجة Unicode للأحرف الخاصة» مجاني؟

نعم — نص درس «charset ومعالجة Unicode للأحرف الخاصة» كامل متاح مجاناً هنا على الويب. لتمرينه بشكل تفاعلي (محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7) وفتح باقي دورة HTML Academy، انتقل إلى CoddyKit PRO. تتضمن دورة HTML Academy 4 دروس في المجموع.

ماذا ستتعلم في «charset ومعالجة Unicode للأحرف الخاصة»؟

استخدام UTF-8 وكيانات HTML لعرض أي حرف بصورة صحيحة تتمرن على HTML Academy مع أكواد عملية تشغلها مباشرة في المتصفح، ومدرس ذكاء اصطناعي متاح 24/7 يجيب على أسئلتك أثناء عملك.

هل أحتاج إلى خبرة سابقة لأبدأ HTML Academy؟

لا تُشترط خبرة سابقة. HTML Academy على CoddyKit منظم للمبتدئين حتى المتقدمين، لذا يمكنك البدء من هنا أو من البداية والتقدم بسرعتك الخاصة. هذا هو الدرس 4 من أصل 4.

كم من الوقت يستغرق درس «charset ومعالجة Unicode للأحرف الخاصة»؟

معظم دروس CoddyKit تستغرق حوالي 5–10 دقائق. كل منها موجز وتفاعلي، لذا تحرز تقدماً مستمراً وتستأنف من حيث توقفت عبر الويب والتطبيق.

هل يمكنني كتابة وتشغيل أكواد في درس HTML Academy هذا؟

نعم. كل درس في HTML Academy يتضمن محرر أكواد مدمج، لذا تكتب وتشغل أكواداً حقيقية مباشرة في متصفحك وتحصل على تعليقات فورية من الذكاء الاصطناعي — بدون إعداد محلي.

جميع الدروس في هذه الدورة

  1. السمة lang وقارئات الشاشة
  2. dir=rtl للنص من اليمين إلى اليسار
  3. عنصرا bdi وbdo
  4. charset ومعالجة Unicode للأحرف الخاصة
← العودة إلى HTML Academy