Panduan Membuat Website Bisnissakti.com

download Panduan Membuat Website Bisnissakti.com

of 117

description

Panduan Membuat Website Bisnissakti.com dan Panduan Membuat Website Bisnissakti.com

Transcript of Panduan Membuat Website Bisnissakti.com

2011 Freddy Iriawan All Rights Reserved Panduan Sakti Bisnis Online http://www.BisnisSakti.com

Panduan Lengkap Membuat Website untuk PemulaBagaimana Cara Membuat Website sederhana khusus untuk Anda seorang Pemulaby Freddy Iriawan

Ebook ini dipersembahkan oleh -8-tulis nama anda disini-8Klik 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 RESERVEDTidak 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 NOTICESSegala 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 StartAll 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 Menu Bar atau bisa juga klik File New Page or Web. Pilih: New Page.

pada

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 folderfolder 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 copypaste 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, sedangkanAfter 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 Its 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-AFriend (lingkaran hijau).

(Tampilan website Bravenet saat ini dapat berbeda dengan gambar 31 di atas). Tool TellA-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-AFriend 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 DropDown 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 [email protected]. 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 (.comuntuk komersial, .org untuk organisasi, .bizuntuk 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.domainpilihanAnda.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

Mengupload 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 gambargambar 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 diset 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 (se