إعلان
دورة تطوير التطبيقات باستخدام لغة JavaScript في هذه الدورة ستتعلم لغة جافا سكريبت, استخدام مكتبة React.js, بناء API الموقع بواسطة Node.js, تطوير تطبيق جوال باستخدام React Native, و في نهاية الدورة ستتعلم تطوير تطبيق محادثة شبيه بتطبيق WhatsApp. تعلم الآن
دورة تطوير واجهات المستخدم في هذه الدورة ستتعلم لغة HTML و لغة CSS و لغة JavaScript. من ناحية التطبيق العملي ستتعلم طريقة بناء واجهة متجر إلكتروني مكون من ست صفحات, تحويل خمسة تصاميم PSD إلى صفحات ويب, بناء واجهة مستخدم تشبه موقع يوتيوب, بناء لوحة تحكم إحترافية. تعلم الآن
تطوير تطبيقات باستخدام لغة بايثون في هذه الدورة ستتعلم أساسيات البرمجة بلغة بايثون وصولاً إلى التعامل مع أشهر أطر العمل (Flask و Django) و ستتعلم كيف تبني متجر إلكتروني يمكن للمستخدمين البيع و الشراء من خلاله. تعلم الآن
دورة تطوير تطبيقات الويب باستخدام لغة PHP في هذه الدورة ستتعلم لغة PHP من الصفر, استخدام إطار العمل Laravel بشرح مفصّل و عملي, كيفية تطوير شبكة اجتماعية تشبه Instagram, بناء API لتطبيق جوال وفق أسلوب RESTful, تطوير موقع إعلانات مبوبة, تطوير نظام إدارة محتوى CMS كامل. تعلم الآن
دورة تطوير تطبيقات الويب باستخدام لغة Ruby في هذه الدورة ستتعلم البرمجة بلغة Ruby إنطلاقاً من أبسط المفاهيم وحتى بناء تطبيق حقيقي, إستخدام إطار العمل Ruby on Rails بشرح مفصّل و عملي, بناء تطبيق حقيقي عبارة عن شبكة اجتماعية تشبه تويتر, تطوير مجتمع الكتروني يشبه حسوب I/O. تعلم الآن
دورة علوم الحاسوب هذه الدورة معدة لتكون مدخل لعلوم الحاسوب و لغات البرمجة حيث ستتعرف فيها على أنظمة التشغيل و ستتعمق في نظام لينكس و في كيفية التعامل معه من خلال موجه الأوامر, بالإضافة إلى قواعد البيانات و أساسيات الشبكات و الخوادم و مبادئ الحماية والأمان في الويب. تعلم الآن

    HTML الوسم <meta>

    تعريفه

    نستخدم الوسم <meta> بداخل الوسم <head> لتحديد خصائص الصفحة مثل الترميز, إسم المؤلف, الكلمات المفتاحية و غيرها.

    المعلومات التي تحددها بواسطة هذا الوسم تكون مفيدة إما للمتصفح حتى يعرض محتوى الصفحة كما يجب و إما لمحركات البحث حتى تعرض الصفحة بالشكل الذي نريدها حين يتم مشاركة الصفحة في مواقع التواصل الإجتماعي.

    في العادة نقوم بوضع عدة وسوم <meta> في الصفحة و ستعرف لاحقاً أهمية ذلك.

    دعم المتصفحات

    الجدول التالي يظهر المتصفحات التي تدعم الوسم <meta>.

    Chrome Edge Firefox Opera Safari Android
    Webview
    Chrome
    for Android
    Firefox
    for Android
    Opera
    for Android
    Safari
    for IOS
    Samsung
    Internet
    مدعوم 12 1 مدعوم مدعوم مدعوم مدعوم 4 مدعوم مدعوم مدعوم

    خصائصه

    نود الإشارة إلى أننا سنذكر الخصائص المهمة و المستخدمة فعلياً و نتجاهل أي خصائص لا يوصى باستخدامها.


    الخاصية charset

    يمكن إضافتها للوسم لتحديد نوع ترميز الأحرف الموضوعة في الصفحة.
    في الإصدار HTML 5 الترميز الإفتراضي الموضوع في الصفحات هو utf-8, هذا الترميز يتيح لك عرض جميع الأحرف في الصفحة بأي لغة (عربية, إنجليزية, صينية إلخ..) كانت لذلك لا داعي لأن تحدد نوع الترميز بنفسك.
    أنواع الترميز الأخرى مثل ISO-8859-1 لا تتيح لك عرض جميع الأحرف حيث أن هذا النوع يسمح فقط بعرض الأحرف الإنجليزية و في حال حاولت عرض أحرف عربية ستجده يعرضها في الصفحة كرموز غير مفهومة.

    إنتبه: يجب وضع الوسم الذي تحدد فيه نوع الترميز في أول الوسم <head> لأن المتصفح يتوقع أن يجد الوسم الذي تم فيه تحديد نوع الترميز في أول 1024 Byte في الملف (أي أول 1024 حرف منه في حال كانت أحرفه إنجليزية) مما يعني أنه قد لا يقرأ السطر الذي حددت فيه نوع الترميز إذا كان موجوداً بعد ذلك.

    الجدول التالي يظهر المتصفحات التي تدعم هذه الخاصية.

    Chrome Edge Firefox Opera Safari Android
    Webview
    Chrome
    for Android
    Firefox
    for Android
    Opera
    for Android
    Safari
    for IOS
    Samsung
    Internet
    مدعوم 12 1 مدعوم مدعوم مدعوم مدعوم 4 مدعوم مدعوم مدعوم


    الخاصية content

    على حسب القيمة التي نمررها للوسم نفسه بواسطة للخاصية http-equiv أو للخاصية name نقوم بإضافة هذه الخاصية لتحديد قيمة مرتبطة بهما.

    الجدول التالي يظهر المتصفحات التي تدعم هذه الخاصية.

    Chrome Edge Firefox Opera Safari Android
    Webview
    Chrome
    for Android
    Firefox
    for Android
    Opera
    for Android
    Safari
    for IOS
    Samsung
    Internet
    1 12 1 ≤12.1 ≤4 1 18 4 ≤12.1 ≤3 1.0


    الخاصية http-equiv

    يمكن إضافتها للوسم لتحديد كيف سيتعامل المتصفح مع محتوى الصفحة مع الإشارة إلى أن المعلومات التي يتم تحديدها هنا يتمريرها في Header الصفحة.
    عند استخدام الخاصية http-equiv لا بد من استخدام الخاصية content أيضاً لإعطاء قيمة للمعلومة التي يتم تحديدها بواسطة الخاصية http-equiv.

    الجدول التالي يظهر المتصفحات التي تدعم هذه الخاصية.

    Chrome Edge Firefox Opera Safari Android
    Webview
    Chrome
    for Android
    Firefox
    for Android
    Opera
    for Android
    Safari
    for IOS
    Samsung
    Internet
    1 12 1 ≤12.1 ≤4 1 18 4 ≤12.1 ≤3 1.0

    يجب تمرير إحدى القيم التالية المهيئة مسبقاً كقيمة للخاصية http-equiv لتحديد ما هي المعلومات التي سيتم إضافتها في Header الصفحة.

    القيمة معناها
    content-security-policy لتحديد خصائص الحماية المتبعة في عرض محتوى الصفحة فمثلاً إضافة الوسم التالي بداخل الوسم <head> يعني أنه لا يوجد مشكلة في حال كانت الصفحة تضمّن ملفات (صور, خطوط, فيديوهات, سكربتات إلخ..) تستخدم بروتوكل الإتصال http أو https:
    <meta http-equiv="Content-Security-Policy" content="default-src https:">
    content-type نضيفها للوسم لتحديد نوع محتوى الرابط بأسلوب MIME و هنا يجب تحديده كالتالي:
    <meta content-type="text/html" content="text/html; charset=utf-8">
    هذه الخاصية يمكن استخدامها مع النوع text/html فقط.
    ملاحظة: لا يوجد أي فرق بين تعريف نوع المحتوى بواسطة هذه الخاصية أو هكذا <meta charset="utf-8">.
    default-style نضيفها للوسم لتعيين ملف تصميم إفتراضي و بالطبع يجب تمرير مسار للملف كقيمة للخاصية content.
    x-ua-compatible في حال كان المستخدم يتصفح الموقع بواسطة متصفح Internet Explorer فهذه الخاصية يمكن إضافتها له كالتالي لضمان أن يقوم المتصفح باعتماد أحدث طريقة لديه لرسم محتوى الصفحة: <meta http-equiv="X-UA-Compatible" content="IE=edge">
    refresh نضيفها للوسم في حال أردنا جعل الصفحة تقوم بتحديث نفسها بشكل تلقائي بعد مدة محددة, فمثلاً الوسم التالي يجعل الصفحة تتحدث كل 30 ثانية بشكل تلقائي: <meta http-equiv="refresh" content="30">
    في حال أردنا جعل الصفحة تقوم بالإنتقال لصفحة أخرى بعد عدد محدد من الثاني, فيجب إضافة ;url= من بعد تحديد عدد الثواني فقط, فمثلاً الوسم التالي يقوم بتوجيه المستخدم إلى الصفحة الموضوع رابطها بشكل تلقائي بعد 30 ثانية: <meta http-equiv="refresh" content="30;url=https:/meta/harmash.com">


    الخاصية name

    يمكن إضافتها للوسم لإضافة معلومات مفيدة لمن سيتعامل مع الصفحة سواء محركات البحث, الصفحات التي قد تقوم بمشاركة رابط الصفحة بالإضافة لجعلها تظهر بشكل أفضل على مختلف أنواع الأجهزة (حاسوب, هاتف إلخ..) التي قد يتم مشاهدة محتوى الصفحة من خلالها.

    عند استخدام الخاصية name لا بد من استخدام الخاصية content أيضاً لإعطاء قيمة للمعلومة التي يتم تحديدها بواسطة الخاصية name.

    الجدول التالي يظهر المتصفحات التي تدعم هذه الخاصية.

    Chrome Edge Firefox Opera Safari Android
    Webview
    Chrome
    for Android
    Firefox
    for Android
    Opera
    for Android
    Safari
    for IOS
    Samsung
    Internet
    1 12 1 ≤12.1 ≤4 1 18 4 ≤12.1 ≤3 1.0

    يجب تمرير إحدى القيم التالية المهيئة مسبقاً كقيمة للخاصية name لتحديد ما هي المعلومات التي سيتم إضافتها في الصفحة.

    القيمة معناها
    application-name لوضع إسم للصفحة في حال كانت عبارة عن تطبيق ويب و بالطبع يجب تمرير الإسم لها كقيمة.
    ملاحظة: بالرغم من أن هذه القيمة مهئية لهذا الأمر إلا أن محركات البحث لا تعيرها أي إهتمام.
    مثال: <meta name="application-name" content="Web Editor">
    author لوضع إسم كاتب الصفحة (المؤلف) و بالطبع يجب تمرير إسمه لها كقيمة.
    مثال: <meta name="author" content="Mhamad Harmush">
    description لوضع وصف للصفحة يظهر عند مشاركة الصفحة في مواقع أخرى و عند البحث في محركات البحث فإنه أيضاً يظهر تحت عنوان الصفحة. يجب تمرير الوصف لها كقيمة.
    مثال: <meta name="description" content="This tutorial is made for free for beginners and for professionals">
    generator لوضع إسم الأداة المستخدمة في إنشاء الصفحة. يجب تمرير إسم الأداة لها كقيمة.
    مثال: <meta name="generator" content="Harmash Page Generator 4.0.1">
    keywords لوضع كلمات بحث للصفحة و نقصد بذلك تجهيز الجمل التي قد يستخدمها المستخدم عند البحث في محركات البحث. و بالطبع يجب تمرير الجمل لها كقيمة مع وضع فاصلة بين كل جملتين.
    ملاحظة: بالرغم من أن هذه القيمة مهئية لهذا الأمر إلا أن محركات البحث لم تعد تعيرها أي إهتمام.
    مثال: <meta name="keywords" content="HTML, Learn HTML, HTML Tutorials">
    viewport لجعل القياسات الموضوعة تظهر بشكل مناسب على جميع الأجهزة. يجب تعريفها و تحديد قيمتها كالتالي: <meta name="viewport" content="width=device-width, initial-scale=1.0">

    إستخدامه

    في المثال التالي قمنا بإضافة 5 وسوم <meta> في الصفحة.

    مثال

    <meta charset="UTF-8">
    <meta name="description" content="في هذا الدرس ستتعرف على جميع الوسوم التي يمكن عرضها في صفحات الويب">
    <meta name="keywords" content="HTML, وسوم, وسم, خصائص, عناصر صفحات الويب">
    <meta name="author" content="محمد هرموش">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    		

    جرب الكود

    تصميمه الإفتراضي

    لا يوجد تصميم إفتراضي له لأنه بالأساس شيء لا يتم عرضه أمام المستخدم.

    نصائح و ملاحظات

    الأمثلة التالية توضح أهمية إضافة الوسم <meta name="viewport" content="width=device-width, initial-scale=1.0"> كما هو في الصفحات لضمان أن تظهر بشكل مناسب مهما كان الجهاز الذي يستعمله المستخدم.

    ملاحظة: في حال كنت تستخدم حاسوب فإنك لن تلاحظ أي فرق بين المثالين الموضوعين و لكن في حال كنت تستخدم هاتف أو تابلت فإنك ستلاحظ الفرق بينهما.

    إعلان

    Eqla3Tech.com

    شروحات مكتوبة حول لغات البرمجة و تقنية المعلومات باللغة العربية مقدمة من إقلاع تك.

    لغة جافا لغة ++C قواعد البيانات نظام ويندوز نظام لينكس الشبكات تقنية المعلومات

    الدورات

    أدوات مساعدة

    الأقسام

    دورات
    مقالات أسئلة مشاريع كتب