You are on page 1of 97

Kata Pengantar

Teriring syukur tak terhingga pada Tuhan Yang


Maha Esa, buku ini berhasil terselesaikan. Buku
ini dimaksudkan untuk para pengembang
(developers) program aplikasi, programmer,
dan pihak umum yang ingin mencoba membuat
file Help.
Hal-hal yang dibahas dalam buku ini
diantaranya:
 Membuat file Help (*.hlp) menggunakan
Help Workshop
 Menghubungkan file (*.hlp) dengan
program aplikasi yang dibuat oleh Ms.
Visual Basic 6.0.
 Membuat file HTML Help (*.chm)
Mohon maaf bila pembahasan dalam buku ini
terlalu singkat dan tidak begitu kompleks,
karena penulis menyadari kemampuan penulis
yang juga masih taraf mencoba dalam membuat
file help ini.
Akhirnya, penulis mohon maaf bila dalam
setiap penyampaian ada yang tidak berkenan di
hati pembaca. Tidak ada hasil yang sempurna
selama itu masih buatan manusia.

Cirebon, Juni 2006

Penulis

Membuat File Help – Agung Novian, 1


S.Kom
BAB I
FILE HELP, DAN
APLIKASI YANG
DIPERLUKAN

1.1. File Help dengan Help


Workhsop
Adalah pasti kita jumpai dalam setiap program-
program aplikasi yaitu suatu fasilitas yang
sengaja digunakan untuk membantu pemakai
(user) program-program aplikasi bila
menemukan kesulitan atau masalah lain dalam
penggunaan suatu program aplikasi. Fasilitas
ini disebut Help. Help sendiri merupakan
rangkaian dari beberapa file yang terorganisir
dan dibangun sedemikian rupa sehingga bisa
saling terhubung dan terangkai. Salah satu
ekstensi file help adalah (*.hlp). File inilah
yang akan kita coba pelajari pada pembahasan
ini.

Tak lengkap rasanya sebuah program aplikasi


tanpa disertai fasilitas Help. Oleh karenanya

Membuat File Help – Agung Novian, 2


S.Kom
sangatlah perlu seorang pengembang program
aplikasi memikirkan perlu adanya fasilitas Help
dalam program aplikasi yang
dikembangkannya.

Hampir semua program-program aplikasi


menyertakan file help. Bisa Anda buktikan
ketika Anda menjalankan sebuah program
aplikasi, tekanlah tombol F1 pada keyboard,
selang tak berapa lama akan muncul sebuah
jendela baru, yaitu jendela Help.

Membuat sebuah file help (*.hlp) tidaklah


terlalu sulit. Bahkan mudah dan menyenangkan.
Untuk membuat file help, Anda memerlukan
sebuah program aplikasi yaitu: “Help
Workshop”. Help Workshop adalah tool
tambahan yang Anda dapatkan saat
menginstalasikan “Microsoft Visual Studio 6.0”
atau “Microsoft Visual C++ 6.0”. Karena Help
Workshop ini merupakan tool yang memang
sengaja diperuntukkan bagi programmer atau
developer program aplikasi basis Microsoft
Visual.

1.2. Menjalankan Aplikasi


Untuk menjalankan aplikasi Help Workshop,
Anda lakukan langkah berikut ini: Klik tombol

Membuat File Help – Agung Novian, 3


S.Kom
StartAll ProgramsMicrosoft Visual Studio
6.0 Microsoft Visual Studio 6.0 ToolsHelp
Workshop.

Lingkungan Kerja Help Workshop, adalah


seperti gambar berikut:

Gambar 1.1. Lingkungan Kerja Help Workshop.

Sebelum melangkah lebih jauh, sebaiknya Anda


ketahui syarat lain untuk membuat file help
(*.hlp). Yaitu, Anda memerlukan aplikasi lain
untuk mengolah file utama yang digunakan
dalam pembuatan file help. File tersebut adalah
file Rich Text Format (*.rtf). Dan salah satu
aplikasi yang dapat Anda gunakan untuk

Membuat File Help – Agung Novian, 4


S.Kom
membuat atau mengolah file (*.rtf) adalah
Microsoft Word.

Jalankankanlah aplikasi Microsoft Word pada


komputer Anda dengan cara: Klik StartAll
Programs Microsoft OfficeMicrosoft
Office Word 2003 (dalam buku ini saya
menggunakan aplikasi Ms. Word 2003).

Jangan apa-apakan dulu Ms. Word Anda!


Sekarang, tampilkan jendela Windows
Explorer, dengan cara: Klik Start  All
Programs  Accessories  Windows Explorer.
Buatlah folder baru di drive C. Namai folder
tersebut dengan “Help”. Membuat folder ini
dimaksudkan agar Anda lebih mudah dalam
mengolah file-file yang diperlukan.

Aktifkan Ms. Word, Anda ketikkan beberapa


teks (terserah Anda), misalnya seperti berikut:

Mencoba membuat file Help Gitu Lho…


Oleh: Agung Novian
C 2006

Lakukan penyimpanan dengan cara: klik menu


FileSave, alamatkan penyimpanan ke alamat
direktori/folder “C:\Help”. Isi “File name:”
dengan: “Help1”. Ubah “Save as type:”

Membuat File Help – Agung Novian, 5


S.Kom
menjadi: “Rich Text Format”. Klik tombol
Save.

Gambar 1.2. Menyimpan ke format (*.rtf).

1.3. Membuat file Help


awal
Sekarang aktifkan Help Workshop! Klik menu
FileNew. Pada dialog yang ditampilkan, klik
“Help Project”. Klik OK, pada dialog “Project
File Name” yang ditampilkan, namai “File
name” dengan “Help1”. Alamatkan
penyimpanan ke “C:\Help”. Klik tombol Save.
Sehingga tampilan Help Workshop akan
menjadi seperti gambar di bawah ini:

Membuat File Help – Agung Novian, 6


S.Kom
Gambar 1.3. Help Workshop – Membuat file
project baru.

Klik tombol Files… di sisi kanan IDE Help


Workshop. Pada dialog yang ditampilkan, klik
tombol Add… Alamatkan ke “C:\Help”, klik
file “Help1” yang telah Anda buat dengan Ms.
Word tadi. Klik tombol Open.

Gambar 1.4. Menentukan nama file (*rtf).

Membuat File Help – Agung Novian, 7


S.Kom
Klik tombol OK, untuk mendaftarkan file dan
menutup dialog “Topic Files”. Kembali ke
jendela Help Workshop, klik menu File
Compile…, atau klik tombol Save and
Compile… atau klik tombol bergambar

Saat tampil dialog selanjutnya (dialog “Compile


a Help File”). Tandai checkbox: “Automatically
display Help file in WinHelp when done.
Langkah ini dimaksudkan agar setelah meng-
compile, maka file Help (*hlp) yang telah
dibuat, dapat langsung ditampilkan/terlihat. Jika
Anda lupa menandai checkbox ini, Anda harus
menampilkan file Help secara manual. Bukalah
alamat “C:\Help”, klik ganda file “Help1.hlp”
(dengan ikon bergambar tanda tanya).

Nah, seperti gambar di bawah inilah file Help


awal yang telah berhasil di-compile.

Gambar 1.5. Tampilan jendela Help.

Membuat File Help – Agung Novian, 8


S.Kom
Setelah meng-compile, tutup kembali jendela
Help, juga klik tombol (x) kecil pada jendela
Help Workshop, untuk menutup jendela
“Compilation” dan kembali ke jendela file Help
Project.

Gambar 1.6. Menutup jendela Compilation.

1.4. Membuat Judul Topik


Judul topik adalah teks yang ditampilkan paling
atas dari halaman file help. Untuk membuat
judul topik pada file Help dilakukan pada file
utama (Rich Text Format/*.rtf). Aktifkan Ms.
Word, tempatkan kursor ke awal naskah, tekan
tombol Enter pada keyboard. Kembalikan

Membuat File Help – Agung Novian, 9


S.Kom
kursor ke awal naskah. Ketikkan judul topik,
misal: “Pendahuluan”. Blok teks judul tersebut,
klik menu FormatStyles and Formatting….
Pada Taskpane (panel paling kanan dari IDE
Ms. Word) yang ditampilkan (untuk Ms. Word
XP dan Mw. Word 2003), klik “Heading 3”.

Gambar 1.6. Task pane – Style and Formatting.

Bila perlu lakukan modifikasi pada style


“Heading 3” ini, dengan cara: klik kanan pada
list “Heading 3”, pilih menu Modify… Ubah
syle font dan ukuran font sesuai selera Anda.
Klik tombol “Line Spacing Double”, . Ubah
warna teks dengan menekan tombol dropdown
pada tombol “Font Color”, , pilih warna
yang diinginkan. Tandai checkbox
“Automatically Update”, agar syle “Heading 3”
yang Anda modifikasi ini akan selalu digunakan

Membuat File Help – Agung Novian, 10


S.Kom
saat Anda memilih style “Heading 3”
berikutnya. Klik tombol OK untuk menutup
dialog.

Gambar 1.7. Modify Style – Mengubah style


Heading 3.

Tampilan akhir naskah pada Ms. Word seperti


pada ilustrasi berikut ini.

Gambar 1.8. Tampilan Naskah – Setelah


modifikasi Heading 3.

Membuat File Help – Agung Novian, 11


S.Kom
Simpan pekerjaan Anda. Aktifkan kembali
aplikasi Help Workshop. Lakukan proses
compile (seperti yang telah dijelaskan di atas).
Tampilan help akan tampak seperti gambar di
bawah ini:

Gambar 1.9. Bagian-bagian Jendela Help

1.5. Membuat Link Topik


Link Topik adalah teks yang menghubungkan
pada topik-topik tertentu pada file Help.
Biasanya teks ini berwarna hijau dan bergaris
bawah.

Aktifkan Ms. Word, buatlah dokumen baru, klik


menu FileNew, atau klik tombol bergambar,
atau tekan tombol Ctrl + N pada keyboard.

Membuat File Help – Agung Novian, 12


S.Kom
Simpan pekerjaan Anda dengan Nama “Help2”
dengan file type “Rich Text Format”. Lakukan
langkah penyimpanan seperti langkah yang
telah dibahas di atas. Ketikkan teks seperti di
bawah ini!

Selamat Datang

BiodataBiodata Saya
KeahlianKeahlian Saya
FotoFoto Saya

 Catatan:
Jangan menyisipkan spasi setelah teks:
“Biodata”, “Keahlian”, “Foto” yang
pertama.

Blok teks “Selamat Datang”, ubah style


menjadi “Heading 3” dengan cara mudah, klik
dropdown pada combobox “Style” (terletak di
sebelah combobox “Font”). Pilih “Heading 3”.

Membuat File Help – Agung Novian, 13


S.Kom
Gambar 1.10. Memilih style pada combobox Style.

Blok teks “Biodata” yang pertama, klik menu


FormatFonts… Pada dialog Font, klik
combobox “Underline style:”. Klik list
bergambar garis ganda.

Membuat File Help – Agung Novian, 14


S.Kom
Gambar 1.11. Dialog Font – Format garis bawah
ganda.
Klik OK. Maka teks “Biodata” akan
digarisbawahi dengan garis dua (ganda).
Lakukan hal yang sama untuk teks “Keahlian”,
dan “Foto”.

Blok teks “Biodata” yang kedua. klik menu


FormatFonts… Pada dialog Font, tandai
checkbox “Hidden”.

Gambar 1.12. Dialog Font – Format Hidden

Klik OK. Teks “Biodata” yang ke dua akan


menghilang (tidak tampak). Lakukan hal yang
sama untuk teks “Keahlian”, dan “Foto” yang
kedua.

Membuat File Help – Agung Novian, 15


S.Kom
1.6. Tip: Membuat Tombol
Shortcut
Anda akan sering melakukan langkah-langkah
seperti di atas. Oleh karenanya ada baiknya
Anda lakukan tip berikut ini untuk
memudahkan Anda dalam melakukan langkah-
langkah tersebut.

Klik menu ViewToolbarsCustomize…


Pada dialog “Customize”yang ditampilkan, klik
tab “Commands”, pada kotak “Category:”, klik
list “Format”.

Gambar 1.13. Dialog Customize – Memilih tool


baru.

Membuat File Help – Agung Novian, 16


S.Kom
Pada kotak “Commands”, gerakkan scrollbar
(batang penggulung), hingga Anda menemukan
gambar , klik list ini, tekan
tombol kiri mouse, tahan, lakukan dragging
(menyeret) ke atah batang toolbar dari IDE Ms.
Word. Sehingga pada toolbar akan bertambah
tombol baru.

Gambar 1.14. Toolbar – Menambahkan tool


“Double Underline”.

Kembali ke dialog “Customize”, gerakkan


kembali scrollbar, hingga Anda menemukan
tombol “Hidden”. Seret tombol tersebut ke arah
toolbar seperti cara di atas. Posisikan di sebelah
tombol baru tadi.

Gambar 1.15. Toolbar – Menambahkan tool


“Hidden”.

Membuat File Help – Agung Novian, 17


S.Kom
Klik kanan tombol “Hidden” pada toolbar.
Sorot menu Change Button Image. Klik gambar
yang Anda inginkan. Maka tombol “Hidden”
sekarang telah dilengkapi gambar ikon. Klik
kanan kembali, klik menu Default Style, agar
tombol “Hidden” tidak disertai teks. Klik
tombol Close pada dialog “Customize”.

Gambar 1.15. Toolbar – “Hidden” setelah style


diubah.

Nah sekarang, untuk memformat teks menjadi


bergaris bawah dua, atau hidden, Anda tidak
perlu menklik menu FormatFont… dan
seterusnya, Anda cukup mengklik tombol yang
telah Anda tambahkan tadi.

1.7. Membuat Help Baru


Sekarang kita kembali ke pembahasan
sebelumnya. Setalah Anda memformat teks-teks
tadi, simpan pekerjaan Anda. Klik FileSave.
Aktifkan Help Workshop. Klik menu File
New… Pilih “Help Project” dan klik OK.
Namai dengan Help2.

Membuat File Help – Agung Novian, 18


S.Kom
Klik tombol Files… Klik tombol Add… Pilih
file Help2.rtf yang telah Anda buat dengan Ms.
Word tadi. Tutup jendela “Topic Files” dengan
menekan tombol OK. Klik tombol Save and
Compile… Tampilan file Help2 akan seperti
gambar di bawah ini.

Gambar 1.16. Teks Link pada Jendela Help.

1.8. Tujuan Format


Pada tampilan file Help2 di atas, teks-teks
“Biodata”, “Keahlian”, dan “Foto” tampak
berwarna hijau dan bergaris bawah. Efek ini
dihasilkan oleh format pada file “Rich Text
Format” yang Anda lakukan.

Membuat File Help – Agung Novian, 19


S.Kom
Format pada file
Efek pada file help
rich text format
Garis bawah Teks berwarna hijau dan
ganda bergarisbawah
Menentukan Nama ID
(identifikasi) dari Topik
yang akan dihubungkan/
Hidden
dipanggil saat mengklik
teks link (berwarna hijau
dan bergaris-bawah)

Gerakan pointer Anda ke arah teks link, pointer


akan berubah menjadi gambar telapak tangan.
Klik teks tersebut.

Maaf, Anda hanya akan mendapatkan pesan


kesalahan, karena Anda belum membuat topik
untuk link tersebut.

1.9. Membuat Topik


Kembali ke aplikasi Ms. Word, pindahkan
kursor ke akhir naskah (di depan teks “Foto
Saya”). Tekan tombol Ctrl + Enter pada
keyboard untuk membuat halaman baru.

Ketikkan teks seperti di bawah ini!

Membuat File Help – Agung Novian, 20


S.Kom
Biodata

Nama : Agung Novian


Kelahiran : Cirebon, 9 September 1982
Alamat : Jl. P. Drajat Gg. Jepun RT.
03/09
No. 48 Cirebon 45133

Pindahkan kursor ke awal naskah (sebelum teks


“Biodata”), klik menu Insert  Refernce 
Footnote…

Ketikkan simbol “$” pada textbox “Custom


mark:”. Klik combobox “Footnote”, ubah text
dari “Bottom of Page” menjadi “Below text”.

Gambar 1.17. Menentukan gaya footnote.

Membuat File Help – Agung Novian, 21


S.Kom
Klik tombol Insert. Maka pada akhir naskah,
akan tergambar sebuah garis, dan dibawahnya
sudah tertera simbol “$”. Ketikkan “Biodata” di
depan simbol “$” tersebut.

Gambar 1.18. Menuliskan isi footnote (simbol


“$”).

Pindahkan kursor pada awal naskah (setelah


simbol “$”). Klik menu Insert  Refernce 
Footnote…
Kali ini. ketikkan simbol “#” pada textbox
“Custom mark:”. Klik combobox “Footnote”,
ubah text dari “Bottom of Page” menjadi
“Below text”. Klik tombol Insert.

Ketikkan juga “Biodata” di depan simbol “#”


tersebut

Gambar 1.19. Menuliskan isi footnote


(simbol “#”).

Membuat File Help – Agung Novian, 22


S.Kom
Blok baris awal naskah, dari simbol “$” sampai
teks “Biodata” (teks “$#Biodata”). Ubah style
menjadi “Heading 3”.

Simpan pekerjaan Anda, aktifkan Help


Workshop, lakukan compile. Pada dialog help
yang ditampilkan, klik link Biodata, maka akan
tampil dialog baru seperti gambar di bawah ini.

Gambar 1.20. Tampilan Topik “Biodata”.

Tugas Anda sekarang, buat topik-topik baru


yang diperlukan, yaitu: “Keahlian”, dan “Foto”.
Juga tambahkan footnote pada teks “Selamat
Datang”, dengan nama ID: “Index”. Lakukan
compile ulang.

Membuat File Help – Agung Novian, 23


S.Kom
1.10.Menambahkan
Gambar
Untuk menambahkan gambar, dapat dengan
mudah Anda lakukan pada file RichTextFormat
melaului Ms. Word, dengan cara, klik menu
InsertPictureFrom file…

Cari alamat dan nama file gambar (*.jpg, *.bmp


*.gif, *.wmf, dan sebagainya) menurut selera
Anda.

1.11.Tujuan Simbol
Simbol-simbol dalam footnote yang digunakan
di atas barulah sebagian kecil simbol yang Anda
gunakan untuk membuat file Help. Berikut ini
penjelasan fungsi atau tujuan simbol-simbol
yang telah digunakan di atas.

Simbol Fungsi
$ Menentukan judul topik yang
nantinya akan digunakan dalam
“Topics Found” (pencarian topik)
pada dialog “Help Contents”.
# Nama ID (identifikasi) dari Topik
yang sedang dikerjakan.

Membuat File Help – Agung Novian, 24


S.Kom
Penjelasan mengenai simbol-simbol lain, bisa
Anda temukan pada file help dari Help
Workshop, klik menu HelpHelp Topics (lihat
pembahasan 2.6. Refernsi Makro).

Membuat File Help – Agung Novian, 25


S.Kom
BAB II
MODIFIKASI
TAMPILAN

2.1. Mengubah Judul


(pada Titlebar)
Pada Bab I, Anda sudah bisa membuat file
Help. Sekarang mari kita mencoba mengubah
bentuk tampilan dari jendela Help. Untuk
latihan awal ini, kita akan mengubah judul
(caption pada titlebar) sebuah jendela Help.

Jalankan Help Workshop, klik menu File


Open, buka alamat “C:\Help”, buka file
“Help2.hpj”. Klik tombol Options..., akan
ditampilkan dialog Options. Pada textbox
“Default topic:”, ketikkan “Index”, yang
menyatakan ID topic yang dijadikan default.
Pada textbox “Help title:”, ketikkan “Latihan
Membuat Help”. Ini adalah judul yang akan
ditampilkan pada titlebar jendela Help.

Membuat File Help – Agung Novian, 26


S.Kom
Gambar 2.1. Dialog Options.

Klik OK. Klik tombol “Save and Compile...”


dan lihat judul yang sekarang ditampilkan pada
titlebar Help Anda.

2.2. Mengubah Bentuk


Tampilan
Mengubah bentuk di sini maksudnya mengubah
warna dari jendela Help yang meliputi daerah
judul topik dan isi topik. Untuk mengubah
tampilan ini Anda harus membuat sebuah
jendela baru. Untuk membuatnya, klik tombol
Windows... Pada dialog yang ditampilkan,

Membuat File Help – Agung Novian, 27


S.Kom
ketikkan: “main” pada textbox “Create a
window named”. Klik OK, maka akan tampil
dialog baru, yaitu “Window Properties”. Dialog
ini memiliki 5 (lima) buah tab yaitu: “General”,
“Position”, “Button”, “Color”, dan “Macros”.
Pada tab “General”, ketikkan: “Latihan
Membuat Help” di textbox “Title bar text:”.
Klik tab “Position”, klik tombol “Auto-Sizer”,
akan ditampilkan monster dari sebuah jendela
Help.

Lakukan dragging untuk memindahkan posisi


dan mengatur lebar dan tinggi jendela tersebut.
Pengaturan ini nantinya akan dijadikan sebagai
nilai default dari posisi dan ukuran jendela Help
saat ditampilkan. Klik tombol OK. Atau pada
textbox-textbox yang disediakan, masukkan
nilai-nilai sebagai berikut:

Textbox Nilai
Left 198
Top 197
Width 648
Height 599

 Catatan:
Nilai di atas tidak bersifat absolut. Anda
boleh menggantinya sesuai selera Anda.

Membuat File Help – Agung Novian, 28


S.Kom
Klik tab “Button”. Di sini adalah tempat Anda
menentukan tombol-tombol yang akan
ditampilkan pada jendela Help, tandai atau
hilangkan tanda pada checkbox-checkbox yang
disediakan.

Klik tab “Color”. Ini adalah tempat untuk Anda


mengubah tampilan warna dari jendela Help,
yang meliputi warna belakang daerah judul
topik dan warna belakang daerah isi topik. Klik
tombol Change... pilih warna yang Anda
inginkan.

Untuk tab terakhir, “Macros” tidak perlu kita


bahas dulu. Anda bisa pelajari di bab
selanjutnya.

Klik tombol OK untuk menutup dialog. Simpan


pekerjaan Anda dan lakukan compiling. Dialog
Help Anda sekarang sudah berwarna lebih
menarik.

2.3. Tampilan
Mengambang (Pop-
Up)
Anda sudah bisa membuat link, dan
menampilkan suatu topik saat link tersebut

Membuat File Help – Agung Novian, 29


S.Kom
diklik. Ketika suatu topik ditampilkan, maka
topik tersebut menimpa topik yang lama,
artinya pada tampilan dialog Help topik yang
dipanggil akan ditampilkan sementara topik
yang memanggil (topik lama) ditutup.

Pembahasan kali ini, kita akan mencoba


memanggil suatu topik tanpa menutup topik
yang lama, melainkan menampilkan topik baru
seoalah-olah mengambang pada topik lama.

Untuk langkah ini, silakan Anda buka file Rich


Text Format: “Help2.rtf” dengan Ms. Word,
blok teks yang bergaris bawah ganda (contoh:
“Biodata”, tekan tombol Ctrl + U pada
keyboard, atau tekan tombol pada toolbar
Ms. Word. Lakukan untuk teks-teks bergaris
bawah ganda lainnya.

Gambar 2.2. Tampilan Naskah – Mengubah gaya


garisbawah.

Membuat File Help – Agung Novian, 30


S.Kom
Ubah style dari topik menjadi “Clear
Formatting”. Ikuti langkah berikut: cari judul
topik “Biodata” (teks: “$#Biodata”). Blok teks
tersebut, klik combobox “Style”, pilih “Clear
Formatting”. Lakukan untuk judul-judul topik
lainnya (“Keahlian”, dan “Foto”).

Gambar 2.3. Mengubah format style.

 Catatan:
Jika Anda tidak mengubah style dari judul
topik ini, maka pada tampilan
mengambang dari jendela Help hanya
akan menampilkan judul dari topik saja
(isi judul tidak akan ditampilkan).

Lakukan Save As (klik FileSave As…) namai


dengan “Help3.rtf”. Jalankan aplikasi Help
Workshop, buat project Help baru (FileNew,
klik “Help Project”, klik OK). Sisipkan file

Membuat File Help – Agung Novian, 31


S.Kom
“Help3.Rtf” (klik tombol Files…, klik Add,
pilih “Help3”). Simpan project Help Anda, dan
lakukan compile.

Gambar 2.4. Tampilan mengambang (pop-up).

Anda lihat link teks sekarang bergaris bawah


terputus-putus, dan begitu anda mengklik link
teks ini, maka akan ditampilkan sebuah topik
dengan tampilan mengambang pada jendela
Help utama.

2.4. Warna Latar


Tampilan
Mengambang
Tampilan mengambang di atas, bisa Anda ubah
warna latar dari warna defaultnya yaitu putih.

Membuat File Help – Agung Novian, 32


S.Kom
Anda memerlukan makro untuk hal ini. Contoh
berikut ini untuk mengubah warna latar menjadi
merah muda.

Aktifkan Help Workshop, klik tombol Config…


Pada dialog yang ditampilkan, klik tombol
Add… ketikkan makro berikut ini:

SetPopupColor(255,0,255)

 Catatan:
(255,0,0) pada makro di atas
menunjukkan definisi warna dalam
RGB Anda dapat mengganti angka-
angka dengan batasan antara 0 sampai
255. Contoh (35,123,9), dan
sebagainya.

Lakukan kompilasi ulang. Sekarang ketika


Anda mengklik link teks, maka warna latar
tampilan mengambang (floating/popup) akan
berubah warna.

2.5. Menyisipkan Tombol


Anda dapat menyisipkan tombol ke dalam isi
topik dari file Help Anda. Untuk menyisipkan
tombol adalah dengan menggunakan fungsi
(selanjutnya disebut makro (macro)).

Membuat File Help – Agung Novian, 33


S.Kom
Penggunaan macro bisa dilakukan saat
mendesain dengan Help Workshop, bisa juga
pada file Rich Text Format. Kali ini kita
mencoba menyisipkan tombol pada file Rich
Text Format.

Adapun rutin makro yang digunakan yaitu:

{Button, Nama_Tombol,
[Perintah]}

Parameter Keterangan
Button Identifikasi kontrol
Nama_Tombol Teks yang ditampilkan
pada tombol
Perintah Perintah/Makro yang akan
dijalankan

Contoh:

{Button, Tutup, Exit()}

Jalankan Ms. Word, buat dokumen baru, simpan


dengan nama “Help4.rtf”, atau Anda buka file
“Help2.rtf”, kemudian lakukan Save As, namai
dengan “Help4.rtf”.

Ketikkan teks-teks seperti ilustrasi di bawah ini


(jika Anda membuat dokumen baru). Jika Anda

Membuat File Help – Agung Novian, 34


S.Kom
mengawali dengan membuka file “Help2.rtf”)
cukup mengedit sebagian teks saja.

Gambar 2.5. Tampilan Naskah – Menuliskan


Makro.

Tambahkan topik-topik baru pada file (*rtf)


Anda. Jalankan Help Workshop, buat project
baru, namai dengan “Help4”, sisipkan file (*rtf)
“Help4” yang telah Anda buat dengan Ms.
Word tadi (klik tombol Files…, klik tombol
Add, pilih Help4). Lakukan compile (klik
tombole Save and Compile).

Membuat File Help – Agung Novian, 35


S.Kom
Gambar 2.6. Tampilan tombol pada jendela Help.

Ketika Anda mengklik tombol “Biodata”,


“Keahlian”, atau “Foto”, maka topik dengan ID
tersebut akan dipanggil dan ditampilkan. Keika
Anda mengklik tombol “Notepad”, maka
aplikasi “Notepad “akan dijalankan. Ketika
Anda mengklik tombol “Keluar”. Dialog Help
akan ditutup.

2.6. Referensi Makro


Makro-makro/perintah-perintah yang
digunakan pada contoh kasus di atas adalah:

Makro Keterangan
JumpId( Memanggil ID suatu
[NamaFile> topik tertentu.

Membuat File Help – Agung Novian, 36


S.Kom
NamaFile adalah Nama
dari file Help yang akan
dipanggil.
ID_Jendela adalah ID
dari jendela (lihat
pembahasan 2.2),
ID_Jendla,] parameter ini bersifat
ID_Topik) optional, artinya boleh
disertakan boleh pula
tidak, pada contoh di atas
parameter ini tidak
disertakan.
ID_Topik adalah ID dari
topik yang akan
dipanggil.
Memanggil suatu file
ExcecFile( tertentu. Tuliskan nama
NamaFile) file dan alamat secara
lengkap.
Exit() Menutup jendela Help

Untuk melihat referensi makro yang dapat


dipergunakan, Anda dapat melihatnya dengan
cara: pada aplikasi Help Workshop, klik menu
HelpHelp Topics, pada dialog “Help Topics”
yang ditampilkan, berturut-turut, klik cabang
berikut: WinHelpReferences Macro
Reference, disana disediakan cabang-cabang
lain berisi makro-makro yang dapat Anda

Membuat File Help – Agung Novian, 37


S.Kom
pergunakan. Klik ganda pada sebuah cabang
untuk melihat jenis makro dan cara
penggunaannya.

Gambar 2.7. Help Author’s Guid – Referensi


Makro.

Membuat File Help – Agung Novian, 38


S.Kom
BAB III
MEMBUAT HELP
CONTENT

3.1. Help Content


Help content, adalah dialog help yang
menampilkan isi (topik-topik) dari file help.
Help content digunakan untuk mempermudah
penggunaan file help, karena dialog ini
menyediakan fasilitas seperti Find, untuk
mempermudah pengguna mencari topik
bantuan yang diinginkan. Contoh dialog help
content seperti gambar berikut ini.

Gambar 3.1. Contoh Dialog Help Contents.

Membuat File Help – Agung Novian, 39


S.Kom
3.2. Membuat Help
Content
Untuk membuat help content, Anda harus sudah
pernah membuat file help (seperti yang telah
dibahas pada pembahasan sebelumnya).

Untuk membuat help content, Anda hanya akan


berkonsentrasi dengan aplikasi Help Workshop
(Anda tidak menggunakan aplikasi pengolah
file *.rtf seperti Ms. Word).

Jalankan Help Workshop, klik menu File


New, pilih “Help Contents”, klik OK.

Untuk pembahasan kali ini, kita akan mencoba


membuat help content dari file help yang telah
kita buat yaitu “Help4.hlp”.

Pada textbox “Default filename (and


Windows):”, ketikkan “Help4.hlp”. Ini untuk
menentukan nama file help default yang akan
dibuatkan file content. Ketikkan judul yang
akan ditampilkan pada dialog help content pada
textbox “Default title”, contoh ketikkan: “Isi
File Help”.

Membuat File Help – Agung Novian, 40


S.Kom
Gambar 3.2. Tampilan Editor Help Contents.

Sekarang kita mulai membuat hirarki dari isi


help content. Klik tombol Add Below…, klik
option “Heading” ketikkan teks pada textbox
“Title”, contoh: “Selamat Datang”, klik OK.
Maka pada kotak (treeview) akan tergambar
sebuah daftar bertuliskan “Selamat Datang”.
Daftar ini dinamakan cabang (node) dan
berjenis Heading, artinya sebagai kepala (pusat)
dari cabang di bawahnya.

Membuat File Help – Agung Novian, 41


S.Kom
Gambar 3.3. Menambahkan Heading.

Klik kembali tombol Add Below… untuk


menambahkan cabang baru. Untuk
menambahkan cabang baru, Anda bisa
menggunakan tombol Add Below… atau Add
Above… sesuai keinginan penempatan cabang
baru (Add Below… berarti menambahkan
cabang di bawah cabang yang terpilih, Add
Above…… berarti menambahkan cabang di
atas cabang yang terpilih. Cabang terpilih
adalah cabang yang terfokus (biasanya diblok
dengan warna abu-abu).

Klik option “Topic”, untuk menentukan jenis


cabang. Kemudian ketikkan teks-teks berikut
pada textbox-textbox yang disediakan.

Nama Teks
Keterangan
textbox masukan
Title Halaman Anda bebas untuk

Membuat File Help – Agung Novian, 42


S.Kom
mengetikkan teks
Muka
masukan
Sesuaikan dengan
Topic ID Index ID topik yang Anda
buat pada file *.rtf
Help file Help4.hlp Nama file Help
Isikan sesuai nama
tipe Window yang
Window telah Anda buat,
main
type lihat pembahasan
2.2. Mengubah
bentuk tampilan

Gambar 3.4. Menambahkan daftar Topik.

Klik tombol OK untuk menyunting masukan


dan menutup dialog. Sekarang pada kotak telah
bertambah cabang baru. Perhatikan bahwa
posisi awal gambar lebih menjorok ke kanan,
hal ini kita namakan saja dengan indentasi. Ini

Membuat File Help – Agung Novian, 43


S.Kom
menunjukkan bahwa cabang baru tersebut
merupakan anak dari cabang di atasnya.

Untuk memposisikan indentasi agar setara


dengan cabang di atasnya, Anda dapat
melakukannya dengan mengklik tombol Move
Left…. Move Left digunakan untuk
mengurangi indentasi dari suatu cabang, artinya
mendorong ke kiri posisi cabang. Lawan dari
Move Left adalah Move Right.

Untuk mengedit atau mengubah teks yang


ditampilkan pada cabang, Anda dapat mengklik
tombol Edit… atau dengan mengklik ganda
pada cabang tersebut. Tetapi jika Anda ingin
mengubah jenis cabang, Anda harus menghapus
cabang tersebut dengan mengklik tombol
Remove…. Kemudian Anda lakukan langkah
menambah cabang baru.

Klik kembali tombol Add Below…, Klik option


“Topic”, isikan masukan berikut ini:

Nama
Teks masukan
textbox
Title Biodata Saya
Topic ID Biodata
Help file Help4.hlp
Window type main

Membuat File Help – Agung Novian, 44


S.Kom
Klik tombol OK. Silakan Anda tambahkan
cabang-cabang lain sesuai topik yang telah
Anda buat pada file *rtf, seperti: “Keahlian”,
“Foto”, dan sebagainya.

Bila perlu, untuk mempercantik cabang terakhir


Anda lakukan langkah berikut ini:

Klik tombol Add Below…, klik option


“Heading”, ketikkan: “Makro”. Klik OK.

Klik kembali tombol Add Below…, klik option


“Macro”, ketikkan: “Jalankan Notepad” pada
textbox “Title:”, dan ketikkan:
“ExecFile(C:\Windows\Notepad.exe)” pada
textbox “Macro:”. Klik OK.

Klik kembali tombol Add Below…, klik option


“Macro”, ketikkan: “Tutup” pada textbox
“Title:”, dan ketikkan: “Exit()” pada textbox
“Macro:”. Klik OK.

Tampilan akhir, mungkin akan seperti ilustrasi


di bawah ini:

Membuat File Help – Agung Novian, 45


S.Kom
Gambar 3.5. Tampilan daftar Content.

Simpan pekerjaan Anda (klik FileSave), dan


lakukan compile (klik FileCompile…).
Tampilan dialog help content yang akan Anda
dapatkan seperti ilustrasi gambar di bawah ini.

Gambar 3.6. Hasil Compile Dialog Help Contents.

Membuat File Help – Agung Novian, 46


S.Kom
Cobalah untuk mengklik ganda cabang-cabang
yang ada. Ketika suatu cabang diklik ganda,
maka akan tampil jendela help yang
menampilkan suatu topik, dan dialog help
content akan ditutup. Untuk menampilkan
kembali dialog help content, klik tombol
Contents pada jendela help tersebut.

Pada dialog help content, klik tab Find, Anda


akan menemukan Find Setup Wizard, klik
tombol Next pada wizard tersebut. Akan tampil
wizard berikutnya, klik tombol Finish.
Sekarang pada dialog help content sudah berisi
daftar-daftar kata yang digunakan untuk
mempermudah pengguna dalam mencari topik
yang dibutuhkan.

Cobalah mengklik sebuah daftar (list),


kemudian klik tombol Display, atau klik ganda
pada sebuah daftar (list).

Membuat File Help – Agung Novian, 47


S.Kom
Gambar 3.6. “Find” pada dialog Help Contents.

Membuat File Help – Agung Novian, 48


S.Kom
BAB IV
MENGHUBUNGKAN
FILE HELP
DENGAN PROGRAM

4.1. Menghubungkan File


Help
Ketika Anda menjalankan sebuah program
aplikasi, dan ketika Anda menekan tombol F1
pada keyboard, atau Anda menekan sebuah
tombol bergambar tanda tanya, maka Anda
akan dihadapkan pada suatu jendela atau dialog
yaitu “Help”. Program akan otomatis
memanggil file Help ketika Anda melakukan
langkah di atas.

Kali ini kita akan mencoba bagaimana


menghubungkan file help dengan program
aplikasi. Program aplikasi yang akan kita buat
menggunakan bahasa pemograman visual,
yaitu: Ms. Visual Basic.

Membuat File Help – Agung Novian, 49


S.Kom
4.2. Memulai Visual Basic
Jalankan Ms. Visual Basic 6.0. Anda mengerti
caranya? Jika tidak, ikuti langkah ini: klik
tombol StartAll ProgramsMicrosoft Visual
Studio 6.0Microsoft Visual Basic 6.0.

Pada dialog “New Project” yang ditampilkan,


pilih atau klik ikon “VB Enterprise Edition
Controls”.

Gambar 4.1. Dialog New Project – Memilih


template project.

Klik tombol Open. Anda akan berhadapan


dengan lingkungan kerja Ms. Visual Basic 6.0.

Membuat File Help – Agung Novian, 50


S.Kom
Perhatikan daerah sebelah kanan lingkungan
kerja, Anda klik ganda cabang bertuliskan:
“Forms”, atau klik tanda plus (+), di sebelah
kiri cabang tersebut, hingga di bawahnya akan
tampak cabang baru, “Form1”. Klik ganda
cabang “Form1 (Form1)” tersebut. Di daerah
tengah lingkungan kerja akan muncul jendela
baru, yaitu jendela “Form1”. Pada jendela
inilah Anda akan bekerja.

4.3. Menyisipkan Objek


Kontrol
Alihkan perhatian Anda pada sisi kiri
lingkungan kerja, di sana terdapat sebuah kotak
berisi gambar-gambar ikon. Kotak tersebut
dinamakan “Toolbox”. Toolbox adalah kotak
yang berisikan komponen-komponen
(selanjutnya disebut objek kontrol) yang akan
ditempatkan ke dalam form.

Membuat File Help – Agung Novian, 51


S.Kom
Gambar 4.2. Toolbar.
Klik sebuah gambar contoh gambar:
(Label) gerakan pointer mouse ke daerah
tengah lingkungan kerja (Form1). Klik pada
Form1 tersebut, lakukan dragging (tahan
tombol kiri mouse, geserkan), ke arah kanan
bawah, kemudian lepas tombol kiri mouse.

Gambar 4.3. Menambahkan Label pada form.

Membuat File Help – Agung Novian, 52


S.Kom
4.4. Mengubah Nilai
Properti
Klik objek kontrol Label yang telah Anda
sisipkan ke form tersebut, sekarang alihkan
perhatian ke sisi kanan bawah lingkungan kerja
di sana terdapat sebuah kotak yang dinamakan
jendela Properties. Klik list “(Name)”, klik
ganda list di sisi kanannya, kemudian ketikkan
“lblJudul”.

Gambar 4.4. Jendela Properties.

Langkah ini disebut dengan mengubah properti,


langkah di atas artinya Anda mengubah nilai
properti “Name” (dari objek kontrol Label)
dengan nilai baru, “lblJudul”.

Membuat File Help – Agung Novian, 53


S.Kom
Klik List “Caption”, klik ganda list di sisi
kanannya, ketikkan teks yang akan ditampilkan
pada objek kontrol label tersebut. Contoh:
“Program Saya”.

4.5. Membuat Aplikasi


Calculator
Buatlah folder baru di drive C, namai dengan
“Calc”. jalankan Visual Basic, pilih “VB
Enterprise Edition Controls”.

Ubah properti “Name” dari Form1 menjadi


“frmCalc”.

Masukkan objek kontrol Command , ubah


properti “Name” menjadi: “cmdNumber”. Ubah
Caption menjadi “0”, klik kanan pada
Command tersebut, pilh Copy, klik kanan pada
form pilih Paste, saat muncul pesan, klik
tombol Yes. Langkah ini disebut mengkopi
objek kontrol dan menjadikannya ber-array
(memiliki index).

Kopikan objek Command tersebut menjadi 10


buah. Ubah properti “Caption” sesuai dengan
nomor Indexnya (klik satu per satu objek
kontrol Command, lihat list “Index” pada

Membuat File Help – Agung Novian, 54


S.Kom
jendela properti, klik list “Caption” dan isikan
teks sesuai angka yang tertera pada “Index”.

Atur tata letak dan ukurannya sehingga


menyerupai tombol-tombol pada kalkulator
sebenarnya.

Masukkan lagi sebuah objek kontrol Command,


ubah properti “Name” menjadi: “cmdOperator”,
kopikan menjadi 5 (lima) buah. Ubah properti
“Caption” seperti pada tabel di bawah ini:

Index Caption
0 /
1 +
2 x
3 -
4 =

Masukkan lagi empat buah Command, ubah


properti-propertinya seperti pada tabel di bawah
ini:

Nama Objek Properti Perubahan


Name cmdPercent
Command1
Caption %
Name cmdDecimal
Command2
Caption .

Membuat File Help – Agung Novian, 55


S.Kom
Name cmdCancel
Command3
Caption C
Name cmdCE
Command4
Caption CE

Masukkan sebuah Label, dan ubah propertinya,


seperti pada tabel di bawah ini:

Nama Properti Perubahan


Objek
Name lblDisplay
Caption 0.
Alignment 1-Right Justify
Putih atau
Label1 BackColor warna terang
lainnya
Name lblDisplay
Caption 0.
Alignment 1-Right Justify

Atur tata letak dan ukuran semua objek kontrol,


hingga diperoleh tampilan hasil akhir desain
seperti pada ilustrasi gambar di bawah ini:

Membuat File Help – Agung Novian, 56


S.Kom
Gambar 4.5. Desain form Calculator.

Masukkan objek kontrol CommonDialog ke


dalam form, ubah properti “Name” nya menjadi
“cdlHelp”.

Klik menu ViewCode, Anda ketikkan kode


berikut ini:

1 Option Explicit

2 Dim Operator1, Operator2


3 Dim DecimalFlag As Integer
4 Dim NumOps As Integer
5 Dim AkhirMasukan
6 Dim JnOperator
7 Dim TempBaca

8 Private Sub _
cmdCancel_Click()
9 On Error Resume Next

Membuat File Help – Agung Novian, 57


S.Kom
10 lblDisplay = "0."
11 Operator1 = 0
12 Operator2 = 0
13 Form_Load
14 End Sub
'
15 Private Sub cmdCE_Click()
16 On Error Resume Next
17 lblDisplay = "0."
18 DecimalFlag = False
19 AkhirMasukan = "CE"
20 End Sub
'
21 Private Sub _
cmdDecimal_Click()
22 On Error Resume Next
23 If AkhirMasukan _
= "NEG" Then
24 lblDisplay = "-0."
25 ElseIf AkhirMasukan <> _
"NUMS" Then
26 lblDisplay = "0."
27 End If
28 DecimalFlag = True
29 AkhirMasukan = "NUMS"
30 End Sub
'
31 Private Sub _
cmdNomor_Click( _
Index As Integer)
32 On Error Resume Next
33 If Len(lblDisplay) _
<= 17 Then

Membuat File Help – Agung Novian, 58


S.Kom
34 If AkhirMasukan <> _
"NUMS" Then
35 lblDisplay = "."
36 DecimalFlag = False
37 End If
38 If DecimalFlag Then
39 lblDisplay = _
lblDisplay + _
40 cmdNomor(Index).Caption
41 Else
42 lblDisplay = Left( _
lblDisplay, InStr( _
lblDisplay, ".") - 1) + _
cmdNomor(Index).Caption + _
"."
43 End If
44 If AkhirMasukan _
= "NEG" Then
45 lblDisplay = "-" & _
lblDisplay
46 AkhirMasukan = "NUMS"
47 End If
48 End Sub
'
49 Private Sub _
cmdOperator_Click( _
Index As Integer)
50 On Error Resume Next
51 TempBaca = lblDisplay
52 If AkhirMasukan _
= "NUMS" Then
53 NumOps = NumOps + 1
54 End If

Membuat File Help – Agung Novian, 59


S.Kom
55 Select Case NumOps
56 Case 0
57 If cmdOperator(Index) _
= "-" And AkhirMasukan _
<> "NEG" Then
58 lblDisplay = _
"-" & lblDisplay
59 AkhirMasukan = "NEG"
60 End If
61 Case 1
62 Operator1 = lblDisplay
If cmdOperator(Index) _
= "-" And AkhirMasukan _
<> "NUMS" And _
63 JnOperator <> "=" Then
64 lblDisplay = "-"
65 AkhirMasukan = "NEG"
66 End If
67 Case 2
68 Operator2 = TempBaca
69 Select Case JnOperator
70 Case "+"
71 Operator1 = Operator1 + _
Operator2
72 Case "-"
73 Operator1 = Operator1 - _
Operator2
74 Case "X"
75 Operator1 = Operator1 * _
Operator2
76 Case "/"
77 If Operator2 = 0 Then
MsgBox "Div by zero", 48, _

Membuat File Help – Agung Novian, 60


S.Kom
"Kalkulator"
78 Else
79 Operator1 = Operator1 / _
Operator2
80 End If
81 Case "="
82 Operator1 = Operator2
83 Case "%"
84 Operator1 = Operator1 * _
Operator2
85 End Select
86 lblDisplay = Operator1
87 NumOps = 1
88 End Select
89 If AkhirMasukan _
<> "NEG" Then
90 AkhirMasukan = "OPS"
91 JnOperator = _
cmdOperator(Index)
92 End If
93 End Sub

94 Private Sub _
cmdPercent_Click()
95 On Error Resume Next
96 lblDisplay = _
lblDisplay / 100
97 AkhirMasukan = "OPS"
98 JnOperator = "%"
99 NumOps = NumOps + 1
100 DecimalFlag = True
101 End Sub

Membuat File Help – Agung Novian, 61


S.Kom
102 Private Sub _
Form_KeyPress( _
KeyAscii As Integer)
103 If KeyAscii >= _
Asc("0") And _
KeyAscii <= Asc("9") Then
104 cmdNomor_Click ( _
KeyAscii - 48)
105 ElseIf KeyAscii _
= Asc("/") Then
106 cmdOperator_Click (0)
107 ElseIf KeyAscii _
= Asc("+") Then
108 cmdOperator_Click (1)
109 ElseIf KeyAscii _
= Asc("*") Then
110 cmdOperator_Click (2)
111 ElseIf KeyAscii = _
Asc("-") Then
112 cmdOperator_Click (3)
113 ElseIf KeyAscii = _
Asc("=") Then
114 cmdOperator_Click (4)
115 ElseIf KeyAscii = 13 Then
116 cmdOperator_Click (4)
117 ElseIf KeyAscii = _
Asc("%") Then
118 cmdPercent_Click
119 ElseIf KeyAscii = _
Asc(".") Then
120 cmdDecimal_Click
121 End If
122 End Sub

Membuat File Help – Agung Novian, 62


S.Kom
123 Private Sub Form_Load()
124 On Error Resume Next
125 DecimalFlag = False
126 NumOps = 0
127 AkhirMasukan = "NONE"
128 JnOperator = " "
129 End Sub

130 Private Sub Form_KeyDown( _


KeyCode As Integer, _
Shift As Integer)
131 On Error Resume Next
132 If KeyCode = vbKeyF1 Then
133 With Me.cdlHelp
134 .HelpCommand = 3
135 .HelpFile = App.Path & _
"\Calc.hlp": .ShowHelp
136 End With
137 End If
138 End Sub

Tambahkan sebuah Module, dengan cara: klik


ProjectAdd Module, pada Module1, ketikkan
kode berikut:

1 Option Explicit

2 Private Declare Function _


WinExec _
Lib "kernel32" ( _
ByVal lpCmdLine As String, _
ByVal nCmdShow As Long _

Membuat File Help – Agung Novian, 63


S.Kom
) As Long

3 Private Declare Function _


mciExecute _
Lib "winmm.dll" ( _
ByVal lpstrCmd As String _
) As Long

4 Public Para()
5 Sub LihatPara()
6 Dim a, b, Perintah$
7 ReDim Para(0)
8 Perintah$ = Command
9 If Right(App.Path, 1) <> _
"\" Then
10 Para(0) = App.Path & "\" & _
App.EXEName
11 Else
12 Para(0) = App.Path & _
App.EXEName
13 End If
14 Perintah$ = _
Trim(Perintah) + " "
15 Do
16 a = InStr( _
Perintah, " ")
17 If a <= 1 Then Exit Do
18 b = b + 1
19 ReDim Preserve Para(b)
20 Para(b) = Left( _
Perintah, a - 1)
21 Perintah = _
LTrim(Mid(Perintah, a + 1))

Membuat File Help – Agung Novian, 64


S.Kom
22 Loop
23 End Sub

24 Sub LakukanAksi( _
Optional Perintah, _
25 Optional Isi)
26 On Error Resume Next
27 If IsMissing(Perintah) Then
WinExec "Winhelp.exe" & _
28 App.Path & "\Calc.hlp", 1
29 Exit Sub
30 End If
31 Select Case UCase( _
Perintah)
32 Case "WAV"
33 Select Case Isi
34 Case 1: frmCalc.Show
35 mciExecute "Play " & _
App.Path & "\SUARA.WAV"
End Select
36 Case "AVI"
37 Select Case Isi
38 Case 1: frmCalc.Show
39 mciExecute "Play " & _
App.Path & _
"\FILEMOVE.AVI"
40 End Select
41 Case "LIHAT": frmCalc.Show
42 End Select
43 End Sub

44 Sub Main()
45 LihatPara

Membuat File Help – Agung Novian, 65


S.Kom
46 Select Case UBound(Para)
47 Case 0: LakukanAksi
48 Case 1: LakukanAksi Para(1)
49 Case 2:
50 LakukanAksi Para(1), (2)
51 End Select
52 End Sub

Ubah properti project dengan cara: klik menu


ProjectProject1 Properties.

Pada dialog yang ditampilkan, ubah “Project


Name” menjadi “Calculator”. Ubah pula
“Startup Object” menjadi “Sub Main”, lihat
ilustrasi gambar di bawah ini:

Gambar 4.6. Dialog Project Properties.

Membuat File Help – Agung Novian, 66


S.Kom
Simpan pekerjaan dengan mengklik menu File
Save, simpan di alamat “C:\Calc”.

Compile-kan project Anda menjadi file aplikasi


(*.exe) dengan cara: klik menu FileMake
Calculator.exe.

4.6. Menyalin File


Pendukung
Anda memerlukan 2 (dua) buah file pendukung,
yaitu: “Suara.wav” dan “FileMove.avi”

Untuk menambahkan file “Suara.wav”,


jalankan Windows Explorer, buka alamat:
“C:\Windows\Media”, klik sebuah file (*.wav),
contoh file “Windows XP Logon Sound”. Klik
kanan pada file tersebut pilih Copy. Buka
alamat “C:\Calc”, Paste-kan di sana (klik kanan
pada bidang kosong, pilih Paste). Ubah nama
file tersebut dengan cara: klik kanan pada file
tersebut, pilih Rename. Ubah nama dengan
“Suara”.

Untuk menambahkan file “FileMove.avi”,


dengan Windows Explorer buka alamat:
“C:\Program Files\Microsoft Visual
Studio\Common\Graphics\ Videos”, klik file

Membuat File Help – Agung Novian, 67


S.Kom
“FileMove”, Copy-Paste kan ke alamat
“C:\Calc”.

4.7. Membuat file Help


“Calc.hlp”
Dengan bantuan Ms. Word buatlah file
“Calc.rtf”, ketikkan teks, sebagai berikut:

Calculator

Klik {button Kalkulator, ExecFile


(Calculator.exe, Lihat)} untuk menjalankan
Kalkulator.

Klik {button Suara, ExecFile (Calculator.exe,


wav 1)} untuk mendengarkan suara.

Klik {button Video, ExecFile (Calculator.exe,


avi 1)} untuk melihat video.

Blok teks “Calculator”, ubah style menjadi


“Heading 3”. Tambahkan footnote dengan
simbol “$” dan “#”, isikan footnote dengan
teks: “Index”.

Simpan pekerjaan Anda di “C:\Calc”, namai


dengan “Calc.rtf”.

Membuat File Help – Agung Novian, 68


S.Kom
Jalankan aplikasi Help Workshop, klik menu
FileNew, pilih “Help Project”, dan klik OK.

Klik tombol Files…, klik tombol Add, pilih file


“Calc”. Klik tombol Windows…, ketikkan:
“main”, dan klik OK. Klik tab “Position”, klik
tombol Auto-Sizer, atur posisi dan ukuran
jendela help sesuai selera. Klik tab Color, klik
tombol Change…, ubah warna sesuai selera.
Klik OK.

Gambar 4.7. Help Workshop – Pengaturan-


pengaturan.

Klik tombol Save and Compile. Tampilan help


seperti contoh gambar ilustrasi di bawah ini.

Membuat File Help – Agung Novian, 69


S.Kom
Gambar 4.7. Jendela Help – Menampilkan tombol.

Klik tombol Kalkulator, maka aplikasi


Calculator yang telah Anda buat akan dipanggil
ditampilkan. Klik tombol Suara, maka file
“Suara.wav” akan diputar, begitu pula saat
tombol Video diklik, program akan memutar
file “FileMove.avi”.

Tutup jendela Help, dan aktifkan aplikasi


Calculator, tekan tombol F1 pada keyboard,
maka file help akan ditampilkan.

Membuat File Help – Agung Novian, 70


S.Kom
BAB V
HTML SEBAGAI
HELP

5.1.HTML Help dengan


HTML Help Workshop
Sepertinya saya tidak perlu menjelaskan lebih
detil tentang HTML (Hyper Text Mark up
Language). Karena saya menganggap Anda
sudah mengenal dan bisa membuat sebuah file
HTML. Untuk membuat file HTML mungkin
Anda sudah biasa menggunakan aplikasi
Notepad, Front Page, Dream Weaver dan
sebagainya. Kali ini saya akan mengajak Anda
membuat file HTML dengan menggunakan
aplikasi HTML Help Workshop.

Aplikasi HTML Help Workshop dapat Anda


temukan pada CD instalasi Ms. Visual Studio.
Jika pada komputer Anda belum terpasang
aplikasi ini, bukalah CD Ms. Visual Studio
Anda, buka folder “HTMLHELP”. Kemudian
instalkan file HTMLHELP.exe yang ada di

Membuat File Help – Agung Novian, 71


S.Kom
dalam folder tersebut (klik ganda dan ikuti
instruksi-instruksi yang diberikan).

Setelah program aplikasi HTML Help


Workshop terpasang, klik tombol StartAll
Programs HTML Help Workshop HTML
Help Workshop.

Gambar 5.1. Lingkungan kerja HTML Help


Workshop.

Gambar di atas adalah IDE dari HTML Help


Workshop. Untuk membuat file HTML, klik
menu FileNew, pada dialog New, klik lis
HTML File, klik OK. Akan tampil dialog yang

Membuat File Help – Agung Novian, 72


S.Kom
meminta Anda memasukkan judul HTML,
ketikkan judul, contoh: “Membuat HTML
Help”. Klik OK. Mulailah berkreasi membuat
file HTML.

5.2.Membuat HTML Help


dengan Mengkonversi
file Help Project (*.hpj)
Ada dua langkah atau cara membuat file HTML
Help (*.chm), yaitu dengan mengkonversi file
help project (*.hpj) atau membuatnya secara
manual (diawali dengan membuat file HTML).

Baiklah, kita akan mencoba membuat file


HTML Help langkah pertama yaitu dengan
konversi dari file help project (*.hpj). Mulailah
dengan membuat folder atau direktori baru di
drive C, namai dengan “HTML Help”, buka
folder “HTML Help” tersebut dan buatlah sub
folder baru di dalamnya, namai dengan
“Konversi”. Ini dilakukan agar Anda lebih
mudah mengorganisasikan file-file yang
diperlukan.

Membuat File Help – Agung Novian, 73


S.Kom
 Membuat Project dengan
Wizard
Jalankan HTML Help Workshop, klik menu
FileNew…. Saat dialog “New” ditapilkan,
pilih list “Project”, klik OK.

Anda akan mendapatkan sebuah wizard, tandai


checkbox “Convert WinHelp Project”, klik
Next. Pada wizard berikutnya, klik tombol
Browse… pada “Specify where your WinHelp
project file is located:”, tentukan nama dan
alamat file help project (*hlp) yang akan Anda
konversikan. Sebagai contoh: buka folder
“C:\Help” dan pilih “Help2”.

Klik tombol Browse… yang kedua, alamatkan


ke “C:\HTML Help\Konversi” (folder yang tadi
Anda buat). Ketikkan nama file HTML Help
project Anda, contoh ketikkan: “HHP1” Hal ini
untuk menentukan nama dan alamat file
penyimpanan project Anda. Klik Next.

Membuat File Help – Agung Novian, 74


S.Kom
Gambar 5.2. Wizard New Project.

Klik Finish untuk mengakhiri wizard.

 Membuat Table of Contents


Pada lingkungan kerja HTML Help Workshop, klik
tab “Contents”. Saat tampil dialog “Table of
Contents not Specified”, pastikan option terpilih
pada “Create a new contents file”. Klik OK

Namai file content Anda dengan nama


“Content”, klik Save. Sekarang kita mula
membuat masukan untuk file content.

Membuat File Help – Agung Novian, 75


S.Kom
Gambar 5.3. Menambahkan Contents file.

 Membuat Heading Content


Klik tombol “Insert a Heading” , akan
ditampilkan dialog “Table of Content Entry”,
ketikkan judul untuk “Heading” Anda pada
textbox “Entry title”, contoh: “Selamat
Datang”. Klik tombol Add…, akan tampil
dialog “Path or URL”. Klik sebuah list “HTML
title” yang tersedia. Contoh klik “Index”
(“Index” ini adalah halaman awal yang akan
ditampilkan), Klik OK. Klik kembali tombol
OK pada dialog “Table of Content Entry”.
Sekarang, pada kotak “Contents” sudah
terdapat sebuah list.

Membuat File Help – Agung Novian, 76


S.Kom
Gambar 5.4. Menambahkan daftar Contents file.

 Membuat Page Content


Klik tombol “Insert a Page” , saat
ditampilkan kotak pesan, klik No (jika Anda
mengklik Yes, berarti Anda akan membuat page
sebagai permulaan content). Akan ditampilkan
dialog “Table of Content Entry” seperti saat
Anda membuat Heading. Ketikkan judul untuk
“page” Anda pada textbox “Entry title”, contoh:
“Biodata”. Klik tombol Add…, akan tampil
dialog “Path or URL”. Klik “Biodata”. Klik OK
. Klik kembali tombol OK pada dialog “Table
of Content Entry”. Sekarang, pada kotak
“Contents” sudah terdapat dua buah list.

Membuat File Help – Agung Novian, 77


S.Kom
Tambahkan page-page baru, sesuai banyaknya
file HTML yang tersedia atau sesuai rancangan
Anda.

 Membuat Index
Klik tab “Index”, pada dialog yang ditampilkan,
pastikan option terpilih pada “Create a new
index file”. Klik OK. Namai file Index dengan
“Index”.

Kita mula membuat masukan untuk file index,


langkahnya hampir sama dengan langkah
membuat file content.

Klik tombol “Insert a keyword” , ketikkan:


“Biodata” pada textbox “Keyword”. Klik
tombol Add… klik list “Biodata”, klik OK. Klik
OK kembali.

Buatlah keyword-keyword lainnya sesuai


keperluan.

Membuat File Help – Agung Novian, 78


S.Kom
Gambar 5.5. Menambahkan daftar pada index file.

 Mengkompilasi Project
Langkah terakhir tentunya adalah
mengkompilasi project agar Anda dapat melihat
hasil akhirnya. Klik menu FileCompile…
untuk mengkompilasi project Anda. Saat
ditampilkan dialog “Create a compiled file”,
tandai checkbox “Automatically display
compiled help file when done” agar program
langsung menampilkan jendela Help setelah
proses kompilasi selesai.

Membuat File Help – Agung Novian, 79


S.Kom
Klik Compile. Bila ditampilkan kotak pesan,
klik saja Yes, yang artinya Anda akan
menyimpan semua file pada project.

Gambar 5.6. Tampilan HTML Help.

5.3.Membuat HTML Help


Secara Manual
Kita mulai mencoba membuat HTML Help
secara manual alias tanpa melakukan konversi
dari file Help Project.

Mulailah dengan membuat folder atau direktori


baru di drive C, namai dengan “HTML Help”,

Membuat File Help – Agung Novian, 80


S.Kom
buka folder “HTML Help” tersebut dan buatlah
sub folder baru di dalamnya, namai dengan
“Manual”. Buka folder “Manual”, buatlah sub
folder baru, namai dengan “HTML”.

 Membuat file HTML


Klik menu FileNew…, klik “HTML File”,
klik OK. Ketikkan judul untuk file HTML
Anda, misalnya: “Help Saya”. Klik OK.

Simpan file HTML Anda, klik FileSave File,


alamatkan ke “C:\HTML
Help\Manual\HTML”. Namai dengan “Index”.

Silakan kreasikan HTML Anda, atau Anda


dapat melihat contoh script HTML seperti
berikut ini:

<H1></H1><!DOCTYPE HTML PUBLIC


"-//IETF//DTD HTML//EN">
<HTML>
<HEAD>
<meta name = "GENERATOR" content=
"Microsoft&reg;
HTML Help Workshop 4.1">
<Title>Membuat HTML Help</Title>
<STYLE Type="text/css">
TD {Border : Thin Groove}

Membuat File Help – Agung Novian, 81


S.Kom
A:link {text-decoration: none;
color: #000099}
A:visited {text-decoration: none;
color: #000099}
A:hover {text-decoration: none;
color: #CC0000}
A:active {text-decoration: none;
color: #000099}
</STYLE>
</HEAD>
<BODY Bgcolor=DDDDDD Text=000099>
<H2>Selamat Datang</H2>
Terimakasih telah mempelajari buku
ini.<BR><BR>
Silakan klik link berikut ini: <P>
<TABLE border=1>
<TR><TD width=150><LI><B>
<A href="biodata.htm">
Biodata</A></B></TD></TR><TR>
<td width=150><LI><B><A href="ahli.htm">
Keahlian</A></B></TD></TR><TR>
<TD width=150><LI>
<B><A href="alam.htm">
Pengalaman</A></B></TD></TR>
</TABLE>
</BODY>
</HTML>

Script HTML di atas akan menghasilkan


tampilan seperti ilustrasi gambar di bawah ini:

Membuat File Help – Agung Novian, 82


S.Kom
Gambar 5.7. Tampilan halaman HTML Index.

Buat file HTML lainnya, yaitu:”Biodata.htm”,


“Ahli.htm”, dan “Alam.htm”.

 Membuat file Biodata.htm


Klik menu FileNew…, klik “HTML File”,
klik OK. Ketikkan judul untuk file HTML
Anda, misalnya: “Biodata”. Klik OK.

Simpan file HTML Anda, klik FileSave File,


alamatkan ke “C:\HTML Help\Manual\
HTML”. Namai dengan “Biodata”.

Contoh script “Biodata.htm”:

<HTML>

Membuat File Help – Agung Novian, 83


S.Kom
<HEAD>
<META http-equiv="Content-Type"
content="text/HTML;
charset=windows-1252">
<TITLE>Biodata</TITLE>
<STYLE Type="text/css">
TD {Border : Thin Groove}
A:link {text-decoration: none;
color: #000099}
A:visited {text-decoration: none;
color: #000099}
A:hover {text-decoration: none;
color: #CC0000}
A:active {text-decoration: none;
color: #000099}
</STYLE>
</HEAD>
<BODY Bgcolor = #DDDDDD Text =
#555555 Leftmargin=20 Rightmargin=0
Topmargin=20 Bottommargin=20">
<TABLE Height=100% Width=100%
Border=1>
<TR><TD><TABLE cellSpacing=1
cellPadding=1 width="100%" align=center
border=0>
<TR><TD BorderColor="DDDDDD"
Width="48%">
<FONT size=2 color="#333333">Nama
Lengkap </FONT></TD>
<TD BorderColor="#DDDDDD"

Membuat File Help – Agung Novian, 84


S.Kom
Width="4%">
<FONT size=2 color="#333333">:
</FONT></TD><TD Width="48%">
<FONT size=2 color="333333">
<B>Agung Novian</B> </FONT>
</TD></TR><TR><TD
BorderColor="DDDDDD" Width="48%">
<FONT size=2 color="#333333">Nama
Beken</FONT> </TD><TD
BorderColor="DDDDDD" Width="4%">
<FONT size=2 color="333333">:</FONT>
</TD>
<TD Width="48%"><FONT size=2
color="333333">
Viansastra</FONT></TD></TR><TR>
<TD BorderColor="DDDDDD"
Width="48%">
<FONT size=2 color="333333">Nama
Panggilan
</FONT> </TD> <TD
BorderColor="DDDDDD"
Width="4%"><FONT size=2
color="#333333">:
</FONT></TD><TD Width="48%">
<FONT size=2 color="333333">
Ado</FONT>
</TD></TR><TR>
<TD BorderColor="#DDDDDD"
Width="48%">
<FONT size=2 color="#333333">

Membuat File Help – Agung Novian, 85


S.Kom
Kelahiran</FONT></TD><TD
BorderColor="DDDDDD" Width="4%">
<FONT size=2 color="#333333">:
</FONT></TD>
<TD Width="48%"><FONT size=2
color="333333"> Cirebon, 24 September
1982</FONT>
</TD></TR><TR>
<TD BorderColor="#DDDDDD"
Width="48%">
<FONT size=2
color="#333333">Pekerjaan</FONT> </TD>
<TD BorderColor="#DDDDDD"
Width="4%">:
<FONT size=2 color="#333333">
</FONT></TD>
<TD Width="48%"><FONT size=2
color="333333"> Mahasiswa, Programmer,
Teknisi, Instruktur, Penulis
</FONT></TD></TR><TR>
<TD BorderColor="DDDDDD"
Width="48%">
<FONT size=2 color="333333">Gol.
Darah</FONT> </TD><TD
BorderColor="#DDDDDD"
Width="4%"><FONT size=2
color="#333333">:
</FONT></TD><TD Width="48%">
<FONT size=2 color="#333333">
AB</FONT>

Membuat File Help – Agung Novian, 86


S.Kom
</TD></TR><TR>
<TD BorderColor="#DDDDDD"
Width="48%">
<FONT size=2 color="333333">Status
Marital
</FONT></TD><TD
BorderColor="#DDDDDD" Width="4%">
<FONT size=2
color="#333333">:</FONT></TD>
<TD Width="48%">
<FONT size=2 color="#333333"> Belum
Menikah
</FONT></TD></TR><TR><TD
BorderColor="DDDDDD" Width="48%">
<FONT size=2 color="333333">Alamat
Rumah</FONT></TD><TD
BorderColor="#DDDDDD" Width="4%">
<FONT size=2
color="#333333">:</FONT></TD>
<TD Width="48%" Align="Justivy">
<FONT size=2 color="#333333">Jl. P. Drajat
Gg. Jepun RT. 03/09 No. 48 Telp. 0231-
210178 Kota Cirebon
45133</FONT></TD></TR><TR>
<TD BorderColor="#DDDDDD"
Width="48%">
<FONT size=2 color="#333333">E-
mail</FONT></TD><TD
BorderColor="DDDDDD"
Width="4%"><FONT size=2

Membuat File Help – Agung Novian, 87


S.Kom
color="#333333">:</FONT></TD>
<TD Width="48%"><FONT size=2
color="333333">
<A href ="mailto:agung-
mi05@std.cic.ac.id">agung-
mi05@std.cic.ac.id</A><BR>
<A href ="mailto:viansastra@telkom.net">
viansastra@telkom.net</A><BR>
<A href ="mailto:vian_sastra@yahoo.co.id">
vian_sastra@yahoo.co.id</A>
</FONT></TD></TR></TABLE>
</TD></TR>
</TABLE>
</BODY>
</HTML>

Script HTML di atas akan menghasilkan tampilan


seperti ilustrasi gambar di bawah ini:

Membuat File Help – Agung Novian, 88


S.Kom
Gambar 5.8. Tampilan halaman HTML Biodata.

 Membuat file Ahli.htm


Klik menu FileNew…, klik “HTML File”,
klik OK. Ketikkan judul untuk file HTML
Anda, misalnya: “Keahlian”. Klik OK.

Simpan file HTML Anda, klik FileSave File,


alamatkan ke “C:\HTML
Help\Manual\HTML”. Namai dengan “Ahli”.

Contoh script “Ahli.htm”:

<HTML>
<HEAD>
<META http-equiv="Content-Type"
content="text/HTML; charset=windows-
1252">
<TITLE>Keahlian</TITLE>
<STYLE Type="text/css">
TD {Border : Thin Groove}
A:link {text-decoration: none;
color: #000099}
A:visited {text-decoration: none;
color: #000099}
A:hover {text-decoration: none;
color: #CC0000}
A:active {text-decoration: none;

Membuat File Help – Agung Novian, 89


S.Kom
color: #000099}
</STYLE>
</HEAD>
<BODY Bgcolor=Dddddd Text=555555
Leftmargin=20 Rightmargin=0
Topmargin=20 Bottommargin=20>
<TABLE Height=100% Width=100%
Border=1><TR><TD Valign=Top>
<TABLE Cellspacing=1 Cellpadding=1
Width="100%" align=center border=0>
<TR><TD Width="100%">
<FONT size=2 color="#222222">
<B>Bahasa Pemograman:</B> </FONT>
</TD></TR><TR><TD Width="100%">
<LI><FONT size=2 color="#333333">
Under DOS (Pascal)</FONT></LI>
<LI><FONT size=2 color="#333333">
Visual (VB, Foxpro, Delphi,
C++)</FONT></LI><LI><FONT size=2
color="#333333">
dot Net (VB .Net)</FONT></LI>
<LI><FONT size=2 color="#333333">
Web (PHP, ASP, JavaScript, VBScript)
</FONT></LI><LI><FONT size=2
color="#333333">SQL</FONT></LI>
</TD></TR> <TR><TD Width="100%">
<FONT size=2 color="#222222">
<B>Aplikasi Perkantoran dan
Grafis:</B></FONT>
</TD></TR><TR><TD Width="100%"><LI>

Membuat File Help – Agung Novian, 90


S.Kom
<FONT size=2 color="#333333">Office
(Word, Excel, Access,
PowerPoint)</FONT></LI>
<LI><FONT size=2 color="#333333">
Corel (Draw, PhotoPaint)</FONT></LI>
</TD></TR><TR><TD Width="100%">
<FONT size=2 color="#222222">
<B>Menulis:</B> </FONT></TD>
</TR> <TR><TD Width="100%"><LI>
<FONT size=2 color="#333333">
Buku Panduan Komputer</FONT></LI><LI>
<FONT size=2 color="333333">Sastra
(Cerpen, Puisi)
</FONT></LI></TD></TR></TABLE></TD
></TR></TABLE></BODY></HTML>

Script HTML di atas akan menghasilkan tampilan


seperti ilustrasi gambar di bawah ini:

Membuat File Help – Agung Novian, 91


S.Kom
Gambar 5.9. Tampilan halaman HTML Ahli.

 Membuat file Alam.htm


Klik menu FileNew…, klik “HTML File”,
klik OK. Ketikkan judul untuk file HTML
Anda, misalnya: “Pengalaman”. Klik OK.

Simpan file HTML Anda, klik FileSave File,


alamatkan ke “C:\HTML
Help\Manual\HTML”. Namai dengan “Alam”.

Contoh script “Alam.htm”:

<HTML>
<HEAD>
<META http-equiv="Content-Type"
content="text/HTML; charset=windows-
1252"><TITLE>Pengalaman</TITLE>
<STYLE Type="text/css">
TD {Border : Thin Groove}
A:link {text-decoration: none;
color: #000099}
A:visited {text-decoration: none;
color: #000099}
A:hover {text-decoration: none;
color: #CC0000}
A:active {text-decoration: none;
color: #000099}

Membuat File Help – Agung Novian, 92


S.Kom
</STYLE></HEAD>
<BODY Bgcolor=Dddddd Text=555555
Leftmargin=20 Rightmargin=0 Topmargin=20
Bottommargin=20>
<TABLE Height=100% Width=100%
Border=1><TR><TD Valign=top>
<TABLE cellSpacing=1 cellPadding=1
width="100%" align=center border=0>
<TR><TD Width="100%">
<FONT size=2 color="#222222">
<LI>Programmer PT. Mekraindo -
Majalengka, tahun 2004 s.d. sekarang
</FONT></LI></TD></TR> <TR><TD
Width="100%"><FONT size=2
color="#222222"><LI>Penulis Buku Panduan
Ms. Visual Basic, tahun 2004,
<A HREF=http:\\www.andipublisher.com>
ANDI Offset Yogyakarta </a></FONT></LI>
</TD></TR> <TR> <TD Width="100%">
<FONT size=2 color="#222222">
<LI>Penulis lepas di
<A href="http:\\www.ilmukomputer.com" title
= "IlmuKomputer" target="blank">
ilmukomputer.com
</A></FONT></LI></TD></TR>
</TABLE>
</TD></TR>
</TABLE>
</BODY>
</HTML>

Membuat File Help – Agung Novian, 93


S.Kom
Script HTML di atas akan menghasilkan
tampilan seperti ilustrasi gambar di bawah ini:

Gambar 5.10. Tampilan halaman HTML Alam.

Dengan begini kita sudah punya empat file


HTML.

 Membuat file HTML Help


Project
Setelah semua file HTML siap, kita baru
memulai membuat file HTML Help Project
(*.hhp). klik menu FileNew…, pilih
“Project”, klik OK. Jangan tandai checkbox,
klik Next. Klik tombol Browse…, alamatkan

Membuat File Help – Agung Novian, 94


S.Kom
ke: “C:\HTML Help\Manual”. Ketikkan nama
untuk file Anda “HHP2”. Klik Open.

Klik tombol Next. Tandai semua chexbox yang


ada, yaitu:

- HTML Help table of content (.hhc)


- HTML Help index (.hhk)
- HTML file (.htm)

Klik tombol Next. Abaikan wizard ini. Klik tombol


Next. Abaikan pula wizard ini. Klik tombol Next.

Sampai Anda menemukan wizard “New Project –


HTML Files”, klik tombol Add….

Alamatkan ke: “C:\HTML Help\Manual\HTML”.


Blok semua file HTML pada alamat ini. Klik Open.

Gambar 5.10. Wizard New Project – HTML Files.

Membuat File Help – Agung Novian, 95


S.Kom
Klik Next. Terakhir klik Finish.
 Membuat Table of Contents dan
file Index
Buatlah file table of contents dan file index
seperti pada penjelasan sebelumnya 5.4.
Membuat HTML Help dengan Mengkonversi
file Help Project (*.hpj) point “Membuat Table
of Content” sampai “Membuat Index”.

 Pengaturan Terakhir
Klik tab “Project”, klik tombol “Change project
option” . Pada tab “General”, ketikkan judul
untuk HTML Help Anda pada textbox “Title”,
misalnya: “HTML Saya”. Ubah “Default file:”
menjadi: “HTML\biodata.htm”.

Membuat File Help – Agung Novian, 96


S.Kom
Gambar 5.11. Dialog Options.
Klik OK untuk menyimpan perubahan.
Kompilasikan project Anda, klik menu File
Compile… pada dialog yang ditampilkan klik
tombol Compile. Bila ditampilkan kotak pesan,
klik tombol Yes, untuk menyimpan semua file.

Tampilah HTML Help, mungkin akan seperti


ilustrasi gambar di bawah ini:

Gambar 5.11. Tampilan HTML Help.

Membuat File Help – Agung Novian, 97


S.Kom

You might also like