© 2011 Freddy Iriawan– All Rights Reserved
Panduan Sakti Bisnis Online http://www.BisnisSakti.com
Panduan Lengkap Membuat
Website untuk Pemula
Bagaimana Cara Membuat Website sederhana khusus
untuk Anda seorang Pemula
by Freddy Iriawan
Ebook ini dipersembahkan oleh
-8-tulis nama anda disini-8-
Klik Link di bawah untuk mengunjungi websitenya
http://-8-tulis website affiliasi anda disini-8-
Mau dapat duit hanya dengan membagikan ebook Gratis?
Tutorial/Panduan menghasilkan uang dari ebook Gratis, segera klik
http://bisnissakti.com/signup.php
Untuk Panduan Rebranding bisa klik :
http://bisnissakti.com/Rebrand.pdf
© 2011 Freddy Iriawan– All Rights Reserved
Panduan Sakti Bisnis Online http://www.BisnisSakti.com
PERHATIAN: Anda MEMILIKI hak
penuh untuk memperbanyak
panduan ini
Anda juga BOLEH membagikan
dan memberikan isi dari panduan
ini pada siapa saja
© Copyright 2011 BisnisSakti.com
© 2011 Freddy Iriawan– All Rights Reserved
Panduan Sakti Bisnis Online http://www.BisnisSakti.com
ALL RIGHTS RESERVED
Tidak ada bagian dalam produk ini yang boleh diperbanyak,disebarkan, disiarkan atau
diproduksi ulang dalam berbagai cara apapun, termasuk tetapi tidak terbatas secara
elektronik atau mekanik. Dilarang keras untuk penggunaan tanpa izin tertulis dari penulis
untuk mencetak ulang, atau menyebarluaskan penerbitan ini. Penyebaran panduan ini
hanya melalui metode rebrand dengan tetap mencantumkan sumbernya yaitu
bisnissakti.com.
Dengan membaca ebook ini, berarti Anda sudah membaca, mengerti dan setuju dengan
semua pernyataan yang kami buat.
DISCLAIMER AND/OR LEGAL NOTICES
Segala usaha telah dibuat seakurat mungkin untuk menggambarkan produk ini dan
potensinya. Contoh dalam produk ini tidak dapat di anggap sebagai janji atau garansi
untuk mendapatkan penghasilan. Potensi untuk mendapat penghasilan sepenuhnya
tergantung pada pribadi masing-masing yang menggunakan produk kami, ide kami,
teknik dan usaha yang di lakukan. Kami tidak mengatakan bahwa produk ini adalah “cara
cepat kaya”
Tingkat kesuksesan Anda dalam menggunakan materi dari kami tergantung dari waktu
yang Anda curahkan untuk menjalankan program, menggunakan ide dan teknik yang
telah dijabarkan, pengetahuan dan bermacam-macam keahlian. Kami tidak dapat
menggaransi kesuksesan dan tingkat pendapatan Anda selama factor-faktor di atas
tergantung dari kemampuan dari masing-masing individu.
Materi dari produk kami dan website kami memuat informasi yang berdasarkan
pandangan kedepan. Pandangan kedepan memberikan kami harapan atau ramalan pada
kejadian di masa yang akan datang.
Setiap pandangan kedepan pada setiap materi yang kami jual kami bermaksud untuk
mengungkapkan pendapat kami tentang potensi untuk mendapatkan penghasilan.
Banyak faktor yang akan mempengaruhi penghasilan Anda sebenarnya dan tidak ada
garansi bahwa Anda akan menerima hasil yang sama seperti kami atau orang lain. Tidak
ada garansi bahwa Anda akan meraih penghasilan dari ide dan teknik kami.
© 2011 Freddy Iriawan– All Rights Reserved
Panduan Sakti Bisnis Online http://www.BisnisSakti.com
Hasil setiap orang berbeda-beda, dan seperti produk yang memberikan informasi untuk
berkesempatan menghasilkan uang yang lain, Anda dapat menghasilkan uang lebih atau
kurang, bahkan tidak sama sekali. Sukses dalam program ini adalah hasil dari kerja keras,
waktu dan banyak faktor lain yang mempengaruhi. Tidak ada pernyataan garansi apapun
tentang pendapatan Anda.
© 2011 Freddy Iriawan– All Rights Reserved
Panduan Sakti Bisnis Online http://www.BisnisSakti.com
OK! masih semangat dalam belajarnya kan? Selanjutnya saya akan tunjukkan cara
termudah bagaimana membuat website sederhana khusus untuk pemula.
Kita awali dengan pemahaman bahasa HTML dulu ya.
Dewasa ini, hampir semua dokumen web dibuat dengan bahasa HTML (Hypertext Mark-up
Language).
Meskipun Anda bisa saja membuat web page (halaman web) tanpa mengerti sedikitpun
HTML, yakni dengan menggunakan editor HTML berjenis WYSIWYANG seperti Microsoft
FrontPage, Adobe PageMill atau Netscape Composer.
Namun sangat disarankan bahkan nyaris diharuskan, agar Anda mengerti bahasa HTML.
Terutama agar Anda bisa memanfaatkan secara optimal berbagai fasilitas browser dan
mengingat sejumlah kelemahan yang terdapat pada editor WYSIWYANG seperti di atas.
Untuk itu langkah pertama bagi Anda yang bercita-cita memiliki website sendiri adalah
belajar HTML.
HTML (Hypertext Markup Language) adalah bahasa program yang digunakan untuk
menulis format dokumen yang dapat digunakan dalam Web.
Dengan HTML, teks ASCII (file *.txt) dapat dipoles (di-mark-up) dengan kode-kode
tertentu yang disebut tag untuk menjadi dokumen HTML (file *.htm atau *.html).
© 2011 Freddy Iriawan– All Rights Reserved
Panduan Sakti Bisnis Online http://www.BisnisSakti.com
Oleh karena itu, untuk membuat dokumen HTML, Anda bisa menggunakan semua
program teks editor biasa, mulai dari Notepad hingga MS Word. Untuk mudahnya, kita
gunakan program Notepad.
Bukalah program Notepad. Bila Anda belum tahu caranya, klik Start > Programs >
Accessories lalu Notepad. Sekarang ikutilah dengan seksama latihan-latihan berikut satu
demi satu.
I. Membuat halaman Web dengan menggunakan program MS Word
A. MEMBUAT TABEL
Tabel pada halaman web bisa memperjelas keterangan karena keteraturannya dan tiap
cell (tiap kotak pada tabel) bisa diberikan warna background yang berbeda agar
penjelasan lebih mudah terlihat dan lebih terfokus.
Cara membuatnya Tabel : Klik "Table --> Insert --> Table" dan tentukan berapa banyak
Row (baris) serta Column (kolom) nya; atau langsung klik icon Table di Toolbar (panah
merah) dan drag (seret) berapa banyak cell ke bawah dan ke samping.
Gambar (2) : Icon Table
© 2011 Freddy Iriawan– All Rights Reserved
Panduan Sakti Bisnis Online http://www.BisnisSakti.com
Mengatur Tampilan Tabel :
Sementara kursor berada pada tabel yang dimaksud, klik kanan pilih "Borders and
Shading" (atau pilih dari Toolbar : Table -->Tabel Properties--> "Borders and Shading".
Selanjutnya silakan pilih Tab "Borders" (atas kiri), terdapat beberapa pilihan :
- None : Border (garis tepi keliling tabel) tidak akan terlihat
- Box : border hanya disekeliling (paling luar) dari tabel, sedangkan garis-garis kolom
(column) dan baris (row) di dalamnya tidak akan terlihat.
- All : memperlihatkan semua garis kolom dan baris dengan ketebalan dan jenis garis yang
sama
Gambar (3) Borders : All
- Grid : memperlihatkan border keliling paling luar dengan ketebalan dan jenis garis
sesuai pengaturan Anda, sedangkan garis-garis kolom dan baris di dalamnya hanya tipis
saja.
© 2011 Freddy Iriawan– All Rights Reserved
Panduan Sakti Bisnis Online http://www.BisnisSakti.com
Gambar (4) Borders : Grid
Geser dan sesuaikan Lebar Tabel / Cell (dengan menggeser seperti yang ditunjukkan
gambar diatas).
Atau tempelkan saja kursor Anda pada garis yang diinginkan untuk digeser (begitu juga
untuk mengatur Tinggi Tabel /Cell ) sampai berbentuk panah kecil ke kiri kanan ( | ), dan
geser.
Pada window pengaturan: “Border and Shading” itu juga Anda dapat memilih jenis
garis (apakah putus-putus, dobel, dsb) , warna (Color) dan ketebalannya (1/4 pt, 1/2 pt,
3/4 pt, 1 pt ..., dst).
Fasilitas Preview di sebelah kanan memudahkan Anda melihat hasilnya.
Anda dapat juga mewarnai setiap cell dengan warna yang sama atau berbeda.
© 2011 Freddy Iriawan– All Rights Reserved
Panduan Sakti Bisnis Online http://www.BisnisSakti.com
Pada window “Border and Shading", pilih Tab "Shading" kemudian pilih warna (untuk
pilihan warna lebih banyak klik "More Colors") dan juga pilih "Apply To" apakah warna
tersebut akan diterapkan pada Tabel (Table) atau Cell.
Gambar (5) Borders & Shading window
Anda juga bisa memilih Style dari Pattern bila menginginkan.
**Cobalah Klik Kanan pada Cell /Tabel untuk "Delete Cells" (Menghapus), "Split Cells"
(Membagi Cell jadi beberapa bagian), "Cell Alignment" (Mengatur Letak Teks) ataupun
"Merge Cells" (ini hanya tampil bila Anda mem-blok lebih dahulu cell-cell yang ingin
disatukan).
© 2011 Freddy Iriawan– All Rights Reserved
Panduan Sakti Bisnis Online http://www.BisnisSakti.com
B. MEMBERI BACKGROUND PADA HALAMAN
Pada kebanyakan web bisnis warna dasarnya adalah putih.
Ini memudahkan Anda bila memakai gambar, karena pada umumnya gambar-gambar
yang tersedia untuk web mempunyai dasar (background) putih. Hal ini akan dibahas lebih
lanjut dalam materi lain.
Namun demikian bila Anda ingin warna background berbeda, silakan melakukannya.
Klik "Format --> Background". Ada beberapa pilihan yang disediakan :
a. Langsung klik warna yang dikehendaki, atau
© 2011 Freddy Iriawan– All Rights Reserved
Panduan Sakti Bisnis Online http://www.BisnisSakti.com
b. Klik "More Colors" untuk pilihan warna yang lebih banyak.
Bila masih tidak ada yang sesuai dengan keinginan, klik warna yang mendekati (misalnya
biru), lalu klik tab "Custom".
Gambar (7) More Colors & Custom
Setelah itu akan tampil jendela berikut dimana Anda bisa menggeser 'slider' segitiga
hitam untuk membuat warna lebih terang atau gelap; ataupun langsung memilih warna
dari kotak di sebelahnya (klik dimana saja).
© 2011 Freddy Iriawan– All Rights Reserved
Panduan Sakti Bisnis Online http://www.BisnisSakti.com
Namun berhati-hati dengan pilihan ini sebab warna-warna "Custom" kebanyakan bukan
"Web Safe Color" (warna yang aman untuk web).
Karena web Anda akan dilihat oleh banyak orang dengan menggunakan
perangkat komputer yang berbeda kemampuannya ( kartu grafis, resolusi di monitor, dsb)
maka bisa jadi apa yang tampil monitor Anda tidaklah sama dengan di monitor orang lain.
Gambar (8) Custom Color
Pilihan warna pada Microsoft Word sangat banyak karena aplikasi ini lebih banyak
ditujukan untuk pengguna offline yang hendak mencetak (print) halaman tersebut.
Namun tidak ada salahnya Anda bereksperimen dengan opsi-opsi yang lain.
© 2011 Freddy Iriawan– All Rights Reserved
Panduan Sakti Bisnis Online http://www.BisnisSakti.com
c. Pilihan ke3 dari background ini ialah "Fill Effects" dimana terdapat 4 Tab yangdapat
dipilih (Gradient, Texture, Pattern dan Picture). Pilihan "Pattern" hampir tidak pernah
digunakan untuk halaman web.
Gambar (9) Fill Effects
Keterangan :
- Gradient : Bila Anda menginginkan warna gradasi.
Anda bisa memilih "One Color", "Two Color"(gradasi peralihan dari warna satu ke yang
lainnya) atau pun "Preset" dimana warna-warna sudah dipilihkan untuk Anda.
© 2011 Freddy Iriawan– All Rights Reserved
Panduan Sakti Bisnis Online http://www.BisnisSakti.com
Begitu pula letak warna bisa diatur apakah Horisontal, vertikal, diagonal dsb.
Contoh dibawah adalah pilihan "Two Color" dengan perletakan "Diagonal Up". Klik salah
satu dari 4 pilihan tata letak dan gradasi warna yang terdapat di kotak di sebelahnya.
- Texture : Bila menginginkan background berupa Tekstur
- Picture : Bila menginginkan background dari gambar yang sudah Anda punya di
komputer Anda. Pilih "Select Picture" dan arahkan ke direktori atau folder tempat Anda
menyimpan gambar tersebut.
Bila gambar berukuran besar mungkin akan memenuhi seluruh halaman web, tetapi bila
berukuran kecil, gambar akan berjejer banyak (tiles).
Untuk kebutuhan web bisnis online, diperlukan kecepatan membuka gambar, maka
pilihlah gambar dengan size kecil.
C. MEMASUKKAN LINK
Berhubung cara memasukkan Link pada MS Word sangat mirip dengan di MS
Frontpage, maka pembahasan mengenai ini bisa lihat pada butir III.C.
Memasukkan Link (pada Microsoft Frontpage)
D. MENYERTAKAN IMAGE
Pilih image dengan size kecil agar tidak membebani download. Cara memasukkan / insert
sangat mudah, yaitu : klik "Insert --->Picture --> From File".
© 2011 Freddy Iriawan– All Rights Reserved
Panduan Sakti Bisnis Online http://www.BisnisSakti.com
Carilah gambar yang Anda maksud dan dimana tempatnya. Perkecil dan perbesar gambar
dengan drag sisi-sisinya.
Bila posisi gambar terletak pada tempat yang tidak Anda inginkan, klik gambar tersebut
dan akan muncul toolbar ini :
Bila toolbar ini tidak muncul juga klik kanan pada gambar dan klik "Format Picture" -->
pilih tab "Layout".
Klik icon bergambar 'anjing dalam kotak bergaris-garis". Anda bisa mengatur tata letak
gambar dengan memilih :
IN LINE : gambar dianggap sebagai teks (yang sangat besar) menyelip diantara
teks/tulisan lainnya.
SQUARE : gambar menempati ruang bagai segi empat. Sisi kiri teks yang
bersebelahan dengan gambar akan rata kiri. Bila Anda pindahkan gambar ke tengah
paragraf, juga akan tetap membentuk ruang segi 4.
© 2011 Freddy Iriawan– All Rights Reserved
Panduan Sakti Bisnis Online http://www.BisnisSakti.com
TIGHT : ruang sekitar gambar mengikuti bentuk image/ gambar.
Contoh di bawah, bentuk gambar adalah bundar (format GIF, bila format JPG akan
menjadi square).
BEHIND TEXT : gambar terletak dibelakang Teks
IN FRONT OF : gambar terletak di depan / menutupi Teks
© 2011 Freddy Iriawan– All Rights Reserved
Panduan Sakti Bisnis Online http://www.BisnisSakti.com
Gambar (10) Layout Picture
E. SAVE AS “WEB PAGE”
Setelah halaman web selesai dibuat, simpan (save) seperti biasa dengan format doc,
namun save juga sebagai Web Page.
Inilah yang kemudian menjadi halaman web (ber-ekstensi htm atau html).
Bila kemudian Anda buka (dobel klik) halaman web yang barusan terbentuk tersebut , dan
ternyata gambar-gambar yang Anda sertakan pada halaman tersebut tidak muncul.
Coba ulangi kembali proses di atas dengan File à Save As à Web Page, Filtered. Akan
muncul tulisan "Saving in this format will remove ..." --> Klik "Yes" atau "Continue".
Gambar akan muncul di halaman web Anda sehingga Anda bisa melihat seperti apa
halama web Anda bila sudah online.
Akan terbentuk juga folder yang berisi image/gambar yang ada pada halaman web
tersebut.
© 2011 Freddy Iriawan– All Rights Reserved
Panduan Sakti Bisnis Online http://www.BisnisSakti.com
Contohnya : file bernama produk.doc dimana pada halamannya di insert gambar
buku.jpg dan button.gif.
Kemudian di Save As à Web Page, Filtered menjadi produk.htm dan folder
produk_files di mana di dalam folder tersebut berisi gambar buku.jpg dan button.gif
!! Perlu diingat : Pada saat upload, masing-masing gambar itu harus di upload tersendiri
ke server (misalnya : buku.jpg ; button.gif )!!. Bila hanya file halaman web saja yang di
upload, yang muncul hanya tulisan tanpa gambar. Lihat juga bab V. Mengupload Web
** Kumpulkan halaman web, image, file-fle yang berhubungan pada satu folder yang
sama sehingga memudahkan Anda untuk mengelola dan mengupload-nya.. Ingat!!
Untuk halaman muka harus diberi nama index.htm (ekstensi .htm akan terbentuk
otomatis)
Cara Optimasi Image
Setiap pengunjung website menginginkan halaman web yang dibuka terbuka dengan
cepat seluruhnya.
Terlebih bila web bisnis (bukan website pribadi/komunitas sendiri) maka Anda harus
menggunakan gambar seperlunya. Berikut beberapa tips :
a. Pakailah format gambar : JPG atau GIF. Format ini sangat irit space (terutama JPG,
meski adakalanya GIF lebih hemat, Anda dapat mencoba dan bandingkan).
Format GIF digunakan pada animasi (image bergerak) atau bila menginginkan
background image yang transparan. Image GIF yang di konversi ke JPG akan diberi
bentuk/ bingkai segi empat.
© 2011 Freddy Iriawan– All Rights Reserved
Panduan Sakti Bisnis Online http://www.BisnisSakti.com
Contohnya, image gif transparan berbentuk bintang warna kuning bila di-insert pada
halaman web hitam, maka bintang kuning akan langsung berhubungan (di atas) bidang
hitam.
Bila di konversi ke jpg, maka gambar bintang secara otomatis (default) akan mendapat
background putih segi empat di sekelilingnya.
bintang.gif di insert pada halaman web berlatar hitam.
Bintang.gif di konversi menjadi bintang.jpg dan diberi latar hitam insert pada halaman
web
b. Untuk mengubah Format gambar (misalnya dari BMP ke JPG), dapat menggunakan
software "Adobe Photoshop" bila punya, atau software yang sederhana yaitu "Paint"
dari Microsoft Windows" (sudah terinstal langsung pada saat menginstall Windows Me/Xp,
yaitu di : Start --> All Programs--> Accessories --> Paint.
Menggunakan "Paint" untuk mengubah format sangat mudah : File --> Open, dan cari
gambar yang diinginkan. Ubah format dengan cara "File --> Save As" (cari format yang
diinginkan).
© 2011 Freddy Iriawan– All Rights Reserved
Panduan Sakti Bisnis Online http://www.BisnisSakti.com
Kelemahannya software ini tidak bisa mengubah resolusi maupun mengubah ukuran
gambar.
Software yang sekaligus dapat mengubah ukuran dan resolusi serta dapat didownload
gratis adalah : Photo Resize Magic , silakan download di :
http://www.freedownloadscenter.com/Multimedia_and_Graphics/Graphics_Palette_and_Co
mpression_Tools/Photo_Resize_Magic.html.
Nah disini kita akan lanjutkan cara membuat web dengan microsoft frontpage.
Meski langkah-langkah dalam panduan ini menggunakan Frontpage XP, namun sangat
sedikit perbedaannya bila Anda menggunakan Frontpage 2000 atau dengan versi-versi
sebelumnya.
Bagi pemakai Word yang belum pernah memakai Frontpage, Anda tidak usah ragu untuk
mencoba-coba karena Fungsi dan Letak ToolBar pada Microsoft Frontpage mirip dengan
Microsoft Word.
A. MEMULAI FRONTPAGE dan MEMBUAT HALAMAN
Software Frontpage sudah termasuk ketika Anda menginstall Microsoft Office.
Bila belum terinstall masukkan kembali CD Microsoft Office dan pilih “Add or Remove
Features”, Next dan pilih Microsoft Frontpage dan ikuti petunjuk selanjutnya.
Setelah itu bukalah software ini, baik melalui shortcut ataupun “Start—All Programs--
Microsoft Frontpage”. Klik pada Menu bar : File New Page or Web. Akan tampil pada
kolom kanan pilihan-pilihan. Pilih: New – Empty Web.
© 2011 Freddy Iriawan– All Rights Reserved
Panduan Sakti Bisnis Online http://www.BisnisSakti.com
Kita akan membuat halaman Web tanpa frame, tanpa template. Bila Anda sudah
menguasai “Empty Web” akan mudah untuk mencoba membuat pilihan-pilihan lainnya.
Setelah itu akan tampil jendela/window seperti berikut :
Jangan ubah apa-apa. Hanya klik saja “Browse” untuk menempatkan folder Web Anda.
Terserah Anda menempatkannya pada direktori mana.
Tapi ketika sudah browse direktori yang dikehendaki, buat dulu Folder yang akan
menampung semua file pada web tersebut.
Gambar (12) Web site Template
© 2011 Freddy Iriawan– All Rights Reserved
Panduan Sakti Bisnis Online http://www.BisnisSakti.com
Gambar (13) Menempatkan Lokasi Web
Misalnya Anda ingin menempatkan Web Anda pada direktori C:\ klik icon “New Folder”
(ditandai panah merah) kemudian pada jendela kecil berikutnya isikan nama yang
dikehendaki (misalnya : Websaya ); dan klik OK, jendela kecil tertutup. Kembali ke jendela
“New Web Location”, kini sudah tampil folder Websaya dan klik “Open”.
Jendela “New Web Location” menutup, pada jendela yang ada (Web Site
Template) klik saja “OK”.
Program segera membentuk direktori : C:\Websaya (gambar icon yang diberi panah
merah) yang Anda bisa lihat dengan windows explorer pada (C:), dimana pada Tiles View
folder web akan mempunyai lingkaran biru-hijau di tengahnya.
© 2011 Freddy Iriawan– All Rights Reserved
Panduan Sakti Bisnis Online http://www.BisnisSakti.com
Gambar (14) Windows explorer drive (C:)
Gambar (15) Folder List & Toogle Pane
Sedangkan pada layar Frontpage, Anda akan melihat di sebelah kiri pada Folder List
terdapat direktori C:\Websaya, dan Folder : _private dan image .
© 2011 Freddy Iriawan– All Rights Reserved
Panduan Sakti Bisnis Online http://www.BisnisSakti.com
Bila Folder List belum muncul, klik Icon “Toogle Pane” (ditAndai panah merah). Ketika
nanti Anda menutup program “Frontpage” dan kemudian ingin membuka lagi di lain
waktu, biasanya akan segera diarahkan ke projek web terakhir yang Anda buat.
Bila tidak demikian, klik File à Open (atau klik icon gambar folder yang terbuka, di kiri
atas Menu Bar).
Untuk membuat halaman baru, caranya mirip Microsoft Word, klik saja icon pada
Menu Bar atau bisa juga klik File à New à Page or Web. Pilih: New – Page.
Untuk mengisi halaman, selain mengetik, Anda juga bisa copy dan paste dari halaman
web page lain (html) ataupun dari file.doc (Microfoft Word) ataupun dari Notepad (file
txt).
Selain copy dan paste, dapat juga dengan cara klik “Insert” pada Toolbar dan pilih
“File”. Pastikan Files of Type terisi dengan All Files (*.*) agar Anda bisa melihat semua
format files. [All Files (*.*) berada persis di atas HTML Files (*.htm, *.html).
Untuk insert file.doc sebaiknya tidak menggunakan cara ini (memerlukan converter), atau
klik saja “No” ketika Anda diminta menginstallnya [Microsoft Frontpage needs a converter
to display the file correctly. This feature is not currently installed. Would you like to install
it now?)
Untuk save / simpan halaman web tersebut, klik saja gambar disket pada Menu Bar atau
“File Save”. Akan muncul window dimana Anda bisa mengisi nama file (File name).
Silakan beri nama sesuka Anda, tentunya yang mencirikan halaman tersebut (kecuali
halaman muka harus bernama index).
© 2011 Freddy Iriawan– All Rights Reserved
Panduan Sakti Bisnis Online http://www.BisnisSakti.com
Jangan lupa untuk memberi Judul (Title) pada tiap halaman. Klik “Change” pada Page
Title (persis di atas isian untuk nama File) untuk mengubahnya.
Page Title akan muncul pada jendela browser Anda (misalnya Internet Explorer di paling
atas kiri).
Halaman muka/depan (home-page) dari Web, harus diberi nama index (htm atau
html). Atau bila Toogle Pane aktif, pada Folder List pilih file yang akan dijadikan
homepage.
Klik kanan pada file tersebut dan pilih “Set as Homepage”.
Halaman-halaman web yang Anda buat akan ditempatkan di dalam C:\Websaya (atau
sesuai direktori Frontpage yang Anda buat dan buka), sedangkan images (gambargambar)
akan dimasukkan ke dalam folder image.
Lebih jauh mengenai image akan dibahas dalam butir IIIE.
**Bila nama file terdiri dari 2 (dua kata) hendaknya jangan diberi spasi, tapi dihubungkan
dengan middlescore (-) atau underscore ( _ ), contoh bonus-utama.htm atau
bonus_utama.htm
**Bila ada banyak sekali halaman web yang Anda buat, bisa dikelompokkan dalam folder-
folder baru agar tersusun rapih. Untuk membuat folder baru, klik kanan pada C:\Websaya
dan pilih “New à Folder”.
**Pada komputer, apakah Frontpage atau Word, tidak dibedakan nama file huruf besar
dan huruf kecil (non case sensitif), tetapi pada server tidak demikian. Jika suatu saat Anda
© 2011 Freddy Iriawan– All Rights Reserved
Panduan Sakti Bisnis Online http://www.BisnisSakti.com
hendak mem-format hard-disk dan memback up web Anda tersebut pada CD, pastikan
agar huruf kecil tidak berubah menjadi huruf besar.
Halaman web yang terbentuk oleh Frontpage akan langsung terlihat berbentuk webpage
(tidak seperti pada Microsoft Word yang mana harus pilih “ View à Web Page” dulu)
dan halaman langsung mempunyai format htm.
Pada saat Anda sedang membuka suatu halaman, pada tab bagian bawah halaman,
Frontpage memberikan pilihan 3 macam tampilan (lihat “Page View Tabs pada gambar
di bawah ini) : Normal, HTML dan Preview.
Secara default (bila tidak Anda ubah) Anda bekerja pada modus “Normal”. Bila ingin
melihat kode HTML yang terbentuk bisa menekan tab HTML.
Dan “Preview” untuk melihat tampilan halaman sebenarnya (bisa juga klik “Preview in
Browser” (gambar kaca pembesar pada toolbar di atas di sebelah icon “print”).
Untuk dapat “Preview” Anda harus sudah menginstall Internet Explorer.
Pada menu Views Bar yang memanjang ke bawah (Page, Folders, Reports, Navigation,
Hyperlinks, Tasks).
Dua menu yang terutama bagi Anda, pertama adalah Folders (diberi panah merah)
dimana Anda bisa mengatur file-file Anda dan melihat keterangan dari halaman-halaman
web yang Anda buat (nama file, judul, size, dsb).
© 2011 Freddy Iriawan– All Rights Reserved
Panduan Sakti Bisnis Online http://www.BisnisSakti.com
Gambar (16) Views bar
Bila ingin memindahkan sekaligus beberapa file ke dalam suatu folder : sambil memijit
tombol Shift (tahan terus) klik file yang dimaksud, maka file-file tersebut akan terblok
warna biru.
Lepas Shift dan drag (klik kiri sekali dan seret ) ke folder yang diinginkan.
Klik pada File name ataupun Title bila ingin mengganti nama File ataupun judul
halaman.
Menu penting yang kedua pada Views Bar adalah menu “Report” (dapat juga dengan
cara “View à Report à Site Summary”) dimana Anda bisa melihat berapa banyak
halaman web, gambar (pictures) beserta size keseluruhannya; dan yang terlebih penting
lagi adalah untuk memeriksa Hyperlinks, apakah ada broken Hyperlinks (link yang
tidak jalan karena salah menempatkannya).
© 2011 Freddy Iriawan– All Rights Reserved
Panduan Sakti Bisnis Online http://www.BisnisSakti.com
Gambar (17) Reports views
Bila pada Site Summary terdapat Broken Hyperlink, klik saja untuk melihat link-link yang
mana. Anda akan diperlihatkan sejumlah hyperlink. Klik halaman yang berstatus
“Broken” tersebut untuk memperbaikinya.
Pembahasan mengenai Hyperlink terdapat pada butir IIIC. Memasukkan Link
B. MEMBUAT TABEL
Fungsi Tabel pada MS Frontpage mirip dengan MS Word, untuk memperjelas dan
memperbandingkan serangkaian data, memberikan keteraturan dan juga mengatur
layout halaman (misalkan hendak membagi homepage menjadi 2 atau 3 kolom utama).
Caranya seperti pada Microsoft Word, klik pada icon Table atau “Insert à Table à pilih
berapa banyak kolom (column) dan baris (row).
© 2011 Freddy Iriawan– All Rights Reserved
Panduan Sakti Bisnis Online http://www.BisnisSakti.com
Untuk memperbesar dan memperkecil tabel, langsung “drag” garis tepi/ batasbatas
dari tabel tersebut.
Untuk mengatur tampilan warna, garis, dsb dari Tabel ataupun Cell, klik kanan pada
Tabel atau Cell yang dimaksud dan pilih “Table Properties” (untuk mengatur Tabel) atau
“Cell Properties” (untuk mengatur Cell).
Pada window yang keluar akan tampil seperti berikut :
Gambar 18 Table Properties
Borders : Untuk mengatur ketebalan garis paling luar dari tabel. Silakan pilih size
(ketebalan) border. Bila tak ingin ada border maka size = 0. Warna border bisa Anda pilih,
ataupun bila ingin dua warna, Anda bisa memilih Light dan Dark.
© 2011 Freddy Iriawan– All Rights Reserved
Panduan Sakti Bisnis Online http://www.BisnisSakti.com
Background : Bisa memilih warna dengan langsung pilih dibagian Color. Bila memilih
gambar maka centang “Use background picture, kemudian klik “Browse”, cari dan
pilih file gambar Anda (format JPG atau GIF).
Bila gambar terlalu kecil, maka akan tersusun berbaris “tile”.
Pada Frontpage tidak ada pilihan jenis garis (putus-putus, titik-titik, dobel, dsb) seperti
pada Microsoft Word.
C. MEMASUKKAN LINK
Satu hal yang sering dipakai dalam halaman web adalah Link (hubungan), yaitu
bagaimana suatu kata/frasa/image bisa berhubungan dengan bagian lain/halaman lain/file
lainnya.
Untuk membuatnya, bisa dilakukan dengan cara : Blok kata tersebut (klik kiri, tahan dan
seret), kemudian "Klik Kanan" pada kata-kata yang di blok dan pilih "Hyperlink".
© 2011 Freddy Iriawan– All Rights Reserved
Panduan Sakti Bisnis Online http://www.BisnisSakti.com
Gambar (19) Insert Link Internal
Terlihat di atas bahwa secara default sudah terpilih (warna biru ) Existing File / Web
Page dan "Current Folder".
Pada bagian atas terdapat "Text to Display", masukkan "Judul atau kata-kata" yang
Anda ingin muncul di caption web.
Ini tidak sama dengan nama file. Contoh nama file: produk (html) sedangkan Text to
display: "Baca Keterangan Produk".
Selanjutnya pilih beberapa hal ini :
a. Untuk Link Internal
Link Internal adalah Link ke Halaman Web Lain dalam Satu proyek Web.
[Setiap halaman web adalah satu file (satu nama file). Sedangkan untuk format .doc (MS
Word) maka satu file bisa mempunyai banyak halaman.]
© 2011 Freddy Iriawan– All Rights Reserved
Panduan Sakti Bisnis Online http://www.BisnisSakti.com
Dari apa yang sudah terpilih secara default (Existing File / Web Page dan "Current
Folder"), Anda tinggal memilih file mana yang hendak dihubungan.
Contoh kata-kata "Baca Keterangan Produk" hendak di link dengan file
produk.htm (lihat gambar 19 di atas). Anda tinggal klik file tersebut dari jendela yang
muncul. Jangan link dengan halaman web pada direktori lain (pada contoh direktori
adalah C:\Websaya) akan membuat link tidak jalan nantinya.
Bila Anda akan link ke halaman yang belum ada (baru akan dibuat) bisa pilih "Create
New Document". Akan keluar seperti ini :
Gambar (20) Hyperlink ke New Document
Tinggal Anda mengisi nama dokumen tersebut (Name of new document), dan dimana
akan ditempatkan (klik "Change" bila tidak ingin disimpan di direktori yang sudah
muncul).
© 2011 Freddy Iriawan– All Rights Reserved
Panduan Sakti Bisnis Online http://www.BisnisSakti.com
Juga Anda bisa pilih akan mengedit documen itu sekarang atau nanti (later). Bila pilih
"Now" maka documen kosong akan ditampilkan, siap Anda kerjakan.
Sebaliknya bila pilih "Later" tidak akan ditampilkan tetapi tersimpan di tempat yang
sudah Anda tentukan.
Dokumen yang dihasilkan sudah langsung berupa halaman web (html).
**Kata (atau frasa/kata-kata) yang sudah diberi Link akan secara default berwarna biru
dengan underlined (Anda bebas merubah warna, size, font, tanpa underline, dsb).
**Untuk semua halaman yang terdapat dalam 1(satu) web yang Anda buat, sebaiknya
memakai Link Internal, agar seAndainya Anda perlu mengganti nama domain, hal ini tidak
bermasalah. (Untuk lebih jelasnya baca mengenai “Link Eksternal”)
b. Untuk Link Eksternal
Link Eksternal adalah Link ke Halaman Web dari situs-situs lain. Setelah klik "Hyperlink"
pilih "Browsed Pages" di bawah dari "Current Folder" (lihat Gambar 19 Insert
Hyperlink).
Akan terlihat daftar dari halaman-halaman web yang sudah Anda buka (browsed). Bila
belum ada, dapat langsung ketik URL halaman yang dimaksud di bagian "Address"
misalnya http://www.bisnissakti.com/index.htm atau cukup http://bisnissakti.com
Anda juga dapat membuat Link ke halaman web Anda sendiri dengan cara eksternal.
CONTOHnya domain Anda adalah situstop.com.
© 2011 Freddy Iriawan– All Rights Reserved
Panduan Sakti Bisnis Online http://www.BisnisSakti.com
Pada halaman muka (http://situstop.com/index.htm) terdapat link melalui kata-kata
Silakan Lihat Di Sini ke halaman produk.htm. Setelah di blok kata-kata Silakan Lihat Di
Sini dan klik kanan, pilih Hyperlink, Anda menekan Browsed Pages dan kemudian
mengisi Address nya http://situstop.com/produk.htm .
Keterangan :
Bila memakai Link Internal untuk CONTOH di atas, caranya adalah memilih Existing File /
Web Page dan "Current Folder", kemudian pilih file langsung dari list/daftar yang
muncul di jendela tersebut) URL biasanya bisa disingkat nama domainnya saja (tanpa
www).
c. Untuk Link ke Email
Setelah klik "Hyperlink" pilih "E-mail Address" kemudian akan tampil window dimana
Anda dapat mengisi email address Anda.
Sehingga bila seorang mengklik kata yang sudah diberi Link ke email address, program
akan langsung membuka "Microsoft Outlook" atau "Outlook Express" (tergantung
setting dari komputer pengunjung tersebut) dimana pada kolom tujuan (To:) sudah terisi
alamat email address Anda.
Begitu juga "Subject" bisa Anda isikan agar seragam. Hal ini berguna terutama bila Anda
membuat banyak Link ke alamat email Anda dengan maksud yang berbeda-beda. Dengan
subject yang sudah Anda tentukan, hal ini tidak membingungkan lagi dibanding Anda
menerima email dengan tanpa subject atau dengan subject yang tidak Anda mengerti.
(Karena pada umumnya bila seseorang hendak berlangganan newsletter / join mailing
list/milis, mereka membiarkan bagian "body" (isi surat) kosong.
© 2011 Freddy Iriawan– All Rights Reserved
Panduan Sakti Bisnis Online http://www.BisnisSakti.com
Dengan demikian Anda harus dapat menerka maksud pengirim hanya dari subject.
d. Untuk Link ke File Download (Bukan Halaman Web)
Untuk file yang berukuran besar dan tak bisa dibuka dengan browser (file exe, video,
ebook, dsb) maka Anda harus meminta pengunjung untuk mendownload dan save pada
komputer mereka.
Dengan demikian mereka bisa melihatnya secara offline nantinya. Sebab itu sebaiknya
beri keterangan untuk pengunjung/member yang ingin mendownload: Klik kanan pada
Link yang dimaksud dan pilih "Save Target As".
Dengan demikian File yang dimaksud akan disimpan ke komputer dan tidak langsung
dibuka di web browser.
Cara membuat Link sama dengan membuat Link internal. Anda harus
memasukkan dulu file tersebut pada direktori Web Anda.
© 2011 Freddy Iriawan– All Rights Reserved
Panduan Sakti Bisnis Online http://www.BisnisSakti.com
Gambar (21) File sukses.exe di copy–paste ke Folder List pada Frontpage
Contoh direktori Web Anda adalah C:\Websaya dan Anda ingin memberi
link pada kata-kata Download Di Sini ke file sukses.exe yang mana masih terletak pada
direktori lain (misalnya di C:\Documents and Settings \namakomputer\My Documents).
Copy file sukses.exe tersebut dan paste ke dalam direktori C:\Websaya (bisa paste pada
Folder List yang muncul di Frontpage ataupun dengan Windows Explorer).
© 2011 Freddy Iriawan– All Rights Reserved
Panduan Sakti Bisnis Online http://www.BisnisSakti.com
Gambar (22) File sukses.exe di copy– paste langsung ke direktori C:\Websaya melalui
Windows Explorer.
Setelah itu buat Link Internal, dengan blok kata-kata Download Di Sini, klik kanan dan
pilih Hyperlink.
Arahkan ke File sukses.exe (lihat gambar 23 di bawah).
Gambar (23) Membuat Link antara kata Download Di sini dengan file sukses.exe agar
file dapat didownload.
© 2011 Freddy Iriawan– All Rights Reserved
Panduan Sakti Bisnis Online http://www.BisnisSakti.com
** Anda juga bisa memberi Link pada Gambar/Image. Caranya sama dengan di atas,
seperti memberi Link pada kata/kumpulan kata. Gambar/ Image bisa di link ke halaman
web, file ataupun Email address.
**Untuk mengedit atau pun menghapus Link, klik kanan pada kata-kata
ataupun image yang diberi link tersebut dan Anda bisa memilih "Edit", "Select", "Open",
"Copy" ataupun "Remove" Hyperlink.
e. Untuk Link ke Bagian lain dari Halaman Yang Sama
Biasanya ini disebut "BookMark"; yaitu Link yang bila di klik akan menuju bagian lain
(misalnya bagian bawah) tapi masih pada file/halaman yang sama.
Khususnya ini berguna bila Anda membuat daftar FAQ (Tanya Jawab), dimana daftar
pertanyaan dikumpulkan menjadi satu di bagian atas, sedangkan semua jawabannya di
bagian bawah; semua pada satu halaman yang sama.
Contoh : Daftar Isi pada halaman 3 dari eBook ini dibuat dengan menggunakan
bookmark. Ingat bahwa file pdf ini dibuat dari file doc (Word) bukan webpage,
sehingga satu nama file terdiri dari banyak halaman. Pada webpage, tiap
halaman mempunyai nama sendiri-sendiri.
Jadi anggap saja semua halaman dalam ebook “Panduan Sakti Bisnis Online” adalah
satu halaman yang panjang. Ketika Anda klik pada Daftar Isi, misalnya butir Cara
Optimasi Image maka kursor Anda dan halaman pada monitor akan mengarah ke
bagian isi pembahasan mengenai “Cara Optimasi Image” di halaman tersebut.
© 2011 Freddy Iriawan– All Rights Reserved
Panduan Sakti Bisnis Online http://www.BisnisSakti.com
Untuk ini Anda harus membuat "BookMark" terlebih dahulu pada frasa:
Cara Optimasi Image. Anda bisa blok seluruh judul ataupun sebagian, kemudian pada
Toolbar klik “Insert” pilih “Bookmark” (lihat gambar 24 di bawah).
Gambar 24 di atas ini memperlihatkan cara memberi Book Mark dengan
memakai Microsoft Word. Pada Mirosoft Frontpage caranya sama.
Lihat, teks yang akan diberi Bookmark di blok hitam lebih dahulu (yaitu OPTIMASI
IMAGE), baru kemudian klik “Insert à Bookmark”.
© 2011 Freddy Iriawan– All Rights Reserved
Panduan Sakti Bisnis Online http://www.BisnisSakti.com
Segera muncul window kecil seperti di bawah :
Gambar (25) Memberi tAnda untuk Bookmark.
Pada Bookmark name” isikan nama yang Anda kehendaki (dapat diganti bila Bookmark
name sudah terisi nama lain).
Nama apa saja yang penting Anda dapat mengenali Link yang dimaksud (bisa nama yang
sama misalnya Optimasi Image, atau Optimasi saja , atau lebih ringkas “Optim”, atau
apa saja). Kemudian klik “Add”, maka nama yang Anda ketikkan akan masuk ke kolom di
bawahnya.
© 2011 Freddy Iriawan– All Rights Reserved
Panduan Sakti Bisnis Online http://www.BisnisSakti.com
Kemudian kembali ke daftar Isi dimana terdapat : Cara Optimasi Image Blok kata-kata
tersebut dan beri hyperlink dengan cara seperti yang sudah-sudah di atas (klik kanan à
hyperlink). Dan pada jendela yang muncul pilih "Place in the Document" (lihat gambar
26 di bawah).
Gambar (26) Memberi Link pada kata-kata yang sudah ditAndai sebagai
Bookmark.
Lihat bahwa di bawah tulisan “Bookmarks” pada kotak putih di atas telah terdapat
beberapa kata yang dijadikan Bookmark name.
Pilih dan klik nama yang telah Anda buat sebelum-nya untuk bookmark name (misalnya
Optimasi, yang merupakan Bookmark name dari frasa: Cara Optimasi Image) Lalu klik
OK.
Selanjutnya cobalah Link yang telah dibuat dengan klik
© 2011 Freddy Iriawan– All Rights Reserved
Panduan Sakti Bisnis Online http://www.BisnisSakti.com
Cara Optimasi Image pada Daftar Isi, lihat apakah akan mengarah ke bab Cara
Optimasi Image.
** Untuk mencoba atau mengetes Link, sebaiknya dalam tampilan Preview
atau Preview in Browser agar muncul gambar ‘tangan’. Atau kalau Anda sedang bekerja
dalam Page View Normal, Anda harus tekan tuts Control pada keyboard sambil klik link
tersebut (gambar tangan akan muncul). Hal yang sama berlaku bila bekerja pada MS
Word.
**Hyperlink yang Anda buat dapat diubah warnanya (secara default adalah biru dengan
underlined). Dengan MS Frontpage hyperlink bisa diberi Rollover efek (efek-efek tertentu
bila mouse di arahkan / di taruh di atas kata-kata yang diberi Hyperlink). Hal ini akan
dibahas pada butir dibawah “ Mengatur Background”.
D. Mengatur Background
Untuk memberi background (warna atau gambar) pada halaman web, pilih “Format”
pada Menu bar dan kemudian pilih “Background”; atau klik kanan di bagian mana saja
pada halaman tersebut dan pilih “Page Properties”.
Kemudian pilih tab “Background”. Bila ingin background berupa gambar/picture, pada
jendela yang muncul, di bagian :
Formatting, centang “Background picture” kemudian “Browse” cari dan pilih gambar
yang dimaksud.
© 2011 Freddy Iriawan– All Rights Reserved
Panduan Sakti Bisnis Online http://www.BisnisSakti.com
Gambar (26) jendela Page Properties untuk mengatur Background.
Pilihan Watermark juga akan aktif jika Anda menggunakan Background Picture, yang
bila Anda centang akan membuat gambar Anda tetap di tempat meski Anda scroll
monitor atau mouse Anda.
Cobalah copy / insert artikel yang cukup panjang pada halaman tersebut. Kemudian
“Preview” maka yang akan bergeser adalah tulisan dari artikel, sedangkan gambar
background tetap diam.
Bila ingin memberi warna pada background, ubah pada bagian : Colors – Background –
ubah “Automatic” dengan warna yang diinginkan.
Disebelah dari Colors ada pilihan untuk warna Hyperlink. Secara default warna hyperlink
adalah biru. Untuk hyperlink yang Visited (sudah pernah diklik/dikunjungi) akan
berwarna : ungu.
© 2011 Freddy Iriawan– All Rights Reserved
Panduan Sakti Bisnis Online http://www.BisnisSakti.com
Sedangkan hyperlink yang Active (ditempel oleh kursor sebelum di klik) akan berwarna
merah.
Tapi yang terakhir ini baru akan bereaksi bila Anda centang “Enable hyperlink rollover
effects” di bagian “Formatting”.
Silakan coba dan lihat hasilnya pada Preview atau “Preview in Browser” (save lebih dulu).
Tip :
** Sesudah Anda centang “Enable hyperlink rollover effects” maka tombol “Rollover
style” akan aktif. Yang bila di klik akan muncul jendela lagi, dimana terdapat “Effects”
dimana Anda dapat memilih opsi-opsi lain untuk efek rollover. Silakan Anda mencobanya
dan melihat hasilnya pada Preview di bawahnya.
** Bila Anda mengubah warna backgroud, perhatikan agar jangan sama dengan warna
hyperlink, karena membuat hyperlink menjadi tidak jelas. Atau bila terpaksa, Anda harus
mengubah lagi warna-warna pada hyperlink, visited dan active.
Untuk halaman-halaman berikutnya bila Anda memakai background yang sama, agar
memudahkan (tidak usah mengatur warna hyperlink lagi bila berubah), centang saja “Get
background information from another page” dan pilih halaman yang akan dijadikan
patokan.
Memakai “Theme”
Untuk web bisnis sebaiknya Anda menghindari theme karena dalam bisnis yang
diutamakan adalah kecepatan membuka halaman, informasi yang jelas dan mengarah,
serta mendorong terjadinya pembelian.
© 2011 Freddy Iriawan– All Rights Reserved
Panduan Sakti Bisnis Online http://www.BisnisSakti.com
Background yang terdapat dalam Theme umumnya berukuran besar. Namun demikian
bila Anda ingin mencoba, sekilas kami sajikan di sini. Silakan klik pada menu bar : Format
à Theme.
Theme akan mengatur bukan saja background, tapi juga jenis Font dan warnanya,
warna hyperlink, banner image, dsb.
Bila memakai Theme, maka Anda tidak bisa mengatur background secara manual lagi
seperti yang dibahas sebelumnya (Pada Page Properties, tidak ada lagi tab
Background).
Gambar (27) memakai dan memilih Theme untuk halaman.
© 2011 Freddy Iriawan– All Rights Reserved
Panduan Sakti Bisnis Online http://www.BisnisSakti.com
Ada serangkaian theme sudah terinstall, Anda bisa klik pada bagian kiri dan melihat
contohnya di sebelah kanan. Pilih yang Anda inginkan, dan Anda bisa memilih apakah
Theme akan dipakai pada halaman tertentu saja atau semua halaman web.
Bila hanya akan dipakai pada halaman yang sedang Anda buka, centang pada Selected
(pages) di sebelah kiri atas. Klik OK.
E. MENYERTAKAN IMAGE
Caranya sama dengan Microsoft Word. Pada toolbar : Insertà Pictureà From File. Cari
dan pilih dimana gambar berada. Atau Anda dapat langsung “copy dan paste” gambar
tersebut dari folder di tempat lain ke halaman web yang sedang dibuka pada Frontpage.
Ketika nanti halaman web di “save” maka secara default gambar tersebut akan tersimpan
di folder “image/” yang terbentuk otomatis oleh Frontpage (lihat bahasan di butir IIIA
dimana pada direktori C:\Websaya terbentuk Folder : _private dan image). Folder dan
isinya dapat dilihat pada Folder List .
Bila Anda hendak menyimpannya di folder lain, Anda bisa klik “Change Folder”.
Misalkan Anda membut folder baru dengan nama: picture untuk menyimpan
gambargambar tertentu, maka pada kolom folder dari jendela yang muncul akan tertera
tulisan: picture/ yang berarti gambar di simpan dalam folder picture tersebut.
© 2011 Freddy Iriawan– All Rights Reserved
Panduan Sakti Bisnis Online http://www.BisnisSakti.com
Panduan
Sakti Bisnis
Gambar (28) pada kolom Folder tidak terdapat tulisan yang berarti
gambar disimpan pada folder default yaitu image/
**Pada versi Frontpage yang lebih rendah dari Office XP (misalnya Office 2000). Image
harus lebih dulu di copy dan paste ke Folder image tersebut (yang terdapat di Frontpage),
karena perintah “Insertà Pictureà From File” hanya dapat mengarah ke Folder image
tersebut (tidak bisa browse ke direktori lain).
Bila gambar yang sudah di-insert kemudian diklik akan muncul Tool bar dimana Anda bisa
mengatur lagi gelap terang gambar, kontras, memberi bevel, dsb; Bila Toolbar yang
dimaksud tak muncul : klik pada Menu Bar : View à Toolbarsà centang Pictures.
Gambar (29) Tool Bar Pictures
1 : Untuk menambahkan teks pada image (image akan diubah menjadi format gif)
© 2011 Freddy Iriawan– All Rights Reserved
Panduan Sakti Bisnis Online http://www.BisnisSakti.com
2 : Membuat thumbnail (gambar kecil) yang langsung mempunyai link dengan gambar
dalam ukuran sesungguhnya. Bila Anda mempunyai sejumlah gambar di satu halaman,
Anda bisa menampilkanberupa thumbnails sehingga pengunjung dapat melihat secara
garis besar semua gambar yang ada. Dan bila ingin melihat detail, klik gambar yang
dimaksud.
3 : Mengatur posisi bila gambar bertindihan
4 : Memutar atau membalikkan gambar
5 : Mengatur “Contras” dan “Brightness” (Terang – gelap).
6 : Memotong gambar
7 : Klik perlahan : grayscale (hitam-putih-abu-abu) dan washout (menjadi keputihan,
seperti dicuci)
8 : Diberi bingkai bevel
9 : Resample : menyesuaikan besaran (kb) dari gambar yang sudah diubah. Bila gambar
yang diinsert tidak sesuai ukurannya Anda tinggal drag sisi-sisinya untuk memperbesar
dan memperkecil.
Namun meski ukuran file diperkecil, size (berapa kilobytes) gambar tersebut akan tetap.
Agar supaya size kb juga diperkecil, maka klik resample.
© 2011 Freddy Iriawan– All Rights Reserved
Panduan Sakti Bisnis Online http://www.BisnisSakti.com
Tool selanjutnya (disebelah 9) adalah untuk Image Maps (membuat link dari bagian
sebuah gambar) yang umumnya jarang dipakai.
**Bila Anda hendak membuat tulisan di atas image, dapat Anda lakukan dengan cara
membuat Tabel lebih dahulu (pilih Borders Size = 0, agar tidak terlihat). Masukkan image
sebagai background dari tabel. Maka Anda dapat memberi tulisan di dalam tabel tersebut,
dimana gambar tadi adalah backgroundnya.
F. MENYERTAKAN BANNER
Banner (panji) dapat berupa gambar ataupun tulisan yang besar, yang menjadi pengenal
web Anda; bisa berisi nama domain, Logo, Slogan web Anda.
Agar tiap halaman mempunyai Banner yang sama, tanpa Anda harus meng-insertnya pada
setiap halaman; buka saja index.htm dan klik Format à Shared Borders ..
Pada window kecil yang tampil, pilih All pages, kemudian centang letak banner tersebut
(apakah Top, Left, Right, Bottom). Setelah klik OK, maka pada semua halaman web Anda,
akan terdapat tulisan :
Comment : This border appears in all pages of your Web. Replace this banner with your
own content.
Tulisan di atas adalah komentar/keterangan, silakan di edit atau hapus saja.
Komentar atau keterangan ini hanya terlihat bila Anda membuka halaman web tersebut
dengan Frontpage.
© 2011 Freddy Iriawan– All Rights Reserved
Panduan Sakti Bisnis Online http://www.BisnisSakti.com
Kalau Anda buka langsung dari Windows Explorer ataupun lewat browser (on line) maka
komentar tidak akan tampak. Silakan coba di Preview.
Untuk mengganti Comment : klik kanan pada tulisan tersebut dan pilih “Comment
Properties”.
Untuk memasukkan gambar banner, klik (kiri) sekali pada tulisan tersebut dan tarik ke
luar dari tempatnya (tarik ke mana saja). Pada kotak yang kini kosong, klik kanan dan pilih
Border Properties.
Pada window kecil yang muncul Anda bisa mencentang picture dan pilih gambar banner
Anda (gambar tersebut harus dimasukkan lebih dulu ke direktori tempat Anda
menyimpan web Anda, karena Browse hanya bisa ke direktori tersebut).
Bila banner Anda hanya muncul sebagian (sebagian lagi tertutup), aturlah dengan cara
klik kanan dan pilih Paragraf.
Kemudian Anda perbesar angka Before dan After pada pengaturan Spacing (lihat
gambar).
© 2011 Freddy Iriawan– All Rights Reserved
Panduan Sakti Bisnis Online http://www.BisnisSakti.com
Gambar (30) Mengatur Paragraf
Banner Anda harus cukup panjang. Bila sulit mendapatkan image yang demikian, gunakan
banner tulisan Anda bisa memberi latar belakang warna (pada Border Properties pilih
Color).
Keterangan :
**Paragraph juga dipakai untuk mengatur “Indentation” pada suatu halaman ataupun
tabel /cell. “Before text” adalah jarak huruf paling kiri ke tepi halaman/ tabel,
sedangkan“After Text” adalah jarak huruf paling kanan ke tepi halaman/tabel.
© 2011 Freddy Iriawan– All Rights Reserved
Panduan Sakti Bisnis Online http://www.BisnisSakti.com
G. MENAMBAH WEB TOOLS dan FORMS
Anda dapat melengkapi Website dengan fasilitas Buku tamu, Tell a friend, Hit counter,
Forum/message board, dsb.
Untuk fasilitas Buku Tamu (Guest book) dan Hit counter sudah tersedia pula di Frontpage.
Sedangkan fasilitas lainnya ada banyak disediakan secara gratis di internet, salah satunya
yang cukup lengkap menyediakan Web Tools adalah www.bravenet.com.
Untuk memasang Web Tools dari Bravenet.com (dan situs lain pada umumnya) Anda
harus mendapatkannya kode html dari Web Tool yang ingin Anda pasang.
Pada situs Bravenet.com Anda perlu mendaftar dulu sebagai member secara gratis (pilih
user id dan password). Para penyedia free web hosting lain, pada umumnya telah
menyediakan pula tools Hit Counter dan Buku Tamu.
© 2011 Freddy Iriawan– All Rights Reserved
Panduan Sakti Bisnis Online http://www.BisnisSakti.com
Gambar (31) http://www.bravenet.com
Untuk daftar menjadi Member : klik tombol “Join Now – It’s FREE” (panah merah).
Berikutnya Anda diminta mengisi form (isi yang bertanda * bintang saja), dan akan ada
surat dikirim ke email Anda.
Buka surat tersebut dan klik link yang diberikan untuk konfirmasi. Selesai…
Anda sudah menjadi Member dan bisa memakai semua fasilitas yang disediakan.
© 2011 Freddy Iriawan– All Rights Reserved
Panduan Sakti Bisnis Online http://www.BisnisSakti.com
1. Memasukkan Kode HTML
Untuk Login berikutnya silakan isi user id dan password Anda (lihat panah oranye),
pilih webtools (panah biru) dan klik webtools yang Anda inginkan, misalnya “Tell-A-
Friend” (lingkaran hijau).
(Tampilan website Bravenet saat ini dapat berbeda dengan gambar 31 di atas). Tool “Tell-
A-Friend” berguna jika seorang pengunjung hendak memberitahu temannya tentang
suatu website yang bagus, ia dapat memasukkan nama dan emailnya sendiri (sebagai
orang yang mengundang) dan emailnya kawannya.
Dimana Bravenet nanti akan mengirimkan email pada kawan tersebut tentang website
yang direkomendasikan, agar kawan tersebut mengunjungi pula.
Anda akan mendapat kode html untuk memasukkan webtool “Tell-A-Friend” ini (yang
juga akan terkirim ke email Anda).
Gambar (32) kode html webtool dari Bravenet
© 2011 Freddy Iriawan– All Rights Reserved
Panduan Sakti Bisnis Online http://www.BisnisSakti.com
Copy kode html yang terdapat pada box ini ke Notepad, apa adanya tanpa ditambah
ataupun dikurangi. Setelah itu Save dan beri nama apa
saja, misalnya “tell”. File yang terbentuk adalah tell.txt.
(Notepad dapat Anda buka dari Start à All Programs à Accessories à
Notepad.)
Gambar (33) mengcopy-paste kode html ke program Notepad.
Kemudian buka Frontpage dan buka halaman yang hendak kita masukkan tool “Tell-A-
Friend” tersebut.
© 2011 Freddy Iriawan– All Rights Reserved
Panduan Sakti Bisnis Online http://www.BisnisSakti.com
Letakkan kursor pada tempat yang kita inginkan dimana tool “Tell-A-Friend” muncul
(panah biru). Kemudian klik “Insert à File”. Muncul window dimana kita dapat mencari
file tempat kita menyimpan kode html tadi (misalnya tell.txt)
Gambar (34) insert web tool dalam halaman Frontpage
Agar file terlihat pastikan Files of Type terisi dengan Text Files (*.txt) atau All Files
(*.*). Bila Files of Type masih terisi dengan HTML Files (*.htm, *.html), maka file.txt
Anda tidak akan terlihat (lihat panah merah)
© 2011 Freddy Iriawan– All Rights Reserved
Panduan Sakti Bisnis Online http://www.BisnisSakti.com
Setelah file ditemukan, dobel klik tell.txt tersebut. (atau klik sekali, dan pada window
klik “Open”).
Gambar (35) Menginsert Text File (.txt) yang berisi kode HTML.
Pada window yang muncul ini, pilih HTML dan OK. Maka tools tersebut akan ter-insert
pada halaman web [kadangkala image baru dapat terlihat dalam keadaan online/ setelah
di upload]
Akan tampak seperti ini tool “Tell-A-Friend” yang sudah di insert ke halaman Frontpage
(gambar 36 dengan lingkaran oval merah).
© 2011 Freddy Iriawan– All Rights Reserved
Panduan Sakti Bisnis Online http://www.BisnisSakti.com
© 2011 Freddy Iriawan– All Rights Reserved
Panduan Sakti Bisnis Online http://www.BisnisSakti.com
Gambar (37)
Form yang muncul bila “Tell-A-Friend” (paling kiri) di klik, setelah tentunya halaman web
yang memuatnya di upload lebih dulu.
Silakan insert Tool / kode html lainnya dengan cara seperti ini. Untuk insert Hit Counter
dan Guest Book, Anda bisa langsung gunakan tool di Ms Frontpage.
2. Hit Counter
Terdapat pada Menu Bar : Insert à Web Component à Hit Counter. Dan pilih tampilan
angka yang Anda inginkan à Finish.
© 2011 Freddy Iriawan– All Rights Reserved
Panduan Sakti Bisnis Online http://www.BisnisSakti.com
Gambar (38) Insert Hit Counter
Gambar (39) Setting Hit Counter
© 2011 Freddy Iriawan– All Rights Reserved
Panduan Sakti Bisnis Online http://www.BisnisSakti.com
Pada window selanjutnya Anda masih dapat mengubah pilihan tampilan Hit Counter.
Klik (beri titik) pada pilihan Anda dan juga beri centang pada “Fixed number of digits”.
Isikan berapa banyak digit/angka yang tampil (5 digit berarti maksimum tampilan adalah
99999).
Anda juga dapat mereset counter (mulai dari angka berapa) dengan centang “Reset
counter to”.
3. Guest Book / Form
Yang dimaksud dengan Buku Tamu (Guest Book) adalah satu halaman web yang berisi
Formulir isian untuk mengumpulkan kesan dan pesan dari para tamu (pengunjung), juga
bisa ditambah dengan beberapa pertanyaan lain.
Hasil isian pengunjung akan ditampilkan di halaman lain, bisa di setting untuk umum
ataupun pribadi saja.
Anda juga bisa menyediakan halaman ucapan terima kasih setelah pengunjung
mengirimkan formulir yang telah diisi.
© 2011 Freddy Iriawan– All Rights Reserved
Panduan Sakti Bisnis Online http://www.BisnisSakti.com
Contoh form pada halaman Guest Book :
Cara membuat form di atas sangat mudah, yaitu dengan klik “Insert à Form à Pilih
yang sesuai.
© 2011 Freddy Iriawan– All Rights Reserved
Panduan Sakti Bisnis Online http://www.BisnisSakti.com
Gambar (41) Insert Form
Anda dapat mencoba semua pilihan yang ada untuk mengetahui bentuk bentuk form
yang Anda inginkan. Jangan takut mencoba karena semua
dapat dihapus (delete) dan tidak berpengaruh apa-apa.
Berikut adalah keterangan dari beberapa bentuk Form.
Text Box :
Submit Reset biasanya untuk mengisi nama atau alamat email.
© 2011 Freddy Iriawan– All Rights Reserved
Panduan Sakti Bisnis Online http://www.BisnisSakti.com
Text Area :
Submit Reset untuk isian yang agak banyak.
Misalnya : kesan dan pesan, pertanyaan dan saran untuk Pengelola di halaman “Kontak
Kami”.
Check Box :
Submit Reset untuk memilih dengan centang
Option Button :
Submit Reset untuk memilih dengan memberi “titik”. Kadang disebut juga “Radio
Button”.
Memperkecil/memperbesar Text Box atau Text Area hanya dengan klik (kiri) sekali pada
Box/Area tersebut (bukan pada tombol Sumbit /Reset) dan tariklah sampai ukurannya
sesuai dengan keinginan Anda.
Tombol (button) “Submit” dan “Reset” :
- bila ingin ganti tulisannya (misalnya “Submit” diganti dengan “Kirim”). Klik kanan
tombol yang dimaksud dan pilih “Form Field Properties” atau dobel klik tombol
tersebut. Pada window berikutnya Anda dapat mengganti tulisan “Submit” pada
Value/Tabel (Button Type jangan diganti).
- besar kecilnya button (tombol) dapat Anda atur dengan klik dan drag (tarik)/
- pindahkan tempatnya (geser dengan space bar atau “Enter” untuk pindahkan ke
bawah)
© 2011 Freddy Iriawan– All Rights Reserved
Panduan Sakti Bisnis Online http://www.BisnisSakti.com
4. Latihan Membuat Form
Membuat Form Pemesanan seperti di bawah ini (gbr 42) :
Langkah-langkahnya :
1. Anda harus ingat, bahwa dalam form bisa terdapat beberapa kolom isian dan pilihan.
Tetapi agar Pemesan cukup 1 (satu) kali saja mengirim form (Submit) maka tombol
“Submit” dan “Reset” cukup hanya satu saja.
2. Setiap Anda membuat form, apakah berupa “Option Button” atau “Textbox”,
Frontpage akan menampilkan tombol “Submit” dan “Reset” pada setiap form KECUALI
Anda memasukkan form tersebut dalam 1 (satu) kelompok yang ditandai dengan garis
batas abu-abu (titik-titik halus).
3. Langkah pertama : Insertà Form à Option Button. Lalu tekan “Enter” (ketika kursor
masih berkedip-kedip persisi di sebelah kiri tombol Submit) agar kedua tombol pindah ke
bawah.
Tekan “Enter” beberapa kali sampai area garis batas membesar sesuai yang diperlukan.
4. Disebelah Option Button (lingkaran kecil) yang terbentuk ketik : Member.
© 2011 Freddy Iriawan– All Rights Reserved
Panduan Sakti Bisnis Online http://www.BisnisSakti.com
5. Geser kursor dengan space bar ataupun Tab agar menjauh ke kanan, dan buat lagi
dengan cara yang sama untuk “Option Button” dan ketik “Non Member”.
Perhatikan, karena Anda membuat dalam satu area garis batas, maka Frontpage tidak
memunculkan tombol “Submit” dan “Reset” lagi.
6. Selanjutnya dibawah dari kedua option button tersebut. Ketik “Nama :” dan klik
“Insertà Formà Textbox”.
Buat lagi dengan cara yang sama di bawahnya untuk Email.
7. Di bawah “Email” ketik “Pilihan Produk” dan insert form “Drop-Down Box”. Anda
sudah membuat seperti apa yang tampil pada gambar di atas.
8. Untuk mengisi “Drop-Down Box” dari Pilihan Produk”, dobel klik pada “Drop-Down
Box” tersebut dan akan muncul window “Drop-Down Box Properties”. Klik “Add”
maka akan muncul window seperti ini :
Gambar (43) Mengisi Pilihan pada Drop Down Box
© 2011 Freddy Iriawan– All Rights Reserved
Panduan Sakti Bisnis Online http://www.BisnisSakti.com
Pada Choice isi : Paket 1.
Centang Specify Value bila Anda ingin keterangan nilai (Value) berbeda dari apa yang
tertulis pada Drop-Down Box Properties.
Value akan muncul pada halaman web (atau email) yang menyimpan hasil order.
Pada Initial State, pilih Selected bila Anda ingin mengunjung ketika membuka form
Order tersebut langsung melihat pilihan/tulisan “Paket 1”. Klik “OK”.
Setelah klik OK, window “Modify Choice” akan menutup dan kembali ke window
sebelumnya (Drop-Down Box Properties) dimana sudah terisi keterangan “Paket 1”.
Tambahkan lagi beberapa pilihan (misalnya Paket 2 dan Paket 3) dengan cara menekan
tombol “Add” kembali. Sehingga terlihat seperti ini :
© 2011 Freddy Iriawan– All Rights Reserved
Panduan Sakti Bisnis Online http://www.BisnisSakti.com
Gambar (44) Daftar pilihan-pilihan yang ada pada Drop Down Box.
Bila pilihan paket sudah cukup, klik “OK”. Save halaman yang berisi Form Order tersebut.
Bila Anda klik “Preview in Browser” pada Menu Bar atas akan terlihat bahwa Drop-
Down Box sudah berjalan :
Gambar (45)
Sampai di sini pembuatan Form selesai.
Lalu bagaimana kita membaca hasilnya bila ada pengunjung memesan ? Di halaman
berikut disajikan 2 cara untuk membaca hasil (Result), yaitu melalui Halaman Web dan
Melalui Email.
© 2011 Freddy Iriawan– All Rights Reserved
Panduan Sakti Bisnis Online http://www.BisnisSakti.com
5a. Membaca Result Form melalui Halaman Web
Anda dapat membaca Result (input yang ditulis/ dipilih oleh pengunjung yang mengisi
form) melalui halaman web. Caranya :
Buat dulu halaman web untuk menyimpan Result tersebut (seperti membuat halaman
web biasa).
Beri nama yang Anda inginkan (nama harus satu kata atau dihubungkan dengan
underscrore).
Pilih nama yang unik bila halaman penyimpan result ini tidak ingin diketahui orang lain
(misalnya: reslt-05.htm)
Pada form yang sudah dibuat, klik kanan pada tombol Submit dan pilih Form
Properties.
Pada Form Properties pilih Send to, kemudian isikan File name dari halaman Result
yang sudah Anda buat tadi. Atau klik Browse untuk memilihnya.
Masih pada window Form Properties klik Option (kiri bawah window) yang mana
kemudian akan muncul window berikutnya (Saving Result):
© 2011 Freddy Iriawan– All Rights Reserved
Panduan Sakti Bisnis Online http://www.BisnisSakti.com
Gambar (46) Menyimpan Result.
Pada tab File Results Anda akan melihat nama file dari halaman web yang Anda pilih
untuk menyimpan Result tadi. Dibawahnya, pada File Format pilih HTML. Klik “OK”.
**Bila Result bersifat pribadi/rahasia, untuk keamanan Anda dapat mengganti nama file
dari halaman Result tersebut secara berkala.
**Pada Guest Book, bila Anda ingin para pengunjung bisa melihat semua kesanpesan
pengunjung, berilah Link dari halaman Guest Book ke halaman Result.
**!! Halaman yang menyimpan Result hanya ada di web server (dibaca on line) dan tidak
ada di komputer Anda. Bila Anda meng-upload ulang seluruh halaman web seperti dari
© 2011 Freddy Iriawan– All Rights Reserved
Panduan Sakti Bisnis Online http://www.BisnisSakti.com
awal maka Hit Counter akan kembali ke nol dan Halaman Result akan kosong kembali !!
**
5b. Membaca Result Form melalui Email
Pada hosting [Pemilihan hosting akan dibahas pada Bab 4] yang mendukung CGI, Anda
bisa menyimpan result pada email (pemberitahuan lewat email bila ada yang memesan
atau “submit”).
Ini bisa dilakukan dengan: Pada form yang sudah terbentuk, klik kanan pada Tombol
“Submit” dan pilih Form Properties.
Pada Where to store results pilih Send to other. Kemudian klik Option, akan tampil
window Options for Custom Form Handler.
© 2011 Freddy Iriawan– All Rights Reserved
Panduan Sakti Bisnis Online http://www.BisnisSakti.com
Gambar (47) Form Properties untuk memproses Result
Gambar (48)
Pada kolom Action isikan: /cgi/formmail. Method : POST Klik “OK”.
© 2011 Freddy Iriawan– All Rights Reserved
Panduan Sakti Bisnis Online http://www.BisnisSakti.com
Kembali ke Form Properties (gambar 38) klik Advance (disebelah tombol Option),
tampil Advance Form Properties. Klik Add. Muncul window Name/Value Pair. Pada
Name ketik recipient. Pada Value ketik alamat email Anda misalnya
admin@bisnissakti.com. Klik OK. Selesai.
6. Membuat halaman Konfirmasi / Terima kasih (Thank You Page)
Fasilitas untuk memproses Form yang minimal adalah halaman yang berisi Form dan
Halaman Result.
Namun kurang lengkap bila tidak ada halaman Konfirmasi (menyatakan bahwa Form yang
diisi sudah berhasil dikirim) atau Thank You page (terima kasih atas pesanan atau
kesediaan mengisi).
Seperti membuat Result, halaman Konfirmasi ini juga terdiri dari 2 cara :
1. Bila Result dari Form disimpan pada Halaman Web
Buat dulu halaman yang berisi Konfirmasi atau Terima kasih.
Misalnya selain ucapan terima kasih juga berisi berapa lama permohonan akan ditanggapi.
Pada dialog box /window SavingResult (lihat gambar sebelumnya) klik Tab
Confirmation Page. Pada URL confirmation page, klik Browse dan cari halaman yang
telah Anda buat tadi.
© 2011 Freddy Iriawan– All Rights Reserved
Panduan Sakti Bisnis Online http://www.BisnisSakti.com
2. Bila Result dari Form dikirim melalui Email
Pada cara ini berarti Anda sudah memilih Send to other pada Form Properties. Klik
Advance. Pada Advanced Form Properties klik Add.
Kemudian pada window kecil yang muncul ketik : redirect pada Name, dan pada Value
ketikkan URL lokasi dari halaman Konfirmasi / Terima kasih (hendaknya Anda telah
membuat dulu sebelumnya) misalnya : http://situssaya.com/thankyou.html
7. Fasilitas Tambahan Untuk Form
Di bawah ini ada 3 hal lagi yang bisa ditambahkan untuk membuat Form Anda lebih baik
lagi, yaitu Mengisi Value dan Name serta memakai Rules.
a. Mengisi Value dan Name untuk memudahkan membaca Result.
Agar tidak sulit bagi Anda untuk membaca result, isilah Value untuk Option Button dan
Name pada Textbox.
© 2011 Freddy Iriawan– All Rights Reserved
Panduan Sakti Bisnis Online http://www.BisnisSakti.com
Gambar (49) Form Pemesanan
Dobel klik pada lingkaran Option Button satu persatu (Pastikan klik pada lingkarannya
bukan pada tulisannya, lihat panah merah).
Pertama pada Option Button untuk Member. Muncul window Option Button
Properties. Pada Value ketik : Member .
Dengan mengetik Value maka tulisan “Member” atau Non Member” akan muncul pada
halaman Result, ketika pengunjung memilihnya.
Bila Value tidak diganti (sesuai default) maka yang muncul adalah kode, misalnya R1 atau
R2.
Ini mungkin akan sedikit mengganggu Anda ketika membaca Result. Lakukan yang sama
pada Option Button yang kedua, ketik Non Member pada Value.
© 2011 Freddy Iriawan– All Rights Reserved
Panduan Sakti Bisnis Online http://www.BisnisSakti.com
Selanjutnya dobel klik pada kotak /Box dari Nama, akan muncul Text Box Properties,
dimana pada Name ketik Nama. Lakukan yang serupa pada Textbox untuk Email (ketik
Email pada Name).
2. Memakai Rules
Untuk mencegah pengunjung tidak mengisi dengan baik, Anda dapat mengatur rules
sebagai berikut (berlaku pada Textbox ataupun Text Area).
1. Dobel klik Textbox yang ingin diberikan rules. Misalnya textbox dari Nama
(jangan tulisan atau tombol Submit /Resert).
2. Pada Text Area Properties atau Text Box Properties, klik Validate.
3. Kemudian pada Text Box Validation lakukan satu atau lebih cara di bawah ini
© 2011 Freddy Iriawan– All Rights Reserved
Panduan Sakti Bisnis Online http://www.BisnisSakti.com
Gambar (50) Validasi untuk Pengaruran Rules
a. Untuk menyeleksi macam/tipe data yang diijinkan untuk dimasukkan Pada Data
type, pilih salah satu dari drop-down box :
o Pilih No Constraints bila tidak ingin ada aturan yang dibuat (bebas).
o Pilih Text untuk mengatur macam huruf (alfabet) yang diijinkan. Pilihan pada Text
Format akan menjadi aktif, silakan pilih : Letters, Digits, Whitespace (mengijinkan
spasi, tabs), atau Other (karakter lainnya, seperti koma, tAnda hubung, dsb ).
© 2011 Freddy Iriawan– All Rights Reserved
Panduan Sakti Bisnis Online http://www.BisnisSakti.com
Jika pilih Other, ketikkan karakter yang diijinkan tersebut pada kotak di sebelahnya. .
o Pilih Integer untuk memilih format dari sekelompok bilangan. Pilihan ini akan
mengaktifkan Numeric Format (brada di bawah Text Format).
Pilih format yang diijinka apakah memakai koma, titik (period) atau spasi (silakan coba
dan lihat Example-nya). Misalnya 123,456,789 atau
123.456.789 atau 123 456 789
o Pilih Number untuk memilih karakter bagi sekelompok bilangan
(Grouping) dan juga karakter untuk Decimal. Pilihan Anda pada
Grouping dan Decimal tidak bisa sama (1,123.456 atau 1.123,456)
b. Untuk memastikan pengunjung mengisi textbox tersebut :
o Pada Data length, centang Required.
o Bila ada pembatasan minimum karakter yang boleh dimasukkna, ketik
nilainya pada Min length box (misalnya 10 karakter).
o Begitu juga dengan maksimum karakter yang diijinkan, ketik nilainya pada Max length
box.
© 2011 Freddy Iriawan– All Rights Reserved
Panduan Sakti Bisnis Online http://www.BisnisSakti.com
c. Untuk pengaturan nilai yang lebih ketat lagi, lakukan ini :
o Di bawah Data value, centang Field must be.
o Pilih syarat yang diinginkan dari drop-down list ( kurang dari, kurang dari dan sama
dengan, lebih besar dari, lebih besar dan sama dengan, dsb)
o Ketik nilai patokannya pada Value box.
o Anda masih bisa memberi syarat kedua/ tambahan, dengan centang And must be, dan
ketikkan nilainya.
Agar muncul keterangan jika pengunjung tidak mengisi textbox (padahal
persyaratan harus diisi).
Ketik keterangan pada Display Name (masih pada window Text Box Validation,
gambar 41). Anda bisa mengisinya kalau Data Length telah dipilih Required.
Contoh untuk textbox Email, Anda ketikkan Email. Maka bila pengunjung men-submit
tanpa mengisi, akan muncul keterangan "Please enter a value for the Email field."
Untuk menerapkan kondisi yang sama pada Option Button :
1. Dobel klik (lingkaran) option button tersebut
2. Pada Option Button Properties klik Validate.
© 2011 Freddy Iriawan– All Rights Reserved
Panduan Sakti Bisnis Online http://www.BisnisSakti.com
3. Untuk memastikan pengunjung memilih salah satu option button :
Centang Data required. Pada Display name ketikkan keterangan (dalam
bahasa Inggris), misalnya Member/Non Member. Sehingga keterangan yang muncul bila
pengunjung tidak memilih satupun : "Please select one of the Member-Non Member
options."
3. Memakai Template
Anda juga dapat membuat Form dengan menggunakan template yang sudah disediakan
Frontpage.
Pada Menu bar pilih File à New Page/Web. Pilih Page Templates dari menu di sebelah
kanan (pada versi office yang lain agak berbeda sedikit).
Akan terbuka Window dimana terdapat banyak pilihan template untuk halaman (Page
Templates) antara lain : Confirmation Forms, Feedback Forms, Form Page Wizard,
Frequently Asked Questions, Guest Book, dsb.
Coba pilih Form Page Wizard.
Pada window berikutnya (hanya terdapat pilihan : Cancel, Next, Finish) pilih Next.
Berikutnya terdapat box putih yang masih kosong, klik tombol Add di kiri atas nya.
Dari pilihan yang ada, klik account information. Anda dapat mengedit keterangan pada
Edit the prompt for this question: (default terisi dengan : Please provide your account
information) atau dapat pula mengeditnya nanti. Klik “Next”.
© 2011 Freddy Iriawan– All Rights Reserved
Panduan Sakti Bisnis Online http://www.BisnisSakti.com
Berikutnya Anda dapat memilih apakah akan memunculkan User Name, Password
dan dapat mengedit nama variabel. Bila sudah klik “Next”. Box putih yang semula
kosong kini sudah terisi dan bila masih ingin menambahform, klik kembali Add.
Cobalah kali ini memilih product information, lanjutkan dengan cara yang sama dan klik
Next.
Anda bisa menambah form sebanyak yang Anda inginkan dengan Add, daftar dari
form akan tertera semua di box putih. Bila sudah selesai klik Next.
Berikutnya pilih presentasi / tampilan form. Klik Next.
Pada Output Option, Anda bisa memilih cara menyimpan Result (input dari
pengunjung yang mengisi Form tersebut).
Bila memilih save results to a web page, isikan/ ganti nama file sesuai yang Anda
inginkan pada “Enter the base name of the results file:”.
Klik Finish
© 2011 Freddy Iriawan– All Rights Reserved
Panduan Sakti Bisnis Online http://www.BisnisSakti.com
Gambar (51) Contoh Form yang terbentuk dengan memakai Template.
Form yang sudah terbentuk ini dapat Anda edit (langsung tempatkan kursor pada kata
yang hendak diubah) dan sesuaikan kembali baik tampilan form (dapat menghapus
sebagian form) ataupun kata-kata pada tombol Submit dan Reset (cara sudah diterangkan
di atas).
© 2011 Freddy Iriawan– All Rights Reserved
Panduan Sakti Bisnis Online http://www.BisnisSakti.com
Saatnya Peluncuran Website
Agar dapat dilihat oleh semua orang yang mengakses internet, web Anda perlu
dipublikasikan dan di tempatkan pada web server.
Komputer server dimana web Anda disimpan, akan berjalan terus 24 jam sehari sehingga
kapan pun orang mengaksesnya mereka akan bisa melihat website Anda.
Untuk keperluan ini, ada 2 hal utama yang harus Anda miliki :
1. Domain Name Server (DNS)
Domain name atau Nama domain adalah alamat dari website kita.
Alamat tersebut (dikenal sebagai URL) dapat diketikkan pada browser (Internet Explorer,
Netscape Navigator, dsb) yang akan membuka halaman web Anda.
Anda dapat memilih memakai Nama Domain internasional (.com–untuk komersial, .org–
untuk organisasi, .biz–untuk bisnis, .net-untuk penyedia layanan internet, .ac untuk
pendidikan) atau Nama Domain Domestik.
Kode domain untuk Indonesia adalah .id, sehingga menjadi : .co.id; .or.id; net.id; .ac.id,
dsb).
Pilihlah yang benar-benar sesuai karena bila berganti di kemudian hari tentu akan
membingungkan pengunjung.
© 2011 Freddy Iriawan– All Rights Reserved
Panduan Sakti Bisnis Online http://www.BisnisSakti.com
Biaya untuk nama domain dihitung per tahun.
2. Host
Host adalah tempat dimana website kita disimpan. Jika Nama Domain diibaratkan alamat
rumah, maka Host adalah kapling dimana rumah itu berdiri.
Besarnya kapling tentu disesuaikan dengan besarnya rumah /ruangan-ruangan yang kita
butuhkan.
Dengan demikian semakin banyak/ besar file-file web Anda, memerlukan kapasitas
hosting semakin besar pula.
Pada umumnya penyedia layanan web hosting juga melayani pembelian nama domain,
kadang tersedia dalam bentuk paket-paket dengan fasilitas yang berbeda-beda.
Anda bisa membeli secara paket ataupun terpisah, yaitu mendaftar untuk domain saja
atau hosting saja.
Anda juga dapat berpindah hosting bila layanan yang sebelumnya dianggap kurang baik
(biaya hosting dihitung per bulan) dengan tetap menggunakan alamat (nama domain)
yang sama.
Pilihlah penyedia layanan hosting yang baik bagi dari segi komputer yang dijadikan server,
fasilitas contol panel nya, maupun pelayann terhadap customernya.
© 2011 Freddy Iriawan– All Rights Reserved
Panduan Sakti Bisnis Online http://www.BisnisSakti.com
Bagaimana membuat website tanpa mengeluarkan uang dahulu ?
Ebook ini disediakan untuk mereka yang benar-benar berangkat dari 0 (nol).
Sebab itu bila Anda masih dalam tahap belajar, ataupun hanya memerlukan website
pribadi; sebaiknya Anda mendaftar yang gratis dahulu.
Setelah Anda memahami dan berhasil menayangkan website Anda dengan baik, silakan
memakai layanan berbayar.
Ada banyak penyedia layanan gratis webhosting. Untuk memudahkan Anda, kami sudah
menyediakan dua situs yang menampilkan sederetan daftar penyedia hosting gratis :
http://www.absolutely-free-hosting.com/
http://www.free-webhosts.com/webhosting-01.php
Carilah layanan yang sesuai dengan kebutuhan Anda, baik space (besaran ruang) yang
disediakan, scripting-nya (apakah mendukung Frontpage, CGI, dsb), cara upload-nya
(dengan FTP atau browser/web), tempat & besarnya iklan (apakah bisa disesuaikan) dan
fasilitas tambahan (apakah disediakan webmail atau pop mail).
Jika Anda mendaftar pada webhosting gratis, juga akan sekaligus mendapat URL
(umumnya berupa http://IDAnda.namadomaintempatmendaftar.com
atau http://namadomaintempatmendaftar.com/IDAnda).
Sehingga Anda dapat meluncurkan website dengan benar-benar gratis.
© 2011 Freddy Iriawan– All Rights Reserved
Panduan Sakti Bisnis Online http://www.BisnisSakti.com
**Tips :
Perhatikan jangan sampai Anda mendaftar nama domain sendiri (www.domain-
pilihanAnda.com/net/biz/info) bila ingin benar-benar gratis, karena penyedia hosting juga
menawarkan jika Anda ingin memiliki nama domain sendiri (bayar) namun dengan
hosting gratis di tempat mereka.
Bila Anda sudah serius berbisnis, hindari yang gratisan sebab akan menurunkan
kredibilitas Anda. Selain memuat iklan, layanan hosting gratis juga kemungkinan kecil
melayani komplain Anda bila terjadi suatu masalah. Sedangkan yang berbayar pun,
jangan sampai pelayanannya kurang baik (server sering bermasalah, email tidak jalan,
dsb). Sadari bahwa Website adalah “toko” Anda dan email adalah pengganti telepon
Anda.
Untuk file yang dibuat dari Microsoft Word, upload dapat menggunakan software
FTP (Cute FTP, Flash FXP, WS FTP, dsb).
Ini adalah software khusus untuk upload dan menata file-file web. Biasanya software
tersebut dapat di download gratis (versi trial/shareware).
Program dan tutorial (bahasa Inggris) dari WS FTP dapat diperoleh di
http://www.ftpplanet.com/tutorial/ atau situs yang lainnya (dapat Anda search di Google
atau Yahoo).
Bila Anda masih merasa sulit untuk upload menggunakan FTP, banyak webhosting
menyediakan fasilitas upload langsung menggunakan browser/lewat website (a.l.
Yahoo Geocities).
Cara ini sangat praktis namun Anda harus login dulu pada situs dimana Anda mendaftar
dan kadang ada pembatasan maksimum untuk sebuah file.
© 2011 Freddy Iriawan– All Rights Reserved
Panduan Sakti Bisnis Online http://www.BisnisSakti.com
Halaman web yang dibuat dengan Frontpage juga bisa di upload dengan menggunakan
fasilitas browser yang disediakan web hosting.
Tapi akan sayang sekali karena Frontpage sudah menyediakan fasilitas upload yang
dapat langsung dilakukan dari program Frontpage sendiri.
Anda dapat me-manage file-file Anda langsung dari Frontpage, tanpa harus login ke File
Manager. Pada Bab berikutnya Anda akan lebih jelas mengenai hal ini.
Namun satu hal yang perlu diingat bila hendak upload menggunakan program MS
Frontpage, Server dimana kita akan hosting harus mempunyai "Frontpage Extention".
Beberapa contoh penyedia hosting gratis yang mempunyai fasilitas Frontpage Extention :
http://www.100webspace.com/freeplan.html; http://www.netfirms.com/hostingbasic;
http://www.tripod.com; http://www.angelfire.com (tidak semua layanan hosting gratis
menyediakan Frontpage Extention). Dan Anda perlu mengaktifkannya dulu (login ke
Control Panel ataupun Account Anda, dan cari menu untuk Aktifkan Frontpage
Extention).
Mengenai meng-upload web memakai fasilitas webhosting gratis, Anda akan dipandu
langkah-langkahnya dalam Bab berikutnya.
Cara Mengupload Website
Meng”upload” adalah kebalikan dari “download”. Jika “download” adalah proses
mengambil file dari server untuk masuk ke komputer Anda, maka “upload” adalah proses
mengirim file dari komputer Anda ke server agar terpampang di dunia maya. Di bawah ini
© 2011 Freddy Iriawan– All Rights Reserved
Panduan Sakti Bisnis Online http://www.BisnisSakti.com
kami memberikan contoh cara upload dengan menggunakan Web Browser dan
menggunakan Frontpage, pada web hosting yang gratis.
1. Mendaftar di Geocities
Geocities (http://geocities.yahoo.com)
Fasilitas gratis mendapat:
- Disk space : 15 MB
- Web Address : www.geocities.com/your-Yahoo!-ID
- Data Transfer bandwith : 3 GB/month (mis. pengunjung download file)
- Tidak mempunyai Frontpage extention
- Menyertakan iklan
Geocities mempunyai pelayanan yang cukup baik, termasuk bagian dari Yahoo! yang
sudah dikenal bobotnya di dunia international.
Keuntungannya website Anda dapat dimasukkan dalam direktori Member Pages mereka.
Iklannya pun hanya kecil dibanding layanan hosting gratis lainnya. Dapat menambahkan
Guest Book, Hit Counter, Site statistic, dsb.
Kunjungi http://geocities.yahoo.com
Karena kita inginkan yang gratis, pilih GeoCities FREE Web Hosting (sebelah kiri). Klik Sign
Up
© 2011 Freddy Iriawan– All Rights Reserved
Panduan Sakti Bisnis Online http://www.BisnisSakti.com
Gambar (52) Mendaftar di Geocities
Jika Anda seorang pengguna email Yahoo, tentunya sudah mempunyai Yahoo User ID.
Anda bisa gunakan User ID tersebut dan langsung Sign In di sebelah kanan.
Namun bila Anda menganggap itu kurang cocok (karena UserID akan menjadi bagian dari
alamat website Anda), maka Anda dapat mendaftar kembali.
Halaman selanjutnya setelah klik Sign Up adalah seperti berikut :
© 2011 Freddy Iriawan– All Rights Reserved
Panduan Sakti Bisnis Online http://www.BisnisSakti.com
Gambar (53) Sign In ke Geocities
Bila di halaman sebelumnya Anda tadi sudah Sign In, akan muncul halaman berikut
seperti di bawah ini (gambar 54).
Tapi bila belum silakan Sign In saat ini.
Jika belum mempunyai User ID, Anda harus mendaftar dulu dengan klik tulisan biru “Sign
Up” di kanan bawah. Selanjutnya Anda akan dibawa ke halaman pendaftaran. Mengenai
pembahasan tentang pendaftaran user ID, silakan Anda lihat dalam LAMPIRAN.
Misalkan UserID Anda adalah wirausaha. Setelah Anda Sign In pada halaman
selanjutnya bagian paling atas Anda akan lihat “Welcome wirausaha” .
Dan pada jalur biru di bawahnya adalah URL /alamat web site Anda, yaitu
http://geocities.com/wirausaha
© 2011 Freddy Iriawan– All Rights Reserved
Panduan Sakti Bisnis Online http://www.BisnisSakti.com
Gambar (54) Mengisi keterangan Web
Kemudian pada butir 1. Anda harus menentukan jenis/kategori web Anda.
Butir 2 adalah dari mana Anda mengetahui layanan gratis GeoCities ini. Pertanyaan no 2
tidak harus dijawab dengan tepat.
Beda dengan no 1, Anda harus mengisi dengan tepat, agar Yahoo bisa meng-index web
Anda dalam kategori yang tepat pula.
© 2011 Freddy Iriawan– All Rights Reserved
Panduan Sakti Bisnis Online http://www.BisnisSakti.com
Pada butir 3, ketik ulang kode yang tampil di kotak hitam, ke kotak putih (di sebelah
tulisan “Enter the code shown”). Terakhir klik “Submit”. Selesai sudah proses pendaftaran.
Pada halaman berikutnya klik saja “Build your website now”.
2. Mengupload File
Pada halaman selanjutnya, jangan Anda dibingungkan dengan banyaknya fasilitas dan
informasi. Lihat saja di sebelah kanan halaman, dimana terdapat Advanced Toolbox
dengan 4 fasilitas :
Gambar ( 5 5)
1. File Manager, dimana Anda dapat melihat file-file yang sudah di upload, mengedit
maupun menyusunnya.
2. Easy Upload, untuk upload file-file Anda ke web tanpa menggunakan FTP.
3. HTML Editor, untuk melihat dan mengedit kode html pada tiap halaman
4. Site Statistics, Anda dapat melihat berapa kali web Anda dibuka pengunjung.
Untuk upload maka kita pilih “Easy Upload”. Akan tampil halaman berikut :
© 2011 Freddy Iriawan– All Rights Reserved
Panduan Sakti Bisnis Online http://www.BisnisSakti.com
Gambar (56)
Klik tombol Browse, dimana kemudian Anda akan dapat mencari file yang ingin di
upload.
Karena ada 5 (lima) tombol Browse, maka Anda dapat mengupload maksimum 5 file
sekaligus. Setelah itu klik “Upload Files”.
Perhatikan bahwa nama file harus menyambung atau diberi (-) atau (_) diantara 2 kata,
jangan ada spasi.
Total upload yang diperbolehkan (dalam 1 kali klik upload) adalah 5 MB.
Sebab itu kompress-lah file-file yang besar dengan WinZip (bila Wnzip sudah terinstall,
hanya tinggal klik kanan pada file yang diinginkan dan pilih Add to namafile.zip).
© 2011 Freddy Iriawan– All Rights Reserved
Panduan Sakti Bisnis Online http://www.BisnisSakti.com
Bila ada banyak sekali file yang ingin di upload sekaligus, Anda dapat ubah “Number of
Files to Upload” misalnya menjadi 10, dan klik Display. *)
Bila perlu Anda dapat mencentang “Automatically convert filenames to lowercase”,
dimana nama file akan diubah semua ke huruf kecil.
Nama file pada server adalah “case sensitif” (membedakan huruf besar dan kecil).
Jika Anda mengupload nama file yang sama namun yang satu dengan huruf besar, satu
lagi dengan huruf kecil atau gabungannya; misalnya carakerja.htm dan CaraKerja.html
(atau CARAKERJA.htm, dan sebagainya).
Server akan menerimanya sebagai 2 file yang berbeda (menjadi dobel).
Jika ada halaman yang link ke file carakerja.html tapi kemudian Anda mengedit isi file
tsb dan mengubah nama menjadi CaraKerja.html, lalu menguploadnya.
Maka ketika link tersebut di klik pengunjung, akan tetap mengarah ke file yang lama,
yaitu carakerja.html.
Sebab itu jangan lupa mengedit juga hyperlink agar mengarah ke nama file yang baru
(CaraKerja.html) dan delete-lah file yang lama (carakerja.html)
*)Untuk Automatically change “.htm” extentions to “.html” sebaiknya tidak usah
Anda centang; kecuali Anda ingat untuk selalu mencentangnya setiap kali upload.
© 2011 Freddy Iriawan– All Rights Reserved
Panduan Sakti Bisnis Online http://www.BisnisSakti.com
Setelah upload akan muncul pemberitahuan apakah file Anda sukses di upload. Anda pun
dapat melihat file-file yang sudah di upload pada File Manager.
Gambar (57) Uplaod Results
Bila Anda tidak ingin upload lagi, silakan Logut. Dan suatu waktu nanti Anda ingin upload
kembali, silakan buka halaman http://geocities.yahoo.com/ dan Sign In.
Kembali Anda akan menemukan Advanced Toolbox di halaman berikutnya, selanjutnya
tinggal klik Easy Upload kembali.
3. EDIT WEB
Masuklah ke halaman http://geocities.yahoo.com/. Bila Anda sudah Sign In maka di kiri
atas akan muncul sapaan “Welcome, wirausaha” (sesuai UserID yahoo). Klik File
Manager pada Advanced Toolbox.
© 2011 Freddy Iriawan– All Rights Reserved
Panduan Sakti Bisnis Online http://www.BisnisSakti.com
Gambar (58) Masuk File Manager
Klik Open File Manager.
Di sini Anda dapat melihat file-file yang ada pada server.
(Gambar 59)
Bila terdapat 2 halaman muka: index.html (yang baru di upload) dan index.htm (default
dari geocities), hapuslah (delete) yang tidak terpakai.
Anda tinggal centang file-file yang ingin di edit dan klik tombol “Edit”. Demikian juga
caranya bila ingin Copy file, Rename maupun Delete. Untuk New, Anda akan mendapat
halaman yang baru.
Jadi untuk menambah halaman baru, bisa langsung dari File Manager ini ataupun
menggunakan Microsoft Word (membuat web page) yang kemudian di upload.
© 2011 Freddy Iriawan– All Rights Reserved
Panduan Sakti Bisnis Online http://www.BisnisSakti.com
Begitu pula untuk Edit isi halaman web yang sebelumnya sudah dibuat dengan Ms.Word,
Anda bisa edit melalui Microsoft Word (dalam format .doc kemudian di save menjadi
web page) baru kemudian upload.
Bila Anda mengupload nama file yang persis sama, secara otomatis file yang sudah ada di
File Manager ini akan terganti dengan yang baru.
Bila ada halaman web yang tidak keluar gambarnya, berarti Anda belum upload gambar-
gambar yang ada di halaman web tersebut.
Agar bisa muncul lakukan 8 (delapan) langkah sebagai berikut :
1. Pastikan halaman web tersebut di save (dari MS Word) dengan memilih “Save As à
Web Page, Filtered” dan klik “Yes” (Lihat kembali bab I E. Save As Web Page).
2. Akan terbentuk HTML document dan folder files. Agar mudah, sebagai contoh file
bernama produk.doc dimasukkan gambar buku.jpg dan button.gif .
Setelah di save dengan cara di atas (no 1) terbentuk product.htm + produk_files (yang
berisi buku.jpg dan button.gif).
3. Upload product.htm, buku.jpg dan button.gif.
4. Pada File Manager klik New dibawah Subdirectories, agar terbentuk folder baru di
dalam direktoriyan sudah ada.
© 2011 Freddy Iriawan– All Rights Reserved
Panduan Sakti Bisnis Online http://www.BisnisSakti.com
Gambar (60)
Pada halaman berikutnya isi nama folder : produk_files
5. Setelah terbentuk folder produk_files, centang buku.jpg dan button.gif kemudian
klik “Move” (tombol ini baru muncul bila sudah ada Subdirectori).
6. Berikutnya Anda akan diminta memilih folder/subdirektori ke mana kedua file gambar
tersebut akan dipindahkan. Pilih produk_files .
7. Sekarang pada File Manager Anda klik View pada file produk.htm, maka gambar
sudah muncul.
8. Intinya, hyperlink/URL dari file pada komputer Anda harus sama dengan hyperlink
/URL pada file di server.
Untuk melihatnya, pada web page yang ada di komputer Anda, klik kanan pada gambar
dan pilih Properties. Misalkan keluar seperti ini :
file:///C:/Documents%20and%20Settings/order_files/image001.gif.
Maka pada server, file image001.gif juga harus tersimpan di folder order_files.
Silakan lihat halaman-halaman yang sudah Anda upload dengan klik “View” pada File
Manager (gambar 59). Alamat website atau URL Anda adalah :
http://www.geocities.com/Yahoo-ID-Anda
© 2011 Freddy Iriawan– All Rights Reserved
Panduan Sakti Bisnis Online http://www.BisnisSakti.com
4. Membuat Buku Tamu (Guest Book) di Geocities
Dari halaman File Manager, klik Add Ons, pada sebelah kanan halaman agak bawah.
Gambar (61) Menambah fasilitas/tool lain pada web
Pada halaman berikutnya pilih Guest Book.
Gambar (62)
Selanjutnya terdapat keterangan dan feature Guest Book yang disediakan oleh Geocities.
- Guest Book Setup : membuat dan mengatur Guest Book Anda
-Approve Submissions : melihat hasil isian pengunjung sebelum dimuat, Anda bisa
menerima (post) atau menolaknya (delete). Anda harus mengaktifkan pilihan Review
entries before posting (Lihat pada Guest Book Setup butir 8 di bawah).
- Current Posts : Entri (hasil isian) pengunjung yang telah dimuat, dapat Anda lihat
semua dan hapus yang tidak ingin dimuat lagi.
© 2011 Freddy Iriawan– All Rights Reserved
Panduan Sakti Bisnis Online http://www.BisnisSakti.com
- Install Links to Your Guestbook : Link yang dapat di klik pengunjung agar mereka
bisa mengisi Buku Tamu atau melihatnya (bila pilihan di–set untuk publik).
Dibagian bawah (setelah Guest Book Setup) dijelaskan lebih detail mengenai ini.
Pilih Guest Book Setup
Anda akan diminta mengeset (Set up) untuk fasilitas Buku Tamu ini. Umumnya fasilitas
Guest Book terdiri dari 3 halaman :
a. Halaman Guest Book, yang berisi Form untuk diisi Pengunjung
b. Halaman Entry, yang memperlihatkan input (hasil isian) Pengunjung
c. Halaman Konfirmasi/Terima kasih, muncul setelah Pengunjung klik tombol untuk
mengirim /menyerahkan form yang sudah diisi.
Berikut yang bisa Anda Set-up.
1. Guest book name :
beri nama sesuai yang diinginkan
2. Guestbook appearance :
klik warna yang diinginkan untuk Font maupun background.
3. Introduction :
isi dengan kata-kata yang meminta kesediaan pengunjung mengisi dan juga ucapan
terima kasih.
© 2011 Freddy Iriawan– All Rights Reserved
Panduan Sakti Bisnis Online http://www.BisnisSakti.com
4. Questions:
Anda bisa mengganti First name dengan Nama, Comment dengan Komentar, dan isikan
hal lainnya lagi yang Anda ingin dapatkan dari pengunjung.
Pilih Entry style : Text Entry hanya bisa membuat karakter yang terbatas (seperti Text Box
pada pembuatan Form dengan Frontpage); sedangkan Comment Box bisa memuat banyak
kata-kata (gunakan untuk komentar pengunjung).
5. Enter the text the Submit button will display :
Setelah pengunjung mengisi form, mereka harus klik tombol yang Anda bisa beri nama
sesuai keinginan Anda, apakah Kirim, atau Tulis Buku Tamu, dsb (default : Sign my
Guestbook).
6. Customize your View Entries Page :
untuk mengubah tampilan halaman Entry sesuai selera Anda.
Tentukan berapa banyak entry dalam 1 halaman ( 1 entry adalah keseluruhan isi form
yang di-isi pengunjung). Akan ada halaman kedua, ketiga, dsb.
Tentukan pula tampilan garis pemisah, antara satu entri dengan entri berikutnya.
7. Customize Links on the Confirmation Page
Terlebih dahulu Anda sudah membuat halaman Konfirmasi / Terima kasih, dan upload ke
webserver.
© 2011 Freddy Iriawan– All Rights Reserved
Panduan Sakti Bisnis Online http://www.BisnisSakti.com
Lalu isikan URL nya (lokasi/alamat halaman tersebut). Bisa pilih apakah halaman itu akan
ditampilkan langsung (setelah pengunjung klik untuk menyerahkan form, atau hanya
tampil link nya).
8. Options
- Send notification email : Bila ada yang mengisi Buku tamu akan ada pemberitahuan
melalui email Anda di yahoo (yang menggunakan User ID yang sama)
- Review entries before posting : Melihat hasil isian pengunjung sebelum
dimuat, dan dapat menolaknya untuk tidak dimuat.
- Privacy Option : Untuk umum (pilih Public), untuk pribadi/hanya Anda yang dapat
melihat (pilih Private).
Sewaktu-waktu Anda dapat klik Preview untuk melihat hasilnya dan memperbaiki bila
belum sesuai. Bila sudah, klik Finish; dan Anda akan mendapat halaman seperti di bawah
ini :
Gambar (63) Kode HTML untuk Link masuk Guest Book
© 2011 Freddy Iriawan– All Rights Reserved
Panduan Sakti Bisnis Online http://www.BisnisSakti.com
Kode HTML dalam kotak harus di copy dan paste ke halaman dimana Anda inginkan
terdapat Link masuk ke Buku Tamu. Bila Anda memilih Buku Tamu bisa dilihat
pengunjung (pilih Privacy Option pada butir 8 : Public), maka Link yang akan muncul
adalah sbb :
Sign Guestbook View Guestbook
Bila pada Privacy Option Anda memilih Private, Link View Guestbook tidak akan muncul.
Kode HTML yang akan Anda dapat seperti berikut :
Sign Guestbook
Your GB is private
Anda tidak usah copy kata-kata Your GB is private.
Cara Memasukkan Kode HTML ke Halaman Web
Cara Pertama, yaitu mengikuti cara di Geocities.
1. Blok dan Copy kode HTML yang dimaksud; dan masuk Step 2 klik Go To File Manager.
2. Pada File Manager, beri centang pada kotak di depan file atau halaman web yang
Anda ingin masukkan Link Buku Tamu ini (misalnya pada halaman index.htm) kemudian
klik Edit.
3. Setelah itu akan ditampilkan halaman yang aka di edit itu dalam bentuk kode HTML.
Anda tidak usah bingung melihatnya.
Bila ingin menaruh Link Buku Tamu di paling bawah, Paste saja di paling bawah (apakah
sebelum/sesudah atau sebelum/sesudah ).
Maka di paling bawah halaman yang dimaksud akan terdapat : Sign Guestbook View
Guestbook .
© 2011 Freddy Iriawan– All Rights Reserved
Panduan Sakti Bisnis Online http://www.BisnisSakti.com
Klik Preview untuk melihatnya sebelum Save. Yang agak sulit adalah bila Anda ingin
menaruh Link tersebut agak di tengah halaman, misalnya sesudah kalimat atau gambar
tertentu.
Maka Anda harus mencari kalimat atau nama file gambar yang dimaksud tersebut di
antara kode-kode html pada halaman itu, dan kemudian paste di sana.
4. Jika memang menghendaki, Anda bisa menaruh Link Buku Tamu di beberapa halaman.
Lakukan dengan cara yang sama.
Jika Anda tidak suka cara ini, silakan lakukan Cara Kedua sebagai berikut :
1. Anda tidak usah copy & paste kode HTML.
Perhatikan contoh di atas, bahwa Link untuk member masuk ke halaman Buku Tamu
(yang berisi form untuk di isi) adalah
http://geocities.yahoo.com/gb/sign?member=wirausaha.
Sedangkan Link untuk member melihat entry (hasil isian) pengunjung, maka Link nya :
http://geocities.yahoo.com/gb/view?member=wirausaha.
Wirausaha hanyalah User ID contoh, gantilah dengan User ID Anda di Yahoo.
2. Bukalah halaman yang Anda ingin masukkan Link tersebut dengan Microsoft Word.
Misalkan, Anda ingin memasukkannya pada halaman index.htm, maka bukalah file
index.doc .
3. Ketiklah pada tempat yang Anda kehendaki, kata-kata yang akan menjadi Link untuk
masuk ke Buku Tamu dan Link untuk melihat entri.
© 2011 Freddy Iriawan– All Rights Reserved
Panduan Sakti Bisnis Online http://www.BisnisSakti.com
Misalkan Silakan Isi Buku Tamu dan Lihat Buku Tamu. Beri hyperlink pada kata-kata
Silakan Isi Buku Tamu, menuju ke
http://geocities.yahoo.com/gb/sign?member=USER-ID .
Sedangkan pada Lihat Buku Tamu beri hyperlink ke
http://geocities.yahoo.com/gb/view?member=USER-ID
4. Setelah itu save dan upload kembali halaman yang telah Anda ubah / beri Link tadi.
** Meski tidak copy dan paste kode HTML, seluruh setting yang sudah Anda buat di
GuestBook Setup tetap berjalan semestinya.
Coba isi buku Tamu Anda, maka akan ada pemberitahuan via email Anda di Yahoo,
bahwa ada seseorang yang mengisi buku tamu Anda Yahoo (tentunya bila Anda memilih
Send Notification Email pada Options).
Pada email tersebut ada pemberitahuan cara untuk approve (terima) atau reject (tolak)
untuk tampil pada Entri; ataupun bila sudah terlanjur ditampilkan bisa Anda hapus.
5. Memasukkan Hit Counters.
Hit Counter adalah fasilitas/ penghitung yang menampilkan berapa banyak hit (klik) dari
pengunjung yang masuk ke web Anda.
Caranya mirip dengan men-setup Guest Book, bahkan lebih sederhana dan mudah, karena
tidak memerlukan form, konfirmasi, dsb.
© 2011 Freddy Iriawan– All Rights Reserved
Panduan Sakti Bisnis Online http://www.BisnisSakti.com
Kembali Anda masuk halaman File Manager dan klik Adds On di sebelah kanan agak
bawah dan pada halaman berikutnya Anda bisa klik “Add Counter To Your Page”
seperti gambar di bawah ini :
Gambar (64) Pilih Counters
Pilih model / tampilan Counter. Bila sudah selesai Anda akan kembali diberikan kode
HTML.
Masukkan kode HTML tersebut pada halaman yang dikehendaki. Caranya sama dengan
memasukkan Link Guest Book pada Cara Pertama (Cara kedua dengan Mengedit
halaman lewat Word, tidak bisa dilakukan untuk Counter).
B. Contoh Kedua : Menggunakan MS Frontpage
Untuk contoh upload dengan menggunakan Frontpage, kita akan hosting di Netfirms.
Bila Anda sudah menguasai ini, maka untuk web hosting lainnya umumnya hampir sama.
Netfirms (http://www.netfirms.com)
© 2011 Freddy Iriawan– All Rights Reserved
Panduan Sakti Bisnis Online http://www.BisnisSakti.com
Fasilitas gratis yang didapat :
FREE Website Starter CD * (perlu ongkos kirim)
25 MB of Disk Space
1 GB Monthly Data Transfer
1 WebMail Account (with Domain Name)
Optional Free Sub-domain (www.yourname.netfirms.com)
Microsoft FrontPage Exts. & Perl (CGI-Bin)
24/7 FTP Access (24 jam sehari, 7 jam seminggu)
Technical Support via E-mail
Karena gratis maka tentu mereka menyertakan iklan di halaman web Anda. Kunjungi
http://www.netfirms.com/web-hosting-free dan Sign Up untuk Basic Hoting ( Price : $ 0.00
/mo).
© 2011 Freddy Iriawan– All Rights Reserved
Panduan Sakti Bisnis Online http://www.BisnisSakti.com
Gambar (65) Daftar di Netfirms
Pada halaman selanjutnya ada beberapa Opsi (Additional Options) yang bisa dipilih :
Secara default sudah terpilih : New Registration, yaitu dimana Anda memilih dan
membayar untuk nama domain baru pilihan Anda (com /net /org /biz) dan host di Netfirms
(hosting saja yang gratis).
© 2011 Freddy Iriawan– All Rights Reserved
Panduan Sakti Bisnis Online http://www.BisnisSakti.com
Bila Anda memilih ini, tentu Anda harus membayar. Bila ingin sama sekali gratis, maka
ubah pilihan ke Netfirms Subdomain (panah merah).
Anda tidak mendapat nama domain sendiri, tetapi berupa subdomain dari Netfirms.com
(http://myname.netfirms.com).
Bila ID Anda : wirausaha ;maka alamat website Anda menjadi
http://wirausaha.netfirms.com
Isikan Nama atau ID yang Anda pilih pada Enter a Domain Name. Klik SEARCH.
Selanjutnya akan diproses apakah pilihan Anda masih tersedia atau sudah dipakai orang
lain.
Bila sudah mendapat ID (member name), lanjutkan dengan mengisi datadata lainnya.
Dan bila sudah menyelesaikan seluruh pendaftaran, Anda akan mendapat keterangan
yang akan dikirimkan ke email yang Anda pakai untuk mendaftar.
Loginlah ke Contol Panel (Anda bisa klik Link yang diberikan pada email).
Password dikirimkan juga oleh Netfirms ke email Anda.
Bila ingin menggantinya, setelah Login ke Control Panel, pilih Change Password (pada
deretan menu di sebelah kiri).
Agar Anda bisa upload menggunakan Frontpage, aktifkan lebih dahulu Frontpage
ekstenstion. Klik Site Tools (pada Menu Bar atas).
© 2011 Freddy Iriawan– All Rights Reserved
Panduan Sakti Bisnis Online http://www.BisnisSakti.com
Kemudian pada deretan Link/ menu di sebelah kiri halaman, klik Frontpage Extention.
Pada halaman berikutnya Anda kana menemukan tombol : Reset Frontpage, klik saja.
Selanjutnya bukalah program Frontpage dan buka web Anda.
Jika ada halaman yang ingin di edit, silakan edit dahulu dan jangan lupa “save”.
Kemudian untuk upload, harus Anda ingat/ catat User name dan password Anda.
Gambar (66) “Publish” pada Menu bar Frontpage
Klik Publish Web (lihat panah merah). Jika Anda baru pertama kali upload (atau memiliki
beberapa Web yang sudah di upload/publish) akan muncul window seperti di bawah ini
yang minta Anda mengisi atau memastikan alamat/ tujuan publish.
© 2011 Freddy Iriawan– All Rights Reserved
Panduan Sakti Bisnis Online http://www.BisnisSakti.com
Gambar (67) Mengisi alamat untuk publish
Pada “Enter publish destination” masukkan URL yang Anda dapatkan
sebelumnya. Ada contoh ini adalah http://wirausaha.netfirms.com atau
http://www.wirausaha.netfirms.com
(www boleh tidak usah disertakan, malah pada beberapa webhosting misalnya tripod,
tidak memakai www untuk subdomainnya).
Kemudian klik OK.
Kadang pula bila Anda sering upload, window seperti di atas tidak muncul lagi tetapi akan
langsung keluar window seperti berikut :
Gambar (68) User name & Password
Isi User name yang sudah Anda daftarkan (misalnya wirausaha) dan isikan password.
Klik OK.
© 2011 Freddy Iriawan– All Rights Reserved
Panduan Sakti Bisnis Online http://www.BisnisSakti.com
Bila kemudian muncul window seperti ini, klik saja tombol Publish.
Jika Anda sudah pernah upload maka pada kotak sebelah kanan (yang sekarang masih
putih) akan sudah tertera file-file yang sudah ada di server.
Gambar (69) Fila yang ada di komputer dibandingkan dengan yang ada di server.
Setelah itu proses upload akan dimulai :
Gambar (70) Proses Upload
Akan muncul kotak-kotak biru memperlihatkan kemajuan proses upload.
© 2011 Freddy Iriawan– All Rights Reserved
Panduan Sakti Bisnis Online http://www.BisnisSakti.com
Bila web ini sudah pernah di upload sebelumnya, Frontpage akan membandingkan file
yang akan di upload dengan yang di server, bila ada perbedaan akan muncul pertanyaan-
pertanyaan konfirmasi (file has been changed, remove file, dsb).
Anda bisa pilih Yes untuk melihat satu per satu atau Yes to All untuk langsung
mengkonfirmasi semua perubahan.
TIP :
Pada Tools à Options à (Tab) Publish bisa Anda tentukan bagaiamna Frontpage
menentukan perubahan (Changes).
- Untuk publish satu file tertentu saja : pada Folder List (Toogle Pane
diaktifkan), klik kanan file yang dimaksud dan pilih “Publish selected file”
- Bila ada file yang tak ingin di publish/upload namun file masih terdapat di web (tidak di-
delete) : klik kanan file yang dimaksud dan pilih “Don’t Publish”.
Setelah selesai Publish akan muncul window :
Gambar (71) Proses Upload selesai
© 2011 Freddy Iriawan– All Rights Reserved
Panduan Sakti Bisnis Online http://www.BisnisSakti.com
Klik “Done” untuk menutup window; atau “Click here to view your publish website”
untuk langsung melihat website Anda yang barusan di
publish.
Tip :
Jika webhosting yang Anda gunakan tidak memiliki Frontpage extention, Anda masih bisa
upload File-file yang sudah Anda buat dengan Frontpage ini.
Caranya :
login ke Control Panel dari webhosting tersebut.
Alamat login biasanya dikirimkan ke email Anda tidak lama setelah Anda mendaftar (atau
membayar kalau Anda memakai webhosting yang tidak gratis *). Anda juga akan
mendapat user ID dan password, setelah login carilah File Manager.
Umumnya pada File Manager terdapat tool untuk upload mirip seperti yang terdapat di
Geocities.
Hanya sayangnya dengan cara ini, Web-Tools / Web-Component dan Form (juga Theme)
yang Anda buat menggunakan Frontpage tidak dapat berjalan. Jadi hanya bisa
menampilkan halaman-halaman biasa.
*Beberapa webhosting lokal yang dapat digunakan (lebih murah dibanding dengan
penyedia ISP) :
http://www.masterweb.net.com
http://www.techscape.co.id
http://www.rumahweb.com
Dengan demikian pelajaran Anda sudah selesai. Jangan takut mencoba dan terus berlatih
maka pasti Anda akan mahir.
© 2011 Freddy Iriawan– All Rights Reserved
Panduan Sakti Bisnis Online http://www.BisnisSakti.com
J
© 2011 Freddy Iriawan– All Rights Reserved
Panduan Sakti Bisnis Online http://www.BisnisSakti.com
Untuk mendapatkan Panduan GRATIS lainnya, silakan Anda klik link di
bawah ini :
Ebook ini dipersembahkan oleh
-8-tulis nama anda disini-8-
Klik Link di bawah untuk mengunjungi websitenya
http://-8-tulis website affiliasi anda disini-8-
Mau dapat duit hanya dengan membagikan ebook Gratis?
Tutorial/Panduan menghasilkan uang dari ebook Gratis, segera klik
http://bisnissakti.com/signup.php
Untuk Panduan Rebranding bisa klik :
http://bisnissakti.com/Rebrand.pdf
Jangan lupa Gabung di Facebook BisnisSakti:
http://www.facebook.com/pages/Bisnissakticom/216033765090845
Twitter :
http://twitter.com/Bisnissakticom
© 2011 Freddy Iriawan– All Rights Reserved
Panduan Sakti Bisnis Online http://www.BisnisSakti.com