• en
  • hy

Ինչպես սովորել Վեբ ծրագրավորում

Մենք սկսում ենք անվճար վիդեոդասերի շարք, որտեղ ձեզ ցույց կտանք՝ ինչպե՞ս սովորել վեբ ծրագրավորում և  կատարել ձեր առաջին քայլերը ծրագրավորման ոլորտում: Այս հետաքրքիր և մատչելի բացատրությամբ վիդեոդասերը նախատեսված են թե՛ սկսնակների, թե՛ ոլորտից տեղյակ մարդկանց համար։ Մեր օնլայն անվճար կուրսերը մեծ հնարավորություն են ստեղծում տվյալ ոլորտով հետաքրքրված անձանց համար։ Հավաստիացնում ենք, որ ամբողջական վիդեոկուրսից հետո՝ դուք ինքնուրույն կկարողանաք կայքեր պատրաստել։

Ինչու՞ սովորել վեբ ծրագրավորում

Վեբ ծրագրավորումը ներկայումս Հայաստանյան աշխատաշուկայում ամենամեծ պահանջարկ ունեցող մասնագիտություններից է։ Այն մշտապես ունի բազում թափուր աշխատատեղեր: Մասնավորապես, աշխատանքի հայտարարություններում զգալի մաս են կազմում՝ «Փնտրում ենք վեբ ծրագրավորող», «php ծրագրավորող» կամ «web developer» հայտարարությունները: Եթե ցանկանում եք ձեր ուժերը փորձել այս ոլորտում, ունենալ մշտական և բարձր վարձատրվող աշխատանք, ապա հետևեք այս և հետագա վիդեոդասերին:

Inchu Sovorel Web Cragravorum

Ի՞նչ է վեբ ծրագրավորումը

Նախ եկեք հասկանանք թե ինչ է վեբ ծրագրավորումը: Համոզված եմ՝ բոլորդ էլ այցելում եք տարբեր տեսակի վեբ կայքեր՝ սոց. ցանցեր,ժամանցային, լրատվական կայքեր, օնլայն խանութներ և այլն: Այդ բոլոր տեսակի կայքերի ստեղծմանը հիմնականում մասնակցում են երկու ոլորտի մասնագետներ՝ վեբ դիզայներներ և վեբ ծրագրավորողներ: Վեբ դիզայները նախագծում է կայքի էջերը գրաֆիկական ծրագրերից որևէ մեկով, օրինակ՝ Photoshop ծրագրով, հաշվի առնելով կայքի նպատակը, պատվիրատուի պահանջները, բրենդային գույները, օգտագործելու հարմարավետությունը և այլն: Կայքի էջերի տեսքը ստեղծելուց հետո գործի է անցնում վեբ ծրագրավորողը, ով նախագծված դիզայնը վերածում է ֆունկցիոնալ կայքի, որոնցից էլ մենք կարողանում ենք օգտվել:

Web ծրագրավորումը բաժանվում է երկու հիմնական մասերի՝ front-end development և back-end development։ Front-end development-ը դա կայքի առաջնային մասի ստեղծման գործընթացն է, երբ վեբ դիզայների կողմից տրված դիզայնը վերածվում է վեբ էջի։ Իսկ ահա back-end development-ը՝ դա կայքի ներքին, ֆունկցիոնալ մասի ծրագրավորումն է՝ օրնակ կայքում գրանցվելու , գնումներ կատարելու, հաղորդագրություններ գրելու և այլ գործողություններ։

Ստեղծենք մեր առաջին վեբ էջը

Առաջին քայլերը անելու համար եկեք ստեղծենք մեր առաջին վեբ էջը: Վեբ էջերը .html վերջավորությամբ ֆայլերն են, որոնք ստեղծելու համար կարող ենք օգտվել մեր համակարգչում առկա որևե տեքստային դիտարկչից: Օրինակ windows-ում notepad կամ macos – ում TextEdit ծրագրերից: Windows-ով և MacOS-ով աշխատող համակարգիչներում Ֆայլերի ստեղծման գործընթացին կարող եք ծանոթանալ հոլովակում : Ահա այս ֆայլի մեջ էլ գրելու ենք մեր html կոդը: Մեր գրած կոդի արդյունքը տեսնելու համար՝ մեր ստեղծած ֆայլը պետք է բացել առկա դիտարկիչներից որևե մեկի միջոցով, օրինակ Google Chrome:

HTML լեզու

Ինչպես խոսակցական լեզուներ սովորելիս, այնպես է  html լեզուն սովորելու համար, նախ պետք է սովորենք այբուբենը: Html-ի այբուբենը կազմում են տեգերը: Դրանք ունեն այսպիսի գրելաձև՝

Այդ դեպքում տեգը input անունով տեգն է, որը իրենից ներկայացնում է մուտքի էլեմենտ, տեքստային տաշտ:
Html-ում գոյություն ունեն տարբեր անուններով տեգեր, որոնցից յուրաքանչյուրը էջի վրա կատարում է ինչ-որ փոփոխություն՝ որոշները վիզուալ, որոշները ոչ վիզուալ:
Հաջորդ տեգը button տեգն է, սակայն ի տարբերություն input-ի այն բաղկացած է ոչ թե միայն մի մասից, այլ երկու, որը գրվում է այսպես՝

Առաջին մասը անվանում ենք տեգի բացվող մաս, մյուսը՝ փակվող մաս: Եթե տեգի բացվող և փակվող մասերի արանքում գրում ենք ինչ-որ տեքստ, ապա կասենք, որ տեքստը գրված է այդ տեգի մեջ: Մեր դեպքում button տեգի մեջ գրում ենք տեքստ, որը այն տեքստ է, որը պետք է ցուցադրվի կոճակի վրա:
Մի տեգի մեջ բացի տեքստ դնելուց հնարավոր է տեղադրել մեկ ուրիշ տեգ ևս: Այդ դեպքում ասում ենք, որ մի տեգը իր մեջ պարունակում է մեկ այդ տեգ: Շուտով կտեսնեք այդպիսի շատ օրինակներ:

HTML-ի հիմնական տեգերը

Հիմա երբ գաղափար ունենք թե ինչ են տեգերը, կարող ենք անցնել վեբ էջի ստեղծմանը: Յուրաքանչյուր էջ պետք է վերևում ունենա հետևալ գրությունը

որը browser-ին ասում է , որ նա գործ ունի html տեգերի հետ, այլ ոչ թե սովորական տեքստի: Այնուհետը գալիս է html տեգը, իսկ բոլոր մնացած տեգերը պետք է գրել html տեգի մեջ:html-ի մեջ անմիջապես գրվում են 2 տեգեր – head և body: Head-ի մեջ գրվում են այն տեգերը, որոնք չպետք է ցուցադրվեն էջի հիմնական մասում կամ ունեն ինֆորմացիոն բնույթ: Իսկ body-ի մեջ գրվում են այն տեգերը, որոնք պետք է ցուցադրվեն էջի հիմնական մասում:

Օրինակ head տեգի մեջ գրել ենք title տեգը, որը նախատեսված է բրաուզերում էջի վերնագիրը տպելու համար: Իսկ քանի որ մենք ուզում ենք էջի վրա տեսնել մուտքի դաշտը և կոճակը, նրանց գրում ենք body-ի մեջ:

Տեգերի ատրիբուտներ

Html-ի կարևորագույն հասկացություններից են տեգերի ատրիբուտները:Տեգերի ատրիբուտները օգտագործվում են տեգերին հավելյալ ինֆորմացիա հաղորդելու համար:Օրինակ input տեգը նախատեսված է տարբեր տեսակի մուտքային էլեմենտներ տպելու համար:Այլ լռելյայն տպում է տեքստային դաշտը, սակայն նրան կարող ենք ասել, որ մենք ցանկանում ենք այլ մուտքային էլեմենտ: Դա անում ենք տեգի ատրիբուտի միջոցով: Օրինակ ՝

Այստեղ ատրիբուտի անունը “type” է, իսկ ատրիբուտի արժեքը՝ “text”: Որպես “type” ատրիբուտի արժեք կարող ենք գրել օրինակ “password”, որպեսզի ցուցադրենք գաղտնաբառի մուտքագրման դաշտ, կամ օրինակ “checkbox”, “file”, “radio” և այլն: Այս բոլոր դեպքերում մենք կտեսնենք տարբեր տեսակի մուտքային էլեմենտներ, որոնք կարող ենք օգտագործել մեր էջի վրա:

Տարբեր տեգեր ընդունում են տարբեր ատրիբուտներ ՝ մեկ կամ մեկից ավելի: Դրանք բոլորը տեգին հաղորդում են հավելյալ ինֆորմացիա ՝ որոնց նշանակությունը կտեսնենք հետագա հոլովակներում:

Նկարներ և հղումներ

Դժվար է պատկերացնել որևէ վեբ կայք կամ վեբ էջ առանց նկարների և հղումների: Հաջորդ երկու տեգերը լինելու են հենց նրանք:

Նկար ավելացնելու համար օգտագործում ենք img տեգը, որը իր src ատրիբուտի միջոցով պահանջում է նկարի տեղը:

“src” ատրիբուտի արժեքը պետք է լինի նկարի հասցեն: Եթե նկարը և մեր ֆայլը գտնվում են նույն տեղում, ապա դա կլինի նկարի անունը:

Հղումները ստեղծվում են a տեգի միջոցով, որին պետք է փոխանցենք հղման հասցեն “href” ատրիբուտի միջոցով:

Տեգի միջի տեքստը լինում հենց այն՝ ինչը տեսնում է օգտագերը, և որի վրա սեղմելուց գնում է “href” ատրիբուտի միջոցով տրված հասցեյով:

Հաջորդ դասին

Այսպիսով մենք ստեղծեցինք մեր առաջին վեբ էջը, և նրա վրա ավելացրեցինք մի քանի էլեմենտներ: Իհարկե այն դեռևս չունի այն տեսքը, որը մենք կցանկայինք, սակայն ինչպես նշել էինք վիդեոդասի սկզբում՝ html-ը ստեղծված է էլեմենտները էջի վրա տեղադրելու համար, իսկ նրանց ավելի գեղեցիկ տեսք տալու համար օգտվելու ենք css լեզվից, որին կծանոթանանք հաջորդ անվճար վիդեոդասերի ընթացքում: Հուսով եմ ձեզ հետաքրքրեց վեբ ծրագրավորման հիմունքները, իսկ եթե ձեզ անհասկանալի կամ բարդ թված մեր գրած կոդը, ապա հաջորդ մի քանի հոլովակներից հետո կկարողանաք վարժ կերպով գրել այս և ավելի բարդ կոդեր:
Մեկնաբանություններում կարող եք գրել ձեր կարծիքը, հարցերը և առաջարկները: Ձեզ հետ Վահե Աբելյանն էր, կհանդիպենք հաջորդ վիդեոդասի շրջանակներում:

Please Vote Here
[Total: 1 Average: 5]

Leave a Reply

Your email address will not be published. Required fields are marked *