كما نعلم أن لكل سجن سجّانون .. في هذا المقال سنتعرف على بعضٍ من هؤلاء السجانين ..
أهناك سجّانون غير الـ PHP .. وما فائدتهم؟
بالطبع هنالك سجّانون غير الـ php أي لغات مساعدة وتتلخص فائدتهم في التالي :
إن الـ PHP لغة للتعامل مع السيرفرات وتعتبر شبه معدومة من ناحية العرض في المتصفح ..
اللغات المساعدة للـ PHP و لغيرها تعتبر من لغات المتصفحات .. حيث تطفي جمالاً للصفحة ولكنها لغات ساكنة ..
من هؤلاء السجانين : html – css – JavaScript – xml
وهنالك لغات تم دعمها من قبل الـ PHP حديثاً مثل SimpleXML و AJAX ..
سأتحدث عن كل لغة قليلاً ..
السجّان الأول : الـHTML
لغة الـ html أو اللقب الحركي لها (أقصد اسمها) هتمل ..
تعتبر من أشهر لغات الآنترنت .. و هي تعتبر إحدى أشهر لغات المتصفحات ..
وإن كنت لا أحبذ تسميتها لغة حقيقة .. ولكن ليس هذا موضوعنا ..
بالتأكيد أنك سمعت عنها .. و يكمن سبب شهرتها في أنها شهدت بداية عصر الآنترنت ..
وكانت ولازالت هذه اللغة تستخدم لكتابة صفحات انترنت تستعرض من قبل المتصفحات المختلفة ..
ولربما كانت في بدايتها لغة جافة قليلاً .. بسبب أن مستخدميها أصلاً جافيين من الرياضيين و الفيزيائيين و العساكر ..
لذلك كانت تلبي مطالبهم البسيطة دون الحاجة لمزركشات لا مكان لها عندهم ..
وبقيت تتطور إلى أن وصلت لمستواها الآن ..
و اسمها أخذ من أوائل حروف Hyper Text Markup Language
وكأغلب لغات المتصفحات تتكون هذه اللغة من وسوم مختلفة أي tags
يمكن بين .. ويبقى المتصفح يقرأ ما بعد هذا الـ tag على أساسه حتى تأمره بالتوقف عن طريق ..
دعنا نأخذ كلام على هذا الكلام الوسم المشهور title
كود:
<title> My Page </title>
وهذا يعرض لك عنوان الصفحة My Page
سنضطر لإنهاء هذا الفصل لأنه كله عرض معلومات معروفة لديك ..
وكما ذكرت آنفاً انه يجب أن تكون تعرف في الـ HTML ولو قليلاً ..
السجّان الثاني : الـCSS
أنها لغة يتم استخدامها مع الـ html بشكل كبير ولكنها تستخدم رغم ذلك مع جميع اللغات لسهولتها ومرونتها و تم اخذ اسمها من أوائل حروف الكلمات
Cascading Style Sheets
ويعني صفحات الأنماط القياسية .. و يكمن مرونة هذه اللغة في جعلك تتحكم في آلاف الصفحات بل ملايين الصفحات من ملف واحد يقع تحت امتداد CSS لذلك هي لغة جميلة و مفيدة لكل مبرمج ..
ولهذه اللغة ثلاث حالات لكيفية إدراجها في الصفحات ..
أولاً بواسطة وضعها في الصفحة نفسها في الوسم head
بهذه الطريقة
كود:
<head>
<title> My Page </title>
<style>
النمط هنا
</style>
</head>
والطريقة الثانية بواسطة إدراجها في ملف منفصل كما ذكرت سابقا يقع تحت امتداد CSS
ومن ثم إدراجه في صفحة الـ html بواسطة
كود:
<link rel ="stylesheet" type="text / css" href = File.css" />
وهنالك طرق أخرى ولكنها غير مفيدة لك ..
طريقة كتابة الأوامر ..
يتم كتابة أوامر هذه اللغة بين وسمي و كما رأيت سابقاً ..
فلنأخذ مثال بسيط :
كود:
<style>
P {
color : #FFF000 ;
} فلنشرح الكود السابق ..
أولاً بدأنا الكود بـ وهو وسم البداية ..
من ثم تطرقنا لـ P أو the Tag P يعني الوسم P و نعطيه كود لون color ومن ثم فتحنا بداية الكتابة بواسطة } ومن ثم كتبنا النمط القياسي لـ P بحيث أن أي شيء ينخرط تحت الوسمين
و
سيكون لونه #FFF000 .. و من ثم انهينا النمط بالفاصلة المنقوطة و انهينا الكتابة كلها ..
مثال آخر ..
كود:
<style>
a {
color : #FFF000 ;
font-size : 12px ;
}
</style> كما ترى أعطينا الوسم a لون #FFF000 و حجم 12 بكسل ..
الـ Classes في CSS :
الكلاسات في الـ CSS أو ما يعرف بنظام الفئات ..
حيث انك يمكن أن تخصص ستايل معين لنمط معين ..
مثلاًً. : هنالك
تريد أن يكون لونه احمر بينما الآخرون اسود أو ازرق
المهم أنت تريد أن تميز هذا النمط عن غيره تتساءل كيف يتم ذلك ..
يأتي لك الكلاسات وتحل لك هذه المشكلة بالمثال التالي :
كود:
<style>
.redfont {
color : #FF0000 ;
}
</style> وفي الـ Html ..
كود:
<p class="redfont"> My Red Name :D </p>
كما ترى بالمثال السابق ...
وضعنا اسم الكلاس redfont وقبله نقطة .. وبذلك يمكنك استخدام الكلاس .. على أي شيء .. وإذا أردت التخصص أكثر فضع قبل النقطة اسم الـ tag الذي ينتمي له هذا الكلاس
وفي مثالنا هذا هو p
ومن ثم قمنا بعرض الناتج في الـhtml وتعريف الكلاس class="redfont"
بسيط أليس كذلك ؟؟ ..
أشباه الفئات :
تعرفنا في السابق على الفتات الآن سنتعرف على أشباهها ..
رغم إنني اعترض في بعض الأحيان على تسميتها أشباه فئات .. لأننا في الغالب لا نتحكم بتسميتها ويكون المتحكم بها هو الـ CSS أو tag نفسه ..
لربما تنظر وتقوم ما هذا التشعب فئات وأشباه فئات (شبه جملة في محل رفع خبر
)
ولكن عزيزي المسجون لا تخف إنها بسيطة جداً.. فلنأخذ مثالاً بسيط في تنسيق الروابط التشعبية ...
كود:
a { color:#0000ff ; text-decoration:none }
a:hover { color:#efb026 ; text-decoration:underline}
a:active { color:#ff0000 }
a:visited { color:#ab1784} كما ترى في المثال السابق أننا فمنا أولاًً بتحديد اللون للرابط الذي لم يتم زيارته بعد أو الرابط بشكل عام وحددنا اللون 000ff و text-decoration أي ديكور النص أو بالأحرى وجود خط تحت النص وما شكله أو لا .. نحن هنا وضعنا القيمة لا بكلمة none
ومن ثم قمنا بالآنتقال لـ hover وهذه الخاصية بمجرد أن يلامس الماوس الرابط فإنه يتحول للون آخر ألا وهو البرتقالي .. وسيتم وضع تحت خط
text-decoration:underlin
أما Active فانه في حال ضغط عليها الماوس سيتحول لونها لأحمر وذلك ما قبل الدخول ..
يعني اضغط بالماوس عليها و ابقي يدك ضاغطة ومن ثم ابعد الماوس عن الرابط ستجد انها حمراء بمجرد ان تضغط في مكان آخر يذهب اللون ..
الأن visited فانك تغير لون الرابط الذي تمت زيارته مسبقاً حتى تخبر الزائر انه زار هذا الرابط مثلاًً ..
هذا بالنسبة لأشباه الفئات
الـ ID أو المعرف :
انه يشبه الـ classes و يمكنك استخدامه متى احتجت إليه
يأتي لك الكلاسات وتحل لك هذه المشكلة بالمثال التالي :
كود:
<style>
#right {
text-align : right ;
}
</style> وفي الـ Html ..
كود:
<p id="right"> GO </p>
المثال لا يحتاج لشرح ..
هذه بعض الأساسيات يا عزيزي المسجون
لربما مستقبلا يتم التطرق بشكل أكبر لبعضها ان احتاج الأمر
أما الآن يمكنك أخذ استراحة والذهاب للزنزانة
ولنا لقاء
تاريخ الكتابة : 20 يوليو 2006