MAKALAH HTML5

HTML5

Tugas ini dibuat untuk memenuhi tugas Teknologi Informasi dan Komunikasi

Dosen Pengampu :

Septia Lutfi, M.Pd

Penyusun :

Dyah Noviati Kusumaningrum

1102412031

TEKNOLOGI PEDIDIKAN

FAKULTAS ILMU PENDIDIKAN

UNIVERSITAS NEGERI SEMARANG

2013

KATA PENGANTAR

Assalaamu'alaikum Warahmatullahi Wabarakatuh,

Puji syukur saya aturkan kehadirat Allah SWT atas ridho dan karunianya saya dapat menyelasaikan tugas pembuatan makalah ini. Saya juga ingin mengucapkan terima kasih kepada dosen pengampu  mata kuliah Teknologi informasi dan komunikasi yang telah memberikan pengarahan-pengarahan kepada saya dalam pembuatan makalah ini. Dengan adanya tugas ini saya dapat menambah wawasan dan pengetahan, oleh karena itu makalah ini dibuat tidak hanya untuk pengumpulan tugas semata tetapi juga untuk menambah pengetahuan para pembacanya.

Makalah ini berisi tentang gambaran tentang Html5. Materi dalam makalah ini telah saya uraikan menurut kemampuan yang saya miliki. Dalam makalah ini terdapat pengertian html5, sejarah, fitur-fitur yang terdapat pada html5, aplikasi html5 dan  pemanfaatanya serta kelebihan dan kekurangan dalam html5.

Dalam makalah ini tentunya masih banyak kekurangan. Untuk itu saya mengharap kritik dan saran dari pembaca guna penyempurnaan makalah ini. Semoga makalah ini dapat bermanfaat bagi para pembaca untuk menambah ilmu pengetahuan. Amin

Wassalaamu'alaikum Warahmatullahi Wabarakatuh.

Penyusun

DAFTAR ISI

Kata Pengantar................................................................................................... ii

Daftar Isi............................................................................................................ iii

Bab I      Pendahuluan

A.     Latar Belakang......................................................................................... 1

B.     Rumusan Masalah.................................................................................... 2

C.      Tujuan...................................................................................................... 2

Bab II     Pembahasan

A.        Konsep, pengertian dan fungsi HTML……………………………….3

B.         Definisi, sejarah dan tujuan HTML5…………………………………5

C.        Perbedaan HTML5, fitur-fitur HTML5 serta implementasi………... 9

D.        Kelebihan dan manfaat penggunaan HTML5………………………14

E.         Struktur dokumen dalam HTML 5……………………………….....23

Bab III   Penutup

A.     Kesimpulan.............................................................................................29

Daftar Pustaka………………………………………………………………. 30

BAB I

PENDAHULUAN

1.1             Latar belakang masalah

Seiring dengan berkembangnya teknologi informasi dan komunikasi yang semakin maju dari waktu ke waktu. Tuntutan jaman yang semakin maju ini yang membuat manusia modern tidak bisa lepas dari perangkat teknologi untuk mendukung aktivitasnya. Manusia modern saat ini dapat mencari informasi secara cepat, tepat, mudah dan murah. Kecanggihan teknologi menjadikan manusia dalam menggunakan alat komunikasi yang tidak terbatas oleh jarak, ruang dan waktu.

Informasi dan dokumen-dokumen yang tersaji dalam internet mempunyai bentuk dan variasi tampilan yang berbeda-beda. Proses mentransfer data atau dokumen dari web server ke browser perlu adanya protocol yang biasa digunakan adalah HTML. HTML digunakan untuk menyusun dan membentuk dokumen agar dapat ditampilkan pada program web browser dan sekaligus menjadi dasar bila akan menjelajah internet dan melihat halaman web secara menarik. Aneka software untuk mendesain web browserpun kini banyak bermunculan.

1.2             Rumusan Masalah

A.        Apa konsep, pengertian dan fungsi HTML itu sendiri?

B.        Dalam perkembangannya apa definisi, sejarah dan tujuan dibuatnya HTML5?

C.        Apa perbedaan HTML5 dari versi-versi HTML sebelumnya dan fitur-fitur apa saja yang terdapat dalam HTML5 serta implementasinya?

D.        Apa saja kelebihan dan manfaat penggunaan HTML5?

E.         Apa saja struktur dokumen dalam HTML 5?

1.3              Tujuan Pembahasan

a)      Untuk memenuhi salah satu tugas dari dosen mata kuliah “Teknologi Informasi dan Komunikasi”

b)      Untuk menambah wawasan dan ilmu pengetahuan khususnya dalam bidang teknologi informasi dan komunikasi.

c)      Dapat mengetahui gambaran HTML5 secara khusus.

           

BAB II

PEMBAHASAN

A.     Pengertian, konsep, sejarah dan fungsi HTML

Untuk memudahkan dalam memahami HTML5, sebaiknya  mempelajari pengertian, konsep dan fungsi dari HTML itu sendiri yang dijelaskan sebagai berikut :

Konsep HTML itu sendiri hampir mirip dengan sebuah bahasa pemrograman karena struktur yang dimilikinya dianggap terlalu sederhana, kode-kode dibaca oleh browser baris per baris, dari atas ke bawah. Tetapi sebenarnya pengertian HTML atau HyperText Markup Language adalah bahasa dari Worl Wide Web (www) yang dipergunakan utntuk menyusun dan membentuk dokumen agar dapat ditampilkan pada program web browser. HTML juga dapat disebut sebagai protocol yang digunakan untuk mentransfer data atau dokumen dari web server ke browser. HTML inilah yang menjadi dasar bila akan menjelajah internet dan melihat halaman web yang menarik.

Ada 2 fungsi utama dalam HTML yaitu :

1. Membentuk tata letak document, dalam hal ini menentukan jenis huruf, gambar, dan komponen dokumen lainnya.

2. Menentukan hubungan ke dokumen lain, HTML merupakan suatu bahasa pemrograman yang termasuk dalam kategori SGML (Standart Generalized Markup Language) dimana bentuknya merupakan standar ASCII yang berisi kode-kode untuk mengatur dokumen.

Saat ini terdapat banyak sekali HTML authoring (software atau tool yang digunakan untuk membuat atau mendesain halaman web), yang biasa digunakan seperti : MS-FrontPage, Netscape Composer, Macromedia Dreamweaver, Adobe GoLive, Adobe Pagemill, HotDog, HotMetal, HTML Easy, InContext Spider, dan lain sebagainya. Karena bentuk HTML mengikuti standar ASCII, maka file HTML dapat dibuat dengan menggunakan program editor bisa seperti Editor dari DOS, atau Notepaddari Microsoft Windows, MS Word dan lain sebagainya. Namun yang paling mudah adalah dengan menggunakan Notepad yang ada setiap kali kita menggunakan system operasi terutama windows.

Software lain yang digunakan adalah browser yang digunakan untuk menampilkan web page yang akan dihasilkan. Dua nama yang paling popular adalah Internet Explorer dan Netscape Navigator, keduanya merupakan browser yang umum digunakan dan mudah didapatkan, beberapa yang lain yang juga terkenal seperti Opera, GodZilla, Mozilla Firefox, dan sebagainya. Jadi, dengan menggunakan kombinasi program pembuat HTML dan program web browser, maka kita sudah dapat menayangkan informasi di internet.

Pada HTML digunakan hypertext link atau hubungan antara teks dan dokumen lain. Dengan demikian pembaca dokumen bisa melompat dari satu dokumen ke dokumen yang lain dengan mudah. Namun banyak kalangan umum yang menganggap bahwa HTML merupakan dokumen program meskipun tidak terstruktur. Yang jelas HTML merupakan bahasa yang menspesifikasi isi (content) suatu halaman web.

Fakta dalam HyperText menunjukan bahwa halaman web lebih tepat berupa teks yang dapat memuat multimedia, dan melakukan link dengan atau tanpa lompatan. Sedangkan Markup menunjuk ke fakta bahwa bekerja pada kebanyakan teks dengan simbol-simbol spasial (tags) yang mengidentifikasi struktur dan tipe dokumen.

Penjelajah web Internet dan formating hypertext sederhana yang ditulis kedalam berkas format ASCII agar dapat menghasilkan tampilan wujud yang terintegerasi. Dengan kata lain, berkas yang dibuat dalam perangkat lunak pengolah kata dan disimpan kedalam format ASCII normal sehingga menjadi home page dengan perintah-perintah HTML. Bermula dari sebuah bahasa yang sebelumnya banyak digunakan di dunia penerbitan dan percetakan yang disebut dengan SGML (Standard Generalized Markup Language),HTML adalah sebuah standar yang digunakan secara luas untuk menampilkan halaman web. HTML saat ini merupakan standar Internetyang didefinisikan dan dikendalikan penggunaannya oleh World Wide Web Consortium (W3C). HTML dibuat oleh kolaborasi Caillau TIM dengan Berners-lee robert ketika mereka bekerja di CERN pada tahun 1989 (CERN adalah lembaga penelitian fisika energi tinggi di Jenewa).

Tahun 1980, IBM memikirkan pembuatan suatu dokumen yang akan mengenali setiap elemen dari dokumen dengan suatu tanda tertentu. IBM kemudian mengembangkan suatu jenis bahasa yang menggabungkan teks dengan perintah-perintah pemformatan dokumen. Bahasa ini dinamakan Markup Langiage, sebuah bahasa yang menggunakan tanda-tanda sebagai basisnya. IBM menamakan sistemnya ini sebagai Generalized Markup Language atau GML.

Tahun 1986, ISO menyatakan bahwa IBM memiliki suatu konsep tentang dokumen yang sangat baik, dan kemudian mengeluarkan suatu publikasi ( ISO 8879 ) yang menyatakan markup language sebagai standar untuk pembuatan dokumen-dokumen. ISO membuat bahasa ini dari GML milik IBM, tetapi memberinya nama lain, yaitu SGML ( Standard Generalized Markup Language ).

ISO dalam publikasinya meyakini bahwa SGML akan sangat berguna untuk pemrosesan informasi teks dan sistem-sistem perkantoran. Tetapi diluar perkiraan ISO, SGML dan terutama subset dari SGML, yaitu HTML juga berguna untuk menjelajahi internet. Khususnya bagi mereka yang menggunakan World Wide Web. Versi terakhir dari HTML adalah HTML 4.01, meskipun saat ini telah berkembang XHTMLyang merupakan pengembangan dari HTML.

B.     Definisi, Sejarah dan Tujuan HTML5

Pada penjelasan konsep, pengertian serta fungsi HTML yang sudah dijelaskan sebelumnya diatas. Sesuai dengan gambaran tersebut dapat dipahami bahwa 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 hingga bulan Juni 2011 masih dalam pengembangan.

HTML5 merupakan hasil proyek dari W3C (World Wide Web Consortium dan WHATWG ( Web Hypertext Application Technology Working Group ). Kelompok Kerja Teknologi Aplikasi Web Hyperteks (Web Hypertext Application Technology Working Group, WHATWG) mulai membuat standar baru ini pada tahun 2004 ketika Konsortium W3C sedang fokus pada 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 telah dikenal luas oleh para pengembang web sejak lama, HTML5 baru mencuat pada April 2010 setelah CEO Apple Inc., Steve Jobs, mengatakan bahwa dengan pengembangan HTML5, “Adobe Flash sudah tidak dibutuhkan lagi untuk menyaksikan video atau menyaksikan konten apapun di web.”

Proses standardisasi W3C. Kelompok kerja untuk teknologi aplikasi web hypertext (WHATWG) mulai menspesifikasikan HTML5 pada bulan juni 2004 dengan nama Web Applications 1.0., hingga pada bulan maret 2010 spesifikasi ini masuk ke bagian draft standar di WHATWG, dan ke dalam bagian pengurusan draft di W3C. Ian Hickson mewakili Google ,Inc menjadi editor HTML5.

Pada tahun 2007 Spesifikasi HTML5 diadopsi sebagai pekerjaan permulaan untuk grup baru yang mengurus HTML di World Wide Web Consorsium (W3C). Grup ini pertama kali mempublikasikan hasil draft pekerjaan pertama mereka pada tanggal 22 januari 2008. Spesifikasi ini berstatus dalam tahap pengerjaan, dan diperkirakan akan tetap demikian selama bertahun-tahun, meskipun sebagian dari HTML5 sudah dalam tahap penyelesaian dan diimplementasikan pada penjelajah web sebelum keseluruhan spesifikasinya mencapai status rekomendasi final.
Berdasarkan pada jadwal kerja W3C, HTML5 diperkirakan menjadi kandidat rekomendasi pada akhir tahun 2010. Namun, publikasi pertama draft HTML 5 meleset selama 8 bulan. Permintaan dokumen terakhir dan tahap kandidat rekomendasi diharapkan dapat dicapai pada tahun 2008, tetapi hingga bulan Juli 2010 HTML 5 masih dalam tahapan draft pengerjaan di W3C. WHATWG telah meminta penyelesaian terakhir untuk HTML5 sejak bulan oktober tahun 2009.
Editor HTML5, Ian Hickson, berharap spesifikasi HTML5 dapat mencapai tahap kandidat rekomendasi pada tahun 2012 . Kriteria di W3C agar sebuah spesifikasi dapat berstatus – Direkomendasikan – adalah “yang kedua: 100% selesai dan penerapannya dapat dilakukan pada dua atau lebih sistem yang berbeda” . Pada wawancaranya dengan TechRepublic, Hickson memperkirakan hal ini baru akan terjadi pada tahun 2022 atau setelahnya. Meski demikian, banyak bagian dari spesifikasi sudah stabil dan telah dapat diterapkan pada produk:  markup.

Pada HTML 5 diperkenalkan beberapa elemen baru dan atribut yang merefleksikan tipikal penggunaan website modern. Beberapa diantaranya adalah pergantian yang bersifat semantik pada blok yang umum digunakan: yaitu elemen dan inline, sebagai contoh (sebagai blok navigasi website) dan (biasanya dikaitkan pada bagian bawah suatu website atau baris terakhir dari kode html). Banyak elemen lain yang memberikan kegunaan baru melalui antar muka yang telah distandarkan, seperti elemen multimedia dan . Beberapa elemen yang telah ditinggalkan juga ditiadakan, termasuk elemen presentasi semata seperti dan , yang sebenarnya dapat dikerjakan menggunakan Cascading Style Sheet (CSS).
APL baru.

Untuk menambah keluwesan pemformatan, pada HTML5 telah dispesifikasikan pengkodean application programming interfaces (APIs). antarmuka document object model (DOM) yang ada dikembangkan dan fitur de facto didokumentasikan. Beberapa APIs terbaru pada HTML5 antara lain : Elemen canvas, sebagai mode untuk menggambar object dua dimensi (2D). Lihat spesifikasi 1.0 untuk canvas 2D.
Timed media playback. Media penyimpanan luring (aplikasi web luring). Lihat Web Storage Penyuntingan dokumen Drag-and-Drop Cross-document messaging. Manajemen sejarah kunjungan penjelajah web
Tipe MIME dan penanggung jawab protokol registrasi.
Tidak semua teknologi di atas dimasukkan pada spesifikasi HTML5 W3C, meski teknologi tersebut telah termaktub dalam spesifikasi milik WHATWG HTML. Beberapa teknologi yang juga terkait namun tidak dijadikan bagian dalam spesifikasi HTML5 W3C dan WHATWG HTML5 adalah Geolocation Web SQL Database, media penyimpanan database lokal. API Database terindeks, mode penyimpanan hierarkis key-value (WebSimpleDB).

Tujuan utama pengembangan HTML5 adalah untuk memperbaiki teknologi HTML agar mendukung teknologi multimedia terbaru, mudah dibaca oleh manusia dan juga mudah dimengerti oleh mesin.

            Berikut tujuan dibuatnya HTML5 :

         Fitur baru harus didasarkan pada HTML, CSS, DOM, dan JavaScript

         Mengurangi kebutuhan untuk plugin eksternal ( Seperti Flash )

         Penanagan kesalahan yang lebih baik

         Lebih markup untuk menggantikan scripting

         HTML5 merupakan perangkat mandiri

         Proses pembangunan dapat terlihat untuk umum

C.     Perbedaan HTML5, Aplikasi, Fitur-Fitur dalam HTML5 dan Implementasinya

Beberapa peraturan untuk HTML5 telah ditubuhkan:

a)                  Ciri-ciri baru perlu berdasarkan HTML, CSS, DOM, dan JavaScript   

b)                  Mengurangkan keperluan untuk plugins luaran (seperti Flash)

c)                  Kesilapan yang lebih baik pengendalian

d)                  Markup Lebih untuk menggantikan skrip

e)                  HTML5 harus peranti bebas

f)                    Proses pembangunan perlu dilihat kepada orang awam

Aplikasi HTML5

Dengan HTML5, pembangunan aplikasi web adalah lebih mudah berbanding sebelum ini :

a)      Penyimpanan data Lokal

b)      Fail akses tempatan

c)      Tempatan SQL pangkalan data

d)      Cache aplikasi

e)      Javascript pekerja

f)        XHTML HttpRequest 2

Tag yang ada pada HTML5 diantaranya ;

Tag Element merupakan dasar untuk membuat struktur suatu website atau blog. Pada revisi HTML yang kelima ini (HTML5) ada beberapa Tag Element yang mengalami perubahan. Untuk lebih jelasnya bisa dilihat dibawah ini:

Tag	Deskripsi
<!–…–>	menentukan komentar
<!DOCTYPE>	menentukan jenis document
<a>	menentukan hyperlink
<abbr>	menentukan ringkasan/singkatan
<acronym>	tidak di dukung di html5
<address>	menentukan alamat
<applet>	tidak di dukung di html5
<area>	menentukan area
<article>New	menentukan artikel
<aside>New	menentukan content selain content halaman
<audio>New	menentukan audio
<b>	menentukan text tebal
<base>	menentukan url dasar untuk semua link pada halaman
<basefont>	tidak di dukung di html5
<bdo>	menentukan arah tampilan text
<big>	tidak di dukung di html5
<blockquote>	menentukan kutipan
<body>	menentukan element body
<br>	menentukan baris baru
<button>	menentukan document button/tombol
<canvas>New	menentukan document grafis
<caption>	menentukan document table caption
<center>	tidak di dukung di html5
<cite>	menentukan kutipan
<code>	menentukan text kode komputer
<col>	menentukan atribut untuk kolom table
<colgroup>	menentukan kolom table
<command>New	menentukan perintah tombol
<datalist>New	menentukan dropdown list
<dd>	menentukan definisi deskripsi
<del>	menentukan text yang di hapus
<details>New	menentukan suatu elemen
<dialog>New	menentukan dialog (conversation)
<dfn>	menentukan definition term
<dir>	tidak di dukung di html5
<div>	menentukan bagian dalam suatu document
<dl>	menentukan daftar
<dt>	menentukan istilah
<em>	menentukan text rapat
<embed>New	menentukan external content
<fieldset>	menentukan fieldset
<figure>New	menentukan isi media, dan keterangan
<font>	tidak di dukung di html5
<footer>New	menentukan bagian footer
<form>	menentukan formulir
<frame>	tidak di dukung di html5
<frameset>	tidak di dukung di html5
<h1> sampai <h6>	menentukan header
<head>	menentukan informasi tentang document
<header>New	menentukan sebuah header untuk bagian suatu halaman
<hgroup>New	menentukan informasi tentang bagian sebuah document
<hr>	menentukan garis horisontal
<html>	menentukan document html
<i>	menentukan text italic
<iframe>	menentukan inline sub frame
<img>	menentukan gambar
<input>	menentukan input
<ins>	menentukan text yang disisipkan
<keygen>New	menentukan sebuah kunci yang dihasilkan dalam bentuk
<kbd>	menentukan text keyboard
<label>	menentukana label untuk form
<legend>	menentukan judul di fieldset
<li>	menentukan list
<link>	menentukan refrensi sumber
<map>	menentukan peta gambar
<mark>New	menentukan text yang ditandai
<menu>	menentukan daftar menu
<meta>	menentukan meta information
<meter>New	menentukan ukuran yang sudah di tetapkan
<nav>New	menentukan navigation link
<noframes>	tidak di dukung di html5
<noscript>	menentukan bagian noscript
<object>	menentukan sebuah object
<ol>	menentukan daftar angka
<optgroup>	menentukan grup pilhan
<option>	menentukan drop-down option
<output>New	menentukan beberapa jenis output
<p>	menentukan paragraph
<param>	menentukanparameter untuk sebuah objeck
<pre>	menentukan text ke format awal
<progress>New	menentukan kemajuan suatu tugas apapun
<q>	menentukan kutipan pendek
<rp>New	digunakan untuk menentukan apakah browser mendukung ruby
<rt>New	menjelaskan tentanf penngunaan ruby
<ruby>New	menentukan ruby annotations.
<s>	tidak di dukung di html5
<samp>	menentukan sample computer code
<script>	menentukan script
<section>New	menentukan section
<select>	menentukan selectable list
<small>	menentukan text kecil
<source>New	menentukan media resources
<span>	menentukan bagian dalam sebuah document
<strike>	tidak di dukung di html5
<strong>	menentukan text pekat/tebal
<style>	menentukan style untuk css
<sub>	menentukan subscripted text lawan pangkat
<sup>	menentukan superscripted text pangkat
<table>	menentukan table
<tbody>	menentukan table body
<td>	menentukan table cell
<textarea>	menentukan text area
<tfoot>	menentukan table footer
<th>	menentukan table header
<thead>	menentukan table header
<time>New	menentukan date/time
<title>	menentukan judul document
<tr>	menentukan baris table
<tt>	tidak di dukung di html5
<u>	tidak di dukung di html5
<ul>	menentukan daftar
<var>	menentukan variable
<video>New	menentukan video
<xmp>	tidak di dukung di html5

Pengembangan pada HTML 5 meliputi fitur - fitur yang telah di perbaharui dan diganti dengan yang lebih baik seperti :

•       Canvas

Pada HTML 5 ini akan memberikan satu opsi tambahan: canvas. Seperti namanya, canvas adalah media yang bisa dicorat-coret langsung. Tidak lagi perlu memuat plugin khusus. Cukup tambahkan <canvas> dan javascript maka kita sudah bisa menggambar langsung di halaman web.

•       Video dan Audio

Pada HTML5  ada tag <audio> dan <video> di HTML 5. Jadi tidak perlu lagi menempelkan flash untuk sekedar memutar audio. Format video yang didukung akan bervariasi terhadap browser.

•       Local Storage

 Local Storage untuk browser akan diakomodasi sebagai standard dalam HTML 5. Aplikasi bisa menyimpan data dalam jumlah lebih besar dari biasanya tanpa harus mengimplementasikan trik dengan cookie atau Flash

•       Web Workers

Pada web workers javascript bisa dipakai untuk melakukan beberapa proses sekaligus tanpa harus menghambat proses terkait UI dengan mengunakan fitur threading pada salah satu fitur web working. Jadi web kita tidak akan lambat lagi.

•       Semantics

Akan ada tag khusus untuk navigasi, section, footer, dll. Tag yang kaya semantic seperti ini pasti akan lebih bermanfaat dari pada tag yang hanya punya informasi format dan layout saja. Dan bagi mesin, HTML5 akan jadi lebih bisa dimengerti.

D.    Kelebihan dan Manfaat serta Kekurangan Penggunaan HTML5

Format HTML5 populer karena kompatibel dengan semua browser. Bahkan, jutaan pengguna internet menggunakan browser yang mendukung format HTML, termasuk Opera, Safari, Chrome, dan Firefox. Internet explorer juga mendukung fitur HTML5 tambahan. Telah ada perdebatan sengit seputar format Flash dan HTML5 dengan Apple menyatakan mereka tidak akan menggunakan Flash karena sudah usang dibandingkan dengan HTML5. Kebanyakan pengembang berupaya untuk memperbaiki format HTML untuk digunakan pada situs web mereka.

Manfaat dan kelebihan HTML5 antara lain :

·        Dukungan suara dan video

pengembang web bekerja tanpa lelah untuk membuat software yang streaming video, animasi layar dan mengintegrasikan dengan situs web Jaringan pribadi seperti Facebook dan Twitter. Dalam pencarian mereka untuk membuat aplikasi gambar dan video mereka harus belajar dan menerapkan alat-alat, termasuk Silverlight dan Flex atau tool JavaScript lainnya. Namun, ha ini meningkatkan waktu dan kompleksitas untuk mengembangkan Aplikasi Web umum dan perangkat lunak. Dengan dukungan HTML, audio dan embedding video mungkin, serta grafik dan gambar berkualitas.

·        Peningkatan membentuk elemen objek

Format HTML5 juga menawarkan bentuk ditingkatkan untuk mencari kotak, input teks dan bidang lain yang relevan dan menawarkan validasi data yang mudah dan interaksi dengan elemen halaman serta perbaikan yang berarti lainnya.

·        Geo-Lokasi

HTML5 mendukung fitur geo-lokasi canggih, terlepas dari apakah yang diberikan oleh GPS atau tidak, secara langsung diterapkan pada semua browser HTML5 kompatibel. Lintang Google pada iPhone adalah contoh terbaik dari Geo-lokasi. Aplikasi geo-lokasi benar-benar platform independen.

·        User-friendly interface

Format HTML5 juga fitur baru dan lebih baik Database API umum digunakan secara lokal. Sederhananya, ia menyediakan penyimpanan yang jelas database yang memberikan pengembang kesempatan untuk menyimpan atau menyimpan data terstruktur. Database ini digunakan ketika Anda ingin menyimpan belanja produk keranjang untuk situs belanja secara online.

Kekurangan HTML5 adalah :

HTML5 tidak dapat diandalkan dalam hal format karena web browser yang berbeda karena mereka tidak mendukung salah satu format tunggal. diambil dari situs orang pandai cerita

Elemen dalam HTML5

HTML5

01	<!DOCTYPE html>
02	<html lang="en">

03	<head>
04	<meta charset="UTF-8">

05	<title></title>
06	<style></style>

07	</head>
08	<body>

09	<header>
10	<h1>A Main Title</h1>

11	</header>
12	<section></section>

13	<aside></aside>
14	<footer></footer>

15	<script></script>
16	</body>

17

</html>

Struktur elemen HTML5 lebih sederhana dan semantic dengan digunakannya tag-tag baru seperti header, footer, section dlsb. Struktur halaman seperti ini tentu mempermudah developer.

ELEMEN HTML5 YANG SERING DIGUNAKAN:

Diantara sekian banyak elemen/tag baru yang diperkenalkan pada HTML5, mari kit apelajari beberapa elemen yang paling sering digunakan untuk membuat website pada umumnya.

<header>

Elemen header sebagaimana dengan terjemahannya yang berkaitan dengan “kepala” memiliki arti atas, bagian atas dari dokumen, layout dlsb. Di dalam header ini bisa saja berisi elemen lain seperti <hgroup>, <h1> sampai <h6>, <nav>, metadata dlsb. Juga berisi judul halaman dan subjudul atau heading dan sub heading. contoh:

1	<header>
2	<h1>This Is Indonesia</h1>

3	<p>The Country of Beauty</p>
4	<p>Kamis, <time datetime="2012-03-29">29 Maret 2012</time></p>

5

</header>

<hgroup>

Elemen <hgroup> digunakan untuk title dan subtitle dengan tag heading seperti <h1>-<h6>. Langsung pada contoh untuk lebih jelasnya:

1	<hgroup>
2	<h1>Judul Utama</h1>

3	<h2>Subjudul atau Judul Alternatif</h2>
4	</hgroup>

Tunggu dulu, kapan sebaiknya menggunakan <header> dan <hgroup>? Dari deskripsi dua elemen diatas, apabila kita memliki elemen judul dan subjudul yang hanya menggunakan tag heading (<h1>-<h6>) maka gunakan <hgroup>. Mari kita lihat contoh penggunaan <header> dan <hgroup> dalam satu halaman.

1	<header>
2	<hgroup>

3	<h1>Review Laskar Pelangi</h1>
4	<h2>Cerita Masa Kecil yang Menggugah Hati</h2>

5	</hgroup>
6	<p><time datetime="2012-03-29">29 Maret 2012</time> oleh Amalia Amanda</p>

7

</header>

<nav>

Elemen baru ini digunakan untuk menu navigasi. <nav> dapat digunakan diluar maupun didalam elemen lainnya, seperti didalam <aside> atau <header> maupun <footer>.
Misalnya:

1	<nav>
2	<ul>

3	<li><a href="#">Home</a></li>
4	<li><a href="#">About</a></li>

5	<li><a href="#">Portfolio</a></li>
6	<li><a href="#">Contact</a></li>

7	</ul>
8	</nav>

<section>

Seperti <div> yang berfungsi sebagai box atau pengelompokan beberapa elemen, akan tetapi sebenernya tidak sama dengan <div>. section adalah elemen yang digunakan untuk ngelompokkan beberapa elemen yang sejenis.
Misalnya kita akan menampilkan beberapa artikel dalam satu halaman. Maka kita bisa gunakan tag section. Contoh bisa dilihat setelah penjelasan tag article.

<article>

Tag ini digunakan untuk menampilkan satu artikel penuh dalam halaman html. Untuk memepermudah pemahaman, bayangkan saja perngertian dari artikel. Artikel biasanya terdiri dari Judul, mungkin sub judul, catatan dan deskripsi.
Contoh pengguaan tag article sebagaimana pada contoh berikut, sekaligus menunjukkan fungsi dari tag section.

01	<section>
02	<h1>Artikel Terbaru</h1>

03	<article>
04	<h2>Review Laskar Pelangi</h2>

05	<small>Ditulis pada <time datetime="2012-03-29">29 Maret 2012</time> oleh Amalia Amanda</small>
06	<p>Jelly beans cake cotton candy sweet chocolate candy canes sesame snaps. Sweet roll liquorice ice cream tart chocolate bar gingerbread chupa chups wypas. Gummies ice cream tiramisu bonbon. Gummies sugar plum jelly beans. Pudding croissant jelly-o marshmallow candy wypas jelly-o.</p>

07	<p>Cupcake sesame snaps pie candy canes soufflé. Brownie tart jelly. Wypas cheesecake danish candy chupa chups cookie cheesecake. Tiramisu sugar plum bear claw wafer faworki chocolate fruitcake. Sugar plum wafer jujubes. Caramels powder cotton candy dragée marzipan apple pie soufflé wypas dragée. Muffin cookie macaroon danish marzipan chocolate bar powder chocolate cake chocolate bar.</p>
08	</article>

09	<article>
10	.. artikel lainnya ..

11	</article>
12	<article>

13	.. artikel lainnya ..
14	</article>

15	<article>
16	.. artikel lainnya ..

17	</article>
18	</section>

<footer>

Tag <footer>, berlawanan arti dengan tag <header>. Tag ini memang digunakan di bagian bawah sebuah halaman html dokumen maupun didalam elemen html. Isi dari tag <footer> bisa berupa info konten seperti copyright, author website atau navigasi.

1	<footer>
2	Copyright © 2012 Website Name. All rights reserved.

3

</footer>

Update: Makna semantik dari elemen-elemen baru html5 ini pada dasarnya lebih bermakna sebagai fungsi, bukan mutlak posisi. Maksudnya adalah misalnya tag <header> dan <footer> tidak melulu harus terletak pada bagian paling atas dan bawah dokumen html, meski penggunaan pada umumnya memang demikian. Akan tetapi bisa saja terletak di dalam elemen lain, kecuali di dalam tag <header> maupun <footer>. 

<figure> dan <figcaption>

Menampilkan gambar dapat memanfaatkan tag <figure>, sedangkan tag <figcaption> adalah caption dari gambar tersebut. Jika mengkiuti aturan semantik yang sebenarnya <figure> ini digunakan untuk menampilkan gambar dalam suatu artikel, dimana gambar terbut berkaitan/ada hubungannya dengan konten artikel.

Maksudnya bila dalam artikel kita kita taruh gambar untuk iklan (yang artinya tidak berkaitan dengan isi artikel) sebaiknya tidak menggunakan tag <figure>.

1	<figure>
2	<img alt="Laskar Pelangi" src="images/laskar_pelangi.jpg" />

3	<figcaption>
4	<p>Laskar Pelangi, sebuah cerita indah</p>

5	</figcaption>
6	</figure>

Dari sekian tag-tag diatas masih banyak elemen-elemen baru yang dikenalkan pada HTML5 ini. Akan tetapi secara umum, yang kita sebutkan diatas adalah elemen yang paling sering digunakan. Karena tag-tag diatas adalah agar website yang dibangun memiliki struktur yang semantik, maka sebaiknya, sebagai developer kita mamnfaatkan fungsi tersebut.

Sebelum HTML5 dikenalkan, kita sering akrab dengan penggunaan <div id=”header”>, <div id=”footer”>, <div class=”article”>, <div class=”nav”> dlsb. Dengan adanya tag-tag HTML5 yang baru diatas, upaya untuk membuat struktur website yang lebih semantik menjadi lebih sederhana dan mudah.

Kesalahan penggunaan tag-tag tersebut diatas tidak menimbulkan error yang dapat menjadikan html kita tidak dapat dirender / ditampilkan dengan baik, hanya saja tidak semantik. Perlu diingat sekali lagi bahwa tujuan dari diterbitkannya elemen-elemen baru diatas adalah untuk memenuhi tujuan: website yang semantik.

E.     Struktur Dokumen HTML5

Layaknya dokumen standar lainnya, HTML5 juga memiliki struktur tertentu. Secara garis besar, struktur dokumen HTML5 cuma terdiri dari dua bagian, yaitu head dan body. Namun tentunya ada beberapa detail lain yang perlu diperhatikan juga.

Bagian head diawali dengan tag <head> dan ditutup dengan pasangannya, yaitu </head>. Bagian body diapit oleh tag <body> dan </body>. Bagian head dan body tersebut harus diapit lagi oleh tag <html> dan </html>. Dan jangan lupa, di baris paling awal harus ada deklarasi dokumen HTML sebagai berikut:

<!DOCTYPE html>

Jadi secara lengkap, struktur dokumen HTML5 terlihat seperti Listing 1. Listing 1 ini tidak ditujukan untuk dijalankan pada browser, melainkan hanya menunjukkan struktur dokumen HTML5 saja.

Bagian Head

Bagian head HTML5 digunakan untuk menyimpan berbagai informasi mengenai isi dokumen tersebut. Paling sedikit, bagian head harus mengandung judul dokumen. Judul dokumen ini diapit oleh tag <title> dan </title> serta akan ditampilkan pada bagian title bar browser.

Selain judul dokumen, bagian head dapat mengandung informasi-informasi berikut:

• Metadata: berisi berbagai data tambahan tentang dokumen HTML5 seperti nama pengarang/penulis, tanggal publikasi, deskripsi isi dokumen, kata kunci, dan lain-lain. Informasi ini dinyatakan oleh tag <meta> saja, tanpa tag penutup </meta>.

• Base URL: menentukan basis lokasi untuk link-link yang ada pada dokumen. Informasi ini dinyatakan oleh tag <base> saja, tanpa tag penutup </base>.

• Link: menentukan link ke dokuman lain yang terkait erat dengan dokumen HTML5, misalnya skrip CSS yang digunakan dalam desain halaman web. Informasi ini dinyatakan oleh tag <link> saja, tanpa tag penutup </link>.

• Objek: berisi informasi mengenai objek yang mungkin ada pada dokumen HTML5. Objek yang mungkin terkandung pada dokumen HTML5 antara lain adalah video, audio, dan animasi flash. Informasi ini dinyatakan dengan diapit oleh tag <object> dan </object>.

• Skrip: berisi informasi mengenai skrip pemrograman yang mungkin ada pada dokumen HTML5. Skrip pemrograman ini umumnya bersifat client-side seperti JavaScript. Informasi ini dinyatakan dengan diapit oleh tag <script> dan </script>.

• Style: berisi informasi mengenai desain halaman web dalam format CSS yang langsung dituliskan di bagian head, bukan pada dokumen terpisah. Jika hendak dituliskan pada dokumen terpisah, gunakan link. Informasi ini dinyatakan dengan diapit oleh tag <style> dan </style>.

Informasi yang ada pada bagian head ini nantinya akan dibahas seiring dengan makin dalamnya pembahasan mengenai HTML5 ini. Sementara ini yang akan lebih banyak digunakan hanya tag <title> saja.

Bagian Body

Bagian body HTML5 merupakan bagian yang nantinya diterjemahkan dan ditampilkan oleh browser. Di bagian inilah terkandung berbagai tag yang menyatakan desain dokumen HTML. Jadi bisa dibayangkan pastilah akan banyak terdapat tag HTML yang bisa digunakan di bagian ini.

Yang pertama adalah paragraf. Sebuah dokumen yang terstruktur dengan baik pastilah terdiri dari beberapa paragraf. Untuk memisahkan antara satu paragraf dengan paragraf yang lain digunakan tag <p>. Tag ini harus ditutup dengan pasangannya, yaitu </p>.

Untuk sekedar ganti baris tanpa ganti paragraf, digunakan tag <br>. Karena tag ini tidak memiliki pasangan maka ditulis dengan <br />. Ganti baris pada dokumen HTML5 perlu diberi tag sendiri karena meski pada kode HTML-nya ganti baris tetapi browser tidak akan menampilkannya pada baris terpisah.

Untuk memberikan format tampilan tertentu terhadap teks, tersedia beberapa tag berikut:

• <b> dan </b> untuk menampilkan teks secara tebal.

• <i> dan </i> untuk menampilkan teks secara miring.

• <u> dan </u> untuk menampilkan teks dengan garis bawah.

• <font> dan </font> untuk menentukan jenis font.

• <img /> untuk menampilkan gambar.

• <hr /> untuk menampilkan garis horisontal.

Dalam menuliskan dokumen HTML5, yang sangat perlu diperhatikan adalah letak tag, jangan sampai tag pembuka dan penutup tumpang tindih. Berikut adalah contoh yang benar:

<b><i>teks</i></b>

Sementara yang ini adalah contoh yang salah:

<b><i>teks</b></i>

Jika dokumen HTML yang ingin dibuat mengandung struktur yang terbagi-bagi menjadi judul bab, subbab, sub-subbab, dan seterusnya hingga kedalaman enam level, kamu bisa menggunakan tag <h1> hingga <h6> (beserta tag penutup masing-masing) untuk menuliskan judul-judul bab tersebut. Huruf h pada tag tersebut merupakan singkatan dari header.

Contohnya diberikan pada Listing 3 yang diberi nama header. html dan hasilnya diperlihatkan pada Gambar 2. Perhatikan bahwa setiap level header memiliki ukuran font berbeda.

Listing 1
<!DOCTYPE html>
<html>
<head>
…isi bagian head…
</head>
<body>
…isi bagian body…
</body>
</html>

Listing 2
<!DOCTYPE html>
<html>
<head>
<title>Struktur Dokumen HTML5</title>
</head>
<body>
<h1>Aku adalah dokumen HTML5</h1>
<p>Ini adalah paragraf pertama yang ada di dokumen ini. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla adipiscing, lectus a vulputate ultricies, nisl nisi aliquam mauris, et convallis libero ligula id mi.</p>
<hr />
<p>Ini adalah paragraf kedua. <br />
<b>Ini nampak tebal.</b><br />
<i>Ini nampak miring.</i><br />
<u>Ini bergaris bawah.</u><br />
Ini akhir paragraf kedua.</p>
</body>

Listing 3
<!DOCTYPE html>
<html>
<head>
<title>Struktur Dokumen HTML5</title>
</head>
<body>
<h1>Judul Bab</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla adipiscing, lectus a vulputate ultricies, nisl nisi aliquam mauris, et convallis libero ligula id mi.</p>
<br />
<h2>Judul SubBab</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla adipiscing, lectus a vulputate ultricies, nisl nisi aliquam mauris, et convallis libero ligula id mi.</p>
<br />
<h3>Judul Sub-SubBab</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Nulla adipiscing, lectus a vulputate ultricies,
nisl nisi aliquam mauris, et convallis libero ligula id mi.</p>
</body>
</html>

BAB III

PENUTUP

A.     Kesimpulan

HTML atau HyperText Markup Language adalah bahasa dari World Wide Web (www) yang dipergunakan utntuk menyusun dan membentuk dokumen agar dapat ditampilkan pada program web browser. HTML juga dapat disebut sebagai protocol yang digunakan untuk mentransfer data atau dokumen dari web server ke browser. 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.

HTML5 merupakan hasil proyek dari W3C (World Wide Web Consortium dan WHATWG ( Web Hypertext Application Technology Working Group ). Adapun tujuan utama pengembangan HTML5 adalah untuk memperbaiki teknologi HTML agar mendukung teknologi multimedia terbaru, mudah dibaca oleh manusia dan juga mudah dimengerti oleh mesin.

Pada HTML 5 diperkenalkan beberapa elemen baru dan atribut yang merefleksikan tipikal penggunaan website modern. Beberapa diantaranya adalah pergantian yang bersifat semantik pada blok yang umum digunakan: yaitu elemen dan inline. Selain elemen baru juga terdapat fitur-fitur yang diperbarui atau disempurnakan.

Layaknya dokumen standar lainnya, HTML5 juga memiliki struktur tertentu. Secara garis besar, struktur dokumen HTML5 cuma terdiri dari dua bagian, yaitu head dan body.

DAFTAR PUSTAKA

http://freebugs.blogspot.com/2012/12/tag-elemen-lengkap-untuk-html5.html diakses pada tanggal 22 Oktober 2013 pukul 18.09

http://id.wikipedia.org/wiki/HTML5 diakses pada tanggal 22 Oktober 2013 pukul 20.00

http://id.wikipedia.org/wiki/HyperText_markup_language diakses pada tanggal 22 Oktober 2013 pukul 19.56

http://www.pcplus.co.id/2013/04/tutorial/lebih-dekat-dengan-struktur-dokumen-html5/ diakses pada tanggal 23 Oktober 2013 pukul 20.39

http://mousetik.blogspot.com/2013/03/kelebihan-dan-manfaat-html5.html diakses pada tanggal 20 Oktober 2013 pukul 11.39

http://othcreative.blogspot.com/2011/04/fitur-fitur-baru-di-html5.html diakses pada tanggal 20 Oktober 2013 pukul 15.00

http://mkr-site.blogspot.com/2012/07/apa-itu-html5-dan-kelebihannya.html diakses pada tanggal 14 October 2013 pada pukul 10.37

http://www.corluzz.co.cc/2009/08/pengertian-konsep-dan-fungsi-html.html diakses pada tanggal 14 October 2013 pada pukul 13.09