Makalah HTML5

MAKALAH

“ Pengenalan HTML 5 “

Makalah ini disusun guna memenuhi tugas mata kuliah Teknologi Informasi dan Komunikasi (TIK)

Dosen Pengampu : Bapak Septia Lutfi, S.kom, M.kom

Disusun oleh :

Nama               : Irma Damayanti

NIM                : 1102412093

Rombel            : 02

KURIKULUM DAN TEKNOLOGI PENDIDIKAN

FAKULTAS ILMU PENDIDIKAN

UNIVAERSITAS NEGERI SEMARANG

2013

KATA PENGANTAR

Segala puji bagi Allah SWT yang telah memberikan limpahan karunia, nikmat dan kasih sayang-Nya sehingga penulis dapat menyelesaikan makalah dengan judul “Pengenalan HTML 5”. Makalah  ini disusun dan dibuat sebagai salah satu pelengkap untuk memenuhi tugas mata kuliah Teknologi Informasi dan Komunikasi.

Penulis menyadari bahwa makalah ini masih banyak kekurangan dan kesalahan. Oleh karena itu, penulis mengharapkan saran dan kritik demi kesempurnaan karya ini. Akhirnya penulis berharap semoga makalah ini dapat memberikan manfaat kepada kita semua.

Semarang, 24 Oktober 2013

Penulis

BAB I

PENDAHULUAN

A. Latar Belakang

Pada era sekarang perkembangan teknologi  sangat pesat, tak terkecuali internet yang menawarkan sejuta manfaat untuk kehidupan manusia. Segala aspek kehidupan era sekarang tidak lepas dari internet, mulai jual beli on-line, komunikasi via internet, atau sekadar catatan diary sampai pertahanan sebuah Negara kini internet memegang peranan yang sangat penting dalam kehidupan manusia modern.

Dalam makalah ini akan membahas struktur dasar html 5 dalam pembuatan website di internet. Kita semua dapat belajar dari segala sumber termasuk website buatan kita sendiri, oleh karena itu dengan pengenalan dasar html 5 di harapkan para pembaca dapat memahami dan mengimplementasikan ilmu yang ada pada makalah ini.

B. Rumusan Masalah

a.  Apa yang dimaksud dengan HTML 5?

b.  Apa saja macam-macam HTML 5?

c.  Bagaimana strukutur dasar HTML 5?

C.  Tujuan Penulisan

1.      Mengetahui pengertian HTML 5

2.      Mengetahui tentang HTML 5 semantic, audio serta video

3.      Mengetahui struktur dasar HTML 5

BAB II

PEMBAHASAN

A.    Pengertian HTML 5

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

1. Elemen Baru HTML 5

Demi mewujudkan struktur halaman web yang lebih baik semantik dan aksesibilitasnya, dikenalkanlah beberapa elemen baru, diantaranya:

·                     section serupa seperti h1-h6.

·                     article bisa berupa entri blog atau tulisan konten.

·                     aside menyajikan konten pelengkap.

·                     header bisa menyajikan judul, deskripsi, bahkan nav untuk navigasi.

·                     footer berisi catatan kaki seperti informasi hak cipta, penulis, kontak, dan sebagainya.

·                     Dialog yang dikombinasikan dengan dt dan dd (seperti pada halaman FAQ) dapat digunakan untuk menyajikan percakapan.

·                     yang fenomenal adalah penggunaan elemen figure, video, audio, source, embed, canvas dan elemen terkait berkas multimedia lainnya.

2. Atribut Baru HTML 5

Dikenalkan pula beberapa atribut baru, seperti:

·         atribut media, ping pada elemen pranala,

·         autofocus, placeholder, required, autocomplete dan sebagainya, terkait elemen input dan form

·         reversed pada elemen ol untuk urutan besar ke kecil.

3. Kelebihan pada HTML 5

·         Dapat ditulis dalam sintaks HTML (dengan tipe media text/HTML) danXML.

·         Integrasi yang lebih baik dengan aplikasi situs dan pemrosesannya.

·         Integrasi (‘inline’) dengan doctype yang lebih sederhana.

·         Penulisan kode yang lebih efisien.

·         Konten yang ada di situs lebih mudah terindeks oleh search engine.

4. Browser yang Mendukung HTML

·         Opera Web Browser (mulai dari Opera 9.2 sampai yang terbaru saat ini yaitu opera 10)

·         Safari (mulai dari versi 3.1)

·         FireFox (Mulai dari FireFox 3 )

·         Google Chrome (Mulai dari versi 3)

·         Internet Explorer (Mulai dari versi 8)

B.      Macam-macam HTML5

1.      HTML5 Sematic

HTML5 Semantic adalah beberapa tag baru yang diperkenalkan dalam HTML5 untuk mendukung 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.

2.      HTML5 Audio

Salah satu fitur baru HTML5 yang paling mencengangkan adalah disediakannya tag baru yang memungkinkan kita untuk memutar audio sesuai yang kita inginkan tanpa menggunakan plugin tambahan seperti flash player. Dengan menggunakan tag <audio> kita sudah bisa memasukkan file mp3 dan ogg ke dalam halaman web kita.

Untuk menambahkan audio ke dalam web kita, cukup ketikkan kode berikut

<!DOCTYPE html>

<html>

<body>

<audio controls="controls">

  <source src="music/FromHere.ogg" type="audio/ogg">

Your browser does not support the audio element.

</audio>

</body>

</html>

Sehingga akan menampilkan output seperti berikut :

·         Mozilla version 9.0.1

·         Google chrome Version 22.0.1229.94

·               Opera version 12.10 beta RC

Penjelasan dari tags diatas:

<    <audio>, tag audio utama, digunakan untuk memasukkan audio ke dalam HTML.

·         <source>, digunakan untuk mengambil source file yang akan dimainkan audionya.

·         Atribut pada audio

·         Autoplay, atribut ini digunakan untuk member opsi kepada tag audio apakah langsung dimainkan secara otomatis atau tidak.

·         Controls, atribut ini memberikan pilihan untuk menampilkan kontrol audio (volume, seeker, play/pause button).

·         Type, digunakan untuk mendefinisikan tipe audio yang dimainkan.

·         Src, digunakan untuk mendefinisikan source audio yang dimainkan.

·         Saat ini, ada tiga tipe file audio yang sudah didukung HTML5 yaitu MP3, WAV, dan OGG. Berikut adalah data dukungan browser terhadap audio.

Browser	MP3	Wav	Ogg
Internet Explorer 9	Ya	Tidak	Tidak
Firefox 4.0	Tidak	Ya	Ya
Google Chrome 6	Ya	Ya	Ya
Apple Safari 5	Ya	Ya	Tidak
Opera 10.6	Tidak	Ya	Ya

3.      HTML5 Video

Fitur multimedia lainnya yang didukung oleh HTML5 adalah video. Jika selama ini kita harus menggunakan flash player untuk memasukkan konten video, pada HTML5 kita tidak perlu lagi menggunakannya.

Untuk menambahkan elemen video kita gunakan kode berikut:

<!DOCTYPE html>

<html>

<body>

<video width="320" height="240" controls="controls">

<source src="video/movie.ogg" type="video/ogg">

Your browser does not support the video tag.

</video>

</body>

</html>

Sehingga akan menampilkan output sebagai berikut :

·         Mozilla version 9.0.1

      

·         Google chrome Version 22.0.1229.94

·         Opera version 12.10 beta RC

4.       HTML5 Canvas

Fitur yang lain pada HTML5 adalah <canvas>. Canvas memungkinkan kita untuk memasukkan objek 2D atau 3D kedalam halaman web. Canvas juga sama seperti GeoLocation, tidak bias bekerja sendiri. Dibutuhkan javascript untuk membuat objek di dalamnya, baik 2D maupun 3D.

Untuk membuat objek di dalam canvas kita gunakan kode berikut :

<!DOCTYPE html>

<html>

<body>

<canvas id="myCanvas" width="200" height="100" style="border:1px solid #c3c3c3;">

Your browser does not support the HTML5 canvas tag.

</canvas>

<script>

var c=document.getElementById("myCanvas");

var ctx=c.getContext("2d");

ctx.fillStyle="#FF0000";

ctx.fillRect(0,0,150,75);

</script>

</body>

</html>

Sehingga kita dapatkan hasil output seperti berikut :

·         Mozilla version 9.0.1

·         Google chrome Version 22.0.1229.94

·          Opera version 12.10 beta RC

5.      HTML5 Form Element

Pada HTML5 kita mengenal beberapa elemen form baru. Jika dahulu kita terbatas pada inputdan textarea, kali ini HTML5 menambahkan tiga elemen baru yaitu datalist, keygen, danoutput.

Namun untuk keygen, dukungan browser saat ini belum memenuhi standar keamanan, sehingga lebih aman untuk para web programmer menggunakan enkripsi pada server-side seperti md5, sha1, dan base64_encode.

·         Form Datalist

<!DOCTYPE html>

<html>

<body>

<form action="demo_form.asp" method="get">

<input list="browsers" name="browser">

<datalist id="browsers">

  <option value="Internet Explorer">

  <option value="Firefox">

  <option value="Chrome">

  <option value="Opera">

  <option value="Safari">

</datalist>

<input type="submit"></form>

</body>

</html>

Sehingga kita dapatkan hasil output seperti berikut :

·         Mozilla version 9.0.1

Google chrome Version 22.0.1229.94

Opera version 12.10 beta RC

         Form Output

<!DOCTYPE html>

<html>

<body>

<form oninput="x.value=parseInt(a.value)+parseInt(b.value)">0

<input type="range" name="a" value="50">100 +

<input type="number" name="b" value="50">=

<output name="x" for="a b"></output>

</form>

</body>

</html>

Sehingga kita dapatkan hasil output seperti berikut :

·         Mozilla version 9.0.1

 

·         Google Chrome Version 22.0.1229.94

6.      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 setelah Page Load (setelah Loading), dan kemudian memanfaatkan HTML5 Canvas API untuk menggambarkan visualisasinya.

elemen utama yang kita gunakan disini adalah :

<canvas id=”myCanvas”></canvas>

Karena disini 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>

Untuk itu Script diatas akan sedikit kita ubah agar dapat terbaca di Blogspot. Dan berikut Script untuk 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. 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.

C.     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:

Markup untuk Dokumen dapat digambarkan sebagai berikut:

<body>
<header>…</header>
<nav>…</nav>
<article>
<section>
…
</section>
</article>
<aside>…</aside>
<footer>…</footer>
</body>

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 class=”byline”>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:

<footer>© 2010 DJ Note Inc.</footer>

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>

<li><a href=”/2010/07/”>July 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:

<article id=”comment-3″>

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

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

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

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

</article>

1. HTML 5 Canvas Path Tutorial [Basic]

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:

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

2. HTML 5 Canvas Image Tutorial [Basic]

Untuk membuat suatu gambar, kita dapat menggunakan MethoddrawImage.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>

<html>
<head>
<title><data:blog.pageTitle/></title>
<b:skin><![CDATA[]]></b:skin>
<script>

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()”>

<canvas id=”myCanvas” width=”578″ height=”400″></canvas>

</body>
</html>

Untuk mempraktekkannya, silahkan Menuju Rancangan > Edit HTMLKemudian 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.

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.

3. 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 IniScript yang digunakan:

<?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 HTMLKemudian 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.

4.  HTML 5 Canvas Radial Gradient Tutorial [Basic]

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>

Untuk mempraktekkannya, silahkan Menuju Rancangan > Edit HTMLKemudian 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 Dan Penjelasan Dari HTML 5 Canvas Radial Gradient ini:

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.

5. HTML 5 Canvas Oval Tutorial [Basic]

Untuk membuat bentuk oval, kita dapat menggunakan MethodbezierCurveTo, 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 HTMLKemudian 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.

6. HTML 5 Canvas Semicircle Tutorial [Basic]

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>

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.

BAB III

PENUTUP

A. Kesimpulan

Penggunaan HTML 5 dapat mempercepat kinerja web dengan mengurangi penggunaan plugin-plugin 3rd party pada HTML.Tentunya dengan support plugin-plugin seperti Adobe Flash, Microsft Silverlight, Java dan lain-lainnya.HTML 5 juga memiliki kelebihan seperti, dapat ditulis dalam sintaks HTML (dengan tipe media text/HTML) dan XML, integrasi yang lebih baik dengan aplikasi situs dan pemrosesannya, integrasi (‘inline’) dengan doctype yang lebih sederhana, penulisan kode yang lebih efisien, konten yang ada di situs lebih mudah terindeks oleh search engine.

HTML 5 dalam penggunaannya pun sangatlah mudah dengan support browser dalam pengaplikasiaannya seperti; Opera Web Browser (mulai dari Opera 9.2 sampai yang terbaru saat ini yaitu opera 10), Safari (mulai dari versi 3.1), FireFox (Mulai dari FireFox 3 ), Google Chrome (Mulai dari versi 3), Internet Explorer (Mulai dari versi 8).

2. Saran

            Sebagai tuntutan perkembangan Teknologi dan Informasi kita sebaiknya mempelajari HTML 5 untuk mempermudah dalam pengolahan web.

DAFTAR PUSTAKA

http://pahlawanbetopenk.blogspot.com/2011/01/makalah-HTML5.html

http://nengmungil.blogspot.com/2011/01/makalah-program-c.html

Rijalul Fikri, Ipam Fuadim Adam, Imam Prakoso.HTML5.2005.Penerbit Andi Offset. Yogyakarta.