Քո առաջին կայքը՝ ԱԲ-ի օգնությամբ․ քայլ առ քայլ

1. Սահմանեք նպատակը և էջի սահմանները

Գրեք մեկ նախադասություն. «Այս էջը ներկայացնում է իմ ուսումնական աշխատանքները և տալիս է կապվելու եղանակ»։ Որոշեք՝ ում համար է էջը, ինչ հարցի է պատասխանում և ինչ երեք բաժին է պետք։ Պայմանական պորտֆոլիոյի համար բավարար են կարճ ներկայացումը, երկու աշխատանքը և կապի էլեկտրոնային հասցեն։ Մի ավելացրեք վճարումներ, հաշիվներ կամ տվյալներ հավաքող ձև, եթե դրանց սպասարկումը դեռ չունեք։

MDN-ի սկսնակ ուղեցույցը խորհուրդ է տալիս սկսել փոքրից, նախ որոշել բովանդակությունն ու տեսքը, հետո անցնել կոդին։ Գրեք սեփական տեքստը նախքան ԱԲ-ին դիմելը. այդպես գեներացված օրինակները չեն վերածվի չստուգված կենսագրության կամ հորինված արդյունքների։

MDN-ի առաջին կայքի ուղեցույց

2. Տվեք ԱԲ-ին փոքր և ստուգելի առաջադրանք

Օրինակային հարցում. «Պատրաստիր մեկ էջանոց անձնական պորտֆոլիոյի HTML և CSS նախնական տարբերակ։ Բաժինները՝ ներկայացում, երկու աշխատանք, կապ։ Օգտագործիր իմ տրամադրած տեքստը, մի հորինիր փաստեր, պահիր վերնագրերի տրամաբանական հերթականությունը, ապահովիր նեղ էկրանի դասավորություն։ Բացատրիր՝ որ ֆայլում ինչ կա»։ Սա առաջարկվող հարցում է, ոչ փորձարկված արտաքին ԱԲ ծառայության արդյունք։

Սկսնակին բավական են index.html և առանձին style.css ֆայլերը։ HTML-ը նկարագրում է բովանդակության կառուցվածքը, CSS-ը՝ տեսքը։ JavaScript ավելացրեք միայն երբ հստակ գործողություն է պետք։ Խնդրեք ԱԲ-ին բացատրել անծանոթ հատվածը և փոխել մեկ բան միաժամանակ. մեծ, չհասկացված վերագրումը դժվար է ստուգել։

ԱԲ-ով կառուցված նախատիպը ստուգելու ուղեցույց

3. Կարդացեք կոդը և փոխարինեք օրինակները

Բացեք ֆայլերը և գտեք յուրաքանչյուր ցուցադրվող անուն, հասցե, հղում և նկար։ Ջնջեք օրինակային տվյալները, իսկ իրական լուսանկար կամ տեքստ օգտագործեք միայն այն դեպքում, երբ հրապարակման իրավունք ունեք։ Գաղտնաբառեր, մուտքի բանալիներ և անձնական տվյալներ մի փոխանցեք ԱԲ-ին և մի պահեք հրապարակվող ֆայլերում։

GitHub-ի պաշտոնական ուղեցույցը շեշտում է, որ ԱԲ-ի առաջարկած կոդը պետք է վերանայել և փորձարկել. այն կարող է սխալ կամ ոչ անվտանգ լինել։ Սեղմեք բոլոր հղումները, ստուգեք նկարի ուղին և համոզվեք, որ էջում խոստացված գործողությունը իրականում աշխատում է։ Եթե կոդի նպատակը չեք հասկանում, մի հրապարակեք այդ հատվածը։

GitHub-ի կոդի վերանայման ուղեցույց

4. Փորձարկեք էջը որպես այցելու

Բացեք index.html-ը տեղական միջավայրում, հետո ստուգեք նեղ և լայն էկրաններով։ Կարդացեք տեքստը առանց մոտեցնելու, համոզվեք, որ հորիզոնական ոլորում չկա, իսկ հղումները տեսանելի են և բացվում են ճիշտ հասցեով։ Անցեք էջով Tab ստեղնով. ակտիվ հղումը պետք է տեսանելի լինի։ Գլխավոր վերնագիրը թող լինի մեկ h1, իսկ բաժինները՝ հաջորդական վերնագրերով։

Բովանդակություն փոխանցող նկարին գրեք իմաստալից այլընտրանքային տեքստ, զարդարանքին՝ դատարկ alt։ W3C-ի ուղեցույցները բացատրում են վերնագրերի կառուցվածքի և նկարների տարբեր նշանակությունները։ Պայմանական պորտֆոլիոյի համար ստուգեք նաև՝ նշված աշխատանքները բացվո՞ւմ են և կապի հասցեն ճի՞շտ է։

W3C-ի էջի կառուցվածքի ուղեցույց

W3C-ի նկարների ուղեցույց

5. Հրապարակեք միայն այն, ինչ պատրաստ է

Ստատիկ HTML, CSS և JavaScript էջի համար GitHub Pages-ը հրապարակման հնարավոր տարբերակ է. դրա պաշտոնական նկարագրությունը վերաբերում է պահոցից ստատիկ ֆայլերի ցուցադրմանը։ Նախ ստուգեք ծառայության գործող հրահանգներն ու հասանելիության կարգավորումները, ապա հրապարակումից հետո բացեք իրական հասցեն հեռախոսով և համակարգչով։ Տեղական ֆայլի աշխատանքը դեռ չի ապացուցում, որ հրապարակված հղումներն ու նկարները հասանելի են։

Սովորական HTML ձևի նկարելը չի նշանակում, որ հաղորդագրությունները պահպանվում կամ ուղարկվում են. դրա համար պետք է առանձին մշակող ծառայություն և գաղտնիության հստակ կարգավորում։ Սկզբում կարող եք պարզապես ցույց տալ էլեկտրոնային հասցե։ Փոփոխություններից հետո կրկնեք հղումների, ստեղնաշարի և նեղ էկրանի ստուգումները։

GitHub Pages-ի պաշտոնական նկարագրություն

Հաջորդ փոքր քայլը

Երբ առաջին էջը հասանելի է, գրեք երեք դիտարկում՝ ինչն է հասկանալի այցելուին, որտեղ է դժվար գտնել տեղեկությունը, և որ գործողությունն է բացակայում։ Ընտրեք մեկ փոփոխություն, ձևակերպեք այն ԱԲ-ին որպես սահմանափակ առաջադրանք և կրկին ստուգեք արդյունքը։ Այդպես սովորում եք վերահսկել կայքը, ոչ միայն ստանալ մեկ արագ գեներացված տարբերակ։

ԱԲ-ին հստակ հարցումներ տալու օրինակներ

Հաճախ տրվող հարցեր