MAKALAH HTML5
Disusun
Guna Memenuhi Tugas Mata Kuliah Teknologi Informasi dan Komunikasi ( TIK )
Oleh
:
Nama :
Ulfa Nur Aryanti
NIM :
1102412069
Rombel :
03
FAKULTAS ILMU PENDIDIKAN
UNIVERSITAS NEGERI SEMARANG
2013
BAB 1
PENDAHULUAN
1.
Latar
Belakang
Seiring
dengan kemajuan perkembangan jaman, maka banyak sekali yang sudah berubah di
bumi ini. Banyak iilmuwan yang menemukan berbagai peralatan yang ditujukan
untuk mempermudah tugas dan kewajiban manusia. Missal penemuan listrik,
penemuan televise, lampu pijar bahkan sampai penemuan telepon, dan penemuan
internet. Sekarang ini perkembangan internet sedang mengalami kemajuan yang
pesat tentang pemrogramannya. Mulai dari HTML1, sampai HTML5.. Disini kita akan
membahas lebih lanjut mengenai HTML5
2.
Rumusan
masalah
1. Jelaskan
pengertian dari HTML5?
2. Bagaimana
sejarah lahirnya HTML5?
3. Apa
saja kelebihan dan kekurangan yang ada pada HTML5?
4. Apa
saja atribut baru dalam HTML5 saat ini?
5. Sebut
dan jelaskan fitur baru dari HTML5?
6. Sebut
dan jelaskan elemen baru dalam HTML5?
7. Apakah
manfaat dan kegunaan HTML5 dalam kehidupan sehari-hari?
8. Jelaskan
perbandingan antara HTML5 dengan HTML sebelumnya?
3.
Tujuan
penulisan
1. Untuk
mengetahui pengertian dan sejarah dari HTML5
2. Dapat
menjelaskan kelebihan dan kekurangan yang dimiliki oleh HTML5
3. dapat
menjelaskan tentang atribut, fitur, dan elemen baru yang ada pada HTML5
4.
menjelaskan manfaat dan kegunaan dari HTML5
dalam kehidupan sehari-hari
5.
dapat membandingkan perbedaan antara HTML5 dengan
HTML versi sebelumnya
4.
Manfaat
penulisan
1.
Agar memberikan informasi mengenai HTML5 kepada
para penggunanya.
2.
Para pembaca mengerti tentang bagaimana
sejarhnya HTML5 bukan hanya mengerti cara menjalankannya saja
BAB II
PEMBAHASAN
1. Pengertian HTML5
HTML5 adalah suatu spesifikasi sebagai
hasil perbaikan dari standard HTML(Hypertext Markup Language) sebelumnya yang
dikeluarkan oleh W3C( world Wide Web Consurtium) dan partner kerjanya yaitu Web
Hypertext Application technology Working Group. Tujuan adanya revisi yang
semula HTML menjadi HTML5 adalah untuk meningkatkan bahasa pada system
multimedia yang sedang in yang dengan mudah dapat terbaca oleh manusia
dan dimengerti oleh computer itu sendiri sebagai perangkat. Selain itu, juga bertujuan untuk mengurangi
penggunaan plugin-plugin 3rd party pada HTML sehingga dapat
mempercepat kinerja web itu sendiri. Contoh plugin itu sendiri adalah, Adobe
Flash, Microsoft Silverlight, Java dan lain-lainnya.
2. Sejarah HTML5
HTML5 merupakan perbaikan kelima dari HTML yang pertama
kali dibuat pada tahun 1990 dan terakhir kalinya versi HTML4 dirilis tahun
1997. Para kelompok kerja Teknologi Aplikasi Web Hyperteks memulai standar baru
HTML5 ini pada tahun 2004, dan pada tahun 2009 W3C dan WHATWG bersatu dalam
pengembangan HTML5. Konsep pertamanya sudah dipublikasikan pada tahun 2008,
tetapi tidak banyak yang menggunakannya hingga tahun 2011. Pada tahun 2011,
HTML 5 diterbitkan sepenuhnya dan orang-orang mulai menulis dan menggunakannya,
namun penerapannya pada masing-masing browser yang berbeda masih bisa dibilang
buruk. Hari ini, seluruh browser utama (Chrome, Safari, Firefox, Opera, IE)
dapat mendukung HTML5, sehingga teknologi HTML terbaru dapat digunakan dengan
sebaik-baiknya. HTML5 mulai dikenal oleh masyarakat pada tahun 2010 meskipun
sudah dikenal sejak lama oleh para pengembang web. Dengan adanya pengembangan
HTML5, adobe flash sudah tidak dibutuhkan lagi untuk menyaksikan video atau
konten apapun di web.
3. Kelebihan dan kekurangan HTML5
Kelebihan :
1.
Cleaner code, karena sebagian besar kode telah termasuk di
dalam sintaks html5, maka kode nampak terlihat lebih sederhana daripada penggabungan
antara html, css dan java script.
- Greater consistency, HTML5 telah melakukan banyak
sekali penambahan sintaks yang dibuat dalam struktur lebih baik dan lebih
sederhana daripada sintaks-sintaks sebelumnya. Hal ini membuat developer
terbantu dalam meningkatkan konsistensi dalam membangun sebuah web.
- Improve Semantics, dengan berbagai elemen kode di dalam
html5 yang telah distandarisasi, maka nilai semantik dari sebuah web dapat
lebih ditingkatkan. Itu berarti bahwa bagian-bagian dari web seperti header,
nav, footer dan beberapa bagian lainnya terdefinisi dengan jelas maksud
serta tujuannya selain itu juga terbentuk dalam sebuah “machine readible
format”
- Improved Accessibility, dengan teknologi HTML5 yang
memudahkan struktur pembangunan sebuah web, maka developer dapat membangun
pemahaman yang lebih detil mengenaik halaman web.
- Client-side Database, HTML5 menyediakan model database
SQL yang baru dengan API yang dapat dibangun dalam konsep lokal, dalam hal
ini di sisi client.
- Geolocation, HTML5 mempunyai API yang terintegrasi
terhadap geolocation, fasilitas tersebut dapat diakses melalui GPS atau
fasilitas lain seperti Google Latitude pada iphone.
- Offline Aplication Cache, pengguna dapat terus
melakukan interaksi dengan aplikasi meskipun mereka terputus dari jaringan
internet.
- Smarter Forms, terdapat semacam reguler expression
(regex) yang membuat form mampu mengenali secara lebih baik tentang input,
validasi data dan interaksi dengan elemen lain (misal : format email,
password dll)
- Sharper focus on Web Application Requiments, HTML5
membuat sebuah mekanisme yang lebih mudah dalam hal pembuatan front end,
aplikasi chat, tools drag and drop, video player, pengolah grafis dan
masih banyak lagi.
- Bersifat ompatibel dengan semua browser
Kekurangan
Saat ini HTML5 masih dalam
pengembangan, sehingga hanya beberapa browser yang sudah mendukung HTML5,
seperti fitur-fitur pada HTML 5 tidak semuanya bisa berfungsi dengan baik pada
beberapa browser. Beberapa browser yang sudah mendukung HTML 5 seperti Safari,
Chrome, Firefox, dan Opera. Namun kabarnya IE9 (Internet Explorer) akan
mendukung beberapa fitur dari HTML5.
·
Kekurangan utama yang dimiliki oleh HTML5 ini adalah versi
ini hanya support untuk browser modern/terbaru
·
Karena bahasa HTML5 ini masih dalam perkembangan, jadi
beberapa elemen yang ada bisa saja berubah
·
Fitur keamanan yang ditawarkan HTML5 masih terbatas
·
HTML5 tidak dapat diandalkan dalam hal format karena web
browser yang berbeda disebabkan mereka tidak mendukung salah satu format
tunggal.
4. Atribut baru HTML5
Atribut Event Window
Peristiwa (event) yang dipicu objek
window (berlaku untuk tag <body>):
Atribut
|
Nilai
|
Deskripsi
|
onafterprint Baru
|
script
|
Script yang akan dijalankan setelah dokumen dicetak
|
onbeforeprint Baru
|
script
|
Script yang akan dijalankan sebelum dokumen dicetak
|
onbeforeunload Baru
|
script
|
Script yang akan dijalankan sebelum dokumen dibongkar
|
onerror Baru
|
script
|
Script yang akan dijalankan ketika kesalahan terjadi
|
onhaschange Baru
|
script
|
Script yang akan dijalankan ketika dokumen telah berubah
|
onload
|
script
|
Kebakaran setelah halaman selesai loading
|
onmessage Baru
|
script
|
Script yang akan dijalankan saat pesan dipicu
|
onoffline Baru
|
script
|
Script yang akan dijalankan ketika dokumen berjalan
offline
|
ononline Baru
|
script
|
Script yang akan dijalankan ketika dokumen datang online
|
onpagehide Baru
|
script
|
Script yang akan dijalankan ketika jendela tersembunyi
|
onpageshow Baru
|
script
|
Script yang akan dijalankan ketika jendela menjadi
terlihat
|
onpopstate Baru
|
script
|
Script yang akan dijalankan ketika jendela sejarah
perubahan
|
onredo Baru
|
script
|
Script yang akan dijalankan ketika dokumen melakukan redo
|
OnResize Baru
|
script
|
Dipicu ketika Window browser diubah ukurannya
|
onstorage Baru
|
script
|
Script yang akan dijalankan ketika sebuah wilayah Storage
Web diperbarui
|
onundo Baru
|
script
|
Script yang akan dijalankan ketika dokumen melakukan undo
|
onunload
|
script
|
Dipicu setelah halaman telah diturunkan (atau jendela
browser telah ditutup)
|
Event Form
Event dipicu oleh tindakan dalam form HTML (berlaku untuk
hampir semua elemen HTML5, namun yang paling banyak digunakan dalam elemen
form):
Atribut
|
Nilai
|
Deskripsi
|
onblur
|
script
|
Dipicu saat itu elemen kehilangan fokus
|
onchange
|
script
|
Dipicu saat ketika nilai dari elemen berubah
|
oncontextmenu Baru
|
script
|
Script yang akan dijalankan ketika menu konteks dipicu
|
onfocus
|
script
|
Dipicu saat ketika elemen mendapat fokus
|
onformchange Baru
|
script
|
Script yang akan dijalankan ketika perubahan bentuk
|
onforminput Baru
|
script
|
Script yang akan dijalankan ketika form mendapatkan
masukan dari pengguna
|
oninput Baru
|
script
|
Script yang akan dijalankan ketika elemen mendapatkan
masukan dari pengguna
|
oninvalid Baru
|
script
|
Script yang akan dijalankan ketika elemen tidak valid
|
onreset
|
script
|
Dipicu ketika tombol Reset dalam form diklik
Tidak didukung di HTML5 |
onselect
|
script
|
Dipicu setelah beberapa teks dalam suatu elemen telah
dipilih
|
onsubmit
|
script
|
Dipicu saat formulir dikirimkan
|
Event Keyboard
Atribut
|
Nilai
|
Deskripsi
|
OnKeyDown
|
script
|
Dipicu ketika pengguna menekan tombol
|
onkeypress
|
script
|
Dipicu ketika pengguna menekan tombol
|
onkeyup
|
script
|
Dipicu ketika pengguna melepaskan tombol
|
Event Mouse
Event
dipicu oleh mouse, atau tindakan pengguna yang sama:
Atribut
|
Nilai
|
Deskripsi
|
onclick
|
script
|
Dipicu pada mouse klik pada elemen
|
ondblclick
|
script
|
Dipicu pada mouse klik dua kali pada elemen
|
ondrag Baru
|
script
|
Script yang akan dijalankan ketika elemen diseret
|
ondragend Baru
|
script
|
Script yang akan dijalankan pada akhir operasi drag
|
ondragenter Baru
|
script
|
Script yang akan dijalankan ketika elemen telah diseret ke
target penurunan valid
|
ondragleave Baru
|
script
|
Script yang akan dijalankan ketika elemen meninggalkan
target penurunan valid
|
ondragover Baru
|
script
|
Script yang akan dijalankan ketika elemen sedang diseret
atas target penurunan valid
|
ondragstart Baru
|
script
|
Script yang akan dijalankan pada awal operasi drag
|
ondrop Baru
|
script
|
Script yang akan dijalankan ketika elemen menyeret sedang
dijatuhkan
|
onmousedown
|
script
|
Dipicu ketika tombol mouse ditekan pada elemen
|
onmousemove
|
script
|
Dipicu ketika pointer mouse bergerak di atas elemen
|
onmouseout
|
script
|
Dipicu ketika pointer mouse bergerak keluar dari
elemen
|
onmouseover
|
script
|
Dipicu ketika pointer mouse bergerak di atas elemen
|
onmouseup
|
script
|
Dipicu ketika tombol mouse dilepaskan melalui elemen
|
onmousewheel Baru
|
script
|
Script yang akan dijalankan ketika mouse wheel sedang
diputar
|
onscroll Baru
|
script
|
Script yang akan dijalankan ketika elemen scrollbar sedang
menggulir
|
Events
Media
Event
dipicu oleh media seperti video, gambar dan audio (berlaku untuk semua elemen
HTML5, namun paling sering terjadi pada unsur-unsur media, seperti audio,
embed, img, objek, dan video):
Atribut
|
Nilai
|
Deskripsi
|
onabort
|
script
|
Script untuk dijalankan pada batalkan
|
oncanplay Baru
|
script
|
Script yang akan dijalankan bila file siap untuk mulai
bermain (ketika telah buffered cukup untuk memulai)
|
oncanplaythrough Baru
|
script
|
Script yang akan dijalankan ketika file bisa dimainkan
sepanjang jalan sampai akhir tanpa berhenti untuk buffering
|
ondurationchange Baru
|
script
|
Script yang akan dijalankan ketika panjang perubahan media
yang
|
onemptied Baru
|
script
|
Script yang akan dijalankan ketika sesuatu yang buruk
terjadi dan file tiba-tiba tidak tersedia (seperti tiba-tiba terputus)
|
onended Baru
|
script
|
Script yang akan dijalankan ketika media telah mencapai
akhir (acara berguna untuk pesan-pesan seperti “terima kasih untuk
mendengarkan”)
|
onerror Baru
|
script
|
Script yang akan dijalankan ketika kesalahan terjadi
ketika file tersebut sedang dimuat
|
onloadeddata Baru
|
script
|
Script yang akan dijalankan ketika media data dimuat
|
onloadedmetadata Baru
|
script
|
Script yang akan dijalankan ketika meta data (seperti
dimensi dan durasi) dimuat
|
onloadstart Baru
|
script
|
Script yang akan dijalankan seperti file mulai memuat
sebelum apa sebenarnya dimuat
|
onpause Baru
|
script
|
Script yang akan dijalankan ketika media berhenti baik
oleh pengguna atau pemrograman
|
onplay Baru
|
script
|
Script yang akan dijalankan ketika media siap untuk mulai
bermain
|
onplaying Baru
|
script
|
Script yang akan dijalankan ketika media sebenarnya telah
mulai bermain
|
onprogress Baru
|
script
|
Script yang akan dijalankan ketika browser sedang dalam
proses untuk mendapatkan data media
|
onratechange Baru
|
script
|
Script untuk dijalankan setiap kali perubahan tingkat
pemutaran (seperti ketika pengguna beralih ke gerakan lambat atau modus maju
cepat)
|
onreadystatechange Baru
|
script
|
Script untuk dijalankan setiap kali perubahan negara siap
(keadaan siap melacak keadaan data media)
|
onseeked Baru
|
script
|
Script yang akan dijalankan ketika atribut mencari diatur
ke false menunjukkan bahwa pencarian telah berakhir
|
onseeking Baru
|
script
|
Script yang akan dijalankan ketika atribut mencari diatur
ke benar menunjukkan seeking yang aktif
|
onstalled Baru
|
script
|
Script yang akan dijalankan ketika browser tidak dapat
mengambil data media untuk alasan apapun
|
onsuspend Baru
|
script
|
Script yang akan dijalankan ketika mengambil data media
dihentikan sebelum diisi penuh karena alasan apapun
|
ontimeupdate Baru
|
script
|
Script yang akan dijalankan ketika posisi bermain telah
berubah (seperti ketika pengguna cepat maju ke titik yang berbeda di media)
|
onvolumechange Baru
|
script
|
Script untuk dijalankan setiap kali volume yang berubah (termasuk
pengaturan volume untuk “bisu”)
|
onwaiting Baru
|
script
|
Script yang akan dijalankan ketika media telah berhenti
namun diperkirakan untuk melanjutkan (seperti ketika media berhenti untuk
buffer data lebih)
|
5. Fitur baru dalam HTML5
Fitur-fitur baru HTML5
1.
Canvas
Canvas adalah media yang bisa dicoret-coret
langsung dan tidak memerlukan plugin khusus. Canvas memberikan pilihan kepada
para penggunanya. Dulu, saat ingin menggambar di halaman web maka harus
menggunakan applet Java atau flash namun sekarang dapat menggunakan canvas,
dengan cara menambahkan canvas dan javascript saja maka kita sudah dapat
menggambar di halaman web.
2.
Video dan Audio
Karena sudah ada tag <audio> dan
<video> maka kita tidak memerlukan flash lagi untuk memutar audio. Untuk
masuk di dalamnya dapat menggunakan berbagai format, yang paling menonjol
adalah Ogg Theora dan H.264. namun sampai sekarang penggunaan kode masih
dipertanyakan kembali.
3.
Local storage
Fitur ini merupakan standard dalam HTML5.
Fitur ini dapat menyimpan data yang memiliki kapasitas besar dibanding yang
lain tanpa harus mengimplementasikan trik dengan cookie atau flash.
4.
Web workers
Kita sebelumnya pernah menikmati fitur ini
dalam Google gears. Web workers ini mempunyai kelebihan dibanding dengan
javascript, missal saja saat kita mengoperasikan computer dengan javascript
maka akan menyebabkan computer melambat, nah ini yang membedakan dengan web
workers.
5.
Semantics
Fitur ini sangatlah cocok bagi para
perancang yang sering meng-abuse div dan span sebagian elemen nav, fret no
more. Semantic ini bermanfaat sekali, karena bukan hanya untuk mencari
informasi namun juga dapat melakukan seperti yang dijelaskan diatas.
7
fitur pemrograman terbaru pada HTML5, yaitu:
1.
Kemunculan Elelmen <Hgroup>
Ketika memasang judul diikuti dengan
subheading di bagian header website, anda mungkin biasa menggunakan tag standar
yaitu <h1> dan <h2>. Sayangnya. tidak ada cara yang semantik untuk
mengaitkan hubungan di antara keduanya. Padahal secara hirarki,tag <h2>
seharusnya berada di bawah <h1>. Nah, dengan elemen <hgroup>, kini
kita dapat mengelompokkan tag heading agar sesuai hirarki, tanpa sedikipun
memengaruhi skema aliran dokumen.
<header>
<hgroup>
<h1></h1>
<h2>supersite in just click away Supersite in just click way </h2>
</hgroup>
</header>
2. Kemunculan Elemen <Figure>
Perhatikan kode berikut, yang saat ini
mungkin seringkali anda gunakan untuk menampilkan sebuah gambar.
<img src="path/to/image" alt="Leonidas" />
<p>Leonidas Berteriak Spartan. </p>
Sayangnya, kode di atas tidak semantik. Caption yang dibungkus dalam tag
paragraf <p> benar-benar terpisah elemen <img> di atasnya. HTML5
memperbaiki hal ini dengan mengenalkan elemen <figure>. Jika anda
mengkombinasikan dengan elemen <figcaption>, maka anda sekarang bisa
mengasosiasikan caption yang secara hirarki sesuai dengan gambar masing-masing.
<figure>
<img src="path/to/image" alt="Leonidas" />
<figcaption> <p> Leonidas Berteriak Spartan. </p>
</figcaption>
</figure>
3. Kemunculan Elemen <Mark>
Bayangkan sebuah efek stabilo yang muncul
setiap kali anda melakukan pencarian kata di suatu halaman. Maka elemen
<mark> adalah senjata baru HTML5 yang memungkinkan anda untuk
memunculkannya. Anda dapat menggabungkan dengan JavaScript pula. Contohnya,jika
ada penggunjung yang mencari kata "Spartan!" di website saya, saya
bisa memanfaatkan JavaScript untuk wrap setiap string yang cocok dengan kata "Spartan!"
dengan tag <mark> untuk memunculkan efek stabile.
<h3> Hasil Pencarian
</h3><p> Di hadapan Leonidas berbaris 100.000 pasukan Persia. Namun
tanpa sedikitpun rasa gentar, dia menyerukan,
<mark>"Spartan1"</mark>. </p>
4. HTML5 Melengkapi <Form> Dengan Berbagai Atribut Baru
Setiap programmer pasti tahu bagaimana caranya membuat form. Tambahkan sebuah
tag <form> berisi elemen <input type="text">, <input
type="password">, dan sebuah <input
type="submit">, maka jadilah. Namun rupanya form yang sekarang ini
anda kenal sudah tidak relevan lagi. HTML5 telah melengkapi form dengan
sejumlah atribut-atribut baru yang lebih menarik, dinamis, dan mungkin tidak
pernah anda kenal sebelumnya. Misalnya <placeholder>, <autofocus>.
dan <type> dengan kapabilitas masing-masing. Sayangnya fitur-fitur baru
ini mungkin masih belum dapat ditampilkan potensi sepenuhnya pada beberapa
browser. Namun tidak ada salahnya untuk dipelajari dan diterapkan sekarang atau
ketika di masa depa dimana browser versi lama telah kehilangan peminat dan punah
dari permukaan bumi.
5.Form Dilengkapi Email Validation
Jika anda terapkan type "email" pada form, maka anda dapat
memerintahkan browser untuk hanya mengijinkan isian yang sesuai dengan struktur
alamat email saja. Artinya, HTML5 sudah dilengkapi email validation didalamnya.
Meskipun pada beberapa browser (sebut saja IE), hasilnya tidak akan ditampilkan
sesuai dengan yang anda inginkan.
<!DOCTYPE html>
<head>
<title>untitled</title> </head>
<body>
<form action="" method="get">
<label for="email">Email:</label>
<input id="email"
name="email" type"email" />
<button type="submit">
Submit Form </button> </form>
</body> </html>
6.
Munculnya Attribut <Required> pada
Form
Form pada HTML5 kini juga telah dilengkapi atribut <required>, yang mampu
membuat isian tertentu menjadi wajib diisi.
<input type="text"
name="isian" required>
Dengan kode ini, maka sebuah form tidak dapat disubmit bila field
"isian" dibiarkan kosong. Berikut adalah contoh singkat mengenai
penerapannya.
<form method="post" action="">
<label for="isian"> Nama:
</label>
<input type="text"
id="isian" name="isian" place-holder="King
Xerxes"
required>
<button type="submit">Go</button>
</form>
7. Munculnya Attribut <Pattern> pada Form
Dengan atribut <pattern>, kini anda dapat memerintahkan form untuk
melakukan validasi isian sesuai aturan yang telah ditentukan. Misalnya pada
kode berikut :
<form action="" method="post">
<label
for="username">Membuat username baru: </label>
<input type"text"
name="username" id="username"
pattern="[A-Za-z]{4,10}"
required>
<button type="submit">Go </button>
</form>
Jika anda familiar dengan "regular expression", maka pattern
[A-Za-z]{1,10} memerintahkan pada form agar hanya menerima huruf besar dan
kecil saja, sekaligus harus diisi dengan 1-10 karakter.
8
Elemen
baru HTML5
Demi mewujudkan struktur
halaman web yang lebih baik semantik dan aksesibilitasnya, dikenalkanlah
beberapa elemen baru, diantaranya:
1.
section serupa seperti h1-h6.
2.
article bisa berupa entri blog atau tulisan konten.
3.
aside menyajikan konten pelengkap.
4.
header bisa menyajikan judul, deskripsi, bahkan nav untuk navigasi.
5.
footer berisi catatan kaki seperti informasi hak cipta, penulis, kontak, dan
sebagainya.
6.
dialog yang dikombinasikan dengan dt dan dd (seperti pada halaman FAQ) dapat
digunakan untuk menyajikan percakapan.
7.
yang fenomenal adalah penggunaan elemen figure, video, audio, source, embed,
canvas, dan elemen terkait berkas multimedia lainnya.
Atribut baru di HTML5
1.
Atribut media, ping pada elemen pranala
2.
Autofocus, placeholder, required, autocomplete
dan sebagainya
3.
Reversed
Browser pendukung
dari HTML5
1.
Operasi web browser
2.
Safari ( versi 3.1 )
3.
Firefox ( firefox 3)
4.
Google chrome ( versi 3 )
5.
Internet explore ( versi 8 )
HTML5 Semantic
Merupakan tag baru yang dikeluarkan pada HTML5 guna
mendukung perubahan struktur halaman agar terlihat lebih rapi, selain itu juga
untuk mengurangi pemakaian tag <div>
Elemen-elemen baru
yang ditambahkan pada HTML5 adalah:
1.
<article > : tag ini mendefinisikan
artikel, posting atau komentar dari pengguna, atau suatu konten yang independen
2.
< aside > : tag aside pada HTML5
menandakan suatu konten yang terpisah (aside) dari konten sebuah halaman,
seperti sebuah sidebar
3.
< bdi > : teks tidak boleh terikat pada arah
teks elemen
4.
< command > : Sebuah button, atau radiobutton, atau checkbox.
5.
< details > : Untuk
menjelaskan detail tentang sebuah dokumen atau sebagian dari dokumen.
6.
< summary > : Digunakan pada sebuah ringkasan dan sejenisnya di dalam tag
<details>
7.
< figure > : Untuk mengelompokkan sekumpulan section, biasanya berupa
video
8.
< figcaption > : Berisi caption/keterangan yang ditempatkan di dalam tag
<figure>
9.
< footer > : Anda tidak perlu lagi
mendefinisikan ID header atau footer, gunakan tag ini untuk menggantikannya
10. <
header > : Anda tidak perlu lagi mendefinisikan ID header atau footer,
gunakan tag ini untuk menggantikannya
11. < hgroup > : Digunakan untuk sekumpulan heading
12. <
mark > : Digunakan
pada teks yang akan di highlight
13. <
meter > : Digunakan
untuk pengukuran, dimana nilai maksimal dan minimal telah ditentukan
14. <
nav > : navigasi pada website Anda dapat ditaruh didalam tag nav, yang dapat
secara otomatis membuat daftar Anda seperti sebuah navigasi
15. <
progress > : Membuat
Progress bar
16. <
ruby > : Digunakan
untuk anotasi ruby
17. <
rt > : Untuk
menjelaskan anotasi ruby
18. <
rp > : Menunjukkan
elemen jika browser tidak mendukung ruby
19. < section > : tag ini dapat
mendefinisikan section apapun dalam document Anda. Section bekerja kurang lebih
seperti div yang memisahkan section yang berbeda
20. <
time > : Untuk
mendefinisikan waktu dan tanggal
21. <
wbr > : Word Break.
Untuk memisah suatu kata bila diperlukan
HTML5 Audio
HTML5 mengeluarkan salah satu fitur yang sangat keren yaitu
dengan adanya tag baru yang nantinya digunakanuntuk pemutaran audio tanpa
menggunakan plugin tambahan seperti flash player. Cara bagaimana untuk
menambahkan audio ke dalam web kita adalah dengan mengetik kode berikut
<!DOCTYPE html>
<htmk>
<body>
<audio controls=””controls”>
<source src=”music/fromhere.ogg”type=”audio/ogg”>
Your browser does not support the audio element
</audio>
</body>
</html>
Sehingga nantinya akan muncul tampilan sebagai berikut
·
Mozilla version 9.0.1
·
Google chrome version 22.0.1229.94
·
Opera version 12.10 beta RC
Penjelasan dari tag yang sudah
dituliskan diatas:
<audio> : digunakan untuk
memasukkan audio ke dalam HTML
<source> : untuk memainkan
audionya maka harus engambil source file nya dan ini merupakan tugas dari
source
Autoplay : memberikan pilihan
kepada penggunanya apakah audio tersebut akan disetel secara otomatis atau
tidak
Control : memberikan opsi untuk
menampilkan control audio berupa volume, seeker, play/pause botton
Type : fungsinya untuk
mendefinisikan/ mengartikan jenis tipe audio apa yang akan dimainkan nantinya.
Src : mengartikan source audio
yang akan dimainkan
Saat ini, ada tiga tipe file audio yang sudah
didukung HTML5 yaitu MP3, WAV, dan OGG. Berikut adalah data dukungan browser
terhadap audio.
Browser
|
MP3
|
Wav
|
Ogg
|
Internet
Explorer 9
|
Ya
|
Tidak
|
Tidak
|
Firefox
4.0
|
Tidak
|
Ya
|
Ya
|
Google
Chrome 6
|
Ya
|
Ya
|
Ya
|
Apple
Safari 5
|
Ya
|
Ya
|
Tidak
|
Opera
10.6
|
Tidak
|
Ya
|
Ya
|
HTML5 Video
Selama ini jika kita ingin
memutar video maka diharuskan menggunakan flash palyer terlebih dahulu, namun
sekarang sudah tidak lagi seperti itu, cukup dengan cara seperti ini :
<!DOCTYPE html>
<html>
<body>
<video width="320" height="240" controls="controls">
<source src="video/movie.ogg"
type="video/ogg">
Your browser does not support the video tag.
</video>
</body>
</html>
Sehingga nantinya akan
menghasilkan gambaran seperti berikut ini:
1.
Mozilla version 9.0.1
2.
Google chrome version 22.0.1229.94
3.
Opera version 12.10 beta RC
HTML5 Canvas
Canvas mempermudah kita dalam
menginput objek 2D atau 3D ke dalam halaman web. Canvas sistemnya tidak dapat
bekerja sendiri, canvas membutuhkan javascript untuk membuat objek di dalamnya,
baik 2D maupun 3D. Berikut kode yang
digunakan:
<!DOCTYPE html>
<html>
<body>
<canvas id="myCanvas" width="200"
height="100" style="border:1px solid #c3c3c3;">
Your browser does not support the HTML5 canvas tag.
</canvas>
<script>
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.fillStyle="#FF0000";
ctx.fillRect(0,0,150,75);
</script>
</body>
</html>
Sehingga akan muncul seperti di
bawah ini:
1.
Mozilla version 9.0.1
2.
Google
chrome version 22.0.1229.94
3.
Opera
version 12.10 beta RC
Form datalist
<!DOCTYPE html>
<html>
<body>
<form action="demo_form.asp"
method="get">
<input list="browsers"
name="browser">
<datalist id="browsers">
<option value="Internet Explorer">
<option value="Firefox">
<option value="Chrome">
<option value="Opera">
<option value="Safari">
</datalist>
<input type="submit"></form>
</body>
</html>
Sehingga akan muncul seperti di
bawah ini:
1.
Mozilla
version 9.0.1
2.
Google
chrome version 22.0.1229.94
3.
Opera
version 12.10 beta RC
· Form Output
<!DOCTYPE html>
<html>
<body>
<form
oninput="x.value=parseInt(a.value)+parseInt(b.value)">0
<input type="range" name="a"
value="50">100 +
<input type="number" name="b"
value="50">=
<output name="x" for="a
b"></output>
</form>
</body>
</html>
1.
Mozilla
version 9.0.1
2.
Google
chrome version 22.0.1229.94
3.
Opera
version 12.10 beta RC
HTML5
(HyperText Markup Language) |
|
Ekstensi berkas
|
.html, .htm
|
text/html
|
|
Type code
|
TEXT
|
Uniform Type Identifier
|
public.html
|
Dikembangkan oleh
|
|
Jenis format
|
|
Pengembangan dari
|
|
Dikembangkan menjadi
|
XHTML5
|
XHTML5
|
|
Ekstensi berkas
|
.xhtml, .xht, .xml,
.html, .htm
|
application/xml,
application/xhtml+xml
|
|
Dikembangkan oleh
|
|
Jenis format
|
|
Pengembangan dari
|
XML, HTML5
|
7.manfaat dan kegunaan HTML5
HTML5 Design menawarkan banyak manfaat lainnya yang seharusnya membuat
Anda berpikir tentang menggunakan versi ini dalam situs web Anda.
- pemberian pertolongan
Untuk meningkatkan kegunaan, web
designer saat membuat website yang sangat interaktif dengan memasukkan memutar
musik dan pilihan streaming video, animasi cairan dan situs jejaring sosial
seperti Twitter dan Facebook di situs tersebut. Namun, sebelum HTML5 debut,
mereka hanya bisa melakukannya dengan menggunakan Silverlight atau Flash,
JavaScript atau Flex alat yang tidak hanya membuat aplikasi web lebih rumit,
tetapi juga dikonsumsi banyak waktu. Namun, HTML5 Desain membuatnya lebih mudah
untuk menanamkan audio dan video, animasi berkualitas tinggi, grafik dan gambar
nyaman tanpa perlu menggunakan program pihak ketiga lainnya atau plugin.
- peningkatan semantic
Berkat HTML5, sekarang mudah
untuk melihat header, footer, nav dan bagian lain dari halaman web sebagai tag
sekarang lebih spesifik dan memahami tujuan utama mereka dan makna seluruh
format yang. Kode desain web sangat standar sehingga meningkatkan semantik.
- kode peningkatan
Dengan menggunakan HTML5, web
designer dan pengembang menikmati bekerja dengan rapi dan kode bersih dengan
menghapus sebagian besar tag div di situs.
- konsistensi
Sebagai website mengadopsi
unsur-unsur baru dari HTML5, hal ini membantu untuk mencapai konsistensi yang
lebih besar ketika datang untuk menggunakan HTML dalam pengkodean halaman web.
Dengan demikian, HTML5 Desain jauh lebih mudah dan dimengerti dan desainer
dapat dengan mudah mengetahui struktur dari halaman web.
- Bentuk elegan
Web desainer dapat menggunakan
bentuk pengujian dan HTML5 juga membuat validasi bentuk asli ke HTML,
meningkatkan antarmuka pengguna dan mengurangi kebutuhan untuk javascript dalam
pengembangan website
Manfaat utama lainnya yang terkait dengan HTML5 yang seperti dukungan
Geolocation dan meningkatkan aksesibilitas dari halaman web. Ini hanya
menyoroti manfaat dari HTML5 dan para ahli percaya bahwa HTML5 akan berkembang
menjadi bahasa pengembangan secara online penting dalam waktu dekat.
Daftar Pustaka
1.
pelita, reza. 2010. Kelebihan dan kekurangan HTML5. http://rezzapelita.blogspot.com
diakses pada 23 oktober 2013
2.
soeko, danang. 2012. Artikel tentang HTML5. http://danangsr.blogspot.com
diakses pada 23 oktober 2013
3.
Wikipedia. 2013. HTML5. http://wikipedia.org diakses
pada 17 oktober 2013
4.
Heikal, Muhammad. 2012. Kelebihan dan kekurangan HTML5. http://hei-art.blogspot.com. diakses
pada 17 oktober 2013
5.
Saldi, fadli. 2009. HTML5 menjadi solusi para web development. http://akusukamikir.blogspot.com diakses
pada 17 oktober 2013
6.
Presekal, Alfan. 2011. HTML5 Review. http://mhs.blog.ui.ac.id
diakses pada 22 oktober 2013
7.
Post, othcreative. 2011. Fitur-fitur Baru di HTML5. http://canggih.web.id
diakses pada 22 oktober 2013
8.
Meira, zolla. 2013. Apa HTML5 dan beberapa manfaat its top. http://zollameirablog1.com diakses pada
22 oktober 2013
9.
Alfin, bonard. 2013. 7 Fitur pemrograman terbaru di
HTML5. http://bonardalfin.blogspot.com
diakses pada 23 oktober 2013
10. Adiananta,
fransisco assisi. 2013. Beberapa Fitur
Baru di HTML5. http://lampukamar.blogspot.com
diakses pada 22 oktober 2013
I always search such wonderful blog and after so many efforts finally I got you. Keep writing the same
BalasHapusPharmacy home delivery in UAE
Pharmacy near Business Bay
Always look forward for such nice post & finally I got you. Really very impressive post & glad to read this.
BalasHapusArchitects in Indore
Civil Contractors in Indore
Good luck & keep writing such awesome content.
BalasHapusVirgin Linseed Oil BP
flaxseed oil
cmsed
Approved Auditor in DAFZA
BalasHapusApproved Auditor in RAKEZ
Approved Auditor in JAFZA
i heard about this blog & get actually whatever i was finding. Nice post love to read this blog
Approved Auditor in DMCC