Membuat Website Online Shop Dengan Frames

Gambar 1. Screenshot Codingan Main Frame

Gambar2. Screenshot Codingan Top Frame

Gambar 3. Screenshot Codingan Left Frame

Gambar 4. Screenshot Codingan Halaman Index

Gambar 5. Screenshot Codingan Halaman Catalog

Gambar 6. Screenshot Codingan Halaman Form Pemesanan

Gambar 7. Screenshot Tampilan Halaman Utama

Gambar 8. Screenshot Tampilan Halaman Katalog

Gambar 9. Screenshot Tampilan Form Pemesanan

Logika :

Website yang saya coba buat untuk Laporan Akhir ini adalah website online shop menggunakan Frames. Untuk membuat website ini kita harus membuat framenya terlebih dahulu sebelum membuat halaman isinya. Didalam website ini terdapat 3 Frames yaitu Main Frame, Top Frame dan Left Frame serta halaman isi yang terdiri dari halaman index, katalog dan form pemesanan dimana setiap halaman ini saling berhubungan.

• Membuat Frame

Untuk membuat frame klik insert >> html >> frame >> lalu pilih jenis frame yang ingin digunakan. Pada website ini saya menggunakan Top Nested Left Frame, dimana terdapat 3 bagian frame yaitu top, left dan main.

• Mengatur Warna Background dan Tulisan agar lebih menarik

Untuk mengatur warna background digunakan tag < background bgcolor=”Jenis warna” > Jenis warna tadi bisa dituliskan dalam bahasa inggris misalnya “Red” atau dengan menuliskan kode binary warna yang ingin digunakan.

Tag < pre > digunakan untuk merapikan baris, misalkan kita memberi tab maka tab itu juga akan dieksekusi. Apabila kita tidak menggunakan tag < pre > maka tab itu tidak akan dieksekusi.

Untuk mengatur jenis huruf, syntax yang digunakan adalah < font face=”Verdana, Geneva, sans-serif” >. Syntax ini dituliskan sebelum menuliskan kalimat. Setelah selesai menulis kalimat jangan lupa untuk menutupnya dengan < /font >. Tag < br > digunakan untuk beralih ke baris baru. Tag < center > digunakan untuk membuat tulisan menjadi rata tengah.

• Menyisipkan Gambar

Untuk menyisipkan gambar dapat menggunakan tag < img src=”lokasi gambar” > dan diakhiri dengan < /img >. Src adalah singkatan search dimana tag tersebut akan mencari dimana gambar itu disimpan. Biasanya gambar-gambar yang ingin disisipkan harus disimpan kedalam sebuah folder yang sama agar memudahkan dalam pencariannya. Jika ingin mengatur ukuran lebar dan tingginya maka kita tinggal menambahkan dengan syntax < img src=”gambar1.jpg” width=”1024” height=”768” >< /img >.

• Membuat Table & Link

Untuk membuat table, dimulai dengan tag < table > dan diakhiri dengan < /table >. < tr > merupakan syntax untuk baris dan < td > untuk kolom.

Jika halaman website ingin dibuat saling terhubung satu sama lain maka kita perlu untuk membuat sebuah link. Cara membuat sebuah link yaitu dengan menggunakan tag < a href=”link yang ingin dituju.html” > dilanjutkan dengan membuat sebuah objek tulisan atau gambar untuk diklik dan diakhiri dengan tag penutup < /a >.