بلوجر سوفت: HTML

‏إظهار الرسائل ذات التسميات HTML. إظهار كافة الرسائل

السلام عليكم ورحمة الله وبركاته
اليوم معنا آداة من افضل الآدوات التي يمكنك أن تحصل عليها في عالم تطوير الإنترنت, انها الاداة الافضل firebug لتعديل صفحات الانترنت وهي قيد التشغيل !!
كما أن من فوائد الآداة التي تجعل منك مصمم محترم هي انك تقوم بتجربة ما تقوم بعمله قبل ان تطبق هذا على موقعك او مدونتك
كيف ذلك ؟ هو ما سوف نتناوله الان ,, اولاً الآداة تعمل بمنتهى الإحترافية على متصفح FireFox فقط, لذلك يلزمنا متصفح فاير فوكس يمكنك تحميل الاصدار الاخير من ( هنا )
اما عن تركيب الآداة , ادخل هنا على هذا الرابط , وتابع الصور ..

ملاحظة هامة : لرؤية صور الشرح بوضوح إضغط على الصورة مرة واحدة فقط.

بعد الدخول على رابط الآداة ستجد الموقع كهذذا
إضغط على Add to Firefox

ثم انتظر حتى يكتمل التحميل

حتى تأتي هذه النافذة و اضغط Install Now

بعد الضغط على تثبيت الاداة ستجدها هنا بهذا الشكل

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

ستجد الاداه هكذا في اسفل الموقع
مقسومة نصفين النصف الاكبر هو كتابة الـ HTML و XML
النصف الاصغر هو كتابه CSS

بقى لنا ان نحدد شئ في المدونة او الموقع و نقوم بالتعديل عليه

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

انا وقفت على عنوان موضوع انظر ,, تم تحديده بإطار ازرق
اضغط عليه الان وانظر لمكان الاداة

انظر جيداً
1- هو مكان العنوان في صفحة html
2- هو مكان العنوان في صفحة CSS

وبهذا يمكنك التعديل على اي شئ تريد

انظر هنا ,, ضغطت على فونت حتى اعدل على اي شئ اريده
وانفترض انني اريد تكبير الفونت؟؟ سأقوم بتغيير الرقم 18 الى 30 وننظر في الصورة التاليه

تم تكبير العنوان

إذا الآداة لها فائدة آخرى جميلة , وهي رؤية ما تقوم بعمله وهل هو مناسب ام لا قبل التطبيق على قالب المدونة
وإذا أردت تطبيق ما فعلته في المدونة فانظر الصورة التالية

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

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

وبهذا ايضاً ينتهي موضوعنا

اترككم في حفظ الله

السلام عليكم

السلام عليكم ورحمة الله وبركاته ..

درسنا اليوم من اوائل دروس دورة تعلم الكتابة لغة CSS
يدور حول اساسيات و قواعد لابد من توفرها حتى يتاح لك استخدام هذه الخاصية بنجاح.
بالنسبة للمدونات بلوجر فدائماً هنام قاعدة ثابتة وهي , اكواد CSS تبدأ بوسم وتنتهي بوسم كما التالي:

<b:skin><![CDATA[
body {
background: #00CCFF;
margin: 0;
padding: 0;
color: #333333;
font: normal normal 14px 'Droid Arabic Naskh',Arial,Tahoma,Sans-Serif;
text-align: center
}
a:link,a:visited {
color: #13A7DA;
text-decoration: none;
outline: none;
}
a:hover,a:active {
color: #292929;
text-decoration: none;
outline: none;
}
]]></b:skin>

اما في المواقع والمدونات الآخرى وايضاً بلوجر يتم استخدام الآكواد بالشكل التالي:

<style type='text/css'>
body {
background: #00CCFF;
margin: 0;
padding: 0;
color: #333333;
font: normal normal 14px 'Droid Arabic Naskh',Arial,Tahoma,Sans-Serif;
text-align: center
}
a:link,a:visited {
color: #13A7DA;
text-decoration: none;
outline: none;
}
a:hover,a:active {
color: #292929;
text-decoration: none;
outline: none;
}
</style>

ما هي القاعدة الثابتة في كتابة أكواد CSS ؟ التالي ..

#outer-wrapper {padding: 3px;}

سوف نأخذهم بالتدريج من الشمال لليمين ونشرح اسم كل جزء ملون في هذا الكود

# المعرف الذي يوضع في صفحات html والذي يسمى id ويمكن ان يكون مكانه فئة وهي النقطة التي تسمى class , ويمكن استخدام كل شئ في صفحة html من روابط و معرفات وفئات

outer-wrapper يسمى في الكود Selector او المُحدد ولا يشترط ان يكون outer-wrapper, بل المقصود الموضع نفسه في الكود

} بداية كتابة الكود

padding هي من ضمن الخصائص التي تتحكم في تصميم الموقع او المدونة , وليس المقصود هنا padding بل المقصود المكان نفسه في الكود وينتهي دائماً ب نقطتين فوق بعضهم هكذا :

3px هذا المكان في الكود يُسمى value او القيمة المعطاه للخاصية المحددة

; الفاصلة المنقوطة تكون فاصل بين كل كود والاخر مثال الكود هذا

#outer-wrapper {padding: 3px; margin: 0px;}

{ نهاية مجموعة الأكواد كما في الكود السابق هذا

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

اترككم في رعاية الله إلى درساً جديد من دروس الدورة

السلام عليكم ورحمة الله وبركاته
درسنا اليوم من دروس دورة تعلم تقنية CSS وهو التعرف على الفئات والمعرفات id و class والفرق بينهم
الـ id و الـ class هما المعرفات الاساسية التي توضع داخل وسوم HTML و XML لتتعرف عليها تقنية الـ CSS ويتاح لك التعديل على كل كبيرة وصغيرة بالموقع من خلفية للموقع واطارت و الوان للخطوط و الوان لكل شئ و خلفيات للصور و تحديد حجم الصور و الخطوط ايضاً وشكلها
باختصار تستطيع ان تقول ان تقنية الـ CSS مسئولة عن كل شئ مرتبط بشكل وتنسيق وتصميم الموقع.

إجابة سؤالنا, ما هو id وما هو class والفرق بينهم، التالي :
id يسمى مُعرف .. class يسمى فئة
id يمكن أن يندرج تحته فئات كثيرة ولا يمكن ان يتكرر اسمه .. class يمكن ان يتكرر اسمه مرات ومرات على عكس id
id يكتب قبله # .. class يكتب قبله دائماً . نقطة ,, ودعونا نأخذ مثال عملي :

-id مكتوب في صفحة HTML:

<div id='welcome'>to MiniSoft</div>

-id مكتوب في صفحة CSS

#welcome {
color: #000000 ;
font: normal normal 12px Tahoma, Geneva, sans-serif;
}

نلاحظ أن id اصبح ( # ) وكتبت بجانبه welcome لأنها مكتوبة بجانب id في صفحة HTML

-class مكتوب في صحفحة HTML

<div class='mini'>soft</div>

-class مكتوب في صفحة CSS

.mini {
background-color: #CC0000;
text-align: center;
}

نلاحظ أن class اصبح نقطة ( . ) و كتبت بجانبها mini لأنها مكتوبة بجانب class في صفحة HTML

نأخذ مثال آخر على كيفية تكرار الفئة class :

<div class='mini'>ميني سوفت على تويتر</div>
<div class='mini'>ميني سوفت على جوجل كروم</div>
<div class='mini'>ميني سوفت ع الفيس بوك</div>

كل هذه الوسوم المتشابهه تكتب في صفحة CSS هكذا:

.mini {
background-color: #CC0000;
text-align: center;
}

.إذاً فهمنا أن الوسم هو الملون و الذي يوجد بداخله كلمات كما رأينا, هذا بعكس المعرف id لا يمكن ان يتكرر نفس الوسم في نفس الصفحة او القالب كاملاً,,,

اتمنى ان تكون وصلت المعلومة والى اللقاء ان شاء الله في درس آخر من دروس الدورة

السلام عليكم

بلوجر سوفت

الآداة السحرية firebug للتعديل على صفحات الإنترنت Online مباشرتاً

الآداة السحرية firebug للتعديل على صفحات الإنترنت Online مباشرتاً

قواعد اساسية لابد منها لتعريف كتابة اوامر الـ CSS

قواعد اساسية لابد منها لتعريف كتابة اوامر الـ CSS

ما هو id وما هو class والفرق بينهم

ما هو id وما هو class والفرق بينهم