TUGAS TIK: MAKALAH HTML 5

MAKALAH TIK

“ HTML 5”

Dosen Pengampu :

Septia Lutfi

Disusun Oleh :

Nama : Retno Widiastuti

NIM : 1102412108

Prodi : Kurikulum dan Teknologi Pendidikan

Rombel : 003

FAKULTAS ILMU PENDIDIKAN

UNIVERSITAS NEGERI SEMARANG

TAHUN 2013/2014

KATA PENGANTAR

Alhamdulillah, puji syukur penulis haturkan kehadirat Allah SWT. Atas rahmat-Nya lah Penulis dapat menyelesaikan makalah ini tepat pada waktunya.Tak lupa Penulis juga menghaturkan terima kasih yang sebesar-besarnya kepadasemua pihak yang telah mendukung dan membantu Penulis dalam menyelesaikan makalah yang berjudul “MAKALAH HTML 5” ini.

Penulis menyadari bahwa makalah tersebut masih banyak adanya kekurangan dan masih jauh dari kesempurnaan. Oleh karena itu penulis berharap akan kritik dan sarannya dari segenap pembaca. Demikianlah semoga makalah yang telah dibuat tersebut dapat bermanfaat bagi semuanya. Terimakasih

Semarang, Oktober 2013

Penulis

Retno Widiastuti

BAB I

PENDAHULUAN

1. Latar Belakang Masalah

Perkembangan dunia informasi dan teknologi sangat cepat. Termasuk dengan teknologi yang baru-baru ini dimunculkan yaitu HTML 5. Pada awalnya HTML merupakan sebuah halaman-halam yang berformat dan dapat dilihat oleh sedikit program browser. Sasaran awal dari HTML itu sendiri adalah menyajikan sebuah informasi teks yang dapat memungkinkan penggunanya terhubung atau beralih kedalam halaman-halaman eb lainnya atau yangbiasa disebut Hyperlink diantara isi dari website. Kini HTML tidak hanya mampu memformat sebuah teks akan tetapi juga dapat menyajikan grafik dan dapat mengatur form-form data.

Keunggulan lain dari HTLM yaitu semua komputer dengan web browser dapat membaca dan menafsirkan kode HTML terhadap halaman-halam web yang mereka akses. Sebelum internet populer, orang bisa mengirim data atau sebuah file teks ke seorang teman lainny melalui sebuah jaringan. Selain itu juga bisa mengirim file atau grafik, atau bisa juga mendownload sebuah file musik dari sebuah sistem bulletin board elektroni (BBS). Sekarang baru kita dapat mendownload file-file dalam berbagai macam format, namun selain itu dapat juga menerima sebuah file berbasis HTML saat menampilkan sebuah halaman web. Keuntungannya dari mengirim HTML melalui sebuah koneksi, termasuk file-file data individu, adalah bahwa kode-kode HTML menjalin semua elemen data lainnya yang bersama dengan memformat mereka ke dalam sebuah halaman web yang bisa dibaca atau digunakan.

HTML 5 adalah generasi baru dari HTML, yang dirancang untuk memperbaiki teknologi HTML versi sebelumnya agar dapat mendukung teknologi multimedia terbaru dan tipe isi halaman web (content) lainnya agar mudah di jalanka oleh browser. HTML 5 merupakan hasil kerja sama antara World Wide Web Consortium (W3C, http://www.w3.org/ ) & WHATWG (Web HypertextApplication Teknologi Working Group ).

2. Rumusan Masalah

1. Apa yang dimaksud dengan HTML 5?

2. Apa tujuan dibuatnya HTML 5?

3. Bagaimana mengenai sejarah HTML 5?

4. Apa saja fitur-fitur di dalam HTML 5?

5. Apa saja kelebihan dan kekurangan yang dimiliki HTML 5?

3. Tujuan Penulisan

Adapun tujuan dalam penulisan makalah ini antara lain :

Untuk memenuhi tugas dari dosen mata kuliah Teknologi Informasi dan Komunikasi. Untuk menambah wawasan ilmu pengetahuan bagi semua pembaca termasuk penulis yang telah mencari infomasi perkembangan teknologi dan referensi mengenai teknologi tentang HTML5 tersebut

4. Tujuan Penelitian

Bagian awal ini akan mengajak pembaca untuk mengenal lebih dekat dan mengenal lebih dalam tentang HTML 5. Lebih khusus lagi, kita akan mengeksplorasi komponen-komponen fundamental yang perlu sekali diketahui dan dipahami dengan baik. Diharapkan uraian ini nantinya dapat membantu memudahkan kita ketika ingin mempelajari HTML 5.

Tujuan dengan mengenal HTML 5 di harapakan seseorang akan mendapatkan hal berikut ini:

1. Dapat mengetahui pengertian dari HTML 5

2. Dapat mengetahui sejarah terbentuknya HTML 5

3. Dapat mengetahui asal mula terbentuknya J HTML 5

4. Dapat mengetahui struktur HTML 5

5. Dapat mengetahui berbagai macam karakteristik bahasa HTML 5

6. Dapat mengetahui apa saja kelebihan dan kekurangan HTML 5

BAB II

PEMBAHASAN

1. Pengertian HTML 5

HyperText Markup Language (HTML) adalah suatu spesifikasi atau standard yang dikeluarkan oleh W3C (World Wide Web Consortium) sebagai revisi dari standard HTML. Tujuan utamanya telah meningkatkan bahasa dengan dukungan untuk multimedia terkini dengan tetap mudah dibaca oleh manusia dan secara konsisten dimengerti oleh komputer dan perangkat (web browser, parser, dll). HTML5 dimaksudkan untuk menggolongkan tidak hanya HTML 4, tapi XHTML 1 dan DOM Level 2 HTML juga. HTML5 ini merupakan hasil proyek dari lembaga persatuan website dunia, World Wide Web Consortium (W3C) dan Web Hypertext Application Technology Working Group (WHATWG). Proyek tersebut dimulai di tahun 2009 untuk menyempurnakan bahasa penanda sebelumnya yang dianggap sudah lawas. Tujuan utama dengan adanya HTML5 adalah mengurangi penggunaan plugin-plugin 3rd party pada HTML sehingga dapat mempercepat kinerja web itu sendiri. Plugin-plugin tersebut seperti Adobe Flash, Microsft Silverlight, Java dan lain-lainnya.

HTML adalah sebuah bahasa markup yang digunakan untuk membuat sebuah halaman web, menampilkan berbagai informasi di dalam sebuah 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.

HTML5 adalah sebuah bahasa markah untuk menstrukturkan dan menampilkan isi dari Waring Wera Wanua, sebuah teknologi inti dariInternet. HTML5 adalah revisi kelima dari HTML (yang pertama kali diciptakan pada tahun 1990 dan versi keempatnya, HTML4, pada tahun1997) dan hingga bulan Juni 2011 masih dalam pengembangan. Tujuan utama pengembangan HTML5 adalah untuk memperbaiki teknologiHTMLagar 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) untuk mendefinisikan sebuah bahasa markah tunggal yang dapat 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 revisi ke lima dari kakak pendahulunya, HTML dan HTML4. Banyak fitur tambahan yang ada di HTML5 membuat para programmer web semangat untuk mempelajarinya.

2. Sejarah HTML 5

Hypertext Markup Language (HTML) adalah bahasa yang digunakan untuk menulis halaman web. HTML merupakan pengembangan dari standar pemformatan dokumen teks yaitu Standard Generalized Markup Language (SGML). HTML sebenarnya adalah dokumen ASCII atau teks biasa, yang dirancang untuk tidak tergantung pada suatu sistem operasi tertentu.

HTML dibuat oleh Tim Berners-Lee ketika masih bekerja untuk CERN dan dipopulerkan pertama kali oleh browser Mosaic. Selama awal tahun 1990 HTML mengalami perkembangan yang sangat pesat. Setiap pengembangan HTML pasti akan menambahkan kemampuan dan fasilitas yang lebih baik dari versi sebelumnya. Namun perkembangan resmi dikeluarkan pada bulan November 1995 oleh IETF (Internet Engineering Task Force). HTML 2.0 ini merupakan penyempurnaan dari HTML+ (1993).

HTML 3.0 (1995) memberikan kemampuan lebih daripada versi sebelumnya. Sebuah usaha dari World Wide Web Consortium’s (W3C) HTML Working Group pada tahun 1996 menghasilkan HTML 3.2. HTML versi ini secara resmi diterbitkan pada bulan Januari 1997. HTML versi terbaru adalah HTML 4.01 yang dikeluarkan secara resmi oleh W3C pada tanggal 24 April 1998. HTML merupakan perbaikan dari HTML 4.0 yang lebih dulu diterbitkan. (18 Desember 1997).

Awal mulanya sebenarnya Sejarah HTML atau Hypertext Markup Language telah menjadi teknologi utama untuk Web sejak awal tahun 1990-an. Tim Berners-Lee menciptakan HTML pada tahun 1989 sebagai cara sederhana namun efektif untuk mengkodekan dokumen elektronik. Bahkan, tujuan awal dari web browser adalah untuk melayani sebagai pembaca untuk dokumen berformat HTML. Dua dekade kemudian, browser itu sendiri telah menjadi sebuah portal ke dunia media online. Itu sebabnya HTML5 tidak hanya sebagai revisi HTML, tetapi juga sebagai standar yang komprehensif untuk bagaimana halaman web bekerja.

Pada tahun 1994, HTML masih dalam revisi pertama, Mosaic dan Netscape mendominasi pasar browser, dan kebanyakan orang belum familiar dengan istilah World Wide Web. Tahun itu, pencipta HTML Berners-Lee memimpin kelompok untuk membuat Web standar yang dikenal sebagai World Wide Web Consortium (W3C).

Meskipun W3C adalah kewenangan standarisasi yang diakui saat ini, para pemain komersial di pasar browser 1990 mengabaikan standar-standar ini dan merintis jalan mereka sendiri. Pada tahun 1995, W3C menerbitkan revisi kedua dari standar HTML, dan Web pendatang baru Microsoft menjadi platform browser Internet Explorer (IE).

Selama perang browser awal, para pengembang Web ditantang untuk menjaga situs mereka selalu kompatibel dengan setiap rilis baru dari browser utama. Meskipun W3C telah menerbitkan HTML 3.2 pada tahun 1997, diikuti dengan HTML 4 tahun 1998, mengikuti standar sepertinya kurang penting dibandingkan menjaga fitur browser yang disajikan pengembang. Hal ini berlangsung hingga tahun 2003 ketika komunitas berbasis Mozilla Foundation mematahkan tren. Setelah dibebaskan Browser Mozilla asli, yang diikuti oleh browser Firefox pada tahun 2004, Mozilla cepat mendominasi dibandingkan IE.

Sementara Mozilla Firefox terus berkembang menggunakan HTML 4 standar, Mozilla bergabung dengan Apple dan Opera pada tahun 2004 untuk membentuk kelompok yang disebut Web Hypertext Application Technology Working Group (WHATWG). Tujuan dari WHATWG adalah untuk menjaga perkembangan siklus HTML. WHATWG dan W3C mengkombinasikan spesifikasi yang ada untuk HTML dan XHTML untuk dikembangkan lebih lanjut dengan spesifikasi HTML 5 baru.

3. Pengenalan HTML

HTML5 adalah versi kelima dari HTML standar yang pertama kali diciptakan pada tahun 1990. HTML5 hingga bulan September 2011 ini masih dalam tahap pengembangan. HTML5 ini diharapkan dapat memperbaiki teknologi HTML sehingga mendukung teknologi multimedia terbaru serta lebih mudah dimengerti oleh manusia maupun mesin. Meski masih dalam tahap pengembangan, perlu kiranya kita mengenal HTML5 ini. Berikut muchad sajikan coding-coding menarik di HTML5.

123

<html><body>Ini contoh Video<br />

Browser Anda tidak mendukung Video Tag.

</video>

Ini contoh Audio<br />

Browser Anda tidak mendukung Elemen Audio.

</audio>

Contoh Input<br />

Homepage: <input type="url" name="user_url" /><br /><br />

</form>

E-mail: <input type="email" name="user_email" /><br /><br />

</form>

</body>

</html>

Tampilan dari coding di atas adalah sebagai berikut:

Ini contoh Video
Browser Anda tidak mendukung Video Tag.

Ini contoh Audio
Browser Anda tidak mendukung Elemen Audio.

Contoh Input

Top of Form

Homepage:

Bottom of Form

Top of Form

E-mail:

Bottom of Form

Contoh file video dan suara muchad peroleh dari Wikipedia.

INGAT! Untuk video dan suara tidak semua browser mendukung berikut listnya:

Format Video	IE	Firefox	Opera	Chrome	Safari
Ogg	No	3.5+	10.5+	5.0+	No
MPEG 4	9.0+	No	No	5.0+	3.0+
WebM	No	4.0+	10.6+	6.0+	No

Format Audio	IE 9	Firefox 3.5	Opera 10.5	Chrome 3.0	Safari 3.0
Ogg Vorbis	No	Yes	Yes	Yes	No
MP3	Yes	No	No	Yes	Yes
Wav	No	Yes	Yes	Yes	Yes

5. Manfaat Menggunakan HTML 5

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

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.

6. Dasar-dasar HTML 5

Mendesain HTML berarti melakukan suatu tindakan pemrograman. Namun HTML bukanlah sebuah bahasa pemrograman. Namun HTML hanyalah berisi perintah-perintah yang telah terstruktur berupa tag-tag penyusun. Menuliskan tag-tag HTML tidaklah sebatas hanya memasukkan perintah-perintah tertentu agar HTML kita dapat di akses oleh browser. Mendesain HTML adalah adalah sebuah seni tersendiri. Homepage yang merupakan implementasi dari HTML adalah refleksi dari orang yang membuatnya. Untuk itu kita perlu mendesainnya dengan baik agar para pengunjung homepage yang kita buat merasa senang dan bermanfaat.

Mendesain HTML dapat dilakukan dengan dua cara:
1. Menggunakan HTML Editor, seperti Microsoft FrontPage, Adobe Dreamweaver, dan lain-lain. Dapatkan editor HTML lainnya disini.
2. Dengan cara menuliskan sendiri secara manual satu persatu tag-tag HTML ke dalam dokumen HTML.

7. Fitur-fitur baru HTML 5

Unsur kanvas untuk menggambar.
Video dan elemen audio untuk media pemutaran.
Dukungan yang lebih baik untuk penyimpanan secara offline.
Elemen konten yang lebih spesifik, seperti artikel, footer, header,
navigation, section.
Bentuk kontrol form seperti kalender, tanggal, waktu, e-mail, URL, search.

8. A. Markup

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

B. API baru

Untuk menambah keluwesan pemformatan, pada HTML5 telah dispesifikasikan pengkodean application programming interfaces (APIs) antarmuka document object model (DOM) yang ada dikembangkan dan fitur de facto didokumentasikan. Beberapa 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)
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).

9. Pengenalan Struktur HTML 5

Seiring dengan perkembangan Web yang semakin inovatif, HTML 4 yang telah berkibar selama hampir satu dekade ini akhirnya mulai semakin dikembangkan kearah yang lebih baik atau kita kenal dengan nama HTML 5.

HTML 5 menjanjikan fleksibilitas lebih bagi penulis, memungkinkan Website lebih menarik dan interaktif serta memperkenalkan dan meningkatkan berbagai Fitur, seperti Kontrol bentuk, API, multimedia, struktur, dan semantik.

HTMl 5 Mulai bekerja pada tahun 2004, dibawah asuhan W3C HTML WG dan WHATWG. Bahkan, Empat Vendor Browser besar seperti Firefox, Apple, Opera, Dan Google kabarnya ikut mengembangkan HTML 5.

Struktur Dasar HTML dapat di lihat dibawah ini:

Gambar diatas adalah Struktur HTMl 4 yang masih menggunakan Elemen div yang masing-masing memberikan id deskriptif atau kelas untuk menggambarkan bagian-bagian khusus. Versi HTML 4 masih kekurangan semantik. HTML 5 mulai memperbaiki hal ini dengan membuat masing-masing elemen mewakili bagian yang berbeda dan tidak perlu menggunakan penggambaran khusus. Contohnya seperti gambar dibawah ini :

http://fedraadi.files.wordpress.com/2012/08/3.jpg?w=497

Gambar diatas menunjukkan bahwa Elemen-elemen div dapat digantikan dengan unsur-unsur baru: header, nav, bagian, artikel, samping, dan footer.

Markup untuk Dokumen dapat digambarkan sebagai berikut:

Contohnya, Struktur Dibawah ini yang ditandai dengan bagian nested dan elemen h1:

<section>
<h1>Level 1</h1>

<section>
<h1>Level 2</h1>

<section>
<h1>Level 3</h1>

</section>
</section>

</section>

Perhatikan Struktur Diatas, Untuk kompabilitas yang lebih baik dengan Browser saat ini, telah dimungkinkan menggunakan elemen post lain (h2 untuk h6) tepat ditempat elemen h1. itulah salah satu keuntungan menggunakan elemen ini.

Dengan mengidentifikasi halaman menggunakan elemen sectioning spesifik, teknologi bantu dapat membantu pengguna untuk lebih mudah menavigasi halaman. Misalnya, mereka dengan mudah dapat melompat ke bagian navigasi atau cepat melompat dari satu artikel ke berikutnya tanpa perlu bagi penulis untuk memberikan skip link.

Pada elemen header anda dapat menyertakan sub judul, informasi atau lainnya. Seperti Struktur Dibawah Ini:

<header>
<h1>A Preview of HTML 5</h1>

<p>By Ferdinand</p>

</header>

<header>
<h1>Example Blog</h1>

<h2>Insert tag line here.</h2>

</header>

Setelah itu bagian lainnya adalah Footer yang berisi data hak Cipta, Link ke halaman Terkait dan lainnya, Strukturnya seperti dibawah ini:

Selanjutnya adalah bagian link navigasi, dengan struktur seperti dibawah ini:
<nav>
<ul>
<li><a href=”/”>Home</a></li>

<li><a href=”/prolog”>Prolog</a></li>

<li><a href=”/contact”>Contact</a></li>

<li><a href=”/about”>About</a></li>

</ul>
</nav>

Selanjutnya adalah Struktur Sidebar, seperti dibawah ini:
<aside>
<h1>Archives</h1>
<ul>
<li><a href=”/2010/09/”>September 2010</a></li>

<li><a href=”/2010/08/”>August 2010</a></li>

</ul>

</aside>

Selanjutnya, Section yang merupakan bagian utama dalam sebuah dokument, misalnya kita bayangkan seperti sebuah Bab dengan Struktur seperti dibawah ini:

<section>
<h1>Chapter 1: Saya Orang Kreatif</h1>

<p>

Banyak yang bilang saya gak cerdas dan bengal, dan saya akui demikianlah saya, tapi ditengah kebodohan saya, saya tetap bersyukur diberikan otak yang kreatif oleh Tuhan

…</p>
</section>

Terakhir adalah Unsur artikel, yang berisi konten, postingan, komentar dan lainnya, Strukturnya seperti dibawah ini:

<header>
<h4><a href=”#comment-3″ rel=”bookmark”>Comment #3</a>

by <a href=”http://example.com/”>Google</a></h4>

<p><time datetime=”2010-08-29T13:58Z”>August 29th, 2010 at 13:58</time>

</header>
<p>Blogwalking Gan!</p>

</article>

10. HTML 5 Canvas Element Template [Basic]

Elemen atau Unsur Canvas merupakan Tag HTML yang hampir sama dengan tag <table>, <div>, atau <a> dengan pengecualian yang isinya diberikan dengan Menggunakan Javascript. Dengan kata lain, untuk memanfaatkan Canvas HTML 5 anda harus menempatkan Canvas di suatu tempat di dalam tag HTML, membuat sebuah penginisialisasi fungsi Javascript yang nantinya kita gunakan untuk mengakses tag canvas setelahPage Load (setelah Loading), dan kemudian memanfaatkan HTML5 Canvas API untuk menggambarkan visualisasinya.

elemen utama yang kita gunakan disini adalah :

Karena disini saya menggunakan Blogspot, jadi untuk anda yang juga menggunakan Blogspot silahkan buat sebuah Blog testing terlebih dahulu untuk menguji postingan ini. Setelah blog percobaan tersedia, silahkan menuju Rancangan > Edit HTML Kemudian Centang Expand Template Widget. Setelah itu hapus seluruh Script Template anda. Jika Sudah silahkan tunggu dulu karena saya akan terlebih dahulu memberikan Script untuk pengguna Platform lain, Jadi untuk anda yang juga mengikuti panduan ini namun tidak menggunakan Blogspot, silahkan gunakan Script Template dibawah ini:

<!DOCTYPE html>
<html>
<head>
<script>

function init() {
var canvas=document.getElementById(“myCanvas”);
var c=canvas.getContext(“2d”);

// do stuff here
}

</script>
</head>
<body onload=”init()”>
<canvas id=”myCanvas” width=”576″ height=”300″></canvas>
</body>
</html>
Dan Untuk anda yang menggunakan Blogspot, Sebenarnya Script diatas pun dapat langsung anda gunakan, namun saya pastikan anda akan dihadapkan pada peringatan dibawah ini :

Kami tidak dapat menyimpan template Anda.

Harap perbaiki kesalahan di bawah, dan kirimkan template Anda lagi.

Seharunya ada satu dan hanya satu skin pada template, dan kami menemukan: 0

Untuk itu Script diatas akan sedikit kita ubah agar dapat terbaca di Blogspot. Dan berikut Script untuk anda yang menggunakan Blogspot :

<?xml version=”1.0″ encoding=”UTF-8″ ?>
<!DOCTYPE html>
<html>
<head>
<title><data:blog.pageTitle/></title>
<b:skin><![CDATA[]]></b:skin>
<script>

function init() {
var canvas=document.getElementById(“myCanvas”);
var c=canvas.getContext(“2d”);

// do stuff here
}

</script>
</head>
<body onload=”init()”>
<canvas id=”myCanvas” width=”576″ height=”300″></canvas>
</body>
</html>

Lalu silahkan Save Template anda, dan Lihat hasilnya.

Apa yang akan didapat? jika yang didapati hanyalah page Kosong artinya sudah mengikuti panduan ini dengan benar, karena disini kita memang belum membuat satupun Variabel untuk Canvas, karena kelanjutannya akan diposting di postingan kemudian.

11. HTML 5 Canvas Path Tutorial [Basic]

http://fedraadi.files.wordpress.com/2012/08/4.jpg?w=497

Melanjutkan pembahasan kita sebelumnya tentang HTML 5 Canvas Bezier Curve Tutorial [Basic], pagi ini saya ingin mengajak anda untuk beralih ke Method baru kita selanjutnya, yaitu beginPath. Apa kegunaan dari Method beginPath ini? kita bisa menggunakan beginPath setiap kali kita ingin membuat sebuah Path atau jalur baru. Nha disini, kita pun masih akan memanfaatkan pembahasan kita yang sebelum-sebelumnya, karena disini kita masih akan menggunakan Method lineTo, quadraticCurveTo, dan bezierCurveTo untuk membuat Subpath(bagian dari path) menjadi path atau jalan yang ingin kita bentuk. Kenapa? karena method baru kita kali ini tidak mempunyai Koordinat seperti Method-method sebelumnya, untuk lebih jelasnya perhatikan susunan Method path dibawah ini:

c.beginPath.

Terlihat jelas bahwa untuk membuat sebuah jalur, kita membutuhkan bantuan dari Method lineTo, quadraticCurveTo, dan bezierCurveTo.
Untuk bentuknya, Path bisa dibuat menjadi berbagai bentuk sesuai Imaginasi dan keinginan kita, bahkan Demo Harmonic Oscillator sebelumnya bisa dibilang masih menjadi bagian dari pembahasan tentang Path.

Dan berikut Script kita kali ini:

<?xml version=”1.0″ encoding=”UTF-8″ ?>
<!DOCTYPE html>
<html>
<head>
<title><data:blog.pageTitle/></title>
<b:skin><![CDATA[]]></b:skin>
<script>

function drawPath() {
var canvas=document.getElementById(“myCanvas”);
var c=canvas.getContext(“2d”);

c.beginPath();
c.moveTo(100,20);
c.lineTo(200,160); // line 1
c.quadraticCurveTo(230, 190, 250,120); // quadratic curve
c.bezierCurveTo(290, 20, 300, 200, 400, 150); // bezier curve
c.lineTo(500, 90); // line 2

c.lineWidth=5;
c.strokeStyle=”#0000ff”;
c.stroke();
}

</script>
</head>
<body onload=”drawPath()”>
<canvas id=”myCanvas” width=”578″ height=”200″></canvas>
</body>
</html>

Untuk mempraktekkannya, silahkan Menuju Rancangan > Edit HTML Kemudian Centang Expand Template Widget, Hapus seluruh isi Template anda dan copy paste Script diatas ke dalam Template anda(Gunakan Blog Uji Coba anda yang saya suruh sebelumnya). Jika sudah, Save Template anda dan lihat hasilnya. Dan Untuk para Pecinta HTML 5 dengan Platform lain, silahkan buang bagian skinnya.

Keterangan Diagram dari HTML5 Canvas Path :

http://fedraadi.files.wordpress.com/2012/08/5.jpg?w=497

12. HTML 5 Canvas Image Tutorial [Basic]

Untuk membuat suatu gambar, kita dapat menggunakan Method drawImage. Disini kita memerlukan Objek gambar dan titik tujuan. Titik tujuan relatif mengarah ke sudut atau pojok atas gambar.
kali ini Method yang akan di gunakan adalah :

c.drawImage(imageObj,destX,destY);

Berikut Scriptnya:

<?xml version=”1.0″ encoding=”UTF-8″ ?>

<!DOCTYPE html>

function drawImage() {

var canvas=document.getElementById(“myCanvas”);

var c=canvas.getContext(“2d”);
var destX = 69;

var destY = 50;
var imageObj = new Image();

imageObj.onload = function() {

c.drawImage(imageObj,destX,destY);
}
imageObj.src = “Url Gambar Anda”;

}

</script>
</head>
<body onload=”drawImage()”>

</body>
</html>

Penjelasan HTML 5 Canvas Image Ini:

Karena Method drawImage membutuhkan Objek Gambar, kita harus terlebih dahulu menyiapkan gambar dan tentunya harus menunggu sampai Load Image dari Hostingan terbaca. Jadi prosesnya pun tergantung dari Load Image yang anda gunakan. Dan tentunya, karena kita memanfaatkan hostingan, kita pun harus menggunakan Properti onload dan menentukan Sumber Url Gambar dengan src.

13. HTML 5 Canvas Text Tutorial [Basic]

Untuk membuat Teks dengan memanfaatkan Kanvas HTML 5, kita akan menggunakan satu Method baru yang akan saya perkenalkan kepada anda semua, yaitu Method fillText. Teks sendiri didefinisikan dengan sebuah nilai String dan sebuah posisi.

Susunan Method ini adalah:

c.fillText(“Life is good if you create a beautiful (My Dad)”, x, y);

Dan Ini Script yang di gunakan:

<?xml version=”1.0″ encoding=”UTF-8″ ?>
<!DOCTYPE html>
<html>
<head>
<title><data:blog.pageTitle/></title>
<b:skin><![CDATA[]]></b:skin>
<script>

function drawText() {
var canvas=document.getElementById(“myCanvas”);
var c=canvas.getContext(“2d”);

var x = 250;
var y = 200;
c.fillText(“Life is good if you create a beautiful (My Dad)”, x, y);
}

</script>
</head>
<body onload=”drawText()”>
<canvas id=”myCanvas” width=”578″ height=”200″></canvas>
</body>
</html>
Untuk mempraktekkannya, silahkan Menuju Rancangan > Edit HTML Kemudian Centang Expand Template Widget, Hapus seluruh isi Template anda dan copy paste Script diatas ke dalam Template anda(Gunakan Blog Uji Coba anda yang saya suruh sebelumnya). Jika sudah, Save Template anda dan lihat hasilnya. Dan Untuk para Pecinta HTML 5 dengan Platform lain, silahkan buang bagian skinnya.

14. HTML 5 Canvas Radial Gradient Tutorial [Basic]

http://fedraadi.files.wordpress.com/2012/08/6.jpg?w=497

Untuk membuat Kanvas Gradien Radial kita dapat menggunakan Method baru kita, yaitu: createRadialGradient. HTML5 Canvas Radial Gradient atau Kanvas Gradien radial ini didefinisikan dengan dua buah lingkaran Imajiner(Lingkaran Awal dan Lingkaran Akhir).

Berikut Susunan Methodnya:

c.createRadialGradient(startX, startY, startRadius, endX, endY, endRadius)

Dan berikut Script di gunakan untuk membuatnya:

<?xml version=”1.0″ encoding=”UTF-8″ ?>
<!DOCTYPE html>
<html>
<head>
<title><data:blog.pageTitle/></title>
<b:skin><![CDATA[]]></b:skin>
<script>

function drawCloud() {
var canvas=document.getElementById(“myCanvas”);
var c=canvas.getContext(“2d”);

c.beginPath(); // begin custom shape
c.moveTo(170,80);
c.bezierCurveTo(130, 100, 130, 150, 230, 150);
c.bezierCurveTo(250, 180, 320, 180, 340, 150);
c.bezierCurveTo(420, 150, 420, 120, 390, 100);
c.bezierCurveTo(430, 40,370, 30, 340, 50);
c.bezierCurveTo(320, 5,250, 20, 250, 50);
c.bezierCurveTo(200, 5,150, 20, 170, 80);
c.closePath(); // complete custom shape

var grd=c.createRadialGradient(238,50,10,238,50,200);
grd.addColorStop(0,”#8ED6FF”); // light blue
grd.addColorStop(1,”#004CB3″); // dark blue
c.fillStyle=grd;
c.fill();

c.lineWidth=5;
c.strokeStyle=”#0000ff”;
c.stroke();
}

</script>
</head>
<body onload=”drawCloud()”>
<canvas id=”myCanvas” width=”578″ height=”200″></canvas>
</body>
</html>

Keterangan Dan Penjelasan Dari HTML 5 Canvas Radial Gradient ini:

http://fedraadi.files.wordpress.com/2012/08/7.jpg?w=497

Perhatikan diagram diatas. Untuk membuat Radial Gradien kita perlu mendefinisikan dua lingkaran imajiner (lingkaran awal dan lingkaran akhir) menggunakan Method createRadialGradient . Gradien radial yang berasal dari lingkaran awal akan bergerak secara radial ke ujung lingkaran.

15. HTML 5 Canvas Oval Tutorial [Basic]

http://fedraadi.files.wordpress.com/2012/08/8.jpg?w=497

Untuk membuat bentuk oval, kita dapat menggunakan Method bezierCurveTo, yang Control point-nya terletak pada 4 sudut dari sebuah persegi panjang Imaginer yang nantinya membingkai bentuk Oval.

Method yang di gunakan adalah:

c.bezierCurveTo(cPointX1, cPointY1, cPointX2, cPointY2, endPointX, endPointY);

Dan berikut Script untuk pembuatannya:

<?xml version=”1.0″ encoding=”UTF-8″ ?>
<!DOCTYPE html>
<html>
<head>
<title><data:blog.pageTitle/></title>
<b:skin><![CDATA[]]></b:skin>
<script>

function drawOval() {
var canvas=document.getElementById(“myCanvas”);
var c=canvas.getContext(“2d”);

// define center of oval
var centerX = 288;
var centerY = 100;

// define size of oval
var height = 100;
var width = 250;

var controlRectWidth = width * 1.33;

c.beginPath();
c.moveTo(centerX,centerY – height/2);
// draw left side of oval
c.bezierCurveTo(centerX-controlRectWidth/2,centerY-height/2,
centerX-controlRectWidth/2,centerY+height/2,
centerX,centerY+height/2);

// draw right side of oval
c.bezierCurveTo(centerX+controlRectWidth/2,centerY+height/2,
centerX+controlRectWidth/2,centerY-height/2,
centerX,centerY-height/2);

c.fillStyle=”#8ED6FF”;
c.fill();
c.lineWidth=5;
c.strokeStyle=”black”;
c.stroke();
c.closePath();
}

</script>
</head>
<body onload=”drawOval()”>
<canvas id=”myCanvas” width=”578″ height=”200″></canvas>
</body>
</html>
Untuk mempraktekkannya, silahkan Menuju Rancangan > Edit HTML Kemudian Centang Expand Template Widget, Hapus seluruh isi Template anda dan copy paste Script diatas ke dalam Template anda(Gunakan Blog Uji Coba anda yang saya suruh sebelumnya). Jika sudah, Save Template anda dan lihat hasilnya. Dan Untuk para Pecinta HTML 5 dengan Platform lain, silahkan buang bagian skinnya.

16. HTML 5 Canvas Semicircle Tutorial [Basic]

http://fedraadi.files.wordpress.com/2012/08/9.jpg?w=497

Untuk dapat membuat Kanvas setengah lingkaran pada HTML 5, kita dapat menggunakan Method arc dan mendefinisikan sudut akhir sebagai startingAngle + PI.

Untuk lebih jelasnya, berikut Susunan Methodnya:

c.arc(centerX,centerY,radius,startingAngle,
startingAngle + Math.PI,antiClockwise);

Dan berikut Scriptnya:

<?xml version=”1.0″ encoding=”UTF-8″ ?>
<!DOCTYPE html>
<html>
<head>
<title><data:blog.pageTitle/></title>
<b:skin><![CDATA[]]></b:skin>
<script>

function drawSemicircle() {
var canvas=document.getElementById(“myCanvas”);
var c=canvas.getContext(“2d”);

var centerX = 288;
var centerY = 75;
var radius = 70;
var lineWidth = 5;

c.arc(centerX,centerY,radius,0, Math.PI,false);
c.lineWidth=lineWidth;
c.fillStyle=”#8ED6FF”;
c.fill();

c.moveTo(centerX – radius – lineWidth/2, centerY);
c.lineTo(centerX + radius + lineWidth/2, centerY);
c.strokeStyle=”black”;
c.stroke();
}

</script>
</head>
<body onload=”drawSemicircle()”>
<canvas id=”myCanvas” width=”578″ height=”200″></canvas>
</body>
</html>

BAB III

PENUTUPAN

1. Kesimpulan

Dengan fitur-fitur dan keunggulan HTML5 dengan Script-script yang di permudah ditambah dengan aplikasi- aplikasi yang bermunculan semakin mempermudah user untuk membuat aplikasi web baik jenis manual ataupun dinamis.

DAFTAR PUSTAKA

http://id.wikipedia.org/wiki/HTML5

http://pelitarezza.blogspot.com/2013/01/kelebihan-dan-kekurangan-html5.html

https://www.google.com/webhp?source=search_app#psj=1&q=pengertian+html5

http://www.jeanotnahasan.com/2012/02/pengertian-tujuan-fitur-baru-dan.html

http://virtual-beatles.blogspot.com/2012/06/html5.html

download ppt disini