membuatwebsite

Panduan Dasar Pembuatan Website Bagi

Pemula

Panduan Lengkap Yang Akan Mengajarkan Kepada Anda Mengenai:

Tahap-tahap persiapan membuat website Mengedit/format halaman website Meletakan gambar pada halaman website Membuat hyperlink, dll.

Oleh: Didit Ahadiat, ST

Technical Director “Asian Brain Internet Marketing Center”

Panduan Dasar Pembuatan Website Bagi Pemula Hak Cipta 2007, PT. Asian Brain Internet Marketing Center Dilarang keras memproduksi, memperbanyak dan mendistribusikan baik keseluruhan maupun sedikit pun bagian dari panduan belajar ini dalam bentuk apapun, tanpa izin tertulis dari PT. Asian Brain Internet Marketing Center. Jika Anda mendapatkan panduan belajar ini dari orang lain selain dari AsianBrain.com, berarti Anda telah mendapatkan salinan panduan belajar hasil bajakan. Untuk itu, mohon bantuan Anda dalam menghentikan pelanggaran hak cipta dengan menghubungi kami melalui: www.AsianBrainSupport.com Petunjuk Penggunaan Demi kenyamanan belajar, setiap anggota Asian Brain IMC sebaiknya men-download dulu dan mencetak paduan belajar ini sebelum membacanya. Namun Anda dilarang keras memproduksi, memperbanyak dan/atau mengedarkan panduan belajar ini dalam bentuk hardcopy maupun softcopy, tanpa izin tertulis dari PT. Asian Brain Internet Marketing Center.

http://www.asianbrainsupport.com/

DAFTAR ISI Pendahuluan ..................................................................................... 2 BAB 1 Persiapan Membuat Website ................................................... 3

1.1 Program Editor yang Diperlukan................................................3 1.2 Membuat Halaman Web...........................................................3

1.2.1 Mengatur Format Teks .................................................5 1.2.2 Membuat Hyperlink......................................................7

BAB 2 “PAGE PROPERTIES” & “SAVE FILE” ..................................... 13

2.1 Mengubah Page Properties .....................................................13 2.1.1 Ubah Title Web..........................................................13 2.1.2 Ubah Meta Tag..........................................................14 2.1.3 Ubah Background Web ...............................................17

2.2 Save File .............................................................................19 BAB 3 Menyisipkan Gambar & Tabel Pada Halaman Website ........... 21

3.1 Menyisipkan Gambar .............................................................21 3.2 Menyisipkan Tabel ................................................................23 3.3 Menyisipkan Gambar ke dalam Tabel .......................................25 3.4 Mewarnai Latar Tabel ............................................................28 3.5 Menjadikan gambar sebagai latar belakang (Background) Tabel ..29

BAB 4 Waktunya Latihan ................................................................. 32

1 “Panduan Dasar Pembuatan Website Bagi Pemula”

Asian Brain Internet Marketing Center

Pendahuluan Modul “Panduan Dasar Pembuatan Website bagi Pemula” ini dirancang agar Anda dapat membuat sendiri sebuah website yang menarik yang tentu saja dapat menunjang pekerjaan anda sebagai seorang Internet Marketer. Dalam panduan belajar ini akan dijelaskan dasar-dasar pembuatan website dan tool-tool yang biasa dipakai dalam membangun sebuah website. Diharapkan anda dapat membuat sendiri website anda, dan tidak tergantung pada web designer untuk memelihara website Anda terus menerus. Jika Anda bisa melakukannya sendiri, ini tentu saja akan menghemat uang Anda. ☺ Petunjuk Penggunaan Modul Panduan belajar ini berisi 4 bab utama. Ada baiknya Anda membaca modul ini di depan komputer Anda, sehingga anda bisa mempraktekkannya langsung. Modul ini diakhiri dengan latihan untuk me-review apa yang telah anda pelajari sebelumnya. Latihan ini dibuat agar anda dapat membiasakan diri dengan tool-tool yang sering dipakai dalam membuat website. Anda bisa juga bereksperimen sendiri dengan tool-tool yang ada pada program editor yang akan kita pelajari. Hal ini sangat berguna karena akan meningkatkan kreatifitas Anda dalam membuat website nanti. Khusus untuk BAB 4, isi materinya ada di dalam modul ‘Waktunya Latihan’. Materinya sengaja kami pisahkan untuk memudahkan Anda dalam mendownload file modul. Nah selamat belajar! ☺



BAB 1 Persiapan Membuat Website

1.1 Program Editor yang Diperlukan

Sebelum kita membuat halaman website, kita membutuhkan suatu program editor. Ada beberapa program editor yang bisa digunakan untuk pembuatan halaman website (web page). Beberapa contohnya yaitu: Microsoft FrontPage, Macromedia Dreamweaver, Notepad, Microsoft Office Publisher dan sebagainya. Untuk training kali ini, kita akan memakai program editor “Microsoft FrontPage 2002” (Saya asumsikan program ini sudah terpasang di komputer Anda yang berbasis Windows) .

1.2 Membuat Halaman Web

Peringatan Dini: Sebaiknya Anda berada di depan komputer ketika Anda membaca training ini dan menjalankan program “FrontPage” Anda, karena training ini memerlukan praktek langsung dan bukan sekedar teori semata… ah.. teooriii!:-) Tetap Semangat!: Anda pernah menulis dokumen menggunakan Microsoft Word? Bagi Anda yang pernah, maka membuat halaman website semudah menulis dokumen di “Word”. Bagi Anda yang belum pernah menggunakan “Word”, jangan khawatir karena pelajaran ini akan membuat Anda lupa bahwa dulu Anda pernah tidak bisa membuat website…. ;-) OK just relax, saatnya kita memulai pelajaran!! ☺

Langkah pertama, kita buat dulu folder khusus untuk menyimpan file latihan kita. Mulailah membuat folder dengan nama “Latihan” di dalam folder “Asian Brain IMC”. Selanjutnya mari kita mulai latihan dengan membuat website sederhana yang berisi: judul website, nama Anda, hobi, dan alamat email Anda. Mari ikuti langkah-langkah di bawah ini :

Jalankan program “Microsoft Frontpage”. Klik “Start” di bagian kiri bawah program Windows Anda, lalu klik “All Program”. Maka di bagian tersebut, akan terlihat sejumlah program. Cari dan klik program “Microsoft Frontpage” (biasanya berada di bawah program “Microsoft Excel”).



Buka halaman baru. Caranya, klik icon “Create a New Normal Page” yang berada di pojok kiri atas program “FrontPage”. Perhatikan gambar icon-nya di bawah ini.

Ini adalah Area Halaman Website kita

Klik icon ini untuk memulai

Menulis di area halaman website. Selanjutnya, tuliskan judul website,

nama, hobi, dan email Anda pada area halaman website. Untuk membuat paragraf baru tinggal tekan tombol “Enter” saja.

Lihat hasilnya. Nah, sampai tahap ini, marilah kita lihat hasilnya.

Perhatikan gambar di bawah ini, ini adalah hasil dari langkah-langkah yang telah Anda lakukan sejauh ini.



1.2.1 Mengatur Format Teks

Sekarang kita coba memodifikasi tulisan di dalam web ini, supaya tampilannya lebih menarik. Kita akan modifikasi teks pada tulisan “Belajar Membuat Website”. Mari kita ikuti 5 langkah mudah berikut ini :

1. Blok/highlight tulisan “Belajar Membuat Website” menggunakan mouse.

2. Lihat kotak drop down “Font Size” yang bertuliskan angka 3(12pt) yang berada di sebelah kanan kotak ‘drop down’ bertuliskan “Times New Roman”.

3. Ganti ukuran hurufnya (font) menjadi 6(24pt).

4. Tekan icon B yang ada di sebelah kanan menu drop down “Font Size” untuk cetak tebal.

5. Setelah itu, pindahkan posisi tulisannya agar berada di tengah-tengah area halaman website. Caranya dengan mengklik icon “Center” berikut ini:

Tekan icon B ini untuk cetak tebal

Tekan icon “Center” ini untuk mengatur posisi font di tengah

Mari kita coba ulangi 5 langkah untuk memodifikasi tulisan di atas: Blok teks => Klik drop down menu “Font size” => Pilih menu 6 (24pt) => Klik icon “B” => Klik icon “Center”.



Tampilan website Anda kemudian akan menjadi seperti ini:

Sekarang kita akan merubah warna pada tulisan “Belajar Membuat Website” (pastikan Anda sudah mem-blok/highlight tulisan tersebut).

Lalu arahkan panah mouse pada icon ini . Kemudian klik pada warna yang hendak Anda gunakan, dalam latihan ini cobalah klik warna pink.



Maka, hasilnya akan menjadi seperti ini:

Wow keren, pink mania... :-) OK, sampai tahap ini Anda sudah bisa: memasukan teks ke dalam halaman website, merubah ukuran teks, mengatur posisi teks dan sekaligus mewarnai teks… Very good!

1.2.2 Membuat Hyperlink

Selanjutnya mari kita tambahkan ‘Hyperlink’. Mungkin Anda pernah membuka website Yahoo atau Google. Di dalam website tersebut terdapat banyak bagian atau kalimat yang mengandung ‘link’. Kalau kita klik bagian yang mengandung link tersebut, maka kita akan dibawa ke halaman website baru yang ditunjuk oleh link tersebut, inilah yang disebut dengan hyperlink.

Sekarang perhatikan di dalam website kita ada tulisan “Asian Brain”, kita akan membuat hyperlink di tulisan tersebut. Sehingga apabila kita mengarahkan mouse kita dan mengklik tulisan “Asian Brain,” maka kita akan dibawa ke halaman website www.AsianBrain.com. Cara membuatnya adalah sebagai berikut:

Ikuti 4 langkah mudah ini:

Blok/highlight dulu tulisan “Asian Brain”. Kemudian arahkan panah mouse ke bagian yang sudah diblok tadi. Lalu tekan tombol kanan mouse. Kemudian klik menu “Hyperlink”.



http://www.asianbrain.com/

Ingat! Lakukan perlahan-lahan sesuai urutan. Mari kita coba ulangi lagi 4 langkah mudah tadi: Blok kata => Arahkan Pointer Mouse => Klik Kanan => Klik “Hyperlink”.

Langkah 3: Klik tombol kanan mouse, masih di sini juga

Langkah 2: Arahkan panah mouse ke sini

Langkah 1: Blok/Highlight Teks

Langkah 4: klik menu Hyperlink ini

Ketika Anda klik menu “Hyperlink” ini, maka akan muncul kotak dialog baru. Anda pasti merasa bingung di sini, karena kelihatannya banyak obyek yang harus diperhatikan. Namun jangan khawatir, lupakan sejenak semua obyek itu dan perhatikan pada satu obyek saja yaitu pada kolom “Address”.

Yup… perhatikan kolom “Address”, lalu masukan alamat lengkap website Asian Brain pada kolom ini. Mari kita sama-sama ketikkan http://www.asianbrain.com/, lalu klik tombol OK.

PENTING: Mungkin Anda akan menemukan kondisi dimana saat Anda klik tombol kanan mouse pada teks yang sudah di blok lalu Anda tidak menemukan menu ”Hyperlink”. Jangan panik....hal ini disebabkan karena fasilitas check spelling pada front page Anda masih aktif. Oleh karena itu matikan dulu fasilitas ini dengan cara masuk ke menu ”Tools” lalu pilih menu ”Page Options” lalu Anda hilangkan tanda check yang di bagian ”Check spelling as you type” lalu klik tombol ”OK”




Beginilah jadinya website kita setelah tulisan “Asian Brain” dijadikan hyperlink.

Perhatikan kolom ini saja OK

Inilah hasil teks yang sudah di-hyperlink

Masukan alamat website http://www.asianbrain.com/

di sini

Nah, itu tadi adalah cara untuk membuat hyperlink teks dimana link teks di arahkan/di link-kan ke sebuah alamat website tertentu. Sekarang bagaimana caranya membuat hyperlink yang diarahkan ke suatu halaman tertentu yang ada di dalam website kita sendiri? dalam contoh kasus ini Anda sudah membuat halaman website lebih dari satu.




Contoh: Anda sudah membuat 4 buah halaman website dengan nama file latih.htm, halaman-01.htm, halaman-02.htm dan halaman-03.htm. Untuk menghubungkan halaman yang satu dengan yang lainnya. Caranya sebagai berikut: 1. Buat daftar link menu yang akan Anda hubungkan, Contoh: karena

kita akan menghubungkan 4 buah halaman web maka kita akan menyiapkan 4 buat daftar teks menu yaitu: ‘Halaman 1’, ‘Halaman 2’, ‘Halaman 3’ dan ‘Halaman Utama’ . Gambar di bawah ini menunjukan 4 buah teks menu yang sudah disiapkan.

2. Highlight pada tulisan ‘Halaman 1’ lalu klik tombol kanan mouse dan

pilih menu ‘Hyperlink’



3. Pada kotak dialog ‘Edit Hyperlink’, perhatikan kolom ‘Look in:’ klik pada kolom ‘Look in:’ ini untuk mencari nama file halaman web yang akan dituju. Dalam contoh ini menu ’Halaman 1’ akan dihubungkan dengan halaman web yang sudah diberi nama file ‘halaman-01.htm’ .

Kalau sudah ketemu file halaman web yang Anda tuju selanjutnya Klik 1 x pada nama file tersebut lalu klik tombol OK. Dalam contoh ini ditunjukan file yang dituju adalah file dengan nama halaman-01.htm

4. Kita coba lakukan sekali lagi untuk menghubungkan teks menu

‘Halaman 2’. Highlight pada tulisan ‘Halaman 2’ lalu klik tombol kanan mouse dan pilih menu ‘Hyperlink’



5. Cari file halaman web dengan nama ‘halaman-02.htm’, lalu klik 1x pada nama file tersebut lalu klik tombol OK.

6. Lakukan hal yang sama untuk menghubungkan sisa menu lainnya.

Untuk menguji apakah Hyperlink yang sudah Anda buat tersebut sudah berjalan dengan baik, cobalah klik menu ‘Preview’ dan klik lah pada masing-masing link tersebut. Okay, sampai disini Anda sudah menguasai materi untuk memasukan teks ke halaman website, merubah ukuran teks, mengatur posisi teks, merubah warna teks, dan membuat hyperlink pada teks. Wow... lima materi kini sudah Anda kuasai… excellent! :-) PENTING: Sebelum Anda membuat link untuk menghubungkan halaman satu dengan yang lainnya, kumpulkan dulu semua file yang akan di link-kan ke dalam satu folder, hal ini untuk mengihindari kesalahan link ketika file web Anda di upload ke Hosting.



BAB 2 “PAGE PROPERTIES” & “SAVE FILE”

2.1 Mengubah Page Properties Selanjutnya kita akan membahas materi “Page Properties”.

Mari kita coba ubah “Page Properties” halaman website kita. “Page Properties” ini sangat penting agar halaman website kita lebih teratur dan optimal.

Pada bagian “Page Properties” ini, kita bisa merubah latar belakang (background) website, memasukan judul (title) website, memasukan meta tags, suara (tidak akan dibahas di materi ini) dan sebagainya. Kita akan fokus dulu pada bagian yang sangat penting, yaitu: title, meta tags, dan background. 2.1.1 Ubah Title Web

OK, sekarang ikuti langkah-langkah berikut ini:

Tempatkan panah mouse dimana saja di dalam area halaman website, lalu klik tombol mouse sebelah kanan, kemudian pilih menu “Page Properties”. Selanjutnya akan muncul kotak dialog “Page Properties”.

Anda mungkin akan merasa sedikit bingung di sini, karena banyak menu yang tampil. Tapi abaikan dulu sejenak menu-menu itu dan kita fokus saja pada kolom “Title”.

Kita Fokus di kolom title dulu ya



Di kolom “Title” ini, Anda bisa memasukan judul (title) apa saja. Pada latihan ini, kita masukan title “Belajar Membuat Website”. Biasanya title yang kita masukan selalu berhubungan dengan isi website kita. Title ini kelak akan muncul di bagian atas program internet browser Anda. Sederhananya title ini mirip dengan label.

Di sinilah title itu muncul

2.1.2 Ubah Meta Tag

Selanjutnya, kita fokus ke menu “Custom” (masih di kotak “Page Properties”). Cobalah Anda klik menu “Custom” ini. Kita akan mulai memasukan “Meta Tag” ke halaman website. Tapi, tunggu dulu! Apa sih meta tag itu? Meta tag adalah sekumpulan informasi yang kita masukan ke dalam halaman website di antara bagian “Head”. Meta tag ini tidak bisa dilihat dengan kasat mata, karena Anda tidak akan bisa melihat tulisan yang ada di meta tag ini menggunakan internet browser. Dalam latihan ini kita akan masukan dua jenis meta tag, yaitu “Meta Description” dan “Meta Keyword”. Pemasukan kedua jenis meta ini sangat penting. Tujuannya agar website kita menjadi optimal, sehingga website bisa dikenal oleh search engine. Pembahasan lebih jauh tentang hal ini bisa Anda pelajari di modul “SEO” (Search Engine Optimization). OK, cukup sudah teori singkatnya, sekarang mari kita lanjutkan kembali langkah yang tertunda tadi. Perhatikan lagi menu “Custom”.



Kolom “User variables”

Di dalam menu “Custom” ini ada dua kolom utama yaitu: kolom “System variables” dan kolom “User variables”. Mari sekarang kita fokus ke kolom “User variables” untuk mengisikan Meta Keyword dan Meta Description.

Klik tombol “Add” ini

Meta Keyword

Di dalam kolom “User variables” terdapat dua “Name” dan dua “Value”. Anda abaikan sejenak kedua “name” dan “value” tadi. Selanjutnya Anda klik tombol “Add”. Setelah Anda klik tombol “Add” maka akan keluar kotak dialog baru.

Isi kolom “Name” dengan tulisan “Keyword” dan isi kolom “Value” dengan tulisan “Ahmad, website, membuat website, belajar membuat website” (semua tanpa tanda kutip), lalu klik tombol OK.

Ingat! Kelak Anda harus mengisi kolom value ini sesuai dengan isi website Anda. Misalkan, isi website Anda nantinya membahas tentang motor, dan di dalam website Anda itu banyak tulisan yang



mengandung kata “cara merawat motor” dan “jual motor”, maka Anda disarankan memasukan kata “motor, cara merawat motor, jual motor” di kolom value tadi.

OK kembali lagi ke praktek kita, inilah hasilnya setelah kita tambahkan Meta Keyword:

“Meta Keyword” sudah berhasil kita tambahkan

Lihatlah Meta Keyword sudah masuk ke dalam kolom “User variables”.

Meta Description

Sekarang kita masukan Meta yang kedua yaitu “Meta Description”. Caranya sebagai berikut:

- Tekan lagi tombol “Add” yang ada di kolom “User variables”.



- Isi kolom “Name” dengan tulisan “Description” dan isi kolom “Value” dengan tulisan “Cara mudah dan cepat belajar membuat website” (semua tanpa tanda kutip), lalu klik tombol OK. Ingat! Kelak Anda bisa menyesuaikan isi kolom “value” ini sesuai dengan isi website Anda. Usahakan isi value description mengandung penggalan kalimat awal atau judul di website Anda. Sekarang kita coba lihat hasil kerja tadi:

“Meta Description” sudah berhasil kita tambahkan

Meta Description sudah berhasil kita tambahkan.

2.1.3 Ubah Background Web Selanjutnya kita akan fokus ke menu “Background”. Background berfungsi untuk memberi warna latar pada halaman website. Biasanya orang memberi warna latar belakang website, agar website-nya tampil lebih menarik. Sekarang coba Anda klik menu background yang ada di samping menu “General”.

Klik menu Background ini



Ingat! Saat ini abaikan dulu menu lainnya. Anda fokus saja pada menu “Colors Background”, seperti yang ditunjuk pada gambar di bawah ini.

Fokus pada menu ini saja ya

Ada dua pilihan format background yang bisa Anda pilih yaitu: Background Picture dan Colors Background. Sekarang kita fokus dulu pada format Colors Background. Dalam latihan ini kita akan memasang background warna kuning untuk halaman website kita biar agak sedikit genjreng ..:-).

Colors Background Cara memberi warna latar pada website kita, mula-mula klik menu Background (ditandai lingkaran merah) lalu pilih warna kuning dan akhiri dengan menekan tombol OK.

Kita ulangi kembali langkahnya: Klik Menu Background => Pilih Warna => Klik OK.

Mudah bukan, sekarang kita lihat hasilnya :



Wow.. benar-benar ngejreng! ☺ Okey, sejauh ini Anda sudah menguasai cara memasukan teks ke dalam website, mengubah ukuran teks, mengatur posisi teks, mengubah warna teks, memberi title pada website, memasukan Meta Tag ke dalam website dan memberi warna latar pada halaman website…. Yes! Sekarang 7 materi kini sudah Anda kuasai… excellento! 2.2 Save File

Untuk menyimpan file website Anda, caranya: klik menu “File” lalu klik menu “Save As”.

Kemudian akan muncul kotak dialog “Save As”, lalu simpan hasil kerja Anda tadi ke dalam folder “Latihan” dan beri nama file “latih.htm” (Ingat! Di langkah awal pelajaran ini Anda sudah diharuskan membuat folder “Latihan”). Setelah disimpan, Anda bisa melihat hasil kerja Anda tadi menggunakan program internet browser, salah satunya adalah “Internet Explorer” atau yang lebih dikenal dengan “IE”.



O..ya, ada sedikit teori tentang IE. Cara untuk melihat file “latih.htm” yang baru saja Anda simpan tadi adalah sebagai berikut:

- Jalankan program Internet Explorer. - Klik menu “File”, lalu klik menu “Open”.

- Kemudian akan muncul kotak dialog “Open” seperti nampak pada

gambar di bawah ini:

- klik tombol “Browse”, lalu cari nama file “latih.htm” yang telah

Anda simpan tadi lalu klik tombol “Open”, kemudain klik tombol “OK”.

Nah, sekarang Anda bisa melihat hasil kerja Anda menggunakan program Internet Explorer.



BAB 3 Menyisipkan Gambar & 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. ;-) 3.1 Menyisipkan Gambar

Anda masih membuka file “latih.htm”-nya ‘kan? Ok, good. Oya sebelumnya, Anda juga harus menyiapkan gambar yang akan dimasukan ke dalam website Anda. Untuk itu, Anda bisa download gambar “Spongebob” di sini : http://www.AsianBrain.com/images/spongebob.gif Simpan file-nya di folder latihan Anda. Dan kalau sudah siap semuanya, sekarang ikuti langkah-langkah berikut ini:

Klik menu “Insert”, lalu pilih menu “Picture”, kemudian pilih menu

“From File”.

Kita coba ulangi lagi langkahnya : Insert => Picture => From File

Pilih gambar yang akan dimasukan ke dalam halaman website, lalu klik

tombol “Insert”. Pada contoh ini, kita akan coba masukan gambar SpongeBob (Yup! Spongebob is my favorite).



http://www.asianbrain.com/images/spongebob.gif

Nah kita coba lihat hasilnya sekarang:

Waaahhh…. kereennnn…..:-)

Sekarang Anda sudah bisa memasukan gambar ke dalam halaman website Anda, mudah bukan?! ☺



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

Karena dengan tabel ini, Anda bisa mengatur halaman website agar lebih cantik lagi dan memudahkan Anda 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:

Ini “column” (kolom)

Ini “row” (baris)

Ini “cell”

Di atas adalah gambar 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:

Sebelumnya, pindahkan dulu posisi kursor tepat di bawah gambar

SpongeBob, lalu klik menu “Table”, kemudian pilih menu “Insert”, lalu klik menu “Table”.

Mari kita coba ulangi lagi urutannya: Table => Insert => Table.



Selanjutnya akan muncul kotak dialog “Insert Table”. Karena kita akan membuat gambarnya sejajar horizontal dengan teks, maka kita hanya butuh 1 row (baris) dan 2 columns (kolom) saja. Itu sebabnya di kolom rows kita isi dengan 1, dan di kolom columns kita isi dengan 2.

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”.

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.

Di dalam kotak dialog tersebut, juga ada menu “Specify Width”. Menu ini berfungsi untuk mengatur lebar tabel. Normalnya lebar tabel ini adalah 100 persen. Tapi karena kita dalam proses belajar, maka kita isi saja kolom ini dengan 80 persen. Nantinya Anda bisa mengatur lebar tabel sesuai kemauan dan kebutuhan Anda.

“Cell Padding” dan “Cell Spacing” kita isi dengan 0.

Setelah selesai, lalu klik tombol “OK”.

Lihatlah sekarang tabel sudah terbentuk tepat berada di bawah gambar SpongeBob.



Kolom 1 Kolom 2 3.3 Menyisipkan Gambar ke dalam Tabel Selanjutnya, kita masukan gambar Spongebob ke dalam tabel di kolom 2. Caranya sebagai berikut:

klik gambar Spongebob. Setelah itu, klik tombol kanan mouse, lalu pilih menu “Cut”. Kemudian, pindahkan kursor mouse ke tabel kolom 2, lalu klik kembali tombol kanan mouse dan pilih menu “Paste”. Nah, si Spongebob sekarang sudah berada di kolom 2!

Tapi… misi kita belum selesai. :-) Selanjutnya blok/highlight semua teks yang ada di halaman website tersebut kecuali judul. Setelah itu, klik tombol kanan mouse dan pilih menu “Cut”. Selanjutnya, pindahkan kursor mouse ke table kolom 1, kemudian klik kembali tombol kanan mouse dan pilih menu “Paste”. Nah, teks yang Anda buat sekarang sudah berada di dalam table kolom ke 1, berdampingan dengan gambar Spongebob.



Kita bisa atur lagi lebar tabelnya supaya kelihatan lebih rapih. Coba Anda pindahkan kursornya ke kolom 2, lalu tekan tombol kanan mouse, lalu pilih menu “Cell Properties”. Sekali lagi hilangkan sejenak menu-menu lain yang ada, Kita fokus saja pada bagian “Specify Width”.

Fokus di sini saja

Pada menu “Specify Width” isi dengan 20. Dengan nilai ini akan membuat kolom 2 mendapatkan porsi lebar 20 persen dari lebar keseluruhan table. Kemudian klik tombol OK.

Lakukan hal yang sama pada kolom 1, ubah lebarnya “Specify Width” di kolom 1 menjadi 80 percent.

Inilah hasilnya :



Bagus kan..:-)



3.4 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 kolom 1.

Caranya sebagai berikut:

Pindahkan kursornya ke kolom 1, lalu tekan tombol kanan mouse dan

pilih menu “Cell Properties”.

2. Klik menu “Drop Down Color”

1. Fokus di bagian ini

Kita abaikan dulu sejenak menu yang lain. Mari kita fokus dulu pada menu “Background”. Untuk memilih warna, klik menu drop down “Color”.



Dalam latihan ini kita akan memasang background tabel dengan warna

biru muda (aqua). Pilihlah warna biru muda dan akhiri dengan menekan tombol “OK”.

Sekarang kita lihat hasilnya :

Sip! Sekarang Anda sudah bisa memberi warna latar tabel. 3.5 Menjadikan gambar sebagai latar belakang (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 kolom 1 yang tadinya berwarna biru muda (Aqua) kini berubah menjadi gambar spongebob. Mari kita coba ubah warna latar belakang tabel kita pada kolom 1 dengan memasukan gambar spongebob sebagai pengganti warna latar, caranya sbb:



- arahkan kursor pada kolom 1 lalu klik tombol kanan mouse dan pilih menu ‘Cell Properties’ . Selanjutnya akan tampil jendela tampilan ‘Cell Properties’ seperti gambar di bawah ini:

Aktifkan fasilitas ‘Use background picture’ ini.

- Perhatikan pada kolom ‘Background’ . Aktifkan fasilitas ‘Use

background picture’ dengan cara meng-klik kotak kecil yang ada disampingnya.

- Klik tombol ‘Browse’ untuk mencari gambar yang ingin Anda

jadikan background.

Klik tombol ‘Browse’ ini

Pada contoh ini kita masukan gambar ‘Spongebob’ dengan nama file ‘Spongebob.gif’. Klik pada file gambar yang akan dijadikan background lalu klik tombol ‘Open’.



- Terakhir klik tombol ‘OK’.

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 Anda 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 www.AsianBrain.com. Kita akan coba aplikasikan fungsi ini pada eksperimen I bab 4. 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!




BAB 4 Waktunya Latihan

OK saatnya latihan, ini adalah sebagai media latihan untuk lebih memantapkan kembali pemahaman Anda mengenai materi-materi yang sudah diberikan pada BAB1, BAB2 dan BAB 3. Dalam melakukan latihan ini janganlah terburu-buru, jangan ada langkah yang terlewat, jangan lanjutkan ke langkah selanjutnya apabila ada langkah yang belum selesai Anda kerjakan. Oya karena isi dari materi yang ada pada BAB4 ini cukup panjang maka materinya kami pisahkan ke dalam modul lain. Anda bisa download modul yang membahas materi ini pada modul ’Waktunya Latihan’. Selamat ber-eksperimen dan tetep semangat!… ☺



membuatwebsite

Documents