• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Makalah html 5
 

Makalah html 5

on

  • 2,852 views

 

Statistics

Views

Total Views
2,852
Views on SlideShare
2,852
Embed Views
0

Actions

Likes
1
Downloads
145
Comments
0

0 Embeds 0

No embeds

Accessibility

Categories

Upload Details

Uploaded via as Microsoft Word

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    Makalah html 5 Makalah html 5 Document Transcript

    • Makalah HTML 5 Makalah ini dibuat untuk memenuhi tugas mata kuliah Teknologi Informasi dan Komunikasi Oleh: Nama NIM :Bagus Hutomo Nugrahanto :1102412118 Prodi : Teknologi Pendidikan FAKULTAS ILMU PENDIDIKAN UNIVERSITAS NEGERI SEMARANG 2013
    • Kata Pengantar Segala puji syukur saya penjatkan kehadirat Allah SWT yang telah memberikan rahmat, taufik, hidayah-Nya sehingga saya dapat menyelesaikan penulisan tentang HTML 5. Terselesaikannya penulisan makalah ini diharapkan akan memberi informasi lebih banyak tentang HTML yang mana saat ini menjadi sebagai salah satu markah pemrograman web. Penulisan makalah ini diajukan guna memenuhi tugas mata kuliah TIK (Teknologi Informasi dan Komunikasi) dan berguna untuk memahami lebih jauh lagi tentang berbagai hal yang berhubungan dengan HTML 5. Penyusunan makalah ini sudah pasti jauh dari sempurna, oleh karena itu kritik dan saran yang membangun sangat diharapkan agar membuat makalah ini menjadi lebih baik. Semarang, 24 Oktober 2013 Penulis
    • BAB I PENDAHULUAN 1.1 Latar Belakang Perkembangan teknologi yang sampai saat ini masih terus berjalan tanpa henti, pada setiap saat jutaan manusia dapat berkomunikasi langsung meskipun interaksi tersebut tidak terjadi secara langsung atau face to face melainkan melalui perantara media yang mampu menyampaikan berbagai bentuk dan jenis interaksi antar manusia.Adanya media dalam hal ini menjadi sangat penting, karena sebenarnya media itu sendiri menurut AECT (Association of Education and Communication Technology, 1977) memberi batasan tentang media sebagai segala bentuk dan saluran yang digunakan untuk menyampaikan pesan atau informasi. Secara umum interaksi yang bisa melibatkan banyak orang, dipakai banyak orang, dimanfaatkan banyak orang dan menjadi kebutuhan utama life style masyarakat masa kini adalah media internet. Namun, bagaimana stuktur perjalanan semua data yang disampaikan melalui internet itu melalui sebuah tahapan awal pembuatan dasar melalui web, tetapi pada kesempatan kali akan membahas lebih dalam tentang web, yaitu bahasa hypertext yang digunakan sebagai dasar pembuatan web dalam bentuk HTML. Hyper Text Markup Language (HTML) adalah sebuah bahasa markup yang digunakan untuk membuat sebuah halaman web, menampilkan berbagai informasi di dalam sebuah Penjelajah web Internet dan formating hypertext sederhana yang ditulis kedalam berkas format ASCII agar dapat menghasilkan tampilan wujud yang terintegerasi. Dengan kata lain, berkas yang dibuat dalam perangkat lunak pengolah kata dan disimpan kedalam format ASCII normal sehingga menjadi home page dengan perintah-perintah HTML.
    • Pembahasan yang lebih mendalam sangat perlu mengingat HTML adalah organ penting dalam penyampaian suatu informasi baik itu di blog, website maupun jejaring sosial karena setiap kita membuka halaman web pasti akan muncul format halaman itu dalam bentuk HTML jika kita lihat pada address bar. 1.2 Rumusan Masalah Berdasarkan tema yang diangkat beberapa permasalahan yang akan dibahas dalam makalah ini antara lain adalah: 1. Apa yang dimaksud HTML 2. Bagaimana sejarah perkembangan HTML 5 3. Karakteristik HTML 5 4. Komponen dan atribut baru pada HTML 5 5. Apa saja fitur-fitur yang ada pada HTML 5 6. Bagaimana mengadopsi aplikasi HTML 7. Apa saja browser yang mendukung HTML 5 8. Apa saja kelebihan HTML 5 9. Bagaimana perluasan HTML 5 1.3 Tujuan dan Manfaat Adapun tujuan dan manfaat dari penyusunan makalah ini adalah Untuk mengetahui dan membagi informasi dan pengetahuan mengenai HTML5 secara lebih mendalam dan terstruktur.
    • BAB II PEMBAHASAN 2.1 Penjelasan tentang HTML (Hyper Text Markup Languange) HyperText Markup Language (HTML) adalah sebuah bahasa markah yang digunakan untuk membuat sebuah halaman web, menampilkan berbagai informasi di dalam sebuah penjelajah web Internet dan pemformatan hiperteks sederhana yang ditulis dalam berkas format ASCII agar dapat menghasilkan tampilan wujud yang terintegerasi. Dengan kata lain, berkas yang dibuat dalam perangkat lunak pengolah kata dan disimpan dalam format ASCII normal sehingga menjadi halaman web dengan perintah-perintah HTML. Bermula dari sebuah bahasa yang sebelumnya banyak digunakan di dunia penerbitan dan percetakan yang disebut dengan SGML (Standard Generalized Markup Language), HTML 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).HTML dibuat oleh kolaborasi Caillau TIM dengan Berners-lee Robert ketika mereka bekerja di CERN pada tahun 1989 (CERN adalah lembaga penelitian fisika energi tinggi di Jenewa). HyperText Markup Language (HTML) adalah bahasa dari Worl Wide Web (www) yang dipergunakan utntuk menyusun dan membentuk dokumen agar dapat ditampilkan pada program web browser.HTML juga dapat disebut sebagai protocol yang digunakan untuk mentransfer data atau dokumen dari web server ke browser. HTML inilah yang menjadi dasar bila akan menjelajah internet dan melihat halaman web yang menarik.
    • HTML berupa kode-kode tag yang menginstrusikan browser untuk menghasilkan tampilan sesuai yang diinginkan. Sebuah file yang merupakan file HTML dapat dibuka dengan menggunakan browser web seperti Mozilla firefox atau aplikasi pembuka email ataupun dari PDA dan program lain yang memiliki kemampuan browser. HTML dokumen tersebut mirip dengan dokumen teks biasa, hanya dalam dokumen ini sebuah teks biasa memuat instruksi yang ditandai dengan kode atau lebih dikenal dengan TAG tertentu. HTML adalah bahasa markup yang umum digunakan.Kepopuleran HTML disebakan karena HTML ini mudah digunakan. Pembuatan dokumen web dengan HTML dapat dilakukan dengan mudah dan cepat. Dokumen web dapat tersaji dengan cepat ke banyak pembaca di seluruh dunia sekaligus. HTML mudah melakukan kontrol terhadap tampilan halaman web baik berupa teks, gambar, suara, animasi maupun video. HTML berupa kode-kode tag yang menginstruksikan browser untuk menghasilkan tampilan sesuai dengan yang diinginkan. Sebuah file yang merupakan file HTML dapat dibuka dengan menggunakan web browser seperti Mozilla Firefox atau Microsoft Internet Explorer. HTML juga dapat dikenali oleh aplikasi pembuka email ataupun dari PDA dan program lain yang memiliki kemampuan browser. a. Hypertext Link hypertext adalah kata atau frase yang dapat menunjukkan hubungan suatu naskah dokumen dengan naskah-naskah lainnya. Jika kita klik pada kata atau frase untuk mengikuti link ini maka web browser akan memindahkan tampilan pada bagian lain dari naskah atau dokumen yang kita tuju. b. Markup Pada pengertiannya di sini markup menunjukkan bahwa pada file HTML berisi suatu intruksi tertentu yang dapat memberikan suatu format pada dokumen yang akan ditampilkan pada Word Wide Web. c. Language
    • Meski HTML sendiri bukan merupakan bahasa pemrograman, HTML merupakan kumpulan dari beberapa instruksi yang dapat digunakan untuk mengubah-ubah format suatu naskah atau dokumen. Pada awalnya HTML dikembangkan sebagai subset SGML(Standard Generalized Mark-up Language). Karena HTML didedikasikan untuk ditransmisikan melalui media Internet, maka HTML relatif lebih sederhana daripada SGML yang lebih pada format dokumen yang berorientasi pada aplikasi. Kegunaan HTML 1. Mengintegerasikan gambar dengan tulisan. 2. Membuat Pranala. 3. Mengintegerasikan berkas suara dan rekaman gambar hidup. 4. Membuat form interaktif. 5. Menentukan format suatu teks 6. Membuat list tentang sekelompok hal 7. Membuat link ke dokumen lain atau bagian lain dari dokumen yang sama. 8. Menyisipkan citra atau gambar. 9. Menampilkan informasi dalam bentuk tabel 10. Memodifikasi.Mengontrol tampilan dari web page dan contentnya. 11. Mempublikasikan dokumen secara online sehingga bisa di akses dari seluruh dunia. 12. Membuat online form yang bisa di gunakan untuk menangani pendaftaran, transaksi secara online.
    • 13. Menambahkan object-object seperti image, audi, video dan juga java applet dalam dokumen HTML. Struktur HTML 1. Elemen Elemen terdiri atas tiga bagian, yaitu tag pembuka, isi, dan tag penutup.Contonya untuk menampilkan judul dokumen HTML pada web browser digunakan element title, dimana: <title> ini adalah tag pembuka judul dokumen HTML 2. Tag Adalah teks khusus (markup) berupa dua karakter "<" dan ">", sebagai contoh <body> adalah tag dengan nama body. Tag ditulis secara berpasangan, yang terdiri atas tag pembuka dan tag penutup (ditambahkan karakter "/" setelah karakter "<"), sebagai contoh <body> ini adalah tag pembuka isi dokumen HTML, dan </body> ini adalah tag penutup isi dokumen HTML. Yang merupakan tag-tag dasar dalam HTML adalah: a. <HTML></HTML> Tag <HTML> dan </HTML> digunakan untuk menandai awal dan akhir dari suatu file HTML. b. <TITLE></TITLE> Tulisan yang berada diantara tag <TITLE> dan </TITLE>akan ditampilkan oleh browser pada bagian title yang mana merupakan title dari jendela browser. c. <HEAD></HEAD>
    • Berisi keterangan informasi, seperti title dan jenis dokumen, ditulis diantara HEAD tags. d. <BODY></BODY> Bagian tag BODY menandai awal dan akhir dari badan dokumen HTML. Tag ini memiliki sejumlah attribut dapat ditentukan. Contoh: <HTML> <HEAD> <TITLE>Halaman HTMLku yang pertama</TITLE> </HEAD> <BODY TEXT="#000000" BGCOLOR="#FFFFFF"> Hello World </BODY> </HTML> 2.2 Sejarah perkembangan HTML Tahun 1980, IBM memikirkan pembuatan suatu dokumen yang akan mengenali setiap elemen dari dokumen dengan suatu tanda tertentu. IBM kemudian mengembangkan suatu jenis bahasa yang menggabungkan teks dengan perintah-perintah pemformatan dokumen.Bahasa ini dinamakan Markup Language, sebuah bahasa yang menggunakan tanda-tanda sebagai basisnya.IBM menamakan sistemnya ini sebagai Generalized Markup Language atau GML. Tahun 1986, ISO menyatakan bahwa IBM memiliki suatu konsep tentang dokumen yang sangat baik, dan kemudian mengeluarkan suatu publikasi (ISO
    • 8879) yang menyatakan markup language sebagai standar untuk pembuatan dokumen-dokumen. ISO membuat bahasa ini dari GML milik IBM, tetapi memberinya nama lain, yaitu SGML (Standard Generalized Markup Language). ISO dalam publikasinya meyakini bahwa SGML akan sangat berguna untuk pemrosesan informasi teks dan sistem-sistem perkantoran. Tetapi diluar perkiraan ISO, SGML dan terutama subset dari SGML, yaitu HTML juga berguna untuk menjelajahi internet.Khususnya bagi mereka yang menggunakan World Wide Web.Versi terakhir dari HTML saat ini adalah HTML5. Perkembangan HTML · HTML versi 1.0 adalah versi pertama sejak lahirnya nama html tersebut. Versi ini memiliki kemampuan untuk heading, paragraph, hypertext, bold dan italic text, wrapping serta memiliki dukungan dalam peletakkan sebuah gambar. 1. HTML versi 2.0 ( 14 Januari 1996 ). Pada versi ini ada beberapa tambahan kemampuan diantaranya penambahan form comment, hal ini menyebabkan adanya sebuah interaktif dan mulai dari versi ini yang menjadikan sebuah pionner dalam perkembangan homepage interaktif. 2. HTML versi 3.0 ( 18 Desember 1997 ). HTML versi 3.0 juga disebutsebut HTML+ yang mempunyai kemampuan dalam beberapa fasilitas diantaranya adalah penambahan fitur table dalam paragraph, akan tetapi versi ini tidaj bertahan lama. 3. HTML versi 3.2 ( 14 Januari 1997 ). HTML versi ini adalah penyempurnaan dari HTML versi 3.0. keluarnya versi ini dikarenakan adanya beberapa kasus yang timbul pada pengembang browser yang telah melakukan pendekatan dengan cara lain yang justru hal tersebut menjadi popular. Maka dibakukan versi 3.2 untuk mengakomodasi praktek yang banyak digunakan oleh pengembang browser dan diterima secara umum. Dapat dikatakan versi 3.2 ini merupakan versi 3.2 yang dikembangkan oleh beberapa pengembang browser seperti Netscape dan Microsoft.
    • 4. HTML versi 4.0 ( 18 Desember 1997). Versi ini sudah terdapat penambahan pada link, meta, image dan lain-lain sebagai penyempurnaan versi 3.2. 5. HTML versi 4.01 ( 24 Desember 1999 ). HTML versi 4.01 menjadi rekomendasi W3C. HTML 4.01 adalah minor update-koreksi dan perbaikan bug dari HTML 4.0. 6. XHTML versi 1.0 ( 20 Januari 2000 ). XHTML 1.0 merumuskan HTML 4.0 dalam XML. 7. HTML 5 ( 22 Januari 2008 ). HTML 5 meningkatkan interoperabilitas dan mengurangi biaya pengembangan dengan membuat aturan yang tepat tentang bagaiman untuk menangani semua elemen HTML, dan bagaimana memulihakan dari kesalahan. Beberapa fitur dalam HTML 5 adalah fungsi untuk audio embedding, video, grafik, sisi penyimpanan data klien, dan dokumen interaktif. HTML 5 juga mengandung unsur-unsur baru seperti <nav>, <header><footer>, dan <figure>. Yang termasuk kelompok kerja diantaranya AOL, Apple, Google, IBM, Microsoft, Mozilla, Nokia, Opera dan banyak lagi vendor lainnya. 2.3 Karakteristik HTML 5 HTML5 merupakan sebuah bahasa markah untuk menstrukturkan dan menampilkan isi dari World Wide Web, sebuah teknologi inti dari Internet.HTML5 adalah revisi kelima dari HTML dan hingga bulan Juni 2011 masih dalamipengembangan. Dimana 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 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.Beberapa browser sudah mendukung HTML5 seperti safari, chrome, firefox, dan opera. Kabarnya IE9 ( Internet Explorer ) akan mendukung beberapa fitur dari HTML5. Pembuatan HTML5 juga di karenakan Standard HTML4 yang dijumpai banyak memiliki kelemahan untuk mendukung aplikasi web yang interaktif.Akibat hal ini banyak orang menambahkan fitur baru baik disisi aplikasi web ataupun disisi browser.Solusi ini dikenal dengan plugin dan salah satunya adalah Flash dan Silverlight. Editor HTML5, Ian Hickson, berharap spesifikasi HTML5 dapat mencapai tahap kandidat rekomendasi pada tahun 2012.Pada tahun 2007 Spesifikasi HTML5 diadopsi sebagai pekerjaan permulaan untuk grup baru yang mengurus HTML di World Wide Web Consorsium (W3C). Kriteria baru dari W3C inilah yang membuat HTML 5 mempunyai standar tersendiri yang berbeda dari yang lain. Di dalam teknologi HTML 5 terdapat berbagai pembaruan dari versi sebelumnya, perbedaan itu terlihat antara lain terdapat berbagai fitur seperti frame, acronym, scope yang pada versi sebelumnya ada kini telah dihilangkan. 2.4 Komponen dan atribut baru pada HTML 5 Demi mewujudkan struktur halaman web yang lebih baik semantik dan aksesibilitasnya, dikenalkanlah beberapa elemen baru, diantaranya: section serupa seperti h1-h6. article bisa berupa entri blog atau tulisan konten. aside menyajikan konten pelengkap. header bisa menyajikan judul, deskripsi, bahkan nav untuk navigasi.
    • footer berisi catatan kaki seperti informasi hak cipta, penulis, kontak, dan sebagainya. Dialog yang dikombinasikan dengan dt dan dd (seperti pada halaman FAQ) dapat digunakan untuk menyajikan percakapan. Penggunaan elemen figure, video, audio, source, embed, canvas dan elemen terkait berkas multimedia lainnya. Elemen <canvas> untuk menggambar 2D Elemen <video> dan <audio> untuk media player Support local storage Konten spesifik elemen baru, seperti <article>, <footer>, <header>, <nav>, <section> Kontrol form baru, seperti kalender, tanggal, waktu, email, url, search Daftar lengkap elemen baru di HTML5 Tag Description <article> Mendefinisikan sebuah artikel <aside> Mendefinisikan konten selain dari konten halaman/post <audio> Mendefinisikan konten audio <canvas> Digunakan untuk menggambar grafik, on the fly, melalui scripting (JavaScript biasanya) <command> Mendefinisikan tombol perintah untuk dapat memanggil <details> Mendefinisikan rincian tambahan bahwa pengguna dapat melihat atau menyembunyikan <datalist> Menentukan daftar pilihan standar untuk kontrol input
    • <embed> Mendefinisikan sebuah wadah untuk aplikasi eksternal (non-HTML) <header> Mendefinisikan sebuah dokumen atau bagian header <figure> Menentukan konten mandiri <footer> Mendefinisikan sebuah dokumen atau bagian footer <hgroup> Groups heading (<h1> to <h6>) elemen <mark> Mendefinisikan teks yang ditandai / disorot <output> Mendefinisikan hasil penghitungan <source> Mendefinisikan beberapa sumber media untuk elemen media (<video> dan <audio>) <summary> Mendefinisikan sebuah visible heading untuk elemen <details> <time> Mendefinisikan tanggal / waktu <video> Mendefinisikan sebuah video atau film <section> Mendefinisikan bagian dalam dokumen Daftar lengkap elemen yang tidak dipakai lagi (obsolete) di HTML5, antara lain: Tag Description <acronym> Mendefinisikan sebuah akronim <basefont> Menentukan warna standar, ukuran, dan font untuk semua teks dalam dokumen
    • <big> Mendefinisikan ukuran teks besar <center> Mendefinisikan posisi teks dicenter <dir> Mendefinisikan direktori list <font> Mendefinisikan font, warna, dan ukuran untuk teks <frame> Mendefinisikan sebuah window (frame) dalam sebuah frameset <frameset> Mendefinisikan satu set frame <strike> Mendefinisikan teks strikethrough <noframes> Mendefinisikan sebuah konten alternatif bagi pengguna bahwa konten tidak mendukung frame <applet> Mendefinisikan sebuah applet embed Juga elemen saperti <blink>, <marquee>, <multicol>, <tt> juga telah ditinggalkanipenggunaanyaidiistrukturiHTML5. Selain elemen-elemen diatas ada juga fitur "conforming" pada HTML5, seperti penggunaan attribut pada elemen tertentu. Attribut baru HTML 5 antara lain: Tag Description draggable Menentukan apakah suatu unsur adalah draggable atau tidak contextmenu Menentukan menu konteks untuk suatu elemen. Menu konteks muncul ketika pengguna mengklik kanan pada elemen
    • hidden Menentukan bahwa elemen belum, atau tidak lagi, relevan spellcheck Mendefinisikan posisi teks dicenter dropzone Mendefinisikan direktori list contenteditable Mendefinisikan font, warna, dan ukuran untuk teks itemprop Digunakan untuk group item HTML5 Audio Salah satu fitur baru HTML5 yang paling mencengangkan adalah disediakannya tag baru yang memungkinkan kita untuk memutar audio sesuai yang kita inginkan tanpa menggunakan plugin tambahan seperti flash player. Dengan menggunakan tag <audio> kita sudah bisa memasukkan file mp3 dan ogg ke dalam halaman web kita. Untuk menambahkan audio ke dalam web kita, cukup ketikkan kode berikut <!DOCTYPE html> <html> <body> <audio controls="controls"> <source src="music/FromHere.ogg" type="audio/ogg"> Your browser does not support the audio element. </audio> </body> </html>
    • Sehingga akan menampilkan output seperti berikut : · Mozilla version 9.0.1 Google chrome Version 22.0.1229.94 Opera version 12.10 beta RC Penjelasan dari tags diatas: < <audio>, tag audio utama, digunakan untuk memasukkan audio ke dalam HTML. <source>, digunakan untuk mengambil source file yang akan dimainkan audionya.
    • Atribut pada audio Autoplay, atribut ini digunakan untuk member opsi kepada tag audio apakah langsung dimainkan secara otomatis atau tidak. Controls, atribut ini memberikan pilihan untuk menampilkan kontrol audio (volume, seeker, play/pause button). Type, digunakan untuk mendefinisikan tipe audio yang dimainkan. Src, digunakan untuk mendefinisikan source audio yang 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 Fitur multimedia lainnya yang didukung oleh HTML5 adalah video. Jika selama ini kita harus menggunakan flash player untuk memasukkan konten video, pada HTML5 kita tidak perlu lagi menggunakannya. Untuk menambahkan elemen video kita gunakan kode berikut: <!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 akan menampilkan output sebagai berikut : · Mozilla version 9.0.1 Google chrome Version 22.0.1229.94 Opera version 12.10 beta RC HTML5 Canvas Fitur yang lain pada HTML5 adalah <canvas>. Canvas memungkinkan kita untuk memasukkan objek 2D atau 3D kedalam halaman web. Canvas juga sama seperti
    • GeoLocation, tidak bias bekerja sendiri. Dibutuhkan javascript untuk membuat objek di dalamnya, baik 2D maupun 3D. Untuk membuat objek di dalam canvas kita gunakan kode berikut : <!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 kita dapatkan hasil output seperti berikut : Mozilla version 9.0.1
    • Google chrome Version 22.0.1229.94 Opera version 12.10 beta RC HTML5 Form Element Pada HTML5 kita mengenal beberapa elemen form baru. Jika dahulu kita terbatas pada input dan textarea, kali ini HTML5 menambahkan tiga elemen baru yaitu datalist, keygen, dan output. Namun untuk keygen, dukungan browser saat ini belum memenuhi standar keamanan, sehingga lebih aman untuk para web programmer menggunakan enkripsi pada server-side seperti md5, sha1, dan base64_encode. 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 kita dapatkan hasil output seperti berikut : Mozilla version 9.0.1 Google chrome Version 22.0.1229.94
    • 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> Sehingga kita dapatkan hasil output seperti berikut : Mozilla version 9.0.1
    • Google Chrome Version 22.0.1229.94 Opera version 12.10 beta RC Dikenalkan pula beberapa atribut dan aturan baru, seperti: atribut media, ping pada elemen pranala, autofocus, placeholder, required, autocomplete dan sebagainya, terkait elemen input dan form reversed pada elemen ol untuk urutan besar ke kecil. Fitur baru harus didasarkan pada HTML, CSS, DOM, dan JavaScript Mengurangi kebutuhan untuk plugin eksternal (seperti Flash) Lebih baik dalam hal penanganan kesalahan/error handling Lebih markup untuk menggantikan scripting 2.5 Fitur-fituripadaiHTML5 Didalam HTML 5 memiliki fitur-fitur yang berbeda dari fitur aplikasi HTML versi yang sebelum-sembelumnya. Adapun diantaranya HTML memiliki fiturfitur baru seperti: HTML5iCanvas Pada HTLM sebelumnya kita membutuhkan suatu aplikasi yang membantu kita untuk berhubungan dengan web kita, misalnya Flash atau Java. Namun pada HLML5 aplikasi tersebut akan diganti oleh elemen <canvas> pada HTML5 sebagai Canvas web -- kertas yang bisa dicoreti
    • sesuai imajinasi -- atau dalam hal lain, Canvas memungkinkan kita untuk bereksperimen lebih pada HTML5. AudioidaniVideo Versi HTML pendahulun kita harus menyisipkan flash untuk memutar audio/video untuk memutar audio/video, namun pada HTML5 akan dengan mudah menyisipkan file multimedia tersebut ke dalam webnya. Pada HTML5 ada tag <audio> dan <video> yang berfungsi untuk menyisipkan file audio dan video tentunya. Web Workers Pada web yang menggunakan HTML sebelumnya sering kali kita lama dalam membuka web tersebut, ini dikarenakan banyaknya penggunaan JAVESCRIPT. Pada HTML5 disediakan WEB WORKERS yang mempercepat dalam pemrosesan JAVASCRIPT lebih cepat dan multitasking. New Semantic Elements: Ini seperti pada elemen <header>, <footer>, and <section>. Forms 2.0: Perbaikan form web HTML di mana atribut baru telah diperkenalkan tag <input>. LocaliStorage Local Storage ini mempunyai fungsi sebagai pengganti cache sebagai media penyimpanan history halaman web. Memungkinkan web untuk menyimpan data cache lebih besar di storage local-nya daripada cache pada browser biasa. Semantics Semantics disini merupakan fitur yang dijadikan unggulan dalam HTML5.Pada HMLT sebelumnya banyak web designer yang menggunakan elemen div, nav, dan lainnya. Nah pada HTML5 hal seperti itu sudah tidak digunakan dengan adanya semantics akan menjadi masa depan tag layout dan format yang membuat web akan lebih dinamis serta lebih menarik.
    • Persistent Local Storage: Untuk menghilangkan ketergantungan pada plugin pihak ketiga. WebSocket: Sebuah generasi teknologi terbaru komunikasi dua arah untuk aplikasi web. Server-Sent Events: memperkenalkan even yang mengalir dari web server ke web browser yang disebut Server-Sent Events (SSE). Audio & Video: Anda dapat menanamkan/embed audio atau video pada halaman web Anda tanpa menggunakan plugin pihak ketiga. Geolocation: Pengunjung dapat memilih untuk berbagi lokasi fisik mereka dengan aplikasi web Anda.. Microdata: Ini memungkinkan Anda membuat kosakata Anda sendiri di luar HTML5 dan memperluas halaman web Anda dengan kostum semantics. Drag and drop: Drag dan drop item dari satu lokasi ke lokasi lain pada halaman web yang sama. Support terhadap media penyimpanan offline Memiliki media video dan audio untuk multimedia Terdapat elemen konten yang spesifik contoh artikel, footer, header, navigation dan section. Memiliki kontrol form baru seperti kalender, tanggal, waktu, e-mail, URL dan search. Artikel dapat berupa entri blog atau konten. 2.6 Mengadopsi Aplikasi HTML5 Sekarang, kita harus menyadari bahwa HTML5 bukanlah sebuah entitas tunggal yang dapat Anda mengadopsi atau bermigrasi ke dalam satu gerakan . Mengadopsi HTML5 , bukannya pilihan grosir , adalah tentang membuat evaluasi teknologi demi teknologi dan menentukan teknologi yang tepat untuk aplikasi Anda.
    • Namun, bahkan dengan set stabil teknologi HTML5 , kita tidak harus mengabaikan pengguna yang belum pindah ke browser yang lebih baru . Jika kita banyak terlibat dalam pengembangan sehari- hari untuk sebuah situs , kita pasti memiliki beberapa gambaran kasar tentang persentase pengguna yang mengunjungi situs Anda dengan browser tertentu . Bagi kebanyakan dari kita , akan mudah untuk melihat persentase pengguna yang mengunjungi dengan browser yang lebih tua dan sampai pada kesimpulan bahwa mengadopsi teknologi HTML5 apapun akan berdampak negatif para pengguna . Untungnya ada " polyfilling " untuk menyelamatkan kita dari menunggu sampai suatu tanggal berkabut di masa depan untuk mengadopsi HTML5 . Ketika datang untuk memilih mana teknologi untuk mengadopsi , daftar akhir mungkin kombinasi dari spesifikasi luas didukung dan spesifikasi lain yang Anda harus polyfill dukungan untuk browser tertentu . Hanya Anda akan tahu susunan yang tepat dari daftar berdasarkan kebutuhan Anda saat ini dan konteks. Dalam beberapa bulan mendatang , saya akan membahas beberapa spesifikasi penting , dari Geolocation dan Formulir dan kanvas , untuk Pekerja Web , Sockets Web dan IndexedDB . Beberapa secara luas didukung dan " situs siap, " dan beberapa, seperti Sockets Web , terlalu inovatif untuk mengabaikan , terlepas dari mana mereka berdiri saat ini. Dengan spesifikasi masing-masing , saya akan membahas dukungan saat ini dan masa depan diketahui , beberapa dasar-dasar tentang bagaimana Anda dapat menerapkan fitur spesifikasi pada situs Anda , dan bagaimana polyfill dukungan untuk browser yang tidak mendukung fitur yang diberikan . Di atas segalanya, mulai mengadopsi HTML5 hari ini. Web tidak akan pernah sama , benar-benar, dan Anda dapat menjadi bagian dari katalis dengan membangun aplikasi Web berikutnya besar menggunakan HTML5 .
    • Bahkan , HTML5 merupakan istilah umum yang menggambarkan satu set HTML , CSS dan JavaScript spesifikasi dirancang untuk memungkinkan pengembang untuk membangun generasi berikutnya dari situs web dan aplikasi . Apa yang penting dalam definisi yang tiga bagian: HTML , CSS dan JavaScript . Mereka menentukan bagaimana pengembang menggunakan markup membaik , kemampuan gaya kaya dan baru JavaScript API untuk membuat sebagian besar fitur pengembangan Web baru . Sederhananya , HTML5 = HTML + CSS + JavaScript . " Situs -Ready HTML5 " adalah istilah digunakan Microsoft untuk menjelaskan teknologi HTML5 yang dapat Anda gunakan saat ini karena mereka memiliki dukungan luas di semua browser utama . Teknologi seperti tag HTML baru , kanvas , Scalable Vector Graphics , Audio dan Video , Geolocation , Penyimpanan Web dan banyak baru CSS3 modul semua jatuh ke dalam ruang ini , dan mereka diimplementasikan dalam Internet Explorer 9 , serta browser utama lainnya . Melampaui apa yang tersedia saat ini , Microsoft menggunakan Previews platform publik untuk menginformasikan pengembang apa yang datang dalam versi berikutnya dari browser , serta untuk mengumpulkan umpan balik . Untuk Internet Explorer 9 , Microsoft merilis Previews Landasan setiap enam sampai delapan minggu , setiap kali mengumumkan tambahan baru HTML5 , fitur dan perbaikan kinerja untuk pengembang untuk mencoba dan mengevaluasi . Internet Explorer 9 dirilis pada bulan Maret dan pada awal Juli , Microsoft telah merilis dua Pratinjau Platform untuk Internet Explorer 10 , menandakan bahwa Microsoft terus irama rilis reguler untuk Internet Explorer preview . Untuk memastikan bahwa HTML5 bekerja secara konsisten di semua browser , Microsoft telah banyak berinvestasi dalam interoperabilitas , membuat dan mengirimkan suite tunggal terbesar kasus uji yang berkaitan dengan HTML5 W3C . Untuk pertama kalinya , suite ini kasus uji akan digunakan oleh W3C sebagai sumber otoritatif HTML5 " kesiapan " di masing-masing browser . Hasil
    • akhir untuk Anda dan saya sebagai pengembang adalah bahwa kita bisa mengadopsi dan menerapkan teknologi HTML5 sekali, dan percaya bahwa mereka akan bekerja secara konsisten di semua browser. HTML5 dan Microsoft Developer Tools Selain keterlibatan Microsoft dengan W3C dan teknologi HTML5 didukung dalam browser , ada dimensi lain Pendekatan Microsoft terhadap HTML5 yang penting untuk pengembang : pendekatan untuk HTML5 perkakas . Pada awal 2011 , Microsoft diperbarui dua alat pengembangan dengan paket layanan : Visual Studio 2010 dan Expression Web 4 . Layanan paket untuk kedua alat ini memberikan jenis HTML5 dokumen untuk validasi , serta IntelliSense untuk tag HTML5 baru dan atribut . Jika Anda menggunakan Visual Studio 2010 SP1 , Anda dapat mengaktifkan Skema HTML5 dengan mengklik Tools | Options | Text Editor | HTML | Validasi , dan kemudian memilih opsi HTML5 dalam daftar drop -down Target, seperti yang ditunjukkan pada Gambar 1 . Anda juga dapat mengatur HTML5 sebagai skema default dari Sumber HTML Editing Toolbar dalam file HTML. Sementara beberapa teknologi HTML5 sudah ada di Internet Explorer 9 , dan yang lain sedang diumumkan untuk Internet Explorer 10 lewat Internet Explorer Landasan Previews , beberapa spesifikasi populer dan berita membutuhkan pekerjaan sedikit lebih oleh W3C dan vendor browser sebelum mereka akan siap untuk mengimplementasikan dalam aplikasi kita. Salah satu contohnya adalah Socket Web , spesifikasi menarik yang memungkinkan pengembang membuka saluran komunikasi dua arah dengan server back-end , sehingga memungkinkan tingkat " real-time " konektivitas yang sebelumnya tidak tersedia dalam aplikasi Web . Sebagai pengembang , Anda tidak dapat diragukan bayangkan penggunaan yang tak terhitung untuk Socket Web dalam aplikasi Anda sedang membangun sekarang. Tapi spesifikasi Web Sockets masih berubah dengan pesat , dengan aspek-aspek kunci masih dalam fluks dan sedang dibahas
    • di dalam W3C . Mengingat situasi , akan sulit untuk menyediakan fitur ini secara konsisten dan andal di semua browser saat ini. Untuk spesifikasi stabil atau berkembang seperti Sockets Web ( yang kita akan membahas secara mendalam dalam artikel mendatang ) , Microsoft menciptakan HTML5 Labs , sebuah situs untuk pengembang untuk bereksperimen dengan rancangan implementasi teknologi tersebut . Situs ini menyediakan prototipe Anda dapat men-download dan mencoba secara lokal , serta host demo untuk beberapa spesifikasi . Tujuannya adalah untuk memberikan tempat untuk mencoba spesifikasi ini untuk diri sendiri , dan bagi Anda untuk memberikan baik Microsoft dan umpan balik W3C pada spesifikasi ini karena mereka menstabilkan dan dekat implementasi dalam browser . 2.7 Browser yang mendukung HTML 5 Beberapa browser sudah mendukung HTML5 seperti safari, chrome, firefox, dan opera. Kabarnya IE9 ( Internet Explorer ) akan mendukung beberapa fitur dari HTML5. Pembuatan HTML5 juga di karenakan Standard HTML4 yang dijumpai banyak memiliki kelemahan untuk mendukung aplikasi web yang interaktif.Akibat hal ini banyak orang menambahkan fitur baru baik disisi aplikasi web ataupun disisi browser.Solusi ini dikenal dengan plugin dan salah satunyaiadalahiFlashidaniSilverlight. Semakin menjamurnya plugin didalam aplikasi atau browser membuat aplikasi web ini susah untuk menembus banyak browser. Hal ini dikarenakan setiap plugin mempunyai cara yang berbeda-beda, sebagai contoh kita ingin memasang plugin flash untuk sharing video maka pada halaman web kita harus ditulis sebagai berikut
    • <object type="application/x-shockwave-flash" width="400" height="220" wmode="transparent" data="flvplayer.swf?file=movies/holiday.flv"> <param name="movie" value="flvplayer.swf?file=movies/holiday.flv" /> <param name="wmode" value="transparent" /> </object> Sementara beberapa teknologi HTML5 sudah ada di Internet Explorer 9 , dan yang lain sedang diumumkan untuk Internet Explorer 10 lewat Internet Explorer Landasan Previews , beberapa spesifikasi populer dan berita membutuhkan pekerjaan sedikit lebih oleh W3C dan vendor browser sebelum mereka akan siap untuk mengimplementasikan dalam aplikasi kita. Salah satu contohnya adalah Socket Web , spesifikasi menarik yang memungkinkan pengembang membuka saluran komunikasi dua arah dengan server back-end , sehingga memungkinkan tingkat " real-time " konektivitas yang sebelumnya tidak tersedia dalam aplikasi Web. 2.8 Kelebihan HTML 5 Sebagai suatu rancangan bagi web browser yang lebih baru sudah pasti HTML 5 mempunyai beberapa kelebihan jika dibandingkan dengan versi sebelumnya, beberapa diantara kelebihan HTML 5 diantarannya: Dapat ditulis dalam sintaks HTML (dengan tipe media text/HTML) danXML. Integrasi yang lebih baik dengan aplikasi situs dan pemrosesannya. Integrasi (‘inline’) dengan doctype yang lebih sederhana. Penulisan kode yang lebih efisien. Konten yang ada di situs lebih mudah terindeks oleh search engine. Memiliki integrasi yang bagus terhadap aplikasi web Dapat dideteksi oleh browser lama
    • Format HTML5 juga menawarkan bentuk ditingkatkan untuk mencari kotak, input teks dan bidang lain yang relevan dan menawarkan validasi data yang mudah dan interaksi dengan elemen halaman serta perbaikan yang berarti lainnya. HTML5 mendukung fitur geo-lokasi canggih, terlepas dari apakah yang diberikan oleh GPS atau tidak, secara langsung diterapkan pada semua browser HTML5 kompatibel.Lintang Google pada iPhone adalah contoh terbaik dari Geolokasi.Aplikasi geo-lokasi benar-benar platform independen. Format HTML5 juga fitur baru dan lebih baik Database API umum digunakan secara lokal. Sederhananya, ia menyediakan penyimpanan yang jelas database yang memberikan pengembang kesempatan untuk menyimpan atau menyimpan data terstruktur. Database ini digunakan ketika Anda ingin menyimpan belanja produk keranjang untuk situs belanja secara online. 2.9 Perluasan Pembuatan Aplikasi HTML5 Menurut informasi yang ada pada lamanCHIP.co.id , Pada Intel Developer Forum (IDF) di Beijing, Intel mengatakan akan memperluas pemakaian HTML 5, dengan meluncurkan HTML5 Development Environment. Platform ini menyediakan sistem yang terintegrasi untuk mengembangkan, menguji, melakukan debug, dan menjalankan aplikasi di beberapa sistem operasi seperti iOS, Android, Windows 8 dan Windows Phone. Dengan perluasan plattform ini, maka dipastikan penggunaan HTML5 akan digunakan oleh banyak apikasi alat komunikasi. Hal ini pastinya turut membantu para pengembang mengatur aplikasi yang mereka ciptakan untuk dijalankan pada platform secara keseluruhan. Patrick Darling dari Intel mengatakan, ”HTML5 memudahkan pada developer untuk menciptakan aplikasi yang dapat dijalankan pada
    • seluruhplatform." Patrick juga menambahkan bahwa Intel turut membantu developer untuk membuat aplikasi dengan biaya yang lebih rendah, cepat, dan kemudahan penyebarannya ke pasar dengan HTML5. Wakil Presiden Direktur dan General Manajer Divisi Software Intel, Doug Fisher memperkenalkanplatform baru pada hari ke-2 IDF Beijing 2013.Dia mengatakan platform tersebut membuat HTML5 dapat diakses dan digunakan seluruh developer. Yang pasti, platform ini membantu developer untuk menjual aplikasinya pada banyak pasar aplikasi, seperti Amazon, AppStore, Facebook, Google Chrome Web Store, Google Play Stire dan Windows Phone Store. Lebihnya lagi, sarana baru dari Intel ini tersedia bebas dari biaya lisensi dan biaya lainnya. Dikatakan bahwa HTML5 merupakan tren masa depan dalam pembuatan dan pengembangan aplikasi cross platform, atau aplikasi yang kompatibel dengan seluruh platform. Perluasan pijakan ini tentunya akan menambah banyaknya penggunaan HTML5.
    • BAB III PENUTUP 3.1 Kesimpulan HTML5 merupakan sistem bahasa yang sangat kompleks.Dengan disajikannya makalah ini diharapkan pembaca dapat memahami lebih dalam lagi mengenai HTML5. Dengan segala kelebihan dan keunggulan dalam HTML5, tentunya hal ini menjadi pertimbangan parapengguna untuk menggunakan HTML5 sebagai plattform dalam media komunikasi.HTML5 merupakan sebuah bahasa markah untuk menstrukturkan dan menampilkan isi dari World Wide Web, sebuah teknologi inti dari Internet. Pembuatan HTML5 juga di karenakan Standard HTML4 yang dijumpai banyak memiliki kelemahan untuk mendukung aplikasi web yang interaktif.Akibat hal ini banyak orang menambahkan fitur baru baik disisi aplikasi web ataupun disisi browser.Solusi ini dikenal dengan plugin dan salah satunya adalah Flash dan Silverlight.
    • DAFTAR PUSTAKA http://www.jeanotnahasan.com/2012/02/pengertian-tujuan-fitur-barudan.html.Diakses pada 19 Oktober 2013 http://repository.gunadarma.ac.id/bitstream/123456789/4815/1/1.%20DOKUME N%20PRESENTASI.pdf. Diakses pada 19 Oktober 2013 http://id.wikipedia.org/wiki/HTML5. Diakses pada 19 Oktober 2013 http://tegararian.blogspot.com/2013/04/definisi-dan-karakteristik-html.html. Diakses pada 19 Oktober 2013 http://id.wikipedia.org/wiki/HyperText_markup_language.Diakses pada 19 Oktober 2013 http://dayezii.blogspot.com/p/penjelasan-html.html.Diakses pada 19 Oktober 2013 http://design-web11.blogspot.com/2013/06/artikel-html-sejarah-perkembangandan.html. Diakses pada 19 Oktober 2013 http://www.kaskus.co.id/thread/509751de1dd719be13000093/tentang-html5. Diakses pada 20 Oktober 2013 http://www.reyvababtista.com/2011/12/html5-apa-fitur-tambahannya.html. Diakses pada 20 Oktober 2013 http://html5bydemo.blogspot.com/. Diakses pada 20 Oktober 2013 http://problogiz.blogspot.com/2013/01/html5-apa-saja-yang-baru.html.Diakses pada 20 Oktober 2013 http://msdn.microsoft.com/en-us/magazine/hh335062.aspx. Diakses pada 21 Oktober 2013 http://blog.haqqi.net/2011/06/komponen-html5-yang-wajib-diketahui/.Diakses pada 22 Oktober 2013 http://www.html5code.com/tutorials/understanding-the-html5-timeline/.Diakses pada 22 Oktober 2013
    • http://programwahid.blogspot.com/2013/03/dasar-pemrograman-web-denganhtml.html. Diakses pada 23 Oktober 2013