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.
 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! ☺

2
“Panduan Dasar Pembuatan Website Bagi Pemula”
Asian Brain Internet Marketing Center
 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”).

3
“Panduan Dasar Pembuatan Website Bagi Pemula”
Asian Brain Internet Marketing Center
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.

Klik icon ini untuk Ini adalah Area Halaman

memulai Website kita

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.

4
“Panduan Dasar Pembuatan Website Bagi Pemula”
Asian Brain Internet Marketing Center
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”.

Tekan icon B ini

untuk cetak tebal

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

5
“Panduan Dasar Pembuatan Website Bagi Pemula”
Asian Brain Internet Marketing 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.

6
“Panduan Dasar Pembuatan Website Bagi Pemula”
Asian Brain Internet Marketing Center
 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”.

7
“Panduan Dasar Pembuatan Website Bagi Pemula”
Asian Brain Internet Marketing Center
 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 1: Blok/Highlight Teks

Langkah 2: Arahkan panah mouse

ke sini

Langkah 3: Klik tombol kanan

mouse, masih di sini juga

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”

8
“Panduan Dasar Pembuatan Website Bagi Pemula”
Asian Brain Internet Marketing Center
 Masukan alamat website
http://www.asianbrain.com/
di sini

Perhatikan kolom
ini saja OK

Beginilah jadinya website kita setelah tulisan “Asian Brain”

dijadikan hyperlink.

Inilah hasil teks yang

sudah di-hyperlink

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.

9
“Panduan Dasar Pembuatan Website Bagi Pemula”
Asian Brain Internet Marketing Center
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’

10
“Panduan Dasar Pembuatan Website Bagi Pemula”
Asian Brain Internet Marketing Center
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’

11
“Panduan Dasar Pembuatan Website Bagi Pemula”
Asian Brain Internet Marketing Center
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.

12
“Panduan Dasar Pembuatan Website Bagi Pemula”
Asian Brain Internet Marketing Center
 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

13
“Panduan Dasar Pembuatan Website Bagi Pemula”
Asian Brain Internet Marketing Center
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”.

14
“Panduan Dasar Pembuatan Website Bagi Pemula”
Asian Brain Internet Marketing Center
 Kolom “User variables”

Klik tombol
“Add” ini
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.

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
15
“Panduan Dasar Pembuatan Website Bagi Pemula”
Asian Brain Internet Marketing Center
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”.

16
“Panduan Dasar Pembuatan Website Bagi Pemula”
Asian Brain Internet Marketing Center
 - 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

17
“Panduan Dasar Pembuatan Website Bagi Pemula”
Asian Brain Internet Marketing Center
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 :

18
“Panduan Dasar Pembuatan Website Bagi Pemula”
Asian Brain Internet Marketing Center
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”.

19
“Panduan Dasar Pembuatan Website Bagi Pemula”
Asian Brain Internet Marketing Center
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.

20
“Panduan Dasar Pembuatan Website Bagi Pemula”
Asian Brain Internet Marketing Center
 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).

21
“Panduan Dasar Pembuatan Website Bagi Pemula”
Asian Brain Internet Marketing Center
 Nah kita coba lihat hasilnya sekarang:

Waaahhh…. kereennnn…..:-)

Sekarang Anda sudah bisa memasukan gambar ke dalam halaman website

Anda, mudah bukan?! ☺

22
“Panduan Dasar Pembuatan Website Bagi Pemula”
Asian Brain Internet Marketing Center
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” Ini “cell”

(kolom)

Ini “row”
(baris)

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.

23
“Panduan Dasar Pembuatan Website Bagi Pemula”
Asian Brain Internet Marketing Center
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.

24
“Panduan Dasar Pembuatan Website Bagi Pemula”
Asian Brain Internet Marketing Center
 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.

25
“Panduan Dasar Pembuatan Website Bagi Pemula”
Asian Brain Internet Marketing Center
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 :

26
“Panduan Dasar Pembuatan Website Bagi Pemula”
Asian Brain Internet Marketing Center
Bagus kan..:-)

27
“Panduan Dasar Pembuatan Website Bagi Pemula”
Asian Brain Internet Marketing Center
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”.

1. Fokus di bagian ini

2. Klik menu “Drop Down Color”

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

28
“Panduan Dasar Pembuatan Website Bagi Pemula”
Asian Brain Internet Marketing Center
 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:

29
“Panduan Dasar Pembuatan Website Bagi Pemula”
Asian Brain Internet Marketing Center
- 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’.

30
“Panduan Dasar Pembuatan Website Bagi Pemula”
Asian Brain Internet Marketing Center
 - 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!

31
“Panduan Dasar Pembuatan Website Bagi Pemula”
Asian Brain Internet Marketing Center
 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!… ☺

32
“Panduan Dasar Pembuatan Website Bagi Pemula”
Asian Brain Internet Marketing Center