Laman

Jumat, 10 Februari 2012

Perbedaan Blog Dengan Website

jasa website
Beberapa hari yang lalu seorang teman bertanya, “ Fan, apa yah bedanya website dan blog?”
“Emang beda?” Tanya gw balik, ini cara ngeles untuk mencari waktu berpikir sejenak sebelum menjawab.
“Emang engga?” begitulah temen yang ga mau kalah.
Oke jadi begini, pada dasarnya blog itu website juga. Atau tepatnya blog adalah salah satu jenis atau tipe website juga. Lebih jelasnya coba gw jelaskan disini.
Klo merujuk ke Wikipedia, website itu *kurang lebihnya* adalah sekumpulan halaman-halaman situs yang saling berhubungan, yang berisi teks, gambar, video atau file-file digital lainnya dan biasanya memiliki 1 alamat domain atau IP address khusus pada jaringan internet (Internet Protocol-based network). Website ini harus di dimuat (hosting) pada sebuah web server sehingga bisa diakses melaui jaringan, baik itu jaringan internet ataupun jaringan LAN (Local area network) yang lebih private.
Berdasarkan pengoperasiannya, ada 2 jenis website secara umum, yaitu website statis (Static Website) dan Website Dinamis (Dynamic Website).
Static Website (Website Statis)
Website Statis hanya memiliki front end, yaitu halaman-halaman situs yang bisa diakses oleh pengunjung.
Biasanya web jenis ini hanya dibuat dengan kode HTML (hypertext markup language) dan kadang2 dilengkapi dengan script javascript dan flash untuk memperindah tampilan.
Konten website statis tidak dapat diupdate karena memang tidak disediakan fasilitas ini. Kalaupun ingin merubah isi website statis, harus merombak kode-kode HTMLnya dan hanya bisa dilakukan oleh orang yang mengerti bahasa HTML. Pembuatan website seperti ini relatif sangat mudah tapi kurang baik untuk popularitas di mata search engine sehingga perlu usaha lebih banyak untuk mempopulerkan website statis dan mendatangkan pengunjung, misalnya dengan beriklan.
Website statis biasanya berupa company profile sederhanya, brosur online, atau situs-situs yang berisi informasi sederhana yang tidak perlu dirubah.
Dynamic Website (Website Dinamis)
Website Dinamis biasanya memiliki front-end dan back end.
Front end adalah halaman-halaman situs yang bisa diakses pengunjung, sedangkan back-end yang biasa disebut CMS (content management system) atau biasa juga disebut Admin Area, atau kalau di dunia blog dikenal dengan nama Dashboard, berfungsi untuk mengupdate halaman-halaman front-end. Jadi halaman back end biasanya hanya bisa diakses oleh pemilik atau pengelola situs dengan username dan password yang telah ditetapkan.
Ada berbagai macam bentuk halaman back-end yang dibuat sesuai kebutuhan. Pada back-end atau admin area ini kita bisa merubah isi tulisan2 pada halaman situs, menambah tulisan atau artikel baru, mengupdate katalog produk seperti pada toko online, mengupdate portfolio, memanage iklan yang tampil di halaman situs jika ada, mengontrol user atau member situs dan lain-lain.
Website dinamis juga bisa dibuat interaktif dimana pengunjung atau user bisa meninggalkan komentar, menuliskan artikel baru dan lain-lain tergantung fungsi dan tujuan situs tersebut.
Berbeda dengan website statis, pembuatan website dinamis jauh lebih rumit dan komplikatif tergantung fitur-fitur yang diinginkan. Yang pasti untuk membangun sebuah web dinamis tidak cukup dengan bahasa HTML biasa tapi juga harus mengabungkan antara Web Sever (Apache, IIS, Tomcat), bahasa pemograman/script yang bekerja di sisi server tersebut (PHP, Perl, ASP dll) serta database.
Nah website dinamis sendiri berbagai tipe dan terus berkembang berdasarkan, fungsi, fitur dan tujuan pembuatannya, antara lain :
  • News Site (Situs Berita) – biasanya berisi artikel-artikel atau berita-berita yang diupdate secara rutin. Pada beberapa situs, pengunjung atau user bisa meninggalkan komentar. Contoh : Detiknews, Antaranews, Reuters dan BBC.
  • Social Network Site (Situs Jejaring Sosial) – seperti Friendster, MySpace, Facebook, Tagged dll
  • Forum – dibuat khusus agar para member dapat berdiskusi sesuai dengan topic-topik yang telah ditetapkan. Contohnya : Kaskus, Detik forum, Rumah Motor, PHPBulider.com dll. Untuk membuat forum diskusi biasanya menggunakan platform2 yang sudah tersedia, baik yang berbayar seperti vBulletin ataupun yang gratisan seperti phpBB, SMF dan lain-lain.
  • e-Commerce atau Toko Online – dibuat khusus untuk menjual produk secara online. Umumnya dilengkapi dengan shopping cart (keranjang belanja) untuk memudahkan user/pengunjung berbelanja. Tapi sebagian juga hanya berupa catalog online yang lengkap dengan detil dan harga produk, untuk melakukan pembelian dapat dilakukan melalui email atau telepon.
  • Search Engine (Mesin Pencari) – situs yang dibuat khusus untuk mencari informasi sekaligus gateway ke halaman-halaman situs lain. Contoh Google, Yahoo, Bing, Altavista dll.
  • Archive Site – Situs khusus dimana para pengguna dapat berbagi informasi dan disimpan dalam arsip-arsip elektronik. Contoh : Yahoogroups, Google Groups, Wikipedia, Archive.org dll
  • Blog – biasa juga disebut diari online dimana pemilik (individu atau group) dapat mengupdate artikel, baik tulisan, gambar ataupun file multimedia lain secara rutin dimana semua entri tersusun berurutan dan memiliki fasilitas komentar buat pengunjung. Secara standar blog juga telah dilengkapi dengan sidebar yang full custom, fasiltas RSS dan permalink.
  • Corporate/Company Website – biasanya berisi informasi2 umum dan kegiatan2 suatu perusahaan.
  • Web Portal – bentuk sederhana dari search engine dimana situs ini berisi informasi-informasi singkat dan link ke sumber yang berupa situs-situs lain.
  • Community site (Situs Komunitas) – situs yang dibuat khusus untuk komunitas-komuntas tertentu untuk berbagi informasi yang terbatas.
  • File Sharing – situs yang dibuat khusus untuk berbagi file, baik gambar, video, musik dan file-file digital lainnya. Ada yang berbayar adapula yang gratisan. Contoh : Photobucket, Flickr, Imageshack, Rapidshare, 4shared dll.
  • Business Online Site – situs-situs yang dibuat dengan tujuan bisnis online. Ada banyak jenis bisnis online yang disediakan oleh situs-situs ini dan dibutuhkan 1 bahasan terpisah untuk membahas situs-situs yang menyelenggarakan bisnis online termasuk menawarkan pekerjaan-pekerjaan online.
Kalau di bahas semua sebetulnya masih banyak jenis-jenis website berdasarkan fitur dan peruntukannya, tapi gambaran di atas sudah cukup jelas untuk menggambarkan jenis-jenis website dinamis yang umum kita temukan di internet.  Dan seiring kebutuhannya banyak website yang merupakan penggabungan dari jenis-jenis website yang ada diatas.

Belajar Bikin Website Yuk?


Contoh tabel yang akan kita buat seperti ini :
No. Nama Pekerjaan
1 Fandhie Web Designer
2 Eyang Pejabat
3 Ani Berta Bandar Arisan
Tabel diatas terdiri dari 3 kolom (column) dan 4 baris (row) dimana baris pertama adalah baris judul, dengan warna latar belakang abu-abu (#666666) serta warna teks (font) putih (#FFFFFF). Posisi tabel (alignment) adalah di tengah halaman (center) dan lebar tabel 400 piksel.
Untuk membuat tabel kita menggunakan tag <table></table>, dan untuk membuat baris(row) kita menggunakan tag <tr></tr>;. Yuk langsung kita coba dengan menulis kode HTML sbb :
<table>
<tr></tr>
<tr></tr>
<tr></tr>
<tr></tr>
</table>

Kode diatas berarti tabel terdiri dari 4 baris(row), selanjutnya kita tambahkan kolom(column) menggunakan tag <td></td>. Perhatikan bahwa tag <tr></tr> selalu diapit oleh tag <table></table> sedangkan tag <td></td> harus berada di dalam tag <tr></tr>, sbb :
<table>
<tr> <!– baris pertama –>
<td></td> <!– kolom pertama –>
<td></td>
<!-- kolom kedua -->
<td></td> <!-- kolom ketiga -->
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
</table>

Nah kerangka tabelnya udah jadi. Tau ngga? Tulisan atau kode-kode di dalam tanda <!-- dan --> itu adalah penjelasan-penjelasan yang bisa kita tuliskan di kode/script HTML untuk mengingatkan kita aja dan tidak akan ditampilkan di browser. Selanjutnya kita isi tabel kita sbb :
<table>
<tr> <!– baris pertama –>
<td>No.</td> <!– kolom pertama –>
<td>Nama</td>
<!-- kolom kedua -->
<td>Pekerjaan</td> <!-- kolom ketiga -->
</tr>
<tr>
<td>1</td>
<td>Fandhie</td>
<td>Web Designer</td>
</tr>
<tr>
<td>2</td>
<td>Eyang</td>
<td>Pejabat</td>
</tr>
<tr>
<td>3</td>
<td>Ani Berta</td>
<td>Bandar Arisan</td>
</tr>
</table>

dan hasilnya akan muncul di browser sebagai berikut :
No. Nama Pekerjaan
1 Fandhie Web Designer
2 Eyang Pejabat
3 Ani Berta Bandar Arisan
hasil tabelnya masih default dan sederhana kan? alias masih jelek :-) nah berikut kita tambahkan settingan style ke tabel, kolom dan baris. Tag <table></table> kita tambahkan variabel sbb :
<table width="400" border="1" align="center">
Artinya lebar tabel diatur menjadi 400 pixel, tebal border = 1 (semakin besar nilai akan semakin tebal border) dan posisi tabel adalah di tengah halaman (center).
Kemudian pada baris pertama <tr></tr> kita tambahkan variabel sbb :
<tr bgcolor="#666666" style="color:#FFFFFF; font-weight:bold;">
Artinya baris bertama diberi warna dasar (bgcolor) abu-abu (#666666), warna huruf putih (color:#FFFFFF) dan huruf dicetak tebal (font-weight:bold)
Kode HTML selengkapnya akan menjadi seperti ini :
<table width="400" border="1" align="center">
<tr bgcolor=”#666666″ style=”color:#FFFFFF; font-weight:bold;”>
<td align=”center” width=”30″>No.</td>
<td width=”170″>Nama</td>
<td width=”200″>Pekerjaan</td>
</tr>
<tr>
<td align=”center”>1</td>
<td>Fandhie</td>
<td>Web Designer</td>
</tr>
<tr>
<td align=”center”>2</td>
<td>Eyang</td>
<td>Pejabat</td>
</tr>
<tr>
<td align=”center”>3</td>
<td>Ani Berta</td>
<td>Bandar Arisan</td>
</tr>
</table>

<td align="center"> artinya, teks dalam kolom tersebut diatur pada posisi tengah (center).
<td width="170"> artinya, lebar kolom diatur 170 piksel.
Hasil akhir tabel yang kita buat akan seperti contoh diatas. Yah memang masih cukup sederhana. Jangan kuatir, nanti pada tingkat yang lebih maju kita akan belajar bagaimana mengatur tampilan tabel menjadi lebih canggih dengan menggunakan CSS.

Pertama kita akan belajar cara membuat list atau daftar. Contohnya kita akan membuat daftar buah sbb :
  1. mangga
  2. pisang
  3. jambu
Daftar diatas disebut ordered list karena menggunakan angka (nomor) sebagai urutan list. Tag yang akan digunakan adalah<ol></ol> dan <li></li>. Cara menuliskannya adalah sbb :
<ol>
<li>mangga</li>
<li>pisang</li>
<li>jambu</li>
</ol>

Sekarang bagaimana kalau kita akan membuat daftar tanpa urutan nomor(angka) tapi hanya menggunakan bullet sbb :
  • mangga
  • pisang
  • jambu
Kita hanya perlu mengganti tag <ol></ol> dengan tag <ul></ul> atau disebut juga unordered list. Kodenya sbb :
<ul>
<li>mangga</li>
<li>pisang</li>
<li>jambu</li>
</ul>

Selanjutnya mari kita menggabungkan hasil pelajaran dalam postingan ini dengan postingan sebelumnya dalam sebuah skrip. Buka program Notepad dan ketik kode-kode berikut :

<html>
<head>
<title>Ini kepala website </title>
</head>
<body>
<p>Ini adalah paragraf pertama</p>
<p>Ini adalah paragraf kedua<br />dan ini baris kedua dari paragraf kedua.</p>
<p><img src=”gambar1.jpg” /></p>
<p>Berikut adalah daftar buah dengan nomor urut:</p>
<ol>
<li>mangga</li>
<li>pisang</li>
<li>jambu</li>
</ol>
<p>Dan berikut adalah daftar buah tanpa nomor urut :</p>
<ul>
<li>mangga</li>
<li>pisang</li>
<li>jambu</li>
</ul>
</body>
</html>

Simpan(save) dan buka di browser. Nah sekarang selain menulis kalimat dan menyisipkan gambar, kamu juga dah bisa membuat list (daftar).

Untuk dapat membuat website, yang pertama harus kita mengerti adalah bahasa HTML dan penggunaannya. Dari menguasai bahasa HTML kemudian akan kita kembangkan pelan-pelan ke jenis script yang lain hingga kita dapat membangun sebuah website mulai dari yang paling sederhana hingga sebuah website yang sangat kompleks sekalipun.
BTW, tutorial-tutorial gw akan bersifat praktikal. Langsung berupa praktek-praktek serta penjelasan mengenai kode dan skrip yang digunakan. Tidak akan membahas panjang-panjang mengenai apa itu website, HTML teori-teori yang bersifat terlalu teknis, kecuali gw emang merasa penting untung menjelaskan untuk menghindarkan kebingungan bagi pemula.
Oke, langsung belajar aja yah? Untuk memudahkan belajar bikin website, sebaiknya bikin folder dulu di komputer kamu. Misalnya folder *website*. Nanti simpan file yang anda kerjakan mengikuti tutorial ini dalam folder *website* ini.
Untuk menuliskan kode-kode HTML untuk sementara kita ngga akan menggunakan software-software web editor yang kompleks dulu, takutnya interface software-software web editor tadi justru akan membingungkan dan bikin kamu yg baru belajar jadi ga fokus. Cukup kita akan gunakan software NOTEPAD aja dulu dari Windows. Gimana, siap?
Nah sekarang coba buka Notepad kemudian tuliskan kode berikut :
<html>
website pertama saya nih!
</html>
Kemudian simpan (save) file kamu. Jangan lupa di Save as type: dipilih All files dulu kemudian simpan dengan nama website.html (ekstension html-nya ngga boleh lupa. Karena kalau hanya simpan menggunakan nama website, file akan tersimpan dalam format notepad, bukan format html sebagai format dasar halaman web yang dapat dikenali browser).
Nah sekarang, silahkan buka file website.html tadi di browser… taadaaa….. itulah halaman website kamu yang pertama yang isinya “website pertama saya nih!”  Mudah banget kan yahh :)
Pada dasarnya sebuah halaman website memang harus diawali dengan tag <html> dan kemudian ditutup oleh tag </html> . Pelan-pelan kamu bakal makin mengerti dan mengenal sifat-sifat tag dalam bahasa HTML.
Sekarang tambahkan kode berikut di notepad kamu :
<html>
<head>
<title>Ini kepala website </title>
</head>
<body>
</body>
Ini badan website!
</html>
Selanjutnya save (simpan) dan buka lagi di browser. Hasilnya masih sama kann? Tapi coba perhatikan di tab paling atas browser, pastinya disitu tertulis  Ini kepala website bukann?
Yaa.. selain harus dibuka dan ditutup oleh tag <html> dan </html>, setiap halaman website juga harus terdiri dari 2 bagian yaitu bagian yang diapit tag <head></head> serta bagian yang diapit tag <body></body>.
<head></head> adalah bagian kepala website. Di bagian ini kita akan menuliskan kode-kode yang tidak akan ditampilkan dihalaman website pada browser.
<body></body>. adalah bagian dimana kita akan menuliskan isi halaman website yang ditampilkan di browser, baik itu berupa teks, gambar, video dan lain-lain.
Oke, selanjutnya kita coba mengenal beberapa tag html yang sering digunakan, antara lain :
<p></p> adalah tag untuk sebuah paragaraf.
<img> untuk menyisipkan file gambar
<br /> untuk memotong kalimat/baris.
Nah disini kamu bisa lihat, kalau tag html tidak semuanya memiliki tag pembuka dan tag penutup, seperti <html> dan </html>, <p> dan </p>, tapi ada beberapa tag yang hanya menggunakan satu tag tunggal seperti <img />, <br /> dan lain-lain.  Santai aja.. ngga usah kuatir..  pelan-pelan kamu bakal terbiasa dengan tag-tag html ini.
Oke lanjut, silahkan tulis skrip berikut :
<html>
<head>
<title>Ini kepala website </title>
</head>
<body>
<p>Ini adalah paragraf pertama</p>
<p>Ini adalah paragraf kedua<br />dan ini baris kedua dari paragraf kedua.</p>
<p><img src=”gambar1.jpg” /></p>

</body>
</html>
Jangan lupa di folder yang sama dengan file website.html yang kamu simpang yaitu folder *website* tadi, simpan juga file gambar dengan nama gambar.jpg.  Sekarang save file kamu dan buka di browser.  Well, selain kalimat kamu juga dah punya gambar di halaman website kamu.