كيف ننشأ موقعا على الإنترنت ؟

أهلا و سهلا بالجميع .

إذن هذا هو الفصل الأول من الدورة التدريبية للمبتدئين التي ستمكنك من إنشاء موقع خاص بك !

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

أعتقد الان أنك تطرح العديد من الأسئلة :

• من هو البنامج الذي ينشأ المواقع ؟
• ما هي لغات HTML5 و CSS5 ؟
• هل إنشاء المواقع أمر معقد ، و هل يقتصر فقط على المبرمجين ؟

أقترح عليك أن تبدأ بالسؤال الأبسط و الأهم : كيف تعمل مواقع الويب ؟

فهرس الفصل

1. كيف تعمل مواقع الويب ؟
2. HTML و CSS ، لغتين لإنشاء مواقع الويب .
3. محرر النصوص .
4. المتصفحات .

كيف تعمل مواقع الويب ؟

كيف تعمل مواقع الويب ؟
لا، لا تخف من طرح سؤال مثل هذا ، حتى و لو كنت تعتقد أنه سؤال ' بليد ' ، من المهم أن نتكلم حول هذا الموضوع لكي نصل لتصميم المواقع بالطريقة الصحيحة .
أنا متأكد أنك تزور عدة مواقع ويب في اليوم ، مستخدما برنامجا يسمى المتصفح ، حيث تنقر دائما على أحد هذه الأيقونات :

فالمتصفحات هي البرامج التي تمكن من تصفح مواقع الويب ، حيث تستطيع تصفح أي موقع كيفما كان . و فيم يلي مثال لمتصفح يعرض الموقع المشهور ' ويكيبيديا ' :

لا شك أنك إعتدت على إستعمال المتصفح ! الان . كل الناس يعرفون كيفية إستعمال المتصفح و الإنتقال من موقع إلى اخر بسهولة ، لكن الذي يعرف كيف تعمل المواقع ، يعرف كيف ينشأ موقعا مثل هذا .

لقد سمعتُ عن HTML و CSS ، هل لها علاقة بإنشاء مواقع الويب ؟
طبعا !
هذه هي الغات الخاصة بإنشاء المواقع . جميع المواقع مبنية بواسطة هذه اللغات . لقد أصبحت الان شاملة و عالمية . أول لغة إخترعت هي HTML من طرف المبرمج تيم بيرنز لي في 1991 ...

لا يزال تيم بيرنز لي لحد الان يتابع تطور شبكة الويب . أنشأ منظمة World Wide Web Consortium ( W3C ) العالمية التي تتحكم و تنتج مختلف إصدارات لغات الويب . من عنوان هذه المنظمة يأتي الرمز WWW الذي يظهر قبل كل رابط موقع . كما تم مؤخرا إنشاء فرع جديد في المنظمة World Wide Web Foundation ( W3F ) مهتم بتحليل و تتبع مسارات الويب و غير ذلك .

تيم بيرنز لي | مخترع لغة HTML

الكثير من الناس يعتقدون ( عن خطأ ) أن الإنترنت هي الويب ، يجب معرفة أن الويب جزء من الأنترنت فقط .
أي أن الإنترنت هي مجموعة كبيرة تحتوي على : الويب ، الإيميل ( e-mail ) و الرسائل و المزيد ...


جميع مواقع الويب تتأسس على لغتي HTML و CSS . عندما تزور موقعا باستعمال متصفحك ، يجب معرفة أن خلف مظهر الموقع يقع ملف HTML قام المتصفح بتحميله و قرائته ثم عرضه .

يجب تعلم لغتي HTML و CSS لإنشاء المواقع . يقوم المتصفح بترجمة هذه اللغات إلى ما نراه على الشاشة .

ستسأل بلا شك لماذا تعلُم لغتين بدل لغة واحدة لإنشاء المواقع ، سأجيبك عن هذا السؤال في الفقرة التالية .

HTML و CSS ، لغتين لإنشاء مواقع الويب

لكي ننشأ موقعا يجب أن نعطي مواصفاته للحاسوب . و لا يكفي فقط أن تضع نصا أدبيا تصف فيه موقعك لأن الحاسوب لن يفهم شيئا . بل يجب تحديد مواضع النصوص و إدخال الصور و الروابط بين صفحات الموقع و غيرها ...

دور HTML و CSS 
لكي تشرح للحاسوب ما تريد أن تفعَل ، يجب أن تتحذث معه بلغة يفهمها ، و ما يعقد الأمور قليلا ، هو ضرورة تعلم لغتين على الأقل .

لماذا لغتين ، ألا تكفي لغة واحدة ؟
ربما إن طرحتَ حقا هذا السؤال ، فلا شك أنك إفترضت أن تعلم لغتين سيكون أكثر تعقيدا و يستغرق مدة أطول ...
في الحقيقة لا ، فوجود لغتين بدل واحدة يسهل الأمور أكثر ، و سوف تتعلم هتين اللغتين المكملتين لبعضهما بسهولة لأن لهما أدوارا مختلفة :

• HTML أي Hyper text markup language : ظهرت منذ 1991 مع ظهور الويب . يتجلى دورها في تنظيم محتوى الموقع . هذا يعني أنه بالـ HTML ستتمكن من وصف ماتريد أن يظهر في موقعك : نصوص ، روابط ،  صور ... ستقول مثلا : هذا العنوان ، هذه القائمة ، هذا النص الرئيسي ، هذا رابط و شيء مثل هذا ... 
• CSS أي Cascading style sheet : و تدعى أيضا الخصائص . يتجلى دورها في وصف مظهر الموقع ( التصميم ، المواقع ، الديكور ، الألوان ، حجم الخطوط و المزيد .. ) . أتت هذه اللغة لتكمل عمل HTML سنة 1996 .

ربما سمعت قليلا عن لغة XHTML . إنها تعني طريقة منظمة لكتابة لغة HTML بحيث يسهل قرائتها .
في هذه الدروس ستتعلم حتى XHTLM بصيغة غير مباشرة .

تستطيع أن تنشأ موقعا خاصا باستعمل لغة HTML فقط . لكن هذا الأخير لن يكون جميلا : سيحتوي موقعك على المعلومات فقط ، لذلك تأتي لغة CSS لتكمل النقص في الـHTML .

HTML تحدد المحتوى فقط ، و الـ CSS تأتي لتحسين شكل هذا المحتوى لتقديم أحسن للقارء .

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

مختلف إصدارات HTML و CSS

لقد تطورت لغتي HTML و CSS كثيرا مع مرور الزمن : النسخ الأولى منها لم تكن قادرة حتى على عرض الصور في المواقع !

إليك الان بعض إصدارات لغتي HTML و CSS لإغناء معارفك .

• HTML1 : أول إصدار من هذه اللغة أنشِأ من طرف تيم بيرنز لي .
• HTML2 : الإصدار الثاني ، ظهر في 1994 و إنتهى في 1994 بظهور الإصدار الثالث . هذا الإصدار هو الذي وضع القواعد الحقيقية التي تمكن من تطوير هذه اللغة بسهولة في الإصدارات اللاحقة ، حيث منظمة W3C هي من حددت قواعدها و مواصفاتها ( في حين أن الإصدار الأول طوِر من طرف رجل واحد ) .
• HTML3 : ظهرت في 1996 ، أتاح هذا الإصدار الجديد إمكانيات كبيرة في تصميم المواقع : الجداول ، الصور وغيرها ...
• HTML4 : الإصدار الأكثر إستعمالا حتى الان ( حصل على تغييرات بسيطة ليتحول إلى الإصدار HTML 4.01 ) . ظهر لأول مرة في 1998 ، أتاح إمكانيات أوسع و أسهل تحكما ، و هذا الإصدار يتيح إستخدام لغة CSS في المواقع ، عكس سابقاتها .
• HTML5 : إنها اخر إصدار من لغة HTML ، لم يلق إنتشارا واسعا بعد ، يُتيح إمكانيات أكثر و سهولة أكبر كإدخال الفيديوهات ، و تنظيم أفضل للمحتوى . و هذه هي النسخة التي ستتعلمها .

• CSS1 : من 1996 ، أول إصدار تم إعتماده فعليا . وضع قوانين هذه اللغة التي تمكن من وصف ألوان و عرض الخطوط و غيرها ...
• CSS2 : ظهرت في 1999 ثم تم تعديلها لتصبح بذلك CSS2.1 ، أضاف هذا الإصدار الجديد العديد من الإمكانات ، حيث أصبح من المستطاع تحديد مواضع عناصر المواقع باستعمال الإحذاثيات ببساطة كبيرة .
• CSS3 : اخر إصدار و هو يضيف فقط بعض الإمكانيات كالظل و الرؤية الجانبية و ثلاثية الأبعاد و غيرها ...

HTML5 و CSS3 إصدارين لم يتم إكمالهما رسميا من طرف W3C ، رغم أنهما في الأيام القليلة قد يخضعان لتغييرات بسيطة لكن مع ذلك يتم إعتمادهما من الان من طرف العديد من المواقع خصوصا HTML5 .

محرر النصوص

ما هو البرنامج الذي سيمكنني من إنشاء المواقع ؟
يوجد الكثير من البرامج التي تمكن من إنشاء المواقع ، لكني أنصحك بألا تبحث كثيرا عن هذه البرامج . لماذا البحث عن برنامج مدفوع و معقد ، لديك كل ما تحتاجه في حاسوبك .
أجل . لديك في حاسوبك برنامج بسيط يمكنك من إنشاء المواقع : Block-Notes !!

 غريب لكن صحيح . هذا البرنامج البسيط موجود مسبقا في نظام التشغير ويندوز .

يوجد الان برامج إنشاء مواقع أقوى و أفضل ، لا أحد يستعمل Block-Notes الان ، و يمكن تقسيم هذه البرامج إلى نوعين :

• WYSIWYG : بمعنى What You See Is What You Get | ما تراه هو ما تحصل عليه . و هي برامج تمكن من إنشاء المواقع دون معرفة مسبقة بلغة HTML و لا CSS . من أشهرها : Nvu ، Microsoft Expression Web ، Dreamweaver ... و حتى Word ! . يتجلى نقصها أساسا في ضعف جودة الكود الذي تقدمه مما يسبب للموقع الكثير من الخلل و صعوبة التعديل .
• المحررات النصية : و هي البرامج التي تستعمل لكتابة الكود ، و هي تقدم تلوينا و تنسيقا جميلا للكود مما يسهل على المصمم العمل و بالطبع جودة الكود تتعلق هنا بمدى إحترافية المصمم .

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

الموقع الرسمي للمحرر ++Notepad

حمل البنامج و قم بتنصيبه و سيظهر كالتالي :

أوصيك بأن تقوم بالتبديل إلى صيغة HTML ، في القائمة العلوية : HTML ← H ← Langage ، بهذا يعرف المحرر أنك ستكتب كود HTML .
عندما تستعمل هذا البرنامج فإنه يلون الكود الذي تكتبه مما يوضح لك كل شيء و يسهل عليك تعديله و إصلاحه .

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

المتصفحات

لماذا المتصفح مهم ؟
المتصفح هو البرنامج الذي يمكن من تصفح المواقع . إذا كنت تقرأ هذه السطور الان ، فهذا يعني أنك تستخدمه و أنت تراه الان ( :
كما شرحتُ سابقا : يقوم المتصفح بقرائة كود الـHTML و CSS و يحوله إلى نتيجة مرئية في الشاشة . إذا كانت الـCSS تقول " العناوين باللون الأحمر " فالمتصفح سيظهر العناوين باللون الأحمر ... إذن للمتصفح دور مهم .
في الواقع ! المتصفح برنامج معقد للغاية ، فتحويل كودات HTML و CSS إلى مواقع مرئية مهمة ليست سهلة . و كما ستدرك قريبا : المتصفحات لا تعرض المواقع بنفس الشكل ! و هذا سيتطلب منك التحقق من مظهر موقعك على عدة متصفحات ) :

تحميل المتصفح المناسب
هناك العديد من المتصفحات في العالم ، لكن أشهرها :

• Google Chrome : متصفح بسيط و سريع ، أنصح دائما بإستخدامه .
• Mozilla Firefox : متصفح شهير و جيد ، أستعمله غالبا لتفحص مظهر مواقعي .
• Internet Explorer : لا أنصح باستخدامه في تصفح المواقع ، لكنني مع ذلك أتفحص فيه مواقعي . ( لا داعي لتحميله لأنه موجود أصلا في حاسوبك )
• Safari : مشابه لـ Google Chrome ، لذلك لا داعي للإهتمام به .
• Opera : لا أعرف عنه الكثير ، لكنني أسمع بأنه جيد .

أنصحك بأن تستخدم Google Chrome بصفة دائمة ، و التحقق دائما من صفحات موقعك في Mozilla Firefox و Internet Explorer ( :
لأن العديد من الناس في العالم يستعملون هذه المتصفحات الثلاث .

هذه المتصفحات الرئيسية تعرض الموقع Google.com :

الفرق بين المتصفحات .

كما قلت سابقا : لا تعرض المتصفحات المواقع بنفس الشكل !

لماذا ؟ لأن بعض المتصفحات القديمة لا تعرف اخر التحذيثات التي خضعت لها لغات الويب كالـHTML و CSS ، و بالتالي فهي لن تستطيع عرض كود لا تعرف ماذا يعني . و لهذا السبب لا أنصح باستخدام Internet Explorer لأنه متصفح قديم و لا يعرف شيئا من تطورات الـHTML و CSS ، بينما المتصفحات الأخرى دائمة التطور و التحسين .

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

وضع المتصفح Google Chrome حلا لجزء كبير من هذه المشكلة باعتماده تقنية التحذيث الأوتوماتيكي ( mise a jour automatique ) بدون علم المستخدم . مستخدموا Firefox لا يفكرون في تحذيث متصفحاتهم . أما Enternet Explorer فلا يقوم بالتحذيث إلا بعد مرور أعوام طويلة إن لم حقبا تاريخية و هذا يخلق مشاكل عويصة للأسف . 

هناك بعض المواقع مثل nomansblog.de  تقدم قائمة بالمتصفحات التي تدعم بعض دوال الـCSS .

→ الفصل التالي الفصل السابق ←