Membuat Situs Web Lokasi Kedai Kopi: 9 Langkah

2024 Pengarang: John Day | [email protected]. Terakhir diubah: 2024-02-01 14:41

Dalam Instruksi ini saya akan menunjukkan kepada Anda cara membuat situs web sederhana yang menampilkan kedai kopi di dekat Anda, Menggunakan Google Maps, HTML, dan CSS

Perlengkapan

Komputer

Editor teks (saya menggunakan Atom)

Koneksi wifi

Langkah 1: Pilih Editor Teks

Saya menggunakan Atom, yang dapat diunduh Di Sini. Setelah diunduh, buka, buat proyek baru

Langkah 2: Buat Proyek Baru Anda

1. Buka Atom
2. Mencari berkas
3. Di bawah file klik baru
4. di kiri bawah (mac) akan ada tombol untuk membuat folder baru
5. beri nama folder Anda ''Peta situs web'
6. Tekan buka di kanan bawah

Langkah 3: Buat Index.html Anda

1. Tambahkan file baru di folder Anda (Dalam atom klik kanan folder dan tekan baru)
2. Beri nama file ini 'Index.html'
3. Tambahkan struktur HTML dasar ini, Ini digunakan di setiap proyek HTML:

Langkah 4: Dapatkan Peta Anda

1. Kunjungi peta Google di sini: Google Maps
2. Cari kopi
3. Anda harus mendapatkan semua kedai kopi di area umum Anda
4. klik tiga baris di sebelah kopi
5. temukan bagikan atau sematkan peta
6. pilih sematkan peta
7. Pilih ukuran peta (saya menggunakan Besar) dan selesaikan lokasi Anda
8. tekan salin HTML

Langkah 5: Tambahkan ke Situs Web

1. Kembali ke file HTML.
2. di antara dua tag '' masukkan kode ini:

'

TOKO KOPI DI DEKAT ANDA

'KODE TERSEBUT DARI GOOGLE MAPS'

'

Langkah 6: Pratinjau

Itu bagian satu selesai!

simpan file dan temukan di komputer Anda, Klik dua kali dan itu akan terbuka di browser default Anda untuk dipratinjau.

Langkah 7: Jadikan Terlihat Lebih Baik

1. Di antara dua '' tag tambahkan 'Kedai kopi di dekat saya'
2. Tambahkan file baru dengan cara yang sama seperti Anda membuat 'Index.html' tetapi beri nama 'Style.css'
3. kembali pada file HTML Anda, tulis kode ini di atas judul Anda,"
4. Buka gambar google dan unduh clipart lucu dari secangkir kopi
5. Tambahkan gambar ke folder yang berisi sisa file kami
6. di file CSS, Tulis kode berikut: 'body{
7. background-image: url(NAMA GAMBAR);
8. ukuran latar belakang: sampul;
9. }'

Langkah 8: Membuatnya Terlihat Lebih Baik Pt2

1. jika kita menyimpan dan mempratinjau sekarang, kita dapat melihat bahwa latar belakang situs web sekarang diberi ubin dengan cangkir kopi kita
2. Sayangnya sulit untuk membaca judul kami
3. Jadi di CSS, di bawah 'body {}' tambahkan kode berikut: h1{
4. background-color=rgb(255, 255, 255);
5. ukuran font=40px;
6. }

Langkah 9: REVISI

Itu dia! Kamu sudah selesai. Anda telah mempelajari dasar-dasar HTML, CSS, dan kode yang disematkan, Bagus sekali. Anda dapat mengedit kode agar sesuai dengan selera Anda dan membuatnya menampilkan peta apa pun yang Anda inginkan. Sejak saat itu Anda dapat melanjutkan perjalanan membangun situs web Anda dan terus meningkat.