tutorial bik in web gratis

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 banyakhambatan yang senantiasa menghalangi saya, namun dengan tekad dansemangat 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 takterhingga kepada kedua orang tuaku, H. M. Amin Latif dan Hj. St. Mas’ati, yangtak pernah berhenti mendoakan kebaikan untuk anaknya ini. Semoga merekaselalu dalam lindungan dan kasih sayang-Nya. Amin.

Terima kasih tak terhingga pula saya haturkan kepada para guru, baik di dunianyata maupun di dunia maya, yang telah banyak membantu saya dalammemahami berbagai hal dan menambah pengetahuan saya sampai saat ini.

Yang tak kalah pentingnya, ijinkan saya menyampaikan ucapan terima kasihkepada anda para pembaca sekalian atas kesediaan anda mendownloaddan 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 pribadipenulis.

Makassar, 20 Desember 2008

Penulis,

Asnawi, ST.

Contact:HP. 081524164371e-mail : [email protected] : www.asnawi.com

Pemilik Situs :www.IklanMakassar.comwww.KhususPemula.comwww.PemasarGlobal.comwww.BukuGratis.co.ccwww.DollarsGratis.co.ccwww.BikinWebGratis.co.cc

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

Kata Pengantar

Tahukah anda syarat MUTLAK yang harus dimiliki untuk memenangkanpersaingan di dunia maya? Jawabannya adalah anda harus mengetahui caramembuat 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 terhubungdengan jaringan internet. Di masa yang akan datang internet akan menjadikebutuhan mendasar bagi setiap orang, sama seperti kebutuhan orang akansarana telekomunikasi saat ini.

Bahkan diprediksikan bahwa bisnis masa depan sangat bergantung kepadajaringan internet, saat inipun sudah kelihatan. Berbagai kemudahan bisadidapatkan dari internet. Akses yang tidak terbatas 24 jam sehari, jangkauanyang luas ke seluruh dunia, dan kecepatan menjadi kekuatan yang hanya bisadiberikan oleh internet.

Kelebihan internet ini juga dimanfaatkan oleh banyak pengguna internet untukmenghasilkan uang dari internet. Ini bukan rahasia umum lagi. Beberapa orangmuncul sebagai Milyarder karena internet. Sebutlah Jeff Bezos si pemilik tokobuku online Amazon.com sebagai salah satu multi jutawan yang berhasilmemanfaatkan kekuatan internet. Di Indonesia juga sudah muncul banyaknama, sebutlah misalnya Anne Ahira, Cosa Aranda, Joko Susilo, G.M. Susanto,Welly Mulia, Peter Kohar, Asnawi (narsis deh… hehehe… maaf yang ini belumtermasuk).

Saat ini ratusan bahkan ribuan situs-situs baru bermunculan setiap hari diinternet. Hal ini didukung oleh semakin banyaknya fasilitas penyediapembuatan situs baik gratis maupun berbayar. Juga semakin baiknyainfrastruktur internet karena kebijakan pemerintah yang cukup mendukung.

Pernahkah anda membayangkan memiliki situs sendiri? Umumnya orangberpikiran bahwa untuk memiliki sebuah website membutuhkan biaya yangmahal, dan kalau membuatnya sendiri cukup rumit. Padahal, denganmemanfaatkan fasilitas dan tools gratis di internet, ternyata anda bisamembuat dan memiliki website professional dengan gratis.

Nah, melalui e-book ini saya akan berusaha membimbing anda dari nolbagaimana membuat situs gratis dengan studi kasus situs saya sendiriwww.bikinwebgratis.co.cc. Anda tidak perlu beli domain, sewa hosting, danmembayar web desainer untuk membuatkan situs untuk anda.


Saya berusaha semaksimal mungkin agar anda dapat dengan mudahmemahami dan mempraktekkan langsung apa yang saya tulis di sini. Sayalengkapi langkah demi langkah dengan screenshot gambar.

Namun, bila anda tetap menemui kesulitan dalam mengaplikasikan tutorial ini,maka jangan ragu silahkan kirim pertanyaan anda ke e-mail saya, sedapatmungkin akan saya jawab sesuai kemampuan dan pengalaman yang sayamiliki.

Akhirnya, selamat belajar dan praktek …


LANGKAH AWAL

Sebagai langkah awal dalam membuat sebuah situs, anda harus menentukanterlebih dahulu hal-hal sebagai berikut:

1. Situs jenis apa yang ingin anda buat: situs content atau minisite, pakaibahasa 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, menjualproduk, 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 menggunakanbahasa 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 andabuat. Anda bisa bikin outline ini di selembar kertas dengan menggunakan pensilatau pulpen. Cara yang biasa saya gunakan adalah seperti membuat baganalir (flowchart), menghubungkan antara satu halaman dengan halamanlainnya.

Sebagai contoh saya merencanakan situs www.bikinwebgratis.co.cc inimenggunakan 5 (lima) halaman, maka saya membuat bagan alirnya sebagaiberikut:


Home

Download

Trims

Kontak

Respon

Iklan

Dengan adanya bagan alir ini akan sangat membantu untuk memvisualisasikanisi setiap halaman dan navigasi antara halaman-halaman web yang akandibuat. Di samping itu, bagan alir juga dapat mempermudah pemeliharaandan update (pembaharuan) isi atau content situs setiap saat apabiladibutuhkan.

Selanjutnya agar situs anda bisa online dan diakses dari seluruh dunia makaanda membutuhkan:

1. Lahan (hosting) untuk menyimpan file situs anda

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

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


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 andamembuat 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 mendapatkantemplate gratis yang cocok dengan website yang ingin saya rancang. Sepertiyang saya uraikan sebelumnya bahwa saya ingin membuat situs jenis minisite,untuk itu saya mencari situs yang menyediakan template minisite gratis diGoogle.

Dari beberapa situs hasil pencarian google, akhirnya saya memilih salah satusitus penyedia template gratis yang memenuhi kriteria yang saya harapkan,yaitu www.minisitegallery.com. Situs ini menyediakan template minisite dengandesain professional dan bernilai jual tinggi tapi tetap diberikan gratis.


Pada saat e-book ini saya buat, jumlah template minisite gratis yang tersedia disitus tersebut adalah 15 buah. Saya memilih salah satu di antaranya, yaitutemplate dengan nama “Aggressive Blue”.

A. Cara mendownload Template :

1. Buka www.minisitegallery.com2. Bawa kursor ke atas gambar template yang anda ingin download3. 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. Bilaanda sudah pernah mendaftar sebelumnya cukup klik link “logged in”untuk login dan mendownload template yang diinginkan.

5. Lalu akan terbuka halaman login wordpress untuk melakukanpendaftaran seperti pada gambar berikut.


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 yanganda 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 akanmendapatkan username sesuai yang anda daftarkan, dan passwordsementara. Blok dan copy password sementara tersebut.

11. Klik link minisitegallery.com/wp-login.php yang disertakan dalam e-mailtersebut, lalu akan terbuka halaman login wordpress.

12. Silakan masukkan username dan password sementara pada kotak isianyang tersedia. Selanjutnya anda akan login ke halaman member area.Langkah pertama yang harus anda lakukan adalah mengganti passwordsementara tersebut dengan password baru yang anda tentukan sendiri.

13. Klik menu “Your Profile” lalu geser layar ke bawah dan temukan kotakisian “New Password”, isi dengan password baru anda lalu klik tombol“Update Profile”.

14. Selanjutnya anda kembali ke situs www.minisitegallery.com danmendownload template yang anda inginkan.

Klik Link ini utkdownload

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 templatetersebut ke folder komputer anda. Sebaiknya buat folder khusus agarmemudahkan anda dalam mencarinya. Sebagai contoh, sayamengekstrak template “aggressive-blue.zip” dan saya mendapatkan 2


folder, 1 file css, dan 1 file html. Yang diperlukan di sini adalah folderimages, file style.css, dan file template.html. Sedangkan folder “psd” berisifile desain situs dan image cover e-book dalam format .psd. Inidiperuntukkan bagi anda yang ingin merubah atau mengedit tampilanmenggunakan program Photoshop. Saya sendiri tidak menggunakanPhotoshop untuk mengedit image sehingga file psd ini saya hapus saja.

2. Silahkan buka file “template.html” untuk melihat tampilan minisite tersebutdengan mengklik dua kali file tersebut. Maka akan tampak tampilanseperti berikut ini.

3. Selanjutnya anda tutup window tampilan tersebut lalu gandakan file(template.html) dengan cara copy n paste sebanyak jumlah halamanyang ingin anda buat. Di sinilah manfaat bagan alir yang pernah kitabuat sebelumnya, sehingga kita bisa tahu berapa jumlah halaman yangakan dibuat. Anda akan mendapatkan nama file baru seperti copy oftemplate, copy (2) of template, copy (3) of template, dst.

4. Selanjutnya anda rename (ganti nama) file tersebut, dengan namahalaman yang akan anda buat. Halaman utama (depan) HARUS diberinama “index.html”, lalu file “copy of template” ganti namanya menjadi


“download”, dst. sehingga saya mendapatkan hasil seperti padagambar berikut:

5. Jangan lupa, mengumpulkan semua file gambar yang akan ditampilkandi web pada folder “images”. Meskipun file gambar tersebut sudah adadi komputer anda di folder lain, anda tetap harus meng-copy file gambartersebut lalu pindahkan ke folder “images” ini.

File gambar anda tidak akan ditampilkan di web apabila gambar andaberada di folder lain, ini harus anda perhatikan baik-baik. Saya seringditanya tentang hal ini, mengapa gambarnya tidak tampil di websitepadahal waktu dibuka di komputer semua gambar tampil sempurna.

6. Anda juga dapat mengedit dan atau mengganti file gambar yang adadi folder images tersebut sebagai bawaan template awal. Sebagaicontoh saya mengganti (mengedit) file header dan cover e-book agarsesuai dengan tampilan yang saya inginkan, hasilnya seperti padagambar berikut.

Ini tampilan awal dari template :

Ini tampilan baru setelah diedit :

7. Setelah semuanya dirasa lengkap, tibalah saatnya mengedit dan mengisihalaman web template dengan content hingga tercipta website sepertiyang diinginkan. Pertama-tama buka file “index.html” menggunakanprogram 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.


8. Lalu anda edit file html lainnya sesuai dengan isi dan tampilan yang andainginkan. Hubungkan halaman satu dengan halaman lainnya denganmenggunakan “Hyperlink” (gunakan menu Insert > Hyperlink). Sebaiknyaanda menggunakan menu link untuk membuat hubungan antarhalaman seperti tampak pada gambar berikut.

9. Setelah dirasa semua sudah OK, sebelum mengupload ke web hostingsebaiknya anda tes dulu untuk mengetahui apakah situs tersebut telahberfungsi sebagaimana mestinya. Silahkan klik dua kali file index.html. Kliklink-link yang anda buat apakah semuanya terhubung dan tidak ada lagierror link.

Periksa juga kata demi kata, kalimat demi kalimat, paragraph demiparagraph, apakah sudah sesuai dengan kaidah yang baik dan benaratau masih perlu perbaikan. Jika dirasa ada yang perlu diperbaiki, makaanda 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) untukmenempatkan semua file yang telah anda buat tersebut, dan nama domainuntuk memanggil file tersebut agar bisa tampil di browser internet.


MEMILIH NAMA DOMAIN

Apalah arti sebuah nama. Begitu pujangga William Shakespeare menisbikan artipenting nama dalam kehidupan. Namun, pujangga romantis ini ternyata tidaksepenuhnya benar. Dalam dunia bisnis online, nama menjadi sangatlahpenting. Nama domain (domain name) selain sebagai alamat anda dicyberspace, ia sekaligus juga berperan sebagai brand bisnis atau diri Anda.

Karena pentingnya nama di dunia maya, maka sangat disarankan untukmemilih 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 pemulatidak ada salahnya memanfaatkan fasilitas domain gratis seperti yang akansaya uraikan lebih lanjut melalui e-book ini.

Berikut adalah beberapa penyedia nama domain gratis di internet:1. www.domain.co.nr2. www.dot.tk3. www.co.cc

Dari ketiga penyedia nama domain tersebut, saya paling menyukai “co.cc”karena adanya fasilitas DNS server sehingga bisa di add-on ke web server yangkita gunakan. Sedangkan “dot.tk” dan “co.nr” hanya berfungsi sebagai redirecturl.

Dalam tutorial ini hanya akan saya jelaskan cara mendapatkan domain gratisdari www.co.cc, format nama domain yang anda dapatkan adalahwww.namadomain.co.cc, contohnya : www.bikinwebgratis.co.cc.

Cara Mendapatkan Domain :

1. Buka www.co.cc, lalu ketikkan nama domain yang anda inginkan dikotak isian yang tersedia, lalu klik tombol “Check availability” untukmengecek apakah domain yang anda inginkan belum diambil/didaftarkan oleh orang lain.


Cek domainyang andainginkan di sini!

2. Jika domain name tersebut belum diambil atau didaftarkan oleh oranglain, maka akan tampil di halaman berikutnya penyampaian bahwadomain tersebut masih “available” untuk anda seperti pada gambarberikut:

3. Klik tombol “Continue to registration” maka akan terbuka halaman untukmelakukan pendaftaran (bagi member baru) atau login bagi memberyang sudah memiliki account.

Klik di siniuntuk daftar


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

Jangan lupacentang di sini!

5. Isi semua kotak isian terutama yang ada tanda itu berarti harus diisi,yang lain optional aja boleh tidak diisi. Isilah data sesuai dengan datasebenarnya, terutama alamat e-mail. Jangan lupa centang pada “Iaccept the Terms of Services” sebelum mengklik tombol “Create anaccount now”.

6. Selanjutnya akan muncul pemberitahuan bahwa account anda berhasildibuat.


7. Anda harus men-setting domain anda paling lambat 48 jam setelahpendaftaran tersebut diterima. Sebaiknya anda langsung setting padasaat itu juga. Klik tombol “Set up” untuk men-setting domain anda, akanterbuka halaman baru seperti berikut.

8. Klik pada pilihan no. 1 yaitu “Manage DNS” maka akan terbuka kotakisian untuk memasukkan kode DNS webhosting yang digunakan. Isilahpada kotak isian tersebut dengan “ns1.byet.org” dan “ns2.byet.org”seperti pada gambar berikut. DNS ini mengacu kepada webhostinggratisan yang akan kita gunakan untuk menempatkan file web kita.

9. Terakhir klik tombol “Set up” untuk mengakhiri proses setting domainanda. Akan keluar halaman baru yang menyatakan bahwa anda telahmelakukan 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 domainberbayar, maka anda harus merogoh kocek antara Rp.65.000,- sampaiRp.120.000,- yang dibayar per tahun.

Di “co.cc” bahkan anda bisa mendapatkan 2 (dua) domain gratis untuk setiapalamat e-mail yang anda daftarkan. Namun, bila dalam 30 hari web andayang menggunakan domain tersebut belum anda online-kan, maka domainanda otomatis dinon-aktifkan dan bisa diambil oleh orang lain yang mendaftarkemudian.

Untuk itulah anda harus segera merancang website anda, seperti yang sudahsaya jelaskan sebelumnya, lalu anda upload ke webhosting gratisan yang akansaya jelaskan berikut ini.


MEMILIH WEB HOSTING

Web hosting adalah salah satu komponen utama yang diperlukan agar file kitabisa diakses melalui web browser. Web hosting atau web server adalah tempatuntuk menyimpan file website yang kita buat agar bisa ditampilkan di internet.Dari segi biaya, webhosting juga terbagi dua, yakni ada hosting berbayar danada pula hosting gratisan.

Pada tutorial ini saya akan menguraikan bagaimana mendapatkan fasilitaswebhosting gratisan semi professional dengan berbagai fitur yang hampir samadengan yang berbayar. Adapun fitur-fitur tersebut di antaranya:

1. Kapasitas space yang cukup besar untuk menyimpan file yakni sebesar243 MB.

2. Bandwidth bulanan yang cukup besar yakni sebesar 20 GB lebih.3. Vista Control Panel yang mirip dengan cPanel pada hosting berbayar4. Support PHP dan MySQL5. Automatic Script Installer yang mirip dengan Fantastico di hosting

berbayar6. Gratis unlimited e-mail7. Fasilitas addon domain dan parked domain8. Support FTP transfer menggunakan software FTP Client.9. dan berbagai fitur lainnya.

Cara Mendapatkan Account Hosting di ByetHost.com :1. Sebelum mendaftar, pastikan anda menggunakan browser Mozilla

Firefox, jangan menggunakan browser Internet Explorer. Lalu buka situswww.byethost.com akan terbuka halaman seperti berikut ini.

Klik tombol iniuntuk mendaftar


2. Klik tombol “Not a member” berwarna hijau seperti pada gambar di atas,lalu akan terbuka formulir pendaftaran.

3. Isi formulir pendaftaran sesuai dengan data yang sebenarnya, terutamaalamat e-mail anda.

4. Klik tombol “Register” untuk melanjutkan ke step berikutnya. Kalau munculhalaman berikutnya seperti gambar berikut, maka langsung klik tombol“Click Me To Continue” untuk melanjutkan ke langkah berikutnya.

5. Setelah itu akan muncul captcha untuk mencegah pendaftaran ilegal,masukkan 2 kata tersebut ke kotak isian yang tersedia.

Ketik Captchadi sini !


6. Klik tombol “Register” untuk mengirimkan formulir pendaftaran anda. Bilapendaftaran anda diterima, maka anda akan mendapatkan databyethost anda seperti berikut ini.

Klik di sini untukdownload datahosting panelbyethost anda!

7. Jangan lupa menyimpan atau mencatat data-data tersebut karenaakan digunakan selamanya. Dan harus diingat pula agar data tersebutterutama password tidak dilihat oleh siapa pun. Jadi, simpan baik-baikdata ini di komputer anda.

Sekarang anda telah memiliki lahan (hosting) di dunia maya. Langkahselanjutnya adalah menghubungkan domain anda dengan web hosting anda.Untuk menghubungkan domain “co.cc” dan byethost maka kita gunakanfasilitas add-on domain di byethost.com.


ADD-ON DOMAIN

Secara default anda akan mendapatkan alamat sub-domain gratis daribyethost seperti ini http://username-anda-saat-daftar.byethostXX.com dimanaXX adalah angka acak yang diberikan otomatis oleh byethost.com.

Contoh : pada saat saya mendaftar, saya menggunakan username =bikinsitusgratis, maka saya diberikan alamat sub-domain menjadihttp:// bikinsitusgratis .byethost32.com . Alamat ini terasa kurang professional,lagipula kita sudah daftarkan domain di “co.cc”. Jadi lebih baik menggunakandomain semi-profesional dari “co.cc” saja.

Cara Mengkoneksikan Domain (add-on domain) dengan Web Hosting :

1. Login ke Vista cPanel anda, buka www.byethost.com lalu klik menu“Member Login Here” seperti pada gambar berikut.

Klik gambar ini untukmemunculkan kotakisian “Username”dan “Password”

2. Masukkan username control panel dan password anda pada kotak isianyang tersedia, lalu klik tombol “Login” untuk masuk ke Vista cPanel anda.Username control panel adalah username yang diberikan oleh ByetHostpada saat mendaftar, formatnya seperti ini bXX_XXXXXXX dimana Xadalah angka acak. Selanjutnya anda akan dibawa masuk ke halamanVista cPanel anda seperti pada gambar berikut.


Di sebelah kiri (yang berwarna biru) adalah data informasi accountwebhosting anda, sedangkan sebelah kanan adalah menu-menu untukmengelola webhosting anda. Di bagian atas ada iklan banner dan ditengah-tengah ada penawaran untuk meng-upgrade account andamenjadi Premium Hosting. Iklan penawaran ini diabaikan saja

3. Selanjutnya anda klik menu “Addons domain” pada bagian Domainsseperti pada gambar di bawah ini.

Klik di siniuntuk addondomain

4. Akan terbuka halaman baru dengan kotak isian untuk memasukkandomain anda seperti pada gambar berikut.

Masukkan domain“co.cc” anda disini!

5. Ketikkan nama domain “co.cc” anda di kotak isian yang tersedia lalu kliktombol “Create Domain”. Ketik domain anda tanpa menggunakan httpdan www, contohnya saya ketik “bikinwebgratis.co.cc”. Selanjutnya


akan muncul nama domain tersebut seperti pada gambar berikut. Andabisa add-on domain sampai 5 (lima) buah dalam 1 (satu) accountwebhost.

Nah, setelah melalui langkah-langkah di atas berarti anda telah memilikitempat hosting dan domain name sebagai alamat anda di dunia maya.Sekarang saatnya memasukkan (upload) file web ke server hosting anda agarsitus anda segera online.


MENG-UPLOAD FILE KESERVER HOSTING

Setelah anda memiliki hosting dan domain, langkah selanjutnya adalahmemindahkan file situs yang telah anda rancang di komputer ke web hostingtersebut. Proses pemindahan atau transfer file dari komputer ke jaringan internetini disebut upload.

Untuk meng-upload file, anda bisa menggunakan 2 (dua) cara, yaitu denganmenggunakan software FTP client dan atau tanpa menggunakan software(upload langsung menggunakan fasilitas file manager di vista control panelbyethost.com). Kalau mau pakai software FTP, anda bisa gunakan softwaregratisan seperti FileZilla atau SmartFTP , silahkan cari panduan caramenggunakan software tersebut di google.

Di e-book ini saya hanya akan menjelaskan cara mengupload file tanpamenggunakan software, cukup melalui file manager saja. Cara yang biasadilakukan adalah mengupload file satu demi satu secara manual ke serverbyethost, tetapi ini tidak perlu anda lakukan karena makan waktu dan cukuprepot.

Dan juga kalau kita upload file satu demi satu terkadang ada file yangterlupakan sehingga tentu saja website kita tidak akan tampil sebagaimanayang diharapkan. Misalnya, ada file gambar yang tidak ikut atau lupa di-upload, maka otomatis di web kita tidak akan tampil gambar tersebut. Yangmuncul hanya gambar kotak segi empat yang mengurangi keelokan tampilanwebsite kita.

Nah, agar itu tidak terjadi maka sebaiknya kumpulan file web tersebut kitakompres atau di-zip terlebih dahulu sebelum diupload. File-file yang akanditempatkan 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 :-------

Folder images (berisi beberapa file gambar)File download.htmFile index.htmFile kontak.htmFile respon.htmFile trims.htmFile style.css

Sedangkan file e-book dengan nama file “tbwg.zip” akan saya tempatkanpada folder khusus yang saya beri nama “download” di server nantinya.

Nah, file-file dan folder yang akan ditempatkan di folder utama di atas kita pilihsemua lalu di-zip menggunakan program WinZip/WinRAR atau programkompresi lainnya. Saya sendiri menggunakan WinRAR. Harus diingat bahwakompresi yang anda lakukan harus berekstensi dot zip (.zip) bukan dot rar (.rar).

File-file dan folder images tersebut saya zip dan beri nama file “uploadnow.zip”seperti tampak pada gambar berikut :

Cara Mengupload File ke Server ByetHost :

1. Login ke Vista cPanel Byethost anda.2. Setelah masuk ke control panel, klik menu “File manager” di bagian FTP

Manager atau Site Management (lihat kotak merah di gambar).


3. Selanjutnya anda akan dibawa ke halaman file manager seperti padagambar berikut.

Ini directory domainbikinwebgratis.co.cc

4. Klik link directory yang tertulis nama domain yang telah anda masukkan(add-on domain), contohnya domain yang saya add-on adalahbikinwebgratis.co.cc. Lalu akan terbuka halaman baru seperti padagambar berikut.

Ini link directoryhtdocs

5. Klik directory “htdocs” maka akan terbuka halaman baru seperti padagambar berikut. Di directory htdocs inilah tempat semua file untuk situsbikinwebgratis.co.cc akan ditempatkan.

Ini tombolupload

6. Nah sekarang untuk mengupload file web anda, klik tombol “Upload” laluakan terbuka halaman upload seperti pada gambar berikut.


Perhatikan ada 2 (dua) tipe file yang bisa diupload, yakni file tunggalbiasa seperti file html, pdf, doc, jpeg/gif di sebelah kiri dan file arsipseperti file zip, tar, tgz, gz di sebelah kanan. Jika anda ingin menguploadsatu demi satu file, maka anda gunakan yang sebelah kiri. Sedangkanbila anda sudah zip-kan file anda (seperti yang saya lakukan) maka kitagunakan yang sebelah kanan. File yang kita zip secara otomatis akan diunzip (dimekarkan/diekstrak) ke directory htdocs.

7. Klik tombol “Browse..” untuk mencari file yang sudah kita zip (fileuploadnow.zip) di folder komputer kita. Kalau sudah ketemu file-nya, lalutekan tombol open untuk memilih file tersebut. Perhatikan gambarberikut.

Tekan tombol Browse..lalu cari file zip yangakan diupload, pilih filelalu tekan tombol Open


8. Setelah itu anda tekan tanda check warna hijau untuk mulai melakukanpengiriman file ke server byethost.

Klik tandacheck ini untukmulai upload

9. File zip yang diupload otomatis akan diekstaksi (dimekarkan kembali) kedalam folder htdocs. Setelah proses upload selesai maka akan muncullaporan pengiriman file seperti pada gambar berikut.

10. Selanjutnya klik gambar panah kiri warna biru untuk kembali ke folder“htdocs” melihat file yang sudah terupload.

Tombol “New dir”

11. Perhatikan semua file dan folder images otomatis muncul di directoryhtdocs setelah kita mengupload file “uploadnow.zip”. Tinggal 1 (satu) fileyang belum kita upload, tetapi file ini rencananya akan kita tempatkanpada folder berbeda tetapi masih di directory htdocs juga.

Untuk itu kita perlu membuat directory atau folder baru, klik tombol “Newdir” untuk membuat directory baru. Lalu terbuka halaman untukmembuat directory baru seperti pada gambar berikut.


12. Ketik nama directory baru yang diinginkan, misalnya saya membuatdirectory baru dengan nama “ebook”. Klik tanda check untukmemproses pembuatan directory folder ebook tersebut. Bila berhasil,maka akan muncul pemberitahuan seperti pada gambar berikut.

13. Selanjutnya anda kembali ke folder htdocs dengan menekan tandagambar panah kiri. Anda akan dibawa kembali ke foder htdocs sepertipada gambar berikut.

Klik untukupload e-book

Perhatikan bahwa dorectory atau folder e-book sudah ada dalamdirectory htdocs. Klik lah link folder ebook tersebut untuk melakukanupload file e-book “tbwg.zip”.

14. Selanjutnya akan terbuka folder ebook yang masih kosong. Untuk upload,silahkan klik tombol “Upload” lalu carilah file “tbwg.zip” yang akandimasukkan ke folder tersebut.


15. Kali ini kita bermaksud memasukkan file tersebut utuh atau tanpadiekstrak (tetap dalam file.zip) sehingga kita pilih tempat upload yangsebelah kiri. Cari file dengan menekan tombol “Browse..” lalu tekan tandacheck untuk mulai proses upload.

16. Selanjutnya file yang kita upload akan muncul di folder ebook sepertipada gambar berikut.

Nah, selesai sudah proses upload file dari komputer lokal kita ke jaringaninternet (server byethost). Untuk melihat hasilnya, bukalah jendela browser danketikkan alamat web yang telah kita buat dan tekan tombol “Enter”, jika tidakada yang salah prosedur maka web anda semestinya sudah online, seperti situssaya www.bikinwebgratis.cc.cc. Ya, pada saat itu juga langsung online danbisa diakses di seluruh dunia, seperti terlihat pada gambar berikut.


Selamat… akhirnya situs kita sudah online! Ceklah navigasi situs anda denganmengklik link-link yang ada, apakah sudah merujuk ke halaman seperti yangdiharapkan.

Jika ada kekurangan atau kesalahan, anda bisa mengedit atau memperbaikiweb anda. Caranya cukup perbaiki file web yang sudah kita bikin di komputer,lalu upload ulang dengan cara di atas. Secara otomatis file lama akan tertindisdan hilang oleh file baru dengan nama file yang sama yang kita masukkan.


PENUTUP

Akhirnya, sampailah juga kita pada penutup tentang Tutorial Bikin WebsiteGratis ini. Tentu saja anda tidak akan langsung menguasai panduan ini dengansekali baca, terutama kepada anda yang benar-benar masih pemula dalampembuatan website. Untuk itulah, saya berharap anda bisa membacaberulang-ulang sampai anda betul-betul menguasai tutorial ini. Dan akan lebihbaik lagi bila anda membaca tutorial ini sambil praktek langsung secara online.

Harapan saya semoga tutorial ini bermanfaat bagi anda para pembacasekalian, terutama buat diri saya pribadi sebagai bahan untuk berbagipengetahuan dan pengalaman kepada para pembaca.

Setelah tutorial ini, saya berencana akan membuat tutorial gratis baru denganjudul “Panduan Bikin Blog Gratis”.

Melalui e-book ini, saya akan memandu anda cara membuat blog atauwebsite berbasis CMS menggunakan WordPress. Dalam tutorial ini tetap sayagunakan domain “co.cc” dan byethost.com sebagai server webhosting kita.Bila anda sudah menguasai materi dalam panduan bikin web gratis ini, makasaya yakin anda bisa lebih mudah membuat website/blog menggunakantutorial terbaru saya tersebut.

Saya jamin anda bisa membuat website/blog hanya dalam 15 menit. Tidakperlu merancang desain web, atau membuat halaman web menggunakan


software seperti Frontpage, tetapi semuanya dilakukan secara online. Contohblog yang saya buat menggunakan WordPress adalah blog pribadi saya diwww.asnawi.com/blog. Dengan tutorial ini, anda bisa membuat blog sepertiitu, hanya domainnya saja yang masih menggunakan domain gratisan.

Satu hal mengapa anda perlu mempelajari WordPress karena blog WordPresssangat mudah terindex (disukai) oleh mesin pencari seperti Google dan mesinpencari lainnya.

Jika anda berminat untuk memiliki e-book tutorial gratis ini, jangan lupa sering-sering berkunjung ke blog saya untuk mengeceknya. Saya berusaha untukmenyelesaikan pembuatannya dan segera meluncurkannya melalui blog saya.Mohon dukungan dan doanya ya ….

Terakhir… ada pepatah mengatakan “Tak Ada Gading yang Tak Retak”demikian pula halnya dengan segala tulisan saya. Di sana-sini masih terdapatbanyak kekurangan dan bahkan kesalahan yang tidak disengaja, olehnya itusaya senantiasa terbuka menerima pertanyaan, saran dan kritik yang bersifatmembangun dari para pembaca sekalian untuk perbaikan di masa yang akandatang.

Mudah-mudahan dengan saran dan kritik anda bisa membuat tulisan-tulisansaya berikutnya akan selalu lebih baik dari tulisan-tulisan sebelumnya.

Salam sukses selalu,

Asnawi, ST.Penulis

Data Kontak :Blog : www.asnawi.comE-mail : [email protected] : 081524164371 (SMS only)


tutorial bik in web gratis

Documents