إتصل بنا

الاسم

بريد إلكتروني *

رسالة *

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

7 تعليقات

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

و على ما يبدوا سنقضي بعض الوقت معا ، و هذا يعتمد على سرعة تعلمك لدروس الدورة . إذا كنت تنوي تخصيص وقت لقرائة و فهم الدروس بسرعة و فعالية ، فإنك ستستغرق من أسبوع إلى أسبوعين ، أما إذا كنت تشعر أنك لا تمتلك الوقت الكافي فلا عليك خذ ما يناسبك و نظم وقتك كما تريد بنفسك ( أنت تعرف نفسك أكثر ) . لكن الأهم : هو أن تنتظم على قرائة هذه الدروس و تطبقها كما لو أنك ستمتحن فيها .
أعتقد الان أنك تطرح العديد من الأسئلة :
  • من هو البنامج الذي ينشأ المواقع ؟
  • ما هي لغات 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 ، ستعرف فيما بعد لماذا إخترت هذا المحرر بالضبط . محرر بسيط و مجاني يشتغل على جميع الأنظمة .

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


أوصيك بأن تقوم بالتبديل إلى صيغة 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 .

الكاتب : Med Anass SDK

عاشق النت إسم على مسمى أعشق كل ما له علاقة بالوب و الإنترنت
مساحة إعلانية

تعليقات بلوجر

  1. جزاك الله الف خير

    شرح واضح وسلس

    بارك الله فيك اخي الكريم

    اخوك/فايز

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

    وسنقوم في دروسنا بالاعتماد على برنامج النوت باد للتصميم حيث انه مجاني وله فوائد عديده

    ومررت ايضا بالمتصفحات التي تعتبر الاهم على الاطلاق
    فوظيفتها معقده حيث تقوم بتحويل الاكواد الى صفحات مرئيه على الانترنت
    واهم هذه المتصفحات جوجل كروم وفاير فوكس وانترنت اكسبلورر وسفاري واوبرا .

    هذا ما فهمته من الدرس الأول ...
    بارك الله فيكم اخي ،،،
    تحياتي .

    ردحذف
    الردود
    1. تماما أخي ، لقد لخصت المقال بعناية .

      حذف
  3. ماشاء الله درس طيب ومفيد استفد منها كثير
    الله يعطيكم العافية
    متابعة لكم

    ردحذف
  4. لما لا تجمع كل تلك الدروس وتضعها فى كتاب :)

    ردحذف
  5. شكرا جزيلا
    الدرس بسيط و سلس
    تابع ابداعك :)

    ردحذف
  6. شكرا لك اخي اتمنى ما تنقطع هذه الدروس لانها مهمة كثير
    جزاك الله خير

    ردحذف

لإدخال الأكواد بالتعليقات عليك تحويلها بـأداة ترميز أحرف HTML الخاصة