Makalah HTML5

MAKALAH HTML5 “Membuat Aplikasi dengan Html5” Makalah ini disusun untuk memenuhi tugas mata kuliah : Teknologi Informasi dan komunikasi Dosen Pengampu : Septia Lutfi Disusun Oleh : Nama : Rina Puji Makrifah NIM : 1102412004 Rombel : 2 (Kamis, 09.00-10.40) Teknologi Pendidikan Universitas Negeri Semarang 2013 BAB I PENDAHULUAN A. Latar Belakang Kemajuan ilmu pengetahuan dan teknologi yang begitu cepat sangat mempengaruhi perkembangan pemrograman web saat ini. Salah satunya mendesain web dengan menggunakan HTML. HTML adalah script pemrograman yang mengatur bagaimana kita menyajikan informasi di dunia internet dan bagaimana informasi itu membawa kita melompat dari satu tempat ke tempat lainnnya. Dengan memanfaatkan HTML5 dapat memberikan berbagai kemudahan dan keuntungan bagi pengguna serta pembuatnya. Dengan HTML5 akan menjadikan tampilan desain website lebih menarik dan memungkinkan penyampaian pesan lebih informatif dan efisien. Kebutuhan masyarakat saat ini disebabkan oleh perkembangan teknologi yang ada. Seperti halnya dalam penyampaian informasi, yang tidak hanya berupa teks tetapi berupa multimedia. Dengan adanya teknologi HTML5 yang merupakan teknologi HTML terbaru yang mana memberikan kemudahan untuk pengembang dalam hal kode. Selain itu teknologi HTML5 juga memiliki elemen baru, yaitu HTML5 video yang berfungsi sebagai pengganti flash player, sehingga pengguna tidak perlu lagi meng-install plug-in flash player untuk memutar video. B. Rumusan Masalah 1. Apa itu HTML5 ? 2. Mengapa menggunakan HTML5 ? 3. Apa saja Manfaat HTML 5 ? 4. Apa saja elemen-elemen baru pada HTML5 ? 5. Apa itu HTML5 vs Native app ? 6. Bagaimana Membuat aplikasi android dengan HTML5 ? 7. C. Tujuan 1. Untuk mengetahui apa itu HTML5 2. Untuk mengetahui mengapa menggunakan HTML5 3. Untuk mengetahui apa saja manfaat HTML5 4. Untuk mengetahui apa saja elemen-elemen baru dalam HTML5 5. Untuk mengetahui apa itu HTML5 vs Native app 6. Untuk mengetahui cara membuat aplikasi android dengan HTML5 BAB II PEMBAHASAN 1. Pengertian Html HTML (Hypertext Markup Language) adalah utama bahasa markup untuk halaman web. Menyediakan sarana untuk membuat dokumen terstruktur oleh struktural menunjukkan semantik untuk teks seperti judul, paragraf, daftar etc serta untuk link, kutipan, dan item lainnya. Hal ini memungkinkan gambar dan objek yang akan tertanam dan dapat digunakan untuk membuat bentuk-bentuk interaktif. Hal ini ditulis dalam bentuk elemen HTML terdiri dari "tag" dikelilingi oleh sudut kurung di dalam konten halaman web. Hal ini dapat memasukkan atau dapat memuat skrip dalam bahasa seperti JavaScript yang mempengaruhi perilaku dari HTML prosesor seperti Web browser dan Cascading Style Sheets (CSS) untuk menentukan tampilan dan tata letak teks dan materi lain. The W3C, pengurus HTML dan CSS standar, mendorong penggunaan CSS lebih eksplisit presentasional markup. HTML merupakan pengembangan dari standar pemformatan dokumen teks yaitu SGML (Standard Generalized Markup Language). HTML sebenarnya adalah dokumen ASCII atau teks biasa, yang dirancang untuk tidak tergantung pada suatu sistem operasi tertentu. HTML dibuat oleh Tim Berners-Lee ketika masih berkerja untuk CERN dan dipopulerkan pertama kali oleh browser Mosaic. Selama awal tahun 1990 HTML mengalami perkembangan yang sangat pesat. Setiap pengembangan HTML pasti akan menambahkan kemampuan dan fasilitas yang lebih baik dari versi sebelumnya. Namun perkembangan resmi dikeluarkan pada bulan November 1995 oleh IETF (Internet Engineering Task Force). HTML 2.0 ini merupakan penyempurnaa dari HTML+ (1993). HTML 3.0 (1995) memberikan kemampuan lebih daripada versi sebelumnya. Sebuah usaha dari W3C (World Wide Web Consortium) HTML Working Group pada tahun 1996 menghasilkan HTML 3.2. HTML versi ini secara resmi diterbitkan pada bulan Januari 1997 HTML 4.01 yang dikeluarkan secara resmi oleh W3C pada tanggal 24 April 1998. HTML merupakan perbaikan dari HTML 4.0 yang lebih dulu diterbitkan pada 18 Desember 1997. HTML versi terbaru adalah HTML 5.0 yang dikeluarkan oleh AOL, Apple, Google, IBM, Microsoft, Mozilla, Nokia, Opera dan ratusan vendor lainnya yang secara resmi diterbitkan pada tanggal 19 Oktober 2010, namun belum mendapatkan rekomendasi dari W3C. HTML5 merupakan standar berikutnya dari revisi HTML versi sebelumnya. Seperti generasi sebelumnya, HTML 4.01 dan XHTML 1.1, HTML 5.0 merupakan standar untuk struktur dan menampilkan isi di WWW (World Wide Web). Standar baru dari HTML5 ini juga berhubungan dengan fitur seperti video playback dan drag-and-drop, yang pada versi sebelumnya masih tergantung pada plug-in dari pihak ketiga seperti Adobe Flash dan Microsoft Silverlight. Secara umum, format file video yang bisa dikenali antara lain ogg/ogv, mp4, dan WebM. Tiap-tiap format video di atas ditangani oleh video codec yang berbeda-beda, ogg menggunakan video codec bernama Theora, mp4 menggunakan H.264 dan WebM menggunakan VP8. Video codec ini sangat tergantung pada browser, sebagai contoh Internet Explorer 9 baru bisa mengenali video codec H.264, sedangkan Firefox sejak versi 3.5 mampu mengenali file WebM dan ogg sekaligus. Tabel 1. Format Video dan browser yang support • MP4 = MPEG 4 files with H264 video codec and AAC audio codec • WebM = WebM files with VP8 video codec and Vorbis audio codec • Ogg = Ogg files with Theora video codec and Vorbis audio codec 2. Beberapa Alasan Penggunaan HTML5 a. Fiturnya masih berdasarkan pada HTML, CSS, DOM dan JavaScript. b. Mengurangi penggunaan plugin dari pihak ketiga. c. Lebih independen. d. Pengembangan ke public yang lebih baik. 3. Manfaat HTML 5 1. HTML5 memiliki unsure canvas untuk menggambar. 2. HTML5 memiliki video dan elemen audio untuk media pemutaran. 3. HTML5 memiliki dukungan yang lebih baik untuk penyimpanan secara offline. 4. HTML5 memiliki konten yang lebih spesifik seperti , seperti artikel, footer, header, navigation, section. 5. HTML5 memiliki kontrol form seperti kalender, tanggal, waktu, e-mail, URL, search. 6. HTML5 mengurangi kebutuhan untuk plugin eksternal (Seperti Flash). 7. HTML5 memiliki penanganan kesalahan yang lebih baik 8. HTML5 memiliki lebih banyak markup untuk menggantikan scripting. 9. HTML5 merupakan perangkat yang mandiri. 4. Elemen-elemen baru yang ditambahkan pada HTML5 : a. Elemen Markup Elemen ini berisi tag-tag seperti header, footer, section, nay dan masih banyak lagi. b. Elemen Media Elemen inilah yang mendukung HTML5 untuk menggantikan Flash Player. Elemen ini berisi tag audio, video, source dan embed. c. Elemen Canvas Elemen Canvas ini berfungsi untuk membuat suatu objek atau gambar pada halaman web hanya dengan bantuan JavaScript. d. Elemen Baru Form Elemen yang berisi tag datalist, keygen dan juga output Mendesain HTML berarti melakukan suatu tindakan pemrograman. Namun HTML bukanlah sebuah bahasa pemrograman. Namun HTML hanyalah berisi perintah-perintah yang telah terstruktur berupa tag-tag penyusun. Menuliskan tag-tag HTML tidaklah sebatas hanya memasukkan perintah-perintah tertentu agar HTML kita dapat di akses oleh browser. Mendesain HTML adalah adalah sebuah seni tersendiri. Homepage yang merupakan implementasi dari HTML adalah refleksi dari orang yang membuatnya. Untuk itu kita perlu mendesainnya dengan baik agar para pengunjung homepage yang kita buat merasa senang dan bermanfaat. Mendesain HTML dapat dilakukan dengan dua cara: Menggunakan HTML Editor, seperti Microsoft FrontPage, Adobe Dreamweaver, dan lain lain. Dapatkan editor HTML lainnya disini. Dan dengan cara menuliskan sendiri secara manual satu persatu tag-tag HTML ke dalam dokumen HTML. Ada kelebihan dan kekurangan dari dua cara di atas. Cara pertama kelebihannya adalah HTML Editor merupakan sebuah program yang khusus didesain untuk membuat, melakukan editing bahkan mem-publish ke internet. Dengan kemampuannya menggabungkan kemudahan dan kecanggihan teknologi internet ke dalam dokumen HTML maka cara ini sangat disukai oleh para pemula dan desainer yang tidak ingin belajar lebih mendalam mengenai HTML. Sedangkan cara kedua adalah menuliskan secara manual satu persatu tag-tag HTML. Hal ini sangat disarakan sulit dikarenakan akan memakan tenaga dan waktu ekstra untuk melakukannya, ditambah lagi Anda harus melakukan cara-cara konvensional untuk melihat hasilnya pada web browser. Namun pada cara kedua adalah dasar dari segala bentuk HTML yang akan Anda pelajari, karena dengan cara itulah Anda akan lebih paham mengenai cara kerja dan berbagai perintah yang biasa dipakai pada bahasa HTML. Beberapa contoh awal bahasa markup yang tersedia diluar industri penerbitan dapat ditemukan pada piranti typesetting sistem Unix. Dalam sistem tersebut perintah pemformatan disisipkan ke dalam dokumen teks sehingga perangkat lunak typesetting bisa memformat teks berdasarkan keinginan editor. setelah beberapa saat terlihat bahwa kebanyakan bahasa markup memiliki fitur yang umum. inilah yang kemudian memndorong diciptakannya SGML (Standard Generalized Markup Languange), yang menentukan sintaks untuk memasukan markup pada dokumen. Selain SGML, diciptakan juga sistem lain (disebut metabahasa) untuk secara terpisah menjabarkan apa artinya markup. Dengan demikian penulis dapat menciptakan dan menggunakan sebarang markup yang mereka inginkan-memilih tag yang paling sesuai untuk mereka. SGML dikembangkan dan distandarisasi oleh International Standards Organization (ISO) pada tahun 1986. 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. 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 : Contoh diatas menggunakan plugin Flash dari Adobe untuk menjalankan aplikasi web pada browser maka lain caranya bila kita menggunakan Silverlight. Teknologi Silverlight dikembangkan oleh Microsoft. Contoh penggunaan Silverlight pada halaman web dapat dilihat pada HTML dibawah ini HTML5 ini dibuat menyederhanakan kompleksitas penggunaan media video dengan standard baru yaitu penggunaan tag