Cara Menyisipkan Gambar Dan Tabel Pada Halaman Website

Menyisipkan Gambar Dan Tabel Pada Halaman Website

Okeh... Selanjutnya kita coba percantik lagi website sederhana kita tadi dengan memasukan gambar ke dalam website. Saya tahu sekarang Anda sudah tidak sabar lagi ingin mengetahui bagaimana caranya memasukan gambar ke dalam sebuah halaman website. ;-)

Menyisipkan Gambar

Anda masih membuka file "index.htm"-nya 'kan? Ok, good. Oya sebelumnya kita juga harus menyiapkan gambar yang akan dimasukan ke dalam websitenya.

 Seperti biasa, pastikan file gambarnya kita masukan terlebih dahulu ke folder 'website'. Sama seperti sebelumnya ketika kita akan mempersiapkan sebuah file gambar untuk background.

Ok, sekarang kita mulai menyisipkan gambar kedalam halaman website caranya :

1. Untuk lebih memudahkan kita melihat hasilnya nanti, coba kembalikan background halaman web tadi ke dalam background warna kuning.
   
     Langkah Selanjutnya Klik menu "Insert", lalu pilih menu "Picture", kemudian pilih menu "From File".
   
   Kita coba ulangi lagi langkahnya : Insert => Picture => From File
2. Pilih gambar yang akan dimasukan ke dalam halaman website, lalu klik tombol "Insert". Pada contoh ini, kita akan coba masukan gambar dengan nama file 'gambar.jpg'.
   
   
3. Nah kita coba lihat hasilnya sekarang:
   
   

Waaahhh.... kereennnn.....:-)

Sekarang kita  sudah bisa memasukkan gambar ke dalam halaman website, mudah bukan?! :)

Menyisipkan Tabel

Selanjutnya kita akan belajar menyisipkan tabel pada halaman website. Fungsi tabel di dalam desain website ini penting.

Karena dengan tabel ini, kita bisa mengatur halaman website agar lebih cantik lagi dan memudahkan kita dalam merancang sebuah website yang baik.

Oya, sebelumnya kita bahas sedikit mengenai beberapa bagian penting dari tabel, yaitu cell, row dan column. Cell adalah bagian tabel yang terdiri dari 1 row dan 1 column. Sedangkan row adalah cell yang berjajar dalam urutan baris, dan column adalah cell yang berjajar dalam urutan kolom. Untuk lebih jelasnya mari kita lihat gambar di bawah ini:

  Tabel dengan 3 column, 2 row dan 6 cell. Kita lanjutkan kembali, sekarang saatnya kita praktekan. Kita akan memindahkan posisi gambar menjadi sejajar horizontal dengan posisi teks. Langkah-langkahnya sebagai berikut:

1. Sebelumnya, pindahkan dulu posisi kursor tepat di bawah garis judul / atau sebelum tulisan 'Halaman Utama', lalu klik menu "Table", kemudian pilih menu "Insert", lalu klik menu "Table".
   
   Mari kita coba ulangi lagi urutannya: Table => Insert => Table.
   
   
2. Selanjutnya akan muncul kotak dialog "Insert Table". Untuk Latihan membuat table ini, Kita akan mencoba memasukan link menu dan gambar kedalam table yang nanti akan kita buat, untuk itu kita hanya butuh 2 row (baris) dan 3 columns (kolom) saja. Itu sebabnya di kolom size rows kita isi dengan 2, dan di kolom columns kita isi dengan 3.
   
   
3. Lalu di kotak dialog itu juga ada menu "Alignment". Menu ini berfungsi untuk mengatur posisi tabel, apakah mau rata kiri, rata kanan, atau di tengah halaman website. Nah, kita coba dulu posisinya di tengah-tengah, kita isi kolom ini dengan pilihan "Center".
4. Di dalam kotak dialog tersebut, juga ada menu "Specify Width". Menu ini berfungsi untuk mengatur lebar tabel. isi saja kolom ini dengan 680 in pixel. Nantinya anda bisa mengatur lebar tabel sesuai kemauan dan kebutuhannya.
5. "Cell Padding" di isi dengan '1' dan "Cell Spacing" kita isi dengan '2'.
6. Selanjutnya, ada juga menu "Border Size", menu ini berfungsi untuk mengatur ketebalan sisi-sisi tabel. Kalau kita isi dengan 0 maka sisi-sisi tabel tidak akan kelihatan. Tapi karena kita masih belajar dan ingin mengetahui bagaimana bentuk tabel di dalam halaman website ini, maka kita isi kolom ini dengan 1.
7. Setelah selesai, lalu klik tombol "OK".
8. Lihatlah sekarang tabel sudah terbentuk tepat berada di bawah gambar garis judul.
   
   

Menyisipkan Gambar ke dalam Tabel

Selanjutnya, kita masukan gambar Bunga Matahari ke dalam tabel di kolom 2 dan 3. Caranya sebagai berikut:

1. Klik gambar Bunga Matahari. Setelah itu, klik tombol kanan mouse, lalu pilih menu "Copy". Kemudian, pindahkan kursor mouse ke tabel Baris ke-2 kolom ke-2, lalu klik kembali tombol kanan mouse dan pilih menu "Paste". Setelah itu pindahkan kursor mouse ke tabel Baris ke-3 kolom ke-3, lalu klik kembali tombol kanan mouse dan pilih menu "Paste".
2. Nah, Gambar Matahari sudah berada di kedua kolom tersebut!
   
   
3. Tapi... misi kita belum selesai. :-) Selanjutnya blok/highlight semua link menu yang ada di halaman website tersebut kecuali Tulisan Halaman Utama dan Menu Utama. Setelah itu, klik tombol kanan mouse dan pilih menu "Cut". Selanjutnya, pindahkan kursor mouse ke table baris ke-2 kolom ke-1, kemudian klik kembali tombol kanan mouse dan pilih menu "Paste". Nah, teks yang kita buat sekarang sudah berada di dalam table Baris ke-2 kolom ke 1, berdampingan dengan gambar.
   
   
4. Selanjutnya pada kolom ke-1 baris ke-1 kita isi dengan tulisan "Menu Utama", Pindahkan tulisan Menu Utama yang berada di bawah ke dalam kolom ke-1 baris ke-1. Caranya sama seperti ketika memindahkan Link Menu.
5. Selanjutnya pada Baris ke-1 kolom ke 2, Ibnu isi dengan tulisan 'Gambar 1', dan pada Baris ke-2 kolom ke-3, kita isi dengan Tulisan 'Gambar 2'
   
   
6. Agar tampilannya terlihat lebih rapi, kita harus menyesuaikan antara lebar kolom dan lebar gambar, untuk menyesuaikannya, kita bisa mengaturnya melalui 'Cell Properties', caranya klik kanan pada kolom 2, selanjutnya pilih 'Cell Properties'.
   
   
7. Setelah itu akan muncul kotak dialog 'Cell Properties',
   
   
8. Pada menu "Specify Width" isi dengan ukuran lebar gambar, dalam contoh ini lebar gambarnya adalah 179 pixel, maka kolom specify width nya kita isi dengan in 179 pixel. Kemudian klik tombol OK.
9. Lakukan hal yang sama pada kolom 3, ubah lebarnya "Specify Width" sesuaikan dengan ukuran gambar yang Anda masukkan.
10. Lihat inilah hasilnya :
    

Bagus kan..:-)

Mewarnai Latar Tabel

Wah, jadi pengen tahu lebih banyak lagi nih. OK, kita akan coba berkreasi lagi dengan tabel. Kita akan rubah warna latar tabel yang ada di Baris 1.

Caranya sebagai berikut:

1. Blok/highlight semua kolom yang ada pada baris ke-1, lalu tekan tombol kanan mouse dan pilih menu "Cell Properties".

"Ke-tiga kolom pada baris ke 1 dalam keadaan terblock/highlight, selanjutnya klik kanan pada kolom yang sedang ter-highlight tersebut"

2. Selanjutnya akan muncul dialog properties. Mari kita fokus dulu pada menu "Background". Untuk memilih warna, klik menu drop down "Color".
   
   
3. Dalam latihan ini kita akan memasang background tabel dengan warna Silver. Pilihlah warna Silver dan akhiri dengan menekan tombol "OK".
4. Sekarang kita lihat hasilnya :
   
   
   "Sip! Sekarang sudah bisa memberi warna latar pada table"

Menjadikan gambar sebagai Background Tabel

Fungsi lain yang bisa diterapkan pada tabel adalah memasukan gambar (image) sebagai latar belakang tabel. Coba perhatikan gambar di bawah ini:


Perhatikan latar belakang tabel pada baris ke-2 kolom 1 yang tadinya berwarna kuning kini berubah menjadi gambar "Kertas melipat".

Mari kita coba ubah warna latar belakang tabel kita pada baris ke-2 kolom 1 dengan memasukan gambar "Kertas melipat". sebagai pengganti warna latar, caranya sbb:

1. Arahkan kursor pada baris ke-2 kolom 1 lalu klik tombol kanan mouse dan pilih menu 'Cell Properties' . Selanjutnya akan tampil jendela tampilan 'Cell Properties' seperti gambar di bawah ini:
   
   
2. Perhatikan pada kolom 'Background'. Aktifkan fasilitas 'Use background picture' dengan cara meng-klik kotak kecil yang ada disampingnya.
3. Klik tombol 'Browse' untuk mencari gambar yang ingin kita jadikan background.
4. Pada contoh ini kita masukan gambar 'Kertas Melipat' dengan nama file 'kertas.png'. Klik pada file gambar yang akan dijadikan background lalu klik tombol 'Open'.
   
   
5. Terakhir klik tombol 'OK'.

Nah selesai sudah, cobalah lihat hasilnya. Apabila gambar dijadikan sebagai background pada sebuah tabel maka gambar tersebut akan ditampilkan berulang-ulang hingga memenuhi area tabel tersebut.

Dengan perhitungan yang tepat maka kita bisa memanfaatkan fasilitas ini untuk mendesign sebuah tampilan website yang indah seperti membuat tampilan web dengan efek border/garis pinggiran web yang ber-gradasi seperti pada web.

 
Ini adalah salah satu dari sekian banyak kegunaan table di dalam sebuah website. Bahkan seorang professional web designer pun banyak memanfaatkan table di dalam setiap desain mereka. Apabila Anda bisa memanfaatkannya dengan tepat, maka Anda pun bisa menjadi seorang webmaster handal. Jadi... teruslah berlatih, jangan takut untuk bereksperimen dan tetap semangat!