Ada 4 bahasa pemrograman standar dalam web design:
HTML, CSS, JavaScript dan PHP.Langkah
pertama adalah Kamu perlu bisa membedakan cara penulisan dan tag dasar
dari keempat bahasa tersebut, agar sobat tidak rancu saat mengedit skrip
coding dari theme blog yang sobat gunakan.Untuk
PHP cukup pelajari cara penulisan tag sesuai dengan CMS blog yang Kamu
pakai. dalam bahasa PHP yang langsung bisa sobat gunakan tanpa perlu
susah payah membuat perintahnya sendiri. Nah, sekarang pertanyaanya
pelajari yang mana dulu? jawabannya adalah..HTML
→ CSS → PHP → JavaScript HTML ada diurutan pertama karena merupakan
bahasa pemrograman utama yang WAJIB dipelajari dalam membangun sebuah
halaman blog/website.Setelah
halaman dasar dibangun, CSS digunakan untuk memberikan “makeup” pada
halaman. Sebagai langkah awal gunakan saja tag PHP standar bawaan dari
theme blog yang sudah ada. JavaScript bisa Sobat pelajari untuk membuat
halaman blog lebih interaktif, tapi tidak mutlak.Bagaimana dengan proses belajarnya?Modifikasi → Merancang → MembuatTidak
ada salahnya untuk terlebih dahulu mempelajari coding dari theme buatan
orang lain. Jika tahap modifikasi sudah tidak lagi sulit, sudah saatnya
merancang desain theme buatan sendiri.Dalam
tahap ini, corat-coret layout blog diatas kertas sangat membantu
designer untuk membuat desain yang memiliki konsep dengan gambaran yang
jelas dari pada sekedar langsung menggambar imajinasi yang ada dikepala
ke layar monitor. Pelajari hingga 50% Jika semangat belajar lagi tinggi,
semua modul pelajaran bisa dilahap sampai kenyang habis dalam sekali
waktu. Ya, bisa saja dalam satu waktu sobat mempelajari semua bahasa
keempat pemrograman desain web, namun itu tidak efektif. Banyak senior
menyarankan untuk mempelajari sebuah bahasa hingga 50%, lalu pelajari
bahasa baru lainnya.Jadi
ketika sebuah bahasa pemrograman sudah sobat kuasai hingga 50%, anda
bisa melanjutkannya ke bahasa lain sehingga setahap demi setahap sobat
akan menguasai semuanya karena saling berkaitan, dan begitu seterusnya.
Bagi kebanyakan orang, cara ini lebih efektif ketimbang mempelajari
semuanya secara bersamaan. Selain pemrograman, anda juga perlu belajar
untuk membuat desain grafisnya. Tahap awal bisa juga untuk mengambil
elemen-elemen grafis dari Internet, yang gratis pastinya :) Banyak kok
website yang menyediakan desain header, tombol, dan pernak-pernik gambar
untuk blog sobat.
Untuk Membuat Desain Sobat bisa pergunakan software bantuan seperti photoshop ataupun Dreamweaver. Berikut sedikit tutorialnya :
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
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
|
< html >
< head >
< title >Untitled-1</ title >
< meta http-equiv = "Content-Type" content = "text/html; charset=iso-8859-1" >
< style type = "text/css" >
.content {
background:url(images/index_06.png) bottom;
padding:20px 20px 40px 20px;
}
</ style >
</ head >
< body bgcolor = "#FFFFFF" leftmargin = "0" topmargin = "0" marginwidth = "0" marginheight = "0" >
< table id = "Table_01" align = "center" width = "700" height = "377" border = "0" cellpadding = "0" cellspacing = "0" >
< tr >
< td height = "94" >
< img src = "images/index_01.gif" width = "281" height = "94" alt = "" ></ td >
< td rowspan = "4" >
< img src = "images/index_02.gif" width = "419" height = "328" alt = "" ></ td >
</ tr >
< tr >
< td height = "76" >
< img src = "images/index_03.gif" width = "281" height = "76" alt = "" ></ td >
</ tr >
< tr >
< td height = "64" >
< img src = "images/index_04.gif" width = "281" height = "64" alt = "" ></ td >
</ tr >
< tr >
< td height = "94" >
< img src = "images/index_05.gif" width = "281" height = "94" alt = "" ></ td >
</ tr >
< tr >
< td colspan = "2" class = "content" ></ td >
</ tr >
</ table >
</ body >
</ html >
|
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.htmlpada folder yang sama, save as lagi dengan nama file gallery.html dan yang terakhirlink.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 masing-masing 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.