HTML 5

Apa itu HTML

HTML (HyperText markup language) adalah sebuah bahasa markup yang
digunakan untuk membuat sebuah halaman web, menampilkan berbagai inIormasi di dalam
sebuah Penjelajah web Internet dan Iormating hypertext sederhana yang ditulis kedalam
berkas Iormat ASCII agar dapat menghasilkan tampilan wujud yang terintegerasi.

HTML5 adalah sebuah bahasa markah untuk menstrukturkan dan menampilkan isi
dari Waring Wera Wanua, sebuah teknologi inti dari Internet. sebuah standar untuk
menstrukturkan dan menampilkan isi pada World Wide Web. Standar bahasa tersebut
memperkenalkan Iitur baru seperti memutar video serta drag and drop. Sebelumnya Iitur
tersebut bergantung pada plugins pihak ketiga di penjelajah web seperti Adobe Flash dan
MicrosoIt Silverlight.

HTML5 adalah revisi kelima dari HTML (yang pertama kali diciptakan pada tahun
1990 dan versi keempatnya, HTML4, pada tahun 1997) dan hingga bulan Juni 2011 masih
dalam pengembangan. 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 salah satu karya Konsortium Waring Wera Wanua (World
Wide Web Consortium, W3C) untuk mendeIinisikan sebuah bahasa markah tunggal yang
dapat ditulis dengan cara HTML ataupun XHTML. HTML5 merupakan jawaban atas
pengembangan HTML 4.01 dan XHTML 1.1 yang selama ini berjalan terpisah, dan
diimplementasikan secara berbeda-beda oleh banyak perangkat lunak pembuat web.

HTML5 merupakan standar baru untuk HTML, XHTML, dan DOM HTML. Sejak
munculnya HTML versi 4.01, perkembangan website dunia semakin berkembang. Saat ini
HTML5 masih dalam pengembangan, namun hanya beberapa browse sudah mendukung
HTML5.

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 :
O Fitur baru harus didasarkan pada HTML, CSS, DOM, dan JavaScript
O Mengurangi kebutuhan untuk plugin eksternal ( Seperti Flash )
O Penanagan kesalahan yang lebih baik
O Lebih markup untuk menggantikan scripting
O HTML5 merupakan perangkat mandiri
O Proses pembangunan dapat terlihat untuk umum
O
Fitur baru dalam HTML5 :
O &nsur kanvas untuk menggambar
O 'ideo dan elemen audio untuk media pemutaran
O Dukungan yang lebih baik untuk penyimpanan secara oIIline
O lemen konten yang lebih spesiIik, seperti artikel, Iooter, header, nav, section
O Bentuk kontrol Iorm seperti kalender, tanggal, waktu, email, url, search.
Beberapa browse sudah mendukung HTML5 seperti saIari, chrome, IireIox, dan opera.
Kabarnya I9 ( Internet xploree ) akan mendukung beberapa Iitur dari HTML5
Sejarah
Kelompok Kerja Teknologi Aplikasi Web Hyperteks (Web Hypertext Application
Technology Working Group, WHATWG) mulai membuat standar baru ini pada tahun 2004
ketika Konsortium W3C sedang Iokus pada pengembangan XHTML 2.0 di masa depan,
sementara HTML 4.01 belum pernah diperbarui sejak tahun 2000.
|2|
Sejak tahun 2009,
W3C dan WHATWG bekerja sama dalam pengembangan HTML5 setelah W3C
mengakhiri Kelompok Kerja Pengembangan XHTML 2.0.
Meskipun HTML5 telah dikenal luas oleh para pengembang web sejak lama,
HTML5 baru mencuat pada April 2010 setelah CO Apple Inc., Steve Jobs, mengatakan
bahwa dengan pengembangan HTML5, "Adobe Flash sudah tidak dibutuhkan lagi untuk
menyaksikan video atau menyaksikan konten apapun di web.
Markup
Pada HTML 5 diperkenalkan beberapa elemen baru dan atribut yang mereIleksikan
tipikal penggunaan website modern. Beberapa diantaranya adalah pergantian yang bersiIat
semantik pada blok yang umum digunakan: yaitu elemen (div~) dan inline (span~),
sebagai contoh (span~) (sebagai blok navigasi website) dan Iooter~ (biasanya dikaitkan
pada bagian bawah suatu website atau baris terakhir dari kode html). Banyak elemen lain
yang memberikan kegunaan baru melalui antar muka yang telah distandarkan, seperti
elemen multimedia audio~ dan video~.

Beberapa elemen yang telah ditinggalkan juga
ditiadakan, termasuk elemen presentasi semata seperti Iont~ dan center~, yang sebenarnya
dapat dikerjakan menggunakan Cascading Style Sheet (CSS).
API baru pada HTML5
&ntuk menambah keluwesan pemIormatan, pada HTML5 telah dispesiIikasikan
pengkodean application programming interIaces (APIs). antarmuka document object model
(DOM) yang ada dikembangkan dan Iitur de Iacto didokumentasikan. Beberapa APIs
terbaru pada HTML5 antara lain :
O lemen canvas, sebagai mode untuk menggambar object dua dimensi (2D).
O Timed media playback
O Media penyimpanan luring (aplikasi web luring).
O Penyuntingan dokumen
O Drag-and-Drop
O Cross-document messaging
O Manajemen history web
O Tipe MIM dan penanggung jawab protokol registrasi.
Tidak semua teknologi di atas dimasukkan pada spesiIikasi HTML5 W3C, meski teknologi
tersebut telah dalam spesiIikasi milik WHATWG HTML. Beberapa teknologi yang juga
terkait namun tidak dijadikan bagian dalam spesiIikasi HTML5 W3C dan WHATWG
HTML5 adalah :
O Geolocation
O Web SQL Database, media penyimpanan database local.
O API Database terindeks, mode penyimpanan hierarkis key-value (WebSimpleDB).
Penanganan kesalahan
Penjelajah Web HTML5 (text/html) akan Ileksiblel dalam menangani kesalahan
sintaks. HTML5 telah didesain agar penjelajah web lama dapat dengan aman mengabaikan
konstruksi HTML5 yang baru. Perbedaan mendasar dengan HTML 4.01, SpesiIikasi
HTML5 memberikan aturan detail untuk meleksikalkan dan memparsing sebagai
persyaratan agar berbagai penjelajah web tetap memberikan hasil yang sama saat terjadi
kesalahan sintaks. Meskipun HTML5 telah memiliki perilaku konsisten untuk menangani
dokumen "Tag Soup", dokumen seperti ini tidak dapat dikatakan telah memenuhi standar
HTML5.
HTML 5 sedang dirancang oleh W3C untuk meneruskan kesuksesan HTML 4 dan
XHTML 1. Tampaknya HTML 5 akan menjadi Iavorit seperti yang terjadi pada DOCTYP
sejuta umat, XHTML 1.0 Transitional.
Kelebihan dan kekurangan HTML 5
Beberapa kelebihan yang dijanjikan pada HTML 5:
O Dapat ditulis dalam sintaks HTML (dengan tipe media text/html) dan XML.
O Integrasi yang lebih baik dengan aplikasi web dan pemrosesannya.
O Integrasi ('inline') MathML dan S'G dengan doctype yang lebih sederhana.
O Penulisan kode yang lebih eIisien.
O Dapat dimengerti oleh peramban lawas (backwards compatible). Sehingga istilah
'deprecated' tidak akan diperlukan lagi.

Yang masih diperdebatkan dalam pengembangan HTML 5:
O Fungsi pada alt` dan sumarry`.
O Makna semantik beberapa elemen presentasioal.

Contoh HTML 5:

Kesederhanaan HTML 5:
!doctype html~
html~
head~
metacharset"&TF-8"~
title~Contoh dokumen HTML5/title~
/head~
body~
p~Teks paragraIdisini./p~
/body~
/html~

Yang menarik dari kesederhanaan kode di atas:
O Tidak perlu lagi memakai meta http-equiv"Content-Type" content"text/html;
charset&TF-8"~. Walau tag meta tersebut masih diijinkan digunakan.
O Deklarasi !DOCTYP html~ dalah 'case-insensitive'. Tidak harus huruI
besar/kapital semua.

Sebagai XML, dengan tipe media application/xhtmlxml atau application/xml, HTML 5
cukup dideklarasikan dengan Iormat tambahan:
?xml version"1.0" encoding"&TF-8"?~
html xmlns"http://www.w3.org/1999/xhtml"~
head~
...
di atas elemen head.

lemen baru di HTML 5
Demi mewujudkan struktur halaman web yang lebih baik semantik dan aksesibilitasnya,
dikenalkanlah beberapa elemen baru, diantaranya:
O Section serupa seperti h1-h6
O Article bisa berupa entri blog atau tulisan konten
O Aside menyajikan konten pelengkap
O Header bisa menyajikan judul, deskripsi, bahkan nav untuk navigasi.
O Footer berisi catatan kaki seperti inIormasi hak cipta, penulis, kontak, dan
sebagainya.
O dialog yang dikombinasikan dengan dt dan dd (seperti pada halaman FAQ) dapat
digunakan untuk menyajikan percakapan.
O yang Ienomenal adalah penggunaan elemen
O Iigure, video, audio, source, embed, canvas, dan elemen terkait berkas multimedia
lainnya.

Atribut baru di HTML 5
Dikenalkan pula beberapa atribut baru, seperti:
O atribut media,ping pada elemen pranala
O autoIocus, placeholder, required, autocomplete, dan sebagainya , terkait elemen
input dan Iorm
O reversed pada elemen ol untuk urutan besar ke kecil

Perubahan makna elemen
Ada beberapa elemen yang berubah makna, diantaranya:
O lemen b dilegalkan dilegalkan sebagai tipograIi penegas, seperti pada kata kunci
yang ingin ditonjolkan, tidak 'deprecated' (bukan Iitur yang dianggap usang). Tidak
lebih dari itu. Jadi tetap tidak bermakna semantik tertentu. Hal yang sama berlaku
pula untuk elemen i.
O lemen strong menegaskan level kepentingan, bukan sekadar penekanan emphasis
lagi.
O lemen hr dapat digunakan untuk memisahkan level paragraI sesuai pokok
pikirannya.
O dan lain-lain.

lemen dan atribut yang tidak digunakan
Berikut ini beberapa elemen dan atribut yang tidak lagi muncul pada HTML 5:

O center
O Iont
O strike, u, big
O Irame, Irameset, noIrames
O acronym
O longdesc
O scope pada td
O dan sebagainya
Kesiapan peramban
Peramban bermesin Presto (Opera) versi terbaru tampak lebih banyak
mendukung elemen baru HTML 5. Sementara peramban berbasis Gecko
(FireIox dan turunannya), WebKit (SaIari, Chrome, Midori), dan Trident
(Internet xplorer) versi terbaru baru mendukung sebagian Iitur HTML 5.
SS3
SS 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 banyak mengubah. CSS3 adalah standar untuk CSS yang
paling baru, banyak batasan website design yang dahulu tidak bisa ditangani oleh CSS
sekarang bisa dilakukan dengan CSS3. CSS3 sepenuhnya kompatibel dan pelengkap dari
CSS lama, sehingga browser akan selalu mendukung CSS lama dan anda tidak harus
mengubah desain yang sudah ada.
Fitur baru
CSS 3 memiliki beberapa Iitur baru, seperti:
O Animasi, sehingga pembuatan animasi tidak memerlukan program sejenis Adobe
Flash dan MicrosoIt Silverlight
O Beberapa eIek teks, seperti teks berbayang, kolom koran, dan "word-wrap".
O Jenis huruI eksternal, sehingga dapat menggunakan huruI yang tidak termasuk
"web-saIe Ionts".
O Beberapa eIek pada kotak, seperti kotak yang ukurannya dapat diubah-ubah,
transIormasi 2 dimensi dan 3 dimensi, sudut-sudut yang tumpul dan bayangan.
CSS3 memberikan Iitur-Iitur yang lebih dibandingkan dengan CSS versi sebelumnya.tapi
CSS3 juga tidak meninggalkan Iitur lama dari CSS sebelumnya.
Nah beberapa Iitur tambahan tersebut antara lain :

4rders
O border-color
O border-image
O border-radius
O box-shadow
ackgr4unds
O background-origin dan background-clip
O background-size
O multiple backgrounds
4l4r
O $ colors
O $ colors
O opacity
O # colors
Text 11ects
O text-shadow
O text-overflow
O word-wrap

&ser-inter1ace
O box-sizing
O resize
O outline
O nav-top, nav-right, nav-bottom, nav-left
Select4rs
O attribute selectors
asic b4x m4del
O overflow-x, overflow-y
enerated 4ntent
O content
ther m4dules
O media queries
O multi-column layout
O eb fonts
O speech
Namun CSS3 juga standard CSS yang gagal apabila diterapkan di kelompok pengguna
yang mayoritas menggunakan Internet xplorer sebagai bwowsernya, karena hanya
browser microsoIt internet explorer yang sampai sekarang (Dari tahun 2009 sejak
diresmikan CSS3) belum kompatible dengan CSS3. CSS3 sebetulnya masih dalam
pengembangan dan revisi W3C, walaupun begitu banyak property-property CSS3 yang
sudah di implementasikan di berbagai Browser modern, seperti IireIox, saIari, dan
sebagainya kecuali Internet xplorer.
M4dul SS3
CSS3 dibagi kedalam beberapa modul, beberapa modul CSS3 yang sangat penting untuk
menghilangkan batasan desain diantaranya:
O Selectors
O Box Model
O Backgrounds and Borders
O Text IIects
O 2D/3D TransIormations
O Animations
O Multiple Column Layout
O &ser InterIace
ara Penulisan SS3
Saat masuk pada bagian CSS, sering dijumpai kode sebagai berikut:

h1
color: #0789de;
}
Bagian pertama sebelum tanda }` dinamakan selector, sedangkan yang diapit oleh }`
disebut declaration yang terdiri dari dua unsur, yaitu property dan value.Selector dalam
pernyataan di atas adalah h1, sedangkan color adalah property, dan #0789de adalah value.
Selain itu ada tiga metode penulisan CSS atribut, yaitu :
Inline Style Sheet
CSS dideIinisikan langsung pada tag HTML yang bersangkutan. Cara penulisannya cukup
dengan menambahkan atribut style. dalam tag HTML tersebut. Style hanya akan
berlaku pada tag yang bersangkutan, dan tidak akan mempengaruhi tag HTML yang lain.
Contoh penulisan CSS dengan metode Inline Style Sheet :
html~
head~
title~Contoh Bentuk Inline/title~
/head~
body bgcolor#FFFFFF~
p idcth1~
Ini adalah contoh tag P tanpadiIormat menggunakan CSS /p~
p idcth2 styleIont-size:20pt~
Tag P ini diIormat dengan besar Iont 14 point /p~
p idcth3 styleIont-size:14pt; color:red~
Tag P ini diIormat dengan besar Iont 14 point, dan menggunakan warna merah /p~
/body~
/html~

mbedded Style Sheet
CSS dideIinisikan terlebih dahulu dalam tag <style> . </style> di atas tag <b4dy>. Pada
pendeIinisian ini disebutkan atribut-atribut CSS yang akan digunakan untuk tag-tag HTML,
yang selanjutnya dapat digunakan oleh tag HTML yang bersangkutan. Contoh penggunaan
CSS dengan metode mbedded Style Sheet :
html~
head~
title~Contoh Bentuk mbedded/title~
/head~
style~
body background:#0000FF; color:#FFFF00; margin-leIt:0.5in}
h1 Iont-size:18pt; color:#FF0000}
p Iont-size:12pt; Iont-Iamily:arial; text-indent:0.5in}
/style~
body~
h1 idcth1~Judul ini berukuran 18 dengan warna merah!/h1~
p idcth2~Tag p ini di Iormat dengan besar Iont 12 point dengan tipe Iont Arial dan
mempunyai identasi 0.5 inch /p~
p idcth3~Yang perlu diperhatikan juga bahwa body disini telah diIormat dengan
margin kiri 0.5 inch dan warna background biru/p~
/body~
/html~

Linked Style Sheet
Metode ini hampir sama dengan metode mbedded Style Sheet, hanya saja pendeIinisian
tag <style> . </style> dibuat pada berkas terpisah dari berkas HTML yang membutuhkan
CSS.Kemudian berkas lain tersebut disimpan dalam Iormat .css. Pada berkas HTML yang
akan menggunakan berkas CSS, harus dibuat tag <link> yang dituliskan di antara tag
<head> . </head>. Contoh (simpan dengan nama c4nt4h.css) :
style~
body background:#0000FF; color:#FFFF00; margin-leIt:0.5in}
h1 Iont-size:18pt; color:#FF0000}
p Iont-size:12pt; Iont-Iamily:arial; text-indent:0.5in}
/style~

Si1at SS3
Ada dua siIat CSS yaitu internal dan eksternal. Jika internal yang dipilih, maka skrip itu
dimasukkan secara langsung ke halaman website yang akan didesain.Kalau halaman web
yang lain akan didesain dengan model yang sama, maka skrip CSS itu harus dimasukkan
lagi ke dalam halaman web yang lain itu. SiIat yang kedua adalah eksternal di mana skrip
CSS dipisahkan dan diletakkan dalam berkas khusus. Nanti, cukup gunakan semacam
tautan-link menuju berkas CSS itu jika halaman web yang didesain akan dibuat seperti
model yang ada di skrip tersebut.
Fakta Menggunakan SS
Fakta Menggunakan CSS diantaranya :
O Telah didukung oleh kebanyakan browser versi terbaru, tetapi tidak didukung oleh
browser-browser lama.
O Lebih Ileksibel dalam penempatan posisi layout. Dalam layouting CSS, kita
mengenal Z-Index untuk menempatkan objek dalam posisi yang sama.
O Menjaga HTML dalam penggunaan tag yang minimal, hal ini berpengaruh terhadap
ukuran berkas dan kecepatan pengunduhan.
O Dapat menampilkan konten utama terlebih dahulu, sementara gambar dapat
ditampilkan sesudahnya.
O Penerjemahan CSS setiap browser berbeda, tata letak akan berubah jika dilihat
diberbagai browser
O CSS adalah layouting 'Masa Depan dengan penggabungan bersama XHTML.
4nt4h erkas SS
html~
head~
style typetext/css~
body

background-color:#d0e4Ie;
}
h1

color:orange;
text-align:center;
}
p

Iont-Iamily:Times New Roman;
Iont-size:20px;
}
/style~
/head~
body~
h1~CSS example!/h1~
p~This is a paragraph./p~
/body~
/html~