PENGANTAR TEKNOLOGI INFORMASI: HTML 5

BAB 1

PENDAHULUAN

A. Latar Belakang

Dunia internet menjadi ruang yang mampu memberikan semua yang dibutuhkan oleh setiap manusia. Namun dunia internet teramat luas bila harus dibahas seutuhnya, dalam internet yang menjadi lahan informasi sebenarnya adalah web. Internet tidak akan terasa bermanfaat bila tidak ada web-web yang menyediakan banyak hal yang diperlukan oleh manusia. Untuk membuat web dibutuhkan bahasa pemrograman yang mampu dibaca oleh berbagai browser. Salah satu bahasa permograman tersebut adalah HTML (Hyper Text Markup Language).

Script-script disusun untuk membentuk sebuah web, dan dari situlah terbentuk sebuah lahan informasi yang begitu besar. Begitulah sekilas penjelasan singkat bagaimana web yang sering kita lihat yang sebenarnya sebuah susuan dari script-script yang rumit. HTML menjadi bahasa yang digunakan untuk untuk menuliskan script dan membentuk web.

Seiring berjalannya waktu HTML yang dulu begitu rumit dan banyak sekali keterbatasan kini telah berubah, HTML telah merilis versi terbarunya yang diberi nama HTML5. Kemudahan-kemudahan banyak ditawarkan pada HTML generasi ke-5 ini. Bagaiamana pembaharuan dan inovasinya akan dibahas dalam makalah ini, namun sebelumnya akan terlebih dahulu dibahas tentang HTML secara umum sebagai pengantar menuju HTML5.

B. Pembatasan Masalah

Berdasarkan latar belakang yang telah diuraikan, maka batasan masalah agar tujuan makalah lebih terfokus dan tertuju pada bahasan, serta tidak terlalu luas yaitu mengenai Mengenal dan Mendalami Perkembangan HTML5.

C. Perumusan Masalah

1. Apa pengertian dari HTML?

2. Bagaimana awal kemunculan HTML?

3. Untuk apa HTML diciptakan?

4. Bagaimana struktur yang menyusun HTML?

5. Sejauh mana HTML telah berkembang?

6. Versi terbaru HTML adalah HTML5, namun sebenarnya apa itu HTML5?

7. Bagaimana sejarah keluarnya HTML5?

8. HTML5 telah terstandar W3C, bagaimana proses itu terjadi?

9. Apa saja mark up baru yang ada pada HTML5?

10. Sebenarnya apa saja yang baru pada HTML5?

11. Bagaimana application programming interface pada HTML5?

12. Sebagai versi terbaru dari HTML apa saja kelebihan dan kekurangan dari HTML5?

13. Bagaimana penerapan HTML5 dalam pembuatan aplikasi berbasis web?

D. Tujuan dan Kegunaan Makalah

1. Sebagai pemenuhan tugas mandiri yang diberikan oleh Dosen Pengantar Teknologi Informasi, Bapak Undang Syaripudin,M.Kom.

2. Mengerti apa yang dimaksud dengan HTML.

3. Memberi gambaran tentang awal kemunculan HTML.

4. Memahami fungsi dari adanya HTML.

5. Mengerti struktur elemen pada HTML.

6. Mengikuti perkembangan-perkembangan HTML.

7. Mengenal HTML5 sebagai versi terbaru HTML.

8. Mengerti sejarah kemunculan HTML5.

9. Memberi gambaran tentang proses HTML5 mendapat predikat terstandar W3C.

10. Mengerti mark up baru yang ada pada HTML5.

11. Mengerti pembaharuan pada HTML 5.

12. Mengerti API pada HTML5.

13. Memahami kelebihan dan kekurangan HTML5.

14. Memberi gambaran tentang cara penggunaan HTML5 dalam pembuatan aplikasi berbasis web.

Sedangkan kegunaan Makalah ini sebagai bahan referensi belajar bagi mahasiswa khususnya, dan para pembaca umumnya.

BAB II

PEMBAHASAN

A. Pengertian HTML

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

B. Sejarah HTML

Konsep HTML diciptakan pertama kali oleh IBM pada tahun 1980 pada saat berniat membuat bahasa kode untuk menggabungkan teks dengan perintah pemformatan agar mengenali elemen dokumen dan untuk meletakkan elemen-elemen yang menandai bagian suatu dokumen seperti judul, alamat dan isi dokumen. Lalu, pada akhirnya elemen-elemen itu menjadi suatu program untuk melakukan pemformatan dokumen secara otomatis. Bahasa pemprograman untuk melakukan tugas tersebut disebut markup language, atau lebih lengkapnya IBM menamai program tersebut sebagai Generalized Markup Language (GML).

Pada tahun 1986, ISO (International Standard Organization) mengeluarkan standarisasi bagi pembuatan dokumen-dokumen behasa markrup berdasarkan GML. Hal ini ditandai dengan keluarnya ISO 8879. ISO menamai GML ini menjadi SGML (Standard Generalized Markup Language). Dalam perkembangannya, bahasa SGML kemudian banyak digunakan di dunia penerbitan.

Pada tahun 1989, Tim Caillau bekerja sama dengan Barners Lee Robert, dan ketika mereka kerja di CERN, sebuah lembaga peneliti fisika energy tinggi di jenewa mencoba untuk menlakukan pengembangan terhadap SGML. Dan akhirnya setelah pemikiran dan perkembangan-perkembangan yang sedemikian rupa rumitnya, lahirlah HTML yang digunakan untuk membuat halaman website. HTML ini pertama kali dipopulerkan oleh browser Mosaic.

Dalam perkembangannya, pada tahun 1990 bahasa pemformatan ini mengalami perkembangan yang sangat pesat. Sejak tahun 1996, World Wide Web Consortium, (W3C) juga ikut serta dalam melakukan pengembangan dan mengeluarkan versi HTML 3.2. sejak itulah HTML digunakan sebagai bahasa standar internet yang merupakan perangkat dibawah kendali W3C.

C. Fungsi HTML

HTML seperti yang dijelaskan sebelumnya merupakan bahasa pemrograman berbahasa markup yang digunakan untuk menampilkan halaman website melalui browser. Namun tentu bukan hal iu saja yang dapat dilakukan HTML, berikut ini fungsi dari HTML:

· Membuat, mendesain, dan mengontrol tampilan dari web page (Halaman Web) dan isinya.

· Mempublikasikan document secara online sehingga bisa di akses, dilihat dan ditampilkan dari dan ke seluruh dunia.

· Membuat online form yang bisa di gunakan untuk menangani pendaftaran, transaksi secara online.

· Menambahkan object-object seperti image, audio, video dan juga java applet (aplikasi java seperti java game dll) dalam document HTML.

· Membuat link menuju halaman web lain dengan kode tertentu (hypertext).

D. Struktur HTML

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

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

C. Atribut

Atribut mendefinisikan properti dari suatu elemen/tag dari HTML, yang terdiri atas nama dan nilai.

E. Perkembangan HTML

HTML yang biasa kita kenal pada tahun 1980 dikembangkan oleh IBM, dengan mengabungkan perintah – perintah pemformatan dokumen. Bahasa ini dinamakan Markup Language, sebuah bahasa yang menggunakan tanda-tanda sebagai basisnya. Dengan menamakan sistemnya sebagai Generalized Markup Language atau GML. Kemudian pada tahun 1986, ISO menyatakan bahwa IBM memiliki 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 ini dari GML dan memberi nama lain yaitu SGML, (Standard Generalized Markup Language). Akan tetapi diluar dugaan ISO, SGML dan subset dari SGML, yaitu HTML juga berguna untuk menjelajahi internet. Khususnya bagi mereka yang menggunakan World Wide Web. Saat ini HTML sudah berkembang hingga HTML versi 5.

Perkembangan HTML hingga saat ini yaitu:

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

2. HTML versi 2.0 pada 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 pioneer dalam perkembangan homepage interaktif.

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

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

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

6. Pada tanggal 4 Maret 2010, terdapat sebuah informasi bahwasanya HTML versi 5.0 masih dikembangkan oleh W3C (World Wide Web Consortium) dan IETF (Internet Engineering Task Force) yaitu sebuah organisasi yang menangani HTML sejak versi 2.0.

F. Mengenal HTML5

HTML5 adalah sebuah bahasa markah untuk menstrukturkan dan menampilkan isi dari Waring Wera Wanua, sebuah teknologi inti dari Internet. HTML5 adalah revisi kelima dari HTML (yang pertama kali diciptakan pada tahun 1990 dan versi keempatnya, HTML4, pada tahun 1997) dan hingga bulan Juni 2011 masih terus dikembangkan. Tujuan utama pengembangan HTML5 adalah untuk memperbaiki teknologi HTML agar mendukung teknologi multimedia terbaru, mudah dibaca oleh manusia dan juga mudah dimengerti oleh mesin.

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

G. Sejarah HTML5

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

H. Proses Standardisasi W3C

Kelompok kerja untuk teknologi aplikasi web hypertext (WHATWG) mulai menspesifikasikan HTML5 pada bulan juni 2004 dengan nama Web Applications 1.0, hingga pada bulan maret 2010 spesifikasi ini masuk ke bagian draft standar di WHATWG, dan ke dalam bagian pengurusan draft di W3C. Ian Hickson mewakili Google.Inc menjadi editor HTML5.

Pada tahun 2007 Spesifikasi HTML5 diadopsi sebagai pekerjaan permulaan untuk grup baru yang mengurus HTML di World Wide Web Consorsium (W3C). Grup ini pertama kali mempublikasikan hasil draft pekerjaan pertama mereka pada tanggal 22 januari 2008. Spesifikasi ini berstatus dalam tahap pengerjaan, dan diperkirakan akan tetap demikian selama bertahun-tahun, meskipun sebagian dari HTML5 sudah dalam tahap penyelesaian dan diimplementasikan pada penjelajah web sebelum keseluruhan spesifikasinya mencapai status rekomendasi final.

Berdasarkan pada jadwal kerja W3C, HTML5 diperkirakan menjadi kandidat rekomendasi pada akhir tahun 2010. Namun, publikasi pertama draft HTML 5 meleset selama 8 bulan. Permintaan dokumen terakhir dan tahap kandidat rekomendasi diharapkan dapat dicapai pada tahun 2008, tetapi hingga bulan Juli 2010 HTML 5 masih dalam tahapan draft pengerjaan di W3C. WHATWG telah meminta penyelesaian terakhir untuk HTML5 sejak bulan oktober tahun 2009.

Editor HTML5, Ian Hickson, berharap spesifikasi HTML5 dapat mencapai tahap kandidat rekomendasi pada tahun 2012. Kriteria di W3C agar sebuah spesifikasi dapat berstatus - Direkomendasikan - adalah "yang kedua: 100% selesai dan penerapannya dapat dilakukan pada dua atau lebih sistem yang berbeda". Pada wawancaranya dengan TechRepublic, Hickson memperkirakan hal ini baru akan terjadi pada tahun 2022 atau setelahnya. Meski demikian, banyak bagian dari spesifikasi sudah stabil dan telah dapat diterapkan.

I. Mark Up

Pada HTML 5 diperkenalkan beberapa elemen baru dan atribut yang merefleksikan tipikal penggunaan website modern. Beberapa diantaranya adalah pergantian yang bersifat semantik pada blok yang umum digunakan: yaitu elemen (<div>) dan inline (<span>), sebagai contoh (<span>) (sebagai blok navigasi website) dan <footer> (biasanya dikaitkan pada bagian bawah suatu website atau baris terakhir dari kode html). Banyak elemen lain yang memberikan kegunaan baru melalui antar muka yang telah distandarkan, seperti elemen multimedia <audio> dan <video>. Beberapa elemen yang telah ditinggalkan juga ditiadakan, termasuk elemen presentasi semata seperti <font> dan <center>, yang sebenarnya dapat dikerjakan menggunakan Cascading Style Sheet (CSS).

J. Pembaharuan pada HTML5

Kehadiran HTML5 dinilai cukup membantu dengan penambahan beberapa fitur baru. Pada postingan kali ini saya akan menjelaskan apa saja fitur baru yang dimaksud dan bagaimana penggunaan untuk setiap fitur baru tersebut. Pada HTML5 terdapat beberapa penambahan diantaranya sebagai berikut.

- Elemen Canvas

- Elemen Media

- Elemen Form

- Elemen Semantik / Struktural

1. Canvas

Elemen canvas digunakan untuk draw atau menggambar. Canvas hanya saja disini bukan alat untuk menggambar tapi hanya sebagai media pendukung untuk menggambar. Untuk menggambar dengan grafik disini biasanya dengan menggunakan javascript.

Contoh penggunaan Canvas.

var canvas=document.getElementById('myCanvas');//fungsi untuk menggambar canvas

var ctx=canvas.getContext('2d');//gambar bujursangkar pertama

ctx.fillStyle='#FF0000';//memberikan warna pada bagian canvas

ctx.fillRect(0,0,80,100);//memberikan parameter titik koordinat

</script>//mengakhiri script canvas

Output :

Canvas diatas juga bisa diatur ukurannya dengan memasukkan attribut height dan weight pada tag canvas dengan cara <canvas id=”mycanvas” height=”300px” weight=”300px”></canvas>.

2. Audio

Untuk memasukkan suara pada html bisa menggunakan tag <audio>. Format suara yang telah didukung hingga saat ini adalah MP3, Ogg dan WAP. Untuk dukungan pada web browser bisa dilihat pada tabel berikut ini.

Browser	MP3	Wav	Ogg
Internet Explorer Chrome	YES YES	NO YES	NO YES
Firefox	NO Update: Firefox 21 running on Windows 7, Windows 8, Windows Vista, and Android now supports MP3	YES	YES
Safari	YES	YES	NO
Opera	NO	YES	YES

Dan untuk MIME-nya adalah sebagai berikut ini.

Format	MIME-type
MP3	audio/mpeg
Ogg	audio/ogg
Wav	audio/wav

Untuk attribut audio diatas adalah seperti tabel berikut ini.

Attributes

Attribut	Value	Deskripsi
autoplay	autoplay	Untuk memulai audio secara otomatis pada web terbuka
Controls	controls	Untuk menampilkan kontrol seperti volome, seek audio, dan juga tombol untuk memulai/pause
loop	Loop	Untuk mengulang audio kembali setelah pemutaran awal selesai
Muted	muted	Untuk mematikan suara
preload	Auto metadata none	Untuk memuat ulang audio ketika halaman dimuat ulang
Src	URL	Untuk memberikan alamat web audio ketika diklik.

Contoh Script :

Your browser does not support the audio tag.

</audio><-- menutup tag audio-->

3. Video

Sama halnya dengan audio, hanya saja untuk video kita gunakan tag <video> dan menutupnya kembali dengan </video>. Untuk format yang didukung saat ini ada 3 yaitu MP4, Ogg dan WebM.

Browser	MP4	WebM	Ogg
Internet Explorer	YES	NO	NO
Chrome	YES	YES	YES
Firefox	NO Update: Firefox 21 running on Windows 7, Windows 8, Windows Vista, and Android now supports MP4	YES	YES
Safari	YES	NO	NO
Opera	NO	YES	YES

Untuk MIME-nya sendiri menggunakan seperti tabel beikut ini.

Format	MIME-type
MP4	video/mp4
WebM	video/webm
Ogg	video/ogg

Untuk attribut yang bisa digunakan pada tag video adalah sebagai berikut ini.

Attribute	Value	Deskripsi
autoplay	autoplay	Memulai secara otomatis video
controls	controls	Untuk menampilkan control video
height	pixels	Untuk mengatur tinggi frame video
loop	loop	Memutar video secara berulang-ulang
muted	muted	Untuk mematikan fungsi suara pada video
poster	URL	Memunculkan poster / gambar pada saat video buffer atau diunduh.
preload	Auto metadata none	Untuk memuat ulang video
Src	URL	Untuk memberikan link video
width	Pixels	Untuk mengatur lebar frame video

4. Source

Source digunakan disini sama halnya untuk keperluan video dan audio, hanya saja pada <source> akan kita gunakan jika kita memberikan 2 sumber dimana file tersebut memiliki isi yang sama tetapi format yang berbeda. Tujuannya disini adalah web browser akan memilih memutar yang mana nantinya sesuai dengan format yang didukung oleh web browser.

Contoh penggunaan <Source> </source> :

Your browser does not support the audio element.

</audio>

Attributes

Attribute	Value	Deskripsi
Media	media_query	Format dari media yang digunakan
Src	URL	Untuk memberikan link sumber media
Type	MIME_type	Untuk mendefenisikan tipe MIME

5. Embed

Embed digunakan untuk melampirkan file dari eksternal seperti *.swf dan lain-lain. Untuk contoh penggunaannya adalah sebagai berikut ini.

Untuk attribut penggunaan embed bisa ditambahkan pada tag tersebut attribut seperti pada tabel berikut ini.

Attributes

Attribute	Value	Description
Height	Pixels	Untuk mendefenisikan ukuran tinggi frame media.
Src	URL	Untuk memberikan sumber media yang dilampirkan
Type	MIME_type	Untuk menspesifikasikan tipe dari MIME
Width	pixels	Untuk mengatur lebar dari frame media pada saat program dijalankan di browser.

6. Track

Track disini digunakan untuk melampirkan seperti subtitle text pada media. Contoh penggunaanya adalah sebagai berikut ini.

<track src="subtitles_en.vtt" kind="subtitles" srclang="en"

label="English"><--Merupakan subtitle yang dilampirkan pada video-->

<track src="subtitles_no.vtt" kind="subtitles" srclang="no"

label="Norwegian">

</video>

Attribut yang bisa digunakan padatag track ini adalah sebagai berikut ini.

Attribute	Value	Deskripsi
Default	default	Memberikan text default/subtitle pada video
kind	Captions, chapters, descriptions, metadata, subtitles	Menspesifikasikan format dari text yang akan dimunculkan pada layar
Label	text	Memberikan labael pada subtitle
Src	URL	Merupakan suatu keharusan jika kita ingin melampirkan file
srclang	language_code	Menspesifikasikan tipe dari file lampiran seperti jenisnya (required if kind="subtitles")

7. Drag and Drop

Drag and Drop adalah sebuah fitur umum. Dengan fitur ini memukinkan untuk memindahkan objek ke lokasi lainnya.

Contoh Program :

8. Geolocation

Geolocation digunakan untuk mengecek posisi si pengguna jika memukinkan.

Contoh Program :

var x=document.getElementById("demo");

function getLocation()

{

if (navigator.geolocation)

//Jika navigator mendukung pada web browser atau perangkat yang digunakan

{

navigator.geolocation.getCurrentPosition(showPosition);

//Mendapatkan posisi terbaru dari si pengguna

}

else{x.innerHTML="Geolocation is not supported by this browser.";}

<--Jika perangkat yang digunakan tidak mendukung geolocation

}

function showPosition(position)

//nama fungsi

{

x.innerHTML="Latitude: " + position.coords.latitude +

"<br>Longitude: " + position.coords.longitude;

}

</script>

9. Input Types

Input tipe pada form yang baru digunakan pada HTML5 trdapat tipe yang baru. Hanya saja tidak semua tipe didukung oleh web browser.

Tag tersebut diataranya adalah sebagai berikut.

• color

• date

• datetime

• datetime-local

• email

• month

• number

• range

• search

• tel

• time

• url

• week

Untuk format penggunaan input type tersebut sama hanya dengan input tipe yang digunakan pada form di HTML4 yaitu sebagai berikut ini.

Birthday (date and time): <input type="datetime" name="bdaytime">

K. API dalam HTML5

Untuk menambah keluwesan pemformatan, pada HTML5 telah dispesifikasikan pengkodean application programming interfaces (APIs). Antarmuka document object model (DOM) yang ada dikembangkan dan fitur de facto didokumentasikan. Beberapa APIs terbaru pada HTML5 antara lain :

Elemen canvas, sebagai mode untuk menggambar object dua dimensi (2D). Lihat spesifikasi 1.0 untuk canvas 2D.

1. Timed media playback

2. Media penyimpanan luring (aplikasi web luring).

3. Penyuntingan dokumen

4. Drag and Drop

5. Cross-document messaging

6. Manajemen sejarah kunjungan penjelajah web

7. Tipe MIME dan penanggung jawab protokol registrasi.

Tidak semua teknologi di atas dimasukkan pada spesifikasi HTML5 W3C, meski teknologi tersebut telah termaktub dalam spesifikasi milik WHATWG HTML. Beberapa teknologi yang juga terkait namun tidak dijadikan bagian dalam spesifikasi HTML5 W3C dan WHATWG HTML5 adalah :

a. Geolocation

b. Web SQL Database, media penyimpanan database lokal.

c. API Database terindeks, mode penyimpanan hierarkis key-value (WebSimpleDB).

d. Web Speech API

L. Kelebihan dan Kekurangan HTML5

>> Kelebihan yang dimiliki HTML 5 antara lain :

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
Penanagan kesalahan yang lebih baik
Mengurangi kebutuhan untuk plugin eksternal ( Seperti Flash )
Lebih markup untuk menggantikan scripting

Adapun kelebihan yang paling menonjol dari HTML 5 adalah kemudahan akses yang lebih baik. Tag Baru seperti header, footer, nav, section, asidedll memungkinkan browser untuk mengakses konten dengan mudah. Sebelumnya, kita hanya menentukan hal tersebut dengan tag dan menggunakan atribut id ataupun class. Dengan tag html 5 yang baru, browser mampu menjelajah dokumen HTML dengan lebih baik lagi. Selain itu dukungan yang lebih baik terhadap video dan audio. Beberapa Peramban yang sudah mendukung HTML 5 yaitu Safari, Chrome, Firefox, dan Opera.

>> Kelemahan yang ada pada HTML 5

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

M. Pembutan Aplikasi Berbasis Web

HTML5 merupakan perkembangan dari versi sebelumnya HTML4 atau XHTML 1.0 yang mempunyai banyak kelebihan dari versi sebelumnya. Dalam perkembangannya HTML5 sudah mulai dan banyak digunakan oleh para web designer atau web developer untuk membuat halaman website dikarenakan kelebihannya seperti membuat validasi form tanpa melakukan javascript, mamainkan animasi, audio atau video tanpa memerlukan plugin khusus seperti adobe flash dan bisa menyimpan data di dalam lokal komputer.

Selain itu HTML5 telah didukung oleh major browser seperti google chrome, mozilla firefox, opera dan safari. HTML 5 juga menyederhanakan kode dengan menyingkirkan elemen yang telah jatuh dari penggunaan atau terbukti tidak membantu. Karena array masalah browser, frame tidak akan lagi diperbolehkan, dan karena style sheet menangani style lebih baik dari tag HTML, “presentasi” tag seperti < font >, < center > and < strike > tidak akan lagi berlaku.

Perubahan Layout

Sebelumnya, halaman dalam HTML biasanya dibagi menjadi blok menggunakan tag < div>. Sayangnya, ini sering mengakibatkan kode membingungkan atau terlalu-rumit:

HTML 5 perbaikan masalah ini dengan tag semantik baru

<header>, <footer>,

<nav>, <content>,

<aside>, <article>,

<hgroup>, <section>,

<address>, <audio> dan <video>.

Ini semua berperilaku persis seperti tag <div>

namun membuat kode lebih mudah dibaca. Kode di atas sekarang dapat ditulis ulang sebagai berikut:

</content>

>> Beberapa bagian yang akan dibahas :

1. Bagaimana cara memanggil CSS dari HTML

2. Membuat form sederhana

3. Membuat folder-folder untuk membuat website

4. Mengetahui fungsi beberapa tags

Untuk hasil akhirnya seperti pada gambar dibawah ini.

Step 1

Untuk tutorial ini saya tidak akan memberitahu bagaimana cara menginstal XAMPP, saya anggap kita sudah mengetahui menggunakan XAMPP. Langsung saja membuat folder untuk memanggil file-file html nya. Misal folder instalasi XAMPP nya berada di C:\xampp\htdocs\music, pada contoh ini kita membuat folder dengan nama “music” seperti contoh di atas.

Di dalam folder music ini terdiri dari 3 files diantaranya index.html, style.css dan folder images, untuk membuat file index.html dan style.css bisa menggunakan notepad atau lainnya.

Sehingga susunan foldernya seperti gambar di bawah ini.

Step 2

a. Basic Mark Up

Sebelum kita melangkah ke step berikutnya kita perlu mengetahui fungsi-fungsi tags di atas.

1. <!DOCTYPE html>

Doctype yang singkat sebagai ciri khas HTML5

2. <html> dan </html>

Tags yang harus ada untuk memberitahu browser kalau type dokumen ini bertype html, yang perlu diperhatikan semua tag html harus ada pembuka dan penutup, maksudnya seperti <tags> harus diakhiri dengan tag penutup </tags>.

3. Tag <title>Judul Website Kita</title>

1. Judul Website Kita

Tags ini untuk memberitahu apa judul dari website kita

4. <body>…</body>

Untuk memanggil file css kita perlu menambahkan script ini di bawah tag <title>

5. <link href="style.css" rel="stylesheet" type="text/css" />

Bagian Body adalah isi dari dokumen HTML yang didalamnya telah disusun kode kode sehingga akan menampilkan website yang anda hendaki.

b. Memasukan script pendukung ke dalam bagian Body html

Persis di bawah tag <body> masukan kode berikut

1. File index.html

Sehingga script lengkap untuk contoh di atas adalah sebagai berikut, silahkan copy ke Notepad ++ atau lainnnya kemudian simpan dengan nama index.html di folder music.

1. script Notepad ++

2.1 File style.css

2.2

2.3

2.4

2.5

BAB III

PENUTUP

A. KESIMPULAN

Untuk fungsi HTML sendiri yaitu antara lain membuat, mendesain, dan mengontrol tampilan dari web page (Halaman Web) dan isinya, mempublikasikan document secara online sehingga bisa di akses, dilihat dan ditampilkan dari dan ke seluruh dunia.

HTML5 adalah bahasa markah generasi ke-5 yang memiliki banyak kelebihan, antara lain Dukungan yang lebih baik untuk penyimpanan secara offline, unsur kanvas untuk menggambar, video dan elemen audio untuk media pemutaran file multimedia dll. HTML5 juga telah terstandar World Wide Web Consorsium (W3C).

Pemanfaatan HTML5 mulai banyak digunakan oleh para pendesign web. Hal ini dikarenakan HTML5 lebih simple dan banyak kemudahan. Untuk pembaharuan HTML5 sendiri meliputi audio, video, canvas, source, drag and drop, dan embed.

B. SARAN

HTML5 yang menawarkan banyak kemudahan seharusnya bisa banyak digunakan oleh banyak orang. Sayangnya tidak banyak orang yang tertarik dengan pekerjaan semacam pendesign web. Hal ini dikarenakan banyak orang berpikir bahwa mendesign web itu rumit, maka hal inilah yang seharusnya diubah. Karena dengan HTML5 mendesign web menjadi lebih simple dan tidak serumit yang dibayangkan. Maka pengenalan dunia web seharusnya lebih digencarkan, karena dengan mengenal dunia web, maka secara tidak langsung akan mengenal HTML5 dan HTML5 adalah menjadi masa depan dunia internet.

C. LAMPIRAN