fajar satrio Makalah html5
Download as DOC, PDF•0 likes•1,468 views
Makalah ini membahas tentang sejarah perkembangan, pengertian, fitur-fitur, dan kelebihan serta kekurangan HTML5. HTML5 dimulai pengembangannya pada tahun 2004 oleh WHATWG dan pada tahun 2011 resmi dipublikasikan oleh W3C, menambahkan fitur-fitur baru seperti canvas, video, audio, drag and drop, serta menghilangkan tag-tag presentasi.
fajar satrio Makalah html5
- 1. MAKALAH HTML5 Makalah ini disusun untuk memenuhi tugas mata kuliah Teknologi Informasi dan Komunikasi Dosen Pengampu : Septia Lutfi, S. Kom, M. Kom Disusun oleh: Fajar Satrio (1102412060) Rombel 3 JURUSAN KURIKULUM DAN TEKNOLOGI PENDIDIKAN FAKULTAS ILMU PENDIDIKAN UNIVERSITAS NEGERI SEMARANG 2013
- 2. KATA PENGANTAR Assalamualaikum Wr.Wb. Puji syukur senantiasa saya hanturkan kepada Allah SWT yang telah melimpahkan rahmat,dan hidayah-Nya sehingga saya dapat menyelesaikan makalah dengan judul “HTML5” ini tepat pada waktunya, untuk memenuhi salah satu tugas mata kuliah Teknologi Informasi dan Komunikasi. Ada banyak kesulitan dalam penyelesaian tugas ini, namun berkat bantuan dari berbagai pihak, akhirnya kesulitan itu dapat saya atasi. Oleh karena itu, dengan segala kerendahan hati, saya mengucapkan terima kasih kepada semua pihak yang telah membantu dalam proses penyelesaian makalah ini. Dengan makalah ini, saya harap semoga makalah ini dapat bermanfaat bagi kita semua, dan mampu memberikan informasi tentang HTML5. Masih banyak kekurangan dalam penyusunan makalah ini. Oleh karena itu, saya mengharapkan kritik dan saran yang membangun dari pembaca agar nantinya bisa menjadi pembelajaran yang lebih baik lagi, agar nantinya saya dapat membuat makalah yang lebih baik lagi. Atas kritik dan saran anda kami mengucapkan terima kasih. Wassalamualaikum Wr.Wb Semarang, 24 oktober 2013 Fajar Satrio
- 3. DAFTAR ISI Kata Pengantar Daftar Isi BAB I PENDAHULUAN A. Latar Belakang B. Rumusan Masalah C. Tujuan BAB II PEMBAHASAN A. Sejarah dan Pengertian HTML5 1. Sejarah a. Proses standardisasi w3c b. Markup c. Api baru d. First Public Working Draft e. Last Call f. Calon Rekomendasi 2. Pengertian B. Arsitektur HTML5 C. Tag HTML5 D. Fitur HTML5 1. Penambahan input type & Validasi Form 2. Native Audio dan Video 3. Canvas 4. Offline Support 5. Drag & Drop 6. Mengakses Hardware E. Kelebihan dan Kekurangan HTML5 1. Kelebihan 2. Kekurangan BAB III PENUTUP Daftar Pustaka
- 4. BAB 1 PENDAHULUAN A. Latar Belakang Sesudah berakhirnya masa pengembangan HTML4 pada tahun 1998, dilanjutkan perkembangan HTML4 untuk XML yang dikenal dengan XHTML 1.0. XHTML 1.0 selesai dikembangkan pada tahun 2000. Saat itu sebenarnya HTML akan mulai dikembangkan, akan tetapi masih menunggu proses pengembangan XHTML 2.0 yang mana selesai pada tahun 2003. Tahun 2004 kembali diadakan workshop mengenai evolusi untuk HTML5 dan waktu itulah muncul ide-ide dan gagasan mengenai Semantic Web. Tahun 2007, W3C ikut serta dalam pengembangan HTML5 dan terbentuklah suatu komunitas WHATWG (Web Hypertext Application Technology Working Group). Perusahaan besar seperti Mozilla, Opera dan Apple mengakui HTML5 dipublikasikan oleh W3C dengan lisensi komunitas WHATWG. HTML5 sudah dipublikasikan secara resmi oleh W3C pada bulan Mei 2011 dan rencananya akan terus dikembangkan hingga tahun 2014 nanti. Walaupun HTML5 masih terus dikembangkan, jangan khawatir untuk menggunakan HTML5 karena saat ini HTML5 hanya membutuhkan penyempurnaan saja, sudah tidak lagi berada di masa percobaan yang dapat berstatus produksi gagal. Selama ini browser desktop maupun browser mobile telah mampu mengimplementasikan HTML5, walaupun belum sepenuhnya sempurna. Browser yang saat ini paling maju untuk fitur HTML5 atau semantic web adalah Google Chrome. HTMl5 merupakan salah satu bahasa pemrograman yang digemari oleh para pembuat website, karena dengan menggunakan HTML5 website akan menajadi lebih menarik dan lebih bagus. Oleh karena itu saya akan berusaha mengupas sebisa mungkin tentang HTML5 melalui makalah ini. B. Rumusan Masalah 1. Bagaimana sejarah perkembangan HTML5 ?
- 5. 2. Apa pengertian dari HTML5 ? 3. Apa saja fitur yang ada di HTML5 ? 4. Bagaimana tampilan tag HTML5 ? 5. Apa kelebihan dan kelemahan HTML5 ? C. Tujuan 1. Mengetahui sejarah perkembangan HTML5 2. Memahami apa itu HTML5 3. Mengetahui fitur-fitur yang ada di HTML5 4. Menguasai tag HTML5 5. Mengetahui kelebihan dan kelemahan BAB II PEMBAHASAN A. Sejarah dan Pengertian HTML5 1. Sejarah HTML5 Kelompok Kerja Teknologi Aplikasi Web Hyperteks (Web Hypertext Application Technology Working Group, WHATWG) mulai menjalankan standar baru ini pada tahun 2004 ketika Konsortium W3C sedang fokus dalam pengembangan XHTML 2.0 di masa depan, sementara HTML 4.01 belum pernah diperbarui sejak tahun 2000. Sejak tahun 2009, W3C dan WHATWG bekerja sama dalam pengembangan HTML5 setelah W3C mengakhiri Kelompok Kerja Pengembangan XHTML 2.0. Meskipun HTML5 sudah dikenal luas oleh para pengembang web sejak lama, HTML5 baru muncul sebagai primadona pada April 2010 setelah CEO Apple Inc., Steve Jobs, mengungkapkan bahwa dengan pengembangan HTML5, "Adobe Flash sudah tidak dibutuhkan lagi sebagai media untuk menyaksikan video atau menyaksikan konten apapun di web." HTML5 yang merupakan standar baru dari HTML pasti mempunyai sejarah sebelum terbentuknya HTML5 tersebut. Dimulai dari The Web Hypertext Application Technology Working
- 6. Group (WHATWG), mulai bekerja pada standar baru pada tahun 2004. Pada waktu itu, HTML 4.01 belum diperbarui sejak tahun 2000, dan World Wide Web Consortium (W3C) telah memfokuskan dalam perkembangan masa depan XHTML 2.0. Pada tahun 2009, W3C memperbolehkan XHTML 2.0 dengan hak istimewa Working Group untuk berakhir dan memutuskan untuk tidak memperbaharui itu. W3C dan WHATWG sekarang ini bekerja sama dalam pengembangan HTML5. Sementara HTML5 sering dibandingkan dengan Flash, tetapi kedua teknologi tersebut sangat berbeda. Keduanya termasuk fitur guna memutar audio dan video pada halaman web, dan guna menggunakan Scalable Vector Graphics. HTML5 sendiri tidak bisa digunakan untuk animasi dan interaktivitas, tapi itu harus dilengkapi dengan CSS3 atau JavaScript. Ada kemampuan Flash banyak yang tidak memiliki mitra langsung dalam HTML5. Walaupun HTML5 sudah terkenal di kalangan pengembang web selama bertahun-tahun, itu menjadi topik media yang mainstream sekitar April 2010 sesudah Apple Inc kemudian CEO Steve Jobs menerbitkan surat terbuka berjudul "Pemikiran tentang flash" di mana ia mengungkapkan bahwa "Adobe Flash tidak lagi diperlukan untuk menonton video atau mengkonsumsi segala jenis konten web" dan bahwa "standar terbuka baru yang diciptakan di era mobile seperti HTML5, akan menang". Ini memicu perdebatan di kalangan pengembangan web dimana beberapa menyarankan bahwa sementara HTML5 menyediakan fungsi yang disempurnakan, pengembang harus mempertimbangkan mendukung browser berbagai bagian yang berbeda dari standar serta perbedaan fungsi lainnya antara HTML5 dan Flash. Pada awal November 2011, Adobe mengumumkan bahwa mereka akan menghentikan pengembangan flash sebagai perangkat mobile dan reorientasi upaya dalam mengembangkan alat memanfaatkan HTML5.
- 7. Tahun 2004 kembali diadakan workshop mengenai evolusi untuk HTML5 dan waktu itulah muncul ide-ide dan gagasan mengenai Semantic Web. Tahun 2007, W3C ikut serta dalam pengembangan HTML5 dan terbentuklah suatu komunitas WHATWG (Web Hypertext Application Technology Working Group). Perusahaan besar seperti Mozilla, Opera dan Apple mengakui HTML5 dipublikasikan oleh W3C dengan lisensi komunitas WHATWG. HTML5 sudah dipublikasikan secara resmi oleh W3C pada bulan Mei 2011 dan rencananya akan terus dikembangkan hingga tahun 2014 nanti. Walaupun HTML5 masih terus dikembangkan, jangan khawatir untuk menggunakan HTML5 karena saat ini HTML5 hanya membutuhkan penyempurnaan saja, sudah tidak lagi berada di masa percobaan yang dapat berstatus produksi gagal. Selama ini browser desktop maupun browser mobile telah mampu mengimplementasikan HTML5, walaupun belum sepenuhnya sempurna. Browser yang saat ini paling maju untuk fitur HTML5 atau semantic web adalah Google Chrome. HTMl5 merupakan salah satu bahasa pemrograman yang digemari oleh para pembuat website, karena dengan menggunakan HTML5 website akan menajadi lebih menarik dan lebih bagus. Elemen-elemen yang ditambahkan dalam HTML5 sebagai berikut: a. Proses standardisasi w3c Kelompok kerja untuk teknologi aplikasi web hypertext (WHATWG) mulai menspesifikasikan HTML5 pada bulan juni 2004 dengan nama Web Applications 1.0. sampai pada bulan maret 2010 spesifikasi ini masuk ke bagian draft standar di WHATWG, dan ke dalam bagian pengurusan draft di W3C. Ian Hickson mewakili Google ,Inc menjadi editor HTML5. Pada tahun 2007 Spesifikasi HTML5 diadopsi sebagai pekerjaan permulaan buat grup baru yang mengurus HTML di
- 8. World Wide Web Consorsium (W3C). Grup ini pertama kali mempublikasikan hasil draft pekerjaan pertama mereka pada tanggal 22 januari 2008. Spesifikasi ini berstatus pada tahap pengerjaan, dan diperkirakan akan tetap demikian selama bertahun-tahun, walaupun sebagian dari HTML5 telah pada tahap penyelesaian dan diimplementasikan pada penjelajah web sebelum keseluruhan spesifikasinya mencapai status rekomendasi final. Berdasarkan pada jadwal kerja W3C, HTML5 diperkirakan menjadi kandidat rekomendasi pada akhir tahun 2010. Namun, publikasi pertama draft HTML 5 meleset selama 8 bulan. Permintaan dokumen terakhir dan tahap kandidat rekomendasi diharapkan dapat dicapai pada tahun 2008, tetapi hingga bulan Juli 2010 HTML 5 masih dalam tahapan draft pengerjaan di W3C. WHATWG telah meminta penyelesaian terakhir untuk HTML5 sejak bulan oktober tahun 2009. Editor HTML5, Ian Hickson, berharap spesifikasi HTML5 bisa mencapai tahap kandidat rekomendasi pada tahun 2012. Kriteria di W3C agar sebuah spesifikasi bisa berstatus “Direkomendasikan” adalah "yang kedua: 100% selesai dan penerapannya bisa dilakukan pada dua atau lebih sistem yang berbeda". Pada wawancaranya dengan TechRepublic, Hickson memperkirakan hal ini baru akan terjadi pada tahun 2022 atau sesudahnyanya. Walau demikian, mayoritas bagian dari spesifikasi sudah stabil dan sudah bisa diterapkan dalam produk. b. Markup Dalam HTML 5 diperkenalkan beberapa elemen baru dan atribut yang merefleksikan tipikal penggunaan website modern. Beberapa diantaranya adalah pergantian yang bersifat semantik pada blok yang umum digunakan: yaitu elemen (<div>) dan inline (<span>), sebagai misalnya (<span>) (sebagai blok navigasi website) dan <footer> (biasanya
- 9. dikaitkan pada bagian bawah suatu website atau baris terakhir dari kode html). Mayoritas elemen lain yang memberikan kegunaan baru melalui antar muka yang sudah distandarkan, seperti elemen multimedia <audio> dan <video>. Beberapa elemen yang sudah ditinggalkan juga dihilangkan, termasuk elemen presentasi semata seperti <font> dan <center>, yang sebenarnya bisa dikerjakan menggunakan Cascading Style Sheet (CSS). c. Api baru Sebagai penambah keluwesan pemformatan, dalam HTML5 sudah dispesifikasikan pengkodean application programming interfaces (APIs). Antarmuka document object model (DOM) yang ada dikembangkan dan fitur de facto didokumentasikan. Beberapa API terbaru pada HTML5 antara lain : 2D Drawing API, merupakan API yang bisa digunakan sebagai pemanipulasi image 2D yang terintegrasi dengan elemen canvas. Audio and Video API, merupakan API yang bisa digunakan sebagai pemutar dan memainkan media Video dan Audio. API ini telah terintegrasi dengan elemen audio dan video dari HTML 5. API yang memungkinkan sebagai pembuat offline web application. API yang memungkinkan web application bisa meregister sendiri untuk beberapa tipe protokol dan media. Editing API di kombinasikan dengan atribut content editable global yang baru. Drag and Drop API di kombinasikan dengan atribut drag-able.
- 10. API yang bisa mengekspos histori dari browser sebagai penambah halaman web yang sedang di akses sehingga dapat menambahkan tombol Back di halaman web. Cross-document messaging. Prinsip dari API yang disediakan dari HTML 5 ini adalah agar developer lebih mudah pada pembuatan sebuah aplikasi web dengan ini user dan developer atau programmer karena bisa menciptakan aplikasi web yang penuh fitur dalam offline environment. Tidak seluruh teknologi di atas dimasukkan dalam spesifikasi HTML5 W3C, meski teknologi tersebut sudah termaktub dalam spesifikasi milik WHATWG HTML. Beberapa teknologi yang juga terkait namun tidak dijadikan bagian pada spesifikasi HTML5 W3C dan WHATWG HTML5 adalah : Geolocation Web SQL Database, media penyimpanan database lokal. API Database terindeks, mode penyimpanan hierarkis key-value (WebSimpleDB). Web Speech API. d. First Public Working Draft WHATWG mengeluarkan Pertama Kerja Draft Publik spesifikasi pada 22 Januari 2008. Bagian dari HTML5 telah dilaksanakan di browser walaupun semua spesifikasi belum mencapai status Rekomendasi akhir. e. Last Call Pada tanggal 14 Februari 2011, W3C. Pada Mei 2011 , kelompok kerja canggih HTML5 untuk "Last Call", undangan kepada masyarakat dalam dan di luar W3C untuk mengkonfirmasi kesehatan teknis dari spesifikasi. W3C sedang mengembangkan tes lengkap, sebagai pencapaian interoperabilitas luas untuk spesifikasi lengkap pada tahun 2014, yang sekarang tanggal target Rekomendasi. Pada bulan
- 11. Januari 2011, WHATWG berganti nama nya "HTML5" standar hidup untuk "HTML". W3C tetap melanjutkan proyek guna melepaskan HTML5. f. Calon Rekomendasi Pada bulan Juli 2012, WHATWG dan W3C memutuskan dalam tingkat pemisahan. W3C akan melanjutkan HTML5 spesifikasi pekerjaan, berfokus dalam standar definitif tunggal, yang dianggap sebagai "snapshot" oleh WHATWG. Organisasi WHATWG akan melanjutkan pekerjaannya dengan HTML5 sebagai "Standar Hidup". Konsep standar hidup merupakan bahwa hal itu tidak pernah lengkap dan selalu diperbarui dan ditingkatkan. Fitur baru bisa ditambahkan akan tetapi fungsi tidak akan dihapus. Pada bulan Desember 2012, W3C HTML5 ditunjuk sebagai Calon Rekomendasi. Kriteria untuk kemajuan ke Rekomendasi W3C "100 % selesai dan sepenuhnya interoperable implementasi" 2. Pengertian HTML5 HTML5 adalah sebuah bahasa markah untuk menstrukturkan dan menampilkan isi dari Waring Wera Wanua, sebuah teknologi inti dari Internet. HTML5 adalah revisi kelima dari
- 12. HTML (yang pertama kali diciptakan pada tahun 1990 dan versi keempatnya, HTML4, pada tahun 1997) dan sampai bulan Juni 2011 masih dalam pengembangan. Tujuan utama pengembangan HTML5 adalah sebagai perbaikan teknologi HTML agar mendukung teknologi multimedia terbaru, mudah dibaca oleh manusia dan juga mudah dimengerti oleh mesin. HTML5 merupakan salah satu karya Konsortium Waring Wera Wanua (World Wide Web Consortium, W3C) guna mendefinisikan sebuah bahasa markah tunggal yang bisa ditulis dengan cara HTML ataupun XHTML. HTML5 merupakan jawaban atas pengembangan HTML 4.01 dan XHTML 1.1 yang selama ini berjalan terpisah, dan diimplementasikan secara berbeda-beda oleh banyak perangkat lunak pembuat web. HTML5 adalah versi terbaru dari HTML (HyperText Markup Language) yang mana dikembangkan oleh W3C atau Word Wide Web Consortium. Lalu apakah yang dimaksud dengan Semantic Web? Semantic berasal dari bahasa Yunani (Greek), merupakan bahasa pembelajaran semiotic, yakni pembelajaran guna memahami penanda. Semantic sendiri mempunyai arti bahasa yang berfokus pada penanda guna mengetahui arti yang terkandung di dalamnya. Jadi, yang dimaksud semantic web adalah bahasa pemrograman yang mempunyai penanda khusus dalam implementasinya dengan tujuan agar mampu mendeskripsikan apa yang terkandung pada website tersebut. Web semantic ini bukan hanya dikembangkan di Web 2.0, namun sudah ke Web 3.0 bahkan akan berkembang ke Web 4.0. Perkembangan teknologi benarbenar cepat sekali berubah. HTML5 Semantic adalah beberapa tag baru yang diperkenalkan pada HTML5 sebagai pendukung struktur halaman yang lebih rapi. Beberapa elemen baru digunakan untuk mengurangi pemakaian tag <div>.
- 13. Elemen-elemen baru yang ditambahkan pada HTML5 adalah: Tag Keterangan <article> Menspesifikasikan konten yang bersifat independen, seperti artikel, blog post, forum post, dan sejenisnya. <aside> Digunakan untuk sebuah subkonten. Biasanya digunakan di dalam tag <article>. <bdi> Untuk teks yang tidak boleh terikat pada arah teks-elemen induknya <command> Sebuah button, atau radiobutton, atau checkbox. <details> Untuk menjelaskan detail tentang sebuah dokumen atau sebagian dari dokumen. <summary> Digunakan pada sebuah ringkasan dan sejenisnya di dalam tag <details> <figure> Untuk mengelompokkan sekumpulan section, biasanya berupa video. <figcaption> Berisi caption/keterangan yang ditempatkan di dalam tag <figure> <footer> Digunakan sebagai footer dari sebuah halaman
- 14. <header> Digunakan sebagai header dari sebuah halaman <hgroup> Digunakan untuk sekumpulan heading <mark> Digunakan pada teks yang akan di highlight <meter> Digunakan untuk pengukuran, dimana nilai maksimal dan minimal telah ditentukan <nav> Digunakan untuk sekumpulan navigasi <progress> Membuat Progress bar <ruby> Digunakan untuk anotasi ruby <rt> Untuk menjelaskan anotasi ruby <rp> Menunjukkan elemen jika browser tidak mendukung ruby <section> Untuk sebuah section di dalam halaman. Seperti Bab, Footer, dan sebagainya <time> Untuk mendefinisikan waktu dan tanggal <wbr> Word Break. Untuk memisah suatu kata bila diperlukan. Sumber lain mengatakan bahwa Html5 adalah bahasa markup sebagai penataan dan penyajian konten untuk World Wide Web dan teknologi inti dari Internet. Ini adalah revisi kelima dari standar HTML (dibuat pada tahun 1990 dan standar sebagai HTML
- 15. 4 per 1997) dan, pada Desember 2012, adalah Rekomendasi Calon W3C. Tujuan utamanya telah meningkatkan bahasa dengan dukungan untuk multimedia terbaru sambil menjaga mudah dibaca oleh manusia dan secara konsisten dipahami oleh komputer dan perangkat (web browser, parser, dll). HTML5 dimaksudkan guna menggolongkan tidak hanya HTML 4, tetapi XHTML 1 dan DOM Level 2 HTML. Sesudah pendahulu terdekatnya HTML 4.01 dan XHTML 1.1, HTML5 adalah respon terhadap pengamatan bahwa HTML dan XHTML umum digunakan dalam World Wide Web adalah campuran dari fitur diperkenalkan oleh berbagai spesifikasi, bersama dengan orang-orang yang diperkenalkan oleh produk perangkat lunak seperti web browser, yang didirikan oleh praktek umum, dan kesalahan sintaks banyak dokumen web yang ada. Ini juga merupakan upaya guna mendefinisikan bahasa markup tunggal yang bisa ditulis baik dalam HTML atau sintaks XHTML. Ini termasuk model pengolahan rinci sebagai pendorong implementasi yang lebih interoperable, melainkan meluas, meningkatkan dan rationalises markup tersedia untuk dokumen, dan memperkenalkan markup dan antarmuka pemrograman aplikasi (API) untuk aplikasi web yang rumit. Untuk alasan yang sama, HTML5 juga. potensial kandidat untuk cross-platform aplikasi mobile. Banyak fitur dari HTML5 telah dibangun dengan pertimbangan untuk bisa dijalankan dalam perangkat bertenaga rendah seperti smartphone dan tablet. Pada Desember 2011, perusahaan riset Strategy Analytics memperkirakan penjualan ponsel HTML5 kompatibel akan atas 1 miliar pada tahun 2013. Secara khusus, HTML5 menambahkan banyak fitur baru sintaksis. Ini termasuk <video> baru, <audio> dan elemen <canvas>, serta integrasi scalable vector grafis konten (SVG) (yang menggantikan penggunaan tag generik <object>) dan MathML untuk rumus matematika. Fitur-fitur ini dirancang guna
- 16. memudahkan untuk memasukkan dan menangani konten multimedia dan grafis di web tanpa harus resor untuk plugin proprietary dan API. Elemen baru lainnya, seperti <section>, <article>, <header> dan <nav>, dirancang guna memperkaya isi semantik dokumen. Atribut baru telah diperkenalkan untuk tujuan yang sama, sementara beberapa elemen dan atribut telah dihapus. Beberapa elemen, seperti <a>, <cite> dan <menu> telah diubah, atau didefinisikan ulang standar. API dan Document Object Model (DOM) tidak afterthoughts lagi, namun bagian fundamental dari spesifikasi HTML5. HTML5 juga mendefinisikan secara rinci proses yang diperlukan untuk dokumen yang tidak valid sehingga kesalahan sintaks akan diperlakukan secara seragam oleh seluruh browser conforming dan agen pengguna lainnya. Tujuan dibuatnya HTML5 antara lain: a. Fitur baru harus didasarkan pada HTML, CSS, DOM , dan JavaScript. b. Mengurangi kebutuhan untuk plugin eksternal (seperti Flash). c. Penanganan kesalahan yang lebih baik. d. Lebih banyak markup untuk menggantikan scripting. e. HTML5 merupakan perangkat mandiri Vokabular HTML dari jaman sebalumnya (HTML+, HTML 2.0, HTML 3.2) umumnya ditulis menggunakan aturan sintak SGML. Dalam HTML 4 telah diterapkan dua sintak yaitu: SGML (disebut sebagai HTML 4.01) dan XML (disebut XHTML 1.0) Halaman Web yang Biasa ditulis Dengan HTML 4: <html> <head> <title>Hobo Web LTD Scotland</title> </head> <body> <div id="page"> <div id="header"> <h1><a href="/blog/">Hobo Web</a></h1> </div>
- 17. <div id="container"> <div id="center" class="column"> <div class="post" id="post-102"> <h2><a href="/test-page/"> Test Page 1</a></h2> <div class="entry"> <p>Article Text here</p> </div> </div> <div class="post" id="post-101"> <h2><a href="/test2/"> Test 2</a></h2> <div class="entry"> <p>Article 2 Text here</p> </div> </div> </div> <div class="navigation"> <div class="alignleft"> <a href="/blog/page/2/">« Previous Entries</a> </div> <div class="alignright"></div> </div> </div> <div id="right" class="column"> <ul id="sidebar"> <li><h2>Hobo Stuff</h2> <ul> <li><a href="/blog/comment-policy/">Comment Policy</a></li> <li><a href="/blog/todo-list/">Todo List</a></li> </ul></li> <li><h2>Archives</h2> <ul> <li><a href='/blog/2008/04/'>April 2008</a></li>
- 18. <li><a href='/blog/2008/03/'>March 2008</a></li> <li><a href='/blog/2008/02/'>February 2008</a></li> <li><a href='/blog/2008/01/'>January 2008</a></li> </ul> </li> </ul> </div> <div id="footer"><p>Copyright 2008 Hobo Web LTD</p> </div> </div> </body> </html> Contoh Halaman Web yang Ditulis dengan HTML5: <html> <head> <title>Hobo Web LTD Scotland</title> </head> <body> <header> <h1><a href="http://blog/">Hobo Web</a></h1> </header> <section> <article> <h2><a href="/test-page/"> Test Page 1</a></h2> here</p> </article> <article> <h2><a href="/test2/"> Test 2</a></h2> <p>Article Text 2 here</p> </article> <nav> <p>Article Text
- 19. <a href="/blog/page/2/">« Previous Entries</a> </nav> </section> <nav> <ul> <li><h2>Hobo Stuff</h2> <ul> <li><a href="/blog/comment-policy/">Comment Policy</a></li> <li><a href="/blog/todo-list/">Todo List</a></li> </ul></li> <li><h2>Archives</h2> <ul> <li><a href='/blog/2008/04/'>April 2008</a></li> <li><a href='/blog/2008/03/'>March 2008</a></li> <li><a href='/blog/2008/02/'>February 2008</a></li> <li><a href='/blog/2008/01/'>January 2008</a></li> </ul> </li> </ul> </nav> <footer> <p>Copyright 2008 Hobo Web LTD</p> </footer> </body> </html> HTML 5 mendefinisikan kelima revisi besar bahasa inti dari World Wide Web – HTML dari W3C (World Wide Web Consortium). Juga disebut Aplikasi Web 1.0 – masih ada tidak ada ruang nama
- 20. atau skema. Unsur tidak harus ditutup. Browser akan mengampuni kesalahan. Sebuah p masih p, dan meja masih meja. HTML 5 menambahkan unsur-unsur baru untuk secara khusus mengidentifikasi masing-masing konstruksi umum: a. Section: Sebuah bagian atau bab dalam sebuah buku, sebuah bagian dalam sebuah bab, atau pada dasarnya apa pun yang memiliki pos sendiri dalam HTML 4 b. Header: header Halaman yang ditampilkan pada halaman , tidak sama dengan unsur kepala c. Footer: Halaman footer di mana baik cetak pergi; tanda tangan dalam sebuah pesan e-mail d. Nav: Koleksi link ke halaman lain e. Article: Sebuah entri independen dalam sebuah blog, majalah, ringkasan, dan sebagainya B. Arsitektur HTML5 Arsitektur dasar dari HTML5 sebenarnya sama dengan versi HTML sebelumnya, karena HTML5 merupakan hasil upgrade dari HTML sebelumnya, dan tidak ada perubahan arsitektur dari HTML versi sebelumya. HTML5 dibuat untuk mengatasi masalah yang di alami oleh HTML versi sebelumnya yakni masalah ketergantungan terhadap plug-in yang dapat membuat kinerja dari CPU menjadi lambat. HTML5 merupakan sebuah Bahasa standar pemrograman pembuatan website, yang nanti akan dibaca oleh web browser. HTML5 memberikan dukungan standar untuk beberapa fitur yang sebelumnya tidak mungkin bisa digunakan tanpa adanya plug-in, misalnya ada beberapa API untuk drawing, dan soket, sedangkan tidak semua browser mendukung plug-in. Plug-in biasa di blok dan di-disable oleh komputer, serta bisa menjadi sasaran hacking. Spesifikasi HTML5 tidak hanya memberikan perintah apa yang seharusnya browser lakukan ketika mereka melakukan proses, tetapi
- 21. juga memberikan fasilitas kepada browser untuk dapat langsung menjalankan atau mengeksekusi perintah. Dengan adanya HTML5 pembuat web browser dapat lebih menghemat waktu dalam menghadapi kesalahan sintaks. C. Tag HTML5 Nama Tag Keterangan / Kegunaan Basic <!DOCTYPE> Tag untuk menentukan tipe dokumen <html> Tag untuk membuat sebuah dokumen HTML <title> Tag untuk membuat judul dari sebuah halaman <body> Tag untuk membuat tubuh dari sebuah halaman <h1> to <h6> Tag untuk membuat heading <p> Tag untuk membuat paragraf <br> Memasukan satu baris putus <hr> Tag untuk membuat perubahan dasar kata didalam isi <!--...--> Tag untuk membuat komentar Formatting <acronym> Tag untuk membuat sebuah akronim (tidak disupport lagi di HTML5) <abbr> Tag untuk membuat sebuah singkatan <address> Tag untuk membuat kontak alamat <b> Tag untuk membuat huruf bercetak tebal <bdi> Mengisolasi bagian dari teks yang dapat diformat dalam arah yang berbeda dari teks lain di luarnya (tag baru HTML5) <bdo> Mengganti arah teks
- 22. <big> Tag untuk membuat text berhuruf besar (tidak disupport lagi di HTML5) <blockquote> Tag untuk membuat sebuah bagian text yang dikutip dari sumber lain <center> Tag untuk membuat jajaran teks menjadi ditengah (tidak disupport lagi di HTML5) <cite> Tag untuk membuat judul karya <code> Tag untuk membuat potongan kode komputer di antara text <del> Tag untuk membuat teks yang telah dihapus dari dokumen <dfn> Tag untuk membuat sebuah istilah definisi <em> Tag untuk membuat penekanan teks (tidak disupport lagi di HTML5) <font> Tag untuk membuat font, warna, dan ukuran untuk teks(tidak disupport lagi di HTML5) <i> Tag untuk membuat sebuah bagian dari teks yang disesuaikan dengan mood <ins> Tag untuk membuat teks yang telah dimasukkan ke dalam dokumen <kbd> Tag untuk membuat input keyboard <mark> Tag untuk membuat teks yang disorot / ditandai (tag baru HTML5) <meter> Tag untuk membuat pengukuran skalar <pre> Tag untuk membuat teks terformat <progress> Memperlihatkan kemajuan tugas (tag baru HTML5) <q> Tag untuk membuat kutipan pendek <rp> Tag untuk membuat apa yang harus ditampilkan di browser yang tidak mendukung penjelasan ruby (tag baru HTML5) <rt> Tag untuk membuat sebuah anotasi / pengucapan karakter (untuk
- 23. tipografi Asia Timur) <ruby> Tag untuk membuat sebuah anotasi ruby (untuk tipografi Asia Timur) (tag baru HTML5) <s> Tag untuk membuat teks yang tidak lagi benar <samp> Tag untuk membuat contoh keluaran dari program komputer <small> Tag untuk membuat teks kecil <strike> Tag untuk membuat teks yang di coret tengah (tidak disupport lagi di HTML5) <strong> Tag untuk membuat teks penting <sub> Tag untuk membuat teks subskrip (seperti dalam penulisan Jat Kimia) <sup> Tag untuk membuat teks superscripted (seperti dalam penulisan akar kuadrat) <time> Tag untuk membuat tanggal / waktu (tag baru HTML5) <tt> Tag untuk membuat teks teletype (tidak disupport lagi di HTML5) <u> Tag untuk membuat teks yang memiliki Gaya yang berbeda dari teks biasa lainnya <var> Tag untuk membuat sebuah variabel <wbr> Tag untuk membuat kemungkinan garis-putus Forms <form> Tag untuk membuat sebuah form HTML untuk input pengguna <input> Tag untuk membuat sebuah kontrol input
- 24. <textarea> Tag untuk membuat sebuah kontrol input multibaris (text area) <button> Tag untuk membuat sebuah tombol yang dapat diklik <select> Tag untuk membuat sebuah daftar drop-down <optgroup> Tag untuk membuat sebuah kelompok pilihan yang terkait dalam daftar drop-down <option> Tag untuk membuat pilihan dalam daftar drop-down <label> Tag untuk membuat sebuah label untuk sebuah elemen <input> <fieldset> Grup unsur terkait dalam bentuk <legend> Tag untuk membuat sebuah caption untuk sebuah elemen <fieldset>, < figure>, atau <details> <datalist> Menentukan daftar pilihan yang telah ditetapkan untuk kontrol input (tag baru HTML5) <keygen> Tag untuk membuat key-pair generator kolom input (tag baru HTML5) <output> Tag untuk membuat hasil penghitungan (tag baru HTML5) Frames <frame> Tag untuk membuat sebuah window (bingkai) dalam sebuah frameset (tidak disupport lagi di HTML5) <frameset> Tag untuk membuat satu set bingkai (tidak disupport lagi di HTML5) <noframes> Tag untuk membuat sebuah konten alternatif untuk pengguna yang tidak mendukung frame (tidak disupport lagi di HTML5) <iframe> Tag untuk membuat sebuah bingkai Images <img> Tag untuk membuat gambar <map> Tag untuk membuat gambar-peta
- 25. <area> Tag untuk membuat area dalam gambar-peta <canvas> Digunakan untuk menggambar grafik, melalui scripting (JavaScript ) (tag baru HTML5) <figcaption> Tag untuk membuat sebuah caption untuk elemen <figure> (tag baru HTML5) <figure> Menentukan konten mandiri (tag baru HTML5) Audio/Video <audio> Tag untuk membuat isi suara (tag baru HTML5) <source> Tag untuk membuat sumber beberapa media untuk elemen media (<video> dan <audio>) (tag baru HTML5) <track> Tag untuk membuat trek teks untuk elemen media (<video> dan <audio>) (tag baru HTML5) <video> Tag untuk membuat sebuah video atau film (tag baru HTML5) Links <a> Tag untuk membuat hyperlink <link> Tag untuk membuat hubungan antara dokumen dan sumber daya eksternal (paling sering digunakan untuk link ke style sheet) <nav> Tag untuk membuat navigasi link (tag baru HTML5) Lists <ul> Tag untuk membuat daftar dengan selain nomor <ol> Tag untuk membuat daftar dengan nomor <li> Tag untuk membuat sebuah item daftar <dir> Tag untuk membuat sebuah daftar direktori (tidak disupport lagi di HTML5) <dl> Tag untuk membuat sebuah daftar definisi <dt> Tag untuk membuat istilah (item) dalam daftar definisi
- 26. <dd> Defines a description of an item in a definition list <menu> Tag untuk membuat deskripsi dari item dalam daftar definisi <command> Tag untuk membuat sebuah tombol perintah bahwa seorang pengguna dapat meminta (tag baru HTML5) Tables <table> Tag untuk membuat tabel <caption> Tag untuk membuat sebuah caption tabel <th> Tag untuk membuat sebuah sel header tabel <tr> Tag untuk membuat baris dalam sebuah tabel <td> Tag untuk membuat sel dalam sebuah tabel <thead> Mengelompokan isi header dalam sebuah tabel <tbody> Mengelompokanisi tubuh dalam sebuah tabel <tfoot> Mengelompokan isi footer dalam sebuah tabel <col> Menentukan properti kolom untuk setiap kolom dalam elemen <colgroup> <colgroup> Menentukan kelompok dari satu atau lebih kolom dalam sebuah tabel untuk diformat Style/Sections <style> Tag untuk membuat informasi style untuk dokumen <div> Tag untuk membuat sebuah bagian dalam dokumen <span> Tag untuk membuat sebuah bagian dalam dokumen <header> Tag untuk membuat sebuah header untuk dokumen atau bagian (tag baru HTML5) <footer> Tag untuk membuat footer untuk dokumen atau bagian(tag baru
- 27. HTML5) <hgroup> Pengelompokan elemen heading (<h1> sampai <h6>)(tag baru HTML5) <section> Tag untuk membuat bagian dalam dokumen (tag baru HTML5) <article> Tag untuk membuat sebuah artikel (tag baru HTML5) <aside> Tag untuk membuat konten lain selain dari konten halaman (tag baru HTML5) <details> Tag untuk membuat rincian tambahan yang pengguna dapat lihat atau sembunyikan (tag baru HTML5) <dialog> Tag untuk membuat sebuah kotak dialog atau jendela(tag baru HTML5) <summary> Tag untuk membuat sebuah judul terlihat untuk elemen <detil> (tag baru HTML5) Meta Info <head> Tag untuk membuat informasi tentang dokumen <meta> Tag untuk membuat metadata tentang dokumen HTML <base> Menentukan URL dasar / target untuk semua URL relatif dalam dokumen <basefont> Menentukan standar warna, ukuran, dan font untuk semua teks dalam dokumen (tidak disupport lagi di HTML5) Programming <script> Tag untuk membuat script di sisi klien <noscript> Tag untuk membuat sebuah konten alternatif bagi pengguna yang tidak mendukung script di sisi klien <applet> Tag untuk membuat sebuah java applet yang ditanam(tidak disupport lagi di HTML5) <embed> Tag untuk membuat sebuah wadah untuk aplikasi eksternal (non-
- 28. HTML) (tag baru HTML5) <object> Tag untuk membuat sebuah objek yang ditanam <param> Tag untuk membuat sebuah parameter untuk objek Contoh penggunaan Tag HTML5: 1 <!DOCTYPE HTML> 2 <html> 3 <head> <meta http-equiv="Content-Type" content="text/html; 4 charset=UTF-8" /> 5 <title>Your Website</title> 6 </head> 7 <body> 8 <header> 9 <nav> 10 <ul> 11 <li>Your menu</li> 12 </ul> 13 </nav> 14 </header> 15 16 <section> 17 <article> 18 <header> 19 <h2>Article title</h2> <p>Posted on <time datetime="2009-0920 04T16:31:24+02:00">September 4th 2009</time> by <a href="#">Writer</a> - <a href="#comments">6 comments</a></p> 21 </header> <p>Pellentesque habitant morbi tristique senectus et 22 netus et malesuada fames ac turpis egestas.</p> 23 </article> 24 25 <article> 26 <header> 27 <h2>Article title</h2> <p>Posted on <time datetime="2009-0928 04T16:31:24+02:00">September 4th 2009</time> by <a href="#">Writer</a> - <a href="#comments">6 comments</a></p> 29 </header> <p>Pellentesque habitant morbi tristique senectus et 30 netus et malesuada fames ac turpis egestas.</p> 31 </article> 32
- 29. 33 34 35 36 </section> <aside> <h2>About section</h2> <p>Donec eu libero sit amet quam egestas semper. Aenean 37 ultricies mi vitae est. Mauris placerat eleifend leo.</p> 38 </aside> 39 40 <footer> 41 <p>Copyright 2009 Your name</p> 42 </footer> 43 </body> 44 </html> D. Fitur HTML5 1. Penambahan input type & Validasi Form Sebelum HTML5, sangat susah memvalidasi Form. Misalkan sebuah input tidak boleh kosong, input harus angka dan input yang valid diantara 1 sampai 100. Untuk membuat validasi tersebut kita menggunakan javascript atau PHP di server yangmana masing masing programmer dan framework mempunyai caranya sendiri sendiri. Dengan adanya HTML5 maka validasi sudah langsung ditangani oleh HTMl5. Masih di Form, form tidak terbatas pada type text, password, file dan Hidden, HTML5 menambahkan input tipe telepon, url, email,number, range, color, date dan image. Dengan berbagai range input yang luas, maka form di HTML5 menjadi cikal bakal aplikasi berbasis web yang lebih populer dengan nama HTML5 App atau WebApp. 2. Native Audio dan Video Sejak era 2000-an, audio dan video di internet tidak mempunyai standar. Kebanyakan audio menggunakan plugin itunes atau realplayer sedangkan video player menggunakan Flash atau silverLight . Era plugin sudah berakhir, HTML5 menghadirkan Native audio dan Video Codec langsung didalam browser. Tidak
- 30. ada lagi namanya udpate plugin atau browser crash karena plugin error. 3. Canvas Canvas adalah fitur yang menarik. Bahasa mudahnya, dengan canvas kita bisamengambar atau menampilkan animasi langsung di browser. Lihat demonya disini. 4. Offline Support Salah satu kelemahan dari aplikasi web adalah harus selalu online. HTML5 bisa bekerja walaupun tidak ada koneksi. Silahkan coba menggunakan beberapa aplikasi di Google chrome webstore seperti Google Docs dan Aplikasi Note. Dua aplikasi web ini bisa tetap berjalan walaupun tidak tersedia koneksi internet. 5. Drag & Drop Kelebihan dari desktop adalah kemampun memindah atau mengkopi file cukup dengan “drag & drop”. Sekarang Web bisa melakukan hal yang dulu hanya bisa dilakukan di Desktop. Salah satu web yang sudah menggunakan fitur ini adalah dropbox. Untuk mencobanya, buat akun di dropbox dan silahkan di upload image dengan cara mendrag file didesktop ke Halaman Dropbox, maka secara otomatis file akan terupload. Untuk mendonload cukup drag file yang ada di web dropbox ke desktop. 6. Mengakses Hardware. Sebagian orang tidak mau membuat aplikasi web karena web tidak punya akses ke hardware. Yakin? sekarang bisa. HTML5 bisa mengakses Mic, Kamera dan Filesystem , Orientasi device (landscape atau potrait) dan Lokasi GPS langsung tanpa perlu plugin. Masih ada beberapa fitur tambahan seperti Notifikasi gaya desktop, keamanan, WebRTC, Microdata, PageVisibility, Fullscreen support, Web socket, History API, HTML editing, spellcheck WebGL dan beberapa teknologi web yang masih dikembangkan. Nah, gimana? HTML5 bukan hanya menambah syntax ke bahasa HTML,
- 31. namun menambahkan Puluhan fitur yang memungkinkan programmer web membuat aplikasi seperti desktop hanya dengan HTML dan teman temannya (CSS, JS, webAPI dll). E. Kelebihan dan Kekurangan HTML5 1. Kelebihan a. Dapat ditulis dalam sintaks HTML (dengan tipe media text/HTML) danXML. Integrasi yang lebih baik dengan aplikasi situs dan pemrosesannya b. Integrasi ('inline') dengan doctype yang lebih sederhana. c. Penulisan kode yang lebih efisien. d. Konten yang ada di situs lebih mudah terindeks oleh search engine. e. 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. f. 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. g. 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”
- 32. h. Improved Accessibility Dengan teknologi HTML5 yang memudahkan struktur pembangunan sebuah web, maka developer dapat membangun pemahaman yang lebih detil mengenaik halaman web. i. Client-side Database HTML5 menyediakan model database SQL yang baru dengan API yang dapat dibangun dalam konsep lokal, dalam hal ini di sisi client. j. Geolocation HTML5 mempunyai API yang terintegrasi terhadap geolocation, fasilitas tersebut dapat diakses melalui GPS atau fasilitas lain seperti Google Latitude pada iphone. k. Offline Aplication Cache Pengguna dapat terus melakukan interaksi dengan aplikasi meskipun mereka terputus dari jaringan internet. l. 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) m. Sharper focus on Web Application Requirments 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. 2. Kekurangan a. 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.
- 33. Namun kabarnya IE9 (Internet Explorer) akan mendukung beberapa fitur dari HTML5. b. Kekurangan utama yang dimiliki oleh HTML5 ini adalah versi ini hanya support untuk browser modern/terbaru c. Karena bahasa HTML5 ini masih dalam perkembangan, jadi beberapa elemen yang ada bisa saja berubah d. Fitur keamanan yang ditawarkan HTML5 masih terbatas BAB III PENUTUP Pada HTML terdapat dua bagian dokumen yaitu bagian kepala (head) dan bagian tubuh (body). Pembuatan proyek web/HTML sekolah dengan mempergunakan notepad ini diawali dengan pembuatan bahasa HTML pada notepad. Yang kemudian untuk setiap baris pada proyek ini selalu dibuat dengan bahasa HTML tersendiri sesuai dengan apa yang akan kita buat. Dengan dibuatnya makalah ini saya dapat menyampaikan tentang bagaimana dan apa itu HTML5. Saya harap makalah ini akan jadi sumber informasi bagi semua orang yang ingin mengetahui informasi tentang HTML5. Demikian saya akhiri makalah ini, tak lupa kritik dan saran yang membangun demi perbaikan, saya harapkan dari semua pihak.
- 34. DAFTAR PUSTAKA Riski, Wulang. (2013). Kelebihan dan Kekurangan HTML5. Diunduh dari http://snareproject.blogspot.com/2013/10/kelebihan-dankekurangan-html5.html pada tanggal 17 Oktober 2013. Sagita, Stephani. (2013). Kelebihan dan Kekurangan HTML5. Diunduh dari http://cute-periidola.blogspot.com/2013/10/kelebihan-dankekurangan-html-5.html pada tanggal 17 Oktober 2013. Anonim. (_____). HTML5. Diunduh dari http://id.wikipedia.org/wiki/HTML5 pada tanggal 17 Oktober 2013. Nahasan, Jaenot. (2012). Pengertian, Tujuan, Fitur Baru dan Kelebihan HTML5. Diunduh dari http://www.jeanotnahasan.com/2012/02/pengertian-tujuan-fiturbaru-dan.html pada tanggal 18 Oktober 2013. Yulianti, Wiwin., dkk. (____). HTML5. Diunduh dari https://docs.google.com/document/d/1Gc27ivw5tK1pFluCFI0gGqFh o27ESd49Tn7bKq2Nxfo/edit?pli=1 pada tanggal 18 Oktober 2013. Kurniawan, Edi. (2013). Sejarah dan Pengertian HTML5. Diunduh dari http://ti-cenatcenut.blogspot.com/2013/01/sejarah-danpengertian-html5.html pada tanggal 17 Oktober 2013.