MEMBANGUN WEBSITE SENDIRI menggunakan microsoft front page DAFTAR ISI

Edisi perdana

MEMBANGUN WEBSITE SENDIRI

menggunakan “microsoft front page”

————————————————————————————————————

DAFTAR ISI Daftar isi . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2 Kata pengantar . . . . . . . . . . . . . . . . . . . . . . . . . 3 Apakah Website itu? . . . . . . . . . . . . . . . . . . . . . . . 4 Apa Fungsi/kegunaan Website?. . . . . . . . . . . . . . . . . .

5

Bagaimana membuat Website . . . . . . . . . . . . . . . . . .

5

Software untuk membuat Website ................................................ 6 Mengenal Microsoft FrontPage ...................................................... 7 Merancang Website .................................................................... 8 Menggunakan FrontPage ............................................................. 9 Menggunakan tabel .................................................................. 11 Pengaturan tabel ...................................................................... 13 Mamasukkan gambar ................................................................ 15 Membuat Navigasi .................................................................... 17 Mengisi halaman utama ............................................................ 22 Menduplikasi halaman web ........................................................ 26 Membuat link pada text ............................................................. 34 Memberi efek rollover ............................................................... 37 Menambahkan menu navigasi .................................................... 39 Membuat tabel photo gallery. ..................................................... 40 Mempersiapkan photo gallery ..................................................... 42 Menata gambar-photo gallery .................................................... 47 Memberi link pada gambar. ....................................................... 49 Tampilkan dengan halaman baru ................................................ 51 Memberi keterangan tampilan link .............................................. 53 Memberi music background ....................................................... 54 Web Hosting ............................................................................ 57 Upload file & Update website ...................................................... 63 Penutup .................................................................................. 72 —————————————————————————————————— Legal download by member of : http://hasilbesar.com

2



————————————————————————————————————

KATA PENGANTAR Saat ini, mau atau tidak mau, kita sudah berada di era internet atau orang sering menyebutnya dengan “Teknologi Informasi”. Teknologi ini terus maju dan berkembang, tidak peduli apakah kita mau mengikutinya atau tidak tapi teknologi ini terus saja maju dan bahkan berkembang dengan pesat sekali. Sebagai mahluk yang sering menggunakan penemuan2 baru untuk menunjang kesejahteraan dalam kehidupan manusia, maka kita tidak bisa hanya tinggal diam saja, kita harus ikut dan memonitor ada apa dan bagaimana ulah dari si teknologi informasi ini melaju. Bahkan kalau kita mau memanfaatkannya supaya kita lebih mudah dan praktis dalam segala urusan kita, maka kita bisa saja membuat rencana dan membangun hubungan dengan si teknologi informasi ini. Saat ini, oleh sebagian orang banyak, internet sudah menjadi sebuah kebutuhan pokok sehari-hari, karena dalam sehari dia harus selalu koneksi ke internet, kalau tidak, rasanya hari itu ada yang hilang dan merasa belum lengkap dalam melewati hari. Atau jangan-jangan malah anda juga merasakan hal seperti itu ? Semoga saja tidak demikian, OK. Selamat mempelajari.

—————————————————————————————————— Legal download by member of : http://hasilbesar.com

3



————————————————————————————————————

APAKAH WEBSITE ITU?

Website adalah suatu halaman yang berada di internet, yang memeberikan berbagai keterangan yang detail mengenai keberadaan website itu sendiri. Membicarakan internet kita tidak akan lepas dari interaksi dengan halaman website yang sering kita lihat dan nikmati. Halaman inilah yang disebut sebagai website atau sebutan lainnya adalah homepage, selanjutnya di sini kita sebut saja “website”. Halaman ini terdiri dari file-file komputer yang sudah dikirim(upload) ke komputer pusat (server) yang diberi nama sebagai HOSTING. Dan saat ini sudah ada berjuta-juta komputer server yang saling terhubung, maka kita bisa menikmatinya dengan leluasa dan nyaman. Itulah sebabnya internet sering disebut sebagai jaringan komputer yang luas yang sering memakai kalimat www (worl wide web). Halaman ini mempunyai alamat sebagaimana tempat tinggal kita atau rumah yang kita tempati, Cuma model pemberian alamat tidak sama. Contoh pemberian sebuah alamat seperti : http://hasilbesar.com dan masih ada banyak lagi nama-nama lain atau alamat-alamat di internet. Jumlahnya sudah berjuta-juta, susah untuk mendatanya secara tepat. Untuk itulah disediakan website yang berfungsi sebagai mesin pencari alamat (search engine) berdasarkan kata atau kalimat yang kita perlukan saat itu.


4



————————————————————————————————————

APA FUNGSI SUATU WEBSITE? Fungsi suatu website adalah memberikan informasi sedetail mungkin pada keberadaan website itu sendiri. Kalau website itu berupa toko online (e-coomerce) maka kita bisa belanja dengan tidak keluar rumah, kita tinggal menunggu kiriman dan beres sudah semuanya, karena pembayarannya sudah dilakukan dengan kartu debet/kredit. Ada juga yang sedang mencari jasa sebagai tukang cat atau tukang servis mobil atau apa saja, semuanya bisa didapatkan lewat internet.

BAGAIMANA MEMBUAT WEBSITE ? Membuat website juga perlu perencanaan yang matang dan seksama. Juga tentang Komputer servernya atau hostingnya, tentukan mau pakai hosting dimana dan berapa besar kapasitasnya. Bagaimana untuk upload dan update website tsb. Ringkasan : 1. Rencanakan pembuatan website ( yang seperti apa? ) pakai program apa? 2. Pilih Hosting dimana? Berapa besar space dan berapa harga sewanya 3. Upload & Update pakai program apa?


5



————————————————————————————————————

SOFTWARE UNTUK MEMBUAT WEBSITE ? Ada banyak program yang bisa dipakai untuk membuat website, di antaranya

ada

macromedia

dreamwaver,

ada

coffecup,

ada

TrendyFlash SiteBuilder ada Cute SiteBuilder dan ada juga MicroSoft FrontPage dan masih banyak lagi. Dari beberapa program yang ada, yang paling mudah dipakai dan paling mudah di-dapatkan adalah MicroSoft “FrontPage” karena sudah disertakan secara paket dalam “MicroSoft Office” disini kita tidak usah membeli program baru lagi, kita pakai aja yang ada, dan disini kita tidak usah membicarakan bagaimana installasinya dan bagaimana konfigurasi komputer yang diperlukan karena hampir semua komputer bisa dipakai dan tentang installasi kami percaya, anda semua sudah bisa dan sudah selesai menginstallasi

program

tsb,

yang

kita

bahas

sekarang

adalah

bagaimana meng-operasikannya atau memakai program tsb secara konstan dan praktis. Selanjutnya kita akan membahas langkah demi langkah penggunaan MicroSoft FrontPage ini.


6



————————————————————————————————————

MENGENAL MICROSOFT “FRONT PAGE” MicroSoft FrontPage sudah banyak dikenal oleh masyarakat online dan para webmaster (sebutan untuk mereka yang mengelola website) juga karena di ikut sertakan dalam paket program MicroSoft Office. Sehingga banyak orang tahu, meskipun begitu masih juga ada beberapa orang yang merasa belum perlu untuk memakainya karena tidak pernah berniat untuk membangun website. Saat ini justru kita yang memerlukannya, karena saat ini kita akan membangun website pribadi dan kita juga akan memakai komputer servernya (hosting) yang banyak disediakan secara gratis, tetapi tentunya dengan penuh kenyamanan, yaitu tidak adanya iklan yang disertakan dalam website kita ini nantinya. Kemudahannya dalam pemakaian sangat memengaruhi pembuatan website karena akan lebih cepat seakan instan, dengan MicroSoft FrontPage anda serasa sedang menggunakan MicroSoftWord yang tentunya sudah tidak asing lagi bagi kita pemakai komputer pribadi. Sehingga perintah-perintah umum tidak dibahas disini, cukup yang diperlukan saja kita bahas dan jelaskan. OK, Selamat bekerja!


7



————————————————————————————————————

MERANCANG WEBSITE Buat skema atau peta untuk menu dan sajian berita sebagai ulasan selamat datang, kemudian isi dari website itu sendiri dan kelebihannya sampai akhirnya cara untuk menghubungi anda. Persiapkan juga model tampilan yang akan anda pakai, menurut selera. Rancangan standar umum untuk tampilan website biasanya seperti gambar dibawah ini, tapi ini hanya contoh saja dan anda tetap bebas mengembangkan desain sendiri sesuai selera anda. (Tetap harus jelas bagi pengunjung, jangan membuat pengunjung bingung supaya mereka/pengungjung mau berulang-ulang datang melihat website kita.)

HEADER INI BIASANYA DI ISI GAMBAR (Image)

NAVIGASI

ISI / BERITA

Gambar 01 Kita akan mencoba merancang dengan navigasi/menu sbb: HalamanDepan,

TentangSaya,

KegiatanSaya,

HubungiSaya

dan

kemudian baru ditambahkan satu menu PhotoGallery.


8



————————————————————————————————————

MENGGUNAKAN “FRONTPAGE” Marilah kita mulai panggil program FrontPage dengan klik tombol start pada windowsXP kemudian klik All Programs dan langsung klik icon program yang kami gunakan “Microsoft Office FrontPage 2003” Lihatlah contoh gambar dibawah ini.

Gambar 02


9



————————————————————————————————————

Dan inilah tampilan awal Microsoft FrontPage 2003.

Gambar 03


10



————————————————————————————————————

MENGGUNAKAN TABEL Kita akan memulainya dengan menggunakan tabel untuk kerangka layout website. Perhatikan contoh gambar dibawah ini.

Gambar 04


11



————————————————————————————————————

Setelah tabel masuk dan tampil di layar kita posisikan kursor mouse berada didalam tabel, kemudian klik mouse sebelah kanan, maka akan keluar menu pilihan, dan kita pilih “Table Properties…” Lihatlah contoh gambar dibawah ini.

Gambar 05


12



————————————————————————————————————

PENGATURAN TABEL Dan inilah daftar isian table properties yang harus kita sesuaikan. Ganti Aligment menjadi Center lalu ubah nilai Border menjadi 0 Kemudian tekan tombol “OK” yang lain bisa diabaikan.

Gambar 06


13



————————————————————————————————————

Kemudian baris atas pada tabel, kolom kiri disatukan dengan kolom kanan dengan cara di blok, setelah di blok klik mouse bagian kanan, maka akan keluar menu seperti tampak dalam gambar dibawah ini. Setelah selesai baris atas dilanjutkan dengan baris paling bawah, juga menyatukan kolom kiri & kanan dengan cara yang sama.

Gambar 07


14



————————————————————————————————————

MEMASUKKAN GAMBAR Sekarang kita akan memasukkan gambar ke dalam baris paling atas, kita posisikan kursor mouse ke dalam tabel kemudian klik menu di atas dan pilih “Insert” lalu pilih “Picture” lalu pilih “From File…” Lihat juga contoh gambar dibawah ini.

Gambar 08


15



————————————————————————————————————

Setelah klik pilihan “From File…” maka layar komputer menampilkan gambar seperti contoh yang di tampilkan di bawah ini. Kita tentukan lokasi file gambar berada kemudian klik untuk memilih, kalau sudah betul klik tombol insert. Perhatikan contoh gambar dibawah ini.

Gambar 09


16



————————————————————————————————————

MEMBUAT NAVIGASI Setelah gambar masuk ke dalam tampilan layar sekarang kita akan membuat navigasi juga menggunakan tabel, pertama posisikan kursor mouse pada baris kedua sebelah kiri kemudian klik icon isert tabel seperti tampak pada contoh layar dibawah ini.

Gambar 10


17



————————————————————————————————————

Setelah tabel masuk dalam tampilan layar kita klik mouse bagian kanan maka akan keluar lagi menu Table Properties lagi seperti tampak pada gambar dibawah ini.

Gambar 11


18



———————————————————————————————————— Inilah daftar penyesuaian tabel untuk navigasi, perhatikan contoh gambar dibawah ini. Ubah nilai CellPadding : 8 dan Size Border : 3 dengan warna putih dan warna background diberi warna abu-abu. Klik tombol “Apply” kemudian tombol ”OK”

Gambar 12


19



———————————————————————————————————— Setelah kita klik tombol “OK” maka jadi sudah navigasi yang masih polos, sebagaimana tampil dibawah ini.

Gambar 13


20



————————————————————————————————————

Kemudian kita ketik nama navigasi sesuai rencana kita, sebagai contoh disini kita beri nama menu no.1 adalah Halaman Depan 2.Tentang Saya 3. Kegiatan Saya 4. Hubungi Saya. Lihat juga contoh gambar dibawah ini.

Gambar 14


21



————————————————————————————————————

MENGISI HALAMAN UTAMA Dilanjutkan dengan mengetik isi dari halaman depan, atau boleh juga diberi gambar-gambar. Lihat juga contoh gambar dibawah ini.

Gambar 15 SELAMAT DATANG Terima kasih atas kunjungan anda di website saya, semoga bermanfaat dan memberi kesenangan bagi anda, para pengunjung website saya. Apabila ada pertanyaan dan ingin mengajukan pertanyaan saya persilahkan anda klik di menu hubungi saya dan anda bisa menuliskan semua pertanyaan anda. Saya akan dengan senang hati menjawab semua pertanyaan anda, dan akhirnya Selamat menikmati dan silahkan melanjutkan pencarian anda di website ini. Salam.


22



————————————————————————————————————

Selanjutnya tampilan di atur tata letaknya seperti tampak pada contoh gambar dibawah ini. Kami yakin

para pembaca semua sudah

bisa

bagaimana

cara

membesarkan huruf dan bagaimana memberi spasi dobel, karena semua ini adalah perintah pengetikkan biasa.

Gambar 16


23



———————————————————————————————————— Sekarang saatnya file ini disimpan dengan cara klik menu di atas dari “File” kemudian pilih “Save” atau mau yang singkat dengan tombol keyboard yaitu tombol “Ctrl+S” Lihat juga contoh gambar dibawah ini.

Gambar 17


24



————————————————————————————————————

Setelah klik tombol menu “Save” dari atas masih akan tampil lagi layar menanyakan nama file yang akan disimpan dan kita akan memberi nama sesuai defaultnya saja yaitu “Index.htm” kemudian klik tombol “Save” lagi seperti tampak pada gambar dibawah ini.

Gambar 18


25



————————————————————————————————————

MENDUPLIKASI HALAMAN WEB Kemudian untuk memudahkan pembuatan halaman yang lain maka kita duplikasi dengan cara klik lagi menu di atas danpilih “Save As” seperti tampak pada contoh gambar dibawah ini.

Gambar 19


26



————————————————————————————————————

Setelah kita memilih menu “Save As”

maka komputer minta nama

file yang baru dan kita akan memberi nama sebagai “about-me.htm” sebagaimana tampil pada contoh gambar dibawah ini.

Gambar 20


27



————————————————————————————————————

Kemudian dilanjutkan lagi proses duplikasi ini dengan nama yang lain seperti “my-activity.htm” Perhatikan juga contoh gambar dibawah ini.

Gambar 21


28



———————————————————————————————————— Setelah halaman di duplikasi maka sekarang kita ubah kata-katanya. Perhatikan juga contoh gambar dibawah ini.

Gambar 22 KEGIATAN SAYA Kegiatan saya tidak terlalu banyak karena waktu yang ada sudah terpakai bekerja dan setelah pulang juga masih mengerjakan pekerjaan rumah seperti membuat program pesanan dari beberapa teman dan langganan saya sendiri. Selain daripada itu saya setiap hari senin malam saya berolah raga tenis dilapangan pondok indah dan setiap hari minggu pagi saya ke gereja bersama keluarga dan siang harinya saya berolah raga lagi dengan berenang di ancol juga bersama keluarga, selain dari itu rasanya sudah tidak ada waktu lagi, karena kegiatan selingan saya adalah mengelola website ini yang dibantu oleh istri saya tercinta, sambil cerita kegiatan sehari-hari dan nakalnya anak-anak. Saya sangat mengucap syukur pada Tuhan yang telah mengaruniakan kehidupan yang baik dan selalu labih baik dari hari ke hari.

Terima Kasih

Salam.


29



————————————————————————————————————

Selanjutnya tampilan diatur lagi

tata letaknya seperti tampak pada

contoh gambar dibawah ini.

Gambar 23


30



————————————————————————————————————

Sekarang saatnya file ini disimpan dengan cara klik menu di atas dari “File” kemudian pilih “Save” atau mau yang singkat dengan tombol keyboard yaitu tombol “Ctrl+S” Lihat juga contoh gambar dibawah ini.

Gambar 24


31



———————————————————————————————————— Selanjutnya kita buka halaman yang telah di duplikasi yang lain seperti “About-me.htm”

dan sekarang kita ubah kata-katanya.

Perhatikan juga contoh gambar dibawah ini.

Gambar 25 TENTANG SAYA Saya adalah seorang warga negara Indonesia dan bertempat tinggal di Jakarta dengan bekerja sebagai seorang programer pada sebuah perusahaan swasta. Saya membuat website ini tujuannya adalah untuk menjalin persahabatan dengan warga negara manapun yang bisa berbahasa Indonesia. Juga untuk memudahkan komunikasi dengan keluarga saya yang lain yang bertempat tinggal jauh dari saya, meskipun masih dalam lingkup negara Indonesia. Untuk pertanyaan-pertanyaan silahkan anda tujukan kepada saya lewat menu "Hubungi saya" semua pertanyaan akan saya jawab sesuai waktu yang saya miliki. Terima kasih.

Salam.


32

MEMBANGUN WEBSITE PRIBADI.PDF Created © 2007 by Matrix105.com

———————————————————————————————————— Selanjutnya tampilan di tata /di layout seperti tampak pada contoh gambar dibawah ini. Jangan lupa menyimpan hasil perubahan yang dilakukan dengan klik menu di atas “File” kemudian pilih “Save” atau mau yang singkat dengan tombol keyboard yaitu tombol “Ctrl+S” seperti perlakuan sebelumnya dalam menyimpan file yang lain.

Gambar 26


33


————————————————————————————————————

MEMBUAT LINK PADA TEXT Sekarang kita akan memberikan link untuk membuka halaman lain di website ini, kita buka file “Index.htm” lalu posisikan kursor mouse pada kalimat di navigasi yang akan diberi link (TentangSaya) kemudian kalimat itu di blok, setelah di blok posisi kursor masih di atas kalimat tsb dan klik mouse bagian kanan, maka akan tampil menu pilihan seperti tampak pada contoh gambar dibawah ini. Kemudian kita pilih menu “Hyperlink…”

Gambar 27


34


————————————————————————————————————

Setelah kita klik menu Hyperlink… maka masih tampil lagi pertanyaan dari komputer, maksudnya mau di link ke file yang mana. Kita bisa pilih file tsb dan klik tombol “OK” Perhatikan juga contoh gambar dibawah ini.

Gambar 28

Lakukan juga untuk file “about-me.htm” dan “my-activity.htm”


35


———————————————————————————————————— Setelah semua file selesai dikerjakan, kita bisa mengujinya dengan klik menu “File” kemudian pilih “Preview in browser” dan pilih menu “Microsoft Internet Explorer” atau dengan tombol keyboard dengan menekan F.12 Perhatikan juga contoh gambar dibawah ini.

Gambar 29


36


————————————————————————————————————

MEMBERI EFEK ROLLOVER Setelah semua tampilan beres, sekarang kita akan menambahkan untuk menu navigasi dengan efek “RollOver” supaya lebih menarik dan memudahkan bagi pengunjung. Kita bisa posisikan kursor di dalam halaman dan klik mouse bagian kanan kemudian pilih menu “Page Properties…” Perhatikan juga contoh gambar dibawah ini.

Gambar 30


37


———————————————————————————————————— Halaman pengaturan untuk efek “rollover” 1. Pilih tab “Advanced” 2. Beri anda centang (v") pada kotak Enable hyperlink rollover effects 3. Klik tombol “OK” Lihat juga contoh gambar dibawah ini.

Gambar 31


38


————————————————————————————————————

MENAMBAHKAN MENU/NAVIGASI Setelah semuanya selesai dan ternyata kita juga mau menambahkan satu menu lagi, maka yang kita lakukan adalah dengan menempatkan kursor di posisi terakhir dari kalimat menu (HubungiSaya) kemudian dari keyboard tekan tombol “Tab”, maka navigasi akan bertambah satu baris lagi dan kita ketik/beri nama “PhotoGallery” Perhatikan contoh gambar dibawah ini.

Gambar 32


39



————————————————————————————————————

MEMBUAT TABEL PHOTO GALLERY Kemudian tambahkan tabel dibagian kolom yang kanan untuk menata tampilan photo, kita akan memberi untuk 12 gambar maka tabel kita pilih untul 4 kolom dan 3 baris, seperti tampak pada contoh gambar dibawah ini.

Gambar 33


40



————————————————————————————————————

Setelah tabel masuk dan tampil di layar kita posisikan kursor mouse berada didalam tabel, kemudian klik mouse sebelah kanan, maka akan keluar menu pilihan, dan kita pilih “Table Properties…” Kita

ubah

Alignment:

center,

CellPadding:

3,

CellSpacing:

3,

BorderSize: 0, kalau sudah klik tombol “Apply” kemudian “OK” Lihatlah juga contoh gambar dibawah ini.

Gambar 34


41



————————————————————————————————————

MEMPERSIAPKAN PHOTO GALLERY Marilah kita mempersiapkan gambar yang akan ditampilkan dan yang ditampilkan ukuran filenya harus kecil supaya bisa cepat tampil dalam website, sebab kalau ukuran filenya besar diperlukan waktu yang cukup lama untuk menampilkannya dan pengunjung bisa bosan menunggu waktu yang lama hanya untuk melihat galeri kita, maka biasanya pengunjung akan langsung menutup dan meninggalkan website kita, lebih parah lagi apabila dia (pengunjung) tidak mau berkunjung ke website kita lagi. Maka kita akan membagi dua bagian untuk setiap gambar/photo, satu yang ukuran kecil untuk tampilan di website dan satu lagi ukuran yang sebenarnya untuk di download / di share. Kita bisa menggunakan software freeware “FastStone-ImageViewer” yang ada disediakan gratis di dalam member area, dan anda bisa mendownloadnya secara gratis juga. Bila anda merasa mendapat manfaat dari menggunakan software tsb dan ingin membagi hasil(uang) maka anda bisa mengirim donasi kepada pembuatnya di www.faststone.org


42



————————————————————————————————————

Inilah tampilan dari “FastStone - ImageViewer”

Gambar 35


43



———————————————————————————————————— Pilih gambar dan klik dua kali atau tekan tombol ENTER di keyboard maka gambar akan tampil besar, kemudian geser kursor mouse pada posisi paling kiri layar, maka akan tampil menu pilihan dan kita akan memilih menu “Quick Resize / Resample” untuk merubah ukuran tampilan. Kemudian kita pilih ukuran 160 x 120 untuk semua file yang akan dipakai sebagai tampilan di website. Kita juga bisa menggunakan tombol keyboard “Ctrl+Q” untuk ukuran 160 x 120 pada file-file selanjutnya. Lihat juga contoh gambar dibawah ini.

Gambar 36


44



————————————————————————————————————

Setelah tampil kecil, kita geser lagi kursor mouse pada posisi paling kiri layar dan setelah keluar menu kita pilih “Save As…” atau menekan tombol keyboard “Ctrl+S” untuk menyimpan file kecil ini. Perhatikan contoh gambar dibawah ini.

Gambar 37


45



———————————————————————————————————— Setelah menekan tombol “Ctrl+S” atau klik “Save As…” maka komputer akan meminta kita untuk memberi nama file yang telah diprose kecil ini. Lakukan pada semua file gambar yang akan dipakai sebagai tampilan di website. Lihat juga contoh gambar dibawah ini.

Gambar 38


46



————————————————————————————————————

MENATA GAMBAR-PHOTO GALLERY Setelah selesai persiapan semua gambar/photo yang akan ditampilkan, sekarang siap untuk memasukkan photo kehalaman website dengan klik menu “insert” yang ada di atas kemudian pilih “Picture” dan “FromFile…” atau klik icon import image

supaya lebih cepat.

Perhatikan contoh gambar dibawah ini.

Gambar 39


47



———————————————————————————————————— Masukkan semua file gambar yang sudah dipersiapkan dan aturlah sedemikian rupa supaya tampil rapi dan menarik. Lihat juga contoh gambar dibawah ini.

Gambar40


48



————————————————————————————————————

MEMBERI LINK PADA GAMBAR Proses pemberian link pada gambar sama dengan prosesnya dengan pada text, Cuma pada gambar tidak usah di blok sebagaimana text, tapi cukup memposisikan kursor pada gambar yang akan diberi link kemudian klik mouse bagian kanan dan pilih menu “Hyperlink…” Perhatikan juga contoh gambar dibawah ini.

Gambar 41


49



———————————————————————————————————— Setelah memilih menu Hyperlink, komputer akan meminta kita untuk memilih file, untuk yang mana link ini dibuat. Pilih file yang kita maksud kemudian klik tombol “OK” Perhatikan contoh gambar dibawah ini.

Gambar 42


50



————————————————————————————————————

TAMPILKAN DENGAN HALAMAN BARU Tapi sebelum anda klik tombol “OK” apabila anda ingin membuat halaman baru untuk tampilan yang diplilih maka di stel dengan klik tombol “Target Frame…” Lihat contoh gambar dibawah ini.

Gambar 43


51



————————————————————————————————————

Setelah klik “Target Frame” kemudian kita pilih “New Window” Tujuannya supaya tampilan membuka halaman baru dan halaman pertama yang dibuka tidak berganti atau hilang. Setelah kita pilih “New Window” kita klik tombol “OK” dan tampilan akan kembali ke layar Insert Hyperlink, kita klik “OK” lagi Perhatikan contoh gambar dibawah ini.

Gambar 44


52



————————————————————————————————————

MEMBERI KETERANGAN TAMPILAN LINK Apabila link disorot atau pas kena kursor mouse maka keterangan tentang link tsb akan ditampilkan, klik tombol

“ScreenTip…”

kemudian ketiklah keterangan untuk link ini. Perhatikan juga gambar dibawah ini.

Gambar 45 Setelah klik “Screen Tip…” di atas, akan tampil lagi layar input ini, silahkan ketik keterangan untuk link ini.

Gambar 46


53



————————————————————————————————————

MEMBERI MUSIC BACKGROUND Buka file web yang akan diberi musik latar kemudian klik mouse bagian kanan dan pilih “PageProperties…” Perhatikan contoh gambar dibawah ini.

Gambar 47


54



————————————————————————————————————

Setelah klik “Page properties…” tampil halaman baru seperti contoh gambar dibawah ini, dan kita klik tombol “Browse…”

Gambar 48


55



————————————————————————————————————

Setelah klik tombol “Browse…” masih tampil lagi halaman baru dan komputer meminta kita mencari file lagu yang akan dipakai. Apabila memungkinkan pilih file MIDI karena ukurannya yang sangat kecil sehingga sangat cepat untuk loading, tapi kalau tidak ada file midi file yang lain juga bisa, selama masih dalam support. Setelah ketemu filenya klik tombol “Open” dan tampilan akan kembali ke halaman “PageProperties” seperti diatas (gambar 48) kita klik aja tombol “OK”

Lihat juga contoh gambar dibawah ini.

Gambar 49 Untuk mengujinya dalam tampilan, tekan tombol F.12 pada keyboard.


56



————————————————————————————————————

WEB HOSTING Setelah semuanya beres secara offline, maka selanjutnya kita akan membuatnya online, dan langkah pertama yang harus dilakukan adalah mencari hosting, yaitu sebuah komputer server/tempat dimana semua file-file kita akan disimpan di internet. Ada banyak sekali penyedia jasa hosting, baik yang gratis ataupun yang berbayar. Saat ini kita akan menggunakan web hosting yang gratis dan memiliki kenyamanan yang lumayan wah karena mempunyai banyak kelebihan daripada yang lain, adapun spesifikasinya adalah sbb: -

250 MB of Disk Space, 100 GB Bandwidth

-

Host your own domain (http://www.yourdomain.com)

-

cPanel Powered Hosting (you will love it)

-

Over 500 website templates ready to download

-

Free POP3 Email Box with Webmail access

-

FTP and Web based File Manager

-

PHP, MySQL, Perl, CGI, Ruby.

-

And many more..

Click here to visit us: http://www.000webhost.com/?id=19728 Anda harus menyertakan /?id=19728 karena itu adalah id saya supaya saya mendapat komisi atas jasa saya memperkenalkan webhosting ini kepada anda, dan begitupun dengan anda selanjutnya anda harus menyertakan id anda untuk teman & rekan anda yang telah anda perkenalkan dengan webhosting ini, supaya andapun bisa dapat komisi. Lumayan kan kalau bisa dapat komisi dengan membantu orang lain? Jadi semua kegiatan kita tidak sia-sia karena selalu memberikan hasil.


57



———————————————————————————————————— Anda bisa mendaftar s e n d i r i lewat websitenya kemudian klik banner “FreeWebHosting” seperti gambar dibawah ini.

atau

Gambar 50 dan inilah tampilan awal www.000webhost.com/?id=19728

Gambar 51


58



———————————————————————————————————— Untuk mendaftar kita klik tombol “Sign Up!” maka layar akan menampilkan gambar seperti pada contoh di bawah ini.

Gambar 52 Kita isi semua form yang ada untuk melengkapi pendaftaran kita, juga pada kotak perjanjian kita harus memberi tanda “v” baru kemudian kita klik tombol “Create My Account”


59



———————————————————————————————————— Dan setelah kita klik tombol “Create My Account” layar anda akan menampilkan juga gambar seperti contoh di bawah ini, sebagai konfirmasi daftar isian anda. Selanjutnya kita langsung klik tombol “Setup My Account” Perhatikan contoh gambar di bawah ini.

Gambar 53 Account detail akan di tampilkan seperti anda lihat pada contoh gambar di bawah ini. Kemudian kita klik pada tulisan [Enter Control Panel]


60



————————————————————————————————————


61



———————————————————————————————————— Inilah Tampilan layar Control Panel


62



————————————————————————————————————

UPLOAD FILE Setelah tampil layar Control Panel dan kita klik File Manager, maka kita sudah siap mengirim (upload) file-file kita ke webhosting disini. Inilah contoh tampilan File Manager, kita harus mangirim (upload) file kita pada directory public_html karena memang disinilah di anggap sebagai root directory. Sekarang kita klik link bertuliskan public_html seperti contoh gambar di bawah ini.

Gambar 56


63



———————————————————————————————————— Setelah masuk directory public_html kita klik tombol “UpLoad” seperti ditampilkan pada contoh gambar dibawah ini.

Gambar 57


64



———————————————————————————————————— Inilah contoh tampilan untuk Upload dari File Manager guna mengirim file-file kita, sekarang kita klik tombol “Browse” seperti contoh gambar dibawah ini.

Gambar 58


65



———————————————————————————————————— Kemudian kita menentukan directory dimana file-file kita berada dan siap untuk di upload, perhatikan juga contoh gambar dibawah ini. 1. Kita tentukan dimana drive nya 2. Kita tentuka sub directory nya 3. Kita pilih file nya 4. Terakhir kita klik tombol open dan file akan segera di upload. Perhatikan contoh gambar di bawah ini.

Gambar 59


66



———————————————————————————————————— Apabila file yang akan di upload ada beberapa maka kita juga bisa menambahkan form input dengan meng klik tombol “Add other” seperti tampak pada contoh gambar dibawah ini.

Gambar 60


67



———————————————————————————————————— Setelah file berhasil di upload maka komputer akan memberi tahukan pada kita bahwa perintah upload sudah selesai dilakukan dan inilah contoh

tampilan

layar

setelah

selesai

upload,

untuk

kembali

kehalaman File Manager kita klik gambar tanda panah kekiri seperti tampak pada contoh gambar dibawah ini.

Gambar 61


68



———————————————————————————————————— Apabila pekerjaan untuk upload sudah selesai maka kita bisa klik tombol on/off (logout) yang berada di pojok kanan atas sebagaimana tampak pada contoh gambar dibawah ini, berarti kita sudah keluar /logout dan website kita sudah berhasil online. Kita bisa langsung mengetik alamat domain yang kita pilih(gambar 52). Nah samapi di sini selesai sudah tugas kita untuk upload file.

Gambar 62


69



————————————————————————————————————

UPDATE WEBSITE Untuk memperbarui halaman website kita (update) maka kita harus melakukan login lagi kedalam account kita di hosting 000webhost.com seperti tampak pada contoh gambar dibawah ini. Kita masukkan email yang telah kita daftarkan dan juga kita isi password yang telah kita buat kemudian kita klik tombol “Submit”.

Gambar 63


70



———————————————————————————————————— Setelah berhasil untuk login maka akan tampak tampilan layar seperti pada contoh gambar dibawah ini, kita klik link tulisan “Go to Cpanel” perhatikan juga contoh gambar dibawah ini. Tampilan layar control panel akan tampil seperti contoh gambar sebelumnya (gambar55) dan proses selanjutnya juga sama dengan proses upload (gambar 56 - 62). Akhirnya selesai sudah proyek kita membuat website pribadi, untuk pengembangan lebih jauh lagi bisa disertakan database juga dengan memakai Php & MySQL yang ebooknya juga bisa anda dapatkan di halaman member area – ebook. Selamat berkreativitas!!!

Gambar 64


71



————————————————————————————————————

PENUTUP Nah, sekarang selesailah bahasan dan penjelasan dari kami tentang bagaimana membuat Website pribadi, yang masih sangat sederhana sekali dan jauh dari sempurna ini. Kami membuka hati untuk segala kritik dan saran dari Anda para pembaca semua sebagai masukkan untuk lebih menyempurnakan hasil karya ini. Anda bisa mengembangkan lebih luas lagi sesuai dengan keperluan anda dan dengan kreatifitas juga semangat anda, kami yakin anda bisa membuat yang lebih dahsyat dari ini. Atas perhatian dan kerjasama yang baik dari Anda semua para pembaca e-book ini, kami team dari hasilbesar.com mengucapkan banyak terima kasih, kiranya sukses selalu beserta dengan Anda semua! Amin. Beritahukan kepada setiap orang (siapa saja semampu anda) tentang kesempatan (dapat duit) yang baik yang ada di-website ini. Percayalah dan yakinlah, bahwa keberuntungan pasti selalu berpihak kepada kita , karena sukses adalah hak kita semua yang mau berusaha dan berjuang mendapatkannya. Salam sukses selalu!


72

MEMBANGUN WEBSITE SENDIRI menggunakan microsoft front page DAFTAR ISI

Recommend Documents