Ստեղծեք ձեր սեփական կայքը սկսնակների համար. 5 քայլ

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

Անկախ նրանից, թե երբևէ երազե՞լ եք համակարգչային ծրագրավորող լինելու մասին, թե երբևէ օգտվել եք վեբ կայքից, որն ընդունենք, գրեթե բոլորս ենք, տեղեկատվական տեխնոլոգիաները դարձել են բիզնեսի հենարանը: Թեև ծրագրավորումը կարող է սկզբում մի փոքր սարսափելի թվալ, բայց իմ նպատակն է ձեզ սովորեցնել վեբ ձևավորման հիմնական հիմունքները, որպեսզի այս ձեռնարկից հետո դուք կարողանաք ստեղծել ձեր սեփական վեբ էջը: Դրանից դուրս, եկեք դրան հասնենք:

Պարագաներ

• Macintosh կամ Windows համակարգիչ (չնայած Linux- ի տարածումները նույնպես կարող են օգտագործվել, ես առայժմ դրանք բաց եմ թողնում, քանի որ սա սկսնակների ներածություն է):
• Ձեր ընտրած տեքստային խմբագրիչը (Գրառման գրքույկ Windows- ում, TextEdit Mac- ում) կամ ձեր ընտրած IDE- ն: Իմ փորձով ես գտա, որ Visual Studio Code- ն ինձ համար ամենալավն է աշխատում, այնպես որ խորհուրդ կտամ նաև այն ստուգել այստեղ ՝ https://code.visualstudio.com/, չասելով, որ այն աշխատում է բոլոր OS հարթակներում:

Քայլ 1: Պիտակներ և մի փոքր պատմություն

Երբ որոշեք տեքստի խմբագրիչի կամ IDE- ի ընտրությունը, եկեք սկսենք հիմունքներից:

Ուզում եք հավատացեք, ուզում եք ՝ ոչ, HTML- ը կամ HyperText Markup Language- ն արդեն շուրջ 30 տարի է, ինչ ամեն տարի ավելի ու ավելի են բարելավվում լեզուն: Այժմ, գուցե դուք հարցնեք ՝ ինչպե՞ս է զննարկիչը մեկնաբանում այն, ինչ տեղադրել էկրանին: Դա արվում է մի քանի մասում.

HTML փաստաթղթերի ձևաչափումը հեշտ է: Դուք ունեք երկու բաժին, որոնք հայտնի են որպես գլուխ և մարմին: Կայքի գլուխը պարունակում է ծածկագիր, որը տեսանելի չէ օգտագործողի համար: Սա օգտագործվում է ոճաթերթեր կապելու և կայքի պատշաճ ցուցադրման համար անհրաժեշտ այլ անհրաժեշտ բիթեր հայտարարելու համար: Գլխին հետևելով ՝ մարմինը այնպիսին է, ինչպիսին հնչում է, վեբ կայքի մարմինը: Այստեղ դուք կարող եք խոսել ձեր ձայնով և հանդիսատեսին ցույց տալ ձեր HTML ֆանտաստիկ հմտությունները: Այժմ դա այնքան էլ հեշտ չէ, որքան պարզապես տեքստը մուտքագրել մարմնի մեջ և այն ցուցադրել այնպես, ինչպես ուզում ես, բայց դա գրեթե այդքան հեշտ է ՝ այն իրերի օգտագործմամբ, որոնք մենք պիտակներ ենք անվանում:

Ահա մի քանի հիմնական HTML պիտակներ.

• վերնագիր - որն օգտագործվում է դիտարկիչին պատմելու համար, թե որն է էջի անվանումը: Սա նաև այն է, ինչ տեսնում եք, երբ նայում եք վեբ էջի ներդիրին:
• h1, h2, h3, h4 - որոնք օգտագործվում են վերնագրի տարբեր չափերի համար, որոնցից h1- ը ամենամեծն է, իսկ h4- ը `ամենափոքրը: Այս մասին ավելի շատ կանդրադառնամ հաջորդ բաժնում:
• p - պարբերություն, որն օգտագործվում է տեքստի պարբերություններ գրելու համար: Թղթի վրա դրված պարբերությունների նման:
• br - break, որը տեքստին համահունչ ներդնում է ընդմիջում:
• ա - օգտագործվում է այլ էջերի հղումներ ստեղծելու համար, օրինակ ՝ սեղմելի հղում:
• img - օգտագործվում է պատկերը վեբ էջին կապելու համար:
• ul, ol, li - չկարգավորված ցուցակներ, պատվիրված ցուցակներ և ցուցակի տարրեր:
• - օգտագործվում է ծածկագրում ներկառուցված մեկնաբանություններ կատարելու համար, որոնք վերջնական օգտագործողը չի տեսնի:

Եվ ահա CSS- ի որոշ պիտակներ (տեսողական).

• գույն - օգտագործվում է որոշակի գույնի որոշակի տարրին կամ վեբ էջում տեղադրելու համար:
• font-size-օգտագործվում է էջում տառատեսակի չափը փոխելու համար:
• ֆոնային գույն-օգտագործվում է որոշակի տարրի կամ ամբողջ էջի ֆոնի գույնը փոխելու համար:

Ես նաև կցել եմ մի փոքրիկ խաբեբա թերթ, որը կօգնի ձեզ, եթե մի փոքր կորած եք զգում, բայց չանհանգստանաք, շուտով գլուխ կհանեք: Բացի այդ, www.w3schools.com- ը նաև ֆանտաստիկ ռեսուրս է ձեր ծրագրավորման ցանկացած հարցի համար: Նրանք հաստատ ինձ կամ ժամանակ են խնայել:

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

և օգտագործվում են պիտակը փակելու համար, ինչպիսիք են

. Սա կարևոր է, հակառակ դեպքում դիտարկիչը տեղ չունի, որտեղ կանգ առնել: -Ի միջև

եւ

պիտակներ, որտեղ դուք մուտքագրում եք այն, ինչ ցանկանում եք:

Քայլ 2: Խմբագրի կարգավորում

Այժմ, երբ մենք մի փոքր անդրադարձանք HTML վեբ կայքի հիմնական տարրերին, եկեք սուզվենք և փորձենք ինքներս մեզ համար: Այս հաջորդ քայլի համար ես կօգտագործեմ Visual Studio Code- ը ՝ կայքը ծրագրավորելու համար, բայց ծածկագրի դասավորությունը նույնը կլինի, եթե ձեզ ավելի հարմարավետ լինի պարզապես օգտագործել Notepad կամ TextEdit:

Գրառման գրքույկում `

• Գրառման գրքույկով ծրագիրը գործարկվում է դատարկ ֆայլով, ինչը հեշտացնում է դրա մեկնարկը: Սա նաև թույլ կտա մեզ մի քանի քայլ անցնել ՝ համեմատած VS Code- ի օգտագործման հետ: Եկեք սկսենք ՝ ֆայլը պահելով ճիշտ ձևաչափով:
• Կտտացրեք Ֆայլ> Պահել
• Մուտքագրեք ձեր ֆայլի անունը, որին հաջորդում է.html և «Պահել որպես տիպ» բաժնում ընտրեք բոլոր ֆայլերը: Կտտացրեք պահպանել:

VS ծածկագրի շրջանակներում.

• IDE- ի բոլոր հնարավորություններից օգտվելու լավագույն միջոցը սկսելն է ՝ ֆայլը ստեղծելով և IDE- ին պատմելով, թե ինչ տեսակի ֆայլ է դա: Դա կարելի է անել հետևյալ կերպ.
• Կտտացրեք Ֆայլ> Նոր ֆայլ
• Բացվում է դատարկ ֆայլ
• Հաջորդը, դուք կցանկանաք սկսել ֆայլը պահպանելով ՝ չնայած դատարկ, քանի որ դա թույլ կտա IDE- ին կարողանալ հասկանալ, թե վերջնական արտադրանքը ինչ տեսակի ֆայլ է լինելու: Պահելիս անպայման ներառեք.html ընդլայնումը ֆայլի անվան վերջում: Կտտացրեք պահպանել:

Քայլ 3: Նախագծեր

Ձեր filename.html ֆայլը հաջողությամբ պահպանելուց հետո, եկեք սկսենք ՝ ստեղծելով մեր վեբ էջի շրջանակը: Վերևից հիշեք, թե ֆայլի որ հիմնական մասերն ենք պետք հայտարարել, նախքան HTML էջի մնացած մասի ստեղծումը սկսելը: Կայքի շրջանակը գործարկելիս! DOCTYPE HTML պիտակը զննարկիչին ասում է, որ այն կարդացած ֆայլը html ֆայլ է: Սա կարող է օգտակար լինել, եթե նույն ֆայլում ունեք տարբեր տեսակի կոդեր և ցանկանում եք անցնել թարգմանիչների միջև: Այս ուսանելիի շրջանակի համար մենք շատ չենք անդրադառնա դրան, բայց եթե այս հրահանգից հետո դուք հետաքրքրված եք ավելին իմանալու HTML- ի զարգացման մասին, ազատ զգացեք: Լավագույն փորձի համար ֆայլի վերևում կտեղադրեմ! DOCTYPE HTML պիտակը: Հիշեք, որ բացեք և փակեք:

Ահա թե որտեղ է ֆայլը պահել նախքան ծրագրավորում սկսելը, այժմ, երբ IDE- ն գիտի, որ այն աշխատում է HTML ֆայլի հետ, այն intellisense- ով կօգտագործի արտահայտությունը և կառաջարկի առաջարկություններ, որպեսզի պատահաբար չմոռանաք փակել պիտակը. Նկատի ունեցեք, որ ձեզանից նրանք, ովքեր օգտագործում են Notepad, intellisense- ը հասանելի չէ, ինչպես IDE- ում: Մենք սկսում ենք գլխի և մարմնի պիտակները մուտքագրել հետևյալ կերպ. (Տես երկրորդ պատկերը):

Այժմ, երբ փաստաթղթերի տեղադրումն ավարտված է, մենք կարող ենք դուրս գալ մրցումներից և զվարճանալ:

Քայլ 4: Կոդ; Ծածկագիր; Ծածկագիր;

Մենք կարող ենք սկսել ՝ տեղադրելով վերնագիր մեր նոր ստեղծված ֆայլի համար: Մուտքագրեք այն, ինչ ցանկանում եք: Հիշեք, որ սա այն անունն է, որը հայտնվում է զննարկչի ներդիրում: Սկսենք նաև ՝ մուտքագրելով մեր կայքի վերնագիրը: Հիշեք նախկինից, թե ինչպես ենք մենք դա անում: Լսեցի՞ h1/2/3/4 -ը: Դա ճիշտ է!

Շարունակելուց առաջ օգտակար եմ համարում մեր ֆայլը բացել զննարկչի պատուհանում, որպեսզի իրական ժամանակում տեսնենք, թե ինչպես են մեր փոփոխություններն արտացոլվում բրաուզերում: Դուք կարող եք դա անել ՝ կտտացնելով Ֆայլ> Պահել ՝ ֆայլը պահելու համար, նավարկելով դեպի այն թղթապանակը, որում պահվում է HTML ֆայլը, ինձ համար սա աշխատասեղան է, և ֆայլը բացելու համար օգտագործեք ձեր ընտրած դիտարկիչը:, ահա ձեր կայքը Նշում. Ես անձամբ Safari- ն օգտագործում եմ որպես իմ ընտրած դիտարկիչ իմ համակարգչում, սակայն վեբ ծրագրավորման ընթացքում Firefox- ը փորձարկման ոսկե ստանդարտ դիտարկիչն է, քանի որ այն աշխատում է վեբ գրագրման գրեթե բոլոր լեզուներով:

Ինչպես տեսնում եք, վերնագիրը ցուցադրվում է ներդիրում, ինչպես նաև տեսնում ենք մեր h1 վերնագիրը: Նախընտրում եմ, որ ֆայլի զննարկչի պատուհանը բացվի IDE- ի կողքին, քանի որ երբ IDE- ում փոփոխություն ես կատարում և պահում, փոփոխությունները ակնթարթորեն տեղի են ունենում բրաուզերում:

Ազատորեն փորձեք ավելացնել պիտակներ և խաղացեք տարբեր բաների հետ, որոնք կարող եք անել HTML- ով: Ինչպես տեսնում եք ստորև, ես մի քանի պարբերություն, ընդմիջումներ, արտաքին հիպերհղում եմ ավելացրել Instructables.com- ին, պատկեր (որը կարող է կապված լինել արտաքին աղբյուրից կամ նույն գրացուցակից, որտեղ պահվում է. HTML ֆայլը), անկանոն ցուցակի օրինակ, պատվիրված ցուցակ և վերջապես մեկնաբանություն:

Եթե ցանկանում եք փորձել ավելացնել որոշ գույն և դասավորության ընտրանքներ, կարող եք ֆայլի գլխում մուտքագրել ոճի պիտակ: Սա այն կետն է, որտեղ սա HTML- ից անցնում է CSS- ի, բայց տեսողական նպատակների համար ես մի քանի տող կմտնեմ, որպեսզի տեսնեք, թե ինչպես է դա աշխատում: Ըստ էության, թե ինչպես է աշխատում CSS- ը, այն թույլ է տալիս վերահսկել HTML տարրերը գործառույթների մեջ ՝ օգտագործելով փակագծեր {} ՝ հատուկ HTML տարրի համար ձեր կոդը մուտքագրելու համար:

Քայլ 5: Վերջնական մտքեր

Եվ ահա դուք ունեք այն. դուք հաջողությամբ ստեղծեցիք ձեր առաջին վեբ էջը: Քանի որ սա սկսնակների ուղեցույց է, ես ուզում եմ HTML- ի հետ ձեր առաջին փորձը հաճելի դարձնել: Իմ փորձով սովորելու լավագույն միջոցն է սուզվելը և ձեռքով փորձելը, տեսնել, թե ինչ կարող ես անել քո ծածկագրի հետ, ինչպես նաև տեսնել, թե ինչպես կարող ես կոդդ կոտրել: Սա կառուցում է ամբողջականություն և օգնում է ձեզ ավելի լավ հասկանալ, թե ինչպես և ինչու է ծածկագիրն աշխատում այնպես, ինչպես դա անում է: Հիշեք, որ www. W3Schools.com- ը հիանալի ռեսուրս է հարցերի համար, և դրանք նույնիսկ վիրտուալ ավազատուփ են առաջարկում բրաուզերում `ձեր կոդը փորձարկելու համար: Հուսով եմ, որ դուք ինչ -որ բան եք սովորել և ուրախ կոդավորում: