بسم الله الرحمن الرحيم
تحية طيبة وبعد
نتحدث اليوم عن السمات العامه في html
HTML Global Attributes
وهي مجموعه من السمات يمكن استخدانها مع كافة عناصر اللغة بلا استثناء
رغم انهم في بعض العناصر يصبحون بلا فائدة
وسنتعرف عليهم بالتفصيل الان
ويعتبر هذا الدرس خروجا عن خريطة الدورة ولكن ساطرحه الان لما فيه من اهميه وتوضيحات للدروس التالية
accesskey
هذة السمة بكل بساطة تنشئ لك اختصار من مفاتيح الكيبورد يقوم بتنشيط/تركيز العنصر
والقيمة تكون حرف انت تحددة
طبق الكود التالي :
والكود بكل بساطه هو رايط طبيعي جدا درسناه في دورس سابقة والجديد فقط اننا قمنا باضافة سمة accesskey
وقمنا بتحديد القيمة وهي حرف a ولك الحرية في تحديد القيمة
الان احفظ الصفحة قم بالمعاينه .. لم تجد اي شئ جديد اليس كذلك .. بالفعل ليس هناك شئ جديد
ولكن افتح الصفحة واضغط
Alt + a ستجد انه تم الضغط علي الرابط وتم فتحة بالفعل
هل في الامر صعوبة ؟
توافق السمة مع المتصفحات
يتبين لنا من الصورة انها تتوافق مع كل المتصفحات في عدا متصفح اوبرا
وهذا هو accesskey بكل بساطة ..
class
ساقوم بشرحها ولكن يجب ان تعلم ان الترجمه الحرفية لـ class يمكن ان تكون ” فئة ” ويمكن ان تكون ” طراز ”
هي بذاتها ليس لها فائدة علي الاطلاق
طريقة كتابتها
القيمة omar هنا انا من قام باختيارها وانت يمكن ان تسميها ما تشاء
وكانني اقول للمتصفح … هذا العنصر ينتمي لفئة تسمي omar
ويمكنك استخدام الحروف من A-Z او a-z او ارقام 0-9 او العلامات – _ فقط
وحساس لحالة الاحرف والمقصود هنا كمثال OmaR تعتبر شئ اخر عن omar حاله الاحرف صغيرة او كبيرة
– يمكن استخدام نفس class لاكثر من عنصر في الصفحة الواحده .
يتم استخدام سمة class في الغالب للإشارة إلى العناصر لاستخدامها في css لإجراء تغييرات على العناصر من فئة محددة.
ومع ذلك، يمكن أن تستخدم أيضا من قبل جافا سكريبت
اعلم انك لم تفهم شيئا . حتي انا لو قمت بقرائة هذا الشرح فلن افهم شيئأ
لكن ستتضح لك الامور بعد قليل من خلال التجربة
هل تتذكر درس css في هذة الدورة ؟ سنقوم باستخدامة الان
اولا داخل منطقة ال head سنضح كود css
ثانيا في منطقة ال body سنضع كود ال html لنري ذلك
لاحظ هنا اني استخدم class omar علي عنصرين
واستخدمت class test علي عنصر اخر
وقمت في منطقة عمل ال css بتحديد خصائص لكل عنصر يستخدم class omar و class test
قم بالمعاينة الان
اعتقد ان الامور علي ما يرام الان ^^
contenteditable
وهي سمة بسيطة جدا تحدد اذا ما كان محتوي العنصر قابل للتحرير او غير قابل
ولها قيمتين فقط وهما true و false
true = نعم قابل للتعديل
false = غير قابل للتعديل
جرب ذلك
وافتح الصفحة للمعاينه وحاول تغيير النصوص من المتصفح ^^
بسيط اليس كذلك ؟ نعم انتهي الدرس عنها حتي الان وربما نستكشف فيما بعد كيف الاستفادة منها^^
ولزيادة العلم هذة السمة اضيفت في html5 ولكم تكن موجوده من قبل
الان لدينا سمة جديدة من سمات html العامة
contextmenu
هل جربت ان تضغط كليك يمين بالماوس في اي مكان في هذة الصفحة ؟
بالطبع نعم وتظهر لنا هذة القائمة المعتادة
ملحوطة قد تختلف القائمة من متصفح لاخر انا استخدم جوجل كروم
هذة السمة تمكنا من اضافه قائمة كهذة تظهر عندنا تضغط بزر الماوس الايمن علي عنصر محدد
يعني مثلا كافتراض لو ضغطت علي هذة الصورة بالاعلي تظهر لك قائمة انت تحددها
وللاسف لن اقوم بشرح هذي السمة لانها للاسف الشديد جديده في html5 ولم يتم اعتمادها في اي متصفح حتي االان
سنعود لها بالتفصيل في حال تم دعمها في احدي المتصفحات ^^
احب ان اوضح ان السمه التالية تستخدم مع جافا سكربت واساليب متطورة فلذا لن اشرحها الان حتي لا تختلط عليك الامور
فقط تعلم كيف تستخدم ومعلومات عنها حتي ياتي لنا الدور باستخدامها مع تقدم الدورة
data-* Attributes
يتم استخدام data-* لتخزين بيانات مخصصة للصفحة أو التطبيق.
تعطينا القدرة على تضمين البيانات على جميع عناصر
البيانات المخزنة يمكن أن تستخدم في جافا سكريبت للصفحة لخلق تجربة مستخدم أكثر جاذبية (بدون أي اتصال بـ Ajax أو استعلامات قاعدة البيانات من الخادم).
*يجب أن لا يحتوي اسم السمة علي أي أحرف كبيرة، ويجب أن يكون حرف واحد على الأقل بعد البادئة “data-“
*قيمة السمة يمكن أن تكون اي نوع من النصوص الطويلة او القصيرة
ملاحظة: السمات المخصصة المسبوقة ب “data-“ سيتم تجاهلها تماما من قبل المتصفح
اي لا تعرض وليس لها اي فاعلية سنتعلم فيما بعد طريقة استخدام هذة البيانات
واليك طريقه كتابتها
ولكن لاحظ ان username هو اسم انا من وضعه لطلب البيانات بواسطتة فيما بعد
فانت تري بالاعلي باسم الدالة علامة * نستبدل هذة العلامة بمسمي كما نحب لطلب البيانات عن طريق هذا المسمي
ملاحظة : ان صعب عليك فهم هذة السمة فقط تعلم انها تستخدم لتخزين البيانات ولا تنشغل بها وسياتي يوم اشرحها بالتفصيل الملل
dir
وهي تستخدم لتحديد اتجاه النص
وهي تنتمي لمجموعه السمات العامه لذلك يمكن استخدامها مع اي عنصر
ولها قيم محدده وهما اثنان
ltr : من اليسار الي اليمين وهي الافتراضية وهي اختصار ل Left-to-right
rtl : من اليمين الي اليسار وهي اختصار ل Right-to-left
auto : وهي السماح للمتصفح بمعرفة اتجاه النص تلقائيا استنادا الي محتوي الصفحة
وانضمت هذة السمة الي العناصر العامة في الاصدار الخامس من html
حيث انها سابقا كانت لا تستخدم مع الكثير من العناصر ولكن حاليا اصبحت عامه
لن اطيل عليكم الشرح ولكن قم الان بانشاء جدول كما تعلمنا واضف نصوص الي الجدول وقم باضافة هذة السمة وقم بالتجربة لتكتسب الخبرة ,وبعد ذلك قم باستخدامها علي العنصر <p> ولاحظ
draggable
تحدد هذة السمة قابلية للسحب ما إذا كان العنصر قابل للسحب أو لا.
تلميح: الروابط والصور هي قابلة للسحب افتراضيا.
وغالبا ما تستخدم هذة السمة في عمليات السحب والافلات وسنقوم بدراستها بشكل منفصل فيما بعد
وهي جديدة في html5
ولها ثلاث قيم
true : قابل للسحب
false : غير قابل
auto : يستخدم الوضع الافتراضي للمتصفح
طريقة الكتابه مع مراعاة استخدام قيمة واحده
ننتقل الي السمة التالية
dropzone
وهي ايضا تخص السحب والافلات وسندرسها فيما بعد
وتحدد ما إذا كانت البيانات المسحوبة هي نسخ أو نقل، أو ربط، عندما يتم إسقاطها على عنصر.
ولها ثلاث قيم
copy : نسخ
move : نقل
link : ربط
وهي للاسف غير مدعومة علي اي متصفح حتي الان ~~
hidden
وهي تستخدم لاخفاء عنصر من الصفحة
وهي تختلف عن كافة السمات في طريق كتابتها
فهي تكتب مباشرة بدون قيم .. ولها استخدامات عديدة مع جافا سكربت سنتعلمها لاحقا
وهي غير متوافقة مع المتصفح Internet Explorer
لكم التجربة ^^
id
تعلمنا بالاعلي عن class وايضا هذة السمة تؤدي نفس الوظيفة ولكن
هو يحدد معرف فريد لعنصر لا يستخدم الا لعنصر واحد
وله استخدامات عدة في css و جافا سكربت وهو الاكثر استخداما
ويكتب رهكذا
ويطلب في css هكذا .. يسبق المعرف #
lang
وهي تستخدم لتحديد لغة النص
سنتعلم طريق كتابته
مع العلم ان ar = اللغة العربية
spellcheck
القيم
true : تفعيل
false : تعطيل
وهي تستخدم ل التدقيق الإملائي
ولها استخدامات رائعه لنفترض انك ستقوم بالرد علي الدرس هذا فيمكن اضافة هذة السمة للرد بحيث يظهر لك الاخطاء الاملائية
ما رايكم ان نقوم بتجربتها مع سمه اخري تعلمناها منذ قليل وهي contenteditable لتضيف لنا ميزة التعديل
جرب هذا ولاحظ اني كتبت كلمة خاطئة
اذهب للمتصفح وقم بعرض الصفحة واضغط علي كلمة praggagraph وستجد صدور خط احمر تحت الكلمة ليخبرك انها خاطئة
وهي ميزة جديده في html 5
style
وقد شرحنا هذة السمة سابقا في الدروس الاولي ولا جديد لاضافتة
tabindex
يتيح لك التنقل بين الروابط او العناصر باستخدام الزر tab في لوحة المفاتيح (كيبورد)
ويمكن ايضا تحديد الترتيب ايها 1 وايهما 2 من خلال القيمة فقط جرب الكود التالي وستضح لك الامور
اكتب الكود واذهب للمتصفح وقم باستخدام الزر
title
شرحناها مسبقا وهي مثلا عنوان يظهر عند الوقوف بالماوس علي العنصر ومفيد في محركات البحث
جرب هذا
translate
تحدد ما إذا كان العنصر يترجم عندما تكون الصفحة مترجمة، أو لا.
وسنتطرق لها لاحقا لانها جديدة في html5 ولا اعرف عنها الكثير
الي هنا ننتهي ونعود في درس جديد
الي القاء
