MAKALAH HTML5
SMK NEGERI 1 SUMENEP
2015
KELOMPOK 7
Ketua Kelompok : - Chairul Anam
Anggota Kelompok : - Ach. Rudi
Pengertian,Penjelasan,Kelebihan,dan Tujuan dari HTML5
Selamat Malam para pembaca setia (kalo yang setia hehehe) malam ini saya dan admin baru saya, akan memberi tau tentang HTML5 yang anda ketahui ini adalah versi terbaru dari versi HTML sebelumnya. dan tentunya HTML ini mepunyai kelebihan di bandingkian versi sebelumnya. lansung saja ke TKP, haha :D
Pengertian HTML5
Dari penjelasan yang ada di wikipedia : 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 dalam pengembangan.
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.
Berikut tujuan dibuatnya HTML5 :
• Fitur baru harus didasarkan pada HTML, CSS, DOM, dan JavaScript • Mengurangi kebutuhan untuk plugin eksternal ( Seperti Flash ) • Penanagan kesalahan yang lebih baik
• Lebih markup untuk menggantikan scripting • HTML5 merupakan perangkat mandiri
• Proses pembangunan dapat terlihat untuk umum 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, nav, section • Bentuk kontrol form seperti kalender, tanggal, waktu, email, url, search.
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.
Perbedaan antara HTML5 dengan HTML 4 dan XHTML
Tutorial kali ini ditujukan bagi anda yang pernah menggunakan HTML 4.01 maupun XHTML 1.1 sebelumnya. Jika terdapat beberapa penjelasan yang belum dimengerti silahkan abaikan saja, karena kita akan membahasnya secara lebih mendalam dalam tutorial-tutorial HTML5 selanjutnya.
HTML5 vs (HTML 4 dan XHTML 1.1)
HTML5 adalah versi terbaru dari HTML. Versi terakhir HTML sebelum HTML5 adalah HTML 4.01. dan XHTML 1.1. Kali ini kita akan membahas apa saja fitur-fitur baru yang tersedia di dalam HTML5 serta perbedaannya dengan versi HTML sebelumnya.
Perkembangan HTML terhenti pada versi 4.01 di tahun 1999. W3C sebagai badan yang bertanggung jawab dalam standarisasi teknologi internet (termasuk HTML), kemudian beralih mengembangkan XHTML yang juga akhirnya menemui jalan buntu pada versi 2.0. Jika sebelumnya anda sudah terbiasa menggunakan HTML 4.01 ataupun XHTML 1.1, terdapat perubahan kecil pada HTML5.
Pada dasarnya HTML5 adalah gabungan ‘best practice‘ dari HTML 4.01 dan XHTML. Hampir semua tag atau elemen pada HTML 4.01 maupun XHTML 1.1 dapat digunakan dalam HTML5.
Beberapa perbedaan yang akan ditemukan dalam HTML5:
• Penulisan doctipe pada HTML5 lebih sederhana. Mungkin inilah perbedaan
paling mencolok dari halaman HTML yang ditulis menggunakan HTML5 atau tidak. Penulisan Doctype atau DTD pada HTML5 menjadi lebih sederhana: <!DOCTYPE html>.
• Penulisan type atribut untuk tag <style> dan <script> tidak diperlukan pada HTML5. Hal ini karena secara default web browser akan menggunakan text/css untuk tag <style>, dan text/javascript untuk tag <script>. Sebagai contoh, untuk menggunakan external CSS, Pada HTML versi sebelumnya kita menuliskan tag <style> secara lengkap: <style type=”text/css”>…kode CSS… </style>, namun dalam HTML5 kita bisa membuatnya lebih sederhana: <style>…..kode CSS…..</style>
• Penulisan meta tag karakter set (charset) pada HTML5 menjadi lebih
sederhana: <meta charset=”utf-8″>, dibandingkan versi sebelumnya: <meta http-equiv=”content-type” content=”text/html;charset=UTF-8″ />.
• Pada HTML5, tag yang berdiri sendiri (void element) tidak harus ditutup seperti dalam XHTML. Penulisan tag <br> (break) dapat ditulis dengan <br> maupun <br />.
• Walaupun tidak dianjurkan, sebuah tag pada HTML5 boleh ditulis tanpa tag
awal atau tanpa tag akhir. Sebagai contoh, kita tidak perlu menutup tag <p> dengan tag </p>.
• Penulisan tag dan atribut adalah case-insensitive di dalam HTML5, sehingga
tag <p> dan tag <P> akan dianggap sama. Hal ini berbeda dengan XHTML yang mengharuskan seluruh tag ditulis dalam huruf kecil.
• HTML5 mendukung multimedia secara langsung menggunakan tag <audio> dan <video>, sehingga kita tidak perlu tergantung kepada aplikasi pihak ke-3 seperti flash player.
• HTML 5 hanya memiliki 1 versi, tidak seperti pendahulunya yang memiliki 3
versi (pada HTML 4 dan XHTML, anda akan menemukan versi strict, transitional, dan frameset).
<metacharset="utf-8"/>
<title>Tes Validasi HTML5</TITLE> <style>
<pCLASS=penting>Paragraf ini menggunakan atribut tanpa menggunakan tanda kutip </p>
<br>
<p> Paragraf ini tidak memiliki penutup tag </body>
Dari perbedaan diatas, terlihat bahwa HTML5 ‘lebih bebas‘ dari XHTML. Akan tetapi sebaiknya kita tetap menggunakan penulisan yang ‘rapi‘, seperti menggunakan huruf kecil untuk semua tag, menutup semua tag dan memberi tanda kutip dalam setiap nilai atribut.
XHTML5 : HTML5 “rasa” XML
Jika beberapa aturan diatas dirasa terlalu longgar (terutama jika anda banyak menggunakan XHTML sebelumnya), HTML5 memiliki ‘rasa‘ yang lebih ketat aturan, yakni XHTML5. Di dalam XHTML5, seluruh tag harus ditulis dengan huruf kecil, atribut harus berada di dalam tanda kutip, dan setiap tag harus ditutup.
XHTML5 bukanlah versi lain dari HTML5, akan tetapi hanya HTML5 dengan beberapa aturan dan syntax untuk memenuhi syarat XML.
Untuk menggunakan XHTML5, kita butuh menambahkan atribut xmlns=”http://www.w3.org/1999/xhtml” pada tag <html>, dan menggunakan MIME type: application/xhtml+xml pada http header (diset melalui web server).
Contoh dokumen XHTML5 adalah sebagai berikut:: 1
2 3 4 5 6 7 8 9 10 11
<!DOCTYPEhtml>
<htmlxmlns="http://www.w3.org/1999/xhtml"> <head>
<title></title>
<metacharset="UTF-8"/> </head>
<body>
<svgxmlns="http://www.w3.org/2000/svg">
<rect stroke="black" fill="blue" x="45px" y="45px"
12 13
</body> </html>
Saat ini penggunaan XHTML5 tidak terlalu populer, karena memang lebih praktis menggunakan HTML5. XHTML5 akan berguna jika anda ingin menggunakan teknologi yang berbasis XML seperti SVG, MathML, Xlink, dll.
Struktur Dasar HTML5
Belum tau HTML5? , untuk para Master mungkin udah pada tau dan paham banget apa HTML5 itu? , baiklah sekarang saya hanya ingin menjelaskan untuk yang belum tau saja, berikut penjelasannya sob.
Penjelasan HTML5
Adanya versi HTML terbaru yaitu versi 5, dan di sebutlah HTML5 itu bertujuan untuk mengurangi penggunaan plugin-plugin 3rd party pada HTML sehingga dapat mempercepat kinerja web itu sendiri. Plugin-plugin tersebut seperti Adobe Flash, Microsft Silverlight, Java dan lain-lainnya.
Selain itu, HTML5 juga membawa fungsi-fungsi yang baru seperti: 1. Element
article aside audio canvas command datalist details embed figcaption figure footer header hgroup keygen mark meter nav output progress rp rt ruby section source summary time video
2. Input Type pada Form
datestimesemailurlsearch
3. Attribut
<canvas> - Element atau tag ini memiliki fungsi untuk menampilkan kertas gambar sehingga pengguna dapat menggunakan canvas untuk menggambar ataupun menulis bagaikan kertas biasa tanpa menggunakan plugin seperti Java.
<audio><video> - Bila kita ingin menampilkan video ataupun audio pada website kita maka kita akan menggunakan pllugin seperti adobe dengan format .swf, .fla dan .flv. Tetapi dengan menggunakan HTML5, kita tinggal menggunakan tag
Selain terdapatnya fungsi-fungsi baru, HTML5 juga memberikan beberapa kemudahan seperti pada bagian awal file HTML kita harus menulis coding DOCTYPE yang panjang. Pada HTML5, DOCTYPE dapat ditulis lebih ringkas <!DOCTYPE html>
Selain itu, coding CSS dan Javascript pada HTML5 tidak perlu lagi menulis seperti
type=text/css dan type=text/javascript
Tetapi seperti dibawah ini :
<style>
HTML5 juga menghilangkan beberapa tag ataupun element yang telah jarang dipakai dan digantikan oleh CSS seperti :
acronym applet basefont big center dir font frame frameset isindex noframes s strike tt uacronym appletbasefontbigcenterdirfontframeframesetisindexnoframessstrikettu
HTML5 telah menyediakan banyak fungsi baru dan berbagai kemudahan tetapi apakah browser kita mendukung teknologi baru ini? Kebanyakan browser yang terkenal seperti Firefox, Opera, Safari dan Chrome dan lain-lain telah mendukung HTML5 *kecuali Internet Explorer.
Struktur Dasar HTML5
Hehe, setelah lama baca-baca Penjelasan HTML5 di atas, sekarang mending saya langsung share Struktur Dasar HTML5 nya sob, berikut struktur nya :
<!DOCTYPE HTML>
<html> <head>
Isi Artikel .. </p>
</article>
</section>
<aside> <h2>
Judul Bilah Kiri / Sidebar! </h2>
<p>
Isi Konten / Widget .. </p>
</aside>
<footer> <p>
Copyright 2014 - <b>Judul Website</b> </p>
</footer>
</body>
</html>
