تجربة قوالب

بسم الله , الحمد لله ..

<img src='رابط الصورة'/>

الذي يظهر على الصفحة الصورة فقط وعند الضغط عليها لا يحدث اي شئ.

<a href="رابط الموقع">Mini Soft</a>

الذي يظهر على الصفحة هو عبارة Mini Soft وعند الضغط عليها يتم التحويل الى صفحة تويتر وهذا الكود هام جداً.

<a href='رابط الموقع'><img src='رابط الصورة'/></a>

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

<a href='رابط الموقع' target='_blank'></a>

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

<a href='رابط الموقع' target='_blank' title='نبذة عن الموقع'></a> 

أكواد أخرى شائعة الإستخدام :

<b>Mini Soft</b>

 <i>Mini Soft</i>

<u>Mini Soft</u>

<center>mini soft</center>

السلام عليكم ورحمة الله وبركاته
اليوم معنا آداة من افضل الآدوات التي يمكنك أن تحصل عليها في عالم تطوير الإنترنت, انها الاداة الافضل 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 ؟ التالي ..

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

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

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

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

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

  #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 لا يمكن ان يتكرر نفس الوسم في نفس الصفحة او القالب كاملاً,,,