0Pricing
Frontend Academy · درس

بنية المستند: DOCTYPE وhtml وhead وbody

اكتب مستند HTML5 صالحًا من الصفر: تصريح DOCTYPE، وعنصر html الجذر، وعنصر head للبيانات الوصفية، وعنصر body للمحتوى.

بنية المستند: DOCTYPE وhtml وhead وbody درس مجاني في Frontend Academy على CoddyKit. هذا هو الدرس 1 من أصل 4. يمكنك قراءة الدرس كاملاً أدناه مجاناً — ثم تمرن عليه مباشرة في المتصفح باستخدام محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7. هذا الدرس جزء من مسار التعلم في Frontend Academy، وتقدمك يتزامن عبر الويب وتطبيق CoddyKit. تتضمن دورة Frontend Academy 4 دروس في المجموع.

لكل مستند HTML الهيكل نفسه

يبدأ مستند HTML5 صالح دائمًا بإعلان DOCTYPE، ويحتوي على عنصر html جذر، وداخله قسم head للبيانات الوصفية وقسم body للمحتوى المرئي. يُعد فهم هذا الهيكل الخطوة صفر.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My First Page</title>
  </head>
  <body>
    <h1>Hello, world!</h1>
  </body>
</html>

إعلان DOCTYPE

<!DOCTYPE html> ليس وسم HTML، بل هو تعليمة للمتصفح لعرض الصفحة في الوضع القياسي. ومن دونه، تعود المتصفحات إلى «وضع التوافق»، الذي يعرض الصفحات بطريقة غير متسقة. ضعه دائمًا في السطر الأول.

عنصر &lt;html&gt; والسمة lang

عنصر <html> هو جذر المستند. أضف سمة lang للإعلان عن لغة الصفحة. تستخدمها قارئات الشاشة لاختيار محرك النطق الصحيح، وتستخدمها محركات البحث لعرض نتائج محلية.

<html lang="en">
<!-- or -->
<html lang="fr">
<html lang="de">

عنصر &lt;head&gt;

يحتوي <head> على البيانات الوصفية — أي معلومات عن الصفحة بدلًا من محتوى الصفحة نفسه. لا يظهر أي شيء داخل head مباشرةً للمستخدمين، لكنه يؤثر في طريقة تعامل المتصفح ومحركات البحث مع الصفحة.

وسوما Meta: charset وviewport

يخبر <meta charset="UTF-8"> المتصفح بفك ترميز الملف باستخدام UTF-8، ما يتيح دعم جميع الأحرف الدولية. ويجعل <meta name="viewport"> التصميم المتجاوب يعمل على الأجهزة المحمولة.

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

عنصر &lt;title&gt;

يظهر نص <title> في علامة تبويب المتصفح والإشارات المرجعية ونتائج محركات البحث. اجعله موجزًا (50–60 حرفًا)، وصفيًا، وضمّن اسم العلامة التجارية في نهايته.

<title>Getting Started with HTML | CoddyKit</title>

ربط CSS والخطوط

اربط أوراق الأنماط الخارجية باستخدام <link> داخل head. استخدم rel="stylesheet" وhref الصحيح. تُربط Google Fonts وخدمات الخطوط الأخرى بالطريقة نفسها.

<link rel="stylesheet" href="styles.css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link href="https://fonts.googleapis.com/css2?family=Inter&display=swap" rel="stylesheet">

عنصر &lt;body&gt;

يوجد كل ما يظهر على الصفحة داخل <body>: العناوين والفقرات والصور والأزرار والنماذج والبرامج النصية. وbody هو ما يراه المستخدم ويتفاعل معه.

وسوم Script: موضعها المناسب

ضع <script src="app.js" defer></script> داخل <head>. تنزّل السمة defer البرنامج النصي بالتوازي وتنفّذه بعد تحليل HTML بالكامل، ولذلك فهي الخيار الافتراضي الأكثر أمانًا.

<head>
  <script src="app.js" defer></script>
</head>

التعليقات في HTML

استخدم <!-- comment --> لإضافة ملاحظات إلى HTML. لا تظهر التعليقات للمستخدمين، لكنها تكون مرئية في عرض المصدر. استخدمها لشرح الهدف، أو تحديد الأقسام، أو تعطيل التعليمات البرمجية مؤقتًا أثناء تصحيح الأخطاء.

<!-- Navigation section -->
<nav>
  ...
</nav>
<!-- End navigation -->

التحقق: أداة W3C Validator

الصق HTML في validator.w3.org للتحقق من وجود أخطاء. يقلل HTML الصالح من الاختلافات بين المتصفحات، ويساعد قارئات الشاشة على تحليل الصفحة بطريقة صحيحة، ويُعد علامة على الإتقان المهني.

اختبار سريع

أين ينبغي وضع وسم <meta charset="UTF-8">؟

مراجعة: هيكل مستند HTML

يحتاج كل ملف HTML إلى: → → (charset، وviewport، وtitle، وروابط CSS) → (كل المحتوى المرئي). يضمن هذا الهيكل الاتساق بين المتصفحات، وإتاحة الوصول، وفهرسة SEO بطريقة صحيحة.

الأسئلة الشائعة

هل درس «بنية المستند: DOCTYPE وhtml وhead وbody» مجاني؟

نعم — نص درس «بنية المستند: DOCTYPE وhtml وhead وbody» كامل متاح مجاناً هنا على الويب. لتمرينه بشكل تفاعلي (محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7) وفتح باقي دورة Frontend Academy، انتقل إلى CoddyKit PRO. تتضمن دورة Frontend Academy 4 دروس في المجموع.

ماذا ستتعلم في «بنية المستند: DOCTYPE وhtml وhead وbody»؟

اكتب مستند HTML5 صالحًا من الصفر: تصريح DOCTYPE، وعنصر html الجذر، وعنصر head للبيانات الوصفية، وعنصر body للمحتوى. تتمرن على Frontend Academy مع أكواد عملية تشغلها مباشرة في المتصفح، ومدرس ذكاء اصطناعي متاح 24/7 يجيب على أسئلتك أثناء عملك.

هل أحتاج إلى خبرة سابقة لأبدأ Frontend Academy؟

لا تُشترط خبرة سابقة. Frontend Academy على CoddyKit منظم للمبتدئين حتى المتقدمين، لذا يمكنك البدء من هنا أو من البداية والتقدم بسرعتك الخاصة. هذا هو الدرس 1 من أصل 4.

كم من الوقت يستغرق درس «بنية المستند: DOCTYPE وhtml وhead وbody»؟

معظم دروس CoddyKit تستغرق حوالي 5–10 دقائق. كل منها موجز وتفاعلي، لذا تحرز تقدماً مستمراً وتستأنف من حيث توقفت عبر الويب والتطبيق.

هل يمكنني كتابة وتشغيل أكواد في درس Frontend Academy هذا؟

نعم. كل درس في Frontend Academy يتضمن محرر أكواد مدمج، لذا تكتب وتشغل أكواداً حقيقية مباشرة في متصفحك وتحصل على تعليقات فورية من الذكاء الاصطناعي — بدون إعداد محلي.

جميع الدروس في هذه الدورة

  1. بنية المستند: DOCTYPE وhtml وhead وbody
  2. الوسوم الدلالية: header وnav وmain وarticle وfooter
  3. النصوص والصور والروابط والقوائم
  4. النماذج: input وlabel وbutton
← العودة إلى Frontend Academy