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

إخوتي الكرام أهلا بكم في الدرس الثاني من الدورة ..
لنبدأ الدرس مباشرة :

ماهي الشبكة العالمية World Wide Web ؟

كلكم يكتب ثلاث حروف في بداية كل عناوين المواقع
التي يزورها على الانترنت ألا وهي (www)
وهذه الحروف هي اختصار لجملة World Wide Web أو ختصارا Web أو W3.


الويب Web هي شبكة تربط جميع أجهزة العالم ، مما يتيح لجميع الأجهزة المربوطة مع بعضها البعض في الشبكة (الويب Web) للإتصال ببعضها ،

وهذه الأجهزة مربوطة ببعضها عبر بروتوكول معتمد متعارف عليه في الشبكة Web ألا وهو HTTP والذي يرمز إلى Hyper Text Transfer Protocol.

ولذلك نحن نكتب في بداية عنوان أي موقع نريد أن نزوره هذه الحروف ..
http://www

ثم نكتب اسم الموقع وامتداده ، فهذا السطر يعني .. أننا نريد الموقع الفلاني الموجود على الشبكة www والذي نود الاتصال به عبر البروتوكول http ،

والبروتوكول هو عبارة عن طريقة أساسية لا بد منها لدخول المواقع ، و

يوجد أيضا بروتوكولات أخرى تهم أصحاب المواقع مثل بروتوكول : FTP والتي ترمز إلى File Transfer Protocol وهو يستخدم لنقل الملفات من الجهاز إلى السيرفر والعكس.


أما الجملة التي نقوم بكتابتها بعد http://www على سبيل المثال :
http://www.islammen.net تنقسم إلى قسمين ، القسم الأول هو اسم النطاق الدومين islammen والقسم الثاني هو الامتداد .com وهو عبارة عن تصانيف لفهرسة المواقع وتمييزها عن بعضها:

فمثلا com يرمز إلى commercial أي (تجارة) و net ترمز إلى network أي (شبكة) و org ترمز إلى organization أي (منظمة) و edu أي (education) أي تعليم ..


وهناك الكثير من الامتدادات التي يمكن استخدامها.
وأخيرا يسمى هذا السطر كله URL اختصارا لـ Uniform Resource Locator.

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

كيف تعمل الـ(WWW)؟


والآن بعد أن عرفنا ما هي الـWWW وما هو HTTP

نود أن نعرف كيف تعمل الشبكة ، فكما وضحنا سابقا أن WWW :

هي عبارة عن مجموعة كبيرة من الأجهزة حول العالم مربوطة مع بعضها البعض ،
وقد اعتمد أصحاب هذه الأجهزة بروتوكول HTTP للاتصال ببعضهم البعض ،
ولكن بعض الأجهزة خصصها أصحابها ليضعوا عليها بيانات وملفات تستطيع الأجهزة الأخرى المربوطة بالشبكة استعراضها ،
وهذه الأجهزة تسمى بالخوادم أو السيرفرات Server وهي أجهزة كمبيوتر عادية لكن مواصفاتها ضخمة ، يعني أن الرام يكون ضخم والمساحة تكون عملاقة والمعالج البروسيسور يكون سريع جدا وهكذا ..


أما الأجهزة التي تقوم بتصفح البيانات الموجودة في أجهزة السيرفر تسمى العميل Client ، وأجهزة العميل حتى تتصفح البيانات الموجودة على الخوادم (السيرفرات) تحتاج إلى برنامج يسمى المتصفح Explorer وهناك عدة أنواع من المتصفحات ،

منها Internet Explorer التابع لشركة مايكروسوفت ويوجد Netscape ويوجد Mozilla ، حيث يستخدم المتصفح لإرسال عنوان الموقع URL إلى الشبكة Web ،

حيث تبحث الشبكة عن هذا العنوان والذي يكون مربوطا بالسيرفر ، فكل سيرفر على الانترنت له عنوان رقمي يسمى IP Address اختصارا لـ Internet Protocol ، يتم ربطه باسم النطاق الـ URL عبر وسيلة تسمى DNS اختصارا لـ Domain Name System ، وبعد أن تجد الشبكة web العنوان المطلوب تقوم بالدخول إلى السيرفر وإرسال البيانات المطلوبة إلى الجهاز العميل وتظهر له البيانات ضمن شاشة المتصفح ،

هذا هو مبدأ عمل الانترنت ، نحن ما يهمنا هنا هو شيء واحد فقط ، هو السيرفر ، فنحن بكوننا سنتعلم البرمجة بلغة HTML وPHP فنحن سنكون الطرف السيرفر ضمن هذه الشبكة ، حيث سنقوم بعمل مواقع وبرامج نعرضها على سيرفر حتى يستطيع العملاء تصفح هذه البيانات ، أما باقي الأطراف فلا يهمنا الخوض في تفاصيلها إنما ذكرناها للمعرفة فقط ، فهي متوفرة ضمن أي نظام تشغيل كأساسيات لا يمكن الاستغناء عنها.



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

كيف يعرض المتصفح البيانات ؟

هنا يأتي دور لغة HTML والتي ترمز إلى Hyper Text Markup Language ، فهي المسئولة عن عرض البيانات على شكل صفحات في المتصفح أو المستعرض ، فلغة HTML هي عبارة عن مجموعة من الأوامر التي يفهمها المتصفح بطريقة خاصة ويحولها إلى صفحة بيانات يعرضها بشكل منسق وجميل للعميل.


وهذه الأوامر تسمى Tags (الأوسمة) فنحن عندما نريد تعلم البرمجة بواسطة HTML إنما نقوم بحفظ هذه الأوسمة Tags ومعرفة وظيفة كل وسم ، أي ما الناتج الذي سيظهر في المتصفح إذا كتبنا وسما معينا.



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

ما هو ملف HTML ؟

هو ملف نصي يحتوي على أوسمة HTML التي تخبر المتصفح كيف يعرض الصفحة ويكون امتداد ملفات HTML كما يلي : PAGE.html أو PAGE.htm ..

طبعا كلمة PAGE هي اسم الصفحة.
يمكن استخدام أي محرر نصوص لكتابة أكواد HTML ولكن نحن سنستخدم كما اتفقنا في الدرس الأول PHP Coder أو أي محرر نصوص HTML و PHP وذلك لأمرين ،

الأول: أن المحررات المتخصصة هذه تقوم بتلوين الأكواد مما يسهل علينا قرائتها لاحقا
لتعديلها أو إصلاحها ،

وثانيا: تحتوي هذه المحررات على مرجع لأوسمة HTML
وذلك ليسهل عليك الرجوع إليها بدلا من حفظها ، فحفظها مستحيل على ما أظن!


لنبدأ البرمجة !

قم بتشغيل المحرر الذي تستخدمه ، ويفضل أن يكون PHP Coder .. اكتب الشفرة التالية :


كود PHP:
                       <html
<
head
<
title>موضوع الصفحة</title
</
head

<
body
أول صفحة أكتبها بلغة HTML. <bهذا النص عريض.</b
</
body
</
html

احفظ الصفحة باسم mypage.html ،
داخل المجلد www الموجود داخل مجلد wamp الموجود في القرص C..



ملاحظة هامة: ( أهم شيء في الحياة هو التنظيم ،
ولقد أصبح الكمبيوتر جزءا من حياتنا ،
فيجب على كل واحد منا أن يكون منظما حتى في كمبيوتره ،
لذا يستحسن أن تقوم بعمل مجلد خاص لكل درس داخل المجلد www ،
وعليك أن تحفظ الملفات التي تقوم بكتابتها بأحرف انجليزية صغيرة وواضحة وتعبر عن الكود المكتوب بداخلها وتكون بنفس النسق أو الإمتداد ، حتى يسهل عليك لاحقا إذا كثرت ملفاتك أن تميزها من بعضها فتطورها أو تصلح أخطاء معينة فيها ).

عند حفظ الملف لا تنسى أن تكتب اسم الملف مع الامتداد ..

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

لنشرح الأوسام التي كتبناها !

أول وسم تكتبه في ملف HTML هو <html> ، هذا الوسم يخبر المتصفح أن هذه هي بداية ملف HTML ، بينما تكون نهاية ملف HTML دائما بالوسم </html> ، فهذا الوسم يخبر المتصفح أن هذه هي نهاية ملف HTML.


هذين هما الوسمين الذين يجب أن تكتب جميع أوسام وشفرات HTML داخلهما ، أي شفرة خارج هذين الوسمين يعني أن المتصفح لن يعتبرها شفرة HTML.


الآن ينقسم كود HTML المكتوب داخل الوسمين <html></html> إلى قسمين رئيسيين :


1-قسم الهيدر (الرأس) header ويبدأ بالوسم <head> وينتهي بالوسم </head> ، الكود المكتوب داخل هذين الوسمين لن يظهر في المتصفح ، وهو عبارة عن معلومات وبيانات عن الملف المكتوب لا تظهر على الشاشة وتكون مخفية.



2-قسم البودي (الجسم) body ويبدأ بالوسم <body> وينتهي بالوسم </body> ، الكود المكتوب داخل هذين الوسمين هو الكود الذي سيظهر على شاشة المتصفح ، ويحتوي النصوص والصور والجداول والروابط التشعبية والنماذج وكل ما إلى ذلك من الأمور التي تظهر للعميل.


لنعطيكم مثال واحد للشفرات التي تكتب في كل قسم :

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

أولا قسم الهيدر : لقد كتبنا الوسم : <title>موضوع الصفحة</title> داخل الوسم <head></head> ، ووظيفة هذا الوسم هو إظهار اسم أو موضوع الصفحة على رأس المتصفح في عمود الموضوع Title Bar.



ثانيا قسم البودي : لقد كتبنا في البداية نصا عاديا ، وسيظهر كما كتب ألا وهو : أول صفحة أكتبها بلغة HTML ، ثم استخدمنا الوسم : <b>هذا النص عريض</b> ، وذلك لجعل النص يظهر عريضا.



قم بتشغيل سيرفر الأباتشي وافتح المتصفح إكسبلورر ثم اكتب عنوان الصفحة
في المكان الذي حفظتها به ..
http://localhost/mypage.html



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

يجب أن نخلص إلى ثلاث نتائج مهمة جدا ، ستنبني عليها دراستك للغة HTML كلها ،
وهي كما يلي :
أولا: جميع أوسام HTML تكتب داخل قوسين مثلثين < اسم الوسم >.



ثانيا: جميع أوسام HTML عبارة عن جزئين ، جزء يبدأ الوسم وجزء ينهيه ، الجزء الي ينهي الوسم هو نفس الجزء الذي يبدأ الوسم ولكن بفارق واحد بسيط هو وجود الشرطة المائلة قبل إسم الوسم.
البداية : <html> ، النهاية : </html>.



ثالثا: الأوسام تحوي بعضها حسب الأسبقية ، يعني وسم <b></b> موجود داخل وسم <body></body> والذي بدوره موجود داخل وسم <html></html> وهو أكبر أوسام HTML ولا يحويه أي وسم آخر إلا في حالات معينة سنشرحها لاحقا ، فيجب الانتباه متى تبدأ الوسم ومتى تنهيه ، انظر الشكل التالي :