بنية صفحة HTML
كل صفحة ويب في العالم (جوجل، يوتيوب، تويتر، حتى موقعك المفضل) لها هيكل ثابت واحد يتكرر دائمًا. هذا الهيكل يشبه هيكل عظمي للإنسان: مهما كان شكل الشخص، العظام نفسها!
اليوم ستتعلم هذا الهيكل بالضبط وتكتبه خلال دقيقتين فقط!
ما هو الوسم (Tag) في HTML؟ 🏷️
الوسم هو الأمر أو التعليمة التي تخبر المتصفح "ماذا تفعل بهذا النص أو العنصر؟" كل شيء تراه على الصفحة تم بناؤه باستخدام وسم أو أكثر.
بناء الصفحة
كل وسم = لبنة في البناء
شكل الوسم
<اسم_الوسم/> المحتوى <اسم_الوسم>
أمثلة سريعة
<h1/> عنوان كبير <h1>
<h1/>عنوان رئيسي كبير<h1> → عنوان كبير جدًا
<h2/>عنوان فرعي<h2> → أصغر شوية
<p/>هذه فقرة نصية عادية<p> → نص عادي
<strong/>نص مهم جدًا<strong> → نص غامق
< "img src="home.png" alt="home > → إظهار صورة
الاكواد اعلاه سيتم شرحها تفصيليا مع الدروس التالية ، لكن لكي تتضح الفكرة الان لننسخ الكود اعلاه في محرر الاكواد الخاص بمنصة ابرمج أو انسخ الكود في المفكرة او الدفتر في جهاز الكمبيوتر ثم احفظ الملف بأي اسم تريد لكن اجعل امتداد الملف tml وليس txt . لان المفكرة او الدفتر عندما تحفظ اي ملف بها فيحفظه الجهاز كملف نصي ونحن نريده كصفحة انترنت ، انظر الى الدرس السابق توجد صور لطريقة نسخ الكود الى مفكرة الجهاز وتشغيل الصفحة , الان سوف اقوم بنسخ الكود في محرر الاكواد html الخاص بمنصة ابرمج ( تستطيع الوصول اليه من قائمة الموقع محرر الاكواد ثم محرر اكواد html انسخ الكود هناك ثم اضغط على تشغيل في اسفل الصفحة لمعاينة الموقع:
وسوم لها إغلاق (تفتح وتُقفل)
مثل: <p>...</p>، <div>...</div>، <h1>...</h1>
وسوم منفردة (لا تحتاج إغلاق)
مثل: <img>، <br>، <hr>، <input>
اكثر الوسوم لها (وسم فتح ) و ( وسم اغلاق ) مثل div و h1 و p و body وغيرها ، فيكون اسم الوسم بالبداية من اليسار بدون الشرطة هذه (/) بينما في وسم الاغلاق نضع اسم الوسم وتسبقه الشرطة (/) ، بينما الوسوم المنفردة لا نضع لها وسم اغلاق مثل input و br و hr و img. بالدروس القادمة سنتعرف على جميع الوسوم باذن الله,
الهيكل الذهبي لكل صفحة 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>
ملاحظة: لا تقلق إن لم تفهم كل وسم الآن، سنشرح كل وسم بالتفصيل في الدروس القادمة مع تطبيق عملي.
الدرس القادم: الوسوم الأساسية (العناوين، الفقرات، الروابط، الصور…)
استعد… سنبدأ نبني صفحات حقيقية مليانة محتوى!