شرح HTML و CSS وجافا سكريبت للمبتدئين
عندما تتعمق في عالم تطوير الويب ، ستدرك بسرعة أن بعض المصطلحات أساسية للصناعة. ثلاثة من هذه الأدوات الأساسية هي HTML و CSS و JavaScript. في الواقع ، غالبًا ما يشار إلى هذه اللغات على أنها اللبنات الأساسية للويب.
تعد HTML و CSS و JavaScript ضرورية لإنشاء مواقع ويب ديناميكية وجذابة ، وهي بمثابة الأساس للعديد من أدوات تطوير الويب والمكتبات. نتيجة لذلك ، إذا كنت مهتمًا بأن تصبح مطور ويب ، فإن إتقان هذه اللغات الثلاث أمر ضروري.
ستجد أن مواقع الويب مبنية في الغالب باستخدام HTML و CSS و JavaScript. لكن ما هي هذه اللغات بالضبط ، وماذا تفعل؟ لماذا هم حيويون جدا لتطوير الويب؟
في هذه المقالة ، سأستكشف أساسيات HTML و CSS و JavaScript ، وكيف تعمل معًا لجعل وظيفة الويب. ستتعلم ما تفعله كل لغة بمفردها وكيف تتفاعل مع بعضها البعض لإنشاء مواقع ويب وظيفية وممتعة من الناحية الجمالية. من خلال فهم دور HTML و CSS و JavaScript في تطوير الويب ، سيكون لديك أساس متين يمكنك البناء عليه بينما تستمر في التعلم والنمو في هذا المجال.
ما هو الإنترنت؟
الإنترنت في جوهره عبارة عن شبكة واسعة من أجهزة الكمبيوتر المترابطة التي تتواصل مع بعضها البعض لتبادل المعلومات. يحدث تبادل البيانات هذا عبر مجموعة متنوعة من القنوات ، مثل البريد الإلكتروني ونقل الملفات وتصفح الويب.
يتم تعيين رقم تعريف فريد لكل جهاز يتصل بالإنترنت ، سواء كان جهاز كمبيوتر أو هاتفًا ذكيًا أو جهازًا لوحيًا ، يُعرف باسم عنوان IP. يعمل عنوان IP كعنوان رقمي يميز كل جهاز على الإنترنت ويسمح بإرسال البيانات واستلامها بدقة.
يتكون عنوان IP من سلسلة من أربعة أرقام ، كل منها مفصولة بنقطة ، ويمكن أن يتراوح من 0 إلى 255. على سبيل المثال ، قد يبدو عنوان IP كما يلي: 168.212.226.204. يحدد هذا التسلسل الرقمي المحدد بشكل فريد جهازًا على الإنترنت ويمكّنه من إرسال واستقبال البيانات إلى الأجهزة الأخرى على الشبكة.
بفضل الإنترنت والقدرة على التواصل ومشاركة المعلومات على الفور ، يمكن للناس في جميع أنحاء العالم الاتصال وتبادل الأفكار والمعرفة والخبرات بطرق كانت مستحيلة في السابق.
ما هو الويب؟
الويب ، المعروف أيضًا باسم شبكة الويب العالمية ، هو جزء من الإنترنت يسمح للأشخاص بالوصول إلى المعلومات ومشاركتها من خلال مجموعة متنوعة من الموارد الرقمية. الويب نظام معقد يتكون من مكونين رئيسيين: عميل متصفح الويب وخادم الويب.
عند الوصول إلى موقع ويب ، يرسل عميل متصفح الويب الخاص بك طلبًا إلى خادم الويب ، والذي يستجيب بعد ذلك عن طريق إرسال البيانات مرة أخرى إلى متصفحك. لتسهيل هذا الاتصال بين العميل والخادم ، يحتاج الطرفان إلى إنشاء اتفاقية تُعرف باسم واجهة برمجة التطبيقات أو API.
ومع ذلك ، يجب تنسيق البيانات التي يرسلها الخادم مرة أخرى بطريقة يسهل على المستخدمين فهمها ، بغض النظر عن قدراتهم الفنية. هذا هو المكان الذي يأتي فيه تطوير الويب ، باستخدام لغات مثل HTML و CSS و JavaScript لترتيب البيانات وتنسيقها في واجهة جذابة بصريًا وسهلة الاستخدام.
يتم استخدام HTML (HyperText Markup Language) لهيكلة المحتوى وتنظيمه على موقع ويب ، بينما يتم استخدام CSS (أوراق الأنماط المتتالية) لإضافة نمط وتصميم إلى الصفحة. تُستخدم JavaScript لإضافة التفاعلية والوظائف الديناميكية إلى موقع الويب.
تتيح هذه التقنيات معًا لمطوري الويب إنشاء مواقع ويب جذابة وسهلة الاستخدام يمكن الوصول إليها ومشاركتها من قبل الأشخاص في جميع أنحاء العالم.
ما هو HTML؟
HTML ، التي تعني Hyper Text Markup Language ، هي لغة برمجة تُستخدم لإنشاء إرشادات مفصلة تتعلق بنمط صفحة الويب ونوعها وتنسيقها وهيكلها وتركيبها قبل عرضها على متصفح الويب. بمعنى آخر ، إنها اللغة المستخدمة لبناء صفحة الويب الخاصة بك في عناصر مختلفة مثل الفقرات والعناوين وأشرطة التنقل والمزيد. يساعد مطوري الويب على إنشاء الشكل والمظهر المطلوبين لصفحات الويب الخاصة بهم.
لفهم ماهية HTML بشكل أفضل ، يمكننا التفكير فيها على أنها مجموعة من الإرشادات التفصيلية ، على غرار المخطوطة ، التي تحدد تركيبة صفحة الويب ، بما في ذلك نمط النوع وتخطيط الصفحات والتفاصيل الأساسية الأخرى .
في سياق تطوير الويب ، يمكننا استبدال مصطلح "مطبوع" بكلمة "تم تقديمه" ، وهو وصف أكثر دقة. تعد HTML مفيدة في مساعدة مطوري الويب على تنظيم صفحات الويب الخاصة بهم من خلال استخدام عناصر مختلفة مثل الفقرات والعناوين وأشرطة التنقل.
لتوضيح كيفية استخدام HTML ، يمكننا إنشاء مستند HTML أساسي يتضمن عناصر مختلفة مثل h1 و h2 و h3 و p و ul li والإدخال وجسم الصفحة. بالإضافة إلى ذلك ، يمكننا إضافة سمات إلى هذه العناصر تسمح لمطوري الويب بالتعرف عليها والوصول إليها من أماكن أخرى على الموقع. على سبيل المثال ، يمكننا تعيين سمة id لجميع عناصر الامتداد الثلاثة في مثالنا ، مما يساعدنا في الوصول إليها من JavaScript.
لجعل صفحة الويب أكثر جاذبية وإطلالة ، يمكننا استخدام CSS (أوراق الأنماط المتتالية) لإضافة نمط أساسي ، مثل الألوان والخطوط والخلفيات. يتيح الجمع بين HTML و CSS لمطوري الويب إنشاء صفحات ويب جذابة وجذابة بصريًا.
إذا كنت مهتمًا بمعرفة المزيد عن HTML ، فإن شهادة تصميم الويب المستجيب لـ freeCodeCamp ودورة HTML الجديدة الكاملة من Beau Carnes هي موارد ممتازة للبدء.
ما هو CSS؟
CSS ، أو Cascading Style Sheets ، هي لغة تصميم تُستخدم لتحسين مظهر صفحات الويب. بينما HTML هي لغة ترميزية تقوم ببناء وتنسيق صفحات الويب ، فإن CSS توفر طريقة لإضافة أسلوب وجاذبية بصرية إلى تلك الصفحات.
باستخدام CSS ، يمكنك تحديد عناصر صفحة ويب فردية أو متعددة وتحديد مظهرها وموضعها ولونها وخلفيتها. محددات CSS هي القواعد التي تحكم هذه العملية.
مثلما تعمل بشرتنا وشعرنا ومظهرنا الجسدي على تحسين مظهرنا العام ، فإن أنماط CSS تجعل صفحات الويب أكثر جاذبية وجاذبية للمستخدمين. بالإضافة إلى ذلك ، يمكن استخدام CSS لتخطيط العناصر في مناطق محددة من الصفحة.
لتوضيح كيفية عمل CSS ، دعنا نلقي نظرة على بعض نماذج التعليمات البرمجية. يعين الكود أدناه لون الخلفية للمستويات الثلاثة من الرؤوس إلى الأحمر والأزرق والأخضر على التوالي:
h1 {background-color: #ff0000;}h2 {background-color: #0000FF;}h3 {background-color: #00FF00;}em {background-color: #000000;color: #ffffff;}
من خلال تحديد عناصر معينة مثل رؤوس h1 و h2 و h3 وتحديد لون الخلفية ، يمكنك إنشاء مظهر جميل من الناحية الجمالية لصفحة الويب الخاصة بك.
ما هو جافا سكريبت؟
JavaScript هي لغة برمجة تسمح لك بجعل صفحات الويب الخاصة بك تفاعلية عن طريق إضافة إجراءات وحسابات وشروط. بعبارات بسيطة ، تتعلق البرمجة بإخبار صفحة الويب الخاصة بك أو العناصر الفردية بالتفاعل بطريقة معينة عند حدوث حدث معين. توفر واجهة برمجة تطبيقات نموذج كائن المستند (DOM) تمثيلاً يشبه الشجرة لصفحة الويب ، مما يجعل من الممكن الوصول إلى أي عنصر وتغييره وفقًا لاحتياجاتك.
على سبيل المثال ، لنفترض أنك تريد حساب مجموع رقمين وعرض النتيجة على صفحة الويب الخاصة بك. يمكنك تحقيق ذلك باستخدام JavaScript عن طريق إنشاء دالة تسترد الأرقام من عناصر معينة في الصفحة ، وتنفذ الحساب ، ثم تقوم بتحديث نص عنصر آخر بالنتيجة.
في رمز المثال المقدم ، تأخذ الوظيفة "displaySum" الرقمين الأول والثاني من العناصر ذات المعرّفات "firstNum" و "secondNum" ، وتحولها إلى أرقام باستخدام طريقة Number () ، وتجمعها معًا ، ثم تعيّن النص العنصر بالمعرف "إجابة" لعرض المجموع.
لجعل التعليمات البرمجية تعمل ، يتم تعيين سمات فريدة (معرفات) للعناصر في HTML ، مما يسمح باستهدافها باستخدام طريقة document.getElementById () في JavaScript. عندما ينقر المستخدم على زر "الحصول على المجموع" ، يتم تنفيذ الوظيفة ، ويتم عرض النتيجة على الصفحة.
إذا كنت مهتمًا بمعرفة المزيد عن JavaScript ، فإن freeCodeCamp تقدم شهادة شاملة لخوارزميات JavaScript وهياكل البيانات ، كما أن دورة Intro to JS متاحة أيضًا للمبتدئين.
كيفية الجمع بين HTML و CSS و JavaScript
تعد HTML و CSS و JavaScript ثلاث لغات مهمة تعمل جنبًا إلى جنب مع تنسيق صفحات الويب وتصميمها وبرمجتها. يوفر HTML (Hypertext Markup Language) بنية الصفحة ، بينما تضيف CSS (أوراق الأنماط المتتالية) عناصر تصميم مرئية مثل الخطوط والألوان والتخطيطات. من ناحية أخرى ، تضيف JavaScript التفاعل والوظائف إلى صفحة الويب.
عندما يتم ربط صفحات الويب مع الارتباطات التشعبية وجميع أصولها مثل الصور ومقاطع الفيديو ، فإنها تصبح موقعًا على الويب. يتم عرض موقع الويب هذا في الواجهة الأمامية ، حيث يمكن للمستخدمين عرض المحتوى والتفاعل معه.
من المهم ملاحظة أن البيانات الحساسة ، مثل كلمات المرور ، يتم تخزينها وتوفيرها من النهاية الخلفية لموقع الويب. هذه النهاية الخلفية موجودة فقط على كمبيوتر الخادم ولا يتم عرضها في متصفح الواجهة الأمامية. لا يمكن للمستخدمين الوصول بسهولة أو عرض هذه المعلومات. على هذا النحو ، تكون الواجهة الخلفية مسؤولة عن معالجة البيانات وتخزينها وأمانها ، بينما تركز الواجهة الأمامية على تقديم تجربة جذابة وسهلة الاستخدام.
كمطور ويب ، فإن اللغات الأساسية المستخدمة في إنشاء مواقع الويب هي HTML و CSS و JavaScript. يتم استخدام HTML في هيكلة الموقع ، ويتم استخدام CSS لتصميم صفحة الويب وتخطيطها ، ويتم استخدام JavaScript كلغة برمجة.
بينما تم استخدام CSS في الأصل فقط لأغراض التصميم والتصميم ، فقد تطور الآن لدمج الرسوم المتحركة والانتقالات السلسة. بالإضافة إلى ذلك ، يمكن أيضًا استخدام CSS لبعض البرمجة الأساسية ، مثل تحديد قواعد نمط مختلفة لشاشات أو دقة مختلفة باستخدام استعلامات الوسائط.
على الرغم من استخدام JavaScript في البداية فقط في المتصفح ، إلا أنه قد توسع إلى ما هو أبعد من ذلك ويمكن استخدامه الآن على الخوادم بفضل Node.js. على الرغم من هذه التغييرات ، تظل HTML و CSS و JavaScript هي اللغات الأساسية للويب.
إذا وجدت هذه المقالة مفيدة ، فلدي سلسلة تحديات أسبوعية حول الترميز على مدونتي تهدف إلى تعليم المبتدئين كيفية البرمجة في JavaScript. وأهيب بكم للتحقق من ذلك. بالإضافة إلى ذلك ، قمت مؤخرًا بإنشاء كتاب إلكتروني يغطي 50 موضوعًا في JavaScript ، مكتملًا بالملاحظات الرقمية المرسومة يدويًا. إذا كنت تتعلم JavaScript حاليًا ، فقد يكون ذلك مفيدًا لك.
أشكرك على الوقت الذي استغرقته في قراءة هذا المقال ، وآمل أن أراك مرة أخرى قريبًا!