Selasa, 08 Maret 2016
Pada kesempatan kali ini, saya akan membahas tentang teknologi HTML5 & CSS3. Sebelumnya apa yang dimaksud dengan CSS? Apa itu HTML? Apa kegunaanya dalam dunia web? HTML adalah singkatan dari Hypertext Markup Languange, merupakan bahasa pemrograman yang digunakan untuk menulis halaman web sedangkan CSS adalah singkatan dari Cascading Style Sheets, merupakan kumpulan dari kode yang digunakan untuk mengatur format/tata letak dari sebuah web. CSS merupakan bagian dari HTML, maksudnya adalah CSS bersifat embedded atau melekat pada tag HTML. Jadi, jika diibaratkan sebuah bangunan, HTML merupakan bangunannya sedangkan CSS merupakan bagian dari bangunan tersebut (jendela, pintu, atap rumah) yang gunanya untuk memperindah bangunan tersebut. Jauh sebelum adanya CSS, jika ingin mengatur tata letak halaman sebuah web, para programmer hanya bisa menggunakan tag <table> pada HTML.
Sejarah Perkembangan HTML
HTML pertama kali dibuat oleh Tim Berners-Lee yang kemudian populer berkat browser Mosaic. Perkembangan HTML adalah HTML+ (1993), HTML 2.0 (1995), HTML 3.0 (1995), HTML 3.2 (1996), HTML 4.0 (1997). HTML 4.0.1 (1998) dan yang paling terbaru sekarang adalah HTML5 yang dirilis pada tahun 2001.
Kelebihan HTML5
1. Di HTML5, penulisannya bisa ditulis dengan menggunakan sintaks HTML ataupun XML
2. Peningkatan integrasi web beserta pemrosesannya.
3. Penulisan kode yang jauh lebih efisien.
4. Kompatible dengan peramban lawas
Di samping kelebihan-kelebihan di atas, HTML5 juga memiliki beberapa kekurangan diantaranya fitur aksesibilitas dan makna semantik elemen presentasioalnya.
Teknologi HTML5
Pada HTML5 diperkenalkan sebuah teknologi baru yaitu API (Apllication Programming Interface). Berikut beberapa batasan dari API tersebut.
1. Offline Data Storage
Kita bisa mengakses data pada sebuah web meskipun dalam keadaan offline. Contohnya adalah membaca arsip email pada situs Outlook dan Thunderbird.
2. Drag and Drop
Fitur ini memungkinkan kita melakukan drag pada text,hyperlink bahkan juga file dan mendropnya bahkan pada aplikasi desktop.
3. Geolocation
Memungkinkan mengetahui lokasi kita berada. Fitur ini menggunakan GPS untuk menjalankannya.
Elemen HTML5
Pada HTML5 terdapat elemen-elemen baru yang sudah ditambahkan diantaranya :
1. Section baru yaitu h1,h2,h3,h4,h5 dan h6.
2. Artikel yang bisa berupa entri blog ataupun tulisan konten.
3. Header dapat menyajikan judul, deskripsi dan navigasi bar.
4. Footer dapat menyajikan hak cipta, penulis , kontak dan lain-lain.
5. Penggunaan berbagai macam elemen multimedia seperti video, figure, audio, source dan embed.
Sejarah Perkembangan CSS
a. CSS1
Versi pertama CSS adalah CSS1. Awalnya World Wide Web Consertium atau disingkat W3C
yang merekomendasikannya. Kemudian pada tanggal 17 Agustus 1996 CSS1 distandarisasi dan ditetapkan sebagai bahasa pemrograman standar untuk web. Tujuan awalnya adalah untuk mengurangi tag-tag baru pada Netscape dan Internet Explorer dikarenakan kedua browser tersebut sedaing bersaing untuk menciptakan tag sendiri dalam pembuatan web.b. CSS2
Setelah CSS1 hadir, 2 tahun kemudian munculah CSS2. CSS2 merupakan penyempurnaan dari versi sebelumnya dimana pada CSS2 ini ditambahkan fitur pada International Accesbility dan Capability khususnya media specific CSS. Versi ini dikembangkan guna memenuhi kebutuhan format dokumen supaya dokumen tersebut bisa ditampilkan pada printer.
c. CSS3
Versi terakhir dan yang paling terbaru CSS adalah CSS3. Pada versi ini banyak sekali fitur baru yang ditambahkan, contohnya adalah animasi,media query, multiple background dan masih banyak lagi.
Kelebihan CSS3
1. CSS3 mampu melakukan penformatan yang sangat mendetail pada objek yang ingin diatur. Contohnya adalah dalam objek "blockquote" bisa membuat quote pada bagian awal
2. CSS3 mampu melakukan efek animasi dan efek pada tulisan atau objek. Fitur animasi yang tidak bisa dilakukan pada versi CSS sebelumnya bisa dilakukan pada CSS3.
contoh gambar animasi CSS3
CONTOH EFEK TULISAN CSS3
3. Tampilan web yang menggunakan CSS3 lebih dinamis dan interaktif dibanding dengan CSS2 atau CSS1 serta membuat web lebih ringan karena tersedia fitur untuk mengurangi ukuran file yang akan diload.
SELECTOR dan PROPERTIES Dalam CSS3
CSS terdiri dari dua bagian, pertama adalah selector dan kedua adalah deklarasi. Selector adalah HTML yang ingin diedit sedangkan deklarasi adalah isi dari properti atau nilai CSS tersebut. Contoh sederhananya bisa dilihat gambar di bawah ini.
contoh CSS
Dalam CSS3 ada tambahan SELECTOR baru didalamnya, beberapa diantaranya sebagai berikut :
1. Begins with
2. Ends with
3. Matches
4. nth-child
5. nth-last-child
Sedangkan untuk PROPERTIES, CSS3 juga menambahkan properties baru didalamnya, beberapa diantaranya :
1. RGBA
2. HSLA
3. Box Sizing
4. Background Size
5. Border Image
Contoh-contoh SELECTOR dan PROPERTIES diatas hanyalah sebagian kecil saja. Sebenarnya masih banyak sekali SELECTOR dan PROPERTIES baru yang terdapat pada CSS3. Tidak semua sintaks pada CSS3 bisa berjalan di browser, ada beberapa browser yang belum mensupport sintaks CSS3 ini. Sebagai contoh sintaks 'RGBA' bisa berjalan lancar di browser Chrome, Opera ataupun Moziila namun tidak bisa berjalan di IE6, IE7 dan IE8. Untuk mengeceknya bisa mengunjungi situs http://fmbip.com/litmus/. Di situs tersebut dikelompokkan sintaks-sintaks yang bisa berjalan lancar dan tidak di setiap browser.
Referensi gambar :
http:..www.google.co.id
http://www.jeanotnahasan.com/2012/02/mengenal-pengertian-dan-perkembangan.html
http://tutorial.belajarweb.net/css/syntax-css.html
