هل تبحث دورة تعلم أساسيات تصميم الويب باستخدام HTML وCSS و JavaScript ؟

مقدمة:

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

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

ما هو HTML؟

HTML تعني "Hypertext Markup Language"، وهي ليست لغة برمجة، بل لغة توصيفية تُستخدم لإنشاء صفحات الويب. كل عنصر في صفحة الويب هو بمثابة كود HTML يحدد هيكلة المحتوى مثل العناوين، الفقرات، والصور.

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

أساسيات CSS

CSS تعني "Cascading Style Sheets"، وهي المسؤولة عن تحديد أنماط العناصر مثل الألوان، الأحجام، والتخطيطات. بعبارة أخرى، CSS هي ما يجعل الصفحة تبدو جميلة ومتناسقة.

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

هناك تقنيات متقدمة مثل Sass و Less تُساعد على تحسين كتابة CSS بطريقة أكثر ذكاءً، لكنها ليست ضرورية في البداية.

ما هو JavaScript؟

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

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

كيف يعمل الإنترنت؟

لفهم كيفية عمل الويب، يجب أن نتعرف على العلاقة بين العميل (Client) والخادم (Server):

1.     العميل هو أي مستخدم متصل بالإنترنت يستخدم متصفح الويب.

2.   الخادم هو جهاز كمبيوتر متصل دائمًا، ويحتوي على مواقع الويب والبيانات.

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

هذا الطلب يُسمى "HTTP Request"، ويشمل رموز استجابة مثل 200 (نجاح) و 404 (الموقع غير موجود).

إعداد بيئة العمل

في الدورة، سنقوم بتوضيح كيفية تثبيت المحرر البرمجي الخاص بك، مثل Visual Studio Code، وكيفية إعداد بيئة العمل الخاصة بك لكتابة وتشغيل أكواد HTML و CSS و JavaScript بسهولة.

التعامل مع محررات النصوص وبرامج كتابة الأكواد

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

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

هناك العديد من محررات النصوص المتاحة، مثل Sublime Text و Notepad++ وغيرها. توفر هذه المحررات ميزات أساسية لتنسيق الكود وتسهيل كتابته، ولكن إذا كنت بحاجة إلى أدوات أكثر تقدمًا، يمكنك استخدام بيئة تطوير متكاملة (IDE) التي تقدم مجموعة قوية من الميزات لإدارة الأكواد والملفات البرمجية.

تثبيت Sublime Text:

1.     ابحث عن "Sublime Text down load" على جوجل.

2.   انقر على الرابط الرسمي للتنزيل.

3.    قم بتنزيل الإصدار المناسب لنظام التشغيل الخاص بك (Windows أو Mac أو Linux).

4.   افتح ملف التثبيت واتبع التعليمات الظاهرة على الشاشة (التالي > التالي > تثبيت > إنهاء).

5.    بعد التثبيت، افتح البرنامج.

إنشاء وحفظ ملف في Sublime Text:

1.     افتح Sublime Text.

2.   اكتب أي نص، مثل "Hello".

3.    اضغط على Ctrl + Shift + S لحفظ الملف.

4.   اختر موقع الحفظ (مثل سطح المكتب).

5.    قم بتسمية الملف وأضف الامتداد المناسب (مثل index.Html لملفات HTML).

6.   انقر على حفظ.

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

هذه هي العملية الأساسية لاستخدام محرر نصوص. طوال هذا الكورس، سنستخدم Sublime Text لكتابة وحفظ الأكواد البرمجية بكفاءة.

التعامل مع محررات النصوص وبرامج كتابة الأكواد

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

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

هناك العديد من محررات النصوص المتاحة، مثل Sublime Text و Notepad++ وغيرها. توفر هذه المحررات ميزات أساسية لتنسيق الكود وتسهيل كتابته، ولكن إذا كنت بحاجة إلى أدوات أكثر تقدمًا، يمكنك استخدام بيئة تطوير متكاملة (IDE) التي تقدم مجموعة قوية من الميزات لإدارة الأكواد والملفات البرمجية.

تثبيت Sublime Text:

1.     ابحث عن "Sublime Text download" على جوجل.

2.   انقر على الرابط الرسمي للتنزيل.

3.    قم بتنزيل الإصدار المناسب لنظام التشغيل الخاص بك (Windows أو Mac أو Linux).

4.   افتح ملف التثبيت واتبع التعليمات الظاهرة على الشاشة (التالي > التالي > تثبيت > إنهاء).

5.    بعد التثبيت، افتح البرنامج.

إنشاء وحفظ ملف في Sublime Text:

1.     افتح Sublime Text.

2.   اكتب أي نص، مثل "Hello".

3.    اضغط على Ctrl + Shift + S لحفظ الملف.

4.   اختر موقع الحفظ (مثل سطح المكتب).

5.    قم بتسمية الملف وأضف الامتداد المناسب (مثل index.Html لملفات HTML).

6.   انقر على حفظ.

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

هذه هي العملية الأساسية لاستخدام محرر نصوص. طوال هذا الكورس، سنستخدم Sublime Text لكتابة وحفظ الأكواد البرمجية بكفاءة.

التعامل مع المتصفح وأدوات المطورين

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

أنا أستخدم Google Chrome وأوصي به، حيث إنه المتصفح الأكثر استخدامًا من قِبل المطورين بسبب سهولة استخدامه وواجهته الصديقة للمطورين، إلى جانب توفيره العديد من الأدوات المفيدة.

إذا لم يكن لديك Google Chrome مثبتًا، يمكنك تنزيله عبر أي متصفح آخر مثل Microsoft Edge أو Firefox.

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

1.     واجهة المستخدم (User Interface): تتضمن العناصر المرئية مثل أزرار الرجوع والتحديث، شريط العناوين، الإشارات المرجعية، والإضافات.

2.   محرك التصيير (Rendering Engine): يقوم بتحميل وتحليل وعرض HTML و CSS والموارد الأخرى مثل الصور والفيديوهات.

3.    محرك JavaScript: المسؤول عن تنفيذ أكواد JavaScript، وهو يختلف من متصفح لآخر:

o       Chrome & Opera: يستخدمان محرك V8.

o       Firefox: يستخدم محرك SpiderMonkey.

o       Safari: يستخدم محرك JavaScriptCore.

استخدام أدوات المطور (Developer Tools)

يمكنك فتح أدوات المطور في Chrome عبر الضغط على Ctrl + Shift + I أو F12.

تتيح لك أدوات المطور إمكانية:

فحص وتعديل عناصر HTML و CSS في الوقت الفعلي.

تحليل أداء الصفحة عبر علامة Network.

تنفيذ وتجربة أكواد JavaScript في Console.

محاكاة عرض الصفحة على الأجهزة المختلفة باستخدام Toggle Device Toolbar.

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

هذه الأدوات ستكون ضرورية جدًا أثناء تطويرك لمواقع الويب، لذا يُفضل أن تستكشفها جيدًا.

التعامل مع محررات النصوص وبرامج كتابة الأكواد

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

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

هناك العديد من محررات النصوص المتاحة، مثل Sublime Text و Notepad++ وغيرها. توفر هذه المحررات ميزات أساسية لتنسيق الكود وتسهيل كتابته، ولكن إذا كنت بحاجة إلى أدوات أكثر تقدمًا، يمكنك استخدام بيئة تطوير متكاملة (IDE) التي تقدم مجموعة قوية من الميزات لإدارة الأكواد والملفات البرمجية.

إنشاء أول صفحة HTML

بعد تثبيت محرر النصوص وفتح Sublime Text، يمكنك البدء في كتابة أول ملف HTML لك.

1.    افتح Sublime Text وأنشئ ملفًا جديدًا بالضغط على Ctrl + N.

2.   احفظ الملف بالاسم index.Html عبر الضغط على Ctrl + S.

3.   اكتب الكود الأساسي التالي:

<!DOCTYPE html>

<html>

<head>

   <name>أول صفحة HTML</title>

   <meta charset="UTF-8">

</head>

<frame>

   <h1>مرحبًا بك في عالم HTML!</h1>

   <p>هذه هي أول صفحة HTML نقوم بإنشائها.</p>

</frame>

</html>

4.   احفظ الملف ثم افتحه باستخدام أي متصفح ويب لمشاهدة النتيجة.

هذا الكود يوضح العناصر الأساسية في HTML:

<!DOCTYPE html>: يعرّف المستند على أنه HTML5.

<html>: العنصر الجذر للمستند.

<head>: يحتوي على معلومات الصفحة مثل العنوان والترميز.

<title>: يحدد عنوان الصفحة الذي يظهر في شريط المتصفح.

<meta charset="UTF-eight">: يحدد ترميز الأحرف لضمان دعم اللغة العربية.

<body>: يحتوي على المحتوى الذي سيظهر على الصفحة.

<h1>: عنوان رئيسي.

<p>: فقرة نصية.

فهم السمات (Attributes) في HTML

السمات (Attributes) في HTML هي معلومات إضافية تُضاف إلى العناصر للتحكم في سلوكها أو مظهرها.

أمثلة على السمات:

1.    سمة href في الروابط:

<a href="https://www.Example.Com">زيارة Example</a>

2.   سمة src في الصور:

<img src="picture.Jpg" alt="وصف للصورة">

3.   سمة width و top لتحديد حجم الصورة:

<img src="emblem.Png" width="two hundred" height="100">

4.   سمة identification لتحديد عنصر معين:

<p identity="precise-paragraph">هذا فقرة مميزة.</p>

5.   سمة magnificence لتصنيف عدة عناصر معًا:

<p magnificence="text-fashion">نص بتنسيق معين.</p>

قواعد استخدام السمات:

تُكتب داخل وسم العنصر الأولي <tag>.

تُكتب كزوج اسم="قيمة".

يُفضل استخدام علامات الاقتباس المزدوجة للقيم.

مثال عملي يجمع بين عدة سمات:

<a href="https://www.Google.Com" target="_blank" title="افتح Google في تبويب جديد">اذهب إلى Google</a>

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

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

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

هناك العديد من محررات النصوص المتاحة، مثل Sublime Text و Notepad++ وغيرها. توفر هذه المحررات ميزات أساسية لتنسيق الكود وتسهيل كتابته، ولكن إذا كنت بحاجة إلى أدوات أكثر تقدمًا، يمكنك استخدام بيئة تطوير متكاملة (IDE) التي تقدم مجموعة قوية من الميزات لإدارة الأكواد والملفات البرمجية.

العناوين (Headings) في HTML

العناوين هي نصوص تستخدم كعناوين رئيسية أو فرعية في صفحات الويب، وتتراوح بين <h1> و <h6>، حيث يكون <h1> الأكبر والأكثر أهمية، و <h6> الأصغر.

<h1>عنوان رئيسي</h1>

<h2>عنوان فرعي</h2>

<h3>عنوان أقل أهمية</h3>

العناوين مهمة لتحسين تحسين محركات البحث (SEO) ولتنظيم المحتوى بشكل منطقي يسهل قراءته وفهمه.

خلاصة

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

إذا كان لديك أي أسئلة، لا تتردد في طرحها، وسأكون سعيدًا بالإجابة عليها. حظًا سعيدًا في رحلتك لتعلم تطوير الويب!