أعزائي القراء حللتم أهلاً و نزلتم سهلاً، أقدم لكم دورة تعلم لغتي برمجة مواقع الويب و التطبيقات الهاتفية HTML و CSS بجودة محتوى عالية، و سنرى في هذا الدرس مفهوما HTML و CSS، بالإضافة إلى تنسيقات الأكواد البرمجية للغتين.
HTML
ما هو HTML ؟
HTML اختصار لجملة إنجليزية مفادها HyperText Markup Language، و هي لغة برمجية بنظام Anglosaxon -أي مكتوبة باللغة الإنجليزية- مصممة لإعطاء البنية للمحتوى كإخبار محركات البحث و متصفحات الإنترنت بأن نص معين مثلاً هو عنوان أو فقرة نصية أو أهم من نص آخر أو ما شابه، ثم إنشاؤها سنة 1991م.
تنسيقات أكواد HTML
 |
| صورة توضيحية لتنسيق كود HTML |
Element
Elements أو ما يصطلح عليهم عربياً بالعناصر، و هي ماهية الأكواد حيث تحدد عبرها محركات البحث و متصفحات الإنترنت عناصر صفحة الويب، مثلاً عناصر h5، h4، h3، h2، h1 و h6 تحَدّد كعناوين، p تحدَّد كفقرة نصية، a تحدَّد كرابط، br تحدَّد كسطر... و هناك نوعان من Elements :
* Element Block : تكون بدايته في أول الكود و في أول السطر، و نهايته في آخر الكود. (كما موضح في الصورة التوضيحية لتنسيق كود HTML)
* Element Inline : يكون داخل Element Block.
Tags
Tags أو ما يصطلح عليهم عربياً بالوسوم، هي أكواد مكانها ضمن كود Element، و هم نوعان :
* الوسوم الثنائية : تتكون من وسم فتح يسمى Start Tag يحدد بداية Element، و وسم إغلاق يسمى End Tag يحدد نهاية Element. (كما موضح باللون الأحمر في الصورة التوضيحية لتنسيق كود HTML)
* الوسوم اليتيمة : تتكون من وسم فريد يحدد كل Element، تكون بدايته بهذه العلامة '>' ثم إسم Element ثم يُختم بهذين العلامتين معاً '</'.
Attributs
هي أكواد تُستعمل لإعطاء اختصاصات إضافية للـ Element، و تكون دائماً بعد إسم العنصر في أوسمة الفتح Start Tags (كما موضح باللون الأزرق في الصورة التوضيحية لتنسيق كود HTML)، و تحتوي في الأغلب على قيم تسمى بـ Values (كما موضح باللون الأصفر في الصورة التوضيحية لتنسيق كود HTML)، و تكون أحياناً إجبارية للـ Element بحيث إذا أراد مصمم الويب إقحام الـ Element يجب كتابة Attribut أو Attributs الإجبارية لدى الـ Element المراد إقحامه.
الفيديو التوضيحي للدرس
CSS
ما هو CSS ؟
CSS اختصار لجملة إنجليزية مفادها Cascading Style Sheets، و هي لغة برمجية بنظام Anglosaxon -أي مكتوبة باللغة الإنجليزية- مصممة لإعطاء الستايل أو المظهر للمحتوى كإعطاء لنص معين مثلاً لون أو حجم أو نوع الخط أو ما شابه، تم إنشاؤها سنة 1996م.
تنسيقات أكواد CSS
 |
| صورة توضيحية لتنسيق كود CSS |
Selector
Selector أو ما يصطلح عليه عربياً بالمُحدِّد، و يحدد العنصر مراد تغيير مظهره (كما هو موضح باللون الأحمر في الصورة التوضيحية لتنسيق كود CSS حيث المراد تغيير مظهر جميع الفقرات النصية في الموقع الإلكتروني أو التطبيق الهاتفي).
Property
Property أو ما يصطلح عليه عربياً بالخاصية، و تحدد نوع التغيير (كما هو موضح باللون الأزرق في الصورة التوضيحية لتنسيق كود CSS حيث المراد تغيير لون جميع الفقرات النصية في الموقع الإلكتروني أو التطبيق الهاتفي).
Value
Value أو ما يصطلح عليه عربياً بالقيمة، و تحدد صفة نوع التغيير (كما هو موضح باللون الأصفر في الصورة التوضيحية لتنسيق كود CSS حيث المراد تغيير لون جميع الفقرات النصية في الموقع الإلكتروني أو التطبيق الهاتفي إلى اللون الأحمر)، هناك Properties تحتاج لأكثر من قيمة واحدة.
طريقة كتابة كود CSS
دائماً نجد أكواد CSS كما هو موضح في الصورة التوضيحية لتنسيق كود CSS، يجب كتابة Selector أولاً، ثم فتح المعقوفتين '}'، ثم الرجوع إلى السطر، ثم كتابة Property، ثم نقطتين':'، ثم كتابة Values، ثم الرجوع إلى السطر، ثم إقفال المعقوفتين'{'، في حالة تواجد عدة Properties يجب وضع كل Property في سطرها الخاص داخل المعقوفتين ثم فصلهم بالفاصلة المنقوطة ';'.
هناك تنسيق آخر لكود CSS، يطبق بكتابة كل ما ذكر في الفقرة النصية أعلاه بنفس الترتيب و بدون الرجوع إلى السطر، و يسمى هذا التنسيق بـ Inline CSS، و هو مخالف لقواعد السيو SEO الحديث.
أتمنى أن تستفيدوا من الدرس.