بنية صفحة 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).

وجود هذا الوسم يجعل المتصفح يعرض الصفحة بطريقة صحيحة ومتوافقة مع المعايير الحديثة.

❗ ماذا يحدث إذا لم نكتبه؟
سيدخل المتصفح في وضع يسمى Quirks Mode، وهذا يعني أن الصفحة قد تظهر بشكل غير متوقع، وتختلف النتائج بين المتصفحات، وقد تنكسر التنسيقات (CSS) بدون سبب واضح.

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

هذا الوسم هو الجذر الأساسي لكل صفحة ويب، وكل ما في الصفحة يكون بداخله.

🔹 lang="ar" يخبر المتصفح ومحركات البحث أن لغة الصفحة هي العربية، وهذا مهم لتحسين محركات البحث (SEO) ودعم الترجمة والنطق الصحيح.
🔹 dir="rtl" يحدد اتجاه النص من اليمين إلى اليسار، وهو ضروري للغة العربية.

❗ ماذا يحدث إذا لم نكتبه أو أهملنا الخصائص؟
- قد تظهر النصوص العربية باتجاه خاطئ (من اليسار إلى اليمين).
- قد تواجه مشاكل في تنسيق الصفحة خصوصًا مع العناصر والمحاذاة.
- محركات البحث قد لا تفهم لغة الصفحة بشكل صحيح.

<meta charset="UTF-8">

هذا الوسم مسؤول عن تحديد ترميز الأحرف في الصفحة، وهنا نستخدم UTF-8 لأنه يدعم جميع اللغات ومنها العربية.

بفضله يتم عرض النصوص العربية بشكل صحيح وواضح بدون مشاكل.

❗ ماذا يحدث إذا لم نكتبه؟
ستظهر النصوص العربية بشكل مشوّه أو غير مفهوم (رموز غريبة مثل: � � �)، ولن يستطيع المستخدم قراءة المحتوى بشكل صحيح.

<meta name="viewport" content="width=device-width, initial-scale=1.0">

هذا الوسم مهم جدًا في تصميم المواقع الحديثة، لأنه يجعل الصفحة متجاوبة مع جميع الأجهزة مثل الجوال والتابلت.

🔹 width=device-width يجعل عرض الصفحة يساوي عرض الجهاز.
🔹 initial-scale=1.0 يحدد مستوى التكبير عند فتح الصفحة.

❗ ماذا يحدث إذا لم نكتبه؟
- ستظهر الصفحة على الجوال بشكل مصغّر جدًا وكأنها نسخة كمبيوتر.
- سيضطر المستخدم إلى التكبير والتصغير يدويًا لقراءة المحتوى.
- تجربة المستخدم ستكون سيئة جدًا.

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

<!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 الصفحة اين ظهر صفحة من انا

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

1

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

2

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

3

UTF-8 للعربية

4

viewport للجوال

5

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

ملاحظة: لا تقلق إن لم تفهم كل وسم الآن، سنشرح كل وسم بالتفصيل في الدروس القادمة مع تطبيق عملي.

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

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