4 – تركيب ملف HTML (HTML Document Structure) – مقدمة في HTML – المستوى الأول: الأساسيات

بواسطةahmed

📌 تركيب ملف HTML (HTML Document Structure)

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

خلينا نشرح المكونات الأساسية واحد واحد:

🔹 1. سطر التعريف (Document Type Declaration)

  • هذا السطر لا يُعتبر وسم (Tag).

  • وظيفته: يخبر المتصفح إن الملف مكتوب بلغة HTML5 (أحدث إصدار).

  • لازم يكون في أول سطر في الملف.

🔹 2. وسم <html>

  • هو الجذر (Root Element) لكل عناصر الصفحة.

  • بداخله كل المحتويات تنقسم لقسمين: <head> و <body>.

  • خاصية lang=”ar” بتحدد لغة الصفحة (عربي هنا).

🔹 3. القسم <head>

  • يحتوي على معلومات عن الصفحة (Metadata) مش بتظهر للمستخدم مباشرة.

أهم العناصر داخل <head>:

1- ترميز الأحرف

  • يخلي الصفحة تدعم جميع اللغات (العربية، الإنجليزية… إلخ).

عنوان الصفحة

 

  • يظهر في شريط المتصفح أو التبويب (Tab).

وسوم إضافية شائعة:

  • وسم الـ viewport للهواتف:

وصف الصفحة لمحركات البحث (SEO):

ربط ملف CSS خارجي:

ربط ملف JavaScript:

 

🔹 4. القسم <body>

  • هنا بنكتب المحتوى الفعلي اللي يقدر المستخدم يشوفه.

  • أمثلة على العناصر داخل <body>:

    • النصوص <h1> – <h6>, <p>

    • الصور <img>

    • الروابط <a>

    • الجداول <table>

    • النماذج <form>

    • الفيديو والصوت <video>, <audio>

 5. مثال كامل لملف HTML أساسي

🔹 6. ملخص الهيكل العام

🎯 النتيجة:

  • أي صفحة HTML صحيحة لازم تحتوي على 3 أجزاء رئيسية:

    1. <!DOCTYPE html>

    2. <head>

    3. <body>

★ ★ ★ ★ ★
التقييم: 0 من 0 تصويت

موضوعات ذات صلة

  • 23 – مربعات النصوص < textarea > – النماذج (Forms) – المستوى الثاني متوسط

    بواسطةahmed

    📌 مربعات النصوص <textarea> 🔹 ما هو <textarea>؟ عنصر يُستخدم لإدخال نصوص طويلة أو متعددة الأسطر من المستخدم. مختلف عن <input type=”text”> لأنه: يقبل أكتر من سطر. الحجم بتاعه ممكن يتغير (Resizable). مناسب للتعليقات، الرسائل، العناوين الطويلة… إلخ. ✅…

    • اترك تعليقاً

    لن يتم نشر عنوان بريدك الإلكتروني. الحقول الإلزامية مشار إليها بـ *