الدرس ١ — Lesson 1
🤔 Mis on 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 تستخدم وسوم (märgendid) elementide määratlemiseks. Iga märgend algab < > وينتهي بـ </ >
HTML uses tags to define elements. Each tag starts with < > and ends with </ >
مثل الساندويتش 🥪 — الخبز من فوق وتحت، والحشوة في النص!
Nagu võileib 🥪 — sai üleval ja all, täidis keskel!
HTML uses tags to define elements. Each tag starts with < > and ends with </ >
مثل الساندويتش 🥪 — الخبز من فوق وتحت، والحشوة في النص!
Nagu võileib 🥪 — sai üleval ja all, täidis keskel!
<h1>مرحباً بالعالم!</h1>
<!-- h1 = عنوان كبير — Big heading -->
<!-- h1 = عنوان كبير — Big heading -->
💻 Kood
<h1>أهلاً!</h1>👁️ النتيجة — Result
أهلاً!
الدرس ٣ — Lesson 3
📝 Olulised märgendid
هذه أهم الوسوم التي ستستخدمها:
Here are the most important tags you'll use:
Here are the most important tags you'll use:
💻 Kood
<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>
🧩 Viktoriin! Milline märgend sobib suure pealkirja jaoks?
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> = kogu maja
🧠 <head> = peidetud teave (pealkiri)
👀 <body> = kõik, mida näed
🧠 <head> = peidetud teave (pealkiri)
👀 <body> = kõik, mida näed
الدرس ٥ — Lesson 5
🎨 ما هو CSS؟ — What is CSS?
إذا كان HTML هو هيكل البيت، فإن CSS هو الطلاء والديكور! 🎨
If HTML is the house frame, siis CSS on paint and decoration! 🎨
CSS يتحكم بالألوان والأحجام والخطوط والمسافات.
CSS controls colors, sizes, fonts, and spacing.
If HTML is the house frame, siis CSS on paint and decoration! 🎨
CSS يتحكم بالألوان والأحجام والخطوط والمسافات.
CSS controls colors, sizes, fonts, and spacing.
💻 CSS-kood
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:
/* Värvinimed */
color: red; /* Punane */
color: blue; /* Sinine */
color: green; /* Roheline */
/* Värvikoodid */
color: #FF6B9D; /* Roosa */
color: #7B2FBE; /* Lilla */
background: #FFD93D; /* Kollane */
color: red; /* Punane */
color: blue; /* Sinine */
color: green; /* Roheline */
/* Värvikoodid */
color: #FF6B9D; /* Roosa */
color: #7B2FBE; /* Lilla */
background: #FFD93D; /* Kollane */
#FF6B9D
#7B2FBE
#FFD93D
#69F0AE
#4FC3F7
الدرس ٧ — Lesson 7
🧪 Proovi ise!
اكتب كود 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️⃣ Millist silti kasutatakse tekstilõigu jaoks?
Which tag is for a paragraph?
<h1>
<p>
<img>
2️⃣ Kuhu kirjutame nähtava sisu?
Where do we write visible content?
<head>
<body>
<title>
3️⃣ Mis juhib värve ja kujundust?
What controls colors and design?
HTML
CSS
URL
4️⃣ كيف نجعل النص أحمر بـ CSS؟
How to make text red in CSS?
color: red;
text: red;
red: color;
📝 Mida õppisime
- 🏷️ HTML = veebilehtede loomise keel
- 🥪 الوسوم (Tags) = nagu võileib: avamärgend + sisu + sulgemismärgend
- 📝 <h1> <p> <ul> <img> <a> = tähtsamad märgendid
- 🏗️ هيكل الصفحة = <html> → <head> + <body>
- 🎨 CSS = juhib värve ja kujundust
- 🌈 الألوان = nimed (red, blue) või koodid (#FF6B9D)
🚀 Oled valmis!
تعلمت الأساسيات! الآن حان وقت بناء صفحتك الخاصة!
You learned the basics! Now it's time to build your own page!