Cascading Style Sheet (CSS)

Sebelum mempelajari CSS anda harus mengetahui HTML DASAR  terlebih dahulu .  CSS singkatan dari Cascading Style Sheet . CSS merupakan sebuah bahasa pemrograman yang fungsinya untuk menstrukturkan komponen-komponen web yang beragam sesuai dengan keinginan kita.

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 (file). Pada umumnya CSS dipakai untuk memformat tampilan halaman web yang dibuat dengan bahasa HTML dan XHTML

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

Cara Penulisan CSS: 

1. Inline Style Sheet
2. Embed Style Sheet
3. Linked Style Sheet

CSS 3

CSS3 merpukan generasi ke-3 dari perkembangan CSS sebelumnya. Jadi pada dasarnya, pengertian CSS3 sama saja dengan pengertian CSS generasi paling awal. Hanya saja, beberapa standar baru untuk CSS3 menggantikan CSS2 dan mungkin akan membuat kiat dapat bereksplorasi lebih dalam lagi untuk membuat tampilan situs lebih menarik dan mulai meninggalkan situs yang membuat menunggu dengan loading yang lama.

Keunggulan CSS3:

•         Struktur data sederhana
•         CSS3 mampu membuat efek animasi secara independent tanpa membutuhkan software  tambahan seperti Adobe Flash dan Microsoft Silverlight.
•         CSS3 mampu memberikan efek grafis terhadap teks, kolom, table serta penataan huruf.
•         CSS3 mampu menampilkan berbagai macam dan jenis huruf selain web-safe fonts.
•         CSS3 mampu merekonstruksi secara visual tampilan block, seperti merubah ukuran kotak, transformasi 2D/ 3D, memberikan efek sudut dan bayangan.
•         CSS3 mampu memanipulasi secara visual warna, desain maupun tekstur.
•         Bisa mengurangi ukuran file yang akan di-load dan lebih ringan.
•         Lebih mudah dan simple serta dapat menghindari penggunaan tag yang berulang-ulang.
•         Banyak yang beranggapan bahwa peran jQuery sudah tidak dibutuhkan lagi setelah CSS3  semakin berkembang kedepannya. Apalagi dari segi size, jQuery jauh lebih besar size-nya daripada CSS3. Tidak hanya jQuery saja, peran Flash saja sudah mulai tergantikan dengan adanya CSS3.
•        Sebaiknya membuat file CSS3 yang terpisah dari file html (External Style Sheet) dan dapat  dipanggil di file html. Hal ini dapat mempermudah kita jika terjadi pengeditan file. Karena, jika terjadi perubahan layout pada website, kita hanya perlu mengedit file cssnya saja, tanpa mengubah file htmlnya. Oleh karena itu, External Style Sheet lebih direkomendasikan daripada Inline Style Sheet

Apa itu Bootstrap?

Bootstrap adalah platform baru yang dikembangkan tim twitter. Pertama kali muncul pada ajang hackweek dan kini sudah mulai penyempurnaan. Platform ini hanya menggunakan sedikit coding CSS dan JavaScript namun tetap bisa membuat website yang powerfull mengikuti perkembangan browser. Website yang menggunakan bootstrap akan menjadi website yang fleksibel, nyaman dan tentu saja cepat.

Bootstrap juga memudahkan pengaturan website bagi mereka yang kurang mahir coding atau tidak punya waktu banyak. Sekumpulan javascript dan CSS yang dibutuhkan untuk banyak sekali widget ada dalam satu file yang terus di update oleh pengembang. Pemilik website tidak akan lagi disibukkan dengan pengaturan css atau javascript berlebihan. Mereka hanya perlu menentukan gadget atau elemen apa yang ingin ditampilkan dalam bentuk HTML standart bootstrap yang sangat simple.

Misalkan dulu untuk menambahkan menubar di blogspot, maka Anda perlu menyisipkan file CSS, HTML bahkan JavaScript untuk effect tertentu. Kemudian ketika Anda ingin menambahkan dropdown menu, maka per widget, paling tidak Anda butuh menambahkan CSS dan HTML lagi. Belum lagi jika ingin lebih menarik akan dibutuhkan javascript tambahan. Begitu seterusnya setiap penambahan widget selalu dibutuhkan banyak kode. Tapi setelah instalasi bootstrap, Anda hanya perlu menambahkan kode HTML nya saja.


Tapi...  Penggunaan bootstrap kadang membuat kita jadi kurang kreatif, Coding yang sudah di buatkan oleh pengembang membuat desain web kita terbatas. Sebenarnya kita masih bisa tambahkan CSS manual pada elemen-elemen bootstrap untuk mempercantiknya, tapi jelas ini membuat web kita nanggung. Menambahkan CSS manual sama saja kembali ke cara lama.

Jadi, pilihan Anda apakah akan mengikuti perkembangan jaman bersama bootstrap, editing dan kelola website secara instan. Atau lebih suka oprek template sendiri berkutat dengan kode CSS yang Anda susun-susun sendiri.

Contoh Template Bootstrap

DEMO | DOWNLOAD

DEMO | DOWNLOAD

HTML5

Dari penjelasan yang ada di wikipedia : HTML5 merupakan sebuah bahasa markah untuk menstrukturkan dan menampilkan isi dari World Wide Web, sebuah teknologi inti dari Internet. HTML5 adalah revisi kelima dari HTML dan hingga bulan Juni 2011 masih dalam pengembangan.

Dimana tujuan utama pengembangan HTML5 adalah untuk memperbaiki teknologi HTML agar mendukung teknologi multimedia terbaru, mudah dibaca oleh manusia dan juga mudah dimengerti oleh mesin.

HTML5 merupakan hasil proyek dari W3C (World Wide Web Consortium dan WHATWG ( Web Hypertext Application Technology Working Group ).
Dimana WHATWG bekerja dengan bentuk web dan aplikasi dan W3C merupakan pengembang dari XHTML 2.0 pada tahun 2006, kemudian mereka memutuskan untuk bekerja sama dan membentuk versi baru dari HTML.

Berikut tujuan dibuatnya HTML5 :

• Fitur baru harus didasarkan pada HTML, CSS, DOM, dan JavaScript
• Mengurangi kebutuhan untuk plugin eksternal ( Seperti Flash )
• Penanagan kesalahan yang lebih baik
• Lebih markup untuk menggantikan scripting
• HTML5 merupakan perangkat mandiri
• Proses pembangunan dapat terlihat untuk umum

Fitur baru dalam HTML5 :

• Unsur kanvas untuk menggambar
• Video dan elemen audio untuk media pemutaran
• Dukungan yang lebih baik untuk penyimpanan secara offline
• Elemen konten yang lebih spesifik, seperti artikel, footer, header, nav, section
• Bentuk kontrol form seperti kalender, tanggal, waktu, email, url, search.

Beberapa browser sudah mendukung HTML5 seperti safari, chrome, firefox, dan opera. Kabarnya IE9 ( Internet Explorer ) akan mendukung beberapa fitur dari HTML5.

Pembuatan HTML5 juga di karenakan Standard HTML4 yang dijumpai banyak memiliki kelemahan untuk mendukung aplikasi web yang interaktif. Akibat hal ini banyak orang menambahkan fitur baru baik disisi aplikasi web ataupun disisi browser. Solusi ini dikenal dengan plugin dan salah satunya adalah Flash dan Silverlight.