Buat Laman Web Lokasi Kedai Kopi: 9 Langkah

2024 Pengarang: John Day | [email protected]. Diubah suai terakhir: 2024-02-01 14:41

Dalam Instructable ini saya akan menunjukkan kepada anda bagaimana membuat laman web mudah yang memaparkan kedai kopi di dekat anda, Menggunakan Peta Google, HTML dan CSS

Bekalan

Komputer

Penyunting teks (saya menggunakan Atom)

Sambungan wifi

Langkah 1: Pilih Penyunting Teks

Saya menggunakan Atom, yang boleh dimuat turun di sini. Setelah dimuat turun, ia akan membuat projek baru

Langkah 2: Buat Projek Baru Anda

1. Buka Atom
2. Cari fail
3. Di bawah fail klik baru
4. di kiri bawah (mac) akan ada butang untuk membuat folder baru
5. beri nama folder anda '' Peta laman web '
6. Tekan terbuka di kanan bawah

Langkah 3: Buat Indeks Anda.html

1. Tambahkan fail baru di folder anda (Dalam atom klik kanan folder dan tekan baru)
2. Namakan fail ini 'Index.html'
3. Tambahkan struktur HTML asas ini, Ini digunakan dalam setiap projek HTML:

Langkah 4: Dapatkan Peta Anda

1. Lawati peta Google di sini: Peta Google
2. Cari kopi
3. anda harus mendapatkan semua kedai kopi di kawasan umum anda
4. klik tiga baris di sebelah kopi
5. cari peta kongsi atau benamkan
6. pilih peta benam
7. Pilih ukuran peta (saya gunakan Besar) dan selesaikan lokasi anda
8. tekan salin HTML

Langkah 5: Tambahkan ke Laman Web

1. Kembali ke fail HTML.
2. antara dua tag memasukkan kod ini:

'

KEDAI KOPI DEKAT ANDA

'KOD DIPERBUAT DARI PETA GOOGLE'

'

Langkah 6: Pratonton

Itu bahagian pertama selesai!

simpan fail tersebut dan temukan di komputer anda, klik dua kali dan ia akan terbuka di penyemak imbas lalai anda untuk dipratonton.

Langkah 7: Jadikannya Lebih Baik

1. Di antara dua '' tag '' Kedai kopi berhampiran saya ''
2. Tambahkan fail baru dengan cara yang sama seperti anda membuat 'Index.html' tetapi beri nama 'Style.css'
3. kembali pada fail HTML anda, tuliskan kod ini di atas tajuk anda,"
4. Pergi ke gambar google dan muat turun clipart comel dari secawan kopi
5. Tambahkan gambar ke folder yang mengandungi fail kami yang lain
6. dalam fail CSS, Tulis kod berikut: 'body {
7. background-image: url (NAMA GAMBAR);
8. latar belakang: penutup;
9. }'

Langkah 8: Menjadikannya Lebih Baik Pt2

1. jika kita menyimpan dan melihat pratonton sekarang, kita dapat melihat bahawa latar belakang laman web sekarang dijubin dengan cawan kopi kita
2. Malangnya sukar membaca tajuk kami
3. Jadi dalam CSS, di bawah 'body {}' tambahkan kod berikut: h1 {
4. latar belakang-warna = rgb (255, 255, 255);
5. saiz fon = 40 piksel;
6. }

Langkah 9: ULASAN

Betul! Anda sudah selesai. Anda telah mempelajari asas-asas HTML, CSS dan kod benam, Selamat berjaya. Anda boleh mengedit kodnya agar sesuai dengan selera anda dan membuatnya memaparkan peta apa sahaja yang anda mahukan. Sejak itu anda boleh meneruskan perjalanan membina laman web anda dan terus bertambah baik.