تطوير الويب للمبتدئين: تعلّم أساسيات HTML وCSS لبناء أول صفحة ويب

6 min read Aldawsari
دقائق القراءة: 6

مقدمة إلى تطوير الويب للمبتدئين

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

مقدمة احترافية إلى تطوير الويب للمبتدئين وتعلم بناء صفحات الإنترنت

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

ما هي HTML ولماذا تعد أساس صفحة الويب؟

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

يتكون اسم HyperText Markup Language من جزأين أساسيين:

  • HyperText: يشير إلى الروابط التي تنقل المستخدم من صفحة إلى أخرى أو إلى جزء آخر داخل الصفحة نفسها.
  • Markup Language: تعني لغة تعتمد على وسوم Tags لتحديد نوع كل عنصر داخل المستند.

على سبيل المثال، يمكن كتابة عنوان رئيسي باستخدام الوسم <h1>، وكتابة فقرة باستخدام <p>. كل وسم يخبر المتصفح بكيفية فهم العنصر وعرضه.

تشبيه بسيط لفهم دور HTML

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

  • شريط التنقل Navbar
  • منطقة المحتوى الرئيسية
  • الشريط الجانبي
  • التذييل Footer

ومن دون هذا التنظيم البنيوي، لن تكون هناك صفحة ويب واضحة أو قابلة للتنسيق بشكل سليم.

كيف تبدأ بكتابة أول صفحة HTML؟

توجد عدة برامج لتحرير الأكواد مثل VS Code وSublime Text وAtom وBrackets. لكن إن كنت مبتدئاً تماماً، يمكنك البدء بأداة بسيطة مثل Notepad ثم الانتقال لاحقاً إلى محررات أكثر احترافية.

لننشئ الآن صفحة ويب بسيطة تحتوي على:

  • شريط تنقل
  • عنوان رئيسي
  • فقرة نصية
  • صورة
  • تذييل في أسفل الصفحة
<!DOCTYPE html>
<html>
<head>
  <title>Page Title</title>
</head>
<body>
  <nav>This is the Navbar of my web page</nav>
  <h1>My First Heading</h1>
  <p>My first paragraph.</p>
  <img src="https://miro.medium.com/max/1584/1*lJ32Bl-lHWmNMUSiSq17gQ.png" />
  <footer>
    <p>Footer</p>
  </footer>
</body>
</html>

شرح مكونات الصفحة السابقة

  • <!DOCTYPE html>: يعرّف المستند على أنه يستخدم إصدار HTML5، وهو الإصدار الحديث والأكثر استقراراً.
  • <html>: العنصر الجذري الذي يحتوي على جميع عناصر الصفحة.
  • <head>: يضم المعلومات الوصفية الخاصة بالصفحة مثل العنوان وبعض البيانات التي لا تظهر مباشرة داخل المحتوى.
  • <title>: عنوان الصفحة الذي يظهر في تبويب المتصفح.
  • <body>: يحتوي على كل ما يراه المستخدم داخل الصفحة.
  • <nav>: يمثل شريط التنقل في أعلى الصفحة.
  • <h1>: عنوان رئيسي، وهو الأكبر حجماً بين عناوين h1 إلى h6.
  • <p>: يستخدم لإضافة فقرة نصية.
  • <img>: يضيف صورة إلى الصفحة، ويعتمد على الخاصية src لتحديد مصدرها.
  • <footer>: التذييل الموجود في أسفل الصفحة.

تبدأ معظم الوسوم بقوس فتح <> وتنتهي بوسم إغلاق على الشكل </>، وهذا ما يساعد المتصفح على معرفة بداية العنصر ونهايته.

مثال يوضح عنوان الصفحة داخل تبويب المتصفح في HTML

كيفية حفظ ملفات HTML وعرضها في المتصفح

بعد كتابة الكود، يمكنك عرض النتيجة بسهولة عبر خطوتين بسيطتين:

  1. احفظ الملف بامتداد .html، مثل Tutorial.html.
  2. افتح الملف باستخدام أي متصفح مثل Chrome أو Firefox أو Edge لعرض الصفحة.

حفظ ملف HTML بالامتداد الصحيح لعرضه في المتصفحمثال على حفظ صفحة ويب بصيغة HTML على جهاز الكمبيوترفتح ملف HTML في المتصفح لمعاينة الصفحة

النتيجة الأولية لهيكل الصفحة

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

النتيجة الأولية لصفحة HTML قبل إضافة تنسيقات CSS

ما هي CSS وكيف تضيف الحياة إلى الصفحة؟

ترمز CSS إلى Cascading Style Sheets، وهي اللغة المسؤولة عن تنسيق عناصر الصفحة وتحديد الألوان والمحاذاة والأحجام والمسافات والمظهر العام. إذا كانت HTML تمثل الهيكل، فإن CSS تمثل الطلاء والزخرفة والهوية البصرية.

بفضل CSS يمكنك تحويل صفحة بسيطة جداً إلى واجهة مرتبة وأكثر جاذبية وسهولة في القراءة.

إضافة CSS باستخدام الوسم <style>

إحدى أبسط الطرق لإضافة التنسيقات هي كتابة كود CSS داخل الوسم <style> الموجود عادةً داخل <head>.

<head>
  <title>Page Title</title>
  <style>
    body {
      background-color: lightblue;
      margin: 0;
      text-align: center;
    }

    nav {
      background-color: black;
      width: 100%;
      color: white;
      height: 50px;
      padding-top: 25px;
    }

    h1 {
      color: black;
    }

    footer {
      background-color: gray;
      color: white;
      padding: 5px;
    }
  </style>
</head>

شرح تنسيقات CSS المستخدمة

تنسيق العنصر body

body {
  background-color: lightblue;
  margin: 0;
  text-align: center;
}

يؤثر المحدد body في كامل الصفحة، لأنه يمثل الحاوية الرئيسية للمحتوى الظاهر. وفي هذا المثال استخدمنا الخصائص التالية:

  • background-color: لتحديد لون الخلفية، وهنا اخترنا الأزرق الفاتح.
  • margin: للتحكم في الهوامش الخارجية. وضع القيمة 0 يزيل الهوامش الافتراضية.
  • text-align: center: لجعل النصوص والعناصر النصية في منتصف الصفحة.

عندما تطبق تنسيقاً عاماً على body، فإن كثيراً من العناصر الداخلية تتأثر به تلقائياً ما لم تُعطَ تنسيقات خاصة بها.

تنسيق شريط التنقل nav

nav {
  background-color: black;
  width: 100%;
  color: white;
  height: 50px;
  padding-top: 25px;
}

يمثل المحدد nav شريط التنقل أعلى الصفحة. وقد أضفنا إليه عدة خصائص مهمة:

  • background-color: black: لتلوين الخلفية بالأسود.
  • width: 100%: لجعل العرض يمتد على كامل الصفحة.
  • color: white: لتحديد لون النص باللون الأبيض.
  • height: 50px: لضبط ارتفاع الشريط.
  • padding-top: 25px: لإضافة مسافة داخلية علوية تساعد على تحسين تموضع النص.

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

تنسيق العنوان الرئيسي h1

h1 {
  color: black;
}

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

تنسيق التذييل footer

footer {
  background-color: gray;
  color: white;
  padding: 5px;
}

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

كيف تبدو الصفحة بعد إضافة CSS؟

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

شكل صفحة الويب بعد إضافة تنسيقات CSS على HTML

نصائح عملية للمبتدئين في تطوير الويب

  • ابدأ أولاً بفهم بنية الصفحة قبل الاهتمام بالمظهر.
  • درّب نفسك على قراءة الوسوم مثل <h1> و<p> و<img> حتى تصبح مألوفة لديك.
  • جرّب تعديل القيم داخل CSS لترى تأثير كل خاصية بنفسك.
  • احرص على حفظ ملفاتك بشكل منظم، وسمِّها بأسماء واضحة.
  • استخدم المتصفح باستمرار لمعاينة النتيجة فوراً بعد كل تعديل.

لماذا يعد تعلم HTML وCSS خطوة مهمة؟

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

الخلاصة التقنية

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

اترك تعليقاً

لن يتم نشر عنوان بريدك الإلكتروني. الحقول الإلزامية مشار إليها بـ *