‹ Panduan Website AI

LANGKAH 02 · BINA WEBSITE

Cara Buat Website Guna AI Tanpa Coding — Tutorial Praktikal

Tutorial ini fokus pada website statik asas untuk servis atau profil bisnes. Kita tidak bina sistem e-commerce, login pelanggan atau pembayaran. Matlamatnya ialah menghasilkan fail website yang boleh dibuka dalam browser dan diuji.

Terus ke Work Instruction ↓Perlukan bantuan COE.my? ↗

PANDUAN PRAKTIKAL · 6 BAHAGIAN

01

Langkah 1 — Kumpul bahan bisnes

Sediakan nama syarikat, slogan jika ada, 3–5 servis, gambar yang anda miliki, kawasan servis, nombor WhatsApp, waktu operasi dan sekurang-kurangnya satu bukti sebenar jika tersedia.

Nota praktikal

Kalau belum ada gambar atau testimoni, jangan reka. Gunakan reka bentuk tanpa unsur tersebut dahulu.

02

Langkah 2 — Hasilkan struktur dan copy dengan AI

Mulakan menggunakan prompt perancangan dan copy. Minta website dengan bahagian Hero, Services, About, FAQ dan Contact. Pastikan satu CTA utama konsisten.

Nota praktikal

Headline yang bagus menerangkan siapa anda bantu dan manfaat yang anda tawarkan.

03

Langkah 3 — Jana satu fail HTML

Gunakan prompt HTML dan minta AI menghasilkan kod lengkap bagi index.html, termasuk CSS responsif di dalam fail yang sama. Jika jawapan terpotong, minta AI sambung dan semak semua tag ditutup.

Nota praktikal

Untuk website asas, satu fail HTML lebih mudah bagi beginner memahami dan publish.

04

Langkah 4 — Simpan fail dengan betul

Buka text editor, tampal kod dan simpan tepat sebagai index.html menggunakan pengekodan UTF-8. Letakkan gambar sendiri dalam folder images jika kod merujuk gambar tempatan.

Nota praktikal

Struktur contoh: index.html dan folder images/. Pastikan nama fail sama seperti dalam atribut src.

05

Langkah 5 — Buka dan uji

Double-click index.html untuk buka di browser. Semak pada saiz desktop dan telefon, cuba setiap menu, CTA WhatsApp dan semua pautan. Jika ada bahagian rosak, beri kod serta masalah tepat kepada AI untuk baiki.

Nota praktikal

Browser tempatan memaparkan website, tetapi ia belum live di internet.

06

Langkah 6 — Semak kualiti sebelum publish

Periksa spelling, fakta, harga, alt text, urutan heading, contrast warna dan butang yang boleh ditekan. Buang placeholder, testimoni palsu dan teks contoh. Pastikan maklumat privacy/contact sesuai dengan kegunaan sebenar.

Nota praktikal

Website bisnes perlu dipercayai, bukan sekadar nampak menarik.

WI-02 · WORK INSTRUCTION · 30–60 MINIT

Dari kod AI kepada website yang boleh diuji

Gunakan contoh fiksyen Sinar Bina Renovasi yang sama seperti WI-01. Anda perlukan text editor, browser dan kod HTML hasil WI-01. Objektif akhir: website berfungsi di komputer sebelum diupload.

Demo latihan yang boleh dicuba: Buka Sinar Bina Renovasi ↗. Bisnes fiksyen; CTA simulasi sahaja, tiada data dihantar. Muat turun fail demo (ZIP).

01 — Cipta folder latihan

Status screenshot: Akses File Explorer tidak tersedia dalam sesi capture ini. Struktur teks di bawah ialah arahan, bukan screenshot.

Buka File Explorer dan buat folder sinar-bina-demo. Letakkan index.html di root, dan buat folder images jika anda mempunyai foto sebenar.

sinar-bina-demo/
├── index.html
└── images/
    └── projek-sendiri.webp

Expected result: Folder dan nama fail tepat.

02 — Jana kod daripada WI-01

Gunakan Prompt HTML daripada WI-01. Salin seluruh kod HTML, tanpa tanda tiga backtick daripada code block.

Semak kod bermula: <!doctype html>
Semak kod berakhir: </html>
Semak ada: <meta name="viewport" content="width=device-width, initial-scale=1">

Expected result: Kod lengkap serta satu H1, section servis, tentang dan contact.

03 — Simpan index.html

Semakan Save As: Gunakan nama fail index.html, pilihan All Files dan encoding UTF-8 seperti langkah di bawah.

Dalam Notepad pilih File → Save As. Masukkan index.html; Save as type: All Files; Encoding: UTF-8. Simpan di dalam folder latihan. Jika guna VS Code, Save As index.html.

Windows File Explorer → View → Show → File name extensions.
Betul: index.html
Salah: index.html.txt

Expected result: Double-click membuka website dalam browser, bukan memaparkan teks kod.

04 — Uji navigasi dan mobile

Buka index.html dalam Chrome atau Edge. Klik semua navigation link. Tekan F12 dan toggle device toolbar untuk cuba paparan telefon. Cuba juga keyboard Tab.

[ ] Hero dan teks mudah dibaca
[ ] Tiada scroll mendatar pada 375px
[ ] Menu melompat ke section betul
[ ] Keyboard focus nampak
[ ] Semua imej dipaparkan
Output latihan yang boleh dicuba

Buka demo desktop ↗ · Cuba viewport 375px ↗

Demo interaktif ini dihoskan pada website COE.my untuk latihan. Ikuti WI-03 untuk menerbitkan salinan anda sendiri melalui Pages Direct Upload.

Expected result: Tiada overflow, menu dan pautan berfungsi.

05 — Ganti semua placeholder

Cari [PERLU SAHKAN], nama bisnes contoh, nombor dummy, alamat atau gambar yang tiada hak guna. Gunakan nombor WhatsApp sebenar sahaja. Bentuk link ialah https://wa.me/60XXXXXXXXX tanpa + atau sengkang.

Contoh struktur link sahaja: https://wa.me/60XXXXXXXXX
Jangan publish nombor contoh atau contact palsu.

Expected result: CTA WhatsApp membuka nombor yang disahkan, atau CTA dibuang jika belum tersedia.

06 — Final QA sebelum upload

Refresh browser selepas edit. Minta seorang lagi uji website di telefon. Simpan versi akhir dengan index.html pada root folder.

[ ] Maklumat bisnes sah
[ ] Tiada testimoni rekaan
[ ] HTML dibuka dengan baik
[ ] Responsif di telefon
[ ] CTA berfungsi
[ ] Tiada password/.env/data pelanggan

Expected result: Folder siap dibawa ke WI-03 untuk publish.

Troubleshooting

Browser tunjuk kod sebagai teks?

Fail mungkin masih .txt. Simpan sebagai All Files / index.html dengan UTF-8.

Gambar atau menu tak berfungsi?

Semak nama fail dan laluan src. Untuk menu, href="#servis" mesti sepadan dengan id="servis".

Layout rosak di telefon?

Pastikan meta viewport ada; minta AI audit CSS overflow pada skrin kecil dan uji semula secara manual.

Checkbox hanya untuk semakan sesi ini, belum menyimpan progress. Jika tiada foto, gunakan layout tanpa gambar sehingga anda mempunyai gambar sendiri.

Soalan lazim

Adakah ini betul-betul tanpa coding?

Anda tidak perlu menulis kod dari kosong, tetapi masih perlu menyimpan fail dan menyemak hasil HTML yang dijana AI.

Bolehkah saya buat online shop cara ini?

Untuk katalog asas boleh, tetapi cart, payment dan customer account perlukan platform serta kawalan keselamatan tambahan.

Kenapa gambar saya tidak keluar?

Biasanya kerana nama fail, laluan folder atau format gambar tidak sama dengan rujukan dalam HTML.

LANGKAH SETERUSNYA

Website dah siap? Pastikan pelanggan boleh jumpa.

Website yang live ialah permulaan. Jika anda perlukan bantuan dengan struktur SEO, visibility Google atau cara mendapatkan enquiry, COE.my boleh bantu kenal pasti apa yang perlu diperbaiki.

Teroka Website SEO ↗Bincang Website Saya ↗