Perkembangan Bahasa Pemrograman HTML5

Disusun Untuk Memenuhi Tugas Mata Kuliah Teknologi Informasi Dan Komunikasi Hari Kamis Pukul 07:00-08:40 WIB

Dosen Pengampu : Septia Luthfi, S.Kom, M.Kom

Oleh : Kartin Yuliyanti 1102412091 Rombel : 01

KURIKULUM DAN TEKNOLOGI PENDIDIKAN UNIVERSITAS NEGERI SEMARANG 2013

BAB I PENDAHULUAN A. LATAR BELAKANG Informatika adalah disiplin ilmu teknik yang menangani masalah transformasi atau pengolahan fakta simbolik dengan menggunakan komputer melalui proses-proses logika, membahas informatika pastinya sangat berhubungan dengan bahasa pemrograman. Bahasa pemrograman itu sendiri sering diistilahkan dengan bahasa komputer, adalah teknik komando atau instruksi standard untuk memerintah komputer, untuk itu bahasa pemrograman merupakan suatu alat yang sangat penting bagi programer untuk mengoprasikan komputer. Di dunia komputer terdapat beraneka ragam bahasa pemrograman, setiap bahasa pemrograman memiliki kelebihan dan kekurangan masing-masing untuk itu programer berhak untuk menentukan bahasa pemrograman mana yang akan digunakan. B. RUMUSAN MASALAH a. Bagaimana sejarah dan perkembangan HTML5? b. Apa saja fitur yang ada pada HTML5? c. Apa kelebihan pada HTML5? d. Apa kekurangan yang dimiliki HTML5? e. Bagaimana cara membuat kode dalam HTML5? f. Bagaimana perbandingan HTML5 dengan HTML sebelumnya?

C. TUJUAN a. Mengetahui sejarah dan perkembangan HTML5 b. Mengetahui fitur yang ada pada HTML5 c. Mengetahui kelebihan pada HTML5 d. Mengetahui kekurangan yang dimiliki HTML5 e. Mengetahui cara membuat kode dalam HTML5 f. Mengetahui perbandingan HTML5 dengan HTML sebelumnya

D. MANFAAT Penyusunan makalah ini diharapkan dapat bermanfaat bagi siapa saja yang membacanya. Sebagai pengetahuan tentang bahasa pemrograman menggunakan HTML5, dari pengertian, sejarah dan perkembangan, versi, kelebihan, kekurangan dan implementasinya di bidang pendidikan maupun bisnis.

BAB II PEMBAHASAN

A. PENGERTIAN DAN PERKEMBANGAN 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. Tujuan utama pengembangan HTML5 adalah untuk memperbaiki teknologi HTML agar mendukung teknologi multimedia terbaru, mudah dibaca oleh manusia dan juga mudah dimengerti oleh mesin. HTML5 merupakan salah satu karya Konsortium Waring Wera Wanua (World Wide Web Consortium, W3C) 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 berbedabeda oleh banyak perangkat lunak pembuat web. Tujuan utama pengembangan HTML5 adalah untuk memperbaiki teknologi HTML agar mendukung teknologi multimedia terbaru, mudah dibaca oleh manusia dan juga mudah dimengerti oleh mesin. HTML5 lahir pada tahun 2009 yang merupakan standar baru untuk HTML, XHTML dan DOM HTML. Sejak munculnya HTML versi 4.01, perkembangan situs dunia semakin berkembang. HTML5 merupakan hasil proyek dari W3C (World Wide Web

Consortium) dan WHATWG (Web Hypertext Application Technology Working Group). WHATWG bekerja dengan bentuk situs dan aplikasi, sedangkan W3C merupakan pengembang dari XHTM L 2.0 pada tahun 2006,

kemudian mereka memutuskan untuk bekerja sama dan membentuk versi baru dari HTML. 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. HTML5 adalah suatu spesifikasi atau standard yang dikeluarkan oleh W3C (World Wide Web Consortium) sebagai revisi dari standard HTML. Saat ini ditulis kita banyak menjumpai aplikasi web yang masih menggunakan standard HTML4 namun beberapa sudah mulai migrasi ke standard web HTML5. Standard HTML4 yang dijumpai banyak memiliki kelemahan untuk mendukung aplikasi web yang interaktif. Akibat hal ini banyak orang menambahkan fitur baru baik disisi aplikasi web ataupun disisi browser. Solusi ini dikenal dengan plugin dan salah satunya adalah Flash dan Silverlight. Tujuan dibuatnya HTML5 antara lain: 1. Fitur baru harus didasarkan pada HTML, CSS, DOM , dan JavaScript. 2. Mengurangi kebutuhan untuk plugin eksternal (seperti Flash). 3. Penanganan kesalahan yang lebih baik. 4. Lebih banyak markup untuk menggantikan scripting. 5. HTML5 merupakan perangkat mandiri.

Fitur baru dalam HTML5: 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.

Beberapa kelebihan yang dijanjikan pada HTML5: 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.

Saat ini HTML5 masih dalam pengembangan, namun hanya beberapa browser sudah mendukung HTML5.Beberapa browser tersebut seperti Safari, Chrome, Firefox, dan Opera. Kabarnya IE9 (Internet Explorer) akan mendukung beberapa fitur dari HTML5. Pembuatan HTML5 juga di karenakan Standard HTML4 yang dijumpai banyak memiliki kelemahan untuk mendukung aplikasi web yang interaktif. Akibat hal ini banyak orang menambahkan fitur baru baik disisi aplikasi web ataupun disisi browser. Solusi ini dikenal dengan plugin dan salah satunya adalah Flash dan Silverlight. Semakin menjamurnya plugin didalam aplikasi atau browser membuat aplikasi web ini susah untuk menembus banyak browser. Hal ini dikarenakan setiap plugin mempunyai cara yang berbeda-beda, sebagai contoh kita ingin memasang plugin flash untuk sharing video maka pada halaman web kita harus ditulis sebagai berikut

<object type="application/x-shockwave-flash" width="400" height="220" wmode="transparent" data="flvplayer.swf?file=movies/holiday.flv"> <param name="movie" value="flvplayer.swf?file=movies/holiday.flv" /> <param name="wmode" value="transparent" /> </object> Contoh diatas menggunakan plugin Flash dari Adobe untuk menjalankan aplikasi web pada browser maka lain caranya bila kita menggunakan Silverlight. Teknologi Silverlight dikembangkan oleh Microsoft. Contoh penggunaan Silverlight pada halaman web dapat dilihat pada HTML dibawah ini <object width="300" height="300" data="data:application/x-silverlight2," type="application/x-silverlight-2" > <param name="source" value="SilverlightApplication1.xap"/> </object> HTML5 ini dibuat menyederhanakan kompleksitas penggunaan media video dengan standard baru yaitu penggunaan tag <video>. Dengan fitur baru ini maka kita cukup menulis script untuk menjalankan file video sebagai berikut <video src=tutorialku.mp4> </video> Isu bagaimana menjalankan file video pada aplikasi web merupakan salah satu contoh bagaimana HTML4 tidak dapat mencakup masalah ini dan masih banyak lagi isu pada HTML4. Oleh karena itu, kita sudah saatnya memanfaatkan HTML5 sebagai standard aplikasi web kita.

B. FITUR HTML5 HTML5 adalah generasi berikutnya dari html 4, dimana pada html 5 ini ditambahkan fitur fitur baru yang mengedepankan penjalanan konten yang berat pada device dengan tenaga rendah yang pastinya membuat para programer lebih mudah dalam menerapkannya dan berakibat lebih user friendly dari sisi pengguna. Pada HTML5 terdapat fitur elemen <video>, <audio> dan

<canvas>, tetapi juga integrasi dari konten gambar grafis vektor (yang sebelumnya kita ketahui dengan tag <object>). Artinya, konten multi media dan grafis dalam website akan dapat ditangani dan dieksekusi dengan lebih mudah dan lebih cepat, tanpa membutuhkan plugin dan dan API tambahan. Adapun fitur yang tersedia : 1. <canvas>, memungkinkan menggambar menggunakan script kode seperti JavaScript. Dibandingkan dengan versi terdahulunya yang perlu

menggunakan aplikasi tambahan untuk membuat interaksi seperti flash. 2. <audio> dan <video>, merupakan tag penanda untuk konten audio dan video. Jadi kita dapat menyisipkan konten audio dan video secara langsung, berbeda dengan generasi sebelumnya yang harus menggunakan flash untuk menyisipkan konten ini. 3. , digunakan untuk menampilkan konten interaktif (plugin) atau aplikasi eksternal. 4. <section>, digunakan untuk mendefinisikan section apapun pada dokumen. Dapat dikategorikan bekerja seperti div yang memisahkan section yang berbeda. 5. <article>, mendifinisikan artikel, komentar pengguna atau sesuatau konten yang independen. 6. Local Storage, berfungsi sebagai pengganti cache sebagai media penyimpan halaman history web. memungkinkan menyimpan data cache lebih banyak pada local dibanding dengan browser biasa.

7. Web Workers, pada dasarnya membuat proses load java script yang kadang kali mengganggui dengan menjadikan proses lambat menjadi lebih cepat, shingga dapat dilakukan proses multi tasking. 8. Semantic , membuat halaman web lebih dinamis, diantaranya akan menghentikan programer dalam menggunakan tag div atau nav sebagai navigasi. DOCTYPE HTML5 memerlukan DOCTYPE yang ditentukan untuk memastikan bahwa browser merender atau membaca halaman situs dalam mode standar. Deklarasi DOCTYPE untuk sintaks HTML dan bersifat case-sensitive, <DOCTYPE html!>. Doctypes dari versi sebelumnya dari HTML lebih panjang karena masih berbasis SGML dan karena itu diperlukan suatu referensi untuk DTD. Dengan HTML5 ini tidak lagi digunakan dan browser hanya memerlukan syntax yang lebih sederhana, <DOCTYPE html!>. HTML5 DOCTYPE <!DOCTYPE html> Vesri HTML sebelumnya DOCTYPE menggunakan rerferensi DTD, seperti contoh ini: HTML 4.01 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> XHTML 1.0 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> HTML5 Set Karakter Untuk menampilkan halaman HTML dengan benar, browser harus tahu apa Character Sets (charset) yang digunakan. Pada HTML 5 charset Anda dapat menggunakan elemen <meta> dengan atribut charset yang menentukan pengkodean.

Berikut adalah contoh sederhana: <meta charset="UTF-8"> Contoh di atas dapat menggantikan pemakaian <meta http-equiv="ContentType" content="text/html; charset=UTF-8"> meskipun sintaks tersebut masih diperbolehkan.

Contoh struktur dokumen HTML5 minimum : <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>...</title> </head> <body> <header>...</header> <nav>...</nav> <article> <section> ... </section> </article> <aside>...</aside> <footer>...</footer> </body> </html>

C. KELEBIHAN HTML5 adalah sebuah prosedur pembuatan tampilan web baru yang merupakan penggabungan antara CSS, HTML itu sendiri dengan Java Script. Teknologi ini mulai diluncurkan pada tahun 2009, namun sampai saat ini masih dalam tahap pengembangan. Beberapa kelebihan yang dimiliki oleh HTML5 (sebagai hipotesis awal) adalah:

Cleaner code, karena sebagian besar kode telah termasuk di dalam sintaks

html5, maka kode nampak terlihat lebih sederhana daripada penggabungan antara html, css dan java script.

Greater consistency, HTML5 telah melakukan banyak sekali penambahan

sintaks yang dibuat dalam struktur lebih baik dan lebih sederhana daripada sintaks-sintaks sebelumnya. Hal ini membuat developer terbantu dalam meningkatkan konsistensi dalam membangun sebuah web.

Improve Semantics, dengan berbagai elemen kode di dalam html5 yang

telah distandarisasi, maka nilai semantik dari sebuah web dapat lebih ditingkatkan. Itu berarti bahwa bagian-bagian dari web seperti header, nav, footer dan beberapa bagian lainnya terdefinisi dengan jelas maksud serta tujuannya selain itu juga terbentuk dalam sebuah machine readible format

Improved Accessibility, dengan teknologi HTML5 yang memudahkan

struktur pembangunan sebuah web, maka developer dapat membangun pemahaman yang lebih detil mengenaik halaman web.

Client-side Database, HTML5 menyediakan model database SQL yang

baru dengan API yang dapat dibangun dalam konsep lokal, dalam hal ini di sisi client.

Geolocation, HTML5 mempunyai API yang terintegrasi terhadap

geolocation, fasilitas tersebut dapat diakses melalui GPS atau fasilitas lain seperti Google Latitude pada iphone.

Offline Aplication Cache, pengguna dapat terus melakukan interaksi

dengan aplikasi meskipun mereka terputus dari jaringan internet.

Smarter Forms, terdapat semacam reguler expression (regex) yang

membuat form mampu mengenali secara lebih baik tentang input, validasi data dan interaksi dengan elemen lain (misal : format email, password dll)

Sharper focus on Web Application Requiments, HTML5 membuat sebuah

mekanisme yang lebih mudah dalam hal pembuatan front end, aplikasi chat, tools drag and drop, video player, pengolah grafis dan masih banyak lagi.

Fitur kanvas untuk menggambar menggunakan script code Fitur video dan audio untuk media pemutar file multimedia Integrasi yang lebih baik dengan aplikasi situs dan pemrosesannya Integrasi (inline) dengan doctype yang lebih sederhana Penulisan kode yang lebih efisien Penanagan kesalahan yang lebih baik Mengurangi kebutuhan untuk plugin eksternal Lebih markup untuk menggantikan scripting

Tag Baru seperti header, footer, nav, section, asidedll memungkinkan browser untuk mengakses konten dengan mudah. Sebelumnya, kita hanya menentukan hal tersebut dengan tag dan menggunakan atribut id ataupun class.

D. KEKURANGAN Kekurangan yang dimiliki HTML 5, saat ini HTML5 masih dalam pengembangan, sehingga hanya beberapa browser yang sudah mendukung HTML5, seperti fitur-fitur pada HTML 5 tidak semuanya bisa berfungsi dengan baik pada beberapa browser. Beberapa browser yang sudah mendukung HTML 5 seperti Safari, Chrome, Firefox, dan Opera. Namun kabarnya IE9 (Internet Explorer) akan mendukung beberapa fitur dari HTML5.

E. Membuat kode HTML Belajar HTML sebernarnya diperlukan kalau kita ingin terjun di dunia online, misalnya bisnis online karena sedikit banyak akan menuntut kemampuan kita dalam mengedit kode - kode HTML. Walaupun kita menggunakan blog engine seperti Wordpress yang mempunyai plugin plugin yang lengkap, namun sering ditemui kita harus mengedit sidebar, menempatkan kode HTML, mengedit kode warna HTML, menempatkan tabel dan banyak kasus lainnya kita harus menguasai dasar - dasar kode atau script HTML. Struktur kode HTML yang harus selalu ada di setiap halaman situs adalah: <html> <head> <title>Tulis Judul Anda di Sini</title> <meta name="description" content="tulis deskripsi/penjelasan singkat situs anda di sini"> <meta name="keyword" content="tulis kata kunci halaman anda di sini"> </head> <body> Di sini adalah konten / isi halaman anda </body> </html>

Latihan 1. Belajar membuat halaman sederhana dengan kode HTML Sebagai bahan untuk belajar HTML, sekarang buka program Notepad anda. Caranya klik " start " pilih program, cari program Notepad, jika sudah anda buka kemudian tuliskan kode - kode HTML di bawah ini : <html> <head> <title>Modul Belajar HTML</title> <meta name="description" content="Modul belajar HTML untuk pemula"> <meta name="keyword" content="modul html,belajar html"> </head> <body> Modul HTML ini berisi latihan - latihan sederhana untuk beljar membuat sebuah halaman website agar dapat online di internet. Bagi anda yang masih pemula sebaiknya mengikutinya dengan memparaktekkan secara langsung agar lebih mudah dalam memahami setiap variasi kode - kode HTML. </body> </html>

Setelah selesai menuliskan kode - kode HTML di atas kemudian anda simpan. Caranya : klik " file " kemudian pilih " save as " tentukan lokasi penyimpanan, misalnya pada folder " latihan " di " my document " , pada "

file name " tulis nama file misalnya " latihan1.html " pada save as type isikan " all file " kemudian klik " save ". Untuk mengetahui hasilnya pada browser, caranya sebagai berikut : Cari file " latihan1.html " yang anda simpan pada folder " latihan " di " my document " , setelah ketemu kemudian klik kanan, pilih " open with " lalu pilih browsernya misalnya " internet explorer " maka hasilnya akan tampak seperti gambar di bawah ini :

Latihan 2. Belajar membuat link atau tautan dengan kode HTML : misalnya : kata yang terlihat dalam link ( ancor text ) adalah "cara membuat website" sedangkan alamat/URL dari halaman yang dituju tersebut

adalah http://edyutomo.com/internet-dan-komputer/cara-membuat-website maka kode HTML nya adalah : <a href="http://edyutomo.com/internet-dan-komputer/cara-membuat-

website">cara membuat website</a>

Latihan 3. Belajar kode warna HTML untuk mengedit warna teks : <font color="red">kata yang diedit</font>, ini akan mengubah warna teks menjadi merah. Lihat contoh berikut ini : <font color="red">Modul HTML</font> ini berisi latihan - latihan..... hasilnya akan tampak sebagai berikut :

Latihan 4. Kombinasi kode warna HTML, paragraf baru, ukuran huruf dan jenis huruf : <p align="left"><font face="arial" size="6" color="red">kata yang

diedit</font></p> ini akan membuat paragraf menjadi rata kiri, dengan jenis huruf arial, ukuran 6 dan warna teks menjadi merah. Lalu bagaimana untuk membuat warna menjadi warna campuran, ah... itu gampang. Caranya anda buka photoshop, lihat gambar di bawah :

klik kotak merah yang saya lingkari, kemudian akan muncul kotak dialog color picker, lalu cari warna yang anda inginkan, lalu copy code warna yang ada di bawah ( saya tandai ), setelah itu anda paste pada kode warna HTML untuk mengedit warna. Contoh : color="#ed260b" mudah - mudahan jelas ya. Kode HTML lainnya : <p>isi paragraf</p> , untuk membuat paragraf baru <br>isi kalimat</br> , untuk membuat baris baru <b>kata/kalimat</b> , untuk membuat teks tebal <i>kata/kalimat</i> , untuk membuat kata miring <u>kata/kalimat</u> , untuk membuat garis bawah

Latihan 5. Belajar cara menyisipkan gambar dengan kode HTML : Sebelum kita menyisipkan gambar, terlebih dahulu kita harus mengupload foto atau gambar untuk mendapatkan link dari gambar tersebut untuk keperluan menyisipkan gambar yang telah kita tentukan. Lihat cara upload foto atau gambar. sebagai contoh saya telah mengupload gambar pada situs image hosting http://photobucket.com, sehingga saya mendapatkan url link gambar seperti berikut ini : http://i1095.photobucket.com/albums/i480/satujambi/contoh1.gif Sebagai contoh, lihat ilustrasi contoh penerapan kode HTML di bawah ini : <p>di bawah ini adalah contoh gambar :</p> <img src="http://i1095.photobucket.com/albums/i480/satujambi/contoh1.gif"> Latihan 6. Belajar kode HTML untuk menyisipkan link pada gambar Sebagai contoh, berdasarkan gambar di atas, kita akan menyisipkan link menuju halaman http://edyutomo.com/anak-dan-balita/kumpulan-puisi-anak, maka kode HTML yang perlu dibuat adalah sebagai berikut : <a href="http://edyutomo.com/anak-dan-balita/kumpulan-puisi-anak"><img src="http://i1095.photobucket.com/albums/i480/satujambi/contoh1.gif"></a> Jika diklik gambarnya akan terbuka halaman yang dituju. 1. HTML5 Semantic 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 <article> Keterangan Menspesifikasikan yang bersifat konten

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 sekumpulan heading

untuk

<mark>

Digunakan pada teks yang akan di highlight

<meter>

Digunakan pengukuran, dimana

untuk nilai

maksimal dan minimal telah ditentukan <nav> Digunakan sekumpulan navigasi <progress> <ruby> Membuat Progress bar Digunakan 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 memisah diperlukan. Break. suatu kata Untuk bila untuk anotasi untuk

1.

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.

2.

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

3.

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

4.

HTML5 Form Element

Pada HTML5 kita mengenal beberapa elemen form baru. Jika dahulu kita terbatas pada input dan textarea, kali ini HTML5 menambahkan tiga elemen baru yaitu datalist, keygen, dan output. 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

Opera version 12.10 beta RC

a.

Referensi Tag HTML

1. Heading Heading adalah sekumpulan kata yang menjadi judul atau subjudul dalam suatu dokumen HTML. Heading berbeda dengan tag <TITLE> yang tidak bisa muncul dalam halaman web. HTML menyediakan enam tingkatan heading. Heading level 1 biasanya untuk judul utama. Contoh: <HTML> <HEAD> <TITLE>Headings</TITLE> </HEAD> <BODY> <H1>Heading Level 1</H1> </BODY> </HTML> 2. Paragraf Untuk membuat paragraf digunakan tag <P>. Setelah tag <P> Anda bisa menulis isi paragraf dan paragraf tersebut harus diakhiri dengan penutup </P>. Anda bisa mengatur posisi paragraf dengan attribut ALIGN. Atribut ALIGN diikuti dengan posisi yang diinginkan. LEFT untuk rata kiri, CENTER untuk rata tengah dan RIGHT untuk rata kanan. Contoh: <HTML>

<HEAD> <TITLE>Paragraf</TITLE> </HEAD> <BODY> <P ALIGN=right> <P ALIGN=center> <P ALIGN=left> </P> </BODY> </HTML> 3. Blockquote Perintah tag <BLOCKQUOTE> digunakan untuk menulis kutipan teks. Dengan perintah ini browser akan menampilkan teks menjorok ke dalam (meng-identasi teks) atau menampilkan teks dalam bentuk huruf miring. Contoh: <HTML> <HEAD> <TITLE>BLOCKQUOTE</TITLE> </HEAD> <BODY>

<H3>Sesuatu yang tidak perlu dicoba</H3> <BLOCKQUOTE> </BLOCKQUOTE> </BODY> </HTML> 4. Preformatted Text Preformatted Text (PRE) digunakan untuk menampilkan teks sama seperti yang Anda ketikkan dalam dokumen HTML. Browser akan menampikan teks tersebut dalam font monospaced, yaitu seperti terlihat dalam teks yang tampilkan oleh aplikasi berbasis teks (misalnya telnet). Contoh: <HTML> <HEAD> <TITLE>Preformatted Text</TITLE> </HEAD> <BODY> <PRE> </PRE> </BODY> </HTML>

5. Begin Row (BR) Tag ini digunakan untuk menulis teks pada baris berikutnya. Tag <BR> membuat baris baru tanpa memberi baris kosong di bawahnya. Contoh: <HTML> <HEAD> <TITLE>Begin Row</TITLE> </HEAD> <BODY> <P>Banyak cara yang dapat digunakan untuk melakukan instalasi FreeBSD. Namun ada tiga cara yang paling sering dilakukan ,yaitu: <BR>Instalasi melalui FTP <BR>Instalasi melalui CDROM <BR>Instalasi melalui partisi DOS </BODY> </HTML> 6. Ukuran Font Untuk mengatur huruf dokumen HTML digunakan tag <FONT SIZE>. Tag <FONT SIZE> memiliki beberapa atribut untuk mengatur ukuran huruf yang akan digunakan.

Contoh: <HTML> <HEAD> <TITLE>Ukuran font</TITLE> </HEAD> <BODY> <FONT SIZE=1>Ukuran font 1</FONT> <FONT SIZE=2>Ukuran font 2</FONT> <FONT SIZE=3>Ukuran font 3</FONT> <FONT SIZE=4>Ukuran font 4</FONT> <FONT SIZE=5>Ukuran font 5</FONT> <FONT SIZE=6>Ukuran font 6</FONT> <FONT SIZE=7>Ukuran font 7</FONT> </BODY> </HTML> 7. Jenis Font Atribut FACE digunakan untuk mengatur jenis huruf yang diinginkan. Atribut FACE harus diisi dengan string jenis font seperti Arial, Times New Roman,Verdana, dan sebagainya. Contoh:

<HTML> <HEAD> <TITLE>Jenis Font</TITLE> </HEAD> <BODY> <FONT SIZE=5> <FONT FACE = Arial>Arial, contoh AC Milan <P> <FONT FACE = Verdana>Verdana , contoh Persebaya <P> <FONT FACE = Times New Roman>Times New Roman, contoh Indonesia P> </BODY> </HTML> 8. Warna Font Atribut COLOR digunakan untuk mengatur warna font yang akan digunakan. Untuk memberi nilai pada atribut color, ada dua cara. Cara pertama dengan menuliskan nama warna seperti Red, Blue, Yellow, White, dll. Sedangkan cara kedua adalah dengan menggunakan nilai RGB (Red Green Blue) dari suatu warna, misalnya FF0000 untuk Red, 00FF00 untuk green, dan 0000FF untuk Blue. Contoh: <HTML>

<HEAD> <TITLE>Warna Font</TITLE> </HEAD> <BODY> <FONT SIZE=5> <FONT COLOR = red>PSM Makassar<P> <FONT COLOR = #FF0000>tetap PSM Makassar kan?<P> <FONT COLOR = #00FF00>Ini baru Persebaya<P> </BODY> </HTML> 9. Link Perintah anchor <A> digunakan untuk membuat suatu link. Untuk membuat link ke dokumen HTML lain digunakan perintah <A HREF = nama_dokumen>Teks pada browser</A>. Anda juga bisa membuat link dalam sebuah dokumen HTML. Untuk itu perlu dipersiapkan nama anchor lokasi tujuan dari link tersebut. Nama anchor dibuat dengan menambahkan atribut NAME pada tag <A>. Misalnya <A NAME = Bugs</A>. Cara melakukan link ke bagian tersebut adalah <A HREF = #nama_anchor>teks pada browser</A>. Contoh: <HTML>

<HEAD> <TITLE>Link</TITLE> </HEAD> <BODY> <A NAME=lengkap>Pemain-pemain AC Milan menurut abjad</A> <BLOCKQUOTE> <P>Abbiati ,<A HREF=#abbiati>info lengkap</A> <P>Ayala <P>Ambrosini <P>Albertini <P>Boban <P> <A HREF=linktujuan.html>kalo mau tahu lagi klik disini</A> </BLOCKQUOTE> <P><A NAME=abbiati>Abbiati</A> <BLOCKQUOTE> <P>Kiper ketiga timnas Italia runner up Euro 2000 <BR>Kiper utama U-21 juara Piala Eropa U-21 <BR>Kiper utama AC Milan juara Seri-A 1998-1999

</BLOCKQUOTE> <P><A HREF=#lengkap>kembali ke atas</A> </BODY> </HTML> <HTML> <HEAD> <TITLE>Link tujuan</TITLE> </HEAD> <BODY> <P ALIGN=center> Maaf, hanya sedikit <BR>Chamot <BR>Dida <BR>Shevchenko <BR><A HREF=contohlink.html>kembali</A> </BODY> </HTML> b. Membuat Kode Dasar HTML Table

Untuk Belajar HTML Table dan membuat website sendiri, maka kita harus membuat persiapan lebih dulu. Pertama kita buka notepad. Kemudian ketik di notepad ini kode html seperti dibawah ini:

<table> <head> <title> </title> </head> <body> </body> </html> Kemudian sisipkan kalimat Belajar HTML Table diantara <title> dan </title> sehingga kode html nya sekarang menjadi: <table> <head> <title>Belajar HTML Table</title> </head> <body> </body> </html>

F. PERBANDINGAN HTML 5 DENGAN HTML SEBELUMNYA HTML saat ini merupakan standar Internet yang didefenisikan dan dikendalaikan oleh World wide Web Consotium(W3C). HTML dibuat oleh Caillau TIM dan Berners-lee Robert ketika mereka bekerja di CERN pada tahun 1989. HTML 5 HTML 5 merupakan sebuah bahasa baru yang perbaikan dan upgrade dari generasi bahasa web sebelumnya, HTML 5 banyak mengalami upgrade pada spesifikasi Web presentation, bahkan HTML 5 akan menjadi pengganti game untuk Web application development, walaupun sebelumnya sudah mendukung sistem plug-in-dengan Internet application (RIA) yang kaya akan teknologi seperti Adobe Flash, Microsoft Silverlight, dan Sun JavaFX. HTML 5 menampilkan elemen baru ke HTML untuk pertama kali sejak tahun 1990-an. Unsur unsur struktural baru yang di tampilakn seperti aside, figure, dan section.Elemen inline baru seperti waktu, meter, dan progress dan unsur Embedding baru seperti video dan audio. Elemen interaktif baru seperti details, datagrid, dan command. Perkembangan standar untuk web didorong oleh kelompok Web Hypertext Application Technology Working Group (WHATWG) merupakan sebuah kelompok kerja yang terdiri dari para wakil pengembangan browser utama seperti Google, Apple, Mozila dan Opera. Berdasarkan spesifikasi HTML 5 akan diterapkan mulai tahun 1999 untuk menggantikan Standar HTML 4.01. dan salah satunya adalah menerapkan unsur HTML 5 yang mampu menggambar atau memanipulasi geometri yang ada pada sebuah website, beserta fitu fitur lain misalnya kemudahan dalam mengintegrasikan video, audio dan aplikasi lain menggunakan HTML 5.

Tentang Spesifikasi HTML 5 Spesifikasi HTML 5 menjabarkan vokabular yang dapat ditulis dalam duasintak yaitu html dan XML yang disesuaikan dengan kebutuhan pemrogram,pasar atau aplikasi. Vokabular HTML dari jaman sebalumnya (HTML+,HTML 2.0, HTML 3.2) umumnya ditulis menggunakan aturan sintak SGML.Pada HTML 4 telah diterapkan dua sintak yaitu: SGML (disebut sebagaiHTML 4.01) dan XML (disebut XHTML 1.0).Sementara itu, HTML 5 menenerapan dua sintak yaitu: html dan XML.Karena SGML nyaris tidak pernah didukung baik oleh browsers maupunkebanyakan tools untuk html authoring yang ada, maka HTML 5 mendefinisikanserialisasi baru (lihat diagram) dan disebut sebagai html, yang sepintas mirip dengan SGML seperti dikenal sebelumnya.

Halaman Web yang Biasa ditulis Dengan HTML 4 <html><head> <title>Hobo Web LTD Scotland</title> </head> <body> <div id="page"> <div id="header"> <h1><a href="/blog/">Hobo Web</a></h1> </div> <div id="container"> <div id="center" class="column"> <div class="post" id="post-102"> <h2><a href="/test-page/"> Test Page 1</a></h2><div class="entry"> <p>Article Text here</p> </div> </div>

<div class="post" id="post-101"> <h2><a href="/test2/"> Test 2</a></h2> <div class="entry"> <p>Article 2 Text here</p> </div> </div> </div> <div class="navigation"> <div class="alignleft"> <a href="/blog/page/2/"> Previous Entries</a> </div> <div class="alignright"></div> </div> </div> <div id="right" class="column"> <ul id="sidebar"> <li><h2>Hobo Stuff</h2> <ul> <li><a href="/blog/comment-policy/">Comment Policy</a></li> <li><a href="/blog/todo-list/">Todo List</a></li> </ul></li> <li><h2>Archives</h2> <ul> <li><a href='/blog/2008/04/'>April 2008</a></li> <li><a href='/blog/2008/03/'>March 2008</a></li> <li><a href='/blog/2008/02/'>February 2008</a></li> <li><a href='/blog/2008/01/'>January 2008</a></li> </ul> </li> </ul>

</div> <div id="footer"><p>Copyright 2008 Hobo Web LTD</p> </div> </div> </body> </html>

Contoh Halaman Web yang Ditulis dengan HTML5; <html><head> <title>Hobo Web LTD Scotland</title> </head> <body> <header> <h1><a href="http://blog/">Hobo Web</a></h1> </header> <section> <article> <h2><a href="/test-page/"> Test Page 1</a></h2><p>Article Text here</p> </article> <article> <h2><a href="/test2/"> Test 2</a></h2> <p>Article Text 2 here</p> </article> <nav> <a href="/blog/page/2/"> Previous Entries</a> </nav> </section> <nav> <ul>

<li><h2>Hobo Stuff</h2> <ul> <li><a href="/blog/comment-policy/">Comment Policy</a></li> <li><a href="/blog/todo-list/">Todo List</a></li> </ul></li> <li><h2>Archives</h2> <ul> <li><a href='/blog/2008/04/'>April 2008</a></li> <li><a href='/blog/2008/03/'>March 2008</a></li> <li><a href='/blog/2008/02/'>February 2008</a></li> <li><a href='/blog/2008/01/'>January 2008</a></li> </ul> </li> </ul> </nav> <footer> <p>Copyright 2008 Hobo Web LTD</p> </footer> </body> </html>

Perbedaan HTML 5 dengan versi sebelumnya

HTML 5 menambahkan unsur-unsur baru seperti :

1. Section : Sebuah bagian atau bab dalam sebuah buku, sebuah bagian dalam sebuah bab, atau pada dasarnya apa pun yang memiliki pos sendiri dalam HTML 4. 2. Header : Header Halaman yang ditampilkan pada halaman , tidak sama dengan unsur kepala.

3. Footer : Halaman footer di mana baik cetak pergi; tanda tangan dalam sebuah pesan e-mail. 4. Nav : Koleksi link ke halaman lain. 5. Article : Sebuah entri independen dalam sebuah blog, majalah, ringkasan, dan sebagainya.

BAB III PENUTUP A. Simpulan Dalam pembuatan website, dikenal dua komponen penting yaitu www dan HTML. Dimana www merupakan suatu protokol standar dari internet, sedangkan HTML merupakan script atau program standar yang dijalankan oleh www atau internet. Proyek HTML ini dibuat dengan menggunakan media web editor notepad. Di dalam HTML terdapat dua bagian dokumen yaitu bagian kepala (head) dan bagian tubuh (body). Pembuatan proyek web/HTML sekolah dengan menggunakan notepad ini dimulai dengan pembuatan bahasa HTML dalam notepad. Yang kemudian untuk setiap baris dalam proyek ini selalu dibuat dengan bahasa HTML tersendiri sesuai dengan apa yang akan kita buat.

DAFTAR PUSTAKA

http://pelitarezza.blogspot.com/2013/01/kelebihan-dan-kekuranganhtml5.html diakses tanggal 04 oktober 2013 http://wellysan99.blogspot.com/2013/03/kelebihan-html-5.html tanggal 04 oktober 2013 http://under-88.blogspot.com/2012/05/definisi-dan-pengertianhtml5.html#axzz2giaIgkD0 diakses tanggal 04 oktober 2013 http://rvp17.blogspot.com/2013/10/perbandingan-html5-dan-htmlsebelumnya.html DIAKSES TANGGAL 23 OKTOBER 2013 http://arif-rahmans.blogspot.com/ diakses