Qahvaxona joylashadigan veb -sayt yarating: 9 qadam

2024 Muallif: John Day | [email protected]. Oxirgi o'zgartirilgan: 2024-02-01 14:43

Bu yo'riqnomada men sizga Google Xaritalar, HTML va CSS -dan foydalanib, sizning yoningizdagi qahvaxonalarni ko'rsatadigan oddiy veb -sayt yaratish yo'llarini ko'rsataman.

Ta'minotlar

Kompyuter

Matn muharriri (men Atomdan foydalanaman)

Wi -Fi ulanishi

1 -qadam: Matn muharririni tanlang

Men Atomdan foydalanaman, uni bu erda yuklab olish mumkin. Yuklab olingandan so'ng, u yangi loyihani amalga oshiradi

2 -qadam: Yangi loyihangizni yarating

1. Atomni oching
2. Faylni toping
3. Fayl ostida yangi ni bosing
4. chap pastki qismida (mac) yangi papka yaratish tugmasi bo'ladi
5. papkangizga '' Veb -sayt xaritasi '' nomini bering
6. Pastki o'ngdagi ochish tugmachasini bosing

3 -qadam: Index.html -ni yarating

1. Jildingizga yangi fayl qo'shing (atomda papkani o'ng tugmasini bosing va yangisini bosing)
2. Bu faylga 'Index.html' deb nom bering
3. Ushbu asosiy HTML tuzilishini qo'shing, bu har bir HTML loyihasida ishlatiladi:

4 -qadam: Xaritangizni oling

1. Google xaritalariga tashrif buyuring: Google xaritalari
2. Qahva qidiring
3. Siz o'z hududingizdagi barcha qahvaxonalarni sotib olishingiz kerak
4. qahva yonidagi uchta qatorni bosing
5. ulashish yoki xaritani joylashtirish
6. joylashtirish xaritasini tanlang
7. Xaritaning o'lchamini tanlang (men Katta ishlatganman) va joylashuvingizni aniqlang
8. HTML nusxasini bosing

5 -qadam: Veb -saytga qo'shing

1. HTML -faylga qayting.
2. ikki '' teglar orasiga ushbu kodni kiriting:

'

YAQINDA KAFE DUKONLARI

'GOOGLE XARITALARIDAN KOMBED KODI'

'

6 -qadam: oldindan ko'rish

Mana bu birinchi qism!

faylni saqlang va uni kompyuterda toping, ustiga ikki marta bosing va u oldindan ko'rish uchun standart brauzeringizda ochiladi.

7 -qadam: Buni yaxshiroq ko'rinishga keltiring

1. Ikkita "teglar orasiga" yonimdagi qahvaxonalar "qo'shiladi
2. "Index.html" ni yaratganingizdek yangi fayl qo'shing, lekin uni "Style.css" deb nomlang.
3. HTML faylingizga qayting, ushbu kodni sarlavhangizning tepasiga yozing"
5. Google rasmlariga o'ting va bir chashka qahvaning yoqimli klipini yuklab oling
6. Rasmni qolgan fayllarimiz joylashgan papkaga qo'shing
7. CSS fayliga quyidagi kodni yozing: 'body {
8. background-image: url (RASMNING NOMI);
9. fon o'lchami: qopqoq;
10. }'

8 -qadam: Buni yaxshiroq qilish Pt2

1. Agar biz hozir saqlasak va oldindan ko'rib chiqsak, veb -saytlar fonini bizning qahva chashkalarimiz bilan qoplanganini ko'rishimiz mumkin
2. Afsuski, bizning sarlavhamizni o'qish qiyin
3. Shunday qilib, CSS -da "body {}" ostiga quyidagi kodni qo'shing: h1 {
4. fon-rang = rgb (255, 255, 255);
5. shrift o'lchami = 40 piksel;
6. }

9 -qadam: REVISION

Bo'ldi shu! Ishingiz tugadi. Siz HTML, CSS va ko'milgan kod asoslarini o'rgandingiz, yaxshi. Siz o'z xohishingizga ko'ra kodni tahrir qilishingiz va xohlagan narsangiz xaritasini ko'rsatishingiz mumkin. O'shandan beri siz veb -sayt yaratish sayohatini davom ettira olasiz va abadiy yaxshilanasiz.