Cara Membuat Website Gratis ( FREE )

Ditulis tanggal 15 November 2010 didalam kategori Web Design dengan tag blog, web design, Website, WordPress, WordPress untuk Pemula oleh Bambang Sugiarto Kali ini saya mencoba untuk memberikan panduan kecil bagaimana membuat website dengan biaya nol rupiah, alias gratis (FREE). Hanya dengan beberapa langkah cepat dan mudah, anda sudah dapat membuat website sendiri. Tentu saja biaya pembuatan websitenya tidak benar-benar nol rupiah, karena anda sendiri perlu meluangkan waktu di depan komputer yang terkoneksi internet (bisa di rumah / warnet) yang juga butuh biaya.. betul..betul..betul..? kecuali kalo komputer / koneksi internetnya juga gratisan (numpang di temen, minjem tetangga atau pake laptop pacar di area hotspot gratis .. ) Oke.. kita langsung mulai saja langkah-langkah Membuat Website Gratis ( FREE ):

Siapkan Nama Website & Topik / Fokus Website

Ini penting, karena banyak dari kita yang cuma pengen punya website, tapi ga tau isi websitenya mo ngebahas apa. Ada beberapa website kadang bahkan isi / kontennya ga nyambung atau seringnya cuma berisi sampah alias konten-konten yang gada artinya. Semakin dini anda memilih dan menentukan topik / fokus website, maka semakin baik pula kualitas website yang anda buat. Semakin berkualitas isi website anda, otomatis semakin banyak juga pengunjung yang berkunjung ke website anda. Ingat! pesen mbah Google, buatlah website untuk pengunjung anda, bukan untuk mesin pencari

Buat Website di Blogger atau WordPress ?

Tahap selanjutnya menentukan tipe website dan dimana anda akan membuat website. Cara yang paling mudah adalah membuat website blogging, karena website jenis ini paling mudah dibuat. Dan tentu saja, jika anda sudah memahami dan cukup user friendly dengan blogging, maka anda bisa mengembangkannya ke website jenis lain. Ingat, CMS (Content Management System) seperti WordPress tidak hanya dapat digunakan untuk Blogging saja, tapi juga dapat dikembangkan untuk website jenis lain seperti company profile, personal portfolio, photo portfolio, online shopping dan lain sebagainya. Saat ini, ada 2 web service yang paling dominan yang menyediakan web blogging secara gratis. Artinya anda dapat membuat web blog di website tersebut, yaitu Blogger.com dan WordPress.com. Blogger.com merupakan web blog yang disediakan oleh Google, sedangkan WordPress.com merupakan web blog service yang menggunakan WordPress sebagai platform bloggingnya. Kedua web blog service tersebut masing-masing memiliki kekurangan dan kelebihan. Namun saat ini kita ga usah perdulikan itu dulu, yang penting pelajari keduanya, nanti silahkan pilih mana yang lebih anda sukai.

Bagaiman Cara Membuat Website di Blogger ?

Untuk membuat website / web blog di Blogger.com, silahkan baca panduan lengkapnya di catatan saya tentang Panduan Membuat Website di Blogger. Catatannya sengaja saya pisahkan agar bahasannya lebih fokus dan tidak terlalu panjang.

Kalau Membuat Website di WordPress, Bagaimana Caranya ?

Cara membuat website / web blog di WordPress.com kurang lebih mirip dengan cara membuat website / web blog di Blogger.com. WordPress.com sendiri juga menyediakan WordPress versi bahasa Indonesia, jadi sepertinya tidak ada kesulitan apapun untuk membuat website di WordPress, kecuali mungkin koneksi internet anda yang tiba-tiba lemot & bikin jengkel Silahkan baca catatan saya tentang panduan membuat website di WordPress.com untuk langkah-langkahnya.

Membuat Website Profesional vs Website Gratisan

Membuat website gratis ( FREE ) cocok jika website digunakan hanya untuk keperluan pribadi, atau hal-hal lain yang sifatnya tidak terlalu resmi. Namun jika website yang akan dibuat digunakan untuk profil atau portfolio (personal atau company) serta mempromosikan suatu produk atau jasa, maka cara gratisan sangat tidak disarankan. Anda harus mengeluarkan kocek sedikit untuk membuat website profesional. Selain berfungsi sebagai branding, website profesional juga dapat memberikan nilai lebih akan produk atau jasa yang anda tawarkan. Di Indonesia, khususnya di Jakarta dan kota-kota besar lainnya bertebaran penyedia layanan web design & pembuatan website profesional. Mulai dari perusahaan besar, hingga kelompok atau perorangan. Selain web programming, kami juga memberikan layanan web design & pembuatan website profesional secara menyeluruh. Mulai dari design awal, tema, pemrogramannya, hingga optimalisasinya agar website terekspos di mesin-mesin pencari seperti Google, Yahoo dan Bing. Jika anda tertarik dengan layanan web design kami, silahkan hubungi kami. Kami memberikan konsultasi Gratis sebelum anda memutuskan menggunakan jasa kami untuk membuat website anda.

Belajar Membuat Website dengan Photoshop dan Dreamweaver

09
HTML & CSS Categories

09

May

Ada banyak alasan mengapa orang ingin membuat websitenya sendiri. Antara lain, mereka ingin agar tulisan-tulisan, gambar, serta suasana hati mereka dapat dibaca oleh banyak orang atau iseng saja belajar dan siapa tau kalau sudah menjadi webmaster bisa mendapatkan penghasilan tambahan dengan membuat suatu jasa pembuatan website. Pada proyek pertama ini, kita akan menciptakan salah satu bentuk website personal. Website ini didesain dengan nuansa full color sehingga mempunyai kesan yang menarik dan indah walaupun bisa dibilang proyek pertama ini sangat sederhana sekali, hehehe. Walaupun demikian anda bisa memodifikasinya sendiri sesuai dengan yang anda sukai. Sebelum kita memulai tutorial cara membuat website sederhana dengan menggunakan photoshop dan dreamweaver ini, tentunya terlebih dahulu anda harus menginstal aplikasi Photoshop dan Dreamweaver. Kedua aplikasi ini tidak gratis tapi merupakan pilihan yang tepat untuk membuat project website, untuk membeli aplikasi ini anda dapat men-download-nya di situs resmi adobe yaitu www.adobe.com. Mari kita memulai project pembuatan website sederhana apabila anda sudah memiliki kedua aplikasi tersebut. Berikut merupakan hasil dari proyek Websiteku

Membuat Disain Awal dengan Photoshop

jalankan aplikasi photoshop anda dan siapkan sebuah kanvas baru, caranya pilih file - new lalu gunakan setting berikut: Width : 700 pixel Height : 875 pixel Resolution : 72 pixel/inch Background Content : Transparent

Pilih rounded retangle tool pada tool panel

dan samakan setingan dengan gambar dibawah kemudian buat bidang berbentuk segi panjang vertical seperti pada gambar dibawah

Pilih layer click kanan pada layer 1 (bidang yang anda buat) kemudian click gradient dan pilih gradasi warna yang anda sukai... pastikan warna bawah adalah warna dasar putih

Hasil dari gradasi yang anda buat akan menghasilkan gambar seperti berikut :

buatlah bidang untuk panel menu dengan rounded retangle tool pada tool panel seperti sebelumnya beri sentuhan warna yang berbeda dengan layer pertama tetapi tidak melenceng dari tema anda, kemudian tempatkan pada sebelah kiri atas sehingga anda mendapatkan gambar seperti dibawah ini

buatkan lagi sebuah bidang untuk daftar menu yang kali ini lebih kecil dari sebelumnya dengan rounded retangle tool pada tool panel, tempatkan sejajar dengan bidang yang anda buat sebelumnya putarkan sampai arah kemiringan 250 dengan move tool

kemudian copy layer bidang dengan cara tekan ctrl+alt+shift dan geser kebawah sebanyak 4 kali. Beri sentuhan warna pada bidang yang telah anda buat sehingga akan tampak seperti berikut:

Ketik daftar menu gunakan Type Tool dengan lambang (T) pada tool panel

Isi text pada bidang untuk daftar menu dengan : Halaman Utama, Tentang Saya, Galerry Foto dan Link. Kemudian pada sebelah kanan beri Logo dan judul Website yang sesuai dengan keinginan anda . Sampai tahapan ini kita sudah berhasil merancang layout Websiteku dengan tampilan sebagai berikut

Gunakan Slicetool

kemudian slice Layout website menjadi 6 bagian yaitu : 4 slice untuk daftar menu, 1 slice untuk logo, dan 1 lagi untuk untuk content/ isi web.

Sekarang anda tinggal menyimpanya saja. Pilih File->Save For Web

dan akan muncul wizard seperti berikut

pada opsi dibawah save, anda bisa menentukan format gambar yang akan di save mulai dari gif, png, jpg.

apabila sudah memilih sebelum di save beri nama file anda dengan index, pilih opsi HTML and Images, simpan layout anda pada satu folder yang anda beri nama Websiteku

Sampai sini design untuk layout dengan menggunakan photoshop sudah selesai dan selanjutnya anda tinggal melakukan mark-up atas file index.html yang telah kita save tadi dengan macromedia Dreamweaver.
Mark-Up Tag HTML dengan Dreamweaver

Setelah desain web di-slice dengan photoshop, sekarang saatnya kita melakukan sedikit modifikasi dengan menggunakan Dreamweaver. dreamweaver yang saya gunakan adalah dreamweaver versi 8 padahal sekarang sudah ada lho yang versi CS 4, hihi. Langsung saja jalankan aplikasi buatan Macromedia ini dan Anda akan melihat tampilan seperti gambar dibawah ini:

buka file index.htm yang telah kita save pada sesi photoshop dengan cara pilih File->Open setelah file index.html dibuka pada dreamweaver delete gambar slice yang 6 keenam atau gambar dengan nama index_06.png, yaitu gambar yang digunakan untuk isi content.

Jangan Heran bila tampilan layout website menjadi hancur seperti gambar dibawah, atur tabel HTML sehingga tampilan web menjadi normal lagi

Setelah anda mengatur tata letak gambar pada tabel, pindahkan opsi view ke show code view sehingga anda dapat melihat Tag-tag Mark-up HTML seperti berikut :

Nah selanjutnya kita Modif tag HTML dengan menambahkan Cascading Style Sheets (CSS), caranya tambahkan tag yang berwarna merah pada tag berikut kedalam tag HTML anda.
? 1 2
<title>Untitled-1</title> <html> <head>

3 4 5

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

<style type="text/css">

6 .content { 7 8 9 } 10</style> 11
</head> <body bgcolor="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0" background:url(images/index_06.png) bottom; padding:20px 20px 40px 20px;

12marginheight="0"> 13<!-- ImageReady Slices (Untitled-1.psd) --> 14

<table id="Table_01" align="center" width="700" height="377" border="0" cellpadding="0" cellspacing="0">

15<tr> 16<td height="94"> 17<img src="images/index_01.gif" width="281" height="94" alt=""></td> 18<td rowspan="4"> 19 20 21
<td height="76"> <img src="images/index_02.gif" width="419" height="328" alt=""></td> </tr> <tr>

22 23

<img src="images/index_03.gif" width="281" height="76" alt=""></td> </tr>

24<tr> 25<td height="64"> 26<img src="images/index_04.gif" width="281" height="64" alt=""></td> 27</tr> 28<tr> 29 30 31
<tr> <td height="94"> <img src="images/index_05.gif" width="281" height="94" alt=""></td> </tr>

32 33

<td colspan="2" class="content" ></td> </tr>

34</table> 35<!-- End ImageReady Slices --> 36</body>

37</html> 38 39 40

Dengan demikian maka kerangka website anda sudah jadi. Langkah selanjutnya kembalikan tampilan dreamweaver ke design view "Show Design View" kemudian isi bagian kolom content dengan hal-hal yang ingin anda publikasikan pada website anda. setelah selesai save index.html, lalu save as dengan nama file yang berbeda about.html pada folder yang sama, save as lagi dengan nama file gallery.html dan yang terakhir link.html. Sehingga kini anda memiliki 4 (empat) file html yang berbeda (semuanya harus dalam folder yang sama). Isi kolom content pada masing-masing file yang sudah anda buat sesuai dengan tema masingmasing file, yakni isi halaman utama website, tentang kita, galeri dan link. saya contohkan dibawah merupakan isi halaman utama

Langkah terakhir setelah mengisi semua file adalah menghubungkan/melink-an file yang satu dengan yang lain. caranya mudah saja. click setiap menu link pada website kita lalu pada properties pilih link dan click icon folder seperti dapat dilihat pada gambar dibawah :

pilih file yang ingin di hubungkan

Lakukan hal yang sama dan hubungkan semua file... selesailah project anda, kini anda mempunyai website yang anda rancang sendiri... Catatan Penting : Pembuatan website diatas merupakan salah satu cara perancangan web yang berbasis Table. selain menggunakan table sebetulnya ada cara lain yaitu dengan menggunakan Divatau campuran keduanya Div+Table. kedua cara memiliki plus minus masing-masing dan anda akan mengerti dengan sendirinya seiring dengan pengetahuan dan pengalaman anda dalam membuat website.