في هذا الدرس ستتعلم الخطوط وكيف تفعلها باستخدام CSS، وسنقوم أيصاً بمعالجة مشكلة
كيفية عرض بعض الخطوط التي لن تظهر بشكل صحيح ما لم تكن مثبتة على الحاسوب، سنتعلم
هذه الخصائص في هذا الدرس:
إظهار الرسائل ذات التسميات دورات. إظهار كافة الرسائل
إظهار الرسائل ذات التسميات دورات. إظهار كافة الرسائل
الخميس، 14 مايو 2015
السبت، 2 مايو 2015
100
100
100
الدرس 3: الألوان والخلفيات
السلام عليكم ورحة الله اخواني الكرام , في هذا الدرس سنتعلم كيفية تفعيل الألوان والخلفيات لموقعك، سنقوم أيضاً
بتعلم طرق متقدمة لتحديد موقع صورة الخلفية، نشرح هذه الخصائص في CSS:
لون المقدمة: خاصية 'color'
100
100
100
درس 2: كيف تعمل تقنية CSS؟
السلام
عليكم ورحمة الله وبركاته.
في
هذا الدرس ستتعلم كيف تقوم بإنشاء ملف التصميم الأول، ستتعلم أساسيات CSS وما هي الوسوم
اللازمة لتستخدم CSS في وثيقة HTML.
الكثير
من خصائص CSS تشبه تلك المستخدمة في HTML، لذلك إذا تعلمت HTML واستخدامتها لإنشاء التصاميم فأنت في الغالب ستتمكن من تعلم CSS بسهولة، لنلقي
نظرة على هذا المثال الأساسي.
القواعد الأساسية لكتابة CSS
لنقل
أننا نريد اللون الأحمر ليكون خلفية للصفحة.
باستخدام HTML يمكننا أن ننجز ذلك بهذه الطريقة:
<body bgcolor="#FF0000">
مع CSS يمكن تحقيق نفس النتيجة بكتابة هذه الأوامر:
body {background-color: #FF0000;}
كما
تلاحظ، أوامر CSS تتشابه كثيراً مع HTML، والمثال أعلاه يوضح لك الأسلوب الأساسي لكتابة CSS:
لكن
أين نضع أوامر CSS؟ هذا هو ما سنتعلمه الآن.
تفعيل CSS في صفحة HTML
هناك
ثلاث طرق يمكن أن تستخدمها لتفعيل CSS في صفحة HTML، هذه الطرق مشروحة أدناه، ونحن ننصح بأن تركز وتستخدم الطريقة
الثالثة، وهي أن تضع CSS في ملف منفصل.
الطريقة 1: ضمن وسوم HTML باستخدام خاصية style
إحدى
الطرق لتفعيل CSS في HTML هي باستخدام خاصية
style، لنأخذ مثالاً على أساس
المثال أعلاه الذي أردنا فيه استخدام اللون الأحمر كلخفية للصفحة، يمكن تطبيق هذا
الأمر بهذا الشكل
الطريقة 2: ضمت ملف HTML باستخدام وسم style
هذه
طريقة مختلفة بأنها تستخدم وسم
<style>، وهذا مثال لكيفية تطبيق
هذه الطريقة:
الطريقة 3: ملف خارجي
هذه
هي الطريقة الأفضل، وهي أن تقوم بوضع رابط لملف خارجي يحوي أوامر CSS، خلال هذا الدرس سنقوم
باستخدام هذه الطريقة لجميع الأمثلة.
الملف
الخارجي هو ببساطة ملف نصي يستخدم اللاحقة .css، ومثل الملفات الأخرى
يمكنك أن تضعه في مزود موقعك أو على القرص الصلب.
مثلاً،
لنقل أن ملف التصميم لديك اسمه style.css وهو موجود في مجلد اسمه style، هذه الحالة يمكن
توضيحها أكثر من خلال هذا الرسم
المهم
هنا هو إنشاء رابط بين ملف HTML وملف التصميم (style.css)، مثل هذا الرابط يمكن إنشاءه من خلال سطر واحد في HTML:
<link rel="stylesheet" type="text/css" href="style/style.css" />
لاحظ
كيف أن مسار الملف حددناه باستخدام خاصية
href.
هذا
الأمر يجب أن يوضع في قسم رأس الصفحة، أي بين وسمي
<head> و</head> كما في المثال
الآتي:
هذا
الرابط يخبر المتصفح بأن عليه استخدام التصميم من ملف CSS عندما يقوم بعرض ملف HTML.
الجميل
هنا أنك تستطيع ربط العديد من ملفات HTML بملف تصميم واحد، بمعنى آخر يمكن لملف تصميم واحد أن يستخدم للتحكم بتصميم
العديد من ملفات HTML.
هذه
الفكرة يمكنها أن توفر عليك الكثير من الوقت والجهد، إذا أردت مثلاً أن تغير لون
خلفية موقع يحوي 100 صفحة فملف التصميم يمكنه أن يوفر عليك الوقت فلا تحتاج إلى
تعديل 100 ملف بنفسك، باستخدام CSS يمكن تغيير ما تريد خلال ثواني بتغيير سطر واحد في ملف التصميم.
لنتدرب
على ما تعلمناه حتى الآن.
جرب بنفسك
قم
بتشغيل برنامج المفكرة (Notepad) أو أي محرر نصي، وقم بإنشاء ملفين، أحدهما HTML والآخر CSS وضع فيهما هذه المحتويات:
default.htm
style.css
الآن
قم بوضع الملفين في نفس المجلد، تذكر أن تحفظ الملفين باستخدام اللاحقة الصحيحة
لكل ملف.
قم
بفتح ملف default.htm في متصفحك وانظر إلى الصفحة وهي تحوي اللون الأحمر كخلفية، تهانينا!
لقد قمت بإنشاء ملف التصميم الأول!
100
100
100
درس 1: ما هي تقنية CSS؟
السلام عليكم ورحمة الله وبركاته.
لعلك سمعت عن CSS من قبل لكن لا تعرف حقاً ما هي، في هذا الدرس ستتعلم المزيد عن CSS وماذا يمكن لهذه
التقنية أن تقدم لك.
CSS هي اختصار لي Cascading Style Sheets.
ماذا يمكن أن أفعل بتقنية CSS؟
CSS هي لغة تصميم تحدد
شكل وثيقة HTML، فهي تهتم بالخطوط، الألوان، الهامش، والعرض والارتفاع، صورة
خلفية الموقع، وكيفية توزيع المساحات وأشياء أخرى كثيرة، انتظر فقط وسترى!
HTML يمكن أن تستخدم
بشكل خاطئ لإضافة تصميم للمواقع، لكن CSS توفر المزيد من الخيارات وهي أكثر دقة وعملية، وهي مدعومة من قبل
المتصفحات الرئيسية اليوم.
بعد
أجزاء قليلة في هذا الدرس ستتمكن من إنشاء ملف CSS الأول لكي تعطي موقعك مظهراً
رائعاً.
ما الفرق بين CSS وHTML؟
تستخدم لوضع هيكلية ونظام منطقي للمحتويات، أما CSS فهي تستخدم لإضافة تصميم لهذه المحتويات.
حسناً، قد يبدو هذا مربكاً لكن أكمل القراءة وستفهم ما قرأته قريباً.
في الماضي القريب اخترع رجل اسمه تيم بيرنرز لي شبكة الويب، في ذلك الوقت كانت HTML تستخدم فقط لإضافة هيكلية للنص، الكاتب يمكنه أن يقوم بإضافة معنى للنص بأن يقول مثلاً "هذا عنوان" أو "هذه فقرة" ويستخدم وسوم HTML مثل
<h1> و<p>.
مع ازدياد شهرة شبكة الويب بدأ المصممون في البحث عن طرق لإضافة تصميم للوثائق، ولتلبية رغباتهم قام مبرمجوا المتصفحات - نيتكسيب ومايكروسوفت - باختراع وسوم HTML جديدة مثل
<font> الذي يختلف عن وسوم HTML الأصلية بأنه يهتم بالشكل لا بالهيكلية.
أدى ذلك إلى أن تستخدم وسوم هيكلية مثل <table> بشكل خاطئ، حيث استخدام هذا الوسم لتحديد تصميم الصفحة بدلاً من إضافة معنى للنص، والكثير من الوسوم التي اخترعت مثل <blink> كانت فقط مدعومة من قبل متصفح واحد، أصبحت جملة "ستحتاج إلى المتصفح الفلاني لرؤية هذه الصفحة" مألوفة في مواقع الشبكة.
ابتكرت CSS لعلاج هذه المشكلة لأنها توفر للمصممين طرقاً فعالة وعملية لإنشاء التصاميم وهذه التصاميم ستكون مدعومة من قبل جميع المتصفحات في نفس الوقت، والفصل بين شكل الصفحة ومحتوياتها يبسط عملية إدارة الموقع بشكل كبير.ت
كيف ستفيدني CSS؟
تعتبر CSS ثورة في عالم
تصميم المواقع، وفوائدها الأساسية هي:التحكم بالتصميم من خلال ملف واحد.
- إمكانية أكبر وأدق للتحكم بتفاصيل
التصميم.
- إنشاء تصاميم خاصة لمختلف وسائل عرض
الموقع مثل الشاشات والطابعات والهواتف النقالة .. إلخ
- العديد من التقنيات والأساليب
المتقدمة في التحكم بالتصميم.
في الدرس اللاحق سننظر عن قرب إلى كيفية عمل CSS وكيف نبدأ باستخدامها.
100
100
100
افتتاح دورة لتعلم اساسيات CSS
كما وعدتكم من قبل هذه هي دورة CSS سنشرع هي الدخول اليها ونتمنى ان تنال اعجابكم
مقدمة
CSS هي أداة رائعة لإضافة تصميم لمواقعك، ويمكنها أن توفر عليك الكثير من الوقت
باستخدامها في تصميم المواقع بطريقة جديدة تماماً، وهي لغة يجب أن تستخدم من قبل
كل شخص يعمل في تصميم المواقع.
في هذا الدرس ستبدأ في تعلم هذه التقنية خلال ساعات قليلة، CSS يسهل فهمها ويمكنك أن
تتعلم كل الطرق العملية للتحكم بتصميم موقعك.
تعلم CSS عملية ممتعة، وأنت تقرأ هذا الدرس تذكر أ ن تأخذ وقتاً
لتجري بعض التجارب وترى ماذا تعلمت من كل درس.
استخدام CSS يتطلب معرفة أساسيات
HTML،إذا لم تكن تعرف HTML فيمكنك أن تبدأ بدرس
HTML قبل أن تتعلم CSS.
ما هي البرامج التي أحتاجها؟
تجنب استخدام برامج مثل فرونت بيج أو دريمويفر أو مايكروسوفت وورد عند قراءة
وتطبيق هذا الدرس، هذه البرامج لن تساعدك على تعلم CSS، بدلاً من ذلك ستعيقك وتؤخر تعلمك
للتقنية.
كل ما تحتاجه هو محرر نصي.
مثلاً مايكروسوفت ويندوز يأتي مع برنامج يسمى Notepad (المفكرة)، وهو غالباً ما يوضع في
قسم Accessories (أدوات) الذي تجده في قسم Programs (برامج)، وبإمكانك استخدام برامج
مماثلة في أنظمة التشغيل الأخرى مثل Pico في لينكس وSimple text لنظام ماك.
المحرر النصي البسيط هو أداة مثالية لتعلم HTML وCSS لأنه لا يؤثر أو يغير ما
كتبته من أوامر، بهذه الطريقة نجاحك وأخطائك تعتمد عليك وحدك وليس على البرنامج،
وهذا يبسط عملية التعلم لأنك تستطيع كشف الأخطاء بسرعة وسهولة.
يمكنك أن تستخدم أي متصفح لهذا الدرس، ونحن نشجع على أن تستخدم أحدث المتصفحات
وتقوم بتحديث متصفحك دائماً.
متصفح ومحرر نصي، هذا كل ما تحتاجه.
لنبدأ!
الخميس، 30 أبريل 2015
100
100
100
حصريا على مدونة عودة: اضخم واقوى كورس لتعلم لغة البرمجة C بالمجان
السلام عليكم ورحمة الله تعالى وبركاته.
في هذا الدرس سنقدم لكم اقوى درس لتعلم اللغة البرمجية C .
هذا الكتاب المتميز عن باقي الكتب صحيح فهو مقدم من site de Zero , لكن المهم هنا انه مجاني يعني انك ما عليك الا تحميل الكتاب والاستمتاع بالتعلم.
هذا الكتاب بالغة الفرنسية بالتاكيد.
اقدم اليكم بعض الصور:
الأربعاء، 15 أبريل 2015
100
100
100
هدية مدونة عودة: كتاب لتعلم اساسيات HTML
تنفيذا لطلبات متابعينا المتزايدة حول تعلم انشاء المواقع قررت مدونة عودة ان تقدم لكم كتاب لتعلم اساسيات HTML ويشمل كافة الدروس التي تطرقنا لها سابقا في المدونة في اضخم واكمل دورة لتعلم HTML .
هذا الكتاب يحتوي
على عشرة دروس متكاملة بحيث ستتمكن في الأخير من انشاء مواقع بنفسك.
الكتاب باللغة العربية،
يحتوي شروحات مفصلة، بالإضافة الى امثلة للتوضيح.
وهذه بعض الصور:
في انتظار صدور نسخة باللغة
الفرنسية ان شاء الله تعالى.
لتحميل الكتاب من الموقع المحبوب
ميديافير اضغط : تحميل الكتاب.
لا تنسى مشاركة الموضوع مع اصدقائك
حتى تعم الفائدة.
أتمنى ان تكونوا قد استفدتم معنا،
أي سؤال لا تتردد بتركه في مكان التعليقات وسأجيبك بإذن الله.
100
100
100
الدرس الرابع: التسميات
ستقولون ماذا نعني بالتسميات, التسميات
هي التصنيفات, يعني تصنيف شيء ما الى عدة أصناف, وهذا يكون أيضا في المواقع ليس
هذا فقط , بل هو ضروري جدا, لانه يساعد على تصفح سليم للموقع , ويعطيه جمالية من
ناحية التصميم,
فمثلا في مدونة عودة نجد مجموعة من
التسميات:
دورات, مقالات, بلوجر, برامج....الخ
في هذا الدرس ستتمكن من إضافة هذه
الميزة في مدونتك بطريقة سليمة صحيحة.
مثلا نفترض اننا سننشئ 3 اقسام
للمدونة ولتكن مثلا: برامج, انترنت, العاب.
أولا سنقوم بكتابة تدوينة, لايهم
عما تتحدث, نحتاجها فقط للحصول على روابط لهذه الأقسام الثلاثة. لاتخف يمكنك حذفها
لاحقا اذا اردت ذلك.
بعد كتابة التدوينة, في اليسار سنجد
إعدادات المشاركات, نذهب الى خانة التسميات ونكتب التصنيفات الثلاثة مع فصلهم بفواصل
هكذا: برامج, انترنت, العاب, صورة للتوضيح:
ثم نضغط تم و نقوم بنشر الموضوع.
بعد ذلك سنذهب الى خانة التخطيط في قائمة
بلوجر يمين الصفحة.
نضغط على إضافة أداة من الأفضل اسفل
الصفحة.
نختار التسميات ثم حفظ.
بعد ذلك نقوم بعرض المدونة.
سنجد التسميات على هذا الشكل:
الان سأعمل على واحدة والبقية بنفس
الطريقة.
سأنسخ رابط 'انترنت'.
الان نذهب الى القالب< تحرير HTML .
نبحث عن menu2 نلصق الرابط
واسم التصنيف كما هو موضح في الصورة:
قم بحفظ مافعلته.
الان اذهب للمدونة وانقر على انترنت.
ومبروك عليك , كما قلت سابقا, تكرر نفس الشيء مع الباقي.
لا تنسى مشاركة الموضوع مع اصدقائك
حتى تعم الفائدة.
أتمنى ان تكونوا قد استفدتم معنا، أي سؤال لا تتردد بتركه في مكان
التعليقات وسأجيبك بإذن الله.
100
100
100
الدرس الثالث: إضافة لوغو logo للمدونة
قبل الشروع في قراءة هذا الدرس
انصحك بان تتعلم بعض اساسيات ال HTML حتى تكون على دراية بما تفعله، سبق لي ان قدمت دورة حول تعلم
HTML للدخول
اليها اضغط هنا.
انت الان تعلمت ال HTML جيدا وبإمكانك متابعة الدرس معي...
جيد، كما تعلمون فأول شيء يبدا به
كل موقع, ويعطيه أهمية بالغة هو :العنوان .
انت سبق لك ان اخترت العنوان الذي
يناسبك الان اتى الوقت للعمل عليه وادراجه في موقعك.
أولا نذهب الى قالب ثم نضغط على
تحرير HTML , في خانة اكواد HTML نضغط
ctrl+F بعد ذلك نكتب title في الخانة التي ستخرج, الان ما عليك الا ان تقوم
بتغيير مدونة عودة بعنوان مدونتك. هذه الصورة ستوضح لك ما فعلناه:
الان سوف نقوم بتغيير اللوغو logo او ما يسمى بشعار المدونة .
بنفس الطريقة نبحث عن class=’ logo’ في القالب.
<img class='logo'src='http://4.bp.blogspot.com/uJ6nf0em2wM/VSVxDFfbtGI /AAAAAAAAAIo/lBNMRHlD6uU/s1600/Sans-titre-2.png'/></a>
ونقوم بتعويض الكود المكتوب بالازرق
بعنوان اللوغو الذي نريده كما في الصورة:
ملحوظة: اللوغو يجب ان يكون ملائم
حتى لا يحدث خللا في هيكلة المدونة. بحيث لا يتعدى الارتفاعpx 100 , والعرضpx 300.
ثم نعوض الرابط فوق اللوغو برابط الموقع.
لا تنسى مشاركة الموضوع مع اصدقائك
حتى تعم الفائدة.
أتمنى ان تكونوا قد استفدتم معنا، أي
سؤال لا تتردد بتركه في مكان التعليقات وسأجيبك بإذن الله.
