Apa saja hal dasar yang perlu dipelajari dalam web design?
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 → Membuat
Tidak 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.
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 → Membuat
Tidak 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"> <!-- ImageReady Slices (Untitled-1.psd) --><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><!-- End ImageReady Slices --></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.
Tks Bro atas ilmu gratisannya yg bermanfaat, smg mendpt pahala yg berliipat dari YMK. Aamiin YRA.
BalasHapusTapi dasarnya sy gaptek banget, sy msh bingung :
1. Tambahan CSS di tag2 HTML yg berwarna merah yg mana ya,
karena yg warna merah banyak, tapi CSS nya cuma
2. Sy jg mau belajar flash, sy lihat bagus jg hasilnya, tp wkt sy download & install, ga ketok aikennya, kalau mau di uninstall Adobe Flash nya, baru kelihatan, piye yo Bro. (Hehehe dah gaptek, pake mau belajar flash lg gaya)
3. http://herbal-fillahely.blogspot.com/ ini hasil sy belajar, tp msh belum mantab rasanya kalau menu2nya ga 3D.
Ade ga Bro resep menu 3D nya ?
Bro maaf nih, saya bener2 nanya nih. Saking gapteknya, sy bisa duduk depan laptop dari jam 07 - 14 , gara2 gregetan ga bisa2.
Da ah Bro
Tlg ya Bro
Tks