تطوير الويب 101: أساسيات لبدء رحلتك فى 2025

مقدمة

للبدء في رحلة تعلم برمجة الويب، من الضروري أن يكون لديك معرفة بأساسيات البرمجة. في هذا الدليل، سنجيب عن بعض الأسئلة التي تدور في ذهن أي مبتدئ ينوي الدخول إلى عالم تطوير المواقع الإلكترونية، وأولها: ما هو تطوير الويب؟

مقدمة فى تطوير الويب

سنتعرف معًا على مفهوم الويب، ثم سنستعرض لغة الهيكلة الأساسية في هذا المجال، وهي HTML. سنبدأ بتعلم أساسيات HTML، اللغة المستخدمة لبناء صفحات الويب وكتابتها.

كما سنتطرق إلى مفهوم الروابط أو URLs، التي تمثل عناوين تشير إلى مستندات ومواقع أخرى على الإنترنت. خطوة بخطوة، سنصل إلى مرحلة إنشاء صفحتك الأولى على الويب. ولكن قبل كل شيء، دعونا نبدأ بفهم أساسيات الويب وأين يجب أن نبدأ في هذا المجال الواسع.

ما المقصود بتطوير الويب (Web Development)

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

ما هى مجالات تطوير الويب؟

وبالنسبة لك تعلم برمجة الويب هو أحد أهم القرارات التي ستتخذها في حياتك إذا كنت شغوفاٌ بهذا المجال. وعندها سيتعين عليك الأختيار من بين أهم ثلات مجالات في تطوير المواقع الإلكترونية:

1. تطوير الواجهة الأمامية Front-End
2. تطوير الواجهة الخلفية Back-End
3. المطور المتكامل أو الشامل Fullstack

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

المهتم بهذا المجال عليه أن يأخذ نظرة سريعة على بعض المفاهيم الأساسية ومنها تعريف الويب.

ما هو الويب: كيف يعمل وكيف يُبنى؟

ما هو web

عرفنا سابقاٌ ما هو تخصص تطوير الويب. ولكن يجب علينا الأن أن نقوم بتعريف الويب ومعرفة أيضاٌ البنية الأساسية له.

الويب هو مجموعة من المستندات المكتوبة بلغة HTML، إلى جانب موارد أخرى مثل الصور والفيديوهات، وكذلك البرامج والخدمات التي تتفاعل مع بعضها البعض لتنتج صفحة ويب مميزة.

كل شيء يمكنك الوصول إليه باستخدام متصفح الويب الخاص بك هو جزء من الويب، وهذه الموارد موزعة على آلاف الأنظمة الحاسوبية المختلفة وهو ما يطلق عليه (السيرفر).

الويب هو نظام HyperText (نص تشعبي)، مما يعني أن صفحات الويب يمكن أن تحتوي على روابط لصفحات أخرى، ويمكن للمستخدمين اتباع تلك الروابط للوصول إلى المعلومات المطلوبة.

هذا ما تفعله في كل مرة تنقر فيها على رابط في منشور مدونة أو مقال إخباري. نسمي هذه الروابط التشعبية (HyperLinks)، إختصاراٌ بمصطلح “اللينك”. والقدرة على الإنتقال من صفحة الى أخرى هي ما يجعل الويب مميزًا.

تُستخدم هذه القدرة أيضًا عند تضمين صورة أو فيديو أو جزء من الكود في صفحة الويب. يعتبر HyperText عنصرًا مهمًا للغاية، حيث تُبنى جميع تقنيات الويب حول فكرة المستندات والبيانات التي يمكن أن ترتبط ببعضها البعض بطريقة تشعبية (HyperText).

لهذا السبب يُطلق على الويب اسم “الشبكة العنكبوتية” نظرًا لتشعب وترابط الصفحات والمواقع والموارد الأخرى مع بعضها البعض مثل شبكة العنكبوت. كيف يعمل ذلك بالضبط؟ هذا ما سوف نتعلمه في هذا المقال.

ما هو موقع الويب؟

موقع الويب هو عبارة عن مجموعة من الصفحات التى تقدم محتوى معين والمربوطة ببعضها البعض بطرييقة معينة والتى تم إنشاءُها بواسطة أحد لغات البرمجة وهى HTML.

ويتكون بشكل أساسى من صفحة ويب رئيسية وصفحات فرعية متصلة ببعضها البعض من خلال عناوين الويب (الروابط).

وموقع الويب يجب أن يحتوى على الأقل على صفحة ويب واحدة. وفى تلك الحالة يسمى الموقع الإلكترونى ذو الصفحة الواحدة. أو المعنى الأكثر شعبية وهو ما يطلق عليه صفحة الهبوط؟

HTML: لغة بناء صفحات الويب الأساسية ولماذا هي مهمة؟

لماذا تعتبر HTML أساس كل صفحة ويب

لغة HTML، ليست لغة برمجة ولكن بدونها لا يمكن أن يتواجد الويب كما نعرفه الآن. فهي الهيكل الرئيسي لبناء صفحة الويب وأساس لتخطيط وبناء أي موقع ويب.

كما سوف نتعرف مستقبلًا على الوسوم الخاصة بـلغة HTML، سوف نكتشف مدى أهمية هذه الوسوم في تشكيل صفحة الويب وتصميم الهيكل الرئيسى الخاص بها بالصورة التى تريدها بالضبط. وهي أول لغة سوف نقوم بتعملها من ضمن أساسيات تطوير الويب.

تطور HTML: كيف شكلت مستقبل تطوير الويب؟

شهدت لغة HTML (HyperText Markup Language) تطورات كثيرة منذ نشأتها لتصبح الركيزة الأساسية في تطوير الويب. فمنذ بداياتها، حين كانت تقديم القليل من الوسوم التي لا تكفي إلا لتنسيق النصوص وإدراج الروابط والصور وعمل صفحة ويب بسيطة،

إلى أن ظهرت النسخة الأخيرة منها، HTML5 (الإصدار الخامس)، الذي جلب العديد من المميزات مثل التخزين المحلي (LocalStorage)، وCanvas API، وSVG.

هذه المميزات مكّنت مطوري ومصممي الويب من تنفيذ أفكار إبداعية تتضمن رسومات متحركة وتفاعلية مثيرة على المتصفح مباشرة. ولا نعرف ماذا يخبئ لنا المستقبل!

كيف يتواصل الإنترنت: فهم العلاقة بين المتصفحات والخوادم

كيف تعمل المتصفحات والخوادم معًا

خادم الويب يتكون من؟

في الغالب. هذه الخوادم هي في الأساس أجهزة كمبيوتر، رغم أنها ليست مثل الجهاز الذي تستخدمه الآن، حيث تقوم بتشغيل برامج تستجيب لطلبات المتصفح.

ما وظيفة الخادم؟

وظيفة الخادم (أو السيرفر) هي استقبال طلبات المتصفح والرد عليها. عندما يجد الخادم ما طلبه المستخدم – سواء كان صفحة، صورة، فيديو، أو أي عنصر آخر – يُرسل إليه المحتوى المطلوب بنجاح. أما في حال عدم توفر العنصر المطلوب، فيرد الخادم بكود خاص يُعرف بكود "404" ليشير إلى عدم العثور على المحتوى.

ومن المحتمل أن يكون جهازك متصلًا بالعديد من الخوادم على الإنترنت، بما في ذلك خوادم مثل YouTube أو Blogger.

إحدى الميزات المدهشة للويب هي أنك تستطيع إنشاء روابط لملفات أو مستندات مستضافة على خوادم مختلفة. على سبيل المثال، عندما تشاهد فيديو على مدونة Fullstackee.com، قد يقوم متصفحك بتشغيل هذا الفيديو وهو مستضاف على قناتنا على سيرفرات YouTube.

يمكن أن تحتوي صفحة الويب الواحدة على محموعة متنوعة من الفيديوهات والصور والخطوط أو الأكواد البرمجية من السيرفر الخاص بك أو من سيرفرات خارجية.

ما هو الفرق بين الخادم والمتصفح؟

الخادم (السيرفر) والمتصفح هما عنصران أساسيان في عملية تصفح الإنترنت، لكن لكل منهما دور مختلف.

المتصفح هو التطبيق الذي يستخدمه المستخدمون للوصول إلى المواقع، مثل Google Chrome أو Firefox، وهو يعرض صفحات الويب ويتيح التفاعل معها.

عندما يطلب المستخدم صفحة معينة، يقوم المتصفح بإرسال طلب إلى الخادم.

أما الخادم فهو الجهاز أو النظام الذي يستضيف موقع الويب ويحتوي على الملفات والبيانات الخاصة به، ويقوم بتجهيز المحتوى وإرساله إلى المتصفح عند الطلب.

ببساطة، المتصفح يعرض المحتوى للمستخدم، بينما الخادم يُخزِّن هذا المحتوى ويخدمه عندما يُطلب منه ذلك.

HTTP و HTTPS: الفرق وكيف يؤثر على أمان موقعك

القواعد التي تحكم تلك الطلبات والردود تُعرف ببروتوكول نقل النص الفائق (HTTP - HyperText Transfer Protocol). وعادةً ما تبدأ عناوين المواقع بـ "http" أو "https"، مما يشير إلى كيفية تواصل المتصفح مع الخادم.

ولكي نعرف الفرق بين كل من HTTP (HyperText Transfer Protocol) وHTTPS (HyperText Transfer Protocol Secure)، يجب أن نتعرف على مميزات وعيوب كل بروتوكول.

HTTP vs HTTPS

بروتوكول HTTP:

مميزاته:

• البساطة والسرعة سهولة وسرعة نقل البيانات.
• عدم التشفير، وتعتبر ميزة هنا لأنها تؤدي إلى سرعة نقل البيانات نسبيًا.

عيوبه:

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

بروتوكول HTTPS:

مميزاته:

• التشفير: يتم باستخدام SSL/TLS (Secure Sockets Layer/Transport Layer Security) لتشفير البيانات أثناء نقلها بين المتصفح والخادم، مما يوفر أمانًا وحماية أكبر للبيانات.
• المصادقة: يضمن HTTPS أن الموقع الذي يتصل به المستخدم هو الموقع الصحيح وليس موقعًا محتالًا (من خلال شهادات SSL التي تُصدر من جهات موثوقة).
• سلامة البيانات: يضمن HTTPS أن البيانات المرسلة لم تتعرض للتعديل أثناء النقل.

عيوبه:

• أبطأ قليلاً من HTTP: بسبب عمليات التشفير وفك التشفير، قد يكون HTTPS أبطأ نسبيًا من HTTP، على الرغم من أن الفرق في السرعة أصبح غير ملحوظ مع تطور التكنولوجيا.
• التكلفة: بعض المواقع تحتاج إلى شراء شهادات SSL لتفعيل HTTPS، مما قد يُضيف تكلفة.

من خلال المميزات والعيوب لكل بروتوكول، نجد أن الفرق بين بروتوكول HTTP وHTTPS هو كما يلي:

• التشفير: HTTP لا يستخدم أي نوع من التشفير، بينما HTTPS يعتمد على SSL/TLS لتشفير البيانات.
• الأمان: HTTPS يوفر مستوى عاليًا من الأمان ضد الهجمات مثل التنصت أو Man-in-the-Middle (MITM)، بينما HTTP عرضة لتلك الهجمات.
• شهادة SSL: لا يحتاج HTTP إلى شهادة، بينما يتطلب HTTPS شهادة SSL يتم إصدارها من جهات موثوقة لتفعيل البروتوكول.

لذلك، يجب استخدام بروتوكول HTTPS بشكل عام:

• في المواقع التي تتعامل مع بيانات حساسة مثل كلمات المرور، معلومات الدفع، أو المعلومات الشخصية.
• في أي موقع يحتاج إلى توفير ثقة وأمان للمستخدمين.
• يُفضل استخدام HTTPS بشكل عام لضمان أمان الاتصال حتى في المواقع البسيطة.

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

يمكن لمتصفحك عرض المستندات المخزنة محليًا على جهاز الكمبيوتر الخاص بك، وكذلك تلك الموجودة على الإنترنت. لاحقًا، عندما تكون جاهزًا لمشاركة صفحة الويب مع العالم، ستقوم بتحميلها إلى خادم.

أهم مفاهيم برمجة الويب: التراكيب، الشكلية، والتداخل

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

Syntax - Formalism - Nesting

المفهوم الأول هو التركيب ( Syntax ):

وهو المفهوم الذي يشير إلى قواعد اللغة في البرمجة. تمامًا كما تمتلك اللغات الطبيعية مثل الإنجليزية أو العربية قواعد نحوية، فإن لغات البرمجة مثل HTML أو PHP تتبع أيضًا قواعد معينة.

على سبيل المثال، عندما نقول “الكلب جرى في الحديقة”، وليس “الحديقة جرى الكلب”، لأن ذلك غير صحيح نحويًا.

هذا المفهوم ينطبق أيضًا على البرمجة. كل لغة برمجة لها مجموعة من قواعد التركيب التي تحدد كيفية هيكلة الكود بها.

مع تعلمك لغة برمجة جديدة، ستبدأ بالتدريج في اكتساب هذه القواعد، والتي قد يتم تقديمها بشكل صريح أو يتم تعلمها من خلال أمثلة عملية لفهم عميق لها.

المفهوم الثاني هو الشكلية ( Formalism ):

وغالبًا ما يُشار إليه بـ “العقلية الحرفية” في البرمجة. تفهم الحواسيب الكود حرفيًا. كل كلمة، حرف، ورمز له أهمية. لا يمكن للحواسيب استنتاج نواياك؛ بل تنفذ الأوامر البرمجية تمامًا كما كتبتها أنت.

<!-- Wrong -->
<tilte></tilte>
<!-- Correct -->
<title></title>

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

الدقة في الإملاء أمر بالغ الأهمية، لأن البرمجة عادةً ما تفتقر إلى ميزات التصحيح التلقائي.

المفهوم الثالث هو التداخل ( Nesting ):

وهو المفهوم الذي يتعلق بكيفية وضع بعض أجزاء الكود داخل أجزاء أخرى بشكل منظم. نواجه هذا في اللغة البشرية أيضًا.

على سبيل المثال، في جملة مثل، “قالت مريم إن أدم أخبرها بشيء عن صديقتها”، نستخدم علامات اقتباس متداخلة.

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

وأخيرًا، تذكر أن هناك موارد ومعلومات وفيرة متاحة لمساعدتك في رحلتك البرمجية. العديد من الأشخاص حول العالم يتعلمون البرمجة معك.

واحدة من أكثر الأدوات قيمة لديك هي الوثائق—الدلائل والدروس المتاحة للغات البرمجة التي تقوم بدراستها. على سبيل المثال، يمكنك العثور على معلومات شاملة حول HTML على موقع شبكة مطوري Mozilla (MDN). بالإضافة إلى الموارد التي تقدمها YouTube.

هناك ثروة من المساعدة عبر الإنترنت يمكنك الوصول إليها من خلال محرك البحث المفضل لديك ومن ضمنها مدونة Fullstackee التي سوف نتعلم فيها معظم لغات البرمجة الخاصة بتطوير الويب في الدروس القادمة.

اختيار أدواتك: الفرق بين محررات النصوص والأكواد

الفرق بين محرر النصوص والأكواد

HTML مثل معظم لغات البرمجة يتم كتابتها فى ملفات نصية لنلقى نظرة على هذا.

الملفات النصية تحتوى على أحرف أرقام وSymbols وفراغات ولا تحتوى على أى تنسيق مميز كالنص العريض أو المائل أو حتى لون للنص ذاته. أيضا فإنها لا تحتوى على أى صور أو icons أو أى عناصر مرئية.

يمكنك اعتبار النص أي شيء يمكنك كتابته على آلة كاتبة قديمة. وعلى الرغم من أن النص قد يبدو محدودًا للغاية، إلا أنه مرن للغاية ويمكن استخدامه لأغراض لا حصر لها.

عندما تنظر الى كود HTML تعتقد إنه معقد وملئ باللأشياء الغريبة ولكن فى الحقيقة هو أولاٌ وأخيراٌ عبارة عن نص. والمظهر الذى يظهر للشخص عندما يتصفح صفحة الويب هو عبارة عن ترجمة لتلك النصوص من قبل المتصفح.

المتصفح يقوم بترجمة لغة html

عندما تحتوي صفحة ويب على صورة أو فيديو، مثل تلك الصور الموجودة داخل هذا المقال، يتم عرضها من خلال تضمين عنوان نصي داخل كود الصفحة. يقوم المتصفح بقراءة هذا العنوان، ثم بتحميل الصور أو الفيديوهات المطلوبة لعرضها في الصفحة.

<img src="path/to/image" alt="alternative text" >

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

تجدر الإشارة إلى أن هذه الألوان ليست مخزنة داخل الملف نفسه؛ بل يعرف المحرر صيغة HTML ويطبق الألوان لتوجيهك أثناء الكتابة.

من الشائع استخدام اسم ملف ينتهي بالامتداد “.html” عند التعامل مع ملفات HTML، مما يساعد البرامج، مثل المحررات والمتصفحات، على التعرف على الملف ومعالجته بشكل صحيح.

إنشاء أول ملف HTML:

لنلعب قليلًا مع لغة HTML باستخدام محرر الأكواد الخاص بك، مثل Atom أو VS Code، وأيضا هناك Sublime Text.

اتبع الخطوات التالية لإنشاء ملف جديد في محرر الأكواد الخاص بك واحفظه؛ يمكنك تسميته testing.html مثلاً،

ثم ابدأ العمل داخله. يتيح لك المحرر العمل على عدة ملفات في نفس الوقت إذا كنت ترغب بذلك، لكن تأكد من حفظ كل ملف بعد إجراء التعديلات.

1. قم بفتح محرر الأكواد Sublime Text وقم بالضغط على File > New File
2. قم بكتابة بعض الأكواد بداخله واضغط حفظ
3. قم بتسمية الملف testing.html واحفظه فى مكان ما على جهازك
4. قم بالضفط الى فتح الملف بواسطة متصفح ما أو أنقر عليه ضغطتين فقط
5. مبروك لقد قمت بإنشاء أول صفحة ويب

1. قم بفتح محرر الأكواد Sublime Text وقم بالضغط على New File

إنشاء ملف html على sublime

2. قم بكتابة بعض الأكواد بداخله واضغط حفظ

كتابة بعض أكواد HTML داخل الملف

3. قم بتسمية الملف testing.html واحفظه فى مكان ما على جهازك

حفظ ملف HTML جديد

4. قم بالضفط الى فتح الملف بواسطة متصفح ما أو أنقر عليه ضغطتين فقط

إفتح ملف HTML

5. مبروك لقد قمت بإنشاء أول صفحة ويب

عرض ملف html داخل المتصفح

الخاتمة

وختامًا، تعلم برمجة الويب هو خطوة مثيرة نحو بناء مهارات جديدة وفتح آفاق إبداعية لا حدود لها.

لا تتردد في طرح أي تساؤلات أو مشاركتنا تجربتك في التعليقات – فنحن هنا لنساعدك في رحلتك نحو الاحتراف. ما هو السؤال الأول الذي يخطر ببالك حول عالم تطوير الويب؟ شاركنا رأيك!

تعديل المقال