Սուրճի խանութ պատրաստելու վեբ կայք. 9 քայլ

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

Այս Ուղեցույցում ես ձեզ ցույց կտամ, թե ինչպես պատրաստել մի պարզ կայք, որը ցուցադրում է ձեր մոտ գտնվող սրճարանները ՝ օգտագործելով Google Քարտեզներ, HTML և CSS

Պարագաներ

Համակարգիչ

Տեքստային խմբագիր (ես օգտագործում եմ Atom)

Wi -Fi կապ

Քայլ 1: Ընտրեք տեքստի խմբագիր

Ես օգտագործում եմ Atom- ը, որը կարելի է ներբեռնել այստեղից: Ներբեռնումը բացելուց հետո այն ստեղծեք նոր նախագիծ

Քայլ 2: Ստեղծեք ձեր նոր նախագիծը

1. Բացեք ատոմը
2. Գտնել ֆայլը
3. Ֆայլի տակ կտտացրեք նոր
4. ներքևի ձախ մասում (mac) կլինի նոր թղթապանակ պատրաստելու կոճակ
5. անվանեք ձեր թղթապանակը '' Քարտեզի կայք ''
6. Սեղմեք բաց ներքևի աջ մասում

Քայլ 3: Ստեղծեք ձեր Index.html- ը

1. Նոր ֆայլ ավելացրեք ձեր թղթապանակում (ատոմում աջ սեղմեք թղթապանակին և սեղմեք նոր)
2. Անվանեք այս ֆայլը «Index.html»
3. Ավելացրեք այս հիմնական HTML կառուցվածքը: Սա օգտագործվում է յուրաքանչյուր HTML նախագծում.

Քայլ 4: Ստացեք ձեր քարտեզը

1. Այցելեք Google քարտեզներ այստեղ ՝ Google Քարտեզներ
2. Որոնել սուրճ
3. դուք պետք է ձեռք բերեք ձեր ընդհանուր տարածքում գտնվող բոլոր սրճարանները
4. կտտացրեք սուրճի կողքին գտնվող երեք տողերին
5. գտնել բաժնետոմս կամ տեղադրել քարտեզ
6. ընտրել ներկառուցված քարտեզը
7. Ընտրեք քարտեզի չափը (ես օգտագործել եմ Large) և վերջնականացրեք ձեր գտնվելու վայրը
8. կտտացրեք HTML պատճենը

Քայլ 5: Ավելացնել կայք

1. Վերադարձ դեպի HTML ֆայլ:
2. երկու »պիտակների միջև տեղադրեք այս ծածկագիրը.

'

ՔՈ ՄՈՏ ՄԵE ՍՈFՐԻ ԽԱՆՈԹՆԵՐ

«GOOGLE ՔԱՐՏԵՆԵՐԻ ԸՆՏՐՎԱ ԿՈԴԸ»

'

Քայլ 6: Նախադիտում

Դա առաջին մասն է կատարված:

պահպանեք ֆայլը և գտեք այն ձեր համակարգչում, կրկնակի կտտացրեք այն և այն կբացվի ձեր կանխադրված դիտարկիչում ՝ նախադիտման համար:

Քայլ 7: Դարձրեք այն ավելի լավ տեսք

1. Երկու »պիտակների միջև ավելացրեք« Սուրճի խանութներ իմ մոտ »
2. Ավելացրեք նոր ֆայլ այնպես, ինչպես ստեղծել եք «Index.html», բայց անվանեք «Style.css»
3. վերադարձեք ձեր HTML ֆայլին, գրեք այս ծածկագիրը վերնագրի վերևում »,
4. Գնացեք Google պատկերներ և ներբեռնեք մի բաժակ սուրճի գեղեցիկ բաժին
5. Ավելացրեք պատկերը մեր մնացած ֆայլերը պարունակող թղթապանակին
6. CSS ֆայլում գրեք հետևյալ կոդը ՝ 'body {
7. ֆոնային պատկեր ՝ url (ՆԿԱՐԻ ԱՆՎԱՆՈՄԸ);
8. ֆոնային չափ `կազմ;
9. }'

Քայլ 8: Այն դարձնել ավելի լավ տեսք Pt2

1. եթե հիմա պահենք և նախադիտենք, կարող ենք տեսնել, որ կայքերի ֆոնն այժմ սալիկապատված է մեր սուրճի բաժակներով
2. Lyավոք, դժվար է կարդալ մեր վերնագիրը
3. Այսպիսով, CSS- ում, «մարմնի {}» տակ ավելացրեք հետևյալ ծածկագիրը ՝ h1 {
4. ֆոնային գույն = rgb (255, 255, 255);
5. font-size = 40px;
6. }

Քայլ 9: Վերանայում

Վերջ! Վերջացրել ես. Դուք սովորել եք HTML- ի, CSS- ի և ներկառուցված ծածկագրի հիմունքները: Լավ արված: Դուք կարող եք խմբագրել կոդը, որպեսզի այն համապատասխանի ձեր ճաշակին և ստիպի այն ցուցադրել այն ամենը, ինչ ցանկանում եք: Այդ ժամանակից ի վեր դուք կարող եք շարունակել ձեր վեբ կայքի կառուցման ճանապարհը և ընդմիշտ կատարելագործվել: