اتعلم HTML – 🔹 الوحدة 1: مقدمة عن HTML 1

بواسطةahmed

🌐 ما هو الويب (Web)؟

الويب (World Wide Web) هو نظام عالمي يتيح عرض وتبادل المعلومات عبر الإنترنت على شكل صفحات ومواقع إلكترونية يمكن الوصول إليها باستخدام متصفح الإنترنت (Browser).

Table of Contents

ببساطة:

الويب هو مجموعة ضخمة من صفحات الإنترنت المترابطة مع بعضها بروابط.

🧠 شرح مبسّط

عندما تفتح أي موقع مثل:

  • google.com

  • facebook.com

  • wikipedia.org

فأنت في الحقيقة تتصفح صفحات ويب مكتوبة بلغات مثل:

  • HTML

  • CSS

  • JavaScript

والمتصفح هو الذي يقوم بقراءة هذه اللغات وعرضها لك بشكل مفهوم.

🔗 لماذا سُمّي بالويب (Web)؟

كلمة Web تعني “شبكة عنكبوت”،
لأن صفحات الإنترنت:

  • مرتبطة ببعضها بروابط (Links)

  • يمكنك الانتقال من صفحة لأخرى بسهولة

مثال:

تضغط على رابط داخل صفحة → تنتقل لصفحة أخرى داخل نفس الموقع أو موقع مختلف.

⚙️ كيف يعمل الويب باختصار؟

  1. تكتب عنوان الموقع (URL)

  2. المتصفح يرسل طلب إلى السيرفر

  3. السيرفر يرسل ملفات الصفحة

  4. المتصفح يعرض الصفحة

📌 هذه الملفات غالبًا تكون:

  • HTML (الهيكل)

  • CSS (التصميم)

  • JavaScript (التفاعل)

🌍 الفرق بين الإنترنت والويب

الإنترنت الويب
شبكة عالمية خدمة تعمل فوق الإنترنت
بنية تحتية صفحات ومواقع
كابلات وسيرفرات محتوى ومعلومات

📌 الويب جزء من الإنترنت وليس العكس.

✅ خلاصة

  • الويب هو الطريقة التي نستخدم بها الإنترنت لعرض المعلومات

  • يعتمد على صفحات مترابطة

  • يعمل من خلال المتصفح

  • أساسه HTML

⚙️ كيف تعمل صفحات الإنترنت؟

صفحات الإنترنت تعمل من خلال تواصل بين المتصفح (Browser) والسيرفر (Server) عبر الإنترنت، ويتم هذا التواصل في خطوات منظمة وواضحة.

خلّيك معايا خطوة خطوة 👇

🧭 الخطوات الأساسية لعمل صفحة الإنترنت

1️⃣ كتابة عنوان الموقع (URL)

أنت تكتب مثلًا:

www.google.com

في شريط المتصفح.

2️⃣ المتصفح يرسل طلب (Request)

المتصفح يرسل طلب إلى السيرفر الموجود عليه الموقع باستخدام بروتوكول:

  • HTTP

  • أو HTTPS

📌 الطلب معناه:

“من فضلك ابعتلي ملفات صفحة الموقع”

3️⃣ السيرفر يستقبل الطلب

السيرفر:

  • جهاز قوي متصل بالإنترنت 24/7

  • يحتوي على ملفات الموقع

يقوم بالبحث عن الملفات المطلوبة.

4️⃣ السيرفر يرسل رد (Response)

السيرفر يرسل للمتصفح ملفات الصفحة مثل:

  • HTML

  • CSS

  • JavaScript

  • صور / فيديوهات

5️⃣ المتصفح يعالج الملفات

المتصفح يقوم بـ:

  1. قراءة ملف HTML

  2. بناء هيكل الصفحة

  3. تطبيق CSS (الألوان – التصميم)

  4. تشغيل JavaScript (التفاعل)

📌 هذه المرحلة اسمها:

Rendering (عرض الصفحة)

6️⃣ ظهور الصفحة للمستخدم

النتيجة النهائية:
✔️ صفحة كاملة ظاهرة أمامك
✔️ أزرار، نصوص، صور، تفاعل

🧠 مثال مبسّط جدًا

تخيّل إنك في مطعم 🍽️:

الإنترنت المطعم
المتصفح الزبون
السيرفر المطبخ
الطلب طلب الأكل
الصفحة الوجبة

تطلب → المطبخ يحضّر → تستلم الوجبة

📄 دور HTML و CSS و JavaScript

اللغة دورها
HTML الهيكل (العظام)
CSS الشكل (الملابس)
JavaScript الحركة والتفاعل (العقل)

🧠 بدون HTML لا توجد صفحة أساسًا.

🔁 هل الصفحة تشتغل مرة واحدة؟

❌ لا
JavaScript يمكنه:

  • إرسال طلبات جديدة للسيرفر

  • تحديث الصفحة بدون إعادة تحميل

  • جلب بيانات (APIs)

✅ الخلاصة

  • المتصفح يطلب الصفحة

  • السيرفر يرسل الملفات

  • المتصفح يعرض الصفحة

  • HTML هو الأساس

3️⃣ ما هي HTML؟

HTML هي اللغة الأساسية المستخدمة في إنشاء صفحات الويب.

📌 بدون HTML:

  • لا يوجد موقع

  • لا يوجد محتوى

  • لا يوجد نص أو صور

🧠 HTML مسؤولة عن هيكل الصفحة فقط، وليس الشكل أو التفاعل.

🔍 تعريف HTML

HTML هي لغة توصيف (Markup Language) تُستخدم لبناء وهيكلة محتوى صفحات الإنترنت باستخدام وسوم (Tags).

🧱 ماذا تفعل HTML؟

باستخدام HTML يمكنك:

  • كتابة العناوين

  • كتابة الفقرات

  • إضافة الصور

  • إنشاء الروابط

  • عمل قوائم وجداول

  • تنظيم المحتوى داخل الصفحة

🏷️ فكرة الوسوم (Tags)

HTML تعتمد على Tags مثل:

<h1>عنوان</h1>
<p>فقرة نصية</p>
<a href=”#”>رابط</a>

📌 كل وسم:

  • له بداية <tag>

  • وله نهاية </tag>

4️⃣ معنى HyperText Markup Language

اسم HTML يتكوّن من 3 كلمات:

🔹 HyperText

يعني نص يحتوي على روابط تنقلك لصفحات أخرى.

🧠 مثال:

<a href=”https://google.com”>اذهب إلى جوجل</a>

🔹 Markup

يعني لغة تعتمد على وسوم لتحديد:

  • هذا عنوان

  • هذا فقرة

  • هذه صورة

📌 مثال:

<h1>عنوان رئيسي</h1>

🔹 Language

يعني لها قواعد وطريقة كتابة ثابتة.

🧠 المعنى الكامل

لغة توصيف تُستخدم لإنشاء وهيكلة صفحات الويب باستخدام الوسوم، وتدعم الروابط بين الصفحات.

📌 مثال بسيط يوضح HTML

<!DOCTYPE html>
<html>
<head>
<title>مثال HTML</title>
</head>
<body>

<h1>مرحبًا</h1>
<p>هذه أول صفحة HTML</p>

</body>
</html>

✅ خلاصة سريعة

  • HTML = هيكل الصفحة

  • تعتمد على الوسوم

  • ليست لغة برمجة

  • أساس أي موقع

4️⃣ معنى HyperText Markup Language

مصطلح HTML هو اختصار لـ HyperText Markup Language، ولفهمه صح لازم نفهم كل كلمة لوحدها 👇

🔹 أولًا: HyperText

HyperText يعني نص فائق
أي نص يحتوي على روابط (Links) تنقلك من صفحة إلى صفحة أخرى بسهولة.

📌 مثال:

<a href=”https://www.google.com”>اذهب إلى جوجل</a>

🔗 عند الضغط على النص، تنتقل إلى صفحة أخرى
وهذا هو جوهر الويب.

🔹 ثانيًا: Markup

Markup تعني وصف أو ترميز النص باستخدام وسوم (Tags)
يعني نقول للمتصفح:

  • هذا عنوان

  • هذه فقرة

  • هذه صورة

📌 مثال:

<h1>عنوان رئيسي</h1>
<p>هذه فقرة نصية</p>

المتصفح يفهم من الوسوم كيف يعرض المحتوى.

🔹 ثالثًا: Language

Language تعني لغة لها:

  • قواعد كتابة

  • أوامر محددة

  • طريقة صحيحة للتنفيذ

HTML لها قواعد ثابتة لازم تلتزم بها.

🧠 المعنى الكامل لـ HyperText Markup Language

لغة توصيف تُستخدم لإنشاء وهيكلة صفحات الويب، تعتمد على النصوص المترابطة (روابط) وتستخدم وسوم لتحديد شكل ومكان المحتوى.

📌 مثال صغير يوضح المعنى كاملًا

<!DOCTYPE html>
<html>
<body>

<h1>موقعي الشخصي</h1>
<p>مرحبًا بك في موقعي</p>

<a href=”https://example.com”>انتقل لصفحة أخرى</a>

</body>
</html>

✔️ HyperText → رابط
✔️ Markup → الوسوم
✔️ Language → القواعد

✅ خلاصة سريعة

  • HTML ليست لغة برمجة

  • هي لغة توصيف

  • تعتمد على الوسوم والروابط

  • أساس أي صفحة ويب

 

5️⃣ هل HTML لغة برمجة؟

❌ لا، HTML ليست لغة برمجة
✔️ HTML هي لغة توصيف (Markup Language)

🧠 لماذا HTML ليست لغة برمجة؟

لغة البرمجة لازم يكون فيها:

  • شروط (if / else)

  • حلقات (for / while)

  • تنفيذ منطق (Logic)

  • معالجة بيانات

📌 HTML لا تحتوي على أيٍّ من هذه الأشياء
هي فقط تصف المحتوى للمتصفح.

🏷️ ماذا تفعل HTML إذن؟

HTML:

  • تحدد أن هذا عنوان

  • هذا نص

  • هذه صورة

  • هذا رابط

ولا تقول كيف يتم التنفيذ، بل كيف يُعرض المحتوى.

🔍 مثال يوضّح الفرق

❌ HTML (ليست برمجة)

<h1>مرحبا</h1>
<p>أهلاً بك في الموقع</p>

هنا لم نكتب أي منطق أو قرار، فقط وصفنا المحتوى.

✔️ JavaScript (لغة برمجة)

if (age >= 18) {
alert(“مسموح بالدخول”);
}

هنا يوجد شرط وتنفيذ قرار.

📊 مقارنة سريعة

HTML لغة برمجة
لغة توصيف لغة منطق
تصف المحتوى تنفذ أوامر
لا تحتوي على if أو loops تحتوي على شروط وحلقات
لا تعمل وحدها تنفذ عمليات

🧠 تشبيه بسيط

  • HTML = هيكل المبنى

  • CSS = الديكور

  • JavaScript = الكهرباء والحركة

✅ الخلاصة

  • HTML ليست لغة برمجة

  • هي أساس صفحات الويب

  • تستخدم لتنظيم المحتوى فقط

  • بدونها لا يوجد موقع

 

6️⃣ استخدامات HTML

HTML هي الأساس في عالم الويب، وتُستخدم في مجالات كتير جدًا، سواء كنت مبتدئ أو محترف 👇

🌐 1. إنشاء صفحات ومواقع الإنترنت

HTML تُستخدم لبناء:

  • صفحات المواقع

  • الصفحات الرئيسية (Home)

  • صفحات الخدمات

  • صفحات التواصل

📌 أي موقع على الإنترنت يحتوي على HTML.

🧱 2. بناء هيكل الصفحة (Structure)

HTML مسؤولة عن:

  • تقسيم الصفحة

  • ترتيب المحتوى

  • تحديد أماكن العناوين والنصوص والصور

🧠 بدون HTML لا يوجد تنظيم.

🔗 3. إنشاء الروابط بين الصفحات

عن طريق HTML يمكنك:

  • الربط بين صفحات الموقع

  • الانتقال لمواقع خارجية

<a href=”about.html”>من نحن</a>

🖼️ 4. عرض الصور والفيديو

HTML تتيح إضافة:

  • صور

  • فيديوهات

  • ملفات صوتية

<img src=”image.jpg” alt=”صورة”>

📝 5. إنشاء النماذج (Forms)

تُستخدم لإنشاء:

  • نماذج تسجيل

  • نماذج تسجيل دخول

  • نماذج تواصل معنا

<form>
<input type=”text”>
<button>إرسال</button>
</form>

📧 6. تصميم رسائل البريد الإلكتروني

HTML تُستخدم في:

  • تصميم إيميلات احترافية

  • نشرات بريدية

📌 أغلب رسائل الإيميل مبنية بـ HTML.

📱 7. واجهات التطبيقات

HTML تُستخدم في:

  • تطبيقات الويب

  • تطبيقات الموبايل (باستخدام frameworks)

📰 8. عرض المحتوى النصي

HTML تُستخدم لعرض:

  • مقالات

  • أخبار

  • مدونات

<article>
<h2>عنوان المقال</h2>
<p>نص المقال…</p>
</article>

🧠 مثال بسيط يجمع أكثر من استخدام

<!DOCTYPE html>
<html>
<body>

<h1>موقعي</h1>
<p>مرحبا بك</p>

<img src=”logo.png”>

<a href=”contact.html”>تواصل معنا</a>

</body>
</html>

✅ الخلاصة

  • HTML أساس كل موقع

  • تُستخدم لبناء الهيكل

  • تُستخدم مع CSS و JavaScript

  • لا غنى عنها في أي مشروع ويب

🔍 الفرق بين HTML و CSS و JavaScript

الثلاث لغات دول هم أساس أي موقع ويب، وكل لغة ليها دور مختلف وواضح 👇

🧱 أولًا: HTML (الهيكل)

HTML مسؤولة عن بناء هيكل الصفحة وتنظيم المحتوى.

📌 تستخدم لـ:

  • العناوين

  • الفقرات

  • الصور

  • الروابط

  • النماذج

مثال HTML:

<h1>مرحبا</h1>
<p>أهلاً بك في موقعي</p>
<button>اضغط هنا</button>

🧠 بدون HTML = لا توجد صفحة.

🎨 ثانيًا: CSS (الشكل والتصميم)

CSS مسؤولة عن شكل الصفحة ومظهرها.

📌 تستخدم لـ:

  • الألوان

  • الخطوط

  • الأحجام

  • الترتيب

  • التصميم المتجاوب

مثال CSS:

h1 {
color: blue;
}

button {
background-color: green;
}

🧠 بدون CSS = صفحة موجودة لكن شكلها سيئ.

⚙️ ثالثًا: JavaScript (التفاعل والحركة)

JavaScript مسؤولة عن التفاعل والمنطق داخل الصفحة.

📌 تستخدم لـ:

  • التفاعل مع المستخدم

  • تنفيذ أوامر

  • تغيير المحتوى

  • جلب بيانات من السيرفر

مثال JavaScript:

button.onclick = function () {
alert(“تم الضغط على الزر”);
};

🧠 بدون JavaScript = صفحة ثابتة بدون تفاعل.

📊 مقارنة سريعة

العنصر HTML CSS JavaScript
الدور هيكل تصميم تفاعل
نوع اللغة توصيف تنسيق برمجة
تتحكم في المحتوى الشكل السلوك
تعمل وحدها؟ جزئيًا لا لا

🧠 تشبيه بسيط

تخيل إنك بتبني بيت 🏠:

  • HTML = الحوائط

  • CSS = الدهانات والديكور

  • JavaScript = الكهرباء والأبواب المتحركة

🧪 مثال عملي كامل (HTML + CSS + JS)

<!DOCTYPE html>
<html>
<head>
<style>
button {
background-color: blue;
color: white;
padding: 10px;
}
</style>
</head>
<body>

<h1>موقعي</h1>
<button onclick=”alert(‘مرحبا بك’)”>اضغط هنا</button>

</body>
</html>

✅ الخلاصة

  • HTML تبني الصفحة

  • CSS تجمّل الصفحة

  • JavaScript تجعل الصفحة ذكية

🛠️ أدوات إنشاء صفحات HTML

لإنشاء صفحات HTML أنت محتاج أدوات بسيطة جدًا، لكن اختيار الأدوات الصح يفرق في السرعة والاحترافية 👇

1️⃣ محرر الأكواد (Code Editor)

ده أهم أداة، بتكتب فيها كود HTML.

🔹 أشهر محررات الأكواد:

  • VS Code ⭐ (الأفضل والأكثر استخدامًا)

  • Notepad++

  • Sublime Text

  • Atom

لماذا VS Code الأفضل؟

✔️ خفيف وسريع
✔️ يدعم الإضافات
✔️ يكمل الكود تلقائيًا
✔️ يوضح الأخطاء

2️⃣ المتصفح (Browser)

المتصفح هو اللي:

  • يقرأ HTML

  • يعرض الصفحة

🔹 أشهر المتصفحات:

  • Google Chrome

  • Mozilla Firefox

  • Microsoft Edge

📌 أي متصفح حديث يشغّل HTML بدون مشاكل.

3️⃣ ملفات HTML

ملف الصفحة لازم يكون بامتداد:

.html

مثال:

index.html

4️⃣ أدوات المطور (Developer Tools)

موجودة داخل المتصفح.

🔹 فائدتها:

  • فحص الكود

  • تعديل HTML و CSS مباشرة

  • معرفة الأخطاء

  • اختبار التصميم

📌 الاختصار:

  • Windows: F12

  • أو Ctrl + Shift + I

5️⃣ إضافات تساعدك (اختياري)

لو بتستخدم VS Code:

إضافات مفيدة:

  • Live Server (تشغيل الصفحة تلقائيًا)

  • HTML Snippets

  • Prettier (تنسيق الكود)

🧠 مثال عملي (أداة + كود)

  1. افتح VS Code

  2. أنشئ ملف index.html

  3. اكتب:

<!DOCTYPE html>
<html>
<head>
<title>أدوات HTML</title>
</head>
<body>

<h1>مرحبًا بك</h1>
<p>هذه أول صفحة HTML</p>

</body>
</html>

  1. افتح الملف بالمتصفح

📋 ملخص الأدوات

الأداة الوظيفة
محرر الأكواد كتابة HTML
المتصفح عرض الصفحة
DevTools فحص وتصحيح
إضافات تسهيل العمل

✅ الخلاصة

  • HTML لا تحتاج أدوات معقدة

  • أي كمبيوتر يكفي

  • VS Code + متصفح = كفاية جدًا

9️⃣ أول صفحة HTML

أول صفحة HTML هي أبسط ملف ممكن تبدأ بيه في عالم الويب، وبتكون عبارة عن ملف نصي بامتداد .html.

🧭 خطوات إنشاء أول صفحة HTML

1️⃣ إنشاء ملف

  • افتح VS Code أو أي محرر أكواد

  • أنشئ ملف جديد

  • سمّه:

index.html

2️⃣ كتابة كود HTML

تكتب داخل الملف كود HTML.

3️⃣ فتح الصفحة

  • اضغط كليك يمين على الملف

  • Open with Browser
    أو اسحب الملف على المتصفح

📌 المتصفح هيعرض الصفحة فورًا.

🧪 مثال بسيط جدًا لأول صفحة HTML

<h1>أول صفحة HTML</h1>
<p>مرحبًا بك في عالم الويب</p>

✔️ المتصفح هيفهم الكود ويعرضه
❌ لكن ده مش هيكل كامل (وده يقودنا للنقطة 10)

🔟 هيكل صفحة HTML الأساسي

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

  • المتصفح يفهمها صح

  • تشتغل بدون أخطاء

  • تكون احترافية

🧱 الهيكل الأساسي لصفحة HTML

<!DOCTYPE html>
<html>
<head>
<title>عنوان الصفحة</title>
</head>
<body>

</body>
</html>

📌 شرح كل جزء

<!DOCTYPE html>

  • يعرّف المتصفح إن الصفحة HTML5

<html>

  • يحتوي كل كود الصفحة

<head>

  • معلومات عن الصفحة

  • لا تظهر للمستخدم

مثل:

  • العنوان

  • الترميز

  • ربط CSS

<title>

  • يظهر في تبويب المتصفح

<body>

  • كل المحتوى اللي المستخدم يشوفه

✅ الآن: مثال عملي شامل من أول ما هو الويب → HTML

🧠 فكرة المثال

صفحة بسيطة تشرح:

  • الويب

  • HTML

  • روابط (HyperText)

  • هيكل صفحة صحيح

🧪 مثال HTML كامل متكامل

<!DOCTYPE html>
<html lang=”ar”>
<head>
<meta charset=”UTF-8″>
<title>مقدمة HTML</title>
</head>
<body>

<!– عنوان الصفحة –>
<h1>مرحبًا بك في عالم الويب</h1>

<!– فقرة عن الويب –>
<p>
الويب هو مجموعة من صفحات الإنترنت المرتبطة ببعضها باستخدام روابط.
</p>

<!– فقرة عن HTML –>
<p>
HTML هي اللغة الأساسية المستخدمة في إنشاء صفحات الويب.
</p>

<!– قائمة –>
<h2>مكونات صفحة الويب</h2>
<ul>
<li>HTML – الهيكل</li>
<li>CSS – التصميم</li>
<li>JavaScript – التفاعل</li>
</ul>

<!– رابط (HyperText) –>
<a href=”https://www.google.com” target=”_blank”>
زيارة موقع Google
</a>

</body>
</html>

🧠 ماذا يثبت المثال؟

✔️ معنى الويب
✔️ استخدام HTML
✔️ HyperText (روابط)
✔️ هيكل صفحة HTML كامل
✔️ أول صفحة احترافية

✅ الخلاصة النهائية للوحدة 1

  • الويب = صفحات مترابطة

  • HTML = أساس أي صفحة

  • الصفحة لها هيكل ثابت

  • أول صفحة تبدأ بـ index.html

اترك تعليقاً

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