Kenapa HTML 5 dan CSS 3 bisa muncul ?

Unknown

Sebelumnya saya akan membahas tentang apa itu HTML,HTML atau HyperText Markup Language adalah sebuah standar yang digunakan secara luas untuk menampilkan halaman web. HTML saat ini merupakan standar Internet yang didefinisikan dan dikendalikan penggunaannya oleh World Wide Web Consortium (W3C).tepatnya pada bulan april 2010 html 5 mencuat setelah CEOApple Inc., Steve Jobs, mengatakan bahwa dengan pengembangan HTML5, "Adobe Flash sudah tidak dibutuhkan lagi untuk menyaksikan video atau menyaksikan konten apapun di web.

Pada 18 Januari 2011, W3C memperkenalkan sebuah logo untuk representasi penggunaan dan tujuan HTML5. Tidak seperti logo lain yang sebelumnya telah diperkenalkan W3C, logo ini tidak mengisyaratkan validitas atau kesesuaian terhadap standar tertentu. Logo ini menjadi logo resmi sejak 1 April 2011.

Dari yang saya ketahui kelebihan dari html 5 di bandingkan html 4 juga sangat banyak itu juga yang melatar belakangi kenapa html 5 bisa muncul. Seperti yang kita ketahui apabila kita ingin melihat video atau memperdengarkan lagu, kita membutuhkan plugin Flash atau Silverlight yang harus diselipkan pada tubuh HTML dan Masalah yang muncul adalah si pengguna browser harus menginstal plugin tersebut untuk menampilkan informasi multimedia. Tapi tidak pada HTML5 datang dengan tag (penanda) baru yang mampu menampilkan informasi dalam bentuk multimedia tanpa bantuan plugin.

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.
Dan Tools – tools pada HTML 5 sendiri seperti:

Ø Online Sprite Box Tool

Ø Online 3D Sketch Tool

Ø Online Font Testing Tool

Ø Online Velocity Sketch Tool

Ø Online Pattern Generator Tool

Ø Online XRay Tool

Ø Online Automatoon (animation) Tool

Ø Online HTML5 Audio Maker Tool

Ø Online SVG to HTML5 Canvas Tool

Ø Chrome Ajax Animator Tool

Tadi kita membahas sedikit tentang HTML,kali ini saya akan membahas sedikit tentang CSS,

CSS atau Cascading Style Sheet merupakan salah satu bahasa pemrograman web untuk mengendalikan beberapa komponen dalam sebuah web sehingga akan lebih terstruktur dan terseragam. CSS 3 adalah versi CSS terbaru yang masih dikembangkan oleh W3C. Namun beberapa web browser sudah mendukung CSS 3. CSS 2 didukung seutuhnya oleh CSS 3 dan tidak ada perubahan, hanya ada beberapa penambahan, sehingga ketika bermigrasi dari CSS 2 ke CSS 3, tidak perlu mengubah apapun.

Css3 muncul karena css3 memiliki fitur – fitur baru yang tidak di miliki oleh css sebelumnya seperti :

· Animasi, sehingga pembuatan animasi tidak memerlukan program sejenis Adobe Flash dan Microsoft Silverlight
· Beberapa efek teks, seperti teks berbayang, kolom koran, dan "word-wrap".
· Jenis huruf eksternal, sehingga dapat menggunakan huruf yang tidak termasuk "web-safe fonts".
· Beberapa efek pada kotak, seperti kotak yang ukurannya dapat diubah-ubah, transformasi 2 dimensi dan 3 dimensi, sudut-sudut yang tumpul dan bayangan.

Sedangkan tools CSS3 seperti :

Ø Rounded Corners

Efek ini memungkinkan untuk membuat tombol bulat, sehingga tidak perlu menggunakan image. Untuk membuat efek ini tinggal menambah kode pada css.

-moz-border-radius: 10px;

-webkit-border-radius: 10px;

Ø Gradients

Efek ini memberikan gradasi warna. Untuk memberikan efek ini, dibutuhkan sintak seperti di bawah ini.

-moz-linear-gradient(-90deg,#1aa6de,#022147);

-webkit-gradient(linear, left top, left bottom, from(#1aa6de), to(#022147));

Ø Drop Shadows

Efek dari drop shadows ini mempunyai empat nilai. Nilai yang pertama adalah pada panjang sumbu x. Kedua, nilai pada sumbu y. Nilai selanjutnya pada jumlah bayangan yang diinginkan. Sedangkan nilai yang keempat adalah panjang penyebaran dari banyangan itu.

box-shadow: #333 3px 3px 4px;

-moz-box-shadow: #333 3px 3px 4px;

-webkit-box-shadow: #333 3px 3px 4px;

Ø Border Color

Efek ini memberikan warna pada border dan bisa lebih dari satu warna.

border: 8px solid #000;

-moz-border-bottom-colors: #555 #666 #777 #888 #999 #aaa #bbb #ccc;

-moz-border-top-colors: #555 #666 #777 #888 #999 #aaa #bbb #ccc;

-moz-border-left-colors: #555 #666 #777 #888 #999 #aaa #bbb #ccc;

-moz-border-right-colors: #555 #666 #777 #888 #999 #aaa #bbb #ccc;

Ø RGBA

Metode warna RGBA dibutuhkan empat nilai warna, yaitu merah, hijau, biru, dan tingkat opacity. Dapat menggunakan heksadesimal (#) , atau menggunakan mode RGB, sedangkan tingkat opacity dapat memberikan warna tampak transparan. Opacity menerima nilai antara 0 dan 1, dengan 0 sepenuhnya menjadi buram dan 1 didefinisikan sebenarnya. Contoh di bawah ini memiliki nilai opacity 0,5, menyebabkan elemen menjadi 50% transparan.

background-color: rgba(0, 54, 105, .5);

Ø HSL

Seiring dengan RGBA, CSS3 juga menyediakan model warna HSL bagi kita. Hal ini bisa memberi kita persenjataan seluruh warna. HSL singkatan dari Hue, Saturation, dan Lightness. Hue adalah derajat warna, sedangkan Saturasi dan Lightness adalah nilai persentase warna.

background-color: hsl(209,41.2%, 20.6%);

sumber : Wikipedia keyword : HTML5 dan CSS3

http://webdesignledger.com/tools/10-online-html5-tools-for-web-designers

http://www.terindikasi.com/2012/04/pengenalan-html5.html

http://www.tuttoaster.com/css3-features-you-will-love/