كيف تعمل المواقع الالكترونية ؟


كيف تعمل المواقع الالكترونية ؟

فيما هدا المقال انشاء الله سنعلمك كيفية إنشاء موقع الويب الخاص بك!
أقترح عليك أن تبدأ بالسؤال الأكثر أهمية: كيف تعمل مواقع الويب؟
تشغيل المواقع
أنا متأكد من أنك تزور بعض المواقع كل يوم. للقيام بذلك قم بتشغيل برنامج يسمى متصفح  الويب بالنقر فوق أحد الرموز الموضحة في الشكل التالي.



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


أنا متأكد من أنك معتاد على استخدام متصفح الويب! اليوم الجميع يعرف كيفية تصفح المواقع الالكترونية... ولكن من يعرف حقًا كيف تعمل هده المواقع؟ كيفية إنشاء مواقع الكترونية مثل هذا؟
من الضروري انك سمعت عن HTML و CSS  ، هل هذا له علاقة بكيفية عمل المواقع؟
تماما !هذه هي لغات الحاسوب  التي تجعل من الممكن إنشاء مواقع الكترونية. تعتمد جميع المواقع على هذه اللغات فهي ضرورية. تم اختراع HTML بواسطة تيم بيرنرز لي (Tim Berners-Lee) في عام 1991 ...
لا يزال تيم بيرنرز لي يتابع تطور الويب اليوم. أنشأ اتحاد شبكة الويب العالمية (W3C) الذي يحدد الإصدارات الجديدة من اللغات المرتبطة بالإنترنت. قام مؤخرًا بإنشاء World Wide Web Foundation التي تراقب تطور الويب.
لغات HTML و CSS هي أساس تشغيل جميع المواقع الالكترونية. عند استشارة موقع مع متصفحك  يجب أن تعرف أنه خلف الكواليس تفعيل وتنشيط بعض الادوات للسماح للموقع بالظهور بشكل جيد. يعتمد الحاسوب على ما تم شرحه في HTML و CSS لمعرفة ما يجب عرضه ، كما هو موضح في الشكل التالي.


HTML و CSS هما "لغتان" تحتاج إلى معرفة كيفية ربطهما لانشاء مواقع الكترونية. إنه متصفح الانترنيت  الذي سيترجم بين لغات الحاسوب  وما سنراه على الشاشة. هل تتساءل لماذا تحتاج إلى معرفة لغتين لإنشاء مواقع الكترونية ؟
HTML و CSS: لغتان لإنشاء موقع الكترونية
لإنشاء موقع الكتروني ،يجب عليك إعطاء تعليمات إلى الكمبيوتر. لا يكفي فقط كتابة النص الذي يجب أن يظهر في الموقع (كما تفعل في معالج النصوص Word ، على سبيل المثال) ، يجب أن يشير أيضًا إلى مكان وضع هذا النص ، وإدراج الصور ، وإنشاء روابط بين الصفحات إلخ ....
أدوار HTML و CSS
لتوضيح ما تريد القيام به للحاسوب ، يجب عليك استخدام لغة يفهمها. وهنا تصبح الأمور صعبة ، لأن عليك أن تتعلم لغتين!
لماذا تم إنشاء لغتين؟ واحد فقط كافية ، أليس هدا صحيح؟
عليك أن تخبر نفسك أن التلاعب بلغتين سيكون مضاعفًا للتعلم ... ولكن هذا ليس هو الحال! أؤكد لكم ، إذا كان هناك لغتان فسيكون هناك تسهيل الأمور. سنتعامل مع لغتين تكمل كل منهما الأخرى لأن لها أدوار مختلفة واليد الواحدة لا تسفق:
HTML (HyperText Markup Language): ظهرت في عام 1991 عند إطلاق الويب. دوره هو إدارة وتنظيم المحتوى في HTML ، ستكتب ما يجب عرضه على الصفحة: النص ، الروابط ، الصور ... أنت تقول على سبيل المثال: "هذا هو اسمي ، هذه هي قائمتي ، هنا هو النص الرئيسي للصفحة ، هنا صورة لعرضها... ".
CSS (Cascading Style Sheets, aussi appelées Feuilles de style): يتمثل دور CSS في إدارة مظهر صفحة الويب (التخطيط ، تحديد المواقع ، الزخرفة ، الألوان ، حجم النص ...). جاءت هذه اللغة لإكمال HTML في عام 1996.
يمكنك إنشاء موقع ويب بلغة HTML فقط ، ولكنه لن يكون جميلًا وجدابا:  لهذا السبب فإن لغة CSS تكملها دائمًا.
لإعطائك فكرة ، يوضح الشكل التالي ما يعطي الصفحة نفسها بدون CSS ثم باضافة CSS.



يحدد HTML المحتوى (كما ترون ، إنه شكل تقريبي!). يتيح لك CSS ترتيب المحتوى وتحديد العرض التقديمي: الألوان وصورة الخلفية والهوامش وحجم النص ...
كما هو متوقع ، يحتاج CSS إلى صفحة HTML للعمل. لهذا السبب سنتعلم أولاً أساسيات HTML قبل أن نهتم بزخرفة CSS.
الإصدارات المختلفة من HTML و CSS
مع مرور الوقت ، تطورت لغات HTML و CSS كثيرًا. في الإصدار الأول من( HTML (HTML 1.0 ، لم يكن ممكنا عرض الصور!
فيما يلي نبذة مختصرة عن هذه اللغات لثقافتك العامة.
إصدارات HTML
HTML 1: هذه هي النسخة الأولى التي أنشأها تيم بيرنرز لي في عام 1991.
HTML 2 : ظهر الإصدار الثاني من HTML في عام 1994 وينتهي في عام 1996 بظهور HTML 3.0. هذا هو الإصدار الذي سيضع الأساس لإصدارات HTML التالية. يتم توفير قواعد هذا الإصدار وتشغيله بواسطة W3C (بينما تم إنشاء الإصدار الأول بواسطة رجل واحد).
 HTML 3: ظهرت في عام 1996 ، هذا الإصدار الجديد من HTML يضيف العديد من الاحتمالات إلى اللغة مثل الجداول ، والتطبيقات الصغيرة ، والبرامج النصية ، وموضع النص حول الصور ، إلخ.
HTML 4: تم استخدام هذا الإصدار لفترة طويلة خلال عام 2000. ظهرت للمرة الأولى في عام 1998 ويقترح استخدام الإطارات (الدي يقسم صفحة الموقع  الى عدة أجزاء) ، جداول أكثر تعقيداً ، تحسينات على النماذج ، الخ ولكن قبل كل شيء ، يسمح هذا الإصدار لأول مرة باستغلال أوراق الأنماط ، CSS الشهيرة لدينا!
HTML 5: هذا هو أحدث إصدار. يحظى بشعبية متزايدة ، ويتم الحديث عنه على نطاق واسع لأنه يجلب العديد من التحسينات مثل القدرة على تضمين مقاطع الفيديو بسهولة ، وتخطيط أفضل للمحتوى ، وميزات جديدة للنماذج ، إلخ. هذا هو الإصدار الذي سنكتشفه معًا.
إصدارات CSS
CSS 1: منذ عام 1996 ، لدينا الإصدار الأول من CSS. يضع الأساس لهذه اللغة التي تتيح لك عرض صفحة الويب الخاصة بك ، مثل الألوان ، والهوامش ، والخطوط ، إلخ.
CSS 2: ظهرت في عام 1999 واستكملت بحلول CSS 2.1 ، هذه النسخة الجديدة من CSS تضيف العديد من الخيارات. يمكننا الآن استخدام تقنيات تحديد المواقع بدقة شديدة ، والتي تسمح لنا بعرض العناصر التي نريدها على الصفحة.
CSS 3: هذا هو الإصدار الأحدث ، الذي يوفر ميزات متوقعة بشكل خاص مثل الحدود الدائرية والتدرجات والظلال ، إلخ.
محرر النصوص
ما البرنامج الذي سأحتاجه لإنشاء موقع الكتروني الخاص بي؟
يوجد العديد من البرامج المخصصة لإنشاء مواقع الويب. ولكن  أؤكد لك ، لن تضطر إلى دفع فلس واحد. لماذا تذهب لبرامج مدفوعة ومعقدة ، عندما يكون لديك بالفعل كل ما تحتاجه في المنزل؟
فيما يلي بعض البرامج التي يمكنك تجربتها في نظام Windows إذا كنت ترغب في اختبار العديد منها:
·       Sublime Text  
·       Brackets 
·       Notepad++
·      


المتصفحات
لماذا المتصفح مهم
المتصفح هو البرنامج الذي يسمح لنا بمشاهدة المواقع.  تتمثل مهمة المتصفح في قراءة كود HTML و CSS ودلك لعرض نتيجة مرئية على الشاشة. إذا كانت شفرة CSS تشير إلى "العناوين باللون الاخضر" ، فسيعرض المتصفح العناوين باللون الاخضر. دور المتصفح ضروري ادن!
لا يبدو ، ولكن المتصفح هو برنامج معقد للغاية. في الواقع  فهم HTML و CSS ليس بالمهمة السهلة. المشكلة الرئيسية ، ستدرك قريبًا أن المتصفحات المختلفة لا تعرض نفس الموقع  او الهيئكلة بنفس الشكل! سيكون عليك القيام بذلك والاستمرار في التحقق من أن موقعك يعمل بشكل صحيح على معظم المتصفحات.
متصفحات الحاسوب
تحميل المتصفحات
هناك العديد من المتصفحات المختلفة ساضع روابط البعض منها :
·       Mozilla Firefox
·       Google Chrome
·       Opera

ليست هناك تعليقات