10 – الترميز (UTF-8) في HTML – الأساسية للصفحة – المستوى الاول

📌 الترميز (UTF-8) في HTML

🔹 ما هو الترميز (Character Encoding)؟

  • أي نص بتكتبه في ملف HTML (حروف، أرقام، رموز) لازم يتم تخزينه على شكل أرقام (Bits & Bytes) داخل الكمبيوتر.

  • الترميز هو النظام اللي بيحوّل الأحرف → أرقام والعكس.

  • بدون الترميز الصحيح، المتصفح ممكن يعرض النصوص بشكل غير مفهوم (رموز غريبة �؟؟).


🔹 ما هو UTF-8؟

  • UTF-8 اختصار لـ: Unicode Transformation Format – 8-bit

  • هو أشهر نظام ترميز للأحرف في العالم.

  • يقدر يمثل أي حرف من جميع لغات العالم (العربية، الإنجليزية، الصينية، الروسية…).

  • مرن جدًا لأنه يستخدم من 1 إلى 4 Bytes لكل حرف حسب الحاجة.

📌 مثال:

  • الحرف A = 1 Byte فقط.

  • الحرف م (عربي) = 2 Bytes.

  • الرموز التعبيرية (Emoji 😀🔥) = 4 Bytes.


🔹 لماذا نستخدم UTF-8؟

  1. يدعم كل اللغات → تقدر تكتب عربي + إنجليزي + رموز في نفس الصفحة.

  2. موحّد عالميًا → نفس الكود يشتغل في أي متصفح أو نظام تشغيل.

  3. مفيد للـ SEO → محركات البحث تفضل الصفحات ذات الترميز الموحد.

  4. يتجنب المشاكل → يمنع ظهور الأحرف مشوهة أو “مربعات”.


🔹 كيفية تحديد الترميز في HTML

في بداية الصفحة داخل <head> نكتب:

<span class="hljs-tag"><<span class="hljs-name">meta</span></span> <span class="hljs-attr">charset</span>=<span class="hljs-string">"UTF-8"</span>>
  • هذا السطر يخبر المتصفح: “اقرأ جميع النصوص باستخدام نظام UTF-8”.


🔹 مثال عملي

✅ النتيجة: الصفحة تعرض النصوص بالعربية + الإنجليزية + الصينية + الرموز التعبيرية بدون أي مشاكل.


🔹 ماذا يحدث لو لم نكتب الترميز؟

  • بعض المتصفحات هتفترض ترميز مختلف (مثلاً ISO-8859-1).

  • النتيجة: الحروف العربية هتظهر بشكل غريب زي:

  • بدل “السلام”


🔹 مقارنة سريعة:

  • ASCII: يدعم فقط الحروف الإنجليزية الأساسية (128 حرف).

  • ISO-8859-1: يدعم بعض لغات أوروبا.

  • UTF-8: يدعم كل لغات العالم + الرموز التعبيرية → الأفضل والأشهر.


🔹 ملخص

  • الترميز = طريقة لتمثيل الأحرف كأرقام.

  • UTF-8 = أفضل وأشهر ترميز عالميًا.

  • لازم تكتب:

    في كل صفحة HTML علشان تضمن دعم كل اللغات والرموز.

التقييم: 0 من 0 تصويت

Similar Posts

Leave a Reply

Your email address will not be published. Required fields are marked *