Makalah HTML 5

Makalah ini dibuat untuk memenuhi tugas mata kuliah

Teknologi Informasi dan Komunikasi

Oleh:

Nama : Bagus Hutomo Nugrahanto

NIM :1102412118

Prodi : Teknologi Pendidikan

FAKULTAS ILMU PENDIDIKAN

UNIVERSITAS NEGERI SEMARANG

2013

Kata Pengantar

Segala puji syukur saya penjatkan kehadirat Allah SWT yang telah

memberikan rahmat, taufik, hidayah-Nya sehingga saya dapat menyelesaikan

penulisan tentang HTML 5. Terselesaikannya penulisan makalah ini diharapkan

akan memberi informasi lebih banyak tentang HTML yang mana saat ini menjadi

sebagai salah satu markah pemrograman web.

Penulisan makalah ini diajukan guna memenuhi tugas mata kuliah TIK

(Teknologi Informasi dan Komunikasi) dan berguna untuk memahami lebih jauh

lagi tentang berbagai hal yang berhubungan dengan HTML 5. Penyusunan

makalah ini sudah pasti jauh dari sempurna, oleh karena itu kritik dan saran yang

membangun sangat diharapkan agar membuat makalah ini menjadi lebih baik.

Semarang, 24 Oktober 2013

Penulis

BAB I

PENDAHULUAN

1.1 Latar Belakang

Perkembangan teknologi yang sampai saat ini masih terus berjalan tanpa

henti, pada setiap saat jutaan manusia dapat berkomunikasi langsung meskipun

interaksi tersebut tidak terjadi secara langsung atau face to face melainkan melalui

perantara media yang mampu menyampaikan berbagai bentuk dan jenis interaksi

antar manusia. Adanya media dalam hal ini menjadi sangat penting, karena

sebenarnya media itu sendiri menurut AECT (Association of Education and

Communication Technology, 1977) memberi batasan tentang media sebagai

segala bentuk dan saluran yang digunakan untuk menyampaikan pesan atau

informasi.

Secara umum interaksi yang bisa melibatkan banyak orang, dipakai

banyak orang, dimanfaatkan banyak orang dan menjadi kebutuhan utama life style

masyarakat masa kini adalah media internet. Namun, bagaimana stuktur

perjalanan semua data yang disampaikan melalui internet itu melalui sebuah

tahapan awal pembuatan dasar melalui web, tetapi pada kesempatan kali akan

membahas lebih dalam tentang web, yaitu bahasa hypertext yang digunakan

sebagai dasar pembuatan web dalam bentuk HTML.

Hyper Text Markup Language (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.

Pembahasan yang lebih mendalam sangat perlu mengingat HTML adalah

organ penting dalam penyampaian suatu informasi baik itu di blog, website

maupun jejaring sosial karena setiap kita membuka halaman web pasti akan

muncul format halaman itu dalam bentuk HTML jika kita lihat pada address bar.

1.2 Rumusan Masalah

Berdasarkan tema yang diangkat beberapa permasalahan yang akan

dibahas dalam makalah ini antara lain adalah:

1. Apa yang dimaksud HTML

2. Bagaimana sejarah perkembangan HTML 5

3. Karakteristik HTML 5

4. Komponen dan atribut baru pada HTML 5

5. Apa saja fitur-fitur yang ada pada HTML 5

6. Bagaimana mengadopsi aplikasi HTML

7. Apa saja browser yang mendukung HTML 5

8. Apa saja kelebihan HTML 5

9. Bagaimana perluasan HTML 5

1.3 Tujuan dan Manfaat

Adapun tujuan dan manfaat dari penyusunan makalah ini adalah Untuk

mengetahui dan membagi informasi dan pengetahuan mengenai HTML5 secara

lebih mendalam dan terstruktur.

BAB II

PEMBAHASAN

2.1 Penjelasan tentang HTML (Hyper Text Markup Languange)

HyperText Markup Language (HTML) adalah sebuah bahasa markah yang

digunakan untuk membuat sebuah halaman web, menampilkan berbagai informasi

di dalam sebuah penjelajah web Internet dan pemformatan hiperteks sederhana

yang ditulis dalam berkas format ASCII agar dapat menghasilkan tampilan wujud

yang terintegerasi. Dengan kata lain, berkas yang dibuat dalam perangkat lunak

pengolah kata dan disimpan dalam format ASCII normal sehingga menjadi

halaman web 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 Internet yang 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).

HyperText Markup Language (HTML) adalah bahasa dari Worl Wide

Web (www) yang dipergunakan utntuk menyusun dan membentuk dokumen agar

dapat ditampilkan pada program web browser. HTML juga dapat disebut sebagai

protocol yang digunakan untuk mentransfer data atau dokumen dari web server ke

browser. HTML inilah yang menjadi dasar bila akan menjelajah internet dan

melihat halaman web yang menarik.

HTML berupa kode-kode tag yang menginstrusikan browser untuk

menghasilkan tampilan sesuai yang diinginkan. Sebuah file yang merupakan file

HTML dapat dibuka dengan menggunakan browser web seperti Mozilla firefox

atau aplikasi pembuka email ataupun dari PDA dan program lain yang memiliki

kemampuan browser. HTML dokumen tersebut mirip dengan dokumen teks biasa,

hanya dalam dokumen ini sebuah teks biasa memuat instruksi yang ditandai

dengan kode atau lebih dikenal dengan TAG tertentu.

HTML adalah bahasa markup yang umum digunakan. Kepopuleran

HTML disebakan karena HTML ini mudah digunakan. Pembuatan dokumen web

dengan  HTML dapat dilakukan dengan mudah dan cepat. Dokumen web dapat

tersaji dengan cepat ke banyak pembaca di seluruh dunia sekaligus. HTML mudah

melakukan kontrol terhadap tampilan halaman web baik berupa teks, gambar,

suara, animasi maupun video.

            HTML berupa kode-kode tag yang menginstruksikan browser untuk

menghasilkan tampilan sesuai dengan yang diinginkan. Sebuah file yang

merupakan file HTML dapat dibuka dengan menggunakan web browser

seperti Mozilla Firefox atau Microsoft Internet Explorer. HTML juga dapat

dikenali oleh aplikasi pembuka email ataupun dari PDA dan program lain yang

memiliki kemampuan browser.

a.         Hypertext

            Link hypertext adalah kata atau frase yang dapat menunjukkan hubungan

suatu naskah dokumen dengan naskah-naskah lainnya. Jika kita klik pada kata

atau frase untuk mengikuti link ini maka web browser akan memindahkan

tampilan pada bagian lain dari naskah atau dokumen yang kita tuju.

b.         Markup

            Pada pengertiannya di sini markup menunjukkan bahwa pada file HTML

berisi suatu intruksi tertentu yang dapat memberikan suatu format pada dokumen

yang akan ditampilkan pada Word Wide Web.

c.         Language 

            Meski HTML sendiri bukan merupakan bahasa pemrograman, HTML

merupakan kumpulan dari beberapa instruksi yang dapat digunakan untuk

mengubah-ubah format suatu naskah atau dokumen. Pada awalnya HTML

dikembangkan sebagai subset SGML(Standard Generalized Mark-up Language).

Karena HTML didedikasikan untuk ditransmisikan melalui media Internet, maka

HTML relatif lebih sederhana daripada SGML yang lebih   pada format dokumen

yang berorientasi pada aplikasi.

Kegunaan HTML

1.     Mengintegerasikan gambar dengan tulisan.

2.     Membuat Pranala.

3.     Mengintegerasikan berkas suara dan rekaman gambar hidup.

4.     Membuat form interaktif.

5. Menentukan format suatu teks

6. Membuat list tentang sekelompok hal

7. Membuat link ke dokumen lain atau bagian lain dari dokumen yang sama.

8. Menyisipkan citra atau gambar.

9. Menampilkan informasi dalam bentuk tabel

10. Memodifikasi.Mengontrol tampilan dari web page dan contentnya.

11. Mempublikasikan dokumen secara online sehingga bisa di akses dari

seluruh dunia.

12. Membuat online form yang bisa di gunakan untuk menangani

pendaftaran, transaksi secara online.

13. Menambahkan object-object seperti image, audi, video dan juga java

applet dalam dokumen HTML.

Struktur HTML

1. Elemen

Elemen terdiri atas tiga bagian, yaitu tag pembuka, isi, dan tag

penutup.Contonya untuk menampilkan judul dokumen HTML pada web

browser digunakan element title, dimana: <title> ini adalah tag pembuka judul

dokumen HTML

2. Tag

Adalah teks khusus (markup) berupa dua karakter "<" dan ">", sebagai contoh

<body> adalah tag dengan nama body. Tag ditulis secara berpasangan, yang

terdiri atas tag pembuka dan tag penutup (ditambahkan karakter "/" setelah

karakter "<"), sebagai contoh <body> ini adalah tag pembuka isi dokumen

HTML, dan </body> ini adalah tag penutup isi dokumen HTML. Yang

merupakan tag-tag dasar dalam HTML adalah:

a. <HTML> </HTML>

Tag <HTML> dan </HTML> digunakan untuk menandai awal dan akhir dari

suatu file HTML.

b. <TITLE> </TITLE>

Tulisan yang berada diantara tag <TITLE> dan </TITLE> akan ditampilkan

oleh browser pada bagian title yang mana merupakan title dari jendela

browser.

c. <HEAD> </HEAD>

Berisi keterangan informasi, seperti title dan jenis dokumen, ditulis diantara

HEAD tags.

d. <BODY> </BODY>

Bagian tag BODY menandai awal dan akhir dari badan dokumen HTML. Tag

ini memiliki sejumlah attribut dapat ditentukan.

Contoh:

<HTML>

<HEAD>

<TITLE>Halaman HTMLku yang pertama</TITLE>

</HEAD>

<BODY TEXT="#000000" BGCOLOR="#FFFFFF">

Hello World

</BODY>

</HTML>

2.2 Sejarah perkembangan HTML

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

Language, 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 saat ini adalah HTML5.

Perkembangan HTML

·      HTML versi 1.0 adalah versi pertama sejak lahirnya nama html

tersebut. Versi ini memiliki kemampuan untuk heading, paragraph, hypertext,

bold dan italic text, wrapping serta memiliki dukungan dalam peletakkan sebuah

gambar.

1. HTML versi 2.0 ( 14 Januari 1996 ). Pada versi ini ada beberapa tambahan

kemampuan diantaranya penambahan form comment, hal ini

menyebabkan adanya sebuah interaktif dan mulai dari versi ini yang

menjadikan sebuah pionner dalam perkembangan homepage interaktif.

2. HTML versi 3.0 ( 18 Desember 1997 ). HTML versi 3.0 juga disebut-

sebut HTML+ yang mempunyai kemampuan dalam beberapa fasilitas

diantaranya adalah penambahan fitur table dalam paragraph, akan tetapi

versi ini tidaj bertahan lama.

3. HTML versi 3.2 ( 14 Januari 1997 ). HTML versi ini adalah

penyempurnaan dari HTML versi 3.0. keluarnya versi ini dikarenakan

adanya beberapa kasus yang timbul pada pengembang browser yang telah

melakukan pendekatan dengan cara lain yang justru hal tersebut menjadi

popular. Maka dibakukan versi 3.2 untuk mengakomodasi praktek  yang

banyak digunakan oleh pengembang browser dan diterima secara umum.

Dapat dikatakan versi 3.2 ini merupakan versi 3.2 yang dikembangkan

oleh beberapa pengembang browser seperti Netscape dan Microsoft.

4. HTML versi 4.0 ( 18 Desember 1997). Versi ini sudah terdapat

penambahan pada link, meta, image dan lain-lain sebagai penyempurnaan

versi 3.2.

5. HTML versi 4.01 ( 24 Desember 1999 ). HTML versi 4.01 menjadi

rekomendasi W3C. HTML 4.01 adalah minor update-koreksi dan

perbaikan bug dari HTML 4.0.

6. XHTML versi 1.0 ( 20 Januari 2000 ). XHTML 1.0 merumuskan HTML

4.0 dalam XML.

7. HTML 5 ( 22 Januari 2008 ). HTML 5 meningkatkan interoperabilitas dan

mengurangi biaya pengembangan dengan membuat aturan yang tepat

tentang bagaiman untuk menangani semua elemen HTML, dan bagaimana

memulihakan dari kesalahan. Beberapa fitur dalam HTML 5 adalah fungsi

untuk audio embedding, video, grafik, sisi penyimpanan data klien, dan

dokumen interaktif. HTML 5 juga mengandung unsur-unsur baru seperti

<nav>, <header><footer>, dan <figure>. Yang termasuk kelompok kerja

diantaranya AOL, Apple, Google, IBM, Microsoft, Mozilla, Nokia, Opera

dan banyak lagi vendor lainnya.

2.3 Karakteristik HTML 5

HTML5 merupakan sebuah bahasa markah untuk menstrukturkan dan

menampilkan isi dari World Wide Web, sebuah teknologi inti dari Internet.

HTML5 adalah revisi kelima dari HTML dan hingga bulan Juni 2011 masih

dalamipengembangan.

Dimana 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 hasil proyek dari W3C (World Wide Web Consortium

dan WHATWG ( Web Hypertext Application Technology Working Group ).

Dimana WHATWG bekerja dengan bentuk web dan aplikasi dan W3C

merupakan pengembang dari XHTML 2.0 pada tahun 2006, kemudian mereka

memutuskan untuk bekerja sama dan membentuk versi baru dari HTML.

Beberapa browser sudah mendukung HTML5 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.

Editor HTML5, Ian Hickson, berharap spesifikasi HTML5 dapat mencapai

tahap kandidat rekomendasi pada tahun 2012. Pada tahun 2007 Spesifikasi

HTML5 diadopsi sebagai pekerjaan permulaan untuk grup baru yang mengurus

HTML di World Wide Web Consorsium (W3C). Kriteria baru dari W3C inilah

yang membuat HTML 5 mempunyai standar tersendiri yang berbeda dari yang

lain.

Di dalam teknologi HTML 5 terdapat berbagai pembaruan dari versi

sebelumnya, perbedaan itu terlihat antara lain terdapat berbagai fitur seperti

frame, acronym, scope yang pada versi sebelumnya ada kini telah dihilangkan.

2.4 Komponen dan atribut baru pada 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.

Penggunaan elemen figure, video, audio, source, embed, canvas dan

elemen terkait berkas multimedia lainnya.

Elemen <canvas> untuk menggambar 2D

Elemen <video> dan <audio> untuk media player

Support local storage

Konten spesifik elemen baru, seperti <article>, <footer>, <header>,

<nav>, <section>

Kontrol form baru, seperti kalender, tanggal, waktu, email, url, search

Daftar lengkap elemen baru di HTML5

Tag Description

<article> Mendefinisikan sebuah artikel

<aside> Mendefinisikan konten selain dari konten halaman/post

<audio> Mendefinisikan konten audio

<canvas> Digunakan untuk menggambar grafik, on the fly, melalui scripting

(JavaScript biasanya)

<command> Mendefinisikan tombol perintah untuk dapat memanggil

<details> Mendefinisikan rincian tambahan bahwa pengguna dapat melihat atau

menyembunyikan

<datalist> Menentukan daftar pilihan standar untuk kontrol input

<embed> Mendefinisikan sebuah wadah untuk aplikasi eksternal (non-HTML)

<header> Mendefinisikan sebuah dokumen atau bagian header

<figure> Menentukan konten mandiri

<footer> Mendefinisikan sebuah dokumen atau bagian footer

<hgroup> Groups heading (<h1> to <h6>) elemen

<mark> Mendefinisikan teks yang ditandai / disorot

<output> Mendefinisikan hasil penghitungan

<source> Mendefinisikan beberapa sumber media untuk elemen media (<video>

dan <audio>)

<summary> Mendefinisikan sebuah visible heading untuk elemen <details>

<time> Mendefinisikan tanggal / waktu

<video> Mendefinisikan sebuah video atau film

<section> Mendefinisikan bagian dalam dokumen

Daftar lengkap elemen yang tidak dipakai lagi (obsolete) di HTML5, antara lain:

Tag Description

<acronym> Mendefinisikan sebuah akronim

<basefont> Menentukan warna standar, ukuran, dan font untuk semua teks dalam

dokumen

<big> Mendefinisikan ukuran teks besar

<center> Mendefinisikan posisi teks dicenter

<dir> Mendefinisikan direktori list

<font> Mendefinisikan font, warna, dan ukuran untuk teks

<frame> Mendefinisikan sebuah window (frame) dalam sebuah frameset

<frameset> Mendefinisikan satu set frame

<strike> Mendefinisikan teks strikethrough

<noframes> Mendefinisikan sebuah konten alternatif bagi pengguna bahwa konten

tidak mendukung frame

<applet> Mendefinisikan sebuah applet embed

Juga elemen saperti <blink>, <marquee>, <multicol>, <tt> juga telah

ditinggalkanipenggunaanyaidiistrukturiHTML5.

Selain elemen-elemen diatas ada juga fitur "conforming" pada HTML5, seperti

penggunaan attribut pada elemen tertentu.

Attribut baru HTML 5 antara lain:

Tag Description

draggable Menentukan apakah suatu unsur adalah draggable atau tidak

contextmenu Menentukan menu konteks untuk suatu elemen. Menu konteks muncul

ketika pengguna mengklik kanan pada elemen

hidden Menentukan bahwa elemen belum, atau tidak lagi, relevan

spellcheck Mendefinisikan posisi teks dicenter

dropzone Mendefinisikan direktori list

contenteditable Mendefinisikan font, warna, dan ukuran untuk teks

itemprop Digunakan untuk group item

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

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

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

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

Dikenalkan pula beberapa atribut dan aturan 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.

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

Mengurangi kebutuhan untuk plugin eksternal (seperti Flash)

Lebih baik dalam hal penanganan kesalahan/error handling

Lebih markup untuk menggantikan scripting

2.5 Fitur-fituripadaiHTML5

Didalam HTML 5 memiliki fitur-fitur yang berbeda dari fitur aplikasi HTML

versi yang sebelum-sembelumnya. Adapun diantaranya HTML memiliki fitur-

fitur baru seperti:

HTML5iCanvas

Pada HTLM sebelumnya kita membutuhkan suatu aplikasi yang

membantu kita untuk berhubungan dengan web kita, misalnya Flash atau

Java. Namun pada HLML5 aplikasi tersebut akan diganti oleh elemen

<canvas> pada HTML5 sebagai Canvas web -- kertas yang bisa dicoreti

sesuai imajinasi -- atau dalam hal lain, Canvas memungkinkan kita untuk

bereksperimen lebih pada HTML5.

AudioidaniVideo

Versi HTML pendahulun kita harus menyisipkan flash untuk memutar

audio/video untuk memutar audio/video, namun pada HTML5 akan

dengan mudah menyisipkan file multimedia tersebut ke dalam webnya.

Pada HTML5 ada tag <audio> dan <video> yang berfungsi untuk

menyisipkan file audio dan video tentunya.

Web Workers

Pada web yang menggunakan HTML sebelumnya sering kali kita lama

dalam membuka web tersebut, ini dikarenakan banyaknya penggunaan

JAVESCRIPT. Pada HTML5 disediakan WEB WORKERS yang

mempercepat dalam pemrosesan JAVASCRIPT lebih cepat dan

multitasking.

New Semantic Elements: Ini seperti pada elemen <header>, <footer>,

and <section>.

Forms 2.0: Perbaikan form web HTML di mana atribut baru telah

diperkenalkan tag <input>.

LocaliStorage

Local Storage ini mempunyai fungsi sebagai pengganti cache sebagai

media penyimpanan history halaman web. Memungkinkan web untuk

menyimpan data cache lebih besar di storage local-nya daripada cache

pada browser biasa. 

Semantics

Semantics disini merupakan fitur yang dijadikan unggulan dalam HTML5.

Pada HMLT sebelumnya banyak web designer yang menggunakan elemen

div, nav, dan lainnya. Nah pada HTML5 hal seperti itu sudah tidak

digunakan dengan adanya semantics akan menjadi masa depan tag layout

dan format yang membuat web akan lebih dinamis serta lebih menarik.

Persistent Local Storage: Untuk menghilangkan ketergantungan

pada plugin pihak ketiga.

WebSocket: Sebuah generasi teknologi terbaru komunikasi dua arah

untuk aplikasi web.

Server-Sent Events: memperkenalkan even yang mengalir dari web

server ke web browser yang disebut Server-Sent Events (SSE).

Audio & Video: Anda dapat menanamkan/embed audio atau video pada

halaman web Anda tanpa menggunakan plugin pihak ketiga.

Geolocation: Pengunjung dapat memilih untuk berbagi lokasi fisik

mereka dengan aplikasi web Anda..

Microdata: Ini memungkinkan Anda membuat kosakata Anda sendiri di

luar HTML5 dan memperluas halaman web Anda dengan kostum

semantics.

Drag and drop: Drag dan drop item dari satu lokasi ke lokasi lain pada

halaman web yang sama.

Support terhadap media penyimpanan offline

Memiliki media video dan audio untuk multimedia

Terdapat elemen konten yang spesifik contoh artikel, footer, header,

navigation dan section.

Memiliki kontrol form baru seperti kalender, tanggal, waktu, e-mail, URL

dan search.

Artikel dapat berupa entri blog atau konten.

2.6 Mengadopsi Aplikasi HTML5

Sekarang, kita harus menyadari bahwa HTML5 bukanlah sebuah entitas

tunggal yang dapat Anda mengadopsi atau bermigrasi ke dalam satu gerakan .

Mengadopsi HTML5 , bukannya pilihan grosir , adalah tentang membuat evaluasi

teknologi demi teknologi dan menentukan teknologi yang tepat untuk aplikasi

Anda.

Namun, bahkan dengan set stabil teknologi HTML5 , kita tidak harus

mengabaikan pengguna yang belum pindah ke browser yang lebih baru . Jika kita

banyak terlibat dalam pengembangan sehari- hari untuk sebuah situs , kita pasti

memiliki beberapa gambaran kasar tentang persentase pengguna yang

mengunjungi situs Anda dengan browser tertentu . Bagi kebanyakan dari kita ,

akan mudah untuk melihat persentase pengguna yang mengunjungi dengan

browser yang lebih tua dan sampai pada kesimpulan bahwa mengadopsi teknologi

HTML5 apapun akan berdampak negatif para pengguna . Untungnya ada "

polyfilling " untuk menyelamatkan kita dari menunggu sampai suatu tanggal

berkabut di masa depan untuk mengadopsi HTML5 .

Ketika datang untuk memilih mana teknologi untuk mengadopsi , daftar

akhir mungkin kombinasi dari spesifikasi luas didukung dan spesifikasi lain yang

Anda harus polyfill dukungan untuk browser tertentu . Hanya Anda akan tahu

susunan yang tepat dari daftar berdasarkan kebutuhan Anda saat ini dan konteks.

Dalam beberapa bulan mendatang , saya akan membahas beberapa

spesifikasi penting , dari Geolocation dan Formulir dan kanvas , untuk Pekerja

Web , Sockets Web dan IndexedDB . Beberapa secara luas didukung dan " situs -

siap, " dan beberapa, seperti Sockets Web , terlalu inovatif untuk mengabaikan ,

terlepas dari mana mereka berdiri saat ini. Dengan spesifikasi masing-masing ,

saya akan membahas dukungan saat ini dan masa depan diketahui , beberapa

dasar-dasar tentang bagaimana Anda dapat menerapkan fitur spesifikasi pada situs

Anda , dan bagaimana polyfill dukungan untuk browser yang tidak mendukung

fitur yang diberikan .

Di atas segalanya, mulai mengadopsi HTML5 hari ini. Web tidak akan

pernah sama , benar-benar, dan Anda dapat menjadi bagian dari katalis dengan

membangun aplikasi Web berikutnya besar menggunakan HTML5 .

Bahkan , HTML5 merupakan istilah umum yang menggambarkan satu set

HTML , CSS dan JavaScript spesifikasi dirancang untuk memungkinkan

pengembang untuk membangun generasi berikutnya dari situs web dan aplikasi .

Apa yang penting dalam definisi yang tiga bagian: HTML , CSS dan JavaScript .

Mereka menentukan bagaimana pengembang menggunakan markup membaik ,

kemampuan gaya kaya dan baru JavaScript API untuk membuat sebagian besar

fitur pengembangan Web baru . Sederhananya , HTML5 = HTML + CSS +

JavaScript .

" Situs -Ready HTML5 " adalah istilah digunakan Microsoft untuk

menjelaskan teknologi HTML5 yang dapat Anda gunakan saat ini karena mereka

memiliki dukungan luas di semua browser utama . Teknologi seperti tag HTML

baru , kanvas , Scalable Vector Graphics , Audio dan Video , Geolocation ,

Penyimpanan Web dan banyak baru CSS3 modul semua jatuh ke dalam ruang ini ,

dan mereka diimplementasikan dalam Internet Explorer 9 , serta browser utama

lainnya .

Melampaui apa yang tersedia saat ini , Microsoft menggunakan Previews

platform publik untuk menginformasikan pengembang apa yang datang dalam

versi berikutnya dari browser , serta untuk mengumpulkan umpan balik . Untuk

Internet Explorer 9 , Microsoft merilis Previews Landasan setiap enam sampai

delapan minggu , setiap kali mengumumkan tambahan baru HTML5 , fitur dan

perbaikan kinerja untuk pengembang untuk mencoba dan mengevaluasi . Internet

Explorer 9 dirilis pada bulan Maret dan pada awal Juli , Microsoft telah merilis

dua Pratinjau Platform untuk Internet Explorer 10 , menandakan bahwa Microsoft

terus irama rilis reguler untuk Internet Explorer preview .

Untuk memastikan bahwa HTML5 bekerja secara konsisten di semua

browser , Microsoft telah banyak berinvestasi dalam interoperabilitas , membuat

dan mengirimkan suite tunggal terbesar kasus uji yang berkaitan dengan HTML5

W3C . Untuk pertama kalinya , suite ini kasus uji akan digunakan oleh W3C

sebagai sumber otoritatif HTML5 " kesiapan " di masing-masing browser . Hasil

akhir untuk Anda dan saya sebagai pengembang adalah bahwa kita bisa

mengadopsi dan menerapkan teknologi HTML5 sekali, dan percaya bahwa

mereka akan bekerja secara konsisten di semua browser.

HTML5 dan Microsoft Developer Tools

Selain keterlibatan Microsoft dengan W3C dan teknologi HTML5

didukung dalam browser , ada dimensi lain Pendekatan Microsoft terhadap

HTML5 yang penting untuk pengembang : pendekatan untuk HTML5 perkakas .

Pada awal 2011 , Microsoft diperbarui dua alat pengembangan dengan paket

layanan : Visual Studio 2010 dan Expression Web 4 . Layanan paket untuk kedua

alat ini memberikan jenis HTML5 dokumen untuk validasi , serta IntelliSense

untuk tag HTML5 baru dan atribut . Jika Anda menggunakan Visual Studio 2010

SP1 , Anda dapat mengaktifkan Skema HTML5 dengan mengklik Tools | Options

| Text Editor | HTML | Validasi , dan kemudian memilih opsi HTML5 dalam

daftar drop -down Target, seperti yang ditunjukkan pada Gambar 1 . Anda juga

dapat mengatur HTML5 sebagai skema default dari Sumber HTML Editing

Toolbar dalam file HTML.

Sementara beberapa teknologi HTML5 sudah ada di Internet Explorer 9 ,

dan yang lain sedang diumumkan untuk Internet Explorer 10 lewat Internet

Explorer Landasan Previews , beberapa spesifikasi populer dan berita

membutuhkan pekerjaan sedikit lebih oleh W3C dan vendor browser sebelum

mereka akan siap untuk mengimplementasikan dalam aplikasi kita. Salah satu

contohnya adalah Socket Web , spesifikasi menarik yang memungkinkan

pengembang membuka saluran komunikasi dua arah dengan server back-end ,

sehingga memungkinkan tingkat " real-time " konektivitas yang sebelumnya tidak

tersedia dalam aplikasi Web . Sebagai pengembang , Anda tidak dapat diragukan

bayangkan penggunaan yang tak terhitung untuk Socket Web dalam aplikasi Anda

sedang membangun sekarang. Tapi spesifikasi Web Sockets masih berubah

dengan pesat , dengan aspek-aspek kunci masih dalam fluks dan sedang dibahas

di dalam W3C . Mengingat situasi , akan sulit untuk menyediakan fitur ini secara

konsisten dan andal di semua browser saat ini.

Untuk spesifikasi stabil atau berkembang seperti Sockets Web ( yang kita

akan membahas secara mendalam dalam artikel mendatang ) , Microsoft

menciptakan HTML5 Labs , sebuah situs untuk pengembang untuk bereksperimen

dengan rancangan implementasi teknologi tersebut . Situs ini menyediakan

prototipe Anda dapat men-download dan mencoba secara lokal , serta host demo

untuk beberapa spesifikasi . Tujuannya adalah untuk memberikan tempat untuk

mencoba spesifikasi ini untuk diri sendiri , dan bagi Anda untuk memberikan baik

Microsoft dan umpan balik W3C pada spesifikasi ini karena mereka menstabilkan

dan dekat implementasi dalam browser .

2.7 Browser yang mendukung HTML 5

Beberapa browser sudah mendukung HTML5 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

satunyaiadalahiFlashidaniSilverlight.

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>

Sementara beberapa teknologi HTML5 sudah ada di Internet Explorer 9 ,

dan yang lain sedang diumumkan untuk Internet Explorer 10 lewat Internet

Explorer Landasan Previews , beberapa spesifikasi populer dan berita

membutuhkan pekerjaan sedikit lebih oleh W3C dan vendor browser sebelum

mereka akan siap untuk mengimplementasikan dalam aplikasi kita. Salah satu

contohnya adalah Socket Web , spesifikasi menarik yang memungkinkan

pengembang membuka saluran komunikasi dua arah dengan server back-end ,

sehingga memungkinkan tingkat " real-time " konektivitas yang sebelumnya tidak

tersedia dalam aplikasi Web.

2.8 Kelebihan HTML 5

Sebagai suatu rancangan bagi web browser yang lebih baru sudah pasti

HTML 5 mempunyai beberapa kelebihan jika dibandingkan dengan versi

sebelumnya, beberapa diantara kelebihan HTML 5 diantarannya:

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.

Memiliki integrasi yang bagus terhadap aplikasi web

Dapat dideteksi oleh browser lama

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.

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.

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.

2.9 Perluasan Pembuatan Aplikasi HTML5

Menurut informasi yang ada pada lamanCHIP.co.id , Pada

Intel Developer Forum (IDF) di Beijing, Intel mengatakan akan

memperluas pemakaian HTML 5, dengan meluncurkan HTML5

Development Environment. Platform ini menyediakan sistem

yang terintegrasi untuk mengembangkan, menguji, melakukan

debug, dan menjalankan aplikasi di beberapa sistem operasi

seperti iOS, Android, Windows 8 dan Windows Phone. Dengan

perluasan plattform ini, maka dipastikan penggunaan HTML5

akan digunakan oleh banyak apikasi alat komunikasi.

Hal ini pastinya turut membantu para pengembang

mengatur aplikasi yang mereka ciptakan untuk dijalankan

pada platform secara keseluruhan. Patrick Darling dari Intel

mengatakan, ”HTML5 memudahkan pada developer untuk

menciptakan aplikasi yang dapat dijalankan pada

seluruhplatform." Patrick juga menambahkan bahwa Intel turut

membantu developer untuk membuat aplikasi dengan biaya

yang lebih rendah, cepat, dan kemudahan penyebarannya ke

pasar dengan HTML5.

Wakil Presiden Direktur dan General Manajer Divisi

Software Intel, Doug Fisher memperkenalkanplatform baru

pada hari ke-2 IDF Beijing 2013. Dia

mengatakan platform tersebut membuat HTML5 dapat diakses

dan digunakan seluruh developer.

Yang pasti, platform ini membantu developer untuk

menjual aplikasinya pada banyak pasar aplikasi, seperti

Amazon, AppStore, Facebook, Google Chrome Web Store,

Google Play Stire dan Windows Phone Store.

Lebihnya lagi, sarana baru dari Intel ini tersedia bebas

dari biaya lisensi dan biaya lainnya. Dikatakan bahwa HTML5

merupakan tren masa depan dalam pembuatan dan

pengembangan aplikasi cross platform, atau aplikasi yang

kompatibel dengan seluruh platform. Perluasan pijakan ini

tentunya akan menambah banyaknya penggunaan HTML5.

BAB III

PENUTUP

3.1 Kesimpulan

HTML5 merupakan sistem bahasa yang sangat kompleks.

Dengan disajikannya makalah ini diharapkan pembaca dapat

memahami lebih dalam lagi mengenai HTML5. Dengan segala

kelebihan dan keunggulan dalam HTML5, tentunya hal ini

menjadi pertimbangan parapengguna untuk menggunakan

HTML5 sebagai plattform dalam media komunikasi. HTML5

merupakan sebuah bahasa markah untuk menstrukturkan dan

menampilkan isi dari World Wide Web, sebuah teknologi inti dari

Internet.

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.

DAFTAR PUSTAKA

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

Diakses pada 19 Oktober 2013

http://repository.gunadarma.ac.id/bitstream/

123456789/4815/1/1.%20DOKUMEN%20PRESENTASI.pdf. Diakses pada 19

Oktober 2013

http://id.wikipedia.org/wiki/HTML5. Diakses pada 19 Oktober 2013

http://tegararian.blogspot.com/2013/04/definisi-dan-karakteristik-html.html.

Diakses pada 19 Oktober 2013

http://id.wikipedia.org/wiki/HyperText_markup_language. Diakses pada 19

Oktober 2013

http://dayezii.blogspot.com/p/penjelasan-html.html. Diakses pada 19 Oktober

2013

http://design-web11.blogspot.com/2013/06/artikel-html-sejarah-perkembangan-

dan.html. Diakses pada 19 Oktober 2013

http://www.kaskus.co.id/thread/509751de1dd719be13000093/tentang-html5.

Diakses pada 20 Oktober 2013

http://www.reyvababtista.com/2011/12/html5-apa-fitur-tambahannya.html.

Diakses pada 20 Oktober 2013

http://html5bydemo.blogspot.com/. Diakses pada 20 Oktober 2013

http://problogiz.blogspot.com/2013/01/html5-apa-saja-yang-baru.html.Diakses

pada 20 Oktober 2013

http://msdn.microsoft.com/en-us/magazine/hh335062.aspx.

Diakses pada 21 Oktober 2013

http://blog.haqqi.net/2011/06/komponen-html5-yang-wajib-diketahui/.Diakses

pada 22 Oktober 2013

http://www.html5code.com/tutorials/understanding-the-html5-timeline/.Diakses

pada 22 Oktober 2013

http://programwahid.blogspot.com/2013/03/dasar-pemrograman-web-dengan-

html.html. Diakses pada 23 Oktober 2013