تعلم HTML وCSS للمبتدئين: دليل احترافي باللغة العربية مع دورة مجانية

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

مقدمة إلى تعلم HTML وCSS للمبتدئين

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

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

صورة توضيحية لتعلم HTML وCSS للمبتدئين وبناء صفحات الويب

ما هي HTML وCSS وما أهميتهما في تطوير الويب؟

ما هي HTML؟

HTML اختصار لـ HyperText Markup Language، وهي اللغة المسؤولة عن تحديد بنية صفحة الويب. من خلالها يمكنك إضافة العناوين، الفقرات، الروابط، الصور، القوائم، النماذج، وغيرها من العناصر التي يراها المستخدم داخل المتصفح.

ما هي CSS؟

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

كيف تعمل HTML مع CSS؟

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

  • ملفات HTML تحمل الامتداد .html
  • ملفات CSS تحمل الامتداد .css

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

استخدام Chrome Developer Tools لفهم بنية الصفحات

من أفضل الطرق لفهم كيفية بناء المواقع هي فحص الصفحات الجاهزة. يتيح لك متصفح Google Chrome الوصول إلى Chrome Developer Tools بسهولة عبر النقر بزر الفأرة الأيمن على الصفحة ثم اختيار Inspect.

عند فتح الأداة ستشاهد عادة قسمين رئيسيين:

  • قسم يعرض كود HTML الخاص بالصفحة.
  • قسم يعرض تنسيقات CSS المطبقة على العنصر المحدد حالياً.

هذه الأداة مفيدة جداً للمبتدئين لأنها تساعد على ربط البنية المكتوبة في HTML بالمظهر النهائي الناتج عن CSS.

واجهة Chrome Developer Tools لعرض أكواد HTML وCSS داخل المتصفح

مقدمة عملية إلى HTML

لنبدأ بمثال بسيط جداً لصفحة ويب مكتوبة باستخدام HTML:

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>freeCodeCamp</title>
  </head>
  <body>
    <h1>freeCodeCamp</h1>
    <p>I'm learning HTML and CSS.</p>
  </body>
</html>

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

مم يتكون ملف HTML؟

يتكون ملف HTML من مجموعة عناصر HTML Elements، وكل عنصر يمثل جزءاً من بنية الصفحة. على سبيل المثال، هذا عنصر عنوان:

<h1>freeCodeCamp</h1>

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

أهم وسوم HTML التي يجب أن تعرفها

تعتمد HTML على الوسوم Tags لإنشاء العناصر. فيما يلي أشهر الوسوم المستخدمة في بناء صفحات الويب:

  • <html>: يحتوي كل محتوى الصفحة.
  • <head>: يضم البيانات الوصفية والعنوان ومعلومات الصفحة غير الظاهرة مباشرة للمستخدم.
  • <body>: يحتوي العناصر المرئية داخل الصفحة.
  • <h1> إلى <h6>: عناوين مرتبة حسب الأهمية.
  • <p>: فقرة نصية.
  • <a>: رابط إلى صفحة أو موقع أو قسم داخلي.
  • <strong>: نص مهم يظهر عادة بخط عريض.
  • <em>: نص مؤكد يظهر غالباً بخط مائل.
  • <form>: نموذج إدخال بيانات.
  • <hr>: فاصل أفقي بين الأقسام.
  • <input>: حقل إدخال ضمن النماذج.
  • <footer>: تذييل الصفحة.

يجب أن يبدأ كل ملف HTML غالباً بالسطر التالي:

<!DOCTYPE html>

هذا السطر يخبر المتصفح بأن الملف يستخدم معيار HTML5.

الوسوم الافتتاحية والختامية

معظم عناصر HTML تتكون من وسم افتتاحي ووسم ختامي، وبينهما المحتوى:

<h1>freeCodeCamp</h1>

الفرق بين الوسم الافتتاحي والختامي هو وجود الشرطة المائلة / في الوسم الختامي.

رسم يوضح الفرق بين الوسم الافتتاحي والوسم الختامي في HTML

لكن بعض العناصر لا تحتاج إلى وسم ختامي، مثل عنصر الصورة:

<img src="freeCodeCamp.jpg">

خصائص HTML Attributes وكيفية استخدامها

يمكنك إضافة معلومات إضافية للعناصر باستخدام Attributes مثل:

  • class
  • id
  • style
  • lang
  • src
  • href

مثال:

<h1 class="main-title">freeCodeCamp</h1>

تُكتب الخصائص داخل الوسم الافتتاحي، وتفصل بينها وبين قيمها علامة =، وتوضع القيمة بين علامتي اقتباس.

تحديد لغة الصفحة باستخدام lang

لتحديد لغة الصفحة أو جزء منها، استخدم الخاصية lang:

<html lang="en">

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

كيفية إنشاء الروابط في HTML

يُستخدم العنصر <a> مع الخاصية href لإنشاء الروابط. مثال على رابط خارجي:

<a href="https://www.freecodecamp.org/espanol/">freeCodeCamp</a>

ومثال على رابط داخلي لصفحة أخرى داخل نفس الموقع:

<a href="about.html">About Me</a>

كما يمكنك ربط المستخدم بقسم محدد داخل نفس الصفحة باستخدام id:

<a href="#main-title">freeCodeCamp</a>

عند النقر على هذا الرابط، ينتقل المستخدم إلى العنصر الذي يحمل المعرّف main-title.

التعليقات في HTML ولماذا هي مهمة؟

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

<!-- Add a link to freeCodeCamp -->

التعليقات مفيدة جداً في المشاريع التعاونية أو عند مراجعة الكود لاحقاً.

القوائم في HTML: Ordered List وUnordered List

القائمة المرتبة Ordered List

<ol>
  <li>Blue</li>
  <li>Green</li>
  <li>Black</li>
</ol>

مثال على قائمة مرتبة في HTML تحتوي على عناصر مرقمة

القائمة غير المرتبة Unordered List

<ul>
  <li>Blue</li>
  <li>Green</li>
  <li>Black</li>
</ul>

مثال على قائمة غير مرتبة في HTML تحتوي على نقاط تعداد

الفرق الأساسي بين النوعين أن عناصر Ordered List تكون مرقمة، بينما عناصر Unordered List تظهر على شكل نقاط.

إدراج الصور في HTML بشكل صحيح

لإضافة صورة إلى الصفحة نستخدم الوسم <img> مع الخاصية src:

<img src="https://bit.ly/fcc-relaxing-cat">

ومن الأفضل دائماً إضافة الخاصية alt لأنها مهمة لتحسين الوصول Accessibility ولتقديم وصف بديل عند تعذر تحميل الصورة:

<img src="https://bit.ly/fcc-relaxing-cat" alt="A cute orange cat.">

إضافة alt لا تحسن تجربة المستخدم فقط، بل تمنح الصفحة جودة أفضل من منظور تقني وتهيئة لمحركات البحث.

مقدمة إلى CSS للمبتدئين

بعد الانتهاء من بناء الهيكل باستخدام HTML، تأتي مرحلة تنسيق العناصر بواسطة CSS. تعتمد CSS على قواعد تتكون عادة من محدد Selector، وخصائص Properties، وقيم Values.

الهدف من CSS هو تحسين المظهر العام للصفحة، وضبط الألوان والأحجام والتباعد والمحاذاة، وإنشاء تجربة بصرية منظمة وسلسة.

طرق تطبيق CSS على عناصر HTML

هناك عدة طرق لتطبيق التنسيقات، وأبسطها In-line Styles داخل الوسم نفسه:

<h1 style="color: blue">freeCodeCamp</h1>

في هذا المثال تم استخدام الخاصية color لتغيير لون النص إلى الأزرق. ويجب الفصل بين اسم الخاصية وقيمتها باستخدام النقطتين :.

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

نصائح عملية لتعلم HTML وCSS بسرعة

  • ابدأ ببناء صفحات بسيطة مثل صفحة تعريف شخصية أو صفحة هبوط.
  • درّب نفسك على قراءة كود الصفحات الجاهزة عبر Chrome Developer Tools.
  • احرص على كتابة كود منظم وواضح مع استخدام المسافات البادئة.
  • استخدم أسماء مفهومة للخصائص مثل class وid.
  • لا تحفظ الوسوم فقط، بل افهم وظيفة كل عنصر ومتى تستخدمه.
  • طبّق ما تتعلمه فوراً من خلال مشاريع صغيرة متدرجة.

لماذا يعد تعلم HTML وCSS استثماراً مهماً؟

تعلم HTML وCSS لا يقتصر على من يريد أن يصبح مطور Front-End فقط، بل يفيد أيضاً أصحاب المتاجر الإلكترونية، ومديري المحتوى، والمتخصصين في SEO، وكل من يعمل على الويب. ففهم بنية الصفحات يساعدك على تحسين الأداء، وتجربة المستخدم، وهيكلية المحتوى، وحتى فرص الظهور في نتائج البحث.

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

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

اترك تعليقاً

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