تحيّةٌ لكم و مرحباً بكم جميعا.
هذا إذاً أول محور في هذا الدرس للمبتدئين، و الذي ستتعلمون فيه كيفية إنشاء موقع ويب خاص بكم.
سوف نقضي بعض الوقت سويّا و كل شيء سيعتمد على سرعة استيعابكم. إن كنتم ستقرؤون هذا الدّرس بانتظام و بسرعة جيدة فستنتهون منه في فترة تمتد من أسبوع لأسبوعين. و لكن إن كنتم بحاجة لمزيد من الوقت، فلا تشغلوا بالكم : المهم أن تمشوا بوتيرتكم و أخذ الوقت المناسب لكم.
أشكّ في أنّكم تسألون أنفسكم ألف سؤال :
- ماهي البرمجيات التي يجب استعمالها لخلق مواقع ويب ؟
- ماذا تعني اللغتانHTML5 وCSS3 ؟
- أليس كل هذا معقّدا جدا، و هو بالأحرى موجه للمبرمجين ؟
سأقترح عليكم أن تبدؤوا بالسؤال الأبسط و لكنه أيضا الأهم : كيف تشتغل مواقع الويب ؟
فهرس المحور :
-
كيف تشتغل مواقع الويب ؟
-
HTML و CSS : لغتان لخلق موقع ويب.
-
المتصفحات.
كيف تشتغل مواقع الويب ؟
لا تخافوا من طرح الأسئلة حتى وإن كنتم تعتقدون أنها ” غبية “. من المهم جدا أن نتكلم قليلا قبل الانطلاق بجدية في عملية إنشاء المواقع.
أنا متأكد أنكم تزورون مواقع ويب كل يوم. لهذا فأنتم تستعملون متصفحات ويب بالنقر على هذه الأيقونات :
متصفحات الويب هي برامج تسمح بإظهار مواقع ويب. مع المتصفح، بإمكانكم زيارة أي موقع ويب. هذا مثلا متصفح يظهر موقع الويب الشهير “ويكيبيديا”.
أنا متأكد أن استعمال متصفح الويب أصبح شيئا مألوفا لكم، فالكلّ اليوم يعرف كيف يذهب إلى الويب…ولكن من يعرف حقا كيف يعمل الويب ؟ كيف ننشئ مواقع ويب كهذه ؟ لقد سمعت عن HTML و CSS ولكن هل لهذا علاقة باشتغال مواقع الويب ؟…..طبعا بالتأكيد !
يتعلق الأمر بلغات معلوماتية تسمح بإنشاء مواقع ويب و التي هي أساسها. هذه اللغات لا غنى عنها وهي عالمية اليوم، وهي في الحقيقة أصل الويب. اخترعت لغة ” HTML” من طرف تيم برنرز-لي سنة 1991.
تيم برنرز-لي يتابع اليوم باهتمام تطور الويب فقد أنشأ W3C التي تعرّف النسخ الجديدة من اللغات. كما أنه قد أنشأ مؤخرا WWWF ، التي تحلّل و تتابع تطوّر الويب.
هل تيم برنرز-لي هو مخترع الانترنت ؟
أشخاص عدة يخلطون ( عن خطأ ) بين الانترنت و الويب. يجب العلم أن الويب يعتبر جزءا من الانترنت. انترنت إذاً هو مجموعة كبيرة ينضم إليها كل من : الويب، الرسائل الإلكترونية، الرسائل اللّحظية،…الخ.
تيم برنرز-لي ليس هو إذاً مخترع الانترنت، هو فقط مخترع الويب.
لغتا HTML و CSS هما أساس اشتغال كل مواقع الويب. عندما تزورون موقعا ما بواسطة متصفحكم، يجب العلم أن أشياء خفية تتفاعل للسماح للموقع بأن يظهر. الحاسوب يرتكز على ما شُرِح له من HTML و CSS ليعرف ما يجب عرضه:
HTML و CSS هما لغتان يجب تحدّثهما لإنشاء مواقع ويب. إن متصفح الويب هو الذي يترجم هاتين اللّغتين المعلوماتيتين إلى ما ترونه ظاهرا على الشاشة.
تتساءلون بالتأكيد لماذا يجب معرفة لغتين لخلق مواقع ويب . سأجيبكم دون إطالة.
-
HTML و CSS : لغتان لإنشاء موقع ويب :
لخلق موقع ويب، يجب إعطاء تعليمات للحاسوب. لا يكفي فقط أن تكتب النص الذي سيكون بموقعك ( كما نفعله في تحرير نص الوورد مثلا )، يجب أيضا تحديد أين يجب وضع هذا النص، إدخال الصور، عمل روابط بين الصفحات، …الخ
دور HTML و CSS :
لشرح للحاسوب ما تريدون فعله، يجب استعمال لغة يفهمها. وهنا تجتمع المفاهيم، لهذا يجب تعلم لغتين.
لماذا ابتكروا لغتين ؟ ألم تكن واحدة كافية ؟
تحدّثون أنفسكم و تقولون أن التّحكّم في لغتين سيكون معقّدا و أطول للتّعلم مرّتين عنه بتعلم واحدة…و لكن لا..أضمن لكم أنه إن وجدت لغتان فلتسهيل الأشياء لا لتعقيدها. سنتعامل مع لغتين إحداهما تكمّل الأخرى لأن لهما دوران مختلفان.
HyperText Markup Language) HTML ) :
سجّلت أول ظهور عام منذ 1991 عند إطلاق الويب. دورها هو تسيير و تنظيم المحتوى. فبال HTML إذاً تستطيعون كتابة ما تريدون من الصفحة أن تعرضه : نصوص، روابط، صور…الخ. تكتبون على سبيل المثال : ” هذا هو العنوان، هذه هي قائمتي، هذا هو النص الأساسي للصفحة، هذه الصور التي يجب عرضها..الخ”.
Cascading Style Sheets ) CSS ) :
دورها تسيير شكل صفحة الويب ( المقاييس، الوضعيات، الديكور، الألوان، حجم النص…الخ). هذه اللغة أتت لتكمّل HTML سنة 1996.
ربما سبق لكم و أن سمعتم عن لغة تسمى XHTML. هي مختلفة عن HTML كما أنّها أكثر تعقيدا و صعوبة في التحكم. لتوضيح الأمور، ف HTML وضع لأول مرة سنة 1991 و لكن في بداية سنة 2000 أطلقت W3C الXHTML مبينة أنه ” المستقبل ” و لكن تجري الرياح بما لا تشتهي السفن، فاللّغة لم تحقق الصّدى المأمول. عودةٌ للأصول سنة 2009، W3C تتخلّى عن XHTML لتعود ل HTML مجدّدا بغية تطويره.
هذه اللغات تتشابه كثيرا، ليست واحدةٌ بأفضل من الأخرى فالأمر يتعلق فقط بطريقتي عمل مختلفتين.
في هذا الدّرس، سنعمل بالنّسخة الأخيرة من HTML 5 ) HTML ) و هي اليوم لغة المستقبل التي يستعملها الجميع.
تستطيعون الآن إنشاء موقع web باستعمال فقط HTML لكنّه لن يكون لائقا : المعلومة ستظهر خاماً، أو بمعنى أكثر فهما غير منهاة.
و من أجل هذا فلغة CSS تقوم دائما بعملية التّكميل.
من أجل إعطائكم فكرة أوضح، إليكم ما تقدمه نفس الصفحة دون وجود لغة CSS ثم بوجودها.
HTML تعرف المحتوى (كما تستطيعون رؤيته، الإنهاء الخام ).
CSS تمنحك أيضا تهيئةً للمحتوى ,..و تعريف العرض: اللون، الصورة الخلفية، الهوامش، حجم النص .
قد تشكّون في الأمر، و لكن CSS بحاجة الى صفحة HTML من أجل الإشتغال.
من أجل هذا سنأخذ أوّلا قواعد HTML قبل أن نهتم بالتزيين في CSS.
صفحاتك الأولى لن تكون بذلك الجمال الذي تريده.لكن هذا لا يهم لأنّك لن تقف عن هذه المحطّة طويلا.
مختلف نسخ ال HTML و CSS
مع مرور الزمن، تطوّرت لغتا HTML و CSS كثيرا.
في النسخة الأولى على الاطلاق ل HTML 1.0) HTML ) لم يكن من الممكن عرض الصور.
اليك نبدة مختصرة عن اللغتين من اجل ثقافتك العامة.
نسخ HTML :
-
HTML 1 : انها النسخة الأولى على الاطلاق المنشأة من طرف Tim Berners-Lee في 1991
-
HTML 2 :النسخة الثانية ل HTML تطورت في 1994 وانتهت في 1996 مع تطور HTML 3.
هذه هي النسخة التي ستعتمد النسخ القادمة ل HTML. القواعد و التشغيل لهذه النسخة معطاة من طرف
ال W3C (لكن النسخة الاولى أنشأت من طرف شخص واحد).
-
HTML 3: ظهرت في 1996،هذه النسخة الجديدة ل HTML أضافت عدة احتمالات لهذه اللغة مثل: الجداول، ،السكريبتات، وضعيات النص حول الصور …إلخ.
-
HTML 4:يتعلق بالنسخة الأكثر تجاوبا ل HTML (أكثر دقة تحديدا يتعلق الامر ب HTML4.01).
ظهرت لاول مرة في 1998،تقترح استعمال جداول أكثر تعقيدا (التي تقسم صفحة web الى عدة اجزاء)، تحسينات اللوائح….الخ، و لكن الأهم من كل هذا فهذه النسخة تسمح و للمرة الأولى باستخدام أوراق الستايل للCSS .
HTML 5 : إنها النسخة الأخيرة. لم تلق بعد التجاوب اللائق بها، هناك كلام كثير حولها لأنها أتت بتحسينات عديدة كإمكانية الإدراج السهل للفيديوهات، و تصميم أحسن للمحتوى، و ميزات جديدة للنماذج…الخ. هذه النسخة هي التي سوف نكتشفها سويّا.
نسخ ال CSS :
-
CSS 1 : تُستعمل النسخة الأولى من CSS منذ 1996. وهي تضع أسس هاته اللغة التي تسمح بتقديم صفحة الويب بالألوان، و الهوامش، و الخطوط…الخ.
-
CSS 2 : ظهرت سنة 1999 و كُمِّلت بعد ذلك ب CSS 2.1، هذه النسخة تضيف عدة خيارات كإمكانية استخدام تقنيات تمركز دقيقة جدا، ما يسمح لنا بإظهار الأدوات أينما شئنا في الصفحة.
-
CSS 3 : هي آخر نسخة، أتت بميزات كانت منتظرة بشكل خاص كالحواف الدائرية، و التدرجات، و الظلال…الخ.
للعلم فقط فإن HTML و CSS 3 ليستا نسختين نهائيتيين من w3c . في الوقت الراهن، و إن كانت هناك تغييرات طفيفة في هاتين اللغتين فإني أرشح لكم هاتين النسختين الجديدتين للبدء بالعمل عليهما من اليوم. مساهماتهما متعددة و الدليل أن عديد مواقع الويب المحترفة تبنى اليوم على هاتين النسختين الأخيرتين.
ماهي البرامج التي سأحتاجها لإنشاء موقع ويب ؟
هل سأفرغ جيوبي لشراء برنامج معقد جدا و الذي ربما سأستغرق شهورا لفهمه ؟
توجد بالفعل برامج عدّة مخصصة لإنشاء مواقع الويب. ولكني أطمئنكم : لا داعي لإنفاق دينار واحد. لماذا شراء برنامج مكلف و معقد و أنتم لديكم أصلا ما تحتاجون له.
إذاً، تشبثوا جيدا فأنتم لا تحتاجون سوى ل…………….الدفتر.
صعب التصديق و لكنه حقيقي : نستطيع فعلا إنشاء موقع ويب باستخدام الدفتر فقط، برنامج تحرير النصوص الموجود في ويندوز. و بالمناسبة، أعترف أنني شخصيا بدأت العمل به منذ بضع سنوات خلت.
هناك الآن برمجيات أكثر قدرة و لا أحد يستخدم فعلا الدفتر. نستطيع تصنيف برمجيات إنشاء مواقع الويب إلى صنفين :
- ال WYSIWYG ( What You See Is What You Get ) : ( ما تراه هو ما تتحصل عليه )، هي برامج سهلة الاستعمال، إنها تسمح بإنشاء مواقع ويب بدون تعلم أي لغة برمجة بالتحديد. أكثر هذه البرامج شعبية هي : Nvu, Microsoft Expression Web, Dreamweaver…و حتى ال”وورد”. و لكن منشئ مواقع الويب الجيد يجب عليه معرفة لغتي البرمجة HTML و CSS عاجلا أو آجلا، لهذا فأنا لا أوصيكم باستعمال هاته البرامج.
محررات النصوص :
هي برامج مخصصة لكتابة الشفرة. على العموم، نستطيع استعمالها في عدة لغات، ليس فقط في HTML و CSS . تبرهن هذه البرامج أنها جد مساعدة لصانعي مواقع الويب !
لقد فهمتم، سأدعوكم لاستعمال محرر نصوص في هذا الدرس. إليكم سواءا من خلال Windows Mac , أو Linux.
من خلال : Windows
يوجد عدد هائل من محررات النصوص، لا أستطيع عرضها بالكامل. رغم ذلك، أدعوكم للإبحار في الـ(Notepad++ ) ، واحد من بين الأكثر استعمالا بينها من خلال الويندوز. هذا البرنامج سهل ، بالفرنسية و مجاني.
v موقع الواب الخاص بـ Notepad++ : استعملوا نسخة التثبيت و ليس النسخة المضغوطة Zip.
v هذا ما يبدو عليه Notepad++ عند فتحه :
في هذه اللحظة، لا تشغلوا أنفسكم بمحاولة معرفة ما تعني كل تلك اللخبطة في الصورة أعلاه. أردت فقط أن أعطيكم نبذة عن البرنامج.
يوجد عديد محررات النصوص التي تشتغل على ويندوز، إن كان “نوتباد ++” لا يلائمكم ، تستطيعون تجريب :
تحت Mac OS X
تستطيعون تجريب برنامج من اللائحة أدناه :
تحت Linux
هذه بعض البرامج التي تستطيعون تجريبها، بعضها موجود أصلا في لاينكس و البعض الآخر يمكن الحصول عليها عبر تحميلها بشكل مجاني من الانترنت.
-
gEdit
-
Kate
-
vim
-
Emacs
-
jEdit
-
متصفحات الانترنت :
لماذا المتصفح مهم ؟
المتصفح هو برنامج يسمح لنا برؤية مواقع الويب. إن كنتم تقرؤون هذه الخطوط، فذلك لأن متصفحكم مفتوح و هو محط أعينكم الآن.
كما شرحته سابقا، فعمل المتصفح هو قراءة شفرة html و css لإظهار بعد ذلك النتيجة المرئية على الشاشة. إذا قال CSS خاصتكم ” العناوين بالأحمر ” ، إذاً فالمتصفح سيظهر العناوين بالأحمر. لهذا فدور المتصفح ضروري.
عكس ما يبدو، فالمتصفح برنامج بالغ التعقيد. فهم شفرة HTML و CSS ليس أبدا بالشيء البسيط.
يوجد هناك عديد المتصفحات. هذه أهمها :
نظام التشغيل |
التحميل |
المتصفح |
|
Windows
|
من هنا |
Google Chrome |
|
Windows
|
من هنا |
Mozilla Firefox |
|
Windows |
من هنا |
Internet Explorer |
|
Windows
|
منهنا |
Safari |
|
Windows
|
من هنا |
Opera |
من المفضل تنصيب عدة متصفحات على جهازك للتأكد أن موقعك يشتغل بشكل صحيح على أي منها. بشكل عام، أنصح بتجريب موقعك الويب بانتظام على الأقل في كروم، فايرفوكس و انترنت اكسبلورر.
للملاحظة فإن سفاري و غوغل كروم يظهران المواقع بنفس الطريقة تقريبا. لذلك فلا داعي لتجريب موقعك على كلا المتصفحين.
هذا نموذج لبعض أهم المتصفحات مظهرة لصفحة غوغل الرئيسية.
وصلنا لنهاية هذا الدرس الأول الذي ما كان سوى تحضيرا لكم للدخول في صلب الموضوع و الذي هو إنشاء أول صفحة HTML . هذا ما سنقوم في الدرس المقبل، فانتظرونا……….تحياتي.
………………………………………………………………………………..
المصدر : Site du zéro
ترجمة : وسام شهاب – فريق عمل مترجم -
نقاش
Powered by Facebook Comments
