الدرس ١ — Lesson 1
🤔 ما هو HTML؟ — What is 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 تستخدم وسوم (Tags) لتحديد العناصر. كل وسم يبدأ بـ < > وينتهي بـ </ >
HTML uses tags to define elements. Each tag starts with < > and ends with </ >
مثل الساندويتش 🥪 — الخبز من فوق وتحت، والحشوة في النص!
Like a sandwich 🥪 — bread on top and bottom, filling in the middle!
HTML uses tags to define elements. Each tag starts with < > and ends with </ >
مثل الساندويتش 🥪 — الخبز من فوق وتحت، والحشوة في النص!
Like a sandwich 🥪 — bread on top and bottom, filling in the middle!
<h1>مرحباً بالعالم!</h1>
<!-- h1 = عنوان كبير — Big heading -->
<!-- h1 = عنوان كبير — Big heading -->
💻 الكود — Code
<h1>أهلاً!</h1>👁️ النتيجة — Result
أهلاً!
الدرس ٣ — Lesson 3
📝 أهم الوسوم — Essential Tags
هذه أهم الوسوم التي ستستخدمها:
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> = البيت كله — The whole house
🧠 <head> = المعلومات المخفية (العنوان) — Hidden info (title)
👀 <body> = كل شيء تراه — Everything you see
🧠 <head> = المعلومات المخفية (العنوان) — Hidden info (title)
👀 <body> = كل شيء تراه — Everything you see
الدرس ٥ — Lesson 5
🎨 ما هو CSS؟ — What is CSS?
إذا كان HTML هو هيكل البيت، فإن CSS هو الطلاء والديكور! 🎨
If HTML is the house frame, then CSS is the paint and decoration! 🎨
CSS يتحكم بالألوان والأحجام والخطوط والمسافات.
CSS controls colors, sizes, fonts, and spacing.
If HTML is the house frame, then CSS is the paint and decoration! 🎨
CSS يتحكم بالألوان والأحجام والخطوط والمسافات.
CSS controls colors, sizes, fonts, and spacing.
💻 CSS Code
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 names */
color: red; /* أحمر */
color: blue; /* أزرق */
color: green; /* أخضر */
/* أكواد الألوان — Color codes */
color: #FF6B9D; /* وردي — pink */
color: #7B2FBE; /* بنفسجي — purple */
background: #FFD93D; /* أصفر — yellow */
color: red; /* أحمر */
color: blue; /* أزرق */
color: green; /* أخضر */
/* أكواد الألوان — Color codes */
color: #FF6B9D; /* وردي — pink */
color: #7B2FBE; /* بنفسجي — purple */
background: #FFD93D; /* أصفر — yellow */
#FF6B9D
#7B2FBE
#FFD93D
#69F0AE
#4FC3F7
الدرس ٧ — Lesson 7
🧪 جرّب بنفسك! — Try It Yourself!
اكتب كود 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;
📝 ماذا تعلمنا — What We Learned
- 🏷️ HTML = لغة بناء صفحات الويب — The language for building web pages
- 🥪 الوسوم (Tags) = مثل الساندويتش: وسم فتح + محتوى + وسم إغلاق
- 📝 <h1> <p> <ul> <img> <a> = أهم الوسوم
- 🏗️ هيكل الصفحة = <html> → <head> + <body>
- 🎨 CSS = يتحكم بالألوان والتصميم — Controls the design
- 🌈 الألوان = أسماء (red, blue) أو أكواد (#FF6B9D)
🚀 أنت جاهز! — You're Ready!
تعلمت الأساسيات! الآن حان وقت بناء صفحتك الخاصة!
You learned the basics! Now it's time to build your own page!