Makalah html 5

Makalah HTML 5
Makalah ini dibuat untuk memenuhi tugas mata kuliah
Teknologi Informasi dan Komunikasi

Oleh:
Nama
NIM

:Bagus Hutomo Nugrahanto
: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 disebutsebut 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

<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



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 :



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


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>


Google Chrome Version 22.0.1229.94


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

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

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-barudan.html.Diakses pada 19 Oktober 2013
http://repository.gunadarma.ac.id/bitstream/123456789/4815/1/1.%20DOKUME
N%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-perkembangandan.html. Diakses pada 19 Oktober 2013
http://www.kaskus.co.id/thread/509751de1dd719be13000093/tentang-html5.
http://www.reyvababtista.com/2011/12/html5-apa-fitur-tambahannya.html.
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.
http://blog.haqqi.net/2011/06/komponen-html5-yang-wajib-diketahui/.Diakses
http://www.html5code.com/tutorials/understanding-the-html5-timeline/.Diakses

http://programwahid.blogspot.com/2013/03/dasar-pemrograman-web-denganhtml.html. Diakses pada 23 Oktober 2013

Makalah html 5

Recomendados

Recomendados

Mais conteúdo relacionado

Mais procurados

Mais procurados (20)

Destaque

Destaque (6)

Semelhante a Makalah html 5

Semelhante a Makalah html 5 (20)

Mais de Hutommo Bagus

Mais de Hutommo Bagus (6)

Makalah html 5