شرح دعم اللغة العربية في الموقع باستخدام Meta Tag و Charset | HTML بالعربي
أهلاً بيكم يا شباب، عاملين إيه؟ إن شاء الله تكونوا بخير وبسلامة.
في فيديو النهارده هنتعلم إزاي نقدر نخلي الموقع بتاعنا يدعم اللغة العربية،
ونتعرف كمان على تاني تخصص في "عقل الموقع" أو الـ
<head> بتاع الصفحة.
وده من خلال استخدام عنصر مهم جدًا في HTML، وهو
تاج الميتا (Meta Tag).
الفرق بين Meta و Title
أول حاجة لازم نعرفها إن:
-
وسم الـ
<title>ماينفعش يتكرر غير مرة واحدة بس داخل الـ<head>. -
لكن تاج الـ
<meta>ممكن نستخدمه أكتر من مرة، وكل مرة بنغير الغرض منه عن طريق السمات أو الـ attributes.
أول استخدام لتاج الميتا: دعم اللغة العربية
علشان نبدأ نضيف دعم اللغة العربية في الموقع، بنستخدم الخاصية
charset داخل تاج الميتا.
التاج بيكون شكله كده:
<meta charset="UTF-8">
وده يعتبر تاج فردي (Self-closing Tag)، يعني مالوش وسم فتح ووسم غلق زي
<title>، لأ، هو بيتكتب مرة واحدة بالشكل
ده.
يعني إيه charset؟
كلمة charset اختصار لـ
Character Set، ودي بنحدد بيها الترميز اللي المتصفح يقرأ
بيه النصوص.
زمان كانوا بيستخدموا ترميز اسمه:
<meta charset="ISO-8859-1">وده ماكنش بيدعم اللغة العربية، فلو كتبت كلمة عربية في الموقع، هتلاقيها طالعة رموز غريبة أو مش واضحة.
مثال عملي
لو كتبنا كده في الـ <body>:
<h1>مرحبا بكم</h1>
وماكناش محددين الترميز الصح، هتظهر الجملة دي بشكل غير مفهوم أو رموز.
لكن لما نستخدم الترميز الحديث:
<meta charset="UTF-8">ونعمل تحديث للصفحة، هتلاقي اللغة العربية بقت مدعومة بشكل طبيعي، وبتظهر من غير أي مشاكل.
التأكد من وجود التاج
تقدر تعمل كليك يمين على الصفحة، وتختار "Inspect" أو "فحص العنصر"، وتدخل
على وسم <head>، هتلاقي أول تاج موجود
هو:
<meta charset="UTF-8">وده معناه إن المتصفح ومحركات البحث عارفين إن موقعك بيدعم اللغة العربية.
إضافة تعريف اللغة في وسم HTML
كمان في حاجة مهمة جدًا، وهي إننا نوضح لمحركات البحث والمتصفحات إيه هي لغة
الموقع الأساسية، وده بيتم عن طريق وسم الـ
<html> نفسه.
الخطوة:
بتضيف سمة اسمها lang داخل وسم الفتح:
<html lang="ar">-
لو موقعك باللغة العربية: استخدم
"ar" -
لو موقعك باللغة الإنجليزية: استخدم
"en"
وده بيساعد محركات البحث تعرف الموقع موجه لمين، وبيساعد كمان في تحسين الترجمة والقراءة الصوتية وغيرها.
هل ممكن أستخدم اللغتين مع بعض؟
طبعًا، مافيش أي تعارض إنك تكتب عربي وإنجليزي في نفس الصفحة.
الشرط الأساسي إنك تستخدم الترميز الصحيح وهو:
<meta charset="UTF-8">وساعتها الموقع هيقدر يعرض أي لغة من غير مشاكل.
سؤال الحلقة
🎯
إيه هو الترميز والاتربيوت الصحيح اللي لازم نستخدمه علشان ندعم اللغة
العربية في موقعنا؟
سيبوا إجابتكم في التعليقات، وأنا هشوفها كلها.
ملخص
-
استخدم
<meta charset="UTF-8">لدعم اللغة العربية. -
عرف اللغة في وسم
<html>عن طريقlang="ar". -
ابتعد عن ترميز
ISO-8859-1لأنه لا يدعم العربي. -
دايمًا راجع الكود بتاعك من خلال Inspect وتأكد من إعدادات الصفحة.
شاهد فيديو توضيحي
وفي النهاية اشكرك علي مشاهدة الموضوع والي اللقاء