[سجن البرمجة] بعضٌ من السجّانين
مدرج تحت قسم: دروس
كما نعلم أن لكل سجن سجّانون. في هذا المقال سنتعرف على بعضٍ من هؤلاء السجانين.
أهناك سجّانون غير 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> و كما رأيت سابقاً، فلنأخذ مثال بسيط :
<style>
P {
color : #FFF000 ;
}
</style>
أولاً بدأنا الكود بوسم البداية <style>، ومن ثم تطرقنا إلى 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> 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}
كما ترى في المثال السابق أننا فمنا أولاً بتحديد اللون للرابط الذي لم يتم زيارته بعد أو الرابط بشكل عام وحددنا اللون 0000ff و text-decoration أي ديكور النص أو بالأحرى وجود خط تحت النص وما شكله أو لا. نحن هنا وضعنا القيمة لا بكلمة none.
ومن ثم قمنا بالآنتقال إلى hover وهذه الخاصية بمجرد أن يلامس الماوس الرابط فإنه يتحول للون آخر ألا وهو البرتقالي. وسيتم وضع تحت خط text-decoration:underlin.
أما Active فانه في حال ضغط عليها الماوس سيتحول لونها لأحمر وذلك ما قبل الدخول، يعني اضغط بالماوس عليها و ابقي يدك ضاغطة ومن ثم ابعد الماوس عن الرابط ستجد انها حمراء بمجرد ان تضغط في مكان آخر يذهب اللون.
الأن visited فانك تغير لون الرابط الذي تمت زيارته مسبقاً حتى تخبر الزائر انه زار هذا الرابط مثلاً.
ID أو المعرف
انه يشبه classes و يمكنك استخدامه متى احتجت إليه، يأتي لك الكلاسات وتحل لك هذه المشكلة بالمثال التالي:
<style>
#right {
text-align : right ;
}
</style>
وفي HTML.
<p id="right"> GO </p>
المثال لا يحتاج لشرح. هذه بعض الأساسيات يا عزيزي المسجون لربما مستقبلا يتم التطرق بشكل أكبر لبعضها ان احتاج الأمر، أما الآن يمكنك أخذ استراحة والذهاب للزنزانة.
جزاك الله خير وماقصرت في الحقيقة
وليس لدي أي إضافة أو إستفسار
بارك الله فيك اخي دكتور نبهان
متابع بشدة لما يستجد في سجننا البرمجي
وبإنتظار المزيد من مواهب السّجان ..
جزاك الله خيرا واثابك على معلوماتك
الموضوع رائع جداً جزاكم الله خيراً و إلى الأمام دائماً
السلام عليكم
يعطيك العافية ، ولكن بعض الأمثلة لم تظهر ، لم يظهر سوى المستطيل الرمادي
شكراً على التنبيه
تم إصلاح المشاكل
thaaaanx for that