📘 اليوم الأول · مقدمة في HTML

🎯 أساسيات HTML

👩‍🏫 من إعداد: فريق عمل جامعة بنها 🧑‍🏫 درس تفاعلي

🎯 أهداف الدرس

يعرف معنى HTML.
يفهم وظيفة HTML في تصميم المواقع.
يكتب أول صفحة ويب بنفسه.
يتعرف على تركيب ملف HTML الأساسي.
يتعامل مع وسم <h1> ومع التعليقات.

🌐 أولاً: الإنترنت والمواقع الإلكترونية

💬 السؤال: يشاهد الطلاب يومياً العديد من المواقع الإلكترونية مثل Google وYouTube وFacebook. فكيف يتم بناء هذه المواقع؟

✅ الإجابة: تُنشأ المواقع الإلكترونية باستخدام مجموعة من لغات البرمجة ولغات التوصيف، وتُعد HTML اللغة الأساسية والأولى التي يجب تعلمها لفهم آلية عمل المواقع.

💡 معلومة إضافية: يمكن تشبيه HTML بالهيكل الأساسي للمبنى، فهي المسؤولة عن تنظيم محتوى الصفحة وتحديد أماكن ظهور العناصر المختلفة.

🧩 ثانياً: ما هي HTML؟

HTML اختصار لـ: HyperText Markup Language

HTML ليست لغة برمجة، هي لغة بنستخدمها لبناء هيكل صفحة الويب.
مثال تشبيهي: لو الموقع الإلكترونى شبه البيت:
HTML = الحوائط والغرف | CSS = الدهان والديكور | JavaScript = الكهرباء والحركة.

🏷️ ثالثاً: ما هو الوسم (Tag)؟

HTML عبارة عن مجموعة وسوم. مثال:

<h1>Hello</h1>

<h1> = بداية الوسم (افتتاحي)
Hello = المحتوى
</h1> = نهاية الوسم (ختامي)

⚡ نشاط سريع: ما هو الوسم الافتتاحي؟ <h1> وما هو الختامي؟ </h1>

📂 رابعاً: إنشاء أول ملف HTML

📝 الخطوات:
1. افتحي VS Code
2. Create New File
3. احفظ الملف باسم index.html

⭐ مهم جداً: الامتداد يكون .html وليس .txt أو غيره.

🏗️ خامساً: هيكل صفحة HTML

            <!DOCTYPE html>
            <html>
            <head>
            <title>My First Page</title>
            </head>
            <body>
            Hello World
            </body>
            </html>
        

1. DOCTYPE
<DOCTYPE html!> يخبر المتصفح أننا نستخدم HTML5.

2. html
<html> يمثل بداية الصفحة كلها.

3. head
<head> يحتوي معلومات عن الصفحة لا تظهر للمستخدم.

4. title
<title> اسم الصفحة الذي يظهر في التبويب.

5. body
<body> كل ما يراه المستخدم داخل الصفحة.

🖥️ سادساً: أول صفحة ويب

عند كتابة هذا الكود:

                <!DOCTYPE html>
                <html>
                <head><title>My First Page</title></head>
                <body>
                Hello World
                </body>
                </html>
            

✅ النتيجة: ستظهر في المتصفح كلمة Hello World

🔤 سابعاً: وسم العنوان <h1>

<h1>Welcome To HTML</h1> — ينشئ عنواناً كبيراً وبارزاً.

مثال: <h1>HTML Course</h1>

📌 ملاحظة: وسم <h1> هو الأكبر والأهم بين عناوين HTML، ويستخدم للعنوان الرئيسي للصفحة.

✏️ باقي العناوين (h2 إلى h6) سيتم شرحها في الدرس القادم.

📝 ثامناً: الفقرة (p)

<p>This is my first paragraph.</p>

✏️ نشاط عملي: اكتب جملة تعريفية عن نفسك داخل وسم <p>، وضع اسمك داخل وسم <h1>. جرب تشغيل الصفحة لترى النتيجة.

                    <h1>My Name</h1>
                    <p>My name is Ahmed.</p>
                

💬 تاسعاً: التعليقات (Comments)

التعليق لا يظهر في الصفحة:

شرح الكود.
تنظيم المشروع.
تذكير المبرمج بمعلومة.

                <!-- هذا تعليق يوضح أن القسم التالي خاص بالعنوان الرئيسي -->
                <h1>My Page</h1>
            

▶️ عاشراً: حفظ وتشغيل الصفحة

🖱️ الطريقة الأولى: اضغط مرتين على index.html سيفتح في المتصفح.

⚡ الطريقة الثانية: باستخدام إضافة Live Server في VS Code.

🎯 نشاط نهاية الدرس

إنشاء صفحة تحتوي على:

عنوان الصفحة (title).
اسم الطالب داخل <h1>.
فقرة تعريفية داخل <p>.
تعليق داخل الكود.

                <!DOCTYPE html>
                <html>
                <head><title>Student Page</title></head>
                <body>
                <!-- Student Information -->
                <h1>Ahmed</h1>
                <p>I love learning HTML.</p>
                </body>
                </html>
            

🧪 اختبار تفاعلي · مراجعة سريعة

🌟 درجتك

0 / 0