الدرس الرابع - استخدام بي اتش بي مع هتمل في اكثر من مكان

[3:09 م | ]

بسم الله الرحمن الرحيم

الحمد لله رب العالمين والصلاة والسلام علي افضل الرسل اجمعين رسول الحق بلغ الرساله وادي الامانه ونصح الامه وكشف الله به الغمه وجاهد في الله حق الجهاد حتي اتاه اليقين اللهم اجزه عنا خير ما جزيت به نبيا عن قومه ورسولا عن امته واجمعنا معه واسقنا من حوضه واجعله شفيعا لنا امين يارب العالمين اما بعد

لغه البي اتش بي متفاهمه تماما مع لغه الهتمل اي ان ملف البي اتش بي يمكن ان يحتوي علي وسوم هتمل كما ان كود البي اتش بي يمكن ان يحتوي علي وسوم هتمل ويمكن وضع كود بي اتش بي في اكثر من مكان في ملف البي اتش بي الخاص بنا كما سنوضح ..

مقدمة عن الـ HTML واجبه لمن لا يعلمها:

اولا لمن لا يعرف وسوم هتمل HTML TAGS فهي ابسط طريقه لعمل ملف ويب كما انه من يبدء بلغه البي اتش بي يجب ان تكون له خبرة كافيه بالهتمل ولكننا هنا لمن لا يعرف اللغه سنمر علي اهم ما بها سريعا جدا علي ان يكون علي من لا يعرف عن تلك اللغه ان يتعلمها اولا فتعلمها قد لا يأخذ يومين بالكثير

لغه HTML او كما افضل ان اسميها وسوم html هي مجموعه من الوسوم (اي الاقواس) تعطي صفحة الويب الخاصه بنا شكلا وتنسيقا فتوجد وسوم لتغير لون الخط واخري لتحديد حجمه واخري لعمل الفقرات واخري لادراج صور بالصفحه كما يمكن ربط اكثر من صفحه ببعض

وسوم هتمل لا تحتاج لسرفر لتشغيلها بل لتشغيلها ورؤية النتيجه كل ما عليك فعله هو عمل ملف وتعطيه الامتداد .html او .htm مثلا سنقوم الان بعمل ملف نسميه test.html ونضعه علي سطح المكتب

للتعديل علي ذلك الملف سنقوم بفتحه بأستخدام الـ notepad من open with ونبدء الكتابه فيه

اي ملف هتمل يجب ان تكون له تركيبه اساسيه

فالملف به header وهو الجزء الذي لا يظهر من الصفحه قد تحتوي علي العنوان <title> بالاضافه لبعض الاكواد كأكواد نريد تحميلها سريعا قبل تحميل الصفحه نفسها ..

الجزء الثاني هو body وهو الجزء الظاهر في الصفحه اي محتويات الصفحة فعلا

ولتوضيح ذلك نبدء بكتابه ملف الهتمل الخاص بنا:

<html>
<head> <title> title here </title> </head>
<body>
html tags here
</body>
</html>

فكما هو واضح ملف الهتمل يبدء بـ <html> وينتهي بـ </html> وينقسم الي رأس يبدء بـ <head> وينتهي بـ </head> قد تحتوي الرأس علي وسوم اخري كوسم العنوان <title> وغيرها والجزء الثاني من ملف الهتمل هو الـ جسم يبدء بـ <body> وينتهي بـ </body>

سنضع هنا كود هتمل به وسوم لاظهار العناوين والفقرات واضافه سطر جديد وهي اكثر ما سنستخدم

<html>
<head> <title> title here </title> </head>
<body>
<h3> All My Life For Allah </h3>
<p>In this site you can see a lot of topics about islam and muslims, tech some things about islam, and you can add topics by sending your topics to us to share it in our site. You can also help growing this site by invite your friends or sharing our topics. <p>
<div> help us by sharing our site </div>
<br /> 
<div> thank you for viewing this topic</div>
</body>
</html>

وسيكون الناتج عند فتح الملف بأستخدام متصفح كجوجل كروم او الفيرفوكس كالتالي :

نلاحظ ان الوسم <h3> يظهر عنوان ويوجد له 6 قيم من 1 الي 6 حيث ان 1 هو اكبر حجم للعناوين و 6 اقلهم ويجب غلقه بـ </h3>
الوسم <p> اذا اردنا كتابه فقرة منسقه
الوسم <div> قد نتعرف عليه لاحقا ولكن كل ما اريد ان اقوله الان انه في البدايه ظهرت لغه هتمل لتنسيق صفحات الويب البسيطه ومع التطور اصبح يجب فصل التصميم عن التنسيق عن البرمجه وظهرت لكل منهم لغات مثلا التنسيق بأستخدام html والبرمجه بأستخدام php والتصميم بأستخدام لغه كـ CSS والوسم <div> يساعدنا جدا في فصل التنسيق عن التصميم
الوسم </br> كأنك تضغط علي زر Enter في الكيبورد اي يجعل هناك سطر جديد ونلاحظ انه وسم وحيد لذلك يجب ان يغلق بـ / وفي اللغه المتطوره من html والتي تسمي xhtml اذا لم نفعل ذلك فسيؤدي الي خطأ ..

الان تعرفنا عن اهم النقاط الخاصة بالـهتمل ولمن يريد المزيد سيجد مصادر كثيرة علي الانترنت

فصل التنسيق والتصميم والبرمجه:

كما قلنا سابقا فأن عن ظهور لغه هتمل كان يتم بها عمل كل شيء خاص بالصفحه من تنسيق وتصميم (بأستخدام طرق كطريقه الجداول) وحتي برمجه اسكربت فكان يتم بأستخدام هتمل وكانت في وقتها تلك الطرق فقيرة جدا ولا نستطيع من خلالها عمل تطبيقات ديناميكيه تتعامل مع قواعد البيانات وغيرها

لكن مع مرور الوقت وظهور لغات اخري كنا في حاجه الي فصل البرمجه عن التصميم عن التنسيق بمعني ..

التنسيق للصفحه يتم بـ HTML بتقسيم الصفحة لـ head و body بالاضافه لاستخدام بعض الوسوم الخاصه بالتنسيق ك <br / >
التصميم وهو الوان الصفحة واحجام والوان وانواع الخطوط و اماكن الصور والقوائم وهو ما يعرف في التطبيقات بالقالب او التمبلت وهذا يتم بأستخدام لغه تعرف بـ CSS قد نتعرف عليها ان اعاننا الله علي انهاء تلك الدورة بفضله
البرمجه بمعني الوظائف التي يقوم الاسكربت بعملها تتم بأستخدام لغه كـ PHP او ASP وتوجد لغات اخري كروبي وغيرها وبما اننا سنتحدث عن البي اتش بي فسنوضح الان كيفيه دمج وسوم التنسيق HTML مع اكواد البرمجه PHP

استخدام هتمل مع بي اتش بي:

اولا لكتابه كود بي اتش بي يجب ان يكون امتداد الملف كما قلنا سابقا php وليس html ولكن وسوم الhtml يمكن ادراجها في ملف php بسهوله وبدون تعقيد

الامثله ستوضح لنا :

سنقوم في ملف الـ public_html او الـ www الخاص بنا عمل ملف نسميه test.php ونضع به الكود التالي :

<html>
<head> <title><?php echo "All My Life For Allah"; ?> </title> </head>
<body>
<h3><?php echo "All My Life For Allah"; ?> </h3>

<?php
print"<p>In this site you can see a lot of topics about islam and muslims, tech some things about islam, and you can add topics by sending your topics to us to share it in our site. You can also help growing this site by invite your friends or sharing our topics.<p>"
?>

<div> help us by sharing our site </div>
<br /> 
<div> thank you for viewing this topic</div>
<br />
<?php
echo "Note that: we can embed more than php code in the page";
?>
</body>
</html>

وسيكون الناتج في المتصفح كالتالي:

لاحظ اننا قمنا بأدخال وسوم هتمل بداخل كود البي اتش بي.
لاحظ ايضا اننا قمنا بأستخدام كود بي اتش بي في اكثر من مكان بالصفحه وهنا يجب الاشارة الي ان عندما يقوم الـ pointer الخاص بمحرك اللغه بقرأة ذلك الكود فأنه سيقرأه ككود واحد فمثلا يقوم المحرك بقرأة الملف كالتالي يبحث عن <?php ثم يبدء بقرأة الكود الذي بعدها الي ان يصل الي النهاية ?> ثم يبدء بالبحث عن <?php الاخري وهكذا الي نهاية الملف.
ايضا قمنا بكتابة اكواد بي اتش بي بداخل وسوم الهتمل.

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

الرابط علي المدونة : الدرس الرابع