Pages

»Unlabelled » Latar Belakang Munculnya HTML5 dan CSS3 Konten Lain di Sini

Latar Belakang Munculnya HTML5 dan CSS3

Pada kesempatan kali ini saya mengentri tentang HTML5 dan CSS3,selain dikarenakan untuk memenuhi tugas yang diberikan dosen disini juga untuk menambah pengetahuan tentang perkembangan HTML.

Ok langsung saja kita masuk ke dalam materi pembahasan,disini banyak referensi yang saya ambil dari beberapa link rujukan....:)

Pertama disini saya akan memberikan pengertian tentang HTML5 yang saya dapat sumber yang saya baca dari sini.

HTML5 adalah versi terbaru dari standar yang digunakan untuk menampilkan konten dan menjalankan aplikasi dari web. Kunci standar body yang ada di balik itu ada pada Worldwide Web Consortium, yang juga dikenal sebagai W3C. Ini adalah varian upgrade besar untuk HTML4, yang sebelumnya telah digunakan (meskipun dengan perbaikan tambahan yang terus berlangsung) sejak 1997 - hampir sama seperti sejarah dari internet populer untuk pasar massal.
Secara khusus, HTML5 menggabungkan banyak fungsi tambahan yang telah ditambahkan di atas web dalam beberapa tahun terakhir. Ini adalah pengaya yang telah membuatnya lebih interaktif dan mirip dengan bahasa pemrograman komputer, bukan hanya kemampuan untuk menampilkan konten ("markup") seperti yang dimiliki sebelumnya. Jika Anda berpikir kembali mungkin pada lima tahun yang lalu, banyak dari apa yang sekarang kita nikmati ketika online mungkin tidak akan pernah terpikirkan begitu saja akan terjadi di masa yang akan datang. Kita tidak akan terpikirkan akan sebuah halaman yang bisa bergulir dan memperbarui diri secara otomatis (seperti pada Timeline pada Twitter atau Facebook), membentuk format yang bisa mengkonfigurasi ulang halaman atau mengunduh konten di background saat Anda sedang mengetik sebuah kata (misalnya pada Google auto-complete). Semua didorong oleh berbagai tool seperti JavaScript, yang memungkinkan kode untuk "dieksekusi" pada halaman web. Istilah "Web 2.0" diciptakan untuk menggambarkan layanan yang lebih interaktif yang umum digunakan pada saat ini.
Selanjutnya setelah pengertian diatas saya akan memberikan informasi tentang penambahan fitur-fitur pada HTML5 yang membedakan dengan HTML sebelumnya,sekali lagi artikel ini saya ambil dari sini.
Penambahan unsur baru pada HTML5:

Tag Penjelasan
<article> Untuk konten eksternal, seperti teks dari artikel-berita, blog, forum, atau konten lain dari sumber eksternal
<aside> Untuk konten selain konten itu ditempatkan di samping konten yang masuk harus berkaitan dengan isi sekitarnya
<command> Sebuah tombol, atau radiobutton, atau sebuah kotak centang
<details> Untuk rincian menggambarkan tentang sebuah dokumen, atau bagian dari dokumen
<summary> Sebuah keterangan, atau ringkasan, dalam rincian elemen
<figure> Untuk pengelompokan bagian dari konten berdiri sendiri, bisa video
<figcaption> Keterangan dari tokoh bagian
<footer> Untuk footer dari dokumen atau bagian, dapat meliputi nama penulis, tanggal dokumen, informasi kontak, atau informasi hak cipta
<header> Untuk penerapan suatu dokumen atau bagian, dapat mencakup navigasi
<hgroup> Untuk bagian dari pos, menggunakan <h1> untuk <h6>, di mana yang terbesar adalah pos utama bagian tersebut, dan yang lainnya sub-judul
<mark> Untuk teks yang harus disorot
<meter> Untuk pengukuran, digunakan hanya jika nilai-nilai maksimum dan minimum diketahui
<nav> Untuk bagian navigasi atau menu
<progress> Keadaan pekerjaan berlangsung
<ruby> Untuk penjelasan ruby (catatan Cina atau karakter)
<rt> Untuk penjelasan tentang penjelasan ruby
<rp> Apa untuk menunjukkan browser yang tidak mendukung elemen ruby
<section> Untuk bagian dalam dokumen. Seperti bab, header, footer, atau bagian lain dari dokumen
<time> Untuk menentukan waktu atau tanggal, atau keduanya
Unsur baru untuk media:

Tag Penjelasan
<audio> Untuk konten multimedia , suara, musik atau streaming audio lainya
<video> Untuk konten video , seperti klip film atau Streaming video lainya
<source> Untuk sumber suatu media pada elemen media, menjelaskan didalam video atau media audio
<embed> Untuk mengisi embedded , contohnya seperti plug-in atau mengambil video dari Youtube.

Unsur kanvas menggunakan JavaScript untuk membuat gambar pada halaman web.

Tag Penjelasan
<canvas> Untuk membuat gambar pada halaman web

HTML5 memberika unsur-unsur bentuk yang lebih baik, dengan fungsionalitas yang lebih baik pula:

Tag Penjelasan
<datalist> Daftar pilihan untuk nilai input
<keygen> Hasilkan kunci untuk mengotentikasi pengguna
<output> Untuk berbagai jenis output, seperti output yang ditulis oleh script

 Setelah pada pembahasan HTML5 selesai, kali ini saya langsung memuju pada CSS3 yang merupakan stylish untuk HTML5..:)

Langsung saja pertama tentang pengertian CSS3 yang saya dapatkan dari sini.

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.

Berikut ini saya akan tampilkan hal-hal yang membedakan CSS3 dengan CSS sebelumnya,saya mendapatkan referensi dari sini .

Nah beberapa fitur tambahan tersebut antara lain :


Borders

  • border-color

  • border-image

  • border-radius

  • box-shadow


Backgrounds

  • background-origin dan background-clip

  • background-size

  • multiple backgrounds

Color

  • HSL colors

  • HSLA colors

  • opacity

  • RGBA colors


Text Effects

  • text-shadow

  • text-overflow

  • word-wrap


User-interface

  • box-sizing

  • resize

  • outline

  • nav-top, nav-right, nav-bottom, nav-left

 Selectors

  • attribute selectors 

    Basic box model

  • overflow-x, overflow-y 

    Generated Content

  • content


Other modules

  • media queries

  • multi-column layout

  • Web fonts

  • speech

 Sekian artikel yang saya tulis, semua ini saya dapat dari beberapa sumber yaitu:
  • http://tizenindonesia.blogspot.com/2012/07/html5-strategi-dan-dampaknya-pada-pasar.html#.UJT27JGUPDc
  • http://ianpanrita.com/unsur-baru-tag-pada-html5.ian/
  • http://boxsense.blogspot.com/2012/04/sejarah-fungsi-dan-pengertian-css-css3.html
  • http://fandyakhmad300892.blogspot.com/2009/08/perbedaan-css-dengan-css3.html