البنية الاساسية للصفحة

📌 البنية الأساسية لصفحة HTML – شرح تفصيلي لكافة التاغات الأساسية

في HTML، هناك هيكل أساسي يجب أن تحتوي عليه كل صفحة ويب حتى يتم تفسيرها بشكل صحيح من قبل المتصفح. هذا الهيكل يتكون من عدد من التاغات الأساسية التي تحدد محتوى الصفحة ووصفها وطريقة عرضها.

1️⃣ تاغ <!DOCTYPE html>

🔹 هو أول شيء يجب أن يكون موجودًا في أي صفحة HTML، حيث يحدد إصدار HTML المستخدم. 🔹 في HTML5، يجب أن يكون بالشكل التالي:

html

<!DOCTYPE html>
HTML

🔸 يخبر المتصفح بأن الصفحة مكتوبة وفق HTML5، مما يساعد على تفسيرها بشكل صحيح.

2️⃣ تاغ <html>

🔹 هو التاغ الأساسي الذي يحتوي على كل محتوى الصفحة. 🔹 يجب أن يكون كل شيء داخل <html> حتى يتم التعرف عليه كجزء من الصفحة.

📝 مثال
<!DOCTYPE html>
<html>
    <head>
        <title>صفحة ويب</title>
    </head>
    <body>
        <h1>مرحبًا بك في HTML</h1>
    </body>
</html>
HTML
3️⃣ تاغ <head>

🔹 يحتوي على البيانات الوصفية التي يحتاجها المتصفح (مثل العنوان، الترميز، الروابط الخارجية). 🔹 لا يظهر محتواه مباشرة على الصفحة، بل يؤثر على طريقة عرض الصفحة.

📝 المحتويات الممكنة داخل <head>
<head>
    <title>عنوان الصفحة</title>
    <meta charset="UTF-8">
    <meta name="description" content="هذه صفحة HTML للمبتدئين">
    <meta name="keywords" content="HTML, تعلم HTML, برمجة">
    <meta name="author" content="CloudSoft Academy">
</head>
HTML

🔹 title – يُحدد العنوان الذي يظهر في تبويب المتصفح.

🔹 meta charset="UTF-8" – يُحدد الترميز لضمان دعم الأحرف العربية بشكل صحيح.

🔹 meta name="description" – وصف الصفحة لمحركات البحث. 🔹

meta name="keywords" – الكلمات المفتاحية التي تساعد في تحسين ظهور الصفحة في نتائج البحث.

🔹 meta name="author" – تحدد صاحب أو منشئ الصفحة.

4️⃣ تاغ <body>

🔹 يحتوي على المحتوى الفعلي الذي يظهر للزائر داخل المتصفح.

🔹 كل النصوص، الصور، الروابط، الجداول، القوائم، وغير ذلك موجودة داخل <body>.

📝 مثال لمحتويات body
<body>
    <h1>مرحبًا بك في CloudSoft Academy</h1>
    <p>هذه صفحة HTML لتعلم الأساسيات.</p>
    <img src="logo.png" alt="شعار الأكاديمية">
    <a href="about.html">تعرف علينا</a>
</body>
HTML

🔹 h1 – عنوان رئيسي للصفحة.

🔹 p – فقرة نصية داخل الصفحة.

🔹 img – إدراج صورة.

🔹 a – رابط للانتقال إلى صفحة أخرى.

5️⃣ تاغ <title>

🔹 يُستخدم داخل <head> لتحديد عنوان الصفحة الذي يظهر في تبويب المتصفح. 🔹 هذا يساعد في تحسين محركات البحث وإعطاء الزائر فكرة عن الصفحة.

📝 مثال
<title>تعلم HTML للمبتدئين</title>
HTML
6️⃣ تاغات meta (البيانات الوصفية)

🔹 تُستخدم في <head> لإعطاء معلومات عن الصفحة لمحركات البحث والمتصفح.

🔹 تساعد في تحسين أداء الموقع، توافقه مع الأجهزة المختلفة، وتحسين ظهوره في نتائج البحث.

📝 أمثلة لمختلف أنواع meta
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="تعلم HTML بسهولة">
<meta name="robots" content="index, follow">
HTML

🔹 charset="UTF-8" – يجعل الصفحة تدعم كل اللغات، خاصة العربية.

🔹 viewport – يساعد في تحسين توافق الصفحة مع الهواتف الذكية.

🔹 description – يحدد وصف الصفحة لمحركات البحث مثل Google.

🔹robots – يحدد كيفية تعامل محركات البحث مع الصفحة (هل يتم فهرستها أم لا؟).

📌 البنية الكاملة لصفحة HTML منظمة
<!DOCTYPE html>
<html lang="ar">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="تعلم HTML للمبتدئين">
    <title>دورة HTML الأساسية</title>
</head>
<body>
    <h1>مرحبًا بك في عالم HTML</h1>
    <p>في هذه الدورة، ستتعلم كيفية بناء صفحات ويب بأسلوب سهل.</p>
    <img src="logo.png" alt="شعار الدورة">
    <a href="lessons.html">ابدأ التعلم الآن</a>
</body>
</html>
HTML

✅ هذه صفحة HTML كاملة تحتوي على جميع التاغات الأساسية المطلوبة.

🎯 نقاط إضافية يجب معرفتها

✅ لا يمكن وضع <title> خارج <head>.

✅<body> يجب أن يحتوي على كل المحتوى الظاهر للمستخدم.

✅ يمكنك إضافة لغة الصفحة داخل <html> باستخدام lang="ar" (كما في المثال الأخير).