Headlines News
Home » , » Tutorial Cascading Style Sheet (CSS)

Tutorial Cascading Style Sheet (CSS)


 Pernah dengar istilah di atas? (bukan, bukan yang "Kata-kata Introduksi" tapi di atasnya lagi, nah bener yang itu, "Cascading Style Sheet" atau sering disebut CSS). Mungkin sebahagian besar akan menjawab "YA". Pun, kalau semisal belum sekarang jadi sudah. Karena Cascading Style Sheet adalah suatu teknologi yang digunakan untuk memperindah tampilan halaman website (situs). Singkatnya dengan menggunakan Metode CSS ini anda dengan mudah mengubah secara keseluruhan warna dan tampilan yang ada di situs anda, sekaligus memformat ulang situs anda (merubah secara cepat). Jelas, dengan sedikit berfikir dan menggunakan logika maka anda akan mendapatkan hasil yang memuaskan, maka sedari itu baca semua tutorial ini sampai habis, dicoba langsung, kemudian jika bisa dikembangkan, sehingga kalau misalnya anda ingin sedikit memodifikasikan kode yang telah dibuat di dalamnya sangatlah gampang, apalagi bla...bla...bla... dan bla..bla….(wah... bakat ceramah saya tiba2 kambuh (",) ma'af) ya udah pokoknya CSS itu digunakan untuk memperindah tampilan situs, terserah anda mo mendefinisikannya bagaimana? (lihat definisi saya yang di Italic-kan). 

Bagi anda yang baru dalam bidang ini jangan khawatir, karena memang tutorial ini sangat mendasar, tetapi setidaknya sudah menguasai dasar-dasar HTML. Dan bagi anda yang sudah mahir jangan ngejek dunks, toh, saya sudah ngaku ini tutorial untuk yang "pemula saja". Hehehe... :-) peace, bro's. Ya udah, Baca aja deh... syukur-syukur nambah pengetahuan atawa temen dikala gak bisa tidur, gitu baca tutorial ini langsung (Zzz... Zzz... Zz... grok.. grok...) tertidur deh hehehe... kelihatannya yang belakangan disebut yang paling sering dipilih.

Anggap ini Mudah.....
Sekarang coba kita mulai dengan contoh-contoh yang ringan aja dulu (dalem hati : syukur-syukur gak tau Seluruh dokumen di IlmuKomputer.Com dapat digunakan, dimodifikasi dan disebarkan secara bebas untuk tujuan bukan komersial (nonprofit), dengan syarat tidak menghapus atau merubah atribut penulis dan pernyataan copyright yang disertakan dalam setiap dokumen. Tidak diperbolehkan melakukan penulisan ulang, kecuali mendapatkan ijin terlebih dahulu dari saya. kalau ini alih-alih karena gak mampu buat yang ribet..... Note: Kalau misalnya malas menyalin kode HTML nya, gunakan tekhnik 2 jurus yang sangat ampuh. Ya, bener "kopi dan paste" bukan kopi dan teh manis ya!

Pertama- tama mari kita coba dengan kode di bawah ini silahkan kalian copy ke Notepad atau Program Compiler HTM anda.

<HTML>
<HEAD>
</HEAD>
<BODY>
P: Mengapa jika kita anggap <B>suatu pekerjaan</B> itu mudah
maka pekerjaan itu akan beneran menjadi<B> lebih mudah</B>?
<P>
J: Karena itu merupakan <B>sugesti</B> terhadap <B>diri kita
sendiri</B>
</BODY>
</HTML>

Nah, seperti yang anda lihat beberapa huruf pada kalimat-kalimat di atas menjadi BOLD (ditebalin), karena fungsi dari tag <B> dan </B> adalah untuk menebalkan huruf. Lihat kembali catatan-catatan atau tutorial-tutorial untuk membuat HTML anda. Sekarang coba bayangkan bagaimana jika kita ingin membuat warna pada huruf-huruf yang ditebalkan itu? Katakan saja kita ingin mewarnainya dengan hijau? Mungkin.
Kebanyakan kita akan buat listing kodenya seperti ini :

<HTML>
<HEAD>
</HEAD>
<BODY>
P: Mengapa jika kita anggap <B><FONT COLOR="Lime">suatu
pekerjaan</FONT></B> itu mudah maka pekerjaan itu akan
beneran menjadi<B><FONT COLOR="Lime"> lebih mudah
</FONT></B>?
<P>
J: Karena itu merupakan <B><FONT COLOR="Lime">sugesti
</FONT></B> terhadap <B><FONT COLOR="Lime">diri kita
sendiri </FONT></B>
</BODY>
</HTML>

Bagaimana hasilnya di browser? Huruf yang ditebalin sekarang sudah berwarna "hijau", sekarang coba
bandingkan kemudahan yang didapat jika kita menggunakan Style-Sheet.

<HTML>
<HEAD>
<STYLE TYPE="text/css">
B { color : lime }
</STYLE>
</HEAD>
<BODY>
P: Mengapa jika kita anggap <B>suatu pekerjaan</B> itu mudah
maka pekerjaan itu akan beneran menjadi<B> lebih mudah</B> ?
<P>
J: Karena itu merupakan <B>sugesti</B> terhadap <B>diri kita
sendiri</B>
</BODY>
</HTML>

Kedua contoh di atas terlihat persis sama di browser, jadi apa untungnya buat kita? Hehehe... masih belum ngerti juga? Jika anda menggunakan style-sheet maka listing code anda setidaknya akan lebih mudah dibaca dan di atur. Keuntungan yang kedua, kita dapat melakukan ini dimana saja dan kapan saja. Ini akan anda pahami setelah anda berpindah ke tahap selanjutnya yang lebih berbobot. (wah salut... berarti ini masih "piece of cake" khan bro?). Coba-coba? Silahkan! Eh... tiba-tiba saja terfikir untuk menggantikan warna dengan kode RGB nya, layaknya perintah-perintah HTML dasar. bagaimana? Bisa tidak ya?.

Seperti terlihat di bawah ini kita cukup menggantikannya saja untuk mendapatkan variasi warna.

<STYLE TYPE="text/css">
B { color : #CC6633 }
</STYLE>

Bagaimana? Sama mudahnya bukan? Bagi anda yang sudah familiar dengan beberapa perintah HTML,
maka beberapa modifikasi dapat anda buat misalnya seperti contoh di bawah :

<HTML>
<HEAD>
<STYLE TYPE="text/css">
I { color : red }
</STYLE>
</HEAD>
<BODY>
P: Mengapa jika kita anggap <I>suatu pekerjaan</I> itu mudah
maka pekerjaan itu akan beneran menjadi<I> lebih mudah</I>?
<P>
J: Karena itu merupakan <I>sugesti</I> terhadap <I>diri kita
sendiri</I>
</BODY>
</HTML>

Anda lihat saya mengganti huruf "B" dengan Huruf "I", sehingga jika menurut kebiasaan browser (berlebihan tidak bahasanya?) akan menganggap baris yang diberi tag tersebut menjadi ITALIC. Sekarang lihat hasilnya pada browser. Timbul pertanyaan bagaimana jika untuk UNDERLINE atawa garis di bawah huruf? Ya benar, hal ini juga masih berlaku.

Nah.. sekarang saya ingin mencoba sedikit pemahaman anda ☺ ! Jika saya ingin kata "suatu pekerjaan" dari contoh di atas menjadi berwarna merah dan ITALIC, terus kata "lebih mudah" kita buat menjadi berwarna hijau dan BOLD, terus untuk menambah kebingungan anda jadikan kata "sugesti" dengan UNDERLINE dan berwarna merah, serta kata "diri kita sendiri" menjadi hijau dan BOLD.

Saya kehendaki tampilannya seperti itu pada browser bagaimana? ehm.. menurut anda, membuat kode HTML nya? Susah? Wah... payah deh (",) ---> ini senyum, tapi kalau mau yang lebih mantab lagi seperti ini c",) --> isn't it cool, huh? (ini macemnya gak ada hubungannya ya? Tapi cuek aja deh, wong ini tutorial saya yang bikin kok, kalau anda yang buat terserah anda. Kan adil? hehehe)
Coba seperti ini :

<HTML>
<HEAD>
<STYLE TYPE="text/css">
I,U { color: red }
B { color : green }
</STYLE>
</HEAD>
<BODY>
P: Mengapa jika kita anggap <I>suatu pekerjaan</I> itu mudah
maka pekerjaan itu akan beneran menjadi<B> lebih mudah</B>?
<P>
J: Karena itu merupakan <U>sugesti</U> terhadap <B>diri kita
sendiri</B>
</BODY>
</HTML>

Anda lihat saya hanya mengubah beberapa huruf serta menambah beberapa perintah saja, dan hasilnya
wow... mengagumkan.
Sekarang sudah jelas mengapa saya katakan css dapat menghemat kode dan waktu anda dalam mendesain tampilan situs anda. Jika suatu kali anda bosan dengan warna atau bentuk tulisan pada tampilan situs anda, hanya dengan mengubah dan menambah variasi dari perintah css anda akan mendapatkan tampilan yang
lebih menarik bukan? Dan juga benar-benar menghemat waktu.
Terima kasih sudah menyimak tutorial dari saya semoga bermanfaat tunggu kelanjutan Tutorial CSS berikutnya ya Sobat Blogger........
Sobat sedang membaca artikel Aplikasi Online tentang Tutorial Cascading Style Sheet (CSS) dan Sobat bisa menemukan artikel Tutorial Cascading Style Sheet (CSS) ini dengan url Sobat boleh menyebar luaskannya atau mengcopy paste-nya jika artikel Tutorial Cascading Style Sheet (CSS) ini sangat bermanfaat bagi teman-teman, namun jangan lupa untuk meletakkan link Tutorial Cascading Style Sheet (CSS) sumbernya.

Jika Anda menyukai Artikel di blog ini, Silahkan klik disini untuk berlangganan gratis via email, dengan begitu Anda akan mendapat kiriman artikel setiap ada artikel yang terbit di Creating Website

0 comments:

Post a Comment

 
Support : Creating Website | Johny Template | Mas Template
Copyright © 2011. Free Aplikasi Full Version - All Rights Reserved
Template Modify by Creating Website
Proudly powered by Blogger