Artikel ini ditulis pada 6 November 2026.
Alat AI berubah pantas. Kerangka asas sesebuah halaman tidak begitu. Pengepala (header), hero, bahagian (section), pengaki (footer), navigasi (navigation), kad (card) — seseorang cuma perlu mempelajari enam istilah ini untuk mula merangka skrin pertama. Menu di dalam produk akan berubah tempat. Bacalah panduan ini sebagai peta struktur halaman, bukannya tinjauan panel alat pembina laman web.
Sebelum dihias, sesebuah halaman web ialah urutan tugasan. Ada elemen yang memberitahu lokasi anda berada. Ada elemen yang menyatakan identiti tempat ini dalam satu ayat. Ada elemen yang mengulang jenis fakta yang serupa. Ada elemen yang menunjuk ke lokasi seterusnya, dan ada elemen yang menutup halaman. Apabila tugasan ini tidak dinamakan dengan jelas, model AI akan mencipta poster: satu gambar besar, teks terapung, dan tiada jalan untuk menatal ke bawah. Halaman kelihatan siap tetapi tidak boleh digunakan pada telefon bimbit.
Namakan tugasan tersebut dalam bahasa Inggeris dalam arahan, dan terangkan maksudnya dalam bahasa anda di bawahnya. Jika bahasa Melayu sudah mempunyai istilah yang stabil, gunakannya bersama bahasa Inggeris dalam kurungan pada kali pertama ia disebut. Jika tiada istilah khusus, tidak perlu mencipta kata baharu. Penjelasan ringkas bersama kata nama bahasa Inggeris sudah memadai.
Enam tempat, mengikut urutan yang ditemui pengguna
Header ialah jalur nipis di bahagian paling atas. Ia memuatkan nama tempat dan beberapa pautan keluar utama. Ia bukannya tempat untuk memasukkan hero kedua. Jika semua perkara penting diletakkan di header, halaman tidak lagi mempunyai bahagian atas yang jelas, sebaliknya cuma ruang yang sesak.
Hero ialah kawasan besar pertama yang dilihat. Satu kenyataan utama, satu ayat sokongan, dan satu tindakan. Sebuah klinik mungkin menyatakan perkhidmatan mereka lalu menawarkan tombol “Tempah Temujanji”. Sebuah kedai mungkin menyatakan produk mereka lalu menawarkan tombol “Lihat Roti Hari Ini”. Hero yang cuba memuatkan keseluruhan perniagaan ialah risalah yang dilekatkan di bahagian atas. Selebihnya halaman cuma mengulang perkara yang sama, dan pengguna telefon bimbit tidak pernah sampai ke maklumat harga atau alamat.
Section ialah satu topik khusus dengan tajuk. Waktu operasi, harga, tenaga kerja, atau soalan lazim. Section ialah cara halaman yang panjang menjadi mudah dibaca sepintas lalu. Minta section berdasarkan soalan sebenar yang ada pada pelawat, bukannya sekadar perkataan “section” sahaja. Arahan seperti “Bahagian bertajuk Waktu Operasi, dengan jadual seminggu ditulis dalam bentuk teks dan bukannya gambar” akan bertahan selepas terjemahan. Sebaliknya, gambar jadual waktu tidak boleh diproses dengan baik.
Footer ialah penutup halaman. Alamat lengkap, waktu operasi sekali lagi jika penting, serta cara untuk menghubungi anda. Pengguna yang tersesat akan menatal ke bahagian paling bawah dengan sengaja. Footer yang sekadar jalur hiasan akan mengecewakan mereka.
Navigation ialah senarai pendek tempat tujuan, biasanya diletakkan dalam header. Lima item sudah tergolong banyak pada layar telefon bimbit. Lebih daripada itu sepatutnya diletakkan di belakang satu kawalan, bukannya berjejeran hingga teks mengecil. Jangan minta navigation yang mengulang setiap tajuk section; itu hanyalah senarai kandungan yang menyamar sebagai laman web.
Card ialah kotak berulang untuk fakta jenis yang sama: perkhidmatan, kelas, atau produk. Setiap card mendapat slot yang seragam: ikon atau gambar jika ada, tajuk, satu ayat penjelasan, dan satu tindakan. Card yang masing-masing menggunakan tataletak berbeza bukanlah satu set, melainkan lima poster yang dikumpulkan.
`
`
Card yang sama, dua pilihan lebar
Halaman yang cuma direka untuk paparan skrin komputer akan rosak di negara yang menjadikan telefon bimbit sebagai komputer utama. Nyatakan pembahagian lajurnya. Pada skrin lebar, tampilkan tiga card dalam satu baris. Pada skrin sempit, tampilkan satu card di bawah card seterusnya. Teks di dalam card tidak berubah, cuma barisnya yang dipecahkan. Ini ialah tataletak responsif (responsive layout), dan ia merupakan syarat teknikal, bukannya suasana visual. Arahan “jadikan ia responsif” membolehkan model AI memilih pemisah yang mungkin menyembunyikan butang tindakan. Arahan “Tiga lajur apabila lebar, satu lajur apabila sempit, tindakan kekal kelihatan” memelihara fungsi tersebut.
Skrin tablet boleh berada di antara dua pilihan ini dengan dua lajur. Anda boleh menyatakannya, tetapi tidak wajib. Konsep satu dan tiga lajur sudah memadai untuk mengajar idea utama: kandungan ialah senarai, manakala baris horizontal ialah kelebihan lebar skrin.
Header yang kekal melekat di atas (sticky header) — iaitu header yang tidak bergerak semasa halaman ditatal — bersifat pilihan. Ia membantu apabila fungsi navigasi ialah jalan utama untuk kembali. Namun ia merugikan apabila mengambil sepertiga daripada paparan telefon yang pendek. Minta sticky header cuma jika jalan kembali lebih penting daripada perenggan seterusnya. Nyatakan “sticky header” jika mahukan nama bahasa Inggeris, dan nyatakan juga syaratnya: ia kekal ringkas dan tidak menutupi tajuk pertama.
`
`
Halaman yang kelihatan siap tetapi tidak boleh digunakan
Sebuah klinik kecil pernah meminta “laman utama yang cantik”. Model AI memberikan satu gambar lorong yang tinggi, slogan di atasnya, serta barisan ikon pucat tanpa ayat penjelasan. Pada komputer riba di kedai, ia kelihatan tenang. Namun pada telefon bimbit di perhentian bas, slogan menutupi gambar lorong, ikon-ikon bertukar menjadi jalur yang tidak boleh dibaca, dan waktu operasi dicetak ke dalam gambar sehingga tidak boleh diterjemahkan mahupun dibaca oleh pembaca skrin (screen reader). Tiada apa-apa pada halaman itu yang berfungsi sebagai header, hero, section, atau card. Ia hanyalah poster yang belajar untuk menatal.
Taklimat kedua menamakan kerangka asas dan mengeluarkan unsur keindahan daripada ayat arahan. Header dengan nama klinik dan tiga pautan: temujanji, waktu operasi, dan cara datang. Hero dengan satu ayat dan satu butang “Tempah Temujanji”. Tiga section ditulis sepenuhnya sebagai teks. Satu set card untuk tiga jenis temujanji, tiga melintang apabila lebar, satu di bawah yang lain apabila sempit. Footer dengan alamat sebagai teks. Halaman menjadi fungsional dan biasa — iaitu apa yang boleh digunakan oleh seseorang di perhentian bas. Gambar lorong masih boleh wujud di dalam hero dengan saiz lebih kecil daripada ayat utama, tanpa mendominasi keseluruhan halaman.
Itulah perubahan yang dibuat oleh enam istilah ini dalam kerja harian. Ia menghalang model AI daripada menghabiskan seluruh jawapan untuk suasana visual sahaja. Suasana boleh berada di dalam sesuatu kawasan, tetapi tidak boleh menggantikan kawasan tersebut. Jika anda memberi taklimat dalam bahasa Melayu, Hindi, atau Arab, tulis enam nama bahasa Inggeris dalam arahan dan tulis ayat sebenar klinik di bawahnya. Kerangka asas bersifat universal, manakala ayatnya kekal di mana pengguna berada.
Perubahan pada cara menyusun taklimat pertama
Taklimat pertama anda boleh terdiri daripada satu perenggan sahaja:
Build a page with a header (the name and three links), a hero (one sentence and one button), three sections, a row of cards that becomes a single column on a narrow screen, and a footer with the address as text.
Di bawahnya, dalam bahasa anda, tulis apakah kandungan tiga section tersebut. Model AI tidak memerlukan bahasa anda untuk meletakkan header. Anda memerlukan bahasa anda sendiri untuk memutuskan bahawa section tersebut berisi waktu operasi, harga, dan cara tiba — bukannya slogan yang diulang tiga kali.
Ini ialah halaman yang sebenarnya diperlukan oleh hampir setiap organisasi kecil. Ia juga halaman yang akan dihias secara berlebihan oleh model AI jika anda cuma menyatakan “moden dan bersih”. Moden bukannya kawasan halaman. Pengepala, hero, bahagian, pengaki, navigasi, dan kad ialah kawasan halaman yang nyata. Pelajari istilah ini, tampalkannya dalam bahasa Inggeris, dan kekalkan fakta maklumat dalam bahasa orang yang akan membacanya.
Keputusan seterusnya bukanlah memilih kawasan lain, tetapi menentukan perkara yang berlaku apabila halaman perlu bertanya sesuatu kepada pengguna atau menunjukkan set fakta lain tanpa menghantar mereka ke halaman baharu. Itu bentuk yang berbeza daripada section, dan akan dibahas dalam artikel seterusnya.