القائمة الرئيسية

الصفحات

أهم المواضيع

برمجة مواقع الإنترنت بإستخدام html5 مع CSS3 و JavaScript

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



برمجة مواقع الإنترنت بإستخدام html5 مع CSS3 و JavaScript




برمجة المواقع css3



صفحات الأنماط الانسيابية "css" هي اختصار لـ cascading style sheet تستخدم تقنية css في تصميم صفحات الويب بحيث يتم من خلالها التحكم في شكل الموقع بالكامل واضافة لمسة جمالية لشكل الصفحات من حيث نوع الخط المستخدم أو لونه أو حجمه وذلك دون الحاجة لكتابة تلك الأكواد أو تكرارها في كل صفحة داخل الموقع. بالتالي، يمكن من خلال ملف css واحد فقط إجراء أي تعديلات على كافة صفحات الموقع مما يوفر الكثير من الجهد والوقت. وظيفة هذه التقنية هي التحكم في عرض صفحة الويب دون التدخل في محتواها، مما يسهل من عملية إدارة الموقع، فتعديل ملف css  واحد سيؤثر على تصميم كافة صفحات الموقع. على سبيل المثال، اذا كان الموقع يحتوي على 100 صفحات ويب "HTML Pages" او اكثر، واردنا صيانة هذا الموقع بتعديل عرض تلك الصفحات، دون وجود ملف css يتحكم في تعديل كافة الصفحات فاننا نحتاج الى فعل ذلك يدويا وهو الأمر المكلف جدا.


بعد ان ابتكرت W3C تقنية الأنماط الإنسيابية وجعلها معيار قياسي لتصميم المواقع، بدأ الكثير من مصممو المواقع في الانتقال من الأسلوب التقليدي للتصميم باستخدام الجداول إلى الأسلوب الجديد باستخدام تقنية CSS. حيث ان ملفات الأنماط الانسيابية CSS تلغي الحاجة إلى استخدام الكثير من عناصر HTML، مثل عنصر FONT الذي يحدد نوع الخط أو حجمه أو لونه، كذلك العنصر TABLE الذي يستخدم لإنشاء الجداول. بالتالي فانه يمكن استخدام CSS لتصميم المواقع دون استخدام الجداول كما هو متبع في الطرق التقليدية. هذا لا يعني أن الجداول لن يتم استخدامها مع CSS، فالجداول لها وظيفة أخرى وهي عرض وتنسيق البيانات التي تحتاج إلى أن تكون ضمن جدول.


عند تصميم موقع، ينصح بالفصل بين الثلاث مكونات الرئيسية لتطوير الموقع HTML، CSS، java script. انشاء صفحة ويب "مستند HTML" يعني ادراج المحتوى داخل عناصر HTML في ملف، إنشاء الأنماط وطريق عرض تلك العناصر من خلال كتابة اوامر CSS داخل ملف اخر "CSS File"، واخيرا اضافة سلوكيات صفحة الويب هذه بكتابة كود javascript داخل ملف اخير.



طرق كتابة اكواد :CSS




توجد ثالثة طرق لكتابة اكواد -::CSs


الطريقة الأولى

inline style باستخدام الخاصية STYLE ضمن عناصر HTML .

إحدى الطرق لتفعيل CSS في HTML هي باستخدام خاصية style .

مثال: إلستخدام اللون األحمر كخلفية للصفحة، يمكن تطبيق ذلك باستخدام الخاصية style كآلتي:

<body style="background-color: #FF0000;"> والموجود داخل العنصر


الطريقة الثانية

Style( :)Internal باستخدام العنصر :style

في هذه الطريقة، يتم اضافة كود ال CSS داخل العنصر او الوسم <style>

.<HEAD>

مثال: لحل نفس المشكلة في المثال السابق، يمكننا اضافة التالي الى العنصر .<HEAD>

<style type="text/css">

body {background-color: #FF0000;}

</style>


الطريقة الثالثة

Style( :)External اضافة كود CSS في ملف خارجي.

هذه هي الطريقة األفضل لكتابة كود CSS، وهي إنشاء ملف خارجي (بإمتداد ).css يحتوي على كود

CSS ثم ربط هذا الملف بمستند .HTML

مثال: لحل نفس المشكلة في المثال السابق، يمكننا عمل اآلتي.

- إنشاء ملف خارجي )style.css(، يمكن وضع هذا الملف داخل مجلد الموقع -  إنشاء رابط بين مستند HTML وملف التصميم (style.css) بإضافة السطر التالي الى

العنصر <HEAD> داخل مستند ال :HTML

<link rel="stylesheet" type="text/css" href="style/style.css" />

الجميل في هذه الطريقة هو امكانية ربط العديد من ملفات HTML بملف تصميم واحد، بمعنى آخر

يمكن لملف تصميم واحد أن يستخدم للتحكم بتصميم العديد من ملفات HTML

التركيبة البنائية لـ CSS :

عند كتابة اوامر (كود) األنماط االنسيابية CSS ، يجب اإللتزام بالصيغة العامة لتلك األوامر والتي

تتكون من ثالثة أجزاء: value and property .selector

و بنظرة سريعة نجد أن أوامر CSS تتكون من شقين الشق الأول هو selector وهو عبارة عن أحد عناصر الـ HTML المتعارف عليها " فيمكنك استخدام الوسم body للصفحة أو p للفقرات، أو a للروابط ، أو table للجداول و هكذا .

و الشق الثاني و يدعى declaration و هو ما يقع بين القوسين } {  و يحتوي على مجموعة من الأوامر يفصل كل واحدة عن الأخرى بالفاصلة العائمة. كل امر داخل ال declaration يحتوي على جزئين يفصل بينهما ":"، والجزء الأول يمثل ال  property و هي الخاصية التي تريد تطبيق القيمة عليها و سوف نطلق عليها مصطلح المتغير ، والجزء الثاني يسمى قيمة المتغير value.


نلاحظ أن:

·         الأمر الواحد قد يحتوي على أكثر من منتقي " selector " و هنا يجب أن يتم الفصل بينهم بفاصلة عادية هكذا " , " ، أو أكثر من متغير " property " و أكثر من قيمة " value " وهنا يجب أن يتم الفصل بينهم بفاصلة منقوطة هكذا. " ;

·         كود الـ CSS يمكن كتابته في سطر واحد أو في عدة اسطر.

·         إذا كان اسم الخط يتكون من أكثر من كلمة واحدة مثل Sans Gill ، ضع حوله عالمتي اقتباس داخل الكود:

body " font-family: "gill sans", "lucida sans", serif

·         بالنسبة لألنماط المضافة داخل السطر inline استخدم عالمات اقتباس مفردة:

<p style="font-family: 'gill sans', 'lucida sans', serif">


المجموعات:


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

جميع العناوين تظهر باللون األحمر يمكن تطبيق ذلك من خالل الكود التالي كل ما عليك هو وضع

فاصلة عادية بين كل selector تقوم بتحديدها:

h1,h2,h3,h4,h5,h6 color: red

الفئات classes

يمكن للمنتقي " selector " ان يكون على شكل فئة وبالتالي يمكن تطبيقها على أكثر من أمر. لعمل


ذلك نحتاج الى ما يلي:

  •  تمميز بعض العناصر التي نرغب في تطبيق النمط عليها بإستخدام خاصية الفئة class داخل كل عنصر وبإعطاء اسم لهذة الفئة.
  •  استبدال المنتقى selector في الشكل السابق بالفئة المعرفة "يجب وضع النقطة قبل أسم الفئة".
  •  يمكن استخدام وسوم HTML في صناعة الفئات ، و المثال التالي يوضح كيفة إستخدام الفئة "center" لتطبق على عناصر HTML.

المنتقى المعرف ID Selector

المعرفات تختلف عن الفئات ، فبينما يمكن استخدام الفئات على عدة عناصر داخل صفحة HTML، نجد أن المعرف يستخدم للتطبيق على عنصر واحد فقط. و تستخدم فكرة المعرف لحفظ تنسيقات معينة باسم  هذا  المعرف  على  أن  يتم  إدراجها  مع  كل  وسم  يستخدم  هذا  المعرف  كمتغير  ضمن  متغيراته الأخرى.

كما هو موضح في الشكل التالي، المعرف " ID " هو مشابه للفئة " class " في الصيغة العامة و لكنه يختلف في أمرين األول هو أننا نضع عالمة " # " قبل اسم المعرف أما class فنضع" . " نقطة قبل اسم الفئة ، األمر الثاني أن ID ال يتم تطبيقها إال على أمر واحد فقط من أوامرHTML .


تعدد الأنماط


إن السؤال الذي يتبادر إلى الذهن الآن ماذا يحدث لو تم استخدام أكثر من نمط داخل الموقع الواحد. اي انه

تخيل ان الموقع يستخدم الثالثة طرق من الأنماط:

·         الموقع مرتبط بملف CSS مستقل و يتم تضمينه داخل الصفحة External CSS

·         الموقع مدرج به نمط ضمن رأس الصفحة هى Internal CSS

·         مستند الصفحة بالموقع بها عناصر تستخدم النمط Inline CSS

في هذه الحالة سيتم إعطاء أولوية لتنفيذ الكود Inline CSS أولا، ثم يليه يتم تطبيق Internal CSS أي أوامر CSS ضمن رأس الصفحة، ثم سيطبق أوامر CSS في الملف الخارجي، هذه هي أولوية التنفيذ، يجب أن نتذكرها دائما.

عزيزي القارئ هل ترغب في معرفة معلومات أخرى عن برجمة المواقع بتلك الطريقة؟ إذن لا تتردد وراسلنا بكافة أسئلتك وسوف نرد عليها على الفور أو ندلك على الأماكن التي تجد فيها إجاباتك، وطبعا سوف نسعد كثيرا إن قمت بمشاركة مقالنا على حساباتك على مواقع التواصل الاجتماعي كالفيس بوك وتويتر وما إلى ذلك بحيث يستفيد منها أكبر عدد ممكن من الناس.

تعليقات