HTML-ի և CSS-ի ներածություն դիզայներների համար: Որպես գրաֆիկական դիզայներ, դուք հավանաբար տեղյակ եք դիզայնի և տեխնոլոգիայի միջև անընդհատ զարգացող հարաբերությունների մասին: Սա հատկապես ճիշտ է վեբ դիզայնով զբաղվողների համար: Այս ոլորտում մենք պետք է հիմնական պատկերացում ունենանք, թե ինչպես են մեր խնամքով մշակված դասավորությունները դառնում կենդանի վեբ էջեր: Երբ մենք հասկանում ենք այս գործընթացի հիմունքները (և դրա սահմանափակումները), մենք կարող ենք ճշգրիտ շփվել մշակողների հետ և ստեղծել կայքերը կատարյալ պիքսել.
Սա չի նշանակում, որ դուք պետք է իմանաք, թե ինչպես կոդավորել կայքը վերևից ներքև (չնայած դա հիանալի կլիներ), դա պարզապես նշանակում է, որ դուք պետք է հասկանաք հիմունքները: Այս գրառման մեջ մենք կսկսենք HTML-ի շատ հիմնական ներածությունից: Դուք կսովորեք, թե ինչպես կտրել վեբ դիզայնը Photoshop-ում և ձևաչափել HTML-ը՝ օգտագործելով CSS: HTML-ի և CSS-ի ներածություն դիզայներների համար
Ինչ է HTML-ը:
Գրեթե այն ամենը, ինչ տեսնում եք համացանցը զննարկելիս, հիպերտեքստի նշագրման լեզվի (HTML) փաստաթուղթ է: Հիպերտեքստ տեքստ է, որը հղում և հղում է անում ձեր էկրանի այլ տեքստին, որը թույլ է տալիս մուտք գործել բովանդակություն պարզ սեղմումով: Նշման լեզու քառակուսի փակագծերում փակցված պիտակների մի շարք է <>: Այս HTML թեգերը սովորաբար գալիս են զույգերով.
- <start tag> Նաև հայտնի է որպես բացման պիտակ:
- : կոչվում է նաև փակման պիտակ և ներառում է առաջ շեղ /
Երբ դուք բովանդակություն եք փակցնում այս երկու պիտակների միջև, ամբողջը կոչվում է տարր :
- Սա պարբերություն է
Երբ այս լեզուն թարգմանվի ինտերնետում, դիտողները չեն տեսնի պիտակները, նրանք կտեսնեն միայն դրանց միջև եղած բովանդակությունը:
HTML 5-ը՝ HTML-ի ներկայիս տարբերակը, պարունակում է մոտ 100 պիտակներ՝ ատրիբուտներով, որոնք փոխում են իրենց ֆունկցիան կամ տեսքը։ Դուք պետք է իմանաք այս թեգերից միայն 30-40-ը, որպեսզի սկսեք հասկանալ և ստեղծել HTML: Նայեք նրանց և ուշադրություն դարձրեք, թե ինչպես են դրանք խմբավորվում ըստ ֆունկցիաների: Եկեք սա տեսնենք գործողության մեջ:
Պատկերների կտրում Photoshop-ում:
HTML-ի և CSS-ի ներածություն դիզայներների համար
Նախքան կոդավորումը, մենք պետք է որոշենք, թե կայքի որ բաժինները պետք է ներառեն պատկերներ, և որոնք կարող են կոդավորվել: Եկեք օգտվենք գործիք Photoshop Կտոր (թաքնված է ենթամենյուի տակ Կտրման գործիք ) և ընդգծել այնպիսի ոլորտներ, ինչպիսիք են բուրիտոյի լուսանկարը և Taco Joan .
Այժմ մենք պետք է արտահանենք մեր հատվածները՝ ընտրեք File > Save for Web (Alt + Shift + Ctrl + S): Երբ ընտրվում է որոշակի հատված, դուք կարող եք սահմանել դրա արտահանման ընտրանքները պատուհանի աջ կողմում (JPG, PNG և այլն): Եթե դուք կրկնակի սեղմեք կոնկրետ հատվածի վրա, կտեսնեք թռուցիկ պատուհան»: Հատվածի պարամետրեր» – սա թույլ է տալիս անվանել որոշակի հատված ֆայլեր:
Լռելյայնորեն, բոլոր պատկերները տեղադրված են՝ /images/ ենթագրքում: Եթե ցանկանում եք արտահանել միայն ձեր ստեղծած հատվածները, ընտրեք « Բոլոր մաքսային դրվագները» «Պահպանել» պատուհանում: HTML-ի և CSS-ի ներածություն դիզայներների համար
Հիմնական HTML փաստաթղթի ստեղծում
Մենք ունենք մեր slicers-ը, եկեք ստեղծենք հիմնական HTML փաստաթուղթ: HTML-ի և CSS-ի ներածություն դիզայներների համար
Տող 1 Հայտարարում է, որ HTML 5 բարբառը փաստաթղթի լեզուն է:
Տող 2 : տարր ներկայացնում է HTML փաստաթղթի արմատը: Սա պարտադիր կոնտեյներ է, որը նշում է մեր փաստաթղթի սահմանները:
3 : գլուխ պարունակում է էջի անտեսանելի տարրեր, ինչպիսիք են մետա տեղեկատվություն, վերնագիր և այլն:
Տող 4 : Սա փաստաթղթի կոդավորման հայտարարագիրն է utf-8 – անվտանգ ընտրություն – կարող եք ավելին կարդալ HTML նիշերի կոդավորման մասին այստեղ .
Տող 5 : Նմուշ էջ Սա էջի վերնագիրն է, որը հայտնվում է դիտարկիչի վերնագրի տողում:
6 : փակում է պիտակը 3-րդ տողից.
Տող 7 : Այս մարմնի տարրը կպարունակի էջի ամբողջ տեսանելի բովանդակությունը:
Տող 8 : փակում է պիտակը 2-րդ տողից: Այս տարրը նշում է փաստաթղթի ավարտը: HTML-ի և CSS-ի ներածություն դիզայներների համար
Նույն դիզայնի կոդավորման այլ հնարավոր եղանակներ կան: Փաստաթղթի հիմնական կառուցվածքը ստեղծելու համար մենք կօգտագործենք HTML 5 իմաստային թեգերը (վերնագիր, նավարկություն, հոդված, ստորագիր).
Սա HTML-ով թարգմանված դասավորությունն է.
Մի քանի նշում.
11 և 12 տողեր Տարրերը ինտերնետի էությունն են, քանի որ դրանք օգտագործվում են ստեղծելու համար հիպերհղումներ . Նրանք կապված են HREF հատկանիշի հետ և պետք է կապեն թիրախին URL .
18–20 տող Սրանք տեքստի ձևաչափման որոշ պիտակներ են. նշանակում է առաջին մակարդակի վերնագիր. նշանակում է պարբերություն; նշանակում է գծի ընդմիջում:
Ֆորմատավորում Cascading Style Sheets-ով (CSS):
HTML-ի և CSS-ի ներածություն դիզայներների համար
Երբ դուք բացում եք միայն HTML ֆայլը վեբ բրաուզերում, կտեսնեք, որ այն ձևաչափված չէ մեր նախորդ դիզայնի նման: Դա պայմանավորված է նրանով, որ HTML կոդը բավարար չէ, մենք պետք է այն ձևաչափենք Կասկադային ոճերի թերթիկներ (CSS) . CSS-ը ոճային թերթիկի լեզու է, որն օգտագործվում է HTML տարրերի ձևաչափման համար:
Բայց ինչո՞ւ հենց մեզ պետք է համատեղել HTML-ը CCS-ի հետ: Որոշ ժամանակ առաջ ձևաչափումը ձեռք բերվեց HTML թեգերին ատրիբուտներ ավելացնելով: Այնուամենայնիվ, դա հանգեցրեց անընթեռնելի և չպահպանվող կոդի: Լուծումը փաստաթղթի բովանդակությունը (HTML) առանձնացնելն էր փաստաթղթի ձևաչափումից (CSS):
Եկեք Breakdown Simple CSS կանոն :
Ընտրիչ Սա HTML տարրն է, որը ցանկանում եք ոճավորել: Օրինակ՝ <հոդված>
Հայտարարություն CSS կանոնը կարող է ունենալ մեկ կամ մի քանի հայտարարություն: Յուրաքանչյուր հայտարարագիր բաղկացած է սեփականությունից և արժեքից և բաժանվում է կետ-ստորակետով: Դուք հայտարարությունները տեղադրում եք գանգուր փակագծերում {}: HTML-ի և CSS-ի ներածություն դիզայներների համար
Գույքը : սա ոճի հատկանիշ, որը ցանկանում եք փոխել։ Օրինակ՝ ֆոնի գույնը, չափը տառատեսակ և այլն
Արժեք Յուրաքանչյուր հատկություն ունի դրա հետ կապված արժեք: Օրինակ՝ #ffcc11 (ֆոնի գույնի համար), 16px (տառաչափի համար) և այլն:
Այնտեղ շատ CSS հատկություններ, որոնք կարող են սահմանվել HTML-ի յուրաքանչյուր տարրի համար, բայց կարիք չկա դրանք բոլորը ինքներդ գրել։ Դուք կարող եք ապավինել ձեր զննարկչի լռելյայն կարգավորումներին կամ օգտագործել հիմնական ոճի թերթիկ, որը ձեր դիտարկիչը վերականգնում է ողջամիտ կարգավորումներին: Փաստորեն, դեպի գրել ընտրիչներ ինքներդ դա անելը մեծ գիտելիքներ և փորձ է պահանջում:
Եկեք նայենք մի քանի CSS կանոնների, որոնք անհրաժեշտ են մեր պարզ դիզայնի ձևաչափման համար:
CSS դիրքորոշման հատկություններ : գոյություն ունի 4 տարբեր մեթոդներ (ստատիկ, ֆիքսված, հարաբերական և բացարձակ), որոնք թույլ են տալիս մեզ տեղավորել որոշ տարրեր մեր դիզայնում: Այս մեթոդներից մեկը սահմանելուց հետո դուք կարող եք տեղադրել տարրերը՝ օգտագործելով վերին, աջ, ներքև և ձախ հատկությունները. դրանք տարբեր կերպ կաշխատեն՝ կախված նրանից, թե 4 մեթոդներից որն եք օգտագործում: Այս դեպքում մենք կցանկանայինք դիրքավորել ափսե_պատկեր, օգտագործելով բացարձակ դիրքավորում.
CSS Box մոդել : այս մոդելը շրջանակ է, որը ներառում է բոլոր HTML տարրերը, ներառյալ լուսանցքները, եզրագծերը, լիցքավորումը և բովանդակությունը: Լուսանցքը եզրագծի շուրջ անտեսանելի տարածքն է և եզրագծի և բովանդակության միջև ընկած հատվածը:
Եթե իսկապես ցանկանում եք ավելին իմանալ կոդավորման մասին, նայիր այս հիանալի կայքին՝ Codecademy .
1. Ի՞նչ է HTML-ը և ինչի՞ համար է այն օգտագործվում:
HTML (հիպերտեքստի նշագրման լեզու) վեբ էջեր ստեղծելու ստանդարտ նշագրման լեզու է: Այն օգտագործվում է վեբ էջի բովանդակությունը կառուցելու համար՝ օգտագործելով պիտակներ, որոնք բրաուզերին ասում են, թե ինչպես ցուցադրել տեքստը, պատկերները, հղումները և այլ տարրեր:
2. Ի՞նչ է CSS-ը և ինչի՞ համար է այն օգտագործվում:
CSS- ն (Cascading Style Sheets) ոճավորման լեզու է, որն օգտագործվում է HTML փաստաթղթի տեսքը նկարագրելու համար: CSS-ը վերահսկում է վեբ էջերի դասավորությունը, գույները, տառատեսակները և այլ տեսողական ասպեկտները:
3. Ինչպե՞ս սկսել HTML-ի և CSS-ի հետ:
HTML-ի և CSS-ի հետ սկսելու համար ձեզ հարկավոր է տեքստային խմբագրիչ (օրինակ՝ Notepad++, Sublime Text կամ Visual Studio Code) և վեբ բրաուզեր՝ ձեր էջերը դիտելու համար: Ստեղծեք երկու ֆայլ՝ մեկը ընդլայնմամբ .html
HTML կոդի համար և մեկ այլ ընդլայնումով .css
CSS ոճերի համար.
4. Ի՞նչ կառուցվածք ունի HTML փաստաթուղթը:
HTML փաստաթուղթը բաղկացած է մի քանի հիմնական պիտակներից.
Էջի վերնագիր
Վերնագիր
Տեքստի պարբերություն.
5. Ինչպե՞ս կապել HTML-ն ու CSS-ը:
HTML փաստաթղթում կարող եք կապել CSS ֆայլը՝ օգտագործելով պիտակ <link>
հատվածում <head>
:
6. Ինչպե՞ս կիրառել ոճերը CSS-ում:
CSS-ն օգտագործում է ընտրիչներ՝ HTML տարրեր ընտրելու և դրանց վրա ոճեր կիրառելու համար.
մարմին {
ֆոնի գույնը՝ #f0f0f0;
}
h1 {
գույն: #333333;
տառատեսակ-ընտանիք՝ Arial, sans-serif;
}
p {
font-size: 16px;
գծի բարձրությունը `1.5;
}
7. Ի՞նչ են դասերը և նույնացուցիչները HTML-ում և CSS-ում:
Դասերը և նույնացուցիչները օգտագործվում են ոճերը որոշակի տարրերի վրա կիրառելու համար.
- ԴասերԿարող է կիրառվել բազմաթիվ տարրերի վրա: HTML-ում դրանք նշվում են հատկանիշով
class
, իսկ CSS-ում՝ մի կետ (.
):
- Նույնացուցիչներեզակի յուրաքանչյուր տարրի համար: HTML-ում դրանք նշվում են հատկանիշով
id
, իսկ CSS-ում՝ հեշ (#
):
Վերնագիր
#վերնագիր {
ֆոնային գույն ՝ # 333333;
գույնը՝ #ffffff;
լիցք: 20px;
}
8. Ինչպե՞ս ստեղծել դասավորություններ՝ օգտագործելով CSS:
Դուք կարող եք օգտագործել հատկությունները դասավորություններ ստեղծելու համար display
, flex
, grid
եւ ուրիշներ:
- FlexboxԴասավորություններ ստեղծելու ճկուն միջոց:
css
.կոնտեյներ {
ցուցադրում ՝ ֆլեքս;
justify-content. space-միջեւ;
}
- ՑանցՀզոր գործիք բարդ դասավորություններ ստեղծելու համար:
css
.grid-container {
ցուցադրում՝ ցանց;
grid-template-collumns. կրկնել (3, 1fr);
բացը` 10px;
}
9. Ինչպե՞ս աշխատել գույների և տառատեսակների հետ CSS-ում:
- ԳույներԿարելի է նշել՝ օգտագործելով գույների անունները, տասնվեցական արժեքները, RGB կամ HSL:
css
- Տառատեսակներկարող է սահմանվել՝ օգտագործելով սեփականությունը
font-family
.css
.տեքստ {
տառատեսակ-ընտանիք՝ «Arial», sans-serif;
}
10. Ի՞նչ գործիքներ և ռեսուրսներ կարող են օգնել դիզայներներին սովորել HTML և CSS:
- Առցանց դասընթացներ և ձեռնարկներինչպիսիք են Codecademy-ը, freeCodeCamp-ը, MDN Web Docs-ը:
- Զարգացման գործիքներներկառուցված բրաուզերի գործիքներ (DevTools) վրիպազերծման և կոդերի փորձարկման համար:
- CSS շրջանակներինչպիսիք են Bootstrap-ը, որոնք արագացնում են զարգացման գործընթացը:
HTML և CSS սովորելը պրոֆեսիոնալ և ֆունկցիոնալ վեբ էջեր ստեղծելու առաջին քայլն է: Այս լեզուները վեբ զարգացման հիմքն են և դիզայներներին ապահովում են հզոր գործիքներ՝ իրենց գաղափարները համացանցում կյանքի կոչելու համար:
Թողնել Մեկնաբանություն
Դուք պետք է լինի մուտք Ամսաթիվ մեկնաբանություն.