بسم الله الرحمن الرحيم
الحمد لله رب العالمين والصلاة والسلام علي افضل الرسل اجمعين رسول الحق بلغ الرساله وادي الامانه ونصح الامه وكشف الله به الغمه وجاهد في الله حق الجهاد حتي اتاه اليقين اللهم اجزه عنا خير ما جزيت به نبيا عن قومه ورسولا عن امته واجمعنا معه واسقنا من حوضه واجعله شفيعا لنا امين يارب العالمين اما بعد
اذا اردت النشر الرابط الاصلي علي مدونتي
عند ظهور لغه هتمل كان يتم بها عمل كل شيء خاص بالصفحه من تنسيق وتصميم (بأستخدام طرق كطريقه الجداول) وحتي كتابة تطبيق او سكربت فكان يتم بأستخدام هتمل وكانت في وقتها تلك الطرق فقيرة جدا ولا نستطيع من خلالها عمل تطبيقات ديناميكيه تتعامل مع قواعد البيانات وغيرها لكن مع مرور الوقت وظهور الحاجة لتطبيقات اكثر تطورا وظهور لغات اخري كنا في حاجه الي فصل البرمجه عن التصميم عن التنسيق بمعني ..
مقدمة عن الـ 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> <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> <div> thank you for viewing this topic</div> <?php echo "Note that: we can embed more than php code in the page"; ?> </body> </html>
وسيكون الناتج في المتصفح كالتالي:
لاحظ اننا قمنا بأدخال وسوم هتمل بداخل كود البي اتش بي.
لاحظ ايضا اننا قمنا بأستخدام كود بي اتش بي في اكثر من مكان بالصفحه وهنا يجب الاشارة الي ان عندما يقوم الـ pointer الخاص بمحرك اللغه بقرأة ذلك الكود فأنه سيقرأه ككود واحد فمثلا يقوم المحرك بقرأة الملف كالتالي يبحث عن <?php ثم يبدء بقرأة الكود الذي بعدها الي ان يصل الي النهاية ?> ثم يبدء بالبحث عن <?php الاخري وهكذا الي نهاية الملف.
ايضا قمنا بكتابة اكواد بي اتش بي بداخل وسوم الهتمل.
استخدام الـ CSS مع كلا من HTML و php :
توجد ثلاثة طرق تقوم عن طريقها باستخدام لغة التصميم CSS
الاولي: عن طريق الوسم <style>
الثانية: عن طريق الخاصية style في اي وسم نريد ان نعطيه خصائص معينة
الثالثة: بوضح التصميم في ملف منفصل وهي الطريقة المتبعة دائما وبكن في كثير من الحالات نستخدم الطرق الاخري حسب الظروف
وليس هذا مقام تفصيلي وشرح وانما هو توضيحي فقط فساكتفي بهذا القدر وسأكمل في موضوعات اخري تخص البرمجة والتصميم فتابعونا