Halaman Yang Pertama Kali Dibuka?

Tahukah pembaca halaman apa yang pertama kali terbuka ketika Anda mengunjungi sebuah website di internet dan mengklik domainnya? Beberapa pembaca pasti sudah mengerti jawabannya. Tapi ketika pertanyaan serupa saya tanyakan kepada kawan-kawan yang kebetulan belajar mendesain web pada saya semuanya menjawab halaman HOME, halaman UTAMA, atau halaman BERANDA. Benarkah demikian? Mungkin inilah yang namanya generalisasi. Hampir semua website membuat menu yang bernama "HOME" atau "BERANDA" atau yang lainnya yang mana ketika diklik akan menuju tampilan utama website, sehingga kita beranggapan bahwa halaman dengan nama itulah yang pertama kali terbuka. Lantas bagaimana jika saya, Anda, teman Anda, dan teman dekat dari teman Anda memberi nama menu tersebut bukan "HOME" atau "BERANDA" melainkan "PLEKETON" (apaan tuh? :D), apakah masih disebut sebagai halaman home? Jadi halaman apa donk?
Halaman tersebut adalah halaman yang diberi nama index atau Default. Jika servernya menggunakan sistem Linux maka file utama tersebut bernama index, sedangkan jika menggunakan sistem windows maka file utamanya bernama Default. Semua website pasti mempunyai file web yang diberi nama index atau Default. Jika web tersebut memakai bahasa HTML, maka nama file tersebut adalah index.html atau index.htm. Jika menggunakan bahasa PHP, maka namanya adalah index.php, atau jika menggunakan ASP, maka nama filenya bernama Default.asp. File index atau Default tersebutlah yang akan menjadi halaman yang pertama kali terbuka ketika kita mengunjungi web dengan mengklik domainnya. Menyewa space hosting sama artinya kita menyewa ruang di internet sebagai tempat menyimpan dokumen-dokumen website kita. Penyewaan ruang tersebut bisa diibaratkan kita diberi folder untuk menyimpan dokumen web kita dan ketika kita membuka domain website, maka browser yang kita gunakan akan mengirimkan permintaan agar webserver yang digunakan mencari file web yang bernama index atau Default tadi yang berada pada folder atau ruang yang kita sewa kemudian menampilkannya pada browser.

»»  read more

Membuat Web Menggunakan Macromedia Dreamweaver (2)

Kini saatnya kita melanjutkan tutorial web kita yang membahas cara membuat web dengan menggunakan Macromedia Dreamweaver. Dibagian pertama tutorial berkelanjutan ini kita telah mengenal sekilas mengenai profil Dreamweaver sebagai salah satu software web design. Bahkan pembaca mungkin sudah mencoba mendownload dreamweaver cs4 yang merupakan versi terbaru saat posting ini saya rilis. Oke deh, saya asumsikan pembaca sudah mendownload dan sudah menginstal dreamweaver baik itu yang asli dan sudah di-purchase, trial, maupun yang versi tak asli yang serial number-nya didapat dari crack-crack-an, kayak saya ini :D. Atau kalau belum menginstal juga tidak masalah kok. Dreamweaver tidak membuat kita pintar, tapi kita yang membuat dreamweaver menjadi pintar. Gimana caranya? Dibagian ini kita akan mempelajari dasar-dasar dreamweaver untuk membuat website.

1. Silahkan jalankan program Dreamweaver jika pembaca telah menginstalnya.
2. Pada menu utama, pilih File --> New, maka akan muncul tampilan pilihan jenis dokumen baru yang ingin kita buat. Maksudnya adalah kita memilih apakah ingin membuat halaman web basic (statis), web dinamis (biasanya untuk web berbasis database), halaman template, dan lain-lain. Setiap kategori terdiri dari beberapa jenis dokumen. Menurut saya jenis ini dibedakan berdasarkan bahasa dan fungsi yang akan digunakan untuk halaman website yang akan kita buat. Karena saat ini kita mencoba belajar yang dasar terlebih dahulu, maka silahkan pilih kategori Basic Page dan jenisnya HTML.
   
3. Tampilan layar desain Dreamweaver terdiri dari 3 jenis, yaitu code, split, dan design.
   Layar Code berfungsi sebagai tempat kita membuat halaman web dengan mengetik bahasa pemograman secara langsung. Artinya, layar inilah yang menampilkan struktur bahasa pemograman web yang dipakai pada halaman web yang sedang kita buat. Pada bagian design, kita membuat website dengan menggunakan menu-menu yang tersedia, misalnya menu menambahkan gambar, membuat tabel, mengatur tampilan tulisan, dan lain-lain. Kita tidak perlu mengetik bahasa pemograman halaman web yang kita buat karena secara otomatis, setiap kita menambahkan sebuah elemen, maka dreamweaver akan menerjemaahkannya kedalam kalimat-kalimat bahasa pemograman yang kita gunakan. Inilah keunggulan dreamweaver dibanding notepad, frontpage, dan mungkin yang lainnya. Karena pada dreamweaver sudah tersedia menu-menu yang siap pakai untuk mendesain halaman web. Selain itu, interface-nya juga sangat bagus dan mudah digunakan. Bagian split berguna untuk membagi halaman kerja dreamweaver menjadi 2, separuh untuk menampilkan layar code, dan separuh lagi menampilkan layar design. Hal ini berguna jika kita ingin mendesain halaman melalui layar design namun ingin melihat perubahan kode bahasa webnya, dan juga sebaliknya. Jika pembaca masuk ke layar Code, Anda akan melihat struktur HTML seperti yang pernah saya tunjukkan pada postingan yang ini. Sebagai contoh struktur:
   
   
   <title>Untitled Document</title>
   
   
   dimana struktur tersebut berfungsi untuk mendefenisikan judul halaman web kita yang akan muncul di title bar browser.
   
4. Dibagian kiri atas dibawah menu File, terdapat menu dropdown yang terdiri dari beberapa pilihan. Pilihan ini berguna untuk memilih menu-menu desain yang akan kita gunakan. Misalnya kita ingin menambah gambar, maka pilih Common, maka disebelah kanannya akan muncul menu-menu bergambar yang bisa kita gunakan, salah satunya untuk memasukkan gambar ke halaman website.
   
5. Coba pembaca masuk ke layar Design seperti yang saya jelaskan pada poin 3. Setelah memilih bagian tersebut, dibagian bawah pembaca akan melihat bagian Properties. Bagian ini berfungsi untuk mengatur tampilan dari elemen-elemen yang kita tambahkan kedalam halaman web yang kita buat. Menu-menu Properties ini hanya terlihat jika kita bekerja pada layar Design.
6. Dibagian samping, terdapat pula bagian yang bernama Panel. Salah satu fungsi panel ini adalah untuk mengatur file-file web yang telah kita buat.
   
7. Dibagian atas tepatnya disamping menu pilihan layar, ada kotak isian bernama Title. Bagian berfungsi untuk memberikan judul halaman web yang sedang kita buat yang akan muncul pada title bar browser.
   Fungsi ini sama seperti yang dijelaskan pada poin 3 diatas mengenai tag title. Coba pembaca ganti tulisan yang ada di kotak tersebut menjadi misalnya "Tutorial Website Dengan Dreamweaver". Setelah itu, kembali ke layar code dan lihat perubahan yang terjadi pada bagian tag <title>.

NB: Jangan kemana-mana dulu ya..tunggu postingan lanjutan berikutnya yang juga membahas cara membuat web dengan dreamweaver:D

»»  read more

Membuat Web Menggunakan Macromedia Dreamweaver (1)

Seperti janji saya di postingan "Mengenal Dasar Pembuatan Halaman Website" dimana saya akan mengulas sedikit tentang software web design yang menurut saya sangat bagus, maka di postingan yang berkelanjutan ini akan saya jelaskan mengenai hal tersebut. Software yang saya maksud adalah Macromedia Dreamweaver. Dreamweaver mempunyai banyak keunggulan-keunggulan dari segi fitur maupun interface sehingga sangat membantu kita dalam membuat halaman web. Untuk mendapatkan software Dreamweaver, bisa kita download dari situs resminya atau dibeli di toko-toko yang menyediakan software tersebut. Disana juga tersedia versi TRIAL yang bisa pembaca download. Tapi mohon maaf, saya tidak menyediakan di blog ini Download Macromedia Dreamweaver Versi Bajakan alias yang ada crack nya. Namun, harganya memang masih sangat mahal menurut saya, dan karena mahal banget, "terpaksa" deh saya memakai yang ada crack untuk bajakannya :D. Maaf ya...:). Jika berminat, pembaca bisa download dreamweaver yang tidak asli dari situs-situs yang ada di internet, banyak kok, saya yakin itu.He3x. Juga tersedia Crack Dreamweaver untuk mendapatkan serial number nya. Bahkan, kemungkinan mendapatkannya juga free (ya iyalah, kalau gak gratis mending beli yang asli). Tapi mohon jangan bilang saya yang merekomendasikan ya ketika download crack dreamweaver :D.
Saat posting ini ditulis, versi terbaru yang telah keluar adalah Macromedia Dreamweaver CS4. Tapi saya sendiri masih memakai dreamweaver 8. Gimana? Apakah pembaca sudah memutuskan untuk menggunakan macromedia dreamweaver free alias hasil bajakan, yang asli atau yang trial? Jika sudah mendapatkannya, silahkan diinstal di komputer atau laptop pembaca. Berikut screenshot Dreamweaver 8 yang saya pakai:

KLIK UNTUK DOWNLOAD DREAMWEAVER CS4 for TRIAL

»»  read more

Mengatasi Message BX- ERRORS Saat Menginstal Template Baru Blogger

Pernahkan pembaca menemukan halaman error seperti gambar dibawah ini?
Saya harap sih jangan pernah :D. Soalnya jika pembaca mengalami hal tersebut pasti akan merasa hampir kecewa, sedikit kecewa, kecewa, sangat kecewa, bahkan bisa sangat kecewa sekali. halah...Halaman tersebut merupakan halaman galat yang akan kita temukan ketika mengalami masalah error saat menginstal New Blogger Template (template baru blogspot yang berekstensi .xml). Blogger akan menunjukkan kode galat (kode error) yang sesuai dengan masalah kita. Kode diatas merupakan salah satunya. Saya sendiri pernah mengalami hal tersebut dan menemukan kode bX-si9ej, bx-ji78k6, bX-ot4j3e, bX-xvu2n5, dan lain sebagainya. Sungguh mengecewakan buat kita aplagi jika template yang kita download sangat bagus dan kita sukai. Lantas, bagaimana mengatasi message kode bX- error tersebut? Sebenarnya blogspot telah menyediakan forum di Google yang membahas masalah tersebut. Jika pembaca mengalami hal tersebut coba lihat sebuah link dibagian bawah, biasanya tertulis "Telusuri Grup Bantuan Blogger untuk bX- error". Link tersebut akan mengarah ke Google forum yang saya maksud tadi. Nah, disini saya akan mengulas dan mereview solusi mengatasi pesan error bX pada blogger dengan bahasa kita sendiri (bahasa Indonesia tentunya). Berikut langkah-langkah mengatasi message bX-errors pada blogspot ketika menginstal template baru .xml:

1. Buka template yang telah Anda download dengan notepad atau wordpad. Klik kanan file tersebut --> Open With --> Wordpad (atau notepad)
   
2. Cari kode widget id pada template tersebut. Tekan Ctrl + F kemudian tulis di kotak pencarian widget id.
3. Lakukan pencarian satu persatu karena akan ada beberapa kode yang bertuliskan widget id.
4. Setiap kali menemukan struktur yang ada widget id, ganti nomor id widget tersebut menjadi 2 digit. Misalnya pembaca menemukan struktur <b:widget id='example2', maka pembaca sebaiknya mengganti misalnya dengan <b:widget id='example21' (usahakan mengganti dengan lebih dari 1 digit)
5. Lakukan untuk widget yang lainnya sampai semua nomor id widget lebih dari 1 angka. Contoh : <b:widget id='Feed1', menjadi: <b:widget id='Feed12'
6. Setelah itu simpan template yang telah Anda edit tersebut.
7. Silahkan instal kembali template tersebut pada blogger Anda
8. Selamat mencoba.
   

»»  read more

Download Template Blogger WP Polaroid (Edited Version)

Ketika pertama kali memulai menulis tutorial website yang selama ini tersimpan di memori ke dalam sebuah blog, saya memang mencoba beberapa template yang menurut saya bagus dan menarik untuk digunakan dan tentunya sesuai dengan tema tutorial website yang akan saya berikan. Pilihan saya jatuh pada sebuah template yang saya dapat dari situs eblogtemplate, yaitu WP Polaroid. Jadi, template yang saya gunakan sekarang adalah adalah template kedua yang resmi untuk blog tutorial website ini.
Template tersebut cukup keren dan unik menurut saya. Namun, template WP Polaroid yang default tersebut menurut saya masih ada kekurangan baik dari segi fungsi maupun tampilan. Beberapa kekurangannya antara lain tidak dapat memunculkan kotak penulisan komentar dibawah posting, dan masalah ini dirasakan oleh banyak penggunanya. Untuk yang ini saya telah mencoba memberikan tips untuk mengatasinya disini. Nah, karena disediakan gratis, maka tidak sedikit orang yang menggunakannya. Oleh karena ini, saya mencoba mengotak-atik beberapa tampilannya agar terlihat beda dan menambah beberapa fitur didalamnya. Muncullah template blogger WP Polaroid Edited Version (duh, semoga bung David si empunya gak marah karena saya edit :D). Sebenarnya sih bukan bermaksud merusak karya orang. Justru saya ingin memperbaiki karyanya dan tetap mengakui bahwa itu adalah miliknya 100% karena kita mendapatkannya secara cuma-cuma. Oleh karena itu, saya akan tetap mencantumkan lisensi dari template aslinya. Nah, karena saya tidak lagi menggunakannya, maka template WP Polaroid hasil editan saya tersebut saya berikan kepada pembaca yang ingin memakainya. Untuk melihat contoh hasil editannya, silahkan klik disini. (Disarankan bagi pembaca untuk melihat preview aslinya agar melihat perbedaan aslinya dengan hasil editan).
Beberapa perubahan yang saya lakukan:

1. Tampilan menjadi lebih cantik dan unik. Ini dilakukan dengan mengubah CSS serta struktur templatenya.
2. Menggunakan image template yang cantik dan teroptimasi. Artinya gambar yang digunakan ukurannya sudah di optimalkan sehingga lebih ringan.
3. Terdapat fasilitas "read more" atau "baca selengkapnya". Pada halaman utama, postingan ditampilkan sebagian saja sehingga blog menjadi lebih ringan jika pertama kali dibuka.
4. Terdapat menu dropdown. Menu ini merupakan menu yang jika di sorot akan muncul sub-sub menu lain.
5. Bentuk template menjadi lebih bagus. Salah satu contohnya adalah bagian posting yang telah diberi border.
6. Terdapat menu slide show
7. Kotak pencarian menjadi lebih keren

Sebelum menggunakannya saya berharap pembaca tetap mencantumkan link lisensi dari blog tersebut.

Do you want to use this template?

Download Template Now | Preview

»»  read more

Mengenal Dasar Pembuatan Halaman Website (1)

Tutorial ini sebenarnya sudah disinggung pada postingan-postingan yang terdahulu. Namun, rasanya kurang lengkap jika tidak memaparkan lebih detail lagi. Jika di postingan yang lalu kita sudah membahas filosifi sebuah halaman website, kemudian belajar tentang hosting dan domain, mengenali bahasa pemrograman yang digunakan untuk membuat website serta perbedaan-perbedaannya, sampai pada "praktek" untuk membuat sebuah blog di blogspot. Dan sekarang saya akan mencoba mengulas lebih dasar dan detail mengenai dasar pembuatan sebuah halaman website. Karena merupakan dasar, maka kita akan memulai dengan mempelajari cara mendesain halaman website dengan HTML.
Secara umum, sebuah halaman website terdiri dari 2 bagian besar, yaitu head dan body. Kedua bagian ini bisa diibaratkan seperti tubuh manusia yang dibagi atas 2 bagian besar yaitu kepala dan tubuh.
Bagian head pada halaman website berfungsi sebagai tempat meletakkan informasi-informasi yang digunakan untuk mendesain atau mengatur halaman website yang kita buat. Sama halnya seperti kepala manusia dimana kepala dijadikan tempat menyimpan informasi yang membuat kita tahu dan membuat kita mengatur tubuh kita. Misalnya informasi bahwa bugil di depan umum adalah hal yang memalukan. Informasi tersebut tentu ada di kepala kita. Dengan kita mempunyai informasi itu, kita harus membalut tubuh kita dengan pakaian agar tidak terlihat bugil di depan umum. Yach, kecuali kepalanya sudah rusak atau informasi yang diberikan salah, tentu penampilan tubuh kita menjadi sebaliknya.
Sedangkan bagian body pada halaman website merupakan bagian yang tampak secara langsung di internet. Di bagian inilah kita menyusun elemen-elemen yang akan kita tampilkan di internet, misalnya tulisan, gambar, tabel, video, dan lain-lain. Body pada website bisa diibaratkan seperti tubuh manusia dimana bagian tersebut menunjukkan penampilan kita, misalnya warna baju, pakai gelang atau tidak, lengan panjang atau tidak, dan lain-lain. Supaya lebih jelas bagaimana bentuk head dan body itu, mari kita perhatikan screenshot coding (bagian yang berisi kode-kode untuk mendesain halaman website, bukan yang tampak ketika dibuka pada browser) sebuah halaman website yang paling dasar :

Berikut penjelasannya:

• Baris 1, 2, dan 3 merupakan pendefenisian standardisasi HTML yang digunakan untuk mendasain halaman website tersebut
  
• Baris 5 s.d 9 merupakan bagian head. Dibagian inilah informasi untuk mengatur website diletakkan. Misalnya yang terlihat pada baris ke 7 dimana tertulis:
  <title>Judul Halaman Website</title>
  tag tersebut mendefenisikan bahwa title halaman website tersebut adalah "Judul Halaman Website". Title tersebut akan muncul pada title bar browser internet.
• Baris 11 s.d 13 merupakan bagian body. Dibagian inilah kita memasukkan data atau elemen-elemen yang akan kita tampilkan pada browser internet.
  
• Baris ke 3 dan ke 14 merupakan tag penutup yang mendefenisikan bahwa kode-kode yang ditulis merupakan kode HTML.

Perhatikan bahwa kode-kode tersebut terdiri atas tag pembuka dan tag penutup. Jika pembaca kurang mengerti atau lupa mengenai penulisan tag tersebut, silahkan klik disini untuk mempelajarinya.
Lantas, apakah cukup sampai disitu? Bagaimana tampilannya dan cara menampilkannya? Elemen-elemen apa yang harus saya letakkan di head dan di body? Bagaimana pula cara meletakkannya? Apa yang harus kita perbuat terhadap head dan body ketika mendesain halaman website?
Yach, sebenarnya baris-baris kode pada gambar diatas sudah bisa menjadi sebuah halaman website. Namun, halaman website tersebut masih kosong alias belum terisi elemen apapun karena kita belum menampilkan data atau elemen pada bagian body. Halaman website tersebut hanya bisa tampil dan menunjukkan di title bar judul halamannya yaitu "Judul Halaman Website" sesuai baris ke 7. Nah, pertanyaan-pertanyaan selanjutnya yang saya sebutkan tadi akan kita jawab secara tuntas memalui blog ini pada postingan selanjutnya. Namun, supaya kita lebih mudah belajarnya, ada baiknya kita sedikit belajar menggunakan software web design yang sangat terkenal? Apa itu? Tunggu postingan selanjutnya dan jangan kemana-mana ya :D

»»  read more

Situs Yang Menyediakan Kode Warna CSS untuk Web

Sebagian pembaca mungkin sudah akrab dengan istilah "kode warna CSS (Cascading Stylesheet) untuk web". Sangat saya sarankan bagi pembaca yang mungkin belum mengerti apa itu CSS untuk membuka postingan mengenai CSS terlebih dahulu. Anda boleh membukanya disini dan disini. Salah satu yang kita singgung disana terutama pada postingan tentang cara membuat CSS pada website adalah mengenai kode yang digunakan untuk membuat warna. Warna-warna yang kita kenal selama ini sebenarnya mempunyai kode-kode tertentu untuk masing-masing warna. Misalnya warna putih mempunyai kode: #FFFFFF atau #ffffff, warna hitam mempunyai kode: #000000, dan sebagainya. Tipe kode tersebut disebut sebagai Hexadecimal Color Code.

Jika kita pernah menggunakan software desain grafis seperti Photoshop, Coredraw, atau Macromedia Flash, kode-kode tersebut akan tersedia lebih lengkap. Begitu pula software desain website seperti Dreamweaver atau Frontpage yang kita gunakan ketika membuat halaman website. Namun bagaimana jika suatu saat kita memerlukan kode suatu warna, misalnya untuk membuat CSS, namun tidak mempunyai software-software tersebut? Tentu sangat repot jika harus menghafal semua kode-kode warna itu. Kecuali kalau pembaca lagi haus hafalan.He3x. Hanya sebagian saja warna bisa dikenali oleh komputer meskipun menyebutnya dengan "nama" warna itu, seperti putih, hitam, biru, hijau, dan warna-warna umum lainnya. Maksudnya kita bisa menggunakan "nama" warna tersebut untuk membuat warna tanpa menggunakan kode-kodenya. Misalnya, untuk warna putih kita bisa menggunakan "white" sebagai pengganti "#FFFFFF" (nama yang bisa digunakan adalah nama Inggrisnya).

Namun, pembaca tidak perlu pusing karena di internet sudah banyak situs yang menyediakan kode-kode warna tersebut secara online. Salah satu situs yang menyediakan kode warna tersebut adalah http://www.colorschemer.com/online.html.

Disana sudah tersedia pilihan warna yang ingin pembaca ketahui kode-kodenya sehingga ketika ingin membuat CSS, pembaca tinggal menggunakannya tanpa harus menginstal software-software grafis terlebih dahulu.

»»  read more