Ներածություն

Մոտավոր ընթերցում. 2 րոպե 1030 դիտումներ

Backend և Frontend

Frontend – լեզուներից են Html, Css, Javascript և այլն։ Սրանցով ծրագրավորում ենք վեբ կայքերի արտաքին տեսքը(ինչոր տեքստ, կոճակներ(кнопки), անիմացիա, նկարներ, մենյու, հղումներ և այլն)։ Backend – լեզուներից են Java, Php, C#, Python և այլն։ Սրանք պատասխանատու են կայքի աշխատունակության համար։ Օրինակ facebook-ում մուտքագրվելու համար Frontend-ը տրամադրում է դաշտեր, որտեղ տվյալներն ենք գրանցում․ սեղմելով «մուտք գործել» կոճակը, տվյալները ուղարկվում են facebook-ի սերվեր, որտեղ Backend լեզուների միջոցով դրանք մշակվում են և վերջում սերվերը պատասխան է ուղարկում բրաուզերին և արդյունքում ցուցադրվում է ֆեյսբուքյան էջը։ Նայենք նկարի օրինակին՝

Սերվերները հատուկ համակարգիչներ են, որոնք միշտ աշխատանքի մեջ են․ այնտեղ են պահպանվում կայքին վերաբերող բոլոր ֆայլերը․ բրաուզերը շփվում է սերվերի հետ ինտերնետի միջոցով։

API

API-ն, Application Programming Interface, программный интерфейс приложения, Հավելվածի ծրագրային ինտերֆեյսը տարբեր ֆունկցիաների հավաքածու է, ամբողջական մի մեխանիզմ է։ Ինտերֆեյսի միջոցով նշված տվյալները մշակվում է և վերջում վերադարձվում արդյունքը :

Oրինակ վեբ կայքերում կհանդիպենք վճարային համակարգեր, որոնք առաձին ծրագրեր են՝ կցված տվյալ կայքին․ դրանք տրամադրում են ինտերֆեյս, որով փոխանցվում է քարտի տվյալները․ API-ն տվյալները կմշակի(կամ կփոխանցի մեկ այլ API-ի ) և վերջում կվերադարձնի դրա արդյունքը:

Այսինքն API-ն հանդիսանում է տարբեր պրոցեսների հավաքածու, որն ինտերֆեյսի միջոցով ստանում է տվյալներ, մշակում այն, շփվում մեկ այլ պրոցեսների՝ մեկ այլ API ի հետ և վերադարձնում արդյունքը:

Այլ կերպ ասած API-ն ֆունկցիա է, որը ստանում է տվյալները, մշակում այն, և վերադարձնում դրա պատասխանը։

Որոշ վայրերում կհանդիպենք API հապավմանը․ ուստի ցանկալի է պատկերացում կազմել դրա ընդհանուր գաղափարին։

HTML

Փաստաթղթերը պարունակում են պարզ տեքստեր, իսկ Html-ի միջոցով հնարավոր է նրա տարբեր մասերին հաղորդել լրացուցիչ տվյալներ՝ ինչպես պետք է պատկերվեն դրանք։ Ուստի այն կոչվում է նշագրման լեզու(Markup language – язык разметки)։ Դրանով կարող ենք նշել գլխագիրները և այն պատկերել համեմատած ավելի մեծ և մուգ, տեկստում առանձնացնել մեջբերումները, պատկերել կամ ցանկ, աղյուսակ և այլն։ Նշագրման լեզվի միջոցով բրաուզերը կողմնորոշվում է, թե ինչպես ցուցադրի տվյալ փաստաթուղթը։ Օրինակ՝

Բոլոր html տեգերը համապատասխանում են W3C(World Wide Web Consortium)-ի ստանդարտներին( կազմակերպությունը ստեղծում է ստանդարտներ համաշխարհային ցանցի՝ ինտերնետի համար)։ Նշագրման լեզվի հեղինակը Թոմ Բերներսն է։ Լեզուն ստեղծվել է 1986-1991 թվականների ընթացքում․ հիմակ առկա է Html-5.1 տարբերակը(2012-2016թ․-ականներին)։

Էլեմենտներ

Էլեմենտը բաղկացած է բացվող տեգից, պարունակությունից և փակվող տեգից։ Պարունակությունը, որը գտնվում է բացվող և փակվող տեգերի միջև, պատկերվում է բրաուզերի էկրանին։

Բացվող տեգ – բաղկացած է էլեմենտի անունից, որը վերցված է անկյունաձև փակագծերի մեջ․ նշում է թե որտեղ է սկսվում էլեմենտը:

Փակվող տեգ – նույնն է, ինչ բացվող տեգը․ պարունակում է նաև առանձնացնող թեք գիծ։ Նշում է թե որտեղ է ավարտվում էլեմենտը։

Html փաստաթղթի կառուցվածքը՝

<html> էլեմենտը հանդիսանում է կոնտեյներ, որն իրենում ընդգրկում է փաստաթղթի ամբողջ պարունակությունը՝ ներառյալ <head> և <body> էլեմենտները։

<head> էլեմենտն իրենում պարունակում է տվյալներ էջի մասին՝ ինչոր հասցեներ կամ փաստաթղթին կցվող արտաքին ֆայլեր(օրինակ Javascript-ի առանձին ֆայլեր) և այլն։

<body> էլեմենտն ընդգրկում է այն ամենը ինչը պատկերվելու է բրաուզերի էկրանին։
Բոլոր տեգերը պետք է գրվեն փոքրատառ։

Կան երկու տեսակի էլեմենտներ՝ բլոկ տեսակի(блочный) և տողային(строчниый)։

Բլոկ տեսակի էլեմենտներից են՝
<div>, <p>, <h1>, <h6> և այլն։

Տողային էլեմենտներից են՝ <a>, <span>, <code> և այլն։

Բլոկները կարող են պարունակել տողային էլեմենտներ։ Դրանք ուղղանկյան տեսք ունեն և կանխադրված(default / по умолчанию, նախապես սահմանված) ժամանակ ընդգրկում են տողի ամբողջ երկարությունը, իսկ լայնությունը որոշվում է ըստ պարունակության։

Հետևյալ օրինակում margin-ը էլեմենտի արտաքին սահմանն է(отступ), padding-ը՝ ներքին լիցքը, իսկ border-ը բլոկի եզրագծերն են։

Ինչպես ասացինք, բլոկներն իրենցում կարող են ընդգրկել թե բլոկներ և թե տողային էլեմենտներ, բայց տողայինները չեն կարող ընդգրկել բլոկներ․
Ճիշտ են՝

Տողային էլեմենտները նրանք են, որոնք հանդիսանում են մեկ այլ էլեմենտի մասը և օգտագործվում են տեքստի որոշ մասեր փոխելու համար(օրինակ՝ <a> տողային էլեմենտի միջոցով տեքստի որոշ մասին կկցվի հասցե և կդառնա այն հղում(ссылка))։
Բլոկ և տողային էլեմենտների տարբերությունները՝
-Տողային էլեմենտները կարող են պարունակել այլ տողայիններ, բայց ոչ բլոկներ․
-Տողային էլեմենտների երկարությունը որոշվում է իր պարունակությամբ, իսկ բլոկները կանխադրված(default / по умолчанию, նախապես սահմանված) ժամանակ ընդգրկում են տողի ամբողջ երկարությունը։
-Բլոկների չափերը փոփոխվում են, իսկ տողայիններինը՝ ոչ։

Ամբողջական html փաստաթուղթը կունենա հետևյալ տեսքը՝
<!– …․․․․․ –> –երկու զույգ գծիկով։ նշվում է մեկնաբանություններ(комментарии): Մեկնաբանությունները երևում են միայն html փաստաթղթում։ Դրանք ավելացվում են հուշումների համար։ Օրինակ նշվում է, թե կոդի տվյալ հատվածը ինչի համար է նախատեսված։

<!DOCTYPE html> – սահմանում է փաստաթղթի տեսակը և տարբերակը։ Եթե նշված է միայն « html », ապա դա html-5 տարբերակն է։

<html lang=”hy”> – մնացած էլեմենտների հիմնական կոնտեյներն է, իսկ ատրիբուտը(lang=”hy”), տեղեկացնում է բրաուզերին, որ էջի պարունակությունը հայերեն է։

<head> – տեղադրվում է լրացուցիչ տվյալներ փաստաթղթի վերաբեյալ։

<meta charset=”utf-8″ /> – սահմանում է կոդիրովկեն, որը թարգմանիչ է փոխանցվող սիմվոլները համակարգչին հասկանալի դարձնելու համար։

<title>Իմ հաշիվը</title> – բրաուզերը բաղկացած է պատուհաններից․ այն պատուհանը, որը բացելու է փաստաթուղթը, դրա վերնագիրն է ։

</head>

<body> – այստեղ են սահմանվում բոլոր էլեմենտները, որոնք պիտի պատկերվեն էկրանին։

<p>Hello World!</p> – սովորական էլեմենտ է, որտեղ տեքստ է տեղադրվում։
</body>
</html>

<!DOCTYPE>-ը պարտադիր է նշել․ այն պետք է լինի ամենավերևում՝ <html>-ից առաջ։

<!DOCTYPE>-ը չի հանդիսանում էլեմենտ․ այն նախատեսված է html փաստաթղթի տեսակը նշելու համար՝ փաստաթուղթը html-ի ո՞ր տարբերակով է գրված։ Օրինակ html-5 և բարձր տարբերակների համար նշվում է <!DOCTYPE html>։ Բացականչության նշանը( ! ) նախատեսված է այդ տողն առանձնացնելու html-ի մնացած կոդից։ Բացի html-ից կան նաև XHTML-ը, որը նման է html-ին, բայց ունի սինտաքսային տարբերություններ։

<!DOCTYPE html>-ն անհրաժեշտ է նշել, որպեսզի բրաուզերը կողմնորոշվի թե ինչպես պիտի փաստաթուղթը մշակի և html-ի որ տարբերակով։

Լրացուցիչ տեղեկություններ

Որոշ տեգեր Html-4-ից հնացած են համարվում html-5-ի համար։ Դրանք են՝ acronym, applet, basefont, big, center, dir, frame, frameset, font, isindex, noframes, strike, tt, contextmenu:

Կան html էլեմենտներ, ինչպես նաև css-ի հատկություններ, որոնք աջակցվում են ոչ բոլոր բրաուզերների կողմից։ Հետևյալ կայքը նախատեսված է նման դեպերի համար՝
https://caniuse.com/

Ուղղակի նշում ենք html տեգի կամ css հատկության անվանումը( օրինակ <canvas>), և այն պատկերում է բոլոր բրաուզերները․ կանաչում ցույց է տալիս նրանք, որոնք աջակցում են։

Html փաստաթուղթը հնարավոր է ստուգել և գտնել բաց թողնված սխալները.
https://validator.w3.org/#validate_by_upload
Վավերական են այն փաստաթղթերը, որոնք համապատասխանում են վեբ ստանդարտներին, որը տրամադրում է W3 կոնսորցիումը։

Ուղարկում ենք html փաստաթուղթը և կայքը կպատկերի արդյունքը։
html փաստաթուղթը կաշխատի, եթե կոդում չկան սինտաքսային սխալներ, բայց կարող է չհամապատասխանել որոշ ստանդարտներին։
Կարիք չկա համապատասխանեցնել բոլոր ստանդարտներին, բայց կարևոր է տիրապետել Html լեզվին և խուսափել սինտաքսային սխալներից։
Սինտաքսիսը լեզվի խիստ կանոններն են, որին պետք է հետևել․ օրինակ <h1> տեգը, որը տեքստը ցույց է տալիս համեմատած ավելի մեծ և մուգ, հնարավոր չէ h-ի փոխարեն e գրել, անկյունաձև փակագծերի փոխարեն օգտագործել կլոր փակագծեր, կամ փակվող տեգի՝ </h1> թեք գիծը չգրել և այլն։

Notepad++ -ը հիմնական ծրագիրն է սկսնակների համար(Sublime-ն ավելի նախընտրելի է)։ Ներբեռնելու համար անցնել հետևյալ հղումով՝
https://notepad-plus-plus.org/ կամ https://www.sublimetext.com/
« Visual Studio Code » ծրագիրը լավագույնն է փորձառուների համար։ Այն գործն ավելի կհեշտացնի, քանի որ գունավորում է ամբողջ կոդը, կամ տեղեկացնում է սինտաքսային սխալները և այլն։
Ներբեռնելու համար անցնել հետևյալ հղումով՝
https://code.visualstudio.com/

Ինչպե՞ս պատրաստել առաջին html փաստաթուղթը․ նախ անհրաժեշտ է ստուգել, թե արդյոք համակարգչում ակտիվացված է հետևյալ ֆունկցիան՝

Պատրաստելու համար հետևել նկարներին՝

html փաստաթուղթը պատրաստելու համար պատճենել հետևյալ օրինակը՝

				
					<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>Hayti</title>
  </head>
  <body>
    <h1 class="class01" style="color: black">Hello World</h1>
  </body>
</html>

Վերը նշված կոդի օրինակը պատճենելուց(copy) հետո, այն կունենա հետևյալ տեսքը՝