lebih jauh dengan Flash 6

Dasar-dasar Design Web

L I C E N C E

Judul : Dasar-dasar Design Web Penulis : Komarudin Surya Copyright : Suryatekno © 2008 Aturan : Materi ini boleh Anda Copy hanya untuk kepentingan Pribadi. Tidak boleh diperjual-belikan, atau dimanfaatkan untuk kepentingan Komersial. Pengutipan atau pemindahan sebagian atau keseluruhan materi ke situs ataupun Media Lain, tidak di ijinkan dengan alasan apapun tanpa seijin dari Penulis cq:Komarudin Surya.

Sang Designer dan Sang Pemikir yang Jenius

Waktu terus berjalan, sang designer kita sekarang sudah menjadi profesional dengan pekerjaan nya. Karena dengan kepandaian nya mendesign sebuah web, sekarang dia menjadi tambah pusing lagi dengan order-order yang datang dari sana-sini. Tentu saja sekarang dia harus memikirkan suatu cara yang cepat dan akurat untuk menyelesaikan order-order yang diterima nya. Anda sebagai sahabat sejatinya, menjadi senang sekaligus prihatin dengan kondisi ini. Sebab hampir setiap hari sang designer kita itu dikejar-kejar oleh pelanggan nya untuk segera menyelesaikan design web nya. Walah-walaaah..., ternyata menjadi profesional itu tidak enak juga yah keluhnya. Apa ada yah suatu program yang dapat mempermudah dalam pendesign-an web ini..?, tanya dia kepada Anda. lalu Anda pun menjawabnya, Pasti ada donk..!, sebab semua orang juga memikirkan bagaimana membuat sesuatu itu menjadi mudah dan cepat..!, kilah Anda dengan semangat.

Tapi Program apa yang bisa membuat design web ku ini menjadi lebih cepat dan mudah..?, tanya dia lagi. Waaaaah..., untuk saat ini saya tidak tahu tuh..!, tapi pasti ada deh. Uuummmmh..., bagaimana kalau kita tanyakan pada Bang Einstein untuk hal tersebut.?, jawab Anda. Tapi saya malu bertanya pada dia, keluh dia lagi. Untuk mendapatkan ilmu jangan malu untuk bertanya pada siapa saja.., walaupun Bang Einstein itu terlihat eksentrik, tetapi dia punya banyak akal dan segudang ilmu yang mungkin bisa menyelesaikan masalah kamu itu..!, jawab Anda dengan antusias. Kamu benar.., Kalau begitu yuk antar saya ke Bang Einstein..!, sambung dia. Maka Anda berdua pun pergi menuju tempat nya Bang Einstein untuk mencari penyelesaian masalah teman sejati Anda itu.

Sesampai nya di tempat Bang Einstein, Anda pun langsung mengungkapkan permasalahan yang dihadapi rekan Anda tersebut. Pada saat itu Bang Einstein berpikir serius tanpa bersuara untuk mencari solusi dari permasalahan tersebut. Tak lama kemudian Bang Einstein berkata. " Untuk memudahkan dalam merancang apapun, diperlukan sebuah template atau wadah yang dapat menampung maksud yang sama. Sehingga template tersebut dapat digunakan lagi dilain waktu tanpa harus membuat lagi maksud yang sama. " Mendengar penuturan dari Bang Einstein itu Anda berdua masih terlihat bingung mengenai maksud dari solusi yang diberikan Bang Einstein tersebut. Melihat gelagat itu, Bang Einstein pun tersenyum kemudian dia berkata lagi. Saya mengerti bila Kalian berdua bingung apa yang saya ucapkan tadi, Ok lah sekarang saya beri contoh yang mudah mengenai pemikiran saya tersebut. Kalian lihat batu bata yang ada dipinggir rumah ku ini..!, seru dia sambil menunjukan jarinya ke arah samping. Anda berdua pun menoleh ketempat yang ditunjukan oleh Bang Einstein. Dapatkah kalian berdua membuat sebuah batu bata yang sama ukuran nya, tanpa menggunakan cetakan..?, tanya Bang Einstein pada Anda berdua. Dengan kompak Anda berdua menjawab "Tidak bisa..!". Lalu Bang Einstein berkata lagi. Sebenarnya bisa, tetapi tentu saja memerlukan waktu yang lebih lama ketimbang memakai cetakan. Nah.., Cetakan inilah yang membuat pekerjaan membuat batu bata ini jadi cepat. Tapi apa hubungan nya batu bata dengan design web..?, tanya Anda pada Bang Einstein. Bang Einstein tidak menjawab pertanyaan Anda, tetapi dia tersenyum. Kemudian dia berkata lagi. Saya dengar kalian berdua sedang mempelajari design web..!, Anda berdua pun mengangguk seperti burung pelatuk. Sekarang saya bertanya pada Kalian berdua.., bagaimana cara penulisan program HTML untuk membuat huruf berjenis ARIAL yang berukuran 12 dan berwarna merah..?, tanya Bang Einstein sambil mengambil secarik kertas dan sebuah pena, kemudian diserahkan kepada teman Anda yang dari tadi terlihat bengong. Kemudian teman Anda tersebut menuliskan nya pada kertas yang diberikan Bang Einstein. Tulisan nya sebagai berikut : <font face="arial" size="2" color="red"> Lalu Bang Einstein bertanya lagi pada Anda berdua. Berapa banyak perintah ini Kamu tulis dalam suatu design web..?. Lalu teman Anda itu menjawab, Yah.., banyak dan hampir setiap saat saya menuliskan nya. Bisakah Kamu ringkas perintah itu dengan suatu template..? , tanya Bang Einstein lagi. Teman Anda tersebut cuma menggelengkan kepalanya seperti orang membaca tahlilan dalam ISTIGHOSAH. Bang Einstein tersenyum melihat kelakuan teman Anda tersebut, kemudian dia berkata lagi. Pernahkah kalian mendengar suatu script yang disebut dengan Cascading Style Sheet..?, Anda berdua pun menjawab, "Pernah..!". Sekarang gunakan CSS sebagai template untuk memudahkan Kalian dalam men-design sebuah web, seru Bang Einstein. Lalu Anda berdua pun saling berpandangan dan tertawa gembira atas penuturan Bang Einstein tersebut. Inilah rupanya maksud dari penuturan Bang Einstein semula. Bahwa untuk memudahkan suatu design, maka diperlukan sebuah template, dan dalam design web dengan HTML, CSS itulah salah satu template nya. Setelah paham mengenai penuturan Bang Einstein tersebut, Anda berdua pun pamit dan mengucapkan banyak terima kasih atas pemikiran nya tersebut.

C A S C A D I N G    S T Y L E    S H E E T

Cascading Style Sheet atau yang disingkat menjadi CSS itu adalah suatu script yang digunakan dalam HTML untuk beberapa keperluan seperti :

Menentukan jenis Font atau Huruf. Menentukan ukuran Font. Menentukan background halaman web Merubah tampilan kursor. Merubah tampilan SCROLL BAR dari browser dan form. Merubah tampilan link dari suatu hyperlink. Memasukan ( embeding ) animasi. Menempatkan sebuah objek tertentu pada lokasi tertentu di halaman browser. Dan lain sebagai nya.

Dasar penulisan script css ini sebenarnya di adopsi dari bahasa pemrograman JAVA, maka oleh sebab itu semua perintah dalam css juga mengacu pada hirarki pemrograman bahasa JAVA. Boleh dikatakan hampir semua design web yang ada didunia maya menggunakan css sebagai salah satu bagian aplikasinya. Sekali Anda membuat script css, maka script tersebut berlaku untuk semua perintah yang ada dihalaman web yang menggunakan css tersebut. Beberapa keuntungan yang di dapat dengan menggunakan css antara lain :

Ukuran font menjadi standar di semua browser sesuai dengan yang kita kehendaki. Dapat dipanggil dimana saja dalam tag atau perintah HTML. dengan perintah class="kode css". Script HTML yang dibuat menjadi ringkas dan mudah di rubah bila ada kesalahan. Design web menjadi lebih profesional, dan terstruktur.

Untuk membuat script css tidaklah sulit, Anda tinggal menulisakan perintah-perintah css diantara tanda kurung kurawal < { } > dan perintah-perintah nya dipisahkan dengan tanda titik koma ; . Setiap perintah dalam css harus diberi initial yang diletakkan di depan perintah css sebelum tanda kurung kurawal dibuat, kecuali bila perintah css dituliskan langsung pada tag maka initial ini tidak perlu dibuat.

Perintah-perintah CSS : I . Untuk penanganan font dan teks

font-size: - Perintah ini digunakan untuk menentukan ukuran huruf yang digunakan. Satuan nya dinyatakan dengan pixel. font-family: - Perintah ini digunakan untuk menentukan jenis huruf yang digunakan seperti : arial, helvetica, sans serif, verdana dan sebagainya. font-style: - Perintah ini digunakan untuk menentukan tampilan dari suatu font yang dinyatakan dengan normal, atau bold. font-weight: - Perintah ini sama seperti font-style diatas, hanya saja biasanya digunakan untuk link dan perubahan nya ketika mouse mendekati link tersebut. ( mouseover ) text-decoration: - Perintah ini digunakan untuk memberikan efek pada suatu teks seperti underline, italic dan sebagainya. text-transform: - Peritah ini digunakan untuk merubah bentuk suatu font, misalkan anda mengingin kan suatu teks tetap dijadikan huruf besar semuanya atau sebaliknya. Untuk huruf kecil digunakan lowercase , untuk huruf besar digunakan uppercase text-align: - Perintah ini untuk mendeklarasikan secara umum posisi teks atau margin dalam suatu bidang. color: - Perintah ini digunakan untuk menentukan warna dari font yang dikehendaki, penulisan warna digunakan kode warna dalam heksa. Contoh penulisan script css yang digunakan untuk penanganan font dan teks. .contoh1 { font-size: 12px; font-family: verdana; font-style: normal; font-weight: normal; text-decoration: none; text-transform: lowercase; }

Perhatikan tanda kurung kurawal, titik, titik dua dan tanda titik koma pada contoh diatas. sebab itu akan mempengaruhi fungsinya. Sekarang Anda lihat link Footer Link dibawah halaman tutorial ini, link itu menggunakan css. Script untuk link tersebut sebagai berikut : .hlink { font-family: Verdana, Arial, Helvetica, sans-serif; text-decoration: none; font-size: 9pt; color: black; font-weight: normal; } .hlink:hover { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 9pt; text-decoration: none; background-color: orange; font-weight: normal; } Contoh Penulisannya : <a class="hlink" href="contoh.html" title="contoh">Contoh Link</a> II . Untuk penanganan background

background-color: - Atribut ini digunakan untuk menentukan warna latar. Nama warna diisi dengan kode heksa, contoh : #FFFFFF, #CCCCCC . background-image: url(alamat url) - Atribut ini digunakan untuk menentukan latar dengan suatu images, misalkan Anda punya suatu images yang akan dijadikan background maka atribut ini digunakan pada script CSS. Penempatan alamat url dari images yang digunakan dituliskan di dalam kurung, contoh : background-images: url(../images/back.gif); background-repeat: - Atribut ini digunakan untuk menyatakan suatu background yang berbentuk images akan diulang atau tidak, bila diulang maka diisi dengan repeat-x;, bila tidak diulang diisi dengan no-repeat;. background-position: - Atribut ini digunakan untuk menentukan lokasi suatu background yang berbentuk images akan diletakan pada area yang ditentukan. contoh : background-position: center; , akan menempatkan background pada posisi ditengah-tengah bidang.

I . Atribut CSS untuk penanganan tabel

border-right: - Atribut ini digunakan untuk menentukan warna border bagian kanan dari tabel. border-top: - Atribut ini digunakan untuk menentukan warna border bagian atas dari tabel. border-left: - Atribut ini digunakan untuk menentukan warna border bagian kiri dari tabel. border-bottom: - Atribut ini digunakan untuk menentukan warna border bagian bawah dari tabel. padding-right: - Atribut ini digunakan untuk menentukan besarnya jarak padding sebelah kanan dari tabel. Satuan nya dinyatakan dengan pixel, contoh ( 1px; , 5px; ). padding-left: - Atribut ini digunakan untuk menentukan besarnya jarak padding sebelah kiri dari tabel. Satuan nya dinyatakan dengan pixel, contoh ( 1px; , 5px; ). padding-bottom: - Atribut ini digunakan untuk menentukan besarnya jarak padding bawah dari tabel. Satuan nya dinyatakan dengan pixel, contoh ( 1px; , 5px; ). padding-top: - Atribut ini digunakan untuk menentukan besarnya jarak padding atas dari tabel. Satuan nya dinyatakan dengan pixel, contoh ( 1px; , 5px; ).

Sebenarnya masih banyak atribut-atribut dari script CSS yang belum saya tuliskan disini. Saya memberi tugas pada Anda untuk mencarinya dari sumber yang lain agar Anda menjadi kreatif dan Aktif dalam mempelajari script CSS ini. Bila Anda mendapatkan suatu konfigurasi dan atribut lain yang dapat menambah pengetahuan Anda pada script CSS ini, tolonglah berbagi dengan rekan-rekan yang lain nya melalui forum yang kami sediakan yaitu : SSC FORUM.. Sampai disini dahulu pembahasan TUTORIAL DASAR-DASAR DESIGN WEB ini saya uraikan, Saya berharap mudah-mudahan tutorial ini dapat bermanfaat untuk Anda yang sedang atau yang akan mempelajari Design Web. Kelanjutan Tutorial ini adalah TUTORIAL DASAR PEMROGRAMAN JAVASCRIPT, yang Insya ALLAH bila sudah mendapatkan restu dari SURYA PUTRA TEKNOKINDO (Suryatekno) sebagai pengasuh situs ini, akan di Publishkan secara bertahap. Tunggu Saja waktu tayang nya yah...! , BTW Saya sudah lelah nih.., ingin Istirahat dulu serta ingin bertemu dinda yang mungkin dia sudah bosan lihat saya berkutat di depan Komputer sambil tertawa sendiri, Mmmmmmmuuuuuaaaah..!, Sun hangat buat Dinda yang mungkin kebetulan lihat tutorial ini..  Eiit..!, tunggu dulu trus bagaimana nasib sang Designer kita selanjutnya..?, Hehehehehe.. , Designer kita ini nantinya akan tetap menjadi aktor pada tutorial lanjutan nya. Tunggu saja kelanjutan ceritanya.., Oh yah.., Saya mohon maaf bila Ada yang merasa tersinggung atau tidak senang dengan aktor yang saya pakai dalam tutorial ini. Cerita, Lokasi, dan Nama pada cerita tutorial ini hanya FIKTIF belaka, saya sajikan cerita tersebut agar Anda tidak jenuh dalam mengikuti tutorial ini yang boleh dikatakan cukup membosankan. Bila Ada kritik atau saran silahkan utarakan pada forum SSC. Bandung dan Jakarta, Agustus, September dan Oktober 2006. Salam dari Saya, Komarudin Surya. Cheeeeerrrrrrrrrrrrr...!!!

Posted in: info,InfoBlog