للإتصال بإدارة المدونة | أغلق

فيما يتعلق بشؤون المدونة :
مجال التبادل الإعلاني مفتوح للجميع, يمكنكم مراسلتنا عبر البريد الإلكتروني : nefzaoui.ahmed@hotmail.com
أو التواصل مع أحمد نفزاوي عبر فايسبوك

| 7 تعليقات ]


بسم الله والحمد لله الذي سخر لنا الدنيا وعلمنا ما لا نعلم رحمة منه وفضل عظيم، الحمد لله الذي يسر لنا العلوم والتقنية وسهل علينا امور معاشنا واعطانا من نعمه ما لا يحصى ولا يعد، الحمد لله وبسم الله والصلاة والسلام على رسول الله صلى الله عليه وسلم.


مدونة عالم وندووز لا تنفرد فقط بما يخص Windows. بل كما إلتزمنا معكم فإننا سنقد لكم دروس في بعض المجالات راجين الإفادة.. إذن فهذا هو الدرس الأول وموضوعه تصميم المواقع.
هل فكرت يوما كيف يعمل موقع فايسبوك ؟
هل تسائلت إذا كانت هنالك إمكانية أن تصبح أنت مصمّم محترف ؟
حسنا لست جيّدا جدا في المقدّمات.. إذن فلنبدأ




لن أكثر من التعريفات سنبدأ حالا في التطبيق.. إفتح حاسوبك (هو مفتوح فعلا لأنك تقرأ هذه التدوينة من خلاله P:)
سنبدأ من نقطة الصّفر
1- إفتح محرّر النصوص
2- أكتب هذه الجملة




<font color="red">Hello my name is Ahmed</font>



كما تبيّن الصورة :






الآن سجّل هذا النص تحت إسم page1.html


ثم إذهب إلى حيث سجّلت هذا النص وابحث عنه.. إفتحه.. هذا لاحظت ؟ أول ملاحظة هي أنه لم يفتح ببرنامج محرّر النصوص بل تم فتحه بمتصفح الواب والنتيجة :




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




<font color="red">Hello my name is Ahmed</font>



كما تلاحظ هناك :  <"font color="red>
و </font>
وبينهما هذه الجملة Hello my name is Ahmed
في حال إستبدلت الجملة Hello my name is Ahmed بأي جملة أخرى فإن النتيجة ستكون الجملة الجديدة مكان القديمة باللون الأحمر
بعض التعريفات : اللغة الأساسية في تصميم المواقع والتي هي موضوع الدرس الأول إسمها HTML ومن خصائص هذه اللغة الـ TAGS
ماهي الـ TAGs ؟ هي بالعربية الأوسمة وهي كلمات مفتاحية منقسمة إلى 3 أنواع.
أوسمة فتح وتتم كتابتها هكذا : <html> <head> <body> <p> <div>
أوسمة إغلاق وتتم كتابتها هكذا :


كما تلاحظ فإن أوسمة الإغلاق تتميز بـ / قبل إسم الوسم..
أوسمة فتح وإغلاق (سنتطرّق إليها قريبا)


الآن ماهي وضيفة الوسوم ؟ من خلال الوسوم تستطيع إستدعاء صور, تغيير خصائص النصوص, إدراج جداول, وضع تأثيرات وكل هذا سنتطرق إليه
إذن الآن سؤال بسيط.. في هذا الكود




<font color="red">Hello my name is Ahmed</font>



هل تستطيع تمييز وسم الفتح و وسم الإغلاق ؟
الجواب :
<"font color="red> هو وسم الفتح
</font> هو وسم الإغلاق
والآن ماهي وضيفة "color="red ؟ هي الخاصية المرتبطة بالوسم و كل وسم تستطيع أن تدخل عليه العديد من الخصائص و كل خاصية تمتاز بقسمين.. إسم الخاصية و قيمة الخاصية.. مثلا اللون هو الأحمر.. هذه خاصية.. إسم الخاصية هو اللون.. و قيمتها هو "الأحمر" 
كذلك في مثالنا فإن إسم الخاصية هو color والقيمة هي red كما أنك تستطيع تغيير قيمة الخاصية بأي لون آخر يعجبك
مثلا green blue white black yellow grey وبقية الألوان شرط أن تكون باللغة الإنجليزية
الآن سأترك لك المجال لتغيّر قيمة خاصية اللون في وسم font بالتوفيق :)


آسف على الإطالة لكن كما وعدت فأنا سأركز على الأساسيات ودائما الدرس الأول هو الأصعب لذا إن كان لديك سؤال فلا تتردّد في طرحه.. جميع الأسئلة سأجيب عليها :)


هديّة الدرس الأول : وسم <center>
حاول وضع الكود الذي طرحناه في هذا الدرس بين وسمي الفتح و الإغلاق الخاصّين بـ <center>
مالنتيجة ؟


ملاحظة : لا تنسى حفظ التغييرات كلما غيّرت في الكود وإعادة فتح الملف الذي سجّلته مرة أخرى أو ببساطة إذهب إلى الصفحة التي تم عرضها في المتصفّح واضغط على F5 لإعادة تحميل محتوى الصفحة :)

7 تعليقات

غير معرف يقول... @ 22 فبراير 2012 في 9:33 م

chokran jazilan

Ahmed Nefzaoui يقول... @ 22 فبراير 2012 في 9:38 م

لا شكر على واجب :)

احمد القرني يقول... @ 24 فبراير 2012 في 12:44 ص

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

احمد القرني يقول... @ 24 فبراير 2012 في 1:04 ص

اصبحت الكتابة في المنتصف وغيرت لونها اخضر

Ahmed Nefzaoui يقول... @ 24 فبراير 2012 في 9:58 م

ممتاز :) الدرس القادم ليلة الغد إن شاء الله :)

غير معرف يقول... @ 11 يوليو 2012 في 8:04 ص

درس ممتـع .. والجـواب ، ظهـور النـص ب وسـط الصفـحه ^_^


ننتظر الدرس الجـديد

Unknown يقول... @ 22 مارس 2013 في 7:51 م

مشكور اخي الغالي بالنسبة لي استفدت من الدرس الاول لكن اريد ان اتابع بقية الدروس اين اجدها اخي العزيز

إرسال تعليق


تعليقك هو دعم لنا