Docstoc

cara lengkap buat website

Document Sample
cara lengkap buat  website Powered By Docstoc
					                                                    1



“Bagaimana Cara Membuat
 Website Dengan Tangan
Anda Sendiri Dan Upload Ke
        Hosting!”




            Oleh: Kusuma Putra




    Copyright © 2009 – www.caramembuatwebsite.com
                                                                              3



Sebelum Anda Mulai

Ketika Anda membuat sebuah website, anda akan menggunakan
gambar-gambar – Anda juga akan menambahkan link ke halaman yang
lain.

Untuk memudahkan anda mengelola website anda, maka anda perlu
membuat sebuah folder di komputer anda, dan meletakkan file-file
gambar dan file website yang anda buat (html) didalam satu tempat.

Anda bisa melihatnya pada gambar di bawah ini, begitulah kira-kira
struktur file yang ada di satu folder bernama website.

Pada gambar di sebelah kanan, adalah gambar file yang ada di server.
Bila anda lihat kedua gambar dibawah, maka baik di komputer anda
ataupun di server hosting maka begitulah seharusnya file-file
diletakkan. Jadi antara di komputer dengan di server hosting anda bisa
meletakkan file-file secara mirip sama.




Pada contoh diatas, path/jalur file berikut akan dibuat:

/index.html
/otherpage.html
/images/image1.jpg
/images/image2.jpg

Catatan: Nama folder dan nama file harus dengan huruf kecil semuanya. (case
sensitif)



             Copyright © 2009 – www.caramembuatwebsite.com
                                                                         4


Langkah pertama: Anda perlu membuat sebuah folder di komputer
anda, klik “Make a new folder” (1). Anda bisa membuatnya di my
documents seperti contoh dibawah ini.

Lalu Berilah Nama “Website” (2). Pada folder “Website” inilah nantinya
anda akan meletakkan file-file website anda.




Setelah folder “website” selesai dibuat, klik dua kali untuk masuk
kedalamnya, lalu buat sebuah folder lagi (1). Kali ini namakan folder tadi
sesuai dengan nama domain yang akan anda pergunakan untuk
membuat website anda yang pertama.

Karena saya sudah menyiapkan sebuah domain:
“caramembuatwebsite.com” maka saya menamakannya sesuai nama itu.
(2)




            Copyright © 2009 – www.caramembuatwebsite.com
                                                                       5


Lalu, didalam website folder anda, buatlah sebuah folder baru (1)
dengan nama “images” (2) dimana nantinya anda akan meletakkan
file-file gambar yang diperlukan untuk mempercantik website
anda.




Mendownload Web Editor Anda

Sebuah web editor yang mudah digunakan dan sangat sederhana dan
juga gratis yang akan kita pergunakan – adalah NVU. Untuk
mendownloadnya silahkan ke: http://www.nvudev.com/download.php

Klik pada link yang sesuai dengan operator komputer anda. Dalam hal
ini, karena saya menggunakan Windows XP maka saya klik pada bagian
itu.

Jika link diatas tidak bisa, maka silahkan download melalui server saya:
http://www.caramembuatwebsite.com/bonus/nvu-1.0-win32-installer-
full.exe




            Copyright © 2009 – www.caramembuatwebsite.com
                                                                 6




Muncul sebuah kotak, dan Nvu siap didownload. Klik “Save File”




Pilih sebuah folder di komputer anda untuk menyimpan installer
file ini. Dalam gambar dibawah, saya meletakkannya di folder
“Website” Di Tempat Folder Domain Yang diatas saya buat. Lalu
klik Save.




           Copyright © 2009 – www.caramembuatwebsite.com
                                                                 7




Catatan: Ada baiknya anda meletakkan installer file seperti ini di
folder khusus di komputer anda. Installer ini hanya dipergunakan
sekali saja. Untuk penggunaan lain kali, anda dapat enyimpannya.

Setelah file selesai didownload maka klik open untuk mulai
menginstallnya.




           Copyright © 2009 – www.caramembuatwebsite.com
                                                                     8


Komputer anda kemudian akan memberitahu anda bahwa anda
akan menginstall Excutable File. Klik Ok, karena ini adalah file
yang aman.




Executable File: Adalah file yang akan anda install (terpasang) di
komputer anda.

Jika anda mendownload sebuah Executable File dari website yang
tidak jelas reputasinya, maka anda tidak tahu apa yang ada
didalamnya, ini menjadi sebuah resiko bagi anda, karena bisa saja
berisi file yang dapat merugikan komputer anda.

Jaminan Keamanan: Baik Installer Nvu dan WS_FTP yang
nantinya anda akan pergunakan, keduanya adalah aman.

Lalu Klik: “Next”.




            Copyright © 2009 – www.caramembuatwebsite.com
                                                                      9


Setelah klik pada tombol “I accept the agreement” (1), klik “Next”
(2)




Lalu proses selanjutnya adalah memilih dimana program akan terinstall.
Secara otomatis akan terpilih di program files komputer anda. Anda bisa
memilih folder yang lain. Namun, anda bisa langsung melanjutkan, klik
“Next”.




            Copyright © 2009 – www.caramembuatwebsite.com
                                                                  10


Start menunya akan diberi nama Nvu. Anda nantinya dapat menemukan
icon untuk meluncurkan Nvu ini pada start menu komputer anda
dengan nama Nvu. Lanjutkan: “Next”




Lalu anda dapat memberi “centang” pada “Create a desktop icon”,
kemudian klik: “Next”.




            Copyright © 2009 – www.caramembuatwebsite.com
                                                                    11


Lalu anda klik: “Install”




Nah Nvu sekarang sudah terinstall di komputer anda dan siap
dipergunakan. Anda bisa meluncurkannya melalui start menu anda.
Namun, anda bisa langsung meluncurkannya sekarang juga karena
“Launch Nvu” dalam posisi terpilih. Klik Finish untuk meluncurkan Nvu.




             Copyright © 2009 – www.caramembuatwebsite.com
                                                                       12


Saat pertama kali diluncurkan, maka akan keluar jendela “Nvu Tips”
Anda bisa klik “Next Tip” untuk membaca Tips yang ada (1), Atau Klik
Tanda silang di ujung sebelah kanan atas untuk menutup jendela Nvu
Tip ini. (2)




            Copyright © 2009 – www.caramembuatwebsite.com
                                                                       13



Nah setelah itu anda dapat mengklik tombol “x” yang ada sesuai gambar
dibawah unuk membuat jendela utama Nvu lebar sepenuhnya.




Membuat Tabel Utama

Halaman Nvu yang sedang terbuka adalah tempat dimana anda akan
mulai membuat halaman website anda.

Untuk membuat halaman website supaya tidak terlalu lebar – sehingga
orang sulit membacanya – anda bisa membuat tabel utama dimana
semua file gambar dan tulisan akan ada di dalam tabel utama ini. Tabel
akan membantu anda mengontrol bagaimana website anda akan
kelihatan di Internet.

Pastikan cursor anda letakkan di dalam editor Nvu (1). Lalu klik tab
menu “Insert” dan akan tampil berbagai pilihan kebawah (drop down
menu). Lalu klik “Table” (2).




            Copyright © 2009 – www.caramembuatwebsite.com
                                                                  14


Lalu Kotak Insert Table akan muncul. Anda bisa memilih berapa banyak
baris dan kolom yang anda perlukan. Untuk tabel utama anda hanya
memerlukan 1 baris dan 1 kolom saja, maka posisikan cursor anda pada
1 kotak, lalu klik kotak tersebut.




Klik Pada Menu Tab “Tabel” dan Pada Drop Down Menu Klik “Table
Properties”.




           Copyright © 2009 – www.caramembuatwebsite.com
                                                                         15


Isikan lebar tabel “700” (1) dan pilih “Pixels” dari pilihan yang ada pada
kotak dengan panah kebawah di sebelah kanan “ width” (2).

Untuk menghilangkan border tebal di sekeliling tabel, isikan Border
dengan 0 pixels (3). Tentukan padding dengan 20 pixels (4), ini untuk
memberikan jarak antara text dan pinggir dari tabel.

Untuk meletakkan tabel di bagian tengah dari halaman browser anda,
pilih “Center” dari menu drop down. (5)

Pada langkah selanjutnya, anda akan mengisikan warna background
yang akan mengisi tabel anda. Untuk mengisikan background warna di
dalam tabel, maka anda perlu tentukan background tabel menjadi putih.
Klik Tombol “Background Color” (6).




Klik kotak putih pada palete warna. (1) Lalu Klik “Ok” (2).




             Copyright © 2009 – www.caramembuatwebsite.com
                                                                  16



Klik “Ok” maka tabel anda sudah selesai dibuat.




Save File Anda

Sebelum memasukkan gambar-gambar, anda harus mensave halaman
web.

Hal ini membuat Nvu tahu hubungan website anda dengan gambar –
dengan menemukan dimana keduanya diletakkan di folder untuk
website anda. Pada menu “File” drop down menu, click “Save As”.




            Copyright © 2009 – www.caramembuatwebsite.com
                                                                    17




Kotak yang menanyakan Judul halaman (title) Anda akan muncul,
isikan dengan kalimat yang menggambarkan tentang website anda.
Isikan secukupnya saja, maksimal 65 karakter panjangnya. (1) Lalu Klik
“Ok”.




Secara Otomatis, anda akan ditawarkan untuk simpan dengan nama
yang sama dengan judul halaman, namun anda tidak perlu
menerimanya, jika tidak nama file anda akan panjang sekali.




            Copyright © 2009 – www.caramembuatwebsite.com
                                                                     18




Rubah nama file menjadi “index” (1). Lalu klik “Save” (2).




Catatan: Nama file untuk website adalah case sensitive, jadi seharusnya
menggunakan huruf kecil semuanya. File index.html harus huruf kecil
semuanya.


Menentukan Warna Dasar ( Background ) Website Anda

Nah sekarang anda tentukan warna dasar dari halaman website yang
akan mengelilingi tabel. Dari Menu Tab “Format” lihat drop down menu
klik: “Page Colors and Background”




             Copyright © 2009 – www.caramembuatwebsite.com
                                                                       19


Pilih “Use custom colors:” (1) dan klik pada kotak di sebelah kanan
tulisan “Background” (2)




Pilih warna yang anda inginkan pada palete warna (1). Lalu Klik “Ok” (2).




            Copyright © 2009 – www.caramembuatwebsite.com
                                                                        20


Maka warna dasar background website anda sudah ditentukan. Dan
Klik “Ok”.




Membuat Headline Website Anda

Untuk mencegah supaya halaman website tetap bagus, dan memberikan
keleluasaan bekerja didalam tabel, silahkan klik enter 3 - 4 kali di dalam
tabel.

Maka tabel akan memanjang ke bawah.




            Copyright © 2009 – www.caramembuatwebsite.com
                                                                      21


Ketikkan headline website anda. Headline adalah judul atau kalimat
penarik perhatian. Semua website penjualan yang baik selalu dimulai
dengan headline yang menarik perhatian pengunjung.




Meletakkan Gambar Dan Teks Bersebelahan

Untuk membuat gambar dan teks dalam website, maka anda perlu
membuat sebuah tabel dengan dua kolom. Di tab menu “Insert” lihat
pada drop down, klik “Table”.




            Copyright © 2009 – www.caramembuatwebsite.com
                                                                       22


Untuk tabel ini, pilih dua kotak (kolom). Kolom adalah pada sumbu
horisontal, sedangkan baris pada sumbu vertikal.




Anda perlu memperbaiki tabel yang tercipta, untuk menghilangkan garis
pinggir (border), juga untuk meletakkan gambar secara pas, terutama
jika lebar gambar lebih kecil dari lebar kolom tabel. Klik cursor didalam
cell dari tabel dimana anda ingin meletakkan gambar.




            Copyright © 2009 – www.caramembuatwebsite.com
                                                                          23


Pada tab menu “Table” klik pada drop down menu “Table Properties”.




Biarkan “Width” dengan “100” (1), dan pada pilihan kebawah di “% of
cell” (2). Lalu tentukan Border “0” pixels (3), dan padding isikan 5 pixels
(4) untuk memberikan jarak antara gambar dengan teks. Lalu, klik tab
“Cells” di sebelah kanan tab “Table”.




             Copyright © 2009 – www.caramembuatwebsite.com
                                                                    24


Tentukan “Width” atau lebar cell (1) sama dengan lebar gambar (image)
yang anda akan letakkan pada cell ini. Kemudian Klik “Ok”.




Menyisipkan Gambar

Letakkan cursor anda di dalam cell dimana gambar akan disisipkan, dan
pada menu tab “Insert” pada drop down menu, klik “Image”.




            Copyright © 2009 – www.caramembuatwebsite.com
                                                                     25


Kotak “Image Properties” muncul. Klik “Choose File”.




Dari folder images yang sudah ditentukan diawal tadi, pilih gambar yang
anda inginkan dan klik dua kali. Bisa juga dengan klik gambar yang
anda pilih sekali, lalu klik tombol “Open”.




            Copyright © 2009 – www.caramembuatwebsite.com
                                                                      26


Gambar dengan jalur/pathnya akan ditampilkan di Image Location (1).
Ketikkan alternative teks/keterangan mengenai gambar anda di kotak
isian “Alternate text” (2). Dan Klik “Ok”. (3).




Tuliskan Sebuah Keterangan Dibawah Gambar Anda

Keterangan di bawah gambar adalah cara yang baik untuk mendapatkan
perhatian pembaca, sama seperti kita selalu membaca keterangan di
bawah gambar pada majalah. Setelah menyisipkan gambar, cursor anda
akan ada di belakangnya (1). Klik Enter pada keyboard dan tuliskan
sebuah keterangan gambar. (2)




            Copyright © 2009 – www.caramembuatwebsite.com
                                                                      27



Tuliskan Teks Di Body Halaman Website Anda

Untuk mengisikan teks di halaman utama website – cerita anda –
letakkan cursor di dalam cell dimana anda ingin teks diletakkan dan
mulai menulis.




            Copyright © 2009 – www.caramembuatwebsite.com
                                                                     28


Membuat Kalimat Berupa Order List ( Daftar )

Untuk menunjukkan manfaat atau point-point utama, sebuah daftar
urutan adalah cara yang sangat baik untuk mendapatkan perhatian dari
pembaca. Menggunakan gambar – seperti tanda checkmark – menarik
perhatian lebih besar lagi ke daftar anda.

Gambar checkmark sudah saya sertakan di Bonus: Gambar Instan.

Untuk mengontrol letak dari gambar dan kalimat – dan menjaganya
tetap rapi – sebuah tabel dengan dua kolom dan banyak baris sangat
diperlukan.

Letakkan kursor dimana anda ingin meletakkan daftar manfaat (1), lalu
klik “table” pada tab menu “Insert”. (2). Pilih dua kolom dan sejumlah
baris sesuai dengan banyaknya manfaat yang anda miliki. (3).




            Copyright © 2009 – www.caramembuatwebsite.com
                                                                       29




Letakkan kursor di sebelah kiri cell paling atas (1) dan klik “Table
Properties” di menu tab “Table” drop down menu. (2




Seperti sebelumnya, biarkan “Width” dengan “100” (1), dan pada pilihan
kebawah di “% of cell” (2). Lalu tentukan Border “0” pixels (3), dan
padding isikan 5 pixels (4) untuk memberikan jarak antara gambar
dengan teks. Lalu, klik tab “Cells” di sebelah kanan tab “Table”.




             Copyright © 2009 – www.caramembuatwebsite.com
                                                                      30




Tentukan lebar dari gambar checkmark “Width” adalah: 63 pixels (1).
Klik “Ok” (2).




Dengan kursor masih di sebelah kiri atas cell, klik “Image” di tab menu
“Insert” drop down menu.




            Copyright © 2009 – www.caramembuatwebsite.com
                                                                       31


Pilih gambar checkmark yang anda inginkan, berikan keterangan
alternative pada “Alternate text”, lalu klik “Ok”.




Untuk mempercepat proses memasukkan gambar checkmark kedalam
setiap cell, anda bisa melakukan copy dan paste. Caranya, klik kanan
pada gambar checkmark yang ada di cell pertama, kemudian klik
“Copy”.




            Copyright © 2009 – www.caramembuatwebsite.com
                                                                        32


Letakkan kursor anda di cell dibawah cell berisi gambar checkmark (1).
Klik kanan dan klik “Paste” (2). Ulangi proses ini sampai semua cell kiri
terisi gambar.




Di cell sebelah kanan dari tabel, anda hanya perlu mengisikan kalimat
daftar manfaat tentang produk/jasa anda.




             Copyright © 2009 – www.caramembuatwebsite.com
                                                                 33



Mengisikan Tombol Order di Tengah Website

Tombol order kelihatan bagus bila ada di tengah-tengah halaman
website. Untuk membuatnya cukup mudah, hanya dengan sebuah tabel.
Letakkan kursor anda di bagian halaman dimana anda ingin meletakkan
tombol order.




Kali ini anda hanya perlu menggunakan 1 kotak saja.




            Copyright © 2009 – www.caramembuatwebsite.com
                                                                                34



Dengan kursor diletakkan di dalam tabel (1), Klik “Table Properties” dari
menu drop down “Table” (2).




Untuk Tabel ini, tentukan Width “10” (1), pada bagian unit biarkan “%
off cell” (2), tentukan border “0” pixels (3), Table align “Center” (4). Klik
“Ok” (5).




             Copyright © 2009 – www.caramembuatwebsite.com
                                                            35



Untuk mempermudah meletakkan kode tombol order anda, maka
tuliskan “ORDER” atau “KLIK ORDER UNTUK PEMESANAN” --
Semuanya dengan huruf besar.




           Copyright © 2009 – www.caramembuatwebsite.com
                                                                       36


Tanda Tangan
Dengan menggunakan scanner dari tanda tangan asli anda, anda dapat
mempunyai gambar tanda tangan elektronik yang dapat dipergunakan
untuk website anda secara online.

Selain menggunakan Scanner, anda juga dapat membuat tanda tangan
secara gratis di: http://www.mylivesignature.com

Tanda tangan yang saya pergunakan pada panduan ini, saya buat di
mylivesignature.com itu. Anda tidak perlu mendaftar atau membeli
apapun. Anda langsung dapat membuat tanda tangan online anda,
seperti saya.

Karena gambar tanda tangan ini akan diletakkan di sebelah kiri, anda
tidak membutuhkan tabel untuk mengontrol posisinya.

Anda tinggal meletakkan kursor anda di halaman website dimana anda
ingin meletakkan gambar tanda tangan anda tadi (1), lalu klik “Insert”
kemudian pada menu drop down klik “Image” (2).




            Copyright © 2009 – www.caramembuatwebsite.com
                                                                       37



Pilih Gambar Tanda Tangan yang akan anda pergunakan, isikan
Alternate text lalu klik “Ok”.




Memformat Font Website Anda

Headline

Headline dari website anda perlu perhatian lebih supaya ia kelihatan
berbeda dan menarik perhatian pengunjung website anda. Pilih (blok)
teks dari headline anda.




            Copyright © 2009 – www.caramembuatwebsite.com
                                                                     38



Pada tab menu “Format” drop down menu “Paragraph” (1), lalu geser ke
sebelah kanan akan tampil drop down menu lainnya, klik “Heading 1”
(2).




Lalu Tentukan Jenis Huruf (Font). Untuk Headline, jenis huruf san-serif
– seperti Tahoma – adalah paling bagus. Pada “Format” drop down
menu, pilih “Font” (1), lalu geser ke kanan pada drop down menu, cari
dan klik “Tahoma”. (2).




            Copyright © 2009 – www.caramembuatwebsite.com
                                                                    39



Untuk merubah warna teks header, pada menu tab “Format” klik pada
menu drop down “Text Color”




Lalu pada kotak palete warna pilih dan klik warna yang anda inginkan
(1), kemudian klik ok (2). Oyah untuk warna header yang paling bagus,
menggunakan merah tua.




            Copyright © 2009 – www.caramembuatwebsite.com
                                                                       40


Lalu buat Headline anda rata tengah dengan klik “Align Center” pada
icon di toolbar sesuai gambar di bawah ini. Pastikan teks headline masih
terseleksi.




Jika Headline anda terlalu dekat dengan tabel di bawahnya, maka klik
enter untuk menambah jarak.




            Copyright © 2009 – www.caramembuatwebsite.com
                                                                  41



Body Teks

Body teks lebih mudah dibaca jika anda menggunakan jenis huruf
seperti – Georgia. Anda tidak dapat merubah jenis huruf dari semua
tulisan yang ada di body website sekaligus, namun anda dapat merubah
jenis huruf di masing-masing cell terlebih dahulu.

Pilih hanya body teks saja, tidak termasuk Sub Heading.




            Copyright © 2009 – www.caramembuatwebsite.com
                                                                    42



Pada menu tab “Format” lalu drop down menu -- “Font” (1), dan geser ke
kanan akan keluar drop down menu pilih “Georgia” (2).

Ulangi hal diatas untuk semua body teks di halaman website anda.




Caption (tulisan dibawah gambar)
Caption harus kelihatan sedikit berbeda dengan teks body lainnya, anda
bisa menggunakan jenis huruf sans-seriff – seperti Verdana atau
Tahoma. Caranya, sorot (blok) tulisan pada caption.




            Copyright © 2009 – www.caramembuatwebsite.com
                                                                       43


Catatan: Untuk desain website yang baik, sebaiknya anda tidak
menggunakan lebih dari 3 jenis huruf. Dalam contoh kali ini, saya
menggunakan Tahoma untuk Heading dan Sub-heading, Georgia untuk
body teks dan Verdana untuk Caption.

Ini akan memberikan tampilan website yang profesional.

Pada menu tab “Format”, sorot “Font” (1), geser ke kiri, pada menu drop
down yang muncul klik “Verdana” (2).




Secara “default” besarnya huruf agak kebesaran untuk caption, untuk
itu buat 1 ukuran lebih kecil, dari menu tab “Format”, sorot “Size” (1),
lalu geser ke kanan pada drop down menu yang keluar, pilih “small” (2).




            Copyright © 2009 – www.caramembuatwebsite.com
                                                                      44



Sub-Heading

Untuk keseragaman – yang akan membuat pembaca website anda
mengerti dengan mudah struktur dari website anda – sub-heading
seharusnya menggunakan jenis huruf yang sama dengan Heading. Sorot
sub heading anda.




Catatan: Bila diibaratkan sebagai tubuh, maka Heading adalah kepala
kalimat dan sub-heading leher atau bahu. Pada Heading anda bisa
menampilkan manfaat terbesar dari produk/jasa atau kenapa mereka
harus membaca lebih jauh website anda.

Sedang pada Sub-heading, anda bisa meletakkan pokok-pokok kalimat,
atau sub topik, berisi manfaat yang lain yang akan mereka dapatkan
dari produk/jasa anda.




            Copyright © 2009 – www.caramembuatwebsite.com
                                                                       45



Pada menu tab “Format” sorot “Font” (1), lalu geser ke kanan, pada drop
down menu, cari dan klik “Tahoma” (2).




Buat Sub-heading anda satu ukuran lebih besar, dari menu tab
“Format” sorot “Size” (1), geser ke kanan, pada drop down menu, cari
dan klik “large” (2).




            Copyright © 2009 – www.caramembuatwebsite.com
                                                                 46



Dengan Sub-heading masih tersorot, tebalkan Sub-heading anda dengan
mengklik tombol “B” pada toolbar.




Lalu, pada menu tab “Format” klik “Text Color”.




            Copyright © 2009 – www.caramembuatwebsite.com
                                                                         47



Karena sebelumnya anda sudah memilih warna untuk Heading yang
sama, maka pada palete warna akan tampak warna terakhir yang anda
pilih sebelumnya. Klik tombol “Last-picked color” (1), lalu klik “Ok” (2).




Mengkombinasikan Warna Huruf

Anda bisa menggunakan beberapa warna pada sebuah kalimat.

Dalam contoh dibawah, sorot tulisan “PS” lalu ulangi proses untuk
merubah jenis huruf menjadi “Tahoma” lalu tebalkan (Bold) dan buat
warnanya menjadi merah. Untuk teks berikutnya, gunakan jenis huruf
Georgia sama seperti body teks lain.




             Copyright © 2009 – www.caramembuatwebsite.com
                                                                   48



Bagian-bagian kalimat ditebalkan

Di sepanjang website anda, anda mungkin ingin menekankan poin
tertentu – untuk memastikan pengunjung anda mengetahuinya, anda
bisa menebalkan bagian-bagian kalimat tertentu.

Pilih teks yang akan ditebalkan, sorot (2), dan klik “Bold” (1).




             Copyright © 2009 – www.caramembuatwebsite.com
                                                                          49


Menyeimbangkan Posisi Cell Dalam Tabel

Pada tabel yang mempunyai beberapa kolom, cell dengan lebih sedikit
teks atau gambar yang lebih kecil, isi cell yang lebih sedikit akan turun
agak kebawah.

Letakkan kursor anda di cell yang isinya agak turun itu (1), kemudian
pada menu tab klik “Table” kemudian pada drop down menu klik “Table
Properties” (2).




Klik tab “Cells” (1), pada Content Aligment “Vertical” pilih “Top” dari
menu pilihan dengan panah kebawah (2), lalu klik “Ok”.




             Copyright © 2009 – www.caramembuatwebsite.com
                                                                     50



Dan sekarang, anda mempunyai website yang lengkap, siap di upload.




           Copyright © 2009 – www.caramembuatwebsite.com
                                                                          51



Tehnik Website Yang Lebih Advance

Seringkali anda perlu melakukan beberapa hal yang lebih sulit (advance)
dalam pembuatan website. Inilah beberapa tehnik perancangan web
yang lebih advance.

Membuat Teks Link

Untuk membuat link ke website yang lain, atau ke halaman yang lain
dalam web anda sendiri, anda perlu merubah beberapa teks menjadi
link.

Sorotlah teks yang ingin dirubah menjadi link (1), dan klik icon “Link”
pada toolbar (2).




            Copyright © 2009 – www.caramembuatwebsite.com
                                                                       52



Link Ke Website Yang Lain

Untuk me-link (link yang diklik akan menuju ke website lain di Internet),
masukkan alamat URL selengkapnya (termasuk awalan “http://”) untuk
Link Location (1).

Ketika membuat link ke website yang lain, anda biasanya ingin website
lain itu terbuka di jendela yang lain – untuk menjaga website anda tetap
terbuka di depan pengunjung. Untuk melakukannya, dibawah “Target”
klik tanda centang: “Link To Be Opened” (2). Dan pilih pada pilihan
dengan tombol kebawah “In a new window” (3). Lalu Klik “Ok” (4).

Tombol “Fewer/More Properties” (5), dapat di klik untuk membuka atau
menutup menu-menu lanjutan yang ada.




            Copyright © 2009 – www.caramembuatwebsite.com
                                                                   53



Nah kini jika anda mendekatkan mouse anda diatas teks link ini, maka
URL selengkapnya akan tampak.




            Copyright © 2009 – www.caramembuatwebsite.com
                                                                  54


Link Menuju Halaman Pada Website Yang Sama

Untuk membuat link menuju ke halaman yang berbeda di website anda
sendiri, anda perlu membuat link sederhana menuju ke file lain yang
dituju.

Klik “Choose File”




            Copyright © 2009 – www.caramembuatwebsite.com
                                                                     55



Temukan file (halaman web) yang anda ingin membuat link kesana, klik
dua kali file itu.




Catatan: Anda dapat membuat halaman website yang lain selain
halaman depan (index.html) seperti yang anda buat diatas ini. Anda bisa
menyimpan dan menamakan file yang baru sesuai yang anda inginkan.

Seperti pada contoh diatas, saya membuat sebuah file dengan nama
tentang.html dan saya membuat link dari halaman index.html ke
halaman tentang.html




            Copyright © 2009 – www.caramembuatwebsite.com
                                                                        56



Maka jalur path dari file yang anda link akan muncul di Link Location
(1).

Anda bisa memutuskan apakah anda ingin halaman yang dilink akan
terbuka di jendela yang baru, atau tidak. Jika anda memilih tidak, maka
tinggalkan “Link Is To Be Opened” tidak terpilih apa adanya (2).

Klik “Ok”. (3)




             Copyright © 2009 – www.caramembuatwebsite.com
                                                                   57



Jika anda mendekatkan mouse diatas link maka kini keluar tulisan
nama halaman lain dari website anda sendiri.




            Copyright © 2009 – www.caramembuatwebsite.com
                                                                        58



Menyisipkan Code

Seringkali, Anda perlu memasukkan kode tertentu di halaman website
anda. Misalnya anda ingin menyisipkan kode form, kode adsense (pay
per klik program yang lain), atau kode java script untuk pop up, atau
kode lainnya.

Jika aplikasi tertentu mengharuskan anda memasukkan kode tertentu
untuk dipaste kedalam halaman website anda, maka anda bisa
melakukannya dengan tiga langkah mudah.

Untuk memudahkan anda menemukan lokasi dimana kode hendak
diletakkan – pada bagian html website anda – ketikkan beberapa kata
dengan huruf besar semuanya, misalnya:”CODE HERE” (1). Lalu, klik
“Source” tab di bagian bawah Nvu editor anda (2).




            Copyright © 2009 – www.caramembuatwebsite.com
                                                                59



Turunkan kebawah (scroll) kode yang ada sampai anda menemukan
tulisan dengan huruf besar tadi. Sorot tulisan itu.




           Copyright © 2009 – www.caramembuatwebsite.com
                                                                  60



Copy code yang anda dapatkan dan paste disitu.




Catatan: Ketika anda kembalikan ke tab “Normal” untuk melihat code
yang anda sisipkan, anda seringkali tidak melihat apapun di tempat
anda memasukkan kode anda. Kode itu baru akan tampil hanya ketika
anda sudah mengupload website anda ke Internet. Hal ini karena kode
itu bekerja berdasarkan informasi yang diambil pada saat online.

Jika saat ini anda belum bekerja dengan sebuah kode apapun untuk
website anda, maka abaikan sementara langkah memasukkan code ini.




            Copyright © 2009 – www.caramembuatwebsite.com
                                                                      61


            Upload File Website Anda Dengan FTP

Menentukan Connection Anda

Untuk setiap website yang anda bangun, anda perlu melakukan setup
connection sekali saja. Setelah anda melakukan setup connection, anda
dapat dengan mudah connect (terhubung) ke domain hosting kapan saja
anda mau.

Anda membutuhkan informasi berikut yang anda terima melalui email
dari perusahaan hosting yang anda gunakan.

     Host address
     User Name
     Password

Ketiga data diatas, anda bisa dapatkan dengan membeli hosting, jika
anda belum mempunyai nama domain, maka anda bisa sekaligus
membeli hosting+domain.

Anda dapat mencari perusahaan hosting yang bagus di Indonesia
melalui search engine. Ketikkan: “hosting dan domain murah” di kotak
pencarian google.com, salah satu yang saya tahu cukup baik:
http://www.webiihost.com/

Jika anda membeli hosting ( atau + domain ), pastikan membeli di
perusahaan penyedia host dan domain yang mempunyai support yang
mudah dihubungi, baik lewat email atau telpon, bahkan sms.

Superbighosting diatas, sangat saya rekomendasikan, karena
kualitasnya sangat baik, support okay, dan harganya cukup terjangkau.




            Copyright © 2009 – www.caramembuatwebsite.com
                                                                         62




Download Software FTP Anda

Untuk mengupload website anda dengan mudah – dan dapat
merubahnya lagi belakangan – anda perlu sebuah software FTP.

FTP: File Transfer Protocol adalah metode untuk mengirimkan file ke
internet – dalam hal ini, mengupload file-file ke hosting server milik
perusahaan hosting.

WS_FTP adalah software yang mudah digunakan dan gratis yang akan
kita pergunakan untuk upload file website anda ke hosting server.

Kunjungi untuk download:
http://caramembuatwebsite.com/download/ws_ftple.zip

Anda sudah harus mempunyai winzip terinstall di komputer anda untuk
melakukan unzip file tersebut.

Jika anda tidak mempunyai winzip terinstall di komputer anda, maka
anda bisa download file berupa exe disini:

http://caramembuatwebsite.com/bonus/ws_ftple.exe

Selesai download file exe dari link diatas, carilah dimana anda
meletakkannya, dan anda akan menemukan sesuai gambar dibawah ini:




Untuk mulai installasi, klik dua kali.




             Copyright © 2009 – www.caramembuatwebsite.com
                                                                   63




Kemudian, sesuai contoh diatas, beri tanda Install WS_FTPLE lalu
lanjutkan dengan continue.




Kemudian beri tanda centang pada pilihan “A student… dstnya” Ini
maksudnya bahwa anda masih mahasiswa, dengan demikian anda bisa
menggunakan program ini secara gratis. Jika tidak, maka anda harus
membeli program versi pronya.




            Copyright © 2009 – www.caramembuatwebsite.com
                                                                      64


Saran saya, diawal anda memulai bisnis online, jika dana terbatas,
maka gunakan saja yang gratis terlebih dahulu. Jika anda sudah mulai
mendapatkan keuntungan anda bisa membeli yang pro.

Jika anda tertarik membeli yang pro langsung, maka ini alamatnya:
http://www.ipswitch.com/purchase/index.asp




beri tanda pada “location” anda bisa pilih at home, atau at school.
Kemudian klik next.




Kemudian Klik “Accept”.



            Copyright © 2009 – www.caramembuatwebsite.com
                                                                  65




Kemudian Klik “Ok”.




Selanjutnya anda akan menemukan seperti gambar diatas, dimana
WS_FTP siap dipergunakan.

Selanjutnya kita akan isikan data dari host server untuk melakukan
upload, sesuai dengan yang diberikan oleh perusahaan hosting dimana
anda membeli hosting.




           Copyright © 2009 – www.caramembuatwebsite.com
                                                                      66




Pada “profile name” isikan “nama domain anda” contoh:
BisnisLewatInternet, dalam hal ini anda bisa menyebut proyek website
anda ini apa saja. Pada kolom isian ini hanya berfungsi untuk memberi
nama saja. Jadi tidak harus berisi akhiran “.com”.

Selanjutnya pada host name/address, isikan nama host name/alamat
ftp yang diberikan oleh perusahaan hosting di tempat anda membeli
hosting.

Host name ini biasanya sama dengan alamat domain anda. Misalnya:
bisnislewatinternet.com. (Untuk lebih pastinya, lihat di email yang
dikirimkan oleh perusahaan hosting pada saat anda membeli hosting).

Pada user id, isikan username yang diberikan oleh perusahaan hosting.

Pada “password” isikan password yang diberikan.

Kemudian beri tanda centang pada “Save Pwd” (2), pada “Anonymous”
jangan diberi centang.

Kemudian klik “Apply” (3), Lalu klik “OK” (4).




             Copyright © 2009 – www.caramembuatwebsite.com
                                                                      67




Kemudian anda akan terhubung ke hosting (kotak sebelah kanan),
biasanya anda akan melihat seperti gambar diatas (tergantung dimana
anda membeli hosting). Klik dua kali pada “public_html”.

PENTING: Pastikan anda meletakkan file-file website anda pada
public_html.




Selanjutnya anda akan menemukan seperti diatas, dimana kotak
dengan dua bagian, pada sebelah kanan adalah hosting server tempat
anda meletakkan file dari website yang anda buat.

Sedangkan sebelah kiri adalah computer anda. Selanjutnya anda akan
memindahkan file website yang ada di computer anda dan
menguploadnya, atau memindahkannya ke hosting.

Carilah dimana anda meletakkan file-file website anda.


            Copyright © 2009 – www.caramembuatwebsite.com
                                                                    68




Anda bisa mengklik tanda panah berwarna hijau yang menghadap
keatas untuk mencari dimana anda meletakkan file-file html anda. Klik
terus tanda panah sampai anda menemukan folder dimana anda
meletakkannya.

Setelah ketemu, anda tinggal klik kemudian tahan dan geser ke kanan.
Atau anda bisa klik file index.html kemudian klik tanda panah kekanan,
maka proses upload akan berjalan.




            Copyright © 2009 – www.caramembuatwebsite.com
                                                                       69


Perhatikan gambar diatas baik-baik. Gambar panah yang saya lingkari
adalah untuk memindahkan file yang ada di computer ( kotak sebelah
kiri ) ke hosting ( kotak sebelah kanan ).

Jika proses upload index.html selesai, maka file index.html tersebut
akan ada di sebelah kanan (hosting).

Selanjutnya, anda ingin mengupload gambar-gambar yang ada di
website anda. Ada dua cara yang bisa anda lakukan.

Pertama, dengan membuat folder terlebih dahulu, namakan: “images”

Penting: Dalam membuat nama folder, ataupun nama file, pastikan
menggunakan huruf kecil semuanya.

Perhatikan gambar diatas, untuk membuat folder saya klik MkDir (1).




Lalu beri nama folder yang anda buat dengan nama: “images” kemudian
klik “Ok”.

Nama folder “images” jika pada saat membuat website dengan NVU
dengan meletakkan file-file gambar anda di folder bernama images. Jika
nama folder dimana anda meletakkan gambar-gambar anda bukan
bernama “images” maka anda bisa membuat nama folder di hosting
dengan nama yang sama seperti nama folder anda meletakkan file
gambar di computer anda.

Paham yah? J

Proses penamaan folder dan pemberian nama file ini sangat penting.
Jika anda salah memberikan nama, maka kemungkinan website anda
tidak terbuka dengan sempurna.

Misalnya: gambar yang ada tidak terbuka, hal ini disebabkan dari
penamaan folder yang salah, atau meletakkan file gambar ke hosting
tidak pada tempat yang tepat.




            Copyright © 2009 – www.caramembuatwebsite.com
                                                                    70


Jika anda memperhatikan dengan baik, apa yang saya tekankan diatas,
maka seharusnya anda tidak menemukan ada masalah.




Kemudian, folder “images” yang anda buat sudah tampil, dengan nama
yang sesuai dengan apa yang diisikan tadi, kini kita siap untuk
mengupload gambar-gambar dari computer kedalam folder images.

Caranya, klik dua kali folder images diatas.




Anda kemudian akan menemukan gambar diatas, pada kotak sebelah
kanan adalah isi dari folder “images” yang anda buat, karena belum ada
gambar yang anda upload isinya masih kosong.


            Copyright © 2009 – www.caramembuatwebsite.com
                                                                      71


Sedangkan sebelah kanan, adalah folder “images” yang ada di computer
anda. Klik juga folder “images” itu dua kali.




Anda kemudian menemukan file-file yang ada dalam folder “images”
yang akan anda upload. Untuk memilih semua file, anda bisa klik
“CTRL” pada keyboard dan klik setiap file yang anda ingin upload
sampai semua file terseleksi (1). Selanjutnya klik tanda panah (2).




Lihatlah, setelah upload gambar selesai, maka antara kotak sebelah kiri
dan kanan mempunyai kesamaan satu sama lain. Mulai dari nama
folder dimana anda meletakkan gambar (saya beri tanda lingkaran),




            Copyright © 2009 – www.caramembuatwebsite.com
                                                                        72


dengan nama file gambar (1 ) dan gambar yang anda upload ke hosting
(2).

Jadi pastikan, apa yang ada di computer anda, letak dan namanya sama
dengan apa yang anda letakkan di hosting. Jika itu yang anda lakukan,
maka anda sudah melakukan hal yang benar.

Selanjutnya, pada kotak sebelah kanan, anda dapat klik tanda panah
berwarna hijau yang menghadap keatas, untuk kembali ke bagian depan
dari hosting anda.




Akhirnya, setelah upload file selesai, anda dapat melihat file index.html
dan folder images beserta isinya sekarang sudah ada di sebelah kanan.

Dan lihatlah, antara file yang ada di computer anda dengan yang ada di
server hosting posisinya hamper sama, dimana sama-sama mempunyai
folder “images” dengan isi, dan file bernama index.html.

Itu artinya proses upload sudah benar dan website anda sudah siap
dibuka di browser.

Selanjutnya luncurkan browser favourite anda dan bukalah alamat
website anda disana.

Dengan demikian proses upload file website anda dengan menggunakan
WS_FTP sudah selesai.

Untuk menutup jendela WS_FTP yang terbuka klik “Exit”.




             Copyright © 2009 – www.caramembuatwebsite.com
                                                                    73




Website Anda Kini Online

Sekarang, ketikkan URL website anda di browser anda, dan lihatlah
website anda yang baru kini online.




            Copyright © 2009 – www.caramembuatwebsite.com
                                                                     74



Kali Berikutnya
Untuk kali berikutnya, bila anda ingin memperbaiki halaman website
anda, maka anda bisa luncurkan kembali Nvu program yang sudah
terinstall di komputer anda.

Edit file halaman yang ingin anda edit. Simpan kembali. Lalu luncurkan
FTP program WS_FTP, dan upload ulang file yang anda edit.

Selamat! Anda kini sudah bisa membuat website anda sendiri dengan
menggunakan sebuah program editor yang bagus namun sederhana dan
gratis.

Anda juga sudah belajar mengupload semua file-file website anda ke
hosting server anda, sehingga seluruh dunia kini dapat mengakses
website anda, yang artinya, siapapun yang tahu alamat website anda,
mereka dapat membukanya dan membaca mengenai produk/jasa yang
anda miliki.

Anda juga bisa membuat website tentang anda, bila anda belum
mempunyai produk untuk dijual.

Tanpa produk/jasa sendiri, anda juga dapat mempromosikan
produk/jasa orang lain, dan menjadi affiliate marketer.

Apapun pilihan anda dengan website anda sendiri, kemungkinannya
menjadi tidak terbatas.

Setelah anda berhasil membuat dan mengonlinekan sebuah website,
anda dapat mengulanginya untuk website-website yang lain. Batasnya
adalah IMPIAN dan KERJA KERAS anda sendiri.


Sampai disini, Salam DAHSYAT!




            Copyright © 2009 – www.caramembuatwebsite.com
                                                                     75



Testimonial

Jika anda merasa Ebook ini membantu anda, saya akan sangat
berterima kasih jika anda dapat mengirimkan “Testimonial” Anda ke
http://caramembuatwebsite.com/support, dan jika testimonial anda
menarik, maka saya akan sertakan testimonial anda di website
caramembuatwebsite.com lengkap beserta nama dan alamat website
anda (Jika Anda sudah memiliki website).

Berikut contoh salah seorang yang sudah menggunakan panduan yang
anda juga miliki ini. Dalam 2 jam setelah memiliki panduan ini ia sudah
berhasil membuat websitenya yang pertama. Ia sama sekali belum
pernah membuat website sebelumnya. :)




Pastikan anda menyelesaikan website pertama anda, dan berikanlah
testimonial anda sekaligus anda bisa memajang alamat website anda di
bagian bawah testimonial.

Sebagian dari pengunjung website caramembuatwebsite.com akan juga
mengunjungi URL website anda, jika anda memberikan testimonial yang
menarik.

Jadi, jangan sia-siakan kesempatan ini.

Bila testimonial yang saya dapatkan sudah cukup, maka saya akan
menghapus kesempatan memberikan testimonial pada akhir panduan
ini.

Untuk menjadi semakin mahir dengan NVU, seringlah berlatih dan
jadikan NVU favourite web editor anda. Jika anda terlatih, maka kali
berikutnya anda ingin membuat website kembali, anda dapat
melakukannya dengan lebih mudah dan cepat.



            Copyright © 2009 – www.caramembuatwebsite.com
                                                                     76


Resources

http://menulissalesletter.com
Temukan Bagaimana Caranya Menulis Surat Penawaran Yang Ampuh
Dan Tidak Bisa Ditolak Untuk Menjual Segudang Produk-Produk Anda
di Internet.

http://rahasiasearchengine.com
Rahasia Bagaimana Mendapatkan sampai 750 kunjungan perhari
dengan membuat website Anda berada pada urutan atas Google dan
Yahoo.

http://membuatweb.com
Ribuan Gambar Instant, Template, Dan pernak-Pernik Tools Pelengkap
Pembuatan Website Yang Anda Perlukan Untuk Mendesain Website
Yang Profesional.

http://kerjakeras.com
Tips Dan Trik Bisnis Online Dari Kusuma. Anda Ingin Membaca Lebih
Banyak Mengenai Pengalaman Bisnis Online Saya? Kunjungi Blog Ini.

http://www.dreamstime.com/
Adalah tempat untuk mendapatkan gambar-gambar atau foto dengan
royalty free.

Royalty Free artinya, anda bisa menggunakan foto – gambar yang ada
untuk dipergunakan di website anda, ecover, untuk header, dlsbnya
sesuka anda.

Walaupun yang menjual pada website anda bukan hanya gambar,
melainkan kata-kata, namun penggunaan gambar yang professional
dapat sangat meningkatkan trust dan kepercayaan diri mereka untuk
membeli.

Saya menggunakan gambar pada website dan cover panduan ini dengan
membeli dari dreamstime.com.

Anda bisa daftar gratis dan mendownload gambar gratis disana.

Namun untuk kualitas gambar yang sangat bagus, anda perlu membeli
credit dengan credit card atau paypal, selanjutnya anda bisa
mendownload gambar yang anda inginkan ke komputer anda.

Gambar dibawah adalah contoh gambar yang saya beli di dreamstime
hanya dengan 1 kredit. (setara dengan hampir $1).


            Copyright © 2009 – www.caramembuatwebsite.com
                                                                 77




http://rumahweb.com
Tempat membeli domain dan hosting di Indonesia.




http://webiihost.com
Tempat Membeli Hosting + Domain Yang Lain, Di Indonesia. Layanannya
Baik. Sangat saya rekomendasikan.




           Copyright © 2009 – www.caramembuatwebsite.com
                                                                      78


Kedua perusahaan hosting dan domain diatas menyediakan baik domain
dan hosting. Anda bisa membelinya secara terpisah, atau sekaligus jadi
satu. ( Domain + Hosting).

Jika anda merasa masih pemula, maka saya sarankan membelinya di
satu perusahaan, sehingga anda tidak dipusingkan dengan urusan
merubah name server, jika anda membelinya terpisah.

Tips dalam memilih perusahaan domain + hosting yang baik adalah:
Support dan Uptimenya.

Anda bisa mencoba bertanya-tanya dulu ke perusahaan untuk menguji
bagaimana kualitas dan keramahan mereka.

Bila sampai pada memilih hosting, maka harga benar-benar bukan yang
terpenting. Layanan/support lah yang terpenting.

Uptime adalah kata untuk mengukur presentase sering atau tidaknya
server mereka tidak bisa diakses atau down.

Domain yang paling baik adalah yang berakhiran .com dan tanpa tanda
penghubung.

Domain yang berisi kata kunci, sangat disarankan untuk kepentingan
promosi di search engine. Lengkapnya silahkan pelajari juga rahasia
search engine di http://rahasiasearchengine.com

http://kerjakeras.com/hostgator/
Hosting luar negeri, saya sangat merekomendasikan hostgator ini.
Namun jika anda baru memulai dengan sebuah website maka saya
sarankan membeli di perusahaan hosting lokal saja terlebih dahulu.

Karena, hostgator memberikan kapasitas sangat besar, dan bisa
meletakkan sangat banyak domain sekaligus dalam sebuah hosting.




            Copyright © 2009 – www.caramembuatwebsite.com
                                                                       79




http://cheapdomain.com
Adalah tempat membeli domain murah di luar negeri. Baik Hostgator
maupun cheapdomain, pembayaran biasanya dapat dilakukan
menggunakan paypal dan credit card.

Jika anda tidak mempunyai credit card, anda masih bisa sukses
menjalankan bisnis online, dengan membeli segala keperluan online di
perusahaan local di Indonesia dengan menggunakan transfer bank.

Namun untuk memudahkan Anda kedepannya, jika mungkin, miliki
minimal sebuah Credit Card untuk transaksi di Internet.




            Copyright © 2009 – www.caramembuatwebsite.com

				
DOCUMENT INFO
Shared By:
Categories:
Tags:
Stats:
views:1282
posted:6/17/2010
language:Malay
pages:78
Description: panduan lengkap membuat website dan menguploadnya ke server