PANDUAN BIKIN WEB GRATIS - g1ar.files. · PDF fileGRATIS dengan Cara Apapun ... membuat dan...

31
E-Book Tutorial PANDUAN BIKIN WEB GRATIS (Studi Kasus www.BikinWebGratis.co.cc) Oleh : Asnawi, ST. [email protected] www.asnawi.com Dipublikasikan : www.BikinWebGratis.co.cc Ed. I - Januari Th. 2009 Ed. II – Januari Th. 2010 (Revisi)

Transcript of PANDUAN BIKIN WEB GRATIS - g1ar.files. · PDF fileGRATIS dengan Cara Apapun ... membuat dan...

Page 1: PANDUAN BIKIN WEB GRATIS - g1ar.files. · PDF fileGRATIS dengan Cara Apapun ... membuat dan memiliki website professional dengan gratis. ... Lalu akan terbuka halaman login wordpress

E-Book Tutorial

PANDUAN BIKIN WEB GRATIS

(Studi Kasus www.BikinWebGratis.co.cc)

Oleh :

Asnawi, ST.

[email protected]

www.asnawi.com

Dipublikasikan :

www.BikinWebGratis.co.cc

Ed. I - Januari Th. 2009

Ed. II – Januari Th. 2010 (Revisi)

Page 2: PANDUAN BIKIN WEB GRATIS - g1ar.files. · PDF fileGRATIS dengan Cara Apapun ... membuat dan memiliki website professional dengan gratis. ... Lalu akan terbuka halaman login wordpress

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

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

Page 3: PANDUAN BIKIN WEB GRATIS - g1ar.files. · PDF fileGRATIS dengan Cara Apapun ... membuat dan memiliki website professional dengan gratis. ... Lalu akan terbuka halaman login wordpress

Halaman 3 - 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 Petunjuk-

Nya 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, 24 Januari 2010

Penulis,

Asnawi, ST.

Contact:

HP. 081524164371

e-mail : [email protected]

blog : www.asnawi.com/blog

Pemilik Situs :

www.asnawi.com

www.KhususPemula.com

www.AyoLihat.info

www.BikinWebGratis.co.cc

Page 4: PANDUAN BIKIN WEB GRATIS - g1ar.files. · PDF fileGRATIS dengan Cara Apapun ... membuat dan memiliki website professional dengan gratis. ... Lalu akan terbuka halaman login wordpress

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

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.

Semakin hari dunia internet semakin akrab dengan kehidupan masyarakat.

Bahkan saat ini banyak perangkat sudah dikonvergensikan agar bisa terhubung

dengan jaringan internet. Di masa yang akan datang internet akan menjadi

kebutuhan mendasar bagi setiap orang, sama seperti kebutuhan orang akan

sarana telekomunikasi saat ini.

Bahkan diprediksikan bahwa bisnis masa depan sangat bergantung kepada

jaringan internet, saat inipun sudah kelihatan. Berbagai kemudahan bisa

didapatkan dari internet. Akses yang tidak terbatas 24 jam sehari, jangkauan

yang luas ke seluruh dunia, dan kecepatan menjadi kekuatan yang hanya bisa

diberikan oleh internet.

Kelebihan internet ini juga dimanfaatkan oleh banyak pengguna internet untuk

menghasilkan uang dari internet. Ini bukan rahasia umum lagi. Beberapa orang

muncul sebagai Milyarder karena internet. Sebutlah Jeff Bezos si pemilik toko

buku online Amazon.com sebagai salah satu multi jutawan yang berhasil

memanfaatkan kekuatan internet. Di Indonesia juga sudah muncul banyak

nama, sebutlah misalnya Anne Ahira, Cosa Aranda, Joko Susilo, G.M. Susanto,

Welly Mulia, Peter Kohar, Asnawi (narsis deh… hehehe… maaf yang ini belum

termasuk ).

Saat ini ratusan bahkan ribuan situs-situs baru bermunculan setiap hari di

internet. Hal ini didukung oleh semakin banyaknya fasilitas penyedia

pembuatan situs baik gratis maupun berbayar. Juga semakin baiknya

infrastruktur internet karena kebijakan pemerintah yang cukup mendukung.

Pernahkah anda membayangkan memiliki situs sendiri? Umumnya orang

berpikiran bahwa untuk memiliki sebuah website membutuhkan biaya yang

mahal, dan kalau membuatnya sendiri cukup rumit. Padahal, dengan

memanfaatkan fasilitas dan tools gratis di internet, ternyata anda bisa

membuat dan memiliki website professional dengan gratis.

Nah, melalui e-book ini saya akan berusaha membimbing anda dari nol

bagaimana membuat situs gratis dengan studi kasus situs saya sendiri

www.bikinwebgratis.co.cc. Anda tidak perlu beli domain, sewa hosting, dan

membayar web desainer untuk membuatkan situs untuk anda.

Saya berusaha semaksimal mungkin agar anda dapat dengan mudah

memahami dan mempraktekkan langsung apa yang saya tulis di sini. Saya

lengkapi langkah demi langkah dengan screenshot gambar.

Page 5: PANDUAN BIKIN WEB GRATIS - g1ar.files. · PDF fileGRATIS dengan Cara Apapun ... membuat dan memiliki website professional dengan gratis. ... Lalu akan terbuka halaman login wordpress

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

Namun, bila anda tetap menemui kesulitan dalam mengaplikasikan tutorial ini,

maka jangan ragu silahkan kirim pertanyaan anda ke e-mail saya, sedapat

mungkin akan saya jawab sesuai kemampuan dan pengalaman yang saya

miliki.

Akhirnya, selamat belajar dan praktek …

Page 6: PANDUAN BIKIN WEB GRATIS - g1ar.files. · PDF fileGRATIS dengan Cara Apapun ... membuat dan memiliki website professional dengan gratis. ... Lalu akan terbuka halaman login wordpress

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

LANGKAH AWAL

Sebagai langkah awal dalam membuat sebuah situs, anda harus menentukan

terlebih dahulu hal-hal sebagai berikut:

1. Situs jenis apa yang ingin anda buat: situs content atau minisite, pakai

bahasa html atau php, menjual produk atau sekadar artikel, dll.

2. Tema website anda : apakah berhubungan dengan teknologi, kesehatan,

gaya hidup, dll.

3. Target pengunjung yang diharapkan : dari dalam negeri atau luar negeri,

laki-laki atau perempuan, pemula atau expert, tua atau muda, dll.

4. Aktifitas pengunjung di situs anda : membeli atau menitip nama dan e-mail,

mendownload, ikut polling/survey, pasang iklan, dll.

5. Tujuan atau manfaat situs tersebut buat anda : membangun list, menjual

produk, memajang artikel agar mudah ditemukan di search engine, dll.

Untuk situs www.bikinwebgratis.co.cc saya rencanakan di awal sebagai berikut:

1. Situs jenis minisite dengan tampilan desain minimalis dan menggunakan

bahasa pemrograman html (statis).

2. Tema website : situs download e-book tutorial

3. Target pengunjung dari dalam negeri untuk semua umur dan jenis kelamin.

4. Aktifitas pengunjung di situs : mengundang teman dan mendownload e-

book

5. Tujuan yang ingin dicapai : membangun list dan kredibilitas.

Nah setelah anda mempunyai gambaran tentang situs anda seperti di atas,

selanjutnya anda buat kerangka atau outline tentang situs yang akan anda

buat. Anda bisa bikin outline ini di selembar kertas dengan menggunakan pensil

atau pulpen. Cara yang biasa saya gunakan adalah seperti membuat bagan

alir (flowchart), menghubungkan antara satu halaman dengan halaman

lainnya.

Sebagai contoh saya merencanakan situs www.bikinwebgratis.co.cc ini

menggunakan 5 (lima) halaman, maka saya membuat bagan alirnya sebagai

berikut:

Page 7: PANDUAN BIKIN WEB GRATIS - g1ar.files. · PDF fileGRATIS dengan Cara Apapun ... membuat dan memiliki website professional dengan gratis. ... Lalu akan terbuka halaman login wordpress

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

Dengan adanya bagan alir ini akan sangat membantu untuk memvisualisasikan

isi setiap halaman dan navigasi antara halaman-halaman web yang akan

dibuat. Di samping itu, bagan alir juga dapat mempermudah pemeliharaan

dan update (pembaharuan) isi atau content situs setiap saat apabila

dibutuhkan.

Selanjutnya agar situs anda bisa online dan diakses dari seluruh dunia maka

anda membutuhkan:

1. Lahan (hosting) untuk menyimpan file situs anda

2. Nama (domain) untuk memanggil/menampilkan situs anda di browser

internet.

3. Desain tampilan dan content (isi) yang akan dilihat oleh pengunjung

Home

Download

Kontak

Respon Trims

Iklan

Page 8: PANDUAN BIKIN WEB GRATIS - g1ar.files. · PDF fileGRATIS dengan Cara Apapun ... membuat dan memiliki website professional dengan gratis. ... Lalu akan terbuka halaman login wordpress

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

TAHAP PERANCANGAN WEBSITE

Sebelum merancang website, ada beberapa hal yang perlu anda lakukan :

1. Mengumpulkan atau membuat gambar (image) yang akan ditampilkan

di web.

2. Mengumpulkan atau membuat materi/isi (content) web.

3. Merancang desain web atau mencari template gratis di internet.

4. Mencari script yang mendukung.

Lalu anda siapkan juga program atau software yang akan membantu anda

membuat dan mengedit website anda. Saya sendiri menggunakan :

1. Microsoft Frontpage 2003 untuk membuat dan mengedit halaman web.

2. Macromedia Fireworks dan Corel Photopaint untuk mengedit image

(gambar).

3. True Box Shot untuk membuat cover e-book.

Nah, sekarang saya ingin tunjukkan bagaimana cara saya mendapatkan

template gratis yang cocok dengan website yang ingin saya rancang. Seperti

yang saya uraikan sebelumnya bahwa saya ingin membuat situs jenis minisite,

untuk itu saya mencari situs yang menyediakan template minisite gratis di

Google.

Dari beberapa situs hasil pencarian google, akhirnya saya memilih salah satu

situs penyedia template gratis yang memenuhi kriteria yang saya harapkan,

yaitu www.minisitegallery.com. Situs ini menyediakan template minisite dengan

desain professional dan bernilai jual tinggi tapi tetap diberikan gratis.

Page 9: PANDUAN BIKIN WEB GRATIS - g1ar.files. · PDF fileGRATIS dengan Cara Apapun ... membuat dan memiliki website professional dengan gratis. ... Lalu akan terbuka halaman login wordpress

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

Pada saat e-book ini saya buat, jumlah template minisite gratis yang tersedia di

situs tersebut adalah 15 buah. Saya memilih salah satu di antaranya, yaitu

template dengan nama “Aggressive Blue”.

A. Cara mendownload Template :

1. Buka www.minisitegallery.com

2. Bawa kursor ke atas gambar template yang anda ingin download

3. Klik “details” dari template tersebut, maka akan muncul halaman baru

yang menguraikan lebih detail tentang template tersebut.

4. Klik link “Register” untuk melakukan pendaftaran terlebih dahulu. Bila

anda sudah pernah mendaftar sebelumnya cukup klik link “logged in”

untuk login dan mendownload template yang diinginkan.

5. Lalu akan terbuka halaman login wordpress untuk melakukan

pendaftaran seperti pada gambar berikut.

Page 10: PANDUAN BIKIN WEB GRATIS - g1ar.files. · PDF fileGRATIS dengan Cara Apapun ... membuat dan memiliki website professional dengan gratis. ... Lalu akan terbuka halaman login wordpress

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

6. Masukkan “Username” yang anda inginkan ke kotak isian username.

7. Masukkan alamat e-mail anda yang masih aktif, karena mereka akan

mengirimkan data login serta password anda ke alamat e-mail yang

anda daftarkan tersebut.

8. Masukkan angka pada kotak isian. Pada contoh gambar di atas,

masukkan angka 8 karena 7 + 1 = 8.

9. Klik tombol “Register” untuk mengirimkan pendaftaran anda.

10. Selanjutnya cek e-mail anda dan cari subject e-mail seperti ini :

[MiniSiteGallery.com] Your username and password. Anda akan

mendapatkan username sesuai yang anda daftarkan, dan password

sementara. Blok dan copy password sementara tersebut.

11. Klik link minisitegallery.com/wp-login.php yang disertakan dalam e-mail

tersebut, lalu akan terbuka halaman login wordpress.

12. Silakan masukkan username dan password sementara pada kotak isian

yang tersedia. Selanjutnya anda akan login ke halaman member area.

Langkah pertama yang harus anda lakukan adalah mengganti password

sementara tersebut dengan password baru yang anda tentukan sendiri.

13. Klik menu “Your Profile” lalu geser layar ke bawah dan temukan kotak

isian “New Password”, isi dengan password baru anda lalu klik tombol

“Update Profile”.

14. Selanjutnya anda kembali ke situs www.minisitegallery.com dan

mendownload template yang anda inginkan.

15. Anda akan mendapatkan file dengan nama seperti “namatemplate.zip”.

Untuk contoh di sini saya mendapatkan file template “aggressive-

blue.zip”.

B. Cara Merancang Web dengan Template

1. Setelah anda mendapatkan file template, lalu ekstrak file template

tersebut ke folder komputer anda. Sebaiknya buat folder khusus agar

memudahkan anda dalam mencarinya. Sebagai contoh, saya

mengekstrak template “aggressive-blue.zip” dan saya mendapatkan 2

Klik Link ini utk

download

Page 11: PANDUAN BIKIN WEB GRATIS - g1ar.files. · PDF fileGRATIS dengan Cara Apapun ... membuat dan memiliki website professional dengan gratis. ... Lalu akan terbuka halaman login wordpress

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

folder, 1 file css, dan 1 file html. Yang diperlukan di sini adalah folder

images, file style.css, dan file template.html. Sedangkan folder “psd” berisi

file desain situs dan image cover e-book dalam format .psd. Ini

diperuntukkan bagi anda yang ingin merubah atau mengedit tampilan

menggunakan program Photoshop. Saya sendiri tidak menggunakan

Photoshop untuk mengedit image sehingga file psd ini saya hapus saja.

2. Silahkan buka file “template.html” untuk melihat tampilan minisite tersebut

dengan mengklik dua kali file tersebut. Maka akan tampak tampilan

seperti berikut ini.

3. Selanjutnya anda tutup window tampilan tersebut lalu gandakan file

(template.html) dengan cara copy n paste sebanyak jumlah halaman

yang ingin anda buat. Di sinilah manfaat bagan alir yang pernah kita

buat sebelumnya, sehingga kita bisa tahu berapa jumlah halaman yang

akan dibuat. Anda akan mendapatkan nama file baru seperti copy of

template, copy (2) of template, copy (3) of template, dst.

4. Selanjutnya anda rename (ganti nama) file tersebut, dengan nama

halaman yang akan anda buat. Halaman utama (depan) HARUS diberi

nama “index.html”, lalu file “copy of template” ganti namanya menjadi

Page 12: PANDUAN BIKIN WEB GRATIS - g1ar.files. · PDF fileGRATIS dengan Cara Apapun ... membuat dan memiliki website professional dengan gratis. ... Lalu akan terbuka halaman login wordpress

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

“download”, “kontak”, “trims”, dst. sehingga saya mendapatkan hasil

seperti pada gambar berikut:

5. Jangan lupa, mengumpulkan semua file gambar yang akan ditampilkan

di web pada folder “images”. Meskipun file gambar tersebut sudah ada

di komputer anda di folder lain, anda tetap harus meng-copy file gambar

tersebut lalu pindahkan ke folder “images” ini.

File gambar anda tidak akan ditampilkan di web apabila gambar anda

berada di folder lain, ini harus anda perhatikan baik-baik. Saya sering

ditanya tentang hal ini, mengapa gambarnya tidak tampil di website

padahal waktu dibuka di komputer semua gambar tampil sempurna.

6. Anda juga dapat mengedit dan atau mengganti file gambar yang ada

di folder images tersebut sebagai bawaan template awal. Sebagai

contoh saya mengganti (mengedit) file header dan cover e-book agar

sesuai dengan tampilan yang saya inginkan, hasilnya seperti pada

gambar berikut.

Ini tampilan awal dari template :

Ini tampilan baru setelah diedit :

7. Setelah semuanya dirasa lengkap, tibalah saatnya mengedit dan mengisi

halaman web template dengan content hingga tercipta website seperti

yang diinginkan. Pertama-tama buka file “index.html” menggunakan

program web creator seperti MS. Frontpage 2003 yang saya gunakan.

Ganti materi/isi template dengan kata atau kalimat yang anda inginkan.

Dan hasilnya bisa tampak seperti pada gambar berikut.

Page 13: PANDUAN BIKIN WEB GRATIS - g1ar.files. · PDF fileGRATIS dengan Cara Apapun ... membuat dan memiliki website professional dengan gratis. ... Lalu akan terbuka halaman login wordpress

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

8. Lalu anda edit file html lainnya sesuai dengan isi dan tampilan yang anda

inginkan. Hubungkan halaman satu dengan halaman lainnya dengan

menggunakan “Hyperlink” (gunakan menu Insert > Hyperlink). Sebaiknya

anda menggunakan menu link untuk membuat hubungan antar

halaman seperti tampak pada gambar berikut.

9. Setelah dirasa semua sudah OK, sebelum mengupload ke web hosting

sebaiknya anda tes dulu untuk mengetahui apakah situs tersebut telah

berfungsi sebagaimana mestinya. Silahkan klik dua kali file index.html. Klik

link-link yang anda buat apakah semuanya terhubung dan tidak ada lagi

error link.

Periksa juga kata demi kata, kalimat demi kalimat, paragraph demi

paragraph, apakah sudah sesuai dengan kaidah yang baik dan benar

atau masih perlu perbaikan. Jika dirasa ada yang perlu diperbaiki, maka

anda buka kembali file tersebut di Frontpage, lalu perbaiki seperlunya.

Nah, setelah melalui tahap-tahap di atas… sekarang waktunya untuk meng-

online-kan website anda. Untuk itu anda memerlukan lahan (webhosting) untuk

menempatkan semua file yang telah anda buat tersebut, dan nama domain

untuk memanggil file tersebut agar bisa tampil di browser internet.

SEKADAR INFO :

Bila anda butuh “minisite template”, saya punya koleksi ratusan template yang sudah saya beli

atau download di internet. Hubungi saya bila anda membutuhkannya untuk website anda!

Page 14: PANDUAN BIKIN WEB GRATIS - g1ar.files. · PDF fileGRATIS dengan Cara Apapun ... membuat dan memiliki website professional dengan gratis. ... Lalu akan terbuka halaman login wordpress

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

MEMILIH NAMA DOMAIN

Apalah arti sebuah nama. Begitu pujangga William Shakespeare menisbikan arti

penting nama dalam kehidupan. Namun, pujangga romantis ini ternyata tidak

sepenuhnya benar. Dalam dunia bisnis online, nama menjadi sangatlah

penting. Nama domain (domain name) selain sebagai alamat anda di

cyberspace, ia sekaligus juga berperan sebagai brand bisnis atau diri Anda.

Karena pentingnya nama di dunia maya, maka sangat disarankan untuk

memilih domain name yang singkat, mudah dilafalkan atau diucapkan, unik,

mudah untuk diingat, dan mengandung keyword yang anda target.

Untuk memiliki nama domain, anda bisa memilih yang berbayar atau gratis.

Yang berbayar tentu memiliki berbagai kelebihan, namun sebagai pemula

tidak ada salahnya memanfaatkan fasilitas domain gratis seperti yang akan

saya uraikan lebih lanjut melalui e-book ini.

Berikut adalah beberapa penyedia nama domain gratis di internet:

1. www.domain.co.nr

2. www.dot.tk

3. http://www.co.cc

4. www.co.tv

Dari ke-empat penyedia nama domain tersebut, saya paling menyukai “co.cc”

dan “co.tv” karena adanya fasilitas DNS server sehingga bisa di add-on ke web

server yang kita gunakan. Sedangkan “dot.tk” dan “co.nr” hanya berfungsi

sebagai redirect url.

Dalam tutorial ini hanya akan saya jelaskan cara mendapatkan domain gratis

dari http://www.co.cc, format nama domain yang anda dapatkan adalah

www.namadomain.co.cc, contohnya : www.bikinwebgratis.co.cc.

Cara Mendapatkan Domain :

1. Buka http://www.co.cc/?id=147917 (ini link ref saya ), lalu ketikkan

nama domain yang anda inginkan di kotak isian yang tersedia, lalu klik

tombol “Check availability” untuk mengecek apakah domain yang anda

inginkan belum diambil/ didaftarkan oleh orang lain.

Page 15: PANDUAN BIKIN WEB GRATIS - g1ar.files. · PDF fileGRATIS dengan Cara Apapun ... membuat dan memiliki website professional dengan gratis. ... Lalu akan terbuka halaman login wordpress

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

2. Jika domain name tersebut belum diambil atau didaftarkan oleh orang

lain, maka akan tampil di halaman berikutnya penyampaian bahwa

domain tersebut masih “available” untuk anda seperti pada gambar

berikut:

3. Klik tombol “Continue to registration” maka akan terbuka halaman untuk

melakukan pendaftaran (bagi member baru) atau login bagi member

yang sudah memiliki account.

Cek domain

yang anda

inginkan di sini

!

Klik di sini

untuk daftar

Page 16: PANDUAN BIKIN WEB GRATIS - g1ar.files. · PDF fileGRATIS dengan Cara Apapun ... membuat dan memiliki website professional dengan gratis. ... Lalu akan terbuka halaman login wordpress

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

4. Lalu akan terbuka halaman formulir pendaftaran seperti berikut ini.

5. Isi semua kotak isian terutama yang ada tanda itu berarti harus diisi,

yang lain optional aja boleh tidak diisi. Isilah data sesuai dengan data

sebenarnya, terutama alamat e-mail. Jangan lupa centang pada “I

accept the Terms of Services” sebelum mengklik tombol “Create an

account now”.

6. Selanjutnya akan muncul pemberitahuan bahwa account anda berhasil

dibuat.

Jangan lupa

centang di sini!

Page 17: PANDUAN BIKIN WEB GRATIS - g1ar.files. · PDF fileGRATIS dengan Cara Apapun ... membuat dan memiliki website professional dengan gratis. ... Lalu akan terbuka halaman login wordpress

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

7. Anda harus men-setting domain anda paling lambat 48 jam setelah

pendaftaran tersebut diterima. Sebaiknya anda langsung setting pada

saat itu juga. Klik tombol “Set up” untuk men-setting domain anda, akan

terbuka halaman baru seperti berikut.

8. Klik pada pilihan no. 1 yaitu “Name Server” maka akan terbuka kotak

isian untuk memasukkan kode DNS webhosting yang digunakan. Isilah

pada kotak isian tersebut dengan “dns1.freehostia.com” dan

“dns2.freehostia.com” seperti pada gambar berikut. DNS ini mengacu

kepada webhosting gratisan yang akan kita gunakan untuk

menempatkan file web kita.

9. Terakhir klik tombol “Set up” untuk mengakhiri proses setting domain

anda. Akan keluar halaman baru yang menyatakan bahwa anda telah

melakukan perubahan pada settingan domain anda. Klik tombol “OK”

untuk mengakhiri.

Nah, sekarang anda telah memiliki nama domain yang cukup keren dan semi-

profesional dengan biaya nol rupiah. Bandingkan bila anda beli domain

berbayar, maka anda harus merogoh kocek antara Rp.65.000,- sampai

Rp.120.000,- yang dibayar per tahun.

Page 18: PANDUAN BIKIN WEB GRATIS - g1ar.files. · PDF fileGRATIS dengan Cara Apapun ... membuat dan memiliki website professional dengan gratis. ... Lalu akan terbuka halaman login wordpress

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

Di “co.cc” bahkan anda bisa mendapatkan 2 (dua) domain gratis untuk setiap

alamat e-mail yang anda daftarkan. Namun, bila dalam 30 hari web anda

yang menggunakan domain tersebut belum anda online-kan, maka domain

anda otomatis dinon-aktifkan dan bisa diambil oleh orang lain yang mendaftar

kemudian.

Untuk itulah anda harus segera merancang website anda, seperti yang sudah

saya jelaskan sebelumnya, lalu anda upload ke webhosting gratisan

(freehostia) yang akan saya jelaskan berikut ini.

Page 19: PANDUAN BIKIN WEB GRATIS - g1ar.files. · PDF fileGRATIS dengan Cara Apapun ... membuat dan memiliki website professional dengan gratis. ... Lalu akan terbuka halaman login wordpress

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

MEMILIH WEB HOSTING

Web hosting adalah salah satu komponen utama yang diperlukan agar file kita

bisa diakses melalui web browser. Web hosting atau web server adalah tempat

untuk menyimpan file website yang kita buat agar bisa ditampilkan di internet.

Dari segi biaya, webhosting juga terbagi dua, yakni ada hosting berbayar dan

ada pula hosting gratisan.

Pada tutorial ini saya akan menguraikan bagaimana mendapatkan fasilitas

webhosting gratisan semi professional dengan berbagai fitur yang hampir sama

dengan yang berbayar. Adapun fitur-fitur tersebut di antaranya:

1. Kapasitas space yang cukup besar untuk menyimpan file yakni sebesar

250 MB.

2. Bandwidth bulanan yang cukup besar yakni sebesar 6 GB lebih.

3. Control Panel yang mudah untuk mengelola web

4. Support PHP dan MySQL

5. Elefante Script Installer yang mirip dengan Fantastico di hosting berbayar

6. Support webmail dan POP3/IMAP

7. Fasilitas addon domain dan parked domain

8. Support FTP transfer menggunakan software FTP Client.

9. dan berbagai fitur lainnya.

Cara Mendapatkan Account Hosting di Frehostia.com :

1. Buka www.freehostia.com maka akan terbuka situsnya seperti pada

gambar berikut :

Klik link ini untuk

mendaftar

Page 20: PANDUAN BIKIN WEB GRATIS - g1ar.files. · PDF fileGRATIS dengan Cara Apapun ... membuat dan memiliki website professional dengan gratis. ... Lalu akan terbuka halaman login wordpress

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

2. Klik link “Sign Up Now” seperti ditunjukkan pada gambar di atas, lalu akan

terbuka formulir pendaftaran seperti pada gambar berikut:

3. Pilih “Use my existing domain” untuk menghubungkan domain co.cc

anda dengan hosting server freehostia.com anda. Isi data akun anda di

bagian bawah sesuai data yang sebenarnya. Jangan lupa masukkan

kode angka acak yang muncul lalu klik tombol “Continue >” untuk

melanjutkan.

4. Tunggu beberapa saat, hingga pendaftaran anda selesai diproses.

Pilih ini untuk

memasukkan domain

“co.cc” anda

Page 21: PANDUAN BIKIN WEB GRATIS - g1ar.files. · PDF fileGRATIS dengan Cara Apapun ... membuat dan memiliki website professional dengan gratis. ... Lalu akan terbuka halaman login wordpress

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

5. Selanjutnya akan muncul data orderan anda seperti berikut ini.

6. Data login dan password dan data penting lainnya dikirimkan ke e-mail

anda. Jika anda tidak menemukan di inbox email anda, silahkan cari

juga di folder “spam/bulk mail” di inbox email anda.

Klik di sini untuk

masuk ke

control panel

web anda!

Klik ini

untuk

lanjut

Page 22: PANDUAN BIKIN WEB GRATIS - g1ar.files. · PDF fileGRATIS dengan Cara Apapun ... membuat dan memiliki website professional dengan gratis. ... Lalu akan terbuka halaman login wordpress

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

Sekarang anda telah memiliki lahan (hosting) di dunia maya. Langkah

selanjutnya adalah login ke control panel website anda dan upload file.

Ini data login

ke control

panel

Ini data ftp anda

bila anda ingin

upload file

menggunakan

software ftp

Page 23: PANDUAN BIKIN WEB GRATIS - g1ar.files. · PDF fileGRATIS dengan Cara Apapun ... membuat dan memiliki website professional dengan gratis. ... Lalu akan terbuka halaman login wordpress

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

UPLOAD FILE KE

SERVER HOSTING

Setelah anda memiliki hosting dan domain, langkah selanjutnya adalah

memindahkan file situs yang telah anda rancang di komputer ke web hosting

tersebut. Proses pemindahan atau transfer file dari komputer ke jaringan internet

ini disebut upload.

Untuk meng-upload file, anda bisa menggunakan 2 (dua) cara, yaitu dengan

menggunakan software FTP client dan atau tanpa menggunakan software

(upload langsung menggunakan fasilitas file manager di vista control panel

freehostia.com). Kalau mau pakai software FTP, anda bisa gunakan software

gratisan seperti FileZilla atau SmartFTP, silahkan cari panduan cara

menggunakan software tersebut di google.

Di e-book ini saya hanya akan menjelaskan cara mengupload file tanpa

menggunakan software, cukup melalui file manager saja. Cara yang biasa

dilakukan adalah mengupload file satu demi satu secara manual ke server

freehostia, tetapi ini tidak perlu anda lakukan karena makan waktu dan cukup

repot.

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. Misalnya, ada file gambar yang tidak ikut atau lupa di-

upload, maka otomatis di web kita tidak akan tampil gambar tersebut. Yang

muncul hanya gambar kotak segi empat yang mengurangi keelokan tampilan

website kita.

Nah, agar itu tidak terjadi maka sebaiknya kumpulan file web tersebut kita

kompres atau di-zip terlebih dahulu sebelum diupload. File-file yang akan

ditempatkan satu folder di web, di-zip menjadi 1 (satu) file saja.

Contoh file web “bikinwebgratis.co.cc” yang akan saya upload sbb:

File yang akan saya upload di folder utama :

Page 24: PANDUAN BIKIN WEB GRATIS - g1ar.files. · PDF fileGRATIS dengan Cara Apapun ... membuat dan memiliki website professional dengan gratis. ... Lalu akan terbuka halaman login wordpress

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

- Folder images (berisi beberapa file gambar)

- File download.htm

- File index.htm

- File kontak.htm

- File respon.htm

- File trims.htm

- File bonus.htm

- File oto.htm

- File offer.htm

- File style.css

Nah, 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. Saya sendiri menggunakan WinRAR. Harus diingat bahwa

kompresi yang anda lakukan harus berekstensi dot zip (.zip) bukan dot rar (.rar).

File-file dan folder images tersebut saya zip dan beri nama file

“bikinwebgratis.zip” seperti tampak pada gambar berikut :

Cara Mengupload File ke Server FreeHostia :

1. Login ke Contor Panel FreeHostia anda dengan membuka alamati

http://cp.freehostia.com/members. Masukkan username dan password

anda.

2. Setelah masuk ke control panel, klik menu “File manager” seperti terlihat

pada gambar berikut.

Pilih semua file lalu

zip maka terbentuk

file baru yang saya

beri nama

“bikinwebgratis.zip”

Page 25: PANDUAN BIKIN WEB GRATIS - g1ar.files. · PDF fileGRATIS dengan Cara Apapun ... membuat dan memiliki website professional dengan gratis. ... Lalu akan terbuka halaman login wordpress

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

3. Selanjutnya anda akan dibawa ke halaman file manager seperti pada

gambar berikut.

4. Klik link directory yang tertulis nama domain yang telah anda masukkan,

contohnya domain saya adalah bikinwebgratis.co.cc. Lalu akan terbuka

halaman baru seperti pada gambar berikut.

Ini directory domain

bikinwebgratis.co.cc

Klik tombol ini

utk mencari file

web anda

Page 26: PANDUAN BIKIN WEB GRATIS - g1ar.files. · PDF fileGRATIS dengan Cara Apapun ... membuat dan memiliki website professional dengan gratis. ... Lalu akan terbuka halaman login wordpress

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

5. Klik tombol “Pilih Berkas” atau “Browse File” maka akan terbuka jendela

pencarian file. Pilih file yang sudah di-zip tadi (dalam hal ini file

bikinwebgratis.zip) lalu tekan tombol “Open”.

6. Lalu centang “Unpack archive after upload” agar otomatis file web kita

di-unpack atau diekstrak (dipisah-pisahkan) kembali setelah terupload.

Selanjutnya klik tombol “Upload” untuk mengupload file zip tsb.

7. Akan muncul kotak peringatan seperti gambar di atas, klik tombol “OK”

untuk melanjutkan proses upload.

Jangan lupa

centang ini !!

Page 27: PANDUAN BIKIN WEB GRATIS - g1ar.files. · PDF fileGRATIS dengan Cara Apapun ... membuat dan memiliki website professional dengan gratis. ... Lalu akan terbuka halaman login wordpress

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

8. Setelah proses upload selesai maka otomatis di folder web anda sudah

terisi file-file yang sudah terekstrak seperti pada gambar berikut.

9. Nah, file web sudah berhasil diupload. Sekarang saya ingin

menempatkan file e-book di sebuah folder khusus yang saya beri nama

folder “download”. Untuk membuat folder baru, klik

10. Maka secara otomatis akan terbentuk folder baru seperti pada gambar

berikut.

Klik tombol

“create” untuk

membuat folder

baru

Page 28: PANDUAN BIKIN WEB GRATIS - g1ar.files. · PDF fileGRATIS dengan Cara Apapun ... membuat dan memiliki website professional dengan gratis. ... Lalu akan terbuka halaman login wordpress

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

11. Klik folder “download” untuk mengupload file ke folder tersebut. Cara

upload file sama dengan cara di atas. Hanya saja karena saya ingin file

ebook yang ingin saya tempatkan di folder tersebut tetap dalam format

zip, maka saat upload file saya TIDAK MENCENTANG “Unpack archive

after upload”.

CATATAN PENTING : Maksimal besar file yang bisa diupload adalah 500kb,

bila lebih besar dari itu maka anda harus menggunakan ftp software.

Karena file ebook sy lebih besar dari 500kb maka sy menggunakan ftp

(CuteFTP) untuk menguploadnya.

Page 29: PANDUAN BIKIN WEB GRATIS - g1ar.files. · PDF fileGRATIS dengan Cara Apapun ... membuat dan memiliki website professional dengan gratis. ... Lalu akan terbuka halaman login wordpress

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

Nah, selesai sudah proses upload file dari komputer lokal kita ke jaringan

internet (server freehostia). Untuk melihat hasilnya, bukalah jendela browser dan

ketikkan alamat web yang telah kita buat dan tekan tombol “Enter”, jika tidak

ada yang salah prosedur maka web anda semestinya sudah online, seperti situs

saya www.bikinwebgratis.cc.cc. Ya, pada saat itu juga langsung online dan

bisa diakses di seluruh dunia, seperti terlihat pada gambar berikut.

Selamat… akhirnya situs kita sudah online! Ceklah navigasi situs anda dengan

mengklik link-link yang ada, apakah sudah merujuk ke halaman seperti yang

diharapkan.

Jika ada kekurangan atau kesalahan, anda bisa mengedit atau memperbaiki

web anda. Caranya cukup perbaiki file web yang sudah kita bikin di komputer,

lalu upload ulang dengan cara yang sama di atas. Secara otomatis file lama

akan tertindis dan hilang oleh file baru dengan nama file yang sama yang kita

masukkan.

Page 30: PANDUAN BIKIN WEB GRATIS - g1ar.files. · PDF fileGRATIS dengan Cara Apapun ... membuat dan memiliki website professional dengan gratis. ... Lalu akan terbuka halaman login wordpress

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

PENUTUP

Akhirnya, sampailah juga kita pada penutup tentang Tutorial Bikin Website

Gratis ini. Tentu saja anda tidak akan langsung menguasai panduan ini dengan

sekali baca, terutama kepada anda yang benar-benar masih pemula dalam

pembuatan website. Untuk itulah, saya berharap anda bisa membaca

berulang-ulang sampai anda betul-betul menguasai tutorial ini. Dan akan lebih

baik lagi bila anda membaca tutorial ini sambil praktek langsung secara online.

Harapan saya semoga tutorial ini bermanfaat bagi anda para pembaca

sekalian, terutama buat diri saya pribadi sebagai bahan untuk berbagi

pengetahuan dan pengalaman kepada para pembaca.

Setelah tutorial ini, saya juga telah membuat tutorial gratis baru dengan judul

“Tutorial Bikin Blog Gratis”.

Melalui e-book ini, saya akan memandu anda cara membuat blog atau

website berbasis CMS menggunakan WordPress. Dalam tutorial ini tetap saya

gunakan domain “co.cc” dan freehostia.com sebagai server webhosting. Bila

anda sudah menguasai materi dalam panduan bikin web gratis ini, maka saya

yakin anda bisa lebih mudah membuat website/blog menggunakan tutorial

terbaru saya tersebut.

Saya jamin anda bisa membuat website/blog hanya dalam 30 menit. Tidak

perlu merancang desain web, atau membuat halaman web menggunakan

Page 31: PANDUAN BIKIN WEB GRATIS - g1ar.files. · PDF fileGRATIS dengan Cara Apapun ... membuat dan memiliki website professional dengan gratis. ... Lalu akan terbuka halaman login wordpress

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

software seperti Frontpage, tetapi semuanya dilakukan secara online. Contoh

blog yang saya buat menggunakan WordPress adalah blog pribadi saya di

www.asnawi.com/blog. Dengan tutorial ini, anda bisa membuat blog seperti

itu, hanya domainnya saja yang masih menggunakan domain gratisan.

Satu hal mengapa anda perlu mempelajari WordPress karena blog WordPress

sangat mudah terindex (disukai) oleh mesin pencari seperti Google dan mesin

pencari lainnya.

Jika anda berminat untuk memiliki e-book tutorial gratis ini, silahkan langsung

berkunjung ke situs saya www.BikinBlogGratis.co.cc. Download hari ini juga

karena sewaktu-waktu situs dan atau e-book ini akan saya tarik/tutup atau

tidak saya gratiskan lagi.

Terakhir… ada pepatah mengatakan “Tak Ada Gading yang Tak Retak”

demikian pula halnya dengan segala tulisan saya. Di sana-sini masih terdapat

banyak kekurangan dan bahkan kesalahan yang tidak disengaja, olehnya itu

saya senantiasa terbuka menerima pertanyaan, saran dan kritik yang bersifat

membangun dari para pembaca sekalian untuk perbaikan di masa yang akan

datang.

Mudah-mudahan dengan saran dan kritik anda bisa membuat tulisan-tulisan

saya berikutnya akan selalu lebih baik dari tulisan-tulisan sebelumnya.

Salam sukses selalu,

Asnawi, ST.

Penulis

Data Kontak :

Blog : www.asnawi.com

Situs : www.KhususPemula.com, www.AyoLihat.info

E-mail : [email protected]

FB : www.facebook.com/asnawist

YM : asnawist

HP : 081524164371 (SMS only)