كيف أعمل صفحة ويب

تصفح الإنترنت

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

صفحة الويب (Web Page)

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

لغات تصميم صفحات الويب

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

• لغة (Standard Generallzed Markup Language): تُعرَف هذه اللغة بلغة SGML وهي اختصار للكلمات وعبارات الانجليزية المذكورة أعلاه، وتمتاز هذه اللغة بتجاوبها مع أي برنامج كتابة خاص بتصميم صفحات الويب إلا أن ما يعيبها هو صعوبة تعلّمها وتعقيدها الأمر الذي حال دون انتشارها وبالتالي اندثارها.

*لغة (Extensible Markup Language): ويختصر لفظ اسم هذه اللغة بثلاثة حروف مستوحاة من الكلمات وعبارات الإنجليزية المكوّنة منها (XML)، وهي اللغة الأكثر استخداماً نظراً لأهميتها البالغة في تطبيقات الأعمال الالكترونية، ويتم استخدامها عادة لعرض وتخزين البيانات وتعمل على وصفها بشكل منظّم وسهل على كل من المبرمج والمستخدم. *لغة (Hypertext Markup Language): وتعرف هذه اللغة بلغة HTML، وهي اللغة الأسهل والأوسع انتشاراً من بين لغات تصميم الصفحات، إذ يتم استخدامها والمباشرة ببناء صفحات الويب بالاعتماد على مجموعة من الأوامر والتعليمات يطلق عليها مسمى وسوم (Tags)، والتي تلعب الأخيرة دوراً هاماً في تكوين الصفحة وتصميمها إذ يستطيع المستخدم استعراض الصفحة كصفحة الويب، وتحظى هذه اللغة بامتياز عن غيرها باستعمال أدوات لتصميم الصفحة كعنوان الصفحة وما تحتوي عليه من جداول وصور وغيرها، ويقوم المبرمج المستخدم لهذه اللغة بكتابة الأوامر أو الوسوم عند البدء بالتصميم على أحد برامج التحرير الخاصة بذلك أو ما يسمى المحرر (Editor) والتي يندرج تحتها كل من (WordPad، NotePad، أو حتى برنامج تحرير النصوص (Microsoft Word)، ويجب أن يتوفر شرط تخزين النص المحرّر كصفحة ويب حتى تنجح في إنشاء صفحة الويب.

• لغة (cascading style sheets): يرمز للغة تصميم الصفحات هذه بالرمز CSS، وهي لغة التصميم القادرة على تنسيق صفحات الويب وتولي الاهتمام لشكل المواقع وتصميمها وقد أوجدت بشكل خاص للعمل على الفصل بين التنسيقات التي تطلبها صفحة الويب عن محتوى المستند المكتوب باستخدام الوسوم بلغة HTML، وبإمكانك التعميم بأن هذه اللغة تلعب الدور الفعّال بالعناية بشكل الصفحة، ويتم دمج هذه اللغة مع لغة HTML بكتابة مستند CSS بمستند منفصل خارجي والعمل على ربطها مع مستند HTML، وهناك طرق ووسائل خاصة صعبة بعض الشيء في تعلمها لعملية الدمج في المستند نفسه بين اللغتين، وتمتاز هذه اللغة بمنحها صفحة الويب صفة البساطة.

عناصر صفحة الويب

تتكّون صفحة الويب من مدعومة من المعلومات التي تظهر للمستخدم، وقد تخدم هذه المعلومات حواس الإنسان السمعية والبصرية معاً، وتكون على النحو التالي:

• المعلومات: وتقسم المعلومات التي تظهر على شاشة المستخدم النهائي إلى نوعين:
  • معلومات نصية (Text Information): ويحمل هذا النوع من المعلومات خاصية تمنح وجود اختلافات متنوعة بين ما تحتويه الصفحة.
  • معلومات غير نصية: وهي ما تحتويه صفحة الويب من المعلومات التي بإمكانها مخاطبة حاسة السمع والبصر معاً، وهي:
    • صور: وتدعم صفحات الويب صوراً بصيغة GIF أو JPEG أو PNG، حتى تظهر الصورة على صفحة الويب وبعد الانتهاء من حفظها استخدم الصورة ذات الصيغ المذكورة فقط.
    • صور متحركة: وهي الصور التي تحتوي على خاصية الحركة وتخلو من السكون كالفلاش وتكون عادة هذه الصور تحمل الصيغة GIF.
    • الصوت (Sound): قد تلاحظ وجود مقاطع صوت في صفحات الويب التي يمكنك الاستماع إليها والتي تمنح في استخدامك لها خلال عملية بناء الصفحة للمستخدم فرصة الاستماع لها، وتكون عادة بالصيغ WAV أو MID.
    • الفيديو (Video):وهذه الخاصية تخدم حاستي السمع والبصر معاً في آن واحد، يتم استخدامها ضمن نطاق الصيغ: WMV، RM (Real Media)، FLV، MPF، MOV.
• المعلومات التفاعلية: وهي للمعلومات التي تمنح المستخدم النهائي فرصة بمشاركة رأيه أو حتى المشاركة باختيار من متعدد أو المشاركة الكتابية، وتعد هذه المعلومات هي الأكثر تعقيداً من بين المعلومات المدرجة، ويقسم هذا النوع من المعلومات إلى:
  • نصوص تفاعلية وهي النصوص التي يتم من خلالها التفاعل بين المستخدم وصفحة الويب سواء بالضغط على الروابط المرفقة أو المشاركة أي أن يترك المستخدم أثراً له.
  • الرسوم التوضيحية التفاعلية: وتتضمّن هذه الخاصية تفاعل المستخدم النهائي مع صفحة الويب بوضع لمساته بـ "Click To Play" وما شابه ذلك، ويتم استخدام التزامن النصي وتطبيقات الجافا والفلاش.
  • توفّر الأزرار، أي أنه يتم إدراج أزرار تعمل فعلياً على تقديم مهمة معينة عند قيام المستخدم النهائي بالضغط عليها.
• التفاعل بين الصفحات نفسها: وهذا النوع من المعلومات يكون باحتواء صفحة الويب على:
  • روابط (HyperLink) أو ما يسمى بالوصلات التشعبية، وهي خاصية تتيح لك الفرصة للانتقال إلى صفحة أخرى للوصول إلى معلومات أو بيانات أو موضوع بذات الاهتمام.
  • الأشكال: وهذه الخاصة تعمل على دعم وزيادة عملية التفاعل مع الخادم وخادم قواعد البيانات.
  • التعليقات Comments
  ): تندرج هذه الخاصية بنسبة 90% في صفحات الويب والتي تمنحك كمستخدم نهائي الحق بإبداء رأيك.
• رسوم توضيحية (Diagramation): وتشمل هذه الخاصية كل من الرسوم البيانية والمواصفات البصرية.

عمل صفحة ويب

عند الشروع بعمل صفحة ويب خاصة بك، يجب توفّر محرر (Editor) خاص بلغة التصميم المستخدمة بالعملية، أو بإمكانك استخدام البرمجيات المتخصصة كبرنامج Wiki أو CMS أو منتدى ، بالإضافة إلى وجود قوالب جاهزة لهذه الغاية صممت خصيصاً لتمكين المستخدم من إضافة لمساته بالتصميم دون القلق على الناحية الجمالية أو الاستعراضية للصفحة كـ جوستيس (Geocitie) الذي قدّمته Yahoo.

تصميم صفحة ويب

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