درس ٢: بنية صفحة HTML من الداخل 🏗️

كل موقع في العالم يبدأ بهيكل واحد… واليوم ستفهمه وتكتبه بنفسك!

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

اليوم ستتعلم هذا الهيكل بالضبط وتكتبه خلال دقيقتين فقط!

ما هو الوسم (Tag) في HTML؟ 🏷️

الوسم هو الأمر أو التعليمة التي تخبر المتصفح "ماذا تفعل بهذا النص أو العنصر؟" كل شيء تراه على الصفحة تم بناؤه باستخدام وسم أو أكثر.

🏗️

بناء الصفحة

كل وسم = لبنة في البناء

🧱

شكل الوسم

<اسم_الوسم/> المحتوى <اسم_الوسم>

⚡

أمثلة سريعة

<h1/> عنوان كبير <h1>

<h1/>عنوان رئيسي كبير<h1>          → عنوان كبير جدًا
<h2/>عنوان فرعي<h2>                → أصغر شوية
<p/>هذه فقرة نصية عادية<p>         → نص عادي
<strong/>نص مهم جدًا<strong>         → نص غامق
<img src="صورة.jpg" alt="وصف">      → إظهار صورة

وسوم لها إغلاق (تفتح وتُقفل)

مثل: <p>...</p>، <div>...</div>، <h1>...</h1>

وسوم منفردة (لا تحتاج إغلاق)

مثل: <img>، <br>، <hr>، <input>

كل شيء في HTML عبارة عن وسم… والدرس القادم سنأخذ أهم 20 وسم ونطبق عليهم مباشرة! 🚀

الهيكل الذهبي لكل صفحة HTML (احفظه للأبد)

<!DOCTYPE html>
<html lang="ar" dir="rtl">
<head>
    <!-- معلومات الصفحة (غير مرئية للزائر) -->
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>عنوان الصفحة في تبويب المتصفح</title>
</head>
<body>
    <!-- كل المحتوى الذي يراه الزائر يكتب هنا -->
    
    <h1>عنوان رئيسي</h1>
    <p>فقرة نصية عادية</p>
    
</body>
</html>

قسم <head>

✅ عنوان الصفحة (يظهر في التبويب)
✅ ترميز الحروف (UTF-8 لدعم العربية)
✅ إعدادات الجوال (viewport)
✅ روابط CSS وجافاسكربت (لاحقًا)

قسم <body>

✅ كل شيء يراه الزائر
✅ النصوص، الصور، الروابط
✅ القوائم، الجداول، النماذج
✅ كل شيء تكتبه هنا يظهر على الشاشة!

شرح كل سطر خطوة بخطوة (مهم جدًا!)

<!DOCTYPE html>

يخبر المتصفح: "هذه صفحة HTML5 حديثة" – اكتبها دائمًا في السطر الأول!

<"html lang="ar" dir="rtl>

لغة الصفحة عربية + الكتابة من اليمين لليسار

<"meta charset="UTF-8>

بدونه العربية تطلع معكربشة!

<"meta name="viewport ...>

يجعل الصفحة تظهر بشكل جميل على الجوال

تمرين اليوم: نكتب صفحة "من أنا" كاملة معًا!

<!DOCTYPE html>
<html lang="ar" dir="rtl">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>عن محمد أحمد</title>
</head>
<body>
    <h1>مرحبًا، أنا محمد</h1>
    <p>طالب في الصف الثانوي، أحب البرمجة وأتعلم تطوير الويب.</p>
    <p>هواياتي: كرة القدم، القراءة، ولعب فورتنايت 🎮</p>
    <h2>معلومات سريعة</h2>
    <p>العمر: ١٧ سنة<br>المدينة: الرياض</p>
</body>
</html>

مهمتك الآن (ممنوع التأجيل!)

انسخ الكود أعلاه
احفظه باسم about-me.html
أو الصق الكود في محرر أكواد منصة ابرمج هنا
غيّر الاسم والمعلومات لتصبح عنك أنت
افتح الملف… وشاهد أول صفحة في حياتك على الإنترنت!

عند كتابة الكود اعلاه وحفظ الملف بامتداد html ثم فتح الملف بواسطة قوقل كروم او اي متصفح اخر سنحصل على النتيجة التالية: انظر الى عنوان الصفحة اين ظهر - عن محمد أحمد - وانظر الى البودي body الصفحة اين ظهر صفحة من انا

خلاصة الدرس في ٥ نقاط فقط

اكتب !DOCTYPE دائمًا

استخدم lang="ar" dir="rtl"

UTF-8 للعربية

viewport للجوال

كل المحتوى داخل <body>

الدرس القادم: الوسوم الأساسية (العناوين، الفقرات، الروابط، الصور…)

استعد… سنبدأ نبني صفحات حقيقية مليانة محتوى!

الدرس التالي ← → رجوع