Hallo, teman-teman. Balik lagi dengan Satelitweb. Kali ini Satelitweb akan berbagi cara mudah dan cepat membuat website landing page HTML dan CSS dengan bantuan AI atau artificial intelligence alias kecerdasan buatan dari ChatGPT.

Seperti yang teman-teman tahu, bahwa teknologi AI yang saat ini sedang ramai dan menggemparkan banyak orang karena dianggap bisa menggantikan pekerjaan manusia, salah satunya adalah ChatGPT (Chat Generative Pre-trained Transformer) dari OpenAI.

Baca Juga apa itu artificial intelligence di sini agar lebih paham

Nah, kali ini Satelitweb mencoba-coba membuat contoh website landing page HTML dan CSS sederhana untuk restoran dengan menggunakan ChatGPT sampai online dan bisa diakses semua orang melalui internet di seluruh dunia dengan menggunakan nama domain sendiri.

Daftar ChatGPT Gratis

Oke langsung kita mulai. Apabila kamu belum mempunyai akun chatGPT, silakan tonton tutorial mudah cara daftar dan menggunakan chatGPT dari OpenAI di tutorial Satelitweb sebelumnya di sini.

Minta Bantuan ChatGPT Membuat Website

Setelah berhasil login, Satelitweb langsung chat meminta ChatGPT bekerja dengan prompt berikut:

Buat website landing page bagus untuk restoran dengan contoh gambar dan ukurannya

Dengan cepat kilat ChatGPT langsung menjawabnya seperti ini:

Informasi yang diberikan sangat bermanfaat meski masih berbentuk tips dan terlalu umum.

Okelah, kita mulai minta ke hal teknis dengan bertanya seperti ini

Oke, sekarang buat kode HTML nya untuk yang dijelaskan di atas.

Dan, waw! Menakjubkan. ChatGPT langsung menuliskan kode HTML nya dengan sangat cepat, kita tunggu sampai selesai.

Dan inilah hasil kodenya:

Karena kode HTML saja tidak cukup, maka sekarang, Satelitweb meminta ChatGPT untuk membuat CSS nya dengan mengetikan:

“Sekarang, buatlah CSSnya”

Dan waw. Langsung dibuatkan code CSS nya. sekaligus dengan saran agar kita menyimpan file CSS pada folder yang sama dengan file HTML nya di web server nanti.

Terakhir, Satelitweb meminta cara agar kode website tadi bisa online dan dilihat oleh semua orang di internet, dengan mengetikan:

Bagaimana cara saya menguploadnya agar bisa online dan terlihat oleh semua orang di internet?

ChatGPT pun memberikan langkah-langkahnya.

Dari jawabannya, intinya kita diharuskan untuk menggunakan nama domain dan web hosting server di penyedia nama domain dan web hosting yang ada.

Terakhir, tak lupa Satelitweb ucapkan terima kasih 🙂

Menyiapkan Nama Domain dan Web Hosting

Di tahap ini, jIka kamu sudah membeli nama domain atau web hosting di Satelitweb, silakan login di satelitweb.com untuk mengakses web hosting kamu.

Oke, Satelitweb asumsikan kamu sudah memiliki nama domain dan web hostingnya di Satelitweb, ketik satelitweb.com, lalu pada bagian atas klik login

Dan silaklan masukan alamat email dan password Satelitwebnya di sini, klik login.

Nah, silakan klik layanan untuk melihat layanan hosting kamu yang aktif di Satelitweb, klik nama domainnya, di menu informasi sebelah kiri, klik login to cPanel untuk mengakses control panel web hosting kamu.

Mengupload File dari ChatGPT Ke Web Hosting

Inilah tampilan cPanel web hosting server kamu, lalu kamu cari bagian file manager, kemudian Public_html, setelah itu bikin file baru dengan mengklik file ini, dan silakan ketikan nama filenya, contohnya index.html, Create New File, lalu klik kanan dan edit

Di bagian ini, tempel atau paste kode HTML yang telah kita copy atau salin di ChatGPT, setelah itu klik Save Changes

Kode HTML selesai kita upload ke web hosting kita

Lalu kita masukan kode CSS nya juga.

Kembali lagi ke ChatGPT, cari kode CSS yang tadi, lalu klik tulisan copy code ini

Setelah itu, kita kembali lagi web hosting kamu di Satelitweb, buat lagi file baru, sekarang kasih nama style.css, klik Create New File seperti ini

Klik kanan pada file yang barusan kita buat, lalu klik edit, klik lagi edit

Nah, code CSS tadi kita paste atau tempel di sini. Klik kanan, lalu tempel, klik Save Changes.

Sekarang, kita cek lagi ke halaman ChatGPT untuk mengecek ulang instruksi yang diberikan tadi.

Nah, pada bagian ini kita salin kode ini, untuk ditempatkan di file html, tujuannya untuk memangagil kode CSS di HTML saat web nanti dibuka.

Pilih bagian ini, klik kanan, lalu salin
Setelalah itu kita kembali ke file html di hosting kamu, tempelkan kode tadi di bagian sini
Klik Save Changes jika sudah
Sekarang, mari kita coba lihat hasil websitenya dengan mengetikan domain yang sudah kamu miliki di satelitweb, dalam contoh kali ini satelitweb menggunakan nama domain satelitweb.net

Dan hasilnya, begini, hehe.

Tentu ini belum selesai, kita perlu menambahkan gambar agar lebih indah sesuai dengan yang diinstruksikan CHATGPT.

Karena ini website landing page restoran, maka kita tambahkan gambar makanan, nah untuk gambar sebagai contoh kita bisa mencarinya di situs pexels.com

Ketikan nama gambarnya, misalnya makanan.

Setelah itu, kita edit gambar terlebih dahulu untuk menyesuaikan ukurannya, contohnya bisa dengan Photoshop.

Nah, tentu sebagai dasar, ini sudah sangat membantu, paling tidak, mempersingkat waktu, kita bisa memodifikasi websitenya dari yang sudah diberikan chatGPT sesuai selera, misalnya terkait background, tipografi, mengubah ukuran, jenis font, warna, dan elemen lainnya agar terlihat semakin menarik lagi.

Untuk teman-teman yang tidak memiliki dasar tentang HTML dan CSS bisa mempelajarinya di w3school.

Modifikasi Website dari ChatGPT

Tentu saja, kamu bisa memodifikasi sendiri dari yang ada ini, milsanya Satelitweb ingin mengubah warna bagian bawah atau footer ini,bmaka kita bisa mengganti kode warnanya di file CSS.

Satelitweb ingin mengubah warna menu navbar atas ini,maka kita bisa mengganti kode warnanya di file CSS.

Penutup dan Kesimpulan

Dalam artikel Satelitweb ini hanya dasar dan sebagai contoh.

Tentu saja, web yang Satelitweb tampilkan di sini hanya merupakan web HTML dan CSS yang sederhana dan sekali lagi hanya sebagai contoh. Kamu bisa mengembangkannya sendiri dengan mengggabungkannya dengan bahasa pemrograman lainnya yang lebih menarik sesuai dengan kreatifitas kamu.

Selamat mencoba dan dapat menjadi manfaat ya teman-teman.

Terima kasih.

Untuk lebih jelasnya, tontoh videonya: