الدرس الثاني من الدورة html ~ المدونة الشاملة لكل المستويات

الدرس الثاني من الدورة

في الدرس السابق لم يكن التنسيق جيدا لذا لابد لنا من تنسيق الصفحة بشكل يجعل الزائر بموقف جد سهل وسلس لمتابعة التصفح والقراءة وابداء الاراء وغيرها من الامكانيات المتاحة لزوار المواقع.

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

اما النمطين فهما :

1- النمط الاول CSS

2- النمط الثاني Javasc

وسنبدأ على بركة الله بالنمط الاول CSS

هناك طريقتين أو أسلوبين متبعان في دمج هذا النمط

1-ادراج اكواد CSS داخل ملف HTML

2-فصل ملف CSS عن HTML

وسنبدأ بالاسلوب الأول (إدراج اللأكواد والشفرات داخل ملف HTML)

اولا يجب ان لاننسى المخطط الرئيسي :

ولكي يتعرف المتصفح على لكواد CSS لا بد من تعريفها مسبقا وإعطائها الوسم الافتراضي :

<style></style>

دائما وسم البداية <style> ووسم النهاية </style>

ويكتب الوسم او التعريف في القسم الاول:

<head> هنـــــــــــــــــــــــــــــــا </head>

والآن نبدأ في التكويد والتنسيق وذلك يكون حسب الوسوم التي تكتب في القسم الثاني :

<body>

الوسوم

</body>

وكمثال توضيحي سنستمر بالمثال السابق:

نقوم بتنسيق الروابط الخاصة باللينكات او مايعرف بــــــ :

<a/>العنوان<"الرابط*اللينك المراد الذهاب اليه عند النقر على العنوان*"=a href>

نذهب الى المنطقة الخاصة بوسوم التنسيق CSS:

نقوم بالتسيق حسب الرغبة والمعرفة ولذا سنختار تنسيق مناسب

ولكتابة وسم التنسيق الخاص باي عنصر يجب ان نبدا بالتسمية المطلق عليها في القسم الثاني <body>

فمثلا في حالة الروابط تكون <a/>العنوان<"الرابط*اللينك المراد الذهاب اليه عند النقر على العنوان*"=a href>
لذا نبدأ بـــــ a

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

a{}

اذا كان الوسم المعطى في القسم الثاني معرف من وضعنا مثلا *lk* فنعرفه كالتالي :

#lk{}

في حالتنا الوسم معرف افتراضيا لذا نكتبه فقط متبوعا{} :

ومن احد المواقع المعطاة في افتتاحية الدورة

نختار مثلا الرابط يتغير لونه عند النقر عليه *على انه قد تمت زيارة الرابط من قبل او غير ذلك*

والنتيجة تكون كالتالي:

ويكننا التعديل على اللون كيفما نشاء #FF0000 او بقية الاكواد التي تعبر عن اللون

ولاختيار اكواد وشيفراد اللن المراد ادخل على احد الموقعين التاليين

الموقع الاول

الموقع الثاني

ونكمل مع بقية الوسوم كالتالي:

مع استعمال الوسم الخاص يالتقسيم :

الشرح في الصورة التالية

النتيجة في البروزر

إنتظرونا في الدرس التالي سيكون اكثر تعقيدا واحلى نتيجة

بقلم نبيل مسعي

أنا من الجزائر، احب أن أضع كل ما أعرف من معلومات حول الحاسوب ولاأبخل به عليكم، وخطرت لي فكرة عمل مدونة تضم كل المجالات التعليمية للكومبيوتر التي أستطيع إفادتكم بها، فأرجوا ان لاتبخلوا علي أيضا بمتابعتكم لمواضيعي كما ان تعليقاتكم تهمني وتزيد من عطائي لكم إخوتي الكرام وأي استفسار ان موجود وشكرا

قسم : تعلم البرمجة

المدونة الشاملة لكل المستويات

الثلاثاء، 4 مارس 2014