Html5
- 1. Pengertian HTML HyperText 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.
- 2. 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 Langiage, sebuah bahasa yang menggunakan tanda- tanda sebagai basisnya. IBM menamakan sistemnya ini sebagai Generalized Markup Language atau GML.
- 3. 1.Pengembangan HTML Pengembangan HTML tahun 1989, Sebuah nama HTML muncul dari pemikiran Caillau Tim yang bekerja sama dengan Banners Lee Robert yang ketika itu masih bekerja di CERN memulai mengembangkan bahasa pemrograman ini, dan dipopulerkan pertama kali dengan browser Mosaic. Nah mulailah dari tahun 1990 HTML sangat berkembang dengan cepat hingga mencapai versi HTML versi 5.0 yang digarap pada 4 Maret 2010 kemarin oleh W3C HTML versi 1.0 ini adalah versi pertama sejak lahirnya nama html tersebut, memiliki sebuah kemampuan untuk heading, paragraph, hypertext, bold dan italic text, wrapping serta memiliki dukungan dalam peletakan sebuah gambar HTML versi 2.0 pada 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 pioneer dalam perkembangan homepage interaktif.
- 4. Browser yang Mendukung HTML •Opera Web Browser (mulai dari Opera 9.2 sampai yang terbaru saat ini yaitu opera 10) •Safari (mulai dari versi 3.1) •FireFox (Mulai dari FireFox 3 ) •Google Chrome (Mulai dari versi 3) •Internet Explorer (Mulai dari versi 8)
- 5. PENGERTIAN HTML 5 HTML5 adalah sebuah bahasa markah untuk menstrukturkan dan menampilkan isi dari Waring Wera Wanua, sebuah teknologi inti dari internet. HTML5 adalah revisi kelima dari HTML (yang pertama kali diciptakan pada tahun 1990 dan versi keempatnya, HTML4, pada tahun1997) 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.
- 6. Tujuan dibuatnya HTML5 antara lain: 1.Fitur baru harus didasarkan pada HTML, CSS, DOM , dan JavaScript. 2.Mengurangi kebutuhan untuk plugin eksternal (seperti Flash). 3.Penanganan kesalahan yang lebih baik. 4.Lebih banyak markup untuk menggantikan scripting. 5.HTML5 merupakan perangkat mandiri.
- 7. Fungsi HTML 5 Fungsi HTML yang lebih spesifik yaitu : •Membuat halaman web. • Menampilkan berbagai informasi di dalam sebuah browser Internet. • Membuat link menuju halaman web lain dengan kode tertentu (hypertext). •Membentuk tata letak dokumen, dalam hal ini menentukan jenis huruf, gambar, dan komponen dokumen lainnya. •Menentukan hubungan ke dokumen lain, HTML merupakan suatu bahasa komputer yang termasuk dalam katagori SGML (Standard Generalized Markup Language) dimana bentuknya merupakan file standar ASCII yang berisi kode-kode untuk mengatur dokumen. •Menentukan ukuran dan alur tulisan. •Mengintegerasikan gambar dengan tulisan. •Mengintegerasikan berkas suara dan rekaman gambar hidup.
- 8. •Membuat form interaktif. •Kita dapat menampilkan suatu kelompok kata dalam beberapa ukuran yang dapat digunakan untuk judul, heading dan sebagainya. •Kita dapat menampilkan tulisan dalam bentuk cetakan tebal •Kita dapat menampilkan sekelompok kata dalam bentuk miring. •Kita dapat menampilkan naskah dalam bentuk huruf yang miring dengan hasil ketikan mesin ketik. •Kita dapat mengubah-ubah ukuran tulisan untuk suatu karakter tertentu.
- 9. Fitur baru dalam HTML5: •Unsur kanvas untuk menggambar. •Video dan elemen audio untuk media pemutaran. •Dukungan yang lebih baik untuk penyimpanan secara offline. Elemen konten yang lebih spesifik, seperti artikel, footer, header, navigation, section. Bentuk kontrol form seperti kalender, tanggal, waktu, e-mail, URL, search.
- 10. Beberapa teknologi yang juga terkait namun tidak dijadikan bagian dalam spesifikasi HTML5 W3C dan WHATWG HTML5 adalah : •Geolocation •Web SQL Database, media penyimpanan database lokal. •API Database terindeks, mode penyimpanan hierarkis key- value (WebSimpleDB).
- 11. Beberapa kelebihan yang dijanjikan pada HTML5: •Merupakan bahasa penkodean yang lintas platform (cross platform), maksudnya HTML dapat digunakan pada berbagai jenis mesin komputer yang berbeda dan berbagai macam sistem operasi yang berbeda. Jadi bersifat fleksibel karena ditulis cukup dengan menggunakan editor karakter ASCII. •Dapat disisipi gambar baik gambar statis atau dinamis (animasi) termasuk menggunakan gambar untuk dijadikan hyperlink. Gambar di sini digunakan untuk merujuk pada suatu halaman web, dimana setiap titik-titik yang sudah didefinisikan berupa rectangular (kotak), poligon (kurva tak beraturan) atau lingkaran digunakan untuk ‘jump’ ke halaman lain, atau link ke halaman di luar web yang bersangkutan. •Dapat disisipi animasi berupa Java Applet atau file-file animasi dari Macromedia Flash atau Macromedia Shockwave (untuk keperluan ini, browser harus memiliki plug-in khusus untuk menjalankan file-file animasi ini).
- 12. Adapun kekurangan dari HTML ini adalah: •Menghasilkan halaman yang statis, untuk memperoleh halaman yang dinamis harus menggunakan bahasa pemrograman tertentu seperti Javascript atau VBScript dan animasi seperti Flash atau Shockwave. •Memiliki tag-tag yang begitu banyak sehingga susah dipelajari untuk yang masih awam. •Tidak dapat menghasilkan halaman yang interaktif. Interaktif di sini maksudnya client dapat berinteraksi dengan server. Untuk keperluan itu, HTML harus disisipi bahasa pemrograman yang dapat menangani hal tersebut, contohnya Perl atau Tcl.
- 13. Saat ini HTML5 masih dalam pengembangan, namun hanya beberapa browser sudah mendukung HTML5. Beberapa browser tersebut seperti Safari, Chrome, Firefox, dan Opera. Kabarnya IE9 (Internet Explorer) akan mendukung beberapa fitur dari HTML5.
- 14. fitur yang terpenting diperkenalkan pada HTML5 : •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>. •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). •Canvas: Ini mendukung gambar dua dimensi surface yang dapat diprogram dengan JavaScript. •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.
- 15. PERBEDAAN HTML 4 DAN HTML 5 •Struktur halaman, •presentasi visual, •tools grafis, •support rich media, dan •peningkatan support javascript. •Section •Header •Footer •Nav •Article
- 16. fitur menarik yg muncul pada HTML5 seperti localstorage dan geolocation. Section : Sebuah bagian atau bab dalam sebuah buku, sebuah bagian dalam sebuah bab, atau pada dasarnya apa pun yang memiliki pos sendiri dalam HTML . Header : Header Halaman yang ditampilkan pada halaman , tidak sama dengan unsur kepala. Footer : Halaman footer di mana baik cetak pergi; tanda tangan dalam sebuah pesan e-mail. Nav : Koleksi link ke halaman lain. Article : Sebuah entri independen dalam sebuah blog, majalah, ringkasan
- 17. CONTOH DARI BEBERAPA GAME BERBASIS HTML5 YANG ADA SAAT INI: Angry Birds Fieldrunners Bejeweled 1.Tankworld GT Racing: Motor Academy
- 18. 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 •Daftar lengkap elemen yang tidak dipakai lagi (obsolete) di HTML5, antara lain:
- 19. <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 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 •Penambahan Tag baru pada HTML5 (Semantic/Structural Elements baru pada HTML5)
- 20. 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 Attribut baru HTML 5 antara lain: