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
PERHATIAN
:
Anda
MEMILIKI
hak
penuh untuk memperbanyak
panduan ini
Anda juga
BOLEH
membagikan
dan memberikan isi dari panduan
ini pada siapa saja
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.
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.
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).
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.
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.
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.
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).
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 :
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).
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.
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.
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".
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.
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
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.
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.
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).
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.
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 (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.
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
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).
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-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
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).
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).
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).
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.
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".
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.]
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).
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.
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.
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.
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).
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.
** 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.
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”.
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.
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.
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.
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.
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.
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).
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.
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) Panduan
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.
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.
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).
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.
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.
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.
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).
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.
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)
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).
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.
Gambar (38) Insert Hit Counter
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.
Contoh form pada halaman Guest Book :
Cara membuat form di atas sangat mudah, yaitu dengan klik “Insert à Form à Pilih yang sesuai.
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 :
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)
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.
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 :
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 :
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.
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):
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
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.
Gambar (47) Form Properties untuk memproses Result
Gambar (48) Pada kolom Action isikan: /cgi/formmail. Method : POST Klik “OK”.
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.
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
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.
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.
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 ).
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
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
