الدرس ١ — Lesson 1
🤔 ما هو HTML؟
HTML هي اللغة التي تُصنع بها صفحات الويب! كل موقع تزوره — يوتيوب، جوجل، أي موقع — مبني بـ HTML.
HTML is the language used to build web pages! Every website you visit — YouTube, Google, any site — is built with HTML.
فكّر فيها وكأنها هيكل البيت 🏠 — تحدد الجدران والأبواب والنوافذ. لكن بدل البيت، أنت تبني صفحة على الإنترنت!
Think of it as the skeleton of a house 🏠 — it defines the walls, doors, and windows. But instead of a house, you're building a web page!
HTML is the language used to build web pages! Every website you visit — YouTube, Google, any site — is built with HTML.
فكّر فيها وكأنها هيكل البيت 🏠 — تحدد الجدران والأبواب والنوافذ. لكن بدل البيت، أنت تبني صفحة على الإنترنت!
Think of it as the skeleton of a house 🏠 — it defines the walls, doors, and windows. But instead of a house, you're building a web page!
💡 هل تعلم: HTML اختصار لـ HyperText Markup Language — لغة ترميز النص التشعبي!
HTML stands for HyperText Markup Language!
HTML stands for HyperText Markup Language!
الدرس ٢ — Lesson 2
🏷️ الوسوم (Tags) — HTML Tags
HTML تستخدم وسوم (الوسوم) لتحديد العناصر. كل وسم يبدأ بـ < > وينتهي بـ </ >
HTML uses tags to define elements. Each tag starts with < > and ends with </ >
مثل الساندويتش 🥪 — الخبز من فوق وتحت، والحشوة في النص!
مثل شطيرة 🥪 — خبز في الأعلى والأسفل، وحشوة في الوسط!
HTML uses tags to define elements. Each tag starts with < > and ends with </ >
مثل الساندويتش 🥪 — الخبز من فوق وتحت، والحشوة في النص!
مثل شطيرة 🥪 — خبز في الأعلى والأسفل، وحشوة في الوسط!
<h1>مرحباً بالعالم!</h1>
<!-- h1 = عنوان كبير — Big heading -->
<!-- h1 = عنوان كبير — Big heading -->
💻 الشيفرة
<h1>أهلاً!</h1>👁️ النتيجة — Result
أهلاً!
الدرس ٣ — Lesson 3
📝 أهم الوسوم
هذه أهم الوسوم التي ستستخدمها:
Here are the most important tags you'll use:
Here are the most important tags you'll use:
💻 الشيفرة
<h1>عنوان كبير</h1><h2>عنوان أصغر</h2>
<p>فقرة نص</p>
👁️ النتيجة
عنوان كبير
عنوان أصغر
فقرة نص
<!-- قائمة — List -->
<ul>
<li>العنصر الأول</li>
<li>العنصر الثاني</li>
</ul>
<!-- صورة — Image -->
<img src="photo.jpg">
<!-- رابط — Link -->
<a href="https://alinli.com">زُر ألن لي</a>
<ul>
<li>العنصر الأول</li>
<li>العنصر الثاني</li>
</ul>
<!-- صورة — Image -->
<img src="photo.jpg">
<!-- رابط — Link -->
<a href="https://alinli.com">زُر ألن لي</a>
🧩 اختبار! ما الوسم الصحيح لعنوان كبير؟
Quiz! Which tag makes a big heading?
<p>
<h1>
<img>
<a>
الدرس ٤ — Lesson 4
🏗️ هيكل الصفحة — Page Structure
كل صفحة HTML لها هيكل ثابت — مثل هيكل البيت!
Every HTML page has a fixed structure — like the frame of a house!
Every HTML page has a fixed structure — like the frame of a house!
<!DOCTYPE html>
<html>
<head>
<title>عنوان صفحتي</title>
</head>
<body>
<!-- المحتوى هنا — Content goes here -->
<h1>مرحباً!</h1>
<p>هذه صفحتي الأولى</p>
</body>
</html>
<html>
<head>
<title>عنوان صفحتي</title>
</head>
<body>
<!-- المحتوى هنا — Content goes here -->
<h1>مرحباً!</h1>
<p>هذه صفحتي الأولى</p>
</body>
</html>
🏠 <html> = البيت كله
🧠 <head> = المعلومات المخفية (العنوان)
👀 <body> = كل شيء تراه
🧠 <head> = المعلومات المخفية (العنوان)
👀 <body> = كل شيء تراه
الدرس ٥ — Lesson 5
🎨 ما هو CSS؟ — What is CSS?
إذا كان HTML هو هيكل البيت، فإن CSS هو الطلاء والديكور! 🎨
If HTML is the house frame، فإن CSS هو paint and decoration! 🎨
CSS يتحكم بالألوان والأحجام والخطوط والمسافات.
CSS controls colors, sizes, fonts, and spacing.
If HTML is the house frame، فإن CSS هو paint and decoration! 🎨
CSS يتحكم بالألوان والأحجام والخطوط والمسافات.
CSS controls colors, sizes, fonts, and spacing.
💻 شيفرة CSS
h1 {color: red;
font-size: 24px;
}
👁️ النتيجة
مرحباً!
💡 تذكّر: HTML = ماذا يُعرض | CSS = كيف يبدو
HTML = WHAT to show | CSS = HOW it looks
HTML = WHAT to show | CSS = HOW it looks
الدرس ٦ — Lesson 6
🌈 الألوان — Colors
في CSS، يمكنك استخدام أسماء الألوان بالإنجليزية أو أكواد خاصة:
In CSS, you can use color names or special codes:
In CSS, you can use color names or special codes:
/* أسماء الألوان */
color: red; /* أحمر */
color: blue; /* أزرق */
color: green; /* أخضر */
/* أكواد الألوان */
color: #FF6B9D; /* وردي */
color: #7B2FBE; /* بنفسجي */
background: #FFD93D; /* أصفر */
color: red; /* أحمر */
color: blue; /* أزرق */
color: green; /* أخضر */
/* أكواد الألوان */
color: #FF6B9D; /* وردي */
color: #7B2FBE; /* بنفسجي */
background: #FFD93D; /* أصفر */
#FF6B9D
#7B2FBE
#FFD93D
#69F0AE
#4FC3F7
الدرس ٧ — Lesson 7
🧪 جرّب بنفسك!
اكتب كود HTML في المربع واضغط "شغّل" لترى النتيجة!
Type HTML code in the box and press "Run" to see the result!
Type HTML code in the box and press "Run" to see the result!
✏️ اكتب كود HTML هنا — Type HTML code here:
الدرس ٨ — Lesson 8
🏆 اختبار نهائي! — Final Quiz!
1️⃣ ما الوسم المستخدم لفقرة نص؟
Which tag is for a paragraph?
<h1>
<p>
<img>
2️⃣ أين نكتب المحتوى المرئي؟
Where do we write visible content?
<head>
<body>
<title>
3️⃣ ما الذي يتحكم بالألوان والتصميم؟
What controls colors and design?
HTML
CSS
URL
4️⃣ كيف نجعل النص أحمر بـ CSS؟
How to make text red in CSS?
color: red;
text: red;
red: color;
📝 ماذا تعلّمنا
- 🏷️ HTML = لغة بناء صفحات الويب
- 🥪 الوسوم (Tags) = مثل الساندويتش: وسم فتح + محتوى + وسم إغلاق
- 📝 <h1> <p> <ul> <img> <a> = أهم الوسوم
- 🏗️ هيكل الصفحة = <html> → <head> + <body>
- 🎨 CSS = يتحكم بالألوان والتصميم
- 🌈 الألوان = أسماء (red, blue) أو أكواد (#FF6B9D)
🚀 أنت جاهز!
تعلمت الأساسيات! الآن حان وقت بناء صفحتك الخاصة!
You learned the basics! Now it's time to build your own page!