Internet merupakan jaringan rangkaian komputer dengan rangkaian komputer lain yang sangat luas mencakup di seluruh dunia. Internet sangat berguna untuk kita berkomunikasi dan bertukar informasi, fail, data, suara, gambar dan sebagainya antara individu dan manusia di seluruh dunia. Website juga dikenali sebagai laman web iaitu fail yang mengandungi kambinasi teks dan kod "markup". Bila dokumen dilihat dalam pelayar web, ia menunjukan sebuah laman web tetapi apabila dilihat dalam editor teks seperti Notepad ia hanya memaparkan teks dan kod "markup".
Sebelum anda mula untuk membuat laman web syarikat anda atau laman web peribadi anda, anda perlu memutuskan terlebih dahulu maklumat yang perlu anda terbitkan dalam Internet. Perancangan tersebut dapat memudahkan anda merancang dan membuat laman web anda.Laman Peripadi
Sebahagian besar laman web di Internet merupakan laman web peribadi yang di buat oleh individu. Laman web peripadi membolehkan anda berkongsi maklumat dengan rakan-rakan, keluarga dan lain-lain. Berikut adalah beberapa jenis maklumat yang biasanya terdapat pada laman web peribadi.- Latar Belakang Peribadi
- Hobi
- Minat
- Hubungi
- Maklumat Peribadi Galeri Gambar
- Pautan ke laman web lain
Laman Perniagaan
Semakin banyak syarikat menyedari potensi Internet dan mereka ingin menerbitkan laman-laman web mereka dalam Internet kerana Internet adalah alat pemasaran yang kuat. Melalui Internet mereka boleh menjual produk dan perkhidmatan dan juga dapat mengiklankan syarikat mereka ke seluruh dunia melalui perkhidmatan Internet. Berikut adalah beberapa jenis maklumat yang biasanya terdapat pada halaman web perniagaan.- Latar Belakang Syarikat
- Misi Syarikat
- Visi Syarikat
- Undang-undang
- Maklumat Perhubungan
- TempahanCompany
Alat yang anda perlu untuk menulis teks HTML anda adalah Notepad atau Pspad.
Setelah anda mempunyai alat tersebut, anda boleh mula belajar untuk membuat sebuah laman web.
- Buat Sebuah Fail HTML
Sebuah file HTML hanyalah sebuah teks fail yang disimpan dalam .html atau .htm.- Buka editor komputer anda (Notepad jika anda menggunakan Windows atau TextEdit jika anda menggunakan Mac). Anda juga boleh menggunakan editor HTML khas seperti Dreamweaver atau FrontPage jika anda inginkan.
- Buat file baru
- Simpan fail sebagai (nama file anda).html contohnya: demo.html
- Membuat Kod HTML
Berikut adalah Contoh Kod HTML yang mudah:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
Klik Untuk Lihat DEMO
<html>
<head>
<title>My Website</title>
</head>
<body>
<p>Welcome to my WEBSITE</p>
</body>
</html>
- Lihat Hasil dalam pelayar web anda
Sama ada anda arahkan ke fail HTML anda, kemudian klik dua kali di atasnya ATAU
Buka pelayar web komputer anda seperti Mozilla Firefox, Google Chrome, Internet Explore dll. Pilih fail> Buka, Kemudian klik "Browse". Sebuah kotak dialog akan muncul menggalakkan anda untuk menavigasi ke fail. Arahkan ke fail HTML anda, lalu pilih "Open".
Penjelasan Untuk Tag HTML Yang Penting
- <!DOCTYPE ...> elemen ini adalah untuk memberitahu pelayar tentang versi dokumen HTML yang digunakan.
- <html> dianggap sebagai wadah untuk semua tag lain boleh berada di dalamnya kecuali tag DOCTYPE!.
- <head> mengandungi maklumat yang tidak biasanya dilihat dalam pelayar anda seperti tag meta, Javascript dan CSS. Walau bagaimanapun tag <title> boleh dikecualikan dalam hal ini.
- <title> dipaparkan di bar tajuk pelayar (berada di bahagian paling atas pelayar).
- <body> adalah kawasan utama untuk kandungan anda. Di sinilah sebahagian besar kod anda berada atau diihat.
- <p> menyatakan perenggan untuk teks laman web anda.
Penutup Tag anda
Seperti yang disebutkan dalam pelajaran sebelumnya, anda boleh melihat pembuka tag dan penutup tag, isi tag akan ditempatkan di antara mereka. Walau bagaimanapun ada beberapa pengecualian untuk peraturan ini.
Penutup tag sedikit berbeza dengan pembuka tag. Penutup tag mengandungi garis miring (/) selepas tanda < tersebut. Ini memberitahu pelayar bahawa tag ini telah ditutup.HURUF BESAR atau huruf kecil?
Walaupun kebanyakan pelayar akan memaparkan laman anda, terlepas dari terlepas kes yang anda gunakan, anda perlu sentiasa memastikan kod HTML anda dalam huruf kecil. Ini membantu anda daripada masalah kod XML untuk masa depan.Betul: <html>
Salah: <HTML>
1. Tag Meta
Tag meta biasanya digunakan dalam tag head. Terdapat 3 atribut yang penting dalam tag meta adalah author, decription dan keyword. Tag meta ini tidak perlu di tutup dengan penutup tag seperti tag-tag html yang lain.
- author, berfungsi untuk menjelaskan perancang halaman web.
- description, atribut ini berfungsi semasa kita mengunakan mesin carian (search engine). Mesin carian akan mencari deskripsi apa laman web anda melalui atribut ini.
- keyword, berfungsi untuk mesin carian secara automatik mencari carian dalam database anda.
<html>
<head>
<title>My Website</title>
<meta name="Author" content="Name of Planning WebSite">
<meta name="Description" content="Site description">
<meta name="Keywords" content="personal">
</head>
<body>
</body>
</html>
2. Tag Body
Pada topic sebelumnya, anda telah membelajari serba sedikit tentang tag body. Di sini anda akan mempelajari lebih lanjut tentang tag body dan atribut-atribut yang boleh terdapat di dalamnya. Seperti yang anda tahu, tag body adalah pasangan tag merangkuni seluruh isi kandungan laman web anda. Beberapa atribut yang boleh digunakan dalam tag body anda adalah:
- bgcolor, atribut ini digunakan untuk menentukan warna latar belakang seluruh laman web anda. Anda boleh mengunakan sama ada nama warna seperti red, blue, green, black atau sebagainya, atau mengunakan kod warna dalam html seperti #FF0000, #FFFFFF, #C0C0C0 dan sebagainya.
- text, atribut ini digunakan untuk menentukan warna teks pada seluruh laman web anda. Seperti atribut bgcolor, anda boleh gunakan sama ada mengunakan nama warna atau kod warna dalam html.
- link, digunakan untuk menentukan warna hyperlink sebelum di klik.
- alink, atribut ini digunakan untuk menentukan warna pautan apabila anda klik pautan tersebut.
- vlink, atribut ini digunakan untuk menentukan warna pautan setelah pautan itu dikunjungi.
<html>Klik Untuk Lihat DEMO
<head>
<title>Attribute in body tag</title>
</head>
<body bgcolor=#E0FFFF text=black link=#153E7E alink=green vlink=red ><a href="http://www.sabah.net.my/" target=_blank> Sabah.Net </a> Official Website
</body>
</html>
- background, anda boleh menggunakan atribut ini menampilkan imej sebagai latar belakang laman web anda mengantikan atribut bgcolor anda.
<html>Klik Untuk Lihat DEMO
<head>
<title>Attribute in body tag</title>
</head>
<body bgcolor=#E0FFFF text=black link=#153E7E alink=green vlink=red background="../images/background.jpg" > <a href="http://www.sabah.net.my/" target=_blank> Sabah.Net </a> Official Website
</body>
</html>
3. Tajuk (Header)
Anda boleh menggunakan tag header untuk menunjukan awalan suatu header atau sebagai tajuk halaman. Terdapat 6 peringkat header yang biasa digunakan bermula dari h1 untuk yang paling penting sehingga h6 untuk yang kurang penting.
Contoh Kod HTML<html>
<head>
<title>Header</title>
</head>
<body>
<h1>Header 1</h1>
<h2>Header 2</h2>
<h3>Header 3</h3>
<h4>Header 4</h4>
<h5>Header 5</h5>
<h6>Header 6</h6>
</body>
</html>
4. Teks Tebal
Anda boleh menetapkan teks tebal (Bold) dengan tag <b>. "b" merupakan singkatan dari perkataan bold yang bermaksud tebal.
Contoh Kod HTML<html>
<head>
<title>Bold</title>
</head>
<body>
<b>This text is bold.</b>
</body>
</html>
5. Italik
Anda menetapkan teks italik (Italics) dengan tag <i>. "i" merupakan singkatan dari italics yang bermaksud huruf miring.
Contoh Kod HTML<html>
<head>
<title>Italic</title>
</head>
<body>
<i>This text is italicised.</i> </body>
</html>
6. Teks Bergaris (Underline)
Tag <u> digunakan untuk memberi garis bawah pada suatu teks. "u" merupakan singkatan dari underline yang bermaksud garis bawah.
Contoh Kod HTML<html>
<head>
<title>Underline</title>
</head>
<body>
<u>This text is underline.</u>
</body>
</html>
7. Perenggan (Line Breaks)
Contoh Kod HTML<html>
<head>
<title>Line Breaks</title>
</head>
<body>
<p>Here is a...<br />line break.</p>
</body>
</html>
8. Garis Melintang (Horizontal Rule)
Merupakan tag html yang menggunakan tag <hr> untuk membuat garis melintang pada halaman anda. "hr" adalah singkatan dari perkataan Horizontal Rule yang bermaksud garis melintang.
Contoh Kod HTML<html>
<head>
<title>Horizontal Rule</title>
</head>
<body>
Here's a horizontal rule... <hr /> ...that was a horizontal rule
</body>
</html>
9. Senarai Tidak Bernombor
Contoh Kod HTML<html>
<head>
<title>Bulleted List</title>
</head>
<body>
<ul>
<li> Bulleted 1</li>>
<li> Bulleted 2</li>
<li> Bulleted 3</li>
</ul>
</body>
</html>
10. Senarai Bernombor
Perhatikan, bahawa satu-satunya perbezaan antara senarai bernombor dan senarai tidak bernombor adalah huruf pertama dari senarai ("o" untuk senarai bernombor, "u" untuk senarai tidak bernombor).
Contoh Kod HTML<html>
<head>
<title>Numbered List</title>
</head>
<body>
<ol>
<li>Bulleted 1</li>
<li>Bulleted 2</li>
<li>Bulleted 3</li>
</ol>
</body>
</html>
11. Pilihan (Option)
Tag Select digunakan untuk menampilkan daftar pilihan dalam bentuk drop down. Tag Select mesti digunakan bersama tag option. Tag Option digunakan untuk menampilkan pilihan-pilihan yang terdapat dalam daftar pilihan yang ditampilkan oleh tag select.
Contoh Kod HTML<html>
<head>
<title>Option</title>
</head>
<body>
<select name="options">
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
</select>
</body>
</html>
Atribut-atribut yang anda boleh gunakan di dalam tag select adalah seperti berikut:
- name, digunakan sebagai pengenalan bagi tag select anda.
- value, merupakan atribut yang sangat penting dalam tag ini kerana nilai yang akan dikirimkan pada kod memproses input adalah nilai yang diisikan pada atribut ini. Contohnya, berdasarkan kod html sebelumnya, jika kamu memilih "pilihan 2" maka kod yang dikirimkan pada kod program memproses adalah "2" kerana "2" merupakan nilai yang dimasukkan pada atribut value untuk "pilihan 2".
- multiple, merupakan atribut yang digunakan untuk menampilkan pilihan lebih daripada satu. Biasanya penggunaan atribut ini diikuti dengan atribut size.
- size, digunakan untuk menampilkan pilihan lebih daripada satu.
- selected, merupakan atribut tambahan pada tag option dimana ia digunakan untuk menjadikan suatu pilihan sebagai pilihan automatik terpilih apabila pengguna tidak menggantikan pilihan yang ada.
<html>Contoh Kod HTML
<head>
<title>Option</title>
</head>
<body>
<select name="Option" multiple size=3>
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
</select>
</body>
</html>
<html>
<head>
<title>Option</title>
</head>
<body>
<select name="Option">
<option value="1">Option 1</option>
<option value="2" selected>Option 2</option>
<option value="3">Option 3</option>
</select>
</body>
</html>
12. Font
Anda boleh menggunakan tag Font untuk menentukan penampilan pada teks anda. Anda boleh menentukan warna, ukuran dan jenis huruf yang anda ingin gunakan.
Contoh Kod HTML<html>
<head>
<title>Font</title>
</head>
<body>
<font color=#7F00FF size="5">My choice font</font>
</body>
</html>
Beberapa atribut yang boleh digunakan di dalam tag font adalah:
- size, untuk menentukan ukuran pada teks anda.
- color, digunakan untuk menentukan warna pada teks anda. Bagi memudahkan anda mendapatkan kod warna dalam html anda boleh mengunakan "Colorpic" atau apa-apa alat memilih warna yang anda ada.
- face, digunakan untuk menentukan jenis huruf pada teks anda. Jenis huruf yang dipilih mestilah jenis yang sedia ada dalam komputer anda.
<html>
<head>
<title>Font</title>
</head>
<body>
<font face="arial black">Text in Arial Black</font>
</body>
</html>
13. Form
Tag <form> digunakan untuk memasukkan formula untuk pemprosesan data yang anda isi dalam tag input. Atribut yang penting terdapat dalam tag form adalah action dan method.
- action, digunakan sebagai formula pemprosesan data input. Formula ini mestilah logik dan ditulis dalam bahasa program yang difahami dalam web seperti html, asp, php dll.
- method, digunakan untuk menentukan cara penghantaran data ke formula pemprosesan data anda. Anda boleh menentukan sama anda ingin menggunakan method "get" atau "post". Perbezaan antara method ini adalah, jika anda mengunakan method = get, anda dapat melihat nilai data yang anda telah isi dalam input pada medan alamat pelayar web anda. Sebaliknya, penggunaan method = post, pula tidak menampilkan nilai data tersebut.
14. Input
Tag <input> digunakan untuk memasukkan data. Biasanya tag ini digunakan dalam tag form untuk memproses data atau menghantar data melalui tag input.
Atribut type adalah penting untuk menentukan jenis type yang anda ingin gunakan. Beberapa atribut type yang anda boleh gunakan dalam tag input adalah:
- type = text, atribut ini menghasilkan kotak input untuk sebaris teks.
- type = checkbox, atribut ini digunakan untuk memasukkan data pilihan dan menggalakkan anda membuat lebih daripada satu pilihan.
- type = radio, atribut ini digunakan untuk memasukkan data pilihan tetapi menggalakkan anda memilih hanya satu pilihan muktamad.
- type = password, atribut ini menggalakan anda memasukan kod rahsia anda ke dalam input. Input yang dimasukan berupa simbol untuk merahsiakan teks atau kod yang anda masukkan.
- type = submit, atribut ini menghasilkan bebutang (button) yang menggalakkan anda mengklik button untuk menghantar data yang anda telah isi. Atribut ini mestilah diikuti dengan proses pada action dalam tag form.
- type = reset, atribut ini digunakan untuk menghasilkan bebutang (button) yang menggalakkan anda mengklik button untuk mengosongkan semula data yang telah anda isi.
<html>Contoh Kod HTML
<head>
<title>Bold</title>
</head>
<body>
Input Text: <input type="text" name="input_text" />
</body>
</html>
<html>Contoh Kod HTML
<head>
<title>Input</title>
</head>
<body>
<input type="checkbox" name="checkbox 1"> Checkbox 1
<input type="checkbox" name="checkbox 2"> Checkbox 2
<input type="checkbox" name="checkbox 3"> Checkbox 3
</body>
</html>
<html>Contoh Kod HTML
<head>
<title>Input</title>
</head>
<body>
<input type="radio" name="sex" value="Female"> Female
<input type="radio" name="sex" value="Male"> Male
</body>
</html>
<html>Contoh Kod HTML
<head>
<title>Input</title>
</head>
<body>
Password: <input type="password" name="password" />
</body>
</html>
<html>Contoh Kod HTML
<head>
<title>Input</title>
</head>
<body>
<input type=submit value=Submit>
</body>
</html>
<html>
<head>
<title>Input</title>
</head>
<body>
<form action="" method=post>
Your Name: <input type=text name="names">
<input type=reset value=Reset>
</form>
</body>
</html>
15. Textarea
Tag <textarea> digunakan untuk menggalakkan anda mengisi text ke dalam kekotak teks dengan jumlah yang banyak.
Contoh Kod HTML<html>
<head>
<title>Textarea</title>
</head>
<body>
<textarea name="textarea_1" cols=40 rows=5> Write your text here </textarea>
</body>
</html>
Beberapa atribut yang boleh digunakan dalam tag textarea adalah:
- name, atribut ini digunakan sebagai pengenalan kepada textarea anda.
- cols, atribut cols adalah singkatan daripada columns. Atribut cols digunakan untuk menentukan ukuran lebar textarea anda.
- rows, atribut rows digunakan untuk menentukan ukuran tinggi textarea anda.
- readonly, atribut ini hanya membenarkan anda membaca dan menyalin teks di dalam textarea tetapi tidak dapat mengubah teks tersebut.
- disabled, atribut ini mengelak anda daripada mengubah dan menyalin teks di dalam textarea. Anda hanya digalakkan untuk membaca teks yang dipaparkan di dalamnya.
<html>Contoh Kod HTML
<head>
<title>Textarea</title>
</head>
<body>
<textarea name="textarea_2" cols=40 rows=5 readonly> This text is only for the read-only </textarea>
</body>
</html>
<html>
<head>
<title>Textarea</title>
</head>
<body>
<textarea name="textarea_3" cols=40 rows=5 disabled> Sorry, you can not copy the text </textarea>
</body>
</html>
Pautan atau dikenali juga sebagai "hyperlink", ditakrifkan dengan menggunakan tag <a> atau dikenali juga sebagai elemen "anchor". Untuk membuat suatu "hyperlink", anda menggunakan tag dalam atribut href (href adalah singkatan daripada Hypertext Reference). Nilai atribut href adalah URL, atau, lokasi dimana link menunjukan ke.
Contoh Kod HTML<html>
<head>
<title>Links</title>
</head>
<body>
Visit the <a href="http://www.sabah.net.my/">Sabah.Net Website</a>
</body>
</html>
Membuka Pautan ke tetingkap baru atau tetingkap sedia ada /aktif
Anda boleh memutuskan sama ada membuka Pautan di tetingkap baru atau tetingkap aktif. Anda boleh melakukan ini dengan menggunakan atribut target. Misalnya, target = "_blank" untuk membuka Pautan di tetingkap baru.
Nilai-nilai yang boleh digunakan dalam atribut target adalah:
- _blank, Untuk membuka pautan ke tetingkap baru.
- _self, Untuk membuka pautan ke tetingkap sedia ada / aktif.
- _parent, Untuk membuka pautan dalam frame pada tetingkap.
- _top, Untuk membuka dalam pautan pada tetingkap aktif pelayar. Apabila klik frame bawah, pautan akan keluar pada frame atas.
<html>
<head>
<title>Bold</title>
</head>
<body>
Visit the <a href="http://www.sabah.net.my/" target="_blank">Sabah.Net Website</a>
</body>
</html>
Named Anchors
Anda boleh membuat link anda "lompat" ke bahagian lain dalam halaman yang sama menggunakan jangkar bernama (Named Anchors). Untuk menggunakan Name Anchors, anda perlu mencipta dua potong kod pertama untuk hyperlink.
1. Buat Named Anchors yang pertama dimana pengguna akan berakhir.
Contoh Kod HTML<html>
<head>
<title>Links</title>
</head>
<body>
<a name="top"><b>Link Targets</b></a>
</body>
</html>
2. Kemudian menjadikan hyperlink. Hal ini dilakukan dengan menyambungkan nama named Anchors dengan mendahului nama dengan simbol hash (#).
Contoh Kod HTML<html>
<head>
<title>Links</title>
</head>
<body>
<a name="top"><b>Link Targets</b></a>
<p>Some text here</p>
<p>Some text here</p>
<p>Some text here</p>
<p>Some text here</p>
<p>Some text here</p>
<p>Some text here</p>
<p>Some text here</p>
[<b><a href="#top">top</a></b>]
</body>
</html>
Pautan Email
Anda boleh membuat suatu hyperlink ke alamat email dengan menggunakan atribut mailto dalam tag anchor.
Contoh Kod HTML<html>
<head>
<title>Email Links</title>
</head>
<body>
<a href="mailto:support@sabah.net.my">Email Us</a>
</body>
</html>
Anda juga boleh mengisi subjek email bagi pengguna anda secara automatik,
Contoh Kod HTML<html>
<head>
<title>Email Links</title>
</head>
<body>
<a href="mailto:support@sabah.net.my?subject=Question&body=Dear Sir">Email Us</a>
</body>
</html>
Untuk memasukkan imej kepada laman web, anda harus menggunakan tag <img src>, untuk menentukan lokasi sebenar gambar tersebut.
Contoh Kod HTML<html>
<head>
<title>Images</title>
</head>
<body>
<img src="../images/sabah flag.png" width="250" height="150" alt="Sabah" />
</body>
</html>
Beberapa atribut yang boleh digunakan dalam tag img adalah:
- src, atribut ini digunakan untuk mencari kedudukan sebenar imej itu berada. Hal ini dapat mengelak anda daripada mendapat masalah paparan imej seperti berikut:
- width, digunakan untuk menentukan lebar paparan imej.
- height, digunakan untuk menentukan tinggi paparan imej.
- alt, merupakan alternatif teks yang digunakan untuk paparan imej sekiranya dalam kes tidak dapat memaparkan imej tersebut dalam pelayar anda.
<html>
<head>
<title>Table</title>
</head>
<body>
<table border=1>
<tr>
<th>Title</th>
<th>Member Name</th>
<th> Member ID</th>
</tr>
<tr>
<td rowspan=2>Ms. </td>
<td>Rochella</td>
<td>850603-12-5963</td>
</tr>
<tr bgcolor=#D2D2D2>
<td>Sylvia</td>
<td></td>
</tr>
<tr>
<td>Mr. </td>
<td>Ronald </td>
<td>821220-12-6598</td>
</tr>
</table>
</body>
</html>
Atribut-atribut asas yang boleh digunakan di dalam tag table adalah:
- <th></th>, memperluaskan sedikit dan teks tebal sebagai header table.
- <tr></tr>, digunakan sebagai baris dalam table.
- <td></td>, sebagai kotak untuk setiap teks di dalam table.
- border=" ", menentukan ketebalan sempadan table.
- width=" " , untuk menentukan lebar table dalam piksel.
- height=" " , menentukan tinggi untuk table dalam piksel.
- bgcolor=" " , menentukan warna table.
Want to create a Blog?
Blog kini semakin hangat seiringan dengan rangkaian social lain. Blog juga mempunyai pengaruh yang sangat besar kepada media massa dan pengguna internet yang lain di seluruh dunia. Sesetengah orang menjadikan blog sebagai laman web peribadi mereka yang utama. Semakin banyak syarikat yang terdorong untuk membuat bisnes melalui blog supaya mereka mudah membuat pengenalan, pengiklanan dan tempahan.
Masa kini terdapat puluhan perkhidmatan yang menawarkan anda untuk membuat blog dengan lebih mudah dan percuma. Antaranya seperti blogspot, wordpress, blogger, vox dll. Melalui mesin carian sahaja anda boleh mencari terlalu banyak jenis blog yang telah dimuatkan seperti blog politik, blog kesihatan dan kecantikan, blog agama, blog pendidikan dll.Bagaimana membuat Blog?
Anda boleh membuat blog dengan senang dengan menggunakan perkhidmatan perisian seperti wordpress. Anda boleh muat-turun perisian ini secara percuma melalui internet. Sekarang anda sudah mempunyai pengetahuan asas html, jadi ini dapat memudahkan anda untuk memahami perisian ini dengan mudah.Perbezaan antara blog dengan laman web anda adalah, blog lebih kepada rangkaian sosial dimana memudahkan anda berinteraksi dengan pengguna lain di seluruh dunia melalui rangkaian internet yang sama. Antara ciri-ciri yang harus terdapat dalam blog anda adalah:
- Anda mudah mengemaskini muatan anda dengan versi baru.
- Pengunjung blog anda boleh menghantar ulasan pada blog anda.
- Blog mudah untuk menukar tema, menambah link, mengaktifkan plugin dan menambah kategori.
- Automatik post.
- Blog boleh sebagai laman jualan atau peribadi.