Docy

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

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

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) հետո, այն կունենա հետևյալ տեսքը՝

Սինտաքսը պատկերավոր դարձնելու համար ակտիվացնել հետևյալ ֆունկցիան՝

Արդյունքում կպատկերվի հետևյալ կերպ՝

Թողնել մեկնաբանություն

Կիսվել փաստաթուղթով
ԲՈՎԱՆԴԱԿՈՒԹՅՈՒՆ
hyArmenian