HTML/CSS

HTML لغة ترميز تُستخدم لكتابة بنية صفحة الويب. العنوان والفقرة والصورة والرابط والنموذج توضع في الصفحة بواسطة HTML. وHTML ليست لغة برمجة. هي تخبر المتصفح بما يوجد في الصفحة.

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

يقرأ المتصفح HTML أولًا، ثم يطبّق قواعد CSS على العناصر المناسبة. أما ما يحدث عند الضغط على زر فيُكتب عادةً بـ JavaScript.

يُستخدم HTML وCSS في الجزء الظاهر من صفحة الويب:

• المقالات والمواقع البسيطة
• النماذج والأزرار
• القائمة وتخطيط الصفحة
• وضع الصور والنص
• مظهر يناسب شاشة الهاتف والحاسوب

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

يمكن باستخدام HTML وCSS إعداد بنية الصفحة ومظهرها:

• كتابة العناوين والنص
• إضافة صورة ورابط
• تنسيق الزر والنموذج
• صف العناصر في صفوف وأعمدة
• تغيير المظهر حسب عرض الشاشة

مثال بسيط

<h1>Nibras Code</h1>
<p>صفحة بسيطة.</p>

ينشئ هذا الـ HTML عنوانًا وفقرة. أما اللون والحجم فيُكتبان في CSS منفصل.

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

هذا الترتيب مفيد في البداية:

1. وسوم العنوان والفقرة والرابط والصورة
2. فتح الوسم وإغلاقه
3. محدد CSS: على أي عنصر تُطبَّق القاعدة
4. اللون والخط والهامش
5. العرض والارتفاع
6. وضع العناصر جنبًا إلى جنب
7. كتابة صفحة صغيرة بنفسك

تغيير صفحة صغيرة بنفسك يعلّم أكثر من نسخ قالب جاهز.

المزايا

• الصفحة البسيطة تُفتح مباشرة في المتصفح
• الأمثلة الأولى قصيرة والنتيجة تظهر فورًا
• تقريبًا كل صفحات الويب مبنية على هاتين اللغتين
• HTML يُبقي المحتوى وCSS يُبقي المظهر منفصلين
• لا رسوم منفصلة على اللغتين نفسيهما

العيوب

• وحدهما لا يكتبان الحساب أو تسجيل الدخول أو منطق البيانات
• في الموقع الكبير قد تتداخل قواعد CSS
• يلزم فحص الصفحة نفسها في أكثر من متصفح
• إذا اختل المظهر فالسبب غالبًا وسم غير مغلق أو محدد لا يطابق

يتكوّن عنصر HTML عادة من وسم فتح ووسم إغلاق. وتتكوّن قاعدة CSS من محدد وخصائص داخل الأقواس المعقوفة.

HTML

<h1>Nibras Code</h1>
<p>هذه فقرة.</p>
<a href="https://nibrascode.com">افتح الموقع</a>

CSS

h1 {
  color: #1d4ed8;
  font-size: 32px;
}

p {
  line-height: 1.6;
}

أين يُكتب

يمكن أن يبقى CSS في ملف مستقل ويُربط بـ HTML. وفي المثال الصغير يمكن كتابته داخل وسم style. والملف المستقل أرتب للصفحة الكبيرة.

صفحة صغيرة

<!DOCTYPE html>
<html lang="ar" dir="rtl">
  <head>
    <meta charset="utf-8">
    <title>Nibras Code</title>
    <style>
      body { font-family: sans-serif; }
      h1 { color: #1d4ed8; }
    </style>
  </head>
  <body>
    <h1>Nibras Code</h1>
    <p>HTML يكتب البنية، وCSS يكتب اللون.</p>
  </body>
</html>

رابط وصورة

<a href="https://nibrascode.com">Nibras Code</a>
<img src="logo.png" alt="علامة Nibras Code">

تنسيق بصنف

<p class="note">ملاحظة قصيرة.</p>

<style>
  .note {
    background: #f3f4f6;
    padding: 12px;
  }
</style>

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

بطاقة

article هو الصندوق. h2 العنوان داخله وp الجملة. اسم الصنف kart هو الخطاف. CSS يجد كل عنصر بهذا الصنف ويعطيه عرضاً وخلفية فاتحة وحداً رقيقاً وفراغاً من الداخل. بلا الصنف تبقى الكلمات ظاهرة لكن بلا صندوق.

<article class="kart">
  <h2>Python</h2>
  <p>Oxunaqlı dildir. Kiçik proqram üçün uyğundur.</p>
</article>

<style>
  .kart {
    max-width: 280px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 16px;
  }
</style>

البطاقة لا تزيد على 280 بكسل. في الشاشة العريضة لا تمتد على الصفحة كلها.

رابطان في صف واحد

nav يمسك الروابط. بلا CSS يقفان تحت بعضهما أو يبقيان كلاماً أزرق تحته خط. display: flex يضعهما جنباً إلى جنب. gap هو الفراغ بينهما. text-decoration: none يزيل الخط. العنوان داخل href هو المكان الذي يذهب إليه الرابط.

<nav>
  <a href="/programming/python">Python</a>
  <a href="/programming/javascript">JavaScript</a>
</nav>

<style>
  nav { display: flex; gap: 16px; }
  nav a { color: #1d4ed8; text-decoration: none; }
</style>

الكلمات تبقى زرقاء. الخط يختفي. إذا أزلت flex يرجع الصف إلى ترتيب المتصفح العادي.

نموذج قصير

label هو اسم الحقل. input هو السطر الفارغ الذي يكتب فيه الإنسان. button هو ما يُضغط. النموذج نفسه عمود: الحقل ثم الزر وبينهما فراغ صغير. هذا المثال لا يرسل الاسم إلى مكان. الإرسال يحتاج خادماً أو جافاسكريبت. هنا ترى الشكل فقط.

<form>
  <label>
    Ad
    <input name="ad" type="text">
  </label>
  <button type="submit">Göndər</button>
</form>

<style>
  form {
    display: flex;
    flex-direction: column;
    gap: 8px;
    max-width: 240px;
  }
  input, button { padding: 8px; }
</style>

الحقل والزر بعرض واحد، 240 بكسل. الاسم المكتوب لا يُحفظ بهذه الصفحة وحدها.

صفحة بشريط غامق

هذا ملف كامل لا قطعة. header هو الشريط الغامق في الأعلى. main هو المكان الأبيض تحته. body { margin: 0 } يزيل الإطار الأبيض الذي يضيفه المتصفح بنفسه. اللون والفراغ CSS. كلمتا Nibras Code وBirinci qeyd هما HTML. احفظه باسم note.html وافتحه.

<!DOCTYPE html>
<html lang="az">
<head>
  <meta charset="utf-8">
  <title>Qeyd</title>
  <style>
    body { margin: 0; font-family: sans-serif; }
    header { background: #111827; color: white; padding: 16px; }
    main { padding: 16px; }
  </style>
</head>
<body>
  <header>Nibras Code</header>
  <main>
    <h1>Birinci qeyd</h1>
    <p>Bu sətir əsas hissədə durur.</p>
  </main>
</body>
</html>

الشريط الأعلى غامق والكتابة عليه بيضاء. العنوان يقف تحت الشريط لا داخله.

ما هو HTML؟

HTML لغة ترميز تكتب بنية صفحة الويب: العناوين والنص والصور والروابط.

ما هو CSS؟

CSS لغة تنسيق تكتب مظهر الصفحة: اللون والحجم والخط والتخطيط.

هل HTML لغة برمجة؟

لا. HTML لغة ترميز. تقول ما يوجد في الصفحة، ولا تكتب حسابًا أو شرطًا.

هل تُفتح الصفحة من دون CSS؟

نعم. المتصفح يعرض HTML رغم ذلك. وقد يبقى المظهر بسيطًا.

هل HTML وCSS وJavaScript شيء واحد؟

لا. HTML يكتب البنية، وCSS يكتب المظهر، وJavaScript يكتب السلوك.

هل يلزم شراء برنامج للتعلم؟

لا. يكفي في البداية محرر نصوص ومتصفح. احفظ الملف بامتداد html وافتحه في المتصفح.

هل HTML وCSS مجانيان؟

نعم. لا رسوم على اللغتين نفسيهما عند كتابتهما وفتحهما في المتصفح.