Ինչպես դիտել HTML- ի աղբյուրը Google Chrome- ում

Իմացեք, թե ինչպես է կայքը կառուցվել, դիտելով իր սկզբնական կոդը

Երբ ես առաջին անգամ սկսեցի իմ կարիերան որպես վեբ դիզայներ, ես շատ բան սովորեցի `վերանայելով այլ վեբ դիզայներների աշխատանքը, որոնց հիացա: Ես այս հարցում միայնակ չեմ: Անկախ նրանից, թե դուք նոր եք վեբ արդյունաբերության կամ փորձառու վետերանների կողմից, դիտելով տարբեր վեբ էջերի HTML աղբյուրը , ձեզնից շատ բան կարող եք անել ձեր կարիերայի ընթացքում:

Նրանց համար, ովքեր նոր են վեբ դիզայնի համար, դիտելով կայքի կոդով կոդը ամենադյուրին եղանակներից մեկն է, տեսնել, թե ինչպես են որոշակի բաներ կատարվում, որպեսզի դուք կարողանաք սովորել այդ աշխատանքից եւ սկսեք օգտագործել որոշակի կոդ կամ տեխնիկա ձեր սեփական աշխատանքում: Որպես ցանկացած վեբ դիզայներ այսօր աշխատում է, հատկապես նրանք, ովքեր եղել են արդյունաբերության մեջ առաջին օրվանից սկսած, եւ դա ապահով խաղադրույք է, որ նրանք պատմում են, թե նրանք սովորել HTML- ն պարզապես դիտելով վեբ-էջերի աղբյուրը, որոնք նրանք տեսել են եւ հետաքրքրվել կողմից: Բացի վեբ դիզայնի գրքերից կամ պրոֆեսիոնալ կոնֆերանսների ընթերցումից , կայքի կոդի կոդը դիտելը հիանալի միջոց է սկսնակների համար HTML- ի սովորելու համար:

Ավելին `պարզապես HTML- ից

Մի բան հիշելն այն է, որ սկզբնական ֆայլերը կարող են շատ բարդ լինել (եւ ավելի բարդ է դիտել այն կայքը, այնքան ավելի բարդ է, որ կայքի կոդն ամենայն հավանականությամբ կլինի): Բացի HTML կառուցվածքից, որը կազմում եք էջը, դուք կստանաք նաեւ CSS (կախարդական ոճաթերթեր), որոնք թելադրում են այդ կայքի տեսողական տեսքը: Բացի այդ, շատ կայքեր այսօր կներառեն HTML- ի հետ միասին ընդգրկված սցենարներ:

Հնարավոր է, որ բազմակի սցենարների ֆայլերը ներառվեն, ըստ էության, յուրաքանչյուրը, որն ապահովում է կայքի տարբեր կողմերը: Անկեղծ ասած, կայքէջի կոդը կարող է թվալ ճնշող, հատկապես, եթե դուք նոր եք դա անում: Մի հիասթափվեք, եթե չկարողանաք պարզել, թե ինչ է տեղի ունենում այդ կայքում: HTML- ի աղբյուրը դիտելը հենց այս քայլի առաջին քայլն է: Մի փոքր փորձով, դուք սկսում եք ավելի լավ հասկանալ, թե ինչպես են այս բոլոր կտորները տեղավորվում միասին ստեղծել ձեր դիտարկիչում տեսած կայքը: Քանի որ դուք ավելի լավ ծանոթ եք օրենսգրքին, դուք կկարողանաք ավելի շատ բան սովորել դրանից, եւ դա ձեզ չի դառնա:

Այսպիսով, ինչպես եք դիտում կայքի կոդը: Ահա քայլ առ քայլ հրահանգներ `դա անել Google Chrome բրաուզերի միջոցով:

Քայլ առ քայլ հրահանգներ

1. Բացեք Google Chrome- ի վեբ-բրաուզերը (եթե դուք չունեք Google Chrome, սա անվճար ներբեռնումը):
2. Նայիր վեբ էջին, որը կցանկանայիք ուսումնասիրել :
3. Հպեք էջը եւ նայեք ցանկի ընտրացանկին: Այս ընտրացանկից կտտացրեք Դիտել էջի աղբյուրը :
4. Այս էջի կոդը այժմ դիտարկվում է որպես նոր էջանիշ:
5. Alternatively, Դուք կարող եք նաեւ օգտագործել CTRL + U- ի ստեղնաշարի դյուրանցումները, համակարգչի վրա բացելու պատուհանի բացված կայքի կոդով: Mac- ում այս կարճուղին հրամանատար + Alt + U է :

Հեղինակային գործիքներ

Բացի Google Chrome- ի պարզ դիտարկման հնարավորությունից, դուք կարող եք նաեւ օգտվել իրենց գերազանց Developer Tools- ից, նույնիսկ ավելի խորը տեղում տեղադրելու համար: Այս գործիքները թույլ կտան ոչ միայն տեսնել HTML- ը, այլ նաեւ CSS- ը, որը վերաբերում է այդ HTML փաստաթղթում տարրեր դիտելու համար:

Chrome- ի մշակող գործիքների օգտագործման համար `

1. Google Chrome- ը բացեք:
2. Նայիր վեբ էջին, որը կցանկանայիք ուսումնասիրել :
3. Զննարկչի պատուհանի վերին աջ անկյունում կտտացրեք պատկերակը երեք գծերով :
4. Ընտրացանկից սավառնել ավելի գործիքներ եւ այնուհետեւ կտտացրեք մշակող գործիքները , որոնք հայտնվում են ցանկում:
5. Սա կբացվի պատուհան, որը ցույց է տալիս կոդի սկավառակի ձախ կողմում HTML- ի կոդը եւ աջ կողմում գտնվող CSS- ն:
6. Այլապես, եթե ճիշտ եք սեղմել վեբ էջի տարրը եւ ընտրեք Ընտրեք այն մենյուից, որը հայտնվում է Chrome- ի մշակող գործիքների մեջ, եւ ընտրված ճշգրիտ տարրը կցուցադրվի HTML- ում `համապատասխան աջ կողմում ցուցադրված համապատասխան CSS- ով: Սա սուպեր օգտակար է, եթե ցանկանում եք ավելին իմանալ, թե ինչպես է ստեղծվել մեկ կայքի որոշակի հատված:

Դիտում Source Code- ի իրավունքը:

Տարիների ընթացքում ես շատ նոր վեբ դիզայներներ ունեի, կասկածի տակ առնենք, թե արդյոք ընդունելի է դիտել կայքի կոդի կոդը եւ օգտագործել այն իրենց կրթության համար եւ, ի վերջո, այն աշխատանքի համար, որ նրանք անում են: Կայքի կոդն արտատպելուց եւ այն անցնելուց հետո, որպես ձեր սեփական կայքում, անընդունելի չէ, օգտագործելով այդ կոդը որպես դասավանդման սովորելու համար, փաստորեն, թե քանի առաջընթաց է կատարվում այս ոլորտում:

Ինչպես ես նշեցի այս հոդվածի սկզբում, դժվար կլիներ, որ այսօր աշխատանքային վեբ-պրոֆեսիոնալ գտնեք, ով ինչ-որ բան չի սովորել, դիտելով կայքի աղբյուրը: Այո, կայքի օրինակի կոդը դիտելը օրինական է: Օգտագործելով այդ կոդը որպես ռեսուրս նման բան կառուցելու համար նույնպես լավ է: Կոդն ընդունելը եւ այն անցնելը, քանի որ ձեր աշխատանքն այն է, որտեղ դուք սկսում եք խնդիրներ առաջանալ:

Ի վերջո, վեբ մասնագետները սովորում են միմյանցից եւ հաճախ բարելավում են այն աշխատանքը, որին նրանք տեսնում են եւ ոգեշնչված են, այնպես որ մի հապաղեք դիտեք կայքի կոդով եւ օգտագործեք այն որպես ուսուցման գործիք: