Jerry Zhang

WBP: CSS and HTML

Posted on: May 17, 2010

WBP: CSS and HTML

Cascading Style Sheet (CSS) merupakan salah satu bahasa pemrograman web untuk mengendalikan beberapa komponen dalam sebuah web sehingga akan lebih terstruktur dan seragam.

Sama halnya styles dalam aplikasi pengolahan kata seperti Microsoft Word yang dapat mengatur beberapa style, misalnya heading, subbab, bodytext, footer, images, dan style lainnya untuk dapat digunakan bersama-sama dalam beberapa berkas atau file. Pada umumnya CSS dipakai untuk memformat tampilan halaman web yang dibuat dengan bahasa HTML dan XHTML

Bayangkan jika anda memiliki website dengan 100 halaman.  Bayangkan apabila anda ingin mengganti jenis huruf dari tiap website.  Hal tersebut tentu saja sangat membuang waktu, tetapi jika anda menggunakan CSS untuk mendesain tampilan web, maka hal tersebut dapat dilakukan dengan mudah.

CSS dapat mengendalikan ukuran gambar, warna bagian tubuh pada teks, warna tabel, ukuran border, warna border, warna hyperlink, warna mouse over, spasi antar paragraf, spasi antar teks, margin kiri, kanan, atas, bawah, dan parameter lainnya.  CSS adalah bahasa style sheet yang digunakan untuk mengatur tampilan dokumen.  dengan adanya CSS memungkinkan kita untuk menampilkan halaman yang sama dengan format yang berbeda.

Sehingga ketika kita mendesain tampilan dokumen (terutama HTML) dengan memisahkan isi dari dokumen HTML dengan kode untuk menampilkannya (CSS).  Dan jika kita memiliki banyak file HTML, kita hanya perlu satu file CSS, sehingga ketika kita mengganti jenis huruf pada file CSS maka semua file HTML yang berhubungan pada file CSS tersebut akan berubah.  CSS distandarisasi oleh W3C (World Wide Web Consortium).  CSS dapat dipasang pada dokumen HTML yang telah jadi.



Contoh CSS: Clik here!

Contoh simple pengunaan CSS (coding): Click Here!

hehez :p


Apa Hubungan CSS dan HTML?

CSS bekerja sebagai pelengkap pada HTML.  CSS memungkinkan web developer untuk memisahkan HTML dari aturan aturan untuk membentuk tampilan sebuah website

Fungsinya :

  1. Dengan memperggunakan CSS memungkinkan mendapatkan file yang kecil.  Dengan mempergunakan CSS, akan diperoleh file hasil web design lebih kecil. Hal ini karena pengaturan style oleh CSS dibuat secara terpisah dan di import ke dalam file utama.  Halaman dengan script yang sedikit berarti akan didapat file yang lebih kecil pula dan Google lebih suka file yang kecil.  Meskipun secara Google tidak memberikan pernyataan secara resmi, tetapi dari beberapa sumber dari SEO komunitas, bahwa mereka setuju untuk tidak membuat sebuah halaman web lebih besar dari 100KB.
  2. Kecepatan Acess akan jauh lebih cepat. Dari keterangan diatas, maka akan diperoleh file yang jauh lebih kecil.  Hal ini berarti juga akan mempercepat acces untuk membuka halaman website.  Selain itu pada waktu membuka pertama kali dari sebuah halaman website yang mempergunakan CSS, maka file CSS yang disimpan sebagai external file akan disimpan sebagai chache (temporary data) dalam computer browser dan untuk membuka halaman selanjutnnya akan jauh lebih cepat.  Hal ini karena file CSS sudah siap (sudah ada dalam computer browser).
  3. Lebih mudah untuk mengontrol style dari seluruh halaman website. Dengan menggunakan CSS akan sangat mempermudah mengotrol style dari seluruh halaman web site.  Hal ini dikarenakan kita hanya merubah satu halaman untuk merubah seluruh style dari sebuah website.
  4. CSS memungkinkan menyembunyikan content dari browser, tapi masih di index oleh google. CSS memungkinkan kita menyembunyikan Content dari halaman website dari browser, tetapi memungkinkan masih dibaca oleh google.  Hal ini tidak kami maksudkan untuk tujuan search engine spaming, tetapi dikarenakan oleh hal lain.  Misalnnya anda menghendaki sebuah content untuk disembunyikan dari browser, tatapi masih bisa Nampak ketika diprint, atau sebaliknnya.


Accordion adalah efek yang memungkinkan suatu tampilan besar disembunyikan menjadi kecil dengan mewakilkannya pada sebuah header atau tombol.  Dengan mengklik header tersebut tampilan yang berisi banyak tulisan itu baru muncul, ketika di klik lagi makan akan tersembunyi.  Sehingga menghemat tempat.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: