dasar-dasar html5 -...

Lisensi Dokumen:

Copyright © 2008-2019 ilmuti.org

Seluruh dokumen di ilmuti.org dapat digunakan, dimodifikasi dan disebarkan secara bebas untuk tujuan bukan komersial (nonprofit), dengan syarat tidak menghapus atau merubah atribut penulis dan pernyataan copyright yang disertakan dalam setiap dokumen. Tidak diperbolehkan melakukan penulisan ulang, kecuali mendapatkan ijin terlebih dahulu dari ilmuti.org

DASAR-DASAR HTML5

Nama Penulis : Nursetiadi Darmawan Yusuf

[email protected]

ABSTRAK

Perkembangan teknologi memang selalu mengalami peningkatan yang sangat pesat. Hal

ini terbukti dengan digunakannya komputer, smartphone, hingga internet dalam berbagai

segi kehidupan.

Salah satu media yang digunakan para programmer dalam membuat dan mendesain

berbagai program dan aplikasi di internet yaitu dengan menggunakan HTML5. HTML5

adalah versi terbaru dari HTML (HyperText Markup Language) yang mana

dikembangkan oleh W3C atau Word Wide Web Consortium.

HTML merupakan salah satu unsur penting dalam pemrograman di internet. HTML

(Hypertext Markup Language) adalah bahasa pengkodean untuk menghasilkan dokumen-

dokumen hypertext untuk digunakan di World Wide Web. Namun HTML bukanlah

sebuah bahasa pemrograman, tetapi hanyalah berisi perintah-perintah yang telah

terstruktur berupa tag-tag penyusun. HTML merupakan pengembangan dari standar

pemformatan dokumen teks yaitu Standard Generalized Markup Language (SGML).

HTML sebenarnya adalah dokumen ASCII atau teks biasa, yang dirancang untuk tidak

tergantung pada suatu sistem operasi tertentu.

KATA KUNCI: HTML, HTML5,WEB

http://www.ilmuti.org/



https://4.bp.blogspot.com/-hc-WPDTyhEg/UnMrz2io5GI/AAAAAAAAAQg/hoLcAOHIq3M/s1600/HTML5_Wallpaper_1680x1050.png

Lisensi Dokumen:



BAB I

PENDAHULUAN

1. Latar Belakang

Perkembangan setiap segi kehidupan manusia di abad ke 21 ini semakin maju

dan berkembang. Dimulai dari segi sosial, budaya, pendidikan, ekonomi, politik, dan

teknologi. Perkembangan dalam berbagai segi kehidupan manusia tersebut menimbulkan

perubahan dalam mekanisme setiap masing-masing segi. Di sisi lain, perubahan dalam

mekanisme suatu segi yang satu ikut mempengaruhi mekanisme segi yang lain. Hal

tersebut dikarenakan adanya saling keterkaitan antara segi yang satu dengan segi yang

lain. Sebagai salah satu contohnya yaitu terjadi pada segi teknologi dan segi pendidikan.

Perkembangan teknologi memang selalu mengalami peningkatan yang sangat

pesat. Hal ini terbukti dengan digunakannya komputer, smartphone, hingga internet

dalam berbagai segi kehidupan. Tidak hanya di kalangan instansi-instansi pemerintahan

atau swasta saja yang bisa menggunakannya, masyarakat awam pun saat ini bisa

mengaksesnya dengan begitu bebasnya. Karena memang banyak diakui penggunaan

produk-produk teknologi tersebut telah banyak membantu mempermudah setiap orang

dalam mengerjakan pekerjaannya.

Terlebih teknologi internet yang sangat banyak memberikan berbagai

informasi bagi setiap penggunanya. Mengingat betapa pentingnya hal tersebut maka para

programmer berusaha membuat dan mendesain berbagai program-program dan aplikasi

yang dibutuhkan oleh para penggunanya saat melakukan browsing internet. Tujuannya

agar setiap pengguna internet bisa semakin mudah dalam mencari informasi atau materi

yang dibutuhkannya.

Salah satu media yang digunakan para programmer dalam membuat dan

mendesain berbagai program dan aplikasi di internet yaitu dengan menggunakan

HTML5. HTML5 adalah versi terbaru dari HTML (HyperText Markup Language) yang

mana dikembangkan oleh W3C atau Word Wide Web Consortium. Apabila dilihat dari

perkembangannya teknologi HTML ini terbilang cukup pesat mengingat versinya sudah

sampai ke seri yang ke 5. Pemakaiannya pun semakin banyak semenjak kehadirannya

pada tahun 1990.




Lisensi Dokumen:



Oleh karena itu, makalah ini dibuat untuk menjelaskan mengenai bahasa

pemrograman HTML5 yang saat ini terbilang cukup banyak penggunanya.

B. Rumusan Masalah

Dari latar belakang yang telah dijelaskan, penulis dapat merumuskan masalah

sebagai berikut:

1. Apa yang dimaksud dengan HTML5 ?

2. Bagaimana sejarah HTML5 ?

3. Apa saja dasar-dasar HTML5 ?

4. Apa saja struktur HTML5 ?

5. Apa tujuan dibuatnya HTML5 ?

6. Apa saja istilah-istilah dalam HTML5 ?

7. Apa fungsi HTML5 ?

8. Apa saja fitur-fitur dalam HTML5 ?

9. Apa kelebihan HTML5 ?

10. Apa kelemahan HTML5 ?

11. Bagaimana contoh penggunaan HTML5 ?

3. Tujuan Penulisan

Adapun tujuan dari penulisan makalah ini antara lain:

1. Untuk mengetahui pengertian HTML5




Lisensi Dokumen:



2. Untuk mengetahui sejarah HTML5

3. Untuk mengetahui dasar-dasar HTML5

4. Untuk mengetahui struktur HTML5

5. Untuk mengetahui tujuan dibuatnya HTML5

6. Untuk mengetahui istilah-istilah dalam HTML5

7. Untuk mengetahui fungsi-fungsi HTML5

8. Untuk mengetahui fitur-fitur HTML5

9. Untuk mengetahui kelebihan HTML5

10. Untuk mengetahui kelemahan HTML5

11. Untuk mengetahui bagaimana contoh penggunaan HTML5

4. Metodologi Pengumpulan Data

Dalam penulisan makalah ini, metode pengumpulan data yang penulis

gunakan adalah metode kepustakaan. Yaitu dimana penulis mencari referensi melalui

internet yang berkaitan dengan pokok bahasan yang penulis kembangkan.

BAB II

PEMBAHASAN

1. Pengertian HTML

Program adalah kata, ekspresi, pernyataan atau kombinasi yang disusun dan

dirangkai menjadi satu kesatuan prosedur yang berupa urutan langkah untuk

menyelesaikan masalah dan diimplementasikan dengan menggunakan bahasa




Lisensi Dokumen:



pemrograman sehingga dapat dieksekusi oleh komputer. Pemrograman adalah proses

mengimplementasikan urutan langkah untuk menyelesaikan suatu masalah dengan

menggunakan suatu bahasa pemrograman. Bahasa pemrograman adalah suatu prosedur

penulisan program. Sedangkan pemrograman terstruktur adalah metode untuk

mengorganisasikan dan membuat kode-kode program supaya mudah untuk dimengerti,

mudah ditest dan mudah dimodifikasi. Salah satu contoh pemrograman adalah

pemrograman di internet.

HTML merupakan salah satu unsur penting dalam pemrograman di internet.

HTML (Hypertext Markup Language) adalah bahasa pengkodean untuk menghasilkan

dokumen-dokumen hypertext untuk digunakan di World Wide Web. Namun HTML

bukanlah sebuah bahasa pemrograman, tetapi hanyalah berisi perintah-perintah yang

telah terstruktur berupa tag-tag penyusun. HTML merupakan pengembangan dari standar

pemformatan dokumen teks yaitu Standard Generalized Markup Language (SGML).

HTML sebenarnya adalah dokumen ASCII atau teks biasa, yang dirancang untuk tidak


HTML ini merupakan sebuah format bahasa dari world wide web

(WWW) untuk menulis dan menampilkan dokumen. Sehingga dokumen tersebut dapat

dengan mudah tersebar ke PC melalui media jaringan komputer atau internet. HTML ini

berupa kode tag yang menginstruksikan browser untuk menghasilkan tampilan sesuai

dengan yang diinginkan. Sehingga, untuk dapat membuka dokumen yang ditulis dengan

HTML maka diperlukan sebuah tool yaitu browser misalnya Opera, Mozila, Google

Chrome, Netscape, dan banyak lagi yang lainnya. HTML juga dapat dikenali oleh aplikasi

pembuka email ataupun dari PDA dan program lain yang memiliki kemampuan browser.

Adapun pengertian dari HTML5 itu sendiri adalah versi terbaru dari HTML

(HyperText Markup Language) yang mana dikembangkan oleh W3C atau Word Wide

Web Consortium. HTML5 diciptakan dalam pengembangan bahasa HTML untuk

memperbaiki konten dan memperbarui teknologi multimedia yang sudah ada

pada HTML 4 dan versi sebelumnya agar mudah dijalankan oleh browser dan mudah

dimengerti. HTML5 merupakan kerjasama antara World Wide Web Consortium

(W3C) dan Web Hypertext Application Teknologi Working Group

(WHATWG).WHATWG bekerja dengan bentuk web dan aplikasi, dan W3C bekerja

dengan XHTML 2.0. Tujuan utama pengembangan HTML5 adalah untuk memperbaiki

teknologi HTML agar mendukung teknologi multimedia terbaru, mudah dibaca oleh

manusia dan juga mudah dimengerti oleh mesin.




Lisensi Dokumen:



Di sisi lain HTML5 sering juga disebut dengan Semantic Web. Semantic web

berasal dari bahasa Yunani (Greek), merupakan bahasa pembelajaran semiotic, yakni

pembelajaran untuk memahami penanda. Semantic sendiri mempunyai arti bahasa yang

berfokus pada penanda untuk mengetahui arti yang terkandung di dalamnya. Jadi, yang

dimaksud semantic web adalah bahasa pemrograman yang mempunyai penanda khusus

dalam implementasinya dengan tujuan agar mampu mendeskripsikan apa yang

terkandung dalam website tersebut. Web semantic ini bukan hanya dikembangkan di Web

2.0, namun sudah ke Web 3.0 bahkan akan berkembang ke Web 4.0. Perkembangan

teknologi memang cepat sekali berubah.

2. Sejarah HTML5

Hypertext Markup Language (HTML) adalah bahasa yang digunakan untuk

menulis halaman web. HTML merupakan pengembangan dari standar pemformatan

dokumen teks yaitu Standard Generalized Markup Language (SGML). HTML

sebenarnya adalah dokumen ASCII atau teks biasa, yang dirancang untuk tidak


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 energi tinggi di Jenewa

mencoba untuk melakukan pengembangan terhadap SGML. Dan akhirnya setelah

pemikiran dan perkembangan-perkembangan yang sedemikian rupa rumitnya, lahirlah




http://web.archive.org/web/20030916035949/http:/www.ibm.com/

Lisensi Dokumen:



HTML yang digunakan untuk membuat halaman website. HTML ini pertama kali

dipopulerkan oleh browser Mosaic.

Dalam perkembangannya selama awal tahun 1990 HTML mengalami

perkembangan yang sangat pesat. Setiap pengembangan HTML pasti akan menambahkan

kemampuan dan fasilitas yang lebih baik dari versi sebelumnya. Namun perkembangan

resmi dikeluarkan pada bulan November 1995 oleh IETF (Internet Engineering Task

Force). HTML 2.0 ini merupakan penyempurnaan dari HTML+ (1993). Sejak tahun

1996, Worl Wide Web Consortium, (WWWC) 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 WWWC.

HTML 3.0 (1995) memberikan kemampuan lebih daripada versi sebelumnya.

Sebuah usaha dari World Wide Web Consortium’s (W3C) HTML Working Group pada

tahun 1996 menghasilkan HTML 3.2. HTML versi ini secara resmi diterbitkan pada bulan

Januari 1997. HTML versi terbaru adalah HTML 4.01 yang dikeluarkan secara resmi oleh

W3C pada tanggal 24 April 1998. HTML merupakan perbaikan dari HTML 4.0 yang

lebih dulu diterbitkan. (18 Desember 1997). Setelah berakhirnya masa pengembangan

HTML4 pada tahun 1998, dilanjutkan perkembangan HTML4 untuk XML yang dikenal

dengan XHTML 1.0. XHTML 1.0 selesai dikembangkan pada tahun 2000. Saat itu

sebenarnya HTML akan mulai dikembangkan, namun masih menunggu proses

pengembangan XHTML 2.0 yang mana selesai pada tahun 2003.

Tahun 2004 kembali diadakan workshop tentang evolusi untuk HTML5 dan

saat itulah muncul ide-ide dan gagasan tentang Semantic Web. Tahun 2007, W3C ikut

serta dalam pengembangan HTML5 dan terbentuklah suatu komunitas WHATWG (Web

Hypertext Application Technology Working Group). Perusahaan besar seperti Mozilla,

Opera dan Apple mengakui HTML5 dipublikasikan oleh W3C dengan lisensi komunitas

WHATWG.

HTML5 telah dipublikasikan secara resmi oleh W3C pada bulan Mei 2011

dan rencananya akan terus dikembangkan hingga tahun 2014 nanti. Walaupun HTML5

masih terus dikembangkan, jangan khawatir untuk menggunakan HTML5 karena saat ini

HTML5 hanya membutuhkan penyempurnaan saja, sudah tidak lagi berada di masa

percobaan yang bisa berstatus produksi gagal. Sejauh ini browser desktop maupun

browser mobile sudah mampu mengimplementasikan HTML5, walaupun belum

sepenuhnya sempurna. Browser yang saat ini paling maju untuk fitur HTML5 atau

semantic web adalah Google Chrome.




Lisensi Dokumen:



3. Dasar-Dasar HTML5

Mendesain HTML berarti melakukan suatu tindakan pemrograman. Namun

HTML bukanlah sebuah bahasa pemrograman. HTML hanyalah berisi perintah-perintah

yang telah terstruktur berupa tag-tag penyusun. Menuliskan tag-tag HTML tidaklah

sebatas hanya memasukkan perintah-perintah tertentu agar HTML kita dapat diakses oleh

browser. Mendesain HTML adalah sebuah seni tersendiri. Homepage yang merupakan

implementasi dari HTML adalah refleksi dari orang yang membuatnya. Untuk itu perlu

mendesainnya dengan baik agar para pengunjung homepage merasa senang dan

bermanfaat.

Mendesain HTML dapat dilakukan dengan dua cara:

1. Menggunakan HTML Editor, seperti Microsoft FrontPage, Adobe Dreamweaver, dan

lain-lain. Dapatkan editor HTML lainnya disini.

2. Dengan cara menuliskan sendiri secara manual satu persatu tag-tag HTML ke dalam

dokumen HTML.

Ada kelebihan dan kekurangan dari dua cara di atas. Cara pertama kelebihannya adalah

HTML Editor merupakan sebuah program yang khusus didesain untuk membuat,

melakukan editing bahkan mem-publish ke internet. Dengan kemampuannya

menggabungkan kemudahan dan kecanggihan teknologi internet ke dalam dokumen

HTML maka cara ini sangat disukai oleh para pemula dan desainer yang tidak ingin

belajar lebih mendalam mengenai HTML. Sedangkan cara kedua adalah menuliskan

secara manual satu persatu tag-tag HTML. Hal ini sangat disarakan sulit dikarenakan akan

memakan tenaga dan waktu ekstra untuk melakukannya, ditambah lagi harus dilakukan

cara-cara konvensional untuk melihat hasilnya pada web browser. Namun pada cara

kedua adalah dasar dari segala bentuk HTML yang akan dipelajari, karena dengan cara

itulah pengguna akan lebih paham mengenai cara kerja dan berbagai perintah yang biasa

dipakai pada bahasa HTML.

4. Struktur Pada HTML5

Layaknya dokumen standar lainnya, HTML5 juga memiliki struktur tertentu.

Secara garis besar, struktur dokumen HTML5 cuma terdiri dari dua bagian, yaitu head

dan body. Namun tentunya ada beberapa detail lain yang perlu diperhatikan juga. Bagian

head diawali dengan tag <head> dan ditutup dengan pasangannya, yaitu </head>. Bagian

body diapit oleh tag <body> dan </body>. Bagian head dan body tersebut harus diapit




http://www.supriadi.web.id/

http://www.supriadi.web.id/

Lisensi Dokumen:



lagi oleh tag <html> dan </html>. Dan jangan lupa, di baris paling awal harus ada

deklarasi dokumen HTML sebagai berikut:

· <!DOCTYPE html>

Jadi secara lengkap, struktur dokumen HTML5 terlihat seperti Listing 1. Listing 1 ini

tidak ditujukan untuk dijalankan pada browser, melainkan hanya menunjukkan struktur

dokumen HTML5 saja.

· Bagian Head

Bagian head HTML5 digunakan untuk menyimpan berbagai informasi mengenai isi

dokumen tersebut. Paling sedikit, bagian head harus mengandung judul dokumen. Judul

dokumen ini diapit oleh tag <title> dan </title> serta akan ditampilkan pada bagian title

bar browser. Selain judul dokumen, bagian head dapat mengandung informasi-informasi

berikut:

a) Metadata: berisi berbagai data tambahan tentang dokumen HTML5 seperti nama

pengarang/penulis, tanggal publikasi, deskripsi isi dokumen, kata kunci, dan lain-lain.

Informasi ini dinyatakan oleh tag <meta> saja, tanpa tag penutup </meta>.

b) Base URL: menentukan basis lokasi untuk link-link yang ada pada dokumen. Informasi

ini dinyatakan oleh tag <base> saja, tanpa tag penutup </base>.

c) Link: menentukan link ke dokuman lain yang terkait erat dengan dokumen HTML5,

misalnya skrip CSS yang digunakan dalam desain halaman web. Informasi ini dinyatakan

oleh tag <link> saja, tanpa tag penutup </link>.

d) Objek: berisi informasi mengenai objek yang mungkin ada pada dokumen HTML5.

Objek yang mungkin terkandung pada dokumen HTML5 antara lain adalah video, audio,

dan animasi flash. Informasi ini dinyatakan dengan diapit oleh tag <object> dan

</object>.

e) Skrip: berisi informasi mengenai skrip pemrograman yang mungkin ada pada dokumen

HTML5. Skrip pemrograman ini umumnya bersifat client-side seperti JavaScript.

Informasi ini dinyatakan dengan diapit oleh tag <script> dan </script>.

f) Style: berisi informasi mengenai desain halaman web dalam format CSS yang langsung

dituliskan di bagian head, bukan pada dokumen terpisah. Jika hendak dituliskan pada




Lisensi Dokumen:



dokumen terpisah, gunakan link. Informasi ini dinyatakan dengan diapit oleh tag <style>

dan </style>.

· Bagian Body

a) Bagian body HTML5 merupakan bagian yang nantinya diterjemahkan dan ditampilkan

oleh browser. Di bagian inilah terkandung berbagai tag yang menyatakan desain dokumen

HTML. Jadi bisa dibayangkan pastilah akan banyak terdapat tag HTML yang bisa

digunakan di bagian ini. Karena itu PCplus akan membahasnya sedikit demi sedikit mulai

dari yang paling mudah terlebih dahulu. Yang pertama adalah paragraf. Sebuah dokumen

yang terstruktur dengan baik pastilah terdiri dari beberapa paragraf. Untuk memisahkan

antara satu paragraf dengan paragraf yang lain digunakan tag <p>. Tag ini harus ditutup

dengan pasangannya, yaitu </p>.

b) Untuk sekedar ganti baris tanpa ganti paragraf, digunakan tag <br>. Karena tag ini tidak

memiliki pasangan maka ditulis dengan <br />. Ganti baris pada dokumen HTML5 perlu

diberi tag sendiri karena meski pada kode HTML-nya ganti baris tetapi browser tidak

akan menampilkannya pada baris terpisah.

c) Untuk memberikan format tampilan tertentu terhadap teks, tersedia beberapa tag

berikut:

• <b> dan </b> untuk menampilkan teks secara tebal.

• <i> dan </i> untuk menampilkan teks secara miring.

• <u> dan </u> untuk menampilkan teks dengan garis bawah.

• <font> dan </font> untuk menentukan jenis font.

• <img /> untuk menampilkan gambar.

• <hr /> untuk menampilkan garis horisontal.

d) Dalam menuliskan dokumen HTML5, yang sangat perlu diperhatikan adalah letak tag,

jangan sampai tag pembuka dan penutup tumpang tindih. Berikut adalah contoh yang

benar: <b><i>teks</i></b>.




Lisensi Dokumen:



5. Tujuan Dibuatnya HTML5

Terdapat beberapa tujuan mengapa HTML5 diciptakan, diantaranya yaitu:

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

2. Mengurangi kebutuhan untuk plugin eksternal (seperti Flash).

3. Penanganan kesalahan yang lebih baik.

4. Lebih banyak markup untuk menggantikan scripting.

5. HTML5 merupakan perangkat mandiri.

6. Istilah-Istilah Dalam HTML5

Meskipun HTML5 belum dirilis secara resmi, tetapi banyak fitur HTML5

yang sudah diimplementasikan oleh browser-browser besar seperti Mozilla Firefox,

Opera, Safari, dan Google Chrome. Seorang programmer harus mengetahui fitur-fitur

yang pastinya akan banyak dipakai di dunia Internet masa mendatang tersebut. Berikut

ini adalah beberapa hal tentang HTML5 yang wajib Anda ketahui, yaitu:

1. Deklarasi doctype baru

Sebelum membuat sebuah halaman dengan HTML5, tentu saja doctype yang digunakan

juga harus benar. Doctype pada HTML5 jauh lebih sederhana daripada XHTML,

sehingga tidak perlu menghafalnya. Pada doctype untuk XHTML 1.0, harus dituliskan

dengan panjang.




https://2.bp.blogspot.com/-bICmQJm5NEU/UnMrlg009bI/AAAAAAAAAQY/s-H8C2PPB1k/s1600/struktur-html5.jpg

Lisensi Dokumen:



2. 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, seperti pada gambar.

Struktur tersebut tidak terlihat semantic, sulit dibaca dan dideskripsikan, serta bagi

programmer HTML yang iseng, bisa saja id header diubah sesukanya. HTML5

menawarkan elemen-elemen yang umum digunakan dalam sebuah struktur halaman

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

dibaca, seperti pada gambar.




https://3.bp.blogspot.com/-TGv2t5cliHw/UnMsQdMni_I/AAAAAAAAAQo/5Azg1Q7IdcY/s1600/jjjj.jpg

Lisensi Dokumen:



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.

3. Contenteditable

Yaitu atribut baru dari HTML5 yang memungkinkan sebuah elemen untuk dimodifikasi

langsung pada tampilan. Hasil tampilan dari kode di atas adalah memungkinkan untuk

penambahan list dalam tag “ul” yang telah diberikan atribut tersebut. Jika dikombinasikan

dengan sedikit Javascript, fitur ini bisa menghasilkan sebuah mekanisme input yang

cukup powerful namun mudah untuk dibuat.

4. Validasi email

Dengan validasi langsung di tampilan, maka dapat mencegah seorang user untuk

memanggil script website dengan input yang salah. Ini dapat mengurangi jumlah request

yang tidak valid terhadap script program. HTML5 menawarkan fitur validasi email secara

langsung dengan mengubah type dari elemen input menjadi “email”. Sayangnya, masih

belum semua browser memberikan support untuk fitur ini. Dari percobaan penulis, salah

satu browser yang memiliki fitur ini adalah Opera.




https://3.bp.blogspot.com/-dJDLGQuQEjs/UnMsbLDl-1I/AAAAAAAAAQw/gTRzZNLwq3I/s1600/lll.jpg

Lisensi Dokumen:



5. Atribut required

Satu lagi untuk input pada HTML5, memungkinkan validasi pada sisi client terhadap

input yang harus diisi. Dengan demikian, tidak perlu membuat fungsi javascript untuk

melakukannya. Cukup menambahkan atribut “required” pada elemen “input”. Jika

tombol submit ditekan, akan muncul pesan error.

6. 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, maka harus mendeklarasikan style tersendiri agar

tampilan dapat seperti seharusnya.

Untuk kemudahan, seseorang bernama Remy Sharp telah membuat library javascript

untuk mengatasi error yang dibuat oleh IE tersebut. Script ini biasa disebut dengan

HTML5 shim.

G. Fungsi HTML5

HTML seperti yang dijelaskan sebelumnya merupakan bahasa pemrograman

berbahasa markup yang digunakan untuk menampilkan halaman website melalui

browser. Namun tentu bukan hal itu saja yang dapat dilakukan HTML, berikut ini fungsi

dari HTML.

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

isinya.

2. Mempublikasikan dokumen secara online sehingga bisa di akses, dilihat dan

ditampilkan dari dan ke seluruh dunia.

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

secara online.

4. Menambahkan objek-objek seperti image, audio, video dan juga java applet (aplikasi

java seperti java game dll) dalam document HTML.

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




Lisensi Dokumen:



H. Fitur-Fitur HTML5

HTML5 memiliki berbagai fitur yang terbilang cukup berguna bagi para

programmer. Fitur-fitur yang terdapat dalam HTML5 diantaranya yaitu:

v Canvas Elemen

Dengan tag <canvas>, area tersebut dapat digunakan untuk menggambar grafik secara

dinamis menggunakan javascript. Misalnya seperti shape lingkaran, garis diagonal,

hingga grafik 3 dimensi.

v Video & Audio Elemen

Sebelum HTML5, menyisipkan video atau audio dalam HTML memerlukan bantuan

plugin pihak ketiga seperti Apple Quicktime atau Adobe Flash. Dalam HTML5, cukup

gunakan tag <video> untuk menyisipkan file video, dan <audio> untuk file audio.

v Geolocation

Melacak posisi user bukanlah hal baru di internet, misalnya menggunakan IP addres

detection. Namun metode ini tidak selalu dapat diandalkan. Dengan HTML5 dan

javascript, posisi user dapat dilacak menggunakan informasi dari Wi-Fi dan GPS. Mirip

seperti yang digunakan pada Smartphone.

v Offline Web Application

HTML5 memungkinkan User untuk terus berinteraksi dengan aplikasi web tanpa harus

selalu online. Misalnya mengedit dokumen pada google docs atau mengedit foto di situs

olah gambar seperti picnic.com

Dan masih banyak fitur baru lainnya seperti kemampuan untuk Drag and

Drop, text api, datagrid, Cross document mesaging, SVG elemen dan lainnya.

I. Kelebihan HTML5

Beberapa kelebihan yang dimiliki oleh HTML5 (sebagai hipotesis awal) adalah:

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

kode nampak terlihat lebih sederhana daripada penggabungan antara html, css dan java

script.




Lisensi Dokumen:



- Greater consistency, HTML5 telah melakukan banyak sekali penambahan sintaks yang

dibuat dalam struktur lebih baik dan lebih sederhana daripada sintaks-sintaks

sebelumnya. Hal ini membuat developer terbantu dalam meningkatkan konsistensi dalam

membangun sebuah web.

- Improve Semantics, dengan berbagai elemen kode di dalam html5 yang telah

distandarisasi, maka nilai semantik dari sebuah web dapat lebih ditingkatkan. Itu berarti

bahwa bagian-bagian dari web seperti header, nav, footer dan beberapa bagian lainnya

terdefinisi dengan jelas maksud serta tujuannya selain itu juga terbentuk dalam sebuah

“machine readible format”Improved Accessibility, dengan teknologi HTML5 yang

memudahkan struktur pembangunan sebuah web, maka developer dapat membangun

pemahaman yang lebih detil mengenaik halaman web.

- Client-side Database, HTML5 menyediakan model database SQL yang baru dengan API

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

- Geolocation, HTML5 mempunyai API yang terintegrasi terhadap geolocation, fasilitas

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

- Offline Aplication Cache, pengguna dapat terus melakukan interaksi dengan aplikasi

meskipun mereka terputus dari jaringan internet.

- Smarter Forms, terdapat semacam reguler expression (regex) yang membuat form

mampu mengenali secara lebih baik tentang input, validasi data dan interaksi dengan

elemen lain (misal : format email, password dll)

- Sharper focus on Web Application Requiments, HTML5 membuat sebuah mekanisme

yang lebih mudah dalam hal pembuatan front end, aplikasi chat, tools drag and drop,

video player, pengolah grafis dan masih banyak lagi.

J. Kelemahan HTML5

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.




Lisensi Dokumen:



K. Contoh Penggunaan HTML5

Berikut ini adalah Contoh penggunaan HTML 5.

<!DOCTYPE html>

<html>

<head>

<title>HTML5</title>

<header>

<h1 align="center">Header HTML 5</h1>

<hr size=1 color="black"/>

<p><time pubdate datetime="2011-03-15"></time></p>

</header>

<nav>

<a href="/home/">Home</a>

<a href="/profil/">Profil</a>

<a href="/contact/">Contact</a>

<a href="/About Us/">About Us</a>

</nav>


</head>

<body>

<article>

<h3>HTML 5</h3>

<p color="red">Ini adalah contoh penggunaan HTML 5</p>




Lisensi Dokumen:



<img src="C:\Users\Public\Pictures\Sample Pictures\HTML5_Logo.png"

width=200 ><br>

<textarea rows="4" cols="50">

ini adalah contoh textarea

</textarea>

</article>


<footer>

© <i>design by </i> <span style="color:green">Dimas Setiawan</span>

</footer>

</body>

</html>

Berikut ini hasil dari sintaks diatas:




Lisensi Dokumen:



BAB III

PENUTUP

A. Kesimpulan

HTML (Hypertext Markup Language) adalah bahasa pengkodean untuk

menghasilkan dokumen-dokumen hypertext untuk digunakan di World Wide Web.

HTML5 adalah versi terbaru dari HTML (HyperText Markup Language) yang mana

dikembangkan oleh W3C atau Word Wide Web Consortium. HTML5 merupakan revisi

kelima dari HTML (yang pertama kali diciptakan pada tahun 1990 dan versi keempatnya,

HTML4, pada tahun 1997) dan hingga bulan Juni 2011 masih dalam pengembangan.

Selama ini, pengembangan dari HTML 4.01 dn XHTML 1.1 berjalan secara terpisah dan

diimplementasikan secara berbeda-beda oleh berbagai aplikasi pembuat website. Intinya,

dengan HTML5 bahasa pemrograman web akan lebih universal dan menjadi bahasa

pemersatu dari beberapa bahasa pemrograman web yang ada sekarang. Selain itu, banyak

fitur dari HTML5 yang telah dibuat sedemikian rupa dan memungkinkannya untuk

berjalan di perangkat mobile seperti smartphone dan tablet.




https://4.bp.blogspot.com/-LpuNvjriRXk/UnMs7ZVhV0I/AAAAAAAAAQ4/uKTeH7kM4qk/s1600/nn.png

Lisensi Dokumen:



Manfaat utama lainnya yang terkait dengan HTML5 yang seperti dukungan

Geolocation dan meningkatkan aksesibilitas dari halaman web. Ini hanya menyoroti

manfaat dari HTML5 dan para ahli percaya bahwa HTML5 akan berkembang menjadi

bahasa pengembangan secara online penting dalam waktu dekat. Ada baiknya memang

manusia mengetahui fitur-fitur yang pastinya akan banyak dipakai di dunia Internet masa

datang ini.

DAFTAR PUSTAKA

Kurniawan, Agus. 2013. Pengertian

HTML5 http[:]//indracare[.]blogspot[.]com/2012/06/pengertian-html5.html. 19 Oktober

2013

Rasyak, Rishak. 2012. Penggunaan

HTML. http[:]//muhammadrishak[.]blogspot[.]com/2012/10/muhammad-rishak-

rasyak.html. 19 Oktober 2013

Anonim. Definisi dan Pengertian

HTML5. http[:]//rizkyynwa[.]blogspot[.]com/2013/01/definisi-dan-pengertian-

html5.html. 19 Oktober 2013

Boja Sabara, Ferry. 2012. Pengertian dari HTML5 atau Semantic Web. http[:]//kisah-

progammer[.]blogspot[.]com/2012/10/pengertian-dari-html5-atau-semantic-web.html.

20 Oktober 2013

Mkr, Satank. 2012. Apa itu HTML5 dan Kelebihannya ? http[:]//mkr-

site[.]blogspot[.]com/2012/07/apa-itu-html5-dan-kelebihannya.html. 20 Oktober 2013

Supriadi. Sejarah HTML. http[:]//supriadi[.]blogs[.]unhas[.]ac[.]id/sejarah-html/. 20 Oktober

2013

Tokotua, Ardian. 2012. Struktur Baru

HTML5. http[:]//tokotuaforex[.]blogspot[.]com/2012/10/struktur-baru-html-5.html. 21

OKtober 2013




Lisensi Dokumen:



Nasahan, Jeanot. 2012. Pengertian, Tujuan, Fitur Baru dan Kelebihan

HTML5.http[:]//www[.]jeanotnahasan[.]com/2012/02/pengertian-tujuan-fitur-baru-

dan.html. 21 Oktober 2013

Haqqi. 2011. Komponen HTML5 yang Wajib

Diketahui. http[:]//blog[.]haqqi[.]net/2011/06/komponen-html5-yang-wajib-

diketahui/. 21 Oktober 2013

Anonim. 2013. Kelebihan

HTML5. http[:]//www1[.]quadesert[.]com/2013/07/kelebihan-html5/. 21 Oktober 2013

https[:]//ininia94[.]blogspot[.]com/2013/10/makalah-dasar-dasar-html5.html

Nama Nursetiadi Darmawan Yusuf

Hobi Baca apapun yang bisa dibaca

[email protected]




dasar-dasar html5 -...

Documents