ما هي صفحات الويب؟

قد تتساءل، ما هي صفحة الويب؟ سأجيبك، هي مستند مكون من سلسلة من التعليمات البرمجية المكتوبة بإحدى لغات الويب ويتم عرضها داخل تطبيق مخصص يسمى متصفح الويب Web Browser. تستخدم صفحات الويب بشكل أساسي لعرض المعلومات بأشكال مختلفة من نصوص ورسومات وصور ومقاطع الفيديو وروابط لصفحات ويب أخرى وإتاحتها عبر شبكة الإنترنت وتشكل مجموعة صفحات الويب المتعددة المرتبطة مع بعضها البعض موقع ويب يمكن لصفحات الويب أن تكتب بأنواع مختلفة من لغات البرمجة مثل HTML و CSS وجافا سكريبت و PHP وغيرها من اللغات والتقنيات وفق ما تقتضي الحاجة، لكن تعد لغة HTML التقنية الأساسية لبناء صفحة الويب، فصفحات الويب بتنسيق HTML هي المعيار للمحتوى الذي يعرضه متصفح الإنترنت. وتجدر الإشارة إلى أن HTML ليست لغة برمجة بالمعنى المتعارف، بل لغة توصيفية markup language تعتمد على رموز خاصة تسمى الوسوم Tags، هذه الوسوم مسؤولة عن وصف بنية صفحات الويب وطريقة عرض محتوياتها وإظهارها بالبنية التي نريدها، كعرضها بشكل فقرات أو جداول أو تعدادات نقطية …إلخ. تتميز لغة التوصيف HTML بكونها مفهومة ومعبرة فكل ما تقوم به هو وصف أسلوب عرض المحتوى للمتصفح وطريقة تخطيط صفحة الويب، على سبيل المثال لإدراج عنوان رئيسي وفقرة في صفحة الويب نكتب اكتب العنوان بين علامتي <h1> و <h1/> ولكتابة فقرة نصية اكتبها بين علامتي <p> و <p/> بالشكل التالي: <h1> هذا هو عنوان الفقرة</h1> <p> هذا هو محتوى الفقرة</p> قم بكتابة الكود السابق في أي محرر نصوص مثل المفكرة واحفظه بالامتداد ‎.html أو ‍‎.htm وسمه بأي اسم تختاره ليكن example.html، ستلاحظ أن أيقونة الملف قد تحولت إلى صفحة ويب وعند فتحها تعرض في المتصفح الافتراضي لديك لاحظ أن النص (هذا هو عنوان الفقرة) ظهر كعنوان غامق لأننا غلفناه بعلامات خاصة بالعنوان، بينما ظهر النص (هذا هو محتوى الفقرة) كنص عادي لأننا وضعناه بين علامتين تدلان على كونه فقرة نصية. تحتاج هذه الصفحة للكثير بالطبع من أكواد HTML الإضافية كي تبدو صفحة ويب متكاملة الأركان، كما تحتاج لإضافة تنسيقات مختلفة من خطوط وألوان وتخطيطات لجعل مظهرها أكثر احترافية وهو ما تقوم به لغة CSS التي تتكامل مع لغة HTML حيث تضاف شيفرات CSS بعدة طرق إلى صفحة الويب، فهي إما أن تكتب في ملف ‎.html نفسه، أو تضاف في ملف نصي مستقل بالامتداد css. بأي اسم تختاره وليكن styles.css ثم تربط مع ملف ‎.html من خلال كتابة الكود التالي: <link rel="stylesheet" type="text/css" href="styles.css" /> <h1> هذا هو عنوان الفقرة</h1> <p> هذا هو محتوى الفقرة</p> لسنا بصدد شرح أكواد CSS في هذا المقال لكننا سنكتب بعض التنسيقات البسيطة لصفحتنا لتفهم الفكرة التي تعمل من خلالها صفحات الويب، على سبيل المثال لجعل العنوان الذي أضفناه بالصفحة باللون الأحمر والفقرة باللون الأزرق تكتب في ملف التنسيقات الأكواد التالية: h1 { color: red; } p { color: blue; } للمزيد حول تصميم صفحات الويب وكتابة أكواد CSS يمكنك مطالعة مقال HTML و CSS للمبتدئين: كيف تصمم أول صفحة ويب لك ومقال أساسيات CSS، كما يمكنك تعلم المزيد حول ربط أكواد مع ملف ‎.html من خلال مقالة كيفية بناء موقع باستخدام CSS. ما هو متصفح الويب؟ ذكرنا في الفقرات السابقة كلمة متصفح عدة مرات وذكرنا أنه برنامج يستخدم لفتح صفحات الويب وعرضها، ولعلك تتساءل ما هو دور المتصفح في صفحات الويب التي هي بالأساس مستندات نصية تكتب ضمن محررات نصوص أو محررات أكواد برمجية؟ وإليك الجواب: كي تتمكن من فتح صفحات الويب على جهازك تحتاج لوجود برنامج متصفح الويب وهو عبارة عن تطبيق يمكنك من الوصول إلى المعلومات المضمنة في صفحات الويب وعرضها بالشكل الصحيح، فهو بمثابة حاوية تعرض كافة محتويات الصفحة. هناك الكثير من متصفحات الويب وأشهر خمس متصفحات هي: جوجل كروم Chrome فايرفوكس Firefox مايكروسوفت إيدج Microsoft Edge أوبرا Opera سفاري Safari كي تتمكن متصفحات الويب من عرض صفحات الويب فهي تستخدم محرك عرض Rendering Engine أو ما يسمى بمحرك التخطيط Layout Engine مهمته أخذ كافة معلومات المحتوى والتصميم الواردة في التعليمات البرمجية التي كتبت بها هذه الصفحة وتفسيرها وعرضها بالشكل النهائي لك. يستخدم كل متصفح محرك عرض مختلف عن الآخر، على سبيل المثال يستخدم فايرفوكس محركًا يسمى Gecko ويستخدم كل من كروم وأوبرا محرك باسم Blink كما أن بعض المتصفحات قد تستخدم تقنيات خاصة بها غير متوفرة في متصفحات أخرى، ما يهمك في هذا الأمر أن تفهم سبب وجود الاختلافات عند طريقة عرض صفحات الويب من متصفح لآخر، أو سبب عدم عمل بعض الميزات في متصفح بينما تعمل بشكل مثالي في متصفح آخر، ولهذا السبب يحرص مصممو المواقع على معالجة المشاكل الشائعة للتوافق مع المتصفحات في HTML و CSS.