Գլխավոր Մոդուլներ Մոդուլ 2
💻 Մոդուլ 02

Կոդի Լեզուն

HTML, CSS և JavaScript — կայքի 3 հիմնական մասերը։ Այստեղ ամեն ինչ բացատրված է պարզ օրինակներով, առանց բարդ տերմինների։

Ընթացք
0%
📚 3 դաս
🧠 8 հարց
⏱️ մոտ 25 րոպե
🏅 Badge «Կոդի ընկեր»
🦴

HTML — կայքի կմախքը

HTML-ը կայքի կառուցվածքն է։ Վերնագրեր, տեքստեր, կոճակներ, նկարներ և բաժիններ՝ ամեն ինչ սկսվում է HTML-ից։

🦴
HTML
Կառուցվածք
🎨
CSS
Դիզայն
JavaScript
Գործողություն
Ի՞նչ է HTML-ը

HyperText Markup Language

HTML-ը ծրագրավորման լեզու չէ։ Այն նշագրման լեզու է, որը ցույց է տալիս բրաուզերին՝ ինչ բովանդակություն պետք է հայտնվի էջում։

Օրինակ՝ վերնագիրը գրվում է <h1>-ով, սովորական տեքստը՝ <p>-ով, իսկ նկարը՝ <img>-ով։

🏠
Պատկերացրու տուն։ HTML-ը տան պատերն ու սենյակներն են։ Առանց դրա կայքը կառուցվածք չի ունենա։
Հիմնական tag-եր

Ամենաշատ օգտագործվող HTML tag-երը

📰
<h1> — գլխավոր վերնագիր
Էջի ամենակարևոր վերնագիրը։ Սովորաբար էջում լինում է մեկ h1։
📝
<p> — տեքստային պարբերություն
Օգտագործվում է սովորական տեքստերի համար։
🔗
<a> — հղում
Ստեղծում է clickable հղում։ URL-ը գրվում է href attribute-ի մեջ։
🖼️
<img> — նկար
Օգտագործվում է կայքում նկար ցույց տալու համար։
📦
<div> — կոնտեյներ
Օգնում է խմբավորել տարբեր element-ներ մեկ բաժնի մեջ։
Օրինակ

Այսպես է գրվում պարզ HTML կոդը

<h1>Բարի գալուստ IT Young Talent</h1>
<p>Այստեղ սովորում ենք կոդ գրել</p>
<a href="/pages/modules">Սկսել</a>
<img src="logo.png" alt="Logo">
📅
1993
HTML-ի առաջին տարբերակը
🏷️
100+
HTML tag-եր
🌍
100%
Կայքերը օգտագործում են HTML
💡
Գիտեի՞ր
HTML-ը ստեղծել է Tim Berners-Lee-ն։ Այն համարվում է ինտերնետի հիմքերից մեկը։
🎨

CSS — կայքի դիզայնը

CSS-ը կայքին տալիս է տեսք՝ գույներ, չափեր, հեռավորություններ, font-եր, կոճակների ձև և layout։

Ի՞նչ է CSS-ը

Cascading Style Sheets

CSS-ը դիզայնի լեզուն է։ Եթե HTML-ը կայքի կառուցվածքն է, CSS-ը այն դարձնում է գեղեցիկ, readable և modern։

👗
Եթե HTML-ը մարդու մարմինն է, CSS-ը հագուստն ու ոճն է։ Նույն կառուցվածքը CSS-ի շնորհիվ կարող է դառնալ շատ պրեմիում։
Օրինակ

Այսպես է աշխատում CSS-ը

/* Վերնագրի դիզայն */
h1 {
  color: #3B82F6;
  font-size: 48px;
  font-weight: 800;
}

/* Կոճակի դիզայն */
.button {
  padding: 12px 24px;
  border-radius: 12px;
  background: #F97316;
}
Կարևոր property-ներ

CSS-ի հիմնական գործիքները

🎨
color
Փոխում է տեքստի գույնը։
🖼️
background
Փոխում է ֆոնի գույնը կամ նկարը։
🔠
font-size
Փոխում է տեքստի չափը։
📐
padding / margin
Կարգավորում է ներքին և արտաքին հեռավորությունները։
💡
Գիտեի՞ր
CSS-ի շնորհիվ նույն HTML կոդը կարող է ունենալ հազարավոր տարբեր դիզայններ։

JavaScript — կայքի գործողությունները

JavaScript-ը կայքին տալիս է շարժում և logic։ Կոճակ սեղմել, menu բացել, quiz աշխատեցնել — այս ամենը JavaScript-ի գործն է։

Ի՞նչ է JavaScript-ը

Կայքի «ուղեղը»

Եթե HTML-ը կառուցվածքն է, իսկ CSS-ը դիզայնը, JavaScript-ը այն մասն է, որը կայքը դարձնում է interactive։

🤖
HTML = կառուցվածք, CSS = տեսք, JavaScript = գործողություն։ Առանց JavaScript-ի շատ կայքեր կլինեին պարզապես static էջեր։
Ինչ կարող է անել JavaScript-ը

Օգտակար օրինակներ

🖱️
Click գործողություններ
Կոճակ սեղմելուց հետո բացում է menu, popup կամ նոր section։
Form validation
Ստուգում է՝ արդյոք email-ը կամ դաշտերը ճիշտ են լրացված։
🎬
Animation
Էջի element-ները կարող են շարժվել, հայտնվել կամ փոխվել։
🧠
Quiz logic
Հաշվում է ճիշտ պատասխանները և ցույց է տալիս արդյունքը։
Օրինակ

Պարզ JavaScript կոդ

// Երբ կոճակը սեղմվում է, ցույց է տալիս հաղորդագրություն
document.getElementById('myButton')
 .addEventListener('click', function() {
  alert('Բարի գալուստ IT Young Talent!');
});
💡
Գիտեի՞ր
JavaScript-ը օգտագործվում է ոչ միայն կայքերում, այլ նաև app-երում, games-ում և նույնիսկ որոշ server-side project-ներում։
🧠

Brain Test — Մոդուլ 2

Պատասխանիր 8 հարցի և ստացիր «Կոդի ընկեր» badge-ը։

🎉
Շնորհավոր
💻
Կոդի ընկեր
Մոդուլ 2 — ավարտված
Մոդուլ 3 ➜