ملخص HTML وCSS: بناء هيكل صفحة الويب وتنسيق شكلها — أولى ثانوي

مقدمة

الوحدة الثالثة عشرة: الذكاء الاصطناعي التوليدي — الموضوع 13-2

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

أهداف التعلم

أن تميز دور HTML ودور CSS في صفحة الويب.
أن تكتب هيكل صفحة HTML بسيطة بالوسوم الأساسية.
أن تكتب قاعدة CSS (المحدد والخاصية والقيمة) وتربط ملف CSS بالصفحة.
أن تستخدم الـ class لتنسيق عنصر محدد دون غيره.

شرح الدرس

لغة HTML

HTML (Hypertext Markup Language): اللغة الأساسية لعرض صفحات المواقع في متصفحات الويب، ووظيفتها بناء هيكل الصفحة ومحتواها: العناوين والفقرات والجداول والقوائم.

تتكون HTML من وسوم (Tags) تُكتب بين علامتي < و>، وأغلبها يأتي زوجًا: وسم فتح مثل <p> ووسم إغلاق مثل </p>، والمحتوى بينهما.

الوسم	وظيفته
`<!DOCTYPE html>`	يعلن أن المستند صفحة HTML
`<html>`	يحتوي الصفحة كلها
`<head>`	معلومات عن الصفحة لا تظهر في محتواها (مثل العنوان وترميز الحروف)
`<meta charset="UTF-8">`	يحدد ترميز الحروف، وهو ضروري لظهور العربية صحيحة
`<title>`	عنوان الصفحة الذي يظهر في تبويب المتصفح
`<body>`	المحتوى الظاهر للزائر
`<h1>` إلى `<h6>`	العناوين من الأكبر إلى الأصغر
`<p>`	فقرة نصية
`<ul>` و`<li>`	قائمة نقطية وعناصرها

لغة CSS

CSS (Cascading Style Sheets): اللغة المسؤولة عن شكل صفحة الويب وتصميمها: أحجام النصوص، وأنواع الخطوط، والألوان، وألوان الخلفية.

تتكون قاعدة CSS من محدد (Selector) يحدد العنصر، ثم بين قوسين معقوصين خاصية (Property) وقيمة (Value):

p {
  color: red;
  font-size: 20px;
}

هذه القاعدة تجعل كل الفقرات <p> في الصفحة حمراء بحجم 20 بكسل.

الخاصية	وظيفتها	مثال
`color`	لون النص	`color: blue;`
`background-color`	لون الخلفية	`background-color: yellow;`
`font-size`	حجم الخط	`font-size: 24px;`
`font-family`	نوع الخط	`font-family: Arial;`

ميزة CSS: تغيّر لون كل الفقرات في الموقع من مكان واحد في ملف CSS، دون تعديل كل فقرة على حدة.

ربط CSS بالصفحة واستخدام class

نربط ملف التنسيق بالصفحة بوسم <link> داخل <head>: <link rel="stylesheet" href="style.css">.
لتنسيق عنصر بعينه نعطيه اسم فئة بالخاصية class في HTML، ونكتب في CSS اسم الفئة مسبوقًا بنقطة.

أمثلة وتطبيقات

مثال: صفحة تعريف بالنفس

ملف index.html:

<!DOCTYPE html>
<html lang="ar" dir="rtl">
<head>
  <meta charset="UTF-8">
  <title>عن نفسي</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <h1 class="name">سلمى</h1>
  <p>طالبة في الصف الأول الثانوي.</p>
  <ul>
    <li>أحب القراءة</li>
    <li>أحب البرمجة</li>
  </ul>
</body>
</html>

ملف style.css:

body {
  background-color: #f0f8ff;
  font-family: Arial;
}

.name {
  color: blue;
  font-size: 40px;
}

النتيجة في المتصفح: خلفية زرقاء فاتحة، والاسم “سلمى” باللون الأزرق وبحجم كبير، ثم فقرة وقائمة من هوايتين. الاسم وحده صار أزرق لأننا استخدمنا الفئة .name، ولم تتأثر بقية النصوص.

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

ملاحظات مهمة

لا تنسَ وسم الإغلاق مثل </p>؛ فنسيانه قد يغيّر شكل الصفحة كلها.
في CSS: تنتهي كل خاصية بفاصلة منقوطة ;، والفئة class يُشار إليها بنقطة قبل اسمها.
للصفحات العربية أضف lang="ar" وdir="rtl" إلى وسم html ليظهر النص من اليمين إلى اليسار.
HTML للمحتوى والهيكل، وCSS للشكل؛ الفصل بينهما يجعل تعديل التصميم أسهل.

المفاهيم الأساسية

HTML: تبني هيكل الصفحة ومحتواها بالوسوم.
CSS: تحدد شكل الصفحة (ألوان، خطوط، أحجام).
قاعدة CSS: محدد ثم خاصية وقيمة.
<link> لربط ملف CSS، وclass لتنسيق عنصر بعينه.

ملخص الدرس

تبني لغة HTML هيكل صفحة الويب ومحتواها بالوسوم مثل العناوين والفقرات والقوائم، وتتولى لغة CSS تصميم شكلها من ألوان وخطوط وأحجام. وتتكون قاعدة CSS من محدد وخاصية وقيمة، ونربط ملف CSS بالصفحة بوسم link، ونستخدم class لتنسيق عنصر محدد. وبالجمع بين اللغتين نبني صفحات ويب متكاملة.

أسئلة للتدريب

ما الفرق بين دور HTML ودور CSS في صفحة الويب؟
اذكر وظيفة كل من الوسوم: <title>، <body>، <h1>، <p>.
اكتب قاعدة CSS تجعل كل العناوين <h1> باللون الأخضر وبحجم 30 بكسل.
كيف تجعل فقرة واحدة فقط حمراء دون باقي الفقرات؟
صمم صفحة بسيطة عن مدرستك تحتوي على عنوان وفقرة وقائمة، ولوّن خلفيتها.