Ստեղծեք ձեր առաջին կայքը ՝ 10 քայլ

2024 Հեղինակ: John Day | [email protected]. Վերջին փոփոխված: 2024-01-30 09:46

Այս ձեռնարկում դուք կսովորեք կառուցել հիմնական վեբ էջ, որն ունի կապված ոճաթերթ և ինտերակտիվ javascript ֆայլ:

Քայլ 1: Ստեղծեք ձեր պանակը

Ստեղծեք թղթապանակ այն ֆայլերի համար, որոնք մենք կստեղծենք պահելու համար: Ազատորեն անվանեք այն, ինչպես ցանկանում եք, պարզապես հիշեք, թե որտեղ է այն գտնվում, քանի որ մենք հետագայում ֆայլեր ենք պահելու դրանում:

Քայլ 2: Ստեղծեք ձեր առաջին ֆայլը

Բացեք ձեր նախընտրած տեքստային խմբագրիչը: Իմ դեպքում ես պարզապես կօգտագործեմ Windows 10 -ի ներկառուցված նոթատետրը: Նոր ֆայլ ստանալուց հետո մուտքագրեք հետևյալը.

Սա իմ առաջին վեբ էջն է, որը ձեզ է բերել ուսուցանող:

Սա այն է, ինչ հայտնի է որպես HTML պիտակ: Այն նշանակում է Վերնագիր 1. Տեքստը, որը մենք դնում ենք այս պիտակի մեջ, կցուցադրվի որպես վերնագիր էջում: Այն բացվում ու փակվում է այսպես. Երկու պիտակների միջև եղած տեքստն այն է, ինչ կցուցադրվի ձեր վեբ դիտարկիչում: Այն հատվածը, որն ասում է, այդ հատկորոշիչին տալիս է հատկանիշ, որին մենք կանդրադառնանք x քայլում: Երբ դա արվի, շարունակեք և ֆայլը պահեք այն թղթապանակում, որը մենք պատրաստել ենք 1 -ին քայլում, որպես index.html:

Քայլ 3: Բացեք ֆայլը

Այժմ, երբ մենք ավարտեցինք նավարկումը մեր ստեղծած թղթապանակի մեջ, աջ սեղմեք ֆայլի վրա և ընտրեք «բացել» տարբերակը և ընտրեք ձեր օգտագործած վեբ դիտարկիչը: Իմ դեպքում սա google chrome է: Հիմա դիտեք մինչ այժմ ձեր քրտնաջան աշխատանքը:

Քայլ 4: Ձեր էջի ձևավորում

Ինչպես որ կա, մեր կայքը բավականին պարզ է: Մենք մտադիր ենք ավելացնել այն, ինչ հայտնի է որպես կասկադային ոճի թերթիկ `իրերը մի փոքր համեմելու համար: Ստեղծեք նոր տեքստային ֆայլ և մուտքագրեք հետևյալը.

h1 {գույնը ՝ կապույտ; text-align: center;}

Այն, ինչ մենք այստեղ ասում ենք դիտարկիչին, այն է, որ գտնել h1 պիտակի ցանկացած տարր (որի մասին մենք իմացանք 2 -րդ քայլում) և տալ կապույտ գույն և այն հավասարեցնել էջի կենտրոնում: Այս ֆայլը պահեք այն թղթապանակում, որը մենք ստեղծել ենք 1 -ին քայլում, որպես style.css:

Քայլ 5. Կապեք Style.css- ը ձեր Index.html- ին

Այս պահին մենք ունենք երկու առանձին ֆայլեր, որոնք չգիտեն միմյանց մասին: Մենք պետք է մեր index.html ֆայլին ասենք, որ մենք ունենք style.css ֆայլ, որին ցանկանում ենք, որ այն վերաբերվի և որոշ ոճավորում վերցնի: Դա անելու համար մենք պատրաստվում ենք բացել մեր index.html ֆայլը մեր տեքստային խմբագրիչում, իսկ մեր h1 պիտակի վերևում մենք կավելացնենք այն, ինչ հայտնի է որպես հղման պիտակ: Հղման պիտակը կատարում է այնպես, ինչպես ենթադրում է իր համանունը, այն կապում է ինչ -որ բանի: Մեր դեպքում ոճաթերթ: Շարունակեք և մուտքագրեք: Հղման պիտակը ինքնափակող պիտակ է, ուստի վերջնական պիտակը պարտադիր չէ: Rel- ը նշանակում է հարաբերություն, իսկ href- ը պատմում է ինդեքսի ֆայլին, որտեղ գտնվում է մեր արտաքին ֆայլը, որին մենք հղում ենք կատարում: Այժմ պահպանեք այդ index.html ֆայլը:

Քայլ 6: Դիտեք ձեր նոր ոճավորված էջը:

Վերանայեք 3 -րդ քայլը և վերբեռնեք ձեր վեբ էջը և նայեք, թե ինչպես են արտացոլվում փոփոխությունները:

Քայլ 7: Ստեղծեք կոճակ

Վերաբացեք ձեր index.html ֆայլը ձեր տեքստային խմբագրիչում և մուտքագրեք հետևյալը.

Սեղմիր ինձ!

և պահպանել ֆայլը: Սա էջում ստեղծում է կոճակի տարր: Պահվելուց հետո վերաբացեք ֆայլը, ինչպես ցույց է տրված 3 -րդ քայլում և համոզվեք, որ կոճակը գտնվում է ձեր էջի ներքևի ձախ մասում:

Քայլ 8: Ստեղծեք ձեր Javascript ֆայլը

Ի վերջո, մենք պատրաստվում ենք ստեղծել մեր javascript ֆայլը: Սա այն է, ինչը մեր կայքը կդարձնի ինտերակտիվ: Բացեք տեքստային խմբագիր և մուտքագրեք հետևյալը.

document.querySelector («#կոճակ»): addEventListener («սեղմել», գործառույթ () {

document.querySelector ("#վերնագիր"). innerText = "Վերնագիրը փոփոխելիս"

})

Այն, ինչ մենք անում ենք, փաստաթղթից խնդրելն է մեզ գտնել կոճակի ID- ով տարր, և մենք կստանանք, որ կոճակը պատասխանի սեղմման իրադարձությանը `վերնագրի ID- ով տարրերի տեքստը փոխելով« Փոխելով վերնագիրը թռիչքի ժամանակ » . Պահպանեք ֆայլը որպես button.js ՝ այն քայլում, որը մենք ստեղծել ենք Քայլ 1 -ում:

Քայլ 9. Կապեք ձեր Javascript- ի և ինդեքսի ֆայլերը

Ինչպես արեցինք style.css ֆայլի դեպքում, մենք պետք է մեր index.html ֆայլին պատմենք մեր javascript ֆայլի մասին: Այն ամենի ներքևում, ինչ մենք արել ենք մինչ այժմ, մուտքագրեք հետևյալը.

Սցենարի պիտակը թույլ է տալիս ավելացնել սցենարային լեզու (մեր դեպքում `javascript)` մեր էջին ֆունկցիոնալություն ապահովելու համար: Մենք ասում ենք նրան, որ փնտրենք button.js անունով ֆայլ և դրա մեջ պարունակվող ամբողջ ծածկագիրը ավելացնենք մեր ինդեքսի ֆայլում: Երբ մուտքագրեք այն, պահեք ֆայլը և նորից բացեք ֆայլը, ինչպես ցույց է տրված 3 -րդ քայլում:

Քայլ 10: Փորձարկեք նորաստեղծ կոճակը

Այժմ շարունակեք և կտտացրեք կոճակին և դիտեք վերնագրի փոփոխությունը:

Շնորհավորում եմ !! Դուք այժմ ստեղծել եք ձեր առաջին ինտերակտիվ վեբ էջը: Հետաքրքիր է, որքա՞ն հեռու կարող եք դա տանել ՝ իմանալով այն, ինչ այժմ գիտեք: