SlideShare uma empresa Scribd logo
1 de 28
MAKALAH HTML5 
DI SUSUN OLEH : 
RISTIANAWATI 
2114R0800 
BAB I 
PENDAHULUAN 
A. Latar Belakang 
Perkembangan teknologi dari tahun ketahun semakin cepat. Dari mulai 
handphone, laptop, tablet, dan berbagai gadget lainnya selalu ada perubahan dan 
semakin memanjakan pengguna. Dari tahun ketahun perkembangan teknologi seakan 
membuat para pengguna menjadi ketergantungan dan dimanfaatkan teknologi itu 
sendiri. 
Saat ini, yang mempunyai lingkungan yang semakin luas dan banyak diminati, juga 
dapat digunakan untuk menghasilkan uang adalah dunia pemrograman komputer. 
Dalam dunia pemrograman komputer, dikenal banyak bahasa pemrograman, salah 
satunya adalah HTML5. 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 disini penulis akan 
mengupas tuntas segala macam tentang HTML5 dalam makalah ini. 
B. Rumusan Masalah 
1. Bagaimana sejarah perkembangan HTML5?
2. Apakah HTML5 itu? 
3. Apa saja fitur-fitur yang diberikan HTML5? 
4. Apa saja Tag-tag HTML5? 
5. Apa saja kelebihan dan kekurangan HTML5? 
6. Berikan contoh-contoh website yang menggunakan HTML5? 
C. Tujuan 
Tujuan pembuatan makalah ini yaitu agar pembaca dapat mengenal lebih dalam 
seputar perkembangan teknologi bahasa pemrograman HTML5 dari mulai sejarah 
sampai contoh-contoh website menggunakan HTML5. 
D. Manfaat 
Saya berharap makalah ini dapat bermanfaat bagi para pembaca, yang tadinya 
belum mengerti bahasa pemrograman HTML5 menjadi lebih mengerti dan mungkin 
justru bias membuat website menggunakan HTML5. 
BAB II 
PEMBAHASAN 
1. Sejarah HTML5 
HTML5 yang merupakan standar baru dari HTML pasti mempunyai sejarah 
sebelum terbentuknya HTML5 tersebut. Dimulai dari The Web Hypertext Application 
Technology Working Group (WHATWG), mulai bekerja pada standar baru pada tahun 
2004. Pada saat itu, HTML 4.01 belum diperbarui sejak tahun 2000, dan World Wide 
Web Consortium (W3C) telah memfokuskan pada 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 saat ini bekerja sama pada pengembangan HTML5. 
Sementara HTML5 sering dibandingkan dengan Flash, tetapi kedua teknologi 
tersebut sangat berbeda. Keduanya termasuk fitur untuk memutar audio dan video 
dalam halaman web, dan untuk menggunakan Scalable Vector Graphics. HTML5 sendiri 
tidak dapat digunakan untuk animasi dan interaktivitas, tapi itu harus dilengkapi dengan 
CSS3 atau JavaScript. Ada kemampuan Flash banyak yang tidak memiliki mitra langsung 
dalam HTML5. 
Meskipun HTML5 telah terkenal di kalangan pengembang web selama bertahun-tahun, 
itu menjadi topik media yang mainstream sekitar April 2010 setelah Apple Inc 
kemudian CEO Steve Jobs mengeluarkan surat terbuka berjudul "Pemikiran tentang
flash" di mana ia menyimpulkan 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 untuk 
perangkat mobile dan reorientasi upaya dalam mengembangkan alat memanfaatkan 
HTML5. 
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. hingga 
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 untuk grup baru 
yang mengurus HTML di World Wide Web Consorsium (W3C). Grup ini pertama kali 
mempublikasikan hasil draft pekerjaan pertama mereka pada tanggal 22 januari 2008. 
Spesifikasi ini berstatus dalam tahap pengerjaan, dan diperkirakan akan tetap demikian selama 
bertahun-tahun, meskipun sebagian dari HTML5 sudah dalam 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 dapat mencapai tahap kandidat 
rekomendasi pada tahun 2012. Kriteria di W3C agar sebuah spesifikasi dapat berstatus - 
Direkomendasikan - adalah "yang kedua: 100% selesai dan penerapannya dapat dilakukan pada 
dua atau lebih sistem yang berbeda". Pada wawancaranya dengan TechRepublic, Hickson 
memperkirakan hal ini baru akan terjadi pada tahun 2022 atau setelahnya. Meski demikian, 
banyak bagian dari spesifikasi sudah stabil dan telah dapat diterapkan pada produk. 
b. Markup
Pada 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 contoh (<span>) (sebagai blok navigasi website) dan <footer> (biasanya dikaitkan pada 
bagian bawah suatu website atau baris terakhir dari kode html). Banyak elemen lain yang 
memberikan kegunaan baru melalui antar muka yang telah distandarkan, seperti elemen 
multimedia <audio> dan <video>. Beberapa elemen yang telah ditinggalkan juga ditiadakan, 
termasuk elemen presentasi semata seperti <font> dan <center>, yang sebenarnya dapat 
dikerjakan menggunakan Cascading Style Sheet (CSS). 
c. Api baru 
Untuk menambah keluwesan pemformatan, pada HTML5 telah 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, adalah API yang dapat digunakan untuk manipulasi image 2D yang 
terintegrasi dengan elemen canvas. 
 Audio and Video API, adalah API yang dapat digunakan untuk memutar dan 
memainkan media Video dan Audio. API ini sudah terintegrasi dengan elemen audio 
dan video dari HTML 5. 
 API yang memungkinkan untuk membuat offline web application. 
 API yang memungkinkan web application dapat 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. 
 API yang dapat mengekspos histori dari browser untuk menambahkan halaman web 
yang sedang di akses sehingga bisa menambahkan tombol Back di halaman web. 
 Cross-document messaging. 
Prinsip dari API yang disediakan dari HTML 5 ini adalah agar developer lebih mudah 
dalam membuat sebuah aplikasi web dengan ini user dan developer atau programmer 
karena dapat menciptakan aplikasi web yang penuh fitur pada offline environment. 
Tidak semua teknologi di atas dimasukkan pada spesifikasi HTML5 W3C, meski teknologi 
tersebut telah termaktub dalam spesifikasi milik WHATWG HTML. 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). 
 Web Speech API. 
d. First Public Working Draft 
WHATWG menerbitkan Pertama Kerja Draft Publik spesifikasi pada 22 
Januari 2008. Bagian dari HTML5 telah dilaksanakan di browser meskipun 
seluruh spesifikasi belum telah 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, untuk mencapai interoperabilitas luas untuk spesifikasi lengkap pada tahun 
2014, yang sekarang tanggal target Rekomendasi. Pada bulan Januari 2011, WHATWG 
berganti nama nya "HTML5" standar hidup untuk "HTML". W3C tetap melanjutkan 
proyek untuk melepaskan HTML5. 
f. Calon Rekomendasi 
Pada bulan Juli 2012, WHATWG dan W3C memutuskan pada tingkat pemisahan. 
W3C akan melanjutkan HTML5 spesifikasi pekerjaan, berfokus pada standar definitif 
tunggal, yang dianggap sebagai "snapshot" oleh WHATWG. Organisasi WHATWG akan 
melanjutkan pekerjaannya dengan HTML5 sebagai "Standar Hidup". Konsep standar 
hidup adalah bahwa hal itu tidak pernah lengkap dan selalu diperbarui dan ditingkatkan. 
Fitur baru dapat ditambahkan tapi 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 bahasa markup untuk 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 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 untuk menggolongkan tidak hanya HTML 4, tetapi 
XHTML 1 dan DOM Level 2 HTML. 
Setelah pendahulunya terdekatnya HTML 4.01 dan XHTML 1.1, HTML5 adalah 
respon terhadap pengamatan bahwa HTML dan XHTML umum digunakan pada 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 untuk mendefinisikan bahasa markup tunggal 
yang dapat ditulis baik dalam HTML atau sintaks XHTML. Ini termasuk model 
pengolahan rinci untuk mendorong 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 dapat dijalankan pada 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 untuk 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 untuk 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, tetapi 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 semua browser conforming dan agen 
pengguna lainnya. 
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 
Vokabular HTML dari jaman sebalumnya (HTML+, HTML 2.0, HTML 3.2) umumnya ditulis 
menggunakan aturan sintak SGML. Pada 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> 
<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> 
<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> <p>Article Text here</p> 
</article> 
<article> 
<h2><a href="/test2/"> 
Test 2</a></h2> 
<p>Article Text 2 here</p> 
</article> 
<nav> 
<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 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: 
1. 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 
2. Header: header Halaman yang ditampilkan pada halaman , tidak sama dengan 
unsur kepala 
3. Footer: Halaman footer di mana baik cetak pergi; tanda tangan dalam sebuah 
pesan e-mail 
4. Nav: Koleksi link ke halaman lain 
5. Article: Sebuah entri independen dalam sebuah blog, majalah, ringkasan, dan 
sebagainya 
3. Fitur HTML5 
a. 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. 
b. 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 ada lagi namanya udpate plugin atau browser crash 
karena plugin error. 
c. Canvas 
Canvas adalah fitur yang menarik. Bahasa mudahnya, dengan canvas kita 
bisamengambar atau menampilkan animasi langsung di browser. Lihat demonya disini. 
g. 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. 
h. 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. Cool kan? 
i. 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. cek 
demonya disini. 
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, namun menambahkan 
Puluhan fitur yang memungkinkan programmer web membuat aplikasi seperti desktop hanya 
dengan HTML dan teman temannya (CSS, JS, webAPI dll). 
4. 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 
<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 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 
<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 
<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 
<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 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-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> 
4 <meta http-equiv="Content-Type" content="text/html; 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> 
20 
<p>Posted on <time datetime="2009-09- 
04T16:31:24+02:00">September 4th 2009</time> by <a href="#">Writer</a> - <a 
href="#comments">6 comments</a></p> 
21 </header> 
22 <p>Pellentesque habitant morbi tristique senectus et netus et 
malesuada fames ac turpis egestas.</p> 
23 </article> 
24 
25 <article> 
26 <header> 
27 <h2>Article title</h2> 
28 
<p>Posted on <time datetime="2009-09- 
04T16:31:24+02:00">September 4th 2009</time> by <a href="#">Writer</a> - <a 
href="#comments">6 comments</a></p> 
29 </header> 
30 <p>Pellentesque habitant morbi tristique senectus et netus et 
malesuada fames ac turpis egestas.</p> 
31 </article> 
32 
33 </section> 
34 
35 <aside> 
36 <h2>About section</h2>
37 <p>Donec eu libero sit amet quam egestas semper. Aenean 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> 
5. 
Contoh kode html5:
5. Kelebihan dan Kekurangan HTML5 
Kelebihan : 
 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. 
 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. 
 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” 
 Improved Accessibility, dengan teknologi HTML5 yang memudahkan struktur 
pembangunan sebuah web, maka developer dapat membangun pemahaman yang lebih 
detil mengenaik halaman web. 
 Client-side Database, HTML5 menyediakan model database SQL yang baru dengan API 
yang dapat dibangun dalam konsep lokal, dalam hal ini di sisi client. 
 Geolocation, HTML5 mempunyai API yang terintegrasi terhadap geolocation, fasilitas 
tersebut dapat diakses melalui GPS atau fasilitas lain seperti Google Latitude pada 
iphone. 
 Offline Aplication Cache, pengguna dapat terus melakukan interaksi dengan aplikasi 
meskipun mereka terputus dari jaringan internet.
 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) 
 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. 
Kekurangan : 
 Kekurangan utama yang dimiliki oleh HTML5 ini adalah versi ini hanya support untuk 
browser modern/terbaru 
 Karena bahasa HTML5 ini masih dalam perkembangan, jadi beberapa elemen yang ada 
bisa saja berubah 
 Fitur keamanan yang ditawarkan HTML5 masih terbatas 
6. Contoh-Contoh Website Menggunakan HTML5 
1. James Anderson 613 
http://jamesanderson613.com/ 
2. Yas Marina Circuit
Yas Marina Circuit 
3. Brandongenerator 
http://www.brandongenerator.com/ 
4. Unfinished Business
http://www.unfinishedbusiness.is/ 
5. Roger Dubuis 
http://www.rogerdubuis.com/ 
6. Shiny Demos
http://www.shinydemos.com/ 
7. Metropol Band 
HTML5 Drag And Drop akan menghasilkan website seperti ini 
http://www.metropolband.com/
8. Gerkenwell Close 
share.yu-as.com/smokers/ 
9. Where the fuck should i go for drinks 
Dengan kemampuan Geolocation HTML5, kita bisa membuat aplikasi untuk memberikan 
masukan kemana kita harus pergi, atau mencari lokasi-lokasi yang ada di sekitar kita.
http://www.wherethefuckshouldigofordrinks.com/ 
10. Fridzo Keys | The Rational Keyboard 
Suara piano akan terdengar jika mouse berada diatasnya. 
http://fritzo.org/keys/ 
11. Web Cam Toy 
Dengan website ini kita bisa bermain-main dengan web cam yang ada di komputer
http://webcamtoy.com/ 
12. The Beast 
http://www.the-bea.st/ 
13. Sony tablet
Sony Tablet 
14. Union Station Denver 
http://www.unionstationdenver.com/ 
BAB III
PENUTUP 
A. Kesimpulan 
HTML5 merupakan salah satu bahasa pemrograman yang luar biasa, karena dengan HTML5 
sebuah website dapat diolah menjadi lebih menarik dan bagus. Dalam HTML5 juga telah 
dilakukan penambahan sintaks dengan struktur yang lebih baik dan sederhana daripada versi 
sebelumnya. Selain itu dalam mengembangkan website HTML5 sangat mudah digunakan. Akan 
tetapi HTML5 ini masih dalam tahap penyempurnaan sehingga masih sedikit website yang 
mendukung HTML5. 
B. Saran 
Makalah ini masih sangat banyak sekali kekurangannya, oleh karena itu penulis 
mohon kritik dan sarannya dari pembaca demi penyempurnaan makalah ini.

Mais conteúdo relacionado

Semelhante a Ristianawati 2114 r0800 html5

Html5 ppt
Html5 pptHtml5 ppt
Html5 ppt044249
 
TUGAS 8 – REKAYASA WEB (KU) - 1311511057 - RADEN DONI WIJOYO
TUGAS 8 – REKAYASA WEB (KU) - 1311511057 - RADEN DONI WIJOYOTUGAS 8 – REKAYASA WEB (KU) - 1311511057 - RADEN DONI WIJOYO
TUGAS 8 – REKAYASA WEB (KU) - 1311511057 - RADEN DONI WIJOYODoni Wijoyo
 
Ppt html5
Ppt html5Ppt html5
Ppt html5mutianb
 
Tugas8 ku-0316-debbiemistikaweni-1412510982
Tugas8 ku-0316-debbiemistikaweni-1412510982Tugas8 ku-0316-debbiemistikaweni-1412510982
Tugas8 ku-0316-debbiemistikaweni-1412510982debbie95
 
Tugas 8 - Rekayasa Web
Tugas 8 - Rekayasa WebTugas 8 - Rekayasa Web
Tugas 8 - Rekayasa Webarisjunedi
 
Ppt html5 rully_amrizal_1102412020
Ppt html5 rully_amrizal_1102412020Ppt html5 rully_amrizal_1102412020
Ppt html5 rully_amrizal_1102412020mutia902
 
Tugas 8 rekayasa web 1211510944 art david
Tugas 8 rekayasa web 1211510944 art davidTugas 8 rekayasa web 1211510944 art david
Tugas 8 rekayasa web 1211510944 art davidart david
 
Tugas 8 rekayasa web 1312510231 rostarina
Tugas 8 rekayasa web 1312510231 rostarinaTugas 8 rekayasa web 1312510231 rostarina
Tugas 8 rekayasa web 1312510231 rostarinaosta92
 

Semelhante a Ristianawati 2114 r0800 html5 (20)

Html5 ppt
Html5 pptHtml5 ppt
Html5 ppt
 
TUGAS 8 – REKAYASA WEB (KU) - 1311511057 - RADEN DONI WIJOYO
TUGAS 8 – REKAYASA WEB (KU) - 1311511057 - RADEN DONI WIJOYOTUGAS 8 – REKAYASA WEB (KU) - 1311511057 - RADEN DONI WIJOYO
TUGAS 8 – REKAYASA WEB (KU) - 1311511057 - RADEN DONI WIJOYO
 
Tugas 8 rekweb
Tugas 8   rekwebTugas 8   rekweb
Tugas 8 rekweb
 
Ppt html5
Ppt html5Ppt html5
Ppt html5
 
Tugas 8 – rekayasa web
Tugas 8 – rekayasa webTugas 8 – rekayasa web
Tugas 8 – rekayasa web
 
Html 5
Html 5Html 5
Html 5
 
Tugas 8 rekweb
Tugas 8 rekwebTugas 8 rekweb
Tugas 8 rekweb
 
Html5 ppt
Html5 pptHtml5 ppt
Html5 ppt
 
Html5
Html5 Html5
Html5
 
Tugas 8
Tugas 8Tugas 8
Tugas 8
 
Tugas8 ku-0316-debbiemistikaweni-1412510982
Tugas8 ku-0316-debbiemistikaweni-1412510982Tugas8 ku-0316-debbiemistikaweni-1412510982
Tugas8 ku-0316-debbiemistikaweni-1412510982
 
Tugas 8 - Rekayasa Web
Tugas 8 - Rekayasa WebTugas 8 - Rekayasa Web
Tugas 8 - Rekayasa Web
 
Ppt html5 rully_amrizal_1102412020
Ppt html5 rully_amrizal_1102412020Ppt html5 rully_amrizal_1102412020
Ppt html5 rully_amrizal_1102412020
 
PPT HTML5
PPT HTML5PPT HTML5
PPT HTML5
 
Makalah html5
Makalah html5Makalah html5
Makalah html5
 
Makalah html5
Makalah html5Makalah html5
Makalah html5
 
Html5
Html5Html5
Html5
 
Tugas 8 rekayasa web
Tugas 8   rekayasa webTugas 8   rekayasa web
Tugas 8 rekayasa web
 
Tugas 8 rekayasa web 1211510944 art david
Tugas 8 rekayasa web 1211510944 art davidTugas 8 rekayasa web 1211510944 art david
Tugas 8 rekayasa web 1211510944 art david
 
Tugas 8 rekayasa web 1312510231 rostarina
Tugas 8 rekayasa web 1312510231 rostarinaTugas 8 rekayasa web 1312510231 rostarina
Tugas 8 rekayasa web 1312510231 rostarina
 

Mais de Ristianawati

Makalah cloud computing
Makalah cloud computingMakalah cloud computing
Makalah cloud computingRistianawati
 
Ristianawati 2114 r0800 mikrotik
Ristianawati 2114 r0800 mikrotikRistianawati 2114 r0800 mikrotik
Ristianawati 2114 r0800 mikrotikRistianawati
 
Ristianawati 2114 r0800 mikrotik
Ristianawati 2114 r0800 mikrotikRistianawati 2114 r0800 mikrotik
Ristianawati 2114 r0800 mikrotikRistianawati
 
Ristianawati 2114 r0800
Ristianawati 2114 r0800Ristianawati 2114 r0800
Ristianawati 2114 r0800Ristianawati
 
Ristianawati 2114 r0800 mikrotik
Ristianawati 2114 r0800 mikrotikRistianawati 2114 r0800 mikrotik
Ristianawati 2114 r0800 mikrotikRistianawati
 
Ristianawati 2114 r0800 jquery
Ristianawati 2114 r0800 jqueryRistianawati 2114 r0800 jquery
Ristianawati 2114 r0800 jqueryRistianawati
 
Ristianawati 2114 r0800 java
Ristianawati 2114 r0800 javaRistianawati 2114 r0800 java
Ristianawati 2114 r0800 javaRistianawati
 
Ristianawati 2114 r0800 cloud
Ristianawati 2114 r0800 cloudRistianawati 2114 r0800 cloud
Ristianawati 2114 r0800 cloudRistianawati
 

Mais de Ristianawati (10)

Makalah cloud computing
Makalah cloud computingMakalah cloud computing
Makalah cloud computing
 
Makalah jquery
Makalah jqueryMakalah jquery
Makalah jquery
 
Ristianawati 2114 r0800 mikrotik
Ristianawati 2114 r0800 mikrotikRistianawati 2114 r0800 mikrotik
Ristianawati 2114 r0800 mikrotik
 
Ristianawati 2114 r0800 mikrotik
Ristianawati 2114 r0800 mikrotikRistianawati 2114 r0800 mikrotik
Ristianawati 2114 r0800 mikrotik
 
Makalah android
Makalah androidMakalah android
Makalah android
 
Ristianawati 2114 r0800
Ristianawati 2114 r0800Ristianawati 2114 r0800
Ristianawati 2114 r0800
 
Ristianawati 2114 r0800 mikrotik
Ristianawati 2114 r0800 mikrotikRistianawati 2114 r0800 mikrotik
Ristianawati 2114 r0800 mikrotik
 
Ristianawati 2114 r0800 jquery
Ristianawati 2114 r0800 jqueryRistianawati 2114 r0800 jquery
Ristianawati 2114 r0800 jquery
 
Ristianawati 2114 r0800 java
Ristianawati 2114 r0800 javaRistianawati 2114 r0800 java
Ristianawati 2114 r0800 java
 
Ristianawati 2114 r0800 cloud
Ristianawati 2114 r0800 cloudRistianawati 2114 r0800 cloud
Ristianawati 2114 r0800 cloud
 

Último

Aksi Nyata Sosialisasi Profil Pelajar Pancasila.pdf
Aksi Nyata Sosialisasi Profil Pelajar Pancasila.pdfAksi Nyata Sosialisasi Profil Pelajar Pancasila.pdf
Aksi Nyata Sosialisasi Profil Pelajar Pancasila.pdfJarzaniIsmail
 
MODUL PENDIDIKAN PANCASILA KELAS 6 KURIKULUM MERDEKA.pdf
MODUL PENDIDIKAN PANCASILA KELAS 6 KURIKULUM MERDEKA.pdfMODUL PENDIDIKAN PANCASILA KELAS 6 KURIKULUM MERDEKA.pdf
MODUL PENDIDIKAN PANCASILA KELAS 6 KURIKULUM MERDEKA.pdfAndiCoc
 
Aksi Nyata Menyebarkan (Pemahaman Mengapa Kurikulum Perlu Berubah) Oleh Nur A...
Aksi Nyata Menyebarkan (Pemahaman Mengapa Kurikulum Perlu Berubah) Oleh Nur A...Aksi Nyata Menyebarkan (Pemahaman Mengapa Kurikulum Perlu Berubah) Oleh Nur A...
Aksi Nyata Menyebarkan (Pemahaman Mengapa Kurikulum Perlu Berubah) Oleh Nur A...nuraji51
 
PELAKSANAAN (dgn PT SBI) + Link2 Materi Pelatihan _"Teknik Perhitungan TKDN, ...
PELAKSANAAN (dgn PT SBI) + Link2 Materi Pelatihan _"Teknik Perhitungan TKDN, ...PELAKSANAAN (dgn PT SBI) + Link2 Materi Pelatihan _"Teknik Perhitungan TKDN, ...
PELAKSANAAN (dgn PT SBI) + Link2 Materi Pelatihan _"Teknik Perhitungan TKDN, ...Kanaidi ken
 
MODUL AJAR SENI RUPA KELAS 6 KURIKULUM MERDEKA.pdf
MODUL AJAR SENI RUPA KELAS 6 KURIKULUM MERDEKA.pdfMODUL AJAR SENI RUPA KELAS 6 KURIKULUM MERDEKA.pdf
MODUL AJAR SENI RUPA KELAS 6 KURIKULUM MERDEKA.pdfAndiCoc
 
Kenakalan Remaja (Penggunaan Narkoba).ppt
Kenakalan Remaja (Penggunaan Narkoba).pptKenakalan Remaja (Penggunaan Narkoba).ppt
Kenakalan Remaja (Penggunaan Narkoba).pptnovibernadina
 
vIDEO kelayakan berita untuk mahasiswa.ppsx
vIDEO kelayakan berita untuk mahasiswa.ppsxvIDEO kelayakan berita untuk mahasiswa.ppsx
vIDEO kelayakan berita untuk mahasiswa.ppsxsyahrulutama16
 
HAK DAN KEWAJIBAN WARGA NEGARA ppkn i.ppt
HAK DAN KEWAJIBAN WARGA NEGARA ppkn i.pptHAK DAN KEWAJIBAN WARGA NEGARA ppkn i.ppt
HAK DAN KEWAJIBAN WARGA NEGARA ppkn i.pptnabilafarahdiba95
 
Bab 4 Persatuan dan Kesatuan di Lingkup Wilayah Kabupaten dan Kota.pptx
Bab 4 Persatuan dan Kesatuan di Lingkup Wilayah Kabupaten dan Kota.pptxBab 4 Persatuan dan Kesatuan di Lingkup Wilayah Kabupaten dan Kota.pptx
Bab 4 Persatuan dan Kesatuan di Lingkup Wilayah Kabupaten dan Kota.pptxrizalhabib4
 
Penyuluhan DM Tipe II Kegiatan Prolanis.ppt
Penyuluhan DM Tipe II Kegiatan Prolanis.pptPenyuluhan DM Tipe II Kegiatan Prolanis.ppt
Penyuluhan DM Tipe II Kegiatan Prolanis.pptpalagoro17
 
MODUL AJAR IPAS KELAS 3 KURIKULUM MERDEKA.pdf
MODUL AJAR IPAS KELAS 3 KURIKULUM MERDEKA.pdfMODUL AJAR IPAS KELAS 3 KURIKULUM MERDEKA.pdf
MODUL AJAR IPAS KELAS 3 KURIKULUM MERDEKA.pdfAndiCoc
 
Topik 4_Eksplorasi Konsep LK Kelompok_Pendidikan Berkelanjutan
Topik 4_Eksplorasi Konsep LK Kelompok_Pendidikan BerkelanjutanTopik 4_Eksplorasi Konsep LK Kelompok_Pendidikan Berkelanjutan
Topik 4_Eksplorasi Konsep LK Kelompok_Pendidikan BerkelanjutanAyuApriliyanti6
 
RENCANA + Link2 MATERI Training _"SISTEM MANAJEMEN MUTU (ISO 9001_2015)".
RENCANA + Link2 MATERI Training _"SISTEM MANAJEMEN MUTU (ISO 9001_2015)".RENCANA + Link2 MATERI Training _"SISTEM MANAJEMEN MUTU (ISO 9001_2015)".
RENCANA + Link2 MATERI Training _"SISTEM MANAJEMEN MUTU (ISO 9001_2015)".Kanaidi ken
 
MODUL PENDIDIKAN PANCASILA KELAS 6 KURIKULUM MERDEKA.pdf
MODUL PENDIDIKAN PANCASILA KELAS 6 KURIKULUM MERDEKA.pdfMODUL PENDIDIKAN PANCASILA KELAS 6 KURIKULUM MERDEKA.pdf
MODUL PENDIDIKAN PANCASILA KELAS 6 KURIKULUM MERDEKA.pdfAndiCoc
 
AKSI NYATA Numerasi Meningkatkan Kompetensi Murid_compressed (1) (1).pptx
AKSI NYATA  Numerasi  Meningkatkan Kompetensi Murid_compressed (1) (1).pptxAKSI NYATA  Numerasi  Meningkatkan Kompetensi Murid_compressed (1) (1).pptx
AKSI NYATA Numerasi Meningkatkan Kompetensi Murid_compressed (1) (1).pptxnursariheldaseptiana
 
MODUL AJAR BAHASA INGGRIS KELAS 6 KURIKULUM MERDEKA.pdf
MODUL AJAR BAHASA INGGRIS KELAS 6 KURIKULUM MERDEKA.pdfMODUL AJAR BAHASA INGGRIS KELAS 6 KURIKULUM MERDEKA.pdf
MODUL AJAR BAHASA INGGRIS KELAS 6 KURIKULUM MERDEKA.pdfAndiCoc
 
Memperkasakan Dialog Prestasi Sekolah.pptx
Memperkasakan Dialog Prestasi Sekolah.pptxMemperkasakan Dialog Prestasi Sekolah.pptx
Memperkasakan Dialog Prestasi Sekolah.pptxsalmnor
 
DEMONSTRASI KONTEKSTUAL MODUL 1.3 CGP 10.pptx
DEMONSTRASI KONTEKSTUAL MODUL 1.3 CGP 10.pptxDEMONSTRASI KONTEKSTUAL MODUL 1.3 CGP 10.pptx
DEMONSTRASI KONTEKSTUAL MODUL 1.3 CGP 10.pptxwawan479953
 
MODUL AJAR MATEMATIKA KELAS 6 KURIKULUM MERDEKA.pdf
MODUL AJAR MATEMATIKA KELAS 6 KURIKULUM MERDEKA.pdfMODUL AJAR MATEMATIKA KELAS 6 KURIKULUM MERDEKA.pdf
MODUL AJAR MATEMATIKA KELAS 6 KURIKULUM MERDEKA.pdfAndiCoc
 
RENCANA & Link2 Materi Pelatihan_ "Teknik Perhitungan TKDN, BMP, Preferensi H...
RENCANA & Link2 Materi Pelatihan_ "Teknik Perhitungan TKDN, BMP, Preferensi H...RENCANA & Link2 Materi Pelatihan_ "Teknik Perhitungan TKDN, BMP, Preferensi H...
RENCANA & Link2 Materi Pelatihan_ "Teknik Perhitungan TKDN, BMP, Preferensi H...Kanaidi ken
 

Último (20)

Aksi Nyata Sosialisasi Profil Pelajar Pancasila.pdf
Aksi Nyata Sosialisasi Profil Pelajar Pancasila.pdfAksi Nyata Sosialisasi Profil Pelajar Pancasila.pdf
Aksi Nyata Sosialisasi Profil Pelajar Pancasila.pdf
 
MODUL PENDIDIKAN PANCASILA KELAS 6 KURIKULUM MERDEKA.pdf
MODUL PENDIDIKAN PANCASILA KELAS 6 KURIKULUM MERDEKA.pdfMODUL PENDIDIKAN PANCASILA KELAS 6 KURIKULUM MERDEKA.pdf
MODUL PENDIDIKAN PANCASILA KELAS 6 KURIKULUM MERDEKA.pdf
 
Aksi Nyata Menyebarkan (Pemahaman Mengapa Kurikulum Perlu Berubah) Oleh Nur A...
Aksi Nyata Menyebarkan (Pemahaman Mengapa Kurikulum Perlu Berubah) Oleh Nur A...Aksi Nyata Menyebarkan (Pemahaman Mengapa Kurikulum Perlu Berubah) Oleh Nur A...
Aksi Nyata Menyebarkan (Pemahaman Mengapa Kurikulum Perlu Berubah) Oleh Nur A...
 
PELAKSANAAN (dgn PT SBI) + Link2 Materi Pelatihan _"Teknik Perhitungan TKDN, ...
PELAKSANAAN (dgn PT SBI) + Link2 Materi Pelatihan _"Teknik Perhitungan TKDN, ...PELAKSANAAN (dgn PT SBI) + Link2 Materi Pelatihan _"Teknik Perhitungan TKDN, ...
PELAKSANAAN (dgn PT SBI) + Link2 Materi Pelatihan _"Teknik Perhitungan TKDN, ...
 
MODUL AJAR SENI RUPA KELAS 6 KURIKULUM MERDEKA.pdf
MODUL AJAR SENI RUPA KELAS 6 KURIKULUM MERDEKA.pdfMODUL AJAR SENI RUPA KELAS 6 KURIKULUM MERDEKA.pdf
MODUL AJAR SENI RUPA KELAS 6 KURIKULUM MERDEKA.pdf
 
Kenakalan Remaja (Penggunaan Narkoba).ppt
Kenakalan Remaja (Penggunaan Narkoba).pptKenakalan Remaja (Penggunaan Narkoba).ppt
Kenakalan Remaja (Penggunaan Narkoba).ppt
 
vIDEO kelayakan berita untuk mahasiswa.ppsx
vIDEO kelayakan berita untuk mahasiswa.ppsxvIDEO kelayakan berita untuk mahasiswa.ppsx
vIDEO kelayakan berita untuk mahasiswa.ppsx
 
HAK DAN KEWAJIBAN WARGA NEGARA ppkn i.ppt
HAK DAN KEWAJIBAN WARGA NEGARA ppkn i.pptHAK DAN KEWAJIBAN WARGA NEGARA ppkn i.ppt
HAK DAN KEWAJIBAN WARGA NEGARA ppkn i.ppt
 
Bab 4 Persatuan dan Kesatuan di Lingkup Wilayah Kabupaten dan Kota.pptx
Bab 4 Persatuan dan Kesatuan di Lingkup Wilayah Kabupaten dan Kota.pptxBab 4 Persatuan dan Kesatuan di Lingkup Wilayah Kabupaten dan Kota.pptx
Bab 4 Persatuan dan Kesatuan di Lingkup Wilayah Kabupaten dan Kota.pptx
 
Penyuluhan DM Tipe II Kegiatan Prolanis.ppt
Penyuluhan DM Tipe II Kegiatan Prolanis.pptPenyuluhan DM Tipe II Kegiatan Prolanis.ppt
Penyuluhan DM Tipe II Kegiatan Prolanis.ppt
 
MODUL AJAR IPAS KELAS 3 KURIKULUM MERDEKA.pdf
MODUL AJAR IPAS KELAS 3 KURIKULUM MERDEKA.pdfMODUL AJAR IPAS KELAS 3 KURIKULUM MERDEKA.pdf
MODUL AJAR IPAS KELAS 3 KURIKULUM MERDEKA.pdf
 
Topik 4_Eksplorasi Konsep LK Kelompok_Pendidikan Berkelanjutan
Topik 4_Eksplorasi Konsep LK Kelompok_Pendidikan BerkelanjutanTopik 4_Eksplorasi Konsep LK Kelompok_Pendidikan Berkelanjutan
Topik 4_Eksplorasi Konsep LK Kelompok_Pendidikan Berkelanjutan
 
RENCANA + Link2 MATERI Training _"SISTEM MANAJEMEN MUTU (ISO 9001_2015)".
RENCANA + Link2 MATERI Training _"SISTEM MANAJEMEN MUTU (ISO 9001_2015)".RENCANA + Link2 MATERI Training _"SISTEM MANAJEMEN MUTU (ISO 9001_2015)".
RENCANA + Link2 MATERI Training _"SISTEM MANAJEMEN MUTU (ISO 9001_2015)".
 
MODUL PENDIDIKAN PANCASILA KELAS 6 KURIKULUM MERDEKA.pdf
MODUL PENDIDIKAN PANCASILA KELAS 6 KURIKULUM MERDEKA.pdfMODUL PENDIDIKAN PANCASILA KELAS 6 KURIKULUM MERDEKA.pdf
MODUL PENDIDIKAN PANCASILA KELAS 6 KURIKULUM MERDEKA.pdf
 
AKSI NYATA Numerasi Meningkatkan Kompetensi Murid_compressed (1) (1).pptx
AKSI NYATA  Numerasi  Meningkatkan Kompetensi Murid_compressed (1) (1).pptxAKSI NYATA  Numerasi  Meningkatkan Kompetensi Murid_compressed (1) (1).pptx
AKSI NYATA Numerasi Meningkatkan Kompetensi Murid_compressed (1) (1).pptx
 
MODUL AJAR BAHASA INGGRIS KELAS 6 KURIKULUM MERDEKA.pdf
MODUL AJAR BAHASA INGGRIS KELAS 6 KURIKULUM MERDEKA.pdfMODUL AJAR BAHASA INGGRIS KELAS 6 KURIKULUM MERDEKA.pdf
MODUL AJAR BAHASA INGGRIS KELAS 6 KURIKULUM MERDEKA.pdf
 
Memperkasakan Dialog Prestasi Sekolah.pptx
Memperkasakan Dialog Prestasi Sekolah.pptxMemperkasakan Dialog Prestasi Sekolah.pptx
Memperkasakan Dialog Prestasi Sekolah.pptx
 
DEMONSTRASI KONTEKSTUAL MODUL 1.3 CGP 10.pptx
DEMONSTRASI KONTEKSTUAL MODUL 1.3 CGP 10.pptxDEMONSTRASI KONTEKSTUAL MODUL 1.3 CGP 10.pptx
DEMONSTRASI KONTEKSTUAL MODUL 1.3 CGP 10.pptx
 
MODUL AJAR MATEMATIKA KELAS 6 KURIKULUM MERDEKA.pdf
MODUL AJAR MATEMATIKA KELAS 6 KURIKULUM MERDEKA.pdfMODUL AJAR MATEMATIKA KELAS 6 KURIKULUM MERDEKA.pdf
MODUL AJAR MATEMATIKA KELAS 6 KURIKULUM MERDEKA.pdf
 
RENCANA & Link2 Materi Pelatihan_ "Teknik Perhitungan TKDN, BMP, Preferensi H...
RENCANA & Link2 Materi Pelatihan_ "Teknik Perhitungan TKDN, BMP, Preferensi H...RENCANA & Link2 Materi Pelatihan_ "Teknik Perhitungan TKDN, BMP, Preferensi H...
RENCANA & Link2 Materi Pelatihan_ "Teknik Perhitungan TKDN, BMP, Preferensi H...
 

Ristianawati 2114 r0800 html5

  • 1. MAKALAH HTML5 DI SUSUN OLEH : RISTIANAWATI 2114R0800 BAB I PENDAHULUAN A. Latar Belakang Perkembangan teknologi dari tahun ketahun semakin cepat. Dari mulai handphone, laptop, tablet, dan berbagai gadget lainnya selalu ada perubahan dan semakin memanjakan pengguna. Dari tahun ketahun perkembangan teknologi seakan membuat para pengguna menjadi ketergantungan dan dimanfaatkan teknologi itu sendiri. Saat ini, yang mempunyai lingkungan yang semakin luas dan banyak diminati, juga dapat digunakan untuk menghasilkan uang adalah dunia pemrograman komputer. Dalam dunia pemrograman komputer, dikenal banyak bahasa pemrograman, salah satunya adalah HTML5. 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 disini penulis akan mengupas tuntas segala macam tentang HTML5 dalam makalah ini. B. Rumusan Masalah 1. Bagaimana sejarah perkembangan HTML5?
  • 2. 2. Apakah HTML5 itu? 3. Apa saja fitur-fitur yang diberikan HTML5? 4. Apa saja Tag-tag HTML5? 5. Apa saja kelebihan dan kekurangan HTML5? 6. Berikan contoh-contoh website yang menggunakan HTML5? C. Tujuan Tujuan pembuatan makalah ini yaitu agar pembaca dapat mengenal lebih dalam seputar perkembangan teknologi bahasa pemrograman HTML5 dari mulai sejarah sampai contoh-contoh website menggunakan HTML5. D. Manfaat Saya berharap makalah ini dapat bermanfaat bagi para pembaca, yang tadinya belum mengerti bahasa pemrograman HTML5 menjadi lebih mengerti dan mungkin justru bias membuat website menggunakan HTML5. BAB II PEMBAHASAN 1. Sejarah HTML5 HTML5 yang merupakan standar baru dari HTML pasti mempunyai sejarah sebelum terbentuknya HTML5 tersebut. Dimulai dari The Web Hypertext Application Technology Working Group (WHATWG), mulai bekerja pada standar baru pada tahun 2004. Pada saat itu, HTML 4.01 belum diperbarui sejak tahun 2000, dan World Wide Web Consortium (W3C) telah memfokuskan pada 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 saat ini bekerja sama pada pengembangan HTML5. Sementara HTML5 sering dibandingkan dengan Flash, tetapi kedua teknologi tersebut sangat berbeda. Keduanya termasuk fitur untuk memutar audio dan video dalam halaman web, dan untuk menggunakan Scalable Vector Graphics. HTML5 sendiri tidak dapat digunakan untuk animasi dan interaktivitas, tapi itu harus dilengkapi dengan CSS3 atau JavaScript. Ada kemampuan Flash banyak yang tidak memiliki mitra langsung dalam HTML5. Meskipun HTML5 telah terkenal di kalangan pengembang web selama bertahun-tahun, itu menjadi topik media yang mainstream sekitar April 2010 setelah Apple Inc kemudian CEO Steve Jobs mengeluarkan surat terbuka berjudul "Pemikiran tentang
  • 3. flash" di mana ia menyimpulkan 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 untuk perangkat mobile dan reorientasi upaya dalam mengembangkan alat memanfaatkan HTML5. 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. hingga 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 untuk grup baru yang mengurus HTML di World Wide Web Consorsium (W3C). Grup ini pertama kali mempublikasikan hasil draft pekerjaan pertama mereka pada tanggal 22 januari 2008. Spesifikasi ini berstatus dalam tahap pengerjaan, dan diperkirakan akan tetap demikian selama bertahun-tahun, meskipun sebagian dari HTML5 sudah dalam 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 dapat mencapai tahap kandidat rekomendasi pada tahun 2012. Kriteria di W3C agar sebuah spesifikasi dapat berstatus - Direkomendasikan - adalah "yang kedua: 100% selesai dan penerapannya dapat dilakukan pada dua atau lebih sistem yang berbeda". Pada wawancaranya dengan TechRepublic, Hickson memperkirakan hal ini baru akan terjadi pada tahun 2022 atau setelahnya. Meski demikian, banyak bagian dari spesifikasi sudah stabil dan telah dapat diterapkan pada produk. b. Markup
  • 4. Pada 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 contoh (<span>) (sebagai blok navigasi website) dan <footer> (biasanya dikaitkan pada bagian bawah suatu website atau baris terakhir dari kode html). Banyak elemen lain yang memberikan kegunaan baru melalui antar muka yang telah distandarkan, seperti elemen multimedia <audio> dan <video>. Beberapa elemen yang telah ditinggalkan juga ditiadakan, termasuk elemen presentasi semata seperti <font> dan <center>, yang sebenarnya dapat dikerjakan menggunakan Cascading Style Sheet (CSS). c. Api baru Untuk menambah keluwesan pemformatan, pada HTML5 telah 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, adalah API yang dapat digunakan untuk manipulasi image 2D yang terintegrasi dengan elemen canvas.  Audio and Video API, adalah API yang dapat digunakan untuk memutar dan memainkan media Video dan Audio. API ini sudah terintegrasi dengan elemen audio dan video dari HTML 5.  API yang memungkinkan untuk membuat offline web application.  API yang memungkinkan web application dapat 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.  API yang dapat mengekspos histori dari browser untuk menambahkan halaman web yang sedang di akses sehingga bisa menambahkan tombol Back di halaman web.  Cross-document messaging. Prinsip dari API yang disediakan dari HTML 5 ini adalah agar developer lebih mudah dalam membuat sebuah aplikasi web dengan ini user dan developer atau programmer karena dapat menciptakan aplikasi web yang penuh fitur pada offline environment. Tidak semua teknologi di atas dimasukkan pada spesifikasi HTML5 W3C, meski teknologi tersebut telah termaktub dalam spesifikasi milik WHATWG HTML. Beberapa teknologi yang juga terkait namun tidak dijadikan bagian dalam spesifikasi HTML5 W3C dan WHATWG HTML5 adalah :  Geolocation
  • 5.  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 menerbitkan Pertama Kerja Draft Publik spesifikasi pada 22 Januari 2008. Bagian dari HTML5 telah dilaksanakan di browser meskipun seluruh spesifikasi belum telah 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, untuk mencapai interoperabilitas luas untuk spesifikasi lengkap pada tahun 2014, yang sekarang tanggal target Rekomendasi. Pada bulan Januari 2011, WHATWG berganti nama nya "HTML5" standar hidup untuk "HTML". W3C tetap melanjutkan proyek untuk melepaskan HTML5. f. Calon Rekomendasi Pada bulan Juli 2012, WHATWG dan W3C memutuskan pada tingkat pemisahan. W3C akan melanjutkan HTML5 spesifikasi pekerjaan, berfokus pada standar definitif tunggal, yang dianggap sebagai "snapshot" oleh WHATWG. Organisasi WHATWG akan melanjutkan pekerjaannya dengan HTML5 sebagai "Standar Hidup". Konsep standar hidup adalah bahwa hal itu tidak pernah lengkap dan selalu diperbarui dan ditingkatkan. Fitur baru dapat ditambahkan tapi 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 bahasa markup untuk 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 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 untuk menggolongkan tidak hanya HTML 4, tetapi XHTML 1 dan DOM Level 2 HTML. Setelah pendahulunya terdekatnya HTML 4.01 dan XHTML 1.1, HTML5 adalah respon terhadap pengamatan bahwa HTML dan XHTML umum digunakan pada World Wide Web adalah campuran dari fitur diperkenalkan oleh berbagai spesifikasi, bersama
  • 6. 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 untuk mendefinisikan bahasa markup tunggal yang dapat ditulis baik dalam HTML atau sintaks XHTML. Ini termasuk model pengolahan rinci untuk mendorong 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 dapat dijalankan pada 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 untuk 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 untuk 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, tetapi 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 semua browser conforming dan agen pengguna lainnya. 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 Vokabular HTML dari jaman sebalumnya (HTML+, HTML 2.0, HTML 3.2) umumnya ditulis menggunakan aturan sintak SGML. Pada 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:
  • 7. <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> <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> <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>
  • 8. </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> <p>Article Text here</p> </article> <article> <h2><a href="/test2/"> Test 2</a></h2> <p>Article Text 2 here</p> </article> <nav> <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>
  • 9. </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 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: 1. 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 2. Header: header Halaman yang ditampilkan pada halaman , tidak sama dengan unsur kepala 3. Footer: Halaman footer di mana baik cetak pergi; tanda tangan dalam sebuah pesan e-mail 4. Nav: Koleksi link ke halaman lain 5. Article: Sebuah entri independen dalam sebuah blog, majalah, ringkasan, dan sebagainya 3. Fitur HTML5 a. 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. b. 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
  • 10. atau silverLight . Era plugin sudah berakhir, HTML5 menghadirkan Native audio dan Video Codec langsung didalam browser. Tidak ada lagi namanya udpate plugin atau browser crash karena plugin error. c. Canvas Canvas adalah fitur yang menarik. Bahasa mudahnya, dengan canvas kita bisamengambar atau menampilkan animasi langsung di browser. Lihat demonya disini. g. 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. h. 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. Cool kan? i. 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. cek demonya disini. 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, namun menambahkan Puluhan fitur yang memungkinkan programmer web membuat aplikasi seperti desktop hanya dengan HTML dan teman temannya (CSS, JS, webAPI dll). 4. Tag HTML5 Nama Tag Keterangan / Kegunaan Basic
  • 11. <!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 <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
  • 12. <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 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
  • 13. pengguna <input> Tag untuk membuat sebuah kontrol input <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 <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)
  • 14. <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 <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
  • 15. <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 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
  • 16. <applet> Tag untuk membuat sebuah java applet yang ditanam(tidak disupport lagi di HTML5) <embed> Tag untuk membuat sebuah wadah untuk aplikasi eksternal (non-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> 4 <meta http-equiv="Content-Type" content="text/html; 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>
  • 17. 18 <header> 19 <h2>Article title</h2> 20 <p>Posted on <time datetime="2009-09- 04T16:31:24+02:00">September 4th 2009</time> by <a href="#">Writer</a> - <a href="#comments">6 comments</a></p> 21 </header> 22 <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p> 23 </article> 24 25 <article> 26 <header> 27 <h2>Article title</h2> 28 <p>Posted on <time datetime="2009-09- 04T16:31:24+02:00">September 4th 2009</time> by <a href="#">Writer</a> - <a href="#comments">6 comments</a></p> 29 </header> 30 <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p> 31 </article> 32 33 </section> 34 35 <aside> 36 <h2>About section</h2>
  • 18. 37 <p>Donec eu libero sit amet quam egestas semper. Aenean 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> 5. Contoh kode html5:
  • 19. 5. Kelebihan dan Kekurangan HTML5 Kelebihan :  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.  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.  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”  Improved Accessibility, dengan teknologi HTML5 yang memudahkan struktur pembangunan sebuah web, maka developer dapat membangun pemahaman yang lebih detil mengenaik halaman web.  Client-side Database, HTML5 menyediakan model database SQL yang baru dengan API yang dapat dibangun dalam konsep lokal, dalam hal ini di sisi client.  Geolocation, HTML5 mempunyai API yang terintegrasi terhadap geolocation, fasilitas tersebut dapat diakses melalui GPS atau fasilitas lain seperti Google Latitude pada iphone.  Offline Aplication Cache, pengguna dapat terus melakukan interaksi dengan aplikasi meskipun mereka terputus dari jaringan internet.
  • 20.  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)  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. Kekurangan :  Kekurangan utama yang dimiliki oleh HTML5 ini adalah versi ini hanya support untuk browser modern/terbaru  Karena bahasa HTML5 ini masih dalam perkembangan, jadi beberapa elemen yang ada bisa saja berubah  Fitur keamanan yang ditawarkan HTML5 masih terbatas 6. Contoh-Contoh Website Menggunakan HTML5 1. James Anderson 613 http://jamesanderson613.com/ 2. Yas Marina Circuit
  • 21. Yas Marina Circuit 3. Brandongenerator http://www.brandongenerator.com/ 4. Unfinished Business
  • 22. http://www.unfinishedbusiness.is/ 5. Roger Dubuis http://www.rogerdubuis.com/ 6. Shiny Demos
  • 23. http://www.shinydemos.com/ 7. Metropol Band HTML5 Drag And Drop akan menghasilkan website seperti ini http://www.metropolband.com/
  • 24. 8. Gerkenwell Close share.yu-as.com/smokers/ 9. Where the fuck should i go for drinks Dengan kemampuan Geolocation HTML5, kita bisa membuat aplikasi untuk memberikan masukan kemana kita harus pergi, atau mencari lokasi-lokasi yang ada di sekitar kita.
  • 25. http://www.wherethefuckshouldigofordrinks.com/ 10. Fridzo Keys | The Rational Keyboard Suara piano akan terdengar jika mouse berada diatasnya. http://fritzo.org/keys/ 11. Web Cam Toy Dengan website ini kita bisa bermain-main dengan web cam yang ada di komputer
  • 26. http://webcamtoy.com/ 12. The Beast http://www.the-bea.st/ 13. Sony tablet
  • 27. Sony Tablet 14. Union Station Denver http://www.unionstationdenver.com/ BAB III
  • 28. PENUTUP A. Kesimpulan HTML5 merupakan salah satu bahasa pemrograman yang luar biasa, karena dengan HTML5 sebuah website dapat diolah menjadi lebih menarik dan bagus. Dalam HTML5 juga telah dilakukan penambahan sintaks dengan struktur yang lebih baik dan sederhana daripada versi sebelumnya. Selain itu dalam mengembangkan website HTML5 sangat mudah digunakan. Akan tetapi HTML5 ini masih dalam tahap penyempurnaan sehingga masih sedikit website yang mendukung HTML5. B. Saran Makalah ini masih sangat banyak sekali kekurangannya, oleh karena itu penulis mohon kritik dan sarannya dari pembaca demi penyempurnaan makalah ini.