E-Book Tutorial

PANDUAN BIKIN WEB GRATIS
(Studi Kasus www.BikinWebGratis.co.cc)

Oleh :

Asnawi, ST.
asnawist@gmail.com www.asnawi.com

Dipublikasikan : www.BikinWebGratis.co.cc Ed. I - Januari Th. 2009

PERINGATAN

Hak Cipta Dilindungi Undang-Undang
- Anda BOLEH Menyebarkan E-Book Ini GRATIS dengan Cara Apapun Asal Tidak Melanggar Aturan - Dilarang Merubah/Menyalin Isi E-Book Ini Tanpa Seijin Penulis Terima Kasih, Asnawi, ST. Penulis

Halaman 2 - Tutorial Bikin Website Gratis dari www.BikinWebGratis.co.cc

Sepatah Kata dari Penulis
Assalamu ‘alaikum Wr. Wb. dan Salam Kasih bagi kita semua… Alhamdulillah senantiasa terucap di bibir ini atas berkat Rahmat dan PetunjukNya sehingga tutorial ini bisa saya hadirkan ke hadapan anda. Begitu banyak hambatan yang senantiasa menghalangi saya, namun dengan tekad dan semangat yang tak pernah pudar untuk menyelesaikan pembuatan e-book ini, sehingga hari ini bisa sampai ke tangan anda para pembaca sekalian. Tak lupa, perkenankan saya mengucapkan banyak terima kasih yang tak terhingga kepada kedua orang tuaku, H. M. Amin Latif dan Hj. St. Mas’ati, yang tak pernah berhenti mendoakan kebaikan untuk anaknya ini. Semoga mereka selalu dalam lindungan dan kasih sayang-Nya. Amin. Terima kasih tak terhingga pula saya haturkan kepada para guru, baik di dunia nyata maupun di dunia maya, yang telah banyak membantu saya dalam memahami berbagai hal dan menambah pengetahuan saya sampai saat ini. Yang tak kalah pentingnya, ijinkan saya menyampaikan ucapan terima kasih kepada anda para pembaca sekalian atas kesediaan anda mendownload dan membaca e-book tutorial yang saya beri judul “Tutorial Bikin Web Gratis” ini. E-book ini tidak ada artinya sama sekali tanpa anda. Akhirnya, semoga e-book ini bermanfaat bagi anda terutama buat diri pribadi penulis. Makassar, 20 Desember 2008 Penulis,

Asnawi, ST.
Contact: HP. 081524164371 e-mail : asnawist@gmail.com blog : www.asnawi.com Pemilik Situs : www.IklanMakassar.com www.KhususPemula.com www.PemasarGlobal.com www.BukuGratis.co.cc www.DollarsGratis.co.cc www.BikinWebGratis.co.cc

Halaman 3 - Tutorial Bikin Website Gratis dari www.BikinWebGratis.co.cc

Bahkan saat ini banyak perangkat sudah dikonvergensikan agar bisa terhubung dengan jaringan internet. dengan memanfaatkan fasilitas dan tools gratis di internet. sebutlah misalnya Anne Ahira. jangkauan yang luas ke seluruh dunia. Sebutlah Jeff Bezos si pemilik toko buku online Amazon.BikinWebGratis. Ini bukan rahasia umum lagi. Di Indonesia juga sudah muncul banyak nama. Kelebihan internet ini juga dimanfaatkan oleh banyak pengguna internet untuk menghasilkan uang dari internet. Beberapa orang muncul sebagai Milyarder karena internet. Halaman 4 . Joko Susilo. Juga semakin baiknya infrastruktur internet karena kebijakan pemerintah yang cukup mendukung. sama seperti kebutuhan orang akan sarana telekomunikasi saat ini.com sebagai salah satu multi jutawan yang berhasil memanfaatkan kekuatan internet.co. Hal ini didukung oleh semakin banyaknya fasilitas penyedia pembuatan situs baik gratis maupun berbayar. ternyata anda bisa membuat dan memiliki website professional dengan gratis. dan kecepatan menjadi kekuatan yang hanya bisa diberikan oleh internet. dan membayar web desainer untuk membuatkan situs untuk anda. Berbagai kemudahan bisa didapatkan dari internet.bikinwebgratis. sewa hosting. Padahal. Peter Kohar. Akses yang tidak terbatas 24 jam sehari. Asnawi (narsis deh… hehehe… maaf yang ini belum termasuk ). Di masa yang akan datang internet akan menjadi kebutuhan mendasar bagi setiap orang. Pernahkah anda membayangkan memiliki situs sendiri? Umumnya orang berpikiran bahwa untuk memiliki sebuah website membutuhkan biaya yang mahal.co.Tutorial Bikin Website Gratis dari www.cc . melalui e-book ini saya akan berusaha membimbing anda dari nol bagaimana membuat situs gratis dengan studi kasus situs saya sendiri www. Cosa Aranda.cc. dan kalau membuatnya sendiri cukup rumit. G. Bahkan diprediksikan bahwa bisnis masa depan sangat bergantung kepada jaringan internet. Welly Mulia.M. Semakin hari dunia internet semakin akrab dengan kehidupan masyarakat. Susanto. Anda tidak perlu beli domain.Kata Pengantar Tahukah anda syarat MUTLAK yang harus dimiliki untuk memenangkan persaingan di dunia maya? Jawabannya adalah anda harus mengetahui cara membuat website (situs) dan memiliki website itu sendiri. Saat ini ratusan bahkan ribuan situs-situs baru bermunculan setiap hari di internet. Nah. saat inipun sudah kelihatan.

maka jangan ragu silahkan kirim pertanyaan anda ke e-mail saya.cc . Namun. Saya lengkapi langkah demi langkah dengan screenshot gambar. sedapat mungkin akan saya jawab sesuai kemampuan dan pengalaman yang saya miliki. selamat belajar dan praktek … Halaman 5 .co. Akhirnya.BikinWebGratis. bila anda tetap menemui kesulitan dalam mengaplikasikan tutorial ini.Saya berusaha semaksimal mungkin agar anda dapat dengan mudah memahami dan mempraktekkan langsung apa yang saya tulis di sini.Tutorial Bikin Website Gratis dari www.

5. laki-laki atau perempuan. Target pengunjung yang diharapkan : dari dalam negeri atau luar negeri. maka saya membuat bagan alirnya sebagai berikut: Halaman 6 . Untuk situs www. dll. menjual produk. Sebagai contoh saya merencanakan situs www.cc . dll. dll. Situs jenis apa yang ingin anda buat: situs content atau minisite. Aktifitas pengunjung di situs : mengundang teman dan mendownload ebook 5. kesehatan. 2. 3. Nah setelah anda mempunyai gambaran tentang situs anda seperti di atas. Tema website anda : apakah berhubungan dengan teknologi.co. gaya hidup.co. 2. selanjutnya anda buat kerangka atau outline tentang situs yang akan anda buat. tua atau muda. 4. memajang artikel agar mudah ditemukan di search engine. menghubungkan antara satu halaman dengan halaman lainnya. pasang iklan. anda harus menentukan terlebih dahulu hal-hal sebagai berikut: 1.bikinwebgratis. Anda bisa bikin outline ini di selembar kertas dengan menggunakan pensil atau pulpen. ikut polling/survey.BikinWebGratis. pemula atau expert.cc saya rencanakan di awal sebagai berikut: 1. Tema website : situs download e-book tutorial 3. Aktifitas pengunjung di situs anda : membeli atau menitip nama dan e-mail. menjual produk atau sekadar artikel. mendownload.co. dll. 4. Target pengunjung dari dalam negeri untuk semua umur dan jenis kelamin.bikinwebgratis.LANGKAH AWAL Sebagai langkah awal dalam membuat sebuah situs. pakai bahasa html atau php. Cara yang biasa saya gunakan adalah seperti membuat bagan alir (flowchart). Tujuan yang ingin dicapai : membangun list dan kredibilitas. dll. Situs jenis minisite dengan tampilan desain minimalis dan menggunakan bahasa pemrograman html (statis).cc ini menggunakan 5 (lima) halaman.Tutorial Bikin Website Gratis dari www. Tujuan atau manfaat situs tersebut buat anda : membangun list.

co. 3. Nama (domain) untuk memanggil/menampilkan situs anda di browser internet. bagan alir juga dapat mempermudah pemeliharaan dan update (pembaharuan) isi atau content situs setiap saat apabila dibutuhkan. Di samping itu.cc . Desain tampilan dan content (isi) yang akan dilihat oleh pengunjung Halaman 7 . Lahan (hosting) untuk menyimpan file situs anda 2. Selanjutnya agar situs anda bisa online dan diakses dari seluruh dunia maka anda membutuhkan: 1.BikinWebGratis.Tutorial Bikin Website Gratis dari www.Home Download Kontak Trims Respon Iklan Dengan adanya bagan alir ini akan sangat membantu untuk memvisualisasikan isi setiap halaman dan navigasi antara halaman-halaman web yang akan dibuat.

Mengumpulkan atau membuat gambar (image) yang akan ditampilkan di web. Microsoft Frontpage 2003 untuk membuat dan mengedit halaman web. yaitu www.cc . untuk itu saya mencari situs yang menyediakan template minisite gratis di Google.Tutorial Bikin Website Gratis dari www. 4. 2. Mencari script yang mendukung. Dari beberapa situs hasil pencarian google.BikinWebGratis.co. Seperti yang saya uraikan sebelumnya bahwa saya ingin membuat situs jenis minisite. sekarang saya ingin tunjukkan bagaimana cara saya mendapatkan template gratis yang cocok dengan website yang ingin saya rancang.TAHAP PERANCANGAN WEBSITE Sebelum merancang website. True Box Shot untuk membuat cover e-book. Nah.minisitegallery. Saya sendiri menggunakan : 1. akhirnya saya memilih salah satu situs penyedia template gratis yang memenuhi kriteria yang saya harapkan. 3. ada beberapa hal yang perlu anda lakukan : 1. Macromedia Fireworks dan Corel Photopaint untuk mengedit image (gambar). Mengumpulkan atau membuat materi/isi (content) web. 3. Situs ini menyediakan template minisite dengan desain professional dan bernilai jual tinggi tapi tetap diberikan gratis. Lalu anda siapkan juga program atau software yang akan membantu anda membuat dan mengedit website anda. 2. Halaman 8 . Merancang desain web atau mencari template gratis di internet.com.

Klik link “Register” untuk melakukan pendaftaran terlebih dahulu.BikinWebGratis. Saya memilih salah satu di antaranya. 4. Lalu akan terbuka halaman login wordpress untuk melakukan pendaftaran seperti pada gambar berikut. Buka www. Cara mendownload Template : 1. Halaman 9 . 5.Pada saat e-book ini saya buat.co.minisitegallery. yaitu template dengan nama “Aggressive Blue”. Klik “details” dari template tersebut. maka akan muncul halaman baru yang menguraikan lebih detail tentang template tersebut. A. jumlah template minisite gratis yang tersedia di situs tersebut adalah 15 buah. Bawa kursor ke atas gambar template yang anda ingin download 3.com 2.cc .Tutorial Bikin Website Gratis dari www. Bila anda sudah pernah mendaftar sebelumnya cukup klik link “logged in” untuk login dan mendownload template yang diinginkan.

Masukkan alamat e-mail anda yang masih aktif. Klik Link ini utk download 15. Klik tombol “Register” untuk mengirimkan pendaftaran anda. dan password sementara.co.minisitegallery.Tutorial Bikin Website Gratis dari www. Silakan masukkan username dan password sementara pada kotak isian yang tersedia.com dan mendownload template yang anda inginkan. Untuk contoh di sini saya mendapatkan file template “aggressiveblue.zip”. Blok dan copy password sementara tersebut. B. Masukkan “Username” yang anda inginkan ke kotak isian username. Sebaiknya buat folder khusus agar memudahkan anda dalam mencarinya.php yang disertakan dalam e-mail tersebut. 8. lalu ekstrak file template tersebut ke folder komputer anda. 12. saya mengekstrak template “aggressive-blue. Masukkan angka pada kotak isian.com] Your username and password. Sebagai contoh. 7. Langkah pertama yang harus anda lakukan adalah mengganti password sementara tersebut dengan password baru yang anda tentukan sendiri. Anda akan mendapatkan username sesuai yang anda daftarkan. lalu akan terbuka halaman login wordpress.BikinWebGratis. Cara Merancang Web dengan Template 1. 13.6.zip”.zip” dan saya mendapatkan 2 Halaman 10 .com/wp-login. 11. 10. Setelah anda mendapatkan file template. 9. 14. Selanjutnya cek e-mail anda dan cari subject e-mail seperti ini : [MiniSiteGallery. masukkan angka 8 karena 7 + 1 = 8. Selanjutnya anda kembali ke situs www. karena mereka akan mengirimkan data login serta password anda ke alamat e-mail yang anda daftarkan tersebut. isi dengan password baru anda lalu klik tombol “Update Profile”. Anda akan mendapatkan file dengan nama seperti “namatemplate. Klik menu “Your Profile” lalu geser layar ke bawah dan temukan kotak isian “New Password”.cc . Selanjutnya anda akan login ke halaman member area. Pada contoh gambar di atas. Klik link minisitegallery.

Yang diperlukan di sini adalah folder images.html) dengan cara copy n paste sebanyak jumlah halaman yang ingin anda buat.cc .folder. dst.html”.BikinWebGratis. Ini diperuntukkan bagi anda yang ingin merubah atau mengedit tampilan menggunakan program Photoshop.html” untuk melihat tampilan minisite tersebut dengan mengklik dua kali file tersebut. 2.psd. Anda akan mendapatkan nama file baru seperti copy of template. Di sinilah manfaat bagan alir yang pernah kita buat sebelumnya.html. Saya sendiri tidak menggunakan Photoshop untuk mengedit image sehingga file psd ini saya hapus saja. lalu file “copy of template” ganti namanya menjadi Halaman 11 . Silahkan buka file “template. 4. dengan nama halaman yang akan anda buat. 1 file css. Maka akan tampak tampilan seperti berikut ini. file style. Selanjutnya anda tutup window tampilan tersebut lalu gandakan file (template. sehingga kita bisa tahu berapa jumlah halaman yang akan dibuat. Selanjutnya anda rename (ganti nama) file tersebut. copy (2) of template.Tutorial Bikin Website Gratis dari www. copy (3) of template. dan file template. Halaman utama (depan) HARUS diberi nama “index. dan 1 file html.co.css. 3. Sedangkan folder “psd” berisi file desain situs dan image cover e-book dalam format .

Sebagai contoh saya mengganti (mengedit) file header dan cover e-book agar sesuai dengan tampilan yang saya inginkan. Setelah semuanya dirasa lengkap. Pertama-tama buka file “index. Frontpage 2003 yang saya gunakan. Jangan lupa. Saya sering ditanya tentang hal ini. Meskipun file gambar tersebut sudah ada di komputer anda di folder lain.BikinWebGratis. Halaman 12 .“download”. mengumpulkan semua file gambar yang akan ditampilkan di web pada folder “images”. hasilnya seperti pada gambar berikut. Ini tampilan awal dari template : Ini tampilan baru setelah diedit : 7. Anda juga dapat mengedit dan atau mengganti file gambar yang ada di folder images tersebut sebagai bawaan template awal. mengapa gambarnya tidak tampil di website padahal waktu dibuka di komputer semua gambar tampil sempurna. 6.co. ini harus anda perhatikan baik-baik. tibalah saatnya mengedit dan mengisi halaman web template dengan content hingga tercipta website seperti yang diinginkan. Ganti materi/isi template dengan kata atau kalimat yang anda inginkan. anda tetap harus meng-copy file gambar tersebut lalu pindahkan ke folder “images” ini.html” menggunakan program web creator seperti MS. File gambar anda tidak akan ditampilkan di web apabila gambar anda berada di folder lain. Dan hasilnya bisa tampak seperti pada gambar berikut.Tutorial Bikin Website Gratis dari www. sehingga saya mendapatkan hasil seperti pada gambar berikut: 5.cc . dst.

dan nama domain untuk memanggil file tersebut agar bisa tampil di browser internet. Jika dirasa ada yang perlu diperbaiki.Tutorial Bikin Website Gratis dari www. Periksa juga kata demi kata. Lalu anda edit file html lainnya sesuai dengan isi dan tampilan yang anda inginkan. Halaman 13 . Sebaiknya anda menggunakan menu link untuk membuat hubungan antar halaman seperti tampak pada gambar berikut. paragraph demi paragraph.cc . apakah sudah sesuai dengan kaidah yang baik dan benar atau masih perlu perbaikan. setelah melalui tahap-tahap di atas… sekarang waktunya untuk mengonline-kan website anda.co. lalu perbaiki seperlunya. kalimat demi kalimat. 9. Klik link-link yang anda buat apakah semuanya terhubung dan tidak ada lagi error link. maka anda buka kembali file tersebut di Frontpage. Hubungkan halaman satu dengan halaman lainnya dengan menggunakan “Hyperlink” (gunakan menu Insert > Hyperlink). Untuk itu anda memerlukan lahan (webhosting) untuk menempatkan semua file yang telah anda buat tersebut.html. Setelah dirasa semua sudah OK. sebelum mengupload ke web hosting sebaiknya anda tes dulu untuk mengetahui apakah situs tersebut telah berfungsi sebagaimana mestinya.BikinWebGratis. Nah.8. Silahkan klik dua kali file index.

Berikut adalah beberapa penyedia nama domain gratis di internet: 1. Sedangkan “dot. Cara Mendapatkan Domain : 1.MEMILIH NAMA DOMAIN Apalah arti sebuah nama. Begitu pujangga William Shakespeare menisbikan arti penting nama dalam kehidupan. lalu ketikkan nama domain yang anda inginkan di kotak isian yang tersedia.bikinwebgratis.nr” hanya berfungsi sebagai redirect url.BikinWebGratis. Untuk memiliki nama domain. mudah dilafalkan atau diucapkan.nr 2. Nama domain (domain name) selain sebagai alamat anda di cyberspace. mudah untuk diingat. ia sekaligus juga berperan sebagai brand bisnis atau diri Anda.cc Dari ketiga penyedia nama domain tersebut. www. saya paling menyukai “co.cc” karena adanya fasilitas DNS server sehingga bisa di add-on ke web server yang kita gunakan.co.namadomain. lalu klik tombol “Check availability” untuk mengecek apakah domain yang anda inginkan belum diambil/ didaftarkan oleh orang lain.domain. pujangga romantis ini ternyata tidak sepenuhnya benar. format nama domain yang anda dapatkan adalah www.co. anda bisa memilih yang berbayar atau gratis.co.co. Halaman 14 .co.co.tk” dan “co. namun sebagai pemula tidak ada salahnya memanfaatkan fasilitas domain gratis seperti yang akan saya uraikan lebih lanjut melalui e-book ini.cc.co. Buka www. nama menjadi sangatlah penting. www. Dalam tutorial ini hanya akan saya jelaskan cara mendapatkan domain gratis dari www. Yang berbayar tentu memiliki berbagai kelebihan.cc. Namun. contohnya : www. Karena pentingnya nama di dunia maya.cc . unik. dan mengandung keyword yang anda target.Tutorial Bikin Website Gratis dari www. www.cc.cc. maka sangat disarankan untuk memilih domain name yang singkat.dot. Dalam dunia bisnis online.tk 3.

co.BikinWebGratis.Cek domain yang anda inginkan di sini ! 2. maka akan tampil di halaman berikutnya penyampaian bahwa domain tersebut masih “available” untuk anda seperti pada gambar berikut: 3. Jika domain name tersebut belum diambil atau didaftarkan oleh orang lain. Klik di sini untuk daftar Halaman 15 .Tutorial Bikin Website Gratis dari www.cc . Klik tombol “Continue to registration” maka akan terbuka halaman untuk melakukan pendaftaran (bagi member baru) atau login bagi member yang sudah memiliki account.

Isi semua kotak isian terutama yang ada tanda  itu berarti harus diisi.BikinWebGratis. terutama alamat e-mail.cc . Jangan lupa centang di sini! 5.4. yang lain optional aja boleh tidak diisi. Isilah data sesuai dengan data sebenarnya. Halaman 16 .Tutorial Bikin Website Gratis dari www. Selanjutnya akan muncul pemberitahuan bahwa account anda berhasil dibuat. Jangan lupa centang pada “I accept the Terms of Services” sebelum mengklik tombol “Create an account now”.co. Lalu akan terbuka halaman formulir pendaftaran seperti berikut ini. 6.

cc . Halaman 17 .Tutorial Bikin Website Gratis dari www. Anda harus men-setting domain anda paling lambat 48 jam setelah pendaftaran tersebut diterima. 1 yaitu “Manage DNS” maka akan terbuka kotak isian untuk memasukkan kode DNS webhosting yang digunakan. Klik pada pilihan no. akan terbuka halaman baru seperti berikut. Klik tombol “Set up” untuk men-setting domain anda.7. Klik tombol “OK” untuk mengakhiri. Isilah pada kotak isian tersebut dengan “ns1. DNS ini mengacu kepada webhosting gratisan yang akan kita gunakan untuk menempatkan file web kita.org” seperti pada gambar berikut.byet. 9. Akan keluar halaman baru yang menyatakan bahwa anda telah melakukan perubahan pada settingan domain anda.org” dan “ns2. Sebaiknya anda langsung setting pada saat itu juga.co. 8.byet. Terakhir klik tombol “Set up” untuk mengakhiri proses setting domain anda.BikinWebGratis.

co.Tutorial Bikin Website Gratis dari www. Halaman 18 .Nah.120.65.. Untuk itulah anda harus segera merancang website anda. sekarang anda telah memiliki nama domain yang cukup keren dan semiprofesional dengan biaya nol rupiah.BikinWebGratis. maka domain anda otomatis dinon-aktifkan dan bisa diambil oleh orang lain yang mendaftar kemudian.000. bila dalam 30 hari web anda yang menggunakan domain tersebut belum anda online-kan.. Namun. Bandingkan bila anda beli domain berbayar.yang dibayar per tahun. seperti yang sudah saya jelaskan sebelumnya. lalu anda upload ke webhosting gratisan yang akan saya jelaskan berikut ini. maka anda harus merogoh kocek antara Rp.cc” bahkan anda bisa mendapatkan 2 (dua) domain gratis untuk setiap alamat e-mail yang anda daftarkan.sampai Rp.cc .000. Di “co.

BikinWebGratis. 9. dan berbagai fitur lainnya. Sebelum mendaftar. Web hosting atau web server adalah tempat untuk menyimpan file website yang kita buat agar bisa ditampilkan di internet. Lalu buka situs www. Kapasitas space yang cukup besar untuk menyimpan file yakni sebesar 243 MB.Tutorial Bikin Website Gratis dari www. 3. jangan menggunakan browser Internet Explorer. Klik tombol ini untuk mendaftar Halaman 19 . Fasilitas addon domain dan parked domain 8. Pada tutorial ini saya akan menguraikan bagaimana mendapatkan fasilitas webhosting gratisan semi professional dengan berbagai fitur yang hampir sama dengan yang berbayar. yakni ada hosting berbayar dan ada pula hosting gratisan.com akan terbuka halaman seperti berikut ini. Dari segi biaya. Bandwidth bulanan yang cukup besar yakni sebesar 20 GB lebih.co. Support PHP dan MySQL 5. pastikan anda menggunakan browser Mozilla Firefox. Adapun fitur-fitur tersebut di antaranya: 1.cc . Automatic Script Installer yang mirip dengan Fantastico di hosting berbayar 6. webhosting juga terbagi dua.byethost. Cara Mendapatkan Account Hosting di ByetHost. Gratis unlimited e-mail 7. Support FTP transfer menggunakan software FTP Client.com : 1. Vista Control Panel yang mirip dengan cPanel pada hosting berbayar 4.MEMILIH WEB HOSTING Web hosting adalah salah satu komponen utama yang diperlukan agar file kita bisa diakses melalui web browser. 2.

3.co. 4.cc .Tutorial Bikin Website Gratis dari www. Ketik Captcha di sini ! Halaman 20 . Kalau muncul halaman berikutnya seperti gambar berikut. terutama alamat e-mail anda. Klik tombol “Not a member” berwarna hijau seperti pada gambar di atas.2. Klik tombol “Register” untuk melanjutkan ke step berikutnya.BikinWebGratis. maka langsung klik tombol “Click Me To Continue” untuk melanjutkan ke langkah berikutnya. 5. Isi formulir pendaftaran sesuai dengan data yang sebenarnya. lalu akan terbuka formulir pendaftaran. Setelah itu akan muncul captcha untuk mencegah pendaftaran ilegal. masukkan 2 kata tersebut ke kotak isian yang tersedia.

maka anda akan mendapatkan data byethost anda seperti berikut ini. Dan harus diingat pula agar data tersebut terutama password tidak dilihat oleh siapa pun. Bila pendaftaran anda diterima. simpan baik-baik data ini di komputer anda.com. Klik di sini untuk download data hosting panel byethost anda! 7. Sekarang anda telah memiliki lahan (hosting) di dunia maya. Jangan lupa menyimpan atau mencatat data-data tersebut karena akan digunakan selamanya.cc” dan byethost maka kita gunakan fasilitas add-on domain di byethost.BikinWebGratis.6. Halaman 21 . Langkah selanjutnya adalah menghubungkan domain anda dengan web hosting anda. Klik tombol “Register” untuk mengirimkan formulir pendaftaran anda.co.Tutorial Bikin Website Gratis dari www. Untuk menghubungkan domain “co.cc . Jadi.

lalu klik tombol “Login” untuk masuk ke Vista cPanel anda.com dimana XX adalah angka acak yang diberikan otomatis oleh byethost. lagipula kita sudah daftarkan domain di “co. Klik gambar ini untuk memunculkan kotak isian “Username” dan “Password” 2. Login ke Vista cPanel anda. Cara Mengkoneksikan Domain (add-on domain) dengan Web Hosting : 1. Username control panel adalah username yang diberikan oleh ByetHost pada saat mendaftar.cc” saja. Selanjutnya anda akan dibawa masuk ke halaman Vista cPanel anda seperti pada gambar berikut. formatnya seperti ini bXX_XXXXXXX dimana X adalah angka acak.co. maka saya diberikan alamat sub-domain menjadi http://bikinsitusgratis. Contoh : pada saat saya mendaftar.BikinWebGratis.byethost. Alamat ini terasa kurang professional. buka www. saya menggunakan username = bikinsitusgratis.com lalu klik menu “Member Login Here” seperti pada gambar berikut.byethost32.com. Jadi lebih baik menggunakan domain semi-profesional dari “co.ADD-ON DOMAIN Secara default anda akan mendapatkan alamat sub-domain gratis dari byethost seperti ini http://username-anda-saat-daftar. Halaman 22 . Masukkan username control panel dan password anda pada kotak isian yang tersedia.com.cc .cc”.byethostXX.Tutorial Bikin Website Gratis dari www.

cc . Akan terbuka halaman baru dengan kotak isian untuk memasukkan domain anda seperti pada gambar berikut. Ketik domain anda tanpa menggunakan http dan www.cc”.Di sebelah kiri (yang berwarna biru) adalah data informasi account webhosting anda. sedangkan sebelah kanan adalah menu-menu untuk mengelola webhosting anda. Masukkan domain “co. Di bagian atas ada iklan banner dan di tengah-tengah ada penawaran untuk meng-upgrade account anda menjadi Premium Hosting. Ketikkan nama domain “co.BikinWebGratis. Selanjutnya Halaman 23 .cc” anda di kotak isian yang tersedia lalu klik tombol “Create Domain”.cc” anda disini! 5. Iklan penawaran ini diabaikan saja  3.Tutorial Bikin Website Gratis dari www. Klik di sini untuk addon domain 4. contohnya saya ketik “bikinwebgratis.co. Selanjutnya anda klik menu “Addons domain” pada bagian Domains seperti pada gambar di bawah ini.co.

Halaman 24 . Nah.Tutorial Bikin Website Gratis dari www.akan muncul nama domain tersebut seperti pada gambar berikut.cc . setelah melalui langkah-langkah di atas berarti anda telah memiliki tempat hosting dan domain name sebagai alamat anda di dunia maya. Anda bisa add-on domain sampai 5 (lima) buah dalam 1 (satu) account webhost.BikinWebGratis. Sekarang saatnya memasukkan (upload) file web ke server hosting anda agar situs anda segera online.co.

Yang muncul hanya gambar kotak segi empat yang mengurangi keelokan tampilan website kita. anda bisa gunakan software gratisan seperti FileZilla atau SmartFTP. langkah selanjutnya adalah memindahkan file situs yang telah anda rancang di komputer ke web hosting tersebut. Di e-book ini saya hanya akan menjelaskan cara mengupload file tanpa menggunakan software.cc . Untuk meng-upload file.co.MENG-UPLOAD FILE KE SERVER HOSTING Setelah anda memiliki hosting dan domain.co. File-file yang akan ditempatkan satu folder di web. Nah. ada file gambar yang tidak ikut atau lupa diupload. Kalau mau pakai software FTP.cc” yang akan saya upload sbb: Halaman 25 . anda bisa menggunakan 2 (dua) cara. cukup melalui file manager saja. maka otomatis di web kita tidak akan tampil gambar tersebut. tetapi ini tidak perlu anda lakukan karena makan waktu dan cukup repot.BikinWebGratis.Tutorial Bikin Website Gratis dari www. silahkan cari panduan cara menggunakan software tersebut di google. Dan juga kalau kita upload file satu demi satu terkadang ada file yang terlupakan sehingga tentu saja website kita tidak akan tampil sebagaimana yang diharapkan. agar itu tidak terjadi maka sebaiknya kumpulan file web tersebut kita kompres atau di-zip terlebih dahulu sebelum diupload. Misalnya. di-zip menjadi 1 (satu) file saja. yaitu dengan menggunakan software FTP client dan atau tanpa menggunakan software (upload langsung menggunakan fasilitas file manager di vista control panel byethost.com). Cara yang biasa dilakukan adalah mengupload file satu demi satu secara manual ke server byethost. Proses pemindahan atau transfer file dari komputer ke jaringan internet ini disebut upload. Contoh file web “bikinwebgratis.

htm .htm . 2.zip” akan saya tempatkan pada folder khusus yang saya beri nama “download” di server nantinya.Tutorial Bikin Website Gratis dari www.htm . Halaman 26 .File respon. Harus diingat bahwa kompresi yang anda lakukan harus berekstensi dot zip (.File style. File-file dan folder images tersebut saya zip dan beri nama file “uploadnow.co.css Sedangkan file e-book dengan nama file “tbwg. file-file dan folder yang akan ditempatkan di folder utama di atas kita pilih semua lalu di-zip menggunakan program WinZip/WinRAR atau program kompresi lainnya.htm .Folder images (berisi beberapa file gambar) .zip” seperti tampak pada gambar berikut : Cara Mengupload File ke Server ByetHost : 1.zip) bukan dot rar (.rar). Saya sendiri menggunakan WinRAR.cc .File index. Login ke Vista cPanel Byethost anda. Nah. Setelah masuk ke control panel.BikinWebGratis. klik menu “File manager” di bagian FTP Manager atau Site Management (lihat kotak merah di gambar).File download.htm .File yang akan saya upload di folder utama : .File kontak.File trims.

Selanjutnya anda akan dibawa ke halaman file manager seperti pada gambar berikut. contohnya domain yang saya add-on adalah bikinwebgratis. Klik directory “htdocs” maka akan terbuka halaman baru seperti pada gambar berikut. Klik link directory yang tertulis nama domain yang telah anda masukkan (add-on domain). Ini tombol upload 6.BikinWebGratis.co.co.3. Di directory htdocs inilah tempat semua file untuk situs bikinwebgratis. Ini link directory htdocs 5. Ini directory domain bikinwebgratis.cc. Lalu akan terbuka halaman baru seperti pada gambar berikut. klik tombol “Upload” lalu akan terbuka halaman upload seperti pada gambar berikut.co.cc 4.co.cc akan ditempatkan.Tutorial Bikin Website Gratis dari www. Nah sekarang untuk mengupload file web anda.cc . Halaman 27 .

pilih file lalu tekan tombol Open Halaman 28 . Sedangkan bila anda sudah zip-kan file anda (seperti yang saya lakukan) maka kita gunakan yang sebelah kanan. 7. Perhatikan gambar berikut. lalu tekan tombol open untuk memilih file tersebut. Jika anda ingin mengupload satu demi satu file. yakni file tunggal biasa seperti file html. lalu cari file zip yang akan diupload. File yang kita zip secara otomatis akan di unzip (dimekarkan/diekstrak) ke directory htdocs. gz di sebelah kanan.Tutorial Bikin Website Gratis dari www. Kalau sudah ketemu file-nya. Klik tombol “Browse.cc .co.BikinWebGratis.zip) di folder komputer kita. jpeg/gif di sebelah kiri dan file arsip seperti file zip. Tekan tombol Browse. doc..” untuk mencari file yang sudah kita zip (file uploadnow. maka anda gunakan yang sebelah kiri.. tar. pdf.Perhatikan ada 2 (dua) tipe file yang bisa diupload. tgz.

BikinWebGratis.Tutorial Bikin Website Gratis dari www. File zip yang diupload otomatis akan diekstaksi (dimekarkan kembali) ke dalam folder htdocs. Halaman 29 . Perhatikan semua file dan folder images otomatis muncul di directory htdocs setelah kita mengupload file “uploadnow.cc . Untuk itu kita perlu membuat directory atau folder baru.8. Setelah proses upload selesai maka akan muncul laporan pengiriman file seperti pada gambar berikut. Selanjutnya klik gambar panah kiri warna biru untuk kembali ke folder “htdocs” melihat file yang sudah terupload. tetapi file ini rencananya akan kita tempatkan pada folder berbeda tetapi masih di directory htdocs juga. Klik tanda check ini untuk mulai upload 9.co. klik tombol “New dir” untuk membuat directory baru. Setelah itu anda tekan tanda check warna hijau untuk mulai melakukan pengiriman file ke server byethost. 10. Lalu terbuka halaman untuk membuat directory baru seperti pada gambar berikut. Tinggal 1 (satu) file yang belum kita upload. Tombol “New dir” 11.zip”.

Untuk upload. 14.12. Selanjutnya anda kembali ke folder htdocs dengan menekan tanda gambar panah kiri.zip”. Ketik nama directory baru yang diinginkan.co. maka akan muncul pemberitahuan seperti pada gambar berikut. misalnya saya membuat directory baru dengan nama “ebook”.BikinWebGratis.zip” yang akan dimasukkan ke folder tersebut. Anda akan dibawa kembali ke foder htdocs seperti pada gambar berikut. Klik lah link folder ebook tersebut untuk melakukan upload file e-book “tbwg.Tutorial Bikin Website Gratis dari www. Halaman 30 .cc . silahkan klik tombol “Upload” lalu carilah file “tbwg. Selanjutnya akan terbuka folder ebook yang masih kosong. Bila berhasil. Klik tanda check untuk memproses pembuatan directory folder ebook tersebut. Klik untuk upload e-book Perhatikan bahwa dorectory atau folder e-book sudah ada dalam directory htdocs. 13.

jika tidak ada yang salah prosedur maka web anda semestinya sudah online. Cari file dengan menekan tombol “Browse.cc.cc.co.cc . seperti situs saya www.15. Ya.” lalu tekan tanda check untuk mulai proses upload. Selanjutnya file yang kita upload akan muncul di folder ebook seperti pada gambar berikut. Kali ini kita bermaksud memasukkan file tersebut utuh atau tanpa diekstrak (tetap dalam file. seperti terlihat pada gambar berikut.zip) sehingga kita pilih tempat upload yang sebelah kiri. selesai sudah proses upload file dari komputer lokal kita ke jaringan internet (server byethost). pada saat itu juga langsung online dan bisa diakses di seluruh dunia..BikinWebGratis.bikinwebgratis. bukalah jendela browser dan ketikkan alamat web yang telah kita buat dan tekan tombol “Enter”.Tutorial Bikin Website Gratis dari www. Nah. Halaman 31 . Untuk melihat hasilnya. 16.

lalu upload ulang dengan cara di atas. Jika ada kekurangan atau kesalahan. Halaman 32 .Selamat… akhirnya situs kita sudah online! Ceklah navigasi situs anda dengan mengklik link-link yang ada.cc . Caranya cukup perbaiki file web yang sudah kita bikin di komputer. Secara otomatis file lama akan tertindis dan hilang oleh file baru dengan nama file yang sama yang kita masukkan.Tutorial Bikin Website Gratis dari www. anda bisa mengedit atau memperbaiki web anda.BikinWebGratis.co. apakah sudah merujuk ke halaman seperti yang diharapkan.

PENUTUP Akhirnya. Dalam tutorial ini tetap saya gunakan domain “co.Tutorial Bikin Website Gratis dari www.BikinWebGratis. Melalui e-book ini. Dan akan lebih baik lagi bila anda membaca tutorial ini sambil praktek langsung secara online. Untuk itulah. Tidak perlu merancang desain web. Saya jamin anda bisa membuat website/blog hanya dalam 15 menit. atau membuat halaman web menggunakan Halaman 33 . Harapan saya semoga tutorial ini bermanfaat bagi anda para pembaca sekalian. terutama kepada anda yang benar-benar masih pemula dalam pembuatan website. Bila anda sudah menguasai materi dalam panduan bikin web gratis ini. Setelah tutorial ini.cc . sampailah juga kita pada penutup tentang Tutorial Bikin Website Gratis ini.com sebagai server webhosting kita. saya akan memandu anda cara membuat blog atau website berbasis CMS menggunakan WordPress. saya berencana akan membuat tutorial gratis baru dengan judul “Panduan Bikin Blog Gratis”.cc” dan byethost. Tentu saja anda tidak akan langsung menguasai panduan ini dengan sekali baca. terutama buat diri saya pribadi sebagai bahan untuk berbagi pengetahuan dan pengalaman kepada para pembaca.co. saya berharap anda bisa membaca berulang-ulang sampai anda betul-betul menguasai tutorial ini. maka saya yakin anda bisa lebih mudah membuat website/blog menggunakan tutorial terbaru saya tersebut.

Asnawi. hanya domainnya saja yang masih menggunakan domain gratisan. Saya berusaha untuk menyelesaikan pembuatannya dan segera meluncurkannya melalui blog saya.cc . Jika anda berminat untuk memiliki e-book tutorial gratis ini. Dengan tutorial ini. Penulis Data Kontak : Blog : www.com/blog.Tutorial Bikin Website Gratis dari www. anda bisa membuat blog seperti itu. Mudah-mudahan dengan saran dan kritik anda bisa membuat tulisan-tulisan saya berikutnya akan selalu lebih baik dari tulisan-tulisan sebelumnya.asnawi.BikinWebGratis.software seperti Frontpage. Di sana-sini masih terdapat banyak kekurangan dan bahkan kesalahan yang tidak disengaja. Mohon dukungan dan doanya ya … . Contoh blog yang saya buat menggunakan WordPress adalah blog pribadi saya di www. Satu hal mengapa anda perlu mempelajari WordPress karena blog WordPress sangat mudah terindex (disukai) oleh mesin pencari seperti Google dan mesin pencari lainnya.asnawi. Salam sukses selalu. jangan lupa seringsering berkunjung ke blog saya untuk mengeceknya.com HP : 081524164371 (SMS only) Halaman 34 .com E-mail : asnawist@gmail. Terakhir… ada pepatah mengatakan “Tak Ada Gading yang Tak Retak” demikian pula halnya dengan segala tulisan saya.co. tetapi semuanya dilakukan secara online. saran dan kritik yang bersifat membangun dari para pembaca sekalian untuk perbaikan di masa yang akan datang. ST. olehnya itu saya senantiasa terbuka menerima pertanyaan.

Sign up to vote on this title
UsefulNot useful