2.

1 Sejarah dan Perkembangan HTML

HyperText Markup Language (HTML) adalah sebuah bahasa yang ditulis kedalam
berkas format ASCII agar dapat menghasilkan tampilan wujud yang terintegerasi. HTML
adalah sebuah standar yang digunakan secara luas untuk menampilkan halaman web. HTML
saat ini merupakan standar Internetyang didefinisikan dan dikendalikan penggunaannya oleh
World Wide Web Consortium (W3C). HTML dibuat oleh kolaborasi Caillau TIM dengan
Berners-lee robert ketika mereka bekerja di CERN pada tahun.

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

Tahun 1986, ISO menyatakan bahwa IBM memiliki suatu konsep tentang dokumen
yang sangat baik, dan kemudian mengeluarkan suatu publikasi ( ISO 8879 ) yang menyatakan
markup language sebagai standar untuk pembuatan dokumen-dokumen. ISO membuat bahasa
ini dari GML milik IBM, tetapi memberinya nama lain, yaitu SGML ( Standard Generalized
Markup Language). ISO dalam publikasinya meyakini bahwa SGML akan sangat berguna
untuk pemrosesan informasi teks dan sistem-sistem perkantoran. Tetapi diluar perkiraan ISO,
SGML dan terutama subset dari SGML, yaitu HTML juga berguna untuk menjelajahi
internet. Khususnya bagi mereka yang menggunakan World Wide Web.

Mulai pada tahun tahun 1989, sebuah nama HTML muncul dari pemikiran Caillau
Tim yang bekerja sama dengan Banners Lee Robert yang ketika itu masih bekerja di CERN
memulai mengembangkan bahasa pemrograman ini, dan dipopulerkan pertama kali dengan
browser Mosaic. Mulai dari tahun 1990 HTML sangat berkembang dengan cepat hingga
mencapai versi HTML versi 5.0 yang digarap pada 4 Maret 2010 kemarin oleh W3C

HTML versi 1.0 ini adalah versi pertama sejak lahirnya nama html tersebut, memiliki
sebuah kemampuan untuk heading, paragraph, hypertext, bold dan italic text, wrapping serta
memiliki dukungan dalam peletakan sebuah gambar

HTML versi 2.0 pada 14 Januari 1996, pada versi ini ada beberapa tambahan
kemampuan diantaranya penambahan form comment, hal ini menyebabkan adanya sebuah

1
interaktif dan mulai dari versi ini yang menjadikan sebuah pioneer dalam perkembangan
homepage interaktif.

Tak lama kemudian HTML versi 3.0 dirilis pada 18 Desember 1997 yang sering
disebut sebut sebagai HTML+ yang mempunyai kemampuan dalam beberapa fasilitas
diantaranya adalah penambahan fitur table dalam paragraph, akan tetapi versi ini tidak
bertahan lama.

Dan pada bulan Mei 1996 dikeluarkan versi baru sebagai pengganti dan
penyampurnaan versi 3.0 ini yaitu HTML versi 3.2, 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 di bakukan versi 3.2 untuk
mengakomodasi praktek yang banyak digunakan oleh pengembang browser dan diterima
secara umum, dapat dikatakan bahwa versi 3.2 ini merupakan versi 3.0 yang dikembangkan
oleh beberapa pengembang browser seperti Netscape dan Microsoft.

Perombakan terakhir terjadi pada tahun 1999 tepatnya tanggal 24 Desember yaitu
HTML versi 4.0, seperti yang kita kenal HTML pada saat ini penambahan link, meta,
imagemaps, image dan lain lain sebagai penyempurnaan versi 3.2.

Pada tanggal 4 Maret 2010, terdapat sebuah informasi bahwa HTML versi 5.0 yang
merupakan sebuah bahasa markah untuk menstrukturkan dan menampilkan isi dari Waring
Wera Wanua, sebuah teknologi inti dariInternet. HTML5 adalah revisi kelima dari HTML
(yang pertama kali diciptakan pada tahun 1990 dan versi keempatnya, HTML4, pada
tahun1997) dan hingga bulan Juni 2011 masih dalam pengembangan. Tujuan utama
pengembangan HTML5 adalah untuk memperbaiki teknologiHTMLagar mendukung
teknologi multimedia terbaru, mudah dibaca oleh manusia dan juga mudah dimengerti oleh
mesin.

HTML5 merupakan salah satu karya Konsortium Waring Wera Wanua(World Wide
Web Consortium, W3C) dan dan IETF (Internet Engineering Task Force) yaitu sebuah
organisasi yang menangani HTML sejak versi 2.0. untuk mendefinisikan sebuah bahasa
markah tunggal yang dapat ditulis dengan cara HTML ataupun XHTML. HTML5 merupakan
jawaban atas pengembangan HTML 4.01 dan XHTML 1.1 yang selama ini berjalan terpisah,
dan diimplementasikan secara berbeda-beda oleh banyak perangkat lunak pembuat web.

2
 Kelompok Kerja Teknologi Aplikasi Web Hyperteks (Web Hypertext Application
Technology Working Group, WHATWG) mulai membuat standar baru ini pada tahun 2004
ketika Konsortium W3C sedang fokus pada pengembangan XHTML 2.0 di masa depan,
sementara HTML 4.01 belum pernah diperbarui sejak tahun 2000.Sejak tahun 2009, W3C
dan WHATWG bekerja sama dalam pengembangan HTML5 setelah W3C mengakhiri
Kelompok Kerja Pengembangan XHTML 2.0.Meskipun HTML5 telah dikenal luas oleh para
pengembang web sejak lama, HTML5 baru mencuat pada April 2010 setelah CEO Apple
Inc., Steve Jobs, mengatakan bahwa dengan pengembangan HTML5, “Adobe Flash sudah
tidak dibutuhkan lagi untuk menyaksikan video atau menyaksikan konten apapun di web.”

2.2 Pengertian HTML5

Hypertext Mark up Language atau biasa dikenal dengan HTML merupakan suatu
metode untuk mengimplementasikan konsep hypertext dalam suatu naskah atau dokumen.
HTML sendiri bukan tergolong pada suatu bahasa pemrograman karena sifatnya yang hanya
memberikan tanda (marking up) pada suatu naskah teks dan bukan sebagai program. HTML
merupakan protokol yang digunakan untuk mentransfer data atau dokumen dari web server
ke dalam browser (Internet Explorer atau Netscape Navigator).

Pengertian HTML sendiri bila dijabarkan berdasarkan kata-kata penyusunannya

HTML dapat diartikan lebih dalam lagi menjadi:

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.

Markup
Pada pengertiannya disini markup menunjukan bahwa pada file HTML berisi suatu
intruksi tertentu yang dapat memberikan suatu format pada dokumen yang akan ditampilkan
pada WWW.

Language
Meski HTML sendiri bukan merupakan bahasa pemrograman, HTML merupakan
kumpulan dari beberapa intruksi yang dapat digunakan untuk mengubah-ubah format suatu
naskah atau dokumen.

3
 Pada awalnya HTML dikembangkan sebagi subset SGML (Standard Generalized
Mark-up Language). Karena HTML didedikasikan untuk ditransmisikan melalui media
Internet, maka HTML relatif lebih sederhana dari pada SGML yang lebih di tekankan pada
format dokumen yang berorientasi pada aplikasi.

HTML sendiri memiliki banyak versi dan versi terbaru saat ini yaitu HTML5.
HTML5 adalah versi terbaru teknologi hypertext/web yang sekarang ini masih dalam tahap
pengembangan. HTML5 ini akan menjadi trend teknologi internet masa depan karena sudah
diperkaya dengan fitur-fitur ungulan yang tentunya akan menjadi standard pengembangan
media informasi berbasis web.

Tujuan dibuatnya HTML5 antara lain:

a) Fitur baru harus didasarkan pada HTML, CSS, DOM , dan JavaScript.
b) Mengurangi kebutuhan untuk plugin eksternal (seperti Flash).
c) Penanganan kesalahan yang lebih baik.
d) Lebih banyak markup untuk menggantikan scripting.
e) HTML5 merupakan perangkat mandiri.

Sekarang HTML5 sudah mulai digunakan pada beberapa situs-situs besar sebagai uji
coba kelayakan fitur serta teknologi baru yang masih terus dikembangkan dari versi
sebelumnya yaitu HTML 4.01. Fitur serta perbaikan yang ditanamkan dalam teknologi ini
dintaranya adalah video dan audio, database lokal dan css3. Ada beberapa tambahan elemen
serta atribut yang memungkinkan HTML5 ini lebih baik dari sebelumnya, walaupun secara
mendasar perintah-perintah yang digunakan sangat mirip dengan HTML versi 4.01. Berikut
adalah beberapa browser yang dapat mendukung HTML yaitu:
- 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)

Namun sebelum mengenal lebih jauh mengenai HTML5 alangkah baiknya perlu
diketahui beberapa hal tentang HTML5, diantaranya :

- HTML5 menawarkan elemen-elemen yang umum digunakan dalam sebuah struktur

halaman website. Sehingga, penulisan tag setiap elemen dapat terlihat lebih semantic

4
 dan mudah dibaca, seperti pada gambar. Terdapat banyak manfaat jika menggunakan
struktur seperti ini. Elemen “header” merepresentasikan header dari suatu section.
Elemen “footer” juga merepresentasikan footer dari suatu section. Elemen “nav”
cocok digunakan untuk merepresentasikan link navigasi. Sedangkan elemen “section”
merepresentasikan suatu bagian generic dari dokumen.
- Struktur semantic. Pada XHTML, programmer HTML bisa saja menjadi pembuat
stress programmer CSS karena struktur halaman yang dibuatnya. Harus ada
kesepakatan penamaan yang solid antara kedua pihak agar tidak ada masalah
pembacaan struktur halaman. Biasanya, dalam XHTML akan dibuat sebuah “div”
dengan id-nya masing-masing.
- Deklarasi doctype baru. Dalam membuat sebuah halaman dengan HTML5, tentu saja
doctype yang digunakan juga harus benar. Doctype pada HTML5 jauh lebih
sederhana daripada XHTML, sehingga Anda tidak perlu menghafalnya. Pada doctype
untuk XHTML 1.0, Anda harus menuliskannya dengan panjang.
- Validasi email. Dengan validasi langsung di tampilan, maka dapat mencegah
seseorang user untuk memanggil script website dengan input yang salah. Ini dapat
mengurangi jumlah request yang tidak valid terhadap script program Anda. HTML5
menawarkan fitur validasi email secara langsung dengan mengubay type dari elemen
input menjadi “email”. Namun hal ini sangat disanyangkan karena masih belum
semua browser memberikan support untuk fitur ini.
- Contenteditable. Yaitu atribut baru dari HTML5 yang memungkinkan sebuah elemen
untuk dimodifikasi langsung pada tampilan. Jika dikombinasikan dengan sedikit
Javascript, fitur ini bisa menghasilkan sebuah mekanisme input yang cukup powerful
namun mudah untuk dibuat.
- Internet Explorer Hack. Seperti biasanya, Internet Explorer selalu terlambat dalam
mengimplementasikan teknologi website terbaru, meski Microsoft selalu memiliki
teknologi sendiri seperti silverlight untuk browsernya tersebut. Pada IE, secara default
semua elemen akan ditampilkan secara “inline”. Untuk itu, Anda harus
mendeklarasikan style tersendiri agar tampilan dapat seperti seharusnya.
- Atribut required. Satu lagi untuk input pada HTML5, memungkinkan validasi pada
sisi client terhadap input yang harus diisi. Dengan demikian, tidak diperlukannya lagi
membuat fungsi javascript untuk melakukannya. Cukup menambahkan atribut
“required” pada elemen “input”. Jika tombol submit ditekan, akan muncul pesan error.

5
Masih banyak elemen html5 lainnya seperti canvas, video, audio, mark, dan sebagainya.
Setiap elemen akan berperilaku berbeda di setiap browser, karena memang standart resminya
belum dikeluarkan oleh W3C.

2.3 Fungsi dan Kegunaan HTML5

HTML sendiri memiliki fungsi umum yakni untuk mengelola serangkaian data dan
informasi sehingga suatu dokumen dapat diakses dan ditampilkan di Internet melalui layanan
web. Selain fungsi umum diatas ada beberapa fungsi lain dari dari HTML yaitu:

- Membuat halaman web.

- Menampilkan berbagai informasi di dalam sebuah browser Internet.
- Membuat link menuju halaman web lain dengan kode tertentu (hypertext).
- Membentuk tata letak dokumen, dalam hal ini menentukan jenis huruf, gambar, dan
komponen dokumen lainnya.
- Menentukan hubungan ke dokumen lain, HTML merupakan suatu bahasa komputer
yang termasuk dalam katagori SGML (Standard Generalized Markup Language)
dimana bentuknya merupakan file standar ASCII yang berisi kode-kode untuk
mengatur dokumen.
- Menentukan ukuran dan alur tulisan.
- Mengintegerasikan gambar dengan tulisan.
- Membuat Pranala.
- Mengintegerasikan berkas suara dan rekaman gambar hidup.
- Membuat form interaktif.
- Menampilkan suatu kelompok kata dalam beberapa ukuran yang dapat digunakan
untuk judul, heading dan sebagainya.
- Menampilkan tulisan dalam bentuk cetakan tebal
- Menampilkan sekelompok kata dalam bentuk miring.
- Menampilkan naskah dalam bentuk huruf yang miring dengan hasil ketikan mesin
ketik.
- Mengubah-ubah ukuran tulisan untuk suatu karakter tertentu.

Selain memiliki fungsi-fungsi yang telah disebutkan diatas HTML juga memiliki
beberapa kegunaan, antara lain:

a. Membuat link

6
 Konsep hypertext pada HTML memungkinkan kita untuk membuat link pada suatu
kelompok kata atau frase untuk menuju ke bagian manapun dalam World Wide Web.
Ada tiga macam link yang dapat kita gunakan :
- Link menuju bagian lain dari page
- Link menuju page lain dalam satu web site
- Link menuju resource atau web site yang berbeda

b. Memodifikasi format teks

Penggunaan HTML memungkinkan kita untuk memodifikasi tampilan atau format
dokumen yang akan kita transmisikan melalui media Internet. Beberapa hal yang
dapat dilakukan dalam menentukan format dokumen ini yaitu:
- Dapat menampilkan suatu kelompok kata dalam beberapa ukuran yang dapat
digunakan untuk judul, heading dan sebagainya.
- Dapat menampilkan teks dalam bentuk cetakan tebal
- Dapat menampilkan sekelompok kata dalam bentuk miring
- Dapat menampilkan naskah dalam bentuk huruf yang mirip dengan hasil ketikan
mesin ketik

- Dapat mengubah-ubah ukuran font untuk suatu karakter tertentu.

c. Menampilkan daftar sesuatu dalam bentuk point-point (item)

Dengan HTML kita dapat menampilkan daftar atau deretan informasi dalam bentuk
point-point sehingga lebih mudah dibaca dan dipahami Membuat link. Konsep
hypertext pada HTML memungkinkan kita untuk membuat link pada suatu kelompok
kata atau frase untuk menuju ke bagian manapun dalam World Wide Web. Ada tiga
macam link yang dapat kita gunakan :
- Link menuju bagian lain dari page
- Link menuju page lain dalam satu web site

- Link menuju resource atau web site yang berbeda

d. Menyisipkan citra

Dengan menyisipkan citra maka tampilan page kita akan lebih menarik, interaktif dan
informatif untuk mendukung data-data lainnya dalam bentuk teks.

e. Menampilkan informasi dalam bentuk tabel

7
 Penampilan informasi dalam bentuk tabel ini akan mempermudah pembaca untuk
memahami informasi yang kita tawarkan. Penggunaan tabel ini juga dapat dilakukan
untuk menambah nilai estetika dari page yang akan kita rancang.

2.4 Hal-hal Baru Pada HTML5

2.4.1 Elemen Baru Di Html 5
Dengan muncuknya versi terbaru dari HTML yakni HTML versi ke-5 maka HTML5
membawa beberapa elemen-elemen baru untuk mewujudkan struktur halaman web yang
lebih baik. Elemen HTML sendiri merupakan semua yang terdapat diantara start tag sampai
end tag. Beberapa elemen-elemen baru yang terdapat pada HTML5 diantaranya:

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

8
<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.4.2 Atribut Baru Di Html 5

Atribut HTML merupakan suatu informasi elemen, dimana atribut ini memberikan
informasi tambahan tentang elemen yang bersangkutan. Atribut selalu digunakan pada awal
tag/start tag. Cara untuk medefinisakan atribut dengan memberikan informasi NAME dan
VALUE dari suatu elemen, seperti name=”value“. Sebelum menuju pada atribut-atribut baru
yang ada pada HTML5, sebelumnya HTML sendiri memiliki atribut-atribut standar yang
hampir dipakai pada semua elemen. Atribut-atribut standar tersebut terbagi menjadi tiga
kelompok, yakni Atribut Core, Atribut Language, dan Atribut Event.

a) Atribut Core

9
 Atribut-atribut core tidak boleh digambarkan untuk elemen BASE, HEAD, HTML,
META, PARAM, SCRIPT, STYLE, dan TITLE. Atribut-atribut core antara lain CLASS,
ID, STYLE, dan TITLE.

Atribut CLASS digunakan untuk menetapkan nama kelas untuk elemen-elemen HTML,
nantinya aturan CSS dengan class selectornya dapat mengacu kepada nilai dari atribut
CLASS elemen-elemen HTML yang terkait.
Contoh:
<HTML>
<HEAD>
<STYLE TYPE="text/css">
P.kelas {
color:blue;
}
</STYLE>
</HEAD>
<BODY>
<P CLASS="kelas">Alinea</P>
</BODY>
</HTML>

Atribut ID digunakan untuk menetapkan pengenal unik untuk sebuah elemen HTML,
nantinya aturan CSS dengan Id selectornya dapat mengacu kepada nilai dari atribut ID
sebuah elemen HTML. Nilai atribut ID adalah unik. Ini menggambarkan bahwa satu elemen
dengan dengan elemen HTML lainnya tidak boleh memiliki nilai atribut ID yang sama,
beda dengan atribut CLASS!

Contoh:
<HTML>
<HEAD>
<STYLE TYPE="text/css">
P#id {
color:blue;
}
</STYLE>

10
</HEAD>
<BODY>
<P ID="id">Alinea</P>
</BODY>
</HTML>

Atribut STYLE digunakan untuk menerapkan aturan CSS langsung didalam tag awal
dari elemen-elemen HTML yang terkait.

Contoh:
<HTML>

<BODY>

<P STYLE="color:red">merah</P>

<P STYLE="color:blue">biru</P>

</BODY>

</HTML>

Atribut TITLE digunakan untuk memberikan ekstra informasi tambahan berupa teks
untuk sebuah elemen HTML. Nilai atribut TITLE ini akan ditampilkan sebagai tooltip, yaitu
ketika pointer mouse tepat diatas sebuah elemen. Atribut TITLE sangat penting untuk elemen
A, IMG, ABBR, dan ACRONYM.

Contoh:

<HTML>
<BODY>
<P>Saya kuliah di<ABBR TITLE="Universitas Negeri Semarang">TI</ABBR></P>
</BODY>
</HTML>

b) Atribut Language
Atribut-atribut language tidak boleh digambarkan untuk elemen BASE, BR, FRAME,
FRAMESET, HR, IFRAME, PARAM, dan SCRIPT. Atribut-atribut language antara lain
DIR dan LANG.

11
 Atribut DIR digunakan untuk menggambarkan arah-arah penulisan untuk isi didalam
sebuah elemen HTML. Apakah arah penulisannya dari arah kiri ke kanan ("ltr") atau dari
arah kanan ke kiri ("rtl").

Contoh:
<HTML>
<BODY>
<P LANG="id" DIR="ltr">teks rata kanan</P>
<P LANG="id" DIR="rtl">teks rata kiri</P>
</BODY>
</HTML>

Atribut LANG digunakan untuk menetapkan kode bahasa untuk isi didalam sebuah
elemen HTML. Untuk nilai dari atribut LANG ini, anda dapat lihat di ID-ID Bahasa HTML.

c) Atribut Event
Berikut adalah daftar dari atribut-atribut event yang dapat digambarkan untuk elemen-
elemen HTML:
Atribut event ONCLICK digunakan untuk menetapkan bahwa sebuah script akan
dijalankan ketika pengguna mengklik dengan mouse pada sebuah elemen.
Contoh:
<HTML>
<BODY>
<INPUT TYPE="button" VALUE="Klik!" ONCLICK="javascript:alert('Event ONCLICK
dipanggil')">
</BODY>
</HTML>

Atribut event ONDBLCLICK digunakan untuk menetapkan bahwa sebuah script akan
dijalankan oleh browser ketika pengguna mengklik dua kali dengan mouse pada sebuah
elemen.
Contoh:
<HTML>
<BODY>
<INPUT TYPE="button" VALUE="Klik!" ONDBLCLICK="javascript:alert('Event
ONDBLCLICK dipanggil')">
</BODY>

12
</HTML>

Atribut event ONMOUSEDOWN digunakan untuk menetapkan bahwa sebuah script

akan dijalankan oleh browser ketika tombol mouse ditekan.
Contoh:
<HTML>
<BODY>
<INPUT TYPE="button" VALUE="Klik!" ONMOUSEDOWN="javascript:alert('Event
ONMOUSEDOWN dipanggil')">
</BODY>
</HTML>

Atribut ONMOUSEMOVE digunakan untuk menetapkan bahwa sebuah script akan

dijalankan oleh browser ketika mouse digerakkan.
Contoh:
<HTML>
<BODY>
<IMG SRC="example.com.gif" ONMOUSEMOVE="alert('Menuju ke Example.com!')">
</BODY>
</HTML>

Atribut event ONMOUSEOUT digunakan untuk menetapkan bahwa sebuah script

akan dijalankan oleh browser ketika mouse digerakkan keluar dari sebuah elemen.
Contoh:
<HTML>
<BODY>
<IMG SRC="example.com.gif" ONMOUSEOUT="alert('Menuju ke Example.com!')">
</BODY>
</HTML>

Atribut event ONMOUSEOVER digunakan untuk menetapkan bahwa sebuah script

akan dijalankan oleh browser ketika mouse digerakkan tepat diatas sebuah elemen.
Contoh:
<HTML>
<BODY>
<IMG SRC="example.com.gif" ONMOUSEOVER="alert('Menuju ke Example.com!')">
</BODY>
</HTML>

13
 Atribut event ONMOUSEUP digunakan untuk menetapkan bahwa sebuah script akan
dijalankan oleh browser ketika tombol mouse dilepaskan, setelah sebelumnya tombol mouse
ditekan.
Contoh:
<HTML>
<BODY>
<IMG SRC="example.com.gif" ONMOUSEUP="alert('Menuju ke Example.com!')">
</BODY>
</HTML>

Atribut event ONKEYDOWN digunakan untuk menetapkan bahwa sebuah script

akan dijalankan oleh browser ketika sebuah tombol keyboard ditekan.
Contoh:
<HTML>
<BODY>
<SCRIPT TYPE="text/javascript">
function bukanAngka(e){
var keyAngka;
var keyKarakter;
var cekAngka;
if(window.event){//IE
keyAngka = e.keyCode;
}else if(e.which) {//Netscape/Firefox/Opera
keyAngka = e.which;
}
keyKarakter = String.fromCharCode(keyAngka);
cekAngka = /d/;
return !cekAngka.test(keyKarakter);
}
</SCRIPT>
<FORM>
Ketikkan hanya teks bukan angka:
<INPUT TYPE="text" ONKEYDOWN="return bukanAngka(event)">
</FORM>
</BODY>

14
</HTML>

Atribut event ONKEYUP digunakan untuk menetapkan bahwa sebuah script akan
dijalankan oleh browser ketika tombol keyboard dilepaskan, setelah sebelumnya ditekan.
Contoh:
<HTML>
<HEAD>
<SCRIPT TYPE="text/javascript">
function hurufBesar(x){
var y=document.getElementById(x).value;
document.getElementById(x).value=y.toUpperCase();
}
</SCRIPT>
</HEAD>
<BODY>
Nama: <INPUT TYPE="text" ID="nama" ONKEYUP="hurufBesar(this.id)">
</BODY>
</HTML>

Setelah disebutkan atribut-atribut standar pada HTML, berikut merupakan atribut-atribut baru
yang dimiliki oleh HTML5:

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

Contoh Atribut :
Link HTML atau HTML Links didefinisikan dengan tag <a>. Alamat link inilah yang
merupakan atribut.

<a href="http://www.tik.org/">Tik</a>

<a> merupakan elemen html, href adalah name atau nama atribut sedang Tik adalah value
atau nilai atribut.

Nilai suatu atribut harus selalu dimulai dan diakhiri dengan tanda petik. Biasanya
menggunakan tanda petik (“…”). Tanda petik ini mengapit petikan langsung dari suatu nilai

15
elemen. Tanda petik tunggal juga diperbolehkan untuk digunakan walaupun dalam keadaan
tertentu nilai suatu atribut bisa berisi tanda kutip, untuk itu di pergunakan tanda kutip tunggal
yang mengapit petikan yang tersusun di dalam petikan lain. Contoh:

name=’Organisasi “Cracker” Semarang’

Sangat disarankan untuk penulisan atribut dan nilainya tetap menggunakan huruf kecil
karena pada versi HTML yang lebih baru (X)HTML meminta penulisan menggunakan huruf
kecil.

2.4.3 Fitur Baru Pada HTML5

Dengan versi terbaru dari HTML ini, pasti juga memiliki beberapa fitur baru yang
belum ada pada versi-versi sebelumnya. Berikut fitur-fitur baru yang dimilki HTML5, yaitu:

1) Canvas
Fitur yang satu ini memungkinkan kita untuk memasukkan objek 2D atau 3D kedalam
halaman web. Dengan canvas dapat membuat render grafik, diagram, gambar dan
animasi secara dinamis. Awal mulanya konsep dari teknologi canvas ini
diperkenalkan oleh Apple Inc. untuk digunakan dalam Mac OS X WebKit untuk
membuat dashboard widgets. Sebelum canvas muncul, kita hanya bisa membuat
gambar dalam browser melalui plug-ins seperti Adobe plug-ins for Flash and Scalable
Vector Graphics (SVG), Vector Markup Language (VML) only in Internet Explorer,
or other clever JavaScript hacks.
Namun cara kerja canvas tidak bisa bekerja sendiri. Dibutuhkan javascript untuk
membuat objek di dalamnya, baik 2D maupun 3D. Saat akan menambahkan elemen
canvas ke halaman web Anda, Anda bisa memanipulasinya dengan berbagai macam
cara.
Untuk membuat objek di dalam canvas kita dapat mengunakan 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>

16
 var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.fillStyle="#FF0000";
ctx.fillRect(0,0,150,75);
</script>

</body>
</html>
Sehingga dapat dihasilkan objek seperti berikut ini:
Pada Mozilla 9.0.1

Pada Google chrome

Pada Opera 12.10 beta RC

2) Doctype baru
HTML lama yang biasanya memiliki Doctype yang panjang, HTML5 datang dengan
membawa doctype yang lebih singkat sehingga kita tak perlu menghapal doctype
lama yang panjang. Hal ini dapat dibuktikan dengan contoh berikut ini:
Dalam HTML 4 penulisan doctype seperti ini:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

17
 "http://www.wwe.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
Namun dengan HTML5 penulisannya hanya seperti ini
<!DOCTYPE html>
3) HTML5 Audio
Salah satu fitur baru HTML5 yang paling fenomenal 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>
Maka hasilnya akan seperti berikut:

Di coba pada Google chrome Versi 22.0.1229.94

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

18
 - 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

4) 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 didapat hasil seperti berikut:

19
 Di tes pada Google chrome Versi 22.0.1229.94
5) Geolocation
Sebuah API (Aplication Programming Interface) yang menarik, yang memungkinkan
pengguna untuk berbagi lokasi mereka dengan aplikasi web. Menggunakan API
Geolocation cukup mudah. Cukup meminta sebuah posisi (lokasi) dan jika pengguna
menyetujui permintaan tersebut browser akan memberikan informasi lokasi tersebut.
Posisi disediakan untuk browser oleh perangkat yang mendasari (misalnya, laptop
atau ponsel) di mana Geolocation – enabled pada browser sedang berjalan. Informasi
lokasi yang disediakan sebagai satu set koordinat lintang dan bujur bersama dengan
metadata tambahan.
6) Media Penyimpanan (Storage)
Dengan HTML5, halaman web dapat menyimpan data secara lokal dalam browser
pengguna. Sebelumnya, hal ini dilakukan dengan cookie. Namun, Penyimpanan Web
lebih aman dan lebih cepat. Data ini tidak disertakan dengan setiap permintaan server,
tetapi digunakan hanya ketika meminta. Hal ini juga memungkinkan untuk
menyimpan data dalam jumlah besar, tanpa mempengaruhi kinerja website. Data
disimpan dalam kunci / nilai pasangan, dan halaman web hanya dapat mengakses data
yang disimpan dengan sendirinya.
Dengan HTML5, web buatan kita dapat menyimpan data secara lokal didalam
browser user, sebelumnya hal ini dekerjakan dengan cookies.
Penyimpanan web menjadi lebih aman dan lebih cepat, karena data tidak disertakan
dengan setiap permintaan ke server, tetapi hanya ketika meminta data.
Fitur ini juga memungkinkan penyimpanan data dengan jumlah besar, tanpa
mempengaruhi kinerja website.
Seperti pada konsep Offline fitur, HTML5 mendukung beberapa jenis media
penyimpanan baru yaitu Web Storage (name/value pairs), Indexed DB, dan Web SQL

20
 Database. Keuntungan dari adanya berbagai macam media penyimpanan ini adalah
peningkatan kecepatan dari aplikasi.
7) Cross Document Messaging
Sampai saat ini, komunikasi antara frame, tab, dan jendela di browser yang berjalan
sepenuhnya dibatasi karena masalah keamanan. Dapat berkomunikasi antar frame
mungkin berguna untuk situs tertentu untuk berbagi Informasi dari dalam browser,
tetapi juga akan membuka kemungkinan untuk serangan berbahaya. Jika browser
diberikan kemampuan untuk pemrograman mengakses konten dimuat ke frame lain
dan tab, situs akan dapat mencuri informasi apapun yang mereka bisa dapatkan dari
konten situs lain yang menggunakan scripting. Contoh klasik adalah "mashup",
kombinasi dari aplikasi yang berbeda seperti pemetaan, chatting, dan berita dari
berbagai situs, semua dikombinasikan bersama untuk membentuk sebuah meta-
aplikasi baru. Di kasus ini, satu set yang terkoordinasi dengan baik dari aplikasi akan
dilayani oleh saluran komunikasi langsung dalam browser itu sendiri. Untuk
memenuhi kebutuhan ini, vendor browser dan badan standar sepakat untuk
memperkenalkan fitur baru: Cross Document Messaging.
8) WebSocket API
Fitur komunikasi yang paling powerfull di spesifikasi HTML5: WebSocket, yang
mendefinisikan saluran komunikasi full-duplex yang beroperasi melalui soket tunggal
dalam web. WebSocket tidak hanya peningkatan tambahan untuk konvensional HTTP
komunikasi, melainkan merupakan kemajuan yang besar, terutama untuk real-time,
event-driven aplikasi web.
9) Semantic/Struktur Element Yang Baru
Para web designer yang suka sekali memainkan elemen div, nav, dan lainnya, akan di-
stop oleh fitur Semantics dalam HTML5. Semantics akan menjadi masa depan bagi
para tetua tag layout dan format. Pastinya web akan menjadi lebih dinamis dan
menarik akibat fitur ini. Fitur ini menjadikan web site yang menggunakan teknologi
HTML 5 lebih mudah dikenali oleh Google Search Engine. Akibatnya, web aplikasi
akan sering muncul pada mesin pencari google sehingga akan lebih sering diakses dan
cepat diketahui oleh orang lain.
10) Web Workers
Seringkali ditemukan jika halaman web yang memiliki banyak Javascript yang
berakibat pada browser melambat dan komputer nge-hang. Tetapi dengan adanya

21
 Web Workers memungkinkan halaman web untuk memproses Javascript yang mereka
miliki dengan respon yang lebih cepat dan multitasking.

Dengan semua fitur yang telah disebutkan di atas dapat dilihat bahwa HTML5 akan
merajai dunia aplikasi kedepannya. Meskipun belum seluruh web browser mendukung
teknologi ini, tetapi kemudahan dalam pengembangan maupun penggunaan diyakini akan
menjadi nilai dari teknologi ini.

HTML5 memang belum menjadi standar resmi, dan belum ada browser yang
memiliki dukungan HTML5 secara penuh. Namun pada beberapa browser sudah
menambahkan HTML5 pada versi terbaru mereka, misalnya (Safari, Chrome, Firefox, Opera,
dan Internet Explorer)

2.5 Kelebihan dan Kelemahan HTML5

2.5.1 Kelebihan HTML5

Kelebihan yang paling mencolok dari HTML5 adalah kemudahan akses yang lebih
baik. Tag Baru seperti header, footer, nav, section, dll memungkinkan browser untuk
mengakses konten dengan lebih mudah. Sebelumnya, kita hanya menentukan hal tersebut
dengan tag dan menggunakan atribut id ataupun class. Dengan tag html5 yang baru, browser
mampu menjelajah dokumen HTML dengan lebih baik lagi. Selain itu dukungan yang lebih
baik terhadap video dan audio. Kelebihan HTML5 yang lainnya antara lain:

 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.
 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.
 Improved Accessibility, dengan teknologi HTML5 yang memudahkan struktur
pembangunan sebuah web, maka developer dapat membangun pemahaman yang lebih
detil mengenaik halaman web.
 Improve Semantics, dengan berbagai elemen kode di dalam html5 yang telah
distandarisasi, maka nilai semantik dari sebuah web dapat lebih ditingkatkan. Hal ini

22
 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”.
 Geolocation, HTML5 mempunyai API yang terintegrasi terhadap geolocation,
fasilitas tersebut dapat diakses melalui GPS atau fasilitas lain seperti Google Latitude
pada iphone.
 Client-side Database, HTML5 menyediakan model database SQL yang baru dengan
API yang dapat dibangun dalam konsep lokal, dalam hal ini di sisi client.
 Offline Aplication Cache, pengguna dapat terus melakukan interaksi dengan aplikasi
meskipun mereka terputus dari jaringan internet.
 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.
 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).
 Dukungan yang lebih baik untuk penyimpanan secara offline
 Unsur kanvas untuk menggambar
 Video dan elemen audio untuk media pemutaran file multimedia
 Elemen konten yang lebih spesifik, seperti artikel, footer, header, nav, section
 Bentuk kontrol form seperti kalender, tanggal, waktu, email, url, search
 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.
 HTML5 merupakan perangkat mandiri
 Penanganan kesalahan yang lebih baik
 Mengurangi kebutuhan untuk plugin eksternal ( Seperti Flash )
 Lebih markup untuk menggantikan scripting
2.5.2 Kelemahan HTML5
Seperti halnya teknologi-teknologi lain yang dimana mempunyai banyak kelebihan
pasti juga ada kekurangannya. Hal ini pun terjadi pada teknologi HTML5. Kekurangan
HTML5 yaitu masih dalam pengembangan, sehingga hanya beberapa browser yang sudah

23
mendukung HTML5, akibatnya fitur-fitur pada HTML 5 tidak semuanya bisa berfungsi
dengan baik pada beberapa browser.

2.6 Implementasi HTML5

Seperti yang telah banyak dijelaskan diatas, HTML5 merupakan salah satu teknologi
yang sangat ditunggu-tunggu oleh para web developer maupun para pengguna Internet.
Banyak hal yang dijanjikan akan hadir di HTML 5 yang dapat mengubah sebuah website
menjadi lebih interaktif serta lebih kaya konten dan fungsinya. Tetapi sayangnya
implementasinya masih belum sempurna. Masalah kompatibilitas/pendukung dari browser
dan juga belum matangnya HTML 5, telah menjadi sedikit kendala. Walupun begitu, sudah
banyak para developer web yang mencoba membuat aplikasi web berbasiskan HTML 5.
Berikut 5 contoh website yang sudah mengimplementasikan fitur yang diberikan HTML 5
dengan tepat dan menarik.
1. DeviantART muro
Sebuah aplikasi web “drawing” yang memiliki efek menarik di brush toolnya.
DeviantART muro juga mendukung fitur layering serta fitur “save on the fly” yang
tentunya menggunakan konsep cloud computing.

2. Bert’s Breakdown
24
 Contoh penggunaan HTML 5 untuk membuat game bisa kita lihat disini. Grafis yang
disuguhkan cukup halus di game ini. Bert’s Breakdown mampu menunjukan
bagaimana keunggulan HTML 5 di dunia web based game development.

3. Canvas + SoundManager Audio Player dengan Efek Waveform

Pemutar audio berbasis HTML 5 ini cukup menarik. Dengan didukung UI yang
mempercantik tampilan player nya, serta implementasi animasi yang cukup rumit,
membuat website ini menunjukan kekuatan HTML 5 di segi multimedia. Khususnya
untuk konten audio.

4. Pendeteksi Wajah dengan JavaScript melalui HTML5 Canvas

Kita mungkin sudah sering melihat fitur pendeteksi wajah di berbagai aplikasi seperti
iPhoto dan juga Picasa. Bahkan Facebook juga sudah mengeluarkan fitur seperti ini.
Uniknya face detection ini dibuat dengan hanya memanfaatkan JavaScript + HTML 5
saja.

5. Wikipedia Knowledge Map

25
 Wikipedia Knowledge Map adalah salah satu implementasi dari penggunaan HTML 5
yang cukup unik. Fitur utama yang disuguhkan adalah pembuatan Knowledge Map
menggunakan HTML 5, yang menghubungkan artikel-artikel yang ada di Wikipedia.

Sumber :
https://www.academia.edu/5242952/
MAKALAH_MENGENAL_HTML5_Disusun_untuk_Memenuhi_Tugas_Mata
_Kuliah_Teknologi_Informasi_dan_Komunikasi_Yang_diampu_oleh_Septia_L
utfi

26