السلام عليكم ورحمة الله وبركاته، يعتبر تصميم مواقع الويب من أهم المهارات المفيدة في عام 2022، ويسعى معظم الشباب لتعلم هذه المهارة وخاصًا أن جميع الدول تقريبًا تهتم بجميع مجالات البرمجة والتكنولوجيا وتهتم بالشباب المتميزين في أي من مجالات البرمجة. فمن لديه فرصة أو وقت لتعلم مهارة من مهارات البرمجة مثل تصميم مواقع الويب فلينتهز هذه الفرصة وهذا الوقت الثمين.
تصميم مواقع الويب
هذا المصطلح يشير إلى عملية التخطيط والتصور والترتيب لمحتوى صفحة الإنترنت. تشمل هذه العملية كل الجوانب الأساسية والجمالية لموقع الويب. يتضمن تصميم مواقع الويب أيضًا تطبيقات الويب، تطبيقات الموبايل، وتصميم واجهة المستخدم.
الفرق بين لغة HTML ولغة CSS
HTML هي اختصار لـ "HyperText Markup Language" وتعني لغة ترميز النص الفائق. وهي البنية الأساسية لصفحة الويب. فهي هيكل محتوى الويب بحيث إنها هي أساس أي صفحة ويب ولا يمكن أن تنشأ صفحة ويب بطريقة صحيحة ومنسقة دون لغة HTML. تشير كلمة "HyperText" إلى الروابط التي تربط صفحات الويب ببعضها البعض حيث تكون جميعها مرتبطة ومنسقة للعمل معًا بشكل منظم، والروابط هي جانب أساسي من جوانب الويب. تشير كلمة "Markup" لإضافة رمز نص أو صورة أو عناصر أخرى للعرض في صفحة الويب، وتحتوي لغة HTML على العديد من الرموز مثل: <head>, <title>, <header>, <body>, <section>, <div>, <p>, <img>, <li>, <span>, والعديد من الرموز الأخرى.
تكوين الرموز في لغة HTML: يتم كتابة الرموز في اللغة عن طريق تعيين اسم العنصر بين "<" و ">" مثل: <title> ويُستخدم هذا الرمز لتعيين اسم صفحة الويب. وهذه الرموز غير حساسة لحالة الأحرف. أي أنه يمكن كتابة هذه الرموز بأحرف كبيرة أو صغيرة أو خليط بين الحروف الكبيرة والصغيرة. على سبيل المثال فإن "<TITLE>" و"<Title>" لا يوجد فرق بينهما وبين "<title>". ولكن الأفضل والعُرف كتابة الرموز بالأحرف الصغيرة لسهولة قراءتها. وتجد أن جميع المبرمجون المحترفون يكتبون الرموز بالأحرف الصغيرة.
CSS: CSS هي اختصار لـ "Cascading Style Sheets" وتعني صفحات التنسيق النمطية. CSS لغة أنماط تُستخدم لوصف عرض كُتب بلغة HTML أو XML. تصف لغة CSS كيف يظهر شكل العنصر في الصفحة على الشاشة. حيث أن لغة CSS هي الجلد الذي يغطي هيكل صفحة الويب والذي يعطيها شكل جمالي ومنسق. لغة CSS من اللغات الأساسية للويب وهي موحدة عبر المتصفحات. تم إطلاق أكثر من إصدار للغة CSS وأحدثهم هو إصدار CSS3.
الكتابة في لغة CSS: تختلف كتابة الأوامر في لغة CSS عن لغة HTML. حيث في لغة CSS تقوم بكتابة أمر لتحديد العنصر الذي تريد تطبيق عليه التغييرات أولًا وهذا العنصر في الغالب يكون من صفحة الـHTML. ومن ثم تقوم بكتابة التغييرات والأوامر التي تريد تنفيذها على هذا العنصر مثل تغيير لون العنصر أو تكبير العنصر أو تحريكه.
في هذا الكود البرمجي قمت باختيار العنصر الذي أريد التعديل على خصائصه وهو span. وهذا العنصر يتم استخدامه لكتابة كلمة أو نص صغير. بعدما قمت باختيار العنصر قمت بعمل قوسين بهذا الشكل "} يتم كتابة الأوامر هنا {"، ومن ثم قمت بكتابة الأوامر بحيث أن أقوم بكتابة اسم الخاصية التي اريد تعديلها ومن ثم عمل هذا الرمز ":"، ومن ثم كتابة التعديل الذي أريده، ومن ثم وضع هذا الرمز ";" بعد الانتهاء من كتابة كل خاصية. أول خاصية قمت بتعديلها هي لون النص جعلته لونه أزرق. وثاني خاصية قمت بتعديلها هي حجم خط النص وجعلتها 25 بكسل.
ملحوظة: إذا كانت الخاصية المكتوبة غير موجودة في اللغة سيحدث خطأ أثناء تشغيل الكود.
أساسيات لغة HTML
مثال على كود بلغة HTML
شرح الكود:
•<!DOCTYPE html> وظيفة هذا العنصر هو الإعلان بأن هذا الملف هو ملف HTML5 وهذا أحدث إصدار للغة HTML
•<html> هذا العنصر هو أساس صفحة الـHTML حيث يُعتبر هذا الكود هو جذر الصفحة
•<head> يحتوي هذا العنصر على معلومات وصفية عن صفحة الـ HTML مثل اسم الصفحة
•<title> يحدد هذا العنصر اسم صفحة الـHTML (التي تظهر في نافذة المتصفح)
•<body> يعتبر هذا العنصر هو قلب الصفحة لأنه هو الذي يحتوي على جميع العناصر الظاهرة في الصفحة مثل: العناوين، والصور، والروابط، والقوائم،...إلخ
•<h1> يقوم هذا العنصر بإدراج عنوان رئيسي كبير
•<p> يقوم هذا العنصر بإدراج فقرة
ما هو عنصر HTML
تتكون صفحة HTML من عدة عناصر متسلسلة لكل عنصر غرض معين وعدة خصائص. يتكون عنصر HTML من وسم بداية + المحتوى الموجود بالعنصر + وسم نهاية.
<اسم الوسم> يُكتب المحتوى هنا </اسم الوسم>
مثال:
<span> النص هنا </span>
<p> الفقرة هنا </p>
حيث أن وسم البداية يكون مثل هذا <span> إنما وسم النهاية يكون مثل هذا </span>. الفرق بين وسم البداية ووسم النهاية رمز السلاش "/". حيث أن رمز السلاش "/" يكون في وسم النهاية.
عناصر ليس لها وسم نهاية
هنالك عناصر ليس لها وسم نهاية وهم العناصر الذين لا يحتوون على أي شيء أو فارغين مثل عنصر <br>. الغرض من هذا العنصر هو عمل مسافة أفقية أو عمل مسافة سطر واحد. وذلك لأنك إذا قمت بكتابة أكثر من عنصر ستلاحظ أنهم في نفس السطر. ولحل هذه المشكلة نستخدم الوسم <br> بين العناصر وبعضها.
بعدما تعرفنا على بعض الوسوم والعناصر الأساسية في لغة HTML سوف نتعمق أكثر في الأساسيات ونشرح بعض العناصر الأخرى والتي ستجدونها سهلة وممتعة وليس بها أي تعقيدات.
العناوين
يتم تعريف العناوين في صفحة HTML من خلال الوسم <h1> إلى الوسم <h6>. حيث أن العناوين الأكثر أهمية في الصفحة يتم استعمال معها الوسم <h1>. والعكس صحيح مع الوسم <h6> فإنه يتم استعماله مع العناوين الأقل أهمية في الصفحة.
العنوان 1
العنوان 2
العنوان 3
العنوان 4
العنوان 5
العنوان 6
الفقرات
يتم تعريف الفقرات في لغة HTML من خلال وسم <p>. الفقرات هي مجموعة من النصوص المترابطة فقط.
الروابط
إذا اردت أن تقوم بإدراج رابط في موقعك سواءً كان رابط داخلي أو رابط خارجي فستقوم بذلك من خلال وسم <a>.
تقوم بتحديد مسار الرابط من خلال خاصية href.
خصائص العنصر هي معلومات إضافية يتم إعطائها لزيادة تفاصيل العنصر.
الصور
يتم إدراج الصور باستخدام وسم <img>.
يلزم لإدراج الصورة في هذا الوسم وضع مسار الصورة في خاصية src.
تقوم خاصية alt بإظهار نص بديل إذا تعذر تحميل الصورة في المتصفح.
يتم تحديد عرض الصورة من خلال خاصية width.
يتم تحديد طول الصورة من خلال خاصية height.
معلومة طريفة: يمكنك مشاهدة كود HTML لأي صفحة على الإنترنت من خلال الضغط على الزر الأيمن من الفأرة على مكان خالي من الصفحة ومن ثم اختيار "View Page Source" أو يمكنك اختصار ذلك من خلال الضغط على CTRL + U. ستجد جميع الأكواد التي كُتبت بها الصفحة التي تتصفحها. جربها على موقعنا الآن أثناء قراءتك هذا الموضوع.
أساسيات لغة CSS
مثال على كود بلغة CSS:
شرح الكود:
•text-align تحدد هذه الخاصية موقع النص في صفحة الويب. حيث يمكن أن تختار أن يكون النص في المنتصف أو على الجانب الأيمن أو على الجانب الأيسر.
•color تقوم هذه الخاصية بتحديد لون النص فقط (أي أنها لا تقوم بتحديد لون خلفية النص). وتقوم بتحديد اللون بالنص (blue, red, cyan, ...إلخ) أو بأي من القيم اللونية (#ffffff).
•background-color هذه الخاصية تقوم بتغيير خلفية النص أو أي عنصر أخر (الخلفية وليس النص أو العنصر ذاته). وتأخذ الخاصية قيمة نصية أو لونية مثل خاصية color.
•font-size يمكنك تحديد حجم الخط من خلال هذه الخاصية. وتقوم بتحديد الحجم بالقيم الرقمية + الوحدة (32px, 2em).
•font-family وظيفة هذه الخاصية هي تغيير نوع الخط. من ضمن أنواع الخطوط (sans-serif, consolas, arial, droid Arabic kufi, ...إلخ).
ملاحظات هامة:
•يتم تطبيق الخصائص المكتوبة بين القوسين "{}" على العنصر المحدد فقط. على سبيل المثال:
الخصائص الموجودة بين القوسين يتم تطبيقها فقط على الفقرات "<p>". وأي نص بـوسم أخر لا يتم تطبيق هذه الخصائص عليه. فمثلًا الخصائص المطبقة على الفقرات "<p>" لا يتم تطبيقها نفسها على العناوين "<h1>".
•الفاصلة المنقوطة ";" التي في نهاية كل خاصية يتم وضعها بغرض الفصل بين كل خاصية وأخرى. حيث لا تتداخل قيم الخصائص في بعضهم. ويمكن عدم وضع الفاصلة المنقوطة ";" في أخر خاصية يتم كتابتها؛ لأنها تكون أخر خاصية ولا يمكن أن تتداخل مع خاصية أخرى بعدها. ولكن الأفضل وضعها في كل الحالات.
•يتم وضع شرطة "-" بين كل كلمة في الخصائص المكونة من أكثر من كلمة مثل: text-align, font-size, background-color, ... إلخ.
•امتداد ملف الـ CSS هو ".css"
•يتم كتابة كود CSS داخل ملف HTML عن طريق وضع أكواد الـ CSS داخل هذا الوسم "<style>" كالآتي:
ويتم وضع هذه الأكواد داخل وسم "<head>" في صفحة الـ HTML كالآتي:
•كل إعلانات CSS مفصول بينهم بفاصلة منقوطة ";"، ويحيط بقطعة الإعلان أقواس "{}".
مثال:
•color هي الخاصية، red هي قيمة الخاصية.
•text-align هي الخاصية، center هي قيمة الخاصية.
يوجد أنواع كثيرة من المحددات (Selectors) من ضمنهم الـ المحدد باستخدام عنصر HTML وهو النوع الذي استخدمناه في جميع الأمثلة السابقة.
يوجد نوعان أخران مهمين في لغة CSS وهما: CSS id Selector وCSS class Selector وهما أبسط نوعان.
قبل أن أقوم بشرح هذان النوعان يجب أن أشرح ما هو المحدد؟
المحدد (Selector)
المحدد يُستخدم لإيجاد أو تحديد عنصر HTML معين. وذلك لإجراء تعديل على هذا العنصر.
CSS id Selector:
يستخدم هذا النوع خاصية "id" الموجودة في لغة HTML لتحديد عنصر معين.
الـ id لدى أي عنصر هو فريد في الصفحة، لذا يُستخدم الـ id selector لتحديد عنصر معين واحد فريد من نوعه.
لتحديد عنصر بـ id معين، اكتب رمز الهاش (#) + الـ id الخاص بعنصر الـ HTML.
مثال:
في هذا الكود قمت بجعل كل فقرة بلون مختلف وذلك عن طريق تحديد كل فقرة على حدى لتغيير لونها باستخدام الـ id selector.
يمكن جعل التحديد أكثر دقة من خلال تحديد الـ class بشكل أدق كما بالمثال التالي:
ملحوظة هامة: لا يمكن أن يبدأ اسم الـ class بـرقم.
هنالك نوع أخر من المحددات (Selectors) المهمة وهو CSS Universal Selector:
يقوم هذا النوع بتحديد جميع عناصر HTML وتطبيق الخصائص عليهم جميعًا.
لاختيار جميع عناصر HTML باستخدام Universal Selector قم بكتابة رمز النجمة (*).
مثال:
التعليقات (Comments)
تُستخدم التعليقات لـشرح الكود، ويمكن أن تساعد في تعديل الكود في وقت لاحق. والتعليقات التي يتم كتابتها لا تظهر في المتصفح فهو بتجاهلهم. يتم كتابة التعليقات داخل وسم "<style>" الخاص بالـ CSS بين (/*) و(*/). حيث تبدأ بكتابة التعليق بهذا الرمز (/*) وتنهي كتابة التعليق بهذا الرمز (*/)، وتكتب بينهم تعليقك او ملاحظاتك.
مثال:
مثال:
ماذا بعد؟
بعد أن فهمت بعض أساسيات لغة HTML ولغة CSS وأصبحت على أول الطريق، فالآن عليك أن تقوم بمتابعة كورس متسلسل وجيد على اليوتيوب، وهذه هي أفضل طريقة مجانية. ستقوم بالبحث عن كورس في لغة HTML وفهم الأساسيات بشكل مفصل ومعرفة العناصر الموجودة في اللغة. بعد ذلك قم بالبحث عن كورس في لغة CSS يشرح أساسيات اللغة والخصائص الموجودة فيها ويعطيك بعض التمرينات على كل معلومة. بعد أن تعلمت أساسيات HTML وCSS، ابحث عن مشاريع بسيطة باستخدام HTML وCSS وقم بتطبيق ما تعلمته في هذا المشروع. ستجد مشاكل كثيرة أثناء تنفيذ مشروعك بالرغم من أن الكود الذي تكتبه صحيح، ولكن قم بالبحث عن حل المشكلة على الإنترنت وستجد حلها وتكتشف ماذا كان يمنع تنفيذ الكود الخاص بك ويُحدث المشكلة، ولا تقلق لأن البرمجة تعتمد على مشاكل وحلها. ومن أهم المهارات في البرمجة هي مهارة البحث، فهذه المهارة التي تساعدك على تعلم أي شيء بسرعة وحل أي مشكلة تواجهك، ويمكنك البحث على اليوتيوب عن كيفية البحث على جوجل بشكل صحيح. بعد انتهاءك من المشروع البسيط ستكون قد تعلمت المزيد عن اللغتين.
لغة JavaScript
بعد أن قمت بتنفيذ المشروع الخاص بك، ستجد أن المشروع الذي قمت بتنفيذه لا يحتوي على عنصر التفاعل في الموقع وأن الموقع مجرد تصميم بدون أي إجراءات يمكن فعلها في الموقع، هنا يأتي دور لغة JavaScript، وهي اللغة التي تقوم بالبرمجة الفعلية للموقع من ناحية برمجة الأزرار الموجودة في الموقع وجعلها تقوم بحدث معين عند الضغط عليها. فيمكنك بلغة JavaScript إظهار تاريخ اليوم والوقت عند الضغط على زر معين في الموقع، وذلك من أبسط الأشياء التي يمكنك القيام بها باستخدام لغة JavaScript.
بالنسبة لنا فنحن قد وصلنا إلى نهاية الموضوع، أما بالنسبة لك فأنت في أول الطريق لتحقيق مهارة مفيدة ومطلوبة، استمر لتتعلم كل شيء، والسلام عليكم ورحمة الله وبركاته.
----------------------------------------------------------