بنية HTML: اللبنات الأساسية
افهم البنية الأساسية لمستند HTML.
بنية HTML: اللبنات الأساسية درس مجاني في HTML for Kids على CoddyKit. هذا هو الدرس 2 من أصل 4. يمكنك قراءة الدرس كاملاً أدناه مجاناً — ثم تمرن عليه مباشرة في المتصفح باستخدام محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7. هذا الدرس جزء من مسار التعلم في HTML for Kids، وتقدمك يتزامن عبر الويب وتطبيق CoddyKit. تتضمن دورة HTML for Kids 4 دروس في المجموع.
بنية HTML: اللبنات الأساسية
مرحبًا بكم في الدرس الثاني! سنتعلم اليوم بنية مستند HTML وكيف تتكامل أجزاؤه. فكّروا في هذا الدرس على أنه تعلم الهيكل العظمي لصفحة ويب.
بنية مستند HTML
يمتلك مستند HTML بنية محددة يفهمها المتصفح. وهي تشبه وصفة تخبر المتصفح بما يجب فعله.
الأجزاء الأساسية لمستند HTML هي:
- إعلان نوع المستند: يخبر المتصفح بأن هذا مستند HTML.
- وسم HTML: يحتوي على كل محتوى الصفحة.
- قسم الرأس: يحتوي على معلومات حول الصفحة، مثل العنوان.
- قسم الجسم: يحتوي على المحتوى الظاهر للمستخدم.
كيف تبدو البنية؟
إليكم شكل البنية الأساسية لمستند HTML:
<!DOCTYPE html>
<html>
<head>
<title>My Web Page</title>
</head>
<body>
<h1>Welcome to My Page</h1>
<p>This is the content of my web page.</p>
</body>
</html>
إعلان نوع المستند
يظهر الإعلان <!DOCTYPE html> في أعلى كل مستند HTML. وهو يخبر المتصفح بأن عليه توقّع HTML5، أحدث إصدار من HTML.
فكّروا فيه على أنه نقطة بداية وصفة HTML الخاصة بكم!
وسم HTML
يُعد الوسم <html> الحاوية الرئيسية لكل الشفرة الموجودة في مستندكم. وهو يخبر المتصفح بأن «كل ما يوجد هنا هو HTML».
إليكم شكله:
<html>
<!-- All other HTML tags go here -->
</html>
قسم الرأس
يحتوي قسم <head> على معلومات حول صفحة الويب الخاصة بكم لا تظهر في الصفحة نفسها. على سبيل المثال:
- العنوان: النص الظاهر في علامة تبويب المتصفح.
- المعلومات الوصفية: تفاصيل إضافية مثل وصف الصفحة.
مثال:
<head>
<title>My Cool Web Page</title>
</head>
قسم الجسم
يحتوي قسم <body> على كل ما يظهر للمستخدم، مثل النصوص والصور والروابط. وهذه هي منطقة المحتوى الرئيسية.
مثال:
<body>
<h1>Welcome!</h1>
<p>This is my awesome web page.</p>
</body>
جمع الأجزاء معًا
إليكم مثالًا كاملًا على مستند HTML يتضمن جميع الأجزاء التي تعلمناها للتو:
<!DOCTYPE html>
<html>
<head>
<title>All About Me</title>
</head>
<body>
<h1>Hi, I’m a Web Creator!</h1>
<p>This is my first structured HTML page.</p>
</body>
</html>
عمل رائع!
تهانينا! لقد تعلمتم بنية مستند HTML. وأصبحتم تعرفون الآن كيف تتكامل جميع الأجزاء لإنشاء صفحة ويب. في الدرس التالي، سنبدأ بإضافة محتوى حقيقي إلى صفحاتنا. استعدوا لبناء أول تحفة ويب لكم!
الأسئلة الشائعة
هل درس «بنية HTML: اللبنات الأساسية» مجاني؟
نعم — نص درس «بنية HTML: اللبنات الأساسية» كامل متاح مجاناً هنا على الويب. لتمرينه بشكل تفاعلي (محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7) وفتح باقي دورة HTML for Kids، انتقل إلى CoddyKit PRO. تتضمن دورة HTML for Kids 4 دروس في المجموع.
ماذا ستتعلم في «بنية HTML: اللبنات الأساسية»؟
افهم البنية الأساسية لمستند HTML. تتمرن على HTML for Kids مع أكواد عملية تشغلها مباشرة في المتصفح، ومدرس ذكاء اصطناعي متاح 24/7 يجيب على أسئلتك أثناء عملك.
هل أحتاج إلى خبرة سابقة لأبدأ HTML for Kids؟
لا تُشترط خبرة سابقة. HTML for Kids على CoddyKit منظم للمبتدئين حتى المتقدمين، لذا يمكنك البدء من هنا أو من البداية والتقدم بسرعتك الخاصة. هذا هو الدرس 2 من أصل 4.
كم من الوقت يستغرق درس «بنية HTML: اللبنات الأساسية»؟
معظم دروس CoddyKit تستغرق حوالي 5–10 دقائق. كل منها موجز وتفاعلي، لذا تحرز تقدماً مستمراً وتستأنف من حيث توقفت عبر الويب والتطبيق.
هل يمكنني كتابة وتشغيل أكواد في درس HTML for Kids هذا؟
نعم. كل درس في HTML for Kids يتضمن محرر أكواد مدمج، لذا تكتب وتشغل أكواداً حقيقية مباشرة في متصفحك وتحصل على تعليقات فورية من الذكاء الاصطناعي — بدون إعداد محلي.
جميع الدروس في هذه الدورة
- ما هي HTML؟
- بنية HTML: اللبنات الأساسية
- وسوم HTML وعناصرها
- إعداد أول صفحة HTML لك