SlideShare a Scribd company logo
1 of 34
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
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
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
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 ?
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
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.
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
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
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.
 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
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
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>.
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
<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
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
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>
<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>
here</p>
</article>
<article>
<h2><a href="/test2/">
Test 2</a></h2>
<p>Article Text 2 here</p>
</article>
<nav>

<p>Article Text
<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:
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
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
<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>
<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
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
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,
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”
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.
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.
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.

More Related Content

Similar to HTML5 MAKALAH

Html5 ppt
Html5 pptHtml5 ppt
Html5 ppt044249
 
Ppt html5
Ppt html5Ppt html5
Ppt html5mutianb
 
Pengenalan HTML5, Mobile Application, dan Intel XDK
Pengenalan HTML5, Mobile Application, dan Intel XDKPengenalan HTML5, Mobile Application, dan Intel XDK
Pengenalan HTML5, Mobile Application, dan Intel XDKMuhammad Yusuf
 
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 rully_amrizal_1102412020
Ppt html5 rully_amrizal_1102412020Ppt html5 rully_amrizal_1102412020
Ppt html5 rully_amrizal_1102412020mutia902
 
Tugas 8 - Rekayasa Web
Tugas 8 - Rekayasa WebTugas 8 - Rekayasa Web
Tugas 8 - Rekayasa Webarisjunedi
 
Tugas8 ku-0316-debbiemistikaweni-1412510982
Tugas8 ku-0316-debbiemistikaweni-1412510982Tugas8 ku-0316-debbiemistikaweni-1412510982
Tugas8 ku-0316-debbiemistikaweni-1412510982debbie95
 
Makalah html5
Makalah html5Makalah html5
Makalah html5argud
 

Similar to HTML5 MAKALAH (20)

Html5
Html5 Html5
Html5
 
Html5
Html5Html5
Html5
 
Tugas 8 rekweb
Tugas 8 rekwebTugas 8 rekweb
Tugas 8 rekweb
 
Html5 ppt
Html5 pptHtml5 ppt
Html5 ppt
 
Ppt html5
Ppt html5Ppt html5
Ppt html5
 
Ppt html5
Ppt html5Ppt html5
Ppt html5
 
Pengenalan HTML5, Mobile Application, dan Intel XDK
Pengenalan HTML5, Mobile Application, dan Intel XDKPengenalan HTML5, Mobile Application, dan Intel XDK
Pengenalan HTML5, Mobile Application, dan Intel XDK
 
Html5 ppt
Html5 pptHtml5 ppt
Html5 ppt
 
html5
html5html5
html5
 
Tugas 8 – rekayasa web
Tugas 8 – rekayasa webTugas 8 – rekayasa web
Tugas 8 – rekayasa web
 
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
 
Html 5
Html 5Html 5
Html 5
 
Html 5
Html 5Html 5
Html 5
 
Pengenalan html5
Pengenalan html5Pengenalan html5
Pengenalan html5
 
Ppt html5 rully_amrizal_1102412020
Ppt html5 rully_amrizal_1102412020Ppt html5 rully_amrizal_1102412020
Ppt html5 rully_amrizal_1102412020
 
Tugas 8 - Rekayasa Web
Tugas 8 - Rekayasa WebTugas 8 - Rekayasa Web
Tugas 8 - Rekayasa Web
 
Tugas8 ku-0316-debbiemistikaweni-1412510982
Tugas8 ku-0316-debbiemistikaweni-1412510982Tugas8 ku-0316-debbiemistikaweni-1412510982
Tugas8 ku-0316-debbiemistikaweni-1412510982
 
Makalah html5
Makalah html5Makalah html5
Makalah html5
 
PPT HTML5
PPT HTML5PPT HTML5
PPT HTML5
 
Makalah html5
Makalah html5Makalah html5
Makalah html5
 

More from Fajar Satrio

Makalah Jaringan Komputer Modern
Makalah Jaringan Komputer ModernMakalah Jaringan Komputer Modern
Makalah Jaringan Komputer ModernFajar Satrio
 
Tutorial instal ubuntu 14.04 Virtual
Tutorial instal ubuntu 14.04 VirtualTutorial instal ubuntu 14.04 Virtual
Tutorial instal ubuntu 14.04 VirtualFajar Satrio
 
Tutorial instal ubuntu 13.10 Virtual
Tutorial instal ubuntu 13.10 VirtualTutorial instal ubuntu 13.10 Virtual
Tutorial instal ubuntu 13.10 VirtualFajar Satrio
 
Tutorial instal ubuntu 12.10 virtual
Tutorial instal ubuntu 12.10 virtualTutorial instal ubuntu 12.10 virtual
Tutorial instal ubuntu 12.10 virtualFajar Satrio
 
Tutorial instal ubuntu 11.10 Virtual
Tutorial instal ubuntu 11.10 VirtualTutorial instal ubuntu 11.10 Virtual
Tutorial instal ubuntu 11.10 VirtualFajar Satrio
 
Tutorial instal ubuntu 10.10 virtual
Tutorial instal ubuntu 10.10 virtualTutorial instal ubuntu 10.10 virtual
Tutorial instal ubuntu 10.10 virtualFajar Satrio
 
Tutorial instal ubuntu 9.10 Virtual, Fajar Satrio
Tutorial instal ubuntu 9.10 Virtual, Fajar SatrioTutorial instal ubuntu 9.10 Virtual, Fajar Satrio
Tutorial instal ubuntu 9.10 Virtual, Fajar SatrioFajar Satrio
 
Tutorial instal ubuntu 8.04 virtual
Tutorial instal ubuntu 8.04 virtualTutorial instal ubuntu 8.04 virtual
Tutorial instal ubuntu 8.04 virtualFajar Satrio
 
Tutorial Instal windows 8 virtual
Tutorial Instal windows 8 virtualTutorial Instal windows 8 virtual
Tutorial Instal windows 8 virtualFajar Satrio
 
Instal windows 7 virtual
Instal windows 7 virtualInstal windows 7 virtual
Instal windows 7 virtualFajar Satrio
 
tutorial Instal windows xp
tutorial Instal windows xptutorial Instal windows xp
tutorial Instal windows xpFajar Satrio
 
makalah Cloud computing
makalah Cloud computingmakalah Cloud computing
makalah Cloud computingFajar Satrio
 
power point Cloud computing
power point Cloud computingpower point Cloud computing
power point Cloud computingFajar Satrio
 
fajar satrio android
fajar satrio androidfajar satrio android
fajar satrio androidFajar Satrio
 

More from Fajar Satrio (19)

Makalah Jaringan Komputer Modern
Makalah Jaringan Komputer ModernMakalah Jaringan Komputer Modern
Makalah Jaringan Komputer Modern
 
Tutorial instal ubuntu 14.04 Virtual
Tutorial instal ubuntu 14.04 VirtualTutorial instal ubuntu 14.04 Virtual
Tutorial instal ubuntu 14.04 Virtual
 
Tutorial instal ubuntu 13.10 Virtual
Tutorial instal ubuntu 13.10 VirtualTutorial instal ubuntu 13.10 Virtual
Tutorial instal ubuntu 13.10 Virtual
 
Tutorial instal ubuntu 12.10 virtual
Tutorial instal ubuntu 12.10 virtualTutorial instal ubuntu 12.10 virtual
Tutorial instal ubuntu 12.10 virtual
 
Tutorial instal ubuntu 11.10 Virtual
Tutorial instal ubuntu 11.10 VirtualTutorial instal ubuntu 11.10 Virtual
Tutorial instal ubuntu 11.10 Virtual
 
Tutorial instal ubuntu 10.10 virtual
Tutorial instal ubuntu 10.10 virtualTutorial instal ubuntu 10.10 virtual
Tutorial instal ubuntu 10.10 virtual
 
Tutorial instal ubuntu 9.10 Virtual, Fajar Satrio
Tutorial instal ubuntu 9.10 Virtual, Fajar SatrioTutorial instal ubuntu 9.10 Virtual, Fajar Satrio
Tutorial instal ubuntu 9.10 Virtual, Fajar Satrio
 
Tutorial instal ubuntu 8.04 virtual
Tutorial instal ubuntu 8.04 virtualTutorial instal ubuntu 8.04 virtual
Tutorial instal ubuntu 8.04 virtual
 
Tutorial Instal windows 8 virtual
Tutorial Instal windows 8 virtualTutorial Instal windows 8 virtual
Tutorial Instal windows 8 virtual
 
Instal windows 7 virtual
Instal windows 7 virtualInstal windows 7 virtual
Instal windows 7 virtual
 
tutorial Instal windows xp
tutorial Instal windows xptutorial Instal windows xp
tutorial Instal windows xp
 
MikroTik
MikroTikMikroTik
MikroTik
 
makalah Mikrotik
makalah Mikrotikmakalah Mikrotik
makalah Mikrotik
 
makalah Cloud computing
makalah Cloud computingmakalah Cloud computing
makalah Cloud computing
 
power point Cloud computing
power point Cloud computingpower point Cloud computing
power point Cloud computing
 
Penggunaan JQuery
Penggunaan JQueryPenggunaan JQuery
Penggunaan JQuery
 
penggunaan JQuery
penggunaan JQuerypenggunaan JQuery
penggunaan JQuery
 
Fajar Satrio Java
Fajar Satrio JavaFajar Satrio Java
Fajar Satrio Java
 
fajar satrio android
fajar satrio androidfajar satrio android
fajar satrio android
 

Recently uploaded

REFLEKSI MANDIRI_Prakarsa Perubahan BAGJA Modul 1.3.pdf
REFLEKSI MANDIRI_Prakarsa Perubahan BAGJA Modul 1.3.pdfREFLEKSI MANDIRI_Prakarsa Perubahan BAGJA Modul 1.3.pdf
REFLEKSI MANDIRI_Prakarsa Perubahan BAGJA Modul 1.3.pdfirwanabidin08
 
Kesebangunan Segitiga matematika kelas 7 kurikulum merdeka.pptx
Kesebangunan Segitiga matematika kelas 7 kurikulum merdeka.pptxKesebangunan Segitiga matematika kelas 7 kurikulum merdeka.pptx
Kesebangunan Segitiga matematika kelas 7 kurikulum merdeka.pptxDwiYuniarti14
 
Materi Strategi Perubahan dibuat oleh kelompok 5
Materi Strategi Perubahan dibuat oleh kelompok 5Materi Strategi Perubahan dibuat oleh kelompok 5
Materi Strategi Perubahan dibuat oleh kelompok 5KIKI TRISNA MUKTI
 
tugas 1 tutorial online anak berkebutuhan khusus di SD
tugas 1 tutorial online anak berkebutuhan khusus di SDtugas 1 tutorial online anak berkebutuhan khusus di SD
tugas 1 tutorial online anak berkebutuhan khusus di SDmawan5982
 
AKSI NYATA MODUL 1.2-1 untuk pendidikan guru penggerak.pptx
AKSI NYATA MODUL 1.2-1 untuk pendidikan guru penggerak.pptxAKSI NYATA MODUL 1.2-1 untuk pendidikan guru penggerak.pptx
AKSI NYATA MODUL 1.2-1 untuk pendidikan guru penggerak.pptxWirionSembiring2
 
Paparan Refleksi Lokakarya program sekolah penggerak.pptx
Paparan Refleksi Lokakarya program sekolah penggerak.pptxPaparan Refleksi Lokakarya program sekolah penggerak.pptx
Paparan Refleksi Lokakarya program sekolah penggerak.pptxIgitNuryana13
 
TUGAS GURU PENGGERAK Aksi Nyata Modul 1.1.pdf
TUGAS GURU PENGGERAK Aksi Nyata Modul 1.1.pdfTUGAS GURU PENGGERAK Aksi Nyata Modul 1.1.pdf
TUGAS GURU PENGGERAK Aksi Nyata Modul 1.1.pdfElaAditya
 
Modul Ajar Biologi Kelas 11 Fase F Kurikulum Merdeka [abdiera.com]
Modul Ajar Biologi Kelas 11 Fase F Kurikulum Merdeka [abdiera.com]Modul Ajar Biologi Kelas 11 Fase F Kurikulum Merdeka [abdiera.com]
Modul Ajar Biologi Kelas 11 Fase F Kurikulum Merdeka [abdiera.com]Abdiera
 
Dampak Pendudukan Jepang.pptx indonesia1
Dampak Pendudukan Jepang.pptx indonesia1Dampak Pendudukan Jepang.pptx indonesia1
Dampak Pendudukan Jepang.pptx indonesia1udin100
 
PPT Integrasi Islam & Ilmu Pengetahuan.pptx
PPT Integrasi Islam & Ilmu Pengetahuan.pptxPPT Integrasi Islam & Ilmu Pengetahuan.pptx
PPT Integrasi Islam & Ilmu Pengetahuan.pptxnerow98
 
JAWAPAN BAB 1 DAN BAB 2 SAINS TINGKATAN 5
JAWAPAN BAB 1 DAN BAB 2 SAINS TINGKATAN 5JAWAPAN BAB 1 DAN BAB 2 SAINS TINGKATAN 5
JAWAPAN BAB 1 DAN BAB 2 SAINS TINGKATAN 5ssuserd52993
 
Wawasan Nusantara sebagai satu kesatuan, politik, ekonomi, sosial, budaya, d...
Wawasan Nusantara  sebagai satu kesatuan, politik, ekonomi, sosial, budaya, d...Wawasan Nusantara  sebagai satu kesatuan, politik, ekonomi, sosial, budaya, d...
Wawasan Nusantara sebagai satu kesatuan, politik, ekonomi, sosial, budaya, d...MarwanAnugrah
 
Contoh Laporan Observasi Pembelajaran Rekan Sejawat.pdf
Contoh Laporan Observasi Pembelajaran Rekan Sejawat.pdfContoh Laporan Observasi Pembelajaran Rekan Sejawat.pdf
Contoh Laporan Observasi Pembelajaran Rekan Sejawat.pdfCandraMegawati
 
Dinamika Hidrosfer geografi kelas X genap
Dinamika Hidrosfer geografi kelas X genapDinamika Hidrosfer geografi kelas X genap
Dinamika Hidrosfer geografi kelas X genapsefrida3
 
Kelompok 1_Karakteristik negara jepang.pdf
Kelompok 1_Karakteristik negara jepang.pdfKelompok 1_Karakteristik negara jepang.pdf
Kelompok 1_Karakteristik negara jepang.pdfCloverash1
 
HARMONI DALAM EKOSISTEM KELAS V SEKOLAH DASAR.pdf
HARMONI DALAM EKOSISTEM KELAS V SEKOLAH DASAR.pdfHARMONI DALAM EKOSISTEM KELAS V SEKOLAH DASAR.pdf
HARMONI DALAM EKOSISTEM KELAS V SEKOLAH DASAR.pdfkustiyantidew94
 
soal AKM Mata Pelajaran PPKN kelas .pptx
soal AKM Mata Pelajaran PPKN kelas .pptxsoal AKM Mata Pelajaran PPKN kelas .pptx
soal AKM Mata Pelajaran PPKN kelas .pptxazhari524
 
Lembar Catatan Percakapan Pasca observasidocx
Lembar Catatan Percakapan Pasca observasidocxLembar Catatan Percakapan Pasca observasidocx
Lembar Catatan Percakapan Pasca observasidocxbkandrisaputra
 
Aksi nyata disiplin positif Hj. Hasnani (1).pdf
Aksi nyata disiplin positif Hj. Hasnani (1).pdfAksi nyata disiplin positif Hj. Hasnani (1).pdf
Aksi nyata disiplin positif Hj. Hasnani (1).pdfDimanWr1
 
PELAKSANAAN + Link2 Materi TRAINING "Effective SUPERVISORY & LEADERSHIP Sk...
PELAKSANAAN  + Link2 Materi TRAINING "Effective  SUPERVISORY &  LEADERSHIP Sk...PELAKSANAAN  + Link2 Materi TRAINING "Effective  SUPERVISORY &  LEADERSHIP Sk...
PELAKSANAAN + Link2 Materi TRAINING "Effective SUPERVISORY & LEADERSHIP Sk...Kanaidi ken
 

Recently uploaded (20)

REFLEKSI MANDIRI_Prakarsa Perubahan BAGJA Modul 1.3.pdf
REFLEKSI MANDIRI_Prakarsa Perubahan BAGJA Modul 1.3.pdfREFLEKSI MANDIRI_Prakarsa Perubahan BAGJA Modul 1.3.pdf
REFLEKSI MANDIRI_Prakarsa Perubahan BAGJA Modul 1.3.pdf
 
Kesebangunan Segitiga matematika kelas 7 kurikulum merdeka.pptx
Kesebangunan Segitiga matematika kelas 7 kurikulum merdeka.pptxKesebangunan Segitiga matematika kelas 7 kurikulum merdeka.pptx
Kesebangunan Segitiga matematika kelas 7 kurikulum merdeka.pptx
 
Materi Strategi Perubahan dibuat oleh kelompok 5
Materi Strategi Perubahan dibuat oleh kelompok 5Materi Strategi Perubahan dibuat oleh kelompok 5
Materi Strategi Perubahan dibuat oleh kelompok 5
 
tugas 1 tutorial online anak berkebutuhan khusus di SD
tugas 1 tutorial online anak berkebutuhan khusus di SDtugas 1 tutorial online anak berkebutuhan khusus di SD
tugas 1 tutorial online anak berkebutuhan khusus di SD
 
AKSI NYATA MODUL 1.2-1 untuk pendidikan guru penggerak.pptx
AKSI NYATA MODUL 1.2-1 untuk pendidikan guru penggerak.pptxAKSI NYATA MODUL 1.2-1 untuk pendidikan guru penggerak.pptx
AKSI NYATA MODUL 1.2-1 untuk pendidikan guru penggerak.pptx
 
Paparan Refleksi Lokakarya program sekolah penggerak.pptx
Paparan Refleksi Lokakarya program sekolah penggerak.pptxPaparan Refleksi Lokakarya program sekolah penggerak.pptx
Paparan Refleksi Lokakarya program sekolah penggerak.pptx
 
TUGAS GURU PENGGERAK Aksi Nyata Modul 1.1.pdf
TUGAS GURU PENGGERAK Aksi Nyata Modul 1.1.pdfTUGAS GURU PENGGERAK Aksi Nyata Modul 1.1.pdf
TUGAS GURU PENGGERAK Aksi Nyata Modul 1.1.pdf
 
Modul Ajar Biologi Kelas 11 Fase F Kurikulum Merdeka [abdiera.com]
Modul Ajar Biologi Kelas 11 Fase F Kurikulum Merdeka [abdiera.com]Modul Ajar Biologi Kelas 11 Fase F Kurikulum Merdeka [abdiera.com]
Modul Ajar Biologi Kelas 11 Fase F Kurikulum Merdeka [abdiera.com]
 
Dampak Pendudukan Jepang.pptx indonesia1
Dampak Pendudukan Jepang.pptx indonesia1Dampak Pendudukan Jepang.pptx indonesia1
Dampak Pendudukan Jepang.pptx indonesia1
 
PPT Integrasi Islam & Ilmu Pengetahuan.pptx
PPT Integrasi Islam & Ilmu Pengetahuan.pptxPPT Integrasi Islam & Ilmu Pengetahuan.pptx
PPT Integrasi Islam & Ilmu Pengetahuan.pptx
 
JAWAPAN BAB 1 DAN BAB 2 SAINS TINGKATAN 5
JAWAPAN BAB 1 DAN BAB 2 SAINS TINGKATAN 5JAWAPAN BAB 1 DAN BAB 2 SAINS TINGKATAN 5
JAWAPAN BAB 1 DAN BAB 2 SAINS TINGKATAN 5
 
Wawasan Nusantara sebagai satu kesatuan, politik, ekonomi, sosial, budaya, d...
Wawasan Nusantara  sebagai satu kesatuan, politik, ekonomi, sosial, budaya, d...Wawasan Nusantara  sebagai satu kesatuan, politik, ekonomi, sosial, budaya, d...
Wawasan Nusantara sebagai satu kesatuan, politik, ekonomi, sosial, budaya, d...
 
Contoh Laporan Observasi Pembelajaran Rekan Sejawat.pdf
Contoh Laporan Observasi Pembelajaran Rekan Sejawat.pdfContoh Laporan Observasi Pembelajaran Rekan Sejawat.pdf
Contoh Laporan Observasi Pembelajaran Rekan Sejawat.pdf
 
Dinamika Hidrosfer geografi kelas X genap
Dinamika Hidrosfer geografi kelas X genapDinamika Hidrosfer geografi kelas X genap
Dinamika Hidrosfer geografi kelas X genap
 
Kelompok 1_Karakteristik negara jepang.pdf
Kelompok 1_Karakteristik negara jepang.pdfKelompok 1_Karakteristik negara jepang.pdf
Kelompok 1_Karakteristik negara jepang.pdf
 
HARMONI DALAM EKOSISTEM KELAS V SEKOLAH DASAR.pdf
HARMONI DALAM EKOSISTEM KELAS V SEKOLAH DASAR.pdfHARMONI DALAM EKOSISTEM KELAS V SEKOLAH DASAR.pdf
HARMONI DALAM EKOSISTEM KELAS V SEKOLAH DASAR.pdf
 
soal AKM Mata Pelajaran PPKN kelas .pptx
soal AKM Mata Pelajaran PPKN kelas .pptxsoal AKM Mata Pelajaran PPKN kelas .pptx
soal AKM Mata Pelajaran PPKN kelas .pptx
 
Lembar Catatan Percakapan Pasca observasidocx
Lembar Catatan Percakapan Pasca observasidocxLembar Catatan Percakapan Pasca observasidocx
Lembar Catatan Percakapan Pasca observasidocx
 
Aksi nyata disiplin positif Hj. Hasnani (1).pdf
Aksi nyata disiplin positif Hj. Hasnani (1).pdfAksi nyata disiplin positif Hj. Hasnani (1).pdf
Aksi nyata disiplin positif Hj. Hasnani (1).pdf
 
PELAKSANAAN + Link2 Materi TRAINING "Effective SUPERVISORY & LEADERSHIP Sk...
PELAKSANAAN  + Link2 Materi TRAINING "Effective  SUPERVISORY &  LEADERSHIP Sk...PELAKSANAAN  + Link2 Materi TRAINING "Effective  SUPERVISORY &  LEADERSHIP Sk...
PELAKSANAAN + Link2 Materi TRAINING "Effective SUPERVISORY & LEADERSHIP Sk...
 

HTML5 MAKALAH

  • 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.